/*
 * Cross-module UI primitives.
 *
 * Things used by more than one feature and owned by none of them: the locked
 * nav item, the "coming soon" page, and the empty/placeholder states. All
 * colours come from theme tokens, so light and dark both work without a
 * second set of rules.
 */

/* =========================================================== locked nav */

.sidebar a.nav-locked {
    opacity: .72;
}

.sidebar a.nav-locked:hover {
    opacity: 1;
}

.nav-lock {
    width: 13px;
    height: 13px;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-secondary);
}

/* The padlock is meaningless once labels are hidden, so it goes with them. */
.sidebar.is-collapsed .nav-lock {
    display: none;
}

/* ========================================================= coming soon */

.coming-soon {
    display: flex;
    justify-content: center;
    padding-block: 28px;
}

.coming-soon-card {
    width: 100%;
    max-width: 680px;
    padding: 38px 34px;
    border-radius: 26px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, var(--accent-soft, rgba(60, 195, 222, .14)), transparent 44%),
        var(--bg-raised);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
    text-align: center;
}

.coming-soon-lock {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin: 0 auto 20px;
    border-radius: 24px;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    color: var(--accent);
}

.coming-soon-lock svg {
    width: 36px;
    height: 36px;
}

.coming-soon-chip {
    display: inline-block;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--warning-soft, rgba(245, 158, 11, .16));
    color: var(--warning);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.coming-soon-card h2 {
    margin: 16px 0 10px;
    color: var(--text-primary);
    font-size: 24px;
}

.coming-soon-card > p {
    margin: 0 auto;
    max-width: 52ch;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.75;
}

.coming-soon-planned {
    margin-top: 28px;
    padding: 20px 22px;
    border-radius: 18px;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    text-align: left;
}

.coming-soon-planned h3 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.coming-soon-planned ul {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
}

.coming-soon-planned li {
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.65;
}

.coming-soon-note {
    margin-top: 22px !important;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12.5px !important;
    line-height: 1.7 !important;
}

.coming-soon-note a,
.coming-soon-planned a {
    color: var(--accent);
    font-weight: 600;
}

@media (max-width: 600px) {
    .coming-soon-card { padding: 28px 20px; }
    .coming-soon-card h2 { font-size: 20px; }
}

/* =========================================== back and secondary buttons
 *
 * "Back" was rendered with .btn-cancel everywhere -- a form-dismissal style,
 * flat and grey, with no sense of direction. These give every back control the
 * same shape and a leading chevron, so going back looks deliberate rather than
 * like cancelling something.
 */

.btn-back,
#workTrackerBackBtn,
#empDashBack,
#ncBack {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px 9px 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg-raised);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.btn-back:hover,
#workTrackerBackBtn:hover,
#empDashBack:hover,
#ncBack:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-hover, var(--bg-sunken));
    transform: translateX(-2px);
}

/* The chevron is drawn rather than typed, so it lines up with the text at any
   font size and does not depend on a glyph being present in the font. */
.btn-back::before,
#workTrackerBackBtn::before,
#empDashBack::before,
#ncBack::before {
    content: '';
    width: 7px;
    height: 7px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* The markup already carries a "←" in some places; hide it so it is not
   doubled up with the drawn chevron. */
#empDashBack,
#ncBack { font-size: 0; gap: 0; }

#empDashBack::after,
#ncBack::after {
    content: 'Back';
    font-size: 13px;
    margin-left: 7px;
}

/* ================================================ work tracker picker */

.wt-picker-card { display: grid; gap: 14px; }

.wt-picker-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.wt-picker-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.wt-picker-filters input,
.wt-picker-filters select {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--bg-raised);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    min-width: 165px;
}

.wt-picker-filters input { min-width: 230px; }

.wt-show-more { display: flex; justify-content: center; }

/* ============================================== work tracker overlay
 *
 * The employee calendar used to sit below the full grid of employee cards, so
 * picking somebody meant scrolling past everyone to reach it. As an overlay it
 * appears where the click happened, and the number of employees stops
 * mattering.
 */

body.wt-overlay-open { overflow: hidden; }

.wt-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    /* No `display` here on purpose: renderDetail() toggles style.display to
       show and hide the overlay, and an !important rule would pin it open
       forever. */
    padding: 0;
    background: rgba(8, 15, 28, .62);
    backdrop-filter: blur(2px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/*
 * The task form is opened from inside that overlay, so it has to sit above it.
 *
 * It did not. attendance-shared.js injects `.modal { z-index: 1100 }` at
 * runtime, which beats the 10000 in the stylesheet and lands below the overlay
 * at 10002 -- so pressing "Add Event" opened the form *underneath* the employee
 * calendar. It was genuinely open, just buried and unclickable, which reads as
 * the form flashing and going straight back.
 *
 * 10003 clears the overlay while staying under the toast container at 10005,
 * so "Event saved" is still visible over the form.
 */
#workTrackerModal {
    z-index: 10003;
}

