/* CellMart Admin — builds on cellmart.css tokens and components. */
.is-admin { background: var(--bg); }
.admin { min-height: 100vh; }

/* ---------- Sidebar (desktop) */
.aside { display: none; }
.atop { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--gutter);
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.atop__brand, .aside__brand { display: inline-flex; align-items: center; gap: 10px; }
.atop__brand img, .aside__brand img { height: 16px; width: auto; }
.aside__tag { font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 8px; border-radius: var(--r-pill); background: #ebebf0; }
.atabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px var(--gutter); background: var(--bg); position: sticky; top: 56px; z-index: 20; }
.atabs::-webkit-scrollbar { display: none; }
.atabs .chip { flex: none; }
.atabs__n { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; align-items: center; justify-content: center; border-radius: var(--r-pill); background: rgba(0,0,0,.07); font-size: 12px; font-weight: 600; }
.chip.is-on .atabs__n { background: rgba(255,255,255,.2); }

.amain { padding: 8px var(--gutter) 64px; max-width: 1280px; }
.ahead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 8px 0 20px; }
.ahead .t-h1 { font-size: 28px; }
.ahead__actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (min-width: 1000px) {
  .admin { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .atop, .atabs { display: none; }
  .aside { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 22px 14px 16px; background: var(--card); border-right: 1px solid var(--line); }
  .aside__brand { padding: 0 10px 22px; }
  .amain { padding: 32px 40px 80px; }
  .ahead { margin: 0 0 28px; }
  .ahead .t-h1 { font-size: 32px; }
}
.anav { display: flex; flex-direction: column; gap: 2px; }
.anav__item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color .15s; }
.anav__item svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.anav__item span:first-of-type { flex: 1; }
.anav__item:hover { background: var(--bg); color: var(--ink); }
.anav__item[aria-current="page"] { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.anav__item[aria-current="page"] svg { color: var(--brand); }
.anav__count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.aside__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.sync { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg); }
.sync > svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.sync__dot { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #30b45a; box-shadow: 0 0 0 3px rgba(48,180,90,.18); }
.me { display: flex; align-items: center; gap: 10px; padding: 6px 4px 0 10px; }
.me__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-tint); color: var(--brand); font-size: 13px; font-weight: 700; }
.iconbtn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color .15s; }
.iconbtn:hover { background: var(--bg); color: var(--ink); }
.iconbtn:disabled { opacity: .35; pointer-events: none; }
.iconbtn svg { width: 18px; height: 18px; }

/* ---------- Layout */
.agrid { display: grid; gap: 20px; }
@media (min-width: 1100px) { .agrid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; } .agrid--even { grid-template-columns: 1fr 1fr; } }
.gap-20 { gap: 20px; }
.mt-20 { margin-top: 20px; }
.acard { padding: 20px; }
.acard--flush { padding: 0; overflow: hidden; }
.acard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
@media (min-width: 768px) { .acard { padding: 24px; } .acard--flush { padding: 0; } }
.fields--2 { display: grid; gap: 16px; }
@media (min-width: 600px) { .fields--2 { grid-template-columns: 1fr 1fr; } }
.textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; font: inherit; }

