/* JewelGST — Maroon + Gold theme.
   Single source of truth for brand colour; app chrome and the public page both read these. */
:root {
    --jd-maroon: #7B1E3B;
    --jd-maroon-dark: #5E152C;
    --jd-maroon-deep: #601630;
    --jd-gold: #C9A227;
    --jd-gold-soft: #F5E2A8;
    --jd-gold-line: #EFE2CF;
    --jd-ivory: #FFFDF8;
    --jd-surface: #FFFFFF;
    --jd-text: #2B2B2B;
    --jd-muted: #6E6259;
    --jd-success: #1E7A4B;
    --jd-danger: #A81B1B;

    --bs-primary: #7B1E3B;
    --bs-link-color: #7B1E3B;
    --bs-link-hover-color: #601630;
}

body {
    background: var(--jd-ivory);
    color: var(--jd-text);
}

/* ---------- Buttons ---------- */
.btn-primary {
    --bs-btn-bg: var(--jd-maroon);
    --bs-btn-border-color: var(--jd-maroon);
    --bs-btn-hover-bg: var(--jd-maroon-deep);
    --bs-btn-hover-border-color: var(--jd-maroon-deep);
    --bs-btn-active-bg: var(--jd-maroon-deep);
    --bs-btn-active-border-color: var(--jd-maroon-deep);
    --bs-btn-color: #F5E2A8;
    --bs-btn-hover-color: #F5E2A8;
    --bs-btn-active-color: #F5E2A8;
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--jd-maroon);
    --bs-btn-border-color: var(--jd-maroon);
    --bs-btn-hover-bg: var(--jd-maroon);
    --bs-btn-hover-border-color: var(--jd-maroon);
    --bs-btn-hover-color: #F5E2A8;
}

.btn-gold {
    background: var(--jd-gold);
    border: 1px solid var(--jd-gold);
    color: #3F3208;
    font-weight: 700;
}

.btn-gold:hover {
    background: #B08D1E;
    border-color: #B08D1E;
    color: #3F3208;
}

a {
    color: var(--jd-maroon);
}

/* ---------- App navbar ---------- */
.jd-navbar {
    background: var(--jd-maroon);
    box-shadow: 0 1px 0 rgba(201, 162, 39, .45);
}

.jd-navbar .navbar-brand,
.jd-navbar .nav-link {
    color: #F7E9D0 !important;
}

.jd-navbar .nav-link:hover,
.jd-navbar .nav-link.active {
    color: #FFFFFF !important;
}

.jd-navbar .btn-link {
    color: #F7E9D0 !important;
    text-decoration: none;
}

/* ---------- Shared surfaces ---------- */
.jd-card {
    background: var(--jd-surface);
    border: 1px solid var(--jd-gold-line);
    border-radius: .7rem;
    box-shadow: 0 1px 2px rgba(123, 30, 59, .05);
}

.jd-pill {
    display: inline-block;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    padding: .3rem .85rem;
    border-radius: 999px;
    background: #FFFFFF;
    color: #8A5B2A;
    border: 1px solid var(--jd-gold-line);
}

.jd-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--jd-gold), transparent);
    border: 0;
    opacity: .7;
}

.text-gold { color: var(--jd-gold); }
.text-maroon { color: var(--jd-maroon); }
.bg-ivory { background: var(--jd-ivory); }

footer.footer {
    background: var(--jd-maroon);
    color: #E9D8C4;
    border-top: 2px solid var(--jd-gold);
}

footer.footer a { color: var(--jd-gold-soft); }

/* ---------- Icon action buttons in tables ---------- */
.jd-actions {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
    justify-content: flex-end;
}

/* Square icon-only button. A visible label is still carried in title/aria-label
   so the action stays readable to screen readers and on hover. */
.jd-act {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
    line-height: 1;
    flex: 0 0 auto;
}

.jd-act .jd-ico { display: block; }

