:root { /* Background - Light Theme */ --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-tertiary: #e2e8f0; --bg-hover: #f1f5f9; /* Colors */ --primary: #0891b2; --primary-light: #06b6d4; --primary-dark: #0e7490; --accent: #7c3aed; --accent-light: #8b5cf6; --success: #059669; --success-light: #10b981; --warning: #d97706; --warning-light: #f59e0b; --danger: #dc2626; --danger-light: #ef4444; --info: #2563eb; /* Text */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-dark: #94a3b8; /* U1: alias mới — --text-subtle thay thế --text-dark (semantic đúng hơn) */ --text-subtle: #94a3b8; /* Border */ --border: rgba(0, 0, 0, 0.08); --border-light: rgba(0, 0, 0, 0.12); /* Glass - Light */ --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(0, 0, 0, 0.08); --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04); /* Gradient */ --gradient-primary: linear-gradient(135deg, #0891b2, #7c3aed); --gradient-success: linear-gradient(135deg, #059669, #0891b2); --gradient-warning: linear-gradient(135deg, #d97706, #dc2626); --gradient-accent: linear-gradient(135deg, #7c3aed, #db2777); /* Sizes */ --sidebar-width: 260px; --sidebar-collapsed: 72px; --border-radius: 12px; --border-radius-sm: 8px; --border-radius-lg: 16px; /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* U1: thêm expressive (ease-out-quad) — phù hợp UI y tế, không dùng spring bounce */ --transition-expressive: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); /* U1: thêm shadow-xl cho modal, dropdown nổi bật */ --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.08); --shadow-glow-primary: 0 0 20px rgba(8, 145, 178, 0.2); --shadow-glow-accent: 0 0 20px rgba(124, 58, 237, 0.2); /* P3.1 — Typography scale (base: 15px từ U2) */ /* U1: thêm --text-xxs cho badge micro, label cực nhỏ */ --text-xxs: 0.6667rem; /* 10px @ 15px base */ --text-xs: 0.7333rem; /* 11px @ 15px base */ --text-sm: 0.8667rem; /* 13px @ 15px base */ --text-base: 0.9333rem; /* 14px @ 15px base */ --text-lg: 1.0667rem; /* 16px @ 15px base */ --text-xl: 1.3333rem; /* 20px @ 15px base */ --text-2xl: 1.6rem; /* 24px @ 15px base */ --text-3xl: 2rem; /* 30px @ 15px base */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semi: 600; --font-weight-bold: 700; --font-weight-black: 800; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-loose: 1.75; /* P3.1 — Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* P3.1 — Z-index scale */ --z-dropdown: 100; --z-sidebar: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* U1 — Surface tokens (Material Design 3 inspired) */ --surface: #ffffff; --surface-variant: #f1f5f9; --surface-container: #f8fafc; --on-surface: var(--text-primary); --on-surface-muted: var(--text-muted); } /* ===== DARK MODE — [data-theme="dark"] ===== */ /* Áp dụng khi user chọn toggle hoặc OS preference (set bởi anti-flash script trong ) */ [data-theme="dark"] { /* Backgrounds — deep navy (không dùng pure black, dễ mắt hơn) */ --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #21262d; --bg-hover: #30363d; /* Border */ --border: rgba(255, 255, 255, 0.08); --border-light: rgba(255, 255, 255, 0.12); /* Glass — dark variant */ --glass-bg: rgba(22, 27, 34, 0.85); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2); /* Text — đảm bảo contrast ≥ 4.5:1 trên bg-primary (#0d1117) */ --text-primary: #f0f6fc; /* contrast ~14:1 ✅ */ --text-secondary: #c9d1d9; /* contrast ~8:1 ✅ */ --text-muted: #8b949e; /* contrast ~4.6:1 ✅ AA */ --text-dark: #6e7681; /* giữ nguyên cho backward compat */ --text-subtle: #6e7681; /* decorative only */ /* Brand — làm sáng hơn để readable trên dark bg */ --primary: #38bdf8; /* contrast ~5.2:1 ✅ AA */ --primary-light: #7dd3fc; --primary-dark: #0369a1; --accent: #a78bfa; /* contrast ~5.8:1 ✅ AA */ --accent-light: #c4b5fd; --success: #34d399; /* contrast ~6.1:1 ✅ AA */ --success-light: #6ee7b7; --warning: #fbbf24; /* contrast ~7.3:1 ✅ AA */ --warning-light: #fcd34d; --danger: #f87171; /* contrast ~5.5:1 ✅ AA */ --danger-light: #fca5a5; --info: #60a5fa; /* Shadows — đậm hơn trên dark background */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.4); --shadow-glow-primary: 0 0 20px rgba(56, 189, 248, 0.25); --shadow-glow-accent: 0 0 20px rgba(167, 139, 250, 0.25); /* Gradients — dùng màu SÁNG để -webkit-text-fill-color readable trên dark bg */ --gradient-primary: linear-gradient(135deg, #38bdf8, #a78bfa); --gradient-success: linear-gradient(135deg, #34d399, #38bdf8); --gradient-warning: linear-gradient(135deg, #fbbf24, #f87171); --gradient-accent: linear-gradient(135deg, #a78bfa, #f472b6); /* Surface tokens */ --surface: #161b22; --surface-variant: #21262d; --surface-container: #0d1117; --on-surface: var(--text-primary); --on-surface-muted: var(--text-muted); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* A1 — Accessibility: keyboard focus ring (only shown on keyboard nav, not mouse click) */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; } /* U2: 14px → 15px — cải thiện readability, WCAG 1.4.4 */ html { font-size: 15px; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); /* U2: 1.6 → 1.65 — tăng khoảng cách dòng để dễ đọc hơn */ line-height: 1.65; overflow: hidden; height: 100vh; } /* U2: Selection color — brand-aware */ ::selection { background: var(--primary); color: #fff; } ::-moz-selection { background: var(--primary); color: #fff; } #app { display: flex; height: 100vh; } .main-content { flex: 1; margin-left: var(--sidebar-width); padding: 28px 32px; overflow-y: auto; height: 100vh; scroll-behavior: smooth; } .main-content::-webkit-scrollbar { width: 6px; } .main-content::-webkit-scrollbar-track { background: transparent; } .main-content::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; } h1, h2, h3, h4 { font-weight: 600; color: var(--text-primary); } .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; } .page-title { font-size: 1.75rem; font-weight: 700; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .page-subtitle { color: var(--text-muted); font-size: 0.9rem; margin-top: 4px; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: none; border-radius: var(--border-radius-sm); font-family: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); text-decoration: none; } .btn-primary { background: var(--gradient-primary); color: white; box-shadow: var(--shadow-glow-primary); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3); } .btn-secondary { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-light); } .btn-secondary:hover { background: var(--bg-hover); } .btn-danger { background: var(--danger); color: white; } .btn-danger:hover { background: var(--danger-light); } .btn-sm { padding: 6px 12px; font-size: 0.8rem; } /* U2: Button states — loading, active press, disabled */ .btn:active:not(:disabled) { transform: scale(0.97); } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn.loading { pointer-events: none; opacity: 0.8; position: relative; } .btn.loading > *:not(.fc-spinner) { opacity: 0; } .btn.loading .fc-spinner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* A3 — Accessibility: btn-icon touch target 44×44px (WCAG 2.5.5) */ .btn-icon { width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-sm); background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .btn-icon:hover { color: var(--primary); border-color: var(--primary); } /* Cards */ .card { background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--border-radius); padding: 24px; box-shadow: var(--glass-shadow); transition: background var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal); } .card:hover { border-color: rgba(0,0,0,0.12); } /* Inputs */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: var(--border-radius-sm); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; transition: border-color var(--transition-fast); outline: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12); } .form-select { cursor: pointer; } .form-textarea { resize: vertical; min-height: 80px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* FormController (P1) — validation & loading states */ .fc-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important; } .fc-error-msg { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--danger-light, #f87171); font-weight: 500; } .fc-global-error { padding: 10px 14px; margin-bottom: 12px; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: var(--border-radius-sm); color: var(--danger-light, #f87171); font-size: 0.85rem; font-weight: 500; } .fc-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: white; border-radius: 50%; animation: fc-spin 0.6s linear infinite; vertical-align: middle; } @keyframes fc-spin { to { transform: rotate(360deg); } } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3px; } .badge-primary { background: rgba(6,182,212,0.15); color: var(--primary-light); } .badge-success { background: rgba(16,185,129,0.15); color: var(--success-light); } .badge-warning { background: rgba(245,158,11,0.15); color: var(--warning-light); } .badge-danger { background: rgba(239,68,68,0.15); color: var(--danger-light); } .badge-accent { background: rgba(139,92,246,0.15); color: var(--accent-light); } .badge-info { background: rgba(59,130,246,0.15); color: var(--info); } /* Staff Status */ .staff-status-cell { display: flex; flex-direction: column; gap: 3px; } .staff-status-dates { font-size: 0.7rem; color: var(--text-muted); font-style: italic; } /* Search */ .search-box { position: relative; width: 280px; } .search-box input { width: 100%; padding: 10px 14px 10px 40px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius-sm); color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; transition: border-color var(--transition-fast); } .search-box input:focus { border-color: var(--primary); } .search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); } /* Empty State */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state svg { margin-bottom: 16px; opacity: 0.5; } .empty-state p { font-size: 0.95rem; } /* Table */ .table-container { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } thead th { padding: 12px 16px; text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 0.9rem; } tbody tr { transition: background var(--transition-fast); } tbody tr:hover { background: rgba(0,0,0,0.02); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* U0 BUG-2: pulse — source of truth duy nhất (đã xóa bản trùng trong index.html) */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* U0 BUG-2: shake — chuyển từ index.html inline vào đây */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } .fade-in { animation: fadeIn 0.3s ease forwards; } .slide-up { animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Utility */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .text-right { text-align: right; } @media (max-width: 1024px) { .main-content { margin-left: var(--sidebar-collapsed); } .sidebar .logo-text, .sidebar .nav-item span, .sidebar .user-details { display: none; } .sidebar { width: var(--sidebar-collapsed); } .sidebar .nav-item { justify-content: center; } .form-row { grid-template-columns: 1fr; } } /* U0 A5: prefers-reduced-motion — hỗ trợ người nhạy cảm chuyển động (WCAG 2.3.3) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== U5: Extracted inline styles — app.js ===== */ /* Auth-checking overlay */ #auth-checking { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--bg-primary); color: var(--text-muted); font-family: 'Inter', system-ui, sans-serif; font-size: var(--text-base, 0.9333rem); gap: 10px; } /* Spinner dùng trong auth-checking */ .fc-spinner { width: 20px; height: 20px; border: 2px solid var(--border-light); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } /* Idle warning bar */ #idle-warning-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: linear-gradient(135deg, var(--warning), var(--danger)); color: #fff; text-align: center; padding: 10px 16px; font-size: var(--text-sm, 0.8667rem); font-weight: 600; font-family: 'Inter', system-ui, sans-serif; animation: slideDown 0.3s ease; cursor: pointer; } /* Sidebar admin-btn row */ .sidebar-admin-btns { display: flex; gap: 6px; margin: 6px 0; } .sidebar-admin-btns .btn { flex: 1; font-size: var(--text-xxs, 0.6667rem); } .sidebar-full-btn { width: 100%; font-size: var(--text-xxs, 0.6667rem); margin: 2px 0; } .sidebar-full-btn-spaced { width: 100%; font-size: var(--text-xxs, 0.6667rem); margin: 4px 0; } /* logout-btn SVG icon */ .logout-btn-icon { vertical-align: middle; margin-right: 6px; } /* Skeleton layout */ .skeleton-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; } .skeleton-card-sm { height: 80px; } .skeleton-card-lg { height: 200px; } .skeleton-card-top { margin: 0 0 12px; } /* ===== U5: auth.js extracted styles ===== */ .pw-toggle-wrap { position: relative; } .pw-toggle-wrap .form-input { padding-right: 40px; } .pw-toggle-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 4px; display: flex; align-items: center; } .eye-off { display: none; } .pw-error { color: var(--danger); font-size: var(--text-sm, 0.8667rem); margin-bottom: 8px; } /* Auth user management table */ .auth-table-row { border-bottom: 1px solid var(--border); } .auth-table-row.disabled { opacity: 0.5; } .auth-td-main { padding: 6px 8px; } .auth-td-user { padding: 6px 8px; color: var(--text-secondary); font-size: var(--text-sm, 0.8667rem); } .auth-td-badge { padding: 6px 8px; } .auth-td-actions { padding: 6px 8px; text-align: center; white-space: nowrap; } .auth-badge-superadmin { background: #7c3aed; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: var(--text-xxs, 0.6667rem); } .auth-badge-admin { background: #0891b2; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: var(--text-xxs, 0.6667rem); } .auth-badge-user { background: #94a3b8; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: var(--text-xxs, 0.6667rem); } .auth-badge-disabled { background: var(--danger); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.65rem; } .auth-btn-mk { font-size: var(--text-xxs, 0.6667rem); } .auth-td-self { color: var(--text-secondary); font-size: var(--text-xs, 0.7333rem); } /* Auth loading/empty states */ .auth-loading { text-align: center; padding: 40px; } .auth-loading-text { margin-top: 12px; color: var(--text-secondary); } .auth-empty { text-align: center; padding: 40px; color: var(--text-secondary); } .sidebar { width: var(--sidebar-width); height: 100vh; position: fixed; left: 0; top: 0; background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 100; transition: width var(--transition-slow); } .sidebar-logo { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--border); } .logo-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .logo-icon img { width: 100%; height: 100%; object-fit: contain; } .logo-title { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); display: block; line-height: 1.25; } .logo-subtitle { font-size: 0.72rem; color: var(--text-muted); display: block; margin-top: 2px; font-weight: 500; } .sidebar-nav { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 14px; border-radius: var(--border-radius-sm); color: var(--text-muted); text-decoration: none; font-size: 0.84rem; font-weight: 500; transition: background var(--transition-fast), color var(--transition-fast), font-weight var(--transition-fast); position: relative; overflow: hidden; } .nav-item::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--gradient-primary); border-radius: 0 4px 4px 0; opacity: 0; transition: opacity var(--transition-fast); } .nav-item:hover { color: var(--text-primary); background: var(--bg-hover); } /* U3: Active pill — thay left-border bằng pill background nhất quán hơn */ .nav-item.active { color: var(--primary); background: rgba(8, 145, 178, 0.12); font-weight: 600; } /* Giữ ::before cho transition nhưng ẩn đi — chỉ dùng pill */ .nav-item.active::before { opacity: 0; } .nav-item.active svg { color: var(--primary); } .sidebar-footer { padding: 10px 12px; border-top: 1px solid var(--border); } .user-info { display: flex; align-items: center; gap: 10px; } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gradient-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.78rem; color: white; flex-shrink: 0; } .user-name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); display: block; } .user-role { font-size: 0.7rem; color: var(--text-muted); display: block; } /* ===== U2: Dark Mode Toggle Button ===== */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-tertiary); color: var(--text-muted); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); flex-shrink: 0; margin-bottom: 8px; } .theme-toggle-btn:hover { background: var(--bg-hover); color: var(--primary); border-color: var(--primary); } .theme-toggle-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Trạng thái đang bật dark mode */ .theme-toggle-btn[aria-pressed="true"] { background: rgba(56, 189, 248, 0.12); color: var(--primary); border-color: var(--primary); } /* Ẩn trên mobile bottom nav (không có sidebar-footer) */ @media (max-width: 768px) { .theme-toggle-btn { display: none; } } /* ===== U2: Sidebar theme area wrapper (icon + label) ===== */ .sidebar-theme-area { display: flex; align-items: center; gap: 10px; padding: 4px 0; margin-bottom: 4px; } .theme-toggle-label { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; transition: color var(--transition-fast); /* Ẩn khi sidebar collapsed (chỉ hiện icon) */ overflow: hidden; } /* Sidebar collapsed: ẩn label */ @media (max-width: 1024px) { .theme-toggle-label { display: none; } } /* Mobile: ẩn toàn bộ khu vực (bottom nav không có footer) */ @media (max-width: 768px) { .sidebar-theme-area { display: none; } } .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); position: relative; overflow: hidden; } .login-page::before { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%); top: -100px; right: -100px; border-radius: 50%; } .login-page::after { content: ''; position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 70%); bottom: -80px; left: -80px; border-radius: 50%; } /* Nút toggle theme góc trên phải màn hình login */ .login-theme-toggle { position: absolute; top: 20px; right: 20px; z-index: 10; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 50%; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); box-shadow: var(--shadow-sm); } .login-theme-toggle:hover { background: var(--bg-tertiary); color: var(--primary); box-shadow: var(--shadow-md); } .login-card { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--border-radius-lg); padding: 48px 40px; width: 100%; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); position: relative; z-index: 1; animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .login-logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; } .login-logo-icon { width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .login-logo-icon img { width: 100%; height: 100%; object-fit: cover; } .login-logo h1 { font-size: 1.6rem; font-weight: 700; text-align: center; text-wrap: balance; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .login-logo p { color: var(--text-muted); font-size: 0.95rem; margin-top: 6px; font-weight: 500; } .login-form .form-group { margin-bottom: 20px; } .login-form .form-input { padding: 14px 16px; font-size: 0.95rem; background: var(--bg-primary); } .login-form .form-label { margin-bottom: 8px; font-size: 0.82rem; } .login-btn { width: 100%; padding: 14px; font-size: 1rem; font-weight: 600; border: none; border-radius: var(--border-radius-sm); background: var(--gradient-primary); color: white; cursor: pointer; transition: background var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal); box-shadow: var(--shadow-glow-primary); font-family: inherit; } .login-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(8,145,178,0.3); } .login-btn:active { transform: translateY(0); } .login-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--danger-light); padding: 10px 14px; border-radius: var(--border-radius-sm); font-size: 0.85rem; margin-bottom: 16px; display: none; animation: fadeIn 0.2s ease; } .login-error.show { display: block; } .login-footer { text-align: center; margin-top: 24px; color: var(--text-subtle); font-size: 0.78rem; } .login-info { margin-top: 20px; padding: 14px; background: rgba(6,182,212,0.08); border: 1px solid rgba(6,182,212,0.15); border-radius: var(--border-radius-sm); font-size: 0.8rem; color: var(--text-muted); } .login-info strong { color: var(--primary-light); } /* Logged-in user bar in sidebar */ .user-info { cursor: pointer; position: relative; } .user-info:hover .user-avatar { transform: scale(1.05); } .logout-btn { width: 100%; margin-top: 8px; padding: 8px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); border-radius: var(--border-radius-sm); color: var(--danger-light); font-family: inherit; font-size: 0.78rem; cursor: pointer; transition: color var(--transition-fast); display: none; } .logout-btn.show { display: block; } .logout-btn:hover { background: rgba(239,68,68,0.2); } .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; z-index: 1000; animation: fadeIn 0.2s ease; } .modal-overlay.active { display: flex; } .modal { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--border-radius-lg); /* U3: 780px → 860px + accent top border */ border-top: 3px solid var(--primary); width: 90%; max-width: 860px; max-height: 85vh; overflow-y: auto; /* U3: shadow-xl cho modal nổi bật hơn */ box-shadow: var(--shadow-xl); animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* U3: Size variants */ .modal.modal-sm { max-width: 480px; } .modal.modal-lg { max-width: 1000px; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--border); /* U3: sticky header khi content dài */ position: sticky; top: 0; background: var(--bg-secondary); z-index: 1; border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; } .modal-title { font-size: 1.1rem; font-weight: 600; } .modal-close { /* U0: 32px → 44×44px (WCAG 2.5.5 touch target) */ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; background: var(--bg-tertiary); border-radius: 50%; color: var(--text-muted); cursor: pointer; font-size: 1.2rem; transition: background var(--transition-fast), color var(--transition-fast); } .modal-close:hover { background: var(--danger); color: white; } .modal-body { padding: 20px 24px; } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); /* U3: sticky footer */ position: sticky; bottom: 0; background: var(--bg-secondary); z-index: 1; } /* ===== COMPONENTS.CSS — Unified Component Library ===== * U3: Thư viện component tập trung. Thêm vào build-css.sh sau modal.css. * Sử dụng CSS variables từ variables.css — tự hỗ trợ dark mode. * ======================================================= */ /* ── Badge ── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 50px; font-size: var(--text-xxs, 0.6667rem); font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; line-height: 1.5; } .badge-primary { background: rgba(8,145,178,0.12); color: var(--primary); } .badge-accent { background: rgba(124,58,237,0.12); color: var(--accent); } .badge-success { background: rgba(5,150,105,0.12); color: var(--success); } .badge-warning { background: rgba(217,119,6,0.12); color: var(--warning); } .badge-danger { background: rgba(220,38,38,0.12); color: var(--danger); } .badge-neutral { background: var(--bg-tertiary); color: var(--text-muted); } /* Solid variants */ .badge-solid-primary { background: var(--primary); color: #fff; } .badge-solid-success { background: var(--success); color: #fff; } .badge-solid-danger { background: var(--danger); color: #fff; } /* ── Avatar ── */ .avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; background: var(--gradient-accent); font-size: var(--text-xs, 0.7333rem); overflow: hidden; } .avatar-sm { width: 28px; height: 28px; font-size: var(--text-xxs, 0.6667rem); } .avatar-md { width: 36px; height: 36px; } .avatar-lg { width: 48px; height: 48px; font-size: var(--text-sm, 0.8667rem); } .avatar-xl { width: 64px; height: 64px; font-size: var(--text-base, 0.9333rem); } .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* ── Data Table ── */ .data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm, 0.8667rem); } .data-table thead th { padding: 10px 14px; text-align: left; font-size: var(--text-xxs, 0.6667rem); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 2px solid var(--border); background: var(--surface-variant, var(--bg-hover)); position: sticky; top: 0; z-index: 1; } .data-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; } .data-table tbody tr { transition: background var(--transition-fast); } .data-table tbody tr:hover { background: var(--bg-hover); } /* Zebra stripe (opt-in) */ .data-table.striped tbody tr:nth-child(even) { background: var(--surface-variant, var(--bg-hover)); } /* ── Chip (filter) ── */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 50px; border: 1px solid var(--border); background: var(--surface-variant, var(--bg-tertiary)); color: var(--text-secondary); font-size: var(--text-xs, 0.7333rem); font-weight: 500; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); white-space: nowrap; user-select: none; } .chip:hover { border-color: var(--primary); color: var(--primary); } .chip.active { background: rgba(8,145,178,0.12); border-color: var(--primary); color: var(--primary); font-weight: 600; } .chip-remove { width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); color: #fff; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: none; padding: 0; line-height: 1; } /* ── Progress Bar ── */ .progress { height: 8px; background: var(--bg-tertiary); border-radius: 50px; overflow: hidden; } .progress-bar { height: 100%; border-radius: 50px; background: var(--gradient-primary); transition: width var(--transition-expressive, 0.3s ease); } .progress-bar.success { background: var(--success); } .progress-bar.warning { background: var(--warning); } .progress-bar.danger { background: var(--danger); } /* Labeled progress */ .progress-labeled { display: flex; align-items: center; gap: 10px; } .progress-labeled .progress { flex: 1; } .progress-label { font-size: var(--text-xs, 0.7333rem); font-weight: 600; color: var(--text-muted); min-width: 36px; text-align: right; } /* ── Stat Widget (dùng trong dashboard sidebar) ── */ .stat-widget { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-variant, var(--bg-hover)); border-radius: var(--border-radius-sm); border: 1px solid var(--border); } .stat-widget-icon { width: 40px; height: 40px; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-widget-body { flex: 1; min-width: 0; } .stat-widget-value { font-size: var(--text-lg, 1.0667rem); font-weight: 700; color: var(--text-primary); line-height: 1; } .stat-widget-label { font-size: var(--text-xxs, 0.6667rem); color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.4px; } /* ── Divider ── */ .divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; } .divider-vertical { display: inline-block; width: 1px; height: 1em; background: var(--border); margin: 0 8px; vertical-align: middle; } /* ── Empty State ── */ .empty-state-icon { width: 56px; height: 56px; border-radius: var(--border-radius); background: var(--surface-variant, var(--bg-tertiary)); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--text-muted); opacity: 0.7; } .empty-state-title { font-size: var(--text-base, 0.9333rem); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .empty-state-desc { font-size: var(--text-sm, 0.8667rem); color: var(--text-muted); } /* ── Export-safe light theme (dùng khi html2canvas render ảnh) ── */ .export-light { --bg-primary: #f8fafc !important; --bg-secondary: #ffffff !important; --bg-tertiary: #e2e8f0 !important; --text-primary: #0f172a !important; --text-secondary:#475569 !important; --text-muted: #64748b !important; --border: rgba(0,0,0,0.08) !important; color-scheme: light !important; } /* ===== U5: Extracted — audit-log.js ===== */ /* Inline log detail span colors */ .al-text-muted-sm { color: var(--text-muted); font-size: var(--text-sm, 0.8667rem); } .al-text-danger { color: var(--danger); font-size: var(--text-sm, 0.8667rem); } .al-text-warning { color: var(--warning); font-size: var(--text-sm, 0.8667rem); } .al-text-accent { color: var(--accent); font-size: var(--text-sm, 0.8667rem); } /* Audit log table */ .al-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm, 0.8667rem); } .al-table thead tr { border-bottom: 2px solid var(--border); background: var(--bg-secondary); position: sticky; top: 0; z-index: 1; } .al-table th { padding: 6px 8px; text-align: left; } .al-table tr { border-bottom: 1px solid var(--border); vertical-align: top; } .al-table tr.al-row-login { opacity: 0.65; } .al-td-time { padding: 5px 8px; font-size: var(--text-xs, 0.7333rem); color: var(--text-muted); white-space: nowrap; } .al-td-user { padding: 5px 8px; font-size: var(--text-sm, 0.8667rem); font-weight: 600; white-space: nowrap; } .al-td-action { padding: 5px 8px; font-size: var(--text-sm, 0.8667rem); white-space: nowrap; } .al-td-detail { padding: 5px 8px; font-size: var(--text-base, 0.9333rem); max-width: 320px; } /* Audit log filter row */ .al-filter-row { display: flex; gap: 8px; margin-bottom: 10px; } .al-scroll-area { max-height: 60vh; overflow-y: auto; } /* Audit log: backup detail box */ .al-backup-box { margin-top: 5px; padding: 6px 10px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); border-radius: 6px; font-size: var(--text-xs, 0.7333rem); color: var(--text-secondary); } /* ===== TOAST NOTIFICATIONS ===== */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; min-width: 320px; max-width: 420px; background: var(--bg-secondary); border-radius: var(--border-radius-sm); box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid var(--primary); pointer-events: auto; transform: translateX(120%); opacity: 0; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; } .toast.show { transform: translateX(0); opacity: 1; } .toast.hide { transform: translateX(120%); opacity: 0; } .toast-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 1px; } .toast-body { flex: 1; min-width: 0; } .toast-title { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); margin-bottom: 2px; } .toast-message { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; word-break: break-word; } .toast-close { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; font-size: 16px; line-height: 1; opacity: 0.5; transition: opacity var(--transition-fast); } .toast-close:hover { opacity: 1; } .toast-progress { position: absolute; bottom: 0; left: 4px; right: 0; height: 3px; border-radius: 0 0 var(--border-radius-sm) 0; overflow: hidden; } .toast-progress-bar { height: 100%; width: 100%; transform-origin: left; animation: toast-progress-shrink linear forwards; } @keyframes toast-progress-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* Toast types */ .toast--success { border-left-color: var(--success); } .toast--success .toast-icon { background: #ecfdf5; color: var(--success); } .toast--success .toast-progress-bar { background: var(--success); } .toast--error { border-left-color: var(--danger); } .toast--error .toast-icon { background: #fef2f2; color: var(--danger); } .toast--error .toast-progress-bar { background: var(--danger); } .toast--warning { border-left-color: var(--warning); } .toast--warning .toast-icon { background: #fffbeb; color: var(--warning); } .toast--warning .toast-progress-bar { background: var(--warning); } .toast--info { border-left-color: var(--info); } .toast--info .toast-icon { background: #eff6ff; color: var(--info); } .toast--info .toast-progress-bar { background: var(--info); } /* ===== CONFIRM DIALOG ===== */ .confirm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); z-index: 10001; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; } .confirm-overlay.show { opacity: 1; } .confirm-dialog { background: var(--bg-secondary); border-radius: var(--border-radius); padding: 28px; max-width: 420px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.2); transform: scale(0.9) translateY(20px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .confirm-overlay.show .confirm-dialog { transform: scale(1) translateY(0); } .confirm-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 24px; } .confirm-icon--danger { background: #fef2f2; color: var(--danger); } .confirm-icon--warning { background: #fffbeb; color: var(--warning); } .confirm-icon--info { background: #eff6ff; color: var(--info); } .confirm-title { text-align: center; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .confirm-message { text-align: center; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 24px; } .confirm-actions { display: flex; gap: 10px; justify-content: center; } .confirm-actions .btn { min-width: 110px; padding: 10px 20px; font-size: 0.85rem; font-weight: 600; border-radius: var(--border-radius-sm); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .confirm-btn-cancel { background: var(--bg-hover); border: 1px solid var(--border-light); color: var(--text-secondary); } .confirm-btn-cancel:hover { background: var(--bg-tertiary); } .confirm-btn-danger { background: var(--danger); border: 1px solid var(--danger); color: #fff; } .confirm-btn-danger:hover { background: var(--danger-light); box-shadow: 0 4px 12px rgba(220,38,38,0.3); } .confirm-btn-primary { background: var(--primary); border: 1px solid var(--primary); color: #fff; } .confirm-btn-primary:hover { background: var(--primary-light); box-shadow: 0 4px 12px rgba(8,145,178,0.3); } /* ===== LOADING STATE ===== */ .page-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; gap: 16px; } .loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-text { color: var(--text-muted); font-size: 0.85rem; } /* Skeleton loading */ .skeleton { background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-tertiary) 50%, var(--bg-hover) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--border-radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-card { height: 120px; border-radius: var(--border-radius); } .skeleton-row { height: 48px; margin-bottom: 8px; } .skeleton-text { height: 14px; width: 60%; margin-bottom: 8px; } .skeleton-title { height: 20px; width: 40%; margin-bottom: 16px; } /* ===== Mobile adjustments ===== */ @media (max-width: 768px) { .toast-container { top: auto; bottom: 20px; right: 10px; left: 10px; } .toast { min-width: unset; max-width: unset; width: 100%; } .confirm-dialog { padding: 24px 20px; } } /* ===== GLOBAL SEARCH (Cmd+K) ===== */ .search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.55); backdrop-filter: blur(4px); z-index: 9999; display: flex; justify-content: center; padding-top: 12vh; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; } .search-overlay.active { opacity: 1; visibility: visible; } .search-container { width: 560px; max-width: 92vw; background: var(--bg-secondary); border-radius: 16px; box-shadow: 0 25px 60px rgba(0,0,0,0.3); overflow: hidden; max-height: 480px; display: flex; flex-direction: column; transform: translateY(-10px) scale(0.97); transition: transform 0.2s ease; } .search-overlay.active .search-container { transform: translateY(0) scale(1); } .search-input-wrap { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); gap: 12px; } .search-input-wrap svg { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; } .search-input { flex: 1; border: none; outline: none; font-size: 1rem; font-weight: 500; background: transparent; color: var(--text-primary); font-family: inherit; } .search-input::placeholder { color: var(--text-muted); } .search-kbd { font-size: 0.7rem; padding: 3px 7px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); flex-shrink: 0; font-family: inherit; } .search-results { overflow-y: auto; flex: 1; padding: 8px; } .search-results-empty { padding: 32px 20px; text-align: center; color: var(--text-muted); font-size: 0.88rem; } .search-group-label { padding: 8px 12px 4px; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .search-result-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0; border-radius: 8px; cursor: pointer; transition: background 0.1s ease; } .search-result-item:hover, .search-result-item.focused { background: var(--bg-tertiary); } .search-result-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .search-result-info { flex: 1; min-width: 0; } .search-result-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-name mark { background: rgba(6,182,212,0.2); color: var(--primary); border-radius: 2px; padding: 0 1px; } .search-result-detail { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; } .search-result-badge { font-size: 0.68rem; padding: 3px 8px; border-radius: 10px; font-weight: 600; flex-shrink: 0; } .search-footer { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; gap: 12px; font-size: 0.7rem; color: var(--text-muted); align-items: center; } .search-footer kbd { font-size: 0.68rem; padding: 2px 5px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 3px; font-family: inherit; } /* Sidebar search button */ .sidebar-search-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; margin: 4px 0 6px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--border-radius-sm); color: var(--text-muted); font-size: 0.78rem; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); font-family: inherit; } .sidebar-search-btn:hover { border-color: var(--primary); color: var(--primary); } .sidebar-search-btn svg { width: 14px; height: 14px; } .sidebar-search-btn .search-shortcut { margin-left: auto; font-size: 0.65rem; padding: 2px 5px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 3px; } @media (max-width: 768px) { .search-container { max-width: 95vw; border-radius: 12px; } .search-overlay { padding-top: 5vh; } .sidebar-search-btn .search-shortcut { display: none; } } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; } .stat-card { background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--border-radius); padding: 22px; position: relative; overflow: hidden; transition: box-shadow var(--transition-normal), transform var(--transition-normal); /* U3: border-top gradient accent */ border-top: 3px solid transparent; } .stat-card::after { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; border-radius: 50%; opacity: 0.08; transform: translate(20px, -20px); } /* U3: Mỗi card màu border-top khác nhau */ .stat-card:nth-child(1) { border-top-color: var(--primary); } .stat-card:nth-child(2) { border-top-color: var(--accent); } .stat-card:nth-child(3) { border-top-color: var(--success); } .stat-card:nth-child(4) { border-top-color: var(--warning); } .stat-card:nth-child(1)::after { background: var(--primary); } .stat-card:nth-child(2)::after { background: var(--accent); } .stat-card:nth-child(3)::after { background: var(--success); } .stat-card:nth-child(4)::after { background: var(--warning); } /* U3: Hover dùng shadow-lg thay vì translateY */ .stat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .stat-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .stat-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .stat-icon { width: 42px; height: 42px; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; } .stat-icon.cyan { background: rgba(6,182,212,0.15); color: var(--primary); } .stat-icon.purple { background: rgba(139,92,246,0.15); color: var(--accent); } .stat-icon.green { background: rgba(16,185,129,0.15); color: var(--success); } .stat-icon.amber { background: rgba(245,158,11,0.15); color: var(--warning); } /* U0 BUG-1: Thêm red variant — dùng khi nhân sự thiếu (<80%) */ .stat-icon.red { background: rgba(220,38,38,0.12); color: #dc2626; } .stat-value { font-size: 2rem; font-weight: 800; color: var(--text-primary); line-height: 1; } .stat-change { font-size: 0.8rem; margin-top: 8px; display: flex; align-items: center; gap: 4px; } .stat-change.up { color: var(--success); } .stat-change.down { color: var(--danger); } .dashboard-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; } .chart-card { background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--border-radius); padding: 24px; /* U3: elevation sm + hover lg */ box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-normal); } .chart-card:hover { box-shadow: var(--shadow-md); } /* U5: Dashboard date/clock header */ .dash-header-right { text-align: right; } .dash-date-label { color: var(--text-primary); font-size: 16px; font-weight: 600; } .dash-clock { font-size: 22px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: 1px; margin-top: 2px; } /* U5: Stat value variants */ .stat-value-suffix { font-size: 1rem; font-weight: 400; color: var(--text-muted); } .stat-value-empty { font-size: 1.2rem; color: var(--text-muted); } /* U5: Surgery stats mini-chart */ .surgery-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 20px 16px; } .surgery-stats-period-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .surgery-stats-period-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .surgery-stats-total { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); } .surgery-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .surgery-bar-label { flex: 0 0 90px; font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; } .surgery-bar-track { flex: 1; height: 22px; background: var(--bg-tertiary); border-radius: 6px; overflow: hidden; } .surgery-bar-fill { height: 100%; border-radius: 6px; transition: width 0.3s ease; } .surgery-bar-count { flex: 0 0 28px; text-align: right; font-size: 0.88rem; font-weight: 700; color: var(--text-primary); } /* U5: Widget empty message */ .widget-empty-msg { color: var(--text-muted); font-size: 0.85rem; padding: 12px 0; } /* U5: Trend tooltip total row */ .trend-tooltip-total-row { border-top: 1px solid var(--border); padding-top: 4px; margin-top: 4px; } .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .chart-title { font-size: 1rem; font-weight: 600; } .widget-card { background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--border-radius); padding: 24px; /* U3: elevation sm + hover md */ box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-normal); } .widget-card:hover { box-shadow: var(--shadow-md); } .widget-title { font-size: 1rem; font-weight: 600; margin-bottom: 16px; } .duty-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .duty-item:last-child { border-bottom: none; } .duty-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.8rem; color: white; flex-shrink: 0; } .duty-info { flex: 1; min-width: 0; } .duty-name { font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .duty-role { font-size: 0.75rem; color: var(--text-muted); } .timeline-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .timeline-item:last-child { border-bottom: none; } .timeline-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; } .timeline-dot.cyan { background: var(--primary); box-shadow: 0 0 8px var(--primary); } .timeline-dot.purple { background: var(--accent); box-shadow: 0 0 8px var(--accent); } .timeline-dot.green { background: var(--success); box-shadow: 0 0 8px var(--success); } .timeline-content { flex: 1; } .timeline-title { font-size: 0.88rem; font-weight: 500; } .timeline-time { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } .duty-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 20px; } .sidebar-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sidebar-widgets > .widget-card:last-child { grid-column: 1 / -1; } @media (max-width: 1200px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } .duty-grid { grid-template-columns: 1fr 1fr; } .duty-grid > .widget-card:last-child { grid-column: 1 / -1; } } @media (max-width: 768px) { .duty-grid { grid-template-columns: 1fr; } .duty-grid > .widget-card:last-child { grid-column: auto; } .sidebar-widgets { grid-template-columns: 1fr; } .sidebar-widgets > .widget-card:last-child { grid-column: auto; } .chart-card .surgery-stats-row { grid-template-columns: 1fr !important; } .surgery-month-col { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--border); padding-top: 20px; } .duty-name { white-space: normal; } } /* U5: Default styles for .surgery-month-col (desktop) */ .surgery-month-col { border-left: 1px solid var(--border); padding-left: 20px; } /* ===== Staff Sub-tabs ===== */ .staff-subtabs { display: flex; gap: 4px; margin-bottom: 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 4px; width: fit-content; } .staff-subtab { padding: 10px 24px; border: none; border-radius: 10px; background: transparent; color: var(--text-secondary); font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; font-family: inherit; display: flex; align-items: center; gap: 8px; } .staff-subtab:hover { background: var(--bg-tertiary); color: var(--text-primary); } .staff-subtab.active { background: var(--primary); color: white; font-weight: 600; box-shadow: 0 2px 8px rgba(8,145,178,0.3); } .staff-subtab-count { background: rgba(255,255,255,0.2); padding: 1px 8px; border-radius: 10px; font-size: 0.78rem; font-weight: 700; } .staff-subtab:not(.active) .staff-subtab-count { background: var(--bg-tertiary); color: var(--text-muted); } /* ===== Staff Filters & Table ===== */ .staff-filters { display: flex; gap: 12px; align-items: center; } .filter-btn { padding: 8px 16px; border: 1px solid var(--border); border-radius: 50px; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 0.82rem; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .filter-btn:hover { border-color: var(--primary); color: var(--primary); } .filter-btn.active { background: rgba(6,182,212,0.15); border-color: var(--primary); color: var(--primary-light); } .staff-table-card { margin-top: 20px; } .staff-name-cell { display: flex; align-items: center; gap: 12px; } .staff-avatar-sm { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.75rem; color: white; flex-shrink: 0; } .staff-fullname { font-weight: 500; } .staff-actions { display: flex; gap: 6px; } /* ===== U5: Extracted inline styles — staff.js ===== */ .th-action { width: 80px; } .th-stt { width: 50px; } .th-action-wide { width: 160px; } .td-muted { color: var(--text-muted); } .td-muted-sm { color: var(--text-muted); font-size: var(--text-sm, 0.8667rem); } .td-secondary { color: var(--text-secondary); } .td-center-muted { text-align: center; color: var(--text-muted); font-weight: 600; } /* Toolbar rows */ .staff-toolbar { display: flex; gap: 8px; } .staff-toolbar-mid { display: flex; gap: 8px; align-items: center; } /* Guest staff note */ .guest-staff-note { color: var(--text-muted); font-size: var(--text-sm, 0.8667rem); padding: 6px 12px; } /* Status history */ .status-history-scroll { max-height: 140px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px; margin-bottom: 12px; } .status-history-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; border-radius: 6px; margin-bottom: 3px; } .status-history-text { font-size: var(--text-base, 0.9333rem); } .status-history-dates { color: var(--text-muted); margin-left: 6px; } .status-history-note { color: var(--text-secondary); margin-left: 4px; font-style: italic; } /* Status add section */ .status-add-section { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; } /* Departed row */ .departed-row { opacity: 0.75; } .departed-td-center { text-align: center; color: var(--text-muted); } /* Departed action buttons */ .btn-restore { background: var(--success); color: #fff; border: none; font-size: var(--text-xxs, 0.6667rem); cursor: pointer; } .btn-delete-perm { background: var(--danger); color: #fff; border: none; font-size: var(--text-xxs, 0.6667rem); cursor: pointer; } /* Departed badge */ .badge-departed { background: #94a3b8; color: #fff; } /* ===== CÁC TỔ ĐẶC TRÁCH ===== */ .team-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; } .team-page-desc { color: var(--text-secondary); font-size: 0.88rem; margin: 0; } .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .team-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius); padding: 0; overflow: hidden; transition: box-shadow var(--transition-normal), border-color var(--transition-normal); } .team-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary-light); } .team-card-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); background: rgba(8,145,178,0.04); gap: 8px; min-height: 72px; /* đảm bảo header đều cao trong cùng hàng */ } [data-theme="dark"] .team-card-header { background: rgba(8,145,178,0.07); } .team-card-title-row { display: flex; align-items: flex-start; gap: 10px; } .team-card-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.2; } .team-card-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.4; } .team-card-actions { display: flex; gap: 2px; flex-shrink: 0; } .team-member-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 60px; } .team-member-item { display: flex; align-items: center; gap: 10px; } .team-member-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.72rem; color: white; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.12); } .team-member-info { display: flex; flex-direction: column; gap: 1px; } .team-member-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; } .team-member-title { font-size: 0.75rem; color: var(--text-muted); line-height: 1.2; } .team-member-empty { color: var(--text-muted); font-size: 0.82rem; font-style: italic; } .team-card-note { padding: 8px 16px 12px; font-size: 0.8rem; color: var(--text-secondary); border-top: 1px dashed var(--border); background: rgba(0,0,0,0.015); } [data-theme="dark"] .team-card-note { background: rgba(255,255,255,0.02); } /* Mobile */ @media (max-width: 768px) { .team-grid { grid-template-columns: 1fr; } .team-page-header { flex-direction: column; align-items: flex-start; } } /* ===== STAFF TRACKING PAGE ===== */ .st-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; } .st-view-tabs { display: flex; gap: 4px; background: #ffffff; border: 1px solid var(--border); border-radius: 10px; padding: 3px; } .st-tab { padding: 6px 16px; border: none; background: none; border-radius: 8px; cursor: pointer; font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); transition: background 0.2s, color 0.2s, border-color 0.2s; } .st-tab.active { background: var(--primary); color: #fff; } .st-tab:hover:not(.active) { background: var(--hover-bg); } /* ===== LEGEND — badge chips ===== */ .st-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .st-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); } /* Legend chips — match cell appearance */ .st-legend-chip { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 20px; border-radius: 4px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; } .st-chip-active { background: #dcfce7; color: #16a34a; border: 1.5px solid #86efac; } .st-chip-leave { background: #fef9c3; color: #a16207; border: 1.5px solid #fde047; } .st-chip-sick { background: #fee2e2; color: #dc2626; border: 1.5px solid #fca5a5; } .st-chip-business { background: #ede9fe; color: #7c3aed; border: 1.5px solid #c4b5fd; } .st-chip-dayoff { background: #dbeafe; color: #2563eb; border: 1.5px solid #93c5fd; } /* Summary */ .st-summary { margin-bottom: 16px; } .st-summary-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 0.85rem; } .st-summary-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; } /* Grid card */ .st-grid-card { padding: 0; overflow: hidden; } .st-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .st-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 700px; } .st-table thead { position: sticky; top: 0; z-index: 2; } .st-staff-header { text-align: left; padding: 10px 12px; background: #ffffff; border-bottom: 2px solid var(--border); border-right: 2px solid var(--border); font-weight: 600; min-width: 180px; position: sticky; left: 0; z-index: 10; color: var(--text-primary); box-shadow: 4px 0 8px rgba(0,0,0,0.08); } .st-day-header { text-align: center; padding: 8px 6px; background: #ffffff; border-bottom: 2px solid var(--border); font-weight: 500; min-width: 52px; color: var(--text-secondary); } .st-day-header.st-today { background: var(--primary); color: #fff; border-radius: 0; } .st-day-header.st-weekend { color: var(--text-muted); background: var(--hover-bg); } .st-day-header.st-weekend.st-today { background: var(--primary); color: #fff; } .st-day-name { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; } .st-day-num { font-size: 0.9rem; font-weight: 700; } /* Staff cell */ .st-staff-cell { padding: 8px 12px; border-bottom: 1px solid var(--border); border-right: 2px solid var(--border); position: sticky; left: 0; background: #ffffff; z-index: 5; box-shadow: 4px 0 8px rgba(0,0,0,0.08); } .st-staff-info { display: flex; align-items: center; gap: 8px; } .st-staff-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: #fff; flex-shrink: 0; } .st-staff-name { font-weight: 600; font-size: 0.82rem; color: var(--text-primary); white-space: nowrap; } .st-staff-role { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; } /* ===== STATUS CELLS — Colorblind-safe design ===== */ /* Uses DUAL ENCODING: background color + text abbreviation */ /* Palette tested for protanopia, deuteranopia, tritanopia */ .st-cell { text-align: center; padding: 6px 4px; border-bottom: 1px solid var(--border); cursor: default; transition: background 0.15s; min-width: 52px; } .st-cell[onclick] { cursor: pointer; } .st-cell[onclick]:hover { filter: brightness(0.92); } /* Status label — text inside each cell */ .st-status-label { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 22px; border-radius: 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; } .st-cell.st-today { background: rgba(6, 182, 212, 0.06); } .st-cell.st-weekend { background: var(--hover-bg); } /* ===== Per-status styles — MATCHED to legend chips ===== */ /* Active — subtle green check */ .st-cell.st-status-active .st-status-label { background: #dcfce7; color: #16a34a; border: 1px solid #86efac; font-size: 0.75rem; } /* Leave (Nghỉ phép) — warm yellow */ .st-cell.st-status-leave { background: #fefce8 !important; } .st-cell.st-status-leave .st-status-label { background: #fef08a; color: #854d0e; border: 1.5px solid #facc15; } /* Sick (Bệnh ốm) — strong red */ .st-cell.st-status-sick { background: #fef2f2 !important; } .st-cell.st-status-sick .st-status-label { background: #fecaca; color: #dc2626; border: 1.5px solid #f87171; } /* Business (Công tác) — purple */ .st-cell.st-status-business { background: #faf5ff !important; } .st-cell.st-status-business .st-status-label { background: #ddd6fe; color: #6d28d9; border: 1.5px solid #a78bfa; } /* Dayoff (Nghỉ bù) — blue */ .st-cell.st-status-dayoff { background: #eff6ff !important; } .st-cell.st-status-dayoff .st-status-label { background: #bfdbfe; color: #1d4ed8; border: 1.5px solid #60a5fa; } /* Today column + status combos */ .st-cell.st-today.st-status-leave { background: #fef9c3 !important; } .st-cell.st-today.st-status-sick { background: #fee2e2 !important; } .st-cell.st-today.st-status-business { background: #ede9fe !important; } .st-cell.st-today.st-status-dayoff { background: #dbeafe !important; } /* Responsive */ @media (max-width: 768px) { .st-controls { flex-direction: column; align-items: stretch; } .st-legend { justify-content: center; } .st-staff-header { min-width: 130px; } .st-staff-avatar { display: none; } .st-status-label { width: 24px; height: 18px; font-size: 0.6rem; } } /* ===== U5: Extracted inline styles — staff-tracking.js ===== */ .st-absent-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; } .st-absent-avatar-wrapper { width: 28px; height: 28px; font-size: var(--text-xxs, 0.6667rem); } .st-absent-info { flex: 1; min-width: 0; } .st-absent-name { font-size: var(--text-sm, 0.8667rem); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-absent-role { font-size: var(--text-xxs, 0.6667rem); color: var(--text-muted); } .st-summary-card { margin-bottom: 16px; padding: 16px; } .st-summary-header { display: flex; align-items: center; justify-content: space-between; } .st-summary-title { font-size: var(--text-sm, 0.8667rem); font-weight: 700; color: var(--text-primary); } .st-summary-date { font-size: var(--text-xs, 0.7333rem); color: var(--text-muted); margin-top: 2px; } .st-summary-ratio-right { text-align: right; } .st-summary-pct { font-size: var(--text-xs, 0.7333rem); color: var(--text-muted); } .st-absent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; } .st-warn-low { margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: rgba(239, 68, 68, 0.08); color: var(--danger); font-size: var(--text-xs, 0.7333rem); font-weight: 600; } .st-filter-bar { margin-bottom: 12px; } .st-absent-today { background: rgba(239, 68, 68, 0.04); } /* ===== DARK MODE OVERRIDES ===== */ [data-theme="dark"] .st-view-tabs { background: var(--bg-secondary); } [data-theme="dark"] .st-staff-header { background: var(--bg-tertiary); } [data-theme="dark"] .st-day-header { background: var(--bg-tertiary); } [data-theme="dark"] .st-staff-cell { background: var(--bg-secondary); } /* Status cells — dark mode dùng màu đậm hơn để readable trên nền tối */ [data-theme="dark"] .st-cell.st-status-active .st-status-label { background: rgba(52,211,153,0.2); color: #34d399; border-color: rgba(52,211,153,0.4); } [data-theme="dark"] .st-cell.st-status-leave { background: rgba(251,191,36,0.08) !important; } [data-theme="dark"] .st-cell.st-status-leave .st-status-label { background: rgba(251,191,36,0.25); color: #fbbf24; border-color: rgba(251,191,36,0.5); } [data-theme="dark"] .st-cell.st-status-sick { background: rgba(248,113,113,0.08) !important; } [data-theme="dark"] .st-cell.st-status-sick .st-status-label { background: rgba(248,113,113,0.25); color: #f87171; border-color: rgba(248,113,113,0.5); } [data-theme="dark"] .st-cell.st-status-business { background: rgba(167,139,250,0.08) !important; } [data-theme="dark"] .st-cell.st-status-business .st-status-label { background: rgba(167,139,250,0.25); color: #a78bfa; border-color: rgba(167,139,250,0.5); } [data-theme="dark"] .st-cell.st-status-dayoff { background: rgba(96,165,250,0.08) !important; } [data-theme="dark"] .st-cell.st-status-dayoff .st-status-label { background: rgba(96,165,250,0.25); color: #60a5fa; border-color: rgba(96,165,250,0.5); } [data-theme="dark"] .st-cell.st-today.st-status-leave { background: rgba(251,191,36,0.12) !important; } [data-theme="dark"] .st-cell.st-today.st-status-sick { background: rgba(248,113,113,0.12) !important; } [data-theme="dark"] .st-cell.st-today.st-status-business { background: rgba(167,139,250,0.12) !important; } [data-theme="dark"] .st-cell.st-today.st-status-dayoff { background: rgba(96,165,250,0.12) !important; } /* Legend chips — dark mode */ [data-theme="dark"] .st-chip-active { background: rgba(52,211,153,0.15); color: #34d399; border-color: rgba(52,211,153,0.3); } [data-theme="dark"] .st-chip-leave { background: rgba(251,191,36,0.15); color: #fbbf24; border-color: rgba(251,191,36,0.3); } [data-theme="dark"] .st-chip-sick { background: rgba(248,113,113,0.15); color: #f87171; border-color: rgba(248,113,113,0.3); } [data-theme="dark"] .st-chip-business { background: rgba(167,139,250,0.15); color: #a78bfa; border-color: rgba(167,139,250,0.3); } [data-theme="dark"] .st-chip-dayoff { background: rgba(96,165,250,0.15); color: #60a5fa; border-color: rgba(96,165,250,0.3); } .kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; } .kanban-column { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius); padding: 16px; min-height: 400px; } .kanban-column-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .kanban-column-title { font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .kanban-count { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); } .kanban-column-title .dot { width: 8px; height: 8px; border-radius: 50%; } .dot-warning { background: var(--warning); } .dot-primary { background: var(--primary); } .dot-success { background: var(--success); } .kanban-cards { display: flex; flex-direction: column; gap: 10px; min-height: 60px; } .task-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--border-radius-sm); padding: 14px; cursor: grab; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .task-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .task-card.dragging { opacity: 0.5; } .task-card-title { font-size: 0.88rem; font-weight: 500; margin-bottom: 0; } .task-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .task-card-assignee { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-muted); } .task-card-assignee-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 600; color: white; } .task-card-deadline { font-size: 0.75rem; color: var(--text-muted); } .priority-bar { width: 100%; height: 3px; border-radius: 2px; margin-bottom: 10px; } .priority-high { background: var(--danger); } .priority-medium { background: var(--warning); } .priority-low { background: var(--success); } /* Category filters */ .task-category-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); font-family: inherit; } .filter-chip:hover { border-color: var(--border-light); background: var(--bg-hover); } .filter-chip.active { background: var(--primary); color: white; border-color: var(--primary); } .chip-count { font-size: 0.68rem; background: rgba(0,0,0,0.08); padding: 1px 6px; border-radius: 10px; font-weight: 600; } .filter-chip.active .chip-count { background: rgba(255,255,255,0.25); } /* Category badge on card */ .task-cat-badge { font-size: 0.65rem; padding: 2px 8px; border-radius: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .task-filters { display: flex; gap: 12px; } /* Task card action buttons */ .task-card-actions { display: flex; justify-content: flex-end; gap: 4px; margin-top: 8px; } .task-card-actions .btn-icon svg, .task-card .btn-icon svg { pointer-events: none; } .task-delete-btn:hover { color: var(--danger) !important; border-color: var(--danger) !important; } @media (max-width: 1024px) { .kanban-board { grid-template-columns: 1fr; } } /* U5: Task page header button group */ .task-header-actions { display: flex; gap: 8px; } /* U5: Task card header row */ .task-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; } /* U5: Task card description */ .task-card-desc { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 4px; } /* U5: Task card meta info row */ .task-card-meta-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; } /* U5: Small meta info chips (date, assigner) */ .task-meta-date, .task-meta-assigner { font-size: 0.7rem; color: var(--text-muted); } .task-meta-completed { font-size: 0.7rem; color: var(--success); } /* U5: Trash table cells */ .trash-td-muted { color: var(--text-muted); font-size: 0.82rem; } .trash-td-desc { font-size: 0.78rem; color: var(--text-muted); } .trash-td-actions { display: flex; gap: 4px; } .trash-action-col { width: 140px; } /* U5: Modal confirm padding */ .modal-confirm-body { padding: 8px 0; } /* U5: Deadline diff banners */ .task-deadline-diff { margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; } .task-deadline-diff.success { background: rgba(16,185,129,0.1); color: var(--success); } .task-deadline-diff.primary { background: rgba(59,130,246,0.1); color: var(--primary); } .task-deadline-diff.danger { background: rgba(239,68,68,0.1); color: var(--danger); } /* U5: Completed date label in task detail */ .task-completed-label { color: var(--success); } /* U5: Trash card with no padding */ .card-no-padding { padding: 0; overflow: hidden; } /* ===== CALENDAR CONTROLS ===== */ .calendar-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .calendar-nav { display: flex; align-items: center; gap: 16px; } .calendar-month-label { font-size: 1.1rem; font-weight: 600; min-width: 180px; text-align: center; } /* View mode buttons */ .calendar-view-modes { display: flex; border: 1px solid var(--border); border-radius: var(--border-radius-sm); overflow: hidden; } .view-mode-btn { padding: 8px 16px; border: none; background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); font-family: inherit; border-right: 1px solid var(--border); } .view-mode-btn:last-child { border-right: none; } .view-mode-btn:hover { background: var(--bg-hover); } .view-mode-btn.active { background: var(--primary); color: white; } /* ===== MONTH VIEW (GRID) ===== */ .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden; } .calendar-day-header { padding: 12px 8px; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: var(--bg-secondary); } .calendar-day { min-height: 110px; padding: 8px; background: var(--bg-secondary); position: relative; cursor: pointer; transition: background var(--transition-fast); } .calendar-day:hover { background: var(--bg-hover); } .calendar-day.other-month { opacity: 0.3; } .calendar-day.today { background: rgba(8,145,178,0.06); } .calendar-day.today .day-number { background: var(--primary); color: white; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; } .day-number { font-size: 0.82rem; font-weight: 500; margin-bottom: 4px; } /* Month event chip */ .calendar-event { font-size: 0.7rem; padding: 3px 6px; border-radius: 4px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; font-weight: 500; } .calendar-event.meeting { background: rgba(8,145,178,0.15); color: var(--primary-dark); } .calendar-event.consultation { background: rgba(124,58,237,0.15); color: var(--accent); } .calendar-event.training { background: rgba(5,150,105,0.15); color: var(--success); } .calendar-event.conference { background: rgba(217,119,6,0.15); color: var(--warning); } .calendar-event.other { background: rgba(100,116,139,0.15); color: var(--text-secondary); } /* ===== WEEK / 3-DAY COLUMN VIEW ===== */ .calendar-columns { border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden; background: var(--bg-secondary); } .cal-col-header-row { display: grid; border-bottom: 2px solid var(--border); background: var(--bg-secondary); position: sticky; top: 0; z-index: 2; } .seven-day .cal-col-header-row { grid-template-columns: 56px repeat(7, 1fr); } .three-day .cal-col-header-row { grid-template-columns: 56px repeat(3, 1fr); } .cal-col-header { padding: 12px 8px; text-align: center; border-right: 1px solid var(--border); } .cal-col-header:last-child { border-right: none; } .cal-col-header.today { background: rgba(8,145,178,0.06); } .cal-col-day { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; } .cal-col-date { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-top: 2px; } .cal-col-date.today-num { background: var(--primary); color: white; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; } .cal-col-body { display: grid; max-height: 600px; overflow-y: auto; } .seven-day .cal-col-body { grid-template-columns: 56px repeat(7, 1fr); } .three-day .cal-col-body { grid-template-columns: 56px repeat(3, 1fr); } .cal-time-gutter { border-right: 1px solid var(--border); } .cal-col-header-row .cal-time-gutter { padding: 12px 0; } .cal-time-slot { height: 52px; padding: 4px 6px; font-size: 0.68rem; color: var(--text-muted); text-align: right; border-bottom: 1px solid var(--border); box-sizing: border-box; } .cal-day-col { position: relative; border-right: 1px solid var(--border); cursor: pointer; } .cal-day-col:last-child { border-right: none; } .cal-day-col.today-col { background: rgba(8,145,178,0.03); } .cal-hour-cell { height: 52px; border-bottom: 1px solid var(--border); box-sizing: border-box; } .cal-hour-cell:hover { background: rgba(0,0,0,0.02); } /* Column event */ .cal-event { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 4px 8px; font-size: 0.72rem; overflow: hidden; cursor: pointer; z-index: 1; transition: transform 0.1s ease, box-shadow 0.1s ease; display: flex; flex-direction: column; gap: 1px; } .cal-event:hover { transform: scale(1.02); box-shadow: var(--shadow-md); z-index: 5; } .cal-event.meeting { background: rgba(8,145,178,0.2); color: var(--primary-dark); border-left: 3px solid var(--primary); } .cal-event.consultation { background: rgba(124,58,237,0.2); color: var(--accent); border-left: 3px solid var(--accent); } .cal-event.training { background: rgba(5,150,105,0.2); color: var(--success); border-left: 3px solid var(--success); } .cal-event.conference { background: rgba(217,119,6,0.2); color: var(--warning); border-left: 3px solid var(--warning); } .cal-event.other { background: rgba(100,116,139,0.2); color: var(--text-secondary); border-left: 3px solid var(--text-muted); } .cal-event-time { font-size: 0.65rem; font-weight: 600; opacity: 0.85; } .cal-event-title { font-weight: 600; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plan-type-filters { display: flex; gap: 8px; flex-wrap: wrap; } /* Multi-day event bar */ .calendar-event.multi-day { border-radius: 0; margin-left: -8px; margin-right: -8px; padding-left: 10px; padding-right: 10px; font-weight: 600; opacity: 0.9; } .calendar-event.multi-start { margin-left: 0; border-radius: 4px 0 0 4px; } .calendar-event.multi-end { margin-right: 0; border-radius: 0 4px 4px 0; } .calendar-event.multi-mid { font-size: 0.65rem; opacity: 0.7; } /* All-day event in column view */ .cal-event-allday { position: relative !important; top: auto !important; left: 2px; right: 2px; margin: 2px 0; border-radius: 4px; padding: 3px 6px; font-size: 0.72rem; font-weight: 600; cursor: pointer; z-index: 2; } .cal-event-allday.meeting { background: rgba(8,145,178,0.25); color: var(--primary-dark); } .cal-event-allday.consultation { background: rgba(124,58,237,0.25); color: var(--accent); } .cal-event-allday.training { background: rgba(5,150,105,0.25); color: var(--success); } .cal-event-allday.conference { background: rgba(217,119,6,0.25); color: var(--warning); } .cal-event-allday.other { background: rgba(100,116,139,0.25); color: var(--text-secondary); } /* ── Refactored from inline styles (Phase U5) ── */ /* plans-shcm-info-box: SHCM auto-created event info box */ .plans-shcm-info-box { padding: 10px; background: var(--bg-secondary); border-radius: 8px; font-size: 0.82rem; color: var(--text-muted); } /* plans-shcm-link: link to Research page inside SHCM info box */ .plans-shcm-link { color: var(--primary); font-weight: 600; } /* plans-time-row: form-row with centered alignment for time fields */ .plans-time-row { align-items: center; } /* plans-allday-group: flex-shrink checkbox group with top padding */ .plans-allday-group { flex: 0 0 auto; padding-top: 22px; } /* plans-allday-label: inline flex label for checkbox + text */ .plans-allday-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 600; white-space: nowrap; } /* plans-allday-checkbox: sized checkbox */ .plans-allday-checkbox { width: 16px; height: 16px; } /* plans-duration-input: readonly duration input with secondary bg */ .plans-duration-input { background: var(--bg-secondary); cursor: default; } /* plans-modal-body: modal detail view flex column */ .plans-modal-body { display: flex; flex-direction: column; gap: 12px; } /* ===== DARK MODE OVERRIDES — Calendar Events ===== */ /* Light mode: rgba(color, 0.15–0.25) + dark text → ổn Dark mode: cần opacity cao hơn + text sáng hơn để đủ tương phản */ /* Monthly grid events */ [data-theme="dark"] .calendar-event.meeting { background: rgba(8,145,178,0.4); color: #67e8f9; } [data-theme="dark"] .calendar-event.consultation { background: rgba(124,58,237,0.4); color: #c4b5fd; } [data-theme="dark"] .calendar-event.training { background: rgba(5,150,105,0.4); color: #6ee7b7; } [data-theme="dark"] .calendar-event.conference { background: rgba(217,119,6,0.45); color: #fcd34d; } [data-theme="dark"] .calendar-event.other { background: rgba(100,116,139,0.35); color: #cbd5e1; } /* Week/column view events */ [data-theme="dark"] .cal-event.meeting { background: rgba(8,145,178,0.35); color: #67e8f9; } [data-theme="dark"] .cal-event.consultation { background: rgba(124,58,237,0.35); color: #c4b5fd; } [data-theme="dark"] .cal-event.training { background: rgba(5,150,105,0.35); color: #6ee7b7; } [data-theme="dark"] .cal-event.conference { background: rgba(217,119,6,0.4); color: #fcd34d; } [data-theme="dark"] .cal-event.other { background: rgba(100,116,139,0.3); color: #cbd5e1; } /* All-day events */ [data-theme="dark"] .cal-event-allday.meeting { background: rgba(8,145,178,0.4); color: #67e8f9; } [data-theme="dark"] .cal-event-allday.consultation { background: rgba(124,58,237,0.4); color: #c4b5fd; } [data-theme="dark"] .cal-event-allday.training { background: rgba(5,150,105,0.4); color: #6ee7b7; } [data-theme="dark"] .cal-event-allday.conference { background: rgba(217,119,6,0.45); color: #fcd34d; } [data-theme="dark"] .cal-event-allday.other { background: rgba(100,116,139,0.35); color: #cbd5e1; } /* Multi-day bars — cần opacity cao nhất để nhìn thấy span */ [data-theme="dark"] .calendar-event.multi-day { opacity: 1; font-weight: 700; } .patient-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .patient-stat { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius-sm); padding: 16px; text-align: center; } .patient-stat-value { font-size: 1.5rem; font-weight: 700; } .patient-stat-label { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; } .patient-stat-value.cyan { color: var(--primary); } .patient-stat-value.green { color: var(--success); } .patient-stat-value.purple { color: var(--accent); } .patient-stat-value.amber { color: var(--warning); } .patient-table-card { margin-top: 0; } .patient-status { display: flex; align-items: center; gap: 6px; } .patient-status-dot { width: 8px; height: 8px; border-radius: 50%; } .patient-status-dot.active { background: var(--success); box-shadow: 0 0 6px var(--success); } .patient-status-dot.pre-op { background: var(--warning); box-shadow: 0 0 6px var(--warning); } .patient-status-dot.post-op { background: var(--primary); box-shadow: 0 0 6px var(--primary); } .patient-status-dot.discharged { background: var(--text-subtle); } .patient-min-max-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; vertical-align: middle; } .patient-min-max-badge.min { background: rgba(16, 185, 129, 0.12); color: #10b981; } .patient-min-max-badge.max { background: rgba(239, 68, 68, 0.12); color: #ef4444; } @media (max-width: 1024px) { .patient-stats { grid-template-columns: repeat(2, 1fr); } } /* ===== WEEKLY SCHEDULE ===== */ .schedule-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .schedule-week-label { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); min-width: 200px; text-align: center; } .schedule-table-wrap { overflow-x: auto; border-radius: var(--border-radius); border: 1px solid var(--glass-border); background: var(--glass-bg); } .schedule-table { width: 100%; border-collapse: collapse; min-width: 900px; } .schedule-table thead th { padding: 10px 8px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); border-bottom: 2px solid var(--border); text-align: center; background: rgba(0,0,0,0.03); } .schedule-pos-header { width: 130px; min-width: 130px; text-align: left !important; padding-left: 16px !important; } .schedule-day-header { min-width: 100px; } .schedule-day-header.today { color: var(--primary) !important; background: rgba(8, 145, 178, 0.06) !important; } .schedule-day-header.weekend { color: var(--danger) !important; } .schedule-day-name { display: block; font-size: 0.8rem; } .schedule-day-date { display: block; font-size: 0.7rem; opacity: 0.75; margin-top: 2px; } /* Position label */ .schedule-pos-label { padding: 8px 12px !important; vertical-align: middle; background: rgba(0,0,0,0.02); } .schedule-pos-name { font-weight: 600; font-size: 0.82rem; color: var(--text-primary); display: block; } .schedule-pos-slots { font-size: 0.72rem; /* A: 0.68rem → 0.72rem WCAG 1.4.4 */ color: var(--text-muted); margin-top: 2px; display: block; } /* Cells */ .schedule-cell { padding: 3px 4px !important; text-align: center; border-bottom: 1px solid var(--border); border-right: 1px solid rgba(0,0,0,0.03); vertical-align: middle; min-height: 32px; } .schedule-cell.weekend { background: rgba(220, 38, 38, 0.03); } .schedule-cell.readonly { padding: 6px 8px !important; } .schedule-pos-first td { border-top: 1px solid var(--border-light); } .schedule-slot-label { display: block; font-size: 0.72rem; /* A: 0.6rem (9px) → 0.72rem WCAG 1.4.4 */ color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 1px; } /* Select in cells */ .schedule-select { width: 100%; padding: 4px 2px; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-muted); font-family: inherit; font-size: 0.8rem; /* A: 9pt (12px) → 0.8rem; mobile override →0 16px chống iOS zoom */ cursor: pointer; outline: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .schedule-select:hover { border-color: var(--border-light); background: rgba(0,0,0,0.02); } .schedule-select:focus { border-color: var(--primary); background: rgba(8, 145, 178, 0.06); color: var(--text-primary); } .schedule-select.has-value { color: var(--text-primary); font-weight: 500; } /* Lead position: bold first slot for Mổ and Trực khoa */ .schedule-lead-slot .schedule-select.has-value, .schedule-lead-slot .schedule-name { font-weight: 700; color: var(--primary); /* light: #0891b2 | dark: #38bdf8 */ } .schedule-lead-slot .schedule-select.has-value { background: rgba(8, 145, 178, 0.06); } /* Dark: dùng primary-light (#7dd3fc) — tương phản cao hơn trên nền #161b22 */ [data-theme="dark"] .schedule-lead-slot .schedule-select.has-value, [data-theme="dark"] .schedule-lead-slot .schedule-name { color: #7dd3fc; /* contrast ~7.5:1 ✅ */ } .schedule-name { font-size: 0.8rem; /* A: 9pt (12px) → 0.8rem WCAG 1.4.4 */ color: var(--text-secondary); } /* Notes */ .schedule-notes { padding: 16px 20px; } /* Robot Surgery */ .robot-surgery-card { padding: 16px 20px; border-left: 3px solid var(--accent); } .robot-table thead th { background: rgba(124, 58, 237, 0.06); } .robot-table td { padding: 6px 8px !important; } /* ===== Group pastel row backgrounds ===== */ tr[data-group="trucKhoa"] td { background-color: rgba(6, 182, 212, 0.06); } tr[data-group="sieuAm"] td { background-color: rgba(139, 92, 246, 0.06); } tr[data-group="pkB023"] td { background-color: rgba(245, 158, 11, 0.06); } tr[data-group="pkB020"] td { background-color: rgba(236, 72, 153, 0.06); } tr[data-group="pkK001"] td { background-color: rgba(16, 185, 129, 0.06); } tr[data-group="mo"] td { background-color: rgba(239, 68, 68, 0.06); } tr[data-group="trucBCN"] td { background-color: rgba(20, 184, 166, 0.06); } tr[data-group="trucBV"] td { background-color: rgba(59, 130, 246, 0.06); } tr[data-group="trucDD"] td { background-color: rgba(249, 115, 22, 0.06); } /* Position label keeps its own bg */ tr[data-group] .schedule-pos-label { background: rgba(0,0,0,0.02); } /* ── Refactored from inline styles (Phase U5) ── */ /* .btn-danger trong schedule đã có màu từ btn-danger, không cần override */ /* schedule-notes--mt: top margin for notes card */ .schedule-notes--mt { margin-top: 20px; } /* schedule-notes-heading: Ghi chú section title */ .schedule-notes-heading { font-size: 0.95rem; margin-bottom: 8px; color: var(--primary-light); } /* schedule-notes-textarea: notes textarea min height */ .schedule-notes-textarea { min-height: 60px; } /* schedule-notes-readonly: read-only notes paragraph */ .schedule-notes-readonly { color: var(--text-muted); font-size: 0.85rem; white-space: pre-wrap; line-height: 1.6; } /* robot-surgery-card--mt: top margin for robot card */ .robot-surgery-card--mt { margin-top: 20px; } /* robot-card-header: flex row with bottom margin */ .robot-card-header { margin-bottom: 12px; } /* robot-card-title: robot section heading */ .robot-card-title { font-size: 0.95rem; color: var(--accent-light); } /* robot-th-day / robot-th-session / robot-th-action: table header widths */ .robot-th-day { width: 160px; } .robot-th-session { width: 80px; } .robot-th-action { width: 50px; } /* robot-empty-cell: empty state cell */ .robot-empty-cell { text-align: center; color: var(--text-muted); padding: 20px; } /* ===== DARK MODE OVERRIDES ===== */ /* Pos label — background tối không đủ contrast với cell thường */ [data-theme="dark"] .schedule-pos-label { background: rgba(255,255,255,0.04); } [data-theme="dark"] tr[data-group] .schedule-pos-label { background: rgba(255,255,255,0.04); } /* Weekend day header — đỏ sáng hơn, không dùng var(--danger) tối */ [data-theme="dark"] .schedule-day-header.weekend { color: #fca5a5 !important; /* light red #fca5a5 contrast ~6:1 */ } /* Weekend cells — subtle red tint */ [data-theme="dark"] .schedule-cell.weekend { background: rgba(248,113,113,0.06); } /* Today header — primary-light thay primary cho sáng hơn */ [data-theme="dark"] .schedule-day-header.today { background: rgba(56,189,248,0.1) !important; } /* Group row backgrounds — tăng opacity cho dark bg */ [data-theme="dark"] tr[data-group="trucKhoa"] td { background-color: rgba(6,182,212,0.1); } [data-theme="dark"] tr[data-group="sieuAm"] td { background-color: rgba(139,92,246,0.1); } [data-theme="dark"] tr[data-group="pkB023"] td { background-color: rgba(245,158,11,0.1); } [data-theme="dark"] tr[data-group="pkB020"] td { background-color: rgba(236,72,153,0.1); } [data-theme="dark"] tr[data-group="pkK001"] td { background-color: rgba(16,185,129,0.1); } [data-theme="dark"] tr[data-group="mo"] td { background-color: rgba(239,68,68,0.1); } [data-theme="dark"] tr[data-group="trucBCN"] td { background-color: rgba(20,184,166,0.1); } [data-theme="dark"] tr[data-group="trucBV"] td { background-color: rgba(59,130,246,0.1); } [data-theme="dark"] tr[data-group="trucDD"] td { background-color: rgba(249,115,22,0.1); } /* ===== ALERT / REMINDER BANNER FOR SCHEDULE CHANGES ===== */ .schedule-alert-banner { display: flex; align-items: flex-start; gap: 12px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); border-left: 4px solid #f59e0b; border-radius: var(--radius-md, 8px); padding: 12px 16px; margin-bottom: 16px; } .schedule-alert-icon { font-size: 1.25rem; line-height: 1; margin-top: 2px; } .schedule-alert-content { flex: 1; } .schedule-alert-title { font-size: 0.88rem; font-weight: 700; color: var(--text-primary, #1e293b); margin-bottom: 6px; } .schedule-alert-list { margin: 0 0 6px 0; padding-left: 18px; font-size: 0.83rem; color: var(--text-secondary, #475569); line-height: 1.5; } .schedule-alert-list li { margin-bottom: 3px; } .schedule-alert-sub { font-size: 0.78rem; font-style: italic; color: var(--text-muted, #64748b); } [data-theme="dark"] .schedule-alert-banner { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35); } [data-theme="dark"] .schedule-alert-title { color: #f8fafc; } [data-theme="dark"] .schedule-alert-list { color: #cbd5e1; } [data-theme="dark"] .schedule-alert-sub { color: #94a3b8; } /* ── Conflict Alert Banner & Cell Highlight ── */ .schedule-conflict-banner { display: flex; gap: 12px; background: #fef2f2; border: 1.5px solid #fca5a5; border-radius: var(--border-radius); padding: 14px 18px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1); } .schedule-conflict-banner .schedule-alert-icon { font-size: 1.5rem; } .schedule-conflict-banner .schedule-alert-title { color: #b91c1c; } .schedule-conflict-banner .schedule-alert-list { color: #991b1b; } .schedule-conflict-banner .schedule-alert-sub { color: #dc2626; font-weight: 600; } [data-theme="dark"] .schedule-conflict-banner { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4); } [data-theme="dark"] .schedule-conflict-banner .schedule-alert-title { color: #fca5a5; } [data-theme="dark"] .schedule-conflict-banner .schedule-alert-list { color: #fecaca; } [data-theme="dark"] .schedule-conflict-banner .schedule-alert-sub { color: #fca5a5; } .schedule-select--conflict { border-color: #ef4444 !important; background-color: #fef2f2 !important; color: #b91c1c !important; font-weight: 700 !important; } [data-theme="dark"] .schedule-select--conflict { background-color: rgba(239, 68, 68, 0.25) !important; color: #fca5a5 !important; } /* ===== SURGERY SCHEDULE ===== */ .surgery-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .surgery-stats { display: flex; gap: 12px; } .surgery-stat-chip { padding: 6px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 500; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); } /* ── Sticky header zone ── */ .surgery-sticky-header { position: sticky; top: 0; z-index: 20; background: var(--bg-primary); padding-bottom: 4px; margin: 0 -32px; padding-left: 32px; padding-right: 32px; } /* ── Horizontal scroll zone ── */ .surgery-scroll-zone { overflow-x: auto; overflow-y: hidden; /* Pull out full width so 7-day grid can scroll horizontally */ margin: 0 -32px; padding: 0 32px 12px; /* Custom thin scrollbar */ scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .surgery-scroll-zone::-webkit-scrollbar { height: 6px; } .surgery-scroll-zone::-webkit-scrollbar-track { background: transparent; } .surgery-scroll-zone::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .surgery-scroll-zone::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Week grid — flex so columns don't compress */ .surgery-week-grid { display: flex; gap: 8px; min-width: max-content; /* allow horizontal expansion */ } .surgery-day { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius); min-height: 300px; display: flex; flex-direction: column; width: 200px; /* fixed column width per day */ flex-shrink: 0; } .surgery-day.today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .surgery-day.weekend { background: rgba(0,0,0,0.01); } .surgery-day-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.01); } .surgery-day.today .surgery-day-header { background: rgba(8,145,178,0.06); } .surgery-day-name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); } .surgery-day-count { font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; background: var(--bg-tertiary); color: var(--text-muted); font-weight: 600; } .surgery-day-body { padding: 8px; flex: 1; display: flex; flex-direction: column; gap: 6px; } /* Surgery card – compact / expanded */ .surgery-card { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 0; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; font-size: 0.78rem; overflow: hidden; } [data-theme="dark"] .surgery-card { background: var(--bg-secondary); /* fix: white card → dark bg, text readable */ } .surgery-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); } /* Compact row (always visible) */ .surgery-card-compact-row { display: flex; align-items: flex-start; gap: 6px; padding: 7px 10px; } .surgery-card-order { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; } .surgery-type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .surgery-card-compact-name { flex: 1; font-weight: 600; font-size: 0.78rem; color: var(--text-primary); white-space: normal; /* allow wrap in fixed-width column */ overflow: visible; display: -webkit-box; -webkit-line-clamp: 2; /* max 2 lines, still truncate if very long */ -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } .surgery-card-yob { font-size: 0.68rem; color: var(--text-muted); flex-shrink: 0; } /* Detail section (hidden in compact) */ .surgery-card-detail { max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.25s ease; padding: 0 10px; } .surgery-card.surgery-expanded .surgery-card-detail { max-height: 300px; padding: 0 10px 10px; border-top: 1px solid var(--border); } .surgery-card-type-tag { display: inline-block; font-size: 0.62rem; padding: 2px 7px; border-radius: 10px; color: white; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin: 8px 0 6px; } .surgery-type-badge { font-size: 0.62rem; padding: 2px 7px; border-radius: 10px; color: white; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .surgery-card-patient { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .surgery-card-patient strong { font-size: 0.8rem; color: var(--text-primary); } .surgery-card-diagnosis { font-size: 0.72rem; color: var(--primary-dark); font-weight: 500; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .surgery-card-method { font-size: 0.7rem; color: var(--text-muted); font-style: italic; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .surgery-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px solid var(--border); } .surgery-card-surgeons { font-size: 0.7rem; color: var(--text-secondary); font-weight: 500; } .surgery-card-duration { font-size: 0.68rem; color: var(--text-muted); } .surgery-empty { text-align: center; color: var(--text-muted); font-size: 0.78rem; padding: 20px 0; opacity: 0.5; } .surgery-add-btn { margin-top: auto; padding: 6px; border: 1px dashed var(--border); border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 0.75rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; font-family: inherit; } .surgery-add-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(8,145,178,0.04); } /* Detail modal */ .surgery-detail { display: flex; flex-direction: column; gap: 12px; } .surgery-detail-row { display: flex; gap: 12px; align-items: baseline; } .surgery-detail-label { flex: 0 0 140px; font-size: 0.82rem; color: var(--text-muted); font-weight: 500; } .surgery-detail-value { font-size: 0.88rem; color: var(--text-primary); } /* Summary panel */ .surgery-summary-panel { margin-bottom: 16px; padding: 10px 20px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; } .surgery-summary-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin: 0; } .surgery-summary-chips { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; } .surgery-summary-chip { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; } .surgery-summary-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .surgery-summary-label { color: var(--text-secondary); } .surgery-summary-count { font-weight: 700; color: var(--text-primary); font-size: 0.85rem; } .surgery-summary-total { padding-left: 14px; border-left: 2px solid var(--border); } /* Responsive: on small screens, narrow the day columns slightly */ @media (max-width: 1200px) { .surgery-day { width: 185px; } .surgery-summary-panel { flex-direction: column; gap: 10px; align-items: flex-start; } } @media (max-width: 768px) { .surgery-day { width: 170px; } .surgery-sticky-header { margin: 0 -16px; padding-left: 16px; padding-right: 16px; } .surgery-scroll-zone { margin: 0 -16px; padding: 0 16px 12px; } .surgery-summary-chips { flex-wrap: wrap; } /* A C4+M5: touch targets — WCAG 2.5.5 min 44×44px */ .btn-card-action, .btn-card-action-danger { min-height: 44px; font-size: 0.75rem; /* A: 0.6667rem (10px) → 0.75rem */ padding: 8px 12px; } .surgery-add-btn { min-height: 44px; /* A: ~30px → 44px */ padding: 10px 8px; } } /* ===== U5: Extracted inline styles — surgery.js ===== */ .surg-header-actions { display: flex; gap: 8px; } /* Locked warning banner */ .surg-locked-banner { background: rgba(254,243,199,0.9); border: 1px solid var(--warning); border-radius: 8px; padding: 10px 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-size: var(--text-sm, 0.8667rem); color: #92400e; } [data-theme="dark"] .surg-locked-banner { background: rgba(120,53,15,0.2); color: var(--warning); } /* Card action buttons row */ .surg-card-actions { margin-top: 6px; display: flex; gap: 4px; } .surg-card-actions-single { margin-top: 6px; } /* Duration text under type tag */ .surg-card-duration { font-size: var(--text-xxs, 0.6667rem); color: var(--text-secondary); margin-bottom: 4px; } /* Inline btn variants (small, padding override) */ .btn-card-action { font-size: var(--text-xxs, 0.6667rem); padding: 2px 8px; } .btn-card-action-danger { font-size: var(--text-xxs, 0.6667rem); padding: 2px 8px; color: var(--danger); } /* Required star */ .form-required { color: var(--danger); } /* First-case label disabled */ .first-case-label-disabled { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--bg-secondary); cursor: not-allowed; opacity: 0.7; } /* First-case label active */ .first-case-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--bg-secondary); cursor: pointer; } .first-case-label span { font-size: var(--text-sm, 0.8667rem); } /* First-case warning */ .first-case-warning { font-size: var(--text-xs, 0.7333rem); color: var(--warning); margin-top: 4px; } /* Export date picker section */ .export-date-section { padding: 8px 0; } .export-date-section .form-input { font-size: 16px; padding: 10px; } /* ===== SURGERY STATISTICS ===== */ .sstats-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 12px; } .sstats-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 8px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; } .sstats-nav .btn-icon { padding: 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-primary); cursor: pointer; color: var(--text-secondary); transition: background 0.2s, color 0.2s, border-color 0.2s; display: flex; align-items: center; justify-content: center; } .sstats-nav .btn-icon:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .sstats-nav-label { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); min-width: 200px; text-align: center; } .sstats-period-tabs { display: flex; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; } .sstats-period-btn { padding: 8px 20px; border: none; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; font-family: inherit; } .sstats-period-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); } .sstats-period-btn.active { background: var(--primary); color: white; font-weight: 600; box-shadow: 0 2px 6px rgba(8,145,178,0.25); } /* Summary cards */ .sstats-summary-cards { display: flex; gap: 8px; margin-bottom: 24px; align-items: stretch; } .sstats-summary-card { flex: 1; min-width: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius); padding: 12px 8px; text-align: center; } .sstats-summary-card.sstats-total { background: linear-gradient(135deg, var(--primary), #0e7490); border-color: transparent; color: white; flex: 1.15; } .sstats-summary-divider { width: 2px; background: var(--border); border-radius: 2px; align-self: stretch; margin: 4px 4px; } .sstats-summary-value { font-size: 1.35rem; font-weight: 800; line-height: 1.2; } .sstats-total .sstats-summary-value { color: white; } .sstats-summary-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; color: var(--text-muted); } .sstats-total .sstats-summary-label { color: rgba(255,255,255,0.8); } /* ===== Main Summary Table ===== */ .sstats-main-table-card { overflow: hidden; } .sstats-main-table-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); } .sstats-main-table-header h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); } .sstats-main-table-hint { font-size: 0.75rem; color: var(--text-muted); font-style: italic; } /* Table */ .sstats-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .sstats-table thead { background: rgba(0,0,0,0.02); } .sstats-table th { padding: 10px 14px; text-align: left; font-weight: 600; color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 2px solid var(--border); white-space: nowrap; } .sstats-th-stt { width: 50px; text-align: center; } .sstats-th-name { min-width: 200px; } .sstats-th-num { text-align: center !important; width: 90px; } .sstats-th-total { background: rgba(8,145,178,0.06); } .sstats-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); } /* Summary row hover & active */ .sstats-summary-row { transition: background 0.15s ease; } .sstats-summary-row:hover { background: rgba(8,145,178,0.04); } .sstats-summary-row.sstats-row-active { background: rgba(8,145,178,0.08); border-left: 3px solid var(--primary); } .sstats-summary-row.sstats-row-active td:first-child { padding-left: 11px; } .sstats-td-stt { text-align: center; color: var(--text-muted); font-weight: 600; } .sstats-td-name { display: flex; align-items: center; gap: 10px; } .sstats-doc-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; } .sstats-doc-name { font-weight: 600; font-size: 0.88rem; color: var(--text-primary); } .sstats-doc-role { font-size: 0.7rem; color: var(--text-muted); margin-top: 1px; } .sstats-expand-icon { margin-left: auto; color: var(--text-muted); transition: transform 0.25s ease; flex-shrink: 0; } .sstats-expand-icon.expanded { transform: rotate(180deg); color: var(--primary); } .sstats-td-num { text-align: center; font-weight: 600; font-size: 0.9rem; } .sstats-td-num.zero { opacity: 0.3; } .sstats-td-total { background: rgba(8,145,178,0.04); color: var(--primary-dark); font-weight: 800; } /* Footer */ .sstats-footer-row { background: rgba(0,0,0,0.03); } .sstats-footer-row td { border-bottom: none; padding: 14px; } .sstats-td-footer-label { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); text-align: right !important; padding-right: 20px !important; } /* ===== Expanded Detail Panel ===== */ .sstats-detail-row td { padding: 0 !important; border-bottom: 2px solid var(--primary) !important; } .sstats-detail-panel { background: linear-gradient(to bottom, rgba(8,145,178,0.03), var(--bg-secondary)); border-top: 1px solid rgba(8,145,178,0.15); padding: 16px 20px 20px; } .sstats-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .sstats-detail-title { font-size: 0.88rem; color: var(--primary-dark); } .sstats-detail-chips { display: flex; gap: 6px; flex-wrap: wrap; } .sstats-type-chip { padding: 3px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; } /* Detail patient table */ .sstats-detail-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; background: var(--bg-secondary); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } .sstats-detail-table thead { background: rgba(0,0,0,0.03); } .sstats-detail-table th { padding: 8px 10px; text-align: left; font-weight: 600; color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--border); white-space: nowrap; } .sstats-detail-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-primary); } .sstats-detail-table tbody tr:hover { background: rgba(8,145,178,0.04); } .sstats-detail-table tbody tr:last-child td { border-bottom: none; } /* Responsive */ @media (max-width: 1024px) { .sstats-main-table-card { overflow-x: auto; } .sstats-summary-cards { flex-wrap: wrap; } .sstats-summary-card { flex: 1 1 calc(33% - 8px); } } @media (max-width: 768px) { .sstats-summary-card { flex: 1 1 calc(50% - 6px); } .sstats-detail-panel { padding: 12px; } } /* U5: Header button group */ .sstats-header-actions { display: flex; gap: 8px; } /* U5: Empty state */ .sstats-empty-state-card { text-align: center; padding: 40px; color: var(--text-muted); } .sstats-empty-icon { font-size: 2rem; margin-bottom: 12px; } /* U5: Summary row cursor */ .sstats-summary-row { cursor: pointer; } /* U5: Detail table th widths */ .sstats-detail-th-stt { width: 40px; text-align: center; } .sstats-detail-th-name { min-width: 140px; } .sstats-detail-th-diagnosis { min-width: 160px; } .sstats-detail-th-method { min-width: 180px; } /* U5: Detail table td styles */ .sstats-detail-td-stt { text-align: center; color: var(--text-muted); font-weight: 600; } .sstats-detail-td-text { font-size: 0.78rem; color: var(--text-secondary); } /* U5: Footer total cells */ .sstats-td-num-bold { font-weight: 700; } .sstats-td-total-grand { font-weight: 800; font-size: 1rem; } /* U5: Clickable detail rows */ .sstats-detail-tr-clickable { cursor: pointer; } .sstats-detail-tr-clickable:hover { background: rgba(8,145,178,0.04); } /* U5: Summary row cursor (supplement to existing transition rule) */ .sstats-summary-row { cursor: pointer; } /* ===== ROOM MAP ===== */ .rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .room-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; } .room-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); } .room-card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: linear-gradient(135deg, var(--primary), #0e7490); color: white; } .room-number { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.5px; } .room-patient-count { font-size: 0.72rem; font-weight: 600; background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 10px; } .room-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .room-doctor { display: flex; align-items: center; gap: 10px; } .room-doc-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; } .room-doc-info { display: flex; flex-direction: column; } .room-doc-name { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); line-height: 1.3; } .room-doc-role { font-size: 0.68rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; display: inline-block; margin-top: 2px; width: fit-content; } .room-role-bs { background: rgba(8,145,178,0.1); color: var(--primary); } .room-role-nt { background: rgba(245,158,11,0.1); color: #f59e0b; } .room-role-ch { background: rgba(139,92,246,0.1); color: #8b5cf6; } /* Legend */ .rooms-legend { padding: 14px 20px; } .rooms-legend-items { display: flex; gap: 24px; flex-wrap: wrap; } .rooms-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); } .room-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .room-legend-dot.room-role-bs { background: var(--primary); } .room-legend-dot.room-role-nt { background: #f59e0b; } .room-legend-dot.room-role-ch { background: #8b5cf6; } /* Responsive */ @media (max-width: 768px) { .rooms-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } @media (max-width: 480px) { .rooms-grid { grid-template-columns: 1fr; } } /* ===== RESEARCH / SHCM STYLES ===== */ /* Stats */ .rsch-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .rsch-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform 0.15s; } .rsch-stat-card:hover { transform: translateY(-2px); } .rsch-stat-val { font-size: 1.8rem; font-weight: 800; color: var(--text); } .rsch-stat-lbl { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; } .rsch-done .rsch-stat-val { color: #16a34a; } .rsch-pending .rsch-stat-val { color: #ea580c; } .rsch-reg .rsch-stat-val { color: #7c3aed; } /* Settings */ .rsch-settings-card { padding: 12px 20px !important; margin-bottom: 16px; } .rsch-settings-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rsch-settings-label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; } .rsch-settings-unit { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; } .rsch-time-input { width: 110px !important; } .rsch-dur-input { width: 72px !important; text-align: center; } /* Table */ .rsch-table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, #eff6ff, #f0fdf4); } [data-theme="dark"] .rsch-table-header { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(34,197,94,0.08)); } .rsch-table-header h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text); } .rsch-table-wrap { overflow-x: auto; } .rsch-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .rsch-table thead th { background: var(--bg-secondary); padding: 10px 12px; text-align: left; font-weight: 700; font-size: 0.78rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 1; } .rsch-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; } .rsch-table tbody tr:hover { background: var(--bg-hover); } .rsch-table td { padding: 10px 12px; vertical-align: middle; } .rsch-stt { text-align: center; font-weight: 700; color: var(--text-muted); } .rsch-doctor { font-weight: 600; color: var(--text); white-space: nowrap; } .rsch-title { color: var(--text-secondary); line-height: 1.4; } .rsch-date { text-align: center; font-weight: 600; color: var(--text); font-size: 0.88rem; } .rsch-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; } .rsch-actions { display: flex; gap: 2px; } .rsch-actions .btn-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 0.8rem; cursor: pointer; background: none; border: none; transition: background 0.15s; } .rsch-actions .btn-icon:hover { background: var(--bg-hover); } /* Row status highlight */ .rsch-row-done td:first-child { border-left: 3px solid #16a34a; } .rsch-row-pending td:first-child { border-left: 3px solid #ea580c; } .rsch-row-registered td:first-child { border-left: 3px solid #7c3aed; } /* Files section */ .rsch-files-card { margin-top: 16px; } .rsch-files-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .rsch-files-header h3 { margin: 0; font-size: 0.95rem; font-weight: 700; } .rsch-files-note { font-size: 0.8rem; color: var(--text-muted); text-align: right; } .rsch-files-list { display: flex; flex-direction: column; gap: 8px; } .rsch-file-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; transition: border-color 0.15s, box-shadow 0.15s; } .rsch-file-item:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1); } .rsch-file-icon { font-size: 1.5rem; flex-shrink: 0; } .rsch-file-info { flex: 1; min-width: 0; } .rsch-file-name { font-weight: 600; font-size: 0.85rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rsch-file-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; } .rsch-file-actions { display: flex; gap: 6px; flex-shrink: 0; } /* Responsive */ @media (max-width: 768px) { .rsch-stats { grid-template-columns: repeat(2, 1fr); } .rsch-settings-row { flex-direction: column; align-items: flex-start; } .rsch-table { font-size: 0.78rem; } .rsch-table td, .rsch-table th { padding: 8px 6px; } .rsch-file-name { max-width: 180px; } } /* ── Refactored from inline styles (Phase U5) ── */ /* rsch-header-actions: page header button group */ .rsch-header-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* rsch-table-card: card with no padding and overflow hidden */ .rsch-table-card { padding: 0; overflow: hidden; } /* rsch-th-stt / rsch-th-doctor / rsch-th-status / rsch-th-date / rsch-th-actions: table header widths */ .rsch-th-stt { width: 44px; } .rsch-th-doctor { min-width: 160px; } .rsch-th-status { width: 110px; } .rsch-th-date { width: 100px; } .rsch-th-actions { width: 70px; } /* rsch-loading-placeholder: "loading" text in files list */ .rsch-loading-placeholder { text-align: center; padding: 20px; color: var(--text-muted); } /* rsch-empty-files: empty files state */ .rsch-empty-files { text-align: center; padding: 30px; color: var(--text-muted); } /* rsch-error-files: error state */ .rsch-error-files { text-align: center; padding: 20px; color: var(--danger); } /* form-textarea--medium: medium height textarea */ .form-textarea--medium { min-height: 60px; } /* shcm-date-input-row: date input flex container */ .shcm-date-input-row { display: flex; gap: 6px; align-items: center; } /* shcm-date-display: flexible text date input */ .shcm-date-display { flex: 1; } /* shcm-date-picker: compact calendar picker */ .shcm-date-picker { width: 40px; padding: 6px 4px; opacity: 0.6; cursor: pointer; } /* shcm-date-conflict-warn: conflict warning box (hidden by default, shown via JS) */ .shcm-date-conflict-warn { display: none; margin-top: 6px; padding: 8px 12px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; color: #c2410c; font-size: 13px; } /* ===== DARK MODE OVERRIDES ===== */ /* Stat value numbers — tăng tương phản */ [data-theme="dark"] .rsch-done .rsch-stat-val { color: #34d399; } [data-theme="dark"] .rsch-pending .rsch-stat-val { color: #fb923c; } [data-theme="dark"] .rsch-reg .rsch-stat-val { color: #a78bfa; } /* Conflict warning — dark amber */ [data-theme="dark"] .shcm-date-conflict-warn { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.3); color: #fbbf24; } /* ===== CONFERENCES PAGE — Báo cáo khoa học Khoa PTĐTT ===== */ /* ── Summary stats row ── */ .cp-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; } .cp-stat-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius); padding: 18px 20px; text-align: center; transition: transform 0.15s ease, box-shadow 0.15s ease; } .cp-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .cp-stat-card.cp-stat-highlight { background: linear-gradient(135deg, rgba(8,145,178,0.08), rgba(8,145,178,0.03)); border-color: rgba(8,145,178,0.3); } .cp-stat-card.cp-stat-upcoming { background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.02)); border-color: rgba(245,158,11,0.3); } .cp-stat-big { display: block; font-size: 2.2rem; font-weight: 800; color: var(--primary); line-height: 1.1; margin-bottom: 4px; } .cp-stat-highlight .cp-stat-big { color: var(--primary); } .cp-stat-upcoming .cp-stat-big { color: #d97706; } .cp-stat-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; } /* ── Year filter tabs (reuse conf-time-tab) ── */ .conf-time-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .conf-time-tab { padding: 6px 18px; border-radius: 20px; font-size: 0.82rem; font-weight: 600; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; font-family: inherit; } .conf-time-tab:hover { border-color: var(--primary); color: var(--primary); } .conf-time-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(8,145,178,0.25); } /* ── Cards container ── */ .cp-cards { display: flex; flex-direction: column; gap: 20px; } /* ── Conference card ── */ .cp-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius); padding: 22px 24px; position: relative; overflow: hidden; transition: box-shadow 0.2s ease; } .cp-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 5px 0 0 5px; background: linear-gradient(180deg, var(--primary), #0e7490); } .cp-card:hover { box-shadow: var(--shadow-md); } .cp-card.cp-card-past { opacity: 0.7; } .cp-card.cp-card-past::before { background: linear-gradient(180deg, #94a3b8, #cbd5e1); } .cp-card.cp-card-soon::before { background: linear-gradient(180deg, #f59e0b, #d97706); } .cp-card.cp-card-now::before { background: linear-gradient(180deg, #10b981, #059669); } /* Card header */ .cp-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; } .cp-conf-name { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; } .cp-conf-name-vi { font-size: 0.78rem; color: var(--text-muted); font-style: italic; margin-top: 3px; line-height: 1.4; } .cp-countdown { font-size: 0.8rem; font-weight: 700; white-space: nowrap; padding: 4px 12px; border-radius: 20px; flex-shrink: 0; } .cp-cd-past { background: #f1f5f9; color: #94a3b8; } .cp-cd-upcoming { background: rgba(8,145,178,0.08); color: var(--primary); } .cp-cd-soon { background: #fef3c7; color: #d97706; } .cp-cd-now { background: #ecfdf5; color: #059669; animation: pulse-badge 2s infinite; } @keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:0.7} } /* Info chips */ .cp-card-info { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .cp-info-chip { font-size: 0.78rem; color: var(--text-secondary); background: var(--bg-tertiary); border: 1px solid var(--border-light); padding: 3px 10px; border-radius: 20px; } /* Stat pills */ .cp-stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .cp-stat-pill { display: flex; align-items: baseline; gap: 4px; padding: 5px 14px; border-radius: 10px; font-size: 0.8rem; } .cp-stat-pres { background: rgba(8,145,178,0.08); border: 1px solid rgba(8,145,178,0.2); } .cp-stat-person { background: rgba(124,58,237,0.07); border: 1px solid rgba(124,58,237,0.2); } .cp-stat-lang { background: rgba(37,99,235,0.07); border: 1px solid rgba(37,99,235,0.2); } .cp-stat-lang-vi { background: rgba(5,150,105,0.07); border: 1px solid rgba(5,150,105,0.2); } .cp-stat-num { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); line-height: 1; } .cp-stat-pres .cp-stat-num { color: var(--primary); } .cp-stat-person .cp-stat-num { color: #7c3aed; } .cp-stat-lang .cp-stat-num { color: #2563eb; } .cp-stat-lang-vi .cp-stat-num { color: #059669; } .cp-stat-unit { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; } /* Presenter chips */ .cp-presenter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .cp-presenter-chip { font-size: 0.75rem; font-weight: 600; background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary); padding: 3px 10px; border-radius: 20px; } /* Presentations list (inline) */ .cp-pres-list { border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; margin-bottom: 14px; } .cp-day-block { border-bottom: 1px solid var(--border-light); } .cp-day-block:last-child { border-bottom: none; } .cp-day-label { background: var(--bg-tertiary); padding: 6px 14px; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--border-light); } .cp-pres-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; font-size: 0.8rem; border-bottom: 1px solid var(--border-light); transition: background 0.1s; } .cp-pres-row:last-child { border-bottom: none; } .cp-pres-row:hover { background: var(--bg-tertiary); } .cp-pres-time { font-size: 0.72rem; font-weight: 700; color: var(--primary); white-space: nowrap; flex-shrink: 0; min-width: 90px; } .cp-pres-lang { font-size: 0.62rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.3px; } .cp-lang-en { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; } .cp-lang-vi { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; } .cp-pres-title { flex: 1; font-size: 0.8rem; color: var(--text-primary); line-height: 1.4; } .cp-pres-who { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; } .cp-pres-session { font-size: 0.7rem; color: var(--text-muted); font-style: italic; white-space: nowrap; flex-shrink: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .cp-pres-actions { display: flex; gap: 2px; margin-left: 8px; flex-shrink: 0; opacity: 0.6; transition: opacity 0.15s ease; } .cp-pres-row:hover .cp-pres-actions { opacity: 1; } .btn-icon-sm { background: transparent; border: none; cursor: pointer; font-size: 0.75rem; padding: 2px 4px; border-radius: 4px; transition: background 0.15s ease; } .btn-icon-sm:hover { background: rgba(0,0,0,0.06); } [data-theme="dark"] .btn-icon-sm:hover { background: rgba(255,255,255,0.1); } .cp-pres-empty { padding: 14px 18px; text-align: center; color: var(--text-muted); font-size: 0.83rem; font-style: italic; background: var(--bg-tertiary); border-radius: 8px; } /* Card footer */ .cp-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--border-light); } .cp-link { font-size: 0.78rem; color: var(--primary); text-decoration: none; font-weight: 500; } .cp-link:hover { text-decoration: underline; } /* Empty state */ .conf-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); } .conf-empty-icon { font-size: 3rem; margin-bottom: 12px; } .conf-empty-text { font-size: 1rem; font-weight: 500; } /* ── Presenter chips — leadership variant ── */ .cp-presenter-chip.cp-presenter-leader { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #f59e0b; color: #78350f; font-weight: 700; } .cp-chip-badge { font-size: 0.62rem; font-weight: 700; color: #92400e; background: rgba(255,255,255,0.7); padding: 1px 5px; border-radius: 6px; margin-left: 2px; } /* ── Presenter modal list ── */ .cp-pm-list { display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow-y: auto; padding-right: 2px; } .cp-pm-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border: 1px solid var(--border-light); border-radius: var(--border-radius); background: var(--bg-secondary); transition: background 0.12s; } .cp-pm-row:hover { background: var(--bg-tertiary); } .cp-pm-row.cp-pm-leader { background: linear-gradient(135deg, rgba(254,243,199,0.5), rgba(253,230,138,0.15)); border-color: rgba(245,158,11,0.3); } .cp-pm-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #0e7490); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; flex-shrink: 0; } .cp-pm-leader .cp-pm-avatar { background: linear-gradient(135deg, #f59e0b, #d97706); } .cp-pm-info { flex: 1; min-width: 0; } .cp-pm-name { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .cp-pm-badge { font-size: 0.65rem; font-weight: 700; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px; } .cp-pm-stats { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; } .cp-pm-sessions { display: flex; flex-direction: column; gap: 4px; } .cp-pm-session { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; flex-wrap: wrap; } /* Responsive */ @media (max-width: 900px) { .cp-stats-row { grid-template-columns: repeat(2, 1fr); } .cp-pres-who { display: none; } } @media (max-width: 768px) { /* Card hội nghị: padding thu gọn */ .cp-card { padding: 14px 12px; } .cp-card-head { flex-direction: column; gap: 10px; } /* Danh sách báo cáo — wrap xuống dòng trên mobile */ .cp-pres-row { flex-wrap: wrap; /* time+lang dòng 1, title dòng 2, presenter dòng 3 */ gap: 2px 8px; padding: 10px 12px; align-items: flex-start; } .cp-pres-time { min-width: 80px; font-size: 0.75rem; flex-shrink: 0; } .cp-pres-lang { flex-shrink: 0; margin-top: 1px; } .cp-pres-title { flex-basis: 100%; /* xuống dòng riêng, full width */ font-size: 0.82rem; line-height: 1.5; margin-top: 2px; } /* Tên báo cáo viên: hiện ở dòng riêng bên dưới tiêu đề */ .cp-pres-who { display: block; /* hiện lại (thay vì display:none) */ flex-basis: 100%; white-space: normal; /* cho phép wrap */ font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; padding-left: 2px; } .cp-pres-session { display: none; } /* vẫn ẩn session label */ /* Stats bar hội nghị */ .cp-stats-row { grid-template-columns: repeat(2, 1fr); } /* Stat pills */ .cp-stat-pill { padding: 8px 10px; } .cp-stat-num { font-size: 1.3rem; } /* Header hội nghị (year tabs + title) */ .cp-year-tabs { flex-wrap: wrap; gap: 6px; } .cp-year-tab { padding: 6px 12px; font-size: 0.78rem; } } @media (max-width: 600px) { .cp-stats-row { grid-template-columns: repeat(2, 1fr); } .cp-card { padding: 12px 10px; } .cp-card-head { flex-direction: column; } .cp-pres-time { min-width: 72px; font-size: 0.72rem; } } /* ── Refactored from inline styles (Phase U5) ── */ /* cp-lang-count: language count badges in presenter modal stats */ .cp-lang-count { font-size: 0.65rem; padding: 1px 6px; border-radius: 6px; } /* cp-pm-subtitle: modal presenter count subtitle */ .cp-pm-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 14px; } /* cp-stat-person-btn: clickable presenter stat pill */ .cp-stat-person-btn { cursor: pointer; transition: opacity 0.15s, transform 0.1s; } .cp-stat-person-btn:hover { opacity: 0.8; transform: translateY(-1px); } /* cp-footer-left / cp-footer-actions: card footer flex groups */ .cp-footer-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cp-footer-actions { display: flex; gap: 6px; } /* conf-time-tabs--spaced: year tabs with bottom margin */ .conf-time-tabs--spaced { margin-bottom: 20px; } /* form-textarea--short: short textarea (note field) */ .form-textarea--short { min-height: 50px; } /* ===== DARK MODE OVERRIDES ===== */ /* Countdown badges */ [data-theme="dark"] .cp-cd-past { background: rgba(148,163,184,0.15); color: var(--text-muted); } [data-theme="dark"] .cp-cd-soon { background: rgba(251,191,36,0.15); color: #fbbf24; } [data-theme="dark"] .cp-cd-now { background: rgba(52,211,153,0.15); color: #34d399; } /* Language chips — dark readable */ [data-theme="dark"] .cp-lang-en { background: rgba(96,165,250,0.15); color: #60a5fa; border-color: rgba(96,165,250,0.35); } [data-theme="dark"] .cp-lang-vi { background: rgba(52,211,153,0.15); color: #34d399; border-color: rgba(52,211,153,0.35); } /* Presenter leader chip — dark amber */ [data-theme="dark"] .cp-presenter-chip.cp-presenter-leader { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.4); color: #fbbf24; } [data-theme="dark"] .cp-chip-badge { color: #fbbf24; background: rgba(0,0,0,0.3); } /* Stat numbers */ [data-theme="dark"] .cp-stat-person .cp-stat-num { color: #a78bfa; } [data-theme="dark"] .cp-stat-lang .cp-stat-num { color: #60a5fa; } [data-theme="dark"] .cp-stat-lang-vi .cp-stat-num { color: #34d399; } [data-theme="dark"] .cp-stat-upcoming .cp-stat-big { color: #fbbf24; } /* ===== NOTIFICATION BELL ===== */ .notif-bell-btn { position: relative; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--text-secondary); transition: background 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center; } .notif-bell-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); } .notif-bell-btn.has-notif { animation: bellShake 0.5s ease-in-out; } @keyframes bellShake { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(12deg); } 30% { transform: rotate(-10deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } } .notif-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; box-shadow: 0 0 0 2px var(--bg-primary); animation: badgePop 0.3s ease; } @keyframes badgePop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } } /* ===== NOTIFICATION PANEL ===== */ .notif-panel { position: fixed; top: 12px; right: 12px; width: 380px; max-height: 500px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08); z-index: 10000; overflow: hidden; opacity: 0; transform: translateY(-8px) scale(0.97); transition: opacity 0.2s ease, transform 0.2s ease; } .notif-panel.show { opacity: 1; transform: translateY(0) scale(1); } .notif-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); } .notif-panel-title { font-weight: 700; font-size: 0.92rem; color: var(--text-primary); } .notif-mark-all { background: none; border: none; color: var(--accent); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.15s; } .notif-mark-all:hover { background: var(--bg-tertiary); } .notif-panel-body { max-height: 400px; overflow-y: auto; } /* ===== NOTIFICATION ITEMS ===== */ .notif-item { display: flex; gap: 10px; padding: 12px 16px; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid var(--border); position: relative; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--bg-tertiary); } .notif-item.unread { background: rgba(59, 130, 246, 0.06); } .notif-item.unread:hover { background: rgba(59, 130, 246, 0.1); } .notif-item-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; } .notif-item-content { flex: 1; min-width: 0; } .notif-item-msg { font-size: 0.84rem; color: var(--text-primary); font-weight: 500; line-height: 1.4; margin-bottom: 3px; } .notif-item.unread .notif-item-msg { font-weight: 600; } .notif-item-cat { display: inline-block; font-size: 0.72rem; color: var(--text-muted); background: var(--bg-tertiary); padding: 1px 6px; border-radius: 4px; margin-bottom: 3px; } .notif-item-time { font-size: 0.72rem; color: var(--text-muted); } .notif-item-dot { width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; flex-shrink: 0; margin-top: 6px; } /* ===== CLICKABLE TASK CARDS ===== */ .task-card-clickable { cursor: pointer; transition: box-shadow 0.2s, transform 0.15s; } .task-card-clickable:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-1px); } .notif-delete-read { background: rgba(239,68,68,0.1) !important; color: #ef4444 !important; } .notif-delete-read:hover { background: rgba(239,68,68,0.2) !important; } .notif-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 0.85rem; } /* ===== ACCEPT MODAL ===== */ .notif-accept-modal { padding: 4px 0; } .notif-accept-header { display: flex; gap: 8px; margin-bottom: 12px; } .notif-accept-badge { font-size: 0.78rem; padding: 3px 8px; background: var(--bg-tertiary); border-radius: 6px; color: var(--text-secondary); } .notif-accept-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 8px 0; } .notif-accept-desc { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 12px 0; line-height: 1.5; } .notif-accept-meta { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--bg-secondary); border-radius: 8px; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 16px; } .notif-accept-meta strong { color: var(--text-primary); } /* ===== MOBILE RESPONSIVE ===== */ @media (max-width: 768px) { .notif-panel { top: 52px; right: 8px; left: 8px; width: auto; max-height: calc(100vh - 70px); } } /* ===== SIDEBAR BELL ===== */ .sidebar-bell-area { display: flex; align-items: center; padding: 6px 12px; margin-bottom: 4px; } .sidebar-bell-area .notif-bell-btn { margin-right: 6px; } .sidebar-bell-area .notif-bell-label { font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; } /* ===== CHARTS ===== */ .trend-chart-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 24px; margin-top: 20px; } .trend-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .trend-chart-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); } .trend-chart-subtitle { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; } .trend-chart-container { position: relative; width: 100%; height: 220px; } .trend-chart-container canvas { width: 100% !important; height: 100% !important; } .trend-chart-legend { display: flex; justify-content: center; gap: 18px; margin-top: 14px; flex-wrap: wrap; } .trend-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; } .trend-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .trend-chart-tooltip { position: absolute; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 0.78rem; box-shadow: 0 8px 24px rgba(0,0,0,0.12); pointer-events: none; z-index: 20; opacity: 0; transition: opacity 0.15s ease; min-width: 120px; } .trend-chart-tooltip.visible { opacity: 1; } .trend-tooltip-title { font-weight: 700; color: var(--text-primary); margin-bottom: 6px; } .trend-tooltip-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; } .trend-tooltip-label { display: flex; align-items: center; gap: 5px; } /* Export button styles */ .export-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 0.82rem; font-weight: 600; border: 1px solid var(--border); border-radius: var(--border-radius-sm); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); font-family: inherit; } .export-btn:hover { background: var(--primary); color: white; border-color: var(--primary); } .export-btn svg { width: 16px; height: 16px; } /* Responsive */ @media (max-width: 768px) { .trend-chart-container { height: 180px; } .trend-chart-card { padding: 16px; } .trend-chart-legend { gap: 10px; } } /* ===== ONBOARDING TOUR ===== */ .onboarding-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; pointer-events: none; } .onboarding-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.6); pointer-events: auto; z-index: 10001; } .onboarding-spotlight { position: fixed; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(15,23,42,0.6); z-index: 10002; transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease; pointer-events: none; } .onboarding-tooltip { position: fixed; width: 340px; max-width: 90vw; background: var(--bg-secondary); border-radius: 14px; padding: 20px; z-index: 10003; box-shadow: 0 15px 40px rgba(0,0,0,0.2); pointer-events: auto; animation: onb-fade 0.3s ease; } @keyframes onb-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .onb-step-icon { font-size: 1.6rem; margin-bottom: 8px; } .onb-step-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; } .onb-step-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; } .onb-step-counter { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 12px; font-weight: 600; } .onb-progress { display: flex; gap: 4px; margin-bottom: 14px; } .onb-progress-dot { width: 24px; height: 4px; border-radius: 2px; background: var(--border); transition: background 0.2s; } .onb-progress-dot.active { background: var(--primary); } .onb-progress-dot.done { background: #10b981; } .onb-actions { display: flex; justify-content: space-between; align-items: center; } .onb-btn { padding: 8px 16px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; cursor: pointer; border: none; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; } .onb-btn-skip { background: transparent; color: var(--text-muted); } .onb-btn-skip:hover { color: var(--text-primary); } .onb-btn-next { background: var(--primary); color: white; } .onb-btn-next:hover { filter: brightness(1.1); } .onb-btn-prev { background: var(--bg-tertiary); color: var(--text-secondary); margin-right: 8px; } .onb-btn-prev:hover { background: var(--border); } @media (max-width: 768px) { .onboarding-tooltip { width: 280px; padding: 16px; } } /* ===== Reports Page ===== */ /* ── Layout / Header row ── */ .rpt-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .rpt-date-controls { display: flex; gap: 8px; align-items: center; } .rpt-label-date { font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); } .rpt-export-btns { display: flex; gap: 8px; } /* ── History section ── */ .rpt-history-section { margin-top: 20px; } .rpt-history-heading { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; } /* ── Weekend notice ── */ .rpt-weekend-icon { font-size: 2.5rem; margin-bottom: 12px; } /* ── Empty state card ── */ .rpt-empty-card { text-align: center; padding: 40px; } .rpt-empty-icon { font-size: 2.5rem; margin-bottom: 12px; } .rpt-empty-hint-top { margin-top: 14px; } /* ── Report card shell ── */ .rpt-report-card { padding: 0; overflow: hidden; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.12); } .rpt-card-inner-header { display: flex; justify-content: space-between; align-items: flex-start; } /* ── Stat grid (5 cols) ── */ .rpt-stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } /* ── Stat grid (2 cols) — for 7h card ── */ .rpt-stat-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } /* ── Stat label inside colored boxes ── */ .rpt-stat-label { font-size: 0.72rem; /* A: 0.62rem (9.3px) → 0.72rem WCAG 1.4.4 */ text-transform: uppercase; letter-spacing: 0.8px; /* giảm từ 1px — dễ đọc hơn ở size nhỏ */ color: rgba(255,255,255,0.95); /* A: 0.8 → 0.95 — tăng contrast trên nền màu */ font-weight: 600; margin-bottom: 4px; min-height: 24px; display: flex; align-items: center; justify-content: center; } /* ── History table rows ── */ .rpt-tr-clickable { cursor: pointer; } .rpt-td-date-muted { font-size: 0.75rem; color: var(--text-muted); } .rpt-td-center-bold { text-align: center; font-weight: 600; } .rpt-td-center { text-align: center; } .rpt-td-secondary { font-size: 0.82rem; color: var(--text-secondary); } /* ── Archive section ── */ .rpt-archive-section { margin-top: 10px; } .rpt-archive-btn { font-size: 0.78rem; } /* ── Form: reporter section ── */ .rpt-reporter-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; } /* ── Form: summary cell (stepper container) ── */ .rpt-summary-cell { text-align: center; } .rpt-summary-label { font-size: 0.68rem; font-weight: 700; margin-bottom: 3px; white-space: nowrap; } .rpt-summary-value-row { display: flex; align-items: center; gap: 3px; justify-content: center; } /* ── Form layouts ── */ .rpt-form-2col { display: flex; gap: 8px; margin-bottom: 8px; } .rpt-form-half { flex: 1; } .rpt-form-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; } .rpt-form-4col-surgery { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; } /* Mobile: giảm xuống 2 cột cho màn hình nhỏ */ @media (max-width: 768px) { .rpt-stat-grid { grid-template-columns: repeat(2, 1fr); } /* A: 5 cột → 2 cột mobile */ .rpt-stat-grid-2 { grid-template-columns: 1fr; } /* A: 2 cột → 1 cột mobile */ .rpt-form-4col-surgery, .rpt-form-4col-surgery-mb { grid-template-columns: 1fr 1fr; } /* A: 4 cột → 2 cột mobile */ } /* ── Form: notes & details ── */ .rpt-notes-section { margin-bottom: 6px; } .rpt-notes-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; } .rpt-details-toggle { cursor: pointer; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); padding: 3px 0; } /* ── Reporter label (7h form, slightly larger) ── */ .rpt-reporter-label-lg { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; } /* ── Guide button (header) ── */ .rpt-guide-btn { background: #0284c7; color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; box-shadow: 0 2px 8px rgba(2,132,199,0.3); transition: background-color .2s ease, box-shadow .2s ease; } .rpt-guide-btn:hover { background: #0369a1; } /* ── Export orange btn (inside export area) ── */ .rpt-export-orange { background: #f97316; color: #fff; border: none; font-size: 0.78rem; } /* ── Edit button inside dark card header ── */ .rpt-edit-btn { background: rgba(255,255,255,0.12); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.25); font-size: 0.72rem; cursor: pointer; } /* ── Date input inside controls ── */ .rpt-date-input { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.85rem; font-family: 'Inter', system-ui, sans-serif; background: var(--bg-card); color: var(--text-primary); } /* ── Empty text (history) ── */ .rpt-empty-text { color: var(--text-muted); font-size: 0.82rem; } /* ── Guide modal content ── */ .rpt-guide-content { max-width: 100%; font-family: 'Inter', sans-serif; color: #1e293b; line-height: 1.65; font-size: 0.92rem; } /* ── Stats tab nav controls ── */ .rpt-stats-nav { display: flex; align-items: center; gap: 6px; } .rpt-stats-range-label { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); min-width: 180px; text-align: center; } /* ── 4-col surgery grid for form ── */ .rpt-form-4col-surgery-mb { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; margin-bottom: 8px; } /* ── Detail expand fields (hidden/shown by JS) ── */ .rpt-detail-field { margin-bottom: 6px; } /* ── Card header: dark gradient (16h report) ── */ .rpt-card-header { background: linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#334155 100%); padding: 18px 22px; color: #fff; position: relative; } .rpt-card-header-inner { display: flex; justify-content: space-between; align-items: flex-start; } .rpt-card-dept { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2.5px; color: #94a3b8; margin-bottom: 6px; font-weight: 500; } .rpt-card-title { font-size: 1.25rem; font-weight: 800; margin: 0; letter-spacing: 0.5px; color: #fff; } .rpt-card-date { font-size: 0.9rem; margin-top: 5px; color: #e2e8f0; font-weight: 500; } /* ── Card 7h header: blue gradient ── */ .rpt-card-header-7h { background: linear-gradient(135deg,#0c4a6e 0%,#075985 50%,#0369a1 100%); padding: 18px 22px; color: #fff; position: relative; } .rpt-card-dept-7h { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2.5px; color: #7dd3fc; margin-bottom: 6px; font-weight: 500; } .rpt-card-date-7h { font-size: 0.9rem; margin-top: 5px; color: #bae6fd; font-weight: 500; } /* ── Stat box body padding ── */ .rpt-stat-body { padding: 16px 22px; background: #fff; } [data-theme="dark"] .rpt-stat-body { background: var(--bg-secondary); } .rpt-stat-detail-body { padding: 0 22px 16px; background: #fff; } [data-theme="dark"] .rpt-stat-detail-body { background: var(--bg-secondary); } /* ── Stat colored boxes (5-col grid items) ── */ .rpt-box-stat { border-radius: 10px; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; } .rpt-box-blue { background: #0284c7; } .rpt-box-red { background: #e11d48; } .rpt-box-green { background: #059669; } .rpt-box-amber { background: #d97706; } .rpt-box-purple{ background: #7c3aed; } .rpt-stat-value-big { font-size: 2rem; font-weight: 800; color: #fff; } /* ── Left-border notification blocks (card detail) ── */ .rpt-block { border-radius: 0 8px 8px 0; padding: 10px 14px; margin-bottom: 10px; } .rpt-block-blue { background: #eff6ff; border-left: 4px solid #3b82f6; } .rpt-block-green { background: #f0fdf4; border-left: 4px solid #22c55e; } .rpt-block-slate { background: #f8fafc; border-left: 4px solid #94a3b8; } .rpt-block-red { background: #fef2f2; border-left: 4px solid #ef4444; } .rpt-block-indigo { background: #eff6ff; border-left: 4px solid #3b82f6; } .rpt-block-purple { background: #faf5ff; border-left: 4px solid #7c3aed; } .rpt-block-label { font-weight: 700; font-size: 0.82rem; margin-bottom: 3px; } /* ── Card footer ── */ .rpt-card-footer { padding: 10px 22px; background: #f1f5f9; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #475569; } .rpt-card-footer-7h { padding: 10px 22px; background: #f0f9ff; border-top: 1px solid #bae6fd; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #0369a1; } /* ── Form 7h: total patient row ── */ .rpt-form-total-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(135deg,#0c4a6e,#0369a1); border-radius: 10px; margin-bottom: 10px; } /* ── Weekend card weekend-specific text ── */ .rpt-weekend-title { font-size: 1rem; font-weight: 700; color: #92400e; margin-bottom: 6px; } .rpt-weekend-sub { font-size: 0.85rem; color: #a16207; } .report-stat-card { background: var(--bg-secondary); border-left: 3px solid var(--primary); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .report-stat-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; } .report-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); } .report-row-active { background: var(--bg-secondary) !important; border-left: 3px solid var(--primary); } /* Report form enhancements */ .report-stat-card:nth-child(3) { border-left-color: #22c55e; } .report-stat-card:nth-child(4) { border-left-color: #f59e0b; } /* ===== Chips Grid — Desktop: 3 cols, Mobile: 2 cols ===== */ .report-chips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .report-chip { white-space: nowrap; } @media (max-width: 768px) { .report-stat-card { padding: 8px 10px; } .report-stat-value { font-size: 1.2rem; } /* Chips → 2 columns on mobile */ .report-chips-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; } .report-chip { white-space: normal !important; word-break: keep-all; padding: 8px 4px !important; font-size: 0.78rem !important; line-height: 1.3; } } /* ===== DARK MODE OVERRIDES ===== */ [data-theme="dark"] .rpt-block-blue { background: rgba(59,130,246,0.12); } [data-theme="dark"] .rpt-block-green { background: rgba(34,197,94,0.12); } [data-theme="dark"] .rpt-block-slate { background: rgba(148,163,184,0.08); } [data-theme="dark"] .rpt-block-red { background: rgba(239,68,68,0.12); } [data-theme="dark"] .rpt-block-indigo { background: rgba(99,102,241,0.12); } [data-theme="dark"] .rpt-block-purple { background: rgba(124,58,237,0.12); } [data-theme="dark"] .rpt-card-footer { background: var(--bg-tertiary); border-top-color: var(--border); color: var(--text-secondary); } [data-theme="dark"] .rpt-card-footer-7h { background: rgba(8,145,178,0.12); border-top-color: rgba(8,145,178,0.3); color: var(--primary-light); } /* Weekend card text — warm amber readable trên dark */ [data-theme="dark"] .rpt-weekend-title { color: #fbbf24; } [data-theme="dark"] .rpt-weekend-sub { color: #f59e0b; } /* Stat numbers — tăng tương phản trên dark */ [data-theme="dark"] .cp-stat-person .cp-stat-num { color: #a78bfa; } [data-theme="dark"] .cp-stat-lang .cp-stat-num { color: #60a5fa; } [data-theme="dark"] .cp-stat-lang-vi .cp-stat-num { color: #34d399; } /* ===== REPORT BODY UTILITY CLASSES (thay inline styles) ===== */ /* Wrapper div chứa stat grid và detail sections */ .rpt-body-padding { padding: 16px 22px; background: var(--bg-primary); } .rpt-detail-padding { padding: 0 22px 16px; background: var(--bg-primary); } /* Info blocks (thay background:#eff6ff, #f0fdf4, #fef2f2, #faf5ff inline) */ .rpt-info-blue { background: #eff6ff; border-left: 4px solid #3b82f6; padding: 10px 14px; border-radius: 0 8px 8px 0; margin-bottom: 10px; } .rpt-info-green { background: #f0fdf4; border-left: 4px solid #22c55e; padding: 10px 14px; border-radius: 0 8px 8px 0; margin-bottom: 10px; } .rpt-info-red { background: #fef2f2; border-left: 4px solid #ef4444; padding: 10px 14px; border-radius: 0 8px 8px 0; margin-bottom: 10px; } .rpt-info-purple { background: #faf5ff; border-left: 4px solid #7c3aed; padding: 10px 14px; border-radius: 0 8px 8px 0; margin-bottom: 10px; } [data-theme="dark"] .rpt-info-blue { background: rgba(59,130,246,0.12); } [data-theme="dark"] .rpt-info-green { background: rgba(34,197,94,0.12); } [data-theme="dark"] .rpt-info-red { background: rgba(239,68,68,0.12); } [data-theme="dark"] .rpt-info-purple { background: rgba(124,58,237,0.12); } .rpt-info-title-blue { font-weight: 700; color: #1d4ed8; font-size: 0.82rem; margin-bottom: 3px; } .rpt-info-title-green { font-weight: 700; color: #15803d; font-size: 0.82rem; margin-bottom: 3px; } .rpt-info-title-red { font-weight: 700; color: #dc2626; font-size: 0.82rem; margin-bottom: 3px; } .rpt-info-title-purple { font-weight: 700; color: #7c3aed; font-size: 0.82rem; margin-bottom: 3px; } [data-theme="dark"] .rpt-info-title-blue { color: #60a5fa; } [data-theme="dark"] .rpt-info-title-green { color: #34d399; } [data-theme="dark"] .rpt-info-title-red { color: #f87171; } [data-theme="dark"] .rpt-info-title-purple { color: #a78bfa; } .rpt-info-val-blue { font-size: 0.95rem; color: #1e3a8a; font-weight: 600; } .rpt-info-val-green { font-size: 0.95rem; color: #166534; font-weight: 600; } [data-theme="dark"] .rpt-info-val-blue { color: #93c5fd; } [data-theme="dark"] .rpt-info-val-green { color: #6ee7b7; } /* Form steppers (thay background:#ecfdf5, #fef2f2, #faf5ff, #eff6ff) */ .rpt-stepper-green { background: #ecfdf5; border-radius: 8px; padding: 7px 4px; } .rpt-stepper-red { background: #fef2f2; border-radius: 8px; padding: 7px 4px; } .rpt-stepper-purple { background: #faf5ff; border-radius: 8px; padding: 7px 4px; } .rpt-stepper-blue { background: #eff6ff; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; } .rpt-stepper-green2 { background: #f0fdf4; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; } [data-theme="dark"] .rpt-stepper-green { background: rgba(52,211,153,0.1); } [data-theme="dark"] .rpt-stepper-red { background: rgba(239,68,68,0.1); } [data-theme="dark"] .rpt-stepper-purple { background: rgba(124,58,237,0.1); } [data-theme="dark"] .rpt-stepper-blue { background: rgba(59,130,246,0.1); } [data-theme="dark"] .rpt-stepper-green2 { background: rgba(34,197,94,0.1); } /* Guide/help boxes (thay background:#ecfdf5 border:#a7f3d0 color:#065f46) */ .rpt-guide-box-green { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 6px; padding: 8px 12px; font-size: 0.85rem; color: #065f46; margin: 6px 0; } .rpt-guide-box-blue { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 8px 12px; font-size: 0.85rem; color: #1e40af; margin: 6px 0; } .rpt-guide-box-white { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin: 6px 0; } [data-theme="dark"] .rpt-guide-box-green { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.25); color: #34d399; } [data-theme="dark"] .rpt-guide-box-blue { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); color: #60a5fa; } /* Reporter chips */ .r16h-chip-unselected { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border); } .r7h-chip-unselected { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border); } /* Input inside colored form sections */ .rpt-input-amber { width: 52px; text-align: center; font-size: 1.3rem; font-weight: 800; border: 2px solid rgba(245,158,11,0.27); border-radius: 8px; padding: 3px; color: var(--warning); background: var(--bg-primary); } /* ===== MOBILE HEADER — Hidden on desktop ===== */ .mobile-header { display: none; } /* ===== MOBILE RESPONSIVE — max-width: 768px ===== */ @media (max-width: 768px) { /* ---- Mobile Header Bar ---- */ .mobile-header { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; height: 52px; padding: 0 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); z-index: 1001; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .mobile-header-left { display: flex; align-items: center; gap: 8px; color: var(--primary); min-width: 0; } .mobile-header-logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } .mobile-header-title { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* Theme toggle button trong mobile header */ .mobile-theme-toggle { width: 36px; height: 36px; min-width: 44px; /* A M1: WCAG 2.5.5 — cả 2 chiều ≥ 44px */ min-height: 44px; /* WCAG 2.5.5 touch target */ display: flex; align-items: center; justify-content: center; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 50%; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); flex-shrink: 0; padding: 0; } .mobile-theme-toggle:hover { background: var(--bg-hover); color: var(--primary); } .mobile-user-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.72rem; /* fix: 0.65rem → 0.72rem WCAG 1.4.4 */ font-weight: 700; flex-shrink: 0; } /* Hide full name on mobile to save space */ .mobile-user-name { display: none !important; } .mobile-logout-btn { background: none; border: 1px solid rgba(239,68,68,0.3); color: #ef4444; padding: 6px 12px; min-height: 44px; /* A3: WCAG 2.5.5 touch target */ border-radius: 6px; font-size: 0.72rem; /* fix: 0.68rem → 0.72rem WCAG 1.4.4 */ font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 3px; transition: background 0.2s, color 0.2s; } .mobile-logout-btn:hover, .mobile-logout-btn:active { background: rgba(239,68,68,0.1); } /* ---- Body & App Layout ---- */ body { overflow: auto; height: auto; } #app { flex-direction: column; height: auto; min-height: 100vh; } /* ---- Sidebar → Bottom Nav ---- */ .sidebar { position: fixed; bottom: 0; left: 0; top: auto; width: 100% !important; height: auto; flex-direction: row; border-right: none; border-top: 1px solid var(--border); z-index: 1000; background: var(--bg-secondary); box-shadow: 0 -2px 12px rgba(0,0,0,0.08); } .sidebar-logo { display: none; } .sidebar-footer { display: none; } .sidebar-nav { flex-direction: row; padding: 0; gap: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; justify-content: flex-start; } .sidebar-nav::-webkit-scrollbar { display: none; } .nav-item { flex-direction: column; gap: 2px; padding: 7px 4px 5px; /* U4 fix: 0.6rem (9px) → 0.72rem (10.8px) — WCAG 1.4.4 min font-size */ font-size: 0.72rem; min-width: 56px; min-height: 44px; /* A3: WCAG 2.5.5 touch target */ text-align: center; justify-content: center; align-items: center; border-radius: 0; flex-shrink: 0; } .nav-item::before { display: none; } .nav-item svg { width: 18px; height: 18px; } .nav-item span { display: block !important; /* U0 A2: 0.58rem = 8.1px — tăng lên 0.73rem ≈ 10.9px ≥ WCAG min */ font-size: 0.73rem; white-space: nowrap; max-width: 54px; overflow: hidden; text-overflow: ellipsis; } .nav-item.active { background: rgba(8,145,178,0.1); border-top: 2px solid var(--primary); } /* ---- Main Content ---- */ .main-content { margin-left: 0 !important; padding: 62px 12px 72px; /* top: header, bottom: nav bar */ height: auto; min-height: 100vh; } /* ---- Page Headers ---- */ .page-header { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 14px; } .page-title { font-size: 1.2rem; } .page-subtitle { font-size: 0.78rem; } /* ---- Dashboard Stats ---- */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; } .stat-card { padding: 12px; } .stat-card::after { width: 50px; height: 50px; } .stat-value { font-size: 1.4rem; } .stat-label { font-size: 0.72rem; } /* fix: 0.68rem → 0.72rem */ .stat-icon { width: 30px; height: 30px; } .stat-icon svg { width: 14px; height: 14px; } .dashboard-grid { grid-template-columns: 1fr !important; gap: 12px; } .chart-container { height: 200px; } .chart-card, .widget-card { padding: 14px; } /* ---- Cards ---- */ .card { padding: 12px; } /* ---- Tables ---- */ .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } thead th { padding: 8px 8px; font-size: 0.72rem; white-space: nowrap; } /* fix: 0.68rem → 0.72rem */ tbody td { padding: 8px; font-size: 0.78rem; } /* ---- Search Box ---- */ .search-box { width: 100%; } /* ---- Form ---- */ .form-row { grid-template-columns: 1fr !important; gap: 8px !important; } .form-input, .form-select, .form-textarea { font-size: 16px; } /* prevents iOS zoom */ .form-group { margin-bottom: 10px; } .form-label { font-size: 0.72rem; margin-bottom: 4px; } /* U0 A1: Xóa override btn-icon 32px — giữ 44x44px từ base.css (WCAG 2.5.5) */ .btn { padding: 8px 12px; font-size: 0.78rem; } .btn-sm { padding: 5px 10px; font-size: 0.72rem; } /* ===== CALENDAR / PLANS ===== */ .calendar-controls { flex-direction: column; align-items: stretch; gap: 8px; } .calendar-nav { justify-content: space-between; gap: 6px; } .calendar-month-label { font-size: 0.82rem; min-width: auto; } .calendar-view-modes { align-self: center; } .view-mode-btn { padding: 6px 12px; font-size: 0.75rem; } /* Month grid — tighter on mobile */ .calendar-grid { border-radius: 8px; } .calendar-day-header { padding: 6px 2px; /* U4 fix: 0.62rem (9.3px) → 0.72rem (10.8px) — WCAG 1.4.4 */ font-size: 0.72rem; } .calendar-day { min-height: 72px; padding: 4px 3px; } .day-number { font-size: 0.72rem; margin-bottom: 2px; } .calendar-day.today .day-number { width: 22px; height: 22px; font-size: 0.72rem; /* fix: 0.68rem → 0.72rem */ } .calendar-event { /* U0 A2: 0.58rem = 8.1px — tăng lên 0.72rem */ font-size: 0.72rem; padding: 2px 3px; margin-bottom: 1px; border-radius: 3px; line-height: 1.3; } .calendar-event.multi-day { margin-left: -3px; margin-right: -3px; padding-left: 5px; } .calendar-event.multi-start { margin-left: 0; } .calendar-event.multi-end { margin-right: 0; } /* Week / 3‑day column view */ .calendar-columns { border-radius: 8px; } .cal-col-header { padding: 8px 4px; } /* U0 A2: các giá trị dưới 0.73rem — tăng lên tối thiểu 0.72rem */ .cal-col-day { font-size: 0.72rem; } .cal-col-date { font-size: 0.78rem; } .cal-col-date.today-num { width: 24px; height: 24px; } .cal-time-slot { font-size: 0.72rem; padding: 2px 4px; } /* 0.6rem → 0.72rem */ .cal-event { font-size: 0.72rem; padding: 2px 4px; } /* 0.62rem → 0.72rem */ .cal-event-time { font-size: 0.72rem; } /* 0.55rem → 0.72rem */ .cal-event-title { font-size: 0.72rem; } /* 0.62rem → 0.72rem */ .cal-event-allday { font-size: 0.72rem; padding: 2px 4px; } /* 0.62rem → 0.72rem */ /* ===== SURGERY SCHEDULE ===== */ .surgery-controls { flex-direction: column; gap: 8px; align-items: stretch; } .surgery-controls .page-header { flex-direction: row; flex-wrap: wrap; } .surgery-stats { flex-wrap: wrap; gap: 6px; } .surgery-stat-chip { font-size: 0.72rem; padding: 4px 10px; } .surgery-week-grid { grid-template-columns: 1fr !important; gap: 8px; } .surgery-day { min-height: auto; } .surgery-day-header { padding: 8px 10px; } .surgery-summary-panel { flex-direction: column; padding: 8px 12px; gap: 6px; align-items: flex-start; } .surgery-summary-chips { gap: 8px; } .surgery-summary-chip { font-size: 0.72rem; } .surgery-summary-total { padding-left: 0; border-left: none; } .surgery-detail-label { flex: 0 0 100px; font-size: 0.78rem; } .surgery-detail-value { font-size: 0.82rem; } /* ===== STAFF ===== */ .staff-grid { grid-template-columns: 1fr !important; } .staff-subtabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .staff-subtab { padding: 8px 14px; font-size: 0.78rem; white-space: nowrap; } .staff-filters { flex-wrap: wrap; gap: 6px; } .filter-btn { padding: 6px 12px; font-size: 0.75rem; } .staff-name-cell { gap: 8px; } .staff-fullname { white-space: normal; word-break: break-word; } /* Staff table: bọc overflow để tên không bị squeeze dọc */ .staff-table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } .staff-table-card table { min-width: 540px; /* đủ chỗ 6 cột, scroll ngang khi cần */ } /* Ẩn cột Email trên mobile để table gọn hơn */ .staff-table-card th:nth-child(5), .staff-table-card td:nth-child(5) { display: none; } /* ===== RESEARCH / SHCM ===== */ .rsch-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; } .rsch-stat-card { padding: 12px; } .rsch-stat-val { font-size: 1.4rem; } .rsch-stat-lbl { font-size: 0.72rem; } /* fix: 0.7rem → 0.72rem */ .rsch-settings-card { padding: 10px 12px !important; } .rsch-settings-row { flex-direction: column; align-items: stretch; gap: 8px; } .rsch-time-input, .rsch-dur-input { width: 100% !important; } .rsch-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .rsch-table { min-width: 600px; font-size: 0.75rem; } .rsch-table td, .rsch-table th { padding: 6px 4px; } .rsch-file-name { max-width: 160px; } .rsch-file-item { padding: 8px 10px; gap: 8px; } .rsch-files-header { flex-direction: column; align-items: stretch; gap: 8px; } /* ===== SCHEDULE (Phân công tuần) ===== */ .schedule-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .schedule-table { min-width: 700px; } /* ===== PATIENT ===== */ .patient-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; } .patient-room-filters { flex-wrap: wrap; gap: 5px; } .patient-room-filters .btn { font-size: 0.72rem; padding: 4px 8px; } /* fix: 0.7rem → 0.72rem */ /* ===== ROOMS ===== */ .room-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; } /* ===== TASKS ===== */ .kanban-board { grid-template-columns: 1fr !important; } /* ===== MODAL — Bottom Sheet style ===== */ .modal-overlay { align-items: flex-end !important; } .modal, .modal-content { width: 100% !important; max-width: none !important; margin: 0; border-radius: 16px 16px 0 0; max-height: 90dvh; /* A M4: dvh (dynamic viewport height) — trừ bàn phím ảo Android */ display: flex; flex-direction: column; animation: slideUpModal 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .modal-header { padding: 14px 16px; position: sticky; top: 0; background: var(--bg-secondary); z-index: 2; border-radius: 16px 16px 0 0; } .modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px; } .modal-footer { position: sticky; bottom: 0; background: var(--bg-secondary); z-index: 2; padding: 10px 14px; border-top: 1px solid var(--border); box-shadow: 0 -2px 8px rgba(0,0,0,0.05); gap: 8px; } .modal-footer .btn { flex: 1; justify-content: center; } .modal-title { font-size: 1rem; } @keyframes slideUpModal { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ===== LOGIN ===== */ .login-card { width: 95% !important; max-width: none !important; padding: 24px 20px; } /* ===== SURGERY STATS ===== */ .surgery-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .surgery-stats-charts { grid-template-columns: 1fr !important; } /* ===== REPORTS ===== */ .report-stat-card { padding: 8px 10px; } .report-stat-value { font-size: 1.15rem; } /* ===== HIDE NON-ESSENTIAL ===== */ .stat-change { display: none; } /* ===== SCROLL FADE — bottom nav ===== */ .sidebar::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 24px; background: linear-gradient(to right, transparent, var(--bg-secondary)); pointer-events: none; z-index: 1; } } /* ===== SMALL PHONES — max-width: 480px ===== */ @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr !important; } .patient-stats { grid-template-columns: 1fr !important; } .room-grid { grid-template-columns: 1fr !important; } .surgery-stats-grid { grid-template-columns: 1fr !important; } .rsch-stats { grid-template-columns: 1fr !important; } .main-content { padding: 60px 8px 68px; } .nav-item { min-width: 48px; padding: 6px 3px 4px; } .nav-item svg { width: 16px; height: 16px; } /* U0 A2: 0.52rem = 7.3px — tăng lên 0.72rem (min WCAG) */ .nav-item span { font-size: 0.72rem; max-width: 46px; } .page-title { font-size: 1.05rem; } .page-subtitle { font-size: 0.72rem; } /* Calendar even tighter */ .calendar-day { min-height: 60px; padding: 2px; } /* U0 A2: 0.52rem → 0.72rem */ .calendar-event { font-size: 0.72rem; padding: 1px 2px; } .day-number { font-size: 0.72rem; } /* fix: 0.65rem → 0.72rem */ } /* ===== iOS ZOOM PREVENTION — schedule-select ===== */ /* A C1: font-size < 16px trên input/select gây iOS Safari tự zoom viewport */ @media (max-width: 768px) { .schedule-select { font-size: 16px !important; } /* iOS chống zoom khi focus */ } /* ===== SAFE AREA INSETS — iPhone notch + home bar ===== */ /* A M2-safe: viewport-fit=cover + env() cho iPhone X trở lên */ @supports (padding-bottom: env(safe-area-inset-bottom)) { @media (max-width: 768px) { /* Bottom nav: đẩy lên trên home bar */ .sidebar { padding-bottom: env(safe-area-inset-bottom); } /* Main content: đảm bảo không bị che bởi bottom nav + home bar */ .main-content { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } /* Modal footer: không bị chạm home bar */ .modal-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); } } @media (max-width: 480px) { .main-content { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } } }