/* ============================================================
   _LayoutThemes.css  —  Design tokens & color themes
   Shared by all layout variants (vertical, horizontal, etc.)
   Load FIRST, before _LayoutShared.css and layout-specific CSS.
   ============================================================ */

/* ── Default tokens ── */
:root {
    --fx-outer-bg: #dfdfdf;
    --fx-white: #ffffff;
    --fx-sidebar-bg: #ffffff;
    --fx-toolbar-bg: #ffffff;
    --fx-nav-bg: #f0efed;
    --fx-content-bg: #f7f7f7;
    --fx-text: #2c2c2c;
    --fx-text-heading: #828282;
    --fx-text-mid: #4a4a4a;
    --fx-text-muted: #8e8a82;
    --fx-icon: #7a7a7a;
    --fx-input: #f7f7f7;
    --fx-border: #d5d1c9;
    --fx-hover: rgba(0, 0, 0, 0.04);
    --fx-active: #f4f2ee;
    --fx-active-input: #f4f2ee;
    --fx-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --fx-avatar: #556b3e;
    --fx-r: 8px;
    --fx-r-lg: 14px;
    --fx-speed: 0.2s;
    --fx-bottom-border: #e4e1da;
    --fx-nav-border-hover: rgba(0, 0, 0, 0.08);
    --fx-nav-border-active: rgba(0, 0, 0, 0.10);
    --fx-nav-color: #8a8780;
    --fx-nav-icon: #a09d97;
    --fx-bottom-h: 71px;
    --fx-accent: rgba(245, 242, 230, 0.20);
    --fx-subheader: rgba(236, 233, 230, 0.8);
    --tblr-primary: #066fd1;
    --tblr-border-color-translucent: rgba(4, 32, 69, 0.3);
}

/* ── Beige ── */
body.theme-beige {
    --fx-outer-bg: #e8e5de;
    --fx-sidebar-bg: #ffffff;
    --fx-toolbar-bg: #ffffff;
    --fx-nav-bg: #f0ebe4;
    --fx-content-bg: #f4f2ee;
    --fx-text: #2c2c2c;
    --fx-text-heading: #6b6556;
    --fx-text-mid: #4a4637;
    --fx-text-muted: #8e8a82;
    --fx-icon: #7a7568;
    --fx-input: #f4f2ee;
    --fx-border: #d5d1c9;
    --fx-hover: rgba(120, 100, 60, 0.06);
    --fx-active: #ece9e0;
    --fx-active-input: #ece9e0;
    --fx-active-shadow: 0 1px 3px rgba(80, 60, 20, 0.08);
    --fx-avatar: #8a7e5a;
    --fx-bottom-border: #e4e1da;
    --fx-nav-border-hover: rgba(120, 100, 60, 0.10);
    --fx-nav-border-active: rgba(120, 100, 60, 0.14);
    --fx-nav-color: #8a8780;
    --fx-nav-icon: #a09d97;
    --fx-accent: rgba(245, 242, 238, 0.80);
    --fx-subheader: rgba(245, 242, 235, 0.60);
    --tblr-primary: #066fd1;
    --tblr-border-color-translucent: rgba(4, 32, 69, 0.3);
}

/* ── Dark ── */
body.theme-dark {
    --fx-outer-bg: #1a1a1a;
    --fx-white: #2a2a2a;
    --fx-sidebar-bg: #222222;
    --fx-toolbar-bg: #272727;
    --fx-nav-bg: #1e1e1e;
    --fx-content-bg: #2a2a2a;
    --fx-text: #e0e0e0;
    --fx-text-heading: #b0b0b0;
    --fx-text-mid: #ffffff;
    --fx-text-muted: #808080;
    --fx-icon: #999999;
    --fx-input: #2a2a2a;
    --fx-border: #3a3a3a;
    --fx-hover: rgba(255, 255, 255, 0.06);
    --fx-active: #333333;
    --fx-active-input: #333333;
    --fx-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --fx-avatar: #556b3e;
    --fx-bottom-border: #3a3a3a;
    --fx-nav-border-hover: rgba(255, 255, 255, 0.08);
    --fx-nav-border-active: rgba(255, 255, 255, 0.12);
    --fx-nav-color: #999999;
    --fx-nav-icon: #777777;
    --fx-accent: rgba(255, 255, 255, 0.05);
    --fx-subheader: rgba(0, 0, 0, 0.1);
    --tblr-primary: #066fd1;
    --tblr-border-color-translucent: rgba(4, 32, 69, 0.3);
}

