/* ========================================================= Duque Immigration — Document Portal Notion-inspired minimal design system: soft neutral surfaces, quiet borders, generous whitespace, tinted (not solid) status tags, and a light/dark theme pair driven entirely by CSS custom properties — toggled at runtime via [data-theme] on (see js/ui-kit.js: initTheme() / toggleTheme()). The sidebar is an intentional exception: it stays a fixed dark "rail" in both themes (a common pattern in modern dashboards — Linear, Vercel, Notion's own desktop chrome) and hosts the theme toggle itself, so switching themes never hides the switch that controls it. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { /* ---- Fixed brand rail tokens (sidebar + solid dark elements) ---- Intentionally NOT theme-reactive — see note above. */ --ink-solid: #1B1B1D; --ink-solid-hover: #2E2E31; --on-ink: #FFFFFF; /* ---- Brand accent ---- */ --gold: #DD0000; --gold-dark: #B30000; --gold-tint: rgba(221, 0, 0, .08); --gold-tint-strong: rgba(221, 0, 0, .14); /* ---- Danger ---- */ --maple: #9A1B1B; --maple-tint: rgba(154, 27, 27, .08); --maple-border: rgba(154, 27, 27, .28); /* ---- Client-authored message highlight ---- */ --client-tint: rgba(221, 0, 0, .05); --client-tint-border: rgba(221, 0, 0, .16); /* ---- Status tags — soft tint + saturated text, Notion-tag style ---- */ --pending: #9B9A97; --pending-tint: rgba(155, 154, 151, .16); --received: #2483C5; --received-tint: rgba(36, 131, 197, .12); --revision: #C2760F; --revision-tint: rgba(194, 118, 15, .13); --accepted: #24886F; --accepted-tint: rgba(36, 136, 111, .13); /* ---- Class-taxonomy tag colors (admin/classes.php + case-type tags) — deliberately a separate palette from the status colors above, so a case-type tag next to a status pill never reads as the same signal. ---- */ --class-economic: #0B6E99; --class-economic-tint: rgba(11, 110, 153, .12); --class-family: #6940A5; --class-family-tint: rgba(105, 64, 165, .12); --class-work: #B0620A; --class-work-tint: rgba(176, 98, 10, .12); --class-study: #2A8C5A; --class-study-tint: rgba(42, 140, 90, .12); --class-visit: #B23F82; --class-visit-tint: rgba(178, 63, 130, .12); --class-lmia: #C13333; --class-lmia-tint: rgba(193, 51, 51, .12); /* ---- Application Review state (distinct hue from both the status pills and the class tags, so a review badge never gets mistaken for either) ---- */ --review: #5B4FC4; --review-tint: rgba(91, 79, 196, .1); --review-tint-strong: rgba(91, 79, 196, .28); /* ---- Light theme surfaces (default) ---- */ --bg: #FFFFFF; --card: #FFFFFF; --surface-alt: #F7F7F5; --surface-hover: #F0F0EE; --line: #EAEAE8; --line-strong: #DDDDDA; --ink: #26251F; --text: #2B2A26; --text-muted: #86847E; --slate: #55534C; --slate-light: #86847E; --radius: 10px; --radius-sm: 8px; --radius-lg: 16px; --shadow: 0 1px 2px rgba(20,20,18,.04), 0 1px 6px rgba(20,20,18,.04); --shadow-md: 0 10px 30px rgba(20,20,18,.10); --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ---- Unified transition timing ---- One single duration/easing used everywhere in the app, so every hover, toggle, open/close, and state change moves at the same speed and feels like one consistent piece of software. --ease-duration is split out on its own (rather than baked only into --ease) for the handful of places — modal backdrops, dropdown menus — that pair a visible CSS transition with a zero-length, delayed `visibility` swap, so that hidden delay can still line up with this same timing without hardcoding the duration a second time in two places. */ --ease-duration: .3s; --ease: var(--ease-duration) ease; /* A snappier "pop" curve — overshoots slightly then settles — used specifically for things that open/appear (dropdowns, modals), where a plain linear ease reads as flat next to a modern app's UI chrome. Regular hover/state transitions above keep using --ease as-is. */ --ease-pop: .28s cubic-bezier(0.16, 1, 0.3, 1); color-scheme: light; } /* ---- Dark theme overrides ---- */ [data-theme="dark"] { --gold: #EF5D5D; --gold-dark: #F58080; --gold-tint: rgba(239, 93, 93, .14); --gold-tint-strong: rgba(239, 93, 93, .22); --maple: #F08A8A; --maple-tint: rgba(240, 138, 138, .12); --maple-border: rgba(240, 138, 138, .3); --client-tint: rgba(239, 93, 93, .10); --client-tint-border: rgba(239, 93, 93, .22); --pending: #9B9A97; --pending-tint: rgba(155, 154, 151, .16); --received: #62AEEB; --received-tint: rgba(98, 174, 235, .14); --revision: #E3A155; --revision-tint: rgba(227, 161, 85, .15); --accepted: #5BBFA4; --accepted-tint: rgba(91, 191, 164, .15); --class-economic: #5FB3E0; --class-economic-tint: rgba(95, 179, 224, .16); --class-family: #B18AE0; --class-family-tint: rgba(177, 138, 224, .16); --class-work: #E5A24E; --class-work-tint: rgba(229, 162, 78, .16); --class-study: #6FC496; --class-study-tint: rgba(111, 196, 150, .16); --class-visit: #E28AB8; --class-visit-tint: rgba(226, 138, 184, .16); --class-lmia: #EB7373; --class-lmia-tint: rgba(235, 115, 115, .18); --review: #9089E0; --review-tint: rgba(144, 137, 224, .16); --review-tint-strong: rgba(144, 137, 224, .38); --bg: #191919; --card: #202020; --surface-alt: #252525; --surface-hover: #2C2C2C; --line: #313131; --line-strong: #3D3D3D; --ink: #EDEDEC; --text: #E3E2DF; --text-muted: #8B8A87; --slate: #C6C4C0; --slate-light: #9E9C98; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 6px rgba(0,0,0,.3); --shadow-md: 0 14px 34px rgba(0,0,0,.5); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.5; font-size: 14px; transition: all var(--ease); } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ---------- Layout shells ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 224px; flex-shrink: 0; background: var(--ink-solid); color: #fff; display: flex; flex-direction: column; padding: 20px 16px; position: sticky; top: 0; height: 100vh; align-self: flex-start; overflow-y: auto; } .sidebar-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .mobile-nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 18px; padding: 4px 6px; flex-shrink: 0; } .sidebar-drawer { display: flex; flex-direction: column; flex: 1; min-height: 0; } .sidebar .brand { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; margin-bottom: 4px; line-height: 1.3; } .sidebar .brand::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); margin-right: 8px; vertical-align: middle; margin-top: -2px; } .sidebar .brand small { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 600; color: #8F8F94; text-transform: uppercase; letter-spacing: 1.3px; margin-top: 5px; margin-left: 16px; } .sidebar nav { margin-top: 26px; display: flex; flex-direction: column; gap: 2px; } .sidebar nav a { padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; color: #ADADB2; display: flex; align-items: center; gap: 10px; transition: all var(--ease); } .sidebar nav a i { width: 16px; text-align: center; color: #86868C; font-size: 13px; transition: all var(--ease); } .sidebar nav a:hover { background: rgba(255,255,255,.06); color: #fff; } .sidebar nav a:hover i { color: #fff; } .sidebar nav a.active { background: rgba(239,93,93,.16); color: #fff; font-weight: 600; } .sidebar nav a.active i { color: #F08080; } .sidebar .spacer { flex: 1; } /* ---- Theme toggle switch (sidebar) ---- */ .theme-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: #ADADB2; } .theme-toggle-row .theme-toggle-label { display: flex; align-items: center; gap: 10px; } .theme-toggle-row .theme-toggle-label i { width: 16px; text-align: center; color: #86868C; font-size: 13px; } .theme-switch { position: relative; width: 34px; height: 20px; flex-shrink: 0; background: rgba(255,255,255,.14); border: none; border-radius: 999px; padding: 0; cursor: pointer; transition: all var(--ease); } .theme-switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: all var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.3); } [data-theme="dark"] .theme-switch { background: var(--gold); } [data-theme="dark"] .theme-switch::before { transform: translateX(14px); } .sidebar .user-box { border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; margin-top: 10px; font-size: 12.5px; color: #A8A8AD; } .sidebar .user-box .name { color: #fff; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; font-size: 13px; } .sidebar .user-box a { color: #F58080; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-top: 6px; } /* ---------- Stat / info boxes (dashboard) ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; } .stat-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: flex; align-items: center; gap: 13px; transition: all var(--ease); min-width: 0; /* allows this grid item to shrink below its content's natural width instead of overflowing its track — the standard fix for CSS Grid's default min-width:auto on grid items */ } .stat-box > div:last-child { min-width: 0; } .stat-box:hover { box-shadow: var(--shadow-md); } .stat-box .stat-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; color: #fff; } .stat-box .stat-icon.tone-ink { background: var(--ink-solid); } .stat-box .stat-icon.tone-pending { background: var(--pending); } .stat-box .stat-icon.tone-received { background: var(--received); } .stat-box .stat-icon.tone-revision { background: var(--revision); } .stat-box .stat-icon.tone-accepted { background: var(--accepted); } /* Minimal accent — a thin top border rather than AdminLTE's thick left stripe, echoing the tone without adding visual weight. */ .stat-box-ink { border-top: 2px solid var(--ink-solid); } .stat-box-pending { border-top: 2px solid var(--pending); } .stat-box-received { border-top: 2px solid var(--received); } .stat-box-revision { border-top: 2px solid var(--revision); } .stat-box-accepted { border-top: 2px solid var(--accepted); } .stat-box .stat-value { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.1; } .stat-box .stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; } .section-title { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .3px; margin: 22px 0 0; padding: 12px 18px; background: var(--surface-alt); border: 1px solid var(--line); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; } .section-title:first-child { margin-top: 0; } .section-title + .card { border-radius: 0 0 var(--radius) var(--radius); border-top: none; box-shadow: none; } .dashboard-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; } /* ---------- Client page: Documents Checklist / Application Review side by side ---------- */ .client-columns { display: grid; /* auto-fit + minmax reflows on its own — two columns once there's room for both at a reasonable width, one stacked column on a narrower screen — no separate mobile breakpoint needed, same pattern already used for .dashboard-columns above. */ grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 24px; align-items: start; } .client-column-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .client-column-heading { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin: 0 0 10px; } .main { flex: 1; min-width: 0; padding: 30px 40px; } .main-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; } .main-header h1 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.2px; margin: 0 0 4px; color: var(--ink); } .main-header p { margin: 0; color: var(--text-muted); font-size: 13px; } /* ---------- Cards ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: all var(--ease); } .card + .card { margin-top: 14px; } .card-pad { padding: 18px 20px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: var(--radius-sm); padding: 9px 15px; font-size: 13px; font-weight: 600; letter-spacing: .1px; transition: all var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--ink-solid); color: #fff; } .btn-primary:hover { background: var(--ink-solid-hover); } .btn-gold { background: var(--gold); color: #fff; } .btn-gold:hover { background: var(--gold-dark); } .btn-ghost { background: transparent; color: var(--slate); border: 1px solid var(--line); } .btn-ghost:hover { background: var(--surface-hover); border-color: var(--line-strong); } .btn-danger { background: var(--card); color: var(--maple); border: 1px solid var(--maple-border); } .btn-danger:hover { background: var(--maple-tint); } .btn-danger-solid { background: var(--maple); color: #fff; } .btn-danger-solid:hover { filter: brightness(.9); } .btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 6px; } /* Screen-reader-only text — visually hidden but still announced by assistive tech and still fully readable/updatable by JS (used for button labels shown as icon-only buttons, where the real label lives in the title attribute for sighted hover users instead). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Icon-only buttons (doc-actions' Upload/Remove field) — compact and square, so they can never wrap into multi-line button text no matter how narrow their column gets, which is exactly what a very long uploaded filename was doing to them before. The title attribute carries the label as a native hover tooltip. */ .icon-btn-tooltip { width: 34px; height: 34px; padding: 0; justify-content: center; flex-shrink: 0; } .icon-btn-tooltip i { font-size: 13px; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ---------- Forms ---------- */ .field { margin-bottom: 15px; } .field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; } .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=date], .field select, .field textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13.5px; background: var(--card); color: var(--text); transition: all var(--ease); } .field textarea { resize: vertical; min-height: 70px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); } /* ---------- Live-while-typing link editor (contenteditable stand-in for a textarea) ---------- */ .live-link-editor { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit; line-height: 1.5; background: var(--card); color: var(--text); min-height: 70px; white-space: pre-wrap; word-break: break-word; transition: all var(--ease); } .live-link-editor:focus { outline: none; border-color: var(--gold); } .live-link-editor:empty::before { content: attr(data-placeholder); color: var(--text-muted); } /* Comment boxes and checklist notes are shorter, single/few-line fields — match their original min-height instead of the general field one above. */ .comment-form .live-link-editor { min-height: 20px; flex: 1; } .ci-instructions + .live-link-editor { min-height: 46px; } .live-link-editor .live-link { display: inline; color: var(--gold); } .live-link-editor .live-link a { color: inherit; text-decoration: underline; pointer-events: none; /* clicking edits text, not navigates, while still composing */ } .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; } .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); } .help-text { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; } .error-text { font-size: 12.5px; color: var(--maple); margin-top: 8px; } /* ---------- Status pills — soft tint + saturated text, Notion-tag style ---------- */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; } .status-pending { background: var(--pending-tint); color: var(--pending); } .status-received { background: var(--received-tint); color: var(--received); } .status-revision { background: var(--revision-tint); color: var(--revision); } .status-accepted { background: var(--accepted-tint); color: var(--accepted); } /* Application Review states — distinct from the ordinary upload/accept pill colors above, since these describe the client's response to a staff-provided form rather than an upload's own lifecycle. */ .status-review-pending { background: var(--review-tint); color: var(--review); } .status-review-confirmed { background: var(--accepted-tint); color: var(--accepted); } .status-review-flagged { background: var(--revision-tint); color: var(--revision); } /* ---------- Class tags (case-type taxonomy) — rounded-rect, not full pill, so they read visually distinct from the round status pills above even though the pattern (tint bg + matching text) is the same. ---------- */ .class-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .class-tag-economic { background: var(--class-economic-tint); color: var(--class-economic); } .class-tag-family { background: var(--class-family-tint); color: var(--class-family); } .class-tag-work { background: var(--class-work-tint); color: var(--class-work); } .class-tag-study { background: var(--class-study-tint); color: var(--class-study); } .class-tag-visit { background: var(--class-visit-tint); color: var(--class-visit); } .class-tag-lmia { background: var(--class-lmia-tint); color: var(--class-lmia); } .class-tag-other { background: var(--surface-hover); color: var(--text-muted); } select.status-select { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12px; font-weight: 600; background: var(--card); color: var(--text); } /* ---------- Status dropdown (replaces the old native