/* ============================================================
   TECHFIELD CRM — style.css  v1.0.2
   ============================================================ */
:root {
  --blue:#1a56db; --blue-dark:#1040b0; --blue-light:#e8f0fe;
  --white:#fff;
  --gray-50:#f7f8fa; --gray-100:#f1f3f6; --gray-200:#e4e7ed;
  --gray-300:#cbd0da; --gray-400:#9aa3b2; --gray-500:#64748b;
  --gray-700:#334155; --gray-900:#0f172a;
  --green:#16a34a; --green-light:#dcfce7;
  --yellow:#ca8a04; --yellow-light:#fef9c3;
  --red:#dc2626;   --red-light:#fee2e2;
  --orange:#ea580c;--orange-light:#fff0e6;
  --purple:#7c3aed;--purple-light:#ede9fe;
  --sidebar-bg:#ededed; --sidebar-w:110px;
  --topbar-h:56px;
  --shadow:0 1px 3px rgba(0,0,0,.10);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 10px 30px rgba(0,0,0,.12);
  --radius:8px; --radius-lg:14px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--gray-50);color:var(--gray-900);font-size:14px;line-height:1.5;}
a{color:var(--blue);text-decoration:none;}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px;}

/* ══════════════════════════════════════
   LOGIN
══════════════════════════════════════ */
#login-screen{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  background:url('https://www.techfield.ro/wp-content/uploads/2020/11/head.jpg') center/cover no-repeat;
  position:relative;
}
#login-screen::before{
  content:'';position:absolute;inset:0;
  background:rgba(10,20,50,.55);backdrop-filter:blur(2px);
}
.login-card{
  position:relative;z-index:1;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:44px 40px 36px;
  width:420px;max-width:95vw;
}
.login-logo{text-align:center;margin-bottom:28px;}
.login-logo img{height:52px;object-fit:contain;}
.login-logo h1{color:var(--blue);font-size:22px;font-weight:700;margin-top:10px;}
.login-logo p{color:var(--gray-500);font-size:12px;margin-top:3px;}
.forgot-link{display:block;text-align:right;font-size:12px;color:var(--blue);margin-top:4px;cursor:pointer;}
.forgot-link:hover{text-decoration:underline;}

