/*
 * massiv-theme.css — Bootstrap 5 overrides and MassIV-specific enhancements.
 * Loaded AFTER bootstrap.min.css and BEFORE portal.css so portal.css can
 * still override individual layout rules without fighting Bootstrap defaults.
 *
 * What lives here:
 *   - CSS variable overrides (Bootstrap primary color → MassIV blue)
 *   - 3D button press effect (gradient + box-shadow + transform)
 *   - Table appearance overrides (border-radius, box-shadow to match portal style)
 *   - Badge appearance overrides (text-transform, letter-spacing)
 *   - Alert sizing overrides (match old validation-error/success sizing)
 *   - form-text sizing
 */

/* ===== BOOTSTRAP COLOR VARIABLES ===== */
/* Without these overrides Bootstrap uses its default indigo-blue (#0d6efd).
   Overriding here means every btn-primary, badge bg-primary, link, etc.
   automatically picks up the MassIV blue without per-component rules. */
:root {
    --bs-primary:              #3498db;
    --bs-primary-rgb:          52, 152, 219;
    --bs-link-color:           #3498db;
    --bs-link-hover-color:     #2980b9;
    --bs-link-color-rgb:       52, 152, 219;
    --bs-border-radius:        0.4rem;
    --bs-border-radius-lg:     0.6rem;
    --bs-border-radius-sm:     0.25rem;
    --bs-body-font-size:       0.95rem;
    --bs-body-font-family:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-font-sans-serif:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Antialiased rendering — Inter is designed for it; without this it looks heavy on Mac/Windows */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 3D BUTTON SYSTEM =====
   Buttons visually "press down" on click: translateY raises/lowers the button
   face while box-shadow shrinks to simulate depth compression.
   Each variant gets its own shadow color keyed to its brand color. */
.btn {
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
    position: relative;
}

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

.btn:active:not(:disabled):not(.disabled),
.btn.active:not(:disabled):not(.disabled) {
    transform: translateY(2px);
}

/* ── btn-primary ── */
.btn-primary {
    --bs-btn-bg:              #3498db;
    --bs-btn-border-color:    #2980b9;
    --bs-btn-hover-bg:        #2980b9;
    --bs-btn-hover-border-color: #2471a3;
    --bs-btn-active-bg:       #2471a3;
    --bs-btn-active-border-color: #1a6fa8;
    --bs-btn-disabled-bg:     #3498db;
    background: linear-gradient(180deg, #5dade2 0%, #3498db 55%, #2980b9 100%);
    box-shadow: 0 3px 0 #1a6fa8;
    border: none;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #6bb8e8 0%, #3498db 50%, #2471a3 100%);
    box-shadow: 0 4px 0 #1a6fa8;
    color: #fff;
}

.btn-primary:active:not(:disabled) {
    background: linear-gradient(180deg, #3498db 0%, #2980b9 100%);
    box-shadow: 0 1px 0 #1a6fa8;
}

/* ── btn-secondary ── */
.btn-secondary {
    --bs-btn-bg:              #e2e3e5;
    --bs-btn-color:           #333;
    --bs-btn-border-color:    #c8cacd;
    --bs-btn-hover-bg:        #d0d1d3;
    --bs-btn-hover-color:     #333;
    --bs-btn-hover-border-color: #bbbcbf;
    --bs-btn-active-bg:       #c0c1c3;
    --bs-btn-active-color:    #333;
    background: linear-gradient(180deg, #f0f0f2 0%, #e2e3e5 55%, #d0d1d3 100%);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
    border: none;
    color: #333;
}

.btn-secondary:hover:not(:disabled) {
    background: linear-gradient(180deg, #e5e6e8 0%, #d6d8da 50%, #c4c5c7 100%);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
    color: #333;
}

.btn-secondary:active:not(:disabled) {
    background: linear-gradient(180deg, #d0d1d3 0%, #c0c1c3 100%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    color: #333;
}

/* ── btn-warning ── */
.btn-warning {
    --bs-btn-bg:              #f39c12;
    --bs-btn-color:           #fff;
    --bs-btn-border-color:    #e08e0b;
    --bs-btn-hover-bg:        #e08e0b;
    --bs-btn-hover-color:     #fff;
    --bs-btn-active-bg:       #d68910;
    background: linear-gradient(180deg, #f5b942 0%, #f39c12 55%, #d68910 100%);
    box-shadow: 0 3px 0 #b7770d;
    border: none;
    color: #fff;
}

.btn-warning:hover:not(:disabled) {
    background: linear-gradient(180deg, #f6c252 0%, #e08e0b 50%, #c57d10 100%);
    box-shadow: 0 4px 0 #b7770d;
    color: #fff;
}

.btn-warning:active:not(:disabled) {
    background: linear-gradient(180deg, #f39c12 0%, #d68910 100%);
    box-shadow: 0 1px 0 #b7770d;
    color: #fff;
}

/* ── btn-danger ── */
.btn-danger {
    --bs-btn-bg:              #e74c3c;
    --bs-btn-border-color:    #c0392b;
    --bs-btn-hover-bg:        #c0392b;
    --bs-btn-active-bg:       #a93226;
    background: linear-gradient(180deg, #ec6e61 0%, #e74c3c 55%, #c0392b 100%);
    box-shadow: 0 3px 0 #9b2c2c;
    border: none;
}

.btn-danger:hover:not(:disabled) {
    background: linear-gradient(180deg, #f07870 0%, #e74c3c 50%, #a93226 100%);
    box-shadow: 0 4px 0 #9b2c2c;
    color: #fff;
}

.btn-danger:active:not(:disabled) {
    background: linear-gradient(180deg, #e74c3c 0%, #a93226 100%);
    box-shadow: 0 1px 0 #9b2c2c;
}

/* ── btn-outline-danger (used for sign-out links) ── */
.btn-outline-danger {
    --bs-btn-color:              #e74c3c;
    --bs-btn-border-color:       #e74c3c;
    --bs-btn-hover-bg:           #e74c3c;
    --bs-btn-hover-border-color: #e74c3c;
    box-shadow: 0 2px 0 rgba(231, 76, 60, 0.3);
}

.btn-outline-danger:active:not(:disabled) {
    box-shadow: 0 1px 0 rgba(231, 76, 60, 0.3);
}

/* ===== TABLE OVERRIDES =====
   Bootstrap's .table is flat. Wrap it with a white card + subtle shadow
   so it matches the old .data-table look without portal.css needing to
   redefine every th/td rule. */
.table {
    background: #fff;
    margin-bottom: 0;
}

/* Border-radius + overflow:hidden must be on a wrapper — the table element
   itself can't clip its own corners. Wrap with .table-responsive or a div
   if needed, OR add a card container in portal.css. For now, use outline. */
.table-hover > tbody > tr:hover > * {
    background-color: #f8f9ff;
    --bs-table-accent-bg: transparent;
}

.table > thead > tr > th {
    background: #f8f9fa;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    border-bottom: 2px solid #e1e4e8 !important;
    padding: 12px 15px;
    font-weight: 600;
}

.table > tbody > tr > td {
    padding: 12px 15px;
    font-size: 0.9em;
    color: #333;
    vertical-align: middle;
}

/* Wraps Bootstrap tables to add card appearance */
.table-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

/* ===== BADGE OVERRIDES =====
   Bootstrap badges are small pills. Extend them to match the old
   .status-badge style: uppercase, wider padding, rounded pill shape. */
.badge {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72em;
}

/* ===== ALERT OVERRIDES =====
   Bootstrap alerts default to large block padding. Shrink them to match
   the old .validation-error / .validation-success inline sizing. */
.alert {
    font-size: 0.85em;
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 10px;
    margin-bottom: 0;
}

.alert-danger {
    color: #e74c3c;
    background: #fdf0ef;
    border-color: #f5c2be;
}

.alert-success {
    color: #155724;
    background: #d4edda;
    border-color: #c3e6cb;
}

/* ===== FORM TEXT =====
   Bootstrap's .form-text defaults to 0.875em. Match our old .form-hint. */
.form-text {
    font-size: 0.8em;
    color: #999;
    margin-top: 3px;
}

/* ===== FORM CONTROL FOCUS =====
   Override Bootstrap's default blue focus ring to use MassIV blue. */
.form-control:focus,
.form-select:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

/* ===== STAT CARD ACCENT =====
   Colored top border + subtle shadow lifts stat cards off the page background.
   Applied as an additive modifier on .stat-card — removing it reverts to flat. */
.stat-card-accent {
    border-top: 3px solid #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.10);
}

/* ===== STAT CARD ENTRANCE ANIMATION =====
   Cards pop in with a slight overshoot bounce — cubic-bezier spring curve.
   Without this they just appear; the pop-in signals "new data loaded." */
@keyframes stat-card-popin {
    0%   { opacity: 0; transform: translateY(16px) scale(0.97); }
    60%  { opacity: 1; transform: translateY(-3px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

.stat-card {
    animation: stat-card-popin 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Stagger each card by 80ms so they arrive left-to-right instead of all at once */
.stats-grid .stat-card:nth-child(1) { animation-delay: 0.05s; }
.stats-grid .stat-card:nth-child(2) { animation-delay: 0.13s; }
.stats-grid .stat-card:nth-child(3) { animation-delay: 0.21s; }
.stats-grid .stat-card:nth-child(4) { animation-delay: 0.29s; }
.stats-grid .stat-card:nth-child(5) { animation-delay: 0.37s; }

/* ===== TABLE ROW HOVER TRANSITION =====
   Smooth color fade instead of instant flash — softer on the eye when scanning rows. */
.table > tbody > tr {
    transition: background-color 0.15s ease;
}