::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f9fafb; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    body { background: white; }
    .report-card { box-shadow: none; border: 2px solid #000; }
    
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fadeIn 0.3s ease-out; }

.glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

:root {
    --primary: #1e40af;
    --primary-dark: #1e3a8a;
    --secondary: #f59e0b;
    --success: #10b981;
    --danger: #ef4444;
}

.grade-excellent { color: #059669; }
.grade-good { color: #2563eb; }
.grade-average { color: #d97706; }
.grade-poor { color: #dc2626; }

.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hover-card { transition: all 0.3s ease; }
.hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 1000;
    max-width: 300px;
    word-wrap: break-word;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.toast.success { background-color: #10b981; }
.toast.error   { background-color: #ef4444; }
.toast.info    { background-color: #3b82f6; }

.sidebar-mobile { transform: translateX(-100%); transition: transform 0.3s ease; }
.sidebar-mobile.open { transform: translateX(0); }

.rank-1 { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #000; }
.rank-2 { background: linear-gradient(135deg, #c0c0c0, #e8e8e8); color: #000; }
.rank-3 { background: linear-gradient(135deg, #cd7f32, #daa520); color: #fff; }

.real-time-pulse,
.real-time-indicator {
    animation: realTimePulse 2s infinite;
}

@keyframes realTimePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    50%       { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
}

.grade-input-existing {
    background-color: #f3f4f6 !important;
    cursor: not-allowed !important;
    color: #6b7280 !important;
}

.grade-input-new {
    background-color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.grade-input-new:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

.history-tooltip { position: relative; cursor: help; }
.history-tooltip:hover::after {
    content: attr(data-history);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
}

/* Action-icon tooltips — Staff/Teacher & Student modules. Short action-name
   labels only, revealed INSTANTLY on hover or keyboard focus (no transition
   delay, unlike the native title attribute). The bubble renders above the
   icon inside the same scroll container as the table; for the first data row
   it overlaps the thead area, so it is never clipped by the container's
   overflow. Right-anchored so the last (Delete) icon never clips at the
   table's right edge. */
.action-tip { position: relative; }
.action-tip .action-tip-label {
    position: absolute;
    bottom: calc(100% + 8px);
    right: -6px;
    background: #1f2937;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: 7px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
}
.action-tip .action-tip-label::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 10px;
    border: 5px solid transparent;
    border-top-color: #1f2937;
}
.action-tip:hover .action-tip-label,
.action-tip:focus-visible .action-tip-label {
    opacity: 1;
    visibility: visible;
}

.connection-status { transition: all 0.3s ease; }
.connection-status.connected    { background-color: #10b981; }
.connection-status.disconnected { background-color: #ef4444; }

header.sticky { z-index: 50 !important; }

/* The open sidebar and its dim overlay must layer ABOVE the sticky header.
   Without this, the header (z-50) covers the sidebar brand block, leaving
   only the role subtitle (e.g. "Guidance Office") poking out over the
   top bar. Applies to every portal that shares this stylesheet. */
#sidebar { z-index: 60 !important; }
#mobile-overlay { z-index: 55 !important; }

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Custom Scrollbar for Sidebar Scalability */
.custom-scrollbar {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #cbd5e1 transparent; /* Firefox */
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Tailwind slate-300 */
    border-radius: 10px;
}

/* Dark mode scrollbar support */
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #475569; /* Tailwind slate-600 */
}

/* === GradeBook: Excel-style class record === */
.gb-col-item  { width: 68px; min-width: 68px; max-width: 68px; }
.gb-col-total { width: 78px; min-width: 78px; }
.gb-col-wtd   { width: 58px; min-width: 58px; }
.gb-score-input { width: 100%; text-align: center; }

.gb-section-ww-start { border-left: 2px solid #2563eb !important; }
.gb-section-pt-start { border-left: 2px solid #16a34a !important; }
.gb-section-me-start { border-left: 2px solid #ea580c !important; }
.gb-initial-start    { border-left: 2px solid #9333ea !important; }

/* === Academic Heat Map: grade color bands === */
.hm-band-red    { background-color: #fecaca; color: #7f1d1d; } /* 60-74 */
.hm-band-orange { background-color: #fed7aa; color: #7c2d12; } /* 75-77 */
.hm-band-lorange{ background-color: #ffedd5; color: #9a3412; } /* 78-80 */
.hm-band-lgreen { background-color: #dcfce7; color: #166534; } /* 81-89 */
.hm-band-yellow { background-color: #fef9c3; color: #713f12; } /* 90-100 */
.hm-band-empty  { background-color: #f9fafb; color: #9ca3af; }

/* === Announcements: lock rich-text content to Arial wherever it renders === */
.ql-editor {
    font-family: Arial, Helvetica, sans-serif;
}
.ql-editor.announcement-content {
    padding: 0;
}

/* Fallback in case the Tailwind CDN build in use predates core line-clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Receivables — highlight the student whose Collect panel is open, so the
   cashier keeps their place after a transaction refreshes the table in place. */
tr.rcv-row-selected > td {
    background-color: #ecfdf5; /* emerald-50 */
    box-shadow: inset 2px 0 0 0 #10b981; /* emerald-500 left rail */
}

/* Standardized modal Close (X) injected by /js/modal-ux.js */
.taps-modal-x {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 1.25rem;
    line-height: 1;
    color: #6b7280; /* gray-500 */
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 20;
    transition: background-color .15s ease, color .15s ease;
}
.taps-modal-x:hover {
    background-color: #f3f4f6; /* gray-100 */
    color: #111827; /* gray-900 */
}