/* =========================================================
   Fleet Console — dark theme
   ========================================================= */

/* --- Reset / Base ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    background: #0f0f17;
    color: #e7e7f0;
    -webkit-font-smoothing: antialiased;
}

a { color: #5b9dff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Layout ---------------------------------------------- */
.layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* --- Sidebar nav ----------------------------------------- */
.nav {
    width: 180px;
    flex-shrink: 0;
    background: #15151f;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
    border-right: 1px solid #262636;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    padding: 16px 14px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #5b9dff;
    letter-spacing: .5px;
    border-bottom: 1px solid #262636;
}
.brand:hover { text-decoration: none; }
/* Shipped at 128px and drawn at 28 so the browser downsamples smoothly and HiDPI screens stay crisp — a
   28px bitmap of this artwork loses the robot entirely. The mark is transparent and sits straight on the
   sidebar now, so there is no plate left to round off. flex-shrink:0 keeps it square when the brand text
   wraps in the narrow drawer. */
.brand-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.navlink {
    display: block;
    padding: 9px 14px;
    color: #8a90a6;
    font-size: 13px;
    cursor: pointer;
    border-radius: 0;
    transition: background .15s, color .15s;
    text-decoration: none;
}

.navlink:hover {
    color: #e7e7f0;
    background: #1d2740;
    text-decoration: none;
}

/* NavLink sets class="active" when route matches */
.navlink.active {
    color: #e7e7f0;
    background: #1d2740;
    border-left: 3px solid #5b9dff;
    padding-left: 11px;
}

/* Section label in the sidebar. Deliberately quiet — smaller, dimmer and letter-spaced rather than bright:
   it has to separate the groups without competing with the links it labels, which are the things being
   clicked. Not clickable and not focusable, so it carries no hover or active state. */
.navgroup {
    padding: 14px 14px 4px;
    color: #5c6280;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    user-select: none;
}

/* No dead space above the first group — the brand block already provides it. */
.nav .navgroup:first-of-type {
    padding-top: 6px;
}

.navlink.disabled {
    color: #454a5c;
    cursor: default;
    pointer-events: none;
}

.grp {
    padding: 12px 14px 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #454a5c;
}

