/**
 * UI Themes — TransferPro
 *
 * Extensibility: add a block for each new theme using the pattern
 *   [data-ui-theme="your-id"] { ... }
 *   [data-ui-theme="your-id"][data-theme="dark"] { ... }
 * Then register the theme in resources/js/lib/themes/registry.js only.
 */

[data-ui-theme] {
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-logo-text: #ffffff;
    --sidebar-user-name: #ffffff;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-active-border: transparent;
}

/* ── Emerald ── */
[data-ui-theme="emerald"] {
    --primary: #1f8a5b;
    --primary-hover: #19744c;
    --primary-light: #e5f3ec;
    --primary-light-hover: #d4ebe0;
    --success: #1f8a5b;
    --success-bg: #e5f3ec;
    --warning: #c6710e;
    --warning-bg: #fef6e6;
    --danger: #c74634;
    --danger-bg: #fcefed;
    --info: #1f8a5b;
    --info-bg: #e5f3ec;
    --purple: #2d6a4f;
    --purple-bg: #e5f3ec;
    --bg: #f4f7f5;
    --surface: #ffffff;
    --surface-2: #eef3ef;
    --border: #dce8e1;
    --border-strong: #b8cfc2;
    --text: #14171e;
    --text-secondary: #3d4f45;
    --text-muted: #6b8578;
    --sidebar-bg: #143126;
    --sidebar-text: #ffffff;
    --sidebar-section-text: #7aa28d;
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: #1d4233;
    --sidebar-active-bg: #23503f;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --sidebar-border: #214a39;
    --sidebar-logo-text: #ffffff;
    --sidebar-user-name: #ffffff;
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --shadow-sm: 0 1px 2px rgba(20, 23, 30, 0.04);
    --shadow: 0 2px 8px rgba(20, 23, 30, 0.06);
    --shadow-lg: 0 8px 24px rgba(20, 23, 30, 0.1);
    --btn-radius: 6px;
    --input-radius: 6px;
    --table-header-bg: #eef3ef;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px rgba(31, 138, 91, 0.18);
}

[data-ui-theme="emerald"][data-theme="dark"] {
    --primary: #3cb179;
    --primary-hover: #52c48d;
    --primary-light: #1a3b2d;
    --primary-light-hover: #214a39;
    --success: #3cb179;
    --success-bg: #143126;
    --warning: #f0ab5f;
    --warning-bg: #2a1800;
    --danger: #f0897a;
    --danger-bg: #3a1008;
    --info: #3cb179;
    --info-bg: #1a3b2d;
    --purple: #7aa28d;
    --purple-bg: #1a3b2d;
    --bg: #0f1f18;
    --surface: #143126;
    --surface-2: #1a3b2d;
    --border: #214a39;
    --border-strong: #2d6350;
    --text: #eef3ef;
    --text-secondary: #b8cfc2;
    --text-muted: #7aa28d;
    --sidebar-bg: #0f1f18;
    --sidebar-text: #ffffff;
    --sidebar-section-text: #7aa28d;
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: #1a3b2d;
    --sidebar-active-bg: #23503f;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --sidebar-border: #214a39;
    --sidebar-logo-text: #ffffff;
    --sidebar-user-name: #ffffff;
    --table-header-bg: #1a3b2d;
}

/* ── Blue ── */
[data-ui-theme="blue"] {
    --primary: #3257b8;
    --primary-hover: #2b4ba0;
    --primary-light: #e9eefb;
    --primary-light-hover: #d8e0f6;
    --success: #1f8a5b;
    --success-bg: #e5f3ec;
    --warning: #c6710e;
    --warning-bg: #fef6e6;
    --danger: #c74634;
    --danger-bg: #fcefed;
    --info: #3257b8;
    --info-bg: #e9eefb;
    --purple: #4a5fc9;
    --purple-bg: #e9eefb;
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #eef2fa;
    --border: #dde4f0;
    --border-strong: #b8c4de;
    --text: #14171e;
    --text-secondary: #3d4a63;
    --text-muted: #6b7899;
    --sidebar-bg: #1d2c4d;
    --sidebar-text: #ffffff;
    --sidebar-section-text: #7f8fb2;
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: #27395d;
    --sidebar-active-bg: #314878;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --sidebar-border: #2d4068;
    --sidebar-logo-text: #ffffff;
    --sidebar-user-name: #ffffff;
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --shadow-sm: 0 1px 2px rgba(20, 23, 30, 0.04);
    --shadow: 0 2px 8px rgba(20, 23, 30, 0.06);
    --shadow-lg: 0 8px 24px rgba(20, 23, 30, 0.1);
    --btn-radius: 6px;
    --input-radius: 6px;
    --table-header-bg: #eef2fa;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px rgba(50, 87, 184, 0.18);
}

