/* ================================================================
   WAWF Application Styles – U.S. Web Design System (USWDS 3.x)
   https://designsystem.digital.gov
   ================================================================ */

/* ── USWDS Design Tokens ───────────────────────────────────────── */
:root {
    --usa-primary:         #005ea2;
    --usa-primary-dark:    #1a4480;
    --usa-primary-darker:  #162e51;
    --usa-primary-light:   #d9e8f6;
    --usa-primary-lighter: #eff6fb;
    --usa-secondary:       #d83933;
    --usa-success:         #00a91c;
    --usa-warning:         #ffbe2e;
    --usa-error:           #d54309;
    --usa-info:            #00bde3;
    --usa-base:            #1b1b1b;
    --usa-base-dark:       #3d4551;
    --usa-base-mid:        #71767a;
    --usa-base-light:      #f0f0f0;
    --usa-base-lightest:   #f9f9f9;
    --usa-border:          #a9aeb1;
    --usa-border-light:    #dfe1e2;

    /* Backward-compatible aliases (used in existing page components) */
    --apple-blue:          var(--usa-primary);
    --apple-blue-dark:     var(--usa-primary-dark);
    --apple-green:         var(--usa-success);
    --apple-orange:        #e66a00;
    --apple-red:           var(--usa-error);
    --apple-yellow:        var(--usa-warning);
    --apple-purple:        #7b22b4;
    --apple-teal:          var(--usa-info);
    --apple-indigo:        #3d52af;

    --apple-gray-1:  #f9f9f9;
    --apple-gray-2:  #f0f0f0;
    --apple-gray-3:  #dfe1e2;
    --apple-gray-4:  #c9c9c9;
    --apple-gray-5:  #a9aeb1;
    --apple-gray-6:  #71767a;
    --apple-gray-7:  #565c65;
    --apple-gray-8:  #3d4551;
    --apple-gray-9:  #2d2e2f;
    --apple-gray-10: #1b1b1b;

    --apple-bg-primary:   #ffffff;
    --apple-bg-secondary: #f9f9f9;
    --apple-bg-tertiary:  #f0f0f0;

    --apple-text-primary:   #1b1b1b;
    --apple-text-secondary: #565c65;
    --apple-text-tertiary:  #71767a;

    --apple-border-color:  #dfe1e2;
    --apple-divider-color: #dfe1e2;

    /* USWDS uses minimal rounding */
    --apple-radius-sm: 4px;
    --apple-radius-md: 4px;
    --apple-radius-lg: 4px;
    --apple-radius-xl: 4px;

    --apple-shadow-sm: 0 1px 3px rgba(0,0,0,0.10);
    --apple-shadow-md: 0 2px 6px rgba(0,0,0,0.14);
    --apple-shadow-lg: 0 4px 12px rgba(0,0,0,0.16);

    --apple-spacing-xs:  8px;
    --apple-spacing-sm:  12px;
    --apple-spacing-md:  16px;
    --apple-spacing-lg:  24px;
    --apple-spacing-xl:  32px;
    --apple-spacing-xxl: 48px;
}

/* ── Typography ─────────────────────────────────────────────────── */
html, body {
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--usa-base);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    color: var(--usa-base);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus { outline: none; }

p { color: var(--apple-text-secondary); margin-bottom: 1rem; }

a { color: var(--usa-primary); text-decoration: underline; }
a:hover { color: var(--usa-primary-dark); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
    font-family: 'Public Sans', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: 2px solid transparent;
    letter-spacing: 0;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.1s, box-shadow 0.1s, color 0.1s;
}

.btn-primary {
    background-color: var(--usa-primary);
    border-color: var(--usa-primary);
    color: white;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--usa-primary-dark);
    border-color: var(--usa-primary-dark);
    color: white;
}

.btn-outline-primary {
    background-color: transparent;
    border: 2px solid var(--usa-primary);
    color: var(--usa-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--usa-primary);
    border-color: var(--usa-primary);
    color: white;
}

