/* AsterConf Panel — dark theme inspired by the landing page */
:root {
  --bg:           #0a0a0a;
  --bg-card:      #161617;
  --bg-card-hi:   #1c1c1e;
  --border:       rgba(255,255,255,0.08);
  --border-hi:    rgba(249,115,22,0.3);
  --text:         #f2f2f3;
  --text-muted:   #9ca3af;
  --text-dim:     #6b7280;
  --orange:       #F97316;
  --orange-hi:    #FB923C;
  --orange-dim:   rgba(249,115,22,0.12);
  --red:          #ef4444;
  --green:        #10b981;
  --blue:         #3b82f6;
  --amber:        #f59e0b;
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.35);
  --radius:       14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
               Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--orange); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--orange-hi); }

/* layout */
/* ── Layout ─────────────────────────────────────────────────────────────
   `.shell` is the page wrapper. With a sidebar (admin / integrator
   logged in), it's a flex row: sidebar + main. Without a sidebar
   (login page), it collapses to a single column for the centered
   login card. The `body.has-sidebar` flag is set in base.html only
   when `user` is in scope. */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
body.has-sidebar .shell {
  flex-direction: row;
  align-items: stretch;
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.sidebar {
  flex: 0 0 240px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 30;
}

.sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
.sidebar__brand img { height: 28px; width: 28px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.sidebar__brand-text {
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__brand-text small { color: var(--text-muted); font-weight: 400; margin-left: 6px; font-size: 11px; }

.sidebar__nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }

.sidebar__link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--text-muted); font-size: 14px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.sidebar__link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.sidebar__link.is-active {
  background: rgba(249, 115, 22, 0.10);
  color: var(--orange-hi);
  font-weight: 500;
}
/* Orange accent bar on active link. */
.sidebar__link.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--orange);
  border-radius: 2px;
}
.sidebar__icon {
  width: 20px; text-align: center;
  font-size: 15px; flex-shrink: 0;
  filter: grayscale(0.2);
}
.sidebar__link.is-active .sidebar__icon { filter: none; }

/* User block at the bottom of the sidebar. */
.sidebar__user {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.sidebar__user-info {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 10px;
}
.sidebar__user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-hi));
  color: white; font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar__user-name {
  font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__logout-form { width: 100%; }
.sidebar__logout {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); font-size: 13px;
  font-family: inherit; cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.sidebar__logout:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.06);
}

/* Mobile hamburger button — fixed top-left so it overlays the page when
   the sidebar is closed. Hidden on desktop (≥769 px). */
.sidebar-mobile-btn {
  display: none;
  position: fixed; top: 12px; left: 12px; z-index: 40;
  width: 40px; height: 40px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); font-size: 20px; line-height: 1;
  border-radius: 8px; cursor: pointer;
}

/* Backdrop behind the open mobile sidebar — clicking it closes the menu. */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 25;
  background: rgba(6, 8, 15, 0.6); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.sidebar-backdrop.open { display: block; opacity: 1; pointer-events: auto; }

/* When sidebar is present, main needs to flex + scroll independently. */
body.has-sidebar main { flex: 1; min-width: 0; }

/* ── Topbar (legacy — used only if some template still extends the old
   `topbar` block; safe to leave defined.) */
.topbar {
  border-bottom: 1px solid var(--border);
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 10;
}
.topbar__inner {
  max-width: min(2000px, 100%); margin: 0 auto;
  padding: 12px clamp(20px, 2vw, 40px);
  display: flex; align-items: center; gap: 16px;
  min-height: 56px;
}
.topbar__brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.topbar__logo { height: 28px; width: auto; border-radius: 6px; }
.topbar__title { font-weight: 600; font-size: 16px; letter-spacing: 0.02em; }
.topbar__title small { color: var(--text-muted); font-weight: 400; margin-left: 8px; }
.topbar__right { display: flex; align-items: center; gap: 12px; }
.topbar__user { color: var(--text-muted); font-size: 14px; }

/* ── Fluid containers ───────────────────────────────────────────────────
   Containers expand to fill the screen on big monitors instead of
   leaving empty bars on the sides. Side padding scales with viewport
   width via clamp() so the page breathes on ultrawide displays without
   getting cramped on narrow ones.

   `.container` keeps a 1600px cap because forms and articles read
   poorly when lines stretch across a 4K display. `.container--wide`
   has no cap — admin tables, dashboards, split layouts, and the order
   detail terminal all want every available pixel. */
.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 32px clamp(20px, 2.5vw, 48px) 80px;
}
.container--wide {
  max-width: none;
  padding-left:  clamp(20px, 2vw, 40px);
  padding-right: clamp(20px, 2vw, 40px);
}

h1 { font-size: 28px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 600; margin: 32px 0 12px; }
.lead { color: var(--text-muted); margin: 0 0 24px; }

/* card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
.card + .card { margin-top: 20px; }

/* form */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-weight: 500; font-size: 14px; color: var(--text); }
.field .hint { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.input, .textarea, select {
  background: var(--bg-card-hi);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.2s, background 0.2s;
}
.input:focus, .textarea:focus, select:focus {
  outline: none;
  border-color: var(--orange);
  background: #18181b;
}
.textarea { resize: vertical; min-height: 80px; font-family: ui-monospace,
    SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; }

.file-drop {
  border: 1.5px dashed rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  background: var(--bg-card-hi);
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}
.file-drop:hover { border-color: var(--orange); background: rgba(249,115,22,0.05); }
.file-drop input[type=file] { display: block; margin: 0 auto; color: var(--text-muted); }
.file-drop__label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }

/* button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 500; font-size: 14px;
  background: var(--orange);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  font-family: inherit;
  text-decoration: none;
}
.btn:hover { background: var(--orange-hi); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--orange); color: var(--orange); background: transparent; }
.btn--danger { background: var(--red); }
.btn--danger:hover { background: #dc2626; color: #fff; }
.btn--sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }

.error-box, .success-box, .info-box {
  border: 1px solid; border-radius: 10px; padding: 12px 14px;
  font-size: 14px; margin-bottom: 20px;
}
.error-box { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); color: #fca5a5; }
.success-box { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); color: #6ee7b7; }
.info-box   { border-color: rgba(249,115,22,0.4); background: rgba(249,115,22,0.08); color: var(--orange-hi); }

/* table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
table.data { width: 100%; border-collapse: collapse; background: var(--bg-card); }
table.data th, table.data td { padding: 12px 16px; text-align: left; font-size: 14px;
    border-bottom: 1px solid var(--border); }
table.data th { font-weight: 600; color: var(--text-muted); font-size: 12px;
    letter-spacing: 0.03em; text-transform: uppercase; background: var(--bg-card-hi); }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: rgba(255,255,255,0.02); }

/* status pill */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
}
.pill--new         { background: rgba(59,130,246,0.15); color: #93c5fd; }
.pill--accepted    { background: rgba(245,158,11,0.15); color: #fcd34d; }
.pill--in_progress { background: rgba(168,85,247,0.15); color: #c4b5fd; }
.pill--done        { background: rgba(16,185,129,0.15); color: #6ee7b7; }
.pill--live        { background: rgba(249,115,22,0.20); color: #fdba74; font-weight: 600; }
/* deploy_tasks.status pill colors — separate enum from order status. */
.pill--queued      { background: rgba(107,114,128,0.18); color: #d1d5db; }
.pill--running     { background: rgba(59,130,246,0.18);  color: #93c5fd; }
.pill--failed      { background: rgba(239,68,68,0.18);   color: #fca5a5; }
.pill--cancelled   { background: rgba(239,68,68,0.15); color: #fca5a5; font-weight: 600; }

/* LOGIN */
.login-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
  background: radial-gradient(ellipse at center top,
              rgba(249,115,22,0.06) 0%, transparent 60%), var(--bg);
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: var(--shadow-lg);
}
.login-logo {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.login-logo img { max-height: 52px; max-width: 160px; width: auto; height: auto;
    border-radius: 10px; }
.login-logo__name { font-size: 15px; color: var(--text-muted); font-weight: 500; }
.login-title { font-size: 22px; font-weight: 600; margin-bottom: 4px; text-align: center; }
.login-sub   { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 24px; }

/* dashboard specific */
.hero {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(249,115,22,0.04) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 24px;
}
.hero__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--orange-dim);
  color: var(--orange);
  border-radius: 14px;
  font-size: 28px; font-weight: 700;
}
.hero__body { flex: 1; }
.hero__title { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.hero__sub { color: var(--text-muted); font-size: 14px; }

/* badge count */
.counter { display: inline-flex; align-items: baseline; gap: 4px; }
.counter__num { font-size: 24px; font-weight: 600; color: var(--text); }
.counter__lbl { font-size: 13px; color: var(--text-muted); }

/* clickable rows (admin orders table) */
table.data--clickable tbody tr.row-link {
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.08s;
}
table.data--clickable tbody tr.row-link:hover {
  background: rgba(249,115,22,0.05);
}
table.data--clickable tbody tr.row-link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}
table.data--clickable tbody tr.row-link:active {
  transform: scale(0.998);
}
table.data--clickable tbody tr.row-link td:first-child {
  font-weight: 600; color: var(--orange-hi);
}
table.data--clickable tbody tr.row-link td:last-child::after {
  content: "›";
  float: right;
  font-size: 18px;
  color: var(--text-muted);
  margin-left: 8px;
  line-height: 1;
}

/* tg id chips (admin/tg_ids page) */
.tg-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  min-height: 32px;
  padding: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.tg-chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--orange-dim);
  border: 1px solid rgba(249,115,22,0.4);
  border-radius: 999px;
  padding: 4px 4px 4px 12px;
  margin: 0;
  transition: all 0.15s;
}
.tg-chip:hover { border-color: var(--orange); background: rgba(249,115,22,0.22); }
.tg-chip__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px; color: var(--text); font-weight: 500;
}
.tg-chip__del {
  appearance: none; background: transparent; border: none; cursor: pointer;
  color: var(--text-muted);
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 18px; line-height: 1; font-weight: 400;
  font-family: inherit;
  transition: all 0.15s;
  padding: 0;
}
.tg-chip__del:hover {
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
}
.tg-empty {
  color: var(--text-muted); font-size: 13px; font-style: italic;
  padding: 4px 8px;
}

/* ── Mobile: collapse sidebar into a slide-out drawer ─────────────────── */
@media (max-width: 768px) {
  /* Sidebar becomes an off-canvas drawer; the hamburger button slides it
     in via .open. Backdrop is also off until .open. Main fills the
     viewport with extra top padding to clear the hamburger. */
  body.has-sidebar .shell { flex-direction: column; }

  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 260px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar-mobile-btn { display: flex; align-items: center; justify-content: center; }
  body.has-sidebar main { padding-top: 56px; }   /* clear the hamburger */
}

/* ── General responsive tweaks (kept from previous design) ─────────────── */
@media (max-width: 720px) {
  .topbar__inner { padding: 10px 16px; min-height: 52px; }
  .container { padding: 20px 16px 60px; }
  .card { padding: 20px 18px; }
  .hero { flex-direction: column; text-align: center; padding: 24px 20px; }
  h1 { font-size: 22px; }
  .login-card { padding: 28px 22px; }
  table.data th, table.data td { padding: 10px 12px; font-size: 13px; }
}