/* Admin screens: projects, device models, admin index.
   Everything here is prefixed a- so it cannot collide with the portal styles in
   index.html, which this file does not own and must not fight with. Only the
   theme tokens are shared, so a palette change lands in both at once. */

/* ---------------------------------------------------------------- head ---- */
.a-sub{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem}
.a-sub b{font-weight:500;font-size:.95rem}
.a-sub span{color:var(--soft);font-size:.88rem}

.a-btn{padding:.6rem 1.1rem;border-radius:9px;border:1px solid var(--line);
       background:none;color:var(--ink);font-family:var(--font);font-size:.88rem;
       cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;
       text-decoration:none;white-space:nowrap}
.a-btn:hover:not(:disabled){border-color:var(--steel)}
.a-btn:disabled{opacity:.45;cursor:not-allowed}
.a-btn--go{background:var(--steel);border-color:var(--steel);color:#fff}
.a-btn--bad{border-color:rgba(224,119,106,.45);color:#e0a49b}
.a-btn--sm{padding:.4rem .75rem;font-size:.8rem}
.a-btns{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* -------------------------------------------------------------- filters --- */
.a-filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:0 0 1.3rem}
.a-filters input,.a-filters select{padding:.55rem .7rem;background:var(--panel);
  color:var(--ink);border:1px solid var(--line);border-radius:8px;
  font-family:var(--font);font-size:.86rem;width:auto}
.a-filters input:focus,.a-filters select:focus{outline:none;border-color:var(--steel)}
.a-filters .a-search{flex:1;min-width:14rem}
/* Pushes the counter to the right edge of the row and lets it drop to its own
   line on a phone rather than squeezing the search box to nothing. */
.a-tally{margin-left:auto;color:var(--soft);font-size:.82rem;white-space:nowrap}
.a-toggle.is-on{border-color:var(--accent);color:var(--accent)}

/* -------------------------------------------------------- project cards --- */
.a-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem}
.a-card{display:block;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:1.15rem 1.25rem;
  font-family:var(--font);color:var(--ink);cursor:pointer;transition:border-color .15s}
.a-card:hover{border-color:var(--steel)}
.a-card__top{display:flex;align-items:center;gap:.7rem}
.a-card__name{font-size:1rem;font-weight:400;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-badge{flex:0 0 auto;font-size:.66rem;letter-spacing:.06em;padding:.2rem .55rem;
  border-radius:999px;border:1px solid var(--line);color:var(--soft);white-space:nowrap}
.a-badge--plan{border-color:rgba(63,154,109,.45);color:#7dd3a4}
.a-badge--none{border-color:var(--line);color:var(--soft)}
.a-badge--late{border-color:rgba(224,119,106,.45);color:#e0a49b}
.a-card__loc{color:var(--soft);font-size:.84rem;margin:.15rem 0 .9rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-card__stats{display:flex;align-items:center;gap:1rem;border-top:1px solid var(--line);
  padding-top:.7rem}
.a-stat{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--soft);
  font-variant-numeric:tabular-nums}
.a-stat svg{width:.95rem;height:.95rem;flex:0 0 auto;opacity:.85}
.a-stat--warn{color:var(--accent)}
.a-card__code{margin-left:auto;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.08em;color:var(--accent)}

/* ----------------------------------------------------------------- tabs --- */
.a-tabs{display:flex;gap:.3rem;flex-wrap:wrap;border-bottom:1px solid var(--line);
  margin:0 0 1.3rem}
.a-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--soft);
  font-family:var(--font);font-size:.89rem;padding:.65rem .85rem;cursor:pointer;
  margin-bottom:-1px}
.a-tab:hover{color:var(--ink)}
.a-tab.is-on{color:var(--ink);border-bottom-color:var(--accent)}
.a-tab .n{font-family:var(--mono);font-size:.7rem;color:var(--soft);margin-left:.35rem}

/* ---------------------------------------------------------------- table --- */
/* The catalogue table is wide by nature: nine columns including a thumbnail. It
   scrolls inside this box so the page body never scrolls sideways. */
.a-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);margin-bottom:1rem}
.a-table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:52rem}
.a-table th{text-align:left;font-weight:500;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft);padding:.75rem .7rem;
  border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel);
  position:sticky;top:0;z-index:1}
.a-table td{padding:.55rem .7rem;border-bottom:1px solid rgba(30,42,53,.6);
  color:var(--soft);vertical-align:middle}
.a-table tr:last-child td{border-bottom:0}
.a-table tbody tr:hover td{background:rgba(255,255,255,.018)}
.a-table td.a-num{text-align:right;font-variant-numeric:tabular-nums}
.a-table .a-pick{width:auto;accent-color:var(--accent)}
.a-link{background:none;border:0;padding:0;color:var(--ink);font-family:var(--font);
  font-size:.88rem;font-weight:400;text-align:left;cursor:pointer}
.a-link:hover{color:var(--accent)}
.a-dash{color:var(--soft);opacity:.6}

