/* ============================================================================
   Direction C - the card language, scoped.
   ----------------------------------------------------------------------------
   Every rule below is under `.dc`, so this file can only change a screen that
   opted in by wrapping its content in that class. Removing the class from one
   page reverts that page; deleting this file reverts every page. Nothing here
   touches Bootstrap or Metronic globals, and nothing here touches any PDF
   template - those carry their own styles and are out of scope entirely.

   The palette is Direction C as presented and approved - action #3C5CCC and
   ok #2A7A56 are untouched. Three were darkened by one step, with the owner's
   agreement, after measuring them: muted #71809B read 3.99 against white, gap
   #B5741A read 3.83, and block #C24A3E read 4.16 on its own badge ground - all
   under the 4.5 WCAG asks of normal text, and gap is the colour an outstanding
   balance is set in. Same hues, one step down; nothing else about the direction
   changed. Every pairing now clears 4.5, checked against white, the canvas and
   each badge background.

   Layout is card-per-row, also as approved. Measured against production, the
   busiest operations day in two and a half years is 15 rows and the median is
   2, so the density this costs is a cost this business does not pay.

   Arabic note: no letter-spacing anywhere. It severs the joins that make an
   Arabic word legible. Labels get their weight from font-weight and colour.
   ============================================================================ */

.dc {
    --dc-canvas:   #F3F5F9;
    --dc-surface:  #FFFFFF;
    --dc-line:     #E7EBF3;
    --dc-ink:      #1B2233;
    /* Darkened from #71809B, which measured 3.99 against white - under the 4.5
       WCAG asks of normal text, and this is the colour every label on every
       screen is set in. Same grey, one step down. */
    --dc-muted:    #616E85;

    --dc-action:   #3C5CCC;
    --dc-action-s: #E7ECFC;
    --dc-ok:       #2A7A56;
    --dc-ok-s:     #E4F4EC;
    /* Darkened from #B5741A (3.83). This is the colour of an outstanding
       balance - the figure the booking page is built around - and it was the
       least legible of the six. The large figure on a card passed as "large
       text"; the same amber at 13px in a table cell did not. */
    --dc-gap:      #925F15;
    --dc-gap-s:    #FDF0DC;
    /* Darkened from #C24A3E. It cleared white and the canvas, but a badge sets
       this colour on its own soft ground (#FCEAE7) at 11.5px, and there it read
       4.16. Solved against the hardest of the three so one value covers every
       place it is used. */
    --dc-block:    #B7463A;
    --dc-block-s:  #FCEAE7;

    --dc-radius:   12px;
    --dc-shadow:   0 1px 2px rgba(27, 34, 51, .07);

    /* Set once at the root rather than chased down every place a number is
       printed. The booking page writes money inside sentences ("Company: 880.00
       SAR"), so a per-site class would have meant editing eight templates and
       missing the ninth. This is a font feature: it changes the width of digit
       glyphs and nothing else, so no text is affected except by lining up. */
    font-variant-numeric: tabular-nums;
}

/* Metronic ships a dark mode; derive the dark values rather than leave the
   cards glowing white on a dark page. */
[data-bs-theme="dark"] .dc {
    --dc-canvas:   #0F1421;
    --dc-surface:  #182030;
    --dc-line:     #26304A;
    --dc-ink:      #E4E9F2;
    --dc-muted:    #8E9BB5;

    --dc-action:   #7B93E8;
    --dc-action-s: #1E2740;
    --dc-ok:       #5FBE8C;
    --dc-ok-s:     #17301F;
    --dc-gap:      #DCA84A;
    --dc-gap-s:    #2E2413;
    --dc-block:    #E0796B;
    --dc-block-s:  #331A16;
}

