:root {
    --bg: white;
    --surface: #1e40af;
    --text: black;
    --accent: red;
    --radius: 12px;
    --shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(180deg, white, var(--bg));
    color: var(--text);
    line-height: 1.5;
    margin: 0;
    padding: 10px;
}
.container {
    width: min(1000px, 92%);
    margin: 24px auto;
} 
.card {
    background: var(--surface);
    color: #ffffff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 16px;
}

#roleplayNameNoticePanel {
    background: #f59e0b;
    color: #111111;
    border: 2px solid #b45309;
}

#roleplayNameNoticePanel h2 {
    color: #111111;
}
#appVersionBadge {
    margin-top: 8px;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}
#home {
    min-height: 120px;
    background-color: #2563eb;
    width: 100%;
    color: #ffffff;
    padding: 16px;
    border-radius: var(--radius);
}
#para1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 16px 0;
    font-size: 18px;
    color: white;
}
button {
    width: auto;
    min-height: 40px;
    background-color: black;
    color: white;
    font-size: 14px;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
h1 {
    font-size: 2rem;
    color: #4b5563;
    margin-bottom: 12px;
}
h2 {
    font-size: 1.4rem;
    color: #111111;
    margin-bottom: 12px;
}
#Header-Nav-List {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 12px;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.Navbtn {
    display: inline-block;
}
.Navbtn a {
    display: inline-block;
    padding: 10px 16px;
    background: var(--accent);
    color: #111111;
    text-decoration: none;
    border-radius: 10px;
    white-space: nowrap;
}
.NavPageBtn {
    display: inline-block;
    padding: 10px 16px;
    background: #1b1b1b;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.NavPageBtn:hover {
    background: #333333;
}
.UserStatus {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

#currentUser {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ffffff;
    color: #111111;
}

.AdminTag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #0a7f2e;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.ManagementTag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #134e4a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.EditorTag,
.ModeratorTag,
.DispatchTag,
.SupportTag,
.BillingTag,
.ViewerTag,
.PoliceGoldTag,
.FireGoldTag,
.AmbulanceGoldTag,
.NationalHighwaysGoldTag,
.PoliceTag,
.FireTag,
.AmbulanceTag,
.NationalHighwaysTag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.EditorTag { background: #1d4ed8; }
.ModeratorTag { background: #7c3aed; }
.DispatchTag { background: #0f766e; }
.SupportTag { background: #0f766e; }
.BillingTag { background: #92400e; }
.ViewerTag { background: #475569; }
.PoliceGoldTag { background: #1e3a8a; }
.FireGoldTag { background: #9a3412; }
.AmbulanceGoldTag { background: #14532d; }
.NationalHighwaysGoldTag { background: #92400e; }
.PoliceTag { background: #0c4a6e; }
.FireTag { background: #b91c1c; }
.AmbulanceTag { background: #166534; }
.NationalHighwaysTag { background: #b45309; }

.LogoutBtn {
    width: auto;
    height: auto;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: #111111;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.hidden {
    display: none;
}

.AdminActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.AdminActionBtn {
    width: auto;
    height: auto;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: #1b1b1b;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

#adminPanel .AdminActionBtn,
#registeredUsersPanel .AdminActionBtn,
#registrationControlPanel .AdminActionBtn {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 8px;
}

.DangerBtn {
    background: #b91c1c;
    color: #ffffff;
}

.UserCriticalRow {
    border: 2px solid #ef4444;
    background: rgba(239, 68, 68, 0.25);
}

.NoteCategorySelect,
.NoteTextInput {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #cccccc;
}

#adminActionResult {
    margin-top: 12px;
    color: #ffffff;
}

.ProfilePrefs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

#displayPreference {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #cccccc;
}

#targetUid,
#targetUserLookup,
#targetUserSelect,
#adminRoleSelect,
#requestedUsername,
#chatChannel,
#callsignInput,
#maintenanceReasonInput,
#maintenanceExpectedAt,
#staffTagSelect,
#serviceTagSelect,
#callsignServiceSelect,
#logCategoryFilter,
#warnReason,
#mdtCategory,
#mdtConfidentiality,
#mdtTitle,
#mdtSuspects,
#mdtOfficers,
#mdtCrimes,
#mdtSentenceRecommendation,
#mdtNotes {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #cccccc;
}

#callsignResult {
    margin-top: 10px;
    color: #ffffff;
}

#tagSelectionResult {
    margin-top: 10px;
    color: #ffffff;
}

#mdtResult {
    margin-top: 10px;
    color: #ffffff;
}

#mdtOffenceSelectionSummary {
    margin-top: -2px;
    margin-bottom: 2px;
    font-size: 0.82rem;
    color: #334155;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
}

.MdtOffenceMenu {
    margin-top: 4px;
    border: 1px solid #93c5fd;
    border-radius: 12px;
    padding: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
}

.MdtOffenceMenuHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.MdtOffenceMenuHeader h3 {
    margin: 0;
    font-size: 0.95rem;
    color: #1e3a8a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

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

.MdtOffenceMenuList {
    max-height: 260px;
    overflow-y: auto;
    margin-top: 8px;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.MdtOffenceMenu.MdtOffenceMenu--expanded .MdtOffenceMenuList {
    max-height: 540px;
}

.MdtOffenceGroup {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.MdtOffenceGroupTitle {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #1e40af;
}

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

.MdtOffenceTile {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px;
    background: #f8fbff;
}

.MdtOffenceTile--selected {
    border-color: #2563eb;
    background: #dbeafe;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.MdtOffenceTileBtn {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 2px;
    min-height: 0;
}

.MdtOffenceSentence {
    display: block;
    font-size: 0.75rem;
    color: #475569;
    margin-top: 2px;
    padding: 0 2px;
}

.MdtOffenceFine {
    display: block;
    font-size: 0.75rem;
    color: #854d0e;
    margin-top: 1px;
    padding: 0 2px;
}

.MdtOffenceTileControls {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.MdtOffenceCountBtn {
    min-height: 0;
    padding: 4px 8px;
    border-radius: 8px;
    background: #1e3a8a;
    color: #ffffff;
    font-weight: 700;
}

.MdtOffenceCountBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 4px 8px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #93c5fd;
    color: #1e3a8a;
    font-weight: 800;
}

.PoliceOffenceDashboardCard {
    overflow: visible;
}

.PoliceOffenceDashboardCard label {
    color: #1e3a8a;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#logCategoryStatus {
    margin-top: 8px;
    color: #ffffff;
}

#callsignEditingService {
    margin-top: 8px;
    color: #ffffff;
}

#serviceCallsignSummary p {
    margin: 4px 0;
    color: #ffffff;
}

.WarningTag {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f39c12;
    color: #000000;
    font-size: 0.75rem;
    font-weight: 700;
}

.WarningLinkBtn {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #1b1b1b;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
}

#userWarningsList p {
    margin: 6px 0;
}

#warningNoticeText,
#warningAckStatus {
    margin-top: 8px;
    color: #ffffff;
}

#suspensionStatusText {
    margin-top: 10px;
    color: #ffffff;
}

#maintenancePageAdminResult {
    margin-top: 10px;
    color: #ffffff;
}

.AdminRequestList {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#registeredUsersList {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 6px;
}

#managementLogsList {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 6px;
}

.CardHeaderRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.CardHeaderRow h2 {
    margin-bottom: 0;
}

.CardCollapseBtn {
    padding: 6px 10px;
    border-radius: 8px;
    background: #111111;
    color: #ffffff;
    font-size: 12px;
    cursor: pointer;
}

.AdminRequestRow {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.AdminRequestRow.VoiceParticipantRow--speaking {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.LogRow {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px;
}

.ChatMessages {
    margin-top: 12px;
    max-height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 6px;
}

.ChatRow {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ChatCriticalRow {
    border: 2px solid #ef4444;
    background: rgba(239, 68, 68, 0.28);
}

.ChatRowContent {
    flex: 1;
    min-width: 0;
}

.ChatDeleteBtn {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 6px;
    min-height: 0;
    margin-left: auto;
}

.ChatAuthor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    margin-bottom: 4px;
}

.ChatForm {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ChatCard {
    position: relative;
    overflow: hidden;
}

.ChatCard::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #0f172a 0%, #475569 100%);
}

.ChatChannelBar {
    margin-top: 14px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
}

.VoicePanel {
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(203, 213, 225, 0.75);
}

.VoicePanel h3 {
    margin-bottom: 8px;
}

.VoiceErrorLog {
    margin-top: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(127, 29, 29, 0.08);
    max-height: 140px;
    overflow-y: auto;
}

.VoiceErrorLog p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #7f1d1d;
}

.VoiceErrorLogItem {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(185, 28, 28, 0.25);
}

.VoiceErrorLogItem:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.VoiceErrorLog.hidden {
    display: none;
}

.VoiceControls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 10px 0;
}

.VoiceControls #voiceRoom {
    min-width: 170px;
    border-radius: 10px;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
}

.VoiceControls #voiceRoom:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.CallChannelList {
    margin: 8px 0 10px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 8px;
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
}

.CallChannelSectionTitle {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f3c7a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.CallChannelItem {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #ffffff;
    padding: 7px 8px;
    margin-top: 6px;
}

.CallChannelLabel {
    font-weight: 700;
    color: #0f3c7a;
}

.CallChannelMeta {
    color: #334155;
    font-size: 0.82rem;
    flex: 1;
}

.ChatCard #chatChannel,
.ChatCard #chatInput {
    width: 100%;
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ChatCard #chatChannel:focus,
.ChatCard #chatInput:focus {
    outline: none;
}

.ChatCard #chatStatus {
    margin-top: 10px;
}

