/* EngTime on the Tindall design system.

   tindall/tokens.css and tindall/bundle.css are copied from the design system and supply the
   tokens and the t- components (t-btn, t-badge, t-table). This file is the bridge: it points
   the Bootstrap pieces EngTime still uses (grid, utilities, form controls, alerts, navbar,
   dropdowns, tabs, cards) at those tokens, and holds EngTime's own additions. Use token names
   here, never raw hex; Bootstrap's *-rgb variables need literal triplets, noted beside each. */

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("../fonts/Jost-latin-variable.928f4210aa48.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--accent-gray);
    --bs-body-color-rgb: 66, 85, 99; /* accent-gray */
    /* Bootstrap paints fields, checkboxes, dropdowns, and modals with --bs-body-bg, so it stays
       white; the gray-50 page background comes from .t-app (bundle.css). */
    --bs-body-bg: var(--white);
    --bs-heading-color: var(--accent-gray);
    --bs-secondary-color: var(--gray-600);
    --bs-border-color: var(--gray-200);
    --bs-link-color: var(--tindall-blue);
    --bs-link-color-rgb: 0, 103, 185; /* tindall-blue */
    --bs-link-hover-color: var(--tindall-blue-active);
    --bs-link-hover-color-rgb: 0, 74, 134; /* tindall-blue-active */
    --bs-primary: var(--tindall-blue);
    --bs-primary-rgb: 0, 103, 185; /* tindall-blue */
    --bs-success: var(--success);
    --bs-success-rgb: 30, 122, 70; /* success */
    --bs-danger: var(--danger);
    --bs-danger-rgb: 180, 35, 24; /* danger */
    --bs-warning: var(--warning);
    --bs-warning-rgb: 135, 83, 0; /* warning */

    --bs-border-radius: var(--radius-none);
    --bs-border-radius-sm: var(--radius-none);
    --bs-border-radius-lg: var(--radius-none);
    --bs-border-radius-xl: var(--radius-none);
    --bs-border-radius-xxl: var(--radius-none);
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
}

/* --- Focus: a solid ring everywhere, in place of Bootstrap's translucent glow (under 3:1). */

.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: none;
}

.form-control:focus-visible,
.form-select:focus-visible {
    outline-offset: 0;
    border-color: var(--focus-ring);
}

.navbar-tindall :focus-visible {
    outline-color: var(--focus-ring-inverse);
    outline-offset: -2px;
}

/* --- Type: App UI styles. Page titles in caps under a short orange rule; section
   headings in sentence case. */

.t-app h1 {
    margin-bottom: var(--space-6);
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.t-app h1::before {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin-bottom: var(--space-3);
    background-color: var(--accent-orange);
}

.t-app h1.text-center::before {
    margin-inline: auto;
}

.t-app h2,
.t-app .h5 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.t-app .small,
.t-app small {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.03em;
}

/* --- Environment banner (dev and test only), above everything. */

.t-env {
    padding-inline: var(--space-4);
}

/* --- Navbar: Accent Gray bar, white logo, current section on a Tindall Blue band. A top bar
   rather than the AppShell sidebar, since EngTime has only a handful of sections. */

.navbar-tindall {
    background-color: var(--accent-gray);
    padding-block: 0;
    --bs-navbar-color: var(--sky-blue);
    --bs-navbar-hover-color: var(--white);
    --bs-navbar-active-color: var(--white);
    --bs-navbar-brand-color: var(--white);
    --bs-navbar-brand-hover-color: var(--white);
}

.navbar-tindall .navbar-brand {
    gap: var(--space-3);
    padding-block: var(--space-2);
}

.navbar-tindall .navbar-brand-app {
    padding-left: var(--space-3);
    border-left: 1px solid var(--sky-blue);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sky-blue);
}

.navbar-tindall .nav-link {
    padding: var(--space-4) var(--space-3);
    transition: background-color var(--duration-fast) ease-out;
}

.navbar-tindall .nav-link:hover {
    background-color: var(--gray-800);
}

.navbar-tindall .nav-link.active {
    background-color: var(--tindall-blue);
}

/* Logged-out pages: blue logo on white. */
.site-header-app {
    padding-left: var(--space-3);
    border-left: 1px solid var(--accent-gray);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- Buttons: t-btn from bundle.css. EngTime additions below. */

/* A row of t-btn that reads as one segmented control (date ranges, week paging). */
.t-btn-group {
    display: inline-flex;
    flex-wrap: wrap;
}

.t-btn-group > .t-btn + .t-btn {
    margin-left: -2px;
}

/* Pressed toggle (engineering group filters). */
.t-btn--secondary[aria-pressed="true"] {
    background: var(--tindall-blue);
    color: var(--white);
}

/* Destructive text and icon buttons (remove a timesheet row). */
.t-btn--text.t-btn--danger-text {
    color: var(--danger);
}

/* Square icon-only button; always give it an aria-label. */
.t-btn--icon {
    width: var(--control-height-sm);
    min-height: var(--control-height-sm);
    padding: 0;
}

/* --- Form controls: Bootstrap's, drawn like t-input. */

.form-control,
.form-select {
    min-height: var(--control-height);
    font-size: 14px;
    color: var(--accent-gray);
    background-color: var(--white);
    border-color: var(--gray-500);
    transition: border-color var(--duration-fast) ease-out;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--accent-gray);
}

