/*
 * Hand-written overrides that sit on top of the compiled Tailwind CSS.
 * Mostly: theme the third-party widgets (DataTables, Tom Select, Flatpickr,
 * SweetAlert2) so they follow the Forest & stone tokens (see
 * assets/css/tailwind.src.css for the --c-* custom properties), plus print rules.
 */

/* ---- DataTables ---------------------------------------------------- */
.dt-container { width: 100%; }
.dt-container .dt-search { margin-bottom: .75rem; }
/* High-specificity selectors (matching DataTables' own `div.dt-container …`)
   so these win over the bundled stylesheet AND the Tailwind forms plugin. */
div.dt-container div.dt-search input[type="search"] {
    border: 1px solid rgb(var(--c-border-strong));
    border-radius: 8px;
    padding-top: .45rem;
    padding-bottom: .45rem;
    padding-right: .75rem;
    padding-left: 2.1rem !important;   /* room for the search icon */
    font-size: .875rem;
    color: rgb(var(--c-ink));
    background-color: rgb(var(--c-surface));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%239AA39D'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left .6rem center;
    background-size: 1rem;
    min-width: 220px;
    margin-left: 0;
}
div.dt-container div.dt-search input[type="search"]::placeholder { color: rgb(var(--c-ink-hair)); }
div.dt-container div.dt-search input[type="search"]:focus {
    outline: none;
    border-color: rgb(var(--c-brand));
    box-shadow: 0 0 0 2px rgb(var(--c-focus-gap)), 0 0 0 4px rgb(var(--c-brand));
}
div.dt-container div.dt-length select {
    border: 1px solid rgb(var(--c-border-strong));
    border-radius: 8px;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-left: .7rem !important;
    padding-right: 2.25rem !important;  /* room for the dropdown arrow */
    font-size: .8rem;
    min-width: 4.75rem;
    line-height: 1.2;
    color: rgb(var(--c-ink));
    background-color: rgb(var(--c-surface));
}
div.dt-container div.dt-length select:focus {
    outline: none;
    border-color: rgb(var(--c-brand));
    box-shadow: 0 0 0 2px rgb(var(--c-focus-gap)), 0 0 0 4px rgb(var(--c-brand));
}
div.dt-container div.dt-length label, div.dt-container div.dt-search label { color: rgb(var(--c-ink-muted)); font-size: .8rem; }
table.dataTable { width: 100% !important; border-collapse: collapse; }
table.dataTable thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgb(var(--c-ink-muted));
    background: rgb(var(--c-surface-muted));
    border-bottom: 1px solid rgb(var(--c-border));
    padding: .6rem .85rem;
    white-space: nowrap;
}
table.dataTable tbody td {
    padding: .7rem .85rem;
    border-bottom: 1px solid rgb(var(--c-border-soft));
    font-size: .875rem;
    color: rgb(var(--c-ink));
    vertical-align: middle;
}
table.dataTable tbody tr:hover { background: rgb(var(--c-surface-muted)); }
table.dataTable.dataTable th.dt-orderable-asc:hover,
table.dataTable.dataTable th.dt-orderable-desc:hover { color: rgb(var(--c-ink)); }
/* DataTables ships `div.dt-container div.dt-paging button.dt-paging-button`
   (0,3,3), which outranks a class-only selector even with !important — the
   `color` on these rules was silently losing while `background` won, so the
   current-page chip rendered ink-on-brand at 3.26:1. Element names are in the
   selectors deliberately, to sit above the vendor rule. */