[data-ui-theme="blue"][data-theme="dark"] {
    --primary: #5b7fd6;
    --primary-hover: #7394de;
    --primary-light: #243758;
    --primary-light-hover: #2d4068;
    --success: #3cb179;
    --success-bg: #1a2e40;
    --warning: #f0ab5f;
    --warning-bg: #2a1800;
    --danger: #f0897a;
    --danger-bg: #3a1008;
    --info: #5b7fd6;
    --info-bg: #243758;
    --purple: #7f8fb2;
    --purple-bg: #243758;
    --bg: #141b2d;
    --surface: #1d2c4d;
    --surface-2: #243758;
    --border: #2d4068;
    --border-strong: #3d5280;
    --text: #eef2fa;
    --text-secondary: #b8c4de;
    --text-muted: #7f8fb2;
    --sidebar-bg: #141b2d;
    --sidebar-text: #ffffff;
    --sidebar-section-text: #7f8fb2;
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: #243758;
    --sidebar-active-bg: #314878;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --sidebar-border: #2d4068;
    --sidebar-logo-text: #ffffff;
    --sidebar-user-name: #ffffff;
    --table-header-bg: #243758;
}

/* ── Purple ── */
[data-ui-theme="purple"] {
    --primary: #6b4dc4;
    --primary-hover: #5a3fab;
    --primary-light: #efeafb;
    --primary-light-hover: #e2d8f6;
    --success: #1f8a5b;
    --success-bg: #e5f3ec;
    --warning: #c6710e;
    --warning-bg: #fef6e6;
    --danger: #c74634;
    --danger-bg: #fcefed;
    --info: #6b4dc4;
    --info-bg: #efeafb;
    --purple: #6b4dc4;
    --purple-bg: #efeafb;
    --bg: #f8f6fc;
    --surface: #ffffff;
    --surface-2: #f3f0fa;
    --border: #e4ddf0;
    --border-strong: #c4b8de;
    --text: #14171e;
    --text-secondary: #4a4263;
    --text-muted: #7a7194;
    --sidebar-bg: #272042;
    --sidebar-text: #ffffff;
    --sidebar-section-text: #8d82b0;
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: #332a54;
    --sidebar-active-bg: #3d3264;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --sidebar-border: #382f5e;
    --sidebar-logo-text: #ffffff;
    --sidebar-user-name: #ffffff;
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --shadow-sm: 0 1px 2px rgba(20, 23, 30, 0.04);
    --shadow: 0 2px 8px rgba(20, 23, 30, 0.06);
    --shadow-lg: 0 8px 24px rgba(20, 23, 30, 0.1);
    --btn-radius: 6px;
    --input-radius: 6px;
    --table-header-bg: #f3f0fa;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px rgba(107, 77, 196, 0.18);
}

[data-ui-theme="purple"][data-theme="dark"] {
    --primary: #9b82e8;
    --primary-hover: #b09aef;
    --primary-light: #2f2653;
    --primary-light-hover: #382f5e;
    --success: #3cb179;
    --success-bg: #1a2830;
    --warning: #f0ab5f;
    --warning-bg: #2a1800;
    --danger: #f0897a;
    --danger-bg: #3a1008;
    --info: #9b82e8;
    --info-bg: #2f2653;
    --purple: #9b82e8;
    --purple-bg: #2f2653;
    --bg: #1a1528;
    --surface: #272042;
    --surface-2: #2f2653;
    --border: #382f5e;
    --border-strong: #4a3f72;
    --text: #f3f0fa;
    --text-secondary: #c4b8de;
    --text-muted: #8d82b0;
    --sidebar-bg: #1a1528;
    --sidebar-text: #ffffff;
    --sidebar-section-text: #8d82b0;
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: #2f2653;
    --sidebar-active-bg: #3d3264;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --sidebar-border: #382f5e;
    --sidebar-logo-text: #ffffff;
    --sidebar-user-name: #ffffff;
    --table-header-bg: #2f2653;
}

/* ── Microsoft Fluent ── */
[data-ui-theme="fluent"] {
    --primary: #0078d4;
    --primary-hover: #106ebe;
    --primary-light: #deecf9;
    --primary-light-hover: #c7e0f4;
    --success: #107c10;
    --success-bg: #dff6dd;
    --warning: #ca5010;
    --warning-bg: #fff4ce;
    --danger: #d13438;
    --danger-bg: #fde7e9;
    --info: #0078d4;
    --info-bg: #deecf9;
    --purple: #8764b8;
    --purple-bg: #f0e9f8;
    --bg: #faf9f8;
    --surface: #ffffff;
    --surface-2: #f3f2f1;
    --border: #edebe9;
    --border-strong: #d2d0ce;
    --text: #201f1e;
    --text-secondary: #605e5c;
    --text-muted: #a19f9d;
    --sidebar-bg: #faf9f8;
    --sidebar-text: #323130;
    --sidebar-section-text: #605e5c;
    --sidebar-text-hover: #201f1e;
    --sidebar-hover-bg: rgba(0, 0, 0, 0.04);
    --sidebar-active-bg: transparent;
    --sidebar-active-text: #0078d4;
    --sidebar-active-border: #0078d4;
    --sidebar-border: rgba(0, 0, 0, 0.08);
    --sidebar-logo-text: #201f1e;
    --sidebar-user-name: #201f1e;
    --radius-sm: 2px;
    --radius: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --btn-radius: 2px;
    --input-radius: 2px;
    --table-header-bg: #f3f2f1;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0078d4;
}

