/*
 * Vizmetric Platform — Base stylesheet
 * Loaded on every page. Contains only design tokens and minimal reset.
 * Heavy programme/cohort styles live in frontend.css (loaded conditionally).
 */

:root {
    --vm-navy:   #0D2B4E;
    --vm-teal:   #0E7C6B;
    --vm-gold:   #F59E0B;
    --vm-cream:  #F4F9F8;
    --vm-white:  #ffffff;
    --vm-grey-100: #F8FAFC;
    --vm-grey-200: #E2E8F0;
    --vm-grey-600: #475569;
    --vm-grey-900: #0F172A;

    --vm-ff-display: 'Syne', system-ui, sans-serif;
    --vm-ff-body:    'Inter', system-ui, sans-serif;

    --vm-radius-sm:  4px;
    --vm-radius-md:  8px;
    --vm-radius-lg:  12px;

    --vm-transition: 0.2s ease;
}

/* Shared button styles */
.vm-btn {
    display: inline-block;
    padding: 0.65em 1.4em;
    border-radius: var(--vm-radius-md);
    font-family: var(--vm-ff-body);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color var(--vm-transition), color var(--vm-transition), border-color var(--vm-transition);
    line-height: 1.4;
}

.vm-btn--primary {
    background-color: var(--vm-teal);
    color: var(--vm-white);
    border-color: var(--vm-teal);
}
.vm-btn--primary:hover {
    background-color: #0a6558;
    border-color: #0a6558;
    color: var(--vm-white);
}

.vm-btn--sm {
    padding: 0.4em 0.9em;
    font-size: 0.85rem;
}