.wt-overlay-inner {
    display: grid;
    gap: 14px;
    width: min(1180px, calc(100vw - 32px));
    margin: 24px auto 40px;
}

.wt-employee-banner {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, var(--accent-soft, rgba(60,195,222,.2)), transparent 46%),
        var(--bg-raised);
    box-shadow: 0 14px 34px rgba(8, 15, 28, .28);
}

.wt-banner-person {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.wt-banner-person img,
.wt-banner-avatar {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    object-fit: cover;
    flex-shrink: 0;
}

.wt-banner-avatar {
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
}

.wt-banner-text { min-width: 0; display: grid; gap: 3px; }

.wt-banner-text h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 19px;
    overflow-wrap: anywhere;
}

.wt-banner-text p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.wt-close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg-sunken);
    color: var(--text-secondary);
    cursor: pointer;
}

.wt-close:hover { border-color: var(--danger); color: var(--danger); }
.wt-close svg { width: 18px; height: 18px; }

@media (max-width: 720px) {
    .wt-overlay-inner { width: calc(100vw - 16px); margin: 12px auto 28px; }
    .wt-banner-person img, .wt-banner-avatar { width: 46px; height: 46px; }
    .wt-banner-text h2 { font-size: 16px; }
    .wt-picker-filters input, .wt-picker-filters select { min-width: 100%; }
}

/* ============================================ staff ↔ employee matching
 *
 * Shown while creating a staff login, when the name being typed already
 * belongs to somebody in the employee directory. The card has to be
 * unmissable: the mistake it prevents is a second login for a person who
 * already has one, which splits their attendance and payslips in two.
 */

.staff-match {
    margin: 4px 0 18px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    background: var(--bg-sunken);
}

.staff-match.is-found { border-left-color: var(--accent); }
.staff-match.is-blocked { border-left-color: var(--danger); background: var(--danger-soft, rgba(239,68,68,.08)); }
.staff-match.is-choosing { border-left-color: var(--warning); }

.staff-match-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.staff-match-who {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.staff-match-who img,
.staff-match-avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.staff-match-avatar {
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.staff-match-who > div { display: grid; gap: 2px; min-width: 0; }

.staff-match-who strong {
    color: var(--text-primary);
    font-size: 15px;
    overflow-wrap: anywhere;
}

.staff-match-who span {
    color: var(--text-secondary);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.staff-match-flag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--accent-soft, rgba(60,195,222,.18));
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.staff-match.is-blocked .staff-match-flag {
    background: var(--danger-soft, rgba(239,68,68,.16));
    color: var(--danger);
}

.staff-match.is-choosing .staff-match-flag {
    background: var(--warning-soft, rgba(245,158,11,.16));
    color: var(--warning);
}

.staff-match-note {
    margin: 13px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.65;
}

.staff-match-note b { color: var(--text-primary); }

.staff-match-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 15px;
}

.staff-match-edit { margin-top: 15px; display: grid; gap: 12px; }

.staff-match-list { display: grid; gap: 7px; margin-top: 12px; }

.staff-match-option {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-raised);
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.staff-match-option:hover { border-color: var(--accent); background: var(--bg-hover, var(--bg-sunken)); }
.staff-match-option strong { font-size: 14px; }
.staff-match-option span { color: var(--text-secondary); font-size: 12px; }

/* ==========================================================================
   Planned stops table (Personal Calendar + Work Tracker)
   Every colour comes from a token: this table appears inside modals that are
   themed light and dark, and a literal here shows up as white-on-white.
   ========================================================================== */

.vp-wrap {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-raised);
    padding: 14px;
}

.vp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.vp-title { color: var(--text-primary); font-size: 14px; }

