/* Back-office theme corrections, loaded on every admin page via UNFOLD["STYLES"].
 *
 * Hand-written CSS on purpose: the Tailwind build (static/src/input.css → app.css) only
 * scans templates/ for the front site, and the admin is styled by Unfold's own compiled
 * stylesheet. Colours come from the CSS variables Unfold publishes from UNFOLD["COLORS"],
 * so this file never hard-codes a brand colour.
 */

/* --- Changelist: where do I tap to open the record? ---------------------------------
 * Unfold renders the link to a record in the same colour and weight as the plain text
 * beside it. On a phone every row collapses into a card, and that link is the only
 * tappable thing on it — with nothing to say so. Give changelist links the same
 * treatment links get everywhere else in the app (primary + underline).
 */
#result_list tbody a {
    color: var(--color-primary-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#result_list tbody a:hover {
    color: var(--color-primary-700);
}

.dark #result_list tbody a {
    color: var(--color-primary-400);
}

.dark #result_list tbody a:hover {
    color: var(--color-primary-300);
}

/* Below Unfold's `lg` breakpoint each row is a card; mark the record's own link as the
 * way in rather than leaving it to look like one more value. */
@media (max-width: 1023px) {
    /* \203A is "›" written as an escape: a stylesheet is served without a charset, so a
       literal non-ASCII character can be decoded as latin-1 and print as mojibake. */
    #result_list tbody th a::after {
        content: " \203A";
        text-decoration: none;
        font-weight: 600;
    }

    #result_list tbody th a {
        font-weight: 600;
    }
}

/* --- Changelist: keep the phone cards inside the phone -------------------------------
 * A card row is `label … value` on one line, and cells that Django marks `nowrap` (or that
 * hold a long list like Job scope) refuse to break — so the row, the table and with it the
 * whole page grow wider than the screen. Everything then sits half off the right edge,
 * including the link into the record. Let a value wrap under its label instead; the table
 * keeps its own horizontal scroll on the desktop layout, which is where it belongs.
 */
@media (max-width: 1023px) {
    #result_list,
    #result_list > tbody,
    #result_list > tbody > tr {
        max-width: 100%;
    }

    #result_list > tbody > tr > td,
    #result_list > tbody > tr > th {
        flex-wrap: wrap;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* --- Changelist: the action bar on phones -------------------------------------------
 * Unfold pins the "run an action" bar with `position: fixed` and binds its `left` to the
 * *desktop* sidebar width, which stays set on a phone (where the sidebar is an overlay).
 * The bar then starts ~288px into a ~390px screen, so the action picker and the Run
 * button end up squeezed into — or past — the bottom-right corner. The inner element also
 * carries an inline pixel width measured from the changelist, which can be wider than the
 * viewport. Both are inline styles, hence `!important`.
 */
@media (max-width: 1023px) {
    #changelist-form > div:has(> #changelist-actions-wrapper) {
        left: 0 !important;
        right: 0 !important;
        padding: 0.5rem;
    }

    #changelist-actions {
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }

    /* Stack picker + Run + counter instead of overflowing sideways on a narrow screen. */
    #changelist-actions > div {
        margin-left: 0;
        margin-right: 0;
    }

    /* The bar floats over the list, so leave room for it: without this the rows it covers
     * can't be reached, and the last one is never fully readable. */
    #changelist-form:has(input.action-select:checked) {
        padding-bottom: 6rem;
    }
}

/* --- Goods Receipt lines: narrower columns so the row fits without scrolling ----------
 * Nine columns wide-open by default forces the tabular inline's own horizontal scroll
 * strip on every screen, desktop included. The short/numeric columns don't need the same
 * width as a Select2 combobox — capping them is usually enough to fit the row without it.
 * ID-scoped to this one inline (#lines-data is GoodsReceipt.lines' table id) so nothing
 * else with a `quantity`/`unit_cost` column is affected.
 *
 * `.field-*`, not `.column-*`: Unfold puts `column-<name>` on the header <th> only — the
 * widgets live in `<td class="field-<name>">`. The id keeps this ahead of the `max-w-2xl`
 * Unfold's own widget classes carry.
 */