/* ---------- day bar ---------------------------------------------------- */
.dc .dc-daybar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dc .dc-chip {
    font-size: 13px; padding: 7px 15px; border-radius: 999px;
    border: 1px solid var(--dc-line); background: var(--dc-surface);
    color: var(--dc-ink); text-decoration: none; white-space: nowrap;
    line-height: 1.4;
}
.dc .dc-chip:hover { border-color: var(--dc-action); color: var(--dc-action); }
.dc .dc-chip.is-on {
    background: var(--dc-action); border-color: var(--dc-action);
    color: #fff; font-weight: 600;
}
.dc .dc-chip.is-on:hover { color: #fff; }

/* ---------- the six counts -------------------------------------------- */
.dc .dc-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px; margin-bottom: 18px;
}
.dc .dc-kpi {
    background: var(--dc-surface); border-radius: var(--dc-radius);
    box-shadow: var(--dc-shadow); padding: 13px 10px; text-align: center;
}
.dc .dc-kpi b {
    display: block; font-size: 23px; line-height: 1.15; font-weight: 600;
    color: var(--dc-ink); font-variant-numeric: tabular-nums;
}
.dc .dc-kpi span { font-size: 11.5px; color: var(--dc-muted); }

/* ---------- needs attention ------------------------------------------- */
.dc .dc-alert {
    background: var(--dc-block-s); border-radius: var(--dc-radius);
    padding: 14px 16px; margin-bottom: 18px;
}
.dc .dc-alert-h {
    color: var(--dc-block); font-size: 12.5px; font-weight: 700; margin-bottom: 8px;
}
.dc .dc-alert-row {
    display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px;
    padding: 4px 0; color: var(--dc-ink); flex-wrap: wrap;
}
.dc .dc-alert-row a { color: var(--dc-block); font-weight: 600; }

