/*
 * theme-tokens.css
 * Master color token system for INFOBMS
 *
 * AUDIT SUMMARY (INFOBMS V7.0):
 * 1. Theme stored in: business.common_settings (JSON) + session + localStorage
 *    (upos_layout_body_classes). AdminLTE skin via session business.theme_color.
 * 2. Layout options: dashboard layout_1-3, header layout_1-2, sidebar
 *    classic|compact|modern|custom|static_v2, sidebar_mode classic|topbar|hybrid,
 *    business_settings classic|v2, 300+ color_scheme_id swatches, dark_mode bool.
 * 3. Applied via body classes: skin-{theme_color}, dark-mode, dashboard-layout-N,
 *    header-layout-N, sidebar-{type}, sidebar-mode-{mode}, layout-transition, etc.
 * 4. CSS load: tailwind, vendor, app.css, dark-mode-variables.css, dark-mode.css,
 *    layout-*.css, theme-base.css + inline color scheme :root vars from ColorSchemeUtil.
 * 5. Existing tokens: --text-primary, --bg-page, --theme-700, --sidebar-bg, etc.
 *    in dark-mode-variables.css and ColorSchemeUtil.
 * 6. Hospital module uses var(--text-heading), var(--bg-card) in hospital.css.
 *
 * HOW IT WORKS:
 * - :root defines --pos-* defaults (light baseline)
 * - body.dark-mode / skin-* blocks override tokens
 * - theme-components.css consumes --pos-* (with fallbacks to legacy --text-* vars)
 * - NEVER hardcode text hex on shared components; use var(--pos-*)
 */

/* ══════════════════════════════════════════════════════════════
   BASE TOKENS — Light theme defaults
   ══════════════════════════════════════════════════════════════ */
