/* ================================================================
   Optical POS — Theme System
   6 themes via CSS custom properties + [data-theme] attribute
   ================================================================ */

/* ---- DEFAULT: Optical Teal ---- */
:root {
    --color-primary:        #0d6e6e;
    --color-primary-dark:   #0a5555;
    --color-primary-light:  #e0f4f4;
    --color-accent:         #e8a020;
    --color-sidebar-bg:     #1a2e35;
    --color-sidebar-text:   #b0cece;
    --color-background:     #f4f7f7;
    --color-surface:        #ffffff;
    --color-border:         #d1e0e0;
    --color-text-primary:   #1a2e35;
    --color-text-secondary: #5a7878;
    --color-danger:         #c0392b;
    --color-success:        #1a7a4a;
    --color-warning:        #e8a020;
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --sidebar-width:        260px;
    --sidebar-collapsed-w:  64px;
    --topbar-height:        58px;
    --transition:           .2s ease;
}
/* ---- Ocean Blue ---- */
[data-theme="ocean-blue"] {
    --color-primary:        #1565c0;
    --color-primary-dark:   #0d47a1;
    --color-primary-light:  #e3f2fd;
    --color-accent:         #ff6f00;
    --color-sidebar-bg:     #0d1b2a;
    --color-sidebar-text:   #90caf9;
    --color-background:     #f5f7fa;
    --color-border:         #bbdefb;
    --color-text-primary:   #0d1b2a;
    --color-text-secondary: #546e7a;
}
/* ---- Forest Green ---- */
[data-theme="forest-green"] {
    --color-primary:        #2e7d32;
    --color-primary-dark:   #1b5e20;
    --color-primary-light:  #e8f5e9;
    --color-accent:         #f9a825;
    --color-sidebar-bg:     #1b2e1b;
    --color-sidebar-text:   #a5d6a7;
    --color-background:     #f5faf5;
    --color-border:         #c8e6c9;
    --color-text-primary:   #1b2e1b;
    --color-text-secondary: #4e6b4e;
}
/* ---- Royal Purple ---- */
[data-theme="royal-purple"] {
    --color-primary:        #6a1b9a;
    --color-primary-dark:   #4a148c;
    --color-primary-light:  #f3e5f5;
    --color-accent:         #ef6c00;
    --color-sidebar-bg:     #1e0a2e;
    --color-sidebar-text:   #ce93d8;
    --color-background:     #faf5ff;
    --color-border:         #e1bee7;
    --color-text-primary:   #1e0a2e;
    --color-text-secondary: #6a3a8a;
}
/* ---- Slate Gray ---- */
[data-theme="slate-gray"] {
    --color-primary:        #37474f;
    --color-primary-dark:   #263238;
    --color-primary-light:  #eceff1;
    --color-accent:         #26a69a;
    --color-sidebar-bg:     #1c2b32;
    --color-sidebar-text:   #b0bec5;
    --color-background:     #f4f6f8;
    --color-border:         #cfd8dc;
    --color-text-primary:   #1c2b32;
    --color-text-secondary: #546e7a;
}
/* ---- Dark Mode ---- */
[data-theme="dark-mode"] {
    --color-primary:        #00bcd4;
    --color-primary-dark:   #0097a7;
    --color-primary-light:  #002a2e;
    --color-accent:         #ffc107;
    --color-sidebar-bg:     #121212;
    --color-sidebar-text:   #b0bec5;
    --color-background:     #1a1a1a;
    --color-surface:        #242424;
    --color-border:         #333333;
    --color-text-primary:   #e0e0e0;
    --color-text-secondary: #9e9e9e;
    --color-danger:         #ef5350;
    --color-success:        #66bb6a;
    --color-warning:        #ffc107;
}

/* ================================================================
   BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
body { font-family:var(--font-sans); background:var(--color-background); color:var(--color-text-primary); margin:0; padding:0; }

/* ================================================================
   TOP NAVBAR
   ================================================================ */
