:root{
  --bg:#f4f6f8; --panel:#ffffff; --border:#e2e5e9; --text:#1f2937;
  --muted:#6b7280; --primary:#2563eb; --primary-dark:#1d4ed8;
  --danger:#dc2626; --success:#16a34a; --warn:#d97706;
}
body.dark{
  --bg:#0f1520; --panel:#171f2e; --border:#2a3547; --text:#e5e9f0;
  --muted:#8b96a8; --primary:#3b82f6; --primary-dark:#60a5fa;
  --danger:#f87171; --success:#4ade80; --warn:#fbbf24;
}
body.dark .topnav{background:#0a0e16;}
body.dark input[type=text],body.dark input[type=email],body.dark input[type=password],
body.dark input[type=tel],body.dark input[type=date],body.dark input[type=datetime-local],
body.dark select,body.dark textarea,body.dark input[type=file]{
  background:#1c2536;color:var(--text);border-color:var(--border);
}
body.dark .btn.secondary{background:#1c2536;color:var(--text);}
body.dark .badge.active{background:#0f3320;color:#4ade80;}
body.dark .badge.inactive{background:#26303f;color:var(--muted);}
body.dark .badge.qb{background:#0c2b3d;color:#7dd3fc;}
body.dark .flash.success{background:#0f3320;color:#4ade80;}
body.dark .flash.error{background:#3a1414;color:#f87171;}
body.dark .flash.info{background:#0c2b3d;color:#7dd3fc;}
body.dark tr:hover{background:#1c2536;}
body.dark .calendar td.today{background:#132039;}
body.dark .login-box{background:var(--panel);}
body.dark .autocomplete-list{background:var(--panel);border-color:var(--border);}
body.dark .autocomplete-list li:hover{background:#1c2536;}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
.topnav{background:#111827;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:56px;}
.topnav .brand{font-weight:700;font-size:18px;color:#fff;}
.topnav .links{display:flex;gap:4px;flex-wrap:wrap;}
.topnav .links a{color:#d1d5db;padding:8px 12px;border-radius:6px;font-size:14px;}
.topnav .links a:hover, .topnav .links a.active{background:#1f2937;color:#fff;text-decoration:none;}
.topnav .user{color:#9ca3af;font-size:13px;display:flex;align-items:center;gap:12px;}
.container{max-width:1100px;margin:24px auto;padding:0 20px;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:20px;}
h1{font-size:22px;margin:0 0 16px;}
h2{font-size:18px;margin:0 0 12px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:4px;}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=datetime-local],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:6px;font-size:14px;margin-bottom:14px;background:#fff;color:var(--text);
}
textarea{min-height:80px;resize:vertical;}
.btn{display:inline-block;padding:9px 16px;border-radius:6px;border:1px solid var(--primary);background:var(--primary);color:#fff;font-size:14px;cursor:pointer;}
.btn:hover{background:var(--primary-dark);text-decoration:none;}
.btn.secondary{background:#fff;color:var(--text);border-color:var(--border);}
.btn.secondary:hover{background:#f3f4f6;}
.btn.danger{background:var(--danger);border-color:var(--danger);}
.btn.danger:hover{background:#b91c1c;}
.btn.small{padding:5px 10px;font-size:12px;}
table{width:100%;border-collapse:collapse;}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);font-size:14px;}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
tr:hover{background:#fafbfc;}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;}
.badge.active{background:#dcfce7;color:#166534;}
.badge.inactive{background:#f3f4f6;color:#6b7280;}
.badge.qb{background:#e0f2fe;color:#075985;}
.flash{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14px;}
.flash.success{background:#dcfce7;color:#166534;}
.flash.error{background:#fee2e2;color:#991b1b;}
.flash.info{background:#dbeafe;color:#1e40af;}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px;flex-wrap:wrap;}
.toolbar .search{flex:1;max-width:320px;}
.pill-tabs{display:flex;gap:6px;margin-bottom:14px;}
.pill-tabs a{padding:6px 14px;border-radius:20px;font-size:13px;border:1px solid var(--border);color:var(--text);}
.pill-tabs a.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.note{border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:8px;font-size:14px;background:#fff;}
.note .meta{color:var(--muted);font-size:12px;margin-bottom:4px;}
.calendar{width:100%;border-collapse:collapse;}
.calendar th{text-align:center;padding:8px;background:#f9fafb;}
.calendar td{border:1px solid var(--border);vertical-align:top;height:90px;width:14.28%;padding:4px;font-size:12px;}
.calendar td.today{background:#eff6ff;border:2px solid var(--primary);}
.calendar td .daynum{font-weight:700;color:var(--muted);margin-bottom:4px;}
.calendar .evt{display:block;background:var(--primary);color:#fff;border-radius:4px;padding:1px 4px;margin-bottom:2px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-controls{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.cal-controls h2{margin:0;min-width:180px;text-align:center;}
.muted{color:var(--muted);}
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.login-box{width:340px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:28px;}
.login-box h1{text-align:center;}
form.inline{display:inline;}
.actions a, .actions button{margin-right:6px;}

/* Added for notifications search + collapsible email settings */
.filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;}
.filter-grid label{margin-bottom:4px;}
.filter-grid input, .filter-grid select{margin-bottom:0;}
details.card summary::-webkit-details-marker{display:none;}
details.card summary::after{content:'▸';font-size:14px;color:var(--muted);transition:transform .15s;margin-left:10px;}
details.card[open] summary::after{transform:rotate(90deg);}
details.card summary:hover{background:#fafbfc;}
.btn.success{background:var(--success);border-color:var(--success);}
.btn.success:hover{background:#15803d;}
@media (max-width:700px){.filter-grid{grid-template-columns:1fr;}}

/* Customer autocomplete (Notifications page related-customer field) */
.autocomplete-wrap{position:relative;}
.autocomplete-list{list-style:none;margin:0;padding:4px;position:absolute;top:100%;left:0;right:0;
  background:#fff;border:1px solid var(--border);border-radius:8px;max-height:220px;overflow-y:auto;
  z-index:20;box-shadow:0 4px 12px rgba(0,0,0,.08);}
.autocomplete-list li{padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px;}
.autocomplete-list li:hover, .autocomplete-list li.active{background:#eff6ff;}
.autocomplete-list.hidden{display:none;}

/* Toggle switch, used for dark mode */
.switch{position:relative;display:inline-block;width:44px;height:24px;vertical-align:middle;}
.switch input{opacity:0;width:0;height:0;}
.switch-track{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:24px;transition:.15s;}
.switch-track::before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.15s;}
.switch input:checked + .switch-track{background:var(--primary);}
.switch input:checked + .switch-track::before{transform:translateX(20px);}