/* ============================================================================
   SA Card System — unified, reusable, PREMIUM card design for the admin panel.
   Rich but clean: white cards + soft gradient washes, gradient icon badges,
   a colored edge accent per semantic, navy text, gold brand accent.
   Loaded globally (layouts/include.blade.php) so every page shares one system.

   Primitives:
     .sa-card            stat / metric card (icon badge + label + value)
     .sa-panel           section / chart / table wrapper card
     .sa-statlet(s)      compact mini-stat grid (e.g. Access Codes)
     .sa-table           clean dashboard table
     .sa-badge           count / status pill
     .sa-avatar(--ph)    logo avatar + placeholder
     .sa-empty           empty state (compact, soft)
     .sa-select          themed select (filters)
     .sa-i--{accent}     icon-badge accent (gold/success/danger/warning/info/neutral)
   ============================================================================ */

/* ---- Stat / metric card ---- */
.sa-card {
    --sa-bg: #ffffff;
    --sa-border: #E7E9F0;
    --sa-radius: 16px;
    --sa-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
    --sa-shadow-hover: 0 10px 26px rgba(16, 24, 40, .12);
    --sa-strong: #0F1B3D;   /* navy ink */
    --sa-muted: #667085;
    --sa-edge: #E7E9F0;     /* default edge accent */
    --sa-gold: #B7791F;
    --sa-success: #15803D;
    --sa-danger: #B42318;
    --sa-warning: #B54708;
    --sa-info: #175CD3;
    --sa-neutral: #475467;

    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(183, 121, 31, .04), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #FCFCFE 100%);
    border: 1px solid var(--sa-border);
    border-inline-start: 3px solid var(--sa-edge);
    border-radius: var(--sa-radius);
    padding: 18px 20px;
    box-shadow: var(--sa-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.sa-card:hover { transform: translateY(-4px); box-shadow: var(--sa-shadow-hover); }
.sa-card:focus-within { box-shadow: 0 0 0 3px rgba(183, 121, 31, .18), var(--sa-shadow); }

/* Larger, meaningful gradient icon badge */
.sa-card__icon {
    flex: 0 0 54px; width: 54px; height: 54px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 6px 14px rgba(16, 24, 40, .10);
}
.sa-card__icon i { opacity: 1 !important; }

.sa-card__body { min-width: 0; flex: 1 1 auto; }

.sa-card__label {
    display: block; font-size: 12.5px; font-weight: 600; color: var(--sa-muted);
    letter-spacing: .2px; margin: 0 0 5px; line-height: 1.3;
    text-transform: uppercase;
}
.sa-card__value {
    display: block; font-size: 29px; font-weight: 800; color: var(--sa-strong);
    line-height: 1.1; letter-spacing: -.6px; word-break: break-word;
}
.sa-card__cur { font-size: 16px; font-weight: 700; color: var(--sa-muted); margin-inline-start: 5px; white-space: nowrap; }
.sa-card__sub { display: block; font-size: 12px; color: var(--sa-muted); margin-top: 7px; font-weight: 500; }

.sa-card__progress { height: 7px; border-radius: 7px; background: #EEF1F6; overflow: hidden; margin-top: 11px; }
.sa-card__progress > span { display: block; height: 100%; border-radius: 7px;
    background: linear-gradient(90deg, #18A957, #15803D); transition: width .4s ease; }

/* ---- Gradient icon-badge accents (shared by .sa-card__icon and .sa-statlet__icon) ---- */
.sa-i--gold    { background: linear-gradient(135deg, #F7E4BC, #EFC878); color: #8A5A11; }
.sa-i--success { background: linear-gradient(135deg, #CFF3DC, #9CE3B8); color: #11703A; }
.sa-i--danger  { background: linear-gradient(135deg, #FBD9D5, #F6B4AC); color: #A32016; }
.sa-i--warning { background: linear-gradient(135deg, #FCE6C8, #F7CF93); color: #9A4708; }
.sa-i--info    { background: linear-gradient(135deg, #D4E6FC, #A9CBF7); color: #1551B8; }
.sa-i--neutral { background: linear-gradient(135deg, #E6E9F0, #CDD3E0); color: #3C4760; }

/* ---- Colored edge accent tied to the card's icon (no markup change needed) ---- */
.sa-card:has(.sa-i--gold)    { --sa-edge: #E0B15A; }
.sa-card:has(.sa-i--success) { --sa-edge: #34A853; }
.sa-card:has(.sa-i--danger)  { --sa-edge: #E0584B; }
.sa-card:has(.sa-i--warning) { --sa-edge: #E08A2B; }
.sa-card:has(.sa-i--info)    { --sa-edge: #4087E5; }
.sa-card:has(.sa-i--neutral) { --sa-edge: #8C97AE; }

/* ---- Section / chart / table panel ---- */
.sa-panel {
    background: linear-gradient(180deg, #ffffff 0%, #FCFCFE 100%);
    border: 1px solid #E7E9F0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
    padding: 20px 22px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.sa-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px;
    padding-bottom: 12px; border-bottom: 1px solid #F0F2F6; }
.sa-panel__title { font-size: 15.5px; font-weight: 700; color: #0F1B3D; margin: 0; display: flex; align-items: center; gap: 10px; line-height: 1.3; }
.sa-panel__title i {
    color: #B7791F; font-size: 15px; width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #F7E4BC, #EFC878);
}
.sa-panel__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ---- Themed select (filters in panel heads) ---- */
.sa-select {
    border: 1px solid #E2E6EF; border-radius: 10px; background: #fff; color: #0F1B3D;
    font-size: 13px; font-weight: 700; padding: 7px 12px; min-width: 100px; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sa-select:focus { outline: none; border-color: #B7791F; box-shadow: 0 0 0 3px rgba(183, 121, 31, .15); }

/* ---- Mini statlets (richer, soft tinted) ---- */
.sa-statlets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; flex: 1 1 auto; align-content: center; }
.sa-statlet {
    position: relative;
    border: 1px solid #EAEDF3; border-radius: 14px; padding: 20px 14px; text-align: center;
    background: linear-gradient(180deg, #FFFFFF, #FAFBFE);
    transition: transform .2s ease, box-shadow .2s ease;
}
.sa-statlet:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(16, 24, 40, .08); }
.sa-statlet__icon {
    width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; margin-bottom: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 5px 12px rgba(16, 24, 40, .10);
}
.sa-statlet__value { display: block; font-size: 27px; font-weight: 800; color: #0F1B3D; line-height: 1.05; letter-spacing: -.5px; }
.sa-statlet__label { display: block; font-size: 12px; color: #667085; font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: .2px; }
.sa-statlet:has(.sa-i--gold)    { background: linear-gradient(180deg, #FFFDF8, #FCF3E0); border-color: #F0E2C2; }
.sa-statlet:has(.sa-i--success) { background: linear-gradient(180deg, #F8FEFB, #E9F8EF); border-color: #CDEBD8; }
.sa-statlet:has(.sa-i--info)    { background: linear-gradient(180deg, #F8FBFF, #E9F2FD); border-color: #CEE0F8; }
.sa-statlet:has(.sa-i--warning) { background: linear-gradient(180deg, #FFFCF8, #FCF1E2); border-color: #F1DCBE; }
.sa-statlet:has(.sa-i--danger)  { background: linear-gradient(180deg, #FFFAF9, #FCEBE8); border-color: #F2D2CC; }

/* ---- Clean but solid table ---- */
.sa-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; margin: 0; }
.sa-table thead th {
    font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    color: #8A93A6; padding: 9px 12px; border-bottom: 1px solid #E7E9F0;
    background: #FAFBFD; white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.sa-table thead th:first-child { border-start-start-radius: 10px; }
.sa-table thead th:last-child { border-start-end-radius: 10px; }
.sa-table tbody td { padding: 11px 12px; border-bottom: 1px solid #F1F3F8; color: #344054; vertical-align: middle; }
.sa-table tbody tr:last-child td { border-bottom: none; }
.sa-table tbody tr { transition: background .15s ease; }
.sa-table tbody tr:hover { background: #FAFAFE; }
.sa-num { font-variant-numeric: tabular-nums; font-weight: 700; color: #0F1B3D; }

/* ---- Badges / chips ---- */
.sa-badge {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
    background: linear-gradient(135deg, #DFF5E8, #BFEBD0); color: #11703A; min-width: 38px;
    box-shadow: inset 0 0 0 1px rgba(17, 112, 58, .08);
}
.sa-badge--zero { background: #EEF1F6; color: #98A2B3; box-shadow: none; }
.sa-chip { display: inline-block; font-size: 11.5px; font-weight: 700; color: #475467;
    background: linear-gradient(135deg, #EEF1F7, #E3E8F1); border-radius: 7px; padding: 3px 10px; }

/* ---- Avatars + cell ---- */
.sa-avatar { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; border: 1px solid #E7E9F0; background: #F2F4F7; box-shadow: 0 2px 6px rgba(16, 24, 40, .06); }
.sa-avatar--ph {
    width: 38px; height: 38px; border-radius: 11px; border: 1px solid #E7E9F0;
    background: linear-gradient(135deg, #F2F4F8, #E6E9F1); color: #8893AB; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
}
.sa-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sa-cell__name { font-weight: 700; color: #0F1B3D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-muted { color: #98A2B3; font-style: italic; }

/* ---- Custom scroll ---- */
.sa-scroll { overflow: auto; }
.sa-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.sa-scroll::-webkit-scrollbar-thumb { background: #D6DAE4; border-radius: 8px; }
.sa-scroll::-webkit-scrollbar-thumb:hover { background: #BFC4D2; }
.sa-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---- Empty state (compact + soft) ---- */
.sa-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; min-height: 130px; }
.sa-empty__icon {
    width: 46px; height: 46px; border-radius: 13px;
    background: linear-gradient(135deg, #F2F4F8, #E6E9F1); color: #98A2B3;
    display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 10px;
}
.sa-empty__title { font-size: 13.5px; font-weight: 700; color: #475467; margin: 0 0 3px; }
.sa-empty__text { font-size: 12px; color: #98A2B3; margin: 0; max-width: 260px; line-height: 1.5; }

.sa-chart { min-height: 0; }

/* ---- Mini-stat grid that adapts to item count (summary widgets) ---- */
.sa-statlets--auto { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); }

/* ---- Quick-actions bar ---- */
.sa-actionbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    background: linear-gradient(180deg, #FFFDF8, #FCF6E9);
    border: 1px solid #F0E2C2; border-radius: 16px; padding: 14px 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.sa-actionbar__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #8A5A11; font-size: 13px; margin-inline-end: 4px; }
.sa-actionbar__label i { color: #B7791F; }
.sa-action {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 16px; border-radius: 10px;
    font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none;
    border: 1px solid #E2E6EF; background: #fff; color: #0F1B3D;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.sa-action i { font-size: 14px; }
.sa-action:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(16, 24, 40, .10); text-decoration: none; color: #0F1B3D; }
.sa-action:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(183, 121, 31, .25); }
/* primary action = gold filled */
.sa-action--primary { background: linear-gradient(135deg, #C68A24, #A9701A); border-color: #A9701A; color: #fff; }
.sa-action--primary:hover { color: #fff; box-shadow: 0 8px 18px rgba(169, 112, 26, .30); }
/* secondary action = soft navy tint */
.sa-action--secondary { background: #F4F6FB; border-color: #E2E6EF; color: #243B6B; }
.sa-action--secondary:hover { color: #243B6B; background: #EDF1F9; }
.sa-action--secondary i { color: #3A5CA8; }
/* ghost / neutral outline action */
.sa-action--ghost { background: transparent; border-color: #DCE0EA; color: #667085; }
.sa-action--ghost:hover { color: #475467; background: #F6F7FA; }
/* intentionally-disabled action */
.sa-action--muted { color: #98A2B3; background: #F6F7FA; border-color: #E7E9F0; }
.sa-action--muted:hover { transform: none; box-shadow: none; color: #98A2B3; }

/* ---- Quick-actions card (titled container variant) ---- */
.sa-quickcard {
    background: linear-gradient(180deg, #ffffff 0%, #FCFCFE 100%);
    border: 1px solid #E7E9F0; border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
    padding: 18px 20px;
}
.sa-quickcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sa-quickcard__icon {
    width: 40px; height: 40px; border-radius: 11px; flex: 0 0 40px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
    background: linear-gradient(135deg, #F7E4BC, #EFC878); color: #8A5A11;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 5px 12px rgba(16,24,40,.10);
}
.sa-quickcard__title { font-size: 15px; font-weight: 800; color: #0F1B3D; line-height: 1.2; margin: 0; }
.sa-quickcard__sub { font-size: 12px; color: #8A93A6; margin: 2px 0 0; font-weight: 500; }
.sa-quickcard__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 575px) {
    .sa-quickcard__actions .sa-action { flex: 1 1 calc(50% - 10px); justify-content: center; }
}

@media (max-width: 575px) {
    .sa-actionbar { padding: 12px; }
    .sa-action { flex: 1 1 auto; justify-content: center; }
}

/* ---- Responsive ---- */
@media (max-width: 575px) {
    .sa-card { padding: 16px; gap: 14px; }
    .sa-card__value { font-size: 25px; }
    .sa-card__icon { flex-basis: 48px; width: 48px; height: 48px; font-size: 21px; }
    .sa-panel { padding: 16px; }
    .sa-statlets { gap: 10px; }
    .sa-statlet { padding: 16px 8px; }
    .sa-statlet__value { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .sa-card, .sa-statlet, .sa-card__progress > span, .sa-table tbody tr { transition: none; }
    .sa-card:hover, .sa-statlet:hover { transform: none; }
}

/* ---- Fallback for browsers without :has() — keep a tasteful neutral edge ---- */
@supports not (selector(:has(*))) {
    .sa-card { border-inline-start-color: #E0B15A; }
}