.navbar-top {
    position:fixed; top:0; left:var(--sidebar-width); right:0; height:var(--topbar-height);
    background:var(--color-surface); border-bottom:1px solid var(--color-border);
    display:flex; align-items:center; justify-content:space-between; padding:0 1.25rem;
    z-index:1030; transition:left var(--transition); box-shadow:0 1px 4px rgba(0,0,0,.05);
}
body.sidebar-collapsed .navbar-top { left:var(--sidebar-collapsed-w); }

.sidebar-toggle-btn {
    background:none; border:1.5px solid var(--color-border); border-radius:8px;
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    font-size:1.15rem; color:var(--color-text-secondary); cursor:pointer;
    transition:background .15s,color .15s;
}
.sidebar-toggle-btn:hover { background:var(--color-primary-light); color:var(--color-primary); border-color:var(--color-primary); }

.store-name-label { font-weight:600; font-size:.95rem; color:var(--color-primary); }

.fin-year-badge {
    background:var(--color-primary-light); color:var(--color-primary);
    border-radius:20px; padding:.3rem .75rem; font-size:.78rem; font-weight:500;
    display:inline-flex; align-items:center;
}

.nav-icon-btn {
    background:none; border:1.5px solid var(--color-border); border-radius:8px;
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    font-size:1rem; color:var(--color-text-secondary); cursor:pointer; text-decoration:none;
    transition:background .15s,color .15s;
}
.nav-icon-btn:hover { background:var(--color-primary-light); color:var(--color-primary); border-color:var(--color-primary); }
.user-menu-btn { width:auto; padding:0 .75rem; gap:.4rem; font-size:.875rem; font-weight:500; color:var(--color-text-primary); }

.theme-swatch { display:inline-block; width:16px; height:16px; border-radius:50%; flex-shrink:0; }
.theme-menu .dropdown-item { font-size:.85rem; }
.theme-menu .dropdown-item.active-theme { background:var(--color-primary-light); color:var(--color-primary); font-weight:600; }

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
    position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-width);
    background:var(--color-sidebar-bg); display:flex; flex-direction:column;
    z-index:1040; transition:width var(--transition),transform var(--transition); overflow:hidden;
}
.sidebar-brand {
    display:flex; align-items:center; gap:.75rem; padding:0 1.25rem;
    height:var(--topbar-height); border-bottom:1px solid rgba(255,255,255,.08);
    color:#fff; font-size:1rem; font-weight:700; flex-shrink:0;
}
.sidebar-brand .bi { font-size:1.4rem; color:var(--color-primary); }

.sidebar-scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding:.5rem 0 1rem; }
.sidebar-scroll::-webkit-scrollbar { width:4px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:4px; }

