:root {
    --sr-ink: #0d1726;
    --sr-navy: #111f33;
    --sr-blue: #1e5b88;
    --sr-steel: #eef3f7;
    --sr-panel: #ffffff;
    --sr-muted: #65758b;
    --sr-line: #d7e0ea;
    --sr-accent: #d6a84f;
    --sr-success: #2d7b58;
    --sr-danger: #a83d45;
    --sr-hero-bg-end: 360px;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(17, 31, 51, 0.96), rgba(13, 23, 38, 0.9) var(--sr-hero-bg-end), #f5f7fa calc(var(--sr-hero-bg-end) + 1px)),
        #f5f7fa;
    color: var(--sr-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sr-rider-page {
    --sr-hero-bg-end: 520px;
}

.sr-header {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 18px 0;
}

.sr-logo {
    color: #fff;
    font-weight: 800;
    gap: 10px;
    letter-spacing: 0;
}

.sr-logo:hover,
.sr-nav a {
    color: #fff;
}

.sr-logo-mark {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--sr-blue), var(--sr-navy));
    color: #fff;
    font-size: 0.78rem;
}

.sr-nav a {
    min-height: 48px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sr-nav .sr-nav-login {
    min-height: 38px;
    margin-top: 5px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 7px;
    color: #fff;
    line-height: 38px;
}

.sr-nav .sr-nav-login:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.sr-rider-simple-header {
    width: 100%;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px max(18px, calc((100vw - 1180px) / 2 + 18px)) 8px;
    background: none;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sr-rider-simple-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
}

.sr-rider-simple-logo:hover {
    text-decoration: none !important;
}

.sr-rider-simple-logo img {
    display: block;
    width: auto;
    height: 78px;
    max-width: 42vw;
    object-fit: contain;
}

.sr-rider-login-button {
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid rgba(214, 168, 79, 0.92);
    border-radius: 8px;
    background: var(--sr-accent);
    color: var(--sr-navy);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 42px;
}

.sr-rider-login-button:hover,
.sr-rider-login-button:focus {
    border-color: #f0c76d;
    background: #e7bd60;
    color: var(--sr-navy);
}

.sr-main {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 22px 18px 46px;
}

.sr-footer {
    padding: 18px;
    color: var(--sr-muted);
    font-size: 0.85rem;
}

.sr-update-prompt {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(420px, calc(100vw - 36px));
    padding: 14px;
    border: 1px solid rgba(13, 23, 38, 0.12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(13, 23, 38, 0.22);
}

.sr-update-prompt[hidden] {
    display: none !important;
}

.sr-update-prompt strong,
.sr-update-prompt span {
    display: block;
}

.sr-update-prompt strong {
    color: var(--sr-ink);
    font-size: 0.95rem;
    font-weight: 900;
}

.sr-update-prompt span {
    margin-top: 2px;
    color: var(--sr-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.sr-update-progress {
    margin-top: 10px;
    min-width: 230px;
}

.sr-update-progress[hidden] {
    display: none !important;
}

.sr-update-progress-track {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf4;
}

.sr-update-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--sr-accent);
    transition: width 180ms ease;
}

.sr-update-prompt .sr-update-progress-status {
    margin-top: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--sr-navy);
}

.sr-update-button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(214, 168, 79, 0.92);
    border-radius: 8px;
    background: var(--sr-accent);
    color: var(--sr-navy);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 38px;
}

.sr-update-button:hover,
.sr-update-button:focus {
    border-color: #f0c76d;
    background: #e7bd60;
    color: var(--sr-navy);
}

.sr-shell {
    display: grid;
    gap: 18px;
}

.sr-hero {
    color: #fff;
    padding: 18px 0 26px;
}

.sr-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #c9d7e5;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sr-kicker::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 99px;
    background: var(--sr-accent);
}

.sr-hero h1,
.sr-page-title {
    margin: 0;
    color: #fff;
    font-weight: 850;
    letter-spacing: 0;
}

.sr-hero p {
    max-width: 680px;
    margin: 14px 0 0;
    color: #dce6ef;
    font-size: 1rem;
}

.sr-rider-intro {
    display: grid;
    gap: 20px;
}

.sr-rider-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: center;
    width: min(100%, 560px);
    padding: 16px;
    border: 1px solid rgba(215, 224, 234, 0.85);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
}

.sr-rider-logos img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.sr-card {
    border: 0;
    border-radius: 18px;
    box-shadow: none;
}

.sr-card.uk-card-default {
    background: var(--sr-panel);
    box-shadow: none;
}

.sr-card-title {
    color: var(--sr-navy);
    font-size: 1.1rem;
    font-weight: 820;
}

