/* assets/css/main.css — RedPenVPN v3 unified theme (light + dark) */

/* ------------------------------------------------------------
   Brand palette (constant, used as accent in both themes)
------------------------------------------------------------ */
:root {
  --brand-darkest: #26532B;  /* Cal Poly green */
  --brand-dark:    #399E5A;  /* Shamrock      */
  --brand-mid:     #5ABCB9;  /* Verdigris     */
  --brand-light:   #63E2C6;  /* Turquoise     */
  --brand-pale:    #6EF9F5;  /* Aqua          */
}

/* ------------------------------------------------------------
   Semantic tokens — LIGHT theme (default)
------------------------------------------------------------ */
:root {
  --bg:           #f4f6f8;
  --surface:      #ffffff;
  --surface-2:    #f0f3f6;
  --fg:           #1d2630;
  --fg-muted:     #5a6573;
  --border:       #d4dae0;
  --border-soft:  #e6eaef;
  --link:         #0b67c2;
  --link-hover:   #094e92;

  --th-bg:        var(--brand-mid);
  --th-fg:        #002523;
  --row-alt:      #f7fafd;
  --row-hover:    #fff7c2;

  --accent:       var(--brand-dark);
  --accent-fg:    #ffffff;
  --accent-hover: var(--brand-darkest);

  --btn-bg:       #ffffff;
  --btn-fg:       #1d2630;
  --btn-border:   #c8d0d8;
  --btn-hover:    #eef2f6;

  --danger:       #d24545;
  --danger-fg:    #ffffff;
  --warn:         #d28a18;
  --ok:           #1c7c3a;

  --expiring-bg:  #fde2e2;
  --expiring-fg:  #5c0d0d;
  --revoked-bg:   #f3d9d9;
  --revoked-fg:   #5a0f0f;

  --flash-bg:     #fffae6;
  --flash-border: #ffd24d;
  --flash-fg:     #4a3a00;

  --shadow-1: 0 1px 2px rgba(15,23,32,.06), 0 1px 3px rgba(15,23,32,.05);
  --shadow-2: 0 4px 12px rgba(15,23,32,.10);

  --radius: 6px;
  --radius-lg: 10px;

  /* Leaflet tile filter for light (none) */
  --tile-filter: none;
}

/* ------------------------------------------------------------
   Semantic tokens — DARK theme
------------------------------------------------------------ */
[data-theme="dark"] {
  --bg:           #0f141b;
  --surface:      #161c25;
  --surface-2:    #1c2330;
  --fg:           #e6ecf2;
  --fg-muted:     #95a1ae;
  --border:       #2a3340;
  --border-soft:  #232b37;
  --link:         #7ab3ff;
  --link-hover:   #a4cbff;

  --th-bg:        #1d2a36;
  --th-fg:        var(--brand-pale);
  --row-alt:      #141a23;
  --row-hover:    #2a2f1c;

  --accent:       var(--brand-light);
  --accent-fg:    #06241d;
  --accent-hover: var(--brand-pale);

  --btn-bg:       #1d2531;
  --btn-fg:       #e6ecf2;
  --btn-border:   #2f3a48;
  --btn-hover:    #26303f;

  --danger:       #ff6b6b;
  --danger-fg:    #200707;
  --warn:         #f2b94a;
  --ok:           #3ed47a;

  --expiring-bg:  #4a1818;
  --expiring-fg:  #ffd4d4;
  --revoked-bg:   #3a1212;
  --revoked-fg:   #ffb3b3;

  --flash-bg:     #2c2615;
  --flash-border: #b08a18;
  --flash-fg:     #ffe9a8;

  --shadow-1: 0 1px 2px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);
  --shadow-2: 0 6px 18px rgba(0,0,0,.55);

  /* CSS filter to dark-ify default OSM tiles when no dark layer is available */
  --tile-filter: brightness(.65) invert(1) contrast(1.1) hue-rotate(180deg) saturate(.55) brightness(.95);
}

