/** * Akili brand layer * ============================================================================= * Loaded after vendor/css/core.css, and replaces the stock demo.css. * * Sneat drives almost everything from CSS custom properties, so most of this * file re-tokenises rather than fighting selectors. The only components that * bake the vendor purple into local vars are .btn-primary / .btn-outline-primary * / .progress, so those are restated explicitly below. */ /* 1. Brand tokens * -------------------------------------------------------------------------- */ :root { /* Jade — the primary. Chosen to read as growth/learning and to sit apart from the indigo-purple that every admin panel ships with. */ --akili-jade-900: #06342b; --akili-jade-800: #094a3f; --akili-jade-700: #0b5a4c; --akili-jade-600: #0e6f5e; /* primary */ --akili-jade-400: #4c9e8e; --akili-jade-100: #e3f1ee; /* Amber — accent only. Used for term/period context and highlights, never as a button. */ --akili-amber-600: #b4741a; --akili-amber-500: #e0a030; --akili-amber-100: #fbf0dc; --akili-primary-rgb: 14, 111, 94; --akili-accent-rgb: 224, 160, 48; --akili-shadow-xs: 0 1px 2px rgba(9, 45, 38, 0.05); --akili-shadow-sm: 0 1px 3px rgba(9, 45, 38, 0.07), 0 1px 2px rgba(9, 45, 38, 0.04); } /* 2. Re-tokenise Bootstrap/Sneat * -------------------------------------------------------------------------- */ :root, [data-bs-theme='light'] { --bs-primary: var(--akili-jade-600); --bs-primary-rgb: var(--akili-primary-rgb); --bs-primary-text-emphasis: var(--akili-jade-800); --bs-primary-bg-subtle: var(--akili-jade-100); --bs-primary-border-subtle: #b9dcd4; /* Warm the page background very slightly so it sits under jade rather than fighting it (stock Sneat is a cold #f7f7f9). */ --bs-body-bg: #f3f6f5; --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } [data-bs-theme='dark'] { /* Deep jade goes muddy on dark; lift it for contrast. */ --bs-primary: #17957e; --bs-primary-rgb: 23, 149, 126; --bs-primary-text-emphasis: #6fc3b1; --bs-primary-bg-subtle: #10382f; --bs-primary-border-subtle: #1d5a4c; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Numbers are the whole job in a school system — marks, fees, counts. Tabular figures keep columns aligned and stop totals from dancing. */ .table, .akili-figure { font-variant-numeric: tabular-nums; } /* Sidebar: deep jade brand chrome instead of the vendor's generic dark navy. * Activated via data-semidark-menu="true" on (layouts/app.blade.php) - * that flips the --bs-menu-* variables the vendor CSS already reads, so this * only needs to retint them, not fight selectors. Kept stable across the * light/dark content-theme toggle (explicit jade tokens, not --bs-primary, * which itself shifts between themes) since the sidebar is brand chrome, not * page content. */ [data-semidark-menu='true'] { --bs-menu-bg: var(--akili-jade-900); --bs-menu-color: var(--akili-jade-100); --bs-menu-hover-bg: var(--akili-jade-800); --bs-menu-hover-color: #fff; --bs-menu-active-bg: var(--akili-jade-600); --bs-menu-active-color: #fff; --bs-menu-sub-active-bg: var(--akili-jade-800); --bs-menu-sub-active-color: #fff; --bs-menu-item-icon-color: var(--akili-jade-100); --bs-menu-divider-color: var(--akili-jade-800); --bs-menu-box-shadow: 0 0 0 1px var(--akili-jade-800); } /* Not covered by --bs-menu-*: these read global heading/secondary-text tokens, which stay dark since the rest of the app is light-on-white. */ #layout-menu .app-brand-text { color: #fff; } #layout-menu .menu-header-text { color: color-mix(in sRGB, var(--akili-jade-100) 65%, transparent); } /* Top app bar: same deep jade as the sidebar, one continuous brand surface. * Swapping the vendor's .bg-navbar-theme for a plain bg-* class opts into * its own dark-friendly rule for the theme-switcher/avatar dropdown toggles * (.layout-navbar[class*=bg-]:not(.bg-navbar-theme) ... { color: white }), * so only the --bs-navbar-* tokens and the school-name text need retinting. */ .bg-akili-navbar { background-color: var(--akili-jade-900) !important; box-shadow: 0 2px 12px rgba(6, 52, 43, 0.25); --bs-navbar-color: var(--akili-jade-100); --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff; --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #fff; --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.15); } .akili-navbar-title { color: #fff; } .akili-navbar-subtitle { color: color-mix(in sRGB, var(--akili-jade-100) 65%, transparent); } /* Sidebar module focus — narrows the menu to one module (akili-module-focus.js). * Sits on the deep jade rail, so it needs its own treatment rather than the * default light form-select. */ .akili-module-focus { padding: 0 1.25rem 0.75rem; } .akili-module-focus .form-select { background-color: color-mix(in sRGB, #fff 8%, transparent); border-color: color-mix(in sRGB, #fff 16%, transparent); color: var(--akili-jade-100); /* The vendor caret is a dark SVG; swap it for a light one. */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e3f1ee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .akili-module-focus .form-select:focus { border-color: var(--akili-jade-400); box-shadow: 0 0 0 0.15rem color-mix(in sRGB, var(--akili-jade-400) 25%, transparent); } .akili-module-focus .form-select option { /* Native option lists are drawn by the OS and ignore the control's colours. */ color: var(--bs-body-color); background: var(--bs-paper-bg); } /* Menu entries filtered out by the module focus. */ .akili-module-hidden { display: none !important; } /* No room for it in the collapsed rail, and the headers are dots there anyway. */ .layout-menu-collapsed .layout-menu:not(:hover) .akili-module-focus { display: none; } /* Searchable selects (select2, applied app-wide by akili-select.js). * The vendor theme already matches our inputs' height, border and type; only * the corner radius is out by 2px, which shows when a select sits beside a * text input in the same row. */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .select2-container--default .select2-dropdown { border-radius: 8px; } /* Keep the focused control on brand rather than the vendor's blue. */ .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--bs-primary); } /* 3. Components that hardcode the vendor purple * -------------------------------------------------------------------------- */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--akili-jade-700); --bs-btn-hover-border-color: var(--akili-jade-700); --bs-btn-active-bg: var(--akili-jade-800); --bs-btn-active-border-color: var(--akili-jade-800); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--akili-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--akili-jade-700); --bs-btn-active-border-color: var(--akili-jade-700); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--akili-primary-rgb); } .progress { --bs-progress-bar-bg: var(--bs-primary); } /* 4. Surfaces * -------------------------------------------------------------------------- */ .card { border: 1px solid var(--bs-border-color); box-shadow: var(--akili-shadow-xs); } .card-header { padding-block: 1rem; border-block-end: 1px solid var(--bs-border-color); background: transparent; } .akili-card-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; margin: 0; } /* 5. Brand mark * -------------------------------------------------------------------------- */ .app-brand-text { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--bs-heading-color); } /* 6. Page header * -------------------------------------------------------------------------- */ .akili-eyebrow { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--akili-amber-600); background: var(--akili-amber-100); padding: 0.25rem 0.5rem; border-radius: 0.375rem; } [data-bs-theme='dark'] .akili-eyebrow { color: #e9b962; background: #3a2c12; } .akili-page-title { font-size: 1.4rem; font-weight: 680; letter-spacing: -0.02em; line-height: 1.2; margin: 0.5rem 0 0.25rem; color: var(--bs-heading-color); } .akili-page-sub { font-size: 0.875rem; color: var(--bs-secondary-color); margin: 0; } /* 7. Stat tile * A left accent rule instead of the icon-in-a-coloured-circle cliché: * it carries the category colour without competing with the figure. * -------------------------------------------------------------------------- */ .akili-stat { position: relative; block-size: 100%; padding: 1.125rem 1.25rem 1.25rem 1.375rem; border-radius: 0.75rem; background: var(--bs-paper-bg); border: 1px solid var(--bs-border-color); box-shadow: var(--akili-shadow-xs); overflow: hidden; } .akili-stat::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--akili-tile-accent, var(--bs-primary)); } .akili-stat__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bs-secondary-color); margin: 0; } .akili-stat__figure { font-size: 1.875rem; font-weight: 680; line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--bs-heading-color); margin: 0.375rem 0 0.25rem; } .akili-stat__figure small { font-size: 1.125rem; font-weight: 500; color: var(--bs-secondary-color); letter-spacing: -0.01em; } /* Money figures are shown in full (no M/k abbreviation), so they run much * longer than a plain count — a smaller size keeps them on one line in a * quarter-width tile instead of wrapping or overflowing. */ .akili-stat__figure--money { font-size: 1.375rem; letter-spacing: -0.01em; } .akili-stat__meta { font-size: 0.8125rem; color: var(--bs-secondary-color); margin: 0; } .akili-stat__icon { position: absolute; inset-block-start: 1.125rem; inset-inline-end: 1.125rem; font-size: 1.375rem; line-height: 1; color: var(--akili-tile-accent, var(--bs-primary)); opacity: 0.22; } /* 8. Split bar — two-part proportions (boys/girls, teaching/support). * Replaces a 2-segment doughnut: same information, a fraction of the space, * readable at a glance. * -------------------------------------------------------------------------- */ .akili-split { display: flex; block-size: 6px; border-radius: 999px; overflow: hidden; background: var(--bs-border-color); margin-block-start: 0.625rem; } .akili-split__seg { block-size: 100%; transition: inline-size 0.3s ease; } .akili-legend { display: flex; gap: 1rem; margin-block-start: 0.5rem; font-size: 0.75rem; color: var(--bs-secondary-color); } .akili-legend__dot { display: inline-block; inline-size: 7px; block-size: 7px; border-radius: 999px; margin-inline-end: 0.375rem; vertical-align: 1px; } /* 9. Data tables * -------------------------------------------------------------------------- */ .akili-table thead th { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bs-secondary-color); background: transparent; border-block-end: 1px solid var(--bs-border-color); padding-block: 0.75rem; } .akili-table tbody td { padding-block: 0.75rem; vertical-align: middle; border-block-end: 1px solid var(--bs-border-color); } .akili-table tbody tr:last-child td { border-block-end: 0; } .akili-table tbody tr:hover { background: var(--akili-jade-100); } [data-bs-theme='dark'] .akili-table tbody tr:hover { background: rgba(23, 149, 126, 0.08); } .akili-adm { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 0.375rem; padding: 0.125rem 0.4375rem; } .akili-avatar { inline-size: 30px; block-size: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 600; flex: 0 0 auto; } /* 10. School identity mark * The school's logo (or initials) — used on the sign-in screen and anywhere * the school, rather than Akili, is the subject. * -------------------------------------------------------------------------- */ .akili-school-plate { --akili-mark-size: 48px; inline-size: var(--akili-mark-size); block-size: var(--akili-mark-size); border-radius: calc(var(--akili-mark-size) * 0.22); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; background: #fff; border: 1px solid var(--bs-border-color); } /* Uploaded logos are arbitrary shapes and colours: contain them on a white plate rather than cropping, so nothing important gets cut off. */ .akili-school-plate__img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 12%; } .akili-school-plate--initials { background: linear-gradient(135deg, var(--akili-jade-600), var(--akili-jade-800)); border-color: transparent; color: #fff; font-weight: 700; font-size: calc(var(--akili-mark-size) * 0.36); line-height: 1; } .akili-school-plate--light { background: #fff; border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 10px 28px rgba(4, 32, 26, 0.28); } .akili-school-plate--light.akili-school-plate--initials { background: #fff; color: var(--akili-jade-700); } /* 11. Sign-in cover * The school's front door. Their identity leads; Akili recedes to a footnote. * -------------------------------------------------------------------------- */ .akili-auth-cover { position: relative; overflow: hidden; background: radial-gradient(900px 480px at 22% 12%, rgba(76, 158, 142, 0.38), transparent 62%), linear-gradient(150deg, var(--akili-jade-600) 0%, var(--akili-jade-800) 55%, var(--akili-jade-900) 100%); } /* Faint dot field, faded at the edges — texture without noise. */ .akili-auth-cover::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 62% at 50% 42%, #000, transparent); mask-image: radial-gradient(70% 62% at 50% 42%, #000, transparent); pointer-events: none; } .akili-auth-cover__inner { position: relative; z-index: 1; text-align: center; max-inline-size: 26rem; } .akili-auth-cover__name { color: #fff; font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; margin: 1.5rem 0 0.5rem; } .akili-auth-cover__type { color: rgba(255, 255, 255, 0.7); font-size: 0.9375rem; margin: 0; } .akili-auth-cover__rule { inline-size: 40px; block-size: 3px; border-radius: 999px; background: var(--akili-amber-500); margin: 1.5rem auto 0; } .akili-auth-cover__foot { position: absolute; inset-block-end: 1.75rem; inset-inline: 0; z-index: 1; text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; letter-spacing: 0.02em; } /* Form side */ .akili-auth-head { margin-block-end: 2rem; } .akili-auth-title { font-size: 1.375rem; font-weight: 660; letter-spacing: -0.02em; margin: 0 0 0.25rem; color: var(--bs-heading-color); } .akili-auth-sub { font-size: 0.875rem; color: var(--bs-secondary-color); margin: 0; } .akili-auth-school { font-weight: 600; color: var(--bs-heading-color); } .akili-auth-foot { margin-block-start: 2rem; text-align: center; font-size: 0.75rem; color: var(--bs-secondary-color); } /* 12. Financial statements * -------------------------------------------------------------------------- */ .akili-fin-table { width: 100%; font-variant-numeric: tabular-nums; } .akili-fin-table th { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bs-secondary-color); border-block-end: 1px solid var(--bs-border-color); padding: 0.625rem 0.75rem; } .akili-fin-table td { padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--bs-border-color); vertical-align: middle; } .akili-fin-table .num { text-align: end; font-variant-numeric: tabular-nums; } .akili-fin-table .code { color: var(--bs-secondary-color); font-size: 0.8125rem; font-variant-numeric: tabular-nums; } /* Section subtotal / grand-total rows */ .akili-fin-table tr.subtotal td { font-weight: 600; border-block-start: 1px solid var(--bs-border-color); border-block-end: none; background: var(--bs-body-bg); } .akili-fin-table tr.grand td { font-weight: 700; font-size: 1.0625rem; color: var(--bs-heading-color); border-block: 2px solid var(--bs-primary); background: var(--akili-jade-100); } [data-bs-theme='dark'] .akili-fin-table tr.grand td { background: rgba(23, 149, 126, 0.1); } .akili-fin-section { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bs-primary); padding-block: 0.75rem 0.375rem; } .akili-surplus { color: var(--akili-jade-600); } .akili-deficit { color: var(--bs-danger); } [data-bs-theme='dark'] .akili-surplus { color: #35b89e; } /* Balanced / unbalanced pill for the trial balance */ .akili-balance-pill { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; padding: 0.3125rem 0.75rem; border-radius: 999px; } .akili-balance-pill--ok { color: var(--akili-jade-700); background: var(--akili-jade-100); } .akili-balance-pill--off { color: #9a2a2a; background: #fbe3e3; } /* KPI row on the hub */ .akili-kpi { padding: 1rem 1.25rem; border-radius: 0.75rem; border: 1px solid var(--bs-border-color); background: var(--bs-paper-bg); block-size: 100%; } .akili-kpi__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bs-secondary-color); margin: 0; } .akili-kpi__value { font-size: 1.5rem; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0.25rem 0 0; color: var(--bs-heading-color); } /* Report link cards on the hub */ .akili-report-link { display: flex; gap: 0.875rem; padding: 1.125rem 1.25rem; border-radius: 0.75rem; border: 1px solid var(--bs-border-color); background: var(--bs-paper-bg); text-decoration: none; color: inherit; block-size: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .akili-report-link:hover { border-color: var(--bs-primary); box-shadow: var(--akili-shadow-sm); transform: translateY(-1px); color: inherit; } .akili-report-link__icon { flex: 0 0 auto; inline-size: 40px; block-size: 40px; border-radius: 0.625rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; background: var(--akili-jade-100); color: var(--akili-jade-700); } [data-bs-theme='dark'] .akili-report-link__icon { background: rgba(23, 149, 126, 0.14); color: #4fc0aa; } .akili-report-link__title { font-weight: 600; margin: 0 0 0.125rem; color: var(--bs-heading-color); } .akili-report-link__desc { font-size: 0.8125rem; color: var(--bs-secondary-color); margin: 0; } /* Print: drop chrome, show just the statement */ @media print { .layout-menu, .layout-navbar, .content-footer, .akili-noprint { display: none !important; } .layout-page, .content-wrapper, .container-fluid { margin: 0 !important; padding: 0 !important; } .card { border: none !important; box-shadow: none !important; } body { background: #fff !important; } } /* 13. AI assistant widget * -------------------------------------------------------------------------- */ .akili-ai-launcher { position: fixed; inset-block-end: 1.5rem; inset-inline-end: 1.5rem; z-index: 1050; inline-size: 56px; block-size: 56px; border-radius: 999px; border: none; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, var(--akili-jade-600), var(--akili-jade-800)); box-shadow: 0 10px 26px rgba(9, 45, 38, 0.35); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .akili-ai-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(9, 45, 38, 0.42); } .akili-ai-panel { position: fixed; inset-block-end: 1.5rem; inset-inline-end: 1.5rem; z-index: 1051; inline-size: min(380px, calc(100vw - 2rem)); max-block-size: min(600px, calc(100vh - 3rem)); display: none; flex-direction: column; border-radius: 1rem; overflow: hidden; background: var(--bs-paper-bg); border: 1px solid var(--bs-border-color); box-shadow: 0 18px 48px rgba(9, 45, 38, 0.28); } .akili-ai-panel.open { display: flex; } .akili-ai-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1rem; color: #fff; background: linear-gradient(135deg, var(--akili-jade-600), var(--akili-jade-800)); } .akili-ai-head__title { font-weight: 600; font-size: 0.9375rem; line-height: 1.1; } .akili-ai-head__sub { font-size: 0.75rem; opacity: 0.8; } .akili-ai-head__close { margin-inline-start: auto; background: transparent; border: none; color: #fff; opacity: 0.85; font-size: 1.25rem; cursor: pointer; line-height: 1; } .akili-ai-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.625rem; background: var(--bs-body-bg); } .akili-ai-msg { max-inline-size: 85%; padding: 0.5rem 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; } .akili-ai-msg--user { align-self: flex-end; background: var(--bs-primary); color: #fff; border-end-end-radius: 0.25rem; } .akili-ai-msg--bot { align-self: flex-start; background: var(--bs-paper-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); border-end-start-radius: 0.25rem; } .akili-ai-msg--note { align-self: center; font-size: 0.75rem; color: var(--bs-secondary-color); background: transparent; text-align: center; } .akili-ai-typing { display: inline-flex; gap: 3px; } .akili-ai-typing span { inline-size: 6px; block-size: 6px; border-radius: 999px; background: var(--bs-secondary-color); animation: akili-ai-bounce 1.2s infinite ease-in-out both; } .akili-ai-typing span:nth-child(2) { animation-delay: 0.15s; } .akili-ai-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes akili-ai-bounce { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } } .akili-ai-foot { padding: 0.625rem; border-block-start: 1px solid var(--bs-border-color); background: var(--bs-paper-bg); } .akili-ai-foot form { display: flex; gap: 0.5rem; align-items: flex-end; } .akili-ai-foot textarea { flex: 1; resize: none; max-block-size: 5rem; border: 1px solid var(--bs-border-color); border-radius: 0.5rem; padding: 0.5rem 0.625rem; font-size: 0.875rem; background: var(--bs-body-bg); color: var(--bs-body-color); } .akili-ai-foot textarea:focus { outline: none; border-color: var(--bs-primary); } .akili-ai-disclaimer { font-size: 0.6875rem; color: var(--bs-secondary-color); text-align: center; margin-block-start: 0.375rem; } /* 14. Empty state * -------------------------------------------------------------------------- */ .akili-empty { text-align: center; padding-block: 2.5rem; color: var(--bs-secondary-color); } .akili-empty__icon { font-size: 2rem; opacity: 0.3; display: block; margin-block-end: 0.5rem; } /* ------------------------------------------------------------------ * * Coloured action buttons * * Table row actions (edit, delete, view, print…) are plain icon buttons. * Colour them by the icon they contain — one rule, applied everywhere — so * the meaning reads at a glance: primary = edit, danger = delete, info = * view, success = confirm, warning = reverse. The extra specificity of * `.btn.btn-icon` overrides the theme's grey `btn-text-secondary`. * ------------------------------------------------------------------ */ .btn.btn-icon:has(.ri-pencil-line), .btn.btn-icon:has(.ri-edit-line), .btn.btn-icon:has(.ri-edit-2-line) { color: var(--bs-primary); background-color: rgba(var(--bs-primary-rgb), 0.08); } .btn.btn-icon:has(.ri-eye-line), .btn.btn-icon:has(.ri-history-line), .btn.btn-icon:has(.ri-id-card-line) { color: var(--bs-info); background-color: rgba(var(--bs-info-rgb), 0.08); } .btn.btn-icon:has(.ri-delete-bin-line), .btn.btn-icon:has(.ri-close-line), .btn.btn-icon:has(.ri-close-circle-line) { color: var(--bs-danger); background-color: rgba(var(--bs-danger-rgb), 0.08); } .btn.btn-icon:has(.ri-check-line), .btn.btn-icon:has(.ri-check-double-line) { color: var(--bs-success); background-color: rgba(var(--bs-success-rgb), 0.08); } .btn.btn-icon:has(.ri-arrow-go-back-line) { color: var(--bs-warning); background-color: rgba(var(--bs-warning-rgb), 0.08); } .btn.btn-icon:has(.ri-printer-line), .btn.btn-icon:has(.ri-download-2-line) { color: var(--bs-secondary); background-color: rgba(var(--bs-secondary-rgb), 0.10); } /* A firmer, filled tint on hover/focus for whichever colour applies. */ .btn.btn-icon:has(.ri-pencil-line):hover, .btn.btn-icon:has(.ri-edit-line):hover, .btn.btn-icon:has(.ri-edit-2-line):hover { background-color: rgba(var(--bs-primary-rgb), 0.18); } .btn.btn-icon:has(.ri-eye-line):hover, .btn.btn-icon:has(.ri-history-line):hover, .btn.btn-icon:has(.ri-id-card-line):hover { background-color: rgba(var(--bs-info-rgb), 0.18); } .btn.btn-icon:has(.ri-delete-bin-line):hover, .btn.btn-icon:has(.ri-close-line):hover, .btn.btn-icon:has(.ri-close-circle-line):hover { background-color: rgba(var(--bs-danger-rgb), 0.18); } .btn.btn-icon:has(.ri-check-line):hover, .btn.btn-icon:has(.ri-check-double-line):hover { background-color: rgba(var(--bs-success-rgb), 0.18); } .btn.btn-icon:has(.ri-arrow-go-back-line):hover { background-color: rgba(var(--bs-warning-rgb), 0.18); } .btn.btn-icon:has(.ri-printer-line):hover, .btn.btn-icon:has(.ri-download-2-line):hover { background-color: rgba(var(--bs-secondary-rgb), 0.20); }