/* ================================================================
   CHIYYARAM BAKERY ERP — MAIN CSS
   Design: Dark Mode · Amber/Gold Accents · Glassmorphism
   ================================================================ */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --primary:        #F59E0B;
  --primary-lt:     #FCD34D;
  --primary-dk:     #D97706;
  --primary-glow:   rgba(245,158,11,0.12);
  --primary-border: rgba(245,158,11,0.25);

  /* Background Layers */
  --bg-base:    #0C0C0C;
  --bg-surface: #131313;
  --bg-panel:   #1A1A1A;
  --bg-card:    #202020;
  --bg-input:   #181818;
  --bg-hover:   #272727;
  --bg-active:  #2C2C2C;

  /* Borders */
  --border:     #282828;
  --border-lt:  #363636;

  /* Text */
  --tx-primary:   #F0F0F0;
  --tx-secondary: #A0A0A0;
  --tx-muted:     #5A5A5A;
  --tx-accent:    #F59E0B;

  /* Semantic */
  --success:    #10B981;
  --success-bg: rgba(16,185,129,0.10);
  --danger:     #EF4444;
  --danger-bg:  rgba(239,68,68,0.10);
  --warning:    #F59E0B;
  --warning-bg: rgba(245,158,11,0.10);
  --info:       #3B82F6;
  --info-bg:    rgba(59,130,246,0.10);
  --purple:     #8B5CF6;
  --purple-bg:  rgba(139,92,246,0.10);

  /* Layout */
  --sidebar-w:    258px;
  --sidebar-coll: 70px;
  --header-h:     60px;

  /* Radius */
  --r-sm:  6px;
  --r:     10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-full:9999px;

  /* Shadows */
  --sh-sm:   0 1px 4px rgba(0,0,0,0.5);
  --sh:      0 4px 20px rgba(0,0,0,0.5);
  --sh-lg:   0 12px 40px rgba(0,0,0,0.7);
  --sh-glow: 0 0 24px rgba(245,158,11,0.18);

  /* Transitions */
  --tr:   all 0.18s ease;
  --tr-s: all 0.30s ease;
}

/* ── Light Theme ─────────────────────────────────────────────── */
body.light-theme {
  --bg-base:    #F4F5F7;
  --bg-surface: #FFFFFF;
  --bg-panel:   #F0F1F3;
  --bg-card:    #FFFFFF;
  --bg-input:   #FFFFFF;
  --bg-hover:   #E8E9EC;
  --bg-active:  #DFE0E4;

  --border:     #DDE0E6;
  --border-lt:  #C8CBD2;

  --tx-primary:   #111827;
  --tx-secondary: #4B5563;
  --tx-muted:     #9CA3AF;
  --tx-accent:    #D97706;

  --sh-sm:   0 1px 4px rgba(0,0,0,0.08);
  --sh:      0 4px 20px rgba(0,0,0,0.10);
  --sh-lg:   0 12px 40px rgba(0,0,0,0.14);
  --sh-glow: 0 0 24px rgba(245,158,11,0.20);

  --primary-glow:   rgba(245,158,11,0.10);
  --primary-border: rgba(217,119,6,0.30);

  --success-bg: rgba(16,185,129,0.10);
  --danger-bg:  rgba(239,68,68,0.10);
  --warning-bg: rgba(245,158,11,0.10);
  --info-bg:    rgba(59,130,246,0.10);
  --purple-bg:  rgba(139,92,246,0.10);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; scroll-behavior:smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg-base);
  color: var(--tx-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; font-size:inherit; }
input, select, textarea { font-family:inherit; font-size:inherit; }
img { max-width:100%; display:block; }
ul, ol { list-style:none; }
h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.3; }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-lt); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--tx-muted); }

/* ── Utility ────────────────────────────────────────────────── */
.hidden { display:none !important; }
.flex   { display:flex; }
.grid   { display:grid; }
.relative { position:relative; }

/* ================================================================
   LOGIN SCREEN
   ================================================================ */
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  position: relative;
  overflow: hidden;
}

.login-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 15% 50%, rgba(245,158,11,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(59,130,246,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 70% 80%, rgba(16,185,129,0.03) 0%, transparent 60%);
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border-lt);
  border-radius: var(--r-xl);
  padding: 44px 48px;
  width: 100%;
  max-width: 540px;
  box-shadow: var(--sh-lg);
  position: relative;
  z-index: 1;
  animation: fadeSlideUp 0.45s cubic-bezier(0.22,0.68,0,1.2);
}

@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(28px) scale(0.97); }
  to   { opacity:1; transform:translateY(0)    scale(1);    }
}