.ChatRow--police {
    border-left: 4px solid #2563eb;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.18) 0%, rgba(255, 255, 255, 0.12) 100%);
}

.ChatRow--fire {
    border-left: 4px solid #dc2626;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.18) 0%, rgba(255, 255, 255, 0.12) 100%);
}

.ChatRow--ambulance {
    border-left: 4px solid #16a34a;
    background: linear-gradient(90deg, rgba(22, 163, 74, 0.18) 0%, rgba(255, 255, 255, 0.12) 100%);
}

.ChatRow--dispatch {
    border-left: 4px solid #0f3c7a;
    background: linear-gradient(90deg, rgba(15, 60, 122, 0.2) 0%, rgba(220, 38, 38, 0.12) 52%, rgba(22, 163, 74, 0.12) 100%);
}

body[data-chat-channel-theme="police"] .ChatCard {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #0f172a;
    border: 1px solid #93c5fd;
}

body[data-chat-channel-theme="police"] .ChatCard::before {
    background: linear-gradient(90deg, #020617 0%, #0f3c7a 45%, #2563eb 100%);
}

body[data-chat-channel-theme="police"] .ChatCard h2,
body[data-chat-channel-theme="police"] .ChatCard p,
body[data-chat-channel-theme="police"] .ChatCard label {
    color: #0f172a;
}

body[data-chat-channel-theme="police"] .ChatChannelBar {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid #93c5fd;
}

body[data-chat-channel-theme="police"] .VoicePanel {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid #93c5fd;
}

body[data-chat-channel-theme="police"] #chatChannel,
body[data-chat-channel-theme="police"] #chatInput {
    background: #f8fbff;
    border: 1px solid #93c5fd;
    color: #0f172a;
}

body[data-chat-channel-theme="police"] #chatChannel:focus,
body[data-chat-channel-theme="police"] #chatInput:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

body[data-chat-channel-theme="police"] #chatForm .AdminActionBtn {
    background: linear-gradient(90deg, #0f3c7a 0%, #2563eb 100%);
    border: 1px solid #1d4ed8;
}

