/*
 * portal.css - design layer on top of SB Admin 2 (Bootstrap 4).
 * Additive only: SB Admin 2 rules are not overwritten destructively, so the
 * theme underneath can still be upgraded independently.
 */

:root {
    --portal-primary: #4e73df;
    --portal-success: #1cc88a;
    --portal-info: #36b9cc;
    --portal-warning: #f6c23e;
    --portal-danger: #e74a3b;
    --portal-ink: #3a3b45;
    --portal-muted: #858796;
    --portal-line: #e3e6f0;
    --portal-surface: #fff;
    --portal-radius: .5rem;
}

/* ---------- page shell ---------- */

.page-shell {
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .page-shell {
        padding: 1.75rem 2rem;
    }
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--portal-line);
}

.page-header__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--portal-ink);
    letter-spacing: -.01em;
}

.page-header__subtitle {
    margin: .2rem 0 0;
    font-size: .85rem;
    color: var(--portal-muted);
}

.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ---------- messages ---------- */

.message-stack {
    margin-bottom: 1.25rem;
}

.message-stack .alert {
    border: 0;
    border-left: 4px solid currentColor;
    border-radius: var(--portal-radius);
    box-shadow: 0 .1rem .5rem rgba(58, 59, 69, .08);
    font-size: .9rem;
}

/* ---------- sidebar active state ---------- */

.sidebar .nav-item .nav-link.is-active {
    background: rgba(255, 255, 255, .16);
    border-radius: .35rem;
    font-weight: 700;
}

.sidebar .nav-item .nav-link.is-active i {
    color: #fff;
    opacity: 1;
}

/* ---------- topbar identity ---------- */

.topbar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-right: .25rem;
}

.topbar-user__name {
    font-weight: 600;
    color: var(--portal-ink);
    font-size: .9rem;
    line-height: 1.1;
}

.topbar-user__role {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--portal-muted);
}

.topbar-user__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--portal-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    flex: 0 0 auto;
}

/* ---------- surface cards ---------- */

.surface-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    box-shadow: 0 .15rem .8rem rgba(58, 59, 69, .06);
    margin-bottom: 1.5rem;
}

.surface-card__header {
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--portal-line);
    font-weight: 700;
    color: var(--portal-ink);
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.surface-card__body {
    padding: 1.15rem;
}

/* ---------- course cards ---------- */

.course-grid {
    display: grid;
    /* 260px lets a 1080p screen fit five columns instead of four. */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    /* Cards take their natural height. Stretching them to match the tallest
       card in the row left a large empty band in every short-titled card,
       because the seat block is pinned to the bottom. */
    align-items: start;
}

.course-card {
    display: flex;
    flex-direction: column;
    /* A floor so a one-line title still reads as a card rather than a strip. */
    min-height: 172px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-line);
    border-left: 4px solid var(--portal-line);
    border-radius: var(--portal-radius);
    padding: 1rem 1.1rem;
    transition: box-shadow .15s ease, transform .15s ease;
}

.course-card:hover {
    box-shadow: 0 .35rem 1.1rem rgba(58, 59, 69, .12);
    transform: translateY(-2px);
}

.course-card.is-enrolled {
    border-left-color: var(--portal-success);
    background: #f7fdfa;
}

.course-card.is-open {
    border-left-color: var(--portal-primary);
}

.course-card.is-full,
.course-card.is-blocked {
    border-left-color: var(--portal-line);
    background: #fbfbfd;
}

.course-card__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--portal-ink);
    margin: 0 0 .5rem;
    line-height: 1.35;
    /* Course names are long and must not be truncated, so let them break
       rather than force the card wider. */
    overflow-wrap: anywhere;
}

.course-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .85rem;
}

.course-card__seats {
    margin-top: auto;
    padding-top: .65rem;
}

.course-card__seat-line {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--portal-muted);
    margin-bottom: .3rem;
}

.course-card__seat-count {
    font-weight: 700;
    color: var(--portal-ink);
}

.course-card__actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-top: .9rem;
}

.seat-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--portal-line);
    overflow: hidden;
}

.seat-bar__fill {
    height: 100%;
    border-radius: 3px;
    background: var(--portal-success);
    transition: width .3s ease;
}

.seat-bar__fill.is-tight {
    background: var(--portal-warning);
}

.seat-bar__fill.is-full {
    background: var(--portal-danger);
}

/* ---------- pills ---------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: #eef1fb;
    color: #3b53a8;
    white-space: nowrap;
}

.pill--muted {
    background: #f0f1f5;
    color: var(--portal-muted);
}

.pill--success {
    background: #e3f9f1;
    color: #0f8a5f;
}

.pill--warning {
    background: #fdf5e0;
    color: #99751c;
}

.pill--danger {
    background: #fdeceb;
    color: #b23227;
}

/* ---------- category blocks ---------- */

