/* ─────────────────────────────────────────────────────
   Kitchen Recruit Tracker — Global Styles
   ───────────────────────────────────────────────────── */

:root {
    --kt-done-bg:    rgba(25, 135, 84, 0.10);
    --kt-done-text:  #198754;
    --kt-miss-bg:    rgba(220, 53, 69, 0.08);
    --kt-radius:     0.6rem;
    --kt-shadow:     0 1px 4px rgba(0,0,0,.08);
}

/* ── Base ─────────────────────────────────────────── */
body {
    font-size: 0.95rem;
    background: #f4f5f7;
}

/* ── Login page ───────────────────────────────────── */
.login-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.login-page .card {
    border-radius: 1rem;
}
.login-icon {
    width: 64px;
    height: 64px;
    background: rgba(255,193,7,.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* ── Navbar ───────────────────────────────────────── */
.navbar-brand { font-size: 1rem; }

/* ── Sticky section headers ────────────────────────── */
.section-sticky-header {
    background: #fff;
    z-index: 100;
    top: 56px;          /* below navbar */
    padding-left: 0;
    padding-right: 0;
}

/* ── Task card ─────────────────────────────────────── */
.task-card {
    border-radius: var(--kt-radius) !important;
    transition: background .2s, box-shadow .2s;
}
.task-card.task-done {
    background-color: var(--kt-done-bg) !important;
}
.task-check-wrap {
    flex-shrink: 0;
}
.task-checkbox,
.portion-checkbox {
    width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
    border-radius: 0.4rem;
    flex-shrink: 0;
}
.task-checkbox:checked,
.portion-checkbox:checked {
    background-color: #198754;
    border-color: #198754;
}

/* ── Portion row ───────────────────────────────────── */
.portion-row {
    border-radius: var(--kt-radius) !important;
    transition: background .2s;
}
.portion-row.portion-done {
    background-color: var(--kt-done-bg) !important;
}
.portion-check-wrap {
    flex-shrink: 0;
}

/* ── Done timestamps ───────────────────────────────── */
.done-time {
    font-size: 0.78rem;
    color: var(--kt-done-text);
}

/* ── Progress bars ─────────────────────────────────── */
.progress {
    border-radius: 99px;
    background: rgba(0,0,0,.07);
}

/* ── Tracking badge ────────────────────────────────── */
.tracking-wide {
    letter-spacing: .05em;
    font-size: .75rem;
}

/* ── Manager stat cards ────────────────────────────── */
#summary-cards .card { border-radius: var(--kt-radius); }

/* ── Table tweaks ──────────────────────────────────── */
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.table td { font-size: .9rem; }

/* ── Toast ─────────────────────────────────────────── */
.toast { min-width: 220px; border-radius: .6rem; font-size: .9rem; }

/* ── Select2 overrides ─────────────────────────────── */
.select2-container--bootstrap-5 .select2-selection {
    border-radius: .375rem;
    min-height: 38px;
}

/* ── Utility ───────────────────────────────────────── */
.x-small { font-size: .75rem; }
.min-w-0 { min-width: 0; }
.cursor-pointer { cursor: pointer; }

/* ── Mobile touch targets ──────────────────────────── */
@media (max-width: 576px) {
    .task-checkbox,
    .portion-checkbox {
        width: 2rem;
        height: 2rem;
    }
    .task-card .card-body,
    .portion-row .card-body {
        padding-top: .85rem;
        padding-bottom: .85rem;
    }
    .table-responsive { font-size: .82rem; }
}

/* ── Overdue (past day, not completed) ─────────────── */
.task-overdue  { background-color: var(--kt-miss-bg) !important; }

/* ── Inline edit animation ─────────────────────────── */
.qty-edit-form {
    animation: slideDown .15s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Spinner in refresh indicator ─────────────────── */
#refresh-spinner { vertical-align: middle; }