/* =========================================================================
   Domain Expiry Monitor — Material Design 3 design system
   Baseline (purple/violet) scheme. No external resources, no icon CDN.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. COLOR ROLES — LIGHT (default)
   ------------------------------------------------------------------------- */
:root {
  /* Primary */
  --md-primary:                #6750A4;
  --md-on-primary:             #FFFFFF;
  --md-primary-container:      #EADDFF;
  --md-on-primary-container:   #21005D;

  /* Secondary */
  --md-secondary:              #625B71;
  --md-on-secondary:           #FFFFFF;
  --md-secondary-container:    #E8DEF8;
  --md-on-secondary-container: #1D192B;

  /* Tertiary */
  --md-tertiary:               #7D5260;
  --md-on-tertiary:            #FFFFFF;
  --md-tertiary-container:     #FFD8E4;
  --md-on-tertiary-container:  #31111D;

  /* Error */
  --md-error:                  #B3261E;
  --md-on-error:               #FFFFFF;
  --md-error-container:        #F9DEDC;
  --md-on-error-container:     #410E0B;

  /* Background / surface */
  --md-background:             #FEF7FF;
  --md-on-background:          #1D1B20;
  --md-surface:                #FEF7FF;
  --md-on-surface:             #1D1B20;
  --md-surface-variant:        #E7E0EC;
  --md-on-surface-variant:     #49454F;

  --md-surface-dim:            #DED8E1;
  --md-surface-bright:         #FEF7FF;
  --md-surface-container-lowest:  #FFFFFF;
  --md-surface-container-low:     #F7F2FA;
  --md-surface-container:         #F3EDF7;
  --md-surface-container-high:    #ECE6F0;
  --md-surface-container-highest: #E6E0E9;

  /* Outline / misc */
  --md-outline:                #79747E;
  --md-outline-variant:        #CAC4D0;
  --md-inverse-surface:        #322F35;
  --md-inverse-on-surface:     #F5EFF7;
  --md-inverse-primary:        #D0BCFF;
  --md-shadow:                 #000000;
  --md-scrim:                  #000000;

  /* Semantic "success" role (green) — maps to a primary-like green */
  --md-success:                #2E6B41;
  --md-on-success:             #FFFFFF;
  --md-success-container:      #B6F2C6;
  --md-on-success-container:   #00210F;

  /* Semantic "warning" role (amber/yellow) */
  --md-warning:                #7A5900;
  --md-on-warning:             #FFFFFF;
  --md-warning-container:      #FFE08B;
  --md-on-warning-container:   #261A00;

  /* -----------------------------------------------------------------------
     SHAPE SCALE
     ----------------------------------------------------------------------- */
  --md-shape-none: 0px;
  --md-shape-xs:   4px;
  --md-shape-sm:   8px;
  --md-shape-md:   12px;
  --md-shape-lg:   16px;
  --md-shape-xl:   28px;
  --md-shape-full: 9999px;

  /* -----------------------------------------------------------------------
     ELEVATION SHADOWS (levels 0–5)
     ----------------------------------------------------------------------- */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-elevation-2: 0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px 0 rgba(0,0,0,.30);
  --md-elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px 0 rgba(0,0,0,.30);
  --md-elevation-5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px 0 rgba(0,0,0,.30);

  /* State-layer opacities */
  --md-state-hover:   0.08;
  --md-state-focus:   0.10;
  --md-state-pressed: 0.10;
  --md-state-dragged: 0.16;

  /* Motion */
  --md-motion-fast:  .12s cubic-bezier(.2,0,0,1);
  --md-motion:       .2s  cubic-bezier(.2,0,0,1);

  /* Layout */
  --md-container-max: 1100px;

  /* ----- Legacy aliases (so older template classes keep working) ----- */
  --bg:           var(--md-surface);
  --bg-soft:      var(--md-surface-container);
  --card:         var(--md-surface-container-low);
  --card-border:  var(--md-outline-variant);
  --text:         var(--md-on-surface);
  --text-muted:   var(--md-on-surface-variant);
  --primary:      var(--md-primary);
  --primary-hover:var(--md-primary);
  --secondary:    var(--md-secondary);
  --danger:       var(--md-error);
  --radius:       var(--md-shape-md);
  --shadow:       var(--md-elevation-1);

  --red:    var(--md-error);
  --orange: var(--md-tertiary);
  --yellow: var(--md-warning);
  --green:  var(--md-success);
  --gray:   var(--md-on-surface-variant);
}

