body {
    margin: 0;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    padding: 136px 20px 20px;
    color: #d6e4ef;
    background:
        radial-gradient(circle at 12% 0%, rgba(18, 115, 153, 0.35) 0%, rgba(18, 115, 153, 0) 40%),
        radial-gradient(circle at 92% 12%, rgba(218, 149, 32, 0.18) 0%, rgba(218, 149, 32, 0) 32%),
        #0d1117;
}

h1, h2, h3, h4, h5, h6,
p,
label,
li,
dt,
dd,
th,
td {
    color: inherit;
}

a {
    color: #9fd3f0;
}

a:hover {
    color: #c4e6fa;
}

body.auth-locked {
    overflow: hidden;
    padding-top: 0;
}

body.auth-locked #globalTopBar,
body.auth-locked #globalNavBar,
body.auth-locked .app-view {
    display: none !important;
}

.auth-gate {
    position: fixed;
    inset: 0;
    display: none;
    /* flex-start + margin:auto on the card centers it when it fits and scrolls cleanly when it
       does not. align-items:center would clip the top of an overflowing card instead. */
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 0%, rgba(47, 105, 140, 0.42) 0%, rgba(47, 105, 140, 0) 34%),
        radial-gradient(circle at 90% 15%, rgba(201, 140, 44, 0.2) 0%, rgba(201, 140, 44, 0) 28%),
        rgba(8, 12, 18, 0.96);
    z-index: 2500;
}

.auth-gate.active {
    display: flex;
}

.beta-notice-gate {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px;
    background:
        radial-gradient(circle at 12% 0%, rgba(153, 95, 18, 0.35) 0%, rgba(153, 95, 18, 0) 38%),
        radial-gradient(circle at 90% 16%, rgba(30, 102, 133, 0.26) 0%, rgba(30, 102, 133, 0) 30%),
        rgba(8, 12, 18, 0.97);
    z-index: 2600;
}

.beta-notice-gate.active {
    display: flex;
}

.beta-notice-card {
    width: min(100%, 760px);
    margin: auto;
    border: 1px solid #5a4422;
    border-radius: 18px;
    padding: 28px;
    background: linear-gradient(180deg, rgba(30, 24, 15, 0.98) 0%, rgba(19, 16, 11, 0.98) 100%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}

.beta-notice-eyebrow {
    margin: 0;
    color: #f6c27a;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.beta-notice-card h2 {
    margin: 10px 0 0;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.25rem, 1.2vw + 1rem, 1.8rem);
    color: #fff2de;
}

.beta-notice-alert {
    margin: 14px 0 0;
    border: 1px solid #8a6430;
    border-radius: 10px;
    padding: 12px;
    color: #ffdba9;
    background: rgba(98, 66, 16, 0.35);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.beta-notice-copy {
    margin: 14px 0 0;
    color: #f4dbc0;
    font-size: 1rem;
    line-height: 1.5;
}

.beta-notice-copy strong {
    color: #fff0d8;
}

.beta-notice-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

#betaNoticeAcknowledgeButton {
    min-width: 220px;
    border: 1px solid #f0b35e;
    background: linear-gradient(180deg, #ce8c32 0%, #9f6620 100%);
    color: #fff7eb;
    font-weight: 700;
}

#betaNoticeAcknowledgeButton:hover {
    filter: brightness(1.06);
}

.auth-card {
    width: min(100%, 560px);
    /* Auto margins center the card in the scrollable gate without clipping when it overflows. */
    margin: auto;
    border: 1px solid #29465e;
    border-radius: 20px;
    padding: 28px;
    background: linear-gradient(180deg, rgba(17, 24, 32, 0.98) 0%, rgba(11, 16, 22, 0.98) 100%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
    text-align: center;
}

.auth-card h1 {
    margin: 10px 0 0;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.4rem, 1.8vw + 1rem, 2.2rem);
}

.auth-card p {
    margin: 10px 0 0;
    color: #9db4c8;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
}

.auth-brand img {
    height: 112px;
    width: auto;
    object-fit: contain;
}

.auth-stage {
    margin-top: 22px;
}

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

.auth-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #d6e4ef;
}

.auth-field input,
.auth-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #355066;
    background: #0e141b;
    color: #e6edf3;
}

.auth-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.auth-status {
    margin-top: 12px;
    min-height: 1.25rem;
    color: #ffd98d;
    font-weight: 600;
}

.auth-small-note {
    margin-top: 12px;
    color: #8ea3b4;
    font-size: 0.92rem;
}

.auth-footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #223a4e;
    color: #9db4c8;
    font-size: 0.92rem;
    line-height: 1.5;
}

.auth-footer-row {
    margin-top: 6px;
}

.auth-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 18px;
    margin-top: 14px;
}

.auth-legal-links a {
    color: #9fc6ee;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
}

.auth-legal-links a:hover,
.auth-legal-links a:focus-visible {
    color: #cfe4fa;
    text-decoration: underline;
}

.auth-footer-copyright {
    margin-top: 12px;
    font-size: 0.82rem;
    color: #7f93a6;
}

/* Reclaim vertical space on phones and short windows so the sign-in card needs less scrolling. */
@media (max-width: 600px), (max-height: 760px) {
    .auth-gate {
        padding: 16px 12px;
    }

    .auth-card {
        padding: 20px;
    }

    .auth-brand img {
        height: 72px;
    }
}

/* Host for Clerk's embedded <SignIn />.
   Clerk sets width:100% on its own root box via runtime CSS that is injected after this
   stylesheet, so it wins any equal-specificity rule we write for the child and flex centering
   on this container has nothing narrower to centre. Instead, shrink the container itself to the
   rendered card's width and centre the container -- this needs no !important and no dependency
   on Clerk's internal class names. */
.auth-clerk-embed {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* Do not let the card's centered text alignment leak into Clerk's form: Clerk centers its
       own heading and left-aligns field labels, and inherited centering breaks that. */
    text-align: left;
}

/* Applied to Clerk's own elements through its appearance.elements API (see
   mountEmbeddedSignIn). Independent backstop for the centering above: auto margins centre in
   both block and flex contexts, so this works whichever way Clerk lays out its root box.
   Deliberately does not set display or width -- Clerk owns its internal stacking. */
.ic-clerk-rootbox {
    margin-left: auto;
    margin-right: auto;
}

.ic-clerk-card {
    margin-left: auto;
    margin-right: auto;
}

.auth-denied-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #7a2c36;
    background: rgba(122, 44, 54, 0.22);
    color: #ffb3bd;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.auth-denied-message {
    margin-top: 14px !important;
    color: #d6e4ef !important;
}

.auth-denied-agencies {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #29465e;
    border-radius: 12px;
    background: rgba(14, 20, 27, 0.7);
}

.auth-denied-agencies-label {
    color: #8ea3b4;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-denied-agency-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.auth-denied-agency-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #355066;
    background: #0e141b;
    color: #e6edf3;
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.auth-denied-agency-link:hover,
.auth-denied-agency-link:focus-visible {
    border-color: #4d7ea8;
    background: #121b25;
}

.auth-denied-agency-link .auth-denied-agency-host {
    color: #8ea3b4;
    font-size: 0.86rem;
    font-weight: 500;
}

/* The top bar is click-through by design; the Clerk menu must opt back in. */
.clerk-user-button-root {
    display: none;
    align-items: center;
    pointer-events: auto;
}

.clerk-user-button-root.is-mounted {
    display: inline-flex;
}

.clerk-user-button-root .ic-clerk-user-button-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.clerk-user-button-root .ic-clerk-user-button-name,
.clerk-user-button-root .ic-clerk-user-button-name * {
    color: #e6edf3 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/*
 * Primary fix: Clerk always emits its own stable, documented class names (cl-userButtonBox,
 * cl-userButtonTrigger, cl-userButtonOuterIdentifier) on every mount regardless of whether a
 * custom `appearance.elements` className was supplied and regardless of SDK version drift in
 * element-key naming. Targeting those directly — instead of only our custom classes — is the
 * reliable way to guarantee the pill background and name color actually apply.
 *
 * cl-userButtonBox is the outer wrapper and cl-userButtonTrigger is the actual button nested
 * inside it, so the pill (border/background/padding) must live on only ONE of them — putting it
 * on both produced a visible "box inside a box" double border. The trigger is the real
 * interactive element, so it gets the pill; the box is reset to a plain transparent wrapper.
 */
#clerkUserButtonRoot .cl-userButtonBox,
#clerkUserButtonRoot.clerk-user-button-root .ic-clerk-user-button-box {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#clerkUserButtonRoot .cl-userButtonTrigger,
#clerkUserButtonRoot.clerk-user-button-root .ic-clerk-user-button-trigger {
    background-color: rgba(22, 40, 58, 0.92) !important;
    background: rgba(22, 40, 58, 0.92) !important;
    border: 1px solid #325b76 !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    box-shadow: none !important;
}

#clerkUserButtonRoot .cl-userButtonTrigger:hover,
#clerkUserButtonRoot .cl-userButtonTrigger:focus,
#clerkUserButtonRoot .cl-userButtonTrigger:focus-visible,
#clerkUserButtonRoot.clerk-user-button-root .ic-clerk-user-button-trigger:hover,
#clerkUserButtonRoot.clerk-user-button-root .ic-clerk-user-button-trigger:focus,
#clerkUserButtonRoot.clerk-user-button-root .ic-clerk-user-button-trigger:focus-visible {
    background-color: rgba(31, 111, 235, 0.28) !important;
    background: rgba(31, 111, 235, 0.28) !important;
    border-color: #4d7ea8 !important;
}

#clerkUserButtonRoot .cl-userButtonOuterIdentifier,
#clerkUserButtonRoot .cl-userButtonOuterIdentifier *,
#clerkUserButtonRoot.clerk-user-button-root .ic-clerk-user-button-name,
#clerkUserButtonRoot.clerk-user-button-root .ic-clerk-user-button-name * {
    color: #e6edf3 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
}

#globalTopBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 124px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 10px 12px;
    align-items: center;
    padding: 4px 18px 8px;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.98) 0%, rgba(13, 17, 23, 0.92) 100%);
    border-bottom: 1px solid #223040;
    z-index: 1400;
    pointer-events: none;
}

#topBrandLogo {
    margin-top: -42px;
}

#globalNavBar {
    margin: 12px 0 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 2px 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
    z-index: 1401;
}

.global-nav-hint {
    color: #9fb5c7;
    font-size: 0.95rem;
    font-weight: 600;
}

.global-auth-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    justify-content: flex-end;
    gap: 10px;
}

#homeButton {
    background: linear-gradient(180deg, #167f9f 0%, #125f78 100%);
    border: 1px solid #2ea6cc;
    color: #f4fbff;
    font-weight: 600;
}

#homeButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#globalLogoutButton {
    /* Hidden until platform.auth.ui.module.js confirms Clerk's own user menu failed to mount.
       Defaulting to visible caused a one-frame flash of this fallback button on every load
       while the async Clerk mount was still in flight. */
    display: none;
    background: #8b949e;
    color: #ffffff;
    border: 1px solid #9aa3ad;
    font-weight: 600;
}

.suite-title-wrap { display: flex; flex-direction: column; line-height: 1; }
.suite-eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #79c6da; }
.suite-title { font-family: 'Orbitron', sans-serif; font-size: 1rem; color: #f2f8ff; letter-spacing: 0.04em; }
.suite-brand-logo {
    height: 315px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    justify-self: start;
    align-self: start;
}

#topBrandLogo,
#authBrandLogo,
#diveBrandLogo,
.suite-brand-logo {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#activeRoleChip {
    border: 1px solid #325b76;
    border-radius: 999px;
    padding: 6px 14px;
    background: rgba(22, 40, 58, 0.88) !important;
    color: #d4e8f6;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    justify-self: end;
    text-align: right;
}

#systemClock {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: #ffd98d;
    letter-spacing: 0.05em;
    white-space: nowrap;
    justify-self: end;
    text-align: right;
    margin-top: -78px;
}

.app-view { display: none; }
.app-view.active { display: block; }

.launchpad-hero {
    margin-bottom: 16px;
    border: 1px solid #2d3c4f;
    border-radius: 12px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(14, 32, 45, 0.94) 0%, rgba(20, 28, 36, 0.94) 100%);
}

.launchpad-hero h1 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.3rem, 1.5vw + 1rem, 2rem);
}

.launchpad-hero p {
    margin: 6px 0 0;
    color: #9eb8cb;
    font-size: 1rem;
}

.launchpad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

#launchpadView.active .launchpad-hero {
    animation: reveal-up 360ms ease-out;
}

.module-tile {
    border: 1px solid #2f4053;
    border-radius: 12px;
    padding: 16px;
    background: linear-gradient(165deg, #1b232c 0%, #121922 100%);
    color: #e6edf3;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 176px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    animation: tile-in 420ms ease-out both;
}

.module-tile:nth-child(1) { animation-delay: 40ms; }
.module-tile:nth-child(2) { animation-delay: 100ms; }
.module-tile:nth-child(3) { animation-delay: 160ms; }
.module-tile:nth-child(4) { animation-delay: 220ms; }

.module-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
    border-color: #4ca3cd;
}

.module-tile .icon {
    font-size: 2rem;
    line-height: 1;
}

.module-tile .title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.module-tile .subtitle {
    margin: 0;
    color: #9aa9b9;
    font-size: 0.95rem;
}

.module-badge {
    margin-top: auto;
    align-self: flex-start;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.85rem;
    border: 1px solid transparent;
    font-weight: 600;
}

.module-badge.available {
    border-color: #2d8f56;
    color: #b7f3c9;
    background: rgba(20, 74, 44, 0.65);
}

.module-badge.coming-soon {
    border-color: #2d8f56;
    color: #b7f3c9;
    background: rgba(20, 74, 44, 0.65);
}

#placeholderView {
    min-height: calc(100vh - 120px);
    display: none;
    align-items: center;
    justify-content: center;
}

#placeholderView.active {
    display: flex;
}

.placeholder-card {
    width: min(680px, 100%);
    border: 1px solid #2f4053;
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    background: linear-gradient(160deg, #151f2a 0%, #10161d 100%);
}

.law-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

#lawModuleView,
#lawModuleView *,
#lawModuleView *::before,
#lawModuleView *::after {
    box-sizing: border-box;
}