/* ---------- lanes and card rows ---------------------------------------- */
.dc .dc-lane-h {
    font-size: 13px; font-weight: 700; color: var(--dc-muted);
    margin: 0 0 9px; padding-inline-start: 4px;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.dc .dc-lane-h em { font-style: normal; font-weight: 400; font-size: 12px; }
.dc .dc-lane { margin-bottom: 22px; }

/* One card per row - the approved shape. */
.dc .dc-row {
    background: var(--dc-surface); border-radius: var(--dc-radius);
    box-shadow: var(--dc-shadow); padding: 12px 14px; margin-bottom: 8px;
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    color: var(--dc-ink);
}
.dc .dc-row:last-child { margin-bottom: 0; }

.dc .dc-time {
    background: var(--dc-action-s); color: var(--dc-action); border-radius: 8px;
    padding: 6px 10px; font-weight: 700; font-size: 13.5px; white-space: nowrap;
    font-variant-numeric: tabular-nums; text-align: center; min-width: 62px;
}
.dc .dc-time small { display: block; font-size: 10.5px; font-weight: 600; opacity: .8; }
.dc .dc-time.is-unset { background: var(--dc-gap-s); color: var(--dc-gap); font-size: 12px; }

.dc .dc-main { flex: 1 1 210px; min-width: 0; }
.dc .dc-main b { font-weight: 600; }
.dc .dc-meta {
    display: flex; gap: 4px 14px; flex-wrap: wrap;
    color: var(--dc-muted); font-size: 12.5px; margin-top: 2px;
}
.dc .dc-meta span { white-space: nowrap; }
.dc .dc-meta .n { font-variant-numeric: tabular-nums; }

.dc .dc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dc .dc-tag {
    font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
    font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dc .dc-tag.t-ok    { background: var(--dc-ok-s);     color: var(--dc-ok); }
.dc .dc-tag.t-gap   { background: var(--dc-gap-s);    color: var(--dc-gap); }
.dc .dc-tag.t-block { background: var(--dc-block-s);  color: var(--dc-block); }
.dc .dc-tag.t-mut   { background: var(--dc-action-s); color: var(--dc-action); }

/* Empty state says what to do, not "no data". */
.dc .dc-empty {
    background: var(--dc-surface); border-radius: var(--dc-radius);
    box-shadow: var(--dc-shadow); padding: 20px 16px; text-align: center;
    color: var(--dc-muted); font-size: 13.5px;
}

/* ============================================================================
   Tables inside the card shell.

   A screen with hundreds of rows is not a card list - the reservations list
   carries 540 and the chart of accounts 264, and stacking those as cards would
   trade the whole point of a table (comparing a column down the page) for air.
   So the card gives the surface and the table gives the density. This is the
   boundary of where cards apply, not a change to what a card looks like.

   All of it rides on the markup already there: Metronic's .card wrapper and
   Yajra's rendered table. Nothing in the 1,511-line DataTable is touched.
   ============================================================================ */

.dc .card {
    background: var(--dc-surface);
    border: 0;
    border-radius: var(--dc-radius);
    box-shadow: var(--dc-shadow);
}
/* Bootstrap's shadow utilities carry !important, so `.dc .card` loses to a
   `class="card shadow-sm"` written on the page - and most screens write it.
   Left alone, the system ships two different shadows depending on which page
   you are on, which is exactly what "unfinished" looks like. `.shadow-lg` is
   deliberately not flattened: overlays and dropdowns sit on another plane and
   depth there means something. */
.dc .shadow-sm, .dc .shadow { box-shadow: var(--dc-shadow) !important; }

.dc .card-header { border-bottom: 1px solid var(--dc-line); min-height: unset; padding: 14px 18px; }
.dc .card-title { font-size: 15px; font-weight: 700; color: var(--dc-ink); margin: 0; }
.dc .card-body { padding: 0; }

.dc table.table { color: var(--dc-ink); margin: 0; }
.dc table.table > thead > tr > th {
    font-size: 11.5px; font-weight: 700; color: var(--dc-muted);
    text-transform: none; padding: 11px 14px;
    border-bottom: 1px solid var(--dc-line);
    /* The column name has to stay readable while the eye is 300 rows down. */
    position: sticky; top: 0; z-index: 2;
    background: var(--dc-surface);
}
.dc table.table > tbody > tr > td {
    padding: 10px 14px; border-bottom: 1px solid var(--dc-line);
    vertical-align: middle; font-size: 13px;
    /* Money and dates line up down the column instead of dancing. */
    font-variant-numeric: tabular-nums;
}
.dc table.table > tbody > tr:hover > td { background: var(--dc-canvas); }
.dc table.table > tbody > tr:last-child > td { border-bottom: 0; }
.dc .table-responsive { border-radius: 0 0 var(--dc-radius) var(--dc-radius); }

/* Bootstrap ships seven badge colours and the pages use them to mean "something".
   Inside the shell there are three meanings and one link, so they map onto those
   and nothing else can leak a colour without a meaning behind it. */
.dc .badge { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 4px 11px; }
.dc .badge-light-success, .dc .badge-success { background: var(--dc-ok-s) !important; color: var(--dc-ok) !important; }
.dc .badge-light-warning, .dc .badge-warning { background: var(--dc-gap-s) !important; color: var(--dc-gap) !important; }
.dc .badge-light-danger,  .dc .badge-danger  { background: var(--dc-block-s) !important; color: var(--dc-block) !important; }
.dc .badge-light-primary, .dc .badge-primary,
.dc .badge-light-info,    .dc .badge-info,
.dc .badge-light,         .dc .badge-secondary { background: var(--dc-action-s) !important; color: var(--dc-action) !important; }

.dc .dataTables_wrapper .dataTables_length,
.dc .dataTables_wrapper .dataTables_info,
.dc .dataTables_wrapper .dataTables_paginate { padding: 12px 16px; font-size: 13px; color: var(--dc-muted); }
.dc .page-link { border: 0; border-radius: 8px; color: var(--dc-ink); }
.dc .page-item.active .page-link { background: var(--dc-action); color: #fff; }

.dc .nav-line-tabs .nav-link { color: var(--dc-muted); font-size: 14px; border-bottom-width: 2px; }
.dc .nav-line-tabs .nav-link.active { color: var(--dc-action); border-bottom-color: var(--dc-action); }

.dc .btn-primary { background: var(--dc-action); border-color: var(--dc-action); }
.dc .form-control, .dc .form-select {
    border: 1px solid var(--dc-line); border-radius: 8px;
    background: var(--dc-surface); color: var(--dc-ink);
}

/* ============================================================================
   Figures - the numbers that carry a judgement.

   The rule this file follows: COLOUR MEANS A STATE, NOT A CATEGORY. A number is
   coloured only when its VALUE says something the reader should act on. Profit
   below zero is a problem; a balance still owed is a problem; everything else -
   what the booking is worth, what we owe the supplier, what has been paid - is
   a fact, and a fact in colour is noise that makes the two real signals harder
   to find. Four coloured numbers side by side say nothing; one says everything.

   What was here before is exactly the failure mode: all four numbers were the
   same grey and the colour sat on decorative dollar icons - red on the supplier
   total, amber on the client total, green on profit, blue on paid. None of it
   tracked a value, so none of it could be read.
   ============================================================================ */

.dc .dc-figures { display: flex; flex-wrap: wrap; gap: 8px; }
.dc .dc-figure {
    background: var(--dc-surface); border-radius: var(--dc-radius);
    box-shadow: var(--dc-shadow); padding: 11px 15px; min-width: 118px;
}
.dc .dc-figure b {
    display: block; font-size: 19px; font-weight: 600; line-height: 1.25;
    color: var(--dc-ink);
    /* Money read down a column has to line up, always. */
    font-variant-numeric: tabular-nums;
}
.dc .dc-figure span { font-size: 11.5px; color: var(--dc-muted); }

/* The three states a figure can be in. Applied from the value, never from
   which figure it is. */
.dc .dc-figure.is-ok    b { color: var(--dc-ok); }
.dc .dc-figure.is-gap   b { color: var(--dc-gap); }
.dc .dc-figure.is-block b { color: var(--dc-block); }

/* The one figure that names the next action gets weight as well as colour -
   an outstanding balance is the reason this page is open. */
.dc .dc-figure.is-lead { box-shadow: 0 0 0 1.5px currentColor, var(--dc-shadow); }
.dc .dc-figure.is-lead.is-gap   { color: var(--dc-gap); }
.dc .dc-figure.is-lead.is-ok    { color: var(--dc-ok); }
.dc .dc-figure.is-lead.is-block { color: var(--dc-block); }

/* A figure rendered by the <x-money> component. The state class comes from the
   VALUE, not from which figure it is, so the same three colours mean the same
   three things on every screen: green settled, amber outstanding, red wrong or
   negative. Ink is the default and stays the majority - 274 amounts are printed
   across these screens and most of them are facts. */
.dc .dc-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc .dc-num.is-ok    { color: var(--dc-ok); }
.dc .dc-num.is-gap   { color: var(--dc-gap); font-weight: 600; }
.dc .dc-num.is-block { color: var(--dc-block); font-weight: 600; }

/* Bootstrap's semantic text utilities, mapped onto the palette. The booking
   page already colours an overdue option date `text-danger` and a due-today one
   `text-warning` - correct logic, applied from the value, written long before
   this file existed. It needs the palette, not a rewrite. Mapping here also
   means no template on any converted screen can introduce a fifth red. */
.dc .text-danger  { color: var(--dc-block) !important; }
.dc .text-success { color: var(--dc-ok)    !important; }
.dc .text-warning { color: var(--dc-gap)   !important; }

/* ============================================================================
   The widgets that escape a wrapper.

   select2, SweetAlert2, toastr and daterangepicker all append their panel to
   <body>. While `.dc` sat on a div inside the body, none of them were reached:
   27 screens had a Direction C input sitting next to a Metronic dropdown, and
   every confirmation dialog in the system belonged to a different design. That
   is why `.dc` now lives on <body> itself - it is the only ancestor these
   elements actually have.
   ============================================================================ */

/* select2 replaces the <select> with its own markup, so `.dc .form-select`
   never applied to what the user actually sees. */
.dc .select2-container--bootstrap5 .select2-selection,
.dc .select2-selection {
    border: 1px solid var(--dc-line) !important;
    border-radius: 8px !important;
    background: var(--dc-surface) !important;
    color: var(--dc-ink) !important;
}
.dc .select2-container--focus .select2-selection,
.dc .select2-container--open .select2-selection { border-color: var(--dc-action) !important; }

.dc .select2-dropdown {
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
    box-shadow: 0 6px 24px rgba(27, 34, 51, .12);
    overflow: hidden;
}
.dc .select2-results__option { font-size: 13.5px; color: var(--dc-ink); }
.dc .select2-results__option--highlighted { background: var(--dc-action-s) !important; color: var(--dc-action) !important; }
.dc .select2-results__option[aria-selected="true"] { background: var(--dc-action) !important; color: #fff !important; }
.dc .select2-search__field {
    border: 1px solid var(--dc-line) !important;
    border-radius: 8px !important;
    background: var(--dc-surface) !important;
}
/* The chips of a multi-select read as tags, so they use the tag colour. */
.dc .select2-selection__choice {
    background: var(--dc-action-s) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--dc-action) !important;
    font-size: 12px;
}

/* Dialogs and toasts. A confirmation is the moment a booking gets cancelled -
   it should not look like it came from somewhere else. */
.dc .swal2-popup {
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
    color: var(--dc-ink);
}
.dc .swal2-title { color: var(--dc-ink); font-size: 19px; }
.dc .swal2-html-container { color: var(--dc-muted); font-size: 14px; }
.dc .swal2-input, .dc .swal2-textarea {
    border: 1px solid var(--dc-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--dc-ink);
}
.dc .swal2-confirm.btn-primary, .dc .swal2-styled.swal2-confirm {
    background: var(--dc-action) !important;
    border-radius: 8px;
}
.dc .swal2-styled.swal2-cancel {
    background: var(--dc-canvas) !important;
    color: var(--dc-ink) !important;
    border-radius: 8px;
}

.dc #toast-container > div {
    border-radius: var(--dc-radius);
    box-shadow: 0 6px 24px rgba(27, 34, 51, .16);
    opacity: 1;
}

.dc .daterangepicker {
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
    box-shadow: 0 6px 24px rgba(27, 34, 51, .12);
    font-variant-numeric: tabular-nums;
}
.dc .daterangepicker td.active,
.dc .daterangepicker td.active:hover { background: var(--dc-action); }
.dc .daterangepicker td.in-range { background: var(--dc-action-s); color: var(--dc-action); }
.dc .daterangepicker .drp-buttons .btn.btn-primary { background: var(--dc-action); border-color: var(--dc-action); }

/* ---------- touch density -----------------------------------------------
   Direction C's own strength, kept: on a phone the rep is standing on a kerb,
   so rows get taller and the tap target grows. Desktop is untouched.        */
@media (max-width: 767.98px) {
    .dc .dc-row  { padding: 15px 14px; gap: 10px; }
    .dc .dc-time { min-width: 68px; padding: 8px 11px; font-size: 14.5px; }
    .dc .dc-chip { padding: 9px 17px; font-size: 14px; }
    .dc .dc-kpi  { padding: 15px 10px; }

    /* A thumb is not a mouse pointer.
       Measured at 375px: `.btn-sm` renders 32px tall, and the chart of accounts
       alone puts 41 of them on one screen - every card's "View". inline-flex
       keeps the label centred once the box grows, which min-height alone does
       not do on an inline-block button.
       Below the tablet breakpoint only: desktop density is deliberate and stays.

       `.btn-icon` is excluded. Those are almost all in the header strip, which a
       previous session measured tight enough that one 250px search box pushed
       every page 92px sideways. Growing them would walk that back. */
    .dc .btn-sm:not(.btn-icon) {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The empty lane's only action is a bare <a>, not a .btn, so it never picked
       up the rule above. Measured at 375px before this: 17px tall in both
       languages - a tap target a third the size of every button beside it, on
       the one control the card exists to offer. Same 40px and the same
       inline-flex, for the same reason. */
    .dc .dc-empty a {
        min-height: 40px;
        padding: 0 14px;
        margin-top: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Rows are read and tapped on a phone, not scanned in a column, so they get
       the height back that desktop density takes away. */
    .dc table.table > tbody > tr > td { padding: 13px 14px; }
    .dc .dc-figure { flex: 1 1 calc(50% - 4px); }
}

/* ============================================================================
   Density, and rows that stay rows.
   ============================================================================ */

/* The whole interface, one step smaller.
   `zoom` on the ROOT element (not on body) is what keeps this safe: it scales
   the viewport coordinate system too, so the fixed sidebar and the modals still
   measure themselves against the same box they always did. Zooming `body`
   instead leaves fixed children sizing against the unscaled viewport, which is
   how this trick usually breaks a layout.
   Scoped through :has() so it stays true that removing the `dc` class from
   <body> reverts the page - the rest of this file could not reach <html>. */
html:has(body.dc) { zoom: 0.9; }

/* A row of buttons that spans the row.
   grid-auto-flow:column with 1fr tracks divides the width between however many
   buttons actually rendered, so a row does not re-shape when a permission or a
   booking state removes one of them - which is exactly what made these rows
   look different on every booking. */
.dc .dc-btn-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}
.dc .dc-btn-row > .btn,
.dc .dc-btn-row > form > .btn { width: 100%; }
/* A form wrapper would otherwise become the grid item and collapse to content
   width, taking its button with it. */
.dc .dc-btn-row > form { display: block; }

/* Long labels are the reason a button row wraps into an uneven mess. Let them
   shrink instead, and keep the label on one line. */
.dc .dc-btn-row > .btn,
.dc .dc-btn-row > form > .btn {
    white-space: nowrap;
    min-width: 0;
    padding-inline: 8px;
}

/* Per-item actions (Confirm / Cancel / Check In) use the same rule, so the
   three of them fill their row and keep their width when one is hidden. */
.dc .action-buttons {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}
.dc .action-buttons > .btn { width: 100%; min-width: 0; white-space: nowrap; padding-inline: 8px; }

/* Figures read two to a line: totals on one, settlement on the next. Pairing
   them is the point - a total means little without the total it is measured
   against. */
.dc .dc-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dc .dc-figure { min-width: 0; }
/* Profit is alone on its line, so it takes the line. */
.dc .dc-figures > .dc-figure.dc-figure-wide { grid-column: 1 / -1; }

/* A dropdown is a grid item like any other in a button row: without this the
   wrapper collapses to content width and takes its button with it. */
.dc .dc-btn-row > .dropdown { display: block; min-width: 0; }
.dc .dc-btn-row > .dropdown > .btn { width: 100%; white-space: nowrap; padding-inline: 8px; }
/* The menu is wider than its trigger here - it carries amounts, not just verbs. */
.dc .dc-btn-row > .dropdown > .dropdown-menu { min-width: 100%; }
.dc .dc-btn-row .dropdown-item { white-space: normal; }

/* ---------------------------------------------------------------------------
   Phone widths.
   "Each row spans the row with its buttons in equal columns" is a desktop
   instruction - it means fill the width. At 375px the row is ~300px, so three
   equal columns leave 96px for a label needing 108, and the button clips the
   words rather than shrinking them: measured, Add Payment needed 181px in a
   163px box. One button per row keeps the same intent and keeps the label.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .dc .dc-btn-row {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
    }

    /* With a full row to sit in there is room to wrap, so a long label breaks
       instead of being cut. nowrap is what made the clipping silent. */
    .dc .dc-btn-row > .btn,
    .dc .dc-btn-row > form > .btn,
    .dc .dc-btn-row > .dropdown > .btn,
    .dc .action-buttons > .btn {
        white-space: normal;
    }

    /* Confirm / Cancel / Check In stay side by side - they are short verbs and
       reading them as one line of choices is the point. */
    .dc .action-buttons { grid-auto-columns: minmax(0, 1fr); }
}

/* A cancelled sale and its reversal both appear in the VAT ledgers so the
   totals net out to what the VAT return reports. The badge beside the
   reference is what names them; this only softens the row so the eye can skip
   the pair. Colour never carries the meaning on its own - it does not survive
   the Excel export at all. */
.dc .dc-ledger-void > td {
    color: var(--dc-block, #C24A3E);
    background: color-mix(in srgb, var(--dc-block, #C24A3E) 4%, transparent);
}

.dc .dc-ledger-void > td a {
    color: inherit;
}