.sr-button {
    min-height: 54px;
    border-radius: 7px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.sr-button-primary {
    background: var(--sr-blue);
    color: #fff;
}

.sr-button-primary:hover {
    background: #184b70;
    color: #fff;
}

.sr-button-accent {
    background: var(--sr-accent);
    color: #182233;
}

.sr-button-accent:hover {
    background: #c89a3f;
    color: #182233;
}

.sr-form label {
    color: var(--sr-navy);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sr-form .uk-input,
.sr-form .uk-select,
.sr-form .uk-textarea {
    border-radius: 7px;
    border-color: var(--sr-line);
    min-height: 48px;
}

.sr-autocomplete {
    position: relative;
}

.sr-autocomplete-list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--sr-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(13, 23, 38, 0.16);
}

.sr-autocomplete-option {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid var(--sr-line);
    background: transparent;
    color: var(--sr-ink);
    font: inherit;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.sr-autocomplete-option:last-child {
    border-bottom: 0;
}

.sr-autocomplete-option:hover,
.sr-autocomplete-option:focus {
    background: var(--sr-steel);
    outline: 0;
}

.sr-privacy {
    border-left: 4px solid var(--sr-accent);
    background: #fff9eb;
    color: #5f4a20;
}

.sr-pwa-install {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(30, 91, 136, 0.18);
    border-radius: 8px;
    background: #f7fbff;
}

.sr-pwa-install[hidden] {
    display: none;
}

.sr-pwa-install strong {
    display: block;
    color: var(--sr-navy);
    font-size: 0.95rem;
    line-height: 1.25;
}

.sr-pwa-install span {
    display: block;
    margin-top: 3px;
    color: var(--sr-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.sr-pwa-install .sr-button {
    min-height: 44px;
    padding: 0 18px;
    white-space: normal;
}

.sr-pwa-install-note {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--sr-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.sr-push-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(45, 123, 88, 0.18);
    border-radius: 8px;
    background: #f6fbf8;
}

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

.sr-push-panel strong,
.sr-push-panel span {
    display: block;
}

.sr-push-panel strong {
    color: var(--sr-navy);
    font-size: 0.95rem;
    line-height: 1.25;
}

.sr-push-panel span {
    margin-top: 3px;
    color: var(--sr-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.sr-push-panel .sr-button {
    min-height: 44px;
    padding: 0 18px;
}

.sr-push-status {
    margin: 7px 0 0;
    font-size: 0.84rem;
    line-height: 1.45;
}

.sr-status-panel {
    display: grid;
    gap: 12px;
}

.sr-track-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    background: var(--sr-steel);
}

.sr-track-panel strong {
    color: var(--sr-navy);
}

.sr-track-row {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.sr-track-row .uk-button,
.sr-track-button {
    border-radius: 7px;
    font-weight: 800;
}

.sr-status-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--sr-line);
}

.sr-status-line:last-child {
    border-bottom: 0;
}

.sr-request-pop {
    animation: srRequestPop 1.4s ease;
}

@keyframes srRequestPop {
    0% {
        box-shadow: 0 0 0 0 rgba(214, 168, 79, 0.42), 0 10px 28px rgba(15, 23, 42, 0.08);
    }
    45% {
        box-shadow: 0 0 0 8px rgba(214, 168, 79, 0.18), 0 18px 40px rgba(15, 23, 42, 0.14);
    }
    100% {
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    }
}

.sr-status-line span:first-child {
    color: var(--sr-muted);
    font-weight: 700;
}

.sr-status-line span:last-child {
    text-align: right;
    font-weight: 800;
}

.sr-status-line .sr-eta {
    display: grid;
    gap: 3px;
}

.sr-eta strong {
    color: var(--sr-ink);
    font-size: 1rem;
}

.sr-eta small {
    color: var(--sr-muted);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.35;
}

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

.sr-stat {
    border-left: 0;
}

.sr-stat strong {
    display: block;
    margin-top: 4px;
    color: var(--sr-navy);
    font-size: 2rem;
    line-height: 1;
}

.sr-table-wrap {
    overflow-x: auto;
}

.sr-table-controls,
.sr-table-size-form,
.sr-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sr-table-controls {
    justify-content: space-between;
    margin-top: 14px;
}

.sr-table-size-form {
    color: var(--sr-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.sr-table-size-form .uk-select {
    width: 76px;
}

.sr-pagination span {
    color: var(--sr-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.sr-table {
    min-width: 780px;
}

.sr-table th {
    color: var(--sr-muted);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sr-table-subtext {
    display: block;
    margin-top: 3px;
    color: var(--sr-muted);
    font-size: 0.82rem;
}

.sr-my-rides-mobile-col {
    display: none;
}

.sr-driver-table {
    min-width: 980px;
}

.sr-dispatch-table {
    min-width: 1080px;
}

.sr-dispatch-table .uk-select {
    min-width: 150px;
}

.sr-dispatch-table .sr-admin-actions {
    flex-wrap: nowrap;
}

.sr-metric-text {
    margin: 0;
    color: var(--sr-navy);
    font-size: 1.8rem;
    font-weight: 850;
    line-height: 1.1;
}

.sr-admin-driver-form {
    display: grid;
    align-items: end;
    gap: 12px;
}

.sr-checkline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    color: var(--sr-navy);
    font-weight: 800;
}

.sr-admin-actions,
.sr-reset-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sr-reset-form .uk-input {
    width: 150px;
}

.sr-driver-edit-form {
    display: grid;
    gap: 6px;
    min-width: 220px;
}

.sr-auth {
    max-width: 460px;
    margin: 28px auto;
}

.sr-auth-wide {
    max-width: 620px;
}

.sr-login-choice {
    display: grid;
    gap: 10px;
}

.sr-login-choice label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px;
    border: 1px solid var(--sr-line);
    border-radius: 8px;
    background: #f9fbfd;
    cursor: pointer;
    text-transform: none;
}

.sr-login-choice strong,
.sr-login-choice small {
    display: block;
    letter-spacing: 0;
    text-transform: none;
}

.sr-login-choice strong {
    color: var(--sr-navy);
    font-size: 0.95rem;
}

.sr-login-choice small {
    color: var(--sr-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

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

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

.sr-driver-actions .uk-button {
    border-radius: 7px;
    font-weight: 800;
}

.sr-driver-detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sr-driver-detail-actions p {
    flex-basis: 100%;
}

.sr-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.sr-overview-active-list {
    display: grid;
    gap: 14px;
}

.sr-overview-active-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--sr-line);
}

.sr-overview-active-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.sr-overview-active-head,
.sr-overview-active-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sr-overview-active-head strong {
    color: var(--sr-ink);
    font-size: 1rem;
}

.sr-overview-active-route {
    display: grid;
    gap: 5px;
    margin-top: 8px;
    color: var(--sr-muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.sr-overview-active-route strong {
    color: var(--sr-ink);
}

.sr-overview-active-meta {
    margin-top: 9px;
    color: var(--sr-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.sr-overview-active-actions {
    display: grid;
    justify-items: end;
    align-content: start;
    gap: 10px;
    min-width: 230px;
}

.sr-shift-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.sr-map-stack {
    display: grid;
    gap: 14px;
}

.sr-map-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.sr-map-heading strong {
    color: var(--sr-navy);
    font-size: 0.92rem;
}

.sr-map-heading span {
    color: var(--sr-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: right;
}

.sr-map-frame {
    width: 100%;
    height: 240px;
    display: block;
    border: 0;
    border-radius: 16px;
    background: var(--sr-steel);
}

.sr-map-frame-compact {
    height: 190px;
}

.sr-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.sr-map-actions .sr-map-button {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(30, 91, 136, 0.16) !important;
    border-radius: 7px;
    background: rgba(30, 91, 136, 0.08) !important;
    color: var(--sr-blue) !important;
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.sr-map-actions .sr-map-button:hover,
.sr-map-actions .sr-map-button:focus {
    border-color: rgba(30, 91, 136, 0.24) !important;
    background: rgba(30, 91, 136, 0.14) !important;
    color: #184b70 !important;
}

.sr-rider-page a.sr-button.uk-button-default {
    min-height: 54px;
    border: 1px solid var(--sr-blue) !important;
    border-radius: 7px;
    background: var(--sr-blue) !important;
    color: #fff !important;
    box-shadow: none;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.sr-rider-page a.sr-button.uk-button-default:hover,
.sr-rider-page a.sr-button.uk-button-default:focus {
    border-color: #184b70 !important;
    background: #184b70 !important;
    color: #fff !important;
}

.sr-location-link {
    color: var(--sr-blue);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sr-location-link:hover {
    color: #184b70;
}

.sr-super-admin-page,
.sr-admin-panel-page,
.sr-driver-panel-page {
    --sr-hero-bg-end: 0px;
    background: #f3f6f9;
}

.sr-super-admin-page .sr-header,
.sr-admin-panel-page .sr-header,
.sr-driver-panel-page .sr-header {
    max-width: 1480px;
}

.sr-super-admin-page .sr-logo,
.sr-super-admin-page .sr-logo:hover,
.sr-super-admin-page .sr-nav a,
.sr-admin-panel-page .sr-logo,
.sr-admin-panel-page .sr-logo:hover,
.sr-admin-panel-page .sr-nav a,
.sr-driver-panel-page .sr-logo,
.sr-driver-panel-page .sr-logo:hover,
.sr-driver-panel-page .sr-nav a {
    color: var(--sr-navy);
}

.sr-super-admin-page .sr-nav .sr-nav-login,
.sr-admin-panel-page .sr-nav .sr-nav-login,
.sr-driver-panel-page .sr-nav .sr-nav-login {
    border-color: var(--sr-line);
    color: var(--sr-navy);
}

.sr-super-admin-page .sr-nav .sr-nav-login:hover,
.sr-admin-panel-page .sr-nav .sr-nav-login:hover,
.sr-driver-panel-page .sr-nav .sr-nav-login:hover {
    background: var(--sr-steel);
    color: var(--sr-navy);
}

.sr-super-admin-page .sr-main,
.sr-admin-panel-page .sr-main,
.sr-driver-panel-page .sr-main {
    width: min(100%, 1480px);
    padding: 20px 20px 56px;
}

.sr-super-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.sr-super-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 18px;
    min-height: calc(100vh - 122px);
    padding: 18px;
    border: 1px solid var(--sr-line);
    border-radius: 8px;
    background: #fff;
}

.sr-super-sidebar-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sr-line);
}

.sr-super-sidebar-head strong,
.sr-super-sidebar-head span {
    display: block;
}

.sr-super-sidebar-head strong {
    color: var(--sr-navy);
    font-size: 1rem;
    line-height: 1.1;
}

.sr-portal-logo {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.sr-super-sidebar-head span:not(.sr-logo-mark) {
    color: var(--sr-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sr-super-nav {
    display: grid;
    gap: 6px;
}

.sr-super-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--sr-navy);
    font-weight: 850;
}

.sr-super-nav a:hover {
    background: var(--sr-steel);
    color: var(--sr-blue);
    text-decoration: none;
}

.sr-super-nav a.sr-active {
    background: #eaf2f8;
    color: var(--sr-blue);
}

.sr-super-nav strong {
    min-width: 28px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #edf3f8;
    color: var(--sr-blue);
    font-size: 0.72rem;
    line-height: 1.2;
    text-align: center;
}

.sr-super-sidebar-foot {
    align-self: end;
    padding-top: 14px;
    border-top: 1px solid var(--sr-line);
}

.sr-super-sidebar-foot span,
.sr-super-sidebar-foot strong {
    display: block;
}

.sr-super-sidebar-foot span {
    color: var(--sr-muted);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sr-super-sidebar-foot strong {
    color: var(--sr-navy);
    font-size: 0.9rem;
    word-break: break-word;
}

.sr-super-content {
    min-width: 0;
}

.sr-super-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid var(--sr-line);
    border-radius: 8px;
    background: #fff;
}

.sr-super-topbar .sr-kicker {
    margin-bottom: 8px;
    color: var(--sr-blue);
}

.sr-super-topbar h1 {
    margin: 0;
    color: var(--sr-navy);
    font-size: 2rem;
    font-weight: 880;
    line-height: 1.05;
}

.sr-super-topbar p {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--sr-muted);
    font-weight: 650;
}

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

.sr-super-actions .uk-button,
.sr-super-panel .uk-button,
.sr-filter-bar .uk-button {
    border-radius: 7px;
    font-weight: 850;
}

.sr-super-topbar .sr-super-actions .uk-button-default {
    border-color: var(--sr-navy);
    background: var(--sr-navy);
    color: #fff;
}

.sr-super-topbar .sr-super-actions .uk-button-default:hover,
.sr-super-topbar .sr-super-actions .uk-button-default:focus {
    border-color: var(--sr-blue);
    background: var(--sr-blue);
    color: #fff;
}

.sr-super-panel {
    border: 1px solid var(--sr-line);
    border-radius: 8px;
}

.sr-super-admin-page .sr-card,
.sr-admin-panel-page .sr-card,
.sr-driver-panel-page .sr-card {
    border-radius: 8px;
}

.sr-super-admin-page .uk-card-body,
.sr-admin-panel-page .uk-card-body,
.sr-driver-panel-page .uk-card-body {
    padding: 20px;
}

.sr-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.sr-section-head .uk-label {
    flex: 0 0 auto;
    margin-top: 2px;
}

.sr-super-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sr-super-stats .sr-stat {
    border: 1px solid var(--sr-line);
    border-radius: 8px;
    background: #fff;
}

.sr-super-stats .uk-card-body {
    padding: 16px;
    color: var(--sr-muted);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sr-super-stats .sr-stat strong {
    margin-top: 8px;
    font-size: 1.85rem;
    letter-spacing: 0;
    text-transform: none;
}

.sr-admin-create-grid,
.sr-admin-account-form,
.sr-admin-shift-form,
.sr-shift-swap-form {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--sr-line);
    border-radius: 8px;
    background: #f9fbfd;
}

.sr-shift-swap-form {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(240px, 1fr) auto;
    align-items: end;
}

.sr-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto auto;
    gap: 10px;
    align-items: center;
}

.sr-super-admin-page .sr-table-wrap,
.sr-admin-panel-page .sr-table-wrap,
.sr-driver-panel-page .sr-table-wrap {
    border: 1px solid var(--sr-line);
    border-radius: 8px;
    background: #fff;
}

.sr-super-admin-page .sr-table,
.sr-admin-panel-page .sr-table,
.sr-driver-panel-page .sr-table {
    margin-bottom: 0;
}

.sr-super-admin-page .sr-table th,
.sr-admin-panel-page .sr-table th,
.sr-driver-panel-page .sr-table th {
    background: #f8fafc;
    color: #56657a;
}

.sr-super-admin-page .sr-table td,
.sr-admin-panel-page .sr-table td,
.sr-driver-panel-page .sr-table td {
    vertical-align: top;
}

.sr-admin-row-form,
.sr-driver-edit-form {
    gap: 8px;
}

.sr-super-admin-page .uk-input,
.sr-super-admin-page .uk-select,
.sr-super-admin-page .uk-textarea,
.sr-admin-panel-page .uk-input,
.sr-admin-panel-page .uk-select,
.sr-admin-panel-page .uk-textarea,
.sr-driver-panel-page .uk-input,
.sr-driver-panel-page .uk-select,
.sr-driver-panel-page .uk-textarea {
    border-radius: 7px;
}

.sr-label-offset {
    display: inline-flex;
    margin-top: 7px;
}

.sr-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--sr-navy);
    font-size: 0.8rem;
    font-weight: 800;
}

@media (min-width: 760px) {
    .sr-rider-page {
        --sr-hero-bg-end: 460px;
    }

    .sr-main {
        padding-top: 34px;
    }

    .sr-shell {
        grid-template-columns: minmax(0, 0.95fr) minmax(380px, 0.7fr);
        align-items: start;
    }

    .sr-dashboard-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sr-admin-driver-form {
        grid-template-columns: minmax(180px, 1.2fr) minmax(210px, 1.2fr) minmax(170px, 0.9fr) auto auto;
    }

    .sr-admin-create-grid {
        grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) minmax(95px, 0.45fr) minmax(140px, 0.6fr) minmax(170px, 0.75fr);
        align-items: end;
    }

    .sr-admin-create-grid textarea,
    .sr-admin-create-grid .sr-button {
        grid-column: span 2;
    }

    .sr-admin-shift-form,
    .sr-shift-swap-form,
    .sr-admin-account-form {
        grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(150px, 0.75fr) auto auto;
        align-items: end;
    }

    .sr-shift-swap-form {
        grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(240px, 1fr) auto;
    }
}

@media (max-width: 640px) {
    .sr-update-prompt {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        align-items: stretch;
        flex-direction: column;
    }

    .sr-update-button {
        width: 100%;
    }

    .sr-rider-simple-header {
        min-height: 76px;
        padding: 12px 16px 4px;
    }

    .sr-rider-simple-logo img {
        height: 62px;
        max-width: 46vw;
    }

    .sr-rider-login-button {
        min-height: 38px;
        padding: 0 16px;
        line-height: 36px;
    }

    .sr-header {
        padding-inline: 12px;
    }

    .sr-nav a {
        padding: 0 8px;
        font-size: 0.7rem;
    }

    .sr-main {
        padding-inline: 12px;
    }

    .uk-card-body {
        padding: 20px;
    }

    .sr-status-line {
        display: grid;
        gap: 4px;
    }

    .sr-status-line span:last-child {
        text-align: left;
    }

    .sr-overview-active-row,
    .sr-overview-active-actions {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .sr-section-actions {
        justify-content: flex-start;
    }

    .sr-table-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .sr-table-size-form,
    .sr-pagination {
        justify-content: space-between;
    }

    .sr-track-panel,
    .sr-track-row {
        grid-template-columns: 1fr;
    }

    .sr-track-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .sr-shift-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .sr-map-heading {
        display: grid;
        gap: 2px;
    }

    .sr-map-heading span {
        text-align: left;
    }

    .sr-map-frame {
        height: 220px;
    }

    .sr-admin-driver-form .sr-button,
    .sr-admin-actions .uk-button,
    .sr-driver-edit-form .uk-button,
    .sr-reset-form,
    .sr-reset-form .uk-input {
        width: 100%;
    }
}

@media (max-width: 1020px) {
    .sr-super-shell {
        grid-template-columns: 1fr;
    }

    .sr-super-sidebar {
        position: static;
        min-height: 0;
    }

    .sr-super-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sr-super-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .sr-super-admin-page .sr-main,
    .sr-admin-panel-page .sr-main,
    .sr-driver-panel-page .sr-main {
        padding-inline: 12px;
    }

    .sr-super-topbar,
    .sr-section-head {
        display: grid;
    }

    .sr-super-actions,
    .sr-super-actions .uk-button {
        width: 100%;
    }

    .sr-super-nav,
    .sr-super-stats,
    .sr-filter-bar {
        grid-template-columns: 1fr;
    }

    .sr-admin-create-grid,
    .sr-admin-account-form,
    .sr-admin-shift-form {
        grid-template-columns: 1fr;
    }
}

/* Arke portal skin: login, admin, driver, and super admin only. */
.sr-login-page,
.sr-super-admin-page,
.sr-admin-panel-page,
.sr-driver-panel-page {
    --arke: #111827;
    --arke-mid: #1f2937;
    --arke-light: #4b5563;
    --arke-accent: #2563eb;
    --arke-success: #2d9e6b;
    --arke-warn: #f59e0b;
    --arke-danger: #dc2626;
    --arke-info: #0ea5e9;
    --surface: #f5f5f7;
    --surface-2: #ececf0;
    --white: #ffffff;
    --ink: #1d1d1f;
    --ink-mid: #3a3a3c;
    --ink-muted: #6e6e73;
    --ink-faint: #a1a1a6;
    --shadow-card: 0 12px 34px rgba(0, 0, 0, 0.055);
    --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.055);
    --shadow-lg: 0 22px 70px rgba(0, 0, 0, 0.08);
    --r: 14px;
    --r-sm: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
    --sr-hero-bg-end: 0px;
    background: var(--surface) !important;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

.sr-login-page .sr-header,
.sr-login-page .sr-footer,
.sr-super-admin-page .sr-header,
.sr-super-admin-page .sr-footer,
.sr-admin-panel-page .sr-header,
.sr-admin-panel-page .sr-footer,
.sr-driver-panel-page .sr-header,
.sr-driver-panel-page .sr-footer {
    display: none;
}

.sr-login-page .sr-main,
.sr-super-admin-page .sr-main,
.sr-admin-panel-page .sr-main,
.sr-driver-panel-page .sr-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.95), transparent 36%),
        linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
}

.sr-arke-login-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 48px 20px;
}

.sr-arke-login-card {
    width: min(100%, 482px);
    border: 0 !important;
    border-radius: 28px !important;
    background: var(--white) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.07) !important;
}

.sr-arke-login-card .uk-card-body {
    padding: 30px;
}

.sr-arke-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 34px;
}

.sr-arke-login-brand .sr-logo-mark,
.sr-super-sidebar-head .sr-logo-mark {
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(145deg, #1d1d1f, #6e6e73);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    color: #fff;
    font-weight: 800;
}

.sr-arke-login-brand p {
    margin: 0 0 5px;
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
}

.sr-arke-login-brand h1 {
    margin: 0;
    color: var(--ink);
    font-size: 28px;
    font-weight: 760;
    letter-spacing: -0.04em;
    line-height: 1;
}

.sr-arke-login-copy {
    margin-bottom: 24px;
}

.sr-arke-login-copy h2 {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: clamp(30px, 5vw, 42px);
    font-weight: 760;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.sr-arke-login-copy p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 15.5px;
    line-height: 1.55;
}

.sr-login-page .sr-form label,
.sr-super-admin-page .sr-form label,
.sr-admin-panel-page .sr-form label,
.sr-driver-panel-page .sr-form label {
    color: var(--ink-mid);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.sr-login-page .sr-login-choice {
    gap: 10px;
    margin-bottom: 18px !important;
}

.sr-login-page .sr-login-choice label {
    min-height: 64px;
    padding: 14px;
    border: 0;
    border-radius: 18px;
    background: #f5f5f7;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.035);
}

.sr-login-page .sr-login-choice strong {
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
}

.sr-login-page .sr-login-choice small {
    color: var(--ink-muted);
    font-size: 12.5px;
    font-weight: 650;
}

.sr-login-page .uk-input,
.sr-login-page .uk-select,
.sr-login-page .uk-textarea,
.sr-super-admin-page .uk-input,
.sr-super-admin-page .uk-select,
.sr-super-admin-page .uk-textarea,
.sr-admin-panel-page .uk-input,
.sr-admin-panel-page .uk-select,
.sr-admin-panel-page .uk-textarea,
.sr-driver-panel-page .uk-input,
.sr-driver-panel-page .uk-select,
.sr-driver-panel-page .uk-textarea {
    min-height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: var(--r-sm) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.sr-login-page .uk-input:focus,
.sr-login-page .uk-select:focus,
.sr-login-page .uk-textarea:focus,
.sr-super-admin-page .uk-input:focus,
.sr-super-admin-page .uk-select:focus,
.sr-super-admin-page .uk-textarea:focus,
.sr-admin-panel-page .uk-input:focus,
.sr-admin-panel-page .uk-select:focus,
.sr-admin-panel-page .uk-textarea:focus,
.sr-driver-panel-page .uk-input:focus,
.sr-driver-panel-page .uk-select:focus,
.sr-driver-panel-page .uk-textarea:focus {
    border-color: #6e6e73 !important;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08) !important;
}

.sr-login-page .sr-button-primary,
.sr-super-admin-page .sr-button-primary,
.sr-admin-panel-page .sr-button-primary,
.sr-driver-panel-page .sr-button-primary,
.sr-login-page .uk-button-primary,
.sr-super-admin-page .uk-button-primary,
.sr-admin-panel-page .uk-button-primary,
.sr-driver-panel-page .uk-button-primary {
    min-height: 44px;
    border: 1px solid var(--arke) !important;
    border-radius: var(--r-sm) !important;
    background: var(--arke) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.13) !important;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: 0;
}

.sr-login-page .sr-button-primary:hover,
.sr-super-admin-page .sr-button-primary:hover,
.sr-admin-panel-page .sr-button-primary:hover,
.sr-driver-panel-page .sr-button-primary:hover,
.sr-login-page .uk-button-primary:hover,
.sr-super-admin-page .uk-button-primary:hover,
.sr-admin-panel-page .uk-button-primary:hover,
.sr-driver-panel-page .uk-button-primary:hover {
    border-color: #2f343c !important;
    background: #2f343c !important;
    transform: translateY(-1px);
}

.sr-super-admin-page .uk-button-default,
.sr-admin-panel-page .uk-button-default,
.sr-driver-panel-page .uk-button-default,
.sr-super-admin-page .sr-track-button,
.sr-admin-panel-page .sr-track-button,
.sr-driver-panel-page .sr-track-button {
    min-height: 38px;
    border-color: transparent !important;
    border-radius: var(--r-sm) !important;
    background: var(--white) !important;
    color: var(--ink) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.045);
    font-weight: 650;
    letter-spacing: 0;
}

.sr-super-admin-page .uk-button-default:hover,
.sr-admin-panel-page .uk-button-default:hover,
.sr-driver-panel-page .uk-button-default:hover {
    background: #f5f5f7 !important;
    color: var(--ink) !important;
}

.sr-super-admin-page .uk-button-danger,
.sr-admin-panel-page .uk-button-danger,
.sr-driver-panel-page .uk-button-danger {
    border-radius: var(--r-sm) !important;
    background: var(--arke-danger) !important;
    color: #fff !important;
}

.sr-super-shell {
    display: flex;
    gap: 0;
    min-height: 100dvh;
    align-items: stretch;
}

.sr-super-sidebar {
    position: sticky;
    top: 0;
    flex: 0 0 248px;
    width: 248px;
    min-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    padding: 0 12px 12px;
    border: 0 !important;
    border-radius: 0 28px 28px 0;
    background: var(--white) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.035) !important;
}

.sr-super-sidebar-head {
    min-height: 82px;
    padding: 20px 8px 16px;
    border-bottom: 0;
}

.sr-super-sidebar-head .sr-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.68rem;
}

.sr-super-sidebar-head .sr-portal-logo {
    width: 48px;
    height: 48px;
}

.sr-super-sidebar-head strong {
    color: var(--ink) !important;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.sr-super-sidebar-head span:not(.sr-logo-mark) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    margin-top: 5px;
    padding: 4px 9px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--ink-muted) !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.08;
}

.sr-super-nav {
    flex: 0 0 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0;
}

.sr-super-nav::before {
    content: "Navigation";
    display: block;
    padding: 0 8px 6px;
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sr-super-nav a {
    min-height: 40px;
    margin-bottom: 2px;
    padding: 9px 10px;
    border-radius: var(--r-sm);
    color: var(--ink) !important;
    font-size: 13.5px;
    font-weight: 500;
    transition: background 150ms ease, color 150ms ease;
}

.sr-super-nav a:hover,
.sr-super-nav a.sr-active {
    background: rgba(0, 0, 0, 0.06) !important;
    color: var(--arke) !important;
}

.sr-super-nav strong {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #f2f2f4;
    color: var(--ink);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
}

.sr-super-sidebar-foot {
    align-self: auto;
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px 8px 0;
    border-top: 0;
}

.sr-super-sidebar-foot span {
    color: var(--ink-muted) !important;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.sr-super-sidebar-foot strong {
    display: block;
    margin-top: 2px;
    color: var(--ink) !important;
    font-size: 13px;
    font-weight: 600;
}

.sr-super-content {
    flex: 1;
    min-width: 0;
    padding: 0 24px 28px;
    background: var(--surface);
}

.sr-super-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 60px;
    margin: 0 -24px 24px;
    padding: 14px 24px;
    border: 0;
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
}

.sr-super-topbar .sr-kicker {
    display: none;
}

.sr-super-topbar h1 {
    color: var(--ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.sr-super-topbar p {
    margin-top: 3px;
    color: var(--ink-muted);
    font-size: 13.5px;
    font-weight: 400;
}

.sr-super-actions .uk-button {
    min-height: 32px;
    border-radius: var(--r-sm) !important;
    font-size: 13px;
    font-weight: 650;
    padding-inline: 12px;
}

.sr-super-topbar .sr-super-actions .uk-button-default {
    border-color: transparent !important;
    background: var(--white) !important;
    color: var(--ink) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.045);
}

.sr-super-topbar .sr-super-actions .uk-button-default:hover,
.sr-super-topbar .sr-super-actions .uk-button-default:focus {
    background: #f5f5f7 !important;
    color: var(--ink) !important;
}

.sr-super-admin-page .sr-card,
.sr-admin-panel-page .sr-card,
.sr-driver-panel-page .sr-card,
.sr-super-panel,
.sr-super-admin-page .sr-table-wrap,
.sr-admin-panel-page .sr-table-wrap,
.sr-driver-panel-page .sr-table-wrap,
.sr-track-panel {
    border: 0 !important;
    border-radius: var(--r-xl) !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-card) !important;
}

.sr-super-admin-page .uk-card-body,
.sr-admin-panel-page .uk-card-body,
.sr-driver-panel-page .uk-card-body {
    padding: 20px;
}

.sr-dashboard-grid,
.sr-super-stats {
    gap: 16px;
    margin-bottom: 24px;
}

.sr-dashboard-grid .sr-stat,
.sr-super-stats .sr-stat {
    padding: 0;
    border: 0 !important;
    border-radius: var(--r-xl) !important;
    background: var(--white) !important;
    box-shadow: var(--shadow-card) !important;
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.sr-dashboard-grid .sr-stat:hover,
.sr-super-stats .sr-stat:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

.sr-dashboard-grid .sr-stat .uk-card-body,
.sr-super-stats .sr-stat .uk-card-body {
    padding: 20px;
    color: var(--ink-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sr-dashboard-grid .sr-stat strong,
.sr-super-stats .sr-stat strong {
    display: block;
    margin-top: 12px;
    color: var(--ink);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    text-transform: none;
}

.sr-section-head {
    padding: 16px 20px;
    margin: -20px -20px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.sr-card-title,
.sr-section-head h2 {
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0;
}

.sr-section-head p,
.sr-muted {
    color: var(--ink-muted) !important;
}

.sr-admin-create-grid,
.sr-admin-account-form,
.sr-admin-shift-form,
.sr-shift-swap-form {
    gap: 16px;
    padding: 16px;
    border: 0;
    border-radius: var(--r-lg);
    background: #f5f5f7;
}

.sr-super-admin-page .sr-table-wrap,
.sr-admin-panel-page .sr-table-wrap,
.sr-driver-panel-page .sr-table-wrap {
    overflow-x: auto;
}

.sr-super-admin-page .sr-table,
.sr-admin-panel-page .sr-table,
.sr-driver-panel-page .sr-table {
    min-width: 780px;
    border-collapse: collapse;
    color: var(--ink);
    font-size: 13.5px;
}

.sr-super-admin-page .sr-table th,
.sr-admin-panel-page .sr-table th,
.sr-driver-panel-page .sr-table th {
    padding: 11px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sr-super-admin-page .sr-table td,
.sr-admin-panel-page .sr-table td,
.sr-driver-panel-page .sr-table td {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--ink);
}

.sr-super-admin-page .sr-table tbody tr:hover td,
.sr-admin-panel-page .sr-table tbody tr:hover td,
.sr-driver-panel-page .sr-table tbody tr:hover td {
    background: var(--surface);
}

@media (max-width: 959px) {
    .sr-driver-panel-page #pending .sr-table {
        min-width: 0;
        width: 100%;
    }

    .sr-driver-panel-page #pending .sr-pending-detail-col {
        display: none;
    }

    .sr-driver-panel-page #active .sr-table {
        min-width: 0;
        width: 100%;
    }

    .sr-driver-panel-page #active .sr-my-rides-detail-col {
        display: none;
    }

    .sr-driver-panel-page #active .sr-my-rides-mobile-col {
        display: table-cell;
    }
}

.sr-super-admin-page .uk-label,
.sr-admin-panel-page .uk-label,
.sr-driver-panel-page .uk-label {
    border-radius: 20px !important;
    padding: 3px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}

.sr-shift-panel {
    align-items: center;
}

.sr-map-frame {
    border-radius: var(--r-lg);
}

.sr-alert,
.uk-alert {
    border-radius: var(--r-sm) !important;
}

@media (min-width: 961px) {
    .sr-super-admin-page,
    .sr-admin-panel-page,
    .sr-driver-panel-page {
        overflow: hidden;
    }

    .sr-super-content {
        height: 100dvh;
        overflow-y: auto;
    }
}

@media (max-width: 1020px) {
    .sr-super-shell {
        display: block;
        min-height: 100dvh;
    }

    .sr-super-sidebar {
        position: relative;
        width: auto;
        min-height: 0;
        height: auto;
        margin: 12px;
        padding: 12px;
        border-radius: var(--r-xl);
    }

    .sr-super-sidebar-head {
        min-height: 0;
        padding: 4px 4px 12px;
    }

    .sr-super-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
        padding: 0;
    }

    .sr-super-nav::before {
        display: none;
    }

    .sr-super-sidebar-foot {
        display: none;
    }

    .sr-super-content {
        padding: 0 12px 24px;
    }

    .sr-super-topbar {
        margin: 0 -12px 18px;
        padding: 14px 12px;
    }
}

