/* --- Generic scroll containers (unified) --- */
.scroll-area, .content-scroll, .content-scroll-lg, .content-scroll-sm { max-height: calc(100vh - 250px); overflow:auto; }
@media (max-width: 992px){ .scroll-area, .content-scroll, .content-scroll-lg, .content-scroll-sm { max-height:none; } }
/* End generic scroll containers */

:root {
  /* Color system */
  --clr-bg: #f7f9fc;
  --clr-surface: #ffffff;
  --clr-surface-alt: #f1f5f9;
  --clr-border: #e2e8f0;
  --clr-border-soft: #edf2f7;
  --clr-text: #1e293b;
  --clr-text-soft: #64748b;
  --clr-primary: #c62828; /* Party red (slightly softened) */
  --clr-primary-accent: #b71c1c;
  --clr-primary-soft: #fbe9e9;
  --clr-focus: #2563eb;
  --clr-success: #22c55e;
  --clr-warning: #f59e0b;
  --clr-danger: #dc2626;
  --clr-info: #0ea5e9;
  --sidebar-width: 240px;
  --radius-sm: 4px;
  --radius: .75rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 4px 12px -4px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --transition: .18s cubic-bezier(.4,0,.2,1);
  font-family: 'Inter', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body.dash-shell {
  margin: 0;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'sidebar header'
    'sidebar main'
    'sidebar footer';
  min-height: 100vh;
  background: var(--clr-bg);
  color: var(--clr-text);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; }

/* Sidebar */
.sidebar {
  grid-area: sidebar;
  background: linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-accent) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1rem .95rem 1.25rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
  z-index: 1020; /* above main content */
  -webkit-overflow-scrolling: touch;
}

/* Brand area */
.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .25rem 0 1.6rem;
  padding: .25rem .35rem;
  border-radius: .75rem;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.logo-wrap {
  width: 56px; height: 42px; flex: 0 0 56px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #b71c1c;
  box-shadow: var(--shadow-sm), 0 0 0 2px #ffca28 inset;
  overflow: hidden;
}
.logo-wrap::after { content:""; position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 35% 35%, rgba(198,40,40,.15), rgba(183,28,28,.15)); mix-blend-mode:multiply; }
.logo-wrap img.logo-img{ width:100%; height:100%; object-fit: cover; display:block; }
.title-box { display:flex; flex-direction:column; line-height:1.15; }
.sys-title { font-size:.78rem; font-weight:700; letter-spacing:.55px; text-transform:uppercase; }
.sys-sub { font-size:.58rem; font-weight:600; letter-spacing:.65px; opacity:.9; }

/* Navigation */
.menu { flex:1 1 auto; display:flex; flex-direction:column; gap:.2rem; }
.menu-item {
  position: relative;
  padding:.55rem .75rem .55rem .95rem;
  border-radius: .55rem;
  color:#fff;
  font-size:.78rem;
  font-weight:500;
  display:flex; align-items:center; gap:.55rem;
  background: transparent;
  transition: var(--transition);
}
.menu-item:hover { background: rgba(255,255,255,.10); }
.menu-item.active {
  background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.15) inset;
  font-weight:600;
}
.menu-item.active::before {
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:4px; border-radius:3px; background:#ffeb3b;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}

/* Footer in sidebar */
.sidebar-footer { margin-top:1rem; font-size:.6rem; opacity:.85; line-height:1.3; }

/* Topbar */
.topbar {
  grid-area: header;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  display:flex; align-items:center;
  padding:.5rem 1rem;
  box-shadow: var(--shadow-sm);
  border-bottom:1px solid var(--clr-border-soft);
  position:sticky;
  top:0;
  z-index:1000;
}
.topbar .actions { display:flex; align-items:center; gap:.65rem; margin-left:auto; }
.topbar button.icon, .topbar .btn.icon { border:0; background:transparent; font-size:1.05rem; line-height:1; padding:.35rem; border-radius:50%; color:var(--clr-text-soft); transition:var(--transition); }
.topbar button.icon:hover { background:var(--clr-surface-alt); color:var(--clr-text); }
.topbar .user { font-size:.68rem; font-weight:600; white-space:nowrap; color:var(--clr-text-soft); }
.topbar .logout { margin-left:.45rem; font-size:.85rem; }

.nav-actions .btn{ border:0; background:transparent; }
.btn-icon{ position:relative; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:var(--clr-text-soft); transition:var(--transition); }
.btn-icon:hover{ background:var(--clr-surface-alt); color:var(--clr-text); }
.btn-user{ border:1px solid var(--clr-border-soft); background:#fff; border-radius:20px; padding:.2rem .5rem; }
.btn-user .avatar{ width:26px; height:26px; border-radius:50%; background:#e2e8f0; color:#475569; font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; }
#notifBadge{ right:2px; top:0; transform:translate(50%,-30%); font-size:.65rem; padding:.15rem .3rem; }
#notifBadge.pulse{ animation:pulse 1.2s ease forwards; }
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.6);}70%{box-shadow:0 0 0 8px rgba(220,38,38,0);}100%{box-shadow:0 0 0 0 rgba(220,38,38,0);}}