body[data-chat-channel-theme="fire"] .ChatCard {
    background: linear-gradient(180deg, #fff5f5 0%, #fee2e2 100%);
    color: #450a0a;
    border: 1px solid #fca5a5;
}

body[data-chat-channel-theme="fire"] .ChatCard::before {
    background: linear-gradient(90deg, #450a0a 0%, #991b1b 45%, #ef4444 100%);
}

body[data-chat-channel-theme="fire"] .ChatCard h2,
body[data-chat-channel-theme="fire"] .ChatCard p,
body[data-chat-channel-theme="fire"] .ChatCard label {
    color: #450a0a;
}

body[data-chat-channel-theme="fire"] .ChatChannelBar {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #fca5a5;
}

body[data-chat-channel-theme="fire"] .VoicePanel {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid #fca5a5;
}

body[data-chat-channel-theme="fire"] #chatChannel,
body[data-chat-channel-theme="fire"] #chatInput {
    background: #fff8f8;
    border: 1px solid #fca5a5;
    color: #450a0a;
}

body[data-chat-channel-theme="fire"] #chatChannel:focus,
body[data-chat-channel-theme="fire"] #chatInput:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

body[data-chat-channel-theme="fire"] #chatForm .AdminActionBtn {
    background: linear-gradient(90deg, #991b1b 0%, #ef4444 100%);
    border: 1px solid #b91c1c;
}

body[data-chat-channel-theme="ambulance"] .ChatCard {
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    color: #052e16;
    border: 1px solid #86efac;
}

body[data-chat-channel-theme="ambulance"] .ChatCard::before {
    background: linear-gradient(90deg, #052e16 0%, #166534 45%, #22c55e 100%);
}

body[data-chat-channel-theme="ambulance"] .ChatCard h2,
body[data-chat-channel-theme="ambulance"] .ChatCard p,
body[data-chat-channel-theme="ambulance"] .ChatCard label {
    color: #052e16;
}

body[data-chat-channel-theme="ambulance"] .ChatChannelBar {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #86efac;
}

body[data-chat-channel-theme="ambulance"] .VoicePanel {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid #86efac;
}

body[data-chat-channel-theme="ambulance"] #chatChannel,
body[data-chat-channel-theme="ambulance"] #chatInput {
    background: #f7fff9;
    border: 1px solid #86efac;
    color: #052e16;
}

body[data-chat-channel-theme="ambulance"] #chatChannel:focus,
body[data-chat-channel-theme="ambulance"] #chatInput:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}

body[data-chat-channel-theme="ambulance"] #chatForm .AdminActionBtn {
    background: linear-gradient(90deg, #166534 0%, #22c55e 100%);
    border: 1px solid #15803d;
}

body[data-chat-channel-theme="dispatch"] .ChatCard {
    background:
        linear-gradient(180deg, #f8fbff 0%, #ffffff 35%, #f7fff9 100%),
        repeating-linear-gradient(90deg, rgba(37, 99, 235, 0.03) 0, rgba(37, 99, 235, 0.03) 1px, transparent 1px, transparent 24px);
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

body[data-chat-channel-theme="dispatch"] .ChatCard::before {
    background: linear-gradient(90deg, #0f3c7a 0%, #dc2626 52%, #16a34a 100%);
}

body[data-chat-channel-theme="dispatch"] .ChatCard h2,
body[data-chat-channel-theme="dispatch"] .ChatCard p,
body[data-chat-channel-theme="dispatch"] .ChatCard label {
    color: #0f172a;
}

body[data-chat-channel-theme="dispatch"] .ChatChannelBar {
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid #cbd5e1;
}

body[data-chat-channel-theme="dispatch"] .VoicePanel {
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid #cbd5e1;
}

body[data-chat-channel-theme="dispatch"] #chatChannel,
body[data-chat-channel-theme="dispatch"] #chatInput {
    background: #f8fafc;
    border: 1px solid #94a3b8;
    color: #0f172a;
}

body[data-chat-channel-theme="dispatch"] #chatChannel:focus,
body[data-chat-channel-theme="dispatch"] #chatInput:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

body[data-chat-channel-theme="dispatch"] #chatForm .AdminActionBtn {
    background: linear-gradient(90deg, #0f3c7a 0%, #dc2626 52%, #16a34a 100%);
    border: 1px solid #1e293b;
}

.ServiceApplicationCard,
.ServiceApplicationHistoryCard {
    position: relative;
    overflow: hidden;
}

.ServiceApplicationCard::before,
.ServiceApplicationHistoryCard::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #0f172a 0%, #475569 100%);
}

.ServiceApplicationForm {
    margin-top: 18px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.ServiceApplicationForm select,
.ServiceApplicationForm input,
.ServiceApplicationForm textarea {
    width: 100%;
    border-radius: 10px;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ServiceApplicationForm select:focus,
.ServiceApplicationForm input:focus,
.ServiceApplicationForm textarea:focus {
    outline: none;
}

.ServiceApplicationList {
    margin-top: 16px;
}

.ServiceApplicationRow--police {
    border-left: 4px solid #2563eb;
}

.ServiceApplicationRow--fire {
    border-left: 4px solid #dc2626;
}

.ServiceApplicationRow--ambulance {
    border-left: 4px solid #16a34a;
}

.ServiceApplicationRow--national_highways {
    border-left: 4px solid #d97706;
}

.GoldApplicationsCard {
    position: relative;
    overflow: hidden;
}

.GoldApplicationsCard::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #0f172a 0%, #475569 100%);
}

.GoldApplicationsToolbar {
    margin: 14px 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
}

.GoldApplicationsToolbar select {
    min-width: 220px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
}

.GoldApplicationRow--police {
    border-left: 4px solid #2563eb;
}

.GoldApplicationRow--fire {
    border-left: 4px solid #dc2626;
}

.GoldApplicationRow--ambulance {
    border-left: 4px solid #16a34a;
}

.GoldApplicationRow--national_highways {
    border-left: 4px solid #d97706;
}

body[data-gold-applications-theme="police"] .GoldApplicationsCard {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #0f172a;
    border: 1px solid #93c5fd;
}

body[data-gold-applications-theme="police"] .GoldApplicationsCard::before {
    background: linear-gradient(90deg, #020617 0%, #0f3c7a 45%, #2563eb 100%);
}

body[data-gold-applications-theme="police"] .GoldApplicationsCard h2,
body[data-gold-applications-theme="police"] .GoldApplicationsCard p,
body[data-gold-applications-theme="police"] .GoldApplicationsCard label {
    color: #0f172a;
}

body[data-gold-applications-theme="police"] .GoldApplicationsToolbar {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid #93c5fd;
}

body[data-gold-applications-theme="police"] .GoldApplicationsToolbar select {
    background: #f8fbff;
    border-color: #93c5fd;
}

body[data-gold-applications-theme="fire"] .GoldApplicationsCard {
    background: linear-gradient(180deg, #fff5f5 0%, #fee2e2 100%);
    color: #450a0a;
    border: 1px solid #fca5a5;
}

body[data-gold-applications-theme="fire"] .GoldApplicationsCard::before {
    background: linear-gradient(90deg, #450a0a 0%, #991b1b 45%, #ef4444 100%);
}

body[data-gold-applications-theme="fire"] .GoldApplicationsCard h2,
body[data-gold-applications-theme="fire"] .GoldApplicationsCard p,
body[data-gold-applications-theme="fire"] .GoldApplicationsCard label {
    color: #450a0a;
}

body[data-gold-applications-theme="fire"] .GoldApplicationsToolbar {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #fca5a5;
}

body[data-gold-applications-theme="fire"] .GoldApplicationsToolbar select {
    background: #fff8f8;
    border-color: #fca5a5;
}

body[data-gold-applications-theme="ambulance"] .GoldApplicationsCard {
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    color: #052e16;
    border: 1px solid #86efac;
}

body[data-gold-applications-theme="ambulance"] .GoldApplicationsCard::before {
    background: linear-gradient(90deg, #052e16 0%, #166534 45%, #22c55e 100%);
}

body[data-gold-applications-theme="ambulance"] .GoldApplicationsCard h2,
body[data-gold-applications-theme="ambulance"] .GoldApplicationsCard p,
body[data-gold-applications-theme="ambulance"] .GoldApplicationsCard label {
    color: #052e16;
}

body[data-gold-applications-theme="ambulance"] .GoldApplicationsToolbar {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #86efac;
}

body[data-gold-applications-theme="ambulance"] .GoldApplicationsToolbar select {
    background: #f7fff9;
    border-color: #86efac;
}

body[data-gold-applications-theme="national_highways"] .GoldApplicationsCard {
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    color: #78350f;
    border: 1px solid #fcd34d;
}

body[data-gold-applications-theme="national_highways"] .GoldApplicationsCard::before {
    background: linear-gradient(90deg, #78350f 0%, #b45309 45%, #f59e0b 100%);
}

body[data-gold-applications-theme="national_highways"] .GoldApplicationsCard h2,
body[data-gold-applications-theme="national_highways"] .GoldApplicationsCard p,
body[data-gold-applications-theme="national_highways"] .GoldApplicationsCard label {
    color: #78350f;
}

body[data-gold-applications-theme="national_highways"] .GoldApplicationsToolbar {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid #fcd34d;
}

body[data-gold-applications-theme="national_highways"] .GoldApplicationsToolbar select {
    background: #fffaf0;
    border-color: #f59e0b;
}

.CivCallCard,
.CivCallHistoryCard {
    background: linear-gradient(180deg, #f8fbff 0%, #edf3f9 100%);
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.CivCallCard h2,
.CivCallHistoryCard h2,
.CivCallCard p,
.CivCallHistoryCard p,
.CivCallCard label {
    color: #0f172a;
}

#civCallService,
#civCallPriority,
#civCallLocation,
#civCallDetails {
    width: 100%;
    border-radius: 10px;
    padding: 10px 11px;
    border: 1px solid #94a3b8;
    background: #f8fafc;
    color: #0f172a;
}

#civCallDetails {
    min-height: 120px;
    resize: vertical;
}

#civCallService:focus,
#civCallPriority:focus,
#civCallLocation:focus,
#civCallDetails:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    background: #ffffff;
}

#civCallResult {
    margin-top: 10px;
    font-weight: 600;
}

.CivCallRow {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #cbd5e1;
    border-left: 5px solid #64748b;
    border-radius: 12px;
    padding: 12px;
    color: #0f172a;
}

.CivCallRow--police {
    border-left-color: #2563eb;
}

.CivCallRow--fire {
    border-left-color: #dc2626;
}

.CivCallRow--ambulance {
    border-left-color: #16a34a;
}

.CivCallRow--national_highways {
    border-left-color: #d97706;
}

.CivCallMeta {
    color: #334155;
    font-size: 0.88rem;
}

.DispatchCard {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, #f8fbff 0%, #ffffff 35%, #f7fff9 100%),
        repeating-linear-gradient(90deg, rgba(37, 99, 235, 0.03) 0, rgba(37, 99, 235, 0.03) 1px, transparent 1px, transparent 24px);
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.DispatchCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #0f3c7a 0%, #dc2626 52%, #16a34a 100%);
    pointer-events: none;
}

.DispatchCard h2,
.DispatchCard p {
    color: #0f172a;
}

.DispatchStatus {
    font-weight: 600;
}

.DispatchCallHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.DispatchCallService {
    font-weight: 700;
    color: #0f172a;
}

.DispatchCallRef {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #1e3a8a;
    background: #e0e7ff;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 3px 8px;
}

.DispatchPriorityBadge,
.DispatchStatusBadge {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 8px;
    border: 1px solid transparent;
    letter-spacing: 0.03em;
}

.DispatchPriorityBadge--immediate {
    background: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}

.DispatchPriorityBadge--high {
    background: #ffedd5;
    border-color: #fb923c;
    color: #9a3412;
}

.DispatchPriorityBadge--routine {
    background: #ecfeff;
    border-color: #22d3ee;
    color: #155e75;
}

.DispatchStatusBadge--submitted {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #334155;
}

.DispatchStatusBadge--dispatched {
    background: #dcfce7;
    border-color: #4ade80;
    color: #166534;
}

.DispatchStatusBadge--closed {
    background: #e2e8f0;
    border-color: #64748b;
    color: #334155;
}

.DispatchAssignRow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.DispatchInput {
    border: 1px solid #94a3b8;
    border-radius: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    color: #0f172a;
}

.DispatchInput:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    background: #ffffff;
}

.DispatchAssignRow .AdminActionBtn:not(.DangerBtn) {
    background: linear-gradient(90deg, #0f3c7a 0%, #dc2626 52%, #16a34a 100%);
    border: 1px solid #1e293b;
    color: #f8fafc;
}

.DispatchAssignRow .DispatchInput[type="text"] {
    min-width: 220px;
    flex: 1;
}

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

.DispatchDetachRow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.DispatchChannelLabel {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f3c7a;
    min-width: 120px;
}

.CivCallChannelBadge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 9px;
    border-radius: 9px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 0.84rem;
}

.DispatchUnitsBoard {
    display: grid;
    gap: 12px;
}

.DispatchUnitSection {
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.DispatchUnitSectionTitle {
    margin: 0;
    padding: 9px 12px;
    font-size: 0.9rem;
    font-weight: 700;
    border-bottom: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1e3a8a;
}

.DispatchUnitTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.DispatchUnitTable th,
.DispatchUnitTable td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
}

.DispatchUnitTable th {
    font-weight: 700;
    background: #f8fafc;
    color: #1e293b;
}

.DispatchUnitTable tbody tr:nth-child(even) {
    background: #f8fbff;
}

.DispatchUnitTableEmpty {
    color: #64748b;
    font-style: italic;
}

.DispatchUnitStatus {
    font-weight: 700;
    color: #64748b;
}

.DispatchUnitStatus--active {
    color: #15803d;
}

body[data-application-service-theme="police"] .ServiceApplicationCard,
body[data-application-service-theme="police"] .ServiceApplicationHistoryCard {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #0f172a;
    border: 1px solid #93c5fd;
}

body[data-application-service-theme="police"] .ServiceApplicationCard::before,
body[data-application-service-theme="police"] .ServiceApplicationHistoryCard::before {
    background: linear-gradient(90deg, #020617 0%, #0f3c7a 45%, #2563eb 100%);
}

body[data-application-service-theme="police"] .ServiceApplicationCard h2,
body[data-application-service-theme="police"] .ServiceApplicationHistoryCard h2,
body[data-application-service-theme="police"] .ServiceApplicationCard p,
body[data-application-service-theme="police"] .ServiceApplicationHistoryCard p,
body[data-application-service-theme="police"] .ServiceApplicationCard label {
    color: #0f172a;
}

body[data-application-service-theme="police"] .ServiceApplicationForm {
    background: rgba(59, 130, 246, 0.1);
    border-color: #93c5fd;
}

body[data-application-service-theme="police"] .ServiceApplicationForm select,
body[data-application-service-theme="police"] .ServiceApplicationForm input,
body[data-application-service-theme="police"] .ServiceApplicationForm textarea {
    background: #f8fbff;
    border-color: #93c5fd;
    color: #0f172a;
}

body[data-application-service-theme="police"] .ServiceApplicationForm select:focus,
body[data-application-service-theme="police"] .ServiceApplicationForm input:focus,
body[data-application-service-theme="police"] .ServiceApplicationForm textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

body[data-application-service-theme="police"] #serviceApplicationForm .AdminActionBtn {
    background: linear-gradient(90deg, #0f3c7a 0%, #2563eb 100%);
    border: 1px solid #1d4ed8;
}

body[data-application-service-theme="fire"] .ServiceApplicationCard,
body[data-application-service-theme="fire"] .ServiceApplicationHistoryCard {
    background: linear-gradient(180deg, #fff5f5 0%, #fee2e2 100%);
    color: #450a0a;
    border: 1px solid #fca5a5;
}

body[data-application-service-theme="fire"] .ServiceApplicationCard::before,
body[data-application-service-theme="fire"] .ServiceApplicationHistoryCard::before {
    background: linear-gradient(90deg, #450a0a 0%, #991b1b 45%, #ef4444 100%);
}

body[data-application-service-theme="fire"] .ServiceApplicationCard h2,
body[data-application-service-theme="fire"] .ServiceApplicationHistoryCard h2,
body[data-application-service-theme="fire"] .ServiceApplicationCard p,
body[data-application-service-theme="fire"] .ServiceApplicationHistoryCard p,
body[data-application-service-theme="fire"] .ServiceApplicationCard label {
    color: #450a0a;
}

body[data-application-service-theme="fire"] .ServiceApplicationForm {
    background: rgba(239, 68, 68, 0.08);
    border-color: #fca5a5;
}

body[data-application-service-theme="fire"] .ServiceApplicationForm select,
body[data-application-service-theme="fire"] .ServiceApplicationForm input,
body[data-application-service-theme="fire"] .ServiceApplicationForm textarea {
    background: #fff8f8;
    border-color: #fca5a5;
    color: #450a0a;
}

body[data-application-service-theme="fire"] .ServiceApplicationForm select:focus,
body[data-application-service-theme="fire"] .ServiceApplicationForm input:focus,
body[data-application-service-theme="fire"] .ServiceApplicationForm textarea:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

body[data-application-service-theme="fire"] #serviceApplicationForm .AdminActionBtn {
    background: linear-gradient(90deg, #991b1b 0%, #ef4444 100%);
    border: 1px solid #b91c1c;
}

body[data-application-service-theme="ambulance"] .ServiceApplicationCard,
body[data-application-service-theme="ambulance"] .ServiceApplicationHistoryCard {
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    color: #052e16;
    border: 1px solid #86efac;
}

body[data-application-service-theme="ambulance"] .ServiceApplicationCard::before,
body[data-application-service-theme="ambulance"] .ServiceApplicationHistoryCard::before {
    background: linear-gradient(90deg, #052e16 0%, #166534 45%, #22c55e 100%);
}

body[data-application-service-theme="ambulance"] .ServiceApplicationCard h2,
body[data-application-service-theme="ambulance"] .ServiceApplicationHistoryCard h2,
body[data-application-service-theme="ambulance"] .ServiceApplicationCard p,
body[data-application-service-theme="ambulance"] .ServiceApplicationHistoryCard p,
body[data-application-service-theme="ambulance"] .ServiceApplicationCard label {
    color: #052e16;
}

body[data-application-service-theme="ambulance"] .ServiceApplicationForm {
    background: rgba(34, 197, 94, 0.08);
    border-color: #86efac;
}

body[data-application-service-theme="ambulance"] .ServiceApplicationForm select,
body[data-application-service-theme="ambulance"] .ServiceApplicationForm input,
body[data-application-service-theme="ambulance"] .ServiceApplicationForm textarea {
    background: #f7fff9;
    border-color: #86efac;
    color: #052e16;
}

body[data-application-service-theme="ambulance"] .ServiceApplicationForm select:focus,
body[data-application-service-theme="ambulance"] .ServiceApplicationForm input:focus,
body[data-application-service-theme="ambulance"] .ServiceApplicationForm textarea:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}

body[data-application-service-theme="ambulance"] #serviceApplicationForm .AdminActionBtn {
    background: linear-gradient(90deg, #166534 0%, #22c55e 100%);
    border: 1px solid #15803d;
}

body[data-application-service-theme="national_highways"] .ServiceApplicationCard,
body[data-application-service-theme="national_highways"] .ServiceApplicationHistoryCard {
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    color: #78350f;
    border: 1px solid #fcd34d;
}

body[data-application-service-theme="national_highways"] .ServiceApplicationCard::before,
body[data-application-service-theme="national_highways"] .ServiceApplicationHistoryCard::before {
    background: linear-gradient(90deg, #78350f 0%, #b45309 45%, #f59e0b 100%);
}

body[data-application-service-theme="national_highways"] .ServiceApplicationCard h2,
body[data-application-service-theme="national_highways"] .ServiceApplicationHistoryCard h2,
body[data-application-service-theme="national_highways"] .ServiceApplicationCard p,
body[data-application-service-theme="national_highways"] .ServiceApplicationHistoryCard p,
body[data-application-service-theme="national_highways"] .ServiceApplicationCard label {
    color: #78350f;
}

body[data-application-service-theme="national_highways"] .ServiceApplicationForm {
    background: rgba(245, 158, 11, 0.1);
    border-color: #fcd34d;
}

body[data-application-service-theme="national_highways"] .ServiceApplicationForm select,
body[data-application-service-theme="national_highways"] .ServiceApplicationForm input,
body[data-application-service-theme="national_highways"] .ServiceApplicationForm textarea {
    background: #fffaf0;
    border-color: #f59e0b;
    color: #78350f;
}

body[data-application-service-theme="national_highways"] .ServiceApplicationForm select:focus,
body[data-application-service-theme="national_highways"] .ServiceApplicationForm input:focus,
body[data-application-service-theme="national_highways"] .ServiceApplicationForm textarea:focus {
    border-color: #d97706;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.14);
}

body[data-application-service-theme="national_highways"] #serviceApplicationForm .AdminActionBtn {
    background: linear-gradient(90deg, #92400e 0%, #f59e0b 100%);
    border: 1px solid #b45309;
}

#chatInput {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    resize: vertical;
    min-height: 90px;
}

#profileSaveResult {
    margin-top: 10px;
    color: #ffffff;
}

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

.NavQuickLinkOption {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.16);
}

#navQuickLinksResult {
    margin-top: 10px;
    color: #ffffff;
}

#claimAdminResult {
    margin-top: 10px;
    color: #ffffff;
}
#registerForm {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

#registerForm input,
#loginForm input,
#loginForm label,
#registerForm label {
    width: 100%;
}

#registerForm input,
#loginForm input {
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}

@media (max-width: 768px) {
    body {
        padding: 8px;
    }

    #Header-Nav-List {
        gap: 8px;
        padding: 8px;
    }

    .UserStatus {
        margin-left: 0;
        width: 100%;
    }

    #currentUser {
        flex: 1;
    }
}

