/* ===================================================================== Lesson Lens — CMS theme Default theme: Deep Blue + Teal (set on ) To swap theme: change data-theme to "indigo" or "dark" in layouts/app.blade.php ===================================================================== */ :root, [data-theme="blue"] { --ll-primary: #1F4E79; /* deep blue */ --ll-primary-2: #2E5C8A; --ll-accent: #14B8A6; /* teal */ --ll-accent-d: #0F9488; --ll-sidebar: #16385c; /* darker blue for sidebar */ --ll-sidebar-2: #1f4a76; --ll-bg: #f4f7fb; --ll-card: #ffffff; --ll-text: #1f2937; --ll-muted: #6b7280; --ll-border: #e5e9f0; --ll-header: #ffffff; --ll-header-tx: #1f2937; } /* Alternative theme 1 — Indigo/Purple + Amber */ [data-theme="indigo"] { --ll-primary: #4338CA; --ll-primary-2: #5b50d6; --ll-accent: #F59E0B; --ll-accent-d: #d98806; --ll-sidebar: #312E81; --ll-sidebar-2: #413bb0; --ll-bg: #f6f5fc; --ll-card: #ffffff; --ll-text: #1f2937; --ll-muted: #6b7280; --ll-border: #e7e4f5; --ll-header: #ffffff; --ll-header-tx: #1f2937; } /* Alternative theme 2 — Dark + Emerald */ [data-theme="dark"] { --ll-primary: #10B981; --ll-primary-2: #34d399; --ll-accent: #10B981; --ll-accent-d: #059669; --ll-sidebar: #0f172a; --ll-sidebar-2: #1e293b; --ll-bg: #0b1220; --ll-card: #131c2e; --ll-text: #e5e7eb; --ll-muted: #94a3b8; --ll-border: #24314a; --ll-header: #131c2e; --ll-header-tx: #e5e7eb; } /* ---------- base ---------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--ll-bg); color: var(--ll-text); font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 14px; } a { text-decoration: none; } /* ---------- layout shell ---------- */ .ll-shell { display: flex; min-height: 100vh; } /* ---------- sidebar (click toggle: shown <-> hidden via hamburger) ---------- */ .ll-sidebar { width: 248px; background: linear-gradient(180deg, var(--ll-sidebar), var(--ll-sidebar-2)); color: #fff; transition: width .22s ease, margin-left .22s ease; position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 1030; flex-shrink: 0; } .ll-sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px; font-weight: 800; font-size: 18px; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.1); } .ll-sidebar .brand .logo { min-width: 32px; height: 32px; border-radius: 8px; background: var(--ll-accent); display: grid; place-items: center; font-weight: 800; color: #042f2a; } .ll-nav { padding: 10px 0; list-style: none; margin: 0; } .ll-nav a { display: flex; align-items: center; gap: 14px; padding: 12px 22px; color: #cdd9ea; white-space: nowrap; border-left: 3px solid transparent; } .ll-nav a .ico { min-width: 22px; text-align: center; font-size: 17px; } .ll-nav a:hover { background: rgba(255,255,255,.08); color: #fff; } .ll-nav a.active { background: rgba(255,255,255,.12); color: #fff; border-left-color: var(--ll-accent); } /* COLLAPSED (hidden) state — toggled by the header hamburger */ body.ll-collapsed .ll-sidebar { width: 0; } /* hamburger button */ .ll-burger { border: 1px solid var(--ll-border); background: transparent; color: var(--ll-header-tx); width: 38px; height: 38px; border-radius: 8px; cursor: pointer; font-size: 18px; display: grid; place-items: center; } .ll-burger:hover { background: color-mix(in srgb, var(--ll-primary) 8%, transparent); } /* ---------- main column ---------- */ .ll-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* header */ .ll-header { background: var(--ll-header); color: var(--ll-header-tx); height: 62px; display: flex; align-items: center; gap: 16px; padding: 0 22px; border-bottom: 1px solid var(--ll-border); position: sticky; top: 0; z-index: 1020; } .ll-header .page-title { font-weight: 700; font-size: 17px; } .ll-header .spacer { flex: 1; } .ll-header .user { display: flex; align-items: center; gap: 10px; } .ll-header .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ll-primary); color: #fff; display: grid; place-items: center; font-weight: 700; } .ll-role-badge { font-size: 11px; text-transform: capitalize; background: var(--ll-accent); color: #042f2a; padding: 2px 9px; border-radius: 20px; font-weight: 600; } /* content + footer */ .ll-content { padding: 24px; flex: 1; } .ll-footer { padding: 14px 24px; border-top: 1px solid var(--ll-border); color: var(--ll-muted); font-size: 12px; text-align: center; } /* ---------- cards / components ---------- */ .ll-card { background: var(--ll-card); border: 1px solid var(--ll-border); border-radius: 12px; padding: 18px; box-shadow: 0 1px 3px rgba(16,24,40,.04); } .ll-stat { display: flex; align-items: center; gap: 14px; } .ll-stat .icon { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--ll-primary) 12%, transparent); color: var(--ll-primary); font-size: 20px; } .ll-stat .num { font-size: 26px; font-weight: 800; line-height: 1; } .ll-stat .lbl { color: var(--ll-muted); font-size: 12px; } .ll-section-title { font-weight: 700; margin: 4px 0 12px; } .text-muted-ll { color: var(--ll-muted); } /* buttons tuned to theme (work alongside Bootstrap) */ .btn-ll { background: var(--ll-primary); border-color: var(--ll-primary); color: #fff; } .btn-ll:hover { background: var(--ll-primary-2); border-color: var(--ll-primary-2); color: #fff; } .btn-ll-accent { background: var(--ll-accent); border-color: var(--ll-accent); color: #042f2a; } .btn-ll-accent:hover { background: var(--ll-accent-d); border-color: var(--ll-accent-d); color: #042f2a; } /* status pill */ .ll-status { font-size: 11px; text-transform: capitalize; padding: 3px 10px; border-radius: 20px; background: color-mix(in srgb, var(--ll-primary) 10%, transparent); color: var(--ll-primary); font-weight: 600; } /* tables on dark theme */ [data-theme="dark"] .table { color: var(--ll-text); } [data-theme="dark"] .table > :not(caption) > * > * { background: transparent; color: var(--ll-text); } [data-theme="dark"] .table-light > * > * { background: #1b2740 !important; color: var(--ll-text) !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background:#0f1830; color:var(--ll-text); border-color:var(--ll-border); } [data-theme="dark"] .alert-light { background:#1b2740; color:var(--ll-text); border-color:var(--ll-border); } /* score pill */ .score-pill { display:inline-block; width:30px; text-align:center; border-radius:6px; color:#fff; font-weight:700; } /* workflow stepper */ .ll-steps { display:flex; flex-wrap:wrap; gap:8px; } /* responsive: sidebar stays as rail on small screens */ @media (max-width: 800px){ .ll-sidebar { position: fixed; left: 0; top: 0; box-shadow: 2px 0 12px rgba(0,0,0,.2); } body.ll-collapsed .ll-sidebar { width: 0; } .ll-main { margin-left: 0; width: 100%; } } /* ---------- login (split screen) ---------- */ .ll-login { display: flex; min-height: 100vh; } .ll-login .panel { flex: 1; background: linear-gradient(140deg, var(--ll-sidebar), var(--ll-primary) 60%, var(--ll-accent-d)); color: #fff; padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; } .ll-login .panel .logo { width: 52px; height: 52px; border-radius: 12px; background: var(--ll-accent); color: #042f2a; display: grid; place-items: center; font-weight: 800; font-size: 24px; margin-bottom: 22px; } .ll-login .panel h1 { font-weight: 800; font-size: 34px; margin: 0 0 10px; } .ll-login .panel p.sub { opacity: .9; font-size: 15px; max-width: 420px; line-height: 1.6; } .ll-login .panel ul { list-style: none; padding: 0; margin: 28px 0 0; } .ll-login .panel li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; max-width: 420px; } .ll-login .panel li .ck { color: var(--ll-accent); font-size: 18px; margin-top: 1px; } .ll-login .formside { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--ll-bg); } .ll-login .formcard { width: 100%; max-width: 380px; } .ll-login .formcard h3 { font-weight: 800; color: var(--ll-text); } @media (max-width: 800px){ .ll-login .panel { display: none; } } /* ---- Back button + header polish ---- */ .ll-back { font-size: 16px; } .ll-header { gap: 10px; box-shadow: 0 1px 0 var(--ll-border); } .ll-header .page-title { font-size: 18px; letter-spacing: .2px; } .ll-header .ll-burger:hover, .ll-back:hover { background: color-mix(in srgb, var(--ll-accent) 18%, transparent); border-color: var(--ll-accent); } /* subtle active-press feedback */ .ll-burger:active, .ll-back:active { transform: translateY(1px); } /* ===== Step progress bar (Home > Upload > Review > Report) ===== */ .ll-steps-bar { display:flex; align-items:center; gap:0; margin:0 0 22px; flex-wrap:wrap; } .ll-step { display:flex; align-items:center; gap:10px; color:var(--ll-muted); } .ll-step .dot { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--ll-muted) 18%, transparent); color:var(--ll-muted); font-weight:700; font-size:13px; flex-shrink:0; } .ll-step .lbl { font-size:13px; font-weight:600; white-space:nowrap; } .ll-step.done .dot { background:var(--ll-accent); color:#042f2a; } .ll-step.done .lbl { color:var(--ll-text); } .ll-step.active .dot { background:var(--ll-primary); color:#fff; box-shadow:0 0 0 4px color-mix(in srgb, var(--ll-primary) 18%, transparent); } .ll-step.active .lbl { color:var(--ll-primary); } .ll-step-sep { flex:1 1 28px; min-width:24px; height:3px; border-radius:3px; margin:0 10px; background:color-mix(in srgb, var(--ll-muted) 18%, transparent); } .ll-step-sep.done { background:var(--ll-accent); } @media (max-width:700px){ .ll-step .lbl{ display:none; } .ll-step-sep{ margin:0 4px; } } /* ===== progress bars ===== */ .ll-progress-wrap { margin-top:14px; } .ll-progress { height:10px; border-radius:8px; background:color-mix(in srgb, var(--ll-muted) 18%, transparent); overflow:hidden; } .ll-progress > span { display:block; height:100%; width:0; border-radius:8px; background:linear-gradient(90deg, var(--ll-primary), var(--ll-accent)); transition:width .25s ease; } .ll-progress-label { font-size:12px; color:var(--ll-muted); margin-top:6px; } .ll-proc-spinner { width:46px;height:46px;border:4px solid color-mix(in srgb,var(--ll-primary) 20%,transparent); border-top-color:var(--ll-primary); border-radius:50%; animation:llspin 1s linear infinite; } @keyframes llspin { to { transform:rotate(360deg); } } /* media + transcript panels on the session page */ .ll-video { width:100%; border-radius:10px; background:#000; } .ll-transcript { max-height:360px; overflow:auto; } .ll-tline { padding:7px 0; border-bottom:1px solid var(--ll-border); font-size:13px; } .ll-tline .tc { color:var(--ll-accent-d); font-weight:700; margin-right:8px; } .ll-tline .spk { font-weight:700; margin-right:6px; } /* ===== AdminLTE-style content header + breadcrumb ===== */ .ll-content-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:4px 2px 16px; margin-bottom:18px; border-bottom:1px solid var(--ll-border); } .ll-page-h1 { font-size:22px; font-weight:700; margin:0; color:var(--ll-text); letter-spacing:.2px; } .ll-breadcrumb { font-size:13px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .ll-breadcrumb a { color:var(--ll-primary); font-weight:600; text-decoration:none; } .ll-breadcrumb a:hover { color:var(--ll-accent-d); text-decoration:underline; } .ll-breadcrumb .sep { color:var(--ll-muted); } .ll-breadcrumb .current { color:var(--ll-muted); } @media (max-width:600px){ .ll-content-header{ flex-direction:column; align-items:flex-start; } } /* ===== Breadcrumb header bar (AdminLTE-style) ===== */ .ll-pagehead { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0 16px; margin-bottom:18px; border-bottom:1px solid var(--ll-border); flex-wrap:wrap; } .ll-pagehead h1 { font-size:22px; font-weight:700; margin:0; color:var(--ll-text); } .ll-crumbs { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ll-muted); flex-wrap:wrap; } .ll-crumbs a { color:var(--ll-primary); text-decoration:none; } .ll-crumbs a:hover { text-decoration:underline; } .ll-crumbs .sep { color:var(--ll-muted); opacity:.6; } .ll-crumbs .current { color:var(--ll-text); font-weight:600; } /* ===== Dashboard welcome banner ===== */ .ll-welcome { background:linear-gradient(120deg, color-mix(in srgb,var(--ll-primary) 10%,var(--ll-card)), var(--ll-card) 70%); border-left:4px solid var(--ll-accent); } .ll-stat .icon { transition: transform .15s ease; } .ll-card.ll-stat:hover .icon { transform: scale(1.06); } /* ===== Form sections (New Session Plan etc.) ===== */ .ll-form-section { margin-bottom:14px; } .ll-form-title { font-size:15px; font-weight:700; color:var(--ll-text); margin:0 0 2px; } .ll-form-title i { color:var(--ll-primary); margin-right:6px; } .ll-form-help { font-size:12.5px; color:var(--ll-muted); margin:0; } .req { color:#d9534f; } .ll-outcome-row { padding:8px; border:1px solid var(--ll-border); border-radius:8px; margin-bottom:8px; background:color-mix(in srgb,var(--ll-bg) 50%,transparent); } .form-label { font-weight:600; font-size:13px; color:var(--ll-text); margin-bottom:4px; } /* ===== Session list polish ===== */ .ll-classtag { display:inline-block; min-width:42px; text-align:center; font-weight:700; font-size:12px; padding:3px 8px; border-radius:6px; background:color-mix(in srgb,var(--ll-primary) 12%,transparent); color:var(--ll-primary); } .ll-sessions td, .ll-sessions th { vertical-align:middle; } /* status pill colours */ .ll-status-draft { background:#94a3b822; color:#475569; } .ll-status-media_uploaded{ background:#3b82f622; color:#1d4ed8; } .ll-status-transcribed { background:#06b6d422; color:#0e7490; } .ll-status-analysed { background:#f59e0b22; color:#b4770b; } .ll-status-validated { background:#10b98122; color:#047857; } .ll-status-closed { background:#1e6b3a22; color:#1e6b3a; } /* pagination tweak */ .pagination { --bs-pagination-color:var(--ll-primary); --bs-pagination-active-bg:var(--ll-primary); --bs-pagination-active-border-color:var(--ll-primary); } /* ===== Teacher simplified status pills ===== */ .ll-ts-upcoming { background:#3b82f622; color:#1d4ed8; } .ll-ts-awaiting { background:#f59e0b22; color:#b4770b; } .ll-ts-ready { background:#10b98122; color:#047857; } /* big score on detail page */ .ll-bigscore { font-size:46px; font-weight:800; line-height:1; color:var(--ll-primary); margin:6px 0; } /* ===================================================================== GLOBAL POLISH PASS — consistent look & feel across every page ===================================================================== */ /* Cards: consistent radius, subtle shadow, gentle hover lift */ .ll-card { border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); transition: box-shadow .18s ease, transform .18s ease; } .ll-card:hover { box-shadow: 0 4px 12px rgba(16,24,40,.08); } /* don't lift large content cards, only interactive stat cards */ .ll-card.ll-stat:hover { transform: translateY(-2px); } /* Consistent card section headings */ .ll-card h6 { font-size: 13px; font-weight: 700; letter-spacing:.02em; text-transform: uppercase; color: var(--ll-muted); } .ll-card h6 i { color: var(--ll-primary); } /* Buttons: consistent weight, radius, padding, focus ring */ .btn { border-radius: 9px; font-weight: 600; } .btn-ll:focus, .btn-ll-accent:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ll-primary) 28%, transparent); } .btn-sm { border-radius: 8px; } .btn-lg { border-radius: 11px; } /* Forms: consistent borders + a clear focus ring in the theme colour */ .form-control, .form-select { border-radius: 9px; border-color: var(--ll-border); font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease; } .form-control:focus, .form-select:focus { border-color: var(--ll-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ll-primary) 16%, transparent); } .form-label { font-weight: 600; font-size: 13px; color: var(--ll-text); margin-bottom: 5px; } .form-text { color: var(--ll-muted); } /* Tables: lighter header, comfortable rows, hover, rounded container */ .table { --bs-table-hover-bg: color-mix(in srgb, var(--ll-primary) 5%, transparent); margin-bottom: 0; } .table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing:.03em; color: var(--ll-muted); font-weight: 700; border-bottom: 1px solid var(--ll-border); background: color-mix(in srgb, var(--ll-bg) 60%, var(--ll-card)); } .table td, .table th { padding: 11px 14px; vertical-align: middle; } .table-responsive { border-radius: 12px; } /* Alerts: softer, themed */ .alert { border-radius: 11px; border: 1px solid transparent; font-size: 14px; } .alert-success { background: color-mix(in srgb, #10b981 10%, var(--ll-card)); border-color: color-mix(in srgb,#10b981 25%,transparent); color:#0d6e52; } .alert-danger { background: color-mix(in srgb, #ef4444 9%, var(--ll-card)); border-color: color-mix(in srgb,#ef4444 25%,transparent); color:#b02a37; } .alert-warning { background: color-mix(in srgb, #f59e0b 12%, var(--ll-card)); border-color: color-mix(in srgb,#f59e0b 30%,transparent); color:#9a6700; } /* Page header (breadcrumb) consistent rhythm */ .ll-pagehead { margin-bottom: 20px; } /* Badges a touch softer */ .badge { font-weight: 600; border-radius: 7px; padding: .4em .6em; } /* Consistent vertical rhythm: cards in a stack get equal gaps */ .ll-content > .ll-card + .ll-card, .ll-content > .row + .row { margin-top: 16px; } /* Definition lists (lesson context) tidy */ dl.row dt { color: var(--ll-muted); font-weight: 600; } dl.row dd { color: var(--ll-text); } /* Empty-state + muted helper text consistent */ .text-muted, .text-muted-ll { color: var(--ll-muted) !important; } /* Links inside content use the theme colour */ .ll-content a:not(.btn):not(.ll-step):not(.nav-link) { /* color: var(--ll-primary); */ /* disabled — content links use the default text colour */ } .ll-content a:not(.btn):hover { color: var(--ll-primary-2); } /* Make the spinner reusable + centered helper */ .ll-proc-spinner.mx-auto { margin-left:auto; margin-right:auto; } /* Responsive: comfortable padding on small screens */ @media (max-width: 576px) { .ll-content { padding: 16px; } .ll-card { padding: 14px; } } /* ===================================================================== Motion — global, tasteful animations across the whole app. GPU-friendly (opacity/transform only). Fully disabled under prefers-reduced-motion and when printing (so report PDFs are clean). ===================================================================== */ @keyframes llFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes llFadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } @keyframes llFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes llPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { /* ---- page entrance ---- */ .ll-content-header, .ll-pagehead { animation: llFadeDown .4s ease both; } .ll-content > .alert { animation: llFadeDown .4s ease both; } /* cards rise in, lightly staggered */ .ll-content .ll-card { animation: llFadeUp .5s cubic-bezier(.22,.61,.36,1) both; } .ll-content .ll-card:nth-of-type(2) { animation-delay: .06s; } .ll-content .ll-card:nth-of-type(3) { animation-delay: .12s; } .ll-content .ll-card:nth-of-type(4) { animation-delay: .18s; } .ll-content .ll-card:nth-of-type(n+5) { animation-delay: .22s; } /* table rows fade in */ .table tbody tr, .sp-table tbody tr { animation: llFadeIn .45s ease both; } /* ---- hover / press feedback ---- */ .ll-card { transition: transform .18s ease, box-shadow .18s ease; } .btn { transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .ll-nav a { transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .ll-nav a .ico { transition: transform .15s ease; } .ll-nav a:hover .ico { transform: translateX(3px); } .ll-stat .icon { transition: transform .2s ease; } .ll-card:hover .ll-stat .icon { transform: scale(1.06); } .ll-burger, .avatar { transition: transform .15s ease, background-color .15s ease; } /* ---- guest / login polish ---- */ .lc-brand { animation: llFadeIn .6s ease both; } .lc-card { animation: llFadeUp .55s cubic-bezier(.22,.61,.36,1) both; } } /* Never animate when printing a report. */ @media print { *, *::before, *::after { animation: none !important; transition: none !important; } /* A4 with sane margins for a Chairman-ready PDF. */ @page { size: A4; margin: 14mm; } /* Force colours/tiles to print (user must also tick "Background graphics"). */ *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Strip the app chrome so only the report content prints. */ html, body { background: #fff !important; } .ll-sidebar, .ll-header, .ll-footer, .ll-progress, .ll-toasts, .ll-burger, .ll-back, .ll-content-header, .dropdown-menu { display: none !important; } /* Let the content use the full page. */ .ll-shell { display: block !important; } .ll-main { margin: 0 !important; width: auto !important; } .ll-content { padding: 0 !important; } body.ll-collapsed .ll-sidebar { width: 0 !important; } /* No interactive controls in a printed report. */ .btn, button, .lc-btn, input[type="submit"], .d-print-none { display: none !important; } /* Flatten cards for print and keep them from splitting across pages. */ .ll-card, .ll-post-card, .ll-prio, .ll-metric, .ll-top3, .sch-card, .sp-card, .lw-card, .cb-card, .ag-card, .rc-card, .au-card { box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; } } /* ============================================================================ Shared filter bar — one look across Session Plans, My Subjects, Audit, Users. Inline "LABEL: control" chips in a white card with thin separators; controls are borderless so the card is the frame. Select2 controls match automatically. ============================================================================ */ .ll-filterbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--ll-card,#fff); border:1px solid var(--ll-border,#e5e9f0); border-radius:12px; padding:6px 10px; } .ll-filterbar .form-select, .ll-filterbar .form-control{ border:0; box-shadow:none; background:transparent; font-size:13px; font-weight:500; width:auto; } .ll-filterbar .form-select:focus, .ll-filterbar .form-control:focus{ box-shadow:none; } .ll-fb-lab{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ll-muted,#6b7280); padding-left:6px; white-space:nowrap; } .ll-fb-sep{ width:1px; align-self:stretch; background:var(--ll-border,#e5e9f0); margin:2px 0; } .ll-fb-search{ position:relative; } .ll-fb-search i{ position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--ll-muted,#6b7280); font-size:13px; } .ll-fb-search input{ padding-left:28px !important; } .ll-fb-spacer{ flex:1 1 auto; } /* Select2 single-selects inside a filter bar adopt the same borderless look. */ .ll-filterbar .select2-container{ min-width:118px; } .ll-filterbar .select2-container--default .select2-selection--single{ border:0; background:transparent; height:31px; display:flex; align-items:center; } .ll-filterbar .select2-container--default .select2-selection--single .select2-selection__rendered{ padding:0 22px 0 6px; font-size:13px; font-weight:600; color:var(--ll-text,#1f2937); line-height:31px; } .ll-filterbar .select2-container--default .select2-selection--single .select2-selection__arrow{ height:29px; } .ll-filterbar .select2-container--default.select2-container--disabled .select2-selection--single{ opacity:.5; } /* Select2 dropdown panel — shared polish across the app. */ .select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--ll-primary,#1F4E79); } .select2-dropdown{ border-color:var(--ll-border,#e5e9f0); border-radius:10px; box-shadow:0 8px 24px rgba(16,24,40,.12); } .select2-container--default .select2-search--dropdown .select2-search__field{ border-color:var(--ll-border,#e5e9f0); border-radius:7px; } @media (max-width:640px){ .ll-filterbar{ gap:6px 8px; } .ll-fb-sep{ display:none; } .ll-filterbar .form-select, .ll-filterbar .form-control, .ll-filterbar .select2-container{ width:100%; flex:1 1 100%; } }