/* Dropdown sizes */
.notif-menu{ min-width:360px; padding:0; }
.notif-menu .dropdown-header{ padding:.5rem .75rem; border-bottom:1px solid var(--clr-border-soft); }
.notif-menu .dropdown-footer{ border-top:1px solid var(--clr-border-soft); }

/* Dark support */
.theme-dark .btn-user{ background:#0b1324; border-color:#1f2a44; }
.theme-dark .btn-icon:hover{ background:#1f2a44; color:#e2e8f0; }
.theme-dark .topbar{ background:rgba(15,23,42,.85); border-color:#1f2a44; }
.theme-dark .footer{ background:#0b1324; border-color:#1f2a44; }

/* Title style */
h1.h5, h1, .page-title{ font-weight:800; letter-spacing:.3px; }

/* Main */
.main-content { grid-area: main; padding: .25rem 1rem 1.4rem; }

/* Footer */
.footer { grid-area: footer; background:#fff; border-top:1px solid var(--clr-border); font-size:.65rem; }

/* Generic elements */
.badge-cat { display:inline-block; padding:2px 6px; border-radius:2rem; font-size:.55rem; font-weight:600; letter-spacing:.5px; color:#fff; }
.badge-recurring{ background: var(--clr-info); }
.badge-urgent{ background: var(--clr-danger); }
.badge-focus{ background: var(--clr-focus); }
.badge-other{ background: var(--clr-text-soft); }

/* Focus styles for accessibility */
:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(37,99,235,.45); border-radius:4px; }

/* Scrollbar subtle (webkit) */
.sidebar ::-webkit-scrollbar { width:8px; }
.sidebar ::-webkit-scrollbar-track { background:transparent; }
.sidebar ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.25); border-radius:4px; }
.sidebar ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.4); }

/* Responsive */
@media (max-width:1150px){ body.dash-shell{ grid-template-columns:210px 1fr; } }
@media (max-width:900px){
  body.dash-shell{ grid-template-columns:70px 1fr; }
  .title-box { display:none; }
  .menu-item { justify-content:center; padding:.55rem .5rem; }
  .menu-item span { display:none; }
  .topbar .user { display:none; }
  .logo-wrap { width:40px; height:40px; }
}

/* --- Preserve original logo colors (no tint/overlay) --- */
.logo-wrap { background: transparent !important; box-shadow: none !important; overflow: hidden; }
.logo-wrap::after { content: none !important; display: none !important; }
.logo-wrap img, .logo-wrap img.logo-img { width: 100%; height: 100%; object-fit: contain !important; background: transparent !important; filter: none !important; mix-blend-mode: normal !important; }

/* dark theme toggle */
.theme-dark body.dash-shell{ background:#0f172a; color:#e2e8f0; }
.theme-dark .sidebar{ background:linear-gradient(180deg,#0b1324,#111c34); }
.theme-dark .topbar{ background:rgba(15,23,42,.85); border-color:#1f2a44; }
.theme-dark .footer{ background:#0b1324; border-color:#1f2a44; }

/* compact mode */
.compact .menu-item{ padding:.4rem .6rem; }
.compact .topbar{ padding:.35rem .6rem; }
.compact .main-content{ padding:.25rem .6rem 1rem; }
/* ======= Mobile responsive utilities (global) ======= */
/* Turn any table into stacked card style on very small screens */
@media (max-width: 640px){
  .table-mobile{ border-collapse:separate; border-spacing:0 6px; }
  .table-mobile thead{ display:none; }
  .table-mobile tbody tr{ display:block; background:var(--clr-surface); border:1px solid var(--clr-border-soft); border-radius:10px; padding:.35rem .5rem; box-shadow:var(--shadow-sm); }
  .table-mobile tbody tr + tr{ margin-top:.5rem; }
  .table-mobile tbody td{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:.25rem .25rem; font-size:.72rem; border:0 !important; width:100%; }
  .table-mobile tbody td:first-child{ padding-top:.1rem; }
  .table-mobile tbody td:last-child{ padding-bottom:.3rem; }
  .table-mobile tbody td::before{ content:attr(data-label); font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--clr-text-soft); font-size:.6rem; flex:0 0 95px; }
  .table-mobile .btn, .table-mobile .form-select{ font-size:.7rem; }
  .table-mobile .badge{ font-size:.55rem; }
  .table-mobile .input-group{ flex-direction:column; align-items:stretch; }
  .table-mobile .input-group .form-select{ width:100%; margin-bottom:.25rem; }
}

/* Flexible form grid: use in forms to auto wrap fields */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.85rem 1rem; }
@media (max-width: 600px){ .form-grid{ grid-template-columns:1fr; } }

/* Utility to clamp text to one line with ellipsis */
.truncate-1{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* Utility hide on mobile only */
@media (max-width:640px){ .hide-mobile{ display:none !important; } }
@media (min-width:641px){ .show-mobile{ display:none !important; } }
/* ======= End mobile utilities ======= */