:root {
  /* Brand palette — sampled directly from the Zynkwave Technologies logo mark */
  --bg: #F6F2F4; --surface: #FFFFFF; --ink: #240A18; --muted: #7A6570; --border: #E8DCE2;
  --sidebar: #2C0919; --sidebar-text: #DCC1CC; --maroon: #73063F; --pink: #C9137A;
  --gold: #C9A227; --teal: #17A398; --red: #E14B4B; --grey: #9A8B93; --amber: #C9A227;
  --brand-gradient: linear-gradient(135deg, #C9137A 0%, #73063F 100%);
  --font-display: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'Inter', sans-serif;
  --radius: 10px; --mobile-topbar-h: 56px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
.mono { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
a { text-decoration: none; color: inherit; }
h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; }
button,input,select,textarea { font-family: var(--font-body); }
*:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.brand-mark { display: flex; align-items: center; gap: 10px; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 3px rgba(201,19,122,0.22); flex-shrink: 0; }
.brand-text { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; font-size: 15px; color: #FFFFFF; white-space: nowrap; }
.brand-logo-img { height: 24px !important; width: 46px !important; max-width: 46px; object-fit: contain; flex-shrink: 0; display: block; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: 0.015em; white-space: nowrap; background: linear-gradient(90deg, #FFFFFF 0%, #F4C9DD 60%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFFFFF; }

/* Login — minimal premium centered card */
.login-body {
  background: radial-gradient(circle at 50% 0%, #3a0f28 0%, #1c0511 62%, #150210 100%);
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-wrap { width: 100%; max-width: 380px; margin: 0 auto; }
.login-form { width: 100%; background: var(--surface); padding: 40px 34px 32px; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.45); text-align: center; }
.login-badge { width: 68px; height: 68px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 0 0 4px rgba(201,19,122,0.12); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; overflow: hidden; }
.login-badge img { width: 44px; height: auto; }
.login-form h2 { font-size: 21px; margin-bottom: 4px; font-weight: 700; }
.form-hint { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.login-form label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin: 14px 0 6px; text-align: left; color: var(--muted); }
.login-form input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14.5px; background: #FBF8FA; }
.login-form input:focus { border-color: var(--pink); background: #fff; }
.password-field { position: relative; }
.password-field input { padding-right: 42px; }
.toggle-pw { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; padding: 6px; opacity: 0.6; }
.login-submit-btn { width: 100%; margin-top: 22px; padding: 13px; border: none; background: var(--brand-gradient); color: white; font-weight: 700; font-size: 14.5px; border-radius: 8px; cursor: pointer; letter-spacing: 0.01em; box-shadow: 0 8px 20px rgba(115,6,63,0.35); }
.login-submit-btn:hover { opacity: 0.94; }
.alert-box { background: #FDECEC; color: var(--red); padding: 11px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; font-weight: 500; text-align: left; }
.login-footer { margin-top: 22px; font-size: 12px; color: var(--muted); text-align: center; }
.login-footer a { color: var(--pink); font-weight: 700; }

/* App Shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--sidebar); color: var(--sidebar-text); display: flex; flex-direction: column; padding: 24px 16px; position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
.drawer-close { display: none; }
.sidebar-brand { padding: 0 8px; }
.sidebar-sub { font-size: 11px; color: var(--sidebar-text); opacity: 0.7; padding: 4px 8px 20px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--sidebar-text); }
.sidebar-nav > .nav-item { color: #FFFFFF; font-weight: 600; }
.nav-ico { font-size: 13px; width: 18px; margin-right: 4px; text-align: center; opacity: 0.85; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,0.08); color: white; }
.nav-item.active { background: var(--brand-gradient); color: #fff; }
.nav-divider { font-size: 10px; color: var(--sidebar-text); opacity: 0.6; letter-spacing: 0.08em; padding: 14px 12px 6px; font-weight: 600; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; flex-shrink: 0; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px 12px; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.user-name { font-size: 13px; font-weight: 600; color: white; }
.user-role { font-size: 11px; color: var(--sidebar-text); }
.logout-link { display: block; padding: 9px; font-size: 13px; color: var(--sidebar-text); text-align: center; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; }
.mobile-topbar { display: none; }
.drawer-overlay { display: none; }
.main-panel { flex: 1; padding: 32px 40px; max-width: 100%; overflow-x: hidden; min-width: 0; }
/* FIX: the fixed notif-bell-btn (top:16px; right:20px; 42px wide) floats above every page's
   content and was landing directly on top of right-aligned topbar buttons (e.g. "+ New
   Invoice"). Reserving space on the right of the topbar so its content wraps clear of the
   bell's 20–62px-from-edge zone instead of sitting under it. */
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; padding-right: 56px; }
.topbar-eyebrow { font-size: 11px; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.topbar h1 { font-size: 26px; }
.btn-primary { background: var(--maroon); color: white; border: none; padding: 11px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn-primary:hover { opacity: 0.9; }
.btn-whatsapp { background: #25D366; color: white; border: none; padding: 9px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; display: inline-block; }
.btn-ghost { background: transparent; border: 1px solid var(--border); padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 13.5px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.btn-ghost:hover { background: #F7F2F5; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; border-top: 3px solid var(--grey); min-width: 0; }
.stat-card.accent-teal { border-top-color: var(--teal); } .stat-card.accent-gold { border-top-color: var(--gold); }
.stat-card.accent-red { border-top-color: var(--red); } .stat-card.accent-maroon { border-top-color: var(--maroon); }
.stat-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; overflow-wrap: break-word; }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

.dashboard-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.section-head h3 { font-size: 16px; }
.see-all { font-size: 13px; color: var(--maroon); font-weight: 600; }

.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 13px 15px; background: #F9F5F7; color: var(--muted); font-weight: 600; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: 12px 15px; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #FBF8FA; }
.text-warn { color: var(--red); font-weight: 600; }
.report-type-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.report-type-tab { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.report-type-tab.active { color: var(--maroon); border-bottom-color: var(--maroon); }
.report-type-tab:hover { color: var(--ink); }
.report-filter-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.report-filter-form > div { min-width: 160px; }
.report-filter-form label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--muted); }
.quick-range-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Tasks & Automation */
.automation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.automation-rule-card { border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.automation-rule-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.automation-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.automation-dot.on { background: var(--teal); box-shadow: 0 0 0 3px rgba(23,163,152,0.18); }
.automation-dot.off { background: var(--grey); }
.automation-rule-card p { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-bottom: 8px; }
.automation-rule-meta { font-size: 11px; color: var(--muted); font-family: var(--font-body); font-variant-numeric: tabular-nums; }

.task-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.task-col { background: #F9F5F7; border-radius: 10px; padding: 12px; min-height: 120px; }
.task-col-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; padding: 4px 6px 12px; }
.task-col-count { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1px 9px; font-size: 11px; color: var(--muted); }
.task-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.task-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.priority-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
.priority-pill.priority-high { background: #FDECEC; color: var(--red); }
.priority-pill.priority-medium { background: #FDF3D9; color: #8A6D00; }
.priority-pill.priority-low { background: #E9F0EE; color: var(--teal); }
.task-delete { color: var(--muted); cursor: pointer; font-size: 12px; }
.task-delete:hover { color: var(--red); }
.task-title { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
.task-title-link { text-decoration: none; color: inherit; display: block; }
.task-number-link { font-size: 10.5px; font-weight: 600; color: var(--muted); text-decoration: none; margin-right: auto; }
.task-number-link:hover { color: var(--maroon, #73063F); }
.task-desc { font-size: 12px; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }
.task-followup { font-size: 11px; color: var(--accent-2, #6b5b95); background: #F5F3FA; border-radius: 6px; padding: 4px 8px; margin: 6px 0; }
.task-view-toggle { display: flex; background: #F0F1F3; border-radius: 8px; padding: 3px; gap: 2px; }
.task-view-toggle a { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); border-radius: 6px; text-decoration: none; }
.task-view-toggle a.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.attachment-list { display: flex; flex-direction: column; gap: 4px; }
.attachment-item { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid #F2F1F6; }
.attachment-item:last-child { border-bottom: none; }
.attachment-item .table-link { font-size: 13px; font-weight: 600; }
.attachment-item .row-delete { margin-left: auto; }

.comment-thread { display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; }
.comment-item { padding: 10px 12px; border-radius: 10px; background: #F7F6FA; }
.comment-item.comment-mine { background: #FDF0F7; }
.comment-meta { font-size: 12px; margin-bottom: 4px; }
.comment-body { font-size: 13px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }

.task-search-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.task-search-input-wrap { position: relative; display: inline-flex; align-items: center; }
.task-search-input-wrap .icon { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.task-search-bar input[name="q"] { max-width: 220px; padding-left: 30px; }
.task-status-tabs { margin-bottom: 16px; }
.task-status-tabs a { margin-right: 14px; }
.task-status-tabs .tab-count { font-size: 11px; color: var(--muted); margin-left: 3px; }
.task-quick-status select { font-size: 11.5px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); margin-top: 4px; }

/* Reminders bell — a native <details> dropdown, no JS required */
.reminders-panel { margin: 4px 16px 12px; }
.reminders-panel summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: #F7F6FA; font-size: 13px; font-weight: 600; color: var(--ink); }
.reminders-panel summary::before { content: "🔔"; font-size: 13px; }
.reminders-panel summary::-webkit-details-marker { display: none; }
.reminders-badge { background: var(--red, #D64545); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 10px; padding: 1px 7px; margin-left: auto; }
.reminders-list { margin-top: 6px; max-height: 260px; overflow-y: auto; border-radius: 8px; background: #fff; border: 1px solid #ECEAF2; }
.reminders-empty { padding: 12px; font-size: 12px; color: var(--muted); }
.reminder-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-bottom: 1px solid #F2F1F6; text-decoration: none; }
.reminder-item:last-child { border-bottom: none; }
.reminder-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.reminder-meta { font-size: 11px; color: var(--muted); }
.reminder-item.is-overdue .reminder-meta { color: var(--red, #D64545); font-weight: 600; }
.reminder-item.is-comment .reminder-meta { color: #6b5b95; font-weight: 600; }

/* Icon system — inline SVGs sized/colored to sit inline with text via currentColor */
.icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; margin-right: 4px; }
.nav-ico .icon { vertical-align: -2px; margin-right: 0; }
.btn-primary .icon, .btn-ghost .icon, .btn-whatsapp .icon { margin-right: 5px; }
.task-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.task-actions { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 8px; }
.task-move-btn { font-size: 10.5px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer; }
.task-move-btn:hover { border-color: var(--maroon); color: var(--maroon); }
.table-link { color: var(--maroon); font-weight: 600; }
.table-link:hover { text-decoration: underline; }
.row-actions { white-space: nowrap; vertical-align: middle; }
.row-actions a { display: inline-flex; align-items: center; margin-right: 10px; }
.row-actions a:last-child { margin-right: 0; }
.row-edit { color: var(--muted); font-weight: 600; padding: 4px 6px; cursor: pointer; }
.row-delete { color: var(--red); font-weight: 700; padding: 4px 8px; cursor: pointer; }
.back-link { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; display: inline-block; }

.status-pill { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.status-draft { background: #F0F1F3; color: var(--muted); }
.status-sent { background: #FDF3D9; color: #8A6D00; }
.status-paid, .status-active, .status-onboarded, .status-completed, .status-ongoing { background: #E4F6F3; color: var(--teal); }
.status-partial, .status-proposal_sent, .status-planning { background: #FDF3D9; color: #8A6D00; }
.status-overdue, .status-inactive, .status-cancelled, .status-on_hold, .status-declined { background: #FDECEC; color: var(--red); }
.status-invoiced, .status-negotiation { background: #EFE3EC; color: var(--maroon); }
.status-lead, .status-contacted { background: #F0F1F3; color: var(--muted); }
.status-high { background: #FDECEC; color: var(--red); }
.status-medium { background: #FDF3D9; color: #8A6D00; }
.status-low { background: #F0F1F3; color: var(--muted); }
.status-open { background: #F0F1F3; color: var(--muted); }
.status-in_progress { background: #FDF3D9; color: #8A6D00; }
.status-done { background: #E4F6F3; color: var(--teal); }
.status-pill.lg { font-size: 12px; padding: 6px 14px; }

.toast { background: #E4F6F3; color: var(--teal); padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; font-weight: 500; line-height: 1.6; }
.toast-warn { background: #FDF3D9; color: #8A6D00; }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(43,14,31,0.55); align-items: center; justify-content: center; z-index: 200; padding: 16px; }
.modal-card { background: var(--surface); border-radius: var(--radius); padding: 26px; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; }
.modal-card h3 { font-size: 18px; margin-bottom: 16px; }
.modal-card label { display: block; font-size: 12.5px; font-weight: 600; margin: 12px 0 5px; }
.modal-card input, .modal-card select, .modal-card textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--border); border-radius: 7px; font-size: 14px; }
.modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.modal-actions button { flex: 1; }

.driver-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.driver-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.driver-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.driver-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--sidebar); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); flex-shrink: 0; }
.driver-card h4 { font-size: 15px; margin-bottom: 6px; }
.driver-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }

.profile-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }

/* -- Users page: compact, professional sizing (Sep 2026). Scoped to these classes
   only — .profile-grid/.detail-card are shared with other pages that still want
   the roomier default sizing. -- */
.users-profile-grid { max-width: 900px; grid-template-columns: 1.3fr 1fr; }
.users-list-card { padding: 14px 16px; }
.users-list-card .user-picker-row { padding: 7px 8px; gap: 8px; }
.users-list-card .user-group-heading { font-size: 11px; margin: 14px 0 6px; }
.users-list-card .user-group-block:first-child .user-group-heading { margin-top: 0; }
.users-detail-card { padding: 16px 18px; }
.users-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 40px 20px; color: var(--muted); }
.users-empty-icon { width: 44px; height: 44px; border-radius: 50%; background: #F9F5F7; display: flex; align-items: center; justify-content: center; color: var(--maroon); }
@media (max-width: 900px) { .users-profile-grid { max-width: none; } }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.profile-main, .profile-side, .settings-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.detail-card h3 { font-size: 13px; margin-bottom: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; gap: 12px; }
.detail-row:last-child { border-bottom: none; }
.detail-row > span:first-child { color: var(--muted); }
.mini-alert { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.mini-alert.severity-medium { color: #8A6D00; } .mini-alert.severity-low { color: var(--muted); }
.empty-note { font-size: 12px; color: var(--muted); }
.settings-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; margin: 6px 0 14px; font-size: 14px; }
.logo-preview-box { padding: 14px; background: #F9F5F7; border-radius: 8px; margin-bottom: 14px; display: inline-block; }
.logo-preview-box img { max-height: 60px; max-width: 220px; object-fit: contain; display: block; }

.section-block { margin-bottom: 26px; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; min-width: 0; }
.chart-card h3 { font-size: 13px; margin-bottom: 16px; color: var(--muted); }
.chart-card canvas { max-width: 100%; }
.chart-card-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.chart-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chart-type-toggle { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; }
.chart-type-btn { border: none; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; }
.chart-type-btn:hover { color: var(--ink); }
.chart-type-btn.active { background: var(--maroon); color: #fff; }
.chart-period-select { border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--surface); cursor: pointer; }
.chart-canvas-wrap { position: relative; height: 220px; width: 100%; }

/* Dashboard-only compact mode — scoped so it never affects these same components on other
   pages (client/bank account detail pages and Reports reuse stat-card/chart-card/table-card). */
.dashboard-compact .topbar { margin-bottom: 18px; }
.dashboard-compact .topbar h1 { font-size: 20px; }
.dashboard-compact .topbar-eyebrow { font-size: 10.5px; }
.dashboard-compact .stat-row { gap: 10px; margin-bottom: 16px; }
.dashboard-compact .stat-card { padding: 12px 14px; border-top-width: 2px; }
.dashboard-compact .stat-num { font-size: 16px; }
.dashboard-compact .stat-label { font-size: 10.5px; margin-top: 2px; }
.dashboard-compact .chart-card { padding: 14px 16px; }
.dashboard-compact .chart-card-head { margin-bottom: 8px; }
.dashboard-compact .chart-card-head h3 { font-size: 12.5px; }
.dashboard-compact .chart-type-btn { font-size: 11px; padding: 4px 10px; }
.dashboard-compact .chart-period-select { font-size: 11px; padding: 5px 9px; }
.dashboard-compact .chart-canvas-wrap { height: 170px; }
.dashboard-compact .section-block { margin-bottom: 16px; }
.dashboard-compact .section-head { margin-bottom: 8px; }
.dashboard-compact .section-head h3 { font-size: 13.5px; }
.dashboard-compact .see-all { font-size: 12px; }
.dashboard-compact .dashboard-two-col { gap: 14px; margin-bottom: 16px; }
.dashboard-compact .data-table { font-size: 12px; }
.dashboard-compact .data-table th { padding: 9px 12px; font-size: 9.5px; }
.dashboard-compact .data-table td { padding: 8px 12px; }
.dashboard-compact .detail-row { padding: 6px 0; font-size: 12.5px; }
.report-filter-form { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 14px; align-items: end; }
.report-filter-form label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--muted); }
.quick-range-row { display: flex; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }

.user-picker-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; margin-bottom: 4px; }
.user-picker-row:hover { background: #F9F5F7; }
.user-picker-row.active { background: #FDF3D9; }
.perm-module-group { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.perm-module-title { font-weight: 700; font-size: 13px; color: var(--maroon); margin-bottom: 10px; text-transform: uppercase; }
.perm-action-grid { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.perm-checkbox-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; cursor: pointer; }
.perm-checkbox-row input { width: 16px; height: 16px; accent-color: var(--maroon); cursor: pointer; }

.report-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.report-hub-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: block; transition: border-color .15s, transform .15s, box-shadow .15s; }
.report-hub-card:hover { border-color: var(--maroon); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(115,6,63,0.08); }
.report-hub-card-icon { width: 38px; height: 38px; border-radius: 9px; background: var(--bg); color: var(--maroon); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.report-hub-card-title { font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 5px; }
.report-hub-card-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Zoho-style edit forms */
.zoho-edit-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.zoho-eyebrow { font-size: 20px; font-weight: 700; font-family: var(--font-display); }
.zoho-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.zoho-field-row { display: flex; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.zoho-field { flex: 1; min-width: 160px; }
.zoho-field-lg { flex: 2.5; min-width: 260px; }
.zoho-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.zoho-field .req { color: var(--red); }
.zoho-field select, .zoho-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: 14px; }
.zoho-field input:disabled { background: #F7F2F5; color: var(--muted); }
.zoho-currency-badge { padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: #F9F5F7; font-weight: 700; text-align: center; }
.zoho-addr-preview { display: flex; gap: 24px; margin-top: 12px; padding: 12px 14px; background: #F9F5F7; border-radius: 8px; flex-wrap: wrap; }
.zoho-addr-preview-col { flex: 1; min-width: 180px; font-size: 12.5px; line-height: 1.6; }
.zoho-addr-preview .addr-label { background: none; padding: 0; font-size: 10.5px; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.zoho-item-table textarea { width: 100%; padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: var(--font-body); }
.zoho-item-table-wrap { margin: 20px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.zoho-item-table-head { background: #F9F5F7; padding: 10px 16px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--border); }
.zoho-item-table { width: 100%; border-collapse: collapse; }
.zoho-item-table th { text-align: left; padding: 10px 12px; font-size: 10.5px; text-transform: uppercase; color: var(--muted); background: #FBF8FA; border-bottom: 1px solid var(--border); }
.zoho-item-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.zoho-item-table input, .zoho-item-table select { width: 100%; padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.row-item-select { margin-bottom: 4px; }
.remove-item { color: var(--red); cursor: pointer; font-weight: 700; }
.zoho-item-table-actions { padding: 10px 16px; }
.zoho-bottom-row { display: flex; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.zoho-notes-col { flex: 1.6; min-width: 260px; }
.zoho-notes-col label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.zoho-notes-col textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: 13.5px; font-family: var(--font-body); }
.zoho-totals-col { flex: 1; min-width: 220px; }
.zoho-total-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.zoho-grand-total { font-weight: 700; font-size: 17px; color: var(--maroon); border-bottom: none; padding-top: 14px; }
.zoho-form-actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.zoho-action-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.zoho-whatsnext { background: #FDF6E3; border: 1px solid #F0DFA0; border-radius: 8px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; font-size: 13.5px; }

/* Invoice/Quote document — pixel-matched to the Zoho-style reference layout */
.invoice-doc-shell { padding: 8px 0 24px; }
.invoice-doc { max-width: 800px; margin: 0 auto; background: var(--surface); border: 1px solid var(--ink); padding: 34px 38px; position: relative; font-size: 13px; color: var(--ink); }
.draft-ribbon { position: absolute; top: 22px; left: -36px; background: #9A8B93; color: white; padding: 4px 42px; transform: rotate(-45deg); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; }
.invoice-doc-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 4px; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.invoice-doc-logo { max-height: 60px; max-width: 180px; object-fit: contain; margin-bottom: 8px; }
.invoice-doc-company-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.invoice-doc-company-details { font-size: 10.5px; color: var(--ink); margin-top: 4px; line-height: 1.55; }
.invoice-doc-title { font-size: 30px; font-weight: 600; color: var(--ink); font-family: var(--font-display); letter-spacing: 0.02em; align-self: flex-start; margin-top: 14px; }
.invoice-doc-meta { border-collapse: collapse; width: 100%; margin-bottom: 14px; font-size: 12.5px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.invoice-doc-meta > tbody > tr > td { vertical-align: top; padding: 6px 0; }
.meta-col { width: 50%; }
.meta-col-right { padding-left: 24px; }
.meta-subtable { border-collapse: collapse; }
.meta-subtable td { padding: 3px 0; }
.meta-label { font-weight: 600; padding-right: 10px; width: 100px; }
.invoice-doc-addr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 14px; border-bottom: 1px solid var(--ink); }
.invoice-doc-addr { padding: 6px 12px 12px 0; }
.invoice-doc-addr + .invoice-doc-addr { padding-left: 16px; border-left: 1px solid var(--border); }
.addr-label { font-size: 11px; font-weight: 700; background: #EFE9EC; padding: 4px 8px; margin: 0 0 8px -1px; display: block; width: fit-content; }
.addr-name { font-weight: 700; margin-bottom: 3px; color: var(--maroon); }
.invoice-doc-items { width: 100%; border-collapse: collapse; margin-bottom: 16px; border: 1px solid var(--ink); }
.invoice-doc-items th { text-align: left; padding: 8px 8px; font-size: 11px; font-weight: 700; background: #EFE9EC; border-bottom: 1px solid var(--ink); }
.invoice-doc-items th:not(:last-child), .invoice-doc-items td:not(:last-child) { border-right: 1px solid var(--ink); }
.invoice-doc-items td { padding: 11px 8px; border-bottom: 1px solid var(--border); font-size: 12.5px; vertical-align: top; }
.invoice-doc-items tbody tr:last-child td { border-bottom: none; }
.item-desc-main { font-weight: 600; }
.item-desc-sub { color: var(--muted); font-size: 11.5px; line-height: 1.55; margin-top: 2px; white-space: pre-line; }
.ta-right { text-align: right; }
.invoice-doc-bottom { display: flex; gap: 30px; flex-wrap: wrap; }
.invoice-doc-bottom-left { flex: 1.5; min-width: 260px; }
.invoice-doc-bottom-right { flex: 1; min-width: 220px; }
.itw-label { font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.itw-value { font-size: 12px; line-height: 1.6; margin-bottom: 4px; white-space: pre-line; }
.itw-value.itw-words { font-style: italic; font-weight: 600; }
/* The totals box's right edge is pulled out to the invoice's own right padding (-38px) and
   its border-right dropped, so it visually connects flush with the outer document border
   instead of stopping short at its own inset edge. */
.doc-totals-box { border: 1px solid var(--ink); border-right: none; padding: 4px 38px 10px 14px; margin-right: -38px; }
.doc-total-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.doc-grand-total { font-weight: 700; font-size: 14.5px; border-top: 1px solid var(--ink); padding-top: 8px; margin-top: 2px; }
.doc-signature-box { margin-top: 74px; border-top: 1px solid var(--ink); padding-top: 8px; text-align: center; font-size: 11.5px; color: var(--muted); }
.invoice-doc-footer { text-align: center; margin-top: 30px; padding-top: 14px; font-size: 11px; color: var(--muted); }

@media print {
  .sidebar, .no-print, .mobile-topbar { display: none !important; }
  body { background: white; padding-top: 0; }
  .invoice-doc { border: 1px solid var(--ink); max-width: 100%; box-shadow: none; }
  @page { size: A4; margin: 14mm; }
}

@media (max-width: 1100px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .chart-grid { grid-template-columns: 1fr; }
  .chart-grid-main { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .dashboard-two-col { grid-template-columns: 1fr; }
  .report-filter-form { grid-template-columns: 1fr 1fr; }
  .invoice-doc-addr-row { grid-template-columns: 1fr; }
  .task-board { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  body { padding-top: var(--mobile-topbar-h); }
  .mobile-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; top: 0; left: 0; right: 0; height: var(--mobile-topbar-h); background: var(--sidebar); padding: 0 12px; z-index: 150; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
  .mobile-topbar .brand-mark .brand-text { color: white; font-size: 15px; }
  .mobile-topbar .brand-logo-img { height: 22px !important; width: 42px !important; }
  .hamburger-btn, .mobile-new-bill { background: none; border: none; color: white; font-size: 20px; padding: 8px; cursor: pointer; line-height: 1; }
  .drawer-overlay.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 190; }
  .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 260px; max-width: 82vw; z-index: 200; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 4px 0 20px rgba(0,0,0,0.2); }
  .sidebar.open { transform: translateX(0); }
  .drawer-close { display: block; position: absolute; top: 16px; right: 16px; background: none; border: none; color: white; font-size: 18px; cursor: pointer; padding: 6px; }
  .main-panel { padding: 16px; }
  .app-shell { display: block; }
  .topbar { flex-direction: column; align-items: stretch; }
  .topbar h1 { font-size: 20px; }
  .topbar .btn-primary { width: 100%; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .login-form { padding: 30px 22px; }
  .modal-card { max-width: 100%; width: 100%; border-radius: 12px; }
  .report-filter-form { grid-template-columns: 1fr; }
  .zoho-field-row { flex-direction: column; }
  .zoho-bottom-row { flex-direction: column; }
  .invoice-doc { padding: 20px; }
  .invoice-doc-head { flex-direction: column; }

  /* FIX (Sep 2026): the notification bell is a separate position:fixed element from the
     mobile topbar, so as soon as the topbar appears (this breakpoint) both it and the
     topbar's own "+" New Invoice button land in the same top-right corner and overlap.
     Shifting the bell left of the "+" button, vertically centered in the topbar band. */
  .notif-bell-btn { top: 9px; right: 56px; width: 38px; height: 38px; }

  /* ---- Every list-page table: force a real min-width so cell content never gets crushed
     into unreadable slivers — the .table-card wrapper's overflow-x:auto then reliably
     produces an actual horizontal scroll instead of squished columns. Applies app-wide to
     Clients, Quotations, Invoices, Payments, Tasks, Expenses, Users, Items, Meetings,
     Projects, Activity Log, and every report's Excel-style table. ---- */
  .data-table, .excel-table { min-width: 640px; }
  .import-map-table { min-width: 0; }
  .data-table td { white-space: nowrap; }

  /* ---- Stat/overview card grids: 2-across is still workable down to ~360px, but big ₹
     figures wrap awkwardly below that — drop to a single column on the smallest phones. ---- */
  .overview-stats, .report-overview .overview-stats { grid-template-columns: 1fr 1fr !important; }
  .mini-chart-canvas-wrap { height: 200px !important; }

  /* ---- Header action rows across newer pages (Clients' Find/Export/Import/+Add, Tasks'
     Export/New Task, etc.) — the inline flex-wrap already lets them wrap, this just keeps
     each control comfortably tappable at full width instead of shrinking to fit one line. ---- */
  .find-client-bar { width: 100%; }
  .find-client-bar input[type="text"] { width: 100% !important; flex: 1; }
  .task-search-bar { width: 100%; }
  .task-search-bar input[name="q"] { flex: 1; max-width: none !important; }

  /* ---- Export/Import format-choice cards (Export Clients, Export Tasks, Import sample) —
     side-by-side cards get too narrow to read comfortably below ~700px. ---- */
  .export-format-grid { grid-template-columns: 1fr; max-width: 100% !important; }

  /* ---- Import Clients' field-mapping table: a "Label | Dropdown" table looks cramped and
     can overflow sideways on a phone — stack each row's label above its dropdown instead. ---- */
  .import-map-table, .import-map-table thead, .import-map-table tbody, .import-map-table tr { display: block; width: 100%; }
  .import-map-table thead { display: none; }
  .import-map-table td { display: block; width: 100%; box-sizing: border-box; border-bottom: none; padding: 6px 0; white-space: normal; }
  .import-map-table td:first-child { font-weight: 600; padding-bottom: 2px; }
  .import-map-table tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .import-map-table select { width: 100%; box-sizing: border-box; }

  /* ---- Client-code picker (Quotation/Invoice customer field) — the suggestions dropdown
     must never run wider than the screen. ---- */
  .client-picker-suggestions { left: 0; right: 0; max-width: 100%; }

  /* ---- Task Follow-Up @mention chips and attached-file rows — long names/filenames need to
     truncate instead of forcing the page wider than the screen. ---- */
  .mention-chip { max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
  .attach-file-row { max-width: 100%; }
  .attach-file-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55vw; }

  /* ---- Permissions grids (Privileges, Group Roles) — belt-and-suspenders alongside each
     page's own inline breakpoint, in case that inline copy is ever out of sync. ---- */
  .rail-grid { grid-template-columns: 1fr !important; }
  .perm-grid-wrap { grid-template-columns: 1fr !important; }

  /* ---- Report picker dropdown (mega-menu) — keep it from overflowing a narrow screen. ---- */
  .report-dropdown-panel { min-width: 0; width: 92vw; }

  /* ---- Task board: status tabs and the quick per-row status <select> stay usable at
     narrow widths instead of overlapping the status pill next to them. ---- */
  .task-status-tabs { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .task-quick-status select { width: 100%; margin-top: 6px; }
}

@media (max-width: 420px) {
  .overview-stats, .report-overview .overview-stats, .stat-row { grid-template-columns: 1fr !important; }
  .stat-num { font-size: 22px; }
  .modal-card { padding: 18px; }
  .topbar h1 { font-size: 18px; }
  .detail-card, .table-card, .excel-table-card { border-radius: 8px; }
}


/* ============================================================================
   HRMS Mobile Responsive Fixes — added after Aravinth's 9-screenshot mobile
   review. Every rule here is scoped/new; nothing above this line was touched.
   ============================================================================ */

/* ---- Fix 1: 100vh is unreliable on mobile browsers (address bar changes the
   REAL visible height after the CSS is applied), which was causing the login
   page to show a phantom vertical scrollbar and the mobile sidebar drawer to
   push "Sign out" below the visible area. 100dvh reflects the actual visible
   viewport on browsers that support it; 100vh stays as the fallback. ---- */
.login-body { min-height: 100vh; min-height: 100dvh; }
.sidebar { height: 100vh; height: 100dvh; }

/* ---- Fix 2: classic flexbox bug — a flex child with overflow-y:auto still
   needs min-height:0 to actually shrink and scroll internally instead of
   overflowing its parent. Without this, a long nav list (now ~25 items with
   HRMS added) pushes the sidebar-footer (user info / Change Password / Sign
   out) below the visible drawer with no way to reach it. ---- */
.sidebar-nav { min-height: 0; }

@media (max-width: 780px) {
  /* Safety net alongside Fix 1/2 above: if a phone's real viewport still ends
     up shorter than expected, the whole drawer can be scrolled as a fallback
     so Sign out is always reachable one way or another. */
  .sidebar { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* ---- Fix 3b: scrolling the drawer's nav list (or overscrolling past its
     top/bottom edge with a fast swipe) was "leaking" the scroll to the page
     underneath — the drawer stayed fixed in place, but the page behind it
     scrolled too, which looked like the drawer overlapping the page's own
     footer/bottom content. overscroll-behavior stops a scroll from chaining
     to its parent once it hits the top/bottom of the drawer's own scroll
     area; the body.drawer-open lock (toggled in sidebar.php/app.js whenever
     the drawer opens/closes) is a second layer of the same fix for phones
     where overscroll-behavior alone isn't enough. ---- */
  .sidebar, .sidebar-nav { overscroll-behavior: contain; }
  html.drawer-open, html.drawer-open body { overflow: hidden; height: 100%; }

  /* ---- Fix 3: header action-button rows built as a plain inline
     `style="display:flex;gap:10px"` div (Self-Service's "Clock In/Out" +
     "My Documents" buttons, Payroll/Attendance detail pages' "← Back" +
     action buttons, etc.) don't wrap on a narrow phone and run off the right
     edge. This targets that exact inline-style pattern everywhere it's used,
     without needing to edit every page individually. ---- */
  .topbar > div[style*="display:flex"] { flex-wrap: wrap !important; width: 100%; gap: 8px !important; }
  .topbar > div[style*="display:flex"] > a, .topbar > div[style*="display:flex"] > button {
    flex: 1 1 auto; text-align: center; white-space: nowrap;
  }

  /* ---- Fix 4: two-column inline `style="display:grid;grid-template-columns:
     1fr 1fr"` field pairs (Employee Add/Edit's Phone+Email, Date of Birth+
     Joining, etc.) get too cramped to read on a phone — stack to one column.
     !important is required here since it's overriding an inline style. ---- */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* ---- Fix 5: forms in a plain .settings-card (HRMS Settings' office
     geofence fields, Self-Service's My Info) had bare <label> tags with no
     block styling — unlike .modal-card, which already forces block display.
     Without this, each next label runs onto the end of the previous line
     instead of starting its own row, exactly like the screenshots showed. ---- */
  .settings-card label { display: block; font-size: 12.5px; font-weight: 600; margin: 12px 0 5px; }
  .settings-card input, .settings-card select, .settings-card textarea {
    width: 100%; padding: 10px 11px; border: 1px solid var(--border); border-radius: 7px; font-size: 14px; box-sizing: border-box;
  }

  /* ---- Fix 6: HRMS list tables (Attendance directory, My Leave, Employees,
     Payroll, Leave Approvals, Benefits, Performance, per-employee Attendance/
     Payroll detail, Documents) as a stacked card-per-row list instead of a
     side-scrolling table — each cell shows its column header as a small label
     to its left, so nothing is hidden off the right edge and nothing needs a
     sideways swipe to read. Applied only to tables explicitly marked with the
     "mobile-cards" class (added alongside data-table) so every other existing
     table in the app keeps its current horizontal-scroll behaviour untouched. ---- */
  .data-table.mobile-cards, .data-table.mobile-cards thead, .data-table.mobile-cards tbody,
  .data-table.mobile-cards tr, .data-table.mobile-cards td {
    display: block; width: 100%; box-sizing: border-box;
  }
  .data-table.mobile-cards { min-width: 0 !important; }
  .data-table.mobile-cards thead { display: none; }
  .data-table.mobile-cards tr {
    border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; padding: 4px 12px; background: #fff;
  }
  .data-table.mobile-cards tr:last-child { margin-bottom: 0; }
  .data-table.mobile-cards td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px dashed var(--border); white-space: normal; text-align: right;
  }
  .data-table.mobile-cards td:last-child { border-bottom: none; }
  .data-table.mobile-cards td::before {
    content: attr(data-label); font-weight: 600; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--muted); text-align: left; flex-shrink: 0; margin-right: 10px;
  }
}

/* ==========================================================================
   Right-side Notifications: floating bell, slide-in panel, and toast popups.
   Fixed-position so this shows the same way on every page regardless of that
   page's own layout — this is the "Outlook-style, right side, any page" bell.
   ========================================================================== */
.notif-bell-btn {
  position: fixed; top: 16px; right: 20px; z-index: 600;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 10px rgba(43,14,31,0.12);
}
.notif-bell-btn .reminders-badge { position: absolute; top: -4px; right: -4px; }

.notif-panel-overlay {
  display: none; position: fixed; inset: 0; background: rgba(43,14,31,0.35); z-index: 650;
}
.notif-panel-overlay.open { display: block; }

.notif-panel {
  position: fixed; top: 0; right: -380px; width: 360px; max-width: 92vw; height: 100vh;
  background: var(--surface); z-index: 660; box-shadow: -6px 0 24px rgba(43,14,31,0.18);
  transition: right 0.22s ease; display: flex; flex-direction: column;
}
.notif-panel.open { right: 0; }
.notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 10px; }
.notif-panel-header h3 { font-size: 16px; }
.notif-panel-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; }
.notif-panel-tabs { display: flex; gap: 6px; padding: 0 14px 10px; border-bottom: 1px solid var(--border); }
.notif-panel-tabs button {
  flex: 1; background: none; border: none; padding: 8px 6px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); cursor: pointer; border-radius: 8px;
}
.notif-panel-tabs button.active { background: var(--surface-2, #F5F1F3); color: var(--ink); }
.notif-panel-body { flex: 1; overflow-y: auto; padding: 6px 0; }
.notif-section { display: none; }
.notif-section.active { display: block; }
.notif-row {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 18px; text-decoration: none;
  color: var(--ink); border-bottom: 1px solid var(--border); position: relative;
}
.notif-row:hover { background: #FBF7F8; }
.notif-row.is-overdue { border-left: 3px solid var(--red); }
.notif-row.is-unread { background: #FDF6F9; }
.notif-row.is-unread::after {
  content: ''; position: absolute; top: 16px; right: 16px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--maroon, #73063F);
}
.notif-row-icon { flex-shrink: 0; margin-top: 2px; color: var(--muted); }
.notif-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-row-title { font-size: 13px; font-weight: 600; }
.notif-row-meta { font-size: 11.5px; color: var(--muted); }
.notif-row-time { font-size: 10.5px; color: var(--muted); margin-top: 2px; }

.toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 700;
  display: flex; flex-direction: column; gap: 10px; max-width: 320px;
}
.notif-toast {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; box-shadow: 0 6px 20px rgba(43,14,31,0.18); cursor: pointer;
  display: flex; gap: 10px; align-items: flex-start; animation: notifToastIn 0.25s ease;
  text-decoration: none; color: var(--ink);
}
.notif-toast-icon { flex-shrink: 0; color: var(--maroon, #73063F); margin-top: 2px; }
.notif-toast-title { font-size: 13px; font-weight: 700; }
.notif-toast-msg { font-size: 12px; color: var(--muted); margin-top: 2px; }
@keyframes notifToastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 640px) {
  .toast-container { left: 12px; right: 12px; max-width: none; }
  .forecast-card .forecast-pill-row { flex-direction: column; }
}

/* ============================================================================
   SUPER DASHBOARD components — Quotation Pipeline, Team Leaderboard,
   Activity Timeline, Client Funnel. Reuses the same tokens as everything above.
   ============================================================================ */
.pipeline-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; overflow-x: auto; }
@media (max-width: 1100px) { .pipeline-board { grid-template-columns: repeat(5, 200px); } }
.pipeline-col { background: #FAF8F9; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; min-width: 0; }
.pipeline-col-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--border); }
.pipeline-col-head .pc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.pipeline-col-head .pc-count { font-size: 11px; color: var(--muted); }
.pipeline-col-total { font-size: 13px; font-weight: 700; color: var(--maroon); margin-bottom: 10px; }
.pipeline-deal { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; font-size: 12px; }
.pipeline-deal .pd-name { font-weight: 600; color: var(--ink); display: block; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipeline-deal .pd-amt { color: var(--muted); font-variant-numeric: tabular-nums; }
.pipeline-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 10px 0; }

.leaderboard-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--border); color: var(--ink); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.leaderboard-rank.top1 { background: var(--gold); color: #fff; }
.leaderboard-rank.top2 { background: #B8B8C0; color: #fff; }
.leaderboard-rank.top3 { background: #C98A4B; color: #fff; }
.leaderboard-info { flex: 1; min-width: 0; }
.leaderboard-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaderboard-bar-wrap { background: var(--border); border-radius: 20px; height: 6px; margin-top: 4px; overflow: hidden; }
.leaderboard-bar { background: var(--brand-gradient); height: 100%; border-radius: 20px; }
.leaderboard-value { font-size: 12.5px; font-weight: 700; color: var(--maroon); white-space: nowrap; margin-left: 8px; }

.activity-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-icon { width: 30px; height: 30px; border-radius: 50%; background: #EFE3EC; color: var(--maroon); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
.activity-body { flex: 1; min-width: 0; }
.activity-desc { font-size: 12.5px; color: var(--ink); }
.activity-desc strong { font-weight: 600; }
.activity-time { font-size: 11px; color: var(--muted); margin-top: 2px; }

.funnel-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12.5px; }
.funnel-label { width: 110px; flex-shrink: 0; color: var(--ink); }
.funnel-bar-wrap { flex: 1; background: var(--border); border-radius: 20px; height: 14px; overflow: hidden; }
.funnel-bar { background: var(--brand-gradient); height: 100%; border-radius: 20px; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 1px 2px rgba(115,6,63,0.25); }
.funnel-count { width: 30px; text-align: right; font-weight: 700; color: var(--maroon); flex-shrink: 0; }

.forecast-strip { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.forecast-pill { background: #FAF8F9; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; flex: 1; min-width: 110px; text-align: center; }
.forecast-pill .fp-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; }
.forecast-pill .fp-value { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 2px; }

@media (max-width: 640px) {
  .pipeline-board { grid-template-columns: repeat(5, 160px); }
}

/* ============================================================================
   DASHBOARD MODERNIZATION — Sep 2026
   Scoped to new classes only (stat-card-modern, chart-grid-main, pipeline-board-
   compact, forecast-layout, nav-group…) so nothing on other pages that still uses
   the plain .stat-card / .chart-grid / .pipeline-board / .forecast-strip markup
   is affected.
   ============================================================================ */

/* -- KPI cards with a small icon badge, brand-colored (no rainbow gradients) -- */
.stat-card-modern { display: flex; align-items: center; gap: 12px; }
.stat-icon-badge { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon-badge svg { stroke-width: 1.6; }
.badge-maroon { background: rgba(115,6,63,0.10); color: var(--maroon); }
.badge-teal   { background: rgba(23,163,152,0.12); color: var(--teal); }
.badge-gold   { background: rgba(201,162,39,0.14); color: var(--gold); }
.badge-red    { background: rgba(225,75,75,0.12); color: var(--red); }
.badge-grey   { background: rgba(154,139,147,0.14); color: var(--grey); }
.stat-card-text { min-width: 0; }
.dashboard-compact .stat-icon-badge { width: 32px; height: 32px; border-radius: 9px; }

/* -- Sales & Collections chart + Upcoming card share one row, no leftover gap -- */
.chart-grid-main { display: grid; grid-template-columns: 2.2fr 1fr; gap: 16px; align-items: stretch; }
.chart-grid-main-single { grid-template-columns: 1fr; }
.chart-canvas-wrap-tight { height: 190px; }
.dashboard-compact .chart-canvas-wrap-tight { height: 155px; }
.upcoming-card { display: flex; flex-direction: column; }
.upcoming-card h3 { display: flex; align-items: center; gap: 6px; }
.upcoming-card-cta { display: block; margin-top: auto; padding-top: 10px; }

/* -- Compact, analytics-style Quotation Pipeline: tighter cards + a colored top
   accent per stage instead of a plain grey box for every column. -- */
.pipeline-card { padding: 16px 18px; }
.pipeline-board-compact { gap: 10px; }
.pipeline-board-compact .pipeline-col { padding: 10px 11px; border-top: 3px solid var(--border); }
.pipeline-board-compact .pipeline-col-head { margin-bottom: 7px; padding-bottom: 6px; }
.pipeline-board-compact .pipeline-col-head .pc-title { font-size: 10.5px; }
.pipeline-board-compact .pipeline-col-total { font-size: 12px; margin-bottom: 7px; }
.pipeline-board-compact .pipeline-deal { padding: 7px 8px; margin-bottom: 6px; font-size: 11.5px; }
.pipeline-board-compact .pipeline-empty { padding: 4px 0; }
.pipeline-stage-draft    { border-top-color: var(--grey); }
.pipeline-stage-sent     { border-top-color: #3498db; }
.pipeline-stage-invoiced { border-top-color: var(--teal); }
.pipeline-stage-declined { border-top-color: var(--red); }
.pipeline-stage-expired  { border-top-color: var(--gold); }

/* -- Dynamic entrance: cards fade + slide in on load instead of just appearing,
   staggered slightly so the dashboard feels alive rather than static. Respects
   users who've asked their OS/browser to reduce motion. -- */
@media (prefers-reduced-motion: no-preference) {
  .stat-card, .chart-card { animation: dashFadeIn 0.4s ease-out both; }
  .stat-row .stat-card:nth-child(1) { animation-delay: 0.02s; }
  .stat-row .stat-card:nth-child(2) { animation-delay: 0.06s; }
  .stat-row .stat-card:nth-child(3) { animation-delay: 0.10s; }
  .stat-row .stat-card:nth-child(4) { animation-delay: 0.14s; }
  .stat-row .stat-card:nth-child(5) { animation-delay: 0.18s; }
  .stat-row .stat-card:nth-child(6) { animation-delay: 0.22s; }
  .stat-row .stat-card:nth-child(7) { animation-delay: 0.26s; }
  .stat-row .stat-card:nth-child(8) { animation-delay: 0.30s; }
  .stat-row .stat-card:nth-child(n+9) { animation-delay: 0.34s; }
}
@keyframes dashFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* -- Quotation Pipeline: horizontal bar chart + a compact chip row (count per
   stage) instead of 5 boxy columns — same info, far less vertical space. -- */
.pipeline-chart-wrap { height: 190px; margin-bottom: 14px; }
.dashboard-compact .pipeline-chart-wrap { height: 165px; }
.pipeline-chip-row { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; border-top: 1px solid var(--border); }
.pipeline-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pc-chip-label { font-weight: 500; }
.pc-chip-count { font-weight: 700; color: var(--ink); }

/* -- Revenue Forecast: compact card — two small pills in a row, then a shorter
   chart underneath. Narrower and lower than the old side-by-side layout. -- */
.forecast-card .forecast-pill-row { display: flex; gap: 10px; margin-bottom: 12px; }
.forecast-card .forecast-pill { flex: 1; display: flex; align-items: center; gap: 8px; text-align: left; margin: 0; min-width: 0; padding: 8px 10px; }
.fp-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fp-label { font-size: 10px; }
.fp-value { font-size: 13.5px; }
.forecast-note { font-size: 11px; color: var(--muted); margin: 8px 0 0; line-height: 1.4; }
.forecast-canvas-wrap { height: 150px; }
.dashboard-compact .forecast-canvas-wrap { height: 130px; }

/* -- Modern "mini list" feed pattern, replaces plain <table> lists on the
   Dashboard (My Tasks, My Meetings, Due for Follow-up).
   Each row is a compact icon + text + amount/status line instead of a table row,
   so short lists don't look like a half-empty spreadsheet. -- */
.mini-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
.mini-list-head h3, .mini-list-head h4 { margin: 0; font-size: 15px; }
.mini-list { display: flex; flex-direction: column; gap: 4px; }
.mini-list-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; text-decoration: none; color: inherit; transition: background 0.12s ease; }
a.mini-list-row:hover { background: var(--bg-hover, #F5F1F3); }
.mlr-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mlr-body { min-width: 0; flex: 1; }
.mlr-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlr-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlr-end { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.mlr-amt { font-size: 12.5px; font-weight: 600; }
.mini-list-empty { padding: 14px 6px; color: var(--muted); font-size: 12.5px; }

/* -- My Work: ONE compact card with three stacked mini-sections (was three
   separate equal-width cards spanning the full row — far too wide/heavy). Each
   block gets a divider and its own small heading + "See all" link. -- */
.my-work-card .my-work-block { padding: 12px 0; }
.my-work-card .my-work-block + .my-work-block { border-top: 1px solid var(--border); }
.my-work-card .my-work-block:first-of-type { padding-top: 0; }
.mwb-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.mwb-head .see-all { font-size: 11.5px; }
.my-work-card .mini-list-row, .my-work-card .mini-list-empty { padding-left: 0; padding-right: 0; }

/* -- Collapsible sidebar groups (Workflow/Sales/Finance/Operations/Admin/HRMS) --
   Each group is a header button (icon + label + chevron) that toggles a body of
   nav links. The group containing the current page auto-expands via the "open"
   class rendered server-side; the JS toggle + localStorage only remembers manual
   choices after that. */
.nav-group { display: flex; flex-direction: column; }
.nav-group-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: #FFFFFF; background: none; border: none; width: 100%; cursor: pointer; text-align: left; }
.nav-group-header:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-group-header .nav-group-arrow { margin-left: auto; font-size: 9px; transition: transform 0.18s ease; flex-shrink: 0; opacity: 0.7; }
.nav-group.open .nav-group-header .nav-group-arrow { transform: rotate(90deg); }
.nav-group-body { display: flex; flex-direction: column; gap: 2px; max-height: 0; overflow: hidden; transition: max-height 0.22s ease; padding-left: 4px; }
.nav-group.open .nav-group-body { max-height: 800px; }
.nav-group-body .nav-item { font-size: 13.5px; font-weight: 500; }
.nav-bullet { font-size: 16px !important; line-height: 1; opacity: 0.55; }