/* ============================================================ assets/css/style.css — Bank Statement Portal Design system ported element-for-element from school's own assets/css/layout.css + themes.css + app.css (the reference this app is being matched against) — same tokens, same class names (#sidebar, .sb-*, #topbar, .tb-*), same component chrome. Trimmed of school-specific pieces this app has no equivalent for or dependency on (Tom Select/SweetAlert2/Toastr theming, Chart.js wrapper, grade colours, timeline, academic-term pill, app-splash loader, segmented bar, rank list, module-guide) — everything else is a faithful copy. ============================================================ */ /* ── TYPOGRAPHY ─────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ═══════════════════════════════════════════════════════════════ DESIGN TOKENS ═══════════════════════════════════════════════════════════════ */ :root { --sidebar-w: 262px; --sidebar-collapsed-w: 72px; --header-h: 64px; /* Brand / accent — single source of truth every other "primary" token below derives from via var(). Default ("Ocean") when no [data-accent] is set — see the named accent blocks further down, which override these same 4 custom properties. */ --brand-500: #2563eb; --brand-600: #1d4ed8; --brand-700: #1e40af; --brand-500-rgb: 37, 99, 235; --brand-tint: color-mix(in srgb, var(--brand-500) 55%, white); --nav-bg: color-mix(in srgb, var(--brand-700) 62%, #05080f); --nav-surface: #1e293b; --nav-hover: rgba(255,255,255,.06); --nav-active: rgba(var(--brand-500-rgb), .18); --nav-text: rgba(255,255,255,.78); --nav-text-hi: #ffffff; --nav-muted: rgba(255,255,255,.55); --nav-border: rgba(255,255,255,.06); --group-bg: rgba(0,0,0,.15); --ease: .22s ease; --primary: var(--brand-500); --primary-light: color-mix(in srgb, var(--brand-500) 65%, white); --primary-dark: var(--brand-700); --accent: #e67e22; --bs-primary: var(--brand-500); --bs-primary-rgb: var(--brand-500-rgb); --bs-link-color: var(--brand-500); --bs-link-color-rgb: var(--brand-500-rgb); --bs-link-hover-color: var(--brand-600); --bs-link-hover-color-rgb: var(--brand-500-rgb); --bs-form-check-input-checked-bg-color: var(--brand-500); --bs-form-check-input-checked-border-color: var(--brand-500); --bs-form-check-input-indeterminate-bg-color: var(--brand-500); --bs-form-check-input-indeterminate-border-color: var(--brand-500); --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --info: #3b82f6; --bg: #f1f5f9; --card: #ffffff; --card-2: #f8fafc; --text: #0f172a; --muted: #94a3b8; --border: #e2e8f0; --border-light: #f1f5f9; --border-strong: #cbd5e1; --label-color: #475569; --radius: 14px; --shadow-sm: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.05); --shadow-md: 0 10px 28px rgba(15,23,42,.12), 0 3px 8px rgba(15,23,42,.07); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color-scheme: light; } /* ── ACCENT THEMES (topbar Colour Theme picker) ─────────────────── Same 11 named accents, same hex values, as school's own themes.css. */ :root[data-accent="teal"] { --brand-500: #0d9488; --brand-600: #0f766e; --brand-700: #115e59; --brand-500-rgb: 13, 148, 136; } :root[data-accent="steel"] { --brand-500: #475569; --brand-600: #334155; --brand-700: #1e293b; --brand-500-rgb: 71, 85, 105; } :root[data-accent="ocean"] { --brand-500: #2563eb; --brand-600: #1d4ed8; --brand-700: #1e40af; --brand-500-rgb: 37, 99, 235; } :root[data-accent="graphite"] { --brand-500: #334155; --brand-600: #1e293b; --brand-700: #0f172a; --brand-500-rgb: 51, 65, 85; } :root[data-accent="forest"] { --brand-500: #15803d; --brand-600: #166534; --brand-700: #14532d; --brand-500-rgb: 21, 128, 61; } :root[data-accent="sandstone"]{ --brand-500: #a16207; --brand-600: #854d0e; --brand-700: #713f12; --brand-500-rgb: 161, 98, 7; } :root[data-accent="copper"] { --brand-500: #c2410c; --brand-600: #9a3412; --brand-700: #7c2d12; --brand-500-rgb: 194, 65, 12; } :root[data-accent="gold"] { --brand-500: #ca8a04; --brand-600: #a16207; --brand-700: #854d0e; --brand-500-rgb: 202, 138, 4; } :root[data-accent="ruby"] { --brand-500: #be123c; --brand-600: #9f1239; --brand-700: #881337; --brand-500-rgb: 190, 18, 60; } :root[data-accent="amethyst"] { --brand-500: #7c3aed; --brand-600: #6d28d9; --brand-700: #5b21b6; --brand-500-rgb: 124, 58, 237; } :root[data-accent="indigo"] { --brand-500: #4338ca; --brand-600: #3730a3; --brand-700: #312e81; --brand-500-rgb: 67, 56, 202; } /* ── DARK MODE ──────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --bg: #0b1120; --card: #131c2e; --card-2: #1a2540; --text: #e2e8f0; --muted: #64748b; --border: #1e293b; --border-light: #162032; --border-strong: #334155; --label-color: #cbd5e1; --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25); --shadow-md: 0 10px 28px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.3); --bs-body-color: var(--text); --bs-body-bg: var(--bg); --bs-emphasis-color: var(--text); --bs-emphasis-color-rgb: 226, 232, 240; --bs-secondary-color: var(--muted); --bs-secondary-bg: var(--card-2); --bs-tertiary-bg: var(--card-2); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-heading-color: var(--text); --bs-link-color: var(--primary-light); --bs-link-hover-color: var(--primary-light); } [data-theme="dark"] body { background: var(--bg); color: var(--text); } [data-theme="dark"] .card, [data-theme="dark"] .card-header, [data-theme="dark"] .table-card, [data-theme="dark"] .modal-content { background: var(--card); color: var(--text); border-color: var(--border) !important; } [data-theme="dark"] .card-header { background: var(--card) !important; border-bottom-color: var(--border) !important; } [data-theme="dark"] .table-card .table th { background: var(--card-2) !important; color: var(--muted) !important; border-bottom-color: var(--border) !important; } [data-theme="dark"] .table-card .table td { color: var(--text) !important; border-color: var(--border-light); } [data-theme="dark"] .table-card .table tbody tr:hover { background: rgba(var(--brand-500-rgb), .10); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: var(--card-2) !important; border-color: var(--border-strong) !important; color: var(--text) !important; } [data-theme="dark"] .form-control:-webkit-autofill, [data-theme="dark"] .form-control:-webkit-autofill:hover, [data-theme="dark"] .form-control:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--card-2) inset; box-shadow: 0 0 0 1000px var(--card-2) inset; transition: background-color 9999s ease-in-out 0s; caret-color: var(--text); } [data-theme="dark"] .form-label { color: var(--label-color); } [data-theme="dark"] .dropdown-menu { background: var(--card); border-color: var(--border); } [data-theme="dark"] .dropdown-item { color: var(--text); } [data-theme="dark"] .dropdown-item:hover { background: var(--card-2); } [data-theme="dark"] .nav-tabs { border-bottom-color: var(--border); } [data-theme="dark"] .dataTables_wrapper .dataTables_filter input, [data-theme="dark"] .dataTables_wrapper .dataTables_length select { background: var(--card-2); border-color: var(--border); color: var(--text); } [data-theme="dark"] .btn-close { filter: invert(1); } [data-theme="dark"] .text-dark, [data-theme="dark"] .text-black { color: var(--text) !important; } [data-theme="dark"] .text-secondary, [data-theme="dark"] .text-body-secondary { color: var(--muted) !important; } [data-theme="dark"] .bg-light { background: var(--card-2) !important; color: var(--text); } [data-theme="dark"] .bg-white { background: var(--card) !important; color: var(--text); } [data-theme="dark"] .bg-secondary { background: var(--card-2) !important; color: var(--text) !important; } [data-theme="dark"] .table-light { --bs-table-bg: var(--card-2); --bs-table-color: var(--muted); background-color: var(--card-2) !important; color: var(--muted) !important; } [data-theme="dark"] .list-group-item { background: var(--card); border-color: var(--border); color: var(--text); } [data-theme="dark"] .list-group-item-action:hover { background: var(--card-2); } [data-theme="dark"] .dropdown-header { color: var(--muted); } [data-theme="dark"] hr.dropdown-divider { border-color: var(--border); } code, pre, .font-mono { font-family: 'Fira Code', 'Courier New', monospace; } html { overflow-x: clip; } *, *::before, *::after { box-sizing: border-box; } body { background: var(--bg); color: var(--text); margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; transition: background .22s ease, color .22s ease; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #aaa; } /* LOGIN (this app's own login.php, not part of the shell — kept as-is with just token references so it still follows the accent/dark-mode choice, matching the same page's existing behaviour). */ body.login-page { background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 50%, var(--brand-700) 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-wrapper { width: 100%; max-width: 420px; padding: 16px; } .login-card { border-radius: 16px; border: none; } .login-logo { max-height: 70px; max-width: 200px; } .login-icon { width: 64px; height: 64px; background: var(--primary-light); border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; } /* ═══════════════════════════════════════════════════════════════ SIDEBAR SHELL (#sidebar/.sb-* — matches school's layout.css exactly) ═══════════════════════════════════════════════════════════════ */ #sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: var(--sidebar-w); background: linear-gradient(180deg, color-mix(in srgb, var(--brand-700) 55%, black) 0%, var(--nav-bg) 18%, var(--nav-bg) 100%); display: flex; flex-direction: column; z-index: 1050; transition: width var(--ease), transform .3s ease; overflow: hidden; } #sidebar.collapsed { width: var(--sidebar-collapsed-w); } /* Floating diagonal streaks, same recipe used on the restaurant/funeral sidebars: rounded-cap strokes on a tall 300x400 viewBox, mix-blend-mode:overlay so they read as light picking out the gradient rather than a flat translucent wash, repeat-y since this is a tall narrow strip rather than a tiled swatch. */ #sidebar::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Cg stroke='white' stroke-linecap='round' fill='none'%3E%3Cline x1='10' y1='380' x2='58' y2='296' stroke-width='28' stroke-opacity='.9'/%3E%3Cline x1='74' y1='396' x2='98' y2='348' stroke-width='10' stroke-opacity='.55'/%3E%3Cline x1='62' y1='330' x2='152' y2='150' stroke-width='22' stroke-opacity='.75'/%3E%3Cline x1='122' y1='382' x2='148' y2='330' stroke-width='8' stroke-opacity='.5'/%3E%3Cline x1='142' y1='360' x2='208' y2='228' stroke-width='16' stroke-opacity='.6'/%3E%3Cline x1='192' y1='340' x2='248' y2='230' stroke-width='24' stroke-opacity='.7'/%3E%3Cline x1='212' y1='218' x2='232' y2='178' stroke-width='9' stroke-opacity='.5'/%3E%3Cline x1='242' y1='300' x2='292' y2='200' stroke-width='14' stroke-opacity='.55'/%3E%3Cline x1='30' y1='230' x2='50' y2='190' stroke-width='8' stroke-opacity='.4'/%3E%3Cline x1='100' y1='190' x2='118' y2='154' stroke-width='6' stroke-opacity='.35'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat-y; background-size: 200% auto; background-position: -30% 0%; mix-blend-mode: overlay; opacity: .4; animation: login-drift 26s ease-in-out infinite; } @keyframes login-drift { 0%, 100% { background-position: 0% 100%; } 50% { background-position: 14% 84%; } } @media (prefers-reduced-motion: reduce) { #sidebar::before { animation: none; } } .sb-brand { padding: 15px 14px; border-bottom: 1px solid var(--nav-border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; } .sb-brand-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--brand-500); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; flex-shrink: 0; } .sb-brand-name { color: #fff; font-weight: 700; font-size: 13px; line-height: 1.2; } .sb-brand-sub { color: var(--nav-muted); font-size: 10px; } #sidebar.collapsed .sb-brand-name, #sidebar.collapsed .sb-brand-sub { display: none; } #sidebar.collapsed .sb-brand { flex-direction: column; padding: 12px 8px; gap: 8px; } .sb-collapse-btn { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.8); width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--ease); font-size: 11px; flex-shrink: 0; margin-left: auto; } .sb-collapse-btn:hover { background: rgba(255,255,255,.14); color: #fff; } #sidebar.collapsed .sb-collapse-btn i { transform: rotate(180deg); } #sidebar.collapsed .sb-collapse-btn { margin-left: 0; } .sb-nav { flex: 1; padding: 8px 0 12px; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; } .sb-nav::-webkit-scrollbar { width: 3px; } .sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; } .sb-group-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px 8px 13px; background: none; border: none; cursor: pointer; color: var(--nav-muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; font-family: inherit; transition: color .2s; user-select: none; } .sb-group-btn:hover { color: var(--nav-text-hi); } .sb-group-btn .sb-group-icon { width: 18px; height: 18px; border-radius: 5px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } .sb-group-btn .sb-chevron { margin-left: auto; font-size: 10px; transition: transform .22s cubic-bezier(.4,0,.2,1); color: var(--nav-muted); } .sb-group-btn[aria-expanded="true"] .sb-chevron { transform: rotate(90deg); } .sb-group-btn[aria-expanded="true"] { color: rgba(255,255,255,.8) !important; background: rgba(255,255,255,.05); border-radius: 7px; margin: 0 6px; padding-left: 7px; } #sidebar.collapsed .sb-group-btn .sb-group-icon, #sidebar.collapsed .sb-group-btn { justify-content: center; } #sidebar.collapsed .sb-group-label, #sidebar.collapsed .sb-group-btn .sb-chevron { display: none; } #sidebar.collapsed .sb-group-items { display: none; } .sb-group-items { background: rgba(0,0,0,.12); border-left: 2px solid rgba(255,255,255,.08); margin: 0 6px 2px 18px; border-radius: 0 0 6px 6px; overflow: hidden; } .sb-item { display: flex; align-items: center; gap: 9px; padding: 7px 12px; color: var(--nav-text); text-decoration: none; font-size: 13px; font-weight: 600; border-radius: 7px; margin: 1px 6px; transition: background .15s, color .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-item i { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; opacity: .8; } .sb-item:hover { background: var(--nav-hover); color: var(--nav-text-hi); } .sb-item:hover i { opacity: 1; } .sb-item.active { background: linear-gradient(135deg, rgba(var(--brand-500-rgb),.4), rgba(var(--brand-500-rgb),.18)); color: var(--brand-tint); font-weight: 600; box-shadow: 0 8px 20px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.4), 0 2px 10px rgba(var(--brand-500-rgb),.25), inset 0 1px 0 rgba(255,255,255,.25); transform: translateY(-1px); } .sb-item.active i { opacity: 1; color: var(--brand-tint); } .sb-group-items .sb-item { margin: 1px 4px; padding: 6px 10px; font-size: 12.5px; border-radius: 6px; } .sb-standalone { padding: 0 6px; margin-bottom: 1px; } #sidebar.collapsed .sb-item-text { display: none; } #sidebar.collapsed .sb-item { justify-content: center; margin: 1px 10px; } .sb-badge { margin-left: auto; background: var(--brand-500); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; flex-shrink: 0; } #sidebar.collapsed .sb-badge { display: none; } .sb-divider { height: 1px; background: var(--nav-border); margin: 6px 14px; } .sb-footer { border-top: 1px solid var(--nav-border); padding: 11px 13px; flex-shrink: 0; } .sb-user { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-bottom: 6px; } .sb-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .sb-user-name { color: #fff; font-size: 12.5px; font-weight: 600; } .sb-user-role { color: var(--nav-muted); font-size: 10.5px; text-transform: capitalize; } .sb-logout { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.35); text-decoration: none; font-size: 12px; transition: color .2s; } .sb-logout:hover { color: rgba(255,255,255,.7); } #sidebar.collapsed .sb-user-name, #sidebar.collapsed .sb-user-role, #sidebar.collapsed .sb-logout span { display: none; } #sidebar.collapsed .sb-footer { display: flex; flex-direction: column; align-items: center; } /* ── TOPBAR ─────────────────────────────────────────────────────── */ #topbar { position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--header-h); background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-600) 55%, var(--brand-500) 100%); border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; padding: 0 20px; gap: 12px; z-index: 1040; box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.08); transition: left var(--ease); } #sidebar.collapsed ~ #topbar, body.sb-collapsed #topbar { left: var(--sidebar-collapsed-w); } .topbar-page-title { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-icon-btn { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.8); width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--ease); font-size: 14px; text-decoration: none; position: relative; } .tb-icon-btn:hover { background: rgba(255,255,255,.14); color: #fff; } .tb-user-pill { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 40px; height: 34px; padding: 0 12px 0 4px; color: rgba(255,255,255,.9); text-decoration: none; cursor: pointer; transition: all var(--ease); } .tb-user-pill:hover { background: rgba(255,255,255,.13); color: #fff; } /* ── TB-ROLE-BADGE — small role pill inside .tb-user-pill ────────── Not part of school's own topbar (its user pill has no role badge at all — just avatar+name), added here per the user's own reference screenshot. Colour keyed by role_slug. */ .tb-role-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 20px; color: #fff; white-space: nowrap; } .tb-role-badge.role-superadmin { background: #dc2626; } .tb-role-badge.role-branch_manager{ background: #2563eb; } .tb-role-badge.role-teller { background: #475569; } .tb-date-pill { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 40px; height: 34px; padding: 0 14px; color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600; white-space: nowrap; } .tb-date-pill i { font-size: 13px; opacity: .75; } /* ── MAIN ───────────────────────────────────────────────────────── */ #main { margin-left: var(--sidebar-w); margin-top: var(--header-h); padding: 22px; min-height: calc(100vh - var(--header-h)); background: var(--bg); transition: margin-left var(--ease); } #sidebar.collapsed ~ #main, body.sb-collapsed #main { margin-left: var(--sidebar-collapsed-w); } /* ── MOBILE ─────────────────────────────────────────────────────── */ .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1039; } .mobile-overlay.show { display: block; } @media (max-width: 768px) { #sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; } #sidebar.open { transform: none; } #topbar, #main { margin-left: 0 !important; left: 0 !important; } .sb-collapse-btn { display: none; } #main { padding: 14px; } #topbar { padding: 0 12px; gap: 8px; } .topbar-page-title { font-size: 14px; } } /* ═══════════════════════════════════════════════════════════════ COLOUR THEME PICKER (topbar popover) ═══════════════════════════════════════════════════════════════ */ .accent-picker { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200; background: var(--card); border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 16px; width: 268px; display: none; } .accent-picker.show { display: block; } .accent-picker-title { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .accent-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; } .accent-swatch-btn { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; } .accent-swatch-dot { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .12s ease, border-color .12s ease; } .accent-swatch-btn:hover .accent-swatch-dot { transform: scale(1.08); } .accent-swatch-btn[aria-pressed="true"] .accent-swatch-dot { border-color: var(--text); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--text); } .accent-swatch-btn[aria-pressed="true"] .accent-swatch-dot::after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; } .accent-swatch-label { font-size: 11px; color: var(--muted); } /* ═══════════════════════════════════════════════════════════════ CARDS / TABLES / BADGES / FORMS / BUTTONS (app.css, ported) ═══════════════════════════════════════════════════════════════ */ .card { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm); } .card-header { background: var(--card) !important; border-bottom: 1px solid var(--border) !important; border-radius: var(--radius) var(--radius) 0 0 !important; padding: 14px 20px !important; font-weight: 600; font-size: 14px; } .table-card { overflow-x: auto; } /* Sticky table header for a table inside its own bounded, scrollable box (max-height + overflow:auto on the wrapper — see credit-import-mapping.php and includes/credit_subjects_view.php) — position:sticky on each itself (whole- sticky is flaky in some browsers), each needs its own explicit background since a sticky cell has content scrolling underneath it. Deliberately top:0-relative-to-the-wrapper, NOT the page: a table wrapped in anything with overflow-x set (Bootstrap's own .table-responsive included) has its overflow-y silently computed to 'auto' too per the CSS overflow spec, which makes THAT wrapper — not the viewport — the nearest scrolling ancestor sticky positions against; without an explicit bounded height it never actually scrolls, so the header just scrolls away with the page instead of sticking. Opt in with class="dt-sticky-thead-local" on the , inside a wrapper that sets both max-height and overflow (not .table-responsive alone). */ .dt-sticky-thead-local th { position: sticky; top: 0; z-index: 5; background: var(--card-2); } .dataTables_wrapper { padding: 0 16px; } .dataTables_wrapper > .row { margin-left: 0; margin-right: 0; } .table-card .table th { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); font-size: 10.5px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .5px; border-bottom: none !important; white-space: nowrap; padding: 9px 14px; } .table-card .table th a, .table-card .table th i, .table-card .table th .dt-filter-icon { color: rgba(255,255,255,.85); } .table-card .table th .dt-filter-icon:hover, .table-card .table th .dt-filter-icon:hover i { color: #fff; } .table-card .table th .dt-filter-icon.dt-filter-active, .table-card .table th .dt-filter-icon.dt-filter-active i { color: #ff5252 !important; font-size: 13px; } .table-card .table th.sorting:hover, .table-card .table th.sorting_asc, .table-card .table th.sorting_desc { color: #fff; } .table-card .table td { vertical-align: middle; font-size: 12.5px; padding: 8px 14px; border-color: #f0f4f8; } .table-card .table tbody tr:hover { background: rgba(var(--brand-500-rgb),.06); } .table-card .table tbody tr.row-selected, .table-card .table tbody tr.row-selected:hover, .table-card .table tbody tr.row-selected:nth-child(even):not(:hover) > * { background-color: rgba(var(--brand-500-rgb),.12) !important; } .table-card .table tbody tr:nth-child(even):not(:hover) > * { background-color: #fafbfc; } [data-theme="dark"] .table-card .table tbody tr:nth-child(even):not(:hover) > * { background-color: rgba(255,255,255,.025); } .table-card .table th .form-check-input { background-color: rgba(255,255,255,.15); border-color: rgba(255,255,255,.75); } .badge-active { background: #d1fae5 !important; color: #065f46 !important; } .badge-inactive { background: #fee2e2 !important; color: #991b1b !important; } .badge-pending { background: #fef9c3 !important; color: #713f12 !important; } [data-theme="dark"] .badge-active { background: rgba(16,185,129,.15) !important; color: #6ee7b7 !important; } [data-theme="dark"] .badge-inactive { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; } [data-theme="dark"] .badge-pending { background: rgba(245,158,11,.15) !important; color: #fcd34d !important; } .form-control, .form-select { background: var(--card); border-radius: 6px; border: 1px solid var(--border-strong); color: var(--text); font-size: 14px; padding: 9px 12px; transition: border-color .2s, box-shadow .2s; } .form-control:focus, .form-select:focus { background: var(--card); border-color: var(--primary); color: var(--text); box-shadow: 0 0 0 3px rgba(var(--brand-500-rgb),.15); outline: none; } .form-control::placeholder { color: var(--muted); } .form-check-input:checked { background-color: var(--brand-500) !important; border-color: var(--brand-500) !important; } .form-check-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(var(--brand-500-rgb),.2); } [data-theme="dark"] .form-check-input { background-color: var(--card-2); border-color: rgba(255,255,255,.35); } .form-label { font-size: 13px; font-weight: 600; color: var(--label-color); margin-bottom: 5px; } .input-group-text { background: var(--card-2); border: 1px solid var(--border-strong); color: var(--muted); font-size: 14px; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: var(--card-2); } [data-theme="dark"] .input-group-text { background: var(--card); border-color: var(--border-strong); } .btn { border-radius: 6px; font-size: 13.7px; font-weight: 500; padding: 8px 16px; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; } .btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: 0 2px 8px rgba(var(--brand-500-rgb),.28); transition: all .2s ease; } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 6px 16px rgba(var(--brand-500-rgb),.4); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); background: transparent; } .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } .btn-primary:disabled, .btn-primary.disabled { background: var(--primary); border-color: var(--primary); opacity: .55; } .btn-sm { padding: 5px 12px; font-size: 12.8px; border-radius: 6px; } .btn-lg { padding: 11px 22px; font-size: 15.2px; border-radius: 8px; } [data-theme="dark"] .btn-outline-secondary { color: var(--muted); border-color: var(--border); } [data-theme="dark"] .btn-outline-secondary:hover { background: var(--card-2); color: var(--text); border-color: var(--border); } .avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; background: var(--primary); color: #fff; } .avatar-lg { width: 56px; height: 56px; font-size: 20px; } .avatar-sm { width: 28px; height: 28px; font-size: 11px; } .alert { border: 1px solid; border-radius: 10px; padding: 14px 16px; font-size: 13.5px; } [data-theme="dark"] .alert-info { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.25); color: #93c5fd; } [data-theme="dark"] .alert-success { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); color: #6ee7b7; } [data-theme="dark"] .alert-warning { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25); color: #fcd34d; } [data-theme="dark"] .alert-danger { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.25); color: #fca5a5; } /* ── PAGE HEADER ────────────────────────────────────────────────── */ .page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; } .page-title { display: inline-flex; align-items: center; gap: 8px; padding: 7px 20px; border-radius: 50rem; background: var(--primary-dark); color: #fff; box-shadow: 0 2px 8px rgba(var(--brand-500-rgb),.25); border-left: 4px solid #f2a900; font-size: 1.05rem; font-weight: 700; letter-spacing: .3px; margin: 0; } .page-subtitle { font-size: .8rem; color: var(--muted); margin: 6px 0 0 4px; } .breadcrumb { font-size: .78rem; margin: 0; } .breadcrumb-item a { color: var(--muted); text-decoration: none; } .breadcrumb-item a:hover { color: var(--primary); } .breadcrumb-item.active { color: var(--text); } .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; } /* ── KPI CARD (dashboard stat tiles) — Share's .sm-stat-flat ────── Entrance is staggered via an inline `--d` delay custom property set per-card in markup (style="--d:.05s"), same trick Share's voting_counter.php uses for its cascading card rise-in. */ .kpi-card { background: var(--card); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 18px 20px; border: 1px solid var(--border); position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; height: 100%; display: grid; grid-template-columns: 42px 1fr; grid-template-areas: "icon value" "icon label" "icon sub"; column-gap: 14px; align-items: center; animation: fadeUpIn .4s ease both; animation-delay: var(--d, 0s); } .kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .kpi-icon { grid-area: icon; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; align-self: center; transition: transform .2s ease; } .kpi-card:hover .kpi-icon { transform: scale(1.08); } .kpi-icon.blue, .kpi-icon.primary { background: #dbeafe; color: var(--primary); } .kpi-icon.green, .kpi-icon.success { background: #d1fae5; color: #059669; } .kpi-icon.amber, .kpi-icon.warning { background: #fef9c3; color: #d97706; } .kpi-icon.red, .kpi-icon.danger { background: #fee2e2; color: #dc2626; } .kpi-icon.gold { background: rgba(var(--brand-500-rgb),.12); color: #ca8a04; } .kpi-icon.purple { background: #ede9fe; color: #7c3aed; } .kpi-icon.indigo { background: #e0e7ff; color: #4338ca; } .kpi-icon.cyan { background: #cffafe; color: #0891b2; } .kpi-icon.teal { background: #ccfbf1; color: #0d9488; } [data-theme="dark"] .kpi-icon.blue, [data-theme="dark"] .kpi-icon.primary { background: rgba(var(--brand-500-rgb),.15); } [data-theme="dark"] .kpi-icon.green, [data-theme="dark"] .kpi-icon.success { background: rgba(16,185,129,.15); } [data-theme="dark"] .kpi-icon.amber, [data-theme="dark"] .kpi-icon.warning { background: rgba(245,158,11,.15); } [data-theme="dark"] .kpi-icon.red, [data-theme="dark"] .kpi-icon.danger { background: rgba(239,68,68,.15); } [data-theme="dark"] .kpi-icon.gold { background: rgba(202,138,4,.15); } [data-theme="dark"] .kpi-icon.purple { background: rgba(124,58,237,.15); } [data-theme="dark"] .kpi-icon.indigo { background: rgba(67,56,202,.15); } [data-theme="dark"] .kpi-icon.cyan { background: rgba(8,145,178,.15); } [data-theme="dark"] .kpi-icon.teal { background: rgba(13,148,136,.15); } .kpi-value { grid-area: value; font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.15; word-break: break-word; } .kpi-label { grid-area: label; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 4px; } .kpi-sub { grid-area: sub; font-size: .72rem; color: var(--muted); margin-top: 2px; } /* Smaller variant for a dashboard's single hero KPI row (dashboard.php) — same component, tighter type/padding so 4 cards read as one clean strip instead of a wall of big numbers. */ .kpi-card.kpi-compact { padding: 14px 16px; grid-template-columns: 36px 1fr; column-gap: 12px; } .kpi-compact .kpi-icon { width: 36px; height: 36px; font-size: .95rem; } .kpi-compact .kpi-value { font-size: 16px; } .kpi-compact .kpi-label { font-size: 9.5px; } /* Subtle color-tinted background (money cards) vs plain white (count cards) — a quick visual cue for "this one's an amount" without another icon or label. */ .kpi-card.kpi-tint-indigo { background: linear-gradient(160deg, #eef2ff 0%, var(--card) 65%); } .kpi-card.kpi-tint-red { background: linear-gradient(160deg, #fef2f2 0%, var(--card) 65%); } [data-theme="dark"] .kpi-card.kpi-tint-indigo { background: linear-gradient(160deg, rgba(67,56,202,.14) 0%, var(--card) 65%); } [data-theme="dark"] .kpi-card.kpi-tint-red { background: linear-gradient(160deg, rgba(239,68,68,.14) 0%, var(--card) 65%); } /* ── DASHBOARD MINI TABLES (Upcoming Payments / Top Defaulters) ────── Compact, accent-colored variant of the default Bootstrap table — the plain default size read too heavy for a dashboard summary widget. */ .dash-mini-table { font-size: 13px; } .dash-mini-table thead th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom-width: 1px; padding-top: 8px; padding-bottom: 8px; } .dash-mini-table td { padding-top: 9px; padding-bottom: 9px; } .dash-mini-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .dash-mini-avatar.consumer { background: #dbeafe; color: var(--primary); } .dash-mini-avatar.business { background: #ccfbf1; color: #0d9488; } [data-theme="dark"] .dash-mini-avatar.consumer { background: rgba(var(--brand-500-rgb),.18); } [data-theme="dark"] .dash-mini-avatar.business { background: rgba(13,148,136,.18); } /* ── FILE ACTIVITY STRIP (dashboard.php) — secondary, subordinate to the hero KPI row: small number+label pairs with thin dividers, no icon chips, so it visually reads as supporting detail not a headline. ──── */ .stat-strip { display: flex; flex-wrap: wrap; gap: 0; } .stat-strip-item { flex: 1 1 120px; padding: 4px 18px; border-left: 1px solid var(--border); } .stat-strip-item:first-child { border-left: none; padding-left: 0; } .stat-strip-value { font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.2; } .stat-strip-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 2px; } @media (max-width: 767px) { .stat-strip-item { border-left: none; border-top: 1px solid var(--border); padding: 10px 0 0; } .stat-strip-item:first-child { border-top: none; padding-top: 0; } } /* ── ENTRANCE ANIMATIONS ────────────────────────────────────────── Used by .kpi-card, .cs-card and the wizard's .step-panel — one shared keyframe set instead of a bespoke one per component. */ @keyframes fadeUpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .kpi-card, .cs-card, .step-panel { animation: none !important; } } /* ── DASHBOARD BANNER ───────────────────────────────────────────── */ .dash-banner { position: relative; overflow: hidden; border-radius: 14px; padding: 26px 32px; color: var(--primary-dark); background: color-mix(in srgb, var(--brand-500) 9%, var(--card)); border: 1px solid rgba(var(--brand-500-rgb), .16); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .dash-banner::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(var(--brand-500-rgb),.12) 1.4px, transparent 1.4px); background-size: 22px 22px; pointer-events: none; } .dash-banner > * { position: relative; z-index: 1; } .dash-banner-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(var(--brand-500-rgb),.14); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; } .dash-banner h1 { font-size: 1.3rem; font-weight: 800; margin: 0; color: var(--primary-dark); } .dash-banner p { font-size: .82rem; margin: 3px 0 0; color: color-mix(in srgb, var(--primary-dark) 65%, var(--muted)); } [data-theme="dark"] .dash-banner { background: color-mix(in srgb, var(--brand-500) 14%, var(--bg)); border-color: rgba(var(--brand-500-rgb), .28); } [data-theme="dark"] .dash-banner h1 { color: var(--primary-light); } [data-theme="dark"] .dash-banner p { color: color-mix(in srgb, var(--primary-light) 55%, var(--muted)); } [data-theme="dark"] .dash-banner-icon { color: var(--primary-light); background: rgba(var(--brand-500-rgb),.2); } /* ── MODALS ─────────────────────────────────────────────────────── */ .modal-content { border-radius: 0 !important; border: 0; box-shadow: 0 24px 64px rgba(0,0,0,.22); max-height: calc(100vh - 4rem); overflow: hidden; display: flex; flex-direction: column; } .modal-header { padding: 20px 28px 12px; border-bottom: 2px solid rgba(var(--brand-500-rgb), .3); flex-shrink: 0; } .modal-body { padding: 16px 28px; overflow-y: auto; min-height: 0; scrollbar-gutter: stable; } .modal { scrollbar-gutter: stable; } .modal-footer { padding: 14px 28px 20px; border-top: 2px solid rgba(var(--brand-500-rgb), .3); flex-shrink: 0; } .modal-title { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 50rem; background: var(--primary-dark); color: #fff !important; box-shadow: 0 2px 8px rgba(var(--brand-500-rgb),.25); border-left: 4px solid #f2a900; font-size: .95rem; font-weight: 700; letter-spacing: .3px; } .modal-dialog { display: block !important; align-items: unset !important; min-height: unset !important; height: auto !important; } @media (min-width: 576px) { .modal-dialog { width: 80vw !important; max-width: 1400px !important; margin: 2rem auto !important; } .modal-dialog.modal-sm { width: 460px !important; max-width: 460px !important; } .modal-dialog.modal-lg { width: 900px !important; max-width: 900px !important; } /* Genuinely edge-to-edge, not just "extra wide" — the blanket rule above (width:80vw/max-width:1400px/margin:2rem, all !important) otherwise beats Bootstrap's own .modal-fullscreen sizing, same as it already carves out .modal-sm/.modal-lg above. */ .modal-dialog.modal-fullscreen { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; margin: 0 !important; } } .modal-fullscreen .modal-content { max-height: 100vh; border-radius: 0; } /* ── NAV TABS / PILLS ───────────────────────────────────────────── */ .nav-tabs { border-bottom: 2px solid var(--border); } .nav-tabs .nav-link { color: var(--muted); border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: 13.5px; font-weight: 500; padding: 10px 16px; transition: color .2s; } .nav-tabs .nav-link:hover { color: var(--primary); } .nav-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; font-weight: 600; } /* Pill tab bar (e.g. Bio Data's All/Active-Owing/Completed) — ghost/outline when inactive so the row doesn't read as a wall of colour, gradient fill + shadow only on the active pill. Bootstrap bakes a literal blue into --bs-nav-pills-link-active-bg at build time, so this needs its own explicit override rather than following --bs-primary automatically. */ .nav-pills .nav-link { border-radius: 50rem; padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--card-2); border: 1px solid var(--border); transition: all .15s ease; } .nav-pills .nav-link:hover:not(.active) { background: rgba(var(--brand-500-rgb), .08); color: var(--primary); border-color: var(--primary); } .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff; border-color: var(--primary); box-shadow: 0 2px 8px rgba(var(--brand-500-rgb), .3); } .nav-pills .nav-link.disabled { background: var(--card-2); color: var(--muted); opacity: .5; border-color: var(--border); } /* ── DATATABLES ─────────────────────────────────────────────────── */ .dataTables_wrapper .dataTables_filter input { border-radius: 50rem; border: 1.5px solid var(--border); padding: 8px 16px 8px 38px; font-size: 13px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='6.5' r='5'/%3E%3Cline x1='10.2' y1='10.2' x2='14.5' y2='14.5'/%3E%3C/svg%3E") no-repeat 14px center; } .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--brand-500-rgb),.15); outline: none; } .dataTables_wrapper .dataTables_length select { border-radius: 8px; border: 1.5px solid var(--border); padding: 4px 8px; } .dataTables_wrapper .dataTables_paginate .page-link { color: var(--text); background: var(--card); border-color: var(--border); border-radius: 6px; font-size: 12px; font-weight: 500; padding: 5px 12px; transition: all .15s ease; } .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important; color: #fff !important; border-color: var(--primary) !important; box-shadow: 0 2px 8px rgba(var(--brand-500-rgb),.35); } .dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover { background: rgba(var(--brand-500-rgb),.08) !important; color: var(--primary) !important; border-color: var(--primary) !important; } .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { color: var(--muted); background: var(--card-2); border-color: var(--border); } .dataTables_wrapper .dataTables_paginate .paginate_button.previous .page-link, .dataTables_wrapper .dataTables_paginate .paginate_button.next .page-link { border-radius: 20px; padding: 5px 16px; font-weight: 600; } .dt-checkbox-col { width: 34px; text-align: center; } table.dataTable td.dt-checkbox-col { cursor: default; } /* ── ROW-SELECT ACTION TOOLBAR ─────────────────────────────────── */ .dt-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .dt-toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dt-selected-count { font-size: .82rem; color: var(--muted); } .dt-selected-count.has-selection { color: var(--primary); font-weight: 600; } .dt-search { max-width: 240px; } .dt-action-btn { border-radius: 20px !important; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .03em; padding: 6px 16px; box-shadow: 0 2px 6px rgba(0,0,0,.1); transition: all .2s ease; border: 1px solid var(--border); background: var(--card); color: var(--text); } .dt-action-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); background: var(--card-2); } .dt-action-btn-primary { background: transparent; border-color: var(--primary); color: var(--primary); } .dt-action-btn-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; } .dt-action-btn-success { border-color: #16a34a; color: #16a34a; } .dt-action-btn-warning { border-color: #d97706; color: #d97706; } .dt-action-btn-danger { border-color: #dc2626; color: #dc2626; } .dt-filter-icon { cursor: pointer; color: #b0b8c1; font-size: 11px; margin-left: 4px; vertical-align: middle; } .dt-filter-icon:hover { color: var(--primary); } .dt-filter-icon.dt-filter-active, .dt-filter-icon.dt-filter-active i { color: #d32f2f !important; font-size: 13px; } .dt-filter-popover { position: absolute; z-index: 2000; width: 260px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 10px; font-size: 13px; } .dtfp-header { font-weight: 700; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .dtfp-search { margin-bottom: 8px; } .dtfp-item { display: flex; align-items: center; gap: 8px; padding: 4px 2px; margin: 0; font-weight: 400; cursor: pointer; } .dtfp-selectall { border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 4px; font-weight: 600; } .dtfp-list { max-height: 220px; overflow-y: auto; } .dtfp-footer { display: flex; gap: 8px; margin-top: 10px; } .dtfp-footer .btn { flex: 1; } /* ── MODE-CHOICE — reusable two-option radio card ─────────────────