/*
 * BLAULICHT Console theme
 *
 * A dense, data-first administration surface inspired by established
 * enterprise consoles while retaining the BLAULICHT identity.
 */
:root {
    --console-rail-width: 132px;
    --console-topbar-height: 42px;
    --console-navy: #063a5a;
    --console-navy-active: #052f49;
    --console-cyan: #138fb8;
    --console-blue: #078bd3;
    --console-blue-dark: #0873ad;
    --console-canvas: #f5f6f7;
    --console-panel: #ffffff;
    --console-panel-muted: #f0f2f4;
    --console-border: #c5cdd3;
    --console-border-light: #dbe1e5;
    --console-text: #27343d;
    --console-muted: #596874;
    --console-success: #19b75c;
    --console-warning: #e0a11a;
    --console-danger: #c8243a;
    --shell-rail-width: var(--console-rail-width);
    --shell-topbar-height: var(--console-topbar-height);
    --shell-border: var(--console-border);
    --shell-text: var(--console-text);
    --shell-muted: var(--console-muted);
    --ui-border: var(--console-border);
    --ui-border-strong: #bac3ca;
    --ui-background: var(--console-canvas);
    --ui-panel: var(--console-panel);
    --ui-muted: var(--console-panel-muted);
    --ui-hover: #eaf4fa;
    --ui-selected: #dcecf6;
    --ui-text: var(--console-text);
    --ui-text-muted: var(--console-muted);
    --ui-info: var(--console-blue);
    --ui-radius: 1px;
    --mist-border: var(--console-border);
    --mist-border-light: var(--console-border-light);
    --mist-background: var(--console-canvas);
    --mist-panel: var(--console-panel);
    --mist-muted: var(--console-muted);
    --mist-text: var(--console-text);
    --mist-hover: #eef6fa;
    --mist-selected: #deedf5;
    --mist-radius: 1px;
}

.blaulicht-app-body {
    color: var(--console-text);
    background: var(--console-canvas);
    font-family: "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    font-size: calc(14px * var(--blaulicht-font-scale, 1));
}

/* Navigation rail */
.blaulicht-app-body .app-rail {
    width: var(--console-rail-width);
    background: linear-gradient(180deg, var(--console-navy) 0%, #086f98 48%, var(--console-cyan) 100%);
    box-shadow: none;
}

.blaulicht-app-body .rail-brand {
    min-height: 42px;
    padding: 4px 8px;
    border-bottom-color: rgb(255 255 255 / 14%);
    background: #03283e;
}

.blaulicht-app-body .rail-brand-mark {
    width: 36px;
    height: 32px;
    border-radius: 4px;
}

.blaulicht-app-body .rail-brand-identity {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.blaulicht-app-body .rail-brand-identity-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgb(0 0 0 / 24%));
}

.blaulicht-app-body .rail-brand-identity-name {
    color: #f7fbfd;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.blaulicht-app-body .rail-brand-identity-name span {
    color: #ef4f38;
}

.blaulicht-app-body .rail-navigation {
    gap: 0;
    padding: 0;
}

.blaulicht-app-body .rail-item {
    grid-template-columns: 28px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 7px;
    min-height: 46px;
    padding: 7px 9px;
    border-left: 0;
    border-bottom: 1px solid rgb(255 255 255 / 4%);
    text-align: left;
}

.blaulicht-app-body .rail-item:hover {
    background: rgb(0 24 40 / 24%);
}

.blaulicht-app-body .rail-item.is-active {
    border-left: 0;
    background: var(--console-navy-active);
    box-shadow: inset 3px 0 0 #59c8ed;
}

.blaulicht-app-body .rail-icon {
    width: 24px;
    height: 24px;
    font-size: 19px;
}

.blaulicht-app-body .rail-icon svg {
    width: 21px;
    height: 21px;
}