@media (max-width: 720px) {
    .sr-arke-login-shell {
        align-items: flex-start;
        padding: 22px 14px 58px;
    }

    .sr-arke-login-card {
        border-radius: 24px !important;
    }

    .sr-arke-login-card .uk-card-body {
        padding: 22px;
    }

    .sr-super-nav {
        grid-template-columns: 1fr;
    }

    .sr-super-topbar,
    .sr-section-head {
        display: grid;
    }

    .sr-super-actions,
    .sr-super-actions .uk-button {
        width: 100%;
    }

    .sr-dashboard-grid,
    .sr-super-stats {
        grid-template-columns: 1fr;
    }

    .sr-filter-bar {
        grid-template-columns: 1fr;
    }

    .sr-admin-create-grid,
    .sr-admin-account-form,
    .sr-admin-shift-form,
    .sr-shift-swap-form {
        grid-template-columns: 1fr;
    }
}

/* Odin-style mobile navbar. Hidden on desktop. */
.dash-topbar {
    display: none;
}

.sr-mobile-topbar,
.sr-mobile-offcanvas {
    --blue: #0a84ff;
    --blue-rgb: 10, 132, 255;
    --blue-bg: rgba(10, 132, 255, 0.12);
    --blue-bg-strong: rgba(10, 132, 255, 0.18);
    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
}