/* ---------- KPI */
.kpi { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi__v { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.2; }
.kpi__s--success { color: var(--success); }
.kpi__s--warn { color: var(--warn); }
@media (min-width: 768px) { .kpi { padding: 22px 22px 20px; } .kpi__v { font-size: 30px; } }

/* ---------- Tasks */
.tasks { display: flex; flex-direction: column; margin: 0 -8px; }
.task { display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-radius: 12px; transition: background-color .15s; }
.task + .task { border-top: 1px solid var(--line); }
.task:hover { background: var(--bg); }
.task__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.task__icon svg { width: 20px; height: 20px; }
.task__icon--warn { background: var(--warn-bg); color: var(--warn); }
.task__icon--brand { background: var(--brand-tint); color: var(--brand); }
.task__icon--neutral { background: #ebebf0; color: var(--ink-2); }
.task__chev { width: 18px; height: 18px; color: var(--muted); flex: none; }

/* ---------- Chart */
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; height: 200px; align-items: end; padding-top: 8px; }
.bars__col { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.bars__bar { width: 100%; max-width: 36px; border-radius: 8px 8px 4px 4px; background: #dfe5f2; min-height: 6px; }
.bars__bar.is-today { background: var(--brand); }
.bars__v { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bars__d { font-size: 12px; color: var(--muted); font-weight: 500; }

/* ---------- Table */
.atable-wrap { overflow-x: auto; margin: 0 -20px; }
.acard--flush .atable-wrap { margin: 0; }
@media (min-width: 768px) { .atable-wrap { margin: 0 -24px; } .acard--flush .atable-wrap { margin: 0; } }
.atable { width: 100%; border-collapse: collapse; font-size: 14px; }
.atable th { padding: 10px 20px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--line); }
.atable td { padding: 14px 20px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.atable tbody tr:last-child td { border-bottom: 0; }
.atable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atable tr[data-href] { cursor: pointer; transition: background-color .12s; }
.atable tr[data-href]:hover { background: #fafafc; }
.atable td p + p { margin-top: 2px; }
@media (min-width: 768px) { .atable th, .atable td { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 899px) { .hide-md { display: none; } }
@media (max-width: 599px) { .atable { font-size: 13px; } .atable th, .atable td { padding: 12px 12px; } .atable th:first-child, .atable td:first-child { padding-left: 16px; } }
.athumb { flex: none; display: inline-flex; width: 44px; height: 44px; border-radius: 10px; background: var(--well); overflow: hidden; align-items: center; justify-content: center; }
.athumb img { width: 88%; height: 88%; object-fit: contain; }
.input--num { width: 130px; height: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Toolbar */
.atoolbar { display: flex; flex-direction: column; gap: 12px; }
.atoolbar .chips { margin: 0 calc(var(--gutter) * -1); }
.asearch { position: relative; display: block; }
.asearch svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.asearch .input { padding-left: 42px; height: 44px; }
@media (min-width: 1000px) { .atoolbar { flex-direction: row; align-items: center; justify-content: space-between; } .atoolbar .chips { margin: 0; flex-wrap: wrap; } .asearch { width: 300px; flex: none; } }

/* ---------- Switch */
.switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track { width: 44px; height: 26px; border-radius: 999px; background: #d1d1d6; position: relative; transition: background-color .2s var(--ease); }
.switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .22s var(--ease); }
.switch input:checked + .switch__track { background: #30b45a; }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus); }

/* ---------- Homepage editor */
.slides { display: flex; flex-direction: column; gap: 10px; }
.slide { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: transform .2s var(--ease); }
.slide__media { flex: none; width: 88px; height: 64px; border-radius: 10px; background: #000; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.slide__media img { width: 90%; height: 90%; object-fit: contain; }
.slide .t-small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.slide__tools { display: flex; align-items: center; gap: 2px; }
.slide__tools .switch { margin-left: 8px; }
@media (max-width: 599px) { .slide { flex-wrap: wrap; } .slide__tools { width: 100%; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 8px; } }
.picklist { display: flex; flex-direction: column; margin: 0 -8px; max-height: 420px; overflow: auto; }
.pickrow { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; cursor: pointer; }
.pickrow:hover { background: var(--bg); }
.pickrow input { position: absolute; opacity: 0; pointer-events: none; }
.pickrow__box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.pickrow__box svg { width: 14px; height: 14px; stroke-width: 2.5; }
.pickrow input:checked ~ .pickrow__box { background: var(--brand); border-color: var(--brand); color: #fff; }
.pickrow input:focus-visible ~ .pickrow__box { box-shadow: var(--focus); }

/* ---------- Order detail */
.timeline { display: flex; flex-direction: column; }
.tl { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.tl:last-child { padding-bottom: 0; }
.tl__dot { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--card); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.tl:not(:last-child)::before { content: ""; position: absolute; left: 10px; z-index: 0; top: 24px; bottom: 2px; width: 2px; background: var(--line); }
.tl.is-done .tl__dot { background: var(--success); border-color: var(--success); }
.tl.is-now .tl__dot { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.tl__dot svg { width: 12px; height: 12px; stroke-width: 3; }
.olines .row { padding: 12px 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 0; font-size: 14px; }
.kv dd { padding-left: 16px; }
.kv dt { color: var(--muted); }
.kv dd { text-align: right; font-variant-numeric: tabular-nums; }
.kv .kv__total { font-weight: 700; font-size: 16px; color: var(--ink); padding-top: 8px; border-top: 1px solid var(--line); }

/* ---------- Product editor */
.colorhead { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; }
.colorhead:first-child { margin-top: 0; }
.phgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 600px) { .phgrid { grid-template-columns: repeat(5, 1fr); } }
.ph { position: relative; aspect-ratio: 1; border-radius: 12px; background: var(--well); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ph img { width: 88%; height: 88%; object-fit: contain; }
.ph__del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(0,0,0,.15); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity .15s; }
.ph:hover .ph__del, .ph__del:focus-visible { opacity: 1; }
@media (hover: none) { .ph__del { opacity: 1; } }
.ph__del svg { width: 14px; height: 14px; }
.ph__main { position: absolute; left: 6px; bottom: 6px; }
.ph--add { border: 1.5px dashed var(--line-strong); background: transparent; color: var(--muted); flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s; }
.ph--add:hover { border-color: var(--brand); color: var(--brand); }
.ph--add svg { width: 22px; height: 22px; }
.ph--add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kvrow { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 8px; align-items: center; }
.kvrow + .kvrow { margin-top: 8px; }
.kvrow .input { height: 44px; }
.zoho-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.zoho-note svg { width: 16px; height: 16px; flex: none; }

/* ---------- Login */
.is-login { background: var(--bg); }
.alogin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px var(--gutter); }
.alogin__card { width: 100%; max-width: 400px; padding: 32px 28px; display: flex; flex-direction: column; gap: 24px; }

.text-right { text-align: right; }
.empty[hidden] { display: none; }

.nowrap { white-space: nowrap; }
.olist { display: flex; flex-direction: column; margin: 0 -8px; }
.olist__row { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 12px; transition: background-color .15s; min-width: 0; }
.olist__row + .olist__row { border-top: 1px solid var(--line); }
.olist__row:hover { background: var(--bg); }
.olist__row .grow { min-width: 0; }
.olist__row .t-small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olist__end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
@media (min-width: 1000px) { .admin { background: linear-gradient(to right, var(--card) 247px, var(--line) 247px, var(--line) 248px, var(--bg) 248px); } .aside { border-right: 0; } }
.agrid > *, .col > * { min-width: 0; }
.task .grow, .row__body { min-width: 0; }
@media (max-width: 767px) { .hide-sm { display: none !important; } .kpi__v { font-size: 22px; } }
@media (min-width: 768px) { .show-sm { display: none !important; } }
.olist__row[hidden] { display: none; }