/* -------------------------------------------------------------------------
   1b. COLOR ROLES — DARK
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary:                #D0BCFF;
    --md-on-primary:             #381E72;
    --md-primary-container:      #4F378B;
    --md-on-primary-container:   #EADDFF;

    --md-secondary:              #CCC2DC;
    --md-on-secondary:           #332D41;
    --md-secondary-container:    #4A4458;
    --md-on-secondary-container: #E8DEF8;

    --md-tertiary:               #EFB8C8;
    --md-on-tertiary:            #492532;
    --md-tertiary-container:     #633B48;
    --md-on-tertiary-container:  #FFD8E4;

    --md-error:                  #F2B8B5;
    --md-on-error:               #601410;
    --md-error-container:        #8C1D18;
    --md-on-error-container:     #F9DEDC;

    --md-background:             #141218;
    --md-on-background:          #E6E0E9;
    --md-surface:                #141218;
    --md-on-surface:             #E6E0E9;
    --md-surface-variant:        #49454F;
    --md-on-surface-variant:     #CAC4D0;

    --md-surface-dim:            #141218;
    --md-surface-bright:         #3B383E;
    --md-surface-container-lowest:  #0F0D13;
    --md-surface-container-low:     #1D1B20;
    --md-surface-container:         #211F26;
    --md-surface-container-high:    #2B2930;
    --md-surface-container-highest: #36343B;

    --md-outline:                #938F99;
    --md-outline-variant:        #49454F;
    --md-inverse-surface:        #E6E0E9;
    --md-inverse-on-surface:     #322F35;
    --md-inverse-primary:        #6750A4;

    --md-success:                #8FD6A4;
    --md-on-success:             #00391C;
    --md-success-container:      #14532B;
    --md-on-success-container:   #B6F2C6;

    --md-warning:                #ECC248;
    --md-on-warning:             #3F2E00;
    --md-warning-container:      #5A4300;
    --md-on-warning-container:   #FFE08B;
  }
}

/* Explicit dark override (data-theme="dark") */
:root[data-theme="dark"] {
  --md-primary:                #D0BCFF;
  --md-on-primary:             #381E72;
  --md-primary-container:      #4F378B;
  --md-on-primary-container:   #EADDFF;

  --md-secondary:              #CCC2DC;
  --md-on-secondary:           #332D41;
  --md-secondary-container:    #4A4458;
  --md-on-secondary-container: #E8DEF8;

  --md-tertiary:               #EFB8C8;
  --md-on-tertiary:            #492532;
  --md-tertiary-container:     #633B48;
  --md-on-tertiary-container:  #FFD8E4;

  --md-error:                  #F2B8B5;
  --md-on-error:               #601410;
  --md-error-container:        #8C1D18;
  --md-on-error-container:     #F9DEDC;

  --md-background:             #141218;
  --md-on-background:          #E6E0E9;
  --md-surface:                #141218;
  --md-on-surface:             #E6E0E9;
  --md-surface-variant:        #49454F;
  --md-on-surface-variant:     #CAC4D0;

  --md-surface-dim:            #141218;
  --md-surface-bright:         #3B383E;
  --md-surface-container-lowest:  #0F0D13;
  --md-surface-container-low:     #1D1B20;
  --md-surface-container:         #211F26;
  --md-surface-container-high:    #2B2930;
  --md-surface-container-highest: #36343B;

  --md-outline:                #938F99;
  --md-outline-variant:        #49454F;
  --md-inverse-surface:        #E6E0E9;
  --md-inverse-on-surface:     #322F35;
  --md-inverse-primary:        #6750A4;

  --md-success:                #8FD6A4;
  --md-on-success:             #00391C;
  --md-success-container:      #14532B;
  --md-on-success-container:   #B6F2C6;

  --md-warning:                #ECC248;
  --md-on-warning:             #3F2E00;
  --md-warning-container:      #5A4300;
  --md-on-warning-container:   #FFE08B;
}