.sr-mobile-offcanvas.uk-open {
    z-index: 1200;
}

.sr-mobile-offcanvas .uk-offcanvas-bar {
    z-index: 1201;
    width: min(86vw, 318px);
    padding: 0;
    background: #fff;
}

.sr-mobile-offcanvas .uk-offcanvas-overlay::before {
    z-index: 1200;
}

.uk-offcanvas-page .dash-topbar {
    z-index: 1;
}

.osb-oc {
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
}

.osb-inner {
    padding: 14px;
}

.osb-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #fff;
    margin-bottom: 10px;
}

.sr-mobile-brandmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--blue-bg);
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

.sr-mobile-brandtext {
    color: var(--ink-900);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.osb-role-pill {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    background: var(--blue-bg);
    color: var(--blue);
    border: 1px solid var(--blue-bg-strong);
    text-transform: capitalize;
    white-space: nowrap;
}

.osb-profile {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    margin-bottom: 10px;
}

.osb-profile-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.osb-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-bg);
    color: var(--blue);
    font-weight: 900;
    font-size: 15px;
    flex-shrink: 0;
}

.osb-name {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ink-900);
    letter-spacing: -0.2px;
}

.osb-meta {
    font-size: 12px;
    color: var(--ink-500);
    margin-top: 2px;
}

