/* ========================================================================== RMIS DESIGN SYSTEM — Refugee Management Information System Department of Refugee Services (DRS) · Refugee & Host Communities Livelihood Module Buildless, token-driven design system. Loaded AFTER Bootstrap 5.3 so it can: 1. Re-theme Bootstrap via its own --bs-* custom properties (legacy pages using .btn-primary / .table / .card inherit the new look automatically). 2. Provide the bespoke application shell + humanitarian components. Architecture / order of loading (see _Layout.cshtml ): bootstrap5.css → plugin css (datatables/select2/...) → bs3-compat.css → design-system.css (this file, wins on specificity by load order) Foundation adapted from Gentelella v4's token architecture, retuned for an official humanitarian context. WCAG 2.1 AA: contrast-verified pairs, visible focus, reduced-motion support. ========================================================================== */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ :root { /* ---- Brand / Primary (Kenya national green — flag, shield & IOM arc) ---- */ --color-primary-50: #E7F5EC; --color-primary-100: #C4E7D1; --color-primary-200: #98D5B0; --color-primary-300: #5FBE88; --color-primary-400: #25A864; --color-primary-500: #009A4E; /* Kenya green — large surfaces only (3.x:1) */ --color-primary-600: #00843F; /* solid buttons: white text = 4.8:1 AA */ --color-primary-700: #006B33; /* links/labels on white = 6.7:1 AA(A) */ --color-primary-800: #00552A; --color-primary-900: #003F1F; --color-table-head: #00712F; /* table header background (dark green) */ /* ---- Accent (coat-of-arms gold — the rampant lions) -------------------- */ --color-accent-50: #FBF3DE; --color-accent-100: #F5E2B0; --color-accent-200: #EFCF7E; --color-accent-300: #E6B948; --color-accent-400: #D9A520; /* gold — decorative accents / active markers */ --color-accent-500: #C28E14; --color-accent-600: #9C7110; --color-accent-700: #7A580C; /* gold text on white = 6.5:1 AA */ /* ---- Surfaces & text --------------------------------------------------- */ --color-surface-default: #FFFFFF; --color-surface-subtle: #FFFFFF; /* app body background (white) */ --color-surface-raised: #F6F7F9; /* soft off-white panels: cards + tables */ --color-surface-sunken: #FFFFFF; /* surfaces stay white (was #EEF1F5) */ --color-hover: rgba(17,24,39,0.05); /* subtle, neutral interactive hover */ --color-text-primary: #1E2633; /* 13.4:1 on white */ --color-text-secondary: #5A636E; /* 5.9:1 on white */ --color-text-disabled: #A0A8B3; --color-text-on-primary: #FFFFFF; --color-border-default: #E9ECF1; --color-border-strong: #D3D8DF; --color-focus-ring: #1A5FB4; /* non-brand blue for clear visible focus */ /* ---- Sidebar (Kenya forest-green, deepening gradient) ------------------ */ --color-sidebar-bg: #04361F; /* deep Kenya green (gradient top) */ --color-sidebar-bg-2: #052B19; /* darker green (gradient bottom) */ --color-sidebar-bg-hover: rgba(255,255,255,0.08); --color-sidebar-text: #B7D3C2; --color-sidebar-text-hover: #FFFFFF; --color-sidebar-section: #6FA383; --color-sidebar-active-bg: rgba(0,154,78,0.22); --color-sidebar-active-bar: #2FD27F; --color-sidebar-border: rgba(255,255,255,0.08); /* ---- Topbar (green header bar — matches sidebar, lighter for hierarchy) - */ --color-topbar-bg-1: #006B33; /* green header gradient start */ --color-topbar-bg-2: #00843F; /* green header gradient end (white AA) */ --color-topbar-text: #FFFFFF; /* ---- Semantic feedback ------------------------------------------------- */ --color-info: #1A5FB4; --color-info-bg: #E1ECFB; --color-success: #18794E; --color-success-bg: #E3F4EC; --color-warning: #946200; --color-warning-bg: #FEF3CD; --color-danger: #C8102E; --color-danger-bg: #FBE3E4; /* Kenya flag red */ /* ---- Status taxonomy (soft badges: tinted bg + dark text, all >= 4.5:1) - */ --status-active-bg: #E3F4EC; --status-active-text: #18794E; --status-pending-bg: #FEF3CD; --status-pending-text: #946200; --status-review-bg: #E1ECFB; --status-review-text: #1A5FB4; --status-closed-bg: #EAECEF; --status-closed-text: #5A636E; --status-rejected-bg: #FBE3E4; --status-rejected-text: #B42318; --status-at-risk-bg: #FDEBD9; --status-at-risk-text: #B5481B; --status-resettlement-bg: #F0E6FA; --status-resettlement-text: #7A2EA6; --status-repatriated-bg: #D9F2EF; --status-repatriated-text: #0F6E63; /* ---- Typography -------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-table: 0.8125rem; /* 13px — single uniform size for ALL table header + body cells */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Spacing (8px rhythm, 4px base) ------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---- Radius / shadow / motion ----------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(16,24,40,.05); --shadow-sm: 0 1px 3px rgba(16,24,40,.10); --shadow-md: 0 4px 8px rgba(16,24,40,.08); --shadow-lg: 0 12px 24px rgba(16,24,40,.10); --transition-fast: 150ms ease; --transition-base: 250ms ease; /* ---- Layout dims ------------------------------------------------------- */ --sidebar-w: 264px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; --z-sidebar: 1000; --z-topbar: 1010; --z-dropdown: 1020; --z-backdrop: 1040; --z-modal: 1050; --z-toast: 1080; /* ====================================================================== 2. BOOTSTRAP 5 RE-THEME — map our tokens onto Bootstrap's own variables. This is what makes every legacy .btn-primary / .table / .card / .form-control adopt the DRS look without touching their markup. ====================================================================== */ --bs-primary: var(--color-primary-600); --bs-primary-rgb: 0,132,63; --bs-secondary: #5A636E; --bs-secondary-rgb: 90,99,110; --bs-success: var(--color-success); --bs-success-rgb: 24,121,78; --bs-info: var(--color-info); --bs-info-rgb: 26,95,180; --bs-warning: var(--color-warning); --bs-warning-rgb: 148,98,0; --bs-danger: var(--color-danger); --bs-danger-rgb: 200,16,46; --bs-body-bg: var(--color-surface-subtle); --bs-body-color: var(--color-text-primary); --bs-body-color-rgb: 30,38,51; --bs-body-font-family: var(--font-sans); --bs-body-font-size: var(--text-sm); --bs-body-line-height: var(--leading-normal); --bs-border-color: var(--color-border-default); --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-link-color: var(--color-primary-700); --bs-link-color-rgb: 0,107,51; --bs-link-hover-color: var(--color-primary-900); --bs-emphasis-color: var(--color-text-primary); --bs-secondary-color: var(--color-text-secondary); --bs-tertiary-color: var(--color-text-disabled); } /* ========================================================================== 3. BASE / RESET (layered on Bootstrap reboot) ========================================================================== */ body { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-surface-subtle); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-semibold); color: var(--color-text-primary); line-height: var(--leading-snug); } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } a { color: var(--color-primary-700); } a:hover { color: var(--color-primary-900); } code, kbd, samp, .text-mono, .mono { font-family: var(--font-mono); font-size: 0.92em; } /* Accessibility — visible focus on every interactive element (WCAG 2.4.7). :focus-visible keeps focus rings off mouse clicks but on keyboard nav. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .page-link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; box-shadow: none; } /* Skip-to-content link for keyboard/screen-reader users (WCAG 2.4.1) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--color-primary-700); color: #fff; padding: var(--space-2) var(--space-4); border-radius: 0 0 var(--radius-md) 0; font-weight: var(--weight-semibold); } .skip-link:focus { left: 0; color: #fff; } ::selection { background: var(--color-primary-100); color: var(--color-primary-900); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 5px; } ::-webkit-scrollbar-track { background: transparent; } .required-mark { color: var(--color-danger); margin-left: 2px; font-weight: var(--weight-semibold); } /* ========================================================================== 4. APPLICATION SHELL Layout: fixed sidebar + fixed topbar + scrolling content. Uses the existing markup hooks where practical (body.nav-md / nav-sm, .left_col, .right_col) so the rebuilt _Layout stays compatible with main.js toggle logic, plus bespoke syn-* classes for the new chrome. ========================================================================== */ /* ---- Sidebar ----------------------------------------------------------- */ .left_col, .syn-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: linear-gradient(180deg, var(--color-sidebar-bg) 0%, var(--color-sidebar-bg-2) 100%); border-right: 1px solid var(--color-sidebar-border); display: flex; flex-direction: column; z-index: var(--z-sidebar); overflow: hidden; transition: width var(--transition-base); } body.nav-sm .left_col, body.nav-sm .syn-sidebar { width: var(--sidebar-w-collapsed); } .nav_title, .syn-brand { flex-shrink: 0; min-height: 62px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-sidebar-border); } .nav_title a.site_title, .syn-brand a { display: flex; align-items: center; justify-content: center; gap: var(--space-3); text-decoration: none; width: 100%; padding: 6px 10px; } .nav_title img, .syn-brand img { width: 100%; max-height: 80px; height: auto; object-fit: contain; flex-shrink: 1; } body.nav-sm .nav_title, body.nav-sm .syn-brand { min-height: var(--topbar-h); padding: var(--space-1); } body.nav-sm .nav_title a.site_title, body.nav-sm .syn-brand a { padding: 3px 4px; } body.nav-sm .nav_title img, body.nav-sm .syn-brand img { max-height: 44px; } .syn-brand-text { color: #fff; font-weight: var(--weight-bold); font-size: var(--text-sm); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.nav-sm .syn-brand-text { opacity: 0; width: 0; } #sidebar-menu, .syn-nav { flex: 1 1 auto; min-height: 0; /* allow flex child to shrink so it can scroll */ overflow-y: auto; overflow-x: hidden; padding: var(--space-2) var(--space-3) var(--space-6); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; } #sidebar-menu::-webkit-scrollbar, .syn-nav::-webkit-scrollbar { width: 6px; } #sidebar-menu::-webkit-scrollbar-thumb, .syn-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; } #sidebar-menu::-webkit-scrollbar-track, .syn-nav::-webkit-scrollbar-track { background: transparent; } .syn-nav-section { color: var(--color-sidebar-section); font-size: 0.6875rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .08em; padding: var(--space-4) var(--space-3) var(--space-2); margin-top: var(--space-2); border-top: 1px solid var(--color-sidebar-border); /* subtle separator between menu groups */ white-space: nowrap; } body.nav-sm .syn-nav-section { margin-left: var(--space-2); margin-right: var(--space-2); } body.nav-sm .syn-nav-section { text-align: center; padding-left: 0; padding-right: 0; font-size: 9px; } /* Override Bootstrap's .nav { display:flex } so sidebar lists stack vertically and every item fills the full sidebar width. */ .nav.side-menu, .nav.child_menu, .syn-nav ul { list-style: none; margin: 0; padding: 0; display: block; width: 100%; } .nav.side-menu > li, .nav.child_menu > li { position: relative; width: 100%; display: block; } .nav.side-menu li { position: relative; } .nav.side-menu li > a, .syn-nav li > a { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 10px 12px; margin-bottom: 3px; color: var(--color-sidebar-text); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); border-radius: var(--radius-md); transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); white-space: nowrap; } .nav.side-menu li > a:hover, .syn-nav li > a:hover { background: var(--color-sidebar-bg-hover); color: var(--color-sidebar-text-hover); } .nav.side-menu li > a:hover .syn-icon { transform: scale(1.08); } .nav.side-menu li.active > a, .nav.side-menu li.current-page > a, .syn-nav li.active > a { background: var(--color-sidebar-active-bg); color: #fff; box-shadow: inset 3px 0 0 var(--color-accent-400); /* gold active marker (coat-of-arms lions) */ } .nav.side-menu li.active > a .syn-icon, .nav.side-menu li.current-page > a .syn-icon { color: var(--color-sidebar-active-bar); } /* Expanded parent group: elevated "card" look (benchmark style) */ .nav.side-menu > li.parent.active { background: rgba(255,255,255,0.06); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); margin-bottom: 4px; } .nav.side-menu > li.parent.active > a { box-shadow: none; background: transparent; color: #fff; font-weight: var(--weight-semibold); } /* Sidebar icons can be a Font Awesome OR a Lucide (lucide.createIcons replaces with , preserving the class). Size both. */ .syn-icon, .nav.side-menu li > a > i:first-child { width: 20px; flex-shrink: 0; text-align: center; font-size: 16px; line-height: 1; transition: transform var(--transition-fast); } .syn-icon svg { width: 18px; height: 18px; } svg.syn-icon { width: 20px; height: 20px; } /* Chevron: circular badge — points RIGHT when closed, rotates DOWN when open */ .syn-chevron { margin-left: auto; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; background: rgba(255,255,255,0.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); transform: rotate(-90deg); /* closed: > */ transition: transform var(--transition-fast), background var(--transition-fast); } .nav.side-menu li > a:hover .syn-chevron { background: rgba(255,255,255,0.20); } .syn-chevron svg, svg.syn-chevron { width: 15px; height: 15px; } .nav.side-menu li.active > a .syn-chevron { transform: rotate(0deg); /* open: v */ background: rgba(255,255,255,0.22); } body.nav-sm .syn-label, body.nav-sm .syn-chevron { opacity: 0; width: 0; overflow: hidden; } /* nested child menus */ .nav.child_menu { background: transparent; margin: 0 4px 8px 2px; padding: 2px 2px 6px; position: relative; } /* vertical guide rail for the sub-tree */ .nav.child_menu::before { content: ""; position: absolute; left: 17px; top: 4px; bottom: 8px; width: 2px; border-radius: 1px; background: rgba(255,255,255,0.10); } .nav.child_menu li > a { padding: 8px 8px 8px 32px; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-sidebar-text); border-radius: var(--radius-md); position: relative; } .nav.child_menu li > a .syn-subicon { width: 16px; flex-shrink: 0; text-align: center; font-size: 13px; opacity: .75; } .nav.child_menu li > a:hover { background: var(--color-sidebar-bg-hover); color: var(--color-sidebar-text-hover); } .nav.child_menu li > a:hover .syn-subicon { opacity: 1; } .nav.child_menu li.active > a, .nav.child_menu li.current-page > a { color: #fff; background: var(--color-sidebar-active-bg); font-weight: var(--weight-medium); } /* Neutralize legacy custom.css sidebar borders/stripes so the pill nav stays clean */ .nav.side-menu > li, .nav.side-menu > li.active, .nav.side-menu > li.current-page, .nav.side-menu > li:hover { border-bottom: none; border-right: none; } .nav-sm ul.nav.child_menu li, body.nav-sm ul.nav.child_menu li { border-bottom: none; } body.nav-md .nav.side-menu li:not(.active) > .child_menu { display: none; } /* collapsed sidebar: submenus stay closed until the icon is CLICKED (the toggle script adds .active-sm in collapsed mode / .active in expanded mode), then the submenu opens as a flyout to the right. No hover-to-open. */ body.nav-sm .nav.side-menu > li > .child_menu { display: none; } body.nav-sm .nav.side-menu > li.active-sm > .child_menu, body.nav-sm .nav.side-menu > li.active > .child_menu { display: block; position: absolute; left: var(--sidebar-w-collapsed); top: 0; min-width: 200px; background: var(--color-sidebar-bg); box-shadow: var(--shadow-lg); border-radius: 0 var(--radius-md) var(--radius-md) 0; z-index: var(--z-dropdown); } body.nav-sm .nav.child_menu li > a { padding-left: var(--space-5); } /* ---- Topbar (green header bar) ----------------------------------------- */ .syn-topnav, .top_nav .nav_menu { position: fixed; top: 0; right: 0; left: var(--sidebar-w); height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-5); background: linear-gradient(90deg, var(--color-topbar-bg-1) 0%, var(--color-topbar-bg-2) 100%); border-bottom: none; z-index: var(--z-topbar); transition: left var(--transition-base); } /* Kenya tricolour rule (black · red · green) under the green header bar */ .syn-topnav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, #000000 0%, #000000 33.33%, var(--color-danger) 33.33%, var(--color-danger) 66.66%, var(--color-primary-500) 66.66%, var(--color-primary-500) 100%); } body.nav-sm .syn-topnav, body.nav-sm .top_nav .nav_menu { left: var(--sidebar-w-collapsed); } .syn-topnav-left { display: flex; align-items: center; gap: var(--space-4); min-width: 0; } .syn-topnav-right { display: flex; align-items: center; gap: var(--space-2); } .syn-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .syn-brand-mark { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .95rem; background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); } .syn-brand-text { min-width: 0; line-height: 1.2; } .syn-app-title { font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--color-topbar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; } @media (max-width: 992px) { .syn-app-title { font-size: var(--text-sm); } } .syn-breadcrumbs { min-width: 0; } .syn-toggle { background: transparent; border: none; color: var(--color-topbar-text); width: 38px; height: 38px; border-radius: var(--radius-md); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .syn-toggle:hover { background: rgba(255,255,255,0.16); color: #fff; } .syn-user-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-topbar-text); text-decoration: none; background: transparent; border: none; cursor: pointer; } .syn-user-btn:hover { background: rgba(255,255,255,0.16); color: #fff; } /* keep the avatar crisp against the green bar */ .syn-topnav .syn-user-avatar { box-shadow: 0 0 0 1px rgba(255,255,255,0.5); } .syn-user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .syn-user-name { font-size: var(--text-sm); font-weight: var(--weight-medium); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .syn-logout-btn { background: none; border: none; color: var(--color-danger); padding: var(--space-2) var(--space-4); width: 100%; text-align: left; cursor: pointer; } .syn-logout-btn:hover { background: var(--color-danger-bg); } /* Lucide icon sizing in chrome (icons render as after lucide.createIcons) */ /* Chrome icons are Font Awesome (svg fallback kept harmless) */ .syn-toggle i, .syn-toggle svg { font-size: 19px; width: auto; height: auto; } .syn-user-btn i, .syn-user-btn svg { font-size: 16px; width: auto; height: auto; } .syn-menu-icon { display: inline-block; width: 18px; text-align: center; } .dropdown-menu svg { width: 16px; height: 16px; vertical-align: -2px; margin-right: 8px; } /* topbar notification dot */ .syn-badge-dot { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--color-danger); color: #fff; font-size: 10px; font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85); /* ring so the red dot reads on the green bar */ } /* In-app notification dropdown: left-aligned, divider between each item */ .syn-notif-menu { min-width: 340px; max-width: 420px; padding: 0; max-height: 72vh; overflow-y: auto; } .syn-notif-menu .syn-notif-header { padding: 10px 16px; font-weight: var(--weight-semibold); color: var(--color-text-primary); text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--color-border-default); } .syn-notif-menu .syn-notif-item { border-bottom: 1px solid var(--color-border-default); } .syn-notif-menu .syn-notif-item > a, .syn-notif-menu .syn-notif-empty > a, .syn-notif-menu .syn-notif-footer > a { display: block; text-align: left; padding: 10px 16px; white-space: normal; line-height: 1.35; border-radius: 0; } .syn-notif-menu .syn-notif-item > a:hover, .syn-notif-menu .syn-notif-footer > a:hover { background: var(--color-hover); } .syn-notif-menu .syn-notif-title { display: block; font-weight: var(--weight-semibold); color: var(--color-text-primary); } .syn-notif-menu .syn-notif-msg { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; } .syn-notif-menu .syn-notif-time { display: block; font-size: 11px; color: var(--color-text-disabled); margin-top: 4px; } .syn-notif-menu .syn-notif-footer { border-top: 1px solid var(--color-border-default); } .syn-notif-menu .syn-notif-footer > a { color: var(--color-primary-700); font-weight: var(--weight-medium); } /* ---- Content + footer -------------------------------------------------- */ .right_col, .syn-content { margin-left: var(--sidebar-w); padding: calc(var(--topbar-h) + var(--space-2)) var(--space-6) var(--space-6); min-height: 100vh; font-size: var(--text-sm); /* override legacy custom.css .right_col{font-size:11px} */ transition: margin-left var(--transition-base); background: var(--color-surface-subtle); } body.nav-sm .right_col, body.nav-sm .syn-content { margin-left: var(--sidebar-w-collapsed); } .syn-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); } .syn-page-title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); margin: 0; } .syn-page-subtitle { color: var(--color-text-secondary); font-size: var(--text-sm); margin-top: 2px; } .syn-page-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-bottom: var(--space-4); } .syn-page-actions:empty { display: none; } /* Canonical page header row: title (+subtitle) left, actions right */ .syn-page-head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); } .syn-page-head-text { min-width: 0; } .syn-page-head-text .syn-page-title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); margin: 0; } .syn-page-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .syn-page-head-actions:empty { display: none; } .syn-page-head-row:has(.syn-page-head-text:empty):has(.syn-page-head-actions:empty) { display: none; margin: 0; } footer.copy, .syn-footer { margin-left: var(--sidebar-w); padding: var(--space-4) var(--space-6); color: var(--color-text-secondary); font-size: var(--text-xs); border-top: 1px solid var(--color-border-default); background: var(--color-surface-default); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); transition: margin-left var(--transition-base); } body.nav-sm footer.copy, body.nav-sm .syn-footer { margin-left: var(--sidebar-w-collapsed); } /* ========================================================================== 5. PANEL / CARD (replaces Gentelella .x_panel) ========================================================================== */ /* syn-panel: card component (used by the rebuilt pages) */ .syn-panel { background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); margin-bottom: var(--space-5); } .syn-panel > .x_title, .syn-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-default); margin: 0; } .syn-panel-head h2, .syn-panel-head h3, .syn-panel > .x_title h2 { font-size: var(--text-base); font-weight: var(--weight-semibold); margin: 0; } .syn-panel-body { padding: var(--space-6); } /* x_panel / x_content: FLAT layout + legacy wrapper — no background, border or radius. Content sits directly on the page; the title becomes a plain page heading. */ .x_panel { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; margin-bottom: var(--space-5); } .x_panel > .x_title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0; margin: 0 0 var(--space-4); border: none; background: transparent; } .x_panel > .x_title h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: 0; } .x_content { padding: 0; background: transparent; border: none; border-radius: 0; } /* Keep .btn buttons rendering correctly inside the (legacy-styled) x_title */ .x_title a.btn { display: inline-flex; } .x_title a.btn:hover { background-color: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); } .card { --bs-card-bg: var(--color-surface-raised); --bs-card-border-color: var(--color-border-default); --bs-card-border-radius: var(--radius-lg); --bs-card-box-shadow: none; box-shadow: none; } .card-header { background: transparent; border-bottom-color: var(--color-border-default); font-weight: var(--weight-semibold); } /* Unify containers: .card / .syn-panel / .x_panel read as one flat card — kill stray utility shadows */ .card.shadow-sm, .card.shadow, .card.shadow-lg { box-shadow: none !important; } /* ========================================================================== 6. BUTTONS (re-theme Bootstrap + add bespoke variants) ========================================================================== */ .btn { --bs-btn-font-weight: var(--weight-medium); --bs-btn-font-size: var(--text-sm); --bs-btn-border-radius: var(--radius-md); --bs-btn-padding-x: var(--space-4); --bs-btn-padding-y: var(--space-2); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); } .btn i, .btn svg { flex-shrink: 0; } .btn-primary { --bs-btn-bg: var(--color-primary-600); /* white text 5.4:1 AA */ --bs-btn-border-color: var(--color-primary-600); --bs-btn-hover-bg: var(--color-primary-700); --bs-btn-hover-border-color: var(--color-primary-700); --bs-btn-active-bg: var(--color-primary-800); --bs-btn-active-border-color: var(--color-primary-800); --bs-btn-disabled-bg: var(--color-primary-300); --bs-btn-disabled-border-color: var(--color-primary-300); } .btn-outline-primary { --bs-btn-color: var(--color-primary-700); --bs-btn-border-color: var(--color-primary-600); --bs-btn-hover-bg: var(--color-primary-600); --bs-btn-hover-border-color: var(--color-primary-600); } .btn-success { --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success); --bs-btn-hover-bg: #136B43; --bs-btn-hover-border-color: #136B43; } .btn-danger { --bs-btn-bg: var(--color-danger); --bs-btn-border-color: var(--color-danger); --bs-btn-hover-bg: #97160D; --bs-btn-hover-border-color: #97160D; } .btn-secondary { --bs-btn-bg: #5A636E; --bs-btn-border-color: #5A636E; --bs-btn-hover-bg: #474f59; --bs-btn-hover-border-color: #474f59; } .btn-light, .btn-default { --bs-btn-bg: var(--color-surface-default); --bs-btn-color: var(--color-text-primary); --bs-btn-border-color: var(--color-border-strong); --bs-btn-hover-bg: var(--color-hover); --bs-btn-hover-border-color: var(--color-border-strong); } /* ghost / subtle button */ .btn-ghost { --bs-btn-bg: transparent; --bs-btn-color: var(--color-text-secondary); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--color-hover); --bs-btn-hover-color: var(--color-text-primary); --bs-btn-hover-border-color: transparent; } /* ========================================================================== 7. FORMS ========================================================================== */ .form-label { font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--color-text-primary); margin-bottom: var(--space-1); } .form-control, .form-select { font-size: var(--text-sm); color: var(--color-text-primary); border-color: var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); min-height: 38px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-control::placeholder { color: var(--color-text-disabled); } .form-control:focus, .form-select:focus { border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(0,140,81,.14); } .form-control:disabled, .form-select:disabled { background: var(--color-surface-raised); color: var(--color-text-disabled); } .form-text, .help-block { color: var(--color-text-secondary); font-size: var(--text-xs); margin-top: var(--space-1); } /* validation */ .form-control.is-invalid, .form-select.is-invalid, .input-validation-error { border-color: var(--color-danger); } .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(180,35,24,.14); } .invalid-feedback, .field-validation-error, .text-danger { color: var(--color-danger); font-size: var(--text-xs); } .field-validation-error::before { content: "\26A0"; margin-right: 4px; } .form-control.is-valid, .form-select.is-valid { border-color: var(--color-success); } /* switch + check */ .form-check-input:checked { background-color: var(--color-primary-600); border-color: var(--color-primary-600); } .form-check-input:focus { border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(0,140,81,.14); } /* required-field legend */ .syn-required-legend { color: var(--color-text-secondary); font-size: var(--text-xs); } .syn-required-legend .required-mark { font-size: var(--text-sm); } /* ---- Form rhythm, grouping & required/optional clarity (lifts all forms) --- */ form .form-group { margin-bottom: var(--space-4); } .form-group > label, .form-group > .control-label, form label.control-label { display: block; font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--color-text-primary); margin-bottom: var(--space-1); } /* Auto asterisk on any group/label marked .required (no per-field markup needed) */ .required > label::after, label.required::after, .form-group.required > label::after { content: " *"; color: var(--color-danger); font-weight: var(--weight-semibold); } .form-text, .help-block, small.form-text { color: var(--color-text-secondary); font-size: var(--text-xs); } /* Section grouping inside a long form */ .form-section { padding-top: var(--space-6); margin-top: var(--space-6); border-top: 1px solid var(--color-border-default); } .form-section:first-of-type, .form-section.first { margin-top: 0; padding-top: 0; border-top: none; } .form-section-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); margin-bottom: var(--space-4); } .form-legend { font-size: var(--text-xs); color: var(--color-text-secondary); } .form-legend::before { content: "*"; color: var(--color-danger); margin-right: 3px; font-weight: var(--weight-semibold); } /* Validation summary → clean alert */ .validation-summary-errors { background: var(--color-danger-bg); border: 1px solid #F3C2C4; color: var(--color-danger); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); margin-bottom: var(--space-4); } .validation-summary-errors ul { margin: 0; padding-left: var(--space-4); } .validation-summary-valid { display: none; } /* ---- Select2 widgets themed to match .form-select (cohesion) ------------- */ .select2-container { width: 100% !important; } .select2-container--default .select2-selection--single { height: 38px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); display: flex; align-items: center; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding-left: var(--space-3); color: var(--color-text-primary); } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--color-text-disabled); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; } .select2-container--default .select2-selection--multiple { min-height: 38px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(0,140,81,.14); } .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--color-primary-50); border: 1px solid var(--color-primary-100); color: var(--color-primary-800); border-radius: var(--radius-sm); padding: 2px var(--space-2); } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--color-primary-700); } .select2-dropdown { border-color: var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--color-primary-600); } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-2); } /* unobtrusive validation: show invalid state on the Select2 widget */ .input-validation-error + .select2 .select2-selection { border-color: var(--color-danger) !important; } /* ---- Sticky form action bar (Save / Cancel) ------------------------------ */ .syn-form-actions { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) 0; margin-top: var(--space-6); border-top: 1px solid var(--color-border-default); background: var(--color-surface-subtle); } .syn-form-actions .syn-actions-left { margin-right: auto; } .syn-form-actions .ajax-loader-next { position: static; width: auto; height: 24px; background: none; opacity: 1; display: none; } /* ---- Multi-step wizard stepper (wizard.js) ---------------------------- */ .syn-stepper { display: flex; list-style: none; margin: 0 0 var(--space-6); padding: 0; counter-reset: step; } .syn-step { flex: 1 1 0; position: relative; text-align: center; padding-top: 46px; min-width: 0; color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; } .syn-step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--color-surface-default); border: 2px solid var(--color-border-strong); color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-semibold); font-size: var(--text-sm); z-index: 1; transition: all var(--transition-fast); } .syn-step::after { content: ''; position: absolute; top: 16px; right: 50%; width: 100%; height: 2px; background: var(--color-border-default); z-index: 0; } .syn-step:first-child::after { display: none; } .syn-step-label { display: block; padding: 0 var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .syn-step.active { color: var(--color-text-primary); } /* Active step: gold accent marker (current position). */ .syn-step.active::before { border-color: var(--color-accent-400); color: var(--color-text-primary); background: var(--color-accent-300); } /* Completed / previous steps: solid green check (progress made). */ .syn-step.completed { color: var(--color-text-primary); } .syn-step.completed::before { content: '\2713'; background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; } /* Connector lines: green for the traveled path, gold leading into the active step. */ .syn-step.completed::after { background: var(--color-primary-500); } .syn-step.active::after { background: var(--color-accent-400); } @media (max-width: 575.98px) { .syn-step-label { display: none; } .syn-step { padding-top: 40px; } } /* ========================================================================== 8. TABLES + DataTables re-skin ========================================================================== */ .table { --bs-table-bg: transparent; /* no default background */ --bs-table-color: var(--color-text-primary); --bs-table-border-color: var(--color-border-default); --bs-table-striped-bg: rgba(15,23,42,0.035); /* zebra stripe */ --bs-table-striped-color: var(--color-text-primary); --bs-table-hover-bg: var(--color-primary-50); font-size: var(--text-table); /* 13px — uniform across all tables */ margin-bottom: 0; } /* Every data table: dark-green header, white text, column dividers, zebra striping */ .table thead th, .table thead td, table.dataTable thead th { background: var(--color-table-head); color: #fff; font-weight: var(--weight-semibold); font-size: var(--text-table); letter-spacing: .01em; padding: 9px 14px; vertical-align: middle; white-space: normal; border-bottom: none; border-color: rgba(255,255,255,0.18); } .table thead th a, .table thead th .text-secondary { color: #fff; } .table thead th + th, table.dataTable thead th + th { border-left: 1px solid rgba(255,255,255,0.16); } /* DataTables sort arrows readable on the green header */ table.dataTable thead .sorting::before, table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after { color: #fff !important; opacity: .65; } .table > tbody > tr > td, .table > tbody > tr > th { vertical-align: middle; border-color: var(--color-border-default); padding: 8px 14px; } .table > tbody > tr:nth-of-type(odd) > * { background-color: var(--bs-table-striped-bg); } .table-hover > tbody > tr:hover > * { background: var(--color-primary-50); } /* Soften .table-bordered to clean horizontal rules (drop the heavy cell grid) */ .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th { border-left-width: 0; border-right-width: 0; } .table-bordered > thead > tr > th { border-bottom: none; } .table .mono, .table .case-no { font-family: var(--font-mono); font-size: var(--text-table); } /* sticky header for tall tables */ .syn-table-sticky thead th { position: sticky; top: 0; z-index: 2; } /* DataTables wrapper */ .dataTables_wrapper { font-size: var(--text-sm); } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); min-height: 34px; } /* Pagination — green theme; covers BS5 (.page-item/.page-link), DataTables, and PagedList (li>a) */ .pagination { display: inline-flex; flex-wrap: wrap; gap: 3px; padding-left: 0; margin: 0; list-style: none; } .page-link, .pagination > li > a, .pagination > li > span { color: var(--color-primary-700); background: var(--color-surface-default); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); padding: 6px 11px; min-width: 34px; text-align: center; line-height: 1.2; text-decoration: none; } .page-link:hover, .pagination > li > a:hover { background: var(--color-primary-50); color: var(--color-primary-800); border-color: var(--color-primary-200); } .page-item.active .page-link, .pagination > .active > a, .pagination > .active > span, .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--color-table-head) !important; border-color: var(--color-table-head) !important; color: #fff !important; } .page-item.disabled .page-link, .pagination > .disabled > a, .pagination > .disabled > span { color: var(--color-text-disabled); background: var(--color-surface-default); cursor: default; } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--radius-sm); } .dataTables_wrapper .dataTables_info { color: var(--color-text-secondary); } /* Standard list pager (_Pager.cshtml): info left, page links right, full width */ .syn-pager { width: 100%; } /* DataTables Buttons (export) */ .dt-buttons .btn, .dt-button { background: var(--color-surface-default) !important; color: var(--color-text-primary) !important; border: 1px solid var(--color-border-strong) !important; border-radius: var(--radius-md) !important; } /* ========================================================================== 9. BADGES + STATUS PILLS ========================================================================== */ .badge { font-weight: var(--weight-semibold); font-size: var(--text-xs); border-radius: var(--radius-pill); padding: .35em .7em; } .status { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-semibold); font-size: var(--text-xs); padding: .3em .7em; border-radius: var(--radius-pill); line-height: 1.4; white-space: nowrap; } .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; } .status-active { background: var(--status-active-bg); color: var(--status-active-text); } .status-pending { background: var(--status-pending-bg); color: var(--status-pending-text); } .status-review, .status-under-review { background: var(--status-review-bg); color: var(--status-review-text); } .status-closed { background: var(--status-closed-bg); color: var(--status-closed-text); } .status-rejected { background: var(--status-rejected-bg); color: var(--status-rejected-text); } .status-at-risk { background: var(--status-at-risk-bg); color: var(--status-at-risk-text); } .status-resettlement { background: var(--status-resettlement-bg); color: var(--status-resettlement-text); } .status-repatriated { background: var(--status-repatriated-bg); color: var(--status-repatriated-text); } /* ========================================================================== 10. ALERTS + TOASTS ========================================================================== */ .alert { border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--text-sm); padding: var(--space-3) var(--space-4); display: flex; gap: var(--space-3); align-items: flex-start; } .alert-success { background: var(--color-success-bg); border-color: #BFE3CF; color: var(--color-success); } .alert-danger { background: var(--color-danger-bg); border-color: #F3C2C4; color: var(--color-danger); } .alert-warning { background: var(--color-warning-bg); border-color: #F5E4A6; color: var(--color-warning); } .alert-info { background: var(--color-info-bg); border-color: #C4DBF6; color: var(--color-info); } .syn-toast-region { position: fixed; top: calc(var(--topbar-h) + var(--space-3)); right: var(--space-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); max-width: 380px; } .syn-toast { background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-left: 4px solid var(--color-info); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-4); display: flex; gap: var(--space-3); align-items: flex-start; animation: syn-toast-in var(--transition-base); } .syn-toast.is-success { border-left-color: var(--color-success); } .syn-toast.is-danger { border-left-color: var(--color-danger); } .syn-toast.is-warning { border-left-color: var(--color-warning); } @keyframes syn-toast-in { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } } /* ========================================================================== 11. BREADCRUMB ========================================================================== */ .breadcrumb, .syn-breadcrumbs .breadcrumb { margin: 0; padding: 0; background: transparent; font-size: var(--text-xs); --bs-breadcrumb-divider: '›'; } .breadcrumb-item { color: var(--color-text-secondary); } .breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-disabled); } .breadcrumb-item.active { color: var(--color-text-primary); font-weight: var(--weight-medium); } .breadcrumb-item a { color: var(--color-text-secondary); text-decoration: none; } .breadcrumb-item a:hover { color: var(--color-primary-700); text-decoration: underline; } /* Breadcrumb sits in its own strip below the top bar, floated to the right. The _BreadCrumbs partial renders a .page-bar with a (redundant) title on the left and the breadcrumb on the right — hide the title, right-align the trail. */ .syn-breadcrumb-strip { margin-bottom: var(--space-2); } .syn-breadcrumb-strip .page-bar { width: 100%; } .syn-breadcrumb-strip .page-title { display: none; } .syn-breadcrumb-strip .page-title-breadcrumb { justify-content: flex-end !important; flex-wrap: wrap; } .syn-breadcrumb-strip .breadcrumb { margin: 0; padding: 0; background: transparent; } .syn-breadcrumb-strip .breadcrumb > li { display: inline-flex; align-items: center; color: var(--color-text-secondary); } .syn-breadcrumb-strip .breadcrumb > li.active { color: var(--color-text-primary); font-weight: var(--weight-medium); } .syn-breadcrumb-strip .breadcrumb a { color: var(--color-text-secondary); text-decoration: none; } .syn-breadcrumb-strip .breadcrumb a:hover { color: var(--color-primary-700); text-decoration: underline; } /* Modern underline tabs (works for BS5 .nav-link and legacy .nav-tabs>li>a) */ .nav-tabs { border-bottom: 1px solid var(--color-border-default); gap: 2px; margin-bottom: var(--space-5); } .nav-tabs .nav-link, .nav-tabs > li > a { border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--color-text-secondary); background: transparent; padding: var(--space-3) var(--space-4); font-weight: var(--weight-medium); margin-bottom: -1px; } .nav-tabs .nav-link:hover, .nav-tabs > li > a:hover { border-color: transparent; border-bottom-color: var(--color-border-strong); color: var(--color-text-primary); } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link, .nav-tabs > li.active > a, .nav-tabs > li > a.active { color: var(--color-primary-700); background: transparent; border: none; border-bottom: 2px solid var(--color-primary-600); } .nav-tabs .nav-link i, .nav-tabs > li > a i { margin-right: var(--space-2); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--color-primary-600); } /* ========================================================================== 12. MODALS + DROPDOWNS ========================================================================== */ .modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .modal-header { border-bottom-color: var(--color-border-default); } .modal-footer { border-top-color: var(--color-border-default); } .modal-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); } .dropdown-menu { --bs-dropdown-border-color: var(--color-border-default); --bs-dropdown-border-radius: var(--radius-md); --bs-dropdown-link-active-bg: var(--color-primary-600); --bs-dropdown-link-hover-bg: var(--color-hover); box-shadow: var(--shadow-lg); font-size: var(--text-sm); padding: var(--space-2); } .dropdown-item { border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); } .dropdown-header { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); } /* ========================================================================== 13. KPI STAT CARDS + DASHBOARD ========================================================================== */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); } .kpi-card { background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .kpi-card-top { display: flex; align-items: center; justify-content: space-between; } .kpi-label { color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); } .kpi-value { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--color-text-primary); line-height: 1.1; font-variant-numeric: tabular-nums; } .kpi-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-50); color: var(--color-primary-700); flex-shrink: 0; } .kpi-icon svg { width: 20px; height: 20px; } .kpi-trend { font-size: var(--text-xs); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; gap: 3px; } .kpi-trend.is-up { color: var(--color-success); } .kpi-trend.is-down { color: var(--color-danger); } .kpi-trend.is-flat { color: var(--color-text-secondary); } /* activity feed */ .syn-feed { list-style: none; margin: 0; padding: 0; } .syn-feed li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-default); } .syn-feed li:last-child { border-bottom: none; } .syn-feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-500); margin-top: 6px; flex-shrink: 0; } .syn-feed-time { color: var(--color-text-secondary); font-size: var(--text-xs); } /* Section heading inside a full-bleed page (dashboards) */ .syn-section-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin: var(--space-5) 0 var(--space-3); } .syn-section-title:first-child { margin-top: 0; } /* Quick-action cards (dashboard "what can I do") */ .syn-quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); } .syn-quick-action { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-text-primary); transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); } .syn-quick-action:hover { border-color: var(--color-primary-300); background: var(--color-primary-50); transform: translateY(-1px); color: var(--color-text-primary); } .syn-qa-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-primary-50); color: var(--color-primary-700); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .syn-qa-icon svg { width: 20px; height: 20px; } .syn-qa-text { min-width: 0; } .syn-qa-title { display: block; font-weight: var(--weight-semibold); font-size: var(--text-sm); } .syn-qa-desc { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); } /* ========================================================================== 14. PROFILE / CASE CARD ========================================================================== */ .case-header { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; } .case-avatar { width: 84px; height: 84px; border-radius: var(--radius-lg); object-fit: cover; background: var(--color-primary-50); color: var(--color-primary-700); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-2xl); font-weight: var(--weight-bold); flex-shrink: 0; } .case-id { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-secondary); cursor: copy; } .case-id:hover { color: var(--color-primary-700); } .case-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3) var(--space-6); } .case-field-label { color: var(--color-text-secondary); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .03em; } .case-field-value { color: var(--color-text-primary); font-size: var(--text-sm); font-weight: var(--weight-medium); } /* ---- Detail (read-only) field views ------------------------------------ * * Turns a label/value `` field-dump into a clean key–value panel * (muted uppercase labels, no zebra, no green header band) so Details pages * read like a record card instead of a data grid. Add `.detail-table` to the * field table; data sub-tables on the same page keep the normal .table look. */ .detail-table { width: 100%; margin-bottom: 0; } .detail-table > tbody > tr { border-bottom: 1px solid var(--color-border-default); } .detail-table > tbody > tr:last-child { border-bottom: 0; } .detail-table > tbody > tr > th { width: 1%; white-space: nowrap; vertical-align: top; padding: 9px 18px 9px 0; font-weight: var(--weight-medium); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-secondary); background: transparent; } .detail-table > tbody > tr > td, .detail-table > tr > td { vertical-align: top; padding: 9px 28px 9px 0; color: var(--color-text-primary); font-size: var(--text-sm); background: transparent !important; /* override .table zebra striping */ } .detail-table > tr { border-bottom: 1px solid var(--color-border-default); } .detail-table > tr:last-child { border-bottom: 0; } .detail-table > tr > th { width: 1%; white-space: nowrap; vertical-align: top; padding: 9px 18px 9px 0; font-weight: var(--weight-medium); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-secondary); background: transparent; } /* Optional small section heading above a detail block */ .detail-section-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary-700); margin: var(--space-2) 0 var(--space-3); } /* ========================================================================== 14b. AUTH — login / forgot-password shared two-panel theme ========================================================================== */ .auth-shell { height: 100vh; overflow: hidden; display: flex; background: var(--color-surface-default); } /* Left brand panel — institutional Kenya green over a refugee-community photo */ .auth-brand { flex: 1 1 48%; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: var(--space-16) var(--space-12); color: #fff; background-image: radial-gradient(1100px 560px at 115% -10%, rgba(217,165,32,.22), transparent 60%), linear-gradient(160deg, rgba(9,64,45,.78) 0%, rgba(6,38,26,.88) 100%), url('/front/img/refugee-camp-livelihood.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } .auth-brand::before, .auth-brand::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.05); } .auth-brand::after { right: -130px; bottom: -130px; width: 380px; height: 380px; } .auth-brand::before { left: -90px; top: -90px; width: 240px; height: 240px; background: rgba(255,255,255,.04); } /* Kenya tricolour accent rule down the inner edge of the panel */ .auth-brand-rule { position: absolute; top: 0; bottom: 0; right: 0; width: 4px; background: linear-gradient(180deg, #000 0 33.33%, var(--color-danger) 33.33% 66.66%, var(--color-primary-500) 66.66% 100%); } .auth-brand-inner { position: relative; z-index: 1; max-width: 32rem; margin-top: -10rem; } .auth-brand-logo { height: 112px; width: auto; margin-bottom: var(--space-4); filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); } .auth-brand-head { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1.18; letter-spacing: -.01em; margin: 0; max-width: 20ch; color: #fff; } .auth-brand-sub { color: rgba(255,255,255,.86); font-size: var(--text-lg); line-height: var(--leading-normal); margin-top: var(--space-4); max-width: 46ch; } .auth-brand-foot { position: absolute; left: var(--space-12); right: var(--space-12); bottom: var(--space-8); z-index: 1; font-size: var(--text-xs); color: rgba(255,255,255,.72); } /* Right form panel */ .auth-form-panel { flex: 1 1 52%; display: flex; align-items: center; justify-content: center; padding: var(--space-10) var(--space-6); height: 100%; overflow-y: auto; background: var(--color-surface-default); } .auth-card { width: 100%; max-width: 408px; animation: auth-card-in .45s ease-out; } @keyframes auth-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .auth-card-logo { display: block; height: 96px; width: auto; margin: 0 auto var(--space-6); filter: drop-shadow(0 2px 6px rgba(0,0,0,.12)); } .auth-mobile-logo { display: none; } .auth-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-1); text-align: center; } .auth-subtitle { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-6); text-align: center; } .auth-submit { width: 100%; padding: var(--space-3); font-size: var(--text-base); font-weight: var(--weight-semibold); border-radius: var(--radius-md); box-shadow: 0 4px 14px rgba(var(--color-primary-700-rgb, 15,98,66), .28); transition: transform .15s ease, box-shadow .15s ease; } .auth-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--color-primary-700-rgb, 15,98,66), .34); } .auth-confirm-icon { width: 76px; height: 76px; margin: 0 auto var(--space-4); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-primary-50); color: var(--color-primary-600); font-size: 34px; } @media (max-width: 860px) { .auth-brand { display: none; } .auth-form-panel { flex-basis: 100%; height: 100%; } .auth-card-logo { height: 76px; } } /* ========================================================================== 15. EMPTY / LOADING STATES ========================================================================== */ .syn-empty { text-align: center; padding: var(--space-12) var(--space-5); color: var(--color-text-secondary); } .syn-empty-icon { width: 56px; height: 56px; color: var(--color-text-disabled); margin: 0 auto var(--space-3); } .syn-empty-icon svg { width: 56px; height: 56px; } .syn-empty-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-1); } .syn-skeleton { background: linear-gradient(90deg, var(--color-surface-sunken) 25%, #e9edf2 37%, var(--color-surface-sunken) 63%); background-size: 400% 100%; animation: syn-shimmer 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes syn-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .syn-spinner { width: 20px; height: 20px; border: 2px solid var(--color-border-strong); border-top-color: var(--color-primary-600); border-radius: 50%; animation: syn-spin .7s linear infinite; display: inline-block; } @keyframes syn-spin { to { transform: rotate(360deg); } } /* ========================================================================== 16. RESPONSIVE — sidebar becomes off-canvas under 992px ========================================================================== */ .syn-mobile-backdrop { display: none; } @media (max-width: 991.98px) { .left_col, .syn-sidebar { transform: translateX(-100%); width: var(--sidebar-w); box-shadow: var(--shadow-lg); } body.nav-md .left_col, body.nav-md .syn-sidebar { transform: none; } .right_col, .syn-content, footer.copy, .syn-footer { margin-left: 0; } .syn-topnav, .top_nav .nav_menu { left: 0; } .syn-app-title { display: none; } .syn-mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: var(--z-backdrop); } body.nav-md .syn-mobile-backdrop { display: block; } } @media (max-width: 575.98px) { .right_col, .syn-content { padding-left: var(--space-4); padding-right: var(--space-4); } .case-fields { grid-template-columns: 1fr; } } /* ========================================================================== 17. MOTION SAFETY (WCAG 2.3.3 / respects user preference) ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* print: hide chrome */ @media print { .left_col, .syn-sidebar, .syn-topnav, .top_nav, footer.copy, .syn-footer, .syn-toggle { display: none !important; } .right_col, .syn-content { margin: 0 !important; padding: 0 !important; } } li.folder, li.folder li { list-style: none; } .btn.btn-primary.project-tab-nav.float-end { --bs-btn-bg: var(--color-primary-600); --bs-btn-border-color: var(--color-primary-600); --bs-btn-hover-bg: var(--color-primary-700); --bs-btn-hover-border-color: var(--color-primary-700); --bs-btn-active-bg: var(--color-primary-800); --bs-btn-active-border-color: var(--color-primary-800); --bs-btn-disabled-bg: var(--color-primary-300); --bs-btn-disabled-border-color: var(--color-primary-300); margin-top: 30px; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; background: var(--color-primary-600) !important; padding-left: var(--space-4); padding-right: var(--space-4); padding-top: var(--space-2); padding-bottom: var(--space-2); color: #ffffff; } .btn.btn-light.project-tab-nav.float-start.nav-link { margin-top: 30px; --bs-btn-bg: white; --bs-btn-border-color: var(--color-primary-600); margin-top: 30px; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; background: var(--color-primary-600) !important; padding-left: var(--space-4); padding-right: var(--space-4); padding-top: var(--space-2); padding-bottom: var(--space-2); } /* ========================================================================== 15. HELP CENTER (Resources + FAQs) ========================================================================== */ .syn-help-hero { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); margin-bottom: var(--space-4); background: linear-gradient(135deg, var(--color-primary-50), var(--color-surface-default)); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); } .syn-help-hero-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-lg); background: var(--color-primary-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; } .syn-faq-search-wrap { margin-bottom: var(--space-4); } .syn-faq-search .input-group-text, .syn-faq-search .form-control { padding-top: var(--space-3); padding-bottom: var(--space-3); } .syn-faq-search .form-control:focus { box-shadow: none; border-color: var(--color-primary-300); } .syn-resource-category { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-primary-700); margin-bottom: var(--space-3); } .syn-resource-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .syn-resource-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-primary); transition: border-color var(--transition-fast), background var(--transition-fast); } .syn-resource-link:hover { border-color: var(--color-primary-300); background: var(--color-primary-50); color: var(--color-text-primary); } .syn-resource-link-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--color-primary-50); color: var(--color-primary-700); display: inline-flex; align-items: center; justify-content: center; } .syn-resource-link-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .syn-resource-link-title { font-weight: var(--weight-semibold); font-size: var(--text-sm); } .syn-resource-link-desc { font-size: var(--text-xs); color: var(--color-text-secondary); } .syn-resource-badge { flex-shrink: 0; } .syn-faq-accordion .accordion-button { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-text-primary); background: transparent; padding: var(--space-3) var(--space-2); } .syn-faq-accordion .accordion-button:not(.collapsed) { color: var(--color-primary-700); background: var(--color-primary-50); box-shadow: none; } .syn-faq-accordion .accordion-button:focus { box-shadow: none; border-color: var(--color-primary-300); } .syn-faq-accordion .accordion-item { border-left: none; border-right: none; border-color: var(--color-border-default); } .syn-faq-accordion .accordion-body { font-size: var(--text-sm); padding: var(--space-2) var(--space-2) var(--space-4); } .form-check-input { border: var(--bs-border-width) solid var(--color-primary-900) !important; }