:root { --primary-color: #4361ee; --secondary-color: #3f37c9; --success-color: #4cc9f0; --warning-color: #f72585; --danger-color: #e63946; } body { min-height: 100vh; display: flex; flex-direction: column; background-color: #f8f9fa; margin-top: 0; padding-top: 0; } .countdown { font-family: 'Courier New', Courier, monospace; font-weight: bold; color: var(--danger-color); } main { flex: 1; } .card { border: none; border-radius: 0.75rem; transition: transform 0.2s, box-shadow 0.2s; } .card:hover { transform: translateY(-2px); } .card-header { background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.05); font-weight: 600; } .navbar { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .navbar-brand { font-weight: 700; } .table { background-color: #fff; border-radius: 0.5rem; overflow: hidden; } .table th { font-weight: 600; border-bottom-width: 1px; } .table-hover tbody tr:hover { background-color: rgba(67, 97, 238, 0.05); } .btn { border-radius: 0.5rem; font-weight: 500; } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); } .btn-primary:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); } .badge { font-weight: 500; padding: 0.4em 0.8em; } .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25); } .alert { border: none; border-radius: 0.5rem; } .card.bg-primary, .card.bg-warning, .card.bg-info, .card.bg-danger { border-radius: 1rem; } .card.bg-primary:hover, .card.bg-warning:hover, .card.bg-info:hover, .card.bg-danger:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .nav-tabs .nav-link { font-weight: 500; font-size: 0.9rem; padding: 0.5rem 1rem; color: #6c757d; border: none; } .nav-tabs .nav-link:hover { color: #000; border: none; } .nav-tabs .nav-link.active { color: #000; font-weight: 700; border-bottom: 3px solid #000; background: transparent; } .footer { border-top: 1px solid #e9ecef; } .card.shadow { border-radius: 1rem; } .text-muted.display-1 { color: #dee2e6; } @media (max-width: 768px) { .card-body { padding: 0.75rem; } .table-responsive { font-size: 0.85rem; } } .custom-table thead { position: sticky; top: 0; z-index: 10; } .custom-table thead th { border-bottom: 2px solid #dee2e6; font-size: 0.8rem; color: #495057; font-weight: 600; padding: 0.35rem 0.5rem; white-space: nowrap; background-color: #f1f3f5; } .custom-table tbody tr { transition: background-color 0.2s; } .custom-table tbody td { border-bottom: 1px solid #dee2e6; vertical-align: middle; padding: 0.35rem 0.5rem; font-size: 0.9rem; } .custom-table tbody tr:last-child td { border-bottom: none; } .page-header { margin-bottom: 0.75rem; } .form-control-custom, .form-select-custom, .btn-custom { padding: 0.25rem 0.5rem; font-size: 0.9rem; border-radius: 0.25rem; } .bi-circle, .bi-check-circle-fill { font-size: 1rem; } .countdown-urgent { color: #dc3545; font-weight: 700; } .countdown-warning { color: #fd7e14; font-weight: 700; } @keyframes pulse-bg { 0%, 100% { background-color: #fff3cd; } 50% { background-color: #ffe69c; } } @keyframes pulse-bg-danger { 0%, 100% { background-color: #f8d7da; } 50% { background-color: #f5c2c7; } } @keyframes blink-text { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes blink-banner { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } } .anxiety-warning { animation: pulse-bg 2s infinite; } .anxiety-danger { animation: pulse-bg-danger 1s infinite; } .urgent-banner { position: relative; animation: blink-banner 1.5s infinite; } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } #weekday_group, #day_group { display: none; } .btn-touch { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .copy-feedback { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; opacity: 0; transform: translateY(0.5rem); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .copy-feedback.show { opacity: 1; transform: translateY(0); } .title-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; } .sort-th a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 0.25rem; } .sort-th a:hover { color: var(--primary-color); } .subject-group-row td { background-color: #e9ecef; font-weight: 700; font-size: 0.8rem; padding: 0.2rem 0.5rem; cursor: pointer; user-select: none; } .assignment-row[data-priority="high"] td:first-child { box-shadow: inset 3px 0 0 #dc3545; } .assignment-row[data-priority="medium"] td:first-child { box-shadow: inset 3px 0 0 #fd7e14; } .assignment-row[data-priority="low"] td:first-child { box-shadow: inset 3px 0 0 #adb5bd; } tr.row-pinned { background-color: #fffbe6 !important; } tr.row-pinned:hover { background-color: #fff3cd !important; } .pin-btn.pinned { color: #ffc107; } .pin-btn:not(.pinned) { color: #dee2e6; } .pin-btn:not(.pinned):hover { color: #ffc107; } #bulkBar { position: sticky; top: 0; z-index: 100; background: #4361ee; color: #fff; padding: 0.4rem 0.75rem; border-radius: 0.5rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.75rem; } .kanban-col-body { min-height: 100px; max-height: 70vh; overflow-y: auto; } .kanban-card { background: #fff; border: 1px solid #dee2e6; border-radius: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.85rem; } .kanban-card:last-child { margin-bottom: 0; } tr.kb-focus { outline: 2px solid var(--primary-color); outline-offset: -2px; } @media (max-width: 575.98px) { .custom-table thead { display: none; } .custom-table tbody tr.assignment-row, .custom-table tbody tr.recurring-row, .custom-table tbody tr.user-row { display: block; position: relative; padding: 0.75rem; border-bottom: 1px solid #dee2e6; } .custom-table tbody tr.assignment-row td, .custom-table tbody tr.recurring-row td, .custom-table tbody tr.user-row td { display: inline-block; border: none; padding: 0; } tr.assignment-row td:nth-child(1) { position: absolute; top: 0.75rem; left: 0.75rem; } tr.assignment-row td:nth-child(2) { position: absolute; top: 0.75rem; left: 2.25rem; } tr.assignment-row td:nth-child(3) { display: inline-block; margin-left: 4rem; margin-right: 0.5rem; } tr.assignment-row td:nth-child(4) { display: inline-block; margin-right: 0.5rem; } tr.assignment-row td:nth-child(5) { display: block; margin-left: 0; margin-right: 4rem; margin-bottom: 0.5rem; } tr.assignment-row td:nth-child(6) { display: inline-block; margin-right: 0.5rem; } tr.assignment-row td:nth-child(7) { display: inline-block; } tr.assignment-row td:nth-child(8) { position: absolute; top: 0.75rem; right: 0.75rem; } .countdown-col { white-space: nowrap; font-size: 0.75rem; } tr.recurring-row td:nth-child(1) { display: block; margin-bottom: 0.5rem; margin-right: 3rem; } tr.recurring-row td:nth-child(2), tr.recurring-row td:nth-child(3), tr.recurring-row td:nth-child(4) { display: inline-block; margin-right: 0.5rem; } tr.recurring-row td:nth-child(5) { position: absolute; top: 0.75rem; right: 0.75rem; } tr.user-row td:nth-child(1), tr.user-row td:nth-child(5) { display: none !important; } tr.user-row td:nth-child(2) { display: block; font-weight: bold; margin-bottom: 0.25rem; } tr.user-row td:nth-child(3) { display: block; font-size: 0.85rem; color: #6c757d; margin-bottom: 0.5rem; } tr.user-row td:nth-child(4) { display: inline-block; } tr.user-row td:nth-child(6) { position: absolute; top: 0.75rem; right: 0.75rem; } .stats-table { min-width: auto !important; } .stats-table thead th:nth-child(3), .stats-table thead th:nth-child(4), .stats-table thead th:nth-child(5) { display: none !important; } tr.subject-row td:nth-child(3), tr.subject-row td:nth-child(4), tr.subject-row td:nth-child(5) { display: none !important; } .dashboard-stat-card .display-4 { font-size: 1.5rem !important; } .dashboard-stat-card h2 { font-size: 1.4rem; } .dashboard-stat-card h6 { font-size: 0.7rem; } .urgent-countdown { font-size: 1.05rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } @media (max-width: 767.98px) { .nav-tabs#assignmentTabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-tabs#assignmentTabs::-webkit-scrollbar { display: none; } .nav-tabs#assignmentTabs .ms-auto { margin-left: 0 !important; } }