/**
 * DH Respond — App-Specific Styles
 *
 * Mobile-first PWA with teal theme color (#0d9488).
 * Shared tokens, reset, base, layout, components, and utilities are loaded
 * via the template CSS stack (symlinked from shared/).
 * This file contains only Respond-specific styles.
 */

/* ==========================================================================
   CSS Variables (Respond-specific additions)
   All core design tokens are imported from design-tokens.css above.
   Only define variables unique to Respond here.
   ========================================================================== */

:root {
    /* Secondary color - unique to Respond app */
    --color-secondary: #64748b;
}

#app {
    min-height: 100vh;
}

/* ==========================================================================
   Auth Pages
   ========================================================================== */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-4);
}

.auth-container {
    width: 100%;
    max-width: 400px;
    padding: var(--spacing-8);
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.auth-container h1 {
    text-align: center;
    margin-bottom: var(--spacing-6);
    color: var(--color-primary);
}

.auth-header {
    text-align: center;
    margin-bottom: var(--spacing-4);
}

.auth-logo {
    max-height: 60px;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.auth-title {
    text-align: center;
    margin-bottom: var(--spacing-6);
    color: var(--color-gray-800);
    font-size: var(--font-size-xl);
}

.auth-form {
    margin-bottom: var(--spacing-6);
}

.auth-link {
    text-align: center;
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

/* ==========================================================================
   Landing Page
   ========================================================================== */

.landing-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.landing-header {
    padding: var(--spacing-12) var(--spacing-4);
    text-align: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}

.landing-header h1 {
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-3xl);
}

.landing-header .tagline {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    margin: 0;
}

.hero-brand {
    margin-bottom: var(--spacing-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
}

.hero-logo {
    max-height: 60px;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.hero-org-name {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    text-align: center;
}

/* Mobile responsive - smaller logo */
@media (max-width: 640px) {
    .hero-brand {
        gap: var(--spacing-2);
    }

    .hero-logo {
        max-height: 48px;
        max-width: 160px;
    }

    .hero-org-name {
        font-size: var(--font-size-xl);
    }
}

.landing-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    padding: var(--spacing-8) var(--spacing-4);
    max-width: 400px;
    margin: 0 auto;
}

.landing-info {
    flex: 1;
    padding: var(--spacing-8) var(--spacing-4);
    max-width: 600px;
    margin: 0 auto;
}

.landing-info h2 {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    margin-top: var(--spacing-6);
}

.landing-info h2:first-child {
    margin-top: 0;
}

.landing-footer {
    padding: var(--spacing-6) var(--spacing-4);
    text-align: center;
    background-color: var(--color-gray-100);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

.landing-footer p {
    margin: 0;
}

/* ==========================================================================
   Offline Indicator
   ========================================================================== */

.offline-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-3);
    background-color: var(--color-warning);
    color: var(--color-gray-900);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    z-index: 1000;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 640px) {
    .landing-nav {
        flex-direction: row;
        max-width: 500px;
    }

    .landing-nav .btn {
        flex: 1;
    }
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-6);
    }
}

/* ==========================================================================
   Header Brand - Logo Sizing (per STYLE-GUIDE.md)
   ========================================================================== */

.header-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.header-brand-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    text-decoration: none;
    color: inherit;
}

/* Full logo: 200x50px max for desktop headers */
.header-logo-full {
    height: 40px;
    max-width: 200px;
    width: auto;
    object-fit: contain;
}

/* Icon logo: 48x48px max for mobile/compact views */
.header-logo-icon {
    display: none;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.header-brand-name {
    font-weight: 600;
    font-size: var(--font-size-lg);
    white-space: nowrap;
    color: inherit;
}

/* Tablet and below: Show icon, hide full logo */
@media (max-width: 1023px) {
    .header-logo-full {
        display: none;
    }

    .header-logo-icon {
        display: block;
    }
}

/* Mobile: Smaller sizing */
@media (max-width: 767px) {
    .header-logo-icon {
        width: 32px;
        height: 32px;
    }

    .header-brand-name {
        font-size: var(--font-size-base);
    }
}

/* Responsive visibility utilities (.desktop-only, .mobile-only) are
   defined in design-tokens.css — do not duplicate here. */

/* ==========================================================================
   App Shell — Respond-specific additions
   Base app shell (.app-header, .app-sidebar, etc.) is defined in
   shared/static/css/layout.css via suite_base.html.
   ========================================================================== */

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-gray-600);
    cursor: pointer;
    border-radius: var(--radius-md);
}

.btn-icon:hover {
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
}

.btn-icon:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-gray-200);
    display: flex;
    z-index: 100;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--color-gray-500);
    text-decoration: none;
    font-size: var(--font-size-xs);
    transition: color var(--transition-fast);
}

.nav-item.active {
    color: var(--color-primary);
}

.nav-item svg {
    width: 24px;
    height: 24px;
}

/* Slide Menu */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 200;
}

.slide-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background-color: var(--color-white);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 201;
    display: flex;
    flex-direction: column;
}

.slide-menu.open {
    transform: translateX(0);
}

.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4);
    background-color: var(--color-primary);
    color: var(--color-white);
}

.menu-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.menu-close {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: var(--spacing-2);
}

.menu-list {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: var(--spacing-2) 0;
    overflow-y: auto;
}

.menu-list li {
    margin: 0;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-gray-700);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.menu-item:hover {
    background-color: var(--color-gray-50);
    text-decoration: none;
}

.menu-item.active {
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.menu-footer {
    border-top: 1px solid var(--color-gray-200);
    padding: var(--spacing-2) 0;
}

.menu-switch {
    color: var(--color-primary);
}

.menu-logout {
    color: var(--color-danger);
}

.avatar-lg {
    width: 64px;
    height: 64px;
    font-size: var(--font-size-xl);
}

/* ==========================================================================
   Coordinator Shell
   ========================================================================== */

.coordinator-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.coord-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-4);
    z-index: 100;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.coord-layout {
    display: flex;
    padding-top: 60px;
    min-height: calc(100vh - 60px);
}

