/* ==========================================================================
   HX Console — Phase 1 design layer
   Loaded after hx.css. Nothing in hx.css is edited, so removing the single
   <link> in console.blade.php rolls this whole phase back.

   Covers:
     1. Figures — the taka sign, tabular alignment, readable weight
     2. Tables  — header, footer, zebra, hover, frozen columns
     3. Inputs  — search visibility, focus, numeric fields
     4. Toolbar — rows-per-page control
     5. Responsive — phone and tablet corrections
     6. Print
   ========================================================================== */

/* ==========================================================================
   1. Figures
   --------------------------------------------------------------------------
   The amount font was the root of the "amounts are hard to read" report.
   JetBrains Mono carries no Bengali block, so the currency sign U+09F3 (৳)
   fell through to whatever face the operating system happened to offer. On
   one machine that is a serif, on another it is a symbol font a size too
   large sitting off the baseline — next to crisp mono digits it reads as a
   rendering fault. Noto Sans Bengali is already self-hosted for customer
   names, and its unicode-range keeps it away from the digits, so adding it
   to the stack fixes the sign without touching the numerals.
   ========================================================================== */

:root {
    --mono: 'Figures', 'Bangla', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Figures get their own scale. They were riding on --t-sm (13px) with the
       body face's negative tracking, which is wrong for a monospace. */
    --t-num:    13.5px;
    --t-num-sm: 12.5px;

    /* Table surfaces */
    --dt-head-bg:     #E9EFF7;
    --dt-head-text:   #33455E;
    --dt-head-line:   #B9C6D8;
    --dt-row:         #FFFFFF;
    --dt-row-alt:     #F6F9FC;
    --dt-row-hover:   #E3F4EC;
    --dt-foot-bg:     #DFE8F3;
    --dt-foot-text:   #16233A;
    --dt-freeze-line: rgba(11, 18, 32, .14);
}

:root[data-theme='dark'] {
    --dt-head-bg:     #1C2839;
    --dt-head-text:   #C2D1E4;
    --dt-head-line:   #34445E;
    --dt-row:         #111926;
    --dt-row-alt:     #151F2E;
    --dt-row-hover:   #15332A;
    --dt-foot-bg:     #1A2536;
    --dt-foot-text:   #E9EFF8;
    --dt-freeze-line: rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --dt-head-bg:     #1C2839;
        --dt-head-text:   #C2D1E4;
        --dt-head-line:   #34445E;
        --dt-row:         #111926;
        --dt-row-alt:     #151F2E;
        --dt-row-hover:   #15332A;
        --dt-foot-bg:     #1A2536;
        --dt-foot-text:   #E9EFF8;
        --dt-freeze-line: rgba(0, 0, 0, .5);
    }
}

.num, td.num, th.num, .money, .kpi-value, .strip-value {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    /* 'zero' slashes the zero so 0 and O stop trading places in a code column. */
    font-feature-settings: 'tnum' 1, 'zero' 1;
    letter-spacing: 0;
}

table.dt td.num, table.dt th.num {
    font-size: var(--t-num);
    white-space: nowrap;
}

/* Amounts are the reading target of every financial screen, so they get full
   text colour and a heavier weight than the label beside them. */
.money {
    font-weight: 600;
    color: var(--text);
    font-feature-settings: 'tnum' 1, 'zero' 1;
}
.money.pos { color: var(--pos); }
.money.neg { color: var(--neg); }

/* A minus sign in a mono face is a short dash that disappears at 13px.
   Widening it costs nothing and makes negatives unmistakable. */
.money.neg { letter-spacing: .01em; }

table.dt tfoot td.num, table.dt tfoot td {
    font-size: var(--t-num);
}

/* Compact density shrank figures to 11.5px, below the point where a Bengali
   sign and a thousands separator stay apart. It now has its own floor. */
table.dt.is-compact { font-size: var(--t-sm); }
table.dt.is-compact td.num, table.dt.is-compact th.num { font-size: var(--t-num-sm); }
table.dt.is-compact th, table.dt.is-compact td { padding: 8px 13px; }

/* ==========================================================================
   2. Tables
   ========================================================================== */

table.dt { font-size: var(--t-sm); }

table.dt thead th {
    background: var(--dt-head-bg);
    color: var(--dt-head-text);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--dt-head-line);
    padding: 12px 16px;
}
table.dt thead th.sortable:hover { background: var(--dt-head-line); color: var(--text); }
table.dt thead th.is-sorted { color: var(--brand); background: var(--dt-head-bg); }
table.dt thead th .arrow { opacity: .45; }
table.dt thead th.is-sorted .arrow { opacity: 1; }

/* The row background lives on the <tr> so that a frozen cell can simply
   inherit it and stay in step with zebra striping and hover. */
