/* =========================================================
   GraficTure — Sistem de design
   Paletă: cerneală/navy + accent amber, tipografie Space Grotesk
   (titluri) + Inter (text) + JetBrains Mono (date/ore — semnătura
   vizuală a aplicației, pentru că totul aici e despre timp).
   ========================================================= */

:root{
  --ink:#151A23;
  --ink-soft:#3A4250;
  --paper:#F1F3F7;
  --surface:#FFFFFF;
  --line:#E2E6EE;
  --line-soft:#EDEFF4;

  --navy:#1B2A41;
  --navy-soft:#24344C;
  --navy-2:#2F4562;

  --accent:#F0A202;
  --accent-ink:#7A5200;
  --accent-soft:#FFF6E0;

  --blue-12h:#3461FF;
  --blue-12h-soft:#EAEFFF;
  --green-8h:#0F9D63;
  --green-8h-soft:#E4F7EE;
  --gray-off:#9AA3AF;
  --gray-off-soft:#F1F2F5;
  --danger:#D9453D;
  --danger-soft:#FDECEC;
  --info:#2FA8D5;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(21,26,35,.06), 0 1px 1px rgba(21,26,35,.04);
  --shadow:0 10px 30px rgba(21,26,35,.09);

  --font-display:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Reskin Bootstrap 5 prin variabilele sale CSS native */
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-border-radius-sm: 6px;
  --bs-link-color: var(--navy-2);
  --bs-link-hover-color: var(--navy);

  --bs-primary: var(--navy);
  --bs-primary-rgb: 27,42,65;
  --bs-secondary: #5B6472;
  --bs-secondary-rgb: 91,100,114;
  --bs-success: var(--green-8h);
  --bs-success-rgb: 15,157,99;
  --bs-info: var(--blue-12h);
  --bs-info-rgb: 52,97,255;
  --bs-warning: var(--accent);
  --bs-warning-rgb: 240,162,2;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 217,69,61;
  --bs-dark: var(--ink);
  --bs-dark-rgb: 21,26,35;
  --bs-light: var(--paper);
  --bs-light-rgb: 241,243,247;
}

*{ -webkit-tap-highlight-color: transparent; }

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

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

a{ text-decoration: none; }
a.nav-link, a.navbar-brand{ text-decoration:none; }

::selection{ background: var(--accent); color: var(--ink); }

