/* ============================================================
   ERVEKA Admin Panel — Stylesheet
   ============================================================ */
:root{
  --gold:#E4B042;--gold-d:#B78C33;--bronze:#785C23;
  --ivory:#FBFAF7;--ink:#0D0B09;--plum:#593A4B;
  --line:#E8E3D8;--muted:#8a8070;--page:#F6F3EE;
  --ok:#2E7D52;--warn:#B8860B;--err:#B3261E;
  --ok-bg:#e8f5ee;--warn-bg:#fef8e7;--err-bg:#fdecea;
  --sidebar:220px;--top:54px;
  --serif:'Playfair Display',serif;--sans:'Montserrat',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);font-size:13px;background:var(--page);color:var(--ink);overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:13px}
img{display:block;max-width:100%}

/* ── LOGIN ─────────────────────────────────────────────────── */
#loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1613,#0D0B09);padding:20px}
.login-card{background:var(--ivory);border-radius:6px;padding:44px 40px;width:100%;max-width:400px;box-shadow:0 30px 70px rgba(0,0,0,.45);text-align:center}
.login-brand{font-family:var(--serif);font-size:26px;letter-spacing:.14em;color:var(--gold-d)}
.login-by{font-size:9px;letter-spacing:.22em;color:var(--bronze);margin:5px 0 3px}
.login-card h1{font-family:var(--serif);font-size:19px;font-weight:500;margin:24px 0 22px}
.login-msg{margin-top:12px;font-size:12px;padding:9px 12px;border-radius:3px;display:none}
.login-msg-err{background:var(--err-bg);color:var(--err);display:block}
.login-msg-ok{background:var(--ok-bg);color:var(--ok);display:block}
.login-hint{font-size:11px;color:var(--muted);margin-top:20px;line-height:1.7}