.blaulicht-app-body .rail-label {
    max-width: none;
    font-size: calc(12px * var(--blaulicht-font-scale, 1));
    line-height: 1.2;
    text-align: left;
}

.blaulicht-app-body .rail-badge {
    position: absolute;
    right: 5px;
    top: 4px;
}

.blaulicht-app-body .rail-footer {
    padding: 8px;
}

.blaulicht-app-body .rail-footer span {
    border-radius: 2px;
}

/* Compact, persistent command bar */
.blaulicht-app-body .shell-main {
    margin-left: var(--console-rail-width);
}

.blaulicht-app-body .shell-topbar {
    min-height: var(--console-topbar-height);
    height: var(--console-topbar-height);
    padding: 0 14px;
    border-bottom: 1px solid var(--console-border);
    background: rgb(255 255 255 / 98%);
    box-shadow: 0 1px 3px rgb(31 48 59 / 8%);
    backdrop-filter: none;
}

.blaulicht-app-body .topbar-brand strong {
    font-size: calc(12px * var(--blaulicht-font-scale, 1));
}

.blaulicht-app-body .topbar-platform-logo {
    display: block;
    width: 132px;
    height: 34px;
    object-fit: contain;
    object-position: left center;
}

:root[data-theme="dark"] .blaulicht-app-body .topbar-platform-logo {
    padding: 3px 6px;
    border-radius: 5px;
    background: rgb(255 255 255 / 96%);
}

.blaulicht-app-body .topbar-brand small {
    display: none;
}

.blaulicht-app-body .topbar-department-selector > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 18px 4px 8px;
    border: 1px solid transparent;
    border-radius: 1px;
}

.blaulicht-app-body .topbar-department-selector > summary:hover,
.blaulicht-app-body .topbar-department-selector[open] > summary {
    border-color: var(--console-border);
    background: #f2f4f5;
}

.blaulicht-app-body .topbar-department-selector small {
    font-size: 10px;
}

.blaulicht-app-body .topbar-department-selector strong {
    font-size: 12px;
}

.blaulicht-app-body .topbar-department-menu,
.blaulicht-app-body .shell-user-menu-panel {
    border-radius: 1px;
    box-shadow: 0 6px 14px rgb(31 48 59 / 18%);
}

.blaulicht-app-body .theme-toggle,
.blaulicht-app-body .topbar-suggestion-button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 1px;
    background: transparent;
}

.blaulicht-app-body .theme-toggle:hover,
.blaulicht-app-body .topbar-suggestion-button:hover {
    background: #edf1f3;
    transform: none;
}

.blaulicht-app-body .shell-user strong {
    font-size: 11px;
}

.blaulicht-app-body .shell-user small {
    font-size: 9px;
}

.blaulicht-app-body .shell-environment {
    border-radius: 2px;
}

/* Canvas, headings and command rows */
.blaulicht-app-body .shell-content {
    padding: 0 20px 34px;
}

.blaulicht-app-body .page-heading,
.blaulicht-app-body .ui-page-toolbar {
    min-height: 58px;
    margin: 0 -20px;
    padding: 9px 20px;
    border-bottom: 1px solid var(--console-border);
    background: #fafafa;
}

.blaulicht-app-body .page-heading h1,
.blaulicht-app-body .ui-page-title h1 {
    margin: 0;
    color: var(--console-blue);
    font-size: calc(27px * var(--blaulicht-font-scale, 1));
    font-weight: 300;
    letter-spacing: -0.025em;
}

.blaulicht-app-body .page-heading p,
.blaulicht-app-body .ui-page-title p {
    margin-top: 2px;
    color: var(--console-muted);
    font-size: calc(11px * var(--blaulicht-font-scale, 1));
}

.blaulicht-app-body .ui-breadcrumbs {
    color: var(--console-muted);
    font-size: calc(10px * var(--blaulicht-font-scale, 1));
}

