/* ========================================================================== MEASY AI — ADMIN CONSOLE Clean Clinical Light · matches the user frontend (Figtree + Inter · teal) ========================================================================== */ /* Fonts self-hosted via fonts/fonts.css (loaded in index.html ). */ :root { /* Brand (teal) */ --brand: #0E8C9E; --brand-dark: #0A6F7E; --brand-deeper: #075663; --brand-soft: #EFFAFB; --brand-muted: #D6F1F4; --brand-line: rgba(14,140,158,.18); --bg: #F6F8FA; --bg-gradient: linear-gradient(180deg, #F8FAFD 0%, #F6F8FA 100%); --bg2: #EEF2F6; --surface: #FFFFFF; --surface-solid: #FFFFFF; --surface-soft: #FBFCFD; --surface-hover: #F4F7FA; --border: #E4E9EF; --border-hover: #CBD5E1; --border-focus: #0E8C9E; --text-primary: #0E1726; --text-secondary: #46566B; --text-muted: #5E6B7E; --text-tertiary: #C3CEDA; /* Accent aliased to brand teal */ --accent: #0E8C9E; --accent-dark: #0A6F7E; --accent-soft: rgba(14, 140, 158, 0.10); /* Dark navy sidebar (matches user frontend) */ --nav-bg: #0E1726; --nav-text: #E7ECF3; --nav-muted: #6B7A92; --nav-active: #34D2E6; --nav-hover: rgba(255,255,255,.05); --nav-border: rgba(255,255,255,.06); --success: #10A36B; --success-soft: rgba(16, 163, 107, 0.10); --warning: #D98A06; --warning-soft: rgba(217, 138, 6, 0.10); --danger: #E23D3D; --danger-soft: rgba(226, 61, 61, 0.08); --violet: #0A6F7E; /* re-pointed to brand so palette stays cohesive */ --violet-soft: rgba(14, 140, 158, 0.10); --sidebar-width: 248px; --radius-xl: 18px; --radius-lg: 14px; --radius-md: 11px; --radius-sm: 8px; --shadow-sm: 0 2px 8px rgba(16,23,38,.07), 0 1px 2px rgba(16,23,38,.04); --shadow-md: 0 8px 24px rgba(16,23,38,.09), 0 2px 6px rgba(16,23,38,.05); --shadow-lg: 0 18px 50px rgba(16,23,38,.14); --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 0.16s var(--ease); --t: 0.24s var(--ease); } * { margin: 0; padding: 0; box-sizing: border-box; } html { color-scheme: light; } html, body { min-height: 100vh; background: var(--bg); background-image: var(--bg-gradient); color: var(--text-primary); font-family: 'Figtree', 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .hidden { display: none !important; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input { font-family: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip-link: hidden until focused, then reveals at top-left. */ .skip-link { position: fixed; top: 8px; left: 8px; z-index: 500; transform: translateY(-150%); background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); transition: transform var(--t-fast); text-decoration: none; } .skip-link:focus { transform: translateY(0); outline: 2.5px solid #fff; outline-offset: 2px; } .content:focus, .content:focus-visible { outline: none; } code { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(14,140,158,0.18); } :focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; border-radius: 6px; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(14,140,158,0.3); } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes auroraDrift { 0% { transform: translate(-10%, -10%) rotate(0deg); } 50% { transform: translate(10%, 8%) rotate(8deg); } 100% { transform: translate(-10%, -10%) rotate(0deg); } } @keyframes checkPop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } } /* ========================================================================== SHARED PRIMITIVES ========================================================================== */ .brand-mark { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--accent), var(--accent-dark)); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(14,140,158,0.28); } .brand-mark svg { width: 24px; height: 24px; fill: #ffffff; } .brand-name { font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } .brand-subtitle { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; } .field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin: 0 0 7px; letter-spacing: 0.01em; } .field-label .req { color: var(--accent); } .field-wrap { position: relative; margin-bottom: 16px; } .field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: var(--text-muted); pointer-events: none; } .field-input { width: 100%; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; padding: 13px 14px; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); outline: none; } .field-wrap .field-icon + .field-input { padding-left: 42px; } .field-input::placeholder { color: var(--text-muted); } .field-input:hover { border-color: var(--border-hover); } .field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #ffffff; } .table-filter { font-size: 13px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); max-width: 190px; cursor: pointer; } .table-filter:hover { border-color: var(--border-hover); } .table-filter:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Doctors search: Filters button + collapsible bar + active chips/count */ #doctors-filters-toggle svg { width: 15px; height: 15px; } .filter-badge { background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; } .filters-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 22px; border-bottom: 1px solid var(--border); background: var(--surface-soft); } .filters-bar-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .doctors-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 22px; border-bottom: 1px solid var(--border); } .doctors-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; } .doctors-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-soft); border-radius: 20px; padding: 4px 10px; font-size: 12px; font-weight: 600; } .doctors-chip b { font-weight: 800; } .doctors-chip .chip-x { cursor: pointer; opacity: 0.65; font-weight: 800; } .doctors-chip .chip-x:hover { opacity: 1; } .doctors-chip-clear { font-size: 12px; color: var(--text-muted); font-weight: 600; cursor: pointer; background: none; border: none; padding: 2px 4px; } .doctors-chip-clear:hover { color: var(--text-primary); text-decoration: underline; } .doctors-count { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-left: auto; white-space: nowrap; } .field-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-muted); transition: color var(--t-fast), background var(--t-fast); } .field-toggle svg { width: 18px; height: 18px; fill: currentColor; } .field-toggle:hover { color: var(--accent); background: var(--accent-soft); } .code-input { text-align: center; letter-spacing: 0.5em; font-size: 22px; font-weight: 700; font-family: 'Figtree', sans-serif; padding-left: 14px; } .field-help { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; } .form-error { color: var(--danger); font-size: 13px; margin-top: 12px; min-height: 18px; font-weight: 500; } /* Live password-requirements checklist (set-new password screen) */ .pw-rules { margin: 4px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); display: grid; gap: 7px; } .pw-rules-title { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin: 2px 0; } .pw-rule { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); transition: color var(--t-fast); } .pw-rule-icon { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-hover); position: relative; transition: background var(--t-fast), border-color var(--t-fast); } .pw-rule.met { color: var(--success); } .pw-rule.met .pw-rule-icon { background: var(--success); border-color: var(--success); } .pw-rule.met .pw-rule-icon::after { content: ""; position: absolute; left: 5px; top: 2px; width: 3.5px; height: 7.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Password strength meter (animated bar shown above the requirement list) */ .pw-meter { margin: 14px 0 8px; } .pw-meter-track { position: relative; height: 24px; border-radius: 999px; background: #E4E9EF; overflow: hidden; box-shadow: inset 0 1px 2px rgba(15,30,50,.07); } .pw-meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--border-hover); transition: width .44s cubic-bezier(.22,1,.36,1), background-color .44s ease; } .pw-meter-label { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #fff; white-space: nowrap; opacity: 0; transform: translateY(1px); transition: opacity .26s ease .04s, transform .26s ease .04s; text-shadow: 0 1px 1.5px rgba(8,20,30,.28); padding: 0 8px; } .pw-meter[data-level="1"] .pw-meter-fill { width: 34%; background: #D6342F; } .pw-meter[data-level="2"] .pw-meter-fill { width: 58%; background: #C0790A; } .pw-meter[data-level="3"] .pw-meter-fill { width: 80%; background: #0E9460; } .pw-meter[data-level="4"] .pw-meter-fill { width: 100%; background: #0A7A4E; } .pw-meter:not([data-level="0"]) .pw-meter-label { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .pw-meter-fill { transition: width .01ms, background-color .01ms; } .pw-meter-label { transition: none; } } .link-btn { color: var(--accent); font-size: 13px; font-weight: 600; padding: 4px 0; transition: opacity var(--t-fast); } .link-btn:hover { opacity: 0.75; text-decoration: underline; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 12px 20px; border-radius: var(--radius-md); transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast); border: 1px solid transparent; white-space: nowrap; } .btn svg { width: 17px; height: 17px; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-sm { padding: 9px 14px; font-size: 13px; } .btn-block { width: 100%; margin-top: 6px; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #ffffff; box-shadow: 0 4px 14px rgba(14,140,158,0.28); } .btn-primary:hover:not(:disabled) { box-shadow: 0 8px 22px rgba(14,140,158,0.38); transform: translateY(-1px); } .btn-soft { background: var(--accent-soft); color: var(--accent); border-color: rgba(14,140,158,0.2); } .btn-soft:hover:not(:disabled) { background: rgba(14,140,158,0.16); } .btn-ghost { background: #ffffff; color: var(--text-secondary); border-color: var(--border); } .btn-ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); border-color: var(--border-hover); } .btn-danger { background: var(--danger); color: #fff; box-shadow: 0 4px 14px rgba(226,61,61,0.22); } .btn-danger:hover:not(:disabled) { background: #a93226; transform: translateY(-1px); } /* ========================================================================== AUTH — split-pane layout (matches user frontend: dark hero left, form right) ========================================================================== */ .auth-screen { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; overflow-y: auto; background: linear-gradient(160deg, #EEFAFB 0%, #F6F8FA 48%, #EDF2F8 100%); } .auth-aurora { display: none; } /* Floating language toggle (top-right) */ .auth-floating-lang { position: fixed; top: 18px; right: 20px; z-index: 30; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } /* Split container */ .auth-split { position: relative; width: 100%; max-width: 940px; min-height: min(560px, calc(100dvh - 40px)); margin: auto; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop 0.4s var(--ease-bounce); } /* Hero pane (dark navy → teal) */ .auth-welcome { position: relative; overflow: hidden; padding: 54px 48px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(150deg, #0E1726 0%, #16223A 46%, #0A6F7E 100%); } .auth-welcome::after { content: ''; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(52,210,230,.16); } .auth-welcome::before { content: ''; position: absolute; bottom: -90px; left: -50px; width: 300px; height: 300px; border-radius: 50%; background: rgba(14,140,158,.16); } .auth-welcome > * { position: relative; z-index: 1; } .auth-welcome-kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--nav-active); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } .auth-welcome-kicker::before { content: ''; width: 28px; height: 2px; background: currentColor; border-radius: 2px; } .auth-welcome-title { font-family: 'Figtree', sans-serif; font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; line-height: 1.14; color: #fff; letter-spacing: -.04em; margin-bottom: 20px; } .auth-welcome-title span:first-child { display: block; opacity: .78; font-weight: 600; font-size: .66em; } .auth-welcome-title span:last-child { display: block; background: linear-gradient(90deg, #34D2E6, #7DEEF8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .auth-welcome-copy { font-size: 14.5px; color: rgba(255,255,255,.66); line-height: 1.75; max-width: 330px; } /* Form pane (right). Flex column, vertically centered — matches user frontend. align-items:stretch keeps every step's fields full-width. */ .auth-card { position: relative; z-index: 1; padding: 44px 42px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; background: var(--surface); min-width: 0; overflow-y: auto; } .auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; } .auth-title { font-family: 'Figtree', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } .auth-subtitle { color: var(--text-secondary); font-size: 13.5px; margin: 6px 0 26px; line-height: 1.55; } .auth-hint { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 22px; line-height: 1.5; } /* First-screen "Trouble signing in?" help */ .auth-help > summary { cursor: pointer; list-style: none; color: var(--accent); font-weight: 600; font-size: 13px; display: inline-block; } .auth-help > summary::-webkit-details-marker { display: none; } .auth-help > summary::after { content: " ▾"; font-size: 10px; } .auth-help[open] > summary::after { content: " ▴"; } .auth-help > summary:hover { text-decoration: underline; } .auth-help-body { margin-top: 12px; padding: 13px 15px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 11px; text-align: left; } .auth-help-item { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); } .auth-help-item strong { display: block; color: var(--text-primary); margin-bottom: 2px; } /* 2FA recovery-code box */ .auth-recovery-box { margin-top: 18px; padding: 13px 15px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; text-align: center; } .auth-recovery-lead { font-size: 12px; color: var(--text-muted); margin: 0 0 6px; } .auth-recovery-box .field-wrap { text-align: left; margin-bottom: 0; } .auth-mfa-badge { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } /* Center the 2FA step content to align with the centered badge */ #auth-step-mfa { text-align: center; } #auth-step-mfa .field-label { text-align: center; } #auth-step-mfa .auth-recovery-box .field-wrap { text-align: left; } .auth-mfa-badge svg { width: 28px; height: 28px; fill: var(--accent); } .mfa-qr { width: 180px; height: 180px; margin: 4px auto 16px; background: #fff; border-radius: var(--radius-md); padding: 10px; box-shadow: var(--shadow-md); } .mfa-qr svg { width: 100%; height: 100%; display: block; } .mfa-key-row { display: flex; align-items: center; gap: 10px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; } .mfa-key-row span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .mfa-key-row code { flex: 1; font-size: 12.5px; color: var(--accent); word-break: break-all; } .recovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 18px; } .recovery-grid code { background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; text-align: center; font-size: 13.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-primary); } .recovery-confirm { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-secondary); cursor: pointer; line-height: 1.5; margin-bottom: 6px; } .recovery-confirm input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; } /* ========================================================================== SHELL ========================================================================== */ .admin-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; background: var(--nav-bg); background-image: radial-gradient(120% 60% at 0% 0%, rgba(14,140,158,.18), transparent 60%); border-right: 1px solid var(--nav-border); display: flex; flex-direction: column; padding: 18px 12px; z-index: 40; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; margin-bottom: 6px; border-bottom: 1px solid var(--nav-border); } .sidebar .brand-name { color: #fff; } .sidebar .brand-subtitle { color: var(--nav-muted); } .nav { display: flex; flex-direction: column; gap: 3px; flex: 1; } .nav-section-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nav-muted); padding: 14px 12px 6px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--nav-muted); font-size: 13.5px; font-weight: 500; position: relative; transition: background var(--t-fast), color var(--t-fast); text-align: left; } .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--t-fast); } .nav-item span:nth-child(2) { flex: 1; } .nav-item:hover { background: var(--nav-hover); color: #CBD5E1; } .nav-item:hover svg { transform: scale(1.06); } .nav-item.active { background: linear-gradient(90deg, rgba(52,210,230,.16), rgba(52,210,230,.04)); color: var(--nav-active); font-weight: 700; } .nav-item.active::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--nav-active); border-radius: 0 3px 3px 0; } .nav-badge { font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--nav-muted); display: flex; align-items: center; justify-content: center; } .nav-item.active .nav-badge { background: rgba(52,210,230,.18); color: var(--nav-active); } .nav-badge.alert:not(:empty) { background: var(--danger); color: #fff; box-shadow: 0 0 8px rgba(226,61,61,0.4); } .nav-badge:empty { display: none; } .sidebar-foot { padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--nav-border); } .smtp-pill { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--radius-md); background: rgba(255,255,255,.04); border: 1px solid var(--nav-border); font-size: 12px; color: var(--nav-muted); cursor: default; } .smtp-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nav-muted); flex-shrink: 0; } .smtp-pill.on .dot { background: var(--success); } .smtp-pill.off .dot { background: var(--warning); } .sidebar-scrim { display: none; } .main { display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 1px 2px rgba(16,23,38,.04); } .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .page-title { font-family: 'Figtree', sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; } .page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .topbar-right { display: flex; align-items: center; gap: 10px; } .lang-toggle { display: inline-flex; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; gap: 2px; } .lang-btn { padding: 5px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); border-radius: 5px; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); line-height: 1; } .lang-btn:hover { color: var(--text-secondary); background: var(--surface-hover); } .lang-btn.active { background: #ffffff; color: var(--accent); box-shadow: var(--shadow-sm); } .icon-btn { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); background: #ffffff; border: 1px solid var(--border); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .icon-btn svg { width: 18px; height: 18px; } .icon-btn:hover { background: var(--surface-hover); color: var(--accent); border-color: var(--border-hover); } .icon-btn:active svg { animation: spin 0.5s var(--ease); } .mobile-only { display: none; } /* Account dropdown */ .account { position: relative; } .account-trigger { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 999px; border: 1px solid var(--border); background: #ffffff; transition: background var(--t-fast), border-color var(--t-fast); } .account-trigger:hover { background: var(--surface-hover); border-color: var(--border-hover); } .account-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-deeper)); color: #ffffff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .account-avatar.lg { width: 44px; height: 44px; font-size: 16px; } .account-meta { display: flex; flex-direction: column; line-height: 1.25; text-align: left; } .account-name { font-size: 13.5px; font-weight: 600; } .account-role { font-size: 11px; color: var(--text-muted); } .account-chev { width: 16px; height: 16px; color: var(--text-muted); transition: transform var(--t); } .account-trigger[aria-expanded="true"] .account-chev { transform: rotate(180deg); } .dropdown { position: absolute; right: 0; top: calc(100% + 10px); width: 268px; background: var(--surface-solid); border: 1px solid var(--border-hover); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px; transform-origin: top right; animation: pop 0.18s var(--ease); z-index: 50; } .dropdown-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .dropdown-name { font-size: 14px; font-weight: 700; } .dropdown-email { font-size: 12px; color: var(--text-muted); word-break: break-all; } .dropdown-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13.5px; font-weight: 500; transition: background var(--t-fast), color var(--t-fast); text-align: left; } .dropdown-item svg { width: 17px; height: 17px; } .dropdown-item:hover { background: var(--surface-hover); color: var(--text-primary); } .dropdown-item.danger:hover { background: var(--danger-soft); color: var(--danger); } /* ========================================================================== CONTENT / PAGES ========================================================================== */ .content { padding: 30px; width: 100%; } .page { display: none; } .page.active { display: block; animation: fadeUp 0.35s var(--ease); } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 22px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .panel-head.column { flex-direction: column; align-items: flex-start; gap: 6px; } .panel-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .panel-title { font-family: 'Figtree', sans-serif; font-size: 16.5px; font-weight: 700; } .panel-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; } /* Stat cards */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; position: relative; overflow: hidden; transition: transform var(--t), border-color var(--t), box-shadow var(--t); animation: fadeUp 0.4s var(--ease) backwards; } .stat-card:hover { transform: translateY(-3px); border-color: var(--border-hover); box-shadow: var(--shadow-md); } .stat-card::after { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: var(--accent-soft); opacity: 0.5; } .stat-ico { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; position: relative; z-index: 1; } .stat-ico svg { width: 21px; height: 21px; } .stat-ico.cyan { background: var(--accent-soft); color: var(--accent); } .stat-ico.green { background: var(--success-soft); color: var(--success); } .stat-ico.amber { background: var(--warning-soft); color: var(--warning); } .stat-ico.violet { background: var(--violet-soft); color: var(--violet); } .stat-value { font-family: 'Figtree', sans-serif; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; position: relative; z-index: 1; } .stat-label { font-size: 13px; color: var(--text-secondary); margin-top: 6px; font-weight: 500; position: relative; z-index: 1; } /* Recent list */ .recent-list { padding: 8px 10px 12px; } .recent-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radius-md); transition: background var(--t-fast); } .recent-row:hover { background: var(--surface-hover); } .recent-row .av { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--accent); flex-shrink: 0; } .recent-row .info { flex: 1; min-width: 0; } .recent-row .nm { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recent-row .em { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== TABLE ========================================================================== */ .table-search { position: relative; flex: 1; min-width: 220px; max-width: 420px; } .table-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-muted); } .table-search input { width: 100%; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 13.5px; padding: 10px 12px 10px 38px; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .table-search input::placeholder { color: var(--text-muted); } .table-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .seg { display: inline-flex; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; } .seg-btn { padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); border-radius: 7px; transition: background var(--t-fast), color var(--t-fast); } .seg-btn:hover { color: var(--text-secondary); } .seg-btn.active { background: #ffffff; color: var(--accent); box-shadow: var(--shadow-sm); } .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; min-width: 640px; } table.data thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 13px 20px; border-bottom: 1px solid var(--border); background: var(--surface-soft); white-space: nowrap; } table.data tbody td { padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; } table.data tbody tr { transition: background var(--t-fast); } table.data tbody tr:hover { background: var(--surface-hover); } table.data tbody tr:last-child td { border-bottom: none; } .cell-user { display: flex; align-items: center; gap: 12px; } .cell-user .av { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; color: var(--accent); flex-shrink: 0; } .cell-user .nm { font-weight: 600; } .cell-user .em { font-size: 12px; color: var(--text-muted); } .cell-spec { color: var(--text-secondary); } .cell-muted { color: var(--text-muted); font-size: 12.5px; } /* ---------- Audit log viewer ---------- */ #page-audit.active { display: flex; } /* fill the content area */ #page-audit > .panel { flex: 1; display: flex; flex-direction: column; min-height: calc(100dvh - 168px); margin-bottom: 0; } .audit-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 22px 6px; } .audit-toolbar .field-input { flex: 1; } #audit-table-wrap { flex: 1; overflow: auto; display: flex; flex-direction: column; padding: 4px 22px; } #audit-table-wrap > table { align-self: stretch; } #audit-table-wrap > .state { margin: auto; } /* center empty/error in the free space */ .audit-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px 18px; } .audit-count { font-size: 12.5px; color: var(--text-muted); font-weight: 600; } .audit-table { table-layout: auto; width: 100%; } .audit-row { cursor: pointer; } .audit-row:hover { background: var(--surface-hover); } .audit-action { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); background: var(--bg2); padding: 3px 8px; border-radius: 6px; white-space: nowrap; } .audit-status { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .audit-status.ok { color: var(--success); background: var(--success-soft); } .audit-status.fail { color: var(--danger); background: var(--danger-soft); } .audit-status.pending { color: var(--text-secondary); background: var(--bg2); } .audit-integrity { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; cursor: default; } .audit-integrity::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .audit-integrity.ok { color: var(--success); background: var(--success-soft); } .audit-integrity.bad { color: var(--danger); background: var(--danger-soft); } .audit-integrity.checking { color: var(--text-muted); background: var(--bg2); } .audit-integrity:empty { display: none; } .audit-expand { color: var(--text-muted); text-align: center; font-size: 13px; } .audit-detail-row > td { background: var(--surface-soft); border-top: none !important; padding: 0 14px 14px !important; } .audit-detail { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); } .audit-detail > div { display: contents; } .audit-detail span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .audit-detail code { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12px; color: var(--text-primary); word-break: break-all; } .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .badge .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.active { background: var(--success-soft); color: var(--success); } .badge.pending_setup { background: var(--warning-soft); color: var(--warning); } .badge.mfa_pending { background: var(--violet-soft); color: var(--violet); } .badge.invited { background: var(--surface-hover); color: var(--text-secondary); } .badge.role-admin { background: var(--accent-soft); color: var(--accent); } .badge.role-doctor { background: var(--surface-hover); color: var(--text-secondary); } /* Row actions */ .row-actions { display: flex; justify-content: flex-end; } .kebab { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: background var(--t-fast), color var(--t-fast); } .kebab svg { width: 18px; height: 18px; } .kebab:hover { background: var(--surface-hover); color: var(--text-primary); } .row-menu { position: fixed; width: 210px; background: var(--surface-solid); border: 1px solid var(--border-hover); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; animation: pop 0.15s var(--ease); } .row-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: background var(--t-fast), color var(--t-fast); text-align: left; } .row-menu button svg { width: 16px; height: 16px; } .row-menu button:hover { background: var(--surface-hover); color: var(--text-primary); } .row-menu button.danger:hover { background: var(--danger-soft); color: var(--danger); } .row-menu .sep { height: 1px; background: var(--border); margin: 5px 0; } /* Empty / loading */ .state { text-align: center; padding: 56px 24px; color: var(--text-muted); } .state svg { width: 46px; height: 46px; margin: 0 auto 14px; color: var(--text-tertiary); display: block; } .state h4 { font-size: 15px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 600; } .state p { font-size: 13px; max-width: 340px; margin: 0 auto; line-height: 1.55; } .spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto; } .skeleton-row { height: 56px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .skeleton-row::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(12, 26, 46, 0.05), transparent); animation: shimmer 1.3s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } /* ========================================================================== REQUESTS ========================================================================== */ .request-list { padding: 14px; display: flex; flex-direction: column; gap: 12px; } .request-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #ffffff; transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); animation: fadeUp 0.3s var(--ease) backwards; } .request-card:hover { border-color: var(--border-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } .request-ico { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .request-ico svg { width: 21px; height: 21px; } .request-ico.reset { background: var(--warning-soft); color: var(--warning); } .request-ico.delete { background: var(--danger-soft); color: var(--danger); } .request-main { flex: 1; min-width: 0; } .request-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .request-type { font-size: 14px; font-weight: 700; } .request-user { font-size: 13px; color: var(--text-secondary); margin-top: 3px; } .request-user b { color: var(--text-primary); font-weight: 600; } .request-note { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; font-style: italic; line-height: 1.5; } .request-time { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; } .request-actions { display: flex; gap: 8px; flex-shrink: 0; } .req-status { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; } .req-status.resolved { background: var(--success-soft); color: var(--success); } .req-status.dismissed { background: var(--surface-hover); color: var(--text-muted); } @media (max-width: 640px) { .request-card { flex-wrap: wrap; } .request-actions { width: 100%; } .request-actions .btn { flex: 1; } } /* ========================================================================== CREATE FORM ========================================================================== */ #create-form { padding: 24px 22px; } .role-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; } .role-card { cursor: pointer; } .role-card input { position: absolute; opacity: 0; pointer-events: none; } .role-card-inner { border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 16px 14px; text-align: center; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); height: 100%; background: #ffffff; } .role-card-inner svg { width: 24px; height: 24px; color: var(--text-muted); margin-bottom: 9px; transition: color var(--t-fast); } .role-card-title { font-size: 13.5px; font-weight: 700; } .role-card-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; } .role-card:hover .role-card-inner { border-color: var(--border-hover); transform: translateY(-2px); background: var(--surface-soft); } .role-card input:checked + .role-card-inner { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); } .role-card input:checked + .role-card-inner svg { color: var(--accent); } .role-card input:focus-visible + .role-card-inner { box-shadow: 0 0 0 3px var(--accent-soft); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-field-full { grid-column: 1 / -1; } /* Create-account: name row (Title · First · Last) + address sub-grid */ .subgrid-3 { display: grid; grid-template-columns: 0.85fr 1fr 1fr; gap: 18px; } .addr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .addr-grid .addr-street { grid-column: span 4; } .addr-grid .addr-house { grid-column: span 2; } .addr-grid .addr-postal { grid-column: span 2; } .addr-grid .addr-city { grid-column: span 2; } .addr-grid .addr-state { grid-column: span 2; } @media (max-width: 640px) { .subgrid-3 { grid-template-columns: 1fr; } .addr-grid { grid-template-columns: 1fr 1fr; } .addr-grid .addr-street, .addr-grid .addr-house, .addr-grid .addr-postal, .addr-grid .addr-city, .addr-grid .addr-state { grid-column: span 1; } } .form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); } /* ========================================================================== MODALS ========================================================================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(12, 26, 46, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 100; } .modal-overlay.open { display: flex; animation: slideDown 0.2s var(--ease); } .modal { width: 100%; max-width: 440px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 28px; animation: pop 0.25s var(--ease-bounce); } .modal-lg { max-width: 500px; padding: 30px; } .modal-lg .modal-actions { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); flex-wrap: wrap; } .modal-icon { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .modal-icon svg { width: 28px; height: 28px; } .modal-icon.danger { background: var(--danger-soft); color: var(--danger); } .modal-icon.warning { background: var(--warning-soft); color: var(--warning); } .modal-title { font-family: 'Figtree', sans-serif; font-size: 19px; font-weight: 700; } .modal-text { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin-top: 8px; } .modal-text strong { color: var(--text-primary); } .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; } .cred-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .cred-check { width: 46px; height: 46px; border-radius: 50%; background: var(--success-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: checkPop 0.4s var(--ease-bounce); } .cred-check svg { width: 24px; height: 24px; fill: none; stroke: var(--success); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* Compact email-delivery status strip (icon stays small — no hero triangle). */ .cred-email-status { font-size: 12.5px; font-weight: 600; padding: 9px 13px; border-radius: var(--radius-md); margin-bottom: 16px; display: flex; align-items: center; gap: 9px; line-height: 1.4; border: 1px solid transparent; } .cred-email-status svg { width: 16px; height: 16px; flex-shrink: 0; } .cred-email-status.sent { background: var(--success-soft); color: var(--success); border-color: rgba(16,163,107,.2); } .cred-email-status.unsent { background: var(--warning-soft); color: var(--warning); border-color: rgba(217,138,6,.2); } /* Credential rows — stacked label over a prominent value, with a clear copy action. */ .cred-rows { display: flex; flex-direction: column; gap: 8px; } .cred-row { display: flex; align-items: center; gap: 12px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px 10px 16px; transition: border-color var(--t-fast), background var(--t-fast); } .cred-row:hover { border-color: var(--border-hover); background: #fff; } .cred-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); width: 96px; flex-shrink: 0; } .cred-value { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--text-primary); word-break: break-all; } .cred-value.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; font-size: 14px; } .cred-row-pw { background: var(--accent-soft); border-color: var(--accent-soft); padding: 13px 12px 13px 16px; } .cred-row-pw:hover { border-color: var(--accent-soft); background: var(--accent-soft); } .cred-row-pw .cred-value.mono { font-size: 15.5px; } .copy-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-muted); border: 1px solid var(--border); background: #fff; flex-shrink: 0; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .copy-btn svg { width: 15px; height: 15px; } .copy-btn:hover { background: var(--brand-soft); color: var(--accent); border-color: var(--brand-line); } .copy-btn.copied { color: var(--success); border-color: rgba(16,163,107,.3); background: var(--success-soft); } /* Info note — neutral, not alarming (it's guidance, not a warning). */ .cred-note { display: flex; gap: 10px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-top: 16px; padding: 11px 14px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md); } .cred-note svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; margin-top: 1px; } /* ========================================================================== TOASTS & TOOLTIP ========================================================================== */ .toast-stack { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 200; max-width: 360px; } .toast { display: flex; align-items: center; gap: 11px; padding: 13px 16px; background: var(--surface-solid); border: 1px solid var(--border-hover); border-left-width: 3px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 500; animation: toastIn 0.3s var(--ease-bounce); } .toast svg { width: 19px; height: 19px; flex-shrink: 0; } .toast.success { border-left-color: var(--success); } .toast.success svg { color: var(--success); } .toast.error { border-left-color: var(--danger); } .toast.error svg { color: var(--danger); } .toast.info { border-left-color: var(--accent); } .toast.info svg { color: var(--accent); } .toast.leaving { animation: toastIn 0.25s var(--ease) reverse forwards; } .tooltip { position: fixed; z-index: 300; background: #0E1726; color: #F8FAFD; border: 1px solid rgba(255,255,255,0.12); font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 7px; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.14s var(--ease), transform 0.14s var(--ease); white-space: nowrap; box-shadow: var(--shadow-md); max-width: 240px; } .tooltip.show { opacity: 1; transform: translateY(0); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1024px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .admin-shell { grid-template-columns: 1fr; } .sidebar { position: fixed; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform var(--t); box-shadow: none; } .admin-shell.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); } .admin-shell.nav-open .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(12, 26, 46, 0.45); z-index: 38; backdrop-filter: blur(2px); } .mobile-only { display: flex; } .content { padding: 20px 16px; } .topbar { padding: 14px 18px; } .account-meta { display: none; } .form-grid { grid-template-columns: 1fr; } .role-pick { grid-template-columns: 1fr; } .page-subtitle { display: none; } } /* Auth split collapses to single column (form only) on narrow screens. */ @media (max-width: 760px) { .auth-split { grid-template-columns: 1fr; max-width: 440px; min-height: unset; } .auth-welcome { display: none; } .auth-card { padding: 38px 28px; } } @media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } .panel-head { padding: 16px; } .auth-card { padding: 30px 22px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }