@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* ================================================
   RESET & BASE
   ================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: light; scroll-behavior: smooth; }
[data-theme="dark"] { color-scheme: dark; }

::selection { background: rgba(232,184,109,.38); color: #1a1a2e; }

/* Premium gold scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #e8b86d, #c9a227);
  border-radius: 10px;
  border: 2px solid var(--bg-page);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f3ca7d, #d4af37); }

/* ------------------------------------------------
   THEME VARIABLES (day mode default / dark mode override)
   Brand accents (navy, gold) stay consistent across modes; surfaces,
   text and status-row colors are themed so contrast always holds —
   including inside colored (urgent/warning) rows and native <select>
   popups, which previously broke in dark mode.
   ------------------------------------------------ */
:root {
  --bg-page:      #eef1f7;
  --bg-surface:   #ffffff;
  --bg-surface-2: #fafbfd;
  --bg-hover:     #f7f9ff;
  --text-primary: #1a1a2e;
  --text-secondary: #555;
  --text-muted:   #8a8d99;
  --border-color: #e8eaed;
  --border-strong:#1a1a2e;

  --gold:        #e8b86d;
  --gold-deep:   #c9a227;
  --gold-light:  #f5d78a;
  --gold-shine:  #fff3d6;
  --navy-1:      #14142a;
  --navy-2:      #1a1a2e;
  --navy-3:      #0f3460;

  /* status rows — tuned per theme so text never fights the background */
  --row-urgent-bg:       #ffdde0;
  --row-urgent-bg-hover: #ffc7cc;
  --row-urgent-text:     #8a1414;
  --row-warning-bg:       #fff2c0;
  --row-warning-bg-hover: #ffe89a;
  --row-warning-text:     #6b4c00;
  --row-complete-bg:      #d4f5e2;
  --row-complete-bg-hover:#beeecf;
  --row-complete-text:    #185c34;

  --shadow-soft: 0 4px 24px rgba(15,25,50,.08);
  --shadow-lift: 0 24px 60px rgba(15,25,50,.16);
  --shadow-gold: 0 8px 24px rgba(201,162,39,.32);
}

[data-theme="dark"] {
  --bg-page:      #12131c;
  --bg-surface:   #1d1e28;
  --bg-surface-2: #262735;
  --bg-hover:     #2c2e3e;
  --text-primary: #f1f1f6;
  --text-secondary: #c2c3d1;
  --text-muted:   #8b8d9c;
  --border-color: #383a4a;
  --border-strong:#4b4d61;

  --gold:        #f0c576;
  --gold-deep:   #d4af37;
  --gold-light:  #f7dd9a;
  --gold-shine:  #3a301c;
  --navy-1:      #0c0d18;
  --navy-2:      #14142a;
  --navy-3:      #0f3460;

  --row-urgent-bg:       #4a1620;
  --row-urgent-bg-hover: #5c1b28;
  --row-urgent-text:     #ffb3bd;
  --row-warning-bg:       #423414;
  --row-warning-bg-hover: #52411a;
  --row-warning-text:     #ffe08a;
  --row-complete-bg:      #0d3825;
  --row-complete-bg-hover:#12472f;
  --row-complete-text:    #80f0b0;

  --shadow-soft: 0 4px 24px rgba(0,0,0,.35);
  --shadow-lift: 0 28px 70px rgba(0,0,0,.55);
  --shadow-gold: 0 8px 24px rgba(212,175,55,.28);
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-page);
  transition: background .35s ease, color .35s ease;
  -webkit-font-smoothing: antialiased;
}

/* ================================================
   LOGIN PAGE
   ================================================ */
.login-body {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #14142a 0%, #16213e 45%, #0f3460 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ambient gold glow orbs, purely decorative */
.login-body::before,
.login-body::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: .5;
  animation: orbFloat 12s ease-in-out infinite;
}
.login-body::before {
  width: 420px; height: 420px;
  top: -140px; left: -120px;
  background: radial-gradient(circle, rgba(232,184,109,.55), transparent 70%);
}
.login-body::after {
  width: 460px; height: 460px;
  bottom: -160px; right: -140px;
  background: radial-gradient(circle, rgba(15,52,96,.7), transparent 70%);
  animation-delay: -6s;
}