.form-control-sm,
.form-select-sm {
    min-height: var(--control-height-sm);
    font-size: 14px;
}

.form-control::placeholder {
    color: var(--gray-600);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--gray-100);
    color: var(--gray-600);
    border-color: var(--gray-200);
}

.form-label {
    font-weight: 500;
}

.form-text {
    font-size: 12px;
    color: var(--gray-600);
}

.form-check-input {
    border-color: var(--gray-500);
}

.form-check-input:checked {
    background-color: var(--tindall-blue);
    border-color: var(--tindall-blue);
}

/* Inline toolbar labels (e.g. "Week start:") stay on one line. */
.d-flex.align-items-center > label {
    margin-bottom: 0;
    white-space: nowrap;
}

code {
    color: var(--accent-gray);
    background-color: var(--gray-100);
    padding: 1px var(--space-1);
}

/* --- Dropdowns and tabs */

.dropdown-menu {
    --bs-dropdown-border-color: var(--gray-200);
    --bs-dropdown-link-color: var(--accent-gray);
    --bs-dropdown-link-hover-bg: var(--gray-100);
    --bs-dropdown-link-active-bg: var(--tindall-blue);
    --bs-dropdown-header-color: var(--gray-600);
    z-index: var(--z-dropdown);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--gray-200);
    --bs-nav-tabs-link-active-color: var(--accent-gray);
    --bs-nav-tabs-link-active-bg: var(--white);
    --bs-nav-tabs-link-active-border-color: var(--gray-200) var(--gray-200) var(--white);
    --bs-nav-tabs-link-hover-border-color: var(--gray-100) var(--gray-100) var(--gray-200);
}

/* --- Tables: t-table from bundle.css. Totals rows in Sky Blue, as in the decks. */

.t-table tbody tr.t-total td,
.t-table tbody tr td.t-total {
    background: var(--sky-blue);
    font-weight: 500;
}

.t-table tbody tr.t-total:hover td {
    background: var(--sky-blue);
}

/* Timesheet week and period status, as t-badge variants: open is info, complete is
   success, locked is neutral. */
.t-badge.status-open {
    color: var(--tindall-blue);
    background: var(--info-bg);
}

.t-badge.status-complete {
    color: var(--success);
    background: var(--success-bg);
}

.t-badge.status-locked {
    color: var(--accent-gray);
    background: var(--gray-100);
    border-color: var(--gray-200);
}

.t-table thead .t-th-sub {
    color: var(--sky-blue);
    letter-spacing: 0.03em;
    text-transform: none;
}

/* Inside a card the card's outline already frames the table. */
.card .t-table-wrap {
    border: 0;
}

/* --- Cards: a Tindall Blue bar across the top, Sky Blue outline. */

.card {
    --bs-card-border-color: var(--sky-blue);
    --bs-card-border-width: var(--card-outline);
    --bs-card-bg: var(--white);
    --bs-card-cap-bg: var(--white);
    border-top: 0;
}

/* A pseudo-element rather than border-top, so the bar's ends are square
   instead of mitered against the outline. */
.card::before {
    content: "";
    height: var(--card-bar);
    margin: 0 calc(-1 * var(--bs-card-border-width));
    background-color: var(--tindall-blue);
}

/* --- Alerts: status tints with accent-gray text (6.6:1 or better on each). */

.alert {
    --bs-alert-color: var(--accent-gray);
    --bs-alert-link-color: var(--tindall-blue);
}

.alert-info {
    --bs-alert-bg: var(--info-bg);
    --bs-alert-border-color: var(--tindall-blue);
}

.alert-success {
    --bs-alert-bg: var(--success-bg);
    --bs-alert-border-color: var(--success);
}

.alert-warning {
    --bs-alert-bg: var(--warning-bg);
    --bs-alert-border-color: var(--warning);
}

.alert-danger {
    --bs-alert-bg: var(--danger-bg);
    --bs-alert-border-color: var(--danger);
}

.progress {
    --bs-progress-bg: var(--gray-100);
    --bs-progress-bar-bg: var(--tindall-blue);
}

/* --- Needs-attention flag ("This week is incomplete", "Under 8"). */

.flag {
    color: var(--warning);
    font-weight: 500;
    white-space: nowrap;
}

/* warning is 4.46:1 on sky-blue, just short; the orange rule still marks the flag. */
.t-total .flag {
    color: var(--accent-gray);
}

.flag::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 4px;
    margin-right: var(--space-1);
    vertical-align: middle;
    background-color: var(--accent-orange);
}

/* --- Error pages (404.html): one message, one way back. */

.not-found {
    max-width: var(--form-max);
    padding-block: var(--space-12);
}

.not-found__code {
    margin-bottom: var(--space-2);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tindall-blue);
}

.not-found__lead {
    margin-bottom: var(--space-6);
    font-size: 16px;
    line-height: 24px;
}

.not-found__help {
    margin: var(--space-8) 0 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--gray-600);
}

/* --- htmx and avatars */

.htmx-indicator {
    opacity: 0;
    transition: opacity var(--duration-base) ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Avatars stay round: a photo or initials, not a brand graphic. */
.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 500;
    font-size: 14px;
    object-fit: cover;
    border: 0;
}

.avatar-toggle::after {
    display: none;
}