/* ==========================================================================
   Koinon Component Library — koinon-components.css
   Custom styles for PHP component classes (StatusBadge, UserChip, …).
   All Bootstrap utilities are preferred; this file only contains what Bootstrap
   cannot express with utility classes alone.
   ========================================================================== */

/* ── StatusBadge ─────────────────────────────────────────────────────────── */
/*
 * Soft-background pill badge with a colored dot, used for workflow states.
 * Uses semantic soft-color pairs so the badge reads as meaningful without
 * relying on color alone (the dot shape also carries the signal).
 *
 * Usage (generated by StatusBadge.php):
 *   <span class="kn-badge kn-badge--success"><i class="kn-badge__dot"></i>Active</span>
 */
.kn-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;        /* slightly smaller than before for cleaner table rows */
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.4;
    letter-spacing: 0.2px;
    white-space: nowrap;
    vertical-align: middle;
    transition: opacity 150ms ease, transform 150ms ease;
}

/* Subtle hover lift */
.kn-badge:hover {
    opacity: 0.88;
}

/* Dot indicator — inherits currentColor so it always matches the text */
.kn-badge__dot {
    display: inline-block;
    width: 5.5px;
    height: 5.5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/*
 * Icon indicator — used by approved (check) and rejected (×) badges.
 * A distinct shape (not just color) so states remain distinguishable
 * when color perception is limited.
 * Uses Bootstrap Icons via the bi-* font classes on the same element.
 */
.kn-badge__icon {
    font-size: 0.625rem;   /* ~10px — matches the dot's visual weight */
    line-height: 1;
    flex-shrink: 0;
}

/* Soft color variants — TUM / Koinon semantic palette */
.kn-badge--neutral  { background: #eef1f6; color: #4d5765; border-color: #e1e6ee; }
.kn-badge--success  { background: #d1f0de; color: #146c43; border-color: #b3e3c8; }
.kn-badge--warning  { background: #fde8c8; color: #8a4d00; border-color: #f9d5a0; }
.kn-badge--danger   { background: #fde1e4; color: #a02133; border-color: #f7bfc5; }
.kn-badge--info     { background: #d3eff2; color: #0b6573; border-color: #afe0e5; }
.kn-badge--brand    { background: #dde6f5; color: #1b4480; border-color: #b6caec; }

/* ── UserChip ───────────────────────────────────────────────────────────── */
/*
 * Compact inline chip showing a user's name and role type.
 * Convention: names are stored as "Lastname, Firstname" in Koinon;
 * the avatar initials use the first letter of each part.
 */

.kn-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 3px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: #f0f2f5;
    color: #333;
    vertical-align: middle;
    transition: background 150ms ease;
}

.kn-user-chip:hover {
    background: #e6e9ef;
}

.kn-user-chip-avatar {
    width: 24px;              /* slightly larger for better legibility */
    height: 24px;
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: #6c757d; /* fallback */
}

/* Image avatar variant — shown when a profile photo URL is provided */
.kn-user-chip-avatar--img {
    object-fit: cover;
    background: none;
}

.kn-user-chip-name {
    font-weight: 600;
    white-space: nowrap;
}

.kn-user-chip-type {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;   /* slightly more tracking for the tiny label */
    white-space: nowrap;
    opacity: 0.9;             /* let it breathe a little */
}

/* Per-role colour tokens */
.kn-user-chip--student .kn-user-chip-avatar { background: #6f42c1; }
.kn-user-chip--student .kn-user-chip-type   { background: #ede0ff; color: #5a2d9e; }

.kn-user-chip--chair .kn-user-chip-avatar   { background: #23579f; }
.kn-user-chip--chair .kn-user-chip-type     { background: #dde6f5; color: #1b4480; }

.kn-user-chip--staff .kn-user-chip-avatar   { background: #198754; }
.kn-user-chip--staff .kn-user-chip-type     { background: #d1eedd; color: #146c43; }

.kn-user-chip--admin .kn-user-chip-avatar   { background: #dc3545; }
.kn-user-chip--admin .kn-user-chip-type     { background: #fde8ea; color: #b02a37; }

.kn-user-chip--school_office .kn-user-chip-avatar { background: #e37222; }
.kn-user-chip--school_office .kn-user-chip-type   { background: #fce8d6; color: #b85c1c; }

/*
 * Link variant — UserChip::link() wraps the chip in <a class="kn-user-chip-link">.
 * Resets anchor styling so the chip looks identical to the static variant
 * but gains hover affordance (slight underline on the name only).
 */
.kn-user-chip-link {
    text-decoration: none;
    color: inherit;
}
.kn-user-chip-link:hover {
    text-decoration: none;
    color: inherit;
}
.kn-user-chip-link:hover .kn-user-chip {
    background: #e6e9ef;
}
.kn-user-chip-link:hover .kn-user-chip-name {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Alert banner (kn-banner) ────────────────────────────────────────────── */
/*
 * Prominent card-style banner with title + optional subtitle.
 * Left border + soft background conveys meaning without relying on color alone.
 * Generated by Alert::banner() / Alert::bannerInfo() etc.
 *
 * Usage:
 *   <div class="kn-banner kn-banner--info">
 *     <i class="bi bi-info-circle kn-banner__icon"></i>
 *     <div class="kn-banner__body">
 *       <strong class="kn-banner__title">Title</strong>
 *       <span class="kn-banner__msg">Subtitle text.</span>
 *     </div>
 *     <button class="kn-banner__close">…</button>
 *   </div>
 */
.kn-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    margin-bottom: 1rem;
    color: inherit; /* prevent Bootstrap alert from setting a flat text color */
}

.kn-banner--info    { background: #cce8ed; border-color: #8eccd5; }
.kn-banner--success { background: #cceedd; border-color: #80ccaa; }
.kn-banner--warning { background: #fef3c2; border-color: #f0cc60; }
.kn-banner--danger  { background: #f8d7da; border-color: #e8a0a8; }

/* Plain icon — no circle wrapper, just the Bootstrap Icon at a comfortable size */
.kn-banner__icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.4; /* aligns with the title text baseline */
}

.kn-banner--info    .kn-banner__icon { color: #0f7b8a; }
.kn-banner--success .kn-banner__icon { color: #198754; }
.kn-banner--warning .kn-banner__icon { color: #c97a00; }
.kn-banner--danger  .kn-banner__icon { color: #c0283d; }

.kn-banner__body  { flex: 1; min-width: 0; }
.kn-banner__title { font-size: 1rem; font-weight: 700; display: block; margin-bottom: 2px; }
.kn-banner__msg   { font-size: .9375rem; line-height: 1.5; display: block; }

.kn-banner--info    .kn-banner__title,
.kn-banner--info    .kn-banner__msg   { color: #0b6878; }

.kn-banner--success .kn-banner__title,
.kn-banner--success .kn-banner__msg   { color: #166f45; }

.kn-banner--warning .kn-banner__title,
.kn-banner--warning .kn-banner__msg   { color: #a86200; }

.kn-banner--danger  .kn-banner__title,
.kn-banner--danger  .kn-banner__msg   { color: #b0223a; }

.kn-banner__close {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    color: #6b7889;
    cursor: pointer;
    padding: 0;
    font-size: .875rem;
    line-height: 1;
    opacity: .6;
    transition: opacity .15s ease;
}
.kn-banner__close:hover { opacity: 1; }

/* ── EmptyState ──────────────────────────────────────────────────────────── */
/*
 * Centred placeholder shown when a table, list, or search returns no data.
 * Generated by EmptyState.php.
 *
 * Usage inside a table (colspan wraps the full row):
 *   <tbody>
 *     <tr><td colspan="5"><?= EmptyState::noResults() ?></td></tr>
 *   </tbody>
 *
 * Usage as a standalone block (e.g. in a card body):
 *   <?= EmptyState::render('bi-search', 'No results', 'Try a different term.') ?>
 */
.kn-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6b7889;
}

.kn-empty-state__icon {
    font-size: 2.75rem;
    color: #ccd3df;
    margin-bottom: 0.875rem;
    line-height: 1;
}

.kn-empty-state__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #363e49;
    margin: 0 0 0.375rem;
}

.kn-empty-state__msg {
    font-size: 0.875rem;
    color: #6b7889;
    max-width: 42ch;
    margin: 0 auto 1.25rem;
    line-height: 1.55;
}

.kn-empty-state__action {
    margin-top: 0.125rem; /* sits just below __msg when present */
}

/* ── StatCard ────────────────────────────────────────────────────────────── */
/*
 * Key-metric card for page header summary rows and dashboards.
 * Generated by StatCard::render() / StatCard::row().
 *
 * Typical usage — a row of 4 cards above a data table:
 *   echo StatCard::row([
 *       ['value' => '42', 'label' => 'Total',    'color' => 'primary', 'icon' => 'bi-mortarboard'],
 *       ['value' => '28', 'label' => 'Approved', 'color' => 'success', 'icon' => 'bi-check-circle'],
 *   ]);
 */
.kn-stat {
    background: #ffffff;
    border: 1px solid #e1e6ee;
    border-radius: 10px;
    padding: 1.125rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    height: 100%;       /* equal height within a row g-3 */
    box-sizing: border-box;
}

.kn-stat__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.kn-stat__body {
    flex: 1;
    min-width: 0;
}

.kn-stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.25rem;
}

.kn-stat__label {
    font-size: 0.8125rem;
    color: #6b7889;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kn-stat__trend {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
}

.kn-stat__trend--up   { color: #146c43; }
.kn-stat__trend--down { color: #a02133; }

/* Color variants — icon background + icon color + value color */
.kn-stat--primary   .kn-stat__icon  { background: #dde6f5; color: #23579f; }
.kn-stat--primary   .kn-stat__value { color: #23579f; }

.kn-stat--success   .kn-stat__icon  { background: #d1f0de; color: #146c43; }
.kn-stat--success   .kn-stat__value { color: #146c43; }

.kn-stat--warning   .kn-stat__icon  { background: #fde8c8; color: #c97a00; }
.kn-stat--warning   .kn-stat__value { color: #8a4d00; }

.kn-stat--danger    .kn-stat__icon  { background: #fde1e4; color: #c0283d; }
.kn-stat--danger    .kn-stat__value { color: #a02133; }

.kn-stat--info      .kn-stat__icon  { background: #d3eff2; color: #0f7b8a; }
.kn-stat--info      .kn-stat__value { color: #0b6573; }

.kn-stat--secondary .kn-stat__icon  { background: #eef1f6; color: #4d5765; }
.kn-stat--secondary .kn-stat__value { color: #363e49; }

/* Neutral — no color emphasis, plain dark number */
.kn-stat--neutral   .kn-stat__icon  { background: #f6f8fb; color: #6b7889; }
.kn-stat--neutral   .kn-stat__value { color: #141a22; }

/* ── Stepper ─────────────────────────────────────────────────────────────────
 * Horizontal multi-step progress indicator.
 * States: done (checkmark), active (TUM blue highlight), pending (grey).
 * -------------------------------------------------------------------------- */
.kn-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin-bottom: 1.5rem;
}

.kn-stepper__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* Head row: indicator circle + connector line */
.kn-stepper__head {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Numbered/check circle */
.kn-stepper__indicator {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}

/* Horizontal connector between circles */
.kn-stepper__connector {
    flex: 1;
    height: 2px;
    margin: 0 0.25rem;
}

/* Label area below the head */
.kn-stepper__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0 0.25rem;
}

.kn-stepper__label {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.kn-stepper__sublabel {
    font-size: 0.725rem;
    margin-top: 0.125rem;
    line-height: 1.2;
}

/* ── State: done ── */
.kn-stepper__step--done .kn-stepper__indicator {
    background: #d1f0de;
    color: #146c43;
    border: 2px solid #b3e3c8;
}

.kn-stepper__step--done .kn-stepper__connector {
    background: #b3e3c8;
}

.kn-stepper__step--done .kn-stepper__label {
    color: #4d5765;
}

.kn-stepper__step--done .kn-stepper__sublabel {
    color: #8a9ab0;
}

/* ── State: active ── */
.kn-stepper__step--active .kn-stepper__indicator {
    background: #23579f;
    color: #fff;
    border: 2px solid #23579f;
    box-shadow: 0 0 0 3px rgba(35, 87, 159, 0.18);
}

.kn-stepper__step--active .kn-stepper__connector {
    background: #e1e6ee;
}

.kn-stepper__step--active .kn-stepper__label {
    color: #23579f;
    font-weight: 700;
}

.kn-stepper__step--active .kn-stepper__sublabel {
    color: #4d6fa0;
}

/* ── State: pending ── */
.kn-stepper__step--pending .kn-stepper__indicator {
    background: #f0f2f6;
    color: #8a9ab0;
    border: 2px solid #e1e6ee;
}

.kn-stepper__step--pending .kn-stepper__connector {
    background: #e1e6ee;
}

.kn-stepper__step--pending .kn-stepper__label {
    color: #8a9ab0;
}

.kn-stepper__step--pending .kn-stepper__sublabel {
    color: #b0bac8;
}

/* ── Mini variant — compact, no labels, smaller circles ── */
.kn-stepper--mini .kn-stepper__indicator {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0rem; /* hide number text */
}

.kn-stepper--mini .kn-stepper__indicator i {
    font-size: 0.625rem;
}

/* done dot in mini is filled solid green */
.kn-stepper--mini .kn-stepper__step--done .kn-stepper__indicator {
    background: #146c43;
    border-color: #146c43;
    color: #fff;
}

/* active dot in mini shows as solid blue */
.kn-stepper--mini .kn-stepper__step--active .kn-stepper__indicator {
    background: #23579f;
    border-color: #23579f;
    box-shadow: 0 0 0 3px rgba(35, 87, 159, 0.18);
}

/* pending dot stays grey hollow */
.kn-stepper--mini .kn-stepper__step--pending .kn-stepper__indicator {
    background: #e1e6ee;
    border-color: #c8d0dc;
}

.kn-stepper--mini .kn-stepper__connector {
    height: 2px;
    margin: 0 0.125rem;
}

/* ── Icon variant — larger circles to fit icons ── */
.kn-stepper--icon .kn-stepper__indicator {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
}

/* ── ProgressBar — horizontal ────────────────────────────────────────────────
 * .kn-progress        outer track
 * .kn-progress__fill  coloured fill
 * .kn-progress-wrap   optional flex row with label + percentage badge
 * -------------------------------------------------------------------------- */
.kn-progress {
    height: 0.625rem;
    background: #eef1f6;
    border-radius: 999px;
    overflow: hidden;
    width: 100%;
}

.kn-progress__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* Color fills */
.kn-progress__fill--primary   { background: #23579f; }
.kn-progress__fill--success   { background: #146c43; }
.kn-progress__fill--warning   { background: #c97a00; }
.kn-progress__fill--danger    { background: #c0283d; }
.kn-progress__fill--info      { background: #0f7b8a; }
.kn-progress__fill--secondary { background: #6b7889; }

/* Striped pattern */
.kn-progress__fill--striped {
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,.18) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,.18) 50%,
        rgba(255,255,255,.18) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

/* Animated stripes */
.kn-progress__fill--animated {
    animation: kn-progress-stripes 0.9s linear infinite;
}

@keyframes kn-progress-stripes {
    from { background-position: 1rem 0; }
    to   { background-position: 0 0; }
}

/* Wrap row: label — bar — pct badge */
.kn-progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
}

.kn-progress-wrap .kn-progress {
    flex: 1;
}

.kn-progress-wrap__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #363e49;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 6rem;
}

.kn-progress-wrap__pct {
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 2.5rem;
    text-align: right;
}

.kn-progress-wrap__pct--primary   { color: #23579f; }
.kn-progress-wrap__pct--success   { color: #146c43; }
.kn-progress-wrap__pct--warning   { color: #8a4d00; }
.kn-progress-wrap__pct--danger    { color: #a02133; }
.kn-progress-wrap__pct--info      { color: #0b6573; }
.kn-progress-wrap__pct--secondary { color: #4d5765; }

/* ── ProgressBar — circular SVG ring ────────────────────────────────────────
 * .kn-circle          wrapper div (sets color context)
 * .kn-circle__track   background ring
 * .kn-circle__fill    progress arc
 * .kn-circle__label   centre text
 * -------------------------------------------------------------------------- */
.kn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kn-circle__track {
    stroke: #eef1f6;
}

.kn-circle__label {
    font-weight: 700;
    fill: #363e49;
}

/* Arc colors per variant */
.kn-circle--primary   .kn-circle__fill { stroke: #23579f; }
.kn-circle--success   .kn-circle__fill { stroke: #146c43; }
.kn-circle--warning   .kn-circle__fill { stroke: #c97a00; }
.kn-circle--danger    .kn-circle__fill { stroke: #c0283d; }
.kn-circle--info      .kn-circle__fill { stroke: #0f7b8a; }
.kn-circle--secondary .kn-circle__fill { stroke: #6b7889; }

/* Label color per variant */
.kn-circle--primary   .kn-circle__label { fill: #23579f; }
.kn-circle--success   .kn-circle__label { fill: #146c43; }
.kn-circle--warning   .kn-circle__label { fill: #8a4d00; }
.kn-circle--danger    .kn-circle__label { fill: #a02133; }
.kn-circle--info      .kn-circle__label { fill: #0b6573; }
.kn-circle--secondary .kn-circle__label { fill: #4d5765; }