.login-wrapper {
  width: 100%;
  max-width: 420px;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.login-card {
  background: #fff;
  border-radius: 24px;
  padding: 52px 42px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(232,184,109,.18);
  position: relative;
  overflow: hidden;
  animation: cardIn .55s cubic-bezier(.22,.9,.3,1.15) both;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--navy-2), var(--gold), var(--navy-2));
  background-size: 200% auto;
  animation: shimmerBar 4s linear infinite;
}

.login-logo {
  text-align: center;
  margin-bottom: 38px;
}

.logo-img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 20px;
  margin-bottom: 16px;
  box-shadow: 0 12px 32px rgba(26,26,46,.25);
  animation: logoFloat 4.5s ease-in-out infinite;
}

.login-logo h1 {
  font-family: 'Playfair Display', serif;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: .3px;
  background: linear-gradient(120deg, #1a1a2e, #0f3460 45%, #b8860b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-logo p  { font-size: 12.5px; color: #999; margin-top: 5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; }

.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #555;
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.form-group input {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid #e8eaed;
  border-radius: 11px;
  font-size: 15px;
  outline: none;
  background: #fff;
  transition: border-color .22s ease, box-shadow .22s ease, transform .12s ease;
}

.form-group input:focus {
  border-color: var(--navy-3);
  box-shadow: 0 0 0 4px rgba(15,52,96,.1);
}

.btn-login {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  background-size: 160% 160%;
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 10px 26px rgba(15,52,96,.35);
  transition: box-shadow .25s ease, transform .15s ease, background-position .6s ease;
  position: relative;
  overflow: hidden;
}
.btn-login::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-login:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(15,52,96,.48); background-position: 100% 50%; }
.btn-login:hover:not(:disabled)::after { left: 140%; }
.btn-login:active:not(:disabled) { transform: translateY(0); }
.btn-login:disabled { opacity: .6; cursor: default; }

.error-msg {
  margin-top: 14px;
  padding: 11px 14px;
  background: #fff0f0;
  border: 1px solid #ffcdd2;
  border-radius: 9px;
  color: #c62828;
  font-size: 13px;
  text-align: center;
  animation: shakeIn .35s ease;
}

/* ================================================
   ADMIN LAYOUT
   ================================================ */
.admin-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
}

/* Top bar */
.top-bar {
  background: linear-gradient(120deg, var(--navy-1) 0%, var(--navy-2) 45%, var(--navy-3) 100%);
  background-size: 220% 220%;
  animation: gradientDrift 18s ease infinite;
  color: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 11px 22px;
  min-height: 60px;
  gap: 12px 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  border-bottom: 2px solid rgba(232,184,109,.4);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  text-shadow: 0 2px 12px rgba(232,184,109,.25);
  transition: opacity .18s ease;
}
.brand:hover { opacity: .88; }

.brand-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(232,184,109,.35), 0 4px 14px rgba(0,0,0,.3);
  transition: transform .3s ease;
}
.brand:hover .brand-icon { transform: rotate(-6deg) scale(1.06); }

.main-nav { display: flex; gap: 3px; flex: 1 1 auto; min-width: 240px; flex-wrap: wrap; }

.nav-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.65);
  padding: 8px 18px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: all .22s cubic-bezier(.3,.8,.4,1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.nav-btn:hover  { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-1px); }
.nav-btn.active { background: rgba(232,184,109,.16); color: #fff; }

.nav-btn.active::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(232,184,109,.7);
}

.top-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; margin-left: auto; }

.btn-icon {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.65);
  font-size: 19px;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 8px;
  transition: all .25s ease;
  line-height: 1;
}
.btn-icon:hover { background: rgba(255,255,255,.1); color: var(--gold); transform: rotate(45deg); }

.btn-topout {
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.75);
  padding: 7px 17px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all .2s ease;
}
.btn-topout:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); }

