/* IntlERP — base styles & component helpers */ *, *::before, *::after { box-sizing: border-box } html { scroll-behavior: smooth } /* Font scale — apply on via shared/font-scale.js. Tailwind dùng rem nên đổi root font-size sẽ scale toàn app đồng bộ. */ html.font-scale-sm { font-size: 14px; } html.font-scale-md { font-size: 16px; } /* default browser */ html.font-scale-lg { font-size: 17px; } html.font-scale-xl { font-size: 18px; } /* ═══════════════════════════════════════════════════════ Typography hierarchy — Phase 1 Tokens + classes. Không đổi font-family (Inter từ index.html). ═══════════════════════════════════════════════════════ */ :root { --type-page-size: 1.5rem; --type-page-weight: 700; --type-page-lh: 1.25; --type-page-tracking: -0.015em; --type-page-color: #111827; --type-section-size: 1.0625rem; --type-section-weight: 600; --type-section-lh: 1.35; --type-section-color: #1f2937; --type-metric-size: 1.125rem; --type-metric-weight: 700; --type-metric-lh: 1.2; --type-metric-color: #111827; --type-body-size: 0.8125rem; --type-body-weight: 400; --type-body-lh: 1.45; --type-body-color: #374151; --type-label-size: 0.6875rem; --type-label-weight: 600; --type-label-tracking: 0.04em; --type-label-color: #4b5563; --type-meta-size: 0.75rem; --type-meta-weight: 400; --type-meta-lh: 1.4; --type-meta-color: #6b7280; /* Density — Phase 3 (spacing/radius only, không đổi typography) */ --density-radius-sm: 4px; --density-radius-md: 6px; --density-radius-lg: 8px; --density-space-xs: 4px; --density-space-sm: 8px; --density-space-md: 12px; --density-space-lg: 16px; --density-table-cell-y: 4px; --density-table-cell-x: 8px; --density-input-h: 32px; --density-border: #e8e8e6; --density-border-subtle: #efefed; --density-row-hover: #f7f7f5; /* Motion — Phase 4 (hover/focus/active/transition only) */ --motion-duration: 120ms; --motion-duration-slow: 160ms; --motion-ease: ease; --motion-transition: background-color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease), opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease); } /* Page title — H1 */ .type-page-title, .page-title { font-size: var(--type-page-size); font-weight: var(--type-page-weight); line-height: var(--type-page-lh); letter-spacing: var(--type-page-tracking); color: var(--type-page-color); margin: 0; } .page-title.text-red-700, .type-page-title.text-red-700 { color: #b91c1c; } /* Section title — H2/H3 khu vực */ .type-section-title { font-size: var(--type-section-size); font-weight: var(--type-section-weight); line-height: var(--type-section-lh); color: var(--type-section-color); margin: 0 0 0.5rem; } /* Metric / money / KPI */ .type-metric, .type-num { font-size: var(--type-metric-size); font-weight: var(--type-metric-weight); line-height: var(--type-metric-lh); color: var(--type-metric-color); font-variant-numeric: tabular-nums; } .type-metric.text-red-600 { color: #dc2626; } .type-metric-sm { font-size: 1rem; font-weight: var(--type-metric-weight); line-height: var(--type-metric-lh); color: var(--type-metric-color); font-variant-numeric: tabular-nums; } /* Body */ .type-body { font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-lh); color: var(--type-body-color); } /* Field label — nhẹ hơn value */ .type-label { display: block; font-size: var(--type-label-size); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); color: var(--type-label-color); margin-bottom: 0.25rem; } /* Metadata / helper */ .type-meta { font-size: var(--type-meta-size); font-weight: var(--type-meta-weight); line-height: var(--type-meta-lh); color: var(--type-meta-color); } .tabular-nums { font-variant-numeric: tabular-nums; } /* Ad-hoc Tailwind section headings → unified hierarchy */ #page-content h2.text-lg.font-semibold, #page-content h3.text-lg.font-semibold, #page-content h3.text-base.font-semibold.text-gray-800, #page-content h3.font-semibold.text-sm.text-gray-700, #page-content h3.font-semibold.text-gray-800, #page-content h4.text-sm.font-semibold.text-gray-700 { font-size: var(--type-section-size); font-weight: var(--type-section-weight); line-height: var(--type-section-lh); color: var(--type-section-color); } /* Dashboard / report KPI values (Tailwind ad-hoc) */ #page-content .text-lg.font-semibold.text-red-600, #page-content td.text-right.font-semibold, #page-content td.text-right.font-medium { font-variant-numeric: tabular-nums; } /* Dashboard KPI card (accounting overview) */ .dash-kpi-label { font-size: var(--type-label-size); font-weight: 500; letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--type-meta-color); } .dash-kpi-value { font-size: var(--type-metric-size); font-weight: var(--type-metric-weight); line-height: var(--type-metric-lh); color: var(--type-metric-color); font-variant-numeric: tabular-nums; } .dash-kpi-value-sm { font-size: 1.05rem; font-weight: var(--type-metric-weight); line-height: var(--type-metric-lh); color: var(--type-metric-color); font-variant-numeric: tabular-nums; } /* Scrollbar */ ::-webkit-scrollbar { width: 4px; height: 4px } ::-webkit-scrollbar-thumb { background: #7DD3D9; border-radius: 99px } /* ═══ Tabler Icons — Phase 2 icon system ═══ */ .icon { display: inline-block; flex-shrink: 0; vertical-align: middle; stroke: currentColor; } .icon-inline { vertical-align: -0.2em; } .icon-sidebar { width: 20px; height: 20px; stroke-width: 1.75; } .icon-action { width: 18px; height: 18px; stroke-width: 2; } .icon-table { width: 16px; height: 16px; stroke-width: 2; } .icon-btn { width: 18px; height: 18px; stroke-width: 2; } .icon-status { width: 48px; height: 48px; stroke-width: 1.5; } .icon-spin { animation: spin 0.8s linear infinite; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-icon-table { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 6px; } /* ═══ Motion — Phase 4 ═══ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .animate-fadein { animation: fadeIn var(--motion-duration) var(--motion-ease); } .animate-spin { animation: spin 0.8s linear infinite; } .motion-transition { transition: var(--motion-transition); } /* Toast stack */ #toast-container { display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast-item { pointer-events: auto; font-size: 0.8125rem; padding: 8px 14px; border-radius: var(--density-radius-md); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); animation: toast-in var(--motion-duration) var(--motion-ease); } .toast-item.toast-exit { animation: toast-out var(--motion-duration) var(--motion-ease) forwards; } /* Skeleton loading */ .skeleton-block { display: flex; flex-direction: column; gap: 8px; } .skeleton-line { height: 14px; border-radius: var(--density-radius-sm); background: linear-gradient(90deg, #ececea 0%, #f5f5f4 45%, #ececea 90%); background-size: 200% 100%; animation: skeleton-shimmer 1.15s var(--motion-ease) infinite; } .skeleton-line--short { width: 55%; } .skeleton-line--table { height: 12px; margin: 4px 0; } .skeleton-card { min-height: 72px; border-radius: var(--density-radius-md); background: linear-gradient(90deg, #ececea 0%, #f5f5f4 45%, #ececea 90%); background-size: 200% 100%; animation: skeleton-shimmer 1.15s var(--motion-ease) infinite; } tr.skeleton-row td { padding: 6px 8px !important; border-top-color: transparent !important; } /* Button loading state */ .btn-primary.is-loading, .btn-ghost.is-loading, .btn-action.is-loading { opacity: 0.82; pointer-events: none; position: relative; } .btn-primary.is-loading::after, .btn-ghost.is-loading::after, .btn-action.is-loading::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.65s linear infinite; vertical-align: -2px; } /* Table helpers */ .tbl { width: 100%; border-collapse: collapse; font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--type-body-color); font-variant-numeric: tabular-nums; } .tbl th { text-align: left; padding: var(--density-table-cell-y) var(--density-table-cell-x); background: #F4F2EC; font-weight: 600; font-size: var(--type-meta-size); color: var(--type-label-color); white-space: nowrap; border-bottom: 1px solid var(--density-border); } .tbl td { padding: var(--density-table-cell-y) var(--density-table-cell-x); border-top: 1px solid var(--density-border-subtle); vertical-align: top; } #page-content table.w-full { font-size: var(--type-body-size); font-variant-numeric: tabular-nums; } #page-content table.w-full th, #page-content table.w-full td { padding: var(--density-table-cell-y) var(--density-table-cell-x); } #page-content table.w-full thead th { background: #F4F2EC; border-bottom: 1px solid var(--density-border); } #page-content table.w-full tbody td { border-top: 1px solid var(--density-border-subtle); } .tbl tbody tr, #page-content table.w-full tbody tr { transition: var(--motion-transition); } .tbl tr:hover td, #page-content table.w-full tbody tr:hover td { background: var(--density-row-hover); } .tbl tbody tr[data-clickable]:hover td, .tbl tbody tr.clickable:hover td, #page-content table.w-full tbody tr[data-clickable]:hover td { background: var(--density-row-hover); } /* Status badge helpers (dùng chung cho mọi module) */ .badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:9999px; font-size:0.75rem; font-weight:500; white-space:nowrap } .badge-gray { background:#f3f4f6; color:#374151 } .badge-blue { background:#eff6ff; color:#1d4ed8 } .badge-green { background:#f0fdf4; color:#15803d } .badge-yellow { background:#fefce8; color:#a16207 } .badge-red { background:#fef2f2; color:#b91c1c } .badge-teal { background:#E6F4F5; color:#155E64 } /* Kanban card */ .kanban-col { min-height:200px; flex:1; min-width:210px } .kanban-card { background: #fff; border: 1px solid var(--density-border); border-radius: var(--density-radius-md); padding: 8px; margin-bottom: 5px; cursor: pointer; transition: var(--motion-transition); } .kanban-card:hover { background: var(--density-row-hover); border-color: #d4d4d2; box-shadow: 0 1px 4px rgba(26, 122, 130, 0.1); } .kanban-card:active { transform: translateY(1px); } /* Side panel overlay */ .side-panel-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:40; animation:fadeIn 0.15s } .side-panel { position:fixed; top:0; right:0; width:100%; max-width:480px; height:100vh; background:#fff; z-index:50; overflow-y:auto; box-shadow:-4px 0 20px rgba(0,0,0,0.1); animation:fadeIn 0.15s } @media(max-width:600px) { .side-panel { max-width:100% } } /* Global confirm/input modal host must stay above all custom overlays */ #modal-overlay { z-index: 120 !important; transition: opacity var(--motion-duration) var(--motion-ease); } #modal-overlay:not(.hidden) { animation: fadeIn var(--motion-duration) var(--motion-ease); } #modal-box { position: relative; z-index: 121; animation: fadeIn var(--motion-duration) var(--motion-ease); } #modal-box button { transition: var(--motion-transition); } #modal-box button:active:not(:disabled) { transform: translateY(1px); } /* Page header */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--density-space-md); gap: var(--density-space-sm); } /* Primary button */ .btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: #1A7A82; color: #fff; border: none; border-radius: var(--density-radius-md); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: var(--motion-transition); } .btn-primary:hover { background: #155E64; } .btn-primary:active:not(:disabled):not(.is-loading) { transform: translateY(1px); } .btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: transparent; color: #374151; border: 1px solid var(--density-border); border-radius: var(--density-radius-md); font-size: 0.8125rem; cursor: pointer; transition: var(--motion-transition); } .btn-ghost:hover { background: #f3f4f6; border-color: #d4d4d2; } .btn-ghost:active:not(:disabled):not(.is-loading) { transform: translateY(1px); } /* Tap-friendly action buttons */ .btn-action { min-height: 30px; min-width: 72px; padding: 4px 10px; font-size: 0.8125rem; border-radius: var(--density-radius-md); font-weight: 500; cursor: pointer; border: 1px solid #e2e8f0; background: white; transition: var(--motion-transition); } .btn-action:hover { background: #f8fafc; border-color: #d4d4d2; } .btn-action:active:not(:disabled):not(.is-loading) { transform: translateY(1px); } .btn-action-yellow { border-color: #d97706; color: #92400e; background: #fffbeb; } .btn-action-green { border-color: #16a34a; color: #14532d; background: #f0fdf4; } .btn-action-red { border-color: #dc2626; color: #7f1d1d; background: #fef2f2; } .btn-action-blue { border-color: #2563eb; color: #1e3a8a; background: #eff6ff; } .btn-filter-tab { padding: 6px 14px; font-size: 0.8125rem; border-radius: 20px; border: 1px solid #e2e8f0; background: white; cursor: pointer; transition: var(--motion-transition); } .btn-filter-tab:active:not(.active) { transform: translateY(1px); } .btn-filter-tab.active { background: #1A7A82; color: white; border-color: #1A7A82; } /* Unified form modal style */ .form-modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0, 0, 0, 0.4); z-index: 50; } .form-modal { width: 100%; max-width: 680px; background: #fff; border-radius: var(--density-radius-lg); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); padding: var(--density-space-md); } .form-modal-title { font-size: var(--type-section-size); line-height: var(--type-section-lh); font-weight: var(--type-section-weight); color: var(--type-section-color); margin: 0 0 4px; letter-spacing: -0.01em; } .form-modal-subtitle { font-size: var(--type-meta-size); line-height: var(--type-meta-lh); color: var(--type-meta-color); margin-bottom: 10px; } .form-modal-grid { display: grid; grid-template-columns: 1fr; gap: var(--density-space-sm); } /* label: #4b5563 trên trắng = 6.77:1 (pass WCAG AA) */ .form-field-label { display: block; font-size: var(--type-label-size); font-weight: var(--type-label-weight); text-transform: uppercase; letter-spacing: var(--type-label-tracking); color: var(--type-label-color); margin-bottom: 4px; } .form-field-input, .form-field-select { width: 100%; border: 1px solid var(--density-border); border-radius: var(--density-radius-md); padding: 6px 9px; font-size: 14px; min-height: var(--density-input-h); background: #fff; } .form-field-input, .form-field-select { transition: var(--motion-transition); } .form-field-input:focus, .form-field-select:focus { outline: none; border-color: #1A7A82; box-shadow: 0 0 0 2px rgba(26, 122, 130, 0.22); } .form-field-input:focus-visible, .form-field-select:focus-visible { outline: 2px solid transparent; } #page-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), #page-content select, #page-content textarea, #modal-box input:not([type="checkbox"]):not([type="radio"]), #modal-box select, #modal-box textarea { transition: var(--motion-transition); } #page-content input:focus, #page-content select:focus, #page-content textarea:focus, #modal-box input:focus, #modal-box select:focus, #modal-box textarea:focus { outline: none; border-color: #1A7A82; box-shadow: 0 0 0 2px rgba(26, 122, 130, 0.2); } .form-modal-error { color: #dc2626; font-size: 12px; } .form-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; } /* Avoid iOS zoom on focus for touch devices only — desktop lets modules control font-size */ @media (hover: none) and (pointer: coarse) { #page-content input:not([type="checkbox"]):not([type="radio"]), #page-content select, #page-content textarea { font-size: 1rem; } } /* Sidebar collapsible groups */ .sidebar-group { margin-bottom: 6px; } .sidebar-group-header { width: 100%; display: flex; align-items: center; gap: 6px; padding: 6px 12px 3px; background: transparent; border: none; cursor: pointer; color: #7DD3D9; font-size: var(--type-label-size); font-weight: 700; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; transition: color 0.15s; } .sidebar-group-header:hover { color: #fff; } .sidebar-group-chevron { width: 14px; height: 14px; opacity: 0.75; transition: transform 0.2s; flex-shrink: 0; } .sidebar-group.collapsed .sidebar-group-chevron { transform: rotate(-90deg); } .sidebar-group-label { flex: 1; text-align: left; } .sidebar-group-count { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.65; } .sidebar-group-items { display: flex; flex-direction: column; gap: 1px; padding: 0 0 2px; overflow: hidden; transition: max-height 0.2s ease-out; max-height: 1000px; } .sidebar-group.collapsed .sidebar-group-items { max-height: 0; } /* ── Sidebar user footer ── */ .sidebar-user-footer { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.15); flex-shrink: 0; } .sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: #1A7A82; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .03em; } .sidebar-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .sidebar-user-name { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 10px; color: #7DD3D9; text-transform: lowercase; } .sidebar-signout { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.45); display: flex; align-items: center; padding: 4px; border-radius: 6px; transition: color .15s, background .15s; flex-shrink: 0; } .sidebar-signout:hover { color: #fff; background: rgba(255,255,255,.1); } .sidebar-signout .icon { width: 18px; height: 18px; } /* ── Mobile sidebar drawer ── */ /* Backdrop overlay khi sidebar mở trên mobile */ #sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 59; animation: fadeIn 0.18s ease; } @media (max-width: 768px) { /* Sidebar: drawer cố định, ẩn sang trái */ #sidebar { position: fixed !important; top: 0; left: 0; height: 100vh; width: 260px !important; z-index: 60; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } #sidebar.sidebar-open { transform: translateX(0); } /* Backdrop hiện khi sidebar mở */ #sidebar-backdrop.sidebar-open { display: block; } /* Nút đóng (X) bên trong sidebar — chỉ hiện mobile */ #btn-sidebar-close { display: flex; } /* Page content chiếm toàn bộ width */ #app-shell > aside + div { width: 100% !important; } } /* Nút X đóng sidebar bên trong — ẩn trên desktop */ #btn-sidebar-close { display: none; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; cursor: pointer; color: rgba(255,255,255,0.8); flex-shrink: 0; transition: background 0.15s, color 0.15s; } #btn-sidebar-close:hover { background: rgba(255,255,255,0.2); color: #fff; } #btn-sidebar-close .icon { width: 16px; height: 16px; } /* ── FAB hamburger — inject vào body bằng JS, luôn nổi trên mobile ── */ #mobile-menu-fab { display: none; /* ẩn trên desktop */ } @media (max-width: 768px) { #mobile-menu-fab { display: flex; align-items: center; justify-content: center; position: fixed; top: calc(env(safe-area-inset-top) + 10px); left: 14px; z-index: 61; /* trên cả sidebar để luôn nhìn thấy */ width: 44px; height: 44px; background: #1A7A82; color: #fff; border: none; border-radius: 12px; cursor: pointer; box-shadow: 0 2px 10px rgba(26,122,130,0.40); transition: background 0.15s, transform 0.15s; } #mobile-menu-fab:active { transform: translateY(1px); background: #155E64; } #mobile-menu-fab .icon { width: 24px; height: 24px; } /* Khi sidebar mở: FAB đổi thành X, vẫn hiện trên backdrop */ body.sidebar-is-open #mobile-menu-fab { z-index: 61; background: #155E64; } /* Topbar: spacer tránh content lấp sau FAB (không hiển thị tiêu đề) */ #topbar.topbar-desktop { display: block; height: calc(env(safe-area-inset-top) + 56px) !important; min-height: 56px; flex-shrink: 0; background: transparent; border: none; } } /* ── iPhone Notch / Dynamic Island Safe Area ── */ /* Sidebar drawer: nội dung không bị notch che */ @media (max-width: 768px) { #sidebar { padding-top: env(safe-area-inset-top); } /* Sidebar footer: tránh home indicator */ #sidebar > div:last-child { padding-bottom: max(env(safe-area-inset-bottom), 10px); } } /* Page content: padding bottom cho home indicator */ #page-content { padding-bottom: max(env(safe-area-inset-bottom), 16px); } /* Landscape iPhone: tránh bị che 2 bên */ @media (max-width: 768px) and (orientation: landscape) { #sidebar { padding-left: max(env(safe-area-inset-left), 12px); } #page-content { padding-right: env(safe-area-inset-right); } } /* === Watermark === */ #app-watermark { position: fixed; inset: 0; pointer-events: none; z-index: 9998; user-select: none; -webkit-user-select: none; background-repeat: repeat; background-size: 320px 160px; } /* === Copy protection === */ body.copy-protected *:not(input):not(textarea):not(select) { user-select: none !important; -webkit-user-select: none !important; } body.copy-protected input, body.copy-protected textarea, body.copy-protected select { user-select: text !important; -webkit-user-select: text !important; } /* === Cursor pointer on clickable table rows === */ .tbl tbody tr { cursor: default; } .tbl tbody tr[data-clickable], .tbl tbody tr.clickable { cursor: pointer; } /* Topbar: ẩn desktop (tiêu đề đã có trong page-content); mobile = spacer cho FAB */ #topbar.topbar-desktop { display: none; height: 0; min-height: 0; border: none; overflow: hidden; } /* === Login screen — light ambient depth === */ .auth-bg { --auth-light-50: #f4f2ec; --auth-light-100: #eef3f6; --auth-light-200: #e2eaef; --auth-motion-ambient: 9.5s ease-in-out; --auth-motion-glow: 8s ease-in-out; position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--auth-light-100); } .auth-scene { position: absolute; inset: -8%; z-index: 0; pointer-events: none; } .auth-scene__base { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 55% at 15% 0%, rgba(125, 211, 217, 0.35) 0%, transparent 52%), radial-gradient(ellipse 75% 45% at 88% 92%, rgba(26, 122, 130, 0.14) 0%, transparent 48%), radial-gradient(ellipse 120% 40% at 50% 100%, rgba(180, 200, 210, 0.25) 0%, transparent 55%), linear-gradient(168deg, var(--auth-light-50) 0%, var(--auth-light-100) 45%, var(--auth-light-200) 100%); } .auth-scene__gradient { position: absolute; inset: -20%; background: conic-gradient(from 210deg at 48% 42%, rgba(244, 242, 236, 0) 0deg, rgba(26, 122, 130, 0.1) 70deg, rgba(125, 211, 217, 0.08) 140deg, rgba(238, 243, 246, 0) 220deg, rgba(32, 139, 148, 0.09) 300deg, rgba(244, 242, 236, 0) 360deg); animation: auth-gradient-drift var(--auth-motion-ambient) infinite; } .auth-scene__grid { position: absolute; inset: 0; opacity: 0.123; background-image: linear-gradient(rgba(26, 122, 130, 0.246) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 122, 130, 0.246) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, black 15%, transparent 78%); /* Trục X/Y lệch chu kỳ (30s / 39s) → quỹ đạo xiên đổi liên tục, không trôi một chiều */ animation: auth-grid-drift-x 30s ease-in-out infinite, auth-grid-drift-y 39s ease-in-out infinite; } .auth-scene__glow { position: absolute; border-radius: 50%; animation: auth-glow-breathe var(--auth-motion-glow) infinite; } .auth-scene__glow--a { width: min(42vw, 420px); height: min(42vw, 420px); top: 8%; left: 12%; background: rgba(125, 211, 217, 0.55); filter: blur(80px); } .auth-scene__glow--b { width: min(36vw, 360px); height: min(36vw, 360px); bottom: 5%; right: 8%; background: rgba(26, 122, 130, 0.22); filter: blur(64px); animation-delay: -3.5s; } .auth-scene__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 95% 85% at 50% 48%, transparent 35%, rgba(160, 178, 190, 0.2) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 18%, transparent 82%, rgba(180, 195, 205, 0.12) 100%); } @keyframes auth-gradient-drift { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 33% { transform: translate(1.5%, -1%) rotate(1deg) scale(1.03); } 66% { transform: translate(-1%, 1.5%) rotate(-0.5deg) scale(1.02); } } @keyframes auth-glow-breathe { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.62; transform: scale(1.07); } } @keyframes auth-grid-drift-x { 0%, 100% { background-position-x: 0; } 18% { background-position-x: 34px; } 38% { background-position-x: -28px; } 58% { background-position-x: 22px; } 78% { background-position-x: -36px; } } @keyframes auth-grid-drift-y { 0%, 100% { background-position-y: 0; } 22% { background-position-y: -32px; } 44% { background-position-y: 36px; } 66% { background-position-y: -24px; } 88% { background-position-y: 30px; } } .auth-card { position: relative; z-index: 2; width: 100%; max-width: 400px; padding: 36px 32px 32px; text-align: center; background: #fff; border: 1px solid #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(26, 122, 130, 0.07), 0 1px 1px rgba(15, 23, 42, 0.05), 0 2px 3px rgba(15, 23, 42, 0.04), 0 6px 12px -4px rgba(15, 23, 42, 0.07), 0 14px 28px -10px rgba(15, 23, 42, 0.09), 0 22px 40px -16px rgba(26, 122, 130, 0.06); } .auth-card::after { content: ''; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: -10px; height: 18px; border-radius: 50%; background: radial-gradient( ellipse 100% 100% at 50% 0%, rgba(15, 23, 42, 0.16) 0%, rgba(26, 122, 130, 0.06) 42%, transparent 72% ); filter: blur(5px); pointer-events: none; } .auth-badge { display: inline-flex; align-items: center; margin-bottom: 20px; padding: 4px 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #1a7a82; background: rgba(26, 122, 130, 0.1); border-radius: 999px; } .auth-logo { margin-bottom: 18px; } .auth-logo-img { width: 56px; height: 56px; border-radius: 12px; margin: 0 auto; display: block; box-shadow: 0 4px 12px rgba(26, 122, 130, 0.2); } .auth-title { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; color: #111827; margin: 0 0 6px; } .auth-subtitle { font-size: 0.875rem; line-height: 1.45; color: #5b6573; margin: 0 0 22px; } .auth-divider { height: 1px; margin: 0 0 22px; background: linear-gradient(90deg, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent); } .auth-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 18px; font-size: 0.9375rem; font-weight: 500; color: #111827; background: #fff; border: 1px solid #d8dee6; border-radius: 8px; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); transition: border-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease); } .auth-google-btn img { width: 20px; height: 20px; flex-shrink: 0; } .auth-google-btn:hover { border-color: #1a7a82; background: #f9fdfd; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 3px rgba(26, 122, 130, 0.14); } .auth-google-btn:active { transform: translateY(1px); box-shadow: 0 0 0 2px rgba(26, 122, 130, 0.12); } .auth-footer { font-size: 0.75rem; line-height: 1.5; color: #8b95a5; margin: 18px 0 0; } .auth-error { margin-top: 12px; font-size: 0.875rem; line-height: 1.45; color: #dc2626; } @media (prefers-reduced-motion: reduce) { .auth-scene__gradient, .auth-scene__glow, .auth-scene__grid { animation: none; } } /* === Sidebar user footer: home indicator === */ @media (max-width: 768px) { .sidebar-user-footer, #sidebar > div:last-child { padding-bottom: max(env(safe-area-inset-bottom), 10px); } } /* ═══════════════════════════════════════════════════════ REDESIGN v2 — Anthropic-inspired light theme Sidebar chuyển từ dark-teal sang off-white/cream, nav items dùng teal accent, icons nhẹ hơn (wght 300) ═══════════════════════════════════════════════════════ */ /* ── Sidebar: override dark teal → off-white ── */ #sidebar { background: #FAFAF9 !important; border-right: 1px solid #e5e7eb !important; color: #111827; } /* Header region border */ #sidebar > div:first-child { border-bottom-color: #e5e7eb !important; } /* Nav items — nhẹ hơn group header để phân cấp rõ */ #sidebar .sidebar-item { color: #4b5563 !important; font-weight: 500; transition: var(--motion-transition); } #sidebar .sidebar-item:hover { background: #f0f0ef !important; color: #111827 !important; } #sidebar .sidebar-item:active:not(.is-active) { transform: translateY(1px); } #sidebar .sidebar-item:hover .icon-sidebar { color: #1A7A82; } /* Active — subtle bg, teal text/icon (Phase 2) */ #sidebar .sidebar-item.is-active, #sidebar .sidebar-item.bg-primary { background: #E8F5F6 !important; color: #1A7A82 !important; font-weight: 600; } #sidebar .sidebar-item.is-active .icon-sidebar, #sidebar .sidebar-item.bg-primary .icon-sidebar { color: #1A7A82; stroke-width: 2.25; } #sidebar .sidebar-item.text-white { color: #1A7A82 !important; } /* Group headers: đậm hơn tab — section title */ .sidebar-group-header { color: #111827; } .sidebar-group-header:hover { color: #1a7a82; } .sidebar-group-count { color: #6b7280; opacity: 0.9; } #sidebar .sidebar-group-chevron { color: #374151; opacity: 0.85; } /* User footer: override dark background classes */ .sidebar-user-footer { border-top: 1px solid #e5e7eb; background: transparent; } .sidebar-user-avatar { background: #E8F5F6; color: #1A7A82; } .sidebar-user-name { color: #111827; } /* role text: 11px + #4b5563 = 6.77:1, đủ dễ đọc ở kích thước nhỏ */ .sidebar-user-role { font-size: 11px; color: #4b5563; } /* signout icon: #6b7280 trên #FAFAF9 = 4.5:1 (pass AA cho UI component) */ .sidebar-signout { color: #6b7280; } .sidebar-signout:hover { color: #111827; background: #f0f0ef; } /* Mobile close btn on light bg */ #btn-sidebar-close { background: rgba(0,0,0,.05); color: #374151; } #btn-sidebar-close:hover { background: rgba(0,0,0,.1); color: #111827; } /* Scrollbar — softer teal tint on light bg */ ::-webkit-scrollbar-thumb { background: #B2E0E3; } /* ═══════════════════════════════════════════════════════ Density — Phase 3 (compact UI, spacing/radius only) ═══════════════════════════════════════════════════════ */ /* Page shell */ #page-content { padding: var(--density-space-md) !important; } /* Shared panel primitive */ .ui-panel { background: #fff; border: 1px solid var(--density-border-subtle); border-radius: var(--density-radius-lg); } .ui-panel--padded { padding: var(--density-space-md); } .ui-panel--flush { padding: 0; overflow: hidden; } .ui-panel--subtle { border-color: transparent; background: #fafaf9; } /* Tailwind panels inside app — compact + softer borders */ #page-content .bg-white.border.rounded-xl { border-color: var(--density-border-subtle); border-radius: var(--density-radius-lg); } #page-content .bg-white.border.rounded-xl.p-4 { padding: var(--density-space-md); } #page-content .bg-white.border.rounded-xl.p-3 { padding: 10px; } #page-content .bg-white.border.rounded-lg { border-radius: var(--density-radius-md); } #page-content .rounded-xl { border-radius: var(--density-radius-lg); } #page-content .rounded-lg { border-radius: var(--density-radius-md); } /* Nested panel: bỏ khung kép, giữ spacing section */ #page-content .ui-panel .ui-panel.ui-panel--subtle, #page-content .bg-white.border.rounded-xl .bg-gray-50.border.rounded-xl { border: none; background: transparent; padding: 0; border-radius: 0; } /* Vertical rhythm */ #page-content .space-y-4 > * + * { margin-top: var(--density-space-md); } #page-content .space-y-3 > * + * { margin-top: 10px; } #page-content .gap-4 { gap: var(--density-space-md); } #page-content .gap-3 { gap: 10px; } /* Global modal host */ #modal-box { padding: var(--density-space-md) !important; border-radius: var(--density-radius-lg) !important; } #modal-box .mb-6 { margin-bottom: var(--density-space-md) !important; } /* Custom overlay modals (expense, breakdown, …) */ .form-modal-overlay.p-4 { padding: 10px !important; } .fixed.inset-0.p-4 .rounded-xl { border-radius: var(--density-radius-lg); } .fixed.inset-0 .max-w-md .p-4, .fixed.inset-0 .max-w-3xl .p-4 { padding: var(--density-space-md); } .fixed.inset-0 .border-b.p-4 { padding: 10px var(--density-space-md); } /* Sidebar density */ #sidebar > div:first-child { padding: var(--density-space-md) !important; } #sidebar .sidebar-nav { padding-top: 6px; padding-bottom: 6px; } #sidebar .sidebar-item { padding: 6px 10px !important; gap: 9px !important; font-size: 0.8125rem; line-height: 1.4; border-radius: var(--density-radius-md) !important; margin-left: 4px; margin-right: 4px; } #sidebar .sidebar-group { margin-bottom: 6px; } #sidebar .sidebar-group-header { padding: 5px 12px 2px; } #sidebar .sidebar-group-items { gap: 1px; padding-bottom: 2px; } /* Dashboard KPI tiles */ .dash-kpi-card { background: #fff; border: 1px solid var(--density-border-subtle); border-radius: var(--density-radius-lg); padding: 10px 12px; border-left-width: 3px; border-left-style: solid; } /* Side panel */ .side-panel { box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08); } /* Empty / loading table rows */ .tbl td.type-meta.text-center, #page-content table td.text-center.py-4 { padding-top: 10px; padding-bottom: 10px; } /* ═══ Motion — Phase 4 (interactive targets) ═══ */ #page-content button.border.rounded-lg, #page-content button.border.rounded-md { transition: var(--motion-transition); } #page-content button.border.rounded-lg:hover, #page-content button.border.rounded-md:hover { border-color: #d4d4d2; background: #fafaf9; } #page-content button.border.rounded-lg:active:not(:disabled), #page-content button.border.rounded-md:active:not(:disabled) { transform: translateY(1px); } .sidebar-signout, #btn-sidebar-close { transition: var(--motion-transition); } .form-modal-overlay { animation: fadeIn var(--motion-duration) var(--motion-ease); } .form-modal-overlay .bg-white.rounded-xl { animation: fadeIn var(--motion-duration) var(--motion-ease); } /* Banner thông báo bản deploy mới (app-update.js) */ .app-update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 250; background: linear-gradient(90deg, #155e64, #1a7a82); color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); animation: fadeIn 0.25s ease; } .app-update-banner--dismissed { display: none; } body.has-app-update-banner #app-shell { padding-top: 48px; } .app-update-banner__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; max-width: 100%; padding: 10px 16px; font-size: 13px; } .app-update-banner__text strong { font-weight: 700; } .app-update-banner__actions { display: flex; gap: 8px; flex-shrink: 0; } .app-update-banner__btn { border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; border: none; } .app-update-banner__btn--ghost { background: rgba(255, 255, 255, 0.15); color: #fff; } .app-update-banner__btn--ghost:hover { background: rgba(255, 255, 255, 0.25); } .app-update-banner__btn--primary { background: #fff; color: #155e64; } .app-update-banner__btn--primary:hover { background: #f0fbfc; }