:root {
  --ink: #1c241c;
  --paper: #f3eee4;
  --card: #fffcf6;
  --forest: #1a2e24;
  --forest-2: #243c31;
  --clay: #c45c26;
  --moss: #2d6a4f;
  --wine: #9b2335;
  --sand: #d8cbb4;
  --line: #e4d8c4;
  --muted: #6b6458;
  --ok: #2d6a4f;
  --warn: #b8860b;
  --shadow: 0 10px 30px rgba(28, 36, 28, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Figtree, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  display: flex;
}

h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 650; margin: 0 0 .4rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.25rem; }
p { margin: 0 0 .75rem; }
a { color: var(--moss); }
small, .muted { color: var(--muted); font-size: .85rem; }

.sidebar {
  width: 250px;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--forest), #122019);
  color: #e8efe9;
  padding: 1.4rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  position: sticky;
  top: 0;
}
.brand { display: flex; gap: .75rem; align-items: center; color: inherit; text-decoration: none; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--clay); color: #fff;
  display: grid; place-items: center;
  font-family: Fraunces, serif; font-weight: 650;
}
.brand strong, .brand em { display: block; }
.brand em { font-style: normal; opacity: .7; font-size: .85rem; }
.sidebar nav { display: flex; flex-direction: column; gap: .2rem; }
.sidebar nav a {
  color: #d5e0d8;
  text-decoration: none;
  padding: .55rem .7rem;
  border-radius: 8px;
}
.sidebar nav a:hover, .sidebar nav a.on { background: var(--forest-2); color: #fff; }
.who { margin-top: auto; border-top: 1px solid #355044; padding-top: 1rem; font-size: .9rem; }
.who small { display: block; color: #abc0b4; }
.who a { color: #f0c9b0; }

.main { flex: 1; padding: 1.5rem 2rem 3rem; min-width: 0; }
.top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; }
.lede { color: var(--muted); max-width: 46rem; }
.top-meta { display: flex; gap: .6rem; align-items: center; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.card.accent { background: #f7efe3; border-color: #e7c9aa; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .7rem; }
.big { font-family: Fraunces, serif; font-size: 2.4rem; margin: 0; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: 1fr 1fr 1fr; }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid.tight { gap: .8rem; }

.toolbar { display: flex; flex-wrap: wrap; gap: .7rem; align-items: end; margin-bottom: 1rem; }
.toolbar .month-title { font-family: Fraunces, serif; font-size: 1.2rem; padding: .4rem .2rem; }

label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; }
input, select, textarea {
  font: inherit; font-weight: 500;
  border: 1px solid var(--sand);
  background: #fff;
  border-radius: 10px;
  padding: .55rem .7rem;
}
.stack { display: flex; flex-direction: column; gap: .85rem; }
.check { flex-direction: row; align-items: center; font-weight: 500; }
.inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.inline input, .inline select { min-width: 9rem; }

.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  padding: .55rem 1rem;
  background: var(--ink); color: #fff;
  text-decoration: none; cursor: pointer; font: inherit; font-weight: 600;
}
.btn.primary { background: var(--clay); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--sand); }
.btn.danger { background: var(--wine); }
.btn.small { padding: .35rem .7rem; font-size: .85rem; }
.pill { border: 0; border-radius: 999px; padding: .35rem .7rem; font: inherit; cursor: pointer; }
.pill.warn { background: #f3dd9a; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .55rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
tr.off { opacity: .55; }
td.neg { color: var(--wine); }
.reset-admin { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.reset-admin input[type="password"] { width: 8.5rem; }

.tag {
  display: inline-block;
  background: color-mix(in srgb, var(--c, var(--moss)) 18%, white);
  color: var(--c, var(--moss));
  border-radius: 999px;
  padding: .15rem .5rem;
  font-size: .78rem;
  font-weight: 700;
}
.st { font-size: .78rem; font-weight: 700; border-radius: 6px; padding: .15rem .4rem; }
.st.in_asteptare { background: #f3e2b0; color: #7a5b00; }
.st.aprobat { background: #d7eadc; color: #1e4d34; }
.st.respins { background: #f3d2d6; color: #7a1828; }
.st.anulat { background: #ece7de; color: #5c564c; }

.people { list-style: none; padding: 0; margin: 0; }
.people li { display: flex; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .4rem; flex: none; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.plain.notes li.fresh { background: #fff6e6; margin: 0 -.4rem; padding: .4rem; border-radius: 8px; }
.spread { display: flex; justify-content: space-between; gap: 1rem; }
.empty { color: var(--muted); font-style: italic; }
.hint { color: var(--muted); font-size: .88rem; margin-top: 1rem; }
.kv { display: grid; gap: .5rem; }
.kv div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: .3rem 0; }
.kv dt { color: var(--muted); }

.flash { padding: .7rem 1rem; border-radius: 10px; margin-bottom: .6rem; }
.flash.ok { background: #dceee3; }
.flash.err { background: #f6d9de; }
.warn-card { border-color: #e4c56a; background: #fff7df; }
.ok-line { color: var(--moss); font-weight: 600; }
.overlap { background: #fff4ec; border: 1px solid #efd0bc; border-radius: 12px; padding: .7rem 1rem; margin: .8rem 0; }
.calc { background: #f6f1e7; border-radius: 12px; padding: .8rem 1rem; }

.approve-h { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.period { font-family: Fraunces, serif; font-size: 1.3rem; }
.motiv { font-style: italic; }
.mini { background: #f6f1e7; border-radius: 10px; padding: .6rem .8rem; }
.mini span { display: block; color: var(--muted); font-size: .8rem; }
.mini b { font-size: 1.3rem; }
.approve-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1rem; }
.approve-actions form { display: flex; gap: .4rem; }
.approve-actions input { flex: 1; }

.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 1rem; color: var(--muted); font-size: .88rem; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: .3rem; vertical-align: -2px; }
.swatch.hatch { background: repeating-linear-gradient(45deg, #2d6a4f, #2d6a4f 4px, #fff 4px, #fff 8px); }
.swatch.ov { background: #f4c7b0; }
.swatch.we { background: #ece7de; }

.gantt-wrap { overflow: hidden; }
.gantt { overflow: auto; max-width: 100%; }
.gantt table { min-width: max-content; }
.gantt th.d, .gantt td.d {
  width: 28px; min-width: 28px; max-width: 28px;
  padding: 2px; text-align: center; font-size: .68rem;
}
.gantt th.d span { display: block; color: var(--muted); }
.gantt .we { background: #efe9de; }
.gantt .ov { background: #f8d8c8; }
.gantt .today { box-shadow: inset 0 -3px 0 var(--clay); }
.sticky-name {
  position: sticky; left: 0; background: var(--card); z-index: 2;
  min-width: 180px; text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--ink);
}
.sticky-name small { display: block; font-weight: 500; }
.bar {
  display: block; height: 14px; border-radius: 3px; margin: 1px 0;
}
.bar.in_asteptare { opacity: .55; background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,.5) 3px, rgba(255,255,255,.5) 6px); }

.pontaj .marca {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 28px; border: 0; border-radius: 4px;
  font: inherit; font-size: .62rem; font-weight: 700; cursor: pointer;
  background: transparent; color: inherit; padding: 1px; text-decoration: none;
  line-height: 1.15; white-space: nowrap;
}
.pontaj th.d, .pontaj td.d { min-width: 52px; max-width: 64px; width: auto; }
.pontaj .marca.gol { color: var(--sand); }
.pontaj .marca.p { background: #d7eadc; color: #1e4d34; }
.pontaj .marca.a { background: #f3d2d6; color: #7a1828; }
.pontaj .marca.co { color: #fff; border-radius: 4px; }
.pontaj td.on-edit { outline: 2px solid var(--clay); }
.pontaj th.tot, .pontaj td.tot { min-width: 2.4rem; font-size: .75rem; text-align: center; }
.pontaj td.concedii-tot { min-width: 5rem; text-align: left; font-weight: 600; }
.pontaj-edit input[type="time"] { min-width: 7.5rem; }

.bars { display: flex; align-items: flex-end; gap: .6rem; height: 170px; padding-top: 1rem; }
.bar-col { flex: 1; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; }
.bar-col .col { width: 70%; background: var(--clay); border-radius: 6px 6px 0 0; min-height: 4px; }
.box { border: 1px dashed var(--sand); border-radius: 12px; padding: .8rem; }
.box legend { padding: 0 .4rem; font-weight: 700; }

.test-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: .45rem .9rem;
  background: #f3e2b0;
  color: #5c4300;
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
  border-bottom: 1px solid #e0c56a;
}
body, .login-body { padding-top: 2.3rem; }

.login-body {
  display: grid; place-items: center;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 10%, #e8c9aa 0, transparent 28%),
    radial-gradient(circle at 90% 80%, #c5d5c4 0, transparent 30%),
    var(--paper);
}
.login-card {
  width: min(440px, 92vw);
  background: var(--card);
  border-radius: 22px;
  padding: 2rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.login-brand { margin-bottom: 1.2rem; align-items: flex-start; }
.login-brand .brand-mark { width: 56px; height: 56px; font-size: 1.35rem; border-radius: 16px; }
.login-brand strong { font-size: 2rem; line-height: 1.15; }
.login-brand em { font-size: 1.15rem; opacity: .75; }
.login-card h1 { font-size: 1.15rem; font-weight: 500; font-family: Figtree, sans-serif; }

.landing-body {
  --ink: #111111;
  --paper: #f4f4f4;
  --card: #ffffff;
  --clay: #dc0a0a;
  --muted: #5c5c5c;
  --line: #e5e5e5;
  --sand: #ececec;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  color: var(--ink);
  align-content: start;
  justify-items: center;
  padding: 2.8rem 1rem 3rem;
  background: var(--paper);
}
.landing { width: min(980px, 94vw); }
.landing-head { margin: 0 0 1.4rem; }
.landing-kicker {
  margin: 0 0 .2rem;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--muted);
  font-size: .85rem;
}
.landing-head h1 {
  font-size: 1.2rem;
  font-weight: 500;
  font-family: Figtree, sans-serif;
  color: var(--muted);
}
.landing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.landing-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.15rem 1rem 1.05rem;
  min-height: 158px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.landing-tile .brand-mark { margin-bottom: .45rem; }
.landing-tile strong {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.landing-tile em {
  font-style: normal;
  color: var(--muted);
  font-size: .92rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.landing-tile.on {
  border-color: #f2b3b3;
  outline: 2px solid rgba(220, 10, 10, .16);
}
.landing-tile.featured {
  background: #f3ebe3;
  color: var(--ink);
  border-color: #dc0a0a;
  outline: 2px solid rgba(220, 10, 10, .12);
}
.landing-tile.featured em { color: var(--muted); }
.landing-tile.featured .brand-mark {
  background: #dc0a0a;
  color: #fff;
}
.landing-tile.on strong { font-size: 1.7rem; }
.landing-tile.on em { font-size: 1.05rem; }
.landing-tile.on .brand-mark { width: 52px; height: 52px; font-size: 1.25rem; border-radius: 15px; }
.landing-tile.soon { opacity: .48; }
.landing-tile .brand-mark.ghost {
  background: var(--sand);
  color: var(--muted);
}
@media (max-width: 800px) {
  .landing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .landing-tile { padding: .85rem .7rem .8rem; min-height: 0; }
  .landing-tile.on strong { font-size: 1.12rem; }
  .landing-tile.on em { font-size: .8rem; }
  .landing-tile.on .brand-mark { width: 40px; height: 40px; font-size: 1rem; }
}
.demo { margin-top: 1.4rem; color: var(--muted); font-size: .88rem; }
.demo ul { padding-left: 1.1rem; }
code { background: #f0e8d8; padding: .05rem .3rem; border-radius: 4px; }

@media (max-width: 900px) {
  body { flex-direction: column; }
  .sidebar { width: 100%; min-height: 0; position: relative; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .grid.two, .grid.three, .approve-actions { grid-template-columns: 1fr; }
  .main { padding: 1rem; }
}