.btn-create-order {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  background-size: 160% 160%;
  color: #1a1a2e;
  border: none;
  padding: 9px 19px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: all .25s ease;
  box-shadow: 0 3px 14px rgba(201,162,39,.4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.btn-create-order::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.btn-create-order:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(201,162,39,.55); background-position: 100% 50%; }
.btn-create-order:hover::after { left: 140%; }
.btn-create-order:active { transform: translateY(0); }

.btn-browse-order {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  padding: 9px 19px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: all .22s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-browse-order:hover { background: rgba(255,255,255,.18); border-color: rgba(232,184,109,.5); transform: translateY(-2px); }
.btn-browse-order:active { transform: translateY(0); }

/* Content */
.content-area { flex: 1; }

/* ================================================
   HOME SCREEN
   ================================================ */
.home-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 60px);
  padding: 40px 24px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232,184,109,.09) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 90%, rgba(15,52,96,.06) 0%, transparent 50%);
  overflow: hidden;
}

.theme-toggle {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--gold-deep);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transition: all .3s cubic-bezier(.3,.8,.4,1);
  z-index: 2;
}
.theme-toggle:hover { transform: translateY(-3px) rotate(-14deg); box-shadow: 0 10px 26px rgba(201,162,39,.28); border-color: var(--gold); }

.home-header {
  text-align: center;
  margin-bottom: 54px;
  animation: fadeUp .6s ease;
  position: relative;
  z-index: 1;
}

.home-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  border-radius: 26px;
  margin-bottom: 22px;
  box-shadow: 0 14px 38px rgba(26,26,46,.3), 0 0 0 1px rgba(232,184,109,.25);
  animation: logoFloat 5s ease-in-out infinite;
}

.home-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.2px;
  background: linear-gradient(120deg, var(--text-primary) 30%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.home-header p { font-size: 13.5px; color: var(--text-muted); letter-spacing: .4px; }

.home-cards {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: nowrap;       /* keep all 6 cards in one row */
  position: relative;
  z-index: 1;
  overflow-x: auto;        /* safety scroll if viewport is very narrow */
  perspective: 1400px;
  padding: 6px 4px 18px;   /* room for the lift + shadow to breathe */
}

/* ------------------------------------------------
   BASE CARD — shared shape/size for all 6 buttons
   ------------------------------------------------ */
.home-card {
  border-radius: 20px;
  padding: 30px 16px 24px;
  width: 158px;
  min-width: 130px;
  flex-shrink: 0;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transform-style: preserve-3d;
  animation: cardIn .6s cubic-bezier(.22,.9,.3,1) both;
  transition: transform .5s cubic-bezier(.22,1.5,.36,1), box-shadow .5s ease, border-color .4s ease;
}

.home-card:nth-child(1) { animation-delay: .05s; }
.home-card:nth-child(2) { animation-delay: .12s; }
.home-card:nth-child(3) { animation-delay: .19s; }
.home-card:nth-child(4) { animation-delay: .26s; }
.home-card:nth-child(5) { animation-delay: .33s; }
.home-card:nth-child(6) { animation-delay: .40s; }

.home-card:active { transform: translateY(-6px) scale(.97); }

.home-card:nth-child(odd):hover  { transform: translateY(-16px) scale(1.035) rotate(-.6deg); }
.home-card:nth-child(even):hover { transform: translateY(-16px) scale(1.035) rotate(.6deg); }

.home-card-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 21px;
  position: relative;
  z-index: 2;
  transition: transform .5s cubic-bezier(.3,1.7,.4,1), box-shadow .4s ease, background .4s ease, color .4s ease;
}

.home-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}

.home-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.55;
  position: relative;
  z-index: 2;
}

/* ==================================================
   GROUP 1 — GOLD (Buyurtma yaratish / Buyurtma tanlash)
   The two primary actions: the richest, most jewel-like treatment.
   ================================================== */
