/* JewelDesk — 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;
    color: #7A6A52;
    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. */
.jd-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    align-items: center;
    font-size: .78rem;
    color: var(--jd-muted);
    border-top: 1px dashed var(--jd-gold-line);
    margin-top: .5rem;
    padding-top: .75rem;
}

.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.45rem; }
    .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; }

.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;
}

.jd-combo-list {
    position: absolute;
    z-index: 1060;
    top: 100%;
    left: 0;
    right: 0;
    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;
    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; }