/* Minimal admin-panel styling — no framework, ~200 lines.
   Dark sidebar, light content area, scannable cards. */

:root {
  --sidebar-bg:    #1f2937;
  --sidebar-fg:    #e5e7eb;
  --sidebar-hover: #374151;
  --sidebar-active:#2563eb;
  --bg:            #f3f4f6;
  --fg:            #111827;
  --muted:         #6b7280;
  --card-bg:       #ffffff;
  --border:        #e5e7eb;
  --primary:       #2563eb;
  --critical:      #dc2626;
  --warn:          #d97706;
  --ok:            #059669;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}

.layout {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 220px;
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  padding: 20px 16px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #374151;
}

.sidebar nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  color: var(--sidebar-fg);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.nav-item:hover {
  background: var(--sidebar-hover);
}
.nav-item.active {
  background: var(--sidebar-hover);
  border-left-color: var(--sidebar-active);
  font-weight: 600;
}
/* Sidebar unread/pending badge — red pill with the count.
   Used by the Tickets item to surface unsolved tickets at a glance. */
.nav-badge {
  background: #dc2626;
  color: white;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25);
}

.logout {
  padding: 12px 16px;
  border-top: 1px solid #374151;
}
.btn-link {
  background: none;
  border: none;
  color: var(--sidebar-fg);
  cursor: pointer;
  padding: 0;
  font-size: 13px;
}
.btn-link:hover { color: white; }

/* ---------- Main ---------- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.topbar {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar-hint { color: var(--muted); font-size: 12px; margin-left: 8px; }

.status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.status-pill.ok    { background: #d1fae5; color: var(--ok); }
.status-pill.warn  { background: #fef3c7; color: var(--warn); }

.muted { color: var(--muted); }
.critical { color: var(--critical); }
.warn { color: var(--warn); }
.big { font-size: 18px; }

.content {
  padding: 24px;
}

h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 16px; margin: 0 0 12px; }

/* ---------- Cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
.card-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.card-value { font-size: 22px; font-weight: 600; margin: 6px 0 4px; }
.card-value .unit { font-size: 13px; color: var(--muted); font-weight: 400; }
.card-sub { color: var(--muted); font-size: 12px; }

/* ---------- Panels ---------- */
.panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  margin-bottom: 18px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 800px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.stub p.big { font-size: 18px; }
.hint { font-size: 12px; color: var(--muted); }

/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
th {
  background: #f9fafb;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--muted);
}
code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* ---------- Auth pages (login / signup) ---------- */
.auth-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}
.auth-card {
  background: white;
  padding: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 380px;
}
.auth-card h1 { text-align: center; margin: 0 0 4px; }
.auth-card .subtitle {
  text-align: center;
  color: var(--muted);
  margin: 0 0 18px;
}

.auth-card label {
  display: block;
  margin: 14px 0;
}
.auth-card label span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.auth-card input[type=email],
.auth-card input[type=password] {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.auth-card input:focus {
  outline: none;
  border-color: var(--primary);
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 16px;
  background: var(--primary);
  color: white;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-primary:hover { background: #1d4ed8; }

.error {
  background: #fee2e2;
  color: var(--critical);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0 0;
  font-size: 13px;
}

/* ---------- Catalog editor (slice 7) ---------- */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 14px;
}

.btn-primary.inline {
  display: inline-block;
  width: auto;
  padding: 8px 14px;
  margin: 0;
  text-decoration: none;
  font-size: 13px;
}

.breadcrumb {
  color: var(--muted);
  margin-bottom: 8px;
  font-size: 13px;
}
.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--primary); }

