/* Tempo -- tema
   Paleta comuna App360: crem cald cu cerneala bleumarin.
   Accentul produsului: chihlimbar.

   Contrastele sunt calculate, nu estimate (19.09.2026):
     #a86b1f pe crem ....... 4.17  -> sub 4.5, NU se foloseste ca text
     #9a611b alb pe el ..... 5.12  -> umplere de buton cu text alb
     #8a5618 pe crem ....... 5.83  -> text de accent
     #0d1526 pe crem ....... 17.33
   Cand se schimba paleta, se recalculeaza. :root corect nu inseamna pagina
   corecta: se cauta separat culorile scrise direct, cu grep dupa # si rgba(
   fara var(--). */

:root {
  --ink: #0d1526;
  --ink-2: #39435a;
  --ink-3: #6d7690;
  --bg: #fbf9f5;
  --bg-2: #f2eee5;
  --bg-3: #e8e2d5;
  --line: rgba(13, 21, 38, .16);
  --line-2: rgba(13, 21, 38, .09);

  --accent: #a86b1f;
  --accent-buton: #9a611b;
  --accent-apasat: #82511a;
  --accent-text: #8a5618;
  --accent-voal: rgba(168, 107, 31, .1);

  --r: 14px;
  --r-mare: 20px;
  --umbra: 0 1px 2px rgba(13, 21, 38, .05), 0 8px 24px rgba(13, 21, 38, .06);
  --bara-jos: 68px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: 27px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; color: var(--ink-2); }
a { color: var(--accent-text); }

/* ------------------------------------------------------------------ cadru */

/* Ecranul de logare are nevoie de display:grid ca sa se centreze, dar o regula
   .logare cu display:grid bate .ecran{display:none} (aceeasi specificitate,
   scrisa mai jos) si ecranul ramane desenat sub toate celelalte. De aceea
   display-ul lui sta aici, legat de .activ, nu langa restul stilului. */
.ecran { display: none; }
.ecran.activ { display: block; }
.ecran.activ.logare { display: grid; place-items: center; }

.pagina {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px calc(var(--bara-jos) + 28px);
}

/* Pe telefon salutul si data stau una sub alta. Pe un ecran de 390 px, puse
   pe acelasi rand, data impinge salutul pe trei randuri. */
.antet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 18px;
}
.antet .zi { color: var(--ink-3); font-size: 14px; }
@media (min-width: 560px) {
  .antet { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .antet .zi { white-space: nowrap; }
}

.card {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-mare);
  padding: 20px;
}
.card + .card { margin-top: 14px; }

.sectiune { margin-top: 30px; }
.sectiune > h2 { margin-bottom: 12px; }

.marunt { font-size: 14px; color: var(--ink-3); }
.gol {
  padding: 26px 18px;
  text-align: center;
  color: var(--ink-3);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  font-size: 15px;
}

/* ----------------------------------------------------------------- butoane */

.buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}
.buton:active { transform: scale(.985); }
.buton:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.buton[disabled] { opacity: .5; cursor: default; }

.buton.principal {
  background: var(--accent-buton);
  color: #fff;
  min-height: 72px;
  font-size: 20px;
  box-shadow: var(--umbra);
}
.buton.principal:hover { background: var(--accent-apasat); }

.buton.contur { background: transparent; border-color: var(--line); }
.buton.contur:hover { background: var(--bg-3); }