.blaulicht-app-body a:not(.rail-item):not(.rail-brand):not(.ui-button):not(.ui-tab):not(.primary-button):not(.secondary-button) {
    color: var(--console-blue-dark);
}

/* Segmented navigation and filter bars */
.blaulicht-app-body .ui-tabs {
    display: flex;
    gap: 2px;
    min-height: 40px;
    margin: 0 -20px 12px;
    padding: 0 20px;
    border-bottom: 1px solid var(--console-border);
    background: #fff;
}

.blaulicht-app-body .ui-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 39px;
    padding: 0 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #33434e;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.blaulicht-app-body .ui-tab + .ui-tab {
    border-left: 0;
}

.blaulicht-app-body .ui-tab:hover {
    color: #005f91;
    background: #eef7fb;
}

.blaulicht-app-body .ui-tab.is-active {
    border-bottom-color: var(--console-blue);
    color: #005f91;
    background: #e8f5fb;
    box-shadow: none;
}

.blaulicht-app-body .ui-filter-bar {
    min-height: 45px;
    margin: 0 -1px 10px;
    padding: 7px 8px;
    border: 1px solid var(--console-border);
    background: #fff;
}

/* Panels, summaries and forms */
.blaulicht-app-body :is(.data-panel, .ui-panel, .information-panel, .module-card) {
    border: 1px solid var(--console-border);
    border-radius: 1px;
    background: var(--console-panel);
    box-shadow: none;
}

.blaulicht-app-body .data-panel {
    padding: 12px;
}

.blaulicht-app-body :is(.section-heading-row h2, .data-panel > h2, .ui-panel-header h2) {
    color: #27343d;
    font-size: calc(18px * var(--blaulicht-font-scale, 1));
    font-weight: 500;
}

.blaulicht-app-body .status-grid {
    border-radius: 1px;
}

.blaulicht-app-body .status-card {
    min-height: 58px;
    padding: 8px 11px;
}

.blaulicht-app-body .status-card strong {
    color: #22313a;
    font-size: calc(20px * var(--blaulicht-font-scale, 1));
    font-weight: 400;
}

.blaulicht-app-body .detail-grid {
    border-radius: 1px;
}

.blaulicht-app-body .form-grid,
.blaulicht-app-body .ui-form-grid {
    gap: 12px 16px;
}

.blaulicht-app-body :is(.form-field label, .ui-field label) {
    color: #34434d;
    font-size: calc(11px * var(--blaulicht-font-scale, 1));
}

.blaulicht-app-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.blaulicht-app-body select,
.blaulicht-app-body textarea {
    min-height: 31px;
    border-color: #b9c2c9;
    border-radius: 1px;
    color: #27343d;
    background: #fff;
}

.blaulicht-app-body input:focus,
.blaulicht-app-body select:focus,
.blaulicht-app-body textarea:focus {
    border-color: var(--console-blue);
    outline: 1px solid rgb(7 139 211 / 22%);
}

/* Dense enterprise tables */
.blaulicht-app-body :is(.table-wrapper, .ui-table-wrapper) {
    border: 1px solid var(--console-border);
    background: #fff;
}

.blaulicht-app-body :is(.data-table, .ui-table) {
    color: #27343d;
    background: #fff;
    font-size: calc(12px * var(--blaulicht-font-scale, 1));
}

.blaulicht-app-body :is(.data-table th, .ui-table th) {
    height: 36px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--console-border);
    color: #34434d;
    background: #e9edef;
    font-size: calc(10px * var(--blaulicht-font-scale, 1));
    font-weight: 700;
    letter-spacing: 0.025em;
}

.blaulicht-app-body :is(.data-table td, .ui-table td) {
    height: 38px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--console-border-light);
}

.blaulicht-app-body :is(.data-table tbody tr:hover, .ui-table tbody tr:hover) {
    background: #e5f0f6;
}

.blaulicht-app-body :is(.data-table tbody tr[aria-selected="true"], .ui-table tbody tr[aria-selected="true"]) {
    background: #d9e7ef;
}