/* -------------------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: Roboto, "Roboto Flex", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .25px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
  border-radius: var(--md-shape-xs);
}

/* -------------------------------------------------------------------------
   3. TYPOGRAPHY TYPE SCALE
   ------------------------------------------------------------------------- */
.md-display-large  { font-size: 57px; line-height: 64px; font-weight: 400; letter-spacing: -0.25px; }
.md-display-medium { font-size: 45px; line-height: 52px; font-weight: 400; letter-spacing: 0; }
.md-display-small  { font-size: 36px; line-height: 44px; font-weight: 400; letter-spacing: 0; }

.md-headline-large  { font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: 0; }
.md-headline-medium { font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: 0; }
.md-headline-small  { font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: 0; }

.md-title-large  { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
.md-title-medium { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px; }
.md-title-small  { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px; }

.md-body-large  { font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0.5px; }
.md-body-medium { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0.25px; }
.md-body-small  { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.4px; }

.md-label-large  { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px; }
.md-label-medium { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.5px; }
.md-label-small  { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.5px; }

h1 { font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: 0; margin: 0 0 .25rem; }
h2 { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: 0; margin: 0; }

/* -------------------------------------------------------------------------
   4. ELEVATION + SHAPE UTILITY CLASSES
   ------------------------------------------------------------------------- */
.md-elevation-0 { box-shadow: var(--md-elevation-0); }
.md-elevation-1 { box-shadow: var(--md-elevation-1); }
.md-elevation-2 { box-shadow: var(--md-elevation-2); }
.md-elevation-3 { box-shadow: var(--md-elevation-3); }
.md-elevation-4 { box-shadow: var(--md-elevation-4); }
.md-elevation-5 { box-shadow: var(--md-elevation-5); }

.md-shape-none { border-radius: var(--md-shape-none); }
.md-shape-xs   { border-radius: var(--md-shape-xs); }
.md-shape-sm   { border-radius: var(--md-shape-sm); }
.md-shape-md   { border-radius: var(--md-shape-md); }
.md-shape-lg   { border-radius: var(--md-shape-lg); }
.md-shape-xl   { border-radius: var(--md-shape-xl); }
.md-shape-full { border-radius: var(--md-shape-full); }

/* -------------------------------------------------------------------------
   5. TOP APP BAR  (.app-bar + legacy .navbar)
   ------------------------------------------------------------------------- */
.app-bar,
.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--md-surface);
  color: var(--md-on-surface);
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background var(--md-motion), box-shadow var(--md-motion);
}
.app-bar.is-scrolled,
.navbar.is-scrolled {
  background: var(--md-surface-container);
  box-shadow: var(--md-elevation-2);
  border-bottom-color: transparent;
}
.app-bar-inner,
.navbar-inner {
  max-width: var(--md-container-max);
  min-height: 64px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand,
.app-bar-title {
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-on-surface);
}
.brand:hover { text-decoration: none; color: var(--md-primary); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-links a {
  color: var(--md-on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  padding: 8px 12px;
  border-radius: var(--md-shape-full);
  position: relative;
  isolation: isolate;
  transition: color var(--md-motion);
}
.nav-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-on-surface);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--md-motion-fast);
}
.nav-links a:hover { color: var(--md-on-surface); text-decoration: none; }
.nav-links a:hover::before  { opacity: var(--md-state-hover); }
.nav-links a:focus-visible::before { opacity: var(--md-state-focus); }
.nav-links a.btn { padding: 0 12px; }
.nav-links a.btn::before { display: none; }

