/* ---------- ROOT ---------- */

:root {
    /* MAIN SCALE MODIFIER */
    --scale: 1.15;

    --bg-body: #020817;
    --bg-gradient: radial-gradient(120% 180% at 0% 0%, #111827 0, #020817 40%, #020817 100%);
    --bg-surface: #0b1020;
    --bg-surface-alt: #111827;

    --accent: #38bdf8;
    --accent-hover: #0ea5e9;
    --accent-soft: rgba(56, 189, 248, 0.24);

    --text-main: #eef2ff;
    --text-muted: #9ca3af;

    --border-subtle: rgba(148, 163, 253, 0.32);

    --radius-xl: calc(9px * var(--scale));
    --radius-md: calc(4px * var(--scale));

    --shadow-soft: 0 calc(7px * var(--scale)) calc(16px * var(--scale)) rgba(15, 23, 42, 0.6);

    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, -system-ui, sans-serif;
}

html {
    font-size: calc(16px * var(--scale));
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans), sans-serif;
    background: var(--bg-gradient);
    color: var(--text-main);
}

/* ---------- GLOBAL LAYOUT ---------- */

.page-wrapper {
    max-width: calc(1200px * var(--scale));
    margin: calc(26px * var(--scale)) auto calc(40px * var(--scale));
    padding: calc(22px * var(--scale)) calc(22px * var(--scale)) calc(26px * var(--scale));
    background:
        radial-gradient(120% 220% at top, rgba(56, 189, 248, 0.02), transparent),
        var(--bg-surface);
    border-radius: var(--radius-xl);
    border: calc(1px * var(--scale)) solid rgba(148, 163, 253, 0.18);
    box-shadow: var(--shadow-soft);
}

.page-narrow {
    max-width: calc(900px * var(--scale));
    margin: 0 auto;
}

.page-wide {
    max-width: calc(1200px * var(--scale));
    margin: calc(36px * var(--scale)) auto;
}

/* ---------- TYPO & LINKS ---------- */

h1,
h2,
h3,
h4,
h5 {
    color: #f9fafb;
    letter-spacing: 0.01em;
}