/* Sidebar */
.sidebar {
    position: fixed;
    left: 0;
    top: 60px;
    bottom: 0;
    width: 240px;
    background-color: var(--color-white);
    border-right: 1px solid var(--color-gray-200);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 99;
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-overlay {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 98;
}

.sidebar-nav {
    flex: 1;
    padding: var(--spacing-2) 0;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-gray-600);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.sidebar-item:hover {
    background-color: var(--color-gray-50);
    text-decoration: none;
}

.sidebar-item.active {
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-right: 3px solid var(--color-primary);
}

.sidebar-footer {
    border-top: 1px solid var(--color-gray-200);
    padding: var(--spacing-2) 0;
}

.coord-main {
    flex: 1;
    padding: var(--spacing-6);
    margin-left: 0;
    overflow-x: hidden;
}

/* Desktop Sidebar */
@media (min-width: 1024px) {
    .sidebar {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: none !important;
    }

    .coord-main {
        margin-left: 240px;
    }

    .coord-header .menu-btn {
        display: none;
    }
}

/* Incident Selector */
.incident-select {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

/* ==========================================================================
   Dashboard Components
   ========================================================================== */

.stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

@media (min-width: 768px) {
    .stats-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.stat-card.stat-primary { border-left: 4px solid var(--color-primary); }
.stat-card.stat-success { border-left: 4px solid var(--color-success); }
.stat-card.stat-warning { border-left: 4px solid var(--color-warning); }
.stat-card.stat-info { border-left: 4px solid var(--color-info); }

.stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--color-gray-100);
}

.stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.dashboard-grid {
    display: grid;
    gap: var(--spacing-4);
}

@media (min-width: 768px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card-wide {
    grid-column: 1 / -1;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-link {
    font-size: var(--font-size-sm);
}

/* Quick Stats Mini */
.stats-mini {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    flex-wrap: wrap;
}

.stat-mini {
    background-color: var(--color-white);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.stat-mini .stat-count {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
}

.stat-mini .stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-left: var(--spacing-2);
}

/* Quick Actions */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quick-action-btn:hover {
    background-color: var(--color-gray-100);
    text-decoration: none;
}

/* Activity Feed */
.activity-feed {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.activity-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    color: var(--color-primary);
}

.activity-content {
    flex: 1;
}

.activity-user {
    font-weight: 500;
}

.activity-details {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    margin-left: var(--spacing-2);
}

.activity-time {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

/* ==========================================================================
   Work Order Cards
   ========================================================================== */

.work-order-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-3);
    border-left: 4px solid var(--color-gray-300);
}

.work-order-card.current {
    border-left-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.wo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2);
}

.wo-reference {
    font-weight: 600;
    color: var(--color-gray-800);
}

.wo-priority {
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: capitalize;
}

.wo-body {
    margin-bottom: var(--spacing-3);
}

.wo-address, .wo-homeowner {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-1);
}

.wo-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wo-status {
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: capitalize;
}

/* ==========================================================================
   Work Order Map Placeholder
   ========================================================================== */

.wo-map {
    cursor: pointer;
}

.wo-map .map-placeholder {
    padding: var(--spacing-4);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    text-align: center;
    transition: background-color 0.2s;
}

.wo-map .map-placeholder:hover {
    background: var(--color-gray-200);
}

.wo-map .map-placeholder:active {
    background: var(--color-gray-300);
}

.wo-map .map-placeholder svg {
    color: var(--color-gray-400);
}

.wo-map .map-placeholder p {
    margin-top: var(--spacing-2);
    margin-bottom: 0;
    color: var(--color-primary);
    font-weight: 500;
}

/* ==========================================================================
   Skills Badges
   ========================================================================== */

.skill-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    margin-right: var(--spacing-1);
    margin-bottom: var(--spacing-1);
}

.skill-badge-sm {
    padding: 2px var(--spacing-1);
    font-size: 10px;
}

.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

/* ==========================================================================
   Compact View Mode
   ========================================================================== */

/* Compact mode reduces padding and font sizes for denser list views.
   Enable by adding .compact-view class to .page-content container.
   User preference stored in localStorage as 'respond_compact_view'. */

.compact-view .skill-badge,
.compact-view .skill-badge-sm {
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
}

.compact-view .work-type-badge {
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
}

/* Compact mode density toggle button active state */
#density-toggle.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ==========================================================================
   Toolbar
   ========================================================================== */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}

.toolbar-left, .toolbar-right {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.search-box {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
}

.search-box input {
    border: none;
    outline: none;
    background: transparent;
    min-width: 200px;
}

.search-box.large {
    flex: 1;
}

.search-box.large input {
    font-size: var(--font-size-lg);
    min-width: 250px;
}

.filter-group {
    display: flex;
    gap: var(--spacing-2);
}

.filter-group select {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.tabs {
    display: flex;
    gap: var(--spacing-1);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: var(--spacing-4);
}

.tab {
    padding: var(--spacing-3) var(--spacing-4);
    background: transparent;
    border: none;
    color: var(--color-gray-600);
    cursor: pointer;
    position: relative;
}

.tab.active {
    color: var(--color-primary);
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.filter-tabs {
    display: flex;
    gap: var(--spacing-1);
    padding: 0 var(--spacing-4) var(--spacing-3);
    background-color: var(--color-primary);
}

.filter-tab {
    padding: var(--spacing-2) var(--spacing-3);
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.filter-tab.active {
    background-color: var(--color-white);
    color: var(--color-primary);
}

/* ==========================================================================
   Check-In Page
   ========================================================================== */

.check-in-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.stat-card.stat-large {
    padding: var(--spacing-6);
    text-align: center;
}

.stat-card.stat-large .stat-value {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-2);
}

.check-in-search {
    display: flex;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.volunteer-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
    box-shadow: var(--shadow-sm);
}

.volunteer-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.volunteer-name {
    font-weight: 600;
}

.volunteer-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.separator {
    color: var(--color-gray-300);
}

/* ==========================================================================
   Teams Grid
   ========================================================================== */

.teams-grid {
    display: grid;
    gap: var(--spacing-4);
}

@media (min-width: 768px) {
    .teams-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .teams-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.team-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.team-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3);
}

.team-card-header .team-name {
    margin: 0;
    font-size: var(--font-size-lg);
}

.team-leader {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.leader-badge {
    font-size: var(--font-size-xs);
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-sm);
}

.team-members-preview {
    display: flex;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-3);
}

.team-members-preview .avatar.not-checked-in {
    opacity: 0.5;
}

.more-members {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
}

.team-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-3);
}