:root {
  --pos-bg-page:            #f4f6f9;
  --pos-bg-surface:         #ffffff;
  --pos-bg-surface-alt:     #f8f9fa;
  --pos-bg-surface-raised:  #ffffff;
  --pos-bg-overlay:         rgba(0, 0, 0, 0.05);

  --pos-text-primary:       #111827;
  --pos-text-secondary:     #374151;
  --pos-text-muted:         #4b5563;
  --pos-text-disabled:      #9ca3af;
  --pos-text-inverse:       #ffffff;
  --pos-text-heading:       #0f172a;
  --pos-text-link:          #007bff;
  --pos-text-link-hover:    #0056b3;

  /* Action button defaults (overridden by ColorSchemeUtil inline :root vars) */
  --btn-primary-bg:         #3b82f6;
  --btn-primary-hover:      #60a5fa;
  --text-on-primary:        #ffffff;
  --btn-secondary-bg:       #60a5fa;
  --btn-secondary-hover:    #93c5fd;
  --text-on-secondary:      #111827;
  --btn-success-bg:         #16a34a;
  --btn-success-hover:      #15803d;
  --btn-danger-bg:          #dc2626;
  --btn-danger-hover:       #b91c1c;
  --btn-warning-bg:         #d97706;
  --btn-warning-hover:      #b45309;
  --btn-info-bg:            #0284c7;
  --btn-info-hover:         #0369a1;
  --btn-text-on-filled:     #ffffff;
  --btn-icon-on-filled:     #ffffff;
  /* /roles Add metrics (global button system) */
  --btn-ui-height:          3rem;
  --btn-ui-padding-y:       8px;
  --btn-ui-padding-x:       22px;
  --btn-ui-radius:          9999px;
  --btn-ui-font-size:       0.875rem;
  --btn-ui-font-weight:     700;
  --btn-ui-line-height:     1.2;
  --btn-ui-gap:             6px;
  --btn-ui-shadow:          0 4px 10px rgba(0, 0, 0, 0.28);
  --accent-success:         #16a34a;
  --accent-danger:          #dc2626;
  --accent-warning:         #d97706;
  --accent-info:            #0284c7;

  --pos-border:             #dee2e6;
  --pos-border-strong:      #ced4da;
  --pos-border-focus:       #80bdff;

  --pos-sidebar-bg:         #343a40;
  --pos-sidebar-text:       #ffffff;
  --pos-sidebar-text-hover: #ffffff;
  --pos-sidebar-text-active:#ffffff;
  --pos-sidebar-text-muted: rgba(255, 255, 255, 0.75);
  --pos-sidebar-item-hover: rgba(255, 255, 255, 0.1);
  --pos-sidebar-item-active:#007bff;
  --pos-sidebar-header-text:rgba(255, 255, 255, 0.4);
  --pos-sidebar-icon:       rgba(255, 255, 255, 0.65);
  --sidebar-active-bg:      color-mix(in srgb, #ffffff 26%, var(--sidebar-bg, var(--bg-sidebar, #1e3a5f)));
  --pos-sidebar-search-bg:  rgba(255, 255, 255, 0.1);
  --pos-sidebar-search-text:#ffffff;
  --pos-sidebar-search-ph:  rgba(255, 255, 255, 0.5);
  --pos-sidebar-border:     rgba(255, 255, 255, 0.05);

  --pos-header-bg:          #343a40;
  --pos-header-text:        rgba(255, 255, 255, 0.9);
  --pos-header-text-hover:  #ffffff;
  --pos-header-icon:        rgba(255, 255, 255, 0.7);
  --pos-header-border:      rgba(255, 255, 255, 0.1);
  --pos-header-dropdown-bg: #ffffff;
  --pos-header-dropdown-text:#212529;
  --pos-header-dropdown-hover-bg:#f8f9fa;

  --pos-card-bg:            #ffffff;
  --pos-card-text:          #111827;
  --pos-card-text-secondary:#374151;
  --pos-card-header-bg:     #f8f9fa;
  --pos-card-header-text:   #343a40;
  --pos-card-border:        #dee2e6;
  --pos-card-shadow:        0 1px 3px rgba(0, 0, 0, 0.08);

  --pos-table-bg:           #ffffff;
  --pos-table-text:         #212529;
  --pos-table-header-bg:    #f8f9fa;
  --pos-table-header-text:  #343a40;
  --pos-table-row-hover:    #f5f5f5;
  --pos-table-row-stripe:   #fbfbfb;
  --pos-table-border:       #dee2e6;

  --pos-input-bg:           #ffffff;
  --pos-input-text:         #495057;
  --pos-input-border:       #ced4da;
  --pos-input-placeholder:  #adb5bd;
  --pos-input-focus-border: #80bdff;
  --pos-input-focus-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  --pos-input-disabled-bg:  #e9ecef;
  --pos-input-disabled-text:#6c757d;
  --pos-label-text:         #495057;
  --pos-select2-bg:         #ffffff;
  --pos-select2-text:       #495057;

  --pos-badge-text:         #ffffff;

  --pos-stat-card-bg:       #ffffff;
  --pos-stat-card-text:     #212529;
  --pos-stat-card-label:    #4b5563;
  --pos-stat-card-value:    #1a1d23;
  --pos-stat-card-icon-bg:  rgba(0, 123, 255, 0.1);
  --pos-stat-card-icon:     #007bff;

  --pos-dt-header-bg:       #f8f9fa;
  --pos-dt-header-text:     #343a40;
  --pos-dt-row-bg:          #ffffff;
  --pos-dt-row-text:        #212529;
  --pos-dt-row-alt-bg:      #f9f9f9;
  --pos-dt-row-hover-bg:    #f0f4ff;
  --pos-dt-border:          #dee2e6;
  --pos-dt-search-text:     #495057;
  --pos-dt-info-text:       #4b5563;
  --pos-dt-paginate-text:   #495057;
  --pos-dt-paginate-active: var(--btn-primary-bg, #3b82f6);
  --pos-dt-paginate-active-text: var(--text-on-primary, #ffffff);

  --pos-modal-bg:           #ffffff;
  --pos-modal-text:         #212529;
  --pos-modal-header-bg:    #f8f9fa;
  --pos-modal-header-text:  #343a40;
  --pos-modal-border:       #dee2e6;
  --pos-modal-backdrop:     rgba(0, 0, 0, 0.5);

  --pos-alert-info-bg:      #d1ecf1;
  --pos-alert-info-text:    #0c5460;
  --pos-alert-info-border:  #bee5eb;
  --pos-alert-success-bg:   #d4edda;
  --pos-alert-success-text: #155724;
  --pos-alert-warning-bg:   #fff3cd;
  --pos-alert-warning-text: #856404;
  --pos-alert-danger-bg:    #f8d7da;
  --pos-alert-danger-text:  #721c24;

  --pos-dropdown-bg:        #ffffff;
  --pos-dropdown-text:      #212529;
  --pos-dropdown-hover-bg:  #f8f9fa;
  --pos-dropdown-hover-text:#16181b;
  --pos-dropdown-border:    rgba(0, 0, 0, 0.15);
  --pos-dropdown-divider:   #e9ecef;
  --pos-dropdown-header:    #6c757d;

  --pos-tab-text:           #495057;
  --pos-tab-active-text:    #007bff;
  --pos-tab-hover-text:     #007bff;
  --pos-tab-border:         #dee2e6;
  --pos-tab-active-bg:      #ffffff;
  --pos-tab-content-bg:     #ffffff;
  --pos-tab-content-text:   #212529;

  --pos-tooltip-bg:         #000000;
  --pos-tooltip-text:       #ffffff;

  --pos-pos-bg:             #f4f6f9;
  --pos-pos-panel-bg:       #ffffff;
  --pos-pos-panel-text:     #212529;
  --pos-pos-product-card-bg:#ffffff;
  --pos-pos-product-text:   #212529;
  --pos-pos-product-price:  #28a745;
  --pos-pos-cart-bg:        #ffffff;
  --pos-pos-cart-text:      #212529;
  --pos-pos-total-bg:       #f8f9fa;
  --pos-pos-total-text:     #212529;

  --pos-hms-card-bg:        #ffffff;
  --pos-hms-card-text:      #111827;
  --pos-hms-card-text-muted:#4b5563;
  --pos-hms-icon-bg:        #fff3cd;
  --pos-hms-icon-color:     #856404;
  --pos-hms-stat-value:     #0f172a;
  --pos-hms-stat-label:     #4b5563;
  --pos-hms-table-header-bg:#f8f9fa;
  --pos-hms-table-header-text:#1f2937;
  --pos-hms-badge-text:     #ffffff;
  --pos-hms-section-title:  #111827;
}

/* Sidebar token defaults inherit from :root / ColorSchemeUtil — no #side-bar overrides here. */

/* ══════════════════════════════════════════════════════════════
   DARK THEME OVERRIDES
   ══════════════════════════════════════════════════════════════ */
body.dark-mode,
body.skin-dark,
body.sidebar-dark-mode,
[data-bs-theme="dark"],
body[class*="dark"]:not([class*="dark-mode-toggle"]) {

  --pos-bg-page:            #1a1d23;
  --pos-bg-surface:         #252830;
  --pos-bg-surface-alt:     #2d3140;
  --pos-bg-surface-raised:  #2d3140;
  --pos-bg-overlay:         rgba(0, 0, 0, 0.3);

  --pos-text-primary:       #e8eaed;
  --pos-text-secondary:     #b8bcc8;
  --pos-text-muted:         #8b92a5;
  --pos-text-disabled:      #5a6070;
  --pos-text-inverse:       #1a1d23;
  --pos-text-heading:       #f0f2f5;
  --pos-text-link:          #5b9bd5;
  --pos-text-link-hover:    #7ab4e8;

  --pos-border:             #3a3f4b;
  --pos-border-strong:      #4a5060;
  --pos-border-focus:       #5b9bd5;

  --pos-sidebar-bg:         #1e2231;
  --pos-sidebar-text:       rgba(220, 225, 235, 0.85);
  --pos-sidebar-text-hover: #ffffff;
  --pos-sidebar-text-active:#ffffff;
  --pos-sidebar-item-hover: rgba(255, 255, 255, 0.08);
  --pos-sidebar-item-active:#4a7fc1;
  --pos-sidebar-header-text:rgba(180, 185, 200, 0.5);
  --pos-sidebar-icon:       rgba(180, 185, 200, 0.7);
  --pos-sidebar-search-bg:  rgba(255, 255, 255, 0.07);
  --pos-sidebar-search-text:#e8eaed;
  --pos-sidebar-search-ph:  rgba(180, 185, 200, 0.5);
  --pos-sidebar-border:     rgba(255, 255, 255, 0.06);

  --pos-header-bg:          #1e2231;
  --pos-header-text:        rgba(220, 225, 235, 0.9);
  --pos-header-text-hover:  #ffffff;
  --pos-header-icon:        rgba(200, 205, 220, 0.8);
  --pos-header-border:      rgba(255, 255, 255, 0.08);
  --pos-header-dropdown-bg: #2d3140;
  --pos-header-dropdown-text:#e8eaed;
  --pos-header-dropdown-hover-bg:#3a3f4b;

  --pos-card-bg:            #252830;
  --pos-card-text:          #e8eaed;
  --pos-card-text-secondary:#b8bcc8;
  --pos-card-header-bg:     #2d3140;
  --pos-card-header-text:   #e8eaed;
  --pos-card-border:        #3a3f4b;
  --pos-card-shadow:        0 1px 3px rgba(0, 0, 0, 0.3);

  --pos-table-bg:           #252830;
  --pos-table-text:         #e8eaed;
  --pos-table-header-bg:    #2d3140;
  --pos-table-header-text:  #c8cdd8;
  --pos-table-row-hover:    #2d3140;
  --pos-table-row-stripe:   #272b36;
  --pos-table-border:       #3a3f4b;

  --pos-input-bg:           #2d3140;
  --pos-input-text:         #e8eaed;
  --pos-input-border:       #4a5060;
  --pos-input-placeholder:  #6b7280;
  --pos-input-focus-border: #5b9bd5;
  --pos-input-focus-shadow: 0 0 0 0.2rem rgba(91, 155, 213, 0.25);
  --pos-input-disabled-bg:  #1e2231;
  --pos-input-disabled-text:#5a6070;
  --pos-label-text:         #b8bcc8;
  --pos-select2-bg:         #2d3140;
  --pos-select2-text:       #e8eaed;

  --pos-stat-card-bg:       #252830;
  --pos-stat-card-text:     #e8eaed;
  --pos-stat-card-label:    #8b92a5;
  --pos-stat-card-value:    #f0f2f5;
  --pos-stat-card-icon-bg:  rgba(91, 155, 213, 0.15);
  --pos-stat-card-icon:     #5b9bd5;

  --pos-dt-header-bg:       #2d3140;
  --pos-dt-header-text:     #c8cdd8;
  --pos-dt-row-bg:          #252830;
  --pos-dt-row-text:        #e8eaed;
  --pos-dt-row-alt-bg:      #272b36;
  --pos-dt-row-hover-bg:    #2d3140;
  --pos-dt-border:          #3a3f4b;
  --pos-dt-search-text:     #e8eaed;
  --pos-dt-info-text:       #8b92a5;
  --pos-dt-paginate-text:   #b8bcc8;
  --pos-dt-paginate-active: var(--btn-primary-bg, #4a7fc1);
  --pos-dt-paginate-active-text: var(--text-on-primary, #ffffff);

  --pos-modal-bg:           #252830;
  --pos-modal-text:         #e8eaed;
  --pos-modal-header-bg:    #2d3140;
  --pos-modal-header-text:  #e8eaed;
  --pos-modal-border:       #3a3f4b;

  --pos-alert-info-bg:      #1a3040;
  --pos-alert-info-text:    #7ec8d8;
  --pos-alert-info-border:  #2a5060;
  --pos-alert-success-bg:   #1a3025;
  --pos-alert-success-text: #6bc98a;
  --pos-alert-warning-bg:   #3a2e10;
  --pos-alert-warning-text: #f0c060;
  --pos-alert-danger-bg:    #3a1a1e;
  --pos-alert-danger-text:  #f08090;

  --pos-dropdown-bg:        #2d3140;
  --pos-dropdown-text:      #e8eaed;
  --pos-dropdown-hover-bg:  #3a3f4b;
  --pos-dropdown-hover-text:#ffffff;
  --pos-dropdown-border:    rgba(255, 255, 255, 0.1);
  --pos-dropdown-divider:   #3a3f4b;
  --pos-dropdown-header:    #8b92a5;

  --pos-tab-text:           #b8bcc8;
  --pos-tab-active-text:    #5b9bd5;
  --pos-tab-hover-text:     #7ab4e8;
  --pos-tab-border:         #3a3f4b;
  --pos-tab-active-bg:      #252830;
  --pos-tab-content-bg:     #252830;
  --pos-tab-content-text:   #e8eaed;

  --pos-pos-bg:             #1a1d23;
  --pos-pos-panel-bg:       #252830;
  --pos-pos-panel-text:     #e8eaed;
  --pos-pos-product-card-bg:#2d3140;
  --pos-pos-product-text:   #e8eaed;
  --pos-pos-product-price:  #6bc98a;
  --pos-pos-cart-bg:        #252830;
  --pos-pos-cart-text:      #e8eaed;
  --pos-pos-total-bg:       #2d3140;
  --pos-pos-total-text:     #e8eaed;

  --pos-hms-card-bg:        #252830;
  --pos-hms-card-text:      #e8eaed;
  --pos-hms-card-text-muted:#8b92a5;
  --pos-hms-icon-bg:        rgba(245, 197, 24, 0.12);
  --pos-hms-icon-color:     #f5c518;
  --pos-hms-stat-value:     #f0f2f5;
  --pos-hms-stat-label:     #8b92a5;
  --pos-hms-table-header-bg:#2d3140;
  --pos-hms-table-header-text:#c8cdd8;
  --pos-hms-section-title:  #e8eaed;
}


/* ══════════════════════════════════════════════════════════════
   LIGHT SIDEBAR + LIGHT HEADER
   ══════════════════════════════════════════════════════════════ */
body.skin-light,
body.layout-skin-light,
body[class*="skin-light"],
body[class*="-light"]:not(.dark-mode) {
  --pos-sidebar-bg:         #ffffff;
  --pos-sidebar-text:       #374151;
  --pos-sidebar-text-hover: var(--text-on-primary, #ffffff);
  --pos-sidebar-text-active:#007bff;
  --pos-sidebar-text-muted: #6b7280;
  --pos-sidebar-item-hover: #f8f9fa;
  --pos-sidebar-item-active:#e8f0fe;
  --pos-sidebar-header-text:#adb5bd;
  --pos-sidebar-icon:       #6b7280;
  --sidebar-active-bg:      var(--primary, #007bff);
  --pos-sidebar-search-bg:  #f8f9fa;
  --pos-sidebar-search-text:#495057;
  --pos-sidebar-search-ph:  #adb5bd;
  --pos-sidebar-border:     #dee2e6;
}

body[class*="-light"]:not(.dark-mode) .main-header,
body[class*="-light"]:not(.dark-mode) .navbar,
body[class*="-light"]:not(.dark-mode) .app-header-toolbar.theme-header-bg {
  --pos-header-bg:          #ffffff;
  --pos-header-text:        rgba(255, 255, 255, 0.95);
  --pos-header-text-hover:  #ffffff;
  --pos-header-icon:        rgba(255, 255, 255, 0.95);
  --pos-header-border:      #dee2e6;
  --pos-header-dropdown-bg: #ffffff;
  --pos-header-dropdown-text:#212529;
  --pos-header-dropdown-hover-bg:#f8f9fa;
}


/* ══════════════════════════════════════════════════════════════
   AdminLTE COLOR SCHEME SKINS (legacy POS / hold-transition layouts)
   ══════════════════════════════════════════════════════════════ */
body.skin-blue .main-sidebar,
body.skin-blue aside.main-sidebar {
  --pos-sidebar-bg:         #367fa9;
  --pos-sidebar-text:       rgba(255, 255, 255, 0.85);
  --pos-sidebar-text-hover: #ffffff;
  --pos-sidebar-icon:       rgba(255, 255, 255, 0.7);
  --pos-sidebar-header-text:rgba(255, 255, 255, 0.4);
  --pos-sidebar-search-bg:  rgba(0, 0, 0, 0.1);
  --pos-sidebar-search-text:#ffffff;
  --pos-sidebar-search-ph:  rgba(255, 255, 255, 0.5);
}
body.skin-blue .main-header,
body.skin-blue .navbar {
  --pos-header-bg:          #3c8dbc;
  --pos-header-text:        rgba(255, 255, 255, 0.9);
  --pos-header-icon:        rgba(255, 255, 255, 0.8);
}

body.skin-black .main-sidebar,
body.skin-black aside.main-sidebar {
  --pos-sidebar-bg:         #222222;
  --pos-sidebar-text:       rgba(255, 255, 255, 0.8);
  --pos-sidebar-text-hover: #ffffff;
  --pos-sidebar-icon:       rgba(255, 255, 255, 0.6);
  --pos-sidebar-header-text:rgba(255, 255, 255, 0.35);
  --pos-sidebar-search-bg:  rgba(255, 255, 255, 0.1);
  --pos-sidebar-search-text:#ffffff;
  --pos-sidebar-search-ph:  rgba(255, 255, 255, 0.4);
}

body.skin-purple .main-sidebar,
body.skin-purple aside.main-sidebar {
  --pos-sidebar-bg:         #5b2c8d;
  --pos-sidebar-text:       rgba(255, 255, 255, 0.85);
  --pos-sidebar-text-hover: #ffffff;
  --pos-sidebar-icon:       rgba(255, 255, 255, 0.7);
  --pos-sidebar-header-text:rgba(255, 255, 255, 0.4);
  --pos-sidebar-search-bg:  rgba(0, 0, 0, 0.15);
  --pos-sidebar-search-text:#ffffff;
  --pos-sidebar-search-ph:  rgba(255, 255, 255, 0.5);
}

body.skin-green .main-sidebar,
body.skin-green aside.main-sidebar {
  --pos-sidebar-bg:         #1e6b3c;
  --pos-sidebar-text:       rgba(255, 255, 255, 0.85);
  --pos-sidebar-text-hover: #ffffff;
  --pos-sidebar-icon:       rgba(255, 255, 255, 0.7);
  --pos-sidebar-header-text:rgba(255, 255, 255, 0.4);
  --pos-sidebar-search-bg:  rgba(0, 0, 0, 0.12);
  --pos-sidebar-search-text:#ffffff;
  --pos-sidebar-search-ph:  rgba(255, 255, 255, 0.5);
}

body.skin-red .main-sidebar,
body.skin-red aside.main-sidebar {
  --pos-sidebar-bg:         #9b1c1c;
  --pos-sidebar-text:       rgba(255, 255, 255, 0.85);
  --pos-sidebar-text-hover: #ffffff;
  --pos-sidebar-icon:       rgba(255, 255, 255, 0.7);
  --pos-sidebar-header-text:rgba(255, 255, 255, 0.4);
  --pos-sidebar-search-bg:  rgba(0, 0, 0, 0.12);
  --pos-sidebar-search-text:#ffffff;
  --pos-sidebar-search-ph:  rgba(255, 255, 255, 0.5);
}

body.skin-yellow .main-sidebar,
body.skin-yellow aside.main-sidebar,
body.skin-orange .main-sidebar,
body.skin-orange aside.main-sidebar {
  --pos-sidebar-bg:         #b45309;
  --pos-sidebar-text:       rgba(255, 255, 255, 0.85);
  --pos-sidebar-text-hover: #ffffff;
  --pos-sidebar-icon:       rgba(255, 255, 255, 0.7);
  --pos-sidebar-header-text:rgba(255, 255, 255, 0.4);
  --pos-sidebar-search-bg:  rgba(0, 0, 0, 0.12);
  --pos-sidebar-search-text:#ffffff;
  --pos-sidebar-search-ph:  rgba(255, 255, 255, 0.5);
}

body.sidebar-mini.sidebar-collapse .sidebar .nav-icon,
body.sidebar-mini.sidebar-collapse .main-sidebar .nav-icon {
  color: var(--pos-sidebar-icon) !important;
}