.law-home-button {
    border: 1px solid #2f4053;
    border-radius: 14px;
    background: linear-gradient(160deg, #11181f 0%, #0d1319 100%);
    color: #e6edf3;
    padding: 20px 16px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
    min-height: 90px;
}

.law-home-button:hover {
    transform: translateY(-1px);
    border-color: #4ca3cd;
    background: linear-gradient(160deg, #172631 0%, #10181f 100%);
}

.law-home-button.active {
    background: linear-gradient(160deg, #1b5b9f 0%, #0f1f2f 100%);
    border-color: #4ca3cd;
}

.placeholder-logo-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid #2f4053;
    background: rgba(7, 12, 18, 0.85);
}

.placeholder-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

.law-section-card {
    width: 100%;
    border: 1px solid #2f4053;
    border-radius: 14px;
    padding: 28px;
    background: linear-gradient(160deg, #151f2a 0%, #10161d 100%);
    margin-top: 16px;
}

.law-section-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.law-section-card-title-stack {
    flex: 1 1 240px;
    min-width: 0;
    text-align: left;
}

.law-section-card-title-stack h2 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
}

.law-section-card-title-stack p {
    margin: 10px 0 0;
    color: #9fb2c4;
    font-size: 1rem;
}

.law-section-panel {
    margin-top: 24px;
}

.law-plan-actions {
    display: grid;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}

.law-plan-actions label {
    font-weight: 600;
    color: #d1e5f3;
}

.law-plan-actions input[type="file"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #2f4053;
    border-radius: 10px;
    background: #0f161f;
    color: #e6edf3;
}

.law-upload-status {
    color: #9fb2c4;
    font-size: 0.95rem;
}

.law-plan-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    color: #9fb2c4;
    font-size: 0.95rem;
}

.law-plan-last-saved {
    color: #cfe2f1;
    font-weight: 600;
}

.law-plan-textarea {
    width: 100%;
    min-height: 340px;
    padding: 16px;
    border: 1px solid #2f4053;
    border-radius: 14px;
    background: #0b1218;
    color: #e6edf3;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
}

.law-plan-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.law-plan-controls button {
    flex: 1 1 auto;
    min-width: 150px;
}

.law-plan-controls button.secondary {
    background: #334155;
    border-color: #475569;
}

.law-after-action-impact-shell {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.law-after-action-impact-card {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #2f4053;
    border-radius: 12px;
    background: rgba(15, 21, 29, 0.8);
}

.law-after-action-impact-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.law-incident-status-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #2f4053;
    background: #0f2233;
    border-radius: 10px;
}

.law-incident-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #334155;
    color: #f8fafc;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

.law-incident-status-badge.is-live {
    background: #dc2626;
}

.law-incident-status-copy strong {
    display: block;
    margin-bottom: 4px;
}

.law-incident-status-copy p {
    margin: 0;
    color: #9fb2c4;
    font-size: 0.95rem;
}

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

.law-map-shell {
    display: grid;
    grid-template-columns: 320px minmax(320px, 1fr);
    gap: 18px;
    align-items: start;
}

.law-map-sidepanel {
    border: 1px solid #2f4053;
    border-radius: 14px;
    padding: 18px;
    background: linear-gradient(160deg, #111820 0%, #0b1218 100%);
    display: grid;
    gap: 16px;
}

.law-map-pane-header {
    border-bottom: 1px solid #2f4053;
    padding-bottom: 10px;
}

.law-map-pane-header h3 {
    margin: 0;
    font-size: 1rem;
}

.law-map-pane-header p {
    margin: 6px 0 0;
    color: #9fb2c4;
    font-size: 0.92rem;
}

.law-draggable-list {
    display: grid;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.law-draggable-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    border: 1px solid #2d3c4f;
    border-radius: 12px;
    background: #121922;
    color: #e6edf3;
    padding: 8px 10px;
    cursor: grab;
    user-select: none;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    min-height: 54px;
}

.law-draggable-item:active {
    cursor: grabbing;
    transform: scale(0.98);
}

.law-draggable-item:hover {
    border-color: #4ca3cd;
    background: #172631;
}

.law-draggable-item.is-selected,
.law-roster-card.is-selected,
.law-identification-item.is-selected {
    border-color: #4ca3cd;
    background: #142837;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.25);
}

.law-draggable-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, #4ca3cd, #2563eb);
}

.law-draggable-item[data-kind="roster"] .law-draggable-icon {
    background: linear-gradient(135deg, #7dd3fc, #38bdf8);
}

.law-draggable-item[data-kind="inventory"] .law-draggable-icon {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.law-draggable-label {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.15;
}

.law-map-drop-hint {
    color: #9fb2c4;
    font-size: 0.95rem;
    padding: 12px 14px;
    border: 1px dashed #304355;
    border-radius: 12px;
    background: rgba(15, 21, 29, 0.78);
}

.law-map-legend {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #304355;
    border-radius: 12px;
    background: rgba(15, 21, 29, 0.9);
}

.law-map-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #0f161f;
    border: 1px solid #22303e;
    color: #e6edf3;
    font-size: 0.95rem;
}

.law-map-legend-roster span,
.law-map-legend-inventory span {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #9ca3af;
}

.law-map-legend-roster span {
    background: #7dd3fc;
}

.law-map-legend-inventory span {
    background: #fbbf24;
}

.law-map-status[data-tone="success"] {
    color: #b7f3c9;
    border-color: #2d8f56;
}

.law-map-status[data-tone="error"] {
    color: #ffd2d2;
    border-color: #da3633;
}

.law-map-status[data-tone="pending"] {
    color: #ffe4a6;
    border-color: #d29922;
}

.law-map-container {
    display: grid;
    gap: 14px;
}

.law-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.law-map-actions input {
    min-width: 220px;
    flex: 1 1 220px;
    padding: 8px 10px;
    border: 1px solid #2f4053;
    border-radius: 10px;
    background: #0f161f;
    color: #e6edf3;
}

.law-map-actions button {
    flex: 1 1 160px;
    min-width: 140px;
}

.law-map {
    width: 100%;
    min-height: 580px;
    border: 1px solid #2f4053;
    border-radius: 14px;
    overflow: hidden;
    background: #0b1218;
}

.law-map-marker-icon {
    background: transparent;
    border: none;
}

.law-map .leaflet-container {
    background: #0b1218;
}

.law-map-marker-pin {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 86px;
    pointer-events: none;
}

.law-map-marker-bubble {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 112px;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(7, 12, 18, 0.95);
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.law-map-marker-bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid rgba(7, 12, 18, 0.95);
}

.law-map-marker-dot {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #0f172a;
    background: #334155;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.14);
}

.law-map-marker-bubble-roster {
    background: rgba(24, 90, 126, 0.95);
    border-color: #7dd3fc;
}

.law-map-marker-bubble-roster::after {
    border-top-color: rgba(24, 90, 126, 0.95);
}

.law-map-marker-bubble-roster .law-map-marker-dot {
    background: #38bdf8;
}

.law-map-marker-bubble-inventory {
    background: rgba(120, 53, 15, 0.95);
    border-color: #f59e0b;
}

.law-map-marker-bubble-address {
    background: rgba(6, 78, 59, 0.95);
    border-color: #34d399;
}

.law-map-marker-bubble-address::after {
    border-top-color: rgba(6, 78, 59, 0.95);
}

.law-map-marker-bubble-address .law-map-marker-dot {
    background: #34d399;
}

.law-map-marker-bubble-inventory::after {
    border-top-color: rgba(120, 53, 15, 0.95);
}

.law-map-marker-bubble-inventory .law-map-marker-dot {
    background: #f59e0b;
}

.law-map-marker-bubble-selected {
    background: rgba(16, 94, 141, 0.98);
    border-color: #7dd3fc;
    box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.24);
}

.law-map-marker-bubble-selected::after {
    border-top-color: rgba(16, 94, 141, 0.98);
}

.law-map-marker-bubble-selected .law-map-marker-dot {
    background: #22d3ee;
}

.law-identification-list {
    max-height: 220px;
}

.law-identification-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #2d3c4f;
    border-radius: 12px;
    background: #121922;
    color: #e6edf3;
    cursor: pointer;
}

.law-identification-item strong {
    font-size: 0.9rem;
}

.law-identification-item span {
    color: #9fb2c4;
    font-size: 0.8rem;
}

.law-roster-shell {
    display: grid;
    gap: 14px;
}

.law-roster-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.law-roster-toolbar h3 {
    margin: 0 0 4px;
}

.law-roster-toolbar p {
    margin: 0;
    color: #9fb2c4;
    font-size: 0.95rem;
}

.law-roster-editor {
    display: none;
    gap: 12px;
    padding: 14px;
    border: 1px solid #2f4053;
    border-radius: 12px;
    background: rgba(15, 21, 29, 0.78);
}

.law-roster-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.law-field {
    display: grid;
    gap: 6px;
}

.law-field label {
    color: #d1e5f3;
    font-size: 0.9rem;
    font-weight: 600;
}

.law-field input,
.law-field textarea,
.law-field select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #2f4053;
    border-radius: 10px;
    background: #0f161f;
    color: #e6edf3;
}

.law-roster-editor-actions,
.law-roster-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.law-roster-editor-actions button.secondary,
.law-roster-card-actions button.secondary {
    background: #8b949e;
}

.law-roster-list-panel {
    display: grid;
    gap: 10px;
}

.law-roster-card {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #2f4053;
    border-radius: 12px;
    background: rgba(15, 21, 29, 0.8);
}

.law-roster-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.law-roster-card-title strong {
    font-size: 0.98rem;
}

.law-roster-name-button {
    border: none;
    background: transparent;
    color: inherit;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.law-roster-card-meta {
    color: #9fb2c4;
    font-size: 0.9rem;
}

.law-roster-details {
    display: grid;
    gap: 4px;
    margin-top: 4px;
}

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

.law-stat-card {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid #2f4053;
    border-radius: 12px;
    background: rgba(15, 21, 29, 0.8);
}

.law-stat-label {
    color: #9fb2c4;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.law-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #e6edf3;
}

.law-stat-detail {
    color: #9fb2c4;
    font-size: 0.9rem;
}

.law-roster-empty,
.law-inventory-empty {
    padding: 16px;
    border: 1px dashed #2f4053;
    border-radius: 12px;
    color: #9fb2c4;
    background: rgba(15, 21, 29, 0.65);
}

.law-inventory-shell {
    display: grid;
    gap: 14px;
}

.law-inventory-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.law-inventory-tab {
    border: 1px solid #2f4053;
    border-radius: 999px;
    background: #0f161f;
    color: #d1e5f3;
    padding: 8px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.law-inventory-tab.active {
    border-color: #4ca3cd;
    background: #1b5b9f;
}

.law-inventory-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.law-inventory-panel {
    display: none;
    gap: 14px;
}

.law-inventory-panel.active {
    display: grid;
}

.law-inventory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.law-inventory-toolbar h3 {
    margin: 0;
}

.law-inventory-toolbar p {
    margin: 4px 0 0;
    color: #9fb2c4;
    font-size: 0.95rem;
}

.law-inventory-editor {
    display: none;
    gap: 12px;
    padding: 14px;
    border: 1px solid #2f4053;
    border-radius: 12px;
    background: rgba(15, 21, 29, 0.78);
}

.law-inventory-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.law-inline-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d1e5f3;
    font-size: 0.95rem;
}

.law-inventory-card {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #2f4053;
    border-radius: 12px;
    background: rgba(15, 21, 29, 0.8);
}

.law-training-card {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #2f4053;
    border-radius: 12px;
    background: rgba(15, 21, 29, 0.8);
}

.law-inventory-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.law-inventory-card-title strong {
    font-size: 0.98rem;
}

.law-inventory-card-meta {
    color: #9fb2c4;
    font-size: 0.9rem;
}

.law-maintenance-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}

.law-maintenance-status.is-available {
    color: #dffce8;
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.5);
}

.law-maintenance-status.is-due {
    color: #fff1c2;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.5);
}

.law-inventory-dashboard {
    display: grid;
    gap: 16px;
}

.law-inventory-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.law-inventory-subtab {
    border: 1px solid #2f4053;
    border-radius: 999px;
    background: #0f161f;
    color: #d1e5f3;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 0.82rem;
}

.law-inventory-subtab.active {
    background: #1d6c9a;
    border-color: #4ca3cd;
}

.law-priority-alert-strip {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 12px;
    background: rgba(137, 92, 16, 0.12);
}

.law-priority-alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.law-priority-alert-title {
    color: #f7d57a;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.law-priority-alert-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d1e5f3;
    font-size: 0.8rem;
}

.law-priority-alert-sort select {
    min-width: 118px;
    border: 1px solid #2f4053;
    border-radius: 8px;
    background: #0f161f;
    color: #edf7ff;
    padding: 4px 8px;
}

.law-priority-alert-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.law-priority-alert-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.law-priority-alert-filter-group {
    display: inline-flex;
    gap: 8px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(12, 18, 24, 0.8);
    border: 1px solid #2f4053;
}

.law-priority-alert-filter-button {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #d1e5f3;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.law-priority-alert-filter-button.active {
    background: #1d6c9a;
    border-color: #4ca3cd;
}

.law-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #f2f8ff;
    font-size: 0.7rem;
    font-weight: 700;
}

.law-priority-alert-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: #d1e5f3;
    font-size: 0.76rem;
}

.law-priority-alert-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.law-priority-alert-legend-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.law-priority-alert-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(31, 23, 12, 0.5);
    color: #f4f9ff;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.law-priority-alert-item.is-critical {
    border-color: rgba(239, 68, 68, 0.6);
    background: rgba(69, 12, 12, 0.55);
}

.law-priority-alert-item.is-high {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(72, 47, 10, 0.48);
}

.law-priority-alert-item.is-moderate {
    border-color: rgba(59, 130, 246, 0.45);
    background: rgba(17, 30, 58, 0.5);
}

.law-priority-alert-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f7d57a;
    box-shadow: 0 0 8px rgba(247, 213, 122, 0.9);
}

.law-priority-alert-item.is-critical .law-priority-alert-dot {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.9);
}

