/*
 * Console styles. Colors for the server-computed formatter states are ported verbatim from the
 * legacy jQuery-grid inline styles (web_console/static/js/main.js) so operators see the same cues.
 */

/* Online dot (§4.2 #24): green rgb(133,181,104) live, red rgb(180,60,22) offline. */
.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 8px;
    vertical-align: middle;
}
.dot-online { background-color: rgb(133, 181, 104); }
.dot-offline { background-color: rgb(180, 60, 22); }

/* Money24 (§4.2 #10): orange delta. */
.money24 { color: #f57c00; }

/* Custom min/max range header filter (Level / Money / Attention) — two small number inputs sharing
   one header cell. Sits inside Tabulator's .tabulator-header-filter wrapper. */
.range-filter { display: flex; gap: 2px; }
.range-filter input { width: 50%; min-width: 0; padding: 1px 3px; box-sizing: border-box; }
/* Hide the number-spinner arrows so both inputs fit a narrow header cell. */
.range-filter input::-webkit-outer-spin-button,
.range-filter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.range-filter input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Attention row highlight (§4.2 #23): attention != 0 && level >= attention. */
.attention-highlight,
.tabulator-row.attention-highlight {
    background-color: #cfe8ff !important;
}

/* Battle.net subscription badge (§4.2 #29). Legacy bands: Never=blue, amber 3..6d, red <3d. */
.bnet { display: inline-block; padding: 0 6px; border-radius: 3px; }
.bnet-never { background-color: #12b5f333; }
.bnet-ok { }
.bnet-amber { background-color: #f39c1233; }
.bnet-red { background-color: #b43c16ee; color: #fff; }
/* The badge and the char name are links into the detail page (A3-1); keep the badge's own colours. */
.bnet-link, .bnet-link:hover { text-decoration: none; color: inherit; }
.char-link { text-decoration: none; }
.char-link:hover { text-decoration: underline; }

/*
 * Action-button 5 states (§4.2). Reserved for the Phase-4 checkpoint-2 remote-action bars; colors
 * pinned now so the buttons only need the class. (1) ready, (2) pending, (3) finished,
 * (4) channel-down no task, (5) channel-down + task.
 */
.act {
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 1px 6px;
    margin: 1px;
    font-size: 11px;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
}
.act:hover { filter: brightness(0.95); }
.act:disabled { opacity: 0.5; cursor: progress; }
.act-ready { border-color: #1c94c4; color: #1c94c4; background: none; }
.act-pending { border-color: #eb8f00; background: #ffe4c4; color: #eb8f00; }
.act-finished { border-color: rgb(89, 123, 68); background: rgb(190, 239, 198); color: rgb(89, 123, 68); }
.act-down-no-task { border-color: rgb(180, 60, 22); color: rgb(180, 60, 22); background: none; }
.act-down-task { border-color: rgb(180, 60, 22); background: rgb(180, 60, 22); color: #fff; }
/* "Request /played" refresh control, rendered inside the Played cell (A3-3a). */
.act-played { border-color: #1c94c4; color: #1c94c4; background: none; }
.played-val { margin-right: 4px; }
.action-cell .tabulator-cell,
.action-cell { overflow: visible; }

/* Destructive-action confirm dialog (Phase 4.2b) — a custom modal, not window.confirm. */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
}
.confirm-box {
    background: #fff;
    border-radius: 6px;
    padding: 18px 20px;
    max-width: 420px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.confirm-msg { margin: 0 0 14px; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Transient error banner above the grid. */
.grid-flash {
    background: #b43c16ee;
    color: #fff;
    padding: 6px 12px;
    border-radius: 3px;
    margin-bottom: 8px;
    font-size: 13px;
}

/* Group money subtotal in the grid group header. */
.grp-sum b { color: #1c94c4; }

/* ========================================================================================
 * The Logs area (G-00 / D-078). One skeleton, one table style, one busy indicator, one
 * chip — every /logs page wears them, so a tenant who has learned one page has learned all.
 * ======================================================================================== */

/* The area sub-navigation: present on every page of the area, quieter than the top nav. */
.logs-subnav .nav-link { font-size: 13px; }
.logs-subnav .nav-link:not(.active) { color: #495057; }

/*
 * THE BUSY INDICATOR. `hx-indicator` toggles `htmx-request` on this element; visibility (not
 * display) keeps the controls row from reflowing every time a query runs.
 */
.logs-busy {
    visibility: hidden;
    font-size: 12px;
    color: #6c757d;
    margin-left: 6px;
    white-space: nowrap;
}
.logs-busy.htmx-request { visibility: visible; }

/* The controls row's action group: apply, reset, busy — in that order on every page. */
.logs-actions { display: flex; align-items: center; gap: .5rem; }

/* One applied-filter chip. The result header reads: count first, then what actually filtered. */
.logs-chip {
    background: #f1f3f5;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 1px 8px;
    color: #495057;
    white-space: nowrap;
}
.logs-count { font-weight: 600; }

/*
 * ONE TABLE STYLE. A sticky header, because a log table is read by scrolling and a column you
 * cannot name is a column you cannot trust; a scroll box, so the page itself never scrolls
 * horizontally; monospace for identifiers, right alignment for numbers.
 */
.logs-scroll { max-height: 70vh; overflow: auto; }
.logs-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -1px 0 #dee2e6;
    white-space: nowrap;
    font-size: 12px;
    text-transform: none;
}
/* A sortable header looks like a control everywhere; a display-only one never does. */
.logs-table thead th a { color: #212529; text-decoration: none; }
.logs-table thead th a:hover { text-decoration: underline; }
.logs-table thead th .logs-nosort { color: #adb5bd; cursor: default; }
.logs-key { font-family: var(--bs-font-monospace); font-size: 12px; }
.logs-num { text-align: right; font-variant-numeric: tabular-nums; }
.logs-time { white-space: nowrap; font-family: var(--bs-font-monospace); font-size: 12px; }
/* One truncation rule: the cell clips, the full text is the title. */
.logs-trunc { max-width: 40rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.range-filter-date input { font-size: 11px; padding: 1px 2px; }
.hs-ico { height: 15px; vertical-align: middle; }

/* Compact header row (legacy jqGrid filterToolbar look): 12px titles, one 22px filter box per
   column, every input/select the same height, boxes sized BY the column — never the column by the box. */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 2px 4px !important; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-title { font-size: 12px; }
.tabulator .tabulator-header .tabulator-header-filter { margin-top: 1px; }
.tabulator .tabulator-header .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-header-filter select,
.range-filter input {
    height: 22px !important;
    font-size: 11px !important;
    line-height: 20px;
    padding: 0 3px !important;
    margin: 0 !important;
    border: 1px solid #ced4da !important;
    border-radius: 2px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    background: #fff;
}
.range-filter input { width: 50% !important; }
.range-filter-date input { font-size: 10px !important; padding: 0 1px !important; }
/* The ⋮ column-menu button: 16px, not 8px padding either side — it was truncating short titles. */
.tabulator .tabulator-header .tabulator-header-popup-button { padding: 0 2px !important; font-size: 11px; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-title { padding-right: 14px !important; }