/* =========================================================
   ELUME Admin — Dashboard design system
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --bg:        #F8F4EF;
  --bg-raised: #FFFFFF;
  --gold:      #C9A66B;
  --ink:       #2B2622;
  --ink-soft:  #6B6259;
  --blush:     #D8B4A0;
  --cta:       #1A1714;
  --cta-2:     #B08D57;
  --danger:    #B5453D;
  --success:   #4C7A45;
  --line:      rgba(43,38,34,0.10);
  --shadow-sm: 0 2px 14px rgba(43,38,34,0.06);
  --shadow-md: 0 10px 34px rgba(43,38,34,0.10);
  --shadow-lg: 0 24px 60px rgba(43,38,34,0.16);
  --sidebar-w: 240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:'Poppins',sans-serif;font-size:14px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{font-family:'Playfair Display',serif;font-weight:600;color:var(--ink);margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:'Poppins',sans-serif;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:'Poppins',sans-serif;}
img{max-width:100%;display:block;}

.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-1{gap:8px;} .gap-2{gap:16px;}
.text-center{text-align:center;}
.mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;} .mt-4{margin-top:40px;}

/* ---------- Layout ---------- */
.admin-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--cta); color:rgba(248,244,239,.75);
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:100;
  transition:transform .35s var(--ease);
}
.sidebar-logo{ padding:26px 24px; border-bottom:1px solid rgba(248,244,239,.1); }
.sidebar-logo img{ height:34px; filter:brightness(0) invert(1); }
.sidebar-logo span{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-top:6px; }