table.dt tbody tr { background: var(--dt-row); }
table.dt tbody tr:nth-child(even) { background: var(--dt-row-alt); }
table.dt tbody tr:hover { background: var(--dt-row-hover); }
table.dt tbody tr.dt-detail,
table.dt tbody tr.dt-detail:hover { background: var(--surface-2); }

table.dt tbody td { color: var(--text); border-bottom: 1px solid var(--line); }
table.dt tbody tr:last-child td { border-bottom: 0; }

table.dt tfoot td {
    background: var(--dt-foot-bg);
    color: var(--dt-foot-text);
    font-weight: 700;
    border-top: 2px solid var(--dt-head-line);
    border-bottom: 0;
}

/* Frozen columns -----------------------------------------------------------
   Offsets are measured and written by table.js, because column widths are not
   known until the browser has laid the table out. */
table.dt.has-freeze th.is-frozen,
table.dt.has-freeze td.is-frozen {
    position: sticky;
    z-index: 2;
    background: inherit;
}
table.dt.has-freeze thead th.is-frozen { z-index: 6; background: var(--dt-head-bg); }
table.dt.has-freeze tfoot td.is-frozen { z-index: 4; background: var(--dt-foot-bg); }
table.dt.has-freeze th.is-freeze-edge,
table.dt.has-freeze td.is-freeze-edge { box-shadow: 6px 0 8px -6px var(--dt-freeze-line); }

table.dt.has-freeze-right th.is-frozen-right,
table.dt.has-freeze-right td.is-frozen-right {
    position: sticky; right: 0; z-index: 3;
    background: inherit;
    box-shadow: -6px 0 8px -6px var(--dt-freeze-line);
}
table.dt.has-freeze-right thead th.is-frozen-right { z-index: 7; background: var(--dt-head-bg); }
table.dt.has-freeze-right tfoot td.is-frozen-right { z-index: 5; background: var(--dt-foot-bg); }

/* The old single-column rule is superseded; neutralised so the two systems
   cannot both claim the first cell. */
table.dt.sticky-first tbody td:first-child,
table.dt.sticky-first thead th:first-child { position: static; box-shadow: none; }

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }

/* Inputs sitting inside a table row (entry screens) --------------------- */
table.dt td input[type=number],
table.dt td input[type=text],
table.dt td select {
    min-height: 36px;
    padding: 6px 10px;
    font-size: var(--t-num);
}
table.dt td input[type=number],
table.dt td input[data-numeric] { text-align: right; }
table.dt td input.is-short { border-color: var(--neg); background: var(--neg-soft); }

/* ==========================================================================
   3. Inputs and search
   ========================================================================== */

/* Placeholders were legible in Chrome and washed out in Firefox and Safari,
   which apply their own opacity on top of the colour. */
::placeholder { color: var(--text-3); opacity: 1; }
::-webkit-input-placeholder { color: var(--text-3); opacity: 1; }
:-ms-input-placeholder { color: var(--text-3); opacity: 1; }

.input, input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], select, textarea {
    color: var(--text);
    font-weight: 500;
    background: var(--surface);
}
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
    background: var(--surface-3);
    color: var(--text-2);
    cursor: not-allowed;
    border-style: dashed;
}

/* Search fields -------------------------------------------------------- */
input[type=search] {
    -webkit-appearance: none;
    appearance: none;
}
/* Safari and Chrome draw their own clear cross in a fixed dark grey, invisible
   on a dark theme. Replaced with one that follows the theme. */
input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 16px; width: 16px;
    cursor: pointer;
    background: var(--text-3);
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type=search]::-webkit-search-cancel-button:hover { background: var(--neg); }