/* ── Slate ── */
body.theme-slate {
    --fx-outer-bg: #d4d8de;
    --fx-white: #ffffff;
    --fx-sidebar-bg: #f7f8fa;
    --fx-toolbar-bg: #f7f8fa;
    --fx-nav-bg: #eaecf0;
    --fx-content-bg: #eef0f3;
    --fx-text: #1e2a38;
    --fx-text-heading: #5a6a7a;
    --fx-text-mid: #374b5e;
    --fx-text-muted: #7b8a99;
    --fx-icon: #6b7b8c;
    --fx-input: #eef0f3;
    --fx-border: #c4cad2;
    --fx-hover: rgba(40, 70, 110, 0.05);
    --fx-active: #e2e6ec;
    --fx-active-input: #e2e6ec;
    --fx-active-shadow: 0 1px 3px rgba(30, 50, 80, 0.08);
    --fx-avatar: #3e6089;
    --fx-bottom-border: #d0d5dc;
    --fx-nav-border-hover: rgba(40, 70, 110, 0.10);
    --fx-nav-border-active: rgba(40, 70, 110, 0.14);
    --fx-nav-color: #7b8a99;
    --fx-nav-icon: #94a1ae;
    --fx-accent: rgba(226, 230, 236, 0.30);
    --fx-subheader: rgb(226, 230, 236, 0.70);
    --tblr-primary: #066fd1;
    --tblr-border-color-translucent: rgba(4, 32, 69, 0.3);
}

/* ── Forest ── */
body.theme-forest {
    --fx-outer-bg: #cdd7cc;
    --fx-white: #ffffff;
    --fx-sidebar-bg: #f5f7f4;
    --fx-toolbar-bg: #f5f7f4;
    --fx-nav-bg: #e7ece4;
    --fx-content-bg: #ecf0eb;
    --fx-text: #1f2e1f;
    --fx-text-heading: #4e6648;
    --fx-text-mid: #365030;
    --fx-text-muted: #758e6e;
    --fx-icon: #637a5c;
    --fx-input: #ecf0eb;
    --fx-border: #bec9ba;
    --fx-hover: rgba(50, 90, 40, 0.05);
    --fx-active: #dfe6dc;
    --fx-active-input: #dfe6dc;
    --fx-active-shadow: 0 1px 3px rgba(30, 60, 20, 0.08);
    --fx-avatar: #4a7342;
    --fx-bottom-border: #cad3c6;
    --fx-nav-border-hover: rgba(50, 90, 40, 0.10);
    --fx-nav-border-active: rgba(50, 90, 40, 0.14);
    --fx-nav-color: #758e6e;
    --fx-nav-icon: #92a88c;
    --fx-subheader: rgb(222, 230, 220, 0.50);
    --fx-accent: rgba(220, 230, 220, 0.30);
    --tblr-primary: #066fd1;
    --tblr-border-color-translucent: rgba(4, 32, 69, 0.3);
}

/* ── Plum ── */
body.theme-plum {
    --fx-outer-bg: #d9d1de;
    --fx-white: #ffffff;
    --fx-sidebar-bg: #f9f7fa;
    --fx-toolbar-bg: #f9f7fa;
    --fx-nav-bg: #ece8ef;
    --fx-content-bg: #f0ecf2;
    --fx-text: #2a1f34;
    --fx-text-heading: #6e5a7c;
    --fx-text-mid: #4d3a5e;
    --fx-text-muted: #8e7f9a;
    --fx-icon: #7e6d8e;
    --fx-input: #f0ecf2;
    --fx-border: #cfc6d6;
    --fx-hover: rgba(90, 50, 120, 0.05);
    --fx-active: #e6dfe9;
    --fx-active-input: #e6dfe9;
    --fx-active-shadow: 0 1px 3px rgba(60, 30, 80, 0.08);
    --fx-avatar: #7a5494;
    --fx-bottom-border: #d6ced9;
    --fx-nav-border-hover: rgba(90, 50, 120, 0.10);
    --fx-nav-border-active: rgba(90, 50, 120, 0.14);
    --fx-nav-color: #8e7f9a;
    --fx-nav-icon: #a89ab4;
    --fx-subheader: rgb(231, 223, 240, 0.50);
    --fx-accent: rgba(231, 223, 235, 0.30);
    --tblr-primary: #066fd1;
    --tblr-border-color-translucent: rgba(4, 32, 69, 0.3);
}