.buton.inchis { background: var(--ink); color: var(--bg); }
.buton.inchis:hover { background: #1b2740; }

.buton.marunt { min-height: 42px; font-size: 15px; width: auto; padding: 0 16px; }

.pereche { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
/* Doua butoane pe un rand de telefon: textul trebuie sa incapa pe o linie. */
.pereche .buton { font-size: 15px; padding: 0 12px; gap: 7px; }
.pereche .buton svg { flex: none; }

/* ------------------------------------------------------------- ecran pontaj */

.stare {
  text-align: center;
  padding: 26px 20px 24px;
  border-radius: var(--r-mare);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
}
.stare.lucreaza { background: var(--accent-voal); border-color: rgba(168, 107, 31, .28); }
.stare.pauza { background: var(--bg-3); }

.stare .eticheta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stare.lucreaza .eticheta { color: var(--accent-text); }

.cronometru {
  font-size: 54px;
  font-weight: 640;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 2px;
  line-height: 1.05;
}

/* Cele doua puncte licarie ca la un ceas digital, o data pe secunda -- cat
   timp esti pontat. Regula de mai jos, la prefers-reduced-motion, opreste
   asta odata cu toate celelalte animatii. */
.licar { animation: licarire 1s step-end infinite; }
@keyframes licarire { 50% { opacity: 0; } }
.stare .unde { font-size: 16px; color: var(--ink-2); }
.stare .de-la { font-size: 14px; color: var(--ink-3); margin-top: 3px; }

.locatie-gasita {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  margin-bottom: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-size: 15px;
}
.locatie-gasita svg { flex: none; color: var(--accent-text); }

/* banda de anulare dupa pontarea automata */
.anulare {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
}
.anulare span { flex: 1; }
.anulare button {
  flex: none;
  background: transparent;
  border: 1px solid rgba(251, 249, 245, .45);
  color: var(--bg);
  border-radius: 9px;
  padding: 7px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.anulare button:hover { background: rgba(251, 249, 245, .12); }

/* -------------------------------------------------------------------- liste */

.rand {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line-2);
}
.rand:last-child { border-bottom: 0; }
.rand .mijloc { flex: 1; min-width: 0; }
.rand .titlu { font-weight: 570; }
.rand .sub { font-size: 14px; color: var(--ink-3); }
.rand .dreapta { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Variantă pentru rânduri cu buton alăturat (aprobă/respinge, copiază link):
   numele trece pe rândul lui, iar butoanele nu îl mai împing în trei linii
   pe telefon. */
.rand.rand-linii { flex-wrap: wrap; row-gap: 10px; }
.rand.rand-linii .mijloc { flex-basis: 100%; }

.pastila {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.pastila.acum { background: var(--accent-voal); border-color: rgba(168, 107, 31, .3); color: var(--accent-text); }
.pastila.gata { background: var(--bg-3); }
.pastila.suspect { border-color: rgba(168, 107, 31, .5); color: var(--accent-text); }
.pastila.mare { border-color: rgba(13, 21, 38, .3); }

.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 13px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  font-weight: 650;
}
.total .val { font-size: 21px; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- calendar */

.calendar-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.calendar-cap .luna { font-size: 19px; font-weight: 650; text-transform: capitalize; }
.sageti { display: flex; gap: 6px; }
.sageti button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink);
}
.sageti button:hover { background: var(--bg-3); }

.vederi { display: flex; gap: 4px; background: var(--bg-3); padding: 4px; border-radius: 11px; }
.vederi button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.vederi button.activ { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(13,21,38,.08); }

.grila { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 14px; }
.grila .nume-zi {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: 6px;
}
.zi-cel {
  position: relative;
  min-height: 62px;
  padding: 6px 5px 5px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.zi-cel:hover { background: var(--bg-2); }
.zi-cel.afara { opacity: .35; }
.zi-cel.azi { border-color: var(--accent); }
.zi-cel.aleasa { background: var(--bg-3); border-color: var(--ink-3); }
.zi-cel .nr { font-size: 13px; font-weight: 600; }
.zi-cel.azi .nr { color: var(--accent-text); }
.zi-cel .ore {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  margin-top: 1px;
}
.semne { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
.semn { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.semn.task { background: var(--accent); }
.semn.absenta { background: var(--ink-2); }

/* banda de absenta peste zile */
.zi-cel.absenta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--ink-2);
  border-radius: 0 0 9px 9px;
}

.ziua-aleasa { margin-top: 18px; }

/* vedere pe saptamana: coloane cu bare de ore */
.saptamana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; align-items: end; }
.coloana { text-align: center; }
.bara {
  height: 120px;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 8px;
  background: var(--bg-3);
  overflow: hidden;
}
.bara .umplut { background: var(--accent); }
.coloana .eticheta-zi { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.coloana .ore-zi { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- formulare */

label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
input, select, textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-text);
  outline-offset: 1px;
  border-color: transparent;
}
.camp { margin-bottom: 14px; }
.doua { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ------------------------------------------------------------------- logare */

.logare { min-height: 100dvh; padding: 24px 16px; }
.logare .cutie { width: 100%; max-width: 380px; }
.logare .marca { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.logare .marca .nume { font-size: 25px; font-weight: 680; letter-spacing: -.02em; }

/* --------------------------------------------------------------- bara de jos */

/* Fara regula asta, display:flex de mai jos bate atributul hidden si bara
   ramane vizibila peste ecranul de logare. Clasa plus atribut cantareste mai
   mult decat clasa singura, deci tine si peste regulile de pe desktop. */
.bara-nav[hidden] { display: none; }

.bara-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--bara-jos) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: rgba(251, 249, 245, .93);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-2);
  z-index: 40;
}
.bara-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bara-nav button.activ { color: var(--accent-text); }

/* ------------------------------------------------------------------- mesaje */

.vestire {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bara-jos) + 16px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(10px);
  max-width: min(92vw, 420px);
  padding: 13px 18px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r);
  font-size: 15px;
  box-shadow: var(--umbra);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 60;
}
.vestire.vazuta { opacity: 1; transform: translateX(-50%) translateY(0); }

.banda-proba {
  background: var(--ink);
  color: var(--bg);
  padding: 9px 16px;
  font-size: 13px;
  text-align: center;
}
.banda-proba b { color: #e8c98c; }

/* ------------------------------------------------------------------- desktop */

@media (min-width: 900px) {
  :root { --bara-jos: 0px; }
  body { display: grid; grid-template-columns: 228px 1fr; min-height: 100dvh; }
  body.fara-nav { display: block; }

  .bara-nav {
    position: sticky;
    top: 0;
    height: 100dvh;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3px;
    padding: 22px 12px;
    border-top: 0;
    border-right: 1px solid var(--line-2);
    background: var(--bg-2);
    backdrop-filter: none;
  }
  .bara-nav button {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 11px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 15px;
  }
  .bara-nav button.activ { background: var(--bg); }
  .bara-nav .marca-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px 18px;
    font-size: 19px;
    font-weight: 680;
    letter-spacing: -.02em;
  }
  .pagina { max-width: 720px; padding: 34px 28px 60px; }
  h1 { font-size: 31px; }
  .cronometru { font-size: 62px; }
  .zi-cel { min-height: 92px; }
  .vestire { bottom: 22px; left: auto; right: 22px; transform: translateY(10px); }
  .vestire.vazuta { transform: translateY(0); }
}

@media (max-width: 899px) {
  .bara-nav .marca-nav { display: none; }
}

/* Animatiile se opresc cand sistemul o cere. Verificat cu emularea din
   DevTools: nu ramane nicio tranzitie de pozitie. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .vestire { transform: translateX(-50%); }
}