.category-block {
    margin-bottom: 1.5rem;
}

.category-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.15rem;
    background: var(--portal-surface);
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius) var(--portal-radius) 0 0;
}

.category-block__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--portal-primary);
}

.category-block__rule {
    font-size: .8rem;
    color: var(--portal-muted);
}

.category-block__body {
    border: 1px solid var(--portal-line);
    border-top: 0;
    border-radius: 0 0 var(--portal-radius) var(--portal-radius);
    padding: 1.15rem;
    background: #fafbfd;
}

/* ---------- stat tiles ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-tile {
    background: var(--portal-surface);
    border: 1px solid var(--portal-line);
    border-left: 4px solid var(--portal-primary);
    border-radius: var(--portal-radius);
    padding: .9rem 1.1rem;
}

.stat-tile--success { border-left-color: var(--portal-success); }
.stat-tile--info    { border-left-color: var(--portal-info); }
.stat-tile--warning { border-left-color: var(--portal-warning); }
.stat-tile--danger  { border-left-color: var(--portal-danger); }

.stat-tile__label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--portal-muted);
    margin-bottom: .3rem;
}

.stat-tile__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--portal-ink);
    line-height: 1.1;
}

.stat-tile__hint {
    font-size: .74rem;
    color: var(--portal-muted);
    margin-top: .15rem;
}

/* ---------- empty state ---------- */

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--portal-muted);
}

.empty-state__icon {
    font-size: 2.4rem;
    opacity: .35;
    margin-bottom: .75rem;
}

.empty-state__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--portal-ink);
    margin-bottom: .3rem;
}

.empty-state__text {
    font-size: .88rem;
    margin-bottom: 1.1rem;
}

/* ---------- tables ---------- */

.data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.table thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--portal-muted);
    font-weight: 700;
    border-top: 0;
    border-bottom: 2px solid var(--portal-line);
    white-space: nowrap;
}

table.table tbody td {
    font-size: .86rem;
    vertical-align: middle;
    color: var(--portal-ink);
}

table.table tbody tr:hover {
    background: #f8f9fc;
}

/* ---------- forms ---------- */

.form-panel {
    max-width: 620px;
}

.form-actions {
    display: flex;
    gap: .5rem;
    padding-top: .5rem;
}

/* ---------- danger zone ---------- */

.danger-zone {
    border-color: #f3c9c4;
    background: #fefaf9;
}

.danger-zone .surface-card__header {
    border-bottom-color: #f3c9c4;
    color: var(--portal-danger);
}

/* ---------- misc ---------- */

.is-busy {
    pointer-events: none;
    opacity: .65;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.filter-bar .form-control {
    max-width: 340px;
}

@media (max-width: 575.98px) {
    .page-header__title { font-size: 1.2rem; }
    .page-shell { padding: 1rem; }
}

/* ---------- setup guide ---------- */

.setup-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.setup-step {
    position: relative;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    padding: .9rem 1rem .9rem 2.9rem;
    background: #fff;
}

.setup-step.is-done {
    border-color: #bfe9d7;
    background: #f7fdfa;
}

.setup-step__num {
    position: absolute;
    left: .85rem;
    top: .9rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--portal-line);
    color: var(--portal-ink);
    font-size: .78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-step.is-done .setup-step__num {
    background: var(--portal-success);
    color: #fff;
}

.setup-step__title {
    font-weight: 700;
    font-size: .92rem;
    color: var(--portal-ink);
    margin-bottom: .2rem;
}

.setup-step__text {
    font-size: .8rem;
    color: var(--portal-muted);
    margin-bottom: .6rem;
}

.setup-step__count {
    font-size: .74rem;
    font-weight: 700;
    color: var(--portal-muted);
}

/* ---------- inline help ---------- */

.help-card {
    border: 1px solid #cfe2f3;
    border-left: 4px solid var(--portal-info);
    border-radius: var(--portal-radius);
    background: #f6fbfd;
    padding: .9rem 1.05rem;
    margin-bottom: 1.5rem;
}

.help-card__title {
    font-weight: 700;
    font-size: .88rem;
    color: var(--portal-ink);
    margin-bottom: .5rem;
}

.help-card dl {
    margin: 0;
    font-size: .82rem;
}

.help-card dt {
    color: var(--portal-ink);
    font-weight: 700;
}

.help-card dd {
    color: var(--portal-muted);
    margin-bottom: .5rem;
}

.help-card dd:last-child {
    margin-bottom: 0;
}

.help-card__note {
    font-size: .78rem;
    color: #99751c;
    background: #fdf5e0;
    border-radius: .3rem;
    padding: .4rem .6rem;
    margin-top: .6rem;
}

/* ---------- dashboard visuals ----------
 * One sequential blue ramp, validated light->dark against a white surface:
 * lightness monotone, adjacent gaps >= 0.06, light end 2.11:1, hue spread 3 deg.
 */

.fill-empty   { background: #86b6ef; }
.fill-open    { background: #5598e7; }
.fill-filling { background: #2a78d6; }
.fill-full    { background: #184f95; }

.meter {
    margin-bottom: 1.1rem;
}

.meter:last-child {
    margin-bottom: 0;
}

.meter__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .35rem;
}

.meter__label {
    font-size: .8rem;
    color: var(--portal-muted);
}

.meter__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--portal-ink);
    line-height: 1;
}

.meter__of {
    font-size: .82rem;
    font-weight: 400;
    color: var(--portal-muted);
}

.meter__track {
    height: 10px;
    border-radius: 5px;
    background: var(--portal-line);
    overflow: hidden;
}

.meter__fill {
    height: 100%;
    border-radius: 5px;
    background: #2a78d6;
}

/* stacked part-to-whole bar */

.stack-bar {
    display: flex;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--portal-line);
}

.stack-bar__seg {
    /* 2px surface gap between adjacent fills, per the mark spec */
    box-shadow: inset -2px 0 0 #fff;
}

.stack-bar__seg:last-child {
    box-shadow: none;
}

.stack-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: .75rem;
}

