:root {
    color-scheme: light;
    --navy: #1c365f;
    --navy-deep: #182f53;
    --green: #0e795e;
    --green-bright: #159570;
    --orange: #e97148;
    --ink: #1b2a3d;
    --muted: #7d8a9b;
    --line: #e9edf1;
    --canvas: #f5f7f8;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; }
.brand-mark svg { width: 100%; height: 100%; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: Manrope, sans-serif; font-size: 15px; letter-spacing: .075em; line-height: 1.25; }
.brand small { margin-top: 3px; font-size: 9px; font-weight: 600; letter-spacing: .19em; }
.brand-light { color: #fff; }
.brand-light .brand-mark { color: #80d3ad; }
.brand-dark { color: var(--navy); }
.brand-dark .brand-mark { color: var(--green); }

/* Login */
.login-page { min-height: 100vh; background: #f8faf9; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, .92fr) minmax(520px, 1.08fr); }
.login-story { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; padding: 38px clamp(36px, 6vw, 88px) 30px; color: #fff; background: #1d385f; }
.login-story::before, .login-story::after { position: absolute; content: ""; pointer-events: none; border: 1px solid rgba(255,255,255,.075); border-radius: 50%; }
.login-story::before { width: 590px; height: 590px; right: -345px; top: 88px; }
.login-story::after { width: 450px; height: 450px; right: -275px; top: 158px; }
.login-story > * { position: relative; z-index: 1; }
.story-copy { margin-top: clamp(72px, 11vh, 126px); max-width: 470px; }
.eyebrow { color: #78889a; display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.login-story .eyebrow { color: #a7bfd1; }
.eyebrow-dot, .panel-live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #44bd88; box-shadow: 0 0 0 3px rgba(68,189,136,.12); }
.story-copy h1 { margin: 19px 0 15px; font-family: Manrope, sans-serif; font-size: clamp(37px, 4vw, 53px); font-weight: 700; line-height: 1.16; letter-spacing: -.045em; }
.story-copy h1 span { color: #83d2ad; }
.story-copy p { max-width: 385px; margin: 0; color: #b6c4d2; font-size: 14px; line-height: 1.8; }
.story-preview { max-width: 480px; width: 100%; margin-top: auto; margin-bottom: 27px; padding: 16px 18px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(255,255,255,.065); box-shadow: 0 20px 50px rgba(7,20,39,.14); backdrop-filter: blur(8px); }
.preview-topline, .preview-foot { display: flex; justify-content: space-between; align-items: center; }
.preview-topline { color: #c4d0dc; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.preview-live { color: #9de3c0; display: inline-flex; align-items: center; gap: 6px; font-size: 8px; }
.preview-live i { width: 5px; height: 5px; border-radius: 50%; background: #58d399; }
.preview-map { position: relative; height: 125px; overflow: hidden; margin: 13px 0 11px; border-radius: 9px; background-color: #24466a; background-image: linear-gradient(rgba(196,227,209,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(196,227,209,.075) 1px, transparent 1px); background-size: 30px 30px; }
.preview-road { position: absolute; height: 5px; border: 1px solid rgba(200,225,211,.23); border-width: 1px 0; border-radius: 50%; background: rgba(194,221,205,.12); transform: rotate(-24deg); }
.road-one { width: 120%; top: 40%; left: -9%; }
.road-two { width: 96%; top: 72%; left: 3%; transform: rotate(20deg); }
.road-three { width: 82%; top: 13%; left: 20%; transform: rotate(72deg); }
.map-pin { position: absolute; width: 17px; height: 17px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #11795d; font-size: 9px; line-height: 1; box-shadow: 0 2px 6px #142f52; }
.pin-one { top: 19%; left: 19%; }.pin-two { top: 54%; left: 39%; }.pin-three { top: 26%; left: 65%; }.pin-four { top: 70%; left: 75%; }.pin-five { top: 61%; left: 88%; }
.preview-foot { color: #c2cfdb; font-size: 9px; }
.preview-foot > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #0f8062; }
.story-footer { color: #a9bacb; font-size: 10px; }
.story-footer span { margin-right: 7px; color: #88d0ab; font-size: 15px; }
.login-panel { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 42px clamp(35px, 6vw, 92px) 24px; background: #fcfdfc; }
.login-mobile-brand { display: none; }
.login-content { width: 100%; max-width: 410px; }
.login-heading { margin-bottom: 33px; }
.welcome-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid #e6eee8; border-radius: 12px; color: var(--green); background: #f1f8f3; }
.welcome-icon svg { width: 23px; height: 23px; }
.login-heading .eyebrow { color: var(--green); }
.login-heading h2 { margin: 11px 0 5px; font-family: Manrope, sans-serif; font-size: 30px; letter-spacing: -.045em; }
.login-heading p { margin: 0; color: #818d9a; font-size: 13px; }
.login-form label { display: block; margin-bottom: 8px; color: #344356; font-size: 11px; font-weight: 700; }
.input-wrap { height: 47px; display: flex; align-items: center; gap: 11px; padding: 0 13px; border: 1px solid #e3e8e8; border-radius: 7px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.input-wrap:focus-within { border-color: #54a587; box-shadow: 0 0 0 3px rgba(37,131,97,.09); }
.input-wrap > svg { width: 17px; height: 17px; flex: 0 0 auto; color: #98a4af; }
.input-wrap input { width: 100%; height: 100%; padding: 0; outline: 0; border: 0; color: #25364a; background: transparent; font-size: 12px; }
.input-wrap input::placeholder { color: #aab3bb; }
.input-error { border-color: #d97764; }
.form-error { margin: 6px 0 0; color: #c04c3a; font-size: 11px; }
.password-label { display: flex; justify-content: space-between; align-items: center; margin-top: 19px; }
.secure-label { display: inline-flex; align-items: center; gap: 4px; color: #96a19d; font-size: 9px; }
.secure-label svg { width: 13px; height: 13px; }
.sign-in-button { width: 100%; height: 47px; display: flex; justify-content: center; align-items: center; gap: 11px; margin-top: 24px; border: 0; border-radius: 7px; color: #fff; background: #13795c; cursor: pointer; font-size: 12px; font-weight: 700; transition: background .2s, transform .2s; }
.sign-in-button:hover { transform: translateY(-1px); background: #0f694f; }
.sign-in-button span { font-size: 17px; line-height: 1; }
.demo-credentials { display: flex; gap: 11px; margin-top: 24px; padding: 13px 14px; border: 1px solid #e5eee7; border-radius: 8px; background: #f4f8f4; }
.demo-icon { width: 17px; height: 17px; display: grid; flex: 0 0 auto; place-items: center; margin-top: 1px; border-radius: 50%; color: #fff; background: #478d6f; font-family: Georgia, serif; font-size: 11px; font-style: italic; }
.demo-credentials strong { color: #365447; font-size: 10px; }
.demo-credentials p { margin: 4px 0 0; color: #728078; font-size: 10px; line-height: 1.8; }
.demo-credentials code { color: #476253; font-family: "DM Sans", sans-serif; font-weight: 600; }
.login-privacy { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 25px 0 0; color: #9aa49f; font-size: 9px; }
.login-privacy svg { width: 14px; height: 14px; color: #72a58c; }
.login-footer { width: 100%; max-width: 910px; display: flex; justify-content: space-between; gap: 15px; margin-top: auto; padding-top: 28px; color: #a1aaa5; font-size: 9px; }
.login-footer a { color: #5b806d; font-weight: 600; }

/* Dashboard */
.dashboard-page { min-height: 100vh; background: var(--canvas); }
.dashboard-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; z-index: 5; top: 0; bottom: 0; left: 0; width: 242px; display: flex; flex-direction: column; padding: 29px 16px 17px; color: #d6e0ed; background: var(--navy); }
.sidebar-brand { padding: 0 10px; }
.sidebar-brand .brand-mark { width: 38px; height: 38px; }
.sidebar-label { margin: 49px 12px 12px; color: #8096b2; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.side-nav { display: grid; gap: 5px; }
.nav-link { position: relative; min-height: 43px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 7px; color: #b7c5d6; font-size: 11px; font-weight: 500; transition: background .18s, color .18s; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-link.active { color: #fff; background: #2b4d79; }
.nav-link.active::before { position: absolute; top: 9px; bottom: 9px; left: -16px; width: 3px; border-radius: 0 3px 3px 0; background: #37ad80; content: ""; }
.nav-icon { width: 16px; height: 16px; display: inline-flex; flex: 0 0 auto; }
.nav-icon svg { width: 100%; height: 100%; }
.nav-live { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #56ca96; box-shadow: 0 0 0 3px rgba(86,202,150,.13); }
.complaint-count { display: grid; width: 20px; height: 20px; place-items: center; margin-left: auto; border-radius: 6px; color: #efad8d; background: rgba(239,120,79,.14); font-size: 9px; font-weight: 700; }
.sidebar-bottom { margin-top: auto; }
.sidebar-help { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; padding: 12px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.045); }
.help-icon { width: 22px; height: 22px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 7px; color: #addcc4; background: rgba(87,178,132,.16); font-size: 12px; font-weight: 700; }
.sidebar-help strong, .sidebar-help small, .account-info strong, .account-info small { display: block; }
.sidebar-help strong { color: #e0e8f0; font-size: 9px; }
.sidebar-help small { margin-top: 3px; color: #91a3b8; font-size: 8px; }
.help-arrow { margin-left: auto; color: #90a5bb; font-size: 12px; }
.sidebar-account { display: flex; align-items: center; gap: 9px; padding: 13px 2px 1px; border-top: 1px solid rgba(255,255,255,.1); }
.avatar { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; color: #d5f1e2; background: #315783; font-size: 9px; font-weight: 700; }
.account-info { min-width: 0; }
.account-info strong { overflow: hidden; color: #e8edf4; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-info small { margin-top: 4px; color: #91a4bb; font-size: 8px; }
.sidebar-account form { margin-left: auto; }
.logout-button { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; color: #9cb0c4; background: transparent; cursor: pointer; }
.logout-button:hover { color: #fff; background: rgba(255,255,255,.1); }
.logout-button svg { width: 15px; height: 15px; }
.dashboard-main { width: calc(100% - 242px); min-height: 100vh; margin-left: 242px; }
.topbar { height: 71px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid #e9edf0; background: #fff; }
.topbar-title { display: flex; align-items: center; gap: 10px; }
.crumb { color: #97a2af; font-size: 10px; }
.crumb-divider { color: #c5ccd3; font-size: 11px; }
.topbar-title h1 { margin: 0; color: #213146; font-family: Manrope, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -.015em; }
.topbar-actions { display: flex; align-items: center; gap: 20px; }
.today-date { display: inline-flex; align-items: center; gap: 7px; color: #788596; font-size: 9px; }
.today-date svg { width: 15px; height: 15px; }
.topbar-divider { width: 1px; height: 28px; background: #e8ecef; }
.topbar-profile { display: flex; align-items: center; gap: 8px; }
.avatar-small { width: 28px; height: 28px; color: #236449; border: 0; background: #e3f1e9; }
.topbar-profile strong, .topbar-profile small { display: block; }
.topbar-profile strong { color: #354458; font-size: 9px; }
.topbar-profile small { margin-top: 3px; color: #99a3ae; font-size: 8px; }
.notification-button { position: relative; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #e9edf0; border-radius: 7px; color: #728094; background: #fff; cursor: pointer; }
.notification-button svg { width: 15px; height: 15px; }
.notification-button i { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border: 1px solid white; border-radius: 50%; background: #ed825d; }
.dashboard-content { max-width: 1420px; margin: 0 auto; padding: 28px 36px 20px; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-intro .eyebrow { font-size: 8px; }
.page-intro h2 { margin: 7px 0 3px; color: #1e2d40; font-family: Manrope, sans-serif; font-size: 21px; letter-spacing: -.035em; }
.page-intro p { margin: 0; color: #8995a2; font-size: 10px; }
.date-filter { height: 33px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #e3e8ea; border-radius: 6px; color: #566578; background: #fff; cursor: pointer; font-size: 9px; }
.date-filter svg { width: 14px; height: 14px; color: #7e8d9c; }
.date-filter span { margin-left: 4px; color: #98a4af; font-size: 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-card { min-width: 0; position: relative; overflow: hidden; padding: 15px 16px 12px; border: 1px solid #e8edf0; border-radius: 9px; background: #fff; box-shadow: 0 2px 5px rgba(22,39,56,.018); }
.stat-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--green); content: ""; }
.stat-navy::before { background: var(--navy); }.stat-orange::before { background: var(--orange); }
.stat-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #8994a1; font-size: 9px; }
.stat-icon { width: 25px; height: 25px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 7px; color: #218263; background: #eff7f1; }
.stat-icon svg { width: 15px; height: 15px; }
.stat-navy .stat-icon { color: #37577c; background: #f0f3f8; }.stat-orange .stat-icon { color: #dc704b; background: #fff4ef; }
.stat-value { margin-top: 8px; color: #087354; font-family: Manrope, sans-serif; font-size: clamp(20px, 2vw, 25px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.stat-navy .stat-value { color: var(--navy); }.stat-orange .stat-value { color: var(--orange); }
.stat-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.stat-trend { color: #7f9b8b; font-size: 8px; }
.trend-warn { color: #c98b70; }
.stat-spark { height: 17px; display: flex; align-items: flex-end; gap: 2px; opacity: .8; }
.stat-spark i { width: 3px; height: 7px; border-radius: 2px 2px 0 0; background: #8bc6a7; }
.stat-spark i:nth-child(2) { height: 11px; }.stat-spark i:nth-child(3) { height: 8px; }.stat-spark i:nth-child(4) { height: 14px; }.stat-spark i:nth-child(5) { height: 10px; }.stat-spark i:nth-child(6) { height: 16px; }.stat-spark i:nth-child(7) { height: 12px; }
.stat-navy .stat-spark i { background: #9aacc4; }.stat-orange .stat-spark i { background: #edb39c; }
.dashboard-panels { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(310px, .94fr); gap: 16px; margin-top: 16px; align-items: stretch; }
.panel { min-width: 0; padding: 17px 18px 15px; border: 1px solid #e8edf0; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(22,39,56,.02); }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-title-row { display: flex; align-items: center; gap: 8px; }
.panel-live-dot { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(68,189,136,.13); }
.panel-header h3 { margin: 0; color: #27374b; font-family: Manrope, sans-serif; font-size: 11px; font-weight: 700; }
.panel-header p { margin: 5px 0 0; color: #95a0ac; font-size: 9px; }
.icon-button { width: 24px; height: 24px; margin: -4px -5px 0 0; border: 0; border-radius: 5px; color: #8492a1; background: transparent; cursor: pointer; font-size: 18px; letter-spacing: 1px; line-height: 12px; }
.icon-button:hover { background: #f3f6f7; }
.tracking-panel { display: flex; flex-direction: column; }
.tracking-map { position: relative; flex: 1; min-height: 263px; overflow: hidden; margin-top: 15px; border: 1px solid #e5eee8; border-radius: 8px; background-color: #e9f1eb; background-image: linear-gradient(rgba(70,126,95,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(70,126,95,.04) 1px, transparent 1px); background-size: 31px 31px; }
.map-grid { position: absolute; inset: 14px 14px 25px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); gap: 8px; }
.map-block { border: 1px solid rgba(85,145,111,.035); border-radius: 5px; background: #d5e7db; }
.map-block:nth-child(5n + 2), .map-block:nth-child(5n + 4) { background: #d1e4d7; }
.vehicle-marker { position: absolute; z-index: 1; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: var(--navy); background: #fff; box-shadow: 0 2px 7px rgba(20,48,72,.19); transform: translate(-50%, -50%); }
.vehicle-marker svg { width: 12px; height: 12px; }
.marker-delayed { color: var(--orange); }
.map-scale { position: absolute; right: 12px; bottom: 9px; display: flex; align-items: center; gap: 5px; color: #789080; font-size: 7px; }
.map-scale i { width: 22px; height: 4px; border: 1px solid #8eac98; border-top: 0; }
.map-legend { display: flex; align-items: center; gap: 17px; margin-top: 12px; color: #81908d; font-size: 8px; }
.map-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend .legend-dot { width: 7px; height: 7px; }.map-legend .legend-orange { background: var(--orange); }
.map-updated { margin-left: auto; color: #a0aaa8; font-size: 7px; }
.wards-panel { display: flex; flex-direction: column; }
.wards-panel .panel-header h3 { font-size: 11px; }
.ward-table-wrap { width: 100%; overflow-x: auto; }
.ward-table { width: 100%; margin-top: 15px; border-collapse: collapse; text-align: left; white-space: nowrap; }
.ward-table th { padding: 0 0 9px; border-bottom: 1px solid #e9edf0; color: #9aa4ae; font-size: 8px; font-weight: 600; }
.ward-table th:not(:first-child), .ward-table td:not(:first-child) { text-align: right; }
.ward-table td { padding: 10px 0; border-bottom: 1px solid #f0f2f4; color: #546174; font-size: 9px; }
.ward-table tbody tr:last-child td { border-bottom: 0; }
.ward-name { display: inline-flex; align-items: center; gap: 7px; color: #354459; font-weight: 600; }
.ward-name i { width: 5px; height: 5px; border-radius: 2px; background: #a8c9b2; }
.collection-rate { color: #0b9466; font-weight: 700; }
.collection-rate.rate-mid { color: #c08727; }.collection-rate.rate-low { color: #e67750; }
.view-all-link { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; color: #338566; font-size: 8px; font-weight: 600; }
.view-all-link span { font-size: 13px; }
.dashboard-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 17px; color: #a0a9b2; font-size: 8px; }
.dashboard-footer i { margin: 0 4px; font-style: normal; }
.dashboard-footer > span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.footer-status { width: 6px; height: 6px; border-radius: 50%; background: #35a878; }

@media (min-width: 1500px) {
    .dashboard-content { padding-top: 38px; }
    .stats-grid { gap: 18px; }
    .stat-card { padding: 18px 19px 15px; }
    .dashboard-panels { gap: 20px; margin-top: 20px; }
    .tracking-map { min-height: 360px; }
    .panel { padding: 20px 21px 17px; }
    .ward-table td { padding: 13px 0; }
}

@media (max-width: 1100px) {
    .sidebar { width: 205px; }
    .dashboard-main { width: calc(100% - 205px); margin-left: 205px; }
    .topbar { padding: 0 23px; }
    .dashboard-content { padding: 24px 23px 18px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-panels { grid-template-columns: minmax(0, 1.35fr) minmax(290px, .95fr); gap: 12px; }
    .panel { padding: 15px 14px 13px; }
    .today-date { display: none; }
}

@media (max-width: 760px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-story { display: none; }
    .login-panel { min-height: 100vh; justify-content: flex-start; padding: 26px 23px 17px; }
    .login-mobile-brand { width: 100%; max-width: 410px; display: block; margin-bottom: clamp(45px, 12vh, 100px); }
    .login-content { margin: 0 auto; }
    .login-heading h2 { font-size: 27px; }
    .login-footer { max-width: 410px; flex-wrap: wrap; margin-top: auto; padding-top: 35px; }
    .sidebar { width: 64px; align-items: center; padding: 20px 8px 12px; }
    .sidebar-brand { padding: 0; }
    .sidebar-brand .brand-mark { width: 37px; height: 37px; }
    .sidebar-brand > span:last-child, .sidebar-label, .nav-link:not(.active)::after, .nav-link { font-size: 0; }
    .side-nav { width: 100%; margin-top: 43px; }
    .nav-link { width: 46px; height: 44px; min-height: 44px; justify-content: center; padding: 0; }
    .nav-link.active::before { left: -8px; }
    .nav-icon { width: 18px; height: 18px; }
    .nav-live, .complaint-count, .sidebar-help, .account-info, .sidebar-account form { display: none; }
    .sidebar-account { justify-content: center; width: 100%; }
    .dashboard-main { width: calc(100% - 64px); margin-left: 64px; }
    .topbar { height: 62px; padding: 0 16px; }
    .topbar-title { gap: 6px; }
    .crumb { display: none; }.crumb-divider { display: none; }
    .topbar-title h1 { font-size: 12px; }
    .topbar-actions { gap: 10px; }
    .topbar-profile > span:last-child { display: none; }
    .topbar-divider { display: none; }
    .dashboard-content { padding: 21px 15px 16px; }
    .page-intro { align-items: flex-start; }
    .page-intro h2 { font-size: 18px; }
    .page-intro p { max-width: 230px; line-height: 1.6; }
    .date-filter { flex: 0 0 auto; }
    .stats-grid { gap: 9px; }
    .stat-card { padding: 12px 11px 10px; }
    .stat-heading { font-size: 8px; }
    .stat-icon { width: 21px; height: 21px; }
    .stat-value { font-size: 20px; }
    .stat-trend { font-size: 7px; }
    .stat-spark { display: none; }
    .dashboard-panels { grid-template-columns: 1fr; }
    .tracking-map { min-height: 245px; }
    .wards-panel { min-height: 350px; }
}

@media (max-width: 420px) {
    .dashboard-content { padding-right: 11px; padding-left: 11px; }
    .topbar { padding: 0 10px; }
    .topbar-title h1 { font-size: 11px; }
    .notification-button { width: 27px; height: 27px; }
    .page-intro { gap: 8px; }
    .date-filter { gap: 5px; padding: 0 7px; font-size: 8px; }
    .stats-grid { gap: 7px; }
    .stat-card { padding-right: 8px; padding-left: 10px; }
    .stat-heading { align-items: flex-start; }
    .stat-heading > span:first-child { max-width: 75px; line-height: 1.45; }
    .stat-value { font-size: 18px; }
    .panel { padding-right: 11px; padding-left: 11px; }
    .map-legend { gap: 10px; font-size: 7px; }
    .map-updated { font-size: 6px; }
    .dashboard-footer { font-size: 7px; }
}

/* Monthly reports */
.reports-content { max-width: 1420px; margin: 0 auto; padding: 28px 30px 20px; }
.export-button { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 0; border-radius: 7px; color: #fff; background: #0e795e; cursor: pointer; font-size: 9px; font-weight: 700; transition: background .2s, transform .2s; }
.export-button:hover { transform: translateY(-1px); background: #0a684f; }
.export-button svg { width: 15px; height: 15px; }
.reports-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(240px, .94fr); gap: 14px; }
.report-panel { min-width: 0; padding: 17px 17px 15px; border: 1px solid #e6eaee; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(22,39,56,.02); }
.report-panel h2 { margin: 0; color: #27374b; font-family: Manrope, sans-serif; font-size: 11px; font-weight: 700; }
.efficiency-panel, .fleet-panel { min-height: 288px; }
.efficiency-chart { height: 220px; display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.chart-y-labels { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 4px 0 20px; color: #929eaa; font-size: 8px; }
.chart-plot { position: relative; min-width: 0; margin-bottom: 20px; }
.chart-guides { position: absolute; inset: 5px 0 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.chart-guides span { width: 100%; height: 1px; background: #ebeff2; }
.chart-bars { position: absolute; z-index: 1; inset: 6px 6px 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(7px, 2vw, 23px); align-items: end; }
.chart-bar-group { min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.chart-bar { width: min(100%, 34px); height: var(--bar-height); min-height: 12px; display: block; border-radius: 4px 4px 0 0; background: #219263; transition: filter .2s, transform .2s; transform-origin: bottom; }
.chart-bar-group:hover .chart-bar { filter: brightness(.92); transform: scaleX(1.06); }
.chart-bar.bar-mid { background: #ca8a1b; }.chart-bar.bar-low { background: #e97148; }
.chart-bar-label { position: absolute; bottom: -19px; color: #768495; font-size: 8px; }
.fleet-panel { display: flex; flex-direction: column; }
.fleet-chart { flex: 1; display: grid; place-items: center; padding: 8px 0 2px; }
.fleet-donut { width: 142px; height: 142px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#0e795e 0% 85.714%, #cc8c1c 85.714% 95.238%, #e97148 95.238% 100%); transform: rotate(0deg); }
.fleet-donut-center { width: 78px; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #fff; }
.fleet-donut-center strong { color: #26364a; font-family: Manrope, sans-serif; font-size: 19px; font-weight: 800; line-height: 1.1; }
.fleet-donut-center span { margin-top: 4px; color: #8995a2; font-size: 8px; }
.fleet-legend { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding-top: 4px; color: #697789; font-size: 8px; }
.fleet-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fleet-legend b { color: #39495c; font-size: 8px; }
.fleet-dot { width: 8px; height: 8px; border-radius: 50%; background: #0e795e; }
.dot-idle { background: #cc8c1c; }.dot-maintenance { background: #e97148; }
.drivers-panel { grid-column: 1 / -1; min-height: 235px; padding-top: 16px; }
.drivers-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.driver-count { padding: 5px 8px; border-radius: 5px; color: #718273; background: #f0f7f1; font-size: 8px; }
.driver-table-wrap { width: 100%; overflow-x: auto; }
.driver-table { width: 100%; margin-top: 10px; border-collapse: collapse; text-align: left; white-space: nowrap; }
.driver-table th { padding: 0 10px 8px 0; border-bottom: 1px solid #e7ebef; color: #929eaa; font-size: 8px; font-weight: 600; }
.driver-table th:last-child, .driver-table td:last-child { padding-right: 0; }
.driver-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid #edf0f2; color: #4c5a6c; font-size: 9px; }
.driver-table tbody tr:last-child td { border-bottom: 0; }
.driver-name { display: inline-flex; align-items: center; gap: 8px; color: #344356; font-weight: 600; }
.driver-name i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #3a795f; background: #eaf3ec; font-size: 8px; font-style: normal; font-weight: 700; }
.ontime-value { color: #16835d; font-weight: 700; }
.ontime-value.ontime-low { color: #dc704b; }
.rating-value { color: #566476; font-weight: 600; }
.rating-value span { color: #d29a32; }

@media (min-width: 1500px) {
    .reports-content { padding-top: 35px; }
    .reports-grid { gap: 17px; }
    .report-panel { padding: 19px 20px 17px; }
    .efficiency-panel, .fleet-panel { min-height: 330px; }
    .efficiency-chart { height: 250px; }
    .fleet-donut { width: 160px; height: 160px; }
    .fleet-donut-center { width: 88px; height: 88px; }
    .drivers-panel { min-height: 250px; }
    .driver-table td { padding-top: 12px; padding-bottom: 12px; }
}

@media (max-width: 760px) {
    .reports-content { padding: 22px 15px 16px; }
    .reports-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
    .efficiency-panel, .fleet-panel { min-height: 265px; }
    .efficiency-chart { height: 205px; }
    .fleet-panel { min-height: 250px; }
    .fleet-chart { min-height: 170px; }
    .drivers-panel { grid-column: auto; min-height: 220px; }
    .export-button { padding: 0 10px; font-size: 8px; }
}

@media print {
    .sidebar, .export-button, .topbar-actions, .dashboard-footer { display: none !important; }
    .dashboard-main { width: 100%; margin-left: 0; }
    .topbar { height: auto; padding: 12px 0; border-bottom: 1px solid #dfe4e8; }
    .reports-content { padding: 16px 0; }
    .report-panel { break-inside: avoid; box-shadow: none; }
    body, .dashboard-page { background: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Drivers and vehicles */
.fleet-content { max-width: 1420px; margin: 0 auto; padding: 27px 30px 20px; }
.fleet-page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.fleet-page-intro .eyebrow { font-size: 8px; }
.fleet-page-intro h2 { margin: 7px 0 4px; color: #1e2d40; font-family: Manrope, sans-serif; font-size: 22px; letter-spacing: -.04em; }
.fleet-page-intro p { margin: 0; color: #8995a2; font-size: 10px; }
.fleet-add-button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 0; border-radius: 7px; color: #fff; background: #10795d; cursor: pointer; font-size: 9px; font-weight: 700; transition: background .2s, transform .2s; }
.fleet-add-button:hover { transform: translateY(-1px); background: #0c694f; }
.fleet-add-button > span { font-size: 17px; font-weight: 400; line-height: 1; }
.fleet-alert { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid #d5ebdd; border-radius: 7px; color: #216548; background: #f0f8f2; font-size: 10px; }
.fleet-alert > span { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #25885e; font-size: 10px; }
.fleet-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.fleet-stats > article { min-width: 0; min-height: 76px; display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid #e8edf0; border-radius: 9px; background: #fff; }
.fleet-stat-icon { width: 33px; height: 33px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #268360; background: #eff7f1; }
.fleet-stat-icon svg { width: 19px; height: 19px; }
.vehicle-stat-icon { color: #3e5e84; background: #f0f3f8; }
.fleet-stats article > div { min-width: 0; }
.fleet-stats article > div > span, .fleet-stats article > div > strong { display: block; }
.fleet-stats article > div > span { overflow: hidden; color: #8b97a4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.fleet-stats article > div > strong { margin-top: 4px; color: #25364a; font-family: Manrope, sans-serif; font-size: 20px; font-weight: 800; line-height: 1; }
.fleet-stat-note { display: none; margin-left: auto; color: #9aa5ae; font-size: 8px; font-style: normal; }
.fleet-status-indicator { width: 10px; height: 10px; flex: 0 0 auto; margin: 0 11px; border-radius: 50%; background: #16946b; box-shadow: 0 0 0 4px #eaf5ee; }
.status-route { background: #d29428; box-shadow: 0 0 0 4px #fbf5e9; }
.fleet-list-panel { min-width: 0; overflow: hidden; border: 1px solid #e7ebef; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(22,39,56,.02); }
.fleet-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px 13px; }
.fleet-list-heading h3, .fleet-form-heading h3 { margin: 0; color: #29394c; font-family: Manrope, sans-serif; font-size: 12px; }
.fleet-list-heading p, .fleet-form-heading p { margin: 4px 0 0; color: #919ca8; font-size: 9px; }
.fleet-record-count { padding: 5px 8px; border-radius: 5px; color: #668271; background: #f0f7f1; font-size: 8px; }
.fleet-tabs { display: flex; gap: 19px; padding: 0 18px; border-bottom: 1px solid #edf0f2; }
.fleet-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 1px 11px; color: #8995a2; font-size: 9px; font-weight: 600; }
.fleet-tab svg { width: 14px; height: 14px; }
.fleet-tab > span { padding: 2px 5px; border-radius: 5px; color: #8995a2; background: #f1f3f5; font-size: 8px; }
.fleet-tab.active { color: #147656; }
.fleet-tab.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px 2px 0 0; background: #14835f; content: ""; }
.fleet-tab.active > span { color: #24744f; background: #eaf4ed; }
.fleet-table-wrap { width: 100%; overflow-x: auto; }
.fleet-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.fleet-table th { padding: 11px 12px; border-bottom: 1px solid #e9edf0; color: #939eaa; background: #fbfcfc; font-size: 8px; font-weight: 600; }
.fleet-table th:first-child, .fleet-table td:first-child { padding-left: 18px; }
.fleet-table th:last-child, .fleet-table td:last-child { padding-right: 17px; text-align: right; }
.fleet-table td { padding: 11px 12px; border-bottom: 1px solid #f0f2f4; color: #546174; font-size: 9px; }
.fleet-table tbody tr:last-child td { border-bottom: 0; }
.fleet-person, .fleet-vehicle { display: inline-flex; align-items: center; gap: 9px; }
.fleet-person > i { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #317b5b; background: #eaf3ec; font-size: 8px; font-style: normal; font-weight: 700; }
.fleet-person > span > strong, .fleet-person > span > small, .fleet-vehicle > span > strong, .fleet-vehicle > span > small { display: block; }
.fleet-person > span > strong, .fleet-vehicle > span > strong { color: #354458; font-size: 9px; font-weight: 600; }
.fleet-person > span > small, .fleet-vehicle > span > small { margin-top: 3px; color: #9aa4ae; font-size: 7px; }
.fleet-vehicle > i { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #426487; background: #eff3f8; }
.fleet-vehicle > i svg { width: 17px; height: 17px; }
.fleet-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 20px; color: #19764f; background: #edf7f0; font-size: 8px; font-weight: 600; }
.fleet-badge > i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-available, .badge-idle { color: #9a6b1a; background: #fbf5e8; }
.badge-off-duty, .badge-maintenance { color: #b46042; background: #fff1ed; }
.badge-on-route { color: #28689c; background: #edf5fb; }
.fleet-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.fleet-actions form { display: inline-flex; }
.fleet-action { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; color: #738295; background: transparent; cursor: pointer; }
.fleet-action svg { width: 15px; height: 15px; }
.edit-action:hover { border-color: #e4eee7; color: #27764f; background: #f0f7f1; }
.delete-action:hover { border-color: #f7e1dc; color: #c65e48; background: #fff4f1; }
.fleet-empty { height: 100px; color: #99a4ae !important; text-align: center; }
.fleet-list-footer { display: flex; justify-content: space-between; gap: 10px; padding: 10px 18px; border-top: 1px solid #edf0f2; color: #9aa4ae; font-size: 8px; }
.fleet-list-footer > span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.fleet-list-footer > span:last-child i { width: 6px; height: 6px; border-radius: 50%; background: #53a477; }
.fleet-form-panel { max-width: 820px; padding: 20px; border: 1px solid #e7ebef; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(22,39,56,.02); }
.fleet-form-heading { display: flex; align-items: center; gap: 11px; padding-bottom: 18px; border-bottom: 1px solid #edf0f2; }
.fleet-form-heading-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; color: #247856; background: #edf6ef; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.fleet-form-heading p span, .fleet-field label span { color: #db7657; }
.fleet-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 18px; padding: 20px 0 22px; }
.fleet-field label { display: block; margin-bottom: 7px; color: #3b4a5d; font-size: 9px; font-weight: 700; }
.fleet-field input, .fleet-field select { width: 100%; height: 39px; padding: 0 10px; outline: 0; border: 1px solid #e2e8e8; border-radius: 6px; color: #405064; background: #fff; font: inherit; font-size: 9px; transition: border-color .2s, box-shadow .2s; }
.fleet-field input::placeholder { color: #a7b0b8; }
.fleet-field input:focus, .fleet-field select:focus { border-color: #58a384; box-shadow: 0 0 0 3px rgba(37,131,97,.08); }
.fleet-field-error { display: block; margin-top: 5px; color: #c04c3a; font-size: 8px; }
.fleet-form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 14px; border-top: 1px solid #edf0f2; }
.fleet-cancel-button { min-height: 35px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid #e3e8ea; border-radius: 7px; color: #687789; background: #fff; font-size: 9px; font-weight: 600; }
.fleet-cancel-button:hover { background: #f6f8f8; }
.fleet-form-actions .fleet-add-button { min-height: 35px; }

@media (min-width: 1500px) {
    .fleet-content { padding-top: 35px; }
    .fleet-stats { gap: 16px; }
    .fleet-stats > article { min-height: 86px; padding: 15px 17px; }
    .fleet-stat-note { display: block; }
    .fleet-table td { padding-top: 13px; padding-bottom: 13px; }
}

@media (max-width: 900px) {
    .fleet-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .fleet-content { padding: 21px 15px 16px; }
    .fleet-page-intro { align-items: flex-start; }
    .fleet-page-intro h2 { font-size: 19px; }
    .fleet-page-intro p { max-width: 290px; line-height: 1.6; }
    .fleet-add-button { flex: 0 0 auto; padding: 0 9px; font-size: 8px; }
    .fleet-list-heading { padding-right: 13px; padding-left: 13px; }
    .fleet-tabs { padding-right: 13px; padding-left: 13px; }
    .fleet-table th:first-child, .fleet-table td:first-child { padding-left: 13px; }
    .fleet-table th:last-child, .fleet-table td:last-child { padding-right: 13px; }
    .fleet-list-footer { padding-right: 13px; padding-left: 13px; font-size: 7px; }
    .fleet-form-panel { padding: 15px; }
}

@media (max-width: 460px) {
    .fleet-stats { gap: 7px; }
    .fleet-stats > article { min-height: 68px; gap: 8px; padding: 9px; }
    .fleet-stat-icon { width: 28px; height: 28px; }
    .fleet-status-indicator { margin-right: 5px; margin-left: 6px; }
    .fleet-stats article > div > strong { font-size: 18px; }
    .fleet-record-count { font-size: 7px; }
    .fleet-list-footer { flex-wrap: wrap; }
    .fleet-form-grid { grid-template-columns: 1fr; gap: 13px; padding: 16px 0; }
    .fleet-form-panel { padding: 13px; }
}

.ward-directory-name { display: inline-flex; align-items: center; gap: 9px; }
.ward-directory-name > i { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #317b5b; background: #eaf3ec; font-size: 10px; font-style: normal; font-weight: 700; }
.ward-directory-name > strong { color: #354458; font-size: 12px; font-weight: 600; }
.ward-form-panel { max-width: 820px; }
.badge-needs-attention { color: #9a6b1a; background: #fbf5e8; }

.complaint-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.complaint-summary > article { min-width: 0; min-height: 73px; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid #e8edf0; border-radius: 9px; background: #fff; }
.complaint-summary-icon { width: 32px; height: 32px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; font-size: 15px; font-weight: 700; }
.summary-open { color: #bd644c; background: #fff1ed; }.summary-progress { color: #9a6b1a; background: #fbf5e8; }.summary-resolved { color: #19764f; background: #edf7f0; }.summary-total { color: #426487; background: #eff3f8; }
.complaint-summary > article > div > span, .complaint-summary > article > div > strong { display: block; }
.complaint-summary > article > div > span { color: #8995a2; font-size: 11px; }
.complaint-summary > article > div > strong { margin-top: 4px; color: #25364a; font-family: Manrope, sans-serif; font-size: 20px; font-weight: 800; line-height: 1; }
.complaint-list-panel { overflow: hidden; border: 1px solid #e7ebef; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(22,39,56,.02); }
.complaint-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid #edf0f2; }
.complaint-list-heading h3 { margin: 0; color: #29394c; font-family: Manrope, sans-serif; font-size: 15px; }
.complaint-list-heading p { margin: 4px 0 0; color: #919ca8; font-size: 11px; }
.complaint-card { padding: 17px 18px; border-bottom: 1px solid #edf0f2; }
.complaint-card:last-child { border-bottom: 0; }
.complaint-main { display: flex; align-items: flex-start; gap: 12px; }
.complaint-symbol { width: 35px; height: 35px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #b86148; background: #fff2ee; }
.complaint-symbol svg { width: 18px; height: 18px; }
.complaint-copy { min-width: 0; flex: 1; }
.complaint-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.complaint-title-line h4 { margin: 0; color: #29394c; font-family: Manrope, sans-serif; font-size: 14px; }
.complaint-priority { padding: 4px 7px; border-radius: 20px; color: #647487; background: #f0f3f5; font-size: 10px; font-weight: 600; }
.priority-high { color: #b34e3c; background: #fff0ec; }.priority-medium { color: #9a6b1a; background: #fbf5e8; }.priority-low { color: #47715e; background: #edf6ef; }
.complaint-copy > p { margin: 6px 0 9px; color: #788596; font-size: 12px; line-height: 1.55; }
.complaint-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 15px; margin-bottom: 9px; color: #8d99a6; font-size: 10px; }
.complaint-reference { color: #4a6780; font-weight: 700; }
.complaint-history { margin: 13px 0 0 47px; }
.complaint-history summary { width: fit-content; color: #4c7e66; cursor: pointer; font-size: 11px; font-weight: 600; }
.complaint-history summary span { margin-left: 4px; color: #668271; }
.complaint-comments { display: grid; gap: 10px; margin-top: 10px; padding: 11px 13px; border: 1px solid #edf0f2; border-radius: 7px; background: #fafcfb; }
.complaint-comment { display: flex; align-items: flex-start; gap: 9px; }
.comment-marker { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; background: #28916a; }
.complaint-comment p { margin: 0; color: #506174; font-size: 11px; line-height: 1.5; }
.complaint-comment small { display: block; margin-top: 4px; color: #97a1ab; font-size: 10px; }
.complaint-update-form { margin: 14px 0 0 47px; padding: 12px; border: 1px solid #e8edf0; border-radius: 8px; background: #fafcfb; }
.complaint-form-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.complaint-form-heading strong { color: #3a4b5e; font-size: 11px; }
.complaint-form-heading > span { color: #97a1ab; font-size: 10px; }
.complaint-form-fields { display: grid; grid-template-columns: minmax(135px, .7fr) minmax(180px, 1.5fr) auto; align-items: end; gap: 10px; }
.complaint-form-fields .fleet-field label { font-size: 11px; }
.complaint-form-fields .fleet-field select, .complaint-form-fields .fleet-field input { height: 36px; font-size: 12px; }
.complaint-submit { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 11px; border: 0; border-radius: 6px; color: #fff; background: #13795c; cursor: pointer; font-size: 11px; font-weight: 700; }
.complaint-submit:hover { background: #0e694f; }
.complaint-submit > span { font-size: 15px; }
.complaint-update-form > .fleet-field-error { margin: 7px 0 0; }
.complaint-empty { display: grid; justify-items: center; gap: 5px; padding: 45px 15px; color: #8b97a4; }
.complaint-empty > span { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 5px; border-radius: 50%; color: #267c56; background: #edf7f0; }
.complaint-empty strong { color: #405064; font-size: 13px; }
.complaint-empty p { margin: 0; font-size: 11px; }

@media (max-width: 900px) {
    .complaint-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .complaint-form-fields { grid-template-columns: minmax(130px, .7fr) minmax(160px, 1.3fr); }
    .complaint-submit { grid-column: 2; justify-self: end; }
}

@media (max-width: 600px) {
    .complaint-card { padding: 14px 12px; }
    .complaint-list-heading { padding-right: 12px; padding-left: 12px; }
    .complaint-main { gap: 9px; }
    .complaint-symbol { width: 30px; height: 30px; }
    .complaint-title-line h4 { font-size: 13px; }
    .complaint-meta { gap: 6px 10px; }
    .complaint-history, .complaint-update-form { margin-left: 0; }
    .complaint-form-fields { grid-template-columns: 1fr; }
    .complaint-submit { grid-column: auto; justify-self: stretch; }
}

/* Readable type scale across login, dashboard, reports, and fleet screens */
.brand small { font-size: 11px; }
.eyebrow, .preview-topline, .preview-live { font-size: 11px; }
.story-copy p { font-size: 15px; }
.preview-foot { font-size: 11px; }
.story-footer { font-size: 12px; }
.login-heading p { font-size: 14px; }
.login-form label { font-size: 13px; }
.input-wrap input { font-size: 14px; }
.secure-label { font-size: 11px; }
.form-error { font-size: 12px; }
.demo-credentials strong, .demo-credentials p { font-size: 12px; }
.login-privacy, .login-footer { font-size: 11px; }

.sidebar-label { font-size: 10px; }
.nav-link { font-size: 13px; }
.complaint-count { font-size: 10px; }
.sidebar-help strong, .account-info strong, .topbar-profile strong { font-size: 11px; }
.sidebar-help small, .account-info small, .topbar-profile small { font-size: 10px; }
.topbar-title h1 { font-size: 16px; }
.crumb, .today-date { font-size: 12px; }
.page-intro .eyebrow, .fleet-page-intro .eyebrow { font-size: 10px; }
.page-intro h2, .fleet-page-intro h2 { font-size: 24px; }
.page-intro p, .fleet-page-intro p { font-size: 13px; }
.date-filter { font-size: 12px; }
.stat-heading { font-size: 12px; }
.stat-trend { font-size: 11px; }
.panel-header h3, .wards-panel .panel-header h3 { font-size: 14px; }
.panel-header p { font-size: 11px; }
.ward-table th { font-size: 11px; }
.ward-table td { font-size: 12px; }
.view-all-link { font-size: 11px; }
.dashboard-footer { font-size: 10px; }

.export-button { font-size: 12px; }
.report-panel h2 { font-size: 14px; }
.chart-y-labels, .chart-bar-label { font-size: 10px; }
.fleet-donut-center span { font-size: 10px; }
.fleet-legend, .fleet-legend b { font-size: 10px; }
.driver-table th { font-size: 10px; }
.driver-table td { font-size: 12px; }
.driver-count { font-size: 10px; }

.fleet-add-button, .fleet-cancel-button { font-size: 12px; }
.fleet-list-heading h3, .fleet-form-heading h3 { font-size: 15px; }
.fleet-list-heading p, .fleet-form-heading p { font-size: 11px; }
.fleet-record-count, .fleet-tab, .fleet-badge { font-size: 11px; }
.fleet-tab > span { font-size: 10px; }
.fleet-table th { font-size: 10px; }
.fleet-table td { font-size: 12px; }
.fleet-person > span > strong, .fleet-vehicle > span > strong { font-size: 12px; }
.fleet-person > span > small, .fleet-vehicle > span > small { font-size: 10px; }
.fleet-list-footer { font-size: 10px; }
.fleet-field label { font-size: 12px; }
.fleet-field input, .fleet-field select { font-size: 13px; }
.fleet-field-error { font-size: 11px; }

@media (max-width: 760px) {
    .nav-link { font-size: 0; }
    .page-intro h2, .fleet-page-intro h2 { font-size: 21px; }
    .topbar-title h1 { font-size: 14px; }
    .stat-heading { font-size: 11px; }
    .stat-trend { font-size: 10px; }
    .panel-header h3, .wards-panel .panel-header h3 { font-size: 13px; }
    .fleet-list-footer { font-size: 9px; }
}

@media (max-width: 420px) {
    .topbar-title h1 { font-size: 13px; }
    .page-intro h2, .fleet-page-intro h2 { font-size: 19px; }
    .stat-heading { font-size: 10px; }
    .stat-trend { font-size: 9px; }
    .fleet-table th, .driver-table th { font-size: 10px; }
}