@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --teal:#4A9C9C; --teal-dk:#3d8585; --teal-lt:#e8f4f4;
  --amber:#F59E0B;
  --ink:#2c3e50; --txt:#333; --mut:#888; --fade:#aaa;
  --ok:#27ae60; --ok-bg:#e8f8f0;
  --warn:#f39c12; --warn-bg:#fef5e7;
  --bad:#e74c3c; --bad-bg:#fde8e8;
  --line:#eee; --line-soft:#f5f5f5; --page:#F1F1F1;
  --card-sh:0 2px 4px rgba(0,0,0,.05);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:var(--page);color:var(--txt)}

/* ---------- sidebar ---------- */
.sidebar{position:fixed;left:0;top:0;width:260px;height:100vh;background:linear-gradient(180deg,#4A9C9C 0%,#3d8888 100%);color:#fff;overflow-y:auto;overflow-x:hidden;z-index:1000;padding:20px 0;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.sidebar .logo-container{padding:0 16px;margin-bottom:8px}
.sidebar .logo{padding:0 0 16px;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:12px}
.sidebar .logo .logo-full{display:block;font-size:1.3rem;font-weight:300;color:#fff}
.sidebar .logo .logo-full .logo-x{color:var(--amber);font-weight:700}
.sidebar .logo .logo-compact{display:none}
.sidebar .logo-sub{font-size:.65rem;color:rgba(255,255,255,.5);margin-top:2px}
.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 0 12px}
.menu-section{padding:0 12px;margin-bottom:4px}
.menu-label{color:rgba(255,255,255,.5);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:10px 8px 6px;display:flex;cursor:pointer;user-select:none;align-items:center;justify-content:space-between}
.menu-label .toggle-arrow{font-size:.6rem;transition:transform .2s}
.menu-label.collapsed .toggle-arrow{transform:rotate(-90deg)}
.menu-label.collapsed + .menu-items{max-height:0!important;overflow:hidden}
.menu-items{overflow:hidden;transition:max-height .3s ease;max-height:500px}
.menu-item{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:1px 0;border-radius:6px;color:rgba(255,255,255,.8);font-size:.9rem;cursor:pointer;transition:all .15s;text-decoration:none;white-space:nowrap;border-left:3px solid transparent}
.menu-item:hover{background:rgba(255,255,255,.12);color:#fff}
.menu-item.active{background:rgba(255,255,255,.18);color:#fff}
.menu-item .icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.menu-item .icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
/* elemente de meniu cu majuscule (aliniat SyncX) */
.menu-item .text{text-transform:uppercase;letter-spacing:.3px;font-weight:500;font-size:.8rem}
.menu-item .text .lung{display:inline}
.menu-item .text .scurt{display:none}
.menu-item .badge{margin-left:auto;background:var(--amber);color:#fff;font-size:.7rem;padding:1px 7px;border-radius:10px}

/* ---------- shell ---------- */
.main-content{margin-left:260px;min-height:100vh}
.header{background:#fff;padding:12px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e8e8e8;position:sticky;top:0;z-index:50}
.header-left .breadcrumb{font-size:.85rem;color:#999}
.header-left .breadcrumb span{color:var(--txt);font-weight:500}
.header-right{display:flex;align-items:center;gap:16px}
.header-date{font-size:.8rem;color:#666;background:var(--line-soft);padding:6px 12px;border-radius:6px}
.header-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 12px;border-radius:6px}
.header-user:hover{background:var(--line-soft)}
.header-user .avatar{width:32px;height:32px;background:var(--teal);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:600}
.header-user .uname{font-size:.85rem;color:var(--txt);font-weight:500}
.btn-logout{padding:6px 14px;background:var(--bad);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.8rem}
.btn-logout:hover{background:#c0392b}
.content{padding:20px 24px}

/* ---------- carduri ---------- */
.card{background:#fff;border-radius:10px;padding:20px;box-shadow:var(--card-sh);margin-bottom:20px}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.card-title{font-size:1rem;font-weight:600;color:var(--txt)}
.card-sub{font-size:.75rem;color:var(--fade);font-weight:400;margin-top:2px}
.btn-action{padding:6px 16px;background:var(--teal);color:#fff;border:none;border-radius:6px;font-size:.8rem;cursor:pointer}
.btn-action:hover{background:var(--teal-dk)}
.btn-mini{padding:5px 12px;font-size:.76rem;border:1px solid #d9e2e2;background:#fff;color:var(--teal);border-radius:6px;cursor:pointer}
.btn-mini:hover{background:var(--teal-lt)}
.btn-mini.ghost{color:#666;border-color:#e0e0e0}
.btn-mini.ghost:hover{background:var(--line-soft)}

/* ---------- KPI ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:#fff;border-radius:10px;padding:14px 18px;box-shadow:var(--card-sh)}
.kpi .k-lab{font-size:.68rem;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.kpi .k-val{font-size:1.7rem;font-weight:700;color:var(--ink);line-height:1}
.kpi .k-val small{font-size:.95rem;color:#ccc;font-weight:500}
.kpi .k-sub{font-size:.72rem;color:var(--fade);margin-top:4px}
.kpi .k-val.teal{color:var(--teal)} .kpi .k-val.ok{color:var(--ok)}
.kpi .k-val.warn{color:var(--warn)} .kpi .k-val.bad{color:var(--bad)}
.kpi .k-sub.ok{color:var(--ok)} .kpi .k-sub.warn{color:var(--warn)} .kpi .k-sub.bad{color:var(--bad)}

/* ---------- banda turei ---------- */
.shift{background:#fff;border-radius:10px;padding:14px 18px;box-shadow:var(--card-sh);margin-bottom:14px}
.shift-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.shift-name{font-size:.82rem;font-weight:600;color:var(--txt)}
.shift-meta{font-size:.74rem;color:#999}
.shift-bar{display:flex;gap:3px;height:26px}
.shift-seg{display:flex;align-items:center;justify-content:center;font-size:.68rem;color:#fff;font-weight:600;overflow:hidden;white-space:nowrap}
.shift-seg:first-child{border-radius:4px 0 0 4px} .shift-seg:last-child{border-radius:0 4px 4px 0}
.shift-seg.completed{background:var(--ok)} .shift-seg.in_progress{background:var(--warn)}
.shift-seg.scheduled{background:#eef2f7;color:#7f8c8d} .shift-seg.missed{background:var(--bad)}
.shift-seg.not_home{background:#e67e22} .shift-seg.gap{background:#eceff1}
.shift-axis{display:flex;justify-content:space-between;font-size:.64rem;color:#c8c8c8;margin-top:4px}

/* ---------- rand de vizita ---------- */
.vrow{border-left:3px solid #dfe4e8;background:#fcfcfd;padding:12px 14px;margin-bottom:8px}
.vrow.completed{border-left-color:var(--ok);background:#fafbfc}
.vrow.in_progress{border-left-color:var(--warn);background:#fffdf7}
.vrow.missed,.vrow.not_home{border-left-color:var(--bad);background:#fffafa}
.vrow-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.vrow-main{flex:1;min-width:0}
.vrow-name{font-size:.88rem;font-weight:700;color:var(--ink)}
.vrow-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vrow-meta{font-size:.76rem;color:var(--mut);margin-top:3px}
.vrow-note{font-size:.72rem;color:#7f8c8d;margin-top:6px}
.vrow-note.warn{color:#b9770e;font-style:italic}
.vrow-side{text-align:right;flex-shrink:0}
.vrow-prog{font-size:.72rem;font-weight:700}
.vrow-prog.completed{color:var(--ok)} .vrow-prog.in_progress{color:var(--warn)}
.vrow-prog.scheduled{color:#95a5a6} .vrow-prog.missed,.vrow-prog.not_home{color:var(--bad)}
.vrow-gps{font-size:.66rem;color:#bbb;margin-top:2px}
.tags{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.tag{background:#eef2f7;color:#5d6d7e;font-size:.66rem;padding:2px 6px;border-radius:3px}
.tag.done{background:var(--ok-bg);color:#1e8449}
.chip{font-size:.64rem;font-weight:700;padding:2px 7px;border-radius:4px}
.chip.alergie{background:var(--bad-bg);color:#c0392b}
.chip.incident{background:var(--warn-bg);color:#b9770e}
.chip.info{background:#eef2f7;color:#7f8c8d;font-weight:400}

/* ---------- tabel ---------- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:.7rem;color:#999;text-transform:uppercase;letter-spacing:.5px;padding:10px 12px;border-bottom:1px solid #f0f0f0}
td{padding:10px 12px;font-size:.85rem;color:var(--txt);border-bottom:1px solid #f8f8f8}
tr:hover td{background:#fafbfc}
.status{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:500}
.status.completed{background:var(--ok-bg);color:var(--ok)}
.status.in_progress{background:var(--warn-bg);color:var(--warn)}
.status.scheduled{background:#eef2f7;color:#7f8c8d}
.status.missed{background:var(--bad-bg);color:var(--bad)}
.status.not_home{background:var(--warn-bg);color:#e67e22}
.status.active{background:var(--ok-bg);color:var(--ok)}
.status.expired{background:var(--bad-bg);color:var(--bad)}
.progress-bar{width:80px;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:6px}
.progress-bar .fill{height:100%;background:var(--teal);border-radius:3px}
.empty{text-align:center;padding:40px;color:#999;font-size:.85rem}

/* ---------- fisa lunii ---------- */
.fisa-row{margin-bottom:14px}
.fisa-name{font-size:.8rem;margin-bottom:6px;color:var(--txt)}
.fisa-cols{display:flex;align-items:center;gap:8px}
.fisa-slots{display:flex;gap:3px;flex:1}
.slot{flex:1;height:22px;border-radius:3px;background:#fff;border:1px solid var(--line)}
.slot.signed{background:var(--ok);border-color:var(--ok)}
.slot.pending{background:var(--warn);border-color:var(--warn)}
.slot.problem{background:var(--bad);border-color:var(--bad)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.68rem;color:var(--mut);margin-top:10px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:0}

/* ---------- grafice ---------- */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.chart-box{position:relative;width:100%}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.74rem;color:var(--mut);margin-bottom:10px}
.chart-legend span{display:flex;align-items:center;gap:5px}
.chart-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.range-tabs{display:flex;gap:6px}
.range-tab{padding:4px 12px;font-size:.75rem;border:1px solid #e5e5e5;background:#fff;border-radius:6px;cursor:pointer;color:#777}
.range-tab.active{border-color:var(--teal);background:var(--teal-lt);color:var(--teal);font-weight:600}

/* ---------- modal ---------- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:12px;padding:28px;width:90%;max-width:480px;max-height:90vh;overflow-y:auto}
.modal h3{font-size:1.1rem;margin-bottom:20px;color:var(--txt)}
.modal .form-group{margin-bottom:14px}
.modal .form-group label{display:block;font-size:.8rem;color:#666;margin-bottom:4px;font-weight:500}
.modal .form-group input,.modal .form-group select,.modal .form-group textarea{width:100%;padding:10px 12px;border:1.5px solid #e0e0e0;border-radius:8px;font-size:.85rem;outline:none;font-family:inherit}
.modal .form-group input:focus,.modal .form-group select:focus{border-color:var(--teal)}
.modal-buttons{display:flex;gap:10px;margin-top:20px}
.modal-buttons .btn-action{flex:1;padding:10px;font-size:.85rem}
.modal-buttons .btn-cancel{flex:1;padding:10px;background:var(--line-soft);color:#666;border:none;border-radius:8px;font-size:.85rem;cursor:pointer}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:8px;font-size:.85rem;opacity:0;pointer-events:none;transition:all .25s;z-index:500;box-shadow:0 4px 16px rgba(0,0,0,.2)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.ok{background:var(--ok)} #toast.err{background:var(--bad)}



/* Badge de meniu: numarul de lucruri de rezolvat. Rosu, ca sa se vada
   peste fundalul teal al barei. */
.menu-badge{
  margin-left:auto;
  background:#e05c4a;
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  min-width:18px;
  height:18px;
  border-radius:9px;
  padding:0 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.sidebar.collapsed .menu-badge{
  position:absolute;top:6px;right:6px;min-width:15px;height:15px;font-size:.6rem;
}

/* ---------- rigla de icoane (praguri 1024/640, ca la SyncX) ----------
   Aici rigla e pe PAGINI, nu pe sectiuni ca la SyncX: meniul e plat, cu
   4 etichete si 15 pagini, deci o rigla de sectiuni ar ascunde tot dupa
   hover — iar pe touch nu exista hover. */
@media (max-width:1024px){
  .main-content{margin-left:72px}
  .sidebar{width:72px;padding:12px 0;transform:none;overflow-x:hidden}
  .sidebar .logo-container{padding:0 4px}
  .sidebar .logo .logo-full,.sidebar .logo-sub{display:none}
  .sidebar .logo .logo-compact{display:block;text-align:center;font-size:1.3rem;font-weight:700;line-height:1;padding:6px 0 12px;color:#fff}
  .sidebar .logo .logo-compact .logo-x{color:var(--amber);font-weight:700}
  .menu-label{display:none}
  .menu-items,.menu-label.collapsed + .menu-items{max-height:none!important;overflow:visible}
  .menu-item{flex-direction:column;gap:3px;padding:8px 2px;margin:2px 0;border-left:0;border-radius:8px;position:relative;text-align:center;white-space:normal}
  .menu-item:hover,.menu-item.active{border-left-color:transparent}
  .menu-item.active{background:rgba(255,255,255,.18)}
  .menu-item .text{font-size:9px;letter-spacing:0;line-height:1.15;max-width:68px}
  .menu-item .text .lung{display:none}
  .menu-item .text .scurt{display:inline}
  .menu-badge{position:absolute;top:4px;right:9px;margin-left:0;min-width:15px;height:15px;font-size:.6rem;padding:0 4px}
}
@media (max-width:640px){
  .main-content{margin-left:48px}
  .sidebar{width:48px;padding:8px 0}
  .sidebar .logo .logo-compact{font-size:1rem;padding:4px 0 10px}
  .menu-item{padding:10px 2px}
  .menu-item .text{display:none}
  .menu-badge{top:3px;right:5px;min-width:8px;width:8px;height:8px;padding:0;font-size:0;overflow:hidden}
}