.admin-nav{ flex:1; padding:18px 14px; overflow-y:auto; }
.admin-nav a{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:5px; font-size:13.5px;
  color:rgba(248,244,239,.65); margin-bottom:2px; transition:all .25s var(--ease);
}
.admin-nav a:hover{ background:rgba(248,244,239,.06); color:#fff; }
.admin-nav a.active{ background:var(--gold); color:#1A1714; font-weight:600; }
.admin-nav a svg{ flex-shrink:0; }
.admin-nav .nav-section{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(248,244,239,.35); padding:18px 14px 8px; }

.sidebar-foot{ padding:16px; border-top:1px solid rgba(248,244,239,.1); }
.sidebar-foot button, .sidebar-foot a{ width:100%; color:rgba(248,244,239,.6); font-size:12.5px; padding:10px; display:flex; align-items:center; gap:8px; border-radius:5px; }
.sidebar-foot button:hover, .sidebar-foot a:hover{ background:rgba(248,244,239,.06); color:#fff; }
.sidebar-foot a.active{ background:rgba(201,166,107,.15); color:var(--gold); }

.main{ flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh; }

.topbar{
  height:70px; background:var(--bg-raised); border-bottom:1px solid var(--line); display:flex; align-items:center;
  justify-content:space-between; padding:0 32px; position:sticky; top:0; z-index:50;
}
.topbar h1{ font-size:19px; }
.topbar .crumb{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.sidebar-toggle{ display:none; }
.admin-profile{ display:flex; align-items:center; gap:10px; }
.admin-profile .avatar{
  width:34px; height:34px; border-radius:50%; background:var(--blush); color:#fff; display:flex; align-items:center;
  justify-content:center; font-family:'Playfair Display'; font-weight:600;
}
.admin-profile .name{ font-size:13px; font-weight:500; }
.admin-profile .role{ font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }

.content{ padding:32px; flex:1; }

@media(max-width:900px){
  .sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:translateX(0); }
  .main{ margin-left:0; }
  .sidebar-toggle{ display:flex; }
  .content{ padding:20px; }
}

/* ---------- Cards / stats ---------- */
.card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:8px; padding:24px; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:1100px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
.stat-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:8px; padding:22px; position:relative; overflow:hidden; }
.stat-card .lbl{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.stat-card .num{ font-family:'Playfair Display'; font-size:28px; margin-top:8px; }
.stat-card .delta{ font-size:11.5px; color:var(--success); margin-top:6px; }
.stat-card .ic{ position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--cta-2); }

.section-title{ font-size:16px; margin-bottom:4px; }
.section-sub{ font-size:12.5px; color:var(--ink-soft); }
.page-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; flex-wrap:wrap; gap:12px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; font-weight:600; font-size:12.5px;
  padding:11px 20px; border-radius:5px; transition:all .3s var(--ease); white-space:nowrap;
}
.btn-primary{ background:var(--cta); color:#fff; }
.btn-primary:hover{ background:#000; }
.btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-gold{ background:var(--cta-2); color:#fff; }
.btn-gold:hover{ background:var(--gold); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ background:#963b34; }
.btn-sm{ padding:8px 14px; font-size:11.5px; }
.btn-icon{ width:34px; height:34px; padding:0; border-radius:5px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
.data-table th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft);
  padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; font-weight:600;
}
.data-table td{ padding:14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.data-table tr:hover td{ background:rgba(201,166,107,.04); }
.data-table .cell-img{ width:44px; height:52px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.skel{ height:14px; width:70%; background:#EFE8DE; border-radius:3px; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- Badges / pills ---------- */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; padding:5px 11px; border-radius:20px; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.badge-pending{ background:#F3E9D8; color:#B08D57; }
.badge-confirmed{ background:#E4EEFB; color:#3E6FB0; }
.badge-processing{ background:#EAE6F2; color:#6B5B95; }
.badge-shipped{ background:#FDEBD3; color:#C07A2B; }
.badge-delivered{ background:#E4EEE1; color:#4C7A45; }
.badge-cancelled{ background:#F7E2E0; color:#B5453D; }
.badge-paid{ background:#E4EEE1; color:#4C7A45; }
.badge-unpaid{ background:#F3E3E1; color:#B5453D; }
.badge-pending_review{ background:#F3E9D8; color:#B08D57; }
.badge-active{ background:#E4EEE1; color:#4C7A45; }
.badge-draft{ background:#EEE9E3; color:var(--ink-soft); }
.badge-archived{ background:#F3E3E1; color:#B5453D; }
.badge-approved{ background:#E4EEE1; color:#4C7A45; }
.badge-rejected{ background:#F3E3E1; color:#B5453D; }
.badge-coming_soon{ background:#EEE9E3; color:var(--ink-soft); }

/* ---------- Forms ---------- */
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:12px; color:var(--ink-soft); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:5px; font-size:13px; background:#fff; color:var(--ink);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:2px solid var(--cta); outline-offset:1px; }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:13px; }
.checkbox-row input{ width:auto; accent-color:var(--cta-2); }
.help-text{ font-size:11px; color:var(--ink-soft); margin-top:5px; }

.search-input{ position:relative; }
.search-input svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-soft); }
.search-input input{ padding-left:38px; min-width:240px; }

.color-chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.color-chip{ display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:20px; padding:5px 10px 5px 5px; font-size:11.5px; }
.color-chip .swatch-dot{ width:18px; height:18px; border-radius:50%; }
.color-chip button{ color:var(--ink-soft); font-size:14px; line-height:1; }
.color-input-row{ display:flex; gap:8px; }

.image-thumb-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.image-thumb{ position:relative; width:72px; height:86px; border-radius:5px; overflow:hidden; border:1px solid var(--line); }
.image-thumb img{ width:100%; height:100%; object-fit:cover; }
.image-thumb button{ position:absolute; top:3px; right:3px; width:18px; height:18px; background:rgba(26,23,20,.7); color:#fff; border-radius:50%; font-size:11px; line-height:1; }
.upload-drop{ border:1.5px dashed var(--line); border-radius:6px; padding:20px; text-align:center; font-size:12.5px; color:var(--ink-soft); cursor:pointer; transition:border-color .3s; }
.upload-drop:hover{ border-color:var(--cta-2); }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; z-index:300; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:40px 20px; }
.modal.open{ display:flex; }
.modal-scrim{ position:fixed; inset:0; background:rgba(26,23,20,.5); }
.modal-box{
  position:relative; background:#fff; border-radius:10px; padding:32px; width:100%; max-width:560px; box-shadow:var(--shadow-lg);
  animation:modalIn .3s var(--ease);
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:translateY(0); } }
.modal-box.wide{ max-width:760px; }
.modal-close{ position:absolute; top:20px; right:20px; color:var(--ink-soft); }
.modal-title{ font-size:19px; margin-bottom:22px; }

/* ---------- Tabs ---------- */
.filter-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.filter-tab{ padding:8px 16px; border-radius:20px; font-size:12px; border:1px solid var(--line); color:var(--ink-soft); }
.filter-tab.active{ background:var(--cta); color:#fff; border-color:var(--cta); }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
.empty-state svg{ margin-bottom:14px; opacity:.4; }

/* ---------- Login page ---------- */
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--cta); padding:20px; }
.login-box{ background:var(--bg-raised); border-radius:10px; padding:44px; width:100%; max-width:400px; box-shadow:var(--shadow-lg); }
.login-box img{ height:44px; margin:0 auto 24px; filter:none; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--cta); color:#fff;
  padding:14px 24px; border-radius:5px; font-size:13px; display:flex; align-items:center; gap:10px; z-index:500;
  opacity:0; pointer-events:none; transition:all .4s var(--ease); box-shadow:var(--shadow-lg);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:24px; }
.pagination a{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); font-size:12.5px; border-radius:5px; }
.pagination a.active,.pagination a:hover{ background:var(--cta); color:#fff; border-color:var(--cta); }