/* --- Main content area ----------------------------------- */
.main {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

/* --- Panel (card) ---------------------------------------- */
.panel {
    background: #161620;
    border: 1px solid #262636;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.panel-title {
    font-size: 13px;
    font-weight: 600;
    color: #8a90a6;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* --- Table ----------------------------------------------- */
table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

th {
    color: #8a90a6;
    font-weight: 600;
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #20202e;
    white-space: nowrap;
}

td {
    padding: 6px 10px;
    border-bottom: 1px solid #20202e;
    vertical-align: middle;
}

tr:last-child td { border-bottom: none; }

th.num, td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Color utilities ------------------------------------- */
.pos  { color: #5ad28a; }
.neg  { color: #ff8a8a; }
.muted { color: #8a90a6; }
.warn { color: #ffb38a; }

/* --- Badge (mode labels) --------------------------------- */
.badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    /* A wrapped badge stretches its whole table row; every badge here is meant to read as one
       short word/phrase, so never let it break onto a second line. */
    white-space: nowrap;
}

.badge.live   { background: #1d3a28; color: #5ad28a; }
.badge.dry    { background: #1d2740; color: #5b9dff; }
.badge.paper  { background: #2e2a1a; color: #ffb38a; }

/* --- Form fields ----------------------------------------- */
input:not([type=checkbox]):not([type=radio]),
textarea,
select {
    font: inherit;
    color: #e7e7f0;
    background: #12121c;
    border: 1px solid #2f3144;
    border-radius: 6px;
    padding: 7px 10px;
}

input:not([type=checkbox]):not([type=radio]):focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #5b9dff;
}

input::placeholder, textarea::placeholder { color: #5a607a; }

input:disabled, textarea:disabled, select:disabled { opacity: .55; cursor: not-allowed; }

select option { background: #12121c; color: #e7e7f0; }

label { color: #8a90a6; font-size: 12px; }

/* Per-field help text under a form label. */
.fhint { display: block; color: #6b7187; font-size: 11px; font-weight: 400; line-height: 1.4; margin: 1px 0 4px; max-width: 560px; }
.fhint code { background: #1b1b29; padding: 0 3px; border-radius: 3px; }

/* --- Range selector chips -------------------------------- */
.ranges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.range {
    padding: 3px 11px;
    border-radius: 20px;
    border: 1px solid #262636;
    background: transparent;
    color: #8a90a6;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    transition: background .12s, color .12s, border-color .12s;
}

.range:hover {
    color: #e7e7f0;
    border-color: #5b9dff;
}

.range.active {
    background: #1d2740;
    color: #5b9dff;
    border-color: #5b9dff;
}

/* --- Buttons (action) ------------------------------------ */
/* Base style for every <button> except the .range filter chips (which keep their pill look). */
button:not(.range) {
    font: inherit;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid #2f3144;
    background: #1b1b29;
    color: #e7e7f0;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, opacity .12s;
}

button:not(.range):hover:not(:disabled) {
    border-color: #5b9dff;
    background: #1d2740;
    color: #ffffff;
}

button:not(.range):disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Primary call-to-action (Create / Next / Generate / I've funded it / Save). */
button.primary {
    background: #2a5bd7;
    border-color: #2a5bd7;
    color: #ffffff;
    font-weight: 600;
}

button.primary:hover:not(:disabled) {
    background: #3a6df0;
    border-color: #3a6df0;
}

/* Destructive (Stop / Delete). */
button.danger {
    background: transparent;
    border-color: #e05252;
    color: #ff8a8a;
}

button.danger:hover:not(:disabled) {
    background: #3a1d1d;
    border-color: #ff8a8a;
    color: #ffd2d2;
}

/* --- KPI card grid --------------------------------------- */
.kpis {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.kpi {
    background: #161620;
    border: 1px solid #262636;
    border-radius: 10px;
    padding: 12px 18px;
    min-width: 140px;
}

.kpi-label {
    font-size: 11px;
    color: #8a90a6;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.kpi-value {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #e7e7f0;
}

.kpi-value.pos { color: #5ad28a; }
.kpi-value.neg { color: #ff8a8a; }

/* --- Blazor framework ------------------------------------ */
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 6px;
}

.blazor-error-boundary::after { content: "Произошла ошибка."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

/* =========================================================
   Responsive — mobile. Desktop (>=769px) unchanged.
   ========================================================= */

/* Universal horizontal-scroll safety net for any table (inert when content fits). */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Puts short panels side by side instead of stacking them in a 560px column with half the desktop empty.
   Two explicit columns, not auto-fit: auto-fit derives the count from the container width, which made the
   layout depend on the viewport in ways that were hard to predict. minmax(0,1fr) (not plain 1fr) lets a
   column shrink below its content's intrinsic width, which is what keeps a wide table or chart from
   pushing the grid past its bounds. align-items:start stops a short panel stretching to a tall
   neighbour's height. The 768px block below collapses it to one column for mobile. */
.panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

/* Top bar + scrim + mobile sort are mobile-only; hidden by default (desktop). */
.topbar { display: none; }
.nav-toggle { display: none; }
.nav-scrim { display: none; }
.sort-mobile { display: none; }

@media (max-width: 768px) {
    /* Side-by-side panels stack; two columns on a phone would squeeze both to nothing. */
    .panel-grid { grid-template-columns: 1fr; }

    /* Shell: drop the desktop flex/100vh/overflow-hidden -> normal document flow. */
    .layout { display: block; height: auto; overflow: visible; }

    .topbar {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 30;
        background: #15151f; border-bottom: 1px solid #262636; padding: 10px 14px;
    }
    .topbar .brand { padding: 0; border: none; font-size: 14px; }
    .hamburger {
        background: none; border: none; color: #e7e7f0; font-size: 22px; line-height: 1;
        cursor: pointer; min-height: 40px; min-width: 40px; padding: 0 8px;
    }

    /* Sidebar -> off-canvas drawer. */
    .nav {
        position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
        transform: translateX(-100%); transition: transform .2s ease; z-index: 50;
    }
    #nav-toggle:checked ~ .nav { transform: translateX(0); }
    #nav-toggle:checked ~ .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; }

    .main { padding: 14px; }

    /* KPI cards: two-up. */
    .kpi { min-width: 0; flex: 1 1 calc(50% - 6px); }

    /* Dense entity tables -> stacked cards. */
    .cards-sm thead { display: none; }
    .cards-sm tr { display: block; border: 1px solid #262636; border-radius: 10px; margin-bottom: 10px; padding: 8px 12px; }
    .cards-sm td {
        display: flex; justify-content: space-between; gap: 12px;
        border: none; padding: 4px 0; text-align: right; white-space: normal;
    }
    .cards-sm td::before { content: attr(data-label); color: #8a90a6; font-weight: 600; text-align: left; }
    .cards-sm td:empty { display: none; }

    /* A card cell must never widen the page. Its content is often a string with nowhere to wrap — a 34-char
       XRPL address, a 40-char currency hex, an image tag — and `white-space: normal` alone does not help when
       there is no space to break at. Without this the row pushes past the viewport and the WHOLE document
       scrolls sideways, not just the cell.

       `overflow-wrap: anywhere` rather than `word-break: break-all`: break-all also chops ordinary words
       mid-letter, which would mangle the Russian labels sitting in the same flex row. `anywhere` breaks only
       when there is no other way, and unlike `break-word` it also shrinks the flex item's min-content size,
       which is what actually lets the cell fit. `min-width: 0` removes the automatic minimum that would
       otherwise keep a flex item at its content width.

       Central rather than per page: Crawlers and Discovery already carry their own inline `word-break`, and
       MyBots, FfBots and Versions did not — the same bug, fixed in some places and not others, is what a rule
       here prevents from recurring on the next page someone adds. */
    .cards-sm td { min-width: 0; overflow-wrap: anywhere; }

    /* Same reasoning for the stacked settings form: it renders 40-character currency codes. */
    .form-table td { overflow-wrap: anywhere; }

    /* Any non-card, non-form table becomes a horizontal-scroll container (universal safety net). */
    .main table:not(.cards-sm):not(.form-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

    /* Settings form-table: stack each row — label + description above, input full-width below. */
    .form-table, .form-table tbody, .form-table tr, .form-table td { display: block; white-space: normal; }
    .form-table tr { margin-bottom: 12px; }
    .form-table td { padding: 2px 0; text-align: left; }
    .form-table td input { width: 100% !important; text-align: left !important; }

    /* Forms full-width + comfortable tap targets. */
    .main input:not([type=checkbox]):not([type=radio]), .main textarea, .main select { width: 100%; }
    button:not(.range) { min-height: 40px; }

    /* Mobile-only sort control (trade history). */
    .sort-mobile { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
    .sort-mobile select { flex: 1 1 auto; }

    /* Charts never overflow. */
    .chart-wrap, .chart-wrap svg, .chart-wrap canvas { max-width: 100%; }

    /* Modals fit the viewport. */
    .modal, .modal-card { max-width: calc(100% - 24px) !important; }
}

@media (max-width: 420px) {
    .main { padding: 10px; }
    .kpi { flex-basis: 100%; }
    html, body { font-size: 13px; }
}