@import url("tokens-material.css");

/* Theme: Material (light) — Material Design 3 read on top of Mikhmon.
 *
 * A drop-in replacement theme for Mikhmon v3.20, added the same way Cobalt
 * was: additive, alongside the five stock themes and Cobalt — nothing else
 * is touched. It honours the original class contract exactly — every
 * selector the markup uses is implemented here — so no PHP file needs
 * editing. Switch themes from Settings.
 *
 * Structurally this is Cobalt's stylesheet with Material's surface/elevation
 * model swapped in: light "surface container" tones instead of dark paper,
 * real drop shadows carrying elevation instead of hairlines, pill-shaped
 * buttons and nav items, and a filled pill active-indicator instead of a
 * left spine. See tokens-material.css for the palette.
 *
 * Filename keeps the `.min` segment because include/headhtml.php hardcodes it.
 * The file is deliberately left readable so it can be maintained.
 */

/* ==================================================================
   1 · Fonts — self-hosted, so Mikhmon still renders offline
   ================================================================== */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================
   2 · Base
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  /* Tells the browser to paint NATIVE controls light — checkboxes, radios,
     select popups, scrollbars — to match the light Material surface. */
  color-scheme: light;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  text-align: left;
  color: var(--color-ink);
  background-color: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: var(--weight-semi);
  font-style: normal;
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5, h6 { font-size: var(--text-base); }

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

small { font-size: var(--text-sm); color: var(--color-ink-2); }
hr { border: 0; border-top: 1px solid var(--color-rule); margin: var(--space-md) 0; }
code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }

img, svg, video, canvas { max-width: 100%; }

button {
  display: inline-block;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: var(--text-md);
  line-height: 1.5;
  text-decoration: none;
  color: inherit;
}

input, select, textarea { font-family: inherit; margin: auto; }

/* Focus ring — never animated, always visible, ≥3:1 against every surface */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--color-accent-wash); color: var(--color-ink); }

/* Scrollbars — part of the instrument-panel voice, not an afterthought */
* { scrollbar-width: thin; scrollbar-color: var(--color-paper-4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-paper-4);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-ink-3); }

/* ==================================================================
   3 · App chrome — navbar, side-rail, main, footer
   ================================================================== */
.wraprer { width: 100%; }

/* navbar + sidenav are FIXED chrome; #main is offset to clear them.
   Dropping these turns the whole app into a normal-flow stack. */
#notify, .navbar, .sidenav { position: fixed; }

#main {
  margin-top: 55px;
  transition: margin-left var(--dur-medium) var(--ease-out);
}

#brand {
  min-width: 165px;
  font-weight: var(--weight-bold);
  vertical-align: middle;
  letter-spacing: var(--tracking-tight);
}
#brand span { font-size: 18px; line-height: 10%; }

#notify, #temp { display: none; }
#notify {
  box-sizing: border-box;
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}

/* Filled colour bar — Material's most recognisable trait — instead of a
   neutral surface with a hairline. #brand / .navbar-left / .navbar-right /
   .ses / .dropd all live inside it, so they get chrome-specific treatment
   below rather than the neutral card tokens the rest of the app uses. */
.navbar {
  overflow: hidden;
  z-index: 9;
  top: 0;
  width: 100%;
  height: var(--navbar-h);
  background-color: var(--color-chrome);
  color: var(--color-chrome-ink);
  border-bottom: none;
  box-shadow: var(--shadow-raised);
}

#brand { color: var(--color-chrome-ink); }

.navbar-left a, .navbar-right a {
  display: block;
  padding: 15px var(--space-lg);
  color: var(--color-chrome-ink);
  text-align: center;
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  opacity: 0.9;
  transition: opacity var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.navbar-left a { float: left; font-size: var(--text-md); }
.navbar-right a { float: right; }
.navbar a:hover { opacity: 1; }
.navbar-hover:hover { background-color: rgba(255, 255, 255, 0.14); }
.navbar-hover:active { background-color: rgba(255, 255, 255, 0.22); }

.ses {
  float: right;
  height: 30px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-chrome-ink);
  background-color: transparent;
  border: none;
}
.spa { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

/* NOT inside the navbar (it's the interface picker on Traffic Monitor) —
   normal card-surface tokens, unlike .ses which lives on the chrome bar. */
.dropd {
  float: right;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-input);
  background-color: var(--color-well);
  color: var(--color-ink);
  font-size: var(--text-sm);
  padding: var(--space-2xs) var(--space-xs);
}
.dropd:hover { border-color: var(--color-ink-3); }

