@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============ NAV ============ */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s;
}
.nav-link:hover {
    background: rgba(255,255,255,0.05);
    color: white;
}
.nav-link.active {
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ============ CARD ============ */
.card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: box-shadow 0.15s, transform 0.15s;
}
.card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

/* ============ BUTTONS ============ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.15s;
    cursor: pointer;
    border: none;
}
.btn-primary { background: #2563eb; color: white; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: #f1f5f9; color: #334155; }
.btn-secondary:hover { background: #e2e8f0; }
.btn-danger { background: #ef4444; color: white; }
.btn-danger:hover { background: #dc2626; }
.btn-success { background: #10b981; color: white; }
.btn-success:hover { background: #059669; }

/* ============ TABLES ============ */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table thead th {
    text-align: left;
    padding: 0.9rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}
.data-table tbody td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}
.data-table tbody tr:hover { background: #f8fafc; }

/* ============ BADGES ============ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-green  { background: #d1fae5; color: #065f46; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-amber  { background: #fef3c7; color: #92400e; }
.badge-purple { background: #ede9fe; color: #5b21b6; }
.badge-gray   { background: #f1f5f9; color: #475569; }

/* ============ TIMETABLE GRID ============ */
.tt-grid {
    display: grid;
    gap: 4px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 0.5rem;
}
.tt-cell {
    background: white;
    padding: 0.6rem;
    min-height: 68px;
    border-radius: 4px;
    font-size: 0.8rem;
    position: relative;
    transition: all 0.15s;
}
.tt-cell.header {
    background: #1e293b;
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.tt-cell.rowhead {
    background: #f1f5f9;
    color: #334155;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.75rem;
}
.tt-cell.rowhead .period-num { font-size: 1.1rem; color: #1e293b; }
.tt-cell.break {
    background: repeating-linear-gradient(45deg, #fef3c7, #fef3c7 10px, #fde68a 10px, #fde68a 20px);
    color: #92400e;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
}
.tt-cell.empty { background: #fafafa; }
.tt-cell.filled {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: grab;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15);
}
.tt-cell.filled:hover { transform: scale(1.03); z-index: 5; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.tt-cell.filled .subject { font-weight: 700; font-size: 0.85rem; }
.tt-cell.filled .teacher { font-size: 0.7rem; opacity: 0.95; }
.tt-cell.filled .room    { font-size: 0.68rem; opacity: 0.9; }
/* Teacher single-view: grade as the big headline */
.tt-cell.filled .sv-grade {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1;
}
/* Clash warning line inside the cell */
.tt-cell.filled .sv-clash {
    font-size: 0.6rem;
    font-weight: 700;
    background: rgba(239,68,68,0.85);
    border-radius: 3px;
    padding: 1px 4px;
    margin-top: 2px;
    letter-spacing: 0;
}
/* Red outline on conflicting cells in single view */
.tt-cell.tt-conflict {
    outline: 3px solid #ef4444;
    outline-offset: -3px;
}
.tt-cell.conflict {
    outline: 2px solid #ef4444;
    outline-offset: -2px;
}
.tt-cell.dragover { background: #dbeafe; outline: 2px dashed #2563eb; }

/* Subject color palette — used in badges, single-view cells, bench chips */
.sub-color-1 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.sub-color-2 { background: linear-gradient(135deg, #ef4444, #dc2626); }
.sub-color-3 { background: linear-gradient(135deg, #10b981, #059669); }
.sub-color-4 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.sub-color-5 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.sub-color-6 { background: linear-gradient(135deg, #ec4899, #db2777); }
.sub-color-7 { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.sub-color-8 { background: linear-gradient(135deg, #f97316, #ea580c); }
.sub-color-9 { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.sub-color-10 { background: linear-gradient(135deg, #84cc16, #65a30d); }

/* Subject text colors — used in mega-grid cells (white bg + colored code text) */
.sub-text-1  { color: #2563eb; }
.sub-text-2  { color: #dc2626; }
.sub-text-3  { color: #059669; }
.sub-text-4  { color: #d97706; }
.sub-text-5  { color: #7c3aed; }
.sub-text-6  { color: #db2777; }
.sub-text-7  { color: #0d9488; }
.sub-text-8  { color: #ea580c; }
.sub-text-9  { color: #4f46e5; }
.sub-text-10 { color: #65a30d; }

/* ============ MODAL ============ */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 40;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.15s;
    backdrop-filter: blur(3px);
}
.modal-dialog {
    background: white; border-radius: 0.75rem;
    max-width: 640px; width: 92%;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: slideUp 0.2s;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes slideUp { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }

/* ============ FORM ============ */
.form-label {
    display: block;
    font-size: 0.85rem; font-weight: 500;
    color: #334155; margin-bottom: 0.35rem;
}
.form-input, .form-select, .form-textarea {
    width: 100% !important;
    padding: 0.55rem 0.75rem !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 0.4rem !important;
    font-size: 0.9rem !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    display: block !important;
    box-sizing: border-box !important;
    transition: border 0.15s, box-shadow 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

/* ============ TOAST ============ */
.toast {
    padding: 0.9rem 1.2rem;
    border-radius: 0.5rem;
    color: white; font-weight: 500;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    animation: slideInRight 0.25s;
    max-width: 340px;
}
.toast-success { background: #10b981; }
.toast-error   { background: #ef4444; }
.toast-info    { background: #2563eb; }
@keyframes slideInRight { from{transform:translateX(100%); opacity:0;} to{transform:translateX(0); opacity:1;} }

/* ============ STAT CARDS ============ */
.stat-card {
    display: flex; align-items: center; gap: 1rem;
    background: white; padding: 1.25rem;
    border: 1px solid #e2e8f0; border-radius: 0.75rem;
}
.stat-icon {
    width: 3rem; height: 3rem; border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    color: white;
}
.stat-num { font-size: 1.75rem; font-weight: 700; color: #0f172a; line-height: 1; }
.stat-label { font-size: 0.85rem; color: #64748b; margin-top: 0.25rem; }

/* ============ SPINNER ============ */
.spinner {
    display: inline-block; width: 1.5rem; height: 1.5rem;
    border: 3px solid #e2e8f0; border-top-color: #2563eb;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ MISC ============ */
.chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    background: #f1f5f9; border-radius: 999px;
    font-size: 0.75rem; color: #475569;
    margin-right: 0.25rem;
}

.progress-bar {
    height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden;
}
.progress-fill {
    height: 100%; background: linear-gradient(90deg, #10b981, #059669);
    transition: width 0.5s ease;
}

/* ============ MEGA GRID (all classes matrix — aScTimetables style) ============ */
.mg-wrap {
    background: #1f2937;
    padding: 1px;
    overflow-x: auto;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}
.mg-table {
    border-collapse: collapse;
    min-width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: white;
}
.mg-table th, .mg-table td {
    border: 1px solid #94a3b8;
    padding: 0;
    text-align: center;
    font-size: 9px;
    height: 22px;
    min-width: 28px;
    max-width: 32px;
    box-sizing: border-box;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
}
.mg-table thead th {
    background: #f8fafc;
    font-weight: 700;
    color: #0f172a;
    padding: 1px 2px;
}
.mg-table th.mg-day-hdr {
    background: #1e293b;
    color: #f1f5f9;
    padding: 2px 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Dark left border marks the start of each new day */
.mg-table .mg-day-start {
    border-left: 3px solid #1e293b !important;
}
.mg-table th.mg-period-num {
    background: #f1f5f9;
    font-size: 8px;
    color: #64748b;
    font-weight: 600;
}
.mg-table th.mg-classlbl {
    background: #f8fafc;
    text-align: left;
    padding: 0 4px;
    font-weight: 700;
    font-size: 10px;
    color: #0f172a;
    min-width: 38px;
    max-width: 44px;
    position: sticky; left: 0; z-index: 3;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}
.mg-table td.mg-classlbl {
    background: #f8fafc;
    text-align: left;
    padding: 0 4px;
    font-weight: 700;
    font-size: 10px;
    color: #0f172a;
    position: sticky; left: 0; z-index: 2;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}
.mg-table td.mg-cell {
    cursor: pointer;
    background: #ffffff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: -0.2px;
    text-shadow: none;
    line-height: 22px;
    transition: transform 0.1s, background 0.1s;
}
.mg-table td.mg-cell:hover {
    transform: scale(1.5);
    z-index: 10;
    position: relative;
    background: #f1f5f9;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    outline: 2px solid #64748b;
}
/* Subject text colors — higher specificity so they beat .mg-table td { color:#111 } */
.mg-table td.mg-cell.sub-text-1  { color: #2563eb; }
.mg-table td.mg-cell.sub-text-2  { color: #dc2626; }
.mg-table td.mg-cell.sub-text-3  { color: #059669; }
.mg-table td.mg-cell.sub-text-4  { color: #d97706; }
.mg-table td.mg-cell.sub-text-5  { color: #7c3aed; }
.mg-table td.mg-cell.sub-text-6  { color: #db2777; }
.mg-table td.mg-cell.sub-text-7  { color: #0d9488; }
.mg-table td.mg-cell.sub-text-8  { color: #ea580c; }
.mg-table td.mg-cell.sub-text-9  { color: #4f46e5; }
.mg-table td.mg-cell.sub-text-10 { color: #65a30d; }
.mg-cell.selected {
    outline: 3px solid #facc15;
    outline-offset: -2px;
    z-index: 5;
}
.mg-empty {
    background: repeating-linear-gradient(45deg, #f9fafb, #f9fafb 4px, #f3f4f6 4px, #f3f4f6 8px);
}

/* Break separator columns — narrow with vertical text */
.mg-table th.mg-break-hdr {
    background: #e2e8f0;
    color: #64748b;
    font-size: 7px;
    font-weight: 700;
    min-width: 12px;
    max-width: 14px;
    width: 12px;
    padding: 1px 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    letter-spacing: 0.5px;
    line-height: 12px;
}
.mg-table td.mg-break {
    background: #e2e8f0;
    min-width: 12px;
    max-width: 14px;
    width: 12px;
    cursor: default;
    vertical-align: middle;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 8px;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
    letter-spacing: 0.5px;
    padding: 0;
}

/* Conflicting lesson — red ring + soft pulse */
.mg-cell.mg-conflict {
    outline: 3px solid #ef4444;
    outline-offset: -2px;
    z-index: 6;
    animation: mg-pulse 1.2s ease-in-out infinite;
}
@keyframes mg-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
    50%      { box-shadow: 0 0 0 4px rgba(239,68,68,0.15); }
}

/* Drag-over feedback (cells + bench) */
.mg-cell.mg-dragover,
.mg-empty.mg-dragover {
    outline: 3px dashed #2563eb;
    outline-offset: -2px;
    z-index: 7;
}
.bench-zone.mg-dragover {
    outline: 2px dashed #2563eb;
    background: #eff6ff;
}

/* Bench tray */
.bench-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    align-items: center;
    padding: 8px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}
.bench-tray.bench-empty { border-style: dashed; }
.bench-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border-radius: 8px;
    color: white;
    font-weight: 700;
    font-size: 13px;
    cursor: grab;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.bench-chip:active { cursor: grabbing; }
.bench-chip .bench-cls {
    font-weight: 600;
    font-size: 11px;
    background: rgba(255,255,255,0.25);
    padding: 1px 6px;
    border-radius: 6px;
}
.bench-chip .bench-x {
    border: none;
    background: rgba(0,0,0,0.18);
    color: white;
    width: 18px; height: 18px;
    border-radius: 50%;
    line-height: 1;
    font-size: 11px;
    cursor: pointer;
}
.bench-chip .bench-x:hover { background: rgba(0,0,0,0.4); }

/* Availability / time-off editor */
.avail-btn { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; }
.avail-btn:hover { outline: 2px solid #cbd5e1; border-radius: 3px; }
.avail-grid { border-collapse: collapse; }
.avail-grid th { padding: 3px 8px; font-size: 12px; color: #475569; font-weight: 600; }
.avail-grid td { padding: 2px; }
.avail-cell { width: 30px; height: 24px; border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer; padding: 0; }
.avail-cell.on  { background: #22c55e; }
.avail-cell.off { background: #ef4444; }
.avail-cell.inline-block { width: 16px; height: 16px; margin-right: 2px; }

/* Conflict reason line in the timetable info panel */
.mg-info-conflict {
    margin-top: 6px;
    background: #7f1d1d;
    color: #fecaca;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

/* Bottom info panel */
.mg-info {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    padding: 16px;
    background: #0f172a;
    color: white;
    border-radius: 0 0 4px 4px;
    margin-top: -1px;
}
.mg-info-left {
    display: flex; align-items: center; gap: 14px;
}
.mg-info-left .mg-info-badge {
    width: 60px; height: 60px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800;
    color: white;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2);
}
.mg-info-left h3 { font-size: 18px; font-weight: 700; margin: 0; color: #f4f4f5; }
.mg-info-left .mg-info-sub { color: #cbd5e1; font-size: 13px; margin-top: 2px; }
.mg-info-left .mg-info-t   { color: #fde68a; font-size: 12px; margin-top: 2px; font-weight: 500; }

.mg-info-right {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: flex-start;
}
.mg-tile {
    background: rgba(255,255,255,0.1);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    border-left: 3px solid rgba(255,255,255,0.3);
}