.btn-success {
    background-color: var(--usa-success);
    border-color: var(--usa-success);
    color: white;
}
.btn-success:hover { background-color: #007a12; border-color: #007a12; color: white; }

.btn-warning {
    background-color: var(--usa-warning);
    border-color: var(--usa-warning);
    color: #1b1b1b;
}

.btn-danger {
    background-color: var(--usa-error);
    border-color: var(--usa-error);
    color: white;
}
.btn-danger:hover { background-color: #b51d09; border-color: #b51d09; color: white; }

.btn-secondary {
    background-color: var(--apple-gray-3);
    border-color: var(--apple-gray-3);
    color: var(--usa-base);
}
.btn-secondary:hover { background-color: var(--apple-gray-5); border-color: var(--apple-gray-5); color: white; }

.btn-outline-secondary {
    border: 2px solid var(--apple-gray-5);
    color: var(--usa-base);
    background-color: transparent;
}
.btn-outline-secondary:hover { background-color: var(--apple-gray-5); color: white; }

.btn-sm { font-size: 0.8125rem; padding: 0.25rem 0.625rem; }
.btn-lg { font-size: 1.0625rem; padding: 0.75rem 1.5rem; }

/* ── Forms ───────────────────────────────────────────────────────── */
.form-label {
    font-family: 'Public Sans', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--usa-base);
    margin-bottom: 4px;
    display: block;
}

.form-control, .form-select {
    font-family: 'Public Sans', Arial, sans-serif;
    border: 1px solid var(--usa-border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: var(--usa-base);
    background-color: #ffffff;
    transition: border-color 0.1s, box-shadow 0.1s;
    line-height: 1.4;
    height: auto;
}

.form-control:focus, .form-select:focus {
    border-color: var(--usa-primary);
    box-shadow: 0 0 0 3px rgba(0, 94, 162, 0.25);
    outline: 2px solid transparent;
}

.form-control::placeholder { color: var(--apple-gray-6); }
.form-control-sm, .form-select-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
    background: #ffffff;
    border: 1px solid var(--usa-border-light);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.card-header {
    background-color: var(--apple-gray-2);
    border-bottom: 1px solid var(--usa-border-light);
    font-weight: 700;
    padding: 0.75rem 1.25rem;
}

.card-body { padding: 1.25rem; }

.card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--usa-base);
    margin-bottom: 0;
}

.apple-hover-lift { transition: box-shadow 0.15s, transform 0.15s; cursor: pointer; }
.apple-hover-lift:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-1px); }

/* ── Tables ──────────────────────────────────────────────────────── */
.table {
    font-family: 'Public Sans', Arial, sans-serif;
    font-size: 0.9375rem;
    border-collapse: collapse;
    width: 100%;
    color: var(--usa-base);
}

.table th {
    background-color: var(--usa-primary-darker);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--usa-primary-dark);
    white-space: nowrap;
}

.table td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--usa-border-light);
    vertical-align: middle;
}