.home-card-gold {
  background: linear-gradient(155deg, #fffaf0 0%, #ffffff 55%, #fdf5e0 100%);
  border-color: rgba(201,162,39,.45);
  box-shadow: 0 12px 30px rgba(201,162,39,.2), inset 0 0 0 1px rgba(255,255,255,.6);
}
[data-theme="dark"] .home-card-gold {
  background: linear-gradient(155deg, #2c2618 0%, #24200f 55%, #1d1e28 100%);
  border-color: rgba(240,197,118,.4);
}
/* slow-rotating gold aura behind the card */
.home-card-gold::before {
  content: '';
  position: absolute;
  inset: -55%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(232,184,109,.4) 55deg, transparent 130deg, transparent 360deg);
  animation: auraSpin 7s linear infinite;
  z-index: 0;
}
/* glass sheen that sweeps across on hover */
.home-card-gold::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-16deg);
  transition: left .85s cubic-bezier(.22,.9,.3,1);
  z-index: 1;
  pointer-events: none;
}
.home-card-gold:hover::after { left: 130%; }
.home-card-gold .home-card-icon {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #1a1a2e;
  box-shadow: 0 6px 18px rgba(201,162,39,.45), 0 0 0 4px rgba(255,255,255,.55) inset;
  animation: goldMedallionPulse 2.6s ease-in-out infinite;
}
[data-theme="dark"] .home-card-gold .home-card-icon { box-shadow: 0 6px 18px rgba(201,162,39,.5), 0 0 0 4px rgba(29,30,40,.6) inset; }
.home-card-gold:hover {
  border-color: var(--gold);
  box-shadow: 0 32px 60px rgba(201,162,39,.38), inset 0 0 0 1px rgba(255,255,255,.7);
}
.home-card-gold:nth-child(1):hover .home-card-icon { transform: scale(1.2) rotate(14deg); }
.home-card-gold:nth-child(2):hover .home-card-icon { transform: scale(1.2) rotate(-14deg); }
.home-card-gold .home-card-title { background: linear-gradient(120deg, var(--text-primary) 40%, var(--gold-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ==================================================
   GROUP 2 — NAVY (Yetkazish Tarixi / Buyurtmalar)
   Deep, formal, "boardroom" luxury with a coin-flip icon.
   ================================================== */
.home-card-navy {
  background: linear-gradient(160deg, var(--navy-1), var(--navy-2) 55%, var(--navy-3));
  border-color: rgba(232,184,109,.28);
  box-shadow: 0 10px 26px rgba(15,25,50,.35);
}
.home-card-navy .home-card-title { color: #f5f5fa; }
.home-card-navy .home-card-desc  { color: rgba(241,241,246,.62); }
/* drifting gold glow, like light catching polished stone */
.home-card-navy::before {
  content: '';
  position: absolute;
  top: -34px; right: -34px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,184,109,.5), transparent 70%);
  filter: blur(4px);
  animation: navyDrift 5.5s ease-in-out infinite;
  z-index: 0;
}
.home-card-navy .home-card-icon {
  background: rgba(232,184,109,.12);
  border: 1px solid rgba(232,184,109,.5);
  color: var(--gold-light);
}
.home-card-navy .home-card-title::after {
  content: '';
  display: block;
  width: 0; height: 2px;
  background: var(--gold);
  margin: 7px auto 0;
  transition: width .45s cubic-bezier(.22,.9,.3,1);
}
.home-card-navy:hover {
  border-color: var(--gold);
  box-shadow: 0 28px 55px rgba(15,25,50,.55), 0 0 0 1px rgba(232,184,109,.3);
}
.home-card-navy:hover .home-card-title::after { width: 34px; }
.home-card-navy:hover .home-card-icon {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  border-color: var(--gold);
  color: #1a1a2e;
}

/* ==================================================
   GROUP 3 — PEARL (Yuborilgan / Malumotlar)
   Lighter, quieter luxury — hairline gold outline + ripple.
   ================================================== */
.home-card-pearl {
  background: linear-gradient(160deg, #ffffff, #f8f4ea);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 8px 20px rgba(15,25,50,.08);
}
[data-theme="dark"] .home-card-pearl {
  background: linear-gradient(160deg, #23242f, #1a1b24);
  border-color: rgba(255,255,255,.07);
}
.home-card-pearl .home-card-icon {
  background: transparent;
  border: 2px solid var(--gold-deep);
  color: var(--gold-deep);
  animation: iconFloatSubtle 3.6s ease-in-out infinite;
}
/* expanding ripple ring on hover, centred on the card */
.home-card-pearl::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.home-card-pearl:hover::after { animation: ringPulse .9s ease-out; }
.home-card-pearl:hover {
  border-color: rgba(201,162,39,.45);
  box-shadow: 0 20px 42px rgba(15,25,50,.16);
}
.home-card-pearl:hover .home-card-icon {
  border-color: var(--gold);
  color: var(--gold-deep);
  box-shadow: 0 0 0 6px rgba(232,184,109,.15);
  transform: scale(1.12);
}
.home-card-pearl:hover .home-card-title { letter-spacing: .6px; }

/* ================================================
   SHEET AREA
   ================================================ */
.sheet-area-wrap { padding: 22px 26px; animation: fadeUp .4s ease; }

.sheet-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.toolbar-left  { display: flex; align-items: center; gap: 10px; flex: 1; }
.toolbar-right { display: flex; gap: 8px; align-items: center; }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 15px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-back:hover { color: var(--text-primary); border-color: var(--gold); box-shadow: 0 3px 12px rgba(0,0,0,.1); transform: translateX(-2px); }

.sheet-title {
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--text-primary);
}

.btn-add {
  background: linear-gradient(135deg, #e8f5e9, #d4ecd7);
  color: #2e7d32;
  border: 1px solid #c8e6c9;
  padding: 9px 19px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: all .22s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .btn-add { background: linear-gradient(135deg, #1c3320, #223a27); color: #7fd88a; border-color: #2f4f36; }
.btn-add:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(46,125,50,.22); }

.btn-save {
  background: linear-gradient(135deg, var(--navy-2), var(--navy-3));
  background-size: 160% 160%;
  color: #fff;
  border: none;
  padding: 9px 23px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: all .25s ease;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(26,26,46,.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-save:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,26,46,.42); background-position: 100% 50%; }
.btn-save:active { transform: translateY(0); }

.sent-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #fff9e6, #fef3d0);
  border: 1px solid #f5d78a;
  color: #7a5c00;
  padding: 8px 15px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  animation: fadeUp .3s ease;
}
[data-theme="dark"] .sent-badge { background: linear-gradient(135deg, #3a3520, #322d1a); border-color: #6b5a1f; color: #f0d489; }

/* "Buyurtma tanlash" browse controls: status filter tabs + sort select */
.browse-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.browse-filters { display: flex; gap: 7px; }

.filter-tab {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 18px;
  border-radius: 22px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: all .22s ease;
}
.filter-tab:hover  { background: var(--bg-hover); color: var(--text-primary); border-color: var(--gold); transform: translateY(-1px); }
.filter-tab.active {
  background: linear-gradient(135deg, var(--navy-2), var(--navy-3));
  color: #fff;
  border-color: var(--navy-2);
  box-shadow: 0 4px 14px rgba(26,26,46,.28);
}

.browse-sort { display: flex; align-items: center; gap: 8px; }
.browse-sort label { font-size: 12px; color: var(--text-muted); font-weight: 700; white-space: nowrap; }
.browse-sort .modal-select { width: auto; padding: 8px 14px; font-size: 13px; }

/* "Buyurtmalar"/"Yuborilgan" own sort controls (Ism / Sana / 🔥 Shoshilinch) */
.order-sort-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.order-sort-label { font-size: 12px; color: var(--text-muted); font-weight: 700; white-space: nowrap; margin-right: 2px; }
.filter-tab-urgent.active {
  background: linear-gradient(135deg, #ea5555, #c62828);
  border-color: #c62828;
  box-shadow: 0 4px 16px rgba(198,40,40,.4);
  animation: urgentPulse 1.8s ease-in-out infinite;
}

/* Search box above the customer grid (fullscreen "Buyurtma tanlash" modal) */
.browse-search-wrap {
  position: relative;
  flex-shrink: 0;
  margin-bottom: 20px;
}
.browse-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-deep);
  font-size: 14px;
  pointer-events: none;
}
.browse-search-input {
  width: 100%;
  padding: 14px 18px 14px 44px;
  border: 2px solid var(--border-color);
  border-radius: 13px;
  font-size: 15px;
  outline: none;
  transition: border-color .22s ease, box-shadow .22s ease;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.browse-search-input:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(201,162,39,.14); }

/* Customer checkbox list inside the "Buyurtma tanlash" modal — a
   responsive grid of selectable "chip" cards */
.customer-browse-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 13px;
  overflow-y: auto;
  flex: 1;
  padding: 4px 4px 4px 0;
  align-content: start;
}

.customer-check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 19px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 2px solid var(--border-color);
  transition: all .2s ease;
}
.customer-check-row:hover  { border-color: #cfd6e6; background: var(--bg-hover); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.customer-check-row.checked {
  border-color: var(--gold);
  background: linear-gradient(160deg, #fffdf7, #fff9ec);
  box-shadow: 0 6px 18px rgba(201,162,39,.22);
}
[data-theme="dark"] .customer-check-row.checked {
  background: linear-gradient(160deg, #2c2618, #292414);
}
.customer-check-row input[type="checkbox"] {
  width: 19px;
  height: 19px;
  accent-color: var(--navy-2);
  cursor: pointer;
  flex-shrink: 0;
}
.customer-check-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-browse-empty { grid-column: 1 / -1; padding: 44px 16px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* Table wrapper */
.table-wrapper {
  background: var(--bg-surface);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  overflow: auto;
  max-height: calc(100vh - 175px);
  border: 1px solid var(--border-strong);
}

/* ================================================
   SPREADSHEET TABLE
   ================================================ */
/* Wraps #sheet-table so it can be uniformly scaled down to fit the
   screen (see fitTableToScreen() in app.js) without ever squeezing any
   individual column out of its true, Excel-derived proportion. Its own
   width/height are set inline by JS to match the *scaled* footprint of
   the table, so the surrounding layout never leaves extra blank space.
   Kept full-width & block-level by default so the "Malumotlar" table
   (which uses .equal-cols instead of scaling) can stretch edge to edge. */
.sheet-table-scale {
  display: block;
  width: 100%;
}

#sheet-table {
  border-collapse: collapse;
  width: max-content;
  font-size: 13px;
  transform-origin: top left;
}

/* "Malumotlar" — every column exactly the same width, table always
   stretched to fill the full available width (no Excel-derived ratios). */
#sheet-table.equal-cols {
  width: 100%;
  table-layout: fixed;
}

/* Header */
#sheet-table thead th {
  background: linear-gradient(160deg, var(--navy-2), var(--navy-1));
  color: rgba(255,255,255,.92);
  padding: 10px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 2px solid rgba(232,184,109,.35);
  user-select: none;
}

#sheet-table thead th:first-child {
  width: 38px;
  min-width: 38px;
  background: var(--navy-1);
}

/* Rows */
#sheet-table tbody tr {
  border-bottom: 1.5px solid var(--border-strong);
  animation: rowIn .25s ease both;
  transition: background .18s ease;
}
#sheet-table tbody tr:hover { background: var(--bg-hover); }

/* Visual-only group separator inserted between different customers' rows
   when a section is sorted "Ism bo'yicha" (Buyurtmalar / Yetkazish Tarixi /
   Yuborilgan). Never part of the data — see JS renderGroupedByName(). */
#sheet-table tbody tr.row-spacer {
  animation: none;
  pointer-events: none;
}
#sheet-table tbody tr.row-spacer:hover { background: transparent; }
#sheet-table tbody tr.row-spacer td {
  height: 12px;
  padding: 0;
  border: none;
  background: transparent;
  width: auto;
  min-width: 0;
}