/* ------------------------------------------------------------
   Global
------------------------------------------------------------ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

code, pre, kbd, samp, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9em;
}
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

hr { border: 0; border-top: 1px solid var(--border-soft); margin: 1em 0; }

/* ------------------------------------------------------------
   Topbar / header
------------------------------------------------------------ */
header,
.topbar {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: var(--accent-fg);
  padding: .75em 1em;
  box-shadow: var(--shadow-1);
}
header h1, .topbar h1 {
  margin: 0;
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: .2px;
}
header a, .topbar a { color: var(--accent-fg); text-decoration: underline; }
header a:hover, .topbar a:hover { color: #fff; }
header nav { display: inline-flex; gap: .8em; margin-left: .5em; }

footer {
  background: var(--surface);
  color: var(--fg-muted);
  text-align: center;
  padding: .8em;
  font-size: .85em;
  border-top: 1px solid var(--border-soft);
  margin-top: 2em;
}

main, .content {
  padding: 1em;
  max-width: 100%;
}

section {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: .75em 1em 1em;
  margin: 1em 0;
  box-shadow: var(--shadow-1);
}

section h2 {
  margin: 0 0 .6em;
  padding: 0 0 .4em;
  border-bottom: 2px solid var(--brand-mid);
  color: var(--fg);
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: .5em;
}

/* ------------------------------------------------------------
   Header buttons / nav
------------------------------------------------------------ */
.header-buttons {
  margin-top: .55em;
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  align-items: center;
}

.header-buttons button,
.header-buttons .btn,
.header-buttons a.btn,
.header-buttons a {
  background: rgba(255,255,255,.14);
  color: var(--accent-fg);
  border: 1px solid rgba(255,255,255,.22);
  padding: .35em .75em;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius);
  font-size: .85em;
  transition: background .12s ease, transform .12s ease;
}
.header-buttons button:hover,
.header-buttons .btn:hover,
.header-buttons a.btn:hover,
.header-buttons a:hover {
  background: rgba(255,255,255,.28);
  transform: translateY(-1px);
  text-decoration: none;
}

.header-buttons select {
  background: rgba(255,255,255,.14);
  color: var(--accent-fg);
  border: 1px solid rgba(255,255,255,.22);
  padding: .3em .5em;
  border-radius: var(--radius);
}
.header-buttons select option { color: #000; background: #fff; }

#themeToggle {
  font-size: 1em;
  min-width: 2.2em;
}

/* ------------------------------------------------------------
   Toolbar (search/filter strip)
------------------------------------------------------------ */
.toolbar {
  display: flex;
  gap: .5em;
  flex-wrap: wrap;
  align-items: center;
  margin: .6em 0 0;
}
.toolbar input[type="search"],
.toolbar input[type="text"] {
  padding: .4em .6em;
  min-width: 260px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.14);
  color: var(--accent-fg);
  border-radius: var(--radius);
}
.toolbar input::placeholder { color: rgba(255,255,255,.7); }

/* ------------------------------------------------------------
   Flash messages
------------------------------------------------------------ */
.flash, .error, .success {
  margin: .5em 0;
  padding: .55em .8em;
  border-radius: var(--radius);
  border: 1px solid var(--flash-border);
  background: var(--flash-bg);
  color: var(--flash-fg);
}
.error { border-color: var(--danger); background: rgba(210,69,69,.12); color: var(--danger); }
.success { border-color: var(--ok); background: rgba(28,124,58,.12); color: var(--ok); }