/* Buttons and statuses */
.blaulicht-app-body :is(.ui-button, .primary-button, .secondary-button, .ui-action-menu-trigger) {
    min-height: 29px;
    padding: 0 10px;
    border-radius: 1px;
    font-size: calc(10px * var(--blaulicht-font-scale, 1));
    font-weight: 600;
}

.blaulicht-app-body :is(.ui-button-primary, .primary-button) {
    border-color: #0678b8;
    color: #fff;
    background: var(--console-blue);
}

.blaulicht-app-body :is(.ui-button-danger, .danger-button) {
    border-color: #a6182e;
    color: #fff;
    background: var(--console-danger);
}

.blaulicht-app-body :is(.status-badge, .ui-badge, .badge) {
    border-radius: 2px;
}

/* Modal/dialog surfaces */
.blaulicht-app-body :is(dialog, .modal-panel, .ui-dialog) {
    border: 1px solid #9ca5ac;
    border-radius: 2px;
    box-shadow: 0 8px 24px rgb(17 32 43 / 28%);
}

@media (max-width: 980px) {
    :root {
        --console-rail-width: 108px;
    }

    .blaulicht-app-body .rail-item {
        grid-template-columns: 24px minmax(0, 1fr);
        padding-inline: 7px;
    }

    .blaulicht-app-body .rail-brand-identity-name {
        font-size: 16px;
    }
}