/* "Kun" (qolgan kun) ustuniga qarab qatorni rangga bo'yash.
   Text color is themed too (--row-*-text), so it always stays readable
   whether the panel is in light or dark mode. */
#sheet-table tbody tr.row-urgent  { background: var(--row-urgent-bg); }
#sheet-table tbody tr.row-urgent:hover  { background: var(--row-urgent-bg-hover); }
#sheet-table tbody tr.row-warning { background: var(--row-warning-bg); }
#sheet-table tbody tr.row-warning:hover { background: var(--row-warning-bg-hover); }
#sheet-table tbody tr.row-complete { background: var(--row-complete-bg); }
#sheet-table tbody tr.row-complete:hover { background: var(--row-complete-bg-hover); }

#sheet-table tbody tr.row-urgent .ci,
#sheet-table tbody tr.row-urgent .cs,
#sheet-table tbody tr.row-urgent .ci-text,
#sheet-table tbody tr.row-urgent .row-num-txt {
  color: var(--row-urgent-text);
}
#sheet-table tbody tr.row-warning .ci,
#sheet-table tbody tr.row-warning .cs,
#sheet-table tbody tr.row-warning .ci-text,
#sheet-table tbody tr.row-warning .row-num-txt {
  color: var(--row-warning-text);
}
#sheet-table tbody tr.row-complete .ci,
#sheet-table tbody tr.row-complete .cs,
#sheet-table tbody tr.row-complete .ci-text,
#sheet-table tbody tr.row-complete .row-num-txt {
  color: var(--row-complete-text);
}
#sheet-table tbody tr.row-urgent .ci-ro,
#sheet-table tbody tr.row-urgent td:first-child,
#sheet-table tbody tr.row-warning .ci-ro,
#sheet-table tbody tr.row-warning td:first-child,
#sheet-table tbody tr.row-complete .ci-ro,
#sheet-table tbody tr.row-complete td:first-child {
  background: transparent !important;
}

