/* APPLE HIG - Layout, Cards, Alerts, Badges, Utilities */

html, body { overflow-y: auto; max-width: 100%; }
.container-fluid { max-width: 100%; overflow-x: hidden; }
.chart-container, .bb-chart-container { max-width: 100%; overflow: hidden; }
svg { max-width: 100%; height: auto; }
.content { padding-top: 1.25rem; }

/* Blazor loading */
.loading-progress {
    position: absolute; display: block;
    width: 8rem; height: 8rem;
    inset: 20vh 0 auto 0; margin: 0 auto;
}
.loading-progress circle {
    fill: none; stroke: var(--apple-fill-2);
    stroke-width: 0.6rem; transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--apple-blue);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute; text-align: center; font-weight: 600;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

#blazor-error-ui {
    color-scheme: light only;
    background: #fff2f2;
    border-top: 1px solid var(--apple-red);
    bottom: 0; box-sizing: border-box; display: none;
    left: 0; padding: 0.6rem 1.25rem 0.7rem;
    position: fixed; width: 100%; z-index: 1000;
    font-size: 0.875rem; color: var(--apple-red);
    border-radius: var(--apple-radius-sm) var(--apple-radius-sm) 0 0;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { background: var(--apple-red); padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: var(--apple-radius-md); }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---- Cards ---- */
.card {
    background-color: var(--apple-bg-2) !important;
    border: 1px solid var(--apple-separator) !important;
    border-radius: var(--apple-radius-lg) !important;
    box-shadow: var(--apple-shadow-sm) !important;
    transition: box-shadow 0.2s ease !important;
    animation: none !important;
}
.card:hover {
    box-shadow: var(--apple-shadow-md) !important;
    transform: none !important;
}
.card-header {
    background-color: var(--apple-fill-1) !important;
    border-bottom: 1px solid var(--apple-separator) !important;
    border-radius: var(--apple-radius-lg) var(--apple-radius-lg) 0 0 !important;
    font-weight: 600; font-size: 0.875rem;
    color: var(--apple-label) !important;
    padding: 0.875rem 1.25rem;
}
.card-body { padding: 1.25rem; }
.card-title { font-size: 0.9375rem; font-weight: 600; color: var(--apple-label); margin-bottom: 0; letter-spacing: -0.01em; }

/* ---- Alerts ---- */
.alert {
    border-radius: var(--apple-radius-md) !important;
    border: none !important;
    font-size: 0.875rem;
    padding: 0.875rem 1rem;
    animation: none !important;
}
.alert-info    { background-color: #e8f4fd !important; color: #0066cc !important; }
.alert-success { background-color: #eafaf0 !important; color: #1a7a3a !important; }
.alert-warning { background-color: #fff8e6 !important; color: #b36a00 !important; }
.alert-danger  { background-color: #fff2f2 !important; color: #cc2200 !important; }

/* ---- Badges ---- */
.badge {
    border-radius: 20px !important;
    font-size: 0.75rem; font-weight: 500;
    padding: 0.25rem 0.625rem;
    letter-spacing: 0;
}
.badge.bg-primary   { background-color: var(--apple-blue) !important; color: white !important; }
.badge.bg-secondary { background-color: var(--apple-fill-3) !important; color: var(--apple-label-2) !important; }
.badge.bg-success   { background-color: var(--apple-green) !important; color: white !important; }
.badge.bg-warning   { background-color: var(--apple-orange) !important; color: white !important; }
.badge.bg-danger    { background-color: var(--apple-red) !important; color: white !important; }
.badge.bg-info      { background-color: var(--apple-teal) !important; color: white !important; }
.badge.bg-light     { background-color: var(--apple-fill-1) !important; color: var(--apple-label) !important; }
.badge.bg-dark      { background-color: var(--apple-label-2) !important; color: white !important; }
.badge.bg-success-subtle { background-color: #E0F2F1 !important; color: #00695C !important; }

/* ---- Spinners ---- */
.spinner-border, .spinner-border-sm { color: var(--apple-blue) !important; }

/* ---- Utilities ---- */
hr { border-color: var(--apple-separator); opacity: 1; }
.text-muted   { color: var(--apple-label-3) !important; }
.text-primary { color: var(--apple-blue) !important; }
.text-success { color: var(--apple-green) !important; }
.text-danger  { color: var(--apple-red) !important; }
.text-warning { color: var(--apple-orange) !important; }
.bg-light     { background-color: var(--apple-fill-1) !important; }
.bg-white     { background-color: var(--apple-bg-2) !important; }
.border       { border: 1px solid var(--apple-separator) !important; }
.border-end   { border-right: 1px solid var(--apple-separator) !important; }
.rounded      { border-radius: var(--apple-radius-md) !important; }
.cursor-pointer { cursor: pointer; }
.hover-bg-light:hover { background-color: var(--apple-fill-1) !important; }

/* Validation */
.valid.modified:not([type=checkbox]) { outline: none; box-shadow: 0 0 0 2px rgba(52,199,89,0.35) !important; }
.invalid { outline: none; box-shadow: 0 0 0 2px rgba(255,59,48,0.35) !important; }
.validation-message { color: var(--apple-red); font-size: 0.75rem; margin-top: 0.25rem; }

/* Jumbotron */
.jumbotron.bg-primary {
    background: var(--apple-blue) !important;
    border-radius: var(--apple-radius-xl) !important;
    box-shadow: var(--apple-shadow-md) !important;
}

@media (max-width: 768px) { .chart-container { padding: 5px; } }