/* ── HLC School Admin Dashboard — Brand Refresh ───────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────────── */
:root {
    --hlc-green:       #40AD48;
    --hlc-green-dark:  #2e8a35;
    --hlc-green-light: #E8F5E9;
    --hlc-orange:      #EA7725;
    --hlc-orange-light:#FFF3E0;
    --hlc-dark:        #1E1C2C;
    --hlc-red:         #D12229;
    --hlc-purple:      #7941A4;
    --hlc-navy:        #24408E;
    --hlc-yellow:      #FFCB04;
    --hlc-white:       #ffffff;
    --hlc-bg:          #F4F7F4;
    --hlc-card-bg:     #ffffff;
    --hlc-border:      #e0e8e0;
    --hlc-text:        #1E1C2C;
    --hlc-text-muted:  #6b7280;
    --hlc-radius:      14px;
    --hlc-shadow:      0 2px 12px rgba(64,173,72,.10), 0 1px 4px rgba(0,0,0,.06);
    --hlc-shadow-hover:0 6px 24px rgba(64,173,72,.18), 0 2px 8px rgba(0,0,0,.08);
}

/* ── Wrapper ────────────────────────────────────────────────────────── */
.hlc-sa-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 0 60px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--hlc-text);
    background: transparent;
}

/* ── Notice ────────────────────────────────────────────────────────── */
.hlc-sa-notice {
    background: var(--hlc-orange-light);
    border-left: 5px solid var(--hlc-orange);
    padding: 18px 22px;
    border-radius: var(--hlc-radius);
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    margin: 24px 0;
    font-weight: 500;
}
.hlc-sa-notice--denied {
    background: #fff0f0;
    border-left-color: var(--hlc-red);
}

/* ── Hero Header ────────────────────────────────────────────────────── */
.hlc-sa-header {
    background: linear-gradient(135deg, var(--hlc-dark) 0%, #2e3a2f 100%);
    border-radius: var(--hlc-radius);
    padding: 32px 36px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: var(--hlc-shadow);
    position: relative;
    overflow: hidden;
}
.hlc-sa-header::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(64,173,72,.18) 0%, transparent 70%);
    pointer-events: none;
}
.hlc-sa-header__welcome {
    font-size: 12px;
    font-weight: 600;
    color: var(--hlc-green);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}