/* Soft brand-tinted surface — distinct from the pure-white cards it sits
   next to, so the coloured navbar doesn't look bolted onto a flat page. */
.sidenav {
  height: 100%;
  width: 0;
  z-index: 9;
  top: 0;
  left: 0;
  padding-bottom: var(--space-2xl);
  margin-top: calc(var(--navbar-h) + 1px);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--color-paper-3);
  border-right: 1px solid var(--color-rule);
  transition: width var(--dur-medium) var(--ease-out);
}
.sidenav i {
  font-size: 16px;
  width: 22px;
  margin-right: var(--space-2xs);
  padding: 0;
  text-align: center;
  opacity: 0.85;
}

/* Material 3 nav-rail items: pill-shaped, not the small input radius. */
.dropdown-btn, .sidenav a {
  display: block;
  width: calc(100% - 10px);
  margin: var(--space-3xs) var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  border: none;
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: 0;
  transition: color var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.dropdown-btn:hover, .sidenav a:hover {
  color: var(--color-ink);
  background-color: var(--color-paper-3);
  border-radius: var(--radius-pill);
}
.dropdown-btn:active, .sidenav a:active { background-color: var(--color-paper-4); }

/* Active route — Material's filled pill "active indicator", not a spine */
.active {
  position: relative;
  color: var(--color-accent-lo);
  background: var(--color-accent-wash);
  border-radius: var(--radius-pill);
}
.active i { opacity: 1; color: var(--color-accent); }

.dropdown-container { display: none; }
.dropdown-container a { padding-left: var(--space-xl); font-size: var(--text-base); }
.dropdown-container i { padding-left: 0; }
.menu-open { display: block; }

.dropdown-btn .fa-caret-down,
.dropdown-btn .fa-caret-left { float: right; margin-top: 3px; opacity: 0.6; }

.main-container { padding: var(--space-md) var(--space-md) var(--space-2xl); }

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: var(--color-paper-2);
  border-top: 1px solid var(--color-rule);
  color: var(--color-ink-3);
  font-size: var(--text-sm);
}

/* ==================================================================
   4 · Grid
   ================================================================== */
.row::after, .input-group::after { content: ""; clear: both; display: table; }
[class*="col-"], [class*="input-group-"] { float: left; }

.col-1  { width: 8.3333%; }   .col-2  { width: 16.6667%; }
.col-3  { width: 25%; }       .col-4  { width: 33.3333%; }
.col-5  { width: 41.6667%; }  .col-6  { width: 50%; }
.col-7  { width: 58.3333%; }  .col-8  { width: 66.6667%; }
.col-9  { width: 75%; }       .col-10 { width: 83.3333%; }
.col-11 { width: 91.6667%; }  .col-12 { width: 100%; }

.col-box-1  { width: 8.3333%; }   .col-box-2  { width: 16.6667%; }
.col-box-3  { width: 25%; }       .col-box-4  { width: 33.3333%; }
.col-box-5  { width: 41.6667%; }  .col-box-6  { width: 50%; }
.col-box-7  { width: 58.3333%; }  .col-box-8  { width: 66.6667%; }
.col-box-9  { width: 75%; }       .col-box-10 { width: 83.3333%; }
.col-box-11 { width: 91.6667%; }  .col-box-12 { width: 100%; }

.w-1  { width: 8.3333%; }   .w-2  { width: 16.6667%; }
.w-3  { width: 25%; }       .w-4  { width: 33.3333%; }
.w-5  { width: 41.6667%; }  .w-6  { width: 50%; }
.w-7  { width: 58.3333%; }  .w-8  { width: 66.6667%; }
.w-9  { width: 75%; }       .w-10 { width: 83.3333%; }
.w-11 { width: 91.6667%; }  .w-12 { width: 100%; }

/* ==================================================================
   5 · Cards, boxes, tiles
   ================================================================== */
