/**
 * File:     admin/css/dashboard.css
 * Location: /admin/css/dashboard.css
 * Role:     Admin dashboard stylesheet – light pastel palette:
 *           orange #f5820a · green #1a9140 · red #d42b2b · black #111111
 * Version:  1.0.0
 * History:
 *   1.0.0 – Extracted from monolithic dashboard.php; full pastel restyle
 */

:root{
  --bg:#f7f5f2; --bg-w:#ffffff; --bg-h:#f0ede8;
  --sb:#1a1a1a; --brd:#e3ddd6; --brd2:#cdc7bf;
  --tx:#111111; --tx2:#4a4540; --tx3:#9a9590;
  --or:#f5820a; --or-d:#d46c00; --or-l:#fff5e6; --or-m:#fcd5a0; --or-xs:#fef8f0;
  --gn:#1a9140; --gn-d:#136e30; --gn-l:#e8f7ee; --gn-m:#9dd8b4; --gn-xs:#f0fbf4;
  --rd:#d42b2b; --rd-d:#aa1f1f; --rd-l:#fdeaea; --rd-m:#f0a8a8;
  --sw:222px; --th:54px; --r:6px; --rl:10px;
  --sans:'IBM Plex Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
  --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh2:0 4px 14px rgba(0,0,0,.10);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);font-size:14px;background:var(--bg);
     color:var(--tx);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}

/* SIDEBAR */
.sb{position:fixed;top:0;left:0;bottom:0;width:var(--sw);
    background:var(--sb);display:flex;flex-direction:column;
    z-index:300;transition:transform .25s;box-shadow:2px 0 12px rgba(0,0,0,.15)}
.sb-logo{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.sb-brand{font-size:15px;font-weight:700;color:#f5f3f0}
.sb-brand em{color:var(--or);font-style:normal}
.sb-ver{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.2);margin-top:3px}
.sb-nav{padding:10px 0;flex:1;overflow-y:auto}
.sb-link{display:flex;align-items:center;gap:10px;padding:10px 20px;
         font-size:12px;font-weight:500;color:rgba(255,255,255,.42);
         border-left:3px solid transparent;transition:all .12s;cursor:pointer}
.sb-link:hover{color:rgba(255,255,255,.78);background:rgba(255,255,255,.05)}
.sb-link.on{color:var(--or);border-left-color:var(--or);background:rgba(245,130,10,.10)}
.sb-link i{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.sb-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.07);
         display:flex;flex-direction:column;gap:6px}

/* MAIN */
.mw{margin-left:var(--sw);min-height:100vh;display:flex;flex-direction:column}
.tb{position:sticky;top:0;z-index:200;height:var(--th);
    background:var(--bg-w);border-bottom:1px solid var(--brd);box-shadow:var(--sh);
    padding:0 26px;display:flex;align-items:center;justify-content:space-between}
.tb-crumb{font-size:12px;color:var(--tx3);display:flex;align-items:center;gap:6px}
.tb-crumb strong{color:var(--tx);font-weight:600}
.pc{padding:28px 26px;flex:1}

/* KPI */
.kpi-g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.kpi{background:var(--bg-w);border:1px solid var(--brd);border-radius:var(--rl);
     padding:20px 22px;box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px}
.kpi.co::after{background:linear-gradient(90deg,var(--or),var(--or-d))}
.kpi.cg::after{background:linear-gradient(90deg,var(--gn),var(--gn-d))}
.kpi.cr::after{background:linear-gradient(90deg,var(--rd),var(--rd-d))}
.kpi.ck::after{background:var(--tx)}
.kpi-ico{width:36px;height:36px;border-radius:var(--r);display:flex;
         align-items:center;justify-content:center;font-size:16px;margin-bottom:14px}
.kpi-ico.co{background:var(--or-l);color:var(--or)}
.kpi-ico.cg{background:var(--gn-l);color:var(--gn)}
.kpi-ico.cr{background:var(--rd-l);color:var(--rd)}
.kpi-ico.ck{background:var(--bg-h);color:var(--tx2)}
.kpi-lbl{font-size:10px;font-weight:700;text-transform:uppercase;
         letter-spacing:.1em;color:var(--tx3);margin-bottom:4px}
.kpi-val{font-family:var(--mono);font-size:32px;font-weight:500;
         line-height:1;color:var(--tx);letter-spacing:-.02em}
.kpi-sub{font-size:10px;color:var(--tx3);margin-top:5px}

/* CARD */
.crd{background:var(--bg-w);border:1px solid var(--brd);
     border-radius:var(--rl);box-shadow:var(--sh);overflow:hidden}
.crd-h{padding:13px 20px;border-bottom:1px solid var(--brd);
       display:flex;align-items:center;justify-content:space-between;
       font-size:10px;font-weight:700;text-transform:uppercase;
       letter-spacing:.1em;color:var(--tx3)}