.team-skills {
    margin-bottom: var(--spacing-3);
}

.team-actions {
    display: flex;
    gap: var(--spacing-2);
}

/* ==========================================================================
   Dispatch Map
   ========================================================================== */

.dispatch-layout {
    display: flex;
    height: 100%;
    position: relative;
}

.map-container {
    flex: 1;
    position: relative;
}

.dispatch-map {
    width: 100%;
    height: 100%;
    min-height: 400px;
    /* Let OpenLayers handle touch gestures for map navigation */
    touch-action: none;
}

.map-controls {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.map-control-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

.map-legend {
    position: absolute;
    bottom: var(--spacing-4);
    left: var(--spacing-4);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
    box-shadow: var(--shadow-md);
    display: flex;
    gap: var(--spacing-4);
    font-size: var(--font-size-sm);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.legend-marker {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
}

/* Map marker colors using design tokens */
.marker-pending { background-color: var(--marker-pending); }
.marker-assigned { background-color: var(--marker-assigned); }
.marker-in-progress { background-color: var(--marker-in-progress); }
.marker-completed { background-color: var(--marker-completed); }
.marker-team { background-color: var(--marker-team); }

.map-filters {
    position: absolute;
    top: var(--spacing-4);
    left: var(--spacing-4);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
    box-shadow: var(--shadow-md);
    display: flex;
    gap: var(--spacing-3);
}

.filter-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.dispatch-panel {
    width: 320px;
    background-color: var(--color-white);
    border-left: 1px solid var(--color-gray-200);
    display: flex;
    flex-direction: column;
}

.dispatch-panel.collapsed {
    width: 40px;
}

.panel-toggle {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-gray-200);
}

.panel-tab {
    flex: 1;
    padding: var(--spacing-3);
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.panel-tab.active {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.panel-content {
    flex: 1;
    overflow-y: auto;
}

.panel-tab-content {
    display: none;
    padding: var(--spacing-3);
}

.panel-tab-content.active {
    display: block;
}

.panel-search {
    margin-bottom: var(--spacing-3);
}

.panel-search input {
    width: 100%;
    padding: var(--spacing-2);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
}

.wo-list-item, .team-list-item {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-100);
    cursor: pointer;
}

.wo-list-item:hover, .team-list-item:hover {
    background-color: var(--color-gray-50);
}

/* ==========================================================================
   Work Order Popup - Situational Awareness
   ========================================================================== */

.wo-popup {
    position: absolute;
    z-index: 200;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 340px;
    max-height: 80vh;
    overflow-y: auto;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.popup-title-section {
    flex: 1;
    min-width: 0;
}

.popup-address-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-gray-900);
    margin-bottom: 2px;
    word-wrap: break-word;
}

.popup-ref {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    font-family: monospace;
}

.popup-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    margin-left: var(--spacing-2);
}

.popup-close:hover {
    color: var(--color-gray-600);
}

.popup-body {
    padding: var(--spacing-3) var(--spacing-4);
}

.popup-status-row {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.popup-priority {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    text-transform: capitalize;
}

.popup-status-badge {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    text-transform: capitalize;
}

/* Popup Sections */
.popup-section {
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.popup-section:last-child {
    border-bottom: none;
}

.popup-section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-gray-500);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-1);
}

.popup-section-header svg {
    flex-shrink: 0;
}

/* Contact Section */
.popup-contact-name {
    font-weight: 600;
    color: var(--color-gray-900);
    font-size: 0.9375rem;
}

.popup-contact-phones {
    margin-top: var(--spacing-1);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.popup-phone-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    padding: var(--spacing-1) 0;
}

.popup-phone-link:hover {
    text-decoration: underline;
}

.popup-phone-link .phone-type {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.popup-contact-prefs {
    margin-top: var(--spacing-1);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

.popup-contact-prefs .pref-label {
    font-weight: 500;
}

/* Caller Section */
#popup-caller-info {
    font-size: var(--font-size-sm);
}

#popup-caller-name {
    font-weight: 500;
    color: var(--color-gray-800);
}

#popup-caller-relationship {
    color: var(--color-gray-500);
    margin-left: var(--spacing-1);
}

/* Work Types */
.popup-work-types {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.work-type-badge {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-sm);
    text-transform: capitalize;
}

/* Access Instructions */
.popup-access-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    background: var(--badge-warning-bg);
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-warning);
}

/* Insurance Section */
.popup-insurance-status {
    display: flex;
    gap: var(--spacing-2);
}

.insurance-badge {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--badge-info-bg);
    color: var(--badge-info-text);
}

.popup-insurance-result {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin-top: var(--spacing-1);
    font-style: italic;
}

/* Church/Org Section */
#popup-church-name {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

/* Notes Section */
.popup-notes-text {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    background: var(--color-gray-50);
    padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    max-height: 80px;
    overflow-y: auto;
}

/* Action Buttons */
.popup-actions {
    display: flex;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.popup-actions .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
}

/* Popup responsive adjustments */
@media (max-width: 768px) {
    .wo-popup {
        width: calc(100vw - 32px);
        max-width: 300px;
        max-height: 70vh;
    }

    .popup-address-title {
        font-size: 0.9375rem;
    }
}

/* Very small screens - extra compact styles */
@media (max-width: 359px) {
    .wo-popup {
        left: 8px !important;
        right: 8px !important;
        bottom: 72px;
        max-height: 60vh;
    }

    .popup-body {
        padding: var(--spacing-2);
    }

    .popup-section {
        padding: var(--spacing-2);
    }

    .map-legend {
        left: 8px;
        bottom: 70px;
        max-width: calc(100vw - 80px);
    }

    .map-filters {
        padding: 6px 8px;
    }

    .filter-toggle {
        font-size: var(--font-size-xs);
        padding: var(--spacing-1) var(--spacing-2);
    }
}

/* ==========================================================================
   Dispatch Map - Mobile Responsive
   ========================================================================== */

