/* ============================================================
   FlamxAi — Admin chrome (separate layout: sidebar + topbar).
   Same brand tokens; Amber only as the small Admin badge.
   ============================================================ */
.admin{display:flex;min-height:100vh;background:var(--bg)}
.admin-side{width:248px;flex:none;background:var(--surface);border-inline-end:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto}
.admin-side .brand{display:flex;align-items:center;gap:10px;padding:18px;border-bottom:1px solid var(--border-soft)}
.admin-side .brand img{height:26px;width:auto}
.admin-side .grp{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:16px 18px 8px;font-weight:600}
.fx[dir="rtl"] .admin-side .grp{letter-spacing:.02em;text-transform:none}
.admin-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.admin-nav a{display:flex;align-items:center;gap:11px;height:42px;padding:0 12px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;color:var(--text-2);cursor:pointer;transition:.14s}
.admin-nav a:hover{background:var(--surface-2);color:var(--text)}
.admin-nav a[data-on="true"]{background:var(--primary);color:var(--on-primary)}
.admin-side .sfoot{margin-top:auto;padding:14px 10px;border-top:1px solid var(--border-soft)}

.admin-main{flex:1;min-width:0;display:flex;flex-direction:column}
.admin-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;height:64px;padding:0 22px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-soft)}
.admin-top .search{flex:1;max-width:380px;display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--muted)}
.admin-top .search input{background:none;border:none;outline:none;font-family:inherit;font-size:14px;color:var(--text);width:100%}
.admin-top .right{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.admin-body{padding:24px 22px 40px;flex:1}
.admin-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.admin-h h1{font-size:24px}
.admin-h p{color:var(--muted);font-size:14px;margin-top:2px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{padding:18px;display:flex;flex-direction:column;gap:12px}
.kpi .top{display:flex;align-items:center;justify-content:space-between}
.kpi .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary)}
.kpi .v{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.kpi .l{font-size:13.5px;color:var(--muted)}

/* generic admin card */
.acard{padding:20px}
.acard .ah{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.acard .ah h3{font-size:17px}

/* data table */
.atbl{width:100%;border-collapse:collapse;font-size:14px}
.atbl th{text-align:start;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.fx[dir="rtl"] .atbl th{letter-spacing:.02em;text-transform:none}
.atbl td{padding:13px 14px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.atbl tr:last-child td{border-bottom:none}
.atbl tbody tr:hover td{background:var(--surface-2)}
.atbl .who{display:flex;align-items:center;gap:10px}

/* admin grid for overview */
.agrid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:18px;align-items:start}
@media (max-width:1000px){.agrid{grid-template-columns:1fr}}

/* admin mobile: sidebar becomes a drawer + tables become cards */
.admin-burger{display:none}
@media (max-width:860px){
  .admin-burger{display:inline-flex}
  .admin-side{position:fixed;inset-block:0;inset-inline-start:0;z-index:80;transform:translateX(-100%);transition:transform .3s var(--ease);box-shadow:var(--shadow-lg)}
  .fx[dir="rtl"] .admin-side{transform:translateX(100%)}
  .admin-side[data-open="true"],
  .fx[dir="rtl"] .admin-side[data-open="true"]{transform:translateX(0)}
  .admin-side-bd{position:fixed;inset:0;background:rgba(8,16,18,.5);z-index:79;animation:fade .2s forwards}
  .admin-body{padding:18px 14px 24px}
  .atbl,.atbl tbody,.atbl tr,.atbl td{display:block;width:100%}
  .atbl thead{display:none}
  .atbl tr{background:var(--surface);border:1px solid var(--border);border-radius:16px;margin-bottom:12px;padding:14px;box-shadow:var(--shadow-sm)}
  .atbl tbody tr:hover td{background:none}
  .atbl td{border:none;padding:5px 0;display:flex;align-items:center;gap:8px;justify-content:space-between}
  .atbl td::before{content:attr(data-l);color:var(--muted);font-weight:600;font-size:12.5px}
}

/* Phase 2 — admin catalog helpers */
.fx-anchor-form{display:none}
.fx-anchor-form:target{display:block}
.icon-up{transform:rotate(180deg)}
.fileline{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-soft);font-size:14px}
.fileline:last-child{border-bottom:none}
.fileline .fic{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;flex:none}
.inclpick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:760px){.inclpick{grid-template-columns:1fr}}
.inclpick label{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;font-size:14px;transition:.15s}
.inclpick label:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.inclpick input{accent-color:var(--primary);width:17px;height:17px}