html,
body {
    margin: 0;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 8%, rgba(18, 103, 201, .18), transparent 28%),
        radial-gradient(circle at 88% 2%, rgba(255, 216, 77, .22), transparent 26%),
        radial-gradient(circle at 80% 80%, rgba(29, 158, 117, .16), transparent 30%),
        linear-gradient(135deg, #eef6ff 0%, #f8fbff 48%, #edf7f3 100%);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

:root {
    --gbacar-blue: #1267c9;
    --gbacar-blue-dark: #0b4f9f;
    --gbacar-blue-bg: #ebf4ff;
    --gbacar-green: #1d9e75;
    --gbacar-amber: #ef9f27;
    --gbacar-gold: #ffd84d;
    --gbacar-text: #172232;
    --gbacar-muted: #737d8d;
    --gbacar-field: #f8fafc;
    --gbacar-glass-bg: rgba(255, 255, 255, .64);
    --gbacar-glass-bg-strong: rgba(255, 255, 255, .78);
    --gbacar-glass-bg-soft: rgba(255, 255, 255, .42);
    --gbacar-glass-blue: rgba(235, 244, 255, .68);
    --gbacar-glass-border: rgba(255, 255, 255, .72);
    --gbacar-glass-line: rgba(223, 229, 238, .9);
    --gbacar-glass-shadow: 0 16px 38px rgba(18, 42, 76, .13);
    --gbacar-glass-shadow-soft: 0 14px 34px rgba(18, 42, 76, .1);
    --gbacar-glass-blur: blur(18px) saturate(1.35);
}

#app,
.mud-layout.gbaka-shell {
    height: 100vh;
    overflow: hidden;
}

.gbaka-page-header__breadcrumb {
    display: none !important;
}

.mud-main-content.gbaka-main {
    height: 100vh !important;
    min-width: 0;
    overflow: hidden !important;
    padding-top: 0 !important;
}

.gbaka-content {
    height: 100vh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.gbaka-page-header {
    box-sizing: border-box;
    margin: 0 !important;
    padding: 14px 30px !important;
    flex: 0 0 auto;
    z-index: 20;
    width: auto;
}

.mud-paper,
.mud-popover,
.mud-dialog,
.mud-table,
.mud-card,
.mud-alert {
    position: relative;
    background-color: var(--gbacar-glass-bg) !important;
    border-color: var(--gbacar-glass-border) !important;
    box-shadow: var(--gbacar-glass-shadow) !important;
    backdrop-filter: var(--gbacar-glass-blur);
    -webkit-backdrop-filter: var(--gbacar-glass-blur);
}

.mud-paper::before,
.mud-card::before,
.mud-table::before,
.mud-dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .42), transparent 42%),
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .56), transparent 40%);
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(120, 151, 184, .34) !important;
}

.mud-input-control .mud-input {
    background: rgba(248, 250, 252, .62);
    border-radius: 8px;
}

.mud-button-filled-primary {
    box-shadow: 0 12px 28px rgba(18, 103, 201, .22) !important;
}

.mud-button-root {
    font-weight: 700 !important;
}

.gbacar-brand-text,
.gbaka-brand-name,
.login-brand strong {
    font-family: "Montserrat", Inter, system-ui, sans-serif !important;
    font-style: italic;
    font-weight: 600 !important;
    letter-spacing: .04em;
}

.dashboard-kpi,
.dashboard-panel,
.ticketing-panel,
.stats-kpi,
.stats-panel,
.settings-panel,
.role-card,
.permissions-panel,
.users-kpis article,
.line-summary,
.agents-empty,
.fleet-empty,
.station-empty,
.lines-empty,
.users-empty,
.roles-empty,
.station-hero,
.station-section,
.station-vehicle-card,
.vehicle-driver-card,
.vehicle-panel,
.vehicle-seat-card,
.vehicle-detail-empty,
.station-detail-empty {
    border-color: var(--gbacar-glass-border) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .34) 46%, rgba(232, 242, 255, .5)),
        radial-gradient(circle at 10% 0%, rgba(255, 255, 255, .82), transparent 42%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 rgba(255, 255, 255, .32),
        var(--gbacar-glass-shadow) !important;
    backdrop-filter: var(--gbacar-glass-blur);
    -webkit-backdrop-filter: var(--gbacar-glass-blur);
}

.agent-badge,
.fleet-badge,
.station-badge,
.line-badge,
.user-badge,
.load-pill,
.ticket-status,
.role-meta span,
.station-detail-badge,
.vehicle-status-pill,
.gbaka-tabs__badge {
    border: 1px solid rgba(255, 255, 255, .58);
    background: var(--gbacar-glass-blue);
    box-shadow: 0 8px 22px rgba(18, 42, 76, .08);
    backdrop-filter: var(--gbacar-glass-blur);
    -webkit-backdrop-filter: var(--gbacar-glass-blur);
}

.gbaka-page-header__content {
    flex: 1 1 auto;
    min-width: 0;
}

.gbaka-page-header__actions {
    flex: 0 1 auto;
    min-width: 0;
}