/* ── TOPBAR ────────────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--top);z-index:100;background:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 calc(var(--sidebar)+18px)}
.topbar-left{display:flex;align-items:center;gap:14px}
.page-title{color:#fff;font-size:14px;font-weight:500}
.search-box{display:flex;align-items:center;background:rgba(255,255,255,.09);border-radius:4px;padding:5px 11px;gap:6px}
.search-box input{background:none;border:none;color:#fff;width:180px;outline:none;font-size:12px}
.search-box input::placeholder{color:#6d6660}
.topbar-right{display:flex;align-items:center;gap:14px}
.notif-btn{position:relative;color:#c9c1b3;font-size:17px;padding:5px;cursor:pointer;display:flex}
.notif-badge{position:absolute;top:-3px;right:-3px;background:var(--err);color:#fff;font-size:9px;font-weight:700;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.user-pill{display:flex;align-items:center;gap:8px;cursor:pointer;color:#c9c1b3;font-size:12px;position:relative}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--gold-d);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ink);flex-shrink:0}
.user-dropdown{position:absolute;top:calc(100%+8px);right:0;background:#fff;border:1px solid var(--line);border-radius:5px;width:200px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:200;display:none;padding:8px 0}
.user-dropdown.open{display:block}
.user-dropdown .ud-info{padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.user-dropdown .ud-info .ud-name{font-weight:600;color:var(--ink);margin-bottom:2px}
.user-dropdown button{display:block;width:100%;padding:9px 14px;text-align:left;font-size:12px;color:var(--ink)}
.user-dropdown button:hover{background:var(--page)}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar);height:100vh;background:var(--ink);display:flex;flex-direction:column;z-index:101;border-right:1px solid rgba(255,255,255,.05)}
.sidebar-brand{height:var(--top);display:flex;align-items:center;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}
.brand-name{font-family:var(--serif);font-size:17px;letter-spacing:.1em;color:var(--gold)}
.brand-sub{font-size:8px;letter-spacing:.2em;color:var(--bronze);margin-top:2px}
.sidebar-scroll{flex:1;overflow-y:auto;padding:10px 0}
.sidebar-scroll::-webkit-scrollbar{width:3px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:#3a3530}
.nav-grp{font-size:9px;letter-spacing:.18em;color:#504840;padding:12px 18px 5px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 18px;color:#9c9384;font-size:12px;cursor:pointer;border-left:2px solid transparent;transition:.15s;user-select:none}
.nav-item:hover{color:#e8e0d0;background:rgba(255,255,255,.04)}
.nav-item.active{color:#fff;border-left-color:var(--gold);background:rgba(228,176,66,.09)}
.nav-item svg{width:14px;height:14px;flex-shrink:0;opacity:.65}
.nav-item.active svg,.nav-item:hover svg{opacity:1}

/* ── MAIN ──────────────────────────────────────────────────── */
#appShell main{margin-left:var(--sidebar);margin-top:var(--top);padding:22px 24px;min-height:calc(100vh - var(--top))}
.page{display:none}
.page.active{display:block}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.page-head h2{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.2}
.page-head p{color:var(--muted);font-size:12px;margin-top:3px}
.flex-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── FORM FIELDS ───────────────────────────────────────────── */
.field{margin-bottom:13px}
.field label,.label{display:block;font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:600;margin-bottom:6px}
.field-input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:3px;background:#fff;transition:.15s}
.field-input:focus{outline:none;border-color:var(--gold)}
.field-input.err{border-color:var(--err)}
.field-hint{font-size:11px;color:var(--muted);margin-top:4px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.g-60-40{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.g-40-60{display:grid;grid-template-columns:1fr 1.5fr;gap:14px}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:3px;font-size:11px;letter-spacing:.08em;font-weight:600;cursor:pointer;transition:.18s;border:1px solid transparent}
.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-primary:hover{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--page)}
.btn-danger{background:transparent;border-color:#e0b4b0;color:var(--err)}
.btn-danger:hover{background:var(--err);border-color:var(--err);color:#fff}
.btn-sm{padding:5px 11px;font-size:11px}
.btn-full{width:100%;justify-content:center}

/* ── PANELS ────────────────────────────────────────────────── */
.panel{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:16px}
.panel-head{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.panel-head h3{font-size:11px;letter-spacing:.09em;font-weight:700}
.panel-body{padding:16px}
.section-sep{height:1px;background:var(--line);margin:14px 0}

/* ── KPI CARDS ─────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px}
.card .lbl{font-size:10px;letter-spacing:.1em;color:var(--muted);font-weight:600}
.card .val{font-size:22px;font-weight:500;font-family:var(--serif);margin-top:6px}
.card .chg{font-size:11px;margin-top:4px}
.chg.up{color:var(--ok)}.chg.dn{color:var(--err)}.chg.flat{color:var(--muted)}

/* KPI ticker */
.ticker-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px}
.ticker-row::-webkit-scrollbar{height:3px}
.ticker-row::-webkit-scrollbar-thumb{background:var(--gold)}
.tick{background:#fff;border:1px solid var(--line);border-radius:5px;padding:10px 14px;white-space:nowrap;min-width:130px;flex-shrink:0}
.tick .tk{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.07em}
.tick .tv{font-size:17px;font-weight:500;font-family:var(--serif);margin-top:4px}
.tick .tc{font-size:11px;margin-top:3px}

/* ── TABLES ────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10px;letter-spacing:.1em;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid #f4f0e8;vertical-align:middle;font-size:12px}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#faf9f5}
.tname{font-weight:600}
.tsub{font-size:11px;color:var(--muted);margin-top:2px}
.text-right{text-align:right}
.text-muted{color:var(--muted)}
.text-sm{font-size:11px}
.fw{font-weight:600}
.fc-ok{color:var(--ok)}.fc-err{color:var(--err)}.fc-gold{color:var(--gold-d)}
.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}
.mt4{margin-top:4px}.mt8{margin-top:8px}

/* ── PILLS ─────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-err{background:var(--err-bg);color:var(--err)}
.pill-muted{background:#f0ede6;color:var(--muted)}
.pill-gold{background:#fdf3e0;color:var(--bronze)}
.tag{display:inline-block;padding:2px 7px;border-radius:3px;font-size:10px;background:#f0ede6;color:var(--bronze);font-weight:600}

/* ── PROGRESS BAR ──────────────────────────────────────────── */
.bar-wrap{background:#f0ede6;border-radius:2px;height:5px;width:100%;overflow:hidden}
.bar-fill{height:100%;border-radius:2px;background:var(--gold);transition:width .4s}

/* ── PRODUCT/IMAGE ─────────────────────────────────────────── */
.thumb{width:38px;height:46px;border-radius:3px;object-fit:cover;background:#f0ede6;border:1px solid var(--line)}
.product-img{width:38px;height:46px;border-radius:3px;background:linear-gradient(135deg,#f0ede6,#e8e3d8);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--muted);flex-shrink:0}

/* ── MODAL ─────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(13,11,9,.52);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:28px 16px;overflow-y:auto}
.modal.open{display:flex}
.modal-card{background:var(--ivory);border-radius:6px;width:100%;max-width:800px;box-shadow:0 30px 70px rgba(0,0,0,.3);margin:auto;position:relative}
.modal-card-sm{max-width:520px}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-family:var(--serif);font-size:18px;font-weight:500}
.modal-head .close-btn{font-size:22px;color:var(--muted);line-height:1;background:none;border:none;cursor:pointer}
.modal-head .close-btn:hover{color:var(--ink)}
.modal-body{padding:20px}
.modal-foot{padding:13px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;background:#fff}
.sec-t{font-size:10px;letter-spacing:.14em;color:var(--bronze);font-weight:700;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--line)}

/* Product variant rows */
.vrow{display:grid;grid-template-columns:1.1fr 1fr 1.15fr .7fr .8fr .85fr 34px;gap:8px;align-items:center;margin-bottom:8px}
.vhead{font-size:9px;letter-spacing:.1em;color:var(--muted);font-weight:600;margin-bottom:6px}
.vrow .field-input{padding:7px 9px}
.xbtn{background:none;border:none;color:var(--err);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:3px}
.xbtn:hover{background:var(--err-bg)}

/* Image cells */
.imgs-wrap{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.imgcell{position:relative;width:76px}
.imgcell img{width:76px;height:96px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.pri-label{position:absolute;bottom:3px;left:3px;background:var(--gold);color:var(--ink);font-size:8px;padding:2px 5px;border-radius:2px;font-weight:700}
.del-btn{position:absolute;top:-7px;right:-7px;background:var(--err);color:#fff;border:none;width:20px;height:20px;border-radius:50%;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.drop-zone{border:1px dashed var(--line);border-radius:4px;padding:16px;text-align:center;color:var(--muted);font-size:12px;cursor:pointer;background:#fff;margin-top:8px}
.drop-zone:hover{border-color:var(--gold);color:var(--bronze)}

/* ── NOTIFICATION PANEL ────────────────────────────────────── */
.notif-panel{position:fixed;top:var(--top);right:0;width:320px;height:calc(100vh - var(--top));background:#fff;border-left:1px solid var(--line);z-index:90;transform:translateX(100%);transition:.25s;overflow-y:auto;display:flex;flex-direction:column}
.notif-panel.open{transform:translateX(0)}
.notif-panel-head{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.notif-panel-head strong{font-size:13px}
.notif-item{padding:11px 14px;border-bottom:1px solid #f4f0e8;cursor:pointer;display:flex;gap:10px;align-items:flex-start}
.notif-item:hover{background:var(--page)}
.notif-item.read{opacity:.6}
.notif-dot{width:8px;height:8px;border-radius:50%;margin-top:3px;flex-shrink:0}
.notif-content{flex:1}
.notif-title{font-size:12px;font-weight:600;margin-bottom:2px}
.notif-body{font-size:12px;color:var(--muted);line-height:1.45}
.notif-meta{font-size:10px;color:var(--muted);margin-top:3px}
.notif-unread-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:5px}
.notif-overlay{position:fixed;inset:0;z-index:89;display:none}
.notif-overlay.open{display:block}

/* ── DATE FILTER ───────────────────────────────────────────── */
.date-filter{display:flex;gap:5px;flex-wrap:wrap}
.date-btn{padding:5px 10px;border-radius:3px;font-size:11px;border:1px solid var(--line);color:var(--muted);background:#fff;cursor:pointer;white-space:nowrap}
.date-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.date-btn:hover:not(.active){border-color:var(--muted)}

/* ── CHARTS ────────────────────────────────────────────────── */
.chart-wrap{position:relative;height:200px;margin-top:8px}
.chart-wrap-lg{position:relative;height:240px;margin-top:8px}
.chart-wrap-sm{position:relative;height:130px;margin-top:6px}

/* ── SOCIAL ────────────────────────────────────────────────── */
.sc-icon{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;flex-shrink:0}
.sc-ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.sc-fb{background:#1877f2}
.sc-li{background:#0a66c2}
.sc-pi{background:#e60023}
.sc-tt{background:#000}
.sk{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.07em}
.sv{font-size:16px;font-weight:500;margin-top:3px}

/* ── ADS ───────────────────────────────────────────────────── */
.ad-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px;margin-bottom:10px}
.ad-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;gap:8px}
.ad-name{font-weight:600;font-size:13px}
.ad-metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.am-k{font-size:10px;color:var(--muted);letter-spacing:.07em}
.am-v{font-size:14px;font-weight:500;margin-top:3px}

/* ── FUNNEL ────────────────────────────────────────────────── */
.funnel{display:flex;gap:0;align-items:center;background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:14px;overflow-x:auto}
.fn{flex:1;text-align:center;padding:8px 4px;position:relative;min-width:80px}
.fn::after{content:'→';position:absolute;right:-10px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--muted)}
.fn:last-child::after{display:none}
.fn .fv{font-size:15px;font-weight:600}
.fn .fk{font-size:9px;color:var(--muted);margin-top:3px;letter-spacing:.08em}

/* ── FINANCIALS ────────────────────────────────────────────── */
.fin-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.fin-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px}
.fin-card .fl{font-size:10px;color:var(--muted);letter-spacing:.1em;font-weight:600}
.fin-card .fv{font-size:20px;font-weight:500;font-family:var(--serif);margin-top:6px}

/* ── CHANNEL ROWS ──────────────────────────────────────────── */
.ch-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f4f0e8}
.ch-row:last-child{border-bottom:none}
.ch-name{font-weight:500;font-size:12px;display:flex;align-items:center;gap:8px;min-width:90px}
.ch-bar-wrap{flex:1;margin:0 12px}
.ch-val{font-size:12px;font-weight:600;color:var(--ink);min-width:40px;text-align:right}

/* ── STORE STATUS ──────────────────────────────────────────── */
.row-between{display:flex;align-items:center;justify-content:space-between}

/* ── EMPTY / LOADING ───────────────────────────────────────── */
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.em-icon{font-size:30px;margin-bottom:10px}
.em-t{font-weight:600;color:var(--ink);margin-bottom:5px;font-size:14px}
.em-s{font-size:12px;margin-bottom:14px}
.loading{padding:32px;text-align:center;color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:center;gap:10px}
.spinner{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── INFO BANNER ───────────────────────────────────────────── */
.info-banner{background:var(--warn-bg);border:1px solid #f0d090;border-radius:4px;padding:8px 12px;font-size:11px;color:var(--warn);margin-top:10px}

/* ── TOAST ─────────────────────────────────────────────────── */
.toast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:#fff;padding:12px 20px;border-radius:5px;font-size:13px;z-index:500;transform:translateY(70px);opacity:0;transition:.3s;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}
.toast.toast-err{background:var(--err)}
.toast.toast-warn{background:var(--warn)}

/* ── PLATFORMS CHECKBOXES ──────────────────────────────────── */
.platform-checks{display:flex;gap:12px;flex-wrap:wrap}
.platform-checks label{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}

/* ── PROD BAR ROW ──────────────────────────────────────────── */
.prod-bar-row{margin-bottom:12px}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:900px){
  :root{--sidebar:0px}
  .sidebar{display:none}
  .topbar{padding:0 16px}
  #appShell main{margin-left:0;padding:16px 14px}
  .g2,.g3,.g-60-40,.g-40-60,.fin-summary,.ad-metrics{grid-template-columns:1fr}
  .vrow{grid-template-columns:1fr 1fr;gap:7px}.vhead{display:none}
  .ad-metrics{grid-template-columns:repeat(3,1fr)}
  .funnel{flex-wrap:wrap}
  .fn::after{display:none}
}