[data-ui-theme="fluent"][data-theme="dark"] {
    --primary: #479ef5;
    --primary-hover: #62abf5;
    --primary-light: #1a3a52;
    --primary-light-hover: #243f56;
    --success: #6ccb5f;
    --success-bg: #0b2e0b;
    --warning: #faa06b;
    --warning-bg: #2d1a0a;
    --danger: #f1707b;
    --danger-bg: #3a0a0c;
    --info: #479ef5;
    --info-bg: #0a2a42;
    --purple: #b4a0ff;
    --purple-bg: #2a1f4a;
    --bg: #1b1a19;
    --surface: #252423;
    --surface-2: #323130;
    --border: #3b3a39;
    --border-strong: #484644;
    --text: #f3f2f1;
    --text-secondary: #c8c6c4;
    --text-muted: #797775;
    --sidebar-bg: #11100f;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: rgba(71, 158, 245, 0.25);
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: #479ef5;
    --table-header-bg: #323130;
}

/* ── SAP Fiori ── */
[data-ui-theme="fiori"] {
    --primary: #0a6ed1;
    --primary-hover: #0854a0;
    --primary-light: #e5f0fa;
    --primary-light-hover: #d1e4f7;
    --success: #107e3e;
    --success-bg: #e8f5ee;
    --warning: #e9730c;
    --warning-bg: #fef3e2;
    --danger: #bb0000;
    --danger-bg: #ffebeb;
    --info: #0a6ed1;
    --info-bg: #e5f0fa;
    --purple: #6a6d70;
    --purple-bg: #f5f6f7;
    --bg: #f5f6f7;
    --surface: #ffffff;
    --surface-2: #eff1f2;
    --border: #d9d9d9;
    --border-strong: #89919a;
    --text: #32363a;
    --text-secondary: #6a6d70;
    --text-muted: #89919a;
    --sidebar-bg: #eef2f6;
    --sidebar-text: #354a5f;
    --sidebar-section-text: #6a7987;
    --sidebar-text-hover: #1a2633;
    --sidebar-hover-bg: rgba(10, 110, 209, 0.08);
    --sidebar-active-bg: #0a6ed1;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --sidebar-border: rgba(0, 0, 0, 0.08);
    --sidebar-logo-text: #354a5f;
    --sidebar-user-name: #354a5f;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
    --btn-radius: 8px;
    --input-radius: 8px;
    --table-header-bg: #eff1f2;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0a6ed1;
}

[data-ui-theme="fiori"][data-theme="dark"] {
    --primary: #4db1ff;
    --primary-hover: #7cc4ff;
    --primary-light: #1a3348;
    --primary-light-hover: #243d52;
    --success: #5dc122;
    --success-bg: #0f2a08;
    --warning: #ffab00;
    --warning-bg: #2a1f00;
    --danger: #ff6666;
    --danger-bg: #3a0808;
    --info: #4db1ff;
    --info-bg: #0a2840;
    --purple: #a9b4be;
    --purple-bg: #2a2d30;
    --bg: #1d2d3a;
    --surface: #223548;
    --surface-2: #2a4054;
    --border: #3a5066;
    --border-strong: #506678;
    --text: #f5f6f7;
    --text-secondary: #a9b4be;
    --text-muted: #6a6d70;
    --sidebar-bg: #1a2836;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: #0a6ed1;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --table-header-bg: #2a4054;
}

/* ── Salesforce Lightning ── */
[data-ui-theme="lightning"] {
    --primary: #0176d3;
    --primary-hover: #014486;
    --primary-light: #eef4ff;
    --primary-light-hover: #d8e6fe;
    --success: #2e844a;
    --success-bg: #ebf7e6;
    --warning: #fe9339;
    --warning-bg: #fef3e2;
    --danger: #ea001e;
    --danger-bg: #fef1f3;
    --info: #0176d3;
    --info-bg: #eef4ff;
    --purple: #9050e9;
    --purple-bg: #f6f2fb;
    --bg: #f3f3f3;
    --surface: #ffffff;
    --surface-2: #f3f3f3;
    --border: #c9c9c9;
    --border-strong: #939393;
    --text: #181818;
    --text-secondary: #444444;
    --text-muted: #747474;
    --sidebar-bg: #032e61;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: #0176d3;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --radius-sm: 4px;
    --radius: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --shadow-sm: 0 2px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.14);
    --btn-radius: 4px;
    --input-radius: 4px;
    --table-header-bg: #f3f3f3;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0176d3;
}