#sheet-table tbody td {
  padding: 1px;
  vertical-align: middle;
  border-right: 1.5px solid var(--border-strong);
  overflow: hidden;
}

/* Row number + delete cell */
#sheet-table tbody td:first-child {
  text-align: center;
  background: var(--bg-surface-2);
  border-right: 2px solid var(--border-strong);
  min-width: 38px;
  width: 38px;
}

.btn-del {
  background: none;
  border: none;
  color: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  transition: all .18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

tr:hover .btn-del { color: #bbb; }
.btn-del:hover    { color: #e53935 !important; background: #fee; transform: scale(1.12); }

/* Cell inputs */
.ci {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  transition: background .15s ease;
}

.ci:focus {
  background: rgba(232,184,109,.16);
  outline: 2px solid var(--gold-deep);
  outline-offset: -2px;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}

.ci-ro {
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary);
  cursor: default;
  font-style: italic;
}

.ci-calc {
  background: #fffde7 !important;
  color: #1a1a2e;
  font-weight: 700;
  text-align: right;
  cursor: default;
}
[data-theme="dark"] .ci-calc { background: #33301a !important; color: #f1f1f6; }

.ci-num { text-align: right; }
.ci-date { color-scheme: light; }
[data-theme="dark"] .ci-date { color-scheme: dark; }

.ci-text {
  display: block;
  padding: 7px 9px;
  font-size: 13px;
  color: var(--text-secondary);
  min-height: 34px;
  line-height: 1.4;
}

.row-num-txt {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  text-align: center;
  padding: 4px;
}

/* "⚡️" urgent-flag checkbox cell */
.ci-check {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 18px;
  accent-color: #c62828;
  cursor: pointer;
}
.ci-check:disabled { cursor: default; opacity: .45; }

/* Select cells — color-scheme + explicit option colors so the native
   dropdown popup (browser-rendered, not styleable via normal CSS)
   always keeps readable text on both light and dark surfaces. */
.cs {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  padding: 5px 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text-primary);
  color-scheme: light;
}
[data-theme="dark"] .cs { color-scheme: dark; }

.cs option {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.cs:focus {
  background: rgba(232,184,109,.16);
  outline: 2px solid var(--gold-deep);
  outline-offset: -2px;
  border-radius: 4px;
}

/* Column hidden by "Buyurtma yaratish" per-customer filter */
.col-hidden { display: none !important; }

/* Column widths */
.cw-sm   { min-width: 60px;  }
.cw-md   { min-width: 100px; }
.cw-lg   { min-width: 140px; }
.cw-xl   { min-width: 170px; }
.cw-date  { min-width: 136px; }
.cw-dd    { min-width: 150px; }
/* Wide column for the order descriptor dropdown in Yetkazish Tarixi */
.cw-order { min-width: 300px; }

/* Fixed pixel widths for the "Buyurtmalar" table columns. Edit the px
   values below directly — each is used identically by both the full
   "Buyurtmalar" table and the "Buyurtma yaratish" (per-customer) table,
   so they always stay in sync. */
.cw-3  { width: 40px;  min-width: 40px;  max-width: 40px;  }  /* № / Kun */
.cw-7  { width: 70px;  min-width: 70px;  max-width: 70px;  }  /* O'lchami / Buyurtma / Yetkazilgan */
.cw-12 { width: 115px; min-width: 115px; max-width: 115px; }  /* Obrabotka */
.cw-15 { width: 140px; min-width: 140px; max-width: 140px; }  /* Mahsulot / Izoh 1 / Izoh 2 */
.cw-20 { width: 180px; min-width: 180px; max-width: 180px; }  /* Buyurtmachi */

/* ================================================
   MODAL
   ================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,10,20,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  backdrop-filter: blur(4px);
  animation: overlayIn .22s ease;
}

.modal-card {
  background: var(--bg-surface);
  border-radius: 20px;
  width: 420px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(232,184,109,.15);
  animation: modalIn .32s cubic-bezier(.2,.9,.3,1.1);
}

/* Fullscreen variant — used by "Buyurtma tanlash" */
.modal-card-full {
  width: 94vw;
  height: 90vh;
  max-width: 1400px;
  max-height: none;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
}
.modal-body-full {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 30px 32px;
}
.modal-body-full .customer-browse-list { min-height: 0; }
.modal-footer-full {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 32px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface-2);
}
.modal-footer-full .btn-save { padding: 10px 28px; }

.modal-header {
  background: linear-gradient(120deg, var(--navy-1), var(--navy-2) 60%, var(--navy-3));
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(232,184,109,.35);
}
.modal-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: .2px;
}
.modal-header h3 i { color: var(--gold); }

.modal-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 9px;
  border-radius: 6px;
  transition: all .18s ease;
}
.modal-close:hover { color: #fff; background: rgba(255,255,255,.14); transform: rotate(90deg); }

.modal-body { padding: 26px; }
.modal-body h4 { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; font-weight: 400; }

.modal-body .form-group { margin-bottom: 15px; }
.modal-body .form-group label { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .6px; }
.modal-body .form-group input { width: 100%; padding: 11px 15px; border: 2px solid var(--border-color); border-radius: 10px; font-size: 14px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; background: var(--bg-surface); color: var(--text-primary); }
.modal-body .form-group input:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(201,162,39,.12); }

