/* ============ 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);

  /* header height (pt nav mobil) */
  --header-h: 56px;
}

* { 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%;
}

a{ color: var(--accent); }

/* 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); }

/* Utilities */
.mt-2{ margin-top: 8px; } .mt-3{ margin-top: 12px; } .mt-4{ margin-top: 16px; }
.muted{ color:var(--muted); font-size:14px; }

/* 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;
}

/* 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;
  text-decoration:none;
}
.btn.outline{ background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn.sm{ padding: 8px 12px; min-height: 36px; font-weight:600; border-radius:10px; white-space:nowrap; }

.badge{ padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.b-ok{ background:#d1fae5; color:#065f46; }
.b-warn{ background:#fef3c7; color:#92400e; }
.b-bad{ background:#fee2e2; color:#991b1b; }

/* 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; } }

/* — 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; }
input.input-sm { padding: 10px 12px; min-height: 36px; border-radius:10px; }
@media (max-width: 640px){ .form-inline { flex-wrap: wrap; } }

/* Tables */
.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; }

/* Acțiuni în tabel */
.td-actions { white-space: nowrap; }
.actions-inline { display:inline-flex; gap:8px; flex-wrap:nowrap; align-items:center; }
.actions-inline .btn { white-space:nowrap; }

/* ===== Mobile nav (fix duplicare) ===== */
.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: 12px; min-height: var(--header-h);
}

/* Desktop nav */
.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;
}

/* Toggle mobil */
.nav-toggle{
  display:none; border:0; background:transparent;
  font-size:24px; padding:10px; line-height:1; cursor:pointer;
}

/* 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; }

/* Breakpoint: 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; }
@media (min-width:1025px){ .brand img { height: 40px; } }

/* 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; }
@media (max-width: 720px){ .user-chip .label{ display:none; } }

.nav-userline{
  padding:8px 12px; color:#6b7280; font-size:14px;
  border-bottom:1px solid #eee;
}

.badge.b-muted { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }


/* ===== Mobile: ajustări generale ===== */
@media (max-width: 720px){
  .container{ padding: var(--space-sm); }
  .card{ padding: var(--space-sm); border-radius: 14px; }
  .table th, .table td{ font-size: 14px; }
}
@media (max-width: 380px){
  .btn{ padding: 10px 12px; }
}

/* ===== Tabel stack (card-uri) 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; }

  .table.stack td::before{
    content: attr(data-label);
    font-weight:600; color: var(--muted);
    flex: 0 0 44%;
  }

  .col-hide-sm { display:none !important; }

  /* acțiuni pe mobil: se pot împacheta, dar rămân aliniate */
  .td-actions{ white-space: normal; }
  .actions-inline{ flex-wrap: wrap; gap:8px; }
}

/* ===== DASHBOARD (responsive real pe lățime ecran) ===== */

/* grilă KPI: se adaptează automat la lățime */
.dash-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}

/* coloane liste: 2 pe ecran lat, 1 pe ecran îngust */
.dash-columns{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

/* KPI cards: responsive */
.card.kpi{ padding:14px; min-width:0; }
.kpi-val{ font-size:28px; font-weight:800; margin-top:6px; line-height:1.1; }

/* pe ecrane medii: 1 coloană la liste, KPI mai compact */
@media (max-width: 980px){
  .dash-columns{ grid-template-columns: 1fr; }
  .kpi-val{ font-size:26px; }
}

/* pe mobil: KPI pe o coloană, butoane + header se împachetează ok */
@media (max-width: 640px){
  .dash-grid{ grid-template-columns: 1fr; }
  .card.kpi{ padding:12px; }
  .kpi-val{ font-size:24px; }

  /* mic polish pentru dashboard header */
  .actions-inline{ width:100%; }
}

/* foarte mic: padding și fonturi puțin mai strânse */
@media (max-width: 420px){
  .card.kpi{ padding:10px; }
  .muted{ font-size:13px; }
}