[data-ui-theme="lightning"][data-theme="dark"] {
    --primary: #1b96ff;
    --primary-hover: #57a3ff;
    --primary-light: #0a2840;
    --primary-light-hover: #123456;
    --success: #45c65a;
    --success-bg: #0a2810;
    --warning: #ffb75d;
    --warning-bg: #2a1800;
    --danger: #fe5c4c;
    --danger-bg: #3a0808;
    --info: #1b96ff;
    --info-bg: #0a2840;
    --purple: #cb65ff;
    --purple-bg: #2a1040;
    --bg: #0d1117;
    --surface: #161b22;
    --surface-2: #21262d;
    --border: #30363d;
    --border-strong: #484f58;
    --text: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --sidebar-bg: #011627;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: #0176d3;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --table-header-bg: #21262d;
}

/* ── Oracle Redwood ── */
[data-ui-theme="redwood"] {
    --primary: #00688c;
    --primary-hover: #005a78;
    --primary-light: #e6f4f8;
    --primary-light-hover: #cce9f1;
    --success: #067663;
    --success-bg: #e6f5f0;
    --warning: #c6710e;
    --warning-bg: #fef6e6;
    --danger: #c74634;
    --danger-bg: #fcefed;
    --info: #00688c;
    --info-bg: #e6f4f8;
    --purple: #7a6e65;
    --purple-bg: #f5f0eb;
    --bg: #fbf9f7;
    --surface: #ffffff;
    --surface-2: #f5f0eb;
    --border: #e8e2dc;
    --border-strong: #c4bdb5;
    --text: #312d2a;
    --text-secondary: #5c554f;
    --text-muted: #8a8279;
    --sidebar-bg: #fbf9f7;
    --sidebar-text: #312d2a;
    --sidebar-section-text: #8a8279;
    --sidebar-text-hover: #1f1b18;
    --sidebar-hover-bg: rgba(199, 70, 52, 0.06);
    --sidebar-active-bg: #fcefed;
    --sidebar-active-text: #a32020;
    --sidebar-active-border: transparent;
    --sidebar-border: rgba(0, 0, 0, 0.08);
    --sidebar-logo-text: #312d2a;
    --sidebar-user-name: #312d2a;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-sm: 0 1px 4px rgba(49, 45, 42, 0.06);
    --shadow: 0 4px 12px rgba(49, 45, 42, 0.08);
    --shadow-lg: 0 8px 24px rgba(49, 45, 42, 0.12);
    --btn-radius: 8px;
    --input-radius: 8px;
    --table-header-bg: #f5f0eb;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #00688c;
}

[data-ui-theme="redwood"][data-theme="dark"] {
    --primary: #5cc4e8;
    --primary-hover: #7dd4f0;
    --primary-light: #0a3040;
    --primary-light-hover: #123848;
    --success: #4caf8a;
    --success-bg: #0a2818;
    --warning: #f0ab5f;
    --warning-bg: #2a1800;
    --danger: #f0897a;
    --danger-bg: #3a1008;
    --info: #5cc4e8;
    --info-bg: #0a3040;
    --purple: #b5aea6;
    --purple-bg: #3a3530;
    --bg: #1a1714;
    --surface: #252220;
    --surface-2: #312d2a;
    --border: #3d3834;
    --border-strong: #5c554f;
    --text: #fbf9f7;
    --text-secondary: #b5aea6;
    --text-muted: #8a8279;
    --sidebar-bg: #252220;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: #3d3834;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --table-header-bg: #312d2a;
}

/* ── Odoo (default) ── */
[data-ui-theme="odoo"] {
    --primary: #714b67;
    --primary-hover: #5c3d55;
    --primary-light: #f0e6ee;
    --primary-light-hover: #e4d4e0;
    --success: #1f8a5b;
    --success-hover: #19744c;
    --success-bg: #e5f3ec;
    --warning: #e6a817;
    --warning-bg: #fef8e8;
    --danger: #e13d3d;
    --danger-bg: #fde8ea;
    --info: #17a2b8;
    --info-bg: #e8f7fa;
    --purple: #875a7b;
    --purple-bg: #f5eef3;
    --bg: #f9f9f9;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --border: #dee2e6;
    --border-strong: #adb5bd;
    --text: #212529;
    --text-secondary: #495057;
    --text-muted: #868e96;
    --sidebar-bg: #714b67;
    --sidebar-text: #ffffff;
    --sidebar-section-text: #d1c4d1;
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(0, 0, 0, 0.08);
    --sidebar-active-bg: #5a3d54;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-logo-text: #ffffff;
    --sidebar-user-name: #ffffff;
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --btn-radius: 6px;
    --input-radius: 6px;
    --table-header-bg: #f0f0f0;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #714b67;
}