.card {
  margin: var(--space-2xs);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}
.card a { text-decoration: none; }
.card h3 { margin: 0; }

.card-header {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: 0;
  background-color: var(--color-paper-3);
  border-bottom: 1px solid var(--color-rule);
  border-radius: 0;
}
.card-header h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
}
.card-header i { color: var(--color-ink-3); margin-right: var(--space-2xs); }
.card-title { font-size: var(--text-md); font-weight: var(--weight-semi); }

.card-body { padding: var(--space-md); margin-bottom: 0; }
.card-footer {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-rule-soft);
}
.card-footer a { display: inline-block; padding: 0 0 var(--space-2xs); margin-top: var(--space-2xs); min-height: 20px; }

.box {
  margin: var(--space-2xs);
  padding: var(--space-md);
  background-color: var(--color-paper-2);
  border-radius: var(--radius-card);
}
.box a { text-decoration: none; }
.box-bordered { border: 1px solid var(--color-rule); }

.box-group { display: table; width: 100%; }
.box-group > div { display: table-cell; vertical-align: middle; }
.box-group-area { padding: var(--space-sm); }

/* Dashboard stat tile — the figure is the hero, the icon is support */
.box-group-icon {
  display: inline-block;
  width: 25%;
  margin: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  font-size: 30px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  opacity: 0.92;
}

/* Compact counter tile (dashboard Hotspot/PPPoE row) — eight of these sit on
   one screen, so they use a smaller number and tighter padding than a
   regular `.box`, instead of the default's roomier, single-figure sizing. */
.box-stat {
  padding: var(--space-sm) var(--space-md);
  min-height: 56px;
}
.box-stat h1 {
  font-size: var(--text-xl);
  line-height: 1.2;
}
.box-stat h1 span { font-size: var(--text-xs) !important; }
.box-stat > a > div,
.box-stat > div > div {
  font-size: var(--text-sm);
  margin-top: var(--space-3xs);
}

.chart { height: 200px; margin: 0 auto; }

/* ==================================================================
   6 · Buttons — all eight states. Material contained buttons: pill shape,
      resting elevation, lift on hover.
   ================================================================== */
.btn, .btn-login {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: 1.4;
  color: var(--color-ink);
  background-color: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-raised);
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.btn { margin: var(--space-2xs); }
.btn-login { width: 100%; margin: 0; }

.btn:hover, .btn-login:hover {
  background-color: var(--color-paper-4);
  border-color: var(--color-ink-3);
  box-shadow: var(--shadow-float);
}
.btn:active, .btn-login:active { transform: translateY(1px); box-shadow: var(--shadow-raised); }
.btn:focus-visible, .btn-login:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.btn[disabled], .btn-login[disabled], .btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.btn i { margin-right: var(--space-2xs); }
.btn-mrg { margin-right: var(--space-2xs); }

/* Tinted buttons keep their fill but gain a matching border + readable ink */
.btn[class*="bg-"] { border-color: transparent; }
.btn[class*="bg-"]:hover { filter: brightness(1.06); }

/* ==================================================================
   7 · Forms
   ================================================================== */
.form-control, .group-item {
  display: block;
  width: 100%;
  /* Inputs and selects carry an intrinsic min-width (~20 characters). Without
     this they refuse to shrink and punch through the card on narrow screens. */
  min-width: 0;
  padding: var(--space-xs) var(--space-sm);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-ink);
  background-color: var(--color-well);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-input);
  transition: border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.group-item { padding: var(--space-xs) var(--space-sm); }

.form-control:hover, .group-item:hover { border-color: var(--color-ink-3); }
.form-control:focus, .group-item:focus, .btn-login:focus {
  color: var(--color-ink);
  border-color: var(--color-accent);
  outline: 0;
  box-shadow: 0 0 0 3px var(--color-accent-wash);
}
.form-control::placeholder { color: var(--color-ink-3); opacity: 1; }
.form-control[disabled], .form-control[readonly],
.group-item[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--color-paper);
}
.form-control[aria-invalid="true"], .form-control.is-error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.16);
}
.form-control.is-success { border-color: var(--color-success); }