.hx-search input {
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    border: 1.5px solid var(--line-strong);
}
.hx-search input::placeholder { color: var(--text-3); opacity: 1; }
.hx-search svg { fill: var(--text-3); }
.hx-search:focus-within svg { fill: var(--brand); }
.hx-search input:focus {
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* Number fields ---------------------------------------------------------
   data-numeric marks a text field that behaves as an amount. It is styled
   with the number fields so the two are indistinguishable on screen. */
input[type=number],
input[data-numeric] {
    font-family: var(--mono);
    font-size: var(--t-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'zero' 1;
    text-align: right;
}
/* Standalone amount fields in a form read better left-aligned; only the ones
   sitting in a figures column are right-aligned. */
.field > input[data-numeric] { text-align: left; }
/* The spinner arrows are 12px wide, sit on top of the last digit, and change
   the value on an accidental scroll. Typed entry is the only entry method
   that matters here, so they go. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

input[type=date] {
    font-family: var(--mono);
    font-size: var(--t-num);
}
:root[data-theme='dark'] input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); }

/* A field that was zero and has been cleared for typing gets a quiet marker,
   so an empty box never looks like lost data. */
input.is-cleared { background: var(--brand-soft); border-color: var(--brand-line); }

/* ==========================================================================
   4. Table toolbar and footer
   ========================================================================== */

.dt-foot {
    background: var(--surface-2);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    gap: 12px;
}
.dt-count { color: var(--text-2); font-weight: 500; }
.dt-count strong { font-family: var(--mono); color: var(--text); font-weight: 700; }

.dt-size { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dt-size label {
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-3); margin: 0;
}
.dt-size select {
    width: auto; min-width: 84px; min-height: 36px;
    padding: 4px 30px 4px 11px;
    font-family: var(--mono); font-size: var(--t-num-sm); font-weight: 600;
    background-position: right 7px center;
}
.dt-size select:focus { border-color: var(--brand); }

/* "All" is a deliberate, heavier request than a page of 25, so it says so. */
.dt-size select.is-all { border-color: var(--brand); color: var(--brand); }

.dt-allnote {
    flex: 1 1 100%; order: 9;
    margin: 0; font-size: var(--t-xs); color: var(--warn); font-weight: 600;
}

.filters { align-items: flex-end; }
.filters .icon-btn { flex: 0 0 auto; }

/* ==========================================================================
   5. Responsive
   ========================================================================== */

/* hx.css hides .hx-search below 860px. That class is used by the topbar and
   by every DataTable search box, so on a phone the search box vanished from
   all 55 lists — which is what "the search bar text cannot be seen" was
   describing on mobile. The hide is now scoped to the topbar only. */
@media (max-width: 860px) {
    .hx-topbar .hx-search { display: none; }
    .filters .hx-search,
    .card .hx-search,
    .dt-toolbar .hx-search { display: block; width: 100%; }

    .filters {
        padding: 13px 14px;
        gap: 9px;
    }
    .filters .field,
    .filters .grow { flex: 1 1 100%; min-width: 0; }
    .filters .field.is-inline { flex: 0 0 auto; }

    /* Toolbar buttons form their own row instead of squeezing the search box
       down to an unusable stub. */
    .filters > .icon-btn { flex: 0 0 auto; }

    .dt-foot { padding: 12px 14px; }
    .dt-size { order: 1; flex: 1 1 100%; justify-content: space-between; }
    .dt-count { order: 2; flex: 1 1 100%; }
    .pager { order: 3; flex: 1 1 100%; justify-content: center; flex-wrap: wrap; }

    /* Stacked cards keep the striping so alternate records stay separable. */
    table.dt.stack-mobile tbody tr { background: var(--dt-row); }
    table.dt.stack-mobile tbody tr:nth-child(even) { background: var(--dt-row); }
    table.dt.stack-mobile tbody td { background: transparent; }
    table.dt.stack-mobile tbody td.num { font-size: var(--t-num); }

    /* Freezing is meaningless once rows are cards. */
    table.dt.has-freeze th.is-frozen,
    table.dt.has-freeze td.is-frozen,
    table.dt.has-freeze-right th.is-frozen-right,
    table.dt.has-freeze-right td.is-frozen-right {
        position: static; box-shadow: none;
    }

    /* Entry-screen inputs need a full-size tap target on a phone. */
    table.dt td input[type=number],
    table.dt td input[type=text],
    table.dt td input[data-numeric],
    table.dt td select { min-height: var(--tap); width: 100%; max-width: 180px; }
}

/* Tables that stay tabular on a phone (an item ledger, a running balance)
   still need the identifying column pinned while the figures scroll. */
@media (max-width: 860px) {
    table.dt.keep-freeze.has-freeze th.is-frozen,
    table.dt.keep-freeze.has-freeze td.is-frozen { position: sticky; }
    table.dt.keep-freeze.has-freeze th.is-freeze-edge,
    table.dt.keep-freeze.has-freeze td.is-freeze-edge { box-shadow: 6px 0 8px -6px var(--dt-freeze-line); }
}

@media (max-width: 560px) {
    .ws-head h2 { font-size: var(--t-xl); }
    .card-body { padding: 16px 14px; }
    .modal-body { padding: 16px 14px; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; }
    .dt-size select { min-width: 96px; }
}

/* ==========================================================================
   6. Print
   ========================================================================== */

@media print {
    :root {
        --dt-head-bg: #E4E4E4; --dt-head-text: #000; --dt-head-line: #666;
        --dt-row: #fff; --dt-row-alt: #F4F4F4; --dt-row-hover: #fff;
        --dt-foot-bg: #DCDCDC; --dt-foot-text: #000;
    }
    table.dt thead th,
    table.dt tfoot td,
    table.dt tbody tr:nth-child(even) {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    table.dt.has-freeze th.is-frozen,
    table.dt.has-freeze td.is-frozen,
    table.dt.has-freeze-right th.is-frozen-right,
    table.dt.has-freeze-right td.is-frozen-right { position: static; box-shadow: none; }
    .dt-size, .dt-toolbar { display: none !important; }
}