div.dt-container div.dt-paging button.dt-paging-button {
    border-radius: 8px !important;
    padding: .3rem .7rem !important;
    margin: 0 .1rem;
    font-size: .82rem;
    border: 1px solid transparent !important;
    color: rgb(var(--c-ink-muted)) !important;
    background: transparent !important;
}
div.dt-container div.dt-paging button.dt-paging-button.current {
    background: rgb(var(--c-brand)) !important;
    color: #fff !important;           /* 4.98:1 on brand — matches .btn-primary */
    border-color: rgb(var(--c-brand)) !important;
}
div.dt-container div.dt-paging button.dt-paging-button:hover:not(.current):not(.disabled) {
    background: rgb(var(--c-surface-sunken)) !important;
    color: rgb(var(--c-ink)) !important;
}
div.dt-container div.dt-paging button.dt-paging-button.disabled { color: rgb(var(--c-ink-hair)) !important; }
.dt-container .dt-info { font-size: .8rem; color: rgb(var(--c-ink-muted)); padding-top: .75rem; }
.dt-container .dt-layout-row { margin: 0; align-items: center; }
/* Responsive child rows */
table.dataTable > tbody > tr > td.dtr-control:before {
    background-color: rgb(var(--c-brand)) !important;
    border: none !important;
    box-shadow: none !important;
}
table.dataTable td.dtr-control { cursor: pointer; }
.dtr-details { width: 100%; }
.dtr-details li { padding: .35rem 0 !important; border-bottom: 1px solid rgb(var(--c-border-soft)) !important; }
.dtr-title { min-width: 110px; color: rgb(var(--c-ink-muted)); font-weight: 600; }

/* ---- Tom Select ---------------------------------------------------- */
/* tom-select 2.3.1 sizes the control's right padding with
     padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important
   and ships `--ts-pr-clear-button: 0; --ts-pr-caret: 0` — UNITLESS zeros. Adding a
   unitless number to a length makes the whole max() invalid at computed-value
   time, so padding-right fell back to 0 and the value text sat on the border.
   Giving the two zeros units repairs the formula; --ts-pr-min then carries the
   same 2.25rem the .select caret needs. Set on :root (not .ts-wrapper) so the
   clear_button plugin can still raise --ts-pr-clear-button on its own wrapper. */
:root { --ts-pr-clear-button: 0px; --ts-pr-caret: 0px; --ts-pr-min: 2.25rem; }

/* Tom Select copies the original <select class="select"> class list onto its
   wrapper, so .select's own padding/border/caret would nest a second box around
   the .ts-control box (the filter on /supplies measured 70px tall). The wrapper
   is only a positioning shell here — the control is the visible field. */
.ts-wrapper.select {
    padding: 0;
    border: 0;
    background-image: none;
    box-shadow: none;
}

/* Matched to .select in tailwind.src.css: same 38px box, same right padding and
   the same caret glyph, so a Tom Select control and a native <select class="select">
   on the one form are indistinguishable. Without this the value text ran flush
   against the right border and the control had no chevron at all. */
.ts-wrapper .ts-control {
    border: 1px solid rgb(var(--c-border-strong));
    border-radius: 8px;
    padding: .5rem 2.25rem .5rem .75rem;
    font-size: .875rem;
    min-height: 38px;
    background-color: rgb(var(--c-surface));
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%235F6A64' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    color: rgb(var(--c-ink));
    box-shadow: none;
}
/* A multi-select grows with its items; the caret stays pinned to the first row. */
.ts-wrapper.multi .ts-control { background-position: right .5rem 0.6875rem; }
/* tom-select.min.css draws its own ::after triangle on a single select; ours is
   the .select chevron, so the stock one is suppressed rather than stacked. */
.ts-wrapper.single .ts-control:after { display: none !important; }
.ts-wrapper.focus .ts-control {
    border-color: rgb(var(--c-brand));
    box-shadow: 0 0 0 2px rgb(var(--c-focus-gap)), 0 0 0 4px rgb(var(--c-brand));
}
.ts-wrapper .ts-control input::placeholder { color: rgb(var(--c-ink-hair)); }
.ts-dropdown {
    border: 1px solid rgb(var(--c-border));
    border-radius: 10px;
    background: rgb(var(--c-surface));
    color: rgb(var(--c-ink));
    box-shadow: 0 24px 64px -16px rgba(23,35,28,.30), 0 0 0 1px rgba(23,35,28,.05);
    font-size: .875rem;
}
.ts-dropdown .active { background: rgb(var(--c-brand-soft)); color: rgb(var(--c-brand-ink)); }
.ts-dropdown .optgroup-header { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgb(var(--c-ink-muted)); }

