@import "./base.css";

[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
h1 { font-size: var(--font-heading); font-weight: 650; line-height: 1.3; letter-spacing: -.025em; }
h2 { font-size: var(--font-subheading); font-weight: 600; }
.brand { font-size: var(--font-brand); font-weight: 700; letter-spacing: -.055em; }
.eyebrow { color: var(--color-muted); font-size: var(--font-size); }
.auth-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); }
.auth-toolbar { position: absolute; top: var(--space-6); right: var(--space-6); }
.auth-card { width: min(100%, 25rem); padding: var(--space-8); background: var(--color-surface); }
.auth-card h1 { margin-bottom: var(--space-2); }
.auth-form { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.field-label { display: grid; gap: var(--space-2); font-weight: 600; }
.field-label input { font-weight: 400; }
.security-note { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--font-size); color: var(--color-muted); margin-top: var(--space-6); }
.security-note svg, .theme-control svg { width: var(--icon-size); height: var(--icon-size); flex: none; align-self: center; }
.theme-control { display: flex; align-items: center; gap: var(--space-2); }
.theme-control select { width: auto; flex: 1; }
.admin-sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--space-8); }
.sidebar-brand { padding: var(--space-2) var(--space-2) 0; }
.admin-nav { display: flex; flex-direction: column; gap: var(--plaque-gap); }
.admin-nav .btn { background: transparent; border-color: transparent; }
.admin-nav .btn[aria-current="page"] { background: var(--color-accent-soft); border-color: var(--color-border); font-weight: 600; }
.sidebar-bottom { margin-top: auto; display: grid; gap: var(--space-4); }
.account { display: grid; gap: var(--space-1); overflow-wrap: anywhere; }
.account span { font-size: var(--font-size); }
.admin-main { padding: var(--space-8); }
.admin-toolbar { align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.heading { display: grid; gap: var(--space-2); }
.stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.stat-card { display: flex; flex-direction: column; gap: var(--space-4); background: var(--color-surface); }
.stat-value { font-size: var(--font-stat); line-height: 1; font-weight: 550; font-variant-numeric: tabular-nums; }
.section-note { margin-block: var(--space-4) var(--space-6); font-size: var(--font-size); }
.empty-state { display: grid; justify-items: center; gap: var(--space-2); padding: 4rem var(--space-4); text-align: center; }
.empty-state > svg { height: 2rem; width: 2rem; color: var(--color-muted); margin-bottom: var(--space-3); }
.updated { margin-top: var(--space-4); font-size: var(--font-size); }
.list-tools { display: flex; margin-bottom: var(--space-4); }
.filter-label { display: flex; align-items: baseline; gap: var(--space-3); }
.filter-label select { width: auto; min-width: 12rem; }
.table-panel { padding: 0; overflow: hidden; background: var(--color-surface); }
.admin-table th { font-size: var(--font-size); white-space: nowrap; background: var(--color-panel); }
.admin-table td { white-space: nowrap; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table code { font: var(--font-size) var(--font-mono); }
.pagination { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.error-message { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent); padding: var(--space-3); border-radius: var(--block-radius); margin-block: var(--space-2); }
.startup { padding: var(--space-8); }
@media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .admin-sidebar { position: static; height: auto; gap: var(--space-4); }
  .sidebar-brand { padding: 0; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
  .sidebar-bottom .account { margin-inline-start: auto; }
  .account span { display: none; }
  .admin-main { padding: var(--space-4); }
  .admin-toolbar { margin-bottom: var(--space-6); }
  .auth-card { padding: var(--space-6); }
  .auth-toolbar { top: var(--space-4); right: var(--space-4); }
  .auth-page { padding: 5rem var(--space-4) var(--space-6); }
  .pagination { justify-content: space-between; }
  .pagination .btn { padding-inline: var(--space-2); }
}

.password-control { position: relative; }
.password-control input { padding-inline-end: calc(var(--control-height) + var(--space-2)); }
.password-toggle { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: var(--control-height); padding: 0; background: transparent; border-color: transparent; }
.password-toggle:hover { background: var(--color-accent-soft); }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.block-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--motion-duration), opacity var(--motion-duration); }
.block-reveal.is-open { grid-template-rows: 1fr; opacity: 1; }
.block-reveal-inner { min-height: 0; overflow: hidden; }
.license-form { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.job-history { margin-bottom: var(--space-4); }
.job-history h2 { margin-bottom: var(--space-3); }