/* ================================================================
   Bones — custom styles
   Loaded after milligram.min.css — overrides use same selectors
   (equal specificity, later position in cascade = wins).
   No !important. No other frameworks.
   ================================================================ */

/* ── Typography base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; }
body {
  margin: 0;
  padding: 0;
  font-size: 1rem;          /* reset milligram's 1.6rem → 15px */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.25; }
h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; }
h3 { font-size: 1.1rem;   font-weight: 600; line-height: 1.4; }
h4 { font-size: .9375rem; font-weight: 600; }

/* ── Variables ────────────────────────────────────────────── */
:root {
  --c-accent:       #3b6fd4;
  --c-accent-dark:  #2857b8;

  --c-bg:           #f4f7fa;
  --c-surface:      #ffffff;
  --c-surface-alt:  #f0f4f8;

  --c-border:       #dde3ea;
  --c-border-dark:  #c4cdd7;

  --c-text:         #1c2432;
  --c-muted:        #637283;
  --c-subtle:       #96a3b2;

  --c-topbar:       #0f1c2e;

  --c-ok:           #16a34a;
  --c-ok-bg:        #f0fdf4;
  --c-ok-border:    #bbf7d0;
  --c-ok-text:      #15803d;

  --c-err:          #dc2626;
  --c-err-bg:       #fef2f2;
  --c-err-border:   #fecaca;
  --c-err-text:     #b91c1c;

  --c-warn:         #d97706;
  --c-warn-bg:      #fffbeb;
  --c-warn-border:  #fde68a;
  --c-warn-text:    #92400e;

  --c-info:         #2563eb;
  --c-info-bg:      #eff6ff;
  --c-info-border:  #bfdbfe;
  --c-info-text:    #1d4ed8;

  --r:      .4rem;
  --r-lg:   .75rem;
  --r-pill: 9999px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.1),  0 1px 4px rgba(0,0,0,.06);
  --t: 140ms ease;
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-accent); }
a:hover { color: var(--c-accent-dark); }

/* ── Buttons  (same selectors as Milligram → cascade wins) ── */
.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  background-color: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: var(--r);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  font-weight: 500;
  height: auto;
  letter-spacing: 0;
  line-height: 1.5;
  padding: .5rem 1rem;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  transition: background-color var(--t), border-color var(--t), box-shadow var(--t);
}
.button:focus, .button:hover,
button:focus, button:hover,
input[type='button']:focus, input[type='button']:hover,
input[type='reset']:focus,  input[type='reset']:hover,
input[type='submit']:focus, input[type='submit']:hover {
  background-color: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  color: #fff;
  box-shadow: 0 2px 6px rgba(37,99,235,.25);
}

/* Outline */
.button.button-outline,
button.button-outline {
  background-color: var(--c-surface);
  border-color: var(--c-border-dark);
  color: var(--c-text);
}
.button.button-outline:hover,
button.button-outline:hover {
  background-color: var(--c-surface-alt);
  border-color: var(--c-border-dark);
  color: var(--c-text);
  box-shadow: none;
}

/* Danger outline */
.button.button-danger,
button.button-danger {
  background-color: var(--c-surface);
  border-color: var(--c-err);
  color: var(--c-err);
}
.button.button-danger:hover,
button.button-danger:hover {
  background-color: var(--c-err);
  border-color: var(--c-err);
  color: #fff;
  box-shadow: 0 2px 6px rgba(220,38,38,.2);
}

/* Danger solid */
.button.button-danger-solid,
button.button-danger-solid {
  background-color: var(--c-err);
  border-color: var(--c-err);
  color: #fff;
}
.button.button-danger-solid:hover,
button.button-danger-solid:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

/* Sizes */
.button.button-sm, button.button-sm { font-size: .8rem;    padding: .3rem .65rem; }
.button.button-lg, button.button-lg { font-size: .9375rem; padding: .65rem 1.4rem; }

/* Button group */
.btn-group          { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.btn-group form     { margin: 0; }

/* Square icon-only button — fixed 2rem × 2rem, centered icon */
.button.icon-btn,
button.icon-btn {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
}

/* Row actions: icon buttons in a tight row */
.row-actions { display: flex; gap: .3rem; align-items: center; }

/* ── Form inputs  (same selectors as Milligram → cascade wins) */
input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
textarea,
select {
  border: 1px solid var(--c-border-dark);
  border-radius: var(--r);
  color: var(--c-text);
  height: auto;
  padding: .5rem .75rem;
  transition: border-color var(--t), box-shadow var(--t);
}
input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
textarea:focus,
select:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
  outline: 0;
}