.table tbody tr:nth-child(even) { background-color: #f9f9f9; }
.table tbody tr:hover, .table-hover tbody tr:hover {
    background-color: var(--usa-primary-lighter) !important;
}

/* ── Alerts ──────────────────────────────────────────────────────── */
.alert {
    border-radius: 4px;
    border-left: 4px solid;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
}

.alert-info    { background-color: #e7f6f8; border-color: var(--usa-info);    color: #00687d; }
.alert-success { background-color: #ecf3ec; border-color: var(--usa-success); color: #154c21; }
.alert-warning { background-color: #faf3d1; border-color: var(--usa-warning); color: #775218; }
.alert-danger  { background-color: #f8ece0; border-color: var(--usa-error);   color: #922b0e; }

/* ── Badges / Status Tags ────────────────────────────────────────── */
.badge {
    font-family: 'Public Sans', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3em 0.65em;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bg-primary   { background-color: var(--usa-primary) !important; color: white !important; }
.bg-success   { background-color: var(--usa-success) !important; color: white !important; }
.bg-warning   { background-color: var(--usa-warning) !important; color: #1b1b1b !important; }
.bg-danger    { background-color: var(--usa-error) !important;   color: white !important; }
.bg-secondary { background-color: var(--apple-gray-6) !important; color: white !important; }
.bg-info      { background-color: var(--usa-info) !important;    color: white !important; }

/* ── Modals ──────────────────────────────────────────────────────── */
.modal-header {
    background-color: var(--usa-primary);
    color: #ffffff;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}
.modal-header .btn-close { filter: invert(1); }
.modal-title { font-weight: 700; font-size: 1.125rem; color: #ffffff; }
.modal-content { border-radius: 4px; border: none; box-shadow: 0 4px 24px rgba(0,0,0,0.2); }
.modal-footer { background-color: var(--apple-gray-2); border-top: 1px solid var(--usa-border-light); }

/* ── Spinners & Status Colors ────────────────────────────────────── */
.spinner-border, .spinner-border.text-primary { color: var(--usa-primary) !important; }
.text-primary { color: var(--usa-primary) !important; }
.text-success { color: var(--usa-success) !important; }
.text-danger  { color: var(--usa-error) !important; }
.text-warning { color: var(--usa-warning) !important; }
.text-muted   { color: var(--apple-text-secondary) !important; }

/* ── Pagination ──────────────────────────────────────────────────── */
.page-link {
    color: var(--usa-primary);
    border-color: var(--usa-border);
    font-size: 0.9375rem;
}
.page-link:hover { background-color: var(--usa-primary-lighter); color: var(--usa-primary-dark); }
.page-item.active .page-link { background-color: var(--usa-primary); border-color: var(--usa-primary); }

/* ── Dashboard Metric Cards ──────────────────────────────────────── */
.v2-dashboard-card { border: 1px solid var(--usa-border-light); }
.v2-metric-card {
    border-radius: 4px;
    border: 1px solid var(--usa-border-light);
    background: #ffffff;
}
.v2-metric-card-body { padding: 1rem; text-align: center; }
.v2-metric-card-value {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.25rem 0;
    line-height: 1;
}
.v2-metric-card-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--apple-text-secondary);
    margin: 0;
}
.v2-metric-card-icon { font-size: 1.5rem; display: block; margin-bottom: 0.25rem; }

.v2-metric-card-blue   { border-top: 3px solid var(--usa-primary); }
.v2-metric-card-green  { border-top: 3px solid var(--usa-success); }
.v2-metric-card-orange { border-top: 3px solid var(--apple-orange); }
.v2-metric-card-red    { border-top: 3px solid var(--usa-error); }
.v2-metric-card-teal   { border-top: 3px solid var(--usa-info); }
.v2-metric-card-purple { border-top: 3px solid var(--apple-purple); }

.v2-metric-value-blue   { color: var(--usa-primary); }
.v2-metric-value-green  { color: var(--usa-success); }
.v2-metric-value-orange { color: var(--apple-orange); }
.v2-metric-value-red    { color: var(--usa-error); }
.v2-metric-value-teal   { color: var(--usa-info); }
.v2-metric-value-purple { color: var(--apple-purple); }
.v2-metric-icon-blue    { color: var(--usa-primary); }
.v2-metric-icon-green   { color: var(--usa-success); }
.v2-metric-icon-orange  { color: var(--apple-orange); }
.v2-metric-icon-red     { color: var(--usa-error); }
.v2-metric-icon-teal    { color: var(--usa-info); }
.v2-metric-icon-purple  { color: var(--apple-purple); }

/* ── Focus rings ─────────────────────────────────────────────────── */
*:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }
*:focus-visible { outline: 3px solid var(--usa-primary); outline-offset: 2px; }