/* ══════════════════════════════════════
   FORMS — shared
══════════════════════════════════════ */
.form-group{margin-bottom:15px;}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--gray-700);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:9px 12px;
  border:1.5px solid var(--gray-200);border-radius:var(--radius);
  font-size:13.5px;font-family:inherit;background:#fff;
  transition:border-color .18s,box-shadow .18s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,86,219,.10);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.form-group textarea{min-height:80px;resize:vertical;}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border:none;border-radius:var(--radius);
  font-size:13.5px;font-weight:500;cursor:pointer;
  transition:all .15s;font-family:inherit;white-space:nowrap;
}
.btn svg{flex-shrink:0;}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-dark);}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;}
.btn-secondary{background:var(--gray-100);color:var(--gray-700);border:1px solid var(--gray-200);}
.btn-secondary:hover{background:var(--gray-200);}
.btn-danger{background:var(--red-light);color:var(--red);}
.btn-danger:hover{background:#fca5a5;}
.btn-success{background:var(--green-light);color:var(--green);}
.btn-success:hover{background:#bbf7d0;}
.btn-orange{background:var(--orange-light);color:var(--orange);}
.btn-orange:hover{background:#fed7aa;}
.btn-purple{background:var(--purple-light);color:var(--purple);}
.btn-sm{padding:5px 11px;font-size:12.5px;}
.btn-icon{padding:6px;border-radius:6px;}
.btn-full{width:100%;justify-content:center;padding:12px;}
.err{color:var(--red);font-size:12.5px;margin-top:6px;text-align:center;}
.success-msg{color:var(--green);font-size:12.5px;margin-top:6px;text-align:center;}

/* ══════════════════════════════════════
   APP SHELL
══════════════════════════════════════ */
#app{display:none;height:100vh;overflow:hidden;}
.layout{display:flex;height:100vh;}

/* ══════════════════════════════════════
   SIDEBAR  (C4-Logistics style)
══════════════════════════════════════ */
.sidebar{
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  display:flex;flex-direction:column;
  flex-shrink:0;
  border-right:1px solid var(--gray-200);
  overflow-y:auto;overflow-x:hidden;
  z-index:100;
}
.sb-logo{
  background:#0f172a;
  padding:14px 8px 12px;
  display:flex;flex-direction:column;align-items:center;
  flex-shrink:0;min-height:80px;justify-content:center;
}
.sb-logo img{width:68px;height:auto;object-fit:contain;}
.sb-logo span{color:rgba(255,255,255,.5);font-size:9px;letter-spacing:.8px;margin-top:4px;text-transform:uppercase;}
.sb-nav{display:flex;flex-direction:column;padding:10px 0;flex:1;}
.nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:11px 4px 9px;cursor:pointer;
  transition:all .15s;user-select:none;position:relative;
  border-radius:0;gap:5px;margin:1px 6px;border-radius:8px;
}
.nav-item svg{color:var(--gray-500);transition:color .15s;width:26px;height:26px;flex-shrink:0;}
.nav-item span{
  font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;color:var(--gray-500);transition:color .15s;
  text-align:center;line-height:1.2;
}
.nav-item:hover{background:#fff;}
.nav-item:hover svg,.nav-item:hover span{color:var(--blue);}
.nav-item.active{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.10);}
.nav-item.active svg,.nav-item.active span{color:var(--blue);}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:3px;background:var(--blue);border-radius:0 2px 2px 0;
}
.nav-divider{height:1px;background:var(--gray-200);margin:8px 12px;}
.sb-bottom{padding:8px 6px 12px;}

/* ══════════════════════════════════════
   TOPBAR
══════════════════════════════════════ */
.main-area{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.topbar{
  height:var(--topbar-h);background:#fff;
  border-bottom:1px solid var(--gray-200);
  display:flex;align-items:center;
  padding:0 24px;gap:12px;flex-shrink:0;
  position:relative;z-index:50;
}
.topbar-title{flex:1;}
.topbar-title h2{font-size:16px;font-weight:600;color:var(--gray-900);}
.topbar-title p{font-size:12px;color:var(--gray-500);}
.topbar-right{display:flex;align-items:center;gap:10px;}

/* Notifications Bell */
.notif-btn{
  position:relative;background:none;border:none;cursor:pointer;
  padding:8px;border-radius:8px;color:var(--gray-500);
  transition:background .15s;overflow:visible;
}
.notif-btn:hover{background:var(--gray-100);}
.notif-badge{
  position:absolute;top:-5px;right:-5px;
  background:var(--red);color:#fff;
  font-size:10px;font-weight:700;min-width:18px;height:18px;
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  padding:0 4px;line-height:1;
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(220,38,38,.4);
  pointer-events:none;
}

/* User dropdown */
.user-menu{position:relative;}
.user-avatar-btn{
  display:flex;align-items:center;gap:8px;
  background:none;border:none;cursor:pointer;
  padding:5px 8px;border-radius:8px;
  transition:background .15s;
}
.user-avatar-btn:hover{background:var(--gray-100);}
.avatar-circle{
  width:34px;height:34px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex-shrink:0;
}
.user-avatar-btn span{font-size:13px;font-weight:500;color:var(--gray-700);}
.user-avatar-btn svg{color:var(--gray-400);}
.user-dropdown{
  position:absolute;top:calc(100% + 6px);right:0;
  background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);border:1px solid var(--gray-200);
  min-width:200px;z-index:200;display:none;overflow:hidden;
}
.user-dropdown.open{display:block;}
.user-dropdown .dd-header{
  padding:12px 16px;border-bottom:1px solid var(--gray-100);
}
.user-dropdown .dd-header p{font-size:13px;font-weight:600;color:var(--gray-900);}
.user-dropdown .dd-header small{font-size:11px;color:var(--gray-500);}
.user-dropdown .dd-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;cursor:pointer;font-size:13px;
  color:var(--gray-700);transition:background .12s;
}
.user-dropdown .dd-item:hover{background:var(--gray-50);}
.user-dropdown .dd-item svg{color:var(--gray-400);width:16px;height:16px;}
.user-dropdown .dd-item.danger{color:var(--red);}
.user-dropdown .dd-item.danger svg{color:var(--red);}
.dd-sep{height:1px;background:var(--gray-100);margin:4px 0;}

/* ══════════════════════════════════════
   NOTIFICATIONS DROPDOWN
══════════════════════════════════════ */
.notif-dropdown{
  position:absolute;top:calc(var(--topbar-h) + 4px);right:60px;
  width:340px;background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);border:1px solid var(--gray-200);
  z-index:200;display:none;overflow:hidden;
}
.notif-dropdown.open{display:block;}
.notif-drop-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--gray-100);
}
.notif-drop-hdr h4{font-size:14px;font-weight:600;}
.notif-list{max-height:340px;overflow-y:auto;}
.notif-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 16px;border-bottom:1px solid var(--gray-50);
  cursor:pointer;transition:background .12s;
}
.notif-item:hover{background:var(--gray-50);}
.notif-item.unread{background:var(--blue-light);}
.notif-item.unread:hover{background:#dbeafe;}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:5px;}
.notif-item-body p{font-size:13px;color:var(--gray-700);}
.notif-item-body small{font-size:11px;color:var(--gray-400);}
.notif-empty{text-align:center;padding:28px;color:var(--gray-400);font-size:13px;}

/* ══════════════════════════════════════
   CONTENT AREA
══════════════════════════════════════ */
.content{flex:1;overflow-y:auto;padding:24px;}
.page{display:none;}
.page.active{display:block;}

/* ══════════════════════════════════════
   CARDS & KPI
══════════════════════════════════════ */
.card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--gray-100);padding:20px;}
.card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.card-hdr h3{font-size:15px;font-weight:600;color:var(--gray-900);}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px;}
.kpi-card{
  background:#fff;border-radius:var(--radius-lg);
  padding:20px 18px;border:1px solid var(--gray-100);
  box-shadow:var(--shadow);
  display:flex;align-items:flex-start;gap:14px;
  transition:box-shadow .18s, transform .18s;
}
.kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.kpi-icon{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.kpi-icon.blue{background:var(--blue-light);}  .kpi-icon.blue svg{color:var(--blue);}
.kpi-icon.green{background:var(--green-light);} .kpi-icon.green svg{color:var(--green);}
.kpi-icon.orange{background:var(--orange-light);}  .kpi-icon.orange svg{color:var(--orange);}
.kpi-icon.red{background:var(--red-light);}    .kpi-icon.red svg{color:var(--red);}
.kpi-icon.purple{background:var(--purple-light);} .kpi-icon.purple svg{color:var(--purple);}
.kpi-info{}
.kpi-val{font-size:22px;font-weight:700;color:var(--gray-900);line-height:1.2;}
.kpi-label{font-size:12px;color:var(--gray-500);margin-top:2px;}
.kpi-sub{font-size:11px;color:var(--gray-400);margin-top:4px;}

/* ══════════════════════════════════════
   TABLES
══════════════════════════════════════ */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--gray-100);}
table{width:100%;border-collapse:collapse;background:#fff;}
thead th{
  background:var(--gray-50);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;color:var(--gray-500);
  padding:10px 14px;text-align:left;border-bottom:1px solid var(--gray-200);
  white-space:nowrap;
}
tbody td{padding:11px 14px;border-bottom:1px solid var(--gray-100);font-size:13px;color:var(--gray-700);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--gray-50);}