#lines-data .field-received_qty input,
#lines-data .field-quantity input,
#lines-data .field-rejected_qty input,
#lines-data .field-unit_cost input {
    max-width: 6rem;
}

#lines-data .field-rejection_reason textarea {
    max-width: 12rem;
}

/* --- Status / priority chips in a changelist ----------------------------------------
 * The front site paints its status badges from the Tailwind build (`badge_class` →
 * `.badge-success` etc. in static/src/input.css). The admin never loads that stylesheet,
 * so the same markup rendered here came out as bare text — a "Status" column that reads
 * like an unstyled string next to Unfold's own chips. These are the admin's own copy of
 * that palette, deliberately named `erp-chip-*` so nothing is shared by accident: the two
 * stylesheets serve different shells and one changing must never silently restyle the
 * other.
 *
 * Tones are tinted rather than solid, matching the front site's reasoning — a saturated
 * fill with a derived near-black foreground is what made these unreadable in the first
 * place. Every tone carries its `.dark` rule in the same block, so a chip is never
 * defined for one theme only.
 */
.erp-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 9999px;
    border-width: 1px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.erp-chip-neutral { background: rgb(241 245 249); border-color: rgb(226 232 240); color: rgb(51 65 85); }
.erp-chip-info    { background: rgb(224 242 254); border-color: rgb(186 230 253); color: rgb(7 89 133); }
.erp-chip-success { background: rgb(209 250 229); border-color: rgb(167 243 208); color: rgb(6 95 70); }
.erp-chip-warning { background: rgb(254 243 199); border-color: rgb(253 230 138); color: rgb(146 64 14); }
.erp-chip-error   { background: rgb(254 226 226); border-color: rgb(254 202 202); color: rgb(153 27 27); }
.erp-chip-accent  { background: rgb(237 233 254); border-color: rgb(221 214 254); color: rgb(91 33 182); }

.dark .erp-chip-neutral { background: rgb(51 65 85 / 0.6);  border-color: rgb(71 85 105);  color: rgb(203 213 225); }
.dark .erp-chip-info    { background: rgb(12 74 110 / 0.5); border-color: rgb(3 105 161);  color: rgb(186 230 253); }
.dark .erp-chip-success { background: rgb(6 78 59 / 0.5);   border-color: rgb(4 120 87);   color: rgb(167 243 208); }
.dark .erp-chip-warning { background: rgb(120 53 15 / 0.5); border-color: rgb(180 83 9);   color: rgb(253 230 138); }
.dark .erp-chip-error   { background: rgb(127 29 29 / 0.5); border-color: rgb(185 28 28);  color: rgb(254 202 202); }
.dark .erp-chip-accent  { background: rgb(76 29 149 / 0.5); border-color: rgb(109 40 217); color: rgb(221 214 254); }

/* An overdue date in a changelist. Same idea: `text-red-600` is a Tailwind class this
 * shell does not have. */
.erp-overdue { color: rgb(220 38 38); font-weight: 600; }
.dark .erp-overdue { color: rgb(248 113 113); }

/* --- Operation Task: the picker and the duplicate warning ---------------------------
 * Styling for static/js/operation_task_suggest.js, which turns the Operation Task box into
 * a searchable list of the tasks that already exist and warns while a near-duplicate is
 * being typed.
 *
 * Hand-written here for the same reason as the chips above: the admin shell is Unfold's
 * precompiled Tailwind, so a class the JS invents is a class that does not exist. Colours
 * come from Unfold's published variables where there is one, and from the same tinted
 * amber as `.erp-chip-warning` where there isn't — with the `.dark` rule in the same block,
 * so neither piece is ever defined for one theme only.
 */
.erp-task-field { position: relative; }

.erp-task-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    margin-top: 0.25rem;
    max-height: 16rem;
    overflow-y: auto;
    border-radius: var(--border-radius, 0.375rem);
    border: 1px solid var(--color-base-200);
    background: white;
    padding: 0.25rem 0;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.dark .erp-task-menu { border-color: var(--color-base-700); background: var(--color-base-800); }

