/* ═══════════════════════════════════════════════════════════════════════════════
   CSS VARIABLES - MODERNIZED PALETTE
═══════════════════════════════════════════════════════════════════════════════ */
:root {
    --primary:#315f7d;
    --primary-dark:#274b63;
    --primary-light:#4f7f9c;
    --primary-lighter:#9eb5c4;
    --primary-subtle:#e8f0f5;
    --primary-bg:#f3f7fa;

    --secondary:#66727c;
    --secondary-dark:#4d5963;
    --secondary-light:#89949d;

    --success:#3f7356;
    --success-light:#56866a;
    --success-bg:#edf5f0;
    --success-border:#c7d9ce;
    --warning:#976a32;
    --warning-light:#ad7d43;
    --warning-bg:#faf3e8;
    --warning-border:#e3cfad;
    --danger:#a04444;
    --danger-light:#b55a5a;
    --danger-bg:#faeeee;
    --danger-border:#e4c3c3;
    --info:#3e6b8a;
    --info-light:#5b829c;
    --info-bg:#edf4f8;
    --info-border:#c9dbe6;

    --white:#ffffff;
    --gray-50:#f8fafb;
    --gray-100:#f1f4f6;
    --gray-200:#e1e7eb;
    --gray-300:#c9d2d9;
    --gray-400:#93a0aa;
    --gray-500:#6f7c86;
    --gray-600:#56636d;
    --gray-700:#404c55;
    --gray-800:#2c3943;
    --gray-900:#1f2b34;
    --gray-950:#17232c;

    --bg-primary:#ffffff;
    --bg-secondary:#f5f7f9;
    --bg-tertiary:#eef2f5;
    --bg-surface:#ffffff;
    --text-primary:#1f2b34;
    --text-secondary:#52606b;
    --text-muted:#77838d;
    --text-inverse:#ffffff;
    --border-color:#dfe5e9;
    --border-subtle:#edf1f3;
    --border-strong:#c7d0d7;
    --accent:#315f7d;
    --accent-2:#4f7f9c;
    --sidebar-width:260px;
    --sidebar-collapsed:72px;
    --header-height:64px;
    --mobile-header-height:56px;
    --mobile-nav-height:72px;
    --shadow-xs:0 1px 2px rgb(17 35 48 / .04);
    --shadow-sm:0 1px 3px rgb(17 35 48 / .08);
    --shadow:0 4px 12px rgb(17 35 48 / .08);
    --shadow-md:0 10px 24px rgb(17 35 48 / .10);
    --shadow-lg:0 18px 38px rgb(17 35 48 / .12);
    --shadow-xl:0 24px 54px rgb(17 35 48 / .16);
    --shadow-inner:inset 0 1px 2px rgb(17 35 48 / .05);
    --radius-xs:4px;
    --radius-sm:6px;
    --radius:7px;
    --radius-md:8px;
    --radius-lg:10px;
    --radius-xl:12px;
    --radius-2xl:16px;
    --radius-full:9999px;
    --transition-fast:.15s ease;
    --transition:.2s ease;
    --transition-slow:.3s ease;
    --touch-target:44px;
    --touch-target-lg:52px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AUTH LOADING SCREEN - Modern Full-Screen Loader
═══════════════════════════════════════════════════════════════════════════════ */
.auth-loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #203544 0%, #1b2d39 50%, #263e4f 100%);
    z-index: 10000;
}

.auth-loading-content {
    text-align: center;
    animation: fadeIn 0.5s ease-out;
}

.auth-loading-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 20px rgba(49,95,125,.28));
    animation: pulse 2s ease-in-out infinite;
}

.auth-loading-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.auth-loading-spinner {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
}

.spinner-ring:nth-child(1) {
    border-top-color: #315f7d;
    animation: spin 1.2s linear infinite;
}

.spinner-ring:nth-child(2) {
    border-right-color: #4f7f9c;
    animation: spin 1.6s linear infinite reverse;
}

.spinner-ring:nth-child(3) {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    border-bottom-color: #9eb5c4;
    animation: spin 1s linear infinite;
}

.auth-loading-text {
    color: #89949d;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 1px;
    animation: pulse 1.5s ease-in-out infinite;
}

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

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESET & BASE STYLES
═══════════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-secondary);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════════════════════════════════════ */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--text-muted);
}

.text-success {
    color: var(--success);
}

.text-warning {
    color: var(--warning);
}

.text-danger {
    color: var(--danger);
}

.text-primary {
    color: var(--primary);
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   OFFLINE & SYNC INDICATORS
═══════════════════════════════════════════════════════════════════════════════ */
.offline-indicator,
.sync-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.offline-indicator {
    background: linear-gradient(135deg, var(--warning), var(--warning-light));
    color: var(--gray-900);
}

.sync-indicator {
    background: linear-gradient(135deg, var(--info), var(--info-light));
    color: var(--white);
}

.offline-indicator.visible,
.sync-indicator.visible {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOGIN PAGE - MODERN DESIGN
═══════════════════════════════════════════════════════════════════════════════ */
#loginPage {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-950) 50%, #0c1929 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1.5rem;
}

#loginPage>div {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-xl);
}

#loginPage .opsflex-logo {
    width: 80px;
    height: auto;
    margin-bottom: 1.5rem;
}

#loginPage h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    text-align: center;
}

#loginPage .form-row {
    margin-bottom: 1rem;
}

#loginPage input[type="email"],
#loginPage input[type="password"],
#loginPage input[type="text"] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: all var(--transition);
    background: var(--white);
}

#loginPage input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}

#loginPage button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    min-height: var(--touch-target);
}

#loginPage button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(49,95,125,.28);
}

#loginPage button:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL LOADER
═══════════════════════════════════════════════════════════════════════════════ */
.loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(8px);
}

.loader-overlay.visible {
    display: flex;
}

.loader-content {
    background: linear-gradient(135deg, #203544 0%, #1b2d39 100%);
    padding: 2.5rem 3rem;
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

.loader-spinner-modern {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 auto 1.25rem;
}

.loader-spinner-modern .spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
}

.loader-spinner-modern .spinner-ring:nth-child(1) {
    border-top-color: #315f7d;
    animation: spin 1.2s linear infinite;
}

.loader-spinner-modern .spinner-ring:nth-child(2) {
    border-right-color: #4f7f9c;
    animation: spin 1.6s linear infinite reverse;
}

.loader-spinner-modern .spinner-ring:nth-child(3) {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    border-bottom-color: #9eb5c4;
    animation: spin 1s linear infinite;
}

.loader-text {
    color: #89949d;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MAIN APP LAYOUT
═══════════════════════════════════════════════════════════════════════════════ */
#mainApp {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-slow);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER - MODERNIZED
═══════════════════════════════════════════════════════════════════════════════ */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 200;
    box-shadow: var(--shadow-xs);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mobile-menu-btn {
    display: none;
    width: var(--touch-target);
    height: var(--touch-target);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--gray-600);
    transition: all var(--transition-fast);
    font-size: 1.25rem;
}

.mobile-menu-btn:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.opsflex-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.opsflex-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.opsflex-brand-text {
    display: flex;
    flex-direction: column;
}

.opsflex-brand-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.opsflex-brand-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-right input[type="search"] {
    width: 280px;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    background: var(--gray-100);
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    font-size: 0.9375rem;
    transition: all var(--transition);
}

.header-right input[type="search"]:focus {
    outline: none;
    background: var(--white);
    border-color: var(--primary);
    width: 320px;
}

.header-right .fa-search {
    position: absolute;
    right: calc(280px - 2rem);
    color: var(--gray-400);
    pointer-events: none;
}

/* Language Toggle Button */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    transition: all var(--transition);
    min-height: 36px;
}

.lang-toggle:hover {
    background: var(--gray-200);
}

.lang-toggle.active {
    background: var(--primary);
    color: var(--white);
}

.lang-toggle i {
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SIDEBAR - ENHANCED
═══════════════════════════════════════════════════════════════════════════════ */
.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--white);
    border-right: 1px solid var(--border-color);
    z-index: 150;
    overflow-y: auto;
    overflow-x: hidden;
    transition: all var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

.sidebar.collapsed .menu-text {
    display: none;
}

.sidebar.collapsed .menu-buttons button {
    justify-content: center;
    padding: 0.875rem;
}

.sidebar.collapsed .menu-buttons button[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 0.5rem);
    background: var(--gray-900);
    color: var(--white);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 200;
    pointer-events: none;
}

.sidebar.collapsed .menu-buttons button:hover[data-label]::after {
    opacity: 1;
    visibility: visible;
}

.menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--gray-600);
    font-weight: 500;
    transition: all var(--transition);
    min-height: var(--touch-target);
}

.menu-toggle:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}

.menu-toggle i {
    font-size: 1.125rem;
    width: 24px;
    text-align: center;
}

.menu-buttons {
    flex: 1;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-buttons button {
    position: relative;
    display: none;
    /* Hidden by default until permissions load */
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    color: var(--gray-600);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    transition: all var(--transition-fast);
    min-height: var(--touch-target);
}

.menu-buttons button:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.menu-buttons button.active,
.menu-buttons button.active-menu {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border-left: 4px solid var(--white);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.menu-buttons button i {
    font-size: 1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.menu-buttons button .badge {
    margin-left: auto;
    background: var(--danger);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    min-width: 20px;
    text-align: center;
}

/* Sidebar backdrop for mobile */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 140;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    backdrop-filter: blur(2px);
}

.sidebar-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
═══════════════════════════════════════════════════════════════════════════════ */
#mainApp {
    margin-left: 0;
    transition: margin-left var(--transition-slow);
}

/* Sidebar lives INSIDE #mainApp; the content shift is driven by a body-level
   class so it survives any DOM ordering. */
body.sidebar-collapsed .content { margin-left: var(--sidebar-collapsed); }
body:not(.sidebar-collapsed) .content { margin-left: var(--sidebar-width); }
@media (max-width: 768px) {
    body.sidebar-collapsed .content,
    body:not(.sidebar-collapsed) .content { margin-left: 0; }
}

.content {
    display: none;
    margin-top: var(--header-height);
    padding: 1.5rem;
    min-height: calc(100vh - var(--header-height));
}

.content.active {
    display: block;
}

.content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARDS - MODERN DESIGN
═══════════════════════════════════════════════════════════════════════════════ */
.card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition);
}

.card:hover {
    box-shadow: var(--shadow);
}

.card-content {
    padding: 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dashboard table wrapper for horizontal scroll */
.card-content .compact-table {
    min-width: 100%;
}

.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
}

.card-metric {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.card-sub {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   KPI CARDS - DASHBOARD
═══════════════════════════════════════════════════════════════════════════════ */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.kpi-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.kpi-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
    margin: 0.25rem 0;
}

.kpi-subtitle {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.kpi-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.kpi-pill {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    color: var(--gray-600);
}

.kpi-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.kpi-badge.low {
    background: var(--success-bg);
    color: var(--success);
}

.kpi-badge.medium {
    background: var(--warning-bg);
    color: var(--warning);
}

.kpi-badge.high {
    background: var(--danger-bg);
    color: var(--danger);
}

.kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

#kpiOperationalLoad .kpi-icon {
    background: var(--primary-subtle);
    color: var(--primary);
}

#kpiSlaRisk .kpi-icon {
    background: var(--warning-bg);
    color: var(--warning);
}

#kpiBacklog .kpi-icon {
    background: var(--info-bg);
    color: var(--info);
}

#kpiTechCapacity .kpi-icon {
    background: var(--success-bg);
    color: var(--success);
}

.dashboard-section-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   QUICK ACTIONS BAR - TECHNICIAN FRIENDLY
═══════════════════════════════════════════════════════════════════════════════ */
.quick-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary-bg) 0%, var(--white) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--primary-subtle);
    margin-bottom: 1.5rem;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-700);
    transition: all var(--transition);
    min-height: var(--touch-target);
    cursor: pointer;
}

.quick-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.quick-action-btn.call-btn:hover {
    border-color: var(--success);
    color: var(--success);
    background: var(--success-bg);
}

.quick-action-btn.map-btn:hover {
    border-color: var(--info);
    color: var(--info);
    background: var(--info-bg);
}

.quick-action-btn.gps-btn:hover {
    border-color: var(--warning);
    color: var(--warning);
    background: var(--warning-bg);
}

.quick-action-btn i {
    font-size: 1.125rem;
}

.quick-action-btn span {
    white-space: nowrap;
}

/* PDF Modal Quick Actions */
.pdf-quick-actions .quick-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.pdf-quick-actions .quick-action-btn {
    flex: 1;
    min-width: 140px;
    justify-content: center;
    padding: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TABLES - MODERN & POLISHED
═══════════════════════════════════════════════════════════════════════════════ */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

thead {
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
    position: sticky;
    top: 0;
    z-index: 10;
}

th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    color: var(--white);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: none;
    white-space: nowrap;
}

th:first-child {
    border-radius: var(--radius-lg) 0 0 0;
}

th:last-child {
    border-radius: 0 var(--radius-lg) 0 0;
}

td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--gray-700);
    vertical-align: middle;
}

tbody tr {
    transition: all var(--transition-fast);
}

tbody tr:hover {
    background: var(--primary-bg);
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:last-child td:first-child {
    border-radius: 0 0 0 var(--radius-lg);
}

tbody tr:last-child td:last-child {
    border-radius: 0 0 var(--radius-lg) 0;
}

/* Actions column buttons */
td.actions {
    white-space: nowrap;
}

td.actions button {
    padding: 0.5rem;
    min-height: 36px;
    min-width: 36px;
    border-radius: var(--radius);
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--border-color);
    margin-right: 0.375rem;
}

td.actions button:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-1px);
}

td.actions button:last-child {
    margin-right: 0;
}

td.actions button[title="Delete"]:hover,
td.actions button.delete-btn:hover {
    background: var(--danger);
    border-color: var(--danger);
}

.compact-table th,
.compact-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STATUS BADGES - CLEAR COLORS
═══════════════════════════════════════════════════════════════════════════════ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-badge.planeado,
.status-badge.planned {
    background: var(--gray-100);
    color: var(--gray-600);
}

.status-badge.planeado::before,
.status-badge.planned::before {
    background: var(--gray-400);
}

.status-badge.pendente,
.status-badge.pending {
    background: var(--warning-bg);
    color: var(--warning);
}

.status-badge.pendente::before,
.status-badge.pending::before {
    background: var(--warning);
}

.status-badge.em-curso,
.status-badge.in-progress {
    background: var(--info-bg);
    color: var(--info);
}

.status-badge.em-curso::before,
.status-badge.in-progress::before {
    background: var(--info);
    animation: pulse 2s ease-in-out infinite;
}

.status-badge.concluido,
.status-badge.completed {
    background: var(--success-bg);
    color: var(--success);
}

.status-badge.concluido::before,
.status-badge.completed::before {
    background: var(--success);
}

.status-badge.concluido-pendente {
    background: #fef9c3;
    color: #a16207;
}

.status-badge.concluido-pendente::before {
    background: #eab308;
}

.status-badge.cancelado,
.status-badge.cancelled {
    background: var(--danger-bg);
    color: var(--danger);
}

.status-badge.cancelado::before,
.status-badge.cancelled::before {
    background: var(--danger);
}

/* Fleet/Vehicle Status Badges */
.status-badge.authorized {
    background: var(--success-bg);
    color: var(--success);
}

.status-badge.authorized::before {
    background: var(--success);
}

.status-badge.not-authorized {
    background: var(--danger-bg);
    color: var(--danger);
}

.status-badge.not-authorized::before {
    background: var(--danger);
}

.status-badge.maintenance {
    background: var(--warning-bg);
    color: var(--warning);
}

.status-badge.maintenance::before {
    background: var(--warning);
}

.status-badge.temporary {
    background: var(--info-bg);
    color: var(--info);
}

.status-badge.temporary::before {
    background: var(--info);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTONS - MODERN & CONSISTENT
═══════════════════════════════════════════════════════════════════════════════ */
button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    min-height: var(--touch-target);
    border: 2px solid transparent;
    text-decoration: none;
    background: var(--gray-100);
    color: var(--gray-700);
}

button:hover,
.btn:hover {
    background: var(--gray-200);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

button:active,
.btn:active {
    transform: translateY(0);
}

button:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Primary Button - Main CTA */
.btn-primary,
button.btn-primary,
.add-form button,
details.add-form button,
button[onclick*="add"],
button[onclick*="Add"] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border: 2px solid var(--primary);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover,
button.btn-primary:hover,
.add-form button:hover,
details.add-form button:hover,
button[onclick*="add"]:hover,
button[onclick*="Add"]:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #1e40af 100%);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
    transform: translateY(-2px);
}

/* Secondary Button */
.btn-secondary,
button.btn-secondary {
    background: var(--white);
    color: var(--gray-700);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover,
button.btn-secondary:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

/* Success Button */
.btn-success,
button.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
    color: var(--white);
    border: 2px solid var(--success);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}

.btn-success:hover,
button.btn-success:hover {
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35);
    transform: translateY(-2px);
}

/* Warning Button */
.btn-warning,
button.btn-warning {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%);
    color: var(--white);
    border: 2px solid var(--warning);
}

/* Danger Button */
.btn-danger,
button.btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-light) 100%);
    color: var(--white);
    border: 2px solid var(--danger);
}

/* Info Button */
.btn-info,
button.btn-info {
    background: linear-gradient(135deg, var(--info) 0%, var(--info-light) 100%);
    color: var(--white);
    border: 2px solid var(--info);
}

/* Ghost/Outline Button */
.btn-ghost,
button.btn-ghost {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-ghost:hover,
button.btn-ghost:hover {
    background: var(--primary);
    color: var(--white);
}

/* Small Button */
.btn-small {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    min-height: 36px;
}

/* Icon-only Button */
.btn-icon {
    padding: 0.5rem;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
}

/* Clock In/Out Buttons - Prominent */
.clock-in-btn {
    background: linear-gradient(135deg, var(--success) 0%, #3f7356 100%);
    color: var(--white);
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius);
    box-shadow: 0 4px 6px rgba(5, 150, 105, 0.25);
}

.clock-in-btn:hover {
    box-shadow: 0 6px 12px rgba(5, 150, 105, 0.35);
    transform: translateY(-2px);
}

.clock-out-btn {
    background: linear-gradient(135deg, var(--danger) 0%, #a04444 100%);
    color: var(--white);
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius);
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.25);
}

.clock-out-btn:hover {
    box-shadow: 0 6px 12px rgba(220, 38, 38, 0.35);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORMS - MODERN STYLING
═══════════════════════════════════════════════════════════════════════════════ */
.form-container {
    padding: 1.5rem;
}

.form-row {
    margin-bottom: 1rem;
}

.form-row label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.375rem;
}

.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: all var(--transition);
    background: var(--white);
    min-height: var(--touch-target);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}

.form-row input::placeholder,
.form-row textarea::placeholder {
    color: var(--gray-400);
}

.form-row textarea {
    min-height: 100px;
    resize: vertical;
}

.form-row .error-message {
    display: block;
    font-size: 0.8125rem;
    color: var(--danger);
    margin-top: 0.25rem;
}

/* Field error highlighting */
.field-error,
input.field-error,
select.field-error,
textarea.field-error {
    border-color: #a04444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

.field-error:focus {
    border-color: #a04444 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3) !important;
}

/* Form Grid */
.pdf-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.pdf-form-grid .full-width {
    grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ADD FORMS (Details/Summary) - POLISHED
═══════════════════════════════════════════════════════════════════════════════ */
.add-form {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.add-form:hover {
    border-color: var(--primary-lighter);
}

.add-form summary {
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    transition: all var(--transition);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--touch-target);
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
    border-left: 4px solid var(--primary);
}

.add-form summary::-webkit-details-marker {
    display: none;
}

.add-form summary:hover {
    background: linear-gradient(135deg, var(--primary-bg) 0%, var(--white) 100%);
    color: var(--primary);
}

.add-form[open] summary {
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--primary-bg) 0%, var(--white) 100%);
    color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INLINE ADD FORMS - Compact Row Layout
═══════════════════════════════════════════════════════════════════════════════ */
.add-form .inline-form,
.inline-add-form,
.add-form>div:not(summary) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem;
    align-items: flex-end;
    background: var(--white);
}

.add-form .inline-form .form-row,
.inline-add-form .form-row,
.add-form>div:not(summary) .form-row {
    flex: 1 1 150px;
    max-width: 200px;
    margin-bottom: 0;
}

.add-form .inline-form .form-row label,
.inline-add-form .form-row label,
.add-form>div:not(summary) .form-row label {
    font-size: 0.75rem;
    margin-bottom: 0.375rem;
    color: var(--gray-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.add-form .inline-form .form-row input,
.add-form .inline-form .form-row select,
.inline-add-form .form-row input,
.inline-add-form .form-row select,
.add-form>div:not(summary) .form-row input,
.add-form>div:not(summary) .form-row select {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
}

.add-form .inline-form .form-row input:focus,
.add-form .inline-form .form-row select:focus,
.inline-add-form .form-row input:focus,
.inline-add-form .form-row select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
    outline: none;
}

.add-form .inline-form button[type="submit"],
.add-form .inline-form button.btn-primary,
.add-form .inline-form>button,
.inline-add-form button[type="submit"],
.inline-add-form button.btn-primary,
.add-form>div:not(summary)>button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.625rem 1.25rem;
    height: fit-content;
    align-self: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INLINE TABLE EDITING - Clean & Minimal
═══════════════════════════════════════════════════════════════════════════════ */
table input,
table select {
    border: 2px solid var(--primary-lighter);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: var(--white);
    width: 100%;
    min-width: 80px;
    transition: all var(--transition-fast);
}

table input:focus,
table select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}

table input[type="date"] {
    min-width: 130px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MODALS & DIALOGS - MODERN & POLISHED
═══════════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    backdrop-filter: blur(8px);
}

.modal {
    background: var(--white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-subtle);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal h3 {
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    border-bottom: none;
}

.modal h3 i {
    color: var(--primary-lighter);
    font-size: 1.25rem;
}

.modal>p,
.modal>div:not(.modal-buttons) {
    padding: 1.5rem;
    color: var(--gray-600);
    line-height: 1.6;
}

.modal-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--gray-50);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.modal-buttons button {
    min-width: 100px;
}

.modal-buttons button:first-child {
    background: var(--white);
    color: var(--gray-700);
    border: 2px solid var(--border-color);
}

.modal-buttons button:first-child:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.modal-buttons button:last-child {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border: 2px solid var(--primary);
}

/* Confirmation Dialog Specific */
.confirm-modal .modal-buttons button:last-child,
.modal-buttons button.confirm-btn {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-light) 100%);
    border-color: var(--danger);
}

.confirm-modal .modal-buttons button:last-child:hover,
.modal-buttons button.confirm-btn:hover {
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35);
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem;
    line-height: 1;
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, 0.1);
    border: none;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    transform: scale(1.1);
}

/* PDF Modal - Large */
.pdf-modal {
    max-width: 900px;
    position: relative;
}

.pdf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: 10;
}

.pdf-modal-header h3 {
    padding: 0;
    border: none;
    margin: 0;
    font-size: 1rem;
}

/* PDF Header Action Icons */
.pdf-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.pdf-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--white);
    color: var(--gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

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

.pdf-icon-btn.close:hover {
    background: var(--danger);
    color: var(--white);
    border-color: var(--danger);
}

/* Mobile responsiveness for PDF modal icons */
@media (max-width: 480px) {
    .pdf-modal-header {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .pdf-modal-header h3 {
        font-size: 0.875rem;
        flex: 1;
        min-width: 0;
    }

    .pdf-header-actions {
        gap: 0.375rem;
    }

    .pdf-icon-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 0.875rem;
    }
}

@media (max-width: 360px) {
    .pdf-icon-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.75rem;
    }

    .pdf-header-actions {
        gap: 0.25rem;
    }
}

.pdf-form-container {
    padding: 1.5rem;
}

.pdf-section {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

.pdf-section h4 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pdf-section h4 i {
    color: var(--primary);
}

.pdf-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.pdf-type-badge.install {
    background: var(--primary-subtle);
    color: var(--primary);
}

.pdf-type-badge.callout {
    background: var(--warning-bg);
    color: var(--warning);
}

.pdf-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--gray-50);
    position: sticky;
    bottom: 0;
}

/* Signature Pad */
.signature-pad-container {
    background: var(--white);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius);
    height: 120px;
    margin-bottom: 0.5rem;
}

.signature-pad-container canvas {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
}

.signatures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.signature-box label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

/* Rating Buttons */
.rating-buttons {
    display: flex;
    gap: 0.5rem;
}

.rating-buttons button {
    width: 40px;
    height: 40px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    font-weight: 600;
    color: var(--gray-500);
    transition: all var(--transition);
}

.rating-buttons button:hover {
    border-color: var(--warning);
    color: var(--warning);
}

.rating-buttons button.selected {
    background: var(--warning);
    border-color: var(--warning);
    color: var(--white);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════════════════════════════ */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--gray-900);
    color: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    max-width: 400px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
}

.toast.error {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-light) 100%);
}

.toast.warning {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%);
    color: var(--gray-900);
}

.toast.info {
    background: linear-gradient(135deg, var(--info) 0%, var(--info-light) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CHARTS
═══════════════════════════════════════════════════════════════════════════════ */
.card-chart {
    padding: 1.25rem;
}

.chart-header {
    margin-bottom: 1rem;
}

.chart-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    display: block;
}

.chart-subtitle {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.chart-legend {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.375rem;
}

.legend-capacity {
    background: var(--primary);
}

.legend-demand {
    background: var(--warning);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL SEARCH
═══════════════════════════════════════════════════════════════════════════════ */
.global-search-container {
    position: fixed;
    top: var(--header-height);
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    max-height: 60vh;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    z-index: 300;
    border: 1px solid var(--border-color);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MY WORK ORDERS - TECH FOCUSED VIEW
═══════════════════════════════════════════════════════════════════════════════ */
.work-orders-cards,
.mobile-work-orders {
    margin-top: 1rem;
}

.work-order-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all var(--transition);
}

.work-order-card:hover {
    box-shadow: var(--shadow);
}

.work-order-card.priority-high {
    border-left: 4px solid var(--danger);
}

.work-order-card.priority-medium {
    border-left: 4px solid var(--warning);
}

.work-order-card.priority-normal {
    border-left: 4px solid var(--primary);
}

/* Work Order Card - Header */
.work-order-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    gap: 1rem;
}

.work-order-card-ticket {
    font-weight: 600;
    color: var(--gray-900);
}

/* Work Order Card - Body */
.work-order-card-body {
    padding: 1rem 1.25rem;
}

.work-order-card-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.work-order-card-row:last-child {
    border-bottom: none;
}

.work-order-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    flex-shrink: 0;
}

.work-order-card-value {
    font-size: 0.875rem;
    color: var(--gray-700);
    text-align: right;
    word-break: break-word;
}

.work-order-card-value.card-comment {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Work Order Card - Actions */
.work-order-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-subtle);
}

.work-order-card-actions button {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 80px;
    padding: 0.75rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: all var(--transition);
}

@media (min-width: 400px) {
    .work-order-card-actions button {
        flex: 1 1 auto;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        gap: 0.5rem;
    }
}

.card-start-btn {
    background: var(--success);
    color: var(--white);
    border: none;
}

.card-start-btn:hover {
    background: var(--success-dark, #15803d);
}

.card-start-btn.active {
    background: var(--danger);
}

.card-start-btn.active:hover {
    background: var(--danger-dark, #b91c1c);
}

.card-pdf-btn {
    background: var(--white);
    color: var(--gray-700);
    border: 1px solid var(--border-color);
}

.card-pdf-btn:hover {
    background: var(--gray-50);
    border-color: var(--primary);
    color: var(--primary);
}

.card-call-btn {
    background: var(--success);
    color: var(--white);
    border: 1px solid var(--success);
}

.card-call-btn:hover {
    background: #3f7356;
    border-color: #3f7356;
}

.work-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    gap: 1rem;
}

.work-order-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
}

.work-order-ticket {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.work-order-body {
    padding: 1rem 1.25rem;
}

.work-order-detail {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.work-order-detail i {
    width: 20px;
    color: var(--gray-400);
    text-align: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.work-order-detail-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.work-order-detail-value {
    font-size: 0.9375rem;
    color: var(--gray-700);
}

.work-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--gray-50);
}

.work-order-actions button {
    flex: 1;
    min-width: 100px;
}

/* Timer Display */
#timerDisplay {
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    padding: 0.5rem 1rem;
    background: var(--primary-subtle);
    border-radius: var(--radius);
}

#timerStatus {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

#timerStatus.active {
    color: var(--success);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PASSWORD STRENGTH
═══════════════════════════════════════════════════════════════════════════════ */
.password-strength-bar {
    height: 4px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.password-strength-fill {
    height: 100%;
    width: 0%;
    transition: all var(--transition);
    border-radius: var(--radius-full);
}

.password-strength-fill.weak {
    width: 25%;
    background: var(--danger);
}

.password-strength-fill.fair {
    width: 50%;
    background: var(--warning);
}

.password-strength-fill.good {
    width: 75%;
    background: var(--info);
}

.password-strength-fill.strong {
    width: 100%;
    background: var(--success);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PERMISSIONS GRID
═══════════════════════════════════════════════════════════════════════════════ */
.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.permissions-grid label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--gray-50);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.permissions-grid label:hover {
    background: var(--gray-100);
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   EMAIL STATUS
═══════════════════════════════════════════════════════════════════════════════ */
.email-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
}

.email-status.sending {
    background: var(--info-bg);
    color: var(--info);
}

.email-status.success {
    background: var(--success-bg);
    color: var(--success);
}

.email-status.error {
    background: var(--danger-bg);
    color: var(--danger);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE - ENHANCED
═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .header-right input[type="search"] {
        width: 200px;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: var(--mobile-header-height);
    }

    .mobile-menu-btn {
        display: flex;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        z-index: 200;
        padding-top: var(--header-height);
    }

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

    #mainApp {
        margin-left: 0 !important;
    }

    .content {
        margin-left: 0 !important;
        padding: 1rem;
    }

    .opsflex-brand-subtitle {
        display: none;
    }

    .kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .kpi-card {
        padding: 1rem;
    }

    .kpi-value {
        font-size: 1.25rem;
    }

    .kpi-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .table-responsive {
        margin: 0 -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    table {
        font-size: 0.875rem;
    }

    th,
    td {
        padding: 0.75rem 0.5rem;
    }

    .modal {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }

    .pdf-modal {
        max-width: calc(100% - 1rem);
    }

    .pdf-form-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions-bar {
        flex-direction: column;
    }

    .quick-action-btn {
        width: 100%;
    }

    #toast-container {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .toast {
        min-width: auto;
    }

    /* Touch-friendly form elements */
    .form-row input,
    .form-row select,
    .form-row textarea {
        font-size: 16px;
        /* Prevents iOS zoom */
    }

    /* Larger action buttons for touch */
    .work-order-actions button {
        min-height: 48px;
        font-size: 0.9375rem;
    }
}

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

    .kpi-card {
        flex-direction: column;
        gap: 0.75rem;
    }

    .kpi-icon {
        order: -1;
    }

    .modal-buttons {
        flex-direction: column;
    }

    .modal-buttons button {
        width: 100%;
    }

    .signatures-grid {
        grid-template-columns: 1fr;
    }

    .pdf-modal-actions {
        flex-direction: column;
    }

    .pdf-modal-actions button {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRINT STYLES
═══════════════════════════════════════════════════════════════════════════════ */
@media print {

    .sidebar,
    .main-header,
    .mobile-menu-btn,
    #toast-container,
    .sidebar-backdrop,
    .modal-overlay {
        display: none !important;
    }

    .content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }

    body {
        background: white;
        color: black;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LANGUAGE TOGGLE IN HEADER
═══════════════════════════════════════════════════════════════════════════════ */
.lang-switch {
    display: flex;
    align-items: center;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    padding: 0.25rem;
    gap: 0;
}

.lang-switch button {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    min-height: 32px;
}

.lang-switch button:hover {
    color: var(--gray-700);
}

.lang-switch button.active {
    background: var(--white);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MESSAGING SYSTEM STYLES
═══════════════════════════════════════════════════════════════════════════════ */

/* Badge Styles for Notifications */
.badge.message-badge {
    background: var(--primary);
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Chat button badge on work order cards */
.card-chat-btn {
    background: var(--primary-subtle);
    color: var(--primary);
    border: 1px solid var(--primary-light);
    position: relative;
}

.card-chat-btn:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.card-chat-btn .chat-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--white);
    background: var(--danger);
    border-radius: var(--radius-full);
    display: none;
    align-items: center;
    justify-content: center;
    animation: badge-pulse 2s ease-in-out infinite;
}

.card-chat-btn .chat-badge.has-messages {
    display: flex;
}

/* Chat Modal Styles */
.chat-modal {
    max-width: 480px;
    width: 100%;
    height: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.chat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--primary);
    color: var(--white);
}

.chat-header-info h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-subtitle {
    font-size: 0.75rem;
    opacity: 0.9;
    margin-top: 0.25rem;
    display: block;
}

.chat-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius);
    color: var(--white);
    transition: all var(--transition-fast);
}

.chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.chat-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: var(--gray-50);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chat-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-align: center;
    padding: 2rem;
}

.chat-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Chat Message Bubbles */
.chat-message {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    position: relative;
    word-break: break-word;
}

.chat-message.sent {
    background: var(--primary);
    color: var(--white);
    margin-left: auto;
    border-bottom-right-radius: var(--radius-xs);
}

.chat-message.received {
    background: var(--white);
    color: var(--gray-900);
    margin-right: auto;
    border-bottom-left-radius: var(--radius-xs);
    box-shadow: var(--shadow-sm);
}

.chat-message-sender {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.8;
    margin-bottom: 0.25rem;
    display: block;
}

.chat-message-text {
    font-size: 0.9rem;
    line-height: 1.4;
}

.chat-message-time {
    font-size: 0.65rem;
    opacity: 0.7;
    margin-top: 0.25rem;
    display: block;
    text-align: right;
}

.chat-message.received .chat-message-time {
    text-align: left;
}

/* Chat Input Area */
.chat-input-container {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--white);
    border-top: 1px solid var(--border-color);
}

.chat-input-container textarea {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    resize: none;
    font-size: 0.9rem;
    line-height: 1.4;
    transition: border-color var(--transition-fast);
}

.chat-input-container textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.chat-send-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius);
    font-size: 1.125rem;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.chat-send-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.chat-send-btn:disabled {
    background: var(--gray-300);
    cursor: not-allowed;
    transform: none;
}

/* Messages Tab Styles */
.messages-list-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message-thread-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--transition);
}

.message-thread-card:hover {
    box-shadow: var(--shadow);
}

.message-thread-card.unread {
    border-left: 4px solid var(--primary);
    background: var(--primary-bg);
}

.message-thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    gap: 1rem;
    cursor: pointer;
}

.message-thread-header:hover {
    background: var(--gray-50);
}

.message-thread-info {
    flex: 1;
}

.message-thread-ticket {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 0.9375rem;
}

.message-thread-customer {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.message-thread-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.message-thread-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.message-thread-badge {
    background: var(--primary);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
}

.message-thread-preview {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    color: var(--gray-600);
    border-bottom: 1px solid var(--border-subtle);
}

.message-thread-preview strong {
    color: var(--gray-800);
}

.message-thread-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--gray-50);
}

.message-thread-actions button {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: all var(--transition-fast);
}

.btn-reply {
    background: var(--primary);
    color: var(--white);
}

.btn-reply:hover {
    background: var(--primary-dark);
}

.btn-mark-read {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-mark-read:hover {
    background: var(--gray-300);
}

/* Mobile responsive for chat */
@media (max-width: 768px) {
    .chat-modal {
        height: 90vh;
        max-height: 90vh;
        border-radius: var(--radius-lg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UNIFIED MODAL HEADER STYLES - Consistent across all modals
═══════════════════════════════════════════════════════════════════════════════ */

/* Base modal header - applies to all modals */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
    color: var(--white);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.modal-header h3 {
    margin: 0;
    padding: 0;
    background: none;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--white);
    border-radius: 0;
}

.modal-header h3 i {
    color: var(--primary-lighter);
    font-size: 1.125rem;
}

.modal-header-info {
    flex: 1;
}

.modal-header-subtitle {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
    display: block;
}

/* Header action buttons */
.modal-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.modal-header-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius);
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-header-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.modal-header-btn.close-btn:hover {
    background: var(--danger);
}

/* Override for PDF modal to use unified style */
.pdf-modal .pdf-modal-header {
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
    color: var(--white);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: none;
}

.pdf-modal .pdf-modal-header h3 {
    color: var(--white);
    background: none;
    padding: 0;
}

.pdf-modal .pdf-modal-header h3 i {
    color: var(--primary-lighter);
}

.pdf-modal .pdf-icon-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: var(--white);
}

.pdf-modal .pdf-icon-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--white);
    border: none;
}

.pdf-modal .pdf-icon-btn.close:hover {
    background: var(--danger);
}

/* Chat modal header - use same dark style as other modals */
.chat-modal .chat-modal-header {
    background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.chat-modal .chat-modal-header h3 i,
.chat-modal .chat-header-info h3 i {
    color: var(--primary-lighter);
}

/* Ensure all modal content doesn't have duplicate header styling */
.modal.pdf-modal>h3,
.modal.chat-modal>h3 {
    display: none;
}

/* Simple modals - ensure consistent close button positioning */
.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: var(--danger);
}

/* ONEWEB Tasks Form Button - Force proper display */
#onewebTasksForm .form-container>button {
    flex: 1 1 100%;
    margin-top: 1rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    padding: 0.75rem 2rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    transition: all 0.2s ease;
}

#onewebTasksForm .form-container>button:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #1e40af 100%);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
    transform: translateY(-2px);
}

/* Tech-Friendly UX Improvements */
@media (max-width: 768px) {

    button,
    .btn,
    .quick-action-btn {
        min-height: 52px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
    }

    input,
    select,
    textarea {
        min-height: 52px !important;
        font-size: 16px !important;
    }

    .status-badge {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
    }
}

/* Clearer timer display */
#timerDisplay {
    font-size: 1.75rem !important;
    padding: 1rem 1.5rem !important;
    background: linear-gradient(135deg, #56866a 0%, #3f7356 100%) !important;
    color: white !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

/* Photo section styling */
.pdf-section {
    background: #f9fafb;
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

#photoPreviewContainer>div {
    transition: transform 0.2s;
}

#photoPreviewContainer>div:hover {
    transform: scale(1.05);
}

#photoPreviewContainer button:hover {
    background: rgba(220, 38, 38, 1) !important;
    transform: scale(1.1);
}

.modal-header-btn.close-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}
/* Collapsible Details Styling */
details summary {
    user-select: none;
}
details summary::-webkit-details-marker {
    display: none;
}
details[open] summary .fa-chevron-down {
    transform: rotate(0deg);
}
details:not([open]) summary .fa-chevron-down {
    transform: rotate(-90deg);
}
details summary:hover {
    color: var(--primary);
}

/* Compact KPI Grid for smaller screens */
@media (max-width: 900px) {
    #dashboard > div:first-of-type {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 500px) {
    #dashboard > div:first-of-type {
        grid-template-columns: 1fr !important;
    }
}

/* ───────────────── OpsFlex v5 — consolidated dashboard, My Day, SLA, Map ───────────────── */
@keyframes pulse-live {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.6) }
    70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0) }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0) }
}
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #56866a;
    animation: pulse-live 1.6s infinite;
}

/* Field Now stat tiles */
.field-now-stat {
    text-align: center;
    padding: 0.5rem 0.4rem;
    border-radius: 10px;
    border: 1px solid var(--border-subtle, #444c47);
    background: rgba(255,255,255,0.02);
}
.field-now-stat .fn-value { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.field-now-stat .fn-label { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.25rem; }
.field-now-stat.ok      { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.3); }
.field-now-stat.ok      .fn-value { color: #56866a; }
.field-now-stat.neutral { background: rgba(100,116,139,.08); border-color: rgba(100,116,139,.3); }
.field-now-stat.neutral .fn-value { color: #89949d; }
.field-now-stat.warn    { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); }
.field-now-stat.warn    .fn-value { color: #ad7d43; }
.field-now-stat.danger  { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); }
.field-now-stat.danger  .fn-value { color: #b55a5a; }

/* SLA traffic light */
.sla-cell {
    text-align: center;
    padding: 0.55rem 0.4rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 700;
}
.sla-cell-value { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.sla-cell-label { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.25rem; }
.sla-green { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.35); color: #56866a; }
.sla-amber { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); color: #ad7d43; }
.sla-red   { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.35);  color: #b55a5a; }

/* Tech leaderboard rows */
.leaderboard-row {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-subtle, #444c47);
    font-size: 0.82rem;
}
.leaderboard-rank {
    font-weight: 800;
    text-align: center;
    color: var(--text-muted);
}
.leaderboard-rank.gold   { color: #af956b; }
.leaderboard-rank.silver { color: #c9d2d9; }
.leaderboard-rank.bronze { color: #f97316; }
.leaderboard-name   { font-weight: 600; }
.leaderboard-stat   { font-weight: 700; }
.leaderboard-bar    {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #56866a var(--ontime,0%), rgba(239,68,68,.35) 0);
    margin-top: 0.2rem;
}

/* My Day */
.my-day-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.06);
    color: #f8fafb;
    font-size: 0.72rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.my-day-counter strong { font-size: 0.95rem; font-weight: 800; }
.my-day-counter.ok    { background: rgba(16,185,129,.18); color: #6ee7b7; }
.my-day-counter.warn  { background: rgba(245,158,11,.18); color: #fcd34d; }

.my-day-card {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    background: var(--bg-surface, rgba(255,255,255,0.02));
    border: 1px solid var(--border-subtle, #444c47);
    border-radius: 12px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.my-day-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.my-day-card.next  { border-color: #ad7d43; box-shadow: 0 6px 18px rgba(245,158,11,.18); }
.my-day-card.active{ border-color: #56866a; box-shadow: 0 6px 18px rgba(16,185,129,.22); }
.my-day-card.done  { opacity: .6; }
.my-day-card.com-pendente {
    border-color: #ad7d43;
    box-shadow: 0 6px 18px rgba(245,158,11,.22);
    background: linear-gradient(180deg, rgba(245,158,11,.06), transparent);
}
/* COM PENDENTE ribbon removed — the status chip in the card body
   already shows the status, and the absolute ribbon was overlapping
   the right-side "Reabrir" button (grid col 3). */
.my-day-time {
    text-align: center;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.05;
    color: #f1f4f6;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 0.45rem 0.2rem;
}
.my-day-time small { display: block; font-size: 0.6rem; font-weight: 500; color: var(--text-muted); }
.my-day-body strong { font-size: 0.95rem; display: block; }
.my-day-body .my-day-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.my-day-status {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.my-day-status.planeado { background: rgba(49,95,125,.18); color: #bcc8cf; }
.my-day-status.em-curso { background: rgba(245,158,11,.18); color: #fcd34d; }
.my-day-status.pendente { background: rgba(251,113,133,.18); color: #fda4af; }
.my-day-status.concluido,
.my-day-status.concluido-pendente { background: rgba(16,185,129,.18); color: #6ee7b7; }
.my-day-action {
    background: linear-gradient(135deg,#56866a,#3f7356);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(16,185,129,.25);
}
.my-day-action.stop { background: linear-gradient(135deg,#b55a5a,#a04444); box-shadow: 0 6px 16px rgba(239,68,68,.25); }
.my-day-action.pendente {
    background: linear-gradient(135deg,#ad7d43,#976a32);
    color: #fff;
    box-shadow: 0 6px 16px rgba(245,158,11,.28);
}
.my-day-action.disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
@media (max-width: 600px) {
    .my-day-card { grid-template-columns: 48px 1fr; }
    .my-day-action { grid-column: 1 / -1; justify-self: stretch; padding: 0.6rem; }
    .ops-row-2col { grid-template-columns: 1fr !important; }
    .ops-kpi-row  { grid-template-columns: repeat(2,1fr) !important; }
    #pipelineFunnel { grid-template-columns: repeat(2,1fr) !important; gap:0.3rem !important; }
}

/* Pipeline funnel stage hover */
.pipeline-stage { transition: transform .12s ease; }
.pipeline-stage:hover { transform: translateY(-1px); }

/* Sticky timer chip when on a small screen — prevent overlap with bottom bars */
@media (max-width: 600px) {
    #globalTimerChip { bottom: 70px !important; right: 10px !important; }
}

/* Payments calendar refinement */
.payments-calendar td.month-paid    { background: rgba(16,185,129,.18); color: #6ee7b7; text-align: center; }
.payments-calendar td.month-unpaid  { color: var(--text-muted); text-align: center; }


/* ───────────── OpsFlex v6 — user mgmt cards, perm chips, IP rows, travel widget ───────────── */

/* User management compact rows */
.user-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.55rem 0.7rem;
    background: var(--bg-surface, rgba(255,255,255,0.02));
    border: 1px solid var(--border-subtle, #444c47);
    border-radius: 12px;
    transition: border-color .15s ease, transform .15s ease;
}
.user-row:hover { border-color: var(--primary, #315f7d); transform: translateY(-1px); }
.user-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #315f7d, #6d7d75);
    color: #fff;
    font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem;
    letter-spacing: .03em;
}
.user-meta { min-width: 0; }
.user-name {
    font-weight: 700; font-size: .9rem;
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.user-email { color: var(--text-muted); font-size: .75rem; margin-top: .1rem; }
.user-perms {
    display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .35rem;
}
.user-actions { display: inline-flex; gap: .3rem; }
.user-mgmt-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-subtle, #444c47);
    color: inherit;
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.user-mgmt-btn:hover { background: rgba(49,95,125,.15); border-color: #315f7d; color: #bcc8cf; }
.user-mgmt-btn.danger:hover { background: rgba(239,68,68,.15); border-color: #b55a5a; color: #fca5a5; }

.perm-chip {
    display: inline-flex; align-items: center;
    background: rgba(49,95,125,.12);
    color: #bcc8cf;
    border: 1px solid rgba(49,95,125,.25);
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.4;
}
.perm-chip.more { background: rgba(255,255,255,.06); color: var(--text-muted); border-color: var(--border-subtle); }
.perm-chip.empty { background: rgba(239,68,68,.1); color: #fca5a5; border-color: rgba(239,68,68,.3); }

@media (max-width: 600px) {
    .user-row { grid-template-columns: 40px 1fr; }
    .user-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: .35rem; }
}

/* IP Manager rows */
.ip-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.55rem 0.75rem;
    background: var(--bg-surface, rgba(255,255,255,0.02));
    border: 1px solid var(--border-subtle, #444c47);
    border-radius: 10px;
}
.ip-row:hover { border-color: var(--primary, #315f7d); }
.ip-row-ip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; }
.ip-row-ip strong { font-weight: 700; }
.ip-row-ip .ip-cidr {
    margin-left: .5rem;
    font-size: .7rem;
    color: var(--text-muted);
    background: rgba(255,255,255,.04);
    padding: .1rem .4rem;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
}
.ip-row-label { font-size: .8rem; color: var(--text-muted); margin-top: .1rem; }
.ip-row-notes { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; opacity: .85; }
.ip-row-actions { display: inline-flex; gap: .25rem; }
.ip-group-header {
    font-weight: 700; font-size: .75rem;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted);
    padding: .5rem .25rem .25rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-top: .25rem;
}
@media (max-width: 600px) {
    .ip-row { grid-template-columns: 1fr; }
    .ip-row-meta, .ip-row-actions { justify-self: flex-end; }
}

/* Techs on the Road widget — readable card */
.travel-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(49,95,125,0.06), rgba(255,255,255,0.02));
    border: 1px solid var(--border-subtle, #444c47);
}
.travel-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.travel-province {
    font-weight: 800;
    font-size: 1.1rem;
    color: #ffffff;
    display: inline-flex; align-items: center; gap: .5rem;
    letter-spacing: .015em;
    padding: .25rem .65rem;
    background: rgba(15, 23, 42, .85);
    border: 1px solid rgba(251, 191, 36, .55);
    border-radius: 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,.65);
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.travel-province i { color: #af956b; font-size: 1rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.travel-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.travel-badge.ok      { background: rgba(16,185,129,.18); color: #6ee7b7; border: 1px solid rgba(16,185,129,.35); }
.travel-badge.warn    { background: rgba(245,158,11,.18); color: #fcd34d; border: 1px solid rgba(245,158,11,.35); }
.travel-badge.danger  { background: rgba(239,68,68,.18);  color: #fca5a5; border: 1px solid rgba(239,68,68,.35); }
.travel-badge.neutral { background: rgba(148,163,184,.15);color: #c9d2d9; border: 1px solid rgba(148,163,184,.3); }
.travel-techs {
    display: flex; gap: .3rem; flex-wrap: wrap;
}
.travel-tech-pill {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,.07);
    color: #e1e7eb;
    border: 1px solid var(--border-subtle, #444c47);
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
}
.travel-tech-pill.empty { background: rgba(239,68,68,.1); color: #fca5a5; border-color: rgba(239,68,68,.3); }
.travel-card-foot {
    font-size: .75rem;
    color: #89949d;
    font-weight: 500;
}
.travel-progress {
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
}
.travel-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ad7d43, #b55a5a);
    transition: width .4s ease;
}

/* Ops map — distinct pulsing emerald pin for clocked-in techs */
.tech-pin {
    filter: drop-shadow(0 0 6px rgba(16,185,129,.65));
    animation: tech-pin-pulse 2.4s ease-in-out infinite;
}
@keyframes tech-pin-pulse {
    0%, 100% { stroke-opacity: 1;   stroke-width: 3;  }
    50%      { stroke-opacity: .55; stroke-width: 5;  }
}

/* Compact dashboard — only mode. Hide auxiliary cards always. */
.dashboard-extra { display: none !important; }

/* Attention card — list items */
.attention-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .55rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, .55);
    border-left: 3px solid var(--accent-color, #b55a5a);
    font-size: .82rem;
}
.attention-item .a-icon { width: 18px; text-align: center; }
.attention-item .a-text { flex: 1; color: #e1e7eb; }
.attention-item .a-meta { color: #89949d; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.attention-item.attention-empty {
    border-left-color: #56866a;
    color: #6ee7b7;
    font-weight: 600;
}

/* Tech timeline modal */
.tech-timeline-modal {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
    display: none; align-items: flex-start; justify-content: center;
    padding: 5vh 1rem 1rem;
    overflow-y: auto;
}
.tech-timeline-modal.open { display: flex; }
.tech-timeline-card {
    background: #1b2d39; border-radius: 14px; max-width: 720px; width: 100%;
    padding: 1.25rem 1.4rem; color: #e1e7eb;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.tech-timeline-card h3 { margin: 0; font-size: 1.1rem; color: #f8fafb; }
.tech-timeline-line {
    position: relative; padding-left: 1.5rem; margin-top: 1rem;
    border-left: 2px solid rgba(49,95,125,.35);
}
.tech-timeline-entry {
    position: relative; margin-bottom: 1rem;
}
.tech-timeline-entry::before {
    content: ""; position: absolute; left: -1.85rem; top: .3rem;
    width: 14px; height: 14px; border-radius: 50%; background: #315f7d; border: 3px solid #1b2d39;
}
.tech-timeline-entry.entry-stop::before { background: #56866a; }
.tech-timeline-entry.entry-active::before { background: #ad7d43; animation: tech-pin-pulse 2s ease-in-out infinite; }
.tech-timeline-entry .e-time { font-size: .75rem; color: #89949d; font-weight: 600; }
.tech-timeline-entry .e-title { font-weight: 700; color: #f8fafb; margin-top: .1rem; }
.tech-timeline-entry .e-meta { font-size: .8rem; color: #c9d2d9; }

/* Swipe overlays on My Day cards */
.my-day-card { position: relative; touch-action: pan-y; }
.my-day-card .swipe-feedback {
    position: absolute; inset: 0; border-radius: inherit;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1.1rem; pointer-events: none;
    opacity: 0; transition: opacity .15s ease;
}
.my-day-card .swipe-feedback.right { background: linear-gradient(90deg, rgba(245,158,11,.35), rgba(245,158,11,.7)); }
.my-day-card .swipe-feedback.left  { background: linear-gradient(270deg, rgba(16,185,129,.35), rgba(16,185,129,.7)); }
.my-day-card .swipe-feedback.show  { opacity: 1; }

/* Permissions modal grid lighter look */
#permsModalGrid label:hover { background: rgba(49,95,125,.08) !important; }


/* ════════════════════════════════════════════════════════════════════════
   DROP 15 — readability, status palette, polish
   ════════════════════════════════════════════════════════════════════════ */

/* Canonical status colour palette (used wherever a ticket status is shown).
   These overrides win because they're appended last. */
:root {
    --st-planeado:    #315f7d;
    --st-em-curso:    #ad7d43;
    --st-pendente:    #fb7185;
    --st-cpendente:   #71877d;
    --st-concluido:   #56866a;
    --st-cancelar:    #66727c;
}

/* Universal status chip — any element with `.status-chip` + a status modifier
   gets consistent colours, padding, and contrast across the whole app. */
.status-chip {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .015em;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.status-chip.planeado          { background: var(--st-planeado); }
.status-chip.em-curso          { background: var(--st-em-curso);  color: #1a1a1a; text-shadow:none; }
.status-chip.pendente          { background: var(--st-pendente); }
.status-chip.concluido-pendente{ background: var(--st-cpendente); }
.status-chip.concluido         { background: var(--st-concluido); }
.status-chip.cancelar          { background: var(--st-cancelar); }

/* Existing status-badge classes — re-align to the same palette so old code
   stays visually consistent with new components. */
.status-badge.planeado,
.status-badge.Planeado          { background: var(--st-planeado) !important; color: #fff !important; }
.status-badge.em-curso,
.status-badge[class*="Em-Curso"]{ background: var(--st-em-curso)  !important; color: #1a1a1a !important; }
.status-badge.pendente,
.status-badge.Pendente          { background: var(--st-pendente)  !important; color: #fff !important; }
.status-badge.concluido-pendente{ background: var(--st-cpendente) !important; color: #fff !important; }
.status-badge.concluido,
.status-badge.Concluido         { background: var(--st-concluido) !important; color: #fff !important; }

/* ── READABILITY AUDIT ──────────────────────────────────────────────────
   Common low-contrast offenders across the app. WCAG AA aims for ≥4.5:1
   on body text. Below we lift muted-on-dark and amber-on-amber pairings. */
.travel-card .travel-dates,
.attention-item .a-meta,
.tech-timeline-entry .e-time,
.tech-timeline-entry .e-meta {
    color: #c9d2d9 !important;     /* was #89949d — bumps contrast on dark bg */
}
.work-order-card-label {
    color: #89949d !important;
}
.work-order-card-value {
    color: #f1f4f6 !important;     /* main text — strong contrast */
}
/* Status chips on light backgrounds (e.g. activity tables) need a dark
   text fallback when chip background is bright. */
.compact-table .status-chip.em-curso,
.compact-table .status-chip.concluido { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.45); }

/* Buttons — every primary button needs visible focus for keyboard users
   and a hover state to feel responsive. */
button:focus-visible,
.button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #bcc8cf !important;
    outline-offset: 2px;
}
.work-order-card-actions button:hover,
.my-day-action:hover,
button:hover:not(:disabled) {
    filter: brightness(1.08);
    transition: filter .12s ease;
}

/* ── ATTENTION CARD — empty state ───────────────────────────────────── */
.attention-item.attention-empty {
    border-left-color: var(--st-concluido) !important;
    background: rgba(16,185,129,.08);
    color: #6ee7b7;
}
/* When count == 0 the pill is too loud in red; turn it green/soft. */
#attentionCard.is-clear #attentionCount {
    background: rgba(16,185,129,.85) !important;
}
#attentionCard.is-clear {
    border-color: rgba(16,185,129,.35) !important;
    background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(15,23,42,.4)) !important;
}

/* ── STANDBY CALENDAR — mobile + today emphasis ───────────────────────── */
#standbyCalendar {
    -webkit-overflow-scrolling: touch;
    scrollbar-color: rgba(49,95,125,.35) transparent;
}
@media (max-width: 720px) {
    /* Keep the horizontal scroll contained to the calendar card so the
       page itself doesn't scroll sideways on phones. */
    #standbyCalendar > div { min-width: 760px; }
}
/* Pulsing "today" column hint — applied via [data-today="1"] attribute. */
@keyframes today-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(49,95,125,.55); }
    50%      { box-shadow: 0 0 0 4px rgba(49,95,125,0); }
}
#standbyCalendar [data-today="1"] {
    animation: today-pulse 2.2s ease-in-out infinite;
    border: 1px solid rgba(49,95,125,.7) !important;
}

/* ── LOGS — visual hierarchy ─────────────────────────────────────────── */
#logsTable td.log-type,
#logsTable td.log-action {
    font-weight: 600;
}
#logsTable td.log-type {
    color: #bcc8cf;
}
#logsTable td.log-action {
    color: #af956b;
}
#logsTable tr:hover td {
    background: rgba(49,95,125,.06);
}

/* ── USER MGMT — clearer hover on action icons ───────────────────────── */
.user-card button,
.user-card .icon-btn {
    transition: background .12s ease, color .12s ease, transform .12s ease;
}
.user-card button:hover,
.user-card .icon-btn:hover {
    background: rgba(49,95,125,.18);
    color: #dfe6ea;
    transform: translateY(-1px);
}

/* ── IP MANAGER — full-width search on mobile ────────────────────────── */
@media (max-width: 640px) {
    #ipSearch, #ipManagerSearch, .ip-toolbar input[type="search"] {
        width: 100% !important;
        margin: .35rem 0 !important;
    }
}

/* ── TOAST — bottom-center on mobile, swipe-friendly ─────────────────── */
@media (max-width: 720px) {
    #toastContainer,
    .toast-container {
        top: auto !important;
        bottom: 1rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        max-width: 92vw;
    }
    .toast {
        font-size: .82rem;
    }
}

/* ── SKELETON LOADERS — replace bare spinners with shimmering placeholders */
@keyframes skel-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skel {
    background: linear-gradient(
        90deg,
        rgba(49,95,125,.06) 0%,
        rgba(49,95,125,.18) 50%,
        rgba(49,95,125,.06) 100%
    );
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s linear infinite;
    border-radius: 6px;
    color: transparent !important;
    user-select: none;
}
.skel-row {
    height: 14px;
    margin: 8px 0;
    border-radius: 4px;
}

DROP 20 — VISUAL POLISH PASS
   Systemic upgrades that cascade across every tab:
   • Inter Variable + JetBrains Mono
   • Spacing + radius + shadow + typography tokens
   • Unified status chip family
   • Unified button system
   • Unified modal header treatment
   • Wizard progress redesign
   • Toast notification system v2
   • Skeleton shimmer + form focus ring
   • Empty state polish, table polish, sidebar active icon
   • Sticky page headers with backdrop blur
   • Mobile bottom navigation (5-tab thumb bar)
   • PWA install hint + My Day swipe hint
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variable font + tabular numerics for monospaced columns ─────────────── */
:root {
    --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Strict 4-pt spacing scale */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
    --s-9: 56px;  --s-10: 72px;

    /* Typographic scale */
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 19px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;
    --lh-tight: 1.2;
    --lh-snug:  1.35;
    --lh-relaxed: 1.55;
}

body, button, input, select, textarea {
    font-family: var(--font-display);
    font-feature-settings: "cv02","cv03","cv04","ss01","ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Variable-axis fallback */
@supports (font-variation-settings: normal) {
    body, button, input, select, textarea { font-family: "Inter var", var(--font-display); }
}

/* Tabular numerics on every numeric-heavy surface */
.compact-table,
table tbody td,
.leaderboard-row,
.my-day-time,
.attention-time,
.payments-row,
[data-numeric],
.metric-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Mono for ITA report + log views (gives a real "console" feel) */
#completeJobITA,
#logsContent pre,
.ita-report,
.log-entry {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: -0.005em;
}

/* ─── Heading hierarchy (override scattered inline font-size in HTML) ─── */
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug);  font-weight: 600; letter-spacing: -0.015em; }
h4 { font-size: var(--fs-lg);  line-height: var(--lh-snug);  font-weight: 600; letter-spacing: -0.01em; }

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED STATUS CHIPS
   Every status pill in the app shares the same shape, padding, font, and
   icon dot. Colour comes from the modifier class. Replaces the mix of
   inline gradients, pastel-bg+dark-text legacy chips, and Drop 17 hacks.
   ═══════════════════════════════════════════════════════════════════════════ */

.status-badge, .status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: rgba(148, 163, 184, 0.14);
    color: #c9d2d9;
    line-height: 1.6;
    white-space: nowrap;
}
.status-badge::before,
.status-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

/* State variants — semantic colour per state */
.status-badge.concluido,
.status-badge.completed,
.status-chip.concluido {
    background: rgba(16, 185, 129, 0.14);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.30);
}
.status-badge.em-curso, .status-chip.em-curso {
    background: rgba(49,95,125,0.18);
    color: #bcc8cf;
    border-color: rgba(49,95,125,0.35);
}
.status-badge.planeado, .status-chip.planeado {
    background: rgba(14, 165, 233, 0.16);
    color: #7dd3fc;
    border-color: rgba(14, 165, 233, 0.30);
}
.status-badge.pendente, .status-chip.pendente {
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.32);
}
.status-badge.concluido-pendente, .status-chip.concluido-pendente {
    background: rgba(217, 119, 6, 0.18);
    color: #af956b;
    border-color: rgba(217, 119, 6, 0.35);
}
.status-badge.cancelar, .status-badge.cancelado, .status-badge.cancelled,
.status-chip.cancelar, .status-chip.cancelado, .status-chip.cancelled {
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.30);
}
/* Fleet variants */
.status-badge.authorized        { background: rgba(16,185,129,.14);  color: #34d399; border-color: rgba(16,185,129,.30); }
.status-badge.not-authorized    { background: rgba(239,68,68,.14);   color: #fca5a5; border-color: rgba(239,68,68,.30); }
.status-badge.maintenance       { background: rgba(245,158,11,.16);  color: #fcd34d; border-color: rgba(245,158,11,.32); }
.status-badge.temporary         { background: rgba(14,165,233,.16);  color: #7dd3fc; border-color: rgba(14,165,233,.30); }

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED BUTTON SYSTEM
   Five variants × four states. Replaces inline-style buttons everywhere.
   Existing legacy `.btn-success`/`.btn-warning` keep working — these
   rules use higher specificity and add the missing variants.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn,
button.btn,
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success, .btn-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
    min-height: 38px;
    user-select: none;
}
.btn:active,
.btn-primary:active, .btn-secondary:active, .btn-ghost:active,
.btn-danger:active,  .btn-success:active,   .btn-warning:active {
    transform: translateY(1px);
}
.btn:disabled,
.btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled,
.btn-danger:disabled,  .btn-success:disabled,   .btn-warning:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: linear-gradient(135deg, #315f7d, #274b63);
    color: #fff;
    box-shadow: 0 4px 14px rgba(49,95,125,.32);
}
.btn-primary:hover:not(:disabled)  { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(49,95,125,.42); }

.btn-secondary {
    background: rgba(49,95,125,.12);
    color: #dfe6ea;
    border-color: rgba(49,95,125,.35);
}
.btn-secondary:hover:not(:disabled) { background: rgba(49,95,125,.22); }

.btn-ghost {
    background: transparent;
    color: var(--ink-2, #c9d2d9);
    border-color: rgba(255,255,255,.10);
}
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.06); color: #fff; }

.btn-danger {
    background: linear-gradient(135deg, #b55a5a, #a04444);
    color: #fff;
    box-shadow: 0 4px 14px rgba(220,38,38,.32);
}
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }

.btn-success {
    background: linear-gradient(135deg, #56866a, #3f7356) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, .32);
}
.btn-success:hover:not(:disabled) { filter: brightness(1.08); }

.btn-warning {
    background: linear-gradient(135deg, #ad7d43, #976a32) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, .32);
}
.btn-warning:hover:not(:disabled) { filter: brightness(1.08); }

/* Icon-only buttons (table rows, modal close, etc.) */
.btn-icon, button.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--ink-2, #c9d2d9);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
.btn-icon:hover { background: rgba(49,95,125,.18); color: #fff; }
.btn-icon:active { transform: translateY(1px); }
.btn-icon.danger:hover { background: rgba(239,68,68,.20); color: #fca5a5; }

/* Action cell in tables — group icon buttons cleanly */
td.actions, .actions-cell {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    padding-right: 12px !important;
}
td.actions button:not(.btn) {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: var(--ink-2, #c9d2d9) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 !important;
    transition: background .15s ease, color .15s ease;
}
td.actions button:not(.btn):hover { background: rgba(49,95,125,.18) !important; color: #fff !important; }
td.actions button:not(.btn)[title*="Delete" i]:hover,
td.actions button:not(.btn)[title*="Apagar" i]:hover { background: rgba(239,68,68,.22) !important; color: #fca5a5 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED MODAL HEADER
   Every .modal gets a 6px gradient accent strip at the top + a clean title
   row. Override-prone with !important since legacy markup has tons of
   inline styles.
   ═══════════════════════════════════════════════════════════════════════════ */

.modal, .modal-overlay > .modal, .modal-content {
    position: relative;
    border-radius: var(--r-lg, 16px) !important;
    overflow: hidden;
    background: var(--surface-1, #22323d) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
}
.modal::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #315f7d, #6d7d75 50%, #71877d);
    z-index: 1;
}
.modal-overlay {
    background: rgba(5, 10, 22, 0.70) !important;
    backdrop-filter: blur(8px);
}
/* Force the wizard / status modals to inherit the new look without breaking
   their existing inline padding. */


/* Modal close X — consistent treatment */
.modal-close, button.modal-close, [data-modal-close] {
    width: 34px; height: 34px;
    border-radius: 50% !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: var(--ink-2, #c9d2d9) !important;
    transition: background .15s ease, color .15s ease, transform .12s ease !important;
}
.modal-close:hover { background: rgba(239,68,68,.20) !important; color: #fca5a5 !important; transform: rotate(90deg); }

/* ═══════════════════════════════════════════════════════════════════════════
   WIZARD PROGRESS — redesigned
   Numbered circles with active-stroke animation + connector line that
   fills as you progress. Selector matches the existing #wizardProgress
   container without HTML changes.
   ═══════════════════════════════════════════════════════════════════════════ */

#wizardProgress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 1rem 0.5rem 1.25rem;
    position: relative;
}
#wizardProgress::before {
    content: "";
    position: absolute;
    top: calc(1rem + 16px);
    left: 12%;
    right: 12%;
    height: 2px;
    background: rgba(255,255,255,.08);
    z-index: 0;
}
#wizardProgress .wizard-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    color: var(--ink-4, #89949d);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* Hide the legacy inline-styled numbered circle that sits inside each step,
   we render our own via ::before. The text label (the <span>) is kept. */
#wizardProgress .wizard-step > div {
    display: none !important;
}
#wizardProgress .wizard-step::before {
    content: attr(data-step);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.10);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    color: var(--ink-3, #c9d2d9);
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
#wizardProgress .wizard-step.active::before {
    background: linear-gradient(135deg, #315f7d, #274b63);
    border-color: rgba(49,95,125,.50);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(49,95,125,.22), 0 4px 14px rgba(49,95,125,.35);
}
#wizardProgress .wizard-step.completed::before {
    content: "✓";
    background: linear-gradient(135deg, #56866a, #3f7356);
    border-color: rgba(110, 231, 183, .50);
    color: #fff;
}
#wizardProgress .wizard-step.active        { color: var(--ink-1, #f8fafb); }
#wizardProgress .wizard-step.completed     { color: var(--ink-2, #e1e7eb); }

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATION SYSTEM v2
   Slide-in from top-right, severity strip, icon, stack with gap.
   ═══════════════════════════════════════════════════════════════════════════ */

#toast-container {
    position: fixed;
    top: calc(var(--header-height, 60px) + 12px);
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10001;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 32px));
}
.toast {
    pointer-events: auto;
    background: var(--surface-1, #22323d);
    color: var(--ink-1, #f8fafb);
    border: 1px solid rgba(255,255,255,.08);
    border-left: 4px solid var(--brand, #315f7d);
    padding: 12px 16px 12px 14px;
    border-radius: 12px;
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.18);
    transform: translateX(120%);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
    backdrop-filter: blur(10px);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
    word-break: break-word;
}
.toast::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    flex-shrink: 0;
    font-size: 14px;
    margin-top: 1px;
    line-height: 1;
}
.toast.show { transform: translateX(0); opacity: 1; }

.toast.success { border-left-color: #56866a; }
.toast.success::before { content: ""; color: #34d399; }    /* check */
.toast.error   { border-left-color: #b55a5a; }
.toast.error::before   { content: ""; color: #fca5a5; }    /* triangle-exclamation */
.toast.warning { border-left-color: #ad7d43; }
.toast.warning::before { content: ""; color: #fcd34d; }    /* circle-exclamation */
.toast.info    { border-left-color: #71877d; }
.toast.info::before    { content: ""; color: #67e8f9; }    /* circle-info */

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON LOADERS (shimmer)
   Add `.skeleton` to any element to get a placeholder shimmer.
   ═══════════════════════════════════════════════════════════════════════════ */

.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
    color: transparent !important;
    user-select: none;
}
.skeleton-line  { height: 14px; margin: 6px 0; }
.skeleton-line.lg { height: 18px; }
.skeleton-card  { height: 80px; margin: 8px 0; border-radius: 12px; }
@keyframes skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM INPUT FOCUS RING — coherent everywhere
   ═══════════════════════════════════════════════════════════════════════════ */

input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none !important;
    border-color: rgba(49,95,125,.65) !important;
    box-shadow: 0 0 0 3px rgba(49,95,125,.22) !important;
}
input.field-invalid, select.field-invalid, textarea.field-invalid {
    border-color: rgba(239,68,68,.55) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important;
}

/* Form labels — slightly more refined */
label { color: var(--ink-3, #c9d2d9); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em; }

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATES
   Apply `.empty-state` to any "no data" container. Big icon, friendly copy.
   Legacy empty containers without the class are also lifted via attribute
   selectors so we don't have to touch every HTML node.
   ═══════════════════════════════════════════════════════════════════════════ */

.empty-state,
#myDayEmpty,
#completedActivitiesEmpty,
[id$="Empty"]:not(#emptyShouldStayHidden) {
    padding: 2.5rem 1.5rem !important;
    text-align: center;
    background: linear-gradient(180deg, rgba(49,95,125,.05), transparent);
    border: 1px dashed rgba(49,95,125,.25) !important;
    border-radius: 14px !important;
    color: var(--ink-3, #c9d2d9) !important;
}
.empty-state i:first-child,
#myDayEmpty i:first-child,
[id$="Empty"] i:first-child {
    display: block;
    font-size: 2.5rem !important;
    margin-bottom: 0.75rem !important;
    color: rgba(49,95,125,.60);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE POLISH — sticky header, zebra rows, right-align numeric
   ═══════════════════════════════════════════════════════════════════════════ */

.compact-table, table.data-table, #fleetTable, #userTable,
#activitiesTable, #travelTable, .workOrderTable {
    border-collapse: separate;
    border-spacing: 0;
}
.compact-table thead th, table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(8px);
}
.compact-table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
    background: rgba(255,255,255,.018) !important;
}
.compact-table tbody td.numeric,
table tbody td.numeric,
td[data-numeric] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR ACTIVE ICON — switch to FontAwesome "solid" weight emphasis
   ═══════════════════════════════════════════════════════════════════════════ */

#sidebar .menu-buttons button.active i,
.sidebar .menu-buttons button.active i {
    font-weight: 900;
    text-shadow: 0 0 12px rgba(49,95,125,.60);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER SEARCH — command-palette feel
   ═══════════════════════════════════════════════════════════════════════════ */

.header input[type="search"],
header input[type="search"],
.topbar input[type="search"] {
    padding-left: 38px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY PAGE HEADER on scroll (within each .content tab)
   ═══════════════════════════════════════════════════════════════════════════ */

.content > .card > h2:first-child,
.content > h2:first-of-type {
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(180deg, var(--surface-1, #22323d) 70%, transparent);
    padding: 1rem 0 .8rem;
    margin: -1rem 0 .8rem !important;
    backdrop-filter: blur(8px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION
   Visible only ≤768px. Iconified with a small badge counter on My Day
   and My Work Orders.
   ═══════════════════════════════════════════════════════════════════════════ */

.mobile-bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 199;
    background: linear-gradient(180deg, rgba(7,11,20,.92), rgba(7,11,20,.98));
    border-top: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.mobile-bottom-nav button {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--ink-4, #89949d);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 2px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    position: relative;
    transition: color .15s ease, transform .12s ease;
    min-height: 52px;
}
.mobile-bottom-nav button i { font-size: 17px; }
.mobile-bottom-nav button:active { transform: scale(.92); }
.mobile-bottom-nav button.active {
    color: #dfe6ea;
}
.mobile-bottom-nav button.active::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 25%;
    right: 25%;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #315f7d, #527f9a);
}
.mobile-nav-badge {
    position: absolute;
    top: 4px;
    right: 18%;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    background: #a04444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 14px;
    border-radius: 999px;
    text-align: center;
    border: 1.5px solid #22323d;
}
@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex; }
    body { padding-bottom: 60px; } /* clear space for the bar */
    /* Hide the FAB-style timer chip behind the nav */
    #globalTimerChip { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PWA INSTALL HINT
   ═══════════════════════════════════════════════════════════════════════════ */

.pwa-install-hint {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    z-index: 198;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(49,95,125,.20), rgba(49,95,125,.30));
    border: 1px solid rgba(49,95,125,.40);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(49,95,125,.20);
    backdrop-filter: blur(14px);
    color: var(--ink-1, #f8fafb);
    animation: slide-up .35s cubic-bezier(.22,1,.36,1) both;
}
.pwa-install-hint > i { font-size: 22px; color: #bcc8cf; }
.pwa-install-hint-body { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.pwa-install-hint-body strong { font-size: var(--fs-md); font-weight: 700; }
.pwa-install-hint-body span   { font-size: var(--fs-xs); color: rgba(203,213,225,.80); }
.pwa-install-hint-cta {
    background: #fff;
    color: #315f7d;
    border: none;
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255,255,255,.18);
}
.pwa-install-hint-x {
    background: rgba(255,255,255,.10);
    border: none;
    color: #fff;
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.pwa-install-hint-x:hover { background: rgba(255,255,255,.20); }
@keyframes slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 769px) { .pwa-install-hint { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   MY DAY swipe affordance — small arrow on first card
   ═══════════════════════════════════════════════════════════════════════════ */

#myDayList .my-day-card:first-child:not(.done):not(.active)::before {
    content: "⇠ deslize";
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 10px;
    color: rgba(49,95,125,.55);
    letter-spacing: 0.05em;
    pointer-events: none;
    animation: swipe-hint 2.4s ease-in-out infinite;
}
@keyframes swipe-hint {
    0%, 100% { transform: translateX(0); opacity: .55; }
    50%      { transform: translateX(-4px); opacity: 1; }
}
body.has-swiped #myDayList .my-day-card::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH LOADING SCREEN — branded splash refresh
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE TRANSITION on tab switch — subtle fade-in cascade
   ═══════════════════════════════════════════════════════════════════════════ */

.content.active {
    animation: page-in .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DROP 21 — IP Manager / Standby calendar / Completed Activities polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── IP Manager — virtualised list scaffolding ────────────────────────── */
.ip-virtual-host {
    position: relative;
    /* the JS sets explicit height; this overrides the inline flex from the
       legacy markup so the virtual window can absolutely-position rows. */
    display: block !important;
    contain: layout;
}
.ip-virtual-window {
    position: absolute;
    top: 0; left: 0; right: 0;
    will-change: transform;
}

.ip-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 10px;
    min-height: 58px;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.ip-row:hover {
    border-color: rgba(49,95,125,.25);
    background: linear-gradient(180deg, rgba(49,95,125,.06), rgba(49,95,125,.02));
}
.ip-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ip-row-ip {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-size: var(--fs-lg, 15px);
    color: var(--ink-1, #f8fafb);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.ip-row-ip strong {
    font-weight: 700;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.ip-cidr {
    font-size: 11px;
    font-weight: 600;
    color: #89949d;
    background: rgba(148,163,184,.10);
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}
.ip-row-label {
    font-size: 12.5px;
    color: var(--ink-2, #e1e7eb);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ip-row-notes {
    font-size: 11.5px;
    color: var(--ink-4, #89949d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
    font-style: italic;
}
.ip-row-meta { display: flex; align-items: center; }
.ip-row-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.ip-row-actions .btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.ip-group-header {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin: 10px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(49,95,125,.85);
    border-left: 3px solid rgba(49,95,125,.60);
    background: linear-gradient(90deg, rgba(49,95,125,.10), transparent);
    border-radius: 0 8px 8px 0;
}

/* ── Standby calendar (Drop 21 polish) ────────────────────────────────── */
#standbyCalendar {
    overflow-x: auto;
    padding: 6px 2px 12px;
}
.standby-cal-row {
    display: grid;
    grid-template-columns: 150px repeat(14, minmax(40px, 1fr));
    gap: 3px;
    margin-bottom: 4px;
    min-width: 720px;
}
.standby-cal-header {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #89949d;
}
.standby-veh-head, .standby-day-head {
    padding: 8px 6px;
    background: rgba(15,23,42,.55);
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.standby-veh-head {
    text-align: left;
    align-items: flex-start;
    text-transform: uppercase;
    font-size: 10px;
    color: rgba(49,95,125,.80);
    letter-spacing: 0.10em;
}
.standby-day-head .standby-dow {
    text-transform: uppercase;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    color: rgba(148,163,184,.75);
}
.standby-day-head .standby-day {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-1, #f1f4f6);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.standby-day-head.weekend {
    background: rgba(15,23,42,.30);
}
.standby-day-head.weekend .standby-day { color: #bcc8cf; }
.standby-day-head.today {
    background: linear-gradient(135deg, rgba(49,95,125,.32), rgba(49,95,125,.20));
    border-color: rgba(49,95,125,.55);
    box-shadow: 0 0 0 1px rgba(49,95,125,.30), 0 6px 18px rgba(49,95,125,.18);
}
.standby-day-head.today .standby-day { color: #fff; }
.standby-day-head.today .standby-dow { color: rgba(199,210,254,.95); }

.standby-veh {
    text-align: left;
    font-size: 12.5px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(15,23,42,.75), rgba(15,23,42,.55));
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
}
.standby-veh strong {
    color: var(--ink-1, #f8fafb);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 13px;
}
.standby-veh span {
    color: rgba(148,163,184,.85);
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standby-cell {
    height: 44px;
    background: rgba(15,23,42,.35);
    border: 1px solid transparent;
    border-radius: 6px;
    position: relative;
    transition: transform .12s ease, box-shadow .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.standby-cell.weekend {
    background: rgba(15,23,42,.18);
    border: 1px dashed rgba(255,255,255,.04);
}
.standby-cell.covered {
    background: linear-gradient(135deg, rgba(245,158,11,.55), rgba(217,119,6,.85));
    box-shadow: 0 4px 10px rgba(217,119,6,.30), 0 0 0 1px rgba(245,158,11,.35) inset;
}
.standby-cell.covered:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 16px rgba(217,119,6,.40);
    z-index: 3;
}
.standby-cell.today {
    border-color: rgba(49,95,125,.65);
    box-shadow: 0 0 0 1px rgba(49,95,125,.45), inset 0 0 0 1px rgba(49,95,125,.20);
}
.standby-cell.today.covered {
    border-color: rgba(49,95,125,.80);
    box-shadow: 0 0 0 2px rgba(49,95,125,.55), 0 4px 12px rgba(217,119,6,.35);
}
.standby-driver-dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    border: 1.5px solid rgba(0,0,0,.35);
    text-shadow: 0 1px 1px rgba(0,0,0,.45);
}

/* ── Completed Activities — filter chip toolbar (Drop 21) ─────────────── */
.completed-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    padding: 12px 14px;
    margin: .5rem 0 1.25rem;
    background: linear-gradient(180deg, rgba(49,95,125,.05), rgba(255,255,255,.01));
    border: 1px solid rgba(49,95,125,.18);
    border-radius: 14px;
}
.completed-filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.completed-filter-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(49,95,125,.85);
    margin-right: 4px;
}
.completed-filter-meta {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3, #c9d2d9);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.06);
    padding: 4px 10px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* Chips inside the toolbar. Avoids collision with `.status-chip` by scoping. */
.completed-filters .chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--ink-2, #c9d2d9);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.completed-filters .chip:hover {
    background: rgba(49,95,125,.14);
    color: #dfe6ea;
    border-color: rgba(49,95,125,.30);
}
.completed-filters .chip.active {
    background: linear-gradient(135deg, #315f7d, #274b63);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(49,95,125,.32);
}
.completed-filters select,
.completed-filters input[type="search"] {
    padding: 7px 12px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: var(--ink-1, #f8fafb) !important;
    font-size: 12.5px !important;
    min-width: 0;
    line-height: 1.2;
}
.completed-filters input[type="search"] { min-width: 220px; max-width: 320px; }
.completed-filters select { min-width: 130px; }

/* ── Tighten the completed table for the new toolbar (Drop 21) ────────── */
#completedActivitiesTable .category-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(49,95,125,.15);
    border: 1px solid rgba(49,95,125,.30);
    color: #dfe6ea;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
}

BASELINE CLEANUP — MOBILE UX / PERMISSION-AWARE BOTTOM NAV
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    :root { --mobile-nav-height: 68px; }
    body { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 10px); }
    .main-content, .content { max-width: 100%; min-width: 0; }
    .content { padding: .7rem !important; }
    .card { border-radius: 12px; }
    .card, .modal-content { max-width: 100%; }
    h1 { font-size: 1.25rem; }
    h2 { font-size: 1.05rem; }
    h3 { font-size: .95rem; }
    button, .btn, input, select, textarea { min-height: 42px; }
    input, select, textarea { font-size: 16px !important; } /* prevent iOS zoom */
    .table-container, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 620px; }
    .modal-content { width: calc(100vw - 20px) !important; max-height: calc(100dvh - 24px); overflow-y: auto; margin: 12px auto !important; }

    .mobile-bottom-nav {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
    }
    .mobile-bottom-nav::-webkit-scrollbar { display: none; }
    .mobile-bottom-nav button {
        flex: 0 0 74px;
        min-width: 74px;
        min-height: 54px;
        padding: 7px 4px 5px;
        border-radius: 10px;
    }
    .mobile-bottom-nav button span {
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px;
    }
    .mobile-bottom-nav button.active { background: rgba(49,95,125,.12); }
    .mobile-bottom-nav button.active::before { left: 18%; right: 18%; }
    #globalTimerChip { bottom: calc(var(--mobile-nav-height) + 10px + env(safe-area-inset-bottom)) !important; }
    .pwa-install-hint { bottom: calc(var(--mobile-nav-height) + 10px + env(safe-area-inset-bottom)); }
}


/* OPSFlex v2 — mobile uses bottom navigation only; no vertical drawer/burger. */
@media (max-width: 768px) {
    .mobile-menu-btn,
    .sidebar-backdrop,
    .sidebar { display: none !important; }
    body.sidebar-collapsed .content,
    body:not(.sidebar-collapsed) .content { margin-left: 0 !important; }
    .header-left { min-width: 0; }
    .opsflex-brand { min-width: 0; }
    .opsflex-brand-text { min-width: 0; }
}


/* ==========================================================================
   V4 — FAST, NON-BLOCKING DATA LOADING
   Auth loading screen remains full-page only during initial session refresh.
   All in-app/page data refreshes use this slim progress indicator.
   ========================================================================== */
.data-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 20000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .14s ease;
    background: transparent;
    overflow: visible;
}
.data-progress.visible { opacity: 1; }
.data-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 38%;
    background: var(--primary, #315f7d);
    border-radius: 0 3px 3px 0;
    animation: opsflex-progress 1.05s ease-in-out infinite;
    box-shadow: 0 0 8px color-mix(in srgb, var(--primary, #315f7d) 45%, transparent);
}
.data-progress-text {
    position: absolute;
    top: 7px;
    right: 12px;
    max-width: min(65vw, 320px);
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--text-muted, #66727c);
    border: 1px solid var(--border, #e1e7eb);
    box-shadow: 0 2px 8px rgba(15,23,42,.08);
    font-size: .68rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@keyframes opsflex-progress {
    0%   { transform: translateX(-110%); width: 28%; }
    50%  { width: 48%; }
    100% { transform: translateX(360%); width: 28%; }
}
@media (max-width: 768px) {
    .data-progress-text { display: none; }
    .data-progress, .data-progress-bar { height: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .data-progress-bar { animation-duration: 2s; }
}


/* ==========================================================================
   V5 — MOBILE ASSIGNMENT BADGES
   Restore the notification bubble on My Day and My Work Orders in the
   permission-aware static bottom navigation.
   ========================================================================== */
#mobileBottomNav .mobile-nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 22px;
}
#mobileBottomNav .mobile-nav-badge {
    position: absolute;
    top: -7px;
    right: -10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #a04444;
    color: #fff;
    border: 2px solid var(--surface, #fff);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    z-index: 2;
}
[data-theme="dark"] #mobileBottomNav .mobile-nav-badge,
.dark-mode #mobileBottomNav .mobile-nav-badge {
    border-color: var(--surface, #363d39);
}

/* V5 corrected — mobile My Day / My Work Orders bubbles */
#mobileBottomNav .mobile-nav-icon-wrap{position:relative;display:inline-flex!important;width:28px!important;height:22px;overflow:visible!important;align-items:center;justify-content:center}
#mobileBottomNav .mobile-nav-icon-wrap>.mobile-nav-badge{position:absolute!important;width:auto!important;min-width:17px!important;height:17px!important;top:-7px!important;right:-10px!important;padding:0 4px!important;overflow:visible!important;align-items:center;justify-content:center;border-radius:999px;background:#a04444!important;color:#fff!important;border:2px solid var(--surface-1,#22323d)!important;font-size:10px!important;font-weight:800!important;line-height:13px!important;z-index:5}


/* ==========================================================================
   V13 — CONSOLIDATED ACCESS UI
   Warm white / graphite / muted eucalyptus. Single light theme.
   ========================================================================== */
html, body {
    background: #f5f7f9;
    color: #1f2b34;
    color-scheme: light;
}

body.dark-mode,
html.dark,
html[data-theme="dark"],
[data-theme="dark"] {
    background: #f5f7f9;
    color: #1f2b34;
    color-scheme: light;
}

/* Header */
.main-header,
header.main-header,
.app-header,
.topbar,
.top-bar {
    background: #1f2f3c;
    color: #f8fafb;
    border-bottom: 1px solid #344b5b;
    background-image: none;
    box-shadow: 0 1px 4px rgba(25, 31, 27, .14);
}
.main-header .logo-text,
.main-header .header-left,
.main-header .header-left * {
    color: #f8fafb;
}
.main-header input[type="search"],
.header-right input[type="search"] {
    background: #2a3e4d;
    color: #f8fafb;
    border: 1px solid #526774;
}
.main-header input[type="search"]::placeholder,
.header-right input[type="search"]::placeholder {
    color: #adb6b0;
}

/* Sidebar */
.sidebar,
#sidebar {
    background: #1f2f3c;
    border-right: 1px solid #344b5b;
    background-image: none;
}
.sidebar .menu-buttons button,
#sidebar .menu-buttons button,
.sidebar a {
    color: #dce3e7;
    background: transparent;
}
.sidebar .menu-buttons button i,
#sidebar .menu-buttons button i {
    color: #aab5ae;
}
.sidebar .menu-buttons button:hover,
#sidebar .menu-buttons button:hover {
    background: #29495c;
    color: #fff;
}
.sidebar .menu-buttons button.active,
.sidebar .menu-buttons button.active-menu,
#sidebar .menu-buttons button.active,
#sidebar .menu-buttons button.active-menu {
    background: #46514b;
    color: #fff;
    box-shadow: inset 3px 0 0 #78a6c1;
}
.sidebar .menu-buttons button.active i,
#sidebar .menu-buttons button.active i {
    color: #fff;
}
.menu-toggle,
#sidebar .menu-toggle,
.sidebar-toggle {
    background: #39413d;
    color: #f5f7f9;
    border-color: #4d5751;
}

/* Main content */
.content {
    background: #f5f7f9;
}
.content h1,
.content h2,
.content h3,
.content h4 {
    color: #1f2b34;
}
.content p,
.content label,
.content small,
.text-muted {
    color: #66727c;
}

/* Cards / panels / details / modals */
.card,
.widget,
.panel,
.dashboard-card,
.section-card,
.stat-card,
.settings-card,
.content-card,
.add-form,
details,
.modal-content,
.modal-dialog,
.fleet-quick-dialog,
.ticket-card,
.work-order-card,
.user-card {
    background: #fff;
    color: #1f2b34;
    border-color: #e1e7eb;
    box-shadow: 0 1px 3px rgba(41, 47, 43, .06);
}
details > summary {
    background: #fff;
    color: #1f2b34;
}

/* Inputs */
input,
select,
textarea,
.form-control {
    background: #fff;
    color: #1f2b34;
    border: 1px solid #c9d2d9;
    box-shadow: none;
}
input::placeholder,
textarea::placeholder {
    color: #9aa19c;
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: #315f7d;
    outline: none;
    box-shadow: 0 0 0 3px rgba(49, 95, 125, .13);
}
input:disabled,
select:disabled,
textarea:disabled {
    background: #eeeeea;
    color: #777f79;
    opacity: 1;
}

/* Buttons */
.btn-primary,
button.btn-primary,
.primary-btn,
.save-btn {
    background: #315f7d;
    color: #fff;
    border-color: #315f7d;
    background-image: none;
    box-shadow: none;
}
.btn-primary:hover,
button.btn-primary:hover,
.primary-btn:hover,
.save-btn:hover {
    background: #274b63;
    border-color: #274b63;
}
.btn-secondary,
.secondary-btn,
.fleet-email-action {
    background: #fff;
    color: #1f2b34;
    border-color: #c9d2d9;
}
.btn-secondary:hover,
.secondary-btn:hover,
.fleet-email-action:hover {
    background: #f1f4f6;
}
.btn-danger,
button.danger,
.danger-link {
    background: #fff;
    color: #a04444;
    border-color: #e4c3c3;
}

/* Standard data tables */
.table-responsive,
.table-container,
.table-wrapper {
    background: #fff;
    border-color: #e1e7eb;
}
table {
    background: #fff;
    color: #1f2b34;
    border-color: #e1e7eb;
}
table thead,
table thead tr,
table thead th {
    background: #3e4642;
    color: #f8fafb;
    border-color: #59625d;
    background-image: none;
}
table tbody td {
    background: #fff;
    color: #1f2b34;
    border-color: #e1e7eb;
}
table tbody tr:nth-child(even) td {
    background: #f8fafb;
}
table tbody tr:hover td {
    background: #edf5f0;
}

/* Status colours: muted and semantic */
.status-badge.authorized,
.status-badge.completed,
.badge-success,
.status-completed {
    background: #edf5f0;
    color: #3f7356;
    border-color: #c7d9ce;
}
.status-badge.maintenance,
.badge-warning,
.status-pending {
    background: #faf3e8;
    color: #976a32;
    border-color: #e3cfad;
}
.status-badge.not-authorized,
.badge-danger,
.status-overdue {
    background: #faeeee;
    color: #a04444;
    border-color: #e4c3c3;
}
.status-badge.temporary,
.badge-info {
    background: #edf4f8;
    color: #3e6b8a;
    border-color: #c9dbe6;
}

/* Fleet page */
#fleet .fleet-page-head {
    margin-bottom: .8rem;
}
#fleet .fleet-primary-surface {
    background: #fff;
    border: 1px solid #e1e7eb;
    border-radius: 12px;
    padding: .75rem;
    box-shadow: 0 1px 3px rgba(41, 47, 43, .06);
}
#fleet .fleet-section-head {
    margin: 0;
    padding: 0 .15rem .6rem;
}
#fleet .fleet-section-head h3 {
    color: #1f2b34;
    font-size: .95rem;
}
#fleet .fleet-calendar-sub {
    color: #77838d;
}
#fleet #standbyCalendar {
    padding: 0;
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e1e7eb;
    border-radius: 9px;
}
#fleet .standby-cal-row {
    display: grid;
    grid-template-columns: 150px repeat(14, minmax(58px, 1fr));
    gap: 0;
    margin: 0;
    min-width: 980px;
}
#fleet .standby-cal-header {
    margin: 0;
}
#fleet .standby-veh-head,
#fleet .standby-day-head {
    min-height: 42px;
    padding: 6px 5px;
    background: #f0f1ed;
    color: #56636d;
    border: 0;
    border-right: 1px solid #dcded9;
    border-bottom: 1px solid #d5d7d2;
    border-radius: 0;
    justify-content: center;
}
#fleet .standby-veh-head {
    align-items: flex-start;
    justify-content: center;
    padding-left: 12px;
    color: #56636d;
}
#fleet .standby-day-head .standby-dow {
    color: #77838d;
    font-size: 9px;
}
#fleet .standby-day-head .standby-day {
    color: #343a36;
    font-size: 13px;
}
#fleet .standby-day-head.weekend {
    background: #f6f6f3;
}
#fleet .standby-day-head.weekend .standby-day {
    color: #77838d;
}
#fleet .standby-day-head.today {
    background: #e5ebe7;
    border-color: #bcc9c1;
    box-shadow: inset 0 -2px 0 #315f7d;
}
#fleet .standby-day-head.today .standby-day {
    color: #43534b;
}
#fleet .standby-day-head.today .standby-dow {
    color: #315f7d;
}

#fleet .standby-veh {
    min-height: 42px;
    padding: 6px 10px;
    background: #fff;
    color: #1f2b34;
    border: 0;
    border-right: 1px solid #e3e4df;
    border-bottom: 1px solid #ededE9;
    border-radius: 0;
}
#fleet .standby-veh strong {
    color: #1f2b34;
    font-size: 11px;
    font-weight: 700;
}
#fleet .standby-veh span {
    color: #77838d;
    font-size: 9px;
}

#fleet .standby-cell {
    height: 42px;
    background: #fff;
    border: 0;
    border-right: 1px solid #f0f0ec;
    border-bottom: 1px solid #edede9;
    border-radius: 0;
    display: block;
    position: relative;
    transition: background .12s ease;
}
#fleet .standby-cal-row:nth-child(odd) .standby-cell,
#fleet .standby-cal-row:nth-child(odd) .standby-veh {
    background: #fafaf7;
}
#fleet .standby-cell.weekend {
    background: #f8fafb;
    border-style: solid;
}
#fleet .standby-cell.today {
    background: #f2f5f3;
    box-shadow: inset 1px 0 0 #b9c6be, inset -1px 0 0 #b9c6be;
}
#fleet .standby-cell.covered {
    background: #e8eeea;
    box-shadow: none;
}
#fleet .standby-cell.covered:hover {
    transform: none;
    background: #dde7e1;
    box-shadow: none;
}
#fleet .standby-cell.today.covered {
    background: #dfe8e3;
    box-shadow: inset 0 0 0 1px #aec2ce;
}
#fleet .fleet-standby-segment {
    position: absolute;
    inset: 5px 4px;
    display: block;
    padding: 0;
    margin: 0;
    background: #dceaf2;
    border: 1px solid #b6ccd8;
    border-left: 3px solid #315f7d;
    border-radius: 4px;
    box-shadow: none;
    cursor: pointer;
}
#fleet .fleet-standby-segment span {
    display: none;
}
#fleet .fleet-standby-segment:hover {
    background: #cddfe9;
    border-color: #9fbac9;
}
#fleet .fleet-vehicle-cal-button {
    cursor: pointer;
}
#fleet .fleet-email-action {
    background: #fff;
    color: #1f2b34;
    border-color: #c9d2d9;
}
#fleet .fleet-email-action i {
    color: #315f7d;
}

/* Modal overlay */
.modal-overlay,
.fleet-quick-modal {
    background: rgba(35, 42, 38, .42);
}
.modal-content,
.fleet-quick-dialog {
    background: #fff;
    color: #1f2b34;
    border-color: #e1e7eb;
}

/* Mobile static nav */
.mobile-bottom-nav {
    background: #1f2f3c;
    border-top: 1px solid #344b5b;
    box-shadow: 0 -4px 14px rgba(25, 31, 27, .16);
}
.mobile-bottom-nav button {
    color: #bfc8c2;
    background: transparent;
}
.mobile-bottom-nav button.active {
    color: #fff;
    background: #29495c;
}
.mobile-bottom-nav button.active::before {
    background: #78a6c1;
}
.mobile-nav-badge,
#mobileBottomNav .mobile-nav-badge {
    background: #a04444;
    color: #fff;
    border-color: #1f2f3c;
}

/* Loading */
.auth-loading-screen {
    background: #1f2f3c;
    background-image: none;
}
.data-progress-bar,
.progress-bar {
    background: #315f7d;
    box-shadow: none;
}

/* Toasts */
.toast-success { background: #3f7356; color: #fff; }
.toast-error { background: #a04444; color: #fff; }
.toast-warning { background: #976a32; color: #fff; }
.toast-info { background: #3e6b8a; color: #fff; }

@media (max-width: 768px) {
    #fleet .standby-cal-row {
        grid-template-columns: 118px repeat(14, 48px);
        min-width: 790px;
    }
    #fleet .standby-veh-head,
    #fleet .standby-day-head,
    #fleet .standby-veh,
    #fleet .standby-cell {
        min-height: 40px;
        height: 40px;
    }
    #fleet .standby-veh {
        padding: 5px 7px;
    }
    #fleet .standby-veh strong {
        font-size: 10px;
    }
    #fleet .standby-veh span {
        font-size: 8px;
    }
}


/* ==========================================================================
   V14 — MOBILE NAV / HEADER / INITIAL LOADER
   ========================================================================== */

/* Initial authentication loader — no purple/blue gradients */
.auth-loading-screen {
    background: #1f2f3c !important;
    background-image: none !important;
}
.auth-loading-logo {
    filter: drop-shadow(0 6px 18px rgba(18, 24, 21, .24)) !important;
}
.auth-loading-title {
    color: #f8fafb !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
.auth-loading-text {
    color: #b8c6cf !important;
}
.auth-loading-spinner .spinner-ring {
    border-color: transparent !important;
}
.auth-loading-spinner .spinner-ring:nth-child(1) {
    border-top-color: #78a6c1 !important;
}
.auth-loading-spinner .spinner-ring:nth-child(2) {
    border-right-color: #4f7f9c !important;
}
.auth-loading-spinner .spinner-ring:nth-child(3) {
    border-bottom-color: #78a6c1 !important;
}

/* Mobile application header */
@media (max-width: 768px) {
    .main-header {
        min-height: 56px !important;
        height: 56px !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .main-header .header-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .main-header .opsflex-brand {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
    }

    .main-header .opsflex-logo {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        margin: 0 !important;
    }

    .main-header .opsflex-brand-text {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .main-header .opsflex-brand-subtitle {
        display: block !important;
        max-width: 150px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        color: #d5ddd8 !important;
    }

    .main-header .header-right {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        margin: 0 !important;
        position: static !important;
    }

    .main-header .header-lang {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 2px !important;
        gap: 2px !important;
        border: 1px solid #59635d !important;
        border-radius: 999px !important;
        background: #29495c !important;
        box-shadow: none !important;
        z-index: auto !important;
    }

    .main-header .header-lang button {
        width: 32px !important;
        min-width: 32px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #c6d0ca !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        box-shadow: none !important;
    }

    .main-header .header-lang button.active {
        background: #315f7d !important;
        color: #fff !important;
    }

    /* Static mobile bottom navigation.
       It is intentionally one horizontal scroll rail rather than squeezing
       all permitted modules into the viewport. */
    #mobileBottomNav.mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 62px !important;
        padding: 5px 6px calc(5px + env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        gap: 3px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        touch-action: pan-x !important;
        z-index: 1990 !important;
    }

    #mobileBottomNav.mobile-bottom-nav::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    #mobileBottomNav.mobile-bottom-nav > button {
        flex: 0 0 72px !important;
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        min-height: 52px !important;
        padding: 6px 3px 4px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    #mobileBottomNav.mobile-bottom-nav > button > .mobile-nav-icon-wrap {
        width: 26px !important;
        min-width: 26px !important;
        height: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: visible !important;
    }

    #mobileBottomNav.mobile-bottom-nav > button i {
        font-size: 16px !important;
        line-height: 1 !important;
    }

    #mobileBottomNav.mobile-bottom-nav > button > span:last-child {
        display: block !important;
        width: 100% !important;
        max-width: 68px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: 9px !important;
        line-height: 12px !important;
        color: inherit !important;
    }

    #mobileBottomNav.mobile-bottom-nav > button.active {
        background: #29495c !important;
        color: #fff !important;
    }

    #mobileBottomNav.mobile-bottom-nav > button.active::before {
        left: 18% !important;
        right: 18% !important;
        top: -1px !important;
        height: 2px !important;
        background: #78a6c1 !important;
    }

    #mobileBottomNav .mobile-nav-badge {
        position: absolute !important;
        top: -7px !important;
        right: -8px !important;
        display: none;
        min-width: 17px !important;
        width: auto !important;
        height: 17px !important;
        padding: 0 4px !important;
        border-radius: 999px !important;
        background: #a04444 !important;
        color: #fff !important;
        border: 2px solid #1f2f3c !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 13px !important;
        z-index: 4 !important;
    }

    body {
        padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    }

    #globalTimerChip {
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }

    .pwa-install-hint {
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 380px) {
    .main-header .opsflex-brand-subtitle {
        max-width: 112px !important;
        font-size: 9px !important;
    }
    .main-header .header-lang button {
        width: 29px !important;
        min-width: 29px !important;
    }
}


/* ==========================================================================
   V15 — FLEET ADD / EDIT / DELETE MODAL
   Modal lives at body level; never participates in Fleet page layout.
   ========================================================================== */
#fleetQuickEditModal.fleet-quick-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 30000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    margin: 0 !important;
    background: rgba(31, 38, 34, .48) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
#fleetQuickEditModal.fleet-quick-modal.open {
    display: flex !important;
}
#fleetQuickEditModal .fleet-quick-dialog {
    position: relative !important;
    width: min(680px, calc(100vw - 40px)) !important;
    max-width: 680px !important;
    max-height: min(720px, calc(100dvh - 40px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #1f2b34 !important;
    border: 1px solid #d7dad5 !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 70px rgba(25, 31, 27, .28) !important;
    overflow: hidden !important;
    transform: none !important;
}
#fleetQuickEditModal .fleet-quick-head {
    min-height: 68px !important;
    padding: 14px 16px 13px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: #f7f8f5 !important;
    border-bottom: 1px solid #e0e2dd !important;
}
#fleetQuickEditModal .fleet-quick-title {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
#fleetQuickEditModal #fleetModalTitle {
    color: #69716c !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
}
#fleetQuickEditModal #fleetQuickPlate {
    color: #1f2b34 !important;
    font-size: 18px !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
}
#fleetQuickEditModal .fleet-modal-close {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #d7dad5 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #69716c !important;
    box-shadow: none !important;
}
#fleetQuickEditModal .fleet-modal-close:hover {
    background: #eef1ed !important;
    color: #1f2b34 !important;
}
#fleetQuickEditBody {
    max-height: calc(100dvh - 145px) !important;
    padding: 18px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}
#fleetQuickEditModal .fleet-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}
#fleetQuickEditModal .fleet-quick-grid label {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    color: #56636d !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
#fleetQuickEditModal .fleet-quick-grid input,
#fleetQuickEditModal .fleet-quick-grid select {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    background: #fff !important;
    color: #1f2b34 !important;
    border: 1px solid #c9d2d9 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
}
#fleetQuickEditModal .fleet-quick-grid input:focus,
#fleetQuickEditModal .fleet-quick-grid select:focus {
    border-color: #315f7d !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(49, 95, 125, .13) !important;
}
#fleetQuickEditModal .fleet-quick-actions {
    grid-column: 1 / -1 !important;
    margin-top: 18px !important;
    padding-top: 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-top: 1px solid #e7e8e3 !important;
}
#fleetQuickEditModal .fleet-quick-actions > span {
    display: none !important;
}
#fleetQuickEditModal .fleet-quick-actions button {
    min-height: 38px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
#fleetQuickEditModal .fleet-quick-actions button:not(.btn-primary):not(.danger-link) {
    margin-left: auto !important;
    background: #fff !important;
    color: #404c55 !important;
    border: 1px solid #c9d2d9 !important;
}
#fleetQuickEditModal .fleet-quick-actions .btn-primary {
    background: #315f7d !important;
    color: #fff !important;
    border: 1px solid #315f7d !important;
}
#fleetQuickEditModal .fleet-quick-actions .danger-link {
    margin-right: auto !important;
    background: #fff !important;
    color: #a04444 !important;
    border: 1px solid #e4c3c3 !important;
}
body.fleet-modal-open {
    overflow: hidden !important;
}

@media (max-width: 600px) {
    #fleetQuickEditModal.fleet-quick-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
    }
    #fleetQuickEditModal .fleet-quick-dialog {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 12px !important;
    }
    #fleetQuickEditModal .fleet-quick-head {
        min-height: 62px !important;
        padding: 12px 12px 11px 14px !important;
    }
    #fleetQuickEditModal #fleetQuickPlate {
        font-size: 16px !important;
    }
    #fleetQuickEditBody {
        max-height: calc(100dvh - 110px) !important;
        padding: 14px !important;
    }
    #fleetQuickEditModal .fleet-quick-grid {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }
    #fleetQuickEditModal .fleet-quick-actions {
        position: sticky !important;
        bottom: -14px !important;
        margin: 16px -14px -14px !important;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
        background: #fff !important;
        border-top: 1px solid #e0e2dd !important;
        z-index: 2 !important;
    }
    #fleetQuickEditModal .fleet-quick-actions button {
        flex: 1 1 0 !important;
        padding: 0 8px !important;
    }
    #fleetQuickEditModal .fleet-quick-actions .danger-link {
        flex: 0 0 42px !important;
        width: 42px !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        font-size: 0 !important;
    }
    #fleetQuickEditModal .fleet-quick-actions .danger-link i {
        font-size: 13px !important;
    }
}

/* ==========================================================================
   V16 — TRAVEL MAP PLANNER
   ========================================================================== */
.travel-v16 .travel-page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:.8rem}
.travel-v16 .travel-page-head h2{margin:0 0 .2rem}.travel-v16 .travel-page-head p{margin:0;font-size:.8rem}
.travel-planner-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr);gap:.8rem;margin-bottom:.8rem}
.travel-map-card,.travel-assignment-card,.travel-current-card,.travel-history-card{
 background:#fff;border:1px solid #e1e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(41,47,43,.06);overflow:hidden
}
.travel-card-head{min-height:54px;padding:.75rem .85rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-bottom:1px solid #e8e9e4}
.travel-card-head>div{min-width:0;display:flex;flex-direction:column;gap:.16rem}.travel-card-head h3{margin:0;display:flex;align-items:center;gap:.45rem;font-size:.9rem;color:#1f2b34}
.travel-card-head h3 i{color:#315f7d}.travel-card-head span{font-size:.68rem;color:#77838d}
.travel-map-reset{background:#fff;border:1px solid #c9d2d9;color:#56636d;border-radius:7px;padding:.4rem .55rem;font-size:.68rem;font-weight:700}
.travel-map{height:440px;width:100%;background:#eef1ed;z-index:1}.travel-map .leaflet-control-zoom a{color:#404c55}.travel-map .leaflet-tooltip{font-size:11px;line-height:1.3}
.travel-map-legend{min-height:38px;padding:.55rem .8rem;display:flex;justify-content:space-between;align-items:center;gap:.7rem;border-top:1px solid #e8e9e4;font-size:.67rem;color:#66727c}
.travel-map-legend>span{display:flex;align-items:center;gap:.4rem}.travel-map-dot{width:9px;height:9px;border-radius:50%;background:#4f7f9c;border:2px solid #fff;box-shadow:0 0 0 1px #aeb9b2}
.travel-assignment-form{padding:.85rem}.travel-assignment-form .form-row{margin-bottom:.7rem}.travel-assignment-form label{font-size:.69rem;font-weight:700;color:#56636d}
.travel-assignment-form select,.travel-assignment-form input{height:40px;min-height:40px;margin-top:.3rem}
.travel-province-info{margin:-.15rem 0 .75rem;padding:.65rem .7rem;align-items:center;gap:.65rem;background:#f1f4f2;border:1px solid #d8dfda;border-radius:8px}
.travel-province-info>i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#e2e9e5;color:#315f7d}
.travel-province-info>div{display:flex;flex-direction:column}.travel-province-info strong{font-size:.78rem;color:#1f2b34}.travel-province-info span{font-size:.65rem;color:#66727c}
.travel-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.travel-days-summary{margin:.1rem 0 .75rem;padding:.65rem .7rem;background:#f7f8f5;border:1px solid #e1e7eb;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:.65rem}
.travel-days-summary>div{display:flex;align-items:baseline;gap:.55rem}.travel-days-summary span{font-size:.66rem;color:#66727c}.travel-days-summary strong{font-size:1.2rem;color:#43564c}
.travel-save-btn{width:100%;min-height:42px;display:flex;align-items:center;justify-content:center;gap:.45rem}
.travel-current-card{margin-bottom:.8rem}.travel-current-list{padding:.75rem;display:flex;flex-direction:column;gap:.45rem}
.travel-history-card{margin-bottom:1rem}.travel-history-card .table-responsive{border:0;margin:0}.travel-history-card table{margin:0}
.travel-group-row td{background:#f2f4f2!important;padding:.6rem .75rem!important}.travel-group-row .toggle-btn{width:28px;height:28px;margin-right:.5rem;border:1px solid #c9d2d9;border-radius:7px;background:#fff;color:#56636d}
.travel-group-name{font-weight:700;color:#1f2b34;font-size:.76rem}.travel-group-count{margin-left:.5rem;color:#77838d;font-size:.65rem}.travel-detail-row[hidden]{display:none!important}
.travel-detail-row.highlight-today td{background:#edf3ef!important}
@media(max-width:900px){.travel-planner-grid{grid-template-columns:1fr}.travel-map{height:390px}.travel-assignment-card{order:-1}}
@media(max-width:600px){
 .travel-v16 .travel-page-head p{font-size:.72rem}.travel-map{height:330px}
 .travel-date-grid{grid-template-columns:1fr}.travel-days-summary{align-items:flex-start;flex-direction:column}
 .travel-card-head{padding:.65rem .7rem}.travel-assignment-form{padding:.7rem}
 .travel-map-legend{align-items:flex-start;flex-direction:column}.travel-history-card .table-responsive{overflow-x:auto}
}

/* ==========================================================================
   V17 — PROVINCE-CONTEXT TRAVEL VIEW
   ========================================================================== */
.travel-current-card,.travel-history-card{display:none!important}
.travel-province-trips-card{margin-bottom:1rem;background:#fff;border:1px solid #e1e7eb;border-radius:12px;overflow:hidden}
.travel-province-trips-card[hidden]{display:none!important}
.travel-province-empty{padding:1.35rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem;color:#66727c}
.travel-province-empty[hidden],#travelProvinceTableWrap[hidden]{display:none!important}
.travel-province-empty i{font-size:1.3rem;color:#4f7f9c;margin-bottom:.2rem}.travel-province-empty strong{font-size:.8rem;color:#404c55}.travel-province-empty span{font-size:.7rem}
#travelProvinceTable{margin:0}#travelProvinceTable td,#travelProvinceTable th{vertical-align:middle}
.travel-status{display:inline-flex;align-items:center;padding:.2rem .45rem;border-radius:999px;font-size:.62rem;font-weight:700;border:1px solid #d5dad6}
.travel-status.active{background:#e6efe9;color:#3e614e;border-color:#c6d9cc}.travel-status.upcoming{background:#f1f3ef;color:#5f6d64}.travel-status.completed{background:#f5f5f3;color:#858b87}
.travel-edit-btn,.travel-delete-btn{width:30px;height:30px;padding:0!important;border-radius:7px!important}.travel-delete-btn{color:#a04444!important}
.travel-edit-modal{position:fixed!important;inset:0!important;z-index:30000!important;display:none!important;align-items:center!important;justify-content:center!important;padding:18px!important;background:rgba(31,38,34,.48)!important;backdrop-filter:blur(3px)}
.travel-edit-modal.open{display:flex!important}.travel-edit-dialog{width:min(570px,calc(100vw - 36px));max-height:calc(100dvh - 36px);background:#fff;border:1px solid #d7dad5;border-radius:14px;overflow:hidden;box-shadow:0 24px 70px rgba(25,31,27,.28)}
.travel-edit-body{padding:18px;overflow-y:auto}.travel-edit-body>label,.travel-edit-date-grid label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;color:#56636d}
.travel-edit-body select,.travel-edit-body input{width:100%;height:42px;border:1px solid #c9d2d9;border-radius:8px;background:#fff;color:#1f2b34;padding:0 10px;box-sizing:border-box}
.travel-edit-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.travel-edit-days{margin-top:12px;padding:10px 12px;background:#f4f6f3;border:1px solid #e0e2dd;border-radius:8px;display:flex;align-items:center;justify-content:space-between}.travel-edit-days span{font-size:11px;color:#69716c}.travel-edit-days strong{font-size:18px;color:#43564c}
.travel-edit-actions{margin-top:16px;padding-top:14px;border-top:1px solid #e7e8e3;display:flex;gap:8px}.travel-edit-actions button{min-height:38px;padding:0 14px;border-radius:8px}.travel-edit-actions .danger-link{margin-right:auto;color:#a04444;background:#fff;border:1px solid #e4c3c3}
@media(max-width:600px){.travel-edit-date-grid{grid-template-columns:1fr}.travel-edit-actions button{flex:1;padding:0 8px}.travel-edit-actions .danger-link{flex:0 0 42px;font-size:0}.travel-edit-actions .danger-link i{font-size:13px}#travelProvinceTableWrap{overflow-x:auto}}

/* ==========================================================================
   V18 — ACTIVE TRAVEL FIRST + MAP PULSE
   ========================================================================== */
.travel-view-toggle{display:inline-flex;align-items:center;padding:2px;background:#eef1ee;border:1px solid #dce3e7;border-radius:8px;gap:2px;flex:0 0 auto}
.travel-view-toggle button{min-height:30px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:#69716c;font-size:10px;font-weight:700;box-shadow:none}
.travel-view-toggle button.active{background:#fff;color:#3f5649;box-shadow:0 1px 2px rgba(35,42,38,.08)}
.travel-map-status-legend{display:flex!important;align-items:center!important;gap:12px!important}.travel-map-status-legend>span{display:flex;align-items:center;gap:5px}
.travel-map-dot.active{background:#315f7d;border-color:#fff;box-shadow:0 0 0 2px rgba(63,138,92,.18)}
.travel-map-dot.inactive{background:#a7b4bd;border-color:#fff;box-shadow:0 0 0 1px #c5cbc7}
.leaflet-interactive.travel-marker-active{transform-box:fill-box;transform-origin:center;animation:travelPulse 1.65s ease-out infinite}
@keyframes travelPulse{
  0%{filter:drop-shadow(0 0 0 rgba(63,138,92,.55));stroke-width:2}
  50%{filter:drop-shadow(0 0 5px rgba(63,138,92,.75));stroke-width:4}
  100%{filter:drop-shadow(0 0 0 rgba(63,138,92,.15));stroke-width:2}
}
@media (prefers-reduced-motion:reduce){.leaflet-interactive.travel-marker-active{animation:none;filter:drop-shadow(0 0 4px rgba(63,138,92,.55))}}
@media(max-width:600px){.travel-province-trips-card .travel-card-head{align-items:flex-start}.travel-view-toggle button{padding:0 8px}}

/* ==========================================================================
   V19 — MAP-CENTRIC TRAVEL WORKFLOW
   ========================================================================== */
.travel-map-only{grid-template-columns:1fr!important}
.travel-map-toolbar-head{align-items:center}
.travel-map-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.travel-map-action{min-height:34px;padding:0 11px;border:1px solid #c9d2d9;border-radius:7px;background:#fff;color:#56636d;font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.travel-map-action.primary{background:#596f63;color:#fff;border-color:#596f63}
.travel-map-action:hover{filter:brightness(.98)}
.travel-v19-modal{position:fixed!important;inset:0!important;z-index:30000!important;display:none!important;align-items:center!important;justify-content:center!important;padding:18px!important;background:rgba(31,38,34,.48)!important;backdrop-filter:blur(3px)}
.travel-v19-modal.open{display:flex!important}
.travel-v19-dialog{width:min(590px,calc(100vw - 36px));max-height:calc(100dvh - 36px);background:#fff;border:1px solid #d7dad5;border-radius:14px;overflow:hidden;box-shadow:0 24px 70px rgba(25,31,27,.28)}
.travel-history-dialog{width:min(900px,calc(100vw - 36px))}
.travel-v19-body{padding:18px;overflow-y:auto;max-height:calc(100dvh - 100px)}
.travel-v19-body>label,.travel-history-filter label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;color:#56636d;margin-bottom:12px}
.travel-v19-body select,.travel-v19-body input{width:100%;height:42px;border:1px solid #c9d2d9;border-radius:8px;background:#fff;color:#1f2b34;padding:0 10px;box-sizing:border-box}
.travel-date-range-label{display:block;margin-top:6px;font-size:10px;color:#7b837e}
.travel-v19-actions{margin-top:16px;padding-top:14px;border-top:1px solid #e7e8e3;display:flex;justify-content:flex-end;gap:8px}
.travel-v19-actions button{min-height:38px;padding:0 14px;border-radius:8px}
.travel-history-filter{max-width:260px;margin-bottom:12px}
#travelHistoricTable{margin:0}
@media(max-width:600px){
 .travel-map-toolbar-head{align-items:flex-start;flex-direction:column}
 .travel-map-actions{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr}
 .travel-map-action{justify-content:center;padding:0 7px}
 .travel-v19-modal{padding:10px!important;align-items:center!important}
 .travel-v19-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}
 .travel-v19-body{padding:14px;max-height:calc(100dvh - 82px)}
 .travel-history-filter{max-width:none}
}

/* ==========================================================================
   V20 — TRAVEL MODAL REFINEMENT + ACTIVE TRAVELLERS ON MAP
   ========================================================================== */

/* The Travel page no longer renders an active-travel table below the map. */
#travelProvinceTripsCard{display:none!important}

/* Clean, consistent modal shell */
.travel-v19-modal{
  position:fixed!important;inset:0!important;z-index:40000!important;
  display:none!important;align-items:center!important;justify-content:center!important;
  padding:24px!important;background:rgba(31,38,34,.58)!important;backdrop-filter:blur(4px)!important;
}

.travel-v19-dialog{
  position:relative!important;width:min(600px,calc(100vw - 48px))!important;
  max-height:min(760px,calc(100dvh - 48px))!important;
  display:flex!important;flex-direction:column!important;
  background:#fff!important;border:1px solid #d7dcd8!important;border-radius:14px!important;
  overflow:hidden!important;box-shadow:0 24px 70px rgba(20,28,23,.3)!important;
}
.travel-v19-dialog.travel-history-dialog{width:min(920px,calc(100vw - 48px))!important}
.travel-v19-dialog>.fleet-quick-head{
  flex:0 0 auto!important;min-height:64px!important;padding:14px 18px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:14px!important;background:#f8fafb!important;border-bottom:1px solid #e1e4e0!important;
  box-sizing:border-box!important;
}
.travel-v19-dialog .fleet-quick-title{min-width:0!important;display:flex!important;flex-direction:column!important;gap:2px!important}
.travel-v19-dialog .fleet-quick-title>span{font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.04em!important;color:#778079!important}
.travel-v19-dialog .fleet-quick-title>strong{font-size:17px!important;line-height:1.2!important;color:#22323d!important}
.travel-v19-dialog .fleet-modal-close{
  position:static!important;flex:0 0 36px!important;width:36px!important;height:36px!important;
  min-width:36px!important;min-height:36px!important;padding:0!important;margin:0!important;
  display:grid!important;place-items:center!important;border:1px solid #d7dcd8!important;
  border-radius:8px!important;background:#fff!important;color:#606963!important;
}
.travel-v19-body{
  flex:1 1 auto!important;min-height:0!important;max-height:none!important;
  padding:18px!important;overflow-y:auto!important;box-sizing:border-box!important;
}
.travel-v19-body>label,.travel-history-filter label{
  margin:0 0 14px!important;display:flex!important;flex-direction:column!important;gap:6px!important;
  font-size:11px!important;font-weight:700!important;color:#56636d!important;
}
.travel-v19-body select,.travel-v19-body input{
  display:block!important;width:100%!important;height:42px!important;min-height:42px!important;
  margin:0!important;padding:0 11px!important;box-sizing:border-box!important;
  border:1px solid #cbd1cd!important;border-radius:8px!important;background:#fff!important;color:#1f2b34!important;
}
.travel-v19-body .travel-province-info{
  margin:0 0 14px!important;padding:10px 12px!important;min-height:48px!important;box-sizing:border-box!important;
}
.travel-v19-body .travel-edit-date-grid{margin:0!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
.travel-v19-body .travel-edit-date-grid label{margin:0!important;display:flex!important;flex-direction:column!important;gap:6px!important;font-size:11px!important;font-weight:700!important;color:#56636d!important}
.travel-v19-body .travel-edit-days{margin:14px 0 0!important;min-height:48px!important;padding:10px 12px!important;box-sizing:border-box!important}
.travel-v19-body .travel-date-range-label{margin:6px 0 0!important;min-height:14px!important}
.travel-v19-actions{
  position:sticky!important;bottom:-18px!important;margin:18px -18px -18px!important;padding:14px 18px!important;
  background:#fff!important;border-top:1px solid #e2e5e1!important;display:flex!important;justify-content:flex-end!important;gap:8px!important;
}
.travel-v19-actions button{height:40px!important;min-height:40px!important;padding:0 15px!important;border-radius:8px!important}

/* History: header/filter remain fixed while only records scroll */
.travel-history-dialog .travel-v19-body{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.travel-history-dialog .travel-history-filter{flex:0 0 auto!important;width:260px!important;max-width:100%!important;margin:0 0 14px!important}
.travel-history-dialog #travelHistoricTableWrap{
  flex:1 1 auto!important;min-height:0!important;overflow:auto!important;
  border:1px solid #e0e3df!important;border-radius:9px!important;
}
.travel-history-dialog #travelHistoricTable{width:100%!important;border-collapse:collapse!important}
.travel-history-dialog #travelHistoricTable thead{position:sticky!important;top:0!important;z-index:2!important}
.travel-history-dialog #travelHistoricTable th{background:#45514b!important;color:#fff!important;padding:11px 12px!important;font-size:10px!important;white-space:nowrap!important}
.travel-history-dialog #travelHistoricTable td{padding:11px 12px!important;font-size:11px!important;border-bottom:1px solid #e4e6e2!important;vertical-align:middle!important}
.travel-history-dialog #travelHistoricTable tr:nth-child(even) td{background:#fafbf9!important}
.travel-history-dialog #travelHistoricTable .actions{white-space:nowrap!important;width:82px!important}

/* Leaflet active traveller card */


@media(max-width:600px){
 .travel-v19-modal{padding:10px!important}
 .travel-v19-dialog,.travel-v19-dialog.travel-history-dialog{width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;border-radius:12px!important}
 .travel-v19-dialog>.fleet-quick-head{min-height:58px!important;padding:11px 13px!important}
 .travel-v19-body{padding:13px!important}
 .travel-v19-body .travel-edit-date-grid{grid-template-columns:1fr!important}
 .travel-v19-actions{bottom:-13px!important;margin:16px -13px -13px!important;padding:12px 13px!important}
 .travel-history-dialog .travel-history-filter{width:100%!important}
 .travel-history-dialog #travelHistoricTableWrap{overflow:auto!important}
 .travel-history-dialog #travelHistoricTable{min-width:690px!important}

}

/* ==========================================================================
   V21 — TRAVEL MAP TOOLBAR + POPUP POSITIONING POLISH
   ========================================================================== */
.travel-map-toolbar-head{
  min-height:58px!important;
  padding:.72rem .8rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
}
.travel-map-actions{
  display:inline-flex!important;
  align-items:center!important;
  gap:0!important;
  flex:0 0 auto!important;
  padding:3px!important;
  border:1px solid #d7ddd8!important;
  border-radius:10px!important;
  background:#f3f5f2!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65)!important;
}
.travel-map-actions .travel-map-action{
  position:relative!important;
  min-width:86px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 12px!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#5c6861!important;
  font-size:10px!important;
  font-weight:750!important;
  line-height:1!important;
  box-shadow:none!important;
  white-space:nowrap!important;
  transition:background .14s ease,color .14s ease,box-shadow .14s ease!important;
}
.travel-map-actions .travel-map-action + .travel-map-action::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:7px!important;
  bottom:7px!important;
  width:1px!important;
  background:#dce1dd!important;
}
.travel-map-actions .travel-map-action i{
  font-size:11px!important;
  color:#77847d!important;
}
.travel-map-actions .travel-map-action:hover{
  background:#e9eeea!important;
  color:#36433c!important;
}
.travel-map-actions .travel-map-action-add{
  background:#5d7467!important;
  color:#fff!important;
  box-shadow:0 1px 2px rgba(36,48,40,.14)!important;
}
.travel-map-actions .travel-map-action-add i{
  color:#fff!important;
}
.travel-map-actions .travel-map-action-add:hover{
  background:#50665a!important;
  color:#fff!important;
}
.travel-map-actions .travel-map-action-history{
  color:#4c5c53!important;
}
.travel-map-actions .travel-map-action-reset{
  color:#68726c!important;
}
.travel-map-actions .travel-map-action-reset i{
  color:#87949e!important;
}

/* Popup gets slightly more vertical breathing room and never clips against map edge */


.travel-active-popup

/* Give Leaflet room to auto-pan popup beneath the page header */


@media(max-width:720px){
  .travel-map-toolbar-head{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:9px!important;
  }
  .travel-map-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:3px!important;
  }
  .travel-map-actions .travel-map-action{
    width:100%!important;
    min-width:0!important;
    padding:0 8px!important;
  }
  .travel-map-actions .travel-map-action + .travel-map-action::before{
    display:none!important;
  }
}
@media(max-width:390px){
  .travel-map-actions .travel-map-action{
    font-size:9px!important;
    gap:4px!important;
  }
}

/* ==========================================================================
   V23 — RELIABLE IN-MAP ACTIVE TRAVELLER PANEL
   No Leaflet popup/pan dependency.
   ========================================================================== */
.travel-map-stage{
    position:relative!important;
    width:100%!important;
    min-height:440px!important;
    overflow:hidden!important;
    background:#eef1ed!important;
}
.travel-map-stage .travel-map{
    position:relative!important;
    width:100%!important;
    height:440px!important;
    z-index:1!important;
}
.travel-map-traveller-panel{
    position:absolute!important;
    top:14px!important;
    right:14px!important;
    z-index:800!important;
    width:min(360px,calc(100% - 28px))!important;
    max-height:calc(100% - 28px)!important;
    display:flex!important;
    flex-direction:column!important;
    background:#fff!important;
    border:1px solid #d9dfda!important;
    border-radius:12px!important;
    box-shadow:0 16px 38px rgba(28,38,31,.2)!important;
    overflow:hidden!important;
    opacity:0!important;
    transform:translateY(-6px)!important;
    pointer-events:none!important;
    transition:opacity .16s ease,transform .16s ease!important;
}
.travel-map-traveller-panel[hidden]{
    display:none!important;
}
.travel-map-traveller-panel.open{
    opacity:1!important;
    transform:translateY(0)!important;
    pointer-events:auto!important;
}
.travel-map-panel-head{
    flex:0 0 auto!important;
    min-height:64px!important;
    padding:12px 12px 11px 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    background:#f6f8f5!important;
    border-bottom:1px solid #e2e6e2!important;
}
.travel-map-panel-head>div{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:1px!important;
}
.travel-map-panel-head>div>span{
    color:#73818b!important;
    font-size:9px!important;
    font-weight:700!important;
    text-transform:uppercase!important;
    letter-spacing:.06em!important;
}
.travel-map-panel-head strong{
    color:#2d3831!important;
    font-size:15px!important;
    line-height:1.2!important;
}
.travel-map-panel-head small{
    margin-top:2px!important;
    color:#69746d!important;
    font-size:10px!important;
}
.travel-map-panel-head button{
    flex:0 0 32px!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    padding:0!important;
    border:1px solid #d7ddd8!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#69736d!important;
    display:grid!important;
    place-items:center!important;
}
.travel-map-panel-list{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:260px!important;
    overflow-y:auto!important;
}
.travel-map-panel-traveller{
    min-height:58px!important;
    padding:9px 12px!important;
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:9px!important;
    border-bottom:1px solid #edf0ed!important;
}
.travel-map-panel-traveller:last-child{
    border-bottom:0!important;
}
.travel-map-panel-avatar{
    width:32px!important;
    height:32px!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    background:#e4efe8!important;
    color:#43805a!important;
    font-size:11px!important;
}
.travel-map-panel-copy{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
}
.travel-map-panel-copy strong{
    color:#303a34!important;
    font-size:11px!important;
    line-height:1.25!important;
    white-space:normal!important;
}
.travel-map-panel-copy span{
    color:#7b837e!important;
    font-size:9px!important;
}
.travel-map-panel-days{
    min-width:48px!important;
    padding-left:9px!important;
    border-left:1px solid #e6e9e6!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
}
.travel-map-panel-days strong{
    color:#3f7354!important;
    font-size:15px!important;
    line-height:1.1!important;
}
.travel-map-panel-days span{
    color:#7b837e!important;
    font-size:8px!important;
    white-space:nowrap!important;
}
.travel-map-panel-empty{
    min-height:90px!important;
    padding:16px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    color:#758079!important;
    text-align:center!important;
}
.travel-map-panel-empty i{
    color:#7b9384!important;
    font-size:17px!important;
}
.travel-map-panel-empty strong{
    color:#56635b!important;
    font-size:11px!important;
}
.travel-map-panel-footer{
    flex:0 0 auto!important;
    padding:10px 12px!important;
    display:flex!important;
    justify-content:flex-end!important;
    background:#f8f9f7!important;
    border-top:1px solid #e5e8e4!important;
}
.travel-map-panel-footer .btn-primary{
    min-height:34px!important;
    padding:0 12px!important;
    border-radius:7px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    font-size:10px!important;
}

@media(max-width:700px){
    .travel-map-stage{
        min-height:390px!important;
    }
    .travel-map-stage .travel-map{
        height:390px!important;
    }
    .travel-map-traveller-panel{
        top:auto!important;
        right:8px!important;
        left:8px!important;
        bottom:8px!important;
        width:auto!important;
        max-height:72%!important;
        border-radius:11px!important;
    }
    .travel-map-panel-list{
        max-height:180px!important;
    }
}
@media(max-width:430px){
    .travel-map-stage{
        min-height:360px!important;
    }
    .travel-map-stage .travel-map{
        height:360px!important;
    }
}

/* ==========================================================================
   V24 — PAYMENTS: SUPPLIER CARDS + MODAL CRUD
   ========================================================================== */
.payments-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.payments-page-head h2{margin:0!important}.payments-page-head p{margin:4px 0 0;color:#758079;font-size:11px}
.payments-primary-btn{min-height:38px;padding:0 14px;border:1px solid #566e60;border-radius:8px;background:#5d7467;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.payments-toolbar{min-height:62px;margin-bottom:14px;padding:10px 12px;border:1px solid #dfe3df;border-radius:10px;background:#f8fafb;display:flex;align-items:center;justify-content:space-between;gap:12px}
.payments-year-filter{display:flex;align-items:center;gap:8px}.payments-year-filter label{font-size:10px;font-weight:700;color:#5d6861;display:flex;align-items:center;gap:6px}.payments-year-filter select{height:36px;min-width:110px;padding:0 10px;border:1px solid #cbd1cd;border-radius:7px;background:#fff;color:#333c36}
.payments-grand-total{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;text-align:right}.payments-grand-total span{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:#7a847e}.payments-grand-total strong{grid-row:1/3;grid-column:2;font-size:16px;color:#34453b}.payments-grand-total small{font-size:9px;color:#858d88}
.payment-supplier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:10px;margin-bottom:14px}
.payment-supplier-card{min-height:128px;padding:13px;text-align:left;border:1px solid #dfe3df;border-radius:11px;background:#fff;color:#303a34;display:flex;flex-direction:column;align-items:stretch;box-shadow:0 2px 8px rgba(32,43,35,.035);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.payment-supplier-card:hover{transform:translateY(-1px);border-color:#bfcac3;box-shadow:0 7px 18px rgba(32,43,35,.08)}
.payment-supplier-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.payment-supplier-icon{width:30px;height:30px;border-radius:8px;background:#e8f0f5;color:#315f7d;display:grid;place-items:center}.payment-supplier-count{font-size:9px;color:#73818b}
.payment-supplier-card>strong{font-size:12px;line-height:1.25;color:#263945;overflow-wrap:anywhere}.payment-supplier-total{margin-top:5px;font-size:17px;font-weight:750;color:#315f7d}.payment-supplier-card>small{margin-top:auto;padding-top:8px;font-size:9px;color:#87908a}
.payments-empty-state{grid-column:1/-1;min-height:120px;border:1px dashed #d4dad5;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#73818b}.payments-empty-state i{font-size:18px}.payments-empty-state strong{font-size:11px}
.payments-calendar-container{margin-top:14px}

.payment-modal{position:fixed!important;inset:0!important;z-index:40000!important;display:none!important;align-items:center!important;justify-content:center!important;padding:20px!important;background:rgba(31,38,34,.56)!important;backdrop-filter:blur(4px)}
.payment-modal.open{display:flex!important}.payment-modal-open{overflow:hidden!important}
.payment-modal-dialog{width:min(610px,calc(100vw - 40px));max-height:calc(100dvh - 40px);display:flex;flex-direction:column;background:#fff;border:1px solid #dce3e7;border-radius:14px;overflow:hidden;box-shadow:0 24px 70px rgba(25,31,27,.28)}
.payment-history-dialog{width:min(850px,calc(100vw - 40px))}
.payment-modal-head{flex:0 0 auto;min-height:66px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f8fafb;border-bottom:1px solid #e2e5e1}
.payment-modal-head>div{min-width:0;display:flex;flex-direction:column;gap:1px}.payment-modal-head>div>span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#7c857f}.payment-modal-head strong{font-size:16px;color:#2f3933;overflow-wrap:anywhere}.payment-modal-head small{font-size:9px;color:#77817a}
.payment-modal-close{width:34px;height:34px;min-width:34px;padding:0;border:1px solid #d7ddd8;border-radius:8px;background:#fff;color:#657069;display:grid;place-items:center}
.payment-modal-body{flex:1 1 auto;min-height:0;padding:16px;overflow-y:auto}
.payment-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.payment-form-grid label{display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:700;color:#59645d}.payment-form-grid input{width:100%;height:42px;padding:0 10px;box-sizing:border-box;border:1px solid #cbd1cd;border-radius:8px;background:#fff;color:#2f3833}.payment-field-wide{grid-column:1/-1}
.payment-modal-actions{margin:17px -16px -16px;padding:13px 16px;border-top:1px solid #e4e7e3;background:#fafbf9;display:flex;justify-content:flex-end;align-items:center;gap:8px}.payment-modal-actions button{min-height:38px;padding:0 13px;border-radius:8px}.payment-secondary-btn{border:1px solid #d1d7d2;background:#fff;color:#59645d}.payment-danger-btn{border:1px solid #decaca;background:#fff;color:#8c5a5a;display:inline-flex;align-items:center;gap:6px}.payment-action-spacer{flex:1}
.payment-history-body{padding:0}.payment-history-list{max-height:min(560px,calc(100dvh - 130px));overflow-y:auto}.payment-history-row{min-height:64px;padding:10px 14px;display:grid;grid-template-columns:120px minmax(0,1fr) 140px 76px;align-items:center;gap:10px;border-bottom:1px solid #edf0ed}.payment-history-row:last-child{border-bottom:0}.payment-history-date{display:flex;align-items:center;gap:7px;font-size:10px;color:#65716a}.payment-history-date i{color:#7c9184}.payment-history-desc{min-width:0;display:flex;flex-direction:column;gap:2px}.payment-history-desc strong{font-size:11px;color:#313b35;overflow-wrap:anywhere}.payment-history-desc span{font-size:9px;color:#87908a}.payment-history-amount{text-align:right;font-size:12px;font-weight:750;color:#4f6959}.payment-history-actions{display:flex;justify-content:flex-end;gap:5px}.payment-history-actions button{width:32px;height:32px;padding:0;border:1px solid #d9ded9;border-radius:7px;background:#fff;color:#627068}.payment-history-actions .payment-row-delete{color:#8b5d5d}
.payment-history-empty{min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#7c857f}.payment-history-empty[hidden]{display:none!important}.payment-history-empty i{font-size:19px}.payment-history-empty strong{font-size:11px}

@media(max-width:650px){
 .payments-page-head{align-items:stretch}.payments-page-head .payments-primary-btn{flex:0 0 auto}
 .payments-toolbar{align-items:stretch;flex-direction:column}.payments-year-filter{justify-content:space-between}.payments-year-filter select{flex:1;max-width:160px}.payments-grand-total{align-self:flex-end}
 .payment-supplier-grid{grid-template-columns:1fr 1fr}
 .payment-modal{padding:10px!important}.payment-modal-dialog,.payment-history-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:12px}
 .payment-form-grid{grid-template-columns:1fr}.payment-field-wide{grid-column:auto}
 .payment-history-row{grid-template-columns:88px minmax(0,1fr) auto;gap:7px}.payment-history-actions{grid-column:2/4;justify-content:flex-end;margin-top:-4px}.payment-history-amount{font-size:11px}
}
@media(max-width:430px){
 .payments-page-head{flex-direction:column}.payments-page-head .payments-primary-btn{width:100%}
 .payment-supplier-grid{grid-template-columns:1fr}
 .payment-history-row{grid-template-columns:1fr auto}.payment-history-date{grid-column:1}.payment-history-desc{grid-column:1}.payment-history-amount{grid-column:2;grid-row:1/3}.payment-history-actions{grid-column:1/3}
}

/* ==========================================================================
   V25 — SIMPLE GLOBAL SEARCH
   ========================================================================== */
.header-right{position:relative}
.global-search-shell{position:relative;width:min(340px,34vw);z-index:12000}
.global-search-shell .global-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:11px;color:#7d8781;pointer-events:none}
#globalSearch{width:100%;height:36px!important;padding:0 34px 0 31px!important;border:1px solid #d6dcd7!important;border-radius:9px!important;background:#fff!important;color:#303a34!important;font-size:11px!important;box-shadow:none!important}
#globalSearch:focus{outline:none!important;border-color:#8fa095!important;box-shadow:0 0 0 3px rgba(95,118,103,.09)!important}
.global-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;padding:0!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#7c8780!important;display:grid;place-items:center}
.global-search-clear[hidden]{display:none!important}
.global-search-container{position:absolute!important;top:calc(100% + 7px)!important;right:0!important;left:auto!important;width:min(440px,calc(100vw - 24px))!important;max-height:min(440px,65vh)!important;margin:0!important;padding:5px!important;overflow-y:auto!important;background:#fff!important;border:1px solid #d9dfda!important;border-radius:11px!important;box-shadow:0 16px 42px rgba(27,36,30,.16)!important;z-index:12001!important}
.global-search-result{width:100%;min-height:53px;padding:7px 9px!important;border:0!important;border-radius:8px!important;background:#fff!important;color:#303a34!important;display:grid!important;grid-template-columns:32px minmax(0,1fr) 16px;align-items:center;gap:9px;text-align:left!important}
.global-search-result:hover,.global-search-result.active{background:#f0f4f1!important}
.global-search-result-icon{width:30px;height:30px;border-radius:7px;background:#e9efeb;color:#607769;display:grid;place-items:center;font-size:11px}
.global-search-result-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.global-search-result-copy strong{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.global-search-result-copy small{font-size:9px;color:#7d8781;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.global-search-result-arrow{font-size:8px;color:#a2aaa5}.global-search-empty{min-height:76px;display:flex;align-items:center;justify-content:center;gap:7px;color:#7d8781;font-size:10px}
.global-search-selection{position:relative!important;z-index:2!important;outline:2px solid #6d8877!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgba(109,136,119,.12)!important;animation:globalSearchSelectionPulse 1.25s ease-in-out 2}
tr.global-search-selection td{background:#edf3ef!important}
@keyframes globalSearchSelectionPulse{0%,100%{box-shadow:0 0 0 5px rgba(109,136,119,.12)}50%{box-shadow:0 0 0 9px rgba(109,136,119,.06)}}
@media(max-width:700px){
 .main-header .header-right{gap:7px!important}
 .global-search-shell{width:min(210px,52vw)}
 #globalSearch{height:34px!important;font-size:10px!important}
 .global-search-container{position:fixed!important;top:58px!important;left:10px!important;right:10px!important;width:auto!important;max-height:min(390px,58vh)!important}
}
@media(max-width:430px){
 .global-search-shell{width:min(170px,48vw)}
}


/* ==========================================================================
   V29 — SLIM MOBILE SEARCH + ACTUAL BRAND TEXT RESTORED
   The header markup contains .opsflex-brand-subtitle, not a brand-name node.
   ========================================================================== */
@media (max-width:768px){
  .main-header{
    min-height:52px!important;
    height:52px!important;
    padding:0 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px!important;
    overflow:visible!important;
  }

  .main-header .header-left{
    flex:1 1 auto!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .main-header .opsflex-brand{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
  }
  .main-header .opsflex-logo{
    flex:0 0 27px!important;
    width:27px!important;
    height:27px!important;
    min-width:27px!important;
    margin:0!important;
  }
  .main-header .opsflex-brand-text{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  /* This is the actual text node present in index.html. */
  .main-header .opsflex-brand-subtitle{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    max-width:92px!important;
    margin:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#d7ded9!important;
    font-size:9px!important;
    font-weight:600!important;
    line-height:1.1!important;
  }

  .main-header .header-right{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    position:relative!important;
    overflow:visible!important;
  }

  .main-header #globalSearchShell.global-search-shell{
    display:block!important;
    position:relative!important;
    flex:0 0 118px!important;
    width:118px!important;
    min-width:118px!important;
    max-width:118px!important;
    height:27px!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .main-header #globalSearch{
    display:block!important;
    width:118px!important;
    min-width:118px!important;
    max-width:118px!important;
    height:27px!important;
    min-height:27px!important;
    margin:0!important;
    padding:0 24px 0 23px!important;
    border:1px solid #d0d6d2!important;
    border-radius:7px!important;
    background:#fff!important;
    color:#303a34!important;
    font-size:16px!important;
    line-height:27px!important;
    box-sizing:border-box!important;
    box-shadow:none!important;
    -webkit-appearance:none!important;
    appearance:none!important;
  }
  .main-header #globalSearch::placeholder{
    font-size:9px!important;
    color:#89959e!important;
    opacity:1!important;
  }
  .main-header #globalSearchShell .global-search-icon{
    display:block!important;
    visibility:visible!important;
    position:absolute!important;
    left:8px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:2!important;
    font-size:8px!important;
    color:#7e8982!important;
    pointer-events:none!important;
  }
  .main-header #globalSearchClear.global-search-clear{
    position:absolute!important;
    right:3px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    min-height:21px!important;
    padding:0!important;
    z-index:3!important;
    font-size:8px!important;
  }
  .main-header #globalSearchClear.global-search-clear[hidden]{display:none!important}

  .main-header .header-lang{
    flex:0 0 auto!important;
    display:inline-flex!important;
    position:static!important;
    margin:0!important;
    padding:1px!important;
    gap:0!important;
    transform:none!important;
  }
  .main-header .header-lang button{
    width:25px!important;
    min-width:25px!important;
    height:25px!important;
    min-height:25px!important;
    padding:0!important;
    font-size:8px!important;
    line-height:25px!important;
  }

  #globalSearchContainer.global-search-container{
    position:fixed!important;
    top:56px!important;
    left:8px!important;
    right:8px!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(330px,calc(100dvh - 132px))!important;
    margin:0!important;
    padding:4px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    transform:none!important;
    z-index:60000!important;
    box-sizing:border-box!important;
  }
  #globalSearchContainer .global-search-result{
    min-height:45px!important;
    width:100%!important;
    padding:5px 7px!important;
    grid-template-columns:27px minmax(0,1fr) 10px!important;
    gap:7px!important;
  }
  #globalSearchContainer .global-search-result-icon{
    width:27px!important;
    height:27px!important;
    font-size:9px!important;
  }
}

@media (max-width:430px){
  .main-header .opsflex-brand-subtitle{
    max-width:70px!important;
    font-size:8.5px!important;
  }
  .main-header #globalSearchShell.global-search-shell,
  .main-header #globalSearch{
    flex-basis:104px!important;
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important;
  }
}

@media (max-width:360px){
  .main-header .opsflex-brand-subtitle{
    max-width:54px!important;
    font-size:8px!important;
  }
  .main-header #globalSearchShell.global-search-shell,
  .main-header #globalSearch{
    flex-basis:92px!important;
    width:92px!important;
    min-width:92px!important;
    max-width:92px!important;
  }
}

/* ==========================================================================
   V30 — TRAVEL MOBILE TOOLBAR
   Add / Historic / Reset stay on one horizontal row.
   ========================================================================== */
@media (max-width:768px){
  #travelLog .travel-map-toolbar-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
  }
  #travelLog .travel-map-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    flex-direction:row!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    gap:5px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
  #travelLog .travel-map-actions .travel-map-action{
    display:inline-flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:31px!important;
    height:31px!important;
    margin:0!important;
    padding:0 6px!important;
    border-radius:7px!important;
    white-space:nowrap!important;
    font-size:9px!important;
    line-height:1!important;
    gap:4px!important;
    box-sizing:border-box!important;
  }
  #travelLog .travel-map-actions .travel-map-action i{
    flex:0 0 auto!important;
    margin:0!important;
    font-size:9px!important;
  }
  #travelLog .travel-map-actions .travel-map-action span{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}
@media (max-width:360px){
  #travelLog .travel-map-actions{
    gap:4px!important;
  }
  #travelLog .travel-map-actions .travel-map-action{
    padding:0 4px!important;
    font-size:8px!important;
    gap:3px!important;
  }
}

/* ==========================================================================
   V32 — STANDBY PAGE RESTYLE
   ========================================================================== */
#standby{max-width:100%;padding-bottom:30px}
#standby .standby-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 14px}
#standby .standby-page-head h2{margin:0;color:#22323d;font-size:20px;font-weight:700;letter-spacing:-.02em}
#standby .standby-page-head p{margin:4px 0 0;color:#73818b;font-size:10px;line-height:1.4}
#standby .standby-page-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
#standby .standby-primary-btn,#standby .standby-secondary-btn{min-height:34px;padding:0 12px;border-radius:7px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:none;white-space:nowrap}
#standby .standby-primary-btn{background:#315f7d;color:#fff;border:1px solid #315f7d}
#standby .standby-primary-btn:hover{background:#4d6056;border-color:#4d6056}
#standby .standby-secondary-btn{background:#fff;color:#4d5c67;border:1px solid #d6dee4}
#standby .standby-secondary-btn:hover{background:#f5f7f9;border-color:#c8cfca}
#standby .standby-panel{background:#fff;border:1px solid #e3e8eb;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(37,47,41,.045)}
#standby .standby-table-wrap{margin:0!important;border:0!important;border-radius:0!important;overflow:auto}
#standby #standbyTable{width:100%;margin:0;border-collapse:separate;border-spacing:0;background:#fff}
#standby #standbyTable thead th{position:sticky;top:0;z-index:2;padding:10px 12px;background:#f5f7f9;color:#53636e;border:0;border-bottom:1px solid #e4e9ec;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.035em;text-align:left}
#standby #standbyTable tbody td{padding:8px 12px;border:0;border-bottom:1px solid #ecefeb;color:#343c37;font-size:10px;vertical-align:middle;background:#fff}
#standby #standbyTable tbody tr:nth-child(even) td{background:#fafbfc}
#standby #standbyTable tbody tr:last-child td{border-bottom:0}
#standby #standbyTable tbody tr:hover td{background:#f3f7fa}
#standby #standbyTable td:first-child{font-weight:600;min-width:210px}
#standby #standbyTable td[contenteditable="true"]{min-width:125px;cursor:text;font-weight:700;color:#4e6357}
#standby #standbyTable td[contenteditable="true"]:focus{outline:2px solid #aebdb4;outline-offset:-3px;background:#f5f8f6!important}
#standby #standbyTable select{width:100%;min-width:125px;height:31px;margin:0;padding:0 28px 0 9px;border:1px solid #d3dce2;border-radius:6px;background:#fff;color:#3d4741;font-size:10px;box-shadow:none}
#standby #standbyTable select:focus{outline:none;border-color:#93a59a;box-shadow:0 0 0 3px rgba(93,116,102,.08)}

@media(max-width:768px){
 #standby{padding-left:0!important;padding-right:0!important}
 #standby .standby-page-head{align-items:center;gap:8px;margin-bottom:10px;padding:0 2px}
 #standby .standby-page-head h2{font-size:16px}
 #standby .standby-page-head p{display:none}
 #standby .standby-page-actions{gap:4px}
 #standby .standby-primary-btn,#standby .standby-secondary-btn{min-height:30px;height:30px;padding:0 8px;font-size:9px;border-radius:6px;gap:4px}
 #standby .standby-panel{border-radius:8px}
 #standby .standby-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
 #standby #standbyTable{min-width:510px}
 #standby #standbyTable thead th{padding:8px 9px;font-size:8px}
 #standby #standbyTable tbody td{padding:7px 9px;font-size:9px}
 #standby #standbyTable td:first-child{min-width:195px}
 #standby #standbyTable td[contenteditable="true"]{min-width:105px}
 #standby #standbyTable select{min-width:112px;height:29px;font-size:9px}
}
@media(max-width:390px){
 #standby .standby-page-head{align-items:flex-start;flex-direction:column}
 #standby .standby-page-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
 #standby .standby-primary-btn,#standby .standby-secondary-btn{width:100%}
}

/* ==========================================================================
   V33 — ONEWEB TASKS
   ========================================================================== */
#owstock{max-width:100%;padding-bottom:30px}
#owstock .oneweb-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 14px}
#owstock .oneweb-page-head h2{margin:0;color:#22323d;font-size:20px;font-weight:700;letter-spacing:-.02em}
#owstock .oneweb-page-head p{margin:4px 0 0;color:#73818b;font-size:10px;line-height:1.4}
.oneweb-primary-btn,.oneweb-secondary-btn{min-height:34px;padding:0 12px;border-radius:7px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:none;white-space:nowrap}
.oneweb-primary-btn{background:#315f7d;color:#fff;border:1px solid #315f7d}
.oneweb-primary-btn:hover{background:#4d6056;border-color:#4d6056}
.oneweb-secondary-btn{background:#fff;color:#4d5c67;border:1px solid #d6dee4}
#owstock .oneweb-panel{background:#fff;border:1px solid #e3e8eb;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(37,47,41,.045)}
#owstock .oneweb-table-wrap{margin:0!important;border:0!important;border-radius:0!important;overflow:auto}
#onewebTasksTable{width:100%;margin:0;border-collapse:separate;border-spacing:0;background:#fff;min-width:980px}
#onewebTasksTable thead th{position:sticky;top:0;z-index:2;padding:10px 11px;background:#f5f7f9;color:#53636e;border:0;border-bottom:1px solid #e4e9ec;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;text-align:left;white-space:nowrap}
#onewebTasksTable tbody td{padding:8px 11px;border:0;border-bottom:1px solid #ecefeb;color:#343c37;font-size:9px;vertical-align:middle;background:#fff}
#onewebTasksTable tbody tr:nth-child(even) td{background:#fafbfc}
#onewebTasksTable tbody tr:hover td{background:#f3f7fa}

.oneweb-modal{display:none;position:fixed;inset:0;z-index:65000;background:rgba(35,42,38,.45);padding:20px;align-items:center;justify-content:center}
.oneweb-modal.open{display:flex}
.oneweb-modal-dialog{width:min(620px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#fff;border:1px solid #dfe3e0;border-radius:12px;box-shadow:0 18px 50px rgba(25,33,28,.2)}
.oneweb-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e7ecef;background:#ffffff}
.oneweb-modal-head>div{display:flex;flex-direction:column;gap:2px}
.oneweb-modal-head span{font-size:8px;color:#7c8780;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.oneweb-modal-head strong{font-size:14px;color:#2f3d47}
.oneweb-modal-close{width:30px;height:30px;border:1px solid #d7ddd9;border-radius:7px;background:#fff;color:#59635d;display:grid;place-items:center;padding:0}
.oneweb-modal-body{padding:16px}
.oneweb-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.oneweb-form-grid .form-row{margin:0;display:flex;flex-direction:column;gap:5px}
.oneweb-form-grid .oneweb-form-wide{grid-column:1/-1}
.oneweb-form-grid label{font-size:9px;font-weight:700;color:#53636e}
.oneweb-form-grid input,.oneweb-form-grid select{width:100%;height:34px;margin:0;padding:0 10px;border:1px solid #d3dce2;border-radius:7px;background:#fff;color:#35434d;font-size:10px;box-sizing:border-box;box-shadow:none}
.oneweb-modal-actions{display:flex;justify-content:flex-end;gap:7px;padding:12px 16px;border-top:1px solid #e7ecef;background:#fafbfc}
body.oneweb-modal-open{overflow:hidden}
@media(max-width:768px){
 #owstock .oneweb-page-head{align-items:center;margin-bottom:10px}
 #owstock .oneweb-page-head h2{font-size:16px}
 #owstock .oneweb-page-head p{display:none}
 #owstock .oneweb-primary-btn{height:30px;min-height:30px;padding:0 9px;font-size:9px}
 #owstock .oneweb-table-wrap{-webkit-overflow-scrolling:touch}
 .oneweb-modal{padding:10px}
 .oneweb-modal-dialog{max-height:calc(100dvh - 20px);border-radius:10px}
 .oneweb-modal-body{padding:12px}
 .oneweb-form-grid{grid-template-columns:1fr;gap:9px}
 .oneweb-form-grid .oneweb-form-wide{grid-column:auto}
 .oneweb-modal-actions{padding:10px 12px}
}

/* ==========================================================================
   V34 — IP MANAGER SUBNET CARDS
   ========================================================================== */
#ipManager{max-width:100%;padding-bottom:30px}
#ipManager .ipm-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
#ipManager .ipm-page-head h2{margin:0;color:#22323d;font-size:20px;font-weight:700}
#ipManager .ipm-page-head h2 i{font-size:15px;margin-right:5px;color:#687b70}
#ipManager .ipm-page-head p{margin:4px 0 0;color:#73818b;font-size:10px}
.ipm-head-actions{display:flex;gap:6px}
.ipm-primary-btn,.ipm-secondary-btn{height:34px;padding:0 11px;border-radius:7px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.ipm-primary-btn{background:#315f7d;color:#fff;border:1px solid #315f7d}
.ipm-secondary-btn{background:#fff;color:#4d5c67;border:1px solid #d6dee4}
.ipm-toolbar{display:flex;align-items:center;gap:7px;margin-bottom:13px}
.ipm-search-wrap{position:relative;flex:1;max-width:360px}
.ipm-search-wrap i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:9px;color:#87949e}
.ipm-search-wrap input{width:100%;height:33px;padding:0 10px 0 28px;border:1px solid #dce3e7;border-radius:7px;background:#fff;font-size:10px;box-sizing:border-box}
.ipm-toolbar select{height:33px;padding:0 28px 0 9px;border:1px solid #dce3e7;border-radius:7px;background:#fff;font-size:9px;color:#46514b}
#ipCounters{margin-left:auto;color:#7d8781;font-size:9px}
.ipm-subnet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:9px}
.ipm-subnet-card{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto 12px;align-items:center;gap:9px;width:100%;min-height:76px;padding:11px;border:1px solid #e4e9ec;border-radius:10px;background:#fff;color:#35434d;text-align:left;box-shadow:0 2px 8px rgba(35,45,39,.035)}
.ipm-subnet-card:hover{border-color:#bfc9c2;background:#f9faf9;transform:translateY(-1px)}
.ipm-card-icon{width:36px;height:36px;border-radius:8px;background:#edf5f0;display:grid;place-items:center;color:#61746a;font-size:13px}
.ipm-card-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.ipm-card-copy strong{font-size:11px;color:#303a34;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ipm-card-copy span{font-size:8px;color:#7e8882;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ipm-card-stats{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:7px;color:#76817a}
.ipm-card-arrow{font-size:8px;color:#9ba49f}
.ipm-empty{text-align:center;padding:28px;color:#7d8781;font-size:10px}
.ipm-detail{background:#fff;border:1px solid #e4e9ec;border-radius:10px;overflow:hidden}
.ipm-detail-head{padding:11px 13px;background:#ffffff;border-bottom:1px solid #e4e8e5}
.ipm-back-btn{border:0;background:transparent;padding:0;margin:0 0 5px;color:#687a70;font-size:8px;font-weight:700}
.ipm-detail-head h3{margin:0;font-size:14px;color:#2f3d47}
.ipm-detail-head p{margin:3px 0 0;font-size:8px;color:#808a84}
.ipm-ip-list{display:flex;flex-direction:column}
.ipm-ip-row{display:grid;grid-template-columns:190px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:54px;padding:7px 12px;border-bottom:1px solid #edf1f3}
.ipm-ip-row:last-child{border-bottom:0}
.ipm-ip-row:hover{background:#fafbfc}
.ipm-ip-address{display:flex;align-items:center;gap:7px}
.ipm-ip-address strong{font-size:10px;color:#2f3d47;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ipm-status{display:inline-flex;padding:2px 5px;border-radius:999px;background:color-mix(in srgb,var(--ipm-status) 12%,white);color:var(--ipm-status);font-size:7px;font-weight:700}
.ipm-ip-assignment{display:flex;flex-direction:column;gap:2px;min-width:0}
.ipm-ip-assignment span{font-size:9px;font-weight:600;color:#48534d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ipm-ip-assignment em{color:#9aa29d;font-weight:400}
.ipm-ip-assignment small{font-size:7px;color:#8a938e}
.ipm-ip-actions{display:flex;align-items:center;gap:4px}
.ipm-row-edit{height:28px;padding:0 8px;border:1px solid #d6ddd8;border-radius:6px;background:#fff;color:#53636e;font-size:8px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
@media(max-width:768px){
 #ipManager .ipm-page-head{align-items:center;margin-bottom:9px}
 #ipManager .ipm-page-head h2{font-size:16px}
 #ipManager .ipm-page-head p{display:none}
 .ipm-primary-btn,.ipm-secondary-btn{height:30px;padding:0 8px;font-size:8px}
 .ipm-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px}
 .ipm-search-wrap{max-width:none}
 .ipm-toolbar select{max-width:105px}
 #ipCounters{grid-column:1/-1;margin:0;font-size:8px}
 .ipm-subnet-grid{grid-template-columns:1fr;gap:7px}
 .ipm-subnet-card{min-height:66px;grid-template-columns:32px minmax(0,1fr) auto 10px;padding:9px}
 .ipm-card-icon{width:32px;height:32px}
 .ipm-ip-row{grid-template-columns:1fr auto;gap:5px;padding:8px 10px}
 .ipm-ip-address{grid-column:1}
 .ipm-ip-assignment{grid-column:1}
 .ipm-ip-actions{grid-column:2;grid-row:1/3}
 .ipm-row-edit span{display:none}
 .ipm-row-edit{width:29px;padding:0;justify-content:center}
}

/* V35 — ONEWEB edit modal */
#onewebEditModal textarea{width:100%;min-height:68px;padding:8px 10px;border:1px solid #d3dce2;border-radius:7px;background:#fff;color:#35434d;font-size:10px;box-sizing:border-box;resize:vertical}
#onewebEditModal .oneweb-modal-dialog{width:min(660px,100%)}
#onewebTasksTable td.actions{white-space:nowrap}
#onewebTasksTable td.actions .btn-icon{margin:0 2px}

/* ==========================================================================
   V36 — IP MODAL CONSISTENCY + ONEWEB ROW INTERACTION
   ========================================================================== */
#ipEditModal .oneweb-modal-dialog{width:min(620px,100%);max-height:calc(100dvh - 40px)}
#ipEditModal textarea{width:100%;min-height:72px;padding:8px 10px;border:1px solid #d3dce2;border-radius:7px;background:#fff;color:#35434d;font-size:10px;box-sizing:border-box;resize:vertical}
#ipEditModal .oneweb-form-grid input,#ipEditModal .oneweb-form-grid select,#ipEditModal .oneweb-form-grid textarea{max-width:100%}
.oneweb-clickable-row{cursor:pointer;transition:background .12s ease}
#onewebTasksTable tbody .oneweb-clickable-row:hover td{background:#f0f4f1}
#onewebTasksTable tbody .oneweb-clickable-row:focus{outline:2px solid #93a59a;outline-offset:-2px}
#onewebTasksTable .oneweb-row-open{width:28px;text-align:center;color:#89959e}
.oneweb-danger-btn{min-height:34px;padding:0 12px;border-radius:7px;border:1px solid #e2c9c9;background:#fff;color:#a34f4f;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.oneweb-danger-btn:hover{background:#fff6f6;border-color:#d9b6b6}
.oneweb-modal-action-spacer{flex:1}
@media(max-width:768px){
 #ipEditModal{padding:10px;align-items:center}
 #ipEditModal .oneweb-modal-dialog{width:100%;max-height:calc(100dvh - 20px);margin:0}
 #ipEditModal .oneweb-modal-head{position:sticky;top:0;z-index:2}
 #ipEditModal .oneweb-modal-actions{position:sticky;bottom:0;z-index:2}
 #ipEditModal .oneweb-form-grid{grid-template-columns:1fr}
 #ipEditModal .oneweb-form-wide{grid-column:auto}
 .oneweb-danger-btn{min-height:30px;height:30px;padding:0 8px;font-size:9px}
 #onewebTasksTable .oneweb-row-open{position:sticky;right:0;background:inherit}
}

/* ==========================================================================\n   V37 — USER MANAGEMENT\n   ========================================================================== */
#userman{max-width:100%;padding-bottom:30px}
#userman .userm-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 12px}
#userman .userm-page-head h2{margin:0;color:#22323d;font-size:20px;font-weight:700;letter-spacing:-.02em}
#userman .userm-page-head h2 i{font-size:15px;margin-right:5px;color:#687b70}
#userman .userm-page-head p{margin:4px 0 0;color:#73818b;font-size:10px}
.userm-head-actions{display:flex!important;align-items:center;gap:6px!important;margin:0!important}
.userm-primary-btn,.userm-secondary-btn{height:34px;padding:0 11px;border-radius:7px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;box-shadow:none}
.userm-primary-btn{background:#315f7d;color:#fff;border:1px solid #315f7d}.userm-secondary-btn{background:#fff;color:#4d5c67;border:1px solid #d6dee4}
.userm-toolbar{display:flex;align-items:center;gap:7px;margin-bottom:12px;padding:9px;background:#ffffff;border:1px solid #e1e5e2;border-radius:9px}
.userm-search{position:relative;flex:1;max-width:380px}.userm-search i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:9px;color:#87949e}
.userm-search input{width:100%;height:33px;padding:0 10px 0 28px;border:1px solid #dce3e7;border-radius:7px;background:#fff;color:#35434d;font-size:10px;box-sizing:border-box}
.userm-toolbar select{height:33px;padding:0 28px 0 9px;border:1px solid #dce3e7;border-radius:7px;background:#fff;color:#46514b;font-size:9px}.userm-count{margin-left:auto;font-size:9px;color:#7d8781;white-space:nowrap}
#userman .userm-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:9px!important}
#userman .user-row{display:grid!important;grid-template-columns:40px minmax(0,1fr) auto;align-items:start;gap:10px;padding:12px!important;margin:0!important;background:#fff!important;border:1px solid #e4e9ec!important;border-radius:10px!important;box-shadow:0 2px 8px rgba(35,45,39,.035)!important;min-width:0}
#userman .user-row:hover{border-color:#c2cbc5!important;background:#fafbfc!important}
#userman .user-avatar{width:40px!important;height:40px!important;min-width:40px!important;border-radius:10px!important;background:#edf2ee!important;color:#5c7064!important;font-size:11px!important;font-weight:800!important;display:grid!important;place-items:center!important}
#userman .user-meta{min-width:0}#userman .user-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#2f3d47;font-size:11px;font-weight:700;line-height:1.3}
#userman .user-email{margin-top:2px;color:#7b8993;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#userman .user-perms{display:flex!important;flex-wrap:wrap;gap:3px!important;margin-top:7px!important}
#userman .perm-chip{display:inline-flex!important;align-items:center!important;min-height:19px!important;padding:0 6px!important;border-radius:999px!important;background:#f1f4f2!important;border:1px solid #e1e7eb!important;color:#657169!important;font-size:7px!important;font-weight:600!important}
#userman .role-badge{font-size:7px!important;padding:2px 5px!important;border-radius:999px!important;letter-spacing:.03em}
#userman .user-actions{display:grid!important;grid-template-columns:repeat(2,28px);gap:4px!important}
#userman .user-mgmt-btn{width:28px!important;height:28px!important;min-width:28px!important;padding:0!important;border-radius:6px!important;border:1px solid #dbe0dc!important;background:#fff!important;color:#657169!important;display:grid!important;place-items:center!important;font-size:8px!important;box-shadow:none!important}
#userman .user-mgmt-btn:hover{background:#f2f5f3!important;border-color:#c7d0ca!important}.user-mgmt-btn.danger{color:#a45454!important}
/* User modals conform to current app modal proportions */
.userm-modal{padding:20px!important;align-items:center!important;justify-content:center!important;background:rgba(35,42,38,.45)!important;z-index:65000!important}
.userm-modal .userm-modal-dialog{width:min(620px,100%)!important;max-width:620px!important;max-height:calc(100dvh - 40px)!important;overflow:auto!important;margin:0!important;padding:16px!important;border-radius:12px!important;background:#fff!important;border:1px solid #dfe3e0!important;box-shadow:0 18px 50px rgba(25,33,28,.2)!important}
.userm-modal .userm-modal-dialog h3{margin:0 0 12px!important;padding-bottom:10px!important;border-bottom:1px solid #e7ecef!important;color:#2f3d47!important;font-size:14px!important}
.userm-modal .form-row{margin-bottom:10px!important}.userm-modal .form-row label{font-size:9px!important;font-weight:700!important;color:#53636e!important}
.userm-modal input[type=text],.userm-modal input[type=email],.userm-modal select{width:100%!important;height:34px!important;padding:0 10px!important;border:1px solid #d3dce2!important;border-radius:7px!important;background:#fff!important;color:#35434d!important;font-size:10px!important;box-sizing:border-box!important}
.userm-modal .permissions-grid,#permsModalGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;max-height:270px!important;overflow:auto!important;padding:8px!important;border:1px solid #e1e7eb!important;border-radius:8px!important;background:#fafbfc!important}
.userm-modal .permissions-grid label,#permsModalGrid label{display:flex!important;align-items:center!important;gap:6px!important;min-height:29px!important;padding:4px 7px!important;margin:0!important;border-radius:6px!important;background:#fff!important;border:1px solid #e6ebee!important;color:#4d5c67!important;font-size:8px!important}
.userm-modal .modal-buttons{display:flex!important;justify-content:flex-end!important;gap:7px!important;margin-top:12px!important;padding-top:11px!important;border-top:1px solid #e7ecef!important}
body.userm-modal-open{overflow:hidden}
@media(max-width:768px){
 #userman .userm-page-head{align-items:center;margin-bottom:9px}#userman .userm-page-head h2{font-size:16px}#userman .userm-page-head p{display:none}.userm-primary-btn,.userm-secondary-btn{height:30px;padding:0 8px;font-size:8px}
 .userm-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:7px;gap:5px}.userm-search{max-width:none}.userm-toolbar select{max-width:105px}.userm-count{grid-column:1/-1;margin:0;font-size:8px}
 #userman .userm-grid{grid-template-columns:1fr!important;gap:7px!important}#userman .user-row{grid-template-columns:36px minmax(0,1fr) auto;padding:10px!important}#userman .user-avatar{width:36px!important;height:36px!important;min-width:36px!important}
 .userm-modal{padding:10px!important}.userm-modal .userm-modal-dialog{width:100%!important;max-height:calc(100dvh - 20px)!important;padding:12px!important;border-radius:10px!important}.userm-modal .permissions-grid,#permsModalGrid{grid-template-columns:1fr!important;max-height:230px!important}
}
@media(max-width:390px){#userman .userm-page-head{align-items:flex-start;flex-direction:column}.userm-head-actions{width:100%;display:grid!important;grid-template-columns:auto 1fr!important}.userm-primary-btn{width:100%}}
/* V38 Logs */#logs{padding-bottom:30px}.logs-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}.logs-page-head h2{margin:0;font-size:20px;color:#22323d}.logs-page-head p{margin:4px 0 0;font-size:10px;color:#73818b}.logs-head-actions{display:flex;gap:6px}.logs-primary-btn,.logs-secondary-btn{height:34px;padding:0 11px;border-radius:7px;font-size:9px;font-weight:700;display:inline-flex;align-items:center;gap:5px}.logs-primary-btn{background:#315f7d;color:#fff;border:1px solid #315f7d}.logs-secondary-btn{background:#fff;color:#4d5c67;border:1px solid #d6dee4}.logs-toolbar{display:flex;align-items:center;gap:6px;margin-bottom:10px}.logs-search{position:relative;flex:1;max-width:360px}.logs-search i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:8px;color:#89959e}.logs-search input,.logs-toolbar select{height:32px;border:1px solid #dce3e7;border-radius:7px;background:#fff;font-size:9px}.logs-search input{width:100%;padding:0 8px 0 27px}.logs-toolbar select{padding:0 8px}#logsCount{margin-left:auto;font-size:8px;color:#7b8993}.logs-panel{background:#fff;border:1px solid #e3e8eb;border-radius:10px;overflow:hidden}.logs-table-wrap{margin:0!important;border:0!important;overflow:auto}#logsTable{width:100%;margin:0;border-collapse:separate;border-spacing:0;min-width:700px}#logsTable th{padding:9px 11px;background:#f5f7f9;border:0;border-bottom:1px solid #e4e9ec;color:#53636e;font-size:8px;text-transform:uppercase;text-align:left}#logsTable td{padding:8px 11px;border:0;border-bottom:1px solid #edf1f3;font-size:9px}.logs-time strong,.logs-time span{display:block}.logs-time span{font-size:7px;color:#89959e}.logs-user{font-weight:600}.logs-action{padding:3px 6px;border-radius:999px;background:#edf5f0;color:#566772;font-size:7px;font-weight:700}.logs-collection{padding:3px 6px;border-radius:5px;background:#f5f6f5;font-size:7px}.logs-doc{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace;font-size:8px!important}.logs-state{text-align:center!important;padding:28px!important;color:#7d8781!important}.logs-error{color:#a34f4f!important}.logs-pagination{min-height:42px;padding:6px 10px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e8ebe9;font-size:8px;color:#7d8781}.logs-pagination>div{display:flex;align-items:center;gap:7px}.logs-pagination button{width:29px;height:29px;padding:0;border:1px solid #dce3e7;border-radius:6px;background:#fff}.logs-pagination button:disabled{opacity:.35}@media(max-width:768px){.logs-page-head{align-items:center}.logs-page-head h2{font-size:16px}.logs-page-head p{display:none}.logs-primary-btn,.logs-secondary-btn{height:30px;padding:0 8px;font-size:8px}.logs-secondary-btn span{display:none}.logs-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto}.logs-search{max-width:none}#logsPerPageSelect{display:none}#logsCount{grid-column:1/-1;margin:0}.logs-panel{border-radius:8px}#logsTable{min-width:620px}}
/* ==========================================================================
   V39 — REPORTING
   ========================================================================== */
#reports{padding-bottom:30px}.report-v39-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}.report-v39-head h2{margin:0;font-size:20px;color:#22323d}.report-v39-head h2 i{font-size:14px;color:#687b70;margin-right:5px}.report-v39-head p{margin:4px 0 0;font-size:10px;color:#73818b}.report-digest-btn,.report-generate-btn{height:34px;border:1px solid #315f7d;border-radius:7px;background:#315f7d;color:#fff;padding:0 12px;font-size:9px;font-weight:700;align-items:center;justify-content:center;gap:6px;cursor:pointer}.report-digest-btn{display:inline-flex}.report-v39-card,.report-v39-results{background:#fff;border:1px solid #e3e8eb;border-radius:10px;box-shadow:0 2px 9px rgba(35,45,39,.035);overflow:hidden}.report-v39-section-head,.report-v39-results-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid #e7ebe8}.report-v39-section-head strong,.report-v39-results-head strong{display:block;font-size:10px;color:#39443e}.report-v39-section-head span,.report-v39-results-head span{display:block;margin-top:2px;font-size:8px;color:#89918d}.report-v39-controls{display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:end;gap:8px;padding:12px}.report-v39-field{display:flex;flex-direction:column;gap:4px}.report-v39-field label,.report-v39-types-head>label{font-size:8px;font-weight:700;color:#65716a;text-transform:uppercase;letter-spacing:.03em}.report-v39-field input,.report-v39-field select{width:100%;height:32px;box-sizing:border-box;border:1px solid #d7ddd9;border-radius:7px;background:#fff;color:#3e4943;padding:0 8px;font-size:9px}.report-v39-types{padding:0 12px 12px}.report-v39-types-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.report-v39-types-head div{display:flex;gap:4px}.report-v39-types-head button{border:0;background:transparent;color:#687b70;font-size:8px;font-weight:700;cursor:pointer;padding:3px 5px}.report-v39-chips{display:flex;flex-wrap:wrap;gap:5px}.report-v39-chips label{cursor:pointer}.report-v39-chips input{position:absolute;opacity:0;pointer-events:none}.report-v39-chips span{display:inline-flex;align-items:center;height:27px;padding:0 9px;border:1px solid #d7e0e5;border-radius:999px;background:#ffffff;color:#65706a;font-size:8px;font-weight:600}.report-v39-chips input:checked+span{background:#e3eef4;border-color:#7fa5bb;color:#274b63}.report-v39-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:9px 0}.report-v39-stats>div{background:#fff;border:1px solid #e3e8eb;border-radius:8px;padding:9px 11px}.report-v39-stats span{display:block;font-size:17px;font-weight:750;color:#263945}.report-v39-stats small{display:block;margin-top:2px;font-size:7px;color:#87949e;text-transform:uppercase}.report-v39-export{align-items:center;gap:5px}.report-v39-export button{height:28px;padding:0 8px;border:1px solid #d6dee4;border-radius:6px;background:#fff;color:#52616d;font-size:8px;font-weight:700;cursor:pointer}.report-v39-table-wrap{margin:0!important;border:0!important;border-radius:0!important;overflow:auto}#reportResultsTable{width:100%;min-width:680px;margin:0;border-collapse:separate;border-spacing:0}#reportResultsTable th{background:#f5f7f9!important;color:#53636e!important;padding:8px 10px!important;border:0!important;border-bottom:1px solid #e4e9ec!important;font-size:8px!important;text-align:left}#reportResultsTable td{padding:8px 10px!important;border:0!important;border-bottom:1px solid #edf1f3!important;font-size:9px}.report-v39-empty{text-align:center!important;padding:34px!important;color:#89928d!important}.report-v39-empty i{display:block;font-size:20px;margin-bottom:7px;opacity:.55}
@media(max-width:768px){.report-v39-head{align-items:center}.report-v39-head h2{font-size:16px}.report-v39-head p{display:none}.report-digest-btn{height:30px;padding:0 8px;font-size:8px}.report-v39-controls{grid-template-columns:1fr 1fr}.report-v39-field:first-child{grid-column:1/-1}.report-generate-btn{height:32px}.report-v39-types{padding-top:2px}.report-v39-stats{grid-template-columns:1fr 1fr}.report-v39-results-head{padding:8px 10px}.report-v39-card,.report-v39-results{border-radius:8px}.report-v39-table-wrap{-webkit-overflow-scrolling:touch}}

/* ==========================================================================
   V40 — COMPLETED ACTIVITIES / LOGS-STYLE PRESENTATION
   ========================================================================== */
#completedActivities{padding-bottom:30px}.completed-v40-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}.completed-v40-head h2{margin:0;font-size:20px;color:#22323d}.completed-v40-head h2 i{font-size:14px;color:#687b70;margin-right:5px}.completed-v40-head p{margin:4px 0 0;font-size:10px;color:#73818b}.completed-v40-toolbar{display:flex;align-items:center;gap:6px;margin-bottom:7px}.completed-v40-search{position:relative;flex:1;max-width:340px}.completed-v40-search i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:8px;color:#89959e}.completed-v40-search input,.completed-v40-toolbar select{height:32px;border:1px solid #dce3e7;border-radius:7px;background:#fff;color:#3f4944;font-size:9px;box-sizing:border-box}.completed-v40-search input{width:100%;padding:0 8px 0 27px}.completed-v40-toolbar select{padding:0 8px;max-width:170px}.completed-v40-count{margin-left:auto;white-space:nowrap;font-size:8px;color:#7b8993}.completed-v40-period{display:flex;align-items:center;gap:5px;margin:0 0 9px!important;padding:0!important;background:transparent!important;border:0!important}.completed-v40-period>span{font-size:8px;font-weight:700;color:#77817b;margin-right:2px}.completed-v40-period .chip{height:25px!important;padding:0 8px!important;border:1px solid #d7e0e5!important;border-radius:999px!important;background:#ffffff!important;color:#52616d!important;font-size:8px!important;font-weight:600!important;box-shadow:none!important}.completed-v40-period .chip.active{background:#e3eef4!important;border-color:#7fa5bb!important;color:#274b63!important}.completed-v40-panel{background:#fff;border:1px solid #e3e8eb;border-radius:10px;overflow:hidden;box-shadow:0 2px 9px rgba(35,45,39,.035)}.completed-v40-table-wrap{margin:0!important;border:0!important;border-radius:0!important;overflow:auto}.completed-v40-panel #completedActivitiesTable{width:100%;min-width:860px;margin:0;border-collapse:separate;border-spacing:0}.completed-v40-panel #completedActivitiesTable th{padding:9px 10px!important;background:#f5f7f9!important;border:0!important;border-bottom:1px solid #e4e9ec!important;color:#53636e!important;font-size:8px!important;text-transform:uppercase;text-align:left}.completed-v40-panel #completedActivitiesTable td{padding:8px 10px!important;border:0!important;border-bottom:1px solid #edf1f3!important;color:#414a45;font-size:9px!important;vertical-align:middle}.completed-v40-panel #completedActivitiesTable tbody tr:hover{background:#fafbfc}.completed-v40-panel .category-badge{display:inline-flex!important;align-items:center;min-height:20px;padding:0 7px!important;border-radius:999px!important;background:#edf5f0!important;color:#53635a!important;border:0!important;font-size:7px!important;font-weight:700!important;white-space:nowrap}.completed-v40-panel .status-badge{display:inline-flex!important;align-items:center;min-height:20px;padding:0 7px!important;border-radius:999px!important;font-size:7px!important;font-weight:700!important;white-space:nowrap}.completed-v40-panel .status-badge.concluido{background:#e9f2ec!important;color:#4e6958!important}.completed-v40-panel .status-badge.cancelado{background:#f3ecea!important;color:#825c54!important}.completed-v40-panel .action-btn{width:27px!important;height:27px!important;display:inline-flex!important;align-items:center;justify-content:center;padding:0!important;border:1px solid #dce3e7!important;border-radius:6px!important;background:#fff!important;color:#59685f!important;box-shadow:none!important}.completed-v40-pagination{min-height:42px!important;margin:0!important;padding:6px 10px!important;border-top:1px solid #e8ebe9!important;background:#fff!important;border-radius:0!important;font-size:8px!important}
@media(max-width:768px){.completed-v40-head{align-items:center}.completed-v40-head h2{font-size:16px}.completed-v40-head p{display:none}.completed-v40-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 1fr;gap:5px}.completed-v40-search{max-width:none;grid-column:1/-1}.completed-v40-toolbar select{width:100%;max-width:none}.completed-v40-toolbar #completedTechFilter{grid-column:1/-1}.completed-v40-count{grid-column:1/-1;margin:1px 0 0}.completed-v40-period{overflow-x:auto;padding-bottom:2px!important;white-space:nowrap;-webkit-overflow-scrolling:touch}.completed-v40-period::-webkit-scrollbar{display:none}.completed-v40-panel{border-radius:8px}.completed-v40-table-wrap{-webkit-overflow-scrolling:touch}}

/* ==========================================================================
 V41 — collapsed sidebar tooltip, work orders, profile
 ========================================================================== */
.ops-side-tip{position:fixed;z-index:10050;pointer-events:none;opacity:0;padding:6px 9px;border-radius:6px;background:#303a34;color:#fff;font-size:9px;font-weight:650;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.16);transition:opacity .1s ease,transform .1s ease}.ops-side-tip.visible{opacity:1}.sidebar:not(.collapsed)~.ops-side-tip{display:none}
.profile-indicator{height:34px;max-width:190px;padding:3px 8px 3px 4px;border:1px solid #d7e0e5;border-radius:8px;background:#fff;color:#414c46;display:flex;align-items:center;gap:6px;cursor:pointer}.profile-avatar{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e8eeea;color:#52645a;font-size:9px;flex:0 0 auto}.profile-summary{display:flex;min-width:0;flex-direction:column;text-align:left;line-height:1.1}.profile-summary strong{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px}.profile-summary small{margin-top:2px;color:#849089;font-size:7px;text-transform:capitalize}.profile-popover{display:none;position:absolute;right:54px;top:48px;z-index:10020;width:230px;padding:8px;border:1px solid #dfe5e9;border-radius:9px;background:#fff;box-shadow:0 12px 32px rgba(31,42,36,.14)}.profile-popover.open{display:block}.profile-popover-user{display:flex;gap:8px;align-items:center;padding:5px 5px 9px;border-bottom:1px solid #edf1f3}.profile-avatar-large{width:34px;height:34px}.profile-popover-user div{display:flex;flex-direction:column;min-width:0}.profile-popover-user strong{font-size:9px;color:#39443e}.profile-popover-user span{font-size:7px;color:#77837c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-popover-user small{font-size:7px;color:#596b61;margin-top:2px;text-transform:capitalize}.profile-popover>button{width:100%;height:30px;margin-top:6px;border:0;border-radius:6px;background:#f6f7f6;color:#5b665f;font-size:8px;font-weight:700;text-align:left;padding:0 8px}.profile-popover>button i{margin-right:6px}
#myWorkOrders{padding-bottom:30px}.wo-v41-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}.wo-v41-head h2{margin:0;font-size:20px;color:#22323d}.wo-v41-head h2 i{font-size:14px;color:#687b70;margin-right:5px}.wo-v41-head p{margin:4px 0 0;font-size:10px;color:#73818b}.wo-v41-count{font-size:8px;color:#7b8993}.wo-v41-timer{margin:0 0 9px!important;min-height:58px!important;padding:9px 11px!important;border:1px solid #dfe5e9!important;border-radius:9px!important;background:#fff!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:9px!important}.wo-v41-timer-icon{width:32px;height:32px;border-radius:8px;background:#e8f0f5;color:#315f7d;display:flex;align-items:center;justify-content:center}.wo-v41-timer small{display:block;font-size:7px;text-transform:uppercase;color:#89959e;font-weight:700}.wo-v41-timer .time-tracker-display{font-size:15px!important;font-weight:750!important;color:#263945!important;margin:1px 0!important}.wo-v41-timer .time-tracker-status{font-size:8px!important;color:#7c8780!important}.wo-v41-panel{background:#fff;border:1px solid #e3e8eb;border-radius:10px;overflow:hidden;box-shadow:0 2px 9px rgba(35,45,39,.035)}.wo-v41-panel-head{padding:9px 11px;border-bottom:1px solid #e7ebe8}.wo-v41-panel-head strong{display:block;font-size:10px;color:#39443e}.wo-v41-panel-head span{display:block;margin-top:2px;font-size:8px;color:#89918d}.wo-v41-panel .work-orders-cards{padding:8px!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;gap:7px!important}.wo-v41-panel .work-order-card,.wo-v41-panel .work-order-card-modern{margin:0!important;border:1px solid #e1e7eb!important;border-radius:8px!important;box-shadow:none!important;background:#fff!important}.wo-v41-panel .work-order-card:hover,.wo-v41-panel .work-order-card-modern:hover{border-color:#bdc9c1!important;box-shadow:0 3px 10px rgba(42,54,47,.06)!important}
@media(max-width:768px){.profile-indicator{width:30px;height:30px;padding:2px;border-radius:50%;border:0;background:transparent}.profile-avatar{width:28px;height:28px}.profile-summary{display:none}.profile-popover{position:fixed;right:8px;top:52px;width:min(230px,calc(100vw - 16px))}.wo-v41-head{align-items:center}.wo-v41-head h2{font-size:16px}.wo-v41-head p{display:none}.wo-v41-panel{border-radius:8px}.wo-v41-panel .work-orders-cards{grid-template-columns:1fr!important;padding:6px!important}.ops-side-tip{display:none!important}}

/* ==========================================================================
   V41 CORRECTION — profile compactness + readable work-order cards
   ========================================================================== */
@media (min-width:769px){
  .profile-indicator{
    width:34px!important;max-width:34px!important;height:34px!important;padding:3px!important;
    border-radius:50%!important;justify-content:center!important;background:#fff!important;
  }
  .profile-indicator .profile-summary{display:none!important}
  .profile-indicator .profile-avatar{width:26px!important;height:26px!important}
  .profile-popover{right:54px!important}
}
/* V41 Work Orders: hard reset legacy card colours that were designed for the old dark theme */
#myWorkOrders .wo-v41-panel,
#myWorkOrders .work-orders-cards,
#myWorkOrders .work-order-card,
#myWorkOrders .work-order-card-header,
#myWorkOrders .work-order-card-body,
#myWorkOrders .work-order-card-row,
#myWorkOrders .work-order-card-actions{
  color:#263945!important;
}
#myWorkOrders .work-order-card{
  background:#fff!important;border:1px solid #dfe6ea!important;
  overflow:hidden!important;
}
#myWorkOrders .work-order-card-header{
  background:#f5f7f9!important;border-bottom:1px solid #e1e5e2!important;
  padding:9px 11px!important;
}
#myWorkOrders .work-order-card-ticket{
  color:#263945!important;font-size:10px!important;font-weight:750!important;
}
#myWorkOrders .work-order-card-body{background:#fff!important;padding:4px 11px!important}
#myWorkOrders .work-order-card-row{
  display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;
  gap:9px!important;align-items:start!important;padding:7px 0!important;
  border-bottom:1px solid #edf1f3!important;background:#fff!important;
}
#myWorkOrders .work-order-card-row:last-child{border-bottom:0!important}
#myWorkOrders .work-order-card-label{
  color:#73818b!important;font-size:8px!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:.02em!important;
}
#myWorkOrders .work-order-card-value{
  color:#36423b!important;font-size:9px!important;font-weight:550!important;
  opacity:1!important;text-align:left!important;overflow-wrap:anywhere!important;
}
#myWorkOrders .work-order-card-value.card-comment{color:#53636e!important}
#myWorkOrders .status-badge{
  color:#fff!important;opacity:1!important;font-size:7px!important;
  font-weight:750!important;border:0!important;
}
#myWorkOrders .status-badge.planeado{background:#617d72!important;color:#fff!important}
#myWorkOrders .status-badge.pendente{background:#967a4e!important;color:#fff!important}
#myWorkOrders .status-badge.em-curso{background:#526f7a!important;color:#fff!important}
#myWorkOrders .status-badge.concluido,
#myWorkOrders .status-badge.concluido-pendente{background:#607a65!important;color:#fff!important}
#myWorkOrders .work-order-card-actions{
  background:#fafbfc!important;border-top:1px solid #e5e9e6!important;
  padding:7px!important;gap:5px!important;
}
#myWorkOrders .work-order-card-actions button{
  min-height:31px!important;background:#fff!important;color:#46534c!important;
  border:1px solid #d8e0e5!important;border-radius:6px!important;
  box-shadow:none!important;font-size:8px!important;font-weight:700!important;
}
#myWorkOrders .work-order-card-actions button:hover{background:#f1f4f2!important}
#myWorkOrders .work-order-card-actions .active{background:#596f63!important;color:#fff!important}
@media(max-width:768px){
 #myWorkOrders .work-order-card-row{grid-template-columns:78px minmax(0,1fr)!important}
}

/* ==========================================================================
 V41 refinement — desktop identity + stronger Work Order visual hierarchy
 ========================================================================== */
@media(min-width:769px){
 .profile-indicator{
   width:auto!important;max-width:180px!important;height:30px!important;
   padding:0 9px 0 5px!important;border:0!important;border-radius:7px!important;
   background:rgba(255,255,255,.07)!important;color:#fff!important;gap:6px!important;
 }
 .profile-indicator:hover{background:rgba(255,255,255,.12)!important}
 .profile-indicator .profile-avatar{
   width:22px!important;height:22px!important;background:rgba(255,255,255,.12)!important;
   color:#e9efeb!important;font-size:8px!important;
 }
 .profile-indicator .profile-summary{display:flex!important}
 .profile-indicator .profile-summary strong{
   color:#f5f7f6!important;font-size:8px!important;font-weight:650!important;max-width:115px!important
 }
 .profile-indicator .profile-summary small{display:none!important}
 .profile-popover{right:54px!important}
}

/* Work Orders — make each job read as a distinct operational card */
#myWorkOrders .wo-v41-timer{
 min-height:50px!important;padding:8px 10px!important;background:#f8fafb!important;
 border-color:#dce3de!important
}
#myWorkOrders .wo-v41-timer .time-tracker-display{
 font-size:17px!important;letter-spacing:.02em!important;background:transparent!important;
 padding:0!important;box-shadow:none!important
}
#myWorkOrders .work-orders-cards{
 grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important;
 padding:10px!important;gap:10px!important;background:#ffffff!important
}
#myWorkOrders .work-order-card{
 border:1px solid #d6ddd8!important;border-radius:9px!important;background:#fff!important;
 box-shadow:0 2px 7px rgba(42,53,47,.045)!important
}
#myWorkOrders .work-order-card-header{
 min-height:38px!important;padding:8px 10px!important;background:#edf5f0!important;
 display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important
}
#myWorkOrders .work-order-card-ticket{
 font-size:10px!important;font-weight:750!important;color:#2f3d47!important;
 letter-spacing:0!important;line-height:1.25!important
}
#myWorkOrders .status-badge{
 min-height:21px!important;padding:0 8px!important;border-radius:999px!important;
 display:inline-flex!important;align-items:center!important;justify-content:center!important
}
#myWorkOrders .work-order-card-body{
 padding:5px 10px 7px!important;display:grid!important;grid-template-columns:1fr 1fr!important;
 column-gap:18px!important;background:#fff!important
}
#myWorkOrders .work-order-card-row{
 display:block!important;padding:7px 0!important;border-bottom:1px solid #edf1f3!important;
 min-width:0!important
}
#myWorkOrders .work-order-card-row:nth-last-child(-n/**/+2){border-bottom:0!important}
#myWorkOrders .work-order-card-label{
 display:block!important;margin-bottom:3px!important;color:#87949e!important;font-size:7px!important;
 line-height:1!important
}
#myWorkOrders .work-order-card-value{
 display:block!important;color:#303b35!important;font-size:9px!important;font-weight:600!important;
 line-height:1.35!important;text-align:left!important
}
#myWorkOrders .work-order-card-row:last-child{
 grid-column:1/-1!important;padding-top:8px!important;margin-top:1px!important;
 border-top:1px solid #edf1f3!important
}
#myWorkOrders .work-order-card-value.card-comment{
 font-weight:500!important;color:#56635c!important
}
#myWorkOrders .work-order-card-actions{
 display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;
 padding:8px 10px!important;background:#fafbfc!important
}
#myWorkOrders .work-order-card-actions button{
 width:100%!important;min-height:32px!important;margin:0!important;
 color:#3f4d45!important;background:#fff!important;border-color:#d4dcd7!important
}
#myWorkOrders .work-order-card-actions button i{margin-right:5px!important;color:#607269!important}
#myWorkOrders .work-order-card-actions button:hover{background:#e8f0f5!important;border-color:#b9c6be!important}
@media(max-width:768px){
 #myWorkOrders .work-orders-cards{grid-template-columns:1fr!important;padding:7px!important;gap:7px!important}
 #myWorkOrders .work-order-card-body{grid-template-columns:1fr!important;padding:4px 9px 6px!important}
 #myWorkOrders .work-order-card-row,#myWorkOrders .work-order-card-row:nth-last-child(-n/**/+2){
   border-bottom:1px solid #edf1f3!important;padding:7px 0!important
 }
 #myWorkOrders .work-order-card-row:last-child{grid-column:auto!important;border-bottom:0!important}
 #myWorkOrders .work-order-card-actions{grid-template-columns:repeat(3,1fr)!important;padding:7px!important}
}

/* V41 final timer readability correction */
#myWorkOrders .wo-v41-timer,
#myWorkOrders .wo-v41-timer *{text-shadow:none!important}
#myWorkOrders .wo-v41-timer .time-tracker-display,
#myWorkOrders #timerDisplay{
 color:#263945!important;
 background:transparent!important;
 -webkit-text-fill-color:#263945!important;
 opacity:1!important;
}
#myWorkOrders .wo-v41-timer .time-tracker-status,
#myWorkOrders #timerStatus{
 color:#687985!important;
 -webkit-text-fill-color:#687985!important;
 opacity:1!important;
}
#myWorkOrders .wo-v41-timer small{
 color:#687985!important;
 -webkit-text-fill-color:#687985!important;
 opacity:1!important;
}

/* ==========================================================================
   V42 — UNIFIED OPS PAGE SYSTEM
   Fleet / Travel / Standby / ONEWEB / Payments / IP / Users / Logs /
   Reporting / Completed / Work Orders
   ========================================================================== */
.ops-unified-page{--ops-ink:#2f3d47;--ops-muted:#77838d;--ops-accent:#315f7d;--ops-line:#dfe5e9;--ops-soft:#f5f7f9;--ops-panel:#fff;padding-bottom:30px!important;color:var(--ops-ink)}
/* Page headers */
.ops-unified-page :is(.fleet-page-head,.travel-page-head,.standby-page-head,.oneweb-page-head,.payments-page-head,.ipm-page-head,.userm-page-head,.logs-page-head,.report-v39-head,.completed-v40-head,.wo-v41-head){display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:12px!important;margin:0 0 12px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.ops-unified-page :is(.fleet-page-head,.travel-page-head,.standby-page-head,.oneweb-page-head,.payments-page-head,.ipm-page-head,.userm-page-head,.logs-page-head,.report-v39-head,.completed-v40-head,.wo-v41-head) h2{margin:0!important;color:var(--ops-ink)!important;font-size:20px!important;font-weight:750!important;line-height:1.15!important}
.ops-unified-page :is(.fleet-page-head,.travel-page-head,.standby-page-head,.oneweb-page-head,.payments-page-head,.ipm-page-head,.userm-page-head,.logs-page-head,.report-v39-head,.completed-v40-head,.wo-v41-head) p{margin:4px 0 0!important;color:var(--ops-muted)!important;font-size:10px!important;line-height:1.35!important}
/* Buttons */
.ops-unified-page :is(.fleet-head-actions,.travel-map-actions,.standby-page-actions,.ipm-head-actions,.userm-head-actions,.logs-head-actions){display:flex!important;align-items:center!important;gap:6px!important}
.ops-unified-page :is(.fleet-email-action,.fleet-add-toggle,.travel-map-action,.standby-secondary-btn,.standby-primary-btn,.oneweb-primary-btn,.oneweb-secondary-btn,.payments-primary-btn,.ipm-primary-btn,.ipm-secondary-btn,.userm-primary-btn,.userm-secondary-btn,.logs-primary-btn,.logs-secondary-btn,.report-digest-btn,.report-generate-btn){min-height:32px!important;height:32px!important;padding:0 10px!important;border-radius:7px!important;font-size:8px!important;font-weight:700!important;box-shadow:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;white-space:nowrap!important}
.ops-unified-page :is(.fleet-add-toggle,.standby-primary-btn,.oneweb-primary-btn,.payments-primary-btn,.ipm-primary-btn,.userm-primary-btn,.logs-primary-btn,.report-digest-btn,.report-generate-btn){background:var(--ops-accent)!important;border:1px solid var(--ops-accent)!important;color:#fff!important}
.ops-unified-page :is(.fleet-email-action,.travel-map-action,.standby-secondary-btn,.oneweb-secondary-btn,.ipm-secondary-btn,.userm-secondary-btn,.logs-secondary-btn){background:#fff!important;border:1px solid #d6dee4!important;color:#52616d!important}
/* Main surfaces */
.ops-unified-page :is(.fleet-primary-surface,.travel-map-card,.standby-panel,.oneweb-panel,.report-v39-card,.report-v39-results,.completed-v40-panel,.wo-v41-panel){background:var(--ops-panel)!important;border:1px solid var(--ops-line)!important;border-radius:10px!important;box-shadow:0 2px 9px rgba(35,45,39,.035)!important;overflow:hidden!important}
/* Toolbars */
.ops-unified-page :is(.payments-toolbar,.ipm-toolbar,.userm-toolbar,.logs-toolbar,.completed-v40-toolbar){gap:6px!important;margin-bottom:9px!important}
.ops-unified-page :is(.ipm-search-wrap,.userm-search,.logs-search,.completed-v40-search) input,
.ops-unified-page :is(.payments-toolbar,.ipm-toolbar,.userm-toolbar,.logs-toolbar,.completed-v40-toolbar) select{height:32px!important;border:1px solid #dce3e7!important;border-radius:7px!important;background:#fff!important;color:#3f4944!important;font-size:9px!important;box-sizing:border-box!important}
/* All operational tables use one density / header treatment */
.ops-unified-page .table-responsive{border:0!important;border-radius:0!important;box-shadow:none!important}
.ops-unified-page table:not(#standbyCalendar table){border-collapse:separate!important;border-spacing:0!important;background:#fff!important}
.ops-unified-page table:not(#standbyCalendar table) th{padding:9px 10px!important;background:var(--ops-soft)!important;color:#53636e!important;border:0!important;border-bottom:1px solid var(--ops-line)!important;font-size:8px!important;font-weight:750!important;text-transform:uppercase!important;text-align:left!important;white-space:nowrap!important}
.ops-unified-page table:not(#standbyCalendar table) td{padding:8px 10px!important;background:#fff!important;color:#414a45!important;border:0!important;border-bottom:1px solid #edf1f3!important;font-size:9px!important;vertical-align:middle!important}
.ops-unified-page table:not(#standbyCalendar table) tbody tr:hover td{background:#fafbfc!important}
/* Standby + ONEWEB were the remaining visual outliers */
#standby .standby-table-wrap,#owstock .oneweb-table-wrap{margin:0!important;overflow:auto!important}
#standby #standbyTable,#owstock #onewebTasksTable{width:100%!important;margin:0!important}
#standby #standbyTable{min-width:620px!important}
#owstock #onewebTasksTable{min-width:980px!important}
#standby #standbyTable :is(input,select),#owstock #onewebTasksTable :is(input,select){height:29px!important;border:1px solid #dce3e7!important;border-radius:6px!important;background:#fff!important;color:#3f4944!important;font-size:8px!important;padding:0 7px!important}
/* Cards/grids share same surface language */
#payments :is(.payment-supplier-card,.payment-summary-card),#ipManager .ipm-subnet-card,#userman .userm-card,#myWorkOrders .work-order-card{background:#fff!important;border:1px solid #dfe6ea!important;border-radius:9px!important;box-shadow:0 2px 7px rgba(42,53,47,.045)!important;color:var(--ops-ink)!important}
/* Modals: same viewport behaviour and visual shell */
:is(.fleet-modal,.travel-modal,.oneweb-modal,.payment-modal,.ipm-modal,.userm-modal){box-sizing:border-box!important}
:is(.fleet-modal-dialog,.travel-modal-dialog,.oneweb-modal-dialog,.payment-modal-dialog,.ipm-modal-dialog,.userm-modal-dialog){border-radius:10px!important;border:1px solid #dfe6ea!important;background:#fff!important;box-shadow:0 18px 48px rgba(28,39,33,.18)!important}
:is(.fleet-modal-head,.travel-modal-head,.oneweb-modal-head,.payment-modal-head,.ipm-modal-head){background:#f5f7f9!important;border-bottom:1px solid #dfe5e9!important;color:#35413a!important}
/* Desktop content width/spacing consistency */
@media(min-width:769px){
 .ops-unified-page{padding:22px 16px 30px!important}
}
/* Unified mobile behaviour */
@media(max-width:768px){
 .ops-unified-page{padding:12px 8px 82px!important}
 .ops-unified-page :is(.fleet-page-head,.travel-page-head,.standby-page-head,.oneweb-page-head,.payments-page-head,.ipm-page-head,.userm-page-head,.logs-page-head,.report-v39-head,.completed-v40-head,.wo-v41-head){align-items:center!important;gap:8px!important;margin-bottom:9px!important}
 .ops-unified-page :is(.fleet-page-head,.travel-page-head,.standby-page-head,.oneweb-page-head,.payments-page-head,.ipm-page-head,.userm-page-head,.logs-page-head,.report-v39-head,.completed-v40-head,.wo-v41-head) h2{font-size:16px!important}
 .ops-unified-page :is(.fleet-page-head,.travel-page-head,.standby-page-head,.oneweb-page-head,.payments-page-head,.ipm-page-head,.userm-page-head,.logs-page-head,.report-v39-head,.completed-v40-head,.wo-v41-head) p{display:none!important}
 .ops-unified-page :is(.fleet-head-actions,.travel-map-actions,.standby-page-actions,.ipm-head-actions,.userm-head-actions,.logs-head-actions){flex-wrap:nowrap!important;gap:4px!important}
 .ops-unified-page :is(.fleet-email-action,.fleet-add-toggle,.travel-map-action,.standby-secondary-btn,.standby-primary-btn,.oneweb-primary-btn,.oneweb-secondary-btn,.payments-primary-btn,.ipm-primary-btn,.ipm-secondary-btn,.userm-primary-btn,.userm-secondary-btn,.logs-primary-btn,.logs-secondary-btn,.report-digest-btn,.report-generate-btn){height:30px!important;min-height:30px!important;padding:0 8px!important;font-size:8px!important}
 .ops-unified-page :is(.fleet-primary-surface,.travel-map-card,.standby-panel,.oneweb-panel,.report-v39-card,.report-v39-results,.completed-v40-panel,.wo-v41-panel){border-radius:8px!important}
 .ops-unified-page .table-responsive{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
 #standby .standby-panel,#owstock .oneweb-panel{width:100%!important;max-width:100%!important;overflow:hidden!important}
 #standby .standby-table-wrap,#owstock .oneweb-table-wrap{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important}
 #standby #standbyTable,#owstock #onewebTasksTable{table-layout:auto!important}
 #standby #standbyTable th,#standby #standbyTable td,#owstock #onewebTasksTable th,#owstock #onewebTasksTable td{white-space:nowrap!important}
 /* Don't let page actions stack vertically on mobile */
 #standby .standby-page-actions,#travelLog .travel-map-actions{flex-direction:row!important}
 #travelLog .travel-map-toolbar-head{align-items:center!important}
 /* compact filter toolbars */
 #logs .logs-toolbar,#completedActivities .completed-v40-toolbar,#userman .userm-toolbar,#ipManager .ipm-toolbar{width:100%!important}
 /* modal containment */
 :is(.fleet-modal-dialog,.travel-modal-dialog,.oneweb-modal-dialog,.payment-modal-dialog,.ipm-modal-dialog,.userm-modal-dialog){width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 24px)!important;margin:12px auto!important;overflow:auto!important}
}

/* ==========================================================================
   V43 — STANDARDIZED PAGE HEADERS + TRUE MOBILE STANDBY LAYOUT
   ========================================================================== */

/* Every unified page title now uses the same icon treatment. */
.ops-unified-page .ops-page-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:18px!important;
  margin-right:5px!important;
  color:#657a6e!important;
  font-size:13px!important;
  vertical-align:-1px!important;
}
.ops-unified-page :is(
 .fleet-page-head,.travel-page-head,.standby-page-head,.oneweb-page-head,
 .payments-page-head,.ipm-page-head,.userm-page-head,.logs-page-head,
 .report-v39-head,.completed-v40-head,.wo-v41-head
) h2{
  display:flex!important;
  align-items:center!important;
}

/* Standby desktop remains a normal compact table. */
#standby .standby-panel{
  width:100%!important;
}
#standby .standby-table-wrap{
  width:100%!important;
  overflow:visible!important;
}
#standby #standbyTable{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}
#standby #standbyTable th:nth-child(1),
#standby #standbyTable td:nth-child(1){width:48%!important}
#standby #standbyTable th:nth-child(2),
#standby #standbyTable td:nth-child(2){width:18%!important}
#standby #standbyTable th:nth-child(3),
#standby #standbyTable td:nth-child(3){width:34%!important}
#standby #standbyTable td:first-child{
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
#standby #standbyTable td[contenteditable="true"]{
  min-width:0!important;
  text-align:center!important;
}
#standby #standbyTable select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}

/* Mobile Standby is no longer a squeezed desktop table.
   Each technician becomes a compact card, matching the rest of the mobile UI. */
@media(max-width:768px){
  #standby .standby-page-head{
    flex-direction:row!important;
    align-items:center!important;
  }
  #standby .standby-page-actions{
    width:auto!important;
    display:flex!important;
    grid-template-columns:none!important;
    flex-direction:row!important;
    gap:4px!important;
  }
  #standby .standby-page-actions button{
    width:auto!important;
    min-width:0!important;
  }
  #standby .standby-panel{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  #standby .standby-table-wrap{
    overflow:visible!important;
    width:100%!important;
  }
  #standby #standbyTable{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    background:transparent!important;
  }
  #standby #standbyTable thead{
    display:none!important;
  }
  #standby #standbyTable tbody{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    width:100%!important;
  }
  #standby #standbyTable tbody tr{
    display:grid!important;
    grid-template-columns:1fr 92px!important;
    column-gap:10px!important;
    row-gap:0!important;
    width:100%!important;
    padding:9px 10px!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border:1px solid #dfe6ea!important;
    border-radius:8px!important;
    box-shadow:0 2px 7px rgba(42,53,47,.04)!important;
  }
  #standby #standbyTable tbody td{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    white-space:normal!important;
  }
  #standby #standbyTable tbody td::before{
    content:attr(data-label)!important;
    display:block!important;
    margin-bottom:4px!important;
    color:#87949e!important;
    font-size:7px!important;
    font-weight:750!important;
    text-transform:uppercase!important;
    letter-spacing:.025em!important;
  }
  #standby #standbyTable tbody td:nth-child(1){
    grid-column:1!important;
    grid-row:1!important;
    color:#263945!important;
    font-size:9px!important;
    font-weight:650!important;
    line-height:1.3!important;
  }
  #standby #standbyTable tbody td:nth-child(2){
    grid-column:2!important;
    grid-row:1!important;
  }
  #standby #standbyTable tbody td:nth-child(3){
    grid-column:1/-1!important;
    grid-row:2!important;
    margin-top:8px!important;
    padding-top:8px!important;
    border-top:1px solid #edf1f3!important;
  }
  #standby #standbyTable tbody td[contenteditable="true"]{
    height:30px!important;
    line-height:30px!important;
    padding:0 8px!important;
    text-align:center!important;
    border:1px solid #d5dcd7!important;
    border-radius:6px!important;
    background:#f8faf8!important;
    color:#405048!important;
    font-size:9px!important;
    font-weight:700!important;
    box-sizing:border-box!important;
  }
  #standby #standbyTable tbody select{
    width:100%!important;
    height:30px!important;
    min-width:0!important;
    padding:0 28px 0 8px!important;
    border:1px solid #d5dcd7!important;
    border-radius:6px!important;
    background:#fff!important;
    color:#405048!important;
    font-size:9px!important;
    box-sizing:border-box!important;
  }

  .ops-unified-page .ops-page-icon{
    width:16px!important;
    font-size:11px!important;
    margin-right:4px!important;
  }
}

/* Very narrow phones: keep actions alongside title where possible,
   but reduce labels instead of stacking the whole page header. */
@media(max-width:390px){
  #standby .standby-page-head{
    flex-direction:row!important;
    align-items:center!important;
  }
  #standby .standby-page-actions{
    width:auto!important;
    display:flex!important;
  }
  #standby .standby-page-actions button span{
    display:none!important;
  }
  #standby .standby-page-actions button{
    width:30px!important;
    padding:0!important;
  }
}

/* ==========================================================================
   V44 — FINAL HEADER ICON + STANDBY MOBILE CORRECTION
   ========================================================================== */

/* Translation is now on the nested span, so these icons cannot be removed by applyTranslations(). */
.ops-unified-page h2 .ops-page-icon{
  display:inline-flex!important;
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 5px 0 0!important;
  color:#657a6e!important;
  font-size:13px!important;
  line-height:1!important;
}
.ops-unified-page h2>span{
  display:inline!important;
  min-width:0!important;
}

/* Rebuild Standby mobile as simple readable cards.
   Important: contenteditable TD must NOT have a fixed 30px height because its ::before
   label occupies the same box and caused "NUMBER..." to render vertically in V43. */
@media(max-width:768px){
  #standby .standby-panel,
  #standby .standby-table-wrap{
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  #standby #standbyTable{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    table-layout:auto!important;
    background:transparent!important;
  }
  #standby #standbyTable thead{display:none!important}
  #standby #standbyTable tbody{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    width:100%!important;
  }
  #standby #standbyTable tbody tr{
    display:grid!important;
    grid-template-columns:110px minmax(0,1fr)!important;
    grid-template-areas:
      "tech tech"
      "weeks comments"!important;
    gap:9px 10px!important;
    width:100%!important;
    padding:10px!important;
    margin:0!important;
    box-sizing:border-box!important;
    border:1px solid #dfe6ea!important;
    border-radius:8px!important;
    background:#fff!important;
    box-shadow:0 2px 7px rgba(42,53,47,.04)!important;
  }
  #standby #standbyTable tbody td{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    color:#263945!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  #standby #standbyTable tbody td:nth-child(1){grid-area:tech!important}
  #standby #standbyTable tbody td:nth-child(2){grid-area:weeks!important}
  #standby #standbyTable tbody td:nth-child(3){grid-area:comments!important}

  #standby #standbyTable tbody td::before{
    content:attr(data-label)!important;
    display:block!important;
    width:auto!important;
    margin:0 0 5px!important;
    color:#87949e!important;
    font-size:7px!important;
    line-height:1.1!important;
    font-weight:750!important;
    text-transform:uppercase!important;
    letter-spacing:.025em!important;
    white-space:normal!important;
  }
  #standby #standbyTable tbody td:nth-child(1){
    padding-bottom:8px!important;
    border-bottom:1px solid #edf1f3!important;
    font-size:9px!important;
    line-height:1.35!important;
    font-weight:650!important;
  }

  /* Contenteditable is the field itself. No fixed height / line-height. */
  #standby #standbyTable tbody td[contenteditable="true"]{
    min-height:49px!important;
    height:auto!important;
    line-height:1.3!important;
    padding:7px 8px!important;
    box-sizing:border-box!important;
    text-align:left!important;
    border:1px solid #d5dcd7!important;
    border-radius:6px!important;
    background:#f8faf8!important;
    color:#405048!important;
    font-size:9px!important;
    font-weight:700!important;
    overflow:visible!important;
  }
  #standby #standbyTable tbody td[contenteditable="true"]::before{
    margin-bottom:7px!important;
  }

  #standby #standbyTable tbody td:nth-child(3)::before{
    margin-bottom:5px!important;
  }
  #standby #standbyTable tbody select{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:32px!important;
    margin:0!important;
    padding:0 28px 0 8px!important;
    box-sizing:border-box!important;
    border:1px solid #d5dcd7!important;
    border-radius:6px!important;
    background:#fff!important;
    color:#405048!important;
    font-size:9px!important;
  }

  #standby .standby-page-head{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  #standby .standby-page-actions{
    display:flex!important;
    flex-direction:row!important;
    width:auto!important;
    gap:4px!important;
  }
}

/* Small phones: keep the data layout intact, only compact header action text. */
@media(max-width:390px){
  #standby #standbyTable tbody tr{
    grid-template-columns:96px minmax(0,1fr)!important;
  }
  #standby .standby-page-actions button span{display:none!important}
  #standby .standby-page-actions button{
    width:30px!important;
    min-width:30px!important;
    padding:0!important;
  }
}

/* ==========================================================================
   V45 — STANDBY MOBILE: DEDICATED CARD UI
   ========================================================================== */
.standby-mobile-cards{display:none}

@media(max-width:768px){
  /* Desktop table is retained as data source only. */
  #standby .standby-panel{
    display:none!important;
  }
  #standby .standby-mobile-cards{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  #standby .standby-mobile-card{
    width:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:11px!important;
    background:#fff!important;
    border:1px solid #dfe6ea!important;
    border-radius:9px!important;
    box-shadow:0 2px 7px rgba(42,53,47,.045)!important;
    color:#263945!important;
  }
  #standby .standby-mobile-tech{
    padding:0 0 9px!important;
    margin:0 0 9px!important;
    border-bottom:1px solid #edf1f3!important;
  }
  #standby .standby-mobile-tech span,
  #standby .standby-mobile-field>span{
    display:block!important;
    margin:0 0 5px!important;
    color:#87949e!important;
    font-size:7px!important;
    line-height:1.1!important;
    font-weight:750!important;
    text-transform:uppercase!important;
    letter-spacing:.025em!important;
    white-space:normal!important;
  }
  #standby .standby-mobile-tech strong{
    display:block!important;
    color:#263945!important;
    font-size:10px!important;
    line-height:1.35!important;
    font-weight:700!important;
    overflow-wrap:anywhere!important;
  }
  #standby .standby-mobile-fields{
    display:grid!important;
    grid-template-columns:110px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:end!important;
  }
  #standby .standby-mobile-field{
    display:block!important;
    min-width:0!important;
    margin:0!important;
  }
  #standby .standby-mobile-field input,
  #standby .standby-mobile-field select{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:34px!important;
    box-sizing:border-box!important;
    margin:0!important;
    border:1px solid #d5dcd7!important;
    border-radius:7px!important;
    background:#fff!important;
    color:#405048!important;
    font-size:10px!important;
    line-height:34px!important;
    box-shadow:none!important;
  }
  #standby .standby-mobile-field input{
    padding:0 9px!important;
    text-align:center!important;
    font-weight:700!important;
  }
  #standby .standby-mobile-field select{
    padding:0 30px 0 9px!important;
  }
  #standby .standby-page-head{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:7px!important;
  }
  #standby .standby-page-actions{
    display:flex!important;
    flex-direction:row!important;
    flex:0 0 auto!important;
    width:auto!important;
    gap:4px!important;
  }
}
@media(max-width:390px){
  #standby .standby-mobile-fields{
    grid-template-columns:96px minmax(0,1fr)!important;
  }
  #standby .standby-page-actions button span{display:none!important}
  #standby .standby-page-actions button{
    width:30px!important;
    min-width:30px!important;
    padding:0!important;
  }
}

/* ==========================================================================
   V46 — STANDBY MOBILE PAGE GUTTERS
   Match the left/right breathing room used by the other unified tabs.
   ========================================================================== */
@media(max-width:768px){
  #standby.ops-unified-page{
    box-sizing:border-box!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  #standby .standby-page-head,
  #standby .standby-mobile-cards{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}
@media(max-width:390px){
  #standby.ops-unified-page{
    padding-left:8px!important;
    padding-right:8px!important;
  }
}

/* ==========================================================================
   V47 — UNIFIED ACTIVITIES
   ========================================================================== */
.legacy-activity-page{display:none!important}
#activitiesHub{padding-bottom:30px!important}
.activities-v47-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 12px}.activities-v47-head h2{display:flex;align-items:center;margin:0;color:#2f3d47;font-size:20px}.activities-v47-head p{margin:4px 0 0;color:#73818b;font-size:10px}.activities-v47-primary{height:32px;padding:0 10px;border:1px solid #315f7d;border-radius:7px;background:#315f7d;color:#fff;font-size:8px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.activities-v47-toolbar{display:flex;align-items:center;gap:6px;margin-bottom:9px}.activities-v47-search{position:relative;flex:1;max-width:360px}.activities-v47-search i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:8px;color:#89959e}.activities-v47-search input,.activities-v47-toolbar select{height:32px;border:1px solid #dce3e7;border-radius:7px;background:#fff;color:#3f4944;font-size:9px;box-sizing:border-box}.activities-v47-search input{width:100%;padding:0 8px 0 27px}.activities-v47-toolbar select{padding:0 8px;max-width:180px}.activities-v47-toolbar>span{margin-left:auto;font-size:8px;color:#7b8993}
.activities-v47-panel{background:#fff;border:1px solid #dfe5e9;border-radius:10px;overflow:hidden;box-shadow:0 2px 9px rgba(35,45,39,.035)}.activities-v47-table-wrap{margin:0!important;border:0!important;overflow:auto}.activities-v47-table-wrap table{width:100%;min-width:760px;margin:0;border-collapse:separate;border-spacing:0}.activities-v47-table-wrap th{padding:9px 10px;background:#f5f7f9;border:0;border-bottom:1px solid #dfe5e9;color:#53636e;font-size:8px;text-transform:uppercase;text-align:left}.activities-v47-table-wrap td{padding:8px 10px;border:0;border-bottom:1px solid #edf1f3;color:#414a45;font-size:9px}.activities-v47-table-wrap tbody tr{cursor:pointer}.activities-v47-table-wrap tbody tr:hover td{background:#fafbfc}.activities-v47-type{display:inline-flex;padding:3px 6px;border-radius:999px;background:#edf5f0;color:#53635a;font-size:7px;font-weight:700}.activities-v47-state{text-align:center!important;padding:28px!important;color:#7d8781!important}.activities-v47-cards{display:none}.activities-v47-modal-dialog textarea{width:100%;box-sizing:border-box;border:1px solid #d3dce2;border-radius:7px;padding:8px 10px;color:#35434d;font-size:10px;resize:vertical}
@media(max-width:768px){#activitiesHub{padding:12px 8px 82px!important}.activities-v47-head{align-items:center;margin-bottom:9px}.activities-v47-head h2{font-size:16px}.activities-v47-head p{display:none}.activities-v47-primary{height:30px}.activities-v47-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:5px}.activities-v47-search{grid-column:1/-1;max-width:none}.activities-v47-toolbar select{width:100%;max-width:none}.activities-v47-toolbar>span{grid-column:1/-1;margin:0}.activities-v47-table-wrap{display:none!important}.activities-v47-panel{border:0;box-shadow:none;background:transparent;overflow:visible}.activities-v47-cards{display:flex;flex-direction:column;gap:7px}.activities-v47-card{width:100%;padding:10px;border:1px solid #dfe6ea;border-radius:9px;background:#fff;color:#263945;text-align:left;box-shadow:0 2px 7px rgba(42,53,47,.045)}.activities-v47-card>div{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px}.activities-v47-card>strong{display:block;font-size:10px;margin-bottom:3px}.activities-v47-card>span{display:block;font-size:9px;color:#4d5d68;margin-bottom:5px}.activities-v47-card>small{display:block;font-size:7px;color:#7d8781}.activities-v47-modal-dialog{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important}}

/* ==========================================================================
   V48 — ACTIVITIES MOBILE REFINEMENT
   Compact, readable card hierarchy matching the rest of the mobile app.
   ========================================================================== */
@media (max-width:768px){
  #activitiesHub{
    padding:14px 10px 86px!important;
    overflow-x:hidden!important;
  }
  #activitiesHub .activities-v47-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin:0 0 12px!important;
  }
  #activitiesHub .activities-v47-head>div{min-width:0!important}
  #activitiesHub .activities-v47-head h2{
    margin:0!important;
    font-size:16px!important;
    line-height:1.2!important;
    gap:7px!important;
    white-space:nowrap!important;
  }
  #activitiesHub .activities-v47-head .ops-page-icon{font-size:13px!important}
  #activitiesHub .activities-v47-primary{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    height:34px!important;
    padding:0 11px!important;
    border-radius:7px!important;
    font-size:9px!important;
    white-space:nowrap!important;
  }

  #activitiesHub .activities-v47-toolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:6px!important;
    margin:0 0 10px!important;
  }
  #activitiesHub .activities-v47-search{
    grid-column:1/-1!important;
    width:100%!important;
    max-width:none!important;
  }
  #activitiesHub .activities-v47-search input{
    width:100%!important;
    height:36px!important;
    padding:0 10px 0 30px!important;
    font-size:10px!important;
    border-radius:7px!important;
  }
  #activitiesHub .activities-v47-toolbar select{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:32px!important;
    padding:0 7px!important;
    font-size:9px!important;
    border-radius:7px!important;
  }
  #activitiesHub #unifiedActivityAssigneeFilter{grid-column:1/2!important}
  #activitiesHub #unifiedActivityCount{
    grid-column:2/3!important;
    align-self:center!important;
    justify-self:end!important;
    margin:0!important;
    padding-right:2px!important;
    font-size:8px!important;
    color:#73818b!important;
  }

  #activitiesHub .activities-v47-panel{
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  #activitiesHub .activities-v47-cards{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    width:100%!important;
  }
  #activitiesHub .activities-v47-card{
    display:block!important;
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:10px 11px!important;
    border:1px solid #dfe6ea!important;
    border-radius:9px!important;
    background:#fff!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    text-align:left!important;
  }
  #activitiesHub .activities-v47-card>div{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    margin:0 0 7px!important;
    min-width:0!important;
  }
  #activitiesHub .activities-v47-card .activities-v47-type{
    flex:0 1 auto!important;
    max-width:48%!important;
    padding:3px 6px!important;
    font-size:7px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #activitiesHub .activities-v47-card .status-badge{
    flex:0 0 auto!important;
    max-width:48%!important;
    margin:0!important;
    padding:4px 7px!important;
    font-size:7px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  #activitiesHub .activities-v47-card>strong{
    display:block!important;
    width:100%!important;
    margin:0 0 4px!important;
    color:#303a35!important;
    font-size:10px!important;
    line-height:1.3!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  #activitiesHub .activities-v47-card>span{
    display:block!important;
    width:100%!important;
    margin:0 0 5px!important;
    color:#4d5952!important;
    font-size:9px!important;
    line-height:1.35!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  #activitiesHub .activities-v47-card>small{
    display:block!important;
    width:100%!important;
    margin:0!important;
    color:#73818b!important;
    font-size:8px!important;
    line-height:1.35!important;
    overflow-wrap:anywhere!important;
  }


}

/* ==========================================================================
   V49 — ACTIVITIES MODAL MOBILE SCROLL + FIXED ACTIONS
   ========================================================================== */


@media(max-width:768px){


}

@media(max-width:390px){


}

/* ==========================================================================
   V50 — ACTIVITIES PRIMARY ACTION STANDARDIZATION
   Match Add Activity exactly to the shared primary buttons used elsewhere.
   ========================================================================== */
#activitiesHub .activities-v47-primary{
  min-height:32px!important;
  height:32px!important;
  padding:0 10px!important;
  border:1px solid var(--ops-accent)!important;
  border-radius:7px!important;
  background:var(--ops-accent)!important;
  color:#fff!important;
  font-size:8px!important;
  font-weight:700!important;
  line-height:1!important;
  box-shadow:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  white-space:nowrap!important;
}
#activitiesHub .activities-v47-primary i{
  font-size:8px!important;
  line-height:1!important;
}
@media(max-width:768px){
  #activitiesHub .activities-v47-primary{
    min-height:30px!important;
    height:30px!important;
    padding:0 8px!important;
    font-size:8px!important;
    border-radius:7px!important;
  }
  #activitiesHub .activities-v47-primary i{
    font-size:8px!important;
  }
}

/* ==========================================================================
   V51 — ONEWEB MODAL BEHAVIOUR STANDARDIZATION
   Fixed shell: header/footer stay in place; only modal body scrolls.
   ========================================================================== */
#onewebTaskModal,
#onewebEditModal{
  overflow:hidden!important;
}

#onewebTaskModal .oneweb-modal-dialog,
#onewebEditModal .oneweb-modal-dialog{
  display:flex!important;
  flex-direction:column!important;
  width:min(660px,100%)!important;
  max-height:calc(100dvh - 40px)!important;
  overflow:hidden!important;
}

#onewebTaskModal .oneweb-modal-head,
#onewebEditModal .oneweb-modal-head{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:3!important;
}

#onewebTaskModal .oneweb-modal-body,
#onewebEditModal .oneweb-modal-body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
}

#onewebTaskModal .oneweb-modal-actions,
#onewebEditModal .oneweb-modal-actions{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:4!important;
  background:#fafbfc!important;
  border-top:1px solid #e2e7e3!important;
}

/* Prevent controls/textareas from escaping the modal column. */
#onewebTaskModal .oneweb-form-grid,
#onewebEditModal .oneweb-form-grid{
  min-width:0!important;
}
#onewebTaskModal .form-row,
#onewebEditModal .form-row{
  min-width:0!important;
}
#onewebTaskModal input,
#onewebTaskModal select,
#onewebTaskModal textarea,
#onewebEditModal input,
#onewebEditModal select,
#onewebEditModal textarea{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#onewebTaskModal textarea,
#onewebEditModal textarea{
  resize:vertical!important;
  min-height:72px!important;
  max-height:180px!important;
}

/* Edit footer follows the same Delete | flexible spacer | Cancel | Save structure. */
#onewebEditModal .oneweb-modal-actions{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}
#onewebEditModal .oneweb-modal-action-spacer{
  flex:1 1 auto!important;
  min-width:8px!important;
}

@media(max-width:768px){
  #onewebTaskModal,
  #onewebEditModal{
    display:none;
    position:fixed!important;
    inset:0!important;
    z-index:65000!important;
    padding:10px!important;
    box-sizing:border-box!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(35,42,38,.45)!important;
    overflow:hidden!important;
  }
  #onewebTaskModal.open,
  #onewebEditModal.open{
    display:flex!important;
  }

  #onewebTaskModal .oneweb-modal-dialog,
  #onewebEditModal .oneweb-modal-dialog{
    width:100%!important;
    max-width:100%!important;
    height:min(720px,calc(100dvh - 20px))!important;
    max-height:calc(100dvh - 20px)!important;
    margin:0!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }

  #onewebTaskModal .oneweb-modal-head,
  #onewebEditModal .oneweb-modal-head{
    padding:12px 13px!important;
  }

  #onewebTaskModal .oneweb-modal-body,
  #onewebEditModal .oneweb-modal-body{
    padding:12px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  #onewebTaskModal .oneweb-form-grid,
  #onewebEditModal .oneweb-form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  #onewebTaskModal .oneweb-form-wide,
  #onewebEditModal .oneweb-form-wide{
    grid-column:auto!important;
  }

  #onewebTaskModal .oneweb-modal-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    padding:9px 10px!important;
  }

  #onewebEditModal .oneweb-modal-actions{
    display:grid!important;
    grid-template-columns:auto 1fr auto auto!important;
    align-items:center!important;
    gap:6px!important;
    padding:9px 10px!important;
  }
  #onewebEditModal .oneweb-danger-btn{
    grid-column:1!important;
    justify-self:start!important;
    min-width:0!important;
    padding:0 9px!important;
  }
  #onewebEditModal .oneweb-modal-action-spacer{
    display:block!important;
    grid-column:2!important;
  }
  #onewebEditModal .oneweb-secondary-btn{
    grid-column:3!important;
    min-width:0!important;
    padding:0 9px!important;
  }
  #onewebEditModal .oneweb-primary-btn{
    grid-column:4!important;
    min-width:0!important;
    padding:0 10px!important;
  }
}

@media(max-width:390px){
  #onewebTaskModal,
  #onewebEditModal{
    padding:6px!important;
  }
  #onewebTaskModal .oneweb-modal-dialog,
  #onewebEditModal .oneweb-modal-dialog{
    height:calc(100dvh - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
  }
  #onewebTaskModal .oneweb-modal-actions,
  #onewebEditModal .oneweb-modal-actions{
    gap:4px!important;
    padding:8px!important;
  }
  #onewebEditModal .oneweb-danger-btn,
  #onewebEditModal .oneweb-secondary-btn,
  #onewebEditModal .oneweb-primary-btn,
  #onewebTaskModal .oneweb-secondary-btn,
  #onewebTaskModal .oneweb-primary-btn{
    font-size:8px!important;
  }
}

/* ==========================================================================
   V54 — DAILY OPERATIONS DASHBOARD
   ========================================================================== */
.ops-v54-dashboard{padding-bottom:28px!important}.v54-dash-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.v54-dash-head h2{display:flex;align-items:center;gap:7px;margin:0;color:#263945;font-size:18px}.v54-dash-head p{margin:3px 0 0;color:#87949e;font-size:9px}.v54-date-nav{display:flex;align-items:center;gap:4px}.v54-date-nav button,.v54-date-nav input{height:30px;border:1px solid #dfe5e9;background:#fff;color:#4d5952;border-radius:7px;font:inherit;font-size:8px}.v54-date-nav button{padding:0 9px;cursor:pointer}.v54-date-nav input{padding:0 7px}.v54-date-nav button:hover{background:#f5f7f9}
.v54-dash-panel{background:#fff;border:1px solid #dfe5e9;border-radius:9px;margin-bottom:8px;overflow:hidden}.v54-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-bottom:1px solid #e9edea}.v54-panel-head>div{display:flex;align-items:center;gap:6px;color:#3f4b44;font-size:9px}.v54-panel-head i{color:#657a6e}.v54-panel-head>div span,.v54-panel-head>span{color:#8a948e;font-size:7px;font-weight:500}.v54-table-wrap{width:100%;overflow-x:auto}.v54-activity-table{width:100%;border-collapse:collapse;table-layout:fixed}.v54-activity-table th{padding:7px 10px;background:#f8fafb;color:#7d8781;text-align:left;font-size:7px;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid #e6ebee}.v54-activity-table td{padding:8px 10px;color:#4a554f;font-size:8px;border-bottom:1px solid #eef1ef;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v54-activity-table th:nth-child(1){width:16%}.v54-activity-table th:nth-child(2){width:21%}.v54-activity-table th:nth-child(3){width:23%}.v54-activity-table th:nth-child(4){width:22%}.v54-activity-table th:nth-child(5){width:18%}.v54-activity-table tbody tr:last-child td{border-bottom:0}.v54-empty{text-align:center!important;color:#929b96!important;padding:20px!important}.v54-status{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#eef1ef;color:#647068;font-size:7px;font-weight:700}.v54-status.active{background:rgba(160,134,92,.13);color:#806a47}.v54-status.pending{background:rgba(167,95,95,.1);color:#945c5c}.v54-status.done{background:rgba(116,139,121,.13);color:#5f7869}.v54-status.cancel{opacity:.65}
.v54-ops-map{height:380px;width:100%;background:#eef1ef}.v54-map-legend{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 11px;color:#66736c;font-size:7px}.v54-map-legend>span{display:flex;align-items:center;gap:5px}.v54-map-legend small{color:#929b96;font-size:7px}.v54-live-dot,.v54-live-marker{display:inline-block;width:9px;height:9px;border-radius:50%;background:#4f9a68;box-shadow:0 0 0 0 rgba(79,154,104,.55);animation:v54Pulse 1.8s infinite}.v54-live-marker-wrap{background:transparent!important;border:0!important}.v54-live-marker{width:14px;height:14px;border:2px solid #fff;box-shadow:0 0 0 0 rgba(79,154,104,.7)}@keyframes v54Pulse{0%{box-shadow:0 0 0 0 rgba(79,154,104,.55)}70%{box-shadow:0 0 0 10px rgba(79,154,104,0)}100%{box-shadow:0 0 0 0 rgba(79,154,104,0)}}.v54-map-popup{display:flex;flex-direction:column;gap:4px;min-width:150px;color:#263945;font-size:11px}.v54-map-popup>strong{font-size:12px}.v54-map-popup span{color:#66736c}
@media(max-width:768px){.ops-v54-dashboard{padding:14px 9px 88px!important}.v54-dash-head{align-items:flex-start;flex-direction:column}.v54-dash-head h2{font-size:16px}.v54-date-nav{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto 30px}.v54-date-nav button,.v54-date-nav input{width:100%;min-width:0}.v54-panel-head{padding:9px}.v54-activity-table,.v54-activity-table tbody,.v54-activity-table tr,.v54-activity-table td{display:block;width:100%}.v54-activity-table thead{display:none}.v54-activity-table tr{padding:8px 9px;border-bottom:1px solid #e9edea}.v54-activity-table td{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;padding:4px 0;border:0;white-space:normal;font-size:9px}.v54-activity-table td:before{content:attr(data-label);color:#8a948e;font-size:7px;font-weight:700;text-transform:uppercase}.v54-activity-table td[colspan]{display:block}.v54-ops-map{height:340px}.v54-map-legend{align-items:flex-start;flex-direction:column;padding:7px 9px}}

/* ==========================================================================
   V56 — DASHBOARD DATE TOOLBAR FINAL FIX
   One compact, visually coherent control group on desktop and mobile.
   ========================================================================== */
.v54-date-nav{
  display:inline-flex!important;
  align-items:stretch!important;
  gap:0!important;
  width:auto!important;
  padding:0!important;
  border:1px solid #d5dcd7!important;
  border-radius:7px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
.v54-date-nav .v55-date-btn,
.v54-date-nav #v54DashboardDate{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  border:0!important;
  border-right:1px solid #e1e6e2!important;
  border-radius:0!important;
  background:#fff!important;
  color:#52616d!important;
  box-shadow:none!important;
  font-size:8px!important;
  font-weight:650!important;
  line-height:1!important;
}
.v54-date-nav .v55-date-btn{
  padding:0 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
}
.v54-date-nav #v54DashboardDate{
  padding:0 8px!important;
  color:#53636e!important;
  font-weight:600!important;
}
.v54-date-nav #v54TodayBtn{
  background:#315f7d!important;
  color:#fff!important;
  border-right:1px solid #315f7d!important;
  padding:0 11px!important;
}
.v54-date-nav #v54NextDay{
  border-right:0!important;
}
.v54-date-nav .v55-date-secondary:hover{
  background:#f5f7f9!important;
  border-color:#e1e6e2!important;
}
.v54-date-nav #v54TodayBtn:hover{
  background:#274b63!important;
  filter:none!important;
}
.v54-date-nav .v55-date-btn i{
  font-size:7px!important;
  line-height:1!important;
}
@media(max-width:768px){
  .v54-date-nav{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
  }
  .v54-date-nav #v54DashboardDate{
    flex:1 1 auto!important;
    width:1%!important;
    text-align:center!important;
  }
  .v54-date-nav .v55-date-btn{
    flex:0 0 auto!important;
    height:30px!important;
    padding:0 8px!important;
  }
}
@media(max-width:420px){
  .v54-date-nav .v55-date-secondary span{display:none!important}
  .v54-date-nav .v55-date-secondary{
    width:30px!important;
    padding:0!important;
  }
  .v54-date-nav #v54TodayBtn{padding:0 9px!important}
}


/* ==========================================================================
   V61 — UNIFIED TYPOGRAPHY SYSTEM
   One source of truth for text sizing across desktop + mobile.
   Tuned for comfortable reading at ~80% browser zoom / ~60cm viewing distance.
   ========================================================================== */

:root{
  --ops-font-page-title: 20px;
  --ops-font-section-title: 14px;
  --ops-font-body: 14px;
  --ops-font-card-title: 14px;
  --ops-font-label: 11.5px;
  --ops-font-small: 11.5px;
  --ops-font-control: 12.5px;
  --ops-line-body: 1.42;
}

/* --------------------------------------------------------------------------
   1. PAGE HEADERS — exactly the same hierarchy on every current sheet
   -------------------------------------------------------------------------- */
:is(
  #dashboard .v54-dash-head,
  #myDay .my-day-hero,
  #fleet .fleet-page-head,
  #travelLog .travel-page-head,
  #standby .standby-page-head,
  #owstock .oneweb-page-head,
  #payments .payments-page-head,
  #ipManager .ipm-page-head,
  #activitiesHub .activities-v47-head,
  #myWorkOrders .wo-v41-head,
  #completedActivities .completed-v40-head,
  #reports .report-v39-head,
  #logs .logs-page-head,
  #userman .userm-page-head
) h2{
  font-size:var(--ops-font-page-title)!important;
  line-height:1.2!important;
  font-weight:750!important;
}

:is(
  #dashboard .v54-dash-head,
  #myDay .my-day-hero,
  #fleet .fleet-page-head,
  #travelLog .travel-page-head,
  #standby .standby-page-head,
  #owstock .oneweb-page-head,
  #payments .payments-page-head,
  #ipManager .ipm-page-head,
  #activitiesHub .activities-v47-head,
  #myWorkOrders .wo-v41-head,
  #completedActivities .completed-v40-head,
  #reports .report-v39-head,
  #logs .logs-page-head,
  #userman .userm-page-head
) p{
  font-size:12px!important;
  line-height:1.4!important;
}

/* Page-header icons stay visually aligned to the same title size */
.ops-unified-page .ops-page-icon,
#dashboard .ops-page-icon,
#activitiesHub .ops-page-icon{
  font-size:13px!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
}

/* --------------------------------------------------------------------------
   2. TABLES — same text scale everywhere except geometry-sensitive calendars
   -------------------------------------------------------------------------- */
:is(
  #dashboard,#myDay,#fleet,#travelLog,#standby,#owstock,#payments,#ipManager,
  #activitiesHub,#myWorkOrders,#completedActivities,#reports,#logs,#userman
) table:not(#fleetCalendar):not(#standbyCalendar) th{
  font-size:var(--ops-font-label)!important;
  line-height:1.35!important;
  font-weight:750!important;
}

:is(
  #dashboard,#myDay,#fleet,#travelLog,#standby,#owstock,#payments,#ipManager,
  #activitiesHub,#myWorkOrders,#completedActivities,#reports,#logs,#userman
) table:not(#fleetCalendar):not(#standbyCalendar) td{
  font-size:var(--ops-font-body)!important;
  line-height:var(--ops-line-body)!important;
}

:is(
  #dashboard,#myDay,#fleet,#travelLog,#standby,#owstock,#payments,#ipManager,
  #activitiesHub,#myWorkOrders,#completedActivities,#reports,#logs,#userman
) table:not(#fleetCalendar):not(#standbyCalendar) td :is(span,strong,a,p){
  font-size:inherit!important;
  line-height:inherit!important;
}

/* --------------------------------------------------------------------------
   3. CARD TITLES / VALUES / LABELS — one hierarchy across all card-based tabs
   -------------------------------------------------------------------------- */
:is(
  #activitiesHub .activities-v47-card,
  #myWorkOrders .work-order-card,
  #standby .standby-mobile-card,
  #payments [class*="supplier-card"],
  #ipManager [class*="subnet-card"],
  #userman [class*="user-card"]
){
  font-size:var(--ops-font-body)!important;
  line-height:var(--ops-line-body)!important;
}

:is(
  #activitiesHub .activities-v47-card>strong,
  #myWorkOrders .work-order-card-ticket,
  #myWorkOrders .work-order-card-title,
  #standby .standby-mobile-tech strong,
  #payments [class*="supplier-card"] strong,
  #ipManager [class*="subnet-card"] strong,
  #userman [class*="user-card"] strong
){
  font-size:var(--ops-font-card-title)!important;
  line-height:1.35!important;
  font-weight:700!important;
}

:is(
  #activitiesHub .activities-v47-card>span,
  #myWorkOrders .work-order-card-value,
  #standby .standby-mobile-field input,
  #standby .standby-mobile-field select,
  #payments [class*="supplier-card"] :is(p,span),
  #ipManager [class*="subnet-card"] :is(p,span),
  #userman [class*="user-card"] :is(p,span)
){
  font-size:var(--ops-font-body)!important;
  line-height:var(--ops-line-body)!important;
}

:is(
  #activitiesHub .activities-v47-type,
  #activitiesHub .status-badge,
  #myWorkOrders .work-order-card-label,
  #myWorkOrders .status-badge,
  #standby .standby-mobile-tech span,
  #standby .standby-mobile-field>span,
  #payments [class*="supplier-card"] small,
  #ipManager [class*="subnet-card"] small,
  #userman [class*="user-card"] small
){
  font-size:var(--ops-font-label)!important;
  line-height:1.35!important;
}

/* Work Orders: explicitly NORMALIZED, not enlarged above other cards */
#myWorkOrders .work-order-card :is(div,p,span,a){
  line-height:var(--ops-line-body)!important;
}
#myWorkOrders .work-order-card-body,
#myWorkOrders .work-order-card-row{
  font-size:var(--ops-font-body)!important;
}
#myWorkOrders #timerDisplay{
  font-size:16px!important;
}
#myWorkOrders #timerStatus,
#myWorkOrders .wo-v41-timer small{
  font-size:var(--ops-font-small)!important;
}

/* IP Manager counts/meta — readable but clearly secondary */
#ipManager :is([class*="count"],[class*="meta"]){
  font-size:var(--ops-font-small)!important;
}

/* --------------------------------------------------------------------------
   4. FORMS / FILTERS / BUTTONS — consistent controls across all tabs/modals
   -------------------------------------------------------------------------- */
:is(
  #dashboard,#myDay,#fleet,#travelLog,#standby,#owstock,#payments,#ipManager,
  #activitiesHub,#myWorkOrders,#completedActivities,#reports,#logs,#userman
) :is(input,select,textarea){
  font-size:var(--ops-font-control)!important;
  line-height:1.3!important;
}

:is(
  #dashboard,#myDay,#fleet,#travelLog,#standby,#owstock,#payments,#ipManager,
  #activitiesHub,#myWorkOrders,#completedActivities,#reports,#logs,#userman
) label{
  font-size:var(--ops-font-label)!important;
  line-height:1.35!important;
}

:is(
  #dashboard,#myDay,#fleet,#travelLog,#standby,#owstock,#payments,#ipManager,
  #activitiesHub,#myWorkOrders,#completedActivities,#reports,#logs,#userman
) button{
  font-size:var(--ops-font-control)!important;
  line-height:1.2!important;
}

/* Modal typography — all modal families */
:is(
  .modal-content,.fleet-modal-dialog,.travel-modal-dialog,.oneweb-modal-dialog,
  .payment-modal-dialog,.ipm-modal-dialog,.userm-modal-dialog,.activities-v47-modal-dialog
){
  font-size:var(--ops-font-body)!important;
}

:is(
  .modal-content,.fleet-modal-dialog,.travel-modal-dialog,.oneweb-modal-dialog,
  .payment-modal-dialog,.ipm-modal-dialog,.userm-modal-dialog,.activities-v47-modal-dialog
) :is(input,select,textarea,button){
  font-size:var(--ops-font-control)!important;
}

:is(
  .modal-content,.fleet-modal-dialog,.travel-modal-dialog,.oneweb-modal-dialog,
  .payment-modal-dialog,.ipm-modal-dialog,.userm-modal-dialog,.activities-v47-modal-dialog
) label{
  font-size:var(--ops-font-label)!important;
}

/* --------------------------------------------------------------------------
   5. TOP BAR / PROFILE / SEARCH / NAV — one compact readable scale
   -------------------------------------------------------------------------- */
#globalSearchInput,
.global-search-shell input{
  font-size:12.5px!important;
}

#profileIndicator,
#profileIndicator *,
.profile-popover,
.profile-popover *{
  font-size:12px!important;
}

.header-lang,
.header-lang *{
  font-size:12px!important;
}

.sidebar .menu-text,
.sidebar button{
  font-size:12px!important;
}

.mobile-bottom-nav,
.mobile-bottom-nav *{
  font-size:11.5px!important;
}

/* --------------------------------------------------------------------------
   6. DASHBOARD DETAILS
   -------------------------------------------------------------------------- */
#dashboard .v54-panel-head>div{
  font-size:var(--ops-font-section-title)!important;
}
#dashboard .v54-panel-head :is(span,small),
#dashboard .v54-map-legend,
#dashboard .v54-map-legend small{
  font-size:var(--ops-font-small)!important;
}
#dashboard .v54-status{
  font-size:var(--ops-font-label)!important;
}

/* --------------------------------------------------------------------------
   7. CALENDARS — preserve geometry while standardizing their own scale
   -------------------------------------------------------------------------- */
#fleetCalendar,
#standbyCalendar{
  font-size:11px!important;
}
#fleetCalendar th,
#standbyCalendar th{
  font-size:10px!important;
}
#fleetCalendar td,
#standbyCalendar td{
  font-size:11px!important;
}

/* --------------------------------------------------------------------------
   8. MOBILE — same hierarchy, only page title reduced for available width
   -------------------------------------------------------------------------- */
@media(max-width:768px){
  :root{
    --ops-font-page-title:18px;
    --ops-font-section-title:14px;
    --ops-font-body:14px;
    --ops-font-card-title:14px;
    --ops-font-label:11.5px;
    --ops-font-small:11.5px;
    --ops-font-control:12.5px;
  }

  /* Stacked dashboard rows retain readable value and label sizes */
  #dashboard .v54-activity-table td{
    font-size:var(--ops-font-body)!important;
  }
  #dashboard .v54-activity-table td::before{
    font-size:var(--ops-font-label)!important;
  }

  /* Work Orders deliberately remains identical to other cards */
  #myWorkOrders .work-order-card-ticket,
  #activitiesHub .activities-v47-card>strong,
  #standby .standby-mobile-tech strong{
    font-size:var(--ops-font-card-title)!important;
  }
}


/* ==========================================================================
   V67 — FINAL VISUAL HYGIENE / DESIGN FREEZE
   One conservative consistency layer. No redesign, no data-flow changes.
   ========================================================================== */

:root{
  --ops-ui-radius:7px;
  --ops-ui-control-h:32px;
  --ops-ui-gap:8px;
  --ops-ui-border:#dfe5e9;
  --ops-ui-surface:#ffffff;
  --ops-ui-soft:#f8fafb;
  --ops-ui-accent:#315f7d;
  --ops-ui-accent-hover:#274b63;
  --ops-ui-danger:#a04444;
}

/* --------------------------------------------------------------------------
   PAGE RHYTHM — same title/subtitle/action/content spacing on every main sheet
   -------------------------------------------------------------------------- */
:is(
  #dashboard .v54-dash-head,
  #fleet .fleet-page-head,
  #travelLog .travel-page-head,
  #standby .standby-page-head,
  #owstock .oneweb-page-head,
  #payments .payments-page-head,
  #ipManager .ipm-page-head,
  #activitiesHub .activities-v47-head,
  #myWorkOrders .wo-v41-head,
  #completedActivities .completed-v40-head,
  #reports .report-v39-head,
  #logs .logs-page-head,
  #userman .userm-page-head
){
  margin-bottom:10px!important;
}

:is(
  #fleet .fleet-page-sub,
  #travelLog .travel-page-head p,
  #standby .standby-page-head p,
  #owstock .oneweb-page-head p,
  #payments .payments-page-head p,
  #ipManager .ipm-page-head p,
  #activitiesHub .activities-v47-head p,
  #myWorkOrders .wo-v41-head p,
  #completedActivities .completed-v40-head p,
  #reports .report-v39-head p,
  #logs .logs-page-head p,
  #userman .userm-page-head p
){
  margin-top:3px!important;
  margin-bottom:0!important;
}

/* --------------------------------------------------------------------------
   BUTTON SYSTEM — one physical control language; semantic colors stay intact.
   -------------------------------------------------------------------------- */
:is(
  .fleet-email-action,.fleet-add-toggle,
  .travel-map-action,
  .standby-primary-btn,.standby-secondary-btn,
  .oneweb-primary-btn,.oneweb-secondary-btn,.oneweb-danger-btn,
  .payments-primary-btn,.payments-secondary-btn,
  .ipm-primary-btn,.ipm-secondary-btn,
  .activities-v47-primary,.activities-v47-secondary,.activities-v47-danger,
  .report-digest-btn,.report-generate-btn,
  .logs-primary-btn,.logs-secondary-btn,
  .userm-primary-btn,.userm-secondary-btn,
  .user-mgmt-btn
){
  min-height:var(--ops-ui-control-h)!important;
  border-radius:var(--ops-ui-radius)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  line-height:1!important;
  box-sizing:border-box!important;
}

:is(
  .fleet-add-toggle,
  .travel-map-action-add,
  .standby-primary-btn,
  .oneweb-primary-btn,
  .payments-primary-btn,
  .ipm-primary-btn,
  .activities-v47-primary,
  .report-digest-btn,
  .logs-primary-btn,
  .userm-primary-btn
){
  background:var(--ops-ui-accent)!important;
  border-color:var(--ops-ui-accent)!important;
  color:#fff!important;
}

:is(
  .fleet-add-toggle,
  .travel-map-action-add,
  .standby-primary-btn,
  .oneweb-primary-btn,
  .payments-primary-btn,
  .ipm-primary-btn,
  .activities-v47-primary,
  .report-digest-btn,
  .logs-primary-btn,
  .userm-primary-btn
):hover{
  background:var(--ops-ui-accent-hover)!important;
  border-color:var(--ops-ui-accent-hover)!important;
}

:is(
  .fleet-email-action,
  .travel-map-action-history,.travel-map-action-reset,
  .standby-secondary-btn,
  .oneweb-secondary-btn,
  .payments-secondary-btn,
  .ipm-secondary-btn,
  .activities-v47-secondary,
  .logs-secondary-btn,
  .userm-secondary-btn
){
  background:#fff!important;
  border:1px solid var(--ops-ui-border)!important;
  color:#53636e!important;
}

/* Travel desktop + mobile always uses one horizontal toolbar. */
#travelLog .travel-map-actions{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}
#travelLog .travel-map-actions>button{
  width:auto!important;
  flex:0 0 auto!important;
}

/* --------------------------------------------------------------------------
   SECTION HEADERS — actual selectors, folded from the old V62/V63 patches.
   -------------------------------------------------------------------------- */
#myWorkOrders .wo-v41-panel-head strong,
#reports .report-v39-section-head strong,
#reports .report-v39-results-head strong{
  font-size:var(--ops-font-section-title)!important;
  line-height:1.3!important;
  font-weight:700!important;
}
#myWorkOrders .wo-v41-panel-head span,
#reports .report-v39-section-head span,
#reports .report-v39-results-head span{
  font-size:12px!important;
  line-height:1.4!important;
}

#myWorkOrders .work-order-card button,
#myWorkOrders .work-order-card-modern button{
  min-height:36px!important;
  font-size:var(--ops-font-control)!important;
}
#myWorkOrders .work-order-card button *,
#myWorkOrders .work-order-card-modern button *{
  font-size:inherit!important;
}

/* User Management — actual JS-rendered card classes. */
#userman .user-row{
  font-size:var(--ops-font-body)!important;
  line-height:var(--ops-line-body)!important;
}
#userman .user-name{
  font-size:var(--ops-font-card-title)!important;
  line-height:1.3!important;
  font-weight:700!important;
}
#userman .user-email{font-size:12px!important;line-height:1.35!important}
#userman .role-badge,
#userman .perm-chip{font-size:10.5px!important;line-height:1.25!important}
#userman .user-mgmt-btn{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
}
#userman .user-mgmt-btn,
#userman .user-mgmt-btn *{font-size:11px!important}

/* --------------------------------------------------------------------------
   STATUS BADGES — common shape/weight; existing semantic colors remain.
   -------------------------------------------------------------------------- */
:is(
  .status-badge,.v54-status,.my-day-status,
  .activities-v47-status,.role-badge
){
  border-radius:999px!important;
  font-weight:700!important;
  line-height:1.15!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
}

/* --------------------------------------------------------------------------
   MODALS — common shell behavior without changing modal-specific content.
   -------------------------------------------------------------------------- */
:is(
  .oneweb-modal-dialog,.payment-modal-dialog,.ipm-modal-dialog,.userm-modal-dialog,
  .activities-v47-modal-dialog,.fleet-quick-modal,.modal-content
){
  border-radius:10px!important;
  box-shadow:0 18px 50px rgba(31,40,35,.18)!important;
  box-sizing:border-box!important;
}

:is(
  .oneweb-modal-head,.payment-modal-head,.modal-header
){
  flex:0 0 auto!important;
}

:is(
  .oneweb-modal-body,.payment-modal-body
){
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}

:is(
  .oneweb-modal-actions,.payment-modal-actions,.modal-buttons
){
  flex:0 0 auto!important;
  gap:7px!important;
}

/* --------------------------------------------------------------------------
   EMPTY STATES — same quiet treatment instead of blank tables/cards.
   -------------------------------------------------------------------------- */
.ops-empty-state{
  min-height:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:20px;
  text-align:center;
  color:#7d8781;
}
.ops-empty-state>i{
  font-size:22px;
  color:#7f9187;
  opacity:.75;
  margin-bottom:2px;
}
.ops-empty-state>strong{
  color:#4b5750;
  font-size:var(--ops-font-body)!important;
}
.ops-empty-state>span{
  color:#8b958f;
  font-size:var(--ops-font-small)!important;
}
.ops-empty-state-table{min-height:120px}

/* Existing dashboard/table empties get the same visual weight. */
.v54-empty,
.activities-v47-state{
  color:#87949e!important;
  text-align:center!important;
}

/* --------------------------------------------------------------------------
   LOADING — retain the fast non-blocking loader but make its presentation uniform.
   -------------------------------------------------------------------------- */
#globalLoader.data-progress{
  z-index:70000!important;
}
#globalLoader .data-progress-text{
  font-size:11.5px!important;
  font-weight:600!important;
  letter-spacing:0!important;
}
#globalLoader .data-progress-bar{
  background:var(--ops-ui-accent)!important;
}

/* --------------------------------------------------------------------------
   MOBILE — same spacing language, not a separate design.
   -------------------------------------------------------------------------- */
@media(max-width:768px){
  :is(
    #dashboard .v54-dash-head,
    #fleet .fleet-page-head,
    #travelLog .travel-page-head,
    #standby .standby-page-head,
    #owstock .oneweb-page-head,
    #payments .payments-page-head,
    #ipManager .ipm-page-head,
    #activitiesHub .activities-v47-head,
    #myWorkOrders .wo-v41-head,
    #completedActivities .completed-v40-head,
    #reports .report-v39-head,
    #logs .logs-page-head,
    #userman .userm-page-head
  ){
    margin-bottom:9px!important;
  }

  :is(
    .oneweb-modal-dialog,.payment-modal-dialog,.ipm-modal-dialog,.userm-modal-dialog,
    .activities-v47-modal-dialog,.fleet-quick-modal,.modal-content
  ){
    max-height:calc(100dvh - 20px)!important;
  }

  #travelLog .travel-map-actions{
    flex-wrap:nowrap!important;
    width:100%!important;
  }
  #travelLog .travel-map-actions>button{
    flex:1 1 0!important;
    min-width:0!important;
  }
}

/* ==========================================================================
   V68 — ACTIVITIES PRIMARY ACTION ALIGNMENT
   Add Activity now uses the same compact primary-action geometry as the
   standardized V67 buttons across the application.
   ========================================================================== */
#activitiesHub .activities-v47-head > .activities-v47-primary{
  min-height:var(--ops-ui-control-h)!important;
  height:var(--ops-ui-control-h)!important;
  width:auto!important;
  min-width:0!important;
  padding:0 12px!important;
  border:1px solid var(--ops-ui-accent)!important;
  border-radius:var(--ops-ui-radius)!important;
  background:var(--ops-ui-accent)!important;
  color:#fff!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  font-size:var(--ops-font-control)!important;
  font-weight:700!important;
  line-height:1!important;
  box-sizing:border-box!important;
  box-shadow:none!important;
}
#activitiesHub .activities-v47-head > .activities-v47-primary:hover{
  background:var(--ops-ui-accent-hover)!important;
  border-color:var(--ops-ui-accent-hover)!important;
}
#activitiesHub .activities-v47-head > .activities-v47-primary i{
  font-size:inherit!important;
  line-height:1!important;
}
@media(max-width:768px){
  #activitiesHub .activities-v47-head > .activities-v47-primary{
    width:auto!important;
    min-height:var(--ops-ui-control-h)!important;
    height:var(--ops-ui-control-h)!important;
    padding:0 11px!important;
  }
}

/* ==========================================================================
   V71 — WORK ORDER COMPLETION MODAL STANDARD
   Scoped override: brings the legacy inline-styled completion wizard into
   the V67/V68 design system without changing IDs, steps, validation or logic.
   ========================================================================== */


/* Header: same quiet modal language as Activities / OneWeb / Payments. */


/* Progress: compact segmented indicator, not oversized floating circles. */


/* The wizard content is the only scrolling region. */


/* Legacy inner cards become clean, restrained sections. */


/* Footer is fixed within the modal; only body scrolls. */


@media(max-width:768px){


}
@media(max-width:420px){


}

/* ==========================================================================
   V72 — ACTIVITIES BULK DELETE
   Selection mode integrated into the existing Activities visual language.
   ========================================================================== */
.activities-v72-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
}
.activities-v72-bulk-toggle,
.activities-v72-bulk-cancel,
.activities-v72-bulk-delete{
  min-height:var(--ops-ui-control-h,32px)!important;
  height:var(--ops-ui-control-h,32px)!important;
  padding:0 11px!important;
  border-radius:var(--ops-ui-radius,7px)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  font-size:var(--ops-font-control,12.5px)!important;
  font-weight:700!important;
  line-height:1!important;
  box-sizing:border-box!important;
  box-shadow:none!important;
}
.activities-v72-bulk-toggle,
.activities-v72-bulk-cancel{
  background:#fff!important;
  border:1px solid var(--ops-ui-border,#dfe5e9)!important;
  color:#596873!important;
}
.activities-v72-bulk-toggle:hover,
.activities-v72-bulk-cancel:hover{
  background:#f5f7f9!important;
  border-color:#cbd3ce!important;
}
.activities-v72-bulk-delete{
  background:#9b5d5d!important;
  border:1px solid #9b5d5d!important;
  color:#fff!important;
}
.activities-v72-bulk-delete:hover:not(:disabled){background:#8b5050!important;border-color:#8b5050!important}
.activities-v72-bulk-delete:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}
.activities-v72-bulk-bar{
  margin:0 0 8px 0;
  min-height:42px;
  padding:6px 8px;
  border:1px solid #e0e5e2;
  border-radius:8px;
  background:#f8fafb;
  display:flex;
  align-items:center;
  gap:10px;
}
.activities-v72-bulk-bar[hidden]{display:none!important}
.activities-v72-select-visible{
  display:inline-flex!important;
  align-items:center;
  gap:6px;
  margin:0!important;
  color:#53636e!important;
  font-size:var(--ops-font-control,12.5px)!important;
  font-weight:650!important;
  cursor:pointer;
  white-space:nowrap;
}
.activities-v72-select-visible input,
.activities-v72-row-check{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  margin:0!important;
  accent-color:var(--ops-ui-accent,#315f7d);
  cursor:pointer;
}
.activities-v72-selected-count{
  color:#66736c;
  font-size:var(--ops-font-control,12.5px)!important;
  font-weight:700;
  white-space:nowrap;
}
.activities-v72-bulk-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
}
#unifiedActivitiesTable .activities-v72-select-col{
  display:none;
  width:38px;
  min-width:38px;
  text-align:center;
  padding-left:8px!important;
  padding-right:6px!important;
}
#activitiesHub.activities-v72-bulk-mode #unifiedActivitiesTable .activities-v72-select-col{
  display:table-cell;
}
#activitiesHub.activities-v72-bulk-mode #unifiedActivitiesTable tbody tr{
  cursor:pointer;
}
#unifiedActivitiesTable tbody tr.activities-v72-selected{
  background:rgba(102,123,112,.10)!important;
  box-shadow:inset 3px 0 0 var(--ops-ui-accent,#315f7d);
}
.activities-v72-row-end{
  color:#809087;
  text-align:center;
}
#unifiedActivityCards .activities-v47-card{
  position:relative;
}
#unifiedActivityCards .activities-v47-card.activities-v72-selected{
  border-color:#8da097!important;
  background:#f3f7fa!important;
  box-shadow:inset 3px 0 0 var(--ops-ui-accent,#315f7d)!important;
}
.activities-v72-card-check{
  position:absolute;
  top:9px;
  right:9px;
  width:24px;
  height:24px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #d8e0e5;
  color:#708078;
  font-size:11px!important;
}
.activities-v47-card.activities-v72-selected .activities-v72-card-check{
  background:var(--ops-ui-accent,#315f7d);
  border-color:var(--ops-ui-accent,#315f7d);
  color:#fff;
}

@media(max-width:768px){
  .activities-v47-head{
    align-items:flex-start!important;
  }
  .activities-v72-head-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
  }
  .activities-v72-head-actions>button{
    flex:1 1 0!important;
    min-width:0!important;
  }
  .activities-v72-bulk-bar{
    align-items:flex-start;
    flex-wrap:wrap;
    gap:7px 10px;
    padding:8px 9px;
  }
  .activities-v72-bulk-actions{
    width:100%;
    margin-left:0;
  }
  .activities-v72-bulk-actions>button{
    flex:1 1 0!important;
    min-width:0!important;
  }
  .activities-v72-selected-count{
    margin-left:auto;
  }
}

/* ==========================================================================
   V73 — ACTIVITIES PRIMARY ACTION CORRECTION
   V72 bulk-mode controls must not override the established Add Activity button.
   ========================================================================== */
#activitiesHub .activities-v72-head-actions .activities-v47-primary{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  height:var(--ops-ui-control-h,32px)!important;
  min-height:var(--ops-ui-control-h,32px)!important;
  padding:0 11px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  border-radius:var(--ops-ui-radius,7px)!important;
  font-size:var(--ops-font-control,12.5px)!important;
  font-weight:700!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#activitiesHub .activities-v72-head-actions .activities-v72-bulk-toggle{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
}
@media(max-width:768px){
  #activitiesHub .activities-v72-head-actions{
    width:100%!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
  }
  #activitiesHub .activities-v72-head-actions>button{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
  }
  #activitiesHub .activities-v72-head-actions .activities-v47-primary{
    margin-left:0!important;
  }
}

/* V74 — OFFICE SCOPE */
.ops-office-scope{margin:8px 10px 4px;padding:7px;border:1px solid #dce4e9;border-radius:8px;background:#f8fafb}
.ops-office-scope label{display:flex;align-items:center;gap:6px;margin:0 0 5px;color:#687781;font-size:10.5px;font-weight:700}
.ops-office-scope select,#userOfficeFilter{height:31px;border:1px solid #d8e0e5;border-radius:7px;background:#fff;color:#465661;padding:0 7px;font-size:11.5px;font-weight:650}
.ops-office-scope select{width:100%}.ops-office-local{display:flex;align-items:center;gap:6px;color:#53636e;font-size:11.5px;font-weight:700}.user-office{font-weight:700;color:#315f7d}

/* V75 — Regional access clarity */
.permissions-grid input:disabled{opacity:.45;cursor:not-allowed}
.permissions-grid label:has(input:disabled){opacity:.55}
#newUserOffice option[value="all"],#editUserOffice option[value="all"]{font-weight:800}

/* V76 — office-aware operational core */
.v76-office-scope-label{
  display:inline-flex;align-items:center;min-height:30px;padding:0 9px;
  border:1px solid var(--ops-ui-border,#dfe5e9);border-radius:7px;
  background:#f8fafb;color:#596873;font-size:var(--ops-font-control,12.5px);
  font-weight:700;white-space:nowrap
}
@media(max-width:768px){.v76-office-scope-label{min-height:30px;padding:0 7px}}

/* ==========================================================================
   V77 — PRODUCTION OFFICE CONTROLS
   ========================================================================== */
.v77-office-picker{position:relative;display:inline-flex;z-index:20}
.v77-office-btn{
  min-height:32px;height:32px;padding:0 10px;border:1px solid var(--ops-ui-border,#dfe5e9);
  border-radius:7px;background:#fff;color:#4d5c67;display:inline-flex;align-items:center;
  gap:6px;font-size:var(--ops-font-control,12.5px);font-weight:700;white-space:nowrap;cursor:pointer
}
.v77-office-btn:hover:not(:disabled){background:#f5f7f9}
.v77-office-btn.is-local,.v77-office-btn:disabled{cursor:default;background:#f8fafb}
.v77-office-chevron{font-size:9px;opacity:.65}
.v77-office-btn.is-local .v77-office-chevron{display:none}
.v77-office-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:190px;padding:6px;
  border:1px solid #dfe5e9;border-radius:9px;background:#fff;box-shadow:0 14px 36px rgba(31,40,35,.18);
  z-index:1000
}
.v77-office-menu[hidden]{display:none!important}
.v77-office-option{
  display:flex!important;align-items:center;gap:8px;margin:0!important;padding:7px 8px;
  border-radius:6px;color:#4d5d68!important;font-size:12px!important;font-weight:650!important;cursor:pointer
}
.v77-office-option:hover{background:#f3f7fa}
.v77-office-option input{width:15px!important;height:15px!important;min-width:15px!important;margin:0!important;accent-color:var(--ops-ui-accent,#315f7d)}
.v77-office-all{border-bottom:1px solid #edf1f3;border-radius:6px 6px 0 0;margin-bottom:3px!important}
#officeMigrationBtn{white-space:nowrap}
@media(max-width:768px){
  .v77-office-menu{left:0;right:auto;min-width:180px}
  .v54-date-nav{overflow:visible!important}
}

/* ==========================================================================
   V78 — PRODUCTION OFFICE UI CORRECTIONS
   ========================================================================== */
.v78-dashboard-controls{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:7px!important;overflow:visible!important;position:relative!important
}
.v78-office-picker{position:relative!important;display:inline-flex!important;overflow:visible!important;z-index:5000!important}
.v78-office-btn{
  min-height:32px!important;height:32px!important;padding:0 10px!important;
  border:1px solid var(--ops-ui-border,#dfe5e9)!important;border-radius:7px!important;
  background:#fff!important;color:#4d5c67!important;display:inline-flex!important;align-items:center!important;
  gap:6px!important;font-size:var(--ops-font-control,12.5px)!important;font-weight:700!important;
  white-space:nowrap!important;cursor:pointer!important
}
.v78-office-btn:hover:not(:disabled){background:#f5f7f9!important}
.v78-office-btn.is-local,.v78-office-btn:disabled{cursor:default!important;background:#f8fafb!important}
.v78-office-chevron{font-size:9px!important;opacity:.65!important}
.v78-office-btn.is-local .v78-office-chevron{display:none!important}
.v78-office-menu{
  position:fixed!important;min-width:200px!important;max-height:280px!important;overflow-y:auto!important;
  padding:6px!important;border:1px solid #dfe5e9!important;border-radius:9px!important;background:#fff!important;
  box-shadow:0 14px 36px rgba(31,40,35,.22)!important;z-index:99999!important
}
.v78-office-menu[hidden]{display:none!important}
.v78-office-option{
  display:flex!important;align-items:center!important;gap:8px!important;margin:0!important;padding:8px!important;
  border-radius:6px!important;color:#4d5d68!important;font-size:12px!important;font-weight:650!important;cursor:pointer!important
}
.v78-office-option:hover{background:#f3f7fa!important}
.v78-office-option input{width:15px!important;height:15px!important;min-width:15px!important;margin:0!important;accent-color:var(--ops-ui-accent,#315f7d)!important}
.v78-office-all{border-bottom:1px solid #edf1f3!important;border-radius:6px 6px 0 0!important;margin-bottom:3px!important}
@media(max-width:768px){
  .v78-dashboard-controls{width:100%!important;justify-content:flex-start!important;flex-wrap:wrap!important}
  .v78-office-picker{flex:0 0 auto!important}
}

/* V79 — readable single permission editor */
#newUserPermsGrid,#editUserPermsGrid{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:8px!important;font-size:13px!important;line-height:1.3!important;
 max-height:320px!important;overflow-y:auto!important;padding:10px!important;
 border:1px solid var(--ops-ui-border,#dfe5e9)!important;border-radius:8px!important;background:#fafbfc!important
}
#newUserPermsGrid label,#editUserPermsGrid label{
 min-height:36px!important;margin:0!important;padding:7px 9px!important;display:flex!important;
 align-items:center!important;gap:8px!important;color:#3f4b44!important;background:#fff!important;
 border:1px solid #e4e8e5!important;border-radius:6px!important;font-size:13px!important;
 font-weight:650!important;line-height:1.25!important;cursor:pointer!important
}
#newUserPermsGrid input[type="checkbox"],#editUserPermsGrid input[type="checkbox"]{
 flex:0 0 auto!important;width:17px!important;height:17px!important;margin:0!important;
 accent-color:var(--ops-ui-accent,#315f7d)!important
}
#newUserPermsGrid label:has(input:disabled),#editUserPermsGrid label:has(input:disabled){opacity:.55!important;cursor:not-allowed!important}
@media(max-width:600px){
 #newUserPermsGrid,#editUserPermsGrid{grid-template-columns:1fr!important;max-height:38dvh!important}
 #newUserPermsGrid label,#editUserPermsGrid label{min-height:40px!important;font-size:13px!important}
}

/* V80 — single top profile with role + region */
#profileIndicator .profile-summary small{
 display:block!important;max-width:180px!important;overflow:hidden!important;text-overflow:ellipsis!important;
 white-space:nowrap!important;font-size:11.5px!important;font-weight:650!important;color:#6b776f!important
}
#profilePopoverRole{display:block!important;margin-top:2px!important;font-size:11.5px!important;font-weight:700!important;color:#66736c!important}
#opsOfficeScope{display:none!important}

/* V81 — Dashboard office dropdown anchored tightly to trigger */
.v78-office-menu{margin:0!important;transform:none!important}

/* ==========================================================================
   V82 — DESKTOP OFFICE DROPDOWN + STANDARD USER MODALS
   ========================================================================== */
@media(min-width:769px){
  .v78-office-picker{position:relative!important;overflow:visible!important}
  .v78-office-menu{
    position:absolute!important;
    top:calc(100% + 3px)!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;
    margin:0!important;
    transform:none!important;
    z-index:99999!important;
  }
}

/* User Management follows the same fixed, scrollable modal shell used app-wide. */
#addUserModal.userm-modal,
#editUserModal.userm-modal{
  position:fixed!important;inset:0!important;
  align-items:center!important;justify-content:center!important;
  padding:18px!important;overflow:hidden!important;z-index:100000!important;
}
#addUserModal .userm-modal-dialog,
#editUserModal .userm-modal-dialog{
  width:min(620px,calc(100vw - 36px))!important;
  max-width:620px!important;
  max-height:min(86vh,780px)!important;
  margin:0!important;padding:0!important;
  display:flex!important;flex-direction:column!important;
  overflow:hidden!important;border-radius:10px!important;
  background:var(--card-bg,#fff)!important;
}
#addUserModal .userm-modal-dialog>h3,
#editUserModal .userm-modal-dialog>h3{
  flex:0 0 auto!important;margin:0!important;padding:16px 18px!important;
  border-bottom:1px solid var(--ops-ui-border,#dfe5e9)!important;
  font-size:var(--ops-font-heading,18px)!important;
}
#addUserModal .userm-modal-body,
#editUserModal .userm-modal-body{
  flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;
  overscroll-behavior:contain!important;padding:16px 18px!important;
}
#addUserModal .modal-buttons,
#editUserModal .modal-buttons{
  flex:0 0 auto!important;margin:0!important;padding:12px 18px!important;
  border-top:1px solid var(--ops-ui-border,#dfe5e9)!important;
  background:var(--card-bg,#fff)!important;
  display:flex!important;justify-content:flex-end!important;gap:8px!important;
}
#addUserModal .form-row,#editUserModal .form-row{margin-bottom:12px!important}
#addUserModal .form-row>label,#editUserModal .form-row>label{
  display:block!important;margin-bottom:5px!important;font-size:13px!important;font-weight:700!important;
}
#addUserModal input,#addUserModal select,#editUserModal input,#editUserModal select{
  min-height:38px!important;font-size:13px!important;
}
@media(max-width:600px){
 #addUserModal.userm-modal,#editUserModal.userm-modal{padding:10px!important;align-items:center!important}
 #addUserModal .userm-modal-dialog,#editUserModal .userm-modal-dialog{
   width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;border-radius:9px!important
 }
 #addUserModal .userm-modal-dialog>h3,#editUserModal .userm-modal-dialog>h3{padding:13px 14px!important}
 #addUserModal .userm-modal-body,#editUserModal .userm-modal-body{padding:12px 14px!important}
 #addUserModal .modal-buttons,#editUserModal .modal-buttons{padding:10px 14px!important}
}

/* ==========================================================================
   V85 — MOBILE NAV ICON RESILIENCE + PERFORMANCE CLEANUP
   ========================================================================== */
@media(max-width:768px){
  #mobileBottomNav .mobile-nav-icon-wrap{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:24px!important;
    min-height:22px!important;
    position:relative!important;
  }
  #mobileBottomNav .mobile-nav-icon-wrap>i{
    display:inline-block!important;
    width:1.25em!important;
    min-width:1.25em!important;
    height:1em!important;
    line-height:1!important;
    font-family:"Font Awesome 6 Free"!important;
    font-style:normal!important;
    font-weight:900!important;
    font-size:16px!important;
    color:currentColor!important;
    opacity:1!important;
    visibility:visible!important;
  }
}

/* V88 — every Work Order photo is visibly mandatory */
.ops-required-photo{
  color:#dc2626!important;
  margin-left:4px!important;
  font-weight:900!important;
  font-size:1em!important;
  line-height:1!important;
}
#wizardSubmitBtn:disabled{
  background:#9ca3af!important;
  color:#f3f4f6!important;
  cursor:not-allowed!important;
  opacity:.78!important;
  box-shadow:none!important;
}


/* ==========================================================================
   V99 — PRODUCTION CORPORATE UI
   Professional navy / steel-blue / cool-neutral palette.
   One light theme. No decorative purple. Reduced visual noise.
   ========================================================================== */
html,body{
  background:#f5f7f9!important;
  color:#1f2b34!important;
  color-scheme:light!important;
}
body.dark-mode,html.dark,html[data-theme="dark"],[data-theme="dark"]{
  background:#f5f7f9!important;
  color:#1f2b34!important;
  color-scheme:light!important;
}

/* Header / identity */
.main-header,header.main-header,.app-header,.topbar,.top-bar{
  background:#1f2f3c!important;
  background-image:none!important;
  border-bottom:1px solid #344b5b!important;
  box-shadow:0 1px 4px rgb(12 27 38 / .16)!important;
}
.main-header .header-left,.main-header .header-left *,
.main-header .opsflex-brand-subtitle{
  color:#f8fafb!important;
}
.main-header input[type="search"],.header-right input[type="search"],#globalSearch{
  background:#2a3e4d!important;
  border:1px solid #465d6d!important;
  color:#f8fafb!important;
  box-shadow:none!important;
}
.main-header input[type="search"]:focus,.header-right input[type="search"]:focus,#globalSearch:focus{
  background:#ffffff!important;
  color:#1f2b34!important;
  border-color:#5b86a1!important;
  box-shadow:0 0 0 3px rgb(49 95 125 / .16)!important;
}

/* Sidebar */
.sidebar,#sidebar{
  background:#172733!important;
  background-image:none!important;
  border-right:1px solid #263c4b!important;
  box-shadow:2px 0 8px rgb(12 27 38 / .08)!important;
}
.sidebar .menu-buttons button,#sidebar .menu-buttons button{
  color:#c9d5dc!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.sidebar .menu-buttons button:hover,#sidebar .menu-buttons button:hover{
  background:#223b4b!important;
  color:#ffffff!important;
}
.sidebar .menu-buttons button.active-menu,#sidebar .menu-buttons button.active-menu{
  background:#2a4b60!important;
  color:#ffffff!important;
  border-left-color:#78a6c1!important;
}
.sidebar .menu-buttons button i,#sidebar .menu-buttons button i{
  color:currentColor!important;
}

/* Content / cards / panels */
.content{background:#f5f7f9!important;}
.card,.panel,.section-card,.dashboard-card,.stat-card,.kpi-card,
.travel-panel,.standby-panel,.payment-card,.user-row,.activity-card{
  background:#ffffff!important;
  border-color:#dfe5e9!important;
  box-shadow:0 1px 3px rgb(17 35 48 / .07)!important;
}
.card:hover,.kpi-card:hover,.user-row:hover{
  box-shadow:0 3px 10px rgb(17 35 48 / .09)!important;
}
.content h2,.content h3,.card-title,.kpi-value{
  color:#1f2b34!important;
}

/* Tables */
.table-responsive,.table-wrap,.standby-table-wrap{
  background:#ffffff!important;
  border-color:#dfe5e9!important;
  box-shadow:0 1px 3px rgb(17 35 48 / .06)!important;
}
thead,#standby #standbyTable thead{
  background:#2b3f4d!important;
  background-image:none!important;
}
th,#standby #standbyTable thead th{
  background:#2b3f4d!important;
  color:#ffffff!important;
  border-color:#3d5261!important;
}
td{
  color:#404c55!important;
  border-color:#edf1f3!important;
}
tbody tr:hover{background:#f3f7fa!important;}

/* Forms */
input,select,textarea{
  background:#ffffff!important;
  color:#1f2b34!important;
  border-color:#cfd8de!important;
  box-shadow:none!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#4f7f9c!important;
  box-shadow:0 0 0 3px rgb(49 95 125 / .12)!important;
  outline:none!important;
}
label{color:#404c55!important;}

/* Buttons — flatter and more corporate */
.btn-primary,button.btn-primary,.standby-primary-btn,.payments-primary-btn,
button[onclick*="add"]:not(.btn-danger),button[onclick*="Add"]:not(.btn-danger){
  background:#315f7d!important;
  background-image:none!important;
  border-color:#315f7d!important;
  color:#ffffff!important;
  box-shadow:none!important;
}
.btn-primary:hover,button.btn-primary:hover,.standby-primary-btn:hover,.payments-primary-btn:hover,
button[onclick*="add"]:not(.btn-danger):hover,button[onclick*="Add"]:not(.btn-danger):hover{
  background:#274b63!important;
  border-color:#274b63!important;
  transform:none!important;
  box-shadow:none!important;
}
.btn-secondary,button.btn-secondary{
  background:#ffffff!important;
  border-color:#c9d2d9!important;
  color:#404c55!important;
  box-shadow:none!important;
}
.btn-secondary:hover,button.btn-secondary:hover{
  background:#f1f4f6!important;
  border-color:#aeb9c1!important;
  transform:none!important;
}
.btn-success,button.btn-success,.clock-in-btn{
  background:#3f7356!important;
  background-image:none!important;
  border-color:#3f7356!important;
  box-shadow:none!important;
}
.btn-warning,button.btn-warning{
  background:#976a32!important;
  background-image:none!important;
  border-color:#976a32!important;
}
.btn-danger,button.btn-danger,.danger{
  background:#a04444!important;
  background-image:none!important;
  border-color:#a04444!important;
}
.btn-info,button.btn-info{
  background:#3e6b8a!important;
  background-image:none!important;
  border-color:#3e6b8a!important;
}
button{border-radius:7px!important;}

/* Modal language */
.modal,.userm-modal-dialog,.payment-modal,.travel-v19-dialog{
  background:#ffffff!important;
  border-color:#d8e0e5!important;
  box-shadow:0 18px 48px rgb(17 35 48 / .18)!important;
}
.modal h3,.userm-modal-dialog>h3,.payment-modal h3{
  background:#263b49!important;
  background-image:none!important;
  color:#ffffff!important;
  border-bottom:1px solid #344f60!important;
}
.modal h3 i,.userm-modal-dialog>h3 i{color:#9fc1d4!important;}
.modal-buttons{
  background:#f7f9fa!important;
  border-color:#e1e7eb!important;
}

/* Status colors — restrained, readable */
.status-badge,.badge,.perm-chip{box-shadow:none!important;}
.status-completed,.status-success,.badge-success{color:#315d46!important;background:#edf5f0!important;border-color:#c7d9ce!important;}
.status-pending,.status-warning,.badge-warning{color:#765324!important;background:#faf3e8!important;border-color:#e3cfad!important;}
.status-cancelled,.status-danger,.badge-danger{color:#853838!important;background:#faeeee!important;border-color:#e4c3c3!important;}

/* Mobile static navigation */
.mobile-bottom-nav,#mobileBottomNav{
  background:#172733!important;
  background-image:none!important;
  border-top:1px solid #2d4352!important;
  box-shadow:0 -4px 16px rgb(12 27 38 / .16)!important;
  backdrop-filter:none!important;
}
.mobile-bottom-nav button,#mobileBottomNav button{
  color:#98aab6!important;
  background:transparent!important;
  box-shadow:none!important;
}
.mobile-bottom-nav button.active,#mobileBottomNav button.active{
  color:#ffffff!important;
}
.mobile-bottom-nav button.active::before,#mobileBottomNav button.active::before{
  background:#78a6c1!important;
  background-image:none!important;
}
#mobileBottomNav .mobile-nav-badge{
  background:#a04444!important;
  border-color:#172733!important;
}

/* PWA hint */
.pwa-install-hint{
  background:#263f50!important;
  background-image:none!important;
  border-color:#426276!important;
  color:#ffffff!important;
  box-shadow:0 10px 28px rgb(12 27 38 / .22)!important;
}

/* Make focus visible for keyboard users */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #78a6c1!important;
  outline-offset:2px!important;
}

/* Keep motion restrained in production */
.card,.kpi-card,button,.user-row{transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease!important;}
.card:hover,.kpi-card:hover,button:hover{transform:none!important;}


/* ==========================================================================
   V100 — AUTHORITATIVE PRODUCTION COLOUR SYSTEM
   This block is intentionally last. It supersedes every historical palette.
   ========================================================================== */
:root{
  --primary:#315f7d!important;
  --primary-dark:#274b63!important;
  --primary-light:#4f7f9c!important;
  --primary-lighter:#9eb5c4!important;
  --primary-subtle:#e8f0f5!important;
  --primary-bg:#f3f7fa!important;
  --accent:#315f7d!important;
  --accent-2:#4f7f9c!important;

  --ops-ui-accent:#315f7d!important;
  --ops-ui-accent-hover:#274b63!important;
  --ops-ui-border:#dfe5e9!important;
  --ops-ui-surface:#ffffff!important;
  --ops-ui-soft:#f5f7f9!important;
  --ops-ui-danger:#a04444!important;

  --bg-primary:#ffffff!important;
  --bg-secondary:#f5f7f9!important;
  --bg-tertiary:#eef2f5!important;
  --bg-surface:#ffffff!important;
  --text-primary:#1f2b34!important;
  --text-secondary:#52606b!important;
  --text-muted:#77838d!important;
  --border-color:#dfe5e9!important;
  --border-subtle:#edf1f3!important;
  --border-strong:#c7d0d7!important;
}

/* Absolute app surfaces */
html,body,#mainApp,.content,.ops-unified-page{
  background:#f5f7f9!important;
  color:#1f2b34!important;
}
body.dark-mode,html.dark,html[data-theme="dark"],[data-theme="dark"]{
  background:#f5f7f9!important;color:#1f2b34!important;color-scheme:light!important;
}

/* Header */
.main-header,header.main-header,.app-header,.topbar,.top-bar{
  background:#1f2f3c!important;background-image:none!important;
  color:#fff!important;border-color:#344b5b!important;
}
.main-header *{border-color:#344b5b;}
.main-header .opsflex-brand-name,.main-header .opsflex-brand-subtitle,
.main-header .logo-text,.main-header .header-left,.main-header .header-left *{
  color:#f8fafb!important;
}
.main-header input,#globalSearch{
  background:#2a3e4d!important;color:#f8fafb!important;border-color:#465d6d!important;
}
.main-header input:focus,#globalSearch:focus{
  background:#fff!important;color:#1f2b34!important;border-color:#78a6c1!important;
}

/* Sidebar + Menu button */
.sidebar,#sidebar{
  background:#172733!important;background-image:none!important;border-color:#263c4b!important;
}
.menu-toggle,#sidebar .menu-toggle,.sidebar .menu-toggle{
  background:#203746!important;background-image:none!important;
  color:#ffffff!important;border:1px solid #344f60!important;
  box-shadow:none!important;
}
.menu-toggle:hover,#sidebar .menu-toggle:hover,.sidebar .menu-toggle:hover{
  background:#29495c!important;border-color:#476b80!important;color:#fff!important;
}
.sidebar .menu-buttons button,#sidebar .menu-buttons button{
  background:transparent!important;background-image:none!important;
  color:#c8d4dc!important;border-color:transparent!important;box-shadow:none!important;
}
.sidebar .menu-buttons button:hover,#sidebar .menu-buttons button:hover{
  background:#223b4b!important;color:#fff!important;
}
.sidebar .menu-buttons button.active-menu,#sidebar .menu-buttons button.active-menu{
  background:#2a4b60!important;color:#fff!important;
  border-left-color:#78a6c1!important;
}

/* Universal cards / panels */
.card,.panel,.section-card,.dashboard-card,.stat-card,.kpi-card,.activity-card,
.fleet-primary-surface,.travel-map-card,.travel-panel,.standby-panel,.oneweb-panel,
.payment-card,.report-v39-card,.report-v39-results,.completed-v40-panel,.wo-v41-panel,
.ipm-panel,.logs-panel,.userm-toolbar,#userman .user-row,.user-row{
  background:#ffffff!important;background-image:none!important;
  border-color:#dfe5e9!important;color:#1f2b34!important;
  box-shadow:0 1px 3px rgb(17 35 48 / .07)!important;
}

/* User Management — explicit because historic high-specificity rules survived V99 */
#userman .userm-page-head h2,#userman .user-name,#userman .user-name *,
#userman .user-meta,#userman .user-meta strong{
  color:#1f2b34!important;
}
#userman .userm-page-head p,#userman .user-email,#userman .user-office{
  color:#667682!important;
}
#userman .user-row{
  background:#fff!important;border:1px solid #dfe5e9!important;
}
#userman .user-row:hover{
  background:#fbfcfd!important;border-color:#c9d5dc!important;
  box-shadow:0 3px 10px rgb(17 35 48 / .08)!important;
}
#userman .user-avatar{
  background:#e8f0f5!important;color:#315f7d!important;
  border:1px solid #d5e2ea!important;
}
#userman .role-badge,.role-badge{
  background:#eef2f5!important;color:#43545f!important;
  border:1px solid #d8e0e5!important;
}
#userman .perm-chip,.perm-chip{
  background:#f2f6f8!important;color:#405b6d!important;
  border:1px solid #d9e4ea!important;box-shadow:none!important;
}
#userman .perm-chip.more,.perm-chip.more{
  background:#e8f0f5!important;color:#315f7d!important;border-color:#cadce6!important;
}
#userman .user-mgmt-btn,.user-mgmt-btn{
  background:#ffffff!important;color:#315f7d!important;
  border:1px solid #cfd9df!important;box-shadow:none!important;
}
#userman .user-mgmt-btn:hover,.user-mgmt-btn:hover{
  background:#eaf2f7!important;color:#274b63!important;border-color:#9eb8c8!important;
}
#userman .user-mgmt-btn.danger,.user-mgmt-btn.danger{
  background:#fff!important;color:#a04444!important;border-color:#dfcaca!important;
}
#userman .user-mgmt-btn.danger:hover,.user-mgmt-btn.danger:hover{
  background:#faeeee!important;color:#8c3636!important;border-color:#dcbcbc!important;
}
#userman .userm-toolbar,.userm-toolbar{
  background:#ffffff!important;border:1px solid #dfe5e9!important;
}
#userman .userm-search input,#userman .userm-toolbar select,
.userm-search input,.userm-toolbar select{
  background:#fff!important;color:#1f2b34!important;border-color:#d3dce2!important;
}

/* Page-specific button families */
:is(
 .fleet-add-toggle,.travel-map-action-add,.standby-primary-btn,.oneweb-primary-btn,
 .payments-primary-btn,.ipm-primary-btn,.activities-v47-primary,.report-digest-btn,
 .report-generate-btn,.logs-primary-btn,.userm-primary-btn,.btn-primary,button.btn-primary
){
  background:#315f7d!important;background-image:none!important;
  color:#fff!important;border-color:#315f7d!important;box-shadow:none!important;
}
:is(
 .fleet-add-toggle,.travel-map-action-add,.standby-primary-btn,.oneweb-primary-btn,
 .payments-primary-btn,.ipm-primary-btn,.activities-v47-primary,.report-digest-btn,
 .report-generate-btn,.logs-primary-btn,.userm-primary-btn,.btn-primary,button.btn-primary
):hover{
  background:#274b63!important;border-color:#274b63!important;box-shadow:none!important;
}
:is(
 .fleet-email-action,.travel-map-action-history,.travel-map-action-reset,
 .standby-secondary-btn,.oneweb-secondary-btn,.payments-secondary-btn,.ipm-secondary-btn,
 .activities-v47-secondary,.logs-secondary-btn,.userm-secondary-btn,.btn-secondary,button.btn-secondary
){
  background:#fff!important;color:#4c5c67!important;border-color:#cfd8de!important;
  box-shadow:none!important;
}
:is(
 .fleet-email-action,.travel-map-action-history,.travel-map-action-reset,
 .standby-secondary-btn,.oneweb-secondary-btn,.payments-secondary-btn,.ipm-secondary-btn,
 .activities-v47-secondary,.logs-secondary-btn,.userm-secondary-btn,.btn-secondary,button.btn-secondary
):hover{
  background:#f1f4f6!important;color:#273943!important;border-color:#afbdc6!important;
}

/* Generic icon/action buttons */
td.actions button,.icon-btn,.action-btn,.small-icon-btn{
  background:#fff!important;color:#315f7d!important;border-color:#d2dce2!important;
  box-shadow:none!important;
}
td.actions button:hover,.icon-btn:hover,.action-btn:hover,.small-icon-btn:hover{
  background:#eaf2f7!important;color:#274b63!important;border-color:#a9bfcc!important;
}

/* Tables */
table{background:#fff!important;}
thead,thead tr,thead th,th.table-header{
  background:#2b3f4d!important;background-image:none!important;color:#fff!important;
}
th{color:#fff!important;border-color:#3e5361!important;}
td{color:#404c55!important;border-color:#edf1f3!important;}
tbody tr:nth-child(even){background:#fbfcfd!important;}


/* Forms + dropdowns + permission grids */
input,select,textarea,.permissions-grid,#permsModalGrid{
  background:#fff!important;color:#1f2b34!important;border-color:#cfd8de!important;
}
input::placeholder,textarea::placeholder{color:#8a969f!important;}
input:focus,select:focus,textarea:focus{
  border-color:#4f7f9c!important;box-shadow:0 0 0 3px rgb(49 95 125 / .12)!important;
}
.permissions-grid,#permsModalGrid{
  background:#f7f9fa!important;border-color:#dfe5e9!important;
}
.permissions-grid label,#permsModalGrid label{
  background:#fff!important;color:#465661!important;border-color:#e0e6ea!important;
}
.permissions-grid label:hover,#permsModalGrid label:hover{
  background:#f3f7fa!important;border-color:#cbdbe4!important;
}
.permissions-grid input[type="checkbox"],#permsModalGrid input[type="checkbox"]{
  accent-color:#315f7d!important;
}

/* Office controls */
.ops-office-scope,.v76-office-scope-label,.v77-office-btn,.v77-office-menu{
  background:#fff!important;color:#465661!important;border-color:#d8e0e5!important;
}
.v77-office-option{color:#465661!important;}
.v77-office-option:hover{background:#f3f7fa!important;}
.v77-office-option input{accent-color:#315f7d!important;}

/* Modals */
.modal,.userm-modal-dialog,.fleet-modal-dialog,.travel-modal-dialog,
.oneweb-modal-dialog,.payment-modal-dialog,.ipm-modal-dialog{
  background:#fff!important;color:#1f2b34!important;border-color:#d8e0e5!important;
}
.modal h3,.userm-modal .userm-modal-dialog h3,.fleet-quick-head,.modal-header{
  background:#263b49!important;background-image:none!important;
  color:#fff!important;border-color:#344f60!important;
}
.modal h3 i,.modal-header i{color:#9fc1d4!important;}
.modal-buttons{
  background:#f7f9fa!important;border-color:#e1e7eb!important;
}

/* Toasts / notifications — all semantic states use the same navy surface */
#toast-container{color:#fff!important;}
.toast,.notification,.gtoast{
  background:#20323f!important;background-image:none!important;
  color:#f8fafb!important;border:1px solid #3b5261!important;
  box-shadow:0 10px 28px rgb(9 22 31 / .22)!important;
  backdrop-filter:none!important;
}
.toast.success,.toast-success,.notification.success{
  background:#20323f!important;color:#f8fafb!important;border-left-color:#56866a!important;
}
.toast.error,.toast-error,.notification.error{
  background:#20323f!important;color:#f8fafb!important;border-left-color:#b55a5a!important;
}
.toast.warning,.toast-warning,.notification.warning{
  background:#20323f!important;color:#f8fafb!important;border-left-color:#ad7d43!important;
}
.toast.info,.toast-info,.notification.info{
  background:#20323f!important;color:#f8fafb!important;border-left-color:#5b829c!important;
}
.toast.success::before{color:#7fc092!important;}
.toast.error::before{color:#dc8b8b!important;}
.toast.warning::before{color:#d9ad69!important;}
.toast.info::before{color:#88b7d2!important;}

/* Status semantics stay semantic, but use one restrained family */
.status-badge,.badge{box-shadow:none!important;}
.status-completed,.status-success,.badge-success,.status-done{
  background:#edf5f0!important;color:#315d46!important;border-color:#c7d9ce!important;
}
.status-pending,.status-warning,.badge-warning{
  background:#faf3e8!important;color:#765324!important;border-color:#e3cfad!important;
}
.status-in-progress,.status-progress,.badge-info{
  background:#edf4f8!important;color:#315f7d!important;border-color:#c9dbe6!important;
}
.status-cancelled,.status-danger,.badge-danger{
  background:#faeeee!important;color:#853838!important;border-color:#e4c3c3!important;
}

/* Loading / progress / skeleton */
.auth-loading-screen{
  background:#1f2f3c!important;background-image:none!important;
}
.data-progress-bar,.progress-bar{
  background:#315f7d!important;background-image:none!important;box-shadow:none!important;
}
.skel,.skeleton{
  background:linear-gradient(90deg,#eef3f6 0%,#dfeaf0 50%,#eef3f6 100%)!important;
  background-size:200% 100%!important;
}

/* Mobile static menu */
.mobile-bottom-nav,#mobileBottomNav{
  background:#172733!important;background-image:none!important;
  border-color:#2d4352!important;box-shadow:0 -4px 16px rgb(12 27 38 / .16)!important;
}
.mobile-bottom-nav button,#mobileBottomNav button{
  background:transparent!important;color:#98aab6!important;border-color:transparent!important;
}
.mobile-bottom-nav button.active,#mobileBottomNav button.active{
  background:#203b4c!important;color:#fff!important;
}
.mobile-bottom-nav button.active::before,#mobileBottomNav button.active::before{
  background:#78a6c1!important;background-image:none!important;
}
.mobile-nav-badge,#mobileBottomNav .mobile-nav-badge{
  background:#a04444!important;color:#fff!important;border-color:#172733!important;
}

/* Search/dropdown overlays */
.global-search-container,.search-results,.dropdown-menu,.context-menu{
  background:#fff!important;color:#1f2b34!important;border-color:#d8e0e5!important;
  box-shadow:0 12px 28px rgb(17 35 48 / .14)!important;
}
.global-search-container :is(a,button,.search-result):hover,
.dropdown-menu :is(a,button):hover{
  background:#f3f7fa!important;color:#274b63!important;
}

/* PWA and inline information surfaces */
.pwa-install-hint,.info-banner,.notice-banner{
  background:#263f50!important;background-image:none!important;
  color:#fff!important;border-color:#426276!important;
}

/* No historic green/olive generic UI via currentColor inheritance */
a{color:#315f7d;}
a:hover{color:#274b63;}
::selection{background:#cfe0ea;color:#1f2b34;}


/* ==========================================================================
   V101 — SCREENSHOT-VERIFIED FINAL PALETTE PASS
   ========================================================================== */

:is(#dashboard,#fleet,#travelLog,#standby,#owstock,#payments,#ipManager,#activitiesHub,
#myWorkOrders,#completedActivities,#reports,#logs,#userman) h2 > i{color:#315f7d!important}

/* IP Manager */
#ipManager .ipm-subnet-card{background:#fff!important;color:#1f2b34!important;border-color:#dfe5e9!important;box-shadow:0 1px 3px rgb(17 35 48 / .07)!important}
#ipManager .ipm-subnet-card:hover{background:#f7fafc!important;border-color:#b8cbd7!important;box-shadow:0 3px 10px rgb(17 35 48 / .08)!important;transform:none!important}
#ipManager .ipm-card-icon{background:#e8f0f5!important;color:#315f7d!important;border:1px solid #d5e2ea!important}
#ipManager .ipm-card-copy strong{color:#263945!important}
#ipManager .ipm-card-copy span{color:#71808b!important}
#ipManager .ipm-card-stats{color:#5f7380!important}
#ipManager .ipm-card-arrow{color:#8fa0aa!important}

/* Reporting */
#reports .report-v39-field label,#reports .report-v39-types-head>label{color:#52616d!important}
#reports .report-v39-types-head button{color:#315f7d!important}
#reports .report-v39-types-head button:hover{color:#274b63!important;background:#f3f7fa!important}
#reports .report-v39-chips span{background:#f5f8fa!important;color:#4e606c!important;border-color:#d6e0e6!important}
#reports .report-v39-chips label:hover span{background:#edf4f8!important;color:#315f7d!important;border-color:#bdd1dd!important}
#reports .report-v39-chips input:checked+span{background:#e3eef4!important;color:#274b63!important;border-color:#7fa5bb!important}

/* Completed Activities */
#completedActivities .completed-v40-period>span{color:#657681!important}
#completedActivities .completed-v40-period .chip{background:#fff!important;color:#52616d!important;border-color:#d7e0e5!important}
#completedActivities .completed-v40-period .chip:hover{background:#f1f6f9!important;color:#315f7d!important;border-color:#b8ceda!important}
#completedActivities .completed-v40-period .chip.active{background:#e3eef4!important;color:#274b63!important;border-color:#7fa5bb!important}

/* My Work Orders */
#myWorkOrders .wo-v41-timer{background:#fff!important;border-color:#dfe5e9!important}
#myWorkOrders .wo-v41-timer-icon{background:#e8f0f5!important;color:#315f7d!important;border:1px solid #d5e2ea!important}
#myWorkOrders .wo-v41-timer .time-tracker-display,#myWorkOrders #timerDisplay{color:#263945!important;-webkit-text-fill-color:#263945!important}
#myWorkOrders .wo-v41-timer .time-tracker-status,#myWorkOrders #timerStatus,#myWorkOrders .wo-v41-timer small{color:#687985!important;-webkit-text-fill-color:#687985!important}

/* Payments */
#payments .payment-supplier-card{background:#fff!important;color:#1f2b34!important;border-color:#dfe5e9!important;box-shadow:0 1px 3px rgb(17 35 48 / .07)!important}
#payments .payment-supplier-card:hover{background:#fbfcfd!important;border-color:#b8cbd7!important;box-shadow:0 4px 12px rgb(17 35 48 / .09)!important;transform:none!important}
#payments .payment-supplier-icon{background:#e8f0f5!important;color:#315f7d!important;border:1px solid #d5e2ea!important}
#payments .payment-supplier-card>strong{color:#263945!important}
#payments .payment-supplier-count{color:#647681!important}
#payments .payment-supplier-total{color:#315f7d!important}
#payments .payment-supplier-card>small{color:#7a8993!important}

/* Travel */
#travelLog .travel-map-card,#travelLog .travel-map-toolbar-head{background:#fff!important;border-color:#dfe5e9!important}
#travelLog .travel-map-toolbar-head i{color:#315f7d!important}
#travelLog .travel-map-action{background:#fff!important;color:#315f7d!important;border-color:#cfd9df!important}
#travelLog .travel-map-action:hover{background:#edf4f8!important;color:#274b63!important;border-color:#9eb8c8!important}
#travelLog .travel-marker-active{filter:drop-shadow(0 0 4px rgb(49 95 125 / .40))!important}

/* Fleet */
#fleet .fleet-standby-segment{background:#dceaf2!important;border:1px solid #b6ccd8!important;border-left:3px solid #315f7d!important;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .28)!important}
#fleet .fleet-standby-segment:hover{background:#cddfe9!important;border-color:#9fbac9!important}
#fleet .standby-cell:has(.fleet-standby-segment){background:#f5f9fb!important}

/* Header language control */
.main-header .header-lang{display:inline-flex!important;align-items:center!important;gap:3px!important;padding:3px!important;background:#172733!important;border:1px solid #405868!important;border-radius:8px!important;box-shadow:none!important}
.main-header .header-lang button{min-width:34px!important;height:28px!important;min-height:28px!important;padding:0 9px!important;border:0!important;border-radius:5px!important;background:transparent!important;color:#aebdc7!important;font-size:11px!important;font-weight:750!important;box-shadow:none!important}
.main-header .header-lang button:hover{background:#263f50!important;color:#fff!important}
.main-header .header-lang button.active{background:#315f7d!important;color:#fff!important;box-shadow:none!important}
.login-card .lang-switch,.login-container .lang-switch,.login-page .lang-switch{background:#eef2f5!important;border:1px solid #d3dde3!important;border-radius:8px!important;padding:3px!important}
.login-card .lang-switch button,.login-container .lang-switch button,.login-page .lang-switch button{border-radius:5px!important;color:#62727d!important;background:transparent!important;box-shadow:none!important}
.login-card .lang-switch button.active,.login-container .lang-switch button.active,.login-page .lang-switch button.active{background:#315f7d!important;color:#fff!important}

/* Mobile static nav */
@media(max-width:768px){
  .mobile-bottom-nav,#mobileBottomNav{background:#172733!important;border-top-color:#2d4352!important}
  .mobile-bottom-nav button,#mobileBottomNav button,.mobile-bottom-nav button:visited,#mobileBottomNav button:visited{background:transparent!important;color:#98aab6!important;border-color:transparent!important;box-shadow:none!important}
  .mobile-bottom-nav button:hover,#mobileBottomNav button:hover,.mobile-bottom-nav button:focus,#mobileBottomNav button:focus,.mobile-bottom-nav button:focus-visible,#mobileBottomNav button:focus-visible,.mobile-bottom-nav button:active,#mobileBottomNav button:active{background:#203b4c!important;color:#eaf2f7!important;border-color:transparent!important;box-shadow:none!important}
  .mobile-bottom-nav button.active,#mobileBottomNav button.active,.mobile-bottom-nav button.active:hover,#mobileBottomNav button.active:hover,.mobile-bottom-nav button.active:focus,#mobileBottomNav button.active:focus{background:#29495c!important;color:#fff!important}
  .mobile-bottom-nav button.active::before,#mobileBottomNav button.active::before{background:#78a6c1!important;background-image:none!important}
}

/* Decorative icons only */
:is(.card-icon,.page-icon,.section-icon,.panel-icon,.metric-icon,.ipm-card-icon,.payment-supplier-icon,.wo-v41-timer-icon):not(.status-success):not(.status-warning):not(.status-danger){background:#e8f0f5!important;color:#315f7d!important}


/* ==========================================================================
   V102 — MOBILE NAV + INITIAL LOADER FINAL PALETTE CORRECTION
   ========================================================================== */

/* Mobile static menu: force every browser/touch/scroll/reload state into navy. */
@media (max-width: 768px){
  .mobile-bottom-nav,
  #mobileBottomNav{
    background:#172733!important;
    background-color:#172733!important;
    background-image:none!important;
    border-top:1px solid #2d4352!important;
    box-shadow:0 -2px 10px rgb(12 27 37 / .14)!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  .mobile-bottom-nav button,
  #mobileBottomNav button,
  .mobile-bottom-nav a,
  #mobileBottomNav a{
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    color:#98aab6!important;
    border-color:transparent!important;
    box-shadow:none!important;
    outline:none!important;
    -webkit-tap-highlight-color:transparent!important;
    -webkit-touch-callout:none!important;
  }

  .mobile-bottom-nav button:hover,
  #mobileBottomNav button:hover,
  .mobile-bottom-nav button:focus,
  #mobileBottomNav button:focus,
  .mobile-bottom-nav button:focus-visible,
  #mobileBottomNav button:focus-visible,
  .mobile-bottom-nav button:active,
  #mobileBottomNav button:active,
  .mobile-bottom-nav a:hover,
  #mobileBottomNav a:hover,
  .mobile-bottom-nav a:focus,
  #mobileBottomNav a:focus,
  .mobile-bottom-nav a:focus-visible,
  #mobileBottomNav a:focus-visible,
  .mobile-bottom-nav a:active,
  #mobileBottomNav a:active{
    background:#203b4c!important;
    background-color:#203b4c!important;
    background-image:none!important;
    color:#eaf2f7!important;
    border-color:transparent!important;
    box-shadow:none!important;
    outline:none!important;
  }

  .mobile-bottom-nav button.active,
  #mobileBottomNav button.active,
  .mobile-bottom-nav a.active,
  #mobileBottomNav a.active,
  .mobile-bottom-nav button[aria-current="page"],
  #mobileBottomNav button[aria-current="page"],
  .mobile-bottom-nav a[aria-current="page"],
  #mobileBottomNav a[aria-current="page"]{
    background:#29495c!important;
    background-color:#29495c!important;
    background-image:none!important;
    color:#fff!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }

  .mobile-bottom-nav button.active:hover,
  #mobileBottomNav button.active:hover,
  .mobile-bottom-nav button.active:focus,
  #mobileBottomNav button.active:focus,
  .mobile-bottom-nav button.active:active,
  #mobileBottomNav button.active:active,
  .mobile-bottom-nav a.active:hover,
  #mobileBottomNav a.active:hover,
  .mobile-bottom-nav a.active:focus,
  #mobileBottomNav a.active:focus,
  .mobile-bottom-nav a.active:active,
  #mobileBottomNav a.active:active{
    background:#29495c!important;
    background-color:#29495c!important;
    background-image:none!important;
    color:#fff!important;
  }

  .mobile-bottom-nav button::before,
  #mobileBottomNav button::before,
  .mobile-bottom-nav a::before,
  #mobileBottomNav a::before{
    background:transparent!important;
    background-image:none!important;
  }

  .mobile-bottom-nav button.active::before,
  #mobileBottomNav button.active::before,
  .mobile-bottom-nav a.active::before,
  #mobileBottomNav a.active::before,
  .mobile-bottom-nav [aria-current="page"]::before,
  #mobileBottomNav [aria-current="page"]::before{
    background:#78a6c1!important;
    background-color:#78a6c1!important;
    background-image:none!important;
  }

  .mobile-bottom-nav :is(i,svg),
  #mobileBottomNav :is(i,svg){
    color:inherit!important;
    fill:currentColor;
  }

  /* Touch devices should not retain a desktop hover colour while scrolling. */
  @media (hover:none), (pointer:coarse){
    .mobile-bottom-nav button:hover,
    #mobileBottomNav button:hover,
    .mobile-bottom-nav a:hover,
    #mobileBottomNav a:hover{
      background:transparent!important;
      background-color:transparent!important;
      color:#98aab6!important;
    }
    .mobile-bottom-nav button.active:hover,
    #mobileBottomNav button.active:hover,
    .mobile-bottom-nav a.active:hover,
    #mobileBottomNav a.active:hover,
    .mobile-bottom-nav [aria-current="page"]:hover,
    #mobileBottomNav [aria-current="page"]:hover{
      background:#29495c!important;
      background-color:#29495c!important;
      color:#fff!important;
    }
  }
}

/* Initial loading/splash screen: remove the last historic green circles. */
:is(
  #loadingScreen,#loading-screen,.loading-screen,.loading-overlay,.loadingOverlay,
  #appLoader,.app-loader,.initial-loader,.splash-screen,.splash-loader
){
  --loader-accent:#315f7d!important;
  --loader-accent-soft:#78a6c1!important;
}

/* Common loader circle/dot implementations. */
:is(
  #loadingScreen,#loading-screen,.loading-screen,.loading-overlay,.loadingOverlay,
  #appLoader,.app-loader,.initial-loader,.splash-screen,.splash-loader
) :is(
  .spinner,.loader,.loading-spinner,.spinner-circle,.loader-circle,.loading-circle,
  .dot,.loading-dot,.loader-dot,.circle
){
  border-color:#d7e2e9!important;
  border-top-color:#315f7d!important;
  border-right-color:#315f7d!important;
  color:#315f7d!important;
}

/* Animated dot/circle children */
:is(
  #loadingScreen,#loading-screen,.loading-screen,.loading-overlay,.loadingOverlay,
  #appLoader,.app-loader,.initial-loader,.splash-screen,.splash-loader
) :is(
  .spinner,.loader,.loading-spinner,.spinner-circle,.loader-circle,.loading-circle,
  .dots,.loading-dots,.loader-dots
) :is(span,i,div)::before,
:is(
  #loadingScreen,#loading-screen,.loading-screen,.loading-overlay,.loadingOverlay,
  #appLoader,.app-loader,.initial-loader,.splash-screen,.splash-loader
) :is(
  .spinner,.loader,.loading-spinner,.spinner-circle,.loader-circle,.loading-circle,
  .dots,.loading-dots,.loader-dots
) :is(span,i,div)::after{
  background:#315f7d!important;
  border-color:#315f7d!important;
}

/* Broad loader-only protection for direct circle elements. */
:is(
  #loadingScreen,#loading-screen,.loading-screen,.loading-overlay,.loadingOverlay,
  #appLoader,.app-loader,.initial-loader,.splash-screen,.splash-loader
) :is(.dot,.loading-dot,.loader-dot,.circle){
  background:#315f7d!important;
  background-color:#315f7d!important;
  box-shadow:none!important;
}


/* ==========================================================================
   V103 — EXACT MOBILE NAV + AUTH LOADER CORRECTION
   ========================================================================== */
.auth-loading-screen{
  background:#1f2f3c!important;background-color:#1f2f3c!important;background-image:none!important
}
.auth-loading-spinner .spinner-ring{
  border-color:transparent!important;background:transparent!important;box-shadow:none!important
}
.auth-loading-spinner .spinner-ring:nth-child(1){
  border:3px solid transparent!important;border-top-color:#315f7d!important
}
.auth-loading-spinner .spinner-ring:nth-child(2){
  border:3px solid transparent!important;border-right-color:#4f7f9c!important
}
.auth-loading-spinner .spinner-ring:nth-child(3){
  border:3px solid transparent!important;border-bottom-color:#78a6c1!important
}
.auth-loading-text{color:#9eb5c4!important}

@media(max-width:768px){
  #mobileBottomNav.mobile-bottom-nav{
    background:#172733!important;background-color:#172733!important;background-image:none!important;
    border-top-color:#2d4352!important;-webkit-tap-highlight-color:transparent!important
  }
  #mobileBottomNav.mobile-bottom-nav > button{
    background:transparent!important;background-color:transparent!important;background-image:none!important;
    color:#98aab6!important;border-color:transparent!important;outline:none!important;box-shadow:none!important;
    -webkit-tap-highlight-color:transparent!important
  }
  #mobileBottomNav.mobile-bottom-nav > button:hover,
  #mobileBottomNav.mobile-bottom-nav > button:focus,
  #mobileBottomNav.mobile-bottom-nav > button:focus-visible,
  #mobileBottomNav.mobile-bottom-nav > button:active{
    background:#203b4c!important;background-color:#203b4c!important;background-image:none!important;
    color:#eaf2f7!important;border-color:transparent!important;outline:none!important;box-shadow:none!important
  }
  #mobileBottomNav.mobile-bottom-nav > button.active,
  #mobileBottomNav.mobile-bottom-nav > button[aria-current="page"]{
    background:#29495c!important;background-color:#29495c!important;background-image:none!important;
    color:#fff!important;border-color:transparent!important;box-shadow:none!important
  }
  #mobileBottomNav.mobile-bottom-nav > button.active:hover,
  #mobileBottomNav.mobile-bottom-nav > button.active:focus,
  #mobileBottomNav.mobile-bottom-nav > button.active:focus-visible,
  #mobileBottomNav.mobile-bottom-nav > button.active:active,
  #mobileBottomNav.mobile-bottom-nav > button[aria-current="page"]:hover,
  #mobileBottomNav.mobile-bottom-nav > button[aria-current="page"]:focus,
  #mobileBottomNav.mobile-bottom-nav > button[aria-current="page"]:active{
    background:#29495c!important;background-color:#29495c!important;background-image:none!important;color:#fff!important
  }
  #mobileBottomNav.mobile-bottom-nav > button.active::before,
  #mobileBottomNav.mobile-bottom-nav > button[aria-current="page"]::before{
    background:#78a6c1!important;background-color:#78a6c1!important;background-image:none!important
  }
  #mobileBottomNav.mobile-bottom-nav > button i,
  #mobileBottomNav.mobile-bottom-nav > button .mobile-nav-icon-wrap,
  #mobileBottomNav.mobile-bottom-nav > button > span:last-child{color:inherit!important}

  @media(hover:none),(pointer:coarse){
    #mobileBottomNav.mobile-bottom-nav > button:hover:not(.active),
    #mobileBottomNav.mobile-bottom-nav > button:focus:not(.active),
    #mobileBottomNav.mobile-bottom-nav > button:active:not(.active){
      background:transparent!important;background-color:transparent!important;background-image:none!important;color:#98aab6!important
    }
    #mobileBottomNav.mobile-bottom-nav > button.active:hover,
    #mobileBottomNav.mobile-bottom-nav > button.active:focus,
    #mobileBottomNav.mobile-bottom-nav > button.active:active{
      background:#29495c!important;background-color:#29495c!important;color:#fff!important
    }
  }
}


/* ==========================================================================
   V106 — GLOBAL CARD + MODAL PALETTE CONSOLIDATION
   One visual language across Work Orders and all operational modules.
   Semantic status badges keep their muted success/warning/danger meaning.
   ========================================================================== */

/* Work Orders — remove the remaining V41 green/khaki legacy palette. */
#myWorkOrders .wo-v41-panel,
#myWorkOrders .work-orders-cards,
#myWorkOrders .work-order-card,
#myWorkOrders .work-order-card-modern{
  background:#fff!important;color:#1f2b34!important;border-color:#dfe5e9!important;
  box-shadow:0 2px 7px rgb(17 35 48 / .055)!important
}
#myWorkOrders .work-order-card:hover,
#myWorkOrders .work-order-card-modern:hover{
  background:#fff!important;border-color:#b8cbd7!important;
  box-shadow:0 4px 12px rgb(17 35 48 / .08)!important
}
#myWorkOrders .work-order-card-header{
  background:#f3f7fa!important;color:#263945!important;border-bottom-color:#dfe5e9!important
}
#myWorkOrders .work-order-card-ticket,
#myWorkOrders .work-order-card-title{color:#263945!important}
#myWorkOrders .work-order-card-body,
#myWorkOrders .work-order-card-row{background:#fff!important;color:#1f2b34!important;border-color:#edf1f3!important}
#myWorkOrders .work-order-card-label{color:#77838d!important}
#myWorkOrders .work-order-card-value{color:#404c55!important}
#myWorkOrders .work-order-card-value.card-comment{color:#52606b!important}
#myWorkOrders .work-order-card-actions{background:#f7f9fa!important;border-color:#e1e7eb!important}
#myWorkOrders .work-order-card-actions button{
  background:#fff!important;color:#315f7d!important;border-color:#cfd9df!important;box-shadow:none!important
}
#myWorkOrders .work-order-card-actions button i{color:#4f7f9c!important}
#myWorkOrders .work-order-card-actions button:hover{
  background:#eaf2f7!important;color:#274b63!important;border-color:#9eb8c8!important
}
#myWorkOrders .work-order-card-actions button.active{
  background:#315f7d!important;color:#fff!important;border-color:#315f7d!important
}
#myWorkOrders .work-order-card-actions button.active i{color:#fff!important}
#myWorkOrders .wo-v41-panel-head{background:#fff!important;border-color:#dfe5e9!important}
#myWorkOrders .wo-v41-panel-head strong{color:#263945!important}
#myWorkOrders .wo-v41-panel-head span{color:#77838d!important}

/* Shared card surfaces — neutral surface + blue accent system. */
:is(
 .activities-v47-card,.payment-supplier-card,.payment-summary-card,.ipm-subnet-card,.userm-card,
 .fleet-card,.fleet-vehicle-card,.travel-card,.standby-card,.oneweb-card,.report-card,.dashboard-card,
 .summary-card,.metric-card,.stat-card,.kpi-card,.info-card,.settings-card,.message-card,.log-card
){
  background:#fff!important;background-image:none!important;color:#1f2b34!important;
  border-color:#dfe5e9!important;box-shadow:0 2px 7px rgb(17 35 48 / .055)!important
}
:is(
 .activities-v47-card,.payment-supplier-card,.ipm-subnet-card,.userm-card,
 .fleet-card,.fleet-vehicle-card,.travel-card,.standby-card,.oneweb-card,.report-card
):hover{
  background:#fbfcfd!important;border-color:#b8cbd7!important;box-shadow:0 4px 12px rgb(17 35 48 / .08)!important
}

/* Every modal family uses the same V103/V105 palette. */
:is(
 .modal,.modal-content,.modal-dialog,.userm-modal-dialog,.fleet-modal-dialog,.travel-modal-dialog,
 .travel-edit-dialog,.oneweb-modal-dialog,.payment-modal-dialog,.ipm-modal-dialog,
 .activities-v47-modal-dialog,.signature-modal-content,.confirm-dialog,.profile-modal-dialog
){
  background:#fff!important;background-image:none!important;color:#1f2b34!important;
  border-color:#d8e0e5!important;box-shadow:0 18px 48px rgb(17 35 48 / .18)!important
}
:is(.modal-header,.fleet-modal-head,.travel-modal-head,.oneweb-modal-head,.payment-modal-head,.ipm-modal-head,
 .activities-v47-modal-head,.userm-modal-head){
  background:#263b49!important;background-image:none!important;color:#fff!important;border-color:#344f60!important
}
:is(.modal-header,.fleet-modal-head,.travel-modal-head,.oneweb-modal-head,.payment-modal-head,.ipm-modal-head,
 .activities-v47-modal-head,.userm-modal-head) :is(h2,h3,h4,strong,span,i){color:#fff!important}
:is(.modal-body,.fleet-modal-body,.travel-modal-body,.oneweb-modal-body,.payment-modal-body,.ipm-modal-body,
 .activities-v47-modal-body,.userm-modal-body){background:#fff!important;color:#1f2b34!important}
:is(.modal-buttons,.modal-footer,.fleet-modal-actions,.travel-modal-actions,.oneweb-modal-actions,.payment-modal-actions,
 .ipm-modal-actions,.activities-v47-modal-actions,.userm-modal-actions){
  background:#f7f9fa!important;border-color:#e1e7eb!important
}
:is(.modal-close,.fleet-modal-close,.travel-modal-close,.oneweb-modal-close,.payment-modal-close,.ipm-modal-close,
 .activities-v47-modal-close,.userm-modal-close){
  background:#fff!important;color:#52606b!important;border-color:#cfd8de!important;box-shadow:none!important
}
:is(.modal-close,.fleet-modal-close,.travel-modal-close,.oneweb-modal-close,.payment-modal-close,.ipm-modal-close,
 .activities-v47-modal-close,.userm-modal-close):hover{
  background:#eaf2f7!important;color:#274b63!important;border-color:#9eb8c8!important;transform:none!important
}

/* Modal fields and secondary controls: eliminate old green/brown focus states. */
:is(.modal,.modal-dialog,.modal-content,.fleet-modal-dialog,.travel-modal-dialog,.travel-edit-dialog,
 .oneweb-modal-dialog,.payment-modal-dialog,.ipm-modal-dialog,.activities-v47-modal-dialog,.userm-modal-dialog)
 :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  background:#fff!important;color:#1f2b34!important;border-color:#cfd8de!important;box-shadow:none!important
}
:is(.modal,.modal-dialog,.modal-content,.fleet-modal-dialog,.travel-modal-dialog,.travel-edit-dialog,
 .oneweb-modal-dialog,.payment-modal-dialog,.ipm-modal-dialog,.activities-v47-modal-dialog,.userm-modal-dialog)
 :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{
  border-color:#4f7f9c!important;box-shadow:0 0 0 3px rgb(49 95 125 / .12)!important;outline:0!important
}

/* ==========================================================================\n   V108 — VSAT lifecycle Work Order templates\n   ========================================================================== */
.v108-template-fields{display:flex;flex-direction:column;gap:12px}
.v108-tech-section{background:#fff;border:1px solid #dfe5e9;border-radius:10px;padding:14px}
.v108-tech-section h5{margin:0 0 10px;color:#315f7d;font-size:.84rem;letter-spacing:.02em}
.v108-tech-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.v108-tech-field{display:flex;flex-direction:column;gap:5px}
.v108-tech-field.v108-tech-wide{grid-column:1/-1}
.v108-tech-field label{font-size:.76rem;font-weight:650;color:#52616d}
.v108-tech-field :is(input,select,textarea){width:100%;padding:.66rem .72rem;border:1px solid #cfd8de;border-radius:8px;background:#fff;color:#1f2b34;font-size:.88rem}
.v108-tech-field :is(input,select,textarea):focus{border-color:#4f7f9c;box-shadow:0 0 0 3px rgb(49 95 125 / .12);outline:none}
.v108-tech-field .v108-field-error,.v108-field-error{border-color:#a04444!important;box-shadow:0 0 0 3px rgb(160 68 68 / .10)!important}
.v108-photo-optional{margin-left:5px;font-size:.65rem;font-weight:700;color:#77838d;background:#eef2f5;border:1px solid #d8e0e5;border-radius:999px;padding:2px 6px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:700px){.v108-tech-grid{grid-template-columns:1fr}.v108-tech-field.v108-tech-wide{grid-column:auto}}

/* ==========================================================================
   V109 — modal layout + equipment-driven VSAT evidence
   ========================================================================== */


.v108-tech-section{border-radius:9px!important;padding:13px!important;background:#f9fbfc!important;border-color:#dbe4e9!important}
.v108-tech-section h5{font-size:.82rem!important;margin-bottom:10px!important}
/* Settings page */
.settings-v129-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.settings-v129-head h2{margin:0;display:flex;align-items:center;gap:8px}
.settings-v129-head p{margin:3px 0 0;color:var(--text-muted)}
.settings-v129-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settings-v129-card{background:var(--card-bg,#fff);border:1px solid var(--border,#dfe5e9);border-radius:9px;overflow:hidden}
.settings-v129-card-head{display:flex;gap:10px;align-items:flex-start;padding:14px;border-bottom:1px solid var(--border,#dfe5e9)}
.settings-v129-card-head>i{width:32px;height:32px;display:grid;place-items:center;border-radius:7px;background:#e8f0f5;color:#315f7d}
.settings-v129-card-head h3{margin:0;font-size:14px;color:#203442}
.settings-v129-card-head p{margin:3px 0 0;font-size:11px;color:#71808a}
.settings-v129-fields{padding:14px;display:grid;gap:12px}
.settings-v129-fields label{display:grid;gap:5px;font-size:11px;font-weight:700;color:#42515c}
.settings-v129-fields input,.settings-v129-fields textarea{width:100%;box-sizing:border-box;border:1px solid #d5dde2;border-radius:7px;background:#fff;color:#203442;padding:9px 10px;font:inherit;font-weight:500}
.settings-v129-fields textarea{resize:vertical;min-height:76px}
.settings-v129-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:12px}
#settingsEmailStatus{font-size:11px;color:#52606b}
.settings-v129-save{display:inline-flex!important;align-items:center;gap:7px}
@media(max-width:700px){.settings-v129-grid{grid-template-columns:1fr}.settings-v129-actions{position:static}.settings-v129-card-head,.settings-v129-fields{padding:12px}}

/* User Manager permission cards */
#permsModalGrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px!important;
}
#permsModalGrid .ops-permission-card{
  position:relative;display:flex!important;align-items:center;gap:9px;
  min-height:42px;padding:8px 10px!important;margin:0!important;
  border:1px solid #d6e0e6;border-radius:7px;background:#fff;
  color:#334957;cursor:pointer;box-sizing:border-box;
}
#permsModalGrid .ops-permission-card:hover{border-color:#9eb5c4;background:#f7fafc}
#permsModalGrid .ops-permission-card.is-selected{border-color:#315f7d;background:#edf4f8;color:#203b4d}
#permsModalGrid .ops-permission-card input{position:absolute;opacity:0;pointer-events:none}
#permsModalGrid .ops-permission-card-icon{width:22px;text-align:center;color:#52748a}
#permsModalGrid .ops-permission-card-label{font-size:11px;font-weight:700;line-height:1.2}
#permsModalGrid .ops-permission-card-check{margin-left:auto;width:18px;height:18px;border:1px solid #c9d5dc;border-radius:50%;display:grid;place-items:center;font-size:8px;color:transparent;background:#fff}
#permsModalGrid .ops-permission-card.is-selected .ops-permission-card-check{background:#315f7d;border-color:#315f7d;color:#fff}
@media(max-width:600px){#permsModalGrid{grid-template-columns:1fr}}

/* Settings primary action */
.settings-v129-actions .settings-v132-save{
  width:auto!important;
  min-width:112px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border-radius:6px!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1!important;
}
.settings-v129-actions .settings-v132-save i{font-size:11px!important;margin:0!important}

/* Settings header icon uses the current OPS Suite accent. */
#settings .settings-v129-head h2 .ops-page-icon{
  color:#315f7d!important;
}

/* User creation/edit permission grids share the same responsive layout. */
#newUserPermsGrid,
#editUserPermsGrid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem;
  font-size:.85rem;
}
@media(max-width:700px){
  #newUserPermsGrid,
  #editUserPermsGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:430px){
  #newUserPermsGrid,
  #editUserPermsGrid{grid-template-columns:1fr;}
}


/* V139 — canonical Radio searchable select + Work Order equipment editor.
   This replaces V136–V138 override layers at the root instead of stacking patches. */

/* Searchable POP / Sector select */
.v139-search-field{min-width:0}
.v139-search-select{position:relative;width:100%;min-width:0}
.v139-search-trigger{
  width:100%;height:38px;box-sizing:border-box;padding:0 10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid #cbd6dc;border-radius:6px;background:#fff;color:#253c4a;
  font:inherit;font-size:11px;text-align:left;cursor:pointer
}
.v139-search-trigger span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v139-search-trigger i{flex:0 0 auto;font-size:9px;color:#607581;transition:transform .15s ease}
.v139-search-select.open .v139-search-trigger{border-color:#315f7d;box-shadow:0 0 0 2px rgba(49,95,125,.08)}
.v139-search-select.open .v139-search-trigger i{transform:rotate(180deg)}
.v139-search-menu{
  display:none;position:absolute;z-index:1400;top:calc(100% + 4px);left:0;
  width:max(100%,220px);max-width:min(320px,calc(100vw - 32px));
  padding:6px;box-sizing:border-box;background:#fff;border:1px solid #cbd6dc;border-radius:7px;
  box-shadow:0 10px 24px rgba(24,45,58,.15)
}
.v139-search-select.open .v139-search-menu{display:block}
.v139-search-box{margin:0 0 5px}
.v139-search-box input{
  width:100%!important;height:34px!important;min-height:34px!important;box-sizing:border-box!important;
  padding:0 9px!important;border:1px solid #cbd6dc!important;border-radius:5px!important;
  background:#fff!important;color:#253c4a!important;font-size:11px!important
}
.v139-search-options{
  display:block!important;max-height:210px;overflow-y:auto;overflow-x:hidden;padding:0;margin:0
}
.v139-search-option{
  display:block!important;width:100%!important;min-width:0!important;height:auto!important;min-height:30px!important;
  margin:0!important;padding:7px 9px!important;box-sizing:border-box!important;border:0!important;border-radius:4px!important;
  background:#fff!important;color:#253c4a!important;font-size:11px!important;font-weight:500!important;
  line-height:1.25!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  cursor:pointer!important
}
.v139-search-option:hover,.v139-search-option:focus{background:#edf4f8!important;color:#244f6b!important;outline:0!important}
.v139-search-option[hidden]{display:none!important}
.v139-search-empty{padding:9px;color:#71808b;font-size:10px;text-align:center}


/* V140 — canonical shared equipment/material editor.
   This is the ONLY layout definition for the shared Work Order equipment component. */
.v109-equipment-section,.v109-equipment-list,.v109-equipment-row,.v109-equipment-main{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
.v109-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.v109-section-head>div{min-width:0;flex:1 1 auto}
.v109-section-head h5{margin:0 0 3px!important}
.v109-section-head p{margin:0;color:#71808b;font-size:.72rem;line-height:1.4;max-width:500px}
.v109-add-equipment{flex:0 0 auto!important;width:auto!important;height:34px!important;min-height:34px!important;padding:0 12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;background:#315f7d!important;color:#fff!important;border:1px solid #315f7d!important;border-radius:6px!important;font-size:11px!important;font-weight:700!important;white-space:nowrap!important}
.v109-equipment-list{display:flex;flex-direction:column;gap:9px}
.v109-equipment-empty{text-align:center;padding:14px;border:1px dashed #cad5dc;border-radius:8px;color:#7a8993;font-size:.78rem;background:#fff}
.v109-equipment-row{background:#fff;border:1px solid #d8e1e6;border-radius:8px;padding:10px;overflow:hidden}
.v109-equipment-main{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(0,1.15fr) minmax(0,1.25fr) minmax(58px,.55fr) 38px;grid-template-areas:
  "item action serial qty delete";gap:6px;align-items:end}
.v109-component-field{grid-area:item}.v109-action-field{grid-area:action}.v109-serial-field{grid-area:serial}.v109-qty-field{grid-area:qty}.v109-remove-equipment{grid-area:delete}
.v109-mini-field{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:100%}
.v109-mini-field label{font-size:.68rem!important;color:#657681!important;font-weight:700!important;line-height:1.15}
.v109-mini-field :is(input,select){display:block;width:100%!important;max-width:100%!important;height:38px!important;min-height:38px!important;box-sizing:border-box!important;padding:6px 7px!important;font-size:.70rem!important}
.v109-remove-equipment{
  grid-area:delete;
  justify-self:end;
  align-self:end;
  width:38px;
  height:38px;
  margin:0;
  padding:0;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#a04444;
  border:1px solid #dfcaca;
  border-radius:7px;
  overflow:hidden;
}
.v109-remove-equipment:hover{background:#faeeee!important}
.v109-notes-field{margin-top:8px;width:100%;max-width:100%;box-sizing:border-box}
.v109-notes-field input{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
#unifiedActivityTargetTechnologyRow[hidden]{display:none!important}

/* V142 — equipment editor intrinsic sizing.
   The shared grid owns widths; controls are not allowed to expand their cells. */
.v109-equipment-main > *{min-width:0;max-width:100%;box-sizing:border-box}
.v109-qty-field{min-width:0}
.v109-qty-field input{min-width:0!important}
.v109-remove-equipment i{margin:0;padding:0;pointer-events:none}

/* V157 — canonical global field timer. No inline visual overrides. */
#globalTimerChip.ops-global-timer{
  position:fixed!important;right:14px!important;bottom:14px!important;z-index:9998!important;
  min-height:46px!important;max-width:min(620px,calc(100vw - 28px))!important;
  padding:6px 7px 6px 13px!important;box-sizing:border-box!important;
  display:none;align-items:center!important;gap:9px!important;
  border:1px solid #b9cad5!important;border-radius:10px!important;
  background:#fff!important;color:#263b49!important;
  box-shadow:0 8px 24px rgba(31,59,76,.16)!important;
  backdrop-filter:none!important;font-size:12px!important;font-weight:600!important;
  cursor:pointer!important;user-select:none!important
}
#globalTimerChip.ops-global-timer>i{color:#315f7d!important;font-size:13px!important;flex:0 0 auto}
#globalTimerChip .ops-global-timer-time{
  color:#203442!important;font-size:14px!important;font-weight:800!important;
  font-variant-numeric:tabular-nums!important;letter-spacing:.02em!important;white-space:nowrap!important
}
#globalTimerChip .ops-global-timer-divider{width:1px;height:18px;background:#d7e0e5;flex:0 0 auto}
#globalTimerChip .ops-global-timer-ticket{
  min-width:0!important;max-width:300px!important;overflow:hidden!important;text-overflow:ellipsis!important;
  white-space:nowrap!important;color:#526672!important;font-size:11px!important;font-weight:600!important;opacity:1!important
}
#globalTimerChip .ops-global-timer-stop{
  flex:0 0 auto!important;height:32px!important;min-width:54px!important;padding:0 10px!important;
  border:1px solid #315f7d!important;border-radius:6px!important;background:#315f7d!important;color:#fff!important;
  font-size:10px!important;font-weight:800!important;letter-spacing:.02em!important;cursor:pointer!important
}
#globalTimerChip .ops-global-timer-stop:hover{background:#274f69!important;border-color:#274f69!important}
@media(max-width:700px){
  #globalTimerChip.ops-global-timer{
    left:10px!important;right:10px!important;bottom:calc(var(--mobile-nav-height,60px) + 10px + env(safe-area-inset-bottom))!important;
    max-width:none!important;min-height:44px!important
  }
  #globalTimerChip .ops-global-timer-ticket{flex:1 1 auto!important;max-width:none!important}
}

/* V157 — editable Settings operational catalogues. */
.settings-v157-wide{grid-column:1/-1}
.settings-v157-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 8px;font-size:11px;font-weight:800;color:#42515c}
.settings-v157-add{height:34px!important;min-height:34px!important;width:auto!important;padding:0 12px!important;font-size:11px!important}
.settings-v157-list{padding:0 14px 14px;display:grid;gap:8px}
.settings-v157-row,.settings-v157-sector{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:7px;align-items:center}
.settings-v157-row input,.settings-v157-sector input{
  width:100%;height:36px;box-sizing:border-box;border:1px solid #d5dde2;border-radius:7px;background:#fff;color:#203442;padding:0 10px;font-size:11px;font-weight:600
}
.settings-v157-delete{width:38px;height:36px;display:grid;place-items:center;border:1px solid #dfcaca;border-radius:7px;background:#fff;color:#a04444;cursor:pointer}
.settings-v157-delete:hover{background:#faeeee}
.settings-v157-pop{border:1px solid #dbe4e9;border-radius:8px;padding:9px;background:#fbfcfd}
.settings-v157-sector-wrap{margin:8px 0 0 18px;padding-left:10px;border-left:2px solid #dbe4e9;display:grid;gap:6px}
.settings-v157-sector-add{justify-self:start;height:30px;padding:0 10px;border:1px solid #b8cbd7;border-radius:6px;background:#fff;color:#315f7d;font-size:10px;font-weight:700;cursor:pointer}
.settings-v157-empty{padding:12px;border:1px dashed #cbd6dc;border-radius:7px;color:#71808b;font-size:11px;text-align:center}
@media(max-width:700px){
 .settings-v157-list-head{align-items:flex-start}
 .settings-v157-sector-wrap{margin-left:7px;padding-left:7px}
}

/* ==========================================================================
   V158 — GLOBAL FEEDBACK OVERLAY
   Notifications are application-level feedback and must remain legible while
   a Work Order or any other modal is open. Keep this layer above modal/backdrop.
   ========================================================================== */
:root{--ops-feedback-z:2147483000}
#toastContainer,
#toast-container,
.toast-container,
.ops-toast-container,
.notification-container,
.notifications-container,
.toast,
.ops-toast,
.notification,
.app-notification,
.alert-notification{
  z-index:var(--ops-feedback-z)!important;
}
#toastContainer,
#toast-container,
.toast-container,
.ops-toast-container,
.notification-container,
.notifications-container{
  position:fixed!important;
  isolation:isolate!important;
  pointer-events:none!important;
}
#toastContainer>*,
#toast-container>*,
.toast-container>*,
.ops-toast-container>*,
.notification-container>*,
.notifications-container>*{
  pointer-events:auto!important;
}
/* A toast itself must never inherit modal blur/filter effects. */
.toast,.ops-toast,.notification,.app-notification,.alert-notification{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* V159 Settings catalogues: compact cards + dedicated editors */
.settings-v157-list{display:none!important}
.settings-v157-list-head{padding:14px!important}
.ops-catalog-modal-backdrop{position:fixed;inset:0;z-index:2147481000;background:rgba(18,31,39,.52);display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box}
.ops-catalog-modal{width:min(720px,100%);max-height:calc(100vh - 36px);background:#fff;border:1px solid #d3dee5;border-radius:12px;box-shadow:0 20px 60px rgba(18,31,39,.28);display:flex;flex-direction:column;overflow:hidden;color:#203442}
.ops-catalog-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #dce5ea}
.ops-catalog-modal-title{display:flex;align-items:center;gap:9px}.ops-catalog-modal-title i{color:#315f7d}.ops-catalog-modal-title h3{margin:0;font-size:14px}.ops-catalog-modal-title p{margin:2px 0 0;color:#70808b;font-size:10px}
.ops-catalog-modal-close{width:32px;height:32px;border:1px solid #d2dde3;border-radius:7px;background:#fff;color:#526672}
.ops-catalog-modal-toolbar{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid #e1e8ec}.ops-catalog-modal-search{flex:1;height:36px;border:1px solid #cbd8df;border-radius:7px;padding:0 11px;font-size:11px}
.ops-catalog-modal-body{padding:12px 16px;overflow:auto;display:grid;gap:8px}.ops-catalog-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:11px 16px;border-top:1px solid #dce5ea;background:#fbfcfd}
.ops-catalog-entry{border:1px solid #dbe4e9;border-radius:8px;padding:9px}.ops-catalog-row{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:7px;align-items:center}.ops-catalog-row input{width:100%;height:36px;box-sizing:border-box;border:1px solid #cfdbe2;border-radius:7px;padding:0 10px;font-size:11px;font-weight:600}
.ops-catalog-delete{width:36px;height:36px;border:1px solid #e3caca;border-radius:7px;background:#fff;color:#a04444}.ops-catalog-sectors{margin:8px 0 0 16px;padding-left:10px;border-left:2px solid #dce6eb;display:grid;gap:6px}.ops-catalog-empty{padding:24px;text-align:center;color:#72828d;border:1px dashed #cbd8df;border-radius:8px;font-size:11px}
@media(max-width:700px){.ops-catalog-modal-backdrop{padding:8px;align-items:flex-end}.ops-catalog-modal{max-height:92vh;border-radius:12px 12px 0 0}.ops-catalog-modal-toolbar{flex-wrap:wrap}.ops-catalog-modal-toolbar .ops-modal-primary{width:100%!important}}

/* V161 — User Manager Activity Scope */
.userm-activity-scope{margin-top:10px}
.userm-activity-scope label{display:flex;align-items:center;gap:7px}
.userm-activity-scope label i{color:#315f7d}
.userm-activity-scope small{display:block;margin-top:5px;color:#71808b;font-size:10px;line-height:1.35}

/* V164 — B2C Centralities */
.ops-centrality-row{grid-template-columns:minmax(0,1.4fr) minmax(150px,.7fr) auto!important}
.ops-centrality-row select{min-width:0;width:100%}
.settings-centrality-summary span{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%}
.settings-centrality-summary small{font-size:11px;color:#71808b;font-weight:600}
.ops-field-hint{display:block;margin-top:5px;color:#71808b;font-size:10px;line-height:1.35}
@media(max-width:700px){
 .ops-centrality-row{grid-template-columns:1fr auto!important}
 .ops-centrality-row select{grid-column:1/2}
}