/* Select — same dark-mode fix as .cs above applied here too */
.modal-select {
  width: 100%;
  padding: 11px 15px;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
  color-scheme: light;
}
[data-theme="dark"] .modal-select { color-scheme: dark; }
.modal-select option {
  background: var(--bg-surface);
  color: var(--text-primary);
}
.modal-select:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(201,162,39,.12); }

/* ================================================
   TOAST
   ================================================ */
.toast {
  position: fixed;
  bottom: 26px;
  right: 26px;
  padding: 13px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-2), var(--navy-3));
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  z-index: 9999;
  animation: toastIn .3s cubic-bezier(.25,1.3,.4,1);
  max-width: 320px;
}
.toast.ok   { background: linear-gradient(135deg, #2e7d32, #1b5e20); }
.toast.err  { background: linear-gradient(135deg, #c62828, #8e1616); }
.toast.info { background: linear-gradient(135deg, #1565c0, #0d3d80); }

/* ================================================
   KEYFRAME ANIMATIONS
   ================================================ */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes cardIn {
  from { opacity: 0; transform: translateY(32px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rowIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

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

@keyframes shakeIn {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, -18px) scale(1.08); }
}

@keyframes gradientDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shimmerBar {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes urgentPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(198,40,40,.4); }
  50% { box-shadow: 0 4px 24px rgba(198,40,40,.7); }
}

/* -------- home-card luxury animations -------- */
@keyframes auraSpin {
  to { transform: rotate(360deg); }
}

@keyframes goldMedallionPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(201,162,39,.45), 0 0 0 4px rgba(255,255,255,.55) inset; }
  50%      { box-shadow: 0 6px 26px rgba(201,162,39,.72), 0 0 0 4px rgba(255,255,255,.55) inset; }
}

@keyframes navyDrift {
  0%, 100% { transform: translate(0,0) scale(1); opacity: .55; }
  50%      { transform: translate(-10px,10px) scale(1.25); opacity: .95; }
}

@keyframes iconFloatSubtle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes ringPulse {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: .8; }
  100% { transform: translate(-50%,-50%) scale(9); opacity: 0; }
}