/*
 * Shared design tokens and accessibility styles, loaded after Bootstrap and
 * the legacy /styles.css on every page that includes partials/header.
 */
:root {
    --cs-primary: #0d6efd;
    --cs-primary-hover: #0b5ed7;
    --cs-primary-subtle: #e7f1ff;
    --cs-text: #212529;
    --cs-text-muted: #5c636a;       /* 6:1 on white; Bootstrap's #6c757d is 4.7:1 */
    --cs-border: #ced4da;
    --cs-border-strong: #8a9199;    /* >= 3:1 against white for form control edges */
    --cs-surface: #ffffff;
    --cs-surface-muted: #f8f9fa;
    --cs-danger: #b02a37;
    --cs-success: #146c43;
    --cs-warning: #997404;
    --cs-focus-ring: #0a58ca;
    --cs-radius: 0.5rem;
    --cs-font: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Skip link ---------- */
.cs-skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    padding: 0.75rem 1rem;
    background: var(--cs-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-120%);
    transition: transform 0.15s ease-in-out;
}
.cs-skip-link:focus,
.cs-skip-link:focus-visible {
    transform: translateY(0);
    color: #fff;
    outline: 3px solid #fff;
    outline-offset: -3px;
}
#main-content:focus {
    outline: none;
}

/* ---------- Visible keyboard focus everywhere ---------- */
:focus-visible {
    outline: 3px solid var(--cs-focus-ring);
    outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--cs-focus-ring) !important;
    outline-offset: 2px;
    box-shadow: none;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--cs-focus-ring) !important;
    outline-offset: 1px;
}

/* ---------- Form controls: clear edges and errors ---------- */
.form-control,
.form-select {
    border-color: var(--cs-border-strong);
}
.form-check-input {
    border-color: var(--cs-border-strong);
}
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
    border-color: var(--cs-danger);
}
.invalid-feedback,
.text-danger {
    color: var(--cs-danger) !important;
}
.text-muted {
    color: var(--cs-text-muted) !important;
}
.required-indicator,
.cs-required {
    color: var(--cs-danger);
}

/* ---------- Clickable cards rendered as links/buttons ---------- */
.cs-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    text-align: inherit;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
}
.cs-card-link:hover,
.cs-card-link:focus {
    color: inherit;
}

/* Section toggles converted from spans to buttons */
.cs-toggle-button {
    background: none;
    border: 0;
    padding: 0 0.25rem;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    align-self: auto;
}
.cs-toggle-button:hover {
    background: none;
}

/* ---------- Toasts ---------- */
.cs-toast-container {
    z-index: 2100;
    max-width: min(420px, calc(100vw - 2rem));
}
.cs-toast {
    color: #fff;
    min-width: 280px;
}
.cs-toast .toast-body {
    font-size: 0.95rem;
    white-space: normal;
    word-break: break-word;
}
.cs-toast .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.cs-toast-success { background: var(--cs-success); }
.cs-toast-danger  { background: var(--cs-danger); }
.cs-toast-warning { background: #ffc107; color: #212529; }
.cs-toast-warning .btn-close { filter: none; }
.cs-toast-info    { background: #055160; }

/* ---------- App revision badge (in the navbar, no longer overlapping the logo) ---------- */
.app-revision-badge {
    white-space: nowrap;
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--cs-text-muted);
    margin-top: 0.25rem;
}

/* ---------- Admin sidebar on small screens ---------- */
@media (max-width: 767.98px) {
    nav.sidebar.cs-admin-sidebar {
        min-height: 0 !important;
    }
}
.cs-sidebar-toggle {
    margin: 0.75rem 0 0;
}

/* ---------- Tables ---------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ---------- Visually hidden helper (Bootstrap 5.1 has it; kept for pages without Bootstrap) ---------- */
.cs-visually-hidden {
    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;
}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .dashboard-button:hover,
    .card:hover,
    .request-card:hover,
    .finance-card:hover {
        transform: none !important;
    }
}