/* Focus visibil peste tot, pentru accesibilitate (tastatură) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Navbar ---------- */
.navbar{
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%) !important;
  box-shadow: 0 2px 12px rgba(21,26,35,.18);
  padding-top: .65rem; padding-bottom: .65rem;
}
.navbar-brand{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.navbar-brand::before{
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(240,162,2,.25);
  display: inline-block;
}
.navbar .nav-link{
  color: rgba(255,255,255,.78) !important;
  font-weight: 500;
  font-size: .92rem;
  padding: .5rem .75rem !important;
  border-radius: 8px;
  transition: color .15s ease, background-color .15s ease;
}
.navbar .nav-link{ display:inline-flex; align-items:center; gap:.45rem; }
.navbar .nav-link:hover{ color: #fff !important; background: rgba(255,255,255,.08); }
.navbar .nav-link.active{ color: #fff !important; background: rgba(255,255,255,.12); }
.navbar-text{ font-size: .88rem; }
.navbar .btn-outline-light{
  border-color: rgba(255,255,255,.35); font-weight: 500; font-size: .85rem;
  padding: .35rem .85rem; border-radius: 8px;
}
.navbar .btn-outline-light:hover{ background: var(--accent); border-color: var(--accent); color: var(--ink); }
.navbar-toggler{ border: none; padding: 4px 8px; }
.navbar-toggler:focus{ box-shadow: 0 0 0 2px var(--accent); }

/* ---------- Cards & surfaces ---------- */
.card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-header{
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .85rem 1.1rem;
}
.bg-white{ background: var(--surface) !important; }

/* ---------- Stat cards (dashboard) ---------- */
.stat-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.15rem 1.3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  position: relative;
  overflow: hidden;
}
.stat-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background: var(--accent-color, var(--navy));
}
.stat-card.stat-accent{ --accent-color: var(--accent); }
.stat-card.stat-success{ --accent-color: var(--green-8h); }
.stat-card.stat-info{ --accent-color: var(--blue-12h); }
.stat-card .stat-value{
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.stat-card .stat-label{
  font-size: .82rem;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ---------- Botoane ---------- */
.btn{
  font-weight: 600;
  font-size: .88rem;
  border-radius: 9px;
  padding: .55rem 1.05rem;
  min-height: 40px;
}
.btn-primary{ background: var(--navy); border-color: var(--navy); }
.btn-primary:hover, .btn-primary:focus{ background: var(--navy-soft); border-color: var(--navy-soft); }
.btn-outline-primary{ color: var(--navy); border-color: var(--navy); }
.btn-outline-primary:hover{ background: var(--navy); border-color: var(--navy); }
.btn-warning{ color: var(--ink); }
.action-tile{
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius); font-weight: 600; color: var(--ink);
  padding: 1.1rem; transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.action-tile:hover{ border-color: var(--navy); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--ink); }
.action-tile svg{ flex-shrink: 0; }

/* ---------- Formulare ---------- */
label.form-label{ font-weight: 600; font-size: .85rem; color: var(--ink-soft); }
.form-control, .form-select{
  border: 1.5px solid var(--line);
  border-radius: 9px;
  padding: .55rem .8rem;
  font-size: .92rem;
  min-height: 42px;
}
.form-control:focus, .form-select:focus{
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27,42,65,.12);
}
textarea.form-control{ min-height: unset; }

/* ---------- Badges ---------- */
.badge{ font-weight: 600; font-size: .74rem; padding: .4em .65em; border-radius: 6px; }

/* ---------- Tabele de date (angajați, cereri) — carduri pe mobil ---------- */
.data-table{ width:100%; border-collapse: separate; border-spacing:0; background:var(--surface); }
.data-table thead th{
  background: var(--paper); color: var(--ink-soft);
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .7rem .9rem; border-bottom: 1.5px solid var(--line); text-align:left;
}
.data-table tbody td{ padding: .8rem .9rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr:hover{ background: var(--paper); }

.avatar-initials{
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--navy); color: #fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size: .8rem;
  flex-shrink:0;
}
.person-cell{ display:flex; align-items:center; gap:.6rem; }

@media (max-width: 767.98px){
  .data-table thead{ display:none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td{ display:block; width:100%; }
  .data-table tr{
    background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
    margin-bottom: .65rem; padding: .35rem .9rem; box-shadow: var(--shadow-sm);
  }
  .data-table tbody tr:hover{ background: var(--surface); }
  .data-table td{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    border-bottom: 1px solid var(--line-soft); padding: .55rem 0; text-align:right;
  }
  .data-table td:last-child{ border-bottom:none; }
  .data-table td::before{
    content: attr(data-label); font-weight:600; font-size:.74rem; color: var(--ink-soft);
    text-transform: uppercase; letter-spacing:.03em; text-align:left; flex-shrink:0;
  }
  .data-table td.cell-plain::before{ content:none; }
  .data-table td .person-cell{ margin-left:auto; }
}
.legend-row{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; font-size:.82rem; color:var(--ink-soft); margin-bottom: .9rem; }
.legend-swatch{ display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:5px; vertical-align:middle; }

/* =========================================================
   Tabel grafic ture (componenta cea mai importantă de mobil)
   ========================================================= */
.schedule-scroll{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
  max-height: 74vh;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-sm);
}
.schedule-table{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-family: var(--font-mono);
  font-size: .78rem;
}
.schedule-table th, .schedule-table td{
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  padding: 0;
  text-align: center;
  white-space: nowrap;
}
.schedule-table thead th{
  position: sticky; top: 0; z-index: 3;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  padding: .5rem .35rem;
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: none;
}
.schedule-table thead th small{ opacity:.7; font-weight: 500; }
.schedule-table th.employee-col, .schedule-table td.employee-col{
  position: sticky; left: 0; z-index: 2;
  background: var(--surface);
  text-align: left;
  min-width: 148px;
  max-width: 148px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .82rem;
  padding: .55rem .7rem;
  white-space: normal;
  border-right: 1.5px solid var(--line);
}
.schedule-table thead th.employee-col{ z-index: 4; background: var(--navy); color:#fff; }
.schedule-table td.employee-col{ color: var(--ink); }

.schedule-table td a{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 40px;
  color: inherit; font-weight: 600;
  transition: filter .12s ease;
}
.schedule-table td a:hover{ filter: brightness(0.94); }

.cell-12H{ background: var(--blue-12h-soft); color: var(--blue-12h); }
.cell-8H{ background: var(--green-8h-soft); color: var(--green-8h); }
.cell-OFF{ background: var(--gray-off-soft); color: var(--gray-off); font-weight: 500 !important; }
.schedule-table td.cell-sunday{ background: repeating-linear-gradient(135deg, #E9EBF0, #E9EBF0 4px, #EFF1F5 4px, #EFF1F5 8px); }

.cell-holiday-badge{
  display: inline-block; font-size: .58rem; font-weight: 700;
  color: var(--navy); background: var(--accent-soft); border: 1px solid #F3DFA0;
  border-radius: 4px; padding: 0 4px; margin-top: 2px;
}

.total-col{ font-family: var(--font-mono); font-weight: 700; background: var(--paper); }

/* ---------- Listă/timeline program (staff, mobil-first) ---------- */
.timeline{ display:flex; flex-direction:column; gap:.5rem; }
.timeline-item{
  display:flex; align-items:center; gap:.85rem;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: .7rem .9rem;
}
.timeline-item.is-today{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,162,2,.15); }
.timeline-date{
  font-family: var(--font-mono); font-weight: 700; font-size: .95rem; color: var(--ink);
  min-width: 56px; text-align:center; line-height:1.1;
}
.timeline-date .dow{ display:block; font-family: var(--font-body); font-weight:600; font-size:.62rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.timeline-body{ flex: 1; min-width:0; }
.timeline-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--font-mono); font-weight:700; font-size:.8rem;
  padding: .3rem .65rem; border-radius: 999px;
}
.pill-12H{ background: var(--blue-12h-soft); color: var(--blue-12h); }
.pill-8H{ background: var(--green-8h-soft); color: var(--green-8h); }
.pill-OFF{ background: var(--gray-off-soft); color: var(--ink-soft); }
.pill-holiday::after{ content:"SL"; margin-left:.35rem; font-size:.62rem; background:var(--accent); color:var(--ink); padding:0 5px; border-radius:4px; }

/* ---------- Login / auth ---------- */
.auth-shell{
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 15% 15%, rgba(240,162,2,.10), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(52,97,255,.10), transparent 45%),
    var(--navy);
  padding: 24px;
}
.auth-card{
  width: 100%; max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 2.1rem 1.9rem;
}
.auth-mark{
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--navy); color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:700; margin-bottom: 1rem;
}

/* ---------- Utilitare mobil ---------- */
@media (max-width: 767.98px){
  .container{ padding-left: 14px; padding-right: 14px; }
  h3{ font-size: 1.3rem; }
  .stat-card .stat-value{ font-size: 1.6rem; }
  .card-body{ padding: 1rem; }
  .schedule-scroll{ max-height: 68vh; }
  .schedule-table td.employee-col, .schedule-table th.employee-col{ min-width: 118px; max-width: 118px; font-size: .76rem; }
  .action-tile{ padding: .9rem; font-size: .88rem; }
  .navbar .navbar-text{ display:block; margin: .5rem 0; }
}

/* Scrollbar mai discretă pe desktop pentru zona de tabel */
.schedule-scroll::-webkit-scrollbar{ height: 10px; width: 10px; }
.schedule-scroll::-webkit-scrollbar-track{ background: var(--paper); }
.schedule-scroll::-webkit-scrollbar-thumb{ background: #C7CCD6; border-radius: 6px; }
.schedule-scroll::-webkit-scrollbar-thumb:hover{ background: #ABB2C0; }