:root { --primary: #0f172a; --primary-light: #1e293b; --accent: #1e40af; --accent-hover: #1d4ed8; --accent-soft: #eff6ff; --bg-app: #f1f5f9; --bg-card: #ffffff; --bg-header: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); --bg-table-header: #f8fafc; --bg-day-column: #f8fafc; --color-black-text: #1e293b; --color-black-border: #475569; --color-black-bg: #f1f5f9; --color-red-text: #dc2626; --color-red-border: #f87171; --color-red-bg: #fee2e2; --color-blue-text: #2563eb; --color-blue-border: #60a5fa; --color-blue-bg: #dbeafe; --border-color: #e2e8f0; --border-color-hover: #cbd5e1; --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-family); background-color: var(--bg-app); color: var(--primary-light); line-height: 1.5; padding: 24px 16px; min-height: 100vh; } .app-container { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .app-header { background: var(--bg-header); color: white; padding: 24px 32px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; position: relative; overflow: hidden; } .app-header::before { content: ""; position: absolute; top: -50%; right: -10%; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.03); border-radius: 50%; pointer-events: none; } .logo-container { display: flex; align-items: center; gap: 12px; } .app-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2.5px solid rgba(255, 255, 255, 0.95); background-color: white; box-shadow: var(--shadow-sm); flex-shrink: 0; } .app-header h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .week-display-badge { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(4px); padding: 8px 18px; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.95rem; font-weight: 500; color: #f8fafc; box-shadow: var(--shadow-sm); } .toolbar-section { background-color: var(--bg-card); border-radius: var(--radius-md); padding: 18px 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .navigation-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-family); font-size: 0.9rem; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); height: 38px; } .btn-primary { background-color: var(--accent); color: white; } .btn-primary:hover { background-color: var(--accent-hover); box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2); } .btn-secondary { background-color: white; border-color: var(--border-color); color: var(--primary-light); } .btn-secondary:hover { background-color: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .btn-primary-outline { background-color: transparent; border: 1px solid var(--accent); color: var(--accent); } .btn-primary-outline:hover { background-color: var(--accent-soft); } .btn-danger { background-color: #ef4444; color: white; } .btn-danger:hover { background-color: #dc2626; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2); } .select-wrapper { position: relative; display: inline-flex; align-items: center; } .custom-select { appearance: none; -webkit-appearance: none; font-family: var(--font-family); font-size: 0.9rem; font-weight: 500; color: var(--primary-light); background-color: white; border: 1px solid var(--border-color); padding: 8px 36px 8px 16px; border-radius: var(--radius-sm); cursor: pointer; height: 38px; transition: all 0.2s; outline: none; min-width: 250px; } .custom-select:hover, .custom-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .select-chevron { position: absolute; right: 12px; color: #64748b; pointer-events: none; } .filter-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .filter-label { font-size: 0.85rem; font-weight: 600; color: #64748b; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .custom-multiselect { position: relative; font-family: var(--font-family); min-width: 240px; z-index: 100; } .multiselect-trigger { display: flex; justify-content: space-between; align-items: center; background-color: #f1f5f9; border: 1px solid #cbd5e1; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; font-weight: 500; color: #334155; transition: all 0.2s ease; user-select: none; } .multiselect-trigger:hover { background-color: #e2e8f0; border-color: #94a3b8; } .multiselect-trigger .chevron-icon { transition: transform 0.2s ease; color: #64748b; } .custom-multiselect.open .multiselect-trigger .chevron-icon { transform: rotate(180deg); } .multiselect-options { position: absolute; top: 100%; left: 0; width: 100%; margin-top: 4px; background-color: white; border: 1px solid #e2e8f0; border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); max-height: 280px; overflow-y: auto; padding: 6px 0; z-index: 101; } .multiselect-option { display: flex; align-items: center; padding: 8px 14px; font-size: 0.85rem; color: #475569; cursor: pointer; transition: background-color 0.15s ease; user-select: none; } .multiselect-option:hover { background-color: #f8fafc; color: var(--primary); } .multiselect-option input[type="checkbox"] { display: none; } .multiselect-option .custom-checkbox { width: 16px; height: 16px; border: 1.5px solid #cbd5e1; border-radius: 3px; margin-right: 10px; display: inline-flex; align-items: center; justify-content: center; position: relative; transition: all 0.15s ease; background-color: white; } .multiselect-option input[type="checkbox"]:checked + .custom-checkbox { background-color: var(--accent); border-color: var(--accent); } .multiselect-option input[type="checkbox"]:checked + .custom-checkbox::after { content: ""; position: absolute; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); top: 2px; } .multiselect-option .option-text { flex-grow: 1; } .multiselect-divider { height: 1px; background-color: #e2e8f0; margin: 4px 0; } .calendar-table-container { background-color: var(--bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-md); border: 1px solid var(--border-color); overflow: hidden; } .calendar-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .calendar-table th { background-color: var(--bg-table-header); border-bottom: 3px solid var(--border-color); padding: 14px 16px; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; color: var(--primary); letter-spacing: 0.5px; } .col-date { width: 13%; box-sizing: border-box; text-align: left; } td.col-date { vertical-align: top; background-color: var(--bg-day-column); border-right: 1px solid var(--border-color); border-left: 5px solid #1e3a8a; padding: 28px 16px 28px 24px; } th.col-date { background-color: var(--bg-table-header); border-bottom: 3px solid var(--border-color); border-right: 1px solid var(--border-color); border-left: 5px solid transparent; padding: 14px 16px 14px 24px; } .col-session { width: 43.5%; text-align: left; } .col-morning { border-bottom: 3px solid #f59e0b !important; border-right: 1px solid var(--border-color) !important; } .col-afternoon { border-bottom: 3px solid #3b82f6 !important; } .cell-morning { } .cell-afternoon { } .calendar-table tr { border-bottom: 1px solid var(--border-color); } .calendar-table tr:last-child { border-bottom: none; } .day-cell { background-color: transparent !important; text-align: left; padding: 0; font-weight: 600; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; height: auto; min-height: auto; border: none !important; box-sizing: border-box; } .day-cell .day-name { font-size: 1.55rem; font-weight: 700; color: #1e3a8a; margin-bottom: 8px; line-height: 1.2; } .day-cell .day-date { font-size: 1.15rem; color: #1e3a8a; font-weight: 600; background-color: rgba(30, 58, 138, 0.04); padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(30, 58, 138, 0.12); display: inline-block; } .session-cell { padding: 24px 20px; vertical-align: top; position: relative; background-color: white; transition: background-color 0.15s; height: 100%; min-height: 160px; } .cell-morning { border-right: 1px solid var(--border-color) !important; } .session-cell:hover { background-color: #fafbfc; } .session-cell-content { display: flex; flex-direction: column; gap: 10px; min-height: 110px; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.4s ease; max-height: 2000px; overflow: hidden; opacity: 1; } .empty-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 80px; color: #cbd5e1; font-size: 0.85rem; font-style: italic; border: 1px dashed #e2e8f0; border-radius: var(--radius-sm); pointer-events: none; transition: all 0.2s; } .session-cell:hover .empty-placeholder { border-color: #cbd5e1; color: #94a3b8; } .add-event-hover-btn { position: absolute; bottom: 8px; right: 8px; background-color: var(--accent); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(0.8); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: var(--shadow-md); z-index: 10; } .session-cell:hover .add-event-hover-btn { opacity: 0.9; transform: scale(1); } .add-event-hover-btn:hover { opacity: 1; background-color: var(--accent-hover); transform: scale(1.1); } .meeting-card { background-color: white; border-radius: var(--radius-sm); padding: 16px 18px; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); position: relative; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; gap: 10px; overflow: hidden; } .meeting-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08); border-color: var(--border-color-hover); } .meeting-card.color-black { border-left: 4px solid var(--color-black-border); } .meeting-card.color-red { border-left: 4px solid var(--color-red-border); } .meeting-card.color-blue { border-left: 4px solid var(--color-blue-border); } .meeting-card-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .time-badge { font-size: 0.75rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; } .color-black .time-badge { background-color: var(--color-black-bg); color: var(--color-black-text); } .color-red .time-badge { background-color: var(--color-red-bg); color: var(--color-red-text); } .color-blue .time-badge { background-color: var(--color-blue-bg); color: var(--color-blue-text); } .card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s ease; } .meeting-card:hover .card-actions { opacity: 0.6; } .card-actions:hover { opacity: 1 !important; } .btn-card-action { background: none; border: none; color: #64748b; cursor: pointer; padding: 2px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s, color 0.15s; } .btn-card-action:hover { background-color: #f1f5f9; color: var(--accent); } .meeting-card-body { font-size: 0.92rem; line-height: 1.5; font-weight: 500; white-space: pre-wrap; word-break: break-word; } .color-black .meeting-card-body { color: var(--color-black-text); } .color-red .meeting-card-body { color: var(--color-red-text); font-weight: 600; } .color-blue .meeting-card-body { color: var(--color-blue-text); } .meeting-card-metadata { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 6px; border-top: 1px dashed #f1f5f9; font-size: 0.78rem; color: #64748b; } .meta-item { display: flex; align-items: center; gap: 4px; } .meta-item svg { color: #94a3b8; flex-shrink: 0; } .meeting-card-updater { text-align: right; font-size: 0.72rem; font-style: italic; color: #64748b; margin-top: 4px; padding-top: 4px; border-top: 1px dashed rgba(100, 116, 139, 0.15); } .meeting-card.filtered-out { display: none !important; } .app-footer { text-align: center; padding: 20px 0; color: #64748b; font-size: 0.8rem; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border-color); } .guide-text { font-style: italic; color: #94a3b8; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.25s ease-out; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-card { background-color: white; border-radius: var(--radius-lg); width: 100%; max-width: 650px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.8); transform: scale(0.92); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .modal-overlay.active .modal-card { transform: scale(1); } .modal-header { background: var(--bg-header); color: white; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .modal-header h3 { font-size: 1.15rem; font-weight: 600; } .btn-close { background: none; border: none; color: rgba(255, 255, 255, 0.8); cursor: pointer; padding: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, color 0.2s; } .btn-close:hover { background-color: rgba(255, 255, 255, 0.1); color: white; } .modal-body { padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .date-session-display { background-color: var(--accent-soft); border: 1px solid rgba(37, 99, 235, 0.15); padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 600; color: var(--accent); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-row { display: flex; gap: 16px; } .inline-group { flex-direction: row; } .flex-1 { flex: 1; } label { font-size: 0.85rem; font-weight: 600; color: #475569; } label.required::after { content: " *"; color: #ef4444; } input[type="text"], input[type="password"], textarea { font-family: var(--font-family); font-size: 0.9rem; border: 1px solid var(--border-color); padding: 10px 14px; border-radius: var(--radius-sm); outline: none; transition: all 0.2s; background-color: #f8fafc; } input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border-color: var(--accent); background-color: white; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } textarea { resize: vertical; } .color-picker-group { display: flex; gap: 20px; padding: 4px 0; } .color-option { display: flex; align-items: center; gap: 8px; cursor: pointer; } .color-option input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; } .color-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-block; border: 2px solid transparent; transition: transform 0.2s, border-color 0.2s; box-shadow: var(--shadow-sm); } .color-dot.black { background-color: var(--color-black-border); } .color-dot.red { background-color: var(--color-red-border); } .color-dot.blue { background-color: var(--color-blue-border); } .color-option input[type="radio"]:checked + .color-dot { transform: scale(1.25); border-color: #0f172a; box-shadow: 0 0 0 2px white, 0 0 0 4px var(--accent); } .color-text { font-size: 0.85rem; font-weight: 500; } .modal-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-color); padding: 16px 24px; background-color: #f8fafc; } .footer-right { display: flex; gap: 10px; } .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; } .toast { background-color: var(--primary); color: white; padding: 12px 20px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; font-size: 0.88rem; font-weight: 500; animation: slideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards; border-left: 4px solid #10b981; } .toast.toast-error { border-left-color: #ef4444; } .toast.toast-info { border-left-color: #3b82f6; } @keyframes slideIn { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } .toast.toast-fadeout { animation: slideOut 0.3s ease-in forwards; } @keyframes slideOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(20px) scale(0.9); } } .badges-container { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .badge { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; display: inline-flex; align-items: center; line-height: 1.2; height: 18px; color: white; } .badge-allday { background-color: #6366f1; } .badge-postponed { background-color: #f59e0b; } .badge-cancelled { background-color: #64748b; } .badge-supplementary { background-color: #ef4444; animation: pulseBadge 2s infinite; } @keyframes pulseBadge { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); } 70% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } .meeting-card.is-supplementary .meeting-card-body { color: #dc2626 !important; font-weight: 600; } .meeting-card.status-cancelled { background-color: #f8fafc; border-left-color: #94a3b8 !important; opacity: 0.65; } .meeting-card.status-cancelled .meeting-card-body { text-decoration: line-through; color: #94a3b8 !important; } .meeting-card.status-postponed { background-color: #fffbeb; border-left-color: #d97706 !important; opacity: 0.8; } .meeting-card.status-postponed .meeting-card-body { color: #d97706 !important; } .btn-gsheet-link { position: relative; padding-right: 32px !important; } .btn-gsheet-link .status-dot { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: #94a3b8; transition: all 0.3s ease; box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2); } .btn-gsheet-link.connected .status-dot { background-color: #107c41; box-shadow: 0 0 0 4px rgba(16, 124, 65, 0.3); } .btn-gsheet-link.error .status-dot { background-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3); } .login-screen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); display: flex; justify-content: center; align-items: center; z-index: 9999; padding: 20px; font-family: 'Be Vietnam Pro', sans-serif; } .login-card { background: rgba(255, 255, 255, 0.95); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03); width: 100%; max-width: 440px; padding: 40px; display: flex; flex-direction: column; gap: 24px; backdrop-filter: blur(10px); } .login-logo-container { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .login-logo { width: 80px; height: 80px; object-fit: contain; } .login-logo-container h2 { font-size: 1.25rem; font-weight: 700; color: var(--primary); letter-spacing: 0.5px; margin: 0; } .login-logo-container p { font-size: 0.82rem; color: var(--text-muted); margin: 0; } .login-form { display: flex; flex-direction: column; gap: 20px; } .login-error-msg { color: #ef4444; font-size: 0.82rem; font-weight: 500; background-color: #fef2f2; border: 1px solid #fee2e2; padding: 10px 14px; border-radius: var(--radius-sm); display: none; } .btn-icon:hover { background-color: #f1f5f9 !important; color: var(--primary) !important; transform: translateY(-1px); } .btn-icon:active { transform: translateY(0); } .user-avatar-badge-circle { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #1e40af 100%); color: white; font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2); } .profile-avatar-large { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #1e40af 100%); color: white; font-weight: 700; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; letter-spacing: 1px; box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25); border: 3px solid white; } .user-profile-badge-btn { transition: transform 0.2s, background-color 0.2s; border-radius: var(--radius-sm); padding: 2px 6px; } .user-profile-badge-btn:hover { background-color: #f1f5f9; transform: translateY(-0.5px); } .admin-container { width: 100%; max-width: 1300px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; animation: fadeIn 0.3s ease-out; } .admin-table th { font-weight: 600; border-bottom: 2px solid var(--border-color); } .admin-table td { padding: 12px 20px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; } .admin-table tr:hover { background-color: #f8fafc; } .admin-table tr:last-child td { border-bottom: none; } .admin-card { transition: box-shadow 0.2s; } .admin-card:hover { box-shadow: var(--shadow-md); } .badge-role { font-size: 0.75rem; font-weight: 600; padding: 3px 8px; border-radius: 50px; background-color: #f1f5f9; color: #475569; } .badge-role.vutruong { background-color: #fef2f2; color: #ef4444; } .badge-role.phovutruong { background-color: #eff6ff; color: var(--accent); } @media (max-width: 1024px) { .calendar-table th, .day-cell { font-size: 0.88rem; } .app-header h1 { font-size: 1.25rem; } } @media (max-width: 768px) { body { padding: 12px 8px; } .app-header { padding: 16px 20px; flex-direction: column; align-items: flex-start; } .toolbar-section { flex-direction: column; align-items: stretch; padding: 16px; } .navigation-group { width: 100%; justify-content: space-between; } .select-wrapper, .custom-select { width: 100%; flex-grow: 1; } .filter-group { flex-direction: column; align-items: flex-start; } .calendar-table, .calendar-table thead, .calendar-table tbody, .calendar-table th, .calendar-table td, .calendar-table tr { display: block; } .calendar-table thead { display: none; } .calendar-table tr { margin-bottom: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); background-color: white; } .col-date, .col-session { width: 100% !important; } .col-date { border-left: none !important; padding: 0 !important; background: transparent !important; } .day-cell { border-right: none; border-bottom: 1px solid var(--border-color); background-color: var(--bg-day-column); flex-direction: row; gap: 12px; justify-content: flex-start; padding: 12px 16px; min-height: auto; } .day-cell .day-name { margin-bottom: 0; } .session-cell { min-height: auto; border-right: none !important; border-bottom: 1px solid var(--border-color); padding: 16px; } .session-cell:last-child { border-bottom: none; } .session-cell::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #64748b; margin-bottom: 8px; border-bottom: 1px solid #f1f5f9; padding-bottom: 4px; } .add-event-hover-btn { opacity: 0.9; transform: scale(1); bottom: 8px; right: 8px; } } .calendar-table tbody tr td { border-bottom: 1px solid #e2e8f0 !important; } @media (min-width: 769px) { .calendar-table tbody tr:nth-child(odd) td.col-date { background-color: #ffffff !important; } .calendar-table tbody tr:nth-child(odd) .cell-morning { background-color: #ffffff !important; } .calendar-table tbody tr:nth-child(odd) .cell-afternoon { background-color: #fafbfc !important; } .calendar-table tbody tr:nth-child(even) td.col-date { background-color: #f8fafc !important; } .calendar-table tbody tr:nth-child(even) .cell-morning { background-color: #f8fafc !important; } .calendar-table tbody tr:nth-child(even) .cell-afternoon { background-color: #f1f5f9 !important; } .calendar-table tbody tr:hover td.col-date, .calendar-table tbody tr:hover .cell-morning, .calendar-table tbody tr:hover .cell-afternoon { background-color: #e2e8f0 !important; } } .calendar-table tbody tr.is-today td, .calendar-table tbody tr.is-today td.col-date, .calendar-table tbody tr.is-today .cell-morning, .calendar-table tbody tr.is-today .cell-afternoon { background-color: #e6f2ff !important; } .calendar-table tbody tr.is-today td { border-top: 2px solid #3b82f6 !important; border-bottom: 2px solid #3b82f6 !important; } .calendar-table tbody tr.is-today td.col-date { border-left: 6px solid #dc2626 !important; border-right: 1px solid var(--border-color) !important; } .calendar-table tbody tr.is-today .day-cell .day-name { color: #1e3a8a !important; font-weight: 800 !important; } .calendar-table tbody tr.is-today .day-cell .day-date { background-color: var(--accent) !important; color: white !important; border-color: var(--accent) !important; font-weight: 700 !important; } @media (min-width: 769px) { .calendar-table tbody tr.is-today:hover td, .calendar-table tbody tr.is-today:hover td.col-date, .calendar-table tbody tr.is-today:hover .cell-morning, .calendar-table tbody tr.is-today:hover .cell-afternoon { background-color: #dbeafe !important; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .today-badge { font-size: 0.7rem; font-weight: 800; color: white; background-color: #ef4444; padding: 3px 10px; border-radius: 50px; margin-top: 8px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25); animation: pulseToday 2s infinite; display: inline-block; } @keyframes pulseToday { 0% { transform: scale(1); box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25); } 50% { transform: scale(1.05); box-shadow: 0 4px 8px rgba(239, 68, 68, 0.45); } 100% { transform: scale(1); box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25); } } @media (max-width: 1024px) { .calendar-table tr.is-today { border: 2px solid var(--accent) !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important; } } .sync-progress-bar-bg { width: 100%; height: 7px; background-color: #f1f5f9; border-radius: 50px; overflow: hidden; position: relative; border: 1px solid #e2e8f0; } #sync-progress-bar-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%); border-radius: 50px; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 8px rgba(37, 99, 235, 0.4); } .sync-spinner-user-active { animation: spin 1s linear infinite !important; } .btn-toggle-day { background: none; border: none; padding: 3px; cursor: pointer; color: #94a3b8; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; margin-left: 6px; vertical-align: middle; } .btn-toggle-day:hover { background-color: rgba(37, 99, 235, 0.08); color: var(--accent); } .chevron-icon { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: rotate(0deg); } .calendar-table tr.is-collapsed .session-cell, .calendar-table tr.is-collapsed .day-cell { min-height: 0 !important; height: auto !important; padding-top: 8px !important; padding-bottom: 8px !important; } .calendar-table tr.is-collapsed .session-cell-content { min-height: 0 !important; max-height: 0px !important; padding: 0 !important; opacity: 0; pointer-events: none; } .calendar-table tr.is-collapsed .empty-placeholder, .calendar-table tr.is-collapsed .add-event-hover-btn { display: none !important; } .calendar-table tr.is-collapsed .chevron-icon { transform: rotate(-180deg); } .calendar-table tr.is-collapsed .day-cell { padding: 0 !important; } .calendar-table tr.is-collapsed td.col-date { padding-top: 10px !important; padding-bottom: 10px !important; }