.jd-act-view { color: var(--jd-muted); border: 1px solid var(--jd-gold-line); background: #fff; }
.jd-act-view:hover { color: var(--jd-maroon); border-color: var(--jd-maroon); }

.jd-act-edit { color: var(--jd-maroon); border: 1px solid var(--jd-gold-line); background: #fff; }
.jd-act-edit:hover { color: #fff; background: var(--jd-maroon); border-color: var(--jd-maroon); }

.jd-act-muted { color: #8A7A62; border: 1px solid var(--jd-gold-line); background: #fff; }
.jd-act-muted:hover { color: #3F3208; background: var(--jd-gold-soft); border-color: var(--jd-gold); }

.jd-act-danger { color: var(--jd-danger); border: 1px solid #EED9D9; background: #fff; }
.jd-act-danger:hover { color: #fff; background: var(--jd-danger); border-color: var(--jd-danger); }

.jd-act-success { color: var(--jd-success); border: 1px solid #D6E8DE; background: #fff; }
.jd-act-success:hover { color: #fff; background: var(--jd-success); border-color: var(--jd-success); }

/* Forms wrapping a single icon button must not add layout of their own. */
.jd-actions form { display: inline-flex; margin: 0; }

/* ---------- Data tables ---------- */
.jd-table-card {
    background: var(--jd-surface);
    border: 1px solid var(--jd-gold-line);
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(123, 30, 59, .05);
}

.jd-table {
    margin: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.jd-table thead th {
    background: #FBF6EC;

    /*  Black, not the old muted brown. At .7rem, uppercase and letter-spaced,
        a low-contrast heading is the hardest text on the screen to read - and
        on the billing grid it is the label that says which box you are typing
        into. The app's own text colour rather than pure #000, so the headings
        sit at the same weight of black as everything else. */
    color: var(--jd-text);
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 700;
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--jd-gold-line);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.jd-table tbody td {
    padding: .7rem .85rem;
    border-bottom: 1px solid #F2ECE0;
    vertical-align: middle;
}

.jd-table tbody tr:last-child td { border-bottom: 0; }

.jd-table tbody tr {
    transition: background .12s ease;
}

.jd-table tbody tr:hover { background: #FDFAF3; }

.jd-table tbody tr.is-inactive { opacity: .55; }

.jd-table tfoot td {
    padding: .7rem .85rem;
    background: #FBF6EC;
    border-top: 2px solid var(--jd-gold);
    font-weight: 700;
}

/* Figures line up column-wise. */
.jd-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.jd-primary-cell { font-weight: 600; color: var(--jd-text); }
.jd-sub-cell { font-size: .8rem; color: var(--jd-muted); }

.jd-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    background: #FBF6EC;
    border: 1px solid var(--jd-gold-line);
    border-radius: .3rem;
    padding: .05rem .35rem;
    color: #7A6A52;
}

/* ---------- Status pills ---------- */
.jd-pill-state {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    font-weight: 700;
    padding: .18rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.jd-pill-state::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.jd-pill-on { background: #E7F3EC; color: #1E7A4B; }
.jd-pill-off { background: #F0EDE8; color: #857A6B; }
.jd-pill-warn { background: #FDF3DC; color: #8A6B12; }
.jd-pill-bad { background: #FBE9E9; color: #A81B1B; }

/* ---------- Empty state ---------- */
.jd-empty { text-align: center; padding: 2.75rem 1rem; color: var(--jd-muted); }
.jd-empty-mark { font-size: 1.9rem; opacity: .45; display: block; margin-bottom: .4rem; }

/* ---------- Filter bar ---------- */
.jd-filter {
    background: var(--jd-surface);
    border: 1px solid var(--jd-gold-line);
    border-radius: .7rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
}

.jd-filter .form-label {
    font-size: .7rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--jd-muted);
    font-weight: 600;
    margin-bottom: .2rem;
}

/* ---------- Forms ---------- */
.form-control:focus, .form-select:focus {
    border-color: var(--jd-gold);
    box-shadow: 0 0 0 .2rem rgba(201, 162, 39, .18);
}

.form-check-input:checked {
    background-color: var(--jd-maroon);
    border-color: var(--jd-maroon);
}

/* ---------- Keyboard-first affordances ---------- */
/* The focused field must be unmistakable when driving by Enter alone. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--jd-gold);
    box-shadow: 0 0 0 .2rem rgba(201, 162, 39, .3);
    background-color: #FFFDF5;
}

.jd-act:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--jd-gold);
    outline-offset: 2px;
    box-shadow: none;
}

/* Shortcut hint strip under a data-entry form. */
/*  ON THE SAME LINE AS THE SAVE BUTTON.

    This legend sits under the buttons on forty-eight screens, and as a block
    with a rule above it, it cost every one of them a second row plus a
    separator to say something that never changes. Inline-flex puts it beside
    the buttons, where there is already empty space to the right, and the rule
    goes with it - the buttons are the boundary now.

    It still wraps below them on a narrow screen, because wrapping is what
    flex-wrap on the parent does when the row runs out. */
.jd-keys {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    align-items: center;
    font-size: .78rem;
    color: var(--jd-muted);
    margin-left: 1.25rem;
    vertical-align: middle;
}

.jd-keys span { display: inline-flex; align-items: center; gap: .35rem; }

kbd.jd-kbd {
    background: #fff;
    border: 1px solid #D9CDB6;
    border-bottom-width: 2px;
    border-radius: .3rem;
    padding: .05rem .4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    color: var(--jd-maroon);
    box-shadow: none;
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
    /* Wide tables scroll horizontally with the identifying column pinned,
       so you never lose track of which row you are reading. */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }

    .jd-table thead th:first-child,
    .jd-table tbody td:first-child {
        position: sticky;
        left: 0;
        background: #fff;
        z-index: 1;
        box-shadow: 1px 0 0 var(--jd-gold-line);
        max-width: 46vw;
    }

    .jd-table thead th:first-child { background: #FBF6EC; z-index: 3; }
    .jd-table tbody tr:hover td:first-child { background: #FDFAF3; }

    .jd-table thead th,
    .jd-table tbody td { padding: .6rem .65rem; }

    /* Fingers need a bigger target than a mouse. */
    .jd-act { width: 38px; height: 38px; }
    .jd-actions { gap: .35rem; }

    /* Filters and toolbars stack rather than squeeze. */
    .jd-filter .row > [class^="col-"],
    .jd-filter .row > [class*=" col-"] { width: 100%; }
    .jd-filter .form-control,
    .jd-filter .form-select { width: 100%; }

    .jd-keys { gap: .6rem; font-size: .72rem; }

    /* Cards and forms get their space back. */
    .jd-card, .jd-table-card { border-radius: .6rem; }
    .jd-content { padding: 1rem .85rem 2.5rem; }
}

/* Never let a stray wide element scroll the whole page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 575.98px) {
    .jd-kpi-value { font-size: 1.1rem; }
    .jd-topbar-title { display: none; }
    .jd-user-name { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .modal-sm { margin: .5rem; }
}
}
/* ---- derived billing columns -------------------------------------------
   A column the operator does not own in the current entry mode. Read-only
   rather than merely ignored: a figure that can be typed and is then
   overwritten on save looks accepted when it was not.                     */
.jd-derived {
    background: var(--jd-derived-bg, #f4f1ea);
    color: var(--jd-derived-fg, #6b6257);
    font-style: italic;
    cursor: not-allowed;
}

.jd-derived:focus { box-shadow: none; }

/* The basis a rate is quoted on, under the rate box. */
.jd-rate-basis {
    font-size: .68rem;
    line-height: 1.2;
    margin-top: .1rem;
    color: var(--jd-muted, #6b6257);
    white-space: nowrap;
}

/* Second line of a column heading, for a qualifier the heading needs but
   should not shout. */
.jd-th-sub {
    display: block;
    font-size: .66rem;
    font-weight: 400;
    text-transform: none;
    opacity: .75;
}

/* ---- searchable dropdown ------------------------------------------------
   A viewer over a native <select>, which stays the form field. See combo.js. */
.jd-combo { position: relative; flex: 1 1 auto; min-width: 0; }

/*  IT STILL HAS TO LOOK LIKE A DROPDOWN.

    The searchable box is a text input standing in for a <select>, and a text
    input with nothing on its right edge reads as somewhere to type free text -
    so people typed into it and wondered why it argued, instead of seeing a list
    they could pick from. The caret is the whole of what says "this is a
    dropdown", so it is drawn back on, in the same place and the same grey the
    browser's own select uses.

    Bootstrap's exact form-select chevron, so a combo and a plain select sitting
    next to each other on the same row are indistinguishable until you type. */
.jd-combo-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    cursor: pointer;
}

/* Typing is what the box is for once it is open, so the pointer goes back. */
.jd-combo-input:focus { cursor: text; }

.jd-combo-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/*  THE LIST IS AS WIDE AS THE NAMES, NOT AS WIDE AS THE BOX.

    Stretching it to the box (left:0 AND right:0) was fine while every combo sat
    in a roomy form field. In the billing grid the Item column is about a
    hundred pixels, so the list inherited that and "Gold Chain 22K (GLD-CHN)"
    arrived cut in half - which defeats the point of a picker, because the whole
    job is telling two similar names apart.

    min-width pins it to at least the box, width:max-content lets it grow to the
    longest name, and max-width stops one badly named item throwing it across
    the screen. */
.jd-combo-list {
    position: absolute;
    z-index: 1060;
    top: 100%;
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 22rem;
    max-height: 16rem;
    overflow-y: auto;
    margin-top: .15rem;
    padding: .2rem;
    border: 1px solid var(--jd-border, #d9d0c4);
    border-radius: .45rem;
    background: var(--jd-surface, #fff);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
}

.jd-combo-item {
    display: block;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 0;
    background: transparent;
    border-radius: .3rem;
    padding: .3rem .5rem;
    font-size: .88rem;
    cursor: pointer;
}

.jd-combo-item:hover,
.jd-combo-item.is-active { background: var(--jd-chip, #efe8dc); }

.jd-combo-none {
    padding: .35rem .5rem;
    font-size: .82rem;
    color: var(--jd-muted, #6b6257);
}

/* "Not on file yet". Coloured as an action rather than greyed like the dead
   "No match" it replaces, because it is the one row on an empty list that can
   actually be pressed. */
.jd-combo-add {
    color: var(--jd-maroon, #7B1E3B);
    font-weight: 600;
}

/* ---- line grid: the remove-row button -----------------------------------
   The action column is the narrowest in the grid and the button is a fixed
   30px square, so its cell needs to stop adding padding around it - otherwise
   the button sits wider than the column and pushes out of the table.        */
.jd-table td:last-child .jd-act,
.jd-table th:last-child { text-align: center; }

.jd-table td:last-child {
    padding-left: .2rem;
    padding-right: .2rem;
    text-align: center;
    white-space: nowrap;
}

.jd-table .line-remove {
    width: 26px;
    height: 26px;
    font-size: 1rem;
}

/* ---- list tables --------------------------------------------------------
   The action column is a fixed set of icon buttons, so it gets a fixed width
   and never competes with the figures for room. */
.jd-actions-col {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.jd-nowrap { white-space: nowrap; }

/* ---------- Number boxes carry no spinner ----------
 *
 * Every numeric field in this product is a weight, a rate or an amount, and not
 * one of them is usefully changed by one. A jeweller types 12.3450; nobody
 * arrives at it by clicking an arrow 12,345 times.
 *
 * What they cost: they eat the right-hand end of a narrow box in the line grid,
 * which is exactly where a right-aligned figure ends, and they are a mouse
 * target on a screen driven by Enter from one field to the next.
 *
 * (The scroll wheel can still change a focused number field - that is the
 * browser, not these buttons, and would need a script to stop.)
 *
 * The field stays type="number": the numeric keypad on a phone, the step
 * attribute and browser validation all come from it. Only the buttons go.
 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ---------- The billing grid is tighter than a reading table ----------
 *
 * Fifteen columns have to fit a laptop without sideways scrolling. A line you
 * have to scroll right to finish is a line that gets finished wrong - the
 * amount is off screen while the rate is being typed - and the operator's hands
 * are on the keyboard, so the scrollbar is the worst place to put anything.
 *
 * The reading tables keep their roomy cells. This is the one grid that is typed
 * into rather than read, and its cells hold an input that draws its own border,
 * so the padding around them was drawing a second gap inside the first.
 */
#lineGrid thead th {
    padding: .35rem .3rem;
    font-size: .64rem;
    letter-spacing: .03em;
}

#lineGrid tbody td { padding: .2rem .25rem; }
#lineGrid tfoot td { padding: .4rem .3rem; }

#lineGrid .form-control,
#lineGrid .form-select,
#lineGrid .jd-combo-input {
    padding: .2rem .35rem;
    font-size: .82rem;
}

/* The caret shrinks with the box, or it eats the figure beside it. */
#lineGrid .jd-combo-input {
    padding-right: 1.25rem;
    background-position: right .3rem center;
    background-size: 11px 8px;
}