.nav-user {
  color: var(--md-on-surface-variant);
  font-size: 14px;
  letter-spacing: 0.25px;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--md-outline-variant);
}

/* App-bar icon button (inline SVG, 48px touch target) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  color: var(--md-on-surface-variant);
  border-radius: var(--md-shape-full);
  cursor: pointer;
  position: relative;
  isolation: isolate;
}
.icon-btn svg { width: 24px; height: 24px; fill: currentColor; }
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  z-index: -1;
  transition: opacity var(--md-motion-fast);
}
.icon-btn:hover::before { opacity: var(--md-state-hover); }
.icon-btn:focus-visible::before { opacity: var(--md-state-focus); }
.icon-btn:active::before { opacity: var(--md-state-pressed); }

/* -------------------------------------------------------------------------
   6. LAYOUT — container / footer / page head
   ------------------------------------------------------------------------- */
.container {
  max-width: var(--md-container-max);
  width: 100%;
  margin: 0 auto;
  padding: 24px 16px 48px;
  flex: 1;
}

.footer {
  text-align: center;
  color: var(--md-on-surface-variant);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  padding: 20px;
  border-top: 1px solid var(--md-outline-variant);
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.page-actions { display: flex; gap: 8px; }

.muted { color: var(--md-on-surface-variant); }
.small { font-size: 12px; line-height: 16px; letter-spacing: 0.4px; }
.text-danger { color: var(--md-error); }
.ta-right { text-align: right; }

/* -------------------------------------------------------------------------
   7. CARDS  (.card, .card-elevated, .card-filled, .card-outlined)
   ------------------------------------------------------------------------- */
.card {
  background: var(--md-surface-container-low);
  border: 1px solid transparent;
  border-radius: var(--md-shape-md);
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: var(--md-elevation-1);
  transition: box-shadow var(--md-motion), background var(--md-motion);
}
/* Elevated card (default behaviour, hover bumps to L2) */
.card.card-elevated:hover { box-shadow: var(--md-elevation-2); }

/* Filled card */
.card-filled {
  background: var(--md-surface-container-highest);
  box-shadow: var(--md-elevation-0);
  border-color: transparent;
}
.card-filled:hover { box-shadow: var(--md-elevation-1); }

/* Outlined card */
.card-outlined {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elevation-0);
}

.card-title {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.15px;
  color: var(--md-on-surface);
}
details.card > summary.card-title {
  cursor: pointer;
  margin: 0;
  list-style: revert;
}
details.card[open] > summary.card-title { margin-bottom: 16px; }
.table-card { padding: 0; overflow: hidden; }

/* -------------------------------------------------------------------------
   8. FORMS / TEXT FIELDS
   ------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.form-actions { margin: 4px 0 16px; }
.grow { flex: 1 1 200px; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.checks-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; }

/* ----- Filled text field (.field used as label wrapper in templates) ----- */
.field {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
/* The descriptive <span> acts as the (static) floated label */
.field > span {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--md-on-surface-variant);
  padding: 0 4px 4px;
  transition: color var(--md-motion-fast);
}
.field:focus-within > span { color: var(--md-primary); }

/* Raw inputs (filled style: container + bottom active indicator) */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="search"],
textarea,
select {
  width: 100%;
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  border: none;
  border-bottom: 1px solid var(--md-on-surface-variant);
  border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  transition: border-color var(--md-motion-fast),
              background var(--md-motion-fast),
              box-shadow var(--md-motion-fast);
}
input::placeholder, textarea::placeholder { color: var(--md-on-surface-variant); opacity: .8; }

