/* ============================================================================
   Varpnir dashboard layout and components (DESIGN.md §5). No inline styles:
   the CSP allows style-src 'self' only.
   ========================================================================= */

*,
*::before,
*::after {
   box-sizing: border-box;
}

/* Components set display; the hidden attribute must still win. */
[hidden] {
   display: none !important;
}

html,
body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
   font-family: var(--font);
   font-size: 14px;
   line-height: 1.5;
}

a {
   color: var(--accent);
   text-decoration: none;
}
a:hover {
   text-decoration: underline;
}

:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
}

h1,
h2,
h3 {
   margin: 0;
   font-weight: 700;
   letter-spacing: -0.01em;
}
h1 {
   font-size: 22px;
}
h2 {
   font-size: 16px;
}
h3 {
   font-size: 14px;
}

.mono {
   font-family: var(--mono);
   font-size: 13px;
}
.muted {
   color: var(--text-muted);
}
.secondary {
   color: var(--text-secondary);
}
.num {
   text-align: right;
   font-variant-numeric: tabular-nums;
}
.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
}

/* ---- shell -------------------------------------------------------------- */

.shell {
   display: grid;
   grid-template-columns: var(--sidebar) 1fr;
   min-height: 100vh;
   /* The sidebar column keeps its colour on pages taller than the window. */
   background: linear-gradient(
      90deg,
      var(--surface) calc(var(--sidebar) - 1px),
      var(--border) calc(var(--sidebar) - 1px) var(--sidebar),
      var(--bg) var(--sidebar)
   );
}

.sidebar {
   position: sticky;
   top: 0;
   height: 100vh;
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 20px 12px;
   background: var(--surface);
   border-right: 1px solid var(--border);
}

.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0 8px 16px;
}
.brand-logo {
   width: 112px;
   height: 28px;
   background: var(--logo) left center / contain no-repeat;
}
.brand-app {
   font-size: 12px;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.06em;
}

.nav {
   display: flex;
   flex-direction: column;
   gap: 2px;
   margin: 0;
   padding: 0;
   list-style: none;
}
.nav a {
   display: block;
   padding: 7px 10px;
   border-radius: 6px;
   color: var(--text-secondary);
   font-weight: 500;
}
.nav a:hover {
   background: var(--surface-raised);
   color: var(--text);
   text-decoration: none;
}
.nav a[aria-current="page"] {
   background: var(--accent-bg);
   color: var(--accent);
   font-weight: 600;
}

.sidebar-footer {
   margin-top: auto;
   padding: 12px 8px 0;
   border-top: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   gap: 8px;
   font-size: 13px;
}
.sidebar-footer .who {
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
}
.sidebar-footer .row {
   display: flex;
   gap: 8px;
}

.main {
   padding: 28px 32px 48px;
   min-width: 0;
   max-width: 1280px;
}

@media (max-width: 900px) {
   .shell {
      grid-template-columns: minmax(0, 1fr);
      background: var(--bg);
   }
   .sidebar {
      position: static;
      min-width: 0;
      height: auto;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      padding: 12px 16px;
   }
   .brand {
      padding: 0;
   }
   .nav {
      flex-direction: row;
      overflow-x: auto;
      width: 100%;
      min-width: 0;
   }
   .toasts {
      left: 16px;
   }
   .nav a {
      white-space: nowrap;
   }
   .sidebar-footer {
      margin-top: 0;
      border-top: 0;
      flex-direction: row;
      align-items: center;
      width: 100%;
   }
   .main {
      padding: 20px 16px 40px;
   }
}

/* ---- page structure ----------------------------------------------------- */

.page-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 20px;
}
.page-header p {
   margin: 4px 0 0;
   color: var(--text-secondary);
}
.actions {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}