/* Status badges */
.vm-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--vm-grey-200);
    color: var(--vm-grey-900);
}
.vm-status--open     { background: #dcfce7; color: #166534; }
.vm-status--upcoming { background: #dbeafe; color: #1e40af; }
.vm-status--full     { background: #fef9c3; color: #854d0e; }
.vm-status--ongoing  { background: #f0fdf4; color: #15803d; }
.vm-status--completed{ background: var(--vm-grey-200); color: var(--vm-grey-600); }
.vm-status--cancelled{ background: #fee2e2; color: #991b1b; }

.vm-badge--full {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    background: #fef9c3;
    color: #854d0e;
    font-size: 0.8rem;
    font-weight: 700;
}

.vm-no-results {
    color: var(--vm-grey-600);
    font-style: italic;
}

.vm-apply-status {
    color: var(--vm-grey-600);
    font-size: 0.9rem;
}
.vm-apply-status--full {
    color: #b45309;
    font-weight: 600;
}

/* ── Layout container ──────────────────────────────────────────────────────── */

.vm-page {
    font-family: var(--vm-ff-body);
    color: var(--vm-grey-900);
}

.vm-container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
}

/* ── Button variants ──────────────────────────────────────────────────────── */

.vm-btn--secondary {
    background-color: transparent;
    color: var(--vm-navy);
    border-color: var(--vm-navy);
}
.vm-btn--secondary:hover {
    background-color: var(--vm-navy);
    color: var(--vm-white);
}

.vm-btn--teal {
    background-color: var(--vm-teal);
    color: var(--vm-white);
    border-color: var(--vm-teal);
}
.vm-btn--teal:hover {
    background-color: #0a6558;
    border-color: #0a6558;
    color: var(--vm-white);
}

.vm-btn--gold {
    background-color: var(--vm-gold);
    color: var(--vm-navy);
    border-color: var(--vm-gold);
}
.vm-btn--gold:hover {
    background-color: #d97706;
    border-color: #d97706;
    color: var(--vm-white);
}

.vm-btn--ghost {
    background-color: transparent;
    color: var(--vm-teal);
    border-color: var(--vm-teal);
}
.vm-btn--ghost:hover {
    background-color: var(--vm-teal);
    color: var(--vm-white);
}

.vm-btn--full {
    display: block;
    width: 100%;
    text-align: center;
}

.vm-btn:disabled,
.vm-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Status pills ─────────────────────────────────────────────────────────── */

.vm-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Application statuses */
.vm-pill--pending        { background: #dbeafe; color: #1e40af; }
.vm-pill--under_review   { background: #ede9fe; color: #5b21b6; }
.vm-pill--accepted       { background: #dcfce7; color: #166534; }
.vm-pill--rejected       { background: #fee2e2; color: #991b1b; }
.vm-pill--withdrawn      { background: var(--vm-grey-200); color: var(--vm-grey-600); }

/* Enrolment statuses */
.vm-pill--pending_payment { background: #fef9c3; color: #854d0e; }
.vm-pill--active          { background: #dcfce7; color: #166534; }
.vm-pill--suspended       { background: #fee2e2; color: #991b1b; }
.vm-pill--completed       { background: var(--vm-grey-200); color: var(--vm-grey-600); }
.vm-pill--cancelled       { background: #fee2e2; color: #991b1b; }

/* Payment statuses */
.vm-pill--paid            { background: #dcfce7; color: #166534; }
.vm-pill--not_paid,
.vm-pill--unpaid          { background: #fef9c3; color: #854d0e; }
.vm-pill--failed          { background: #fee2e2; color: #991b1b; }
.vm-pill--refunded        { background: #e0f2fe; color: #0369a1; }

/* Generic */
.vm-pill--new        { background: #dbeafe; color: #1e40af; }
.vm-pill--in_progress{ background: #ede9fe; color: #5b21b6; }
.vm-pill--closed     { background: var(--vm-grey-200); color: var(--vm-grey-600); }

/* ── Badges ───────────────────────────────────────────────────────────────── */

.vm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--vm-radius-md);
    font-size: 0.875rem;
    font-weight: 600;
}
.vm-badge--success { background: #dcfce7; color: #166534; }
.vm-badge--warning { background: #fef9c3; color: #854d0e; }
.vm-badge--muted   { background: var(--vm-grey-200); color: var(--vm-grey-600); }
.vm-badge--teal    { background: var(--vm-teal); color: var(--vm-white); }

/* ── Tables ───────────────────────────────────────────────────────────────── */

.vm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.vm-table th {
    padding: 10px 14px;
    background: var(--vm-grey-100);
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vm-grey-600);
    border-bottom: 2px solid var(--vm-grey-200);
}
.vm-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--vm-grey-200);
    vertical-align: middle;
}
.vm-table tbody tr:last-child td { border-bottom: none; }
.vm-table tbody tr:hover td { background: var(--vm-grey-100); }

@media (max-width: 640px) {
    .vm-table--responsive thead { display: none; }
    .vm-table--responsive td {
        display: flex;
        justify-content: space-between;
        padding: 8px 14px;
        border-bottom: 1px solid var(--vm-grey-200);
    }
    .vm-table--responsive td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--vm-grey-600);
        font-size: 0.78rem;
        text-transform: uppercase;
    }
    .vm-table--responsive tr { display: block; margin-bottom: 12px; border: 1px solid var(--vm-grey-200); border-radius: var(--vm-radius-md); }
}

/* ── Forms ────────────────────────────────────────────────────────────────── */

.vm-form__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1.25rem;
}

.vm-form__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--vm-navy);
}
.vm-form__label--required::after {
    content: ' *';
    color: #dc2626;
}

.vm-form__input,
.vm-form__select,
.vm-form__textarea {
    width: 100%;
    padding: 0.6em 0.85em;
    border: 1.5px solid var(--vm-grey-200);
    border-radius: var(--vm-radius-md);
    font-family: var(--vm-ff-body);
    font-size: 0.9375rem;
    color: var(--vm-grey-900);
    background: var(--vm-white);
    transition: border-color var(--vm-transition), box-shadow var(--vm-transition);
    box-sizing: border-box;
}
.vm-form__input:focus,
.vm-form__select:focus,
.vm-form__textarea:focus {
    outline: none;
    border-color: var(--vm-teal);
    box-shadow: 0 0 0 3px rgba(14, 124, 107, 0.15);
}
.vm-form__input--error,
.vm-form__select--error,
.vm-form__textarea--error {
    border-color: #dc2626;
}

.vm-form__hint {
    font-size: 0.8rem;
    color: var(--vm-grey-600);
}

.vm-form__feedback {
    padding: 12px 16px;
    border-radius: var(--vm-radius-md);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.vm-form__feedback--success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}
.vm-form__feedback--error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.vm-form__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vm-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-left: 6px;
}
@keyframes vm-spin {
    to { transform: rotate(360deg); }
}

/* ── Progress bars ────────────────────────────────────────────────────────── */

.vm-progress {
    height: 8px;
    background: var(--vm-grey-200);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 6px;
}
.vm-progress__bar {
    height: 100%;
    background: var(--vm-teal);
    border-radius: 99px;
    transition: width 0.4s ease;
    min-width: 2px;
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */

.vm-alert {
    padding: 12px 16px;
    border-radius: var(--vm-radius-md);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    border-left: 4px solid transparent;
}
.vm-alert--success { background: #dcfce7; color: #166534; border-color: #16a34a; }
.vm-alert--error   { background: #fee2e2; color: #991b1b; border-color: #dc2626; }
.vm-alert--warning { background: #fef9c3; color: #854d0e; border-color: #d97706; }
.vm-alert--info    { background: #dbeafe; color: #1e40af; border-color: #2563eb; }

/* ── Section headers ──────────────────────────────────────────────────────── */

.vm-section-title {
    font-family: var(--vm-ff-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--vm-navy);
    margin: 0 0 0.5em;
    line-height: 1.2;
}

.vm-section-subtitle {
    font-size: 1.05rem;
    color: var(--vm-grey-600);
    margin: 0 0 2rem;
    line-height: 1.6;
}

/* ── Responsive visibility ────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .vm-hide-sm { display: none !important; }
}
@media (min-width: 641px) {
    .vm-show-sm-only { display: none !important; }
}