:root {
    --side-width: 260px;
    --blue: #4f7df3;
    --blue-dark: #28428e;
    --muted: #64748b;
    --line: #e7edf5;
    --bg: #ffffff;
    --soft: #f8fafc;
    --text: #0f172a;
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--text); font-size: 14px; font-family: Inter, Arial, Helvetica, sans-serif; }
a { text-decoration: none; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--side-width); border-right: 1px solid #d8dee8; background: #fff; position: fixed; inset: 0 auto 0 0; overflow-y: auto; }
.brand-box { height: 58px; display: flex; align-items: center; padding-left: 38px; border-bottom: 1px solid var(--line); }
.brand-logo { display: inline-block; background: #5c8df6; color: #fff; letter-spacing: 3px; line-height: 18px; font-family: Georgia, serif; font-size: 17px; padding: 2px 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.menu { padding: 14px 18px 28px; }
.menu-section { color: #0a1a44; font-weight: 700; font-size: 13px; margin: 16px 0 10px; }
.menu-link, .menu-group > summary { display: flex; align-items: center; gap: 12px; color: #42526e; padding: 9px 8px; border-radius: 8px; cursor: pointer; list-style: none; }
.menu-link:hover, .menu-group > summary:hover, .menu-link.active { color: #2563eb; background: #f6f9ff; }
.menu-link i, .menu-group i { width: 16px; color: #64748b; }
.menu-group { border-bottom: 1px solid #f0f3f7; padding-bottom: 5px; }
.menu-group summary::-webkit-details-marker { display: none; }
.menu-group > summary::after { content: '\f078'; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; font-size: 10px; color: #9aa4b2; }
.menu-group[open] > summary::after { transform: rotate(180deg); }
.menu-group a { display: block; padding: 8px 0 8px 36px; color: #42526e; }
.menu-group a:hover { color: #2563eb; }
.main-area { margin-left: var(--side-width); min-height: 100vh; width: calc(100% - var(--side-width)); }
.topbar-app { height: 58px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 28px 0 36px; gap: 20px; background: #fff; position: sticky; top: 0; z-index: 10; }
.search-pill { width: 220px; height: 34px; border-radius: 20px; background: #f4f5f7; color: #64748b; display: flex; align-items: center; gap: 11px; padding-left: 15px; }
.org-title { margin-left: auto; font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.logout-icon { color: #64748b; font-size: 16px; }
.content-area { padding: 22px 26px 36px; }
.page-title-strip { background: var(--blue); color: #fff; font-size: 18px; font-weight: 700; padding: 12px 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.panel-card { border: 1px solid #d6dce6; border-radius: 6px; background: #fff; padding: 16px; margin-bottom: 18px; }
.dashboard-card { border: 1px solid #e2e8f0; border-radius: 4px; background: #fff; box-shadow: 0 4px 16px rgba(15, 23, 42, .10); margin-bottom: 16px; }
.dashboard-card .card-head { background: #fbfcfe; border-bottom: 1px solid #e6edf5; padding: 12px 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.dashboard-card .card-body { padding: 16px; min-height: 180px; }
.form-label { color: #0f172a; margin-bottom: 7px; }
.required::after { content: '*'; color: #dc2626; margin-left: 2px; }
.form-control, .form-select { border-color: #d8dee8; border-radius: 5px; height: 39px; font-size: 14px; }
textarea.form-control { height: auto; }
.btn-primary, .btn-info { background: #3498db; border-color: #3498db; }
.btn-gradient { background: linear-gradient(135deg, #32b7f5, #525cf5); color: #fff; border: 0; box-shadow: 0 3px 8px rgba(37, 99, 235, .35); }
.btn-danger-soft { background: #f00; color:#fff; border:0; box-shadow: 0 4px 10px rgba(220, 38, 38, .35); }
.table { font-size: 13px; }
.table thead th { background: #fafbfe; font-weight: 700; color: #111827; border-bottom: 1px solid #d8dee8; padding: 13px 14px; white-space: nowrap; }
.table tbody td { padding: 13px 14px; color: #52657a; vertical-align: middle; }
.table .total-row td { background: #eeeeef; color: #111827; font-weight: 700; }
.table-scroll-x { overflow-x: auto; border-bottom: 1px solid #d8dee8; }
.status-dot { display:inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.dot-closed { background:#697986; } .dot-not { background:#5271ff; } .dot-complete { background:#1f9d55; } .dot-p2 { background:#f5b400; } .dot-p7 { background:#e73946; } .dot-old { background:#1f2937; }
.legend-bar { border:1px solid #d8dee8; border-radius:6px; padding: 8px; text-align:center; margin:18px 0 8px; }
.stat-box { box-shadow: 0 7px 18px rgba(15,23,42,.2); border-radius:4px; padding: 14px 18px; min-width: 240px; }
.status-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align:center; gap: 20px; margin-top: 12px; }
.status-title { font-size: 28px; font-weight: 700; }
.modal-header-blue { background: #3498db; color: #fff; }
.modal-header-primary { background: #4f7df3; color: #fff; }
.btn-close-whiteish { filter: invert(1) grayscale(100%) brightness(200%); }
.toggle { width: 48px; height: 24px; background:#c9c9c9; border-radius:999px; display:inline-flex; align-items:center; padding:2px; }
.toggle::after { content:""; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.toggle.on { background:#3498db; justify-content:flex-end; }
.checkbox-row { display:flex; flex-wrap:wrap; gap: 14px; }
.small-muted { font-size:12px; color: #64748b; }
.no-data { color:#c4cbd5; text-align:center; padding:40px 0; }
.pagination-mini { display:flex; align-items:center; gap:12px; justify-content:flex-end; color:#64748b; }
.page-pill { background:#3498db; color:#fff; border-radius:5px; padding:7px 11px; }
.login-body { min-height:100vh; display:grid; place-items:center; background: linear-gradient(135deg, #eef4ff, #f8fbff); }
.auth-box { width: 380px; border-radius:8px; background:#fff; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding:34px; }
@media (max-width: 900px) {
    :root { --side-width: 220px; }
    .status-cols { grid-template-columns: 1fr; }
    .org-title { font-size: 13px; }
}