.erp-task-option {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.erp-task-option:hover { background: var(--color-base-100); }
.dark .erp-task-option:hover { background: var(--color-base-700); }

.erp-task-option-name { font-weight: 500; }
.erp-task-option-meta { font-size: 0.75rem; color: var(--color-base-500); }

/* The near-duplicate warning under the box. Amber tinted rather than solid, matching
 * `.erp-chip-warning` — this has to be noticed without reading as a validation error,
 * because saving anyway is a legitimate choice. */
.erp-task-warning {
    margin-top: 0.5rem;
    border-radius: var(--border-radius, 0.375rem);
    border: 1px solid rgb(253 230 138);
    background: rgb(254 243 199);
    color: rgb(146 64 14);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.dark .erp-task-warning {
    border-color: rgb(180 83 9);
    background: rgb(120 53 15 / 0.5);
    color: rgb(253 230 138);
}

.erp-task-warning-lead { font-weight: 600; }
.erp-task-warning-list { margin: 0.25rem 0 0; padding-left: 1.1rem; list-style: disc; }
.erp-task-warning a { text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.erp-task-warning-note { margin-top: 0.25rem; font-size: 0.75rem; opacity: 0.85; }
.erp-task-hidden { display: none !important; }

/* --- Attendance pages: Today, Month, Close period ------------------------------------
 * The attendance admin's own pages (attendance/templates/attendance/admin/). This shell has
 * only the Tailwind classes Unfold itself compiled, so layout lives here, on Unfold's colour
 * variables, with every rule's `.dark` twin beside it. Phone first: the tiles wrap, the
 * tables scroll inside their card, and the calendar keeps seven columns but drops the hours
 * below 480px.
 */
.att-page { display: flex; flex-direction: column; gap: 1.25rem; max-width: 72rem; }
.att-muted { color: var(--color-base-500); font-size: 0.875rem; }
.dark .att-muted { color: var(--color-base-400); }

.att-stats { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.att-tile {
    display: block; padding: 0.875rem 1rem; border: 1px solid var(--color-base-200);
    border-radius: var(--border-radius, 0.375rem); background: white; text-decoration: none;
}
.dark .att-tile { border-color: var(--color-base-700); background: var(--color-base-900); }
.att-tile-value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--color-base-900); }
.dark .att-tile-value { color: var(--color-base-100); }
.att-tile-label { font-size: 0.8125rem; color: var(--color-base-500); }
.dark .att-tile-label { color: var(--color-base-400); }
.att-tile-good  .att-tile-value { color: rgb(4 120 87); }
.att-tile-bad   .att-tile-value { color: rgb(185 28 28); }
.att-tile-warn  .att-tile-value { color: rgb(180 83 9); }
.dark .att-tile-good .att-tile-value { color: rgb(110 231 183); }
.dark .att-tile-bad  .att-tile-value { color: rgb(252 165 165); }
.dark .att-tile-warn .att-tile-value { color: rgb(252 211 77); }
a.att-tile:hover { border-color: var(--color-primary-400); }

.att-card {
    border: 1px solid var(--color-base-200); border-radius: var(--border-radius, 0.375rem);
    padding: 1rem; background: white; overflow-x: auto;
}
.dark .att-card { border-color: var(--color-base-700); background: var(--color-base-900); }
.att-card h2 { font-weight: 600; margin-bottom: 0.75rem; }

.att-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.att-table th { text-align: left; font-weight: 600; padding: 0.375rem 0.625rem 0.375rem 0; white-space: nowrap; }
.att-table td { padding: 0.375rem 0.625rem 0.375rem 0; border-top: 1px solid var(--color-base-100); vertical-align: top; }
.dark .att-table td { border-top-color: var(--color-base-800); }
.att-num, .att-table .att-num { text-align: right; font-variant-numeric: tabular-nums; }
.att-table a, .att-link { color: var(--color-primary-600); text-decoration: underline; }
.dark .att-table a, .dark .att-link { color: var(--color-primary-400); }

.att-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.att-toolbar select, .att-toolbar input[type=date], .att-toolbar input[type=month] {
    border: 1px solid var(--color-base-200); border-radius: var(--border-radius, 0.375rem);
    padding: 0.375rem 0.5rem; background: white; font-size: 0.875rem; max-width: 100%;
}
.dark .att-toolbar select, .dark .att-toolbar input[type=date], .dark .att-toolbar input[type=month] {
    border-color: var(--color-base-700); background: var(--color-base-900); color: var(--color-base-100);
}
.att-btn {
    display: inline-flex; align-items: center; padding: 0.4rem 0.9rem; border-radius: var(--border-radius, 0.375rem);
    background: var(--color-primary-600); color: white; font-size: 0.875rem; font-weight: 500; border: 0; cursor: pointer;
}
.att-btn:hover { background: var(--color-primary-700); }
.att-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.att-btn-ghost { background: transparent; color: var(--color-primary-600); border: 1px solid var(--color-base-200); }
.dark .att-btn-ghost { color: var(--color-primary-400); border-color: var(--color-base-700); }
.att-btn-ghost:hover { background: var(--color-base-100); }
.dark .att-btn-ghost:hover { background: var(--color-base-800); }

.att-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
.att-cal-head { font-size: 0.75rem; font-weight: 600; text-align: center; color: var(--color-base-500); }
.att-cal-day {
    min-height: 4.25rem; padding: 0.25rem 0.375rem; border: 1px solid var(--color-base-200);
    border-radius: var(--border-radius, 0.375rem); display: flex; flex-direction: column; gap: 0.2rem;
    text-decoration: none; background: white;
}
.dark .att-cal-day { border-color: var(--color-base-700); background: var(--color-base-900); }
.att-cal-out { opacity: 0.35; }
.att-cal-num { font-size: 0.75rem; color: var(--color-base-500); }
.att-cal-hours { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--color-base-600); }
.dark .att-cal-hours { color: var(--color-base-300); }
a.att-cal-day:hover { border-color: var(--color-primary-400); }
.att-cal-flag { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: rgb(217 119 6); display: inline-block; }
@media (max-width: 480px) {
    .att-cal-day { min-height: 3.25rem; padding: 0.2rem; }
    .att-cal-hours { display: none; }
    .att-cal-day .erp-chip { padding: 0 0.3rem; font-size: 0.6875rem; }
}

.att-check { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--color-base-100); }
.dark .att-check { border-top-color: var(--color-base-800); }
.att-check:first-child { border-top: 0; }