.stack {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.panel {
   background: var(--surface-raised);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 18px 20px;
}
.panel > h2 {
   margin-bottom: 12px;
}
.panel > h3 {
   margin: 18px 0 8px;
}
.panel > .actions,
.panel > .form + .form {
   margin-top: 16px;
}
.panel > .form + .form {
   padding-top: 16px;
   border-top: 1px solid var(--border);
}
blockquote {
   margin: 0 0 12px;
   padding: 2px 0 2px 12px;
   border-left: 3px solid var(--accent);
}
input[type="search"] {
   min-width: 260px;
}
.panel-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
}

.cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
   gap: 12px;
}
.card {
   background: var(--surface-raised);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 14px 16px;
}
.card-label {
   font-size: 12px;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}
.card-value {
   font-size: 24px;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
}
.card-sub {
   font-size: 12px;
   color: var(--text-secondary);
}

.grid-2 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 20px;
}

dl.facts {
   display: grid;
   grid-template-columns: max-content 1fr;
   gap: 6px 16px;
   margin: 0;
}
dl.facts dt {
   color: var(--text-muted);
}
dl.facts dd {
   margin: 0;
}

/* ---- tables ------------------------------------------------------------- */

.table-wrap {
   overflow-x: auto;
   border: 1px solid var(--border);
   border-radius: var(--radius);
}
table {
   width: 100%;
   border-collapse: collapse;
}
th,
td {
   padding: 9px 12px;
   text-align: left;
   border-bottom: 1px solid var(--border);
   vertical-align: middle;
}
th {
   position: sticky;
   top: 0;
   background: var(--surface);
   font-size: 12px;
   font-weight: 600;
   color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
}
tbody tr:nth-child(even) {
   background: var(--surface-raised);
}
tbody tr:last-child td {
   border-bottom: 0;
}
td.num,
th.num {
   text-align: right;
}

.empty {
   padding: 28px 16px;
   text-align: center;
   color: var(--text-secondary);
}

/* ---- badges, banners, toasts ------------------------------------------- */

.badge {
   display: inline-block;
   padding: 1px 8px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 600;
   background: var(--surface);
   color: var(--text-secondary);
   white-space: nowrap;
}
.badge.ok {
   background: var(--ok-bg);
   color: var(--ok);
}
.badge.warn {
   background: var(--warn-bg);
   color: var(--warn);
}
.badge.danger {
   background: var(--danger-bg);
   color: var(--danger);
}
.badge.accent {
   background: var(--accent-bg);
   color: var(--accent);
}
.badge.info {
   background: var(--info-bg);
   color: var(--info);
}

.banner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 10px 14px;
   border-radius: var(--radius);
   border: 1px solid transparent;
   margin-bottom: 12px;
}
.banner.warn {
   background: var(--warn-bg);
   border-color: var(--warn);
}
.banner.danger {
   background: var(--danger-bg);
   border-color: var(--danger);
}
.banner.info {
   background: var(--info-bg);
   border-color: var(--info);
}
.banner.ok {
   background: var(--ok-bg);
   border-color: var(--ok);
}

.error-box {
   padding: 10px 14px;
   border-radius: var(--radius);
   background: var(--danger-bg);
   color: var(--danger);
   font-weight: 500;
}
.error-box .request {
   display: block;
   font-weight: 400;
   color: var(--text-secondary);
   font-size: 12px;
}

.toasts {
   position: fixed;
   right: 16px;
   bottom: 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   z-index: 10;
}
.toast {
   padding: 10px 14px;
   border-radius: var(--radius);
   background: var(--text);
   color: var(--bg);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ---- forms and buttons -------------------------------------------------- */

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 7px 14px;
   border-radius: 6px;
   border: 1px solid var(--border);
   background: var(--surface-raised);
   color: var(--text);
   font: inherit;
   font-weight: 600;
   cursor: pointer;
   white-space: nowrap;
}
.btn:hover {
   border-color: var(--text-muted);
}
.btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}
.btn.primary {
   background: var(--accent);
   border-color: var(--accent);
   color: var(--on-accent);
}
.btn.danger {
   color: var(--danger);
   border-color: var(--danger);
   background: transparent;
}
.btn.danger.armed {
   background: var(--danger);
   color: var(--bg);
}
.btn.link {
   border: 0;
   background: none;
   padding: 0;
   color: var(--accent);
   font-weight: 500;
}
.btn.small {
   padding: 3px 10px;
   font-size: 13px;
}