.law-priority-alert-item.is-high .law-priority-alert-dot {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.9);
}

.law-priority-alert-item.is-moderate .law-priority-alert-dot {
    background: #60a5fa;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.9);
}

.law-priority-alert-text {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.law-inventory-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.law-inventory-summary-card {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid #2f4053;
    border-radius: 12px;
    background: rgba(20, 30, 39, 0.9);
}

.law-inventory-summary-card span {
    color: #9fb2c4;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.law-inventory-summary-card strong {
    color: #f2f8ff;
    font-size: 1.2rem;
}

.law-inventory-dashboard-list {
    display: grid;
    gap: 10px;
}

.law-dashboard {
    width: 100%;
    padding: 0;
    background: linear-gradient(145deg, #151f2a 0%, #10161d 100%);
}

.law-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 360px);
    gap: 28px;
    align-items: end;
    padding: 36px 4px 30px;
    border-bottom: 1px solid #304354;
}

.law-dashboard-eyebrow {
    margin: 0 0 8px;
    color: #e7ad4c;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.law-dashboard-hero h2 {
    margin: 0;
    color: #f4f8fb;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: 2rem;
}

.law-dashboard-hero > div > p:last-child {
    max-width: 720px;
    margin: 12px 0 0;
    color: #aebfcb;
    font-size: 1rem;
    line-height: 1.55;
}

.law-dashboard-status {
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 108px;
    padding: 20px 22px;
    border: 1px solid #385064;
    border-radius: 10px;
    background: #101d27;
}

.law-dashboard-status-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    background: #71808b;
    box-shadow: 0 0 0 5px rgba(113, 128, 139, 0.14);
}

.law-dashboard-status-dot.active {
    background: #e04f4f;
    box-shadow: 0 0 0 5px rgba(224, 79, 79, 0.16);
}

.law-dashboard-status span:not(.law-dashboard-status-dot) {
    display: block;
    color: #8fa5b5;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.law-dashboard-status strong {
    display: block;
    margin-top: 4px;
    color: #f4f8fb;
    font-size: 1.2rem;
}

.law-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 28px 0 8px;
}

.law-dashboard-card {
    display: flex;
    min-width: 0;
    min-height: 280px;
    padding: 30px 32px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    color: #dce8ef;
    border: 1px solid #344c5d;
    border-radius: 12px;
    background: linear-gradient(145deg, #142530 0%, #101a23 100%);
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.law-dashboard-card:hover,
.law-dashboard-card:focus-visible {
    color: #ffffff;
    border-color: #6d96aa;
    background: linear-gradient(145deg, #193140 0%, #13232e 100%);
    transform: translateY(-2px);
}

.law-dashboard-card-primary {
    grid-column: span 2;
    background:
        linear-gradient(100deg, rgba(15, 61, 75, 0.96) 0%, rgba(16, 34, 44, 0.96) 68%),
        #10222c;
    border-color: #4e8294;
}

.law-dashboard-card-kicker {
    color: #e7ad4c;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.law-dashboard-card > strong {
    margin-top: 12px;
    color: #f5f9fb;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: 1.35rem;
}

.law-dashboard-card > strong + span {
    max-width: 640px;
    margin-top: 10px;
    color: #a9bbc7;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

.law-dashboard-card-action {
    margin-top: auto;
    padding-top: 18px;
    color: #9fd3e5;
    font-size: 0.95rem;
    font-weight: 700;
}

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

    .law-dashboard-hero {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 24px;
    }
}

@media (max-width: 680px) {
    .law-dashboard-hero h2 {
        font-size: 1.55rem;
    }

    .law-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .law-dashboard-card {
        min-height: 220px;
        padding: 24px;
    }

    .law-dashboard-card-primary {
        grid-column: auto;
    }
}

.law-map-shell {
    grid-template-columns: 1fr;
}

.placeholder-card h1 {
    margin: 12px 0 8px;
    font-family: 'Orbitron', sans-serif;
}

.placeholder-card p {
    margin: 0 0 20px;
    color: #9fb2c4;
    font-size: 1.02rem;
}

#agencySettingsView {
    max-width: 1100px;
}

.settings-shell {
    border: 1px solid #2f4053;
    border-radius: 14px;
    padding: 18px;
    background: linear-gradient(165deg, #171f28 0%, #10171e 100%);
}

#lawModuleView .settings-shell {
    width: 100%;
    max-width: none;
    padding: 24px;
}

@media (max-width: 720px) {
    #lawModuleView .law-plan-controls button,
    #lawModuleView .law-map-actions input,
    #lawModuleView .law-map-actions button {
        min-width: 0;
    }
}

.settings-shell h1 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
}

.settings-shell p {
    margin: 6px 0 16px;
    color: #a7bccb;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.settings-group {
    border: 1px solid #2d3a49;
    border-radius: 10px;
    padding: 12px;
    background: #121922;
    min-width: 0;
    overflow: hidden;
}

.tenant-user-editor-active {
    border-color: #57c7ff;
    box-shadow: 0 0 0 3px rgba(87, 199, 255, 0.18), 0 12px 28px rgba(0, 0, 0, 0.28);
}

#tenantUserEditor #tenantUserFormBlock {
    display: none;
}

.tenant-user-editor-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 12, 0.72);
    z-index: 1690;
}

body.tenant-user-modal-open {
    overflow: hidden;
}

#tenantUserEditor.tenant-user-editor-modal-active {
    position: fixed;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(1040px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1700;
    border-color: #57c7ff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

#tenantUserEditor.tenant-user-editor-modal-active #tenantUserFormBlock {
    display: block;
}

#tenantUserEditor.tenant-user-editor-modal-active #tenantUserDirectoryBlock {
    display: none;
}

.tenant-user-modal-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #223243;
}

.tenant-user-modal-header h4 {
    margin: 0;
}

.tenant-user-directory-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.settings-subpanel {
    border: 1px solid #26384a;
    border-radius: 10px;
    padding: 12px;
    background: #0f1720;
}

.settings-users-card {
    border-color: #31475c;
    background: linear-gradient(180deg, #131d27 0%, #0f1822 100%);
}

.tenant-user-modal-subtitle {
    margin-top: 4px !important;
    max-width: 60ch;
}

.tenant-user-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: end;
}

.tenant-role-header-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    align-items: end;
}

.settings-permission-block {
    margin-top: 12px;
    border: 1px solid #24374a;
    border-radius: 10px;
    padding: 10px 12px;
    background: rgba(13, 21, 29, 0.78);
}

.settings-check-grid {
    display: grid;
    gap: 8px;
}

.settings-check-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.settings-check-grid-wide {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.settings-law-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.settings-table-wrap {
    margin-top: 10px;
    overflow-x: auto;
    border: 1px solid #26384a;
    border-radius: 10px;
    background: rgba(7, 11, 16, 0.35);
}

.settings-subpanel-spaced {
    margin-top: 12px;
}

.tenant-user-directory-toolbar {
    padding: 10px 12px;
    border: 1px solid #2d4459;
    border-radius: 10px;
    background: rgba(12, 20, 28, 0.85);
}

#settingsPanelUsers .platform-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #162230;
}

#settingsPanelUsers .platform-table tr:hover td {
    background: rgba(31, 111, 235, 0.08);
}

#settingsPanelUsers input[type="text"],
#settingsPanelUsers input[type="email"],
#settingsPanelUsers input[type="number"],
#settingsPanelUsers select {
    border-radius: 9px;
}

@media (max-width: 720px) {
    #tenantUserEditor.tenant-user-editor-modal-active {
        top: 2vh;
        width: min(1000px, 96vw);
        max-height: 94vh;
    }

    .tenant-user-directory-toolbar {
        padding: 10px;
    }
}

.settings-group h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.settings-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.settings-group textarea {
    width: 100%;
    min-height: 132px;
    resize: vertical;
    box-sizing: border-box;
}

.settings-note {
    margin: 10px 0 0;
    color: #8fa3b5;
    font-size: 0.92rem;
}

.settings-inline-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

/* Training > Training Setup tab: the skill and requirement editors moved here
   from Agency Settings. Reuse the settings card/form styles inside the
   training module host so the tab looks identical to the old settings panel. */
.training-settings-shell {
    display: grid;
    gap: 14px;
}

#trainingModuleView .settings-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

#trainingModuleView .settings-list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #2d3a49;
    border-radius: 8px;
    background: #0d151d;
}

#trainingModuleView .settings-list-row .settings-actions {
    margin-top: 0;
}

#trainingModuleView .settings-list-row-disabled {
    opacity: 0.55;
}

.settings-badge-disabled {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid #6b7684;
    background: #232b34;
    color: #aeb9c4;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Certifications & Knowledge Checks editor: optional date toggles and the
   date fields they reveal. Toggle labels should not stretch like the
   date/text inputs around it. */
.roster-compliance-expires-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: end;
    padding-bottom: 10px;
    white-space: nowrap;
}

.roster-compliance-expires-toggle input[type="checkbox"] {
    margin: 0;
}

.roster-compliance-expiry-date[hidden] {
    display: none;
}

.roster-compliance-extra-field[hidden] {
    display: none;
}

.roster-compliance-row-status {
    flex: 1 0 100%;
    min-height: 1.2rem;
    font-size: 0.86rem;
    color: #9fb5c7;
}

.roster-compliance-row-status[data-tone="error"] {
    color: #ffb4b4;
}

.roster-compliance-row-status[data-tone="success"] {
    color: #b7f3c9;
}

[hidden] {
    display: none !important;
}

#platformAdminView {
    max-width: 1100px;
}
.platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}
.platform-table {
    width: 100%;
    border-collapse: collapse;
}
.platform-table th,
.platform-table td {
    border-bottom: 1px solid #2f4053;
    padding: 8px;
    text-align: left;
    font-size: 0.95rem;
}

.settings-chooser {
    border: 1px solid #2f4053;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    background: #101923;
}

.settings-module-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.settings-module-button {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon text"
        "icon cta";
    align-items: center;
    column-gap: 14px;
    text-align: left;
    border: 1px solid #34526a;
    background: linear-gradient(160deg, #182633 0%, #121d27 100%);
    color: #dbeaf6;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.settings-module-button:hover,
.settings-module-button:focus-visible {
    border-color: #4ca3cd;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.settings-module-button.active {
    border-color: #4ca3cd;
    box-shadow: inset 0 0 0 1px rgba(76, 163, 205, 0.4);
}

.settings-module-button-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #2c455b;
    background: #0d151d;
    font-size: 1.35rem;
}

.settings-module-button-text {
    grid-area: text;
    display: block;
    min-width: 0;
}

.settings-module-button-title {
    display: block;
    font-weight: 700;
    font-size: 1.02rem;
    color: #eaf3fb;
}

.settings-module-button-subtitle {
    display: block;
    margin-top: 3px;
    color: #93aabd;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.35;
}

.settings-module-button-cta {
    grid-area: cta;
    margin-top: 8px;
    color: #7cc0e8;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Agency settings page shell ------------------------------------------------------- */

.settings-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid #24374a;
}

.settings-page-heading {
    min-width: 0;
}

.settings-eyebrow {
    margin: 0 !important;
    color: #6f8ba3;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.settings-page .settings-lede {
    margin: 8px 0 0 !important;
    max-width: 68ch;
    color: #a7bccb;
}

.settings-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.settings-button-secondary {
    background: #22303d;
    border: 1px solid #3a5266;
    color: #d6e6f3;
}

.settings-button-secondary:hover {
    background: #2a3b4a;
}

.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 20px;
    padding-bottom: 2px;
}

.settings-tab {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 12px 16px;
    border: 1px solid #2d3f52;
    border-radius: 10px;
    background: #111a23;
    color: #b7cadb;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.settings-tab:hover,
.settings-tab:focus-visible {
    border-color: #4ca3cd;
    background: #16222d;
}

.settings-tab.active {
    border-color: #4ca3cd;
    background: linear-gradient(160deg, #1b2b3a 0%, #14202b 100%);
    color: #eaf3fb;
    box-shadow: inset 0 2px 0 0 #4ca3cd;
}

.settings-tab-title {
    font-weight: 700;
    font-size: 1rem;
}

.settings-tab-hint {
    color: #86a0b6;
    font-size: 0.84rem;
    font-weight: 400;
}

.settings-tab.active .settings-tab-hint {
    color: #9dbdd6;
}

.settings-panel[hidden] {
    display: none;
}

.settings-panel {
    display: grid;
    gap: 14px;
}

.settings-card-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #223243;
}

.settings-card-header h3 {
    margin: 0 0 4px;
}

.settings-card-description {
    margin: 0;
    color: #8fa3b5;
    font-size: 0.92rem;
    line-height: 1.45;
}

.settings-empty-state {
    margin: 14px 0 0;
    padding: 18px;
    border: 1px dashed #3a5266;
    border-radius: 10px;
    background: #0d151d;
    color: #9fb2c4;
    text-align: center;
}

.settings-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid #2f4053;
    border-radius: 12px;
    background: #101923;
}

.settings-editor-toolbar-current {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.settings-editor-toolbar-eyebrow {
    color: #6f8ba3;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.settings-editor-toolbar-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.08rem;
    color: #eaf3fb;
}

.settings-editor-toolbar-switch {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-editor-toolbar-switch label {
    margin: 0 !important;
    color: #8fa3b5;
    font-size: 0.88rem;
    white-space: nowrap;
}

.settings-editor-toolbar-switch select {
    min-width: 200px;
    box-sizing: border-box;
}

.settings-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 14px 16px;
    margin-top: 18px;
    border: 1px solid #2f4053;
    border-radius: 12px;
    background: rgba(13, 21, 29, 0.96);
    backdrop-filter: blur(6px);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 720px) {
    .settings-tab {
        flex: 1 1 100%;
    }

    .settings-editor-toolbar-switch {
        width: 100%;
    }

    .settings-editor-toolbar-switch select {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.settings-section-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.settings-section-button {
    border: 1px solid #335066;
    border-radius: 999px;
    background: #122131;
    color: #d5e8f7;
    padding: 6px 12px;
    font-weight: 600;
}

.settings-section-button.active {
    border-color: #4ca3cd;
    background: #17344b;
}

.settings-section-panel {
    display: none;
}

.logo-preview {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border: 1px solid #324355;
    border-radius: 10px;
    background: #0c1117;
    padding: 6px;
}

.module-tile-visual {
    width: 68px;
    height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #324355;
    border-radius: 14px;
    background: #0c1117;
    padding: 8px;
    margin-bottom: 6px;
}

.module-tile-logo,
.module-inline-logo,
#placeholderLogo {
    object-fit: contain;
}

.module-tile-logo {
    width: 100%;
    height: 100%;
}

.module-inline-logo {
    width: 46px;
    height: 46px;
    border: 1px solid #324355;
    border-radius: 10px;
    background: #0c1117;
    padding: 5px;
}

.placeholder-title-row,
.sar-banner-title-row,
.dive-module-title-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.placeholder-title-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.module-settings-only-dive {
    display: none;
}

.module-settings-only-nondive {
    display: none;
}

#placeholderLogo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border: 1px solid #324355;
    border-radius: 10px;
    background: #0c1117;
    padding: 6px;
    margin: 8px auto 12px;
    display: none;
}

#sarModuleView {
    max-width: 1500px;
}