@media (max-width: 760px) {
    :root {
        --console-rail-width: 0px;
        --console-topbar-height: 48px;
    }

    .blaulicht-app-body .app-rail {
        width: 250px;
    }

    .blaulicht-app-body .rail-brand-identity-mark {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .blaulicht-app-body .rail-brand-identity-name {
        font-size: 20px;
    }

    .blaulicht-app-body .shell-main {
        margin-left: 0;
    }

    .blaulicht-app-body .shell-content {
        padding-inline: 10px;
    }

    .blaulicht-app-body .page-heading,
    .blaulicht-app-body .ui-page-toolbar,
    .blaulicht-app-body .ui-tabs {
        margin-inline: -10px;
        padding-inline: 10px;
    }
}

:root[data-theme="dark"] {
    --console-canvas: #0d141b;
    --console-panel: #151e27;
    --console-panel-muted: #1b2631;
    --console-border: #34414d;
    --console-border-light: #2a3540;
    --console-text: #edf2f7;
    --console-muted: #a6b2be;
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .page-heading,
    .ui-page-toolbar,
    .ui-tabs,
    .ui-filter-bar,
    .table-wrapper,
    .ui-table-wrapper
) {
    color: var(--console-text);
    background: var(--console-panel);
}

:root[data-theme="dark"] .blaulicht-app-body :is(.data-table th, .ui-table th) {
    color: var(--console-text);
    background: var(--console-panel-muted);
}

:root[data-theme="dark"] .blaulicht-app-body .shell-topbar {
    color: var(--console-text);
    background: rgb(21 30 39 / 98%);
    box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .topbar-brand,
    .shell-user,
    .topbar-department-selector > summary
) {
    color: var(--console-text);
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .topbar-department-selector > summary:hover,
    .topbar-department-selector[open] > summary,
    .theme-toggle:hover,
    .topbar-suggestion-button:hover
) {
    color: var(--console-text);
    background: var(--console-panel-muted);
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .topbar-department-menu,
    .shell-user-menu-panel,
    .ui-action-menu-content,
    dialog,
    .modal-panel,
    .ui-dialog
) {
    color: var(--console-text);
    background: var(--console-panel);
    border-color: var(--console-border);
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .page-heading h1,
    .ui-page-title h1
) {
    color: #53b9ee;
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .section-heading-row h2,
    .data-panel > h2,
    .ui-panel-header h2,
    .status-card strong
) {
    color: var(--console-text);
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .data-panel,
    .ui-panel,
    .information-panel,
    .module-card,
    .status-grid,
    .status-card,
    .detail-grid,
    .detail-grid > div
) {
    color: var(--console-text);
    background: var(--console-panel);
    border-color: var(--console-border);
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .data-table,
    .ui-table,
    .data-table td,
    .ui-table td
) {
    color: var(--console-text);
    background: var(--console-panel);
    border-color: var(--console-border-light);
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .data-table tbody tr:hover,
    .ui-table tbody tr:hover,
    .data-table tbody tr:hover td,
    .ui-table tbody tr:hover td
) {
    color: #fff;
    background: #21394a;
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .data-table tbody tr[aria-selected="true"],
    .ui-table tbody tr[aria-selected="true"],
    .data-table tbody tr[aria-selected="true"] td,
    .ui-table tbody tr[aria-selected="true"] td
) {
    color: #fff;
    background: #294c63;
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    .ui-filter-input,
    .ui-button,
    .secondary-button,
    .ui-action-menu-trigger
) {
    color: var(--console-text);
    background: #111a23;
    border-color: #465563;
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .ui-button-primary,
    .primary-button,
    .ui-tab.is-active
) {
    color: #fff;
    background: var(--console-blue);
    border-color: var(--console-blue);
}

:root[data-theme="dark"] .blaulicht-app-body .ui-tab:not(.is-active) {
    color: #d4dde5;
    background: transparent;
    border-color: transparent;
}

:root[data-theme="dark"] .blaulicht-app-body .ui-tab:not(.is-active):hover {
    color: #8dd7fb;
    background: #1c3040;
}

:root[data-theme="dark"] .blaulicht-app-body .ui-tab.is-active {
    color: #8dd7fb;
    background: #193142;
    border-bottom-color: #53b9ee;
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    input::placeholder,
    textarea::placeholder
) {
    color: #84929e;
}

/* Component compatibility for the console dark theme. */
:root[data-theme="dark"] .blaulicht-app-body :is(
    .organigram-card,
    .asset-statistics-card,
    .asset-statistics-panel > header,
    .organization-orders-page .clothing-order-section-heading,
    .license-status-details > div,
    .license-remote-details > div
) {
    color: var(--console-text);
    background: var(--console-panel);
    border-color: var(--console-border);
}

:root[data-theme="dark"] .blaulicht-app-body .asset-statistics-card {
    background: linear-gradient(145deg, #1b2732, #16212b);
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .organigram-card h2,
    .organigram-card h3,
    .organization-chart-card h2,
    .asset-statistics-card strong,
    .asset-statistics-panel h2,
    .asset-statistics-empty strong,
    .organization-orders-summary .ui-summary-item strong,
    .clothing-order-section-heading h2,
    .clothing-order-person strong,
    .user-directory-name,
    .license-status-details dd,
    .license-remote-heading h2
) {
    color: var(--console-text);
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .organigram-card p,
    .organigram-card > span,
    .organization-chart-stations,
    .asset-statistics-card small,
    .asset-statistics-card div > span,
    .asset-statistics-panel p,
    .asset-statistics-empty small,
    .clothing-order-section-heading p,
    .clothing-order-person small,
    .license-status-details dt,
    .license-remote-heading p
) {
    color: var(--console-text-muted);
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    .asset-statistics-count,
    .asset-statistics-card-icon
) {
    color: #8dd7fb;
    background: #203543;
}

:root[data-theme="dark"] .blaulicht-app-body :is(
    a,
    .user-directory-name
) {
    color: #75cdf6;
}

:root[data-theme="dark"] .blaulicht-app-body .clothing-order-overview-row:hover {
    background: #21394a;
}

:root[data-theme="dark"] .blaulicht-app-body .clothing-order-status:not(.is-fulfilled):not(.is-rejected) {
    color: #dbe8ef;
    background: #304654;
}