/* ============================================================
   Avian HRM — Custom Styles
   Built on Bootstrap 5.3 with sidebar layout
   ============================================================ */

:root {
    --sidebar-width: 260px;
    --sidebar-collapsed: 70px;
    --topbar-height: 60px;
    --primary: #4361ee;
    --primary-light: #e8ecfd;
    --secondary: #6c757d;
    --success: #2dc653;
    --warning: #f4a261;
    --danger: #e63946;
    --info: #48bfe3;
    --dark: #1d2d44;
    --body-bg: #f0f2f5;
    --card-bg: #ffffff;
    --text-primary: #1d2d44;
    --text-muted: #6c757d;
    --border-color: #e2e8f0;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* LINK CONTRAST, PORTAL-WIDE — the deliberate change the meetings sweep asked
 * somebody to make.
 *
 * static/css/meetings/portal.css fixed this for `.mtg-page` and said so in as
 * many words: "This is a PORTAL-WIDE issue and not a meetings one — the same
 * measurement holds on every grey screen in the product. It is fixed here for
 * the pages being swept ... so the same change can be made deliberately
 * everywhere rather than arriving as a side effect of a meetings commit."
 *
 * This is that change. Measured in Chromium 2026-08-17 across 528 text nodes
 * on ten recruitment surfaces: two failed WCAG AA, both Bootstrap's #0d6efd
 * at 4.01:1 — the "Jobs" link on the overview and "Back to candidates" on the
 * candidate panel. 4.01 is the exact figure the meetings comment recorded,
 * measured independently two years later on different screens.
 *
 * #0d6efd is 4.50:1 on pure white, which is the borderline pass Bootstrap
 * designed for, and the portal does not paint white behind it: the page
 * background is #f0f2f5, where it drops to 4.01:1. #0a58ca is 5.74:1 there
 * and 6.44:1 on white, so it clears AA on both.
 *
 * Scoped to `a:not(.btn)` and `.btn-link` exactly as the meetings rule is, so
 * solid buttons — which paint their own background and are measured against
 * it — are untouched.
 */
a:not(.btn),
.btn-link {
    color: #0a58ca;
}

/* A HORIZONTAL SCROLLER MUST BE A CONTAINING BLOCK.
 *
 * Bootstrap's .table-responsive scrolls a wide table inside itself, which
 * works for the table. It does NOT work for the `.visually-hidden` labels
 * inside that table: those are `position: absolute`, and with no positioned
 * ancestor they resolve against the initial containing block while keeping
 * their STATIC position — out at the table's own width. They escape the
 * scroller and stretch the document instead.
 *
 * Measured in Chromium at 360px on the recruitment jobs tab, 2026-08-17:
 * 23 such labels sat at x 630–797 in a 928px table; documentElement
 * .scrollWidth was 798 against a 345px client width, and window.scrollTo(600, 0)
 * really moved the page to scrollX 420. Screen-reader markup was dragging
 * every phone user sideways across 420px of nothing.
 *
 * `position: relative` costs no layout and makes the scroller the containing
 * block, so the labels stay inside it and are clipped with everything else.
 * Verified: scrollWidth 798 -> 345, scrollX 420 -> 0, and the table still
 * scrolls within its wrapper, so no data was hidden to achieve it.
 *
 * NOT fixed with `html { overflow-x: hidden }`. That was tried first and did
 * nothing here, because absolutely positioned boxes are not clipped by it —
 * and had it worked it would only have hidden the symptom, leaving the next
 * overflow silent instead of visible.
 */
.table-responsive {
    position: relative;
}

body {
    font-family: var(--font-family);
    background-color: var(--body-bg);
    color: var(--text-primary);
    overflow-x: hidden;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--dark);
    color: #fff;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease, transform 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
}

.sidebar-brand-text {
    color: #fff;
}

/* The product mark is inline SVG filled with currentColor, so it takes the sidebar's
   white here and would take the ink colour anywhere else it is included. flex-shrink
   stops it squashing when the brand text wraps on a narrow sidebar. */
.sidebar-brand .brand-mark {
    color: #fff;
    flex: 0 0 auto;
}

.sidebar-nav {
    flex: 1;
    padding: 0.75rem 0;
}

.sidebar-nav .nav {
    padding: 0 0.75rem;
}

.sidebar-nav .nav-item .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    color: rgba(255,255,255,0.65);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
    margin-bottom: 2px;
}

.sidebar-nav .nav-item .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.sidebar-nav .nav-item .nav-link.active {
    color: #fff;
    background: var(--primary);
}

.sidebar-nav .nav-item .nav-link i {
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
}

.nav-section {
    padding: 0.75rem 0.75rem 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
    list-style: none;
}

