/*
 * Admin panel tweaks.
 *
 * Loaded before Filament's own stylesheet, so an override has to win on
 * specificity rather than order. Filament's utility classes are single-class
 * (0,1,0); qualifying by element takes these to (0,1,1).
 */

/*
 * Filament caps the page subheading at max-w-2xl, which wrapped the description
 * at roughly two thirds of the header while the action buttons sat far right.
 * These are meant to be read before acting, so they get the full width.
 */
p.fi-header-subheading {
    max-width: none;
}

/*
 * Below the breakpoint where the actions move onto their own row there is no
 * button to run into, so keep a readable measure rather than a full-bleed line.
 */
@media (max-width: 1024px) {
    p.fi-header-subheading {
        max-width: 60ch;
    }
}

/*
 * Import preview summary.
 *
 * The preview counts were written with Tailwind utilities, but this panel loads
 * a hand-written stylesheet rather than a Tailwind build, and Filament's own
 * bundle carries only the utilities Filament itself uses. The grid and card
 * classes were not among them, so the summary rendered as a column of bare
 * labels and numbers — on the one screen whose job is to be read carefully
 * before writing hundreds of rows to the database.
 *
 * Named classes rather than utilities, so this cannot silently lose its styling
 * again the next time the asset pipeline changes.
 */
/*
 * The preview step of the job import wizard.
 *
 * These are named classes rather than Tailwind utilities because this blade is
 * outside the paths the admin panel's Tailwind build scans, so `space-y-4` and
 * `text-sm` compiled to nothing and the step rendered as one unbroken column of
 * full-size text.
 */
