/* ============================================================
   UNIFIED ICON SYSTEM (CSS Masks)
   ============================================================
   All icons follow a single design spec (Lucide-compatible):
     - 24x24 viewBox grid
     - stroke="currentColor", stroke-width="2"
     - round linecaps & linejoins, fill="none"

   Rendered via CSS masks so icons inherit `currentColor` and
   can be tinted with any text-color utility.

   Located in /static/portal/css/main/, so relative paths go
   up two directories (../../) to reach /static/portal/images/.

   Usage:
     <span class="icon icon-settings"></span>
     <span class="icon icon-bell icon-lg"></span>
     <span class="icon icon-refresh icon-spin"></span>
   ============================================================ */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    vertical-align: middle;
    flex-shrink: 0;
}

/* --- SIZE UTILITIES --- */
.icon-sm { font-size: 0.875em; }
.icon-lg { font-size: 1.25em; }
.icon-xl { font-size: 1.5em;  }

/* --- ANIMATIONS --- */
@keyframes icon-spin {
    to { transform: rotate(360deg); }
}
.icon-spin { animation: icon-spin 1s linear infinite; }

/* --- BRAND & LOGOS --- */
.icon-brand-wordpress { -webkit-mask-image: url('../../images/icons/brand-wordpress.svg'); mask-image: url('../../images/icons/brand-wordpress.svg'); }

/* --- NAVIGATION & CORE UI --- */
.icon-arrow-left      { -webkit-mask-image: url('../../images/icons/arrow-left.svg'); mask-image: url('../../images/icons/arrow-left.svg'); }
.icon-arrow-right     { -webkit-mask-image: url('../../images/icons/arrow-right.svg'); mask-image: url('../../images/icons/arrow-right.svg'); }
.icon-chevron-down    { -webkit-mask-image: url('../../images/icons/chevron-down.svg'); mask-image: url('../../images/icons/chevron-down.svg'); }
.icon-chevron-right   { -webkit-mask-image: url('../../images/icons/chevron-right.svg'); mask-image: url('../../images/icons/chevron-right.svg'); }
.icon-copy            { -webkit-mask-image: url('../../images/icons/copy.svg'); mask-image: url('../../images/icons/copy.svg'); }
.icon-edit            { -webkit-mask-image: url('../../images/icons/edit.svg'); mask-image: url('../../images/icons/edit.svg'); }
.icon-external-link   { -webkit-mask-image: url('../../images/icons/external-link.svg'); mask-image: url('../../images/icons/external-link.svg'); }
.icon-home            { -webkit-mask-image: url('../../images/icons/home.svg'); mask-image: url('../../images/icons/home.svg'); }
.icon-list            { -webkit-mask-image: url('../../images/icons/list.svg'); mask-image: url('../../images/icons/list.svg'); }
.icon-menu            { -webkit-mask-image: url('../../images/icons/menu.svg'); mask-image: url('../../images/icons/menu.svg'); }
.icon-plus            { -webkit-mask-image: url('../../images/icons/plus.svg'); mask-image: url('../../images/icons/plus.svg'); }
.icon-search          { -webkit-mask-image: url('../../images/icons/search.svg'); mask-image: url('../../images/icons/search.svg'); }
.icon-refresh         { -webkit-mask-image: url('../../images/icons/refresh.svg'); mask-image: url('../../images/icons/refresh.svg'); }
.icon-mail            { -webkit-mask-image: url('../../images/icons/mail.svg'); mask-image: url('../../images/icons/mail.svg'); }
.icon-inbox           { -webkit-mask-image: url('../../images/icons/inbox.svg'); mask-image: url('../../images/icons/inbox.svg'); }
.icon-trash           { -webkit-mask-image: url('../../images/icons/trash.svg'); mask-image: url('../../images/icons/trash.svg'); }
.icon-shirt           { -webkit-mask-image: url('../../images/icons/shirt.svg'); mask-image: url('../../images/icons/shirt.svg'); }
.icon-file-phone      { -webkit-mask-image: url('../../images/icons/file-phone.svg'); mask-image: url('../../images/icons/file-phone.svg'); }
.icon-building        { -webkit-mask-image: url('../../images/icons/building.svg'); mask-image: url('../../images/icons/building.svg'); }
.icon-calendar        { -webkit-mask-image: url('../../images/icons/calendar.svg'); mask-image: url('../../images/icons/calendar.svg'); }
.icon-file            { -webkit-mask-image: url('../../images/icons/file.svg'); mask-image: url('../../images/icons/file.svg'); }
.icon-shield-check    { -webkit-mask-image: url('../../images/icons/shield-check.svg'); mask-image: url('../../images/icons/shield-check.svg'); }
.icon-category        { -webkit-mask-image: url('../../images/icons/category.svg'); mask-image: url('../../images/icons/category.svg'); }
.icon-user            { -webkit-mask-image: url('../../images/icons/user.svg'); mask-image: url('../../images/icons/user.svg'); }

