/* ==========================================================================
   KMS THEME OVERRIDE — Paleta Intrabase (light + dark)
   --------------------------------------------------------------------------
   Trasllada els colors/estils d'Intrabase (/usr/local/intrabase/src/assets/
   css/intrabase.css) a les variables de tema del KMS. Es carrega DESPRÉS de
   kms-styles.css i kms-dashboard.css des de tpl/headers.php i
   tpl/default/headers.php, o sigui que només redefineix variables i quatre
   regles puntuals: el gruix de components les hereta sol.

   DESFER: comentar/treure el <link> de kms-theme-intrabase.css als dos
   headers.php (no cal tocar cap altre fitxer).
   ========================================================================== */

/* ===== TEMA DARK (per defecte) =====
   Dark estil "Ghost admin": fons quasi negre neutre i pla (#131316),
   superfícies un pèl més clares (#1a1c20), vores subtils (#2a2c31),
   grisos neutres al text i accent turquesa de marca #5cd4ce. */
:root,
html[data-theme="dark"] {
    /* Backgrounds */
    --dark-bg-primary: #131316;          /* appbar = fons, tot pla */
    --dark-bg-secondary: #131316;        /* fons de l'app */
    --dark-bg-tertiary: #1a1c20;         /* superficie/targeta */
    --dark-bg-hover: #26282d;

    /* Text */
    --dark-text-primary-highlighted: #ffffff;
    --dark-text-primary: #ececed;
    --dark-text-secondary: #9d9fa4;

    /* Vores i accents */
    --dark-border: #2a2c31;
    --dark-accent: #5cd4ce;              /* ib-primary (dark) */
    --dark-accent-hover: #3bbfb9;        /* ib-primary-dark (dark) */

    /* Variables de consistència */
    --card-bg: #1a1c20;
    --border-color: #2a2c31;
    --text-primary: #ececed;
    --text-secondary: #9d9fa4;
    --text-tertiary: #6e7176;
    --hover-bg: rgba(255, 255, 255, 0.06);
    --menu-icon-color: #9d9fa4;
    --primary-color: #5cd4ce;
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);   /* ib-shadow-lg (dark) */

    /* Variables estandarditzades KMS */
    --kms-bg-primary: #131316;
    --kms-bg-secondary: #131316;
    --kms-bg-tertiary: #1a1c20;
    --kms-bg-hover: #26282d;
    --kms-text-primary: #ececed;
    --kms-text-secondary: #9d9fa4;
    --kms-text-muted: #6e7176;
    --kms-text-on-accent: #0f172a;       /* ib-text-inverted (dark) */
    --kms-border: #2a2c31;
    --kms-border-light: #222429;
    --kms-accent: #5cd4ce;
    --kms-accent-hover: #3bbfb9;
}

/* ===== TEMA LIGHT =====
   Intrabase light: pàgina gris clar #f4f6f9, targetes blanques, vores
   #dde1e7, text #1a202c, accent turquesa de marca #31b8b2. */
html[data-theme="light"] {
    /* Backgrounds */
    --dark-bg-primary: #ffffff;          /* ib-surface (light) */
    --dark-bg-secondary: #f4f6f9;        /* ib-bg (light) */
    --dark-bg-tertiary: #f0f1f2;         /* ib-secondary-light */
    --dark-bg-hover: #f1f5f9;            /* hover light d'Intrabase */

    /* Text */
    --dark-text-primary-highlighted: #000000;
    --dark-text-primary: #1a202c;        /* ib-text (light) */
    --dark-text-secondary: #64748b;      /* ib-text-muted (light) */

    /* Vores i accents */
    --dark-border: #dde1e7;              /* ib-border (light) */
    --dark-accent: #279490;              /* ib-primary-dark: contrast AA sobre blanc */
    --dark-accent-hover: #31b8b2;        /* ib-primary */

    /* Variables de consistència */
    --card-bg: #ffffff;
    --border-color: #dde1e7;
    --text-primary: #1a202c;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --hover-bg: rgba(100, 116, 139, 0.1);
    --menu-icon-color: #64748b;
    --primary-color: #279490;
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);  /* ib-shadow-lg (light) */
    --input-border: #dde1e7;

    /* Variables estandarditzades KMS */
    --kms-bg-primary: #ffffff;
    --kms-bg-secondary: #f4f6f9;
    --kms-bg-tertiary: #f0f1f2;
    --kms-bg-hover: #f1f5f9;
    --kms-text-primary: #1a202c;
    --kms-text-secondary: #64748b;
    --kms-text-muted: #94a3b8;
    --kms-text-on-accent: #ffffff;
    --kms-border: #dde1e7;
    --kms-border-light: #e8ecf1;
    --kms-accent: #279490;
    --kms-accent-hover: #31b8b2;
}

/* Variables "legacy" del bloc inicial de kms-styles.css (línies 38-57):
   les redefinim també perquè alguns components les usen directament. */
html[data-theme="dark"] {
    --card-bg: #1a1c20;
    --border-color: #2a2c31;
    --text-primary: #ececed;
    --text-secondary: #9d9fa4;
    --text-tertiary: #6e7176;
    --hover-bg: rgba(255, 255, 255, 0.06);
    --menu-icon-color: #9d9fa4;
}

/* ===== Regles puntuals amb colors hardcodejats a kms-styles.css ===== */

/* Al tema light d'Intrabase la pàgina és gris #f4f6f9, no blanc pur
   (les targetes blanques hi destaquen). */
html[data-theme="light"] { background-color: #ffffff !important; }
html[data-theme="light"] body { background-color: #000; }

/* En fosc la base de la pàgina és negra (chrome/appbar d'Intrabase). */
html[data-theme="dark"] body {
    background-color: #131316;
}

/* Scrollbars light a joc amb la nova paleta */
html[data-theme="light"] html,
html[data-theme="light"] body,
html[data-theme="light"] table.document {
    scrollbar-color: #cbd5e1 #f4f6f9;
}

/* ===== Modals del tauler: en fosc van amb superficie #1f2430, una mica
   més clara que el fons #131316, perquè destaquin sobre l'overlay. ===== */
html[data-theme="dark"] .vh-modal-box,
html[data-theme="dark"] .mbx-modal-box,
html[data-theme="dark"] .dom-modal-box {
    background: #1f2430;
}

/* ===== Analítica (hosting_stats): les targetes --hs-* de kms-dashboard.css
   porten grisos neutres (#1a1a1a); aquí s'alineen amb les superfícies i
   vores de la paleta Intrabase. ===== */
.hosting-stats-wrapper {
    --hs-card-bg: #1a1c20;
    --hs-text: #ececed;
    --hs-text-secondary: #9d9fa4;
    --hs-text-tertiary: #6e7176;
    --hs-border: #2a2c31;
    --hs-shadow: rgba(0, 0, 0, 0.3);
    --hs-shadow-hover: rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] .hosting-stats-wrapper {
    --hs-card-bg: #ffffff;
    --hs-text: #1a202c;
    --hs-text-secondary: #64748b;
    --hs-text-tertiary: #94a3b8;
    --hs-border: #dde1e7;
    --hs-shadow: rgba(0, 0, 0, 0.06);
    --hs-shadow-hover: rgba(0, 0, 0, 0.1);
}