[v-cloak] { display: none; }

:root {
    --brand-primary:        #1B4332;
    --brand-primary-dark:   #0D2B1D;
    --brand-primary-light:  #2D6A4F;
    --brand-secondary:      #C9A84C;
    --brand-secondary-dark: #A8862A;
    --brand-secondary-light:#E9C46A;
    --brand-bg:             #F8FAF9;
    --brand-surface:        #FFFFFF;
    --brand-border:         #D4E6DC;
    --brand-text:           #0D2B1D;
    --brand-text-muted:     #6B8F7A;

    /* Override Bootstrap theme colours */
    --bs-primary:           #1B4332;
    --bs-primary-rgb:       27, 67, 50;
    --bs-link-color:        #1B4332;
    --bs-link-hover-color:  #2D6A4F;
    --bs-focus-ring-color:  rgba(27, 67, 50, .25);
}

/* ── Inputs & selects ──────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary-light);
    box-shadow: 0 0 0 3px rgba(27, 67, 50, .12);
    outline: none;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn { border-radius: 10px !important; }
.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(27, 67, 50, .2) !important;
    outline: none !important;
}
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-primary:hover,
.btn-primary:active {
    background-color: var(--brand-primary-light);
    border-color: var(--brand-primary-light);
}

/* ── Links ─────────────────────────────────────────────── */
a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-light); }

/* ── Dark mode ─────────────────────────────────────────── */
[data-theme="dark"] {
    --brand-bg:           #111311;
    --brand-surface:      #1A1D1A;
    --brand-border:       #292C29;
    --brand-text:         #E8EBE8;
    --brand-text-muted:   #8A908A;
    --brand-primary:      rgba(255,255,255,.68);
    --brand-primary-light:rgba(255,255,255,.85);
    --bs-body-bg:         #111311;
    --bs-body-color:      #E8EBE8;
    --bs-border-color:    #292C29;
    --bs-link-color:      rgba(255,255,255,.68);
    --bs-link-hover-color:rgba(255,255,255,.85);
}

/* Elements that use brand-primary as a BACKGROUND need a real colour */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-brand,
[data-theme="dark"] [style*="background:var(--brand-primary)"] {
    background-color: #2A6A4F !important;
    border-color: #2A6A4F !important;
    color: #fff !important;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .btn-brand:hover,
[data-theme="dark"] [style*="background:var(--brand-primary)"]:hover {
    background-color: #357A5F !important;
    border-color: #357A5F !important;
}
[data-theme="dark"] .avatar                          { background: #2A6A4F !important; }
[data-theme="dark"] .photo-placeholder               { background: #2A6A4F !important; }
[data-theme="dark"] .status-tab.active               { background: #2A6A4F !important; border-color: #2A6A4F !important; }
[data-theme="dark"] .page-btn.pg-active              { background: #2A6A4F !important; border-color: #2A6A4F !important; }
[data-theme="dark"] .action-btn.primary              { background: #2A6A4F !important; border-color: #2A6A4F !important; }
[data-theme="dark"] .action-toggle button.active-promote { background: #2A6A4F !important; }
[data-theme="dark"] .dot-school                      { background: #2A6A4F !important; }
[data-theme="dark"] .form-check-input[type="checkbox"]:checked {
    background: #2A6A4F !important;
    border-color: #2A6A4F !important;
}

[data-theme="dark"] .card {
    background-color: var(--brand-surface);
    border-color: var(--brand-border);
    color: var(--brand-text);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--brand-bg);
    border-color: var(--brand-border);
    color: var(--brand-text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--brand-text-muted); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--brand-bg);
    color: var(--brand-text);
}
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238A908A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--brand-border);
    --bs-table-color: var(--brand-text);
    --bs-table-accent-bg: transparent;
    --bs-table-hover-bg: rgba(255,255,255,.04);
    --bs-table-hover-color: var(--brand-text);
    color: var(--brand-text);
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255,255,255,.025);
    color: var(--brand-text);
}
[data-theme="dark"] .table > :not(caption) > * > * {
    border-bottom-color: var(--brand-border);
}

[data-theme="dark"] .modal-content {
    background-color: var(--brand-surface);
    border-color: var(--brand-border);
    color: var(--brand-text);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--brand-border);
}

[data-theme="dark"] .form-check-input[type="checkbox"] {
    background: var(--brand-surface);
    border-color: var(--brand-border);
}

/* Status badges */
[data-theme="dark"] .badge-enrolled  { background: #0d2a16; color: #86efac; }
[data-theme="dark"] .badge-withdrawn { background: #2d1f0e; color: #fcd34d; }
[data-theme="dark"] .badge-graduated { background: #0c1e40; color: #93c5fd; }
[data-theme="dark"] .badge-suspended { background: #2d0e0e; color: #fca5a5; }

/* ── Custom checkbox ───────────────────────────────────── */
.form-check-input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--brand-border);
    border-radius: 5px;
    background: var(--brand-surface);
    cursor: pointer;
    position: relative;
    transition: border-color .15s, background .15s, box-shadow .15s;
    margin: 0;
}
.form-check-input[type="checkbox"]:hover {
    border-color: var(--brand-primary-light);
}
.form-check-input[type="checkbox"]:checked {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}
.form-check-input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.form-check-input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(27,67,50,.15);
    border-color: var(--brand-primary-light);
}