/* TABLE */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
        color:var(--tx3);padding:10px 18px;border-bottom:1px solid var(--brd);
        white-space:nowrap;background:var(--bg)}
.tbl td{font-size:12px;padding:11px 18px;border-bottom:1px solid var(--brd);
        vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--bg)}
.tbl-resp{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* THUMBNAIL */
.thumb{width:44px;height:44px;border-radius:var(--r);background:var(--bg);
       border:1px solid var(--brd);flex-shrink:0;overflow:hidden;
       display:flex;align-items:center;justify-content:center;
       color:var(--tx3);font-size:16px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
     padding:9px 18px;border-radius:var(--r);font-family:var(--sans);
     font-size:12px;font-weight:600;cursor:pointer;border:none;
     transition:all .12s;white-space:nowrap;line-height:1}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-sm{padding:7px 14px;font-size:11px}
.btn-xs{padding:5px 10px;font-size:10px}
.btn-ic{width:32px;height:32px;padding:0;border-radius:var(--r)}
.btn-or{background:var(--or);color:#fff;box-shadow:0 2px 8px rgba(245,130,10,.28)}
.btn-or:hover:not(:disabled){background:var(--or-d)}
.btn-gn{background:var(--gn);color:#fff;box-shadow:0 2px 8px rgba(26,145,64,.22)}
.btn-gn:hover:not(:disabled){background:var(--gn-d)}
.btn-rd{background:var(--rd-l);color:var(--rd-d);border:1px solid var(--rd-m)}
.btn-rd:hover:not(:disabled){background:var(--rd-m)}
.btn-gh{background:var(--bg-w);color:var(--tx2);border:1px solid var(--brd2)}
.btn-gh:hover:not(:disabled){background:var(--bg-h);color:var(--tx)}

/* BADGES */
.bdg{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);
     font-size:9px;font-weight:600;padding:3px 9px;border-radius:20px;
     text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.bdg-on{background:var(--gn-l);color:var(--gn-d);border:1px solid var(--gn-m)}
.bdg-dr{background:var(--or-l);color:var(--or-d);border:1px solid var(--or-m)}
.bdg-ai{background:var(--gn-xs);color:var(--gn-d);border:1px solid var(--gn-m)}
.bdg-mn{background:var(--bg);color:var(--tx3);border:1px solid var(--brd)}

/* FORM */
.fg{margin-bottom:20px}
.fl{display:block;margin-bottom:7px;font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.09em;color:var(--tx2)}
.fl small{text-transform:none;letter-spacing:0;font-size:10px;font-weight:400;color:var(--tx3)}
.fc{width:100%;padding:10px 14px;background:var(--bg-w);border:1.5px solid var(--brd);
    color:var(--tx);border-radius:var(--r);font-family:var(--sans);font-size:13px;
    transition:border-color .12s,box-shadow .12s;appearance:none;line-height:1.4}
.fc:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px var(--or-l)}
.fc::placeholder{color:var(--tx3)}
textarea.fc{resize:vertical;line-height:1.65}
select.fc{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;cursor:pointer}

/* WIZARD */
.wiz-tabs{display:flex;border-bottom:2px solid var(--brd);list-style:none;
          background:var(--bg);border-radius:var(--rl) var(--rl) 0 0;
          padding:0 6px;overflow-x:auto}
.wiz-tabs button{background:transparent;border:none;cursor:pointer;
                 padding:14px 22px;font-size:12px;font-weight:600;color:var(--tx3);
                 border-bottom:3px solid transparent;margin-bottom:-2px;
                 transition:all .12s;white-space:nowrap;
                 display:flex;align-items:center;gap:9px}
.wiz-tabs button:hover:not(.on){color:var(--tx)}
.wiz-tabs button.on{color:var(--or);border-bottom-color:var(--or)}
.wiz-tabs button.done .wiz-num{background:var(--gn);color:#fff}
.wiz-num{width:22px;height:22px;border-radius:50%;background:var(--brd);
         color:var(--tx3);font-family:var(--mono);font-size:10px;font-weight:700;
         display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s}
.wiz-tabs button.on .wiz-num{background:var(--or);color:#fff}
.wp{display:none;padding:28px 30px}
.wp.show{display:block}

/*
 * UPLOAD ZONE — fi-hidden rules:
 * MUST NOT have: display:none, visibility:hidden, pointer-events:none,
 *               overflow:hidden, z-index<0, width/height<44px
 * These all break the 'change' event or iOS capture= attribute.
 * SAFE: position:fixed far offscreen + opacity:0
 */
.fi-hidden{
  position:fixed;
  top:-2000px;
  left:-2000px;
  width:80px;
  height:40px;
  opacity:0;
}

.up-zone{display:block;border:2px dashed var(--brd2);border-radius:var(--rl);
         padding:36px 24px;text-align:center;cursor:pointer;background:var(--bg);
         transition:all .15s;user-select:none;-webkit-user-select:none}
.up-zone:hover,.up-zone.over{border-color:var(--or);background:var(--or-xs)}
.up-zone.busy{border-color:var(--or);background:var(--or-xs);cursor:wait;pointer-events:none}
.up-ico{font-size:2.8rem;color:var(--tx3);margin-bottom:12px;display:block;
        transition:color .15s,transform .2s}
.up-zone:hover .up-ico,.up-zone.over .up-ico{color:var(--or);transform:translateY(-3px)}
.up-ttl{font-size:15px;font-weight:600;color:var(--tx);margin-bottom:5px}
.up-sub{font-size:11px;color:var(--tx3)}
.up-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.prev-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
        gap:10px;margin-top:18px}
.prev-it{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;
         background:var(--bg);border:2px solid var(--brd);transition:border-color .12s}
.prev-it:hover{border-color:var(--or)}
.prev-it img{width:100%;height:100%;object-fit:cover;display:block}
.prev-main{position:absolute;top:5px;left:5px;background:var(--or);color:#fff;
           font-family:var(--mono);font-size:8px;font-weight:700;
           padding:2px 7px;border-radius:3px}
.prev-del{position:absolute;top:4px;right:4px;width:22px;height:22px;
          border-radius:50%;background:rgba(0,0,0,.65);color:#fff;border:none;
          font-size:12px;cursor:pointer;padding:0;
          display:flex;align-items:center;justify-content:center;transition:background .1s}
.prev-del:hover{background:var(--rd)}
.up-prog{height:4px;border-radius:4px;background:var(--brd);
         margin-top:12px;overflow:hidden;display:none}
.up-prog.on{display:block}
.up-fill{height:100%;background:linear-gradient(90deg,var(--or),var(--or-d));
         border-radius:4px;width:60%;animation:upslide 1.4s ease-in-out infinite}
@keyframes upslide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.up-stat{font-size:11px;font-weight:500;color:var(--tx3);
         margin-top:8px;min-height:18px;display:flex;align-items:center;gap:7px}
.up-stat.ok{color:var(--gn)}.up-stat.er{color:var(--rd)}.up-stat.nf{color:var(--or)}

/* LOG PANEL */
.log-wrap{margin-top:14px}
.log-toggle{background:transparent;border:1px solid var(--brd2);color:var(--tx3);
            font-size:10px;font-weight:600;padding:5px 12px;border-radius:var(--r);
            cursor:pointer;font-family:var(--mono);transition:all .12s}
.log-toggle:hover{border-color:var(--or);color:var(--or)}
.log-panel{margin-top:8px;background:#111;border-radius:var(--r);
           padding:10px 12px;font-family:var(--mono);font-size:10px;
           color:#aaa;max-height:240px;overflow-y:auto;display:none;
           border:1px solid #333;line-height:1.55}
.log-panel.show{display:block}
.log-line{padding:1px 0;border-bottom:1px solid rgba(255,255,255,.04);
          white-space:pre-wrap;word-break:break-all}
.log-line.ok{color:#4ade80}.log-line.er{color:#f87171}
.log-line.nf{color:#fb923c}.log-line.info{color:#93c5fd}.log-line.warn{color:#fbbf24}

/* AI BLOCK */
.ai-blk{margin-top:22px;padding:20px 22px;background:var(--gn-l);
        border:1.5px solid var(--gn-m);border-radius:var(--rl);
        display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;transition:opacity .2s}
.ai-blk.dim{opacity:.45;pointer-events:none}
.ai-blk-txt{flex:1;min-width:180px}
.ai-blk-txt strong{font-size:13px;color:var(--tx);display:block;margin-bottom:4px}
.ai-blk-txt small{font-size:11px;color:var(--tx2);line-height:1.55}
.ai-steps{display:none;flex-direction:column;gap:3px;margin-top:10px;width:100%}
.ai-steps.show{display:flex}
.ai-step{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--tx3);padding:3px 0}
.ai-step.done{color:var(--gn)}.ai-step.active{color:var(--or);font-weight:600}

/* PRICE TABLE */
.pt{width:100%;border-collapse:collapse;border:1.5px solid var(--brd);
    border-radius:var(--r);overflow:hidden}
.pt th{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
       color:var(--tx3);padding:10px 13px;background:var(--bg);
       border-bottom:1.5px solid var(--brd);text-align:left;white-space:nowrap}
.pt td{padding:5px 9px;border-bottom:1px solid var(--brd)}
.pt tbody tr:last-child td{border-bottom:none}
.pt .fc{background:transparent;border:none;padding:6px 8px;font-size:12px;border-radius:var(--r)}
.pt .fc:focus{background:var(--or-l);border:1.5px solid var(--or);box-shadow:none}

/* PRODUCT TILES */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:13px}
.pg-tile{background:var(--bg-w);border:1.5px solid var(--brd);border-radius:var(--rl);
         overflow:hidden;box-shadow:var(--sh);
         transition:transform .12s,box-shadow .12s,border-color .12s}
.pg-tile:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--or)}
.pg-img{height:136px;background:var(--bg);display:flex;align-items:center;
        justify-content:center;color:var(--tx3);font-size:2.2rem;overflow:hidden}
.pg-img img{width:100%;height:100%;object-fit:cover}
.pg-body{padding:11px 13px}
.pg-ttl{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;
        text-overflow:ellipsis;margin-bottom:4px}
.pg-meta{font-size:10px;color:var(--tx3)}
.pg-price{font-family:var(--mono);font-size:12px;color:var(--or);margin-top:5px}

/* VIEW TOGGLE */
.vt{display:flex;gap:2px;background:var(--bg);border:1.5px solid var(--brd);
    border-radius:var(--r);padding:3px}
.vt-btn{background:transparent;border:none;cursor:pointer;padding:5px 13px;
        border-radius:4px;font-size:11px;font-weight:600;color:var(--tx3);
        transition:all .1s;display:flex;align-items:center;gap:5px}
.vt-btn.on{background:var(--bg-w);color:var(--tx);box-shadow:var(--sh)}

/* TOAST */
.tw{position:fixed;bottom:22px;right:22px;z-index:9999;
    display:flex;flex-direction:column;gap:9px;pointer-events:none;max-width:360px}
.ti{background:var(--bg-w);border:1.5px solid var(--brd);border-radius:var(--rl);
    padding:13px 16px;font-size:12px;display:flex;align-items:flex-start;gap:11px;
    box-shadow:0 6px 24px rgba(0,0,0,.13);animation:tin .2s ease;pointer-events:all;
    border-left:4px solid}
.ti.ok{border-left-color:var(--gn)}.ti.er{border-left-color:var(--rd)}.ti.nf{border-left-color:var(--or)}
.ti-ico{font-size:16px;flex-shrink:0;margin-top:1px}
.ti-ico.ok{color:var(--gn)}.ti-ico.er{color:var(--rd)}.ti-ico.nf{color:var(--or)}
.ti-ttl{font-weight:700;color:var(--tx);line-height:1.3}
.ti-msg{font-size:11px;color:var(--tx2);margin-top:3px;line-height:1.4}
@keyframes tin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* MISC */
.div{border:none;border-top:1.5px solid var(--brd);margin:24px 0}
.spin{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;
      border-radius:50%;animation:sp .65s linear infinite;display:inline-block;flex-shrink:0}
@keyframes sp{to{transform:rotate(360deg)}}
.lbl-btn{cursor:pointer;user-select:none;-webkit-user-select:none}
.sb-bd{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299}
.mb-btn{display:none!important}
.al{padding:12px 16px;border-radius:var(--r);font-size:12px;font-weight:500;
    margin-bottom:18px;display:flex;align-items:center;gap:9px}
.al-ok{background:var(--gn-l);border:1.5px solid var(--gn-m);color:var(--gn-d)}
.al-er{background:var(--rd-l);border:1.5px solid var(--rd-m);color:var(--rd-d)}
.mono{font-family:var(--mono)}.muted{color:var(--tx3)}
.c-or{color:var(--or)}.c-gn{color:var(--gn)}.c-rd{color:var(--rd)}
.d-flex{display:flex}.gap-2{gap:8px}.align-center{align-items:center}
.flex-wrap{flex-wrap:wrap}.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}
.me-1{margin-right:4px}.me-2{margin-right:8px}
.fw-600{font-weight:600}.fw-700{font-weight:700}
.fs-10{font-size:10px}.fs-11{font-size:11px}.fs-12{font-size:12px}
.w-100{width:100%}.text-center{text-align:center}

@media(max-width:840px){
  .sb{transform:translateX(-100%)}
  .sb.open{transform:translateX(0);box-shadow:6px 0 24px rgba(0,0,0,.25)}
  .sb-bd.open{display:block}
  .mw{margin-left:0}
  .kpi-g{grid-template-columns:repeat(2,1fr)}
  .pc{padding:16px 14px}
  .tb{padding:0 14px}
  .mb-btn{display:flex!important}
  .wp{padding:20px 16px}
}
@media(max-width:480px){
  .kpi-g{grid-template-columns:1fr 1fr}
  .kpi-val{font-size:24px}
}