input[type="text"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  background: var(--md-surface-container-high);
  border-bottom-color: var(--md-on-surface);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-bottom: 2px solid var(--md-primary);
  /* keep text aligned despite thicker border */
  padding-bottom: 13px;
  box-shadow: none;
}
input:disabled, textarea:disabled, select:disabled {
  opacity: .38;
  cursor: not-allowed;
}
textarea { resize: vertical; min-height: 88px; }

/* Helper / supporting text under a field */
.field-help,
.helper-text {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--md-on-surface-variant);
  padding: 4px 16px 0;
}
.field-error .helper-text,
.helper-text.is-error { color: var(--md-error); }
.field-error input { border-bottom-color: var(--md-error); }

/* Outlined text-field variant (opt-in) */
.field-outlined input,
.field-outlined textarea,
input.field-outlined,
textarea.field-outlined {
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs);
  padding: 14px 16px;
}
.field-outlined input:focus,
.field-outlined textarea:focus,
input.field-outlined:focus,
textarea.field-outlined:focus {
  border: 2px solid var(--md-primary);
  padding: 13px 15px;
}

/* Checkbox row (legacy .check) */
.check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  min-height: 48px;
}
.check input { width: auto; }
.check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--md-primary);
  cursor: pointer;
}
.check span { color: var(--md-on-surface); font-size: 14px; letter-spacing: 0.25px; }

/* -------------------------------------------------------------------------
   9. SWITCH  (.switch — checkbox-driven track + thumb)
   Markup: <label class="switch"><input type="checkbox"><span class="switch-track"></span></label>
   ------------------------------------------------------------------------- */
.switch {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 52px;
  height: 48px;            /* 48px touch target; track centered */
  cursor: pointer;
  flex: 0 0 auto;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 52px;
  height: 32px;
  margin: 0;
  cursor: pointer;
}
.switch-track {
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: var(--md-shape-full);
  background: var(--md-surface-container-highest);
  border: 2px solid var(--md-outline);
  transition: background var(--md-motion-fast), border-color var(--md-motion-fast);
  pointer-events: none;
}
.switch-track::before {
  /* thumb */
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;               /* off: 16px thumb, centered with inset */
  width: 16px;
  height: 16px;
  border-radius: var(--md-shape-full);
  background: var(--md-outline);
  transform: translateY(-50%);
  transition: left var(--md-motion-fast), width var(--md-motion-fast),
              height var(--md-motion-fast), background var(--md-motion-fast);
}
.switch input:checked + .switch-track {
  background: var(--md-primary);
  border-color: var(--md-primary);
}
.switch input:checked + .switch-track::before {
  left: 24px;             /* 4px inset from right of 52px track for 24px thumb */
  width: 24px;
  height: 24px;
  background: var(--md-on-primary);
}
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}
.switch input:disabled + .switch-track { opacity: .38; }

/* -------------------------------------------------------------------------
   10. BUTTONS
   Base .btn = filled (primary). Variants override.
   ------------------------------------------------------------------------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-width: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--md-shape-full);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--md-on-primary);
  background: var(--md-primary);
  box-shadow: var(--md-elevation-0);
  transition: box-shadow var(--md-motion-fast), background var(--md-motion-fast),
              border-color var(--md-motion-fast), opacity var(--md-motion-fast);
  -webkit-appearance: none;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 18px; height: 18px; fill: currentColor; }

/* State layer (::before overlay tinted by current text color) */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  z-index: -1;
  transition: opacity var(--md-motion-fast);
}
.btn:hover::before  { opacity: var(--md-state-hover); }
.btn:focus-visible::before { opacity: var(--md-state-focus); }
.btn:active::before { opacity: var(--md-state-pressed); }

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-on-surface) 38%, transparent);
  box-shadow: none;
}
.btn:disabled::before { opacity: 0; }

