/* ═══════════════════════════════════════
   iqayaBoutique Admin Panel — Styles
   ═══════════════════════════════════════ */

:root {
  --bg:       #0F0A07;
  --bg2:      #1A1108;
  --bg3:      #251A0D;
  --card:     #1F1409;
  --border:   rgba(179,139,89,0.2);
  --gold:     #B38B59;
  --gold2:    #D4AF37;
  --burgundy: #C4562A;
  --success:  #2DBD6E;
  --danger:   #E0463A;
  --warning:  #F5A623;
  --text:     #F5EDE0;
  --text-mid: #C4A882;
  --text-lt:  #8A7260;
  --radius:   12px;
  --trans:    all 0.25s ease;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Montserrat',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:'Montserrat',sans-serif; }
input, select, textarea { font-family:'Montserrat',sans-serif; }

/* ── Animations ── */
@keyframes fadeUp    { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes spinning  { to { transform:rotate(360deg); } }

/* ════════════════════════════
   LOGIN SCREEN
════════════════════════════ */
#login-screen {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(139,58,26,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(179,139,89,0.1) 0%, transparent 50%),
    var(--bg);
  padding:20px;
}
.login-box {
  background:var(--card); border:1.5px solid var(--border);
  border-radius:20px; padding:44px 40px;
  width:100%; max-width:420px;
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
  animation:fadeUp 0.4s ease;
}
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo .shield {
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,rgba(196,86,42,0.2),rgba(179,139,89,0.2));
  border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px; font-size:1.4rem; color:var(--gold);
}
.login-logo h1 { font-family:'Playfair Display',serif; font-size:1.5rem; color:var(--gold2); margin-bottom:4px; }
.login-logo span { font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-lt); }

/* Step dots */
.step-dots { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:26px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--bg3); border:1.5px solid var(--border); transition:var(--trans); }
.dot.active { background:var(--gold); border-color:var(--gold); width:24px; border-radius:4px; }
.dot.done   { background:var(--success); border-color:var(--success); }

/* Steps */
.step { display:none; }
.step.active { display:block; animation:fadeUp 0.3s ease; }
.step h2 { font-size:1.05rem; font-weight:600; margin-bottom:6px; }
.step p  { font-size:0.82rem; color:var(--text-mid); margin-bottom:20px; line-height:1.6; }

/* Fields */
.field { margin-bottom:14px; }
.field label { display:block; font-size:0.7rem; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:var(--text-mid); margin-bottom:6px; }
.field-wrap { position:relative; }
.field-wrap input {
  width:100%; padding:12px 42px 12px 14px;
  background:var(--bg3); border:1.5px solid var(--border);
  border-radius:8px; color:var(--text); font-size:0.9rem; transition:var(--trans);
}
.field-wrap input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(179,139,89,0.1); }
.fi { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--text-lt); font-size:0.85rem; pointer-events:none; }
.fi.toggle { pointer-events:all; cursor:pointer; transition:var(--trans); }
.fi.toggle:hover { color:var(--gold); }

/* Login button */
.login-btn {
  width:100%; padding:13px; border-radius:8px; border:none;
  background:linear-gradient(135deg,var(--burgundy),var(--gold));
  color:white; font-weight:700; font-size:0.95rem; transition:var(--trans);
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px;
}
.login-btn:hover:not(:disabled) { opacity:0.9; transform:translateY(-1px); }
.login-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

/* Error box */
.err-box {
  background:rgba(224,70,58,0.1); border:1px solid rgba(224,70,58,0.3);
  border-radius:8px; padding:10px 14px; font-size:0.82rem; color:#FF8A80;
  margin-bottom:14px; display:none; align-items:center; gap:8px;
}
.err-box.show { display:flex; }

/* OTP row */
.otp-row { display:flex; gap:8px; justify-content:center; margin:18px 0; }
.otp-row input {
  width:46px; height:54px; text-align:center;
  font-size:1.3rem; font-weight:700;
  background:var(--bg3); border:1.5px solid var(--border);
  border-radius:8px; color:var(--text); transition:var(--trans);
}
.otp-row input:focus { border-color:var(--gold); outline:none; }
.otp-row input.filled { border-color:rgba(179,139,89,0.5); }

/* Back link */
.back-link {
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.8rem; color:var(--text-lt); cursor:pointer;
  border:none; background:none; margin-bottom:14px; transition:var(--trans);
}
.back-link:hover { color:var(--text); }

/* ════════════════════════════
   ADMIN LAYOUT
════════════════════════════ */
#admin-screen { display:none; min-height:100vh; }
#admin-screen.show { display:flex; }