/* Mobile utility classes */
@media (max-width: 767px) {
    .hidden-mobile { display: none !important; }
}
@media (min-width: 768px) {
    .hidden-desktop { display: none !important; }
}

/* Mobile backdrop */
.mobile-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 150;
}

/* Mobile FAB */
.mobile-panel-fab {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 190;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.mobile-panel-fab:active {
    transform: scale(0.95);
}

.mobile-panel-fab svg {
    transition: transform 0.3s ease;
}

/* Mobile Portrait: Full-screen map with bottom drawer */
@media (max-width: 767px) {
    .dispatch-layout {
        flex-direction: column;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100vw;
    }

    .map-container {
        flex: 1;
        min-height: 300px;
        height: calc(100vh - 60px);
        overflow: hidden;
        width: 100%;
    }

    /* Prevent horizontal scroll on coordinator pages */
    .coord-main {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .dispatch-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 50vh;
        max-height: 400px;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        z-index: 200;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        border-left: none;
    }

    .dispatch-panel.open {
        transform: translateY(0);
    }

    .dispatch-panel.collapsed {
        width: 100%;
        transform: translateY(100%);
    }

    /* Hide the desktop panel toggle on mobile */
    .dispatch-panel .panel-toggle {
        display: none;
    }

    /* Condensed map controls */
    .map-controls {
        top: 8px;
        right: 8px;
        flex-direction: column;
        gap: 8px;
    }

    .map-control-btn {
        width: 40px;
        height: 40px;
    }

    /* Condensed legend */
    .map-legend {
        bottom: 70px;
        left: 8px;
        right: auto;
        padding: 6px 10px;
        display: flex;
        gap: var(--spacing-2);
        font-size: 10px;
        max-width: calc(100vw - 80px);
        z-index: 50; /* Below sidebar */
    }

    .map-legend.hidden {
        display: none;
    }

    .legend-item {
        padding: 2px 4px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Show abbreviated text on mobile */
    .legend-item span:last-child {
        display: inline;
        font-size: 9px;
        max-width: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .legend-marker {
        width: 8px;
        height: 8px;
    }

    /* Dismiss button for legend */
    .legend-dismiss {
        margin-left: auto;
        padding: 2px;
        background: none;
        border: none;
        color: var(--color-gray-400);
        cursor: pointer;
        font-size: 14px;
        line-height: 1;
    }

    .legend-dismiss:hover {
        color: var(--color-gray-600);
    }

    /* Filters as collapsible row */
    .map-filters {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: white;
        padding: 6px 8px;
        border-bottom: 1px solid var(--color-gray-200);
        display: flex;
        flex-wrap: nowrap;
        gap: var(--spacing-1);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 50; /* Below sidebar (99) and overlay (98) */
        transition: transform 0.2s ease;
    }

    .map-filters.collapsed {
        transform: translateX(calc(100% + 16px));
    }

    /* Filter collapse button (mobile only) */
    .filter-collapse-btn {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        margin-left: auto;
        padding: 0;
        background: var(--color-gray-200);
        border: none;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    .filter-collapse-btn:hover {
        background: var(--color-gray-300);
    }

    .filter-collapse-btn svg {
        color: var(--color-gray-600);
    }

    .filter-toggle {
        flex: 0 0 auto;
        padding: 4px 6px;
        font-size: 10px;
        background: var(--color-gray-100);
        border-radius: var(--radius-sm);
        white-space: nowrap;
        min-height: 28px;
    }

    .filter-toggle input[type="checkbox"] {
        width: 12px;
        height: 12px;
    }

    /* Route summary responsive */
    .route-summary {
        bottom: auto;
        top: 110px;
        left: 8px;
        right: 8px;
        min-width: auto;
        width: auto;
    }

    /* Work order popup positioning */
    .wo-popup {
        position: fixed;
        bottom: 70px;
        left: 8px;
        right: 8px;
        top: auto;
        max-width: none;
        width: auto;
        transform: none !important;
    }

    /* Touch-friendly improvements */
    .panel-tab {
        min-height: 44px;
        padding: var(--spacing-3) var(--spacing-4);
    }

    .wo-list-item, .team-list-item {
        padding: var(--spacing-4);
        min-height: 60px;
    }

    .popup-actions .btn {
        min-height: 44px;
        padding: var(--spacing-3) var(--spacing-4);
    }

    .filter-toggle {
        min-height: 36px;
        padding: var(--spacing-2) var(--spacing-3);
    }

    /* Mobile filter toggle button */
    .mobile-filter-toggle {
        position: fixed;
        top: 68px;
        right: 8px;
        width: 36px;
        height: 36px;
        background: white;
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 60;
        transition: opacity 0.2s ease;
    }

    .mobile-filter-toggle:hover {
        background: var(--color-gray-50);
    }

    .mobile-filter-toggle.active {
        background: var(--color-gray-100);
    }

    .mobile-filter-toggle .filter-count {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 16px;
        height: 16px;
        background: var(--color-primary);
        color: white;
        font-size: 10px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hide toggle when filters are visible */
    .map-filters:not(.collapsed) ~ .mobile-filter-toggle,
    .mobile-filter-toggle.hidden-when-expanded {
        opacity: 0;
        pointer-events: none;
    }
}

/* Landscape / Tablet: Side panel with toggle */
@media (min-width: 768px) and (max-width: 1023px) {
    .dispatch-panel {
        width: 280px;
    }

    .dispatch-panel.collapsed {
        width: 40px;
    }

    .panel-toggle {
        display: flex;
    }

    /* Tablet sidebar adjustments */
    .sidebar {
        width: 200px;
    }

    .coord-main {
        margin-left: 200px;
    }

    .sidebar-nav-item {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-sm);
    }
}

/* Desktop: Current behavior */
@media (min-width: 1024px) {
    .dispatch-panel {
        width: 320px;
    }

    .panel-toggle {
        display: flex;
    }
}

/* ==========================================================================
   Assessment Form
   ========================================================================== */

.assessment-form {
    max-width: 600px;
    margin: 0 auto;
}

.assessment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.assessment-type {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.form-section {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.section-title {
    margin: 0 0 var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-200);
    font-size: var(--font-size-base);
}

.section-help {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-3);
}

.toggle-group {
    display: flex;
    gap: var(--spacing-2);
}

.toggle-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3);
    background-color: var(--color-gray-100);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toggle-option input {
    display: none;
}

.toggle-option input:checked + span {
    font-weight: 600;
}

.toggle-option:has(input:checked) {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2);
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.checkbox-option.warning {
    background-color: var(--badge-warning-bg);
}

.checkbox-option input[type="checkbox"]:checked + span {
    font-weight: 600;
}

.gps-input {
    display: flex;
    gap: var(--spacing-2);
}

.gps-input input {
    flex: 1;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-remove {
    position: absolute;
    top: var(--spacing-1);
    right: var(--spacing-1);
    width: 24px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
}

.form-actions {
    display: flex;
    gap: var(--spacing-3);
}

.form-actions .btn {
    flex: 1;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

/* ==========================================================================
   Dashboard Status Card
   ========================================================================== */

.status-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.date-display {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.check-in-status {
    text-align: center;
    padding: var(--spacing-4);
}

.status-icon {
    margin-bottom: var(--spacing-3);
    color: var(--color-gray-400);
}

.status-icon.checked-in {
    color: var(--color-success);
}

.hours-today {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: var(--spacing-2) 0 var(--spacing-4);
}

.quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.quick-stats .stat-card {
    text-align: center;
    padding: var(--spacing-4);
}

.quick-stats .stat-value {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
}

.quick-stats .stat-label {
    font-size: var(--font-size-xs);
}

/* ==========================================================================
   Schedule Page
   ========================================================================== */

.week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}

.week-label {
    font-weight: 600;
}

.schedule-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.calendar-day {
    padding: var(--spacing-3);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.calendar-day:hover {
    background-color: var(--color-gray-50);
}

.calendar-day.today {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.day-name {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.calendar-day.today .day-name {
    color: rgba(255, 255, 255, 0.8);
}

.day-number {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.schedule-empty {
    text-align: center;
    padding: var(--spacing-8);
}

/* Calendar day states for multi-selection */
.calendar-day.scheduled {
    background-color: var(--color-success);
    color: var(--color-white);
}

.calendar-day.scheduled .day-name {
    color: rgba(255, 255, 255, 0.8);
}

.calendar-day.in-range {
    background-color: var(--color-primary-light, #60a5fa);
    color: var(--color-white);
}

.calendar-day.in-range .day-name {
    color: rgba(255, 255, 255, 0.8);
}

.calendar-day.range-start {
    background-color: var(--color-primary);
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.calendar-day.range-end {
    background-color: var(--color-primary);
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.day-indicator {
    width: 6px;
    height: 6px;
    background-color: var(--color-white);
    border-radius: 50%;
    margin: var(--spacing-1) auto 0;
}

/* ==========================================================================
   Date Range Picker Styles
   ========================================================================== */

.date-range-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

@media (max-width: 480px) {
    .date-range-picker {
        grid-template-columns: 1fr;
    }
}

/* Date preview area */
.date-range-preview {
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    max-height: 200px;
    overflow-y: auto;
}

.date-preview-header {
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-700);
}

.date-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.date-chip {
    display: inline-block;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
}

/* Save button badge */
#save-count-badge {
    font-weight: normal;
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

/* Form check for skip weekends */
.form-check label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
}

.form-check input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* ==========================================================================
   Profile Page
   ========================================================================== */

.profile-header {
    text-align: center;
    padding: var(--spacing-6);
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
    box-shadow: var(--shadow-sm);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-3);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xl);
    font-weight: 600;
}

.profile-name {
    margin: 0 0 var(--spacing-1);
}

.profile-role {
    color: var(--color-gray-500);
    margin: 0;
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.info-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.info-label {
    width: 100px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.info-value {
    flex: 1;
}

.waiver-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.waiver-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.waiver-item.signed {
    background-color: #f0fdf4;
}

.waiver-type {
    text-transform: capitalize;
    font-weight: 500;
}

.waiver-date {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.waiver-status {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.waiver-item.signed .waiver-status {
    color: var(--color-success);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
}

.stat-item {
    text-align: center;
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
}

/* ==========================================================================
   Member Cards
   ========================================================================== */

.member-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.member-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.member-info {
    flex: 1;
}

.member-name {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.member-skills {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.member-status {
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.member-status.checked-in {
    color: var(--color-success);
}

.member-status.not-checked-in {
    color: var(--color-gray-400);
}

/* ==========================================================================
   WO Summary Grid
   ========================================================================== */

.wo-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
}

.wo-summary-item {
    text-align: center;
    padding: var(--spacing-4);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.wo-count {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
}

.wo-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
}

.page-info {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* ==========================================================================
   Spinner
   ========================================================================== */

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinning {
    animation: spin 1s linear infinite;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .offline-indicator,
    .btn,
    .bottom-nav,
    .app-header,
    .slide-menu,
    .menu-overlay,
    .sidebar,
    .coord-header,
    .map-controls,
    .map-filters,
    .panel-toggle,
    .modal {
        display: none !important;
    }

    .app-main,
    .coord-main {
        padding: 0 !important;
        margin: 0 !important;
    }

    body {
        background-color: white;
    }

    .card {
        box-shadow: none;
        border: 1px solid var(--color-gray-200);
        break-inside: avoid;
    }

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

    .badge {
        border: 1px solid currentColor;
    }
}

/* Focus indicators - ensure visibility on all interactive elements */
:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Ensure sufficient contrast for focus rings on dark backgrounds */
.sidebar :focus-visible,
.app-header :focus-visible,
.bottom-nav :focus-visible {
    outline-color: var(--color-white);
}

/* High contrast focus for buttons */
.btn:focus-visible {
    outline: 3px solid var(--color-gray-900);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-white);
}

.btn-primary:focus-visible {
    outline-color: var(--color-gray-900);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

/* Improved color contrast - adjust grays to meet 4.5:1 ratio */
.text-muted {
    color: var(--color-gray-600); /* 4.85:1 contrast on white */
}

/* Ensure placeholder text has sufficient contrast */
::placeholder {
    color: var(--color-gray-500); /* 4.12:1 - borderline, use with caution */
    opacity: 1;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-gray-600); /* 4.85:1 contrast */
}

/* Improved link colors for contrast */
a {
    color: var(--color-primary-dark); /* Darker teal for better contrast */
}

a:hover {
    color: var(--color-gray-900);
}

/* Ensure form labels are visible */
label {
    display: block;
    font-weight: 500;
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-1);
}

/* Error states with sufficient contrast */
.field-error,
.input-error {
    border-color: var(--color-danger);
    background-color: #fef2f2;
}

.error-message {
    color: #b91c1c; /* Darker red for 4.5:1 contrast */
    font-size: var(--font-size-sm);
}

/* Success states */
.field-success {
    border-color: var(--color-success);
}

.success-message {
    color: #15803d; /* Darker green for 4.5:1 contrast */
}


/* ==========================================================================
   Work Type Badges (Work Orders List View)
   ========================================================================== */

.work-types-cell {
    white-space: nowrap;
}

.work-type-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 6px;
    margin-right: 2px;
    margin-bottom: 2px;
    background: var(--color-primary-100, #ccfbf1);
    color: var(--color-primary-700, #0f766e);
    border-radius: var(--radius-sm);
    text-transform: capitalize;
}

.work-type-more {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 6px;
    color: var(--color-gray-500);
    font-weight: 500;
}

/* Responsive: hide work type column on small screens */
@media (max-width: 768px) {
    .work-types-cell,
    .work-type-col {
        display: none;
    }
}

/* Ensure checkbox and radio buttons are visible */
input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

/* Larger touch targets for mobile (minimum 44x44px per WCAG) */
@media (max-width: 768px) {
    .btn,
    .btn-icon,
    .nav-item a,
    .bottom-nav a,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    .bottom-nav a {
        padding: var(--spacing-2);
    }
}

/* Ensure disabled states are distinguishable */
.btn:disabled,
.btn[disabled],
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-gray-100);
    color: var(--color-gray-500);
}


/* Ensure motion preferences are respected */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .spinning {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #0f766e;
        --color-gray-500: #334155;
    }

    .card {
        border: 2px solid var(--color-gray-400);
    }

    .btn {
        border: 2px solid currentColor;
    }

    .badge {
        border: 1px solid currentColor;
    }
}

/* ==========================================================================
   Mobile Responsive Fixes
   ========================================================================== */

/* Small phone breakpoint (320-480px) */
@media (max-width: 480px) {
    /* Reduce card padding on small screens */
    .card {
        padding: var(--spacing-4);
    }

    /* Stack quick stats vertically on very small screens */
    .quick-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .quick-stats .stat-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: var(--spacing-3);
    }

    .quick-stats .stat-value {
        font-size: var(--font-size-xl);
        order: 2;
    }

    .quick-stats .stat-label {
        order: 1;
        font-size: var(--font-size-sm);
    }

    /* Profile stats grid - stack on small screens */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: var(--spacing-2) 0;
        border-bottom: 1px solid var(--color-gray-100);
    }

    .stat-item:last-child {
        border-bottom: none;
    }

    .stat-item .stat-value {
        font-size: var(--font-size-xl);
        order: 2;
    }

    .stat-item .stat-label {
        order: 1;
    }

    /* Form rows - stack on small screens */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Info row - make labels responsive */
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-1);
    }

    .info-label {
        width: auto;
    }

    /* Reduce large button padding */
    .btn-lg {
        padding: var(--spacing-3) var(--spacing-6);
        font-size: var(--font-size-base);
    }

    /* Status card adjustments */
    .status-card {
        padding: var(--spacing-3);
    }

    .check-in-status {
        padding: var(--spacing-3);
    }

    .status-icon svg {
        width: 40px;
        height: 40px;
    }

    /* Profile header */
    .profile-header {
        padding: var(--spacing-4);
    }

    .profile-avatar {
        width: 64px;
        height: 64px;
        font-size: var(--font-size-xl);
    }

    /* Modal adjustments */
    .modal {
        padding: var(--spacing-2);
    }

    .modal-content {
        max-height: 95vh;
    }

    .modal-header, .modal-body, .modal-footer {
        padding: var(--spacing-3);
    }

    /* Header title - smaller on mobile */
    .header-title {
        font-size: var(--font-size-base);
    }

    /* App main padding adjustments */
    .app-main {
        padding: 64px var(--spacing-3) 72px;
    }
}

/* Schedule calendar - responsive for mobile */
@media (max-width: 640px) {
    /* Compact calendar for mobile */
    .schedule-calendar {
        gap: var(--spacing-1);
    }

    .calendar-day {
        padding: var(--spacing-2);
    }

    .day-name {
        font-size: 10px;
    }

    .day-number {
        font-size: var(--font-size-base);
    }
}

/* Tablet and below - 2-column quick stats */
@media (min-width: 481px) and (max-width: 640px) {
    .quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Third stat spans full width */
    .quick-stats .stat-card:last-child {
        grid-column: 1 / -1;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   Coordinator Mobile Fixes
   ========================================================================== */

/* WO Summary grid - 2x2 on mobile */
@media (max-width: 640px) {
    .wo-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2);
    }

    .wo-summary-item {
        padding: var(--spacing-3);
    }

    .wo-count {
        font-size: var(--font-size-xl);
    }

    /* Stats row - 2x2 grid on mobile */
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2);
    }

    .stat-card {
        padding: var(--spacing-3);
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-2);
    }

    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .stat-icon svg {
        width: 20px;
        height: 20px;
    }

    /* Coordinator main area */
    .coord-main {
        padding: var(--spacing-4);
    }

    /* Dashboard grid - single column on mobile */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    /* Team row adjustments */
    .team-row {
        flex-direction: column;
        gap: var(--spacing-2);
    }

    /* Priority WO items */
    .priority-wo-item {
        padding: var(--spacing-2);
    }
}

/* Very small phones - stack stats */
@media (max-width: 360px) {
    .stats-row {
        grid-template-columns: 1fr;
    }

    .wo-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Work Order Edit Mode Styles
   Following shared design patterns
   Using CSS variables from design-tokens.css
   ========================================================================== */

/* Edit mode section headers - match Reach pattern */
.edit-section-header {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin: var(--spacing-4) 0 var(--spacing-2) 0;
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--color-gray-200);
}

.edit-section-header:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Form grid - 2 column responsive layout (matches Reach) */
.edit-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3) var(--spacing-6);
}

@media (max-width: 640px) {
    .edit-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Form group styling */
.edit-form-group {
    margin-bottom: var(--spacing-3);
}

.edit-form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-1);
}

/* Input styling - matches Reach .input class */
.edit-input {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.edit-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.edit-input:disabled,
.edit-input[readonly] {
    background: var(--color-gray-50);
    color: var(--color-gray-500);
    cursor: not-allowed;
}

/* Checkbox group - 2-column grid matching Reach pattern */
.edit-checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

@media (max-width: 480px) {
    .edit-checkbox-group {
        grid-template-columns: 1fr;
    }
}

/* Checkbox label - styled cards matching Reach */
.edit-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: var(--font-size-sm);
}

.edit-checkbox-label:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
}