/* ---- Flatpickr ----------------------------------------------------- */
.flatpickr-calendar { font-family: 'Inter', system-ui, sans-serif; border-radius: 10px; box-shadow: 0 24px 64px -16px rgba(23,35,28,.30), 0 0 0 1px rgba(23,35,28,.05); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange { background: rgb(var(--c-brand)); border-color: rgb(var(--c-brand)); color: #fff; }
.flatpickr-day.today { border-color: rgb(var(--c-brand)); }
.flatpickr-day.today:hover { background: rgb(var(--c-brand-soft)); color: rgb(var(--c-brand-ink)); border-color: rgb(var(--c-brand-ring)); }
.flatpickr-day:hover { background: rgb(var(--c-surface-sunken)); border-color: rgb(var(--c-surface-sunken)); }

/* ---- SweetAlert2 --------------------------------------------------- */
.swal2-popup { font-family: 'Inter', system-ui, sans-serif; border-radius: 20px; color: rgb(var(--c-ink)); background: rgb(var(--c-surface)); box-shadow: 0 24px 64px -16px rgba(23,35,28,.30), 0 0 0 1px rgba(23,35,28,.05); }
.swal2-title { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; font-size: 18px; letter-spacing: -0.01em; color: rgb(var(--c-ink)); }
.swal2-html-container { color: rgb(var(--c-ink-muted)); font-size: 14px; }
.swal2-styled { border-radius: 8px !important; font-weight: 600; font-size: 13px; padding: .6rem 1rem; }
.swal2-styled.swal2-confirm:focus, .swal2-styled.swal2-cancel:focus { box-shadow: 0 0 0 2px rgb(var(--c-focus-gap)), 0 0 0 4px rgb(var(--c-brand)); }
.swal2-container.swal2-backdrop-show { background: rgba(9, 26, 17, .5); }
div:where(.swal2-container) .swal2-toast { border-radius: 10px; background: rgb(var(--c-forest)); color: #fff; box-shadow: 0 24px 64px -16px rgba(23,35,28,.30); }
div:where(.swal2-container) .swal2-toast .swal2-title { color: #fff; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; }
div:where(.swal2-container) .swal2-toast .swal2-timer-progress-bar { background: rgba(255,255,255,.35); }
.swal2-icon.swal2-success { border-color: rgb(var(--c-brand-leaf)); color: rgb(var(--c-brand-leaf)); }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: rgb(var(--c-brand-leaf)); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(63,191,99,.35); }
.swal2-icon.swal2-error { border-color: rgb(var(--c-danger)); color: rgb(var(--c-danger)); }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: rgb(var(--c-danger)); }
.swal2-icon.swal2-warning { border-color: rgb(var(--c-warning)); color: rgb(var(--c-warning)); }
.swal2-icon.swal2-info { border-color: rgb(var(--c-info)); color: rgb(var(--c-info)); }
.swal2-input, .swal2-textarea { border: 1px solid rgb(var(--c-border-strong)) !important; border-radius: 8px !important; font-size: 14px !important; box-shadow: none !important; background: rgb(var(--c-surface)); color: rgb(var(--c-ink)); }
.swal2-input:focus, .swal2-textarea:focus { border-color: rgb(var(--c-brand)) !important; box-shadow: 0 0 0 2px rgb(var(--c-focus-gap)), 0 0 0 4px rgb(var(--c-brand)) !important; }

/* ---- Misc ---------------------------------------------------------- */
.checkin-photo-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
[x-cloak] { display: none !important; }

/* ---- Print (QR sheets, reports) ----------------------------------- */
@media print {
    aside, header, .no-print, .swal2-container { display: none !important; }
    body { background: #fff; }
    main { padding: 0 !important; max-width: none !important; }
    .qr-card { page-break-inside: avoid; }
}