/* Custom select arrow (Milligram removes native arrow, we add ours) */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23637283' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.5rem;
}

label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .35rem;
}
label i { margin-right: .3rem; }

.field             { margin-bottom: 1.25rem; }
.field-hint        { display: block; font-size: .8rem; color: var(--c-muted); margin-top: .25rem; }

.form-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-border);
}
.form-section-last { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* ── Conditional connection fields (CSS :has(), no JS) ────── */
/* Hide by default */
.field-feed-url,
.field-gotosocial { display: none; }

/* Show Feed URL when read_type=feed_rss OR write_type=feed_rss */
.card:has(#read_type  option[value="feed_rss"]:checked) .field-feed-url,
.card:has(#write_type option[value="feed_rss"]:checked) .field-feed-url { display: block; }

/* Show Instance when read_type=gotosocial OR write_type=gotosocial */
.card:has(#read_type  option[value="gotosocial"]:checked) .field-gotosocial,
.card:has(#write_type option[value="gotosocial"]:checked) .field-gotosocial { display: block; }

/* Hide the whole Connection settings section when no field is visible */
.form-section-conn { display: none; }
.card:has(#read_type  option[value="feed_rss"]:checked)    .form-section-conn,
.card:has(#write_type option[value="feed_rss"]:checked)    .form-section-conn,
.card:has(#read_type  option[value="gotosocial"]:checked)  .form-section-conn,
.card:has(#write_type option[value="gotosocial"]:checked)  .form-section-conn { display: block; }
.form-section-label {
  font-size: .73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-muted);
  margin-bottom: 1rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Toggle switch (CSS-only, no JS) ─────────────────────── */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  user-select: none;
  margin-top: .25rem;
}
.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-track {
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.5rem;
  background: var(--c-border-dark);
  border-radius: 9999px;
  position: relative;
  transition: background .18s;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1.1rem;
  height: 1.1rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s;
}
.toggle-switch input:checked ~ .toggle-track {
  background: var(--c-accent);
}
.toggle-switch input:checked ~ .toggle-track::after {
  transform: translateX(1.25rem);
}
.toggle-on  { display: none;   font-size: .8125rem; font-weight: 600; color: var(--c-accent); }
.toggle-off { display: inline; font-size: .8125rem; font-weight: 600; color: var(--c-muted);  }
.toggle-switch input:checked ~ .toggle-on  { display: inline; }
.toggle-switch input:checked ~ .toggle-off { display: none;   }

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 3.25rem;
  background: var(--c-topbar);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: .75rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.35);
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #e8eef7;
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-brand:hover { text-decoration: none; color: #fff; }
.topbar-brand i     { color: #6b8dd6; font-size: 1rem; }
.topbar-spacer      { flex: 1; }

/* Breadcrumb trail inside topbar */
.topbar-crumb {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: #7d93a9;
  margin-left: .25rem;
  overflow: hidden;
}
.topbar-crumb a       { color: #93b4ef; text-decoration: none; white-space: nowrap; }
.topbar-crumb a:hover { color: #b9cdf5; }
.topbar-crumb-sep     { color: #4a5568; font-size: .65rem; flex-shrink: 0; }
.topbar-crumb-here    { color: #b8cbdf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }

/* Topbar action buttons */
.topbar-actions { display: flex; align-items: center; gap: .2rem; flex-shrink: 0; }
.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  border-radius: var(--r);
  font-size: .8rem;
  font-weight: 500;
  color: #8fa3bb;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.topbar-btn:hover          { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.topbar-btn i              { font-size: .8rem; }
.topbar-btn-primary        { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.topbar-btn-primary:hover  { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #fff; }
.topbar-btn-danger:hover   { background: rgba(220,38,38,.15); color: #fca5a5; }

/* ── Page layouts ─────────────────────────────────────────── */
/* Base page: shared centering + padding for all layout variants */
.page,
.page-sm,
.page-narrow,
.page-edit {
  margin: 0 auto;
  padding: 2rem 1.75rem;
  width: 100%;
}

/* Full-width content (home table, edit form) */
.page,
.page-sm,
.page-edit { max-width: 1020px; }

/* Narrow content (confirm dialogs, success pages, schedule, etc.) */
.page-narrow { max-width: 680px; }

/* Edit page: card and oauth-panel fill the full .page-edit width */
.page-edit .card,
.page-edit .oauth-panel { width: 100%; box-sizing: border-box; }

/* Narrow card helper (used standalone inside .page) */
.card-narrow { max-width: 680px; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.page-title   { display: flex; align-items: center; gap: .6rem; }
.page-title h1 { margin: 0; font-size: 1.65rem; font-weight: 700; letter-spacing: -.01em; }
.page-title i  { color: var(--c-accent); font-size: 1.1rem; opacity: .85; }
.page-actions  { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ── Auth layout ──────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(135deg, #e8eef8 0%, #f4f7fa 60%, #eef2f9 100%);
}
.auth-card     { width: 100%; max-width: 400px; }
.auth-logo {
  width: 3.25rem;
  height: 3.25rem;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
  border-radius: var(--r-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 1.5rem;
  box-shadow: 0 6px 18px rgba(59,111,212,.35);
}
.auth-logo-warn          { background: var(--c-warn); box-shadow: 0 4px 14px rgba(217,119,6,.3); }
.auth-heading            { margin: 0 0 .3rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; }
.auth-sub                { color: var(--c-muted); margin: 0 0 1.75rem; font-size: .9rem; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t);
}
.card-header {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.card-header h2, .card-header h3 { margin: 0; font-size: .9375rem; }
.card-body   { padding: 1.25rem; }
.card-footer {
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
/* milligram gives form margin-bottom:2.5rem — reset inside card-footer.
   display:contents makes the form transparent to flex so its button aligns
   directly with sibling anchor buttons. */
.card-footer form { margin: 0; display: contents; }

/* Card header color variants */
.card-header-success {
  background: var(--c-ok-bg);
  border-bottom-color: var(--c-ok-border);
}
.card-header-success h2, .card-header-success h3 { color: var(--c-ok-text); }

.card-header-danger {
  background: var(--c-err-bg);
  border-bottom-color: var(--c-err-border);
}
.card-header-danger h2, .card-header-danger h3 { color: var(--c-err-text); }

/* ── Tables ───────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  background: var(--c-surface);
}
table            { width: 100%; border-collapse: collapse; }
thead th {
  padding: .6rem 1rem;
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  color: var(--c-subtle);
  text-transform: uppercase;
  letter-spacing: .07em;
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
thead th i       { margin-right: .3rem; opacity: .8; }
/* reset milligram's first-child padding removal */
thead th:first-child,
tbody td:first-child { padding-left: 1rem; }
thead th:last-child,
tbody td:last-child  { padding-right: 1rem; }
tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
  font-size: .875rem;
  line-height: 1.5;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr           { background: var(--c-surface); transition: background 100ms; }
tbody tr:hover     { background: #f5f8ff; }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  line-height: 1;
  border: 1px solid;
}
.badge-dot           { width: .42rem; height: .42rem; border-radius: 50%; flex-shrink: 0; }
.badge-success       { background: var(--c-ok-bg);   color: var(--c-ok-text);   border-color: var(--c-ok-border); }
.badge-success .badge-dot { background: var(--c-ok); }
.badge-muted         { background: var(--c-surface-alt); color: var(--c-muted); border-color: var(--c-border); }
.badge-muted .badge-dot   { background: var(--c-border-dark); }
.badge-error         { background: var(--c-err-bg);  color: var(--c-err-text);  border-color: var(--c-err-border); }
.badge-warning       { background: var(--c-warn-bg); color: var(--c-warn-text); border-color: var(--c-warn-border); }
.badge-info          { background: var(--c-info-bg); color: var(--c-info-text); border-color: var(--c-info-border); }

/* Connector type indicator */
.type-chip   { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--c-text); background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--r); padding: .2rem .5rem; }
.type-chip i { color: var(--c-accent); font-size: .75rem; }
.flow-arrow  { color: var(--c-border-dark); font-size: .65rem; margin: 0 .15rem; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: var(--r);
  margin-bottom: 1.25rem;
  border: 1px solid;
}
.alert > i         { margin-top: .15rem; flex-shrink: 0; }
.alert-body        { flex: 1; }
.alert-body ul     { margin: .25rem 0 0; padding-left: 1.2rem; }
.alert-body li     { margin-bottom: .15rem; }
.alert-success     { background: var(--c-ok-bg);   color: var(--c-ok-text);   border-color: var(--c-ok-border); }
.alert-error       { background: var(--c-err-bg);  color: var(--c-err-text);  border-color: var(--c-err-border); }
.alert-warning     { background: var(--c-warn-bg); color: var(--c-warn-text); border-color: var(--c-warn-border); }
.alert-info        { background: var(--c-info-bg); color: var(--c-info-text); border-color: var(--c-info-border); }

/* Legacy .message / .error classes */
.message           { padding: .75rem 1rem; border-radius: var(--r); border: 1px solid; margin-bottom: 1.25rem; }
.message.success   { background: var(--c-ok-bg);   color: var(--c-ok-text);   border-color: var(--c-ok-border); }
.message.error,
.error             { display: block; padding: .75rem 1rem; border-radius: var(--r); border: 1px solid; margin-bottom: 1.25rem;
                     background: var(--c-err-bg); color: var(--c-err-text); border-color: var(--c-err-border); }
.message.info      { background: var(--c-info-bg); color: var(--c-info-text); border-color: var(--c-info-border); }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state       { text-align: center; padding: 3rem 1rem; }
.empty-state-icon  { font-size: 2.5rem; color: var(--c-subtle); margin-bottom: 1rem; }
.empty-state h3    { color: var(--c-muted); font-weight: 500; margin-bottom: .25rem; }
.empty-state p     { color: var(--c-muted); font-size: .9375rem; margin-bottom: 1.25rem; }

/* ── Status indicators ────────────────────────────────────── */
.status-row  { display: flex; align-items: center; gap: .75rem; }
.status-dot  { width: .65rem; height: .65rem; border-radius: 50%; flex-shrink: 0; }
.status-ok   { background: var(--c-ok);  box-shadow: 0 0 0 3px var(--c-ok-bg); }
.status-bad  { background: var(--c-err); box-shadow: 0 0 0 3px var(--c-err-bg); }

/* ── OAuth panel ──────────────────────────────────────────── */
.oauth-panel { background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 1.25rem; margin-top: 1.5rem; }
.oauth-panel-title { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; margin-bottom: 1rem; }
.oauth-panel-title i { color: var(--c-accent); }
.oauth-status-line { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }

/* ── Footer ───────────────────────────────────────────────── */
.page-footer { text-align: center; padding: 3rem 0 1rem; font-size: .78rem; color: var(--c-subtle); border-top: 1px solid var(--c-border); margin-top: 2.5rem; }

/* ── Utilities ────────────────────────────────────────────── */
.text-muted  { color: var(--c-muted); }
.text-subtle { color: var(--c-subtle); }
.text-ok     { color: var(--c-ok); }
.text-err    { color: var(--c-err); }
.text-warn   { color: var(--c-warn); }
.fw-500      { font-weight: 500; }
.fw-600      { font-weight: 600; }
.d-flex      { display: flex; }
.align-center{ align-items: center; }
.gap-2       { gap: .5rem; }
.gap-3       { gap: .75rem; }
.mb-0        { margin-bottom: 0; }
.mb-4        { margin-bottom: 1rem; }
.mb-6        { margin-bottom: 1.5rem; }
.mt-0        { margin-top: 0; }
.mt-4        { margin-top: 1rem; }

/* ── Connector table helpers ──────────────────────────────── */
.connector-name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--c-accent);
  text-decoration: none;
}
.connector-name:hover { text-decoration: underline; color: var(--c-accent-dark); }

.flow-chips       { display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap; }

.sched-label      { font-size: .85rem; color: var(--c-muted); }
.sched-label i    { margin-right: .25rem; }
.sched-code       { font-family: ui-monospace, monospace; font-size: .78rem; background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: .25rem; padding: .1rem .35rem; color: var(--c-muted); }

.row-actions      { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.row-actions form { margin: 0; display: contents; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .page, .page-sm        { padding: 1.25rem 1rem; }
  .topbar                { padding: 0 1rem; }
  .topbar-btn span       { display: none; }
  .topbar-crumb          { display: none; }
  .page-header           { flex-direction: column; align-items: flex-start; }
  .form-row              { grid-template-columns: 1fr; }
  thead th, tbody td     { padding: .55rem .75rem; font-size: .8rem; }
}

/* ══════════════════════════════════════════════════════
   LOG VIEWER
   ══════════════════════════════════════════════════════ */

/* ── Page header ──────────────────────────────────────── */
.page-logs .page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.page-logs .page-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1;
}
.page-logs .page-title h1 {
  margin: 0;
  font-size: 1.5rem;
}
.page-logs .page-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ── Stats bar ────────────────────────────────────────── */
.log-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.log-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .6rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  min-width: 7rem;
  transition: border-color .15s, background .15s;
}
a.log-stat-item:hover { border-color: var(--c-accent); background: var(--c-accent-dim); }
a.log-stat-item.active { border-color: var(--c-accent); background: var(--c-accent-dim); }
.log-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.log-stat-lbl {
  font-size: .72rem;
  color: var(--c-muted);
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* ── Filter card ──────────────────────────────────────── */
.log-filter-card { margin-bottom: 1.25rem; }
.log-filter-form  { margin: 0; }
.log-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
}
.log-filter-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.log-filter-field label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-muted);
  white-space: nowrap;
}
.log-filter-field select,
.log-filter-field input[type="date"],
.log-filter-field input[type="search"] {
  margin: 0;
  height: 2.4rem;
  padding: .35rem .6rem;
  font-size: .85rem;
  min-width: 9rem;
}
.log-filter-search input { min-width: 16rem; }
.log-filter-actions .btn-group {
  display: flex;
  gap: .4rem;
}
.log-filter-actions .button { margin: 0; height: 2.4rem; }

/* ── Result meta ──────────────────────────────────────── */
.log-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  color: var(--c-muted);
  margin-bottom: .6rem;
}

/* ── Log table ────────────────────────────────────────── */
.log-table-wrap { overflow-x: auto; }
.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}
.log-table th { white-space: nowrap; }
.col-time    { width: 9rem; white-space: nowrap; }
.col-level   { width: 8rem; }
.col-channel { width: 8rem; }
.col-message { width: auto; }

.log-time {
  display: block;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.log-timesub {
  display: block;
  font-size: .75rem;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.log-row-error    { background: rgba(220,38,38,.04); }
.log-row-critical { background: rgba(220,38,38,.04); }
.log-row-warning  { background: rgba(217,119,6,.04); }

.log-channel-link {
  color: var(--c-accent);
  text-decoration: none;
  font-size: .8rem;
}
.log-channel-link:hover { text-decoration: underline; }

/* ── Context expand (<details>) ───────────────────────── */
.log-ctx { margin: 0; }
.log-ctx-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .15rem 0;
}
.log-ctx-summary::-webkit-details-marker { display: none; }
.log-ctx-caret {
  font-size: .65rem;
  color: var(--c-muted);
  transition: transform .15s;
  flex-shrink: 0;
}
details[open] .log-ctx-caret { transform: rotate(90deg); }
.log-ctx-msg {
  word-break: break-word;
  color: var(--c-text);
}
.log-msg-plain { word-break: break-word; }

.log-ctx-body {
  margin-top: .4rem;
  padding: .5rem .75rem;
  background: var(--c-bg);
  border-left: 3px solid var(--c-border);
  border-radius: 0 var(--radius) var(--radius) 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .75rem;
}
.ctx-kv { display: contents; }
.ctx-key {
  font-family: monospace;
  font-size: .8rem;
  color: var(--c-muted);
  white-space: nowrap;
  align-self: start;
  padding-top: .1rem;
}
.ctx-val {
  font-size: .83rem;
  word-break: break-all;
}
.ctx-val code {
  font-size: .78rem;
  background: var(--c-surface);
  padding: .1rem .3rem;
  border-radius: 3px;
}

/* ── Pagination ───────────────────────────────────────── */
.pager {
  display: flex;
  align-items: center;
  gap: .3rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.5rem 0 1rem;
}
.pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .6rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: .84rem;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
a.pager-btn:hover { background: var(--c-accent-dim); border-color: var(--c-accent); }
.pager-current {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
  font-weight: 700;
}
.pager-disabled {
  opacity: .35;
  cursor: not-allowed;
}
.pager-ellipsis {
  color: var(--c-muted);
  padding: 0 .3rem;
}

/* ── Responsive adjustments ───────────────────────────── */
@media (max-width: 700px) {
  .log-filter-row      { flex-direction: column; }
  .log-filter-field    { width: 100%; }
  .log-filter-field select,
  .log-filter-field input { width: 100%; min-width: 0; }
  .log-stats           { gap: .5rem; }
  .log-stat-item       { min-width: 5rem; padding: .45rem .6rem; }
  .log-meta            { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .col-channel         { display: none; }
}

/* ── POST-form navigation (no JS, no query strings) ── */

/* Stats bar: form wraps the stat card button */
.log-stat-form {
  display: contents; /* transparent in flex layout */
}
.log-stat-form button.log-stat-item {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  /* visual styles inherited from .log-stat-item */
}

/* Pager: form fits inline in flex pager */
.pager-form {
  display: contents;
}
.pager-form button.pager-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Channel cell: form + button look like a link */
.log-chan-form {
  display: inline;
  margin: 0;
  padding: 0;
}
button.log-channel-link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  /* visual styles inherited from .log-channel-link */
}