[data-ui-theme="odoo"][data-theme="dark"] {
    --primary: #c4a8bc;
    --primary-hover: #d4bcc8;
    --primary-light: #3a2834;
    --primary-light-hover: #4a3444;
    --success: #3cb179;
    --success-hover: #52c48d;
    --success-bg: #0a2810;
    --warning: #f0ad4e;
    --warning-bg: #2a1800;
    --danger: #e13d3d;
    --danger-bg: #3a0808;
    --info: #5bc0de;
    --info-bg: #0a2830;
    --purple: #c4a8bc;
    --purple-bg: #3a2834;
    --bg: #1a1a1a;
    --surface: #252525;
    --surface-2: #2e2e2e;
    --border: #3d3d3d;
    --border-strong: #525252;
    --text: #f9f9f9;
    --text-secondary: #adb5bd;
    --text-muted: #6c757d;
    --sidebar-bg: #121012;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.55);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: #714b67;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-logo-text: #ffffff;
    --sidebar-user-name: #ffffff;
    --table-header-bg: #2e2e2e;
}

/* ── Odoo sidebar ── */
[data-ui-theme="odoo"] .sidebar-logo {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-ui-theme="odoo"] .logo-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

[data-ui-theme="odoo"] .sidebar-section-title {
    letter-spacing: 0.1em;
    font-size: 10px;
    font-weight: 600;
    color: var(--sidebar-section-text);
    padding-top: 14px;
}

[data-ui-theme="odoo"] .menu-item,
[data-ui-theme="odoo"] .submenu-item {
    border-inline-start: none;
}

[data-ui-theme="odoo"] .menu-item.active,
[data-ui-theme="odoo"] .submenu-item.active {
    border-inline-start: none;
    color: #ffffff;
    font-weight: 600;
}

[data-ui-theme="odoo"] .sidebar-label {
    font-weight: 500;
}

[data-ui-theme="odoo"] .menu-arrow {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
}

[data-ui-theme="odoo"] .sidebar .badge-danger {
    background: #e13d3d;
    color: #ffffff;
    border-radius: 50vh;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    line-height: 1;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[data-ui-theme="odoo"] .sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-ui-theme="odoo"] .user-role,
[data-ui-theme="odoo"] .sidebar-user-menu {
    color: rgba(255, 255, 255, 0.65);
}

/* ── Sidebar patterns (reference image) ── */
[data-ui-theme="fluent"] .menu-item.active {
    background: transparent;
    border-inline-start-width: 3px;
}

[data-ui-theme="fiori"] .menu-item.active,
[data-ui-theme="lightning"] .menu-item.active,
[data-ui-theme="atlassian"] .menu-item.active,
[data-ui-theme="carbon"] .menu-item.active,
[data-ui-theme="stripe"] .menu-item.active,
[data-ui-theme="linear"] .menu-item.active,
[data-ui-theme="odoo"] .menu-item.active,
[data-ui-theme="emerald"] .menu-item.active,
[data-ui-theme="blue"] .menu-item.active,
[data-ui-theme="purple"] .menu-item.active,
[data-ui-theme="redwood"] .menu-item.active,
[data-ui-theme="material"] .menu-item.active {
    border-inline-start: none;
}

[data-ui-theme="fiori"] .menu-item.active,
[data-ui-theme="lightning"] .menu-item.active,
[data-ui-theme="atlassian"] .menu-item.active {
    border-radius: 4px;
}

[data-ui-theme="redwood"] .menu-item.active {
    border-radius: 6px;
}

[data-ui-theme="material"] .menu-item.active {
    border-radius: 999px;
}

[data-ui-theme="odoo"] .menu-item.active {
    border-radius: 4px;
}

[data-ui-theme="emerald"] .menu-item.active,
[data-ui-theme="blue"] .menu-item.active,
[data-ui-theme="purple"] .menu-item.active {
    border-radius: 4px;
}

