/* ============================================================================ EduzPortal — custom-admin.css One global stylesheet that turns plain Bootstrap markup into a premium, modern SaaS CRM dashboard. Light + dark themes, reusable components, no inline styles required in the pages. Drop this in and the app "just looks premium". ============================================================================ */ /* ---------- Design tokens — Material Design 3, seeded from the brand indigo ---------- The component vocabulary below (buttons, cards, tabs, nav, fields) follows M3: tonal containers instead of tints, on-colors paired with every fill, flat surfaces with tonal elevation, pill buttons, 16px cards, 28px dialogs. Type stays Plus Jakarta Sans by the user's standing instruction — M3 permits a brand typeface in place of Roboto. */ :root { /* SNEATER design language (from the user's claude.ai/design mock): Manrope + Spline Sans Mono, indigo #4F46E5 primary, navy #0C1322 sidebar, neutral grey plane, white 14px cards. */ --brand: #4F46E5; --on-brand: #ffffff; --brand-600: #4338CA; --brand-700: #3730A3; --brand-container: #EEF2FF; --on-brand-container: #4F46E5; --brand-soft: #EEF2FF; --brand-glow: rgba(79, 70, 229, .18); --ok: #0E9F6E; --warn: #F59E0B; --danger: #DC2626; --info: #0EA5E9; --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #FAFBFC; --sidebar: #0f1f47; --sidebar-2: #17305f; --sidebar-text: #8FA0B5; --sidebar-active: #FFFFFF; --text: #111827; --heading: #0C1322; --text-muted: #6B7280; --border: #E7E9EE; --ink: #0C1322; --inverse-surface: #0C1322; --on-inverse: #F1F5F9; --radius-xs: 8px; --radius-sm: 10px; --radius: 14px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04); --shadow: 0 4px 10px -2px rgba(16, 24, 40, .08); --shadow-lg: 0 12px 28px -6px rgba(16, 24, 40, .16); --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.5rem; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sidebar-w: 242px; --topbar-h: 62px; --font: "Manrope", system-ui, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, monospace; --glass-1: #FFFFFF; --glass-2: #FAFBFC; --glass-solid: rgba(255, 255, 255, .92); } [data-theme="dark"] { --bg: #0A0F1A; --surface: #101827; --surface-2: #16203304; /* replaced below */ --surface-2: #172033; --sidebar: #080D16; --sidebar-2: #101827; --sidebar-text: #8FA0B5; --sidebar-active: #FFFFFF; --brand: #6366F1; --on-brand: #ffffff; --brand-600: #818CF8; --brand-700: #A5B4FC; --brand-container: rgba(99, 102, 241, .18); --on-brand-container: #C7D2FE; --brand-soft: rgba(99, 102, 241, .16); --brand-glow: rgba(99, 102, 241, .16); --text: #E5E9F0; --heading: #F1F5F9; --text-muted: #94A3B8; --border: rgba(148, 163, 184, .16); --ink: #101827; --inverse-surface: #E5E9F0; --on-inverse: #111827; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow: 0 4px 10px -2px rgba(0, 0, 0, .5); --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, .6); --glass-1: #101827; --glass-2: #0D1420; --glass-solid: rgba(16, 24, 39, .92); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-gutter: stable; } body { margin: 0; font-family: var(--font); background: radial-gradient(circle at top left, rgba(79, 70, 229, .12), transparent 32%), radial-gradient(circle at bottom right, rgba(6, 182, 212, .10), transparent 28%), var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100vh; } [data-theme="dark"] body { background-image: radial-gradient(circle at top left, rgba(99, 102, 241, .16), transparent 30%), radial-gradient(circle at bottom right, rgba(6, 182, 212, .12), transparent 35%); } [data-theme="dark"] .content, [data-theme="dark"] .card, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .toast-msg, [data-theme="dark"] .noti-panel, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .table, [data-theme="dark"] table.data { color: var(--text); } /* Bootstrap's own --bs-dropdown-bg stays white regardless of data-theme, so every dropdown (Settings menu, table row actions, …) rendered pale text on a white panel in dark mode. Give it the app's surface explicitly. */ [data-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: rgba(255, 255, 255, .04); border-color: var(--border); color: var(--text); } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] .form-select::placeholder { color: var(--text-muted); } [data-theme="dark"] .table thead th, [data-theme="dark"] table.data thead th { color: var(--text-muted); background: rgba(255, 255, 255, .04); } [data-theme="dark"] .table td, [data-theme="dark"] .table th, [data-theme="dark"] table.data td, [data-theme="dark"] table.data th { color: var(--text); border-color: var(--border); } [data-theme="dark"] .table tbody tr:hover, [data-theme="dark"] table.data tbody tr:hover { background: rgba(99, 102, 241, .16); } /* ---------- Scrollbar polish ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(79, 70, 229, 0.45), rgba(99, 102, 241, 0.72)); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(79, 70, 229, 0.6), rgba(99, 102, 241, 0.85)); } * { scrollbar-width: thin; scrollbar-color: rgba(99, 102, 241, 0.7) transparent; } a { text-decoration: none; color: var(--brand); } /* ============================================================================ Layout: sidebar + topbar + content ============================================================================ */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); background: var(--surface); color: var(--text); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 1030; transition: transform .25s ease; border-right: 1px solid var(--border); } .sidebar__brand { height: auto; display: flex; align-items: center; gap: 12px; padding: 18px 20px; color: var(--text); font-weight: 800; font-size: var(--fs-lg); letter-spacing: .2px; border-bottom: 1px solid var(--border); } .sidebar__brand .logo { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--ink); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: var(--fs-lg); box-shadow: 0 8px 20px rgba(15, 23, 42, .22); flex-shrink: 0; } .sidebar__brand small { display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); letter-spacing: .2px; } .sidebar__nav { padding: 14px 12px; overflow-y: auto; flex: 1; } .sidebar__nav::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .3); } .sidebar__section { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin: 18px 12px 8px; font-weight: 700; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin: 3px 0; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 600; font-size: var(--fs-base); transition: background .18s ease, color .18s ease; cursor: pointer; } .nav-item i { font-size: var(--fs-lg); width: 22px; text-align: center; } .nav-item:hover { background: var(--brand-soft); color: var(--brand-600); } .nav-item.active { background: var(--ink); color: #fff; box-shadow: 0 10px 22px rgba(15, 23, 42, .20); } .nav-item.active:hover { background: var(--ink); color: #fff; } .nav-item.active i { color: #fff; } /* Count badge on a nav item (e.g. Leads · 12) */ .nav-badge { margin-left: auto; background: var(--brand-soft); color: var(--brand-600); font-size: var(--fs-xs); font-weight: 800; padding: 1px 9px; border-radius: var(--radius-pill); } .nav-item.active .nav-badge { background: rgba(255,255,255,.25); color: #fff; } .nav-group { display: flex; flex-direction: column; gap: 0; } .nav-toggle { background: none; border: none; padding: 11px 14px; margin: 3px 0; width: 100%; text-align: left; font-weight: 600; font-size: var(--fs-base); color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); transition: background .18s ease, color .18s ease; display: flex; align-items: center; gap: 12px; } .nav-toggle i:first-child { font-size: var(--fs-lg); width: 22px; text-align: center; } .nav-toggle:hover { background: var(--brand-soft); color: var(--brand-600); } .nav-toggle i:last-child { transition: transform .2s ease; } .nav-toggle[aria-expanded="true"] i:last-child { transform: rotate(90deg); } .nav-submenu { display: none; flex-direction: column; gap: 0; padding: 0 0 8px 0; margin: 0; } .nav-submenu.show { display: flex; } .nav-subitem { display: flex; align-items: center; padding: 10px 14px 10px 44px; margin: 0; border-radius: 0 12px 12px 0; color: var(--text-muted); font-size: var(--fs-base); font-weight: 500; transition: background .18s ease, color .18s ease; cursor: pointer; border: none; background: none; text-decoration: none; } .nav-subitem:hover { background: var(--brand-soft); color: var(--brand-600); } .nav-subitem.active { background: var(--brand-soft); color: var(--brand-600); font-weight: 600; border-left: 3px solid var(--brand); padding-left: 41px; } /* ---------- Drag & drop upload zone (media video thumbnail / banner) ---------- */ .dropzone { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--border); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); transition: border-color .15s ease, background .15s ease; } .dropzone.dragover { border-color: var(--brand); background: var(--brand-soft); } .dropzone__hint { color: var(--text-muted); font-weight: 700; } .dropzone__name { color: var(--text); font-weight: 600; font-size: var(--fs-base); } .dropzone__thumb { width: 46px; height: 46px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border); } /* Sidebar footer — "Settings · Manage workspace" card (PDF look). */ .sidebar__foot { padding: 12px; border-top: 1px solid var(--border); flex: 0 0 auto; } .settings-card { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; } .settings-card:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--text); box-shadow: var(--shadow-sm); } .settings-card__ic { width: 38px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0; display: grid; place-items: center; font-size: var(--fs-lg); background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); } .settings-card:hover .settings-card__ic { color: var(--brand); border-color: var(--brand); } .settings-card__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .settings-card__title { font-weight: 700; font-size: var(--fs-base); } .settings-card__sub { font-size: var(--fs-xs); color: var(--text-muted); } .main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; transition: margin-left .25s ease; } /* Collapsed (drawer closed) on desktop — hide the sidebar, content fills width. Scoped to desktop so it never conflicts with the mobile off-canvas .open state. */ @media (min-width: 769px) { .app.sidebar-collapsed .sidebar { transform: translateX(-100%); } .app.sidebar-collapsed .main { margin-left: 0; } } /* ============================================================================ Horizontal top navigation (replaces the left sidebar app-wide) ============================================================================ */ .app.horizontal-nav .sidebar { display: none; } .app.horizontal-nav .main { margin-left: 0; } .app.horizontal-nav .topbar { height: auto; padding: 0; display: block; gap: 0; } .topnav { display: flex; flex-direction: column; width: 100%; } .topnav__bar { display: flex; align-items: center; gap: 20px; padding: 12px 24px; } .topnav__brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; flex-shrink: 0; } .topnav__brand .logo { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-lg); box-shadow: 0 8px 20px rgba(15, 23, 42, .22); } .topnav__brandtxt { display: flex; flex-direction: column; line-height: 1.05; } .topnav__name { font-weight: 800; font-size: var(--fs-lg); } .topnav__tag { font-size: .6rem; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); } /* "Agent" tag on a lead the branch received from a referral partner. */ .agent-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: 700; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; } @media (prefers-color-scheme: dark) { .agent-tag { color: #fde68a; background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .35); } } :root[data-theme="dark"] .agent-tag { color: #fde68a; background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .35); } :root[data-theme="light"] .agent-tag { color: #92400e; background: #fef3c7; border-color: #fcd34d; } /* A branch's own uploaded logo in the top bar. Constrained so any aspect ratio sits cleanly. */ .topnav__brand .brand-logo-img { max-height: 44px; max-width: 200px; object-fit: contain; display: block; } /* "Your Logo" placeholder mark — a dashed, muted version of the brand tile. */ .topnav__brand .logo--ghost { background: transparent; color: var(--text-muted); border: 1.5px dashed var(--border); box-shadow: none; font-size: var(--fs-lg); } .topnav__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; } .topnav__user { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 5px 8px; border-radius: var(--radius-sm); color: var(--text); transition: background .15s ease; } .topnav__user:hover { background: var(--surface-2); } .topnav__menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 2px 16px; border-top: 1px solid var(--border); } .topnav__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 13px 15px; border-radius: 10px 10px 0 0; font-weight: 600; font-size: var(--fs-base); color: var(--text-muted); background: none; border: none; cursor: pointer; text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s ease, background .15s ease; } .topnav__item i:first-child { font-size: var(--fs-md); } .topnav__item:hover { color: var(--brand-600); } .topnav__item.active { color: var(--brand-600); border-bottom-color: var(--brand); } .topnav__group { position: relative; } /* The dropdown inherited Bootstrap's 1rem, which read a size larger than the nav item that opens it. Everything below matches .topnav__item's typography so the menu reads as part of the nav rather than as a separate control. */ .topnav__menu .dropdown-menu { border-radius: var(--radius-sm); border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 6px; min-width: 210px; font-size: var(--fs-base); } .topnav__menu .dropdown-item { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-xs); padding: 9px 12px; font-size: var(--fs-base); font-weight: 600; line-height: 1.35; } .topnav__menu .dropdown-item i { font-size: var(--fs-md); width: 18px; text-align: center; } .topnav__menu .dropdown-item.active { background: var(--brand-soft); color: var(--brand-600); } /* Group labels inside the Settings menu ("Accounts", "Universities & Boards"…). */ .topnav__menu .dropdown-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .topnav__menu .dropdown-header i { font-size: var(--fs-base); } .topbar { height: var(--topbar-h); background: var(--glass-solid); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 16px; padding: 0 24px; position: sticky; top: 0; z-index: 1020; box-shadow: 0 6px 24px rgba(15, 23, 42, .04); } .topbar__title { font-weight: 700; font-size: var(--fs-md); } .topbar__spacer { flex: 1; } .icon-btn { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: grid; place-items: center; cursor: pointer; transition: .15s; } .icon-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); } .avatar { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; } .content { padding: 28px 24px 44px; max-width: 1520px; margin: 0 auto; width: 100%; } /* Opt-in for pages that should use the full viewport width instead of the centered 1520px column. */ .content.content-fluid { max-width: none; } .page-head { margin-bottom: 16px; padding: 2px 2px 14px; border: none; border-radius: 0; background: none; box-shadow: none; } /* Breadcrumb above the page title (e.g. "Leads › Academic Leads"). */ .crumb { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .crumb a { color: var(--brand-600); font-weight: 600; } .crumb i { font-size: var(--fs-xs); } .page-head h1 { font-size: var(--fs-xl); font-weight: 800; margin: 0 0 6px; letter-spacing: -.02em; position: relative; display: inline-block; } .page-head h1::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 64px; height: 4px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--brand), #22d3ee); } .page-head p { color: var(--text-muted); margin: 8px 0 0; font-size: var(--fs-md); } /* ============================================================================ Cards ============================================================================ */ .card { background: linear-gradient(180deg, var(--glass-1), var(--glass-2)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .card:hover { box-shadow: var(--shadow); transform: translateY(-1px); } /* Cards that only wrap a table sit flush — the table supplies its own padding. */ .card:has(> .table-wrap:only-child) { padding: 0; overflow: hidden; } /* Cards using an explicit .card-body / .card-header keep their own padding. */ .card:has(> .card-body) { padding: 0; } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 700; display: flex; align-items: center; justify-content: space-between; } .card-body { padding: 20px; } /* Stat widgets */ .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; transition: transform .2s ease, box-shadow .2s ease; } .stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .stat__top { display: flex; align-items: flex-start; justify-content: space-between; } .stat__icon { width: 46px; height: 46px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: var(--fs-lg); flex-shrink: 0; } .stat__icon.b { background: var(--brand-soft); color: var(--brand-600); } .stat__icon.g { background: rgba(16, 185, 129, .12); color: #059669; } .stat__icon.o { background: rgba(245, 158, 11, .14); color: #b45309; } .stat__icon.r { background: rgba(239, 68, 68, .12); color: #dc2626; } .stat__trend { font-size: var(--fs-xs); font-weight: 800; padding: 3px 9px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 3px; } .stat__trend.up { background: rgba(16, 185, 129, .12); color: #059669; } .stat__trend.flat { background: var(--surface-2); color: var(--text-muted); } .stat__value { font-size: 2rem; font-weight: 800; line-height: 1; } .stat__label { color: var(--text-muted); font-size: var(--fs-base); font-weight: 600; margin-top: 5px; } /* Same card, shrunk. For rows that carry a tile per stream (followups: 5 streams x today/overdue), where ten full-size tiles cost a whole screen to say what fits in two rows. */ .stat--sm { padding: 14px 16px; gap: 10px; border-radius: var(--radius-sm); } .stat--sm .stat__icon { width: 32px; height: 32px; font-size: var(--fs-base); border-radius: 9px; } .stat--sm .stat__trend { font-size: 10px; padding: 2px 7px; } .stat--sm .stat__value { font-size: 1.6rem; } .stat--sm .stat__label { font-size: var(--fs-sm); margin-top: 3px; } .stat--sm:hover { transform: translateY(-2px); } /* Laid out in a Bootstrap row/col — stretch to the column so tiles in a row share one height whether the label runs to one line or two. */ .stat--sm { height: 100%; } /* ---------- Topbar search ---------- */ .topbar__search { flex: 1; max-width: 520px; position: relative; } .topbar__search input { width: 100%; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); padding: 0 46px 0 42px; font-size: var(--fs-base); font-family: var(--font); } .topbar__search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--surface); } .topbar__search input::placeholder { color: var(--text-muted); } .topbar__search .tsi { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--fs-md); pointer-events: none; } .topbar__search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: var(--fs-2xs); color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 2px 6px; font-family: var(--font); } /* ---------- Dashboard bar chart ---------- */ .barchart { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 230px; padding-top: 20px; } .barchart .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; } .barchart .bar__val { font-size: var(--fs-sm); font-weight: 700; color: var(--brand-600); } .barchart .bar__fill { width: 100%; max-width: 46px; border-radius: 10px 10px 4px 4px; background: color-mix(in srgb, var(--brand) 22%, transparent); transition: height .4s ease; min-height: 6px; } .barchart .bar.peak .bar__fill { background: linear-gradient(180deg, var(--brand), var(--brand-600)); } .barchart .bar__label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; } /* ---------- Dashboard donut ---------- */ .donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; } .donut { position: relative; width: 180px; height: 180px; border-radius: 50%; } .donut__center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } .donut__center b { font-size: 1.7rem; font-weight: 800; line-height: 1; } .donut__center span { font-size: var(--fs-sm); color: var(--text-muted); } .legend { width: 100%; display: flex; flex-direction: column; gap: 10px; } .legend__row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); } .legend__row .swatch { width: 11px; height: 11px; border-radius: 3px; } .legend__row .legend__val { margin-left: auto; font-weight: 800; } /* ============================================================================ Tables ============================================================================ */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); } table.data thead th { text-align: left; padding: 13px 16px; color: var(--text-muted); font-weight: 800; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em; background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.96)); border-bottom: 1px solid var(--border); white-space: nowrap; } table.data tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); } table.data tbody tr { transition: background .15s ease, transform .15s ease; } table.data tbody tr:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); } table.data tbody tr:nth-child(even) { background: color-mix(in srgb, var(--brand) 3.5%, transparent); } table.data tbody tr.selected { background: color-mix(in srgb, var(--brand) 14%, transparent); } .table-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .table-actions .icon-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); padding: 0; } .table-actions .icon-btn:hover { transform: translateY(-1px); } table.data tbody tr.selected { background: color-mix(in srgb, var(--brand) 14%, transparent); } table.data tbody tr:last-child td { border-bottom: none; } .cell-primary { font-weight: 600; } .cell-sub { color: var(--text-muted); font-size: var(--fs-sm); } .table-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .table-actions .icon-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); padding: 0; } .table-actions .icon-btn:hover { transform: translateY(-1px); } /* ============================================================================ Badges / status labels ============================================================================ */ .badge-soft { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; line-height: 1; } .badge-soft .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .badge-b { background: var(--brand-soft); color: var(--brand-600); } .badge-g { background: rgba(16, 185, 129, .12); color: #059669; } .badge-o { background: rgba(245, 158, 11, .14); color: #b45309; } .badge-r { background: rgba(239, 68, 68, .12); color: #dc2626; } .badge-n { background: rgba(100, 116, 139, .14); color: #475569; } /* status label whose colour comes from the DB (inline custom prop) */ .status-label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; background: color-mix(in srgb, var(--c, #64748b) 14%, transparent); color: var(--c, #64748b); } .status-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, #64748b); } .country-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; margin: 2px; border-radius: var(--radius-xs); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; } /* ============================================================================ Buttons / forms (extend Bootstrap without inline styles) ============================================================================ */ .btn { border-radius: var(--radius-pill); font-weight: 700; padding: .62rem 1.1rem; letter-spacing: .01em; } .btn-brand { background: linear-gradient(135deg, var(--brand), #6366f1); border-color: var(--brand); color: #fff; box-shadow: 0 10px 24px rgba(79, 70, 229, .22); } .btn-brand:hover { background: linear-gradient(135deg, var(--brand-600), var(--brand)); border-color: var(--brand-600); color: #fff; transform: translateY(-1px); } .btn-ghost { background: var(--glass-solid); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-sm); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .form-control, .form-select { border-radius: var(--radius); border: 1px solid var(--border); background: rgba(255,255,255,.94); color: var(--text); padding: .7rem .85rem; box-shadow: inset 0 1px 2px rgba(15,23,42,.03); } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); background: var(--surface); } .form-label { font-weight: 600; font-size: var(--fs-base); margin-bottom: 6px; color: var(--text); } /* Tabs (segmented) */ .tabs { display: inline-flex; gap: 4px; padding: 6px; background: linear-gradient(180deg, var(--glass-2), var(--glass-1)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); /* A strip can be wider than a phone (Document Settings' four tabs are 551px on a 365px screen). Scroll it inside its own pill rather than let it push the whole page sideways. No effect on wider screens, where the tabs already fit and no scrollbar appears. */ max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--radius-sm); font-weight: 700; font-size: var(--fs-base); color: var(--text-muted); cursor: pointer; border: none; background: transparent; transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; flex: 0 0 auto; white-space: nowrap; /* never squash a tab to fit — the strip scrolls instead */ } .tab i { font-size: var(--fs-md); } .tab:hover:not(.active) { color: var(--text); background: color-mix(in srgb, var(--brand) 8%, transparent); transform: translateY(-1px); } .tab.active { background: var(--surface); color: var(--brand-600); box-shadow: var(--shadow-sm); } /* Per-tab count pill. Hidden until it has a number. */ .tab-badge { display: none; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 800; line-height: 18px; text-align: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-600); } .tab-badge:not(:empty) { display: inline-block; } .tab.active .tab-badge { background: color-mix(in srgb, var(--brand) 22%, transparent); } /* ============================================================================ Login ============================================================================ */ .auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 10% -10%, #6366f1 0%, transparent 55%), radial-gradient(1000px 700px at 110% 110%, #06b6d4 0%, transparent 50%), var(--bg); } .auth__card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 34px; } .auth__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font-weight: 800; font-size: var(--fs-xl); } .auth__brand .logo { width: 52px; height: 52px; border-radius: var(--radius); background: linear-gradient(135deg, var(--brand), #22d3ee); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: var(--fs-xl); box-shadow: 0 12px 28px rgba(79, 70, 229, .28); flex-shrink: 0; } /* Utilities */ .muted { color: var(--text-muted); } .grid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } /* Long labels ("Counselling · Overdue") must wrap inside the narrow tile, never push it wider. */ .stat--sm .stat__label { overflow-wrap: anywhere; } .grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; } .mt-18 { margin-top: 18px; } .spinner-wrap { display: grid; place-items: center; padding: 40px; color: var(--text-muted); } .empty { text-align: center; color: var(--text-muted); padding: 40px 20px; } .toast-host { position: fixed; top: 18px; right: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; } .toast-msg { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 12px 16px; min-width: 240px; font-weight: 500; } .toast-msg.err { border-left-color: var(--danger); } .toast-msg.ok { border-left-color: var(--ok); } /* Connection-lost banner (api.js's auto-retry) — one persistent, centered bar above everything (including modals) while the API is unreachable; hides itself the moment a retry gets through. */ .conn-lost-banner { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px); display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--danger); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); padding: 10px 12px 10px 18px; z-index: 2500; font-weight: 600; font-size: var(--fs-base); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .conn-lost-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .conn-lost-banner i { color: var(--danger); font-size: var(--fs-lg); } .conn-lost-banner__msg { color: var(--text); white-space: nowrap; } .conn-lost-banner__count { color: var(--danger); } .conn-lost-banner__btn { white-space: nowrap; } /* The drawer toggle is always available (desktop collapse + mobile off-canvas). */ .sidebar__toggle { display: grid; } /* Floating row-action menu (body-anchored so the table's overflow never clips it). */ .action-menu { position: fixed; z-index: 3000; min-width: 172px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px; } .action-menu button { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; text-align: left; cursor: pointer; padding: 9px 12px; border-radius: var(--radius-xs); color: var(--text); font-size: var(--fs-base); font-weight: 600; } .action-menu button i { font-size: var(--fs-md); width: 18px; text-align: center; } .action-menu button:hover { background: var(--brand-soft); color: var(--brand-600); } .action-menu button.danger:hover { background: rgba(239, 68, 68, .12); color: #dc2626; } /* ---------- User dropdown ---------- */ #userDropdownBtn:hover { background: var(--surface-2) !important; } .dataTables_wrapper { padding: 16px 14px 8px; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin-bottom: 16px; } .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 600; font-size: var(--fs-base); } .dataTables_wrapper .dataTables_length select { border: 1px solid var(--border); border-radius: var(--radius-sm); background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.93)); color: var(--text); padding: 0.62rem 0.9rem; min-height: 40px; font-weight: 600; box-shadow: inset 0 1px 2px rgba(15,23,42,.03), var(--shadow-sm); cursor: pointer; transition: all .15s ease; } .dataTables_wrapper .dataTables_length select:hover { border-color: var(--brand); box-shadow: inset 0 1px 2px rgba(15,23,42,.03), 0 0 0 3px var(--brand-soft); } .dataTables_wrapper .dataTables_filter input { border: 1px solid var(--border); border-radius: var(--radius-sm); background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.93)); color: var(--text); padding: 0.62rem 1rem; min-height: 40px; font-weight: 500; font-size: var(--fs-base); box-shadow: inset 0 1px 2px rgba(15,23,42,.03), var(--shadow-sm); transition: all .15s ease; min-width: 260px; } .dataTables_wrapper .dataTables_filter input::placeholder { color: var(--text-muted); } .dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--brand); box-shadow: inset 0 1px 2px rgba(15,23,42,.03), 0 0 0 4px var(--brand-soft); } .dataTables_wrapper .dataTables_info { color: var(--text-muted); font-weight: 600; font-size: var(--fs-base); margin-bottom: 14px; } .dataTables_wrapper .dataTables_paginate { margin-bottom: 0; text-align: right; } .dataTables_wrapper .dataTables_paginate .paginate_button { border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94)) !important; color: var(--text) !important; margin: 0 3px; padding: 0.5rem 0.8rem !important; font-weight: 700; font-size: var(--fs-base); box-shadow: var(--shadow-sm) !important; transition: all .15s ease !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { border-color: var(--brand) !important; background: linear-gradient(135deg, var(--brand), #6366f1) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(79, 70, 229, .25) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: linear-gradient(135deg, var(--brand), #6366f1) !important; border-color: var(--brand) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(79, 70, 229, .25) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.4 !important; cursor: not-allowed !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_filter input, [data-theme="dark"] .dataTables_wrapper .dataTables_length select { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); color: var(--text); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .15) !important; } .dropdown-item { color: var(--text) !important; } .dropdown-item:hover { background: var(--brand-soft) !important; color: var(--brand) !important; } #logoutBtn:hover { background: #fef2f2 !important; color: var(--danger) !important; } [data-theme="dark"] #logoutBtn:hover { background: rgba(239, 68, 68, 0.1) !important; } /* ---------- SweetAlert2 (themed to match the app) ---------- */ .swal2-container.swal2-backdrop-show { background: rgba(15, 23, 42, .5); } .swal2-popup.ep-swal { border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); border: 1px solid var(--border); font-family: var(--font); padding: 28px 26px 24px; width: 32em; max-width: 94vw; } .ep-swal .swal2-title { color: var(--text); font-weight: 800; font-size: var(--fs-xl); padding: 6px 0 0; } .ep-swal .swal2-html-container { color: var(--text-muted); font-size: var(--fs-md); margin-top: 8px; } .ep-swal .swal2-actions { gap: 10px; margin-top: 22px; width: 100%; } .ep-swal .swal2-actions .btn { min-width: 120px; padding: .6rem 1.2rem; } .ep-swal .swal2-input, .ep-swal .swal2-textarea, .ep-swal .swal2-select { border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: none; font-size: var(--fs-md); margin: 10px 0 0; padding: .6rem .85rem; font-family: var(--font); } .ep-swal .swal2-input:focus, .ep-swal .swal2-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; } .ep-swal .swal2-input::placeholder { color: var(--text-muted); } .ep-swal .swal2-validation-message { border-radius: var(--radius-sm); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-weight: 600; } .ep-swal .swal2-close { color: var(--text-muted); box-shadow: none !important; } .ep-swal .swal2-close:hover { color: var(--danger); } /* Status icons recoloured to the theme palette */ .ep-swal .swal2-icon { border-width: 3px; } .ep-swal .swal2-icon.swal2-success { border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); } .ep-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .ep-swal .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--ok); } .ep-swal .swal2-icon.swal2-warning { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); } .ep-swal .swal2-icon.swal2-error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); } .ep-swal .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--danger); } .ep-swal .swal2-icon.swal2-info { border-color: color-mix(in srgb, var(--info) 45%, transparent); color: var(--info); } .ep-swal .swal2-icon.swal2-question { border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--brand); } /* ---------- Notifications (bell + dropdown) ---------- */ .noti { position: relative; } .noti-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--danger); color: #fff; font-size: var(--fs-2xs); font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; } .noti-panel { position: absolute; top: calc(100% + 12px); right: 0; width: 384px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; display: none; z-index: 1000; } .noti-panel.open { display: block; animation: notiIn .16s ease; } @keyframes notiIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .noti-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border); } .noti-panel__title { font-weight: 800; font-size: var(--fs-md); } .noti-markall { border: none; background: transparent; color: var(--text-muted); cursor: pointer; width: 34px; height: 34px; border-radius: var(--radius-xs); display: grid; place-items: center; font-size: var(--fs-lg); } .noti-markall:hover { background: var(--brand-soft); color: var(--brand); } .noti-list { max-height: 62vh; overflow-y: auto; } .noti-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; } .noti-item:last-child { border-bottom: none; } .noti-item:hover { background: var(--surface-2); } .noti-item.unread { background: color-mix(in srgb, var(--brand) 6%, transparent); } .noti-ic { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: var(--fs-lg); } .noti-ic.b { background: linear-gradient(135deg, var(--brand), #818cf8); } .noti-ic.g { background: linear-gradient(135deg, var(--ok), #34d399); } .noti-ic.o { background: linear-gradient(135deg, var(--warn), #fbbf24); } .noti-ic.r { background: linear-gradient(135deg, var(--danger), #fb7185); } .noti-body { flex: 1; min-width: 0; } .noti-title { font-weight: 700; font-size: var(--fs-base); color: var(--text); } .noti-msg { color: var(--text-muted); font-size: var(--fs-sm); margin: 2px 0; line-height: 1.35; } .noti-time { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500; } .noti-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); margin-top: 7px; flex-shrink: 0; } .noti-item:not(.unread) .noti-dot { visibility: hidden; } .noti-panel__foot { padding: 13px; text-align: center; border-top: 1px solid var(--border); background: var(--surface-2); } .noti-panel__foot a { font-weight: 700; font-size: var(--fs-base); color: var(--brand); } .noti-panel__foot a:hover { color: var(--brand-600); } @media (max-width: 480px) { .noti-panel { position: fixed; top: var(--topbar-h); right: 8px; left: 8px; width: auto; } } /* ---------- Workflow pipeline ---------- */ /* Flex and grid children default to min-width:auto, so they refuse to shrink below their content's min-content width. A wide child (the 10-step .pipeline is 1200px min-content) therefore drags its whole card past the viewport on a phone instead of scrolling inside its own overflow-x container. Letting these shrink to 0 is what makes overflow-x:auto actually engage. */ .card-body, .detail-grid > * { min-width: 0; } .pipeline { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 8px 0; max-width: 100%; } .pipe-step { display: flex; flex-direction: column; align-items: center; min-width: 120px; position: relative; text-align: center; } .pipe-step:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: 50%; width: 100%; height: 3px; background: var(--border); z-index: 0; } .pipe-step.done::after { background: var(--ok); } .pipe-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 3px solid var(--border); color: var(--text-muted); font-weight: 700; font-size: var(--fs-base); z-index: 1; position: relative; } .pipe-step.done .pipe-dot { background: var(--ok); border-color: var(--ok); color: #fff; } .pipe-step.current .pipe-dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .pipe-label { margin-top: 8px; font-size: var(--fs-sm); font-weight: 600; max-width: 110px; } /* A completed step is clickable — it opens a read-only review of what was done there. */ .pipe-step--link { cursor: pointer; } .pipe-step--link:hover .pipe-dot, .pipe-step--link:focus-visible .pipe-dot { transform: scale(1.12); box-shadow: 0 0 0 4px var(--ok-soft, rgba(16, 185, 129, .22)); } .pipe-step--link .pipe-dot { transition: transform .12s ease, box-shadow .12s ease; } .pipe-step--link:hover .pipe-label { text-decoration: underline; } /* --- Move-to-step / Status / Note / Advance bar (visa application "Manage" panel) --- */ .advance-bar { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .advance-field { display: flex; flex-direction: column; gap: 6px; min-width: 180px; } .advance-field--note { flex: 1 1 240px; } .advance-field .form-label { margin-bottom: 0; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; } .advance-field .form-select, .advance-field .form-control { background: var(--surface); } .advance-btn { white-space: nowrap; padding: 11px 22px; border-radius: var(--radius-sm); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; } .advance-btn i { font-size: .9em; } /* --- Step document checklist (Document Settings wired to the current pipeline step) --- */ .doc-checklist { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); } .doc-req-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); } .doc-req-row:first-of-type { border-top: 0; padding-top: 2px; } .doc-req-info { min-width: 200px; flex: 1; } .doc-req-name { font-weight: 600; font-size: var(--fs-base); display: flex; align-items: center; flex-wrap: wrap; } .doc-req-status { flex: 0 0 auto; } .doc-req-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } .pipe-step.current .pipe-label { color: var(--brand-600); } /* Detail two-column */ .detail-grid { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; } .info-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-base); } .info-row:last-child { border-bottom: none; } .info-row .k { color: var(--text-muted); } .info-row .v { font-weight: 600; text-align: right; } .timeline { position: relative; padding-left: 22px; } .timeline-item { position: relative; padding: 0 0 16px 14px; border-left: 2px solid var(--border); } .timeline-item:last-child { border-left-color: transparent; } .timeline-item::before { content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); } @media (max-width: 992px) { .detail-grid { grid-template-columns: 1fr; } } /* ============================================================================ Global component polish — default look for every page (no inline styles) ============================================================================ */ /* Modals inherit the app theme automatically */ .modal-content { border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, var(--glass-1), var(--glass-2)); color: var(--text); box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); } .modal-header, .modal-footer { border-color: var(--border); padding: 18px 22px; } .modal-title { font-weight: 800; letter-spacing: -.01em; } .modal-header .btn-close { filter: none; opacity: .8; } .modal-backdrop.show { backdrop-filter: blur(6px); background: rgba(15, 23, 42, .55); } [data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* Brand-coloured checkboxes / switches */ .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); } .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } /* Selects get a custom caret so they match text inputs */ select.form-control, .form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 15px; padding-right: 2.2rem; } /* Section bar: a title with an action button on the right, inside a pane */ .section-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .section-bar h2 { font-size: var(--fs-md); font-weight: 800; margin: 0; } .section-bar .cell-sub { max-width: 640px; } /* Vertical rhythm so pages don't need inline margins between blocks */ .card + .card { margin-top: 16px; } .stack > * + * { margin-top: 16px; } .tabs + * { margin-top: 4px; } /* Icon buttons line up a touch tighter in action cells */ table.data td .icon-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); } /* ---------- Responsive ---------- */ @media (max-width: 992px) { .grid-stats { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 768px) { .dataTables_wrapper { padding: 10px 6px 6px; } .dataTables_wrapper .dataTables_filter { float: none; width: 100%; } .dataTables_wrapper .dataTables_filter input { width: 100%; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { text-align: center; } .dataTables_wrapper .dataTables_paginate .paginate_button { margin: 3px 2px; } table.data thead { display: none; } table.data tbody tr { display: block; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; background: var(--surface); box-shadow: var(--shadow-sm); } table.data tbody td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); } table.data tbody td:last-child { border-bottom: none; } table.data tbody td::before { content: attr(data-label); color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: .06em; } } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .main { margin-left: 0; } .sidebar__toggle { display: grid; } .grid-stats { grid-template-columns: 1fr 1fr; } } /* ============================================================================ Colleges & Universities — the Add Uni & Programs form ============================================================================ */ /* The small "+" that sits inside a field's label and adds a missing dropdown value. */ .linkplus { border: 0; background: none; padding: 0 0 0 4px; cursor: pointer; color: var(--brand); font-weight: 800; font-size: var(--fs-md); line-height: 1; } .linkplus:hover { color: var(--ink, #16224a); } /* The black "+" that appends another program block, per the design. */ .btn-ink { background: #111827; color: #fff; min-width: 44px; } .btn-ink:hover { background: #1f2937; color: #fff; } .program-block { position: relative; } .program-remove { position: absolute; top: 10px; right: 10px; } /* Language-score grid: a test per row, its components as labelled cells. */ .score-grid { display: flex; flex-direction: column; gap: 10px; } .score-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; } .score-test { display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: 700; text-align: center; border-right: 1px solid var(--border); padding-right: 8px; } .score-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .score-cell { min-width: 0; } .score-head { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .score-cell .form-control { padding: 6px 8px; } /* Radio "cards" (Full day / Half day / Custom, Yes / No …). The whole card is the label, so the click target is the card rather than the 14px dot. */ .opt-card { display: flex; align-items: center; gap: 10px; cursor: pointer; height: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 600; transition: border-color .15s, background .15s; } .opt-card:hover { background: var(--surface-2, #fafafa); } .opt-card input { margin: 0; flex: none; } .opt-card.checked { border-color: var(--brand, #6366f1); background: rgba(99, 102, 241, .07); } .opt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .opt-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 768px) { .opt-grid, .opt-grid.two { grid-template-columns: 1fr; } } /* ---------- Agreements ---------- */ /* Form on the left, counters + per-country groups on the right. */ .agreement-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 1100px) { .agreement-layout { grid-template-columns: 1fr; } } .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } @media (max-width: 640px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .stat-tile { text-align: center; } .stat-tile .icon { width: 62px; height: 62px; margin: 0 auto 10px; border-radius: var(--radius); display: grid; place-items: center; font-size: var(--fs-xl); } .stat-tile .label { font-size: var(--fs-base); color: var(--text-muted, #6b7280); font-weight: 600; } .stat-tile .value { font-size: var(--fs-xl); font-weight: 800; margin-top: 2px; } /* One hue per state, used by both the tile and the row badge. */ .tone-total { background: #e7f6ee; color: #0f7a45; } .tone-active { background: #e3f4fb; color: #0e7fa8; } .tone-expired{ background: #fdeaea; color: #c0392b; } .tone-expiring{ background: #fef6e0; color: #b7791f; } .country-group + .country-group { margin-top: 14px; } .country-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; padding: 4px 2px; text-align: left; } .country-head .flag { font-size: var(--fs-xl); line-height: 1; } .country-head .name { font-weight: 700; font-size: var(--fs-md); } .country-head .count { text-align: right; font-size: var(--fs-sm); color: var(--text-muted, #6b7280); } .country-head .count b { display: block; font-size: var(--fs-md); color: var(--text, #111); } .country-head .chev { transition: transform .18s; } .country-head[aria-expanded="true"] .chev { transform: rotate(180deg); } /* ---------- Search field (icon inside the input + a clear button) ---------- */ .search-field { position: relative; display: block; } .search-field > i.bi-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--fs-base); pointer-events: none; } .search-field .form-control { padding-left: 40px; padding-right: 38px; } /* The native search "x" is inconsistent across browsers — we render our own. */ .search-field input[type="search"]::-webkit-search-cancel-button { display: none; } .search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--text-muted); width: 26px; height: 26px; border-radius: var(--radius-pill); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); } .search-clear:hover { background: var(--surface-2); color: var(--text); } /* ---------- Per-user permission matrix ---------- */ .perm-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text-muted); } .perm-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; } .perm-dot--role { background: var(--text-muted); } .perm-dot--allow { background: var(--ok); } .perm-dot--deny { background: var(--danger); } /* A cell whose state differs from the role gets tinted, so overrides are obvious at a glance. */ .perm-cell { text-align: center; } .perm-cell.is-allow { background: color-mix(in srgb, var(--ok) 12%, transparent); } .perm-cell.is-deny { background: color-mix(in srgb, var(--danger) 10%, transparent); } .perm-mod { font-weight: 700; } .perm-mod small { display: block; font-weight: 500; color: var(--text-muted); font-size: var(--fs-2xs); } /* Date-range preset pill ("Last 15 days ▾") that sits with the filter row. */ .range-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--brand, #6366f1); border-radius: var(--radius-pill); background: rgba(99, 102, 241, .08); color: var(--brand, #6366f1); font-weight: 700; font-size: var(--fs-base); padding: 9px 16px; white-space: nowrap; } .range-pill:hover { background: rgba(99, 102, 241, .16); } .range-pill::after { margin-left: 2px; } /* When the pill fills a filter-grid cell, centre its label and match the selects' height. */ .range-pill.w-100 { justify-content: center; min-height: 44px; } #rangeMenu .dropdown-item.active { background: rgba(99, 102, 241, .12); color: var(--brand, #6366f1); font-weight: 600; } /* The "— / Total Leave Duration" summary strip under the date pickers. */ .duration-strip { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; margin-top: 18px; } .duration-strip .val { font-size: var(--fs-lg); font-weight: 800; color: var(--brand, #6366f1); } /* Eligibility is a short checkbox list, while the score grid carries five columns per test. The generic .grid-2 splits 2fr/1fr — the wrong way round here — so this pair has its own. */ .program-panels { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr); gap: 18px; align-items: start; } @media (max-width: 992px) { .program-panels { grid-template-columns: 1fr; } } @media (max-width: 900px) { .score-row { grid-template-columns: 1fr; } .score-test { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 6px; } .score-cells { grid-template-columns: repeat(2, 1fr); } } /* Position number beside a document in the Document Settings requirement list. */ .pos-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-xs); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); } /* Multi-pick document list in the Add Documents modal. */ .doc-picklist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; } .doc-pick { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: var(--fs-base); } .doc-pick input { width: 16px; height: 16px; } @media (max-width: 560px) { .doc-picklist { grid-template-columns: 1fr; } } /* ---------- Daily Material ---------- */ .material-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .material-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; } .material-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* Posts are square by design, so reserve the space and never let a stray size shift the grid. */ .material-card__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--brand-soft); } .material-card__body { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .material-card__body .btn { margin-top: auto; } .material-card__caption { margin: 6px 0 0; font-size: var(--fs-base); color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================================ DataTables — dressed as part of the panel, not as a library ---------------------------------------------------------------------------- DataTables 2.x wraps the table in .dt-container and injects a length select, a search box, an info line and paging buttons. Left alone these carry the library's own chrome, which reads as unfinished next to the rest of the admin. Everything below re-skins those five pieces with the panel's own inputs, ghost buttons and header typography — no markup changes, so it applies to every table we mount. ============================================================================ */ .dt-container { --dt-row-selected: 99, 91, 255; } /* --- layout: controls above and below, breathing room around the table --- */ .dt-container .dt-layout-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .dt-container .dt-layout-row.dt-layout-table { display: block; } .dt-container > .dt-layout-row:first-child { margin: 0 0 16px; } .dt-container > .dt-layout-row:last-child { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); } .dt-container .dt-layout-cell { display: flex; align-items: center; gap: 10px; } .dt-container .dt-layout-cell.dt-layout-full { flex: 1; } /* --- length select: a compact pill, label folded into it --- */ .dt-container .dt-length { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; } .dt-container .dt-length select { appearance: none; -webkit-appearance: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 30px 8px 12px; min-width: 74px; background: var(--surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E") no-repeat right 9px center/14px; color: var(--text); font-size: var(--fs-base); font-weight: 600; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } /* --- search: a plain bordered field. An earlier version painted a magnifying-glass icon as a background image, but DataTables' own left padding kept overriding ours, so the icon sat on top of the placeholder. The icon isn't worth that fight — a clean input reads fine. --- */ .dt-container .dt-search { display: inline-flex; align-items: center; margin-left: auto; } .dt-container .dt-search label { display: none; } /* the placeholder carries the meaning */ .dt-container .dt-search input.dt-input, .dt-container .dt-search input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 16px; min-width: 260px; max-width: 100%; margin: 0; background: var(--surface-2); color: var(--text); font-size: var(--fs-base); font-weight: 500; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .dt-container .dt-search input::placeholder { color: var(--text-muted); font-weight: 500; } /* Hide WebKit's native search decorations so only our field shows. */ .dt-container .dt-search input::-webkit-search-decoration, .dt-container .dt-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .dt-container .dt-search input:focus, .dt-container .dt-length select:focus { outline: none; background-color: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); } /* --- info line: quiet, tabular so the numbers don't jitter while paging --- */ .dt-container .dt-info { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; padding: 0; } /* --- paging: square-ish pills, brand fill on the current page --- */ .dt-container .dt-paging { margin-left: auto; } .dt-container .dt-paging nav { display: inline-flex; align-items: center; gap: 4px; } .dt-container .dt-paging .dt-paging-button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; margin: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: var(--fs-base); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) { background: var(--brand-soft); color: var(--brand-600); border-color: transparent; } .dt-container .dt-paging .dt-paging-button:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--brand-glow); } .dt-container .dt-paging .dt-paging-button.current, .dt-container .dt-paging .dt-paging-button.current:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: 0 6px 16px var(--brand-glow); } .dt-container .dt-paging .dt-paging-button.disabled, .dt-container .dt-paging .dt-paging-button.disabled:hover { color: var(--border); background: transparent; cursor: default; box-shadow: none; } .dt-container .dt-paging .dt-paging-button.ellipsis { pointer-events: none; color: var(--text-muted); } /* --- headers: keep our uppercase caps, swap the library's arrows for a chevron pair --- */ table.data thead th.dt-orderable-asc, table.data thead th.dt-orderable-desc { cursor: pointer; user-select: none; } table.data thead th.dt-orderable-asc:hover, table.data thead th.dt-orderable-desc:hover { color: var(--brand-600); } table.data thead th.dt-ordering-asc, table.data thead th.dt-ordering-desc { color: var(--brand-600); } table.data thead th span.dt-column-order { position: relative; width: 12px; margin-left: 6px; } table.data thead th span.dt-column-order::before, table.data thead th span.dt-column-order::after { position: absolute; right: 0; line-height: 1; font-size: .6rem; opacity: .35; transition: opacity .15s ease; } table.data thead th span.dt-column-order::before { content: "B2"; top: -6px; } table.data thead th span.dt-column-order::after { content: "BC"; top: 1px; } table.data thead th.dt-ordering-asc span.dt-column-order::before, table.data thead th.dt-ordering-desc span.dt-column-order::after { opacity: 1; } /* The library's own empty state sits inside our table; keep it in the .empty voice. */ table.data td.dt-empty { text-align: center; color: var(--text-muted); padding: 34px 16px; font-weight: 600; } @media (max-width: 640px) { .dt-container .dt-search input { min-width: 0; width: 100%; } .dt-container .dt-search { width: 100%; margin-left: 0; } .dt-container > .dt-layout-row:first-child { flex-direction: column; align-items: stretch; } } /* ============================================================================ Select2 — made to look exactly like .form-select ---------------------------------------------------------------------------- Select2 hides the native