/* --- STATUS & ALERTS --- */
.icon-activity        { -webkit-mask-image: url('../../images/icons/activity.svg'); mask-image: url('../../images/icons/activity.svg'); }
.icon-alert-circle    { -webkit-mask-image: url('../../images/icons/alert-circle.svg'); mask-image: url('../../images/icons/alert-circle.svg'); }
.icon-bell            { -webkit-mask-image: url('../../images/icons/bell.svg'); mask-image: url('../../images/icons/bell.svg'); }
.icon-bug             { -webkit-mask-image: url('../../images/icons/bug.svg'); mask-image: url('../../images/icons/bug.svg'); }
.icon-circle-check    { -webkit-mask-image: url('../../images/icons/circle-check.svg'); mask-image: url('../../images/icons/circle-check.svg'); }
.icon-lock            { -webkit-mask-image: url('../../images/icons/lock.svg'); mask-image: url('../../images/icons/lock.svg'); }
.icon-shield-lock     { -webkit-mask-image: url('../../images/icons/shield-lock.svg'); mask-image: url('../../images/icons/shield-lock.svg'); }

/* --- INFRASTRUCTURE & CLOUD --- */
.icon-cloud           { -webkit-mask-image: url('../../images/icons/cloud.svg'); mask-image: url('../../images/icons/cloud.svg'); }
.icon-cloud-computing { -webkit-mask-image: url('../../images/icons/cloud-computing.svg'); mask-image: url('../../images/icons/cloud-computing.svg'); }
.icon-database        { -webkit-mask-image: url('../../images/icons/database.svg'); mask-image: url('../../images/icons/database.svg'); }
.icon-database-export { -webkit-mask-image: url('../../images/icons/database-export.svg'); mask-image: url('../../images/icons/database-export.svg'); }
.icon-database-search { -webkit-mask-image: url('../../images/icons/database-search.svg'); mask-image: url('../../images/icons/database-search.svg'); }
.icon-globe           { -webkit-mask-image: url('../../images/icons/globe.svg'); mask-image: url('../../images/icons/globe.svg'); }
.icon-server          { -webkit-mask-image: url('../../images/icons/server.svg'); mask-image: url('../../images/icons/server.svg'); }
.icon-server-cog      { -webkit-mask-image: url('../../images/icons/server-cog.svg'); mask-image: url('../../images/icons/server-cog.svg'); }
.icon-server-off      { -webkit-mask-image: url('../../images/icons/server-off.svg'); mask-image: url('../../images/icons/server-off.svg'); }
.icon-world           { -webkit-mask-image: url('../../images/icons/world.svg'); mask-image: url('../../images/icons/world.svg'); }

/* --- FILES & DATA --- */
.icon-device-floppy   { -webkit-mask-image: url('../../images/icons/device-floppy.svg'); mask-image: url('../../images/icons/device-floppy.svg'); }
.icon-download        { -webkit-mask-image: url('../../images/icons/download.svg'); mask-image: url('../../images/icons/download.svg'); }
.icon-file-invoice    { -webkit-mask-image: url('../../images/icons/file-invoice.svg'); mask-image: url('../../images/icons/file-invoice.svg'); }
.icon-files           { -webkit-mask-image: url('../../images/icons/files.svg'); mask-image: url('../../images/icons/files.svg'); }
.icon-package         { -webkit-mask-image: url('../../images/icons/package.svg'); mask-image: url('../../images/icons/package.svg'); }

