/* Экран входа статичен и живёт вне MudThemeProvider — без этого правила он рисовался
   Times New Roman; h1 фокусирует FocusOnNavigate после каждого перехода, рамка на нём — шум. */
html { font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif; }
h1:focus { outline: none; }

/* Тему задаёт PortalTheme из Portal.Core — здесь только то, чего в теме нет. */
.page-state {
    padding: 2rem;
    opacity: 0.7;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}

html, body { background: #0c1119; }
.taxi-admin-layout { min-height: 100vh; background: radial-gradient(circle at 78% -15%, rgba(37,99,235,.12), transparent 32%), #0c1119; }
.admin-appbar { height: 68px; padding: 0 20px; border-bottom: 1px solid rgba(148,163,184,.11); background: rgba(12,17,25,.84) !important; backdrop-filter: blur(22px) saturate(140%); }
.admin-menu-button { display: none !important; }
.admin-brand-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-right: 10px; border-radius: 13px; color: #fff; background: linear-gradient(145deg,#2878e9,#6b52d7); box-shadow: 0 8px 20px rgba(37,99,235,.2); }
.admin-brand { display: flex; flex-direction: column; line-height: 1.12; }
.admin-brand strong { font-size: .86rem; letter-spacing: -.01em; }
.admin-brand small { margin-top: 3px; color: #8491a5; font-size: .6rem; }
.admin-user { display: inline-flex; align-items: center; gap: 6px; margin-right: 7px; padding: 6px 10px; border-radius: 16px; color: #a9b4c5; background: rgba(148,163,184,.08); font-size: .67rem; }
.admin-drawer { border-right: 1px solid rgba(148,163,184,.1) !important; background: rgba(14,20,30,.96) !important; }
.drawer-heading { display: flex; flex-direction: column; padding: 25px 18px 13px; }
.drawer-heading span { color: #8996a9; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.drawer-heading small { margin-top: 4px; color: #e8edf5; font-size: .78rem; font-weight: 700; }
.admin-nav { padding: 4px 9px; }
.admin-nav .mud-nav-link { min-height: 46px; margin: 3px 0; border-radius: 14px; color: #9aa7ba; font-size: .75rem; }
.admin-nav .mud-nav-link.active { color: #fff; background: linear-gradient(90deg,rgba(39,121,232,.24),rgba(39,121,232,.08)); }
.drawer-foot { position: absolute; right: 16px; bottom: 18px; left: 16px; display: flex; align-items: center; gap: 8px; color: #7f8da1; font-size: .61rem; }
.drawer-foot i { width: 7px; height: 7px; border-radius: 50%; background: #1bb67f; box-shadow: 0 0 0 4px rgba(27,182,127,.1); }
.admin-main { min-height: 100vh; }
.admin-container { padding: 28px 28px 52px !important; }
.admin-page { display: flex; flex-direction: column; gap: 17px; }
.admin-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 2px; }
.admin-page-title span { color: #4d91ef; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-page-title h1 { margin: 3px 0 0; font-size: 1.65rem; font-weight: 780; letter-spacing: -.045em; }
.admin-page-title p { max-width: 590px; margin: 6px 0 0; color: #8390a4; font-size: .7rem; line-height: 1.45; }
.admin-stats { display: grid; grid-template-columns: repeat(3,minmax(105px,1fr)); gap: 8px; }
.admin-stat { min-width: 105px; padding: 10px 12px; border: 1px solid rgba(148,163,184,.1); border-radius: 15px; background: rgba(148,163,184,.055); }
.admin-stat small { display: block; color: #7f8da1; font-size: .56rem; }
.admin-stat strong { display: block; margin-top: 2px; font-size: .92rem; }
.admin-page > .mud-paper, .admin-page .mud-table-root { border: 1px solid rgba(148,163,184,.1); border-radius: 18px !important; background: rgba(18,25,37,.76) !important; box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.admin-page .mud-table-container { overflow-x: auto; border-radius: 18px; }
.admin-page .mud-table-head .mud-table-cell { color: #7f8da1; font-size: .61rem; font-weight: 750; letter-spacing: .025em; white-space: nowrap; }
.admin-page .mud-table-body .mud-table-cell { font-size: .69rem; }
.admin-page .mud-button-root { border-radius: 12px; text-transform: none; }
.admin-page .mud-input-control { min-width: 0; }
.admin-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid rgba(148,163,184,.1); border-radius: 16px; background: rgba(148,163,184,.045); }
.queue-map-action { display: flex; align-items: flex-end; padding-bottom: 8px; }
/* Подпись у числа в таблице: два срока в одной клетке различимы только ею. */
.queue-hint { color: rgba(148,163,184,.75); font-size: .72rem; }
.queue-map-panel { margin-top: 14px; overflow: hidden; border: 1px solid rgba(81,214,177,.2); border-radius: 17px; background: #0f1822; }
.queue-map-guide { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; border-bottom: 1px solid rgba(148,163,184,.1); }
.queue-map-guide > div { display: flex; flex-direction: column; gap: 2px; }
.queue-map-guide strong { color: #e8edf5; font-size: .72rem; }
.queue-map-guide span { color: #8390a4; font-size: .61rem; line-height: 1.4; }
.queue-map-guide code { flex: 0 0 auto; padding: 5px 8px; border-radius: 9px; color: #68ddb9; background: rgba(81,214,177,.08); font-size: .64rem; }
.queue-map-stage { position: relative; height: clamp(330px, 42vh, 480px); }
.queue-map-picker, .queue-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.queue-map-picker { overflow: hidden; background: #101820; }
.queue-map-pin { position: absolute; z-index: 3; left: 50%; top: 50%; width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50% 50% 50% 0; background: #51d6b1; box-shadow: 0 4px 12px rgba(0,0,0,.45); pointer-events: none; transform: translate(-50%,-100%) rotate(-45deg); }
.queue-map-pin::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.queue-map-unavailable { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: #a7b3c4; font-size: .72rem; text-align: center; background: rgba(148,163,184,.04); }
.queue-map-picker .maplibregl-map { font: inherit; }
.queue-map-picker .maplibregl-ctrl-group, .queue-map-picker .maplibregl-ctrl-attrib { border-color: rgba(129,151,170,.28); background: rgba(23,33,43,.92); color: #b7c7d5; box-shadow: 0 1px 8px rgba(0,0,0,.34); }
.queue-map-picker .maplibregl-ctrl-group button { color: #d5e2ec; }
.queue-map-picker .maplibregl-ctrl-icon { filter: invert(.88) sepia(.08) saturate(.7); }
.queue-map-picker .maplibregl-ctrl-attrib a { color: #d5e2ec; }
.report-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.report-card { position: relative; min-height: 138px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 16px; border: 1px solid rgba(148,163,184,.1); border-radius: 19px; background: rgba(18,25,37,.78); }
.report-card > span { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: #5598f2; background: rgba(50,127,235,.12); }
.report-card small { color: #7f8da1; font-size: .58rem; }
.report-card strong { margin-top: 3px; font-size: 1.3rem; letter-spacing: -.025em; }
.report-card p { margin: 3px 0 0; color: #7f8da1; font-size: .6rem; }
.report-card.success > span { color: #27bd87; background: rgba(39,189,135,.1); }
.report-card.warning > span, .report-card.rating > span { color: #efa92d; background: rgba(239,169,45,.1); }
.report-card.danger > span { color: #e45f6d; background: rgba(228,95,109,.1); }
.report-card.money > span { color: #a983f0; background: rgba(169,131,240,.1); }
@media (max-width: 959px) {
    .admin-menu-button { display: inline-flex !important; }
    .admin-container { padding: 20px 14px 42px !important; }
    .admin-page-head { align-items: flex-start; flex-direction: column; }
    .admin-stats { width: 100%; }
    .report-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
    .admin-appbar { height: 62px; padding: 0 8px; }
    .admin-brand-icon { display: none; }
    .admin-brand small, .admin-user { display: none; }
    .admin-page-title h1 { font-size: 1.35rem; }
    .admin-stats { grid-template-columns: repeat(3,1fr); gap: 5px; }
    .admin-stat { min-width: 0; padding: 9px 8px; }
    .admin-page > .mud-paper { padding: 13px !important; }

    /* Таблицы на телефоне складываются в карточки — это делает сама MudTable ниже своего
       breakpoint-а, а подписи берёт из DataLabel у каждой ячейки. Раньше здесь стояло
       `min-width: 700px`: строка оставалась строкой, и её возили вбок. Понять из такой
       таблицы, кто на линии и сколько заказов ждёт, нельзя — а именно за этим консоль
       и открывают с телефона. */
    .admin-page .mud-table-root { min-width: 0; }
    .admin-page .mud-table-cell {
        display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
        padding: 7px 13px; border: 0;
    }
    /* Подпись слева, значение справа — как в карточке, а не как в таблице без шапки. */
    .admin-page .mud-table-cell::before {
        content: attr(data-label);
        flex: 0 0 auto; max-width: 45%;
        color: rgba(148,163,184,.8); font-size: .74rem; text-transform: none;
    }
    /* Ячейка без подписи — это кнопки строки: им вся ширина и своя линия сверху. */
    .admin-page .mud-table-cell:not([data-label]) {
        justify-content: flex-start; flex-wrap: wrap; gap: 4px;
        margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(148,163,184,.12);
    }
    .admin-page .mud-table-cell:not([data-label])::before { content: none; }
    /* Строка — карточка: без рамки соседние записи сливаются в один столбец значений. */
    .admin-page .mud-table-row {
        display: block; margin-bottom: 10px; padding: 4px 0;
        border: 1px solid rgba(148,163,184,.14); border-radius: 14px;
        background: rgba(148,163,184,.04);
    }

    /* Вкладки окна настройки. Их пять, и каждая по умолчанию шириной 160px — в 375px
       помещается полторы. MudBlazor листает их двумя стрелками, но на окне шириной 311px
       стрелки съедали 96px из 263, оставляя под сами вкладки 167. Пальцем полосу листают
       и без них, поэтому на телефоне стрелки убираем, а полосу делаем прокручиваемой. */
    .mud-dialog .mud-tabs-scroll-button { display: none !important; }
    .mud-dialog .mud-tabs-tabbar-content {
        overflow-x: auto !important;
        scrollbar-width: none;
    }
    .mud-dialog .mud-tabs-tabbar-content::-webkit-scrollbar { display: none; }
    .mud-dialog .mud-tab {
        min-width: 0 !important;
        padding: 0 13px !important;
        font-size: .76rem;
    }
    /* Карта внутри окна: на телефоне ей хватает меньшей высоты, иначе кнопка «Сохранить»
       уезжает за нижний край и до неё надо прокручивать вслепую. */
    .mud-dialog .queue-map-stage { height: 260px; }
    .report-grid { gap: 6px; }
    .report-card { min-height: 122px; padding: 13px; }
    .queue-map-guide { align-items: flex-start; flex-direction: column; gap: 7px; }
    .queue-map-stage { height: 360px; }
}

/* Экран входа. Стили здесь, а не в Login.razor.css: изолированный CSS в этой консоли не
   подключён — в App.razor нет ссылки на бандл `.styles.css`, — и файл рядом с компонентом
   молча не применился бы. Оформление то же, что у консоли: тот же фон, та же панель, тот же
   акцент, — вход не должен выглядеть чужой страницей. */
.login-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    background: radial-gradient(circle at 78% -15%, rgba(37,99,235,.12), transparent 32%), #0c1119;
}

.login-card {
    width: 100%;
    max-width: 396px;
    padding: 34px 32px 30px;
    border: 1px solid rgba(148,163,184,.1);
    border-radius: 18px;
    background: rgba(18,25,37,.76);
    box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }

.login-brand-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg,#2878e9,#6b52d7);
    box-shadow: 0 8px 20px rgba(37,99,235,.2);
}

.login-brand-icon svg { width: 20px; height: 20px; fill: currentColor; }
.login-brand div { display: flex; flex-direction: column; line-height: 1.12; }
.login-brand strong { color: #e8edf5; font-size: .86rem; letter-spacing: -.01em; }
.login-brand small { margin-top: 3px; color: #8491a5; font-size: .6rem; }

.login-card h1 { margin: 0; font-size: 1.32rem; font-weight: 780; letter-spacing: -.04em; color: #e8edf5; }
.login-card p { margin: 7px 0 22px; color: #8390a4; font-size: .7rem; line-height: 1.45; }

.login-error {
    margin-bottom: 18px;
    padding: 10px 12px;
    border: 1px solid rgba(239,68,68,.28);
    border-radius: 13px;
    background: rgba(239,68,68,.09);
    color: #f7a9a9;
    font-size: .68rem;
    line-height: 1.4;
}

.login-error.is-warning {
    border-color: rgba(234,179,8,.28);
    background: rgba(234,179,8,.09);
    color: #f0d18a;
}

.login-field { margin-bottom: 14px; }

.login-field label {
    display: block;
    margin-bottom: 6px;
    color: #8996a9;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    color: #e8edf5;
    font: inherit;
    font-size: .78rem;
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 13px;
    background: rgba(148,163,184,.055);
    transition: border-color .15s, background-color .15s;
}

.login-field input::placeholder { color: #6d7a8d; }
.login-field input:hover { border-color: rgba(148,163,184,.26); }

.login-field input:focus {
    outline: none;
    border-color: #2878e9;
    background: rgba(37,99,235,.07);
}

.login-submit {
    width: 100%;
    margin-top: 8px;
    padding: 11px 16px;
    color: #fff;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: -.01em;
    border: none;
    border-radius: 13px;
    background: linear-gradient(145deg,#2878e9,#6b52d7);
    box-shadow: 0 8px 20px rgba(37,99,235,.2);
    cursor: pointer;
    transition: filter .15s;
}

.login-submit:hover { filter: brightness(1.08); }
.login-submit:active { filter: brightness(.95); }