/* ══════════════════════════════════════════════════════════════
   DevExpress-inspired themes — 44 themes
   5 Fluent + 10 Material + 8 Generic + 22 3D (suffix "-3d")
   Default (:root) = Fluent SaaS Light
   ══════════════════════════════════════════════════════════════ */

/* ── FLUENT SAAS LIGHT (default) ──
   O tema por omissao vive no :root e nao tem bloco [data-theme] proprio:
   quando o utilizador o escolhe, o theme.js remove o atributo em vez de o por.
   O Fluent Blue Dark (default ate 2026-08-09) passou a ter bloco proprio. */
:root {
    --bg-page: #f3f2f1;
    --bg-surface: #ffffff;
    --bg-modal: #faf9f8;
    --bg-form: #f3f2f1;
    --bg-input: var(--bg-page); /* resolve por tema (44 temas) — inputs recuam dentro dos cartões (--bg-surface) */
    /* Badge de classificação de contacto — amarelo fixo nos 44 temas (definido só aqui,
       como --bg-input). O texto é escuro fixo: --text-on-accent é claro nalguns temas
       e ficaria ilegível sobre o amarelo. */
    --badge-class-bg: #f5c518;
    --badge-class-text: #2b2b2b;
    --bg-lookup-desc: #faf9f8;
    --text-primary: #323130;
    --text-heading: #323130;
    --text-label: #605e5c;
    --text-muted: #a19f9d;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #0078d4;
    --accent-selected: #deecf9;
    --btn-bg: #0078d4;
    --btn-hover: #106ebe;
    --btn-cancel-bg: #a19f9d;
    --btn-cancel-hover: #8a8886;
    --btn-cancel-text: #fff;
    --border-color: #e1dfdd;
    --border-separator: #edebe9;
    --focus-color: #0078d4;
    --favorite: #c97003;
    --error: #d13438;
    --notification-bg: rgba(16,124,16,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #a19f9d;
    --icon-add: #107c10;
    --icon-delete: #d13438;
    --config-item-hover: #f3f2f1;
    --btn-delete-hover: #a52a2e;
    --fk-icon: #c8c6c4;
}

/* ── FLUENT BLUE DARK ── */
[data-theme="fluent-blue-dark"] {
    --bg-page: #1b1a19;
    --bg-surface: #292827;
    --bg-modal: #323130;
    --bg-form: #1b1a19;
    --bg-lookup-desc: #323130;
    --text-primary: #f3f2f1;
    --text-heading: #f3f2f1;
    --text-label: #d2d0ce;
    --text-muted: #a19f9d;
    --text-on-accent: #000;
    --text-btn: #000;
    --accent: #4cc2ff;
    --accent-selected: #1a3350;
    --btn-bg: #4cc2ff;
    --btn-hover: #77d4ff;
    --btn-cancel-bg: #484644;
    --btn-cancel-hover: #3b3a39;
    --btn-cancel-text: #d2d0ce;
    --border-color: #484644;
    --border-separator: #3b3a39;
    --focus-color: #4cc2ff;
    --favorite: #e6a817;
    --error: #f1707b;
    --notification-bg: rgba(146,195,83,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #a19f9d;
    --icon-add: #92c353;
    --icon-delete: #f1707b;
    --config-item-hover: #3b3a39;
    --btn-delete-hover: #c0392b;
    --fk-icon: #484644;
}

/* ── FLUENT BLUE LIGHT ── */
[data-theme="fluent-blue-light"] {
    --bg-page: #f5f5f5;
    --bg-surface: #ffffff;
    --bg-modal: #fafafa;
    --bg-form: #f5f5f5;
    --bg-lookup-desc: #fafafa;
    --text-primary: #323130;
    --text-heading: #323130;
    --text-label: #605e5c;
    --text-muted: #a19f9d;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #0078d4;
    --accent-selected: #deecf9;
    --btn-bg: #0078d4;
    --btn-hover: #106ebe;
    --btn-cancel-bg: #a19f9d;
    --btn-cancel-hover: #8a8886;
    --btn-cancel-text: #fff;
    --border-color: #e1dfdd;
    --border-separator: #edebe9;
    --focus-color: #0078d4;
    --favorite: #c97003;
    --error: #d13438;
    --notification-bg: rgba(16,124,16,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #a19f9d;
    --icon-add: #107c10;
    --icon-delete: #d13438;
    --config-item-hover: #f3f2f1;
    --btn-delete-hover: #a52a2e;
    --fk-icon: #c8c6c4;
}

/* ── FLUENT SAAS DARK ── */
[data-theme="fluent-saas-dark"] {
    --bg-page: #201f1e;
    --bg-surface: #323130;
    --bg-modal: #292827;
    --bg-form: #201f1e;
    --bg-lookup-desc: #292827;
    --text-primary: #f3f2f1;
    --text-heading: #f3f2f1;
    --text-label: #d2d0ce;
    --text-muted: #a19f9d;
    --text-on-accent: #000;
    --text-btn: #000;
    --accent: #2899f5;
    --accent-selected: #1a3050;
    --btn-bg: #2899f5;
    --btn-hover: #4dacf7;
    --btn-cancel-bg: #484644;
    --btn-cancel-hover: #3b3a39;
    --btn-cancel-text: #d2d0ce;
    --border-color: #484644;
    --border-separator: #3b3a39;
    --focus-color: #2899f5;
    --favorite: #e6a817;
    --error: #f1707b;
    --notification-bg: rgba(146,195,83,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #a19f9d;
    --icon-add: #92c353;
    --icon-delete: #f1707b;
    --config-item-hover: #3b3a39;
    --btn-delete-hover: #c0392b;
    --fk-icon: #484644;
}

/* ── FLUENT SAAS LIGHT ── */
[data-theme="fluent-saas-light"] {
    --bg-page: #f3f2f1;
    --bg-surface: #ffffff;
    --bg-modal: #faf9f8;
    --bg-form: #f3f2f1;
    --bg-lookup-desc: #faf9f8;
    --text-primary: #323130;
    --text-heading: #323130;
    --text-label: #605e5c;
    --text-muted: #a19f9d;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #0078d4;
    --accent-selected: #deecf9;
    --btn-bg: #0078d4;
    --btn-hover: #106ebe;
    --btn-cancel-bg: #a19f9d;
    --btn-cancel-hover: #8a8886;
    --btn-cancel-text: #fff;
    --border-color: #e1dfdd;
    --border-separator: #edebe9;
    --focus-color: #0078d4;
    --favorite: #c97003;
    --error: #d13438;
    --notification-bg: rgba(16,124,16,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #a19f9d;
    --icon-add: #107c10;
    --icon-delete: #d13438;
    --config-item-hover: #f3f2f1;
    --btn-delete-hover: #a52a2e;
    --fk-icon: #c8c6c4;
}

/* ── MATERIAL BLUE LIGHT ── */
[data-theme="material-blue-light"] {
    --bg-page: #fafafa;
    --bg-surface: #ffffff;
    --bg-modal: #f5f5f5;
    --bg-form: #fafafa;
    --bg-lookup-desc: #f5f5f5;
    --text-primary: #212121;
    --text-heading: #212121;
    --text-label: #616161;
    --text-muted: #9e9e9e;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #1976d2;
    --accent-selected: #e3f2fd;
    --btn-bg: #1976d2;
    --btn-hover: #1565c0;
    --btn-cancel-bg: #9e9e9e;
    --btn-cancel-hover: #858585;
    --btn-cancel-text: #fff;
    --border-color: #e0e0e0;
    --border-separator: #eeeeee;
    --focus-color: #1976d2;
    --favorite: #c97003;
    --error: #f44336;
    --notification-bg: rgba(76,175,80,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #9e9e9e;
    --icon-add: #4caf50;
    --icon-delete: #f44336;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #c0392b;
    --fk-icon: #bdbdbd;
}

/* ── MATERIAL BLUE DARK ── */
[data-theme="material-blue-dark"] {
    --bg-page: #303030;
    --bg-surface: #424242;
    --bg-modal: #383838;
    --bg-form: #303030;
    --bg-lookup-desc: #383838;
    --text-primary: #ffffff;
    --text-heading: #ffffff;
    --text-label: #b0b0b0;
    --text-muted: #757575;
    --text-on-accent: #000;
    --text-btn: #000;
    --accent: #42a5f5;
    --accent-selected: #1a3350;
    --btn-bg: #42a5f5;
    --btn-hover: #64b5f6;
    --btn-cancel-bg: #555555;
    --btn-cancel-hover: #4a4a4a;
    --btn-cancel-text: #b0b0b0;
    --border-color: #555555;
    --border-separator: #484848;
    --focus-color: #42a5f5;
    --favorite: #e6a817;
    --error: #ef5350;
    --notification-bg: rgba(102,187,106,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #757575;
    --icon-add: #66bb6a;
    --icon-delete: #ef5350;
    --config-item-hover: #525252;
    --btn-delete-hover: #c0392b;
    --fk-icon: #555555;
}

/* ── MATERIAL LIME LIGHT ── */
[data-theme="material-lime-light"] {
    --bg-page: #fafafa;
    --bg-surface: #ffffff;
    --bg-modal: #f5f5f5;
    --bg-form: #fafafa;
    --bg-lookup-desc: #f5f5f5;
    --text-primary: #212121;
    --text-heading: #212121;
    --text-label: #616161;
    --text-muted: #9e9e9e;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #689f38;
    --accent-selected: #e8f5e9;
    --btn-bg: #689f38;
    --btn-hover: #558b2f;
    --btn-cancel-bg: #9e9e9e;
    --btn-cancel-hover: #858585;
    --btn-cancel-text: #fff;
    --border-color: #e0e0e0;
    --border-separator: #eeeeee;
    --focus-color: #689f38;
    --favorite: #c97003;
    --error: #f44336;
    --notification-bg: rgba(76,175,80,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #9e9e9e;
    --icon-add: #4caf50;
    --icon-delete: #f44336;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #c0392b;
    --fk-icon: #bdbdbd;
}

/* ── MATERIAL LIME DARK ── */
[data-theme="material-lime-dark"] {
    --bg-page: #303030;
    --bg-surface: #424242;
    --bg-modal: #383838;
    --bg-form: #303030;
    --bg-lookup-desc: #383838;
    --text-primary: #ffffff;
    --text-heading: #ffffff;
    --text-label: #b0b0b0;
    --text-muted: #757575;
    --text-on-accent: #1b1b1b;
    --text-btn: #1b1b1b;
    --accent: #aed581;
    --accent-selected: #263520;
    --btn-bg: #aed581;
    --btn-hover: #c5e1a5;
    --btn-cancel-bg: #555555;
    --btn-cancel-hover: #4a4a4a;
    --btn-cancel-text: #b0b0b0;
    --border-color: #555555;
    --border-separator: #484848;
    --focus-color: #aed581;
    --favorite: #e6a817;
    --error: #ef5350;
    --notification-bg: rgba(102,187,106,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #757575;
    --icon-add: #66bb6a;
    --icon-delete: #ef5350;
    --config-item-hover: #525252;
    --btn-delete-hover: #c0392b;
    --fk-icon: #555555;
}

/* ── MATERIAL ORANGE LIGHT ── */
[data-theme="material-orange-light"] {
    --bg-page: #fafafa;
    --bg-surface: #ffffff;
    --bg-modal: #f5f5f5;
    --bg-form: #fafafa;
    --bg-lookup-desc: #f5f5f5;
    --text-primary: #212121;
    --text-heading: #212121;
    --text-label: #616161;
    --text-muted: #9e9e9e;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #f57c00;
    --accent-selected: #fff3e0;
    --btn-bg: #f57c00;
    --btn-hover: #ef6c00;
    --btn-cancel-bg: #9e9e9e;
    --btn-cancel-hover: #858585;
    --btn-cancel-text: #fff;
    --border-color: #e0e0e0;
    --border-separator: #eeeeee;
    --focus-color: #f57c00;
    --favorite: #c97003;
    --error: #f44336;
    --notification-bg: rgba(76,175,80,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #9e9e9e;
    --icon-add: #4caf50;
    --icon-delete: #f44336;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #c0392b;
    --fk-icon: #bdbdbd;
}

/* ── MATERIAL ORANGE DARK ── */
[data-theme="material-orange-dark"] {
    --bg-page: #303030;
    --bg-surface: #424242;
    --bg-modal: #383838;
    --bg-form: #303030;
    --bg-lookup-desc: #383838;
    --text-primary: #ffffff;
    --text-heading: #ffffff;
    --text-label: #b0b0b0;
    --text-muted: #757575;
    --text-on-accent: #1b1b1b;
    --text-btn: #1b1b1b;
    --accent: #ffb74d;
    --accent-selected: #3a2800;
    --btn-bg: #ffb74d;
    --btn-hover: #ffc87c;
    --btn-cancel-bg: #555555;
    --btn-cancel-hover: #4a4a4a;
    --btn-cancel-text: #b0b0b0;
    --border-color: #555555;
    --border-separator: #484848;
    --focus-color: #ffb74d;
    --favorite: #e6a817;
    --error: #ef5350;
    --notification-bg: rgba(102,187,106,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #757575;
    --icon-add: #66bb6a;
    --icon-delete: #ef5350;
    --config-item-hover: #525252;
    --btn-delete-hover: #c0392b;
    --fk-icon: #555555;
}

/* ── MATERIAL PURPLE LIGHT ── */
[data-theme="material-purple-light"] {
    --bg-page: #fafafa;
    --bg-surface: #ffffff;
    --bg-modal: #f5f5f5;
    --bg-form: #fafafa;
    --bg-lookup-desc: #f5f5f5;
    --text-primary: #212121;
    --text-heading: #212121;
    --text-label: #616161;
    --text-muted: #9e9e9e;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #7b1fa2;
    --accent-selected: #f3e5f5;
    --btn-bg: #7b1fa2;
    --btn-hover: #6a1b9a;
    --btn-cancel-bg: #9e9e9e;
    --btn-cancel-hover: #858585;
    --btn-cancel-text: #fff;
    --border-color: #e0e0e0;
    --border-separator: #eeeeee;
    --focus-color: #7b1fa2;
    --favorite: #c97003;
    --error: #f44336;
    --notification-bg: rgba(76,175,80,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #9e9e9e;
    --icon-add: #4caf50;
    --icon-delete: #f44336;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #c0392b;
    --fk-icon: #bdbdbd;
}

/* ── MATERIAL PURPLE DARK ── */
[data-theme="material-purple-dark"] {
    --bg-page: #303030;
    --bg-surface: #424242;
    --bg-modal: #383838;
    --bg-form: #303030;
    --bg-lookup-desc: #383838;
    --text-primary: #ffffff;
    --text-heading: #ffffff;
    --text-label: #b0b0b0;
    --text-muted: #757575;
    --text-on-accent: #1b1b1b;
    --text-btn: #1b1b1b;
    --accent: #ce93d8;
    --accent-selected: #2a1a30;
    --btn-bg: #ce93d8;
    --btn-hover: #e1bee7;
    --btn-cancel-bg: #555555;
    --btn-cancel-hover: #4a4a4a;
    --btn-cancel-text: #b0b0b0;
    --border-color: #555555;
    --border-separator: #484848;
    --focus-color: #ce93d8;
    --favorite: #e6a817;
    --error: #ef5350;
    --notification-bg: rgba(102,187,106,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #757575;
    --icon-add: #66bb6a;
    --icon-delete: #ef5350;
    --config-item-hover: #525252;
    --btn-delete-hover: #c0392b;
    --fk-icon: #555555;
}

/* ── MATERIAL TEAL LIGHT ── */
[data-theme="material-teal-light"] {
    --bg-page: #fafafa;
    --bg-surface: #ffffff;
    --bg-modal: #f5f5f5;
    --bg-form: #fafafa;
    --bg-lookup-desc: #f5f5f5;
    --text-primary: #212121;
    --text-heading: #212121;
    --text-label: #616161;
    --text-muted: #9e9e9e;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #00796b;
    --accent-selected: #e0f2f1;
    --btn-bg: #00796b;
    --btn-hover: #00695c;
    --btn-cancel-bg: #9e9e9e;
    --btn-cancel-hover: #858585;
    --btn-cancel-text: #fff;
    --border-color: #e0e0e0;
    --border-separator: #eeeeee;
    --focus-color: #00796b;
    --favorite: #c97003;
    --error: #f44336;
    --notification-bg: rgba(76,175,80,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #9e9e9e;
    --icon-add: #4caf50;
    --icon-delete: #f44336;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #c0392b;
    --fk-icon: #bdbdbd;
}

/* ── MATERIAL TEAL DARK ── */
[data-theme="material-teal-dark"] {
    --bg-page: #303030;
    --bg-surface: #424242;
    --bg-modal: #383838;
    --bg-form: #303030;
    --bg-lookup-desc: #383838;
    --text-primary: #ffffff;
    --text-heading: #ffffff;
    --text-label: #b0b0b0;
    --text-muted: #757575;
    --text-on-accent: #1b1b1b;
    --text-btn: #1b1b1b;
    --accent: #4db6ac;
    --accent-selected: #1a302d;
    --btn-bg: #4db6ac;
    --btn-hover: #80cbc4;
    --btn-cancel-bg: #555555;
    --btn-cancel-hover: #4a4a4a;
    --btn-cancel-text: #b0b0b0;
    --border-color: #555555;
    --border-separator: #484848;
    --focus-color: #4db6ac;
    --favorite: #e6a817;
    --error: #ef5350;
    --notification-bg: rgba(102,187,106,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #757575;
    --icon-add: #66bb6a;
    --icon-delete: #ef5350;
    --config-item-hover: #525252;
    --btn-delete-hover: #c0392b;
    --fk-icon: #555555;
}

/* ── GENERIC LIGHT ── */
[data-theme="generic-light"] {
    --bg-page: #ffffff;
    --bg-surface: #f8f8f8;
    --bg-modal: #efefef;
    --bg-form: #f8f8f8;
    --bg-lookup-desc: #efefef;
    --text-primary: #333333;
    --text-heading: #333333;
    --text-label: #666666;
    --text-muted: #999999;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #337ab7;
    --accent-selected: #e3f0fb;
    --btn-bg: #337ab7;
    --btn-hover: #23527c;
    --btn-cancel-bg: #999999;
    --btn-cancel-hover: #808080;
    --btn-cancel-text: #fff;
    --border-color: #dddddd;
    --border-separator: #eeeeee;
    --focus-color: #337ab7;
    --favorite: #c97003;
    --error: #d9534f;
    --notification-bg: rgba(92,184,92,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.1);
    --icon-default: #999999;
    --icon-add: #5cb85c;
    --icon-delete: #d9534f;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #c0392b;
    --fk-icon: #bbbbbb;
}

/* ── GENERIC DARK ── */
[data-theme="generic-dark"] {
    --bg-page: #363640;
    --bg-surface: #46464e;
    --bg-modal: #3d3d47;
    --bg-form: #363640;
    --bg-lookup-desc: #3d3d47;
    --text-primary: #e0e0e0;
    --text-heading: #e0e0e0;
    --text-label: #b0b0b0;
    --text-muted: #808080;
    --text-on-accent: #1a1a1a;
    --text-btn: #1a1a1a;
    --accent: #5ba7e8;
    --accent-selected: #1a3350;
    --btn-bg: #5ba7e8;
    --btn-hover: #7bbdff;
    --btn-cancel-bg: #555560;
    --btn-cancel-hover: #50505a;
    --btn-cancel-text: #b0b0b0;
    --border-color: #555560;
    --border-separator: #4a4a54;
    --focus-color: #5ba7e8;
    --favorite: #e6a817;
    --error: #e57373;
    --notification-bg: rgba(129,199,132,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #808080;
    --icon-add: #81c784;
    --icon-delete: #e57373;
    --config-item-hover: #50505a;
    --btn-delete-hover: #c0392b;
    --fk-icon: #555560;
}

/* ── GENERIC CARMINE ── */
[data-theme="generic-carmine"] {
    --bg-page: #ffffff;
    --bg-surface: #f8f8f8;
    --bg-modal: #f0f0f0;
    --bg-form: #f8f8f8;
    --bg-lookup-desc: #f0f0f0;
    --text-primary: #333333;
    --text-heading: #333333;
    --text-label: #666666;
    --text-muted: #999999;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #d9534f;
    --accent-selected: #fce4e4;
    --btn-bg: #d9534f;
    --btn-hover: #c9302c;
    --btn-cancel-bg: #999999;
    --btn-cancel-hover: #808080;
    --btn-cancel-text: #fff;
    --border-color: #dddddd;
    --border-separator: #eeeeee;
    --focus-color: #d9534f;
    --favorite: #c97003;
    --error: #d9534f;
    --notification-bg: rgba(92,184,92,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.1);
    --icon-default: #999999;
    --icon-add: #5cb85c;
    --icon-delete: #d9534f;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #a52a2e;
    --fk-icon: #bbbbbb;
}

/* ── GENERIC SOFT BLUE ── */
[data-theme="generic-softblue"] {
    --bg-page: #eef4f9;
    --bg-surface: #f8fbfd;
    --bg-modal: #e8f0f6;
    --bg-form: #eef4f9;
    --bg-lookup-desc: #e8f0f6;
    --text-primary: #333333;
    --text-heading: #333333;
    --text-label: #5a6a7a;
    --text-muted: #8899aa;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #7ab8eb;
    --accent-selected: #dae8f5;
    --btn-bg: #7ab8eb;
    --btn-hover: #5a9fd6;
    --btn-cancel-bg: #8899aa;
    --btn-cancel-hover: #708090;
    --btn-cancel-text: #fff;
    --border-color: #c8d8e8;
    --border-separator: #dde8f0;
    --focus-color: #7ab8eb;
    --favorite: #c97003;
    --error: #d9534f;
    --notification-bg: rgba(92,184,92,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.08);
    --icon-default: #8899aa;
    --icon-add: #5cb85c;
    --icon-delete: #d9534f;
    --config-item-hover: #e0ebf3;
    --btn-delete-hover: #c0392b;
    --fk-icon: #a8b8c8;
}

/* ── GENERIC DARK MOON ── */
[data-theme="generic-darkmoon"] {
    --bg-page: #232734;
    --bg-surface: #2e3341;
    --bg-modal: #293040;
    --bg-form: #232734;
    --bg-lookup-desc: #293040;
    --text-primary: #d5d8de;
    --text-heading: #d5d8de;
    --text-label: #9ea3b0;
    --text-muted: #6b7080;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #5f8bbc;
    --accent-selected: #1a2a3a;
    --btn-bg: #5f8bbc;
    --btn-hover: #7da5d0;
    --btn-cancel-bg: #3a4050;
    --btn-cancel-hover: #353b4c;
    --btn-cancel-text: #9ea3b0;
    --border-color: #3a4050;
    --border-separator: #343a4a;
    --focus-color: #5f8bbc;
    --favorite: #e6a817;
    --error: #e57373;
    --notification-bg: rgba(129,199,132,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.45);
    --icon-default: #6b7080;
    --icon-add: #81c784;
    --icon-delete: #e57373;
    --config-item-hover: #353b4c;
    --btn-delete-hover: #c0392b;
    --fk-icon: #3a4050;
}

/* ── GENERIC DARK VIOLET ── */
[data-theme="generic-darkviolet"] {
    --bg-page: #2b2240;
    --bg-surface: #362d4e;
    --bg-modal: #302848;
    --bg-form: #2b2240;
    --bg-lookup-desc: #302848;
    --text-primary: #d5d0e0;
    --text-heading: #d5d0e0;
    --text-label: #a098b0;
    --text-muted: #706880;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #9b6bcd;
    --accent-selected: #2a1a3a;
    --btn-bg: #9b6bcd;
    --btn-hover: #b088e0;
    --btn-cancel-bg: #453a5a;
    --btn-cancel-hover: #403660;
    --btn-cancel-text: #a098b0;
    --border-color: #453a5a;
    --border-separator: #3d3454;
    --focus-color: #9b6bcd;
    --favorite: #e6a817;
    --error: #e57373;
    --notification-bg: rgba(129,199,132,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.45);
    --icon-default: #706880;
    --icon-add: #81c784;
    --icon-delete: #e57373;
    --config-item-hover: #403660;
    --btn-delete-hover: #c0392b;
    --fk-icon: #453a5a;
}

/* ── GENERIC GREEN MIST ── */
[data-theme="generic-greenmist"] {
    --bg-page: #eef5ee;
    --bg-surface: #f5faf5;
    --bg-modal: #e5f0e5;
    --bg-form: #eef5ee;
    --bg-lookup-desc: #e5f0e5;
    --text-primary: #333333;
    --text-heading: #333333;
    --text-label: #5a6a5a;
    --text-muted: #88998a;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #6aaa6a;
    --accent-selected: #dff0df;
    --btn-bg: #6aaa6a;
    --btn-hover: #4d8d4d;
    --btn-cancel-bg: #88998a;
    --btn-cancel-hover: #708070;
    --btn-cancel-text: #fff;
    --border-color: #c0d8c0;
    --border-separator: #d5e8d5;
    --focus-color: #6aaa6a;
    --favorite: #c97003;
    --error: #d9534f;
    --notification-bg: rgba(92,184,92,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.08);
    --icon-default: #88998a;
    --icon-add: #5cb85c;
    --icon-delete: #d9534f;
    --config-item-hover: #ddf0dd;
    --btn-delete-hover: #c0392b;
    --fk-icon: #a0c0a0;
}

/* ── GENERIC CONTRAST ── */
[data-theme="generic-contrast"] {
    --bg-page: #ffffff;
    --bg-surface: #ffffff;
    --bg-modal: #f0f0f0;
    --bg-form: #f0f0f0;
    --bg-lookup-desc: #f0f0f0;
    --text-primary: #000000;
    --text-heading: #000000;
    --text-label: #333333;
    --text-muted: #595959;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #0050a0;
    --accent-selected: #d0e8ff;
    --btn-bg: #0050a0;
    --btn-hover: #003670;
    --btn-cancel-bg: #595959;
    --btn-cancel-hover: #404040;
    --btn-cancel-text: #fff;
    --border-color: #000000;
    --border-separator: #666666;
    --focus-color: #0050a0;
    --favorite: #c97003;
    --error: #cc0000;
    --notification-bg: rgba(0,102,0,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.5);
    --shadow: rgba(0,0,0,0.2);
    --icon-default: #595959;
    --icon-add: #006600;
    --icon-delete: #cc0000;
    --config-item-hover: #e8e8e8;
    --btn-delete-hover: #990000;
    --fk-icon: #666666;
}

/* ══════ 3D THEMES ══════ */

/* ── FLUENT BLUE 3D ── */
[data-theme="fluent-blue-3d"] {
    --bg-page: #1b1a19;
    --bg-surface: #292827;
    --bg-modal: #323130;
    --bg-form: #1b1a19;
    --bg-lookup-desc: #323130;
    --text-primary: #f3f2f1;
    --text-heading: #f3f2f1;
    --text-label: #d2d0ce;
    --text-muted: #a19f9d;
    --text-on-accent: #000;
    --text-btn: #000;
    --accent: #4cc2ff;
    --accent-selected: #1a3350;
    --btn-bg: #4cc2ff;
    --btn-hover: #77d4ff;
    --btn-cancel-bg: #484644;
    --btn-cancel-hover: #3b3a39;
    --btn-cancel-text: #d2d0ce;
    --border-color: #484644;
    --border-separator: #3b3a39;
    --focus-color: #4cc2ff;
    --favorite: #e6a817;
    --error: #f1707b;
    --notification-bg: rgba(146,195,83,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #a19f9d;
    --icon-add: #92c353;
    --icon-delete: #f1707b;
    --config-item-hover: #3b3a39;
    --btn-delete-hover: #c0392b;
    --fk-icon: #484644;
}

/* ── FLUENT SAAS DARK 3D ── */
[data-theme="fluent-saas-dark-3d"] {
    --bg-page: #201f1e;
    --bg-surface: #323130;
    --bg-modal: #292827;
    --bg-form: #201f1e;
    --bg-lookup-desc: #292827;
    --text-primary: #f3f2f1;
    --text-heading: #f3f2f1;
    --text-label: #d2d0ce;
    --text-muted: #a19f9d;
    --text-on-accent: #000;
    --text-btn: #000;
    --accent: #2899f5;
    --accent-selected: #1a3050;
    --btn-bg: #2899f5;
    --btn-hover: #4dacf7;
    --btn-cancel-bg: #484644;
    --btn-cancel-hover: #3b3a39;
    --btn-cancel-text: #d2d0ce;
    --border-color: #484644;
    --border-separator: #3b3a39;
    --focus-color: #2899f5;
    --favorite: #e6a817;
    --error: #f1707b;
    --notification-bg: rgba(146,195,83,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #a19f9d;
    --icon-add: #92c353;
    --icon-delete: #f1707b;
    --config-item-hover: #3b3a39;
    --btn-delete-hover: #c0392b;
    --fk-icon: #484644;
}

/* ── MATERIAL BLUE DARK 3D ── */
[data-theme="material-blue-dark-3d"] {
    --bg-page: #303030;
    --bg-surface: #424242;
    --bg-modal: #383838;
    --bg-form: #303030;
    --bg-lookup-desc: #383838;
    --text-primary: #ffffff;
    --text-heading: #ffffff;
    --text-label: #b0b0b0;
    --text-muted: #757575;
    --text-on-accent: #000;
    --text-btn: #000;
    --accent: #42a5f5;
    --accent-selected: #1a3350;
    --btn-bg: #42a5f5;
    --btn-hover: #64b5f6;
    --btn-cancel-bg: #555555;
    --btn-cancel-hover: #4a4a4a;
    --btn-cancel-text: #b0b0b0;
    --border-color: #555555;
    --border-separator: #484848;
    --focus-color: #42a5f5;
    --favorite: #e6a817;
    --error: #ef5350;
    --notification-bg: rgba(102,187,106,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #757575;
    --icon-add: #66bb6a;
    --icon-delete: #ef5350;
    --config-item-hover: #525252;
    --btn-delete-hover: #c0392b;
    --fk-icon: #555555;
}

/* ── MATERIAL LIME DARK 3D ── */
[data-theme="material-lime-dark-3d"] {
    --bg-page: #303030;
    --bg-surface: #424242;
    --bg-modal: #383838;
    --bg-form: #303030;
    --bg-lookup-desc: #383838;
    --text-primary: #ffffff;
    --text-heading: #ffffff;
    --text-label: #b0b0b0;
    --text-muted: #757575;
    --text-on-accent: #1b1b1b;
    --text-btn: #1b1b1b;
    --accent: #aed581;
    --accent-selected: #263520;
    --btn-bg: #aed581;
    --btn-hover: #c5e1a5;
    --btn-cancel-bg: #555555;
    --btn-cancel-hover: #4a4a4a;
    --btn-cancel-text: #b0b0b0;
    --border-color: #555555;
    --border-separator: #484848;
    --focus-color: #aed581;
    --favorite: #e6a817;
    --error: #ef5350;
    --notification-bg: rgba(102,187,106,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #757575;
    --icon-add: #66bb6a;
    --icon-delete: #ef5350;
    --config-item-hover: #525252;
    --btn-delete-hover: #c0392b;
    --fk-icon: #555555;
}

/* ── MATERIAL ORANGE DARK 3D ── */
[data-theme="material-orange-dark-3d"] {
    --bg-page: #303030;
    --bg-surface: #424242;
    --bg-modal: #383838;
    --bg-form: #303030;
    --bg-lookup-desc: #383838;
    --text-primary: #ffffff;
    --text-heading: #ffffff;
    --text-label: #b0b0b0;
    --text-muted: #757575;
    --text-on-accent: #1b1b1b;
    --text-btn: #1b1b1b;
    --accent: #ffb74d;
    --accent-selected: #3a2800;
    --btn-bg: #ffb74d;
    --btn-hover: #ffc87c;
    --btn-cancel-bg: #555555;
    --btn-cancel-hover: #4a4a4a;
    --btn-cancel-text: #b0b0b0;
    --border-color: #555555;
    --border-separator: #484848;
    --focus-color: #ffb74d;
    --favorite: #e6a817;
    --error: #ef5350;
    --notification-bg: rgba(102,187,106,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #757575;
    --icon-add: #66bb6a;
    --icon-delete: #ef5350;
    --config-item-hover: #525252;
    --btn-delete-hover: #c0392b;
    --fk-icon: #555555;
}

/* ── MATERIAL PURPLE DARK 3D ── */
[data-theme="material-purple-dark-3d"] {
    --bg-page: #303030;
    --bg-surface: #424242;
    --bg-modal: #383838;
    --bg-form: #303030;
    --bg-lookup-desc: #383838;
    --text-primary: #ffffff;
    --text-heading: #ffffff;
    --text-label: #b0b0b0;
    --text-muted: #757575;
    --text-on-accent: #1b1b1b;
    --text-btn: #1b1b1b;
    --accent: #ce93d8;
    --accent-selected: #2a1a30;
    --btn-bg: #ce93d8;
    --btn-hover: #e1bee7;
    --btn-cancel-bg: #555555;
    --btn-cancel-hover: #4a4a4a;
    --btn-cancel-text: #b0b0b0;
    --border-color: #555555;
    --border-separator: #484848;
    --focus-color: #ce93d8;
    --favorite: #e6a817;
    --error: #ef5350;
    --notification-bg: rgba(102,187,106,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #757575;
    --icon-add: #66bb6a;
    --icon-delete: #ef5350;
    --config-item-hover: #525252;
    --btn-delete-hover: #c0392b;
    --fk-icon: #555555;
}

/* ── MATERIAL TEAL DARK 3D ── */
[data-theme="material-teal-dark-3d"] {
    --bg-page: #303030;
    --bg-surface: #424242;
    --bg-modal: #383838;
    --bg-form: #303030;
    --bg-lookup-desc: #383838;
    --text-primary: #ffffff;
    --text-heading: #ffffff;
    --text-label: #b0b0b0;
    --text-muted: #757575;
    --text-on-accent: #1b1b1b;
    --text-btn: #1b1b1b;
    --accent: #4db6ac;
    --accent-selected: #1a302d;
    --btn-bg: #4db6ac;
    --btn-hover: #80cbc4;
    --btn-cancel-bg: #555555;
    --btn-cancel-hover: #4a4a4a;
    --btn-cancel-text: #b0b0b0;
    --border-color: #555555;
    --border-separator: #484848;
    --focus-color: #4db6ac;
    --favorite: #e6a817;
    --error: #ef5350;
    --notification-bg: rgba(102,187,106,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #757575;
    --icon-add: #66bb6a;
    --icon-delete: #ef5350;
    --config-item-hover: #525252;
    --btn-delete-hover: #c0392b;
    --fk-icon: #555555;
}

/* ── GENERIC DARK 3D ── */
[data-theme="generic-dark-3d"] {
    --bg-page: #363640;
    --bg-surface: #46464e;
    --bg-modal: #3d3d47;
    --bg-form: #363640;
    --bg-lookup-desc: #3d3d47;
    --text-primary: #e0e0e0;
    --text-heading: #e0e0e0;
    --text-label: #b0b0b0;
    --text-muted: #808080;
    --text-on-accent: #1a1a1a;
    --text-btn: #1a1a1a;
    --accent: #5ba7e8;
    --accent-selected: #1a3350;
    --btn-bg: #5ba7e8;
    --btn-hover: #7bbdff;
    --btn-cancel-bg: #555560;
    --btn-cancel-hover: #50505a;
    --btn-cancel-text: #b0b0b0;
    --border-color: #555560;
    --border-separator: #4a4a54;
    --focus-color: #5ba7e8;
    --favorite: #e6a817;
    --error: #e57373;
    --notification-bg: rgba(129,199,132,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.4);
    --icon-default: #808080;
    --icon-add: #81c784;
    --icon-delete: #e57373;
    --config-item-hover: #50505a;
    --btn-delete-hover: #c0392b;
    --fk-icon: #555560;
}

/* ── GENERIC DARKMOON 3D ── */
[data-theme="generic-darkmoon-3d"] {
    --bg-page: #232734;
    --bg-surface: #2e3341;
    --bg-modal: #293040;
    --bg-form: #232734;
    --bg-lookup-desc: #293040;
    --text-primary: #d5d8de;
    --text-heading: #d5d8de;
    --text-label: #9ea3b0;
    --text-muted: #6b7080;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #5f8bbc;
    --accent-selected: #1a2a3a;
    --btn-bg: #5f8bbc;
    --btn-hover: #7da5d0;
    --btn-cancel-bg: #3a4050;
    --btn-cancel-hover: #353b4c;
    --btn-cancel-text: #9ea3b0;
    --border-color: #3a4050;
    --border-separator: #343a4a;
    --focus-color: #5f8bbc;
    --favorite: #e6a817;
    --error: #e57373;
    --notification-bg: rgba(129,199,132,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.45);
    --icon-default: #6b7080;
    --icon-add: #81c784;
    --icon-delete: #e57373;
    --config-item-hover: #353b4c;
    --btn-delete-hover: #c0392b;
    --fk-icon: #3a4050;
}

/* ── GENERIC DARKVIOLET 3D ── */
[data-theme="generic-darkviolet-3d"] {
    --bg-page: #2b2240;
    --bg-surface: #362d4e;
    --bg-modal: #302848;
    --bg-form: #2b2240;
    --bg-lookup-desc: #302848;
    --text-primary: #d5d0e0;
    --text-heading: #d5d0e0;
    --text-label: #a098b0;
    --text-muted: #706880;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #9b6bcd;
    --accent-selected: #2a1a3a;
    --btn-bg: #9b6bcd;
    --btn-hover: #b088e0;
    --btn-cancel-bg: #453a5a;
    --btn-cancel-hover: #403660;
    --btn-cancel-text: #a098b0;
    --border-color: #453a5a;
    --border-separator: #3d3454;
    --focus-color: #9b6bcd;
    --favorite: #e6a817;
    --error: #e57373;
    --notification-bg: rgba(129,199,132,0.8);
    --notification-text: #000;
    --overlay: rgba(0,0,0,0.6);
    --shadow: rgba(0,0,0,0.45);
    --icon-default: #706880;
    --icon-add: #81c784;
    --icon-delete: #e57373;
    --config-item-hover: #403660;
    --btn-delete-hover: #c0392b;
    --fk-icon: #453a5a;
}

/* ── FLUENT BLUE LIGHT 3D ── */
[data-theme="fluent-blue-light-3d"] {
    --bg-page: #f5f5f5;
    --bg-surface: #ffffff;
    --bg-modal: #fafafa;
    --bg-form: #f5f5f5;
    --bg-lookup-desc: #fafafa;
    --text-primary: #323130;
    --text-heading: #323130;
    --text-label: #605e5c;
    --text-muted: #a19f9d;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #0078d4;
    --accent-selected: #deecf9;
    --btn-bg: #0078d4;
    --btn-hover: #106ebe;
    --btn-cancel-bg: #a19f9d;
    --btn-cancel-hover: #8a8886;
    --btn-cancel-text: #fff;
    --border-color: #e1dfdd;
    --border-separator: #edebe9;
    --focus-color: #0078d4;
    --favorite: #c97003;
    --error: #d13438;
    --notification-bg: rgba(16,124,16,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #a19f9d;
    --icon-add: #107c10;
    --icon-delete: #d13438;
    --config-item-hover: #f3f2f1;
    --btn-delete-hover: #a52a2e;
    --fk-icon: #c8c6c4;
}

/* ── FLUENT SAAS LIGHT 3D ── */
[data-theme="fluent-saas-light-3d"] {
    --bg-page: #f3f2f1;
    --bg-surface: #ffffff;
    --bg-modal: #faf9f8;
    --bg-form: #f3f2f1;
    --bg-lookup-desc: #faf9f8;
    --text-primary: #323130;
    --text-heading: #323130;
    --text-label: #605e5c;
    --text-muted: #a19f9d;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #0078d4;
    --accent-selected: #deecf9;
    --btn-bg: #0078d4;
    --btn-hover: #106ebe;
    --btn-cancel-bg: #a19f9d;
    --btn-cancel-hover: #8a8886;
    --btn-cancel-text: #fff;
    --border-color: #e1dfdd;
    --border-separator: #edebe9;
    --focus-color: #0078d4;
    --favorite: #c97003;
    --error: #d13438;
    --notification-bg: rgba(16,124,16,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #a19f9d;
    --icon-add: #107c10;
    --icon-delete: #d13438;
    --config-item-hover: #f3f2f1;
    --btn-delete-hover: #a52a2e;
    --fk-icon: #c8c6c4;
}

/* ── MATERIAL BLUE LIGHT 3D ── */
[data-theme="material-blue-light-3d"] {
    --bg-page: #fafafa;
    --bg-surface: #ffffff;
    --bg-modal: #f5f5f5;
    --bg-form: #fafafa;
    --bg-lookup-desc: #f5f5f5;
    --text-primary: #212121;
    --text-heading: #212121;
    --text-label: #616161;
    --text-muted: #9e9e9e;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #1976d2;
    --accent-selected: #e3f2fd;
    --btn-bg: #1976d2;
    --btn-hover: #1565c0;
    --btn-cancel-bg: #9e9e9e;
    --btn-cancel-hover: #858585;
    --btn-cancel-text: #fff;
    --border-color: #e0e0e0;
    --border-separator: #eeeeee;
    --focus-color: #1976d2;
    --favorite: #c97003;
    --error: #f44336;
    --notification-bg: rgba(76,175,80,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #9e9e9e;
    --icon-add: #4caf50;
    --icon-delete: #f44336;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #c0392b;
    --fk-icon: #bdbdbd;
}

/* ── MATERIAL LIME LIGHT 3D ── */
[data-theme="material-lime-light-3d"] {
    --bg-page: #fafafa;
    --bg-surface: #ffffff;
    --bg-modal: #f5f5f5;
    --bg-form: #fafafa;
    --bg-lookup-desc: #f5f5f5;
    --text-primary: #212121;
    --text-heading: #212121;
    --text-label: #616161;
    --text-muted: #9e9e9e;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #689f38;
    --accent-selected: #e8f5e9;
    --btn-bg: #689f38;
    --btn-hover: #558b2f;
    --btn-cancel-bg: #9e9e9e;
    --btn-cancel-hover: #858585;
    --btn-cancel-text: #fff;
    --border-color: #e0e0e0;
    --border-separator: #eeeeee;
    --focus-color: #689f38;
    --favorite: #c97003;
    --error: #f44336;
    --notification-bg: rgba(76,175,80,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #9e9e9e;
    --icon-add: #4caf50;
    --icon-delete: #f44336;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #c0392b;
    --fk-icon: #bdbdbd;
}

/* ── MATERIAL ORANGE LIGHT 3D ── */
[data-theme="material-orange-light-3d"] {
    --bg-page: #fafafa;
    --bg-surface: #ffffff;
    --bg-modal: #f5f5f5;
    --bg-form: #fafafa;
    --bg-lookup-desc: #f5f5f5;
    --text-primary: #212121;
    --text-heading: #212121;
    --text-label: #616161;
    --text-muted: #9e9e9e;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #f57c00;
    --accent-selected: #fff3e0;
    --btn-bg: #f57c00;
    --btn-hover: #ef6c00;
    --btn-cancel-bg: #9e9e9e;
    --btn-cancel-hover: #858585;
    --btn-cancel-text: #fff;
    --border-color: #e0e0e0;
    --border-separator: #eeeeee;
    --focus-color: #f57c00;
    --favorite: #c97003;
    --error: #f44336;
    --notification-bg: rgba(76,175,80,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #9e9e9e;
    --icon-add: #4caf50;
    --icon-delete: #f44336;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #c0392b;
    --fk-icon: #bdbdbd;
}

/* ── MATERIAL PURPLE LIGHT 3D ── */
[data-theme="material-purple-light-3d"] {
    --bg-page: #fafafa;
    --bg-surface: #ffffff;
    --bg-modal: #f5f5f5;
    --bg-form: #fafafa;
    --bg-lookup-desc: #f5f5f5;
    --text-primary: #212121;
    --text-heading: #212121;
    --text-label: #616161;
    --text-muted: #9e9e9e;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #7b1fa2;
    --accent-selected: #f3e5f5;
    --btn-bg: #7b1fa2;
    --btn-hover: #6a1b9a;
    --btn-cancel-bg: #9e9e9e;
    --btn-cancel-hover: #858585;
    --btn-cancel-text: #fff;
    --border-color: #e0e0e0;
    --border-separator: #eeeeee;
    --focus-color: #7b1fa2;
    --favorite: #c97003;
    --error: #f44336;
    --notification-bg: rgba(76,175,80,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #9e9e9e;
    --icon-add: #4caf50;
    --icon-delete: #f44336;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #c0392b;
    --fk-icon: #bdbdbd;
}

/* ── MATERIAL TEAL LIGHT 3D ── */
[data-theme="material-teal-light-3d"] {
    --bg-page: #fafafa;
    --bg-surface: #ffffff;
    --bg-modal: #f5f5f5;
    --bg-form: #fafafa;
    --bg-lookup-desc: #f5f5f5;
    --text-primary: #212121;
    --text-heading: #212121;
    --text-label: #616161;
    --text-muted: #9e9e9e;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #00796b;
    --accent-selected: #e0f2f1;
    --btn-bg: #00796b;
    --btn-hover: #00695c;
    --btn-cancel-bg: #9e9e9e;
    --btn-cancel-hover: #858585;
    --btn-cancel-text: #fff;
    --border-color: #e0e0e0;
    --border-separator: #eeeeee;
    --focus-color: #00796b;
    --favorite: #c97003;
    --error: #f44336;
    --notification-bg: rgba(76,175,80,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.12);
    --icon-default: #9e9e9e;
    --icon-add: #4caf50;
    --icon-delete: #f44336;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #c0392b;
    --fk-icon: #bdbdbd;
}

/* ── GENERIC LIGHT 3D ── */
[data-theme="generic-light-3d"] {
    --bg-page: #ffffff;
    --bg-surface: #f8f8f8;
    --bg-modal: #efefef;
    --bg-form: #f8f8f8;
    --bg-lookup-desc: #efefef;
    --text-primary: #333333;
    --text-heading: #333333;
    --text-label: #666666;
    --text-muted: #999999;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #337ab7;
    --accent-selected: #e3f0fb;
    --btn-bg: #337ab7;
    --btn-hover: #23527c;
    --btn-cancel-bg: #999999;
    --btn-cancel-hover: #808080;
    --btn-cancel-text: #fff;
    --border-color: #dddddd;
    --border-separator: #eeeeee;
    --focus-color: #337ab7;
    --favorite: #c97003;
    --error: #d9534f;
    --notification-bg: rgba(92,184,92,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.1);
    --icon-default: #999999;
    --icon-add: #5cb85c;
    --icon-delete: #d9534f;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #c0392b;
    --fk-icon: #bbbbbb;
}

/* ── GENERIC CARMINE 3D ── */
[data-theme="generic-carmine-3d"] {
    --bg-page: #ffffff;
    --bg-surface: #f8f8f8;
    --bg-modal: #f0f0f0;
    --bg-form: #f8f8f8;
    --bg-lookup-desc: #f0f0f0;
    --text-primary: #333333;
    --text-heading: #333333;
    --text-label: #666666;
    --text-muted: #999999;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #d9534f;
    --accent-selected: #fce4e4;
    --btn-bg: #d9534f;
    --btn-hover: #c9302c;
    --btn-cancel-bg: #999999;
    --btn-cancel-hover: #808080;
    --btn-cancel-text: #fff;
    --border-color: #dddddd;
    --border-separator: #eeeeee;
    --focus-color: #d9534f;
    --favorite: #c97003;
    --error: #d9534f;
    --notification-bg: rgba(92,184,92,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.1);
    --icon-default: #999999;
    --icon-add: #5cb85c;
    --icon-delete: #d9534f;
    --config-item-hover: #f5f5f5;
    --btn-delete-hover: #a52a2e;
    --fk-icon: #bbbbbb;
}

/* ── GENERIC SOFTBLUE 3D ── */
[data-theme="generic-softblue-3d"] {
    --bg-page: #eef4f9;
    --bg-surface: #f8fbfd;
    --bg-modal: #e8f0f6;
    --bg-form: #eef4f9;
    --bg-lookup-desc: #e8f0f6;
    --text-primary: #333333;
    --text-heading: #333333;
    --text-label: #5a6a7a;
    --text-muted: #8899aa;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #7ab8eb;
    --accent-selected: #dae8f5;
    --btn-bg: #7ab8eb;
    --btn-hover: #5a9fd6;
    --btn-cancel-bg: #8899aa;
    --btn-cancel-hover: #708090;
    --btn-cancel-text: #fff;
    --border-color: #c8d8e8;
    --border-separator: #dde8f0;
    --focus-color: #7ab8eb;
    --favorite: #c97003;
    --error: #d9534f;
    --notification-bg: rgba(92,184,92,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.08);
    --icon-default: #8899aa;
    --icon-add: #5cb85c;
    --icon-delete: #d9534f;
    --config-item-hover: #e0ebf3;
    --btn-delete-hover: #c0392b;
    --fk-icon: #a8b8c8;
}

/* ── GENERIC GREENMIST 3D ── */
[data-theme="generic-greenmist-3d"] {
    --bg-page: #eef5ee;
    --bg-surface: #f5faf5;
    --bg-modal: #e5f0e5;
    --bg-form: #eef5ee;
    --bg-lookup-desc: #e5f0e5;
    --text-primary: #333333;
    --text-heading: #333333;
    --text-label: #5a6a5a;
    --text-muted: #88998a;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #6aaa6a;
    --accent-selected: #dff0df;
    --btn-bg: #6aaa6a;
    --btn-hover: #4d8d4d;
    --btn-cancel-bg: #88998a;
    --btn-cancel-hover: #708070;
    --btn-cancel-text: #fff;
    --border-color: #c0d8c0;
    --border-separator: #d5e8d5;
    --focus-color: #6aaa6a;
    --favorite: #c97003;
    --error: #d9534f;
    --notification-bg: rgba(92,184,92,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.4);
    --shadow: rgba(0,0,0,0.08);
    --icon-default: #88998a;
    --icon-add: #5cb85c;
    --icon-delete: #d9534f;
    --config-item-hover: #ddf0dd;
    --btn-delete-hover: #c0392b;
    --fk-icon: #a0c0a0;
}

/* ── GENERIC CONTRAST 3D ── */
[data-theme="generic-contrast-3d"] {
    --bg-page: #ffffff;
    --bg-surface: #ffffff;
    --bg-modal: #f0f0f0;
    --bg-form: #f0f0f0;
    --bg-lookup-desc: #f0f0f0;
    --text-primary: #000000;
    --text-heading: #000000;
    --text-label: #333333;
    --text-muted: #595959;
    --text-on-accent: #fff;
    --text-btn: #fff;
    --accent: #0050a0;
    --accent-selected: #d0e8ff;
    --btn-bg: #0050a0;
    --btn-hover: #003670;
    --btn-cancel-bg: #595959;
    --btn-cancel-hover: #404040;
    --btn-cancel-text: #fff;
    --border-color: #000000;
    --border-separator: #666666;
    --focus-color: #0050a0;
    --favorite: #c97003;
    --error: #cc0000;
    --notification-bg: rgba(0,102,0,0.8);
    --notification-text: #fff;
    --overlay: rgba(0,0,0,0.5);
    --shadow: rgba(0,0,0,0.2);
    --icon-default: #595959;
    --icon-add: #006600;
    --icon-delete: #cc0000;
    --config-item-hover: #e8e8e8;
    --btn-delete-hover: #990000;
    --fk-icon: #666666;
}

/* ── SHARED DARK 3D VARIABLES ── */
[data-theme="fluent-blue-3d"],
[data-theme="fluent-saas-dark-3d"],
[data-theme="material-blue-dark-3d"],
[data-theme="material-lime-dark-3d"],
[data-theme="material-orange-dark-3d"],
[data-theme="material-purple-dark-3d"],
[data-theme="material-teal-dark-3d"],
[data-theme="generic-dark-3d"],
[data-theme="generic-darkmoon-3d"],
[data-theme="generic-darkviolet-3d"] {
    --3d-border-dark: rgba(0,0,0,0.5);
    --3d-border-light: rgba(255,255,255,0.07);
    --3d-inset: inset 1px 1px 3px rgba(0,0,0,0.45), inset -1px -1px 1px rgba(255,255,255,0.03);
    --3d-inset-desc: inset 1px 1px 2px rgba(0,0,0,0.3);
    --3d-grad-dark: rgba(0,0,0,0.12);
    --3d-grad-light: rgba(255,255,255,0.03);
    --3d-grad-desc-dark: rgba(0,0,0,0.02);
    --3d-grad-desc-light: rgba(255,255,255,0.05);
    --3d-btn-border: rgba(255,255,255,0.05) rgba(0,0,0,0.12) rgba(0,0,0,0.15) rgba(255,255,255,0.05);
    --3d-btn-shadow: 0 1px 2px rgba(0,0,0,0.2);
    --3d-btn-shadow-hover: 0 1px 3px rgba(0,0,0,0.25);
    --3d-btn-shadow-active: inset 0 1px 2px rgba(0,0,0,0.25);
    --3d-focus-glow: 0.25;
}

/* ── SHARED LIGHT 3D VARIABLES ── */
[data-theme="fluent-blue-light-3d"],
[data-theme="fluent-saas-light-3d"],
[data-theme="material-blue-light-3d"],
[data-theme="material-lime-light-3d"],
[data-theme="material-orange-light-3d"],
[data-theme="material-purple-light-3d"],
[data-theme="material-teal-light-3d"],
[data-theme="generic-light-3d"],
[data-theme="generic-carmine-3d"],
[data-theme="generic-softblue-3d"],
[data-theme="generic-greenmist-3d"],
[data-theme="generic-contrast-3d"] {
    --3d-border-dark: rgba(0,0,0,0.18);
    --3d-border-light: rgba(255,255,255,0.7);
    --3d-inset: inset 1px 1px 2px rgba(0,0,0,0.1), inset -1px -1px 0 rgba(255,255,255,0.5);
    --3d-inset-desc: inset 1px 1px 2px rgba(0,0,0,0.06);
    --3d-grad-dark: rgba(0,0,0,0.04);
    --3d-grad-light: rgba(255,255,255,0.3);
    --3d-grad-desc-dark: rgba(0,0,0,0.01);
    --3d-grad-desc-light: rgba(255,255,255,0.2);
    --3d-btn-border: rgba(255,255,255,0.2) rgba(0,0,0,0.06) rgba(0,0,0,0.1) rgba(255,255,255,0.2);
    --3d-btn-shadow: 0 1px 2px rgba(0,0,0,0.1);
    --3d-btn-shadow-hover: 0 1px 3px rgba(0,0,0,0.15);
    --3d-btn-shadow-active: inset 0 1px 2px rgba(0,0,0,0.15);
    --3d-focus-glow: 0.2;
}

/* ── SHARED 3D STYLING RULES ── */

/* 3D inputs — matching lookup-desc style */
[data-theme$="-3d"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme$="-3d"] select,
[data-theme$="-3d"] textarea {
    background-color: var(--bg-lookup-desc);
    border: 1px solid var(--border-color);
    box-shadow: var(--3d-inset-desc);
    background-image: linear-gradient(to bottom, var(--3d-grad-desc-dark), var(--3d-grad-desc-light));
}

[data-theme$="-3d"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme$="-3d"] select:focus,
[data-theme$="-3d"] textarea:focus {
    border-color: var(--focus-color);
    box-shadow: var(--3d-inset-desc), 0 0 4px var(--focus-color);
}

/* 3D lookup-desc */
[data-theme$="-3d"] .lookup-desc {
    border-color: var(--3d-border-dark) var(--3d-border-light) var(--3d-border-light) transparent;
    box-shadow: var(--3d-inset-desc);
    background-image: linear-gradient(to bottom, var(--3d-grad-desc-dark), var(--3d-grad-desc-light));
}

/* 3D checkboxes */
[data-theme$="-3d"] input[type="checkbox"] {
    background-color: var(--bg-lookup-desc);
    box-shadow: var(--3d-inset-desc);
    background-image: linear-gradient(to bottom, var(--3d-grad-desc-dark), var(--3d-grad-desc-light));
}

[data-theme$="-3d"] input[type="checkbox"]:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: none;
    box-shadow: var(--3d-inset-desc);
}

[data-theme$="-3d"] input[type="checkbox"]:checked::after {
    border-color: var(--text-on-accent);
}

[data-theme$="-3d"] input[type="checkbox"]:focus {
    box-shadow: var(--3d-inset-desc), 0 0 4px var(--focus-color);
}

/* 3D buttons — raised (light top-left, dark bottom-right) */
[data-theme$="-3d"] button,
[data-theme$="-3d"] .btn-lookup {
    border-color: var(--3d-btn-border);
    box-shadow: var(--3d-btn-shadow);
}

[data-theme$="-3d"] button:hover {
    box-shadow: var(--3d-btn-shadow-hover);
}

[data-theme$="-3d"] button:active {
    box-shadow: var(--3d-btn-shadow-active);
}

/* ── Reset ── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Base ── */

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    background-color: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.5;
    padding: 24px 32px 64px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

input, textarea, select, button { font-family: inherit; }

/* ── Screenshot button ── */

.screenshot-btn {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.screenshot-btn:hover {
    opacity: 1;
    color: var(--accent);
    border-color: var(--accent);
}

.screenshot-btn:disabled {
    cursor: wait;
    opacity: 0.6;
}

.upload-btn {
    top: 48px;
}

/* ── Header / Logos ── */

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-page);
    padding: 0;
    /* margem negativa: encosta o logotipo um pouco mais ao topo (o body tem 24px de padding) */
    margin: -22px 0 16px;
    width: calc(100% + 64px);
}

/* logotipo + badge do utilizador empilhados */
.logo-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.image-container a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.image-container img {
    height: 56px !important;
    width: auto !important;
}

/* badge com o codigo do utilizador com sessao iniciada */
.user-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--accent-selected);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.user-badge i {
    font-size: 10px;
    opacity: 0.7;
}

/* ── Headings ── */

h1 {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
}

h2 {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
}

/* ── Form Fields ── */

.input-container { position: relative; }

input, select, textarea {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    transition: border-color 0.15s;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    outline: none;
}

input[type="date"]:focus {
    box-shadow: 0 0 0 2px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
}

label {
    position: absolute;
    top: -20px;
    left: 0;
    padding: 0 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-label);
}

input:focus + label {
    color: var(--accent);
}

input[readonly] {
    opacity: 0.5;
    cursor: not-allowed;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

input[type="checkbox"]:checked {
    border-color: var(--accent);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 4.5px;
    height: 9px;
    border: solid var(--accent);
    border-width: 0 2.2px 2.2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

input[type="checkbox"]:focus {
    border-color: var(--focus-color);
    outline: none;
}

input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Form Card ──
   Formulários de edição (convenção id="...Form") viram um cartão --bg-surface
   com os inputs recuados para --bg-input. Formulários com secções recebem um
   cartão por .form-section (form_editar.css); os de .config-section já têm
   moldura própria. */

form[id$="Form"]:has(.input-container):not(:has(.form-section), .config-section *) {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-separator);
    border-radius: 10px;
    padding: 44px 36px 32px;
    box-shadow: 0 1px 3px var(--shadow);
}

/* ── Buttons ── */

button {
    background-color: var(--btn-bg);
    color: var(--text-btn);
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background-color 0.15s;
}

button:hover { background-color: var(--btn-hover); }

.btn-cancel {
    background-color: var(--btn-cancel-bg);
    color: var(--btn-cancel-text);
}

.btn-cancel:hover {
    background-color: var(--btn-cancel-hover);
}

.favorito { color: var(--favorite); }

.error-message {
    color: var(--error);
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
}

/* ── Focus visible (acessibilidade por teclado) ── */

[role="button"]:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.add-color-change:focus-visible,
.del-color-change:focus-visible,
.config-color-change:focus-visible,
.filter-color-change:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Links ── */

a { text-decoration: none; cursor: pointer; }
a, a:link, a:visited, a:hover, a:active { color: inherit; }

/* ── Table Base ── */

th, td { border-right: 1px solid var(--border-separator); }
th:last-child, td:last-child { border-right: none; }

th {
    padding: 10px 12px;
    text-align: left;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    user-select: none;
}

caption {
    text-align: left;
    padding: 16px 0;
    display: flex;
    gap: 15px;
    align-items: center;
}

caption span {
    color: var(--text-muted);
    font-size: 14px;
}


/* ── Compact columns — dates, numbers, currency ── */

td[data-col*="DATA"],
th[data-col*="DATA"] {
    text-align: center;
    white-space: nowrap;
}

td[data-col*="VALOR"],
th[data-col*="VALOR"],
td[data-col*="SALARIO"],
th[data-col*="SALARIO"],
td[data-col*="PRECO"],
th[data-col*="PRECO"],
td[data-col*="COMISSAO"],
th[data-col*="COMISSAO"],
td[data-col*="QUANTIDADE"],
th[data-col*="QUANTIDADE"],
td[data-col*="IVA"],
th[data-col*="IVA"],
td[data-col*="IRS"],
th[data-col*="IRS"],
td[data-col*="DESCONTO"],
th[data-col*="DESCONTO"],
td[data-col*="HORAS"],
th[data-col*="HORAS"] {
    white-space: nowrap;
}

/* ── Modal body scroll lock ── */

body.modal-open {
    overflow: hidden;
}

/* ── Notification Toast ── */

.notification {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    background-color: var(--bg-modal);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--icon-add);
    border-radius: 4px;
    box-shadow: 0 4px 16px var(--shadow);
    z-index: 9999;
    font-size: 13px;
    animation: toastSlideIn 0.2s ease-out;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Mover e redimensionar popups (popup_janela.js) ──
   O mesmo desenho das pegas dos popups das escalas. O módulo não escreve isto:
   chama initPopupDrag()/initPopupResize() e as pegas vêm daqui. */

/* Barra de título por onde se arrasta (a classe é posta pelo initPopupDrag) */
.popup-pega {
    cursor: move;
    user-select: none;
}

.a-mover,
.a-mover * {
    user-select: none;
}

/* Solto do centro do overlay: a posição vem inline, em `fixed` */
.popup-ancorado {
    box-sizing: border-box;
}

.popup-resize-grip {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 5;
}

.popup-resize-grip::before {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
}

.popup-resize-grip:hover::before,
.a-redimensionar .popup-resize-grip::before {
    border-color: var(--accent);
}

/* Enquanto se arrasta, o rato passa por cima de texto e listas */
.a-redimensionar,
.a-redimensionar * {
    user-select: none;
}

/* Com tamanho escolhido à mão não há tectos: largura e altura vêm inline */
.redimensionado {
    box-sizing: border-box;
    max-width: none;
    max-height: none;
}