.tabs {
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.tab {
  display: inline-block;
  padding: 8px 14px;
  margin-bottom: -1px;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  font-size: 14px;
}
.tab:hover { color: var(--fg); }
.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.status-live   { background: #d1fae5; color: var(--ok); }
.status-draft  { background: #fef3c7; color: var(--warn); }
.status-hidden { background: #e5e7eb; color: var(--muted); }
.status-available { background: #d1fae5; color: var(--ok); }
.status-sold      { background: #e5e7eb; color: var(--muted); }
.status-voided    { background: #fee2e2; color: var(--critical); }

td.actions, th.actions { white-space: nowrap; }
td.actions a, td.actions form button {
  margin-right: 6px;
  font-size: 12px;
}
td.actions a {
  color: var(--primary);
  text-decoration: none;
}
td.actions a:hover { text-decoration: underline; }

.btn-link.danger {
  color: var(--critical);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
}
.btn-link.danger:hover { text-decoration: underline; }

/* Inline forms in tables (delete buttons) */
form.inline { display: inline; }

/* ---------- Generic form panel ---------- */
.form fieldset {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px 18px 4px;
  margin: 0 0 16px;
}
.form fieldset legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0 6px;
}
.form label {
  display: block;
  margin-bottom: 12px;
}
.form label.inline {
  display: inline-block;
  width: 24%;
  vertical-align: top;
  margin-right: 1%;
  margin-bottom: 12px;
}
@media (max-width: 700px) {
  .form label.inline { width: 100%; margin-right: 0; }
}
.form label > span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.form input[type=text],
.form input[type=email],
.form input[type=password],
.form input[type=url],
.form input[type=number],
.form select,
.form textarea {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
  align-items: center;
}
.form-actions .btn-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.form-actions .btn-primary {
  width: auto;
  margin: 0;
}

.flash {
  background: #d1fae5;
  color: var(--ok);
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 14px;
  font-size: 13px;
}

/* ---------- Image upload field ---------- */
.image-field {
  margin-bottom: 14px;
}
.image-field .field-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.current-image {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #f9fafb;
  margin-bottom: 8px;
}
.current-image img {
  max-height: 80px;
  max-width: 160px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: white;
}
.remove-image {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  margin: 0;
  width: auto;
}
.remove-image input[type=checkbox] {
  margin-right: 4px;
  vertical-align: middle;
}
.image-field input[type=file] {
  font-size: 13px;
  padding: 4px 0;
}

/* ---------- Field-level tooltips (hover the ℹ) ---------- */
.info {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  background: var(--muted);
  color: white;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  cursor: help;
  margin-left: 4px;
  position: relative;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}
.info::after {
  content: attr(data-tip);
  position: absolute;
  left: 22px;
  top: -6px;
  background: #1f2937;
  color: #f3f4f6;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  width: 300px;
  white-space: pre-line;       /* honour \n in the data-tip text */
  z-index: 100;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-out;
}
.info:hover::after,
.info:focus::after {
  opacity: 1;
}
/* On narrow viewports, anchor the tooltip to the right of the form */
@media (max-width: 700px) {
  .info::after {
    left: auto;
    right: 22px;
  }
}

/* ── Formatting toolbar (used above the broadcast body textarea) ─── */
.fmt-toolbar {
  display: flex;
  gap: 4px;
  margin: 4px 0 0;
  padding: 4px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.fmt-toolbar + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.fmt-btn {
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  color: #374151;
  font-family: inherit;
  min-width: 32px;
}
.fmt-btn:hover  { background: #2563eb; color: white; border-color: #2563eb; }
.fmt-btn:active { transform: translateY(1px); }
.fmt-btn b      { font-weight: 700; }
.fmt-btn i      { font-style: italic; }
.fmt-btn code   { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.fmt-toolbar-spacer { flex: 1; }
.fmt-mode-link {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
}
.fmt-mode-link:hover { color: #2563eb; text-decoration: underline; }
.fmt-advanced { margin-top: 6px; display: none; }
.fmt-advanced.open { display: block; }

/* ── Working-hours editor (bot settings) ────────────────────────────── */
.schedule-table {
  width: auto;
  margin: 10px 0 14px;
  border-collapse: collapse;
}
.schedule-table th,
.schedule-table td { padding: 6px 8px; border: 1px solid #e5e7eb; text-align: center; }
.schedule-table thead th { background: #f9fafb; font-weight: 600; }
.schedule-table input[type="time"] { width: 110px; }
.status-pill.down {
  background: #fef2f2; color: #991b1b; border-color: #fecaca;
}

/* Maintenance-mode banner — sticky red bar at the top of every page */
.maintenance-banner {
  background: #dc2626;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

/* CSV export pill — used to be a flat btn-link which was easy to miss.
   Now styled like a secondary button so admins can find it without
   pixel-hunting on the far right of the page. */
.csv-export {
  display: inline-block;
  padding: 6px 12px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  border-radius: 4px;
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.csv-export:hover {
  background: #d1fae5;
  text-decoration: none;
}