/* The muster roll is 31 day columns wide: let the page use the width it has, keep each
 * cell tight, and scroll inside the card on anything narrower. */
.att-page-wide { max-width: none; }
.att-muster th, .att-muster td { padding-right: 0.25rem; }
.att-muster .erp-chip { padding: 0 0.3rem; font-size: 0.6875rem; }

/* Inputs on the attendance pages' own forms (Mark attendance). */
.att-input {
    border: 1px solid var(--color-base-200); border-radius: var(--border-radius, 0.375rem);
    padding: 0.3rem 0.5rem; background: white; font-size: 0.875rem; max-width: 100%;
}
.dark .att-input { border-color: var(--color-base-700); background: var(--color-base-900); color: var(--color-base-100); }

/* A form table that becomes one card per row on a phone (Mark attendance): a supervisor in the
 * field marks from a phone, and a row scrolling sideways hides the note and the state. */
@media (max-width: 640px) {
    .att-stack thead { display: none; }
    .att-stack, .att-stack tbody, .att-stack tr, .att-stack td { display: block; width: 100%; }
    .att-stack tr { padding: 0.5rem 0; border-top: 1px solid var(--color-base-100); }
    .dark .att-stack tr { border-top-color: var(--color-base-800); }
    .att-stack td, .att-stack .att-num { border: 0; padding: 0.2rem 0; text-align: left; }
    .att-stack td[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem;
                                        color: var(--color-base-500); }
    .att-stack .att-input { width: 100%; }
}

/* Face enrolment: the camera, the row of taken pictures, the consent line. */
.att-enrol { display: flex; flex-direction: column; gap: 0.75rem; max-width: 32rem; }
.att-camera { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--border-radius, 0.375rem); overflow: hidden;
              background: var(--color-base-900); border: 1px solid var(--color-base-200); }
.dark .att-camera { border-color: var(--color-base-700); }
.att-camera video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.att-shots { display: flex; gap: 0.25rem; min-height: 1.25rem; }
.att-consent { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.875rem; }
.att-consent input { margin-top: 0.2rem; }