.ats-import-preview {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/*
 * Filament's colour variables hold whole colours (`oklch(...)`), not the RGB
 * triplets Tailwind's own build expects. `rgb(var(--danger-600, 220 38 38))`
 * therefore resolves to `rgb(oklch(...))`, which is invalid and paints
 * nothing — every coloured count on the import preview had been transparent,
 * and so were the timeline's dots until this was found. The variable is used
 * directly, with a plain hex fallback.
 */

/* A sentence about the counts above it, tied to the tone of the count it
   explains so the eye pairs the two without reading both. */
.ats-import-note {
    font-size: 0.875rem;
    line-height: 1.4rem;
    margin: 0;
}

.ats-import-note--muted   { color: var(--gray-500, #6b7280); }
.ats-import-note--warning { color: var(--warning-600, #d97706); }
.ats-import-note--danger  { color: var(--danger-600, #dc2626); }

.dark .ats-import-note--muted   { color: var(--gray-400, #9ca3af); }
.dark .ats-import-note--warning { color: var(--warning-400, #fbbf24); }
.dark .ats-import-note--danger  { color: var(--danger-400, #f87171); }

/* The combinations an admin has to add, under the sentence explaining why.
   Indented and monospaced-by-weight rather than bulleted plainly: they are
   values to be copied into a form, not prose to be read. */
.ats-import-missing-splits {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.ats-import-missing-splits li {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    padding-left: 0.75rem;
    border-left: 2px solid currentColor;
}

/* Two notes in a row read as one paragraph without this. */
.ats-import-note + .ats-import-note {
    margin-top: -0.5rem;
}

.ats-import-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
}

.ats-import-summary__item {
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.ats-import-summary__label {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500, #6b7280);
}

.ats-import-summary__count {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    margin-top: 0.125rem;
}

.ats-import-summary__count--neutral { color: var(--gray-950, #030712); }
.ats-import-summary__count--success { color: var(--success-600, #16a34a); }
.ats-import-summary__count--warning { color: var(--warning-600, #d97706); }
.ats-import-summary__count--danger  { color: var(--danger-600, #dc2626); }

/* A count of zero is not news — keep it quiet so a real one stands out. */
.ats-import-summary__count--zero { color: var(--gray-400, #9ca3af); }

.dark .ats-import-summary__item { border-color: var(--gray-700, #374151); }
.dark .ats-import-summary__label { color: var(--gray-400, #9ca3af); }
.dark .ats-import-summary__count--neutral { color: #fff; }
.dark .ats-import-summary__count--success { color: var(--success-400, #4ade80); }
.dark .ats-import-summary__count--warning { color: var(--warning-400, #fbbf24); }
.dark .ats-import-summary__count--danger  { color: var(--danger-400, #f87171); }
.dark .ats-import-summary__count--zero    { color: var(--gray-600, #4b5563); }

/* The per-row table beneath the summary, for the same reason. */
.ats-import-rows {
    overflow-x: auto;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.5rem;
}

.ats-import-rows table {
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-collapse: collapse;
}

.ats-import-rows thead {
    background-color: var(--gray-50, #f9fafb);
}

.ats-import-rows th,
.ats-import-rows td {
    padding: 0.5rem 0.75rem;
    text-align: start;
    vertical-align: top;
}

.ats-import-rows th {
    font-weight: 500;
    white-space: nowrap;
}

.ats-import-rows tbody tr + tr {
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

.ats-import-rows td:first-child {
    font-variant-numeric: tabular-nums;
}

/* The outcome column states a whole phrase — let it have the width for one
   rather than truncating it to something the reader has to guess at. */
.ats-import-rows td:nth-child(3) {
    white-space: nowrap;
}

.ats-import-rows td:nth-child(3) .fi-badge {
    max-width: none;
}

/* Each reason is its own sentence and deserves to look like one. */
.ats-import-rows__notes p + p {
    margin-top: 0.25rem;
}

.ats-import-rows__notes {
    color: var(--gray-500, #6b7280);
}

.dark .ats-import-rows,
.dark .ats-import-rows tbody tr + tr { border-color: var(--gray-700, #374151); }
.dark .ats-import-rows thead { background-color: rgba(255, 255, 255, 0.05); }
.dark .ats-import-rows__notes { color: var(--gray-400, #9ca3af); }

/*
 * "What one person did".
 *
 * This project has no Tailwind build. Filament's compiled stylesheet defines
 * `fi-` prefixed classes and nothing else — no `text-sm`, no `flex`, no
 * `py-1` — so a Tailwind utility in a custom Blade view does exactly nothing,
 * silently. The shifts table was written in utilities and rendered with the
 * browser's default table spacing: "Day On Off HoursNote" over
 * "13:0215:062.07". Anything a custom view needs is written out here.
 */
.ats-report-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    font-size: 0.875rem;
}

@media (min-width: 640px) {
    .ats-report-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .ats-report-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.ats-report-stats__label {
    color: var(--gray-500, #6b7280);
}

.ats-report-stats__value {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ats-report-table {
    overflow-x: auto;
}

.ats-report-table table {
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-collapse: collapse;
}

.ats-report-table th,
.ats-report-table td {
    padding: 0.375rem 0.75rem;
    text-align: start;
    vertical-align: top;
}

/* The first column carries no left padding, so the table lines up with the
   section's own heading rather than sitting indented from it. */
.ats-report-table th:first-child,
.ats-report-table td:first-child {
    padding-inline-start: 0;
}

.ats-report-table th {
    font-weight: 500;
    white-space: nowrap;
    color: var(--gray-500, #6b7280);
}

.ats-report-table tbody tr {
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

/* Times and hours read as columns of figures, so they are aligned as ones.
   Nothing but the last column wraps: giving the note the remaining width
   squeezes every other column to its minimum, and "Mon 7 Sep" then breaks
   over three lines. */
.ats-report-table td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The note takes what is left and is the one thing allowed to wrap, being
   the only column holding a sentence. */
.ats-report-table td:last-child,
.ats-report-table th:last-child {
    font-variant-numeric: normal;
    white-space: normal;
    width: 100%;
}

.ats-report-list {
    font-size: 0.875rem;
}

.ats-report-list li + li {
    margin-top: 0.5rem;
}

.ats-report-muted {
    font-size: 0.875rem;
    color: var(--gray-500, #6b7280);
}

.dark .ats-report-stats__label,
.dark .ats-report-table th,
.dark .ats-report-muted { color: var(--gray-400, #9ca3af); }

.dark .ats-report-table tbody tr { border-color: var(--gray-700, #374151); }

/* The line telling you somebody's jobs are still owed paperwork. Red, spaced
   off the figures above it, and a link that looks like one. */
.ats-report-alert {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--danger-600, #dc2626);
}

.ats-report-alert a,
.ats-report-list a {
    text-decoration: underline;
}

.dark .ats-report-alert { color: var(--danger-400, #f87171); }

.ats-report-list .ats-report-list__day {
    font-weight: 500;
}

/*
 * A job's history, on the job page and nowhere else.
 *
 * This was written in Tailwind utilities and so had no styling at all: no
 * dots, no rail, no indent, every entry running into the next. See the note
 * above `.ats-report-stats` for why. The shape is a two-column flex row per
 * entry — a rail of dots on the left, the text on the right.
 */
.ats-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ats-timeline__entry {
    display: flex;
    gap: 0.75rem;
}

.ats-timeline__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.375rem;
}

.ats-timeline__dot {
    height: 0.625rem;
    width: 0.625rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: var(--gray-400, #9ca3af);
}

/* What the event was, in the panel's own palette rather than a second one. */
.ats-timeline__dot--info    { background-color: var(--info-500, #3b82f6); }
.ats-timeline__dot--good    { background-color: var(--success-500, #22c55e); }
.ats-timeline__dot--warning { background-color: var(--warning-500, #f59e0b); }
.ats-timeline__dot--bad     { background-color: var(--danger-500, #ef4444); }

/* The line joining one dot to the next. Absent on the last entry, so the
   history ends rather than trailing off. */
.ats-timeline__line {
    margin-top: 0.25rem;
    width: 1px;
    flex-grow: 1;
    background-color: var(--gray-200, #e5e7eb);
}

.ats-timeline__body {
    flex-grow: 1;
    padding-bottom: 1rem;
}

.ats-timeline__entry:last-child .ats-timeline__body {
    padding-bottom: 0;
}

.ats-timeline__title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--gray-950, #030712);
}

.ats-timeline__detail {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-600, #4b5563);
}

.ats-timeline__when {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500, #6b7280);
}

.dark .ats-timeline__line { background-color: var(--gray-700, #374151); }
.dark .ats-timeline__title { color: #fff; }
.dark .ats-timeline__detail,
.dark .ats-timeline__when { color: var(--gray-400, #9ca3af); }

/*
 * Two panels side by side on a wide screen, stacked on a narrow one. Used by
 * the mail-log detail page, which asked for it in utilities and got one
 * column at any width.
 */
.ats-split {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.ats-split__panel {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    .ats-split__panel { flex: 1 1 calc(50% - 0.5rem); }
}

/* The preview is the page's centrepiece and reads badly in half the width. */
.ats-split__panel--wide { flex-basis: 100%; }

.ats-split__preview {
    width: 100%;
    height: 75vh;
    border: 0;
}

/* The settings pages are one column of sections; they asked for `w-full
   gap-4`, which did nothing, and Filament's own page grid already spaces
   them. This only guarantees the width. */
.ats-page-column {
    width: 100%;
}

/* A sentence introducing a settings page, spaced off the fields below it. */
.ats-page-intro { margin-bottom: 1rem; }

/* The sentence in a modal that says what will happen beyond this screen —
   the operative's handset, in the case of accounting for waste without a
   note. Amber rather than red: it is a consequence to read, not a refusal. */
.ats-modal-warning {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--warning-500, #f59e0b);
    background-color: rgba(245, 158, 11, 0.08);
    border-radius: 0.25rem;
}

.dark .ats-modal-warning { background-color: rgba(245, 158, 11, 0.12); }