.a-thumb{width:2.4rem;height:2.4rem;border-radius:6px;background:var(--bg);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.a-thumb img{width:100%;height:100%;object-fit:contain}
.a-thumb span{font-size:.5rem;color:var(--soft);text-align:center;line-height:1.1}

.a-acts{display:flex;gap:.3rem;justify-content:flex-end}
.a-ico{background:none;border:1px solid transparent;border-radius:7px;color:var(--soft);
  cursor:pointer;padding:.25rem .35rem;line-height:1;display:inline-flex}
.a-ico svg{width:1rem;height:1rem}
.a-ico:hover{color:var(--ink);border-color:var(--line)}
.a-ico--bad:hover{color:var(--bad);border-color:rgba(224,119,106,.45)}

/* ----------------------------------------------------------------- bulk --- */
.a-bulk{position:sticky;bottom:1rem;z-index:5;display:flex;align-items:center;gap:.7rem;
  flex-wrap:wrap;margin-top:1rem;padding:.7rem .9rem;background:#0e1720;
  border:1px solid var(--steel);border-radius:10px;font-size:.85rem;
  box-shadow:0 6px 24px rgba(0,0,0,.45)}
.a-bulk select,.a-bulk input{width:auto;padding:.4rem .5rem;background:var(--bg);
  color:var(--ink);border:1px solid var(--line);border-radius:6px;
  font-family:var(--font);font-size:.82rem}

/* ---------------------------------------------------------------- forms --- */
.a-form{display:block}
.a-form label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft);font-weight:500;margin:0 0 .35rem}
.a-form input,.a-form select,.a-form textarea{width:100%;padding:.6rem .7rem;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:7px;
  font-family:var(--font);font-size:.9rem;font-weight:400}
.a-form textarea{resize:vertical;line-height:1.5;font-family:var(--mono);font-size:.8rem}
.a-form input:focus,.a-form select:focus,.a-form textarea:focus{outline:none;
  border-color:var(--steel)}
.a-f2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem}
.a-f3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:.8rem}
.a-field{margin-bottom:.8rem}
@media (max-width:640px){ .a-f2,.a-f3{grid-template-columns:1fr} }

.a-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:1.2rem 1.3rem;margin-bottom:1rem}
.a-panel h2{font-weight:400;font-size:1.02rem;margin:0 0 .2rem}
.a-panel h3{font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);margin:1.2rem 0 .5rem}
.a-panel .a-hint{color:var(--soft);font-size:.83rem;margin:0 0 1rem}
.a-empty{color:var(--soft);font-size:.87rem;padding:.9rem 0}

.a-msg{border-radius:8px;padding:.7rem .85rem;font-size:.86rem;margin:0 0 1rem;display:none}
.a-msg.bad{display:block;background:rgba(224,119,106,.09);
  border:1px solid rgba(224,119,106,.35);color:#f0b1a8}
.a-msg.ok{display:block;background:rgba(217,165,32,.08);
  border:1px solid rgba(217,165,32,.3);color:#e8c469}

/* ---------------------------------------------------------- admin index --- */
.a-sects{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem}
.a-sect{display:block;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:1.15rem 1.25rem;
  font-family:var(--font);color:var(--ink);cursor:pointer}
.a-sect:hover{border-color:var(--steel)}
.a-sect b{display:block;font-weight:400;font-size:.98rem;margin-bottom:.25rem}
.a-sect small{display:block;color:var(--soft);font-size:.81rem;line-height:1.5}
/* Not built is stated, not implied by a dead link. A greyed card with a label is
   an honest answer; a card that opens an empty screen is not. */
.a-sect--soon{cursor:default;opacity:.72}
.a-sect--soon:hover{border-color:var(--line)}
.a-soon{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  padding:.15rem .45rem;border-radius:999px;border:1px solid var(--line);
  color:var(--soft);margin-bottom:.45rem}

/* ---------------------------------------------------------------- media --- */
.a-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem}
.a-slot{border:1px solid var(--line);border-radius:10px;padding:.85rem;text-align:center}
.a-slot h3{margin:0 0 .55rem}
.a-slot img{width:100%;height:8rem;object-fit:contain;background:var(--bg);border-radius:6px}
.a-slot .a-none{height:8rem;display:flex;align-items:center;justify-content:center;
  color:var(--soft);font-size:.76rem;background:var(--bg);border-radius:6px}
.a-slot .a-pdf{display:flex;height:8rem;align-items:center;justify-content:center;
  background:var(--bg);border-radius:6px;color:var(--accent);font-size:.83rem;
  text-decoration:none}
.a-up{display:inline-block;font-size:.72rem;letter-spacing:.05em;color:var(--accent);
  cursor:pointer;margin-top:.5rem}
.a-up:hover{text-decoration:underline}
.a-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:.6rem}
.a-galitem{position:relative}
.a-galitem img{width:100%;height:5rem;object-fit:contain;background:var(--bg);
  border-radius:6px;border:1px solid var(--line)}
.a-galx{position:absolute;top:-.4rem;right:-.4rem;width:1.3rem;height:1.3rem;
  border-radius:50%;background:var(--bg);border:1px solid var(--line);color:var(--soft);
  cursor:pointer;line-height:1;font-size:.85rem;padding:0}
.a-galx:hover{color:var(--bad);border-color:var(--bad)}

/* QR sits on white on purpose. A code rendered dark on dark does not scan, and a
   phone camera is the only thing that ever reads it. */
.a-qr{display:inline-block;background:#fff;padding:.6rem;border-radius:10px;margin-top:.8rem}
.a-qr img{display:block;width:11rem;height:11rem}

.a-kv{display:flex;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);
  font-size:.87rem}
.a-kv:last-child{border-bottom:0}
.a-kv .k{color:var(--soft);flex:1}
.a-kv .v{font-weight:400;text-align:right;word-break:break-word}
.a-pre{font-family:var(--mono);font-size:.72rem;line-height:1.6;color:var(--soft);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.8rem;
  overflow-x:auto;white-space:pre}