/* --- USERS & SUPPORT --- */
.icon-broadcast       { -webkit-mask-image: url('../../images/icons/broadcast.svg'); mask-image: url('../../images/icons/broadcast.svg'); }
.icon-headset         { -webkit-mask-image: url('../../images/icons/headset.svg'); mask-image: url('../../images/icons/headset.svg'); }
.icon-lifebuoy        { -webkit-mask-image: url('../../images/icons/lifebuoy.svg'); mask-image: url('../../images/icons/lifebuoy.svg'); }
.icon-user-circle     { -webkit-mask-image: url('../../images/icons/user-circle.svg'); mask-image: url('../../images/icons/user-circle.svg'); }
.icon-user-plus       { -webkit-mask-image: url('../../images/icons/user-plus.svg'); mask-image: url('../../images/icons/user-plus.svg'); }
.icon-user-shield     { -webkit-mask-image: url('../../images/icons/user-shield.svg'); mask-image: url('../../images/icons/user-shield.svg'); }
.icon-users           { -webkit-mask-image: url('../../images/icons/users.svg'); mask-image: url('../../images/icons/users.svg'); }
.icon-users-off       { -webkit-mask-image: url('../../images/icons/users-off.svg'); mask-image: url('../../images/icons/users-off.svg'); }

/* --- TOOLS & SETTINGS --- */
.icon-brush           { -webkit-mask-image: url('../../images/icons/brush.svg'); mask-image: url('../../images/icons/brush.svg'); }
.icon-key             { -webkit-mask-image: url('../../images/icons/key.svg'); mask-image: url('../../images/icons/key.svg'); }
.icon-rocket          { -webkit-mask-image: url('../../images/icons/rocket.svg'); mask-image: url('../../images/icons/rocket.svg'); }
.icon-settings        { -webkit-mask-image: url('../../images/icons/settings.svg'); mask-image: url('../../images/icons/settings.svg'); }
.icon-tool            { -webkit-mask-image: url('../../images/icons/tool.svg'); mask-image: url('../../images/icons/tool.svg'); }

/* --- COMMERCE & BILLING --- */
.icon-credit-card     { -webkit-mask-image: url('../../images/icons/credit-card.svg'); mask-image: url('../../images/icons/credit-card.svg'); }
.icon-shopping-cart   { -webkit-mask-image: url('../../images/icons/shopping-cart.svg'); mask-image: url('../../images/icons/shopping-cart.svg'); }
.icon-wallet          { -webkit-mask-image: url('../../images/icons/wallet.svg'); mask-image: url('../../images/icons/wallet.svg'); }

/* --- THEME & DISPLAY --- */
.icon-moon            { -webkit-mask-image: url('../../images/icons/moon.svg'); mask-image: url('../../images/icons/moon.svg'); }
.icon-sun             { -webkit-mask-image: url('../../images/icons/sun.svg'); mask-image: url('../../images/icons/sun.svg'); }

/* ============================================================
   COLORED COUNTRY FLAGS
   ============================================================
   Flags are rendered as background images instead of masks so
   their original colors are preserved.

   Usage:
     <span class="flag-icon flag-icon-gb"></span>
     <span class="flag-icon flag-icon-us"></span>
   ============================================================ */