.stack-legend__item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--portal-muted);
}

.stack-legend__swatch {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.stack-legend__count {
    font-weight: 700;
    color: var(--portal-ink);
}

/* ranked horizontal bars */

.rank-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem 1rem;
    align-items: center;
    padding: .45rem 0;
    border-bottom: 1px solid var(--portal-line);
}

.rank-row:last-child {
    border-bottom: 0;
}

.rank-row__name {
    font-size: .84rem;
    color: var(--portal-ink);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-row__value {
    font-size: .78rem;
    color: var(--portal-muted);
    white-space: nowrap;
}

.rank-row__value strong {
    color: var(--portal-ink);
}

.rank-row__track {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 4px;
    background: var(--portal-line);
    overflow: hidden;
}

.rank-row__bar {
    height: 100%;
    border-radius: 4px;
    background: #2a78d6;
    transition: width .3s ease;
}

.rank-row__bar.is-full {
    background: #184f95;
}

/* ---------- registration window ---------- */

.window-card--open    { border-left: 4px solid var(--portal-success); }
.window-card--scheduled { border-left: 4px solid var(--portal-warning); }
.window-card--closed  { border-left: 4px solid var(--portal-danger); }

.window-state {
    font-size: .9rem;
    font-weight: 600;
    color: var(--portal-ink);
    margin-bottom: 1rem;
}

.window-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    align-items: start;
}

.window-switch {
    padding-top: .3rem;
}

.window-notice {
    display: flex;
    flex-wrap: nowrap;
    gap: .9rem;
    align-items: flex-start;
    border-radius: var(--portal-radius);
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--portal-line);
}

.window-notice--closed {
    background: #fdeceb;
    border-color: #f3c9c4;
}

.window-notice--scheduled {
    background: #fdf5e0;
    border-color: #f0dfae;
}

.window-notice__icon {
    font-size: 1.3rem;
    line-height: 1.2;
    flex: 0 0 auto;
}

.window-notice--closed .window-notice__icon { color: var(--portal-danger); }
.window-notice--scheduled .window-notice__icon { color: #99751c; }

.window-notice__title {
    font-weight: 700;
    color: var(--portal-ink);
    margin-bottom: .15rem;
}

.window-notice__text {
    font-size: .85rem;
    color: var(--portal-muted);
}

/* ---------- server clock ---------- */

.server-clock {
    text-align: right;
    padding-right: 1rem;
    margin-right: .75rem;
    border-right: 1px solid var(--portal-line);
    line-height: 1.15;
}

.server-clock__label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--portal-muted);
}

.server-clock__time {
    font-size: .82rem;
    font-weight: 700;
    color: var(--portal-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .server-clock {
        padding-right: .6rem;
        margin-right: .4rem;
    }
    .server-clock__time { font-size: .72rem; }
    .server-clock__label { display: none; }
}

/* countdown inside the window banner */

.window-countdown {
    display: inline-block;
    margin-top: .35rem;
    font-weight: 700;
    color: var(--portal-ink);
    font-variant-numeric: tabular-nums;
}


/* ---------- wide screens ---------- */

@media (min-width: 1600px) {
    .page-shell {
        padding: 1.75rem 2.5rem;
    }

    .course-grid {
        gap: 1.15rem;
    }
}

/* An empty seat bar should still read as a track rather than a stray rule. */
.seat-bar {
    box-shadow: inset 0 0 0 1px rgba(58, 59, 69, .05);
}

.filter-bar {
    align-items: center;
}