/* Voucher codes, MACs, IPs read as data, not prose */
input[name="name"], input[name="pass"], input[name="password"],
input[name="ratelimit"], input[name="validity"],
.form-control[type="number"] {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-flat);
}

select.form-control, select.group-item {
  appearance: none;
  padding-right: var(--space-xl);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-3) 50%),
                    linear-gradient(135deg, var(--color-ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.plch-center::placeholder { text-align: center; }
.plch-center::-webkit-input-placeholder { text-align: center; }

/* Submit/button inputs and clickable spans are CONTROLS, not fields. Mikhmon
   dresses them in .group-item so they land in an input group; they must still
   read as pressable. */
input[type="submit"], input[type="button"], input[type="reset"] {
  cursor: pointer;
  font-weight: var(--weight-medium);
}
input[type="submit"].group-item,
input[type="button"].group-item,
span.group-item {
  text-align: center;
  background-color: var(--color-paper-3);
  color: var(--color-ink);
  cursor: pointer;
  font-weight: var(--weight-medium);
}
input[type="submit"].group-item:hover,
input[type="button"].group-item:hover,
span.group-item:hover {
  background-color: var(--color-paper-4);
  border-color: var(--color-ink-3);
}
input[type="submit"].group-item:active,
input[type="button"].group-item:active,
span.group-item:active { transform: translateY(1px); }

/* Native checkboxes/radios — the show/hide-password toggle sits inside a
   .group-item wrapper and would otherwise render as a raw white square. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--color-accent);
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
}
.group-item > input[type="checkbox"] { display: inline-block; }

.input-group { display: block; }
.input-group-1  { width: 8.3333%; }   .input-group-2  { width: 16.6667%; }
.input-group-3  { width: 25%; }       .input-group-4  { width: 33.3333%; }
.input-group-5  { width: 41.6667%; }  .input-group-6  { width: 50%; }
.input-group-7  { width: 58.3333%; }  .input-group-8  { width: 66.6667%; }
.input-group-9  { width: 75%; }       .input-group-10 { width: 83.3333%; }
.input-group-11 { width: 91.6667%; }  .input-group-12 { width: 100%; }

/* Pill ends, not square — matches the fully-rounded buttons everywhere else
   (Data Limit+MB, Password show/hide, the Save/Connect/Ping toolbar, etc). */
.group-item-l  { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.group-item-r  { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; margin-left: -1px; }
.group-item-md { border-radius: 0; margin-left: -1px; }
.group-item:focus { position: relative; z-index: 2; }

/* ==================================================================
   8 · Tables
   ================================================================== */
.table {
  width: 100%;
  border-collapse: collapse !important;
  font-variant-numeric: tabular-nums;
}
.table th {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
/* No default cell border: Mikhmon uses `.table` as a FORM LAYOUT mechanism on
   most pages (label cell + input cell), so automatic rules would draw lines
   through every form. Data tables opt in via `.table-bordered`. */
.table td {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-ink);
}
.table td a, .table th a { color: var(--color-accent); text-decoration: none; }
.table td a:hover { color: var(--color-accent-hi); text-decoration: underline; }

/* Header underline only where there is a real header row */
.table thead th { border-bottom: 1px solid var(--color-rule); }

.table-bordered td, .table-bordered th {
  border: 1px solid var(--color-rule-soft) !important;
}
.table-hover tbody tr { transition: background-color var(--dur-instant) linear; }
.table-hover:hover tbody tr:hover,
.table-hover tbody tr:hover { background-color: var(--color-paper-3); }

.tscroll tbody { display: block; overflow: auto; height: 70vh; }
.tscroll thead { position: relative; display: block; }

.overflow { overflow-x: auto; overflow-y: auto; max-height: 80vh; }

/* ==================================================================
   9 · Feedback — alert, progress, spinner, modal
   ================================================================== */
.alert {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-input);
  border: 1px solid var(--color-rule);
  font-size: var(--text-base);
}

.progress {
  width: 100%;
  height: 8px;
  background-color: var(--color-well);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar, .progress-bar-blue, .progress-bar-red {
  height: 8px;
  max-width: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--dur-medium) var(--ease-out);
}
.progress-bar      { background-color: var(--color-ink-2); }
.progress-bar-blue { background-color: var(--color-accent); }
.progress-bar-red  { background-color: var(--color-danger); }

.lds-dual-ring {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin-top: -50px;
  margin-left: -50px;
}
.lds-dual-ring::after {
  content: " ";
  display: block;
  width: 42px;
  height: 42px;
  margin: 1px;
  border-radius: 50%;
  border: 3px solid var(--color-accent);
  border-color: var(--color-accent) transparent var(--color-accent) transparent;
  animation: lds-dual-ring 900ms linear infinite;
}
@keyframes lds-dual-ring { to { transform: rotate(360deg); } }

.modal-window {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-medium) var(--ease-out);
}
.modal-window:target { opacity: 1; pointer-events: auto; }
.modal-window > div {
  position: relative;
  width: min(560px, 90vw);
  margin: 10vh auto;
  padding: var(--space-xl);
  background: var(--color-paper-2);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}
.modal-window h1 { font-size: var(--text-xl); margin: 0 0 var(--space-md); }
.modal-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 28px;
  height: 28px;
  line-height: 26px;
  text-align: center;
  text-decoration: none;
  color: var(--color-ink-2);
  background-color: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.modal-close:hover { background-color: var(--color-danger); color: var(--color-danger-ink); }

/* ==================================================================
   10 · Auth + settings shells
   ================================================================== */
.login-box, .register-box {
  width: 380px;
  margin: 10px auto;
  padding-top: 8vh;
}
.login-box .card, .register-box .card { box-shadow: var(--shadow-float); }

.settings {
  width: 66.66%;
  margin: 5% auto 0;
}

/* ==================================================================
   11 · Colour utilities
   ================================================================== */
[class*="bg-"] { text-decoration: none; }
[class*="text-"] { text-decoration: none; }

/* Anything sitting on a tinted surface takes that surface's ink. Without this,
   links keep the accent colour and become unreadable on yellow/pink/teal tiles. */
[class*="bg-"] a,
[class*="bg-"] .pointer { color: inherit; }
[class*="bg-"] a:hover { color: inherit; text-decoration: underline; }

/* Each fill also publishes its hue as --tint, so large surfaces can carry the
   colour as a marker instead of a flood (see `.box-tile-muted[class*="bg-"]` below). */
.bg-primary,
.bg-blue       { --tint: var(--color-accent);  background-color: var(--tint); color: var(--color-accent-ink); }
.bg-light-blue { --tint: var(--color-info);    background-color: var(--tint); color: var(--color-info-ink); }
.bg-info,
.bg-cyan       { --tint: var(--color-info);    background-color: var(--tint); color: var(--color-info-ink); }
.bg-success,
.bg-green      { --tint: var(--color-success); background-color: var(--tint); color: var(--color-success-ink); }
.bg-warning,
.bg-orange     { --tint: var(--color-warning); background-color: var(--tint); color: var(--color-warning-ink); }
.bg-yellow     { --tint: var(--color-yellow);  background-color: var(--tint); color: var(--color-warning-ink); }
.bg-danger,
.bg-red        { --tint: var(--color-danger);  background-color: var(--tint); color: var(--color-danger-ink); }
.bg-pink       { --tint: var(--color-pink);    background-color: var(--tint); color: var(--color-accent-ink); }
.bg-purple     { --tint: var(--color-purple);  background-color: var(--tint); color: #FFFFFF; }
.bg-indigo     { --tint: var(--color-indigo);  background-color: var(--tint); color: #FFFFFF; }
.bg-teal       { --tint: var(--color-teal);    background-color: var(--tint); color: var(--color-accent-ink); }
.bg-secondary,
.bg-grey       { --tint: var(--color-ink-3);   background-color: var(--color-paper-4); color: var(--color-ink); }
.bg-grey-dark  { --tint: var(--color-ink-3);   background-color: var(--color-paper-3); color: var(--color-ink); }
.bg-dark       { --tint: var(--color-ink-3);   background-color: var(--color-well);    color: var(--color-ink); }
.bg-light      { --tint: var(--color-ink-2);   background-color: var(--color-paper-3); color: var(--color-ink); }
.bg-white      { --tint: var(--color-ink);     background-color: var(--color-ink);     color: var(--color-paper); }

/* Opt-in muted treatment for tiles whose colour is incidental rather than
   meaningful — settings/sessions.php picks a RANDOM fill per router, and a
   full-bleed flood of random colour reads as noise there. Everything else
   (dashboard counters, etc.) keeps the plain solid `.bg-*` fill above, which
   is Mikhmon's original stat-tile look. Add `box-tile-muted` to opt a tile
   into the spine + icon chip treatment instead. */
.box-tile-muted[class*="bg-"] {
  background-color: var(--color-paper-2);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--tint, var(--color-accent));
}
.box-tile-muted[class*="bg-"] a,
.box-tile-muted[class*="bg-"] .pointer { color: var(--color-ink-2); }
.box-tile-muted[class*="bg-"] a:hover,
.box-tile-muted[class*="bg-"] .pointer:hover { color: var(--color-ink); text-decoration: underline; }
/* The category colour rides the icon and the left spine — no filled block.
   `.box-group-icon` is a table-cell, so a background would stretch to the row
   height and read as a slab rather than a chip. `width: 1%` shrinks the cell
   to its content. */
.box-tile-muted[class*="bg-"] .box-group-icon {
  width: 1%;
  padding: 0 var(--space-lg) 0 var(--space-sm);
  font-size: 30px;
  background: none;
  color: var(--tint, var(--color-accent));
  opacity: 1;
}
/* The icon often sits inside a `.connect.pointer` span, which would otherwise
   pick up the muted link colour set above. */
.box-tile-muted[class*="bg-"] .box-group-icon a,
.box-tile-muted[class*="bg-"] .box-group-icon .pointer { color: inherit; }

.text-primary,
.text-blue       { color: var(--color-accent); }
.text-light-blue,
.text-info,
.text-cyan       { color: var(--color-info); }
.text-success,
.text-green      { color: var(--color-success); }
.text-warning,
.text-orange     { color: var(--color-warning); }
.text-yellow     { color: var(--color-yellow); }
.text-danger,
.text-red        { color: var(--color-danger); }
.text-pink       { color: var(--color-pink); }
.text-purple     { color: var(--color-purple); }
.text-indigo     { color: var(--color-indigo); }
.text-teal       { color: var(--color-teal); }
.text-secondary,
.text-grey       { color: var(--color-ink-2); }
.text-grey-dark  { color: var(--color-ink-3); }
.text-dark       { color: var(--color-paper); }
.text-light,
.text-white      { color: var(--color-ink); }

.text-bold   { font-weight: var(--weight-semi); }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-nowrap { white-space: nowrap; }

.align-middle { vertical-align: middle; }
.pointer { cursor: pointer; }

/* ==================================================================
   12 · Radius, spacing, min-height utilities (markup-coupled — values
        match the original framework exactly so no page shifts)
   ================================================================== */
.radius-3   { border-radius: 3px; }
.radius-5   { border-radius: 5px; }
.radius-l-3 { border-radius: 3px 0 0 3px; }
.radius-r-3 { border-radius: 0 3px 3px 0; }
.radius-b-3 { border-radius: 0 0 3px 3px; }
.radius-l-5 { border-radius: 5px 0 0 5px; }
.radius-r-5 { border-radius: 0 5px 5px 0; }

.mr-a { margin: auto; }
.mr-2 { margin: 2px; }  .mr-3 { margin: 3px; }  .mr-4 { margin: 4px; }
.mr-5 { margin: 5px; }  .mr-6 { margin: 6px; }  .mr-7 { margin: 7px; }
.mr-8 { margin: 8px; }  .mr-9 { margin: 9px; }  .mr-10 { margin: 10px; }

.mr-t-2 { margin-top: 2px; }  .mr-t-3 { margin-top: 3px; }
.mr-t-4 { margin-top: 4px; }  .mr-t-5 { margin-top: 5px; }
.mr-t-6 { margin-top: 6px; }  .mr-t-7 { margin-top: 7px; }
.mr-t-8 { margin-top: 8px; }  .mr-t-9 { margin-top: 9px; }
.mr-t-10 { margin-top: 10px; }

.mr-b-2 { margin-bottom: 2px; }  .mr-b-3 { margin-bottom: 3px; }
.mr-b-4 { margin-bottom: 4px; }  .mr-b-5 { margin-bottom: 5px; }
.mr-b-6 { margin-bottom: 6px; }  .mr-b-7 { margin-bottom: 7px; }
.mr-b-8 { margin-bottom: 8px; }  .mr-b-9 { margin-bottom: 9px; }
.mr-b-10 { margin-bottom: 10px; }

.mr-l-2 { margin-left: 2px; }  .mr-l-3 { margin-left: 3px; }
.mr-l-4 { margin-left: 4px; }  .mr-l-5 { margin-left: 5px; }
.mr-l-6 { margin-left: 6px; }  .mr-l-7 { margin-left: 7px; }
.mr-l-8 { margin-left: 8px; }  .mr-l-9 { margin-left: 9px; }
.mr-l-10 { margin-left: 10px; }

.mr-r-2 { margin-right: 2px; }  .mr-r-3 { margin-right: 3px; }
.mr-r-4 { margin-right: 4px; }  .mr-r-5 { margin-right: 5px; }
.mr-r-6 { margin-right: 6px; }  .mr-r-7 { margin-right: 7px; }
.mr-r-8 { margin-right: 8px; }  .mr-r-9 { margin-right: 9px; }
.mr-r-10 { margin-right: 10px; }

.pd-2 { padding: 2px; }  .pd-2p5 { padding: 2.5px; }
.pd-3 { padding: 3px; }  .pd-3p5 { padding: 3.5px; }
.pd-4 { padding: 4px; }  .pd-4p5 { padding: 4.5px; }
.pd-5 { padding: 5px; }  .pd-5p5 { padding: 5.5px; }
.pd-6 { padding: 6px; }  .pd-7 { padding: 7px; }
.pd-8 { padding: 8px; }  .pd-9 { padding: 9px; }
.pd-10 { padding: 10px; }

.pd-t-2 { padding-top: 2px; }  .pd-t-3 { padding-top: 3px; }
.pd-t-4 { padding-top: 4px; }  .pd-t-5 { padding-top: 5px; }
.pd-t-6 { padding-top: 6px; }  .pd-t-7 { padding-top: 7px; }
.pd-t-8 { padding-top: 8px; }  .pd-t-9 { padding-top: 9px; }
.pd-t-10 { padding-top: 10px; }

.pd-b-2 { padding-bottom: 2px; }  .pd-b-3 { padding-bottom: 3px; }
.pd-b-4 { padding-bottom: 4px; }  .pd-b-5 { padding-bottom: 5px; }
.pd-b-6 { padding-bottom: 6px; }  .pd-b-7 { padding-bottom: 7px; }
.pd-b-8 { padding-bottom: 8px; }  .pd-b-9 { padding-bottom: 9px; }
.pd-b-10 { padding-bottom: 10px; }

.pd-l-2 { padding-left: 2px; }  .pd-l-3 { padding-left: 3px; }
.pd-l-4 { padding-left: 4px; }  .pd-l-5 { padding-left: 5px; }
.pd-l-6 { padding-left: 6px; }  .pd-l-7 { padding-left: 7px; }
.pd-l-8 { padding-left: 8px; }  .pd-l-9 { padding-left: 9px; }
.pd-l-10 { padding-left: 10px; }

.pd-r-2 { padding-right: 2px; }  .pd-r-3 { padding-right: 3px; }
.pd-r-4 { padding-right: 4px; }  .pd-r-5 { padding-right: 5px; }
.pd-r-6 { padding-right: 6px; }  .pd-r-7 { padding-right: 7px; }
.pd-r-8 { padding-right: 8px; }  .pd-r-9 { padding-right: 9px; }
.pd-r-10 { padding-right: 10px; }

.bmh-50  { min-height: 50px; }   .bmh-55  { min-height: 55px; }
.bmh-60  { min-height: 60px; }   .bmh-65  { min-height: 65px; }
.bmh-70  { min-height: 70px; }   .bmh-75  { min-height: 75px; }
.bmh-80  { min-height: 80px; }   .bmh-85  { min-height: 85px; }
.bmh-90  { min-height: 90px; }   .bmh-95  { min-height: 95px; }
.bmh-100 { min-height: 100px; }

/* ==================================================================
   13 · CodeMirror (voucher template editor)
   ================================================================== */
.CodeMirror {
  height: auto;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-well);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-input);
}
.CodeMirror-gutters {
  background: var(--color-paper-2);
  border-right: 1px solid var(--color-rule);
}
.CodeMirror-linenumber { color: var(--color-ink-3); }
.CodeMirror-guttermarker { color: var(--color-warning); }
.CodeMirror-guttermarker-subtle { color: var(--color-ink-3); }
.CodeMirror-cursor { border-left: 2px solid var(--color-accent); }
.CodeMirror-selected { background: var(--color-accent-wash); }
.CodeMirror-focused .CodeMirror-selected { background: var(--color-accent-wash); }
.CodeMirror-line::selection { background: var(--color-accent-wash); }
.CodeMirror-activeline-background { background: var(--color-paper-2); }
.CodeMirror-matchingbracket { color: var(--color-accent) !important; text-decoration: underline; }