[data-ui-theme="emerald"] .logo-icon,
[data-ui-theme="blue"] .logo-icon,
[data-ui-theme="purple"] .logo-icon {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

[data-ui-theme="emerald"] .user-role,
[data-ui-theme="emerald"] .sidebar-user-menu,
[data-ui-theme="blue"] .user-role,
[data-ui-theme="blue"] .sidebar-user-menu,
[data-ui-theme="purple"] .user-role,
[data-ui-theme="purple"] .sidebar-user-menu {
    color: var(--sidebar-section-text);
}

[data-ui-theme="fluent"] .logo-icon,
[data-ui-theme="fiori"] .logo-icon,
[data-ui-theme="redwood"] .logo-icon,
[data-ui-theme="material"] .logo-icon {
    background: var(--primary);
    color: #ffffff;
}

[data-ui-theme="fluent"] .user-role,
[data-ui-theme="fluent"] .sidebar-user-menu,
[data-ui-theme="fiori"] .user-role,
[data-ui-theme="fiori"] .sidebar-user-menu,
[data-ui-theme="redwood"] .user-role,
[data-ui-theme="redwood"] .sidebar-user-menu,
[data-ui-theme="material"] .user-role,
[data-ui-theme="material"] .sidebar-user-menu {
    color: var(--sidebar-section-text);
}

/* ── IBM Carbon ── */
[data-ui-theme="carbon"] {
    --primary: #0f62fe;
    --primary-hover: #0353e9;
    --primary-light: #edf5ff;
    --primary-light-hover: #d0e2ff;
    --success: #198038;
    --success-bg: #defbe6;
    --warning: #f1c21b;
    --warning-bg: #fcf4d6;
    --danger: #da1e28;
    --danger-bg: #fff1f1;
    --info: #0043ce;
    --info-bg: #edf5ff;
    --purple: #6929c4;
    --purple-bg: #f6f2ff;
    --bg: #f4f4f4;
    --surface: #ffffff;
    --surface-2: #e0e0e0;
    --border: #c6c6c6;
    --border-strong: #8d8d8d;
    --text: #161616;
    --text-secondary: #525252;
    --text-muted: #8d8d8d;
    --sidebar-bg: #161616;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: #393939;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --radius-sm: 0;
    --radius: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --shadow-sm: none;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
    --btn-radius: 0;
    --input-radius: 0;
    --table-header-bg: #e0e0e0;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0f62fe;
}

[data-ui-theme="carbon"][data-theme="dark"] {
    --primary: #4589ff;
    --primary-hover: #78a9ff;
    --primary-light: #001d6c;
    --primary-light-hover: #002d9c;
    --success: #42be65;
    --success-bg: #071908;
    --warning: #f1c21b;
    --warning-bg: #2a2000;
    --danger: #fa4d56;
    --danger-bg: #3a0808;
    --info: #4589ff;
    --info-bg: #001d6c;
    --purple: #be95ff;
    --purple-bg: #31135e;
    --bg: #161616;
    --surface: #262626;
    --surface-2: #393939;
    --border: #525252;
    --border-strong: #6f6f6f;
    --text: #f4f4f4;
    --text-secondary: #c6c6c6;
    --text-muted: #8d8d8d;
    --sidebar-bg: #0a0a0a;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: #393939;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --table-header-bg: #393939;
}

/* ── Atlassian ── */
[data-ui-theme="atlassian"] {
    --primary: #0052cc;
    --primary-hover: #0747a6;
    --primary-light: #deebff;
    --primary-light-hover: #b3d4ff;
    --success: #00875a;
    --success-bg: #e3fcef;
    --warning: #ff991f;
    --warning-bg: #fff0b3;
    --danger: #de350b;
    --danger-bg: #ffebe6;
    --info: #0052cc;
    --info-bg: #deebff;
    --purple: #6554c0;
    --purple-bg: #eae6ff;
    --bg: #ebecf0;
    --surface: #ffffff;
    --surface-2: #f4f5f7;
    --border: #dfe1e6;
    --border-strong: #c1c7d0;
    --text: #172b4d;
    --text-secondary: #42526e;
    --text-muted: #6b778c;
    --sidebar-bg: #0747a6;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: #2684ff;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --radius-sm: 3px;
    --radius: 3px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --shadow-sm: 0 1px 1px rgba(9, 30, 66, 0.08);
    --shadow: 0 4px 8px rgba(9, 30, 66, 0.12);
    --shadow-lg: 0 8px 16px rgba(9, 30, 66, 0.16);
    --btn-radius: 3px;
    --input-radius: 3px;
    --table-header-bg: #f4f5f7;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0052cc;
}

[data-ui-theme="atlassian"][data-theme="dark"] {
    --primary: #579dff;
    --primary-hover: #85b8ff;
    --primary-light: #0c2147;
    --primary-light-hover: #123060;
    --success: #4bce97;
    --success-bg: #0a2818;
    --warning: #f5cd47;
    --warning-bg: #2a2000;
    --danger: #f87168;
    --danger-bg: #3a0808;
    --info: #579dff;
    --info-bg: #0c2147;
    --purple: #9f8fef;
    --purple-bg: #2a1f60;
    --bg: #1d2125;
    --surface: #22272b;
    --surface-2: #2c333a;
    --border: #38414a;
    --border-strong: #596773;
    --text: #b6c2cf;
    --text-secondary: #9fadbc;
    --text-muted: #738496;
    --sidebar-bg: #0c2147;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: #2684ff;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --table-header-bg: #2c333a;
}

/* ── Stripe Dashboard ── */
[data-ui-theme="stripe"] {
    --primary: #635bff;
    --primary-hover: #4f46e5;
    --primary-light: #f0efff;
    --primary-light-hover: #e0deff;
    --success: #0d9488;
    --success-bg: #ecfdf5;
    --warning: #f59e0b;
    --warning-bg: #fffbeb;
    --danger: #df1b41;
    --danger-bg: #fef2f2;
    --info: #635bff;
    --info-bg: #f0efff;
    --purple: #635bff;
    --purple-bg: #f0efff;
    --bg: #f6f9fc;
    --surface: #ffffff;
    --surface-2: #eef2f7;
    --border: #e3e8ee;
    --border-strong: #c1c9d2;
    --text: #0a2540;
    --text-secondary: #425466;
    --text-muted: #697386;
    --sidebar-bg: #1a1f36;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: #3d4f7c;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 12px rgba(50, 50, 93, 0.08);
    --shadow-lg: 0 13px 27px rgba(50, 50, 93, 0.12);
    --btn-radius: 6px;
    --input-radius: 6px;
    --table-header-bg: #eef2f7;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #635bff;
}

[data-ui-theme="stripe"][data-theme="dark"] {
    --primary: #7a73ff;
    --primary-hover: #9590ff;
    --primary-light: #1a1840;
    --primary-light-hover: #252260;
    --success: #34d399;
    --success-bg: #0a2818;
    --warning: #fbbf24;
    --warning-bg: #2a1800;
    --danger: #f87171;
    --danger-bg: #3a0808;
    --info: #7a73ff;
    --info-bg: #1a1840;
    --purple: #7a73ff;
    --purple-bg: #1a1840;
    --bg: #0a2540;
    --surface: #112a45;
    --surface-2: #1a3654;
    --border: #243b53;
    --border-strong: #334e68;
    --text: #f6f9fc;
    --text-secondary: #adbdcc;
    --text-muted: #697386;
    --sidebar-bg: #0a1628;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: #3d4f7c;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --table-header-bg: #1a3654;
}

/* ── Linear ── */
[data-ui-theme="linear"] {
    --primary: #5e6ad2;
    --primary-hover: #4c56b8;
    --primary-light: #eef0fb;
    --primary-light-hover: #dfe3f8;
    --success: #4cb782;
    --success-bg: #ecfdf3;
    --warning: #f2c94c;
    --warning-bg: #fefce8;
    --danger: #eb5757;
    --danger-bg: #fef2f2;
    --info: #5e6ad2;
    --info-bg: #eef0fb;
    --purple: #5e6ad2;
    --purple-bg: #eef0fb;
    --bg: #fcfcfd;
    --surface: #ffffff;
    --surface-2: #f4f4f5;
    --border: #e4e4e7;
    --border-strong: #d4d4d8;
    --text: #101012;
    --text-secondary: #52525b;
    --text-muted: #a1a1aa;
    --sidebar-bg: #161618;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: #27272a;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
    --btn-radius: 8px;
    --input-radius: 8px;
    --table-header-bg: #f4f4f5;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #5e6ad2;
}

[data-ui-theme="linear"][data-theme="dark"] {
    --primary: #818cf8;
    --primary-hover: #a5b4fc;
    --primary-light: #1e1e24;
    --primary-light-hover: #2a2a32;
    --success: #4ade80;
    --success-bg: #0a2818;
    --warning: #facc15;
    --warning-bg: #2a2000;
    --danger: #f87171;
    --danger-bg: #3a0808;
    --info: #818cf8;
    --info-bg: #1e1e24;
    --purple: #818cf8;
    --purple-bg: #1e1e24;
    --bg: #101012;
    --surface: #18181b;
    --surface-2: #27272a;
    --border: #3f3f46;
    --border-strong: #52525b;
    --text: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --sidebar-bg: #101012;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: #27272a;
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: transparent;
    --table-header-bg: #27272a;
}

/* ── Material Design 3 ── */
[data-ui-theme="material"] {
    --primary: #6750a4;
    --primary-hover: #4f378b;
    --primary-light: #eaddff;
    --primary-light-hover: #d0bcff;
    --success: #386a20;
    --success-bg: #e8f5e0;
    --warning: #7d5700;
    --warning-bg: #ffecb3;
    --danger: #b3261e;
    --danger-bg: #f9dedc;
    --info: #00639b;
    --info-bg: #cce5ff;
    --purple: #6750a4;
    --purple-bg: #eaddff;
    --bg: #fffbfe;
    --surface: #fffbfe;
    --surface-2: #f3edf7;
    --border: #cac4d0;
    --border-strong: #79747e;
    --text: #1d1b20;
    --text-secondary: #49454f;
    --text-muted: #79747e;
    --sidebar-bg: #f3edf7;
    --sidebar-text: #49454f;
    --sidebar-section-text: #79747e;
    --sidebar-text-hover: #1d1b20;
    --sidebar-hover-bg: rgba(103, 80, 164, 0.08);
    --sidebar-active-bg: #e8def8;
    --sidebar-active-text: #6750a4;
    --sidebar-active-border: transparent;
    --sidebar-border: rgba(0, 0, 0, 0.08);
    --sidebar-logo-text: #1d1b20;
    --sidebar-user-name: #1d1b20;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 28px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --btn-radius: 20px;
    --input-radius: 4px;
    --table-header-bg: #f3edf7;
    --focus-ring: 0 0 0 2px #fffbfe, 0 0 0 4px #6750a4;
}

[data-ui-theme="material"][data-theme="dark"] {
    --primary: #d0bcff;
    --primary-hover: #e8def8;
    --primary-light: #381e72;
    --primary-light-hover: #4f378b;
    --success: #8dd57a;
    --success-bg: #0a2810;
    --warning: #ffba47;
    --warning-bg: #2a1800;
    --danger: #f2b8b5;
    --danger-bg: #3a0808;
    --info: #90caf9;
    --info-bg: #0a2840;
    --purple: #d0bcff;
    --purple-bg: #381e72;
    --bg: #141218;
    --surface: #1d1b20;
    --surface-2: #2b2930;
    --border: #49454f;
    --border-strong: #79747e;
    --text: #e6e0e9;
    --text-secondary: #cac4d0;
    --text-muted: #79747e;
    --sidebar-bg: #2b2930;
    --sidebar-text: #ffffff;
    --sidebar-section-text: rgba(255, 255, 255, 0.65);
    --sidebar-text-hover: #ffffff;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: #4a4458;
    --sidebar-active-text: #e8def8;
    --sidebar-active-border: transparent;
    --table-header-bg: #2b2930;
}

/* ── Component tokens (theme-aware) ── */
[data-ui-theme] .btn {
    border-radius: var(--btn-radius, var(--radius));
}

[data-ui-theme] .form-control,
[data-ui-theme] .form-select,
[data-ui-theme] .header-search input {
    border-radius: var(--input-radius, var(--radius-sm));
}

[data-ui-theme] .datatable thead th {
    background: var(--table-header-bg, var(--surface-2));
}

[data-ui-theme] .btn:focus-visible,
[data-ui-theme] .form-control:focus-visible,
[data-ui-theme] .form-select:focus-visible,
[data-ui-theme] .header-search input:focus-visible {
    box-shadow: var(--focus-ring, 0 0 0 2px var(--primary-light), 0 0 0 4px var(--primary));
}

[data-ui-theme="carbon"] .card {
    box-shadow: var(--shadow-sm);
    border-width: 1px;
}

[data-ui-theme="material"] .card {
    border: none;
    box-shadow: var(--shadow);
}

[data-ui-theme="fluent"] .btn-primary,
[data-ui-theme="carbon"] .btn-primary {
    text-transform: none;
    font-weight: 600;
}

[data-ui-theme="material"] .btn-primary {
    box-shadow: var(--shadow-sm);
}

/* ── Theme selector UI ── */
.ui-theme-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.ui-theme-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.ui-theme-panel-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    max-width: 420px;
}