.sar-banner {
    border: 1px solid #34526a;
    border-radius: 12px;
    padding: 14px;
    background: linear-gradient(140deg, #1a2531 0%, #121c25 100%);
    margin-bottom: 14px;
}

.sar-banner-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.sar-banner-top h2 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.04em;
}

.sar-elapsed {
    font-family: 'Orbitron', sans-serif;
    color: #ffd98d;
    border: 1px solid #8a6a20;
    border-radius: 999px;
    padding: 6px 12px;
    background: rgba(86, 61, 11, 0.35);
}

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

.sar-summary-card {
    border: 1px solid #2c3e4d;
    border-radius: 8px;
    background: #111922;
    padding: 10px;
}

.sar-summary-card .label {
    display: block;
    color: #8fa8bb;
    font-size: 0.82rem;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sar-summary-card .value {
    font-size: 1rem;
    font-weight: 700;
}

.sar-main-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.2fr) minmax(280px, 1fr);
    gap: 14px;
}

.sar-panel {
    border: 1px solid #2f4053;
    border-radius: 12px;
    background: #121922;
    padding: 12px;
}

.sar-panel h3 {
    margin: 0 0 10px;
}

.sar-field {
    margin-bottom: 8px;
}

.sar-field label {
    display: block;
    font-size: 0.82rem;
    color: #9ab0c0;
    margin-bottom: 4px;
}

.sar-field input,
.sar-field textarea,
.sar-field select {
    width: 100%;
    box-sizing: border-box;
}

.sar-personnel-name-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
    text-align: left;
}

.sar-personnel-name-button:hover,
.sar-personnel-name-button:focus-visible {
    color: #dfffe5;
    background: rgba(46, 160, 67, 0.18);
    text-decoration: underline;
    border-radius: 4px;
}

.sar-team-name-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #9dc6ff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
    text-align: left;
}

.sar-team-name-button:hover,
.sar-team-name-button:focus-visible {
    text-decoration: underline;
}

.sar-team-status-time {
    font-size: 0.85rem;
    color: #9db2c1;
    margin-top: 4px;
}

.sar-map-measure-result {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #32485b;
    border-radius: 8px;
    background: #0f1821;
    color: #d6e4ee;
    font-size: 0.9rem;
}

.sar-map-placeholder {
    border: 1px dashed #4a647a;
    border-radius: 10px;
    min-height: 380px;
    background: radial-gradient(circle at 20% 20%, rgba(76, 163, 205, 0.2), transparent 45%), #0e151d;
    padding: 10px;
}

.sar-map-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.sar-grid-overlay {
    display: grid;
    grid-template-columns: repeat(4, minmax(60px, 1fr));
    gap: 8px;
}

.sar-sector {
    border: 1px solid #3f566a;
    border-radius: 6px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #bed3e4;
    background: rgba(18, 30, 41, 0.7);
}

.sar-sector.assigned {
    border-color: #d29922;
    background: rgba(106, 76, 19, 0.48);
    color: #ffe8b4;
}

.sar-list {
    display: grid;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.sar-personnel-list {
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
}

.sar-list-item {
    border: 1px solid #34485a;
    border-radius: 8px;
    padding: 8px;
    background: #0f161f;
}

.sar-team-card {
    border: 1px solid #34485a;
    border-radius: 8px;
    padding: 10px;
    background: #101823;
    margin-bottom: 8px;
}

.sar-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #455d70;
    font-size: 0.8rem;
    margin-left: 6px;
}