.edit-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.edit-checkbox-label input[type="checkbox"]:checked + span {
    font-weight: 600;
    color: var(--color-gray-800);
}

/* Textarea styling */
.edit-textarea {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    font-family: inherit;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    resize: vertical;
    min-height: 80px;
}

.edit-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* Read-only info display */
.edit-readonly-info {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    background: var(--color-gray-50);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-200);
}

/* Edit mode footer */
.edit-mode-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}

/* View/Edit mode toggle */
.view-mode-content { display: block; }
.edit-mode-content { display: none; }

.edit-mode-active .view-mode-content { display: none; }
.edit-mode-active .edit-mode-content { display: block; }

/* Detail tabs (for work order modal) */
.detail-tabs {
    display: flex;
    gap: var(--spacing-1);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: var(--spacing-4);
}

.detail-tab {
    padding: var(--spacing-3) var(--spacing-4);
    background: transparent;
    border: none;
    color: var(--color-gray-600);
    cursor: pointer;
    position: relative;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.detail-tab.active {
    color: var(--color-primary);
}

.detail-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-primary);
}

.detail-tab-content {
    display: none;
}

.detail-tab-content.active {
    display: block;
}

/* Detail grid (for work order modal) */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
}

@media (max-width: 480px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.detail-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-value {
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
}

.detail-section {
    margin-bottom: var(--spacing-4);
}

.detail-section h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-2);
}