.gbaka-page-header__title {
    overflow-wrap: anywhere;
}

@media (max-width: 960px) {
    .gbaka-content {
        padding: 0 !important;
    }

    .gbaka-page-header {
        margin: 0 !important;
        padding: 16px 14px !important;
    }
}

.gbaka-page-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 22px 30px 60px;
}

@media (max-width: 960px) {
    .gbaka-page-body {
        padding: 18px 14px 40px;
    }
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e24b4a;
}

.validation-message {
    color: #e24b4a;
}

.mud-dialog.gbaka-create-station-dialog {
    width: min(84vw, 1600px);
    max-width: min(84vw, 1600px);
    height: min(88vh, 930px);
    max-height: 88vh;
    border-radius: 18px;
    overflow: hidden;
}

.gbaka-create-station-dialog .mud-dialog-title {
    padding: 0;
    border-bottom: 1px solid #dfe5ee;
}

.gbaka-create-station-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 72px;
    padding: 0 28px;
    background: var(--gbacar-glass-bg-strong);
    backdrop-filter: var(--gbacar-glass-blur);
    -webkit-backdrop-filter: var(--gbacar-glass-blur);
}

.gbaka-create-station-dialog__title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #061329;
    font-size: 1.08rem;
    font-weight: 700;
}

.gbaka-create-station-dialog__close {
    border-radius: 10px;
}

.gbaka-create-station-dialog__content {
    height: calc(min(88vh, 930px) - 145px);
    overflow: auto;
    padding: 26px 84px 30px !important;
    background: rgba(245, 249, 253, .58);
}

.gbaka-create-station-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    min-height: 73px;
    padding: 14px 28px !important;
    border-top: 1px solid #dfe5ee;
    background: var(--gbacar-glass-bg-strong);
    backdrop-filter: var(--gbacar-glass-blur);
    -webkit-backdrop-filter: var(--gbacar-glass-blur);
}

.gbaka-form-section {
    margin-bottom: 24px;
    padding: 26px;
    border: 1px solid var(--gbacar-glass-border);
    border-radius: 12px;
    background: var(--gbacar-glass-bg);
    box-shadow: var(--gbacar-glass-shadow-soft);
    backdrop-filter: var(--gbacar-glass-blur);
    -webkit-backdrop-filter: var(--gbacar-glass-blur);
}

.gbaka-form-section__title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gbaka-form-section__title h2 {
    margin: 0;
    color: #061329;
    font-size: 1.35rem;
    font-weight: 700;
}

.gbaka-form-section__divider {
    height: 1px;
    margin: 20px 0 22px;
    background: #e7edf5;
}

.gbaka-form-grid {
    display: grid;
    gap: 24px;
}

.gbaka-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gbaka-matrix-empty {
    font-size: .85rem;
    color: #5b6472;
}

.gbaka-matrix-table {
    width: 100%;
    border-collapse: collapse;
}

.gbaka-matrix-table th,
.gbaka-matrix-table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid #e7edf5;
}

.gbaka-matrix-table th {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #5b6472;
}

.gbaka-matrix-table th:not(:first-child),
.gbaka-matrix-table td:not(:first-child) {
    text-align: center;
    width: 92px;
}

.gbaka-matrix-table td:first-child {
    font-size: .9rem;
    font-weight: 600;
    color: #061329;
}

.gbaka-station-image-row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
}

.gbaka-station-image-row p {
    margin: 0 0 12px;
    color: #596779;
}

.gbaka-station-photo {
    width: 240px;
    height: 150px;
    border-radius: 10px;
    border: 1px solid #d6e0eb;
    background:
        linear-gradient(160deg, rgba(18, 103, 201, .2), transparent 48%),
        linear-gradient(20deg, rgba(23, 34, 50, .35), transparent 52%),
        #c7d7e2;
    box-shadow: inset 0 -42px 0 rgba(23, 34, 50, .18);
}

.gbaka-vehicle-config-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 240px;
    align-items: center;
    gap: 26px 30px;
}

.gbaka-vehicle-photo {
    width: 240px;
    height: 150px;
    display: grid;
    place-items: center;
    border: 1px solid #d6e0eb;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(9, 27, 49, .04), rgba(9, 27, 49, .58)),
        linear-gradient(135deg, #dfe6ef, #9eb3c9);
    color: #ffffff;
}

.gbaka-vehicle-photo .mud-icon-root {
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .2));
}

.gbaka-location-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 30px;
}

.gbaka-location-grid .mud-input-control:last-child {
    grid-column: span 3;
}

@media (max-width: 1100px) {
    .mud-dialog.gbaka-create-station-dialog {
        width: 94vw;
        max-width: 94vw;
    }

    .gbaka-create-station-dialog__content {
        padding: 20px !important;
    }

    .gbaka-form-grid--two,
    .gbaka-location-grid,
    .gbaka-station-image-row,
    .gbaka-vehicle-config-grid {
        grid-template-columns: 1fr;
    }

    .gbaka-location-grid .mud-input-control:last-child {
        grid-column: auto;
    }
}