/* ============ Mobile-first design system (Portal Davidesti) ============ */
:root{
  --bg:#f6f8fb; --fg:#111827; --muted:#6b7280; --card:#ffffff; --accent:#2563eb;
  --ok:#059669; --warn:#f59e0b; --bad:#dc2626; --ring: 0 0 0 3px rgba(37,99,235,.25);
  --radius: 16px; --shadow: 0 2px 12px rgba(0,0,0,.06);
  --space: 16px; --space-sm: 12px; --space-xs: 8px;
  --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.45; -webkit-text-size-adjust:100%;
}

/* Container + cards */
.container{ max-width: 1060px; margin: 0 auto; padding: var(--space); }
.card{ background:var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space); }

/* Header */
.site-header{ position: sticky; top: 0; z-index: 50; background: var(--card); box-shadow: 0 1px 8px rgba(0,0,0,.05); }
.navbar{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-sm); }
.brand{ font-weight:700; }
.nav-links{ display:flex; gap: var(--space-sm); align-items:center; }
.nav-links a{ color: var(--accent); text-decoration:none; font-weight:600; padding: 10px 12px; border-radius: 10px; }
.nav-toggle{ display:none; border:0; background:transparent; font-size: 20px; padding: 10px; }

/* Buttons */
.btn{ display:inline-block; border:0; cursor:pointer; border-radius:12px;
  background:var(--accent); color:#fff; font-weight:700; padding:12px 16px; min-height:44px; }
.btn.outline{ background:transparent; color:var(--accent); border:1px solid var(--accent); }
.badge{ padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; }
.b-ok{ background:#d1fae5; color:#065f46; }
.b-warn{ background:#fef3c7; color:#92400e; }
.b-bad{ background:#fee2e2; color:#991b1b; }
.muted{ color:var(--muted); font-size:14px; }

/* Forms */
input, select, textarea, button{
  font: inherit; color: inherit;
}
label{ display:block; font-weight:600; margin-top: var(--space-sm); }
input, select, textarea{
  width: 100%; background:#fff; border:1px solid #e5e7eb; border-radius: 12px;
  padding: 12px 14px; min-height:44px;
}
input:focus, select:focus, textarea:focus, .btn:focus{ outline:none; box-shadow: var(--ring); }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
@media (max-width: 720px){ .form-row{ grid-template-columns: 1fr; } }
/* 3 coloane: input + 2 butoane */
.form-row.cols-3 { grid-template-columns: 1fr auto auto; }
@media (max-width: 720px){
  .form-row.cols-3 { grid-template-columns: 1fr; } /* pe mobil se așează pe rânduri */
}

/* Tables: responsive scroll on small screens */
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding: 10px; border-bottom:1px solid #eee; text-align:left; vertical-align: top; }
.table thead th{ position: sticky; top: 0; background: #fff; }
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius: 12px; }


/* Utilities */
.mt-2{ margin-top: 8px; } .mt-3{ margin-top: 12px; } .mt-4{ margin-top: 16px; }
a{ color: var(--accent); }

/* Mobile nav */
@media (max-width: 720px){
  .nav-toggle{ display:block; }
  .nav-links{ display:none; flex-direction: column; align-items: flex-start; padding: var(--space-sm); }
  .nav-links.open{ display:flex; }
  .container{ padding: var(--space-sm); }
  .card{ padding: var(--space-sm); border-radius: 14px; }
  .table th, .table td{ font-size: 14px; }
}

/* Compact screens */
@media (max-width: 380px){
  .btn{ padding: 10px 12px; }
}

/* — Form inline compact: input + 2 butoane pe un singur rând — */
.form-inline { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.form-inline .grow { flex: 1 1 auto; min-width: 220px; }
.form-inline .btn { white-space: nowrap; }

/* variante „small” */
.btn.sm { padding: 8px 12px; min-height: 36px; font-weight:600; border-radius:10px; }
input.input-sm { padding: 10px 12px; min-height: 36px; border-radius:10px; }

/* label vizibil doar pentru cititoare ecran */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Pe ecrane foarte mici, permitem împachetare (altfel ar depăși) */
@media (max-width: 640px){
  .form-inline { flex-wrap: wrap; }
}

/* Ține butoanele de acțiune pe un singur rând în tabele */
.td-actions { white-space: nowrap; }             /* fără line-break în celulă */
.actions-inline { display: inline-flex; gap: 8px; flex-wrap: nowrap; }
.actions-inline .btn { white-space: nowrap; }    /* nici textul butoanelor nu se rupe */

/* variantă compactă pentru butoane în tabel */
.btn.sm { padding: 8px 12px; min-height: 36px; font-weight: 600; border-radius: 10px;}

/* ==== Mobile Nav (fix duplicare) ==== */
:root { --header-h: 56px; }

.site-header{ position: sticky; top:0; z-index:50; background:#fff; box-shadow:0 1px 8px rgba(0,0,0,.05); }
.navbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--header-h); }

.nav-links-desktop{ display:flex; gap:12px; align-items:center; }
.nav-links-desktop a{ color: var(--accent); text-decoration:none; font-weight:600; padding:10px 12px; border-radius:10px; }

.nav-toggle{ display:none; border:0; background:transparent; font-size:24px; padding:10px; line-height:1; }

/* Dropdown mobil */
.nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:49; }
.nav-panel{
  position:fixed; z-index:50; left:0; right:0; top:var(--header-h);
  background:#fff; box-shadow:0 10px 20px rgba(0,0,0,.12);
  border-bottom-left-radius:14px; border-bottom-right-radius:14px;
  padding:8px; max-height:70vh; overflow:auto;
}
.nav-panel a{ display:block; padding:12px 14px; border-radius:10px; color:#111827; font-weight:600; text-decoration:none; }
.nav-panel a:hover{ background:#f3f4f6; }

/* 🔒 ascunse implicit dacă NU au .open */
.nav-overlay:not(.open), .nav-panel:not(.open){ display:none !important; }

/* Breakpoints: ascunde meniul desktop până la 1024px */
@media (max-width: 1024px){
  .nav-links-desktop{ display:none !important; }
  .nav-toggle{ display:block; }
}
/* Pe desktop ascunde panel-ul mobil */
@media (min-width: 1025px){
  .nav-overlay, .nav-panel{ display:none !important; }
}

/* —— Brand / Logo —— */
.brand { display:flex; align-items:center; }
.brand-link { display:inline-flex; align-items:center; text-decoration:none; }
.brand img { display:block; height: 36px; width: auto; }

/* pe ecrane mari, un pic mai mare */
@media (min-width:1025px){
  .brand img { height: 40px; }
}

/* ascunde textul vizual, păstrează pentru cititoare de ecran */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-color-scheme: dark){
  .brand img { content: url("/assets/logo-dark.svg?v=1"); }
}

/* —— User chip (nume utilizator logat) —— */
.user-chip{ display:flex; align-items:center; gap:8px; font-weight:600; color:#111827; }
.user-chip .avatar{
  width:28px; height:28px; border-radius:9999px; background:#e5e7eb;
  display:grid; place-items:center; font-size:12px; font-weight:700;
}
.user-chip .label{ white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; }

/* pe ecrane înguste ținem doar avatarul în bara de sus */
@media (max-width: 720px){
  .user-chip .label{ display:none; }
}

/* mic text în headerul dropdown-ului mobil */
.nav-userline{
  padding:8px 12px; color:#6b7280; font-size:14px; border-bottom:1px solid #eee;
}

/* ===== Tabel portal: se compactează în carduri pe mobil ===== */
.table.stack { width:100%; border-collapse: collapse; }
.table.stack th, .table.stack td { padding:10px; border-bottom:1px solid #eee; text-align:left; }

@media (max-width: 720px){
  .table.stack thead { display:none; }
  .table.stack tr {
    display:block;
    background:#fff; border:1px solid #e5e7eb; border-radius:12px;
    box-shadow: var(--shadow);
    margin-bottom:12px;
  }
  .table.stack td {
    display:flex; gap:10px; justify-content:space-between; align-items:flex-start;
    border-bottom:1px solid #f1f5f9; padding:10px 12px;
  }
  .table.stack td:last-child { border-bottom:none; }

  /* eticheta coloanei, preluată din data-label */
  .table.stack td::before {
    content: attr(data-label);
    font-weight:600; color: var(--muted);
    flex: 0 0 44%;
  }
  
   /* ascunde coloane mai puțin importante pe ecran mic */
  .col-hide-sm { display:none !important; }
  /* acțiuni pe un rând */
  .td-actions { white-space: nowrap; }
  .actions-inline { display:inline-flex; gap:8px; flex-wrap:nowrap; }
  .btn.sm { padding:8px 12px; min-height:36px; font-weight:600; border-radius:10px; }
}

  /* acțiuni pe un singur rând */
  .td-actions { white-space: nowrap; }
  .actions-inline { display:inline-flex; gap:8px; flex-wrap:nowrap; }
  .btn.sm { padding:8px 12px; min-height:36px; font-weight:600; border-radius:10px; }
}

@media (max-width: 640px){ .form-inline{ flex-wrap:wrap; } }