/* Partials are linked individually from templates/base.html (parallel
   downloads instead of an @import waterfall). Keep that list in sync. */
/**
 * Main CSS Entry Point
 * Urban League of San Diego County Management System
 * 
 * Architecture follows ITCSS (Inverted Triangle CSS) methodology
 * @reference: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
 * 
 * Layer Structure:
 * 1. Settings - Variables, config
 * 2. Tools - Mixins, functions (not used in CSS, would be in Sass)
 * 3. Generic - Reset, normalize
 * 4. Elements - Base HTML elements
 * 5. Objects - Layout patterns, grids
 * 6. Components - Specific UI components
 * 7. Utilities - Helper classes
 */

/* ========================================
   Layer 1: Settings (Variables)
   ======================================== */

/* ========================================
   Layer 2 & 3: Generic (Reset & Normalize)
   ======================================== */

/* ========================================
   Layer 4 & 5: Layout Components
   ======================================== */

/* ========================================
   Layer 6: Components
   ======================================== */

/* ========================================
   Layer 6: Common Components
   ======================================== */

/* ========================================
   Bootstrap Overrides — Typography & Contrast
   ======================================== */

:root {
    --bs-secondary-color: rgba(33, 37, 41, 0.8);
}

body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.small,
small {
    font-size: var(--font-size-sm);
}

.table {
    font-size: var(--font-size-base);
}

.form-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.375rem;
}

.form-control,
.form-select {
    font-size: var(--font-size-base);
    min-height: 2.75rem;
    background-color: var(--color-gray-50);
    transition: border-color var(--transition-base) var(--ease-out),
                box-shadow var(--transition-base) var(--ease-out);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: none;
    background-color: var(--color-gray-50);
}

.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Height-match filter inputs (2.75rem) — apply only to filter form buttons, not general buttons */
.btn-filter {
    min-height: 2.75rem;
    padding-inline: 1rem;
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-form .input-group-text {
    padding-inline: 0.625rem;
    background-color: var(--color-gray-50);
    border-inline-end: 0;
    transition: border-color var(--transition-base) var(--ease-out);
}

.filter-form .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
}

.filter-form .input-group .form-control {
    border-inline-start: 0;
    padding-inline-start: 0.25rem;
}

.text-muted {
    color: rgba(33, 37, 41, 0.7) !important;
}

/* ========================================
   Button System Overrides
   ======================================== */

.btn {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    letter-spacing: 0.01em;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
                transform 0.15s ease-in-out;
}

.btn-primary,
.btn-danger {
    --bs-btn-font-weight: 600;
}

.btn-sm {
    --bs-btn-padding-y: 0.3125rem;
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-border-radius: 0.375rem;
}

/* Touch screens: small buttons get a 44px hit area (WCAG 2.5.5 / Apple HIG)
   without changing their look on mouse-driven desktops. */
@media (pointer: coarse) {
    .btn-sm {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.btn-lg {
    --bs-btn-border-radius: 0.5rem;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: none;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.25);
    transform: translateY(0);
}

.btn-outline-secondary:hover:not(:disabled),
.btn-outline-primary:hover:not(:disabled) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.btn-danger:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(var(--bs-danger-rgb), 0.3);
    transform: translateY(-1px);
}

/* Suppress lift transform inside button groups — buttons shift independently and break alignment */
.btn-group .btn:hover:not(:disabled),
.btn-group .btn:active:not(:disabled) {
    transform: none;
    box-shadow: none;
}

.btn-danger:active:not(:disabled) {
    box-shadow: 0 2px 6px rgba(var(--bs-danger-rgb), 0.2);
    transform: translateY(0);
}

/* Spinners inside solid-color buttons must use the button's foreground color explicitly,
   since currentColor can resolve incorrectly in certain cascade contexts */
.btn-primary .spinner-border,
.btn-primary .spinner-grow {
    color: var(--color-white);
}

.btn-danger .spinner-border,
.btn-danger .spinner-grow {
    color: var(--color-white);
}

/* Bootstrap Overrides */
.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-disabled-color: var(--color-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-primary);
}

.text-primary {
    color: var(--color-primary) !important;
}

.nav-link.active {
    font-weight: var(--font-weight-semibold);
}

.nav-link.active i {
    color: var(--color-primary) !important;
}

/* Legend Styling */
legend {
    font-size: var(--font-size-base);
}


.content-header {
    border-bottom: 1px solid var(--color-gray-300);
}

/* ========================================
   Layer 7: Utility Classes
   ======================================== */