.cm-s-material { background: var(--color-well); color: var(--color-ink); }
.cm-comment  { color: var(--color-ink-3); font-style: italic; }
.cm-keyword  { color: var(--color-purple); }
.cm-string   { color: var(--color-success); }
.cm-string-2 { color: var(--color-teal); }
.cm-number   { color: var(--color-orange); }
.cm-atom     { color: var(--color-orange); }
.cm-def      { color: var(--color-accent); }
.cm-variable   { color: var(--color-ink); }
.cm-variable-2 { color: var(--color-info); }
.cm-variable-3, .cm-type { color: var(--color-teal); }
.cm-property { color: var(--color-info); }
.cm-operator { color: var(--color-ink-2); }
.cm-tag      { color: var(--color-pink); }
.cm-attribute{ color: var(--color-warning); }
.cm-qualifier{ color: var(--color-yellow); }
.cm-builtin  { color: var(--color-accent); }
.cm-meta     { color: var(--color-ink-2); }
.cm-error    { color: var(--color-danger); }

/* ==================================================================
   14 · Responsive — verified at 320 / 375 / 414 / 768
   ================================================================== */
@media screen and (min-width: 750px) {
  .sidenav { width: var(--sidenav-w); }
  #main { margin-left: var(--sidenav-w); }
  #openNav { display: none; }
  #shareWA { display: inline-block; }
  #closeNav { display: block; }
}