.sar-badge.Staged { background: rgba(35, 134, 54, 0.25); border-color: #2d8f56; color: #b7f3c9; }
.sar-badge.Searching { background: rgba(31, 111, 235, 0.24); border-color: #3f7dda; color: #d2e6ff; }
.sar-badge.Resting,
.sar-badge.Debriefing { background: rgba(139, 148, 158, 0.24); border-color: #6e7681; color: #e1e4e8; }

.sar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sar-map-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.sar-map-sections {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.sar-map-section {
    border: 1px solid #34485a;
    border-radius: 10px;
    background: #0f161f;
    padding: 10px;
}

.sar-map-section h4 {
    margin: 0 0 8px;
    color: #dbe8f3;
}

.sar-map-section .sar-map-toolbar {
    margin-bottom: 8px;
}

.sar-map-mini-section {
    border: 1px solid #34485a;
    border-radius: 10px;
    background: #0f161f;
    padding: 10px;
    margin: 10px 0;
}

.sar-map-mini-section h4 {
    margin: 0 0 8px;
    color: #dbe8f3;
}

.sar-map-workspace {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-top: 10px;
}

.sar-map-sidepanel {
    display: grid;
    gap: 10px;
    max-height: min(72vh, 760px);
    overflow-y: auto;
    padding-right: 4px;
}

@media (max-width: 1080px) {
    .sar-map-workspace {
        grid-template-columns: 1fr;
    }

    .sar-map-sidepanel {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

.sar-map-toolbar .sar-field {
    margin-bottom: 0;
}

.sar-map-status {
    border: 1px solid #34485a;
    border-radius: 8px;
    padding: 8px 10px;
    background: #0d141c;
    color: #b9cadd;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.sar-map-container {
    position: relative;
    height: 420px;
    border: 1px solid #34526a;
    border-radius: 10px;
    overflow: hidden;
    background: #0b1117;
}

#sarMap {
    height: 100%;
    width: 100%;
}

.sar-grid-list,
.sar-poi-list {
    display: grid;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.sar-grid-card,
.sar-poi-card {
    border: 1px solid #34485a;
    border-radius: 8px;
    padding: 8px;
    background: #0f161f;
}

.sar-grid-card .meta,
.sar-poi-card .meta {
    font-size: 0.86rem;
    color: #99afbf;
    margin-top: 3px;
}

.sar-grid-badge,
.sar-poi-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #4d6275;
    background: rgba(31, 111, 235, 0.12);
    color: #d2e6ff;
    font-size: 0.8rem;
}

.sar-map-note {
    margin-top: 8px;
    color: #9db2c1;
    font-size: 0.9rem;
}

.sar-grid-hint {
    margin-top: 6px;
    font-size: 0.85rem;
    color: #9db2c1;
}

.sar-active-badge {
    border: 1px solid #3b5568;
    border-radius: 999px;
    padding: 6px 10px;
    background: #0e161f;
    color: #c0d6e6;
    font-size: 0.86rem;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
}

.sar-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sar-tabs button {
    background: #1a2a39;
    border: 1px solid #3f5569;
    color: #d0e5f5;
}

.sar-tabs button.active {
    background: #1f6feb;
    border-color: #6ea8ff;
    color: #ffffff;
}

.sar-tab-panel {
    display: none;
}

.sar-tab-panel.active {
    display: block;
    animation: reveal-up 180ms ease;
}

.sar-main-grid-incident {
    grid-template-columns: minmax(340px, 1fr);
}

.sar-main-grid-ops,
.sar-main-grid-map,
.sar-main-grid-roster,
.sar-main-grid-history {
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
}

.sar-main-grid-ops {
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
}

.sar-main-grid-map {
    grid-template-columns: minmax(340px, 1fr);
}

.sar-map-container-large {
    height: min(72vh, 760px);
    min-height: 520px;
}

.sar-map-lists-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}

.sar-roster-list,
.sar-history-list {
    display: grid;
    gap: 10px;
    max-height: 640px;
    overflow-y: auto;
}

.sar-roster-card,
.sar-history-card {
    border: 1px solid #34485a;
    border-radius: 10px;
    background: #0f161f;
    padding: 10px;
}

.sar-roster-meta,
.sar-history-meta {
    margin-top: 4px;
    font-size: 0.85rem;
    color: #9cb2c2;
}

.sar-history-meta-line {
    margin-top: 3px;
    font-size: 0.85rem;
    color: #abc0d1;
}

@media (max-width: 1180px) {
    .sar-main-grid {
        grid-template-columns: 1fr;
    }

    .sar-main-grid-incident,
    .sar-main-grid-ops,
    .sar-main-grid-map,
    .sar-main-grid-roster,
    .sar-main-grid-history {
        grid-template-columns: 1fr;
    }

    .sar-map-container-large {
        min-height: 420px;
    }
}

@keyframes reveal-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Shared "skeleton" loading outline: a shimmering placeholder shown the
   instant a view opens, so pages never look blank while data loads. */
@keyframes skeleton-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton-line,
.skeleton-card,
.skeleton-row {
    background: linear-gradient(90deg, #1b232d 25%, #263140 37%, #1b232d 63%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}

.skeleton-line {
    height: 14px;
    margin: 6px 0;
}

.skeleton-line-heading { width: 40%; height: 20px; margin-bottom: 12px; }
.skeleton-line-title { width: 60%; height: 16px; }
.skeleton-line-meta { width: 40%; }

.skeleton-card {
    padding: 16px 18px;
    border: 1px solid #2f4053;
    border-radius: 14px;
    display: grid;
    gap: 10px;
}

.skeleton-row {
    padding: 12px 16px;
    border: 1px solid #2f4053;
    border-radius: 10px;
    margin-bottom: 10px;
    display: grid;
    gap: 8px;
}

.skeleton-section { display: grid; gap: 10px; }

@keyframes tile-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.header { background-color: #161b22; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: 1px solid #30363d; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1500; }
.modal-content { background-color: #161b22; margin: 5% auto; padding: 20px; width: 350px; border-radius: 8px; border: 1px solid #30363d; color: white; }
.fire-touch-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.fire-touch-card { border:1px solid #304355; border-radius:12px; background:#111821; padding:12px; display:flex; flex-direction:column; gap:10px; }
.fire-touch-card-label { font-size:0.95rem; color:#9fb5c7; font-weight:600; letter-spacing:0.02em; }
.fire-touch-trigger { width:100%; text-align:left; padding:14px 16px; border-radius:12px; border:1px solid #38526a; background:linear-gradient(180deg, #152231 0%, #101820 100%); color:#f0f6fc; font-size:1rem; font-weight:700; }
.fire-touch-status-pill { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 12px; border-radius:999px; border:1px solid #3c5163; background:#101820; color:#d6e4ef; font-weight:700; }
.fire-touch-option-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin-top:14px; }
.fire-touch-option { min-height:64px; border-radius:14px; border:1px solid #38526a; color:#f0f6fc; font-size:1rem; font-weight:700; padding:12px; line-height:1.1; }
.fire-tone-good { background:rgba(35, 134, 54, 0.28); border-color:#2d8f56; color:#c8f7d6; }
.fire-tone-warn { background:rgba(210, 153, 34, 0.22); border-color:#c58a1f; color:#ffe4a6; }
.fire-tone-alert { background:rgba(218, 54, 51, 0.22); border-color:#da3633; color:#ffd2d2; }
.fire-tone-info { background:rgba(31, 111, 235, 0.24); border-color:#3f7dda; color:#d2e6ff; }
.fire-tone-neutral { background:rgba(139, 148, 158, 0.22); border-color:#6e7681; color:#e1e4e8; }
.fire-unit-alerting { border-color:#da3633 !important; animation: fireAlertFlash 1s steps(2, end) infinite; }
.fire-alert-settings-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; align-items:end; }
.fire-alert-settings-grid input[type="number"],
.fire-alert-settings-grid input[type="text"] { width:100%; box-sizing:border-box; }
.fire-alert-rule-list { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.fire-alert-rule-row { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) auto; gap:8px; align-items:end; }
.fire-alert-rule-row select,
.fire-alert-rule-row input { width:100%; box-sizing:border-box; min-width:0; }
.dive-alert-rule-list { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.dive-alert-flash-rule-row { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap:8px; align-items:end; }
.dive-alert-popup-rule-row { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) auto; gap:8px; align-items:end; }
.dive-alert-flash-rule-row select,
.dive-alert-flash-rule-row input,
.dive-alert-popup-rule-row select,
.dive-alert-popup-rule-row input { width:100%; box-sizing:border-box; min-width:0; }
@keyframes fireAlertFlash {
    0% { box-shadow: 0 0 0 0 rgba(218, 54, 51, 0.45); background:#111821; }
    50% { box-shadow: 0 0 0 4px rgba(218, 54, 51, 0.2); background:#2a1114; }
    100% { box-shadow: 0 0 0 0 rgba(218, 54, 51, 0.45); background:#111821; }
}
.tab-content { display: none; }
#dashboard { display: block; }
input, textarea, select { background-color: #0d1117; border: 1px solid #30363d; color: white; padding: 5px; border-radius: 4px; }
input[type="datetime-local"], input[type="date"], input[type="time"] {
    background-color: #0d1117;
    color: white;
    border: 1px solid #30363d;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) sepia(1) saturate(0) hue-rotate(180deg);
    cursor: pointer;
}
button { background-color: #238636; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
button:hover { background-color: #2ea043; }
.card { padding: 15px; border-radius: 8px; border: 1px solid #30363d; background-color: #21262d; color: #c9d1d9; cursor: pointer; transition: transform 0.1s; }
.card:hover { border-color: #58a6ff; }
.status-Emergency { border-left: 8px solid #ff3333; }
.status-Out-of-Service { border-left: 8px solid #57606a; }
.status-In-Service { border-left: 8px solid #3fb950; }
.status-Enroute { border-left: 8px solid #58a6ff; }
.status-On-Scene { border-left: 8px solid #d29922; }
.status-Surface { border-left: 8px solid #3ddbd9; }
.status-Subsurface { border-left: 8px solid #1f6feb; }
.status-Standby, .status-Recovery, .status-Code-Zero { border-left: 8px solid #8b949e; }
.warning-orange {
    border: 2px solid orange !important;
    background-color: #3b2800 !important;
}

.flash-red {
    border: 2px solid red !important;
    animation: flash 1s infinite;
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.25), 0 0 18px rgba(255, 0, 0, 0.45);
}

.flash-orange {
    border: 2px solid #e9972f !important;
    animation: flash-orange 1s infinite;
    box-shadow: 0 0 0 2px rgba(233, 151, 47, 0.22), 0 0 18px rgba(233, 151, 47, 0.38);
}

.flash-green {
    border: 2px solid #2dbe5f !important;
    animation: flash-green 1s infinite;
    box-shadow: 0 0 0 2px rgba(45, 190, 95, 0.22), 0 0 18px rgba(45, 190, 95, 0.34);
}

@keyframes flash {
    0% { background-color: #21262d; }
    50% { background-color: #5a1a1a; }
    100% { background-color: #21262d; }
}

@keyframes flash-orange {
    0% { background-color: #21262d; }
    50% { background-color: #4a3211; }
    100% { background-color: #21262d; }
}

@keyframes flash-green {
    0% { background-color: #21262d; }
    50% { background-color: #143925; }
    100% { background-color: #21262d; }
}

@media (max-width: 860px) {
    body { padding-top: 144px; }

    #globalTopBar {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        height: auto;
        gap: 8px 12px;
    }

    .suite-brand-logo {
        grid-column: 1 / -1;
        order: -1;
        height: 92px;
    }

    #activeRoleChip,
    #systemClock {
        justify-self: start;
    }

    #globalNavBar {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .global-auth-actions {
        justify-self: end;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .global-nav-hint {
        text-align: left;
    }

    #activeRoleChip {
        justify-self: end;
        text-align: right;
    }
}

@media print {
    body > * {
        display: none !important;
    }

    body.print-training #diveModuleView,
    body.print-stats #diveModuleView,
    body.print-roster #diveModuleView {
        display: block !important;
    }

    body.print-roster #rosterModuleView {
        display: block !important;
    }

    body.print-training .print-container,
    body.print-stats #stats,
    body.print-roster .print-container {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff !important;
        color: #000 !important;
    }

    body.print-roster #diveModuleView > * {
        display: none !important;
    }

    body.print-roster #diveModuleView .print-container {
        display: block !important;
    }

    body.print-roster #rosterModuleView > * {
        display: none !important;
    }

    body.print-roster #rosterModuleView .print-container {
        display: block !important;
    }

    body.print-stats #statsTable {
        display: block !important;
        gap: 0;
    }

    .dive-roster-print-doc {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .dive-roster-print-doc-pdf embed {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.print-stats .stats-toolbar,
    body.print-stats .stats-subtabs,
    body.print-stats .training-year-tabs,
    body.print-stats .stats-expand-row {
        display: none !important;
    }

    body.print-stats .stats-panel {
        display: block !important;
    }

    body.print-stats .stats-table-wrap,
    body.print-stats .training-matrix-wrap {
        max-height: none !important;
        overflow: visible !important;
    }

    body.print-stats .training-year-block {
        break-inside: avoid;
        margin-bottom: 20px;
    }

    body.print-stats .training-year-block h4 {
        color: #000 !important;
    }

    body.print-stats .stats-card {
        background: #fff !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
        margin-bottom: 12px;
        break-inside: avoid;
    }

    body.print-stats .stats-card h3,
    body.print-stats .stats-table,
    body.print-stats .stats-table th,
    body.print-stats .stats-table td,
    body.print-stats .stats-empty {
        color: #000 !important;
        background: #fff !important;
    }

    body.print-stats .stats-table th,
    body.print-stats .stats-table td {
        border: 1px solid #000 !important;
    }

    body.print-stats .training-matrix,
    body.print-stats .training-matrix th,
    body.print-stats .training-matrix td {
        border: 1px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
    }

    body.print-stats .training-matrix th:first-child,
    body.print-stats .training-matrix td:first-child {
        background: #fff !important;
    }

    body.print-stats .training-cell.status-P,
    body.print-stats .training-cell.status-S,
    body.print-stats .training-cell.status-E,
    body.print-stats .training-cell.status-U,
    body.print-stats .yearly-training-table tbody tr {
        background: #fff !important;
        color: #000 !important;
        filter: none !important;
    }

    button, input, select, textarea { 
        display: none !important; 
    }
}

#statusToast {
    position: fixed;
    top: 20px;
    right: 20px;
    display: none;
    min-width: 240px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 14px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(135deg, #1f9d55 0%, #2db36b 100%);
    color: white;
    font-weight: 700;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
    z-index: 2200;
}

#statusToast.status-toast-pop {
    animation: statusToastPop 2200ms ease;
}

@keyframes statusToastPop {
    0% {
        opacity: 0;
        transform: translate3d(0, -12px, 0) scale(0.97);
    }
    12%,
    82% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, -8px, 0) scale(0.99);
    }
}

#undoToast {
    position: fixed;
    top: 136px;
    right: 20px;
    background-color: #1f6feb;
    color: white;
    padding: 12px 14px;
    border-radius: 6px;
    display: none;
    z-index: 1600;
    max-width: 320px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

#undoToast button {
    margin-left: 12px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    color: white;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
}

#syncStatus {
    position: fixed;
    bottom: 88px;
    right: 16px;
    background: #161b22;
    border: 1px solid #30363d;
    color: #e6edf3;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
    z-index: 900;
    min-width: 180px;
}

.sync-online { border-color: #3fb950 !important; }
.sync-offline { border-color: #da3633 !important; }
.sync-pending { border-color: #d29922 !important; }

#diveModuleView.training-tab-active #syncStatus,
#trainingModuleView.training-tab-active #syncStatus {
    position: static;
    width: fit-content;
    min-width: 0;
    margin: 8px 20px 8px auto;
}

#map {
    width: 100%;
    height: 560px !important;
    min-height: 420px;
    border: 2px solid #30363d;
    border-radius: 8px;
    background-color: #161b22;
    display: block;
}

.dive-map-shell {
    display: grid;
    gap: 14px;
}

.dive-map-header h1 {
    margin: 0;
}

.dive-map-header p {
    margin: 6px 0 0;
    color: #9db3c5;
}

.dive-map-workspace {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dive-map-top-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "placement placement placement"
        "actions address measure";
    gap: 14px;
    width: 100%;
}

.dive-map-control-group-placement { grid-area: placement; }
.dive-map-control-group-actions { grid-area: actions; }
.dive-map-control-group-address { grid-area: address; }
.dive-map-control-group-measure { grid-area: measure; }

.dive-map-top-controls > * {
    margin: 0;
}

.dive-map-top-controls .dive-map-control-group-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dive-map-top-controls .dive-map-control-group-actions .dive-map-action-row {
    width: 100%;
    justify-content: center;
}

.dive-map-controls {
    display: grid;
    gap: 12px;
}

.dive-map-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.dive-map-panel-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.dive-map-status {
    flex: 1 1 auto;
    min-width: 0;
}

.dive-map-fullscreen-button {
    flex: 0 0 auto;
    padding: 8px 12px;
    min-height: 38px;
    border-radius: 8px;
    border: 1px solid #4c6477;
    background: #1b2633;
    color: #dfeaf7;
    font-weight: 700;
    cursor: pointer;
}

.dive-map-fullscreen-button:hover {
    background: #223546;
}

.dive-map-panel.fullscreen {
    position: fixed;
    inset: 16px;
    z-index: 2000;
    background: rgba(13, 20, 27, 0.97);
    border: 1px solid #354d62;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

.dive-map-panel.fullscreen #map {
    height: calc(100vh - 110px) !important;
    min-height: 320px;
}

.dive-map-control-group {
    border: 1px solid #304355;
    border-radius: 12px;
    padding: 12px;
    background: #121922;
}

.dive-map-control-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #cbe0ef;
}

.dive-map-control-hint {
    margin: 8px 0 0;
    font-size: 0.78rem;
    font-weight: 400;
    color: #8fa3b5;
}

.dive-map-control-row,
.dive-map-action-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.dive-map-control-row input {
    flex: 1 1 auto;
}

.dive-map-type-row select {
    flex: 0 0 auto;
    min-width: 190px;
}

.dive-map-type-row input {
    flex: 1 1 220px;
}

.dive-map-placement-options {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #304355;
}

.dive-map-placement-option {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.dive-map-placement-option-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #8fa3b5;
}

.dive-map-placement-option-click {
    justify-content: flex-end;
}

.dive-map-placement-option-click button {
    width: 100%;
    min-height: 38px;
}

.dive-map-placement-divider {
    flex: 0 0 auto;
    align-self: center;
    color: #6b7f91;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 2px;
}

.dive-map-control-group-actions {
    display: flex;
    flex-direction: column;
}

.dive-map-action-row button {
    width: auto;
    min-width: 96px;
    padding: 8px 12px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.dive-map-control-hint {
    margin: 8px 0 0;
    font-size: 0.78rem;
    font-weight: 400;
    color: #9db3c5;
}

.dive-map-role-badge {
    background: #3a2a0f;
    border: 1px solid #d29922;
    color: #f2cc60;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.dive-map-shape-label {
    background: #0f1821;
    color: #f2cc60;
    border: 1px solid #f2cc60;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.dive-map-text-label {
    background: #0f1821;
    color: #e8f0f7;
    border: 1px solid #4a90d9;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.dive-map-target-icon-inner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fff 0 3px, transparent 3px),
        radial-gradient(circle, #d9363e 0 9px, #fff 9px 11px, transparent 11px),
        radial-gradient(circle, #d9363e 0 13px, #fff 13px 100%);
    box-shadow: 0 0 0 1px #7f1d1d;
}

.dive-map-coord-popup {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #1b2733;
}


.dive-map-measure-point-icon-inner {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.dive-map-measure-point-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f2cc60;
    box-shadow: 0 0 0 2px #0f1821, 0 0 0 3px #f2cc60;
}

.dive-map-measuring-cursor,
.dive-map-measuring-cursor .leaflet-container {
    cursor: crosshair !important;
}

.dive-map-measure-point-label {
    position: absolute;
    top: -2px;
    right: -4px;
    background: #d29922;
    color: #0f1821;
    border-radius: 999px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 9px;
    line-height: 1;
    box-shadow: 0 0 0 1px #0f1821;
}

.dive-map-measure-label,
.dive-map-measure-total {
    background: #0f1821;
    color: #f2cc60;
    border: 1px solid #f2cc60;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.dive-map-measure-total {
    color: #7ee787;
    border-color: #7ee787;
}


.dive-map-sync-button {
    background: linear-gradient(180deg, #2a9542 0%, #1f7533 100%);
    border: 1px solid #66c07a;
    color: #f5fff7;
    border-radius: 999px;
    font-weight: 700;
    min-height: 36px;
    min-width: 110px;
    padding: 8px 12px;
    box-shadow: 0 0 0 1px rgba(117, 220, 142, 0.2);
}

.dive-map-sync-button:hover,
.dive-map-sync-button:focus-visible {
    background: linear-gradient(180deg, #36a750 0%, #24843b 100%);
    border-color: #7ed291;
}

.dive-map-status {
    border: 1px solid #304355;
    border-radius: 10px;
    padding: 10px 12px;
    background: #101823;
    color: #cfe2f1;
    font-weight: 600;
}

.dive-map-status[data-tone="success"] {
    color: #b7f3c9;
    border-color: #2d8f56;
}

.dive-map-status[data-tone="pending"] {
    color: #ffe4a6;
    border-color: #d29922;
}

.dive-map-status[data-tone="error"] {
    color: #ffd2d2;
    border-color: #da3633;
}

.leaflet-tooltip.dive-live-user-label {
    border: 1px solid rgba(15, 23, 42, 0.75);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.88);
    color: #e5eef8;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.28);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.1;
    padding: 3px 7px;
    pointer-events: none;
    white-space: nowrap;
}

.leaflet-tooltip-top.dive-live-user-label::before {
    border-top-color: rgba(15, 23, 42, 0.88);
}

.leaflet-tooltip.dive-live-user-label-current {
    border-color: rgba(45, 212, 191, 0.7);
    color: #ccfbf1;
}

.leaflet-tooltip.dive-map-pin-tag {
    border: 1px solid rgba(56, 139, 253, 0.6);
    border-radius: 6px;
    background: rgba(13, 20, 30, 0.92);
    color: #eaf3fb;
    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.35);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.1;
    padding: 2px 6px;
    pointer-events: none;
    white-space: nowrap;
}

.leaflet-tooltip-top.dive-map-pin-tag::before {
    border-top-color: rgba(56, 139, 253, 0.6);
}

#diverStatsBody tr {
    border-bottom: 1px solid #30363d;
    transition: background-color 0.2s;
}

#diverStatsBody tr.diver-row {
    cursor: pointer;
}

#diverStatsBody tr:hover {
    background-color: #30363d;
}

#diverStatsBody tr.diver-row.selected {
    background-color: rgba(31, 111, 235, 0.25) !important;
}

#diverStatsBody tr:nth-child(even) {
    background-color: #1a2029;
}

#diverStatsBody td {
    padding: 8px;
}

#statsTable {
    display: grid;
    gap: 16px;
}

.stats-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
    align-items: center;
}

.stats-export-btn {
    margin-left: auto;
    border: 1px solid #304355;
    border-radius: 8px;
    padding: 7px 12px;
    background: #101823;
    color: #d6e5f3;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}

.stats-subtab {
    border: 1px solid #304355;
    border-radius: 999px;
    padding: 7px 12px;
    background: #101823;
    color: #d6e5f3;
    font-weight: 600;
}

.stats-subtab.active {
    background: #1f6feb;
    border-color: #579dff;
    color: #f0f6fc;
}

.stats-layout {
    display: grid;
    gap: 16px;
}

.stats-panel {
    display: none;
    gap: 16px;
}

.stats-panel.active {
    display: grid;
}

.stats-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.stats-overview-card {
    border: 1px solid #2d3f52;
    border-radius: 10px;
    background: #121a24;
    padding: 10px 12px;
    display: grid;
    gap: 6px;
}

.stats-overview-card span {
    color: #9fb2c4;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stats-overview-card strong {
    color: #f0f6fc;
    font-size: 1.2rem;
}

.stats-table-wrap {
    max-height: 560px;
    overflow: auto;
    border: 1px solid #293846;
    border-radius: 8px;
}

.training-roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.training-roster-row {
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: #0d1117;
}

.training-roster-row select {
    min-width: 140px;
}

.recovery-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.recovery-shell {
    display: grid;
    gap: 16px;
}

.recovery-shell-header h1 {
    margin: 0;
}

.recovery-shell-header p {
    margin: 6px 0 0;
    color: #9db3c5;
    max-width: 760px;
}

.recovery-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.recovery-toolbar button,
.recovery-section-toggle {
    min-height: 40px;
    border-radius: 999px;
    font-weight: 700;
}

.recovery-tab-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 800;
    line-height: 1;
}

.recovery-tab-delete:hover {
    background: #d9363e;
    color: #fff;
}

.recovery-card {
    background: linear-gradient(180deg, #1a2029 0%, #161b22 100%);
    border: 1px solid #30363d;
    border-radius: 10px;
    padding: 12px;
}

.recovery-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.recovery-card h3 {
    margin-top: 0;
    color: #f0f6fc;
    border-bottom: 1px solid #30363d;
    padding-bottom: 6px;
}

.recovery-card-header h3 {
    margin: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.recovery-card-body {
    display: block;
}

.recovery-section-toggle {
    background: #17283a;
    border: 1px solid #3b556d;
    color: #dfedf7;
    padding: 8px 12px;
}

.recovery-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.recovery-field label {
    font-size: 12px;
    font-weight: 600;
    color: #c9d1d9;
    margin-bottom: 4px;
}

.recovery-field-help {
    margin-bottom: 6px;
    font-size: 0.84rem;
    color: #92a9bb;
}

.personnel-checkbox-list {
    max-height: 170px;
    overflow-y: auto;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 8px;
    background: #0d1117;
}

.personnel-checkbox-item {
    display: block;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.recovery-action-bar {
    position: sticky;
    bottom: 12px;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid #314658;
    border-radius: 14px;
    background: rgba(11, 18, 26, 0.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.recovery-save-status {
    color: #cfe2f1;
    font-weight: 600;
}

.recovery-save-status[data-tone="success"] {
    color: #b7f3c9;
}

.recovery-save-status[data-tone="pending"] {
    color: #ffe4a6;
}

.recovery-save-status[data-tone="error"] {
    color: #ffcccc;
}

.recovery-save-button {
    min-height: 46px;
    padding: 12px 18px;
    font-size: 1rem;
    font-weight: 700;
}

.stats-card {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.stats-card h3 {
    margin: 0 0 10px;
    color: #f0f6fc;
    font-size: 1.05rem;
    font-weight: 600;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    background: #0d1117;
    color: #e6edf3;
}

.stats-table th {
    background: #21262d;
    color: #f0f6fc;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #30363d;
    position: sticky;
    top: 0;
    z-index: 2;
}

.stats-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #30363d;
}

.stats-table tr:nth-child(even) {
    background: #161b22;
}

.stats-table tr:hover {
    background: #1f2937;
}

.stats-empty {
    color: #8b949e;
    padding: 10px 0;
}

.training-year-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 14px;
}

.training-year-tab {
    border: 1px solid #304355;
    border-radius: 999px;
    padding: 6px 14px;
    background: #101823;
    color: #d6e5f3;
    font-weight: 700;
    cursor: pointer;
}

.training-year-tab.active {
    background: #1f6feb;
    border-color: #579dff;
    color: #f0f6fc;
}

.training-year-block {
    margin-bottom: 18px;
}

.training-year-block:last-child {
    margin-bottom: 0;
}

.training-year-block h4 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: #cbd9e6;
}

.training-matrix-wrap {
    max-height: 620px;
    overflow: auto;
    border: 1px solid #293846;
    border-radius: 8px;
    background: #0d1117;
}

.training-matrix-wrap .training-matrix {
    overflow-x: auto;
}

.training-matrix {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #30363d;
}

.training-matrix th,
.training-matrix td {
    border: 1px solid #30363d;
    padding: 8px;
    text-align: center;
}

.training-matrix th {
    position: sticky;
    top: 0;
    background: #1a2029;
    z-index: 2;
}

.training-matrix th:first-child,
.training-matrix td:first-child {
    text-align: left;
    min-width: 180px;
    position: sticky;
    left: 0;
    background: #161b22;
    z-index: 3;
}

.training-matrix td {
    min-width: 56px;
    font-weight: 700;
}

.training-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    font-size: 0.92rem;
}

.stats-expand-row td {
    background: #0f161f;
    text-align: center;
}

.stats-expand-button {
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #32506a;
    background: #122335;
    color: #d4e8f8;
    font-weight: 600;
}

.stats-meta {
    margin: 0 0 10px;
    color: #9fb2c4;
    font-size: 0.86rem;
}

@media (max-width: 980px) {
    .stats-toolbar-row {
        grid-template-columns: 1fr;
    }

    .stats-filter-actions {
        grid-column: 1;
        align-items: stretch;
    }

    .stats-filter-actions button {
        width: 100%;
    }
}

.training-cell.status-P { background: #143d26; color: #b6f0c8; }
.training-cell.status-S { background: #3f2f15; color: #ffe2a8; }
.training-cell.status-E { background: #15304a; color: #b7ddff; }
.training-cell.status-U { background: #4a1c1c; color: #ffbcbc; }

.yearly-training-table tbody tr:nth-child(odd) { background: #0d1117; }
.yearly-training-table tbody tr:nth-child(even) { background: #161b22; }

.yearly-training-table tbody tr:hover { filter: brightness(1.08); }

.county-tag {
    display: inline-block;
    font-size: 0.8rem;
    border: 1px solid #30363d;
    border-radius: 999px;
    padding: 2px 8px;
    background: #21262d;
    color: #e6edf3;
    white-space: nowrap;
}

.dive-inventory-shell {
    display: grid;
    gap: 12px;
}

.dive-inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.dive-inventory-header p {
    margin: 6px 0 0;
    color: #9fb2c4;
}

.dive-inventory-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dive-inventory-import-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    background: #8b949e;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
}

.dive-inventory-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.dive-inventory-summary-card {
    border: 1px solid #2d3a47;
    border-radius: 8px;
    padding: 10px;
    background: #111821;
}

.dive-equipment-form-modal {
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 18px;
    overflow-y: auto;
}

.dive-equipment-form-modal .dive-inventory-form-card {
    width: min(980px, 100%);
    height: min(90vh, 900px);
    max-height: calc(100vh - 10vh);
    overflow-y: auto;
    margin: 0 auto;
    box-sizing: border-box;
}

.dive-inventory-summary-card .label {
    font-size: 0.78rem;
    color: #9fb2c4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dive-inventory-summary-card .value {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 4px;
}

.dive-inventory-summary-card.warning {
    border-color: #9a6f2f;
}

.dive-inventory-summary-card.danger {
    border-color: #b34343;
}

.dive-inventory-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 8px;
}

.dive-inventory-table-wrap {
    overflow-x: auto;
    border: 1px solid #253241;
    border-radius: 8px;
    background: #0f141b;
}

.dive-inventory-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

.dive-inventory-table th,
.dive-inventory-table td {
    border-bottom: 1px solid #253241;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

.dive-inventory-table tbody tr:nth-child(even) {
    background: #101a24;
}

.dive-inventory-table .tiny {
    color: #8fa4b8;
    font-size: 0.78rem;
    margin-top: 2px;
}

.dive-inventory-actions {
    display: grid;
    gap: 6px;
}

.dive-pill {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.78rem;
    border: 1px solid #314255;
    background: #111821;
}

.dive-pill.warning {
    border-color: #9a6f2f;
    color: #ffdfa8;
}

.dive-pill.danger {
    border-color: #b34343;
    color: #ffc0c0;
}

.dive-pill.ok {
    border-color: #3a7b57;
    color: #a3e3bf;
}

.dive-inventory-form-card,
.dive-maint-card {
    border: 1px solid #253241;
    border-radius: 8px;
    background: #111821;
    padding: 12px;
}

.dive-inventory-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.dive-inventory-form-grid label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8rem;
    color: #9fb2c4;
}

.dive-inventory-form-grid .dive-inventory-form-full {
    grid-column: 1 / -1;
}

.dive-inventory-form-grid textarea {
    min-height: 74px;
}

.dive-inventory-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.dive-inventory-event-details {
    min-width: 220px;
    max-width: 420px;
    margin-top: 6px;
    padding: 8px;
    border: 1px solid #2d3a49;
    border-radius: 6px;
    background: #0d141c;
    color: #b8c8d6;
    font-size: 0.82rem;
    line-height: 1.45;
}

.dive-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dive-inventory-maint-grid {
    display: grid;
    gap: 10px;
}

@media (max-width: 920px) {
    .dive-inventory-filters {
        grid-template-columns: 1fr;
    }
}

.dive-tab-shell {
    display: block;
    margin-top: 6px;
}

.dive-tab-bar {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.recovery-entry-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.recovery-entry-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #355066;
    background: #111821;
    color: #d6e4ef;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 700;
}

.recovery-entry-tab.active {
    border-color: #58a6ff;
    background: rgba(31, 111, 235, 0.18);
    color: #ffffff;
}

.dive-incident-tab-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    overflow-x: auto;
    border: 1px solid #30495c;
    border-radius: 8px;
    background: rgba(10, 23, 32, 0.88);
    box-shadow: inset 3px 0 0 #d69a32;
    -webkit-overflow-scrolling: touch;
}

.dive-incident-tab-bar[hidden] {
    display: none;
}

.dive-incident-tab-label {
    flex: 0 0 auto;
    padding: 0 8px 0 4px;
    color: #f2c56f;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.dive-incident-tab-button {
    min-height: 38px;
    padding: 7px 12px;
    background: #172b38;
    border-color: #456276;
}

.dive-incident-tab-button:hover {
    background: #203c4d;
    border-color: #62849a;
}

.dive-dashboard {
    max-width: 1440px;
    margin: 0 auto;
}

.dive-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    gap: 32px;
    align-items: end;
    padding: 34px 4px 30px;
    border-bottom: 1px solid #304354;
}

.dive-dashboard-eyebrow {
    margin: 0 0 8px;
    color: #e7ad4c;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.dive-dashboard-hero h2 {
    margin: 0;
    color: #f4f8fb;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: 2rem;
    letter-spacing: 0;
}

.dive-dashboard-hero > div > p:last-child {
    max-width: 720px;
    margin: 12px 0 0;
    color: #aebfcb;
    font-size: 1rem;
    line-height: 1.55;
}

.dive-dashboard-status {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 76px;
    padding: 14px 16px;
    border: 1px solid #385064;
    border-radius: 8px;
    background: #101d27;
    cursor: pointer;
    text-align: left;
}

.dive-dashboard-status-action {
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.dive-dashboard-status-action:hover,
.dive-dashboard-status-action:focus-visible {
    border-color: #7aaec6;
    background: rgba(25, 38, 50, 0.96);
    transform: translateY(-1px);
    outline: none;
}

.dive-dashboard-status-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    background: #71808b;
    box-shadow: 0 0 0 5px rgba(113, 128, 139, 0.14);
}

.dive-dashboard-status-dot.active {
    background: #e04f4f;
    box-shadow: 0 0 0 5px rgba(224, 79, 79, 0.16);
}

.dive-dashboard-status span:not(.dive-dashboard-status-dot) {
    display: block;
    color: #8fa5b5;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.dive-dashboard-status strong {
    display: block;
    margin-top: 3px;
    color: #f4f8fb;
    font-size: 1.05rem;
}

.dive-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 24px 0 10px;
}

.dive-dashboard-card {
    display: flex;
    min-width: 0;
    min-height: 210px;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    color: #dce8ef;
    border: 1px solid #344c5d;
    border-radius: 8px;
    background: linear-gradient(145deg, #142530 0%, #101a23 100%);
    box-shadow: none;
}

.dive-dashboard-card:hover,
.dive-dashboard-card:focus-visible {
    color: #ffffff;
    border-color: #6d96aa;
    background: linear-gradient(145deg, #193140 0%, #13232e 100%);
    transform: translateY(-2px);
}

.dive-dashboard-card-primary {
    grid-column: span 2;
    background:
        linear-gradient(100deg, rgba(15, 61, 75, 0.96) 0%, rgba(16, 34, 44, 0.96) 68%),
        #10222c;
    border-color: #4e8294;
}

.dive-dashboard-card-kicker {
    color: #e7ad4c;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.dive-dashboard-card > strong {
    margin-top: 12px;
    color: #f5f9fb;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: 1.18rem;
    letter-spacing: 0;
}

.dive-dashboard-card > strong + span {
    max-width: 560px;
    margin-top: 10px;
    color: #a9bbc7;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.45;
    text-transform: none;
}

.dive-dashboard-card-action {
    margin-top: auto;
    padding-top: 18px;
    color: #9fd3e5;
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: none;
}

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

@media (max-width: 680px) {
    .dive-dashboard-hero {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 24px;
    }

    .dive-dashboard-hero h2 {
        font-size: 1.55rem;
    }

    .dive-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dive-dashboard-card-primary {
        grid-column: auto;
    }

    .dive-incident-tab-label {
        display: none;
    }
}

.dive-tab-spacer {
    flex: 1 0 24px;
    min-width: 24px;
}

.dive-tab-button,
.dive-tab-danger {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
}

.dive-tab-button {
    background: linear-gradient(180deg, #2a9542 0%, #1f7533 100%);
    border: 1px solid #66c07a;
    color: #f5fff7;
}

.dive-tab-button:hover {
    background: linear-gradient(180deg, #36a750 0%, #24843b 100%);
    border-color: #7ed291;
}

.dive-tab-button.active {
    background: linear-gradient(180deg, #44b85f 0%, #2b8e45 100%);
    border-color: #9be4ad;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(117, 220, 142, 0.2);
}

.dive-tab-danger {
    background: linear-gradient(180deg, #d94a4a 0%, #971f1f 100%) !important;
    border: 1px solid #f3a0a0 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(255, 120, 120, 0.16);
    flex: 0 0 auto;
}

.dive-tab-danger:hover {
    background: linear-gradient(180deg, #e45d5d 0%, #ac2a2a 100%) !important;
}

/* Keep only the Dive Close Incident control red, even with global button styles. */
#diveModuleView .dive-tab-bar #diveCloseIncidentButton,
#diveModuleView .dive-tab-bar #diveCloseIncidentButton:visited,
#diveModuleView .dive-tab-bar #diveCloseIncidentButton:active {
    background-color: #b42323 !important;
    background-image: linear-gradient(180deg, #dc4b4b 0%, #9a1e1e 100%) !important;
    border: 1px solid #f0a5a5 !important;
    color: #ffffff !important;
}

#diveModuleView .dive-tab-bar #diveCloseIncidentButton:hover,
#diveModuleView .dive-tab-bar #diveCloseIncidentButton:focus-visible {
    background-color: #ca2e2e !important;
    background-image: linear-gradient(180deg, #eb6262 0%, #ad2727 100%) !important;
    border-color: #ffd0d0 !important;
}

#diveModuleView .dive-tab-bar #diveCloseIncidentButton:disabled {
    opacity: 0.85;
    background-color: #8f2424 !important;
    background-image: linear-gradient(180deg, #b54343 0%, #7d1b1b 100%) !important;
    border-color: #d99696 !important;
}

.dive-unit-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#diverCards .grid,
#units .grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

#units.grid {
    display: block;
}

.dive-unit-card-header,
.dive-unit-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.dive-unit-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 48px;
    gap: 8px;
    height: 104px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 4px;
    align-content: start;
}

.dive-unit-card-actions .dive-unit-chip {
    min-width: 0;
    width: 100%;
    height: 48px;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    padding: 10px 10px;
}

.dive-unit-meta {
    margin-top: 4px;
    font-size: 0.86rem;
    color: #9fb5c7;
}

.dive-unit-current-status {
    margin-top: 6px;
    font-size: 1.12rem;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
}

.dive-unit-card-body {
    cursor: pointer;
    line-height: 1.45;
}

.dive-unit-chip,
.dive-unit-danger {
    min-height: 38px;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 700;
}

.dive-unit-chip {
    background: #122132;
    border: 1px solid #37516a;
    color: #d5e8f8;
}

.dive-unit-chip.pending {
    background: #1f6feb;
    border-color: #7fb0ff;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(127, 176, 255, 0.28);
}

.dive-unit-danger {
    background: #a53a3a;
    border: 1px solid #d96b6b;
    color: #ffffff;
}

.dive-unit-pairing-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 2px;
}

.dive-pairing-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.82rem;
    line-height: 1.3;
    font-weight: 500;
}

.dive-pairing-pill.buddy {
    background: rgba(31, 111, 235, 0.18);
    border: 1px solid rgba(127, 176, 255, 0.45);
    color: #9eccff;
}

.dive-pairing-pill.tender {
    background: rgba(210, 153, 34, 0.18);
    border: 1px solid rgba(227, 179, 65, 0.45);
    color: #f3d179;
}

.dive-pairing-pill.tending {
    background: rgba(46, 160, 67, 0.18);
    border: 1px solid rgba(63, 185, 80, 0.45);
    color: #7ee787;
}

.dive-pairing-pill.unassigned {
    background: rgba(110, 118, 129, 0.12);
    border: 1px dashed rgba(110, 118, 129, 0.35);
    color: #8b949e;
    font-size: 0.78rem;
}

.dive-unit-pairing-btn {
    min-height: 32px;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    background: #1c2b3d;
    border: 1px solid #3d5a7d;
    color: #a8d1ff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dive-unit-pairing-btn:hover,
.dive-unit-pairing-btn:focus-visible {
    background: #253d5a;
    border-color: #58a6ff;
    color: #ffffff;
}

.dive-unit-card-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.dive-status-update-modal {
    display: grid;
    gap: 14px;
    width: min(92vw, 440px);
}

.dive-status-update-modal h3 {
    margin: 0;
}

.dive-status-update-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #37516a;
    border-radius: 8px;
    background: #101823;
    padding: 12px;
}

.dive-status-update-selection span {
    color: #9fb5c7;
    font-size: 0.9rem;
    font-weight: 700;
}

.dive-status-update-selection strong {
    color: #ffffff;
    text-align: right;
}

.dive-status-update-modal label {
    color: #bcd3e5;
    font-weight: 700;
}

.dive-exposure-fields {
    display: grid;
    gap: 10px;
}

.dive-exposure-fields[hidden] {
    display: none;
}

.dive-exposure-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}

.dive-exposure-checkbox input {
    width: 22px !important;
    min-height: 22px !important;
    height: 22px;
    flex: 0 0 22px;
}

.dive-status-update-modal textarea {
    width: 100%;
    min-height: 112px;
    box-sizing: border-box;
    resize: vertical;
}

.dive-status-update-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dive-status-update-actions button {
    min-height: 46px;
}

.training-page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.training-page-heading h1 {
    margin: 0;
}

.training-mode-tabs {
    margin-bottom: 16px;
}

.training-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 16px;
}

/* The display:grid above overrides the browser's [hidden] rule, so without
   this guard the session form and the compliance panel both render at once. */
.training-layout[hidden] {
    display: none;
}

.training-setup-panel {
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 16px;
    background: #0d1117;
}

.training-setup-panel h2 {
    margin-top: 0;
}

.training-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.training-fields-grid label {
    display: grid;
    gap: 6px;
    color: #bcd3e5;
    font-weight: 700;
}

.training-narrative-field {
    grid-column: 1 / -1;
}

.training-edit-banner {
    margin-top: 8px;
    color: #9fc8ff;
}

.training-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.scenario-status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    background: #243447;
    color: #d5e8f8;
    font-weight: 800;
}

.scenario-lifecycle-message {
    margin-top: 8px;
    max-width: 620px;
    color: #bcd3e5;
    font-weight: 700;
}

.training-view-modal-content {
    box-sizing: border-box;
    width: min(860px, calc(100% - 32px));
    margin: 24px auto;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.training-scenario-record {
    margin: 12px 0 18px;
    padding-top: 12px;
    border-top: 1px solid #37516a;
}

.training-scenario-record h4 {
    margin: 16px 0 8px;
}

.training-scenario-record li {
    margin-bottom: 8px;
}

/* Training scenario board (mirrors the incident board chrome). */
.training-layout-single {
    grid-template-columns: minmax(0, 1fr);
}

.dive-dashboard-status-stack {
    display: grid;
    gap: 10px;
    align-content: end;
}

.dive-dashboard-status-dot-training.active {
    background: #3fb950;
    box-shadow: 0 0 0 5px rgba(63, 185, 80, 0.18);
}

.dive-training-tab-bar {
    box-shadow: inset 3px 0 0 #4fb0d8;
}

.dive-training-tab-bar .dive-incident-tab-label {
    color: #8ed6f0;
}

.training-scenario-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #37687f;
    border-radius: 8px;
    background: rgba(16, 34, 44, 0.9);
}

.training-scenario-banner[hidden] {
    display: none;
}

.training-scenario-banner strong {
    display: block;
    margin-top: 6px;
    color: #f4f8fb;
    font-size: 1.05rem;
}

.training-scenario-banner p {
    margin: 4px 0 0;
    color: #aebfcb;
}

.history-subtab-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #30363d;
}

.history-subtab {
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid #37516a;
    border-radius: 999px;
    background: #101823;
    font-weight: 700;
}

.history-subtab.active {
    background: #1f6feb;
    border-color: #7fb2ff;
}

.history-panel[hidden] {
    display: none;
}

.history-panel > h2 {
    margin-top: 0;
}

.history-panel-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.history-panel-toolbar p {
    max-width: 640px;
    margin: 0;
    color: #aebfcb;
}

.history-panel-toolbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.training-history-card-meta {
    display: block;
    margin-top: 6px;
    color: #9fb5c7;
    font-size: 0.86rem;
}

.ts-log-delete {
    min-height: 0;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid #7b2b2b;
    border-radius: 4px;
    background: #401919;
    color: #ffbcbc;
    font-size: 0.8em;
}

#tsUnits.grid {
    display: block;
}

@media (max-width: 850px) {
    .training-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .training-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .training-fields-grid {
        grid-template-columns: 1fr;
    }
}

.dive-add-unit-modal {
    display: grid;
    gap: 12px;
}

.dive-add-unit-modal label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #bcd3e5;
}

.dive-add-unit-selection {
    min-height: 22px;
    color: #ffd98d;
    font-weight: 700;
}

.dive-form-status {
    min-height: 22px;
    border: 1px solid #304355;
    border-radius: 8px;
    padding: 8px 10px;
    background: #101823;
    color: #cfe2f1;
    font-size: 0.9rem;
    font-weight: 600;
}

.dive-form-status[data-tone="success"] {
    color: #b7f3c9;
    border-color: #2d8f56;
}

.dive-form-status[data-tone="pending"] {
    color: #ffe4a6;
    border-color: #d29922;
}

.dive-form-status[data-tone="error"] {
    color: #ffd2d2;
    border-color: #da3633;
}

.dive-unit-picker-list {
    display: grid;
    gap: 12px;
    max-height: 48vh;
    overflow-y: auto;
    padding-right: 2px;
}

.dive-unit-picker-group {
    border: 1px solid #314759;
    border-radius: 10px;
    background: #0f161f;
    padding: 10px;
}

.dive-unit-picker-title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: #e7f1f8;
}

.dive-unit-picker-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.dive-unit-picker-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #3b556d;
    background: #132130;
    color: #edf6fd;
    text-align: left;
}

.dive-unit-picker-option .name {
    font-weight: 700;
}

.dive-unit-picker-option .meta {
    font-size: 0.82rem;
    color: #9fb8ca;
}

.dive-unit-picker-option.active {
    background: #1f6feb;
    border-color: #84b7ff;
}

.dive-add-unit-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dive-form-modal {
    display: grid;
    gap: 14px;
}

.dive-form-modal-header h3 {
    margin: 0;
}

.dive-form-modal-header p {
    margin: 6px 0 0;
    color: #9fb5c7;
}

.dive-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dive-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dive-form-field-full {
    grid-column: 1 / -1;
}

.dive-form-field label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #bfd6e7;
}

.dive-roster-shell {
    display: grid;
    gap: 18px;
}

.dive-roster-header p {
    margin: 6px 0 0;
    color: #9fb5c7;
    max-width: 760px;
}

.dive-roster-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.dive-roster-search {
    flex: 1 1 280px;
}

.dive-roster-search input {
    width: 100%;
}

.dive-roster-search-status {
    color: #9fb5c7;
    font-size: 0.92rem;
}

.dive-roster-modal-content {
    width: min(96vw, 980px);
    max-height: 90vh;
    overflow-y: auto;
}

.dive-form-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #2f4053;
}

#trainingComplianceModal {
    box-sizing: border-box;
    padding: min(5vh, 32px) 12px;
}

#trainingComplianceModal .dive-roster-modal-content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

#trainingComplianceModal .dive-form-modal-header,
#trainingComplianceModal .dive-form-modal-footer {
    flex: 0 0 auto;
}

#trainingComplianceModal .roster-compliance-panel {
    min-height: 0;
    overflow-y: auto;
}

.training-setup-modal {
    box-sizing: border-box;
    padding: min(5vh, 32px) 12px;
}

.training-setup-modal .training-setup-modal-content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.training-setup-modal .training-setup-modal-body {
    min-height: 0;
    overflow-y: auto;
    padding: 4px 2px;
}

.training-setup-modal-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.training-setup-modal-field-full {
    grid-column: 1 / -1;
}

.training-setup-modal-field textarea {
    width: 100%;
    min-height: 132px;
    box-sizing: border-box;
    resize: vertical;
}

.training-setup-modal .dive-form-modal-header,
.training-setup-modal .dive-form-modal-footer {
    flex: 0 0 auto;
}

.dive-roster-editor {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #2f4053;
    border-radius: 14px;
    background: rgba(15, 21, 29, 0.82);
}

.dive-roster-modal-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.dive-roster-custom-skill-entry {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.dive-roster-custom-skill-entry input {
    flex: 1 1 260px;
}

.dive-roster-custom-skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.dive-roster-custom-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #355066;
    background: #111821;
    color: #d6e4ef;
    font-size: 0.84rem;
    font-weight: 700;
}

.dive-roster-custom-skill-chip button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #9fb5c7;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.dive-roster-custom-skill-empty {
    color: #8ea6b8;
    font-size: 0.88rem;
}

.dive-roster-file-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}

.dive-roster-file-name {
    color: #9fb5c7;
    font-size: 0.92rem;
}

.dive-roster-list {
    display: grid;
    gap: 12px;
}

.dive-roster-category {
    display: grid;
    gap: 10px;
}

.dive-roster-category-heading {
    margin: 8px 0 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #2f4053;
    color: #d6e4ef;
    font-size: 1.05rem;
}

.dive-roster-category-heading span {
    color: #8ea6b8;
    font-size: 0.85rem;
    font-weight: 400;
}

.dive-roster-category-list {
    display: grid;
    gap: 12px;
}

.dive-roster-card {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid #2f4053;
    border-radius: 14px;
    background: rgba(15, 21, 29, 0.82);
}

.dive-roster-card-heading {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.dive-roster-card-contact {
    color: #c3d3e0;
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.dive-roster-card-sep {
    color: #4a6275;
}

.dive-roster-card-section {
    display: grid;
    gap: 6px;
}

.dive-roster-card-section-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7f97a9;
}

.dive-roster-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.dive-roster-card-title {
    display: grid;
    gap: 4px;
}

.dive-roster-card-title strong {
    font-size: 1rem;
}

.dive-roster-card-meta,
.dive-roster-card-notes {
    color: #9fb5c7;
    font-size: 0.92rem;
}

.dive-roster-chip-row,
.dive-roster-detail-grid,
.dive-roster-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dive-roster-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.dive-roster-detail-item {
    padding: 10px 12px;
    border: 1px solid #304355;
    border-radius: 10px;
    background: #101823;
}

.dive-roster-detail-item .label {
    display: block;
    margin-bottom: 4px;
    color: #8ea6b8;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dive-roster-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #355066;
    background: #111821;
    color: #d6e4ef;
    font-size: 0.84rem;
    font-weight: 700;
}

.dive-dictation-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid #34495c;
    border-radius: 10px;
    background: #101823;
}

.dive-dictation-bar span {
    font-size: 0.85rem;
    color: #9bb1c1;
}

.dive-form-action-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 8px;
    background: linear-gradient(180deg, rgba(22, 27, 34, 0) 0%, rgba(22, 27, 34, 0.96) 28%);
}

.dive-record-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dive-record-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.dive-record-card-tag {
    border: 1px solid #39536b;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #cfe3f3;
    background: #122130;
}

.dive-record-card-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 8px;
    align-items: start;
}

.dive-record-card-row .label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8ea8bc;
}

.dive-record-card-row .value {
    color: #edf6fd;
    word-break: break-word;
}

.dive-record-card-note {
    border: 1px solid #304355;
    border-radius: 8px;
    padding: 8px 10px;
    background: #101823;
    color: #d9e7f2;
    line-height: 1.4;
}

.dive-record-card-footer {
    font-size: 0.84rem;
    color: #9cb3c4;
    font-weight: 700;
}

/* Dive module touch optimization for phones/tablets. */
@media (max-width: 1024px), (pointer: coarse) {
    .dive-tab-shell {
        display: block;
    }

    .dive-tab-bar {
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .dive-tab-button,
    .dive-tab-danger {
        flex: 0 0 auto;
        min-height: 48px;
        font-size: 0.98rem;
    }

    .dive-tab-spacer {
        flex: 0 0 12px;
        min-width: 12px;
    }

    #diveModuleView #dashboard .dive-incident-toolbar {
        flex-wrap: wrap;
        align-items: stretch !important;
        gap: 12px !important;
    }

    #diveModuleView #dashboard .dive-incident-toolbar > input,
    #diveModuleView #dashboard .dive-incident-toolbar > select,
    #diveModuleView #dashboard .dive-incident-toolbar > button,
    #diveModuleView input,
    #diveModuleView select,
    #diveModuleView textarea,
    #diveModuleView button {
        min-height: 48px;
        font-size: 1rem;
        line-height: 1.25;
    }

    #diveModuleView #case,
    #diveModuleView #address,
    #diveModuleView #countySelect,
    #diveModuleView #countyOtherInput,
    #diveModuleView #callType {
        flex: 1 1 220px;
        min-width: 180px;
        padding: 10px 12px;
    }

    #diveModuleView #start-btn {
        min-width: 180px;
        padding: 12px 16px;
        font-size: 1rem;
        font-weight: 700;
    }

    #diveModuleView #incidentBox,
    #diveModuleView #active-indicator {
        flex: 1 1 100%;
        min-height: 24px;
        display: flex;
        align-items: center;
    }

    #diveModuleView h1,
    #diveModuleView h2,
    #diveModuleView h3,
    #diveModuleView label,
    #diveModuleView .recovery-field-help,
    #diveModuleView .dive-form-status,
    #diveModuleView .dive-map-status {
        font-size: 1rem;
        line-height: 1.45;
    }

    #diveModuleView #dashboard #narrativeInput,
    #diveModuleView #dashboard #incidentCommentInput {
        font-size: 1rem;
        line-height: 1.4;
        padding: 12px;
    }

    #diveModuleView .dive-time-grid {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
        gap: 12px !important;
    }

    #diveModuleView .dive-time-grid label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 0.95rem;
        font-weight: 600;
    }

    #diveModuleView #dispatchInput,
    #diveModuleView #arrivalTimeInput,
    #diveModuleView #lastSeenInput,
    #diveModuleView #codeZeroInput {
        min-height: 48px;
        font-size: 1rem;
        padding: 8px 10px;
    }

    #diveModuleView .dive-elapsed-bar {
        font-size: 1.02rem;
        line-height: 1.45;
    }

    #diveModuleView .dive-primary-action {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 1rem;
        font-weight: 700;
    }

    #diverCards .grid,
    #units .grid {
        grid-template-columns: 1fr;
    }

    .dive-unit-card-actions {
        gap: 8px;
    }

    .dive-unit-chip,
    .dive-unit-danger {
        min-height: 44px;
        font-size: 0.96rem;
    }

    .dive-unit-picker-options {
        grid-template-columns: 1fr;
    }

    .dive-unit-picker-option {
        min-height: 60px;
    }

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

    .dive-roster-detail-grid {
        grid-template-columns: 1fr;
    }

    .dive-roster-custom-skill-entry {
        flex-direction: column;
        align-items: stretch;
    }

    .dive-form-action-bar {
        flex-direction: column;
    }

    .dive-form-action-bar button,
    .dive-dictation-bar button {
        width: 100%;
    }

    .dive-dictation-bar {
        align-items: stretch;
    }

    .dive-record-card-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

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

    .recovery-toolbar {
        flex-direction: column;
    }

    .recovery-entry-tabs {
        flex-direction: column;
    }

    .dive-map-top-controls {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "placement"
            "actions"
            "address"
            "measure";
    }

    .dive-map-panel-top {
        flex-direction: column;
        align-items: stretch;
    }

    .dive-map-fullscreen-button {
        width: 100%;
    }

    .dive-map-control-row,
    .dive-map-action-row {
        flex-direction: column;
    }

    .dive-map-control-row input,
    .dive-map-control-row button,
    .dive-map-action-row button {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
    }

    .dive-map-type-row select,
    .dive-map-type-row input {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
    }

    .dive-map-placement-options {
        flex-direction: column;
    }

    .dive-map-placement-divider {
        align-self: stretch;
        text-align: center;
        padding: 4px 0;
    }

    #map {
        height: 520px !important;
    }

    .recovery-toolbar button,
    .recovery-section-toggle {
        width: 100%;
        min-height: 44px;
        font-size: 0.96rem;
    }

    .recovery-card-header {
        align-items: stretch;
    }

    .recovery-card {
        border-radius: 12px;
        padding: 14px;
    }

    .recovery-field label {
        font-size: 0.9rem;
    }

    .recovery-field input,
    .recovery-field select,
    .recovery-field textarea {
        min-height: 48px;
        font-size: 1rem;
        padding: 10px 12px;
        box-sizing: border-box;
    }

    .recovery-field textarea {
        min-height: 120px;
    }

    .personnel-checkbox-list {
        max-height: 240px;
    }

    .personnel-checkbox-item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 40px;
    }

    .personnel-checkbox-item input[type="checkbox"] {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
    }

    .recovery-action-bar {
        bottom: 8px;
        flex-direction: column;
        align-items: stretch;
    }

    .recovery-save-button {
        width: 100%;
    }

    .dive-add-unit-actions {
        flex-direction: column;
    }

    .dive-add-unit-actions button {
        width: 100%;
    }

    #diveModuleView #addModal .modal-content,
    #diveModuleView #witnessModal .modal-content,
    #diveModuleView #victimModal .modal-content,
    #diveModuleView #updateModal .modal-content {
        width: min(94vw, 560px);
        box-sizing: border-box;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 12px;
        padding: 18px;
    }

    #diveModuleView #addModal select,
    #diveModuleView #addModal input,
    #diveModuleView #witnessModal input,
    #diveModuleView #witnessModal textarea,
    #diveModuleView #victimModal input,
    #diveModuleView #victimModal textarea,
    #diveModuleView #updateModal input,
    #diveModuleView #updateModal textarea,
    #diveModuleView #updateModal select {
        width: 100% !important;
        box-sizing: border-box;
        min-height: 48px;
        font-size: 1rem;
        padding: 10px 12px;
    }

    #diveModuleView #updateModal .dive-exposure-checkbox input {
        width: 24px !important;
        min-height: 24px;
        padding: 0;
    }

    #diveModuleView #witnessModal textarea,
    #diveModuleView #victimModal textarea,
    #diveModuleView #updateModal textarea {
        min-height: 120px;
    }

    #diveModuleView #addModal button,
    #diveModuleView #witnessModal button,
    #diveModuleView #victimModal button,
    #diveModuleView #updateModal button {
        min-height: 46px;
        padding: 10px 14px;
        font-size: 0.98rem;
    }
}