/* ----- Variants ----- */
.btn-filled {
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.btn-filled:hover { box-shadow: var(--md-elevation-1); }

.btn-tonal {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.btn-tonal:hover { box-shadow: var(--md-elevation-1); }

.btn-outlined {
  background: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline);
}
.btn-outlined:focus-visible { border-color: var(--md-primary); }
.btn-outlined:disabled {
  background: transparent;
  border-color: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
}

.btn-elevated {
  background: var(--md-surface-container-low);
  color: var(--md-primary);
  box-shadow: var(--md-elevation-1);
}
.btn-elevated:hover { box-shadow: var(--md-elevation-2); }

.btn-text {
  background: transparent;
  color: var(--md-primary);
  padding: 0 12px;
}
.btn-text:disabled { background: transparent; }

/* ----- Legacy semantic variants (mapped onto MD3 roles) ----- */
.btn-primary { background: var(--md-primary); color: var(--md-on-primary); }
.btn-primary:hover { box-shadow: var(--md-elevation-1); }

.btn-secondary { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn-secondary:hover { box-shadow: var(--md-elevation-1); }

.btn-danger { background: var(--md-error); color: var(--md-on-error); }
.btn-danger:hover { box-shadow: var(--md-elevation-1); }

.btn-ghost {
  background: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline);
}
.btn-ghost:focus-visible { border-color: var(--md-primary); }

/* ----- Sizes ----- */
.btn-sm {
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
}
.btn-sm.btn-text { padding: 0 10px; }
.btn-lg { height: 48px; padding: 0 28px; }
.btn-block { width: 100%; }

/* leading-icon button spacing */
.btn-icon-leading { padding-left: 16px; }

.inline { display: inline; margin: 0; }

/* -------------------------------------------------------------------------
   11. CHIPS + BADGES
   ------------------------------------------------------------------------- */
.chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--md-shape-sm);
  border: 1px solid var(--md-outline-variant);
  background: transparent;
  color: var(--md-on-surface);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: default;
  white-space: nowrap;
}
.chip svg { width: 18px; height: 18px; }
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-on-surface-variant);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--md-motion-fast);
}
.chip[role="button"], a.chip, button.chip { cursor: pointer; }
.chip[role="button"]:hover::before,
a.chip:hover::before,
button.chip:hover::before { opacity: var(--md-state-hover); }

.chip-assist {
  background: var(--md-surface-container-low);
  border-color: var(--md-outline-variant);
  color: var(--md-on-surface);
}
.chip-assist .chip-icon { color: var(--md-primary); }
.chip-elevated {
  border-color: transparent;
  background: var(--md-surface-container-low);
  box-shadow: var(--md-elevation-1);
}
.chip-filter { border-color: var(--md-outline); }
.chip-filter.is-selected {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: transparent;
}
.chip-input .chip-close { color: var(--md-on-surface-variant); cursor: pointer; }

/* ----- Day-count badges (pill) — mapped to MD3 container roles ----- */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--md-shape-full);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
/* ≤7 critical → error */
.badge-red    { background: var(--md-error-container);     color: var(--md-on-error-container); }
/* ≤14 → tertiary */
.badge-orange { background: var(--md-tertiary-container);  color: var(--md-on-tertiary-container); }
/* ≤30 → warning (amber) */
.badge-yellow { background: var(--md-warning-container);   color: var(--md-on-warning-container); }
/* >30 ok → success/primary */
.badge-green  { background: var(--md-success-container);   color: var(--md-on-success-container); }
/* no data / neutral → surface-variant */
.badge-gray   { background: var(--md-surface-variant);     color: var(--md-on-surface-variant); }

/* -------------------------------------------------------------------------
   12. STATUS PILLS
   ------------------------------------------------------------------------- */