#dashboardCardQuickActions {
    margin-top: 10px;
}

.MdtCard {
    background: linear-gradient(180deg, #f8fbff 0%, #edf3f9 100%);
    color: #0f172a;
    border: 1px solid #cbd5e1;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
    position: relative;
    overflow: hidden;
}

.MdtCard::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #0f172a 0%, #1d4ed8 45%, #38bdf8 100%);
}

.ServiceConsoleHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.ServiceConsoleHeader h2 {
    margin-bottom: 0;
}

.ServiceConsoleLabel {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #64748b;
    margin-bottom: 4px;
}

.ServiceConsoleCodes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.ServiceConsoleCode {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ServiceConsoleHeader--fire .ServiceConsoleCode {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.ServiceConsoleHeader--ambulance .ServiceConsoleCode {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.ServiceConsoleHeader--national-highways .ServiceConsoleCode {
    background: #ffedd5;
    border-color: #fdba74;
    color: #9a3412;
}

.ServiceConsoleHeader--all .ServiceConsoleCode {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #0c4a6e;
}

.MdtCard h2 {
    color: #0f172a;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin-top: 4px;
}

.SopCard {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f8fbff 0%, #edf3f9 100%);
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.SopCard::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #0f172a 0%, #1d4ed8 45%, #38bdf8 100%);
}

.SopCard h2 {
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.SopAccordion {
    display: block;
}

.SopAccordion summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    font-size: 1.02rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.2);
    border: 1px solid rgba(100, 116, 139, 0.25);
    margin-bottom: 10px;
}

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

.SopAccordion summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    background: rgba(15, 23, 42, 0.14);
}

.SopAccordion[open] summary::after {
    content: "-";
}

.SopCard > p {
    color: #334155;
    margin-bottom: 10px;
}

.SopList {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
}

.SopList li {
    color: #1e293b;
    line-height: 1.45;
}

.SopEditor {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(100, 116, 139, 0.35);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.SopEditor label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.SopEditorInput {
    width: 100%;
    border: 1px solid #94a3b8;
    border-radius: 10px;
    padding: 10px 11px;
    background: #f8fafc;
    color: #0f172a;
    resize: vertical;
}

.SopEditorInput:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    background: #ffffff;
}

#sopResult {
    margin-top: 4px;
    font-weight: 600;
}