form.form {
   display: flex;
   flex-direction: column;
   gap: 14px;
   max-width: 560px;
}
form.form.inline {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-end;
   max-width: none;
}
.field {
   display: flex;
   flex-direction: column;
   gap: 4px;
}
.field label {
   font-weight: 600;
   font-size: 13px;
}
.field .hint {
   font-size: 12px;
   color: var(--text-muted);
}
input,
select,
textarea {
   font: inherit;
   color: var(--text);
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 7px 10px;
   min-width: 0;
}
input:focus,
select:focus,
textarea:focus {
   border-color: var(--accent);
   outline: none;
}
input[type="checkbox"] {
   width: 16px;
   height: 16px;
   accent-color: var(--accent);
}
.check {
   display: flex;
   gap: 8px;
   align-items: flex-start;
}
.row-fields {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 12px;
}
.form-actions {
   display: flex;
   gap: 8px;
   align-items: center;
}

/* ---- secrets ------------------------------------------------------------ */

.secret {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
}
.secret .value {
   font-family: var(--mono);
   padding: 4px 8px;
   border-radius: 6px;
   background: var(--surface);
   border: 1px solid var(--border);
   user-select: all;
   word-break: break-all;
}
.secret .countdown {
   font-size: 12px;
   color: var(--text-muted);
}

/* ---- usage bars --------------------------------------------------------- */

.bars {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.bar-row {
   display: grid;
   grid-template-columns: minmax(120px, 200px) 1fr 70px;
   gap: 12px;
   align-items: center;
}
.bar-track {
   height: 10px;
   border-radius: 5px;
   background: var(--surface);
   overflow: hidden;
}
.bar-fill {
   height: 100%;
   background: var(--series-1);
   border-radius: 5px;
}
.bar-fill.full {
   background: var(--warn);
}
.bar-fill.p0 {
   width: 0;
}
/* Widths in steps of 5 %, so no inline style is needed under the CSP. */
.bar-fill.p5 { width: 5%; } .bar-fill.p10 { width: 10%; } .bar-fill.p15 { width: 15%; }
.bar-fill.p20 { width: 20%; } .bar-fill.p25 { width: 25%; } .bar-fill.p30 { width: 30%; }
.bar-fill.p35 { width: 35%; } .bar-fill.p40 { width: 40%; } .bar-fill.p45 { width: 45%; }
.bar-fill.p50 { width: 50%; } .bar-fill.p55 { width: 55%; } .bar-fill.p60 { width: 60%; }
.bar-fill.p65 { width: 65%; } .bar-fill.p70 { width: 70%; } .bar-fill.p75 { width: 75%; }
.bar-fill.p80 { width: 80%; } .bar-fill.p85 { width: 85%; } .bar-fill.p90 { width: 90%; }
.bar-fill.p95 { width: 95%; } .bar-fill.p100 { width: 100%; }

/* ---- auth pages ---------------------------------------------------------- */

.auth {
   min-height: 100vh;
   display: grid;
   place-items: center;
   padding: 24px 16px;
   background: var(--surface);
}
.auth-card {
   width: min(440px, 100%);
   background: var(--surface-raised);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 28px;
   display: flex;
   flex-direction: column;
   gap: 18px;
}
.auth-card .brand {
   padding: 0;
}
.auth-card.wide {
   width: min(720px, 100%);
}

.tutorial {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 12px;
}
.tutorial .card h3 {
   margin-bottom: 6px;
}
ul.tips {
   margin: 0;
   padding-left: 18px;
   display: flex;
   flex-direction: column;
   gap: 4px;
}