.status {
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: var(--md-shape-sm);
}
.status-ok      { background: var(--md-success-container);  color: var(--md-on-success-container); }
.status-error   { background: var(--md-error-container);    color: var(--md-on-error-container); }
.status-pending { background: var(--md-surface-variant);    color: var(--md-on-surface-variant); }
.status-off     { background: var(--md-surface-variant);    color: var(--md-on-surface-variant); }

/* Статус-комірка: OK/Помилка та «вимкнено» стекуються вертикально без накладань */
.status-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* -------------------------------------------------------------------------
   13. TABLE  (.table list / data-table)
   ------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
}
.table th, .table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--md-outline-variant);
  vertical-align: top;
}
.table thead th {
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.table tbody tr {
  position: relative;
  transition: background var(--md-motion-fast);
}
.table tbody tr:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}
.table tbody tr:last-child td { border-bottom: none; }
.row-disabled { opacity: .55; }
.domain-name { font-weight: 500; color: var(--md-on-surface); }

.actions { white-space: nowrap; display: flex; gap: 2px; justify-content: flex-end; flex-wrap: nowrap; align-items: center; }
.actions form { margin: 0; }

/* Компактні icon-кнопки дій у рядку таблиці (один рядок, без переносів) */
.action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--md-shape-full); position: relative;
  color: var(--md-on-surface-variant);
  transition: color var(--md-motion-fast);
}
.action-btn svg { width: 20px; height: 20px; fill: currentColor; }
.action-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-motion-fast);
}
.action-btn:hover { color: var(--md-primary); }
.action-btn:hover::before { opacity: var(--md-state-hover); }
.action-btn:focus-visible::before { opacity: var(--md-state-focus); }
.action-btn:active::before { opacity: var(--md-state-pressed); }
.action-btn.danger:hover { color: var(--md-error); }

.empty {
  padding: 40px;
  text-align: center;
  color: var(--md-on-surface-variant);
  font-size: 14px;
}

/* -------------------------------------------------------------------------
   14. SNACKBAR / FLASH
   ------------------------------------------------------------------------- */
.flash {
  border-radius: var(--md-shape-xs);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  border: 1px solid transparent;
  box-shadow: var(--md-elevation-1);
}
.flash-info {
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  border-color: transparent;
}
.flash-success {
  background: var(--md-success-container);
  color: var(--md-on-success-container);
  border-color: transparent;
}
.flash-error {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  border-color: transparent;
}

/* True snackbar (bottom-anchored) — opt-in */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1000;
  min-width: 280px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: var(--md-shape-xs);
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  box-shadow: var(--md-elevation-3);
  font-size: 14px;
}

/* -------------------------------------------------------------------------
   15. LOGIN
   ------------------------------------------------------------------------- */
.login-wrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding: 24px;
  border-radius: var(--md-shape-xl);
  background: var(--md-surface-container-low);
  box-shadow: var(--md-elevation-1);
}
.login-title { text-align: center; margin-bottom: 4px; }
.login-sub {
  text-align: center;
  color: var(--md-on-surface-variant);
  margin: 0 0 20px;
  font-size: 14px;
}

/* -------------------------------------------------------------------------
   16. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: stretch; }
  .nav-user { display: none; }
  .app-bar-inner, .navbar-inner { padding: 0 8px; }
  .container { padding: 16px 12px 40px; }
  .actions { justify-content: flex-start; }
  h1 { font-size: 24px; line-height: 32px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --- Перемикач теми: показуємо лише одну іконку (дію перемикання) --------- */
.theme-icon-light { display: none; }          /* сонце */
.theme-icon-dark  { display: inline-block; }  /* місяць (за замовч. — світла тема) */
html[data-theme="light"] .theme-icon-light { display: none; }
html[data-theme="light"] .theme-icon-dark  { display: inline-block; }
html[data-theme="dark"] .theme-icon-light  { display: inline-block; }
html[data-theme="dark"] .theme-icon-dark   { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-icon-light { display: inline-block; }
  html:not([data-theme]) .theme-icon-dark  { display: none; }
}