/* ── BADGES / STATUS ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600;
}
.badge-green{background:var(--green-light);color:var(--green);}
.badge-red{background:var(--red-light);color:var(--red);}
.badge-yellow{background:var(--yellow-light);color:var(--yellow);}
.badge-blue{background:var(--blue-light);color:var(--blue);}
.badge-gray{background:var(--gray-100);color:var(--gray-500);}
.badge-orange{background:var(--orange-light);color:var(--orange);}
.badge-purple{background:var(--purple-light);color:var(--purple);}
.badge-paid{background:#dcfce7;color:#15803d;}
.badge-unpaid{background:#fef2f2;color:#b91c1c;}
.badge-partial{background:#fff7ed;color:#c2410c;}
.badge-nefactured{background:#f1f5f9;color:#64748b;}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;gap:6px;margin-top:16px;justify-content:flex-end;flex-wrap:wrap;}
.page-btn{
  min-width:34px;height:34px;padding:0 8px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gray-200);background:#fff;border-radius:var(--radius);
  font-size:13px;cursor:pointer;color:var(--gray-700);transition:all .12s;
}
.page-btn:hover{background:var(--blue-light);border-color:var(--blue);color:var(--blue);}
.page-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.page-btn:disabled{opacity:.4;cursor:not-allowed;}
.page-info{font-size:12px;color:var(--gray-500);margin-right:4px;}

/* ── FILTERS BAR ── */
.filters-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:16px;background:#fff;
  padding:12px 16px;border-radius:var(--radius-lg);
  border:1px solid var(--gray-100);box-shadow:var(--shadow);
}
.filters-bar input,.filters-bar select{
  padding:7px 10px;border:1.5px solid var(--gray-200);
  border-radius:var(--radius);font-size:13px;font-family:inherit;background:#fff;
}
.filters-bar input:focus,.filters-bar select:focus{
  outline:none;border-color:var(--blue);
}
.filters-bar label{font-size:12px;font-weight:600;color:var(--gray-500);text-transform:uppercase;}
.filter-group{display:flex;align-items:center;gap:6px;}
.filters-spacer{flex:1;}

/* ══════════════════════════════════════
   MODALS
══════════════════════════════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.45);z-index:1000;
  align-items:center;justify-content:center;
  padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);width:600px;max-width:100%;
  max-height:90vh;display:flex;flex-direction:column;
  animation:modalIn .18s ease;
}
.modal-lg{width:800px;}
.modal-xl{width:980px;}
.modal-sm{width:420px;}
@keyframes modalIn{from{opacity:0;transform:scale(.95)translateY(-10px);}to{opacity:1;transform:none;}}
.modal-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 14px;border-bottom:1px solid var(--gray-100);flex-shrink:0;
}
.modal-hdr h3{font-size:16px;font-weight:600;}
.modal-close{
  background:none;border:none;cursor:pointer;
  color:var(--gray-400);padding:4px;border-radius:6px;
  transition:all .12s;font-size:18px;line-height:1;
}
.modal-close:hover{background:var(--gray-100);color:var(--gray-700);}
.modal-body{padding:22px;overflow-y:auto;flex:1;}
.modal-footer{
  display:flex;gap:10px;justify-content:flex-end;
  padding:14px 22px;border-top:1px solid var(--gray-100);flex-shrink:0;
}

/* ── TABS (inside modals / profile) ── */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--gray-200);margin-bottom:20px;}
.tab-btn{
  padding:8px 16px;background:none;border:none;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--gray-500);
  border-bottom:2px solid transparent;margin-bottom:-2px;
  transition:all .15s;font-family:inherit;
}
.tab-btn:hover{color:var(--gray-700);}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);}
.tab-pane{display:none;}
.tab-pane.active{display:block;}