.osb-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.osb-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 12px;
    color: var(--ink-700);
    text-decoration: none !important;
    font-size: 13.5px;
    transition: background 0.12s ease, color 0.12s ease;
}

.osb-nav a:hover {
    background: #f4f7ff;
    color: var(--ink-900);
    text-decoration: none !important;
}

.osb-link-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.osb-active > a {
    background: var(--blue-bg) !important;
    color: var(--blue) !important;
    font-weight: 700;
}

.osb-badge {
    background: #ff3b30;
    color: #fff;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 959px) {
    .sr-header {
        display: none;
    }

    .dash-topbar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background-color: rgba(255, 255, 255, 0.72);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        box-sizing: border-box;
        height: 52px;
        padding: 0 20px;
        margin: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
    }

    .dash-topbar-logo {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        gap: 9px;
        text-decoration: none !important;
    }

    .dash-topbar-toggle {
        width: 44px;
        height: 44px;
        border: none;
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-900);
        padding: 8px;
        border-radius: 999px;
        transition: background 0.12s, color 0.12s;
    }

    .dash-topbar-toggle:hover {
        background: rgba(15, 23, 42, 0.06);
    }

    .sr-main {
        padding-top: 76px;
    }

    .sr-rider-page .sr-main {
        padding-top: 18px;
    }

    .sr-login-page .sr-main,
    .sr-super-admin-page .sr-main,
    .sr-admin-panel-page .sr-main,
    .sr-driver-panel-page .sr-main {
        padding-top: 52px;
    }

    .sr-super-admin-page .sr-super-sidebar,
    .sr-admin-panel-page .sr-super-sidebar,
    .sr-driver-panel-page .sr-super-sidebar {
        display: none !important;
    }

    .sr-super-admin-page .sr-super-content,
    .sr-admin-panel-page .sr-super-content,
    .sr-driver-panel-page .sr-super-content {
        padding-top: 0;
    }

    .sr-super-admin-page .sr-super-topbar,
    .sr-admin-panel-page .sr-super-topbar,
    .sr-driver-panel-page .sr-super-topbar {
        position: static;
        z-index: auto;
        min-height: 0;
        margin: 0 0 18px;
        padding: 18px 4px 2px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .sr-super-admin-page .sr-super-topbar h1,
    .sr-admin-panel-page .sr-super-topbar h1,
    .sr-driver-panel-page .sr-super-topbar h1 {
        margin: 0;
        font-size: 24px;
        line-height: 1.12;
    }

    .sr-super-admin-page .sr-super-topbar p,
    .sr-admin-panel-page .sr-super-topbar p,
    .sr-driver-panel-page .sr-super-topbar p {
        margin: 6px 0 0;
        line-height: 1.45;
    }

    .sr-super-admin-page .sr-super-topbar .sr-super-actions,
    .sr-admin-panel-page .sr-super-topbar .sr-super-actions,
    .sr-driver-panel-page .sr-super-topbar .sr-super-actions {
        display: none !important;
    }

    .sr-pwa-install {
        grid-template-columns: 1fr;
    }

    .sr-pwa-install .sr-button {
        width: 100%;
    }

    .sr-push-panel {
        grid-template-columns: 1fr;
    }

    .sr-push-panel .sr-button {
        width: 100%;
    }
}