.text-muted {
    color: var(--text-muted) !important;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

/* ---------- NAVBAR ---------- */

.main-navbar {
    background: rgba(6, 12, 30, 0.98);
    border-bottom: calc(1px * var(--scale)) solid rgba(148, 163, 253, 0.12);
    backdrop-filter: blur(calc(14px * var(--scale)));
    box-shadow: 0 calc(14px * var(--scale)) calc(40px * var(--scale)) rgba(15, 23, 42, 0.7);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.brand-pill {
    width: calc(28px * var(--scale));
    height: calc(28px * var(--scale));
    border-radius: calc(4px * var(--scale));
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #020817;
    font-weight: 700;
    box-shadow: 0 calc(6px * var(--scale)) calc(16px * var(--scale)) rgba(56, 189, 248, 0.45);
}

.brand-subtitle {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.main-nav-links .nav-link {
    padding: 0.55rem 0.85rem;
    border-radius: calc(4px * var(--scale));
    color: var(--text-muted);
    font-size: 0.86rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.18s ease-out;
}

.main-nav-links .nav-link i {
    font-size: 0.8rem;
}

.main-nav-links .nav-link:hover {
    color: var(--accent-hover);
    background-color: rgba(15, 23, 42, 0.88);
}

.main-nav-links .nav-link.active {
    color: var(--accent);
    background-color: var(--accent-soft);
    box-shadow: 0 0 calc(22px * var(--scale)) rgba(56, 189, 248, 0.18);
}

/* ---------- ALERTS ---------- */

.alerts-wrapper {
    position: fixed;
    top: calc(80px * var(--scale));
    right: calc(16px * var(--scale));
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.alert-soft {
    background: rgba(15, 23, 42, 0.98);
    color: var(--text-main);
    border-radius: var(--radius-md);
    border: calc(1px * var(--scale)) solid var(--border-subtle);
    padding: 0.65rem 0.8rem;
    box-shadow: var(--shadow-soft);
    font-size: 0.8rem;
}

.alert-soft .btn-close {
    filter: invert(1) grayscale(1);
}

/* ---------- CARDS ---------- */

.card {
    background: var(--bg-surface-alt);
    border-radius: calc(4px * var(--scale));
    border: calc(1px * var(--scale)) solid rgba(75, 85, 99, 0.85);
    box-shadow: 0 calc(4px * var(--scale)) calc(40px * var(--scale)) rgba(15, 23, 42, 0.65);
    color: var(--text-main);
}

.card-header {
    background: transparent;
    border-bottom: calc(1px * var(--scale)) solid rgba(75, 85, 99, 0.72);
    font-weight: 500;
}

.card-elevated {
    border-radius: var(--radius-xl);
    border: calc(1px * var(--scale)) solid var(--border-subtle);
    box-shadow: var(--shadow-soft);
    background: var(--bg-surface-alt);
    transition: transform 0.18s ease-out, box-shadow 0.25s ease-out;
}

.card-elevated:hover {
    transform: translateY(calc(-4px * var(--scale)));
    box-shadow: 0 calc(22px * var(--scale)) calc(50px * var(--scale)) rgba(56, 189, 248, 0.25);
    border-color: var(--accent);
}

.card-danger {
    border-radius: var(--radius-xl);
    border: calc(1px * var(--scale)) solid rgba(248, 113, 113, 0.35);
    box-shadow: 0 calc(18px * var(--scale)) calc(42px * var(--scale)) rgba(15, 23, 42, 0.8);
    background:
        radial-gradient(120% 180% at top left,
            rgba(248, 113, 113, 0.06),
            transparent),
        var(--bg-surface-alt);
}

/* ---------- TABLES ---------- */

.table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--text-main);
    font-size: 0.86rem;
    background-color: rgba(10, 15, 30, 0.95);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.table thead {
    background: linear-gradient(180deg, rgba(20, 28, 50, 0.98), rgba(10, 15, 25, 0.98));
    box-shadow: inset 0 calc(-2px * var(--scale)) 0 rgba(56, 189, 248, 0.25);
}

.table thead th {
    border-bottom: calc(1px * var(--scale)) solid rgba(56, 189, 248, 0.35);
    color: #e2e8f0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: rgba(20, 28, 50, 0.95);
}

.table tbody tr {
    background-color: rgba(10, 15, 25, 0.9);
    transition: background 0.18s ease-out, transform 0.12s ease-out;
}

.table tbody tr:nth-child(even) {
    background-color: rgba(12, 18, 32, 0.95);
}

.table tbody tr:hover {
    background-color: rgba(56, 189, 248, 0.09);
    transform: translateY(calc(-1px * var(--scale)));
}

.table td,
.table th {
    border-color: rgba(75, 85, 99, 0.45);
    vertical-align: middle;
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
}

.table-elevated {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
}

.table-elevated thead tr {
    background: linear-gradient(180deg, rgba(25, 35, 60, 0.98), rgba(15, 20, 35, 0.98));
}

.table-elevated th {
    border-color: rgba(56, 189, 248, 0.4);
}

.table-elevated td {
    border-color: rgba(56, 189, 248, 0.12);
}

/* ---------- FORMS ---------- */

.form-control,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
select {
    background-color: rgba(15, 23, 42, 0.96);
    border-radius: calc(4px * var(--scale));
    border: calc(1px * var(--scale)) solid rgba(75, 85, 99, 0.9);
    color: var(--text-main);
    font-size: 0.86rem;
    padding: 0.5rem 0.7rem;
}

.form-control:focus,
textarea:focus,
input:focus,
select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 calc(1px * var(--scale)) var(--accent-soft);
    background-color: rgba(6, 12, 30, 1);
    color: #e5e7eb;
}

/* ---------- BUTTONS ---------- */

.btn {
    font-family: var(--font-sans), sans-serif;
    font-size: 0.82rem;
    padding: 0.45rem 1rem;
    border-radius: calc(4px * var(--scale));
    border: none;
    font-weight: 600;
    color: #020817;
    transition: all 0.18s ease-out;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: 0 calc(10px * var(--scale)) calc(26px * var(--scale)) rgba(15, 23, 42, 0.4);
}

.btn:hover {
    transform: translateY(calc(-1px * var(--scale)));
    box-shadow: 0 calc(14px * var(--scale)) calc(34px * var(--scale)) rgba(15, 23, 42, 0.55);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    box-shadow: 0 calc(10px * var(--scale)) calc(26px * var(--scale)) rgba(56, 189, 248, 0.35);
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 calc(10px * var(--scale)) calc(26px * var(--scale)) rgba(34, 197, 94, 0.35);
}

.btn-success:hover {
    background: #15803d;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 calc(10px * var(--scale)) calc(26px * var(--scale)) rgba(239, 68, 68, 0.35);
}

.btn-danger:hover {
    background: #b91c1c;
}

.btn-warning {
    background: linear-gradient(135deg, #facc15, #eab308);
    box-shadow: 0 calc(10px * var(--scale)) calc(26px * var(--scale)) rgba(250, 204, 21, 0.35);
}

.btn-warning:hover {
    background: #ca8a04;
}

.btn-secondary {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    box-shadow: 0 calc(10px * var(--scale)) calc(26px * var(--scale)) rgba(107, 114, 128, 0.35);
}

.btn-secondary:hover {
    background: #4b5563;
}

.btn-outline-primary {
    border: calc(1px * var(--scale)) solid var(--accent);
    color: var(--accent);
    background: rgba(56, 189, 248, 0.08);
    box-shadow: 0 0 0 rgba(56, 189, 248, 0);
    font-weight: 600;
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #020817;
    box-shadow: 0 calc(10px * var(--scale)) calc(26px * var(--scale)) rgba(56, 189, 248, 0.35);
    transform: translateY(calc(-1px * var(--scale)));
}

.btn-outline-success {
    border: calc(1px * var(--scale)) solid #22c55e;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
    box-shadow: 0 0 0 rgba(34, 197, 94, 0);
    font-weight: 600;
}

.btn-outline-success:hover {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #020817;
    box-shadow: 0 calc(10px * var(--scale)) calc(26px * var(--scale)) rgba(34, 197, 94, 0.35);
    transform: translateY(calc(-1px * var(--scale)));
}

.btn-outline-danger {
    border: calc(1px * var(--scale)) solid #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    box-shadow: 0 0 0 rgba(239, 68, 68, 0);
    font-weight: 600;
}

.btn-outline-danger:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #020817;
    box-shadow: 0 calc(10px * var(--scale)) calc(26px * var(--scale)) rgba(239, 68, 68, 0.35);
    transform: translateY(calc(-1px * var(--scale)));
}

.btn-outline-warning {
    border: calc(1px * var(--scale)) solid #facc15;
    color: #facc15;
    background: rgba(250, 204, 21, 0.08);
    box-shadow: 0 0 0 rgba(250, 204, 21, 0);
    font-weight: 600;
}

.btn-outline-warning:hover {
    background: linear-gradient(135deg, #facc15, #eab308);
    color: #020817;
    box-shadow: 0 calc(10px * var(--scale)) calc(26px * var(--scale)) rgba(250, 204, 21, 0.35);
    transform: translateY(calc(-1px * var(--scale)));
}

.btn-outline-info {
    border: calc(1px * var(--scale)) solid #38bdf8;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    box-shadow: 0 0 0 rgba(56, 189, 248, 0);
    font-weight: 600;
}

.btn-outline-info:hover {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    color: #020817;
    box-shadow: 0 calc(10px * var(--scale)) calc(26px * var(--scale)) rgba(56, 189, 248, 0.35);
    transform: translateY(calc(-1px * var(--scale)));
}

.btn-outline-secondary {
    border: calc(1px * var(--scale)) solid rgba(148, 163, 253, 0.45);
    color: var(--text-muted);
    background: rgba(148, 163, 253, 0.08);
    font-weight: 600;
}

.btn-outline-secondary:hover {
    background: linear-gradient(135deg, rgba(148, 163, 253, 0.6), rgba(99, 102, 241, 0.85));
    color: #020817;
    box-shadow: 0 calc(10px * var(--scale)) calc(26px * var(--scale)) rgba(99, 102, 241, 0.35);
    transform: translateY(calc(-1px * var(--scale)));
}

.btn-sm {
    padding: 0.25rem 0.7rem;
    font-size: 0.74rem;
}

/* ---------- BADGES ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(4px * var(--scale));
    padding: 0.22rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #020817;
}

.badge-warning {
    background: linear-gradient(135deg, #facc15, #eab308);
    color: #020817;
}

.badge-info {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    color: #020817;
}

.badge-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #020817;
}

.badge-secondary {
    background: linear-gradient(135deg, #818cf8, #6366f1);
    color: #020817;
}

/* ---------- FOOTER ---------- */

.app-footer {
    padding: calc(10px * var(--scale)) 0 calc(18px * var(--scale));
    color: var(--text-muted);
    font-size: 0.72rem;
    margin-top: calc(-6px * var(--scale));
}

/* ---------- LISTS ---------- */

.list-group-item {
    color: var(--text-main);
}

.list-group-item strong {
    color: #f9fafb;
}

/* ---------- TODAY HIGHLIGHT IN SCHEDULE TABLES ---------- */

.today-column {
    background: rgba(9, 9, 18, 0.98) !important;
    color: var(--accent);
    font-weight: 700;
    box-shadow:
        inset 0 calc(-2px * var(--scale)) 0 rgba(56, 189, 248, 0.7),
        inset 0 calc(1px * var(--scale)) 0 rgba(15, 23, 42, 0.9);
    position: sticky;
    top: 0;
    z-index: 5;
}

.today-column span,
.today-column small {
    color: var(--accent);
}

.today-cell {
    background-color: rgba(15, 23, 42, 0.96) !important;
    box-shadow: inset 0 0 0 calc(1px * var(--scale)) rgba(56, 189, 248, 0.18);
    position: relative;
}