.MdtCard > p {
    color: #334155;
}

.PoliceMdtCard {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 246, 255, 0.98) 100%),
        repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.03) 0, rgba(15, 23, 42, 0.03) 1px, transparent 1px, transparent 28px);
}

.PoliceMdtCard::before {
    height: 8px;
    background: linear-gradient(90deg, #020617 0%, #0f3c7a 35%, #2563eb 70%, #7dd3fc 100%);
}

.PoliceMdtTopbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f172a 0%, #102b56 55%, #123d7a 100%);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.PoliceMdtTopbar h2 {
    margin: 2px 0 0;
    color: #f8fafc;
    font-size: 1.18rem;
    letter-spacing: 0.08em;
}

.PoliceMdtSystemLabel {
    color: #93c5fd !important;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.PoliceMdtIntro {
    margin-bottom: 8px;
    color: #334155;
    max-width: 70ch;
}

.PoliceMdtStatusBar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.PoliceMdtStatusChip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(219, 234, 254, 0.12);
    border: 1px solid rgba(125, 211, 252, 0.35);
    color: #e0f2fe;
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.MdtForm {
    margin-top: 18px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.MdtForm label,
.MdtRecord label,
.MdtRecord p {
    color: #334155;
}

.MdtForm label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.MdtCard #mdtTitle,
.MdtCard #mdtCategory,
.MdtCard #mdtConfidentiality,
.MdtCard #mdtSuspects,
.MdtCard #mdtOfficers,
.MdtCard #mdtCrimeSearch,
.MdtCard #mdtCrimes,
.MdtCard #mdtSentenceRecommendation,
.MdtCard #mdtNotes,
.MdtFieldInput {
    width: 100%;
    background: #f8fafc;
    color: #0f172a;
    border: 1px solid #94a3b8;
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.MdtCard #mdtTitle:focus,
.MdtCard #mdtCategory:focus,
.MdtCard #mdtConfidentiality:focus,
.MdtCard #mdtSuspects:focus,
.MdtCard #mdtOfficers:focus,
.MdtCard #mdtCrimeSearch:focus,
.MdtCard #mdtCrimes:focus,
.MdtCard #mdtNotes:focus,
.MdtFieldInput:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
    background: #ffffff;
}

.MdtCard #mdtNotes,
.MdtNotesField {
    min-height: 140px;
}

.MdtCard #mdtSuspects,
.MdtCard #mdtOfficers,
.MdtFieldTextarea {
    min-height: 78px;
    resize: vertical;
}

.MdtCard .AdminActionBtn {
    background: #0f172a;
    color: #f8fafc;
    border: 1px solid #0f172a;
}

.MdtCard .AdminActionBtn:hover {
    background: #1e293b;
}

.MdtPrimaryBtn {
    background: #0f3c7a !important;
    border-color: #0f3c7a !important;
}

.MdtPrimaryBtn:hover {
    background: #124995 !important;
}

body[data-required-role="police"] header h1,
body[data-required-role="fire"] header h1,
body[data-required-role="ambulance"] header h1,
body[data-required-role="dispatch"] header h1 {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 12px;
    color: #f8fafc;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

body[data-required-role="police"] header h1 {
    background: linear-gradient(90deg, #020617 0%, #0f3c7a 45%, #2563eb 100%);
}

body[data-required-role="fire"] header h1 {
    background: linear-gradient(90deg, #450a0a 0%, #991b1b 45%, #ef4444 100%);
}

body[data-required-role="ambulance"] header h1 {
    background: linear-gradient(90deg, #052e16 0%, #166534 45%, #22c55e 100%);
}

body[data-required-role="dispatch"] header h1 {
    background: linear-gradient(90deg, #0f3c7a 0%, #dc2626 50%, #16a34a 100%);
}

body[data-required-role="police"] .Navbtn a,
body[data-required-role="fire"] .Navbtn a,
body[data-required-role="ambulance"] .Navbtn a,
body[data-required-role="dispatch"] .Navbtn a {
    color: #f8fafc;
    border: 1px solid transparent;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

body[data-required-role="police"] .Navbtn a {
    background: linear-gradient(90deg, #0f172a 0%, #1d4ed8 100%);
    border-color: #1e3a8a;
}

body[data-required-role="police"] .Navbtn a:hover {
    background: linear-gradient(90deg, #172554 0%, #2563eb 100%);
}

body[data-required-role="fire"] .Navbtn a {
    background: linear-gradient(90deg, #7f1d1d 0%, #dc2626 100%);
    border-color: #991b1b;
}

body[data-required-role="fire"] .Navbtn a:hover {
    background: linear-gradient(90deg, #991b1b 0%, #ef4444 100%);
}

body[data-required-role="ambulance"] .Navbtn a {
    background: linear-gradient(90deg, #166534 0%, #16a34a 100%);
    border-color: #166534;
}

body[data-required-role="ambulance"] .Navbtn a:hover {
    background: linear-gradient(90deg, #15803d 0%, #22c55e 100%);
}

body[data-required-role="dispatch"] .Navbtn a {
    background: linear-gradient(90deg, #0f3c7a 0%, #dc2626 50%, #16a34a 100%);
    border-color: #1e293b;
}

body[data-required-role="dispatch"] .Navbtn a:hover {
    background: linear-gradient(90deg, #1d4ed8 0%, #ef4444 50%, #22c55e 100%);
}

body[data-required-role="police"] #currentUser,
body[data-required-role="fire"] #currentUser,
body[data-required-role="ambulance"] #currentUser,
body[data-required-role="dispatch"] #currentUser {
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

body[data-required-role="police"] #currentUser {
    background: linear-gradient(90deg, #0f172a 0%, #1e40af 100%);
}

body[data-required-role="fire"] #currentUser {
    background: linear-gradient(90deg, #7f1d1d 0%, #dc2626 100%);
}

body[data-required-role="ambulance"] #currentUser {
    background: linear-gradient(90deg, #166534 0%, #16a34a 100%);
}

body[data-required-role="dispatch"] #currentUser {
    background: linear-gradient(90deg, #1e3a8a 0%, #b91c1c 50%, #166534 100%);
}

body[data-required-role="police"] main > .card:first-child,
body[data-required-role="fire"] main > .card:first-child,
body[data-required-role="ambulance"] main > .card:first-child,
body[data-required-role="dispatch"] main > .card:first-child {
    color: #f8fafc;
    border: 1px solid transparent;
}

body[data-required-role="police"] .SopCard {
    background:
        linear-gradient(180deg, #f8fbff 0%, #eaf2ff 100%),
        repeating-linear-gradient(90deg, rgba(37, 99, 235, 0.03) 0, rgba(37, 99, 235, 0.03) 1px, transparent 1px, transparent 24px);
    border-color: #93c5fd;
}

body[data-required-role="police"] .SopCard::before {
    background: linear-gradient(90deg, #020617 0%, #0f3c7a 45%, #2563eb 100%);
}

body[data-required-role="police"] .SopCard h2,
body[data-required-role="police"] .SopCard > p,
body[data-required-role="police"] .SopList li {
    color: #1e3a8a;
}

body[data-required-role="police"] .SopAccordion summary {
    background: rgba(37, 99, 235, 0.1);
    border-color: #93c5fd;
    color: #1e3a8a;
}

body[data-required-role="police"] .SopEditorInput {
    border-color: #93c5fd;
    background: #f8fbff;
}

body[data-required-role="police"] .SopEditorInput:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

body[data-required-role="fire"] .SopCard {
    background:
        linear-gradient(180deg, #fff8f8 0%, #fff0f0 100%),
        repeating-linear-gradient(90deg, rgba(220, 38, 38, 0.03) 0, rgba(220, 38, 38, 0.03) 1px, transparent 1px, transparent 24px);
    border-color: #fca5a5;
}

body[data-required-role="fire"] .SopCard::before {
    background: linear-gradient(90deg, #450a0a 0%, #991b1b 45%, #ef4444 100%);
}

body[data-required-role="fire"] .SopCard h2,
body[data-required-role="fire"] .SopCard > p,
body[data-required-role="fire"] .SopList li {
    color: #7f1d1d;
}

body[data-required-role="fire"] .SopAccordion summary {
    background: rgba(220, 38, 38, 0.08);
    border-color: #fca5a5;
    color: #7f1d1d;
}

body[data-required-role="fire"] .SopEditorInput {
    border-color: #fca5a5;
    background: #fff8f8;
}

body[data-required-role="fire"] .SopEditorInput:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

body[data-required-role="ambulance"] .SopCard {
    background:
        linear-gradient(180deg, #f5fff8 0%, #ecfdf3 100%),
        repeating-linear-gradient(90deg, rgba(22, 163, 74, 0.03) 0, rgba(22, 163, 74, 0.03) 1px, transparent 1px, transparent 24px);
    border-color: #86efac;
}

body[data-required-role="ambulance"] .SopCard::before {
    background: linear-gradient(90deg, #052e16 0%, #166534 45%, #22c55e 100%);
}

body[data-required-role="ambulance"] .SopCard h2,
body[data-required-role="ambulance"] .SopCard > p,
body[data-required-role="ambulance"] .SopList li {
    color: #14532d;
}

body[data-required-role="ambulance"] .SopAccordion summary {
    background: rgba(22, 163, 74, 0.08);
    border-color: #86efac;
    color: #14532d;
}

body[data-required-role="ambulance"] .SopEditorInput {
    border-color: #86efac;
    background: #f7fff9;
}

body[data-required-role="ambulance"] .SopEditorInput:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}

body[data-required-role="police"] main > .card:first-child {
    background: linear-gradient(135deg, #0f172a 0%, #0f3c7a 55%, #2563eb 100%);
}

body[data-required-role="fire"] main > .card:first-child {
    background: linear-gradient(135deg, #450a0a 0%, #991b1b 55%, #ef4444 100%);
}

body[data-required-role="ambulance"] main > .card:first-child {
    background: linear-gradient(135deg, #052e16 0%, #166534 55%, #22c55e 100%);
}

body[data-required-role="police"] main > .card:first-child h2,
body[data-required-role="fire"] main > .card:first-child h2,
body[data-required-role="ambulance"] main > .card:first-child h2 {
    color: #f8fafc;
}

@media (max-width: 768px) {
    body[data-required-role="police"] header h1,
    body[data-required-role="fire"] header h1,
    body[data-required-role="ambulance"] header h1 {
        width: 100%;
        padding: 12px;
        font-size: 1.5rem;
    }

    body[data-required-role="police"] .Navbtn a,
    body[data-required-role="fire"] .Navbtn a,
    body[data-required-role="ambulance"] .Navbtn a {
        width: 100%;
        text-align: center;
    }
}

.MdtUtilityBtn {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.MdtUtilityBtn:hover {
    background: #cbd5e1 !important;
}

.MdtDangerBtn {
    background: #b91c1c !important;
    border-color: #991b1b !important;
}

.MdtList {
    margin-top: 18px;
    gap: 14px;
}

.MdtRecord {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    position: relative;
}

.MdtRecord::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    border-radius: 14px 0 0 14px;
    background: #475569;
}

.MdtRecord--police::before {
    background: #1d4ed8;
}

body[data-mdt-service="police"] .MdtRecord {
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%),
        repeating-linear-gradient(90deg, rgba(37, 99, 235, 0.03) 0, rgba(37, 99, 235, 0.03) 1px, transparent 1px, transparent 24px);
}

body[data-mdt-service="police"] .MdtRecordToggle {
    background: linear-gradient(90deg, #020617 0%, #102a53 50%, #18458c 100%) !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-mdt-service="police"] .MdtCaseId {
    background: linear-gradient(90deg, #dbeafe 0%, #eff6ff 100%);
    border: 1px solid #93c5fd;
}

body[data-mdt-service="police"] .MdtForm {
    border-color: #93c5fd;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 10px 24px rgba(37, 99, 235, 0.08);
}

body[data-mdt-service="police"] .MdtForm label {
    color: #1e3a8a;
}

body[data-mdt-service="police"] #mdtTitle,
body[data-mdt-service="police"] #mdtCategory,
body[data-mdt-service="police"] #mdtConfidentiality,
body[data-mdt-service="police"] #mdtSuspects,
body[data-mdt-service="police"] #mdtOfficers,
body[data-mdt-service="police"] #mdtCrimeSearch,
body[data-mdt-service="police"] #mdtCrimes,
body[data-mdt-service="police"] #mdtSentenceRecommendation,
body[data-mdt-service="police"] #mdtNotes {
    border-color: #93c5fd;
    background: #f8fbff;
}

body[data-mdt-service="police"] #mdtSentenceRecommendation {
    font-weight: 600;
}

body[data-mdt-service="police"] .MdtOffenceMenu {
    border-color: #93c5fd;
}

body[data-mdt-service="police"] #mdtCrimeSearch {
    background-image: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

body[data-mdt-service="police"] .MdtPrimaryBtn {
    background: linear-gradient(90deg, #0f3c7a 0%, #18458c 100%) !important;
}

body[data-mdt-service="fire"] .MdtCard {
    background:
        linear-gradient(180deg, rgba(255, 251, 251, 0.98) 0%, rgba(254, 242, 242, 0.98) 100%),
        repeating-linear-gradient(90deg, rgba(127, 29, 29, 0.04) 0, rgba(127, 29, 29, 0.04) 1px, transparent 1px, transparent 28px);
    border-color: #fca5a5;
}

body[data-mdt-service="fire"] .MdtCard::before {
    background: linear-gradient(90deg, #450a0a 0%, #991b1b 45%, #ef4444 100%);
}

body[data-mdt-service="fire"] .MdtCard h2,
body[data-mdt-service="fire"] .MdtSectionTitle {
    color: #7f1d1d;
}

body[data-mdt-service="fire"] .MdtCard > p,
body[data-mdt-service="fire"] .MdtRecord p:not(.MdtCaseId):not(.MdtMeta):not(.MdtSectionTitle) {
    color: #7f1d1d;
}

body[data-mdt-service="fire"] .MdtForm {
    border-color: #fca5a5;
    background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 10px 24px rgba(220, 38, 38, 0.08);
}

body[data-mdt-service="fire"] .MdtForm label {
    color: #991b1b;
}

body[data-mdt-service="fire"] #mdtTitle,
body[data-mdt-service="fire"] #mdtCategory,
body[data-mdt-service="fire"] #mdtConfidentiality,
body[data-mdt-service="fire"] #mdtSuspects,
body[data-mdt-service="fire"] #mdtOfficers,
body[data-mdt-service="fire"] #mdtCrimes,
body[data-mdt-service="fire"] #mdtNotes,
body[data-mdt-service="fire"] .MdtFieldInput {
    border-color: #fca5a5;
    background: #fff7f7;
}

body[data-mdt-service="fire"] .MdtFieldInput:focus,
body[data-mdt-service="fire"] #mdtTitle:focus,
body[data-mdt-service="fire"] #mdtCategory:focus,
body[data-mdt-service="fire"] #mdtConfidentiality:focus,
body[data-mdt-service="fire"] #mdtSuspects:focus,
body[data-mdt-service="fire"] #mdtOfficers:focus,
body[data-mdt-service="fire"] #mdtCrimes:focus,
body[data-mdt-service="fire"] #mdtNotes:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

body[data-mdt-service="fire"] .MdtRecord {
    background:
        linear-gradient(180deg, #ffffff 0%, #fff5f5 100%),
        repeating-linear-gradient(90deg, rgba(220, 38, 38, 0.03) 0, rgba(220, 38, 38, 0.03) 1px, transparent 1px, transparent 24px);
    border-color: #fecaca;
}

body[data-mdt-service="fire"] .MdtRecordToggle {
    background: linear-gradient(90deg, #450a0a 0%, #7f1d1d 45%, #b91c1c 100%) !important;
    border-color: #7f1d1d !important;
}

body[data-mdt-service="fire"] .MdtCaseId {
    background: linear-gradient(90deg, #fee2e2 0%, #fff1f2 100%);
    border: 1px solid #fca5a5;
    color: #7f1d1d;
}

body[data-mdt-service="fire"] .MdtPrimaryBtn {
    background: linear-gradient(90deg, #991b1b 0%, #dc2626 100%) !important;
    border-color: #991b1b !important;
}

body[data-mdt-service="ambulance"] .MdtCard {
    background:
        linear-gradient(180deg, rgba(247, 254, 249, 0.98) 0%, rgba(240, 253, 244, 0.98) 100%),
        repeating-linear-gradient(90deg, rgba(20, 83, 45, 0.04) 0, rgba(20, 83, 45, 0.04) 1px, transparent 1px, transparent 28px);
    border-color: #86efac;
}

body[data-mdt-service="ambulance"] .MdtCard::before {
    background: linear-gradient(90deg, #052e16 0%, #166534 45%, #22c55e 100%);
}

body[data-mdt-service="ambulance"] .MdtCard h2,
body[data-mdt-service="ambulance"] .MdtSectionTitle {
    color: #14532d;
}

body[data-mdt-service="ambulance"] .MdtCard > p,
body[data-mdt-service="ambulance"] .MdtRecord p:not(.MdtCaseId):not(.MdtMeta):not(.MdtSectionTitle) {
    color: #166534;
}

body[data-mdt-service="ambulance"] .MdtForm {
    border-color: #86efac;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 10px 24px rgba(34, 197, 94, 0.08);
}

body[data-mdt-service="ambulance"] .MdtForm label {
    color: #166534;
}

body[data-mdt-service="ambulance"] #mdtTitle,
body[data-mdt-service="ambulance"] #mdtCategory,
body[data-mdt-service="ambulance"] #mdtConfidentiality,
body[data-mdt-service="ambulance"] #mdtSuspects,
body[data-mdt-service="ambulance"] #mdtOfficers,
body[data-mdt-service="ambulance"] #mdtCrimes,
body[data-mdt-service="ambulance"] #mdtNotes,
body[data-mdt-service="ambulance"] .MdtFieldInput {
    border-color: #86efac;
    background: #f7fff9;
}

body[data-mdt-service="ambulance"] .MdtFieldInput:focus,
body[data-mdt-service="ambulance"] #mdtTitle:focus,
body[data-mdt-service="ambulance"] #mdtCategory:focus,
body[data-mdt-service="ambulance"] #mdtConfidentiality:focus,
body[data-mdt-service="ambulance"] #mdtSuspects:focus,
body[data-mdt-service="ambulance"] #mdtOfficers:focus,
body[data-mdt-service="ambulance"] #mdtCrimes:focus,
body[data-mdt-service="ambulance"] #mdtNotes:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

body[data-mdt-service="ambulance"] .MdtRecord {
    background:
        linear-gradient(180deg, #ffffff 0%, #f3fff7 100%),
        repeating-linear-gradient(90deg, rgba(34, 197, 94, 0.03) 0, rgba(34, 197, 94, 0.03) 1px, transparent 1px, transparent 24px);
    border-color: #bbf7d0;
}

body[data-mdt-service="ambulance"] .MdtRecordToggle {
    background: linear-gradient(90deg, #052e16 0%, #14532d 45%, #15803d 100%) !important;
    border-color: #14532d !important;
}

body[data-mdt-service="ambulance"] .MdtCaseId {
    background: linear-gradient(90deg, #dcfce7 0%, #f0fdf4 100%);
    border: 1px solid #86efac;
    color: #14532d;
}

body[data-mdt-service="ambulance"] .MdtPrimaryBtn {
    background: linear-gradient(90deg, #166534 0%, #16a34a 100%) !important;
    border-color: #166534 !important;
}

.MdtRecord--fire::before {
    background: #dc2626;
}

.MdtRecord--ambulance::before {
    background: #15803d;
}

.MdtRecordToggle {
    display: block;
    width: 100%;
    text-align: left;
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%) !important;
    color: #f8fafc !important;
    border: 1px solid #0f172a !important;
    border-radius: 10px !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 12px 14px !important;
}

.MdtRecordHeader {
    display: flex;
    align-items: center;
    gap: 10px;
}

.MdtRecordHeader .MdtRecordToggle {
    flex: 1;
}

.MdtConfidentialityBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.MdtConfidentialityBadge--standard {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e3a8a;
}

.MdtConfidentialityBadge--confidential {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.MdtConfidentialityMeta {
    margin-top: 8px;
}

.MdtSummaryLine {
    margin-top: 8px;
    color: #475569 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

.MdtOpsStrip {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.MdtOpsChip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.MdtOpsChip--grade {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1e3a8a;
}

.MdtOpsChip--grade.MdtOpsChip--critical {
    border-color: #fecaca;
    background: #fee2e2;
    color: #991b1b;
}

.MdtOpsChip--grade.MdtOpsChip--high {
    border-color: #fed7aa;
    background: #ffedd5;
    color: #9a3412;
}

.MdtOpsChip--grade.MdtOpsChip--medium {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

.MdtOpsChip--grade.MdtOpsChip--low {
    border-color: #bbf7d0;
    background: #dcfce7;
    color: #166534;
}

.MdtCaseId {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #dbeafe;
    color: #0f172a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.MdtSectionTitle {
    margin-top: 14px;
    margin-bottom: 8px;
    color: #0f172a !important;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.MdtRecord p:not(.MdtCaseId):not(.MdtMeta):not(.MdtSectionTitle) {
    margin-top: 10px;
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
}

.MdtMeta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #cbd5e1;
    color: #334155 !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

.MdtCard #mdtResult {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #0f172a;
    font-weight: 600;
}

body[data-mdt-service="all"] .MdtCard::before {
    background: linear-gradient(90deg, #0f172a 0%, #1d4ed8 33%, #dc2626 66%, #15803d 100%);
}

.image-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}
.image-box {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex: 1 1 220px;
    max-width: 300px;
}
.image-box-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}
.image-box-body {
    padding: 14px;
}
.image-box-body h3 {
    font-size: 1.05rem;
    color: #ffffff;
    margin-bottom: 6px;
}
.image-box-body p {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
}

.SiteFooter {
    margin-top: 32px;
    padding: 18px 20px 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.3);
    color: #475569;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body[data-mdt-service="all"] .MdtRecordToggle {
    background: linear-gradient(90deg, #0f172a 0%, #1e3a8a 40%, #334155 100%) !important;
}

@media (min-width: 880px) {
    .MdtForm {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
        row-gap: 10px;
        align-items: start;
    }

    body[data-mdt-service="police"] .MdtForm {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 12px;
    }

    body[data-mdt-service="police"] .MdtForm label[for="mdtTitle"],
    body[data-mdt-service="police"] .MdtForm #mdtTitle,
    body[data-mdt-service="police"] .MdtForm label[for="mdtNotes"],
    body[data-mdt-service="police"] .MdtForm #mdtNotes,
    body[data-mdt-service="police"] .MdtForm button[type="submit"] {
        grid-column: 1 / -1;
    }

    body[data-mdt-service="police"] .MdtForm label[for="mdtCategory"],
    body[data-mdt-service="police"] .MdtForm #mdtCategory,
    body[data-mdt-service="police"] .MdtForm label[for="mdtConfidentiality"],
    body[data-mdt-service="police"] .MdtForm #mdtConfidentiality,
    body[data-mdt-service="police"] .MdtForm label[for="mdtSuspects"],
    body[data-mdt-service="police"] .MdtForm #mdtSuspects,
    body[data-mdt-service="police"] .MdtForm label[for="mdtOfficers"],
    body[data-mdt-service="police"] .MdtForm #mdtOfficers,
    body[data-mdt-service="police"] .MdtForm label[for="mdtCrimeSearch"],
    body[data-mdt-service="police"] .MdtForm #mdtCrimeSearch,
    body[data-mdt-service="police"] .MdtForm label[for="mdtCrimes"],
    body[data-mdt-service="police"] .MdtForm #mdtCrimes,
    body[data-mdt-service="police"] .MdtForm label[for="mdtSentenceRecommendation"],
    body[data-mdt-service="police"] .MdtForm #mdtSentenceRecommendation {
        grid-column: span 6;
    }

    .MdtForm label[for="mdtTitle"],
    .MdtForm #mdtTitle,
    .MdtForm label[for="mdtNotes"],
    .MdtForm #mdtNotes,
    .MdtForm #mdtResult,
    .MdtForm button[type="submit"] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .MdtCard {
        padding: 16px;
    }

    .SopCard {
        padding: 16px;
    }

    .SopList {
        padding-left: 18px;
        gap: 7px;
    }

    .MdtOffenceTileControls {
        justify-content: flex-start;
    }

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

    .ServiceConsoleHeader {
        flex-direction: column;
    }

    .ServiceConsoleCodes {
        width: 100%;
        justify-content: flex-start;
    }

    .MdtRecordHeader {
        flex-direction: column;
        align-items: stretch;
    }

    .MdtConfidentialityBadge {
        width: 100%;
    }

    .PoliceMdtTopbar {
        padding: 12px;
        flex-direction: column;
    }

    .PoliceMdtStatusBar {
        width: 100%;
        justify-content: flex-start;
    }

    .MdtForm {
        padding: 12px;
    }

    .MdtRecord {
        padding: 14px 14px 14px 16px;
    }

    .MdtCaseId {
        width: 100%;
        justify-content: center;
    }

    .PoliceMdtIntro {
        font-size: 0.94rem;
    }

    .GoldApplicationsToolbar select {
        width: 100%;
        min-width: 0;
    }
}