.sidebar-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.loyalty-badge {
    text-align: center;
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.loyalty-1 { background: rgba(76,175,80,0.15); color: #66bb6a; }
.loyalty-2 { background: rgba(255,193,7,0.15); color: #ffc107; }
.loyalty-3 { background: rgba(255,215,0,0.2); color: #ffd700; }

/* ============================================================
   KEYBOARD FOCUS
   ============================================================ */
/* Nothing here ever suppressed the outline, but the custom controls (the
   sidebar rail buttons, the icon-only toggles) never picked up Bootstrap's
   focus ring either — the first tab stop on the portal had no visible
   indicator at all, so a keyboard user could not tell where they were.
   :focus-visible so a mouse click does not paint a ring.

   The .btn/.form-control selectors are not redundant: Bootstrap ships
   `.btn:focus-visible { outline: 0 }` and relies on a box-shadow ring that
   several custom controls here override away, leaving nothing. A bare
   `:focus-visible` (specificity 0,1,0) loses to it, so match its 0,2,0. This
   sheet loads after Bootstrap, so equal specificity wins. */
:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible {
    outline: 2px solid #4361ee;
    outline-offset: 2px;
}
/* The <main> is focused programmatically by the skip link; it should move the
   caret without drawing a box around the entire page. */
main.page-content:focus,
main.page-content:focus-visible {
    outline: none;
}

/* Visible only while focused: it must not occupy layout for mouse users, but
   must be fully visible the moment it is tabbed to. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 10px 16px;
    background: #fff;
    color: #1d2d44;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* ============================================================
   SIDEBAR COLLAPSED STATE (icon-only)
   ============================================================ */
.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}
.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .nav-section,
.sidebar.collapsed .sidebar-footer,
.sidebar.collapsed .badge {
    display: none !important;
}
/* The nav label is the ONLY text on an icon-only link, so it is also the
   link's accessible name. display:none drops it out of the accessibility
   tree, which announced all ~25 primary navigation items as a bare "link"
   with no destination. Clip it out of the layout instead: the rail still
   renders icon-only, and screen readers keep the name. */
.sidebar.collapsed .nav-link span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* A collapsed sidebar hides every badge (above). That is fine for counts, but
   the uninformed-leave penalty badge signals money that expires if nobody acts,
   so it survives as a dot on the icon instead of vanishing. */
.sidebar.collapsed .nav-link .badge-penalty-alert {
    display: block !important;
    position: absolute;
    top: 6px;
    right: 12px;
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
.sidebar.collapsed .nav-link .badge-penalty-alert i {
    display: none;
}
.sidebar.collapsed .sidebar-nav .nav-item .nav-link {
    position: relative;
}
.sidebar.collapsed .sidebar-header {
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    gap: 0.25rem;
}
.sidebar.collapsed .sidebar-brand {
    justify-content: center;
}
.sidebar.collapsed .sidebar-header > .d-flex {
    justify-content: center;
}
.sidebar.collapsed .sidebar-header .sidebar-collapse-toggle.d-none {
    display: flex !important;
}
.sidebar.collapsed .sidebar-collapse-toggle {
    display: flex !important;
}
.sidebar.collapsed .sidebar-nav .nav {
    padding: 0 0.35rem;
}
.sidebar.collapsed .sidebar-nav .nav-item .nav-link {
    justify-content: center;
    padding: 0.6rem;
    gap: 0;
}
.sidebar.collapsed .sidebar-nav .nav-item .nav-link i {
    font-size: 1.2rem;
    width: auto;
}
.sidebar.collapsed .sidebar-collapse-toggle i::before {
    content: "\F504";
}
.sidebar-collapse-toggle {
    color: rgba(255,255,255,0.6);
    border: none;
    padding: 4px 6px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.sidebar-collapse-toggle:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin 0.3s ease;
}
.sidebar.collapsed ~ .main-content {
    margin-left: var(--sidebar-collapsed);
}

.top-navbar {
    position: sticky;
    top: 0;
    height: var(--topbar-height);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 1020;
}

.page-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-search .form-control {
    width: 250px;
    border-radius: 0.5rem;
    font-size: 0.85rem;
}
.nav-search .input-group-text {
    border-radius: 0.5rem 0 0 0.5rem;
    color: var(--text-muted);
}

.btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: var(--text-muted);
    background: transparent;
}
.btn-icon:hover { background: var(--body-bg); }

.page-content {
    padding: 1.5rem;
}

/* ============================================================
   AVATAR
   ============================================================ */
.avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-md {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.8rem;
}

.avatar-placeholder.avatar-md { font-size: 1rem; }
.avatar-placeholder.avatar-lg { font-size: 1.5rem; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--card-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.95rem;
}

.stat-card {
    position: relative;
    overflow: hidden;
}
.stat-card .stat-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    opacity: 0.1;
}
.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}
.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* ============================================================
   TABLES
   ============================================================ */
.table { font-size: 0.875rem; }
.table th {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    border-bottom-width: 2px;
}
.table td { vertical-align: middle; }

/* ============================================================
   BADGES & STATUS
   ============================================================ */
.badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
}
.badge-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.badge-dot.present::before { background: var(--success); }
.badge-dot.late::before { background: var(--warning); }
.badge-dot.absent::before { background: var(--danger); }
.badge-dot.on_leave::before { background: var(--info); }
.badge-dot.holiday::before { background: var(--secondary); }