/* Sidebar */
.sidebar {
  width:238px; flex-shrink:0;
  background:var(--card); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sb-header { padding:20px 16px; border-bottom:1px solid var(--border); }
.sb-brand { font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--gold2); }
.sb-brand small { display:block; font-family:'Montserrat',sans-serif; font-size:0.6rem; color:var(--text-lt); letter-spacing:1.5px; text-transform:uppercase; margin-top:2px; }
.sb-user { margin-top:12px; display:flex; align-items:center; gap:8px; background:rgba(179,139,89,0.07); border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.sb-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--burgundy),var(--gold)); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; color:white; flex-shrink:0; }
.sb-email { font-size:0.7rem; color:var(--text-mid); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-nav { flex:1; padding:12px 8px; display:flex; flex-direction:column; gap:2px; }
.sb-section { font-size:0.6rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-lt); padding:10px 10px 3px; margin-top:4px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:0.83rem; font-weight:500; color:var(--text-mid); cursor:pointer; transition:var(--trans); border:none; background:none; text-align:left; width:100%; }
.nav-item i { width:16px; text-align:center; font-size:0.87rem; }
.nav-item:hover { background:rgba(179,139,89,0.08); color:var(--text); }
.nav-item.active { background:rgba(179,139,89,0.13); color:var(--gold); font-weight:600; }
.sb-footer { padding:12px 8px; border-top:1px solid var(--border); }
.logout-btn { display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px; border-radius:8px; background:rgba(224,70,58,0.08); border:1px solid rgba(224,70,58,0.2); color:#FF8A80; font-size:0.82rem; font-weight:500; cursor:pointer; transition:var(--trans); }
.logout-btn:hover { background:rgba(224,70,58,0.18); }

/* Main area */
.main-area { flex:1; overflow-y:auto; display:flex; flex-direction:column; }
.top-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 24px; border-bottom:1px solid var(--border); background:var(--card); position:sticky; top:0; z-index:50; gap:12px; }
.top-bar h2 { font-size:1.05rem; font-weight:600; }
.top-bar-r { display:flex; align-items:center; gap:8px; }
.live-pill { display:inline-flex; align-items:center; gap:5px; background:rgba(45,189,110,0.1); border:1px solid rgba(45,189,110,0.2); color:var(--success); font-size:0.7rem; font-weight:600; padding:4px 10px; border-radius:50px; }
.live-pill .d { width:6px; height:6px; border-radius:50%; background:var(--success); }

/* Pages */
.page { display:none; padding:24px; }
.page.active { display:block; }

/* Stats */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:13px; margin-bottom:22px; }
.stat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px 18px; transition:var(--trans); }
.stat-card:hover { border-color:rgba(179,139,89,0.4); }
.stat-label { font-size:0.67rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-lt); margin-bottom:10px; display:flex; align-items:center; gap:5px; }
.stat-label i { color:var(--gold); }
.stat-value { font-family:'Playfair Display',serif; font-size:2.2rem; font-weight:700; color:var(--gold2); line-height:1; }
.stat-sub { font-size:0.73rem; color:var(--text-lt); margin-top:5px; }
.q-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:16px; }
.q-card h3 { font-size:0.92rem; font-family:'Playfair Display',serif; color:var(--text-mid); margin-bottom:12px; }
.q-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Buttons */
.toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.search-box { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:8px 13px; flex:1; max-width:280px; }
.search-box i { color:var(--text-lt); font-size:0.82rem; flex-shrink:0; }
.search-box input { background:none; border:none; color:var(--text); font-size:0.83rem; outline:none; width:100%; }
.search-box input::placeholder { color:var(--text-lt); }
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:8px; border:none; font-size:0.82rem; font-weight:600; cursor:pointer; transition:var(--trans); white-space:nowrap; }
.btn-gold { background:var(--gold); color:var(--bg); }
.btn-gold:hover { background:var(--gold2); }
.btn-ghost { background:rgba(179,139,89,0.08); border:1px solid var(--border); color:var(--text-mid); }
.btn-ghost:hover { background:rgba(179,139,89,0.15); color:var(--text); }
.btn-danger { background:rgba(224,70,58,0.1); border:1px solid rgba(224,70,58,0.25); color:#FF8A80; }
.btn-danger:hover { background:rgba(224,70,58,0.2); }
.btn-sm { padding:6px 11px; font-size:0.75rem; }

/* Table */
.tw { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:0.65rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-lt); padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:13px 14px; border-bottom:1px solid rgba(179,139,89,0.05); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(179,139,89,0.03); }
.prod-cell { display:flex; align-items:center; gap:12px; }
.pt { width:46px; height:54px; border-radius:6px; object-fit:cover; border:1px solid var(--border); flex-shrink:0; }
.pt-ph { width:46px; height:54px; border-radius:6px; background:var(--bg3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-lt); font-size:0.95rem; flex-shrink:0; }
.pn { font-weight:600; font-size:0.85rem; }
.pid { font-size:0.68rem; color:var(--text-lt); margin-top:2px; font-family:monospace; }
.price-main { font-family:'Playfair Display',serif; font-weight:700; color:var(--gold2); font-size:0.97rem; }
.price-old { text-decoration:line-through; font-size:0.7rem; color:var(--text-lt); font-family:'Montserrat',sans-serif; margin-left:3px; }
.cpill { display:inline-block; background:rgba(179,139,89,0.1); color:var(--gold); font-size:0.67rem; font-weight:700; padding:3px 9px; border-radius:50px; }
.ba { display:inline-flex; align-items:center; gap:4px; background:rgba(45,189,110,0.1); color:var(--success); font-size:0.68rem; font-weight:600; padding:4px 9px; border-radius:50px; }
.bh { display:inline-flex; align-items:center; gap:4px; background:rgba(138,114,96,0.1); color:var(--text-lt); font-size:0.68rem; font-weight:600; padding:4px 9px; border-radius:50px; }
.acts { display:flex; gap:6px; }
.empty-st { text-align:center; padding:54px 20px; color:var(--text-lt); }
.empty-st i { font-size:2rem; display:block; margin-bottom:10px; opacity:0.25; }
.empty-st p { font-size:0.86rem; }