/* Work order detail modal adjustments */
.wo-detail-modal .modal-content {
    max-width: 600px;
}

.wo-detail-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wo-detail-modal .modal-header h2 {
    font-size: var(--font-size-lg);
    margin: 0;
}

/* Work type badges in detail view */
.work-type-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

/* ==========================================================================
   Schedule Page - Incident Selector
   ========================================================================== */

.schedule-subheader {
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
}

.incident-selector-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.incident-selector-inline label {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    white-space: nowrap;
}

.incident-selector-inline .incident-select {
    flex: 1;
    max-width: 300px;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.schedule-empty svg {
    margin-bottom: var(--spacing-3);
    color: var(--color-gray-400);
}

/* =================================================================
   ROLE BADGES
   ================================================================= */

/* Role badge styling */
.role-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: 9999px;
    background-color: var(--color-gray-200);
    color: var(--color-gray-600);
}

.role-badge.role-elevated {
    background-color: var(--color-primary);
    color: white;
}

/* Header role badge (next to brand) */
.header-role-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 9999px;
    background-color: var(--color-primary);
    color: white;
    margin-left: var(--spacing-2);
    vertical-align: middle;
}

/* Coordinator user menu role badge */
.user-btn .role-badge {
    margin-left: var(--spacing-1);
    font-size: 0.65rem;
    padding: 0.0625rem 0.375rem;
}

