/* Same tokens as the public site (site.php), so the panel and the website
   look like one product rather than two. */
/* Paleta. Valorile de albastru si de teal sunt masurate din diamwall.com, nu
   alese din ochi: fundalul, accentul, textul sters si umplerea butonului sunt
   luate pixel cu pixel de acolo.

   Culorile de GRAVITATE - rosu, portocaliu, albastru, gri - raman cum erau.
   Alea nu sunt culori de firma, alea spun cat de grava e o detectie, si daca
   le-as fi tras si pe ele spre paleta, panoul ar fi aratat frumos si n-ar mai
   fi spus nimic. Doar verdele s-a mutat putin spre teal, ca sa nu bata cap in
   cap cu restul. */
:root {
  --bg:        #01141B;
  --panel:     #062430;
  --panel-2:   #0A2E3C;
  --line:      #103A49;
  --line-2:    #17495B;
  --text:      #DCE7EA;
  --muted:     #82A6B2;
  --dim:       #5B7F8B;
  --accent:    #0E9BC7;
  --accent-2:  #47C7E2;
  --fill:      #008DBA;   /* umplerea butonului principal */
  --fill-line: #0FA4CE;
  --red:       #ff6b6b;
  --orange:    #ffb454;
  --blue:      #56b6ff;
  --green:     #3FD09A;
  --grey:      #5B7F8B;
  --head-bg:   rgba(1, 20, 27, .86);
  --shadow:    rgba(0, 0, 0, .45);
  --on-fill:   #eaf6fa;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  color-scheme: dark;
}

/* ---- light ----------------------------------------------------------------

   Not the dark palette inverted. A dark screen hides a multitude of sins: a
   colour that is merely dim on near-black turns into a colour that cannot be
   read on white. So the greys were rebuilt from the light end, and the four
   severity colours were darkened until each one clears 4.5:1 on the card
   behind it - red on white at #ff6b6b is about 2.9:1, which is a colour you
   see rather than read.

   Nothing switches by itself. With no choice made, the page follows the
   operating system; the button writes the choice down and from then on it
   wins. */

:root[data-theme="light"] {
  --bg:        #F1F6F9;
  --panel:     #FFFFFF;
  --panel-2:   #E9F1F5;
  --line:      #D6E3EA;
  --line-2:    #BFD2DC;
  --text:      #0A2028;
  --muted:     #48656F;
  --dim:       #62808B;
  --accent:    #0A7CA3;
  --accent-2:  #086689;
  --fill:      #0A7CA3;
  --fill-line: #0E9BC7;
  --red:       #C22F2F;
  --orange:    #96610A;
  --blue:      #145FA3;
  --green:     #0C7150;
  --grey:      #566F78;
  --head-bg:   rgba(255, 255, 255, .88);
  --shadow:    rgba(10, 32, 40, .14);
  --on-fill:   #F2FAFD;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:        #F1F6F9;
    --panel:     #FFFFFF;
    --panel-2:   #E9F1F5;
    --line:      #D6E3EA;
    --line-2:    #BFD2DC;
    --text:      #0A2028;
    --muted:     #48656F;
    --dim:       #62808B;
    --accent:    #0A7CA3;
    --accent-2:  #086689;
    --fill:      #0A7CA3;
    --fill-line: #0E9BC7;
    --red:       #C22F2F;
    --orange:    #96610A;
    --blue:      #145FA3;
    --green:     #0C7150;
    --grey:      #566F78;
    --head-bg:   rgba(255, 255, 255, .88);
    --shadow:    rgba(10, 32, 40, .14);
    --on-fill:   #F2FAFD;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 20px 60px; }

/* ---- header ---- */

header.top {
  /* ---- the bar stays dark in both themes ----

     Custom properties inherit, so redefining them here is enough: every link,
     border and button inside the bar picks up the dark values without a single
     extra rule, and light mode changes nothing above the fold.

     It is a deliberate look, not a shortcut - but it also solves a real
     problem. The wordmark is drawn for a dark ground: half of it is a pale
     grey that all but disappears on white. A light bar would need a second
     logo, and the second logo is the thing nobody remembers to update. */
  --bg:       #01141B;
  --bg-2:     #062430;
  --surface:  #062430;
  --panel:    #062430;
  --panel-2:  #0A2E3C;
  --line:     #103A49;
  --line-2:   #17495B;
  --text:     #DCE7EA;
  --muted:    #9BBFCB;
  --dim:      #77A0AE;
  --accent:   #0E9BC7;
  --accent-2: #47C7E2;
  --fill:     #008DBA;
  --fill-line:#0FA4CE;
  --head-bg:  rgba(1, 20, 27, .86);
  --on-fill:  #F2FAFD;
  color-scheme: dark;
  color: var(--text);

  border-bottom: 1px solid var(--line);
  background: var(--head-bg);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 24px;
}

header.top .inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 22px;
  /* Panoul ramane mai strans decat site-ul: aici logo-ul sta langa sapte
     legaturi de navigatie, si crescut cat pe site le-ar impinge pe toate. */
  height: 66px;
}