.dive-stats-table {
    min-width: 760px;
}

#diverDashboard {
    overflow-x: auto;
}

.dive-table-safe {
    color: #7ee2a8;
    font-weight: 700;
}

.dive-table-warning {
    color: #ffb86b;
    font-weight: 700;
}

.dive-table-danger {
    color: #ff7b72;
    font-weight: 800;
}

.dive-table-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #37516a;
    border-radius: 6px;
    background: #101823;
}
.map-feature-disabled {
    margin: 16px;
    padding: 16px;
    border: 1px solid #d29922;
    border-radius: 10px;
    background: rgba(210, 153, 34, 0.12);
    color: #ffd98d;
    font-weight: 700;
    text-align: center;
}

[data-map-feature][hidden],
[data-map-disabled-fallback][hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Roster compliance engine: readiness badges, credential editor, task book.
   --------------------------------------------------------------------------- */
.roster-readiness-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.roster-readiness-operational { background: #1a7f37; color: #ffffff; }
.roster-readiness-warning { background: #9e6a03; color: #ffffff; }
.roster-readiness-non_operational { background: #b62324; color: #ffffff; }

.roster-compliance-panel { display: flex; flex-direction: column; gap: 18px; }
.roster-compliance-section h4 { margin: 0 0 8px; font-size: 14px; }
.roster-compliance-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid #30363d;
    border-left-width: 3px;
    border-radius: 10px;
    background: #0d141d;
}
/* Left accent reflects the live credential state so the editor reads at a glance. */
.roster-compliance-state-complete { border-left-color: #2ea043; }
.roster-compliance-state-expiring { border-left-color: #d29922; }
.roster-compliance-state-expired { border-left-color: #da3633; }
.roster-compliance-state-pending { border-left-color: #30363d; }
.roster-compliance-row-title {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    align-self: center;
}
.roster-compliance-row label,
.roster-taskbook-actions label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: #8b949e;
}

.roster-taskbook-group { margin-bottom: 14px; }
.roster-taskbook-group h4 { margin: 0 0 6px; font-size: 13px; }
.roster-taskbook-row {
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid #30363d;
    border-radius: 8px;
}
.roster-taskbook-row-title { display: flex; align-items: center; gap: 8px; }
.roster-taskbook-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-top: 8px;
}
.roster-taskbook-state {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.roster-taskbook-complete { background: #1a7f37; color: #ffffff; }
.roster-taskbook-pending { background: #30363d; color: #c9d1d9; }
.roster-taskbook-expired { background: #b62324; color: #ffffff; }
.roster-taskbook-expiring { background: #9e6a03; color: #ffffff; }

/* Roster equipment entries: in/out of service badge and inline checkbox. */
.roster-service-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.roster-service-in { background: #1a7f37; color: #ffffff; }
.roster-service-out { background: #b62324; color: #ffffff; }

.dive-roster-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}
.dive-roster-checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* Roster category scoping checkboxes in Agency Settings. */
.settings-category-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 6px;
}

.settings-category-scope label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    white-space: nowrap;
}

.settings-category-scope input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* Roster card chips reflect live compliance state so the card agrees with the readiness badge. */
.dive-roster-chip-current { border-color: rgba(34, 197, 94, 0.55); background: rgba(34, 197, 94, 0.14); }
.dive-roster-chip-expiring { border-color: rgba(234, 179, 8, 0.6); background: rgba(234, 179, 8, 0.16); }
.dive-roster-chip-expired { border-color: rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.16); }
.dive-roster-chip-pending { border-color: rgba(148, 163, 184, 0.45); background: rgba(148, 163, 184, 0.12); opacity: 0.85; }

/* Training > Certifications & Knowledge Checks member picker. */
.training-compliance-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 12px 0 16px; }
.training-compliance-controls label { display: flex; flex-direction: column; gap: 4px; min-width: 260px; }
.training-compliance-controls input[type="search"] { min-width: 220px; }

/* At-a-glance roster of members in Certifications & Knowledge Checks, mirroring
   the Roster module's category-grouped cards so a training supervisor can scan
   for gaps before drilling into any one person. */
.training-compliance-roster { margin-bottom: 20px; }
.training-compliance-roster-card {
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    width: 100%;
}
.training-compliance-roster-card:hover { border-color: #4a6275; }
.training-compliance-roster-card-selected {
    border-color: #4fa3e3;
    background: rgba(79, 163, 227, 0.12);
}

/* The roster mirrors compliance read-only; rows there have no inputs. */
.roster-compliance-row-readonly { display: flex; flex-direction: column; gap: 4px; }
.roster-compliance-doc-view {
    align-self: flex-start;
    margin-top: 2px;
    padding: 4px 12px;
    font-size: 0.8rem;
    border-radius: 999px;
}

/* Needs Attention summary atop Certifications & Knowledge Checks. */
.roster-compliance-attention { margin: 0 0 16px; }
.roster-compliance-attention-empty {
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #c9d1d9;
    font-size: 0.9rem;
}
.roster-compliance-attention-list {
    border: 1px solid #30363d;
    border-radius: 10px;
    padding: 12px 14px;
    background: rgba(148, 163, 184, 0.06);
}
.roster-compliance-attention-list h4 { margin: 0 0 8px; }
.roster-compliance-attention-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid #30363d;
    border-left-width: 4px;
    border-radius: 6px;
    background: #161b22;
    color: #c9d1d9;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.roster-compliance-attention-row:hover { background: #1c2531; }
.roster-compliance-attention-row:last-child { margin-bottom: 0; }
.roster-compliance-attention-non_operational { border-left-color: #b62324; }
.roster-compliance-attention-warning { border-left-color: #9e6a03; }
.roster-compliance-attention-name { font-weight: 600; }
.roster-compliance-attention-category { font-weight: 400; color: #8fa3b5; }
.roster-compliance-attention-detail { display: flex; flex-wrap: wrap; gap: 6px; }