/* ==========================================================================
   Mobile Responsive Fixes (Item 45)
   ========================================================================== */

/* Root level overflow prevention */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.coordinator-shell, .app-shell {
    overflow-x: hidden;
    max-width: 100vw;
}

@media (max-width: 767px) {
    /* --- Header overflow fixes --- */
    .coord-header {
        padding: 0 var(--spacing-2);
    }

    .header-left, .header-right {
        gap: var(--spacing-2);
    }

    /* Hide username on mobile - show only avatar */
    .user-name-short {
        display: none;
    }

    /* Hide role badge in header on mobile */
    .user-btn .role-badge {
        display: none;
    }

    /* Constrain incident selector width */
    .incident-selector,
    .incident-selector-inline {
        max-width: 140px;
    }

    .incident-select {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: var(--spacing-1) var(--spacing-2);
        font-size: var(--font-size-sm);
    }

    /* Smaller user button on mobile */
    .user-btn {
        padding: var(--spacing-1);
    }

    .user-btn .avatar-sm {
        width: 28px;
        height: 28px;
        font-size: var(--font-size-xs);
    }

    /* Header role badge smaller on mobile */
    .header-role-badge {
        font-size: 0.55rem;
        padding: 0.1rem 0.35rem;
        margin-left: var(--spacing-1);
    }

    /* --- Filter bar improvements --- */
    /* Note: Main mobile filter styles are at line ~2300. These provide additional tweaks. */
    .filter-toggle span {
        font-size: 10px;
    }

    /* --- Map controls positioning --- */
    .map-controls {
        right: var(--spacing-2);
        top: auto;
        bottom: 80px;
    }

    .map-control-btn {
        width: 36px;
        height: 36px;
    }

    /* Ensure map container accounts for filter bar */
    .dispatch-map {
        margin-top: 0;
    }

    /* --- General mobile layout fixes --- */
    /* Cards should be full width on mobile */
    .wo-card, .team-card, .assignment-card, .work-order-card {
        width: 100%;
        margin: 0 0 var(--spacing-3) 0;
    }

    /* Lists should stack vertically */
    .assignment-list, .team-list, .wo-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-3);
    }

    /* Prevent grid items from overflowing */
    .grid, [class*="grid-"] {
        display: flex;
        flex-direction: column;
    }

    /* Status cards on dashboard */
    .status-card, .stat-card, .dashboard-card {
        width: 100%;
        margin-bottom: var(--spacing-3);
    }

    /* Section titles */
    .section-title {
        font-size: var(--font-size-base);
        padding: var(--spacing-2) 0;
    }

    /* Portal content padding */
    .portal-main, .portal-content {
        padding: var(--spacing-3);
    }

    /* Form sections full width */
    .form-section {
        margin-left: 0;
        margin-right: 0;
    }

    /* Dashboard stats grid */
    .stats-grid, .dashboard-stats {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-3);
    }

    /* Assignments page */
    .assignments-content {
        padding: var(--spacing-2);
    }

    .assignment-section {
        margin-bottom: var(--spacing-4);
    }

    /* Volunteer schedule page */
    .schedule-content {
        padding: var(--spacing-2);
    }

    /* Team details */
    .team-details, .member-list {
        padding: var(--spacing-2);
    }

    /* Modal adjustments for mobile */
    .modal-content {
        margin: var(--spacing-3);
        max-width: calc(100vw - var(--spacing-6));
        max-height: calc(100vh - var(--spacing-6));
    }

    /* Button groups stack on mobile */
    .btn-group, .action-buttons {
        flex-direction: column;
        gap: var(--spacing-2);
    }

    .btn-group .btn, .action-buttons .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Volunteer Status Indicators
   ========================================================================== */