/* ══════════════════════════════════════
   FLEET — PROFESSIONAL
══════════════════════════════════════ */
/* KPI bar */
.fleet-kpi-card{
  background:#fff;border-radius:var(--radius-lg);
  border:1px solid var(--gray-100);box-shadow:var(--shadow);
  padding:16px 20px;
}
.fleet-kpi-card .fk-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--gray-500);letter-spacing:.5px;}
.fleet-kpi-card .fk-val{font-size:26px;font-weight:800;margin-top:2px;}
.fleet-kpi-card .fk-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}

/* Fleet list */
.fleet-list{display:flex;flex-direction:column;gap:10px;}

/* Fleet card */
.fc{
  background:#fff;border-radius:var(--radius-lg);
  border:1px solid var(--gray-200);
  border-left:5px solid var(--gray-300);
  box-shadow:var(--shadow);overflow:hidden;
  transition:box-shadow .18s;
}
.fc:hover{box-shadow:var(--shadow-md);}
.fc.fc-ok   {border-left-color:var(--green);}
.fc.fc-warn {border-left-color:var(--orange);}
.fc.fc-danger{border-left-color:var(--red);}

/* Card head */
.fc-head{display:flex;align-items:center;gap:14px;padding:14px 18px;}
.fc-icon{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.fc.fc-ok    .fc-icon{background:var(--green-light);color:var(--green);}
.fc.fc-warn  .fc-icon{background:var(--orange-light);color:var(--orange);}
.fc.fc-danger .fc-icon{background:var(--red-light);color:var(--red);}
.fc.fc-neutral .fc-icon{background:var(--gray-100);color:var(--gray-500);}
.fc-icon svg{width:22px;height:22px;}
.fc-info{flex:1;min-width:0;}
.fc-plate{font-size:17px;font-weight:800;color:var(--gray-900);letter-spacing:.5px;}
.fc-model{font-size:12px;color:var(--gray-500);margin-top:1px;}
.fc-badges{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.fc-company-badge{
  background:var(--blue-light);color:var(--blue);
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.fc-act{display:flex;gap:6px;flex-shrink:0;}

/* Doc pills */
.fc-docs{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 12px;}
.fc-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:600;border:1px solid;
}
.fc-pill.pill-ok    {background:var(--green-light);color:var(--green);border-color:#bbf7d0;}
.fc-pill.pill-warn  {background:var(--orange-light);color:var(--orange);border-color:#fed7aa;}
.fc-pill.pill-danger{background:var(--red-light);color:var(--red);border-color:#fca5a5;}
.fc-pill.pill-none  {background:var(--gray-100);color:var(--gray-400);border-color:var(--gray-200);}

/* Tab bar */
.fc-tabs{display:flex;border-top:1px solid var(--gray-100);background:var(--gray-50);}
.fc-tab{
  flex:1;padding:9px 4px;font-size:12.5px;font-weight:600;color:var(--gray-500);
  border:none;background:none;cursor:pointer;
  border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-family:inherit;transition:color .12s,background .12s;
}
.fc-tab:hover{color:var(--gray-700);background:var(--gray-100);}
.fc-tab.active{color:var(--blue);border-bottom-color:var(--blue);background:#fff;}

/* Tab body */
.fc-body{border-top:1px solid var(--gray-100);padding:16px 18px;background:#fafafa;display:none;}
.fc-body.open{display:block;animation:fadeSlideIn .18s ease;}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* ══════════════════════════════════════
   FINANCIAR
══════════════════════════════════════ */
.fin-summary{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;margin-bottom:20px;
}
.fin-box{
  background:#fff;border-radius:var(--radius-lg);
  padding:16px 18px;border:1px solid var(--gray-100);box-shadow:var(--shadow);
}
.fin-box label{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--gray-500);}
.fin-box .val{font-size:20px;font-weight:700;margin-top:4px;}
.fin-box .val.green{color:var(--green);}
.fin-box .val.red{color:var(--red);}
.fin-box .val.blue{color:var(--blue);}
.margin-bar-wrap{margin-top:18px;}
.margin-bar-wrap label{font-size:12px;color:var(--gray-500);display:flex;justify-content:space-between;margin-bottom:6px;}
.margin-bar{height:10px;background:var(--gray-200);border-radius:5px;overflow:hidden;}
.margin-bar-fill{height:100%;border-radius:5px;transition:width .6s ease;}

/* ══════════════════════════════════════
   MODUL DOCUMENTE
══════════════════════════════════════ */
#page-documents.active { display: flex !important; }
.doc-page-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 10px;background:#fff;border-bottom:1px solid #f1f5f9;flex-shrink:0;}
.doc-stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 20px;background:#fff;border-bottom:1px solid #f1f5f9;flex-shrink:0;}
.doc-body-area{display:flex;flex:1;overflow:hidden;}

/* Lista panel */
.doc-list-panel{width:360px;flex-shrink:0;background:#fff;border-right:1px solid #f1f5f9;display:flex;flex-direction:column;overflow:hidden;}
.dlp-top{padding:14px 16px 10px;border-bottom:1px solid #f1f5f9;flex-shrink:0;}
.doc-search-row{display:flex;align-items:center;gap:6px;background:#f8fafc;border:1px solid #f1f5f9;border-radius:9px;padding:7px 11px;margin-bottom:10px;}
.doc-search-row input{border:none;background:transparent;font-size:12px;color:#0f172a;outline:none;width:100%;}
.doc-search-row input::placeholder{color:#94a3b8;}
.doc-type-tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px;}
.doc-type-tab{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:7px;border:1px solid #e2e8f0;background:#fff;font-size:11px;font-weight:500;color:#64748b;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.doc-type-tab.on{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8;}
.doc-type-tab .cnt{font-size:10px;font-weight:700;padding:1px 5px;border-radius:8px;background:#e2e8f0;color:#475569;}
.doc-type-tab.on .cnt{background:#bfdbfe;color:#1e40af;}
.doc-groups{flex:1;overflow-y:auto;}
.doc-group-label{font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:0.8px;padding:10px 16px 5px;}
.doc-row{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;border-bottom:1px solid #f8fafc;transition:background .1s;}
.doc-row:hover{background:#fafbfc;}
.doc-row.selected{background:#eff6ff;border-left:3px solid #2563eb;padding-left:13px;}
.doc-file-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;font-weight:800;letter-spacing:0.3px;}
.fi-pdf{background:#fef2f2;color:#dc2626;}
.fi-doc{background:#eff6ff;color:#2563eb;}
.fi-xls{background:#f0fdf4;color:#16a34a;}
.fi-img{background:#fdf4ff;color:#9333ea;}
.doc-info{flex:1;min-width:0;}
.doc-name{font-size:12px;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.doc-meta{display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap;}
.doc-tag{font-size:10px;color:#64748b;}
.doc-status{font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;}
.ds-ok{background:#f0fdf4;color:#16a34a;}
.ds-pending{background:#fff7ed;color:#ea580c;}
.ds-expired{background:#fef2f2;color:#dc2626;}
.ds-missing{background:#fef2f2;color:#dc2626;}
.doc-date{font-size:10px;color:#94a3b8;flex-shrink:0;white-space:nowrap;}
.doc-more{width:24px;height:24px;border-radius:6px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.doc-more:hover{background:#f1f5f9;}

/* Storage bar */
.doc-storage-bar-wrap{padding:10px 16px;border-top:1px solid #f1f5f9;display:flex;align-items:center;gap:8px;flex-shrink:0;}
.doc-storage-track{flex:1;height:4px;background:#f1f5f9;border-radius:4px;overflow:hidden;}
.doc-storage-fill{height:100%;background:#2563eb;border-radius:4px;transition:width .3s;}
.doc-storage-fill.warn{background:#ea580c;}
.doc-storage-fill.danger{background:#dc2626;}

/* Preview panel */
.doc-preview-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#f8fafc;}
.pp-header{background:#fff;border-bottom:1px solid #f1f5f9;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:12px;}
.pp-file-info{display:flex;align-items:center;gap:10px;min-width:0;}
.pp-file-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;}
.pp-name{font-size:14px;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;}
.pp-meta{font-size:11px;color:#94a3b8;margin-top:2px;}
.pp-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.pp-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;font-size:11px;font-weight:500;color:#475569;cursor:pointer;text-decoration:none;white-space:nowrap;}
.pp-btn:hover{background:#f8fafc;}
.pp-btn-danger{background:#fef2f2;border-color:#fecaca;color:#dc2626;}
.pp-btn-danger:hover{background:#fee2e2;}
.pp-body{flex:1;display:grid;grid-template-columns:1fr 260px;overflow:hidden;}
.pp-preview{background:#f4f6f9;display:flex;align-items:stretch;justify-content:stretch;overflow:hidden;}
.doc-preview-embed{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;width:100%;}
.doc-preview-embed iframe{border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.08);}

/* Preview sidebar */
.pp-sidebar{background:#fff;border-left:1px solid #f1f5f9;padding:16px;overflow-y:auto;}
.ps-section{margin-bottom:20px;}
.ps-section-title{font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:10px;}
.ps-field{margin-bottom:10px;}
.ps-label{font-size:11px;color:#94a3b8;font-weight:500;margin-bottom:2px;}
.ps-val{font-size:12px;font-weight:600;color:#0f172a;}
.ps-val-green{color:#16a34a;}
.ps-val-red{color:#dc2626;}
.ps-val-orange{color:#ea580c;}
.ps-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.exp-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:7px;background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;}
.exp-badge-warn{background:#fff7ed;color:#ea580c;border-color:#fed7aa;}

/* KPI cards în documents */
.doc-stat-cards .sc{background:#f8fafc;border-radius:10px;padding:11px 14px;border:1px solid #f1f5f9;}
.doc-stat-cards .sc-num{font-size:20px;font-weight:800;color:#0f172a;letter-spacing:-0.5px;}
.doc-stat-cards .sc-lbl{font-size:10px;color:#94a3b8;margin-top:2px;}
.doc-stat-cards .sc-delta{font-size:10px;font-weight:600;margin-top:2px;}

/* Share items */
.share-item{background:#f8fafc;border:1px solid #f1f5f9;border-radius:8px;padding:12px;margin-bottom:8px;}
.share-item-header{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:#0f172a;margin-bottom:4px;}
.share-item-meta{font-size:11px;color:#64748b;margin-bottom:6px;}
.share-item-url{font-size:10px;font-family:monospace;color:#2563eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#eff6ff;padding:4px 8px;border-radius:5px;margin-bottom:8px;}
.share-item-actions{display:flex;gap:6px;flex-wrap:wrap;}

/* ══════════════════════════════════════
   TICKETS
══════════════════════════════════════ */
.ticket-card{
  background:#fff;border-radius:var(--radius-lg);
  border:1px solid var(--gray-100);box-shadow:var(--shadow);
  padding:16px 18px;margin-bottom:12px;cursor:pointer;
  transition:box-shadow .15s;
}
.ticket-card:hover{box-shadow:var(--shadow-md);}
.ticket-hdr{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.ticket-hdr h4{font-size:14px;font-weight:600;flex:1;}
.ticket-meta{font-size:11.5px;color:var(--gray-400);}
.ticket-preview{font-size:12.5px;color:var(--gray-500);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ticket detail replies */
.reply-bubble{
  padding:10px 14px;border-radius:10px;margin-bottom:8px;
  max-width:80%;
}
.reply-bubble.from-me{background:var(--blue);color:#fff;margin-left:auto;border-bottom-right-radius:3px;}
.reply-bubble.from-them{background:var(--gray-100);color:var(--gray-900);border-bottom-left-radius:3px;}
.reply-bubble small{display:block;font-size:10.5px;opacity:.7;margin-top:4px;}

/* ══════════════════════════════════════
   PROFILE MODAL
══════════════════════════════════════ */
.profile-header{
  display:flex;align-items:center;gap:16px;
  padding:18px;background:linear-gradient(135deg,#0f172a,#1a56db);
  border-radius:var(--radius-lg);margin-bottom:20px;
}
.profile-avatar{
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.2);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;flex-shrink:0;
}
.profile-header h3{color:#fff;font-size:16px;font-weight:600;}
.profile-header p{color:rgba(255,255,255,.65);font-size:12px;}

/* notes */
.note-item{
  background:var(--yellow-light);border-left:3px solid var(--yellow);
  padding:10px 12px;border-radius:0 8px 8px 0;margin-bottom:8px;
}
.note-item p{font-size:13px;color:var(--gray-700);}
.note-item small{font-size:11px;color:var(--gray-500);}
.note-item-hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}

/* ══════════════════════════════════════
   UPLOAD ZONE
══════════════════════════════════════ */
.upload-zone{
  border:2px dashed var(--gray-300);border-radius:var(--radius-lg);
  padding:32px 20px;text-align:center;cursor:pointer;
  transition:all .18s;background:var(--gray-50);
}
.upload-zone:hover,.upload-zone.drag-over{
  border-color:var(--blue);background:var(--blue-light);
}
.upload-zone svg{color:var(--gray-400);margin-bottom:10px;}
.upload-zone p{font-size:13px;color:var(--gray-500);}
.upload-zone small{font-size:11.5px;color:var(--gray-400);}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.app-footer{
  padding:8px 24px;font-size:11px;color:var(--gray-400);
  border-top:1px solid var(--gray-100);background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
}

/* ══════════════════════════════════════
   MISC UTILITIES
══════════════════════════════════════ */
.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.section-hdr h2{font-size:18px;font-weight:700;color:var(--gray-900);}
.section-hdr p{font-size:12.5px;color:var(--gray-500);margin-top:2px;}
.actions-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-20{margin-top:20px;}
.mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;}
.w-full{width:100%;}
.flex{display:flex;} .items-center{align-items:center;} .gap-8{gap:8px;} .gap-12{gap:12px;}
.empty-state{text-align:center;padding:48px 20px;color:var(--gray-400);}
.empty-state svg{width:48px;height:48px;margin-bottom:12px;opacity:.4;}
.empty-state p{font-size:14px;}
.spinner{
  width:24px;height:24px;border:3px solid var(--gray-200);
  border-top-color:var(--blue);border-radius:50%;
  animation:spin .7s linear infinite;margin:20px auto;
}
@keyframes spin{to{transform:rotate(360deg);}}
.toast{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  background:#1e293b;color:#fff;padding:12px 18px;
  border-radius:var(--radius-lg);font-size:13px;
  box-shadow:var(--shadow-lg);max-width:320px;
  animation:toastIn .25s ease;display:none;
}
.toast.show{display:flex;align-items:center;gap:8px;}
.toast.success{background:var(--green);}
.toast.error{background:var(--red);}
@keyframes toastIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* Responsive tweak */
@media(max-width:768px){
  .sidebar{width:70px;}
  .nav-item span{display:none;}
  .sb-logo img{width:44px;}
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .form-row,.form-row-3{grid-template-columns:1fr;}
  .content{padding:14px;}
  .modal-lg,.modal-xl{width:100%;}
}

/* ══════════════════════════════════════
   NEW DASHBOARD DESIGN — v4.1.0
   All new classes from reference design
══════════════════════════════════════ */

/* ── New Sidebar (dark) ── */
.sidebar-new {
  width:220px;flex-shrink:0;background:#0f1623;
  display:flex;flex-direction:column;padding:0;
  overflow-y:auto;overflow-x:hidden;z-index:100;
}
.sb-logo-new {
  padding:20px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
}
.sb-logo-mark {display:flex;align-items:center;gap:10px;}
.sb-logo-icon {
  width:32px;height:32px;background:#2563eb;border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sb-logo-text {font-size:13px;font-weight:700;color:#fff;letter-spacing:-0.2px;}
.sb-logo-sub  {font-size:9px;color:#4b5675;margin-top:1px;text-transform:uppercase;letter-spacing:0.8px;font-weight:500;}

.sb-section {padding:16px 10px 6px;}
.sb-section-label {
  font-size:9px;font-weight:600;color:#4b5675;
  text-transform:uppercase;letter-spacing:1px;
  padding:0 8px;margin-bottom:6px;
}
.sb-item {
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;cursor:pointer;
  margin-bottom:2px;transition:background 0.15s;
  text-decoration:none;
}
.sb-item:hover {background:rgba(255,255,255,0.05);}
.sb-item.active {background:#1e3a6e;}
.sb-item-icon {width:18px;height:18px;flex-shrink:0;opacity:0.5;}
.sb-item.active .sb-item-icon {opacity:1;}
.sb-item-label {font-size:12px;color:#94a3b8;font-weight:500;}
.sb-item.active .sb-item-label {color:#fff;}
.sb-badge {
  margin-left:auto;font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:20px;background:#dc2626;color:#fff;
}
.sb-badge-blue {background:#2563eb;color:#fff;}

.sb-bottom-new {
  margin-top:auto;padding:12px 10px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.sb-user {
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:8px;cursor:pointer;
}
.sb-user:hover {background:rgba(255,255,255,0.05);}
.sb-avatar {
  width:28px;height:28px;border-radius:50%;background:#2563eb;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;
}
.sb-user-info {flex:1;min-width:0;}
.sb-user-name {font-size:11px;font-weight:600;color:#e2e8f0;}
.sb-user-role {font-size:10px;color:#4b5675;margin-top:1px;}

/* ── Topbar new elements ── */
.tb-btn {
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:8px;
  border:1px solid #e2e8f0;background:#fff;
  font-size:12px;font-weight:500;color:#475569;cursor:pointer;
  transition:background 0.15s;
}
.tb-btn:hover {background:#f8fafc;}
.tb-btn-primary {background:#2563eb;border-color:#2563eb;color:#fff;}
.tb-btn-primary:hover {background:#1d4ed8;}
.tb-date {
  font-size:12px;color:#94a3b8;
  padding:4px 10px;background:#f8fafc;
  border-radius:6px;border:1px solid #f1f5f9;
}
.tb-notif {
  position:relative;width:34px;height:34px;border-radius:8px;
  border:1px solid #e2e8f0;background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.tb-notif-dot {
  position:absolute;top:7px;right:7px;
  width:7px;height:7px;border-radius:50%;
  background:#dc2626;border:1.5px solid #fff;
}

/* ── Alert bar ── */
.alert-bar {
  background:#fff7ed;border:1px solid #fed7aa;
  border-radius:10px;padding:11px 16px;
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.alert-bar-text {font-size:12px;color:#9a3412;font-weight:500;flex:1;}
.alert-bar-action {
  font-size:11px;color:#ea580c;font-weight:600;
  cursor:pointer;white-space:nowrap;
}

/* ── KPI row (new design) ── */
.kpi-row {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;margin-bottom:18px;
}
.kpi {
  background:#fff;border-radius:12px;
  padding:16px;border:1px solid #f1f5f9;
}
.kpi-head {
  display:flex;align-items:center;
  justify-content:space-between;margin-bottom:14px;
}
.kpi-ico {
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.kpi-delta {
  font-size:11px;font-weight:600;
  display:flex;align-items:center;gap:2px;
}
.delta-up   {color:#16a34a;}
.delta-down {color:#dc2626;}
.kpi-num {
  font-size:24px;font-weight:800;color:#0f172a;
  letter-spacing:-1px;line-height:1;
}
.kpi-lbl {font-size:11px;color:#94a3b8;margin-top:4px;font-weight:400;}

/* ── Grid layout ── */
.grid-main {
  display:grid;
  grid-template-columns:1fr 340px;
  gap:16px;margin-bottom:16px;
}
.bottom-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

/* ── Card (new design — extends existing .card) ── */
.card-title {font-size:13px;font-weight:700;color:#0f172a;}
.card-sub   {font-size:11px;color:#94a3b8;margin-top:1px;}
.link-btn {
  font-size:11px;color:#2563eb;font-weight:600;
  background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:3px;
  transition:opacity 0.15s;
}
.link-btn:hover {opacity:0.75;}

/* ── Status table ── */
.status-table {width:100%;border-collapse:collapse;}
.status-table thead th {
  font-size:10px;font-weight:600;color:#94a3b8;
  text-transform:uppercase;letter-spacing:0.5px;
  padding:0 12px 8px;text-align:left;
  border-bottom:1px solid #f1f5f9;
}
.status-table tbody tr {
  border-bottom:1px solid #f8fafc;cursor:pointer;
}
.status-table tbody tr:last-child {border-bottom:none;}
.status-table tbody td {
  padding:10px 12px;font-size:12px;
  color:#0f172a;vertical-align:middle;
}
.status-table tbody tr:hover {background:#fafbfc;}
.load-id    {font-weight:700;color:#2563eb;font-family:monospace;font-size:11px;}
.client-name{font-weight:600;color:#0f172a;}
.route-mini {
  font-size:11px;color:#64748b;
  display:flex;align-items:center;gap:4px;
}
.status-pill {
  font-size:10px;font-weight:600;
  padding:3px 9px;border-radius:20px;white-space:nowrap;
}
.sp-transit   {background:#eff6ff;color:#1d4ed8;}
.sp-delivered {background:#f0fdf4;color:#15803d;}
.sp-pending   {background:#f8fafc;color:#475569;}
.sp-late      {background:#fef2f2;color:#b91c1c;}
.sp-planned   {background:#f1f5f9;color:#64748b;}

/* ── Exceptions / Tasks list ── */
.exc-list {display:flex;flex-direction:column;gap:8px;}
.exc-item {
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:9px;border:1px solid;
}
.exc-crit {background:#fef2f2;border-color:#fecaca;}
.exc-warn {background:#fff7ed;border-color:#fed7aa;}
.exc-info {background:#eff6ff;border-color:#bfdbfe;}
.exc-ico {
  width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;
}
.exc-ico-crit {background:#dc2626;}
.exc-ico-warn {background:#f59e0b;}
.exc-ico-info {background:#3b82f6;}
.exc-body  {flex:1;min-width:0;}
.exc-title {font-size:12px;font-weight:700;color:#0f172a;}
.exc-desc  {font-size:11px;color:#64748b;margin-top:2px;line-height:1.4;}
.exc-time  {font-size:10px;color:#94a3b8;margin-top:4px;}

/* ── Financial state row ── */
.fin-row  {display:flex;flex-direction:column;gap:10px;}
.fin-item {
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;background:#f8fafc;border-radius:9px;
}
.fin-label     {font-size:12px;color:#475569;font-weight:500;}
.fin-val       {font-size:13px;font-weight:700;color:#0f172a;}
.fin-val-red   {color:#dc2626;}
.fin-val-green {color:#16a34a;}

/* ── Fleet grid (dashboard mini fleet) ── */
.fleet-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fleet-card {
  background:#fff;border-radius:12px;
  padding:16px;border:1px solid #f1f5f9;
}
.fleet-hd   {display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.fleet-num  {font-size:10px;font-weight:700;color:#2563eb;font-family:monospace;letter-spacing:0.5px;}
.fleet-status {font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;}
.fs-active  {background:#f0fdf4;color:#15803d;}
.fs-idle    {background:#f8fafc;color:#64748b;}
.fleet-route   {font-size:11px;color:#475569;margin-bottom:10px;line-height:1.4;}
.fleet-metrics {display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
.fm     {background:#f8fafc;border-radius:6px;padding:6px 8px;}
.fm-val {font-size:12px;font-weight:700;color:#0f172a;}
.fm-lbl {font-size:9px;color:#94a3b8;margin-top:1px;}

/* ── Revenue chart wrap ── */
.chart-wrap {position:relative;width:100%;height:160px;}

/* ── Period selector buttons ── */
.period-btn {
  font-size:11px;font-weight:600;padding:4px 10px;
  border-radius:6px;border:1px solid #e2e8f0;
  background:#f8fafc;color:#64748b;cursor:pointer;
  transition:all 0.15s;
}
.period-btn:hover {background:#eff6ff;border-color:#bfdbfe;color:#2563eb;}
.period-btn.active {background:#2563eb;border-color:#2563eb;color:#fff;}

/* ── Dashboard action bar ── */
.dash-action-bar {
  display:flex;align-items:center;gap:8px;
  margin-bottom:18px;flex-wrap:wrap;
}
.dash-action-bar-left {flex:1;display:flex;align-items:center;gap:12px;}
.dash-action-bar-left .page-title-new {
  font-size:18px;font-weight:700;color:#0f172a;letter-spacing:-0.3px;
}
.dash-action-bar-date {
  font-size:12px;color:#94a3b8;
  padding:4px 10px;background:#f8fafc;
  border-radius:6px;border:1px solid #f1f5f9;
  display:flex;align-items:center;gap:5px;
}

/* ── Responsive for new dashboard ── */
@media(max-width:1100px) {
  .grid-main {grid-template-columns:1fr;}
  .bottom-row {grid-template-columns:1fr;}
  .kpi-row {grid-template-columns:repeat(3,1fr);}
}
@media(max-width:700px) {
  .kpi-row {grid-template-columns:1fr 1fr;}
  .sidebar-new {width:70px;}
  .sidebar-new .sb-item-label,
  .sidebar-new .sb-section-label,
  .sidebar-new .sb-logo-text,
  .sidebar-new .sb-logo-sub,
  .sidebar-new .sb-user-info {display:none;}
}

/* ── card-hd alias (new dashboard uses card-hd, old uses card-hdr) ── */
.card-hd {display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}

/* ── van-period-btn alias (used in dashboard period selectors) ── */
.van-period-btn {
  font-size:11px;font-weight:600;padding:4px 10px;
  border-radius:6px;border:1px solid #e2e8f0;
  background:#f8fafc;color:#64748b;cursor:pointer;
  transition:all 0.15s;
}
.van-period-btn:hover {background:#eff6ff;border-color:#bfdbfe;color:#2563eb;}
.van-period-btn.active {background:#2563eb;border-color:#2563eb;color:#fff;}