.sidebar-menu { list-style:none; padding:0; margin:0; }
.sidebar-menu .nav-link {
    display:flex; align-items:center; gap:.75rem; padding:.6rem 1.25rem;
    color:var(--color-sidebar-text); font-size:.84rem; font-weight:400;
    text-decoration:none; white-space:nowrap; overflow:hidden;
    transition:background .12s,color .12s,padding-left .12s;
}
.sidebar-menu .nav-link .bi:first-child { font-size:1rem; width:1.25rem; flex-shrink:0; }
.sidebar-menu .nav-link:hover { background:rgba(255,255,255,.07); color:#fff; padding-left:1.5rem; }
.sidebar-menu .nav-link.active { background:var(--color-primary); color:#fff; padding-left:1.25rem; }

.submenu-toggle { cursor:pointer; }
.submenu-arrow { font-size:.75rem; transition:transform var(--transition); flex-shrink:0; }
.has-submenu.open > .submenu-toggle .submenu-arrow { transform:rotate(90deg); }

.submenu { list-style:none; padding:0; margin:0; max-height:0; overflow:hidden; background:rgba(0,0,0,.12); transition:max-height .25s ease; }
.has-submenu.open > .submenu { max-height:700px; }
.submenu .nav-link { padding-left:2.75rem; font-size:.82rem; }
.submenu .nav-link:hover { padding-left:3rem; }
.submenu .nav-link.active { padding-left:2.75rem; }

body.sidebar-collapsed .sidebar { width:var(--sidebar-collapsed-w); }
body.sidebar-collapsed .sidebar-brand span,
body.sidebar-collapsed .sidebar-menu .nav-link span,
body.sidebar-collapsed .submenu-arrow { display:none; }
body.sidebar-collapsed .sidebar-menu .nav-link { padding:.7rem; justify-content:center; gap:0; }
body.sidebar-collapsed .submenu { display:none; }

.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1035; }

/* ================================================================
   MAIN CONTENT
   ================================================================ */
.main-content {
    margin-left:var(--sidebar-width); margin-top:var(--topbar-height);
    padding:1.5rem; min-height:calc(100vh - var(--topbar-height));
    transition:margin-left var(--transition);
}
body.sidebar-collapsed .main-content { margin-left:var(--sidebar-collapsed-w); }

.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:1px solid var(--color-border); }
.page-title { font-size:1.05rem; font-weight:600; }
.page-actions { display:flex; gap:.5rem; align-items:center; }

.breadcrumb { font-size:.8rem; }
.breadcrumb-item a { color:var(--color-primary); text-decoration:none; }

/* ================================================================
   BOOTSTRAP OVERRIDES
   ================================================================ */
.btn-primary           { background:var(--color-primary)!important; border-color:var(--color-primary)!important; color:#fff!important; }
.btn-primary:hover     { background:var(--color-primary-dark)!important; border-color:var(--color-primary-dark)!important; }
.btn-outline-primary   { border-color:var(--color-primary)!important; color:var(--color-primary)!important; }
.btn-outline-primary:hover { background:var(--color-primary)!important; color:#fff!important; }
.text-primary          { color:var(--color-primary)!important; }
.bg-primary-subtle     { background:var(--color-primary-light)!important; }

/* Dark mode card/table adjustments */
[data-theme="dark-mode"] .card             { background:var(--color-surface); border-color:var(--color-border); color:var(--color-text-primary); }
[data-theme="dark-mode"] .table            { color:var(--color-text-primary); border-color:var(--color-border); }
[data-theme="dark-mode"] .table-light      { background:#2a2a2a; }
[data-theme="dark-mode"] .form-control,
[data-theme="dark-mode"] .form-select      { background:#2a2a2a; border-color:var(--color-border); color:var(--color-text-primary); }
[data-theme="dark-mode"] .modal-content    { background:var(--color-surface); color:var(--color-text-primary); }
[data-theme="dark-mode"] .dropdown-menu   { background:#2a2a2a; border-color:var(--color-border); }
[data-theme="dark-mode"] .dropdown-item   { color:var(--color-text-primary); }
[data-theme="dark-mode"] .dropdown-item:hover { background:#333; }
[data-theme="dark-mode"] .list-group-item { background:var(--color-surface); border-color:var(--color-border); color:var(--color-text-primary); }
[data-theme="dark-mode"] .card-header,
[data-theme="dark-mode"] .card-footer     { background:transparent; border-color:var(--color-border); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 991.98px) {
    .sidebar { transform:translateX(calc(-1 * var(--sidebar-width))); }
    .sidebar.mobile-open { transform:translateX(0); }
    .sidebar-overlay.show { display:block; }
    .navbar-top  { left:0; }
    .main-content { margin-left:0; }
    body.sidebar-collapsed .navbar-top  { left:0; }
    body.sidebar-collapsed .main-content { margin-left:0; }
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
    .sidebar,.navbar-top,.sidebar-overlay,.page-actions,.breadcrumb,.btn,.alert { display:none!important; }
    .main-content { margin:0!important; padding:0!important; }
    body { background:#fff!important; }
}