/* ═══════════════════════════════════════════════════════════
   Dushanbe Carpets — Admin styling (dark + gold)
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#0d0d0f; --panel:#16161a; --panel2:#1d1d22;
  --gold:#c9a24b; --gold2:#e7c878; --text:#ece8e0;
  --muted:#9a958c; --line:#2a2a30; --danger:#c0483b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Segoe UI',system-ui,Arial,sans-serif;line-height:1.5}
h1,h2{font-weight:600;letter-spacing:.3px}
a{color:var(--gold2);text-decoration:none}
code{background:#000;padding:2px 6px;border-radius:4px;color:var(--gold2)}

/* ── Auth pages ── */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;
  background:radial-gradient(1200px 600px at 50% -10%,#1c1a14,transparent),var(--bg)}
.auth-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:36px 30px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.auth-logo{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.auth-card h1{margin:0 0 4px;font-size:24px}
.auth-sub,.auth-note{color:var(--muted);font-size:14px;margin:0 0 20px}
.auth-note code{font-size:12px}
.auth-card form{text-align:left}
.auth-card label{display:block;font-size:12px;color:var(--muted);margin:14px 0 6px}
.auth-card input{width:100%}
.auth-error{background:rgba(192,72,59,.15);border:1px solid var(--danger);color:#f1b3ab;
  padding:10px 12px;border-radius:8px;font-size:14px;margin-bottom:14px}
.auth-success{background:rgba(120,180,90,.12);border:1px solid #5e7d44;color:#cfe6b3;
  padding:12px;border-radius:8px;margin-bottom:14px}
.auth-back{display:inline-block;margin-top:18px;font-size:13px;color:var(--muted)}

/* ── Inputs / buttons ── */
input,select{background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:11px 12px;border-radius:8px;font-size:14px;width:100%;outline:none}
input:focus{border-color:var(--gold)}
input[readonly]{color:var(--gold2);background:#101013}
.btn-gold{display:inline-block;width:100%;margin-top:22px;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1407;border:none;
  padding:12px 18px;border-radius:8px;font-weight:700;font-size:15px;letter-spacing:.3px}
.btn-gold:hover{filter:brightness(1.08)}
.btn-ghost{display:inline-block;margin-top:22px;margin-left:10px;padding:12px 18px;border-radius:8px;
  border:1px solid var(--line);color:var(--muted)}
.btn-sm{font-size:12px;padding:6px 12px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);cursor:pointer}
.btn-sm.danger{border-color:#5a2f2a;color:#e7a59b}
.btn-sm.danger:hover{background:var(--danger);color:#fff}

/* ── Topbar ── */
.topbar{background:#0a0a0c;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topbar-in{max-width:1100px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:.4px}
.brand em{color:var(--gold);font-style:normal;font-weight:400;font-size:13px;letter-spacing:2px;text-transform:uppercase}
.topbar-right{display:flex;align-items:center;gap:18px;font-size:14px}
.topbar-right .user{color:var(--muted)}
.topbar-right .logout{color:#e7a59b}

/* ── Layout ── */
.wrap{max-width:1100px;margin:0 auto;padding:26px 22px 80px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:26px}
.panel h2{margin:0 0 18px;font-size:19px}
.panel h2 .count{display:inline-block;background:var(--panel2);color:var(--gold2);font-size:13px;
  padding:2px 10px;border-radius:20px;margin-left:8px;vertical-align:middle}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:18px}
.carpet-form label{display:block;font-size:12px;color:var(--muted);margin:12px 0 6px}
fieldset{border:1px solid var(--line);border-radius:10px;padding:6px 16px 16px;margin:0}
legend{padding:0 8px;color:var(--gold);font-size:13px;font-weight:600}
legend span{color:var(--muted);font-weight:400}
.current-img img{max-height:90px;border-radius:8px;border:1px solid var(--line);margin-top:6px}
.form-actions{margin-top:6px}

/* ── Flash ── */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:20px;font-size:14px}
.flash.ok{background:rgba(120,180,90,.12);border:1px solid #5e7d44;color:#cfe6b3}
.flash.err{background:rgba(192,72,59,.15);border:1px solid var(--danger);color:#f1b3ab}

/* ── List table ── */
table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list th{ text-align:left;color:var(--muted);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--line)}
table.list td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.list tr:hover td{background:var(--panel2)}
.thumb img{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.row-actions{display:flex;gap:8px;white-space:nowrap}
.empty{color:var(--muted)}

@media(max-width:760px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  table.list thead{display:none}
  table.list,table.list tbody,table.list tr,table.list td{display:block;width:100%}
  table.list tr{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;padding:6px}
  table.list td{border:none;padding:6px 10px}
}

/* ── Type toggle (Carpet / Rulon) ── */
.type-toggle{display:flex;gap:10px;flex-wrap:wrap}
.type-opt{position:relative;flex:1;min-width:130px;cursor:pointer}
.type-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.type-opt span{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel2);color:var(--muted);font-size:15px;font-weight:600;
  transition:all .15s}
.type-opt input:checked + span{border-color:var(--gold);color:var(--gold2);
  background:linear-gradient(135deg,rgba(201,162,75,.16),rgba(231,200,120,.08));
  box-shadow:0 0 0 1px var(--gold) inset}
.type-opt input:focus-visible + span{outline:2px solid var(--gold2);outline-offset:2px}