.ui-theme-mode-toggle {
    display: flex;
    gap: 4px;
    background: var(--surface-2);
    padding: 3px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.ui-theme-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    border-radius: calc(var(--radius-sm) + 1px);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.ui-theme-mode-btn:hover {
    color: var(--text);
}

.ui-theme-mode-btn.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.ui-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.ui-theme-panel-compact .ui-theme-grid {
    grid-template-columns: 1fr;
    gap: 6px;
}

.ui-theme-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: start;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
    position: relative;
    font-family: inherit;
}

.ui-theme-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.ui-theme-card.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.ui-theme-swatches {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.ui-theme-swatch {
    flex: 1;
    height: 20px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.ui-theme-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.ui-theme-card-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.35;
}

.ui-theme-card-check {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    color: var(--primary);
    font-size: 14px;
}

.ui-theme-panel-compact .ui-theme-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}

.ui-theme-panel-compact .ui-theme-swatches {
    margin-bottom: 0;
    width: 48px;
    flex-shrink: 0;
}

.ui-theme-panel-compact .ui-theme-swatch {
    height: 14px;
}

.theme-menu-dropdown .dropdown-menu {
    width: 280px;
    padding: 12px;
    max-height: min(80vh, 520px);
    overflow-y: auto;
}

.theme-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.theme-menu-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
}

.theme-menu-mode:hover {
    color: var(--text);
    border-color: var(--border-strong);
}

.theme-menu-panel {
    min-width: 0;
}