.volunteer-indicators {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.volunteer-indicators .badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.volunteer-indicators .badge svg {
    flex-shrink: 0;
}

/* Check-in indicators */
.indicator-checked-in {
    background-color: var(--color-success);
    color: white;
}

.indicator-checked-out {
    background-color: var(--color-gray-400);
    color: white;
}

.indicator-not-checked-in {
    background-color: var(--color-gray-200);
    color: var(--color-gray-500);
}

/* Availability indicators */
.indicator-available {
    background-color: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.indicator-unavailable {
    background-color: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
}

/* ==========================================================================
   Skills Matching UI
   ========================================================================== */

/* Proficiency Indicators */
.prof-indicator {
    font-size: 0.65em;
    margin-left: var(--spacing-1);
}

.prof-basic { color: var(--color-gray-400); }
.prof-intermediate { color: var(--color-info); }
.prof-advanced { color: #8b5cf6; } /* Purple - not in standard palette */
.prof-certified { color: var(--color-success); font-weight: bold; }

/* Verified Badge */
.verified-badge {
    background: var(--color-success);
    color: var(--color-white);
    border-radius: var(--radius-full);
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    margin-left: var(--spacing-1);
}

/* Match Score Colors */
.match-poor { color: var(--color-danger); }
.match-partial { color: var(--color-warning); }
.match-good_match { color: var(--color-info); }
.match-perfect { color: var(--color-success); }

/* Match Details Panel */
.match-details {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3);
    display: flex;
    gap: var(--spacing-4);
    align-items: flex-start;
}

.match-score-display {
    text-align: center;
    min-width: 60px;
}

.match-score-value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-success);
}

.match-score-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.match-skills {
    flex: 1;
    font-size: var(--font-size-sm);
}

.matched-skills { color: var(--color-success); }
.missing-skills { color: var(--color-danger); margin-top: var(--spacing-1); }

/* Skills Grid for Signup */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-3);
}

.skill-selection-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.skill-selection-item .skill-label {
    font-weight: 500;
}

.skill-selection-item .cert-note {
    color: var(--color-warning);
    font-size: var(--font-size-xs);
}

/* Skill Categories */
.skill-category-group {
    margin-bottom: var(--spacing-5);
}

.category-header {
    color: var(--color-gray-500);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: var(--spacing-1);
}

/* Work Type Mini Badges */
.work-type-mini {
    background: rgba(79, 70, 229, 0.1); /* Indigo - not in standard palette */
    color: #4338ca; /* Indigo-700 - not in standard palette */
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    margin-right: var(--spacing-1);
}

/* Skills Checkboxes (for work order required skills) */
.skills-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.skill-category {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
}

.skill-category .category-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-2);
}

.skill-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-2);
}

.skill-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.skill-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

/* Skill Badge with Proficiency */
.skill-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.skill-badge.verified {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success-dark);
}

.skill-badge.prof-basic {
    border-left: 3px solid var(--color-gray-400);
}

.skill-badge.prof-intermediate {
    border-left: 3px solid var(--color-info);
}

.skill-badge.prof-advanced {
    border-left: 3px solid #8b5cf6; /* Purple - no token available */
}

.skill-badge.prof-certified {
    border-left: 3px solid var(--color-success-dark);
}

.skill-badge.more {
    background: var(--color-gray-200);
    font-weight: 500;
}

/* Capability Badges (Teams Page) */
.capability-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 3px var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-right: var(--spacing-1);
    margin-bottom: var(--spacing-1);
}

.cap-high {
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-success-dark);
}

.cap-med {
    background: rgba(59, 130, 246, 0.15);
    color: var(--color-info-dark);
}

.cap-low {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

.cap-bonus {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning-dark);
}

/* Team Match Preview */
.team-match-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: var(--spacing-2);
}

.match-preview-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

/* Proficiency Select (Signup/Edit) */
.skill-proficiency-select {
    font-size: var(--font-size-sm);
    padding: var(--spacing-1) var(--spacing-2);
}

/* ==========================================================================
   Work Types Configuration (Settings Page)
   ========================================================================== */

.work-types-list {
    margin: var(--spacing-4) 0;
}

.work-type-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-2);
    background: var(--color-gray-50);
}

.work-type-fields {
    display: flex;
    flex: 1;
    gap: var(--spacing-2);
    align-items: center;
}

.work-type-fields input {
    flex: 1;
    padding: var(--spacing-1) var(--spacing-2);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.work-type-fields input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.wt-key {
    font-family: monospace;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    min-width: 120px;
}

.add-work-type {
    display: flex;
    gap: var(--spacing-2);
    margin: var(--spacing-4) 0;
}

.add-work-type input {
    flex: 1;
    padding: var(--spacing-2);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
}

.add-work-type input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.settings-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
}

#work-types-status,
#need-types-status {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.section-description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-4);
}

.empty-message {
    color: var(--color-gray-500);
    font-style: italic;
    padding: var(--spacing-4);
    text-align: center;
}

/* Responsive adjustments for work types */
@media (max-width: 768px) {
    .work-type-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .wt-key {
        min-width: auto;
    }

    .add-work-type {
        flex-direction: column;
    }
}