.status-badge {
    padding: 0.25em 0.625em;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ============================================================
   PROGRESS BARS & METERS
   ============================================================ */
.bonus-meter {
    height: 8px;
    border-radius: 4px;
    background: #e9ecef;
    overflow: hidden;
}
.bonus-meter-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.bonus-meter-daily { background: linear-gradient(90deg, var(--primary), #6c8cff); }
.bonus-meter-weekly { background: linear-gradient(90deg, var(--success), #6ee7b7); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dark) 0%, #3c5a99 100%);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.login-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.login-brand i {
    font-size: 2.5rem;
    color: var(--primary);
}

.login-brand h2 {
    font-weight: 700;
    margin-top: 0.75rem;
    font-size: 1.5rem;
}

.login-brand p {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* ============================================================
   ORG CHART — styles moved to org_chart.html template
   ============================================================ */

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        /* Off-canvas is not the same as gone. Translated alone, all ~36
           navigation controls stay in the tab order and in the accessibility
           tree: driven at 390px, the third Tab from the top of the page
           landed on a button at left:-41px — off-screen, and with no
           accessible name to announce. `visibility: hidden` takes a subtree
           out of both, and needs no JS to stay in step with `.show`.

           Delayed by the width of the slide so closing still animates —
           flipping visibility at 0s would make the drawer vanish rather than
           slide away. Opening restores it immediately (no delay) so the
           drawer is focusable for the whole of its slide in. */
        visibility: hidden;
        transition: width 0.25s ease, transform 0.3s ease, visibility 0s 0.3s;
    }
    .sidebar.show {
        transform: translateX(0);
        visibility: visible;
        transition: width 0.25s ease, transform 0.3s ease, visibility 0s;
    }
    /* The collapsed variant MUST be repeated here. `.sidebar.collapsed ~
       .main-content` above scores 0,3,0 against this rule's 0,1,0, so a bare
       `.main-content` reset loses to it inside this very media query: anyone
       who had collapsed the sidebar on desktop carried a 70px left margin
       onto their phone — 19% of a 375px screen — for a sidebar that is
       translated off-screen and cannot be seen. */
    .main-content,
    .sidebar.collapsed ~ .main-content {
        margin-left: 0;
    }
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1039;
        display: none;
    }
    .sidebar-overlay.show {
        display: block;
    }
}

/* ============================================================
   UTILITY
   ============================================================ */
.fs-7 { font-size: 0.85rem !important; }
.fs-8 { font-size: 0.75rem !important; }
.text-primary { color: var(--primary) !important; }
.bg-primary-light { background: var(--primary-light) !important; }
.border-dashed { border-style: dashed !important; }

/* Smooth transitions for HTMX */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-settling { opacity: 0.8; }

/* ============================================================
   DASHBOARD WIDGETS (BambooHR-Inspired)
   ============================================================ */

/* Widget Card — slightly elevated, warm feel */
.widget-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.25rem;
    height: 100%;
    transition: box-shadow 0.2s ease;
}
.widget-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.widget-card .widget-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* Greeting section */
.dash-greeting {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

/* Action icons for What's Happening feed */
.action-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.action-icon.bg-primary-subtle { background: rgba(67, 97, 238, 0.12); color: var(--primary); }
.action-icon.bg-success-subtle { background: rgba(45, 198, 83, 0.12); color: var(--success); }
.action-icon.bg-warning-subtle { background: rgba(244, 162, 97, 0.12); color: var(--warning); }
.action-icon.bg-danger-subtle { background: rgba(230, 57, 70, 0.12); color: var(--danger); }
.action-icon.bg-info-subtle { background: rgba(72, 191, 227, 0.12); color: var(--info); }

/* Celebration icons */
.celebration-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff3e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Quick Link Buttons grid */
.quick-link-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--body-bg);
    transition: all 0.15s ease;
    font-size: 0.8rem;
    font-weight: 500;
}
.quick-link-btn i {
    font-size: 1.4rem;
    color: var(--primary);
}
.quick-link-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    transform: translateY(-2px);
}

/* Leave Balance Pill Bars */
.leave-balance-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--body-bg);
    overflow: hidden;
}
.leave-balance-bar .bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Notification dot (unread) */
.notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