/* ── Ocean ── */
body.theme-ocean {
    --fx-outer-bg: #c8d5df;
    --fx-white: #ffffff;
    --fx-sidebar-bg: #f2f6f9;
    --fx-toolbar-bg: #f2f6f9;
    --fx-nav-bg: #e3eaf2;
    --fx-content-bg: #e8eef4;
    --fx-text: #152535;
    --fx-text-heading: #4a6580;
    --fx-text-mid: #2c4e6a;
    --fx-text-muted: #6e8ba2;
    --fx-icon: #5c7d96;
    --fx-input: #e8eef4;
    --fx-border: #b8c8d6;
    --fx-hover: rgba(20, 60, 110, 0.05);
    --fx-active: #dae4ed;
    --fx-active-input: #dae4ed;
    --fx-active-shadow: 0 1px 3px rgba(10, 40, 80, 0.08);
    --fx-avatar: #2e6d9e;
    --fx-bottom-border: #c4d1dc;
    --fx-nav-border-hover: rgba(20, 60, 110, 0.10);
    --fx-nav-border-active: rgba(20, 60, 110, 0.14);
    --fx-nav-color: #6e8ba2;
    --fx-nav-icon: #8da5b8;
    --fx-subheader: rgb(217, 228, 237, 0.50);
    --fx-accent: rgba(210, 228, 240, 0.30);
    --tblr-primary: #066fd1;
    --tblr-border-color-translucent: rgba(4, 32, 69, 0.3);
}

/* ── Ember ── */
body.theme-ember {
    --fx-outer-bg: #ddd2ca;
    --fx-white: #ffffff;
    --fx-sidebar-bg: #faf7f5;
    --fx-toolbar-bg: #faf7f5;
    --fx-nav-bg: #ede5dc;
    --fx-content-bg: #f2ece7;
    --fx-text: #33211a;
    --fx-text-heading: #7a584a;
    --fx-text-mid: #5c3c2c;
    --fx-text-muted: #9a7e72;
    --fx-icon: #8a6e60;
    --fx-input: #f2ece7;
    --fx-border: #d4c4b8;
    --fx-hover: rgba(140, 70, 30, 0.05);
    --fx-active: #eae0d8;
    --fx-active-input: #eae0d8;
    --fx-active-shadow: 0 1px 3px rgba(100, 40, 10, 0.08);
    --fx-avatar: #a85c3a;
    --fx-bottom-border: #daced2;
    --fx-nav-border-hover: rgba(140, 70, 30, 0.10);
    --fx-nav-border-active: rgba(140, 70, 30, 0.14);
    --fx-nav-color: #9a7e72;
    --fx-nav-icon: #b29a8e;
    --fx-subheader: rgb(243, 232, 231, 0.80);
    --fx-accent: rgb(243, 230, 231, 0.40);
    --tblr-primary: #066fd1;
    --tblr-border-color-translucent: rgba(4, 32, 69, 0.3);
}

/* ── Sovereign ── */
/* Dark teal #00303C sidebar, warm off-white #F5F5F4 chrome. */
/* Gold #b97727 → hover glow, active nav, avatar.            */
body.theme-sovereign {
    --fx-outer-bg: #cacaca;
    --fx-white: #ffffff;
    --fx-sidebar-bg: #ffffff;
    --fx-toolbar-bg: #eae6de;
    --fx-nav-bg: #00303C;
    --fx-content-bg: #F5F5F4;
    --fx-text: #273e4a;
    --fx-text-heading: #2a4a52;
    --fx-text-mid: #000000;
    --fx-text-muted: #5a8a9a;
    --fx-icon: #72a4b4;
    --fx-input: #fefefe;
    --fx-border: #d5dde0;
    --fx-hover: rgba(185, 119, 39, 0.15);
    --fx-active: #b97727;
    --fx-active-input: #fffaf3;
    --fx-active-shadow: 0 1px 4px rgba(185, 119, 39, 0.30);
    --fx-avatar: #672F25;
    --fx-bottom-border: #004a60;
    --fx-nav-border-hover: rgba(185, 119, 39, 0.25);
    --fx-nav-border-active: rgba(185, 119, 39, 0.50);
    --fx-nav-color: #96c0cc;
    --fx-nav-icon: #6a9aaa;
    --fx-subheader: rgba(0, 48, 60, 0.06);
    --fx-accent: #eeeeee;
    --tblr-primary: #672F25;
    --tblr-border-color-translucent: rgba(103, 37, 47, 0.5);
}