.brand {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand:hover { color: var(--text); text-decoration: none; }
.brand span { color: var(--accent-2); }
.brand svg { display: block; flex: none; }
.brand img { display: block; width: auto; }

nav.main { display: flex; gap: 18px; flex: 1; }
nav.main a { color: var(--muted); padding: 4px 0; border-bottom: 2px solid transparent; }
nav.main a.on { color: var(--text); border-bottom-color: var(--accent); }
nav.main a:hover { text-decoration: none; color: var(--text); }

.who { color: var(--muted); font-size: 13px; white-space: nowrap; display: flex; align-items: center; gap: 10px; }

/* ---- the light/dark button ----
   Only one of the two icons is ever in the document flow: the one that shows
   what pressing it would give you. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: var(--muted);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle svg { width: 15px; height: 15px; display: block; }
.theme-toggle .sun  { display: none; }
.theme-toggle .moon { display: block; }
:root[data-theme="dark"] .theme-toggle .sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}
.who b { color: var(--text); font-weight: 600; }

/* ---- cards ---- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
}

.card h2 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.grid { display: grid; gap: 20px; }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  nav.main { overflow-x: auto; }
}

/* ---- stat tiles ---- */

.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.stat .n { font-size: 28px; font-weight: 700; line-height: 1.1; }
.stat .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; margin-top: 4px; }

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

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
tbody tr:hover td { background: var(--panel-2); }
tr.picked td { background: color-mix(in srgb, var(--accent) 13%, transparent); }
td.wrap-cell { white-space: normal; }
.scroll { overflow-x: auto; }

th.pick, td.pick { width: 34px; padding-right: 0; }
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
}
/* The tint follows the colour instead of being written out next to it, so a
   palette change cannot leave a red tag sitting on a blue wash. */
.tag.red    { color: var(--red);    border-color: color-mix(in srgb, var(--red) 38%, transparent);    background: color-mix(in srgb, var(--red) 11%, transparent); }
.tag.orange { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 38%, transparent); background: color-mix(in srgb, var(--orange) 11%, transparent); }
.tag.blue   { color: var(--blue);   border-color: color-mix(in srgb, var(--blue) 38%, transparent);   background: color-mix(in srgb, var(--blue) 11%, transparent); }
.tag.grey   { color: var(--grey);   border-color: color-mix(in srgb, var(--grey) 38%, transparent);   background: color-mix(in srgb, var(--grey) 11%, transparent); }
.tag.green  { color: var(--green);  border-color: color-mix(in srgb, var(--green) 38%, transparent);  background: color-mix(in srgb, var(--green) 11%, transparent); }

.muted { color: var(--muted); }
.mono  { font-family: var(--mono); }

/* ---- forms ---- */

label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; }

input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }

.btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--fill); border-color: var(--fill-line); color: var(--on-fill); font-weight: 600; }
.btn.primary:hover { background: var(--accent); border-color: var(--accent-2); }
.btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 38%, transparent); }
.btn.danger:hover { border-color: var(--red); background: color-mix(in srgb, var(--red) 11%, transparent); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn[disabled]:hover { border-color: var(--line); background: var(--panel-2); }

.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.filters .f { min-width: 140px; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 14px;
  flex-wrap: wrap;
}

.note { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.note.err { color: var(--red);   border-color: color-mix(in srgb, var(--red) 38%, transparent);   background: color-mix(in srgb, var(--red) 9%, transparent); }
.note.ok  { color: var(--green); border-color: color-mix(in srgb, var(--green) 38%, transparent); background: color-mix(in srgb, var(--green) 9%, transparent); }
.note.info{ color: var(--muted); border-color: var(--line);          background: var(--panel-2); }

/* ---- login ---- */

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 30px 16px; }

/* The login screen has no header to hang the button on, so it gets its own
   corner. Somebody who prefers light should not have to sign in first to say
   so. */
.login-theme { position: fixed; top: 18px; right: 18px; z-index: 5; }
.login-box { width: 360px; max-width: 100%; }
.login-box .brand { justify-content: center; margin-bottom: 26px; }

/*
   Pe ecranul de login logo-ul se aseaza dupa TEXT, nu dupa toata imaginea.

   Logo-ul e scut plus cuvant. Pus la mijloc ca intreg, scutul trage tot semnul
   spre stanga si cuvantul ramane vizibil mai la dreapta decat caseta de sub el
   - desi, masurat cu rigla, era chiar la mijloc. Ochiul citeste cuvantul ca
   fiind lucrul, iar scutul doar ca semn pus inainte.

   Se muta la stanga cu 8.59% din latimea lui: exact cat sa ajunga mijlocul
   cuvantului peste mijlocul casetei. E in procente dinadins - procentele sunt
   fata de latimea imaginii, deci daca maine schimbi logo-ul de la 40 la alta
   marime, mutarea se socoteste singura.
*/
.login-box .brand img { transform: translateX(-8.59%); }
.login-box .field { margin-bottom: 14px; }
.g-recaptcha { margin-bottom: 14px; }

/* ---- 14-day bars ---- */

.bars { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.bars .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bars .b i { display: block; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.bars .b em { font-style: normal; font-size: 10px; color: var(--muted); text-align: center; margin-top: 6px; display: block; }
.bars .b:hover i { background: var(--accent-2); }

/* ---- pager ---- */

.pager { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.pager a, .pager span { padding: 5px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.pager span.on { border-color: var(--accent); color: var(--text); }

pre.block {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 13px;
  margin: 0;
}