:root{ --bg:#f7f8fa; --card:#fff; --text:#222; --muted:#6b7280; --brand:#102E16; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--text); background:var(--bg); }
a{ color:var(--brand); text-decoration:none; }
.container{ max-width:1100px; margin:24px auto; padding:0 16px; }
.card{ background:var(--card); border:1px solid #e5e7eb; border-radius:12px; padding:16px; box-shadow: 0 4px 12px rgba(0,0,0,.04); }
h1,h2,h3{ margin:8px 0 12px; }
label{ font-size:14px; color:var(--muted); display:block; margin-bottom:6px; }
input, select, textarea{ width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; outline:none; }
input:focus, select:focus, textarea:focus{ border-color: var(--brand); }
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.col{ flex:1 1 280px; }
.btn{ background:var(--brand); color:white; padding:10px 14px; border:none; border-radius:10px; cursor:pointer; }
.btn.link{ background:transparent; color:var(--brand); padding:0; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border-bottom:1px solid #e5e7eb; padding:10px; text-align:left; vertical-align:middle; }
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; }
.kpis{ display:flex; gap:12px; flex-wrap:wrap; margin:12px 0; }
.kpi{ flex:1 1 220px; background:var(--card); border:1px solid #e5e7eb; border-radius:12px; padding:14px; }
.nav{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:16px; }
.small{ font-size:12px; color:var(--muted); }
header.appbar{ background:white; border-bottom:1px solid #e5e7eb; }
header.appbar .container{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; }
header.appbar .brand{ font-weight:600; color:var(--brand); }
.logout{ font-size:14px; color:#b91c1c; }
.searchbox{ position:relative; max-width:520px; }
.searchbox input{ width:100%; }
.suggestions{ position:absolute; top:100%; left:0; right:0; background:white; border:1px solid #e5e7eb; border-radius:10px; margin-top:6px; z-index:20; max-height:260px; overflow:auto; }
.suggestions div{ padding:10px 12px; border-bottom:1px solid #f3f4f6; cursor:pointer;}
.suggestions div:hover{ background:#f9fafb; }

/* ---- Cleaner, roomy header/navigation ---- */
header.appbar { background:#fff; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:50; }
header.appbar .navbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; }
header.appbar .brand { font-weight:700; font-size:18px; letter-spacing:.2px; color:var(--brand); }

.menu { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.menu .pill {
  display:inline-block; padding:8px 12px; border-radius:10px;
  color:var(--brand); border:1px solid transparent; transition:background .15s, border-color .15s;
}
.menu .pill:hover { background:#f3f4f6; border-color:#e5e7eb; }
.menu .pill.active { background:#eaf4ee; border-color:#cfe8db; }

.account { display:flex; gap:10px; align-items:center; }
.account .who { font-size:13px; color:var(--muted); }
.btn.outline { background:#fff; border:1px solid #e5e7eb; color:var(--brand); padding:8px 12px; border-radius:10px; }
.btn.outline.danger { color:#b91c1c; border-color:#f3d2d2; }
.btn.outline:hover { background:#f9fafb; }

/* Make it breathe on small screens */
@media (max-width: 820px) {
  header.appbar .navbar { flex-direction:column; align-items:stretch; gap:12px; }
  .menu { justify-content:flex-start; }
  .account { justify-content:space-between; }
}

/* 5px spacing between every menu pill */
/* Force 5px spacing between every menu pill */
header.appbar .menu {
  display: flex;               /* ensure it's flex */
  gap: 5px !important;         /* modern browsers */
  column-gap: 5px !important;  /* explicit */
  row-gap: 5px !important;     /* explicit */
}
header.appbar .menu .pill { margin: 0 !important; }  /* no stray margins */

/* Fallback for browsers without flex gap support */
@supports not (gap: 5px) {
  header.appbar .menu { gap: 0 !important; }
  header.appbar .menu .pill { margin: 0 5px 5px 0 !important; }
  header.appbar .menu .pill:last-child { margin-right: 0 !important; }
}

/* Keep calendar controls on a single line */
.calendar-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;          /* force single row */
  overflow-x:auto;           /* scroll on tiny screens instead of wrapping */
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.calendar-controls .btn{
  white-space:nowrap;        /* keep date + arrow together */
  border-radius:12px;
}
.calendar-date{
  min-width:180px;           /* comfortable width for the date input */
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:12px;
}