/* ── Sovereign: dark sidebar, warm chrome ── */

body.theme-sovereign .fx-sidebar-brand {
    background: #00303C;
    border-bottom-color: #004a60;
}

body.theme-sovereign .fx-nav-link.active {
    color: #ffffff !important;
}

    body.theme-sovereign .fx-nav-link.active > i:first-child {
        color: rgba(255, 255, 255, 0.90);
    }

body.theme-sovereign .fx-toolbar {
    border-bottom-color: #e8e5e0;
}

body.theme-sovereign .fx-toolbar-sep {
    background: #d5dde0;
}

body.theme-sovereign .fx-toolbar-icon {
    color: #5a7a82 !important;
}

    body.theme-sovereign .fx-toolbar-icon:hover {
        color: #2a3c42 !important;
    }

body.theme-sovereign .fx-toolbar-user,
body.theme-sovereign .fx-toolbar-user:hover {
    color: #2a3c42 !important;
}

body.theme-sovereign .fx-toolbar-user-name {
    color: #2a4a52;
}

body.theme-sovereign .fx-toolbar-user-role,
body.theme-sovereign .fx-toolbar-caret {
    color: #5a7a82;
}

body.theme-sovereign .fx-topbar-toggle {
    color: #2a3c42;
    border-color: #d5dde0;
}


body.theme-sovereign .fx-toolbar-dropdown {
    border-color: #e0ddd8 !important;
}

    body.theme-sovereign .fx-toolbar-dropdown .dropdown-divider {
        border-color: #e8e5e0 !important;
    }

body.theme-sovereign .fx-toolbar-dropdown-item {
    color: #4a6068 !important;
}

    body.theme-sovereign .fx-toolbar-dropdown-item:hover {
        color: #2a3c42 !important;
        background: rgba(0, 48, 60, 0.06) !important;
    }

    body.theme-sovereign .fx-toolbar-dropdown-item i {
        color: #5a7a82;
    }

    body.theme-sovereign .fx-toolbar-dropdown-item:hover i {
        color: #2a3c42;
    }

body.theme-sovereign .fx-theme-heading {
    color: #6a8088;
}

body.theme-sovereign .fx-theme-option.active {
    color: #2a3c42 !important;
}

body.theme-sovereign .fx-sidebar-nav {
    scrollbar-color: #005a72 transparent;
}

    body.theme-sovereign .fx-sidebar-nav::-webkit-scrollbar-thumb {
        background: #005a72;
    }


body.theme-sovereign .fx-content-body {
    color: #1e2e36;
}


body.theme-sovereign .table {
    color: #1e2e36;
}

    body.theme-sovereign .table > thead > tr > th {
        background-color: rgba(0, 48, 60, 0.045);
        color: #1a3540;
    }

    body.theme-sovereign .table > tbody > tr > td {
        color: #1e2e36;
    }

    body.theme-sovereign .table > tbody > tr:hover > td {
        background-color: rgba(0, 48, 60, 0.035);
    }

    body.theme-sovereign .table a {
        color: #0a5c6e;
    }

        body.theme-sovereign .table a:hover {
            color: #073d49;
        }

/* Cards — harmonised with tables */
body.theme-sovereign .card {
    color: #1e2e36;
}

body.theme-sovereign .card-header {
    background-color: rgba(0, 48, 60, 0.045);
    color: #1a3540;
}

body {
    --tblr-primary: #066fd1;
    --tblr-border-color-translucent: rgba(4, 32, 69, 0.3);
}

    body.theme-sovereign {
        --tblr-primary: #672F25;
        --tblr-border-color-translucent: rgba(103, 37, 47, 0.5);
    }