/**
 * Posify - Complete 100% Accurate Theme Skins & Modes Engine
 * Accurately replicates Office 2007 (Excel Ribbon Style), Office 2010, Office 2016, DevExpress, and Bonus Skins
 * Across Header, Sidebar, Dashboard, DataTables, POS Screen, New Sale, Cards, Modals, Forms, Buttons, and Dark Themes
 */

/* ==========================================================================
   DEFAULT VARIABLES & BASE THEME SYSTEM
   ========================================================================== */

:root {
  --skin-primary: #205081;
  --skin-primary-hover: #183e65;
  --skin-primary-light: #dce6f4;
  --skin-primary-dark: #0f2b48;
  --skin-primary-rgb: 32, 80, 129;
  --skin-accent: #ffba00;
  --skin-accent-hover: #e0a300;
  --skin-header-bg: linear-gradient(180deg, #dbe8f6 0%, #c4dbf3 50%, #afcde9 100%);
  --skin-header-text: #15428b;
  --skin-header-border: #7da2ce;
  --skin-sidebar-bg: linear-gradient(180deg, #f0f4fc 0%, #dce8f7 100%);
  --skin-sidebar-text: #15428b;
  --skin-sidebar-border: #9ebfe6;
  --skin-sidebar-item-bg: rgba(255, 255, 255, 0.85);
  --skin-sidebar-hover: #e1edf9;
  --skin-sidebar-active: linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #e3edf8 0%, #cbdcf0 50%, #b8cfe9 100%);
  --skin-card-header-text: #15428b;
  --skin-border: #a8c4e8;
  --skin-body-bg: #ebf2fa;
  --skin-btn-bg: linear-gradient(180deg, #ffffff 0%, #e6effa 100%);
  --skin-btn-text: #15428b;
  --skin-btn-border: #a8c4e8;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #b5c7de;
  --skin-is-dark: 0;
}

/* ==========================================================================
   CATEGORY 1: OFFICE SKINS (12 SKINS)
   ========================================================================== */

/* 1. Office 2007 (Excel Style) - Authentic 100% Match */
[data-theme-skin="office_2007"], body.theme-skin-office_2007 {
  --skin-primary: #205081;
  --skin-primary-hover: #183e65;
  --skin-primary-light: #dce6f4;
  --skin-primary-dark: #0f2b48;
  --skin-primary-rgb: 32, 80, 129;
  --skin-accent: #ffba00;
  --skin-accent-hover: #e0a300;
  --skin-header-bg: linear-gradient(180deg, #dbe8f6 0%, #c4dbf3 50%, #afcde9 100%);
  --skin-header-text: #15428b;
  --skin-header-border: #7da2ce;
  --skin-sidebar-bg: linear-gradient(180deg, #f0f4fc 0%, #dce8f7 100%);
  --skin-sidebar-text: #15428b;
  --skin-sidebar-border: #9ebfe6;
  --skin-sidebar-item-bg: rgba(255, 255, 255, 0.85);
  --skin-sidebar-hover: #e1edf9;
  --skin-sidebar-active: linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #e3edf8 0%, #cbdcf0 50%, #b8cfe9 100%);
  --skin-card-header-text: #15428b;
  --skin-border: #a8c4e8;
  --skin-body-bg: #ebf2fa;
  --skin-btn-bg: linear-gradient(180deg, #ffffff 0%, #e6effa 100%);
  --skin-btn-text: #15428b;
  --skin-btn-border: #a8c4e8;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #b5c7de;
  --skin-is-dark: 0;
}

/* 2. Office 2010 */
[data-theme-skin="office_2010"], body.theme-skin-office_2010 {
  --skin-primary: #2e5b94;
  --skin-primary-hover: #224572;
  --skin-primary-light: #e4ecf7;
  --skin-primary-dark: #173052;
  --skin-primary-rgb: 46, 91, 148;
  --skin-accent: #e98c00;
  --skin-accent-hover: #cc7a00;
  --skin-header-bg: linear-gradient(180deg, #e4ecf7 0%, #d4e0ef 50%, #c4d3e6 100%);
  --skin-header-text: #1b385c;
  --skin-header-border: #9fb7d4;
  --skin-sidebar-bg: linear-gradient(180deg, #f8fafc 0%, #e9edf3 100%);
  --skin-sidebar-text: #1e293b;
  --skin-sidebar-border: #b5c7de;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #dbe4f0;
  --skin-sidebar-active: linear-gradient(180deg, #ffe082 0%, #ffb74d 50%, #ffa726 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #edf3fa 0%, #d8e4f2 100%);
  --skin-card-header-text: #1b385c;
  --skin-border: #b5c7de;
  --skin-body-bg: #f2f6fb;
  --skin-btn-bg: linear-gradient(180deg, #ffffff 0%, #e9edf3 100%);
  --skin-btn-text: #1b385c;
  --skin-btn-border: #b5c7de;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #b5c7de;
  --skin-is-dark: 0;
}

/* 3. Office 2016 (Excel Green) */
[data-theme-skin="office_2016"], body.theme-skin-office_2016 {
  --skin-primary: #107c41;
  --skin-primary-hover: #0c5c30;
  --skin-primary-light: #dff0e6;
  --skin-primary-dark: #07381d;
  --skin-primary-rgb: 16, 124, 65;
  --skin-accent: #217346;
  --skin-accent-hover: #185734;
  --skin-header-bg: linear-gradient(135deg, #107c41 0%, #189852 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #0c5c30;
  --skin-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f4f8f5 100%);
  --skin-sidebar-text: #1e293b;
  --skin-sidebar-border: #c8ded2;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #e3ede6;
  --skin-sidebar-active: linear-gradient(135deg, #107c41 0%, #07381d 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #f0f7f3 0%, #e1efe6 100%);
  --skin-card-header-text: #0d6334;
  --skin-border: #c8ded2;
  --skin-body-bg: #f4f8f5;
  --skin-btn-bg: linear-gradient(180deg, #107c41 0%, #0d6334 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #094725;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #c8ded2;
  --skin-is-dark: 0;
}

/* 4. Microsoft 365 */
[data-theme-skin="microsoft_365"], body.theme-skin-microsoft_365 {
  --skin-primary: #0078d4;
  --skin-primary-hover: #005a9e;
  --skin-primary-light: #deecf9;
  --skin-primary-dark: #004578;
  --skin-primary-rgb: 0, 120, 212;
  --skin-accent: #107c41;
  --skin-accent-hover: #0c5c30;
  --skin-header-bg: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #004578;
  --skin-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  --skin-sidebar-text: #242424;
  --skin-sidebar-border: #edebe9;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #edebe9;
  --skin-sidebar-active: linear-gradient(135deg, #0078d4 0%, #004578 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #f8f9fa 0%, #f3f2f1 100%);
  --skin-card-header-text: #004578;
  --skin-border: #edebe9;
  --skin-body-bg: #faf9f8;
  --skin-btn-bg: linear-gradient(180deg, #0078d4 0%, #005a9e 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #004578;
  --skin-input-bg: #ffffff;
  --skin-input-text: #242424;
  --skin-input-border: #edebe9;
  --skin-is-dark: 0;
}

/* 5. Office 2007 Blue */
[data-theme-skin="office_2007_blue"], body.theme-skin-office_2007_blue {
  --skin-primary: #185abd;
  --skin-primary-hover: #124590;
  --skin-primary-light: #d6e6fb;
  --skin-primary-dark: #0c2f63;
  --skin-primary-rgb: 24, 90, 189;
  --skin-accent: #388cdd;
  --skin-accent-hover: #2172c2;
  --skin-header-bg: linear-gradient(180deg, #dbe8f6 0%, #c4dbf3 50%, #afcde9 100%);
  --skin-header-text: #11428a;
  --skin-header-border: #78aeea;
  --skin-sidebar-bg: linear-gradient(180deg, #f4f8fe 0%, #e6effb 100%);
  --skin-sidebar-text: #1e293b;
  --skin-sidebar-border: #abcbf5;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #dbe7f7;
  --skin-sidebar-active: linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #eaf2fc 0%, #d8e7fa 100%);
  --skin-card-header-text: #11428a;
  --skin-border: #abcbf5;
  --skin-body-bg: #ebf2fc;
  --skin-btn-bg: linear-gradient(180deg, #388cdd 0%, #185abd 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #11428a;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #abcbf5;
  --skin-is-dark: 0;
}

/* 6. Office 2007 Black [DARK] */
[data-theme-skin="office_2007_black"], body.theme-skin-office_2007_black {
  --skin-primary: #2b2b2b;
  --skin-primary-hover: #1a1a1a;
  --skin-primary-light: #3d3d3d;
  --skin-primary-dark: #121212;
  --skin-primary-rgb: 43, 43, 43;
  --skin-accent: #f59e0b;
  --skin-accent-hover: #d97706;
  --skin-header-bg: linear-gradient(180deg, #444444 0%, #1f1f1f 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #555555;
  --skin-sidebar-bg: linear-gradient(180deg, #242424 0%, #181818 100%);
  --skin-sidebar-text: #f3f4f6;
  --skin-sidebar-border: #3d3d3d;
  --skin-sidebar-item-bg: #2d2d2d;
  --skin-sidebar-hover: #3d3d3d;
  --skin-sidebar-active: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --skin-sidebar-active-text: #111827;
  --skin-card-bg: #202020;
  --skin-card-header: #2a2a2a;
  --skin-card-header-text: #f59e0b;
  --skin-border: #3d3d3d;
  --skin-body-bg: #181818;
  --skin-btn-bg: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  --skin-btn-text: #111827;
  --skin-btn-border: #b45309;
  --skin-input-bg: #2b2b2b;
  --skin-input-text: #f3f4f6;
  --skin-input-border: #4f4f4f;
  --skin-is-dark: 1;
}

/* 7. Office 2007 Green */
[data-theme-skin="office_2007_green"], body.theme-skin-office_2007_green {
  --skin-primary: #2e7d32;
  --skin-primary-hover: #1b5e20;
  --skin-primary-light: #e8f5e9;
  --skin-primary-dark: #144517;
  --skin-primary-rgb: 46, 125, 50;
  --skin-accent: #8bc34a;
  --skin-accent-hover: #689f38;
  --skin-header-bg: linear-gradient(180deg, #e2f0e3 0%, #cce5ce 50%, #b3d7b6 100%);
  --skin-header-text: #1b5e20;
  --skin-header-border: #66bb6a;
  --skin-sidebar-bg: linear-gradient(180deg, #f4faf4 0%, #e6f3e7 100%);
  --skin-sidebar-text: #1b5e20;
  --skin-sidebar-border: #c8e6c9;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #d8ecd9;
  --skin-sidebar-active: linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #e8f5e9 0%, #d5ebd7 100%);
  --skin-card-header-text: #1b5e20;
  --skin-border: #c8e6c9;
  --skin-body-bg: #f1f8e9;
  --skin-btn-bg: linear-gradient(180deg, #43a047 0%, #2e7d32 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #1b5e20;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #c8e6c9;
  --skin-is-dark: 0;
}

/* 8. Office 2007 Pink */
[data-theme-skin="office_2007_pink"], body.theme-skin-office_2007_pink {
  --skin-primary: #ad1457;
  --skin-primary-hover: #880e4f;
  --skin-primary-light: #fce4ec;
  --skin-primary-dark: #5c0733;
  --skin-primary-rgb: 173, 20, 87;
  --skin-accent: #ec407a;
  --skin-accent-hover: #d81b60;
  --skin-header-bg: linear-gradient(180deg, #fde4ec 0%, #f8bbd0 50%, #f48fb1 100%);
  --skin-header-text: #880e4f;
  --skin-header-border: #f48fb1;
  --skin-sidebar-bg: linear-gradient(180deg, #fff5f8 0%, #fde4ec 100%);
  --skin-sidebar-text: #880e4f;
  --skin-sidebar-border: #f8bbd0;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #fbd0dd;
  --skin-sidebar-active: linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #fce4ec 0%, #f9d2df 100%);
  --skin-card-header-text: #880e4f;
  --skin-border: #f8bbd0;
  --skin-body-bg: #fff0f5;
  --skin-btn-bg: linear-gradient(180deg, #d81b60 0%, #ad1457 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #880e4f;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #f8bbd0;
  --skin-is-dark: 0;
}

/* 9. Office 2007 Silver */
[data-theme-skin="office_2007_silver"], body.theme-skin-office_2007_silver {
  --skin-primary: #546e7a;
  --skin-primary-hover: #37474f;
  --skin-primary-light: #eceff1;
  --skin-primary-dark: #263238;
  --skin-primary-rgb: 84, 110, 122;
  --skin-accent: #ffb300;
  --skin-accent-hover: #ffa000;
  --skin-header-bg: linear-gradient(180deg, #edf0f2 0%, #dbe0e3 50%, #c8cfd4 100%);
  --skin-header-text: #37474f;
  --skin-header-border: #90a4ae;
  --skin-sidebar-bg: linear-gradient(180deg, #f8fafb 0%, #eceff1 100%);
  --skin-sidebar-text: #37474f;
  --skin-sidebar-border: #cfd8dc;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #e0e5e8;
  --skin-sidebar-active: linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #f0f3f5 0%, #e0e5e8 100%);
  --skin-card-header-text: #37474f;
  --skin-border: #cfd8dc;
  --skin-body-bg: #f5f7f8;
  --skin-btn-bg: linear-gradient(180deg, #ffb300 0%, #f57c00 100%);
  --skin-btn-text: #37474f;
  --skin-btn-border: #e65100;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #cfd8dc;
  --skin-is-dark: 0;
}

/* 10. Office 2010 Blue */
[data-theme-skin="office_2010_blue"], body.theme-skin-office_2010_blue {
  --skin-primary: #1976d2;
  --skin-primary-hover: #1565c0;
  --skin-primary-light: #e3f2fd;
  --skin-primary-dark: #0d47a1;
  --skin-primary-rgb: 25, 118, 210;
  --skin-accent: #ff9800;
  --skin-accent-hover: #f57c00;
  --skin-header-bg: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%);
  --skin-header-text: #0d47a1;
  --skin-header-border: #64b5f6;
  --skin-sidebar-bg: linear-gradient(180deg, #f0f7ff 0%, #e1f0fe 100%);
  --skin-sidebar-text: #0d47a1;
  --skin-sidebar-border: #bbdefb;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #d4e9fc;
  --skin-sidebar-active: linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #eaf4fd 0%, #d8ecfa 100%);
  --skin-card-header-text: #0d47a1;
  --skin-border: #bbdefb;
  --skin-body-bg: #f0f7ff;
  --skin-btn-bg: linear-gradient(180deg, #ff9800 0%, #e65100 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #e65100;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #bbdefb;
  --skin-is-dark: 0;
}

/* 11. Office 2010 Black [DARK] */
[data-theme-skin="office_2010_black"], body.theme-skin-office_2010_black {
  --skin-primary: #212121;
  --skin-primary-hover: #141414;
  --skin-primary-light: #333333;
  --skin-primary-dark: #0a0a0a;
  --skin-primary-rgb: 33, 33, 33;
  --skin-accent: #ffc107;
  --skin-accent-hover: #ffa000;
  --skin-header-bg: linear-gradient(180deg, #333333 0%, #181818 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #444444;
  --skin-sidebar-bg: linear-gradient(180deg, #202020 0%, #141414 100%);
  --skin-sidebar-text: #f3f4f6;
  --skin-sidebar-border: #383838;
  --skin-sidebar-item-bg: #2a2a2a;
  --skin-sidebar-hover: #383838;
  --skin-sidebar-active: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%);
  --skin-sidebar-active-text: #1a1a1a;
  --skin-card-bg: #1c1c1c;
  --skin-card-header: #262626;
  --skin-card-header-text: #ffc107;
  --skin-border: #383838;
  --skin-body-bg: #141414;
  --skin-btn-bg: linear-gradient(180deg, #ffc107 0%, #ff8f00 100%);
  --skin-btn-text: #1a1a1a;
  --skin-btn-border: #ff8f00;
  --skin-input-bg: #262626;
  --skin-input-text: #f3f4f6;
  --skin-input-border: #444444;
  --skin-is-dark: 1;
}

/* 12. Office 2010 Silver */
[data-theme-skin="office_2010_silver"], body.theme-skin-office_2010_silver {
  --skin-primary: #455a64;
  --skin-primary-hover: #263238;
  --skin-primary-light: #eceff1;
  --skin-primary-dark: #1c2428;
  --skin-primary-rgb: 69, 90, 100;
  --skin-accent: #ff9800;
  --skin-accent-hover: #f57c00;
  --skin-header-bg: linear-gradient(180deg, #eceff1 0%, #cfd8dc 50%, #b0bec5 100%);
  --skin-header-text: #263238;
  --skin-header-border: #78909c;
  --skin-sidebar-bg: linear-gradient(180deg, #fafafa 0%, #eceff1 100%);
  --skin-sidebar-text: #1e293b;
  --skin-sidebar-border: #cfd8dc;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #e0e4e7;
  --skin-sidebar-active: linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #f2f5f7 0%, #e2e7ea 100%);
  --skin-card-header-text: #263238;
  --skin-border: #cfd8dc;
  --skin-body-bg: #eceff1;
  --skin-btn-bg: linear-gradient(180deg, #ff9800 0%, #e65100 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #e65100;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #cfd8dc;
  --skin-is-dark: 0;
}

/* ==========================================================================
   CATEGORY 2: DEVEXPRESS SKINS (8 SKINS)
   ========================================================================== */

/* 13. DevExpress Black [DARK] */
[data-theme-skin="dx_black"], body.theme-skin-dx_black {
  --skin-primary: #121212;
  --skin-primary-hover: #000000;
  --skin-primary-light: #2c2c2c;
  --skin-primary-dark: #050505;
  --skin-primary-rgb: 18, 18, 18;
  --skin-accent: #00e5ff;
  --skin-accent-hover: #00b4d8;
  --skin-header-bg: linear-gradient(135deg, #1f1f1f 0%, #0d0d0d 100%);
  --skin-header-text: #00e5ff;
  --skin-header-border: #00e5ff;
  --skin-sidebar-bg: linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
  --skin-sidebar-text: #ffffff;
  --skin-sidebar-border: #333333;
  --skin-sidebar-item-bg: #222222;
  --skin-sidebar-hover: #2e2e2e;
  --skin-sidebar-active: linear-gradient(135deg, #00e5ff 0%, #00b4d8 100%);
  --skin-sidebar-active-text: #121212;
  --skin-card-bg: #1c1c1c;
  --skin-card-header: #242424;
  --skin-card-header-text: #00e5ff;
  --skin-border: #333333;
  --skin-body-bg: #121212;
  --skin-btn-bg: linear-gradient(180deg, #00e5ff 0%, #00b4d8 100%);
  --skin-btn-text: #121212;
  --skin-btn-border: #00e5ff;
  --skin-input-bg: #222222;
  --skin-input-text: #ffffff;
  --skin-input-border: #444444;
  --skin-is-dark: 1;
}

/* 14. DevExpress Blue */
[data-theme-skin="dx_blue"], body.theme-skin-dx_blue {
  --skin-primary: #0288d1;
  --skin-primary-hover: #0277bd;
  --skin-primary-light: #e1f5fe;
  --skin-primary-dark: #01579b;
  --skin-primary-rgb: 2, 136, 209;
  --skin-accent: #29b6f6;
  --skin-accent-hover: #03a9f4;
  --skin-header-bg: linear-gradient(135deg, #0288d1 0%, #01579b 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #4fc3f7;
  --skin-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f0f8fd 100%);
  --skin-sidebar-text: #1e293b;
  --skin-sidebar-border: #b3e5fc;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #e0f2fe;
  --skin-sidebar-active: linear-gradient(135deg, #0288d1 0%, #01579b 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #eef8fe 0%, #e1f5fe 100%);
  --skin-card-header-text: #01579b;
  --skin-border: #b3e5fc;
  --skin-body-bg: #f4fafe;
  --skin-btn-bg: linear-gradient(180deg, #03a9f4 0%, #0288d1 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #01579b;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #b3e5fc;
  --skin-is-dark: 0;
}

/* 15. DevExpress Caramel */
[data-theme-skin="dx_caramel"], body.theme-skin-dx_caramel {
  --skin-primary: #c68a4c;
  --skin-primary-hover: #a87239;
  --skin-primary-light: #faedcd;
  --skin-primary-dark: #7a4f21;
  --skin-primary-rgb: 198, 138, 76;
  --skin-accent: #d4a373;
  --skin-accent-hover: #bc8a5f;
  --skin-header-bg: linear-gradient(135deg, #c68a4c 0%, #99622d 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #d4a373;
  --skin-sidebar-bg: linear-gradient(180deg, #fefae0 0%, #faedcd 100%);
  --skin-sidebar-text: #4a2810;
  --skin-sidebar-border: #ccd5ae;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #f3dfb6;
  --skin-sidebar-active: linear-gradient(135deg, #c68a4c 0%, #7a4f21 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #fdf6e6 0%, #faedcd 100%);
  --skin-card-header-text: #7a4f21;
  --skin-border: #ccd5ae;
  --skin-body-bg: #fefae0;
  --skin-btn-bg: linear-gradient(180deg, #d4a373 0%, #c68a4c 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #7a4f21;
  --skin-input-bg: #ffffff;
  --skin-input-text: #4a2810;
  --skin-input-border: #ccd5ae;
  --skin-is-dark: 0;
}

/* 16. DevExpress iMaginary */
[data-theme-skin="dx_imaginary"], body.theme-skin-dx_imaginary {
  --skin-primary: #00897b;
  --skin-primary-hover: #00695c;
  --skin-primary-light: #e0f2f1;
  --skin-primary-dark: #004d40;
  --skin-primary-rgb: 0, 137, 123;
  --skin-accent: #4db6ac;
  --skin-accent-hover: #26a69a;
  --skin-header-bg: linear-gradient(135deg, #00897b 0%, #004d40 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #4db6ac;
  --skin-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #edf7f6 100%);
  --skin-sidebar-text: #1e293b;
  --skin-sidebar-border: #b2dfdb;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #dcf1ef;
  --skin-sidebar-active: linear-gradient(135deg, #00897b 0%, #004d40 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #eaf6f5 0%, #e0f2f1 100%);
  --skin-card-header-text: #004d40;
  --skin-border: #b2dfdb;
  --skin-body-bg: #f2faf9;
  --skin-btn-bg: linear-gradient(180deg, #26a69a 0%, #00897b 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #004d40;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #b2dfdb;
  --skin-is-dark: 0;
}

/* 17. DevExpress Lilian */
[data-theme-skin="dx_lilian"], body.theme-skin-dx_lilian {
  --skin-primary: #7e57c2;
  --skin-primary-hover: #5e35b1;
  --skin-primary-light: #ede7f6;
  --skin-primary-dark: #4527a0;
  --skin-primary-rgb: 126, 87, 194;
  --skin-accent: #ba68c8;
  --skin-accent-hover: #ab47bc;
  --skin-header-bg: linear-gradient(135deg, #7e57c2 0%, #4527a0 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #b39ddb;
  --skin-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f6f2fb 100%);
  --skin-sidebar-text: #1e293b;
  --skin-sidebar-border: #d1c4e9;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #eee5f8;
  --skin-sidebar-active: linear-gradient(135deg, #7e57c2 0%, #4527a0 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #f3edf8 0%, #ede7f6 100%);
  --skin-card-header-text: #4527a0;
  --skin-border: #d1c4e9;
  --skin-body-bg: #f7f4fb;
  --skin-btn-bg: linear-gradient(180deg, #ab47bc 0%, #7e57c2 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #4527a0;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #d1c4e9;
  --skin-is-dark: 0;
}

/* 18. DevExpress Money Twins */
[data-theme-skin="dx_money_twins"], body.theme-skin-dx_money_twins {
  --skin-primary: #388e3c;
  --skin-primary-hover: #2e7d32;
  --skin-primary-light: #e8f5e9;
  --skin-primary-dark: #1b5e20;
  --skin-primary-rgb: 56, 142, 60;
  --skin-accent: #81c784;
  --skin-accent-hover: #66bb6a;
  --skin-header-bg: linear-gradient(135deg, #388e3c 0%, #1b5e20 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #81c784;
  --skin-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f1f8e9 100%);
  --skin-sidebar-text: #1e293b;
  --skin-sidebar-border: #c8e6c9;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #e2f0dc;
  --skin-sidebar-active: linear-gradient(135deg, #388e3c 0%, #1b5e20 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #eef7ee 0%, #e8f5e9 100%);
  --skin-card-header-text: #1b5e20;
  --skin-border: #c8e6c9;
  --skin-body-bg: #f1f8e9;
  --skin-btn-bg: linear-gradient(180deg, #66bb6a 0%, #388e3c 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #1b5e20;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #c8e6c9;
  --skin-is-dark: 0;
}

/* 19. DevExpress My Favorite Skin */
[data-theme-skin="dx_my_favorite_skin"], body.theme-skin-dx_my_favorite_skin {
  --skin-primary: #1e40af;
  --skin-primary-hover: #1e3a8a;
  --skin-primary-light: #dbeafe;
  --skin-primary-dark: #172554;
  --skin-primary-rgb: 30, 64, 175;
  --skin-accent: #60a5fa;
  --skin-accent-hover: #3b82f6;
  --skin-header-bg: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #60a5fa;
  --skin-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
  --skin-sidebar-text: #1e293b;
  --skin-sidebar-border: #bfdbfe;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #dbeafe;
  --skin-sidebar-active: linear-gradient(135deg, #1e40af 0%, #172554 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  --skin-card-header-text: #1e3a8a;
  --skin-border: #bfdbfe;
  --skin-body-bg: #f8fafc;
  --skin-btn-bg: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #1e3a8a;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #bfdbfe;
  --skin-is-dark: 0;
}

/* 20. DevExpress The Asphalt World [DARK] */
[data-theme-skin="dx_the_asphalt_world"], body.theme-skin-dx_the_asphalt_world {
  --skin-primary: #263238;
  --skin-primary-hover: #102027;
  --skin-primary-light: #37474f;
  --skin-primary-dark: #000a12;
  --skin-primary-rgb: 38, 50, 56;
  --skin-accent: #ffd600;
  --skin-accent-hover: #ffea00;
  --skin-header-bg: linear-gradient(135deg, #37474f 0%, #1e272c 100%);
  --skin-header-text: #ffd600;
  --skin-header-border: #ffd600;
  --skin-sidebar-bg: linear-gradient(180deg, #263238 0%, #171f22 100%);
  --skin-sidebar-text: #ffffff;
  --skin-sidebar-border: #455a64;
  --skin-sidebar-item-bg: #37474f;
  --skin-sidebar-hover: #455a64;
  --skin-sidebar-active: linear-gradient(135deg, #ffd600 0%, #ffab00 100%);
  --skin-sidebar-active-text: #1a2226;
  --skin-card-bg: #1e272c;
  --skin-card-header: #29353a;
  --skin-card-header-text: #ffd600;
  --skin-border: #37474f;
  --skin-body-bg: #141a1d;
  --skin-btn-bg: linear-gradient(180deg, #ffe082 0%, #ffd600 100%);
  --skin-btn-text: #1a2226;
  --skin-btn-border: #fbc02d;
  --skin-input-bg: #29353a;
  --skin-input-text: #ffffff;
  --skin-input-border: #455a64;
  --skin-is-dark: 1;
}

/* ==========================================================================
   CATEGORY 3: BONUS SKINS (23 SKINS)
   ========================================================================== */

/* 21. Bonus Coffee */
[data-theme-skin="bonus_coffee"], body.theme-skin-bonus_coffee {
  --skin-primary: #5d4037;
  --skin-primary-hover: #4e342e;
  --skin-primary-light: #efebe9;
  --skin-primary-dark: #3e2723;
  --skin-primary-rgb: 93, 64, 55;
  --skin-accent: #8d6e63;
  --skin-accent-hover: #6d4c41;
  --skin-header-bg: linear-gradient(135deg, #5d4037 0%, #3e2723 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #8d6e63;
  --skin-sidebar-bg: linear-gradient(180deg, #efebe9 0%, #e0dad7 100%);
  --skin-sidebar-text: #3e2723;
  --skin-sidebar-border: #d7ccc8;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #d7ccc8;
  --skin-sidebar-active: linear-gradient(135deg, #5d4037 0%, #3e2723 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #f5f2f0 0%, #efebe9 100%);
  --skin-card-header-text: #3e2723;
  --skin-border: #d7ccc8;
  --skin-body-bg: #efebe9;
  --skin-btn-bg: linear-gradient(180deg, #8d6e63 0%, #5d4037 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #3e2723;
  --skin-input-bg: #ffffff;
  --skin-input-text: #3e2723;
  --skin-input-border: #d7ccc8;
  --skin-is-dark: 0;
}

/* 22. Bonus Darkroom [DARK] */
[data-theme-skin="bonus_darkroom"], body.theme-skin-bonus_darkroom {
  --skin-primary: #0a0a0a;
  --skin-primary-hover: #000000;
  --skin-primary-light: #262626;
  --skin-primary-dark: #000000;
  --skin-primary-rgb: 10, 10, 10;
  --skin-accent: #3b82f6;
  --skin-accent-hover: #2563eb;
  --skin-header-bg: linear-gradient(135deg, #171717 0%, #000000 100%);
  --skin-header-text: #3b82f6;
  --skin-header-border: #3b82f6;
  --skin-sidebar-bg: linear-gradient(180deg, #121212 0%, #050505 100%);
  --skin-sidebar-text: #ffffff;
  --skin-sidebar-border: #262626;
  --skin-sidebar-item-bg: #1e1e1e;
  --skin-sidebar-hover: #2a2a2a;
  --skin-sidebar-active: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #141414;
  --skin-card-header: #1e1e1e;
  --skin-card-header-text: #60a5fa;
  --skin-border: #262626;
  --skin-body-bg: #0a0a0a;
  --skin-btn-bg: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #1e40af;
  --skin-input-bg: #181818;
  --skin-input-text: #ffffff;
  --skin-input-border: #333333;
  --skin-is-dark: 1;
}

/* 23. Bonus Foggy */
[data-theme-skin="bonus_foggy"], body.theme-skin-bonus_foggy {
  --skin-primary: #78909c;
  --skin-primary-hover: #546e7a;
  --skin-primary-light: #eceff1;
  --skin-primary-dark: #37474f;
  --skin-primary-rgb: 120, 144, 156;
  --skin-accent: #90a4ae;
  --skin-accent-hover: #78909c;
  --skin-header-bg: linear-gradient(135deg, #78909c 0%, #455a64 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #b0bec5;
  --skin-sidebar-bg: linear-gradient(180deg, #f5f7f8 0%, #eceff1 100%);
  --skin-sidebar-text: #263238;
  --skin-sidebar-border: #cfd8dc;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #e0e6e9;
  --skin-sidebar-active: linear-gradient(135deg, #78909c 0%, #37474f 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #f0f3f5 0%, #eceff1 100%);
  --skin-card-header-text: #263238;
  --skin-border: #cfd8dc;
  --skin-body-bg: #f5f7f8;
  --skin-btn-bg: linear-gradient(180deg, #90a4ae 0%, #607d8b 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #455a64;
  --skin-input-bg: #ffffff;
  --skin-input-text: #263238;
  --skin-input-border: #cfd8dc;
  --skin-is-dark: 0;
}

/* 24. Bonus High Contrast [DARK] */
[data-theme-skin="bonus_high_contrast"], body.theme-skin-bonus_high_contrast {
  --skin-primary: #000000;
  --skin-primary-hover: #111111;
  --skin-primary-light: #222222;
  --skin-primary-dark: #000000;
  --skin-primary-rgb: 0, 0, 0;
  --skin-accent: #ffff00;
  --skin-accent-hover: #ffee00;
  --skin-header-bg: #000000;
  --skin-header-text: #ffff00;
  --skin-header-border: #ffff00;
  --skin-sidebar-bg: #000000;
  --skin-sidebar-text: #ffffff;
  --skin-sidebar-border: #ffffff;
  --skin-sidebar-item-bg: #111111;
  --skin-sidebar-hover: #222222;
  --skin-sidebar-active: #ffff00;
  --skin-sidebar-active-text: #000000;
  --skin-card-bg: #000000;
  --skin-card-header: #111111;
  --skin-card-header-text: #ffff00;
  --skin-border: #ffffff;
  --skin-body-bg: #000000;
  --skin-btn-bg: #ffff00;
  --skin-btn-text: #000000;
  --skin-btn-border: #ffffff;
  --skin-input-bg: #111111;
  --skin-input-text: #ffff00;
  --skin-input-border: #ffff00;
  --skin-is-dark: 1;
}

/* 25. Bonus Liquid Sky */
[data-theme-skin="bonus_liquid_sky"], body.theme-skin-bonus_liquid_sky {
  --skin-primary: #0097a7;
  --skin-primary-hover: #00838f;
  --skin-primary-light: #e0f7fa;
  --skin-primary-dark: #006064;
  --skin-primary-rgb: 0, 151, 167;
  --skin-accent: #00bcd4;
  --skin-accent-hover: #26c6da;
  --skin-header-bg: linear-gradient(135deg, #00acc1 0%, #006064 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #4dd0e1;
  --skin-sidebar-bg: linear-gradient(180deg, #f0fbfc 0%, #e0f7fa 100%);
  --skin-sidebar-text: #006064;
  --skin-sidebar-border: #b2ebf2;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #d2f3f7;
  --skin-sidebar-active: linear-gradient(135deg, #0097a7 0%, #006064 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #ebfafc 0%, #e0f7fa 100%);
  --skin-card-header-text: #006064;
  --skin-border: #b2ebf2;
  --skin-body-bg: #f0fbfc;
  --skin-btn-bg: linear-gradient(180deg, #00bcd4 0%, #00838f 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #006064;
  --skin-input-bg: #ffffff;
  --skin-input-text: #006064;
  --skin-input-border: #b2ebf2;
  --skin-is-dark: 0;
}

/* 26. Bonus London Liquid Sky */
[data-theme-skin="bonus_london_liquid_sky"], body.theme-skin-bonus_london_liquid_sky {
  --skin-primary: #0d47a1;
  --skin-primary-hover: #0a3880;
  --skin-primary-light: #e3f2fd;
  --skin-primary-dark: #051b40;
  --skin-primary-rgb: 13, 71, 161;
  --skin-accent: #00e5ff;
  --skin-accent-hover: #00b4d8;
  --skin-header-bg: linear-gradient(135deg, #0d47a1 0%, #051b40 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #00e5ff;
  --skin-sidebar-bg: linear-gradient(180deg, #f0f7ff 0%, #e1f0fe 100%);
  --skin-sidebar-text: #0d47a1;
  --skin-sidebar-border: #90caf9;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #d4e9fc;
  --skin-sidebar-active: linear-gradient(135deg, #0d47a1 0%, #051b40 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #edf5fd 0%, #e1f0fe 100%);
  --skin-card-header-text: #0d47a1;
  --skin-border: #90caf9;
  --skin-body-bg: #ebf3fc;
  --skin-btn-bg: linear-gradient(180deg, #00e5ff 0%, #0288d1 100%);
  --skin-btn-text: #051b40;
  --skin-btn-border: #0d47a1;
  --skin-input-bg: #ffffff;
  --skin-input-text: #0d47a1;
  --skin-input-border: #90caf9;
  --skin-is-dark: 0;
}

/* 27. Bonus McSkin */
[data-theme-skin="bonus_mcskin"], body.theme-skin-bonus_mcskin {
  --skin-primary: #374151;
  --skin-primary-hover: #1f2937;
  --skin-primary-light: #f3f4f6;
  --skin-primary-dark: #111827;
  --skin-primary-rgb: 55, 65, 81;
  --skin-accent: #9ca3af;
  --skin-accent-hover: #6b7280;
  --skin-header-bg: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #6b7280;
  --skin-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  --skin-sidebar-text: #1f2937;
  --skin-sidebar-border: #d1d5db;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #e5e7eb;
  --skin-sidebar-active: linear-gradient(135deg, #374151 0%, #111827 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #f7f8fa 0%, #f3f4f6 100%);
  --skin-card-header-text: #111827;
  --skin-border: #d1d5db;
  --skin-body-bg: #f9fafb;
  --skin-btn-bg: linear-gradient(180deg, #4b5563 0%, #1f2937 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #111827;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1f2937;
  --skin-input-border: #d1d5db;
  --skin-is-dark: 0;
}

/* 28. Bonus Metropolis */
[data-theme-skin="bonus_metropolis"], body.theme-skin-bonus_metropolis {
  --skin-primary: #0072c6;
  --skin-primary-hover: #005a9e;
  --skin-primary-light: #e6f2fb;
  --skin-primary-dark: #004578;
  --skin-primary-rgb: 0, 114, 198;
  --skin-accent: #00a4ef;
  --skin-accent-hover: #0078d4;
  --skin-header-bg: #0072c6;
  --skin-header-text: #ffffff;
  --skin-header-border: #004578;
  --skin-sidebar-bg: #f3f3f3;
  --skin-sidebar-text: #212121;
  --skin-sidebar-border: #e1e1e1;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #e1e1e1;
  --skin-sidebar-active: #0072c6;
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: #f3f3f3;
  --skin-card-header-text: #004578;
  --skin-border: #e1e1e1;
  --skin-body-bg: #f3f3f3;
  --skin-btn-bg: #0072c6;
  --skin-btn-text: #ffffff;
  --skin-btn-border: #004578;
  --skin-input-bg: #ffffff;
  --skin-input-text: #212121;
  --skin-input-border: #e1e1e1;
  --skin-is-dark: 0;
}

/* 29. Bonus Metropolis Dark [DARK] */
[data-theme-skin="bonus_metropolis_dark"], body.theme-skin-bonus_metropolis_dark {
  --skin-primary: #1f1f1f;
  --skin-primary-hover: #141414;
  --skin-primary-light: #2d2d30;
  --skin-primary-dark: #0f0f0f;
  --skin-primary-rgb: 31, 31, 31;
  --skin-accent: #00a4ef;
  --skin-accent-hover: #0078d4;
  --skin-header-bg: #1f1f1f;
  --skin-header-text: #00a4ef;
  --skin-header-border: #00a4ef;
  --skin-sidebar-bg: #252526;
  --skin-sidebar-text: #f1f1f1;
  --skin-sidebar-border: #3e3e42;
  --skin-sidebar-item-bg: #1e1e1e;
  --skin-sidebar-hover: #333337;
  --skin-sidebar-active: #00a4ef;
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #1e1e1e;
  --skin-card-header: #2d2d30;
  --skin-card-header-text: #00a4ef;
  --skin-border: #3e3e42;
  --skin-body-bg: #181818;
  --skin-btn-bg: #00a4ef;
  --skin-btn-text: #ffffff;
  --skin-btn-border: #0078d4;
  --skin-input-bg: #252526;
  --skin-input-text: #f1f1f1;
  --skin-input-border: #3e3e42;
  --skin-is-dark: 1;
}

/* 30. Bonus Pumpkin */
[data-theme-skin="bonus_pumpkin"], body.theme-skin-bonus_pumpkin {
  --skin-primary: #e65100;
  --skin-primary-hover: #bf360c;
  --skin-primary-light: #fff3e0;
  --skin-primary-dark: #872404;
  --skin-primary-rgb: 230, 81, 0;
  --skin-accent: #ff9800;
  --skin-accent-hover: #f57c00;
  --skin-header-bg: linear-gradient(135deg, #e65100 0%, #bf360c 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #ffb74d;
  --skin-sidebar-bg: linear-gradient(180deg, #fffbf5 0%, #fff3e0 100%);
  --skin-sidebar-text: #5d2500;
  --skin-sidebar-border: #ffcc80;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #ffe0b2;
  --skin-sidebar-active: linear-gradient(180deg, #ffb74d 0%, #ff9800 50%, #e65100 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #fff2df 0%, #ffe0b2 100%);
  --skin-card-header-text: #bf360c;
  --skin-border: #ffcc80;
  --skin-body-bg: #fff8e1;
  --skin-btn-bg: linear-gradient(180deg, #ff9800 0%, #e65100 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #bf360c;
  --skin-input-bg: #ffffff;
  --skin-input-text: #5d2500;
  --skin-input-border: #ffcc80;
  --skin-is-dark: 0;
}

/* 31. Bonus Seven */
[data-theme-skin="bonus_seven"], body.theme-skin-bonus_seven {
  --skin-primary: #1b58b8;
  --skin-primary-hover: #13428d;
  --skin-primary-light: #e6f0fa;
  --skin-primary-dark: #0c2b5d;
  --skin-primary-rgb: 27, 88, 184;
  --skin-accent: #4ba3e3;
  --skin-accent-hover: #298cd4;
  --skin-header-bg: linear-gradient(180deg, #dbe8f8 0%, #c1d9f4 50%, #a4c7ee 100%);
  --skin-header-text: #0c2b5d;
  --skin-header-border: #80b5ea;
  --skin-sidebar-bg: linear-gradient(180deg, #f7faff 0%, #eaf2fb 100%);
  --skin-sidebar-text: #1e293b;
  --skin-sidebar-border: #b5d5f7;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #dbeaff;
  --skin-sidebar-active: linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #eef5fc 0%, #e1effe 100%);
  --skin-card-header-text: #0c2b5d;
  --skin-border: #b5d5f7;
  --skin-body-bg: #f0f6fd;
  --skin-btn-bg: linear-gradient(180deg, #5eb2ef 0%, #1b58b8 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #0c2b5d;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #b5d5f7;
  --skin-is-dark: 0;
}

/* 32. Bonus Seven Classic */
[data-theme-skin="bonus_seven_classic"], body.theme-skin-bonus_seven_classic {
  --skin-primary: #476685;
  --skin-primary-hover: #334b63;
  --skin-primary-light: #eaeff4;
  --skin-primary-dark: #223242;
  --skin-primary-rgb: 71, 102, 133;
  --skin-accent: #8ea8c3;
  --skin-accent-hover: #718fae;
  --skin-header-bg: linear-gradient(180deg, #ebf0f5 0%, #d5dfeb 50%, #bed0df 100%);
  --skin-header-text: #223242;
  --skin-header-border: #8ea8c3;
  --skin-sidebar-bg: linear-gradient(180deg, #f8fafc 0%, #eceff3 100%);
  --skin-sidebar-text: #223242;
  --skin-sidebar-border: #b8cadb;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #dfe7ef;
  --skin-sidebar-active: linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #eef3f7 0%, #e3ebf2 100%);
  --skin-card-header-text: #223242;
  --skin-border: #b8cadb;
  --skin-body-bg: #f3f6fa;
  --skin-btn-bg: linear-gradient(180deg, #8ea8c3 0%, #476685 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #223242;
  --skin-input-bg: #ffffff;
  --skin-input-text: #223242;
  --skin-input-border: #b8cadb;
  --skin-is-dark: 0;
}

/* 33. Bonus Sharp */
[data-theme-skin="bonus_sharp"], body.theme-skin-bonus_sharp {
  --skin-primary: #1565c0;
  --skin-primary-hover: #0d47a1;
  --skin-primary-light: #e3f2fd;
  --skin-primary-dark: #0a3578;
  --skin-primary-rgb: 21, 101, 192;
  --skin-accent: #42a5f5;
  --skin-accent-hover: #1e88e5;
  --skin-header-bg: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #42a5f5;
  --skin-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f0f7fe 100%);
  --skin-sidebar-text: #1e293b;
  --skin-sidebar-border: #90caf9;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #e1f0fe;
  --skin-sidebar-active: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #eff7fe 0%, #e3f2fd 100%);
  --skin-card-header-text: #0d47a1;
  --skin-border: #90caf9;
  --skin-body-bg: #f5f9fd;
  --skin-btn-bg: linear-gradient(180deg, #42a5f5 0%, #1565c0 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #0d47a1;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1e293b;
  --skin-input-border: #90caf9;
  --skin-is-dark: 0;
}

/* 34. Bonus Sharp Plus */
[data-theme-skin="bonus_sharp_plus"], body.theme-skin-bonus_sharp_plus {
  --skin-primary: #0d47a1;
  --skin-primary-hover: #082d6b;
  --skin-primary-light: #ede7f6;
  --skin-primary-dark: #04183a;
  --skin-primary-rgb: 13, 71, 161;
  --skin-accent: #1976d2;
  --skin-accent-hover: #1565c0;
  --skin-header-bg: linear-gradient(135deg, #0d47a1 0%, #311b92 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #5c6bc0;
  --skin-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #ede7f6 100%);
  --skin-sidebar-text: #1a237e;
  --skin-sidebar-border: #9fa8da;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #d1c4e9;
  --skin-sidebar-active: linear-gradient(135deg, #0d47a1 0%, #311b92 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #f2eff8 0%, #e8eaf6 100%);
  --skin-card-header-text: #0d47a1;
  --skin-border: #9fa8da;
  --skin-body-bg: #ede7f6;
  --skin-btn-bg: linear-gradient(180deg, #1976d2 0%, #0d47a1 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #04183a;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1a237e;
  --skin-input-border: #9fa8da;
  --skin-is-dark: 0;
}

/* 35. Bonus Springtime */
[data-theme-skin="bonus_springtime"], body.theme-skin-bonus_springtime {
  --skin-primary: #43a047;
  --skin-primary-hover: #2e7d32;
  --skin-primary-light: #e8f5e9;
  --skin-primary-dark: #1b5e20;
  --skin-primary-rgb: 67, 160, 71;
  --skin-accent: #81c784;
  --skin-accent-hover: #66bb6a;
  --skin-header-bg: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #a5d6a7;
  --skin-sidebar-bg: linear-gradient(180deg, #fafffa 0%, #eaf6ec 100%);
  --skin-sidebar-text: #1b5e20;
  --skin-sidebar-border: #a5d6a7;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #d5ecd8;
  --skin-sidebar-active: linear-gradient(135deg, #43a047 0%, #1b5e20 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #f0f8f1 0%, #e8f5e9 100%);
  --skin-card-header-text: #1b5e20;
  --skin-border: #a5d6a7;
  --skin-body-bg: #f4faf6;
  --skin-btn-bg: linear-gradient(180deg, #81c784 0%, #43a047 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #1b5e20;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1b5e20;
  --skin-input-border: #a5d6a7;
  --skin-is-dark: 0;
}

/* 36. Bonus Summer 2008 */
[data-theme-skin="bonus_summer_2008"], body.theme-skin-bonus_summer_2008 {
  --skin-primary: #f57c00;
  --skin-primary-hover: #e65100;
  --skin-primary-light: #fff8e1;
  --skin-primary-dark: #bf360c;
  --skin-primary-rgb: 245, 124, 0;
  --skin-accent: #0288d1;
  --skin-accent-hover: #0277bd;
  --skin-header-bg: linear-gradient(135deg, #f57c00 0%, #0288d1 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #ffe082;
  --skin-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #fffde7 100%);
  --skin-sidebar-text: #4a2800;
  --skin-sidebar-border: #ffe082;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #fff3c4;
  --skin-sidebar-active: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #fffcf0 0%, #fff8e1 100%);
  --skin-card-header-text: #bf360c;
  --skin-border: #ffe082;
  --skin-body-bg: #fffde7;
  --skin-btn-bg: linear-gradient(180deg, #ffb74d 0%, #f57c00 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #e65100;
  --skin-input-bg: #ffffff;
  --skin-input-text: #4a2800;
  --skin-input-border: #ffe082;
  --skin-is-dark: 0;
}

/* 37. Bonus Valentine */
[data-theme-skin="bonus_valentine"], body.theme-skin-bonus_valentine {
  --skin-primary: #c2185b;
  --skin-primary-hover: #880e4f;
  --skin-primary-light: #fce4ec;
  --skin-primary-dark: #4a0022;
  --skin-primary-rgb: 194, 24, 91;
  --skin-accent: #e91e63;
  --skin-accent-hover: #d81b60;
  --skin-header-bg: linear-gradient(135deg, #d81b60 0%, #880e4f 100%);
  --skin-header-text: #ffffff;
  --skin-header-border: #f48fb1;
  --skin-sidebar-bg: linear-gradient(180deg, #fff5f8 0%, #fde4ec 100%);
  --skin-sidebar-text: #4a0022;
  --skin-sidebar-border: #f48fb1;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #fbc0d4;
  --skin-sidebar-active: linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #fef0f5 0%, #fce4ec 100%);
  --skin-card-header-text: #880e4f;
  --skin-border: #f48fb1;
  --skin-body-bg: #fff0f5;
  --skin-btn-bg: linear-gradient(180deg, #e91e63 0%, #c2185b 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #880e4f;
  --skin-input-bg: #ffffff;
  --skin-input-text: #4a0022;
  --skin-input-border: #f48fb1;
  --skin-is-dark: 0;
}

/* 38. Bonus Visual Studio 2013 Blue */
[data-theme-skin="bonus_vs2013_blue"], body.theme-skin-bonus_vs2013_blue {
  --skin-primary: #293955;
  --skin-primary-hover: #1b263b;
  --skin-primary-light: #e6ebf2;
  --skin-primary-dark: #0f1622;
  --skin-primary-rgb: 41, 57, 85;
  --skin-accent: #007acc;
  --skin-accent-hover: #005a9e;
  --skin-header-bg: linear-gradient(180deg, #dbe4f0 0%, #c2d2e6 50%, #a8c0dc 100%);
  --skin-header-text: #1b263b;
  --skin-header-border: #007acc;
  --skin-sidebar-bg: linear-gradient(180deg, #f0f3f7 0%, #e1e7f0 100%);
  --skin-sidebar-text: #1b263b;
  --skin-sidebar-border: #a9bed6;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #cfdbe8;
  --skin-sidebar-active: linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%);
  --skin-sidebar-active-text: #3e2000;
  --skin-card-bg: #ffffff;
  --skin-card-header: linear-gradient(180deg, #f0f4f8 0%, #e6ebf2 100%);
  --skin-card-header-text: #1b263b;
  --skin-border: #a9bed6;
  --skin-body-bg: #eef2f7;
  --skin-btn-bg: linear-gradient(180deg, #007acc 0%, #005a9e 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #005a9e;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1b263b;
  --skin-input-border: #a9bed6;
  --skin-is-dark: 0;
}

/* 39. Bonus Visual Studio 2013 Dark [DARK] */
[data-theme-skin="bonus_vs2013_dark"], body.theme-skin-bonus_vs2013_dark {
  --skin-primary: #2d2d30;
  --skin-primary-hover: #1e1e1e;
  --skin-primary-light: #3f3f46;
  --skin-primary-dark: #121212;
  --skin-primary-rgb: 45, 45, 48;
  --skin-accent: #007acc;
  --skin-accent-hover: #0098ff;
  --skin-header-bg: #2d2d30;
  --skin-header-text: #ffffff;
  --skin-header-border: #007acc;
  --skin-sidebar-bg: #252526;
  --skin-sidebar-text: #d4d4d4;
  --skin-sidebar-border: #3f3f46;
  --skin-sidebar-item-bg: #1e1e1e;
  --skin-sidebar-hover: #333337;
  --skin-sidebar-active: #007acc;
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #1e1e1e;
  --skin-card-header: #2d2d30;
  --skin-card-header-text: #0098ff;
  --skin-border: #3f3f46;
  --skin-body-bg: #121212;
  --skin-btn-bg: #007acc;
  --skin-btn-text: #ffffff;
  --skin-btn-border: #005a9e;
  --skin-input-bg: #252526;
  --skin-input-text: #d4d4d4;
  --skin-input-border: #3f3f46;
  --skin-is-dark: 1;
}

/* 40. Bonus Visual Studio 2013 Light */
[data-theme-skin="bonus_vs2013_light"], body.theme-skin-bonus_vs2013_light {
  --skin-primary: #007acc;
  --skin-primary-hover: #005a9e;
  --skin-primary-light: #deecf9;
  --skin-primary-dark: #004578;
  --skin-primary-rgb: 0, 122, 204;
  --skin-accent: #007acc;
  --skin-accent-hover: #005a9e;
  --skin-header-bg: #eeeeee;
  --skin-header-text: #007acc;
  --skin-header-border: #007acc;
  --skin-sidebar-bg: #f5f5f5;
  --skin-sidebar-text: #222222;
  --skin-sidebar-border: #cccedb;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #e5e5e5;
  --skin-sidebar-active: #007acc;
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: #eeeeee;
  --skin-card-header-text: #007acc;
  --skin-border: #cccedb;
  --skin-body-bg: #ffffff;
  --skin-btn-bg: #007acc;
  --skin-btn-text: #ffffff;
  --skin-btn-border: #005a9e;
  --skin-input-bg: #ffffff;
  --skin-input-text: #222222;
  --skin-input-border: #cccedb;
  --skin-is-dark: 0;
}

/* 41. Bonus Whiteprint */
[data-theme-skin="bonus_whiteprint"], body.theme-skin-bonus_whiteprint {
  --skin-primary: #37474f;
  --skin-primary-hover: #263238;
  --skin-primary-light: #eceff1;
  --skin-primary-dark: #102027;
  --skin-primary-rgb: 55, 71, 79;
  --skin-accent: #78909c;
  --skin-accent-hover: #546e7a;
  --skin-header-bg: #ffffff;
  --skin-header-text: #37474f;
  --skin-header-border: #37474f;
  --skin-sidebar-bg: #ffffff;
  --skin-sidebar-text: #37474f;
  --skin-sidebar-border: #cfd8dc;
  --skin-sidebar-item-bg: #f8fafb;
  --skin-sidebar-hover: #eceff1;
  --skin-sidebar-active: #37474f;
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: #f5f7f8;
  --skin-card-header-text: #263238;
  --skin-border: #cfd8dc;
  --skin-body-bg: #ffffff;
  --skin-btn-bg: #37474f;
  --skin-btn-text: #ffffff;
  --skin-btn-border: #263238;
  --skin-input-bg: #ffffff;
  --skin-input-text: #37474f;
  --skin-input-border: #cfd8dc;
  --skin-is-dark: 0;
}

/* 42. Bonus WXI */
[data-theme-skin="bonus_wxi"], body.theme-skin-bonus_wxi {
  --skin-primary: #005fb8;
  --skin-primary-hover: #004a91;
  --skin-primary-light: #e5f1fb;
  --skin-primary-dark: #00366a;
  --skin-primary-rgb: 0, 95, 184;
  --skin-accent: #60cdff;
  --skin-accent-hover: #4cc2ff;
  --skin-header-bg: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%);
  --skin-header-text: #1a1a1a;
  --skin-header-border: #e5e5e5;
  --skin-sidebar-bg: linear-gradient(180deg, #f9f9f9 0%, #f3f3f3 100%);
  --skin-sidebar-text: #1a1a1a;
  --skin-sidebar-border: #e5e5e5;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #ebebeb;
  --skin-sidebar-active: #005fb8;
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: #f3f3f3;
  --skin-card-header-text: #005fb8;
  --skin-border: #e5e5e5;
  --skin-body-bg: #f9f9f9;
  --skin-btn-bg: linear-gradient(180deg, #005fb8 0%, #004a91 100%);
  --skin-btn-text: #ffffff;
  --skin-btn-border: #00366a;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1a1a1a;
  --skin-input-border: #e5e5e5;
  --skin-is-dark: 0;
}

/* 43. Bonus WXI Compact */
[data-theme-skin="bonus_wxi_compact"], body.theme-skin-bonus_wxi_compact {
  --skin-primary: #0067c0;
  --skin-primary-hover: #005299;
  --skin-primary-light: #e5f1fb;
  --skin-primary-dark: #003e73;
  --skin-primary-rgb: 0, 103, 192;
  --skin-accent: #4cc2ff;
  --skin-accent-hover: #1aa8eb;
  --skin-header-bg: #f3f3f3;
  --skin-header-text: #1c1c1c;
  --skin-header-border: #e0e0e0;
  --skin-sidebar-bg: #f5f5f5;
  --skin-sidebar-text: #1c1c1c;
  --skin-sidebar-border: #e0e0e0;
  --skin-sidebar-item-bg: #ffffff;
  --skin-sidebar-hover: #e8e8e8;
  --skin-sidebar-active: #0067c0;
  --skin-sidebar-active-text: #ffffff;
  --skin-card-bg: #ffffff;
  --skin-card-header: #f0f0f0;
  --skin-card-header-text: #0067c0;
  --skin-border: #e0e0e0;
  --skin-body-bg: #f5f5f5;
  --skin-btn-bg: #0067c0;
  --skin-btn-text: #ffffff;
  --skin-btn-border: #003e73;
  --skin-input-bg: #ffffff;
  --skin-input-text: #1c1c1c;
  --skin-input-border: #e0e0e0;
  --skin-is-dark: 0;
}


/* ==========================================================================
   GLOBAL 100% COMPLETE THEME APPLICATION RULES
   ========================================================================== */

/* 1. Global Typography & Canvas */
html[data-theme-skin],
html[data-theme-skin] body,
html[data-theme-skin] button,
html[data-theme-skin] input,
html[data-theme-skin] select,
html[data-theme-skin] textarea {
  font-family: 'Segoe UI', 'Segoe', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif !important;
}

html[data-theme-skin] body,
html[data-theme-skin] main,
html[data-theme-skin] #scrollable-container,
html[data-theme-skin] .content,
html[data-theme-skin] .content-wrapper,
body[data-theme-skin] main.tw-bg-gray-100 {
  background-color: var(--skin-body-bg) !important;
  background-image: none !important;
}

html[data-theme-skin] body::before,
html[data-theme-skin] body::after {
  display: none !important;
}

/* Page Titles */
html[data-theme-skin] .content-header h1,
html[data-theme-skin] .content-header .tw-text-black,
html[data-theme-skin] h1,
html[data-theme-skin] h2 {
  color: var(--skin-card-header-text, var(--skin-primary)) !important;
  font-weight: 700 !important;
}

/* 2. Top Navigation Bar */
html[data-theme-skin] .modern-header,
body[data-theme-skin] .modern-header,
html[data-theme-skin] .main-header,
body[data-theme-skin] .main-header {
  background: var(--skin-header-bg) !important;
  border-bottom: 1px solid var(--skin-header-border, var(--skin-border)) !important;
  color: var(--skin-header-text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  height: 64px !important;
}

html[data-theme-skin] .modern-header::before,
body[data-theme-skin] .modern-header::before {
  display: none !important;
}

html[data-theme-skin] .modern-header h1,
html[data-theme-skin] .modern-header h2,
html[data-theme-skin] .modern-header span,
html[data-theme-skin] .modern-header p,
html[data-theme-skin] .modern-header strong {
  color: var(--skin-header-text) !important;
}

/* Top Header Action Buttons */
html[data-theme-skin] .modern-header .header-btn,
body[data-theme-skin] .modern-header .header-btn,
html[data-theme-skin] .modern-header .header-btn-purple,
html[data-theme-skin] .modern-header .header-btn-green,
html[data-theme-skin] .modern-header .header-btn-pink,
html[data-theme-skin] .modern-header .header-btn-cyan,
html[data-theme-skin] .modern-header .header-btn-yellow,
html[data-theme-skin] .modern-header .header-btn-blue,
html[data-theme-skin] .modern-header .header-btn-orange,
html[data-theme-skin] .modern-header .date-button,
body[data-theme-skin] .modern-header .date-button,
html[data-theme-skin] .modern-header .user-profile-btn,
body[data-theme-skin] .modern-header .user-profile-btn {
  background: var(--skin-btn-bg) !important;
  color: var(--skin-btn-text) !important;
  border: 1px solid var(--skin-btn-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
}

html[data-theme-skin] .modern-header .header-btn svg,
html[data-theme-skin] .modern-header .header-btn-purple svg,
html[data-theme-skin] .modern-header .header-btn-green svg,
html[data-theme-skin] .modern-header .header-btn-pink svg,
html[data-theme-skin] .modern-header .header-btn-cyan svg,
html[data-theme-skin] .modern-header .header-btn-yellow svg,
html[data-theme-skin] .modern-header .header-btn-blue svg,
html[data-theme-skin] .modern-header .header-btn-orange svg,
html[data-theme-skin] .modern-header .header-btn i,
html[data-theme-skin] .modern-header .header-btn span,
html[data-theme-skin] .modern-header .date-button span,
html[data-theme-skin] .modern-header .date-button i,
html[data-theme-skin] .modern-header .user-profile-btn span,
html[data-theme-skin] .modern-header .user-profile-btn i {
  color: var(--skin-btn-text) !important;
}

html[data-theme-skin] .modern-header .pos-button,
body[data-theme-skin] .modern-header .pos-button {
  background: linear-gradient(180deg, #2b6fd6 0%, #185abd 100%) !important;
  color: #ffffff !important;
  border: 1px solid #11428a !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(17, 66, 138, 0.3) !important;
  padding: 7px 14px !important;
}

html[data-theme-skin] .modern-header .header-btn:hover,
html[data-theme-skin] .modern-header .header-btn-purple:hover,
html[data-theme-skin] .modern-header .header-btn-green:hover,
html[data-theme-skin] .modern-header .header-btn-pink:hover,
html[data-theme-skin] .modern-header .date-button:hover,
html[data-theme-skin] .modern-header .pos-button:hover,
html[data-theme-skin] .modern-header .user-profile-btn:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}

/* 3. Sidebar Navigation */
html[data-theme-skin] .modern-sidebar,
body[data-theme-skin] .modern-sidebar,
html[data-theme-skin] aside.side-bar,
body[data-theme-skin] aside.side-bar {
  background: var(--skin-sidebar-bg) !important;
  border-right: 1px solid var(--skin-sidebar-border, var(--skin-border)) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme-skin] .modern-sidebar::before {
  display: none !important;
}

html[data-theme-skin] .sidebar-logo-container {
  border-bottom: 1px solid var(--skin-sidebar-border, var(--skin-border)) !important;
  background: transparent !important;
}

/* Normal Menu Items */
html[data-theme-skin] #side-bar .custom-hover,
html[data-theme-skin] #side-bar .menu-item-parent,
html[data-theme-skin] #side-bar .drop_down,
body[data-theme-skin] #side-bar .custom-hover,
body[data-theme-skin] #side-bar .drop_down {
  background: var(--skin-sidebar-item-bg, rgba(255, 255, 255, 0.85)) !important;
  color: var(--skin-sidebar-text, #15428b) !important;
  border: 1px solid var(--skin-sidebar-border, var(--skin-border)) !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
}

html[data-theme-skin] #side-bar .custom-hover:hover,
html[data-theme-skin] #side-bar .menu-item-parent:hover,
html[data-theme-skin] #side-bar .drop_down:hover {
  background: var(--skin-sidebar-hover) !important;
  color: var(--skin-primary) !important;
  border-color: var(--skin-sidebar-border) !important;
}

/* Active Menu Item (Office Gold / Ribbon Accent) */
html[data-theme-skin] #side-bar .active-menu-item,
html[data-theme-skin] #side-bar .drop_down.active-menu-item,
html[data-theme-skin] #side-bar a.custom-hover.active-menu-item,
html[data-theme-skin] #side-bar .menu-parent-active .drop_down,
body[data-theme-skin] #side-bar .drop_down.active-menu-item {
  background: var(--skin-sidebar-active, linear-gradient(180deg, #ffdf88 0%, #ffa812 50%, #ff8d00 100%)) !important;
  color: var(--skin-sidebar-active-text, #3e2000) !important;
  border: 1px solid #d48800 !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(212, 136, 0, 0.25) !important;
}

html[data-theme-skin] #side-bar .drop_down.active-menu-item > span,
html[data-theme-skin] #side-bar .custom-hover.active-menu-item > span,
html[data-theme-skin] #side-bar .menu-parent-active .drop_down > span,
html[data-theme-skin] #side-bar .active-menu-item i,
html[data-theme-skin] #side-bar .active-menu-item svg {
  color: var(--skin-sidebar-active-text, #3e2000) !important;
  font-weight: 700 !important;
}

html[data-theme-skin] #side-bar .drop_down.active-menu-item::before,
html[data-theme-skin] #side-bar .drop_down.active-menu-item::after,
html[data-theme-skin] #side-bar .custom-hover.active-menu-item::before,
html[data-theme-skin] #side-bar .custom-hover.active-menu-item::after {
  background: #ff9900 !important;
  box-shadow: 0 0 6px rgba(255, 153, 0, 0.5) !important;
}

/* Submenu & Accordion Container */
html[data-theme-skin] .chiled {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid var(--skin-sidebar-border, var(--skin-border)) !important;
  border-radius: 4px !important;
  padding: 4px 6px !important;
}

html[data-theme-skin] .tree-line-vertical,
html[data-theme-skin] .tree-line-horizontal,
html[data-theme-skin] .menu-dropdown-wrapper::after {
  background: var(--skin-border) !important;
  opacity: 0.6 !important;
}

html[data-theme-skin] .chiled::before {
  background: var(--skin-accent) !important;
  border-color: var(--skin-card-bg) !important;
}

html[data-theme-skin] .menu-item-child {
  color: var(--skin-sidebar-text, #15428b) !important;
  border-radius: 3px !important;
}

html[data-theme-skin] .child-menu-active,
html[data-theme-skin] .menu-item-child.child-menu-active {
  background: linear-gradient(180deg, #fff3cf 0%, #ffe494 100%) !important;
  color: #3e2000 !important;
  border: 1px solid #e5b338 !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(229, 179, 56, 0.25) !important;
}

html[data-theme-skin] .child-menu-active::before,
html[data-theme-skin] .menu-item-child.child-menu-active::before {
  background: #ff9900 !important;
}

html[data-theme-skin] .child-menu-active > span:nth-of-type(2),
html[data-theme-skin] .child-menu-active svg {
  color: #3e2000 !important;
  font-weight: 700 !important;
}

/* 4. Boxes, Cards, Panels & Section Headers */
html[data-theme-skin] .box.box-primary,
html[data-theme-skin] .box.box-solid,
html[data-theme-skin] .box,
html[data-theme-skin] .card,
html[data-theme-skin] .panel {
  border: 1px solid var(--skin-border) !important;
  border-radius: 4px !important;
  background-color: var(--skin-card-bg, #ffffff) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme-skin] .box-header,
html[data-theme-skin] .card-header,
html[data-theme-skin] .panel-heading,
html[data-theme-skin] .box-title {
  background: var(--skin-card-header) !important;
  border-bottom: 1px solid var(--skin-border) !important;
  color: var(--skin-card-header-text, #15428b) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 8px 12px !important;
}

html[data-theme-skin] .box-header .box-title,
html[data-theme-skin] .card-header h3,
html[data-theme-skin] .panel-title {
  color: var(--skin-card-header-text, #15428b) !important;
  font-weight: 700 !important;
}

html[data-theme-skin] .modern-settings-header {
  border: 1px solid var(--skin-border) !important;
  background: var(--skin-card-bg) !important;
  border-radius: 4px !important;
}

html[data-theme-skin] .modern-settings-header::before {
  background: linear-gradient(90deg, var(--skin-primary) 0%, var(--skin-accent) 50%, var(--skin-primary) 100%) !important;
}

/* Dashboard Banner, Welcome Greeting & Metric Cards */
html[data-theme-skin] .modern-welcome-banner,
html[data-theme-skin] .modern-dashboard-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 0 16px 0 !important;
}

html[data-theme-skin] .modern-welcome-banner h1,
html[data-theme-skin] .modern-dashboard-header h1,
html[data-theme-skin] .welcome-title {
  color: #102a43 !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  margin-bottom: 4px !important;
}

html[data-theme-skin] .modern-welcome-banner p,
html[data-theme-skin] .modern-dashboard-header p,
html[data-theme-skin] .welcome-subtitle {
  color: #627d98 !important;
  font-size: 13px !important;
}

/* Metric KPI Cards (Exact match to Reference UI) */
html[data-theme-skin] .modern-metric-card,
html[data-theme-skin] .metric-card,
html[data-theme-skin] .modern-stat-card,
html[data-theme-skin] .stat-card {
  background: #ffffff !important;
  border: 1px solid #d9e2ec !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 16px 18px !important;
  transition: all 0.2s ease !important;
}

html[data-theme-skin] .modern-metric-card:hover,
html[data-theme-skin] .metric-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07) !important;
}

html[data-theme-skin] .modern-metric-card::before,
html[data-theme-skin] .metric-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--skin-primary) !important;
}

/* Top Border Colors by Metric Type */
html[data-theme-skin] .modern-metric-card.sales-card::before { background: #3b82f6 !important; }
html[data-theme-skin] .modern-metric-card.net-card::before { background: #10b981 !important; }
html[data-theme-skin] .modern-metric-card.invoice-card::before { background: #f59e0b !important; }
html[data-theme-skin] .modern-metric-card.return-card::before { background: #ec4899 !important; }
html[data-theme-skin] .modern-metric-card.purchase-card::before { background: #6366f1 !important; }
html[data-theme-skin] .modern-metric-card.due-card::before { background: #f97316 !important; }
html[data-theme-skin] .modern-metric-card.expense-card::before { background: #8b5cf6 !important; }
html[data-theme-skin] .modern-metric-card.purchase-return-card::before { background: #ec4899 !important; }

/* Metric Card Content Layout */
html[data-theme-skin] .modern-metric-card .metric-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

html[data-theme-skin] .modern-metric-card .metric-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #486581 !important;
  display: block !important;
  margin-bottom: 6px !important;
}

html[data-theme-skin] .modern-metric-card .metric-value {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #102a43 !important;
  letter-spacing: -0.02em !important;
  display: block !important;
}

/* Metric Icon Badges */
html[data-theme-skin] .metric-icon-wrapper {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}

html[data-theme-skin] .sales-icon { background: #e0f2fe !important; color: #0284c7 !important; }
html[data-theme-skin] .net-icon { background: #dcfce7 !important; color: #16a34a !important; }
html[data-theme-skin] .invoice-icon { background: #fef3c7 !important; color: #d97706 !important; }
html[data-theme-skin] .return-icon { background: #fce7f3 !important; color: #db2777 !important; }
html[data-theme-skin] .purchase-icon { background: #ede9fe !important; color: #7c3aed !important; }
html[data-theme-skin] .due-icon { background: #ffedd5 !important; color: #ea580c !important; }
html[data-theme-skin] .expense-icon { background: #f3e8ff !important; color: #9333ea !important; }
html[data-theme-skin] .purchase-return-icon { background: #fce7f3 !important; color: #db2777 !important; }

/* Dashboard Chart & Cards Container */
html[data-theme-skin] .chart-container-card,
html[data-theme-skin] .modern-chart-card,
html[data-theme-skin] .sales-chart-card,
html[data-theme-skin] .analytics-card {
  background: #ffffff !important;
  border: 1px solid #d9e2ec !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  padding: 16px 20px !important;
}

/* 5. Table Headers & Rows */
html[data-theme-skin] table.dataTable thead th,
html[data-theme-skin] .table thead th,
html[data-theme-skin] #pos_table thead th {
  background: var(--skin-card-header) !important;
  color: var(--skin-card-header-text, #15428b) !important;
  border-top: 1px solid var(--skin-border) !important;
  border-bottom: 2px solid var(--skin-border) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  padding: 7px 10px !important;
}

html[data-theme-skin] table.dataTable tbody tr,
html[data-theme-skin] .table tbody tr {
  border-bottom: 1px solid var(--skin-border) !important;
}

html[data-theme-skin] table.dataTable tbody tr:hover,
html[data-theme-skin] .table-striped > tbody > tr:hover {
  background-color: #fff9e6 !important;
}

html[data-theme-skin] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme-skin] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--skin-primary) !important;
  color: #ffffff !important;
  border-color: var(--skin-primary-dark) !important;
  border-radius: 3px !important;
}

/* 6. Form Controls & Focus States */
html[data-theme-skin] .form-control,
html[data-theme-skin] select.form-control,
html[data-theme-skin] input.form-control,
html[data-theme-skin] .select2-selection {
  background-color: var(--skin-input-bg) !important;
  color: var(--skin-input-text) !important;
  border: 1px solid var(--skin-input-border) !important;
  border-radius: 4px !important;
  height: 34px !important;
  font-size: 13px !important;
}

html[data-theme-skin] .form-control:focus,
html[data-theme-skin] .select2-container--focus .select2-selection {
  border-color: var(--skin-primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--skin-primary-rgb), 0.25) !important;
}

html[data-theme-skin] .input-group-addon {
  background: linear-gradient(180deg, #f0f5fc 0%, #e1ecf8 100%) !important;
  border: 1px solid var(--skin-input-border) !important;
  color: var(--skin-card-header-text, #15428b) !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}

html[data-theme-skin] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--skin-primary) !important;
  color: #ffffff !important;
}

/* 7. Buttons & Badges */
html[data-theme-skin] .btn-primary,
html[data-theme-skin] button.btn-primary,
html[data-theme-skin] .bg-primary,
html[data-theme-skin] .modern-submit-btn {
  background: linear-gradient(180deg, #3c77b2 0%, #205081 100%) !important;
  border: 1px solid #15428b !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme-skin] .btn-primary:hover,
html[data-theme-skin] .btn-primary:focus,
html[data-theme-skin] .modern-submit-btn:hover {
  background: linear-gradient(180deg, #4480bd 0%, #215c98 100%) !important;
  filter: brightness(1.06);
}

html[data-theme-skin] .btn-danger,
html[data-theme-skin] button.btn-danger,
html[data-theme-skin] .quick-pos-btn {
  background: linear-gradient(180deg, #e54d42 0%, #c82333 100%) !important;
  border: 1px solid #bd2130 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}

html[data-theme-skin] .badge-primary,
html[data-theme-skin] .label-primary {
  background-color: var(--skin-primary) !important;
  color: #ffffff !important;
  border-radius: 3px !important;
}

/* 8. Total Bill Box & Invoice Totals */
html[data-theme-skin] .pos-totals-summary-box,
html[data-theme-skin] .total-bill-box {
  background: linear-gradient(180deg, #e8f1fa 0%, #d8e8f7 100%) !important;
  border: 1px solid var(--skin-border) !important;
  border-radius: 6px !important;
}

html[data-theme-skin] .tot-payable-amount,
html[data-theme-skin] .pos-total-payable-hero .tot-payable-amount {
  color: var(--skin-card-header-text, #15428b) !important;
  font-weight: 800 !important;
}

/* 9. Modals */
html[data-theme-skin] .modal-content {
  background-color: var(--skin-card-bg) !important;
  border: 1px solid var(--skin-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  border-radius: 6px !important;
}

html[data-theme-skin] .modal-header {
  background: var(--skin-card-header) !important;
  border-bottom: 1px solid var(--skin-border) !important;
  color: var(--skin-card-header-text) !important;
  border-radius: 6px 6px 0 0 !important;
}

html[data-theme-skin] .modal-header .modal-title {
  color: var(--skin-card-header-text) !important;
  font-weight: 700 !important;
}


/* ==========================================================================
   COMPLETE DARK THEME ENGINE (FOR DARK SKINS)
   ========================================================================== */

html[data-theme-skin="bonus_darkroom"],
html[data-theme-skin="dx_black"],
html[data-theme-skin="bonus_high_contrast"],
html[data-theme-skin="bonus_metropolis_dark"],
html[data-theme-skin="bonus_vs2013_dark"],
html[data-theme-skin="office_2007_black"],
html[data-theme-skin="office_2010_black"],
html[data-theme-skin="dx_the_asphalt_world"] {
  color-scheme: dark;
}

/* Dark Theme Global Text & Component Overrides */
html[data-theme-skin="bonus_darkroom"] body,
html[data-theme-skin="dx_black"] body,
html[data-theme-skin="bonus_high_contrast"] body,
html[data-theme-skin="bonus_metropolis_dark"] body,
html[data-theme-skin="bonus_vs2013_dark"] body,
html[data-theme-skin="office_2007_black"] body,
html[data-theme-skin="office_2010_black"] body,
html[data-theme-skin="dx_the_asphalt_world"] body,
html[data-theme-skin="bonus_darkroom"] .content-wrapper,
html[data-theme-skin="dx_black"] .content-wrapper,
html[data-theme-skin="bonus_high_contrast"] .content-wrapper,
html[data-theme-skin="bonus_metropolis_dark"] .content-wrapper,
html[data-theme-skin="bonus_vs2013_dark"] .content-wrapper,
html[data-theme-skin="office_2007_black"] .content-wrapper,
html[data-theme-skin="office_2010_black"] .content-wrapper,
html[data-theme-skin="dx_the_asphalt_world"] .content-wrapper {
  color: #f1f5f9 !important;
}

html[data-theme-skin="bonus_darkroom"] .form-control,
html[data-theme-skin="dx_black"] .form-control,
html[data-theme-skin="bonus_high_contrast"] .form-control,
html[data-theme-skin="bonus_metropolis_dark"] .form-control,
html[data-theme-skin="bonus_vs2013_dark"] .form-control,
html[data-theme-skin="office_2007_black"] .form-control,
html[data-theme-skin="office_2010_black"] .form-control,
html[data-theme-skin="dx_the_asphalt_world"] .form-control,
html[data-theme-skin="bonus_darkroom"] .select2-selection,
html[data-theme-skin="dx_black"] .select2-selection,
html[data-theme-skin="bonus_high_contrast"] .select2-selection,
html[data-theme-skin="bonus_metropolis_dark"] .select2-selection,
html[data-theme-skin="bonus_vs2013_dark"] .select2-selection,
html[data-theme-skin="office_2007_black"] .select2-selection,
html[data-theme-skin="office_2010_black"] .select2-selection,
html[data-theme-skin="dx_the_asphalt_world"] .select2-selection {
  background-color: var(--skin-input-bg) !important;
  color: var(--skin-input-text) !important;
  border-color: var(--skin-input-border) !important;
}

html[data-theme-skin="bonus_darkroom"] .select2-dropdown,
html[data-theme-skin="dx_black"] .select2-dropdown,
html[data-theme-skin="bonus_high_contrast"] .select2-dropdown,
html[data-theme-skin="bonus_metropolis_dark"] .select2-dropdown,
html[data-theme-skin="bonus_vs2013_dark"] .select2-dropdown,
html[data-theme-skin="office_2007_black"] .select2-dropdown,
html[data-theme-skin="office_2010_black"] .select2-dropdown,
html[data-theme-skin="dx_the_asphalt_world"] .select2-dropdown,
html[data-theme-skin="bonus_darkroom"] .dropdown-menu,
html[data-theme-skin="dx_black"] .dropdown-menu,
html[data-theme-skin="bonus_high_contrast"] .dropdown-menu,
html[data-theme-skin="bonus_metropolis_dark"] .dropdown-menu,
html[data-theme-skin="bonus_vs2013_dark"] .dropdown-menu,
html[data-theme-skin="office_2007_black"] .dropdown-menu,
html[data-theme-skin="office_2010_black"] .dropdown-menu,
html[data-theme-skin="dx_the_asphalt_world"] .dropdown-menu {
  background-color: var(--skin-card-bg) !important;
  border-color: var(--skin-border) !important;
  color: #f1f5f9 !important;
}

html[data-theme-skin="bonus_darkroom"] .table,
html[data-theme-skin="dx_black"] .table,
html[data-theme-skin="bonus_high_contrast"] .table,
html[data-theme-skin="bonus_metropolis_dark"] .table,
html[data-theme-skin="bonus_vs2013_dark"] .table,
html[data-theme-skin="office_2007_black"] .table,
html[data-theme-skin="office_2010_black"] .table,
html[data-theme-skin="dx_the_asphalt_world"] .table {
  color: #f1f5f9 !important;
}

html[data-theme-skin="bonus_darkroom"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme-skin="dx_black"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme-skin="bonus_high_contrast"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme-skin="bonus_metropolis_dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme-skin="bonus_vs2013_dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme-skin="office_2007_black"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme-skin="office_2010_black"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme-skin="dx_the_asphalt_world"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03) !important;
}


/* ==========================================================================
   THEME & SKIN GALLERY BOX STYLING (SETTINGS SYSTEM TAB)
   ========================================================================== */

.skin-gallery-box {
  background: #ffffff;
  border: 1px solid #d0dbe5;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  margin-top: 18px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.skin-gallery-box.collapsed .skin-gallery-content {
  display: none;
}

.skin-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.skin-gallery-current {
  display: flex;
  align-items: center;
  gap: 12px;
}

.skin-gallery-badge-preview {
  width: 44px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #94a3b8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.skin-gallery-badge-top {
  height: 9px;
  width: 100%;
}

.skin-gallery-badge-body {
  height: 19px;
  width: 100%;
  position: relative;
}

.skin-gallery-badge-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
}

.skin-gallery-title-wrap h4 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2px 0;
}

.skin-gallery-title-wrap p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

.skin-gallery-close-btn {
  font-size: 13px;
  color: #2563eb;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
}

.skin-gallery-close-btn:hover {
  background: #e2e8f0;
  text-decoration: none;
}

.skin-gallery-content {
  padding: 14px 16px 18px 16px;
  max-height: 480px;
  overflow-y: auto;
}

/* Category header */
.skin-category-section {
  margin-bottom: 18px;
}

.skin-category-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #475569;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #e2e8f0;
}

/* Tiles container */
.skin-tiles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Skin Card Tile */
.skin-tile {
  width: 82px;
  min-height: 72px;
  padding: 6px 4px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  position: relative;
  user-select: none;
}

.skin-tile:hover {
  border-color: #3b82f6;
  background: #f0f7ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.skin-tile.active {
  border: 2px solid #f59e0b;
  background: #fffdf5;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25), 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Mini preview illustration within tile */
.skin-tile-thumb {
  width: 44px;
  height: 26px;
  border-radius: 3px;
  border: 1px solid #94a3b8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.skin-tile-thumb-top {
  height: 8px;
  width: 100%;
}

.skin-tile-thumb-body {
  height: 18px;
  width: 100%;
  position: relative;
}

.skin-tile-thumb-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
}

.skin-tile-name {
  font-size: 10.5px;
  font-weight: 500;
  color: #334155;
  line-height: 1.15;
  word-break: break-word;
}

.skin-tile.active .skin-tile-name {
  font-weight: 700;
  color: #1e293b;
}

/* Toggle Switch Component for Help text */
.theme-switch-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
}

.theme-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-switch input:checked + .theme-slider {
  background-color: #1d4ed8;
}

.theme-switch input:checked + .theme-slider:before {
  transform: translateX(20px);
}