.flag-icon {
    display: inline-block;
    width: 22px;
    height: 16px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-4);
    background-color: var(--bg-2);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] .flag-icon {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.flag-icon-de {
    background-image: url('../../images/flags/de.svg');
}

.flag-icon-gb {
    background-image: url('../../images/flags/gb.svg');
}

.flag-icon-us {
    background-image: url('../../images/flags/us.svg');
}

/* ============================================================
   OPTIMIZED PORTAL ICON SET
   ============================================================
   These mappings intentionally appear after the legacy mappings
   so the optimized SVG files take precedence for existing icon
   class names. Filenames are case-sensitive on Linux.
   ============================================================ */

/* --- NAVIGATION & CORE UI --- */
.icon-arrow-right,
.icon-arrow {
    -webkit-mask-image: url('../../images/icons/Arrow.svg');
    mask-image: url('../../images/icons/Arrow.svg');
}

.icon-chevron-down,
.icon-chev-down {
    -webkit-mask-image: url('../../images/icons/ChevDown.svg');
    mask-image: url('../../images/icons/ChevDown.svg');
}

.icon-chevron-right,
.icon-chevron {
    -webkit-mask-image: url('../../images/icons/Chevron.svg');
    mask-image: url('../../images/icons/Chevron.svg');
}

.icon-copy {
    -webkit-mask-image: url('../../images/icons/Copy.svg');
    mask-image: url('../../images/icons/Copy.svg');
}

.icon-download {
    -webkit-mask-image: url('../../images/icons/Download.svg');
    mask-image: url('../../images/icons/Download.svg');
}

.icon-external,
.icon-external-link {
    -webkit-mask-image: url('../../images/icons/External.svg');
    mask-image: url('../../images/icons/External.svg');
}

.icon-filter {
    -webkit-mask-image: url('../../images/icons/Filter.svg');
    mask-image: url('../../images/icons/Filter.svg');
}

.icon-folder,
.icon-files {
    -webkit-mask-image: url('../../images/icons/Folder.svg');
    mask-image: url('../../images/icons/Folder.svg');
}

.icon-more {
    -webkit-mask-image: url('../../images/icons/More.svg');
    mask-image: url('../../images/icons/More.svg');
}

.icon-plus {
    -webkit-mask-image: url('../../images/icons/Plus.svg');
    mask-image: url('../../images/icons/Plus.svg');
}

.icon-refresh {
    -webkit-mask-image: url('../../images/icons/Refresh.svg');
    mask-image: url('../../images/icons/Refresh.svg');
}

.icon-search {
    -webkit-mask-image: url('../../images/icons/Search.svg');
    mask-image: url('../../images/icons/Search.svg');
}

/* --- DASHBOARD & ACTIVITY --- */
.icon-dashboard {
    -webkit-mask-image: url('../../images/icons/Dashboard.svg');
    mask-image: url('../../images/icons/Dashboard.svg');
}

.icon-activity,
.icon-trend-up {
    -webkit-mask-image: url('../../images/icons/TrendUp.svg');
    mask-image: url('../../images/icons/TrendUp.svg');
}

.icon-usage {
    -webkit-mask-image: url('../../images/icons/Usage.svg');
    mask-image: url('../../images/icons/Usage.svg');
}

.icon-clock {
    -webkit-mask-image: url('../../images/icons/Clock.svg');
    mask-image: url('../../images/icons/Clock.svg');
}

.icon-spark {
    -webkit-mask-image: url('../../images/icons/Spark.svg');
    mask-image: url('../../images/icons/Spark.svg');
}

.icon-zap {
    -webkit-mask-image: url('../../images/icons/Zap.svg');
    mask-image: url('../../images/icons/Zap.svg');
}

/* --- STATUS & NOTIFICATIONS --- */
.icon-bell {
    -webkit-mask-image: url('../../images/icons/Bell.svg');
    mask-image: url('../../images/icons/Bell.svg');
}

.icon-check,
.icon-circle-check {
    -webkit-mask-image: url('../../images/icons/Check.svg');
    mask-image: url('../../images/icons/Check.svg');
}

.icon-lock {
    -webkit-mask-image: url('../../images/icons/Lock.svg');
    mask-image: url('../../images/icons/Lock.svg');
}

.icon-shield,
.icon-shield-check {
    -webkit-mask-image: url('../../images/icons/Shield.svg');
    mask-image: url('../../images/icons/Shield.svg');
}

.icon-ssl,
.icon-shield-lock {
    -webkit-mask-image: url('../../images/icons/Ssl.svg');
    mask-image: url('../../images/icons/Ssl.svg');
}

/* --- INFRASTRUCTURE & CLOUD --- */
.icon-cloud,
.icon-cloud-computing {
    -webkit-mask-image: url('../../images/icons/Cloud.svg');
    mask-image: url('../../images/icons/Cloud.svg');
}

.icon-cpu {
    -webkit-mask-image: url('../../images/icons/Cpu.svg');
    mask-image: url('../../images/icons/Cpu.svg');
}

.icon-database {
    -webkit-mask-image: url('../../images/icons/Database.svg');
    mask-image: url('../../images/icons/Database.svg');
}

.icon-dns {
    -webkit-mask-image: url('../../images/icons/Dns.svg');
    mask-image: url('../../images/icons/Dns.svg');
}

.icon-firewall {
    -webkit-mask-image: url('../../images/icons/Firewall.svg');
    mask-image: url('../../images/icons/Firewall.svg');
}

.icon-globe,
.icon-world {
    -webkit-mask-image: url('../../images/icons/Globe.svg');
    mask-image: url('../../images/icons/Globe.svg');
}

.icon-server,
.icon-server-cog {
    -webkit-mask-image: url('../../images/icons/Server.svg');
    mask-image: url('../../images/icons/Server.svg');
}

.icon-snapshot {
    -webkit-mask-image: url('../../images/icons/Snapshot.svg');
    mask-image: url('../../images/icons/Snapshot.svg');
}

.icon-scale {
    -webkit-mask-image: url('../../images/icons/Scale.svg');
    mask-image: url('../../images/icons/Scale.svg');
}

.icon-power {
    -webkit-mask-image: url('../../images/icons/Power.svg');
    mask-image: url('../../images/icons/Power.svg');
}

/* --- BACKUPS, FILES & DEVELOPER TOOLS --- */
.icon-backup {
    -webkit-mask-image: url('../../images/icons/Backup.svg');
    mask-image: url('../../images/icons/Backup.svg');
}

.icon-git {
    -webkit-mask-image: url('../../images/icons/Git.svg');
    mask-image: url('../../images/icons/Git.svg');
}

.icon-terminal {
    -webkit-mask-image: url('../../images/icons/Terminal.svg');
    mask-image: url('../../images/icons/Terminal.svg');
}

/* --- BILLING & DOCUMENTS --- */
.icon-card,
.icon-credit-card {
    -webkit-mask-image: url('../../images/icons/Card.svg');
    mask-image: url('../../images/icons/Card.svg');
}

.icon-invoice,
.icon-file-invoice {
    -webkit-mask-image: url('../../images/icons/Invoice.svg');
    mask-image: url('../../images/icons/Invoice.svg');
}

.icon-wallet {
    -webkit-mask-image: url('../../images/icons/Wallet.svg');
    mask-image: url('../../images/icons/Wallet.svg');
}

.icon-docs {
    -webkit-mask-image: url('../../images/icons/Docs.svg');
    mask-image: url('../../images/icons/Docs.svg');
}

/* --- SUPPORT & COMMUNICATION --- */
.icon-chat {
    -webkit-mask-image: url('../../images/icons/Chat.svg');
    mask-image: url('../../images/icons/Chat.svg');
}

.icon-help,
.icon-lifebuoy,
.icon-headset {
    -webkit-mask-image: url('../../images/icons/Help.svg');
    mask-image: url('../../images/icons/Help.svg');
}

/* --- PRODUCTS & BRAND --- */
.icon-rocket {
    -webkit-mask-image: url('../../images/icons/Rocket.svg');
    mask-image: url('../../images/icons/Rocket.svg');
}

.icon-wordpress,
.icon-brand-wordpress {
    -webkit-mask-image: url('../../images/icons/Wordpress.svg');
    mask-image: url('../../images/icons/Wordpress.svg');
}

/* --- THEME --- */
.icon-moon {
    -webkit-mask-image: url('../../images/icons/Moon.svg');
    mask-image: url('../../images/icons/Moon.svg');
}

.icon-sun {
    -webkit-mask-image: url('../../images/icons/Sun.svg');
    mask-image: url('../../images/icons/Sun.svg');
}