/* Holiday date badge */
.holiday-date-badge {
    min-width: 42px;
    text-align: center;
    background: var(--body-bg);
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
}
.holiday-date-badge .month {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1;
}
.holiday-date-badge .day {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/* Stat values for "This Month" widget */
.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Empty state helper */
.empty-state {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--text-muted);
}
.empty-state i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

/* ============================================================
   SCROLLABLE MODALS WRAPPED IN A <form>
   ============================================================
   Bootstrap's .modal-dialog-scrollable caps .modal-content at the
   viewport and lets .modal-body scroll — but it assumes the header /
   body / footer are direct children of .modal-content. Most of our
   modals wrap them in a <form> (needed for the POST + csrf token),
   which is an ordinary block element: it ignores the cap, grows to its
   natural height and gets clipped by .modal-content's overflow:hidden,
   so the footer — Cancel / Submit — is cut off the bottom of the screen
   on shorter windows. Re-establishing the flex column on the form hands
   the cap back to the body, which then scrolls as intended. */
.modal-dialog-scrollable > .modal-content > form {
    display: flex;
    flex-direction: column;
    /* min-height:0 lets the body shrink below its content height —
       without it a flex item refuses to scroll. */
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}
.modal-dialog-scrollable > .modal-content > form > .modal-body {
    min-height: 0;
    overflow-y: auto;
}

/* -- Touch targets on phones (UI audit) ------------------------------------
 *
 * Bootstrap's default control heights are 38px, and 31px for the `-sm`
 * variants. Both are under the 44px minimum on a phone. Measured at 390px
 * before this rule: the directory had 48 of 48 controls undersized,
 * attendance 3 of 3, activity 4 of 5.
 *
 * Narrow screens only, and deliberately NOT `pointer: coarse` as well — a
 * tablet at desktop width renders the same wide tables, and stretching every
 * control there is the layout risk this rule has to avoid.
 *
 * Scoped to `main` so it cannot reach the topnav or sidebar, which the chrome
 * positions by hand.
 */
/* Both conditions, matching `static/css/meetings/portal.css`, which spells out
   why: `pointer: coarse` is the precise test and catches a tablet or a touch
   laptop at DESKTOP width; `max-width: 640px` is the one verifiable in a
   headless browser, where pointer emulation does not take. Either alone leaves
   a real device unfixed.

   This file had the width arm only. The reasoning was already written down in
   the meetings stylesheet and simply never carried here, so every portal
   control was 38px on a landscape tablet — the exact case that comment warns
   about. */
@media (pointer: coarse), (max-width: 640px) {
  main .btn,
  main .form-control,
  main .form-select {
    min-height: 2.75rem;
  }

  /* A checkbox stays a checkbox — a 44px one looks like a mistake. The target
     is the row, so the label is stretched to fill it. */
  main .form-check {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }

  main .form-check-label {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Table cells are the exception, and the reason this rule was deferred three
     times. Inflating a control inside a dense table pushes the row height past
     the point where the table is readable, and a table on a phone is scrolled
     rather than tapped. */
  main table .btn,
  main table .form-control,
  main table .form-select,
  main table .form-check {
    min-height: 0;
  }
}

/* -- Outline-button text ---------------------------------------------------
 *
 * Bootstrap's `.btn-outline-secondary` draws its label in #6c757d, which is
 * 4.18:1 on white — under the 4.5 needed for text this size. #565e64 is the
 * same grey darkened to 5.4:1, and is already the value used on the meetings
 * screens; this carries it across the rest of the portal rather than leaving
 * two greys that differ for no reason.
 *
 * The hover/active states are left alone: they paint the button solid and
 * their label is white on #6c757d, which is a different (passing) pairing.
 */
main .btn-outline-secondary:not(:hover):not(:active):not(.active) {
  color: #565e64;
}

/* -- Row headers in key/value tables ---------------------------------------
 *
 * A payslip's "Basic Salary / 50,000" pairs are a table whose row header is
 * the first cell, so those cells are `<th scope="row">` — that association is
 * what lets a screen reader say which figure it is reading.
 *
 * The reset is longer than it looks like it should be because this sheet
 * already styles `.table th` for COLUMN headers — 600 weight, muted grey,
 * uppercase, 0.75rem. A row header inherits all of it, so the first attempt
 * (font-weight only) turned every payslip label into small grey uppercase
 * text. That was caught by looking at a screenshot, not by the DOM checks,
 * which reported the weight as correct and said nothing about the rest.
 *
 * The markup carries the meaning; appearance stays exactly as it was, and the
 * rows that WANT emphasis still get it from their own `fw-bold` class.
 */
main table th[scope="row"] {
  font-weight: inherit;
  color: inherit;
  text-transform: none;
  font-size: inherit;
  letter-spacing: normal;
}