/* Categories */
.cg { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:13px; }
.cc { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; text-align:center; transition:var(--trans); }
.cc:hover { border-color:rgba(179,139,89,0.35); }
.cc i { font-size:1.5rem; color:var(--gold); margin-bottom:10px; display:block; }
.cc-name { font-weight:600; font-size:0.88rem; margin-bottom:5px; }
.cc-count { font-size:0.76rem; color:var(--text-lt); }

/* Modals */
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.72); z-index:200; align-items:center; justify-content:center; backdrop-filter:blur(4px); padding:16px; }
.overlay.open { display:flex; animation:fadeIn 0.2s ease; }
.modal { background:var(--card); border:1px solid var(--border); border-radius:16px; width:100%; max-width:600px; max-height:92vh; overflow-y:auto; box-shadow:0 24px 80px rgba(0,0,0,0.6); animation:fadeUp 0.28s ease; }
.modal-hd { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--card); z-index:1; }
.modal-hd h3 { font-size:0.98rem; }
.mx { background:none; border:none; color:var(--text-mid); font-size:0.95rem; cursor:pointer; transition:var(--trans); padding:4px; }
.mx:hover { color:var(--danger); }
.modal-bd { padding:22px; }
.modal-ft { padding:13px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; background:var(--card); position:sticky; bottom:0; }
.mf { margin-bottom:15px; }
.mf label { display:block; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-mid); margin-bottom:6px; }
.mf input, .mf select, .mf textarea { width:100%; padding:10px 12px; background:var(--bg3); border:1.5px solid var(--border); border-radius:8px; color:var(--text); font-size:0.87rem; transition:var(--trans); }
.mf input:focus, .mf select:focus, .mf textarea:focus { outline:none; border-color:var(--gold); }
.mf textarea { resize:vertical; min-height:88px; }
.mf select { cursor:pointer; }
.mf-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mf-checks { display:flex; gap:18px; flex-wrap:wrap; margin-top:4px; }
.mf-check { display:flex; align-items:center; gap:7px; }
.mf-check input[type=checkbox] { width:15px; height:15px; accent-color:var(--gold); cursor:pointer; }
.mf-check label { font-size:0.82rem; color:var(--text-mid); cursor:pointer; margin:0; font-weight:400; }
.img-drop { border:2px dashed var(--border); border-radius:10px; padding:20px; text-align:center; cursor:pointer; transition:var(--trans); position:relative; overflow:hidden; }
.img-drop:hover { border-color:var(--gold); background:rgba(179,139,89,0.04); }
.img-drop input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.img-drop i { font-size:1.5rem; color:var(--text-lt); margin-bottom:7px; display:block; }
.img-drop p { font-size:0.79rem; color:var(--text-lt); }
.img-drop small { font-size:0.7rem; color:var(--text-lt); opacity:0.7; }
.previews { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pr-item { position:relative; }
.pr-item img { width:66px; height:78px; object-fit:cover; border-radius:7px; border:1.5px solid var(--border); display:block; }
.pr-rm { position:absolute; top:-5px; right:-5px; width:18px; height:18px; border-radius:50%; background:var(--danger); color:white; border:none; font-size:0.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ex-imgs .exlabel { font-size:0.7rem; color:var(--text-lt); margin:10px 0 6px; }
.ex-imgs .exrow { display:flex; gap:8px; flex-wrap:wrap; }
.ex-imgs img { width:66px; height:78px; object-fit:cover; border-radius:7px; border:1.5px solid var(--border); }
.confirm-modal { max-width:380px; }
.confirm-modal .modal-bd p { color:var(--text-mid); font-size:0.87rem; line-height:1.65; }
.hl { color:var(--gold); font-weight:600; }

/* Toast */
.toast { position:fixed; bottom:22px; right:22px; z-index:9999; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:13px 16px; display:flex; align-items:center; gap:10px; box-shadow:0 8px 32px rgba(0,0,0,0.4); font-size:0.83rem; max-width:300px; transform:translateY(60px); opacity:0; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); pointer-events:none; }
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { border-color:rgba(45,189,110,0.35); }
.toast.success i { color:var(--success); }
.toast.error { border-color:rgba(224,70,58,0.35); }
.toast.error i { color:var(--danger); }
.spin { animation:spinning 0.8s linear infinite; display:inline-block; }

/* Security rows */
.sec-row { display:flex; align-items:center; gap:10px; font-size:0.83rem; padding:8px 0; border-bottom:1px solid rgba(179,139,89,0.06); }
.sec-row:last-child { border-bottom:none; }
.sec-ok { color:var(--success); }

/* ── Mobile top bar ── */
.mob-topbar {
  display:none;
  align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:var(--card); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
.mob-brand { font-family:'Playfair Display',serif; font-size:1rem; color:var(--gold2); }
.mob-brand span { font-family:'Montserrat',sans-serif; font-size:0.6rem; color:var(--text-lt); letter-spacing:1.5px; text-transform:uppercase; display:block; }
.mob-menu-btn, .mob-logout {
  background:rgba(179,139,89,0.1); border:1px solid var(--border);
  color:var(--text-mid); border-radius:8px;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:0.9rem; cursor:pointer; transition:var(--trans);
}
.mob-menu-btn:hover, .mob-logout:hover { background:rgba(179,139,89,0.2); color:var(--text); }

/* Mobile nav overlay */
.mob-nav-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.5); z-index:200;
  backdrop-filter:blur(2px);
}
.mob-nav-overlay.open { display:block; }