@media screen and (max-width: 750px) {
  .sidenav { width: 0; border-right: 0; }
  #brand, #closeNav, #cpage { display: none; }
  #main { margin-left: 0; }
  #openNav { display: block; }
  #shareWA { display: inline-block; }

  [class*="col-"] { width: 100%; }
  .col-box-1  { width: 8.3333%; }   .col-box-2  { width: 16.6667%; }
  .col-box-3  { width: 25%; }       .col-box-4  { width: 33.3333%; }
  .col-box-5  { width: 41.6667%; }  .col-box-6  { width: 50%; }
  .col-box-7  { width: 58.3333%; }  .col-box-8  { width: 66.6667%; }
  .col-box-9  { width: 75%; }       .col-box-10 { width: 83.3333%; }
  .col-box-11 { width: 91.6667%; }  .col-box-12 { width: 100%; }

  .settings { width: 95%; margin-top: var(--space-sm); }
  .modal-window > div { width: 90vw; padding: var(--space-lg); }
  .main-container { padding: var(--space-sm); }
  .navbar-left a, .navbar-right a { padding: 15px var(--space-md); }
  .box-group-icon { font-size: 24px; padding: var(--space-xs); }
}

@media (max-width: 576px) {
  .login-box, .register-box { width: 95%; margin-top: 20px; padding-top: 4vh; }
  .table th, .table td { padding: var(--space-xs) var(--space-sm); }
  .card { margin: var(--space-3xs); }
  /* Form tables: let the label column collapse rather than crush the input */
  .table td.align-middle { width: 38%; word-break: break-word; }
}

/* ==================================================================
   15 · Reduced motion
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sidenav { transition: none; }
  .lds-dual-ring::after { animation-duration: 900ms !important; animation-iteration-count: infinite !important; }
}