.vp-req {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.vp-req.is-required { background: var(--danger-soft, #fee2e2); color: var(--danger, #b91c1c); }
.vp-req.is-optional { background: var(--bg-subtle, #eef2f7); color: var(--text-secondary); }

.vp-hint {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
    max-width: 60ch;
}

/* The table is wide by nature -- seven columns of real content -- so it scrolls
   in its own box rather than pushing the modal sideways. */
.vp-scroll { overflow-x: auto; }

.vp-table { width: 100%; min-width: 900px; border-collapse: collapse; }

.vp-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 8px 8px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.vp-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.vp-table td.vp-num,
.vp-table th.vp-num { width: 34px; color: var(--text-secondary); font-size: 12px; }

.vp-table input[type="text"],
.vp-table textarea,
.vp-table select {
    width: 100%;
    min-width: 120px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input, var(--bg-raised));
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
}

.vp-table textarea { resize: vertical; }
.vp-table select { margin-top: 6px; font-size: 12px; }

.vp-table input::placeholder,
.vp-table textarea::placeholder { color: var(--text-secondary); opacity: .75; }

.vp-status {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.vp-status-Planned { background: var(--bg-subtle, #eef2f7); color: var(--text-secondary); }
.vp-status-Executed { background: var(--success-soft, #dcfce7); color: var(--success, #15803d); }
.vp-status-Not-Executed { background: var(--warning-soft, #fef3c7); color: var(--warning, #b45309); }

.vp-remove {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.vp-remove:hover { color: var(--danger, #b91c1c); border-color: var(--danger, #b91c1c); }

.vp-empty {
    margin: 10px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

@media (max-width: 720px) {
    .vp-head { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Planned stops: the day list, and the per-person planning rules
   ========================================================================== */

.vpd-wrap {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-raised);
    padding: 16px 18px;
}

.vpd-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.vpd-heading { margin: 0; font-size: 15px; color: var(--text-primary); }
.vpd-counts { margin: 5px 0 0; font-size: 12px; color: var(--text-secondary); }

.vpd-date-label {
    margin: 10px 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.vpd-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.vpd-nav .vpd-prev,
.vpd-nav .vpd-next {
    width: 32px;
    padding: 6px 0;
    font-size: 16px;
    line-height: 1;
}

.vpd-nav input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input, var(--bg-raised));
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
}

.vpd-scroll { overflow-x: auto; }
.vpd-table { width: 100%; min-width: 820px; border-collapse: collapse; }

.vpd-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 8px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.vpd-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    color: var(--text-primary);
    font-size: 13px;
}

.vpd-task { color: var(--text-primary); }
.vpd-sub { margin-top: 3px; font-size: 12px; color: var(--text-secondary); }
.vpd-dash { color: var(--text-secondary); }

.vpd-table textarea,
.vpd-table select {
    width: 100%;
    min-width: 130px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input, var(--bg-raised));
    color: var(--text-primary);
    font: inherit;
    font-size: 12.5px;
}
.vpd-table textarea { resize: vertical; }

.vpd-status-cell { white-space: nowrap; }
.vpd-status-cell select { margin-top: 6px; }
.vpd-status-cell .vpd-save { margin-top: 6px; padding: 5px 12px; font-size: 12px; }

.vpd-empty {
    padding: 18px 8px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ------------------------------------------------ per-person planning rules */

.plan-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-raised);
    padding: 16px 18px;
}

.plan-toggle-text strong { color: var(--text-primary); font-size: 14px; }
.plan-toggle-text p {
    margin: 6px 0 0;
    max-width: 58ch;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.plan-toggle-by {
    display: inline-block;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.plan-toggle-boxes { display: grid; gap: 10px; }

.plan-toggle-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-subtle, transparent);
    cursor: pointer;
    min-width: 260px;
}
.plan-toggle-box input { margin-top: 3px; }
.plan-toggle-box strong { display: block; font-size: 13px; color: var(--text-primary); }
.plan-toggle-box small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-secondary); }
.plan-toggle-box input:disabled + span { opacity: .6; }

@media (max-width: 720px) {
    .vpd-head, .plan-toggle { flex-direction: column; align-items: stretch; }
    .plan-toggle-box { min-width: 0; }
}

/* --------------------------------- approval state on a recorded visit ----- */

/* Carried out, not yet signed off. Marked on the row rather than only in a
   column so it is visible while scanning, not only when read. */
.vpd-table tr.vpd-awaiting td {
    background: var(--danger-soft, #fef2f2);
}
.vpd-table tr.vpd-awaiting td:first-child {
    box-shadow: inset 3px 0 0 var(--danger, #dc2626);
}

.vpd-approval-cell { white-space: nowrap; }

.vpd-approval {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.vpd-approval-Pending  { background: var(--danger-soft, #fee2e2); color: var(--danger, #b91c1c); }
.vpd-approval-Approved { background: var(--success-soft, #dcfce7); color: var(--success, #15803d); }
.vpd-approval-Rejected { background: var(--warning-soft, #fef3c7); color: var(--warning, #b45309); }

.vpd-approve-actions { display: flex; gap: 6px; margin-top: 6px; }
.vpd-approve-actions button { padding: 4px 10px; font-size: 11.5px; }

.vpd-counts-alert { color: var(--danger, #b91c1c); font-weight: 600; }

/* ------------------------------- add straight from a calendar day tile ---- */

.day-cell { position: relative; }

/* Present but quiet until the day is hovered or the button is focused, so the
   grid still reads as a calendar rather than a wall of buttons. Always visible
   on touch, where there is no hover to reveal it. */
.day-cell .day-add {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-raised);
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease;
}

.day-cell:hover .day-add,
.day-cell .day-add:focus-visible { opacity: 1; }

.day-cell .day-add:hover {
    color: var(--accent);
    border-color: var(--accent);
}

@media (hover: none) {
    .day-cell .day-add { opacity: .65; }
}

/* ==========================================================================
   To-do list and reminders
   Lighter than the stops table on purpose: a stop is a record that gets
   reported on, a to-do is a line you tick off.
   ========================================================================== */

.todo-wrap {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-raised);
    padding: 16px 18px;
}

.todo-heading { margin: 0; font-size: 15px; color: var(--text-primary); }
.todo-counts { margin: 5px 0 0; font-size: 12px; color: var(--text-secondary); }
.todo-counts-alert { color: var(--danger, #b91c1c); font-weight: 600; }

.todo-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 6px;
}

.todo-add .todo-new-title { flex: 1 1 220px; min-width: 0; }

.todo-add input,
.todo-add select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-input, var(--bg-raised));
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
}
.todo-add input::placeholder { color: var(--text-secondary); opacity: .75; }
.todo-add .todo-add-btn { padding: 8px 18px; font-size: 13px; }

.todo-hint {
    margin: 0 0 12px;
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.todo-list { list-style: none; margin: 10px 0 0; padding: 0; }

.todo-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
}
.todo-row:last-child { border-bottom: 0; }

.todo-tick input { margin-top: 3px; }

.todo-body { flex: 1; min-width: 0; }

.todo-title {
    display: block;
    font-size: 13.5px;
    color: var(--text-primary);
    word-break: break-word;
}

.todo-row.is-done .todo-title {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.todo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.todo-anyday { font-style: italic; }
.todo-alarm { color: var(--accent); }
.todo-by { font-style: italic; }

.todo-pri {
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.todo-pri-High { background: var(--danger-soft, #fee2e2); color: var(--danger, #b91c1c); }
.todo-pri-Low  { background: var(--bg-subtle, #eef2f7); color: var(--text-secondary); }

/* Past its day and still open. Marked on the date, not the whole row: the task
   is not wrong, it is just late. */
.todo-row.is-overdue .todo-when {
    color: var(--danger, #b91c1c);
    font-weight: 700;
}

.todo-notes {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.todo-remove {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    width: 26px;
    height: 26px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.todo-remove:hover { color: var(--danger, #b91c1c); border-color: var(--danger, #b91c1c); }

.todo-empty {
    padding: 14px 4px;
    color: var(--text-secondary);
    font-size: 13px;
}

@media (max-width: 720px) {
    .todo-add { flex-direction: column; align-items: stretch; }
}

/* ------------------------------- sub-pages inside a permission row -------- */

.perm-subpages {
    margin: 14px 0 0 28px;
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--bg-subtle, transparent);
}

.perm-subpages-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.perm-subpages-hint {
    margin: 5px 0 10px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 60ch;
}

.perm-subpage {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 0;
    cursor: pointer;
}
.perm-subpage input { margin-top: 3px; }
.perm-subpage strong { display: block; font-size: 13px; color: var(--text-primary); }
.perm-subpage code {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 5px;
}
.perm-subpage small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ------------------------------ permission presets (All / View / Edit / None) */
.perm-box-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.perm-bulk { display:inline-flex; flex-wrap:wrap; gap:4px; }
.perm-bulk button {
    padding: 4px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg-raised); color: var(--text-secondary);
}
.perm-bulk button:hover { color: var(--accent); border-color: var(--accent); }
.perm-bulk-global {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
    padding: 14px 16px; border: 1px solid var(--accent); border-radius: 16px; background: var(--bg-raised);
}
.perm-bulk-global strong { display:block; color: var(--text-primary); font-size: 14px; }
.perm-bulk-global span { font-size: 12px; color: var(--text-secondary); }
.perm-bulk-global .perm-bulk button { padding: 6px 14px; font-size: 12.5px; }

/* ------------------------------------------------ policy reading and signing */
.policy-doc-viewer { position:relative; margin:14px 0; border:1px solid var(--border); border-radius:14px; overflow:hidden; background: var(--bg-raised); }
.policy-doc-viewer iframe { display:block; width:100%; height:min(70vh, 720px); border:0; background:#fff; }
.policy-doc-open { position:absolute; top:10px; right:12px; padding:5px 10px; font-size:12px; border-radius:8px; background: var(--bg-raised); border:1px solid var(--border); color: var(--text-primary); text-decoration:none; }
.policy-doc-file, .policy-signed-copy { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:14px 0; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background: var(--bg-raised); }
.policy-doc-file strong, .policy-signed-copy strong { display:block; color: var(--text-primary); }
.policy-doc-file span, .policy-signed-copy span { font-size:12.5px; color: var(--text-secondary); }
.policy-signed-copy { border-color: var(--accent); }
.policy-sign-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.policy-sign-tabs button { padding:6px 14px; font-size:12.5px; border:1px solid var(--border); border-radius:999px; background: var(--bg-raised); color: var(--text-secondary); cursor:pointer; }
.policy-sign-tabs button.active { border-color: var(--accent); color: var(--accent); font-weight:700; }
.policy-sign-pane { display:grid; gap:8px; }
.policy-saved-sig { max-width:320px; max-height:120px; padding:8px; border:1px dashed var(--border); border-radius:10px; background:#fff; }
.policy-sign-hint { display:block; font-size:12px; color: var(--text-secondary); line-height:1.5; }
.policy-sign-actions-inline { display:flex; justify-content:flex-end; }
.policy-save-sig { display:flex; align-items:center; gap:8px; margin:10px 0 4px; font-size:13px; color: var(--text-primary); }


/* ------------------------------------------------------ notification extras */
.notification-head-actions { display:flex; align-items:center; gap:4px; }
.notification-clear { color: var(--danger, #dc2626); }
.notification-row { position:relative; }
.notification-row .notification-item { padding-right:34px; }
.notification-dismiss {
    position:absolute; top:8px; right:8px; z-index:1; width:22px; height:22px; border:0; border-radius:50%;
    background:transparent; color: var(--text-secondary); font-size:16px; line-height:1; cursor:pointer; opacity:.55;
}
.notification-dismiss:hover, .notification-dismiss:focus-visible { opacity:1; background: var(--bg-hover, rgba(0,0,0,.06)); }
.notification-item.is-celebration { background: linear-gradient(90deg, rgba(250,204,21,.14), transparent 70%); }
.notification-row .notification-dot { right:34px; }

/* ------------------------------------------------------ wish composer */
.wish-composer-backdrop {
    position:fixed; inset:0; z-index:10050; display:grid; place-items:center; padding:16px;
    background: rgba(15,23,42,.5); backdrop-filter: blur(3px);
}
.wish-composer {
    width:min(480px, 100%); display:grid; gap:10px; padding:24px; border-radius:22px;
    background: var(--bg-raised, #fff); color: var(--text-primary); box-shadow: 0 30px 80px rgba(0,0,0,.3);
}
.wish-composer-icon { font-size:38px; line-height:1; }
.wish-composer h3 { margin:0; font-size:19px; text-wrap:balance; }
.wish-composer p { margin:0; font-size:13px; color: var(--text-secondary); }
.wish-composer label { font-size:12px; font-weight:700; color: var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
.wish-composer textarea {
    width:100%; box-sizing:border-box; resize:vertical; padding:12px; border-radius:12px; font:inherit; font-size:14px;
    border:1px solid var(--border); background: var(--bg-surface, var(--bg-raised)); color: var(--text-primary);
}
.wish-ideas { display:flex; flex-wrap:wrap; gap:6px; }
.wish-ideas button {
    padding:5px 10px; border-radius:999px; border:1px dashed var(--border); background:transparent;
    color: var(--text-secondary); font-size:12px; cursor:pointer; text-align:left;
}
.wish-ideas button:hover { border-color: var(--accent); color: var(--accent); }
.wish-composer-actions { display:flex; align-items:center; gap:8px; justify-content:flex-end; margin-top:6px; }
.wish-composer-actions span { margin-right:auto; font-size:12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.celebrate-card.tone-anniversary { border-color: rgba(168,85,247,.35); }
.celebrate-self { font-size:12.5px; font-weight:700; color: var(--accent); }

/* ------------------------------------------------------ celebration blast */
.celebration-overlay {
    position:fixed; inset:0; z-index:10060; display:grid; place-items:center; padding:16px; overflow:auto;
    background: radial-gradient(circle at 50% 40%, rgba(250,204,21,.28), rgba(15,23,42,.72) 65%);
    animation: celebration-fade .35s ease-out;
}
.celebration-confetti { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
.celebration-card {
    position:relative; width:min(560px, 100%); max-height:88vh; overflow:auto; box-sizing:border-box;
    display:grid; gap:14px; justify-items:center; text-align:center; padding:30px 26px 24px; border-radius:28px;
    background: var(--bg-raised, #fff); color: var(--text-primary); box-shadow: 0 40px 120px rgba(0,0,0,.45);
    animation: celebration-pop .55s cubic-bezier(.2,1.4,.4,1);
}
.celebration-emoji { font-size:64px; line-height:1; animation: celebration-bounce 1.6s ease-in-out infinite; }
.celebration-card h2 { margin:0; font-size:clamp(24px, 5vw, 32px); text-wrap:balance; }
.celebration-sub { margin:0; font-size:13px; color: var(--text-secondary); }
.celebration-company {
    width:100%; box-sizing:border-box; padding:16px 18px; border-radius:18px; text-align:left;
    background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(59,130,246,.10)); border:1px solid rgba(168,85,247,.25);
}
.celebration-company strong { display:block; margin-bottom:6px; }
.celebration-company p { margin:0; font-size:14px; line-height:1.65; color: var(--text-primary); }
.celebration-notes { width:100%; display:grid; gap:10px; }
.celebration-note {
    margin:0; padding:14px 16px; border-radius:16px; text-align:left;
    background: var(--bg-surface, rgba(0,0,0,.03)); border:1px solid var(--border);
}
.celebration-note blockquote { margin:0; font-size:14.5px; line-height:1.6; }
.celebration-note figcaption { margin-top:6px; font-size:12.5px; font-weight:700; color: var(--accent); }
.celebration-close { min-width:160px; }
@keyframes celebration-fade { from { opacity:0; } }
@keyframes celebration-pop { from { opacity:0; transform: scale(.7) translateY(30px); } }
@keyframes celebration-bounce { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
    .celebration-overlay, .celebration-card, .celebration-emoji { animation: none; }
}

/* ------------------------------------------------------ permission sections */
.perm-sections { display:grid; gap:10px; margin-top:14px; }
.perm-section { padding:12px 14px; border:1px solid var(--border); border-radius:14px; background: var(--bg-surface, transparent); }
.perm-section-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.perm-section-head strong { font-size:13px; color: var(--text-primary); }
.perm-section-head code { font-size:11px; color: var(--text-muted, var(--text-secondary)); }
.perm-section-note { display:block; margin-top:4px; font-size:12px; line-height:1.5; color: var(--text-secondary); }
.perm-flat-note { margin:10px 0 0 28px; }
.perm-action-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:6px 12px; margin-top:10px; }
.perm-action-grid-flat { margin-top:14px; padding-left:28px; }
.perm-action { display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-secondary); cursor:pointer; }
.perm-action input { flex-shrink:0; }
.perm-action-view span { font-weight:700; color: var(--text-primary); }
.policy-pending-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.policy-remind-all, .policy-remind {
    border:1px solid var(--border); background: var(--bg-raised); color: var(--text-primary);
    border-radius:999px; cursor:pointer; font-size:12px; padding:3px 10px;
}
.policy-remind { padding:1px 7px; margin-left:6px; }
.policy-remind-all:hover, .policy-remind:hover { border-color: var(--accent); }
.policy-remind.sent, .policy-remind-all.sent { opacity:.5; }

/* ------------------------------------------------------ half-day leave */
.leave-half-row { align-items:end; }
.leave-half-toggle { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px dashed var(--border); border-radius:12px; cursor:pointer; }
.leave-half-toggle strong { display:block; font-size:13px; color: var(--text-primary); }
.leave-half-toggle small { font-size:11.5px; color: var(--text-secondary); }

.records-change-btn { padding:4px 10px; border-radius:8px; border:1px solid var(--border); background: var(--bg-raised); color: var(--text-primary); cursor:pointer; font-size:12px; }
.records-change-btn:hover { border-color: var(--accent); color: var(--accent); }
.records-change-select { padding:9px 10px; border-radius:10px; border:1px solid var(--border); background: var(--bg-raised); color: var(--text-primary); font:inherit; }

/* ------------------------------------------------------------- audit log */
.audit-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:12px 0; }
.audit-filters label { display:grid; gap:4px; font-size:12px; font-weight:700; color: var(--text-secondary); }
.audit-filters input, .audit-filters select { padding:7px 10px; border-radius:10px; border:1px solid var(--border); background: var(--bg-raised); color: var(--text-primary); font:inherit; font-size:13px; }
.audit-wrap { max-height:min(65vh, 640px); overflow:auto; }
.audit-table th { position:sticky; top:0; background: var(--bg-raised); z-index:2; }
.audit-table td { vertical-align:top; font-size:13px; }
.audit-table small { display:block; color: var(--text-secondary); font-size:11.5px; }
.audit-when { white-space:nowrap; font-variant-numeric: tabular-nums; }
.audit-act { font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:6px; margin-right:6px; }
.audit-add { background: rgba(22,163,74,.14); color:#15803d; }
.audit-change { background: rgba(245,158,11,.16); color:#b45309; }
.audit-remove { background: rgba(220,38,38,.13); color:#b91c1c; }
.audit-read { background: var(--bg-hover, rgba(0,0,0,.06)); color: var(--text-secondary); }
.audit-failed { color: var(--danger); font-weight:700; }

/* -------------------------------------------------------- privacy admin */
.privacy-h { margin:14px 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-secondary); }
.privacy-list { display:grid; gap:10px; }
.privacy-req { padding:14px 16px; border-radius:14px; border:1px solid var(--border); background: var(--bg-raised); display:grid; gap:8px; }
.privacy-req.is-open { border-color: var(--accent); }
.privacy-req header { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.privacy-req header span { display:block; font-size:12px; color: var(--text-secondary); }
.privacy-req p { margin:0; font-size:13.5px; white-space:pre-wrap; }
.privacy-answer span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-secondary); font-weight:700; }
.privacy-status { font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px; }
.privacy-open { background: var(--accent-soft); color: var(--accent); }
.privacy-done { background: rgba(22,163,74,.13); color:#15803d; }
.privacy-refused { background: rgba(220,38,38,.13); color:#b91c1c; }
.privacy-actions { display:flex; flex-wrap:wrap; gap:8px; }
.privacy-actions input { flex:1 1 220px; min-width:0; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background: var(--bg-surface, var(--bg-raised)); color: var(--text-primary); font:inherit; }
.privacy-settings { display:flex; flex-wrap:wrap; gap:14px; align-items:end; }
.privacy-settings label { display:grid; gap:4px; font-size:12.5px; font-weight:700; color: var(--text-secondary); }
.privacy-settings input { width:110px; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background: var(--bg-raised); color: var(--text-primary); font:inherit; }
.privacy-settings small { font-weight:400; color: var(--text-secondary); }

/* --------------------------------------------------------- privacy notice */
.pn-backdrop { position:fixed; inset:0; z-index:10055; display:grid; place-items:center; padding:16px; background: rgba(15,23,42,.55); overflow:auto; }
.pn-box { width:min(620px, 100%); max-height:92vh; overflow:auto; display:grid; gap:12px; padding:26px; border-radius:22px; background: var(--bg-raised); color: var(--text-primary); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.pn-box h2 { margin:0; font-size:21px; }
.pn-lead { margin:0; font-size:13px; color: var(--text-secondary); }
.pn-list { margin:0; padding-left:18px; display:grid; gap:8px; font-size:13.5px; line-height:1.6; }
.pn-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }

/* ------------------------------------------------------------- my privacy */
.mp-privacy-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.mp-privacy-grid section { display:grid; gap:8px; align-content:start; padding:14px; border-radius:14px; border:1px solid var(--border); }
.mp-privacy-grid h4 { margin:0; font-size:14px; color: var(--text-primary); }
.mp-privacy-grid p { margin:0; font-size:12.5px; color: var(--text-secondary); line-height:1.55; }
.mp-privacy-grid .btn-submit, .mp-privacy-grid a.btn-submit { justify-self:start; text-decoration:none; }
.mp-ask { display:grid; gap:6px; }
.mp-ask select, .mp-ask textarea { width:100%; box-sizing:border-box; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background: var(--bg-surface, var(--bg-raised)); color: var(--text-primary); font:inherit; font-size:13px; }
.mp-requests { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.mp-requests li { padding:12px 14px; border-radius:12px; border:1px solid var(--border); display:grid; gap:4px; }
.mp-requests li div { display:flex; gap:10px; align-items:baseline; }
.mp-requests li span { font-size:12px; color: var(--text-secondary); }
.mp-requests li p { margin:0; font-size:13px; }
.mp-requests .privacy-status { justify-self:start; }

/* --------------------------------------------------------- import dialog */
.imp-modal { position:fixed; inset:0; z-index:10050; display:grid; place-items:center; padding:16px; background: rgba(15,23,42,.5); overflow:auto; }
.imp-box { width:min(760px, 100%); max-height:92vh; display:grid; grid-template-rows:auto 1fr; border-radius:20px; background: var(--bg-raised); color: var(--text-primary); box-shadow:0 30px 80px rgba(0,0,0,.35); overflow:hidden; }
.imp-head { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--border); }
.imp-head h3 { margin:0; font-size:18px; }
.imp-x { border:0; background:transparent; font-size:24px; line-height:1; color: var(--text-secondary); cursor:pointer; }
.imp-body { overflow:auto; padding:16px 18px 20px; display:grid; gap:12px; }
.imp-steps { display:flex; gap:8px; margin:0; padding:0; list-style:none; font-size:12px; color: var(--text-secondary); }
.imp-steps li { padding:4px 10px; border-radius:999px; border:1px solid var(--border); }
.imp-steps li.active { border-color: var(--accent); color: var(--accent); font-weight:700; }
.imp-note { margin:0; font-size:13px; color: var(--text-secondary); line-height:1.6; }
.imp-columns { padding:12px 14px; border-radius:12px; background: var(--bg-hover, rgba(0,0,0,.04)); font-size:12.5px; line-height:1.6; }
.imp-columns strong { display:block; margin-bottom:4px; }
.imp-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; align-items:center; }
.imp-file { cursor:pointer; }
.imp-summary { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; }
.imp-tile { padding:12px 14px; border-radius:14px; border:1px solid var(--border); display:grid; gap:2px; }
.imp-tile span { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color: var(--text-secondary); }
.imp-tile strong { font-size:22px; font-variant-numeric: tabular-nums; }
.imp-tile.ok { border-color:#16a34a; }
.imp-tile.warn { border-color:#f59e0b; }
.imp-tile.bad { border-color: var(--danger); }
.imp-list { padding:12px 14px; border-radius:12px; border:1px solid var(--border); }
.imp-list h4 { margin:0 0 6px; font-size:13px; }
.imp-list ul { margin:0; padding-left:18px; display:grid; gap:3px; font-size:12.5px; max-height:220px; overflow:auto; }
.imp-choice { display:flex; gap:8px; align-items:center; margin-top:8px; font-size:13px; }
.imp-fail { padding:14px; border-radius:12px; border:1px solid var(--danger); display:grid; gap:6px; font-size:13.5px; }

/* ------------------------------------------------------ attendance corrections */
.corr-card { display:grid; gap:10px; }
.corr-h { margin:8px 0 0; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-secondary); display:flex; gap:8px; align-items:center; }
.corr-list { display:grid; gap:8px; }
.corr-item { padding:12px 14px; border-radius:14px; border:1px solid var(--border); border-left:4px solid var(--text-secondary); background: var(--bg-raised); }
.corr-pending { border-left-color:#f59e0b; }
.corr-approved { border-left-color:#16a34a; }
.corr-rejected { border-left-color: var(--danger); }
.corr-main { display:grid; gap:6px; }
.corr-top { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font-size:13px; }
.corr-change { color: var(--text-secondary); }
.corr-status { font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; background: var(--bg-hover, rgba(0,0,0,.05)); color: var(--text-secondary); }
.corr-who { margin-left:auto; font-size:12.5px; color: var(--text-secondary); }
.corr-item p { margin:0; font-size:13px; }
.corr-note { color: var(--text-secondary); font-size:12.5px; }
.corr-actions { display:flex; flex-wrap:wrap; gap:8px; }
.corr-actions input { flex:1 1 200px; min-width:0; padding:7px 10px; border-radius:10px; border:1px solid var(--border); background: var(--bg-surface, var(--bg-raised)); color: var(--text-primary); font:inherit; }

/* --------------------------------------------------------- face check */
.face-state { margin:10px 0; padding:9px 12px; border-radius:11px; font-size:12.5px; border:1px dashed var(--border); color: var(--text-secondary); }
.face-state.ok { border-color:#16a34a; color:#15803d; }
.face-state.warn { border-color:#f59e0b; color:#b45309; }

/* ============================================================ layout tidy
 * A grid item is as wide as its content unless it is told otherwise, so one
 * wide table stretched the whole page: headers, tabs and buttons were pushed
 * off the right edge instead of the table scrolling inside its own box.
 * These rules keep every page inside the screen and let the wide things
 * scroll where they stand.
 */
.wk-shell, .farm-shell, .it-shell, .attendance-stack, .dashboard-shell { min-width: 0; }
.wk-shell > *, .farm-shell > *, .it-shell > *, .attendance-stack > *, .dashboard-shell > * { min-width: 0; }
.wk-table-wrap, .farm-table-wrap, .table-container-card, .records-table-shell, .audit-wrap, .leave-table-wrap {
    max-width: 100%;
}
.wk-dash-grid > *, .farm-map-shell > *, .farm-dash-grid > * { min-width: 0; }

/* Page headings and their buttons: wrap instead of colliding. */
.farm-head, .wk-head, .page-header-row, .records-view-header, .dashboard-section-head { flex-wrap: wrap; gap: 10px; }
.farm-head-actions, .wk-hero-actions, .split-actions, .payroll-inline-actions, .it-contact-bar { flex-wrap: wrap; }
.it-contact-mail { overflow-wrap: anywhere; }

/* The calendar keeps seven columns; on a narrow phone it scrolls sideways
 * inside its card rather than spilling over the page. */
@media (max-width: 560px) {
    .calendar-grid { min-width: 520px; }
    .calendar-grid-wrap, .calendar-panel { overflow-x: auto; }
    .it-contact-bar { align-items: flex-start; }
}
.table-controls { flex-wrap: wrap; gap: 10px; }
.table-controls .search-wrapper { flex: 1 1 220px; min-width: 0; }
.table-controls .search-input { width: 100%; box-sizing: border-box; }