.text-truncate-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Avatar Sizes */
.avatar-lg {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

/* Border Utilities */
.border-br-3 {
    border-bottom-left-radius: var(--radius-base) !important;
    border-bottom-right-radius: var(--radius-base) !important;
}

.bdr {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Callout Component */
/* Django messages toast — fixed below navbar, centered */
.messages-container {
    position: fixed;
    top: var(--navbar-height);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-index-modal);
    padding: var(--space-3);
    width: 100%;
    max-width: 480px;
    pointer-events: none;
}

/* Fixed-position elements ignore the sidebar's padding-left on <body>
   (layout/sidebar.css), so on desktop this centers on the full viewport
   instead of the visible main content area to the right of the sidebar.
   Shift the center point by half the sidebar's width to compensate —
   only when the sidebar is actually present (body:not(.no-sidebar)),
   matching the same condition/breakpoint that pushes <body>'s content. */
@media (min-width: 768px) {
    body:not(.no-sidebar) .messages-container {
        left: calc(50% + (var(--sidebar-width) / 2));
    }
}

.messages-container .alert {
    pointer-events: auto;
}

.callout {
    padding: var(--space-5);
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
    background-color: rgba(var(--callout-rgb), 0.1);
    border-left: 0.25rem solid var(--callout-color);
    border-radius: var(--radius-base);
}

.callout-primary   { --callout-color: var(--bs-primary);   --callout-rgb: var(--bs-primary-rgb); }
.callout-secondary { --callout-color: var(--bs-secondary); --callout-rgb: var(--bs-secondary-rgb); }
.callout-success   { --callout-color: var(--bs-success);   --callout-rgb: var(--bs-success-rgb); }
.callout-danger    { --callout-color: var(--bs-danger);     --callout-rgb: var(--bs-danger-rgb); }
.callout-warning   { --callout-color: var(--bs-warning);   --callout-rgb: var(--bs-warning-rgb); }
.callout-info      { --callout-color: var(--bs-info);       --callout-rgb: var(--bs-info-rgb); }

/* ========================================
   Common Patterns & Components
   ======================================== */

/* Smooth Transitions */
.fade-in {
    animation: fadeIn 0.5s var(--ease-out);
}

/* Focus Visible for Accessibility */
.form-control-modern:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .form-control-modern {
        border-width: 3px;
    }
}

/* jSignature canvas */
.jsign-wrapper {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--color-white);
    overflow: hidden;
}

.jsign-container canvas {
    display: block;
}

.signature-error {
  border: 2px solid var(--color-danger) !important;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(var(--color-danger-rgb), 0.4);
}

.sig-error-msg {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
  display: none;
}

/* Compact icon-only button (row actions). 32px square keeps it above the
   24px minimum touch target without growing the row. */
.btn-icon-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: var(--font-size-sm);
}

/* Case checklist: larger checkbox; the label beside it is also clickable. */
.checklist-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* ========================================
   Utilities — replace repeated inline styles with token-based classes
   ======================================== */
.text-2xs { font-size: var(--font-size-2xs); }
.text-xs { font-size: var(--font-size-xs); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-900 { color: var(--color-gray-900); }

.rounded-top-2xl { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.rounded-bottom-2xl { border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); }

/* Text */
.text-sm { font-size: var(--font-size-sm); }
.text-meta { font-size: 0.8rem; color: var(--color-gray-700); }
.title-sm {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2);
}
/* Small uppercase field / section label (dashboards, metrics filters) */
.label-caps {
    font-size: var(--font-size-xs);
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Icon sizes */
.fs-icon-md { font-size: 1.5rem; }
.fs-icon-lg { font-size: 2rem; }
.fs-icon-xl { font-size: 2.5rem; }

/* Fixed square boxes (avatars, icon circles, dots) */
.box-8 { width: 8px; height: 8px; }
.box-40 { width: 40px; height: 40px; }
.box-56 { width: 56px; height: 56px; }
.box-96 { width: 96px; height: 96px; }
.box-5rem { width: 5rem; height: 5rem; }

/* Layout */
.flex-1 { flex: 1; }
.d-contents { display: contents; }
.mw-560 { max-width: 560px; }
.mw-page { max-width: 1440px; margin: auto; }
.h-240 { height: 240px; }
.mb-section { margin-bottom: 2rem; }
.list-indent { padding-left: 1.25rem; margin-top: var(--space-2); }
.scroll-100 { max-height: 100px; overflow-y: auto; }
.cursor-pointer { cursor: pointer; }
.bg-gray-100 { background: var(--color-gray-100); }

/* Surfaces */
.stat-tile {
    background: var(--color-gray-50);
    border-radius: 8px;
    padding: 10px 12px;
}

.tile-link {
    background: var(--color-gray-50);
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-gray-900);
    transition: background-color var(--transition-fast) var(--ease-out);
}

/* Chart area with no data */
.chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

/* Compact controls (metrics / reporter filter strips) */
.input-compact {
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-gray-300);
    border-radius: 6px;
    padding: 5px 8px;
}

.btn-compact {
    font-size: var(--font-size-xs);
    padding: 5px 12px;
}

/* Thin progress track (tables, inline meters) */
.progress-thin { height: 6px; }

/* Chart legend colour swatch; set the colour with background:var(--chart-N) */
.legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
}

/* Inline success confirmation (HTMX results). Emphasis text on the success
   tint passes 4.5:1; plain --bs-success does not. */
.inline-success {
    background: var(--bs-success-bg-subtle);
    border: 1px solid var(--bs-success-border-subtle);
    color: var(--bs-success-text-emphasis);
    font-size: var(--font-size-sm);
}

/* Split phone / SSN inputs (apps/common/widgets.py) */
.phone-part,
.ssn-part {
    display: inline-block;
    text-align: center;
    margin: 0 2px;
}

.phone-part--3 { width: 4em; }
.phone-part--4 { width: 5em; }

/* Bootstrap's .text-secondary (#6c757d) is 4.45:1 on the gray-50 page
   background. gray-700 passes on every surface the app uses. */
.text-secondary {
    color: var(--color-gray-700) !important;
}

/* Keyboard-focusable tooltip hosts (badges / icons with data-bs-toggle) */
[data-bs-toggle="tooltip"][tabindex="0"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Lets a flex/grid child shrink below its content width so .text-truncate
   inside it can work (used in dashboard list rows). */
.min-width-0 { min-width: 0; }

/* Long lists inside a card (e.g. developer log entries): scroll in place. */
.scroll-panel {
    max-height: 32rem;
    overflow-y: auto;
}

.scroll-panel:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}