.hlc-sa-header__name {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 800;
    color: var(--hlc-white);
    line-height: 1.2;
}
.hlc-sa-header__tier {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    background: rgba(64,173,72,.2);
    color: #7ee882;
    border: 1px solid rgba(64,173,72,.35);
    border-radius: 20px;
    padding: 4px 14px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* ── Phase badge ────────────────────────────────────────────────────── */
.hlc-sa-phase {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid currentColor;
    border-radius: 24px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(255,255,255,.08);
    color: var(--hlc-white);
}
.hlc-sa-phase__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hlc-sa-phase__dot--lg {
    width: 16px;
    height: 16px;
}
.hlc-sa-phase__label { color: inherit; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.hlc-sa-card {
    background: var(--hlc-card-bg);
    border: 1px solid var(--hlc-border);
    border-radius: var(--hlc-radius);
    padding: 28px 32px;
    margin-bottom: 22px;
    box-shadow: var(--hlc-shadow);
    transition: box-shadow .2s ease;
}
.hlc-sa-card:hover {
    box-shadow: var(--hlc-shadow-hover);
}
.hlc-sa-card__title {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 800;
    color: var(--hlc-green);
    display: flex;
    align-items: center;
    gap: 10px;
}
.hlc-sa-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.hlc-sa-card__head .hlc-sa-card__title {
    margin-bottom: 0;
}

/* ── Card top accent strip ──────────────────────────────────────────── */
.hlc-sa-card--code    { border-top: 4px solid var(--hlc-green); }
.hlc-sa-card--overview{ border-top: 4px solid var(--hlc-orange); }
.hlc-sa-card--entries { border-top: 4px solid var(--hlc-purple); }
.hlc-sa-card--families{ border-top: 4px solid var(--hlc-navy); }
.hlc-sa-card--status  { border-top: 4px solid var(--hlc-yellow); }

/* ── Leader Code card ──────────────────────────────────────────────── */
.hlc-sa-code-display {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.hlc-sa-code-text {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 6px;
    background: var(--hlc-green-light);
    border: 2px dashed var(--hlc-green);
    border-radius: 10px;
    padding: 12px 26px;
    color: var(--hlc-dark);
    font-family: 'Montserrat', monospace;
}
.hlc-sa-code-hint {
    font-size: 13px;
    color: var(--hlc-text-muted);
    margin: 0;
    line-height: 1.65;
    font-weight: 500;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.hlc-sa-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 22px;
    border: none;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
    letter-spacing: .3px;
}
.hlc-sa-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(64,173,72,.35);
}
.hlc-sa-btn:active { transform: translateY(0); }
.hlc-sa-btn--copy {
    background: var(--hlc-green);
    color: var(--hlc-white);
    box-shadow: 0 2px 8px rgba(64,173,72,.25);
}

/* ── Stats row ──────────────────────────────────────────────────────── */
.hlc-sa-stats-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.hlc-sa-stat {
    flex: 1 1 120px;
    background: var(--hlc-bg);
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    border: 1px solid var(--hlc-border);
    transition: transform .15s;
}
.hlc-sa-stat:hover { transform: translateY(-2px); }
.hlc-sa-stat__num {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: var(--hlc-green);
    line-height: 1;
    margin-bottom: 6px;
}
.hlc-sa-stat__label {
    display: block;
    font-size: 11px;
    color: var(--hlc-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ── Progress bar ──────────────────────────────────────────────────── */
.hlc-sa-progress-wrap {
    margin-bottom: 24px;
}
.hlc-sa-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--hlc-text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.hlc-sa-progress-bar {
    height: 16px;
    background: #e4eee4;
    border-radius: 8px;
    overflow: hidden;
}
.hlc-sa-progress-bar__fill {
    height: 100%;
    border-radius: 8px;
    transition: width .5s ease;
    min-width: 4px;
}

/* ── Division chips ─────────────────────────────────────────────────── */
.hlc-sa-division-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.hlc-sa-division-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #ddd;
    border-radius: 24px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    background: #f9f9f9;
    color: #aaa;
    transition: all .2s;
}
.hlc-sa-division-chip--active {
    border-color: var(--hlc-green);
    background: var(--hlc-green-light);
    color: var(--hlc-dark);
}
.hlc-sa-division-chip__count {
    font-weight: 800;
    font-size: 16px;
    color: var(--hlc-green);
}

/* ── Filter row ─────────────────────────────────────────────────────── */
.hlc-sa-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.hlc-sa-filter-label {
    color: var(--hlc-text-muted);
    font-weight: 600;
}
.hlc-sa-select {
    padding: 7px 12px;
    border: 1.5px solid var(--hlc-border);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: var(--hlc-dark);
    cursor: pointer;
}
.hlc-sa-select:focus {
    outline: none;
    border-color: var(--hlc-green);
}

/* ── Tables ─────────────────────────────────────────────────────────── */
.hlc-sa-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1px solid var(--hlc-border);
}
.hlc-sa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
}
.hlc-sa-table th {
    background: var(--hlc-bg);
    text-align: left;
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--hlc-text-muted);
    border-bottom: 2px solid var(--hlc-border);
    white-space: nowrap;
}
.hlc-sa-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f4f0;
    vertical-align: middle;
    color: var(--hlc-text);
    font-weight: 500;
}
.hlc-sa-table tbody tr:last-child td { border-bottom: none; }
.hlc-sa-table tbody tr:hover { background: var(--hlc-green-light); }
.hlc-sa-table__num { color: #bbb; font-size: 12px; font-weight: 600; }
.hlc-sa-table__date { color: var(--hlc-text-muted); font-size: 13px; white-space: nowrap; }

/* Hidden by division filter */
.hlc-sa-table tr.hlc-sa-hidden { display: none; }

/* ── Division badges ─────────────────────────────────────────────────── */
.hlc-sa-div-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.hlc-sa-div-badge--prek-and-me    { background: #E3F2FD; color: #1565C0; }
.hlc-sa-div-badge--little-cooks   { background: var(--hlc-green-light); color: #2E7D32; }
.hlc-sa-div-badge--rising-chefs   { background: var(--hlc-orange-light); color: #c45a00; }
.hlc-sa-div-badge--bestie-cookoff { background: #F3E5F5; color: #6A1B9A; }

/* ── Status badges ─────────────────────────────────────────────────── */
.hlc-sa-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.hlc-sa-status--submitted         { background: #E3F2FD; color: #1565C0; }
.hlc-sa-status--local-finalist    { background: #FFF8E1; color: #F57F17; }
.hlc-sa-status--local-winner      { background: var(--hlc-green-light); color: #1B5E20; }
.hlc-sa-status--national-finalist { background: #FCE4EC; color: #880E4F; }
.hlc-sa-status--national-winner   { background: #EDE7F6; color: #4527A0; }
.hlc-sa-status--disqualified      { background: #FFEBEE; color: var(--hlc-red); }
.hlc-sa-status--draft             { background: #f5f5f5; color: #999; }

/* ── Cook-Off Status card ──────────────────────────────────────────── */
.hlc-sa-phase-display {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 16px;
    background: var(--hlc-bg);
    transition: border-color .2s;
}
.hlc-sa-phase__name {
    display: block;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 2px;
}
.hlc-sa-phase__deadline {
    font-size: 13px;
    color: var(--hlc-text-muted);
    margin: 4px 0 0;
    font-weight: 500;
}
.hlc-sa-comp-year {
    font-size: 14px;
    color: var(--hlc-text-muted);
    margin: 0;
    font-weight: 600;
}
.hlc-sa-comp-year strong {
    color: var(--hlc-dark);
    font-weight: 800;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.hlc-sa-empty {
    color: var(--hlc-text-muted);
    font-style: italic;
    font-size: 14px;
    margin: 12px 0 0;
    font-weight: 500;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .hlc-sa-header         { padding: 24px 20px; flex-direction: column; align-items: flex-start; }
    .hlc-sa-header__name   { font-size: 20px; }
    .hlc-sa-code-text      { font-size: 22px; letter-spacing: 3px; padding: 10px 18px; }
    .hlc-sa-stats-row      { gap: 10px; }
    .hlc-sa-stat           { flex: 1 1 calc(50% - 5px); }
    .hlc-sa-card           { padding: 20px 18px; }
    .hlc-sa-card__head     { flex-direction: column; align-items: flex-start; }
}