.login-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 36px;
}

.login-logo-wrap {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-dk), var(--primary));
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: var(--sh-glow);
  flex-shrink: 0;
}

.login-brand h1 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.03em;
}

.login-brand p {
  font-size: 0.8rem;
  color: var(--tx-secondary);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.login-step-label {
  font-size: 0.857rem;
  color: var(--tx-secondary);
  margin-bottom: 18px;
  text-align: center;
}

/* Role Grid */
.role-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}

.role-card {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 8px 14px;
  text-align: center;
  cursor: pointer;
  transition: var(--tr-s);
  user-select: none;
}

.role-card:hover {
  border-color: var(--primary);
  background: var(--primary-glow);
  transform: translateY(-3px);
  box-shadow: var(--sh-glow);
}

.role-card.selected {
  border-color: var(--primary);
  background: var(--primary-glow);
  box-shadow: var(--sh-glow);
}

.role-icon { font-size: 1.9rem; margin-bottom: 8px; }
.role-name { font-size: 0.7rem; font-weight: 600; color: var(--tx-secondary); text-transform:uppercase; letter-spacing:0.05em; }
.role-card.selected .role-name { color: var(--primary); }

/* PIN Entry */
#pin-entry-section { margin-top: 4px; }

.pin-dots {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 20px 0 26px;
}

.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-lt);
  background: transparent;
  transition: var(--tr);
}

.pin-dot.filled {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(245,158,11,0.5);
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 260px;
  margin: 0 auto;
}

.pin-pad button {
  background: var(--bg-panel);
  border: 1px solid var(--border-lt);
  border-radius: var(--r);
  padding: 15px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tx-primary);
  transition: var(--tr);
}

.pin-pad button:hover { background:var(--bg-hover); border-color:var(--primary); color:var(--primary); }
.pin-pad button:active { transform:scale(0.93); }

.pin-action { font-size:1.3rem !important; }
.pin-ok { background:var(--primary-glow) !important; color:var(--primary) !important; border-color:var(--primary-border) !important; }

.pin-error {
  color: var(--danger);
  font-size: 0.8rem;
  text-align: center;
  margin-top: 14px;
  animation: shake 0.35s ease;
}

@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%,60%  { transform:translateX(-7px); }
  40%,80%  { transform:translateX(7px); }
}

.pin-back-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--tx-muted);
  padding: 8px;
  border-radius: var(--r-sm);
  transition: var(--tr);
}

.pin-back-btn:hover { color:var(--primary); background:var(--primary-glow); }

/* ================================================================
   APP LAYOUT
   ================================================================ */
#app { display:flex; min-height:100vh; }

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: var(--tr-s);
  overflow: hidden;
}

.sidebar.collapsed { width: var(--sidebar-coll); }

/* Sidebar Head */
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sb-logo { display:flex; align-items:center; gap:10px; overflow:hidden; }
.sb-logo-icon { font-size:1.7rem; flex-shrink:0; }
.sb-logo-text { display:flex; flex-direction:column; white-space:nowrap; overflow:hidden; transition:var(--tr-s); }
.sb-name { font-size:0.95rem; font-weight:800; color:var(--primary); letter-spacing:-0.02em; }
.sb-sub  { font-size:0.65rem; color:var(--tx-muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:1px; }

.sidebar.collapsed .sb-logo-text { opacity:0; width:0; }

.sb-toggle-btn {
  color: var(--tx-muted);
  padding: 6px;
  border-radius: var(--r-sm);
  transition: var(--tr);
  flex-shrink: 0;
}
.sb-toggle-btn:hover { color:var(--tx-primary); background:var(--bg-hover); }
.sidebar.collapsed .sb-toggle-btn i { transform:rotate(180deg); }

/* Sidebar Nav */
.sb-nav {
  flex: 1;
  padding: 12px 8px;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--tx-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 10px 4px;
  white-space: nowrap;
  overflow: hidden;
  transition: var(--tr-s);
}

.sidebar.collapsed .nav-section-label { opacity:0; height:0; padding:0; margin:0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--r);
  color: var(--tx-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--tr);
  white-space: nowrap;
  margin-bottom: 1px;
  user-select: none;
  border: 1px solid transparent;
}

.nav-item i { width:18px; height:18px; flex-shrink:0; }
.nav-item span { overflow:hidden; transition:var(--tr-s); white-space:nowrap; }
.sidebar.collapsed .nav-item span { opacity:0; width:0; }