/* ------------------------------------------------------------
   Tables
------------------------------------------------------------ */
table {
  width: 100%;
  border-collapse: collapse;
  margin: .25em 0 1em;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
th, td {
  border: 1px solid var(--border-soft);
  padding: .5em .65em;
  text-align: left;
  vertical-align: top;
  color: var(--fg);
}
th {
  background: var(--th-bg);
  color: var(--th-fg);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
tbody tr:nth-child(even) td { background: var(--row-alt); }
tbody tr:hover  td { background: var(--row-hover); }

tr.expiring td { background: var(--expiring-bg) !important; color: var(--expiring-fg); }
tr.revoked td  { background: var(--revoked-bg)  !important; color: var(--revoked-fg); }
tr.fail td     { background: rgba(220,40,40,.15) !important; }

/* ------------------------------------------------------------
   Status pills / badges
------------------------------------------------------------ */
.status-pill,
.badge {
  display: inline-block;
  padding: .15em .6em;
  border-radius: 999px;
  font-size: .78em;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
  line-height: 1.4;
  vertical-align: middle;
}
.status-pill.live,
.badge.ok       { background: var(--ok);     color: #fff; border-color: transparent; }
.badge.danger,
.status-pill.danger { background: var(--danger); color: var(--danger-fg); border-color: transparent; }
.badge.warn     { background: var(--warn);   color: #2b1c00; border-color: transparent; }
.badge.muted    { background: var(--surface-2); color: var(--fg-muted); }

/* ------------------------------------------------------------
   Forms & inputs
------------------------------------------------------------ */
form { margin: 0; display: inline-block; }

input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="email"],
select,
textarea {
  padding: .35em .55em;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: inherit;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

button,
.btn,
button[type="submit"],
#refreshButton {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  padding: .35em .7em;
  cursor: pointer;
  border-radius: var(--radius);
  font-size: .9em;
  font-family: inherit;
  transition: background .12s ease, border-color .12s ease;
}
button:hover,
.btn:hover,
button[type="submit"]:hover,
#refreshButton:hover { background: var(--btn-hover); }

button.primary,
button.accent {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
button.primary:hover,
button.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

button.danger {
  background: var(--danger);
  color: var(--danger-fg);
  border-color: var(--danger);
}
button.danger:hover { filter: brightness(1.08); }

.copy-btn {
  font-size: .75em;
  margin-left: .25em;
  padding: .05em .35em;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
}
.copy-btn:hover { background: var(--btn-hover); color: var(--fg); }

/* Filter form (audit) */
form.filter {
  margin: 1em 0;
  display: flex;
  gap: .5em;
  flex-wrap: wrap;
  align-items: flex-end;
}
form.filter label {
  display: flex;
  flex-direction: column;
  font-size: .8em;
  color: var(--fg-muted);
}

/* ------------------------------------------------------------
   Bulk action bar
------------------------------------------------------------ */
.bulk-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 2px solid var(--accent);
  padding: .55em .75em;
  display: none;
  gap: .5em;
  align-items: center;
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(0,0,0,.18);
}
.bulk-bar.show { display: flex; }

/* ------------------------------------------------------------
   Map (Leaflet)
------------------------------------------------------------ */
#map {
  height: 420px;
  margin: .5em 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
/* Dark map styling — keyed off .map-dark on the map container (set by JS
   when the active tile layer is the dark basemap). NOT keyed off the page
   theme, because the map has its own independent day/night override and
   our dark_all tiles are already dark — inverting them would turn the map
   into a bright/white mess. */
.map-dark.leaflet-container,
.map-dark .leaflet-container { background: #0a1018; }
.map-dark .leaflet-popup-content-wrapper,
.map-dark .leaflet-popup-tip {
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-2);
}
.map-dark .leaflet-control-attribution {
  background: rgba(20,24,32,.85) !important;
  color: #b9c2cc !important;
}
.map-dark .leaflet-control-attribution a { color: #7ab3ff !important; }
.map-dark .leaflet-bar a,
.map-dark .leaflet-bar a:hover {
  background-color: #1d2531;
  color: #e6ecf2;
  border-bottom-color: #2f3a48;
}
/* Tone down marker-cluster halos so they read on dark tiles. */
.map-dark .marker-cluster-small  { background-color: rgba(99,226,198,.30); }
.map-dark .marker-cluster-small div  { background-color: rgba(99,226,198,.75); color: #06241d; }
.map-dark .marker-cluster-medium { background-color: rgba(90,188,185,.30); }
.map-dark .marker-cluster-medium div { background-color: rgba(90,188,185,.75); color: #06241d; }
.map-dark .marker-cluster-large  { background-color: rgba(57,158,90,.30); }
.map-dark .marker-cluster-large div  { background-color: rgba(57,158,90,.80); color: #fff; }

/* ------------------------------------------------------------
   Login page
------------------------------------------------------------ */
.login-container {
  max-width: 360px;
  margin: 8vh auto;
  padding: 1.5em 1.75em;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.login-container h3 {
  margin: 0 0 1em;
  font-size: 1.3em;
  color: var(--fg);
  text-align: center;
}
.login-container form { display: block; }
.login-container label {
  display: block;
  margin: .5em 0;
  color: var(--fg-muted);
  font-size: .85em;
}
.login-container label input {
  display: block;
  width: 100%;
  margin-top: .25em;
}
.login-container button[type="submit"] {
  width: 100%;
  margin-top: 1em;
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  padding: .55em;
  font-size: 1em;
  font-weight: 600;
}
.login-container button[type="submit"]:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* ------------------------------------------------------------
   Console (management shell)
------------------------------------------------------------ */
.console-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75em;
}
.console-wrap #console {
  background: #07090d;
  color: #d6e3ee;
  padding: 1em;
  height: 420px;
  overflow-y: auto;
  border-radius: var(--radius);
  border: 1px solid #1d2733;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}
.console-wrap input[type="text"] {
  width: 100%;
  margin-top: .5em;
  padding: .55em;
  background: #07090d;
  color: #d6e3ee;
  border: 1px solid #1d2733;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------
   Misc
------------------------------------------------------------ */
details summary { cursor: pointer; font-weight: 600; color: var(--fg); }
details[open] summary { margin-bottom: .4em; }

.muted { color: var(--fg-muted); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

@media (max-width: 720px) {
  .header-buttons { gap: .3em; }
  .header-buttons button,
  .header-buttons .btn,
  .header-buttons a.btn { padding: .3em .55em; font-size: .8em; }
  th, td { padding: .4em .45em; font-size: .9em; }
  #map { height: 300px; }
}