/* Mobile sidebar slide-in */
.sidebar.mob-open {
  transform:translateX(0) !important;
  box-shadow:4px 0 40px rgba(0,0,0,0.4);
}

/* Icon picker */
.icon-picker {
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:8px;
}
.icon-opt {
  width:100%; aspect-ratio:1; border-radius:8px;
  background:var(--bg3); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--text-mid);
  cursor:pointer; transition:var(--trans);
}
.icon-opt:hover { border-color:var(--gold); color:var(--gold); }
.icon-opt.selected { background:rgba(179,139,89,0.15); border-color:var(--gold); color:var(--gold2); }

/* Category card actions */
.cc-actions { display:flex; gap:6px; justify-content:center; margin-top:12px; }

/* Hide col on mobile */
.hide-mob { }

/* Scrollable table on mobile */
.tw { overflow-x:auto; }

/* ── Responsive ── */
@media(max-width:768px) {
  /* Show mobile topbar, hide desktop topbar */
  .mob-topbar { display:flex; }
  .top-bar { display:none; }

  /* Sidebar becomes a drawer */
  #admin-screen { flex-direction:column; }
  .sidebar {
    position:fixed; left:0; top:0; bottom:0;
    transform:translateX(-100%);
    transition:transform 0.3s ease;
    z-index:250; height:100vh;
  }

  /* Main area takes full width */
  .main-area { width:100%; }

  /* Pages */
  .page { padding:16px; }

  /* Stats */
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .stat-value { font-size:1.8rem; }

  /* Quick actions */
  .q-actions { flex-direction:column; }
  .q-actions .btn, .q-actions a { width:100%; justify-content:center; }

  /* Login */
  .login-box { padding:28px 20px; }
  .otp-row input { width:38px; height:46px; font-size:1.1rem; gap:6px; }
  .otp-row { gap:6px; }

  /* Modal */
  .modal { border-radius:16px 16px 0 0; max-height:95vh; }
  .overlay { align-items:flex-end; padding:0; }
  .mf-row { grid-template-columns:1fr; }

  /* Table — hide less important cols */
  .hide-mob { display:none; }
  th, td { padding:10px 10px; }
  .pt { width:38px; height:44px; }

  /* Icon picker */
  .icon-picker { grid-template-columns:repeat(6,1fr); }

  /* Category grid */
  .cg { grid-template-columns:1fr 1fr; }

  /* Toolbar */
  .toolbar { flex-direction:column; align-items:stretch; }
  .toolbar .btn { justify-content:center; }
  .search-box { max-width:100%; }
}

@media(max-width:400px) {
  .stats-grid { grid-template-columns:1fr; }
  .otp-row input { width:34px; height:42px; font-size:1rem; }
  .otp-row { gap:5px; }
  .cg { grid-template-columns:1fr; }
}