.nav-item:hover { background:var(--bg-hover); color:var(--tx-primary); }
.nav-item.active {
  background: var(--primary-glow);
  color: var(--primary);
  border-color: var(--primary-border);
  font-weight: 600;
}

/* Sidebar Footer */
.sb-footer {
  padding: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sb-user { display:flex; align-items:center; gap:10px; flex:1; overflow:hidden; }

.sb-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-dk), var(--primary));
  color: #000;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}

.sb-user-info { display:flex; flex-direction:column; overflow:hidden; transition:var(--tr-s); }
.sidebar.collapsed .sb-user-info { opacity:0; width:0; }

.sb-user-name { font-size:0.8rem; font-weight:600; color:var(--tx-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user-role { font-size:0.7rem; color:var(--tx-muted); }

.sb-logout {
  color: var(--tx-muted);
  padding: 7px;
  border-radius: var(--r-sm);
  transition: var(--tr);
  flex-shrink: 0;
}
.sb-logout:hover { color:var(--danger); background:var(--danger-bg); }

/* ── Main Wrapper ───────────────────────────────────────────── */
.main-wrap {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: var(--tr-s);
}

.sidebar.collapsed ~ .main-wrap { margin-left: var(--sidebar-coll); }

/* ── Top Header ─────────────────────────────────────────────── */
.top-header {
  height: var(--header-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

.th-left { display:flex; align-items:center; gap:14px; }
.th-right { display:flex; align-items:center; gap:14px; }

.menu-hamburger {
  color: var(--tx-secondary);
  padding: 7px;
  border-radius: var(--r-sm);
  transition: var(--tr);
  display: none;
}
.menu-hamburger:hover { color:var(--tx-primary); background:var(--bg-hover); }

.th-breadcrumb {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tx-primary);
  letter-spacing: -0.01em;
}

.th-clock {
  font-size: 0.8rem;
  color: var(--tx-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.th-role-badge {
  background: var(--primary-glow);
  color: var(--primary);
  border: 1px solid var(--primary-border);
  border-radius: var(--r-full);
  padding: 3px 13px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Page Content ───────────────────────────────────────────── */
.page-main {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.page-main > * { animation: pageIn 0.28s ease both; }

@keyframes pageIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Loading State ──────────────────────────────────────────── */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 16px;
  color: var(--tx-muted);
}

.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border-lt);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform:rotate(360deg); } }

/* ================================================================
   MODAL
   ================================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-lt);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  animation: modalSlide 0.25s cubic-bezier(0.22,0.68,0,1.2);
}

@keyframes modalSlide {
  from { opacity:0; transform:translateY(20px) scale(0.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

.modal-box.modal-lg  { max-width:820px; }
.modal-box.modal-xl  { max-width:1020px; }
.modal-box.modal-sm  { max-width:400px; }
.modal-box.modal-pos { max-width:460px; }

/* ================================================================
   TOAST
   ================================================================ */
#toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-lt);
  border-left: 4px solid var(--primary);
  border-radius: var(--r);
  padding: 13px 18px;
  font-size: 0.875rem;
  color: var(--tx-primary);
  box-shadow: var(--sh-lg);
  min-width: 280px;
  max-width: 380px;
  animation: toastIn 0.3s ease;
  pointer-events: all;
}

@keyframes toastIn {
  from { opacity:0; transform:translateX(60px); }
  to   { opacity:1; transform:translateX(0); }
}

.toast.success { border-left-color:var(--success); }
.toast.danger  { border-left-color:var(--danger); }
.toast.info    { border-left-color:var(--info); }
.toast.warning { border-left-color:var(--warning); }

/* ================================================================
   PAGE-LEVEL STYLES (shared across all modules)
   ================================================================ */
.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--tx-primary);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.page-subtitle {
  font-size: 0.857rem;
  color: var(--tx-secondary);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tx-primary);
}

/* Module Tabs */
.mod-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 4px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.mod-tab {
  padding: 7px 16px;
  border-radius: var(--r-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tx-secondary);
  cursor: pointer;
  transition: var(--tr);
  white-space: nowrap;
  border: 1px solid transparent;
}

.mod-tab:hover { color:var(--tx-primary); background:var(--bg-hover); }
.mod-tab.active {
  background: var(--primary-glow);
  color: var(--primary);
  border-color: var(--primary-border);
}

.mod-panel { display:none; }
.mod-panel.active { display:block; }

/* Print */
@media print {
  .sidebar, .top-header, .mod-tabs, .btn, #toast-wrap, #modal-overlay { display:none !important; }
  .main-wrap { margin-left:0; }
  .page-main { padding:0; }
  body { background:#fff; color:#000; }
}