` or ``. Everything is reached through element
selectors and the Bootstrap classes already in the markup.
-----------------*/
.data-table {
position: relative;
overflow: auto;
}
.data-table .dt-detail p {
white-space: normal;
}
.data-table {
/*-----------------
Table shell
-----------------*/
}
.data-table > .table,
.data-table > .table-responsive > .table {
width: 100%;
margin-bottom: 0;
border-collapse: separate;
border-spacing: 0;
/* Bootstrap paints cell backgrounds through this variable; clearing it
lets the rules below own the surface and hover colours */
--bs-table-bg: transparent;
--bs-table-accent-bg: transparent;
}
.data-table > .table > thead > tr > th,
.data-table > .table-responsive > .table > thead > tr > th {
position: sticky;
top: 0;
z-index: 5;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 14px 16px;
border-bottom: 1px solid var(--bs-border-color);
border-top: 0;
white-space: nowrap;
user-select: none;
vertical-align: middle;
}
.data-table > .table > tbody > tr > td,
.data-table > .table > tbody > tr > th,
.data-table > .table-responsive > .table > tbody > tr > td,
.data-table > .table-responsive > .table > tbody > tr > th {
padding: 10px 12px;
border-bottom: 1px solid var(--bs-border-color);
border-top: 0;
vertical-align: middle;
font-size: 13px;
background: var(--bs-body-bg);
transition: background var(--transition);
}
.data-table > .table > tbody > tr:hover > td,
.data-table > .table > tbody > tr:hover > th,
.data-table > .table-responsive > .table > tbody > tr:hover > td,
.data-table > .table-responsive > .table > tbody > tr:hover > th {
background: var(--bs-tertiary-bg);
}
.data-table > .table,
.data-table > .table-responsive > .table {
/* a checked row reads as selected without needing a class */
}
.data-table > .table > tbody > tr:has(input[type=checkbox]:checked) > td,
.data-table > .table > tbody > tr:has(input[type=checkbox]:checked) > th,
.data-table > .table-responsive > .table > tbody > tr:has(input[type=checkbox]:checked) > td,
.data-table > .table-responsive > .table > tbody > tr:has(input[type=checkbox]:checked) > th {
background: var(--tint-primary);
}
.data-table > .table > tbody > tr:last-child > td,
.data-table > .table > tbody > tr:last-child > th,
.data-table > .table-responsive > .table > tbody > tr:last-child > td,
.data-table > .table-responsive > .table > tbody > tr:last-child > th {
border-bottom: 0;
}
.data-table {
/*-----------------
Cell contents
No sizing is imposed here — avatars, badges and action buttons keep
whatever the existing `.avatar`, `.badge` and `.btn` components give
them. The table only makes sure they sit on the row's centre line.
-----------------*/
}
.data-table .table > tbody > tr > td > .d-flex,
.data-table .table > tbody > tr > td > .dropdown,
.data-table .table > tbody > tr > th > .d-flex,
.data-table .table > tbody > tr > th > .dropdown {
align-items: center;
}
.data-table {
/*-----------------
Responsive — the header stays put and the grid scrolls sideways
-----------------*/
}
@media (max-width: 991.98px) {
.data-table > .table > thead > tr > th,
.data-table > .table-responsive > .table > thead > tr > th {
padding: 12px;
}
.data-table > .table > tbody > tr > td,
.data-table > .table > tbody > tr > th,
.data-table > .table-responsive > .table > tbody > tr > td,
.data-table > .table-responsive > .table > tbody > tr > th {
padding: 10px;
}
}
/*-----------------
Grid extras
The pieces a data grid needs beyond a plain table: a user cell, status
pill, row actions, expander and detail row. They live here so a page only
ever reaches for `.data-table` and its `dt-` children, instead of
borrowing another page's prefix and then overriding the sizing.
-----------------*/
.data-table .dt-user {
display: flex;
align-items: center;
gap: 10px;
}
.data-table .dt-user .dt-avatar {
position: relative;
width: 38px;
height: 38px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--bs-border-color);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}
.data-table .dt-user .dt-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.data-table .dt-user .dt-name {
font-size: 13.5px;
font-weight: 600;
color: var(--bs-heading-color, #111827);
line-height: 1.2;
text-decoration: none;
}
.data-table .dt-user .dt-name:hover {
color: var(--bs-primary);
}
.data-table .dt-user .dt-sub {
font-size: 11.5px;
color: var(--bs-secondary-color);
margin-top: 1px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.data-table .dt-user .dt-sub .dt-dot {
opacity: 0.5;
}
.data-table .dt-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
padding: 5px 11px;
border-radius: 999px;
line-height: 1;
}
.data-table .dt-pill .dt-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.data-table .dt-pill.is-active {
background: rgba(22, 163, 74, 0.12);
color: #15803d;
}
.data-table .dt-pill.is-inactive {
background: rgba(107, 114, 128, 0.14);
color: #4b5563;
}
.data-table .dt-pill.is-new {
background: rgba(8, 145, 178, 0.12);
color: #0e7490;
}
.data-table .dt-pill.is-archived {
background: rgba(123, 97, 255, 0.12);
color: #6d28d9;
}
.data-table .dt-pill.is-pending {
background: rgba(245, 158, 11, 0.14);
color: #b45309;
}
.data-table .dt-pill.is-emergency {
background: rgba(220, 38, 38, 0.12);
color: #b91c1c;
}
.data-table .dt-pill.is-exam {
background: rgba(219, 39, 119, 0.12);
color: #be185d;
}
.data-table .dt-actions {
display: flex;
align-items: center;
gap: 4px;
justify-content: flex-end;
}
.data-table .dt-ib {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
text-decoration: none;
transition: all var(--transition);
}
.data-table .dt-ib i {
font-size: 14px;
}
.data-table .dt-ib:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.data-table .dt-ib.success {
color: #16a34a;
}
.data-table .dt-ib.success:hover {
border-color: #16a34a;
color: #16a34a;
background: rgba(22, 163, 74, 0.08);
}
.data-table .dt-ib.danger {
color: #dc2626;
}
.data-table .dt-ib.danger:hover {
border-color: #dc2626;
color: #dc2626;
background: rgba(220, 38, 38, 0.08);
}
.data-table .dt-sortable {
cursor: pointer;
transition: color var(--transition);
}
.data-table .dt-sortable:hover {
color: var(--bs-primary);
}
.data-table .dt-sortable .dt-sort-ic {
font-size: 14px;
opacity: 0.5;
vertical-align: middle;
transition: transform var(--transition), opacity var(--transition);
}
.data-table .dt-sortable.dt-sort-asc .dt-sort-ic {
opacity: 1;
color: var(--bs-primary);
}
.data-table .dt-sortable.dt-sort-desc .dt-sort-ic {
opacity: 1;
color: var(--bs-primary);
transform: rotate(180deg);
}
.data-table .dt-resize {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 6px;
cursor: col-resize;
opacity: 0;
}
.data-table > .table > thead > tr > th:hover .dt-resize {
opacity: 1;
background: var(--tint-primary);
}
.data-table .dt-expand {
width: 26px;
height: 26px;
border-radius: 7px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
}
.data-table .dt-expand i {
transition: transform var(--transition);
}
.data-table .dt-expand[aria-expanded=true] {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: var(--bs-body-bg);
}
.data-table .dt-expand[aria-expanded=true] i {
transform: rotate(90deg);
}
.data-table > .table > tbody > tr.dt-detail > td {
padding: 0 !important;
background: var(--bs-secondary-bg) !important;
border-bottom: 0;
}
.data-table .dt-detail-inner {
display: none;
padding: 18px 20px;
}
.data-table > .table > tbody > tr.dt-detail.open > td {
border-bottom: 1px solid var(--bs-border-color);
}
.data-table > .table > tbody > tr.dt-detail.open .dt-detail-inner {
display: block;
}
.data-table > .table > tbody > tr:last-child > td,
.data-table > .table > tbody > tr:last-child > th {
border-bottom: 0;
}
/*-----------------
Selection column
A checkbox that matches the grid rather than the browser default, plus the
sticky first column it usually sits in.
-----------------*/
.data-table .dt-check {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1.8px solid var(--bs-border-color);
border-radius: 5px;
background: var(--bs-body-bg);
cursor: pointer;
position: relative;
transition: all var(--transition);
vertical-align: middle;
}
.data-table .dt-check:hover {
border-color: var(--bs-primary);
}
.data-table .dt-check:checked, .data-table .dt-check:indeterminate {
background: var(--bs-primary);
border-color: var(--bs-primary);
}
.data-table .dt-check:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1.5px;
width: 5px;
height: 9px;
border: solid var(--bs-body-bg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.data-table .dt-check:indeterminate::after {
content: "";
position: absolute;
left: 3px;
top: 6px;
width: 8px;
height: 2px;
background: var(--bs-body-bg);
border-radius: 1px;
}
.data-table > .table > thead > tr > th.dt-pin,
.data-table > .table > tbody > tr > td.dt-pin {
position: sticky;
left: 0;
z-index: 4;
background: var(--bs-body-bg);
}
.data-table > .table > thead > tr > th.dt-pin {
z-index: 6;
background: var(--bs-secondary-bg);
}
/* ============================================================
Opt-in mobile card mode — add `.dt-cards` to a `.data-table`
and below the lg breakpoint its rows become stacked cards
with sticky action buttons. Desktop is untouched; pages that
don't opt in keep the horizontally-scrolling grid.
============================================================ */
@media (max-width: 991.98px) {
.data-table.dt-cards {
overflow: visible;
}
.data-table.dt-cards > .table {
display: block;
}
.data-table.dt-cards > .table > thead {
display: none;
}
.data-table.dt-cards > .table > tbody {
display: block;
}
.data-table.dt-cards > .table > tbody > tr.dt-row {
display: block;
position: relative;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
margin: 0 12px 12px;
padding: 42px 14px 6px;
background: var(--bs-body-bg);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
}
.data-table.dt-cards > .table > tbody > tr.dt-row.dt-selected {
box-shadow: 0 0 0 2px var(--bs-primary) inset;
}
.data-table.dt-cards > .table > tbody > tr.dt-row > td {
display: block;
width: auto !important;
border: 0 !important;
padding: 6px 0;
}
.data-table.dt-cards > .table > tbody > tr.dt-row > td.dt-pin,
.data-table.dt-cards > .table > tbody > tr.dt-row > td.card-expand-toggle {
position: absolute;
top: 10px;
width: auto !important;
padding: 0;
background: transparent;
}
.data-table.dt-cards > .table > tbody > tr.dt-row > td.dt-pin {
left: 14px;
}
.data-table.dt-cards > .table > tbody > tr.dt-row > td.card-expand-toggle {
right: 14px;
}
.data-table.dt-cards > .table > tbody > tr.dt-row > td:last-child {
position: sticky;
bottom: 0;
z-index: 1;
margin-top: 8px;
padding: 8px 0 2px;
border-top: 1px solid var(--bs-border-color) !important;
background: var(--bs-body-bg);
}
.data-table.dt-cards > .table > tbody > tr.dt-row > td:last-child .dt-actions {
justify-content: flex-start;
flex-wrap: wrap;
}
.data-table.dt-cards > .table > tbody > tr.dt-detail {
display: block;
border: 0;
}
.data-table.dt-cards > .table > tbody > tr.dt-detail > td {
display: block;
padding: 0 12px;
}
.data-table.dt-cards > .table > tbody > tr.dt-detail:not(.open) {
display: none;
}
}
/* ============================================================
CARD TOOLBAR / QUICKBAR / FOOTER
Workspace chrome for a `.data-table` card — toolbar, quick
filters, filter chips, empty state and pagination footer.
Renamed from the sw-* workspace set so the data-table card
owns these as self-contained components. Colour tokens come
from the `--sw-*` custom properties set on `.data-workspace`
with plain fallbacks for standalone use.
============================================================ */
/* ---------- Toolbar ---------- */
.card-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
width: 100%;
}
.card-toolbar .card-search {
position: relative;
flex: 0 1 250px;
min-width: 180px;
}
.card-toolbar .card-search input {
width: 100%;
height: 34px;
border: 1px solid var(--bs-border-color);
border-radius: 8px;
background: var(--bs-secondary-bg);
padding: 0 58px 0 32px;
font-size: 13px;
transition: box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.card-toolbar .card-search input:focus {
outline: none;
background: var(--bs-body-bg);
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px rgba(61, 94, 225, 0.1);
}
.card-toolbar .card-search .card-search-ic {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: var(--bs-secondary-color);
font-size: 15px;
pointer-events: none;
}
.card-toolbar .card-search .card-search-kbd {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
color: var(--bs-secondary-color);
border: 1px solid var(--bs-border-color);
border-radius: 7px;
padding: 8px 5px;
background: var(--bs-body-bg);
line-height: 1;
}
/* ---------- Pill button ---------- */
.card-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: 34px;
padding: 0 11px;
border: 1px solid var(--bs-border-color);
border-radius: 8px;
background: var(--bs-body-bg);
color: var(--bs-body-color, #1f2937);
font-size: 12.5px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
}
.card-btn i {
font-size: 15px;
}
.card-btn:hover {
background: var(--bs-tertiary-bg);
border-color: var(--bs-primary);
color: var(--bs-primary);
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}
.card-btn.card-btn-icon {
padding: 0;
width: 34px;
justify-content: center;
}
.card-btn.active, .card-btn[aria-pressed=true] {
background: rgba(61, 94, 225, 0.1);
border-color: var(--bs-primary);
color: var(--bs-primary);
}
/* ---------- Density segmented control ---------- */
.card-density {
display: inline-flex;
border: 1px solid var(--bs-border-color);
border-radius: 8px;
overflow: hidden;
background: var(--bs-body-bg);
}
.card-density button {
border: 0;
background: transparent;
width: 32px;
height: 34px;
color: var(--bs-secondary-color);
cursor: pointer;
transition: all var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-density button i {
font-size: 16px;
}
.card-density button.active {
background: rgba(61, 94, 225, 0.1);
color: var(--bs-primary);
}
/* ---------- Quick filter bar ---------- */
.card-quickbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.card-quickbar .card-btn {
height: 32px;
padding: 0 10px;
}
.card-quick {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition);
}
.card-quick i {
font-size: 15px;
}
.card-quick .card-quick-count {
background: var(--bs-secondary-bg);
border-radius: 999px;
padding: 1px 7px;
font-size: 11px;
font-weight: 600;
color: var(--bs-body-color, #1f2937);
}
.card-quick:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.card-quick.active {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: var(--bs-body-bg);
}
.card-quick.active .card-quick-count {
background: rgba(255, 255, 255, 0.25);
color: var(--bs-body-bg);
}
/* ---------- Active filter chips ---------- */
.card-chips {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.card-chips:empty {
display: none;
}
.card-chips .card-chip-clear {
background: transparent;
color: var(--bs-secondary-color);
text-decoration: underline;
cursor: pointer;
border: 0;
font-size: 12px;
}
.card-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 6px 0 12px;
border-radius: 999px;
background: rgba(61, 94, 225, 0.1);
color: var(--bs-primary);
font-size: 12px;
font-weight: 500;
}
.card-chip button {
border: 0;
background: rgba(0, 0, 0, 0.06);
color: inherit;
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 13px;
line-height: 1;
transition: background var(--transition);
}
.card-chip button:hover {
background: rgba(0, 0, 0, 0.16);
}
/* ---------- Menu heading (inside dropdowns) ---------- */
.dropdown-menu .card-menu-head {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-secondary-color);
padding: 6px 10px 4px;
font-weight: 600;
}
/* ---------- Empty state ---------- */
.card-empty {
display: none;
text-align: center;
padding: 60px 20px;
}
.card-empty.show {
display: block;
}
.card-empty .card-empty-art {
width: 132px;
height: 132px;
margin: 0 auto 18px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(61, 94, 225, 0.1), transparent 70%);
display: flex;
align-items: center;
justify-content: center;
}
.card-empty .card-empty-art i {
font-size: 60px;
color: var(--bs-primary);
}
.card-empty h5 {
font-weight: 700;
margin-bottom: 6px;
}
.card-empty p {
color: var(--bs-secondary-color);
max-width: 380px;
margin: 0 auto 18px;
}
/* ---------- Pagination footer ---------- */
.card-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 10px 12px;
border-top: 1px solid var(--bs-border-color);
}
.card-foot-info {
font-size: 12.5px;
color: var(--bs-secondary-color);
}
.card-foot-info span {
color: var(--bs-heading-color, #111827);
font-weight: 600;
}
.card-foot-size {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--bs-secondary-color);
margin-left: auto;
}
.card-foot-size .form-select {
height: 30px;
width: auto;
padding: 0 26px 0 9px;
font-size: 12.5px;
}
.card-pagination {
display: flex;
align-items: center;
gap: 3px;
}
.card-page-numbers {
display: inline-flex;
gap: 3px;
align-items: center;
}
.card-page-btn {
min-width: 30px;
height: 30px;
padding: 0 6px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
border-radius: 8px;
color: var(--bs-body-color, #374151);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-page-btn i {
font-size: 15px;
}
.card-page-btn:hover:not(:disabled) {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.card-page-btn.active {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: var(--bs-body-bg);
}
.card-page-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ---------- Fullscreen ---------- */
.data-workspace.card-fullscreen {
position: fixed;
inset: 0;
z-index: 1055;
background: var(--bs-body-bg, var(--bs-body-bg));
padding: 18px;
overflow: auto;
}
.data-workspace.card-fullscreen .data-table {
max-height: calc(100vh - 260px);
overflow: auto;
}
/* ---------- Toolbar extras (filter menus, count badges, search clear) ---------- */
.card-filter-menu {
min-width: 340px;
max-width: 92vw;
}
.card-col-menu {
min-width: 210px;
max-width: 92vw;
}
.card-search-x[hidden],
.card-count[hidden],
.card-clear-quick[hidden] {
display: none;
}
.card-search .card-search-x {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color, var(--bs-secondary-color));
display: flex;
place-items: center;
font-size: 13px;
cursor: pointer;
align-items: center;
justify-content: center;
transition: all var(--transition);
}
.card-search .card-search-x:hover {
background: var(--bs-primary);
color: var(--bs-body-bg);
}
.card-vcount {
margin-left: auto;
font-size: 11px;
font-weight: 700;
color: var(--bs-secondary-color, var(--bs-secondary-color));
}
.card-count {
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--bs-primary);
color: var(--bs-body-bg);
font-size: 10px;
font-weight: 700;
line-height: 1;
}
/* ============================================================
DATA-TABLE STATUS + PRESENCE EXTENSIONS
============================================================ */
/* extra status pills */
.dt-pill.is-blocked {
background: rgba(220, 38, 38, 0.12);
color: #b91c1c;
}
.dt-pill.is-suspended {
background: rgba(217, 119, 6, 0.14);
color: #b45309;
}
.dt-pill.is-review {
background: rgba(99, 102, 241, 0.12);
color: #4338ca;
}
.dt-pill.is-completed {
background: rgba(13, 148, 136, 0.12);
color: #0f766e;
}
.dt-pill.is-active .dt-pill-dot {
background: #16a34a;
}
.dt-pill.is-inactive .dt-pill-dot {
background: var(--bs-secondary-color);
}
.dt-pill.is-pending .dt-pill-dot {
background: #d97706;
}
.dt-pill.is-blocked .dt-pill-dot {
background: #dc2626;
}
.dt-pill.is-suspended .dt-pill-dot {
background: #ea580c;
}
.dt-pill.is-review .dt-pill-dot {
background: #6366f1;
}
.dt-pill.is-completed .dt-pill-dot {
background: #0d9488;
}
/* live statuses get a soft pulse ring */
.dt-pill.is-active .dt-pill-dot,
.dt-pill.is-pending .dt-pill-dot,
.dt-pill.is-review .dt-pill-dot {
position: relative;
}
.dt-pill.is-active .dt-pill-dot::after,
.dt-pill.is-pending .dt-pill-dot::after,
.dt-pill.is-review .dt-pill-dot::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
background: inherit;
opacity: 0.45;
animation: dt-pill-pulse 1.8s ease-out infinite;
}
@keyframes dt-pill-pulse {
0% {
transform: scale(0.6);
opacity: 0.5;
}
70% {
transform: scale(1.9);
opacity: 0;
}
100% {
opacity: 0;
}
}
/* online presence dot on the profile avatar */
.dt-user .dt-avatar {
position: relative;
overflow: visible;
}
.dt-user .dt-avatar .dt-presence {
position: absolute;
right: -1px;
bottom: -1px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #9ca3af;
border: 2px solid var(--bs-body-bg);
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
}
.dt-user .dt-avatar .dt-presence.on {
background: #16a34a;
animation: dt-presence-pulse 2s ease-out infinite;
}
@keyframes dt-presence-pulse {
0% {
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
}
70% {
box-shadow: 0 0 0 6px rgba(22, 163, 74, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
}
}
/* ---------- Last-login cell ---------- */
.dt-login {
line-height: 1.35;
}
.dt-login-date {
font-weight: 500;
color: var(--bs-body-color, #1f2937);
}
.dt-login-time {
font-size: 12px;
color: var(--bs-secondary-color, var(--bs-secondary-color));
}
.dt-login-rel {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--bs-secondary-color, var(--bs-secondary-color));
margin-top: 2px;
}
.dt-login-rel i {
font-size: 12px;
}
.dt-login.is-never .dt-login-date {
color: var(--bs-secondary-color, var(--bs-secondary-color));
font-weight: 400;
}
[data-bs-theme=dark] .dt-login-date {
color: #e9edf5;
}
.data-table.dt-scroll {
max-height: calc(100vh - 300px);
min-height: 260px;
}
/* An absent row is tinted rather than recoloured, so its text stays as legible
as every other row. Bootstrap's `.table-*` row variants cannot do this here:
the grid paints an opaque background on the cells themselves, and the
variant's `--bs-table-color` washes the roll and admission numbers out. */
.data-table > .table > tbody > tr.dt-absent > td {
background: rgba(234, 179, 0, 0.08);
}
.data-table > .table > tbody > tr.dt-absent:hover > td {
background: rgba(234, 179, 0, 0.14);
}
/* ============================================================
Class Routine — weekly schedule workspace
A day × time grid of subject cards, plus the mobile agenda.
Scoped to .rt-* so it never touches the rest of the app.
============================================================ */
.rt-grid table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 940px;
}
.rt-grid thead th {
position: sticky;
top: 0;
z-index: 3;
background: var(--bs-secondary-bg);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bs-secondary-color);
padding: 12px 10px;
text-align: left;
border-bottom: 1px solid var(--bs-border-color, #e6e9f0);
white-space: nowrap;
}
.rt-grid thead th:first-child {
left: 0;
z-index: 4;
}
.rt-grid tbody td.rt-time {
position: sticky;
left: 0;
z-index: 2;
background: var(--bs-body-bg);
}
.rt-grid tbody td {
padding: 8px;
vertical-align: top;
min-width: 156px;
border-bottom: 1px solid var(--bs-border-color, #e6e9f0);
}
.rt-grid .rt-day-h {
display: inline-flex;
align-items: center;
gap: 6px;
}
.rt-grid .rt-day-h b {
color: var(--bs-heading-color, #111827);
text-transform: none;
font-size: 13px;
}
.rt-time {
width: 104px;
min-width: 104px;
font-size: 12.5px;
font-weight: 600;
color: #374151;
}
.rt-time small {
display: block;
color: #9ca3af;
font-weight: 500;
margin-top: 2px;
}
.rt-time .rt-pnum {
display: inline-block;
font-size: 11px;
color: var(--bs-primary, #3D5EE1);
font-weight: 600;
}
.rt-card {
position: relative;
border: 1px solid var(--bs-border-color, #e6e9f0);
border-radius: 10px;
padding: 10px 10px 8px 16px;
background: #fff;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.rt-card:hover {
box-shadow: 0 8px 20px rgba(17, 24, 39, 0.1);
transform: translateY(-2px);
}
.rt-card.is-selected {
box-shadow: 0 0 0 2px var(--bs-primary, #3D5EE1) inset;
}
.rt-card .rt-accent {
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 4px;
border-radius: 0 4px 4px 0;
}
.rt-card .rt-title {
font-size: 13.5px;
font-weight: 600;
color: #111827;
line-height: 1.2;
}
.rt-card .rt-sub {
font-size: 11.5px;
color: #6b7280;
}
.rt-card .dt-pill {
padding: 3px 8px;
font-size: 11px;
}
.rt-card .rt-hover {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}
.rt-card:hover .rt-hover {
max-height: 60px;
opacity: 1;
margin-top: 6px;
}
.rt-detail {
display: none;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--bs-border-color, #e6e9f0);
}
.rt-card.is-open .rt-detail {
display: block;
}
.rt-card.is-open .rt-hover {
display: none;
}
td.rt-break {
text-align: center;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--bs-secondary-color);
background: repeating-linear-gradient(45deg, #f8f9fc, #f8f9fc 10px, #f2f3f8 10px, #f2f3f8 20px);
}
.rt-free {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 56px;
color: #c0c6d2;
font-size: 12px;
border: 1px dashed var(--bs-border-color, #e6e9f0);
border-radius: 10px;
}
.rt-legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.rt-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--bs-secondary-color);
}
.rt-legend-dot {
width: 10px;
height: 10px;
border-radius: 3px;
flex-shrink: 0;
}
.rt-insight {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid var(--bs-border-color, #e6e9f0);
}
@media (max-width: 575.98px) {
.rt-insight {
flex-direction: column;
}
}
.rt-insight:last-child {
border-bottom: 0;
}
.rt-insight-ic {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 18px;
}
.rt-agenda-day {
margin-bottom: 18px;
}
.rt-agenda-day > h6 {
position: sticky;
top: 0;
z-index: 1;
background: var(--bs-body-bg);
padding: 8px 0;
margin: 0 0 8px;
border-bottom: 1px solid var(--bs-border-color, #e6e9f0);
}
.rt-agenda-item {
display: flex;
gap: 12px;
padding: 6px 0;
}
@media (max-width: 575.98px) {
.rt-agenda-item {
flex-direction: column;
}
}
.rt-agenda-time {
width: 74px;
flex-shrink: 0;
font-size: 12px;
font-weight: 600;
color: #374151;
}
.rt-agenda-time small {
display: block;
color: #9ca3af;
font-weight: 500;
}
#classWorkspace[data-view=agenda] .rt-grid,
#classWorkspace[data-view=day] .rt-grid {
display: none !important;
}
#classWorkspace[data-view=agenda] .rt-agenda,
#classWorkspace[data-view=day] .rt-agenda {
display: block !important;
}
.rounded-circle {
border-radius: 50% !important;
}
/* dashboard primitives — reusable across every page */
/*-----------------
Chip
A compact inline label: an icon or dot followed by a short piece of text.
Used for timestamps, priorities, trends, SLA states, legends and any other
micro-annotation that sits beside a title.
Trending
A bare `.chip` is transparent and inherits its colour, so it also serves as
a plain inline meta item. Add `.chip-soft` for the tinted pill, and any of
the tone modifiers — or a `bg-*-transparent` utility — for colour.
-----------------*/
.chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6875rem;
font-weight: 600;
line-height: 1.4;
color: var(--chip-color, inherit);
white-space: nowrap;
}
.chip > i:not([class*=ti-]):not([class*=fa-]) {
width: 0.5625rem;
height: 0.5625rem;
border-radius: 0.1875rem;
display: inline-block;
flex-shrink: 0;
background: currentcolor;
}
.chip b {
font-weight: 700;
color: var(--chip-strong, inherit);
}
.chip small {
font-size: 0.65rem;
opacity: 0.8;
}
.chip {
/*----- tinted pill -----*/
}
.chip.chip-soft {
background: var(--chip-bg, #E9EDF4);
padding: 0.125rem 0.4375rem;
border-radius: 50rem;
}
.chip {
/*----- squared corners, for priority style labels -----*/
}
.chip.chip-square {
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 0.625rem;
font-weight: 700;
}
.chip {
/*----- sizes -----*/
}
.chip.chip-sm {
font-size: 0.625rem;
gap: 0.125rem;
}
.chip.chip-lg {
font-size: 0.75rem;
gap: 0.3125rem;
}
.chip.chip-lg.chip-soft {
padding: 0.1875rem 0.625rem;
}
.chip {
/*----- tones: colour plus the matching soft background -----*/
}
.chip.chip-muted {
--chip-color: #6A7287;
--chip-bg: #E9EDF4;
}
.chip.chip-primary {
--chip-color: #3D5EE1;
--chip-bg: #F2F5FF;
}
.chip.chip-success {
--chip-color: #1ABE17;
--chip-bg: #E8F9E8;
}
.chip.chip-info {
--chip-color: #0F65CD;
--chip-bg: #E7F1FC;
}
.chip.chip-warning {
--chip-color: #EAB300;
--chip-bg: #FEF8EA;
}
.chip.chip-danger {
--chip-color: #E82646;
--chip-bg: #FDE9ED;
}
.chip.chip-purple {
--chip-color: #4A00E5;
--chip-bg: #F3EDFF;
}
.chip {
/*----- on a coloured or photographic surface -----*/
}
.chip.chip-on-media {
--chip-color: #FFF;
--chip-bg: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(4px);
}
/* completes the tone set alongside the theme's other accents */
.chip.chip-pink {
--chip-color: #E83E8C;
--chip-bg: #FDE6F8;
}
/* Dark Mode — chip-soft's tone backgrounds are solid light tints with no
dark counterpart, so they read as a dull, washed-out patch on a dark
surface. Re-point each at the matching --tone-*-soft token, already
dark-aware, instead of restating new colours; --chip-color (the text)
is already vivid enough to read on both surfaces, so it's untouched. */
[data-theme=dark] .chip.chip-muted, [data-bs-theme=dark] .chip.chip-muted {
--chip-bg: rgba(255, 255, 255, .08);
}
[data-theme=dark] .chip.chip-primary, [data-bs-theme=dark] .chip.chip-primary {
--chip-bg: var(--tone-brand-soft);
}
[data-theme=dark] .chip.chip-success, [data-bs-theme=dark] .chip.chip-success {
--chip-bg: var(--tone-success-soft);
}
[data-theme=dark] .chip.chip-info, [data-bs-theme=dark] .chip.chip-info {
--chip-bg: var(--tone-info-soft);
}
[data-theme=dark] .chip.chip-warning, [data-bs-theme=dark] .chip.chip-warning {
--chip-bg: var(--tone-warning-soft);
}
[data-theme=dark] .chip.chip-danger, [data-bs-theme=dark] .chip.chip-danger {
--chip-bg: var(--tone-danger-soft);
}
[data-theme=dark] .chip.chip-purple, [data-bs-theme=dark] .chip.chip-purple {
--chip-bg: var(--tone-purple-soft);
}
[data-theme=dark] .chip.chip-pink, [data-bs-theme=dark] .chip.chip-pink {
--chip-bg: var(--tone-pink-soft);
}
/*-----------------
Dashboard widgets — merged in from the former
components/_ui-dashboard-widgets.scss. These are generic, reusable
components; they live with their own kind rather than in a page-shaped file.
-----------------*/
.filter-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: var(--muted);
background: var(--surface);
border: 1px solid var(--border-soft);
padding: 4px 9px;
border-radius: 999px;
}
.filter-chip i {
font-size: 13px;
color: var(--bs-primary);
}
/*-----------------
Meta chip
The bordered pill that carries a record's secondary facts — an ID, a term, a
portal state — beside its name. Reads as quieter than a badge because the
fill stays on the page surface and only the border draws the shape.
Promoted from pages/_parent-portal.scss — a reusable pattern, not page style.
-----------------*/
.meta-chip {
font-size: 11px;
color: var(--bs-secondary-color);
gap: 4px;
padding: 3px 8px;
border: 1px solid var(--bs-border-color);
border-radius: 999px;
background: var(--bs-body-bg);
}
.meta-chip i {
font-size: 12px;
color: var(--bs-primary);
}
/*-----------------
Status dot
A small filled circle that marks state — online, unread, a legend swatch,
a live feed. Colour comes from a tone modifier, a `bg-*` utility, or
`currentcolor` when it sits inside coloured text.
-----------------*/
.status-dot {
display: inline-block;
flex-shrink: 0;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--status-dot-color, currentcolor);
vertical-align: middle;
/*----- sizes -----*/
}
.status-dot.status-dot-sm {
width: 0.375rem;
height: 0.375rem;
}
.status-dot.status-dot-lg {
width: 0.5625rem;
height: 0.5625rem;
}
.status-dot {
/*----- a square swatch, for chart legends -----*/
}
.status-dot.status-dot-square {
border-radius: 0.1875rem;
}
.status-dot {
/*----- tones -----*/
}
.status-dot.status-dot-primary {
--status-dot-color: #3D5EE1;
}
.status-dot.status-dot-success {
--status-dot-color: #1ABE17;
}
.status-dot.status-dot-info {
--status-dot-color: #0F65CD;
}
.status-dot.status-dot-warning {
--status-dot-color: #EAB300;
}
.status-dot.status-dot-danger {
--status-dot-color: #E82646;
}
.status-dot.status-dot-muted {
--status-dot-color: #838A9B;
}
.status-dot {
/*----- breathing ring, for anything reporting live data -----*/
}
.status-dot.status-dot-pulse {
box-shadow: 0 0 0 0 currentcolor;
animation: status-dot-pulse 1.6s infinite;
}
@keyframes status-dot-pulse {
0% {
box-shadow: 0 0 0 0 rgba(var(--status-dot-rgb, 34, 197, 94), 0.5);
}
70% {
box-shadow: 0 0 0 6px rgba(var(--status-dot-rgb, 34, 197, 94), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--status-dot-rgb, 34, 197, 94), 0);
}
}
/*-----------------
Dashboard widgets — merged in from the former
components/_ui-dashboard-widgets.scss. These are generic, reusable
components; they live with their own kind rather than in a page-shaped file.
-----------------*/
/* shared helpers — replace repeated inline style overrides */
.status-dot-inline {
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
}
.live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/*-----------------
Data list
The repeating row that makes up most dashboard panels: an avatar or icon
tile, a body that flexes, and a trailing value or badge.
…
Route 01 · North
Downtown Ave · 34 km/h
On route
Rows divide themselves, so they need no wrapper. Add `.data-list` to a
surrounding element only when you want the whole list to share a density,
a hover state, or the boxed-card treatment.
-----------------*/
.data-list-item {
display: flex;
align-items: center;
gap: var(--data-list-gap, 0.6rem);
padding: var(--data-list-padding-y, 0.5rem) var(--data-list-padding-x, 0);
position: relative;
transition: background 0.15s ease;
}
.data-list-item + .data-list-item {
border-top: 1px solid var(--data-list-border, #E9EDF4);
}
.data-list-item {
/*----- rows whose content stacks rather than centring -----*/
}
.data-list-item.data-list-item-top {
align-items: flex-start;
}
.data-list-item {
/*----- unread / attention state, marked with an edge rule -----*/
}
.data-list-item.is-unread {
background: var(--data-list-hover, #F2F5FF);
}
.data-list-item.is-unread::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block: 0;
width: 3px;
background: #3D5EE1;
}
/*----- the parts of a row -----*/
.data-list-body {
flex: 1;
min-width: 0;
}
.data-list-title {
font-size: 0.8125rem;
font-weight: 600;
color: #202C4B;
line-height: 1.3;
margin: 0;
}
.data-list-title:has(> i:first-child) {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.data-list-subtitle {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
color: #6A7287;
margin: 0;
}
.data-list-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.2rem;
}
.data-list-end {
flex-shrink: 0;
text-align: end;
min-width: 0;
}
.data-list-end .meter {
width: var(--data-list-meter-width, 4.125rem);
margin-inline-start: auto;
margin-block-start: 0.3125rem;
}
/*-----------------
List header and footer
A summary or link row that closes a list. It reads the list's own
horizontal padding, so it always lines up with the rows above it rather
than guessing at a matching `px-*` utility.
-----------------*/
.data-list-header,
.data-list-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem var(--data-list-padding-x, 0);
}
.data-list-footer {
border-top: 1px solid var(--data-list-border, #E9EDF4);
}
.data-list-header {
border-bottom: 1px solid var(--data-list-border, #E9EDF4);
}
/*-----------------
List-level options
-----------------*/
.data-list {
list-style: none;
margin: 0;
padding: 0;
/*----- row density -----*/
}
.data-list.data-list-sm {
--data-list-padding-y: 0.28rem;
--data-list-gap: 0.5rem;
}
.data-list.data-list-lg {
--data-list-padding-y: 0.7rem;
--data-list-gap: 0.7rem;
}
.data-list {
/*----- rows that span the full width of a card with no body padding -----*/
}
.data-list.data-list-inset {
--data-list-padding-x: 1.35rem;
--data-list-padding-y: 0.7rem;
}
.data-list {
/*----- dashed rather than solid dividers -----*/
}
.data-list.data-list-dashed .data-list-item + .data-list-item {
border-top-style: dashed;
}
.data-list {
/*----- highlight the row under the pointer -----*/
}
.data-list.data-list-hover .data-list-item:hover {
background: var(--data-list-hover, #F2F5FF);
}
.data-list {
/*----- separate bordered cards instead of divided rows -----*/
}
.data-list.data-list-cards .data-list-item {
padding: 0.6rem 0.7rem;
border: 1px solid var(--data-list-border, #E9EDF4);
border-radius: 8px;
}
.data-list.data-list-cards .data-list-item + .data-list-item {
margin-top: 0.55rem;
}
.data-list.data-list-cards {
/* accent rule down the leading edge, coloured by the same token the
row's icon tile uses so the two always agree */
}
.data-list.data-list-cards.data-list-cards-accent .data-list-item {
border-inline-start: 3px solid var(--avatar-accent, #3D5EE1);
}
.data-list.data-list-cards.data-list-hover .data-list-item:hover {
background: transparent;
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.07);
}
/*-----------------
Ranking index — the position number that opens a leaderboard row
-----------------*/
.data-list-index {
flex-shrink: 0;
width: 1.25rem;
text-align: center;
font-size: 1rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: #838A9B;
}
.data-list-item.is-top .data-list-index {
color: #3D5EE1;
}
/*-----------------
Hover actions
Row controls that stay out of the way until the row is pointed at. They
remain visible to keyboard users and on touch, where there is no hover.
-----------------*/
.data-list-item .hover-actions {
opacity: 0;
transition: opacity 0.2s ease;
}
.data-list-item:hover .hover-actions,
.data-list-item:focus-within .hover-actions {
opacity: 1;
}
@media (hover: none) {
.data-list-item .hover-actions {
opacity: 1;
}
}
/*-----------------
Dashboard widgets — merged in from the former
components/_ui-dashboard-widgets.scss. These are generic, reusable
components; they live with their own kind rather than in a page-shaped file.
-----------------*/
/* ---------- TIMETABLE ---------- */
.lesson-list {
gap: 10px;
}
.lesson-item {
display: grid;
grid-template-columns: 78px 1fr auto;
gap: 12px;
padding: 12px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-list);
background: var(--surface);
border-left-width: 3px;
transition: transform var(--transition-card), box-shadow var(--transition-card);
}
.lesson-item:hover {
transform: translateX(3px);
box-shadow: var(--shadow-card);
}
/* .lesson-time — all declarations now Bootstrap utilities in the markup */
.lesson-time b {
display: block;
font-size: 13px;
font-weight: 800;
color: var(--heading);
}
.lesson-time span {
font-size: 10px;
color: var(--muted);
}
.lesson-body b {
font-size: 13.5px;
color: var(--heading);
}
.lesson-tags {
gap: 5px;
margin-top: 4px;
}
.lesson-tag {
font-size: 10.5px;
color: var(--muted);
gap: 3px;
}
.lesson-tag i {
font-size: 12px;
}
.lesson-actions {
gap: 6px;
}
@media (max-width: 575px) {
.lesson-item {
grid-template-columns: 60px 1fr;
}
.lesson-actions {
grid-column: 1/-1;
}
}
/* list rows (assignments, insights, messages, notifications, activity) */
.info-list {
gap: 9px;
}
.info-list-item {
gap: 11px;
padding: 11px 12px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-list);
background: var(--surface);
transition: transform var(--transition-card), box-shadow var(--transition-card);
}
.info-list-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card);
}
.info-list-icon {
width: 38px;
height: 38px;
border-radius: 11px;
display: grid;
place-items: center;
font-size: 18px;
}
.info-list-item-sm {
padding: 9px;
}
.info-list-item-sm .info-list-icon {
width: 30px;
height: 30px;
border-radius: 9px;
font-size: 15px;
}
.info-list-avatar {
width: 38px;
height: 38px;
border-radius: 11px;
}
.info-list-body {
flex: 1;
min-width: 0;
}
.info-list-body b {
display: block;
font-size: 13px;
color: var(--heading);
}
.info-list-body span {
font-size: 11.5px;
color: var(--muted);
}
.info-list-body .un {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.info-list-end {
font-size: 11px;
color: var(--muted);
gap: 4px;
}
.insight-badge {
gap: 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tone-purple);
background: var(--tone-purple-soft);
padding: 3px 9px;
border-radius: 999px;
}
.insight-score {
gap: 14px;
padding: 14px;
border-radius: var(--radius-list);
background: var(--surface);
border: 1px solid var(--border-soft);
margin-bottom: 12px;
}
.insight-score .tx b {
font-size: 15px;
color: var(--heading);
}
.insight-score .tx p {
margin: 2px 0 0;
font-size: 11.5px;
color: var(--muted);
}
.insight-item {
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--border-soft);
}
.insight-item:last-child {
border-bottom: 0;
}
.insight-item .ic {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
font-size: 15px;
flex-shrink: 0;
}
.insight-item .tx b {
display: block;
font-size: 12.5px;
color: var(--heading);
}
.insight-item .tx span {
font-size: 11px;
color: var(--muted);
}
/* ---------- TERM LADDER ---------- */
.term-list {
gap: 6px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
}
.term-item {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
padding: 7px 10px;
border-radius: 9px;
border: 1px solid var(--border-soft);
border-left-width: 3px;
background: var(--surface);
}
.term-item .t {
font-size: 11.5px;
font-weight: 600;
color: var(--heading);
}
.term-item .v {
font-size: 14px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--heading);
font-variant-numeric: tabular-nums;
}
/* ---------- SUBJECT ROWS ---------- */
.subject-list {
gap: 8px;
}
.subject-item {
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 11px;
padding: 9px 11px;
border: 1px solid var(--border-soft);
border-left-width: 3px;
border-radius: 10px;
background: var(--surface);
transition: transform var(--transition-card), box-shadow var(--transition-card);
}
.subject-item:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-card);
}
.subject-item > .ic {
width: 34px;
height: 34px;
border-radius: 10px;
display: grid;
place-items: center;
font-size: 17px;
}
.subject-item .mid {
min-width: 0;
}
.subject-item .top {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
}
.subject-item .top b {
font-size: 12.5px;
font-weight: 650;
color: var(--heading);
white-space: nowrap;
}
.subject-item .top span {
font-size: 10.5px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.subject-item .end {
display: flex;
align-items: center;
gap: 7px;
}
.subject-item .pc {
font-size: 14px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--heading);
font-variant-numeric: tabular-nums;
}
.subject-item .pc small {
font-size: 10px;
font-weight: 700;
color: var(--muted);
}
.subject-item .gr {
min-width: 30px;
text-align: center;
font-size: 10.5px;
font-weight: 800;
padding: 3px 5px;
border-radius: 6px;
}
.subject-item .dl {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 10.5px;
font-weight: 700;
}
.subject-item .dl i {
font-size: 12px;
}
/* the class-average marker sits on top of the track, so the track cannot clip
it the way `.progress` does by default; `left` is set inline */
.subject-item .progress {
position: relative;
overflow: visible;
}
.subject-item .progress-bar {
border-radius: inherit;
}
.subject-item .progress .avg {
position: absolute;
top: -3px;
width: 2px;
height: 14px;
border-radius: 2px;
background: var(--heading);
opacity: 0.55;
}
.subject-legend {
gap: 6px;
font-size: 10.5px;
color: var(--muted);
}
.subject-legend .mk {
width: 2px;
height: 12px;
border-radius: 2px;
background: var(--heading);
opacity: 0.55;
}
/* compact variant: name, track, value, tag on a single line */
.subject-item-compact {
display: grid;
grid-template-columns: 92px 1fr 38px 50px;
gap: 10px;
padding: 0;
border: 0;
background: none;
}
.subject-item-compact:hover {
transform: none;
box-shadow: none;
}
.subject-item-compact .nm {
font-size: 12px;
font-weight: 600;
color: var(--heading);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.subject-item-compact .pc {
font-size: 11.5px;
font-weight: 700;
text-align: right;
}
.subject-item-compact .gr {
font-size: 10px;
}
/* ---------- NOTE CALLOUT ---------- */
/* tinted advisory line; the tint comes from a bg-*-transparent utility */
.insight-note {
gap: 8px;
padding: 10px 12px;
border-radius: 10px;
font-size: 11.5px;
line-height: 1.5;
}
.insight-note i {
font-size: 15px;
flex-shrink: 0;
margin-top: 1px;
}
.insight-note b {
color: var(--heading);
}
/* ---------- HIGHLIGHT ROWS ---------- */
.highlight-list {
gap: 8px;
margin-top: 14px;
}
.highlight-item {
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid var(--border-soft);
border-left-width: 3px;
background: var(--surface);
}
.highlight-item .ic {
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 9px;
display: grid;
place-items: center;
font-size: 16px;
}
.highlight-item .tx {
flex: 1;
min-width: 0;
}
.highlight-item .tx b {
display: block;
font-size: 12px;
font-weight: 650;
color: var(--heading);
line-height: 1.2;
}
.highlight-item .tx span {
display: block;
font-size: 10.5px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------- DETAIL TILES ---------- */
.detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.detail-tile {
gap: 9px;
padding: 11px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-list);
background: var(--surface);
transition: transform var(--transition-card), box-shadow var(--transition-card);
}
.detail-tile:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card);
}
.detail-tile .ic {
width: 32px;
height: 32px;
border-radius: 9px;
display: grid;
place-items: center;
font-size: 16px;
flex-shrink: 0;
}
.detail-tile b {
display: block;
font-size: 13px;
color: var(--heading);
}
.detail-tile span {
font-size: 10.5px;
color: var(--muted);
}
/* ---------- AVATAR STATUS ---------- */
/* .info-list-avatar-wrap — all declarations now Bootstrap utilities in the markup */
.info-list-avatar-wrap .dot {
position: absolute;
right: -2px;
bottom: -2px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--surface);
background: var(--tone-success);
}
.info-list-avatar-wrap .dot.off {
background: #9aa6c2;
}
@media (max-width: 1399px) {
.subject-item .top span {
display: none;
}
}
@media (max-width: 575px) {
.subject-item {
grid-template-columns: 1fr auto;
}
.subject-item > .ic {
display: none;
}
.subject-item-compact {
grid-template-columns: 78px 1fr 34px 30px;
gap: 7px;
}
.detail-grid {
grid-template-columns: 1fr;
}
}
/*-----------------
Stat
The figure-and-caption pairing that every dashboard repeats: a large value,
a muted label, and an optional delta showing which way it moved.
Enrolment
1,248
Active students
3%
The pieces are independent — use `.stat-caption` on its own as a section
eyebrow, or `.stat-delta` beside any number.
-----------------*/
/*----- uppercase micro-caption, above a value or as a section eyebrow -----*/
.stat-caption {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #6A7287;
}
/*----- the figure itself -----*/
.stat-value {
font-size: 1.85rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
color: #202C4B;
}
.stat-value.stat-value-sm {
font-size: 1.5rem;
}
.stat-value.stat-value-xs {
font-size: 1.125rem;
}
.stat-value > span,
.stat-value > small {
font-size: 0.6em;
font-weight: 500;
letter-spacing: 0;
color: #6A7287;
}
/*----- muted caption under or beside the figure -----*/
.stat-label {
font-size: 0.8rem;
color: #6A7287;
}
.stat-label.stat-label-sm {
font-size: 0.74rem;
}
/*----- direction of travel -----*/
.stat-delta {
display: inline-flex;
align-items: center;
gap: 0.125rem;
font-size: 0.76rem;
font-weight: 700;
line-height: 1.3;
}
.stat-delta.stat-delta-sm {
font-size: 0.72rem;
}
.stat-delta.stat-delta-up {
color: #1ABE17;
}
.stat-delta.stat-delta-down {
color: #E82646;
}
.stat-delta.stat-delta-flat {
color: #838A9B;
}
/*-----------------
Stat tile
A bordered box holding one stat, used in KPI strips. It lifts on hover so
it reads as a target when the whole tile is clickable.
-----------------*/
.stat-tile {
border: 1px solid #E9EDF4;
border-radius: 12px;
padding: 0.7rem 0.8rem;
height: 100%;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.stat-tile.stat-tile-hover:hover {
transform: translateY(-2px);
border-color: var(--avatar-accent, #3D5EE1);
}
.stat-tile {
/*----- compact, centred variant for three-up stat grids -----*/
}
.stat-tile.stat-tile-plain {
text-align: center;
background: #E9EDF4;
border: 0;
border-radius: 5px;
padding: 0.6rem 0.5rem;
}
.stat-tile {
/*----- sits on a coloured or photographic panel -----*/
}
.stat-tile.stat-tile-on-media {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.22);
backdrop-filter: blur(4px);
padding: 0.4rem 0.55rem;
color: #FFF;
}
.stat-tile {
/*----- accent rule down the leading edge -----*/
}
.stat-tile.stat-tile-accent {
position: relative;
overflow: hidden;
}
.stat-tile.stat-tile-accent::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block: 0;
width: 3px;
background: var(--avatar-accent, #3D5EE1);
}
/*-----------------
Stat grid — evenly divided columns of stats inside one card
-----------------*/
.stat-grid {
display: grid;
grid-template-columns: repeat(var(--stat-grid-columns, 3), 1fr);
gap: 0.4rem;
}
/*-----------------
Dashboard widgets — merged in from the former
components/_ui-dashboard-widgets.scss. These are generic, reusable
components; they live with their own kind rather than in a page-shaped file.
-----------------*/
/* ---------- KPI ---------- */
.stats-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.stats-grid.stats-grid-compact {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.card-stat {
padding: 14px;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow-card);
transition: transform var(--transition-card), box-shadow var(--transition-card);
}
.card-stat:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-lift);
}
.card-stat-header {
gap: 8px;
margin-bottom: 8px;
}
.card-stat-delta {
font-size: 10.5px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
gap: 2px;
}
.card-stat-delta.up {
color: var(--tone-success);
background: var(--tone-success-soft);
}
.card-stat-delta.down {
color: var(--tone-danger);
background: var(--tone-danger-soft);
}
.card-stat-delta.flat {
color: var(--muted);
background: var(--surface-soft);
}
.card-stat-value {
font-size: 24px;
font-weight: 800;
color: var(--heading);
line-height: 1;
}
.card-stat-value small {
font-size: 12px;
font-weight: 600;
color: var(--muted);
}
.card-stat-label {
font-size: 11px;
color: var(--muted);
margin-top: 3px;
}
/* ---------- MY CLASSES ---------- */
.class-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.award-icon i {
color: #fff;
}
/* ---------- ACHIEVEMENTS ---------- */
.award-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.award-item {
padding: 14px 8px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-list);
background: var(--surface);
transition: transform var(--transition-card);
}
.award-item:hover {
transform: translateY(-3px);
}
.award-icon {
width: 52px;
height: 52px;
border-radius: 50%;
margin: 0 auto 8px;
display: grid;
place-items: center;
font-size: 22px;
}
.award-icon i {
font-size: 22px !important;
}
.award-item b {
display: block;
font-size: 12px;
color: var(--heading);
}
.award-item span {
font-size: 10px;
color: var(--muted);
}
@media (max-width: 1199px) {
.stats-grid {
grid-template-columns: repeat(3, 1fr);
}
.class-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.class-grid {
grid-template-columns: 1fr;
}
.award-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 575px) {
.stats-grid,
.card-profile-stats {
grid-template-columns: 1fr;
}
}
/* ---------- METRIC TILES ---------- */
/* small figure + caption block; the left rail takes a border-* utility */
.metric-tile {
padding: 14px;
border: 1px solid var(--border-soft);
border-left-width: 3px;
border-radius: var(--radius-list);
background: var(--surface);
transition: transform var(--transition-card), box-shadow var(--transition-card);
}
.metric-tile:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card);
}
.metric-tile-value {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.4px;
color: var(--heading);
margin: 8px 0 2px;
}
.metric-tile-value small {
font-size: 11px;
font-weight: 700;
color: var(--muted);
}
.metric-tile-label {
font-size: 11px;
color: var(--muted);
}
.metric-tile-sm {
padding: 9px;
}
.metric-tile-sm .metric-tile-value {
font-size: 17px;
margin: 4px 0 1px;
}
.metric-tile-md {
padding: 11px;
}
.metric-tile-md .metric-tile-value {
font-size: 19px;
margin: 6px 0 2px;
}
/* ---------- COUNTDOWN STRIP ---------- */
.countdown-strip {
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--border-soft);
border-left-width: 3px;
border-radius: var(--radius-list);
background: var(--surface);
}
.countdown-strip .ic {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 10px;
display: grid;
place-items: center;
font-size: 19px;
}
.countdown-strip .tx {
min-width: 0;
flex: 1;
}
.countdown-strip .tx b {
display: block;
font-size: 12.5px;
font-weight: 700;
color: var(--heading);
line-height: 1.2;
}
.countdown-strip .tx span {
font-size: 10.5px;
color: var(--muted);
}
.countdown-strip .num {
text-align: center;
flex-shrink: 0;
}
.countdown-strip .num b {
display: block;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
}
.countdown-strip .num span {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
}
.fact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 4px;
}
.fact-tile {
padding: 9px 10px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-left-width: 3px;
}
.fact-tile b {
display: block;
font-size: 17px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--heading);
line-height: 1.1;
}
.fact-tile b small {
font-size: 11px;
font-weight: 700;
color: var(--muted);
}
.fact-tile span {
font-size: 10px;
color: var(--muted);
}
/* ---------- SUMMARY CELLS ---------- */
.summary-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 12px;
}
.summary-cell {
padding: 8px 10px;
border-radius: 9px;
border: 1px solid var(--border-soft);
border-left-width: 3px;
background: var(--surface);
}
.summary-cell .k {
display: block;
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
}
.summary-cell b {
font-size: 12.5px;
font-weight: 700;
color: var(--heading);
white-space: nowrap;
}
/* ---------- GOAL RINGS ---------- */
.goal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.goal-item {
padding: 14px 8px;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
background: var(--surface);
transition: transform var(--transition-card), box-shadow var(--transition-card);
}
.goal-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card);
}
.goal-item .progress-ring {
width: 80px;
height: 80px;
margin: 0 auto 8px;
}
.goal-item .progress-ring-hole {
width: 60px;
height: 60px;
}
.goal-item .progress-ring-hole b {
font-size: 15px;
}
.goal-item b {
display: block;
font-size: 12.5px;
color: var(--heading);
}
.goal-item span {
font-size: 10.5px;
color: var(--muted);
}
/* ---------- STREAK CHIPS ---------- */
.streak-list {
gap: 5px;
}
.streak-list span {
width: 28px;
height: 28px;
border-radius: 9px;
display: grid;
place-items: center;
font-size: 12px;
background: var(--surface-soft);
color: var(--muted);
}
.amount-value {
font-size: 16px;
color: var(--heading);
}
@media (max-width: 1399px) {
.summary-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.fact-grid {
grid-template-columns: repeat(4, 1fr);
}
.goal-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.fact-grid {
grid-template-columns: 1fr 1fr;
}
}
/*-----------------
Meter
A slim proportion bar. Bootstrap's `.progress` expects a `.progress-bar`
child and carries chart-sized defaults; `.meter` is the hairline version
used inside list rows and ranking tables, and it accepts either one fill
or several segments.
-----------------*/
.meter {
display: flex;
height: var(--meter-height, 0.375rem);
border-radius: 50rem;
background: var(--meter-track, #E9EDF4);
overflow: hidden;
}
.meter > span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--meter-fill, #3D5EE1);
transition: width 0.3s ease;
}
.meter {
/*----- heights -----*/
}
.meter.meter-xs {
--meter-height: 0.25rem;
}
.meter.meter-lg {
--meter-height: 0.625rem;
}
.meter.meter-xl {
--meter-height: 0.5rem;
}
.meter {
/*----- butted segments rather than one rounded fill -----*/
}
.meter.meter-segmented {
border-radius: 5px;
}
.meter.meter-segmented > span {
border-radius: 0;
}
.meter {
/*----- a projected / not-yet-real value: striped fill at reduced opacity
so a forecast reads differently from a recorded figure -----*/
}
.meter.meter-dashed > span {
opacity: 0.55;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.45) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.45) 75%, transparent 75%, transparent);
background-size: 0.5rem 0.5rem;
}
/*-----------------
Benchmark marker
A hairline dropped onto the track at a reference value — a class average, a
target, last period's figure — so a row shows both where it stands and what
it is being measured against.
The meter becomes the marker's containing block, so `left` is a plain
percentage of the track.
-----------------*/
.meter {
position: relative;
}
.meter .meter-marker {
position: absolute;
top: -2px;
bottom: -2px;
width: 2px;
border-radius: 1px;
background: var(--meter-marker, #515B73);
transition: left 0.3s ease;
}
/*-----------------
Meter tones — the fill colour, applied to the track rather than each span
-----------------*/
.meter-primary {
--meter-fill: #3D5EE1;
}
.meter-secondary {
--meter-fill: #6FCCD8;
}
.meter-success {
--meter-fill: #1ABE17;
}
.meter-info {
--meter-fill: #0F65CD;
}
.meter-warning {
--meter-fill: #EAB300;
}
.meter-danger {
--meter-fill: #E82646;
}
.meter-purple {
--meter-fill: #4A00E5;
}
.meter-pink {
--meter-fill: #E83E8C;
}
.meter-dark {
--meter-fill: #202C4B;
}
/*-----------------
Gauge
A circular percentage dial drawn with a conic gradient — no chart library
and no SVG. Set the value and colour through custom properties so a single
element carries the whole reading.
82%
`--gauge-value` is a plain number (0–100). `--gauge-color` tints the arc,
`--gauge-track` the remainder, and `--gauge-surface` the punched-out centre
so the dial can sit on a tinted panel.
-----------------*/
.gauge {
position: relative;
width: var(--gauge-size, 6.5rem);
height: var(--gauge-size, 6.5rem);
border-radius: 50%;
flex-shrink: 0;
display: grid;
place-items: center;
background: conic-gradient(var(--gauge-color, #3D5EE1) calc(var(--gauge-value, 70) * 1%), var(--gauge-track, #E9EDF4) 0);
}
.gauge::before {
content: "";
position: absolute;
width: calc(var(--gauge-size, 6.5rem) - var(--gauge-thickness, 1.625rem));
height: calc(var(--gauge-size, 6.5rem) - var(--gauge-thickness, 1.625rem));
border-radius: 50%;
background: var(--gauge-surface, #FFF);
}
.gauge .gauge-value {
position: relative;
font-weight: 800;
font-size: 1.15rem;
letter-spacing: -0.02em;
line-height: 1.15;
text-align: center;
color: #202C4B;
}
.gauge .gauge-value > small {
display: block;
font-size: 0.5em;
font-weight: 600;
letter-spacing: 0;
color: #6A7287;
}
.gauge {
/*----- sizes -----*/
}
.gauge.gauge-xs {
--gauge-size: 2.5rem;
--gauge-thickness: 0.625rem;
}
.gauge.gauge-xs .gauge-value {
font-size: 0.625rem;
}
.gauge.gauge-sm {
--gauge-size: 5rem;
--gauge-thickness: 1.25rem;
}
.gauge.gauge-sm .gauge-value {
font-size: 0.95rem;
}
.gauge.gauge-lg {
--gauge-size: 9.75rem;
--gauge-thickness: 2.25rem;
}
.gauge.gauge-lg .gauge-value {
font-size: 1.9rem;
}
[data-theme=dark] .gauge,
[data-bs-theme=dark] .gauge {
--gauge-surface: #141b2d;
}
/*-----------------
Gauge tones — the arc colour, taken from the theme rather than a hex
-----------------*/
.gauge-primary {
--gauge-color: #3D5EE1;
}
.gauge-secondary {
--gauge-color: #6FCCD8;
}
.gauge-success {
--gauge-color: #1ABE17;
}
.gauge-info {
--gauge-color: #0F65CD;
}
.gauge-warning {
--gauge-color: #EAB300;
}
.gauge-danger {
--gauge-color: #E82646;
}
.gauge-purple {
--gauge-color: #4A00E5;
}
.gauge-pink {
--gauge-color: #E83E8C;
}
.gauge-teal {
--gauge-color: #02a8b5;
}
/*-----------------
Sparkline
A trend indicator small enough to sit inside a table cell or a list row.
Two forms share the class: an inline bar chart built from `` elements,
and an SVG line drawn with ``.
Bars take their colour from `--sparkline-fill`, or from a background
utility on each bar when a row mixes colours.
-----------------*/
.sparkline {
display: flex;
align-items: flex-end;
gap: 2px;
height: var(--sparkline-height, 1.5rem);
flex: 1 1 auto;
}
.sparkline > i {
flex: 1 1 auto;
min-height: 3px;
border-radius: 2px 2px 0 0;
opacity: 0.85;
background: var(--sparkline-fill, #3D5EE1);
}
.sparkline {
/*----- the SVG line form -----*/
}
.sparkline.sparkline-line {
display: block;
width: 100%;
height: 2.5rem;
overflow: visible;
}
.sparkline.sparkline-line path.line {
fill: none;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.sparkline {
/*----- heights -----*/
}
.sparkline.sparkline-sm {
--sparkline-height: 1.125rem;
}
.sparkline.sparkline-lg {
--sparkline-height: 2.5rem;
}
/*-----------------
Sparkline tones — set the fill once on the chart, not on every bar
-----------------*/
.sparkline-primary {
--sparkline-fill: #3D5EE1;
}
.sparkline-secondary {
--sparkline-fill: #6FCCD8;
}
.sparkline-success {
--sparkline-fill: #1ABE17;
}
.sparkline-info {
--sparkline-fill: #0F65CD;
}
.sparkline-warning {
--sparkline-fill: #EAB300;
}
.sparkline-danger {
--sparkline-fill: #E82646;
}
.sparkline-purple {
--sparkline-fill: #4A00E5;
}
/* an intermediate height, between the inline default and `.sparkline-lg` */
.sparkline.sparkline-md {
--sparkline-height: 2rem;
}
.sparkline-pink {
--sparkline-fill: #E83E8C;
}
/*-----------------
Activity feed
A vertical run of events joined by a rail, each marked by an icon tile.
Distinct from `.timeline`, which alternates panels left and right — this
is the compact single-column feed dashboards use for recent activity.
-
Fee reminder sent to 412 parents
20m
The tile is positioned onto the rail automatically, so it can sit anywhere
among the item's children. `.activity-feed-roomy` adds hover feedback and
padding for feeds whose rows are clickable.
-----------------*/
.activity-feed {
list-style: none;
margin: 0;
padding: 0;
}
.activity-feed > li,
.activity-feed > .activity-feed-item {
position: relative;
padding: 0 0 1.05rem 2.5rem;
}
.activity-feed > li::before,
.activity-feed > .activity-feed-item::before {
content: "";
position: absolute;
inset-inline-start: 15px;
top: 37px;
bottom: 3px;
width: 2px;
background: var(--activity-feed-rail, #E9EDF4);
}
.activity-feed > li:last-child,
.activity-feed > .activity-feed-item:last-child {
padding-bottom: 0;
}
.activity-feed > li:last-child::before,
.activity-feed > .activity-feed-item:last-child::before {
display: none;
}
.activity-feed > li > .avatar,
.activity-feed > .activity-feed-item > .avatar {
position: absolute;
inset-inline-start: 0;
top: 1px;
}
.activity-feed > li h6,
.activity-feed > .activity-feed-item h6 {
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.3;
}
.activity-feed {
/*----- roomier rows that respond to the pointer -----*/
}
.activity-feed.activity-feed-roomy > li, .activity-feed.activity-feed-roomy > .activity-feed-item {
padding: 0.5rem 0.5rem 0.5rem 2.875rem;
border-radius: 8px;
transition: background 0.15s ease;
}
.activity-feed.activity-feed-roomy > li::before, .activity-feed.activity-feed-roomy > .activity-feed-item::before {
inset-inline-start: 21px;
top: 41px;
bottom: -9px;
}
.activity-feed.activity-feed-roomy > li > .avatar, .activity-feed.activity-feed-roomy > .activity-feed-item > .avatar {
inset-inline-start: 6px;
top: 5px;
}
.activity-feed.activity-feed-roomy > li:last-child, .activity-feed.activity-feed-roomy > .activity-feed-item:last-child {
padding-bottom: 0.45rem;
}
.activity-feed.activity-feed-roomy > li:hover, .activity-feed.activity-feed-roomy > .activity-feed-item:hover {
background: var(--activity-feed-hover, #F2F5FF);
}
/*-----------------
Feed divider
A date or group heading between runs of items. The rule after the label
fills whatever width is left, so it never needs measuring.
-----------------*/
.activity-feed > li.activity-feed-divider,
.activity-feed > .activity-feed-divider {
padding: 0.55rem 0 0.35rem;
}
.activity-feed > li.activity-feed-divider:first-child,
.activity-feed > .activity-feed-divider:first-child {
padding-top: 0;
}
.activity-feed > li.activity-feed-divider::before,
.activity-feed > .activity-feed-divider::before {
display: none;
}
.activity-feed > li.activity-feed-divider:hover,
.activity-feed > .activity-feed-divider:hover {
background: transparent;
}
.activity-feed > li.activity-feed-divider > span,
.activity-feed > .activity-feed-divider > span {
display: inline-flex;
align-items: center;
gap: 0.5rem;
width: 100%;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #838A9B;
}
.activity-feed > li.activity-feed-divider > span::after,
.activity-feed > .activity-feed-divider > span::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--activity-feed-rail, #E9EDF4);
}
.activity-feed.activity-feed-roomy > li.activity-feed-divider,
.activity-feed.activity-feed-roomy > .activity-feed-divider {
padding-inline: 0.5rem;
}
/*-----------------
Dashboard widgets — merged in from the former
components/_ui-dashboard-widgets.scss. These are generic, reusable
components; they live with their own kind rather than in a page-shaped file.
-----------------*/
/* ---------- ACTIVITY TIMELINE ---------- */
.timeline-list {
padding-left: 6px;
}
.timeline-item {
gap: 12px;
padding: 9px 0;
}
.timeline-item:not(:last-child)::before {
content: "";
position: absolute;
left: 15px;
top: 40px;
bottom: -9px;
width: 2px;
background: var(--border-soft);
}
.timeline-icon {
width: 32px;
height: 32px;
border-radius: 10px;
display: grid;
place-items: center;
font-size: 15px;
z-index: 1;
}
.timeline-body b {
font-size: 12.5px;
color: var(--heading);
}
.timeline-body p {
margin: 1px 0 0;
font-size: 11px;
color: var(--muted);
}
.timeline-time {
font-size: 10.5px;
color: var(--muted);
}
/*-----------------
Time-gutter timeline
Distinct from `.activity-feed` (icon rail) and `.timeline-item` (flex row):
here a fixed 62px time column sits beside the body, with the connector drawn
between dots. Used for day schedules and agendas.
Promoted from pages/_parent-portal.scss — a reusable pattern, not page style.
-----------------*/
/* ---------- TODAY TIMELINE ---------- */
.portal-timeline-track {
padding-left: 4px;
}
.portal-timeline {
display: grid;
grid-template-columns: 62px 1fr;
gap: 14px;
padding-bottom: 18px;
}
.portal-timeline:last-child {
padding-bottom: 0;
}
.portal-timeline-time {
font-size: 11.5px;
font-weight: 650;
color: var(--bs-secondary-color);
padding-top: 1px;
font-variant-numeric: tabular-nums;
}
.portal-timeline-time small {
display: block;
font-size: 9.5px;
color: var(--bs-tertiary-color);
font-weight: 600;
}
.portal-timeline-body {
padding-left: 22px;
}
.portal-timeline-body::before {
content: "";
position: absolute;
left: 5px;
top: 16px;
bottom: -18px;
width: 2px;
background: var(--bs-border-color);
}
.portal-timeline:last-child .portal-timeline-body::before {
display: none;
}
.portal-timeline-dot {
left: 0;
top: 3px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--accent);
z-index: 1;
}
.portal-timeline.live .portal-timeline-dot {
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
animation: px-pulse2 1.6s infinite;
}
@keyframes px-pulse2 {
0% {
box-shadow: 0 0 0 0 var(--accent-soft);
}
70% {
box-shadow: 0 0 0 6px transparent;
}
}
.portal-timeline-body b {
font-size: 13px;
color: var(--bs-emphasis-color);
font-weight: 650;
}
.portal-timeline-body p {
margin: 2px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/*-----------------
Route map
A schematic live-tracking map: a street grid, the planned route, the
portion already covered, the stops along it, and a vehicle that animates
from one end to the other. Drawn entirely in SVG so it needs no map tiles
and no plugin.
Stops take `.is-done` for ones already served and `.is-next` for the one
being approached; everything else reads as still ahead.
-----------------*/
.route-map {
position: relative;
border: 1px solid #E9EDF4;
border-radius: 8px;
background: var(--route-map-surface, #E9EDF4);
overflow: hidden;
}
.route-map-canvas {
display: block;
width: 100%;
height: auto;
}
/*----- the street grid the route is laid over -----*/
.route-map-grid path {
fill: none;
stroke: var(--route-map-grid, rgba(61, 94, 225, 0.14));
stroke-width: 1;
}
/*----- the route itself, and the stretch already covered -----*/
.route-map-line {
fill: none;
stroke: var(--route-map-track, #E9EDF4);
stroke-width: 8;
stroke-linecap: round;
stroke-linejoin: round;
}
.route-map-line.is-covered {
stroke: var(--route-map-covered, #1ABE17);
}
/*-----------------
Stops
A circle on the line with its name set beneath. The three states are told
apart by fill rather than by size, so the line keeps an even rhythm.
-----------------*/
.route-map-stop circle {
fill: #FFF;
stroke: var(--route-map-track, #E9EDF4);
stroke-width: 3;
}
.route-map-stop text {
fill: #6A7287;
font-size: 12px;
font-weight: 600;
text-anchor: middle;
}
.route-map-stop.is-done circle {
fill: #1ABE17;
stroke: #1ABE17;
}
.route-map-stop.is-next circle {
fill: #3D5EE1;
stroke: #3D5EE1;
}
.route-map-stop.is-next text {
fill: #3D5EE1;
}
/*----- the vehicle riding the route -----*/
.route-map-vehicle circle {
fill: #3D5EE1;
}
.route-map-vehicle text {
font-size: 15px;
text-anchor: middle;
}
/*----- "live · updated just now", pinned to a corner of the map -----*/
.route-map-badge {
position: absolute;
inset-block-start: 0.625rem;
inset-inline-end: 0.625rem;
}
[data-theme=dark] .route-map,
[data-bs-theme=dark] .route-map {
--route-map-surface: #202C4B;
--route-map-grid: rgba(255, 255, 255, 0.08);
--route-map-track: var(--border-strong);
}
[data-theme=dark] .route-map .route-map-stop circle,
[data-bs-theme=dark] .route-map .route-map-stop circle {
fill: #202C4B;
}
/* dashboard components — moved out of app-new.css */
/*-----------------
Dashboard Shell
The design tokens the dashboard components read (timetable, heatstrip,
eventrow, skeleton, qa-toggle). Set once on the page's `.dashboard` root
so every component and every modal inside it resolves the same palette.
-----------------*/
.dashboard {
--avatar-accent: var(--bs-primary);
--avatar-accent-soft: var(--tint-primary);
color: var(--bs-body-color, #374151);
}
/*-----------------
Hero banner
The greeting card that anchors a dashboard. Faint radial brand tints sit
in opposite corners — matched to index2's welcome banner — so the hero
reads as the page's focal point without a heavy gradient panel.
-----------------*/
.dashboard .dash-hero {
position: relative;
overflow: hidden;
}
.dashboard .dash-hero::before {
content: "";
position: absolute;
inset-inline-end: -70px;
top: -90px;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, var(--tint-primary), transparent 68%);
pointer-events: none;
}
.dashboard .dash-hero::after {
content: "";
position: absolute;
inset-inline-start: -90px;
bottom: -120px;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, var(--tint-teal), transparent 70%);
opacity: 0.7;
pointer-events: none;
}
.dashboard .dash-hero .card-body {
position: relative;
z-index: 1;
}
.dashboard .dash-hero h2 {
font-weight: 800;
letter-spacing: -0.02em;
}
/*-----------------
Spotlight panel
A soft accent-washed panel that gives a headline figure (a GPA dial, a
balance, a score) a home instead of floating it on the white card. The
wash follows whatever `.accent-*` sits on the element, so one panel serves
every tone. Meant to hold a gauge — the dial's punched-out centre stays
on the card surface token so it reads cleanly against the tint.
-----------------*/
.dashboard .dash-spotlight {
position: relative;
overflow: hidden;
border-radius: var(--radius);
border: 1px solid var(--bs-border-color);
padding: 1.25rem;
background: radial-gradient(120% 90% at 50% -10%, var(--tint-primary), transparent 70%), var(--bs-body-bg);
}
.dashboard .dash-spotlight .gauge {
--gauge-surface: var(--bs-body-bg);
}
.dashboard .dash-spotlight-divider {
height: 1px;
background: var(--bs-border-color);
margin: 1rem -1.25rem;
}
/*-----------------
Spacing rhythm
Dashboards breathe more than form pages: roomier card and stat-tile
padding, aligned to index2's shell.
-----------------*/
.dashboard .card > .card-body {
padding: 1.5rem;
}
.dashboard .card > .card-header {
padding: 1.1rem 1.5rem;
}
.dashboard .stat-tile {
padding: 0.9rem 1rem;
}
/* Inside a dashboard the plain tile drops its grey fill and reads as a
hairline-bordered box — the calmer look these figure groups had before, and
a better match for the card surface they sit on. (index2's stat-grid keeps
the filled variant, since it isn't a `.dashboard`.) */
.dashboard .stat-tile.stat-tile-plain {
background: transparent;
border: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.dashboard .card > .card-body {
padding: 1.15rem;
}
.dashboard .card > .card-header {
padding: 1rem 1.15rem;
}
.dashboard .stat-tile {
padding: 0.75rem 0.85rem;
}
}
/* The global `.accent-*` utility (see _avatar.scss) already declares the
avatar token pair. Mirroring it onto the dashboard pair means one accent
class colours avatars, timetable rails, event tiles and meters alike, so a
page never has to carry both vocabularies on the same element. */
/*-----------------
Dashboard Classcard
The "My Classes" widget: a grid of class cards, each with a tinted
gradient header, a three-up stats row and an action bar. Reads the
`--dash-*` tokens from the `.dashboard` root; the accent utilities
(`.accent-*`) drive the per-card tint through the shell's bridge.
-----------------*/
/*----- my classes -----*/
.classcards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.classcard {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}
.classcard:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
}
.classcard-top {
display: flex;
align-items: center;
gap: 11px;
padding: 14px;
background: linear-gradient(120deg, var(--tint-primary), transparent);
}
.classcard-top b {
display: block;
font-size: 14px;
color: var(--bs-emphasis-color);
}
.classcard-top span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.classcard-badge {
margin-left: auto;
align-self: flex-start;
}
.classcard-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 12px 14px;
}
.classcard-stat b {
display: block;
font-size: 15px;
font-weight: 800;
color: var(--bs-emphasis-color);
}
.classcard-stat span {
font-size: 10px;
color: var(--bs-secondary-color);
}
.classcard-actions {
display: flex;
gap: 6px;
padding: 0 14px 14px;
}
.classcard-actions .btn {
flex: 1;
}
@media (max-width: 1199px) {
.classcards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.classcards {
grid-template-columns: 1fr;
}
}
/*-----------------
Dashboard Controls
The quick-attendance segmented toggle and the toast stack — the two
interactive controls the dashboard JS drives directly.
-----------------*/
/*----- quick attendance -----*/
.qa-toggle {
display: inline-flex;
border: 1px solid var(--bs-border-color);
border-radius: 999px;
overflow: hidden;
flex-shrink: 0;
}
.qa-toggle button {
border: 0;
background: transparent;
font-size: 11.5px;
font-weight: 600;
padding: 5px 13px;
color: var(--bs-secondary-color);
cursor: pointer;
transition: all var(--transition);
}
.qa-toggle button.p.active {
background: var(--bs-success);
color: #fff;
}
.qa-toggle button.a.active {
background: var(--bs-danger);
color: #fff;
}
/* the whole roster row is a click target */
#dashQaList .data-list-item {
cursor: pointer;
}
/*----- toasts -----*/
#toastStack {
position: fixed;
top: 76px;
right: 20px;
z-index: 3000;
display: flex;
flex-direction: column;
gap: 10px;
}
#toastStack .toast {
min-width: 250px;
}
/*-----------------
Dashboard Widgets
The pieces of the dashboard shell still in service: the attendance
heatmap strip and the calendar event row. Both read the `--dash-*`
tokens declared on the `.dashboard` root.
-----------------*/
/*----- attendance heatmap -----*/
.heatstrip {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16px, 1fr));
gap: 4px;
}
.heatstrip span {
aspect-ratio: 1;
border-radius: 4px;
background: var(--bs-secondary-bg);
}
.heatstrip span.l1 {
background: rgba(22, 163, 74, 0.25);
}
.heatstrip span.l2 {
background: rgba(22, 163, 74, 0.45);
}
.heatstrip span.l3 {
background: rgba(22, 163, 74, 0.68);
}
.heatstrip span.l4 {
background: rgba(22, 163, 74, 0.9);
}
.heatstrip span.ab {
background: rgba(220, 38, 38, 0.55);
}
.heatstrip-legend {
display: flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
color: var(--bs-secondary-color);
margin-top: 8px;
}
.heatstrip-legend i {
width: 12px;
height: 12px;
border-radius: 3px;
display: inline-block;
background: var(--bs-secondary-bg);
}
/* legend swatches carry the same level classes as the cells they explain, so
the key can never drift out of step with the strip */
.heatstrip-legend i.l1 {
background: rgba(22, 163, 74, 0.25);
}
.heatstrip-legend i.l2 {
background: rgba(22, 163, 74, 0.45);
}
.heatstrip-legend i.l3 {
background: rgba(22, 163, 74, 0.68);
}
.heatstrip-legend i.l4 {
background: rgba(22, 163, 74, 0.9);
}
.heatstrip-legend i.ab {
background: rgba(220, 38, 38, 0.55);
}
/*----- calendar events -----*/
.eventrow {
display: flex;
gap: 12px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--bs-border-color);
}
.eventrow:last-child {
border-bottom: 0;
}
.eventrow-date {
width: 48px;
flex-shrink: 0;
text-align: center;
border-radius: 10px;
padding: 6px 0;
background: var(--tint-primary);
color: var(--bs-primary);
}
.eventrow-date b {
display: block;
font-size: 17px;
font-weight: 800;
line-height: 1;
}
.eventrow-date span {
font-size: 9.5px;
text-transform: uppercase;
}
.eventrow-body b {
font-size: 12.5px;
color: var(--bs-emphasis-color);
display: block;
}
.eventrow-body span {
font-size: 11px;
color: var(--bs-secondary-color);
}
/*-----------------
Dashboard widgets — merged in from the former
components/_ui-dashboard-widgets.scss. These are generic, reusable
components; they live with their own kind rather than in a page-shaped file.
-----------------*/
#tdQaList .info-list-item {
cursor: pointer;
}
#tdQaList .info-list-item[data-att=absent] {
border-color: var(--tone-danger);
background: var(--tone-danger-soft);
}
/*-----------------
Dashboard widgets — hero, performance, AI, funnel, ranking panels.
Extracted from app-new.css unchanged.
-----------------*/ /*-----------------
Design tokens consumed by the widgets. Previously declared on
`body.mui-premium` in _app-shell.scss; moved here so the widgets stay
self-contained now that the body class is gone.
-----------------*/
@media (max-width: 1199.98px) {
.widget-canvas .pk-exec .pk-exec-kpi:nth-child(3n+1) {
border-left: 0;
}
}
@media (max-width: 767.98px) {
.widget-canvas .pk-exec .pk-exec-kpi {
border-left: 0 !important;
border-top: 1px solid var(--bs-border-color);
}
}
@media (max-width: 1399.98px) {
.widget-canvas .pk-si-donut {
border-left: 0;
border-top: 1px solid var(--bs-border-color);
}
}
/* leaderboard rank chip */ /* map placeholder */
.widget-canvas .map-panel {
position: relative;
border-radius: 12px;
min-height: 200px;
overflow: hidden;
border: 1px solid var(--bs-border-color);
background-image: linear-gradient(rgba(var(--bs-primary-rgb), 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.1) 1px, transparent 1px), radial-gradient(120% 120% at 30% 20%, rgba(var(--bs-primary-rgb), 0.1), transparent 60%);
background-size: 26px 26px, 26px 26px, 100% 100%;
display: grid;
place-items: center;
}
.widget-canvas .map-panel .map-panel-pin {
background: var(--bs-primary);
box-shadow: 0 8px 20px rgba(var(--bs-primary-rgb), 0.4);
z-index: 2;
}
.widget-canvas .map-panel .map-panel-pin::after {
content: "";
position: absolute;
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(var(--bs-primary-rgb), 0.35);
animation: pkPing 2s var(--transition) infinite;
}
@media (max-width: 991.98px) {
.widget-canvas .pk-inbox-item .pk-inbox-actions {
opacity: 1;
}
} /* premium performer cards */
.widget-canvas .spotlight-card {
position: relative;
overflow: hidden;
border: 0 !important;
border-radius: 16px;
}
.widget-canvas .spotlight-card.perf-green {
background: linear-gradient(135deg, #22c55e 0%, #0f8f42 100%);
box-shadow: 0 10px 24px rgba(22, 163, 74, 0.28);
}
.widget-canvas .spotlight-card.perf-blue {
background: linear-gradient(135deg, #5b76e6 0%, #2f6fd0 100%);
box-shadow: 0 10px 24px rgba(61, 94, 225, 0.28);
}
.widget-canvas .spotlight-card::before {
content: "";
position: absolute;
right: -46px;
top: -56px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
}
.widget-canvas .spotlight-card::after {
content: "";
position: absolute;
right: 56px;
top: 34px;
width: 96px;
height: 96px;
border-radius: 50%;
border: 2px dashed rgba(255, 255, 255, 0.22);
}
.widget-canvas .spotlight-card > * {
position: relative;
z-index: 2;
}
.widget-canvas .spotlight-card .spotlight-img {
max-height: 150px;
width: auto;
filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
margin-bottom: -16px;
} /* ============================================================
SCHOOL HERO STRIP (index2 only) — compact, white background
Card border/radius/shadow inherited from base .content .card.
Only a faint brand tint sits inside the white hero.
============================================================ */
.widget-canvas .welcome-banner {
position: relative;
overflow: hidden;
}
.widget-canvas .welcome-banner::before {
content: "";
position: absolute;
right: -70px;
top: -90px;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--bs-primary-rgb), 0.1), transparent 68%);
pointer-events: none;
}
.widget-canvas .welcome-banner .card-body {
position: relative;
z-index: 1;
padding: 1.35rem 1.5rem;
}
/* brand tile + greeting */
.widget-canvas .welcome-banner .welcome-banner-brand {
background: linear-gradient(135deg, var(--bs-primary), #6d8bff);
box-shadow: 0 8px 18px rgba(var(--bs-primary-rgb), 0.3);
}
.widget-canvas .welcome-banner h2 {
font-weight: 800;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
font-size: 1.4rem;
} /* KPI strip — white bordered tiles with divider feel */
@media (max-width: 575.98px) {
.widget-canvas .welcome-banner .card-body {
padding: 1.15rem;
}
} /* ---- Popular Categories → bubble cluster + insights ---- */
.widget-canvas .bubble-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
justify-content: center;
padding: 0.4rem 0 0.9rem;
}
.widget-canvas .bubble {
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
color: #fff;
line-height: 1.05;
padding: 4px;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
transition: transform 0.18s var(--transition);
cursor: default;
}
.widget-canvas .bubble.bubble-01 {
width: 85px;
height: 85px;
}
.widget-canvas .bubble.bubble-02 {
width: 75px;
height: 75px;
}
.widget-canvas .bubble.bubble-03 {
width: 60px;
height: 60px;
}
.widget-canvas .bubble.bubble-04 {
width: 45px;
height: 45px;
}
.widget-canvas .bubble.bubble-05 {
width: 38px;
height: 38px;
}
.widget-canvas .bubble:hover {
transform: scale(1.06);
}
.widget-canvas .bubble b {
font-size: 15px;
font-weight: 800;
letter-spacing: -0.02em;
}
.widget-canvas .bubble span {
font-size: 9.5px;
opacity: 0.92;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
} /* ---- Best Teacher / Top Student — achievement chip + tighter stats ---- */
.widget-canvas .spotlight-card .spotlight-img {
max-height: 132px;
}
/* ============================================================
Premium body treatment — still used by student-grid.html
============================================================ */ /* ===== pk-premium.css ===== */ /* ============================================================
PreSkool — Premium Card + Button layer (portable)
Matches index2.html's button/card language WITHOUT the full
enterprise shell. Opt in per page with .
Light + Dark (data-theme="dark") aware.
============================================================ */
/* ---- Cards ---- */
body.pk-premium .card {
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
transition: box-shadow 0.25s var(--transition), transform 0.25s var(--transition);
}
body.pk-premium .card:hover {
box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.12);
}
body.pk-premium .card .card-header {
background: transparent;
border-bottom: 1px solid var(--bs-border-color);
}
[data-theme=dark] body.pk-premium .card {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] body.pk-premium .card:hover {
box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.5);
}
/* ---- Buttons: shared radius/weight ---- */
body.pk-premium .btn {
border-radius: 10px;
font-weight: 500;
}
/* ---- 3D PRIMARY BUTTON (same as index2) ---- */
body.pk-premium .btn.btn-primary {
position: relative;
border: 0 !important;
border-radius: 10px;
font-weight: 600;
background: var(--bs-primary) !important;
box-shadow: 0 2px 0 #2c47b5, 0 6px 14px rgba(var(--bs-primary-rgb), 0.35) !important;
transition: transform 0.12s var(--transition), box-shadow 0.12s var(--transition), background-color 0.12s var(--transition) !important;
}
body.pk-premium .btn.btn-primary:hover,
body.pk-premium .btn.btn-primary:focus {
transform: translateY(-1px);
background: #4568e8 !important;
box-shadow: 0 3px 0 #2c47b5, 0 10px 20px rgba(var(--bs-primary-rgb), 0.42) !important;
}
body.pk-premium .btn.btn-primary:active {
transform: translateY(2px);
background: var(--bs-primary) !important;
box-shadow: 0 0 0 #2c47b5, 0 2px 5px rgba(var(--bs-primary-rgb), 0.3) !important;
}
body.pk-premium .btn.btn-primary i {
line-height: 1;
}
[data-theme=dark] body.pk-premium .btn.btn-primary {
box-shadow: 0 2px 0 #223a95, 0 6px 14px rgba(0, 0, 0, 0.45) !important;
}
[data-theme=dark] body.pk-premium .btn.btn-primary:hover,
[data-theme=dark] body.pk-premium .btn.btn-primary:focus {
box-shadow: 0 3px 0 #223a95, 0 10px 20px rgba(0, 0, 0, 0.5) !important;
}
[data-theme=dark] body.pk-premium .btn.btn-primary:active {
box-shadow: 0 0 0 #223a95, 0 2px 5px rgba(0, 0, 0, 0.4) !important;
}
/* ---- 3D LIGHT BUTTON (same as index2) ---- */
body.pk-premium .btn.btn-light,
body.pk-premium .btn.btn-outline-light.bg-white {
position: relative;
border: 1px solid var(--bs-border-color) !important;
border-radius: 10px;
font-weight: 600;
color: var(--bs-emphasis-color) !important;
background: var(--bs-body-bg) !important;
box-shadow: 0 2px 0 #d5dae2, 0 4px 10px rgba(15, 23, 42, 0.08) !important;
transition: transform 0.12s var(--transition), box-shadow 0.12s var(--transition), background-color 0.12s var(--transition) !important;
}
body.pk-premium .btn.btn-light:hover,
body.pk-premium .btn.btn-light:focus,
body.pk-premium .btn.btn-outline-light.bg-white:hover {
transform: translateY(-1px);
background: var(--bs-tertiary-bg) !important;
box-shadow: 0 3px 0 #d5dae2, 0 8px 16px rgba(15, 23, 42, 0.1) !important;
}
body.pk-premium .btn.btn-light:active,
body.pk-premium .btn.btn-outline-light.bg-white:active {
transform: translateY(2px);
background: var(--bs-body-bg) !important;
box-shadow: 0 0 0 #d5dae2, 0 2px 4px rgba(15, 23, 42, 0.08) !important;
}
body.pk-premium .btn.btn-light i {
line-height: 1;
}
[data-theme=dark] body.pk-premium .btn.btn-light,
[data-theme=dark] body.pk-premium .btn.btn-outline-light.bg-white {
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.45) !important;
}
[data-theme=dark] body.pk-premium .btn.btn-light:hover,
[data-theme=dark] body.pk-premium .btn.btn-light:focus {
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.5) !important;
}
[data-theme=dark] body.pk-premium .btn.btn-light:active {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
/*-----------------
Dashboard widgets — merged in from the former
components/_ui-dashboard-widgets.scss. These are generic, reusable
components; they live with their own kind rather than in a page-shaped file.
-----------------*/
.widget-title {
gap: 7px;
font-size: 13.5px;
font-weight: 700;
color: var(--heading);
}
.widget-title i {
font-size: 18px;
color: var(--bs-primary);
}
.widget-subtitle {
font-size: 11.5px;
font-weight: 500;
color: var(--muted);
}
.widget-header {
gap: 12px;
margin-bottom: 14px;
}
.widget-link {
font-size: 12px;
font-weight: 600;
color: var(--bs-primary);
text-decoration: none;
gap: 3px;
}
.widget-link:hover {
color: var(--bs-primary);
text-decoration: underline;
}
/* ---------- ROUTE STRIP ---------- */
.route-line {
height: 8px;
border-radius: 999px;
background: var(--surface-soft);
margin: 14px 0 8px;
}
.route-line .fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: 999px;
background: var(--bs-primary);
}
.route-line .bus {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 26px;
height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 14px;
color: #fff;
background: var(--bs-primary);
box-shadow: 0 0 0 3px var(--surface);
}
/* .route-stops — all declarations now Bootstrap utilities in the markup */
.route-stops span {
font-size: 10px;
color: var(--muted);
}
.route-stops .done {
color: var(--tone-success);
font-weight: 650;
}
.route-stops .now {
color: var(--bs-primary);
font-weight: 700;
}
/* ---------- LIVE TRACKER ---------- */
.tracker-hero {
gap: 14px;
padding: 14px 16px;
border-radius: var(--radius-list);
color: #fff;
background: linear-gradient(130deg, #1f2433, #343b52);
margin-bottom: 14px;
}
.tracker-id {
gap: 12px;
min-width: 0;
}
.tracker-id .ic {
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 21px;
color: #fff;
background: rgba(255, 255, 255, 0.14);
}
.tracker-id b {
display: block;
font-size: 14px;
font-weight: 700;
}
.tracker-id span {
font-size: 11.5px;
opacity: 0.72;
}
/* .tracker-eta — all declarations now Bootstrap utilities in the markup */
.tracker-eta b {
display: block;
font-size: 26px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
}
.tracker-eta span {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.72;
}
.tracker-map {
border: 1px solid var(--border-soft);
border-radius: var(--radius-list);
background: var(--surface-soft);
margin-bottom: 14px;
}
.tracker-svg {
height: auto;
}
.tracker-svg .grid path {
stroke: var(--border-soft);
stroke-width: 1;
fill: none;
}
.tracker-svg .route {
fill: none;
stroke: var(--border-soft);
stroke-width: 7;
stroke-linecap: round;
stroke-linejoin: round;
}
.tracker-svg .route-done {
fill: none;
stroke: url(#trackerRouteGradient);
stroke-width: 7;
stroke-linecap: round;
stroke-linejoin: round;
}
.tracker-svg .stop circle {
fill: var(--surface);
stroke: var(--border-soft);
stroke-width: 3;
}
.tracker-svg .stop text {
font-size: 12px;
font-weight: 600;
text-anchor: middle;
fill: var(--muted);
}
.tracker-svg .stop.done circle {
stroke: var(--tone-success);
}
.tracker-svg .stop.done text {
fill: var(--tone-success);
}
.tracker-svg .stop.next circle {
stroke: var(--bs-primary);
}
.tracker-svg .stop.next text {
fill: var(--bs-primary);
font-weight: 700;
}
.tracker-svg .bus circle {
fill: var(--bs-primary);
}
.tracker-svg .bus text {
font-size: 14px;
text-anchor: middle;
}
.tracker-badge {
top: 10px;
right: 10px;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
color: var(--tone-danger);
background: var(--surface);
border: 1px solid var(--border-soft);
}
/* a scrolling events panel — also rescued from the former
pages/_student-dashboard.scss; used by the layout demo pages */
.event-wrapper {
max-height: 480px;
overflow-y: auto;
}
/*-----------------
Section header
The band that opens a page section: eyebrow + title on the left, actions on
the right, with the vertical rhythm baked in so sections space themselves.
Promoted from pages/_parent-portal.scss — a reusable pattern, not page style.
-----------------*/
/* ---------- primitives ---------- */
.portal-section {
gap: 12px;
margin: 26px 2px 14px;
}
.portal-section:first-child {
margin-top: 4px;
}
/*-----------------
Holiday Calendar
A modern, enterprise-SaaS month grid for the Holidays workspace.
Deliberately distinct from the tabular .sw-/.dt- workspaces: a real
CSS-grid calendar with hairline gutters, soft surfaces, a circular
"today" marker and left-accented event pills. Scoped to
#holidayWorkspace so nothing leaks into the rest of the template.
-----------------*/
#holidayWorkspace {
/* ---- The month header ---- */
}
#holidayWorkspace .hol-cal-card .card-header {
background: transparent;
}
#holidayWorkspace .hol-month-title {
font-weight: 700;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
min-width: 148px;
text-align: center;
}
#holidayWorkspace .hol-nav-btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
#holidayWorkspace .hol-nav-btn:hover {
background: var(--bs-secondary-bg);
transform: translateY(-1px);
}
#holidayWorkspace {
/* ---- Legend chips ---- */
}
#holidayWorkspace .hol-legend {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.85rem;
}
#holidayWorkspace .hol-legend-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 12px;
font-weight: 500;
color: var(--bs-secondary-color);
}
#holidayWorkspace .hol-legend-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--bs-primary);
}
#holidayWorkspace {
/* ---- Calendar grid ---- */
}
#holidayWorkspace .hol-cal {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 1px;
background: var(--bs-border-color);
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
overflow: hidden;
}
#holidayWorkspace .hol-dow {
background: var(--bs-secondary-bg);
padding: 0.65rem 0.5rem;
text-align: center;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
#holidayWorkspace .hol-cell {
background: var(--bs-body-bg);
min-height: 118px;
padding: 0.5rem 0.5rem 0.55rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
position: relative;
transition: background 0.18s ease;
}
#holidayWorkspace .hol-cell:hover {
background: var(--bs-secondary-bg);
}
#holidayWorkspace .hol-cell:hover .hol-cell-add {
opacity: 1;
}
#holidayWorkspace .hol-cell.is-out {
background: var(--bs-secondary-bg);
}
#holidayWorkspace .hol-cell.is-out .hol-daynum {
color: #b9c0cf;
}
#holidayWorkspace .hol-cell.is-weekend {
background: #fafbfe;
}
#holidayWorkspace .hol-cell.is-today {
box-shadow: inset 0 0 0 2px var(--bs-primary);
}
#holidayWorkspace .hol-cell.is-today .hol-daynum {
background: var(--bs-primary);
color: #fff;
}
#holidayWorkspace .hol-cell-top {
display: flex;
align-items: center;
justify-content: space-between;
}
#holidayWorkspace .hol-daynum {
width: 27px;
height: 27px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#holidayWorkspace .hol-cell-add {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
border: 1px dashed var(--bs-border-color);
color: var(--bs-secondary-color);
background: var(--bs-body-bg);
opacity: 0;
transition: opacity 0.18s ease, background 0.18s ease;
}
#holidayWorkspace .hol-cell-add:hover {
background: var(--bs-secondary-bg);
}
#holidayWorkspace .hol-events {
display: flex;
flex-direction: column;
gap: 0.28rem;
}
#holidayWorkspace {
/* ---- Event pills ---- */
}
#holidayWorkspace .hol-event {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.22rem 0.45rem;
border-radius: 7px;
border-left: 3px solid var(--bs-primary);
background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
color: color-mix(in srgb, var(--bs-primary) 62%, #1b2436);
font-size: 11.5px;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
#holidayWorkspace .hol-event:hover {
transform: translateX(2px);
background: color-mix(in srgb, var(--bs-primary) 20%, transparent);
box-shadow: 0 4px 12px rgba(27, 36, 54, 0.08);
}
#holidayWorkspace .hol-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bs-primary);
flex: 0 0 auto;
}
#holidayWorkspace .hol-ev-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#holidayWorkspace {
/* Category accents (shared by pills, legend, list dots) */
}
#holidayWorkspace {
/* =========================================================
Sidebar widgets — premium, distinct from stock BS cards
========================================================= */
}
#holidayWorkspace .hol-side .card {
border-radius: var(--radius);
}
#holidayWorkspace .hol-widget > .card-header {
background: transparent;
border-bottom: 1px solid var(--bs-border-color);
padding-bottom: 0.85rem;
}
#holidayWorkspace .hol-widget > .card-body {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
#holidayWorkspace {
/* Section header: icon chip + title + optional link */
}
#holidayWorkspace .hol-cardhead {
display: flex;
align-items: center;
gap: 0.6rem;
}
#holidayWorkspace .hol-cardhead-ic {
width: 32px;
height: 32px;
flex: 0 0 auto;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
color: var(--bs-primary);
}
#holidayWorkspace .hol-cardhead h5 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#holidayWorkspace .hol-head-link {
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
color: var(--bs-primary);
display: inline-flex;
align-items: center;
}
#holidayWorkspace .hol-head-link i {
transition: transform 0.16s ease;
}
#holidayWorkspace .hol-head-link:hover i {
transform: translateX(2px);
}
#holidayWorkspace {
/* ---- Quick Statistics tiles ---- */
}
#holidayWorkspace .hol-stat {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 0.7rem;
border-radius: 12px;
background: color-mix(in srgb, var(--bs-primary) 7%, var(--bs-body-bg));
border: 1px solid color-mix(in srgb, var(--bs-primary) 15%, transparent);
transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
#holidayWorkspace .hol-stat:hover {
transform: translateY(-2px);
background: color-mix(in srgb, var(--bs-primary) 11%, var(--bs-body-bg));
box-shadow: 0 8px 20px rgba(27, 36, 54, 0.09);
}
#holidayWorkspace .hol-stat-ic {
width: 38px;
height: 38px;
flex: 0 0 auto;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: color-mix(in srgb, var(--bs-primary) 17%, transparent);
color: var(--bs-primary);
}
#holidayWorkspace .hol-stat-val {
margin: 0;
font-size: 20px;
font-weight: 700;
line-height: 1;
color: var(--bs-emphasis-color);
}
#holidayWorkspace .hol-stat-label {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
#holidayWorkspace {
/* ---- Upcoming / Recent mini rows ---- */
}
#holidayWorkspace .hol-mini {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.5rem;
border-radius: 12px;
text-decoration: none;
color: inherit;
border: 1px solid transparent;
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
#holidayWorkspace .hol-mini:hover {
background: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
transform: translateX(2px);
}
#holidayWorkspace .hol-mini:hover .hol-mini-go {
opacity: 1;
transform: translateX(0);
}
#holidayWorkspace .hol-date {
width: 44px;
height: 46px;
flex: 0 0 auto;
border-radius: 11px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--bs-primary) 13%, transparent);
color: var(--bs-primary);
border: 1px solid color-mix(in srgb, var(--bs-primary) 22%, transparent);
}
#holidayWorkspace .hol-date-d {
font-size: 17px;
font-weight: 700;
line-height: 1;
}
#holidayWorkspace .hol-date-m {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
#holidayWorkspace .hol-mini-body {
flex: 1;
min-width: 0;
}
#holidayWorkspace .hol-mini-title {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#holidayWorkspace .hol-mini-meta {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
#holidayWorkspace .hol-mini-badge {
flex: 0 0 auto;
font-size: 10.5px;
font-weight: 700;
padding: 0.18rem 0.5rem;
border-radius: 20px;
background: color-mix(in srgb, var(--bs-primary) 15%, transparent);
color: var(--bs-primary);
white-space: nowrap;
}
#holidayWorkspace .hol-mini-badge.is-past {
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
}
#holidayWorkspace .hol-mini-go {
flex: 0 0 auto;
color: var(--bs-secondary-color);
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.16s ease, transform 0.16s ease;
}
#holidayWorkspace .hol-cat-rail {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--bs-primary);
flex: 0 0 auto;
}
#holidayWorkspace {
/* ---- Category rows ---- */
}
#holidayWorkspace .hol-cat-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.55rem;
border-radius: 12px;
text-decoration: none;
color: inherit;
border: 1px solid transparent;
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
#holidayWorkspace .hol-cat-item:hover {
background: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
transform: translateX(2px);
}
#holidayWorkspace .hol-cat-item:hover .hol-mini-go {
opacity: 1;
transform: translateX(0);
}
#holidayWorkspace .hol-cat-item.active {
background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
border-color: color-mix(in srgb, var(--bs-primary) 26%, transparent);
}
#holidayWorkspace .hol-cat-ic {
width: 32px;
height: 32px;
flex: 0 0 auto;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
background: color-mix(in srgb, var(--bs-primary) 15%, transparent);
color: var(--bs-primary);
}
#holidayWorkspace .hol-cat-name {
flex: 1;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#holidayWorkspace .hol-cat-count {
font-size: 11px;
font-weight: 700;
color: var(--bs-primary);
background: color-mix(in srgb, var(--bs-primary) 13%, transparent);
border-radius: 20px;
padding: 0.12rem 0.5rem;
}
#holidayWorkspace {
/* ---- List rows ---- */
}
#holidayWorkspace .hol-list-row {
transition: background 0.14s ease;
}
#holidayWorkspace .hol-list-row:hover {
background: var(--bs-secondary-bg);
}
#holidayWorkspace {
/* ---- Responsive: agenda-style stacking ---- */
}
@media (max-width: 991.98px) {
#holidayWorkspace .hol-cell {
min-height: 92px;
}
}
@media (max-width: 575.98px) {
#holidayWorkspace .hol-cal {
grid-template-columns: 1fr;
gap: 0;
}
#holidayWorkspace .hol-dow {
display: none;
}
#holidayWorkspace .hol-cell {
min-height: 0;
flex-direction: row;
align-items: flex-start;
gap: 0.75rem;
border-bottom: 1px solid var(--bs-border-color);
}
#holidayWorkspace .hol-cell.is-out {
display: none;
}
#holidayWorkspace .hol-cell.is-empty {
display: none;
}
#holidayWorkspace .hol-cell-top {
flex: 0 0 44px;
flex-direction: column;
}
#holidayWorkspace .hol-events {
flex: 1;
}
#holidayWorkspace .hol-cell-add {
display: none;
}
}
/* ---- Dark mode ---- */
[data-theme=dark] #holidayWorkspace .hol-cell.is-weekend,
[data-layout-mode=dark] #holidayWorkspace .hol-cell.is-weekend {
background: #1b2233;
}
[data-theme=dark] #holidayWorkspace .hol-event,
[data-layout-mode=dark] #holidayWorkspace .hol-event {
color: color-mix(in srgb, var(--bs-primary) 70%, #e8ebf3);
}
/*-----------------
Expense / Income Finance Workspace
A master-detail finance workspace: a scrollable queue on the left, a
sticky detail panel on the right (info, receipts, timeline, actions,
discussion). Deliberately distinct from the tabular .sw-/.dt- workspaces.
Shared by the Expense Approval (#expenseWorkspace) and Income Management
(#incomeWorkspace) pages — same .exp-* master-detail vocabulary.
-----------------*/
#expenseWorkspace,
#incomeWorkspace {
/* ---- Queue (master) ---- */
}
#expenseWorkspace .exp-queue,
#incomeWorkspace .exp-queue {
display: flex;
flex-direction: column;
gap: 0.6rem;
max-height: calc(100vh - 300px);
overflow-y: auto;
padding: 0.15rem 0.3rem 0.15rem 0.15rem;
scrollbar-width: thin;
}
#expenseWorkspace .exp-queue::-webkit-scrollbar,
#incomeWorkspace .exp-queue::-webkit-scrollbar {
width: 6px;
}
#expenseWorkspace .exp-queue::-webkit-scrollbar-thumb,
#incomeWorkspace .exp-queue::-webkit-scrollbar-thumb {
background: var(--bs-border-color);
border-radius: 20px;
}
#expenseWorkspace .exp-card,
#incomeWorkspace .exp-card {
position: relative;
display: block;
text-decoration: none;
color: inherit;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
background: var(--bs-body-bg);
padding: 0.85rem 0.9rem 0.85rem 1.05rem;
cursor: pointer;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}
#expenseWorkspace .exp-card::before,
#incomeWorkspace .exp-card::before {
content: "";
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 3px;
border-radius: 3px;
background: var(--bs-primary);
opacity: 0.5;
transition: opacity 0.16s ease;
}
#expenseWorkspace .exp-card:hover,
#incomeWorkspace .exp-card:hover {
border-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
box-shadow: 0 8px 20px rgba(27, 36, 54, 0.07);
transform: translateY(-1px);
}
#expenseWorkspace .exp-card.active,
#incomeWorkspace .exp-card.active {
border-color: var(--bs-primary);
background: color-mix(in srgb, var(--bs-primary) 4%, var(--bs-body-bg));
box-shadow: 0 8px 22px rgba(27, 36, 54, 0.09);
}
#expenseWorkspace .exp-card.active::before,
#incomeWorkspace .exp-card.active::before {
opacity: 1;
}
#expenseWorkspace .exp-card-title,
#incomeWorkspace .exp-card-title {
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#expenseWorkspace .exp-card-amount,
#incomeWorkspace .exp-card-amount {
font-size: 16px;
font-weight: 700;
color: var(--bs-emphasis-color);
white-space: nowrap;
}
#expenseWorkspace .exp-card-meta,
#incomeWorkspace .exp-card-meta {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
#expenseWorkspace,
#incomeWorkspace {
/* Priority accent per card */
}
#expenseWorkspace,
#incomeWorkspace {
/* ---- Detail (sticky) ---- */
}
#expenseWorkspace .exp-detail-wrap,
#incomeWorkspace .exp-detail-wrap {
position: sticky;
top: 0;
}
#expenseWorkspace .exp-hero,
#incomeWorkspace .exp-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
#expenseWorkspace .exp-hero-amount,
#incomeWorkspace .exp-hero-amount {
font-size: 26px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1;
}
#expenseWorkspace .exp-info-item .exp-info-label,
#incomeWorkspace .exp-info-item .exp-info-label {
display: block;
font-size: 11.5px;
color: var(--bs-secondary-color);
margin-bottom: 0.1rem;
}
#expenseWorkspace .exp-info-item .exp-info-val,
#incomeWorkspace .exp-info-item .exp-info-val {
font-size: 13px;
font-weight: 500;
color: var(--bs-emphasis-color);
}
#expenseWorkspace,
#incomeWorkspace {
/* ---- Receipt cards ---- */
}
#expenseWorkspace .exp-receipt,
#incomeWorkspace .exp-receipt {
display: flex;
align-items: center;
gap: 0.6rem;
border: 1px solid var(--bs-border-color);
border-radius: 11px;
padding: 0.55rem 0.65rem;
background: var(--bs-body-bg);
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
#expenseWorkspace .exp-receipt:hover,
#incomeWorkspace .exp-receipt:hover {
border-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
box-shadow: 0 6px 14px rgba(27, 36, 54, 0.06);
}
#expenseWorkspace .exp-receipt-ic,
#incomeWorkspace .exp-receipt-ic {
width: 40px;
height: 40px;
flex: 0 0 auto;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
color: var(--bs-danger);
}
#expenseWorkspace,
#incomeWorkspace {
/* ---- Approval timeline ---- */
}
#expenseWorkspace .exp-tl,
#incomeWorkspace .exp-tl {
list-style: none;
margin: 0;
padding: 0;
}
#expenseWorkspace .exp-tl-step,
#incomeWorkspace .exp-tl-step {
position: relative;
display: flex;
gap: 0.8rem;
padding-bottom: 1.1rem;
}
#expenseWorkspace .exp-tl-step:last-child,
#incomeWorkspace .exp-tl-step:last-child {
padding-bottom: 0;
}
#expenseWorkspace .exp-tl-ic,
#incomeWorkspace .exp-tl-ic {
width: 34px;
height: 34px;
flex: 0 0 auto;
z-index: 1;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
border: 2px solid var(--bs-body-bg);
box-shadow: 0 0 0 1px var(--bs-border-color);
}
#expenseWorkspace .exp-tl-step:not(:last-child) .exp-tl-ic::after,
#incomeWorkspace .exp-tl-step:not(:last-child) .exp-tl-ic::after {
content: "";
position: absolute;
left: 16px;
top: 34px;
bottom: 0;
width: 2px;
background: var(--bs-border-color);
}
#expenseWorkspace .exp-tl-step.is-done .exp-tl-ic,
#incomeWorkspace .exp-tl-step.is-done .exp-tl-ic {
background: var(--bs-success);
color: #fff;
box-shadow: 0 0 0 1px var(--bs-success);
}
#expenseWorkspace .exp-tl-step.is-current .exp-tl-ic,
#incomeWorkspace .exp-tl-step.is-current .exp-tl-ic {
background: var(--bs-primary);
color: #fff;
box-shadow: 0 0 0 1px var(--bs-primary);
animation: expPulse 1.8s ease-in-out infinite;
}
#expenseWorkspace .exp-tl-step.is-reject .exp-tl-ic,
#incomeWorkspace .exp-tl-step.is-reject .exp-tl-ic {
background: var(--bs-danger);
color: #fff;
box-shadow: 0 0 0 1px var(--bs-danger);
}
#expenseWorkspace .exp-tl-step.is-muted,
#incomeWorkspace .exp-tl-step.is-muted {
opacity: 0.55;
}
#expenseWorkspace .exp-tl-title,
#incomeWorkspace .exp-tl-title {
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#expenseWorkspace .exp-tl-meta,
#incomeWorkspace .exp-tl-meta {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
@keyframes expPulse {
0%, 100% {
box-shadow: 0 0 0 1px var(--bs-primary);
}
50% {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary) 30%, transparent);
}
}
#expenseWorkspace,
#incomeWorkspace {
/* ---- Approval action buttons ---- */
}
#expenseWorkspace .exp-actions,
#incomeWorkspace .exp-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
#expenseWorkspace,
#incomeWorkspace {
/* ---- Comments / discussion ---- */
}
#expenseWorkspace .exp-comment,
#incomeWorkspace .exp-comment {
display: flex;
gap: 0.65rem;
}
#expenseWorkspace .exp-comment-body,
#incomeWorkspace .exp-comment-body {
flex: 1;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
border-radius: 12px;
padding: 0.6rem 0.75rem;
}
#expenseWorkspace .exp-comment-body.is-finance,
#incomeWorkspace .exp-comment-body.is-finance {
background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg));
border-color: color-mix(in srgb, var(--bs-primary) 18%, transparent);
}
#expenseWorkspace .exp-comment-name,
#incomeWorkspace .exp-comment-name {
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#expenseWorkspace .exp-comment-time,
#incomeWorkspace .exp-comment-time {
font-size: 11px;
color: var(--bs-secondary-color);
}
#expenseWorkspace .exp-comment-text,
#incomeWorkspace .exp-comment-text {
font-size: 12.5px;
color: var(--bs-emphasis-color);
margin: 0.15rem 0 0;
}
#expenseWorkspace,
#incomeWorkspace {
/* ---- Empty state ---- */
}
#expenseWorkspace .exp-empty,
#incomeWorkspace .exp-empty {
display: none;
}
#expenseWorkspace.is-empty .exp-empty,
#incomeWorkspace.is-empty .exp-empty {
display: block;
}
#expenseWorkspace.is-empty .exp-detail-live,
#incomeWorkspace.is-empty .exp-detail-live {
display: none;
}
#expenseWorkspace,
#incomeWorkspace {
/* ---- Responsive ---- */
}
@media (max-width: 991.98px) {
#expenseWorkspace .exp-queue,
#incomeWorkspace .exp-queue {
max-height: none;
}
#expenseWorkspace .exp-detail-wrap,
#incomeWorkspace .exp-detail-wrap {
position: static;
}
#expenseWorkspace .exp-actions,
#incomeWorkspace .exp-actions {
grid-template-columns: 1fr 1fr;
}
}
/* ---- Dark mode ---- */
/*-----------------
Expense Category Management Workspace
Master-detail: a list of expense-category cards on the left drives a
sticky category-detail panel on the right (info, budget allocation,
departments, approval workflow). Scoped to #categoryWorkspace.
-----------------*/
#categoryWorkspace {
/* ---- Category list (master) ---- */
}
#categoryWorkspace .cat-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
max-height: calc(100vh - 300px);
overflow-y: auto;
padding: 0.15rem 0.3rem 0.15rem 0.15rem;
scrollbar-width: thin;
}
#categoryWorkspace .cat-list::-webkit-scrollbar {
width: 6px;
}
#categoryWorkspace .cat-list::-webkit-scrollbar-thumb {
background: var(--bs-border-color);
border-radius: 20px;
}
#categoryWorkspace .cat-card {
position: relative;
display: block;
text-decoration: none;
color: inherit;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
background: var(--bs-body-bg);
padding: 0.85rem 0.9rem 0.85rem 1.05rem;
cursor: pointer;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}
#categoryWorkspace .cat-card::before {
content: "";
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 3px;
border-radius: 3px;
background: var(--bs-primary);
opacity: 0.5;
transition: opacity 0.16s ease;
}
#categoryWorkspace .cat-card:hover {
border-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
box-shadow: 0 8px 20px rgba(27, 36, 54, 0.07);
transform: translateY(-1px);
}
#categoryWorkspace .cat-card.active {
border-color: var(--bs-primary);
background: color-mix(in srgb, var(--bs-primary) 4%, var(--bs-body-bg));
box-shadow: 0 8px 22px rgba(27, 36, 54, 0.09);
}
#categoryWorkspace .cat-card.active::before {
opacity: 1;
}
#categoryWorkspace .cat-icon {
width: 42px;
height: 42px;
flex: 0 0 auto;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: color-mix(in srgb, var(--bs-primary) 15%, transparent);
color: var(--bs-primary);
}
#categoryWorkspace .cat-card-name {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
display: block;
}
#categoryWorkspace .cat-card-code {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
#categoryWorkspace .cat-color-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--bs-primary);
display: inline-block;
}
#categoryWorkspace {
/* Slim budget meter on the card + detail */
}
#categoryWorkspace .cat-meter {
height: 6px;
border-radius: 20px;
background: var(--bs-secondary-bg);
overflow: hidden;
}
#categoryWorkspace .cat-meter-fill {
height: 100%;
border-radius: 20px;
background: var(--bs-primary);
transition: width 0.35s ease;
}
#categoryWorkspace .cat-meter-fill.is-over {
background: var(--bs-danger);
}
#categoryWorkspace {
/* Accent tokens */
}
#categoryWorkspace {
/* ---- Detail (sticky) ---- */
}
#categoryWorkspace .cat-detail-wrap {
position: sticky;
top: 0;
}
#categoryWorkspace .cat-hero-icon {
width: 58px;
height: 58px;
flex: 0 0 auto;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 28px;
background: color-mix(in srgb, var(--bs-primary) 15%, transparent);
color: var(--bs-primary);
}
#categoryWorkspace .cat-info-item .cat-info-label {
display: block;
font-size: 11.5px;
color: var(--bs-secondary-color);
margin-bottom: 0.1rem;
}
#categoryWorkspace .cat-info-item .cat-info-val {
font-size: 13px;
font-weight: 500;
color: var(--bs-emphasis-color);
}
#categoryWorkspace {
/* Recent expense mini rows */
}
#categoryWorkspace .cat-mini {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.45rem 0.5rem;
border-radius: 10px;
text-decoration: none;
color: inherit;
border: 1px solid transparent;
transition: background 0.16s ease, border-color 0.16s ease;
}
#categoryWorkspace .cat-mini:hover {
background: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
}
#categoryWorkspace {
/* Approval workflow steps */
}
#categoryWorkspace .cat-flow {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
#categoryWorkspace .cat-flow-step {
display: flex;
align-items: center;
gap: 0.65rem;
}
#categoryWorkspace .cat-flow-ic {
width: 30px;
height: 30px;
flex: 0 0 auto;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
color: var(--bs-primary);
}
#categoryWorkspace {
/* ---- Empty state ---- */
}
#categoryWorkspace .cat-empty {
display: none;
}
#categoryWorkspace.is-empty .cat-empty {
display: block;
}
#categoryWorkspace.is-empty .cat-detail-live {
display: none;
}
#categoryWorkspace {
/* ---- Responsive ---- */
}
@media (max-width: 991.98px) {
#categoryWorkspace .cat-list {
max-height: none;
}
#categoryWorkspace .cat-detail-wrap {
position: static;
}
}
/* ---- Dark mode ---- */
/*-----------------
Invoice Details & Billing Workspace
A premium single-invoice review workspace scoped to #invoiceWorkspace:
a sticky action bar, an invoice header, a two-column body (billing detail
on the left, student + financial summary + quick actions on the right),
fee breakdown, payment/activity timelines, attachments and modals.
Deliberately distinct from the tabular workspace / data-table and master-detail .exp-*
workspaces. Uses only tokens + Bootstrap utilities — no palette changes.
-----------------*/
#invoiceWorkspace {
/* ---------- Sticky action bar ---------- */
}
#invoiceWorkspace .iv-actionbar {
position: sticky;
top: 0;
z-index: 5;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
backdrop-filter: blur(10px);
border: 1px solid var(--bs-border-color) !important;
box-shadow: 0 8px 24px -16px rgba(27, 36, 54, 0.3);
}
#invoiceWorkspace .iv-ab-title {
font-size: 16px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1.1;
}
#invoiceWorkspace .iv-ab-sub {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
#invoiceWorkspace .iv-ab-actions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
}
#invoiceWorkspace {
/* ---------- Section heads ---------- */
}
#invoiceWorkspace .iv-cardhead {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1rem;
}
#invoiceWorkspace .iv-cardhead-ic {
width: 38px;
height: 38px;
flex: 0 0 auto;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--bs-primary);
background: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 18%, transparent), color-mix(in srgb, var(--bs-primary) 7%, transparent));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary) 14%, transparent);
}
#invoiceWorkspace .iv-cardhead-title {
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
line-height: 1.15;
}
#invoiceWorkspace .iv-cardhead-sub {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
#invoiceWorkspace {
/* ---------- Invoice hero ---------- */
}
#invoiceWorkspace .iv-hero {
position: relative;
overflow: hidden;
border-radius: 20px;
padding: 1.5rem 1.6rem;
background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--bs-primary) 16%, transparent) 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg)) 0%, var(--bs-body-bg) 60%);
border: 1px solid color-mix(in srgb, var(--bs-primary) 14%, var(--bs-border-color));
box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--bs-primary) 55%, transparent);
}
#invoiceWorkspace .iv-hero-glow {
position: absolute;
top: -70px;
right: -40px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--bs-primary) 22%, transparent), transparent 70%);
pointer-events: none;
}
#invoiceWorkspace .iv-hero-grid {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
gap: 1.4rem;
}
#invoiceWorkspace .iv-hero-left {
flex: 1 1 340px;
min-width: 0;
}
#invoiceWorkspace .iv-hero-brand {
display: flex;
align-items: center;
gap: 0.9rem;
margin-bottom: 1.25rem;
}
#invoiceWorkspace .iv-hero-logo {
width: 54px;
height: 54px;
flex: 0 0 auto;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #fff;
background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 55%, #7b61ff));
box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--bs-primary) 70%, transparent);
}
#invoiceWorkspace .iv-hero-eyebrow {
display: block;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
#invoiceWorkspace .iv-hero-no {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.5px;
color: var(--bs-emphasis-color);
line-height: 1.1;
}
#invoiceWorkspace .iv-hero-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 12px;
font-weight: 600;
padding: 0.3rem 0.7rem;
border-radius: 30px;
color: var(--bs-warning);
background: color-mix(in srgb, var(--bs-warning) 15%, transparent);
}
#invoiceWorkspace .iv-hero-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 0.9rem 1.2rem;
}
#invoiceWorkspace .iv-hero-mi .iv-hero-mi-label {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 11px;
color: var(--bs-secondary-color);
margin-bottom: 0.15rem;
}
#invoiceWorkspace .iv-hero-mi .iv-hero-mi-label i {
font-size: 13px;
}
#invoiceWorkspace .iv-hero-mi .iv-hero-mi-val {
font-size: 13.5px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
#invoiceWorkspace .iv-hero-due {
flex: 0 1 260px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.35rem;
padding: 1.15rem 1.25rem;
border-radius: 16px;
color: #fff;
background: linear-gradient(150deg, color-mix(in srgb, var(--bs-primary) 92%, #000) 0%, var(--bs-primary) 55%, color-mix(in srgb, var(--bs-primary) 60%, #7b61ff) 100%);
box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--bs-primary) 75%, transparent);
}
#invoiceWorkspace .iv-hero-due-label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
opacity: 0.85;
}
#invoiceWorkspace .iv-hero-due-val {
font-size: 30px;
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1;
}
#invoiceWorkspace .iv-hero-due-bar {
height: 6px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.28);
overflow: hidden;
margin: 0.5rem 0 0.1rem;
}
#invoiceWorkspace .iv-hero-due-fill {
display: block;
height: 100%;
width: 0;
border-radius: 20px;
background: #fff;
transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
#invoiceWorkspace .iv-hero-due-sub {
font-size: 11.5px;
opacity: 0.85;
}
#invoiceWorkspace .iv-hero-due-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.65rem;
}
#invoiceWorkspace {
/* ---------- Student profile ---------- */
}
#invoiceWorkspace .iv-profile {
display: flex;
align-items: center;
gap: 0.85rem;
}
#invoiceWorkspace .iv-profile-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem 1rem;
}
#invoiceWorkspace .iv-info-item .iv-info-label {
display: block;
font-size: 11px;
color: var(--bs-secondary-color);
margin-bottom: 0.1rem;
}
#invoiceWorkspace .iv-info-item .iv-info-val {
font-size: 13px;
font-weight: 500;
color: var(--bs-emphasis-color);
word-break: break-word;
}
#invoiceWorkspace .iv-info-full {
grid-column: 1/-1;
}
#invoiceWorkspace {
/* ---------- Financial summary ---------- */
}
#invoiceWorkspace .iv-sum {
list-style: none;
margin: 0;
padding: 0;
}
#invoiceWorkspace .iv-sum-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0;
font-size: 13px;
color: var(--bs-emphasis-color);
border-bottom: 1px dashed var(--bs-border-color);
}
#invoiceWorkspace .iv-sum-row:last-child {
border-bottom: 0;
}
#invoiceWorkspace .iv-sum-row .iv-sum-label {
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
#invoiceWorkspace .iv-sum-row .iv-sum-val {
font-weight: 600;
}
#invoiceWorkspace .iv-sum-row.is-minus .iv-sum-val {
color: var(--bs-success);
}
#invoiceWorkspace .iv-sum-row.is-add .iv-sum-val {
color: var(--bs-danger);
}
#invoiceWorkspace .iv-sum-total {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.35rem;
padding: 0.95rem 1.1rem;
border-radius: 14px;
color: #fff;
background: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 90%, #000), var(--bs-primary));
box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--bs-primary) 75%, transparent);
}
#invoiceWorkspace .iv-sum-total .iv-sum-total-label {
font-size: 12.5px;
font-weight: 600;
opacity: 0.9;
}
#invoiceWorkspace .iv-sum-total .iv-sum-total-val {
font-size: 23px;
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1;
}
#invoiceWorkspace .iv-paybar {
height: 8px;
border-radius: 20px;
background: var(--bs-secondary-bg);
overflow: hidden;
}
#invoiceWorkspace .iv-paybar-fill {
height: 100%;
border-radius: 20px;
background: var(--bs-success);
width: 0;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#invoiceWorkspace {
/* ---------- Fee breakdown table ---------- */
}
#invoiceWorkspace .iv-fee-table {
border-collapse: separate;
border-spacing: 0;
}
#invoiceWorkspace .iv-fee-table thead th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--bs-secondary-color);
font-weight: 600;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
border-bottom: 1px solid var(--bs-border-color);
padding-top: 0.65rem;
padding-bottom: 0.65rem;
}
#invoiceWorkspace .iv-fee-table thead th:first-child {
border-left: 1px solid var(--bs-border-color);
border-top-left-radius: 11px;
}
#invoiceWorkspace .iv-fee-table thead th:last-child {
border-right: 1px solid var(--bs-border-color);
border-top-right-radius: 11px;
}
#invoiceWorkspace .iv-fee-table tbody td {
vertical-align: middle;
font-size: 13px;
color: var(--bs-emphasis-color);
border-bottom: 1px solid var(--bs-border-color);
}
#invoiceWorkspace .iv-fee-table tbody tr {
transition: background 0.14s ease;
}
#invoiceWorkspace .iv-fee-table tbody tr:hover td {
background: color-mix(in srgb, var(--bs-primary) 4%, transparent);
}
#invoiceWorkspace .iv-fee-table tfoot td {
font-weight: 600;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
#invoiceWorkspace .iv-fee-table .iv-fee-cat {
font-weight: 600;
}
#invoiceWorkspace .iv-fee-table .iv-fee-desc {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
#invoiceWorkspace {
/* ---------- Timelines (payment + activity) ---------- */
}
#invoiceWorkspace .iv-tl {
list-style: none;
margin: 0;
padding: 0;
}
#invoiceWorkspace .iv-tl-step {
position: relative;
display: flex;
gap: 0.85rem;
padding-bottom: 1.15rem;
}
#invoiceWorkspace .iv-tl-step:last-child {
padding-bottom: 0;
}
#invoiceWorkspace .iv-tl-ic {
width: 34px;
height: 34px;
flex: 0 0 auto;
z-index: 1;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
border: 2px solid var(--bs-body-bg);
box-shadow: 0 0 0 1px var(--bs-border-color);
}
#invoiceWorkspace .iv-tl-step:not(:last-child) .iv-tl-ic::after {
content: "";
position: absolute;
left: 16px;
top: 34px;
bottom: 0;
width: 2px;
background: var(--bs-border-color);
}
#invoiceWorkspace .iv-tl-step.is-done .iv-tl-ic {
background: var(--bs-success);
color: #fff;
box-shadow: 0 0 0 1px var(--bs-success);
}
#invoiceWorkspace .iv-tl-step.is-current .iv-tl-ic {
background: var(--bs-primary);
color: #fff;
box-shadow: 0 0 0 1px var(--bs-primary);
animation: ivPulse 1.8s ease-in-out infinite;
}
#invoiceWorkspace .iv-tl-step.is-muted {
opacity: 0.55;
}
#invoiceWorkspace .iv-tl-body {
padding-top: 0.1rem;
}
#invoiceWorkspace .iv-tl-title {
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#invoiceWorkspace .iv-tl-meta {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
@keyframes ivPulse {
0%, 100% {
box-shadow: 0 0 0 1px var(--bs-primary);
}
50% {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary) 30%, transparent);
}
}
#invoiceWorkspace {
/* ---------- Quick actions ---------- */
}
#invoiceWorkspace .iv-qa {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.65rem 0.4rem;
}
#invoiceWorkspace .iv-qa-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
text-decoration: none;
color: var(--bs-secondary-color);
border: 0;
background: transparent;
cursor: pointer;
}
#invoiceWorkspace .iv-qa-btn:hover .iv-qa-ic {
color: #fff;
border-color: transparent;
background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 55%, #7b61ff));
transform: translateY(-3px);
box-shadow: 0 12px 22px -8px color-mix(in srgb, var(--bs-primary) 70%, transparent);
}
#invoiceWorkspace .iv-qa-btn:hover .iv-qa-lbl {
color: var(--bs-emphasis-color);
}
#invoiceWorkspace .iv-qa-ic {
width: 48px;
height: 48px;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 21px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-emphasis-color);
transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
#invoiceWorkspace .iv-qa-lbl {
font-size: 10.5px;
font-weight: 500;
text-align: center;
line-height: 1.2;
transition: color 0.16s ease;
}
#invoiceWorkspace {
/* ---------- Attachments ---------- */
}
#invoiceWorkspace .iv-file {
display: flex;
align-items: center;
gap: 0.7rem;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
padding: 0.7rem 0.8rem;
background: var(--bs-body-bg);
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
#invoiceWorkspace .iv-file:hover {
border-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
box-shadow: 0 8px 18px rgba(27, 36, 54, 0.07);
transform: translateY(-1px);
}
#invoiceWorkspace .iv-file-ic {
width: 42px;
height: 42px;
flex: 0 0 auto;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 19px;
background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
color: var(--bs-danger);
}
#invoiceWorkspace .iv-file-ic.is-pdf {
background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
color: var(--bs-danger);
}
#invoiceWorkspace .iv-file-ic.is-img {
background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
color: var(--bs-primary);
}
#invoiceWorkspace .iv-file-ic.is-doc {
background: color-mix(in srgb, var(--bs-success) 12%, transparent);
color: var(--bs-success);
}
#invoiceWorkspace .iv-file-name {
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#invoiceWorkspace .iv-file-meta {
font-size: 11px;
color: var(--bs-secondary-color);
}
#invoiceWorkspace {
/* ---------- Cards: hover lift ---------- */
}
#invoiceWorkspace .iv-card {
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
#invoiceWorkspace .iv-card:hover {
box-shadow: 0 16px 38px -20px rgba(27, 36, 54, 0.28);
border-color: color-mix(in srgb, var(--bs-primary) 18%, var(--bs-border-color));
}
#invoiceWorkspace {
/* ---------- Skeleton loader ---------- */
}
#invoiceWorkspace .skeleton-loader {
display: none;
}
#invoiceWorkspace.is-loading .skeleton-loader {
display: block;
}
#invoiceWorkspace.is-loading .iv-live {
display: none;
}
#invoiceWorkspace {
/* shared primitive from components/_ui-skeleton.scss, workspace tone */
}
#invoiceWorkspace .skeleton {
border-radius: 8px;
background: var(--bs-secondary-bg);
}
#invoiceWorkspace .skeleton::after {
background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 65%, transparent), transparent);
}
#invoiceWorkspace .skeleton-line {
height: 12px;
margin-bottom: 0.6rem;
}
#invoiceWorkspace .skeleton-block {
height: 120px;
}
#invoiceWorkspace .skeleton-btn {
height: 40px;
width: 110px;
display: inline-block;
border-radius: 8px;
}
#invoiceWorkspace .skeleton-circle {
width: 46px;
height: 46px;
border-radius: 50%;
display: inline-block;
}
#invoiceWorkspace {
/* ---------- Empty state ---------- */
}
#invoiceWorkspace .iv-empty {
display: none;
text-align: center;
padding: 3.5rem 1rem;
}
#invoiceWorkspace.is-empty .iv-empty {
display: block;
}
#invoiceWorkspace.is-empty .iv-live, #invoiceWorkspace.is-empty .skeleton-loader {
display: none;
}
#invoiceWorkspace .iv-empty-ic {
width: 78px;
height: 78px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 34px;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
}
#invoiceWorkspace {
/* ---------- Responsive ---------- */
}
@media (max-width: 991.98px) {
#invoiceWorkspace .iv-detail-sticky {
position: static;
}
}
@media (max-width: 575.98px) {
#invoiceWorkspace .iv-profile-info {
grid-template-columns: 1fr;
}
}
#invoiceWorkspace .iv-detail-sticky {
position: sticky;
top: 64px;
}
/* ---------- Dark mode ---------- */
[data-theme=dark] #invoiceWorkspace .skeleton::after,
[data-layout-mode=dark] #invoiceWorkspace .skeleton::after {
background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 12%, transparent), transparent);
}
/*-----------------
Notice Board & School Communication Hub
A premium announcements workspace scoped to #noticeWorkspace: a sticky
toolbar (reusing the shared workspace chrome), a featured/pinned strip and a
responsive masonry-style card grid with an optional compact list view.
Notice details open in a Bootstrap offcanvas. Bespoke .nb-* vocabulary,
distinct from the tabular and finance workspaces.
Tokens + Bootstrap utilities only — no palette changes.
-----------------*/
#noticeWorkspace {
/* ---------- Featured / pinned strip ---------- */
}
#noticeWorkspace .nb-sec-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.85rem;
}
#noticeWorkspace .nb-sec-ic {
width: 30px;
height: 30px;
flex: 0 0 auto;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--bs-primary);
background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}
#noticeWorkspace .nb-sec-title {
font-size: 15px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1.1;
}
#noticeWorkspace .nb-sec-sub {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
#noticeWorkspace {
/* ---------- Card grid ---------- */
}
#noticeWorkspace .nb-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
align-items: start;
}
#noticeWorkspace .nb-featured-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
#noticeWorkspace {
/* ---------- Notice card ---------- */
}
#noticeWorkspace .nb-card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
padding: 1.1rem 1.15rem 1rem;
cursor: pointer;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
#noticeWorkspace .nb-card:hover {
border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
box-shadow: 0 16px 38px -20px rgba(27, 36, 54, 0.3);
transform: translateY(-3px);
}
#noticeWorkspace .nb-card:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
}
#noticeWorkspace .nb-card.is-featured {
background: radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--bs-primary) 12%, transparent) 0%, transparent 55%), var(--bs-body-bg);
border-color: color-mix(in srgb, var(--bs-primary) 28%, var(--bs-border-color));
}
#noticeWorkspace .nb-card.is-featured::before {
width: 5px;
opacity: 1;
}
#noticeWorkspace {
/* priority accents */
}
#noticeWorkspace .nb-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.6rem;
}
#noticeWorkspace .nb-pin {
position: absolute;
top: 14px;
right: 82px;
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--bs-primary);
background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
}
#noticeWorkspace .nb-pri-dot {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 11px;
font-weight: 600;
color: var(--bs-primary);
}
#noticeWorkspace .nb-pri-dot::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bs-primary);
}
#noticeWorkspace .nb-title {
font-size: 15px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1.35;
margin: 0 0 0.4rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#noticeWorkspace .nb-desc {
font-size: 12.5px;
color: var(--bs-secondary-color);
line-height: 1.5;
margin: 0 0 0.8rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
#noticeWorkspace .nb-meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.9rem;
font-size: 11.5px;
color: var(--bs-secondary-color);
margin-bottom: 0.75rem;
}
#noticeWorkspace .nb-meta .nb-meta-i {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
#noticeWorkspace .nb-meta .nb-meta-i i {
font-size: 13px;
}
#noticeWorkspace .nb-pub {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.85rem;
}
#noticeWorkspace .nb-pub .nb-pub-name {
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#noticeWorkspace .nb-pub .nb-pub-role {
font-size: 11px;
color: var(--bs-secondary-color);
}
#noticeWorkspace .nb-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: auto;
padding-top: 0.75rem;
border-top: 1px solid var(--bs-border-color);
}
#noticeWorkspace .nb-foot-stats {
display: inline-flex;
gap: 0.85rem;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
#noticeWorkspace .nb-foot-stat {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
#noticeWorkspace .nb-foot-stat i {
font-size: 14px;
}
#noticeWorkspace .nb-actions {
display: inline-flex;
gap: 0.25rem;
}
#noticeWorkspace .nb-card:has(.dropdown-menu.show) {
z-index: 5;
}
#noticeWorkspace .nb-actions .dropdown-menu {
z-index: 1050;
}
#noticeWorkspace {
/* ---------- Compact list view ---------- */
}
#noticeWorkspace.is-list .nb-grid, #noticeWorkspace.is-list .nb-featured-grid {
grid-template-columns: 1fr;
}
#noticeWorkspace.is-list .nb-featured-grid {
margin-bottom: 1rem;
}
#noticeWorkspace.is-list .nb-card {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
padding: 0.85rem 1rem;
}
#noticeWorkspace.is-list .nb-card.is-featured {
background: var(--bs-body-bg);
}
#noticeWorkspace.is-list .nb-title {
-webkit-line-clamp: 1;
margin-bottom: 0.25rem;
}
#noticeWorkspace.is-list .nb-desc {
-webkit-line-clamp: 1;
margin-bottom: 0;
flex: 1 1 260px;
}
#noticeWorkspace.is-list .nb-card-main {
flex: 1 1 320px;
min-width: 0;
}
#noticeWorkspace.is-list .nb-meta {
margin-bottom: 0;
margin-left: auto;
}
#noticeWorkspace.is-list .nb-pub {
margin-bottom: 0;
}
#noticeWorkspace.is-list .nb-foot {
margin-top: 0;
padding-top: 0;
border-top: 0;
flex: 0 0 auto;
}
#noticeWorkspace.is-list .nb-foot-stats {
display: none;
}
#noticeWorkspace .nb-card-main {
display: contents;
}
#noticeWorkspace.is-list .nb-card-main {
display: block;
}
#noticeWorkspace {
/* ---------- Attachment cards (offcanvas + modal) ---------- */
}
#noticeWorkspace .nb-file {
display: flex;
align-items: center;
gap: 0.7rem;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
padding: 0.65rem 0.75rem;
background: var(--bs-body-bg);
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
#noticeWorkspace .nb-file:hover {
border-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
box-shadow: 0 8px 18px rgba(27, 36, 54, 0.07);
transform: translateY(-1px);
}
#noticeWorkspace .nb-file-ic {
width: 40px;
height: 40px;
flex: 0 0 auto;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
color: var(--bs-danger);
}
#noticeWorkspace .nb-file-ic.is-img {
background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
color: var(--bs-primary);
}
#noticeWorkspace .nb-file-ic.is-doc {
background: color-mix(in srgb, var(--bs-info) 12%, transparent);
color: var(--bs-info);
}
#noticeWorkspace .nb-file-ic.is-sheet {
background: color-mix(in srgb, var(--bs-success) 12%, transparent);
color: var(--bs-success);
}
#noticeWorkspace .nb-file-name {
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#noticeWorkspace .nb-file-meta {
font-size: 11px;
color: var(--bs-secondary-color);
}
#noticeWorkspace {
/* ---------- Offcanvas detail bits ---------- */
}
#noticeWorkspace .nb-oc-hero {
border-radius: 12px;
padding: 1rem 1.1rem;
background: radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--bs-primary) 14%, transparent) 0%, transparent 55%), var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
}
#noticeWorkspace .nb-info-item .nb-info-label {
display: block;
font-size: 11px;
color: var(--bs-secondary-color);
margin-bottom: 0.1rem;
}
#noticeWorkspace .nb-info-item .nb-info-val {
font-size: 13px;
font-weight: 500;
color: var(--bs-emphasis-color);
}
#noticeWorkspace .nb-readbar {
height: 8px;
border-radius: 20px;
background: var(--bs-secondary-bg);
overflow: hidden;
}
#noticeWorkspace .nb-readbar-fill {
display: block;
height: 100%;
border-radius: 20px;
background: var(--bs-success);
width: 0;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#noticeWorkspace .nb-comment {
display: flex;
gap: 0.6rem;
}
#noticeWorkspace .nb-comment-body {
flex: 1;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
border-radius: 12px;
padding: 0.55rem 0.7rem;
}
#noticeWorkspace .nb-comment-name {
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#noticeWorkspace .nb-comment-time {
font-size: 11px;
color: var(--bs-secondary-color);
}
#noticeWorkspace .nb-comment-text {
font-size: 12.5px;
color: var(--bs-emphasis-color);
margin: 0.15rem 0 0;
}
#noticeWorkspace {
/* ---------- Skeleton ---------- */
}
#noticeWorkspace .skeleton-loader {
display: none;
}
#noticeWorkspace.is-loading .skeleton-loader {
display: block;
}
#noticeWorkspace.is-loading .nb-live {
display: none;
}
#noticeWorkspace .skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
#noticeWorkspace .skeleton-card {
border: 1px solid var(--bs-border-color);
border-radius: 14px;
padding: 1.1rem;
background: none;
height: auto;
}
#noticeWorkspace {
/* shared primitive from components/_ui-skeleton.scss, workspace tone */
}
#noticeWorkspace .skeleton {
border-radius: 8px;
background: var(--bs-secondary-bg);
}
#noticeWorkspace .skeleton::after {
background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 65%, transparent), transparent);
}
#noticeWorkspace .skeleton-line {
height: 12px;
margin-bottom: 0.6rem;
}
#noticeWorkspace .skeleton-line.w-70 {
width: 70%;
}
#noticeWorkspace .skeleton-line.w-40 {
width: 40%;
}
#noticeWorkspace .skeleton-block {
height: 60px;
margin: 0.8rem 0;
}
#noticeWorkspace {
/* ---------- Empty state ---------- */
}
#noticeWorkspace .nb-empty {
display: none;
text-align: center;
padding: 3.5rem 1rem;
}
#noticeWorkspace.is-empty .nb-empty {
display: block;
}
#noticeWorkspace.is-empty .nb-live-body {
display: none;
}
#noticeWorkspace .nb-empty-ic {
width: 78px;
height: 78px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 34px;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
}
#noticeWorkspace {
/* ---------- Fullscreen ---------- */
}
#noticeWorkspace.nb-fullscreen {
position: fixed;
inset: 0;
z-index: 1045;
background: var(--bs-secondary-bg);
padding: 1rem 1.25rem;
overflow: auto;
}
/* ---------- Notice detail offcanvas ---------- */
#nb_detail {
--bs-offcanvas-width: 460px;
}
#nb_detail .offcanvas-footer {
margin-top: auto;
}
#nb_detail .nb-pri-dot {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 11px;
font-weight: 600;
color: var(--bs-primary);
}
#nb_detail .nb-pri-dot::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bs-primary);
}
#nb_detail .nb-info-item .nb-info-label {
display: block;
font-size: 11px;
color: #8a94a6;
margin-bottom: 0.1rem;
}
#nb_detail .nb-info-item .nb-info-val {
font-size: 13px;
font-weight: 500;
}
#nb_detail .nb-readbar {
height: 8px;
border-radius: 20px;
background: #f2f4f9;
overflow: hidden;
}
#nb_detail .nb-readbar-fill {
display: block;
height: 100%;
border-radius: 20px;
background: var(--bs-success);
width: 0;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#nb_detail .nb-comment {
display: flex;
gap: 0.6rem;
}
#nb_detail .nb-comment-body {
flex: 1;
background: #f7f8fb;
border: 1px solid #e8ebf3;
border-radius: 12px;
padding: 0.55rem 0.7rem;
}
#nb_detail .nb-comment-name {
font-size: 12.5px;
font-weight: 600;
}
#nb_detail .nb-comment-time {
font-size: 11px;
color: #8a94a6;
}
#nb_detail .nb-comment-text {
font-size: 12.5px;
margin: 0.15rem 0 0;
}
#nb_detail .nb-file {
display: flex;
align-items: center;
gap: 0.7rem;
border: 1px solid #e8ebf3;
border-radius: 12px;
padding: 0.65rem 0.75rem;
}
#nb_detail .nb-file-ic {
width: 40px;
height: 40px;
flex: 0 0 auto;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
color: var(--bs-danger);
}
#nb_detail .nb-file-ic.is-img {
background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
color: var(--bs-primary);
}
#nb_detail .nb-file-name {
font-size: 12.5px;
font-weight: 600;
}
#nb_detail .nb-file-meta {
font-size: 11px;
color: #8a94a6;
}
/* ---------- Dark mode ---------- */
[data-theme=dark] #noticeWorkspace .skeleton::after,
[data-layout-mode=dark] #noticeWorkspace .skeleton::after {
background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 12%, transparent), transparent);
}
/*-----------------
School Events & Activities Management Workspace
A premium event-planning workspace scoped to #eventsWorkspace: the shared
.classes-workspace/.sw-* toolbar chrome, a monthly event calendar with event chips, an
upcoming-events card feed, a chronological timeline view and a grid view,
with a Bootstrap offcanvas for full event details. Bespoke .ev-* vocabulary.
Tokens + Bootstrap utilities only — no palette changes.
-----------------*/
#eventsWorkspace {
/* category accents */
}
#eventsWorkspace {
/* ---------- Section heads ---------- */
}
#eventsWorkspace .ev-sec-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.85rem;
}
#eventsWorkspace .ev-sec-ic {
width: 30px;
height: 30px;
flex: 0 0 auto;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--bs-primary);
background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}
#eventsWorkspace .ev-sec-title {
font-size: 15px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1.1;
}
#eventsWorkspace .ev-sec-sub {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
#eventsWorkspace {
/* ---------- View switching ---------- */
}
#eventsWorkspace .ev-timeline-sec {
display: none;
}
#eventsWorkspace.is-grid .ev-calendar-sec {
display: none;
}
#eventsWorkspace.is-grid .ev-events-title {
display: none;
}
#eventsWorkspace.is-timeline .ev-calendar-sec, #eventsWorkspace.is-timeline .ev-events-sec {
display: none;
}
#eventsWorkspace.is-timeline .ev-timeline-sec {
display: block;
}
#eventsWorkspace {
/* ---------- Calendar ---------- */
}
#eventsWorkspace .ev-cal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
#eventsWorkspace .ev-cal-nav {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
#eventsWorkspace .ev-cal-month {
font-size: 16px;
font-weight: 700;
color: var(--bs-emphasis-color);
min-width: 150px;
text-align: center;
}
#eventsWorkspace .ev-cal {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 1px;
background: var(--bs-border-color);
border: 1px solid var(--bs-border-color);
border-radius: 12px;
overflow: hidden;
animation: evFade 0.35s ease;
}
#eventsWorkspace .ev-dow {
background: var(--bs-secondary-bg);
padding: 0.55rem 0.4rem;
text-align: center;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--bs-secondary-color);
}
#eventsWorkspace .ev-cell {
background: var(--bs-body-bg);
min-height: 104px;
padding: 0.4rem 0.45rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
transition: background 0.16s ease;
}
#eventsWorkspace .ev-cell:hover {
background: var(--bs-secondary-bg);
}
#eventsWorkspace .ev-cell.is-out {
background: var(--bs-secondary-bg);
}
#eventsWorkspace .ev-cell.is-today .ev-daynum {
background: var(--bs-primary);
color: #fff;
}
#eventsWorkspace .ev-daynum {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#eventsWorkspace .ev-chip {
display: flex;
align-items: center;
gap: 0.3rem;
border: 0;
width: 100%;
text-align: left;
cursor: pointer;
padding: 0.2rem 0.4rem;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
color: var(--bs-primary);
background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: background 0.16s ease, transform 0.16s ease;
}
#eventsWorkspace .ev-chip::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bs-primary);
flex: 0 0 auto;
}
#eventsWorkspace .ev-chip:hover {
background: color-mix(in srgb, var(--bs-primary) 22%, transparent);
transform: translateX(2px);
}
#eventsWorkspace .ev-chip .ev-chip-txt {
overflow: hidden;
text-overflow: ellipsis;
}
#eventsWorkspace .ev-more {
font-size: 10.5px;
color: var(--bs-secondary-color);
background: none;
border: 0;
padding: 0 0.4rem;
text-align: left;
cursor: pointer;
}
#eventsWorkspace .ev-more:hover {
color: var(--bs-primary);
}
@keyframes evFade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
#eventsWorkspace {
/* ---------- Event card (feed / grid) ---------- */
}
#eventsWorkspace .ev-feed {
display: flex;
flex-direction: column;
gap: 1rem;
}
#eventsWorkspace .ev-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
align-items: start;
}
#eventsWorkspace.is-grid .ev-feed {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
align-items: start;
}
#eventsWorkspace .ev-card {
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
cursor: pointer;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
#eventsWorkspace .ev-card:hover {
border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
box-shadow: 0 16px 38px -20px rgba(27, 36, 54, 0.3);
transform: translateY(-3px);
}
#eventsWorkspace .ev-card:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
}
#eventsWorkspace .ev-banner {
position: relative;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 34px;
background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 55%, #000));
border-radius: 14px 14px 0 0 !important;
}
#eventsWorkspace .ev-banner-badge {
position: absolute;
top: 0.6rem;
left: 0.6rem;
font-size: 11px;
font-weight: 600;
padding: 0.2rem 0.6rem;
border-radius: 30px;
background: rgba(255, 255, 255, 0.9);
color: var(--bs-primary);
}
#eventsWorkspace .ev-banner-date {
position: absolute;
top: 0.6rem;
right: 0.6rem;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255, 255, 255, 0.95);
color: var(--bs-emphasis-color);
border-radius: 9px;
padding: 0.2rem 0.5rem;
line-height: 1.05;
}
#eventsWorkspace .ev-banner-date b {
font-size: 15px;
}
#eventsWorkspace .ev-banner-date span {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
#eventsWorkspace .ev-card-body {
padding: 0.9rem 1rem 1rem;
display: flex;
flex-direction: column;
flex: 1;
}
#eventsWorkspace .ev-card-title {
font-size: 14.5px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1.35;
margin: 0 0 0.5rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#eventsWorkspace .ev-meta {
display: flex;
flex-direction: column;
gap: 0.3rem;
font-size: 11.5px;
color: var(--bs-secondary-color);
margin-bottom: 0.7rem;
}
#eventsWorkspace .ev-meta-i {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
#eventsWorkspace .ev-meta-i i {
font-size: 14px;
color: var(--bs-primary);
}
#eventsWorkspace .ev-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: auto;
padding-top: 0.7rem;
border-top: 1px solid var(--bs-border-color);
}
#eventsWorkspace .ev-parts {
display: inline-flex;
align-items: center;
}
#eventsWorkspace .ev-parts .avatar {
margin-left: -8px;
border: 2px solid var(--bs-body-bg);
border-radius: 50%;
}
#eventsWorkspace .ev-parts .avatar:first-child {
margin-left: 0;
}
#eventsWorkspace .ev-parts-more {
width: 26px;
height: 26px;
margin-left: -8px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
color: var(--bs-emphasis-color);
background: var(--bs-secondary-bg);
border: 2px solid var(--bs-body-bg);
}
#eventsWorkspace .ev-actions {
display: inline-flex;
gap: 0.25rem;
}
#eventsWorkspace .ev-card:has(.dropdown-menu.show) {
position: relative;
z-index: 5;
}
#eventsWorkspace .ev-actions .dropdown-menu {
z-index: 1050;
}
#eventsWorkspace {
/* ---------- Timeline view ---------- */
}
#eventsWorkspace .ev-tl {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#eventsWorkspace .ev-tl::before {
content: "";
position: absolute;
left: 15px;
top: 4px;
bottom: 4px;
width: 2px;
background: var(--bs-border-color);
}
#eventsWorkspace .ev-tl-item {
position: relative;
padding: 0 0 1.1rem 3rem;
}
#eventsWorkspace .ev-tl-dot {
position: absolute;
left: 6px;
top: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--bs-primary);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary) 18%, transparent);
}
#eventsWorkspace .ev-tl-card {
border: 1px solid var(--bs-border-color);
border-radius: 12px;
padding: 0.75rem 0.9rem;
background: var(--bs-body-bg);
cursor: pointer;
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
#eventsWorkspace .ev-tl-card:hover {
border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
box-shadow: 0 10px 24px -14px rgba(27, 36, 54, 0.25);
}
#eventsWorkspace {
/* ---------- Progress timeline (offcanvas) ---------- */
}
#eventsWorkspace .ev-steps {
list-style: none;
margin: 0;
padding: 0;
}
#eventsWorkspace .ev-step {
position: relative;
display: flex;
gap: 0.8rem;
padding-bottom: 1.05rem;
}
#eventsWorkspace .ev-step:last-child {
padding-bottom: 0;
}
#eventsWorkspace .ev-step-ic {
width: 32px;
height: 32px;
flex: 0 0 auto;
z-index: 1;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
border: 2px solid var(--bs-body-bg);
box-shadow: 0 0 0 1px var(--bs-border-color);
}
#eventsWorkspace .ev-step:not(:last-child) .ev-step-ic::after {
content: "";
position: absolute;
left: 15px;
top: 32px;
bottom: 0;
width: 2px;
background: var(--bs-border-color);
}
#eventsWorkspace .ev-step.is-done .ev-step-ic {
background: var(--bs-success);
color: #fff;
box-shadow: 0 0 0 1px var(--bs-success);
}
#eventsWorkspace .ev-step.is-current .ev-step-ic {
background: var(--bs-primary);
color: #fff;
box-shadow: 0 0 0 1px var(--bs-primary);
animation: evPulse 1.8s ease-in-out infinite;
}
#eventsWorkspace .ev-step.is-muted {
opacity: 0.55;
}
#eventsWorkspace .ev-step-title {
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#eventsWorkspace .ev-step-meta {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
@keyframes evPulse {
0%, 100% {
box-shadow: 0 0 0 1px var(--bs-primary);
}
50% {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary) 30%, transparent);
}
}
#eventsWorkspace {
/* ---------- Attachments ---------- */
}
#eventsWorkspace .ev-file {
display: flex;
align-items: center;
gap: 0.7rem;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
padding: 0.65rem 0.75rem;
background: var(--bs-body-bg);
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
#eventsWorkspace .ev-file:hover {
border-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
box-shadow: 0 8px 18px rgba(27, 36, 54, 0.07);
transform: translateY(-1px);
}
#eventsWorkspace .ev-file-ic {
width: 40px;
height: 40px;
flex: 0 0 auto;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
color: var(--bs-danger);
}
#eventsWorkspace .ev-file-ic.is-img {
background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
color: var(--bs-primary);
}
#eventsWorkspace .ev-file-ic.is-doc {
background: color-mix(in srgb, var(--bs-info) 12%, transparent);
color: var(--bs-info);
}
#eventsWorkspace .ev-file-name {
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
#eventsWorkspace .ev-file-meta {
font-size: 11px;
color: var(--bs-secondary-color);
}
#eventsWorkspace {
/* ---------- Skeleton ---------- */
}
#eventsWorkspace .skeleton-loader {
display: none;
}
#eventsWorkspace.is-loading .skeleton-loader {
display: block;
}
#eventsWorkspace.is-loading .ev-live {
display: none;
}
#eventsWorkspace {
/* shared primitive from components/_ui-skeleton.scss, workspace tone */
}
#eventsWorkspace .skeleton {
border-radius: 8px;
background: var(--bs-secondary-bg);
}
#eventsWorkspace .skeleton::after {
background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 65%, transparent), transparent);
}
#eventsWorkspace .skeleton-line {
height: 12px;
margin-bottom: 0.6rem;
}
#eventsWorkspace .skeleton-line.w-40 {
width: 40%;
}
#eventsWorkspace .skeleton-line.w-70 {
width: 70%;
}
#eventsWorkspace .skeleton-cal {
height: 320px;
}
#eventsWorkspace .skeleton-card {
height: 150px;
}
#eventsWorkspace {
/* ---------- Empty state ---------- */
}
#eventsWorkspace .ev-empty {
display: none;
text-align: center;
padding: 3.5rem 1rem;
}
#eventsWorkspace.is-empty .ev-empty {
display: block;
}
#eventsWorkspace.is-empty .ev-live-body {
display: none;
}
#eventsWorkspace .ev-empty-ic {
width: 78px;
height: 78px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 34px;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
}
#eventsWorkspace {
/* ---------- Fullscreen ---------- */
}
#eventsWorkspace.ev-fullscreen {
position: fixed;
inset: 0;
z-index: 1045;
background: var(--bs-secondary-bg);
padding: 1rem 1.25rem;
overflow: auto;
}
#eventsWorkspace {
/* ---------- Responsive: calendar collapses to agenda ---------- */
}
@media (max-width: 767.98px) {
#eventsWorkspace .ev-cal {
grid-template-columns: 1fr;
}
#eventsWorkspace .ev-dow {
display: none;
}
#eventsWorkspace .ev-cell {
min-height: auto;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
#eventsWorkspace .ev-cell.is-empty, #eventsWorkspace .ev-cell.is-out:not(:has(.ev-chip)) {
display: none;
}
#eventsWorkspace .ev-cell .ev-daynum {
margin-right: 0.5rem;
}
#eventsWorkspace .ev-chip {
width: auto;
}
}
/* ---------- Event detail offcanvas ---------- */
#ev_detail {
--bs-offcanvas-width: 480px;
}
#ev_detail .ev-oc-banner {
height: 130px;
border-radius: 12px;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 0.9rem 1rem;
color: #fff;
background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 55%, #000));
}
#ev_detail .ev-oc-cat {
position: absolute;
top: 0.7rem;
left: 0.7rem;
font-size: 11px;
font-weight: 600;
padding: 0.2rem 0.6rem;
border-radius: 30px;
background: rgba(255, 255, 255, 0.9);
color: var(--bs-primary);
}
#ev_detail .ev-info-item .ev-info-label {
display: block;
font-size: 11px;
color: var(--bs-secondary-color);
margin-bottom: 0.1rem;
}
#ev_detail .ev-info-item .ev-info-val {
font-size: 13px;
font-weight: 500;
color: var(--bs-emphasis-color);
}
#ev_detail .ev-file {
display: flex;
align-items: center;
gap: 0.7rem;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
padding: 0.65rem 0.75rem;
}
#ev_detail .ev-file-ic {
width: 40px;
height: 40px;
flex: 0 0 auto;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
color: var(--bs-danger);
}
#ev_detail .ev-file-ic.is-img {
background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
color: var(--bs-primary);
}
#ev_detail .ev-file-name {
font-size: 12.5px;
font-weight: 600;
}
#ev_detail .ev-file-meta {
font-size: 11px;
color: var(--bs-secondary-color);
}
#ev_detail .ev-step {
position: relative;
display: flex;
gap: 0.8rem;
padding-bottom: 1.05rem;
}
#ev_detail .ev-step:last-child {
padding-bottom: 0;
}
#ev_detail .ev-step-ic {
width: 32px;
height: 32px;
flex: 0 0 auto;
z-index: 1;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
background: #f2f4f9;
color: var(--bs-secondary-color);
border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--bs-border-color);
}
#ev_detail .ev-step:not(:last-child) .ev-step-ic::after {
content: "";
position: absolute;
left: 15px;
top: 32px;
bottom: 0;
width: 2px;
background: var(--bs-border-color);
}
#ev_detail .ev-step.is-done .ev-step-ic {
background: var(--bs-success);
color: #fff;
}
#ev_detail .ev-step.is-current .ev-step-ic {
background: var(--bs-primary);
color: #fff;
}
#ev_detail .ev-step.is-muted {
opacity: 0.55;
}
#ev_detail .ev-step-title {
font-size: 13px;
font-weight: 600;
}
#ev_detail .ev-step-meta {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* ---------- Dark mode ---------- */
[data-theme=dark] #eventsWorkspace .skeleton::after,
[data-layout-mode=dark] #eventsWorkspace .skeleton::after {
background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 12%, transparent), transparent);
}
/******* Pages ******/
.filter-wrapper {
border-top: 1px solid #E9EDF4;
padding-top: 20px;
}
.table-filter-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 10px;
}
.table-filter-head .filter-head-left {
display: flex;
align-items: center;
flex-wrap: wrap;
}
@media (max-width: 575.98px) {
.table-filter-head .filter-head-left {
width: 100%;
}
}
.table-filter-head .filter-head-left h5 {
font-size: 15px;
font-weight: 500;
margin: 0 24px 10px 0;
}
.list-tab {
margin-bottom: 10px;
}
.list-tab ul {
border-bottom: 1px solid #E9EDF4;
}
.list-tab ul li {
display: inline-block;
margin-right: 24px;
margin: 0 24px 0 0;
}
.list-tab ul li a {
color: #515B73;
display: inline-block;
padding: 5px 0;
position: relative;
}
.list-tab ul li a span {
background: #FFF;
border-radius: 5px;
margin: 0 0 0 8px;
padding: 5px;
display: inline-block;
font-size: 12px;
color: #202C4B;
}
.list-tab ul li a::before {
position: absolute;
bottom: 0;
left: 0;
content: "";
background: transparent;
width: 100%;
height: 3px;
}
.list-tab ul li a:hover {
color: #3D5EE1;
}
.list-tab ul li a.active {
color: #3D5EE1;
}
.list-tab ul li a.active::before {
background: #3D5EE1;
}
.load-more .btn {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
}
.load-more .btn i {
margin-right: 5px;
}
.profile-uploader .btn {
font-size: 12px;
margin: 0 0 10px 0;
padding: 6px 20px;
}
.profile-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
}
@media (max-width: 575.98px) {
.profile-wrap {
display: block;
}
}
.profile-wrap .frames {
width: 100px;
height: 100px;
border-radius: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
margin-right: 15px;
color: #838A9B;
font-size: 24px;
border: 1px dashed #E9EDF4;
}
.profile-wrap .frames img {
border-radius: 5px;
width: 80px;
height: 80px;
}
@media (max-width: 575.98px) {
.profile-wrap .frames {
margin: 0 0 10px 0;
}
}
.profile-wrap .profile-upload p {
font-size: 12px;
}
.profile-uploader .btn {
font-size: 12px;
margin: 0 0 10px 0;
padding: 6px 20px;
}
.drag-upload-btn {
font-size: 12px;
font-weight: 600;
background: #FFF;
border: 1px dashed #E9EDF4;
border-radius: 5px;
margin: 0 12px 10px 0;
padding: 6px 16px;
position: relative;
transition: all 0.5s;
}
.drag-upload-btn input {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.drag-upload-btn:hover {
background: #3D5EE1;
border-color: #3D5EE1;
color: #FFF;
transition: all 0.5s;
}
.trash-icon {
font-size: 15px;
color: #E82646;
}
.trash-icon:hover {
color: rgb(198.0125, 20.9875, 50.1875);
}
.drop-width {
min-width: 350px;
max-width: 100%;
}
@media (max-width: 575.98px) {
.drop-width {
min-width: 260px;
}
}
/* Tickets page — Filter dropdown gets clipped/overlapped by the ticket
list card below it; elevate its stacking context only while open. */
.tk-filter-drop {
position: relative;
}
.tk-filter-drop:has(.dropdown-menu.show) {
z-index: 1055;
}
.tk-filter-drop .dropdown-menu {
z-index: 1060;
}
/*-----------------
Student profile
Merged from the former pages/_student-profile.scss — the student module
keeps one stylesheet, and every reusable block it used (accents, skeleton,
avatars, badges) now comes from the global component library.
-----------------*/
/* ============================================================
STUDENT PROFILE page — migrated from app-new.css
============================================================ */
/* ===== student-profile.css ===== */
/* ============================================================
Student 360° Profile — premium enterprise workspace
Scoped under .student-profile so it never affects sidebar/header/
layout or the global palette. Inherits Bootstrap --bs-*
tokens and only adds neutral premium surfaces on top.
============================================================ */
/* Match card border / radius / shadow to index2.html (shell-catalyst).
Scoped to .student-profile so it cannot bleed onto other pages in the merged bundle. */
.student-profile .card {
border: 1px solid #e8eaed;
border-radius: 16px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
}
[data-theme=dark] .student-profile .card,
[data-bs-theme=dark] .student-profile .card {
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.student-profile {
--avatar-accent: var(--bs-primary);
--avatar-accent-soft: var(--tint-primary);
}
@media (prefers-reduced-motion: reduce) {
.student-profile * {
animation: none !important;
transition: none !important;
}
}
/* colour accents */
/* ============================================================
ACTION BUTTONS (page header)
============================================================ */
.profile-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.profile-button {
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0 13px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
color: var(--bs-body-color, #1f2937);
font-size: 13px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
text-decoration: none;
}
.profile-button i {
font-size: 16px;
}
.profile-button:hover {
background: var(--bs-tertiary-bg);
border-color: var(--bs-primary);
color: var(--bs-primary);
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.profile-button.profile-icon-button {
padding: 0;
width: 38px;
justify-content: center;
}
.profile-button-primary {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.profile-button-primary:hover {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
filter: brightness(1.06);
}
.profile-back {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 38px;
height: 38px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
color: var(--bs-body-color, #1f2937);
text-decoration: none;
transition: all var(--transition);
}
.profile-back i {
font-size: 18px;
}
.profile-back:hover {
background: var(--bs-tertiary-bg);
border-color: var(--bs-primary);
color: var(--bs-primary);
transform: translateX(-2px);
box-shadow: var(--shadow);
}
.student-profile .dropdown-menu {
min-width: 214px;
border-radius: 12px;
}
.student-profile .dropdown-head {
padding: 6px 10px 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.student-profile .dropdown-item {
display: flex;
align-items: center;
font-size: 13px;
padding: 7px 10px;
}
.student-profile .dropdown-item i {
font-size: 16px;
color: var(--bs-secondary-color);
}
.student-profile .dropdown-item:hover i,
.student-profile .dropdown-item:focus i {
color: var(--bs-primary);
}
/* ============================================================
HERO
============================================================ */
.profile-hero {
position: relative;
overflow: hidden;
padding: 24px;
/* soft brand-tinted background */
background: radial-gradient(130% 120% at 100% 0%, var(--tint-primary), transparent 55%), linear-gradient(135deg, var(--tint-primary) 0%, rgba(255, 255, 255, 0.4) 45%, var(--bs-secondary-bg) 100%);
}
/* white pattern overlay (dots + diagonal weave) */
.profile-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.9) 1.6px, transparent 1.7px), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 16px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 16px);
background-size: 20px 20px, auto, auto;
background-position: 0 0;
opacity: 0.7;
pointer-events: none;
-webkit-mask-image: linear-gradient(115deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 90%);
mask-image: linear-gradient(115deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 90%);
}
/* soft white glow blobs for depth */
.profile-hero::after {
content: "";
position: absolute;
top: -60px;
right: -40px;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.75), transparent 70%);
pointer-events: none;
}
[data-bs-theme=dark] .profile-hero {
background: radial-gradient(130% 120% at 100% 0%, rgba(61, 94, 225, 0.22), transparent 55%), linear-gradient(135deg, rgba(61, 94, 225, 0.16) 0%, var(--bs-body-bg) 55%);
}
[data-bs-theme=dark] .profile-hero::before {
background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.4px, transparent 1.5px), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 16px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 16px);
background-size: 20px 20px, auto, auto;
opacity: 1;
}
[data-bs-theme=dark] .profile-hero::after {
background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
}
.hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 22px;
align-items: center;
}
@media (max-width: 1199.98px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
.hero-photo {
position: relative;
width: 118px;
height: 118px;
border-radius: 20px;
padding: 4px;
background: var(--bs-body-bg);
box-shadow: var(--shadow-lift);
}
.hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
}
.hero-photo .presence {
position: absolute;
right: 4px;
bottom: 4px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 3px solid var(--bs-body-bg);
background: #16a34a;
}
.hero-id {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.hero-name {
font-size: 24px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1.1;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
@media (max-width: 575.98px) {
.hero-name {
justify-content: center;
}
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 6px;
}
.hero-meta > span {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
color: var(--bs-secondary-color);
}
.hero-meta i {
font-size: 15px;
opacity: 0.8;
}
.hero-meta b {
color: var(--bs-emphasis-color);
font-weight: 600;
}
.badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.profile-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
}
.profile-badge i {
font-size: 13px;
}
.profile-badge .profile-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.hero-right {
display: flex;
align-items: center;
gap: 22px;
}
/* score rings */
.ring-group {
display: flex;
gap: 16px;
}
.profile-ring {
text-align: center;
}
.ring-track {
width: 74px;
height: 74px;
border-radius: 50%;
background: conic-gradient(var(--accent) calc(var(--val, 0) * 1%), var(--bs-secondary-bg) 0);
display: flex;
align-items: center;
justify-content: center;
transition: background 1s ease;
}
.profile-ring-hole {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--bs-body-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: var(--bs-emphasis-color);
box-shadow: inset 0 0 0 1px var(--bs-border-color);
}
.ring-lbl {
font-size: 11px;
color: var(--bs-secondary-color);
margin-top: 6px;
display: block;
}
/* QR + quick contact */
.hero-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.qr-code {
width: 76px;
height: 76px;
border-radius: 12px;
border: 1px solid var(--bs-border-color);
display: flex;
align-items: center;
justify-content: center;
background: var(--bs-body-bg);
}
.qr-code i {
font-size: 60px;
color: var(--bs-emphasis-color);
}
.contact-list {
display: flex;
gap: 6px;
}
.profile-contact {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
text-decoration: none;
}
.profile-contact i {
font-size: 16px;
}
.profile-contact:hover {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.profile-contact.c-green:hover {
background: #16a34a;
border-color: #16a34a;
}
.profile-contact.c-amber:hover {
background: #d97706;
border-color: #d97706;
}
.profile-contact.c-whatsapp {
color: #25d366;
}
.profile-contact.c-whatsapp:hover {
background: #25d366;
border-color: #25d366;
color: #fff;
}
/* profile completion bar in hero */
.complete {
margin-top: 14px;
}
.complete-top {
display: flex;
justify-content: space-between;
font-size: 12px;
margin-bottom: 5px;
}
.complete-top b {
color: var(--bs-emphasis-color);
}
.profile-bar {
height: 8px;
border-radius: 999px;
background: var(--bs-secondary-bg);
overflow: hidden;
}
.profile-bar > span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--accent);
width: 0;
transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================
EXECUTIVE OVERVIEW GRID
============================================================ */
.profile-overview-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 575.98px) {
.profile-overview-grid {
grid-template-columns: repeat(1, 1fr) !important;
}
}
.profile-overview {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 12px;
padding: 12px 14px;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
overflow: hidden;
}
/* corner accent glow */
.profile-overview::before {
content: "";
position: absolute;
top: -34px;
right: -34px;
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--accent-soft);
opacity: 0.55;
transition: transform var(--transition), opacity var(--transition);
}
/* animated bottom accent bar */
.profile-overview::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--transition);
}
.profile-overview:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
border-color: transparent;
}
.profile-overview:hover::before {
transform: scale(1.3);
opacity: 0.75;
}
.profile-overview:hover::after {
transform: scaleX(1);
}
.profile-overview:hover > .avatar {
transform: translateY(-2px) rotate(-5deg);
}
.overview-head {
display: contents;
}
.profile-overview > .avatar {
grid-column: 1;
grid-row: 1/span 3;
align-self: center;
box-shadow: 0 8px 16px -8px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, 0.35);
transition: transform var(--transition);
}
.overview-lbl {
grid-column: 2;
grid-row: 1;
position: relative;
z-index: 1;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.overview-val {
grid-column: 2;
grid-row: 2;
position: relative;
z-index: 1;
font-size: 20px;
font-weight: 800;
color: var(--bs-emphasis-color);
line-height: 1.1;
letter-spacing: -0.01em;
}
.overview-sub {
grid-column: 2;
grid-row: 3;
position: relative;
z-index: 1;
font-size: 10px;
font-weight: 600;
margin-top: 4px;
display: inline-flex;
align-items: center;
gap: 3px;
width: fit-content;
padding: 2px 7px;
border-radius: 999px;
color: var(--bs-secondary-color);
background: var(--bs-secondary-bg);
}
.overview-sub i {
font-size: 12px;
}
.document-upload {
color: #15803d;
background: rgba(22, 163, 74, 0.12);
}
.profile-down {
color: #b91c1c;
background: rgba(220, 38, 38, 0.12);
}
/* ============================================================
INFO CARDS / DL rows
============================================================ */
.profile-card-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 700;
color: var(--bs-emphasis-color);
margin: 0;
}
.profile-card-title .tab-icon {
width: 34px;
height: 34px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: #fff;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)), var(--accent);
box-shadow: 0 8px 16px -6px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Two-column info tiles (Personal Information) */
.definition-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.definition-list > div {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 12px;
border: 1px solid var(--bs-border-color);
border-radius: 11px;
background: var(--bs-secondary-bg);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.definition-list > div:hover {
transform: translateY(-2px);
border-color: var(--bs-primary);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
}
.definition-list .meta-key {
font-size: 10.5px;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.definition-list .value {
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
word-break: break-word;
}
/* Single-column key/value rows (Transport,
Hostel,
Medical) */
.definition-list.one-col {
grid-template-columns: 1fr;
gap: 0;
}
.definition-list.one-col > div {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 11px 0;
border: 0;
border-radius: 0;
background: transparent;
transform: none;
box-shadow: none;
transition: none;
}
.definition-list.one-col > div:not(:last-child) {
border-bottom: 1px solid var(--bs-border-color);
}
.definition-list.one-col > div:first-child {
padding-top: 0;
}
.definition-list.one-col > div:last-child {
padding-bottom: 0;
}
.definition-list.one-col .meta-key {
font-size: 12px;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
}
.definition-list.one-col .value {
text-align: right;
}
.profile-chip-set {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.profile-chip {
font-size: 12px;
font-weight: 500;
padding: 5px 11px;
border-radius: 999px;
background: var(--bs-secondary-bg);
color: var(--bs-emphasis-color);
border: 1px solid var(--bs-border-color);
transition: all var(--transition);
}
.profile-chip:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.profile-chip.solid {
background: var(--tint-primary);
color: var(--bs-primary);
border-color: transparent;
}
/* person row (parent/guardian) */
.profile-person {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.profile-person {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
.profile-person:first-child {
padding-top: 0;
}
.profile-person:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.profile-person img {
width: 46px;
height: 46px;
border-radius: 12px;
object-fit: cover;
box-shadow: 0 0 0 3px var(--bs-secondary-bg);
}
.profile-person > .profile-contact {
background: linear-gradient(135deg, var(--bs-primary), rgba(61, 94, 225, 0.55));
color: #fff;
border-color: transparent;
box-shadow: 0 6px 14px -6px var(--tint-primary);
}
.profile-person .profile-person-name {
font-weight: 600;
font-size: 14px;
color: var(--bs-emphasis-color);
}
.profile-person .person-role {
font-size: 12px;
color: var(--bs-secondary-color);
line-height: 1.55;
}
.profile-person .person-actions {
margin-left: auto;
display: flex;
gap: 6px;
}
@media (max-width: 575.98px) {
.profile-person .person-actions {
margin-left: unset;
}
}
/* ============================================================
TABS
============================================================ */
.tab-list {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 5px;
margin: 0;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-secondary-bg);
}
.profile-tab {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
flex: 0 0 auto;
padding: 8px 14px;
border-radius: 999px;
border: 0;
background: transparent;
color: var(--bs-secondary-color);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
}
.profile-tab i {
font-size: 16px;
}
.profile-tab:hover {
color: var(--bs-primary);
}
.profile-tab.active {
background: var(--bs-body-bg);
color: var(--bs-primary);
box-shadow: var(--shadow);
}
.tab-pane-block {
display: none;
animation: sp-fade 0.35s ease;
}
.tab-pane-block.active {
display: block;
}
/* mini section heading inside panes */
.block-heading {
font-size: 13px;
font-weight: 700;
color: var(--bs-emphasis-color);
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 6px;
}
.block-heading i {
color: var(--bs-primary);
font-size: 16px;
}
.profile-tile {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
padding: 14px;
background: var(--bs-body-bg);
transition: all var(--transition);
}
.profile-tile:hover {
box-shadow: var(--shadow);
}
/* stat mini */
.profile-mini {
text-align: center;
padding: 12px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
}
.profile-mini .v {
font-size: 20px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.profile-mini .l {
font-size: 11.5px;
color: var(--bs-secondary-color);
margin-top: 2px;
}
/* ============================================================
CHARTS (pure CSS/SVG)
============================================================ */
/* vertical bars */
.bar-group {
display: flex;
align-items: flex-end;
gap: 8px;
height: 150px;
padding-top: 6px;
}
.bar-group .b {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
height: 100%;
justify-content: flex-end;
}
.bar-group .b .col {
width: 70%;
max-width: 26px;
border-radius: 6px 6px 0 0;
background: linear-gradient(180deg, var(--bs-primary), var(--tint-primary));
height: 0;
transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.bar-group .b.alt .col {
background: linear-gradient(180deg, #16a34a, rgba(22, 163, 74, 0.15));
}
.bar-group .b .cap {
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.bar-group .b .val {
font-size: 10.5px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
/* horizontal subject bars */
.histogram-bar {
margin-bottom: 12px;
}
.histogram-bar-top {
display: flex;
justify-content: space-between;
font-size: 12.5px;
margin-bottom: 5px;
}
.histogram-bar-top b {
color: var(--bs-emphasis-color);
}
.histogram-bar-track {
height: 8px;
border-radius: 999px;
background: var(--bs-secondary-bg);
overflow: hidden;
}
.histogram-bar-fill {
height: 100%;
border-radius: 999px;
width: 0;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
background: var(--accent);
}
/* heatmap */
.heatmap-block {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.heatmap-block .d {
aspect-ratio: 1;
border-radius: 5px;
background: var(--bs-secondary-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: transparent;
}
.heatmap-block .d.l1 {
background: rgba(22, 163, 74, 0.25);
}
.heatmap-block .d.l2 {
background: rgba(22, 163, 74, 0.5);
}
.heatmap-block .d.l3 {
background: rgba(22, 163, 74, 0.75);
}
.heatmap-block .d.l4 {
background: #16a34a;
}
.heatmap-block .d.absent {
background: rgba(220, 38, 38, 0.7);
}
.heatmap-block .d.late {
background: rgba(217, 119, 6, 0.75);
}
.heatmap-block-legend {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--bs-secondary-color);
margin-top: 10px;
}
.heatmap-block-legend .k {
width: 12px;
height: 12px;
border-radius: 3px;
}
/* donut (svg) */
.profile-donut {
display: flex;
align-items: center;
gap: 16px;
}
.profile-donut svg {
width: 130px;
height: 130px;
transform: rotate(-90deg);
}
.profile-donut circle {
fill: none;
stroke-width: 14;
}
.profile-donut .track {
stroke: var(--bs-secondary-bg);
}
.donut-legend {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 12.5px;
}
.donut-legend > div {
display: flex;
align-items: center;
gap: 8px;
}
.donut-legend .k {
width: 12px;
height: 12px;
border-radius: 3px;
}
.donut-legend b {
margin-left: auto;
color: var(--bs-emphasis-color);
}
/* trend line (svg) */
.profile-trend svg {
width: 100%;
height: 120px;
}
.profile-trend .line {
fill: none;
stroke: var(--bs-primary);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: sp-draw 1.4s ease forwards;
}
.profile-trend .area {
fill: var(--tint-primary);
opacity: 0.7;
}
.profile-trend .dot {
fill: var(--bs-primary);
}
/* ranking badge */
.profile-rank {
display: flex;
align-items: center;
gap: 14px;
}
.rank-num {
font-size: 34px;
font-weight: 800;
color: var(--bs-primary);
line-height: 1;
}
.rank-num small {
font-size: 15px;
}
/* ============================================================
TIMELINE
============================================================ */
.profile-timeline {
position: relative;
padding-left: 30px;
}
.profile-timeline::before {
content: "";
position: absolute;
left: 11px;
top: 4px;
bottom: 4px;
width: 2px;
background: var(--bs-border-color);
}
.profile-timeline {
position: relative;
padding-bottom: 20px;
}
.profile-timeline:last-child {
padding-bottom: 0;
}
.profile-timeline > .avatar {
position: absolute;
left: -30px;
top: 0;
box-shadow: 0 0 0 4px var(--bs-body-bg);
}
.profile-timeline-time {
font-size: 11px;
color: var(--bs-secondary-color);
}
.timeline-title {
font-weight: 600;
color: var(--bs-emphasis-color);
font-size: 13.5px;
margin: 2px 0;
}
.timeline-desc {
font-size: 12.5px;
color: var(--bs-secondary-color);
}
/* ============================================================
DOCUMENTS / LISTS
============================================================ */
.profile-document-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
transition: all var(--transition);
background: var(--bs-body-bg);
}
.profile-document-row:hover {
border-color: var(--bs-primary);
box-shadow: var(--shadow);
transform: translateY(-1px);
}
.profile-document-row .document-row-ic {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: var(--accent-soft);
color: var(--accent);
}
.profile-document-row .document-row-name {
font-weight: 600;
color: var(--bs-emphasis-color);
font-size: 13px;
}
.profile-document-row .document-row-meta {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* achievement */
.achievement {
text-align: center;
padding: 16px 12px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
transition: all var(--transition);
}
.achievement:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
}
.achievement-medal {
width: 52px;
height: 52px;
margin: 0 auto 8px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
background: var(--accent-soft);
color: var(--accent);
}
.achievement-title {
font-weight: 600;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.achievement-sub {
font-size: 11px;
color: var(--bs-secondary-color);
}
/* quick actions grid */
.profile-quick-action-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.profile-quick-action {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
padding: 14px 6px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
cursor: pointer;
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
font-size: 11px;
font-weight: 600;
text-align: center;
transition: all var(--transition);
text-decoration: none;
}
.profile-quick-action i {
font-size: 20px;
color: var(--accent);
transition: transform var(--transition);
}
.profile-quick-action:hover {
border-color: var(--bs-primary);
background: var(--bs-tertiary-bg);
color: var(--bs-emphasis-color);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.profile-quick-action:hover i {
transform: scale(1.15);
}
/* AI insights widget */
.profile-insight {
position: relative;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(135deg, rgba(123, 97, 255, 0.16), rgba(61, 94, 225, 0.08) 60%, transparent);
border: 1px solid rgba(123, 97, 255, 0.22);
padding: 18px;
}
.profile-insight::before {
content: "";
position: absolute;
top: -50px;
right: -50px;
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle, rgba(123, 97, 255, 0.28), transparent 70%);
pointer-events: none;
}
.insight-head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(123, 97, 255, 0.18);
}
.profile-insight-badge {
width: 38px;
height: 38px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #7b61ff, #3d5ee1);
color: #fff;
font-size: 19px;
box-shadow: 0 8px 18px -5px rgba(123, 97, 255, 0.6);
position: relative;
}
.profile-insight-badge::after {
content: "";
position: absolute;
inset: 0;
border-radius: 11px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 55%);
}
.insight-head h5 {
margin: 0;
font-size: 14.5px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.insight-head span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.profile-insight-item {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(123, 97, 255, 0.12);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 8px;
transition: transform var(--transition), box-shadow var(--transition);
}
.profile-insight-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px -8px rgba(123, 97, 255, 0.35);
}
.profile-insight-item:last-child {
margin-bottom: 0;
}
.profile-insight-item .t {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.profile-insight-item .t i {
font-size: 15px;
}
.profile-insight-item p {
margin: 4px 0 0;
font-size: 12px;
color: #4b5563;
line-height: 1.5;
}
.insight-risk {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
}
.insight-risk.low {
background: rgba(22, 163, 74, 0.15);
color: #15803d;
}
.insight-risk.med {
background: rgba(217, 119, 6, 0.15);
color: #b45309;
}
.insight-risk.high {
background: rgba(220, 38, 38, 0.15);
color: #b91c1c;
}
[data-bs-theme=dark] .profile-insight-item {
background: rgba(255, 255, 255, 0.06);
}
[data-bs-theme=dark] .profile-insight-item p {
color: #cbd2e0;
}
/* tables inside panes */
.student-profile .table {
font-size: 13px;
}
.student-profile .table > :not(caption) > * > * {
padding: 10px 12px;
}
/* status pill reuse */
.profile-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 600;
font-style: normal;
padding: 4px 10px;
border-radius: 999px;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 575.98px) {
.profile-pill {
margin-left: unset !important;
}
}
.profile-pill i {
font-size: 13px;
}
.profile-pill.ok {
background: rgba(22, 163, 74, 0.12);
color: #15803d;
}
.profile-pill.warn {
background: rgba(217, 119, 6, 0.12);
color: #b45309;
}
.profile-pill.bad {
background: rgba(220, 38, 38, 0.12);
color: #b91c1c;
}
.profile-pill.info {
background: rgba(8, 145, 178, 0.12);
color: #0e7490;
}
.profile-pill .profile-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ============================================================
COMMUNICATION TAB
============================================================ */
.msgs {
display: flex;
flex-direction: column;
gap: 10px;
}
.profile-message {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.profile-message:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
border-color: var(--bs-primary);
}
.message-main {
flex: 1;
min-width: 0;
}
.message-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.message-title {
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.message-date {
font-size: 11px;
color: var(--bs-secondary-color);
flex-shrink: 0;
}
.message-sub {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--bs-secondary-color);
margin: 3px 0 6px;
}
.message-chan {
font-size: 10px;
font-weight: 700;
padding: 1px 7px;
border-radius: 5px;
}
.message-chan.email {
background: rgba(37, 99, 235, 0.12);
color: #2563eb;
}
.message-chan.message {
background: rgba(22, 163, 74, 0.12);
color: #16a34a;
}
.message-chan.sms {
background: rgba(217, 119, 6, 0.12);
color: #d97706;
}
.message-chan.call {
background: rgba(13, 148, 136, 0.12);
color: #0d9488;
}
.message-snippet {
font-size: 12.5px;
color: var(--bs-secondary-color);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.profile-message > .profile-pill {
align-self: flex-start;
flex-shrink: 0;
}
.profile-message > .profile-pill i {
font-size: 13px;
}
.announcement {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition);
}
.announcement:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.announcement.pinned {
border-color: transparent;
background: linear-gradient(135deg, var(--tint-primary), transparent 75%);
box-shadow: inset 0 0 0 1px var(--tint-primary);
}
.announcement-body {
flex: 1;
min-width: 0;
}
.announcement-body b {
font-size: 13px;
color: var(--bs-emphasis-color);
}
.announcement-pin {
color: var(--bs-primary);
font-size: 17px;
flex-shrink: 0;
}
/* ============================================================
ACHIEVEMENTS TAB
============================================================ */
.profile-award {
position: relative;
height: 100%;
text-align: center;
padding: 20px 12px;
border: 1px solid var(--bs-border-color);
border-radius: 16px;
background: var(--bs-body-bg);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}
.profile-award::before {
content: "";
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 80px;
background: radial-gradient(circle, var(--rib-soft, var(--tint-primary)), transparent 70%);
}
.profile-award:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
}
.award-medal {
position: relative;
z-index: 1;
width: 62px;
height: 62px;
border-radius: 50%;
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #fff;
}
.award-medal::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), transparent 55%);
}
.award-ribbon {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
font-size: 10px;
font-weight: 800;
padding: 2px 8px;
border-radius: 6px;
color: #fff;
background: var(--rib, var(--bs-primary));
}
.award-title {
position: relative;
z-index: 1;
font-weight: 600;
font-size: 13px;
color: var(--bs-emphasis-color);
line-height: 1.3;
}
.award-cat {
position: relative;
z-index: 1;
font-size: 11px;
color: var(--bs-secondary-color);
margin-top: 3px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.award-cat i {
font-size: 13px;
}
.profile-award.gold {
--rib: #d97706;
--rib-soft: rgba(245, 158, 11, .22);
}
.profile-award.gold .award-medal {
background: linear-gradient(135deg, #fcd34d, #f59e0b);
box-shadow: 0 10px 20px -6px rgba(245, 158, 11, 0.55);
}
.profile-award.silver {
--rib: #6b7280;
--rib-soft: rgba(148, 163, 184, .22);
}
.profile-award.silver .award-medal {
background: linear-gradient(135deg, #e5e7eb, #9ca3af);
box-shadow: 0 10px 20px -6px rgba(148, 163, 184, 0.5);
}
.profile-award.bronze {
--rib: #b45309;
--rib-soft: rgba(180, 83, 9, .2);
}
.profile-award.bronze .award-medal {
background: linear-gradient(135deg, #e0a872, #b45309);
box-shadow: 0 10px 20px -6px rgba(180, 83, 9, 0.5);
}
.profile-award.blue {
--rib: #2563eb;
--rib-soft: rgba(37, 99, 235, .2);
}
.profile-award.blue .award-medal {
background: linear-gradient(135deg, #60a5fa, #2563eb);
box-shadow: 0 10px 20px -6px rgba(37, 99, 235, 0.5);
}
/* earned badges */
.badge-alt-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.badge-alt {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 8px;
text-align: center;
padding: 14px 8px;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.badge-alt:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
border-color: transparent;
}
.badge-alt span {
display: flex;
align-items: center;
justify-content: center;
min-height: 28px;
font-size: 10.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
line-height: 1.25;
}
@media (max-width: 400px) {
.badge-alt-group {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================
DOCUMENTS TAB
============================================================ */
.profile-document {
position: relative;
height: 100%;
padding: 16px;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.profile-document::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 3px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--transition);
}
.profile-document:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
border-color: transparent;
}
.profile-document:hover::before {
transform: scaleX(1);
}
.document-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 12px;
}
.document-ext {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
padding: 3px 8px;
border-radius: 6px;
background: var(--accent-soft);
color: var(--accent);
}
.document-name {
font-weight: 600;
font-size: 13.5px;
color: var(--bs-emphasis-color);
}
.document-meta {
font-size: 11px;
color: var(--bs-secondary-color);
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.document-meta i {
font-size: 13px;
}
.document-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
.document-foot .profile-pill i {
font-size: 13px;
}
.document-actions {
display: flex;
gap: 6px;
}
/* ============================================================
LIBRARY TAB
============================================================ */
.library-stats {
grid-template-columns: repeat(4, 1fr);
}
.books {
display: flex;
flex-direction: column;
gap: 10px;
}
.profile-book {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
@media (max-width: 575.98px) {
.profile-book {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
.profile-book:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
border-color: var(--bs-primary);
}
.profile-book.overdue::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #dc2626;
}
.book-main {
flex: 1;
min-width: 0;
}
.book-title {
font-weight: 600;
font-size: 13.5px;
color: var(--bs-emphasis-color);
}
.book-author {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.book-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
margin-top: 5px;
font-size: 11px;
color: var(--bs-secondary-color);
}
.book-meta span {
display: inline-flex;
align-items: center;
gap: 3px;
}
.book-meta i {
font-size: 13px;
}
.book-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex-shrink: 0;
}
.profile-button-sm {
height: 28px;
padding: 0 10px;
font-size: 12px;
border-radius: 8px;
}
.profile-button-sm i {
font-size: 14px;
}
.profile-queue {
margin-left: auto;
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
color: var(--bs-primary);
background: var(--tint-primary);
padding: 4px 10px;
border-radius: 999px;
}
@media (max-width: 575.98px) {
.profile-queue {
margin-left: unset;
}
}
.reading-history {
display: flex;
flex-direction: column;
gap: 8px;
}
.reading-mini {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border: 1px solid var(--bs-border-color);
border-radius: 11px;
transition: background var(--transition);
}
.reading-mini:hover {
background: var(--bs-tertiary-bg);
}
.reading-mini b {
font-size: 13px;
color: var(--bs-emphasis-color);
}
.star-rating {
display: flex;
gap: 1px;
margin-top: 2px;
}
.star-rating i {
font-size: 13px;
color: #f59e0b;
}
.star-rating i.ti-star {
color: var(--bs-border-color);
}
@media (max-width: 575.98px) {
.library-stats {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================
ACADEMICS TAB
============================================================ */
.profile-kpi {
position: relative;
height: 100%;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
overflow: hidden;
transition: box-shadow var(--transition), transform var(--transition);
}
.profile-kpi::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 3px;
background: var(--accent);
opacity: 0.9;
}
.profile-kpi:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.profile-kpi.grad-primary {
--accent: var(--accent-indigo);
--accent-soft: var(--tint-info);
--avatar-accent: var(--accent);
--avatar-accent-soft: var(--accent-soft);
}
.profile-kpi.grad-gold {
--accent: var(--bs-warning);
--accent-soft: var(--tint-warning);
--avatar-accent: var(--accent);
--avatar-accent-soft: var(--accent-soft);
}
.kpi-bg {
position: absolute;
right: -10px;
bottom: -16px;
font-size: 84px;
line-height: 1;
opacity: 0.05;
color: var(--accent);
}
.kpi-bg i {
display: block;
}
.kpi-top {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.kpi-tag {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
}
.kpi-val {
position: relative;
z-index: 1;
font-size: 28px;
font-weight: 800;
line-height: 1;
color: var(--bs-emphasis-color);
}
.kpi-val small {
font-size: 14px;
font-weight: 600;
color: var(--bs-secondary-color);
}
.kpi-lbl {
position: relative;
z-index: 1;
font-size: 12px;
margin-top: 4px;
color: var(--bs-secondary-color);
}
.kpi-bar {
position: relative;
z-index: 1;
height: 6px;
border-radius: 999px;
background: var(--bs-secondary-bg);
overflow: hidden;
margin-top: 10px;
}
.kpi-bar span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--accent);
width: 0;
transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.trend-x {
display: flex;
justify-content: space-between;
margin-top: 4px;
}
.trend-x span {
font-size: 9.5px;
color: var(--bs-secondary-color);
}
.profile-kpi .profile-trend svg {
height: 58px;
}
/* subject rows */
.subjmarks {
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-subject {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border: 1px solid var(--bs-border-color);
border-radius: 13px;
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition);
}
.profile-subject:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.subject-main {
flex: 1;
min-width: 0;
}
.subject-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 7px;
}
.subject-top .name {
font-weight: 600;
font-size: 13.5px;
color: var(--bs-emphasis-color);
}
.subject-pct {
font-weight: 800;
font-size: 15px;
color: var(--bs-emphasis-color);
width: 46px;
text-align: right;
}
/* grade badges */
.grade {
font-size: 11px;
font-weight: 800;
padding: 2px 8px;
border-radius: 6px;
font-style: normal;
line-height: 1.5;
}
.grade.a {
background: rgba(22, 163, 74, 0.14);
color: #15803d;
}
.grade.b {
background: rgba(37, 99, 235, 0.14);
color: #1d4ed8;
}
.grade.c {
background: rgba(217, 119, 6, 0.14);
color: #b45309;
}
.grade.d {
background: rgba(220, 38, 38, 0.14);
color: #b91c1c;
}
/* exams & results — result banner (distinct from Attendance ring) */
.exam-result {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
align-items: stretch;
padding: 18px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: radial-gradient(120% 150% at 100% 0, rgba(79, 70, 229, 0.06), transparent 55%), var(--bs-body-bg);
}
@media (max-width: 1399.98px) {
.exam-result {
grid-template-columns: 1fr;
}
}
.exam-result-grade {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 116px;
padding: 14px 18px;
border-radius: 14px;
background: linear-gradient(150deg, #4f46e5, #7b61ff);
color: #fff;
box-shadow: 0 14px 26px -12px rgba(79, 70, 229, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.exam-result-letter {
font-size: 46px;
font-weight: 800;
line-height: 1;
letter-spacing: -1px;
}
.exam-result-band {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
padding: 3px 11px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
}
.exam-result-band i {
font-size: 13px;
}
.exam-result-mid {
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
min-width: 0;
}
.exam-result-scoreline {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.exam-result-pct {
display: flex;
align-items: baseline;
font-weight: 800;
color: var(--bs-emphasis-color);
line-height: 1;
}
.exam-result-pct span {
font-size: 42px;
}
.exam-result-pct i {
font-size: 20px;
font-style: normal;
color: var(--bs-secondary-color);
margin-left: 2px;
}
.exam-result-cap {
display: flex;
flex-direction: column;
}
.exam-result-cap b {
font-size: 14px;
color: var(--bs-emphasis-color);
}
.exam-result-cap span {
font-size: 12px;
color: var(--bs-secondary-color);
}
.exam-result-trend {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: #16a34a;
background: rgba(22, 163, 74, 0.1);
padding: 5px 11px;
border-radius: 999px;
}
.exam-result-meter {
position: relative;
display: flex;
gap: 3px;
height: 12px;
margin-top: 2px;
}
.exam-result-meter .seg {
height: 100%;
border-radius: 4px;
}
.exam-result-meter .seg.f {
flex: 40;
background: rgba(220, 38, 38, 0.28);
}
.exam-result-meter .seg.p {
flex: 20;
background: rgba(217, 119, 6, 0.35);
}
.exam-result-meter .seg.m {
flex: 25;
background: rgba(8, 145, 178, 0.32);
}
.exam-result-meter .seg.d {
flex: 15;
background: rgba(22, 163, 74, 0.45);
}
.exam-result-needle {
position: absolute;
top: -4px;
bottom: -4px;
left: 0;
width: 3px;
border-radius: 3px;
background: var(--bs-emphasis-color);
box-shadow: 0 0 0 3px var(--bs-body-bg);
transition: left 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.exam-result-needle::after {
content: "";
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--bs-emphasis-color);
box-shadow: 0 0 0 3px var(--bs-body-bg);
}
.exam-result-scale {
display: flex;
justify-content: space-between;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.exam-result-side {
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
min-width: 200px;
}
.exam-result-stat {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
background: var(--bs-secondary-bg);
transition: transform var(--transition), box-shadow var(--transition);
}
.exam-result-stat:hover {
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.exam-result-stat .ic {
width: 34px;
height: 34px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
background: var(--accent-soft);
color: var(--accent);
flex-shrink: 0;
}
.exam-result-stat .tx {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.exam-result-stat .tx b {
font-size: 16px;
color: var(--bs-emphasis-color);
}
.exam-result-stat .tx span {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
@media (max-width: 991px) {
.exam-result {
grid-template-columns: 1fr;
}
.exam-result-side {
min-width: 0;
flex-direction: row;
flex-wrap: wrap;
}
.exam-result-side .exam-result-stat {
flex: 1 1 30%;
}
}
@media (max-width: 575px) {
.exam-result-grade {
flex-direction: row;
min-width: 0;
}
.exam-result-letter {
font-size: 34px;
}
.exam-result-pct span {
font-size: 34px;
}
.exam-result-side .exam-result-stat {
flex: 1 1 100%;
}
}
[data-bs-theme=dark] .exam-result-stat,
[data-theme=dark] .exam-result-stat {
background: rgba(255, 255, 255, 0.03);
}
/* exam results table */
.exam-table {
border: 1px solid var(--bs-border-color);
border-radius: 14px;
overflow: hidden;
}
.exam-row {
display: grid;
grid-template-columns: 1.6fr 1fr 1.4fr 0.7fr 0.8fr;
align-items: center;
gap: 10px;
padding: 12px 14px;
}
.exam-row:not(.head):not(:last-child) {
border-bottom: 1px solid var(--bs-border-color);
}
.exam-row.head {
background: var(--bs-secondary-bg);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--bs-secondary-color);
font-weight: 700;
padding: 10px 14px;
}
.exam-row:not(.head):hover {
background: var(--bs-tertiary-bg);
}
.exam-row .ex-name {
font-weight: 600;
color: var(--bs-emphasis-color);
font-size: 13px;
}
.exam-row .ex-date {
font-size: 12px;
color: var(--bs-secondary-color);
}
.exam-row .ex-score {
font-weight: 700;
color: var(--bs-emphasis-color);
font-size: 13px;
}
.exam-row .ex-score small {
font-weight: 500;
color: var(--bs-secondary-color);
font-size: 11px;
}
.score-bar {
display: block;
height: 4px;
border-radius: 999px;
background: var(--bs-secondary-bg);
margin-top: 5px;
overflow: hidden;
}
.score-bar b {
display: block;
height: 100%;
border-radius: 999px;
background: var(--bs-primary);
}
/* teacher remark */
.profile-remark {
position: relative;
display: flex;
gap: 14px;
padding: 18px;
border-radius: 16px;
border: 1px solid var(--bs-border-color);
background: linear-gradient(135deg, var(--tint-primary), transparent 70%);
}
.remark-quote {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
background: var(--bs-primary);
color: #fff;
}
.remark-body p {
margin: 0 0 12px;
font-size: 13.5px;
font-style: italic;
color: var(--bs-emphasis-color);
line-height: 1.6;
}
.remark-by {
display: flex;
align-items: center;
gap: 10px;
}
@media (max-width: 575.98px) {
.remark-by {
flex-wrap: wrap;
}
}
.remark-by img {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
}
.remark-by b {
display: block;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.remark-by span {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.remark-teal {
background: linear-gradient(135deg, rgba(13, 148, 136, 0.14), transparent 70%);
}
.remark-teal .remark-quote {
background: #0d9488;
}
@media (max-width: 575.98px) {
.exam-row {
grid-template-columns: 1.4fr 1fr 0.8fr;
}
.exam-row .ex-date,
.exam-row.head span:nth-child(2) {
display: none;
}
}
/* ============================================================
ATTENDANCE TAB
============================================================ */
.attendance-ringcard {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 20px;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
}
.attendance-ring {
width: 152px;
height: 152px;
}
.attendance-ring .profile-ring-hole.big {
width: 120px;
height: 120px;
flex-direction: column;
font-size: 32px;
font-weight: 800;
gap: 0;
}
.attendance-ring .profile-ring-hole.big small {
font-size: 10.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
margin-top: 2px;
}
.attendance-ringcap {
font-size: 12.5px;
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
gap: 5px;
}
.attendance-ringcap i {
color: #16a34a;
font-size: 15px;
}
.attendance-ringcap b {
color: var(--bs-emphasis-color);
}
.attendance-stats {
height: 100%;
align-content: center;
}
.profile-tile-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.attendance-avg {
font-size: 11.5px;
font-weight: 600;
color: #15803d;
background: rgba(22, 163, 74, 0.12);
padding: 4px 10px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.attendance-avg i {
font-size: 14px;
}
.attendance-sub {
font-size: 11px;
font-weight: 500;
color: var(--bs-secondary-color);
background: var(--bs-secondary-bg);
padding: 2px 9px;
border-radius: 999px;
margin-left: 4px;
}
.bar-group-target {
position: relative;
}
.heatmap-block-wrap {
padding: 14px;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
}
.heatmap-block-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin-bottom: 6px;
}
.heatmap-block-days span {
text-align: center;
font-size: 10px;
font-weight: 600;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.heatmap-block .d {
cursor: default;
transition: transform var(--transition);
}
.heatmap-block .d:hover {
transform: scale(1.15);
}
.heatmap-block-legend {
flex-wrap: wrap;
}
/* ============================================================
TIMETABLE TAB
============================================================ */
.today-chip {
font-size: 11px;
font-weight: 600;
color: var(--bs-primary);
background: var(--tint-primary);
padding: 3px 10px;
border-radius: 999px;
margin-left: 6px;
}
/* subject colour tokens */
.sub-blue {
--sub: #2563eb;
--sub-soft: rgba(37, 99, 235, .12);
}
.sub-green {
--sub: #16a34a;
--sub-soft: rgba(22, 163, 74, .12);
}
.sub-purple {
--sub: #7b61ff;
--sub-soft: rgba(123, 97, 255, .12);
}
.sub-teal {
--sub: #0d9488;
--sub-soft: rgba(13, 148, 136, .12);
}
.sub-amber {
--sub: #d97706;
--sub-soft: rgba(217, 119, 6, .12);
}
.sub-pink {
--sub: #db2777;
--sub-soft: rgba(219, 39, 119, .12);
}
/* today's class schedule */
.profile-schedule {
display: flex;
flex-direction: column;
gap: 8px;
}
.schedule-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--bs-border-color);
border-radius: 13px;
background: var(--bs-body-bg);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
@media (max-width: 575.98px) {
.schedule-item {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
.schedule-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--sub, var(--bs-primary));
}
.schedule-item:hover {
transform: translateX(2px);
box-shadow: var(--shadow);
}
.schedule-item.now {
border-color: var(--sub);
background: var(--sub-soft);
}
.profile-schedule-time {
width: 58px;
flex-shrink: 0;
display: flex;
flex-direction: column;
line-height: 1.15;
}
.profile-schedule-time b {
font-size: 14px;
color: var(--bs-emphasis-color);
}
.profile-schedule-time span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.schedule-body {
flex: 1;
min-width: 0;
}
.schedule-subj {
font-weight: 600;
font-size: 14px;
color: var(--bs-emphasis-color);
}
.profile-schedule-meta {
font-size: 11.5px;
color: var(--bs-secondary-color);
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.profile-schedule-meta i {
font-size: 13px;
}
.schedule-status {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
white-space: nowrap;
}
.schedule-status.next {
background: rgba(8, 145, 178, 0.12);
color: #0e7490;
}
.schedule-status.now {
background: var(--sub);
color: #fff;
display: inline-flex;
align-items: center;
gap: 5px;
}
.schedule-status.now .profile-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
animation: sp-blink 1.2s infinite;
}
/* weekly timetable grid */
.timetable-wrap {
overflow-x: auto;
}
.profile-timetable {
width: 100%;
border-collapse: separate;
border-spacing: 6px;
min-width: 580px;
}
.profile-timetable th {
font-size: 11px;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 4px 6px 8px;
text-align: center;
font-weight: 700;
}
.profile-timetable thead th span {
display: block;
font-size: 9.5px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
opacity: 0.7;
margin-top: 2px;
}
.profile-timetable tbody th {
text-align: center;
font-size: 12px;
font-weight: 700;
color: var(--bs-emphasis-color);
background: var(--bs-secondary-bg);
border-radius: 10px;
width: 54px;
}
.profile-timetable td {
text-align: center;
padding: 3px;
}
.tt-chip {
display: block;
padding: 9px 6px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
background: var(--sub-soft, var(--bs-secondary-bg));
color: var(--sub, var(--bs-emphasis-color));
border: 1px solid transparent;
transition: transform var(--transition), box-shadow var(--transition);
}
.tt-chip:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.tt-chip.free {
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
font-weight: 500;
border-style: dashed;
border-color: var(--bs-border-color);
}
/* subject palette (chips + legend keys) */
.s-math {
--sub: #2563eb;
--sub-soft: rgba(37, 99, 235, .12);
}
.s-sci {
--sub: #16a34a;
--sub-soft: rgba(22, 163, 74, .12);
}
.s-eng {
--sub: #7b61ff;
--sub-soft: rgba(123, 97, 255, .12);
}
.s-geo {
--sub: #0d9488;
--sub-soft: rgba(13, 148, 136, .12);
}
.s-his {
--sub: #db2777;
--sub-soft: rgba(219, 39, 119, .12);
}
.s-pe {
--sub: #d97706;
--sub-soft: rgba(217, 119, 6, .12);
}
.s-mus {
--sub: #4f46e5;
--sub-soft: rgba(79, 70, 229, .12);
}
.s-art {
--sub: #0891b2;
--sub-soft: rgba(8, 145, 178, .12);
}
.s-cs {
--sub: #475569;
--sub-soft: rgba(71, 85, 105, .12);
}
.timetable-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
}
.timetable-legend span {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.tt-key {
width: 11px;
height: 11px;
border-radius: 4px;
background: var(--sub, var(--bs-primary));
}
/* exam / assignment event tiles */
.profile-event {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--bs-border-color);
border-radius: 13px;
background: var(--bs-body-bg);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}
@media (max-width: 575.98px) {
.profile-event {
flex-direction: column;
align-items: flex-start;
}
}
.profile-event::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--sub, var(--bs-primary));
}
.profile-event:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.profile-event-date {
width: 46px;
height: 46px;
border-radius: 12px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
background: var(--sub-soft, var(--tint-primary));
color: var(--sub, var(--bs-primary));
}
.profile-event-date b {
font-size: 18px;
font-weight: 800;
}
.profile-event-date span {
font-size: 10px;
text-transform: uppercase;
}
.profile-event-body {
flex: 1;
min-width: 0;
}
.event-title {
font-weight: 600;
font-size: 13.5px;
color: var(--bs-emphasis-color);
}
/* ============================================================
SKELETON
============================================================ */
/* the primitive and its shared shapes come from components/_ui-skeleton.scss;
only this page's own placeholder geometry lives here */
.profile-live {
display: none;
}
.student-profile.loaded .profile-live {
display: block;
}
.student-profile .skeleton {
border-radius: 8px;
}
.student-profile .skeleton-photo {
width: 118px;
height: 118px;
border-radius: 20px;
}
.student-profile .skeleton-ring {
width: 74px;
height: 74px;
border-radius: 50%;
}
.student-profile .skeleton-btn {
height: 38px;
width: 120px;
border-radius: var(--radius-sm);
}
.student-profile .skeleton-card {
height: 120px;
border-radius: var(--radius);
}
.student-profile .skeleton-ov {
height: 92px;
border-radius: var(--radius-sm);
}
.student-profile .skeleton-chart {
height: 170px;
border-radius: var(--radius-sm);
}
[data-bs-theme=dark] .student-profile .skeleton {
background: #2a3042;
}
[data-bs-theme=dark] .student-profile .skeleton::after {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
/* ============================================================
DARK MODE
============================================================ */
/* ============================================================
ID CARD (modal) + CONFIRM
============================================================ */
.idcard {
--id-accent: var(--bs-primary);
position: relative;
width: 300px;
margin: 4px auto;
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 18px 40px -12px rgba(17, 24, 39, 0.38), 0 0 0 1px rgba(17, 24, 39, 0.05);
}
.idcard-head {
position: relative;
padding: 22px 18px 40px;
text-align: center;
color: #fff;
background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.22)), var(--id-accent);
}
.idcard-logo {
width: 34px;
height: 34px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.18);
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.idcard-logo i {
font-size: 20px;
color: #fff;
}
.idcard-brand {
display: inline-block;
vertical-align: middle;
margin-left: 8px;
text-align: left;
}
.idcard-brand h6 {
margin: 0;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.04em;
}
.idcard-brand span {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.12em;
opacity: 0.85;
}
.idcard-wave {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 30px;
background: #fff;
border-radius: 50% 50% 0 0/100% 100% 0 0;
}
.idcard-photo-wrap {
position: relative;
width: 88px;
height: 88px;
margin: -36px auto 0;
border-radius: 16px;
padding: 4px;
background: #fff;
box-shadow: 0 8px 18px -6px rgba(17, 24, 39, 0.3);
}
.idcard-photo-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.idcard-identity {
text-align: center;
margin-top: 8px;
}
.idcard-identity h5 {
margin: 0;
font-size: 17px;
font-weight: 700;
color: #111827;
}
.idcard-role {
display: inline-block;
margin-top: 5px;
padding: 3px 12px;
border-radius: 999px;
background: var(--tint-primary);
color: var(--id-accent);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
}
.idcard-info {
margin: 12px 18px 0;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
overflow: hidden;
}
.idcard-info .idcard-row {
display: flex;
justify-content: space-between;
padding: 8px 12px;
font-size: 12px;
}
.idcard-info .idcard-row:nth-child(odd) {
background: var(--bs-secondary-bg);
}
.idcard-info .idcard-row span {
color: var(--bs-secondary-color);
}
.idcard-info .idcard-row b {
color: #111827;
}
.idcard-barcode {
margin: 12px 18px 0;
text-align: center;
}
.idcard-bars {
height: 38px;
border-radius: 4px;
background-image: repeating-linear-gradient(90deg, #1f2937 0 2px, #fff 2px 4px, #1f2937 4px 7px, #fff 7px 9px, #1f2937 9px 10px, #fff 10px 13px, #1f2937 13px 16px, #fff 16px 17px);
}
.idcard-barcode span {
display: block;
margin-top: 4px;
font-size: 11px;
letter-spacing: 0.28em;
color: #374151;
font-weight: 600;
}
.idcard-foot {
margin-top: 14px;
padding: 10px 16px;
text-align: center;
font-size: 10.5px;
color: #fff;
background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.22)), var(--id-accent);
}
/* ============================================================
FEES TAB
============================================================ */
.fee-banner {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
margin-bottom: 16px;
border-radius: 14px;
border: 1px solid var(--bs-border-color);
background: radial-gradient(120% 160% at 0% 0%, var(--tint-primary), transparent 60%), linear-gradient(135deg, var(--tint-primary), var(--bs-secondary-bg));
}
@media (max-width: 575.98px) {
.fee-banner {
flex-direction: column;
align-items: start;
}
}
.fee-banner-txt {
display: flex;
flex-direction: column;
line-height: 1.35;
}
.fee-banner-txt b {
font-size: 14px;
color: var(--bs-emphasis-color);
}
.fee-banner-txt span {
font-size: 12.5px;
color: var(--bs-secondary-color);
}
.fee-banner-txt strong {
color: var(--bs-primary);
}
.fee-donut-card {
border: 1px solid var(--bs-border-color);
border-radius: 14px;
padding: 18px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
background: var(--bs-body-bg);
}
.fee-donut {
position: relative;
width: 150px;
height: 150px;
}
.fee-donut svg {
width: 150px;
height: 150px;
transform: rotate(-90deg);
}
.fee-donut svg circle {
fill: none;
stroke-width: 16;
stroke-linecap: round;
}
.fee-donut svg .track {
stroke: var(--bs-secondary-bg);
}
.fee-donut-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.fee-donut-center .pct {
font-size: 30px;
font-weight: 800;
color: var(--bs-emphasis-color);
line-height: 1;
}
.fee-donut-center .lbl {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-secondary-color);
margin-top: 3px;
}
.fee-donut-card .donut-legend {
flex-direction: row;
flex-wrap: wrap;
gap: 6px 16px;
justify-content: center;
}
.fee-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 575.98px) {
.fee-stats {
grid-template-columns: 1fr;
}
}
.fee-stat {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}
.fee-stat::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--accent);
}
.fee-stat:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.fee-stat-body {
flex: 1;
min-width: 0;
}
.fee-stat-body .v {
font-size: 19px;
font-weight: 800;
color: var(--bs-emphasis-color);
line-height: 1.1;
}
.fee-stat-body .l {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.fee-mini {
height: 5px;
border-radius: 999px;
background: var(--bs-secondary-bg);
overflow: hidden;
margin-top: 6px;
}
.fee-mini span {
display: block;
height: 100%;
border-radius: 999px;
width: 0;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.fee-progress {
margin-top: 12px;
}
.fee-progress .top {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--bs-secondary-color);
margin-bottom: 6px;
}
.fee-progress .top b {
color: var(--bs-emphasis-color);
}
/* invoice rows */
.fee-invoices {
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-invoice {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--bs-border-color);
border-radius: 13px;
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
@media (max-width: 575.98px) {
.profile-invoice {
flex-direction: column;
align-items: start;
}
}
.profile-invoice:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
border-color: var(--bs-primary);
}
.invoice-main {
flex: 1;
min-width: 0;
}
.invoice-title {
font-weight: 600;
font-size: 13.5px;
color: var(--bs-emphasis-color);
}
.invoice-sub {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.invoice-amt {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
font-weight: 700;
font-size: 14px;
color: var(--bs-emphasis-color);
white-space: nowrap;
}
/* ============================================================
ANIMATIONS
============================================================ */
@keyframes sp-blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
@keyframes sp-fade {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes sp-draw {
to {
stroke-dashoffset: 0;
}
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1399.98px) {
.profile-overview-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 991.98px) {
.hero-grid {
grid-template-columns: auto 1fr;
}
.hero-right {
grid-column: 1/-1;
justify-content: space-between;
margin-top: 6px;
}
.profile-overview-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767.98px) {
.hero-grid {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
}
.hero-meta,
.badges {
justify-content: center;
}
.hero-right {
flex-direction: column;
gap: 16px;
}
.profile-overview-grid {
grid-template-columns: repeat(2, 1fr);
}
.profile-quick-action-grid {
grid-template-columns: repeat(3, 1fr);
}
.definition-list {
grid-template-columns: 1fr;
}
}
/* ============================================================
NEW FEATURES — Health,
Notes,
Audit,
Transport track,
Pay gateway,
Login activity (all scoped,
additive)
============================================================ */
/* tab lock chip */
.tab-lock {
display: inline-flex;
margin-left: 5px;
opacity: 0.7;
}
.tab-lock i {
font-size: 13px;
}
/* ---------- HEALTH: emergency banner ---------- */
.emergency {
display: flex;
gap: 14px;
padding: 14px 16px;
border-radius: var(--radius);
border: 1px solid rgba(220, 38, 38, 0.28);
background: linear-gradient(100deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.02));
flex-direction: column;
align-items: flex-start;
}
.emergency-body {
min-width: 0;
}
.emergency-body b {
display: block;
font-size: 13.5px;
color: var(--bs-emphasis-color);
}
.emergency-body span {
font-size: 12.5px;
color: var(--bs-secondary-color);
}
.emergency-body strong {
color: #dc2626;
}
.emergency-contact {
margin-left: unset;
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.emergency-contact .l {
display: block;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
}
.emergency-contact b {
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
@media (max-width: 767px) {
.emergency {
flex-wrap: wrap;
}
.emergency-contact {
margin-left: 0;
width: 100%;
justify-content: space-between;
}
}
/* ---------- HEALTH: vitals ---------- */
.vital-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.vital {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition);
}
.vital:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.vital .ic {
width: 34px;
height: 34px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
background: var(--accent-soft);
color: var(--accent);
flex-shrink: 0;
}
.vital .tx {
display: flex;
flex-direction: column;
line-height: 1.15;
min-width: 0;
}
.vital .tx b {
font-size: 16px;
color: var(--bs-emphasis-color);
}
.vital .tx b small {
font-size: 11px;
font-weight: 500;
color: var(--bs-secondary-color);
}
.vital .tx span {
font-size: 11px;
color: var(--bs-secondary-color);
}
@media (max-width: 991px) {
.vital-group {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 575px) {
.vital-group {
grid-template-columns: repeat(2, 1fr);
}
}
/* vaccination table — 4 col override */
.exam-row.vaccination-row {
grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
}
@media (max-width: 575.98px) {
.exam-row.vaccination-row {
grid-template-columns: 1fr;
}
}
/* ---------- HEALTH: conditions ---------- */
.profile-condition {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 13px;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
margin-bottom: 8px;
border-left-width: 3px;
}
.profile-condition:last-child {
margin-bottom: 0;
}
.profile-condition.sev-high {
border-left-color: #dc2626;
}
.profile-condition.sev-mid {
border-left-color: #d97706;
}
.profile-condition.sev-low {
border-left-color: #0891b2;
}
.condition-body {
min-width: 0;
}
.condition-body b {
display: block;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.condition-body span {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* ---------- HEALTH: emergency steps ---------- */
.profile-step {
display: flex;
gap: 12px;
height: 100%;
padding: 14px;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
background: var(--bs-secondary-bg);
}
.step-n {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #fff;
background: var(--bs-primary);
}
.profile-step b {
font-size: 13px;
color: var(--bs-emphasis-color);
}
.profile-step p {
margin: 3px 0 0;
font-size: 12px;
color: var(--bs-secondary-color);
line-height: 1.5;
}
/* ---------- TRANSPORT: live tracking ---------- */
.transport-track {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--bs-border-color);
}
.transport-track-map {
position: relative;
height: 70px;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(135deg, #eef2ff, #f7f8fc);
border: 1px solid var(--bs-border-color);
}
[data-bs-theme=dark] .transport-track-map,
[data-theme=dark] .transport-track-map {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(255, 255, 255, 0.02));
}
.transport-track-route {
position: absolute;
left: 14px;
right: 14px;
top: 50%;
height: 3px;
transform: translateY(-50%);
border-radius: 3px;
background: repeating-linear-gradient(90deg, var(--bs-primary) 0 8px, transparent 8px 14px);
opacity: 0.5;
}
.transport-track-bus,
.transport-track-school {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
}
.transport-track-bus {
left: 12px;
background: var(--bs-primary);
box-shadow: 0 4px 10px -3px rgba(61, 94, 225, 0.6);
animation: sp-busmove 4s ease-in-out infinite;
}
.transport-track-school {
right: 12px;
background: #16a34a;
}
@keyframes sp-busmove {
0%, 100% {
left: 12px;
}
50% {
left: calc(100% - 42px);
}
}
.transport-track-info {
display: flex;
align-items: center;
gap: 12px;
margin-top: 10px;
flex-wrap: wrap;
}
.transport-track-eta {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.transport-track-eta b {
font-size: 13px;
color: var(--bs-emphasis-color);
}
.transport-track-eta span {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.transport-track-eta .profile-dot.live {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #16a34a;
margin-right: 6px;
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
animation: sp-livepulse 1.6s infinite;
}
@keyframes sp-livepulse {
0% {
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
}
100% {
box-shadow: 0 0 0 8px rgba(22, 163, 74, 0);
}
}
.transport-track-info .profile-button {
flex: 1;
min-width: 140px;
}
/* ---------- NOTES: staff banner + switch ---------- */
.staff-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(217, 119, 6, 0.28);
background: linear-gradient(100deg, rgba(217, 119, 6, 0.08), transparent);
}
.staff-bar-txt b {
display: block;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.staff-bar-txt span {
font-size: 12px;
color: var(--bs-secondary-color);
}
.switch {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
margin: 0;
}
.switch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.switch-track {
position: relative;
width: 38px;
height: 22px;
border-radius: 999px;
background: var(--bs-border-color);
transition: background var(--transition);
flex-shrink: 0;
}
.switch-track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: transform var(--transition);
}
.switch input:checked + .switch-track {
background: var(--bs-primary);
}
.switch input:checked + .switch-track::after {
transform: translateX(16px);
}
.switch-lbl {
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ---------- NOTES: composer ---------- */
.note-composer {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
padding: 12px;
}
.note-composer-top {
display: flex;
gap: 10px;
}
.note-composer-top img {
width: 38px;
height: 38px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.note-composer-top textarea {
border: 1px solid var(--bs-border-color);
border-radius: 10px;
resize: vertical;
font-size: 13px;
}
.note-composer-top textarea:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
}
.note-composer-foot {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
}
.visibility {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
color: var(--bs-secondary-color);
cursor: pointer;
margin: 0;
padding: 5px 10px;
border: 1px solid var(--bs-border-color);
border-radius: 999px;
}
.visibility input {
accent-color: var(--bs-primary);
}
.visibility i {
font-size: 14px;
}
/* ---------- NOTES: list ---------- */
.profile-notes {
display: flex;
flex-direction: column;
gap: 10px;
}
.profile-note {
display: flex;
gap: 12px;
padding: 13px 14px;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
background: var(--bs-body-bg);
border-left-width: 3px;
}
.profile-note.c-counsel {
border-left-color: #0d9488;
}
.profile-note.c-academic {
border-left-color: #3d5ee1;
}
.profile-note.c-behaviour {
border-left-color: #d97706;
}
.profile-note.c-health {
border-left-color: #dc2626;
}
.note-main {
min-width: 0;
flex: 1;
}
.note-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.note-top b {
font-size: 13px;
color: var(--bs-emphasis-color);
}
.note-role {
font-size: 11px;
color: var(--bs-secondary-color);
}
.note-vis {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10.5px;
font-weight: 600;
color: #b45309;
background: rgba(217, 119, 6, 0.12);
padding: 2px 8px;
border-radius: 999px;
}
.note-vis i {
font-size: 12px;
}
.note-vis.shared {
color: #0d9488;
background: rgba(13, 148, 136, 0.12);
}
.note-date {
font-size: 11px;
color: var(--bs-secondary-color);
}
.note-main p {
margin: 6px 0 0;
font-size: 12.5px;
color: var(--bs-secondary-color);
line-height: 1.55;
}
.badge-cat {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 2px 8px;
border-radius: 6px;
}
.badge-cat.counsel {
color: #0d9488;
background: rgba(13, 148, 136, 0.12);
}
.badge-cat.academic {
color: #3d5ee1;
background: rgba(61, 94, 225, 0.12);
}
.badge-cat.behaviour {
color: #d97706;
background: rgba(217, 119, 6, 0.12);
}
.badge-cat.health {
color: #dc2626;
background: rgba(220, 38, 38, 0.12);
}
.badge-cat.profile {
color: #7b61ff;
background: rgba(123, 97, 255, 0.12);
}
.badge-cat.fees {
color: #16a34a;
background: rgba(22, 163, 74, 0.12);
}
.note-new {
animation: sp-fade 0.5s ease;
}
/* ---------- AUDIT ---------- */
.profile-audit {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-left: 6px;
}
.audit-row {
display: flex;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--bs-border-color);
position: relative;
}
.audit-row:last-child {
border-bottom: 0;
}
.audit-body {
min-width: 0;
flex: 1;
}
.audit-top {
display: flex;
align-items: center;
gap: 8px;
}
.audit-top b {
font-size: 13.5px;
color: var(--bs-emphasis-color);
}
.audit-detail {
margin-top: 4px;
font-size: 12.5px;
color: var(--bs-secondary-color);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.audit-detail em {
font-style: normal;
font-weight: 600;
padding: 1px 8px;
border-radius: 6px;
}
.audit-detail em.old {
color: #dc2626;
background: rgba(220, 38, 38, 0.1);
text-decoration: line-through;
}
.audit-detail em.new {
color: #16a34a;
background: rgba(22, 163, 74, 0.1);
}
.audit-detail i {
font-size: 14px;
color: var(--bs-secondary-color);
}
.audit-meta {
margin-top: 6px;
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--bs-secondary-color);
flex-wrap: wrap;
}
.audit-meta img {
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
}
.audit-meta i {
font-size: 7px;
opacity: 0.6;
}
.audit-note {
margin-top: 14px;
font-size: 11.5px;
color: var(--bs-secondary-color);
display: flex;
align-items: center;
gap: 6px;
}
.audit-note i {
font-size: 14px;
}
/* ---------- LOGIN modal: portal + activity ---------- */
.portal {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 16px;
}
.portal-stat {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
background: var(--bs-secondary-bg);
}
.portal-stat .ic {
width: 34px;
height: 34px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
background: var(--accent-soft);
color: var(--accent);
flex-shrink: 0;
}
.portal-stat b {
display: block;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.portal-stat span {
font-size: 11px;
color: var(--bs-secondary-color);
}
@media (max-width: 575px) {
.portal {
grid-template-columns: 1fr;
}
}
.login-log {
display: flex;
flex-direction: column;
gap: 8px;
}
.login-log-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--bs-border-color);
border-radius: 10px;
}
.login-log-row .ic {
width: 32px;
height: 32px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
background: var(--accent-soft);
color: var(--accent);
flex-shrink: 0;
}
.login-log-row .tx {
min-width: 0;
flex: 1;
}
.login-log-row .tx b {
display: block;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.login-log-row .tx span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.login-log-time {
font-size: 11px;
color: var(--bs-secondary-color);
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
/* ---------- PAY modal ---------- */
.profile-lbl {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 4px;
}
.payment-summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-radius: 12px;
background: linear-gradient(120deg, var(--tint-primary), transparent);
border: 1px solid var(--bs-border-color);
}
.payment-summary span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
}
.payment-summary b {
display: block;
font-size: 15px;
color: var(--bs-emphasis-color);
}
.payment-amt {
font-size: 26px;
font-weight: 800;
color: var(--bs-primary);
}
.paymethods {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 14px;
}
.payment-method {
margin: 0;
cursor: pointer;
}
.payment-method input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.payment-method-b {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 12px 6px;
border: 1.5px solid var(--bs-border-color);
border-radius: 10px;
font-size: 12px;
font-weight: 600;
color: var(--bs-secondary-color);
transition: all var(--transition);
}
.payment-method-b i {
font-size: 20px;
}
.payment-method input:checked + .payment-method-b {
border-color: var(--bs-primary);
color: var(--bs-primary);
background: var(--tint-primary);
}
.payment-secure {
display: flex;
align-items: center;
gap: 6px;
margin-top: 12px;
font-size: 11.5px;
color: #16a34a;
}
.payment-secure i {
font-size: 15px;
}
/* ============================================================
LIVE BUS TRACKING — enterprise fleet-ops modal
============================================================ */
.livemap-content {
position: relative;
overflow: hidden;
border: 0;
border-radius: 20px;
box-shadow: 0 30px 70px -20px rgba(15, 23, 42, 0.5);
}
.livemap-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 6;
width: 34px;
height: 34px;
border-radius: 10px;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #fff;
background: rgba(17, 24, 39, 0.42);
backdrop-filter: blur(6px);
cursor: pointer;
transition: background var(--transition), transform var(--transition);
}
.livemap-close:hover {
background: rgba(17, 24, 39, 0.66);
transform: rotate(90deg);
}
/* map */
.livemap-map {
position: relative;
height: 280px;
background: linear-gradient(150deg, #e9eef8 0%, #dfe6f3 55%, #e6ebf6 100%);
}
[data-bs-theme=dark] .livemap-map,
[data-theme=dark] .livemap-map {
background: linear-gradient(150deg, #0d1018 0%, #141826 60%, #10131d 100%);
}
.livemap-svg {
width: 100%;
height: 100%;
display: block;
}
.livemap-blocks rect {
fill: rgba(120, 135, 170, 0.15);
}
[data-bs-theme=dark] .livemap-blocks rect,
[data-theme=dark] .livemap-blocks rect {
fill: rgba(255, 255, 255, 0.035);
}
.livemap-grid-lines path {
stroke: rgba(120, 135, 170, 0.14);
stroke-width: 1;
fill: none;
}
[data-bs-theme=dark] .livemap-grid-lines path,
[data-theme=dark] .livemap-grid-lines path {
stroke: rgba(255, 255, 255, 0.04);
}
.livemap-road {
fill: none;
stroke: rgba(88, 104, 140, 0.28);
stroke-width: 11;
stroke-linecap: round;
stroke-linejoin: round;
}
[data-bs-theme=dark] .livemap-road,
[data-theme=dark] .livemap-road {
stroke: rgba(255, 255, 255, 0.07);
}
.livemap-route {
fill: none;
stroke: #fff;
stroke-width: 6;
stroke-linecap: round;
stroke-linejoin: round;
}
[data-bs-theme=dark] .livemap-route,
[data-theme=dark] .livemap-route {
stroke: rgba(255, 255, 255, 0.16);
}
.livemap-prog {
fill: none;
stroke: url(#lmProgGrad);
stroke-width: 6;
stroke-linecap: round;
stroke-linejoin: round;
}
.livemap-node circle {
fill: #fff;
stroke: #9aa6c2;
stroke-width: 3;
}
.livemap-node.done circle {
fill: #4f46e5;
stroke: #fff;
}
.livemap-school circle {
fill: #16a34a;
stroke: #fff;
stroke-width: 2.5;
}
.livemap-school path {
fill: none;
stroke: #fff;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.livemap-vehicle .livemap-disc {
fill: #4f46e5;
stroke: #fff;
stroke-width: 2.5;
}
.livemap-vehicle .livemap-pulse {
fill: #4f46e5;
opacity: 0.35;
animation: sp-lm-ping 1.8s ease-out infinite;
transform-box: fill-box;
transform-origin: center;
}
.livemap-glyph path {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
@keyframes sp-lm-ping {
0% {
transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(2.6);
opacity: 0;
}
}
/* map overlays */
.livemap-topbar {
position: absolute;
top: 14px;
left: 14px;
right: 60px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
z-index: 4;
}
.livemap-live {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 999px;
background: rgba(17, 24, 39, 0.55);
color: #fff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
backdrop-filter: blur(6px);
}
.livemap-live .d {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
animation: sp-livepulse 1.4s infinite;
}
.livemap-route-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
color: #4f46e5;
font-size: 11px;
font-weight: 700;
backdrop-filter: blur(6px);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.livemap-route-tag i {
font-size: 14px;
}
.livemap-recenter {
position: absolute;
top: 56px;
right: 14px;
z-index: 4;
width: 38px;
height: 38px;
border-radius: 11px;
border: 0;
background: rgba(255, 255, 255, 0.9);
color: #4f46e5;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 19px;
box-shadow: 0 4px 14px -3px rgba(15, 23, 42, 0.3);
backdrop-filter: blur(6px);
cursor: pointer;
transition: transform var(--transition);
}
.livemap-recenter:hover {
transform: scale(1.08);
}
[data-bs-theme=dark] .livemap-route-tag,
[data-theme=dark] .livemap-route-tag,
[data-bs-theme=dark] .livemap-recenter,
[data-theme=dark] .livemap-recenter {
background: rgba(30, 36, 54, 0.85);
color: #a5b4fc;
}
/* floating driver card */
.livemap-driver {
position: absolute;
left: 14px;
bottom: 20px;
z-index: 4;
display: flex;
align-items: center;
gap: 11px;
padding: 8px 10px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.4);
border: 1px solid rgba(255, 255, 255, 0.6);
}
[data-bs-theme=dark] .livemap-driver,
[data-theme=dark] .livemap-driver {
background: rgba(24, 29, 44, 0.82);
border-color: rgba(255, 255, 255, 0.08);
}
.livemap-driver-info b {
display: block;
font-size: 13px;
color: var(--bs-emphasis-color);
line-height: 1.2;
}
.livemap-driver-info span {
font-size: 11.5px;
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
gap: 3px;
}
.livemap-driver-info span i {
font-size: 13px;
color: #f59e0b;
}
.livemap-driver-info em {
font-style: normal;
}
.livemap-driver-call {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #fff;
background: linear-gradient(135deg, #4f46e5, #7b61ff);
box-shadow: 0 6px 14px -4px rgba(79, 70, 229, 0.6);
transition: transform var(--transition);
}
.livemap-driver-call:hover {
transform: scale(1.06);
color: #fff;
}
/* sheet */
.livemap-sheet {
position: relative;
z-index: 3;
margin-top: -18px;
padding: 20px 20px 4px;
background: var(--bs-body-bg);
border-radius: 20px 20px 0 0;
}
.livemap-sheet::before {
content: "";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 42px;
height: 4px;
border-radius: 999px;
background: var(--bs-border-color);
}
.livemap-hero {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-top: 6px;
}
.livemap-hero-eta .l {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-secondary-color);
margin-bottom: 2px;
}
.livemap-hero-eta b {
font-size: 34px;
font-weight: 800;
color: var(--bs-emphasis-color);
line-height: 1;
letter-spacing: -1px;
}
.livemap-hero-eta b em {
font-style: normal;
font-size: 15px;
font-weight: 600;
color: var(--bs-secondary-color);
margin-left: 4px;
}
.livemap-hero-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.livemap-hero-sub {
font-size: 12px;
color: var(--bs-secondary-color);
}
.livemap-hero-sub i {
font-size: 14px;
vertical-align: -2px;
margin-right: 2px;
}
.livemap-hero-sub strong {
color: var(--bs-emphasis-color);
}
.livemap-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
}
.livemap-chip i {
font-size: 13px;
}
.livemap-chip.ok {
color: #16a34a;
background: rgba(22, 163, 74, 0.12);
}
.livemap-chip.info {
color: #4f46e5;
background: rgba(79, 70, 229, 0.12);
}
.livemap-pbar {
height: 8px;
border-radius: 999px;
background: var(--bs-secondary-bg);
overflow: visible;
margin-top: 18px;
position: relative;
}
.livemap-pbar > span {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #4f46e5, #7b61ff);
position: relative;
}
.livemap-pbar > span::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 3px #7b61ff, 0 2px 6px rgba(79, 70, 229, 0.5);
}
.livemap-pbar-x {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--bs-secondary-color);
margin-top: 9px;
}
.livemap-pbar-x i {
font-size: 13px;
vertical-align: -2px;
margin: 0 3px;
}
.livemap-stops {
margin-top: 18px;
position: relative;
}
.livemap-stops::before {
content: "";
position: absolute;
left: 10px;
top: 16px;
bottom: 16px;
width: 2px;
background: var(--bs-border-color);
}
.livemap-stop {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
position: relative;
}
.livemap-stop .dot {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--bs-border-color);
display: inline-flex;
align-items: center;
justify-content: center;
}
.livemap-stop .dot i {
font-size: 12px;
}
.livemap-stop.done .dot {
background: #16a34a;
border-color: #16a34a;
color: #fff;
}
.livemap-stop.now .dot {
border-color: #4f46e5;
background: #4f46e5;
box-shadow: 0 0 0 5px var(--tint-primary);
animation: sp-livepulse 1.6s infinite;
}
.livemap-stop .dot.flag {
background: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
color: var(--bs-secondary-color);
}
.livemap-stop .tx {
flex: 1;
min-width: 0;
}
.livemap-stop .tx b {
display: block;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.livemap-stop .tx span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.livemap-stop.now .tx b {
color: var(--bs-primary);
}
.livemap-stop .tm {
font-size: 11.5px;
font-weight: 600;
color: var(--bs-secondary-color);
flex-shrink: 0;
}
.livemap-stop em {
flex-shrink: 0;
}
.livemap-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 18px;
}
.livemap-stat {
display: flex;
align-items: center;
gap: 9px;
padding: 11px 10px;
border: 1px solid var(--bs-border-color);
border-radius: 13px;
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition);
}
.livemap-stat:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.livemap-stat .ic {
width: 34px;
height: 34px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
background: var(--tint-primary);
color: var(--bs-primary);
flex-shrink: 0;
}
.livemap-stat .ic.ok {
background: rgba(22, 163, 74, 0.12);
color: #16a34a;
}
.livemap-stat .tx b {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1.1;
}
.livemap-stat .tx b em {
font-style: normal;
font-size: 10.5px;
font-weight: 500;
color: var(--bs-secondary-color);
margin-left: 1px;
}
.livemap-stat .tx span {
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.livemap-foot {
justify-content: flex-end;
gap: 8px;
align-items: center;
}
.livemap-updated {
margin-right: auto;
font-size: 11.5px;
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
gap: 5px;
}
.livemap-updated i {
font-size: 14px;
}
@media (max-width: 575px) {
.livemap-map {
height: 220px;
}
.livemap-grid {
grid-template-columns: repeat(2, 1fr);
}
.livemap-hero {
align-items: flex-start;
}
.livemap-hero-meta {
align-items: flex-start;
}
.livemap-driver {
right: 14px;
}
}
/* ============================================================
LOGIN & ACCESS — credentials modal (premium)
============================================================ */
.credential-content {
position: relative;
overflow: hidden;
border: 0;
border-radius: 20px;
box-shadow: 0 30px 70px -20px rgba(15, 23, 42, 0.5);
}
.credential-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 4;
width: 32px;
height: 32px;
border-radius: 9px;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: #fff;
background: rgba(255, 255, 255, 0.18);
cursor: pointer;
transition: background var(--transition), transform var(--transition);
}
.credential-close:hover {
background: rgba(255, 255, 255, 0.32);
transform: rotate(90deg);
}
.credential-head {
display: flex;
align-items: center;
gap: 14px;
padding: 22px 22px 40px;
color: #fff;
background: linear-gradient(135deg, #4f46e5 0%, #7b61ff 60%, #9333ea 100%);
position: relative;
}
.credential-head::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 160% at 100% 0, rgba(255, 255, 255, 0.18), transparent 55%);
pointer-events: none;
}
.credential-head-tx h4 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.credential-head-tx span {
font-size: 12.5px;
opacity: 0.85;
}
.credential-body {
padding: 0 20px 18px;
margin-top: -24px;
position: relative;
z-index: 1;
}
.credential-status {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 12px 14px;
border-radius: 14px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: 0 10px 26px -14px rgba(15, 23, 42, 0.3);
margin-bottom: 16px;
}
.credential-status-on {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 700;
color: #16a34a;
}
.credential-status-on .d {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
animation: sp-livepulse 1.5s infinite;
}
.credential-status-meta {
font-size: 11.5px;
color: var(--bs-secondary-color);
margin-left: auto;
}
.credential-status-meta i {
font-size: 14px;
vertical-align: -2px;
margin-right: 3px;
}
.credential-creds {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.credential-cred {
border: 1px solid var(--bs-border-color);
border-radius: 16px;
padding: 14px;
background: var(--bs-body-bg);
border-top: 3px solid var(--bs-primary);
}
.credential-cred.c-parent {
border-top-color: #4f46e5;
}
.credential-cred.c-student {
border-top-color: #0d9488;
}
.credential-cred-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.credential-cred-id {
min-width: 0;
flex: 1;
}
.credential-cred-id b {
display: block;
font-size: 13px;
color: var(--bs-emphasis-color);
line-height: 1.2;
}
.credential-cred-id span {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.credential-cred-top .profile-pill {
flex-shrink: 0;
align-self: center;
}
.credential-cred-id b {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.credential-field {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
border-radius: 10px;
background: var(--bs-secondary-bg);
margin-top: 8px;
}
.credential-field .k {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--bs-secondary-color);
width: 88px;
flex-shrink: 0;
}
.credential-field .k i {
font-size: 14px;
}
.credential-field .v {
flex: 1;
min-width: 0;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
letter-spacing: 0.02em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.credential-field .v.pw {
letter-spacing: 1.5px;
}
.credential-ib {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
cursor: pointer;
transition: all var(--transition);
}
.credential-ib:hover {
color: var(--bs-primary);
border-color: var(--bs-primary);
background: var(--tint-primary);
}
.credential-h {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
margin: 18px 0 10px;
}
.credential-h i {
font-size: 15px;
}
.credential-foot {
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 575px) {
.credential-creds {
grid-template-columns: 1fr;
}
.credential-status-meta {
margin-left: 0;
}
}
.calendar-card .card-body {
overflow-x: scroll;
}
.calendar-card .card-body .tab-content {
min-width: 750px;
}
.routine .dt-pill {
display: flex;
align-items: center;
gap: 8px;
}
.routine .dt-pill .dt-pill-dot {
width: 6px;
height: 6px;
display: block;
border-radius: 50%;
}
.dt-pill-dot {
width: 6px;
height: 6px;
display: inline-flex;
border-radius: 50%;
margin: 0px 6px 0px 0px;
}
.hol-calendar-view {
position: sticky;
top: 80px;
}
.auth-logo .logo-dark {
display: block !important;
}
.auth-logo .logo-white {
display: none !important;
}
.attendance-types .attendance-type-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.attendance-types .attendance-type-list li {
border: 1px solid #E9EDF4;
border-radius: 5px;
background: #FFF;
padding: 8px 10px;
color: #202C4B;
display: flex;
align-items: center;
margin-right: 5px;
margin-bottom: 5px;
}
.attendance-types .attendance-type-list li:last-child {
margin-right: 0;
}
.attendance-types .attendance-type-list li .attendance-icon {
width: 20px;
height: 20px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 5px;
}
.student-pomote-note {
background: #F2F5FF;
display: inline-flex;
align-items: center;
border-radius: 5px;
padding: 6px 10px;
border: 1px solid #3D5EE1;
margin-bottom: 20px;
}
@media (max-width: 575.98px) {
.student-pomote-note {
display: block;
}
}
.student-pomote-note .info-icon {
color: #3D5EE1;
margin-right: 5px;
}
.student-pomote-note p {
color: #3D5EE1;
display: flex;
align-items: center;
}
@media (max-width: 575.98px) {
.student-pomote-note p {
display: block;
}
}
.student-pomote-note p span {
font-weight: 600;
margin-right: 3px;
}
@media (max-width: 575.98px) {
.student-pomote-note p span {
display: block;
}
}
.promote-card-main {
display: none;
}
.promote-card-main.promote-card-main-show {
display: block;
margin-bottom: 24px;
}
.promoted-year p {
margin-bottom: 10px;
color: #000;
}
#student_promote .modal-dialog {
max-width: 400px;
}
#student_promote .modal-dialog h4 {
font-size: 20px;
margin-bottom: 5px;
}
#student_promote .modal-dialog p {
margin-bottom: 24px;
}
.success-msg-toast {
top: 70px;
right: 30px;
}
.success-msg-toast .toast {
border: 0;
}
.success-msg-toast .toast .toast-header {
padding: 10px;
border-radius: 5px;
border-left: 2px solid #1ABE17;
}
.success-msg-toast .toast .toast-header p {
margin-bottom: 0;
display: inline-flex;
align-items: center;
color: #202C4B;
font-size: 15px;
}
.success-msg-toast .toast .toast-header p span {
font-size: 16px;
margin-right: 5px;
line-height: normal;
}
.success-msg-toast .toast .toast-header .toast-close span i {
color: #CDD0D7;
transition: 0.5s all;
}
.success-msg-toast .toast .toast-header .toast-close span i:hover {
color: #E82646;
transition: 0.5s all;
}
.date-pic {
position: relative;
}
.date-pic .cal-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.student-detail-info {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.student-detail-info .student-img {
width: 45px;
height: 45px;
border-radius: 5px;
display: flex;
flex-shrink: 0;
margin-right: 10px;
}
.student-detail-info .student-img img {
width: 100%;
border-radius: 5px;
}
.student-detail-info .name-info h6 {
font-size: 16px;
}
.student-detail-info .name-info h6 span {
display: block;
font-weight: 400;
}
.year-picker {
width: 125px;
position: relative;
margin-bottom: 10px;
margin-right: 5px;
}
.year-picker input {
height: 39px;
padding-left: 30px;
}
.year-picker .icon {
position: absolute;
right: 10px;
top: 50%;
line-height: normal;
transform: translateY(-50%);
}
.year-picker .cal-icon {
position: absolute;
left: 10px;
top: 50%;
line-height: normal;
transform: translateY(-50%);
}
.table-filter-head.attendance-report-head .filter-head-left .form-filter {
margin-right: 5px;
}
.table-filter-head.attendance-report-head .search-filter-btn {
margin-bottom: 10px;
}
.table-filter-head.attendance-report-head .search-filter-btn .btn {
padding: 7px 20px;
}
.add-more-timetable {
background: #E9EDF4;
padding: 24px;
border-radius: 5px;
}
.add-more-timetable .tab-links {
margin-bottom: 24px;
}
.add-more-timetable .tab-links li {
padding: 0;
margin-right: 24px;
}
.add-more-timetable .tab-links li:last-child {
margin-right: 0;
}
.add-more-timetable .tab-links li a {
background: transparent;
font-weight: 400;
color: #515B73;
padding: 0 20px 10px;
position: relative;
}
.add-more-timetable .tab-links li a::after {
content: "";
width: 100%;
height: 3px;
border-radius: 5px;
background: #3D5EE1;
position: absolute;
left: 0;
bottom: 0;
opacity: 0;
transition: 0.5s all;
}
.add-more-timetable .tab-links li.active {
background: transparent;
}
.add-more-timetable .tab-links li.active a {
background: transparent;
}
.add-more-timetable .tab-links li.active a::after {
opacity: 1;
transition: 0.5s all;
}
.add-more-timetable .delete-time-table {
width: 30px;
height: 30px;
background: #FDE9ED;
color: #E82646;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.add-more-timetable .delete-time-table:hover {
background: #E82646;
color: #FFF;
}
.exam-schedule-add {
border-top: 1px solid #E9EDF4;
padding-top: 15px;
}
.exam-schedule-add .delete-schedule-table {
width: 30px;
height: 30px;
background: #FDE9ED;
color: #E82646;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.exam-schedule-add .delete-schedule-table:hover {
background: #E82646;
color: #FFF;
}
.percentage-field {
display: none;
}
.percentage-field.percentage-field-show {
display: block;
}
.fixed-field {
display: none;
}
.fixed-field.fixed-field-show {
display: block;
}
.modal-card-table {
border: 1px solid #E9EDF4;
padding: 15px;
border-radius: 5px;
margin-bottom: 24px;
}
.modal-card-table .modal-table-head {
border-bottom: 1px solid #E9EDF4;
margin-bottom: 24px;
padding-bottom: 24px;
}
.class-detail-info {
margin-bottom: 20px;
}
.class-detail-info p {
margin-bottom: 5px;
}
.class-detail-info span {
color: #202C4B;
}
.content.blank-page {
min-height: 100vh;
}
.content.blank-page .page-header {
border-bottom: 1px solid #E9EDF4;
}
.content.blank-page .page-title h4 {
margin-bottom: 0;
}
.book-issue-details {
border: 1px solid #E9EDF4;
border-radius: 5px;
padding: 24px 24px 10px;
margin-top: 15px;
}
.book-issue-details .book-details-head {
display: flex;
align-items: center;
border-bottom: 1px solid #E9EDF4;
margin-bottom: 15px;
padding-bottom: 15px;
justify-content: space-between;
}
.book-issue-details .book-details-head h6 {
font-weight: 400;
}
.book-issue-details .book-details-head h6 span {
color: #515B73;
}
.book-taker-info {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.book-taker-info li {
margin-right: 24px;
margin-bottom: 14px;
}
.book-taker-info li .student-img {
width: 45px;
height: 45px;
border-radius: 5px;
display: flex;
flex-shrink: 0;
margin-right: 8px;
}
.book-taker-info li .student-img img {
border-radius: 5px;
width: 100%;
}
.book-taker-info li h6 {
font-weight: 400;
}
.book-taker-info li h6 span {
margin-bottom: 0;
color: #202C4B;
}
.book-taker-info li span {
margin-bottom: 3px;
color: #515B73;
display: block;
}
.live-track-info {
background: #FFF;
padding: 24px 24px 10px;
border-radius: 5px;
margin-bottom: 24px;
}
.live-track-map iframe {
width: 100%;
height: 300px;
}
.assigned-driver .assigned-driver-info {
display: flex;
align-items: center;
background: #E9EDF4;
border-radius: 5px;
padding: 15px;
margin-top: 15px;
}
.assigned-driver .assigned-driver-info .driver-img {
width: 32px;
height: 32px;
border-radius: 5px;
display: flex;
margin-right: 8px;
flex-shrink: 0;
}
.assigned-driver .assigned-driver-info .driver-img img {
width: 100%;
border-radius: 5px;
}
.assigned-driver .assigned-driver-info h5 {
font-weight: 400;
}
.student-leave-info ul {
display: flex;
align-items: center;
background: #F4F6FA;
border-radius: 5px;
padding: 15px 15px 5px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.student-leave-info ul li {
min-width: 120px;
margin-bottom: 10px;
}
.student-leave-info ul li h6 {
font-weight: 400;
margin-top: 3px;
}
.exchange-link {
width: 54px;
height: 54px;
border-radius: 15px;
}
.all-content {
display: none;
}
.all-content.active {
display: block;
}
.rating i.filled {
color: #EAB300;
}
.rating .rating-rate {
color: #000;
margin-left: 5px;
}
.overlay-img .shape-01 {
position: absolute;
left: 40%;
}
.overlay-img .shape-02 {
position: absolute;
left: 60%;
bottom: 0;
}
.overlay-img .shape-03 {
position: absolute;
left: 80%;
}
.overlay-img .shape-04 {
position: absolute;
right: 15%;
bottom: 0;
}
.event-scroll {
max-height: 495px;
overflow-y: auto;
}
.class-hover {
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.class-hover:hover {
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.class-hover:hover .avatar {
animation: rotate 1s ease-in-out;
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(90deg);
}
100% {
transform: rotateY(0deg);
}
}
.btn-hover {
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-hover:hover {
background-color: #202C4B !important;
color: #FFF !important;
}
.todo-list .todo-strike-content h6 {
text-decoration-line: line-through;
}
.dark-hover:hover {
background: #3D5EE1 !important;
border-color: #3D5EE1 !important;
color: #FFF;
}
.line-ellipsis {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.student-slider.owl-carousel .owl-stage-outer, .teacher-slider.owl-carousel .owl-stage-outer {
height: 100% !important;
}
.student-slider.owl-carousel .owl-stage-outer .owl-stage, .teacher-slider.owl-carousel .owl-stage-outer .owl-stage {
height: 100%;
}
.student-slider.owl-carousel .owl-stage-outer .owl-stage .owl-item, .teacher-slider.owl-carousel .owl-stage-outer .owl-stage .owl-item {
height: 100%;
}
.activity-scroll {
max-height: 240px;
overflow-y: auto;
}
.notice-widget {
position: relative;
}
.notice-widget:before {
position: absolute;
content: "";
width: 1px;
height: calc(100% - 25px);
background-color: #E9EDF4;
top: 20px;
inset-inline-start: 16px;
}
.student-slider.owl-carousel .owl-nav {
position: absolute;
left: 50%;
top: 30%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
}
.student-slider.owl-carousel .owl-nav button {
width: 24px;
height: 24px;
background: #FFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.student-slider.owl-carousel .owl-nav button.owl-prev {
margin-right: 5px;
}
.student-slider.owl-carousel .owl-nav button:hover {
background: #3D5EE1;
color: #FFF;
}
.teacher-slider.owl-carousel .owl-nav {
position: absolute;
left: 50%;
top: 30%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
}
.teacher-slider.owl-carousel .owl-nav button {
width: 24px;
height: 24px;
background: #FFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #202C4B;
}
.teacher-slider.owl-carousel .owl-nav button.owl-prev {
margin-right: 5px;
}
.teacher-slider.owl-carousel .owl-nav button:hover {
background: #3D5EE1;
color: #FFF;
}
.animate-card {
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.animate-card:hover {
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
transform: translateY(-3px);
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
}
.account-page {
background: #FFF;
}
.login-wrapper {
width: 100%;
overflow: hidden;
height: 100vh;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
}
.login-wrapper.basic-type {
overflow: auto;
height: 100%;
justify-content: center;
}
.login-wrapper.basic-type::before {
display: none;
}
.login-wrapper.basic-type .login-content {
overflow: unset;
height: 100%;
}
@media (max-width: 991.98px) {
.login-wrapper.account-bg {
background-image: none;
}
}
.login-wrapper.account-bg .login-content {
background: rgba(255, 255, 255, 0.9490196078);
backdrop-filter: blur(10px);
margin-left: auto;
}
.login-wrapper .btn-outline-light:hover {
background-color: #FFF !important;
}
.login-background {
position: relative;
}
.login-background::before {
content: "";
background: rgba(75, 111, 255, 0.6);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
backdrop-filter: blur(6px);
}
@media (max-width: 991.98px) {
.login-background::before {
display: none;
}
}
.login-background .card > div {
width: 70%;
}
.hover-a {
position: relative;
color: #3D5EE1;
}
.hover-a:after {
content: "";
height: 2px;
width: 100%;
background: #3D5EE1;
transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
position: absolute;
bottom: -3px;
left: 0;
}
.hover-a:hover:after {
transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
}
.hover-a:hover {
color: #3D5EE1;
}
.login-wrapper.login-new {
overflow: auto;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
position: relative;
}
.login-wrapper.login-new .login-shapes {
position: relative;
}
@media (max-width: 991.98px) {
.login-wrapper.login-new .login-shapes {
display: none;
}
}
.login-wrapper.login-new .login-shapes .login-right-shape {
position: fixed;
top: 0;
left: 0;
}
.login-wrapper.login-new .login-shapes .login-left-shape {
position: fixed;
bottom: 0;
right: 0;
}
.login-wrapper.login-new .login-content.user-login {
position: relative;
}
.login-wrapper.login-new .login-content.user-login .login-userset form .otp-box {
margin-bottom: 34px;
}
.login-wrapper.login-new .login-content.user-login .login-userset form .otp-box input {
width: 74px;
height: 74px;
background: #FFF;
border: 1px solid #E9EDF4;
border-radius: 8px;
text-align: center;
margin-right: 15px;
font-weight: 700;
font-size: 26px;
color: #000;
outline: none;
}
@media (max-width: 575.98px) {
.login-wrapper.login-new .login-content.user-login .login-userset form .otp-box input {
width: 40px;
height: 40px;
}
}
.login-wrapper.login-new .copyright-text {
margin: 40px 0;
text-align: center;
}
@media (max-width: 767.98px) {
.login-wrapper.login-new .copyright-text {
margin: 0 0 30px;
}
}
.login-wrapper.login-new .copyright-text p {
font-weight: 500;
color: #202C4B;
margin-bottom: 0;
}
.login-wrapper.login-new .lock-screen-list {
text-align: center;
}
.login-wrapper.login-new .lock-screen-list .nav {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
}
.login-wrapper.login-new .lock-screen-list .nav li {
margin-right: 20px;
}
.login-wrapper.login-new .lock-screen-list .nav li:last-child {
margin-right: 0;
}
.login-wrapper.login-new .lock-screen-list .nav li a {
font-weight: 500;
}
.login-wrapper.login-new .lock-screen-list .copyright-text {
margin: 20px 0 40px;
}
@media (max-width: 767.98px) {
.login-wrapper.login-new .lock-screen-list .copyright-text {
margin: 20px 0 30px;
}
}
.login-wrapper.login-new .lock-screen-list .language-dropdown .dropdown-toggle {
border: 0;
padding: 0;
border-radius: 5px;
}
.login-wrapper.login-new .lock-screen-list .language-dropdown .dropdown-toggle:after {
border-top: 0;
border-left: 0;
border-bottom: 2px solid #9CA1AF;
border-right: 2px solid #9CA1AF;
content: "";
display: inline-block;
pointer-events: none;
width: 8px;
height: 8px;
vertical-align: 2px;
transform-origin: 66% 66%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
-webkit-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.login-wrapper.login-new .lock-screen-list .language-dropdown .dropdown-toggle[aria-expanded=true]:after {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
}
.login-wrapper.login-new .lock-screen-list .language-dropdown .dropdown-menu {
padding: 15px;
background: #FFF;
box-shadow: 0px 4px 13px -2px rgba(19, 16, 34, 0.06);
border: 1px solid #F1FAFB;
}
.login-wrapper.login-new .lock-screen-list .language-dropdown .dropdown-menu .dropdown-item {
padding: 5px 10px;
background: #FFF;
border-radius: 5px;
display: block;
}
.login-wrapper.login-new .lock-screen-list .language-dropdown .dropdown-menu .dropdown-item:hover {
background: #F8FAFC;
}
.login-or {
text-align: center;
font-size: 15px;
color: #515B73;
font-weight: 500;
margin: 5px 0;
padding: 10px 0;
position: relative;
}
.login-or::after {
width: 100%;
content: "";
border-top: 1px solid #CDD0D7;
position: absolute;
top: 50%;
right: 0;
}
.login-or::before {
width: 100%;
content: "";
border-top: 1px solid #CDD0D7;
position: absolute;
top: 50%;
left: 0;
}
.login-or .span-or {
background-color: #FFF;
padding: 0 10px;
z-index: 9;
position: relative;
}
.authen-overlay-item {
background: rgba(255, 255, 255, 0.1019607843);
border-radius: 25px;
padding: 24px;
position: relative;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 570px;
}
.comming-soon-pg {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
position: relative;
z-index: 1;
margin: 50px 0;
}
.comming-soon-pg .bg-img .top-bg {
position: absolute;
top: 0;
left: 30px;
z-index: -1;
}
.comming-soon-pg .bg-img .bottom-bg {
position: absolute;
right: 30px;
bottom: 0;
z-index: -1;
}
@media (max-width: 767.98px) {
.comming-soon-pg .bg-img {
display: none;
}
}
@media (max-width: 991.98px) {
.comming-soon-pg {
height: 100%;
}
}
.error-img {
max-width: 450px;
}
@media (max-width: 1399.98px) {
.error-img {
max-width: 260px;
}
}
.invoice-info .note-editable {
background: #FFF;
min-height: 80px;
}
.invoice-amount-details {
background: #FFF;
padding: 24px;
border-radius: 5px;
margin-bottom: 24px;
}
.invoice-amount-details ul li {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.invoice-amount-details ul li h6 {
font-size: 15px;
}
.invoice-amount-details ul li:last-child {
padding: 15px 0;
border-top: 1px solid #E9EDF4;
border-bottom: 1px solid #E9EDF4;
}
.service-upload {
border: 2px dashed #E9EDF4;
text-align: center;
background-color: #FFF;
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 38px;
}
.service-upload span {
font-size: 15px;
color: #515B73;
display: block;
}
.service-upload input[type=file] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.invoice-modal .modal-content {
background: #FFF;
padding: 20px;
}
.invoice-popup-head {
background: #F4F6FA;
padding: 24px 24px 14px;
flex-wrap: wrap;
}
.invoice-popup-head img {
margin-bottom: 10px;
}
.invoice-popup-head .popup-title {
margin-bottom: 10px;
}
.invoice-popup-head .popup-title h2 {
background: linear-gradient(270.14deg, #7638FF -0.04%, #3698FF 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.tax-info {
margin-top: 30px;
}
.tax-invoice-info {
background: #F4F6FA;
padding: 10px;
margin-bottom: 15px;
}
.tax-invoice-info h4 {
font-weight: 500;
}
.total-amount-tax {
display: flex;
justify-content: end;
align-items: center;
flex-wrap: wrap;
}
.total-amount-tax ul {
min-width: 200px;
text-align: right;
margin-bottom: 0;
}
.total-amount-tax ul li {
font-size: 16px;
margin-bottom: 8px;
}
.total-amount-tax ul.total-amount li {
font-size: 18px;
font-weight: 600;
}
.payment-info {
border-top: 1px solid #E9EDF4;
border-bottom: 1px solid #E9EDF4;
}
.payment-info h6 {
margin-bottom: 10px;
}
.term-condition-invoice {
border-bottom: 1px solid #E9EDF4;
}
.term-condition-invoice p {
font-weight: 500;
color: #202C4B;
}
.note-toolbar {
background: #FFF;
border-color: #E9EDF4;
}
.note-editor.note-airframe, .note-editor.note-frame {
border-color: #E9EDF4;
}
.note-editor.note-airframe .note-statusbar, .note-editor.note-frame .note-statusbar {
border-top: 0;
background-color: #FFF;
}
.invoice-logo-dark {
display: block;
}
.invoice-logo-white {
display: none;
}
.invoice-logo-white img {
height: 42px;
}
.dash-select-student {
margin-bottom: 10px;
}
.dash-select-student .avatar {
border: 1px solid transparent;
}
.dash-select-student .avatar:hover {
border-color: #3D5EE1;
}
.dash-select-student .avatar.active {
border-color: #3D5EE1;
}
/*-----------------
Student Attendance — Attendance Command Center
Scoped to `.student-attendance`. Layout uses Bootstrap grid + utilities;
only components Bootstrap has no equivalent for are defined here.
-----------------*/
.student-attendance {
--attendance-present: var(--bs-success);
--attendance-present-s: rgba(22, 163, 74, 0.1);
--attendance-late: var(--bs-warning);
--attendance-late-s: rgba(217, 119, 6, 0.1);
--attendance-absent: var(--bs-danger);
--attendance-absent-s: rgba(225, 29, 72, 0.1);
--attendance-leave: var(--bs-info);
--attendance-leave-s: rgba(8, 145, 178, 0.1);
color: var(--bs-body-color);
font-feature-settings: "tnum" 1;
}
.student-attendance .is-present {
--accent: var(--bs-success);
--accent-soft: var(--attendance-present-s);
}
.student-attendance .is-late {
--accent: var(--bs-warning);
--accent-soft: var(--attendance-late-s);
}
.student-attendance .is-warn {
--accent: var(--bs-warning);
--accent-soft: var(--attendance-late-s);
}
.student-attendance .is-absent {
--accent: var(--bs-danger);
--accent-soft: var(--attendance-absent-s);
}
.student-attendance .is-leave {
--accent: var(--attendance-leave);
--accent-soft: var(--attendance-leave-s);
}
.student-attendance .is-info {
--accent: var(--attendance-leave);
--accent-soft: var(--attendance-leave-s);
}
.student-attendance .is-violet {
--accent: var(--accent-purple);
--accent-soft: var(--tint-purple);
}
.student-attendance .is-primary {
--accent: var(--bs-primary);
--accent-soft: var(--tint-primary);
}
.student-attendance .is-muted {
--accent: var(--bs-tertiary-color);
--accent-soft: var(--bs-tertiary-bg);
}
.student-attendance :focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
border-radius: 8px;
}
.student-attendance .sub-text {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.muted-text {
color: var(--bs-tertiary-color);
}
.warning-note {
color: var(--bs-warning);
}
.student-attendance .toolbar-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 13px;
font-size: 12.5px;
font-weight: 600;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: all var(--transition);
}
.student-attendance .toolbar-button i {
font-size: 15px;
}
.student-attendance .toolbar-button:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.student-attendance .toolbar-icon-button {
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 8px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
cursor: pointer;
transition: all var(--transition);
}
.student-attendance .toolbar-icon-button:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.student-attendance .toolbar-icon-button.is-ok:hover {
border-color: var(--bs-success);
color: var(--bs-success);
}
.student-attendance .toolbar-icon-button.is-no:hover {
border-color: var(--bs-danger);
color: var(--bs-danger);
}
.student-attendance .status-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
color: var(--accent);
background: var(--accent-soft);
}
.student-attendance .status-chip i {
font-size: 12px;
}
.student-attendance .status-chip.is-live {
color: var(--bs-danger);
background: var(--attendance-absent-s);
}
.student-attendance .status-chip.is-live::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentcolor;
animation: att-pulse 1.6s infinite;
}
.student-attendance .choice-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
color: var(--bs-secondary-color);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.student-attendance .choice-chip i {
font-size: 13px;
color: var(--bs-primary);
}
.student-attendance .choice-chip.is-open {
color: var(--bs-success);
border-color: var(--attendance-present-s);
}
.student-attendance .choice-chip.is-open i {
color: var(--bs-success);
}
.student-attendance .live-flag-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: var(--bs-success);
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
animation: att-pulse 1.6s infinite;
}
@keyframes att-pulse {
0% {
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
}
100% {
box-shadow: 0 0 0 7px rgba(22, 163, 74, 0);
}
}
.student-attendance .side-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 13px;
}
.student-attendance .side-panel-head > b {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.student-attendance .side-panel-head > b i {
font-size: 16px;
color: var(--bs-primary);
}
/*-----------------
Command hero
-----------------*/
.attendance-hero-main {
position: relative;
overflow: hidden;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
padding: 20px;
background: radial-gradient(120% 150% at 100% 0, rgba(61, 94, 225, 0.07), transparent 48%), linear-gradient(180deg, var(--bs-body-bg), var(--bs-secondary-bg));
}
.attendance-hero-title {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--bs-emphasis-color);
margin: 4px 0 8px;
}
.attendance-hero-rate {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.attendance-hero-rate b {
display: block;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
line-height: 1.05;
}
.attendance-hero-rate span {
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.attendance-rail {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--bs-border-color);
}
.attendance-rail-done {
font-size: 12px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.attendance-rail-bar {
display: flex;
gap: 2px;
height: 12px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.attendance-rail-bar .seg {
width: 0;
background: var(--accent);
transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.attendance-rail-keys {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.meta-key {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
font-size: 11px;
color: var(--bs-secondary-color);
cursor: pointer;
transition: all var(--transition);
}
.meta-key i {
width: 8px;
height: 8px;
border-radius: 3px;
background: var(--accent);
}
.meta-key b {
font-weight: 800;
color: var(--bs-emphasis-color);
}
.meta-key:hover {
border-color: var(--accent);
}
.meta-key.is-active {
background: var(--accent-soft);
border-color: var(--accent);
}
.ai-panel-title {
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
/*-----------------
Session board + quick actions
-----------------*/
.attendance-sessions {
display: flex;
flex-direction: column;
gap: 8px;
}
.attendance-session {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.attendance-session .p {
width: 24px;
height: 24px;
flex-shrink: 0;
border-radius: 7px;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
color: var(--bs-tertiary-color);
background: var(--bs-tertiary-bg);
}
.attendance-session div {
flex: 1;
min-width: 0;
}
.attendance-session b {
display: block;
font-size: 12px;
color: var(--bs-emphasis-color);
}
.attendance-session span:not(.p):not(.status-chip) {
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.attendance-session.is-done .p {
background: var(--bs-success);
color: #fff;
}
.attendance-session.is-now {
border-color: var(--bs-warning);
background: var(--attendance-late-s);
}
.attendance-session.is-now .p {
background: var(--bs-warning);
color: #fff;
}
.student-attendance .quick-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
width: 100%;
height: 100%;
padding: 12px 6px;
border-radius: var(--radius-sm);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
cursor: pointer;
text-align: center;
transition: all var(--transition);
}
.student-attendance .quick-actions .ic {
width: 32px;
height: 32px;
border-radius: 10px;
display: grid;
place-items: center;
font-size: 17px;
color: var(--accent);
background: var(--accent-soft);
}
.student-attendance .quick-actions b {
font-size: 10.5px;
font-weight: 650;
color: var(--bs-emphasis-color);
line-height: 1.25;
}
.student-attendance .quick-actions:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
border-color: var(--accent);
}
.student-attendance .filter-bar {
position: sticky;
top: 0;
z-index: 10;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
padding: 12px 14px;
}
.student-attendance .view-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border-radius: 999px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
font-size: 12px;
font-weight: 600;
color: var(--bs-secondary-color);
cursor: pointer;
transition: all var(--transition);
}
.student-attendance .view-toggle i {
font-size: 14px;
}
.student-attendance .view-toggle span {
padding: 1px 6px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
background: var(--bs-tertiary-bg);
color: var(--bs-tertiary-color);
}
.student-attendance .view-toggle:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.student-attendance .view-toggle.is-on {
background: var(--bs-primary);
border-color: transparent;
color: #fff;
}
.student-attendance .view-toggle.is-on span {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.student-attendance .view-toggle.is-add {
border-style: dashed;
}
.student-attendance .search-field {
position: relative;
flex: 1;
min-width: 230px;
display: flex;
align-items: center;
}
.student-attendance .search-field > i {
position: absolute;
left: 11px;
font-size: 16px;
color: var(--bs-tertiary-color);
}
.student-attendance .search-field input {
width: 100%;
padding: 9px 40px 9px 34px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-tertiary-bg);
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.student-attendance .search-field input:focus {
outline: none;
border-color: var(--bs-primary);
background: var(--bs-body-bg);
}
.student-attendance .search-field kbd {
position: absolute;
right: 10px;
padding: 1px 6px;
border-radius: 5px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
font-size: 10px;
color: var(--bs-tertiary-color);
}
.student-attendance .search-field.search-field-sm {
flex: 0 0 auto;
min-width: 180px;
}
.student-attendance .search-field.search-field-sm input {
padding: 6px 11px 6px 31px;
font-size: 12px;
}
.student-attendance .search-field.search-field-sm > i {
left: 10px;
font-size: 15px;
}
.student-attendance .chip-row {
padding-top: 11px;
border-top: 1px solid var(--bs-border-color);
}
.student-attendance .clear-button {
border: 0;
background: none;
padding: 4px 6px;
font-size: 11px;
font-weight: 600;
color: var(--bs-primary);
cursor: pointer;
}
.student-attendance .record-grid-scroll {
overflow-x: auto;
overflow-y: auto;
max-height: 640px;
}
.student-attendance .record-grid {
width: 100%;
min-width: 1420px;
border-collapse: separate;
border-spacing: 0;
}
.student-attendance .record-grid thead th {
position: sticky;
top: 0;
z-index: 3;
background: var(--bs-tertiary-bg);
border-bottom: 1px solid var(--bs-border-color);
padding: 11px 12px;
text-align: left;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-tertiary-color);
white-space: nowrap;
}
.student-attendance .record-grid thead th.is-pin, .student-attendance .record-grid thead th.is-pin-end {
z-index: 4;
}
.student-attendance .record-grid tbody td {
padding: 12px;
border-bottom: 1px solid var(--bs-border-color);
font-size: 12.5px;
vertical-align: middle;
}
.student-attendance .record-grid td.is-pin,
.student-attendance .record-grid td.is-pin-end {
position: sticky;
z-index: 2;
background: var(--bs-body-bg);
}
.student-attendance .record-grid .record-col-check {
left: 0;
width: 44px;
}
.student-attendance .record-grid .record-col-student {
left: 44px;
min-width: 240px;
box-shadow: 1px 0 0 var(--bs-border-color);
}
.student-attendance .record-grid .record-col-actions {
right: 0;
box-shadow: -1px 0 0 var(--bs-border-color);
}
.student-attendance .record-grid.is-dense tbody td {
padding: 7px 12px;
}
.student-attendance .record-row {
transition: background var(--transition);
}
.student-attendance .record-row:hover td {
background: var(--bs-tertiary-bg);
}
.student-attendance .record-row.is-sel td {
background: var(--tint-primary);
}
.student-attendance .row-expander {
width: 22px;
height: 22px;
margin-right: 8px;
border-radius: 6px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
display: inline-grid;
place-items: center;
font-size: 14px;
cursor: pointer;
vertical-align: middle;
transition: all var(--transition);
}
.student-attendance .row-expander i {
transition: transform var(--transition);
}
.student-attendance .row-expander:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.student-attendance .row-expander[aria-expanded=true] {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.student-attendance .row-expander[aria-expanded=true] i {
transform: rotate(90deg);
}
.student-attendance .student-cell {
display: inline-flex;
align-items: center;
gap: 9px;
vertical-align: middle;
}
.student-attendance .student-cell img {
width: 32px;
height: 32px;
border-radius: 9px;
object-fit: cover;
flex-shrink: 0;
}
.student-attendance .student-cell b {
display: block;
font-size: 12.5px;
font-weight: 650;
color: var(--bs-emphasis-color);
}
.student-attendance .student-cell em {
font-style: normal;
font-size: 10.5px;
color: var(--bs-tertiary-color);
}
.time-cell {
display: inline-flex;
flex-direction: column;
}
.time-cell em {
font-style: normal;
font-size: 10px;
color: var(--bs-tertiary-color);
}
.student-attendance .remark-note {
font-size: 11.5px;
color: var(--bs-secondary-color);
display: inline-block;
max-width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.attendance-percent {
font-size: 12.5px;
font-weight: 800;
padding: 3px 8px;
border-radius: 7px;
}
.attendance-percent.is-good {
color: var(--bs-success);
background: var(--attendance-present-s);
}
.attendance-percent.is-warn {
color: var(--bs-warning);
background: var(--attendance-late-s);
}
.attendance-percent.is-bad {
color: var(--bs-danger);
background: var(--attendance-absent-s);
}
.student-attendance .record-row:hover .record-row-actions,
.record-row:focus-within .record-row-actions {
opacity: 1;
} /*-----------------
Row expansion
-----------------*/
.detail-drawer-row > td {
padding: 0 !important;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.student-attendance .detail-drawer {
padding: 18px;
margin: 0;
}
.detail-drawer-id {
text-align: center;
padding: 16px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.detail-drawer-id img {
width: 76px;
height: 76px;
border-radius: 20px;
object-fit: cover;
margin-bottom: 9px;
}
.detail-drawer-id b {
display: block;
font-size: 14px;
color: var(--bs-emphasis-color);
}
.detail-drawer-id > span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.detail-drawer-list {
display: flex;
flex-direction: column;
gap: 7px;
}
.detail-drawer-line {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.detail-drawer-line > img {
width: 30px;
height: 30px;
border-radius: 9px;
object-fit: cover;
flex-shrink: 0;
}
.detail-drawer-line > span {
flex: 1;
min-width: 0;
}
.detail-drawer-line b {
display: block;
font-size: 12px;
color: var(--bs-emphasis-color);
}
.detail-drawer-line em {
font-style: normal;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.detail-drawer-icon {
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 9px;
display: grid;
place-items: center;
font-size: 15px;
color: var(--accent);
background: var(--accent-soft);
}
.student-attendance .stat-fact {
padding: 9px 8px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--accent);
background: var(--bs-body-bg);
text-align: center;
}
.student-attendance .stat-fact b {
display: block;
font-size: 16px;
font-weight: 800;
color: var(--bs-emphasis-color);
}
.student-attendance .stat-fact span {
font-size: 10px;
color: var(--bs-secondary-color);
}
/*-----------------
Heatmap
-----------------*/
.attendance-heatmap {
display: grid;
grid-template-columns: repeat(15, 1fr);
gap: 4px;
}
.attendance-heatmap span {
aspect-ratio: 1;
border-radius: 4px;
background: var(--bs-tertiary-bg);
}
.attendance-heatmap span.l1 {
background: rgba(22, 163, 74, 0.25);
}
.attendance-heatmap span.l2 {
background: rgba(22, 163, 74, 0.45);
}
.attendance-heatmap span.l3 {
background: rgba(22, 163, 74, 0.68);
}
.attendance-heatmap span.l4 {
background: rgba(22, 163, 74, 0.9);
}
.attendance-heatmap span.is-absent {
background: rgba(225, 29, 72, 0.55);
}
.attendance-heatmap.attendance-heatmap-lg {
grid-template-columns: repeat(30, 1fr);
}
.attendance-heatmap-legend {
display: flex;
align-items: center;
gap: 5px;
margin-top: 8px;
}
.attendance-heatmap-legend span {
font-size: 10px;
color: var(--bs-tertiary-color);
}
.attendance-heatmap-legend i {
width: 11px;
height: 11px;
border-radius: 3px;
}
.attendance-heatmap-legend i.l1 {
background: rgba(22, 163, 74, 0.25);
}
.attendance-heatmap-legend i.l2 {
background: rgba(22, 163, 74, 0.45);
}
.attendance-heatmap-legend i.l3 {
background: rgba(22, 163, 74, 0.68);
}
.attendance-heatmap-legend i.l4 {
background: rgba(22, 163, 74, 0.9);
}
.attendance-heatmap-legend i.is-absent {
background: rgba(225, 29, 72, 0.55);
}
.attendance-legend {
display: flex;
gap: 12px;
}
.attendance-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.attendance-legend i {
width: 14px;
height: 3px;
border-radius: 2px;
background: var(--accent);
}
.student-attendance .chart-area {
display: block;
width: 100%;
height: 180px;
}
.chart-area-grid path {
stroke: var(--bs-border-color);
stroke-width: 1;
fill: none;
}
.chart-area-fill {
fill: url(#attFill);
}
.chart-area-line {
fill: none;
stroke: var(--bs-success);
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.chart-area-dots circle {
fill: var(--bs-body-bg);
stroke: var(--bs-success);
stroke-width: 2.4;
}
.chart-area-dots circle.is-last {
fill: var(--bs-success);
}
.attendance-compare {
display: flex;
flex-direction: column;
gap: 9px;
}
.attendance-compare-row {
display: grid;
grid-template-columns: 78px 1fr 38px;
align-items: center;
gap: 10px;
}
.attendance-compare-row .n {
font-size: 11.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.attendance-compare-row .tr {
height: 8px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.attendance-compare-row .tr > span {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: var(--accent);
transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.attendance-compare-row > b {
font-size: 11.5px;
font-weight: 800;
color: var(--bs-emphasis-color);
text-align: right;
}
.student-attendance .bar-chart {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
align-items: end;
height: 132px;
}
.student-attendance .bar-chart .b {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 5px;
height: 100%;
}
.student-attendance .bar-chart .v {
font-size: 10.5px;
font-weight: 700;
color: var(--bs-secondary-color);
}
.student-attendance .bar-chart .col {
width: 100%;
max-width: 32px;
height: 0;
border-radius: 7px 7px 3px 3px;
background: var(--accent);
opacity: 0.55;
transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.student-attendance .bar-chart .c {
font-size: 10px;
color: var(--bs-tertiary-color);
}
.student-attendance .bar-chart .is-peak .col {
opacity: 1;
}
.student-attendance .bar-chart .is-peak .v {
color: var(--bs-emphasis-color);
}
.student-attendance .timeline-row-item {
display: grid;
grid-template-columns: 42px 14px 1fr;
align-items: start;
gap: 6px;
padding-bottom: 15px;
}
.student-attendance .timeline-row-item:last-child {
padding-bottom: 0;
}
.student-attendance .timeline-row-item .tm {
font-size: 10.5px;
font-weight: 650;
color: var(--bs-secondary-color);
text-align: right;
padding-top: 1px;
}
.student-attendance .timeline-row-item .pt {
position: relative;
width: 14px;
}
.student-attendance .timeline-row-item .pt::before {
content: "";
position: absolute;
left: 3px;
top: 4px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--accent);
z-index: 1;
}
.student-attendance .timeline-row-item:not(:last-child) .pt::after {
content: "";
position: absolute;
left: 6.5px;
top: 15px;
bottom: -15px;
width: 2px;
background: var(--bs-border-color);
}
.student-attendance .timeline-row-item .bd b {
display: block;
font-size: 12px;
font-weight: 650;
color: var(--bs-emphasis-color);
line-height: 1.35;
}
.student-attendance .timeline-row-item .bd p {
margin: 2px 0 0;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.notification-group .lbl {
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-tertiary-color);
margin-bottom: 7px;
}
.student-attendance .note-tag {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
margin-bottom: 7px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--accent);
background: var(--bs-body-bg);
transition: transform var(--transition);
}
.student-attendance .note-tag:last-child {
margin-bottom: 0;
}
.student-attendance .note-tag:hover {
transform: translateX(2px);
}
.student-attendance .note-tag .ic {
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 8px;
display: grid;
place-items: center;
font-size: 15px;
color: var(--accent);
background: var(--accent-soft);
}
.student-attendance .note-tag .bd {
flex: 1;
min-width: 0;
}
.student-attendance .note-tag .bd b {
display: block;
font-size: 11.5px;
font-weight: 650;
color: var(--bs-emphasis-color);
}
.student-attendance .note-tag .bd p {
margin: 1px 0 0;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.student-attendance .pager-page {
min-width: 30px;
height: 30px;
padding: 0 8px;
border-radius: 8px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
font-size: 12px;
font-weight: 650;
color: var(--bs-secondary-color);
cursor: pointer;
transition: all var(--transition);
}
.student-attendance .pager-page:hover:not(:disabled) {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.student-attendance .pager-page.is-on {
background: var(--bs-primary);
border-color: transparent;
color: #fff;
}
.student-attendance .pager-page:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.student-attendance .bulk-bar-inner {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 14px;
border-radius: 999px;
background: var(--bs-emphasis-color);
color: #fff;
box-shadow: 0 18px 40px -12px rgba(16, 24, 40, 0.55);
pointer-events: auto;
animation: att-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.student-attendance .bulk-bar-inner .toolbar-button {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.16);
color: #fff;
}
.student-attendance .bulk-bar-inner .toolbar-button:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
color: #fff;
}
@keyframes att-rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
/*-----------------
Modal helpers
-----------------*/
.attendance-mark {
display: flex;
flex-direction: column;
gap: 7px;
}
.attendance-mark-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 11px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.attendance-mark-row img {
width: 32px;
height: 32px;
border-radius: 9px;
object-fit: cover;
flex-shrink: 0;
}
.attendance-mark-row > span {
flex: 1;
min-width: 0;
}
.attendance-mark-row b {
display: block;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.attendance-mark-row em {
font-style: normal;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.toggle-switch {
display: inline-flex;
padding: 3px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
}
.toggle-switch button {
width: 30px;
height: 24px;
border: 0;
background: none;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
color: var(--bs-secondary-color);
cursor: pointer;
transition: all var(--transition);
}
.toggle-switch button[data-mark-set=present].is-on {
background: var(--bs-success);
color: #fff;
}
.toggle-switch button[data-mark-set=late].is-on {
background: var(--bs-warning);
color: #fff;
}
.toggle-switch button[data-mark-set=absent].is-on {
background: var(--bs-danger);
color: #fff;
}
/*-----------------
Skeleton
-----------------*/
.student-attendance.loading .live-flag {
display: none;
}
.student-attendance:not(.loading) .skeleton-loader {
display: none;
}
/* this page sweeps the fill itself, so the shared wipe layer stands down */
.student-attendance .skeleton {
border-radius: var(--radius);
background: linear-gradient(90deg, var(--bs-tertiary-bg) 25%, var(--bs-border-color) 37%, var(--bs-tertiary-bg) 63%);
background-size: 400% 100%;
animation: att-shimmer 1.4s ease infinite;
}
.student-attendance .skeleton::after {
content: none;
}
.student-attendance .skeleton-hero {
height: 300px;
margin-bottom: 16px;
}
.student-attendance .skeleton-filters {
height: 140px;
margin-bottom: 16px;
}
.student-attendance .skeleton-grid {
height: 420px;
}
.student-attendance .skeleton-side {
height: 420px;
}
.student-attendance .skeleton-block {
height: 240px;
}
@keyframes att-shimmer {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
/*-----------------
Responsive
-----------------*/
@media (max-width: 991.98px) {
.filter-bar {
position: static;
}
.attendance-heatmap.attendance-heatmap-lg {
grid-template-columns: repeat(15, 1fr);
}
}
@media (max-width: 767.98px) {
.bulk-bar-inner {
border-radius: var(--radius);
width: 100%;
}
.record-grid-scroll {
max-height: none;
overflow: visible;
}
.record-grid {
min-width: 0;
}
.record-grid thead {
display: none;
}
.record-grid,
.record-grid tbody,
.record-grid tr,
.record-grid td {
display: block;
width: auto;
}
.record-grid tbody td {
border-bottom: 0;
padding: 6px 14px;
text-align: left !important;
}
.record-grid tbody td:not(.record-col-student):not(.record-col-check):not(.record-col-actions)::before {
content: attr(data-lbl);
display: block;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-tertiary-color);
margin-bottom: 1px;
}
.record-grid td.is-pin,
.record-grid td.is-pin-end {
position: static;
box-shadow: none;
}
.record-grid td.record-col-check {
position: absolute !important;
top: 12px;
right: 12px;
width: auto;
padding: 0;
}
.record-grid td.record-col-student {
padding-top: 12px;
}
.record-grid td.record-col-actions {
position: sticky;
bottom: 0;
padding: 8px 14px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.record-row {
position: relative;
margin: 12px;
padding: 6px 0 0;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
}
.record-row-actions {
opacity: 1;
justify-content: flex-end;
}
.detail-drawer-row > td {
margin: 0 12px 12px;
}
}
/* ============================================================
MERGED OVERRIDES — avatar accent tokens
(same-selector overrides merged from app-new.css; kept after
the base rules so the later declaration wins, exactly as the
second stylesheet did.)
============================================================ */
.student-attendance .is-present {
--accent: var(--bs-success);
--accent-soft: var(--attendance-present-s);
--avatar-accent: var(--accent);
--avatar-accent-soft: var(--accent-soft);
}
.student-attendance .is-late {
--accent: var(--bs-warning);
--accent-soft: var(--attendance-late-s);
--avatar-accent: var(--accent);
--avatar-accent-soft: var(--accent-soft);
}
.student-attendance .is-warn {
--accent: var(--bs-warning);
--accent-soft: var(--attendance-late-s);
--avatar-accent: var(--accent);
--avatar-accent-soft: var(--accent-soft);
}
.student-attendance .is-absent {
--accent: var(--bs-danger);
--accent-soft: var(--attendance-absent-s);
--avatar-accent: var(--accent);
--avatar-accent-soft: var(--accent-soft);
}
.student-attendance .is-leave {
--accent: var(--attendance-leave);
--accent-soft: var(--attendance-leave-s);
--avatar-accent: var(--accent);
--avatar-accent-soft: var(--accent-soft);
}
.student-attendance .is-info {
--accent: var(--attendance-leave);
--accent-soft: var(--attendance-leave-s);
--avatar-accent: var(--accent);
--avatar-accent-soft: var(--accent-soft);
}
.student-attendance .is-violet {
--accent: var(--accent-purple);
--accent-soft: var(--tint-purple);
--avatar-accent: var(--accent);
--avatar-accent-soft: var(--accent-soft);
}
.student-attendance .is-primary {
--accent: var(--bs-primary);
--accent-soft: var(--tint-primary);
--avatar-accent: var(--accent);
--avatar-accent-soft: var(--accent-soft);
}
.student-attendance .is-muted {
--accent: var(--bs-tertiary-color);
--accent-soft: var(--bs-tertiary-bg);
--avatar-accent: var(--accent);
--avatar-accent-soft: var(--accent-soft);
}
/* ---- page overrides restored when the shared workspace components were
collapsed: these declarations only ever existed on the attendance grid ---- */
.student-attendance .chart-axis b {
font-size: 11.5px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.student-attendance .chart-axis span {
flex-direction: column;
display: flex;
align-items: center;
}
.student-attendance .column-sort.is-asc i, .column-sort.is-desc i {
opacity: 1;
color: var(--bs-primary);
}
.student-attendance .confidence-meter .tr {
overflow: hidden;
border-radius: 999px;
background: var(--bs-tertiary-bg);
flex: 1;
height: 6px;
}
.student-attendance .confidence-meter .tr > span {
border-radius: 999px;
height: 100%;
width: 0;
background: var(--accent);
transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
display: block;
}
.student-attendance .mail-list {
color: var(--bs-tertiary-color);
font-size: 13px;
}
.student-attendance .record-grid td.is-pin, .record-grid td.is-pin-end {
background: var(--bs-body-bg);
z-index: 2;
position: sticky;
}
.student-attendance .record-grid thead th.is-pin, .record-grid thead th.is-pin-end {
z-index: 4;
}
.student-attendance .segmented-control button.is-on {
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
box-shadow: var(--shadow);
}
.student-attendance .select-field select, .select-field input {
font-size: 12px;
background: none;
font-weight: 600;
color: var(--bs-emphasis-color);
cursor: pointer;
padding-right: 2px;
border: 0;
}
.student-attendance .select-field select:focus, .select-field input:focus {
outline: none;
}
.student-attendance .select-field.select-field-sm {
padding: 4px 8px;
}
.student-attendance .view-toggle-group.view-toggle-group-sm {
padding-bottom: 0;
border-bottom: 0;
}
/*-----------------
Classes — Class Management workspace
The grid, toolbar, row expansion, pagination, empty state, skeleton
and context menu all come from the shared `.sw-*` workspace components
(see the students-workspace block in the bundle). Only what is genuinely
specific to classes lives here: the grade badge, the fixed-width grid
columns, the two wide dropdown panels, and the bulk action bar.
-----------------*/
/* The premium card chrome that classes.html shares with every other page
lives in components/_cards.scss — only workspace-specific rules remain
here. */
/* the workspace wraps every section, so the footer sits one level deeper than
Bootstrap's `:last-child` radius rule reaches */
.classes-workspace .workspace-footer {
border-radius: 0 0 15px 15px;
}
/*-----------------
Grid columns — the class cell stands in for the student avatar cell
-----------------*/
.card-expand-toggle {
width: 34px;
}
.card-select {
width: 46px;
}
.card-actions-row {
min-width: 180px;
}
.record-icon-tile {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 10px;
display: grid;
place-items: center;
font-size: 12.5px;
font-weight: 800;
color: var(--accent);
background: var(--accent-soft);
}
[data-density=compact] .record-icon-tile {
width: 30px;
height: 30px;
font-size: 11px;
}
/*-----------------
Row height
Padding, font size, the user cell, action buttons and the detail-row
border now come from the shared .data-table component. Only the density
modifiers and the action column width stay page-specific.
-----------------*/
.classes-workspace .card-actions-row {
min-width: 150px;
}
.classes-workspace[data-density=compact] .data-table > .table > tbody > tr > td {
padding: 6px 12px;
}
.classes-workspace[data-density=comfortable] .data-table > .table > tbody > tr > td {
padding: 16px 12px;
}
.classes-workspace {
/* The final row already draws a line across the grid, so the footer must
not draw its own on top of it. Targeting the last row instead would miss:
every data row is followed by a detail row, so `:last-child` is never the
row you can see, and sorting or filtering moves which one is last. */
}
.classes-workspace .workspace-footer {
border-top: 0;
}
.classes-workspace {
/* With no rows on screen the table is hidden, and the empty state has no
bottom edge of its own — the footer draws the divider in that case. */
}
.classes-workspace .workspace-empty-state.show + .workspace-footer {
border-top: 1px solid var(--bs-border-color);
}
.classes-workspace {
/*-----------------
Footer — sized to sit with the reduced rows above it
-----------------*/
}
.classes-workspace .workspace-footer {
padding: 10px 12px;
gap: 10px;
}
.classes-workspace .workspace-footer-info {
font-size: 12.5px;
}
.classes-workspace .workspace-footer-size {
gap: 6px;
font-size: 12.5px;
}
.classes-workspace .workspace-footer-size .form-select {
height: 30px;
width: auto;
padding: 0 26px 0 9px;
font-size: 12.5px;
}
.classes-workspace .workspace-pagination {
gap: 3px;
}
.classes-workspace .workspace-page-numbers {
gap: 3px;
align-items: center;
}
.classes-workspace .workspace-page-button {
min-width: 30px;
height: 30px;
padding: 0 6px;
font-size: 12.5px;
}
.classes-workspace .workspace-page-button i {
font-size: 15px;
}
.pagination-gap {
padding: 0 4px;
font-size: 12.5px;
color: var(--bs-secondary-color, #6b7280);
}
/*-----------------
Toolbar sizing
The shared toolbar controls are 40px tall, which reads heavy above a dense
grid. Scoped to `.classes-workspace` so students.html keeps its own proportions. The
search field follows the buttons down so the row stays on one baseline.
-----------------*/
.classes-workspace .page-toolbar {
gap: 8px;
}
.classes-workspace .page-toolbar .workspace-button {
height: 34px;
padding: 0 11px;
font-size: 12.5px;
gap: 5px;
}
.classes-workspace .page-toolbar .workspace-button i {
font-size: 15px;
}
.classes-workspace .page-toolbar .workspace-button.workspace-button-icon {
width: 34px;
padding: 0;
}
.classes-workspace .page-toolbar .search-toolbar {
flex: 0 1 250px;
min-width: 180px;
}
.classes-workspace .page-toolbar .search-toolbar input {
height: 34px;
padding: 0 58px 0 32px;
font-size: 13px;
}
.classes-workspace .page-toolbar .search-toolbar .search-toolbar-icon {
font-size: 15px;
left: 11px;
}
.classes-workspace .page-toolbar .search-toolbar .search-toolbar-kbd {
font-size: 10px;
padding: 7px 5px;
}
.classes-workspace .density-toggle button {
width: 32px;
height: 34px;
}
.classes-workspace .density-toggle button i {
font-size: 16px;
}
.classes-workspace .quick-filters {
margin-top: 10px;
}
.classes-workspace .quick-filters .workspace-button {
height: 32px;
padding: 0 10px;
font-size: 12.5px;
gap: 5px;
}
.classes-workspace .quick-filters .workspace-button i {
font-size: 15px;
}
.classes-workspace .search-clear {
width: 20px;
height: 20px;
font-size: 13px;
}
/*-----------------
Dropdown panels wide enough for their two-column forms
-----------------*/
.filter-menu {
min-width: 340px;
max-width: 92vw;
}
.column-menu {
min-width: 210px;
max-width: 92vw;
}
/* An explicit `display` on these classes outranks the user-agent `[hidden]`
rule, so every element toggled with the hidden attribute has to opt back
out by hand — otherwise it renders permanently. */
.search-clear[hidden],
.result-count[hidden],
.bulk-selection[hidden],
.quick-filter-clear[hidden] {
display: none;
}
.classes-workspace .filter-chips:empty {
display: none;
}
.search-clear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border: 0;
border-radius: 50%;
background: var(--bs-tertiary-bg);
color: var(--bs-secondary-color, #6b7280);
display: grid;
place-items: center;
font-size: 14px;
cursor: pointer;
transition: all var(--transition);
}
.search-clear:hover {
background: var(--bs-primary);
color: #fff;
}
.view-count {
margin-left: auto;
font-size: 11px;
font-weight: 700;
color: var(--bs-secondary-color, #6b7280);
}
.result-count {
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--bs-primary);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
/*-----------------
Row expansion — four panels of class context inside .details-panel-inner
-----------------*/
.details-heading {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 10px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-secondary-color, #6b7280);
}
.details-heading i {
font-size: 15px;
color: var(--bs-primary);
}
.details-line {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
margin-bottom: 6px;
border-radius: 10px;
border: 1px solid var(--bs-border-color);
background: var(--bs-card-bg, #fff);
}
.details-line > img {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 50%;
object-fit: cover;
}
.details-line {
/* the icon badge is a too, and this rule outranks `.details-line-icon` — without
the exclusion it was handed `flex: 1` and `flex-direction: column`, which
stretched the badge and knocked its glyph off centre */
}
.details-line > span:not(.details-line-icon) {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.details-line > span:not(.details-line-icon) b {
font-size: 12.5px;
font-weight: 650;
color: var(--bs-emphasis-color);
}
.details-line > span:not(.details-line-icon) em {
font-style: normal;
font-size: 10.5px;
color: var(--bs-secondary-color, #6b7280);
}
.details-line-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 9px;
display: grid;
place-items: center;
font-size: 16px;
color: var(--accent);
background: var(--accent-soft);
}
.compact-icon-button {
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid var(--bs-border-color);
background: var(--bs-card-bg, #fff);
color: var(--bs-secondary-color, #6b7280);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
text-decoration: none;
transition: all var(--transition);
}
.compact-icon-button:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
transform: translateY(-2px);
}
.week-label {
display: flex;
flex-direction: column;
gap: 4px;
}
.week-label span {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
border-radius: 8px;
background: var(--bs-tertiary-bg);
font-size: 11.5px;
color: var(--bs-secondary-color, #6b7280);
}
.week-label span b {
font-size: 11.5px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.record-fact {
padding: 10px;
border-radius: 9px;
border: 1px solid var(--bs-border-color);
border-left-width: 3px;
background: var(--bs-card-bg, #fff);
}
.record-fact b {
display: block;
font-size: 16px;
font-weight: 800;
color: var(--bs-emphasis-color);
}
.record-fact span {
font-size: 10.5px;
color: var(--bs-secondary-color, #6b7280);
}
/*-----------------
Skeleton
The shared skeleton is shaped for the students grid. These rules retrace it
over this table's eight columns and reduced row height, so the placeholder
and the loaded rows occupy the same space and nothing jumps on reveal.
-----------------*/
.classes-workspace {
/* The toolbar sits in .card-header, a sibling of the skeleton rather than a
child, so it painted straight away with the placeholder stacked under it.
`:not()` un-matches itself once loaded, so the header needs no counter-rule
to come back and cannot be stranded hidden. */
/* The shared component only ever turns the live view ON (`.is-loaded
.live-content { display: block }`); it never turns it off, and both the header
and the table are plain divs, so they paint before the reveal. */
}
.classes-workspace:not(.is-loaded) .card-header, .classes-workspace:not(.is-loaded) .live-content {
display: none;
}
.classes-workspace .skeleton-head {
padding: 16px 16px 10px;
border-bottom: 1px solid var(--bs-border-color);
}
.classes-workspace .skeleton-toolbar {
gap: 8px;
padding-bottom: 0;
}
.classes-workspace .skeleton-quick {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.classes-workspace .skeleton-row {
grid-template-columns: 34px 30px minmax(210px, 1.6fr) 90px 0.8fr minmax(150px, 1.2fr) 0.5fr 150px;
gap: 12px;
padding: 10px 12px;
border-bottom-color: var(--bs-border-color);
}
.classes-workspace .skeleton-row:last-child {
border-bottom: 0;
}
.classes-workspace .skeleton-thead {
padding: 14px 12px;
background: var(--bs-tertiary-bg);
}
.classes-workspace .skeleton-head {
height: 9px;
width: 68%;
border-radius: 4px;
}
.classes-workspace .skeleton-head-end {
margin-left: auto;
width: 46px;
}
.classes-workspace .skeleton-cell {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.classes-workspace .skeleton-stack {
flex: 1;
min-width: 0;
}
.classes-workspace .skeleton-stack .skeleton-line + .skeleton-line {
margin-top: 5px;
}
.classes-workspace .skeleton-chev {
width: 24px;
height: 24px;
border-radius: 7px;
}
.classes-workspace .skeleton-check {
width: 18px;
height: 18px;
border-radius: 5px;
}
.classes-workspace .skeleton-avatar {
width: 38px;
height: 38px;
border-radius: 10px;
}
.classes-workspace .skeleton-avatar.skeleton-round {
border-radius: 50%;
}
.classes-workspace .skeleton-circle {
width: 28px;
height: 28px;
}
.classes-workspace .skeleton-line {
height: 10px;
}
.classes-workspace .skeleton-thin {
height: 8px;
width: 65%;
}
.classes-workspace .skeleton-pill {
height: 20px;
width: 70px;
}
.classes-workspace .skeleton-foot {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 10px 12px;
}
.classes-workspace .skeleton-foot-info {
width: 150px;
height: 10px;
}
.classes-workspace .skeleton-foot-size {
width: 84px;
height: 30px;
border-radius: 8px;
margin-left: auto;
}
.classes-workspace .skeleton-pager {
display: flex;
gap: 3px;
}
.classes-workspace .skeleton-page {
width: 30px;
height: 30px;
border-radius: 8px;
}
.classes-workspace .skeleton-search {
height: 34px;
width: 250px;
border-radius: 8px;
}
.classes-workspace .skeleton-btn {
height: 34px;
width: 96px;
border-radius: 8px;
}
.classes-workspace .skeleton-ico {
height: 34px;
width: 34px;
border-radius: 8px;
}
.classes-workspace .skeleton-density {
height: 34px;
width: 96px;
border-radius: 8px;
}
.classes-workspace .skeleton-chip {
height: 32px;
width: 104px;
border-radius: 999px;
}
.classes-workspace .skeleton-quick .skeleton-btn {
height: 32px;
width: 84px;
}
/*-----------------
Bulk action bar
-----------------*/
.bulk-selection {
position: sticky;
bottom: 16px;
z-index: 20;
margin-top: 16px;
display: flex;
justify-content: center;
pointer-events: none;
}
.bulk-selection-inner {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 14px;
border-radius: 0;
background: transparent;
box-shadow: none;
pointer-events: auto;
animation: cls-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.bulk-selection-inner .btn {
background: var(--bs-tertiary-bg);
border-color: var(--bs-border-color);
color: var(--heading);
}
.bulk-selection-inner .btn:hover {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.bulk-selection-inner .btn.text-danger {
color: #dc3545 !important;
}
@keyframes cls-rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
.bulk-selection-count {
font-size: 12px;
font-weight: 600;
color: var(--bs-secondary-color, #6b7280);
white-space: nowrap;
}
.bulk-selection-count b {
font-size: 14px;
font-weight: 800;
color: var(--heading);
}
.bulk-selection-close {
width: 28px;
height: 28px;
border-radius: 50%;
border: 0;
background: var(--bs-tertiary-bg);
color: var(--heading);
cursor: pointer;
display: grid;
place-items: center;
font-size: 15px;
}
.bulk-selection-close:hover {
background: var(--bs-primary);
color: #fff;
}
/*-----------------
Import drop zone
-----------------*/
.stacked-dropdown {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 28px 16px;
border-radius: 12px;
border: 2px dashed var(--bs-border-color);
background: var(--bs-tertiary-bg);
text-align: center;
transition: all var(--transition);
}
.stacked-dropdown:hover {
border-color: var(--bs-primary);
}
.stacked-dropdown i {
font-size: 30px;
color: var(--bs-primary);
}
.stacked-dropdown b {
font-size: 13px;
color: var(--bs-emphasis-color);
}
.stacked-dropdown input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
/*-----------------
Responsive — the shared grid already collapses; keep the bar in step
-----------------*/
@media (max-width: 991.98px) {
.bulk-selection-inner {
border-radius: 0;
width: calc(100% - 32px);
}
}
/* ============================================================
MERGED OVERRIDES — accent + workspace tokens
(same-selector overrides merged from app-new.css; kept after
the base rules so the later declaration wins, exactly as the
second stylesheet did.)
============================================================ */
/*-----------------
Row height
Each class cell is two lines,
not the three a student cell carries,
so the
shared 16px padding leaves the rows taller than their content needs.
-----------------*/
.classes-workspace table.record-grid-table tbody td {
padding: 10px 12px;
font-size: 13px;
}
.classes-workspace .workspace-actions {
gap: 4px;
}
.classes-workspace .workspace-icon-button {
width: 28px;
height: 28px;
}
.classes-workspace .workspace-icon-button i {
font-size: 14px;
}
.classes-workspace .record-identity {
gap: 10px;
}
.classes-workspace .record-identity .record-avatar {
width: 38px;
height: 38px;
border-radius: 10px;
}
.classes-workspace .record-identity .record-identity-name {
font-size: 13.5px;
}
.classes-workspace .record-identity .record-identity-sub {
font-size: 11.5px;
margin-top: 1px;
}
.classes-workspace[data-density=compact] table.record-grid-table tbody td {
padding: 6px 12px;
}
.classes-workspace[data-density=comfortable] table.record-grid-table tbody td {
padding: 16px 12px;
}
.classes-workspace tr.details-panel-row:not(.open) > td {
border-bottom: 0;
}
.classes-workspace .view-switcher a {
width: 32px;
height: 34px;
}
.classes-workspace .view-switcher a i {
font-size: 16px;
}
/*-----------------
Custom Reports — builder workspace
Only what the shared shared workspace and data-table components cannot already express:
the skeleton's column track (it has to line up with this table's twelve
columns) and the density steps for `.data-table`, which the base component
defines for `table.record-grid-table` alone.
Everything else on the page — toolbar, summary strip, pills, context menu,
empty state, shimmer — comes from the shared components untouched.
-----------------*/
.crw {
/* The shared component only ever turns the live view ON
(`.is-loaded .live-content { display: block }`); it never turns it off, and
`.live-content` is a plain div, so without this it paints before the reveal
and the skeleton stacks under real content. `:not()` un-matches itself
once loaded, so nothing can be left stranded hidden. */
}
.crw:not(.is-loaded) .live-content {
display: none;
}
.crw {
/*----- skeleton geometry -----*/
/* Column track follows the live header: chevron, checkbox, report name,
module, category, owner, generated, schedule, format, visibility,
status, actions. Placeholder and loaded rows then occupy the same
width and nothing shifts sideways on reveal. */
}
.crw .skeleton-row {
grid-template-columns: 34px 30px minmax(200px, 1.6fr) 110px 96px minmax(130px, 1fr) 110px 104px 96px 96px 96px 150px;
gap: 12px;
padding: 10px 12px;
}
.crw .skeleton-row:last-child {
border-bottom: 0;
}
.crw {
/* stands in for the sticky table head: same track, tinted band */
}
.crw .skeleton-thead {
padding: 14px 12px;
background: var(--dt-surface-alt, #F8FAFC);
}
.crw .skeleton-head {
height: 9px;
width: 68%;
border-radius: 4px;
}
.crw .skeleton-head-end {
margin-left: auto;
width: 46px;
}
.crw .skeleton-cell {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.crw .skeleton-stack {
flex: 1;
min-width: 0;
}
.crw .skeleton-stack .skeleton-line + .skeleton-line {
margin-top: 5px;
}
.crw .skeleton-chev {
width: 24px;
height: 24px;
border-radius: 7px;
}
.crw .skeleton-check {
width: 18px;
height: 18px;
border-radius: 5px;
}
.crw .skeleton-avatar {
width: 38px;
height: 38px;
border-radius: 10px;
}
.crw .skeleton-circle {
width: 26px;
height: 26px;
}
.crw .skeleton-line {
height: 10px;
}
.crw .skeleton-thin {
height: 8px;
width: 65%;
}
.crw .skeleton-pill {
height: 20px;
width: 66px;
}
.crw {
/* stands in for the summary strip above the grid */
}
.crw .skeleton-sum {
height: 58px;
border-radius: 10px;
}
.crw {
/* stands in for the pagination footer: info left, rows select and pager right */
}
.crw .skeleton-foot {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 12px 16px;
}
.crw .skeleton-foot-info {
width: 220px;
height: 10px;
}
.crw .skeleton-foot-size {
width: 84px;
height: 30px;
border-radius: 8px;
margin-left: auto;
}
.crw .skeleton-pager {
display: flex;
gap: 3px;
}
.crw .skeleton-page {
width: 30px;
height: 30px;
border-radius: 8px;
}
.crw {
/*----- density -----*/
/* The base component sizes `table.record-grid-table`; this grid is a `.data-table`,
so the three steps are restated against its own cell padding. */
}
.crw[data-density=compact] .data-table > table > tbody > tr > td {
padding: 6px 12px;
}
.crw[data-density=comfortable] .data-table > table > tbody > tr > td {
padding: 16px 12px;
}
.crw {
/* the detail panel supplies its own padding, so density must not add to it */
}
.crw .data-table > table > tbody > tr.dt-detail > td {
padding: 0 !important;
}
/* ============================================================
Roles & Permissions — Premium Enterprise IAM workspace
Scoped under .roles-page. Builds on Bootstrap + the template's
card / accordion / form-switch / avatar components and only
adds the bits an IAM console needs: a searchable role
directory, a permission workspace, an audit timeline and a
security score panel. Never touches sidebar / header / shell.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.roles-page * {
animation: none !important;
transition: none !important;
}
}
/* ============================================================
ROLE DIRECTORY (left panel)
============================================================ */
.directory {
display: flex;
flex-direction: column;
height: 100%;
}
.directory-search {
position: relative;
}
.directory-search .form-control {
padding-left: 34px;
}
.directory-search i {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: var(--bs-secondary-color);
font-size: 16px;
pointer-events: none;
}
/* category filter chips */
.category-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.category-row {
display: inline-flex;
align-items: center;
gap: 5px;
height: 28px;
padding: 0 11px;
border-radius: 999px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition);
}
.category-row:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.category-row.active {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.directory-list {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
min-height: 0;
max-height: 784px;
overflow-y: auto;
padding: 2px;
}
/* individual role card */
.role-card {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
@media (max-width: 575.98px) {
.role-card {
flex-direction: column;
align-items: start;
}
}
.role-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
background: transparent;
transition: background var(--transition);
}
.role-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
border-color: transparent;
}
.role-card.active {
border-color: transparent;
background: linear-gradient(135deg, var(--tint-primary), transparent 70%), var(--bs-body-bg);
box-shadow: var(--shadow);
}
.role-card.active::before {
background: linear-gradient(180deg, var(--bs-primary), #7b93ff);
}
.role-card-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: var(--accent-soft, var(--tint-primary));
color: var(--accent, var(--bs-primary));
}
.role-card-body {
min-width: 0;
flex: 1;
}
.role-card-name {
font-size: 14px;
font-weight: 600;
margin: 0;
color: var(--bs-heading-color, #111827);
}
.role-card-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
margin-top: 3px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.role-card-meta span {
display: inline-flex;
align-items: center;
gap: 3px;
}
.role-card-meta i {
font-size: 13px;
}
.role-card-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex: 0 0 9px;
background: var(--bs-success);
box-shadow: 0 0 0 3px var(--tint-success);
}
.role-card-dot.off {
background: #9ca3af;
box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.16);
}
/* role-card menus use a fixed-strategy Popper (see roles-permission.js) to
escape #rpDirList's overflow-y: auto; keep them above fixed page chrome */
[data-rp-menu] .dropdown-menu {
z-index: 1055;
}
/* accent variants for role icons */
.role-icon-primary {
--accent: var(--bs-primary);
--accent-soft: var(--tint-primary);
}
.role-icon-indigo {
--accent: #6366f1;
--accent-soft: rgba(99, 102, 241, .12);
}
.role-icon-success {
--accent: var(--bs-success);
--accent-soft: var(--tint-success);
}
.role-icon-amber {
--accent: var(--bs-warning);
--accent-soft: var(--tint-warning);
}
.role-icon-rose {
--accent: var(--bs-danger);
--accent-soft: var(--tint-danger);
}
.role-icon-teal {
--accent: var(--accent-teal);
--accent-soft: var(--tint-teal);
}
.role-icon-purple {
--accent: var(--accent-purple);
--accent-soft: var(--tint-purple);
}
.role-icon-slate {
--accent: #475569;
--accent-soft: rgba(71, 85, 105, .12);
}
/* ============================================================
PERMISSION WORKSPACE (right panel)
============================================================ */
.workspace-head {
display: flex;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
.workspace-head-icon {
width: 56px;
height: 56px;
flex: 0 0 56px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #fff;
background: linear-gradient(135deg, var(--bs-primary), #7b93ff);
box-shadow: 0 8px 18px var(--tint-primary);
}
/* permission toolbar */
.roles-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.search-field-roles {
position: relative;
flex: 1 1 240px;
min-width: 180px;
}
.search-field-roles .form-control {
height: 38px;
padding-left: 34px;
}
.search-field-roles i {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: var(--bs-secondary-color);
font-size: 16px;
pointer-events: none;
}
/* permission module accordion */
.permission-module-list .accordion-item {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm) !important;
margin-bottom: 12px;
overflow: hidden;
background: var(--bs-body-bg);
transition: box-shadow var(--transition);
}
.permission-module-list .accordion-item:hover {
box-shadow: var(--shadow);
}
.permission-module-list .accordion-button {
border-radius: var(--radius-sm);
font-weight: 600;
padding: 14px 16px;
background: var(--bs-body-bg);
}
@media (max-width: 575.98px) {
.permission-module-list .accordion-button {
flex-wrap: wrap;
gap: 12px;
}
}
.permission-module-list .accordion-button:not(.collapsed) {
color: var(--bs-primary);
background: var(--tint-primary);
box-shadow: none;
}
.permission-module-list .accordion-button:focus {
box-shadow: none;
}
.permission-module-icon {
width: 34px;
height: 34px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-right: 12px;
background: var(--tint-primary);
color: var(--bs-primary);
}
.permission-module-count {
margin-left: auto;
margin-right: 12px;
font-size: 11.5px;
font-weight: 600;
color: var(--bs-secondary-color);
}
/* permission switch grid */
.permission-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.permission-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
border: 1px solid var(--bs-border-color);
border-radius: 10px;
background: var(--bs-secondary-bg);
transition: border-color var(--transition), background var(--transition);
}
.permission-row:hover {
border-color: var(--bs-primary);
background: var(--bs-body-bg);
}
.permission-row .form-check {
margin: 0;
min-height: auto;
padding: 0;
}
.permission-row .form-check-input {
margin: 0;
cursor: pointer;
}
.permission-row label {
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
/* ============================================================
USER ASSIGNMENT
============================================================ */
.user-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 4px;
border-bottom: 1px solid var(--bs-border-color);
}
.user-row:last-child {
border-bottom: 0;
}
.user-row-body {
min-width: 0;
flex: 1;
}
.user-row-body h6 {
font-size: 14px;
font-weight: 600;
margin: 0;
}
.user-row-body span {
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ============================================================
AUDIT TIMELINE
============================================================ */
.roles-timeline {
position: relative;
padding-left: 26px;
}
.roles-timeline::before {
content: "";
position: absolute;
left: 8px;
top: 4px;
bottom: 4px;
width: 2px;
background: var(--bs-border-color);
}
.roles-timeline-item {
position: relative;
padding-bottom: 18px;
}
.roles-timeline-item:last-child {
padding-bottom: 0;
}
.roles-timeline-dot {
position: absolute;
left: -26px;
top: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #fff;
background: var(--bs-primary);
}
.roles-timeline-item p {
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--bs-body-color, #1f2937);
}
.roles-timeline-item .roles-timeline-meta {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* ============================================================
SECURITY PANEL
============================================================ */
.score-block {
position: relative;
width: 130px;
height: 130px;
margin: 0 auto;
border-radius: 50%;
display: grid;
place-items: center;
background: radial-gradient(closest-side, var(--bs-body-bg) 78%, transparent 79% 100%), conic-gradient(var(--bs-success) var(--score-block, 82%), var(--bs-border-color) 0);
}
.score-value {
font-size: 30px;
font-weight: 800;
line-height: 1;
color: var(--bs-heading-color, #111827);
}
.score-label {
font-size: 11px;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.section-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 0;
border-bottom: 1px solid var(--bs-border-color);
font-size: 13px;
}
.section-row:last-child {
border-bottom: 0;
}
.section-row .section-label {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--bs-secondary-color);
}
.section-row .section-label i {
font-size: 16px;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 991.98px) {
.directory-list {
max-height: 360px;
}
}
/* ============================================================
DARK MODE
============================================================ */
[data-bs-theme=dark] .role-card-name,
[data-bs-theme=dark] .user-row-body h6,
[data-bs-theme=dark] .score-value,
[data-bs-theme=dark] .roles-timeline-item p {
color: #e9edf5;
}
/* ============================================================
Delete Account Requests — Account Lifecycle Management
Adds only the page-specific pieces on top of the shared
.data-workspace / .data-table / card-* system: an approval
workflow stepper, a compliance warning panel and the
truncating reason cell. Never touches sidebar/header/shell.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.closure-page * {
animation: none !important;
transition: none !important;
}
}
/* ---------- Reason cell (truncates with tooltip + view) ---------- */
.closure-reason {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 190px;
}
.closure-reason .closure-reason-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ============================================================
APPROVAL WORKFLOW STEPPER
============================================================ */
.closure-flow {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.closure-step {
position: relative;
flex: 1 1 200px;
min-width: 140px;
padding: 14px 14px 14px 46px;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
@media (max-width: 991.98px) {
.closure-step {
flex: 1 1 195px;
}
}
.closure-step:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
}
.closure-step-icon {
position: absolute;
left: 12px;
top: 12px;
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #fff;
background: var(--bs-secondary-color);
}
.closure-step-title {
font-size: 13px;
font-weight: 600;
margin: 0;
color: var(--bs-heading-color, #111827);
}
.closure-step-meta {
font-size: 11px;
color: var(--bs-secondary-color);
margin: 2px 0 0;
}
.closure-step-review {
font-size: 11px;
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
}
.closure-step-review i {
font-size: 12px;
}
/* connector line between steps */
.closure-step::after {
content: "";
position: absolute;
right: -8px;
top: 25px;
width: 8px;
height: 2px;
background: var(--bs-border-color);
}
.closure-step:last-child::after {
display: none;
}
/* states */
.closure-step.is-done {
border-color: var(--tint-success);
background: linear-gradient(135deg, var(--tint-success), transparent 70%), var(--bs-body-bg);
}
.closure-step.is-done .closure-step-icon {
background: var(--bs-success);
}
.closure-step.is-active {
border-color: transparent;
box-shadow: 0 8px 22px var(--tint-primary);
background: linear-gradient(135deg, var(--tint-primary), transparent 70%), var(--bs-body-bg);
}
.closure-step.is-active .closure-step-icon {
background: var(--bs-primary);
animation: dar-pulse 1.8s ease-out infinite;
}
.closure-step.is-pending .closure-step-icon {
background: #cbd5e1;
}
@keyframes dar-pulse {
0% {
box-shadow: 0 0 0 0 var(--tint-primary);
}
70% {
box-shadow: 0 0 0 7px var(--tint-primary);
}
100% {
box-shadow: 0 0 0 0 var(--tint-primary);
}
}
/* ============================================================
COMPLIANCE WARNING PANEL
============================================================ */
.warning-panel {
border: 1px solid var(--tint-warning);
border-radius: 16px;
background: linear-gradient(135deg, var(--tint-warning), transparent 60%), var(--bs-body-bg);
overflow: hidden;
}
.warning-panel-head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border-bottom: 1px solid var(--tint-warning);
}
.warning-panel-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
background: linear-gradient(135deg, #f59e0b, var(--bs-warning));
box-shadow: 0 6px 16px var(--tint-warning);
}
.warning-panel-list {
padding: 8px 16px 16px;
margin: 0;
list-style: none;
}
.warning-panel-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
font-size: 13px;
color: var(--bs-body-color, #374151);
border-bottom: 1px solid var(--bs-border-color);
}
.warning-panel-list li:last-child {
border-bottom: 0;
}
.warning-panel-list li i {
font-size: 17px;
margin-top: 1px;
flex: 0 0 17px;
}
/* ============================================================
DARK MODE
============================================================ */
[data-bs-theme=dark] .closure-step-title {
color: #e9edf5;
}
[data-bs-theme=dark] .closure-step.is-pending .closure-step-icon {
background: #3a4252;
}
/* ============================================================
Membership Plans — Subscription & Billing Management
Adds the plan-grid, billing toggle, comparison, popularity
insights and promotion pieces on top of Bootstrap + the
shared card-* / data-table chrome and stats-card cards. Never
touches sidebar / header / shell.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.plan-page * {
animation: none !important;
transition: none !important;
}
}
/* Overview metric cards reuse the directory stat component, but the little
avatar "presence" dot only makes sense on people — hide it here. */
.plan-overview .stats-card-directory .stats-avatar::after {
content: none;
}
/* ============================================================
BILLING TOGGLE
============================================================ */
.billing-switch {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
border: 1px solid var(--bs-border-color);
border-radius: 999px;
background: var(--bs-body-bg);
box-shadow: var(--shadow);
}
.billing-switch h6 {
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-secondary-color);
transition: color var(--transition);
}
.billing-switch .form-check-input {
cursor: pointer;
}
.plan-page.is-yearly .billing-switch .billing-yearly,
.plan-page:not(.is-yearly) .billing-switch .billing-monthly {
color: var(--bs-primary);
}
/* price swap driven by the .is-yearly state on .plan-page */
.plan-page .price-yearly {
display: none;
}
.plan-page.is-yearly .price-monthly {
display: none;
}
.plan-page.is-yearly .price-yearly {
display: block;
}
/* ============================================================
PLAN GRID
============================================================ */
.plan-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 22px;
border: 1px solid var(--bs-border-color);
border-radius: 16px;
background: linear-gradient(180deg, var(--accent-soft, var(--tint-primary)), transparent 32%), var(--bs-body-bg);
box-shadow: var(--shadow);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
overflow: hidden;
}
.plan-card::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent, var(--bs-primary)), var(--accent-strong, #7b93ff));
}
.plan-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lift);
border-color: transparent;
}
.plan-card.is-popular {
border-color: transparent;
box-shadow: 0 0 0 2px var(--accent, var(--bs-success)), var(--shadow-lift);
}
.plan-card-badge {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, var(--accent, var(--bs-success)), var(--accent-strong, #4ade80));
box-shadow: 0 6px 14px var(--accent-soft, var(--tint-success));
}
.plan-card-icon {
width: 52px;
height: 52px;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #fff;
background: linear-gradient(135deg, var(--accent, var(--bs-primary)), var(--accent-strong, #7b93ff));
box-shadow: 0 8px 18px var(--accent-soft, var(--tint-primary));
margin-bottom: 14px;
}
.plan-card-name {
font-size: 18px;
font-weight: 700;
margin: 0;
color: var(--bs-heading-color, #111827);
}
.plan-card-desc {
font-size: 12.5px;
color: var(--bs-secondary-color);
margin: 4px 0 0;
min-height: 34px;
}
.price-block {
display: flex;
align-items: baseline;
gap: 4px;
margin: 14px 0 2px;
}
.price-block .plan-price-amount {
font-size: 32px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--bs-heading-color, #111827);
line-height: 1;
}
.price-block .plan-price-period {
font-size: 13px;
color: var(--bs-secondary-color);
}
.save-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
font-weight: 600;
color: #15803d;
background: var(--tint-success);
border-radius: 999px;
padding: 2px 9px;
}
/* subscriber + renewal mini-stats */
.plan-card-stats {
display: flex;
gap: 8px;
margin: 16px 0;
}
.plan-card-stat {
flex: 1;
padding: 10px;
border: 1px solid var(--bs-border-color);
border-radius: 10px;
background: var(--bs-secondary-bg);
text-align: center;
}
.plan-card-stat .plan-stat-value {
font-size: 16px;
font-weight: 700;
color: var(--bs-heading-color, #111827);
}
.plan-card-stat .plan-stat-label {
font-size: 10.5px;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.renew-note {
height: 6px;
border-radius: 999px;
background: var(--bs-secondary-bg);
overflow: hidden;
margin-top: 6px;
}
.renew-note > span {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent, var(--bs-primary)), var(--accent-strong, #7b93ff));
}
/* feature checklist */
.feature-row {
list-style: none;
padding: 0;
margin: 4px 0 18px;
}
.feature-row li {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 0;
font-size: 13px;
color: var(--bs-body-color, #374151);
}
.feature-row li i {
font-size: 16px;
flex: 0 0 16px;
}
.feature-row li.off {
color: var(--bs-secondary-color);
}
.feature-row li.off .feature-text {
text-decoration: line-through;
opacity: 0.8;
}
.feature-row .feature-yes {
color: var(--bs-success);
}
.feature-row .feature-no {
color: #cbd5e1;
}
/* limits chips */
.limit-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding: 12px;
border: 1px dashed var(--bs-border-color);
border-radius: 12px;
margin-bottom: 18px;
}
.limit-row {
display: flex;
flex-direction: column;
}
.limit-row .limit-value {
font-size: 14px;
font-weight: 700;
color: var(--bs-heading-color, #111827);
}
.limit-row .limit-label {
font-size: 11px;
color: var(--bs-secondary-color);
}
.plan-card-cta {
margin-top: auto;
}
/* accent variants */
.plan-accent-slate {
--accent: #475569;
--accent-strong: #94a3b8;
--accent-soft: rgba(71, 85, 105, .28);
}
.plan-accent-primary {
--accent: var(--bs-primary);
--accent-strong: #7b93ff;
--accent-soft: var(--tint-primary);
}
.plan-accent-success {
--accent: var(--bs-success);
--accent-strong: #4ade80;
--accent-soft: var(--tint-success);
}
.plan-accent-purple {
--accent: var(--accent-purple);
--accent-strong: #a78bfa;
--accent-soft: var(--tint-purple);
}
.plan-accent-amber {
--accent: var(--bs-warning);
--accent-strong: #fbbf24;
--accent-soft: var(--tint-warning);
}
.plan-accent-rose {
--accent: var(--bs-danger);
--accent-strong: #fb7185;
--accent-soft: var(--tint-danger);
}
/* ============================================================
POPULARITY INSIGHTS
============================================================ */
.insight-tile {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--bs-border-color);
}
.insight-tile:last-child {
border-bottom: 0;
}
.insight-tile-icon {
width: 40px;
height: 40px;
flex: 0 0 40px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 19px;
background: var(--accent-soft, var(--tint-primary));
color: var(--accent, var(--bs-primary));
}
.plan-icon-primary {
--accent: var(--bs-primary);
--accent-soft: var(--tint-primary);
}
.plan-icon-success {
--accent: var(--bs-success);
--accent-soft: var(--tint-success);
}
.plan-icon-purple {
--accent: var(--accent-purple);
--accent-soft: var(--tint-purple);
}
.plan-icon-amber {
--accent: var(--bs-warning);
--accent-soft: var(--tint-warning);
}
.plan-icon-rose {
--accent: var(--bs-danger);
--accent-soft: var(--tint-danger);
}
.insight-tile-body {
min-width: 0;
flex: 1;
}
.insight-tile-body p {
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-heading-color, #111827);
}
.insight-tile-body span {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.insight-tile-value {
font-size: 15px;
font-weight: 700;
}
/* ============================================================
COMPARISON MATRIX (sticky first column)
============================================================ */
.compare-table {
overflow-x: auto;
}
.compare-table table {
min-width: 720px;
margin: 0;
}
.compare-table th,
.compare-table td {
text-align: center;
padding: 12px 14px;
border-bottom: 1px solid var(--bs-border-color);
white-space: nowrap;
}
.compare-table thead th {
font-size: 13px;
font-weight: 700;
}
.compare-table tbody th,
.compare-table tbody td:first-child {
position: sticky;
left: 0;
z-index: 2;
text-align: left;
background: var(--bs-body-bg);
font-weight: 500;
font-size: 13px;
}
.compare-table .compare-yes {
color: var(--bs-success);
font-size: 18px;
}
.compare-table .compare-no {
color: #cbd5e1;
font-size: 16px;
}
/* ============================================================
PROMOTIONS + SIDEBAR WIDGETS
============================================================ */
.promo-banner {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
border: 1px solid var(--bs-border-color);
border-radius: 14px;
background: var(--bs-body-bg);
height: 100%;
transition: transform var(--transition), box-shadow var(--transition);
}
.promo-banner:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
}
.promo-banner-icon {
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
background: var(--accent-soft, var(--tint-primary));
color: var(--accent, var(--bs-primary));
}
.promo-banner-body h6 {
margin: 0;
font-size: 14px;
font-weight: 600;
}
.promo-banner-body p {
margin: 2px 0 0;
font-size: 12px;
color: var(--bs-secondary-color);
}
.widget-row {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid var(--bs-border-color);
}
.widget-row:last-child {
border-bottom: 0;
}
.widget-row .widget-row-body {
min-width: 0;
flex: 1;
}
.widget-row .widget-row-body p {
margin: 0;
font-size: 13px;
font-weight: 500;
}
.widget-row .widget-row-body span {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 575.98px) {
.limit-list {
grid-template-columns: 1fr;
}
}
/* ============================================================
DARK MODE
============================================================ */
[data-bs-theme=dark] .plan-card-name,
[data-bs-theme=dark] .price-block .plan-price-amount,
[data-bs-theme=dark] .plan-card-stat .plan-stat-value,
[data-bs-theme=dark] .limit-row .limit-value,
[data-bs-theme=dark] .insight-tile-body p,
[data-bs-theme=dark] .compare-table thead th {
color: #e9edf5;
}
[data-bs-theme=dark] .compare-table tbody th,
[data-bs-theme=dark] .compare-table tbody td:first-child {
background: var(--bs-body-bg);
}
/* ============================================================
Membership Add-ons — Feature Marketplace
Marketplace cards + bundles for the add-ons page. Reuses the
mp-* tokens/components (insights, comparison, widgets) — the
page wraps in `.mp-page` so those variables resolve — and adds
only the marketplace-specific card and bundle styles here.
Never touches sidebar / header / shell.
============================================================ */
/* ============================================================
MARKETPLACE CARD
============================================================ */
.addon-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 18px;
border: 1px solid var(--bs-border-color);
border-radius: 16px;
background: linear-gradient(160deg, var(--accent-soft, var(--tint-primary)), transparent 30%), var(--bs-body-bg);
box-shadow: var(--shadow);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
width: 100%;
}
.addon-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lift);
border-color: transparent;
}
.addon-card:has(.dropdown-menu.show) {
z-index: 5;
}
.addon-card .dropdown-menu {
z-index: 1050;
}
.addon-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.addon-card-icon {
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 23px;
color: #fff;
background: linear-gradient(135deg, var(--accent, var(--bs-primary)), var(--accent-strong, #7b93ff));
box-shadow: 0 6px 16px var(--accent-soft, var(--tint-primary));
}
.addon-card-popular {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 9px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
color: #b45309;
background: var(--tint-warning);
}
.addon-card-name {
font-size: 15px;
font-weight: 700;
margin: 0;
color: var(--bs-heading-color, #111827);
display: flex;
align-items: center;
gap: 6px;
}
.addon-card-desc {
font-size: 12.5px;
color: var(--bs-secondary-color);
margin: 5px 0 12px;
min-height: 36px;
}
.addon-card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.addon-card-meta {
display: flex;
align-items: center;
gap: 6px 14px;
flex-wrap: wrap;
font-size: 11.5px;
color: var(--bs-secondary-color);
margin-bottom: 14px;
}
.addon-card-meta span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.addon-card-meta i {
font-size: 14px;
}
.addon-card-price {
display: flex;
align-items: baseline;
gap: 4px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
.addon-card-price .price-amount {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--bs-heading-color, #111827);
line-height: 1;
}
.addon-card-price .price-period {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.addon-card-price .price-free {
font-size: 18px;
font-weight: 800;
color: var(--bs-success);
}
.addon-card-cta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
}
/* active / installed ribbon corner */
.addon-card.is-installed::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 16px 16px 0 0;
background: linear-gradient(90deg, var(--bs-success), #4ade80);
}
/* ============================================================
FEATURE BUNDLES
============================================================ */
.bundle-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
border: 1px solid var(--bs-border-color);
border-radius: 16px;
background: linear-gradient(135deg, var(--accent-soft, var(--tint-primary)), transparent 45%), var(--bs-body-bg);
box-shadow: var(--shadow);
transition: transform var(--transition), box-shadow var(--transition);
width: 100%;
}
.bundle-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
}
.bundle-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.bundle-icon {
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
background: linear-gradient(135deg, var(--accent, var(--bs-primary)), var(--accent-strong, #7b93ff));
box-shadow: 0 8px 18px var(--accent-soft, var(--tint-primary));
}
.bundle-name {
font-size: 16px;
font-weight: 700;
margin: 0;
color: var(--bs-heading-color, #111827);
}
.bundle-sub {
font-size: 12px;
color: var(--bs-secondary-color);
}
.bundle-features {
list-style: none;
padding: 0;
margin: 0 0 14px;
}
.bundle-features li {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0;
font-size: 13px;
color: var(--bs-body-color, #374151);
}
.bundle-features li i {
font-size: 15px;
color: var(--bs-success);
}
.bundle-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.bundle-foot {
flex-direction: column;
align-items: start;
gap: 12px;
}
}
.bundle-discount {
font-size: 20px;
font-weight: 800;
color: var(--accent, var(--bs-primary));
line-height: 1;
}
.bundle-discount small {
display: block;
font-size: 11px;
font-weight: 500;
color: var(--bs-secondary-color);
}
/* ============================================================
DARK MODE (tokens come from .mp-page dark overrides)
============================================================ */
[data-bs-theme=dark] .addon-card-name,
[data-bs-theme=dark] .addon-card-price .price-amount,
[data-bs-theme=dark] .bundle-name {
color: #e9edf5;
}
/* ============================================================
Class Time Table — Premium Academic Scheduling Workspace
Adds the scheduling grid, sticky day headers, premium schedule
cards and hover quick-actions on top of Bootstrap + the shared
card / toolbar chrome. Reuses the existing bg-transparent-*
colour system as the subject colour indicator — never touches
the palette, sidebar, header or page shell.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.timetable-page * {
transition: none !important;
animation: none !important;
}
}
/* ---- Academic header facts ---- */
.stat-fact {
display: flex;
align-items: center;
gap: 10px;
}
.stat-fact-icon {
width: 38px;
height: 38px;
border-radius: 10px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 19px;
}
.stat-fact-value {
font-weight: 600;
line-height: 1.1;
color: var(--bs-heading-color, #1f2937);
}
.stat-fact-label {
font-size: 0.74rem;
color: var(--bs-secondary-color);
}
/* ---- Scheduling grid ---- */
.timetable-grid {
display: flex;
gap: 14px;
overflow-x: auto;
padding-bottom: 8px;
}
.timetable-day {
flex: 1 0 240px;
min-width: 240px;
display: flex;
flex-direction: column;
gap: 12px;
}
.timetable-day-head {
position: sticky;
top: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-radius: var(--radius-sm);
background: var(--bs-tertiary-bg, #f7f8fc);
border: 1px solid var(--bs-border-color);
font-weight: 600;
color: var(--bs-heading-color, #1f2937);
}
.timetable-day-head .timetable-day-count {
font-size: 0.72rem;
font-weight: 600;
color: var(--bs-secondary-color);
background: var(--bs-card-bg, #fff);
border-radius: 999px;
padding: 2px 9px;
}
/* ---- Premium schedule card (colour comes from the reused bg-transparent-* class) ---- */
.timetable-slot {
position: relative;
border-radius: var(--radius-sm);
padding: 14px;
transition: transform var(--transition), box-shadow var(--transition);
}
.timetable-slot:hover {
transform: translateY(-3px);
box-shadow: 0 0.5rem 1.25rem rgba(17, 24, 39, 0.12);
}
.timetable-slot:focus-within {
box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.3);
}
.timetable-slot-icon {
width: 34px;
height: 34px;
border-radius: 9px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: var(--bs-card-bg, #fff);
}
.timetable-slot-time {
font-size: 0.74rem;
font-weight: 600;
color: var(--bs-heading-color, #1f2937);
}
.timetable-slot-sub {
font-weight: 600;
color: var(--bs-heading-color, #1f2937);
line-height: 1.2;
}
.timetable-slot-meta {
font-size: 0.74rem;
color: var(--bs-secondary-color);
}
/* hover / keyboard quick actions */
.toolbar-actions {
position: absolute;
top: 10px;
right: 10px;
opacity: 0;
transform: translateY(-4px);
transition: opacity var(--transition), transform var(--transition);
}
.timetable-slot:hover .toolbar-actions,
.timetable-slot:focus-within .toolbar-actions {
opacity: 1;
transform: none;
}
@media (hover: none) {
.toolbar-actions {
opacity: 1;
transform: none;
}
}
/* teacher chip on a soft card sits on white for contrast */
.timetable-slot-teacher {
background: var(--bs-card-bg, #fff);
border-radius: 8px;
}
/* ---- Special period cards ---- */
.timetable-special {
border: 1px dashed var(--bs-border-color);
border-radius: var(--radius-sm);
transition: box-shadow var(--transition), transform var(--transition);
}
.timetable-special:hover {
transform: translateY(-2px);
box-shadow: 0 0.35rem 0.9rem rgba(17, 24, 39, 0.08);
}
/* ---- Empty state ---- */
.empty-state-art {
width: 116px;
height: 116px;
margin: 0 auto 18px;
border-radius: 26px;
display: flex;
align-items: center;
justify-content: center;
font-size: 52px;
color: var(--bs-primary);
background: rgba(var(--bs-primary-rgb), 0.1);
}
/* ---- List view: stack days as full-width rows ---- */
.timetable-grid.timetable-list {
flex-direction: column;
}
.timetable-grid.timetable-list .timetable-day {
min-width: 100%;
}
.timetable-grid.timetable-list .timetable-day-head {
position: static;
}
/* ---- Responsive: stack days as full-width schedule cards on mobile ---- */
@media (max-width: 767.98px) {
.timetable-grid {
flex-direction: column;
}
.timetable-day {
min-width: 100%;
}
.timetable-day-head {
position: static;
}
}
/* ============================================================
Curriculum — Premium Academic Curriculum Management Workspace
Three-panel layout helpers. Everything visual that Bootstrap
utilities + existing PreSkool components already cover is NOT
redefined here — this partial only adds the sticky panels,
the nav rail, the animated progress and a couple of tiles.
============================================================ */
.curriculum-page {
/* ---- Sticky side panels (desktop only) ---- */
}
@media (min-width: 992px) {
.curriculum-page .curriculum-sticky {
position: sticky;
top: 1rem;
max-height: calc(100vh - 9rem);
overflow-y: auto;
overflow-x: hidden;
}
}
.curriculum-page {
/* thin, unobtrusive scrollbar for the rails */
}
.curriculum-page .curriculum-sticky::-webkit-scrollbar {
width: 6px;
}
.curriculum-page .curriculum-sticky::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.12);
border-radius: 20px;
}
.curriculum-page {
/* ---- Left navigation rail ---- */
}
.curriculum-page .curriculum-nav-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.curriculum-page .curriculum-nav .list-group-item {
border: 0;
padding: 0.45rem 0.65rem;
border-radius: 0.5rem;
font-size: 13px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.curriculum-page .curriculum-nav .list-group-item .curriculum-nav-icon {
width: 18px;
text-align: center;
}
.curriculum-page {
/* ---- Explorer cards ---- */
}
.curriculum-page .curriculum-card {
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.curriculum-page .curriculum-card.active {
border-color: var(--bs-primary);
box-shadow: 0 0 0 1px var(--bs-primary);
}
.curriculum-page .curriculum-card .curriculum-card-extra {
transition: max-height 0.25s ease, opacity 0.2s ease;
}
.curriculum-page {
/* Grid / list view of the explorer */
}
.curriculum-page .curriculum-explorer.is-list .col-cur {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.curriculum-page .curriculum-explorer.is-list .curriculum-card .card-body {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.curriculum-page .curriculum-explorer.is-list .curriculum-card .curriculum-card-extra {
display: none !important;
}
.curriculum-page {
/* ---- Animated progress ---- */
}
.curriculum-page .curriculum-progress .progress-bar {
transition: width 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.curriculum-page {
/* ---- Resource tile ---- */
}
.curriculum-page .resource-row {
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.curriculum-page .resource-row:hover {
border-color: var(--bs-primary) !important;
}
.curriculum-page .resource-row .resource-actions {
opacity: 0;
transition: opacity 0.2s ease;
}
.curriculum-page .resource-row:hover .resource-actions {
opacity: 1;
}
@media (max-width: 767.98px) {
.curriculum-page .resource-row .resource-actions {
opacity: 1;
}
}
.curriculum-page {
/* ---- Structure accordion progress ---- */
}
.curriculum-page .structure-row .accordion-button {
font-size: 13px;
font-weight: 600;
}
.curriculum-page .structure-row .accordion-button:not(.collapsed) {
background: var(--bs-primary-bg-subtle, rgba(63, 81, 181, 0.08));
}
.curriculum-page .structure-row .structure-meta {
font-size: 12px;
}
.curriculum-page {
/* ---- Empty state ---- */
}
.curriculum-page .curriculum-empty {
padding: 3rem 1rem;
}
.curriculum-page .curriculum-empty .curriculum-empty-icon {
width: 84px;
height: 84px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
/* ---- Dark theme niceties ---- */
[data-theme=dark] .curriculum-page .curriculum-sticky::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.16);
}
.layout-box-mode {
background: #FBFBFD;
}
.layout-box-mode .main-wrapper {
max-width: 1350px;
margin: auto;
}
@media (max-width: 1399.98px) {
.layout-box-mode .main-wrapper {
max-width: 1170px;
}
}
@media (max-width: 1199.98px) {
.layout-box-mode .main-wrapper {
max-width: 950px;
}
}
@media (max-width: 991.98px) {
.layout-box-mode .main-wrapper {
max-width: 100%;
}
}
.layout-box-mode .header {
max-width: 1350px;
margin: auto;
}
@media (max-width: 1399.98px) {
.layout-box-mode .header {
max-width: 1170px;
}
}
@media (max-width: 1199.98px) {
.layout-box-mode .header {
max-width: 950px;
}
}
@media (max-width: 991.98px) {
.layout-box-mode .header {
max-width: 100%;
}
}
.layout-box-mode .sidebar {
left: unset;
}
@media (max-width: 991.98px) {
.layout-box-mode .page-wrapper .content {
padding-right: 15px;
}
}
body.layout-mode-rtl {
direction: rtl;
}
body.layout-mode-rtl .sidebar {
right: 0;
left: unset;
border-right: 0;
border-left: 1px solid #E9EDF4;
}
body.layout-mode-rtl .sidebar .sidebar-menu > ul > li ul li a span {
margin-right: 10px;
margin-left: 0;
}
body.layout-mode-rtl .sidebar .sidebar-menu .menu-arrow {
left: 10px;
right: unset;
}
body.layout-mode-rtl .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
margin-right: 8px;
margin-left: 0;
}
body.layout-mode-rtl .header-left {
float: right;
border-right: 0;
border-left: 1px solid #E9EDF4;
}
body.layout-mode-rtl .page-wrapper {
margin-right: 280px;
margin-left: 0;
}
body.layout-mode-rtl.mini-sidebar .page-wrapper {
margin-right: 80px;
}
body.layout-mode-rtl .header .date-range {
padding-right: 30px !important;
padding-left: 10px !important;
}
body.layout-mode-rtl .header .cal-icon {
right: 10px;
left: unset;
}
body.layout-mode-rtl .header .searchinputs input {
padding-left: 45px;
padding-right: 10px;
}
body.layout-mode-rtl .header .search-addon button {
left: 16px;
right: unset;
}
[data-topbar=primary] .header {
background: #3D5EE1;
border-bottom-color: #778EEA;
}
[data-topbar=primary] .header .dark-logo {
display: block;
}
[data-topbar=primary] .header .logo-normal {
display: none;
}
[data-topbar=primary] .header #toggle_btn {
color: #FFF;
}
[data-topbar=primary] .header .bg-white {
background: transparent !important;
}
[data-topbar=primary] .header .btn-outline-light {
color: #FFF !important;
border-color: #778EEA !important;
}
[data-topbar=primary] .header .header-left {
background: #3D5EE1;
border-color: #778EEA;
}
[data-topbar=primary] .header .searchinputs input {
background: #3D5EE1;
color: #FFF;
border-color: #778EEA;
}
[data-topbar=primary] .header .searchinputs input::placeholder {
color: #FFF;
}
[data-topbar=primary] .header .searchinputs .search-addon button {
background: #3D5EE1;
color: #FFF;
}
@media (min-width: 992px) {
[data-topbar=primary] .mini-sidebar .header-left .dark-logo {
display: none;
}
[data-topbar=primary] .mini-sidebar.expand-menu .dark-logo {
display: block;
}
}
[data-sidebar=dark] .sidebar {
background: #0F0C1C;
border-color: #1B1632;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
background: #1B1632;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop {
background: #1B1632;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li.active a span {
color: #3D5EE1;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a span,
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a i {
color: #3D5EE1;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a {
color: #B9B7C0;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a:hover, [data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a.active {
color: #3D5EE1;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a i {
background: #1B1632;
color: #B9B7C0;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li a span {
color: #B9B7C0;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li.active a {
background: #1B1632;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a {
color: #B9B7C0;
}
[data-sidebar=dark] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active {
color: #3D5EE1;
}
[data-sidebar=primary] .sidebar {
background: #3D5EE1;
border-color: #1B1632;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li .submenu-hdr {
color: #FFF;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
background: #ECEFFC;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop {
background: #778EEA;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop span {
color: #FFF;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li .submenu a.active .menu-arrow::before {
border-color: #ECEFFC;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li.active a span {
color: #FFF;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li.active a span,
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li.active a i {
color: #3D5EE1;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li a {
color: #C5CFF6;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li a:hover, [data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li a.active {
color: #FFF;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li a i {
background: #ECEFFC;
color: #3D5EE1;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li a span {
color: #C5CFF6;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li.active a {
background: #778EEA;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a {
color: #C5CFF6;
}
[data-sidebar=primary] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active {
color: #3D5EE1;
}
[data-sidebar=darkblack] .sidebar {
background: #39435F;
border-color: #1B1632;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li .submenu-hdr {
color: #FFF;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
background: #ECEFFC;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop {
background: #778EEA;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop span {
color: #FFF;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li .submenu a.active .menu-arrow::before {
border-color: #ECEFFC;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li.active a span {
color: #FFF;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li.active a span,
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li.active a i {
color: #3D5EE1;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li a {
color: #C5CFF6;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li a:hover, [data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li a.active {
color: #FFF;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li a i {
background: #ECEFFC;
color: #3D5EE1;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li a span {
color: #C5CFF6;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li.active a {
background: #778EEA;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a {
color: #C5CFF6;
}
[data-sidebar=darkblack] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active {
color: #3D5EE1;
}
[data-sidebar=darkblue] .sidebar {
background: #07396D;
border-color: #1B1632;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li .submenu-hdr {
color: #FFF;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
background: #ECEFFC;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop {
background: #778EEA;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop span {
color: #FFF;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li .submenu a.active .menu-arrow::before {
border-color: #ECEFFC;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li.active a span {
color: #FFF;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li.active a span,
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li.active a i {
color: #3D5EE1;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li a {
color: #C5CFF6;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li a:hover, [data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li a.active {
color: #FFF;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li a i {
background: #ECEFFC;
color: #3D5EE1;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li a span {
color: #C5CFF6;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li.active a {
background: #778EEA;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a {
color: #C5CFF6;
}
[data-sidebar=darkblue] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active {
color: #3D5EE1;
}
[data-topbar=dark] .header {
background: #0F0C1C;
border-bottom-color: #1B1632;
}
[data-topbar=dark] .header .dark-logo {
display: block;
}
[data-topbar=dark] .header .logo-normal {
display: none;
}
[data-topbar=dark] .header .header-left {
background: #0F0C1C;
border-color: #1B1632;
}
[data-topbar=dark] .header .searchinputs input {
background: #131022;
border-color: #1B1632;
color: #B9B7C0;
}
[data-topbar=dark] .header .searchinputs .search-addon button {
background: #1B1632;
color: rgba(185, 183, 192, 0.5019607843);
}
[data-topbar=dark] .header .bg-white {
background: #131022 !important;
}
[data-topbar=dark] .header .btn-outline-light {
border-color: #1B1632 !important;
color: #B9B7C0 !important;
}
[data-topbar=dark] .header #toggle_btn {
color: #B9B7C0;
}
@media (min-width: 992px) {
[data-topbar=dark] .mini-sidebar .header-left .dark-logo {
display: none;
}
[data-topbar=dark] .mini-sidebar.expand-menu .dark-logo {
display: block;
}
}
[data-topbar=grey] .header {
background: #EFEFF2;
border-bottom-color: #EFEFF2;
}
[data-topbar=grey] .header .dark-logo {
display: none;
}
[data-topbar=grey] .header .logo-normal {
display: block;
}
[data-topbar=grey] .header .header-left {
background: #EFEFF2;
border-color: #B9B7C0;
}
[data-topbar=grey] .header .searchinputs input {
background: #EFEFF2;
border-color: rgba(185, 183, 192, 0.5019607843);
color: #B9B7C0;
}
[data-topbar=grey] .header .searchinputs .search-addon button {
background: rgba(185, 183, 192, 0.5019607843);
color: #1B1632;
}
[data-topbar=grey] .header .bg-white {
background: rgba(185, 183, 192, 0.5019607843) !important;
}
[data-topbar=grey] .header .btn-outline-light {
border-color: rgba(185, 183, 192, 0.5019607843) !important;
color: #1B1632 !important;
}
[data-topbar=grey] .header #toggle_btn {
color: #B9B7C0;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg1] .sidebar {
background-image: url(../img/theme/bg-01.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-color: transparent;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg1] .sidebar .sidebar-menu {
background: rgba(255, 255, 255, 0.85);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg1] .sidebar {
background-image: url(../img/theme/bg-01.jpg);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg1] .sidebar .sidebar-menu {
background: rgba(0, 0, 0, 0.85);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg1] .sidebar {
background-image: url(../img/theme/bg-01.jpg);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg1] .sidebar .sidebar-menu {
background: rgba(80, 110, 228, 0.85);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg1] .sidebar {
background-image: url(../img/theme/bg-01.jpg);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg1] .sidebar .sidebar-menu {
background: rgba(7, 57, 109, 0.85);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg1] .sidebar {
background-image: url(../img/theme/bg-01.jpg);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg1] .sidebar .sidebar-menu {
background: rgba(57, 67, 95, 0.85);
}
[data-sidebar=light] [data-sidebarbg=sidebarbg2] .sidebar {
background-image: url(../img/theme/bg-02.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-color: transparent;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg2] .sidebar .sidebar-menu {
background: rgba(255, 255, 255, 0.85);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg2] .sidebar {
background-image: url(../img/theme/bg-02.jpg);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg2] .sidebar .sidebar-menu {
background: rgba(0, 0, 0, 0.85);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg2] .sidebar {
background-image: url(../img/theme/bg-02.jpg);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg2] .sidebar .sidebar-menu {
background: rgba(80, 110, 228, 0.85);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg2] .sidebar {
background-image: url(../img/theme/bg-02.jpg);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg2] .sidebar .sidebar-menu {
background: rgba(7, 57, 109, 0.85);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg2] .sidebar {
background-image: url(../img/theme/bg-02.jpg);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg2] .sidebar .sidebar-menu {
background: rgba(57, 67, 95, 0.85);
}
[data-sidebar=light] [data-sidebarbg=sidebarbg3] .sidebar {
background-image: url(../img/theme/bg-03.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-color: transparent;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg3] .sidebar .sidebar-menu {
background: rgba(255, 255, 255, 0.85);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg3] .sidebar {
background-image: url(../img/theme/bg-03.jpg);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg3] .sidebar .sidebar-menu {
background: rgba(0, 0, 0, 0.85);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg3] .sidebar {
background-image: url(../img/theme/bg-03.jpg);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg3] .sidebar .sidebar-menu {
background: rgba(80, 110, 228, 0.85);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg3] .sidebar {
background-image: url(../img/theme/bg-03.jpg);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg3] .sidebar .sidebar-menu {
background: rgba(7, 57, 109, 0.85);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg3] .sidebar {
background-image: url(../img/theme/bg-03.jpg);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg3] .sidebar .sidebar-menu {
background: rgba(57, 67, 95, 0.85);
}
[data-sidebar=light] [data-sidebarbg=sidebarbg4] .sidebar {
background-image: url(../img/theme/bg-04.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-color: transparent;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg4] .sidebar .sidebar-menu {
background: rgba(255, 255, 255, 0.85);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg4] .sidebar {
background-image: url(../img/theme/bg-04.jpg);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg4] .sidebar .sidebar-menu {
background: rgba(0, 0, 0, 0.85);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg4] .sidebar {
background-image: url(../img/theme/bg-04.jpg);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg4] .sidebar .sidebar-menu {
background: rgba(80, 110, 228, 0.85);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg4] .sidebar {
background-image: url(../img/theme/bg-04.jpg);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg4] .sidebar .sidebar-menu {
background: rgba(7, 57, 109, 0.85);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg4] .sidebar {
background-image: url(../img/theme/bg-04.jpg);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg4] .sidebar .sidebar-menu {
background: rgba(57, 67, 95, 0.85);
}
[data-sidebar=light] [data-sidebarbg=sidebarbg5] .sidebar {
background-image: url(../img/theme/bg-05.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-color: transparent;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg5] .sidebar .sidebar-menu {
background: rgba(255, 255, 255, 0.85);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg5] .sidebar {
background-image: url(../img/theme/bg-04.jpg);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg5] .sidebar .sidebar-menu {
background: rgba(0, 0, 0, 0.85);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg5] .sidebar {
background-image: url(../img/theme/bg-05.jpg);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg5] .sidebar .sidebar-menu {
background: rgba(80, 110, 228, 0.85);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg5] .sidebar {
background-image: url(../img/theme/bg-05.jpg);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg5] .sidebar .sidebar-menu {
background: rgba(7, 57, 109, 0.85);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg5] .sidebar {
background-image: url(../img/theme/bg-05.jpg);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg5] .sidebar .sidebar-menu {
background: rgba(57, 67, 95, 0.85);
}
[data-sidebar=light] [data-sidebarbg=sidebarbg6] .sidebar {
background-image: url(../img/theme/bg-06.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-color: transparent;
}
[data-sidebar=light] [data-sidebarbg=sidebarbg6] .sidebar .sidebar-menu {
background: rgba(255, 255, 255, 0.85);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg6] .sidebar {
background-image: url(../img/theme/bg-06.jpg);
}
[data-sidebar=dark] [data-sidebarbg=sidebarbg6] .sidebar .sidebar-menu {
background: rgba(0, 0, 0, 0.85);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg6] .sidebar {
background-image: url(../img/theme/bg-06.jpg);
}
[data-sidebar=primary] [data-sidebarbg=sidebarbg6] .sidebar .sidebar-menu {
background: rgba(80, 110, 228, 0.85);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg6] .sidebar {
background-image: url(../img/theme/bg-06.jpg);
}
[data-sidebar=darkblack] [data-sidebarbg=sidebarbg6] .sidebar .sidebar-menu {
background: rgba(7, 57, 109, 0.85);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg6] .sidebar {
background-image: url(../img/theme/bg-06.jpg);
}
[data-sidebar=darkblue] [data-sidebarbg=sidebarbg6] .sidebar .sidebar-menu {
background: rgba(57, 67, 95, 0.85);
}
[data-color=violet] .sidebar .sidebar-menu > ul > li ul li a:hover {
color: #673AB7;
}
[data-color=violet] .sidebar .sidebar-menu > ul > li ul li a:hover span {
color: #673AB7;
}
[data-color=violet] .sidebar .sidebar-menu > ul > li ul li a.active {
color: #673AB7;
}
[data-color=violet] .sidebar .sidebar-menu > ul > li ul li.active a span,
[data-color=violet] .sidebar .sidebar-menu > ul > li ul li.active a i {
color: #673AB7;
}
[data-color=violet] .sidebar .sidebar-menu > ul li .submenu > a.active {
color: #673AB7;
}
[data-color=violet] .sidebar .sidebar-menu > ul li .submenu > a.active i,
[data-color=violet] .sidebar .sidebar-menu > ul li .submenu > a.active span {
color: #673AB7;
}
[data-color=violet] .sidebar .sidebar-menu > ul li .submenu > a.active .menu-arrow::before {
border-color: #673AB7;
}
[data-color=violet] .btn-primary {
background-color: #673AB7;
border: 1px solid #673AB7;
}
[data-color=violet] .btn-primary:hover, [data-color=violet] .btn-primary:focus, [data-color=violet] .btn-primary.focus, [data-color=violet] .btn-primary:active, [data-color=violet] .btn-primary.active {
background-color: rgb(87.7423236515, 49.4082987552, 155.8917012448);
border: 1px solid rgb(87.7423236515, 49.4082987552, 155.8917012448);
}
[data-color=violet] .btn-check:checked + .btn,
[data-color=violet] .btn.active,
[data-color=violet] .btn.show,
[data-color=violet] .btn.show:hover,
[data-color=violet] .btn:first-child:active,
[data-color=violet] :not(.btn-check) + .btn:active {
background-color: #673AB7;
border-color: #673AB7;
}
[data-color=violet] .link-primary {
color: #673AB7 !important;
}
[data-color=violet] .link-primary:hover, [data-color=violet] .link-primary:focus, [data-color=violet] .link-primary:active {
color: rgb(87.7423236515, 49.4082987552, 155.8917012448);
}
[data-color=violet] .text-primary {
color: #673AB7 !important;
}
[data-color=violet] .badge.badge-primary {
background: #673AB7;
}
[data-color=violet] .dataTables_paginate .pagination li.active a.page-link {
background: #673AB7;
border-color: #673AB7;
}
[data-color=violet] .bg-primary {
background-color: #673AB7 !important;
border: 1px solid #673AB7 !important;
}
[data-color=violet] .border-bottom.border-primary {
border-color: #673AB7 !important;
}
[data-color=violet] .border-primary {
border-color: #673AB7 !important;
}
[data-color=violet] .nav-tabs.nav-tabs-bottom li a.active,
[data-color=violet] .nav-tabs.nav-tabs-bottom li a:hover {
border-bottom-color: #673AB7;
color: #673AB7;
}
[data-color=violet] .badge.badge-soft-primary {
background: rgba(103, 58, 183, 0.1);
color: #673AB7;
}
[data-color=violet] a:hover {
color: #673AB7;
}
[data-color=violet] .btn-outline-primary {
border: 1px solid #673AB7 !important;
color: #673AB7 !important;
}
[data-color=violet] .btn-outline-primary:hover, [data-color=violet] .btn-outline-primary:focus, [data-color=violet] .btn-outline-primary.focus, [data-color=violet] .btn-outline-primary:active, [data-color=violet] .btn-outline-primary.active {
background-color: #673AB7 !important;
border: 1px solid #673AB7 !important;
}
[data-color=violet] .list-group a.active {
background: #ECEFFC;
color: #673AB7;
}
[data-color=violet] .list-group a:hover {
background: #ECEFFC;
color: #673AB7;
}
[data-color=violet] .badge-primary-hover:hover {
background: #673AB7 !important;
border-color: #673AB7 !important;
color: #FFF !important;
}
[data-color=violet] .main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn {
background: #673AB7;
}
[data-color=violet] .right-user-side .slime-grp .chat-footer form .send-chat a {
background: #673AB7;
}
[data-color=violet] .custom-pagination .paginations .page-wrap li a.active, [data-color=violet] .custom-pagination .paginations .page-wrap li a:hover {
background: #673AB7;
}
[data-color=violet] .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
border-color: #673AB7;
}
[data-color=violet] .select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #673AB7;
}
[data-color=violet] .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a.active {
background-color: #673AB7;
border-color: #673AB7;
}
[data-color=violet] .nav-tabs .nav-link:hover {
color: #673AB7;
}
[data-color=violet] .form-check-input:checked {
background-color: #673AB7;
border-color: #673AB7;
}
[data-color=violet] .profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn span {
color: #673AB7;
}
[data-color=violet] .sidebar-contact .toggle-theme {
background-color: #673AB7;
}
[data-color=violet] .primary-hover:hover {
background: #673AB7 !important;
color: #FFF;
}
[data-color=pink] .sidebar .sidebar-menu > ul > li ul li a:hover {
color: #E83E8C;
}
[data-color=pink] .sidebar .sidebar-menu > ul > li ul li a:hover span {
color: #E83E8C;
}
[data-color=pink] .sidebar .sidebar-menu > ul > li ul li a.active {
color: #E83E8C;
}
[data-color=pink] .sidebar .sidebar-menu > ul > li ul li.active a span,
[data-color=pink] .sidebar .sidebar-menu > ul > li ul li.active a i {
color: #E83E8C;
}
[data-color=pink] .sidebar .sidebar-menu > ul li .submenu > a.active {
color: #E83E8C;
}
[data-color=pink] .sidebar .sidebar-menu > ul li .submenu > a.active i,
[data-color=pink] .sidebar .sidebar-menu > ul li .submenu > a.active span {
color: #E83E8C;
}
[data-color=pink] .sidebar .sidebar-menu > ul li .submenu > a.active .menu-arrow::before {
border-color: #E83E8C;
}
[data-color=pink] .btn-primary {
background-color: #E83E8C;
border: 1px solid #E83E8C;
}
[data-color=pink] .btn-primary:hover, [data-color=pink] .btn-primary:focus, [data-color=pink] .btn-primary.focus, [data-color=pink] .btn-primary:active, [data-color=pink] .btn-primary.active {
background-color: rgb(228.1986111111, 30.1013888889, 120.9930555556);
border: 1px solid rgb(228.1986111111, 30.1013888889, 120.9930555556);
}
[data-color=pink] .btn-check:checked + .btn,
[data-color=pink] .btn.active,
[data-color=pink] .btn.show,
[data-color=pink] .btn.show:hover,
[data-color=pink] .btn:first-child:active,
[data-color=pink] :not(.btn-check) + .btn:active {
background-color: #E83E8C;
border-color: #E83E8C;
}
[data-color=pink] .link-primary {
color: #E83E8C !important;
}
[data-color=pink] .link-primary:hover, [data-color=pink] .link-primary:focus, [data-color=pink] .link-primary:active {
color: rgb(228.1986111111, 30.1013888889, 120.9930555556);
}
[data-color=pink] .text-primary {
color: #E83E8C !important;
}
[data-color=pink] .badge.badge-primary {
background: #E83E8C;
}
[data-color=pink] .dataTables_paginate .pagination li.active a.page-link {
background: #E83E8C;
border-color: #E83E8C;
}
[data-color=pink] .bg-primary {
background-color: #E83E8C !important;
border: 1px solid #E83E8C !important;
}
[data-color=pink] .border-bottom.border-primary {
border-color: #E83E8C !important;
}
[data-color=pink] .border-primary {
border-color: #E83E8C !important;
}
[data-color=pink] .nav-tabs.nav-tabs-bottom li a.active,
[data-color=pink] .nav-tabs.nav-tabs-bottom li a:hover {
border-bottom-color: #E83E8C;
color: #E83E8C;
}
[data-color=pink] .badge.badge-soft-primary {
background: rgba(232, 62, 140, 0.1);
color: #E83E8C;
}
[data-color=pink] a:hover {
color: #E83E8C;
}
[data-color=pink] .btn-outline-primary {
border: 1px solid #E83E8C !important;
color: #E83E8C !important;
}
[data-color=pink] .btn-outline-primary:hover, [data-color=pink] .btn-outline-primary:focus, [data-color=pink] .btn-outline-primary.focus, [data-color=pink] .btn-outline-primary:active, [data-color=pink] .btn-outline-primary.active {
background-color: #E83E8C !important;
border: 1px solid #E83E8C !important;
}
[data-color=pink] .list-group a.active {
background: #ECEFFC;
color: #E83E8C;
}
[data-color=pink] .list-group a:hover {
background: #ECEFFC;
color: #E83E8C;
}
[data-color=pink] .badge-primary-hover:hover {
background: #E83E8C !important;
border-color: #E83E8C !important;
color: #FFF !important;
}
[data-color=pink] .main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn {
background: #E83E8C;
}
[data-color=pink] .right-user-side .slime-grp .chat-footer form .send-chat a {
background: #E83E8C;
}
[data-color=pink] .custom-pagination .paginations .page-wrap li a.active, [data-color=pink] .custom-pagination .paginations .page-wrap li a:hover {
background: #E83E8C;
}
[data-color=pink] .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
border-color: #E83E8C;
}
[data-color=pink] .select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #E83E8C;
}
[data-color=pink] .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a.active {
background-color: #E83E8C;
border-color: #E83E8C;
}
[data-color=pink] .nav-tabs .nav-link:hover {
color: #E83E8C;
}
[data-color=pink] .form-check-input:checked {
background-color: #E83E8C;
border-color: #E83E8C;
}
[data-color=pink] .profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn span {
color: #E83E8C;
}
[data-color=pink] .sidebar-contact .toggle-theme {
background-color: #E83E8C;
}
[data-color=pink] .primary-hover:hover {
background: #E83E8C !important;
color: #FFF;
}
[data-color=orange] .sidebar .sidebar-menu > ul > li ul li a:hover {
color: #FD7E14;
}
[data-color=orange] .sidebar .sidebar-menu > ul > li ul li a:hover span {
color: #FD7E14;
}
[data-color=orange] .sidebar .sidebar-menu > ul > li ul li a.active {
color: #FD7E14;
}
[data-color=orange] .sidebar .sidebar-menu > ul > li ul li.active a span,
[data-color=orange] .sidebar .sidebar-menu > ul > li ul li.active a i {
color: #FD7E14;
}
[data-color=orange] .sidebar .sidebar-menu > ul li .submenu > a.active {
color: #FD7E14;
}
[data-color=orange] .sidebar .sidebar-menu > ul li .submenu > a.active i,
[data-color=orange] .sidebar .sidebar-menu > ul li .submenu > a.active span {
color: #FD7E14;
}
[data-color=orange] .sidebar .sidebar-menu > ul li .submenu > a.active .menu-arrow::before {
border-color: #FD7E14;
}
[data-color=orange] .btn-primary {
background-color: #FD7E14;
border: 1px solid #FD7E14;
}
[data-color=orange] .btn-primary:hover, [data-color=orange] .btn-primary:focus, [data-color=orange] .btn-primary.focus, [data-color=orange] .btn-primary:active, [data-color=orange] .btn-primary.active {
background-color: rgb(235.2974683544, 108.1367088608, 2.0025316456);
border: 1px solid rgb(235.2974683544, 108.1367088608, 2.0025316456);
}
[data-color=orange] .btn-check:checked + .btn,
[data-color=orange] .btn.active,
[data-color=orange] .btn.show,
[data-color=orange] .btn.show:hover,
[data-color=orange] .btn:first-child:active,
[data-color=orange] :not(.btn-check) + .btn:active {
background-color: #FD7E14;
border-color: #FD7E14;
}
[data-color=orange] .link-primary {
color: #FD7E14 !important;
}
[data-color=orange] .link-primary:hover, [data-color=orange] .link-primary:focus, [data-color=orange] .link-primary:active {
color: rgb(235.2974683544, 108.1367088608, 2.0025316456);
}
[data-color=orange] .text-primary {
color: #FD7E14 !important;
}
[data-color=orange] .badge.badge-primary {
background: #FD7E14;
}
[data-color=orange] .dataTables_paginate .pagination li.active a.page-link {
background: #FD7E14;
border-color: #FD7E14;
}
[data-color=orange] .bg-primary {
background-color: #FD7E14 !important;
border: 1px solid #FD7E14 !important;
}
[data-color=orange] .border-bottom.border-primary {
border-color: #FD7E14 !important;
}
[data-color=orange] .border-primary {
border-color: #FD7E14 !important;
}
[data-color=orange] .nav-tabs.nav-tabs-bottom li a.active,
[data-color=orange] .nav-tabs.nav-tabs-bottom li a:hover {
border-bottom-color: #FD7E14;
color: #FD7E14;
}
[data-color=orange] .badge.badge-soft-primary {
background: rgba(253, 126, 20, 0.1);
color: #FD7E14;
}
[data-color=orange] a:hover {
color: #FD7E14;
}
[data-color=orange] .btn-outline-primary {
border: 1px solid #FD7E14 !important;
color: #FD7E14 !important;
}
[data-color=orange] .btn-outline-primary:hover, [data-color=orange] .btn-outline-primary:focus, [data-color=orange] .btn-outline-primary.focus, [data-color=orange] .btn-outline-primary:active, [data-color=orange] .btn-outline-primary.active {
background-color: #FD7E14 !important;
border: 1px solid #FD7E14 !important;
}
[data-color=orange] .list-group a.active {
background: #ECEFFC;
color: #FD7E14;
}
[data-color=orange] .list-group a:hover {
background: #ECEFFC;
color: #FD7E14;
}
[data-color=orange] .badge-primary-hover:hover {
background: #FD7E14 !important;
border-color: #FD7E14 !important;
color: #FFF !important;
}
[data-color=orange] .main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn {
background: #FD7E14;
}
[data-color=orange] .right-user-side .slime-grp .chat-footer form .send-chat a {
background: #FD7E14;
}
[data-color=orange] .custom-pagination .paginations .page-wrap li a.active, [data-color=orange] .custom-pagination .paginations .page-wrap li a:hover {
background: #FD7E14;
}
[data-color=orange] .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
border-color: #FD7E14;
}
[data-color=orange] .select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #FD7E14;
}
[data-color=orange] .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a.active {
background-color: #FD7E14;
border-color: #FD7E14;
}
[data-color=orange] .nav-tabs .nav-link:hover {
color: #FD7E14;
}
[data-color=orange] .form-check-input:checked {
background-color: #FD7E14;
border-color: #FD7E14;
}
[data-color=orange] .profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn span {
color: #FD7E14;
}
[data-color=orange] .sidebar-contact .toggle-theme {
background-color: #FD7E14;
}
[data-color=orange] .primary-hover:hover {
background: #FD7E14 !important;
color: #FFF;
}
[data-color=green] .sidebar .sidebar-menu > ul > li ul li a:hover {
color: #2CA87F;
}
[data-color=green] .sidebar .sidebar-menu > ul > li ul li a:hover span {
color: #2CA87F;
}
[data-color=green] .sidebar .sidebar-menu > ul > li ul li a.active {
color: #2CA87F;
}
[data-color=green] .sidebar .sidebar-menu > ul > li ul li.active a span,
[data-color=green] .sidebar .sidebar-menu > ul > li ul li.active a i {
color: #2CA87F;
}
[data-color=green] .sidebar .sidebar-menu > ul li .submenu > a.active {
color: #2CA87F;
}
[data-color=green] .sidebar .sidebar-menu > ul li .submenu > a.active i,
[data-color=green] .sidebar .sidebar-menu > ul li .submenu > a.active span {
color: #2CA87F;
}
[data-color=green] .sidebar .sidebar-menu > ul li .submenu > a.active .menu-arrow::before {
border-color: #2CA87F;
}
[data-color=green] .btn-primary {
background-color: #2CA87F;
border: 1px solid #2CA87F;
}
[data-color=green] .btn-primary:hover, [data-color=green] .btn-primary:focus, [data-color=green] .btn-primary.focus, [data-color=green] .btn-primary:active, [data-color=green] .btn-primary.active {
background-color: rgb(36.5905660377, 139.7094339623, 105.6136792453);
border: 1px solid rgb(36.5905660377, 139.7094339623, 105.6136792453);
}
[data-color=green] .btn-check:checked + .btn,
[data-color=green] .btn.active,
[data-color=green] .btn.show,
[data-color=green] .btn.show:hover,
[data-color=green] .btn:first-child:active,
[data-color=green] :not(.btn-check) + .btn:active {
background-color: #2CA87F;
border-color: #2CA87F;
}
[data-color=green] .link-primary {
color: #2CA87F !important;
}
[data-color=green] .link-primary:hover, [data-color=green] .link-primary:focus, [data-color=green] .link-primary:active {
color: rgb(36.5905660377, 139.7094339623, 105.6136792453);
}
[data-color=green] .text-primary {
color: #2CA87F !important;
}
[data-color=green] .badge.badge-primary {
background: #2CA87F;
}
[data-color=green] .dataTables_paginate .pagination li.active a.page-link {
background: #2CA87F;
border-color: #2CA87F;
}
[data-color=green] .bg-primary {
background-color: #2CA87F !important;
border: 1px solid #2CA87F !important;
}
[data-color=green] .border-bottom.border-primary {
border-color: #2CA87F !important;
}
[data-color=green] .border-primary {
border-color: #2CA87F !important;
}
[data-color=green] .nav-tabs.nav-tabs-bottom li a.active,
[data-color=green] .nav-tabs.nav-tabs-bottom li a:hover {
border-bottom-color: #2CA87F;
color: #2CA87F;
}
[data-color=green] .badge.badge-soft-primary {
background: rgba(44, 168, 127, 0.1);
color: #2CA87F;
}
[data-color=green] a:hover {
color: #2CA87F;
}
[data-color=green] .btn-outline-primary {
border: 1px solid #2CA87F !important;
color: #2CA87F !important;
}
[data-color=green] .btn-outline-primary:hover, [data-color=green] .btn-outline-primary:focus, [data-color=green] .btn-outline-primary.focus, [data-color=green] .btn-outline-primary:active, [data-color=green] .btn-outline-primary.active {
background-color: #2CA87F !important;
border: 1px solid #2CA87F !important;
}
[data-color=green] .list-group a.active {
background: #ECEFFC;
color: #2CA87F;
}
[data-color=green] .list-group a:hover {
background: #ECEFFC;
color: #2CA87F;
}
[data-color=green] .badge-primary-hover:hover {
background: #2CA87F !important;
border-color: #2CA87F !important;
color: #FFF !important;
}
[data-color=green] .main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn {
background: #2CA87F;
}
[data-color=green] .right-user-side .slime-grp .chat-footer form .send-chat a {
background: #2CA87F;
}
[data-color=green] .custom-pagination .paginations .page-wrap li a.active, [data-color=green] .custom-pagination .paginations .page-wrap li a:hover {
background: #2CA87F;
}
[data-color=green] .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
border-color: #2CA87F;
}
[data-color=green] .select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #2CA87F;
}
[data-color=green] .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a.active {
background-color: #2CA87F;
border-color: #2CA87F;
}
[data-color=green] .nav-tabs .nav-link:hover {
color: #2CA87F;
}
[data-color=green] .form-check-input:checked {
background-color: #2CA87F;
border-color: #2CA87F;
}
[data-color=green] .profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn span {
color: #2CA87F;
}
[data-color=green] .sidebar-contact .toggle-theme {
background-color: #2CA87F;
}
[data-color=green] .primary-hover:hover {
background: #2CA87F !important;
color: #FFF;
}
[data-color=red] .sidebar .sidebar-menu > ul > li ul li a:hover {
color: #DC2626;
}
[data-color=red] .sidebar .sidebar-menu > ul > li ul li a:hover span {
color: #DC2626;
}
[data-color=red] .sidebar .sidebar-menu > ul > li ul li a.active {
color: #DC2626;
}
[data-color=red] .sidebar .sidebar-menu > ul > li ul li.active a span,
[data-color=red] .sidebar .sidebar-menu > ul > li ul li.active a i {
color: #DC2626;
}
[data-color=red] .sidebar .sidebar-menu > ul li .submenu > a.active {
color: #DC2626;
}
[data-color=red] .sidebar .sidebar-menu > ul li .submenu > a.active i,
[data-color=red] .sidebar .sidebar-menu > ul li .submenu > a.active span {
color: #DC2626;
}
[data-color=red] .sidebar .sidebar-menu > ul li .submenu > a.active .menu-arrow::before {
border-color: #DC2626;
}
[data-color=red] .btn-primary {
background-color: #DC2626;
border: 1px solid #DC2626;
}
[data-color=red] .btn-primary:hover, [data-color=red] .btn-primary:focus, [data-color=red] .btn-primary.focus, [data-color=red] .btn-primary:active, [data-color=red] .btn-primary.active {
background-color: rgb(191.425, 30.875, 30.875);
border: 1px solid rgb(191.425, 30.875, 30.875);
}
[data-color=red] .btn-check:checked + .btn,
[data-color=red] .btn.active,
[data-color=red] .btn.show,
[data-color=red] .btn.show:hover,
[data-color=red] .btn:first-child:active,
[data-color=red] :not(.btn-check) + .btn:active {
background-color: #DC2626;
border-color: #DC2626;
}
[data-color=red] .link-primary {
color: #DC2626 !important;
}
[data-color=red] .link-primary:hover, [data-color=red] .link-primary:focus, [data-color=red] .link-primary:active {
color: rgb(191.425, 30.875, 30.875);
}
[data-color=red] .text-primary {
color: #DC2626 !important;
}
[data-color=red] .badge.badge-primary {
background: #DC2626;
}
[data-color=red] .dataTables_paginate .pagination li.active a.page-link {
background: #DC2626;
border-color: #DC2626;
}
[data-color=red] .bg-primary {
background-color: #DC2626 !important;
border: 1px solid #DC2626 !important;
}
[data-color=red] .border-bottom.border-primary {
border-color: #DC2626 !important;
}
[data-color=red] .border-primary {
border-color: #DC2626 !important;
}
[data-color=red] .nav-tabs.nav-tabs-bottom li a.active,
[data-color=red] .nav-tabs.nav-tabs-bottom li a:hover {
border-bottom-color: #DC2626;
color: #DC2626;
}
[data-color=red] .badge.badge-soft-primary {
background: rgba(220, 38, 38, 0.1);
color: #DC2626;
}
[data-color=red] a:hover {
color: #DC2626;
}
[data-color=red] .btn-outline-primary {
border: 1px solid #DC2626 !important;
color: #DC2626 !important;
}
[data-color=red] .btn-outline-primary:hover, [data-color=red] .btn-outline-primary:focus, [data-color=red] .btn-outline-primary.focus, [data-color=red] .btn-outline-primary:active, [data-color=red] .btn-outline-primary.active {
background-color: #DC2626 !important;
border: 1px solid #DC2626 !important;
}
[data-color=red] .list-group a.active {
background: #ECEFFC;
color: #DC2626;
}
[data-color=red] .list-group a:hover {
background: #ECEFFC;
color: #DC2626;
}
[data-color=red] .badge-primary-hover:hover {
background: #DC2626 !important;
border-color: #DC2626 !important;
color: #FFF !important;
}
[data-color=red] .main-chat-blk .chat .chat-footer form .form-buttons .btn.send-btn {
background: #DC2626;
}
[data-color=red] .right-user-side .slime-grp .chat-footer form .send-chat a {
background: #DC2626;
}
[data-color=red] .custom-pagination .paginations .page-wrap li a.active, [data-color=red] .custom-pagination .paginations .page-wrap li a:hover {
background: #DC2626;
}
[data-color=red] .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
border-color: #DC2626;
}
[data-color=red] .select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #DC2626;
}
[data-color=red] .nav-tabs.nav-tabs-solid.nav-tabs-rounded-fill li a.active {
background-color: #DC2626;
border-color: #DC2626;
}
[data-color=red] .nav-tabs .nav-link:hover {
color: #DC2626;
}
[data-color=red] .form-check-input:checked {
background-color: #DC2626;
border-color: #DC2626;
}
[data-color=red] .profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn span {
color: #DC2626;
}
[data-color=red] .sidebar-contact .toggle-theme {
background-color: #DC2626;
}
[data-color=red] .primary-hover:hover {
background: #DC2626 !important;
color: #FFF;
}
.student-slider-rtl.owl-carousel .owl-stage-outer,
.teacher-slider-rtl.owl-carousel .owl-stage-outer {
height: 100% !important;
}
.student-slider-rtl.owl-carousel .owl-stage-outer .owl-stage,
.teacher-slider-rtl.owl-carousel .owl-stage-outer .owl-stage {
height: 100%;
}
.student-slider-rtl.owl-carousel .owl-stage-outer .owl-stage .owl-item,
.teacher-slider-rtl.owl-carousel .owl-stage-outer .owl-stage .owl-item {
height: 100%;
}
.student-slider-rtl.owl-carousel .owl-nav {
position: absolute;
left: 50%;
top: 30%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
}
.student-slider-rtl.owl-carousel .owl-nav button {
width: 24px;
height: 24px;
background: #FFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.student-slider-rtl.owl-carousel .owl-nav button.owl-prev {
margin-left: 5px;
}
.student-slider-rtl.owl-carousel .owl-nav button:hover {
background: #3D5EE1;
color: #FFF;
}
.teacher-slider-rtl.owl-carousel .owl-nav {
position: absolute;
left: 50%;
top: 30%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
}
.teacher-slider-rtl.owl-carousel .owl-nav button {
width: 24px;
height: 24px;
background: #FFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #202C4B;
}
.teacher-slider-rtl.owl-carousel .owl-nav button.owl-prev {
margin-left: 5px;
}
.teacher-slider-rtl.owl-carousel .owl-nav button:hover {
background: #3D5EE1;
color: #FFF;
}
html .darkmode,
html[data-theme=dark] {
background: #0F0C1C;
color: #B9B7C0;
}
html .darkmode ::-webkit-scrollbar-track,
html[data-theme=dark] ::-webkit-scrollbar-track {
background: #1B1632;
}
html .darkmode ::-webkit-scrollbar-thumb,
html .darkmode ::-webkit-scrollbar-thumb:hover,
html[data-theme=dark] ::-webkit-scrollbar-thumb,
html[data-theme=dark] ::-webkit-scrollbar-thumb:hover {
background: #5B576B;
}
html .darkmode body,
html[data-theme=dark] body {
background-color: #0F0C1C;
}
html .darkmode body.mini-sidebar .dark-logo,
html[data-theme=dark] body.mini-sidebar .dark-logo {
display: none !important;
}
html .darkmode body.mini-sidebar.expand-menu .dark-logo,
html[data-theme=dark] body.mini-sidebar.expand-menu .dark-logo {
display: block !important;
}
html .darkmode h1,
html .darkmode h2,
html .darkmode h3,
html .darkmode h4,
html .darkmode h5,
html .darkmode h6,
html .darkmode .mui-brand-name,
html .darkmode .mui-su-name,
html[data-theme=dark] h1,
html[data-theme=dark] h2,
html[data-theme=dark] h3,
html[data-theme=dark] h4,
html[data-theme=dark] h5,
html[data-theme=dark] h6,
html[data-theme=dark] .mui-brand-name,
html[data-theme=dark] .mui-su-name {
color: #EFEFF2 !important;
}
html .darkmode span,
html .darkmode p,
html .darkmode a,
html[data-theme=dark] span,
html[data-theme=dark] p,
html[data-theme=dark] a {
color: #B9B7C0;
}
html .darkmode a:hover,
html[data-theme=dark] a:hover {
color: #3D5EE1;
}
html .darkmode .bg-outline-info,
html[data-theme=dark] .bg-outline-info {
background-color: transparent;
color: #0F65CD;
}
html .darkmode .bg-outline-success,
html[data-theme=dark] .bg-outline-success {
background-color: transparent;
color: #1ABE17;
}
html .darkmode .bg-outline-warning,
html[data-theme=dark] .bg-outline-warning {
background-color: transparent;
color: #EAB300;
}
html .darkmode .bg-outline-danger,
html[data-theme=dark] .bg-outline-danger {
background-color: transparent;
color: #E82646;
}
html .darkmode .nav-tabs li a,
html[data-theme=dark] .nav-tabs li a {
color: #B9B7C0;
}
html .darkmode span.bg-success,
html .darkmode span.bg-danger,
html .darkmode span.bg-info,
html .darkmode span.bg-primary,
html .darkmode span.bg-warning,
html .darkmode span.bg-secondary,
html .darkmode span.bg-skyblue,
html[data-theme=dark] span.bg-success,
html[data-theme=dark] span.bg-danger,
html[data-theme=dark] span.bg-info,
html[data-theme=dark] span.bg-primary,
html[data-theme=dark] span.bg-warning,
html[data-theme=dark] span.bg-secondary,
html[data-theme=dark] span.bg-skyblue {
color: #FFF;
}
html .darkmode .accordion-item,
html[data-theme=dark] .accordion-item {
border-color: #1B1632;
}
html .darkmode .accordion-header,
html .darkmode .accordion-body,
html .darkmode .accordion-button,
html[data-theme=dark] .accordion-header,
html[data-theme=dark] .accordion-body,
html[data-theme=dark] .accordion-button {
background: #131022;
border-color: #1B1632;
}
html .darkmode .btn.btn-white,
html[data-theme=dark] .btn.btn-white {
background: #131022 !important;
border-color: #1B1632;
}
html .darkmode .btn-icon i,
html[data-theme=dark] .btn-icon i {
color: #B9B7C0;
}
html .darkmode header .btn-outline-light,
html[data-theme=dark] header .btn-outline-light {
border-color: #1B1632 !important;
color: #B9B7C0 !important;
}
html .darkmode .btn-outline-light,
html[data-theme=dark] .btn-outline-light {
border-color: #1B1632 !important;
}
html .darkmode .btn-outline-light.bg-white,
html[data-theme=dark] .btn-outline-light.bg-white {
background-color: #131022 !important;
color: #EFEFF2 !important;
border-color: #1B1632 !important;
}
html .darkmode .btn-outline-light.bg-white i, html .darkmode .btn-outline-light.bg-white span,
html[data-theme=dark] .btn-outline-light.bg-white i,
html[data-theme=dark] .btn-outline-light.bg-white span {
color: #EFEFF2 !important;
}
html .darkmode .btn-outline-light.bg-white:hover, html .darkmode .btn-outline-light.bg-white:focus, html .darkmode .btn-outline-light.bg-white:active,
html[data-theme=dark] .btn-outline-light.bg-white:hover,
html[data-theme=dark] .btn-outline-light.bg-white:focus,
html[data-theme=dark] .btn-outline-light.bg-white:active {
background-color: #1B1632 !important;
color: #ffffff !important;
}
html .darkmode .btn-outline-light.bg-white:hover i, html .darkmode .btn-outline-light.bg-white:hover span, html .darkmode .btn-outline-light.bg-white:focus i, html .darkmode .btn-outline-light.bg-white:focus span, html .darkmode .btn-outline-light.bg-white:active i, html .darkmode .btn-outline-light.bg-white:active span,
html[data-theme=dark] .btn-outline-light.bg-white:hover i,
html[data-theme=dark] .btn-outline-light.bg-white:hover span,
html[data-theme=dark] .btn-outline-light.bg-white:focus i,
html[data-theme=dark] .btn-outline-light.bg-white:focus span,
html[data-theme=dark] .btn-outline-light.bg-white:active i,
html[data-theme=dark] .btn-outline-light.bg-white:active span {
color: #ffffff !important;
}
html .darkmode .dropdown-menu,
html[data-theme=dark] .dropdown-menu {
background: #131022;
border-color: #1B1632;
}
html .darkmode .dropdown-menu .dropdown-item,
html[data-theme=dark] .dropdown-menu .dropdown-item {
color: #B9B7C0 !important;
}
html .darkmode .tax-invoice-info,
html .darkmode .invoice-popup-head,
html[data-theme=dark] .tax-invoice-info,
html[data-theme=dark] .invoice-popup-head {
background: #1B1632;
}
html .darkmode .bg-dark,
html[data-theme=dark] .bg-dark {
background: #131022 !important;
}
html .darkmode .text-dark,
html[data-theme=dark] .text-dark {
color: #B9B7C0 !important;
}
html .darkmode .invoice-product-table,
html .darkmode .payment-info,
html .darkmode .invoice-table,
html[data-theme=dark] .invoice-product-table,
html[data-theme=dark] .payment-info,
html[data-theme=dark] .invoice-table {
border-color: #1B1632 !important;
}
html .darkmode .border,
html .darkmode .border-end,
html .darkmode .border-white,
html .darkmode .border-bottom,
html[data-theme=dark] .border,
html[data-theme=dark] .border-end,
html[data-theme=dark] .border-white,
html[data-theme=dark] .border-bottom {
border-color: #1B1632 !important;
}
html .darkmode .border-start,
html[data-theme=dark] .border-start {
border-color: #1B1632 !important;
}
html .darkmode .border-start.border-skyblue,
html[data-theme=dark] .border-start.border-skyblue {
border-color: #05C3FB !important;
}
html .darkmode .border-start.border-info,
html[data-theme=dark] .border-start.border-info {
border-color: #0F65CD !important;
}
html .darkmode .border-start.border-danger,
html[data-theme=dark] .border-start.border-danger {
border-color: #E82646 !important;
}
html .darkmode .custom-table .table-responsive,
html[data-theme=dark] .custom-table .table-responsive {
border-color: #1B1632;
}
html .darkmode .shadow-sm,
html[data-theme=dark] .shadow-sm {
box-shadow: 0px 4.4px 12px -1px rgba(44, 44, 44, 0.361) !important;
}
html .darkmode .form-control,
html[data-theme=dark] .form-control {
background: #131022;
border-color: #1B1632;
color: #B9B7C0;
}
html .darkmode .form-control::-webkit-file-upload-button,
html .darkmode .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button,
html[data-theme=dark] .form-control::-webkit-file-upload-button,
html[data-theme=dark] .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
background-color: #1B1632;
color: #B9B7C0;
}
html .darkmode .form-label,
html[data-theme=dark] .form-label {
color: #B9B7C0;
}
html .darkmode .nav-tabs.nav-tabs-solid,
html[data-theme=dark] .nav-tabs.nav-tabs-solid {
background: #131022;
}
html .darkmode .bg-light-500,
html .darkmode .bg-light,
html .darkmode .bg-light-400,
html .darkmode .bg-light-gray,
html .darkmode .bg-light-200,
html[data-theme=dark] .bg-light-500,
html[data-theme=dark] .bg-light,
html[data-theme=dark] .bg-light-400,
html[data-theme=dark] .bg-light-gray,
html[data-theme=dark] .bg-light-200 {
background: #1B1632 !important;
border-color: #1B1632 !important;
}
html .darkmode .primary-hover:hover,
html[data-theme=dark] .primary-hover:hover {
background: #3D5EE1 !important;
}
html .darkmode .bg-light-300,
html .darkmode .bg-light-100,
html[data-theme=dark] .bg-light-300,
html[data-theme=dark] .bg-light-100 {
background: #1B1632 !important;
}
html .darkmode .card-dropdown > a,
html[data-theme=dark] .card-dropdown > a {
background: #1B1632 !important;
}
html .darkmode .table,
html[data-theme=dark] .table {
--bs-body-bg: $dark-800;
}
html .darkmode .table thead th,
html[data-theme=dark] .table thead th {
background: #131022 !important;
color: #EFEFF2 !important;
border-color: #1B1632 !important;
}
html .darkmode .table tbody td,
html[data-theme=dark] .table tbody td {
color: #B9B7C0 !important;
border-color: #1B1632 !important;
}
html .darkmode .table tbody th,
html[data-theme=dark] .table tbody th {
border-color: #1B1632 !important;
}
html .darkmode .table tbody td .text-dark a,
html[data-theme=dark] .table tbody td .text-dark a {
color: #B9B7C0;
}
html .darkmode .tab-style-6,
html[data-theme=dark] .tab-style-6 {
background: #131022;
}
html .darkmode .main-chat-blk .chat-page-wrapper .left-chat-title,
html[data-theme=dark] .main-chat-blk .chat-page-wrapper .left-chat-title {
border-color: #1B1632;
}
html .darkmode .main-chat-blk .main-wrapper .content .sidebar-group .sidebar,
html[data-theme=dark] .main-chat-blk .main-wrapper .content .sidebar-group .sidebar {
background: #0F0C1C;
border-right-color: #B9B7C0;
}
html .darkmode .main-chat-blk .chat_form,
html[data-theme=dark] .main-chat-blk .chat_form {
box-shadow: none;
background: #131022;
border-color: #1B1632;
color: #EFEFF2;
}
html .darkmode .main-chat-blk .review-files p,
html[data-theme=dark] .main-chat-blk .review-files p {
color: #B9B7C0;
}
html .darkmode .main-chat-blk .chat,
html[data-theme=dark] .main-chat-blk .chat {
background: #0F0C1C;
}
html .darkmode .main-chat-blk .chat .chat-header,
html[data-theme=dark] .main-chat-blk .chat .chat-header {
background: #0F0C1C;
border-color: #1B1632;
}
html .darkmode .main-chat-blk .chat .chat-footer,
html[data-theme=dark] .main-chat-blk .chat .chat-footer {
background: #0F0C1C;
border-top-color: #1B1632;
}
html .darkmode .main-chat-blk .chat .chat-body .messages .chats .message-content,
html[data-theme=dark] .main-chat-blk .chat .chat-body .messages .chats .message-content {
background: #1B1632;
color: #B9B7C0;
}
html .darkmode .main-chat-blk .chat .chat-body .messages .chats .message-content.chat-award-link a,
html[data-theme=dark] .main-chat-blk .chat .chat-body .messages .chats .message-content.chat-award-link a {
color: #B9B7C0;
}
html .darkmode .main-chat-blk .chat .chat-footer form .smile-foot .action-circle,
html[data-theme=dark] .main-chat-blk .chat .chat-footer form .smile-foot .action-circle {
background: #1B1632;
color: #B9B7C0;
}
html .darkmode .main-chat-blk .emoj-group ul li a,
html .darkmode .main-chat-blk .emoj-group-list-foot ul,
html .darkmode .main-chat-blk .emoj-group-list-foot ul li.add-emoj a,
html .darkmode .main-chat-blk .emoj-group-list ul,
html .darkmode .main-chat-blk .emoj-group-list ul li.add-emoj a,
html[data-theme=dark] .main-chat-blk .emoj-group ul li a,
html[data-theme=dark] .main-chat-blk .emoj-group-list-foot ul,
html[data-theme=dark] .main-chat-blk .emoj-group-list-foot ul li.add-emoj a,
html[data-theme=dark] .main-chat-blk .emoj-group-list ul,
html[data-theme=dark] .main-chat-blk .emoj-group-list ul li.add-emoj a {
background: #1B1632;
}
html .darkmode .twitter-bs-wizard .twitter-bs-wizard-nav .nav-link::after,
html[data-theme=dark] .twitter-bs-wizard .twitter-bs-wizard-nav .nav-link::after {
background-color: #1B1632;
}
html .darkmode .btn.btn-white,
html[data-theme=dark] .btn.btn-white {
color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .btn.btn-white:hover,
html[data-theme=dark] .btn.btn-white:hover {
color: #FFF;
background: #1B1632 !important;
}
html .darkmode .badge.bg-pending,
html[data-theme=dark] .badge.bg-pending {
color: #FFF !important;
}
html .darkmode .note-frame,
html[data-theme=dark] .note-frame {
color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .offcanvas-header,
html .darkmode .offcanvas-body,
html[data-theme=dark] .offcanvas-header,
html[data-theme=dark] .offcanvas-body {
background: #131022;
}
html .darkmode .dropdown-menu .class-hover p,
html[data-theme=dark] .dropdown-menu .class-hover p {
color: #202C4B !important;
}
html .darkmode .bg-success-transparent h6,
html .darkmode .bg-primary-transparent h6,
html[data-theme=dark] .bg-success-transparent h6,
html[data-theme=dark] .bg-primary-transparent h6 {
color: #202C4B !important;
}
html .darkmode .link-slider .item p,
html[data-theme=dark] .link-slider .item p {
color: #202C4B !important;
}
html .darkmode .form-check-input,
html[data-theme=dark] .form-check-input {
background-color: #5B576B;
border-color: #1B1632;
/* the unconditional rule above has higher specificity than the
base .form-check-input:checked rule (attribute selector +
class beats class + pseudo-class), so a checked switch was
losing its primary-blue fill and reading as off in dark mode */
}
html .darkmode .form-check-input:checked,
html[data-theme=dark] .form-check-input:checked {
background-color: #3D5EE1;
border-color: #3D5EE1;
}
html .darkmode select,
html .darkmode .form-select,
html .darkmode .form-control,
html[data-theme=dark] select,
html[data-theme=dark] .form-select,
html[data-theme=dark] .form-control {
background-color: #131022;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
html .darkmode select option,
html .darkmode .form-select option,
html .darkmode .form-control option,
html[data-theme=dark] select option,
html[data-theme=dark] .form-select option,
html[data-theme=dark] .form-control option {
background-color: #131022 !important;
color: #EFEFF2 !important;
}
html .darkmode select option:hover, html .darkmode select option:focus, html .darkmode select option:active, html .darkmode select option[selected], html .darkmode select option:checked,
html .darkmode .form-select option:hover,
html .darkmode .form-select option:focus,
html .darkmode .form-select option:active,
html .darkmode .form-select option[selected],
html .darkmode .form-select option:checked,
html .darkmode .form-control option:hover,
html .darkmode .form-control option:focus,
html .darkmode .form-control option:active,
html .darkmode .form-control option[selected],
html .darkmode .form-control option:checked,
html[data-theme=dark] select option:hover,
html[data-theme=dark] select option:focus,
html[data-theme=dark] select option:active,
html[data-theme=dark] select option[selected],
html[data-theme=dark] select option:checked,
html[data-theme=dark] .form-select option:hover,
html[data-theme=dark] .form-select option:focus,
html[data-theme=dark] .form-select option:active,
html[data-theme=dark] .form-select option[selected],
html[data-theme=dark] .form-select option:checked,
html[data-theme=dark] .form-control option:hover,
html[data-theme=dark] .form-control option:focus,
html[data-theme=dark] .form-control option:active,
html[data-theme=dark] .form-control option[selected],
html[data-theme=dark] .form-control option:checked {
background-color: #1B1632 !important;
color: #ffffff !important;
}
html .darkmode option,
html[data-theme=dark] option {
background-color: #131022 !important;
color: #EFEFF2 !important;
}
html .darkmode .select2-container--default .select2-selection--single,
html[data-theme=dark] .select2-container--default .select2-selection--single {
background-color: #131022 !important;
border-color: #1B1632 !important;
}
html .darkmode .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered {
border-color: transparent !important;
background-color: transparent !important;
color: #EFEFF2 !important;
}
html .darkmode .select2-container--default .select2-selection--single .select2-selection__arrow b,
html[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #B9B7C0 transparent transparent transparent !important;
}
html .darkmode .select2-container--default .select2-selection--multiple,
html[data-theme=dark] .select2-container--default .select2-selection--multiple {
background-color: #131022 !important;
border-color: #1B1632 !important;
}
html .darkmode .select2-container--default .select2-selection--multiple .select2-selection__rendered,
html[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
color: #EFEFF2 !important;
}
html .darkmode .select2-container--default .select2-selection--multiple .select2-selection__choice,
html[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #3d5ee1 !important;
border-color: #3d5ee1 !important;
color: #ffffff !important;
}
html .darkmode .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove,
html[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
color: #ffffff !important;
}
html .darkmode .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover,
html[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
background-color: rgba(0, 0, 0, 0.2) !important;
color: #ffffff !important;
}
html .darkmode .select2-container--default .select2-selection--multiple .select2-search__field,
html[data-theme=dark] .select2-container--default .select2-selection--multiple .select2-search__field {
color: #EFEFF2 !important;
background-color: transparent !important;
}
html .darkmode .select2-container--default .select2-results > .select2-results__options,
html[data-theme=dark] .select2-container--default .select2-results > .select2-results__options {
border-color: #1B1632 !important;
background-color: #131022 !important;
color: #EFEFF2 !important;
}
html .darkmode .select2-container--default .select2-results__option,
html[data-theme=dark] .select2-container--default .select2-results__option {
background-color: #131022 !important;
color: #EFEFF2 !important;
}
html .darkmode .select2-container--default .select2-results__option[aria-disabled=true],
html[data-theme=dark] .select2-container--default .select2-results__option[aria-disabled=true] {
color: rgba(91, 87, 107, 0.6980392157) !important;
background-color: #0F0C1C !important;
}
html .darkmode .select2-container--default .select2-results__option[aria-selected=true],
html[data-theme=dark] .select2-container--default .select2-results__option[aria-selected=true] {
background-color: #1B1632 !important;
color: #ffffff !important;
}
html .darkmode .select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected],
html[data-theme=dark] .select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected] {
background-color: #3d5ee1 !important;
color: #ffffff !important;
}
html .darkmode .select2-container--default .select2-search--dropdown,
html[data-theme=dark] .select2-container--default .select2-search--dropdown {
background-color: #131022 !important;
}
html .darkmode .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-theme=dark] .select2-container--default .select2-search--dropdown .select2-search__field {
background-color: #0F0C1C !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
html .darkmode .select2-dropdown,
html[data-theme=dark] .select2-dropdown {
background-color: #131022 !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
html .darkmode .bootstrap-tagsinput,
html[data-theme=dark] .bootstrap-tagsinput {
background: #131022;
border-color: #1B1632;
}
html .darkmode .modal .modal-content,
html[data-theme=dark] .modal .modal-content {
background: #131022;
border-color: #1B1632 !important;
}
html .darkmode .modal .modal-content .modal-header,
html[data-theme=dark] .modal .modal-content .modal-header {
border-color: #1B1632 !important;
}
html .darkmode .modal .modal-content .modal-footer,
html[data-theme=dark] .modal .modal-content .modal-footer {
border-color: #1B1632 !important;
}
html .darkmode .animate-card .text-default,
html[data-theme=dark] .animate-card .text-default {
color: #5D6369 !important;
}
html .darkmode .notice-widget:before,
html[data-theme=dark] .notice-widget:before {
background-color: #1B1632;
}
html .darkmode .custom-alert1,
html[data-theme=dark] .custom-alert1 {
background: #131022;
}
html .darkmode .card,
html[data-theme=dark] .card {
background-color: #131022;
border-color: #1B1632;
box-shadow: 0px 4.4px 12px -1px rgba(44, 44, 44, 0.361);
}
html .darkmode .card .card-header,
html[data-theme=dark] .card .card-header {
border-color: #1B1632;
}
html .darkmode .card .card-footer,
html[data-theme=dark] .card .card-footer {
border-color: #1B1632;
}
html .darkmode .owl-carousel .owl-nav button,
html[data-theme=dark] .owl-carousel .owl-nav button {
background: #131022 !important;
color: rgba(185, 183, 192, 0.5019607843) !important;
}
html .darkmode .login-or .span-or,
html[data-theme=dark] .login-or .span-or {
background: #131022;
}
html .darkmode .header,
html[data-theme=dark] .header {
background: #0F0C1C;
border-bottom-color: #1B1632;
}
html .darkmode .header .dark-logo,
html[data-theme=dark] .header .dark-logo {
display: block;
}
html .darkmode .header .logo-normal,
html[data-theme=dark] .header .logo-normal {
display: none;
}
html .darkmode .header .header-left,
html[data-theme=dark] .header .header-left {
background: #0F0C1C;
border-color: #1B1632;
}
html .darkmode .header .searchinputs input,
html[data-theme=dark] .header .searchinputs input {
background: #131022;
border-color: #1B1632;
color: #B9B7C0;
}
html .darkmode .header .searchinputs .search-addon button,
html[data-theme=dark] .header .searchinputs .search-addon button {
background: #1B1632;
color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .sidebar,
html[data-theme=dark] .sidebar {
background: #0F0C1C !important;
border-color: #1B1632;
}
html .darkmode .sidebar .sidebar-menu,
html[data-theme=dark] .sidebar .sidebar-menu {
background: #0F0C1C !important;
}
html .darkmode .sidebar .sidebar-menu > ul > li .submenu-hdr::after,
html[data-theme=dark] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
background: #1B1632;
}
html .darkmode .sidebar .sidebar-menu > ul > li .submenu > a.subdrop,
html[data-theme=dark] .sidebar .sidebar-menu > ul > li .submenu > a.subdrop {
background: #1B1632;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li a,
html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li a {
color: #B9B7C0;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li a.active, html .darkmode .sidebar .sidebar-menu > ul > li ul li a:hover,
html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li a.active,
html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li a:hover {
color: #3D5EE1;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li a i,
html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li a i {
background: #1B1632;
color: #B9B7C0;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li a span,
html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li a span {
color: #B9B7C0;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li a:hover span,
html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li a:hover span {
color: #3D5EE1;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li.active a,
html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li.active a {
background: #1B1632;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li.active a span,
html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li.active a span {
color: #3D5EE1;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a,
html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a {
color: #B9B7C0;
}
html .darkmode .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active,
html[data-theme=dark] .sidebar .sidebar-menu > ul > li ul li .submenu > ul li a.active {
color: #3D5EE1;
}
html .darkmode .page-wrapper .content,
html[data-theme=dark] .page-wrapper .content {
background: #0F0C1C;
}
html .darkmode .page-wrapper .list-group-item,
html[data-theme=dark] .page-wrapper .list-group-item {
background: #131022 !important;
border-color: #1B1632 !important;
}
html .darkmode .page-wrapper .list-group-item.active,
html[data-theme=dark] .page-wrapper .list-group-item.active {
background: #3D5EE1 !important;
}
html .darkmode .page-wrapper .border,
html[data-theme=dark] .page-wrapper .border {
border-color: #1B1632 !important;
}
html .darkmode .page-wrapper .border-bottom,
html[data-theme=dark] .page-wrapper .border-bottom {
border-color: #1B1632 !important;
}
html .darkmode .page-wrapper .border-top,
html[data-theme=dark] .page-wrapper .border-top {
border-color: #1B1632 !important;
}
html .darkmode .page-wrapper .bg-white,
html[data-theme=dark] .page-wrapper .bg-white {
background: #131022 !important;
border-color: #1B1632 !important;
}
html .darkmode .page-wrapper .dropdown-menu,
html[data-theme=dark] .page-wrapper .dropdown-menu {
background: #131022;
border-color: #1B1632;
}
html .darkmode .page-wrapper .dropdown-menu .dropdown-item,
html[data-theme=dark] .page-wrapper .dropdown-menu .dropdown-item {
color: #B9B7C0 !important;
}
html .darkmode .page-wrapper .text-dark,
html[data-theme=dark] .page-wrapper .text-dark {
color: #B9B7C0 !important;
}
html .darkmode.main-chat-blk .main-wrapper .content .sidebar-group .sidebar,
html[data-theme=dark].main-chat-blk .main-wrapper .content .sidebar-group .sidebar {
background: #131022;
border-right-color: #1B1632;
}
html .darkmode.main-chat-blk .main-wrapper .content .sidebar-group .sidebar .user-list li a:hover,
html[data-theme=dark].main-chat-blk .main-wrapper .content .sidebar-group .sidebar .user-list li a:hover {
background: #1B1632;
}
html .darkmode.main-chat-blk .main-wrapper .content .action-circle,
html[data-theme=dark].main-chat-blk .main-wrapper .content .action-circle {
background: #131022 !important;
}
html .darkmode.main-chat-blk .main-wrapper .chat-page-wrapper .left-chat-title,
html[data-theme=dark].main-chat-blk .main-wrapper .chat-page-wrapper .left-chat-title {
border-bottom-color: #1B1632;
}
html .darkmode.main-chat-blk .right-sidebar .right-sidebar-wrap,
html[data-theme=dark].main-chat-blk .right-sidebar .right-sidebar-wrap {
background: #131022;
border-left-color: #1B1632;
}
html .darkmode.main-chat-blk .chat,
html[data-theme=dark].main-chat-blk .chat {
background: #131022;
}
html .darkmode.main-chat-blk .chat .chat-header,
html[data-theme=dark].main-chat-blk .chat .chat-header {
background: #131022;
border-bottom-color: #1B1632;
}
html .darkmode.main-chat-blk .user-chat-search input[type=text],
html .darkmode.main-chat-blk .chat-search input[type=text],
html[data-theme=dark].main-chat-blk .user-chat-search input[type=text],
html[data-theme=dark].main-chat-blk .chat-search input[type=text] {
background-color: #131022;
color: #EFEFF2;
border-color: #1B1632;
}
html .darkmode.main-chat-blk .form-control-feedback,
html[data-theme=dark].main-chat-blk .form-control-feedback {
color: rgba(91, 87, 107, 0.6980392157);
}
html .darkmode.main-chat-blk .chat-member-details .member-details ul,
html[data-theme=dark].main-chat-blk .chat-member-details .member-details ul {
border-bottom-color: #1B1632;
}
html .darkmode.main-chat-blk .chat-member-details .member-details h5,
html .darkmode.main-chat-blk .chat-member-details .member-details h6,
html .darkmode.main-chat-blk .chat-member-details .member-details span,
html[data-theme=dark].main-chat-blk .chat-member-details .member-details h5,
html[data-theme=dark].main-chat-blk .chat-member-details .member-details h6,
html[data-theme=dark].main-chat-blk .chat-member-details .member-details span {
color: #EFEFF2;
}
html .darkmode.main-chat-blk .chat-member-details .member-details a,
html[data-theme=dark].main-chat-blk .chat-member-details .member-details a {
background: #1B1632;
color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode.main-chat-blk .chat-member-details .member-details a:hover,
html[data-theme=dark].main-chat-blk .chat-member-details .member-details a:hover {
color: #EFEFF2;
}
html .darkmode.main-chat-blk .about-media-tabs .nav .nav-item,
html[data-theme=dark].main-chat-blk .about-media-tabs .nav .nav-item {
background: #131022;
color: #EFEFF2;
}
html .darkmode.main-chat-blk .about-media-tabs .nav .nav-item.active,
html[data-theme=dark].main-chat-blk .about-media-tabs .nav .nav-item.active {
color: #FFF;
}
html .darkmode.main-chat-blk .media-doc-blk span,
html[data-theme=dark].main-chat-blk .media-doc-blk span {
background: #1B1632;
}
html .darkmode.main-chat-blk .file-download,
html[data-theme=dark].main-chat-blk .file-download {
background: #1B1632;
}
html .darkmode.main-chat-blk .file-download .file-type,
html[data-theme=dark].main-chat-blk .file-download .file-type {
background-color: #131022;
}
html .darkmode.main-chat-blk .file-download .file-details span.file-name,
html[data-theme=dark].main-chat-blk .file-download .file-details span.file-name {
color: #EFEFF2;
}
html .darkmode.main-chat-blk .stared-group span,
html[data-theme=dark].main-chat-blk .stared-group span {
background: #1B1632;
}
html .darkmode .part-name.sub-part-name,
html .darkmode .more-icon a,
html .darkmode .meet-call-menu-blk .video-call-action ul li a,
html[data-theme=dark] .part-name.sub-part-name,
html[data-theme=dark] .more-icon a,
html[data-theme=dark] .meet-call-menu-blk .video-call-action ul li a {
background: #131022;
border-color: #1B1632;
}
html .darkmode .card .card-title,
html[data-theme=dark] .card .card-title {
color: #EFEFF2;
}
html .darkmode .popover .popover-body,
html[data-theme=dark] .popover .popover-body {
background: #131022;
border-color: #1B1632;
}
html .darkmode .popover .popover-header,
html[data-theme=dark] .popover .popover-header {
background: #131022;
border-color: #1B1632;
}
html .darkmode .popover,
html[data-theme=dark] .popover {
border-color: #1B1632;
}
html .darkmode .swal2-popup,
html .darkmode .toast-header,
html .darkmode .toast-body,
html[data-theme=dark] .swal2-popup,
html[data-theme=dark] .toast-header,
html[data-theme=dark] .toast-body {
background: #131022;
}
html .darkmode .toast-header .btn-close,
html[data-theme=dark] .toast-header .btn-close {
color: #EFEFF2;
}
html .darkmode .scroll-demo,
html .darkmode .icons-list li,
html[data-theme=dark] .scroll-demo,
html[data-theme=dark] .icons-list li {
border-color: #1B1632;
}
html .darkmode .select2-container--default .select2-selection--multiple,
html[data-theme=dark] .select2-container--default .select2-selection--multiple {
background: #131022;
border-color: #1B1632;
}
html .darkmode .table > :not(caption) > * > *,
html[data-theme=dark] .table > :not(caption) > * > * {
background: #131022;
}
html .darkmode .breadcrumb .breadcrumb-item.active,
html[data-theme=dark] .breadcrumb .breadcrumb-item.active {
color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .filter-wrapper,
html[data-theme=dark] .filter-wrapper {
border-color: #1B1632;
}
html .darkmode .list-tab ul,
html[data-theme=dark] .list-tab ul {
border-color: #1B1632;
}
html .darkmode .meet-call-menu-blk .video-call-action ul li a,
html[data-theme=dark] .meet-call-menu-blk .video-call-action ul li a {
color: #EFEFF2;
}
html .darkmode .main-chat-blk .user-list li a:hover,
html[data-theme=dark] .main-chat-blk .user-list li a:hover {
background: #131022;
}
html .darkmode .chat-msg-blk .chats.chats-right .message-content::before,
html[data-theme=dark] .chat-msg-blk .chats.chats-right .message-content::before {
border-left-color: #131022;
}
html .darkmode .chat-msg-blk .chats .message-content,
html[data-theme=dark] .chat-msg-blk .chats .message-content {
background: #131022 !important;
}
html .darkmode .chat-msg-blk .chats .message-content::before,
html[data-theme=dark] .chat-msg-blk .chats .message-content::before {
border-right-color: #131022;
}
html .darkmode .right-user-side .slime-grp .chat-footer,
html[data-theme=dark] .right-user-side .slime-grp .chat-footer {
background: #131022;
}
html .darkmode .right-user-side .slime-grp .chat-footer form .chat_form,
html[data-theme=dark] .right-user-side .slime-grp .chat-footer form .chat_form {
background: #131022;
border-color: #1B1632;
color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .chat_form::placeholder,
html[data-theme=dark] .chat_form::placeholder {
color: #5B576B !important;
}
html .darkmode .dropdown-item:not(.active):hover,
html .darkmode .dropdown-item:not(.active):focus,
html .darkmode .dropdown-item:not(.active):active,
html .darkmode .dropdown-item.active,
html[data-theme=dark] .dropdown-item:not(.active):hover,
html[data-theme=dark] .dropdown-item:not(.active):focus,
html[data-theme=dark] .dropdown-item:not(.active):active,
html[data-theme=dark] .dropdown-item.active {
background: rgba(91, 87, 107, 0.6980392157);
}
html .darkmode .card-dropdown .dropdown-menu li a:hover,
html[data-theme=dark] .card-dropdown .dropdown-menu li a:hover {
background: rgba(91, 87, 107, 0.6980392157);
color: #EFEFF2;
}
html .darkmode .btn-outline-light,
html[data-theme=dark] .btn-outline-light {
color: #B9B7C0 !important;
background: #131022 !important;
}
html .darkmode .bg-white,
html[data-theme=dark] .bg-white {
background: #131022 !important;
}
html .darkmode .user-list-item,
html[data-theme=dark] .user-list-item {
background: #1B1632 !important;
}
html .darkmode .record-time span:before,
html[data-theme=dark] .record-time span:before {
background-color: #131022;
}
html .darkmode .nav-control button,
html .darkmode .plyr--video .plyr__control,
html[data-theme=dark] .nav-control button,
html[data-theme=dark] .plyr--video .plyr__control {
background: #131022;
border-color: #1B1632;
}
html .darkmode .dataTables_paginate .pagination li a,
html[data-theme=dark] .dataTables_paginate .pagination li a {
color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .bootstrap-datetimepicker-widget table th,
html[data-theme=dark] .bootstrap-datetimepicker-widget table th {
color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .list-tab ul li a,
html[data-theme=dark] .list-tab ul li a {
color: rgba(185, 183, 192, 0.5019607843);
}
html .darkmode .accordion .accordion-button.collapsed,
html[data-theme=dark] .accordion .accordion-button.collapsed {
background: #131022 !important;
}
html .darkmode .accordion .accordion-button.collapsed:after,
html[data-theme=dark] .accordion .accordion-button.collapsed:after {
background: #131022;
}
html .darkmode .accordion .accordion-button,
html[data-theme=dark] .accordion .accordion-button {
background: #0f0c1c !important;
}
html .darkmode span.icon-addon,
html .darkmode .bookingrange,
html[data-theme=dark] span.icon-addon,
html[data-theme=dark] .bookingrange {
color: #B9B7C0;
}
html .darkmode .daterangepicker,
html[data-theme=dark] .daterangepicker {
background: #131022;
border-color: #1B1632;
}
html .darkmode .daterangepicker:after,
html[data-theme=dark] .daterangepicker:after {
border-bottom-color: #5B576B;
}
html .darkmode .accordion-button:after,
html[data-theme=dark] .accordion-button:after {
background: #131022;
}
html .darkmode .language-setup-table,
html[data-theme=dark] .language-setup-table {
border-color: #1B1632;
}
html .darkmode #calendar .fc-day,
html .darkmode #events .fc-day,
html[data-theme=dark] #calendar .fc-day,
html[data-theme=dark] #events .fc-day {
background: #1B1632;
border-color: #322D46;
}
html .darkmode #calendar .fc-daygrid-day-number,
html .darkmode #events .fc-daygrid-day-number,
html[data-theme=dark] #calendar .fc-daygrid-day-number,
html[data-theme=dark] #events .fc-daygrid-day-number {
color: #B9B7C0;
}
html .darkmode #calendar .fc-scrollgrid,
html .darkmode #events .fc-scrollgrid,
html[data-theme=dark] #calendar .fc-scrollgrid,
html[data-theme=dark] #events .fc-scrollgrid {
border-color: #322D46;
}
html .darkmode #calendar .fc-col-header-cell-cushion,
html .darkmode #events .fc-col-header-cell-cushion,
html[data-theme=dark] #calendar .fc-col-header-cell-cushion,
html[data-theme=dark] #events .fc-col-header-cell-cushion {
color: #EFEFF2;
}
html .darkmode #calendar .fc-daygrid-day.fc-day-today,
html .darkmode #events .fc-daygrid-day.fc-day-today,
html[data-theme=dark] #calendar .fc-daygrid-day.fc-day-today,
html[data-theme=dark] #events .fc-daygrid-day.fc-day-today {
background-color: #131022;
}
html .darkmode #calendar td,
html .darkmode #calendar th,
html .darkmode #events td,
html .darkmode #events th,
html[data-theme=dark] #calendar td,
html[data-theme=dark] #calendar th,
html[data-theme=dark] #events td,
html[data-theme=dark] #events th {
border-color: #322D46;
}
html .darkmode #global-loader,
html[data-theme=dark] #global-loader {
background: rgba(15, 12, 28, 0.9);
}
html .darkmode .invoice-logo-dark,
html[data-theme=dark] .invoice-logo-dark {
display: none;
}
html .darkmode .invoice-logo-white,
html[data-theme=dark] .invoice-logo-white {
display: block;
}
/* ---------- Dark Mode Overrides ---------- */
[data-theme=dark] .sidebar {
background: #111827;
box-shadow: none;
}
[data-theme=dark] .sidebar .sidebar-menu ul li a.active,
[data-theme=dark] .sidebar .sidebar-menu ul li a.subdrop.active {
background: rgba(255, 255, 255, 0.06) !important;
color: #f4f6fb !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.45) !important;
}
[data-theme=dark] .sidebar .sidebar-menu ul li a.active:hover,
[data-theme=dark] .sidebar .sidebar-menu ul li a.subdrop.active:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 5px 12px rgba(0, 0, 0, 0.55) !important;
}
[data-theme=dark] .mui-brand-card,
[data-theme=dark] .mui-side-footer .mui-side-user {
background: #141b2d;
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .mui-side-footer,
[data-theme=dark] .lang-head,
[data-theme=dark] .anew-head,
[data-theme=dark] .anew-foot,
[data-theme=dark] .ntf-head,
[data-theme=dark] .ntf-foot,
[data-theme=dark] .msg-head,
[data-theme=dark] .msg-foot,
[data-theme=dark] .apps-head,
[data-theme=dark] .apps-foot {
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .mui-brand-menu {
box-shadow: 0 20px 46px rgba(0, 0, 0, 0.55);
background: #141b2d;
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .header .header-left #toggle_btn,
[data-theme=dark] .mui-brand-menu .mui-bi-meta b {
color: #ffffff;
}
[data-theme=dark] .expand-menu .header-left .logo img {
display: none;
}
[data-theme=dark] .header,
[data-theme=dark] .header .header-left {
background: #141b2d !important;
border-bottom-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .header .header-left {
background: #111827 !important;
border-right-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .header .btn-icon,
[data-theme=dark] .header .btn-outline-light.bg-white,
[data-theme=dark] .mui-profile-toggle {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
[data-theme=dark] .header .mui-count {
border-color: #141b2d;
}
[data-theme=dark] .header .top-nav-search .searchinputs input {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .mui-search-kbd .mui-kbd-key {
background: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .header .mui-branch .text-dark,
[data-theme=dark] .header .mui-branch .fw-semibold {
color: #c7cede !important;
}
[data-theme=dark] .dropdown-menu {
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.5);
}
[data-theme=dark] .anew-menu,
[data-theme=dark] .ntf-panel,
[data-theme=dark] .msg-panel,
[data-theme=dark] .apps-panel,
[data-theme=dark] .lang-menu,
[data-theme=dark] .ay-menu,
[data-theme=dark] .mui-profile-drop {
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
}
[data-theme=dark] .ntf-tab.active {
background: #141b2d;
color: #ffffff !important;
}
[data-theme=dark] .msg-search input {
color: #c7cede;
}
[data-theme=dark] {
/* Global Search Popup / Command Palette */
}
[data-theme=dark] .mui-search-panel {
background: #141b2d !important;
border-color: rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
[data-theme=dark] .mui-search-top {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .mui-search-top > i {
color: #8a94a6;
}
[data-theme=dark] .mui-search-top input {
color: #f4f6fb;
}
[data-theme=dark] .mui-search-top input::placeholder {
color: #6b7590;
}
[data-theme=dark] .mui-search-esc {
color: #8a94a6;
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .mui-search-sec-hdr {
color: #6b7590;
}
[data-theme=dark] .mui-search-row:hover, [data-theme=dark] .mui-search-row.is-active {
background: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .msr-ic {
color: #8a94a6;
background: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .msr-txt {
color: #f4f6fb;
}
[data-theme=dark] .msr-tag {
color: #8a94a6;
background: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .msr-go {
color: #6b7590;
}
[data-theme=dark] .mui-search-empty {
color: #8a94a6;
}
[data-theme=dark] .mui-search-empty i {
color: #6b7590;
}
[data-theme=dark] .mui-search-foot {
border-top-color: rgba(255, 255, 255, 0.08);
color: #8a94a6;
}
[data-theme=dark] .mui-search-foot .mui-kbd {
color: #c7cede;
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .header .dropdown > .btn-outline-light.bg-white:not(.btn-icon):not(.mui-branch),
[data-theme=dark] .ay-head {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
/* ---------- RTL Overrides ---------- */
[dir=rtl] .page-wrapper {
margin-left: 0;
margin-right: 280px;
}
[dir=rtl] .sidebar {
left: auto;
right: 0;
border-right: 0;
border-left: 1px solid #E9EDF4;
}
[dir=rtl] .sidebar-menu ul li a .menu-arrow {
margin-left: 0;
margin-right: auto;
}
[dir=rtl] .sidebar-menu ul li a.active::before {
left: auto;
right: 0;
border-radius: 3px 0 0 3px;
}
[dir=rtl] .sidebar-menu ul ul li a {
padding-left: 10px !important;
padding-right: 38px !important;
}
@media (min-width: 992px) {
[dir=rtl] body.mini-sidebar .page-wrapper {
margin-left: 0;
margin-right: 84px;
}
}
/* ---------- RTL Overrides ---------- */
[dir=rtl] .header .mui-count {
right: auto;
left: -6px;
}
[dir=rtl] .ntf-item.unread::before {
left: auto;
right: 0;
border-radius: 3px 0 0 3px;
}
[dir=rtl] .ntf-badge {
right: auto;
left: -3px;
}
[dir=rtl] .msg-av::after {
right: auto;
left: 1px;
}
[dir=rtl] .anew-item:hover {
transform: translateX(-2px);
}
[dir=rtl] .anew-arrow {
transform: scaleX(-1) translateX(-4px);
}
[dir=rtl] .anew-item:hover .anew-arrow {
transform: scaleX(-1) translateX(0);
}
[dir=rtl] .ay-arrow {
transform: scaleX(-1) translateX(-4px);
}
[dir=rtl] .ay-item:hover .ay-arrow {
transform: scaleX(-1) translateX(0);
}
[dir=rtl] .lang-trigger-flag {
margin-left: 0;
}
.layout-mode-rtl .header .header-user .user-menu > .d-flex.align-items-center {
margin-right: auto;
margin-left: unset;
}
.layout-mode-rtl .header .dropdown > .btn-outline-light.bg-white:not(.btn-icon):not(.mui-branch) .ti-calendar-due {
margin-left: 8px !important;
margin-right: unset !important;
}
.layout-mode-rtl .header .searchinputs input {
padding-right: 45px !important;
padding-left: 10px !important;
}
.layout-mode-rtl .header .top-nav-search .search-addon {
position: absolute;
top: 50%;
left: 6px;
right: unset;
}
.layout-mode-rtl .header .top-nav-search .searchinputs::before {
right: 14px !important;
left: unset !important;
}
.layout-mode-rtl .header .dropdown > .btn-outline-light.bg-white:not(.btn-icon):not(.mui-branch)::after {
content: "\ea5f";
margin-right: 8px;
margin-left: unset;
}
.layout-mode-rtl .sidebar .sidebar-menu ul li a > i {
margin-left: 10px;
margin-right: unset;
}
.layout-mode-rtl .sidebar .sidebar-menu ul li a .menu-arrow {
margin-left: unset;
margin-right: auto;
}
[data-theme=dark] .stat-tile {
border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .stat-tile.stat-tile-plain {
background: #0f0c1c;
}
[data-theme=dark] .gauge .gauge-value {
color: #ffffff;
}
[data-theme=dark] .portal-button-dark {
background: #0F0C1C;
border-color: #1B1632;
}
[data-theme=dark] .btn.btn-light {
background-color: #0f0c1c;
color: #fff;
border: 1px solid #242033;
}
[data-theme=dark] .btn.btn-light:hover {
color: #0F0C1C;
}
[data-theme=dark] .bg-outline-secondary {
background-color: transparent !important;
}
[data-theme=dark] html .darkmode .todo-accordion .accordion-button.collapsed, [data-theme=dark] html[data-theme=dark] .todo-accordion .accordion-button.collapsed {
background: #0f0c1c !important;
}
[data-theme=dark] .bootstrap-tagsinput .tag {
background: #080809;
color: #fefefe;
}
[data-theme=dark] .profile-hero {
background: transparent;
}
[data-theme=dark] .profile-hero::before {
background: transparent;
}
[data-theme=dark] .profile-hero::after {
background: transparent;
}
[data-theme=dark] .alert-light {
background-color: #202C4B;
}
[data-theme=dark] .profile-insight-item {
background: rgb(19, 16, 34);
}
[data-theme=dark] .bg-transparent-warning {
background: rgba(254, 248, 234, 0.0509803922);
}
[data-theme=dark] .bg-transparent-info {
background: rgba(231, 241, 252, 0.0784313725);
}
[data-theme=dark] .bg-transparent-danger {
background: rgba(253, 233, 237, 0.1019607843);
}
[data-theme=dark] .badge.badge-light {
background: rgba(233, 237, 244, 0.0784313725);
}
[data-theme=dark] .bg-transparent-pending {
background: rgba(230, 249, 255, 0.0392156863);
}
[data-theme=dark] .bg-transparent-success {
background: rgba(232, 249, 232, 0.1215686275);
}
[data-theme=dark] .bg-transparent-light {
background: rgba(233, 237, 244, 0.0784313725);
}
[data-theme=dark] .add-more-timetable {
background: rgba(233, 237, 244, 0.1294117647);
}
[data-theme=dark] .timetable-day {
flex: 1 0 280px;
min-width: 280px;
}
[data-theme=dark] .rt-card {
background: #0F0C1C;
}
[data-theme=dark] .rt-card .rt-title {
margin-bottom: 4px;
color: #fff;
}
[data-theme=dark] .chip.chip-soft {
background: var(--chip-bg, rgba(233, 237, 244, 0.1294117647));
}
[data-theme=dark] .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), [data-theme=dark] .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, [data-theme=dark] .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select, [data-theme=dark] .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
border-color: #1B1632 !important;
}
[data-theme=dark] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
border-color: #1B1632 !important;
}
[data-theme=dark] .dropdown-divider {
border-color: #1B1632 !important;
}
[data-theme=dark] .border-top {
border-top: 1px solid #1B1632 !important;
}
[data-theme=dark] .ntf-row.is-unread:hover {
background: #0F0C1C;
}
[data-theme=dark] .ntf-ann-head {
background: var(--tint-primary) !important;
}
[data-theme=dark] {
/* ============================================================
PAYMENT SETTINGS DARK MODE OVERRIDES
============================================================ */
}
[data-theme=dark] .fin-hero-env {
background: #1B1632 !important;
color: #ffffff !important;
border: 1px solid #322D46;
}
[data-theme=dark] .fin-hero-env.is-test {
background: rgba(255, 159, 67, 0.2) !important;
color: #ff9f43 !important;
border-color: rgba(255, 159, 67, 0.35) !important;
}
[data-theme=dark] .fin-badge.is-live {
background: rgba(40, 199, 111, 0.16) !important;
border-color: rgba(40, 199, 111, 0.32) !important;
color: #28c76f !important;
}
[data-theme=dark] .fin-badge.is-test {
background: rgba(255, 159, 67, 0.16) !important;
border-color: rgba(255, 159, 67, 0.32) !important;
color: #ff9f43 !important;
}
[data-theme=dark] .fin-badge.is-review {
background: rgba(115, 103, 240, 0.16) !important;
border-color: rgba(115, 103, 240, 0.32) !important;
color: #7367f0 !important;
}
[data-theme=dark] .fin-badge.is-alert {
background: rgba(234, 84, 85, 0.16) !important;
border-color: rgba(234, 84, 85, 0.32) !important;
color: #ea5455 !important;
}
[data-theme=dark] .fin-badge.is-off {
background: #131022 !important;
border-color: #1B1632 !important;
color: #B9B7C0 !important;
}
[data-theme=dark] .fin-nav-tag.is-set {
background: rgba(40, 199, 111, 0.16) !important;
color: #28c76f !important;
}
[data-theme=dark] .fin-nav-tag.is-warn {
background: rgba(255, 159, 67, 0.16) !important;
color: #ff9f43 !important;
}
[data-theme=dark] .fin-rule-then {
background: rgba(40, 199, 111, 0.16) !important;
color: #28c76f !important;
}
[data-theme=dark] .fin-rule-cond {
background: rgba(115, 103, 240, 0.16) !important;
color: #7367f0 !important;
}
[data-theme=dark] .fin-card-ic.is-money {
background: rgba(40, 199, 111, 0.16) !important;
color: #28c76f !important;
}
[data-theme=dark] .fin-card-ic.is-warn {
background: rgba(255, 159, 67, 0.16) !important;
color: #ff9f43 !important;
}
[data-theme=dark] .fin-card-ic.is-alert {
background: rgba(234, 84, 85, 0.16) !important;
color: #ea5455 !important;
}
[data-theme=dark] .fin-note.is-money .fin-note-head i {
color: #28c76f !important;
}
[data-theme=dark] .fin-note.is-warn .fin-note-head i {
color: #ff9f43 !important;
}
[data-theme=dark] .fin-note.is-alert .fin-note-head i {
color: #ea5455 !important;
}
[data-theme=dark] .fin-tab-n {
background: rgba(255, 255, 255, 0.14) !important;
color: inherit !important;
}
[data-theme=dark] .fin-delta ins {
color: #28c76f !important;
}
[data-theme=dark] .fin-prov-key {
background: #131022 !important;
border-color: #1B1632 !important;
color: #B9B7C0 !important;
}
[data-theme=dark] .fin-prov-key code {
color: #EFEFF2 !important;
}
[data-theme=dark] .fin-rule-n {
background: #131022 !important;
border-color: #1B1632 !important;
color: #B9B7C0 !important;
}
[data-theme=dark] .fin-dep {
background: #131022 !important;
border-color: #1B1632 !important;
color: #B9B7C0 !important;
}
[data-theme=dark] .fin-dep.is-missing {
background: rgba(234, 84, 85, 0.16) !important;
border-color: rgba(234, 84, 85, 0.32) !important;
color: #ea5455 !important;
}
[data-theme=dark] {
/* --- Form Controls & Inputs --- */
}
[data-theme=dark] .fin-input,
[data-theme=dark] .fin-select {
background-color: #0F0C1C !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .fin-input:focus,
[data-theme=dark] .fin-select:focus {
border-color: var(--bs-primary) !important;
box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.25) !important;
}
[data-theme=dark] .fin-input option,
[data-theme=dark] .fin-select option {
background-color: #0F0C1C !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .fin-money-field {
border-color: #1B1632 !important;
background-color: #0F0C1C !important;
}
[data-theme=dark] .fin-money-field .fin-money-sym {
background-color: #131022 !important;
border-right-color: #1B1632 !important;
color: #B9B7C0 !important;
}
[data-theme=dark] .fin-money-field input {
background-color: transparent !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .fin-money-field input::placeholder {
color: rgba(91, 87, 107, 0.6980392157) !important;
}
[data-theme=dark] .fin-money-field:focus-within {
border-color: var(--bs-primary) !important;
box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.25) !important;
}
[data-theme=dark] {
/* ============================================================
WORKFLOW RULES DARK MODE OVERRIDES
============================================================ */
}
[data-theme=dark] .rule-status-badge.is-on {
background: rgba(40, 199, 111, 0.16) !important;
color: #28c76f !important;
}
[data-theme=dark] .rule-status-badge.is-draft {
background: rgba(115, 103, 240, 0.16) !important;
color: #7367f0 !important;
}
[data-theme=dark] .rule-status-badge.is-warn {
background: rgba(255, 159, 67, 0.16) !important;
color: #ff9f43 !important;
}
[data-theme=dark] .rule-status-badge.is-stop {
background: rgba(234, 84, 85, 0.16) !important;
color: #ea5455 !important;
}
[data-theme=dark] .rule-status-badge.is-accent {
background: rgba(115, 103, 240, 0.16) !important;
color: #7367f0 !important;
}
[data-theme=dark] .rule-status-badge.is-off {
background: #131022 !important;
border-color: #1B1632 !important;
color: #B9B7C0 !important;
}
[data-theme=dark] .clause {
background: #131022;
}
[data-theme=dark] .clause.is-when {
background: rgba(115, 103, 240, 0.16) !important;
}
[data-theme=dark] .clause.is-when::before {
color: #7367f0 !important;
}
[data-theme=dark] .clause.is-if {
background: rgba(255, 159, 67, 0.16) !important;
}
[data-theme=dark] .clause.is-if::before {
color: #ff9f43 !important;
}
[data-theme=dark] .clause.is-then {
background: rgba(40, 199, 111, 0.16) !important;
}
[data-theme=dark] .clause.is-then::before {
color: #28c76f !important;
}
[data-theme=dark] .clause code {
background: #0F0C1C !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .priority.is-high span.is-lit {
background: #ff9f43 !important;
}
[data-theme=dark] .priority.is-critical span.is-lit {
background: #ea5455 !important;
}
[data-theme=dark] .actions .rule-action {
background: rgba(40, 199, 111, 0.16) !important;
color: #28c76f !important;
}
[data-theme=dark] .builder-icon {
background: rgba(255, 159, 67, 0.16) !important;
color: #ff9f43 !important;
}
[data-theme=dark] .key {
background: #131022 !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .join-pill {
background: #131022 !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .join-pill button {
color: #B9B7C0 !important;
}
[data-theme=dark] .join-pill button.is-active {
background: var(--bs-primary) !important;
color: #ffffff !important;
}
[data-theme=dark] .variable {
background: rgba(115, 103, 240, 0.16) !important;
color: #7367f0 !important;
}
[data-theme=dark] .variable:hover {
background: #131022 !important;
border-color: var(--bs-primary) !important;
}
[data-theme=dark] .rule.is-error {
border-color: rgba(234, 84, 85, 0.4) !important;
}
[data-theme=dark] .rule.is-error::before {
background: #ea5455 !important;
}
[data-theme=dark] .rule.is-off {
background: #0F0C1C !important;
}
[data-theme=dark] .rating .rating-rate {
color: #ffffff !important;
}
[data-theme=dark] {
/* ============================================================
UPLOAD BUTTON & PICTURE UPLOADER DARK MODE OVERRIDES
============================================================ */
}
[data-theme=dark] .drag-upload-btn {
background-color: #131022 !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .drag-upload-btn:hover {
background-color: #1B1632 !important;
color: #ffffff !important;
}
[data-theme=dark] .drag-upload-btn input {
color: #EFEFF2 !important;
}
[data-theme=dark] .profile-uploader .drag-upload-btn,
[data-theme=dark] .upload-pic .drag-upload-btn {
background-color: #131022 !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .upload-pic .avatar.frames,
[data-theme=dark] .upload-pic .frames,
[data-theme=dark] .avatar.frames,
[data-theme=dark] .frames {
background-color: #131022 !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .upload-pic .avatar.frames i,
[data-theme=dark] .upload-pic .frames i,
[data-theme=dark] .avatar.frames i,
[data-theme=dark] .frames i {
color: #EFEFF2 !important;
}
[data-theme=dark] {
/* ============================================================
SUMMERNOTE / RICH TEXT EDITOR DARK MODE OVERRIDES
============================================================ */
}
[data-theme=dark] .note-editor.note-frame,
[data-theme=dark] .note-editor.note-airframe,
[data-theme=dark] .note-editor {
border-color: #1B1632 !important;
background-color: #0F0C1C !important;
}
[data-theme=dark] .note-editor.note-frame .note-toolbar,
[data-theme=dark] .note-editor.note-airframe .note-toolbar,
[data-theme=dark] .note-editor .note-toolbar {
background-color: #131022 !important;
border-bottom-color: #1B1632 !important;
}
[data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn-group .note-btn,
[data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn-group .btn,
[data-theme=dark] .note-editor.note-frame .note-toolbar .btn-group .note-btn,
[data-theme=dark] .note-editor.note-frame .note-toolbar .btn-group .btn,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn-group .note-btn,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn-group .btn,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .btn-group .note-btn,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .btn-group .btn,
[data-theme=dark] .note-editor .note-toolbar .note-btn-group .note-btn,
[data-theme=dark] .note-editor .note-toolbar .note-btn-group .btn,
[data-theme=dark] .note-editor .note-toolbar .btn-group .note-btn,
[data-theme=dark] .note-editor .note-toolbar .btn-group .btn {
background-color: #0F0C1C !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn-group .note-btn:hover, [data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn-group .note-btn:focus, [data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn-group .note-btn.active, [data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn-group .note-btn:active,
[data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn-group .btn:hover,
[data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn-group .btn:focus,
[data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn-group .btn.active,
[data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn-group .btn:active,
[data-theme=dark] .note-editor.note-frame .note-toolbar .btn-group .note-btn:hover,
[data-theme=dark] .note-editor.note-frame .note-toolbar .btn-group .note-btn:focus,
[data-theme=dark] .note-editor.note-frame .note-toolbar .btn-group .note-btn.active,
[data-theme=dark] .note-editor.note-frame .note-toolbar .btn-group .note-btn:active,
[data-theme=dark] .note-editor.note-frame .note-toolbar .btn-group .btn:hover,
[data-theme=dark] .note-editor.note-frame .note-toolbar .btn-group .btn:focus,
[data-theme=dark] .note-editor.note-frame .note-toolbar .btn-group .btn.active,
[data-theme=dark] .note-editor.note-frame .note-toolbar .btn-group .btn:active,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn-group .note-btn:hover,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn-group .note-btn:focus,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn-group .note-btn.active,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn-group .note-btn:active,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn-group .btn:hover,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn-group .btn:focus,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn-group .btn.active,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn-group .btn:active,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .btn-group .note-btn:hover,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .btn-group .note-btn:focus,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .btn-group .note-btn.active,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .btn-group .note-btn:active,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .btn-group .btn:hover,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .btn-group .btn:focus,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .btn-group .btn.active,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .btn-group .btn:active,
[data-theme=dark] .note-editor .note-toolbar .note-btn-group .note-btn:hover,
[data-theme=dark] .note-editor .note-toolbar .note-btn-group .note-btn:focus,
[data-theme=dark] .note-editor .note-toolbar .note-btn-group .note-btn.active,
[data-theme=dark] .note-editor .note-toolbar .note-btn-group .note-btn:active,
[data-theme=dark] .note-editor .note-toolbar .note-btn-group .btn:hover,
[data-theme=dark] .note-editor .note-toolbar .note-btn-group .btn:focus,
[data-theme=dark] .note-editor .note-toolbar .note-btn-group .btn.active,
[data-theme=dark] .note-editor .note-toolbar .note-btn-group .btn:active,
[data-theme=dark] .note-editor .note-toolbar .btn-group .note-btn:hover,
[data-theme=dark] .note-editor .note-toolbar .btn-group .note-btn:focus,
[data-theme=dark] .note-editor .note-toolbar .btn-group .note-btn.active,
[data-theme=dark] .note-editor .note-toolbar .btn-group .note-btn:active,
[data-theme=dark] .note-editor .note-toolbar .btn-group .btn:hover,
[data-theme=dark] .note-editor .note-toolbar .btn-group .btn:focus,
[data-theme=dark] .note-editor .note-toolbar .btn-group .btn.active,
[data-theme=dark] .note-editor .note-toolbar .btn-group .btn:active {
background-color: #1B1632 !important;
color: #ffffff !important;
border-color: #322D46 !important;
}
[data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn,
[data-theme=dark] .note-editor .note-toolbar .note-btn {
background-color: #0F0C1C !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn:hover, [data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn:focus, [data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn.active, [data-theme=dark] .note-editor.note-frame .note-toolbar .note-btn:active,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn:hover,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn:focus,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn.active,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-btn:active,
[data-theme=dark] .note-editor .note-toolbar .note-btn:hover,
[data-theme=dark] .note-editor .note-toolbar .note-btn:focus,
[data-theme=dark] .note-editor .note-toolbar .note-btn.active,
[data-theme=dark] .note-editor .note-toolbar .note-btn:active {
background-color: #1B1632 !important;
color: #ffffff !important;
border-color: #322D46 !important;
}
[data-theme=dark] .note-editor.note-frame .note-toolbar .note-color-all .note-color-reset,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-color-all .note-color-reset,
[data-theme=dark] .note-editor .note-toolbar .note-color-all .note-color-reset {
background-color: #0F0C1C !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .note-editor.note-frame .note-toolbar .note-color-all .note-color-reset:hover,
[data-theme=dark] .note-editor.note-airframe .note-toolbar .note-color-all .note-color-reset:hover,
[data-theme=dark] .note-editor .note-toolbar .note-color-all .note-color-reset:hover {
background-color: #1B1632 !important;
}
[data-theme=dark] .note-editor.note-frame .note-editing-area,
[data-theme=dark] .note-editor.note-airframe .note-editing-area,
[data-theme=dark] .note-editor .note-editing-area {
background-color: #0F0C1C !important;
}
[data-theme=dark] .note-editor.note-frame .note-editing-area .note-editable,
[data-theme=dark] .note-editor.note-airframe .note-editing-area .note-editable,
[data-theme=dark] .note-editor .note-editing-area .note-editable {
background-color: #0F0C1C !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .note-editor.note-frame .note-editing-area .note-editable[contenteditable=true]:focus,
[data-theme=dark] .note-editor.note-airframe .note-editing-area .note-editable[contenteditable=true]:focus,
[data-theme=dark] .note-editor .note-editing-area .note-editable[contenteditable=true]:focus {
background-color: #0F0C1C !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .note-editor.note-frame .note-statusbar,
[data-theme=dark] .note-editor.note-airframe .note-statusbar,
[data-theme=dark] .note-editor .note-statusbar {
background-color: #131022 !important;
border-top-color: #1B1632 !important;
}
[data-theme=dark] .note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar,
[data-theme=dark] .note-editor.note-airframe .note-statusbar .note-resizebar .note-icon-bar,
[data-theme=dark] .note-editor .note-statusbar .note-resizebar .note-icon-bar {
border-top-color: rgba(91, 87, 107, 0.6980392157) !important;
}
[data-theme=dark] .note-popover,
[data-theme=dark] .note-dropdown-menu,
[data-theme=dark] .dropdown-menu.note-check {
background-color: #131022 !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .note-popover .dropdown-item,
[data-theme=dark] .note-popover .note-dropdown-item,
[data-theme=dark] .note-dropdown-menu .dropdown-item,
[data-theme=dark] .note-dropdown-menu .note-dropdown-item,
[data-theme=dark] .dropdown-menu.note-check .dropdown-item,
[data-theme=dark] .dropdown-menu.note-check .note-dropdown-item {
color: #EFEFF2 !important;
}
[data-theme=dark] .note-popover .dropdown-item:hover, [data-theme=dark] .note-popover .dropdown-item:focus,
[data-theme=dark] .note-popover .note-dropdown-item:hover,
[data-theme=dark] .note-popover .note-dropdown-item:focus,
[data-theme=dark] .note-dropdown-menu .dropdown-item:hover,
[data-theme=dark] .note-dropdown-menu .dropdown-item:focus,
[data-theme=dark] .note-dropdown-menu .note-dropdown-item:hover,
[data-theme=dark] .note-dropdown-menu .note-dropdown-item:focus,
[data-theme=dark] .dropdown-menu.note-check .dropdown-item:hover,
[data-theme=dark] .dropdown-menu.note-check .dropdown-item:focus,
[data-theme=dark] .dropdown-menu.note-check .note-dropdown-item:hover,
[data-theme=dark] .dropdown-menu.note-check .note-dropdown-item:focus {
background-color: #1B1632 !important;
color: #ffffff !important;
}
[data-theme=dark] {
/* ============================================================
SCHOOL PROFILE DARK MODE OVERRIDES
============================================================ */
}
[data-theme=dark] .identity-panel {
background: linear-gradient(115deg, rgba(115, 103, 240, 0.15) 0%, #131022 44%), #131022 !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .identity-panel::after {
border-color: rgba(115, 103, 240, 0.15) !important;
}
[data-theme=dark] .identity-crest {
background: #0F0C1C !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .identity-crest-pip {
border-color: #0F0C1C !important;
}
[data-theme=dark] .identity-panel-name {
color: #EFEFF2 !important;
}
[data-theme=dark] .identity-facts {
border-top-color: #1B1632 !important;
}
[data-theme=dark] .identity-fact b {
color: #EFEFF2 !important;
}
[data-theme=dark] .section-nav {
background: #131022 !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .section-nav-heading {
color: #B9B7C0 !important;
}
[data-theme=dark] .section-nav-link {
color: #B9B7C0 !important;
}
[data-theme=dark] .section-nav-link:hover {
background: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .section-nav-link.active {
background: rgba(115, 103, 240, 0.16) !important;
color: #7367f0 !important;
}
[data-theme=dark] .section-nav-link.active::before {
background: #7367f0 !important;
}
[data-theme=dark] .section-nav-foot {
border-top-color: #1B1632 !important;
}
[data-theme=dark] .section-head-title {
color: #EFEFF2 !important;
}
[data-theme=dark] .section-head-sub {
color: #B9B7C0 !important;
}
[data-theme=dark] .option-card {
background: #131022 !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .option-card-head {
background: #0F0C1C !important;
border-bottom-color: #1B1632 !important;
}
[data-theme=dark] .option-card-icon {
background: #131022 !important;
border-color: #1B1632 !important;
color: #7367f0 !important;
}
[data-theme=dark] .option-card-title {
color: #EFEFF2 !important;
}
[data-theme=dark] .option-row + .option-row {
border-top-color: #1B1632 !important;
}
[data-theme=dark] .option-row-key {
color: #B9B7C0 !important;
}
[data-theme=dark] .option-row-value {
color: #EFEFF2 !important;
}
[data-theme=dark] .option-row-value.is-empty {
color: rgba(91, 87, 107, 0.6980392157) !important;
}
[data-theme=dark] .option-row-value code {
background: #0F0C1C !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .inline-edit {
background: #0F0C1C !important;
border-color: #1B1632 !important;
color: #B9B7C0 !important;
}
[data-theme=dark] .inline-edit:hover {
background: rgba(115, 103, 240, 0.16) !important;
border-color: #7367f0 !important;
color: #7367f0 !important;
}
[data-theme=dark] .asset-card,
[data-theme=dark] .color-swatch {
background: #131022 !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .asset-card-title {
color: #EFEFF2 !important;
}
[data-theme=dark] .inset-well {
background: #0F0C1C !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .contact-block {
background: #131022 !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .contact-block-title {
color: #EFEFF2 !important;
}
[data-theme=dark] .contact-block-text {
color: #B9B7C0 !important;
}
[data-theme=dark] .contact-block-icon {
background: #0F0C1C !important;
color: #7367f0 !important;
}
[data-theme=dark] .contact-block-icon.is-alert {
background: rgba(234, 84, 85, 0.16) !important;
color: #ea5455 !important;
}
[data-theme=dark] .contact-block-icon.is-good {
background: rgba(40, 199, 111, 0.16) !important;
color: #28c76f !important;
}
[data-theme=dark] .compliance-card {
background: #131022 !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .compliance-card.is-expiring {
border-color: rgba(234, 84, 85, 0.4) !important;
}
[data-theme=dark] .compliance-card.is-pending {
border-color: rgba(255, 159, 67, 0.4) !important;
}
[data-theme=dark] .compliance-card-title {
color: #EFEFF2 !important;
}
[data-theme=dark] .compliance-card-foot {
border-top-color: #1B1632 !important;
}
[data-theme=dark] .reference-code {
background: #0F0C1C !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .person-block {
background: #131022 !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .person-block-name {
color: #EFEFF2 !important;
}
[data-theme=dark] .person-block-role {
color: #7367f0 !important;
}
[data-theme=dark] .document-row,
[data-theme=dark] .usage-row {
background: #131022 !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .document-row-title {
color: #EFEFF2 !important;
}
[data-theme=dark] .document-row-icon {
background: #0F0C1C !important;
color: #7367f0 !important;
}
[data-theme=dark] .document-row-icon.is-pdf {
background: rgba(234, 84, 85, 0.16) !important;
color: #ea5455 !important;
}
[data-theme=dark] .document-row-icon.is-doc {
background: rgba(115, 103, 240, 0.16) !important;
color: #7367f0 !important;
}
[data-theme=dark] .document-row-icon.is-img {
background: rgba(40, 199, 111, 0.16) !important;
color: #28c76f !important;
}
[data-theme=dark] .audit-event {
border-bottom-color: #1B1632 !important;
}
[data-theme=dark] .audit-event-title {
color: #EFEFF2 !important;
}
[data-theme=dark] .delta-value {
background: #0F0C1C !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .delta-value s {
color: #B9B7C0 !important;
}
[data-theme=dark] .delta-value b {
color: #28c76f !important;
}
[data-theme=dark] .flush-panel {
background: #131022 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .flush-panel-head,
[data-theme=dark] .offcanvas-footer {
background: #0F0C1C !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .outline-box {
background: #131022 !important;
border-color: #1B1632 !important;
}
[data-theme=dark] .outline-box-head {
border-bottom-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .outline-box-head h6 {
color: #EFEFF2 !important;
}
[data-theme=dark] .check-row {
border-bottom-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .check-row.is-warn {
color: #ff9f43 !important;
}
[data-theme=dark] .inline-drop {
background: #0F0C1C !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .settings-modal .modal-content {
background: #131022 !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .settings-modal .modal-header,
[data-theme=dark] .settings-modal .modal-footer {
border-color: #1B1632 !important;
}
[data-theme=dark] .meta-badge {
background: #1B1632 !important;
border-color: #26213f !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .meta-badge.is-active {
color: #3ddc84 !important;
background: rgba(26, 190, 23, 0.14) !important;
border-color: rgba(26, 190, 23, 0.28) !important;
}
[data-theme=dark] .meta-badge.is-pending {
color: #ffcf5c !important;
background: rgba(234, 179, 0, 0.14) !important;
border-color: rgba(234, 179, 0, 0.28) !important;
}
[data-theme=dark] .meta-badge.is-expiring {
color: #ff7a90 !important;
background: rgba(232, 38, 70, 0.16) !important;
border-color: rgba(232, 38, 70, 0.3) !important;
}
[data-theme=dark] .meta-badge.is-draft {
color: #6fb3ff !important;
background: rgba(15, 101, 205, 0.18) !important;
border-color: rgba(15, 101, 205, 0.32) !important;
}
[data-theme=dark] .state-dot.is-empty {
background: #2c2749 !important;
}
[data-theme=dark] .table tbody tr, [data-theme=dark] .table thead tr {
border-color: #12101e !important;
}
[data-theme=dark] .btn-soft-success {
background-color: rgba(186, 236, 185, 0.1215686275) !important;
}
[data-theme=dark] .btn-soft-danger {
background-color: rgba(248, 190, 200, 0.1607843137) !important;
}
[data-theme=dark] .btn-soft-primary {
background-color: #141b2d !important;
}
[data-theme=dark] {
/* ============================================================
FILE UPLOAD COMPONENT DARK MODE OVERRIDES
============================================================ */
}
[data-theme=dark] .custom-file-container label {
color: #EFEFF2 !important;
}
[data-theme=dark] .custom-file-container .custom-file-container__image-clear {
color: #ea5455 !important;
}
[data-theme=dark] .custom-file-container .custom-file-container__image-clear:hover {
color: #ff9f43 !important;
}
[data-theme=dark] .custom-file-container .custom-file-container__custom-file__custom-file-control {
background-color: #0F0C1C !important;
border-color: #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .custom-file-container .custom-file-container__custom-file__custom-file-control__button {
background-color: rgba(115, 103, 240, 0.2) !important;
color: #7367f0 !important;
border-left-color: #1B1632 !important;
}
[data-theme=dark] .custom-file-container .custom-file-container__image-preview,
[data-theme=dark] .custom-file-container .custom-file-container__image-multi-preview {
background-color: #0F0C1C !important;
border: 1px solid #1B1632 !important;
color: #EFEFF2 !important;
}
[data-theme=dark] .card-bodyquote p {
color: #FFF !important;
}
[data-theme=dark] .action-card {
background-color: #0F0C1C !important;
}
[data-theme=dark] .action-card .action-card-title {
color: #EFEFF2 !important;
}
[data-theme=dark] .stat-value {
color: #EFEFF2 !important;
}
[data-theme=dark] .bg-nav-pills .nav-item .nav-link {
background: #141b2d !important;
}
[data-theme=dark] .bg-nav-pills .nav-item .nav-link.active {
background: #3D5EE1 !important;
}
[data-theme=dark] .offcanvas .btn-close {
color: #FFF !important;
}
[data-theme=dark] .auth-logo .logo-dark {
display: none !important;
}
[data-theme=dark] .auth-logo .logo-white {
display: block !important;
}
[data-theme=dark] .grid-structure .grid-container {
background-color: #0F0C1C !important;
border-radius: 6px;
}
[data-theme=dark] .card .card-text {
color: #FFF !important;
}
[data-theme=dark] .fc .fc-button-primary {
background-color: #0f0c1c;
border-color: #0f0c1c;
}
[data-theme=dark] .fc-event-main {
color: #b4e6ff !important;
}
[data-theme=dark] .mui-profile-head {
border-bottom: #1B1632 !important;
}
[data-theme=dark] .mui-profile-body hr {
border-color: #1B1632 !important;
}
[data-theme=dark] .sdt-hero {
background: linear-gradient(115deg, #090909 0%, var(--bs-body-bg) 46%, var(--bs-body-bg) 100%);
}
[data-theme=dark] .sdt-story {
background: linear-gradient(165deg, #000000 0%, var(--bs-body-bg) 58%) !important;
}
[data-theme=dark] .tto-rec-rank, [data-theme=dark] .tto-mark-n {
background: #282b2d;
}
[data-theme=dark] .tto-hero::before {
content: "";
background-image: repeating-linear-gradient(90deg, var(--bs-border-color) 0 1px, rgba(0, 0, 0, 0.9882352941) 1px 84px);
mask-image: linear-gradient(180deg, #000 0%, #000000 80%);
}
[data-theme=dark] .tto-hero-badge {
background: var(--bs-primary);
}
[data-theme=dark] .hwk-studio-inner::before {
content: "";
background: #1a1d29;
}
[data-theme=dark] .hwk-studio {
background: linear-gradient(180deg, #000000 0%, var(--bs-body-bg) 34%), var(--bs-body-bg);
}
[data-theme=dark] .hwk-sub-head::before {
background: #000000;
}
[data-theme=dark] .tch-stage {
background: radial-gradient(90% 120% at 100% 100%, rgba(2, 168, 181, 0.12) 0%, transparent 58%), linear-gradient(160deg, #000000 0%, var(--bs-body-bg) 44%), var(--bs-body-bg);
}
[data-theme=dark] .fam-hero {
background: radial-gradient(80% 120% at 0% 100%, rgba(2, 168, 181, 0.12) 0%, transparent 55%), linear-gradient(200deg, #000000 0%, var(--bs-body-bg) 46%), var(--bs-body-bg);
}
[data-theme=dark] .ntf-hero {
background: radial-gradient(70% 130% at 100% 0%, #000000 0%, transparent 58%), var(--bs-body-bg);
}
[data-theme=dark] .bg-gray {
background: #141b2d;
}
[data-theme=dark] .bg-transparent-dark {
background: rgba(255, 0, 18, 0.168627451);
}
[data-theme=dark] .status-toggle.modal-status label {
background-color: #0d0d0d;
border: 1px solid #1d1e1f;
}
/******* Vendors ******/
.select2-container {
min-width: 100% !important;
z-index: 99;
}
.select2-container .select2-selection--single {
height: 38px;
}
.select2-container--default .select2-selection--single {
border: 1px solid var(--Stroke, rgba(145, 158, 171, 0.3));
border-radius: 5px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #202C4B !important;
line-height: 38px;
border-radius: 5px;
padding-left: 10px;
font-size: 14px;
font-weight: 400;
padding-right: 30px;
}
.select2-container--default .select2-selection--single .select {
width: 219px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px;
right: 7px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
position: absolute;
top: 50%;
left: 50%;
border-color: #515B73;
border-style: solid;
border-width: 0 1px 1px 0;
padding: 3px;
height: 0;
margin-left: -6px;
margin-top: -3px;
width: 0;
transform: rotate(45deg) translateY(-50%);
-webkit-transform: rotate(45deg) translateY(-50%);
-ms-transform: rotate(45deg) translateY(-50%);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: #000;
border-width: 1px 0 0 1px;
margin-top: 3px;
padding: 3px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #3D5EE1;
color: #FFF;
}
.select2-container--focus .select2-selection--single {
background: #FFF !important;
border-color: #E9EDF4;
}
span.select2-container.select2-container--default.select2-container--open {
z-index: 9999;
box-shadow: 0px 4.4px 12px -1px rgba(222, 222, 222, 0.36);
}
.select2-container--classic .select2-selection--single,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--multiple,
.select2-container--classic .select2-selection--single .select2-selection__arrow,
.select2-container--classic .select2-selection--single .select2-selection__rendered {
border-color: #E9EDF4;
color: #6A7287;
}
.select2-dropdown {
border-color: #E9EDF4;
}
.select2-container--default .select2-selection--multiple {
line-height: 27px;
height: 38px;
overflow: hidden;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
background-color: #0F65CD;
border-color: #0F65CD;
color: #FFF;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
border-color: #3D5EE1;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: #3D5EE1;
}
.select2-container--open .ti-filter {
z-index: 9999 !important;
}
.choices__list--multiple .choices__item {
padding: 1px 10px;
}
.choices__input {
background: transparent;
}
table.dataTable {
margin: 0 !important;
}
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
right: 10px !important;
content: "\f0d7" !important;
font-family: "Font Awesome 5 Free";
bottom: 8px !important;
color: #CDD0D7 !important;
font-size: 10px !important;
opacity: 1 !important;
position: absolute;
font-weight: 600;
line-height: 1px !important;
}
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
right: 10px !important;
content: "\f0d8" !important;
font-family: "Font Awesome 5 Free";
top: 18px !important;
color: #CDD0D7 !important;
font-size: 10px !important;
opacity: 1 !important;
position: absolute;
font-weight: 600;
line-height: 1px !important;
}
.dataTables_paginate .paging_numbers {
float: right;
}
.dataTables_info {
font-size: 15px;
color: #515B73;
font-weight: 500;
}
@media (max-width: 767.98px) {
.dataTables_info {
font-size: 12px;
}
}
.custom-select {
min-width: 80px;
background: url(../img/icons/dropdown.svg) no-repeat 95% 50%;
}
.dataTables_paginate .pagination {
justify-content: end;
-webkit-justify-content: end;
-ms-flex-pack: end;
}
.dataTables_paginate .pagination li {
margin: 0 2px;
}
.dataTables_paginate .pagination li a {
background: transparent;
border-color: transparent;
border-radius: 5px !important;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: #515B73;
font-size: 14px;
}
.dataTables_paginate .pagination li a:hover {
background: #3D5EE1;
color: #FFF;
}
.dataTables_paginate .pagination li.active a.page-link {
background: #3D5EE1;
border-color: #3D5EE1;
border-radius: 5px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.dataTables_paginate .pagination li.previous.disabled, .dataTables_paginate .pagination li.prev {
width: auto;
margin: 0 13px 0 0;
}
.dataTables_paginate .pagination li.previous.disabled a, .dataTables_paginate .pagination li.prev a {
background-color: transparent;
border: 0;
width: auto;
padding: 0;
}
.dataTables_paginate .pagination li.previous.disabled a i, .dataTables_paginate .pagination li.prev a i {
margin-right: 8px;
}
.dataTables_paginate .pagination li.previous.disabled a:hover, .dataTables_paginate .pagination li.prev a:hover {
color: #2CA87F;
}
.dataTables_paginate .pagination li.next.disabled, .dataTables_paginate .pagination li.next {
width: auto;
margin: 0 0 0 13px;
}
.dataTables_paginate .pagination li.next.disabled a, .dataTables_paginate .pagination li.next a {
background-color: transparent;
border: 0;
width: auto;
padding: 0;
}
.dataTables_paginate .pagination li.next.disabled a i, .dataTables_paginate .pagination li.next a i {
margin-left: 8px;
}
.dataTables_paginate .pagination li.next.disabled a:hover, .dataTables_paginate .pagination li.next a:hover {
color: #2CA87F;
}
@media (max-width: 767.98px) {
.dataTables_paginate .pagination {
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
}
}
.dataTables_length {
margin-bottom: 15px;
}
.dataTables_paginate {
margin-top: 15px !important;
}
.dataTables_length label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #515B73;
font-size: 14px;
}
.dataTables_length label .form-select {
width: 61px;
border: 1px solid #E9EDF4;
border-radius: 6px;
color: #515B73;
margin: 0 8px;
background-position: right 5px center;
padding-right: 15px;
}
@media (max-width: 767.98px) {
.datatable-length {
text-align: center;
}
}
div.dataTables_wrapper div.dataTables_info {
padding-top: 15px;
}
table.dataTable thead > tr > th.no-sort.sorting_asc:before, table.dataTable thead > tr > th.no-sort.sorting_asc::after, table.dataTable thead > tr > th.no-sort.sorting:before, table.dataTable thead > tr > th.no-sort.sorting::after {
display: none;
}
.custom-table .table-responsive {
border: 1px solid #E9EDF4;
border-radius: 6px;
}
table.table.dataTable > tbody > tr {
border-color: #E9EDF4;
}
table.table.dataTable > tbody > tr td {
color: #515B73;
border-bottom: 1px solid #E9EDF4;
padding: 12px 20px;
}
table.table.dataTable > thead > tr {
border-color: #E9EDF4;
}
table.table.dataTable > thead > tr th {
color: #202C4B;
font-size: 14px;
font-weight: 500;
padding: 12px 20px;
}
.dataTables_filter {
margin-bottom: 15px;
}
.dataTables_filter input {
height: 38px;
font-size: 14px;
padding: 0.5rem 0.625rem;
}
#select-all ~ .checkmarks {
top: -7px;
}
#select-all2 ~ .checkmarks {
top: -7px;
}
#select-all3 ~ .checkmarks {
top: -7px;
}
.custom-datatable-filter [class*=col-md] {
padding-right: 1rem !important;
padding-left: 1rem !important;
}
.no-datatable_length .dataTables_length {
display: none;
}
.no-datatable_length .dataTables_filter {
display: none;
}
.no-datatable_length .dataTables_info {
display: none;
}
.no-datatable_length .dataTables_paginate {
display: none;
}
.datatable-info .dataTables_info {
display: none !important;
}
.datatable-info .dataTables_info:first-child {
display: block !important;
}
.datatable-length .dataTables_length {
display: none !important;
}
.datatable-length .dataTables_length:first-child {
display: block !important;
}
.datatable-paginate .dataTables_paginate {
display: none !important;
}
.datatable-paginate .dataTables_paginate:first-child {
display: block !important;
}
.daterangepicker .ranges li.active {
background-color: #3D5EE1;
}
.daterangepicker td.active {
background-color: #3D5EE1;
}
.daterangepicker td.active:hover {
background-color: #3D5EE1;
}
.daterange-wraper .date-range {
padding-left: 30px;
font-size: 14px;
color: #515B73;
border: 0;
min-height: auto;
height: 36px;
border: 0;
box-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.0509803922);
}
.daterange-wraper .date-range:focus {
border-left: 0;
}
.daterange-wraper .cal-icon-date {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
[data-simplebar] {
position: relative;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.simplebar-wrapper {
overflow: hidden;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
.simplebar-mask {
direction: inherit;
position: absolute;
overflow: hidden;
padding: 0;
margin: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: auto !important;
height: auto !important;
z-index: 0;
}
.simplebar-offset {
direction: inherit !important;
box-sizing: inherit !important;
resize: none !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
-webkit-overflow-scrolling: touch;
}
.simplebar-content-wrapper {
direction: inherit;
box-sizing: border-box !important;
position: relative;
display: block;
height: 100%;
/* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
width: auto;
overflow: auto;
/* Scroll on this element otherwise element can't have a padding applied properly */
max-width: 100%;
/* Not required for horizontal scroll to trigger */
max-height: 100%;
/* Needed for vertical scroll to trigger */
scrollbar-width: none;
}
.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
display: none;
}
.simplebar-content:before,
.simplebar-content:after {
content: " ";
display: table;
}
.simplebar-placeholder {
max-height: 100%;
max-width: 100%;
width: 100%;
pointer-events: none;
}
.simplebar-height-auto-observer-wrapper {
box-sizing: inherit !important;
height: 100%;
width: 100%;
max-width: 1px;
position: relative;
float: left;
max-height: 1px;
overflow: hidden;
z-index: -1;
padding: 0;
margin: 0;
pointer-events: none;
flex-grow: inherit;
flex-shrink: 0;
flex-basis: 0;
}
.simplebar-height-auto-observer {
box-sizing: inherit;
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 1000%;
width: 1000%;
min-height: 1px;
min-width: 1px;
overflow: hidden;
pointer-events: none;
z-index: -1;
}
.simplebar-track {
z-index: 1;
position: absolute;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
[data-simplebar].simplebar-dragging .simplebar-content {
pointer-events: none;
user-select: none;
}
[data-simplebar].simplebar-dragging .simplebar-track {
pointer-events: all;
}
.simplebar-scrollbar {
position: absolute;
right: 2px;
width: 5px;
min-height: 10px;
}
.simplebar-scrollbar:before {
position: absolute;
content: "";
background: #a2adb7;
border-radius: 7px;
left: 0;
right: 0;
opacity: 0;
transition: opacity 0.2s linear;
}
.simplebar-scrollbar.simplebar-visible:before {
/* When hovered, remove all transitions from drag handle */
opacity: 0.5;
transition: opacity 0s linear;
}
.simplebar-track.simplebar-vertical {
top: 0;
width: 11px;
}
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
top: 2px;
bottom: 2px;
}
.simplebar-track.simplebar-horizontal {
left: 0;
height: 11px;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
right: auto;
left: 0;
top: 2px;
height: 7px;
min-height: 0;
min-width: 10px;
width: auto;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
height: 100%;
left: 2px;
right: 2px;
}
/* Rtl support */
[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
right: auto;
left: 0;
}
.hs-dummy-scrollbar-size {
direction: rtl;
position: fixed;
opacity: 0;
visibility: hidden;
height: 500px;
width: 500px;
overflow-y: hidden;
overflow-x: scroll;
}
.simplebar-hide-scrollbar {
position: fixed;
left: 0;
visibility: hidden;
overflow-y: scroll;
scrollbar-width: none;
}
.custom-scroll::-webkit-scrollbar {
-webkit-appearance: none;
}
.custom-scroll::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
margin-right: 5px;
border: none;
}
.custom-scroll::-webkit-scrollbar-track {
border-radius: 10px;
background-color: transparent;
}
.custom-scroll::-webkit-scrollbar-corner {
background-color: transparent;
}
[data-simplebar-lg] .simplebar-scrollbar {
right: 1px;
width: 10px;
}
[data-simplebar-primary] .simplebar-scrollbar:before {
background: #3D5EE1;
}
.simplebar-height {
max-height: 250px;
}
.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.gu-hide {
display: none !important;
}
.gu-unselectable {
user-select: none !important;
}
.gu-transit {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
.dragula-handle {
position: relative;
width: 36px;
height: 36px;
font-size: 22px;
text-align: center;
cursor: move;
}
.dragula-handle:before {
content: "\f22f";
font-family: "tabler-icons";
position: absolute;
}
.handle {
cursor: move;
}
.swal2-container .swal2-title {
font-size: 20px;
font-weight: 500;
color: #202C4B;
}
.swal2-popup {
width: 28em;
padding: 2rem;
border-radius: 4px;
background-color: #FFF;
color: #6A7287;
}
.swal2-popup .swal2-html-container {
font-size: 16px !important;
color: #6A7287;
}
.swal2-footer {
border-top: 1px solid #E9EDF4;
color: #6A7287;
}
.swal2-icon.swal2-question {
border-color: #0F65CD;
color: #0F65CD;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
background-color: #1ABE17;
}
.swal2-icon.swal2-success .swal2-success-ring {
border-color: #1ABE17;
}
.swal2-icon.swal2-warning {
border-color: #EAB300;
color: #EAB300;
}
div:where(.swal2-icon) {
width: 4em;
height: 4em;
margin: 0.5rem auto;
}
div:where(.swal2-icon) .swal2-icon-content {
font-size: 3em;
}
div:where(.swal2-icon).swal2-info {
border-color: #0F65CD;
color: #0F65CD;
}
.swal2-styled:focus {
box-shadow: none;
}
.swal2-loader {
border-color: #3D5EE1 transparent #3D5EE1 transparent;
}
.swal2-timer-progress-bar {
background-color: rgba(26, 190, 23, 0.4);
}
.swal2-progress-steps .swal2-progress-step {
background: #3D5EE1;
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
background: #3D5EE1;
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step, .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
background: rgba(61, 94, 225, 0.3);
}
.swal2-progress-steps .swal2-progress-step-line {
background: #3D5EE1;
}
.swal2-actions.swal2-loading .swal2-styled.swal2-confirm {
border-left-color: #3D5EE1 !important;
border-right-color: #3D5EE1 !important;
}
.swal2-file,
.swal2-input,
.swal2-textarea {
border: 1px solid #E9EDF4;
}
.swal2-file:focus,
.swal2-input:focus,
.swal2-textarea:focus {
box-shadow: none;
border-color: #E9EDF4;
}
.swal2-input {
height: auto;
display: block;
padding: 8px 12px;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #6A7287;
background-color: #FFF;
background-clip: padding-box;
border: 1px solid #E9EDF4;
}
.swal2-close {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 42px;
width: 1em;
height: 1em;
position: absolute;
top: 5px;
right: 5px;
}
.swal2-close:focus {
box-shadow: none;
}
.swal2-close:hover {
color: #E82646;
}
.swal2-validation-message {
background-color: transparent;
}
div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
width: 1.9375em;
top: 1.95em;
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip] {
top: 2.4em;
width: 1em;
}
.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
top: 1.85em;
right: 0.5em;
width: 2.25em;
}
.toast {
box-shadow: 0px 4px 54px 0px rgba(224, 224, 224, 0.2509803922);
border-color: #E9EDF4;
border-radius: 4px;
}
.toast .toast-header {
border-radius: 4px 4px 0 0;
padding: 0.5rem 0.75rem;
color: #6A7287;
}
.toast .toast-body {
padding: 0.75rem;
}
@media (min-width: 640px) {
.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
padding-right: 10px;
}
}
/******* Migrated from app-new.css (kept last to preserve cascade order) ******/
/* ============================================================
STATS CARD (dashboard metric cards) — migrated from app-new.css
============================================================ */
/* ============================================================
METRIC CARD
Dashboard statistic card with 15 domain layouts and 8 accent
colours. Every layout is driven by component-scoped custom
properties so a single accent class recolours the whole card:
--mc / --mc-rgb accent colour (set by .metric-* accent)
--s / --t / --m surface / title / muted text
--b / --soft border / soft accent tint
--stats-positive / --stats-negative trend colours
NOTE: these accents are a bespoke palette independent of the
theme's $primary/$success, so they are intentionally not mapped
to the Bootstrap colour tokens.
============================================================ */
.stats-card {
--mc: #3577f1;
--mc-rgb: 53, 119, 241;
--s: #fff;
--t: #0f172a;
--m: #8f9bb3;
--b: rgba(17, 24, 39, .08);
--soft: rgba(var(--mc-rgb), .12);
--stats-positive: #0ca678;
--stats-negative: #e7515a;
position: relative;
width: 100%;
background: var(--s);
border: 1px solid var(--b);
border-radius: 16px;
padding: 1.1rem 1.2rem;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.stats-card:hover {
transform: translateY(-4px);
box-shadow: 0 0.8rem 1.6rem rgba(17, 24, 39, 0.1);
}
.stats-card .stats-value {
color: var(--t);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.01em;
}
.stats-card .stats-label {
color: var(--m);
font-size: 0.78rem;
margin: 0;
}
.stats-card .stats-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Accent colours — set the card's --mc token */
.stats-card.stats-primary {
--mc: #3577f1;
--mc-rgb: 53, 119, 241;
}
.stats-card.stats-success {
--mc: #0ca678;
--mc-rgb: 12, 166, 120;
}
.stats-card.stats-info {
--mc: #3b7ddd;
--mc-rgb: 59, 125, 221;
}
.stats-card.stats-warning {
--mc: #f39c12;
--mc-rgb: 243, 156, 18;
}
.stats-card.stats-danger {
--mc: #e7515a;
--mc-rgb: 231, 81, 90;
}
.stats-card.stats-purple {
--mc: #7c3aed;
--mc-rgb: 124, 58, 237;
}
.stats-card.stats-teal {
--mc: #12b3b3;
--mc-rgb: 18, 179, 179;
}
.stats-card.stats-pink {
--mc: #e83e8c;
--mc-rgb: 232, 62, 140;
}
/* ---------- 1. STUDENTS — profile: avatar ring + dashed footer ---------- */
.stats-card-students .stats-head {
display: flex;
align-items: center;
gap: 0.85rem;
}
.stats-card-students .stats-avatar {
flex: 0 0 52px;
width: 52px;
height: 52px;
border-radius: 50%;
font-size: 22px;
color: var(--mc);
background: var(--soft);
box-shadow: 0 0 0 3px rgba(var(--mc-rgb), 0.15);
}
.stats-card-students .stats-value {
font-size: 1.5rem;
}
.stats-card-students .stats-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.85rem;
padding-top: 0.65rem;
border-top: 1px dashed var(--b);
font-size: 0.72rem;
}
.stats-card-students .stats-subtitle {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--m);
}
.stats-card-students .stats-subtitle i {
color: var(--mc);
}
.stats-card-students .stats-badge {
font-weight: 700;
color: var(--stats-positive);
}
/* ---------- 2. PARENTS — centered,
soft top wash,
floating icon ---------- */
.stats-card-parents {
text-align: center;
padding-top: 2.3rem;
}
.stats-card-parents::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 44px;
background: linear-gradient(180deg, var(--soft), transparent);
}
.stats-card-parents .stats-icon {
position: relative;
width: 50px;
height: 50px;
border-radius: 14px;
margin: 0 auto 0.5rem;
font-size: 22px;
background: var(--s);
color: var(--mc);
box-shadow: 0 0.3rem 0.8rem rgba(var(--mc-rgb), 0.25);
}
.stats-card-parents .stats-value {
font-size: 1.5rem;
}
.stats-card-parents .stats-label {
margin: 0.1rem 0 0.55rem;
}
.stats-card-parents .stats-link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.7rem;
font-weight: 700;
color: var(--mc);
background: var(--soft);
padding: 0.2rem 0.6rem;
border-radius: 50rem;
}
/* ---------- 3. TEACHERS — team: overlapping avatars + capacity bar ---------- */
.stats-card-teachers .stats-avatars {
display: flex;
align-items: center;
margin-bottom: 0.7rem;
}
.stats-card-teachers .stats-avatars span {
width: 30px;
height: 30px;
border-radius: 50%;
margin-left: -8px;
border: 2px solid var(--s);
background: var(--soft);
color: var(--mc);
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.stats-card-teachers .stats-avatars span:first-child {
margin-left: 0;
}
.stats-card-teachers .stats-avatars .stats-icon {
margin-left: auto;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--soft);
color: var(--mc);
font-size: 20px;
}
.stats-card-teachers .stats-value {
font-size: 1.5rem;
}
.stats-card-teachers .stats-label {
margin: 0 0 0.6rem;
}
.stats-card-teachers .stats-bar {
height: 5px;
border-radius: 50rem;
background: var(--soft);
overflow: hidden;
}
.stats-card-teachers .stats-bar i {
display: block;
height: 100%;
border-radius: 50rem;
background: var(--mc);
}
/* ---------- 4. HR — big value + bordered side mini-metrics ---------- */
.stats-card-hr {
display: flex;
align-items: stretch;
gap: 1rem;
}
.stats-card-hr .stats-main {
flex: 1;
min-width: 0;
}
.stats-card-hr .stats-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--soft);
color: var(--mc);
font-size: 20px;
margin-bottom: 0.55rem;
}
.stats-card-hr .stats-value {
font-size: 1.5rem;
}
.stats-card-hr .stats-aside {
flex: 0 0 78px;
border-left: 1px solid var(--b);
padding-left: 0.85rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.45rem;
}
.stats-card-hr .stats-aside small {
font-size: 0.68rem;
color: var(--m);
display: block;
}
.stats-card-hr .stats-aside b {
font-size: 0.95rem;
color: var(--t);
}
/* ---------- 5. EXAMS — pass-rate ring + score sparkline ---------- */
.stats-card-exams {
display: flex;
align-items: center;
gap: 1rem;
}
.stats-card-exams .stats-ring {
flex: 0 0 62px;
width: 62px;
height: 62px;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: conic-gradient(var(--mc) calc(var(--p, 70) * 1%), var(--soft) 0);
}
.stats-card-exams .stats-ring::before {
content: "";
position: absolute;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--s);
}
.stats-card-exams .stats-ring b {
position: relative;
z-index: 2;
font-size: 0.78rem;
color: var(--mc);
}
.stats-card-exams .stats-value {
font-size: 20px;
margin-bottom: 6px;
}
.stats-card-exams .stats-spark {
display: flex;
align-items: flex-end;
gap: 3px;
height: 20px;
margin-top: 0.45rem;
}
.stats-card-exams .stats-spark i {
width: 5px;
border-radius: 2px 2px 0 0;
background: var(--soft);
}
.stats-card-exams .stats-spark i:last-child {
background: var(--mc);
}
/* ---------- 6. ACADEMICS — icon + completion donut top-right ---------- */
.stats-card-academics .stats-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.stats-card-academics .stats-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--soft);
color: var(--mc);
font-size: 20px;
}
.stats-card-academics .stats-ring {
width: 46px;
height: 46px;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: conic-gradient(var(--mc) calc(var(--p, 65) * 1%), var(--soft) 0);
}
.stats-card-academics .stats-ring::before {
content: "";
position: absolute;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--s);
}
.stats-card-academics .stats-ring b {
position: relative;
z-index: 2;
font-size: 0.6rem;
color: var(--mc);
}
.stats-card-academics .stats-value {
font-size: 1.55rem;
margin-top: 0.8rem;
}
/* ---------- 7. FINANCE — currency + cash-flow bars + comparison ---------- */
.stats-card-finance .stats-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.stats-card-finance .stats-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--soft);
color: var(--mc);
font-size: 20px;
}
.stats-card-finance .stats-compare {
font-size: 0.7rem;
font-weight: 700;
}
.stats-card-finance .stats-compare.up {
color: var(--stats-positive);
}
.stats-card-finance .stats-compare.down {
color: var(--stats-negative);
}
.stats-card-finance .stats-value {
font-size: 1.5rem;
margin-top: 0.65rem;
letter-spacing: -0.02em;
}
.stats-card-finance .stats-label {
margin: 0 0 0.55rem;
}
.stats-card-finance .stats-bars {
display: flex;
gap: 5px;
align-items: flex-end;
height: 26px;
}
.stats-card-finance .stats-bars i {
flex: 1;
border-radius: 3px 3px 0 0;
background: var(--soft);
}
.stats-card-finance .stats-bars i.hi {
background: var(--mc);
}
/* ---------- 8. LIBRARY — inventory: stock progress + meta row ---------- */
.stats-card-library .stats-top {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0.7rem;
}
.stats-card-library .stats-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--soft);
color: var(--mc);
font-size: 20px;
}
.stats-card-library .stats-value {
font-size: 1.4rem;
}
.stats-card-library .stats-progress {
height: 6px;
border-radius: 50rem;
background: var(--soft);
overflow: hidden;
}
.stats-card-library .stats-progress i {
display: block;
height: 100%;
background: var(--mc);
border-radius: 50rem;
}
.stats-card-library .stats-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
font-size: 0.7rem;
color: var(--m);
}
/* ---------- 9. HOSTEL — occupancy segmented bar + legend ---------- */
.stats-card-hostel .stats-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.55rem;
}
.stats-card-hostel .stats-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--soft);
color: var(--mc);
font-size: 20px;
}
.stats-card-hostel .stats-value {
font-size: 1.5rem;
}
.stats-card-hostel .stats-label {
margin: 0.45rem 0 0.5rem;
}
.stats-card-hostel .stats-segments {
display: flex;
height: 8px;
border-radius: 50rem;
overflow: hidden;
background: var(--soft);
}
.stats-card-hostel .stats-segments i {
height: 100%;
background: var(--mc);
}
.stats-card-hostel .stats-legend {
display: flex;
gap: 0.9rem;
margin-top: 0.5rem;
font-size: 0.68rem;
color: var(--m);
}
.stats-card-hostel .stats-legend span {
display: inline-flex;
align-items: center;
}
.stats-card-hostel .stats-legend span::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 0.3rem;
background: var(--mc);
}
.stats-card-hostel .stats-legend span.mut::before {
background: rgba(var(--mc-rgb), 0.25);
}
/* ---------- 10. TRANSPORT — live status pulse + progress track ---------- */
.stats-card-transport .stats-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.stats-card-transport .stats-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--soft);
color: var(--mc);
font-size: 20px;
}
.stats-card-transport .stats-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.68rem;
font-weight: 700;
color: var(--mc);
}
.stats-card-transport .stats-status .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--mc);
animation: mcpulse 1.8s infinite;
}
@keyframes mcpulse {
0% {
box-shadow: 0 0 0 0 rgba(var(--mc-rgb), 0.5);
}
70% {
box-shadow: 0 0 0 8px rgba(var(--mc-rgb), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--mc-rgb), 0);
}
}
.stats-card-transport .stats-value {
font-size: 1.5rem;
margin-top: 0.65rem;
}
.stats-card-transport .stats-label {
margin: 0 0 0.5rem;
}
.stats-card-transport .stats-track {
height: 5px;
border-radius: 50rem;
background: var(--soft);
overflow: hidden;
}
.stats-card-transport .stats-track i {
display: block;
height: 100%;
background: var(--mc);
border-radius: 50rem;
}
/* ---------- 11. SUPPORT — priority tag + SLA bar ---------- */
.stats-card-support .stats-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.stats-card-support .stats-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--soft);
color: var(--mc);
font-size: 20px;
}
.stats-card-support .stats-priority {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.22rem 0.5rem;
border-radius: 6px;
background: var(--soft);
color: var(--mc);
}
.stats-card-support .stats-value {
font-size: 1.5rem;
margin-top: 0.65rem;
}
.stats-card-support .stats-label {
margin: 0 0 0.5rem;
}
.stats-card-support .stats-sla {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.68rem;
color: var(--m);
}
.stats-card-support .stats-sla .bar {
flex: 1;
height: 5px;
border-radius: 50rem;
background: var(--soft);
overflow: hidden;
}
.stats-card-support .stats-sla .bar i {
display: block;
height: 100%;
background: var(--mc);
}
/* ---------- 12. SETTINGS — minimal system-health,
left rail + status dot ---------- */
.stats-card-settings {
border-left: 3px solid var(--mc);
}
.stats-card-settings .stats-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.stats-card-settings .stats-icon {
font-size: 22px;
color: var(--mc);
}
.stats-card-settings .stats-state {
display: inline-flex;
align-items: center;
gap: 0.32rem;
font-size: 0.66rem;
font-weight: 600;
color: var(--m);
}
.stats-card-settings .stats-state i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--mc);
}
.stats-card-settings .stats-value {
font-size: 1.45rem;
margin-top: 0.8rem;
}
/* ---------- 13. ACTIVITIES — event date block ---------- */
.stats-card-activities {
display: flex;
align-items: center;
gap: 0.9rem;
}
.stats-card-activities .stats-date {
flex: 0 0 54px;
height: 60px;
border-radius: 12px;
background: var(--soft);
color: var(--mc);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.stats-card-activities .stats-date b {
font-size: 1.25rem;
line-height: 1;
}
.stats-card-activities .stats-date span {
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 0.1rem;
}
.stats-card-activities .stats-value {
font-size: 1.4rem;
}
.stats-card-activities .stats-tag {
display: inline-block;
margin-top: 0.3rem;
font-size: 0.66rem;
font-weight: 600;
color: var(--mc);
}
/* ---------- 14. MASTERS — flat directory row,
bottom rule + count chip ---------- */
.stats-card-masters {
border: 0;
border-bottom: 2px solid var(--soft);
border-radius: 0;
background: transparent;
padding: 0.55rem 0.2rem 0.85rem;
}
.stats-card-masters:hover {
transform: none;
box-shadow: none;
border-bottom-color: var(--mc);
}
.stats-card-masters .stats-top {
display: flex;
align-items: center;
gap: 0.6rem;
}
.stats-card-masters .stats-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--soft);
color: var(--mc);
font-size: 18px;
}
.stats-card-masters .stats-value {
font-size: 1.35rem;
}
.stats-card-masters .stats-label {
font-size: 0.75rem;
}
.stats-card-masters .stats-chip {
margin-left: auto;
font-size: 0.66rem;
font-weight: 700;
color: var(--mc);
background: var(--soft);
padding: 0.15rem 0.5rem;
border-radius: 50rem;
}
/* ---------- 15. DIRECTORY (users/profile) — avatar w/ presence dot ---------- */
.stats-card-directory {
display: flex;
align-items: center;
gap: 0.85rem;
}
.stats-card-directory .stats-avatar {
position: relative;
flex: 0 0 48px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--soft);
color: var(--mc);
font-size: 20px;
}
.stats-card-directory .stats-avatar::after {
content: "";
position: absolute;
right: 1px;
bottom: 1px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--stats-positive);
border: 2px solid var(--s);
}
.stats-card-directory .stats-value {
font-size: 20px;
margin-bottom: 6px;
}
.stats-card-directory .stats-role {
display: inline-block;
margin-top: 0.25rem;
font-size: 0.66rem;
font-weight: 600;
color: var(--mc);
background: var(--soft);
padding: 0.15rem 0.5rem;
border-radius: 50rem;
}
/* ============================================================ DARK MODE ============================================================ */
[data-theme=dark] .stats-card {
--s: #1a2233;
--t: #e9edf5;
--m: #8a94a6;
--b: rgba(255, 255, 255, .08);
}
[data-theme=dark] .stats-card:hover {
box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.4);
}
/* ============================================================ RTL ============================================================ */
[dir=rtl] .stats-card-settings {
border-left: 0;
border-right: 3px solid var(--mc);
}
[dir=rtl] .stats-card-hr .stats-aside {
border-left: 0;
border-right: 1px solid var(--b);
padding-left: 0;
padding-right: 0.85rem;
}
[dir=rtl] .stats-card-teachers .stats-avatars span {
margin-left: 0;
margin-right: -8px;
}
[dir=rtl] .stats-card-teachers .stats-avatars span:first-child {
margin-right: 0;
}
[dir=rtl] .stats-card-teachers .stats-avatars .stats-icon {
margin-left: 0;
margin-right: auto;
}
[dir=rtl] .stats-card-masters .stats-chip {
margin-left: 0;
margin-right: auto;
}
/* ============================================================ RESPONSIVE ============================================================ */
@media (max-width: 575.98px) {
.stats-card {
padding: 1rem;
}
.stats-card .stats-value {
font-size: 1.35rem;
}
}
/* ============================================================
STATUS CARD design system — migrated from app-new.css
============================================================ */
/* ============================================================
STATUS CARD — Design System (v2.0)
Distinct, premium statistic-card styles per module. Not the
dashboard widget style. Light + Dark (data-theme="dark").
Usage: …
Layouts: -students -teachers -fees -exams -library -transport -hostel -hr
Accents: primary | success | info | warning | danger | secondary | purple | teal
============================================================ */
/* ---- Accent tokens ---- */
.status-card.primary {
--sc-accent: #3577f1;
--sc-accent-rgb: 53, 119, 241;
}
.status-card.success {
--sc-accent: #0ca678;
--sc-accent-rgb: 12, 166, 120;
}
.status-card.info {
--sc-accent: #3b7ddd;
--sc-accent-rgb: 59, 125, 221;
}
.status-card.warning {
--sc-accent: #f39c12;
--sc-accent-rgb: 243, 156, 18;
}
.status-card.danger {
--sc-accent: #e7515a;
--sc-accent-rgb: 231, 81, 90;
}
.status-card.secondary {
--sc-accent: #6c757d;
--sc-accent-rgb: 108, 117, 125;
}
.status-card.purple {
--sc-accent: #7c3aed;
--sc-accent-rgb: 124, 58, 237;
}
.status-card.teal {
--sc-accent: #12b3b3;
--sc-accent-rgb: 18, 179, 179;
}
/* ---- Shared base ---- */
.status-card {
position: relative;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 16px;
padding: 1.15rem 1.25rem;
width: 100%;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.status-card:hover {
transform: translateY(-4px);
box-shadow: 0 0.75rem 1.5rem rgba(17, 24, 39, 0.1);
}
.status-card .status-card-label {
color: var(--bs-secondary-color);
font-size: 0.8125rem;
margin: 0;
}
.status-card .status-card-value {
color: var(--bs-body-color);
font-size: 1.6rem;
font-weight: 700;
line-height: 1.1;
margin: 0.15rem 0 0;
}
.status-card .status-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.status-card .status-card-trend {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.6875rem;
font-weight: 600;
padding: 0.15rem 0.45rem;
border-radius: 50rem;
}
.status-card .status-card-trend.up {
color: #0ca678;
background: rgba(12, 166, 120, 0.12);
}
.status-card .status-card-trend.down {
color: #e7515a;
background: rgba(231, 81, 90, 0.12);
}
.status-card .status-card-trend.flat {
color: #6c757d;
background: rgba(108, 117, 125, 0.12);
}
/* ============================================================
1. STUDENTS — gradient top band + overlapping circular icon
============================================================ */
.status-card-students {
padding-top: 2.6rem;
}
.status-card-students::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 52px;
background: linear-gradient(135deg, var(--bs-primary), rgba(var(--sc-accent-rgb), 0.6));
}
.status-card-students .status-card-icon {
position: relative;
z-index: 2;
width: 54px;
height: 54px;
border-radius: 16px;
background: #fff;
color: var(--bs-primary);
box-shadow: 0 0.35rem 0.75rem rgba(var(--sc-accent-rgb), 0.35);
margin-top: -0.4rem;
margin-bottom: 0.5rem;
}
.status-card-students .status-card-value {
font-size: 1.7rem;
}
.status-card-students .status-card-trend {
margin-top: 0.5rem;
}
/* ============================================================
2. TEACHERS — split card: colored left rail with icon
============================================================ */
.status-card-teachers {
display: flex;
align-items: stretch;
padding: 0;
}
.status-card-teachers .status-card-rail {
flex: 0 0 66px;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #fff;
background: linear-gradient(160deg, var(--bs-primary), rgba(var(--sc-accent-rgb), 0.75));
}
.status-card-teachers .status-card-body {
padding: 1.1rem 1.2rem;
}
.status-card-teachers .status-card-value {
font-size: 1.55rem;
}
/* ============================================================
3. FEES / FINANCE — conic progress ring around the value
============================================================ */
.status-card-fees {
display: flex;
align-items: center;
gap: 1rem;
}
.status-card-fees .status-card-ring {
flex: 0 0 64px;
width: 64px;
height: 64px;
border-radius: 50%;
background: conic-gradient(var(--bs-primary) calc(var(--sc-pct, 70) * 1%), rgba(var(--sc-accent-rgb), 0.15) 0);
display: flex;
align-items: center;
justify-content: center;
}
.status-card-fees .status-card-ring::before {
content: "";
position: absolute;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--bs-body-bg);
}
.status-card-fees .status-card-ring .status-card-icon {
position: relative;
z-index: 2;
color: var(--bs-primary);
font-size: 20px;
}
.status-card-fees .status-card-value {
font-size: 1.5rem;
}
/* ============================================================
4. EXAMS — value + CSS mini bar sparkline
============================================================ */
.status-card-exams .status-card-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.status-card-exams .status-card-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(var(--sc-accent-rgb), 0.12);
color: var(--bs-primary);
}
.status-card-exams .status-card-spark {
display: flex;
align-items: flex-end;
gap: 4px;
height: 34px;
margin-top: 0.75rem;
}
.status-card-exams .status-card-spark span {
flex: 1;
border-radius: 3px 3px 0 0;
background: rgba(var(--sc-accent-rgb), 0.25);
}
.status-card-exams .status-card-spark span:last-child {
background: var(--bs-primary);
}
/* ============================================================
5. LIBRARY — minimalist outlined,
top-centered soft icon
============================================================ */
.status-card-library {
text-align: center;
border: 1.5px solid rgba(var(--sc-accent-rgb), 0.25);
box-shadow: none;
}
.status-card-library:hover {
border-color: var(--bs-primary);
}
.status-card-library .status-card-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(var(--sc-accent-rgb), 0.1);
color: var(--bs-primary);
margin: 0 auto 0.6rem;
}
.status-card-library .status-card-value {
font-size: 1.6rem;
}
/* ============================================================
6. TRANSPORT — diagonal corner accent + icon badge
============================================================ */
.status-card-transport::after {
content: "";
position: absolute;
top: -30px;
right: -30px;
width: 90px;
height: 90px;
border-radius: 20px;
transform: rotate(45deg);
background: linear-gradient(135deg, var(--bs-primary), rgba(var(--sc-accent-rgb), 0.5));
opacity: 0.14;
}
.status-card-transport .status-card-icon {
width: 46px;
height: 46px;
border-radius: 12px;
background: var(--bs-primary);
color: #fff;
margin-bottom: 0.6rem;
box-shadow: 0 0.35rem 0.75rem rgba(var(--sc-accent-rgb), 0.3);
}
.status-card-transport .status-card-value {
font-size: 1.6rem;
}
/* ============================================================
7. HOSTEL — dotted pattern + soft glass panel
============================================================ */
.status-card-hostel {
background-image: radial-gradient(rgba(var(--sc-accent-rgb), 0.14) 1.4px, transparent 1.4px);
background-size: 14px 14px;
}
.status-card-hostel .status-card-inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
}
.status-card-hostel .status-card-icon {
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(var(--sc-accent-rgb), 0.15);
color: var(--bs-primary);
backdrop-filter: blur(2px);
}
.status-card-hostel .status-card-value {
font-size: 1.55rem;
}
/* ============================================================
8. HR / STAFF — inline icon + value,
animated bottom underline
============================================================ */
.status-card-hr {
display: flex;
align-items: center;
gap: 0.9rem;
}
.status-card-hr .status-card-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(var(--sc-accent-rgb), 0.12);
color: var(--bs-primary);
flex-shrink: 0;
}
.status-card-hr .status-card-value {
font-size: 1.5rem;
}
.status-card-hr::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: var(--bs-primary);
transition: width 0.3s ease;
}
.status-card-hr:hover::after {
width: 100%;
}
/* ============================================================
DARK MODE (html[data-theme="dark"])
============================================================ */
[data-theme=dark] .status-card {
background: #1a2233;
color: #e9edf5;
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .status-card .status-card-label {
color: #8a94a6;
}
[data-theme=dark] .status-card .status-card-value {
color: #e9edf5;
}
[data-theme=dark] .status-card:hover {
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.4);
}
[data-theme=dark] .status-card-students .status-card-icon {
background: #1a2233;
}
[data-theme=dark] .status-card-library {
border-color: rgba(var(--sc-accent-rgb), 0.35);
}
/* ============================================================
RTL
============================================================ */
[dir=rtl] .status-card-transport::after {
right: auto;
left: -30px;
}
[dir=rtl] .status-card-hr::after {
left: auto;
right: 0;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 575.98px) {
.status-card {
padding: 1rem;
}
.status-card .status-card-value,
.status-card-students .status-card-value,
.status-card-transport .status-card-value,
.status-card-library .status-card-value {
font-size: 1.4rem;
}
}
/* ============================================================
PAGE-SCOPED STAT-CARD SKINS (body.sc-skin-*) — migrated from app-new.css
============================================================ */
/* PAGE-SCOPED SKINS — give each module a distinct identity by
restyling the shared .stat-card markup. Add one class to .
Accent color still comes from .stat-primary/.stat-success/etc.
============================================================ */
/* base tweak for all skinned pages */
[class*=sc-skin-] .stat-card {
border-radius: 16px;
}
/* STUDENTS — full-width top gradient accent + circular gradient icon */
body.sc-skin-students .stat-card::before {
inset: 0 0 auto 0 !important;
width: 100% !important;
height: 4px !important;
border-radius: 16px 16px 0 0 !important;
opacity: 1 !important;
}
body.sc-skin-students .stat-card::after {
opacity: 0.05 !important;
}
body.sc-skin-students .stat-card .stat-icon {
border-radius: 50% !important;
}
body.sc-skin-students .stat-card {
padding-top: 0.35rem;
}
/* TEACHERS / DASHBOARDS — thick left rail + squared icon */
body.sc-skin-teachers .stat-card::before {
width: 6px !important;
border-radius: 16px 0 0 16px !important;
opacity: 1 !important;
}
body.sc-skin-teachers .stat-card::after {
display: none !important;
}
body.sc-skin-teachers .stat-card .stat-icon {
border-radius: 12px !important;
}
body.sc-skin-teachers .stat-card .card-body {
padding-left: 1.4rem;
}
/* FEES — ring-style icon (bordered),
no side strip */
body.sc-skin-fees .stat-card::before {
display: none !important;
}
body.sc-skin-fees .stat-card::after {
opacity: 0.05 !important;
}
body.sc-skin-fees .stat-card .stat-icon {
background: transparent !important;
border: 3px solid;
border-radius: 50% !important;
}
/* EXAMS / ACADEMICS — bottom accent bar + squared icon */
body.sc-skin-exams .stat-card::before {
inset: auto 0 0 0 !important;
top: auto !important;
width: 100% !important;
height: 4px !important;
border-radius: 0 0 16px 16px !important;
opacity: 1 !important;
}
body.sc-skin-exams .stat-card::after {
display: none !important;
}
body.sc-skin-exams .stat-card .stat-icon {
border-radius: 12px !important;
}
/* ACADEMICS — dashed outline + top-left accent dot */
body.sc-skin-academics .stat-card {
border: 1.5px dashed rgba(0, 0, 0, 0.12) !important;
}
body.sc-skin-academics .stat-card::before {
inset: 14px auto auto 14px !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
opacity: 1 !important;
}
body.sc-skin-academics .stat-card::after {
display: none !important;
}
body.sc-skin-academics .stat-card .stat-icon {
border-radius: 12px !important;
}
[data-theme=dark] body.sc-skin-academics .stat-card {
border-color: rgba(255, 255, 255, 0.14) !important;
}
/* TRANSPORT / OPS — diagonal corner accent + solid icon */
body.sc-skin-transport .stat-card::before {
display: none !important;
}
body.sc-skin-transport .stat-card::after {
top: -30px !important;
right: -30px !important;
left: auto !important;
width: 90px !important;
height: 90px !important;
border-radius: 20px !important;
transform: rotate(45deg);
opacity: 0.16 !important;
}
body.sc-skin-transport .stat-card .stat-icon {
color: #fff !important;
}
body.sc-skin-transport .stat-card.stat-primary .stat-icon {
background: var(--bs-primary) !important;
}
body.sc-skin-transport .stat-card.stat-success .stat-icon {
background: var(--bs-success) !important;
}
body.sc-skin-transport .stat-card.stat-info .stat-icon {
background: var(--bs-info) !important;
}
body.sc-skin-transport .stat-card.stat-warning .stat-icon {
background: var(--bs-warning) !important;
}
body.sc-skin-transport .stat-card.stat-danger .stat-icon {
background: var(--bs-danger) !important;
}
body.sc-skin-transport .stat-card.stat-secondary .stat-icon {
background: var(--bs-secondary) !important;
}
/* HOSTEL / HEALTH — dotted pattern background */
body.sc-skin-hostel .stat-card::before {
display: none !important;
}
body.sc-skin-hostel .stat-card::after {
display: none !important;
}
body.sc-skin-hostel .stat-card {
background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1.4px, transparent 1.4px);
background-size: 14px 14px;
}
[data-theme=dark] body.sc-skin-hostel .stat-card {
background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.4px, transparent 1.4px);
}
body.sc-skin-hostel .stat-card .stat-icon {
border-radius: 14px !important;
}
/* HR / GOVERNANCE — animated bottom underline on hover */
body.sc-skin-hr .stat-card::before {
inset: auto 0 0 0 !important;
top: auto !important;
width: 0 !important;
height: 3px !important;
border-radius: 0 !important;
opacity: 1 !important;
transition: width 0.3s ease;
}
body.sc-skin-hr .stat-card:hover::before {
width: 100% !important;
}
body.sc-skin-hr .stat-card::after {
display: none !important;
}
body.sc-skin-hr .stat-card .stat-icon {
border-radius: 12px !important;
}
/* AI — soft glow gradient border + circular icon */
body.sc-skin-ai .stat-card {
border: 1px solid rgba(53, 119, 241, 0.18) !important;
box-shadow: 0 0 0 1px rgba(53, 119, 241, 0.04) inset;
}
body.sc-skin-ai .stat-card::before {
inset: 0 !important;
width: auto !important;
height: auto !important;
border-radius: 16px !important;
background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(53, 119, 241, 0.02)) !important;
opacity: 1 !important;
z-index: 0;
}
body.sc-skin-ai .stat-card::after {
display: none !important;
}
body.sc-skin-ai .stat-card .card-body {
position: relative;
z-index: 1;
}
body.sc-skin-ai .stat-card .stat-icon {
border-radius: 50% !important;
}
[data-theme=dark] body.sc-skin-ai .stat-card {
border-color: rgba(124, 58, 237, 0.3) !important;
}
/*-----------------
Skeleton loader
The template's single loading-placeholder system. One shimmer primitive
(`.skeleton`) plus shape modifiers, wrapped in `.skeleton-loader`, which
scripts hide with `.hidden` once the live content is ready:
Shapes are deliberately generic — a page that needs a different track or
row geometry scopes its own overrides in its page partial rather than
introducing a second skeleton implementation.
-----------------*/
.skeleton-loader {
display: block;
}
.skeleton-loader.hidden {
display: none;
}
.skeleton {
position: relative;
overflow: hidden;
background: #eceef3;
border-radius: 6px;
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
animation: skeleton-shimmer 1.3s infinite;
}
/* shapes */
.skeleton-line {
height: 12px;
}
.skeleton-avatar {
width: 46px;
height: 46px;
border-radius: 12px;
}
.skeleton-circle {
width: 34px;
height: 34px;
border-radius: 50%;
}
.skeleton-pill {
height: 22px;
width: 74px;
border-radius: 999px;
}
.skeleton-card {
height: 78px;
border-radius: 8px;
}
.skeleton-btn {
height: 40px;
width: 110px;
border-radius: 8px;
}
/* stacked lines inside a media-style row */
.skeleton-stack {
flex: 1;
min-width: 0;
}
@keyframes skeleton-shimmer {
100% {
transform: translateX(100%);
}
}
/* dark tone stays scoped to the workspaces that ship a dark surface, so no
page silently changes tone by adopting the shared primitive */
[data-bs-theme=dark] .students-workspace .skeleton,
[data-bs-theme=dark] .data-workspace .skeleton {
background: #2a3042;
}
[data-bs-theme=dark] .students-workspace .skeleton::after,
[data-bs-theme=dark] .data-workspace .skeleton::after {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
/* ============================================================
Workspace system — the reusable toolbar, record grid, selection,
details, footer and state primitives shared by every workspace page
============================================================ */
/* ===== students-workspace.css ===== */
/* ============================================================
Students Workspace — Premium enterprise redesign
Scoped entirely under .students-workspace so it never
affects the sidebar,
header,
page layout or global palette.
Inherits the theme's Bootstrap colour tokens (--bs-*) and
only adds neutral premium surfaces on top.
============================================================ */
.students-workspace,
.data-workspace {
position: relative;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.students-workspace *,
.data-workspace * {
animation: none !important;
transition: none !important;
}
}
/* ============================================================
TOOLBAR
============================================================ */
.page-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
width: 100%;
}
.page-toolbar .search-toolbar {
position: relative;
flex: 1 1 260px;
min-width: 220px;
}
.page-toolbar .search-toolbar input {
width: 100%;
height: 40px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
padding: 0 88px 0 38px;
font-size: 14px;
transition: box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.page-toolbar .search-toolbar input:focus {
outline: none;
background: var(--bs-body-bg);
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
}
.page-toolbar .search-toolbar .search-toolbar-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--bs-secondary-color);
font-size: 18px;
pointer-events: none;
}
.page-toolbar .search-toolbar .search-toolbar-kbd {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
color: var(--bs-secondary-color);
border: 1px solid var(--bs-border-color);
border-radius: 9px;
padding: 8px 6px;
background: var(--bs-body-bg);
line-height: 1;
}
/* generic pill button used across the toolbar */
.workspace-button {
display: inline-flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 0 14px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
color: var(--bs-emphasis-color, #1f2937);
font-size: 13.5px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
}
.workspace-button i {
font-size: 17px;
}
.workspace-button:hover {
background: var(--bs-tertiary-bg);
border-color: var(--bs-primary);
color: var(--bs-primary);
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.workspace-button.workspace-button-icon {
padding: 0;
width: 40px;
justify-content: center;
}
.workspace-button.workspace-button-icon.dropdown-toggle {
padding: 0 8px;
width: auto;
}
.workspace-button.active,
.workspace-button[aria-pressed=true] {
background: var(--tint-primary);
border-color: var(--bs-primary);
color: var(--bs-primary);
}
/* density segmented control */
.density-toggle {
display: inline-flex;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--bs-body-bg);
}
.density-toggle button {
border: 0;
background: transparent;
width: 38px;
height: 40px;
color: var(--bs-secondary-color);
cursor: pointer;
transition: all var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
}
.density-toggle button i {
font-size: 17px;
}
.density-toggle button.active {
background: var(--tint-primary);
color: var(--bs-primary);
}
/* List / Grid layout toggle (segmented,
like density) */
.view-switcher {
display: inline-flex;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--bs-body-bg);
}
.view-switcher a {
width: 38px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--bs-secondary-color);
text-decoration: none;
transition: all var(--transition);
}
.view-switcher a i {
font-size: 17px;
}
.view-switcher a:hover {
color: var(--bs-primary);
background: var(--bs-tertiary-bg);
}
.view-switcher a.active {
background: var(--tint-primary);
color: var(--bs-primary);
}
/* Quick filter / saved-view pills */
.quick-filters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
}
.quick-filter {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition);
}
.quick-filter .quick-filter-count {
background: var(--bs-secondary-bg);
border-radius: 999px;
padding: 1px 7px;
font-size: 11px;
font-weight: 600;
color: var(--bs-emphasis-color, #1f2937);
}
.quick-filter:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.quick-filter.active {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.quick-filter.active .quick-filter-count {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* Filter chips */
.filter-chips {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.filter-chips:empty {
display: none;
}
.filter-chip-item {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 6px 0 12px;
border-radius: 999px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 12px;
font-weight: 500;
animation: workspace-pop 0.18s ease;
}
.filter-chip-item button {
border: 0;
background: rgba(0, 0, 0, 0.06);
color: inherit;
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 13px;
line-height: 1;
transition: background var(--transition);
}
.filter-chip-item button:hover {
background: rgba(0, 0, 0, 0.16);
}
.filter-chips .filter-chip-clear {
background: transparent;
color: var(--bs-secondary-color);
text-decoration: underline;
cursor: pointer;
border: 0;
font-size: 12px;
}
/* ============================================================
COMPACT TOOLBAR
The default controls are 40px tall, which reads heavy above a dense grid.
`.page-toolbar-compact` on the workspace root trims the toolbar, search field and
quickbar to the tighter proportions the classes workspace uses, without
pulling in any of that page's scoped behaviour.
============================================================ */
.page-toolbar-compact .page-toolbar {
gap: 8px;
}
.page-toolbar-compact .page-toolbar .workspace-button {
height: 34px;
padding: 0 11px;
font-size: 12.5px;
gap: 5px;
}
.page-toolbar-compact .page-toolbar .workspace-button i {
font-size: 15px;
}
.page-toolbar-compact .page-toolbar .workspace-button.workspace-button-icon {
width: 34px;
padding: 0;
}
/* the field grows to fill the row by default; here the controls beside it are
more useful with that space */
.page-toolbar-compact .page-toolbar .search-toolbar {
flex: 0 1 250px;
min-width: 180px;
}
.page-toolbar-compact .page-toolbar .search-toolbar input {
height: 34px;
padding: 0 58px 0 32px;
font-size: 13px;
}
.page-toolbar-compact .page-toolbar .search-toolbar .search-toolbar-icon {
font-size: 15px;
left: 11px;
}
.page-toolbar-compact .page-toolbar .search-toolbar .search-toolbar-kbd {
font-size: 10px;
padding: 8px 5px;
right: 4px;
}
.page-toolbar-compact .density-toggle button {
width: 32px;
height: 34px;
}
.page-toolbar-compact .density-toggle button i {
font-size: 16px;
}
/* controls sitting among the quick-filter pills take their height */
.page-toolbar-compact .quick-filters {
margin-top: 10px;
}
.page-toolbar-compact .quick-filters .workspace-button {
height: 32px;
padding: 0 10px;
font-size: 12.5px;
gap: 5px;
}
.page-toolbar-compact .quick-filters .workspace-button i {
font-size: 15px;
}
/* ============================================================
SUMMARY STRIP
============================================================ */
.summary-strip {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 10px;
padding: 16px;
border-bottom: 1px solid var(--bs-border-color);
}
@media (max-width: 1399.98px) {
.summary-strip {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.summary-strip {
grid-template-columns: repeat(1, 1fr) !important;
}
}
.summary-card {
position: relative;
padding: 12px 14px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
transition: all var(--transition);
overflow: hidden;
}
.summary-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent);
opacity: 0.85;
}
.summary-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.summary-card .summary-card-icon {
width: 30px;
height: 30px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
background: var(--accent-soft);
color: var(--accent);
margin-bottom: 8px;
}
.summary-card .summary-card-value {
font-size: 20px;
font-weight: 700;
line-height: 1;
color: var(--bs-heading-color, #111827);
}
.summary-card .summary-card-label {
font-size: 12px;
color: var(--bs-secondary-color);
margin: 4px 0 0;
}
/* accent variants (only surface tints — no global palette change) */
/* Quick statistics mini card with sparkline dots */
.summary-card .summary-card-spark {
display: flex;
align-items: flex-end;
gap: 3px;
height: 20px;
margin-top: 6px;
}
.summary-card .summary-card-spark span {
flex: 1;
background: var(--accent);
border-radius: 2px;
opacity: 0.55;
animation: workspace-grow 0.6s ease both;
}
/* ============================================================
BULK ACTION BAR
============================================================ */
.selection-toolbar {
display: none;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 12px 16px;
margin: 0;
background: linear-gradient(90deg, var(--tint-primary), transparent);
border-bottom: 1px solid var(--bs-border-color);
animation: workspace-slidedown 0.2s ease;
}
.selection-toolbar.show {
display: flex;
}
.selection-toolbar .selection-toolbar-count {
font-weight: 600;
color: var(--bs-primary);
display: inline-flex;
align-items: center;
gap: 8px;
}
.selection-toolbar .selection-toolbar-count .selection-toolbar-badge {
background: var(--bs-primary);
color: #fff;
border-radius: 999px;
min-width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
padding: 0 6px;
}
.selection-toolbar .selection-toolbar-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* ============================================================
TABLE
============================================================ */
.record-grid-wrapper {
overflow: auto;
max-height: 68vh;
}
.students-workspace.is-fullscreen,
.data-workspace.is-fullscreen {
position: fixed;
inset: 0;
z-index: 1055;
/* Soft app background (not stark white) so the area below a short table
reads as the app in fullscreen rather than a blank white screen. */
background: var(--bs-secondary-bg);
padding: 18px;
overflow: auto;
}
.students-workspace.is-fullscreen .record-grid-wrapper,
.data-workspace.is-fullscreen .record-grid-wrapper,
.data-workspace.is-fullscreen .data-table {
max-height: calc(100vh - 260px);
overflow: auto;
}
.data-workspace.is-fullscreen:fullscreen {
overflow: auto;
}
table.record-grid-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 940px;
}
table.record-grid-table thead th {
position: sticky;
top: 0;
z-index: 5;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 14px 16px;
border-bottom: 1px solid var(--bs-border-color);
white-space: nowrap;
user-select: none;
}
table.record-grid-table thead th.record-sortable {
cursor: pointer;
transition: color var(--transition);
}
table.record-grid-table thead th.record-sortable:hover {
color: var(--bs-primary);
}
table.record-grid-table thead th .record-sort-icon {
font-size: 14px;
opacity: 0.5;
vertical-align: middle;
transition: transform var(--transition), opacity var(--transition);
}
table.record-grid-table thead th.is-sorted-asc .record-sort-icon {
opacity: 1;
color: var(--bs-primary);
}
table.record-grid-table thead th.is-sorted-desc .record-sort-icon {
opacity: 1;
color: var(--bs-primary);
transform: rotate(180deg);
}
/* column pin */
table.record-grid-table th.is-pinned,
table.record-grid-table td.is-pinned {
position: sticky;
left: 0;
z-index: 4;
background: var(--bs-body-bg);
}
table.record-grid-table thead th.is-pinned {
z-index: 6;
background: var(--bs-secondary-bg);
}
/* column resize handle */
table.record-grid-table thead th .record-column-resize {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 6px;
cursor: col-resize;
opacity: 0;
}
table.record-grid-table thead th:hover .record-column-resize {
opacity: 1;
background: var(--tint-primary);
}
table.record-grid-table tbody td {
padding: 16px;
border-bottom: 1px solid var(--bs-border-color);
vertical-align: middle;
font-size: 14px;
background: var(--bs-body-bg);
transition: background var(--transition);
}
/* density variants */
.students-workspace[data-density=compact] table.record-grid-table tbody td,
.data-workspace[data-density=compact] table.record-grid-table tbody td {
padding: 9px 16px;
}
.students-workspace[data-density=compact] table.record-grid-table tbody td .record-avatar,
.data-workspace[data-density=compact] table.record-grid-table tbody td .record-avatar {
width: 36px;
height: 36px;
}
.students-workspace[data-density=comfortable] table.record-grid-table tbody td,
.data-workspace[data-density=comfortable] table.record-grid-table tbody td {
padding: 22px 16px;
}
/* row */
table.record-grid-table tbody tr.record-grid-row {
transition: transform var(--transition), box-shadow var(--transition);
}
table.record-grid-table tbody tr.record-grid-row:hover td {
background: var(--bs-tertiary-bg);
}
table.record-grid-table tbody tr.record-grid-row.is-selected td {
background: var(--tint-primary);
}
/* rounded selection — round the first & last cell of a selected row */
table.record-grid-table tbody tr.record-grid-row.is-selected td:first-child {
box-shadow: inset 3px 0 0 var(--bs-primary);
}
table.record-grid-table tbody tr.record-grid-row td.is-fading-in {
animation: workspace-fade 0.35s ease both;
}
/* Professional checkbox */
.record-check {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1.8px solid var(--bs-border-color);
border-radius: 5px;
background: var(--bs-body-bg);
cursor: pointer;
position: relative;
transition: all var(--transition);
vertical-align: middle;
}
.record-check:hover {
border-color: var(--bs-primary);
}
.record-check:checked {
background: var(--bs-primary);
border-color: var(--bs-primary);
}
.record-check:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1.5px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.record-check:indeterminate {
background: var(--bs-primary);
border-color: var(--bs-primary);
}
.record-check:indeterminate::after {
content: "";
position: absolute;
left: 3px;
top: 7px;
width: 10px;
height: 2px;
background: #fff;
border-radius: 2px;
}
.record-check:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--tint-primary);
}
/* Student cell */
.record-identity {
display: flex;
align-items: center;
gap: 12px;
}
.record-avatar {
position: relative;
width: 46px;
height: 46px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
.record-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.record-avatar .record-avatar-presence {
position: absolute;
right: -2px;
bottom: -2px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--bs-body-bg);
background: var(--bs-success);
}
.record-avatar .record-avatar-presence.off {
background: #9ca3af;
}
.record-identity .record-identity-name {
font-weight: 600;
color: var(--bs-heading-color, #111827);
line-height: 1.2;
text-decoration: none;
}
.record-identity .record-identity-name:hover {
color: var(--bs-primary);
}
.record-identity .record-identity-sub {
font-size: 12px;
color: var(--bs-secondary-color);
margin-top: 2px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.record-identity .record-identity-sub .record-dot {
opacity: 0.5;
}
/* micro tag badges under student */
.record-tags {
display: flex;
gap: 5px;
margin-top: 6px;
flex-wrap: wrap;
}
.record-tag {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10.5px;
font-weight: 600;
padding: 2px 7px;
border-radius: 999px;
line-height: 1.4;
}
.record-tag i {
font-size: 12px;
}
.record-tag.t-scholar {
background: rgba(217, 119, 6, 0.12);
color: #b45309;
}
.record-tag.t-transport {
background: rgba(8, 145, 178, 0.12);
color: #0e7490;
}
.record-tag.t-hostel {
background: rgba(123, 97, 255, 0.12);
color: #6d28d9;
}
/* Status pills */
.record-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
padding: 5px 11px;
border-radius: 999px;
line-height: 1;
white-space: nowrap;
}
.record-pill .record-pill-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
animation: workspace-pulse 2s infinite;
}
.record-pill.s-active {
background: rgba(22, 163, 74, 0.12);
color: #15803d;
}
.record-pill.s-inactive {
background: rgba(107, 114, 128, 0.14);
color: #4b5563;
}
.record-pill.s-transfer {
background: rgba(8, 145, 178, 0.12);
color: #0e7490;
}
.record-pill.s-graduated {
background: rgba(123, 97, 255, 0.12);
color: #6d28d9;
}
.record-pill.s-suspended {
background: rgba(220, 38, 38, 0.12);
color: #b91c1c;
}
.record-pill.s-leave {
background: rgba(217, 119, 6, 0.12);
color: #b45309;
}
.record-pill.s-inactive .record-pill-dot,
.record-pill.s-graduated .record-pill-dot {
animation: none;
}
/* Action column — circular icon buttons */
.workspace-actions {
display: flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
}
.workspace-icon-button {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
flex-shrink: 0;
text-decoration: none;
}
.workspace-icon-button i {
font-size: 16px;
}
.workspace-icon-button:hover {
color: #fff;
background: var(--bs-primary);
border-color: var(--bs-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.workspace-icon-button.danger:hover {
background: var(--bs-danger);
border-color: var(--bs-danger);
}
.workspace-icon-button.success:hover {
background: var(--bs-success);
border-color: var(--bs-success);
}
/* dropdown menu (reuse bootstrap .dropdown-menu but premium) */
.students-workspace .dropdown-menu,
.data-workspace .dropdown-menu {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
box-shadow: var(--shadow-lift);
padding: 8px;
}
/* run the entrance only on open, so it replays on every toggle */
.students-workspace .dropdown-menu.show,
.data-workspace .dropdown-menu.show {
animation: workspace-menu 0.16s ease;
}
.students-workspace .dropdown-menu .dropdown-item,
.data-workspace .dropdown-menu .dropdown-item {
border-radius: var(--radius-sm);
padding: 8px 10px;
font-size: 13.5px;
display: flex;
align-items: center;
gap: 8px;
transition: background var(--transition);
}
.students-workspace .dropdown-menu .dropdown-item i,
.data-workspace .dropdown-menu .dropdown-item i {
font-size: 16px;
}
.students-workspace .dropdown-menu .dropdown-item:hover,
.data-workspace .dropdown-menu .dropdown-item:hover {
background: var(--bs-tertiary-bg);
}
.students-workspace .dropdown-menu .dropdown-item.text-danger:hover,
.data-workspace .dropdown-menu .dropdown-item.text-danger:hover {
background: rgba(220, 38, 38, 0.1);
}
.students-workspace .dropdown-menu .context-menu-head,
.data-workspace .dropdown-menu .context-menu-head {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-secondary-color);
padding: 6px 10px 4px;
font-weight: 600;
}
/* ---- Premium Quick Actions panel ---- */
.students-workspace .dropdown-menu.quick-menu-list,
.data-workspace .dropdown-menu.quick-menu-list {
width: 312px;
padding: 0;
overflow: hidden;
}
.quick-menu-head {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 14px;
background: linear-gradient(135deg, var(--tint-primary), transparent 90%);
border-bottom: 1px solid var(--bs-border-color);
}
.quick-menu-head-title {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: var(--bs-heading-color, #111827);
letter-spacing: 0.01em;
}
.quick-menu-head-title i {
color: var(--bs-primary);
font-size: 16px;
}
.quick-menu-head-sub {
font-size: 11.5px;
color: var(--bs-secondary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.workspace-action-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
padding: 10px;
}
.workspace-action-grid a.quick-menu {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 4px;
border-radius: 12px;
font-size: 10.5px;
font-weight: 500;
color: var(--bs-secondary-color);
text-align: center;
line-height: 1.25;
text-decoration: none;
transition: transform var(--transition), background var(--transition), color var(--transition);
}
.quick-menu .quick-menu-icon {
width: 38px;
height: 38px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 19px;
transition: transform var(--transition), box-shadow var(--transition);
}
.quick-menu .quick-menu-icon i {
font-size: 19px;
}
.workspace-action-grid a.quick-menu:hover {
background: var(--bs-tertiary-bg);
color: var(--bs-heading-color, #111827);
}
.workspace-action-grid a.quick-menu:hover .quick-menu-icon {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 6px 14px -4px rgba(17, 24, 39, 0.28);
}
.workspace-action-grid a.quick-menu:active .quick-menu-icon {
transform: translateY(0) scale(0.96);
}
.workspace-action-grid a.quick-menu:focus-visible {
outline: none;
background: var(--bs-tertiary-bg);
box-shadow: 0 0 0 2px var(--bs-primary) inset;
}
/* icon tile colour tokens (soft tint bg + saturated icon) */
.quick-menu-icon.c-primary {
background: rgba(61, 94, 225, 0.12);
color: var(--bs-primary);
}
.quick-menu-icon.c-blue {
background: rgba(37, 99, 235, 0.12);
color: #2563eb;
}
.quick-menu-icon.c-green {
background: rgba(22, 163, 74, 0.12);
color: var(--bs-success);
}
.quick-menu-icon.c-purple {
background: rgba(123, 97, 255, 0.12);
color: var(--accent-purple);
}
.quick-menu-icon.c-indigo {
background: rgba(79, 70, 229, 0.12);
color: #4f46e5;
}
.quick-menu-icon.c-teal {
background: rgba(13, 148, 136, 0.12);
color: var(--accent-teal);
}
.quick-menu-icon.c-amber {
background: rgba(217, 119, 6, 0.12);
color: var(--bs-warning);
}
.quick-menu-icon.c-cyan {
background: rgba(8, 145, 178, 0.12);
color: var(--bs-info);
}
.quick-menu-icon.c-violet {
background: rgba(139, 92, 246, 0.12);
color: #8b5cf6;
}
.quick-menu-icon.c-red {
background: rgba(220, 38, 38, 0.12);
color: var(--bs-danger);
}
.quick-menu-icon.c-slate {
background: rgba(71, 85, 105, 0.12);
color: #475569;
}
/* ============================================================
ROW EXPANSION
============================================================ */
tr.details-panel-row > td {
padding: 0 !important;
background: var(--bs-secondary-bg) !important;
border-bottom: 1px solid var(--bs-border-color);
}
.details-panel-inner {
display: none;
padding: 18px 20px;
animation: workspace-fade 0.3s ease;
}
tr.details-panel-row.open .details-panel-inner {
display: block;
}
.details-panel {
display: grid;
grid-template-columns: 180px repeat(auto-fit, minmax(150px, 1fr));
gap: 18px;
align-items: start;
}
.details-panel-photo {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
.details-panel-photo img {
width: 100%;
display: block;
}
.details-panel-block h6 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
margin: 0 0 4px;
}
.details-panel-block p {
margin: 0 0 12px;
font-size: 13.5px;
font-weight: 500;
color: var(--bs-heading-color, #111827);
}
.record-progress {
height: 6px;
border-radius: 999px;
background: var(--bs-border-color);
overflow: hidden;
margin: 6px 0 12px;
}
.record-progress span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--bs-primary);
}
.details-toggle {
width: 26px;
height: 26px;
border-radius: 7px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
}
.details-toggle:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.details-toggle i {
transition: transform var(--transition);
}
tr.record-grid-row.expanded .details-toggle {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
tr.record-grid-row.expanded .details-toggle i {
transform: rotate(90deg);
}
/* ============================================================
EMPTY STATE
============================================================ */
.workspace-empty-state {
display: none;
text-align: center;
padding: 60px 20px;
}
.workspace-empty-state.show {
display: block;
}
.workspace-empty-state .workspace-empty-art {
width: 132px;
height: 132px;
margin: 0 auto 18px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--tint-primary), transparent 70%);
display: flex;
align-items: center;
justify-content: center;
}
.workspace-empty-state .workspace-empty-art i {
font-size: 60px;
color: var(--bs-primary);
}
.workspace-empty-state h5 {
font-weight: 700;
margin-bottom: 6px;
}
.workspace-empty-state p {
color: var(--bs-secondary-color);
max-width: 380px;
margin: 0 auto 18px;
}
/* ============================================================
SKELETON LOADING
The primitive and its shapes live in components/_ui-skeleton.scss —
only the workspace's own row/summary geometry stays here.
============================================================ */
.is-loaded .live-content {
display: block;
}
.skeleton-summary {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
padding: 16px;
border-bottom: 1px solid var(--bs-border-color);
}
.skeleton-toolbar {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
padding-bottom: 4px;
}
.skeleton-row {
display: grid;
grid-template-columns: 24px 46px 1.4fr 0.7fr 0.9fr 1.4fr;
gap: 16px;
align-items: center;
padding: 18px 16px;
border-bottom: 1px solid var(--bs-border-color);
}
.skeleton-row .skeleton-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
}
/* ============================================================
CONTEXT MENU
============================================================ */
.context-menu {
position: fixed;
z-index: 2000;
min-width: 190px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
box-shadow: var(--shadow-lift);
padding: 6px;
display: none;
animation: workspace-menu 0.14s ease;
}
.context-menu.show {
display: block;
}
.context-menu a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: var(--radius-sm);
font-size: 13.5px;
color: var(--bs-body-color, #374151);
text-decoration: none;
transition: background var(--transition);
}
.context-menu a i {
font-size: 16px;
}
.context-menu a:hover {
background: var(--bs-tertiary-bg);
}
.context-menu a.text-danger:hover {
background: rgba(220, 38, 38, 0.1);
}
.context-menu .context-menu-divider {
height: 1px;
background: var(--bs-border-color);
margin: 5px 4px;
}
/* ============================================================
MOBILE CARDS
============================================================ */
.record-cards {
display: none;
}
@media (max-width: 991.98px) {
.summary-strip {
grid-template-columns: repeat(4, 1fr);
}
.skeleton-summary {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 767.98px) {
.summary-strip {
grid-template-columns: repeat(2, 1fr);
}
.skeleton-summary {
grid-template-columns: repeat(2, 1fr);
}
.record-grid-wrapper {
display: none;
}
.record-cards {
display: block;
padding: 14px;
}
.record-card {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
padding: 14px;
margin-bottom: 12px;
background: var(--bs-body-bg);
box-shadow: var(--shadow);
transition: all var(--transition);
}
.record-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.record-card.is-selected {
border-color: var(--bs-primary);
background: var(--tint-primary);
}
.record-card-head {
display: flex;
align-items: center;
gap: 12px;
}
.record-card-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 12px;
}
.record-card-body .record-meta-key {
font-size: 11px;
color: var(--bs-secondary-color);
}
.record-card-body .record-meta-value {
font-size: 13px;
font-weight: 500;
}
.record-card-actions {
display: flex;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
position: sticky;
bottom: 0;
}
}
/* ============================================================
ANIMATIONS
============================================================ */
@keyframes workspace-fade {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes workspace-pop {
from {
opacity: 0;
transform: scale(0.85);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes workspace-slidedown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: none;
}
} /* workspace-menu drives Popper-positioned dropdowns, so it animates the independent
`translate` and `scale` properties. A keyframe touching `transform` would
outrank Popper's inline `transform: translate3d(…)` while it runs and throw
the menu to the wrong corner until the animation ended. */
@keyframes workspace-menu {
from {
opacity: 0;
translate: 0 -6px;
scale: 0.98;
}
to {
opacity: 1;
translate: 0 0;
scale: 1;
}
}
@keyframes workspace-pulse {
0%, 100% {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}
50% {
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.02);
}
}
@keyframes workspace-grow {
from {
height: 0;
}
}
/* ============================================================
DARK MODE (theme toggles [data-bs-theme="dark"])
============================================================ */
[data-bs-theme=dark] .record-avatar .record-avatar-presence,
[data-bs-theme=dark] .record-check:checked::after {
border-color: var(--bs-body-bg);
}
/* ============================================================
PAGINATION FOOTER
============================================================ */
.workspace-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 14px 16px;
border-top: 1px solid var(--bs-border-color);
}
.workspace-footer-info {
font-size: 13px;
color: var(--bs-secondary-color);
}
.workspace-footer-info span {
color: var(--bs-heading-color, #111827);
font-weight: 600;
}
.workspace-footer-size {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--bs-secondary-color);
margin-left: auto;
}
@media (max-width: 575.98px) {
.workspace-footer-size {
margin-left: unset;
}
}
.workspace-footer-size .form-select {
width: auto;
}
.workspace-pagination {
display: flex;
align-items: center;
gap: 4px;
}
.workspace-page-button {
min-width: 34px;
height: 34px;
padding: 0 8px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
border-radius: var(--radius-sm);
color: var(--bs-body-color, #374151);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
}
.workspace-page-numbers {
display: inline-flex;
gap: 4px;
}
.workspace-page-button:hover:not(:disabled) {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.workspace-page-button.active {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.workspace-page-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ============================================================
INFO MODAL / DROPZONE / ID CARD / CONFIRM
============================================================ */
.record-info-key {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
margin-bottom: 3px;
}
.record-info-value {
font-size: 14px;
font-weight: 500;
color: var(--bs-heading-color, #111827);
}
.upload-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 30px 16px;
border: 2px dashed var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-secondary-bg);
cursor: pointer;
text-align: center;
transition: all var(--transition);
margin-bottom: 0;
}
.upload-dropzone:hover,
.upload-dropzone.dragover {
border-color: var(--bs-primary);
background: var(--tint-primary);
}
.upload-dropzone i {
font-size: 34px;
color: var(--bs-primary);
}
.upload-dropzone-title {
font-weight: 600;
}
.upload-dropzone-hint {
font-size: 12px;
color: var(--bs-secondary-color);
}
/* confirm icon */
.confirm-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 30px;
background: rgba(220, 38, 38, 0.12);
color: var(--bs-danger);
}
.confirm-icon.warning {
background: rgba(217, 119, 6, 0.12);
color: var(--bs-warning);
}
.confirm-icon.primary {
background: var(--tint-primary);
color: var(--bs-primary);
}
/* ============================================================
REALISTIC SCHOOL ID CARD
============================================================ */
.id-card-preview {
--id-accent: var(--bs-primary);
position: relative;
width: 320px;
margin: 6px auto;
background: #fff;
border-radius: 18px;
overflow: hidden;
font-family: inherit;
box-shadow: 0 2px 0 #d5dae2, 0 4px 10px rgba(15, 23, 42, 0.08);
border: 1px solid #e8eaed;
}
/* lanyard hole */
.id-card-hole {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 46px;
height: 9px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.55);
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
z-index: 3;
}
/* header band with brand + wave */
.id-card-head {
position: relative;
padding: 30px 18px 46px;
background: radial-gradient(120% 120% at 15% 0%, rgba(255, 255, 255, 0.22), transparent 55%), linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.22)), var(--id-accent);
color: #fff;
text-align: center;
overflow: hidden;
}
.id-card-head::after {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 10px, transparent 10px 20px);
opacity: 0.6;
}
.id-card-brand {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
}
.id-card-logo {
width: 34px;
height: 34px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.18);
display: inline-flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
}
.id-card-logo img {
height: 22px;
width: auto;
}
.id-card-logo i {
font-size: 20px;
color: #fff;
}
.id-card-brand-text {
text-align: left;
line-height: 1.1;
}
.id-card-brand-text h6 {
margin: 0;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.04em;
}
.id-card-brand-text span {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
opacity: 0.85;
}
/* white wave separating header from body */
.id-card-wave {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 34px;
background: #fff;
border-radius: 50% 50% 0 0/100% 100% 0 0;
z-index: 1;
}
/* photo */
.id-card-photo-wrap {
position: relative;
z-index: 2;
width: 92px;
height: 92px;
margin: -40px auto 0;
border-radius: 16px;
padding: 4px;
background: #fff;
box-shadow: 0 8px 18px -6px rgba(17, 24, 39, 0.3);
}
.id-card-photo {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.id-card-identity {
text-align: center;
margin-top: 10px;
}
.id-card-identity h5 {
margin: 0;
font-size: 17px;
font-weight: 700;
color: #111827;
}
/* info rows */
.id-card-info {
margin: 14px 18px 0;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
overflow: hidden;
}
.id-card-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 8px 12px;
font-size: 12px;
}
.id-card-row:nth-child(odd) {
background: var(--bs-secondary-bg);
}
.id-card-key {
color: var(--bs-secondary-color);
font-weight: 500;
}
.id-card-value {
color: #111827;
font-weight: 600;
text-align: right;
}
/* barcode */
.id-card-barcode {
margin: 14px 18px 0;
text-align: center;
}
.id-card-bars {
height: 40px;
border-radius: 4px;
background-image: repeating-linear-gradient(90deg, #1f2937 0 2px, #fff 2px 4px, #1f2937 4px 7px, #fff 7px 9px, #1f2937 9px 10px, #fff 10px 13px, #1f2937 13px 16px, #fff 16px 17px);
background-size: 17px 100%;
}
.id-card-barcode span {
display: block;
margin-top: 4px;
font-size: 11px;
letter-spacing: 0.28em;
color: #374151;
font-weight: 600;
}
/* signature + QR */
.id-card-signrow {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin: 14px 18px 0;
}
.id-card-qr {
width: 46px;
height: 46px;
border-radius: 8px;
border: 1px solid var(--bs-border-color);
display: inline-flex;
align-items: center;
justify-content: center;
}
.id-card-qr i {
font-size: 38px;
color: #111827;
}
.id-card-sign {
text-align: center;
flex: 1;
}
.id-card-sign-line {
display: block;
height: 22px;
border-bottom: 1.5px solid #9ca3af;
}
.id-card-sign small {
font-size: 10px;
color: var(--bs-secondary-color);
}
/* footer strip */
.id-card-foot {
margin-top: 14px;
padding: 10px 16px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.22)), var(--id-accent);
font-size: 10.5px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.id-card-foot i {
font-size: 13px;
}
[data-bs-theme=dark] .id-card-preview {
background: #fff;
}
[data-bs-theme=dark] .id-card-identity h5,
[data-bs-theme=dark] .id-card-value {
color: #111827;
}
/* toast tidy */
#sw_toasts .workspace-toast {
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow-lift);
}
/*-----------------
Board column
A titled column for board / kanban layouts: tinted well, heading with a
status dot and a count chip.
Promoted from pages/_parent-portal.scss — a reusable pattern, not page style.
-----------------*/
.portal-column {
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
padding: 10px;
}
.portal-column-head {
gap: 7px;
margin-bottom: 10px;
padding: 0 2px;
}
.portal-column-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
.portal-column-head b {
font-size: 12px;
color: var(--bs-emphasis-color);
}
.portal-column-count {
margin-left: auto;
font-size: 10.5px;
font-weight: 700;
color: var(--bs-secondary-color);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 6px;
padding: 1px 6px;
}
/* ============================================================
STUDENT PROMOTION workspace — migrated from app-new.css
============================================================ */
/* ===== promotion-workspace.css ===== */
/* ============================================================
Student Promotion Workspace — premium,
scoped (.student-promotion)
Self-contained. Does not modify global card/sidebar/header.
============================================================ */
.student-promotion {
color: var(--bs-body-color, #374151);
}
.student-promotion .promotion-tone-primary {
--accent: var(--bs-primary);
--accent-soft: var(--tint-primary);
}
.student-promotion .promotion-tone-success {
--accent: var(--bs-success);
--accent-soft: var(--tint-success);
}
.student-promotion .promotion-tone-warning {
--accent: var(--bs-warning);
--accent-soft: var(--tint-warning);
}
.student-promotion .promotion-tone-danger {
--accent: var(--bs-danger);
--accent-soft: var(--tint-danger);
}
.student-promotion .promotion-tone-info {
--accent: var(--bs-info);
--accent-soft: var(--tint-info);
}
.student-promotion .promotion-tone-purple {
--accent: var(--accent-purple);
--accent-soft: var(--tint-purple);
}
/* panels match the template card language without touching global .card */
.panel-block {
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.panel-block + .panel-block {
margin-top: 16px;
}
.panel-block-body {
padding: 18px;
}
.heading-row {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 700;
color: var(--bs-emphasis-color);
margin: 0 0 14px;
}
.heading-row i {
font-size: 17px;
color: var(--bs-primary);
}
.sub-label {
font-size: 11.5px;
font-weight: 500;
color: var(--bs-secondary-color);
}
.tile-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
/* buttons */
.promotion-button {
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0 14px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
color: var(--bs-body-color, #1f2937);
font-size: 13px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
text-decoration: none;
}
.promotion-button i {
font-size: 16px;
}
.promotion-button:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
background: var(--tint-primary);
transform: translateY(-1px);
}
.promotion-button-sm {
height: 32px;
padding: 0 11px;
font-size: 12px;
}
.promotion-button-primary {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.promotion-button-primary:hover {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
filter: brightness(1.07);
}
.promotion-icon-button {
width: 38px;
padding: 0;
justify-content: center;
}
.promotion-button:disabled,
.promotion-button.disabled {
opacity: 0.5;
pointer-events: none;
}
/* pills */
.pill-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
line-height: 1;
padding: 5px 10px;
border-radius: 999px;
white-space: nowrap;
}
.pill-tag i {
font-size: 12px;
}
.pill-tag.eligible {
color: var(--bs-success);
background: var(--tint-success);
}
.pill-tag.review {
color: var(--bs-warning);
background: var(--tint-warning);
}
.pill-tag.fee {
color: #b45309;
background: var(--tint-warning);
}
.pill-tag.lowatt {
color: var(--bs-danger);
background: var(--tint-danger);
}
.pill-tag.risk {
color: #be123c;
background: rgba(190, 18, 60, 0.12);
}
.pill-tag.graduated {
color: var(--accent-purple);
background: var(--tint-purple);
}
.pill-tag.detained {
color: #475569;
background: rgba(71, 85, 105, 0.14);
}
.pill-tag.transfer {
color: var(--bs-info);
background: var(--tint-info);
}
/* ---------- KPI SUMMARY ---------- */
.kpi-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.kpi-tile {
position: relative;
overflow: hidden;
padding: 15px 16px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
transition: transform var(--transition), box-shadow var(--transition);
}
.kpi-tile:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
}
.kpi-tile::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent, var(--bs-primary));
opacity: 0.9;
}
.kpi-tile-top {
display: flex;
align-items: center;
gap: 10px;
}
.kpi-tile-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)), var(--accent, var(--bs-primary));
box-shadow: 0 8px 16px -8px var(--accent-soft);
flex-shrink: 0;
}
.kpi-tile-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--bs-secondary-color);
}
.kpi-tile-value {
font-size: 23px;
font-weight: 800;
color: var(--bs-emphasis-color);
line-height: 1.05;
margin-top: 1px;
}
.kpi-tile-value small {
font-size: 13px;
font-weight: 600;
color: var(--bs-secondary-color);
}
.kpi-tile-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 12px;
}
.kpi-tile-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
}
.kpi-tile-delta.up {
color: var(--bs-success);
background: var(--tint-success);
}
.kpi-tile-delta.down {
color: var(--bs-danger);
background: var(--tint-danger);
}
.kpi-tile-delta.flat {
color: var(--bs-secondary-color);
background: var(--bs-secondary-bg);
}
.kpi-tile-bar {
height: 6px;
border-radius: 999px;
background: var(--bs-secondary-bg);
overflow: hidden;
margin-top: 12px;
}
.kpi-tile-bar > span {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent, var(--bs-primary)), rgba(255, 255, 255, 0.35));
background-color: var(--accent, var(--bs-primary));
transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.spark-graph {
display: block;
width: 100%;
height: 30px;
}
.spark-graph .ln {
fill: none;
stroke: var(--accent, var(--bs-primary));
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.spark-graph .ar {
fill: var(--accent-soft);
opacity: 0.7;
}
/* ---------- WIZARD ---------- */
.wizard {
padding: 16px 18px;
}
.wizard-steps {
display: flex;
align-items: flex-start;
gap: 0;
}
.wizard-step {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
cursor: pointer;
}
.wizard-step::before, .wizard-step::after {
content: "";
position: absolute;
top: 19px;
height: 3px;
background: var(--bs-border-color);
z-index: 0;
}
.wizard-step::before {
left: 0;
right: 50%;
}
.wizard-step::after {
left: 50%;
right: 0;
}
.wizard-step:first-child::before, .wizard-step:last-child::after {
display: none;
}
.wizard-step-dot {
position: relative;
z-index: 1;
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 700;
background: var(--bs-body-bg);
border: 2px solid var(--bs-border-color);
color: var(--bs-secondary-color);
transition: all var(--transition);
}
.wizard-step-text b {
display: block;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.wizard-step-text span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.wizard-step.done .wizard-step-dot {
background: var(--bs-success);
border-color: var(--bs-success);
color: #fff;
}
.wizard-step.done::before,
.wizard-step.done::after {
background: var(--bs-success);
}
.wizard-step.active .wizard-step-dot {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
box-shadow: 0 0 0 5px var(--tint-primary);
transform: scale(1.06);
}
.wizard-step.active::before {
background: var(--bs-success);
}
.wizard-step:not(.done):not(.active) {
cursor: not-allowed;
}
.wizard-step-wrap {
position: relative;
}
.wizard-step-panel {
display: none;
animation: pw-slide 0.4s ease;
}
.wizard-step-panel.active {
display: block;
}
@keyframes pw-slide {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: none;
}
}
.wizard-navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--bs-border-color);
}
/* select field */
.form-field label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 6px;
}
.form-field label .req {
color: var(--bs-danger);
}
.select-input,
.text-input {
width: 100%;
height: 42px;
padding: 0 12px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
font-size: 13px;
transition: all var(--transition);
}
.select-input:focus,
.text-input:focus {
outline: none;
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
}
.year-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.year-card {
position: relative;
padding: 16px;
border: 1.5px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
cursor: pointer;
transition: all var(--transition);
}
.year-card:hover {
border-color: var(--bs-primary);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.year-card.sel {
border-color: var(--bs-primary);
background: var(--tint-primary);
}
.year-card.sel::after {
content: "✓";
position: absolute;
top: 12px;
right: 12px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--bs-primary);
color: #fff;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.year-card b {
display: block;
font-size: 16px;
color: var(--bs-emphasis-color);
}
.year-card span {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.year-card.cur b::after {
content: "Current";
margin-left: 8px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-success);
background: var(--tint-success);
padding: 2px 7px;
border-radius: 999px;
vertical-align: middle;
}
/* class-map (from -> to) */
.map-block {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 14px;
}
.map-card {
padding: 16px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-secondary-bg);
}
.map-card .lbl {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
}
.map-card.to {
background: var(--tint-primary);
border-color: var(--tint-primary);
}
.map-example {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bs-primary);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 8px 18px -6px var(--tint-primary);
}
@media (max-width: 767px) {
.map-block {
grid-template-columns: 1fr;
}
.map-example {
margin: 0 auto;
transform: rotate(90deg);
}
}
/* ---------- CLASS OVERVIEW ---------- */
.overview-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.overview-block {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition);
}
.overview-block:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.overview-block .ic {
width: 34px;
height: 34px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
background: var(--accent-soft, var(--tint-primary));
color: var(--accent, var(--bs-primary));
flex-shrink: 0;
}
.overview-block .tx b {
display: block;
font-size: 14px;
color: var(--bs-emphasis-color);
line-height: 1.15;
}
.overview-block .tx span {
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.readiness {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: var(--radius);
background: linear-gradient(120deg, var(--tint-primary), transparent);
border: 1px solid var(--bs-border-color);
}
.ring-graph {
--v: 0;
width: 74px;
height: 74px;
border-radius: 50%;
flex-shrink: 0;
display: grid;
place-items: center;
background: conic-gradient(var(--bs-success) calc(var(--v) * 1%), var(--bs-secondary-bg) 0);
transition: --v 1s ease;
}
.ring-hole {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--bs-body-bg);
display: grid;
place-items: center;
font-size: 17px;
font-weight: 800;
color: var(--bs-emphasis-color);
}
.readiness-text b {
font-size: 14px;
color: var(--bs-emphasis-color);
}
.readiness-text p {
margin: 2px 0 0;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ---------- FILTERS ---------- */
.filter-bar-promotion {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.filter-bar-promotion .form-field label {
font-size: 11px;
margin-bottom: 4px;
}
.filter-bar-promotion .select-input {
height: 38px;
font-size: 12.5px;
}
/* ---------- STUDENTS TABLE ---------- */
.table-wrap {
overflow-x: auto;
}
.promotion-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 1080px;
}
.promotion-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--bs-secondary-bg);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--bs-secondary-color);
text-align: left;
padding: 11px 12px;
white-space: nowrap;
border-bottom: 1px solid var(--bs-border-color);
}
.promotion-table tbody td {
padding: 12px;
border-bottom: 1px solid var(--bs-border-color);
font-size: 12.5px;
color: var(--bs-emphasis-color);
vertical-align: middle;
}
.promotion-table tbody tr {
transition: background var(--transition);
}
.promotion-table tbody tr:hover {
background: var(--bs-secondary-bg);
}
.promotion-table tbody tr.sel {
background: var(--tint-primary);
}
.student-cell {
display: flex;
align-items: center;
gap: 10px;
}
.student-cell img {
width: 38px;
height: 38px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.student-cell b {
display: block;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.student-cell span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.metric-row {
display: inline-flex;
flex-direction: column;
gap: 4px;
min-width: 66px;
}
.metric-row .mv {
font-size: 12.5px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.meter-bar-promotion {
height: 5px;
border-radius: 999px;
background: var(--bs-secondary-bg);
overflow: hidden;
}
.meter-bar-promotion > span {
display: block;
height: 100%;
border-radius: 999px;
}
.meter-bar-promotion.g > span {
background: var(--bs-success);
}
.meter-bar-promotion.w > span {
background: var(--bs-warning);
}
.meter-bar-promotion.d > span {
background: var(--bs-danger);
}
.check-box {
width: 18px;
height: 18px;
border-radius: 5px;
border: 2px solid var(--bs-border-color);
background: var(--bs-body-bg);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
position: relative;
transition: all var(--transition);
flex-shrink: 0;
}
.check-box:checked {
background: var(--bs-primary);
border-color: var(--bs-primary);
}
.check-box:checked::after {
content: "✓";
position: absolute;
inset: 0;
color: #fff;
font-size: 12px;
display: grid;
place-items: center;
}
.table-select {
height: 34px;
padding: 0 8px;
border: 1px solid var(--bs-border-color);
border-radius: 8px;
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
font-size: 12px;
max-width: 150px;
}
.remark-note {
width: 130px;
height: 34px;
padding: 0 8px;
border: 1px solid var(--bs-border-color);
border-radius: 8px;
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
font-size: 12px;
}
.icon-button-promotion {
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
cursor: pointer;
transition: all var(--transition);
}
.icon-button-promotion:hover {
color: var(--bs-primary);
border-color: var(--bs-primary);
background: var(--tint-primary);
}
/* mobile card view */
.promotion-cards {
display: none;
flex-direction: column;
gap: 12px;
}
.promotion-card {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
padding: 14px;
background: var(--bs-body-bg);
}
.promotion-card-top {
display: flex;
align-items: center;
gap: 10px;
}
.promotion-card-top .check-box {
margin-left: auto;
}
.promotion-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 12px;
margin: 12px 0;
}
.promotion-card-grid .k {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--bs-secondary-color);
}
.promotion-card-grid .v {
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ---------- AI INSIGHTS ---------- */
.promotion-ai {
background: linear-gradient(135deg, var(--tint-purple), var(--tint-primary)), var(--bs-body-bg);
}
.promotion-ai .heading-row i {
color: var(--accent-purple);
}
.promotion-ai-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--accent-purple);
background: var(--tint-purple);
padding: 3px 9px;
border-radius: 999px;
}
.promotion-ai-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.promotion-ai-card {
display: flex;
gap: 11px;
padding: 13px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
}
.promotion-ai-card .ic {
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: var(--accent-soft, var(--tint-primary));
color: var(--accent, var(--bs-primary));
flex-shrink: 0;
}
.promotion-ai-card .tx b {
display: block;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.promotion-ai-card .tx p {
margin: 3px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
line-height: 1.5;
}
.promotion-ai-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.promotion-ai-action {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px dashed var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.promotion-ai-action i {
font-size: 16px;
color: var(--accent-purple);
}
.promotion-ai-action .promotion-button {
margin-left: auto;
}
/* ---------- ANALYTICS ---------- */
.analysis-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.analysis-block {
padding: 14px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
}
.analysis-block h6 {
font-size: 12px;
font-weight: 700;
color: var(--bs-emphasis-color);
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 6px;
}
.donut-graph {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto;
}
.donut-graph svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
}
.donut-graph circle {
fill: none;
stroke-width: 14;
}
.donut-graph .c {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
}
.donut-graph .c b {
font-size: 22px;
font-weight: 800;
color: var(--bs-emphasis-color);
}
.donut-graph .c span {
font-size: 10px;
color: var(--bs-secondary-color);
}
.legend-row {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
}
.legend-row div {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--bs-secondary-color);
}
.legend-row .k {
width: 9px;
height: 9px;
border-radius: 3px;
}
.legend-row b {
margin-left: auto;
color: var(--bs-emphasis-color);
}
.bar-list {
display: flex;
align-items: flex-end;
gap: 10px;
height: 130px;
padding-top: 8px;
}
.bar-list .b {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 6px;
height: 100%;
}
.bar-list .col {
width: 100%;
max-width: 34px;
border-radius: 7px 7px 0 0;
background: linear-gradient(180deg, var(--bs-primary), var(--tint-primary));
height: 0;
transition: height 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar-list .b.alt .col {
background: linear-gradient(180deg, var(--bs-success), var(--tint-success));
}
.bar-list .cap {
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.bar-list .val {
font-size: 10.5px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.distribution {
display: flex;
flex-direction: column;
gap: 11px;
}
.distribution-row .top {
display: flex;
justify-content: space-between;
font-size: 12px;
margin-bottom: 5px;
color: var(--bs-emphasis-color);
}
.distribution-row .tr {
height: 8px;
border-radius: 999px;
background: var(--bs-secondary-bg);
overflow: hidden;
}
.distribution-row .tr > span {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- BULK STICKY BAR ---------- */
.bulk-bar-promotion {
position: sticky;
bottom: 16px;
z-index: 20;
display: none;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 16px;
padding: 12px 16px;
border-radius: var(--radius);
background: var(--bs-emphasis-color);
color: #fff;
box-shadow: 0 18px 40px -14px rgba(15, 23, 42, 0.6);
}
[data-bs-theme=dark] .bulk-bar-promotion, [data-theme=dark] .bulk-bar-promotion {
background: #0b0e17;
border: 1px solid var(--bs-border-color);
}
.bulk-bar-promotion.show {
display: flex;
animation: pw-slide 0.3s ease;
}
.bulk-bar-count-promotion {
font-size: 13px;
font-weight: 700;
}
.bulk-bar-count-promotion b {
display: inline-grid;
place-items: center;
min-width: 24px;
height: 24px;
padding: 0 6px;
border-radius: 999px;
background: var(--bs-primary);
color: #fff;
margin-right: 7px;
}
.bulk-bar-promotion .bulk-bar-actions-promotion {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-left: auto;
}
.block-button {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 12px;
border-radius: 9px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
}
.block-button:hover {
background: rgba(255, 255, 255, 0.2);
}
.block-button i {
font-size: 15px;
}
.block-button.go {
background: var(--bs-success);
border-color: var(--bs-success);
}
.block-button.stop {
background: var(--bs-danger);
border-color: var(--bs-danger);
}
.bulk-bar-promotion .x {
margin-left: 2px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
font-size: 18px;
display: inline-flex;
}
/* ---------- RECENT PROMOTIONS TIMELINE ---------- */
.promotion-timeline {
position: relative;
padding-left: 8px;
}
.promotion-timeline-list {
display: flex;
gap: 14px;
padding: 12px 0;
position: relative;
}
@media (max-width: 575.98px) {
.promotion-timeline-list {
flex-direction: column;
align-items: start !important;
}
}
.promotion-timeline-list:not(:last-child)::before {
content: "";
position: absolute;
left: 18px;
top: 44px;
bottom: -12px;
width: 2px;
background: var(--bs-border-color);
}
.promotion-timeline-icon {
width: 38px;
height: 38px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
background: var(--accent-soft, var(--tint-success));
color: var(--accent, var(--bs-success));
flex-shrink: 0;
z-index: 1;
}
.promotion-timeline-body {
flex: 1;
min-width: 0;
}
.promotion-timeline-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.promotion-timeline-top b {
font-size: 13px;
color: var(--bs-emphasis-color);
}
.promotion-timeline-route {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
color: var(--bs-primary);
background: var(--tint-primary);
padding: 2px 8px;
border-radius: 999px;
}
.promotion-timeline-meta {
margin-top: 4px;
font-size: 11.5px;
color: var(--bs-secondary-color);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.promotion-timeline-meta img {
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
}
.promotion-timeline-meta i {
font-size: 6px;
opacity: 0.6;
}
.promotion-timeline-date {
font-size: 11.5px;
color: var(--bs-secondary-color);
flex-shrink: 0;
white-space: nowrap;
}
/* ---------- QUICK ACTIONS ---------- */
.quick-panel {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.quick-actions-promotion {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 10px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
text-align: center;
text-decoration: none;
cursor: pointer;
transition: all var(--transition);
}
.quick-actions-promotion:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
border-color: var(--accent, var(--bs-primary));
}
.quick-actions-promotion .ic {
width: 44px;
height: 44px;
border-radius: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
background: var(--accent-soft, var(--tint-primary));
color: var(--accent, var(--bs-primary));
transition: transform var(--transition);
}
.quick-actions-promotion:hover .ic {
transform: scale(1.08);
}
.quick-actions-promotion span {
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ---------- CONFIRM MODAL ---------- */
.confirm-hero {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
color: #fff;
background: linear-gradient(135deg, var(--bs-primary), var(--accent-purple));
}
.confirm-hero .ic {
width: 48px;
height: 48px;
border-radius: 14px;
display: grid;
place-items: center;
font-size: 26px;
background: rgba(255, 255, 255, 0.18);
}
.confirm-hero h4 {
margin: 0;
color: #fff;
font-size: 18px;
}
.confirm-hero span {
font-size: 12.5px;
opacity: 0.88;
}
.confirm-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.confirm-stat {
text-align: center;
padding: 12px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
}
.confirm-stat b {
display: block;
font-size: 22px;
font-weight: 800;
color: var(--accent, var(--bs-emphasis-color));
}
.confirm-stat span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.check-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.column-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
color: var(--bs-emphasis-color);
padding: 8px 10px;
border-radius: 9px;
background: var(--bs-secondary-bg);
}
.column-label i {
font-size: 17px;
color: var(--bs-success);
}
/* ---------- TOASTS ---------- */
#pwToasts {
position: fixed;
top: 76px;
right: 20px;
z-index: 3000;
display: flex;
flex-direction: column;
gap: 10px;
}
#pwToasts .toast {
min-width: 260px;
}
/* ---------- SKELETON ---------- */
/* shared primitive, page tone and geometry */
.student-promotion .skeleton-loader {
display: none;
}
.student-promotion.loading .skeleton-loader {
display: block;
}
.student-promotion.loading .live-flag-promotion {
display: none;
}
.student-promotion .skeleton {
background: var(--bs-secondary-bg);
border-radius: 8px;
}
.student-promotion .skeleton::after {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
animation-duration: 1.5s;
}
.student-promotion .skeleton-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 16px;
}
.student-promotion .skeleton-card {
height: 118px;
border-radius: var(--radius);
}
.student-promotion .skeleton-row {
height: 56px;
border-radius: 10px;
margin-bottom: 10px;
}
.student-promotion .skeleton-block {
height: 200px;
border-radius: var(--radius);
margin-bottom: 16px;
}
[data-bs-theme=dark] .student-promotion .skeleton::after,
[data-theme=dark] .student-promotion .skeleton::after {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}
@keyframes pw-count-none {}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199px) {
.kpi-tiles {
grid-template-columns: repeat(2, 1fr);
}
.skeleton-kpis {
grid-template-columns: repeat(2, 1fr);
}
.overview-grid {
grid-template-columns: repeat(3, 1fr);
}
.promotion-ai-grid,
.analysis-grid {
grid-template-columns: 1fr;
}
.quick-panel {
grid-template-columns: repeat(3, 1fr);
}
.filter-bar-promotion {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
.table-wrap {
display: none;
}
.promotion-cards {
display: flex;
}
.overview-grid {
grid-template-columns: repeat(2, 1fr);
}
.year-cards {
grid-template-columns: 1fr;
}
.filter-bar-promotion {
grid-template-columns: repeat(2, 1fr);
}
.quick-panel {
grid-template-columns: repeat(2, 1fr);
}
.wizard-step-text span {
display: none;
}
.confirm-stats {
grid-template-columns: 1fr;
}
}
@media (max-width: 575px) {
.kpi-tiles,
.skeleton-kpis {
grid-template-columns: 1fr;
}
.filter-bar-promotion {
grid-template-columns: 1fr;
}
}
/* ---------- Recent Promotions (enhanced) ---------- */
.chip-set {
display: inline-flex;
gap: 3px;
background: var(--bs-secondary-bg);
padding: 3px;
border-radius: 999px;
}
@media (max-width: 575.98px) {
.chip-set {
flex-wrap: wrap;
}
}
.chip-item {
font-size: 12px;
font-weight: 600;
color: var(--bs-secondary-color);
padding: 5px 13px;
border-radius: 999px;
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
}
.chip-item:hover {
color: var(--bs-emphasis-color);
}
.chip-item.active {
background: var(--bs-body-bg);
color: var(--bs-primary);
box-shadow: var(--shadow);
}
.report-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.report-sum {
display: flex;
align-items: center;
gap: 11px;
padding: 13px 14px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-secondary-bg);
transition: transform var(--transition), box-shadow var(--transition);
}
.report-sum:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.report-sum .ic {
width: 40px;
height: 40px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: var(--accent-soft, var(--tint-primary));
color: var(--accent, var(--bs-primary));
flex-shrink: 0;
}
.report-sum .tx b {
display: block;
font-size: 20px;
font-weight: 800;
color: var(--bs-emphasis-color);
line-height: 1.1;
}
.report-sum .tx span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.report-list .promotion-timeline-list {
align-items: center;
gap: 13px;
padding: 12px 14px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
margin-bottom: 10px;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.report-list .promotion-timeline-list::before {
display: none;
}
.report-list .promotion-timeline-list:last-child {
margin-bottom: 0;
}
.report-list .promotion-timeline-list:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
border-color: var(--accent, var(--bs-primary));
}
.report-list .promotion-timeline-meta {
margin-top: 6px;
}
.avatar-row-stack {
display: inline-flex;
align-items: center;
}
.avatar-row-stack img {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--bs-body-bg);
margin-left: -7px;
}
.avatar-row-stack img:first-child {
margin-left: 0;
}
.avatar-row-stack em {
font-style: normal;
font-size: 11px;
font-weight: 700;
color: var(--bs-secondary-color);
margin-left: 7px;
}
.promotion-timeline-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
flex-shrink: 0;
text-align: right;
}
.promotion-timeline-num {
font-size: 18px;
font-weight: 800;
color: var(--bs-emphasis-color);
line-height: 1;
}
@media (max-width: 991px) {
.report-summary {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575px) {
.report-summary {
grid-template-columns: 1fr;
}
.report-list .avatar-row-stack {
display: none;
}
.promotion-timeline-num {
display: none;
}
}
/* ============================================================
FEE COLLECTION workspace — migrated from app-new.css
============================================================ */
/* ============================================================
FEES MASTER — Finance Command Center (.fee-collection)
2026 SaaS finance workspace. Scoped & self-contained.
Does not touch sidebar,
header,
global card or layout grid.
============================================================ */
.fee-collection {
--avatar-accent: var(--bs-primary);
--avatar-accent-soft: var(--tint-primary);
color: var(--bs-body-color);
font-feature-settings: "tnum" 1;
}
/* ---------- primitives ---------- */
.sub-text {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.eyebrow-text {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-tertiary-color);
}
.eyebrow-text i {
font-size: 13px;
color: var(--bs-primary);
}
.section-bar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin: 26px 2px 14px;
}
.section-bar-title {
font-size: 18px;
font-weight: 750;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
margin: 3px 0 0;
}
.toolbar-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 13px;
font-size: 12.5px;
font-weight: 600;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
cursor: pointer;
white-space: nowrap;
transition: all var(--transition);
text-decoration: none;
}
.toolbar-button:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.toolbar-button i {
font-size: 15px;
}
.toolbar-button-sm {
padding: 6px 11px;
font-size: 12px;
}
.toolbar-button-xs {
padding: 5px 9px;
font-size: 11.5px;
}
.toolbar-button-primary {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.toolbar-button-primary:hover {
color: #fff;
filter: brightness(1.06);
}
.toolbar-button.danger {
color: var(--bs-danger);
border-color: var(--bs-danger);
}
.toolbar-button.danger:hover {
background: var(--bs-danger);
color: #fff;
}
.toolbar-icon-button {
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 8px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
cursor: pointer;
transition: all var(--transition);
}
.toolbar-icon-button:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.toolbar-icon-button.ok:hover {
border-color: var(--bs-success);
color: var(--bs-success);
}
.toolbar-icon-button.no:hover {
border-color: var(--bs-danger);
color: var(--bs-danger);
}
.status-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
}
.status-chip i {
font-size: 12px;
}
.status-chip.ok {
color: var(--bs-success);
background: var(--tint-success);
}
.status-chip.warn {
color: var(--bs-warning);
background: var(--tint-warning);
}
.status-chip.bad {
color: var(--bs-danger);
background: var(--tint-danger);
}
.status-chip.info {
color: var(--bs-info);
background: var(--tint-info);
}
.status-chip.ai {
color: var(--accent-purple);
background: var(--tint-purple);
}
.status-chip.soft {
color: var(--bs-secondary-color);
background: var(--bs-tertiary-bg);
}
.status-chip.draft {
color: var(--bs-tertiary-color);
background: var(--bs-tertiary-bg);
border: 1px dashed var(--bs-border-color);
}
.status-chip.live {
color: var(--bs-danger);
background: var(--tint-danger);
}
.meta-tag {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 7px;
font-size: 11px;
font-weight: 600;
color: var(--accent);
background: var(--accent-soft);
}
.choice-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
color: var(--bs-secondary-color);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.choice-chip i {
font-size: 13px;
color: var(--bs-primary);
}
.choice-chip.warn {
color: var(--bs-warning);
border-color: var(--tint-warning);
}
.choice-chip.warn i {
color: var(--bs-warning);
}
.meter-bar {
height: 8px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.meter-bar > span {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: var(--accent);
transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.note-line {
display: flex;
gap: 9px;
padding: 10px 12px;
border-radius: var(--radius-xs);
font-size: 11.5px;
line-height: 1.55;
background: var(--accent-soft);
}
.note-line i {
font-size: 16px;
color: var(--accent);
flex-shrink: 0;
margin-top: 1px;
}
.note-line b {
color: var(--bs-emphasis-color);
}
.live-flag-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bs-success);
box-shadow: 0 0 0 0 var(--tint-success);
animation: fcc-pulse 1.6s infinite;
flex-shrink: 0;
}
@keyframes fcc-pulse {
0% {
box-shadow: 0 0 0 0 var(--tint-success);
}
100% {
box-shadow: 0 0 0 7px var(--tint-success);
}
}
/* ---------- COMMAND HERO ---------- */
/* .command-bar-side is `display:contents` so its two children (upload-block,
quick-actions) place directly into this grid — letting the quick-actions
row genuinely receive the leftover 1fr height and grow into it. A nested
flex/grid column relying on percentage-height-of-stretched-item doesn't
reliably pick up that height in practice, so the side column is flattened
into the outer grid instead of trying to fill itself from the inside. */
.command-bar {
display: grid;
grid-template-columns: 1.45fr 1fr;
grid-template-rows: auto 1fr;
gap: 16px;
}
.command-bar-main {
grid-column: 1;
grid-row: 1/3;
position: relative;
overflow: hidden;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
padding: 20px;
background: radial-gradient(120% 150% at 100% 0, var(--tint-primary), transparent 48%), linear-gradient(180deg, var(--bs-body-bg), var(--bs-secondary-bg));
}
.command-bar-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.command-bar-title {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--bs-emphasis-color);
margin: 4px 0 8px;
}
.command-bar-meta {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.command-bar-today {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.command-bar-today b {
display: block;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
line-height: 1.05;
}
.command-bar-today span {
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.summary-rail {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--bs-border-color);
}
.summary-rail-top {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 8px;
}
.summary-rail-top span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.summary-rail-top b {
font-size: 17px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
.summary-rail-bar {
position: relative;
display: flex;
gap: 2px;
height: 12px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: visible;
}
.summary-rail-bar .seg {
width: 0;
transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.summary-rail-bar .seg:first-of-type {
border-radius: 999px 0 0 999px;
}
.summary-rail-bar .seg.a {
background: var(--bs-success);
}
.summary-rail-bar .seg.b {
background: var(--bs-warning);
}
.summary-rail-bar .seg.c {
background: var(--bs-danger);
}
.summary-rail-bar .mk {
position: absolute;
top: -4px;
left: 0;
width: 2px;
height: 20px;
border-radius: 2px;
background: var(--bs-emphasis-color);
opacity: 0.5;
transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.summary-rail-keys {
display: flex;
flex-wrap: wrap;
gap: 5px 14px;
margin-top: 10px;
}
.summary-rail-keys > span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.summary-rail-keys > span > i {
width: 8px;
height: 8px;
border-radius: 3px;
}
.summary-rail-keys .a > i {
background: var(--bs-success);
}
.summary-rail-keys .b > i {
background: var(--bs-warning);
}
.summary-rail-keys .c > i {
background: var(--bs-danger);
}
.summary-rail-keys .d > i {
background: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
}
.ai-panel {
display: flex;
gap: 12px;
margin-top: 16px;
padding: 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--bs-border-color);
background: linear-gradient(120deg, var(--tint-purple), transparent 62%), var(--bs-body-bg);
}
.ai-panel-orb {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 11px;
display: grid;
place-items: center;
font-size: 18px;
color: #fff;
background: linear-gradient(135deg, var(--accent-purple), var(--bs-primary));
}
.ai-panel-body {
min-width: 0;
flex: 1;
}
.ai-panel-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px;
}
.ai-panel-top b {
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.ai-panel p {
margin: 0;
font-size: 12.5px;
line-height: 1.65;
}
.ai-panel p mark {
background: none;
padding: 0;
color: var(--bs-emphasis-color);
font-weight: 700;
}
.ai-panel-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 10px;
}
.command-bar-side {
display: contents;
}
.upload-block {
grid-column: 2;
grid-row: 1;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
padding: 14px;
}
.upload-block-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
}
.upload-block-head b {
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.upload-block-head span {
font-size: 10.5px;
color: var(--bs-tertiary-color);
}
.upload-block-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--bs-border-color);
}
.upload-block-row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.upload-block-row .d {
width: 38px;
flex-shrink: 0;
text-align: center;
border-radius: 9px;
padding: 4px 0;
color: var(--accent);
background: var(--accent-soft);
}
.upload-block-row .d b {
display: block;
font-size: 14px;
font-weight: 800;
line-height: 1;
}
.upload-block-row .d span {
font-size: 9px;
text-transform: uppercase;
}
.upload-block-row .t {
flex: 1;
min-width: 0;
}
.upload-block-row .t b {
display: block;
font-size: 12px;
color: var(--bs-emphasis-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.upload-block-row .t span {
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.upload-block-row .v {
font-size: 13px;
font-weight: 800;
color: var(--bs-emphasis-color);
flex-shrink: 0;
}
.quick-actions {
grid-column: 2;
grid-row: 2;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
padding: 14px;
}
.quick-action-head {
margin-bottom: 10px;
}
.quick-action-head b {
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.quick-action-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: auto 0;
}
.quick-action-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
padding: 12px 6px;
border-radius: var(--radius-sm);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
cursor: pointer;
transition: all var(--transition);
text-align: center;
}
.quick-action-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
border-color: var(--accent);
}
.quick-action-item .ic {
width: 32px;
height: 32px;
border-radius: 10px;
display: grid;
place-items: center;
font-size: 17px;
color: var(--accent);
background: var(--accent-soft);
}
.quick-action-item b {
font-size: 10.5px;
font-weight: 650;
color: var(--bs-emphasis-color);
line-height: 1.25;
}
/* ---------- SMART FILTERS ---------- */
.filter-bar {
margin-top: 16px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
padding: 12px 14px;
}
.view-toggle-group {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding-bottom: 11px;
border-bottom: 1px solid var(--bs-border-color);
}
.view-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border-radius: 999px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
font-size: 12px;
font-weight: 600;
color: var(--bs-secondary-color);
cursor: pointer;
transition: all var(--transition);
}
.view-toggle i {
font-size: 14px;
}
.view-toggle span {
padding: 1px 6px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
background: var(--bs-tertiary-bg);
color: var(--bs-tertiary-color);
}
.view-toggle:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.view-toggle.on {
background: var(--bs-primary);
border-color: transparent;
color: #fff;
}
.view-toggle.on span {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.view-toggle.add {
border-style: dashed;
}
.filter-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 12px 0;
}
.search-field {
position: relative;
flex: 1;
min-width: 240px;
display: flex;
align-items: center;
}
.search-field > i {
position: absolute;
left: 11px;
font-size: 16px;
color: var(--bs-tertiary-color);
}
.search-field input {
width: 100%;
padding: 9px 40px 9px 34px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-tertiary-bg);
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.search-field input:focus {
outline: none;
border-color: var(--bs-primary);
background: var(--bs-body-bg);
}
.search-field kbd {
position: absolute;
right: 10px;
padding: 1px 6px;
border-radius: 5px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
font-size: 10px;
color: var(--bs-tertiary-color);
}
.select-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.select-field {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.select-field > span {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-tertiary-color);
}
.select-field select {
border: 0;
background: none;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
cursor: pointer;
padding-right: 2px;
}
.select-field select:focus {
outline: none;
}
.select-field.sm {
padding: 4px 8px;
}
.chip-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding-top: 11px;
border-top: 1px solid var(--bs-border-color);
}
.filter-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border-radius: 7px;
border: 1px solid var(--bs-border-color);
background: var(--bs-tertiary-bg);
font-size: 11px;
font-weight: 600;
color: var(--bs-emphasis-color);
cursor: pointer;
transition: all var(--transition);
}
.filter-tag i {
font-size: 13px;
color: var(--bs-tertiary-color);
}
.filter-tag:hover {
border-color: var(--bs-danger);
color: var(--bs-danger);
}
.filter-tag:hover i {
color: var(--bs-danger);
}
.clear-button {
border: 0;
background: none;
font-size: 11px;
font-weight: 600;
color: var(--bs-primary);
cursor: pointer;
padding: 4px 6px;
}
/* ---------- FEE STRUCTURE CARDS ---------- */
.card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.fee-record {
position: relative;
overflow: hidden;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
padding: 16px;
transition: transform var(--transition), box-shadow var(--transition);
}
.fee-record::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--accent);
}
.fee-record:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
}
.fee-record-top {
display: flex;
align-items: flex-start;
gap: 11px;
}
.fee-record-id {
flex: 1;
min-width: 0;
}
.fee-record-id b {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1.25;
}
.fee-record-id span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.fee-record-amount {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin: 14px 0 12px;
}
.fee-record-amount b {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--bs-emphasis-color);
}
.fee-record-amount > span:not(.status-chip) {
font-size: 11px;
color: var(--bs-secondary-color);
}
.fee-record-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 14px;
margin: 0 0 13px;
padding: 12px 0;
border-top: 1px solid var(--bs-border-color);
border-bottom: 1px solid var(--bs-border-color);
}
.fee-record-meta dt {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-tertiary-color);
font-weight: 650;
}
.fee-record-meta dd {
margin: 2px 0 0;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fee-record-progress-top {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 6px;
}
.fee-record-progress-top span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.fee-record-progress-top b {
font-size: 13px;
font-weight: 800;
color: var(--bs-emphasis-color);
}
.fee-record-progress-foot {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.fee-record-actions {
display: flex;
align-items: center;
gap: 6px;
margin-top: 14px;
padding-top: 13px;
border-top: 1px solid var(--bs-border-color);
opacity: 0.55;
transition: opacity var(--transition);
}
.fee-record:hover .fee-record-actions,
.fee-record:focus-within .fee-record-actions {
opacity: 1;
}
/* ---------- ANALYTICS ---------- */
.segmented-control {
display: inline-flex;
padding: 3px;
border-radius: 999px;
border: 1px solid var(--bs-border-color);
background: var(--bs-tertiary-bg);
}
.segmented-control button {
border: 0;
background: none;
padding: 4px 13px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
color: var(--bs-secondary-color);
cursor: pointer;
transition: all var(--transition);
}
.segmented-control button.on {
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
box-shadow: var(--shadow);
}
.analytics-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
grid-template-areas: "chart figures" "inst figures";
gap: 16px;
}
.chart-block {
grid-area: chart;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
padding: 16px;
}
.chart-block-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.chart-block-head b {
display: block;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--bs-emphasis-color);
}
.chart-block-head b small {
font-size: 12px;
font-weight: 600;
color: var(--bs-secondary-color);
}
.chart-legend-row {
display: flex;
gap: 12px;
}
.chart-legend-row span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.chart-legend-row i {
width: 14px;
height: 3px;
border-radius: 2px;
}
.chart-legend-row .a i {
background: var(--bs-primary);
}
.chart-legend-row .b i {
background: var(--bs-border-color);
}
.chart-area {
display: block;
width: 100%;
height: 190px;
}
.chart-area .grid path {
stroke: var(--bs-border-color);
stroke-width: 1;
fill: none;
}
.chart-area .exp {
fill: none;
stroke: var(--bs-border-color);
stroke-width: 2;
stroke-dasharray: 5 5;
}
.chart-area .fill {
fill: url(#fccFill);
}
.chart-area .ln {
fill: none;
stroke: var(--bs-primary);
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.chart-area .dots circle {
fill: var(--bs-body-bg);
stroke: var(--bs-primary);
stroke-width: 2.4;
}
.chart-area .dots circle.last {
fill: var(--bs-primary);
}
.chart-axis {
display: flex;
justify-content: space-between;
margin-top: 6px;
}
.chart-axis span {
font-size: 10px;
color: var(--bs-tertiary-color);
}
.figure-grid {
grid-area: figures;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
gap: 10px;
height: 100%;
}
.figure-tile {
display: flex;
flex-direction: column;
height: 100%;
padding: 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--accent);
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition);
}
.figure-tile:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.figure-tile .k {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-tertiary-color);
font-weight: 650;
}
.figure-tile b {
display: block;
font-size: 18px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
margin-top: 2px;
}
.figure-tile .d {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
font-weight: 650;
margin-top: 2px;
}
.figure-tile .d i {
font-size: 12px;
}
.figure-tile .d.up {
color: var(--bs-success);
}
.figure-tile .d.down {
color: var(--bs-danger);
}
.figure-tile .d.flat {
color: var(--bs-secondary-color);
}
.chart-spark {
display: block;
width: 100%;
height: 26px;
margin-top: auto;
padding-top: 6px;
}
.chart-spark .ln {
fill: none;
stroke: var(--accent);
stroke-width: 2;
stroke-linecap: round;
}
.chart-spark .ln.dash {
stroke-dasharray: 4 4;
}
.instalment-row {
grid-area: inst;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
padding: 16px;
}
.instalment-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.instalment-head b {
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.step-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.step-list li {
position: relative;
padding: 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.step-list li .n {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 11px;
font-weight: 800;
color: var(--bs-tertiary-color);
background: var(--bs-tertiary-bg);
margin-bottom: 8px;
}
.step-list li b {
display: block;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.step-list li > span:not(.n):not(.status-chip) {
display: block;
font-size: 10.5px;
color: var(--bs-secondary-color);
margin: 2px 0 7px;
}
.step-list li.done .n {
background: var(--bs-success);
color: #fff;
}
.step-list li.now {
border-color: var(--bs-primary);
background: var(--tint-primary);
}
.step-list li.now .n {
background: var(--bs-primary);
color: #fff;
}
/* ---------- AI INSIGHTS ---------- */
.insight-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.insight-row {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
padding: 15px;
transition: transform var(--transition), box-shadow var(--transition);
}
.insight-row:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
}
.insight-row header {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
}
.insight-row header .ic {
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 9px;
display: grid;
place-items: center;
font-size: 16px;
color: var(--accent);
background: var(--accent-soft);
}
.insight-row header b {
flex: 1;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.insight-row p {
margin: 0 0 11px;
font-size: 12px;
line-height: 1.6;
color: var(--bs-body-color);
}
.insight-row p b {
color: var(--bs-emphasis-color);
}
.confidence-meter {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 11px;
}
.confidence-bar {
flex: 1;
height: 6px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.confidence-bar > span {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: var(--accent);
transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.confidence-meter > b {
font-size: 11.5px;
font-weight: 800;
color: var(--bs-emphasis-color);
}
.insight-row footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 11px;
border-top: 1px solid var(--bs-border-color);
}
/* ---------- DATA GRID ---------- */
.record-grid-tools {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.inline-search {
position: relative;
display: flex;
align-items: center;
}
.inline-search i {
position: absolute;
left: 10px;
font-size: 15px;
color: var(--bs-tertiary-color);
}
.inline-search input {
padding: 6px 11px 6px 31px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
font-size: 12px;
color: var(--bs-emphasis-color);
min-width: 190px;
}
.inline-search input:focus {
outline: none;
border-color: var(--bs-primary);
}
.record-grid-wrap {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
overflow: hidden;
}
.record-grid-scroll {
overflow-x: auto;
max-height: 620px;
overflow-y: auto;
}
.record-grid {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 1180px;
}
.record-grid thead th {
position: sticky;
top: 0;
z-index: 3;
background: var(--bs-tertiary-bg);
border-bottom: 1px solid var(--bs-border-color);
padding: 11px 12px;
text-align: left;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-tertiary-color);
white-space: nowrap;
}
.record-grid thead th.num,
.record-grid td.num {
text-align: right;
}
.record-grid thead th.pin {
position: sticky;
z-index: 4;
}
.record-grid thead th.col-check,
.record-grid td.col-check {
left: 0;
width: 44px;
}
.record-grid thead th.col-name,
.record-grid td.col-name {
left: 44px;
min-width: 250px;
}
.record-grid thead th.pin-end,
.record-grid td.pin-end {
right: 0;
z-index: 4;
}
.record-grid td.pin,
.record-grid td.pin-end {
position: sticky;
background: var(--bs-body-bg);
z-index: 2;
}
.record-grid td.col-name {
box-shadow: 1px 0 0 var(--bs-border-color);
}
.record-grid td.pin-end {
box-shadow: -1px 0 0 var(--bs-border-color);
}
.column-sort {
display: inline-flex;
align-items: center;
gap: 5px;
border: 0;
background: none;
padding: 0;
font: inherit;
color: inherit;
text-transform: inherit;
letter-spacing: inherit;
cursor: pointer;
}
.column-sort i {
font-size: 13px;
opacity: 0.55;
}
.column-sort:hover {
color: var(--bs-primary);
}
.column-sort.asc i,
.column-sort.desc i {
opacity: 1;
color: var(--bs-primary);
}
.column-resize {
position: absolute;
top: 0;
right: 0;
width: 5px;
height: 100%;
cursor: col-resize;
}
.column-resize:hover {
background: var(--bs-primary);
opacity: 0.35;
}
.record-grid thead th {
position: sticky;
}
.record-grid tbody td {
padding: 12px;
border-bottom: 1px solid var(--bs-border-color);
font-size: 12.5px;
vertical-align: middle;
}
.record-row {
transition: background var(--transition);
}
.record-row:hover td {
background: var(--bs-tertiary-bg);
}
.record-row.sel td {
background: var(--tint-primary);
}
.record-grid.dense tbody td {
padding: 7px 12px;
}
.row-check {
display: inline-flex;
cursor: pointer;
}
.row-check input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.row-check span {
width: 17px;
height: 17px;
border-radius: 5px;
border: 1.5px solid var(--bs-border-color);
display: grid;
place-items: center;
transition: all var(--transition);
}
.row-check input:checked + span {
background: var(--bs-primary);
border-color: var(--bs-primary);
}
.row-check input:checked + span::after {
content: "";
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) translateY(-1px);
}
.row-check input:focus-visible + span {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
}
.row-expander {
width: 22px;
height: 22px;
border-radius: 6px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
display: inline-grid;
place-items: center;
font-size: 14px;
cursor: pointer;
transition: all var(--transition);
vertical-align: middle;
margin-right: 8px;
}
.row-expander:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.row-expander i {
transition: transform var(--transition);
}
.row-expander[aria-expanded=true] {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.row-expander[aria-expanded=true] i {
transform: rotate(90deg);
}
.legend-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
margin-right: 8px;
vertical-align: middle;
}
.record-cell-main {
display: inline-flex;
flex-direction: column;
vertical-align: middle;
}
.record-cell-main b {
font-size: 12.5px;
font-weight: 650;
color: var(--bs-emphasis-color);
}
.record-cell-main span {
font-size: 10.5px;
color: var(--bs-tertiary-color);
}
.class-list {
display: inline-flex;
flex-direction: column;
}
.class-list em {
font-style: normal;
font-size: 10px;
color: var(--bs-tertiary-color);
}
.due-value {
display: inline-flex;
flex-direction: column;
}
.due-value em {
font-style: normal;
font-size: 10px;
color: var(--bs-tertiary-color);
}
.record-grid td.num b.pos {
color: var(--bs-success);
}
.record-grid td.num b.neg {
color: var(--bs-danger);
}
.record-row-actions {
display: flex;
gap: 5px;
opacity: 0.5;
transition: opacity var(--transition);
}
.record-row:hover .record-row-actions,
.record-row:focus-within .record-row-actions {
opacity: 1;
}
/* row expansion */
.detail-drawer-row > td {
padding: 0 !important;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.detail-drawer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 18px;
}
.detail-drawer-heading {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-tertiary-color);
margin: 0 0 9px;
}
.detail-drawer-heading.mt {
margin-top: 16px;
}
.detail-drawer-heading i {
font-size: 14px;
color: var(--bs-primary);
}
.detail-drawer-instalments {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.detail-drawer-instalments li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.detail-drawer-instalments li > span:first-child {
width: 24px;
height: 24px;
flex-shrink: 0;
border-radius: 7px;
display: grid;
place-items: center;
font-size: 10.5px;
font-weight: 800;
color: var(--bs-tertiary-color);
background: var(--bs-tertiary-bg);
}
.detail-drawer-instalments li.done > span:first-child {
background: var(--bs-success);
color: #fff;
}
.detail-drawer-instalments li.now > span:first-child {
background: var(--bs-primary);
color: #fff;
}
.detail-drawer-instalments li div {
flex: 1;
min-width: 0;
}
.detail-drawer-instalments li b {
display: block;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.detail-drawer-instalments li em {
font-style: normal;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.detail-drawer-rules {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.detail-drawer-rules li {
display: flex;
gap: 6px;
font-size: 11.5px;
line-height: 1.5;
color: var(--bs-body-color);
}
.detail-drawer-rules li i {
font-size: 14px;
color: var(--bs-tertiary-color);
flex-shrink: 0;
}
.detail-drawer-rules b {
color: var(--bs-emphasis-color);
}
.detail-drawer-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.detail-drawer-timeline {
display: flex;
flex-direction: column;
gap: 7px;
}
.detail-drawer-timeline .it {
padding: 8px 10px;
border-radius: var(--radius-xs);
border-left: 3px solid var(--accent);
background: var(--accent-soft);
}
.detail-drawer-timeline .it b {
display: block;
font-size: 12px;
color: var(--bs-emphasis-color);
}
.detail-drawer-timeline .it em {
font-style: normal;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.detail-drawer-payments {
display: flex;
flex-direction: column;
gap: 7px;
}
.detail-drawer-payments > div {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 9px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.detail-drawer-payments img {
width: 28px;
height: 28px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.detail-drawer-payments span {
flex: 1;
min-width: 0;
}
.detail-drawer-payments b {
display: block;
font-size: 12px;
color: var(--bs-emphasis-color);
}
.detail-drawer-payments em {
font-style: normal;
font-size: 10px;
color: var(--bs-secondary-color);
}
.detail-drawer-payments .v {
font-size: 12.5px;
font-weight: 800;
color: var(--bs-success);
flex-shrink: 0;
}
.detail-drawer-foot {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 12px;
}
.pager-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 12px 14px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.pager-pages {
display: flex;
align-items: center;
gap: 4px;
}
.pager-page {
min-width: 30px;
height: 30px;
padding: 0 8px;
border-radius: 8px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
font-size: 12px;
font-weight: 650;
color: var(--bs-secondary-color);
cursor: pointer;
transition: all var(--transition);
}
.pager-page:hover:not(:disabled) {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.pager-page.on {
background: var(--bs-primary);
border-color: transparent;
color: #fff;
}
.pager-page:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pager-gap {
color: var(--bs-tertiary-color);
padding: 0 4px;
}
/* ---------- FEEDS ---------- */
/* .side-panel is `display:contents` so its head + body (whichever of
.timeline-rows / .action-group / .notification-row it holds) place
directly into this grid as rows 1/2 of their column. A card that's just
`display:flex;flex-direction:column` inside a stretched grid item can't
reliably grow a `flex:1` child to fill the tall column (same issue fixed
on .command-bar-side above), so the "one card" look is built from two
grid-placed halves with matching radii/borders instead. */
.feed-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr;
gap: 16px;
}
.side-panel {
display: contents;
}
.side-panel-head {
grid-row: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 15px 15px 13px;
border: 1px solid var(--bs-border-color);
border-bottom: 0;
border-radius: var(--radius) var(--radius) 0 0;
background: var(--bs-body-bg);
}
.side-panel-head b {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.side-panel-head b i {
font-size: 16px;
color: var(--bs-primary);
}
.timeline-rows,
.action-group,
.notification-row {
grid-row: 2;
padding: 0 15px 15px;
border: 1px solid var(--bs-border-color);
border-top: 0;
border-radius: 0 0 var(--radius) var(--radius);
background: var(--bs-body-bg);
}
.timeline-rows {
display: flex;
flex-direction: column;
}
.timeline-row-item {
display: grid;
grid-template-columns: 42px 14px 1fr;
align-items: start;
gap: 6px;
padding-bottom: 15px;
position: relative;
}
.timeline-row-item:last-child {
padding-bottom: 0;
}
.timeline-row-item .tm {
font-size: 10.5px;
font-weight: 650;
color: var(--bs-secondary-color);
padding-top: 1px;
text-align: right;
}
.timeline-row-item .pt {
position: relative;
width: 14px;
}
.timeline-row-item .pt::before {
content: "";
position: absolute;
left: 3px;
top: 4px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--accent);
z-index: 1;
}
.timeline-row-item:not(:last-child) .pt::after {
content: "";
position: absolute;
left: 6.5px;
top: 15px;
bottom: -15px;
width: 2px;
background: var(--bs-border-color);
}
.timeline-row-item .bd b {
display: block;
font-size: 12px;
font-weight: 650;
color: var(--bs-emphasis-color);
line-height: 1.35;
}
.timeline-row-item .bd p {
margin: 2px 0 0;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.action-group {
display: flex;
flex-direction: column;
gap: 9px;
}
.action-link {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
transition: all var(--transition);
}
.action-link:hover {
border-color: var(--bs-primary);
}
.action-link img {
width: 30px;
height: 30px;
border-radius: 9px;
object-fit: cover;
flex-shrink: 0;
}
.action-link .bd {
flex: 1;
min-width: 0;
font-size: 11.5px;
line-height: 1.45;
color: var(--bs-body-color);
}
.action-link .bd b {
color: var(--bs-emphasis-color);
font-weight: 650;
}
.action-link .bd em {
display: block;
font-style: normal;
font-size: 10px;
color: var(--bs-tertiary-color);
margin-top: 2px;
}
.notification-row {
display: flex;
flex-direction: column;
gap: 13px;
}
.notification-group .lbl {
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-tertiary-color);
margin-bottom: 7px;
}
.note-tag {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--accent);
background: var(--bs-body-bg);
margin-bottom: 7px;
transition: transform var(--transition);
}
.note-tag:last-child {
margin-bottom: 0;
}
.note-tag:hover {
transform: translateX(2px);
}
.note-tag .ic {
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 8px;
display: grid;
place-items: center;
font-size: 15px;
color: var(--accent);
background: var(--accent-soft);
}
.note-tag .bd {
flex: 1;
min-width: 0;
}
.note-tag .bd b {
display: block;
font-size: 11.5px;
font-weight: 650;
color: var(--bs-emphasis-color);
}
.note-tag .bd p {
margin: 1px 0 0;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
/* ---------- STICKY BULK TOOLBAR ---------- */
.bulk-bar {
position: sticky;
bottom: 16px;
z-index: 20;
margin-top: 16px;
display: flex;
justify-content: center;
pointer-events: none;
}
.bulk-bar-inner {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 14px;
border-radius: 999px;
background: var(--bs-emphasis-color);
color: #fff;
box-shadow: 0 18px 40px -12px rgba(16, 24, 40, 0.55);
pointer-events: auto;
animation: fcc-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fcc-rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
.bulk-bar-count {
font-size: 12px;
font-weight: 600;
opacity: 0.85;
white-space: nowrap;
}
.bulk-bar-count b {
font-size: 14px;
font-weight: 800;
opacity: 1;
}
.bulk-bar-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.bulk-bar .toolbar-button {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.16);
color: #fff;
}
.bulk-bar .toolbar-button:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
}
.bulk-bar .toolbar-button.danger {
color: #ffb4c4;
border-color: rgba(255, 180, 196, 0.35);
}
.bulk-bar .toolbar-button.danger:hover {
background: var(--bs-danger);
color: #fff;
}
.bulk-bar-close {
width: 28px;
height: 28px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
display: grid;
place-items: center;
font-size: 15px;
}
.bulk-bar-close:hover {
background: rgba(255, 255, 255, 0.24);
}
/* ---------- MODAL BITS ---------- */
.mini-stat {
padding: 10px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--accent);
background: var(--bs-body-bg);
text-align: center;
}
.mini-stat b {
display: block;
font-size: 17px;
font-weight: 800;
color: var(--bs-emphasis-color);
}
.mini-stat span {
font-size: 10px;
color: var(--bs-secondary-color);
}
.picker-field {
display: flex;
flex-direction: column;
gap: 7px;
}
.picker-field label {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 11px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
cursor: pointer;
}
.picker-field label:hover {
border-color: var(--bs-primary);
}
.picker-field span {
flex: 1;
min-width: 0;
}
.picker-field b {
display: block;
font-size: 12px;
color: var(--bs-emphasis-color);
}
.picker-field em {
font-style: normal;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.picker-field .v {
font-size: 13px;
font-weight: 800;
color: var(--bs-emphasis-color);
}
.approval-list {
display: flex;
flex-direction: column;
gap: 9px;
}
.approval-row {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 11px;
border-radius: var(--radius-xs);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.approval-row img {
width: 34px;
height: 34px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.approval-row .bd {
flex: 1;
min-width: 0;
}
.approval-row .bd b {
display: block;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.approval-row .bd em {
font-style: normal;
font-size: 11px;
color: var(--bs-secondary-color);
}
.approval-row .ac {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.inline-dropdown {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 26px 16px;
border-radius: var(--radius-sm);
border: 2px dashed var(--bs-border-color);
background: var(--bs-tertiary-bg);
text-align: center;
transition: all var(--transition);
}
.inline-dropdown:hover {
border-color: var(--bs-primary);
background: var(--tint-primary);
}
.inline-dropdown i {
font-size: 30px;
color: var(--bs-primary);
}
.inline-dropdown b {
font-size: 13px;
color: var(--bs-emphasis-color);
}
.inline-dropdown span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.inline-dropdown input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.toast-stack {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1090;
display: flex;
flex-direction: column;
gap: 8px;
}
/* ---------- SKELETON ---------- */
.fee-collection.loading .live-flag {
display: none;
}
.fee-collection:not(.loading) .skeleton-loader {
display: none;
}
/* this page sweeps the fill itself, so the shared wipe layer stands down */
.fee-collection .skeleton {
border-radius: var(--radius);
background: linear-gradient(90deg, var(--bs-tertiary-bg) 25%, var(--bs-border-color) 37%, var(--bs-tertiary-bg) 63%);
background-size: 400% 100%;
animation: fcc-shimmer 1.4s ease infinite;
}
.fee-collection .skeleton::after {
content: none;
}
.fee-collection .skeleton-hero {
height: 260px;
margin-bottom: 16px;
}
.fee-collection .skeleton-filters {
height: 120px;
margin-bottom: 24px;
}
.fee-collection .skeleton-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.fee-collection .skeleton-card {
height: 230px;
}
.fee-collection .skeleton-grid {
height: 320px;
margin-bottom: 24px;
}
.fee-collection .skeleton-split {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.fee-collection .skeleton-tline {
height: 220px;
}
@keyframes fcc-shimmer {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
/* ---------- A11Y ---------- */
.fee-collection :focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
border-radius: 8px;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1399px) {
.command-bar {
grid-template-columns: 1fr;
grid-template-rows: none;
}
.command-bar-main,
.upload-block,
.quick-actions {
grid-column: auto;
grid-row: auto;
}
.quick-action-grid {
margin: 0;
}
.analytics-grid {
grid-template-columns: 1fr;
grid-template-areas: "chart" "figures" "inst";
}
.figure-grid {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
height: auto;
}
.insight-list {
grid-template-columns: repeat(2, 1fr);
}
.feed-list {
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 0;
}
.side-panel-head,
.timeline-rows,
.action-group,
.notification-row {
grid-row: auto;
}
.timeline-rows,
.action-group,
.notification-row {
margin-bottom: 16px;
}
}
@media (max-width: 991px) {
.card-grid {
grid-template-columns: 1fr;
}
.detail-drawer {
grid-template-columns: 1fr;
gap: 16px;
}
.step-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.insight-list {
grid-template-columns: 1fr;
}
.figure-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
}
.quick-action-grid {
grid-template-columns: repeat(2, 1fr);
}
.skeleton-cards,
.skeleton-split {
grid-template-columns: 1fr;
}
.bulk-bar-inner {
border-radius: var(--radius);
width: 100%;
}
/* fee rows become cards */
.record-grid-scroll {
max-height: none;
overflow: visible;
}
.record-grid {
min-width: 0;
}
.record-grid thead {
display: none;
}
.record-grid,
.record-grid tbody,
.record-grid tr,
.record-grid td {
display: block;
width: auto;
}
.record-row {
position: relative;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
margin: 12px;
padding: 6px 0 46px;
}
.record-grid tbody td {
border-bottom: 0;
padding: 6px 14px;
text-align: left !important;
}
.record-grid td.pin,
.record-grid td.pin-end {
position: static;
box-shadow: none;
}
.record-grid td.col-check {
position: absolute !important;
top: 12px;
right: 12px;
padding: 0;
width: auto;
}
.record-grid td.col-name {
padding-top: 12px;
}
.record-grid tbody td:not(.col-name):not(.col-check):not(.col-act)::before {
content: attr(data-lbl);
display: block;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-tertiary-color);
margin-bottom: 1px;
}
.record-grid td.col-act {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 8px 14px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.record-row-actions {
opacity: 1;
justify-content: flex-end;
}
.detail-drawer-row > td {
margin: 0 12px 12px;
}
}
@media (max-width: 575px) {
.figure-grid {
grid-template-columns: 1fr;
grid-template-rows: repeat(6, 1fr);
}
.command-bar-title {
font-size: 20px;
}
}
/* ============================================================
PARENT PORTAL dashboard — migrated from app-new.css
============================================================ */
/* ===== parent-portal.css ===== */
/* ============================================================
PARENT PORTAL — 2026 SaaS executive experience (.parent-portal)
Inspired by Linear / Stripe / Notion / Vercel.
Scoped & self-contained. Does not touch sidebar/header/global card.
============================================================ */
.parent-portal {
color: var(--bs-body-color);
font-feature-settings: "tnum" 1, "ss01" 1;
}
/* ...but a section that merely opens a row's column is NOT the top of the page —
without this it collapses to 4px and the row collides with the block above
(e.g. Assignment Board → Fee Timeline). Restore the normal rhythm. */
.parent-portal .row > [class*=col-] > .portal-section:first-child {
margin-top: 26px;
}
.parent-live-flag {
gap: 5px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--bs-danger);
}
.parent-live-flag::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--bs-danger);
box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.5);
animation: px-pulse 1.4s infinite;
}
@keyframes px-pulse {
0% {
box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.5);
}
100% {
box-shadow: 0 0 0 6px rgba(225, 29, 72, 0);
}
}
/* ---------- COMMAND HERO ---------- */
.portal-command-bar {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 16px;
}
.portal-command-bar-left {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: radial-gradient(120% 140% at 100% 0, rgba(61, 94, 225, 0.06), transparent 46%), linear-gradient(180deg, var(--bs-body-bg), var(--bs-secondary-bg));
padding: 20px;
}
.parent-identity {
gap: 14px;
}
.parent-identity-avatar {
position: relative;
width: 58px;
height: 58px;
}
.parent-identity-avatar img {
width: 100%;
height: 100%;
border-radius: 16px;
object-fit: cover;
}
.parent-identity-verified {
position: absolute;
right: -4px;
bottom: -4px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--bs-primary);
color: #fff;
display: grid;
place-items: center;
font-size: 11px;
border: 2px solid var(--bs-body-bg);
}
.parent-identity-head {
font-size: 11px;
color: var(--bs-secondary-color);
}
.parent-identity-name {
font-size: 20px;
font-weight: 750;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
line-height: 1.1;
}
.parent-identity-meta {
gap: 6px;
margin-top: 5px;
}
/* active-child context strip (bridges the header switcher to the hero) */
.child-context {
gap: 14px;
margin-top: 16px;
padding: 12px 14px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-tertiary-bg);
}
.child-context-name {
gap: 10px;
min-width: 0;
}
.child-context-avatar {
position: relative;
}
.child-context-avatar img {
width: 38px;
height: 38px;
border-radius: 11px;
object-fit: cover;
box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 3px var(--bs-primary);
}
.child-context-status-dot {
position: absolute;
right: -2px;
bottom: -2px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--bs-success);
border: 2px solid var(--bs-tertiary-bg);
}
.child-context-id {
min-width: 0;
}
.child-context-title {
font-size: 12px;
color: var(--bs-secondary-color);
line-height: 1.25;
}
.child-context-title b {
font-size: 14px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.child-context-subtitle {
font-size: 11px;
color: var(--bs-tertiary-color);
}
.child-context-facts {
gap: 8px;
}
.child-context-fact {
display: inline-flex;
gap: 8px;
padding: 6px 11px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-xs);
background: var(--bs-body-bg);
}
.child-context-fact > i {
font-size: 16px;
color: var(--bs-primary);
}
.child-context-fact > span {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.child-context-fact-value {
font-size: 12px;
font-weight: 650;
color: var(--bs-emphasis-color);
white-space: nowrap;
}
.child-context-fact-label {
font-size: 10px;
color: var(--bs-tertiary-color);
}
@media (max-width: 991.98px) {
.child-context-facts {
width: 100%;
}
.child-context-fact {
flex: 1;
}
}
/* child switcher cards */
.switch-control {
flex: 1;
min-width: 150px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
cursor: pointer;
transition: all var(--transition);
text-align: left;
}
.switch-control:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.switch-control img {
width: 40px;
height: 40px;
border-radius: 11px;
object-fit: cover;
}
.switch-control-name {
font-size: 13px;
font-weight: 650;
color: var(--bs-emphasis-color);
line-height: 1.15;
padding-right: 4px;
}
.switch-control-class {
font-size: 11px;
color: var(--bs-secondary-color);
}
.switch-control.active {
border-color: transparent;
background: linear-gradient(135deg, var(--bs-emphasis-color), #2b2f3a);
color: #fff;
}
.switch-control.active .switch-control-name {
color: #fff;
}
.switch-control.active .switch-control-class {
color: rgba(255, 255, 255, 0.65);
}
.switch-control.active img {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
/* --- Compact child switcher in the page-header / breadcrumb bar --- */
.child-switcher {
display: flex;
align-items: center;
gap: 10px;
}
@media (max-width: 575.98px) {
.child-switcher {
flex-wrap: wrap;
}
}
.child-switcher-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
white-space: nowrap;
}
.child-switcher-label i {
font-size: 15px;
color: var(--bs-tertiary-color);
}
.child-switcher-option {
display: flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid var(--bs-border-color);
border-radius: 999px;
background: var(--bs-tertiary-bg);
}
.switch-control-sm {
flex: 0 0 auto;
min-width: 0;
gap: 8px;
padding: 4px 12px 4px 4px;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
}
.switch-control-sm:hover {
transform: none;
box-shadow: none;
background: var(--bs-body-bg);
}
.switch-control-sm img {
width: 30px;
height: 30px;
border-radius: 999px;
}
.switch-control-sm .switch-control-name {
font-size: 12.5px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 95%;
}
.switch-control-sm .switch-control-class {
font-size: 10.5px;
}
.switch-control-check {
margin-left: -24px;
font-size: 15px;
color: var(--bs-tertiary-color);
opacity: 0;
transition: opacity var(--transition);
}
.switch-control-sm.active {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
box-shadow: var(--shadow);
}
.switch-control-sm.active .switch-control-name {
color: var(--bs-emphasis-color);
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 95%;
}
.switch-control-sm.active .switch-control-class {
color: var(--bs-secondary-color);
}
.switch-control-sm.active img {
box-shadow: 0 0 0 2px var(--bs-primary);
}
.switch-control-sm.active .switch-control-check {
opacity: 1;
color: var(--bs-primary);
}
@media (max-width: 575.98px) {
.child-switcher {
width: 100%;
}
.child-switcher-option {
width: 100%;
gap: 12px !important;
}
.switch-control-sm {
flex: 1;
justify-content: center;
}
.switch-control-sm .switch-control-class {
display: none;
}
}
/* right: today at a glance + AI summary */
.glance-strip {
display: flex;
flex-direction: column;
gap: 12px;
}
.portal-status {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.parent-portal-stat {
padding: 12px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition);
}
.parent-portal-stat:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.parent-portal-stat-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-tertiary-color);
font-weight: 650;
}
.parent-portal-stat-value {
font-size: 16px;
font-weight: 750;
color: var(--bs-emphasis-color);
letter-spacing: -0.02em;
margin-top: 1px;
}
.parent-portal-stat-value small {
font-size: 11px;
font-weight: 600;
color: var(--bs-secondary-color);
}
.parent-insight-panel {
padding: 15px 16px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(61, 94, 225, 0.03)), var(--bs-body-bg);
}
.insight-panel-top {
gap: 8px;
margin-bottom: 8px;
}
.insight-panel-top b {
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.parent-insight-panel p {
margin: 0;
font-size: 12.5px;
line-height: 1.65;
color: var(--bs-body-color);
}
.parent-insight-panel p mark {
background: none;
color: var(--bs-emphasis-color);
font-weight: 650;
padding: 0;
}
/* hero quick actions bar */
.quick-bar {
gap: 8px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--bs-border-color);
}
/* ---------- MY CHILDREN (horizontal premium cards) ---------- */
.child-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (max-width: 1199.98px) {
.child-cards {
grid-template-columns: repeat(1, 1fr);
}
}
@media (max-width: 991.98px) {
.child-cards {
grid-template-columns: repeat(2, 1fr);
}
}
.child-card {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition);
}
.child-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
}
.child-card-top {
gap: 14px;
padding: 16px;
border-bottom: 1px solid var(--bs-border-color);
background: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg));
}
@media (max-width: 991.98px) {
.child-card-top {
flex-wrap: wrap;
}
}
.progress-ring-mini {
--v: 0;
width: 62px;
height: 62px;
border-radius: 50%;
padding: 3px;
background: conic-gradient(var(--accent) calc(var(--v) * 1%), var(--bs-tertiary-bg) 0);
position: relative;
}
.progress-ring-mini img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--bs-body-bg);
}
.progress-ring-value {
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
font-size: 9.5px;
font-weight: 800;
color: var(--accent);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
padding: 1px 6px;
border-radius: 999px;
}
.child-card-id b {
font-size: 15px;
font-weight: 700;
color: var(--bs-emphasis-color);
display: block;
letter-spacing: -0.01em;
}
.child-card-id span {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.child-card-tags {
display: flex;
gap: 5px;
margin-top: 6px;
flex-wrap: wrap;
}
.child-card-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--bs-border-color);
}
.child-card-metric {
background: var(--bs-body-bg);
padding: 11px 10px;
}
.child-card-metric-label {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-tertiary-color);
font-weight: 650;
}
.child-card-metric-value {
font-size: 15px;
font-weight: 750;
color: var(--bs-emphasis-color);
letter-spacing: -0.02em;
margin-top: 2px;
}
.child-card-metric-value small {
font-size: 10px;
color: var(--bs-secondary-color);
}
.child-card-foot {
gap: 8px;
padding: 12px 16px;
}
/* ---------- ACADEMIC HEALTH (expandable subject cards) ---------- */
.parent-subject-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.subject-block {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
cursor: pointer;
transition: box-shadow var(--transition), transform var(--transition);
}
.subject-block:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
border-color: var(--accent);
}
.subject-head {
padding: 13px;
}
.subject-head > .avatar {
margin-bottom: 10px;
}
.subject-name {
font-size: 13px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.subject-row {
margin-top: 6px;
}
.grade-mark {
font-size: 20px;
font-weight: 800;
color: var(--accent);
letter-spacing: -0.03em;
}
.sparkline-chart {
width: 54px;
height: 22px;
}
.sparkline-line {
fill: none;
stroke: var(--accent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.trend-figure {
font-size: 10.5px;
font-weight: 700;
color: var(--accent);
gap: 2px;
}
.subject-more {
max-height: 0;
transition: max-height 0.3s ease;
border-top: 1px solid transparent;
}
.subject-block.expanded .subject-more {
max-height: 320px;
border-top-color: var(--bs-border-color);
}
.subject-more-inner {
padding: 12px 13px;
gap: 9px;
}
.subject-metric {
display: flex;
align-items: center;
font-size: 11.5px;
}
.subject-metric-label {
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
gap: 5px;
}
.subject-metric-label i {
font-size: 13px;
}
.subject-metric-value {
font-weight: 650;
color: var(--bs-emphasis-color);
}
.feedback-note {
font-size: 11.5px;
line-height: 1.5;
color: var(--bs-body-color);
background: var(--bs-tertiary-bg);
border-radius: 8px;
padding: 8px 10px;
}
.feedback-note b {
color: var(--bs-emphasis-color);
}
/* the AI note takes the card's accent instead of the neutral surface */
.feedback-note-accent {
color: var(--accent);
background: var(--accent-soft);
}
.feedback-note-accent b {
color: var(--accent);
}
.subject-toggle {
gap: 4px;
font-size: 10.5px;
font-weight: 650;
color: var(--bs-tertiary-color);
padding: 8px;
border-top: 1px solid var(--bs-border-color);
}
.subject-toggle i {
transition: transform var(--transition);
}
.subject-block.expanded .subject-toggle i {
transform: rotate(180deg);
}
/* ---------- INSIGHT CARDS ---------- */
.parent-insight-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.parent-insight-row {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
padding: 14px;
transition: transform var(--transition), box-shadow var(--transition);
}
.parent-insight-row:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.insight-row-top {
gap: 9px;
margin-bottom: 10px;
}
.insight-row-top b {
font-size: 12.5px;
color: var(--bs-emphasis-color);
flex: 1;
}
.confidence-gauge {
gap: 8px;
margin-bottom: 8px;
}
.confidence-gauge-bar {
flex: 1;
height: 5px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
}
.confidence-gauge-bar > span {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: var(--accent);
transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.confidence-gauge b {
font-size: 11.5px;
color: var(--bs-emphasis-color);
font-variant-numeric: tabular-nums;
}
.parent-insight-row p {
margin: 0 0 8px;
font-size: 11.5px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
.parent-insight-row p b {
color: var(--bs-emphasis-color);
}
/* .insight-row-foot — now entirely Bootstrap utilities in the markup */
/* ---------- COMMUNICATION HUB (mail/slack) ---------- */
/* .mail-list — now entirely Bootstrap utilities in the markup */
.mail-row {
gap: 12px;
padding: 11px 4px;
border-bottom: 1px solid var(--bs-border-color);
cursor: pointer;
transition: background var(--transition);
border-radius: 8px;
}
.mail-row:hover {
background: var(--bs-tertiary-bg);
}
.mail-row:last-child {
border-bottom: 0;
}
.mail-avatar {
width: 38px;
height: 38px;
}
.mail-avatar img {
width: 100%;
height: 100%;
border-radius: 11px;
object-fit: cover;
}
.mail-row-main {
flex: 1;
min-width: 0;
}
.mail-row-top {
gap: 7px;
}
.mail-row-top b {
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.mail-preview {
font-size: 11.5px;
color: var(--bs-secondary-color);
text-overflow: ellipsis;
}
.mail-attachment {
font-size: 13px;
color: var(--bs-tertiary-color);
}
/* .mail-row-end — now entirely Bootstrap utilities in the markup */
.mail-time {
font-size: 10.5px;
color: var(--bs-tertiary-color);
}
/* ---------- SCHOOL BUS ---------- */
.bus-route-map {
height: 66px;
margin: 4px 0 14px;
}
.bus-route-line {
left: 8px;
right: 8px;
top: 50%;
transform: translateY(-50%);
height: 3px;
border-radius: 3px;
background: var(--bs-tertiary-bg);
}
.bus-route-fill {
left: 0;
top: 0;
bottom: 0;
border-radius: 3px;
background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
}
.bus-route-stop {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--bs-border-color);
}
.bus-route-stop.completed {
background: var(--bs-primary);
border-color: var(--bs-primary);
}
.bus-route-stop em {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
color: var(--bs-tertiary-color);
font-style: normal;
white-space: nowrap;
}
.bus-route-icon {
top: 50%;
transform: translate(-50%, -50%);
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 15px;
color: #fff;
background: var(--bs-primary);
box-shadow: 0 4px 10px -2px rgba(61, 94, 225, 0.6);
z-index: 2;
animation: px-bus 5s ease-in-out infinite;
}
@keyframes px-bus {
0%, 100% {
left: 12%;
}
50% {
left: 62%;
}
}
.bus-route-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.bus-route-cell {
display: flex;
gap: 8px;
padding: 9px 10px;
border: 1px solid var(--bs-border-color);
border-radius: 10px;
}
.bus-route-cell b {
font-size: 12px;
color: var(--bs-emphasis-color);
display: block;
}
.bus-route-cell span {
font-size: 10px;
color: var(--bs-secondary-color);
}
/* ---------- HOMEWORK KANBAN ---------- */
.task-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.task-card {
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 10px;
padding: 11px;
margin-bottom: 8px;
cursor: grab;
transition: transform var(--transition), box-shadow var(--transition);
}
.task-card:last-child {
margin-bottom: 0;
}
.task-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.task-card b {
display: block;
font-size: 12.5px;
color: var(--bs-emphasis-color);
margin: 7px 0 3px;
}
.task-card-meta {
display: flex;
align-items: center;
margin-top: 8px;
}
.task-card-meta span {
font-size: 10.5px;
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
gap: 4px;
}
.task-card-meta span i {
font-size: 12px;
}
.task-card-grade {
font-size: 11px;
font-weight: 800;
color: var(--accent);
}
/* ---------- FINANCE payment timeline ---------- */
.payment-row {
padding-left: 8px;
}
.payment-line {
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--bs-border-color);
}
.payment-line:last-child {
border-bottom: 0;
}
/* the standalone line in the pay dialog is boxed rather than a list row */
.payment-line-boxed {
border: 1px solid var(--bs-border-color);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 14px;
}
.payment-line-info b {
font-size: 12.5px;
color: var(--bs-emphasis-color);
display: block;
}
.payment-line-info span {
font-size: 11px;
color: var(--bs-secondary-color);
}
.payment-line-amount {
text-align: right;
}
.payment-line-amount b {
font-size: 13.5px;
color: var(--bs-emphasis-color);
font-variant-numeric: tabular-nums;
}
.payment-line-amount .badge-tag {
margin-top: 3px;
}
.finance-head {
gap: 14px;
padding: 14px;
border-radius: var(--radius-sm);
background: linear-gradient(120deg, var(--tint-primary), transparent), var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
margin-bottom: 14px;
}
.finance-figure {
font-size: 26px;
font-weight: 800;
color: var(--bs-emphasis-color);
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.finance-segment {
height: 8px;
border-radius: 999px;
margin-top: 8px;
gap: 2px;
}
.finance-segment span {
height: 100%;
border-radius: 3px;
}
/* ---------- EXAM HUB ---------- */
.exam-hero {
gap: 16px;
padding: 16px;
border-radius: var(--radius-sm);
color: #fff;
background: linear-gradient(130deg, #1e2130, #2c3040);
position: relative;
margin-bottom: 14px;
}
@media (max-width: 575.98px) {
.exam-hero {
flex-wrap: wrap;
}
}
.exam-hero::after {
content: "";
position: absolute;
right: -40px;
top: -40px;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124, 58, 237, 0.4), transparent 70%);
}
.portal-count {
z-index: 1;
display: flex;
gap: 8px;
}
.portal-count div {
text-align: center;
min-width: 46px;
}
.portal-count b {
font-size: 24px;
font-weight: 800;
display: block;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.portal-count span {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.7;
}
.exam-hero-body {
position: relative;
z-index: 1;
}
.exam-hero-body b {
font-size: 14px;
}
.exam-hero-body p {
margin: 2px 0 0;
font-size: 11.5px;
opacity: 0.8;
}
.parent-readiness {
gap: 9px;
}
.readiness-row {
display: grid;
grid-template-columns: 88px 1fr auto;
gap: 10px;
}
.readiness-subject {
font-size: 12px;
color: var(--bs-emphasis-color);
font-weight: 600;
}
.progress-pips {
gap: 3px;
}
.progress-pip {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--bs-tertiary-bg);
}
.progress-pip-filled {
background: var(--accent);
}
.readiness-percent {
font-size: 11px;
font-weight: 700;
color: var(--bs-secondary-color);
text-align: right;
}
/* ---------- ACHIEVEMENTS gallery ---------- */
.achievement-badges {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
@media (max-width: 575.98px) {
.achievement-badges {
grid-template-columns: repeat(2, 1fr) !important;
}
}
.achievement-badge {
padding: 16px 8px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
transition: transform var(--transition), box-shadow var(--transition);
}
.achievement-badge:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
}
.achievement-badge b {
font-size: 11.5px;
color: var(--bs-emphasis-color);
display: block;
}
.achievement-badge span {
font-size: 10px;
color: var(--bs-secondary-color);
}
.achievement-reveal {
inset: 0;
background: var(--accent);
color: #fff;
gap: 4px;
padding: 10px;
opacity: 0;
transform: translateY(8px);
transition: all var(--transition);
}
.achievement-badge:hover .achievement-reveal {
opacity: 1;
transform: none;
}
.achievement-reveal b {
color: #fff;
font-size: 12px;
}
.achievement-reveal span {
color: rgba(255, 255, 255, 0.85);
font-size: 10.5px;
line-height: 1.4;
}
@media (max-width: 1400px) {
.achievement-badges {
grid-template-columns: repeat(3, 1fr);
}
}
/* ---------- CALENDAR agenda ---------- */
.agenda-group {
margin-bottom: 14px;
}
.agenda-group:last-child {
margin-bottom: 0;
}
.agenda-label {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-tertiary-color);
margin-bottom: 8px;
}
.agenda-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
border-radius: 10px;
transition: background var(--transition);
}
.agenda-item:hover {
background: var(--bs-tertiary-bg);
}
.agenda-item-time {
width: 52px;
flex-shrink: 0;
font-size: 11px;
font-weight: 650;
color: var(--bs-secondary-color);
}
.agenda-item-bar {
width: 3px;
align-self: stretch;
border-radius: 3px;
background: var(--accent);
}
.agenda-item-body b {
font-size: 12.5px;
color: var(--bs-emphasis-color);
display: block;
}
.agenda-item-body span {
font-size: 11px;
color: var(--bs-secondary-color);
}
/* ---------- NOTIFICATIONS ---------- */
.parent-notification-group {
margin-bottom: 12px;
}
.parent-notification-group:last-child {
margin-bottom: 0;
}
.notification-label {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-tertiary-color);
margin-bottom: 8px;
}
.parent-notification-row {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 10px;
border-radius: 10px;
transition: background var(--transition);
}
.parent-notification-row:hover {
background: var(--bs-tertiary-bg);
}
.notification-body {
flex: 1;
min-width: 0;
}
.notification-body b {
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.notification-body p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.notification-time {
font-size: 10px;
color: var(--bs-tertiary-color);
flex-shrink: 0;
}
/* ---------- TOASTS ---------- */
#pxToasts {
position: fixed;
top: 76px;
right: 20px;
z-index: 3000;
display: flex;
flex-direction: column;
gap: 10px;
}
#pxToasts .toast {
min-width: 250px;
}
/* ---------- SKELETON — shared primitive, page tone and geometry ---------- */
.parent-portal .skeleton-loader {
display: none;
}
.parent-portal.loading .skeleton-loader {
display: block;
}
.parent-portal.loading .live-flag-wrap {
display: none;
}
.parent-portal .skeleton {
background: var(--bs-tertiary-bg);
border-radius: 12px;
}
.parent-portal .skeleton::after {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
animation-duration: 1.5s;
}
.parent-portal .skeleton-cmd {
height: 210px;
margin-bottom: 24px;
}
.parent-portal .skeleton-kids {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.parent-portal .skeleton-kid {
height: 190px;
}
.parent-portal .skeleton-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.parent-portal .skeleton-cell {
height: 150px;
}
[data-bs-theme=dark] .parent-portal .skeleton::after,
[data-theme=dark] .parent-portal .skeleton::after {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
}
/* accessibility */
.parent-portal :focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 2px;
border-radius: 8px;
}
/* ---------- LAYOUT RHYTHM · equal-height columns, no ragged bottoms ----------
Bootstrap stretches the columns but not the boxes inside them, so a shorter
panel used to leave dead space under it. Make each column a flex column and
let its panel + inner list fill the remaining height. */
.parent-portal .row > [class*=col-] {
display: flex;
flex-direction: column;
}
.parent-portal .row > [class*=col-] > .card,
.parent-portal .row > [class*=col-] > .parent-insight-list,
.parent-portal .row > [class*=col-] > .task-board {
flex: 1 1 auto;
}
/* insight / kanban cards share a row height instead of ragged tops */
.parent-insight-list,
.task-board {
grid-auto-rows: 1fr;
}
/* lists inside a stretched panel distribute their rows evenly */
.card-flush > .card-body > .portal-timeline-track,
.card-flush > .card-body > .mail-list {
height: 100%;
}
.card-flush > .card-body > .portal-timeline-track {
display: flex;
flex-direction: column;
}
.card-flush > .card-body > .portal-timeline-track > .portal-timeline {
flex: 1 1 auto;
}
.card-flush > .card-body > .mail-list > .mail-row {
flex: 1 1 auto;
}
/* hero: keep the right glance column flush with the taller left panel */
.glance-strip > .parent-insight-panel {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.glance-strip > .parent-insight-panel > p {
margin-top: auto;
}
/* agenda + notification lists share a height so both panels end level */
.card-flush > .card-body > .agenda-group:last-child,
.card-flush > .card-body > .parent-notification-group:last-child {
margin-bottom: 0;
}
@media (max-width: 1199px) {
.portal-command-bar {
grid-template-columns: 1fr;
}
.parent-subject-list {
grid-template-columns: repeat(3, 1fr);
}
.parent-insight-list {
grid-template-columns: repeat(2, 1fr);
}
.task-board {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.child-cards {
grid-template-columns: 1fr;
}
.parent-subject-list {
grid-template-columns: repeat(2, 1fr);
}
.parent-insight-list {
grid-template-columns: 1fr;
}
.task-board {
grid-template-columns: 1fr;
}
.portal-status {
grid-template-columns: repeat(3, 1fr);
}
.achievement-badges {
grid-template-columns: repeat(3, 1fr);
}
.skeleton-kids {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.parent-subject-list {
grid-template-columns: 1fr 1fr;
}
.portal-status {
grid-template-columns: repeat(2, 1fr);
}
.child-card-metrics {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================
Membership Transactions — Billing & Transaction Management
Page-scoped styles for membership-transactions.html (.mt-* / .pay-badge).
Relocated here from _parent-portal.scss (migration artifact).
============================================================ */
:root {
--mt-line: #e9edf5;
--mt-soft: #f6f7fb;
--mt-ink: #1b2559;
--mt-mut: var(--bs-secondary-color);
}
[data-bs-theme=dark] {
--mt-line: rgba(255,255,255,.09);
--mt-soft: rgba(255,255,255,.04);
--mt-ink: #e6e9f5;
--mt-mut: #9aa3b8;
}
/* ---------- Financial insights strip (KPI mini widgets) ---------- */
.mt-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.mt-kpi {
position: relative;
background: var(--bs-card-bg, var(--bs-body-bg));
border: 1px solid var(--mt-line);
border-radius: 14px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.mt-kpi:hover {
transform: translateY(-3px);
box-shadow: 0 12px 26px rgba(30, 41, 89, 0.09);
border-color: transparent;
}
.mt-kpi-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.mt-kpi-lbl {
font-size: 12px;
font-weight: 600;
color: var(--mt-mut);
letter-spacing: 0.01em;
}
.mt-kpi-ic {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
font-size: 16px;
flex: none;
}
.mt-kpi-val {
font-size: 20px;
font-weight: 700;
line-height: 1.1;
color: var(--mt-ink);
margin: 0;
}
.mt-kpi-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 11.5px;
font-weight: 600;
}
.mt-trend {
display: inline-flex;
align-items: center;
gap: 3px;
}
.mt-trend.up {
color: #16b364;
}
.mt-trend.down {
color: #f04438;
}
.mt-trend.flat {
color: var(--mt-mut);
}
.mt-spark {
display: flex;
align-items: flex-end;
gap: 3px;
height: 26px;
}
.mt-spark i {
width: 5px;
border-radius: 3px;
background: currentColor;
opacity: 0.28;
display: block;
}
.mt-spark i.hi {
opacity: 0.9;
}
.mt-kpi-bar {
height: 6px;
border-radius: 6px;
background: var(--mt-soft);
overflow: hidden;
}
.mt-kpi-bar > span {
display: block;
height: 100%;
border-radius: 6px;
background: currentColor;
}
.mt-i-primary {
color: var(--bs-primary);
}
.mt-i-success {
color: #16b364;
}
.mt-i-amber {
color: #f79009;
}
.mt-i-rose {
color: #f04438;
}
.mt-i-purple {
color: #7a5af8;
}
.mt-i-cyan {
color: #06aed4;
}
.mt-i-slate {
color: #64748b;
}
.mt-kpi-ic.mt-i-primary {
background: rgba(61, 94, 225, 0.12);
}
.mt-kpi-ic.mt-i-success {
background: rgba(22, 179, 100, 0.12);
}
.mt-kpi-ic.mt-i-amber {
background: rgba(247, 144, 9, 0.12);
}
.mt-kpi-ic.mt-i-rose {
background: rgba(240, 68, 56, 0.12);
}
.mt-kpi-ic.mt-i-purple {
background: rgba(122, 90, 248, 0.12);
}
.mt-kpi-ic.mt-i-cyan {
background: rgba(6, 174, 212, 0.12);
}
.mt-kpi-ic.mt-i-slate {
background: rgba(100, 116, 139, 0.12);
}
.mt-spark-h {
height: 6px;
} /* keep sparkline heights via classes below */
/* sparkline bar heights (avoids inline styles) */
.sh-30 {
height: 30%;
}
.sh-40 {
height: 40%;
}
.sh-45 {
height: 45%;
}
.sh-50 {
height: 50%;
}
.sh-55 {
height: 55%;
}
.sh-58 {
height: 58%;
}
.sh-60 {
height: 60%;
}
.sh-62 {
height: 62%;
}
.sh-65 {
height: 65%;
}
.sh-68 {
height: 68%;
}
.sh-70 {
height: 70%;
}
.sh-72 {
height: 72%;
}
.sh-75 {
height: 75%;
}
.sh-78 {
height: 78%;
}
.sh-80 {
height: 80%;
}
.sh-85 {
height: 85%;
}
.sh-90 {
height: 90%;
}
.sh-100 {
height: 100%;
}
/* ---------- Subscriber cell ---------- */
.mt-sub {
display: flex;
align-items: center;
gap: 10px;
}
.mt-sub-av {
width: 38px;
height: 38px;
border-radius: 10px;
object-fit: cover;
flex: none;
border: 1px solid var(--mt-line);
}
.mt-sub-name {
font-weight: 600;
color: var(--mt-ink);
display: block;
}
.mt-sub-name:hover {
color: var(--bs-primary);
}
.mt-sub-meta {
font-size: 11.5px;
color: var(--mt-mut);
display: block;
line-height: 1.5;
}
/* ---------- Payment method badges ---------- */
.pay-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
background: var(--mt-soft);
color: var(--mt-ink);
border: 1px solid var(--mt-line);
white-space: nowrap;
}
.pay-badge i {
font-size: 14px;
}
.pay-badge.pm-card {
color: var(--bs-primary);
}
.pay-badge.pm-debit {
color: #06aed4;
}
.pay-badge.pm-bank {
color: #64748b;
}
.pay-badge.pm-upi {
color: #7a5af8;
}
.pay-badge.pm-paypal {
color: #1546a0;
}
.pay-badge.pm-stripe {
color: #635bff;
}
.pay-badge.pm-razorpay {
color: #0c6dfd;
}
.pay-badge.pm-cash {
color: #16b364;
}
.pay-badge.pm-wallet {
color: #f79009;
}
.mt-amt {
font-weight: 700;
color: var(--mt-ink);
}
.mt-tax, .mt-disc {
color: var(--mt-mut);
font-size: 12.5px;
}
.mt-disc.has {
color: #16b364;
font-weight: 600;
}
/* ---------- Slide-over (offcanvas) transaction details ---------- */
.mt-drawer {
width: 460px;
max-width: 92vw;
}
.mt-dh {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px;
border-bottom: 1px solid var(--mt-line);
}
.mt-dh-ic {
width: 44px;
height: 44px;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 22px;
background: rgba(61, 94, 225, 0.12);
color: var(--bs-primary);
flex: none;
}
.mt-dh h5 {
margin: 0;
font-size: 16px;
}
.mt-dh .mt-dh-sub {
font-size: 12.5px;
color: var(--mt-mut);
}
.mt-sec {
padding: 16px 20px;
border-bottom: 1px solid var(--mt-line);
}
.mt-sec-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 700;
color: var(--mt-mut);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.mt-dl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
}
.mt-dl .k {
font-size: 11.5px;
color: var(--mt-mut);
display: block;
}
.mt-dl .v {
font-size: 13px;
font-weight: 600;
color: var(--mt-ink);
}
.mt-dl .span-2 {
grid-column: 1/-1;
}
.mt-invoice {
background: var(--mt-soft);
border: 1px solid var(--mt-line);
border-radius: 12px;
padding: 14px 16px;
}
.mt-invoice .r {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 13px;
}
.mt-invoice .r.total {
border-top: 1px dashed var(--mt-line);
margin-top: 6px;
padding-top: 10px;
font-weight: 700;
font-size: 15px;
}
/* ---------- Vertical timeline ---------- */
.mt-tl {
position: relative;
padding-left: 26px;
}
.mt-tl::before {
content: "";
position: absolute;
left: 9px;
top: 4px;
bottom: 4px;
width: 2px;
background: var(--mt-line);
}
.mt-tl-item {
position: relative;
padding-bottom: 16px;
}
.mt-tl-item:last-child {
padding-bottom: 0;
}
.mt-tl-dot {
position: absolute;
left: -26px;
top: 1px;
width: 20px;
height: 20px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 11px;
color: var(--bs-body-bg);
background: #16b364;
box-shadow: 0 0 0 3px rgba(22, 179, 100, 0.15);
}
.mt-tl-dot.pending {
background: var(--mt-mut);
box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.15);
}
.mt-tl-t {
font-weight: 600;
font-size: 13px;
color: var(--mt-ink);
}
.mt-tl-m {
font-size: 11.5px;
color: var(--mt-mut);
}
/* ---------- Right sidebar / analytics lists ---------- */
.mt-side-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--mt-line);
}
.mt-side-item:last-child {
border-bottom: 0;
}
.mt-side-ic {
width: 34px;
height: 34px;
border-radius: 9px;
flex: none;
display: grid;
place-items: center;
font-size: 16px;
background: var(--mt-soft);
}
.mt-side-body {
flex: 1 1 auto;
min-width: 0;
}
.mt-side-t {
font-weight: 600;
font-size: 13px;
color: var(--mt-ink);
display: block;
}
.mt-side-t:hover {
color: var(--bs-primary);
}
.mt-side-s {
font-size: 11.5px;
color: var(--mt-mut);
}
.mt-side-amt {
font-weight: 700;
font-size: 13px;
color: var(--mt-ink);
white-space: nowrap;
}
/* ---------- Analytics rows (revenue by plan / method distribution) ---------- */
.mt-ana-row {
margin-bottom: 14px;
}
.mt-ana-row:last-child {
margin-bottom: 0;
}
.mt-ana-top {
display: flex;
justify-content: space-between;
font-size: 12.5px;
margin-bottom: 5px;
}
.mt-ana-top .l {
font-weight: 600;
color: var(--mt-ink);
}
.mt-ana-top .r {
color: var(--mt-mut);
font-weight: 600;
}
.mt-ana-bar {
height: 8px;
border-radius: 6px;
background: var(--mt-soft);
overflow: hidden;
}
.mt-ana-bar > span {
display: block;
height: 100%;
border-radius: 6px;
}
.mt-w-40 {
width: 40%;
}
.mt-w-55 {
width: 55%;
}
.mt-w-62 {
width: 62%;
}
.mt-w-70 {
width: 70%;
}
.mt-w-78 {
width: 78%;
}
.mt-w-85 {
width: 85%;
}
.mt-w-92 {
width: 92%;
}
.mt-bg-primary {
background: var(--bs-primary);
}
.mt-bg-success {
background: #16b364;
}
.mt-bg-amber {
background: #f79009;
}
.mt-bg-purple {
background: #7a5af8;
}
.mt-bg-rose {
background: #f04438;
}
.mt-bg-cyan {
background: #06aed4;
}
@media (max-width: 1199px) {
.mt-kpis {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575px) {
.mt-kpis {
grid-template-columns: 1fr;
}
}
/* Shared bulk-action bar (.bulk-selection) borrows --cls-* vars defined on the
classes workspace; provide them on the transactions workspace so its
floating pill keeps the dark background and readable text. */
.data-workspace.mt {
--cls-border: var(--bs-border-color, #e9edf4);
--cls-heading: var(--bs-heading-color, #202c4b);
--cls-inset: var(--bs-tertiary-bg, #f5f6f9);
--cls-primary: var(--bs-primary, var(--bs-primary));
}
/* ============================================================
Academic Calendar — Premium Academic Planning Workspace
Adds the month/mini calendar grids, soft event pills, agenda
items and empty state on top of Bootstrap + the shared card
and sw-* toolbar chrome (reused from components/workspace).
Reuses the existing bg-*-transparent colour system for every
event colour — never touches the palette, sidebar, header or
page shell. Dark mode rides on Bootstrap CSS variables.
============================================================ */
.calendar-page {
--calendar-cell: 118px;
}
@media (prefers-reduced-motion: reduce) {
.calendar-page * {
transition: none !important;
animation: none !important;
}
}
/* Advanced filter dropdown in the toolbar */
.calendar-filter-menu {
min-width: 340px;
max-width: 92vw;
}
/* View switch (Month/Week/Day/Agenda pills) — wrap instead of
overflowing the toolbar row on narrow viewports */
@media (max-width: 575.98px) {
.page-toolbar .nav.flex-nowrap {
flex-wrap: wrap;
}
}
/* Panel column: keep sidebar cards tidy */
.calendar-rail .card {
border-radius: var(--radius-sm);
}
/* ============================================================
MONTH GRID
============================================================ */
.calendar-board {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--bs-border-color);
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 1px;
}
.calendar-dow {
background: var(--bs-tertiary-bg, #f7f8fc);
text-align: center;
padding: 0.6rem 0.25rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.calendar-cell {
background: var(--bs-card-bg, #fff);
min-height: var(--calendar-cell);
padding: 8px 8px 6px;
display: flex;
flex-direction: column;
gap: 4px;
transition: background var(--transition);
position: relative;
}
.calendar-cell:hover {
background: var(--bs-tertiary-bg, #f8f9fc);
}
.calendar-cell.is-out {
background: var(--bs-tertiary-bg, #f4f6fa);
}
.calendar-cell.is-out .calendar-num {
color: var(--bs-secondary-color);
opacity: 0.6;
}
.calendar-num {
align-self: flex-end;
font-size: 0.82rem;
font-weight: 600;
color: var(--bs-heading-color, #1f2937);
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
line-height: 1;
}
.calendar-cell.is-today {
background: rgba(var(--bs-primary-rgb), 0.06);
}
.calendar-cell.is-today .calendar-num {
background: var(--bs-primary);
color: #fff;
}
/* ---- Event pill (colour comes from reused bg-*-transparent utility) ---- */
.calendar-entry {
display: flex;
align-items: center;
gap: 6px;
border-radius: 7px;
padding: 3px 8px;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.calendar-entry i {
flex-shrink: 0;
font-size: 0.82rem;
}
.calendar-entry span {
overflow: hidden;
text-overflow: ellipsis;
}
.calendar-entry:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px -3px rgba(19, 16, 34, 0.18);
filter: brightness(0.98);
}
/* solid (multi-day / all-day) variant keeps white text supplied by bg-* utility */
.calendar-entry.is-solid {
box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.12);
}
.calendar-entry.is-span-start {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.calendar-entry.is-span-mid {
border-radius: 0;
}
.calendar-entry.is-span-end {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* ============================================================
MINI CALENDAR
============================================================ */
.calendar-mini {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
text-align: center;
}
.calendar-mini-dow {
font-size: 0.64rem;
font-weight: 700;
color: var(--bs-secondary-color);
padding-bottom: 4px;
}
.calendar-mini-day {
font-size: 0.76rem;
aspect-ratio: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--bs-heading-color, #1f2937);
cursor: pointer;
transition: background var(--transition), color var(--transition);
position: relative;
}
.calendar-mini-day:hover {
background: var(--bs-tertiary-bg, #eef1f8);
}
.calendar-mini-day.is-out {
color: var(--bs-secondary-color);
opacity: 0.55;
}
.calendar-mini-day.is-today {
background: var(--bs-primary);
color: #fff;
font-weight: 700;
}
.calendar-mini-day.has-dot::after {
content: "";
position: absolute;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
opacity: 0.7;
}
/* ============================================================
CATEGORY LIST
============================================================ */
.calendar-category {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 8px;
border-radius: 9px;
transition: background var(--transition);
}
.calendar-category:hover {
background: var(--bs-tertiary-bg, #f6f8fc);
}
.calendar-category .form-check-input {
margin-top: 0;
cursor: pointer;
}
.calendar-category-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
/* ============================================================
AGENDA ITEMS (calendar Agenda view)
============================================================ */
.calendar-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px;
border-radius: 10px;
border: 1px solid transparent;
transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.calendar-item:hover {
border-color: var(--bs-border-color);
background: var(--bs-tertiary-bg, #f8f9fc);
transform: translateX(2px);
}
.calendar-item-icon {
width: 38px;
height: 38px;
border-radius: 10px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.calendar-item-day {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--bs-secondary-color);
margin: 14px 0 6px;
}
.calendar-item-day:first-child {
margin-top: 0;
}
/* ============================================================
EMPTY STATE
============================================================ */
.calendar-empty {
text-align: center;
padding: 42px 16px;
}
.calendar-empty-art {
width: 116px;
height: 116px;
margin: 0 auto 18px;
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 52px;
color: var(--bs-primary);
background: rgba(var(--bs-primary-rgb), 0.1);
}
/* ============================================================
WEEK / DAY GRID
============================================================ */
.calendar-week {
overflow-x: auto;
}
.calendar-week table {
min-width: 720px;
}
.calendar-week .calendar-time {
width: 68px;
font-size: 0.72rem;
color: var(--bs-secondary-color);
white-space: nowrap;
}
.ev-calendar-sec {
position: sticky;
top: 80px;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 991.98px) {
.calendar-page {
--calendar-cell: 92px;
}
}
@media (max-width: 575.98px) {
.calendar-page {
--calendar-cell: 76px;
}
.calendar-cell {
padding: 5px 5px 4px;
}
.calendar-entry span {
display: none;
}
.calendar-entry {
justify-content: center;
padding: 4px;
}
}
/*-----------------
AI Insights — reusable enterprise AI component library
A shared vocabulary for every AI surface in the product, not styles for a
single page. Class prefix `aix-` (AI eXperience) so nothing collides with
the existing `.ai-*` accent helpers.
Everything inherits the template's own tokens: radius and shadow values
match `.data-workspace`, colours come from `utils/_variables.scss`, and the
Bootstrap custom properties are used where they exist. Nothing here changes
the sidebar, header, layout or global palette.
Colour discipline, applied consistently across every component:
danger / warning / info severity only
success positive outcome only
primary AI identity, actions, links
neutral surfaces everything decorative
Contents
1. Tokens
2. Utilities — value carriers, gradients, glow, floating decoration
3. Status indicators + AI badges
4. Confidence + progress indicators
5. Hero workspace
6. Explainable AI panel + signal chain
7. Insight cards
8. Recommendation cards
9. Student intelligence (profile) cards
10. Workflow cards
11. Activity timeline
12. Action center
13. Resource cards
14. Copilot workspace
15. Premium accordion / offcanvas / modal
16. Empty states
-----------------*/
/* ============================================================
1. TOKENS
Declared on :root so any AI page can use the components
without wrapping itself in a scope class.
============================================================ */
:root {
--aix-glow: 0 0 0 1px rgba(61, 94, 225, .12), 0 12px 32px rgba(61, 94, 225, .16);
}
@media (prefers-reduced-motion: reduce) {
[class*=aix-],
[class*=aix-]::before,
[class*=aix-]::after {
animation: none !important;
transition: none !important;
}
}
/* ============================================================
2. UTILITIES
============================================================ */
/* Value carriers — keep percentages out of inline styles.
`.aix-p-65` on any component sets its `--p` to 65. Every whole percent is
generated so a component never has to round its real value to fit the scale. */
.aix-p-0 {
--p: 0;
}
.aix-p-1 {
--p: 1;
}
.aix-p-2 {
--p: 2;
}
.aix-p-3 {
--p: 3;
}
.aix-p-4 {
--p: 4;
}
.aix-p-5 {
--p: 5;
}
.aix-p-6 {
--p: 6;
}
.aix-p-7 {
--p: 7;
}
.aix-p-8 {
--p: 8;
}
.aix-p-9 {
--p: 9;
}
.aix-p-10 {
--p: 10;
}
.aix-p-11 {
--p: 11;
}
.aix-p-12 {
--p: 12;
}
.aix-p-13 {
--p: 13;
}
.aix-p-14 {
--p: 14;
}
.aix-p-15 {
--p: 15;
}
.aix-p-16 {
--p: 16;
}
.aix-p-17 {
--p: 17;
}
.aix-p-18 {
--p: 18;
}
.aix-p-19 {
--p: 19;
}
.aix-p-20 {
--p: 20;
}
.aix-p-21 {
--p: 21;
}
.aix-p-22 {
--p: 22;
}
.aix-p-23 {
--p: 23;
}
.aix-p-24 {
--p: 24;
}
.aix-p-25 {
--p: 25;
}
.aix-p-26 {
--p: 26;
}
.aix-p-27 {
--p: 27;
}
.aix-p-28 {
--p: 28;
}
.aix-p-29 {
--p: 29;
}
.aix-p-30 {
--p: 30;
}
.aix-p-31 {
--p: 31;
}
.aix-p-32 {
--p: 32;
}
.aix-p-33 {
--p: 33;
}
.aix-p-34 {
--p: 34;
}
.aix-p-35 {
--p: 35;
}
.aix-p-36 {
--p: 36;
}
.aix-p-37 {
--p: 37;
}
.aix-p-38 {
--p: 38;
}
.aix-p-39 {
--p: 39;
}
.aix-p-40 {
--p: 40;
}
.aix-p-41 {
--p: 41;
}
.aix-p-42 {
--p: 42;
}
.aix-p-43 {
--p: 43;
}
.aix-p-44 {
--p: 44;
}
.aix-p-45 {
--p: 45;
}
.aix-p-46 {
--p: 46;
}
.aix-p-47 {
--p: 47;
}
.aix-p-48 {
--p: 48;
}
.aix-p-49 {
--p: 49;
}
.aix-p-50 {
--p: 50;
}
.aix-p-51 {
--p: 51;
}
.aix-p-52 {
--p: 52;
}
.aix-p-53 {
--p: 53;
}
.aix-p-54 {
--p: 54;
}
.aix-p-55 {
--p: 55;
}
.aix-p-56 {
--p: 56;
}
.aix-p-57 {
--p: 57;
}
.aix-p-58 {
--p: 58;
}
.aix-p-59 {
--p: 59;
}
.aix-p-60 {
--p: 60;
}
.aix-p-61 {
--p: 61;
}
.aix-p-62 {
--p: 62;
}
.aix-p-63 {
--p: 63;
}
.aix-p-64 {
--p: 64;
}
.aix-p-65 {
--p: 65;
}
.aix-p-66 {
--p: 66;
}
.aix-p-67 {
--p: 67;
}
.aix-p-68 {
--p: 68;
}
.aix-p-69 {
--p: 69;
}
.aix-p-70 {
--p: 70;
}
.aix-p-71 {
--p: 71;
}
.aix-p-72 {
--p: 72;
}
.aix-p-73 {
--p: 73;
}
.aix-p-74 {
--p: 74;
}
.aix-p-75 {
--p: 75;
}
.aix-p-76 {
--p: 76;
}
.aix-p-77 {
--p: 77;
}
.aix-p-78 {
--p: 78;
}
.aix-p-79 {
--p: 79;
}
.aix-p-80 {
--p: 80;
}
.aix-p-81 {
--p: 81;
}
.aix-p-82 {
--p: 82;
}
.aix-p-83 {
--p: 83;
}
.aix-p-84 {
--p: 84;
}
.aix-p-85 {
--p: 85;
}
.aix-p-86 {
--p: 86;
}
.aix-p-87 {
--p: 87;
}
.aix-p-88 {
--p: 88;
}
.aix-p-89 {
--p: 89;
}
.aix-p-90 {
--p: 90;
}
.aix-p-91 {
--p: 91;
}
.aix-p-92 {
--p: 92;
}
.aix-p-93 {
--p: 93;
}
.aix-p-94 {
--p: 94;
}
.aix-p-95 {
--p: 95;
}
.aix-p-96 {
--p: 96;
}
.aix-p-97 {
--p: 97;
}
.aix-p-98 {
--p: 98;
}
.aix-p-99 {
--p: 99;
}
.aix-p-100 {
--p: 100;
}
/* Bar heights for the compact signal bars */
.aix-v-10 {
--v: 10;
}
.aix-v-20 {
--v: 20;
}
.aix-v-30 {
--v: 30;
}
.aix-v-40 {
--v: 40;
}
.aix-v-50 {
--v: 50;
}
.aix-v-60 {
--v: 60;
}
.aix-v-70 {
--v: 70;
}
.aix-v-80 {
--v: 80;
}
.aix-v-90 {
--v: 90;
}
.aix-v-100 {
--v: 100;
}
.aix-grad {
background: radial-gradient(120% 150% at 100% 0%, var(--tint-primary) 0%, rgba(255, 255, 255, 0) 55%), var(--bs-body-bg);
}
.aix-grad-soft {
background: linear-gradient(180deg, var(--tint-primary) 0%, var(--bs-body-bg) 100%);
}
.aix-glow {
box-shadow: var(--aix-glow);
}
/* Floating decorative orbs — purely ornamental, never announced */
.aix-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(0.5px);
opacity: 0.5;
}
.aix-orb.aix-orb-1 {
width: 220px;
height: 220px;
top: -80px;
right: -60px;
background: radial-gradient(circle at 30% 30%, rgba(61, 94, 225, 0.22), rgba(61, 94, 225, 0) 70%);
}
.aix-orb.aix-orb-2 {
width: 160px;
height: 160px;
bottom: -70px;
left: 32%;
background: radial-gradient(circle at 40% 40%, rgba(111, 204, 216, 0.22), rgba(111, 204, 216, 0) 70%);
}
.aix-orb.aix-orb-3 {
width: 120px;
height: 120px;
top: 18%;
left: -40px;
background: radial-gradient(circle at 50% 50%, rgba(74, 0, 229, 0.14), rgba(74, 0, 229, 0) 70%);
}
/* Section heading used between workspaces */
.aix-sec {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 20px;
}
.aix-sec-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
color: var(--bs-emphasis-color);
font-size: 20px;
}
.aix-eyebrow {
display: block;
margin: 0 0 2px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-primary);
}
.aix-label {
display: block;
margin: 0;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* ============================================================
3. STATUS INDICATORS + AI BADGES
============================================================ */
.aix-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
}
.aix-dot {
position: relative;
display: inline-block;
width: 8px;
height: 8px;
flex-shrink: 0;
border-radius: 50%;
background: currentColor;
}
.aix-dot.aix-dot-live::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: inherit;
animation: aix-pulse 1.8s ease-out infinite;
}
@keyframes aix-pulse {
from {
opacity: 0.6;
scale: 1;
}
to {
opacity: 0;
scale: 2.8;
}
}
.aix-badge, .aix-sev {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
white-space: nowrap;
}
.aix-badge.is-ai, .is-ai.aix-sev {
background: var(--tint-primary);
color: var(--bs-primary);
}
.aix-badge.is-critical, .is-critical.aix-sev {
background: #FDE9ED;
color: #E82646;
}
.aix-badge.is-high, .is-high.aix-sev {
background: #FEF8EA;
color: rgb(162.6, 124.3820512821, 0);
}
.aix-badge.is-medium, .is-medium.aix-sev {
background: #E7F1FC;
color: #0F65CD;
}
.aix-badge.is-positive, .is-positive.aix-sev {
background: #E8F9E8;
color: #1ABE17;
}
/* severity pill with a leading dot */
.aix-sev::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* ============================================================
4. CONFIDENCE + PROGRESS INDICATORS
============================================================ */
.aix-conf {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 116px;
}
.aix-conf-track {
position: relative;
flex: 1 1 auto;
height: 5px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.aix-conf-fill {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--p, 0) * 1%);
border-radius: inherit;
background: linear-gradient(90deg, var(--bs-primary), #6FCCD8);
}
.aix-conf-val {
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
font-variant-numeric: tabular-nums;
}
/* circular confidence badge */
.aix-conf-ring {
position: relative;
display: grid;
place-items: center;
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: 50%;
background: conic-gradient(var(--bs-primary) calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) 0);
}
.aix-conf-ring::before {
content: "";
position: absolute;
inset: 5px;
border-radius: 50%;
background: var(--bs-body-bg);
}
.aix-conf-ring.aix-conf-ring-lg {
width: 92px;
height: 92px;
}
.aix-conf-ring.aix-conf-ring-lg::before {
inset: 8px;
}
.aix-conf-ring-in {
position: relative;
font-size: 13px;
font-weight: 700;
color: var(--bs-emphasis-color);
font-variant-numeric: tabular-nums;
}
.aix-prog {
position: relative;
height: 6px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.aix-prog-fill {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--p, 0) * 1%);
border-radius: inherit;
background: var(--bs-primary);
transition: width var(--transition);
}
.aix-prog-fill.is-critical {
background: #E82646;
}
.aix-prog-fill.is-high {
background: #EAB300;
}
.aix-prog-fill.is-medium {
background: #0F65CD;
}
.aix-prog-fill.is-positive {
background: #1ABE17;
}
/* ============================================================
5. HERO WORKSPACE
============================================================ */
.aix-hero {
position: relative;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: radial-gradient(90% 120% at 88% 0%, rgba(61, 94, 225, 0.1) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(70% 90% at 0% 100%, rgba(111, 204, 216, 0.1) 0%, rgba(255, 255, 255, 0) 60%), var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
}
.aix-hero-body {
position: relative;
padding: 24px;
}
@media (min-width: 1400px) {
.aix-hero-body {
padding: 28px 32px;
}
}
@media (max-width: 575.98px) {
.aix-hero-body {
padding: 20px;
}
}
.aix-hero-title {
margin: 0 0 8px;
font-size: 28px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
@media (max-width: 991.98px) {
.aix-hero-title {
font-size: 23px;
}
}
/* stat rail — figures, not KPI cards: no boxes, no icons, hairline dividers */
.aix-hero-rail {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
padding-top: 18px;
margin-top: 18px;
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.aix-hero-rail {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
}
.aix-hero-stat {
min-width: 0;
}
.aix-hero-stat + .aix-hero-stat {
padding-left: 18px;
border-left: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.aix-hero-stat + .aix-hero-stat {
padding-left: 0;
border-left: 0;
}
}
.aix-hero-val {
display: flex;
align-items: baseline;
gap: 5px;
margin: 2px 0 0;
font-size: 21px;
font-weight: 700;
line-height: 1.2;
color: var(--bs-emphasis-color);
}
.aix-hero-val small {
font-size: 12px;
font-weight: 400;
color: var(--bs-secondary-color);
}
/* illustration column */
.aix-hero-art {
position: relative;
display: grid;
place-items: center;
min-height: 196px;
height: 100%;
border-radius: var(--radius);
background: linear-gradient(160deg, var(--tint-primary) 0%, var(--bs-body-bg) 70%);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.aix-hero-art-core {
position: relative;
display: grid;
place-items: center;
width: 78px;
height: 78px;
border-radius: 50%;
background: var(--bs-body-bg);
box-shadow: var(--aix-glow);
color: var(--bs-primary);
font-size: 32px;
z-index: 1;
}
/* concentric scanning rings behind the core */
.aix-hero-art-ring {
position: absolute;
border: 1px solid rgba(61, 94, 225, 0.18);
border-radius: 50%;
}
.aix-hero-art-ring.r1 {
width: 124px;
height: 124px;
}
.aix-hero-art-ring.r2 {
width: 170px;
height: 170px;
border-style: dashed;
animation: aix-spin 34s linear infinite;
}
.aix-hero-art-ring.r3 {
width: 218px;
height: 218px;
border-color: rgba(61, 94, 225, 0.1);
}
@keyframes aix-spin {
to {
rotate: 360deg;
}
}
/* small chips that sit on the rings */
.aix-hero-chip {
position: absolute;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
font-size: 11px;
font-weight: 500;
color: var(--bs-emphasis-color);
white-space: nowrap;
z-index: 2;
}
.aix-hero-chip.c1 {
top: 9%;
left: 3%;
}
.aix-hero-chip.c2 {
bottom: 11%;
right: 3%;
}
.aix-hero-chip.c3 {
top: 11%;
right: 5%;
}
/* ---- workflow stepper: the page's own table of contents ---- */
.aix-wf {
padding: 16px 24px 20px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
@media (max-width: 575.98px) {
.aix-wf {
padding: 16px 20px;
}
}
.aix-wf-title {
margin-bottom: 12px;
}
.aix-wf-rail {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
@media (max-width: 1199.98px) {
.aix-wf-rail {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.aix-wf-rail {
grid-template-columns: minmax(0, 1fr);
}
}
.aix-wf-step {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
transition: border-color var(--transition), box-shadow var(--transition);
/* connector between stages */
}
.aix-wf-step:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -8px;
width: 8px;
height: 8px;
border-top: 1.5px solid var(--bs-border-color);
border-right: 1.5px solid var(--bs-border-color);
rotate: 45deg;
translate: 0 -50%;
}
@media (max-width: 1199.98px) {
.aix-wf-step:not(:last-child)::after {
display: none;
}
}
.aix-wf-step:hover, .aix-wf-step:focus-visible {
border-color: var(--bs-primary);
box-shadow: var(--shadow);
}
.aix-wf-step:hover .aix-wf-ic, .aix-wf-step:focus-visible .aix-wf-ic {
background: var(--tint-primary);
color: var(--bs-primary);
}
.aix-wf-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
color: var(--bs-emphasis-color);
font-size: 16px;
transition: background var(--transition), color var(--transition);
}
.aix-wf-txt {
display: flex;
flex-direction: column;
min-width: 0;
}
.aix-wf-step-n {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-primary);
}
.aix-wf-lbl {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: var(--bs-emphasis-color);
}
.aix-wf-sub {
font-size: 11px;
color: var(--bs-secondary-color);
}
/* ============================================================
6. EXPLAINABLE AI PANEL + SIGNAL CHAIN
============================================================ */
.aix-explain {
position: relative;
height: 100%;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: box-shadow var(--transition), border-color var(--transition);
}
.aix-explain:hover {
border-color: rgba(61, 94, 225, 0.35);
box-shadow: var(--shadow-lift);
}
/* severity reads from the top edge, so the card is scannable before it is read */
.aix-explain-accent::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
z-index: 1;
background: var(--bs-tertiary-bg);
}
.aix-explain-accent.is-critical::before {
background: #E82646;
}
.aix-explain-accent.is-high::before {
background: #EAB300;
}
.aix-explain-accent.is-medium::before {
background: #0F65CD;
}
.aix-explain-head {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 18px;
background: linear-gradient(180deg, var(--tint-primary) 0%, var(--bs-body-bg) 100%);
border-bottom: 1px solid var(--bs-border-color);
}
.aix-explain-body {
padding: 18px;
}
.aix-explain-obs {
margin: 0 0 6px;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
}
/* the reasoning block — quoted, so it reads as generated text */
.aix-why {
position: relative;
padding: 12px 14px 12px 16px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
font-size: 13px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
.aix-why::before {
content: "";
position: absolute;
inset: 10px auto 10px 0;
width: 3px;
border-radius: 999px;
background: var(--bs-primary);
opacity: 0.5;
}
/* ---- supporting signals as a dense grid, not a stacked chain ----
Four signals in two rows instead of four, which is most of the height
the explanation card used to spend. */
.aix-sig-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.aix-sig {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
padding: 9px 10px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
transition: border-color var(--transition), background var(--transition);
}
.aix-sig:hover {
background: var(--bs-secondary-bg);
border-color: rgba(61, 94, 225, 0.28);
}
.aix-sig-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
font-size: 13px;
}
.aix-sig-ic.is-critical {
background: #FDE9ED;
color: #E82646;
}
.aix-sig-ic.is-high {
background: #FEF8EA;
color: rgb(162.6, 124.3820512821, 0);
}
.aix-sig-ic.is-medium {
background: #E7F1FC;
color: #0F65CD;
}
.aix-sig-ic.is-positive {
background: #E8F9E8;
color: #1ABE17;
}
.aix-sig-txt {
min-width: 0;
}
.aix-sig-lbl {
display: block;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bs-secondary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aix-sig-val {
display: block;
font-size: 12.5px;
font-weight: 600;
line-height: 1.35;
color: var(--bs-emphasis-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* the suggested action, inline rather than as its own labelled block */
.aix-act-line {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 11px 12px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
font-size: 13px;
line-height: 1.55;
color: var(--bs-emphasis-color);
}
/* small confidence ring that sits in the card head */
.aix-conf-ring-sm {
width: 44px;
height: 44px;
}
.aix-conf-ring-sm::before {
inset: 4px;
}
.aix-conf-ring-sm .aix-conf-ring-in {
font-size: 11px;
}
/* supporting signals as a vertical chain with connectors */
.aix-chain {
display: flex;
flex-direction: column;
gap: 0;
}
.aix-chain-step {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 9px 0;
}
.aix-chain-step:not(:last-child)::after {
content: "";
position: absolute;
top: 34px;
left: 13px;
bottom: -4px;
width: 1px;
background: var(--bs-border-color);
}
.aix-chain-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 50%;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
font-size: 14px;
z-index: 1;
}
.aix-chain-ic.is-critical {
background: #FDE9ED;
color: #E82646;
}
.aix-chain-ic.is-high {
background: #FEF8EA;
color: rgb(162.6, 124.3820512821, 0);
}
.aix-chain-ic.is-medium {
background: #E7F1FC;
color: #0F65CD;
}
.aix-chain-txt {
flex: 1 1 auto;
min-width: 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.aix-chain-val {
font-size: 12px;
font-weight: 600;
color: var(--bs-secondary-color);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* outcome strip at the foot of an explanation */
.aix-outcome {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
/* ============================================================
7. INSIGHT CARDS
============================================================ */
.aix-insight {
position: relative;
height: 100%;
padding: 20px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
transition: transform var(--transition), box-shadow var(--transition);
}
.aix-insight:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.aix-insight-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
.aix-insight-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
color: var(--bs-emphasis-color);
font-size: 18px;
}
.aix-insight-txt {
margin: 0;
font-size: 14px;
line-height: 1.65;
color: var(--bs-emphasis-color);
}
.aix-insight-txt b {
font-weight: 600;
}
.aix-insight-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
8. RECOMMENDATION CARDS
============================================================ */
.aix-rec {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}
.aix-rec::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--bs-primary);
opacity: 0;
transition: opacity var(--transition);
}
.aix-rec:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.aix-rec:hover::before {
opacity: 1;
}
.aix-rec-head {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 16px 0;
}
.aix-rec-body {
flex: 1 1 auto;
padding: 12px 16px 16px;
}
.aix-rec-title {
margin: 0 0 4px;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
color: var(--bs-emphasis-color);
}
/* Impact and timeline sit on one line with a hairline between them.
This replaces a three-cell bordered grid that cost ~110px in a card
only 300px wide. */
.aix-rec-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 12px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
overflow: hidden;
}
.aix-rec-stat {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 9px 11px;
background: var(--bs-body-bg);
}
.aix-rec-stat + .aix-rec-stat {
border-left: 1px solid var(--bs-border-color);
}
.aix-rec-stat i {
flex-shrink: 0;
font-size: 15px;
color: var(--bs-secondary-color);
}
.aix-rec-stat-txt {
min-width: 0;
}
.aix-rec-stat-lbl {
display: block;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bs-secondary-color);
white-space: nowrap;
}
.aix-rec-stat-val {
display: block;
font-size: 12.5px;
font-weight: 600;
line-height: 1.35;
color: var(--bs-emphasis-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aix-rec-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
/* ============================================================
9. STUDENT INTELLIGENCE (PROFILE) CARDS
============================================================ */
.aix-profile {
position: relative;
display: grid;
grid-template-columns: 268px minmax(0, 1fr) 232px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: box-shadow var(--transition), border-color var(--transition);
}
.aix-profile:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow-lift);
}
@media (max-width: 1399.98px) {
.aix-profile {
grid-template-columns: 248px minmax(0, 1fr);
}
}
@media (max-width: 767.98px) {
.aix-profile {
grid-template-columns: minmax(0, 1fr);
}
}
.aix-profile-media {
display: flex;
flex-direction: column;
gap: 14px;
padding: 20px;
background: linear-gradient(180deg, var(--tint-primary) 0%, var(--bs-body-bg) 100%);
border-right: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.aix-profile-media {
border-right: 0;
border-bottom: 1px solid var(--bs-border-color);
}
}
.aix-profile-main {
padding: 20px;
min-width: 0;
}
.aix-profile-side {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
background: var(--bs-secondary-bg);
border-left: 1px solid var(--bs-border-color);
}
@media (max-width: 1399.98px) {
.aix-profile-side {
grid-column: 1/-1;
flex-direction: row;
flex-wrap: wrap;
border-left: 0;
border-top: 1px solid var(--bs-border-color);
}
}
.aix-profile-name {
margin: 0;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
}
/* the risk score readout */
.aix-score {
display: flex;
align-items: baseline;
gap: 4px;
font-size: 30px;
font-weight: 700;
line-height: 1;
color: var(--bs-emphasis-color);
}
.aix-score small {
font-size: 12px;
font-weight: 400;
color: var(--bs-secondary-color);
}
/* compact horizontal risk timeline built from bars */
.aix-mini {
display: flex;
align-items: flex-end;
gap: 3px;
height: 34px;
}
.aix-mini i {
flex: 1 1 auto;
min-width: 4px;
height: calc(var(--v, 30) * 1%);
border-radius: 2px;
background: var(--bs-tertiary-bg);
}
.aix-mini i.is-critical {
background: #E82646;
}
.aix-mini i.is-high {
background: #EAB300;
}
.aix-mini i.is-medium {
background: #0F65CD;
}
.aix-mini i.is-positive {
background: #1ABE17;
}
/* a labelled fact row used inside profile and side panels */
.aix-fact {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
}
.aix-fact + .aix-fact {
border-top: 1px solid var(--bs-border-color);
}
/* ---- case status strip ----
The lifecycle facts of a case (age, stage, next review). Deliberately not
built from .aix-fact: three space-between rows sitting side by side read as
a second copy of the owners row above and leave a ragged gap between each
label and its value. This is one enclosed bar with hairline dividers, so it
reads as case metadata rather than as more content. */
.aix-caseline {
display: flex;
flex-wrap: wrap;
align-items: stretch;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
overflow: hidden;
}
.aix-caseline-item {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 0;
min-width: 148px;
padding: 10px 14px;
}
.aix-caseline-item + .aix-caseline-item {
border-left: 1px solid var(--bs-border-color);
}
.aix-caseline-item i {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 15px;
}
.aix-caseline-txt {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.35;
}
.aix-caseline-txt span:first-child {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.aix-caseline-txt span:last-child {
font-size: 13px;
font-weight: 500;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.aix-caseline-item + .aix-caseline-item {
border-left: 0;
border-top: 1px solid var(--bs-border-color);
}
}
.aix-person {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
/* ---- secondary actions inside the profile action rail ----
The rail is a fixed column while the middle drives the height, so it
almost always has room left over. These fill it with the actions that
belong to the case rather than with padding. */
.aix-quick-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
/* the tooltip wrapper each button sits in */
}
.aix-quick-grid > span {
display: inline-flex;
}
.aix-quick-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border: 1px solid var(--bs-border-color);
border-radius: 50%;
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
font-size: 17px;
transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.aix-quick-btn:hover, .aix-quick-btn:focus-visible {
border-color: rgba(61, 94, 225, 0.35);
background: var(--tint-primary);
color: var(--bs-primary);
}
/* case status, pinned to the foot of the rail */
.aix-side-foot {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 1399.98px) {
.aix-side-foot {
flex: 1 1 100%;
margin-top: 0;
}
}
/* ============================================================
10. WORKFLOW CARDS
============================================================ */
.aix-flow {
position: relative;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
}
.aix-flow-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
padding: 18px 20px;
border-bottom: 1px solid var(--bs-border-color);
}
.aix-flow-body {
padding: 20px;
}
/* horizontal stage rail with connectors */
.aix-steps {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
}
@media (max-width: 1199.98px) {
.aix-steps {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.aix-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.aix-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 14px 10px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
text-align: center;
transition: background var(--transition);
}
.aix-step:hover {
background: var(--bs-tertiary-bg);
}
.aix-step {
/* connector */
}
.aix-step:not(:last-child)::after {
content: "";
position: absolute;
top: 31px;
right: -8px;
width: 8px;
height: 1px;
background: var(--bs-border-color);
}
@media (max-width: 1199.98px) {
.aix-step:not(:last-child)::after {
display: none;
}
}
.aix-step.is-done {
background: #E8F9E8;
}
.aix-step.is-active {
background: var(--tint-primary);
box-shadow: inset 0 0 0 1px rgba(61, 94, 225, 0.28);
}
.aix-step-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--bs-body-bg);
color: var(--bs-secondary-color);
font-size: 16px;
}
.is-done .aix-step-ic {
color: #1ABE17;
}
.is-active .aix-step-ic {
color: var(--bs-primary);
}
.aix-step-lbl {
margin: 0;
font-size: 12px;
font-weight: 500;
line-height: 1.35;
color: var(--bs-emphasis-color);
}
.aix-step-sub {
margin: 0;
font-size: 11px;
color: var(--bs-secondary-color);
}
/* ============================================================
11. ACTIVITY TIMELINE
============================================================ */
.aix-tl {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.aix-tl-item {
position: relative;
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: 14px;
padding-bottom: 22px;
}
.aix-tl-item:last-child {
padding-bottom: 0;
}
.aix-tl-item {
/* the rail */
}
.aix-tl-item:not(:last-child)::before {
content: "";
position: absolute;
top: 38px;
left: 17px;
bottom: 0;
width: 1px;
background: var(--bs-border-color);
}
.aix-tl-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
font-size: 16px;
z-index: 1;
}
.aix-tl-dot.is-done {
background: #E8F9E8;
color: #1ABE17;
}
.aix-tl-dot.is-active {
background: var(--tint-primary);
color: var(--bs-primary);
box-shadow: 0 0 0 4px rgba(61, 94, 225, 0.1);
}
.aix-tl-title {
margin: 0 0 2px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
12. ACTION CENTER
============================================================ */
.aix-action {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
transition: background var(--transition), border-color var(--transition);
}
.aix-action:hover {
background: var(--bs-tertiary-bg);
border-color: rgba(61, 94, 225, 0.28);
}
.aix-action + .aix-action {
margin-top: 12px;
}
.aix-action-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
color: var(--bs-emphasis-color);
}
/* ============================================================
13. RESOURCE CARDS
============================================================ */
.aix-res {
display: flex;
align-items: flex-start;
gap: 14px;
height: 100%;
padding: 18px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition);
}
.aix-res:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.aix-res:hover .aix-res-go {
color: var(--bs-primary);
translate: 2px 0;
}
.aix-res-go {
color: var(--bs-secondary-color);
transition: color var(--transition), translate var(--transition);
}
/* ============================================================
14. COPILOT WORKSPACE
============================================================ */
.aix-copilot {
position: relative;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: radial-gradient(80% 120% at 100% 0%, rgba(61, 94, 225, 0.1) 0%, rgba(255, 255, 255, 0) 60%), var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
}
.aix-copilot-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 22px 24px;
border-bottom: 1px solid var(--bs-border-color);
}
.aix-copilot-body {
padding: 24px;
}
.aix-act {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
padding: 16px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
text-align: left;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.aix-act:hover {
transform: translateY(-2px);
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow-lift);
}
.aix-act-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 17px;
}
/* ============================================================
15. PREMIUM ACCORDION / OFFCANVAS / MODAL
============================================================ */
.aix-acc {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
overflow: hidden;
}
.aix-acc .accordion-item {
border: 0;
border-bottom: 1px solid var(--bs-border-color);
background: transparent;
}
.aix-acc .accordion-item:last-child {
border-bottom: 0;
}
.aix-acc .accordion-button {
padding: 14px 16px;
font-size: 14px;
font-weight: 500;
color: var(--bs-emphasis-color);
background: var(--bs-body-bg);
box-shadow: none;
}
.aix-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.aix-acc .accordion-button:focus {
box-shadow: none;
}
.aix-acc .accordion-body {
padding: 16px;
font-size: 13px;
line-height: 1.7;
color: var(--bs-secondary-color);
background: var(--bs-body-bg);
}
.aix-canvas .offcanvas-header {
padding: 20px;
background: linear-gradient(180deg, var(--tint-primary) 0%, var(--bs-body-bg) 100%);
border-bottom: 1px solid var(--bs-border-color);
}
.aix-canvas .offcanvas-body {
padding: 20px;
}
.aix-canvas .offcanvas-footer {
padding: 16px 20px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
.aix-modal .modal-content {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
overflow: hidden;
}
.aix-modal .modal-header {
padding: 20px;
background: linear-gradient(180deg, var(--tint-primary) 0%, var(--bs-body-bg) 100%);
border-bottom: 1px solid var(--bs-border-color);
}
.aix-modal .modal-body {
padding: 20px;
}
.aix-modal .modal-footer {
padding: 16px 20px;
background: var(--bs-secondary-bg);
}
/* ============================================================
16. CASE QUEUE + CASE WORKSPACE
The scalable pattern: the page lists cases, the workspace holds the
detail. One offcanvas serves every case, so the page length is the same
whether the engine flags 10 students or 500.
============================================================ */
/* ---- the workspace shell ---- */
/* The case workspace needs most of the viewport. The theme already sets
`.offcanvas.offcanvas-end { width: auto !important }`, which is two classes
and !important, so a single-class rule cannot win however it is written.
Matching all three classes outranks it without editing the shared partial. */
.offcanvas.offcanvas-end.aix-canvas-xl {
width: 88% !important;
max-width: 1440px !important;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-end.aix-canvas-xl {
width: 100% !important;
}
}
/* record highlights panel, the Salesforce-style header */
.aix-record {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 18px 24px;
background: linear-gradient(180deg, var(--tint-primary) 0%, var(--bs-body-bg) 100%);
border-bottom: 1px solid var(--bs-border-color);
}
.aix-record-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
overflow: hidden;
}
@media (max-width: 767.98px) {
.aix-record-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.aix-record-stat {
padding: 9px 14px;
min-width: 0;
}
.aix-record-stat + .aix-record-stat {
border-left: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.aix-record-stat:nth-child(3) {
border-left: 0;
}
}
/* ---- horizontal stepper ---- */
.aix-stepper {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
padding: 14px 24px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
list-style: none;
margin: 0;
}
@media (max-width: 991.98px) {
.aix-stepper {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.aix-stepper {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.aix-stepper-btn {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
text-align: left;
transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
/* connector between steps */
}
.aix-stepper-btn::after {
content: "";
position: absolute;
top: 50%;
right: -8px;
width: 8px;
height: 8px;
border-top: 1.5px solid var(--bs-border-color);
border-right: 1.5px solid var(--bs-border-color);
rotate: 45deg;
translate: 0 -50%;
}
@media (max-width: 991.98px) {
.aix-stepper-btn::after {
display: none;
}
}
.aix-stepper-btn:hover {
border-color: rgba(61, 94, 225, 0.35);
}
.aix-stepper-btn.active {
border-color: var(--bs-primary);
background: var(--bs-body-bg);
box-shadow: inset 0 0 0 1px var(--bs-primary);
}
.aix-stepper-btn.active .aix-stepper-ic {
background: var(--bs-primary);
color: #fff;
}
.aix-stepper-btn.active .aix-stepper-lbl {
color: var(--bs-primary);
}
.nav-item:last-child .aix-stepper-btn::after {
display: none;
}
.aix-stepper-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 50%;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
font-size: 14px;
font-weight: 600;
transition: background var(--transition), color var(--transition);
}
.aix-stepper-txt {
display: flex;
flex-direction: column;
min-width: 0;
}
.aix-stepper-n {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.aix-stepper-lbl {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: var(--bs-emphasis-color);
transition: color var(--transition);
}
/* ---- panes ---- */
.aix-pane-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--bs-border-color);
}
/* a plain bordered block used throughout the panes */
.aix-block {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
overflow: hidden;
height: 100%;
}
.aix-block-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
.aix-block-body {
padding: 16px;
}
/* ============================================================
17. EMPTY STATES
============================================================ */
.aix-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 36px 24px;
border: 1px dashed var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-secondary-bg);
}
.aix-empty-art {
position: relative;
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin-bottom: 14px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 26px;
}
.aix-empty-art::after {
content: "";
position: absolute;
inset: -8px;
border: 1px dashed var(--bs-border-color);
border-radius: 50%;
}
.aix-empty-title {
margin: 0 0 4px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
17. ATTENDANCE INTELLIGENCE — prefix `atn-`
A second component family in the same library, sharing the tokens above
but with a deliberately different visual language from the `aix-` family:
aix- enclosed cards, hairline dividers, chevron steppers, left rails
atn- banded surfaces, a vertical signal spine, square heat cells,
numbered rail steps and arc gauges
Nothing here overrides an `aix-` rule, so the two can coexist on a page
without either winning by accident.
============================================================ */
@media (prefers-reduced-motion: reduce) {
[class*=atn-],
[class*=atn-]::before,
[class*=atn-]::after {
animation: none !important;
transition: none !important;
}
}
/* ---- section framing ---------------------------------------------------
Sections announce themselves with a rule and a number rather than with
an icon tile, so the page reads as a document of findings. */
.atn-sec {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding-bottom: 14px;
margin-bottom: 24px;
border-bottom: 2px solid var(--bs-emphasis-color);
}
.atn-sec-n {
display: block;
margin-bottom: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bs-primary);
}
.atn-sec-title {
margin: 0;
font-size: 20px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.atn-sec-sub {
margin: 4px 0 0;
font-size: 13px;
color: var(--bs-secondary-color);
max-width: 620px;
}
/* small caps label, used inside every atn component */
.atn-lbl {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* ---- confidence chip ---------------------------------------------------
Reads as a measurement, not a badge: monospaced-feel figure with a rule
under it that fills to the value carried by `.aix-p-*`. */
.atn-conf {
display: inline-flex;
flex-direction: column;
gap: 4px;
min-width: 62px;
}
.atn-conf b {
font-size: 14px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
line-height: 1;
}
.atn-conf::after {
content: "";
display: block;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--bs-primary) 0 calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) calc(var(--p, 0) * 1%) 100%);
}
/* ---- severity / status pills ------------------------------------------- */
.atn-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
border: 1px solid transparent;
white-space: nowrap;
}
.atn-pill i {
font-size: 13px;
}
.atn-pill.is-critical {
color: #E82646;
background: #FDE9ED;
border-color: #FAD4DA;
}
.atn-pill.is-high {
color: #EAB300;
background: #FEF8EA;
border-color: #FDF1D6;
}
.atn-pill.is-watch {
color: #0F65CD;
background: #E7F1FC;
border-color: #CFE2FA;
}
.atn-pill.is-good {
color: #1ABE17;
background: #E8F9E8;
border-color: #D1F2D1;
}
.atn-pill.is-ai {
color: var(--bs-primary);
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.22);
}
/* live status dot */
.atn-live {
position: relative;
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #1ABE17;
}
.atn-live::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid #1ABE17;
opacity: 0;
animation: atn-ping 2.4s ease-out infinite;
}
@keyframes atn-ping {
0% {
transform: scale(0.6);
opacity: 0.9;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
/* ============================================================
HERO — split workspace: gauge on the left, live feed on the right
============================================================ */
.atn-hero {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: radial-gradient(120% 140% at 0% 0%, rgba(61, 94, 225, 0.1) 0%, rgba(61, 94, 225, 0) 55%), radial-gradient(100% 120% at 100% 0%, rgba(2, 168, 181, 0.1) 0%, rgba(2, 168, 181, 0) 50%), var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
/* a faint grid so the surface reads as an instrument panel */
.atn-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(var(--bs-border-color) 1px, transparent 1px), linear-gradient(90deg, var(--bs-border-color) 1px, transparent 1px);
background-size: 46px 46px;
opacity: 0.35;
mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 75%);
pointer-events: none;
}
.atn-hero-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 336px;
gap: 32px;
padding: 26px 28px;
}
@media (max-width: 1199.98px) {
.atn-hero-inner {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
}
@media (max-width: 575.98px) {
.atn-hero-inner {
padding: 20px;
}
}
.atn-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 8px;
border-radius: 999px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.atn-hero-title {
margin: 14px 0 8px;
font-size: 30px;
line-height: 1.22;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
.atn-hero-title em {
font-style: normal;
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 767.98px) {
.atn-hero-title {
font-size: 24px;
}
}
/* health meter — one continuous band, not four stat boxes */
.atn-meter {
margin-top: 20px;
padding: 16px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.atn-meter-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.atn-meter-head b {
font-size: 24px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.atn-meter-head b small {
font-size: 13px;
font-weight: 500;
color: var(--bs-secondary-color);
}
.atn-meter-band {
display: flex;
gap: 3px;
height: 26px;
}
.atn-meter-band span {
flex: 1 1 0;
border-radius: 3px;
background: var(--bs-tertiary-bg);
transition: var(--transition);
}
.atn-meter-band span.is-on {
background: linear-gradient(180deg, var(--bs-primary), rgba(61, 94, 225, 0.72));
}
.atn-meter-band span.is-warn {
background: #EAB300;
}
.atn-meter-band span.is-bad {
background: #E82646;
}
.atn-meter-scale {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 11px;
color: var(--bs-secondary-color);
}
/* hero figures sit on a single inline row, divided by dots not boxes */
.atn-hero-facts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 20px;
margin-top: 18px;
font-size: 13px;
color: var(--bs-secondary-color);
}
.atn-hero-facts span b {
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ---- right column: gauge + live feed ---- */
.atn-hero-panel {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--aix-glow);
}
.atn-gauge {
position: relative;
width: 168px;
height: 92px;
margin: 4px auto 0;
overflow: hidden;
}
/* The dial is a conic sweep starting at 9 o'clock, so a half turn (180deg)
is a full reading and `--p` maps to degrees at 1.8 per percent. The hole is
cut with a radial mask rather than an overlaid disc, so the hero's tinted
background shows through the middle. */
.atn-gauge::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 168px;
height: 168px;
border-radius: 50%;
background: conic-gradient(from 270deg, var(--bs-primary) 0deg calc(var(--p, 0) * 1.8deg), var(--bs-tertiary-bg) calc(var(--p, 0) * 1.8deg) 180deg, transparent 180deg 360deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
}
.atn-gauge-val {
position: absolute;
left: 0;
right: 0;
bottom: 2px;
text-align: center;
font-size: 26px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
line-height: 1;
}
.atn-gauge-val small {
display: block;
margin-top: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* live prediction feed — ticker rows, each with a leading time */
.atn-feed {
display: flex;
flex-direction: column;
border-top: 1px solid var(--bs-border-color);
}
.atn-feed-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
font-size: 12px;
}
.atn-feed-row + .atn-feed-row {
border-top: 1px dashed var(--bs-border-color);
}
.atn-feed-row time {
flex-shrink: 0;
width: 42px;
font-variant-numeric: tabular-nums;
color: var(--bs-secondary-color);
}
.atn-feed-row p {
margin: 0;
color: var(--bs-emphasis-color);
}
/* ============================================================
CASE CARDS — compact 3-up grid with a delta band and heat strip
============================================================ */
.atn-case {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.atn-case:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow-lift);
}
/* the delta band is the card's identity: current -> predicted, in colour */
.atn-case-band {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: #fff;
background: linear-gradient(90deg, #202C4B, rgba(32, 44, 75, 0.82));
}
.atn-case-band.is-critical {
background: linear-gradient(90deg, #E82646, rgba(232, 38, 70, 0.8));
}
.atn-case-band.is-high {
background: linear-gradient(90deg, #EAB300, rgba(234, 179, 0, 0.8));
}
.atn-case-band.is-watch {
background: linear-gradient(90deg, #0F65CD, rgba(15, 101, 205, 0.8));
}
.atn-case-delta {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.atn-case-delta i {
font-size: 16px;
opacity: 0.85;
}
.atn-case-delta small {
font-size: 11px;
font-weight: 500;
opacity: 0.85;
}
.atn-case-body {
display: flex;
flex-direction: column;
gap: 14px;
flex: 1 1 auto;
padding: 16px;
}
.atn-case-name {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* 12-week heat strip — square cells, four intensities */
.atn-heat {
display: flex;
gap: 3px;
}
.atn-heat i {
flex: 1 1 0;
height: 18px;
border-radius: 3px;
background: var(--bs-tertiary-bg);
}
.atn-heat i.h1 {
background: rgba(61, 94, 225, 0.22);
}
.atn-heat i.h2 {
background: rgba(61, 94, 225, 0.45);
}
.atn-heat i.h3 {
background: rgba(61, 94, 225, 0.7);
}
.atn-heat i.h4 {
background: var(--bs-primary);
}
.atn-heat i.m1 {
background: #FDE9ED;
}
.atn-heat i.m2 {
background: #F8BEC8;
}
.atn-heat i.m3 {
background: #E82646;
}
.atn-case-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--bs-border-color);
border-bottom: 1px solid var(--bs-border-color);
}
.atn-case-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
/* round icon-only secondary actions */
.atn-ico-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 50%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 16px;
transition: var(--transition);
}
.atn-ico-btn:hover {
color: var(--bs-primary);
border-color: var(--bs-primary);
background: var(--tint-primary);
}
/* ============================================================
SIGNAL SPINE — the explainable-AI cascade
A vertical chain of nodes joined by a drawn line, so the causal
order the AI followed is the layout itself.
============================================================ */
.atn-spine {
position: relative;
padding-left: 34px;
}
.atn-spine::before {
content: "";
position: absolute;
left: 13px;
top: 10px;
bottom: 10px;
width: 2px;
background: linear-gradient(180deg, var(--bs-primary), rgba(61, 94, 225, 0.12));
}
.atn-node {
position: relative;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.atn-node + .atn-node {
margin-top: 14px;
}
.atn-node:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow);
}
.atn-node {
/* the marker sits on the spine */
}
.atn-node::before {
content: "";
position: absolute;
left: -27px;
top: 20px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 3px solid var(--bs-primary);
}
.atn-node.is-critical::before {
border-color: #E82646;
}
.atn-node.is-high::before {
border-color: #EAB300;
}
.atn-node.is-watch::before {
border-color: #0F65CD;
}
.atn-node-obs {
margin: 0 0 6px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.atn-node-why {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* supporting signals read as inline evidence tags */
.atn-sigs {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.atn-sigs span {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 12px;
color: var(--bs-emphasis-color);
}
.atn-sigs span i {
font-size: 13px;
color: var(--bs-secondary-color);
}
.atn-node-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--bs-border-color);
}
/* expected improvement figure */
.atn-gain {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: #1ABE17;
}
.atn-gain small {
font-size: 11px;
font-weight: 500;
color: var(--bs-secondary-color);
}
/* ============================================================
RECOMMENDATIONS — priority-ranked rows with a leading rank number
============================================================ */
.atn-rec {
display: flex;
align-items: flex-start;
gap: 14px;
height: 100%;
padding: 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.atn-rec:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow-lift);
}
.atn-rec-rank {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.atn-rec-title {
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.atn-rec-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin-top: 10px;
font-size: 12px;
color: var(--bs-secondary-color);
}
.atn-rec-meta b {
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
RECOVERY RAIL — 7 numbered stations on a drawn track
============================================================ */
.atn-rail {
position: relative;
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
}
@media (max-width: 1199.98px) {
.atn-rail {
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: 22px;
}
}
@media (max-width: 575.98px) {
.atn-rail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.atn-station {
position: relative;
text-align: center;
padding-top: 42px;
/* the track segment */
}
.atn-station::before {
content: "";
position: absolute;
left: 50%;
right: -50%;
top: 16px;
height: 2px;
background: var(--bs-tertiary-bg);
}
.atn-station:last-child::before {
display: none;
}
.atn-station.is-done::before {
background: #1ABE17;
}
.atn-station {
/* the station marker */
}
.atn-station::after {
content: attr(data-n);
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--bs-tertiary-bg);
color: var(--bs-secondary-color);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.atn-station.is-done::after {
background: #1ABE17;
border-color: #1ABE17;
color: #fff;
}
.atn-station.is-now::after {
border-color: var(--bs-primary);
color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
@media (max-width: 1199.98px) {
.atn-station::before {
display: none;
}
}
.atn-station-lbl {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.atn-station-sub {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--bs-secondary-color);
}
/* ============================================================
COPILOT LAUNCHER — six large action tiles
============================================================ */
.atn-launch {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.atn-launch::after {
content: "";
position: absolute;
right: -32px;
top: -32px;
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--tint-primary);
opacity: 0;
transition: var(--transition);
}
.atn-launch:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow-lift);
}
.atn-launch:hover::after {
opacity: 1;
}
.atn-launch:hover .atn-launch-ic {
color: #fff;
background: var(--bs-primary);
border-color: var(--bs-primary);
}
.atn-launch-ic {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
border: 1px solid transparent;
color: var(--bs-primary);
font-size: 20px;
transition: var(--transition);
}
.atn-launch-title {
position: relative;
z-index: 1;
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
INTELLIGENCE NOTES — findings written as quoted AI statements
============================================================ */
.atn-note {
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--bs-primary);
transition: var(--transition);
}
.atn-note:hover {
box-shadow: var(--shadow-lift);
}
.atn-note.is-good {
border-left-color: #1ABE17;
}
.atn-note.is-warn {
border-left-color: #EAB300;
}
.atn-note.is-bad {
border-left-color: #E82646;
}
.atn-note-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.atn-note-fig {
display: block;
margin-bottom: 6px;
font-size: 26px;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--bs-emphasis-color);
}
.atn-note-txt {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* ============================================================
SUCCESS CARDS — celebratory, tinted, avatar-led
============================================================ */
.atn-win {
position: relative;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: linear-gradient(160deg, #E8F9E8 0%, var(--bs-body-bg) 62%);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.atn-win-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 12px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: #1ABE17;
font-size: 18px;
}
.atn-win-fig {
display: block;
font-size: 24px;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--bs-emphasis-color);
}
/* ============================================================
AUDIT TIMELINE — alternating, centred on a rule
============================================================ */
.atn-tl {
position: relative;
padding: 4px 0;
}
.atn-tl::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: var(--bs-border-color);
}
@media (max-width: 767.98px) {
.atn-tl::before {
left: 11px;
margin-left: 0;
}
}
.atn-tl-item {
position: relative;
width: 50%;
padding-right: 40px;
margin-bottom: 20px;
}
.atn-tl-item:nth-child(even) {
margin-left: 50%;
padding-right: 0;
padding-left: 40px;
text-align: left;
}
.atn-tl-item:nth-child(odd) {
text-align: right;
}
.atn-tl-item {
/* the knot on the centre rule */
}
.atn-tl-item::before {
content: "";
position: absolute;
top: 16px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 3px solid var(--bs-primary);
z-index: 1;
}
.atn-tl-item:nth-child(odd)::before {
right: -6px;
}
.atn-tl-item:nth-child(even)::before {
left: -7px;
}
.atn-tl-item.is-good::before {
border-color: #1ABE17;
}
.atn-tl-item.is-warn::before {
border-color: #EAB300;
}
.atn-tl-item.is-bad::before {
border-color: #E82646;
}
@media (max-width: 767.98px) {
.atn-tl-item {
width: 100%;
margin-left: 0 !important;
padding-left: 40px !important;
padding-right: 0 !important;
text-align: left !important;
}
.atn-tl-item::before {
left: 5px !important;
right: auto !important;
}
}
.atn-tl-card {
display: inline-block;
text-align: left;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.atn-tl-card:hover {
box-shadow: var(--shadow);
}
.atn-tl-title {
margin: 0 0 3px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
RESOURCE TILES — link rows with a trailing arrow
============================================================ */
.atn-res {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.atn-res:hover {
border-color: rgba(61, 94, 225, 0.3);
background: var(--bs-secondary-bg);
}
.atn-res:hover .atn-res-go {
transform: translateX(3px);
color: var(--bs-primary);
}
.atn-res-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 19px;
}
.atn-res-go {
flex-shrink: 0;
color: var(--bs-secondary-color);
font-size: 17px;
transition: var(--transition);
}
/* ============================================================
WORKSPACE OFFCANVAS — numbered stepper with a progress rule
============================================================ */
.offcanvas.offcanvas-end.atn-ws {
width: 88% !important;
max-width: 1400px !important;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-end.atn-ws {
width: 100% !important;
}
}
.offcanvas.offcanvas-end.atn-ws .offcanvas-body {
padding: 22px;
}
.atn-ws-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px;
padding: 20px 22px;
background: linear-gradient(180deg, var(--tint-primary) 0%, var(--bs-body-bg) 100%);
border-bottom: 1px solid var(--bs-border-color);
}
.atn-ws-figs {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
}
/* the stepper: numbers on a rule, panes below */
.atn-steps {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
padding: 18px 22px 20px;
border-bottom: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
list-style: none;
margin: 0;
}
@media (max-width: 767.98px) {
.atn-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 14px;
}
}
.atn-step {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
text-align: left;
transition: var(--transition);
}
.atn-step:hover {
background: var(--bs-body-bg);
}
.atn-step {
/* connector between numbers */
}
.atn-step::after {
content: "";
position: absolute;
left: calc(100% + 3px);
top: 50%;
width: 6px;
height: 2px;
background: var(--bs-border-color);
}
.atn-step.is-last::after {
display: none;
}
@media (max-width: 767.98px) {
.atn-step::after {
display: none;
}
}
.atn-step-n {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: var(--transition);
}
.atn-step-txt {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.atn-step-txt span:first-child {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.atn-step-txt span:last-child {
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.atn-step.active {
background: var(--bs-body-bg);
box-shadow: var(--shadow);
}
.atn-step.active .atn-step-n {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
/* panels inside the workspace */
.atn-panel {
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.atn-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.atn-panel-head h6 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.atn-panel-body {
padding: 16px;
}
/* a plain labelled figure used across the panels */
.atn-fig {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.3;
}
.atn-fig span:first-child {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.atn-fig span:last-child {
font-size: 14px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
/* attendance history — weekly columns, pure CSS */
.atn-cols {
display: flex;
align-items: flex-end;
gap: 6px;
height: 108px;
}
.atn-cols i {
flex: 1 1 0;
border-radius: 4px 4px 0 0;
background: linear-gradient(180deg, var(--bs-primary), rgba(61, 94, 225, 0.45));
height: calc(var(--p, 0) * 1%);
min-height: 4px;
}
.atn-cols i.is-low {
background: linear-gradient(180deg, #E82646, #F8BEC8);
}
/* checklist of completed actions */
.atn-check {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.atn-check + .atn-check {
border-top: 1px dashed var(--bs-border-color);
}
.atn-check i {
flex-shrink: 0;
margin-top: 1px;
font-size: 16px;
color: #1ABE17;
}
.atn-check.is-pending i {
color: var(--bs-secondary-color);
}
/* ============================================================
PREMIUM ALERT + EMPTY STATE
============================================================ */
.atn-alert {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
border-radius: var(--radius);
background: linear-gradient(90deg, var(--tint-primary), var(--bs-body-bg) 70%);
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--bs-primary);
}
.atn-alert-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 18px;
}
.atn-empty {
padding: 40px 24px;
text-align: center;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px dashed var(--bs-border-color);
}
.atn-empty-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 14px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 24px;
}
/* ============================================================
18. STUDENT DIGITAL TWIN — prefix `sdt-`
The third family in this library. Where the others are instruments,
this one is a dossier: a document about one person.
aix- enclosed cards, hairline dividers, chevron steppers
atn- banded surfaces, a vertical spine, stations, arc gauges
sdt- a portrait medallion, outlined chapter numerals, a date
gutter, qualitative dot scales and tinted borderless panels
Nothing here overrides an `aix-` or `atn-` rule.
============================================================ */
@media (prefers-reduced-motion: reduce) {
[class*=sdt-],
[class*=sdt-]::before,
[class*=sdt-]::after {
animation: none !important;
transition: none !important;
}
}
/* ---- chapter headings --------------------------------------------------
A large outlined numeral rather than a rule or an icon tile, so the page
reads as a bound document with chapters. */
.sdt-chapter {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 26px;
}
.sdt-chapter-n {
flex-shrink: 0;
font-size: 46px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
color: transparent;
-webkit-text-stroke: 1.5px var(--bs-border-color);
}
@media (max-width: 575.98px) {
.sdt-chapter-n {
font-size: 34px;
}
}
.sdt-chapter-title {
margin: 0;
font-size: 21px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
}
.sdt-chapter-sub {
margin: 3px 0 0;
font-size: 13px;
color: var(--bs-secondary-color);
max-width: 680px;
}
/* ---- shared small pieces ---------------------------------------------- */
.sdt-lbl {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.sdt-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
background: var(--bs-secondary-bg);
color: var(--bs-emphasis-color);
border: 1px solid var(--bs-border-color);
}
.sdt-tag i {
font-size: 13px;
}
.sdt-tag.is-ai {
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.2);
color: var(--bs-primary);
}
.sdt-tag.is-up {
background: #E8F9E8;
border-color: #D1F2D1;
color: #1ABE17;
}
.sdt-tag.is-flat {
background: #E7F1FC;
border-color: #CFE2FA;
color: #0F65CD;
}
.sdt-tag.is-down {
background: #FEF8EA;
border-color: #FDF1D6;
color: #EAB300;
}
.sdt-tag.is-alert {
background: #FDE9ED;
border-color: #FAD4DA;
color: #E82646;
}
/* qualitative scale — five dots, no numbers */
.sdt-dots {
display: inline-flex;
gap: 4px;
}
.sdt-dots i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bs-tertiary-bg);
}
.sdt-dots i.on {
background: var(--bs-primary);
}
.sdt-dots.is-up i.on {
background: #1ABE17;
}
.sdt-dots.is-down i.on {
background: #EAB300;
}
/* ============================================================
HERO — a dossier: portrait medallion, identity, vertical score column
============================================================ */
.sdt-hero {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: linear-gradient(115deg, #F2F5FF 0%, var(--bs-body-bg) 46%, var(--bs-body-bg) 100%);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
/* a soft diagonal wash across the right side, no image needed */
.sdt-hero::after {
content: "";
position: absolute;
right: -120px;
top: -140px;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(2, 168, 181, 0.12) 0%, rgba(2, 168, 181, 0) 68%);
pointer-events: none;
}
.sdt-hero-inner {
position: relative;
display: grid;
grid-template-columns: 186px minmax(0, 1fr) 172px;
gap: 30px;
padding: 28px;
}
@media (max-width: 1199.98px) {
.sdt-hero-inner {
grid-template-columns: 152px minmax(0, 1fr);
}
}
@media (max-width: 767.98px) {
.sdt-hero-inner {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
padding: 22px;
}
}
/* portrait medallion with an orbiting trait ring */
.sdt-medallion {
position: relative;
width: 152px;
height: 152px;
margin: 0 auto;
}
.sdt-medallion img {
position: absolute;
inset: 16px;
width: calc(100% - 32px);
height: calc(100% - 32px);
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--bs-body-bg);
box-shadow: var(--shadow-lift);
}
.sdt-medallion {
/* the ring */
}
.sdt-medallion::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 200deg, var(--bs-primary) 0deg calc(var(--p, 0) * 3.6deg), var(--bs-tertiary-bg) calc(var(--p, 0) * 3.6deg) 360deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}
@media (max-width: 1199.98px) {
.sdt-medallion {
width: 132px;
height: 132px;
}
}
.sdt-medallion-badge {
position: absolute;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px;
border-radius: 999px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
color: var(--bs-primary);
}
.sdt-hero-name {
margin: 0 0 4px;
font-size: 30px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--bs-emphasis-color);
}
@media (max-width: 767.98px) {
.sdt-hero-name {
font-size: 24px;
}
}
.sdt-hero-lede {
margin: 14px 0 0;
font-size: 14px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
.sdt-hero-lede b {
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* the facts sit as a definition strip, no boxes */
.sdt-hero-strip {
display: flex;
flex-wrap: wrap;
gap: 18px 30px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--bs-border-color);
}
.sdt-hero-fact {
display: flex;
flex-direction: column;
gap: 3px;
line-height: 1.3;
}
.sdt-hero-fact span:last-child {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* vertical intelligence score column */
.sdt-score {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 18px 14px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--aix-glow);
}
@media (max-width: 1199.98px) {
.sdt-score {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.sdt-score-val {
font-size: 34px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
.sdt-score-val small {
font-size: 13px;
font-weight: 500;
color: var(--bs-secondary-color);
}
/* stacked segments, filled from the bottom */
.sdt-score-col {
display: flex;
flex-direction: column-reverse;
gap: 4px;
width: 34px;
height: 132px;
}
.sdt-score-col i {
flex: 1 1 0;
border-radius: 3px;
background: var(--bs-tertiary-bg);
}
.sdt-score-col i.on {
background: linear-gradient(90deg, var(--bs-primary), rgba(61, 94, 225, 0.6));
}
@media (max-width: 1199.98px) {
.sdt-score-col {
flex-direction: row;
width: auto;
flex: 1 1 auto;
height: 26px;
margin: 0 18px;
}
}
/* ============================================================
DIGITAL TWIN — trait tiles with a strand of dots
============================================================ */
.sdt-dna {
position: relative;
display: flex;
gap: 14px;
height: 100%;
padding: 16px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid transparent;
transition: var(--transition);
}
.sdt-dna:hover {
background: var(--bs-body-bg);
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
/* the strand: a vertical run of dots down the left edge */
.sdt-strand {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding-top: 4px;
}
.sdt-strand i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bs-tertiary-bg);
}
.sdt-strand i.on {
background: var(--bs-primary);
}
.sdt-strand.is-up i.on {
background: #1ABE17;
}
.sdt-strand.is-down i.on {
background: #EAB300;
}
.sdt-strand.is-alert i.on {
background: #E82646;
}
.sdt-dna-title {
margin: 0 0 3px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sdt-dna-val {
display: block;
margin-bottom: 7px;
font-size: 15px;
font-weight: 600;
color: var(--bs-primary);
}
.sdt-dna-txt {
margin: 0;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* ============================================================
LENS — explainable AI as a two-column reading panel
============================================================ */
.sdt-lens {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.sdt-lens:hover {
box-shadow: var(--shadow-lift);
}
@media (max-width: 767.98px) {
.sdt-lens {
grid-template-columns: minmax(0, 1fr);
}
}
/* left face carries the observation and its direction */
.sdt-lens-face {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
padding: 20px;
background: var(--bs-secondary-bg);
border-right: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.sdt-lens-face {
border-right: 0;
border-bottom: 1px solid var(--bs-border-color);
}
}
.sdt-lens-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
font-size: 21px;
color: var(--bs-primary);
}
.sdt-lens-ic.is-up {
color: #1ABE17;
}
.sdt-lens-ic.is-down {
color: #EAB300;
}
.sdt-lens-ic.is-alert {
color: #E82646;
}
.sdt-lens-obs {
margin: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
color: var(--bs-emphasis-color);
}
.sdt-lens-body {
padding: 20px;
}
.sdt-lens-why {
margin: 0 0 14px;
font-size: 13.5px;
line-height: 1.68;
color: var(--bs-secondary-color);
}
/* evidence reads as a short cited list */
.sdt-ev {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 7px 0;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.sdt-ev + .sdt-ev {
border-top: 1px dashed var(--bs-border-color);
}
.sdt-ev i {
flex-shrink: 0;
margin-top: 2px;
font-size: 14px;
color: var(--bs-secondary-color);
}
.sdt-lens-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
JOURNEY — a wide date gutter with the line between
============================================================ */
.sdt-journey {
position: relative;
}
.sdt-leg {
position: relative;
display: grid;
grid-template-columns: 116px 34px minmax(0, 1fr);
gap: 0;
}
@media (max-width: 575.98px) {
.sdt-leg {
grid-template-columns: 0 30px minmax(0, 1fr);
}
}
.sdt-leg-date {
padding: 16px 16px 16px 0;
text-align: right;
line-height: 1.35;
}
.sdt-leg-date span:first-child {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sdt-leg-date span:last-child {
display: block;
font-size: 11px;
color: var(--bs-secondary-color);
}
@media (max-width: 575.98px) {
.sdt-leg-date {
display: none;
}
}
/* the rule and its knot live in the middle column */
.sdt-leg-rule {
position: relative;
}
.sdt-leg-rule::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: var(--bs-border-color);
}
.sdt-leg-rule::after {
content: "";
position: absolute;
left: 50%;
top: 22px;
transform: translateX(-50%);
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 3px solid var(--bs-primary);
}
.sdt-leg:first-child .sdt-leg-rule::before {
top: 22px;
}
.sdt-leg:last-child .sdt-leg-rule::before {
bottom: calc(100% - 22px);
}
.sdt-leg.is-good .sdt-leg-rule::after {
border-color: #1ABE17;
}
.sdt-leg.is-warn .sdt-leg-rule::after {
border-color: #EAB300;
}
.sdt-leg.is-alert .sdt-leg-rule::after {
border-color: #E82646;
}
.sdt-leg.is-now .sdt-leg-rule::after {
box-shadow: 0 0 0 4px var(--tint-primary);
}
.sdt-leg-card {
margin: 8px 0 8px 16px;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid transparent;
transition: var(--transition);
}
.sdt-leg-card:hover {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
box-shadow: var(--shadow);
}
.sdt-leg-title {
margin: 0 0 3px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
LEARNING INTELLIGENCE — words, not figures
============================================================ */
.sdt-learn {
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.sdt-learn:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.sdt-learn-head {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 12px;
}
.sdt-learn-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 17px;
}
.sdt-learn-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sdt-learn-verdict {
display: block;
margin-bottom: 8px;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
}
.sdt-learn-txt {
margin: 0 0 14px;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* ============================================================
RECOMMENDATIONS — a ribbon down the left edge
============================================================ */
.sdt-rec {
position: relative;
height: 100%;
padding: 18px 18px 18px 24px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.sdt-rec::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: var(--bs-primary);
}
.sdt-rec.is-critical::before {
background: #E82646;
}
.sdt-rec.is-high::before {
background: #EAB300;
}
.sdt-rec.is-normal::before {
background: #0F65CD;
}
.sdt-rec:hover {
box-shadow: var(--shadow-lift);
}
.sdt-rec-title {
margin: 0 0 5px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sdt-rec-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 14px 0;
padding: 12px 0;
border-top: 1px solid var(--bs-border-color);
border-bottom: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.sdt-rec-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.sdt-cell {
display: flex;
flex-direction: column;
gap: 3px;
line-height: 1.3;
}
.sdt-cell span:last-child {
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
GROWTH STORY — quoted narrative cards
============================================================ */
.sdt-story {
position: relative;
height: 100%;
padding: 20px 20px 20px 22px;
border-radius: var(--radius);
background: linear-gradient(165deg, var(--tint-primary) 0%, var(--bs-body-bg) 58%);
border: 1px solid var(--bs-border-color);
overflow: hidden;
/* an opening quotation mark set in the corner */
}
.sdt-story::before {
content: "“";
position: absolute;
right: 12px;
top: -14px;
font-size: 88px;
line-height: 1;
font-weight: 700;
color: var(--bs-border-color);
pointer-events: none;
}
.sdt-story.is-good {
background: linear-gradient(165deg, #E8F9E8 0%, var(--bs-body-bg) 58%);
}
.sdt-story.is-warn {
background: linear-gradient(165deg, #FEF8EA 0%, var(--bs-body-bg) 58%);
}
.sdt-story-title {
position: relative;
margin: 0 0 10px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sdt-story-txt {
position: relative;
margin: 0;
font-size: 13px;
line-height: 1.68;
color: var(--bs-secondary-color);
}
/* ============================================================
COPILOT — launcher rows with a trailing arrow
============================================================ */
.sdt-do {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 15px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.sdt-do:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--aix-glow);
}
.sdt-do:hover .sdt-do-ic {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.sdt-do:hover .sdt-do-go {
transform: translateX(3px);
color: var(--bs-primary);
}
.sdt-do-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
border: 1px solid transparent;
color: var(--bs-primary);
font-size: 19px;
transition: var(--transition);
}
.sdt-do-go {
flex-shrink: 0;
font-size: 17px;
color: var(--bs-secondary-color);
transition: var(--transition);
}
/* ============================================================
FEED — a time gutter down the left
============================================================ */
.sdt-feed {
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.sdt-feed-row {
display: grid;
grid-template-columns: 96px 40px minmax(0, 1fr);
align-items: center;
transition: var(--transition);
}
.sdt-feed-row + .sdt-feed-row {
border-top: 1px solid var(--bs-border-color);
}
.sdt-feed-row:hover {
background: var(--bs-secondary-bg);
}
@media (max-width: 575.98px) {
.sdt-feed-row {
grid-template-columns: 64px 36px minmax(0, 1fr);
}
}
.sdt-feed-when {
padding: 14px 12px;
text-align: right;
font-size: 11.5px;
line-height: 1.35;
color: var(--bs-secondary-color);
border-right: 1px solid var(--bs-border-color);
}
.sdt-feed-when b {
display: block;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sdt-feed-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 0 auto;
border-radius: 50%;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 14px;
}
.sdt-feed-ic.is-good {
background: #E8F9E8;
color: #1ABE17;
}
.sdt-feed-ic.is-warn {
background: #FEF8EA;
color: #EAB300;
}
.sdt-feed-txt {
padding: 13px 16px;
}
.sdt-feed-txt p {
margin: 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.sdt-feed-txt small {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ============================================================
OPPORTUNITIES — poster tiles with a tinted cap
============================================================ */
.sdt-opp {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.sdt-opp:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
}
.sdt-opp-cap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 74px;
background: linear-gradient(135deg, var(--bs-primary), rgba(61, 94, 225, 0.62));
color: #fff;
font-size: 28px;
/* a faint ring behind the glyph */
}
.sdt-opp-cap::before {
content: "";
position: absolute;
width: 68px;
height: 68px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.sdt-opp-cap.is-teal {
background: linear-gradient(135deg, #02a8b5, rgba(2, 168, 181, 0.62));
}
.sdt-opp-cap.is-amber {
background: linear-gradient(135deg, #EAB300, rgba(234, 179, 0, 0.62));
}
.sdt-opp-cap.is-green {
background: linear-gradient(135deg, #1ABE17, rgba(26, 190, 23, 0.62));
}
.sdt-opp-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 16px;
}
.sdt-opp-title {
margin: 0 0 5px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
WORKSPACE OFFCANVAS — ribbon stepper with an underline indicator
============================================================ */
.offcanvas.offcanvas-end.sdt-ws {
width: 85% !important;
max-width: 1380px !important;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-end.sdt-ws {
width: 100% !important;
}
}
.offcanvas.offcanvas-end.sdt-ws .offcanvas-body {
padding: 22px;
}
.sdt-ws-head {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding: 20px 22px;
background: linear-gradient(115deg, #F2F5FF 0%, var(--bs-body-bg) 60%);
border-bottom: 1px solid var(--bs-border-color);
}
.sdt-ribbon {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
list-style: none;
margin: 0;
padding: 0 22px;
background: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.sdt-ribbon {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.sdt-rib {
position: relative;
display: block;
width: 100%;
padding: 14px 10px;
border: 0;
background: transparent;
text-align: left;
transition: var(--transition);
/* the underline indicator */
}
.sdt-rib::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: -1px;
height: 2px;
background: transparent;
transition: var(--transition);
}
.sdt-rib span:first-child {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.sdt-rib span:last-child {
display: block;
margin-top: 2px;
font-size: 14px;
font-weight: 600;
color: var(--bs-secondary-color);
}
.sdt-rib:hover span:last-child {
color: var(--bs-emphasis-color);
}
.sdt-rib.active::after {
background: var(--bs-primary);
}
.sdt-rib.active span:first-child {
color: var(--bs-primary);
}
.sdt-rib.active span:last-child {
color: var(--bs-emphasis-color);
}
/* panels inside the workspace */
.sdt-box {
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.sdt-box-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 14px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* a labelled line used throughout the workspace */
.sdt-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.sdt-line + .sdt-line {
border-top: 1px dashed var(--bs-border-color);
}
.sdt-line b {
font-weight: 600;
}
/* thin labelled meter */
.sdt-meter {
display: block;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, var(--bs-primary) 0 calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) calc(var(--p, 0) * 1%) 100%);
}
.sdt-meter.is-good {
background: linear-gradient(90deg, #1ABE17 0 calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) calc(var(--p, 0) * 1%) 100%);
}
/* ============================================================
PREMIUM ACCORDION + EMPTY STATE
============================================================ */
.sdt-acc .accordion-item {
margin-bottom: 12px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius) !important;
overflow: hidden;
background: var(--bs-body-bg);
}
.sdt-acc .accordion-button {
padding: 15px 18px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
background: var(--bs-body-bg);
box-shadow: none;
}
.sdt-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.sdt-acc .accordion-button:focus {
box-shadow: none;
}
.sdt-acc .accordion-body {
padding: 16px 18px;
font-size: 13px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
.sdt-empty {
padding: 44px 24px;
text-align: center;
border-radius: var(--radius);
background: radial-gradient(80% 100% at 50% 0%, var(--tint-primary) 0%, transparent 70%), var(--bs-body-bg);
border: 1px dashed var(--bs-border-color);
}
.sdt-empty-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin-bottom: 14px;
border-radius: 18px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
color: var(--bs-primary);
font-size: 25px;
}
/* ============================================================
19. TIMETABLE OPTIMIZATION — prefix `tto-`
The fourth family. Its subject is a grid of time, so its language is
built from slots, tracks and segments rather than from cards about people.
aix- enclosed cards, hairline dividers, chevron steppers
atn- banded surfaces, a vertical spine, stations, arc gauges
sdt- portrait medallion, chapter numerals, date gutter, dot scales
tto- slot grids, bracketed section marks, before/after bars,
collision headers, a horizontal track and segmented steppers
Nothing here overrides a rule from the families above.
============================================================ */
@media (prefers-reduced-motion: reduce) {
[class*=tto-],
[class*=tto-]::before,
[class*=tto-]::after {
animation: none !important;
transition: none !important;
}
}
/* ---- section marks ----------------------------------------------------
A bracketed number set inline with the title and a rule running to the
right edge, so sections read like console headings. */
.tto-mark {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
@media (max-width: 767.98px) {
.tto-mark {
flex-wrap: wrap;
}
}
.tto-mark-n {
flex-shrink: 0;
padding: 5px 11px;
border-radius: 6px;
background: var(--bs-emphasis-color);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
font-variant-numeric: tabular-nums;
}
.tto-mark-title {
margin: 0;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
white-space: nowrap;
}
.tto-mark-rule {
flex: 1 1 auto;
height: 1px;
background: var(--bs-border-color);
}
@media (max-width: 767.98px) {
.tto-mark-rule {
display: none;
}
}
.tto-mark-sub {
margin: -16px 0 24px;
font-size: 13px;
color: var(--bs-secondary-color);
max-width: 700px;
}
/* ---- shared pieces ----------------------------------------------------- */
.tto-lbl {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.tto-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 5px;
font-size: 11px;
font-weight: 600;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-emphasis-color);
white-space: nowrap;
}
.tto-chip i {
font-size: 13px;
}
.tto-chip.is-ai {
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.2);
color: var(--bs-primary);
}
.tto-chip.is-crit {
background: #FDE9ED;
border-color: #FAD4DA;
color: #E82646;
}
.tto-chip.is-warn {
background: #FEF8EA;
border-color: #FDF1D6;
color: #EAB300;
}
.tto-chip.is-info {
background: #E7F1FC;
border-color: #CFE2FA;
color: #0F65CD;
}
.tto-chip.is-ok {
background: #E8F9E8;
border-color: #D1F2D1;
color: #1ABE17;
}
/* confidence readout: figure with a filled rule beneath */
.tto-conf {
display: inline-flex;
flex-direction: column;
gap: 4px;
min-width: 58px;
}
.tto-conf b {
font-size: 14px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
line-height: 1;
}
.tto-conf::after {
content: "";
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--bs-primary) 0 calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) calc(var(--p, 0) * 1%) 100%);
}
/* ============================================================
HERO — copy on the left, a live slot grid on the right
============================================================ */
.tto-hero {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: linear-gradient(135deg, var(--bs-body-bg) 0%, var(--bs-body-bg) 52%, #F2F5FF 100%);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
/* a faint ruled backdrop, like a period grid seen through paper */
.tto-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(90deg, var(--bs-border-color) 0 1px, transparent 1px 84px);
opacity: 0.5;
mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
pointer-events: none;
}
.tto-hero-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 34px;
padding: 28px;
}
@media (max-width: 1299.98px) {
.tto-hero-inner {
grid-template-columns: minmax(0, 1fr);
gap: 26px;
}
}
@media (max-width: 575.98px) {
.tto-hero-inner {
padding: 22px;
}
}
.tto-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border-radius: 6px;
background: var(--bs-emphasis-color);
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tto-hero-title {
margin: 14px 0 10px;
font-size: 30px;
line-height: 1.22;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
.tto-hero-title em {
font-style: normal;
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 767.98px) {
.tto-hero-title {
font-size: 24px;
}
}
/* status readouts on one ruled line, no boxes */
.tto-hero-read {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 20px;
padding: 16px 0;
border-top: 1px solid var(--bs-border-color);
border-bottom: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.tto-hero-read {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.tto-read {
display: flex;
flex-direction: column;
gap: 4px;
line-height: 1.25;
}
.tto-read b {
font-size: 19px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.tto-read b small {
font-size: 12px;
font-weight: 500;
color: var(--bs-secondary-color);
}
/* ---- the illustration: a slot grid with conflicts lit up ---- */
.tto-grid-art {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--aix-glow);
}
.tto-slots {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 5px;
}
.tto-slots i {
aspect-ratio: 1;
border-radius: 4px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
}
.tto-slots i.f {
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.22);
}
.tto-slots i.g {
background: rgba(61, 94, 225, 0.55);
border-color: transparent;
}
.tto-slots i.x {
background: #E82646;
border-color: transparent;
animation: tto-flash 2.6s ease-in-out infinite;
}
.tto-slots i.w {
background: #EAB300;
border-color: transparent;
}
.tto-slots i.o {
background: #1ABE17;
border-color: transparent;
}
@keyframes tto-flash {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
.tto-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
font-size: 11px;
color: var(--bs-secondary-color);
}
.tto-legend span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.tto-legend i {
width: 9px;
height: 9px;
border-radius: 2px;
background: var(--bs-tertiary-bg);
}
.tto-legend i.f {
background: var(--tint-primary);
}
.tto-legend i.g {
background: rgba(61, 94, 225, 0.55);
}
.tto-legend i.x {
background: #E82646;
}
.tto-legend i.o {
background: #1ABE17;
}
/* ============================================================
OPTIMIZATION CARDS — a before/after pair of bars
============================================================ */
.tto-opt {
display: flex;
flex-direction: column;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.tto-opt:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.tto-opt-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* two stacked bars, current then optimized, on a shared scale */
.tto-ba {
display: flex;
flex-direction: column;
gap: 9px;
margin: 14px 0;
padding: 14px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
}
.tto-ba-row {
display: grid;
grid-template-columns: 68px minmax(0, 1fr) 44px;
align-items: center;
gap: 10px;
font-size: 11px;
color: var(--bs-secondary-color);
}
.tto-ba-row b {
text-align: right;
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.tto-bar {
height: 8px;
border-radius: 4px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.tto-bar::before {
content: "";
display: block;
height: 100%;
width: calc(var(--p, 0) * 1%);
border-radius: 4px;
background: #D1D6DE;
}
.tto-bar.is-after::before {
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
}
.tto-opt-foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--bs-border-color);
}
.tto-gain {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-size: 19px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: #1ABE17;
}
.tto-gain small {
font-size: 11px;
font-weight: 500;
color: var(--bs-secondary-color);
}
/* ============================================================
EXPLAINABLE AI — a premium accordion
============================================================ */
.tto-acc .accordion-item {
margin-bottom: 12px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--radius) !important;
overflow: hidden;
transition: var(--transition);
}
.tto-acc .accordion-item:has(.accordion-button:not(.collapsed)) {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow-lift);
}
.tto-acc .accordion-button {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
background: var(--bs-body-bg);
box-shadow: none;
}
.tto-acc .accordion-button:not(.collapsed) {
background: var(--bs-secondary-bg);
color: var(--bs-emphasis-color);
}
.tto-acc .accordion-button:focus {
box-shadow: none;
}
.tto-acc .accordion-button::after {
margin-left: 0;
flex-shrink: 0;
}
.tto-acc .accordion-body {
padding: 18px;
border-top: 1px solid var(--bs-border-color);
}
/* the severity square that leads each accordion row */
.tto-acc-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 18px;
}
.tto-acc-ic.is-crit {
background: #FDE9ED;
color: #E82646;
}
.tto-acc-ic.is-warn {
background: #FEF8EA;
color: #EAB300;
}
.tto-acc-ic.is-info {
background: #E7F1FC;
color: #0F65CD;
}
/* evidence lines inside the accordion body */
.tto-ev {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 8px 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.tto-ev + .tto-ev {
border-top: 1px dashed var(--bs-border-color);
}
.tto-ev i {
flex-shrink: 0;
margin-top: 2px;
font-size: 15px;
color: var(--bs-secondary-color);
}
/* a boxed conclusion inside the body */
.tto-fix {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
border: 1px solid rgba(61, 94, 225, 0.18);
}
.tto-fix i {
flex-shrink: 0;
margin-top: 1px;
font-size: 18px;
color: var(--bs-primary);
}
/* ============================================================
CONFLICT CARDS — a collision header, two sides meeting
============================================================ */
.tto-clash {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.tto-clash:hover {
box-shadow: var(--shadow-lift);
}
.tto-clash-head {
display: grid;
grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 16px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.tto-side {
min-width: 0;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
text-align: center;
}
.tto-side span:first-child {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.tto-side span:last-child {
display: block;
margin-top: 2px;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* the collision glyph between the two sides */
.tto-vs {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: 0 auto;
border-radius: 50%;
background: #FDE9ED;
border: 1px solid #FAD4DA;
color: #E82646;
font-size: 17px;
}
.tto-vs.is-warn {
background: #FEF8EA;
border-color: #FDF1D6;
color: #EAB300;
}
.tto-clash-body {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1 1 auto;
padding: 16px;
}
.tto-clash-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
OPPORTUNITY ROWS — a figure on the right, a slim gauge under
============================================================ */
.tto-opp {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 15px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.tto-opp:hover {
border-color: rgba(61, 94, 225, 0.28);
background: var(--bs-secondary-bg);
}
.tto-opp-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 18px;
}
.tto-opp-fig {
flex-shrink: 0;
text-align: right;
}
.tto-opp-fig b {
display: block;
font-size: 17px;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1;
color: #1ABE17;
}
.tto-opp-fig span {
display: block;
margin-top: 3px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* ============================================================
SCHEDULE INTELLIGENCE — one feature panel, then compact rows
============================================================ */
.tto-feature {
position: relative;
height: 100%;
padding: 24px;
border-radius: var(--radius);
background: radial-gradient(120% 100% at 100% 0%, rgba(2, 168, 181, 0.14) 0%, transparent 60%), linear-gradient(160deg, var(--bs-primary) 0%, #202C4B 100%);
color: #fff;
overflow: hidden;
}
.tto-feature::after {
content: "";
position: absolute;
right: -60px;
bottom: -60px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.16);
}
.tto-feature-fig {
display: block;
margin: 14px 0 8px;
font-size: 40px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.tto-note {
display: flex;
align-items: flex-start;
gap: 12px;
height: 100%;
padding: 15px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.tto-note:hover {
box-shadow: var(--shadow);
}
.tto-note i {
flex-shrink: 0;
margin-top: 2px;
font-size: 17px;
color: var(--bs-primary);
}
.tto-note-title {
margin: 0 0 3px;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
COPILOT — action bars with a trailing shortcut chip
============================================================ */
.tto-do {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.tto-do + .tto-do {
margin-top: 10px;
}
.tto-do:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--aix-glow);
}
.tto-do:hover .tto-do-ic {
background: var(--bs-primary);
color: #fff;
}
.tto-do-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 18px;
transition: var(--transition);
}
/* keyboard-style shortcut mark */
.tto-key {
flex-shrink: 0;
padding: 3px 8px;
border-radius: 5px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
border-bottom-width: 2px;
font-size: 11px;
font-weight: 600;
color: var(--bs-secondary-color);
}
/* ============================================================
HORIZONTAL TIMELINE — a track running left to right
============================================================ */
.tto-track {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 1199.98px) {
.tto-track {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.tto-track {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.tto-track {
grid-template-columns: minmax(0, 1fr);
}
}
.tto-stop {
position: relative;
padding-top: 40px;
/* the rail segment reaching to the next stop */
}
.tto-stop::before {
content: "";
position: absolute;
left: calc(50% + 16px);
right: calc(-50% + 16px);
top: 15px;
height: 2px;
background: var(--bs-tertiary-bg);
}
.tto-stop:last-child::before {
display: none;
}
.tto-stop.is-done::before {
background: #1ABE17;
}
.tto-stop {
/* the node */
}
.tto-stop::after {
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--bs-tertiary-bg);
}
.tto-stop.is-done::after {
background: #1ABE17;
border-color: #1ABE17;
}
.tto-stop.is-now::after {
border-color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
@media (max-width: 1199.98px) {
.tto-stop::before {
display: none;
}
}
/* the glyph sits inside the node */
.tto-stop-ic {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
font-size: 15px;
color: var(--bs-secondary-color);
}
.tto-stop.is-done .tto-stop-ic {
color: #fff;
}
.tto-stop.is-now .tto-stop-ic {
color: var(--bs-primary);
}
.tto-stop-card {
padding: 13px 14px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid transparent;
transition: var(--transition);
}
.tto-stop-card:hover {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
box-shadow: var(--shadow);
}
.tto-stop-title {
margin: 0 0 3px;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
RESOURCE ROWS — a segmented availability strip
============================================================ */
.tto-res {
display: grid;
grid-template-columns: 210px minmax(0, 1fr) 116px;
align-items: center;
gap: 18px;
padding: 14px 16px;
transition: var(--transition);
}
.tto-res + .tto-res {
border-top: 1px solid var(--bs-border-color);
}
.tto-res:hover {
background: var(--bs-secondary-bg);
}
@media (max-width: 991.98px) {
.tto-res {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
}
.tto-res-name {
display: flex;
align-items: center;
gap: 11px;
}
.tto-res-name i {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 16px;
}
/* eight periods across, coloured by load */
.tto-strip {
display: flex;
gap: 3px;
}
.tto-strip i {
flex: 1 1 0;
height: 22px;
border-radius: 3px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
}
.tto-strip i.l1 {
background: var(--tint-primary);
border-color: transparent;
}
.tto-strip i.l2 {
background: rgba(61, 94, 225, 0.45);
border-color: transparent;
}
.tto-strip i.l3 {
background: var(--bs-primary);
border-color: transparent;
}
.tto-strip i.ov {
background: #E82646;
border-color: transparent;
}
.tto-strip i.fr {
background: #E8F9E8;
border-color: #D1F2D1;
}
/* ============================================================
RECOMMENDATIONS — rank chip, body, apply footer
============================================================ */
.tto-rec {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.tto-rec:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.tto-rec-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--bs-border-color);
}
.tto-rec-rank {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 6px;
background: var(--bs-emphasis-color);
color: #fff;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.tto-rec-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.tto-rec-body {
flex: 1 1 auto;
padding: 16px;
}
.tto-rec-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--bs-border-color);
}
.tto-cell {
display: flex;
flex-direction: column;
gap: 3px;
line-height: 1.3;
}
.tto-cell span:last-child {
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
WORKSPACE OFFCANVAS — a segmented stepper that reads as progress
============================================================ */
.offcanvas.offcanvas-end.tto-ws {
width: 90% !important;
max-width: 1460px !important;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-end.tto-ws {
width: 100% !important;
}
}
.offcanvas.offcanvas-end.tto-ws .offcanvas-body {
padding: 22px;
}
.tto-ws-head {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding: 20px 22px;
background: linear-gradient(135deg, var(--bs-body-bg) 0%, #F2F5FF 100%);
border-bottom: 1px solid var(--bs-border-color);
}
.tto-ws-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
color: var(--bs-primary);
font-size: 24px;
}
/* the stepper is one continuous bar cut into five segments */
.tto-seg {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
list-style: none;
margin: 0;
padding: 16px 22px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.tto-seg {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.tto-segbtn {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
text-align: left;
transition: var(--transition);
/* the fill rule along the bottom edge */
}
.tto-segbtn::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 6px;
height: 2px;
border-radius: 1px;
background: var(--bs-tertiary-bg);
transition: var(--transition);
}
.tto-segbtn:hover {
border-color: var(--bs-border-color);
}
.tto-segbtn.active {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow);
}
.tto-segbtn.active::after {
background: var(--bs-primary);
}
.tto-segbtn.active .tto-segbtn-n {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.tto-segbtn-n {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: var(--transition);
}
.tto-segbtn-txt {
display: flex;
flex-direction: column;
min-width: 0;
padding-bottom: 6px;
line-height: 1.25;
}
.tto-segbtn-txt span:first-child {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.tto-segbtn-txt span:last-child {
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* panels inside the workspace */
.tto-panel {
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.tto-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.tto-panel-head h6 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.tto-panel-body {
padding: 16px;
}
.tto-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.tto-line + .tto-line {
border-top: 1px dashed var(--bs-border-color);
}
.tto-line b {
font-weight: 600;
}
/* ============================================================
EMPTY STATE
============================================================ */
.tto-empty {
padding: 42px 24px;
text-align: center;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px dashed var(--bs-border-color);
}
.tto-empty-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 14px;
border-radius: var(--radius);
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 25px;
}
/* ============================================================
20. HOMEWORK EVALUATION — prefix `hwk-`
The fifth family. Its subject is marked work, so its language is drawn
from the physical review studio: ruled paper, margin bars, grade seals,
rubric strips and hanging annotation markers.
aix- enclosed cards, hairline dividers, chevron steppers
atn- banded surfaces, a vertical spine, stations, arc gauges
sdt- portrait medallion, chapter numerals, date gutter, dot scales
tto- slot grids, bracketed marks, before/after bars, a horizontal track
hwk- paper sheets, margin rules, grade seals, rubric strips,
highlighted headings and hanging annotation markers
Nothing here overrides a rule from the families above.
============================================================ */
@media (prefers-reduced-motion: reduce) {
[class*=hwk-],
[class*=hwk-]::before,
[class*=hwk-]::after {
animation: none !important;
transition: none !important;
}
}
/* ---- section headings -------------------------------------------------
A kicker above and a marker highlight sitting behind the last line of
the title, the way a reviewer would underline a heading. */
.hwk-head {
margin-bottom: 26px;
}
.hwk-kicker {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bs-primary);
}
.hwk-kicker::before {
content: "";
width: 22px;
height: 2px;
background: var(--bs-primary);
}
.hwk-title {
position: relative;
display: inline;
margin: 0;
font-size: 21px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
background-image: linear-gradient(180deg, transparent 62%, var(--tint-primary) 62%);
background-repeat: no-repeat;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.hwk-sub {
margin: 10px 0 0;
font-size: 13px;
color: var(--bs-secondary-color);
max-width: 700px;
}
/* ---- shared pieces ----------------------------------------------------- */
.hwk-lbl {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.hwk-tag {
/* geometry, typography and surface come from the shared badge component */
}
.hwk-tag i {
font-size: 13px;
}
.hwk-tag.is-ai {
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.2);
color: var(--bs-primary);
}
.hwk-tag.is-strong {
background: #E8F9E8;
border-color: #D1F2D1;
color: #1ABE17;
}
.hwk-tag.is-weak {
background: #FDE9ED;
border-color: #FAD4DA;
color: #E82646;
}
.hwk-tag.is-mid {
background: #FEF8EA;
border-color: #FDF1D6;
color: #EAB300;
}
.hwk-tag.is-note {
background: #E7F1FC;
border-color: #CFE2FA;
color: #0F65CD;
}
/* the grade seal — a stamped circle */
.hwk-seal {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
flex-shrink: 0;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--bs-primary);
color: var(--bs-primary);
line-height: 1;
}
.hwk-seal b {
font-size: 18px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.hwk-seal span {
margin-top: 2px;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
}
.hwk-seal.is-strong {
border-color: #1ABE17;
color: #1ABE17;
}
.hwk-seal.is-mid {
border-color: #EAB300;
color: #EAB300;
}
.hwk-seal.is-weak {
border-color: #E82646;
color: #E82646;
}
/* rubric strip — five criteria, filled by quality */
.hwk-rubric {
display: flex;
gap: 4px;
}
.hwk-rubric i {
flex: 1 1 0;
height: 5px;
border-radius: 3px;
background: var(--bs-tertiary-bg);
}
.hwk-rubric i.on {
background: var(--bs-primary);
}
.hwk-rubric i.mid {
background: #EAB300;
}
.hwk-rubric i.low {
background: #E82646;
}
/* confidence readout */
.hwk-conf {
display: inline-flex;
flex-direction: column;
gap: 4px;
min-width: 56px;
}
.hwk-conf b {
font-size: 14px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
line-height: 1;
}
.hwk-conf::after {
content: "";
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--bs-primary) 0 calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) calc(var(--p, 0) * 1%) 100%);
}
/* ============================================================
HERO — a review desk: ruled sheet on the left, paper stack on the right
============================================================ */
.hwk-studio {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: linear-gradient(180deg, #F2F5FF 0%, var(--bs-body-bg) 34%), var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
/* ruled lines, faint, like the page underneath */
.hwk-studio::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(180deg, transparent 0 33px, var(--bs-border-color) 33px 34px);
opacity: 0.45;
mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
pointer-events: none;
}
.hwk-studio-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 34px;
padding: 28px 28px 28px 34px;
/* the margin rule down the left edge */
}
.hwk-studio-inner::before {
content: "";
position: absolute;
left: 16px;
top: 20px;
bottom: 20px;
width: 2px;
border-radius: 1px;
background: #F8BEC8;
}
@media (max-width: 1299.98px) {
.hwk-studio-inner {
grid-template-columns: minmax(0, 1fr);
gap: 26px;
}
}
@media (max-width: 575.98px) {
.hwk-studio-inner {
padding: 22px 20px 22px 28px;
}
}
.hwk-studio-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border-radius: 999px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.hwk-studio-title {
margin: 14px 0 10px;
font-size: 30px;
line-height: 1.22;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
.hwk-studio-title em {
font-style: normal;
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 767.98px) {
.hwk-studio-title {
font-size: 24px;
}
}
/* the status line reads as a marking record, divided by upright rules */
.hwk-record {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
overflow: hidden;
}
.hwk-record-cell {
flex: 1 1 130px;
padding: 13px 16px;
line-height: 1.3;
}
.hwk-record-cell + .hwk-record-cell {
border-left: 1px solid var(--bs-border-color);
}
.hwk-record-cell b {
display: block;
margin-top: 3px;
font-size: 19px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.hwk-record-cell b small {
font-size: 12px;
font-weight: 500;
color: var(--bs-secondary-color);
}
@media (max-width: 575.98px) {
.hwk-record-cell {
flex-basis: 50%;
}
.hwk-record-cell:nth-child(odd) {
border-left: 0;
}
.hwk-record-cell:nth-child(n+3) {
border-top: 1px solid var(--bs-border-color);
}
}
/* ---- illustration: a stack of marked sheets ---- */
.hwk-stack {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 20px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--aix-glow);
}
.hwk-sheets {
position: relative;
height: 148px;
}
/* three offset sheets, the front one carrying the seal */
.hwk-sheet {
position: absolute;
inset: 0;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
.hwk-sheet.s1 {
transform: rotate(-5deg) translateY(6px);
opacity: 0.55;
}
.hwk-sheet.s2 {
transform: rotate(3deg) translateY(3px);
opacity: 0.8;
}
.hwk-sheet.s3 {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
padding: 18px;
}
/* skeleton lines standing in for written work */
.hwk-ruled {
display: block;
height: 6px;
border-radius: 3px;
background: var(--bs-tertiary-bg);
width: calc(var(--p, 100) * 1%);
}
.hwk-ruled.is-mark {
background: var(--tint-primary);
}
.hwk-sheet-seal {
position: absolute;
right: -10px;
top: -12px;
transform: rotate(-12deg);
box-shadow: var(--shadow);
}
/* ============================================================
SUBMISSION CARDS — a paper head, a rubric strip, an action foot
============================================================ */
.hwk-sub {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.hwk-sub:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
/* the head is the sheet: ruled, with the seal stamped at the right */
.hwk-sub-head {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
background: repeating-linear-gradient(180deg, transparent 0 21px, var(--bs-border-color) 21px 22px), var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
/* margin rule */
}
.hwk-sub-head::before {
content: "";
position: absolute;
left: 8px;
top: 10px;
bottom: 10px;
width: 2px;
border-radius: 1px;
background: #F8BEC8;
}
.hwk-sub-title {
margin: 0 0 2px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.hwk-sub-body {
display: flex;
flex-direction: column;
gap: 13px;
flex: 1 1 auto;
padding: 16px;
}
.hwk-sub-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--bs-border-color);
border-bottom: 1px solid var(--bs-border-color);
}
.hwk-cell {
display: flex;
flex-direction: column;
gap: 3px;
line-height: 1.3;
min-width: 0;
}
.hwk-cell span:last-child {
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.hwk-sub-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
.hwk-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 50%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 16px;
transition: var(--transition);
}
.hwk-ico:hover {
color: var(--bs-primary);
border-color: var(--bs-primary);
background: var(--tint-primary);
}
/* ============================================================
ANNOTATION CARDS — explainable AI as a marked-up page
A hanging marker in the margin, then three reading columns.
============================================================ */
.hwk-note {
position: relative;
padding: 20px 20px 20px 26px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.hwk-note + .hwk-note {
margin-top: 16px;
}
.hwk-note {
/* the coloured margin bar */
}
.hwk-note::before {
content: "";
position: absolute;
left: 10px;
top: 20px;
bottom: 20px;
width: 3px;
border-radius: 2px;
background: var(--bs-primary);
}
.hwk-note.is-strong::before {
background: #1ABE17;
}
.hwk-note.is-mid::before {
background: #EAB300;
}
.hwk-note.is-weak::before {
background: #E82646;
}
.hwk-note:hover {
box-shadow: var(--shadow-lift);
}
.hwk-note-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding-bottom: 14px;
margin-bottom: 16px;
border-bottom: 1px solid var(--bs-border-color);
}
.hwk-note-obs {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* three reading columns inside the note */
.hwk-cols {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: 24px;
}
@media (max-width: 991.98px) {
.hwk-cols {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
}
@media (min-width: 992px) {
.hwk-col-rule {
padding-left: 24px;
border-left: 1px dashed var(--bs-border-color);
}
}
.hwk-ev {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 7px 0;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.hwk-ev + .hwk-ev {
border-top: 1px dashed var(--bs-border-color);
}
.hwk-ev i {
flex-shrink: 0;
margin-top: 2px;
font-size: 14px;
color: var(--bs-secondary-color);
}
/* ============================================================
LEARNING GAP — a four-rung priority ladder
============================================================ */
.hwk-gap {
display: flex;
flex-direction: column;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.hwk-gap:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.hwk-gap-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* the ladder: four rungs, filled to the priority level */
.hwk-ladder {
display: flex;
align-items: flex-end;
gap: 4px;
height: 26px;
}
.hwk-ladder i {
flex: 1 1 0;
border-radius: 2px 2px 0 0;
background: var(--bs-tertiary-bg);
}
.hwk-ladder i:nth-child(1) {
height: 40%;
}
.hwk-ladder i:nth-child(2) {
height: 60%;
}
.hwk-ladder i:nth-child(3) {
height: 80%;
}
.hwk-ladder i:nth-child(4) {
height: 100%;
}
.hwk-ladder i.on {
background: var(--bs-primary);
}
.hwk-ladder i.on.is-mid {
background: #EAB300;
}
.hwk-ladder i.on.is-weak {
background: #E82646;
}
/* ============================================================
FEEDBACK TILES — a priority ribbon across the top
============================================================ */
.hwk-fb {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.hwk-fb:hover {
box-shadow: var(--shadow-lift);
}
.hwk-fb-ribbon {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 14px;
background: var(--bs-primary);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hwk-fb-ribbon.is-weak {
background: #E82646;
}
.hwk-fb-ribbon.is-mid {
background: #EAB300;
}
.hwk-fb-ribbon.is-note {
background: #0F65CD;
}
.hwk-fb-body {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
padding: 16px;
}
.hwk-fb-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 19px;
}
/* ============================================================
QUALITY TILES — a letter grade beside a written verdict
============================================================ */
.hwk-q {
display: flex;
gap: 14px;
height: 100%;
padding: 16px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid transparent;
transition: var(--transition);
}
.hwk-q:hover {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
box-shadow: var(--shadow);
}
.hwk-q-grade {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 17px;
font-weight: 700;
}
.hwk-q-grade.is-strong {
color: #1ABE17;
}
.hwk-q-grade.is-mid {
color: #EAB300;
}
.hwk-q-grade.is-weak {
color: #E82646;
}
.hwk-q-title {
margin: 0 0 3px;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
COPILOT — draft tiles showing a skeleton of the document
============================================================ */
.hwk-draft {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.hwk-draft:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--aix-glow);
}
.hwk-draft:hover .hwk-draft-ic {
background: var(--bs-primary);
color: #fff;
}
.hwk-draft:hover .hwk-ruled.is-mark {
background: rgba(61, 94, 225, 0.32);
}
.hwk-draft-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 18px;
transition: var(--transition);
}
.hwk-draft-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* the preview skeleton at the foot of each draft tile */
.hwk-preview {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: auto;
padding-top: 14px;
border-top: 1px dashed var(--bs-border-color);
}
/* ============================================================
EVALUATION TIMELINE — dashed connector, step number in the corner
============================================================ */
.hwk-flow {
position: relative;
padding-left: 26px;
}
.hwk-flow::before {
content: "";
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
border-left: 2px dashed var(--bs-border-color);
}
.hwk-step {
position: relative;
padding: 16px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.hwk-step + .hwk-step {
margin-top: 14px;
}
.hwk-step:hover {
box-shadow: var(--shadow);
}
.hwk-step {
/* the numbered knot sitting on the dashed line */
}
.hwk-step::before {
content: attr(data-n);
position: absolute;
left: -26px;
top: 18px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--bs-tertiary-bg);
color: var(--bs-secondary-color);
font-size: 10px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.hwk-step.is-done::before {
background: #1ABE17;
border-color: #1ABE17;
color: #fff;
}
.hwk-step.is-now::before {
border-color: var(--bs-primary);
color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
.hwk-step-title {
margin: 0 0 3px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
OPPORTUNITY SHELF — dashed tiles, things you add to a plan
============================================================ */
.hwk-shelf {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px dashed var(--bs-border-color);
transition: var(--transition);
}
.hwk-shelf:hover {
border-style: solid;
border-color: rgba(61, 94, 225, 0.35);
background: var(--tint-primary);
}
.hwk-shelf:hover .hwk-shelf-add {
color: var(--bs-primary);
}
.hwk-shelf-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 19px;
}
.hwk-shelf-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.hwk-shelf-add {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: auto;
font-size: 12px;
font-weight: 600;
color: var(--bs-secondary-color);
transition: var(--transition);
}
/* ============================================================
INSIGHT LIST — hanging numbers, no boxes, typographic
============================================================ */
.hwk-insight {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 0;
border-top: 1px solid var(--bs-border-color);
}
.hwk-insight:last-child {
border-bottom: 1px solid var(--bs-border-color);
}
.hwk-insight-n {
flex-shrink: 0;
width: 30px;
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.4;
color: transparent;
-webkit-text-stroke: 1px var(--bs-primary);
}
.hwk-insight-title {
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
WORKSPACE OFFCANVAS — circular stepper, labels below, dashed links
============================================================ */
.offcanvas.offcanvas-end.hwk-ws {
width: 88% !important;
max-width: 1420px !important;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-end.hwk-ws {
width: 100% !important;
}
}
.offcanvas.offcanvas-end.hwk-ws .offcanvas-body {
padding: 22px;
}
.hwk-ws-head {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding: 20px 22px;
background: linear-gradient(180deg, #F2F5FF 0%, var(--bs-body-bg) 100%);
border-bottom: 1px solid var(--bs-border-color);
}
.hwk-dots {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
list-style: none;
margin: 0;
padding: 20px 22px 18px;
background: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.hwk-dots {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 16px;
}
}
.hwk-dot {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
padding: 0 6px;
border: 0;
background: transparent;
transition: var(--transition);
/* dashed link to the next dot */
}
.hwk-dot::before {
content: "";
position: absolute;
left: calc(50% + 20px);
right: calc(-50% + 20px);
top: 17px;
border-top: 2px dashed var(--bs-border-color);
}
.hwk-dot.is-last::before {
display: none;
}
@media (max-width: 767.98px) {
.hwk-dot::before {
display: none;
}
}
.hwk-dot-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: var(--transition);
}
.hwk-dot-txt {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.3;
}
.hwk-dot-txt span:first-child {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.hwk-dot-txt span:last-child {
font-size: 13px;
font-weight: 600;
color: var(--bs-secondary-color);
}
.hwk-dot:hover .hwk-dot-n {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.hwk-dot.active .hwk-dot-n {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
box-shadow: 0 0 0 4px var(--tint-primary);
}
.hwk-dot.active .hwk-dot-txt span:first-child {
color: var(--bs-primary);
}
.hwk-dot.active .hwk-dot-txt span:last-child {
color: var(--bs-emphasis-color);
}
/* panels inside the workspace */
.hwk-panel {
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.hwk-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.hwk-panel-head h6 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.hwk-panel-body {
padding: 16px;
}
.hwk-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.hwk-line + .hwk-line {
border-top: 1px dashed var(--bs-border-color);
}
.hwk-line b {
font-weight: 600;
}
/* a quoted feedback block, as the teacher would write it */
.hwk-quote {
padding: 14px 16px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border-left: 3px solid var(--bs-primary);
font-size: 13px;
line-height: 1.68;
color: var(--bs-emphasis-color);
}
/* ============================================================
PREMIUM ACCORDION + EMPTY STATE
============================================================ */
.hwk-acc .accordion-item {
margin-bottom: 10px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--radius) !important;
overflow: hidden;
}
.hwk-acc .accordion-button {
padding: 14px 16px;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
background: var(--bs-body-bg);
box-shadow: none;
}
.hwk-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.hwk-acc .accordion-button:focus {
box-shadow: none;
}
.hwk-acc .accordion-body {
padding: 15px 16px;
font-size: 13px;
line-height: 1.65;
color: var(--bs-secondary-color);
border-top: 1px solid var(--bs-border-color);
}
.hwk-empty {
padding: 40px 24px;
text-align: center;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px dashed var(--bs-border-color);
}
.hwk-empty-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 14px;
border-radius: 50%;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 25px;
}
/* ============================================================
21. TEACHING INTELLIGENCE — prefix `tch-`
The sixth family. Its subject is a practitioner's craft, so its language
is drawn from appraisal and credentialing: facet bars, definition rows,
an engagement waveform, credential badges and folded-corner notes.
aix- enclosed cards, hairline dividers, chevron steppers
atn- banded surfaces, a vertical spine, stations, arc gauges
sdt- portrait medallion, chapter numerals, date gutter, dot scales
tto- slot grids, bracketed marks, before/after bars, a horizontal track
hwk- paper sheets, margin rules, grade seals, rubric strips
tch- tinted heading bands, facet bars, definition rows, a waveform,
credential badges, folded corners and an arrow breadcrumb
Nothing here overrides a rule from the families above.
============================================================ */
@media (prefers-reduced-motion: reduce) {
[class*=tch-],
[class*=tch-]::before,
[class*=tch-]::after {
animation: none !important;
transition: none !important;
}
}
/* ---- section heading: a tinted band, not a rule or a numeral --------- */
.tch-band {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
margin-bottom: 24px;
border-radius: var(--radius);
background: linear-gradient(90deg, var(--tint-primary) 0%, var(--bs-secondary-bg) 60%, var(--bs-body-bg) 100%);
border: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.tch-band {
flex-wrap: wrap;
}
}
.tch-band-n {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
color: var(--bs-primary);
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.tch-band-title {
margin: 0;
font-size: 19px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
}
.tch-band-sub {
margin: 2px 0 0;
font-size: 13px;
color: var(--bs-secondary-color);
}
/* ---- shared pieces ---------------------------------------------------- */
.tch-lbl {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.tch-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-emphasis-color);
white-space: nowrap;
}
.tch-pill i {
font-size: 13px;
}
.tch-pill.is-ai {
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.2);
color: var(--bs-primary);
}
.tch-pill.is-high {
background: #E8F9E8;
border-color: #D1F2D1;
color: #1ABE17;
}
.tch-pill.is-mid {
background: #FEF8EA;
border-color: #FDF1D6;
color: #EAB300;
}
.tch-pill.is-low {
background: #FDE9ED;
border-color: #FAD4DA;
color: #E82646;
}
.tch-pill.is-note {
background: #E7F1FC;
border-color: #CFE2FA;
color: #0F65CD;
}
/* ---- facet bars: the family's signature readout ----------------------
A label, a slim track and a figure on one line. Several stacked read as
a profile of a practitioner rather than as a chart. */
.tch-facet {
display: grid;
grid-template-columns: 104px minmax(0, 1fr) 38px;
align-items: center;
gap: 10px;
padding: 6px 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.tch-facet b {
text-align: right;
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.tch-facet-bar {
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, var(--bs-primary) 0 calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) calc(var(--p, 0) * 1%) 100%);
}
.tch-facet-bar.is-high {
background: linear-gradient(90deg, #1ABE17 0 calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) calc(var(--p, 0) * 1%) 100%);
}
.tch-facet-bar.is-mid {
background: linear-gradient(90deg, #EAB300 0 calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) calc(var(--p, 0) * 1%) 100%);
}
.tch-facet-bar.is-low {
background: linear-gradient(90deg, #E82646 0 calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) calc(var(--p, 0) * 1%) 100%);
}
/* ============================================================
HERO — copy on the left, an engagement waveform on the right
============================================================ */
.tch-stage {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: radial-gradient(90% 120% at 100% 100%, rgba(2, 168, 181, 0.12) 0%, transparent 58%), linear-gradient(160deg, #F2F5FF 0%, var(--bs-body-bg) 44%), var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
.tch-stage-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 372px;
gap: 34px;
padding: 28px;
}
@media (max-width: 1299.98px) {
.tch-stage-inner {
grid-template-columns: minmax(0, 1fr);
gap: 26px;
}
}
@media (max-width: 575.98px) {
.tch-stage-inner {
padding: 22px;
}
}
.tch-stage-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 6px;
border-radius: 999px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.tch-stage-badge i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--bs-primary);
color: #fff;
font-size: 13px;
}
.tch-stage-title {
margin: 14px 0 10px;
font-size: 30px;
line-height: 1.22;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
.tch-stage-title em {
font-style: normal;
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 767.98px) {
.tch-stage-title {
font-size: 24px;
}
}
/* status readouts as a wrapped definition strip */
.tch-stage-strip {
display: flex;
flex-wrap: wrap;
gap: 18px 32px;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--bs-border-color);
}
.tch-stat {
display: flex;
flex-direction: column;
gap: 4px;
line-height: 1.25;
}
.tch-stat b {
font-size: 19px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.tch-stat b small {
font-size: 12px;
font-weight: 500;
color: var(--bs-secondary-color);
}
/* ---- the illustration: an engagement waveform ---- */
.tch-panel {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--aix-glow);
}
.tch-wave {
display: flex;
align-items: center;
gap: 3px;
height: 96px;
}
.tch-wave i {
flex: 1 1 0;
min-height: 4px;
height: calc(var(--p, 10) * 1%);
border-radius: 2px;
background: linear-gradient(180deg, var(--bs-primary), rgba(61, 94, 225, 0.38));
}
.tch-wave i.is-peak {
background: linear-gradient(180deg, #02a8b5, rgba(2, 168, 181, 0.4));
}
.tch-wave i.is-dip {
background: linear-gradient(180deg, #EAB300, rgba(234, 179, 0, 0.4));
}
.tch-wave-axis {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--bs-secondary-color);
}
/* ============================================================
TEACHER CARDS — a tinted corner, a portrait, then facet bars
============================================================ */
.tch-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.tch-card:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.tch-card {
/* the diagonal tinted corner behind the portrait */
}
.tch-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 96px;
background: linear-gradient(120deg, var(--tint-primary) 0%, var(--bs-secondary-bg) 70%, transparent 100%);
}
.tch-card-head {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 18px 14px;
}
.tch-card-name {
margin: 0 0 2px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* the score reads as a mark out of 100, set beside the portrait */
.tch-card-score {
margin-left: auto;
text-align: right;
line-height: 1;
}
.tch-card-score b {
font-size: 23px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.tch-card-score b small {
font-size: 12px;
font-weight: 500;
color: var(--bs-secondary-color);
}
.tch-card-body {
display: flex;
flex-direction: column;
gap: 14px;
flex: 1 1 auto;
padding: 0 18px 16px;
}
.tch-card-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
.tch-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 16px;
transition: var(--transition);
}
.tch-ico:hover {
color: var(--bs-primary);
border-color: var(--bs-primary);
background: var(--tint-primary);
}
/* ============================================================
DEFINITION ROWS — explainable AI read as an appraisal record
============================================================ */
.tch-record {
position: relative;
padding: 20px 22px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-left: 4px solid var(--bs-primary);
transition: var(--transition);
}
.tch-record + .tch-record {
margin-top: 16px;
}
.tch-record.is-high {
border-left-color: #1ABE17;
}
.tch-record.is-mid {
border-left-color: #EAB300;
}
.tch-record.is-low {
border-left-color: #E82646;
}
.tch-record:hover {
box-shadow: var(--shadow-lift);
}
.tch-record-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding-bottom: 14px;
margin-bottom: 4px;
border-bottom: 1px solid var(--bs-border-color);
}
.tch-record-obs {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* label on the left, value on the right, ruled between */
.tch-dl {
display: grid;
grid-template-columns: 172px minmax(0, 1fr);
gap: 0 24px;
}
@media (max-width: 767.98px) {
.tch-dl {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
}
.tch-dt {
padding: 13px 0 13px;
border-bottom: 1px dashed var(--bs-border-color);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
@media (max-width: 767.98px) {
.tch-dt {
padding-bottom: 0;
border-bottom: 0;
}
}
.tch-dd {
margin: 0;
padding: 13px 0;
border-bottom: 1px dashed var(--bs-border-color);
font-size: 13px;
line-height: 1.65;
color: var(--bs-emphasis-color);
}
.tch-dd:last-child {
border-bottom: 0;
}
@media (max-width: 767.98px) {
.tch-dd {
padding-top: 4px;
}
}
.tch-ev {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 3px 0;
font-size: 12.5px;
color: var(--bs-secondary-color);
}
.tch-ev i {
flex-shrink: 0;
margin-top: 2px;
font-size: 14px;
color: var(--bs-primary);
}
/* ============================================================
FACET CARDS — a ringed badge above a written finding
============================================================ */
.tch-facet-card {
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.tch-facet-card:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.tch-ring {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 12px;
border-radius: 50%;
background: var(--bs-body-bg);
color: var(--bs-primary);
font-size: 21px;
/* the ring itself is a conic sweep set by --p */
}
.tch-ring::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(var(--bs-primary) 0deg calc(var(--p, 0) * 3.6deg), var(--bs-tertiary-bg) calc(var(--p, 0) * 3.6deg) 360deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.tch-ring.is-high {
color: #1ABE17;
}
.tch-ring.is-high::before {
background: conic-gradient(#1ABE17 0deg calc(var(--p, 0) * 3.6deg), var(--bs-tertiary-bg) calc(var(--p, 0) * 3.6deg) 360deg);
}
.tch-ring.is-mid {
color: #EAB300;
}
.tch-ring.is-mid::before {
background: conic-gradient(#EAB300 0deg calc(var(--p, 0) * 3.6deg), var(--bs-tertiary-bg) calc(var(--p, 0) * 3.6deg) 360deg);
}
.tch-ring.is-low {
color: #E82646;
}
.tch-ring.is-low::before {
background: conic-gradient(#E82646 0deg calc(var(--p, 0) * 3.6deg), var(--bs-tertiary-bg) calc(var(--p, 0) * 3.6deg) 360deg);
}
.tch-facet-title {
margin: 0 0 10px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.tch-mini {
margin-bottom: 10px;
}
.tch-mini span:first-child {
display: block;
margin-bottom: 2px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.tch-mini span:last-child {
display: block;
font-size: 12.5px;
line-height: 1.55;
color: var(--bs-emphasis-color);
}
/* ============================================================
COACHING CARDS — a dashed schedule strip along the foot
============================================================ */
.tch-coach {
display: flex;
flex-direction: column;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.tch-coach:hover {
box-shadow: var(--shadow-lift);
}
.tch-coach-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: 12px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 19px;
}
.tch-coach-ic.is-low {
background: #FDE9ED;
color: #E82646;
}
.tch-coach-ic.is-mid {
background: #FEF8EA;
color: #EAB300;
}
.tch-coach-ic.is-note {
background: #E7F1FC;
color: #0F65CD;
}
.tch-coach-title {
margin: 0 0 6px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.tch-coach-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-top: auto;
padding-top: 14px;
border-top: 1px dashed var(--bs-border-color);
}
/* ============================================================
CLASSROOM TILES — icon set into the top-right corner
============================================================ */
.tch-tile {
position: relative;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid transparent;
overflow: hidden;
transition: var(--transition);
}
.tch-tile:hover {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
box-shadow: var(--shadow);
}
.tch-tile-ic {
position: absolute;
right: 14px;
top: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 16px;
}
.tch-tile-title {
margin: 0 0 8px;
padding-right: 44px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
COPILOT — numbered wide bars
============================================================ */
.tch-do {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 15px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.tch-do:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--aix-glow);
}
.tch-do:hover .tch-do-n {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.tch-do:hover .tch-do-go {
transform: translateX(3px);
color: var(--bs-primary);
}
.tch-do-n {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: var(--transition);
}
.tch-do-go {
flex-shrink: 0;
font-size: 17px;
color: var(--bs-secondary-color);
transition: var(--transition);
}
/* ============================================================
JOURNEY — a numeral gutter, no connecting line
============================================================ */
.tch-path {
display: flex;
flex-direction: column;
gap: 12px;
}
.tch-leg {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
align-items: stretch;
gap: 16px;
padding: 16px 18px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid transparent;
transition: var(--transition);
}
.tch-leg:hover {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
box-shadow: var(--shadow);
}
.tch-leg.is-now {
background: var(--bs-body-bg);
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow);
}
@media (max-width: 575.98px) {
.tch-leg {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
}
/* the big outlined numeral in the gutter */
.tch-leg-n {
display: flex;
align-items: flex-start;
justify-content: center;
font-size: 32px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
color: transparent;
-webkit-text-stroke: 1.5px var(--bs-border-color);
}
.tch-leg.is-done .tch-leg-n {
-webkit-text-stroke-color: #1ABE17;
}
.tch-leg.is-now .tch-leg-n {
-webkit-text-stroke-color: var(--bs-primary);
}
@media (max-width: 575.98px) {
.tch-leg-n {
justify-content: flex-start;
font-size: 24px;
}
}
.tch-leg-title {
margin: 0 0 3px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
CREDENTIAL BADGES — professional growth
============================================================ */
.tch-badge {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
padding: 20px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.tch-badge:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
/* a ringed medal with a small tick set at the foot */
.tch-medal {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 14px;
border-radius: 50%;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 24px;
}
.tch-medal::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1px dashed var(--bs-border-color);
}
.tch-medal.is-high {
background: #E8F9E8;
color: #1ABE17;
}
.tch-medal.is-mid {
background: #FEF8EA;
color: #EAB300;
}
.tch-medal.is-note {
background: #E7F1FC;
color: #0F65CD;
}
.tch-badge-fig {
display: block;
font-size: 22px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.tch-badge-title {
margin: 8px 0 4px;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
INSIGHT NOTES — a folded top-right corner
============================================================ */
.tch-note {
position: relative;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.tch-note:hover {
box-shadow: var(--shadow-lift);
}
.tch-note {
/* the fold */
}
.tch-note::before {
content: "";
position: absolute;
right: 0;
top: 0;
border-width: 0 22px 22px 0;
border-style: solid;
border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color) var(--bs-border-color);
border-top-right-radius: var(--radius);
}
.tch-note-title {
margin: 0 0 6px;
padding-right: 26px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
WORKSPACE OFFCANVAS — an arrow breadcrumb stepper
============================================================ */
.offcanvas.offcanvas-end.tch-ws {
width: 88% !important;
max-width: 1440px !important;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-end.tch-ws {
width: 100% !important;
}
}
.offcanvas.offcanvas-end.tch-ws .offcanvas-body {
padding: 22px;
}
.tch-ws-head {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding: 20px 22px;
background: linear-gradient(160deg, #F2F5FF 0%, var(--bs-body-bg) 60%);
border-bottom: 1px solid var(--bs-border-color);
}
.tch-crumbs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.tch-crumbs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
}
}
/* each step is notched into the next, like a process breadcrumb */
.tch-crumb {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 14px 18px 14px 26px;
border: 0;
background: var(--bs-body-bg);
text-align: left;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
transition: var(--transition);
}
.tch-crumb:first-child {
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
padding-left: 18px;
}
.tch-crumb:last-child {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
}
.tch-crumb:hover {
background: var(--bs-tertiary-bg);
}
.tch-crumb.active {
background: var(--bs-primary);
}
.tch-crumb.active .tch-crumb-n {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
.tch-crumb.active .tch-crumb-txt span:first-child {
color: rgba(255, 255, 255, 0.78);
}
.tch-crumb.active .tch-crumb-txt span:last-child {
color: #fff;
}
@media (max-width: 767.98px) {
.tch-crumb {
clip-path: none !important;
padding: 12px 14px !important;
}
}
.tch-crumb-n {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: var(--transition);
}
.tch-crumb-txt {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.tch-crumb-txt span:first-child {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.tch-crumb-txt span:last-child {
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* panels inside the workspace */
.tch-box {
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.tch-box-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.tch-box-head h6 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.tch-box-body {
padding: 16px;
}
.tch-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.tch-line + .tch-line {
border-top: 1px dashed var(--bs-border-color);
}
.tch-line b {
font-weight: 600;
}
/* a quoted observation, as a reviewer would write it */
.tch-quote {
padding: 14px 16px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border-left: 3px solid var(--bs-primary);
font-size: 13px;
line-height: 1.68;
color: var(--bs-emphasis-color);
}
/* ============================================================
PREMIUM ACCORDION + EMPTY STATE
============================================================ */
.tch-acc .accordion-item {
margin-bottom: 10px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--radius) !important;
overflow: hidden;
}
.tch-acc .accordion-button {
padding: 14px 16px;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
background: var(--bs-body-bg);
box-shadow: none;
}
.tch-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.tch-acc .accordion-button:focus {
box-shadow: none;
}
.tch-acc .accordion-body {
padding: 15px 16px;
font-size: 13px;
line-height: 1.65;
color: var(--bs-secondary-color);
border-top: 1px solid var(--bs-border-color);
}
.tch-empty {
padding: 40px 24px;
text-align: center;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
}
.tch-empty-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 14px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
color: var(--bs-primary);
font-size: 25px;
}
/* ============================================================
22. FAMILY ENGAGEMENT — prefix `fam-`
The seventh family. Its subject is a relationship between two parties,
so its language is drawn from correspondence: paired avatars joined by a
connector, message threads, composed letters and drop capitals.
aix- enclosed cards, hairline dividers, chevron steppers
atn- banded surfaces, a vertical spine, stations, arc gauges
sdt- portrait medallion, chapter numerals, date gutter, dot scales
tto- slot grids, bracketed marks, before/after bars, a horizontal track
hwk- paper sheets, margin rules, grade seals, rubric strips
tch- tinted bands, facet bars, definition rows, medals, folded corners
fam- paired avatars, message threads, drop capitals, calendar chips
and a single continuous progress stepper
Nothing here overrides a rule from the families above.
============================================================ */
@media (prefers-reduced-motion: reduce) {
[class*=fam-],
[class*=fam-]::before,
[class*=fam-]::after {
animation: none !important;
transition: none !important;
}
}
/* ---- section heading: a thick rounded accent at the left -------------- */
.fam-hd {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
}
.fam-hd::before {
content: "";
flex-shrink: 0;
width: 5px;
align-self: stretch;
min-height: 46px;
border-radius: 3px;
background: linear-gradient(180deg, var(--bs-primary), #02a8b5);
}
.fam-hd-title {
margin: 0;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
}
.fam-hd-sub {
margin: 5px 0 0;
font-size: 13px;
color: var(--bs-secondary-color);
max-width: 700px;
}
/* ---- shared pieces ---------------------------------------------------- */
.fam-lbl {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.fam-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-emphasis-color);
white-space: nowrap;
}
.fam-chip i {
font-size: 13px;
}
.fam-chip.is-ai {
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.2);
color: var(--bs-primary);
}
.fam-chip.is-warm {
background: #E8F9E8;
border-color: #D1F2D1;
color: #1ABE17;
}
.fam-chip.is-cool {
background: #E7F1FC;
border-color: #CFE2FA;
color: #0F65CD;
}
.fam-chip.is-fading {
background: #FEF8EA;
border-color: #FDF1D6;
color: #EAB300;
}
.fam-chip.is-cold {
background: #FDE9ED;
border-color: #FAD4DA;
color: #E82646;
}
/* engagement level: five linked rings, filled to level */
.fam-level {
display: inline-flex;
align-items: center;
gap: 3px;
}
.fam-level i {
width: 9px;
height: 9px;
border-radius: 50%;
border: 1.5px solid var(--bs-tertiary-bg);
}
.fam-level i.on {
background: var(--bs-primary);
border-color: var(--bs-primary);
}
.fam-level.is-warm i.on {
background: #1ABE17;
border-color: #1ABE17;
}
.fam-level.is-fading i.on {
background: #EAB300;
border-color: #EAB300;
}
.fam-level.is-cold i.on {
background: #E82646;
border-color: #E82646;
}
/* ============================================================
HERO — copy on the left, a conversation thread on the right
============================================================ */
.fam-hero {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: radial-gradient(80% 120% at 0% 100%, rgba(2, 168, 181, 0.12) 0%, transparent 55%), linear-gradient(200deg, #F2F5FF 0%, var(--bs-body-bg) 46%), var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
.fam-hero-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 372px;
gap: 34px;
padding: 28px;
}
@media (max-width: 1299.98px) {
.fam-hero-inner {
grid-template-columns: minmax(0, 1fr);
gap: 26px;
}
}
@media (max-width: 575.98px) {
.fam-hero-inner {
padding: 22px;
}
}
.fam-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 13px;
border-radius: 999px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.fam-hero-title {
margin: 14px 0 10px;
font-size: 30px;
line-height: 1.22;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
.fam-hero-title em {
font-style: normal;
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 767.98px) {
.fam-hero-title {
font-size: 24px;
}
}
/* readouts on a soft rounded strip rather than in boxes */
.fam-hero-strip {
display: flex;
flex-wrap: wrap;
gap: 14px 30px;
margin-top: 20px;
padding: 16px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.fam-stat {
display: flex;
flex-direction: column;
gap: 3px;
line-height: 1.25;
}
.fam-stat b {
font-size: 18px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.fam-stat b small {
font-size: 12px;
font-weight: 500;
color: var(--bs-secondary-color);
}
/* ---- the illustration: a conversation thread ---- */
.fam-thread-panel {
display: flex;
flex-direction: column;
gap: 14px;
padding: 20px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--aix-glow);
}
.fam-bubbles {
display: flex;
flex-direction: column;
gap: 10px;
}
.fam-bubble {
position: relative;
max-width: 86%;
padding: 11px 14px;
border-radius: 14px 14px 14px 4px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 12.5px;
line-height: 1.55;
color: var(--bs-emphasis-color);
}
.fam-bubble small {
display: block;
margin-top: 4px;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.fam-bubble {
/* the school's side sits right, tinted */
}
.fam-bubble.is-school {
align-self: flex-end;
border-radius: 14px 14px 4px 14px;
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.18);
}
.fam-bubble.is-ai {
align-self: stretch;
max-width: 100%;
border-style: dashed;
background: var(--bs-body-bg);
border-radius: var(--radius);
}
/* ============================================================
FAMILY CARDS — two avatars joined by a connector
============================================================ */
.fam-card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.fam-card:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.fam-card-head {
display: flex;
align-items: center;
gap: 14px;
padding: 18px;
background: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg));
border-bottom: 1px solid var(--bs-border-color);
}
/* the pair: parent and student, linked by a small drawn tie */
.fam-pair {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding-right: 6px;
}
.fam-pair .avatar + .avatar {
margin-left: -12px;
}
.fam-pair {
/* the tie sits under the join */
}
.fam-pair::after {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
transform: translateX(-50%);
width: 22px;
height: 3px;
border-radius: 2px;
background: var(--bs-primary);
}
.fam-card-name {
margin: 0 0 2px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fam-card-body {
display: flex;
flex-direction: column;
gap: 13px;
flex: 1 1 auto;
padding: 16px 18px;
}
.fam-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--bs-border-color);
border-bottom: 1px solid var(--bs-border-color);
}
.fam-cell {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
line-height: 1.3;
}
.fam-cell span:last-child {
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fam-card-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
.fam-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 50%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 16px;
transition: var(--transition);
}
.fam-ico:hover {
color: var(--bs-primary);
border-color: var(--bs-primary);
background: var(--tint-primary);
}
/* ============================================================
EXPLAINABLE AI — written as a thread of exchanges
============================================================ */
.fam-note {
padding: 20px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.fam-note:hover {
box-shadow: var(--shadow-lift);
}
.fam-note-head {
display: flex;
align-items: flex-start;
gap: 12px;
padding-bottom: 14px;
margin-bottom: 16px;
border-bottom: 1px solid var(--bs-border-color);
}
.fam-note-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 18px;
}
.fam-note-ic.is-warm {
background: #E8F9E8;
color: #1ABE17;
}
.fam-note-ic.is-fading {
background: #FEF8EA;
color: #EAB300;
}
.fam-note-ic.is-cold {
background: #FDE9ED;
color: #E82646;
}
.fam-note-obs {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* each part of the explanation is an indented exchange */
.fam-turn {
position: relative;
padding: 0 0 14px 22px;
}
.fam-turn:last-child {
padding-bottom: 0;
}
.fam-turn {
/* the connecting rail */
}
.fam-turn::before {
content: "";
position: absolute;
left: 4px;
top: 14px;
bottom: 0;
width: 1px;
background: var(--bs-border-color);
}
.fam-turn:last-child::before {
display: none;
}
.fam-turn {
/* the marker */
}
.fam-turn::after {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--bs-primary);
}
.fam-turn-lbl {
display: block;
margin-bottom: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.fam-ev {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 4px 0;
font-size: 12.5px;
color: var(--bs-secondary-color);
}
.fam-ev i {
flex-shrink: 0;
margin-top: 3px;
font-size: 6px;
color: var(--bs-primary);
}
/* ============================================================
ENGAGEMENT CARDS — a two-tone split
============================================================ */
.fam-eng {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.fam-eng:hover {
box-shadow: var(--shadow-lift);
}
.fam-eng-top {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
background: var(--tint-primary);
}
.fam-eng-top.is-warm {
background: #E8F9E8;
}
.fam-eng-top.is-fading {
background: #FEF8EA;
}
.fam-eng-top.is-cold {
background: #FDE9ED;
}
.fam-eng-top.is-cool {
background: #E7F1FC;
}
.fam-eng-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--bs-body-bg);
color: var(--bs-primary);
font-size: 18px;
}
.fam-eng-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fam-eng-body {
flex: 1 1 auto;
padding: 16px 18px;
}
.fam-kv {
margin-bottom: 12px;
}
.fam-kv span:first-child {
display: block;
margin-bottom: 2px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.fam-kv span:last-child {
display: block;
font-size: 12.5px;
line-height: 1.55;
color: var(--bs-emphasis-color);
}
/* ============================================================
RECOMMENDATION CARDS — a send strip along the bottom edge
============================================================ */
.fam-rec {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.fam-rec:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow-lift);
}
.fam-rec-body {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
padding: 18px;
}
.fam-rec-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fam-rec-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: auto;
padding-top: 14px;
border-top: 1px dashed var(--bs-border-color);
}
/* the strip is the action: full bleed, coloured by priority */
.fam-send {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 12px;
background: var(--bs-primary);
color: #fff;
font-size: 13px;
font-weight: 600;
transition: var(--transition);
}
.fam-send.is-cold {
background: #E82646;
}
.fam-send.is-fading {
background: #EAB300;
}
.fam-send.is-cool {
background: #0F65CD;
}
.fam-send:hover {
filter: brightness(0.94);
color: #fff;
}
/* ============================================================
STORY CARDS — a drop capital opens each narrative
============================================================ */
.fam-story {
position: relative;
height: 100%;
padding: 20px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
/* a second hairline inset, like a bound page */
box-shadow: inset 0 0 0 4px var(--bs-body-bg), inset 0 0 0 5px var(--bs-border-color);
transition: var(--transition);
}
.fam-story:hover {
box-shadow: inset 0 0 0 4px var(--bs-body-bg), inset 0 0 0 5px rgba(61, 94, 225, 0.28), var(--shadow-lift);
}
.fam-story-title {
margin: 0 0 10px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--bs-emphasis-color);
}
.fam-story-txt {
margin: 0;
font-size: 13px;
line-height: 1.7;
color: var(--bs-secondary-color);
/* the drop capital */
}
.fam-story-txt::first-letter {
float: left;
margin: 4px 8px 0 0;
font-size: 34px;
line-height: 0.8;
font-weight: 700;
color: var(--bs-primary);
}
/* ============================================================
COPILOT — composer tiles with an addressee line
============================================================ */
.fam-compose {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.fam-compose:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--aix-glow);
}
.fam-compose:hover .fam-compose-ic {
background: var(--bs-primary);
color: #fff;
}
.fam-compose-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 18px;
transition: var(--transition);
}
.fam-compose-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* the addressee line, like the head of a letter */
.fam-to {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed var(--bs-border-color);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.fam-to b {
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
PARTNERSHIP TIMELINE — faces on the line
============================================================ */
.fam-line {
position: relative;
padding-left: 54px;
}
.fam-line::before {
content: "";
position: absolute;
left: 19px;
top: 16px;
bottom: 16px;
width: 2px;
background: linear-gradient(180deg, var(--bs-primary), rgba(61, 94, 225, 0.14));
}
.fam-mark {
position: relative;
padding: 15px 18px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid transparent;
transition: var(--transition);
}
.fam-mark + .fam-mark {
margin-top: 14px;
}
.fam-mark:hover {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
box-shadow: var(--shadow);
}
.fam-mark {
/* the node is an avatar, sat on the line */
}
.fam-mark .fam-mark-face {
position: absolute;
left: -54px;
top: 14px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--bs-body-bg);
box-shadow: var(--shadow);
object-fit: cover;
}
.fam-mark .fam-mark-ic {
position: absolute;
left: -54px;
top: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 17px;
}
.fam-mark.is-now .fam-mark-ic {
border-color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
.fam-mark-title {
margin: 0 0 3px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
OPPORTUNITY CARDS — a calendar chip at the left
============================================================ */
.fam-opp {
display: flex;
align-items: flex-start;
gap: 14px;
height: 100%;
padding: 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.fam-opp:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.fam-opp:hover .fam-date {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
/* a torn-off calendar leaf */
.fam-date {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50px;
height: 54px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-emphasis-color);
line-height: 1;
transition: var(--transition);
}
.fam-date b {
font-size: 19px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.fam-date span {
margin-top: 3px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.75;
}
.fam-opp-title {
margin: 0 0 3px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
INSIGHT ROWS — a soft tinted band with a leading glyph
============================================================ */
.fam-ins {
display: flex;
align-items: flex-start;
gap: 14px;
height: 100%;
padding: 16px 18px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid transparent;
transition: var(--transition);
}
.fam-ins:hover {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
box-shadow: var(--shadow);
}
.fam-ins-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 18px;
}
.fam-ins-title {
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
WORKSPACE OFFCANVAS — one continuous progress rule
============================================================ */
.offcanvas.offcanvas-end.fam-ws {
width: 88% !important;
max-width: 1420px !important;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-end.fam-ws {
width: 100% !important;
}
}
.offcanvas.offcanvas-end.fam-ws .offcanvas-body {
padding: 22px;
}
.fam-ws-head {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding: 20px 22px;
background: linear-gradient(200deg, #F2F5FF 0%, var(--bs-body-bg) 58%);
border-bottom: 1px solid var(--bs-border-color);
}
/* the stepper: five labels above one rule that fills to the active stage */
.fam-steps {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
list-style: none;
margin: 0;
padding: 18px 22px 0;
background: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color);
/* the continuous track sits under every step */
}
.fam-steps::after {
content: "";
position: absolute;
left: 22px;
right: 22px;
bottom: 0;
height: 3px;
border-radius: 2px;
background: var(--bs-tertiary-bg);
}
@media (max-width: 767.98px) {
.fam-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fam-steps::after {
display: none;
}
}
.fam-step {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px 16px;
border: 0;
background: transparent;
text-align: left;
transition: var(--transition);
/* the filled portion of the rule, per step */
}
.fam-step::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 3px;
border-radius: 2px;
background: transparent;
transition: var(--transition);
}
.fam-step:hover .fam-step-n {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
.fam-step.active::after {
background: var(--bs-primary);
}
.fam-step.active .fam-step-n {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.fam-step.active .fam-step-txt span:last-child {
color: var(--bs-emphasis-color);
}
@media (max-width: 767.98px) {
.fam-step {
padding-bottom: 10px;
}
.fam-step::after {
display: none;
}
}
.fam-step-n {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 10px;
background: var(--bs-body-bg);
border: 1.5px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: var(--transition);
}
.fam-step-txt {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.fam-step-txt span:first-child {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.fam-step-txt span:last-child {
font-size: 13px;
font-weight: 600;
color: var(--bs-secondary-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* panels inside the workspace */
.fam-box {
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.fam-box-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.fam-box-head h6 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fam-box-body {
padding: 16px;
}
.fam-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.fam-row + .fam-row {
border-top: 1px dashed var(--bs-border-color);
}
.fam-row b {
font-weight: 600;
}
/* ============================================================
PREMIUM ACCORDION + EMPTY STATE
============================================================ */
.fam-acc .accordion-item {
margin-bottom: 10px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--radius) !important;
overflow: hidden;
}
.fam-acc .accordion-button {
padding: 14px 16px;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
background: var(--bs-body-bg);
box-shadow: none;
}
.fam-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.fam-acc .accordion-button:focus {
box-shadow: none;
}
.fam-acc .accordion-body {
padding: 15px 16px;
font-size: 13px;
line-height: 1.65;
color: var(--bs-secondary-color);
border-top: 1px solid var(--bs-border-color);
}
.fam-empty {
padding: 40px 24px;
text-align: center;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
}
.fam-empty-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 14px;
border-radius: 18px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
color: var(--bs-primary);
font-size: 25px;
}
/* ============================================================
23. REVENUE INTELLIGENCE — prefix `rev-`
The eighth family. Its subject is money and likelihood, so its language
comes from the ledger: dotted leaders running to an amount, tabular
figures, segmented probability blocks and a forecast cone.
aix- enclosed cards, hairline dividers, chevron steppers
atn- banded surfaces, a vertical spine, stations, arc gauges
sdt- portrait medallion, chapter numerals, date gutter, dot scales
tto- slot grids, bracketed marks, before/after bars, a horizontal track
hwk- paper sheets, margin rules, grade seals, rubric strips
tch- tinted bands, facet bars, definition rows, medals, folded corners
fam- paired avatars, message threads, drop capitals, calendar chips
rev- dotted leaders, tabular amounts, probability blocks, impact rails
and a forecast cone
Nothing here overrides a rule from the families above.
============================================================ */
@media (prefers-reduced-motion: reduce) {
[class*=rev-],
[class*=rev-]::before,
[class*=rev-]::after {
animation: none !important;
transition: none !important;
}
}
/* ---- section heading: title, dotted leader, figure --------------------
Reads like a line in a statement rather than like a page heading. */
.rev-hd {
margin-bottom: 24px;
}
.rev-hd-line {
display: flex;
align-items: baseline;
gap: 12px;
}
.rev-hd-title {
margin: 0;
flex-shrink: 0;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
}
/* the leader itself */
.rev-leader {
flex: 1 1 auto;
min-width: 24px;
height: 1px;
align-self: center;
background-image: linear-gradient(90deg, var(--bs-border-color) 33%, transparent 0);
background-size: 6px 1px;
background-repeat: repeat-x;
}
.rev-hd-fig {
flex-shrink: 0;
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--bs-primary);
}
.rev-hd-sub {
margin: 8px 0 0;
font-size: 13px;
color: var(--bs-secondary-color);
max-width: 700px;
}
/* ---- shared pieces ---------------------------------------------------- */
.rev-lbl {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* every amount on the page is set in tabular figures */
.rev-amt {
font-variant-numeric: tabular-nums;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
}
.rev-amt.is-lg {
font-size: 24px;
}
.rev-amt.is-md {
font-size: 17px;
}
.rev-amt.is-in {
color: #1ABE17;
}
.rev-amt.is-out {
color: #E82646;
}
.rev-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-emphasis-color);
white-space: nowrap;
}
.rev-tag i {
font-size: 13px;
}
.rev-tag.is-ai {
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.2);
color: var(--bs-primary);
}
.rev-tag.is-likely {
background: #E8F9E8;
border-color: #D1F2D1;
color: #1ABE17;
}
.rev-tag.is-watch {
background: #E7F1FC;
border-color: #CFE2FA;
color: #0F65CD;
}
.rev-tag.is-slow {
background: #FEF8EA;
border-color: #FDF1D6;
color: #EAB300;
}
.rev-tag.is-risk {
background: #FDE9ED;
border-color: #FAD4DA;
color: #E82646;
}
/* ---- probability blocks: the family's signature readout ---------------
Ten discrete blocks, filled to the likelihood. Discrete rather than a
continuous bar, because a forecast is a count of outcomes, not a level. */
.rev-prob {
display: flex;
gap: 3px;
}
.rev-prob i {
flex: 1 1 0;
height: 14px;
border-radius: 2px;
background: var(--bs-tertiary-bg);
}
.rev-prob i.on {
background: var(--bs-primary);
}
.rev-prob.is-likely i.on {
background: #1ABE17;
}
.rev-prob.is-slow i.on {
background: #EAB300;
}
.rev-prob.is-risk i.on {
background: #E82646;
}
.rev-prob.is-sm i {
height: 8px;
}
/* a ledger row: label, leader, value */
.rev-row {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 0;
font-size: 13px;
}
.rev-row + .rev-row {
border-top: 1px solid var(--bs-border-color);
}
.rev-row > span:first-child {
flex-shrink: 0;
color: var(--bs-secondary-color);
}
.rev-row > b {
flex-shrink: 0;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
/* ============================================================
HERO — copy on the left, a forecast cone on the right
============================================================ */
.rev-hero {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: linear-gradient(105deg, var(--bs-body-bg) 0%, var(--bs-body-bg) 50%, #E8F9E8 100%), var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
/* a faint ledger rule across the whole panel */
.rev-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(180deg, transparent 0 39px, var(--bs-border-color) 39px 40px);
opacity: 0.4;
mask-image: linear-gradient(180deg, transparent, #000 60%);
pointer-events: none;
}
.rev-hero-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 34px;
padding: 28px;
}
@media (max-width: 1299.98px) {
.rev-hero-inner {
grid-template-columns: minmax(0, 1fr);
gap: 26px;
}
}
@media (max-width: 575.98px) {
.rev-hero-inner {
padding: 22px;
}
}
.rev-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border-radius: 4px;
background: var(--bs-emphasis-color);
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.rev-hero-title {
margin: 14px 0 10px;
font-size: 30px;
line-height: 1.22;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
.rev-hero-title em {
font-style: normal;
font-variant-numeric: tabular-nums;
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 767.98px) {
.rev-hero-title {
font-size: 24px;
}
}
/* the status block is a short statement, ruled like one */
.rev-hero-stmt {
margin-top: 20px;
padding: 4px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
/* ---- illustration: the forecast cone ---- */
.rev-cone-panel {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--aix-glow);
}
/* three nested bands widening to the right: the range of outcomes */
.rev-cone {
position: relative;
height: 132px;
}
.rev-cone-band {
position: absolute;
inset: 0;
border-radius: 6px;
}
.rev-cone-band.b1 {
background: linear-gradient(90deg, rgba(61, 94, 225, 0.05), rgba(61, 94, 225, 0.16));
clip-path: polygon(0 46%, 100% 4%, 100% 96%, 0 54%);
}
.rev-cone-band.b2 {
background: linear-gradient(90deg, rgba(61, 94, 225, 0.1), rgba(61, 94, 225, 0.3));
clip-path: polygon(0 47%, 100% 24%, 100% 76%, 0 53%);
}
.rev-cone-band {
/* the expected line runs through the middle */
}
.rev-cone-band.b3 {
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
clip-path: polygon(0 48%, 100% 46%, 100% 54%, 0 52%);
}
.rev-cone-pin {
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 3px solid var(--bs-primary);
box-shadow: var(--shadow);
}
.rev-cone-axis {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--bs-secondary-color);
}
/* ============================================================
REVENUE CASE CARDS — statement head, amount, probability
============================================================ */
.rev-case {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.rev-case:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.rev-case-head {
display: flex;
align-items: center;
gap: 13px;
padding: 16px 18px;
border-bottom: 1px dashed var(--bs-border-color);
}
.rev-case-name {
margin: 0 0 2px;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* the outstanding amount sits alone on a tinted shelf */
.rev-shelf {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
background: var(--bs-secondary-bg);
}
.rev-case-body {
display: flex;
flex-direction: column;
gap: 13px;
flex: 1 1 auto;
padding: 16px 18px;
}
.rev-case-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
border-top: 1px solid var(--bs-border-color);
}
.rev-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 6px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 16px;
transition: var(--transition);
}
.rev-ico:hover {
color: var(--bs-primary);
border-color: var(--bs-primary);
background: var(--tint-primary);
}
/* ============================================================
EXPLAINABLE AI — content left, a tinted impact rail right
============================================================ */
.rev-note {
display: grid;
grid-template-columns: minmax(0, 1fr) 232px;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.rev-note:hover {
box-shadow: var(--shadow-lift);
}
@media (max-width: 991.98px) {
.rev-note {
grid-template-columns: minmax(0, 1fr);
}
}
.rev-note-body {
padding: 20px;
}
.rev-note-obs {
margin: 0 0 12px;
font-size: 15.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.rev-ev {
display: flex;
align-items: baseline;
gap: 10px;
padding: 7px 0;
font-size: 12.5px;
}
.rev-ev + .rev-ev {
border-top: 1px dotted var(--bs-border-color);
}
.rev-ev > span:first-child {
flex-shrink: 0;
color: var(--bs-secondary-color);
}
.rev-ev > b {
flex-shrink: 0;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
/* the rail carries the money view of the same finding */
.rev-rail {
display: flex;
flex-direction: column;
gap: 14px;
padding: 20px;
background: linear-gradient(180deg, var(--tint-primary), var(--bs-secondary-bg));
border-left: 1px solid var(--bs-border-color);
}
.rev-rail.is-likely {
background: linear-gradient(180deg, #E8F9E8, var(--bs-secondary-bg));
}
.rev-rail.is-slow {
background: linear-gradient(180deg, #FEF8EA, var(--bs-secondary-bg));
}
.rev-rail.is-risk {
background: linear-gradient(180deg, #FDE9ED, var(--bs-secondary-bg));
}
@media (max-width: 991.98px) {
.rev-rail {
border-left: 0;
border-top: 1px solid var(--bs-border-color);
}
}
/* ============================================================
INTELLIGENCE CARDS — an amount block beside the finding
============================================================ */
.rev-int {
display: flex;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.rev-int:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.rev-int-fig {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 108px;
padding: 16px 10px;
text-align: center;
background: var(--bs-secondary-bg);
border-right: 1px solid var(--bs-border-color);
}
.rev-int-fig i {
font-size: 19px;
color: var(--bs-primary);
}
.rev-int-body {
padding: 16px 18px;
}
.rev-int-title {
margin: 0 0 10px;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.rev-kv {
margin-bottom: 10px;
}
.rev-kv span:first-child {
display: block;
margin-bottom: 2px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.rev-kv span:last-child {
display: block;
font-size: 12.5px;
line-height: 1.55;
color: var(--bs-emphasis-color);
}
/* ============================================================
COLLECTION CARDS — probability blocks across the top
============================================================ */
.rev-rec {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.rev-rec:hover {
box-shadow: var(--shadow-lift);
}
.rev-rec-top {
padding: 14px 16px 12px;
border-bottom: 1px solid var(--bs-border-color);
}
.rev-rec-body {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
padding: 16px;
}
.rev-rec-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.rev-rec-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed var(--bs-border-color);
}
/* ============================================================
OPPORTUNITY TILES — a corner amount badge
============================================================ */
.rev-opp {
position: relative;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.rev-opp:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.rev-opp-badge {
position: absolute;
right: 16px;
top: 16px;
padding: 4px 9px;
border-radius: 4px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.rev-opp-badge.is-likely {
background: #E8F9E8;
color: #1ABE17;
}
.rev-opp-badge.is-slow {
background: #FEF8EA;
color: #EAB300;
}
.rev-opp-badge.is-risk {
background: #FDE9ED;
color: #E82646;
}
.rev-opp-title {
margin: 0 0 8px;
padding-right: 84px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
COPILOT — indexed rows with a run chip
============================================================ */
.rev-do {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.rev-do:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--aix-glow);
}
.rev-do:hover .rev-do-run {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.rev-do-ix {
flex-shrink: 0;
width: 34px;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
}
.rev-do-run {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px;
border-radius: 4px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 11px;
font-weight: 600;
transition: var(--transition);
}
/* ============================================================
REVENUE JOURNEY — squares on a dotted rail, amounts at the right
============================================================ */
.rev-journey {
position: relative;
padding-left: 30px;
}
.rev-journey::before {
content: "";
position: absolute;
left: 8px;
top: 14px;
bottom: 14px;
border-left: 2px dotted var(--bs-border-color);
}
.rev-stop {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid transparent;
transition: var(--transition);
}
.rev-stop + .rev-stop {
margin-top: 12px;
}
.rev-stop:hover {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
box-shadow: var(--shadow);
}
.rev-stop {
/* a small square sat on the dotted rail */
}
.rev-stop::before {
content: "";
position: absolute;
left: -27px;
top: 22px;
width: 12px;
height: 12px;
border-radius: 3px;
background: var(--bs-body-bg);
border: 2px solid var(--bs-tertiary-bg);
}
.rev-stop.is-done::before {
background: #1ABE17;
border-color: #1ABE17;
}
.rev-stop.is-now {
background: var(--bs-body-bg);
border-color: rgba(61, 94, 225, 0.3);
}
.rev-stop.is-now::before {
border-color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
.rev-stop-title {
margin: 0 0 3px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
FINANCIAL OPPORTUNITY — a dotted-leader stat foot
============================================================ */
.rev-fin {
display: flex;
flex-direction: column;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.rev-fin:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.rev-fin-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: 12px;
border-radius: 8px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 19px;
}
.rev-fin-title {
margin: 0 0 6px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.rev-fin-foot {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
INSIGHT ROWS — a large figure leading the line
============================================================ */
.rev-ins {
display: flex;
align-items: flex-start;
gap: 16px;
height: 100%;
padding: 16px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.rev-ins:hover {
box-shadow: var(--shadow);
}
.rev-ins-fig {
flex-shrink: 0;
min-width: 78px;
font-size: 21px;
font-weight: 700;
line-height: 1.2;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
color: var(--bs-primary);
}
.rev-ins-fig.is-in {
color: #1ABE17;
}
.rev-ins-fig.is-out {
color: #E82646;
}
.rev-ins-title {
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
WORKSPACE OFFCANVAS — boxed steps with a filling top edge
============================================================ */
.offcanvas.offcanvas-end.rev-ws {
width: 88% !important;
max-width: 1440px !important;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-end.rev-ws {
width: 100% !important;
}
}
.offcanvas.offcanvas-end.rev-ws .offcanvas-body {
padding: 22px;
}
.rev-ws-head {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding: 20px 22px;
background: linear-gradient(105deg, var(--bs-body-bg) 0%, #E8F9E8 100%);
border-bottom: 1px solid var(--bs-border-color);
}
.rev-steps {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
list-style: none;
margin: 0;
padding: 16px 22px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.rev-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.rev-step {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 14px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
text-align: left;
transition: var(--transition);
/* the top edge fills when active */
}
.rev-step::before {
content: "";
position: absolute;
left: -1px;
right: -1px;
top: -1px;
height: 3px;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
background: transparent;
transition: var(--transition);
}
.rev-step {
/* the caret linking to the next step */
}
.rev-step::after {
content: "";
position: absolute;
left: calc(100% + 1px);
top: 50%;
transform: translateY(-50%);
border-width: 5px 0 5px 6px;
border-style: solid;
border-color: transparent transparent transparent var(--bs-border-color);
}
.rev-step.is-last::after {
display: none;
}
.rev-step:hover {
border-color: rgba(61, 94, 225, 0.3);
}
.rev-step.active {
border-color: rgba(61, 94, 225, 0.35);
box-shadow: var(--shadow);
}
.rev-step.active::before {
background: var(--bs-primary);
}
.rev-step.active .rev-step-n {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.rev-step.active .rev-step-txt span:last-child {
color: var(--bs-emphasis-color);
}
@media (max-width: 767.98px) {
.rev-step::after {
display: none;
}
}
.rev-step-n {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 5px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: var(--transition);
}
.rev-step-txt {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.rev-step-txt span:first-child {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.rev-step-txt span:last-child {
font-size: 13px;
font-weight: 600;
color: var(--bs-secondary-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* panels inside the workspace */
.rev-box {
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.rev-box-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.rev-box-head h6 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.rev-box-body {
padding: 16px;
}
/* a quoted note from the finance team */
.rev-quote {
padding: 14px 16px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border-left: 3px solid var(--bs-primary);
font-size: 13px;
line-height: 1.68;
color: var(--bs-emphasis-color);
}
/* ============================================================
PREMIUM ACCORDION + EMPTY STATE
============================================================ */
.rev-acc .accordion-item {
margin-bottom: 10px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--radius) !important;
overflow: hidden;
}
.rev-acc .accordion-button {
padding: 14px 16px;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
background: var(--bs-body-bg);
box-shadow: none;
}
.rev-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.rev-acc .accordion-button:focus {
box-shadow: none;
}
.rev-acc .accordion-body {
padding: 15px 16px;
font-size: 13px;
line-height: 1.65;
color: var(--bs-secondary-color);
border-top: 1px solid var(--bs-border-color);
}
.rev-empty {
padding: 40px 24px;
text-align: center;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px dashed var(--bs-border-color);
}
.rev-empty-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 14px;
border-radius: 8px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 25px;
}
/* ============================================================
24. AI OPERATING CENTER — prefix `ops-`
The ninth family, and the one that defines the module. Every other AI
page is a single application; this one is the surface they all launch
from, so it is the only family that goes dark and cinematic.
aix- enclosed cards, hairline dividers, chevron steppers
atn- banded surfaces, a vertical spine, stations, arc gauges
sdt- portrait medallion, chapter numerals, date gutter, dot scales
tto- slot grids, bracketed marks, before/after bars, a horizontal track
hwk- paper sheets, margin rules, grade seals, rubric strips
tch- tinted bands, facet bars, definition rows, medals, folded corners
fam- paired avatars, message threads, drop capitals, calendar chips
rev- dotted leaders, tabular amounts, probability blocks, forecast cone
ops- a dark mission surface, glass panels, bento spans, telemetry rails
and a glowing pipeline
Nothing here overrides a rule from the families above.
============================================================ */
/* dark surface tokens, scoped to this family only */
@media (prefers-reduced-motion: reduce) {
[class*=ops-],
[class*=ops-]::before,
[class*=ops-]::after {
animation: none !important;
transition: none !important;
}
}
/* ---- section heading: an eyebrow, a title, a hairline to the edge ---- */
.ops-hd {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 24px;
}
.ops-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bs-primary);
}
.ops-eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
}
.ops-hd-title {
margin: 0;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
.ops-hd-sub {
margin: 5px 0 0;
font-size: 13px;
color: var(--bs-secondary-color);
max-width: 720px;
}
/* ---- shared pieces ---------------------------------------------------- */
.ops-lbl {
display: block;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.ops-chip {
/* geometry, typography and surface come from the shared badge component */
}
.ops-chip i {
font-size: 12px;
}
.ops-chip.is-ai {
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.2);
color: var(--bs-primary);
}
.ops-chip.is-live {
background: #E8F9E8;
border-color: #D1F2D1;
color: #1ABE17;
}
.ops-chip.is-idle {
background: #E7F1FC;
border-color: #CFE2FA;
color: #0F65CD;
}
.ops-chip.is-queued {
background: #FEF8EA;
border-color: #FDF1D6;
color: #EAB300;
}
.ops-chip.is-off {
background: #FDE9ED;
border-color: #FAD4DA;
color: #E82646;
}
.ops-chip {
/* on the dark surface the chip becomes glass */
}
.ops-dark .ops-chip {
background: rgba(255, 255, 255, 0.07);
border-color: var(--bs-border-color);
color: var(--bs-emphasis-color);
}
.ops-dark .ops-chip.is-live {
background: rgba(26, 190, 23, 0.16);
border-color: rgba(26, 190, 23, 0.3);
color: #7BE87A;
}
.ops-dark .ops-chip.is-ai {
background: rgba(108, 139, 255, 0.16);
border-color: rgba(108, 139, 255, 0.32);
color: #A9BCFF;
}
/* a live pulsing dot, used for service status */
.ops-dot {
position: relative;
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #1ABE17;
flex-shrink: 0;
}
.ops-dot::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid currentColor;
color: #1ABE17;
opacity: 0;
animation: ops-pulse 2.4s ease-out infinite;
}
.ops-dot.is-idle {
background: #0F65CD;
}
.ops-dot.is-idle::after {
color: #0F65CD;
}
.ops-dot.is-queued {
background: #EAB300;
}
.ops-dot.is-queued::after {
color: #EAB300;
}
.ops-dot.is-off {
background: #E82646;
}
.ops-dot.is-off::after {
animation: none;
}
@keyframes ops-pulse {
0% {
transform: scale(0.6);
opacity: 0.9;
}
100% {
transform: scale(1.9);
opacity: 0;
}
}
/* health meter — four segments */
.ops-health {
display: inline-flex;
gap: 3px;
}
.ops-health i {
width: 14px;
height: 4px;
border-radius: 2px;
background: var(--bs-tertiary-bg);
}
.ops-health i.on {
background: #1ABE17;
}
.ops-health.is-warn i.on {
background: #EAB300;
}
.ops-health.is-bad i.on {
background: #E82646;
}
.ops-dark .ops-health i {
background: rgba(255, 255, 255, 0.16);
}
/* ============================================================
1. MISSION CONTROL — the dark cinematic hero
============================================================ */
.ops-mission {
position: relative;
overflow: hidden;
border-radius: 20px;
background: radial-gradient(90% 120% at 10% 0%, rgba(108, 139, 255, 0.28) 0%, transparent 55%), radial-gradient(70% 100% at 100% 100%, rgba(53, 214, 229, 0.2) 0%, transparent 58%), linear-gradient(160deg, var(--bs-secondary-color) 0%, var(--bs-emphasis-color) 100%);
color: var(--bs-body-color);
box-shadow: 0 24px 60px rgba(14, 21, 38, 0.28);
}
/* a fine grid, faded out toward the foot — the mission surface */
.ops-mission::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(var(--bs-border-color) 1px, transparent 1px), linear-gradient(90deg, var(--bs-border-color) 1px, transparent 1px);
background-size: 54px 54px;
mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
pointer-events: none;
}
/* a slow sweep of light across the surface */
.ops-mission::after {
content: "";
position: absolute;
top: -40%;
left: -30%;
width: 60%;
height: 180%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
transform: rotate(18deg);
animation: ops-sweep 9s ease-in-out infinite;
pointer-events: none;
}
@keyframes ops-sweep {
0%, 100% {
transform: translateX(-10%) rotate(18deg);
opacity: 0;
}
50% {
transform: translateX(120%) rotate(18deg);
opacity: 1;
}
}
.ops-mission-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 392px;
gap: 40px;
padding: 40px;
}
@media (max-width: 1299.98px) {
.ops-mission-inner {
grid-template-columns: minmax(0, 1fr);
gap: 30px;
padding: 32px;
}
}
@media (max-width: 575.98px) {
.ops-mission-inner {
padding: 24px;
}
}
.ops-mission-badge {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 6px 14px 6px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid var(--bs-border-color);
backdrop-filter: blur(8px);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.ops-mission-badge i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, var(--bs-primary), var(--accent-strong));
color: #0E1526;
font-size: 14px;
}
.ops-mission-title {
margin: 20px 0 14px;
font-size: 42px;
line-height: 1.12;
font-weight: 600;
letter-spacing: -0.03em;
color: var(--bs-emphasis-color);
}
.ops-mission-title em {
font-style: normal;
background: linear-gradient(90deg, var(--bs-primary), var(--accent-strong));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 991.98px) {
.ops-mission-title {
font-size: 32px;
}
}
@media (max-width: 575.98px) {
.ops-mission-title {
font-size: 26px;
}
}
.ops-mission-lead {
margin: 0;
max-width: 640px;
font-size: 15px;
line-height: 1.7;
color: var(--bs-body-color);
}
/* telemetry rail: figures on the dark surface, divided by hairlines */
.ops-rail {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin-top: 30px;
background: var(--bs-border-color);
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
overflow: hidden;
}
@media (max-width: 575.98px) {
.ops-rail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.ops-rail-cell {
padding: 15px 18px;
background: rgba(255, 255, 255, 0.02);
line-height: 1.3;
}
.ops-rail-cell b {
display: block;
margin-top: 5px;
font-size: 21px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.ops-rail-cell b small {
font-size: 12px;
font-weight: 500;
color: var(--bs-body-color);
}
.ops-rail-cell span:first-child {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
/* primary actions on the dark surface */
.ops-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 11px 20px;
border-radius: 10px;
border: 1px solid var(--bs-border-color);
background: rgba(255, 255, 255, 0.07);
color: var(--bs-emphasis-color);
font-size: 14px;
font-weight: 600;
backdrop-filter: blur(8px);
transition: var(--transition);
}
.ops-btn:hover {
background: rgba(255, 255, 255, 0.13);
color: var(--bs-emphasis-color);
transform: translateY(-1px);
}
.ops-btn.is-primary {
background: linear-gradient(135deg, var(--bs-primary), #4C6BE8);
border-color: transparent;
box-shadow: 0 8px 24px rgba(76, 107, 232, 0.4);
}
.ops-btn.is-primary:hover {
box-shadow: 0 12px 30px rgba(76, 107, 232, 0.5);
}
/* ---- the glass mission panel on the right ---- */
.ops-glass {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
padding: 22px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--bs-border-color);
backdrop-filter: blur(14px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* a floating orb behind the glass */
.ops-orb {
position: absolute;
border-radius: 50%;
filter: blur(30px);
pointer-events: none;
}
.ops-orb.o1 {
width: 160px;
height: 160px;
right: -40px;
top: -50px;
background: rgba(108, 139, 255, 0.5);
animation: ops-drift 14s ease-in-out infinite;
}
.ops-orb.o2 {
width: 120px;
height: 120px;
left: -30px;
bottom: -40px;
background: rgba(53, 214, 229, 0.38);
animation: ops-drift 18s ease-in-out infinite reverse;
}
@keyframes ops-drift {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(-16px, 20px);
}
}
/* the mission list inside the glass */
.ops-mission-row {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 0;
font-size: 13px;
color: var(--bs-body-color);
}
.ops-mission-row + .ops-mission-row {
border-top: 1px solid var(--bs-border-color);
}
.ops-mission-row b {
display: block;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.ops-mission-row time {
flex-shrink: 0;
font-size: 11px;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.45);
}
.ops-mission-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--bs-border-color);
color: var(--bs-emphasis-color);
font-size: 16px;
}
/* ============================================================
2. BENTO — the capability hub
============================================================ */
.ops-bento {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 1199.98px) {
.ops-bento {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.ops-bento {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* spans, so the grid reads as a bento rather than as a row of equals */
.ops-span-2 {
grid-column: span 2;
}
.ops-span-3 {
grid-column: span 3;
}
.ops-span-4 {
grid-column: span 4;
}
@media (max-width: 1199.98px) {
.ops-span-3, .ops-span-4 {
grid-column: span 4;
}
}
@media (max-width: 767.98px) {
.ops-span-2, .ops-span-3, .ops-span-4 {
grid-column: span 2;
}
}
.ops-tile {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 168px;
padding: 20px;
border-radius: 16px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
/* a corner glow that arrives on hover */
}
.ops-tile::after {
content: "";
position: absolute;
right: -50px;
top: -50px;
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle, var(--tint-primary) 0%, transparent 70%);
opacity: 0;
transition: var(--transition);
}
.ops-tile:hover {
border-color: rgba(61, 94, 225, 0.32);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.ops-tile:hover::after {
opacity: 1;
}
.ops-tile:hover .ops-tile-ic {
background: linear-gradient(135deg, var(--bs-primary), #02a8b5);
border-color: transparent;
color: #fff;
}
.ops-tile {
/* the feature tile carries the dark treatment */
}
.ops-tile.is-feature {
background: radial-gradient(80% 120% at 100% 0%, rgba(53, 214, 229, 0.18) 0%, transparent 60%), linear-gradient(150deg, #3D5EE1 0%, #202C4B 100%);
border-color: transparent;
color: rgba(255, 255, 255, 0.78);
}
.ops-tile.is-feature .ops-tile-title, .ops-tile.is-feature .ops-tile-fig {
color: #fff;
}
.ops-tile.is-feature .ops-tile-ic {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.18);
color: #fff;
}
.ops-tile.is-feature .ops-lbl {
color: rgba(255, 255, 255, 0.55);
}
.ops-tile.is-feature .ops-health i {
background: rgba(255, 255, 255, 0.2);
}
.ops-tile-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--tint-primary);
border: 1px solid transparent;
color: var(--bs-primary);
font-size: 20px;
transition: var(--transition);
}
.ops-tile-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.ops-tile-fig {
font-size: 26px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
/* ---- the full-width tile ------------------------------------------------
A tile spanning the whole grid cannot keep the stacked layout: the copy
would run the full width and the figure would sit alone in dead space.
From lg up it becomes three columns — identity, reading, controls — and
drops the stacked min-height so it reads as a banner, not a short card. */
@media (min-width: 992px) {
.ops-tile.is-wide {
display: grid;
grid-template-columns: 268px minmax(0, 1fr) auto;
align-items: center;
gap: 28px;
min-height: 0;
padding: 22px 24px;
}
.ops-tile.is-wide .ops-tile-foot {
margin-top: 0;
padding-top: 0;
border-top: 0;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
}
/* identity column of the wide tile: icon beside the figure, not above it */
.ops-tile-lead {
display: flex;
align-items: center;
gap: 14px;
}
.ops-tile-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
.is-feature .ops-tile-foot {
border-top-color: rgba(255, 255, 255, 0.14);
}
/* ============================================================
3. LAUNCHER — large application tiles
============================================================ */
.ops-launch {
position: relative;
display: flex;
align-items: center;
gap: 16px;
height: 100%;
padding: 20px;
border-radius: 14px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
/* a thin accent that fills from the left on hover */
}
.ops-launch::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--bs-primary), #02a8b5);
transform: scaleY(0);
transform-origin: top;
transition: var(--transition);
}
.ops-launch:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--aix-glow);
}
.ops-launch:hover::before {
transform: scaleY(1);
}
.ops-launch:hover .ops-launch-go {
transform: translateX(4px);
color: var(--bs-primary);
}
.ops-launch-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 22px;
}
.ops-launch-title {
margin: 0 0 3px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.ops-launch-go {
flex-shrink: 0;
font-size: 18px;
color: var(--bs-secondary-color);
transition: var(--transition);
}
/* ============================================================
4. OPERATIONS FEED — a status rail down the left of each card
============================================================ */
.ops-op {
position: relative;
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px 16px 22px;
border-radius: 12px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.ops-op + .ops-op {
margin-top: 12px;
}
.ops-op {
/* the rail */
}
.ops-op::before {
content: "";
position: absolute;
left: 10px;
top: 16px;
bottom: 16px;
width: 3px;
border-radius: 2px;
background: #1ABE17;
}
.ops-op.is-running::before {
background: var(--bs-primary);
}
.ops-op.is-queued::before {
background: #EAB300;
}
.ops-op.is-alert::before {
background: #E82646;
}
.ops-op:hover {
box-shadow: var(--shadow);
}
.ops-op-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 17px;
}
.ops-op-title {
margin: 0 0 3px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
5. PIPELINE — six stages with a glowing connector
============================================================ */
.ops-pipe {
position: relative;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 1199.98px) {
.ops-pipe {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 24px;
}
}
@media (max-width: 575.98px) {
.ops-pipe {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.ops-stage {
position: relative;
padding: 20px 16px 16px;
border-radius: 14px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
text-align: center;
transition: var(--transition);
/* the flowing connector to the next stage */
}
.ops-stage::after {
content: "";
position: absolute;
left: calc(100% + 1px);
top: 50%;
width: 10px;
height: 2px;
background: var(--bs-border-color);
z-index: 1;
}
.ops-stage:last-child::after {
display: none;
}
.ops-stage.is-done {
border-color: rgba(26, 190, 23, 0.3);
background: #E8F9E8;
}
.ops-stage.is-done::after {
background: #1ABE17;
}
.ops-stage.is-live {
border-color: rgba(61, 94, 225, 0.35);
box-shadow: var(--aix-glow);
}
@media (max-width: 1199.98px) {
.ops-stage::after {
display: none;
}
}
.ops-stage-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: 12px;
border-radius: 50%;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 20px;
}
.is-done .ops-stage-ic {
background: #1ABE17;
border-color: #1ABE17;
color: #fff;
}
.is-live .ops-stage-ic {
background: linear-gradient(135deg, var(--bs-primary), #02a8b5);
border-color: transparent;
color: #fff;
animation: ops-breathe 2.6s ease-in-out infinite;
}
@keyframes ops-breathe {
0%, 100% {
box-shadow: 0 0 0 0 rgba(61, 94, 225, 0.45);
}
50% {
box-shadow: 0 0 0 8px rgba(61, 94, 225, 0);
}
}
.ops-stage-n {
display: block;
margin-bottom: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--bs-secondary-color);
}
.ops-stage-title {
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
6. AUTOMATION CARDS — a switch-led head, run times below
============================================================ */
.ops-auto {
display: flex;
flex-direction: column;
height: 100%;
border-radius: 14px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.ops-auto:hover {
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow-lift);
}
.ops-auto-head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.ops-auto-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.ops-auto-body {
padding: 16px 18px;
}
.ops-kv {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
font-size: 12.5px;
color: var(--bs-secondary-color);
}
.ops-kv + .ops-kv {
border-top: 1px dashed var(--bs-border-color);
}
.ops-kv b {
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
7. AGENT GALLERY — a ringed glyph and capability chips
============================================================ */
.ops-agent {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
border-radius: 14px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.ops-agent:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow-lift);
}
.ops-agent-ic {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 14px;
border-radius: 16px;
background: linear-gradient(135deg, var(--tint-primary), var(--bs-secondary-bg));
color: var(--bs-primary);
font-size: 24px;
/* a dashed orbit around the glyph */
}
.ops-agent-ic::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 20px;
border: 1px dashed var(--bs-border-color);
}
.ops-agent-name {
margin: 0 0 4px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.ops-caps {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 12px 0;
}
.ops-caps span {
padding: 3px 9px;
border-radius: 5px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 11px;
color: var(--bs-secondary-color);
}
.ops-agent-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
8. KNOWLEDGE TILES — a count in the corner
============================================================ */
.ops-know {
position: relative;
display: flex;
align-items: flex-start;
gap: 14px;
height: 100%;
padding: 18px;
border-radius: 14px;
background: var(--bs-secondary-bg);
border: 1px solid transparent;
transition: var(--transition);
}
.ops-know:hover {
background: var(--bs-body-bg);
border-color: rgba(61, 94, 225, 0.28);
box-shadow: var(--shadow);
}
.ops-know-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 18px;
}
.ops-know-title {
margin: 0 0 3px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.ops-know-n {
flex-shrink: 0;
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--bs-primary);
}
/* ============================================================
9. COPILOT — a dark command launcher
============================================================ */
.ops-console {
position: relative;
overflow: hidden;
border-radius: 18px;
background: radial-gradient(70% 120% at 100% 0%, rgba(53, 214, 229, 0.16) 0%, transparent 55%), linear-gradient(150deg, var(--bs-secondary-color) 0%, var(--bs-emphasis-color) 100%);
color: var(--bs-body-color);
padding: 30px;
}
@media (max-width: 575.98px) {
.ops-console {
padding: 22px;
}
}
.ops-console::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(90deg, var(--bs-border-color) 1px, transparent 1px);
background-size: 48px 100%;
mask-image: linear-gradient(180deg, #000, transparent 70%);
pointer-events: none;
}
.ops-cmd {
position: relative;
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 15px 18px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--bs-border-color);
color: var(--bs-body-color);
transition: var(--transition);
}
.ops-cmd:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(108, 139, 255, 0.4);
color: var(--bs-body-color);
transform: translateX(3px);
}
.ops-cmd:hover .ops-cmd-ic {
background: linear-gradient(135deg, var(--bs-primary), var(--accent-strong));
color: #0E1526;
}
.ops-cmd-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 11px;
background: rgba(255, 255, 255, 0.08);
color: var(--bs-emphasis-color);
font-size: 18px;
transition: var(--transition);
}
.ops-cmd-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* a keyboard hint on the dark surface */
.ops-kbd {
flex-shrink: 0;
padding: 3px 8px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--bs-border-color);
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
}
/* ============================================================
10. SHOWCASE — a corner ribbon on what is new
============================================================ */
.ops-new {
position: relative;
height: 100%;
padding: 20px;
border-radius: 14px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.ops-new:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
}
/* the ribbon across the top-right corner */
.ops-ribbon {
position: absolute;
right: -34px;
top: 14px;
width: 130px;
padding: 4px 0;
transform: rotate(38deg);
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
color: #fff;
text-align: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ops-ribbon.is-soon {
background: linear-gradient(90deg, #EAB300, #F9C55A);
}
.ops-ribbon.is-lab {
background: linear-gradient(90deg, #4A00E5, #3D5EE1);
}
.ops-new-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: 14px;
border-radius: 13px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 20px;
}
.ops-new-title {
margin: 0 0 6px;
padding-right: 40px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
WORKSPACE OFFCANVAS — a glass rail stepper
============================================================ */
.offcanvas.offcanvas-end.ops-ws {
width: 90% !important;
max-width: 1500px !important;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-end.ops-ws {
width: 100% !important;
}
}
.offcanvas.offcanvas-end.ops-ws .offcanvas-body {
padding: 24px;
}
/* the workspace head keeps the dark mission treatment */
.ops-ws-head {
position: relative;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding: 22px;
overflow: hidden;
background: radial-gradient(70% 140% at 0% 0%, rgba(108, 139, 255, 0.3) 0%, transparent 58%), linear-gradient(150deg, var(--bs-secondary-color) 0%, var(--bs-emphasis-color) 100%);
color: var(--bs-body-color);
}
.ops-ws-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: 16px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--bs-border-color);
color: #fff;
font-size: 26px;
backdrop-filter: blur(8px);
}
.ops-ws-title {
margin: 0 0 4px;
font-size: 19px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
}
/* the stepper: pills on a rail, the completed portion glowing */
.ops-steps {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
list-style: none;
margin: 0;
padding: 0;
background: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.ops-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.ops-step {
position: relative;
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 18px 16px;
border: 0;
background: transparent;
text-align: left;
transition: var(--transition);
/* hairline between steps */
}
.ops-step + .ops-step, .ops-step {
border-right: 1px solid var(--bs-border-color);
}
.ops-step:last-child {
border-right: 0;
}
.ops-step {
/* the glow bar under the active step */
}
.ops-step::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 3px;
background: transparent;
transition: var(--transition);
}
.ops-step:hover {
background: var(--bs-secondary-bg);
}
.ops-step.active {
background: var(--tint-primary);
}
.ops-step.active::after {
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
box-shadow: 0 0 12px rgba(61, 94, 225, 0.5);
}
.ops-step.active .ops-step-n {
background: linear-gradient(135deg, var(--bs-primary), #02a8b5);
border-color: transparent;
color: #fff;
}
.ops-step.active .ops-step-txt span:last-child {
color: var(--bs-emphasis-color);
}
.ops-step-n {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 11px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: var(--transition);
}
.ops-step-txt {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.ops-step-txt span:first-child {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.ops-step-txt span:last-child {
font-size: 13px;
font-weight: 600;
color: var(--bs-secondary-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* panels inside the workspace */
.ops-box {
height: 100%;
border-radius: 14px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.ops-box-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.ops-box-head h6 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.ops-box-body {
padding: 16px;
}
/* progress readout used while intelligence generates */
.ops-prog {
display: block;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, var(--bs-primary) 0 calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) calc(var(--p, 0) * 1%) 100%);
}
.ops-quote {
padding: 15px 17px;
border-radius: 12px;
background: linear-gradient(135deg, var(--tint-primary), var(--bs-secondary-bg));
border: 1px solid var(--bs-border-color);
font-size: 13px;
line-height: 1.68;
color: var(--bs-emphasis-color);
}
/* ============================================================
PREMIUM ACCORDION + EMPTY STATE
============================================================ */
.ops-acc .accordion-item {
margin-bottom: 10px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 12px !important;
overflow: hidden;
}
.ops-acc .accordion-button {
padding: 15px 17px;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
background: var(--bs-body-bg);
box-shadow: none;
}
.ops-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.ops-acc .accordion-button:focus {
box-shadow: none;
}
.ops-acc .accordion-body {
padding: 15px 17px;
font-size: 13px;
line-height: 1.65;
color: var(--bs-secondary-color);
border-top: 1px solid var(--bs-border-color);
}
.ops-empty {
padding: 40px 24px;
text-align: center;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px dashed var(--bs-border-color);
color: var(--bs-body-color);
}
.ops-empty-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid var(--bs-border-color);
color: #fff;
font-size: 25px;
}
/* ============================================================
25. STUDENT SUCCESS — prefix `lrn-`
The tenth family, and the only one addressed to a student rather than to
staff. Its language is warmer and lighter: streak grids, quest bars,
squircle progress frames, a day schedule and milestone tracks.
aix- enclosed cards, hairline dividers, chevron steppers
atn- banded surfaces, a vertical spine, stations, arc gauges
sdt- portrait medallion, chapter numerals, date gutter, dot scales
tto- slot grids, bracketed marks, before/after bars, a horizontal track
hwk- paper sheets, margin rules, grade seals, rubric strips
tch- tinted bands, facet bars, definition rows, medals, folded corners
fam- paired avatars, message threads, drop capitals, calendar chips
rev- dotted leaders, tabular amounts, probability blocks, forecast cone
ops- dark mission surface, glass panels, bento spans, glowing pipeline
lrn- streak grids, quest bars, squircle frames, a day schedule,
milestone tracks and achievement badges
Nothing here overrides a rule from the families above.
============================================================ */
@media (prefers-reduced-motion: reduce) {
[class*=lrn-],
[class*=lrn-]::before,
[class*=lrn-]::after {
animation: none !important;
transition: none !important;
}
}
/* ---- section heading: a soft squircle glyph and a ruled title -------- */
.lrn-hd {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
}
@media (max-width: 767.98px) {
.lrn-hd {
flex-wrap: wrap;
}
}
.lrn-hd-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 16px;
background: linear-gradient(135deg, var(--tint-primary), #E6F9FF);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 21px;
}
.lrn-hd-title {
position: relative;
display: inline-block;
margin: 0 0 6px;
padding-bottom: 6px;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
/* a short gradient rule under the title only */
}
.lrn-hd-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 42px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
}
.lrn-hd-sub {
margin: 0;
font-size: 13px;
color: var(--bs-secondary-color);
max-width: 700px;
}
/* ---- shared pieces ---------------------------------------------------- */
.lrn-lbl {
display: block;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.lrn-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-emphasis-color);
white-space: nowrap;
}
.lrn-chip i {
font-size: 13px;
}
.lrn-chip.is-ai {
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.2);
color: var(--bs-primary);
}
.lrn-chip.is-go {
background: #E8F9E8;
border-color: #D1F2D1;
color: #1ABE17;
}
.lrn-chip.is-now {
background: #E7F1FC;
border-color: #CFE2FA;
color: #0F65CD;
}
.lrn-chip.is-soon {
background: #FEF8EA;
border-color: #FDF1D6;
color: #EAB300;
}
.lrn-chip.is-hot {
background: #FDE9ED;
border-color: #FAD4DA;
color: #E82646;
}
/* difficulty: three ascending bars */
.lrn-diff {
display: inline-flex;
align-items: flex-end;
gap: 3px;
height: 12px;
}
.lrn-diff i {
width: 4px;
border-radius: 1px;
background: var(--bs-tertiary-bg);
}
.lrn-diff i:nth-child(1) {
height: 50%;
}
.lrn-diff i:nth-child(2) {
height: 75%;
}
.lrn-diff i:nth-child(3) {
height: 100%;
}
.lrn-diff i.on {
background: var(--bs-primary);
}
.lrn-diff.is-hard i.on {
background: #E82646;
}
.lrn-diff.is-mid i.on {
background: #EAB300;
}
/* ============================================================
HERO — a bright success hub with a streak grid
============================================================ */
.lrn-hub {
position: relative;
overflow: hidden;
border-radius: 20px;
background: radial-gradient(80% 130% at 0% 0%, rgba(61, 94, 225, 0.16) 0%, transparent 52%), radial-gradient(70% 120% at 100% 100%, rgba(2, 168, 181, 0.16) 0%, transparent 52%), var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
/* soft floating shapes, the only decoration on the surface */
.lrn-hub::before,
.lrn-hub::after {
content: "";
position: absolute;
border-radius: 40%;
pointer-events: none;
}
.lrn-hub::before {
width: 220px;
height: 220px;
right: 8%;
top: -110px;
background: rgba(61, 94, 225, 0.07);
animation: lrn-float 16s ease-in-out infinite;
}
.lrn-hub::after {
width: 160px;
height: 160px;
left: 12%;
bottom: -100px;
background: rgba(2, 168, 181, 0.08);
animation: lrn-float 20s ease-in-out infinite reverse;
}
@keyframes lrn-float {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(18px, -14px) rotate(28deg);
}
}
.lrn-hub-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 348px;
gap: 34px;
padding: 32px;
}
@media (max-width: 1299.98px) {
.lrn-hub-inner {
grid-template-columns: minmax(0, 1fr);
gap: 26px;
}
}
@media (max-width: 575.98px) {
.lrn-hub-inner {
padding: 22px;
}
}
.lrn-hub-hello {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px 6px 6px;
border-radius: 999px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.lrn-hub-hello .avatar {
width: 26px;
height: 26px;
}
.lrn-hub-title {
margin: 16px 0 10px;
font-size: 32px;
line-height: 1.2;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
.lrn-hub-title em {
font-style: normal;
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 767.98px) {
.lrn-hub-title {
font-size: 25px;
}
}
/* today's mission, set on a tinted shelf */
.lrn-mission {
display: flex;
align-items: center;
gap: 16px;
margin-top: 22px;
padding: 18px;
border-radius: 16px;
background: linear-gradient(120deg, var(--tint-primary), var(--bs-secondary-bg));
border: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.lrn-mission {
flex-wrap: wrap;
}
}
/* a squircle frame that fills to --p, used for mission and journey cards */
.lrn-frame {
position: relative;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
border-radius: 20px;
background: var(--bs-body-bg);
color: var(--bs-primary);
font-size: 24px;
font-weight: 700;
/* the frame itself is a conic sweep masked to a ring */
}
.lrn-frame::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
background: conic-gradient(from 180deg, var(--bs-primary) 0deg calc(var(--p, 0) * 3.6deg), var(--bs-tertiary-bg) calc(var(--p, 0) * 3.6deg) 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
padding: 3px;
}
.lrn-frame.is-sm {
width: 46px;
height: 46px;
border-radius: 15px;
font-size: 17px;
}
.lrn-hub-facts {
display: flex;
flex-wrap: wrap;
gap: 14px 30px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--bs-border-color);
}
.lrn-fact {
display: flex;
flex-direction: column;
gap: 3px;
line-height: 1.25;
}
.lrn-fact b {
font-size: 16px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ---- the streak panel ---- */
.lrn-streak-panel {
display: flex;
flex-direction: column;
gap: 16px;
padding: 22px;
border-radius: 18px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--aix-glow);
}
.lrn-flame {
display: flex;
align-items: center;
gap: 14px;
}
.lrn-flame i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 16px;
background: linear-gradient(135deg, #EAB300, #E82646);
color: #fff;
font-size: 24px;
}
.lrn-flame b {
font-size: 28px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
/* the streak grid — four weeks of study days */
.lrn-streak {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 5px;
}
.lrn-streak i {
aspect-ratio: 1;
border-radius: 6px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
}
.lrn-streak i.d1 {
background: rgba(61, 94, 225, 0.22);
border-color: transparent;
}
.lrn-streak i.d2 {
background: rgba(61, 94, 225, 0.48);
border-color: transparent;
}
.lrn-streak i.d3 {
background: var(--bs-primary);
border-color: transparent;
}
.lrn-streak i.today {
background: linear-gradient(135deg, #EAB300, #E82646);
border-color: transparent;
}
.lrn-streak-days {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 5px;
font-size: 10px;
font-weight: 600;
text-align: center;
color: var(--bs-secondary-color);
}
/* ============================================================
JOURNEY CARDS — a squircle frame, chips, then actions
============================================================ */
.lrn-card {
display: flex;
flex-direction: column;
gap: 13px;
height: 100%;
padding: 18px;
border-radius: 16px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.lrn-card:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.lrn-card-title {
margin: 0 0 3px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* the AI line, quoted softly */
.lrn-say {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 11px 13px;
border-radius: 12px;
background: var(--tint-primary);
font-size: 12.5px;
line-height: 1.55;
color: var(--bs-emphasis-color);
}
.lrn-say i {
flex-shrink: 0;
margin-top: 1px;
color: var(--bs-primary);
font-size: 15px;
}
.lrn-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding-top: 12px;
margin-top: auto;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
EXPLAINABLE AI — a breadcrumb trail across the top
============================================================ */
.lrn-why {
position: relative;
height: 100%;
padding: 20px;
border-radius: 16px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.lrn-why:hover {
box-shadow: var(--shadow-lift);
}
/* the trail: observation, reasoning, evidence, action */
.lrn-trail {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding-bottom: 14px;
margin-bottom: 16px;
border-bottom: 1px dashed var(--bs-border-color);
}
.lrn-trail span {
padding: 3px 9px;
border-radius: 7px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.lrn-trail span.on {
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.22);
color: var(--bs-primary);
}
.lrn-trail i {
font-size: 13px;
color: var(--bs-border-color);
}
.lrn-why-obs {
margin: 0 0 12px;
font-size: 16px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.lrn-block {
margin-bottom: 14px;
}
.lrn-block span:first-child {
display: block;
margin-bottom: 4px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.lrn-ev {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 5px 0;
font-size: 12.5px;
color: var(--bs-secondary-color);
}
.lrn-ev i {
flex-shrink: 0;
margin-top: 5px;
font-size: 6px;
color: var(--bs-primary);
}
.lrn-why-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding-top: 14px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
DAY PLANNER — a time column with study blocks
============================================================ */
.lrn-day {
display: flex;
flex-direction: column;
}
.lrn-slot {
display: grid;
grid-template-columns: 78px 1fr;
gap: 18px;
align-items: stretch;
}
@media (max-width: 575.98px) {
.lrn-slot {
grid-template-columns: 58px 1fr;
gap: 12px;
}
}
.lrn-time {
position: relative;
padding: 18px 0;
text-align: right;
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-secondary-color);
/* the rail running through the times */
}
.lrn-time::after {
content: "";
position: absolute;
right: -10px;
top: 0;
bottom: 0;
width: 2px;
background: var(--bs-border-color);
}
.lrn-slot:first-child .lrn-time::after {
top: 22px;
}
.lrn-slot:last-child .lrn-time::after {
bottom: calc(100% - 22px);
}
.lrn-block-card {
display: flex;
align-items: center;
gap: 14px;
margin: 6px 0;
padding: 14px 16px;
border-radius: 14px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-left: 4px solid var(--bs-primary);
transition: var(--transition);
}
.lrn-block-card:hover {
box-shadow: var(--shadow-lift);
transform: translateX(3px);
}
.lrn-block-card.is-done {
border-left-color: #1ABE17;
background: var(--bs-secondary-bg);
}
.lrn-block-card.is-now {
border-left-color: #EAB300;
box-shadow: var(--aix-glow);
}
@media (max-width: 575.98px) {
.lrn-block-card {
flex-wrap: wrap;
}
}
.lrn-block-title {
margin: 0 0 2px;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* a slim progress rule used inside blocks and goals */
.lrn-bar {
display: block;
height: 5px;
border-radius: 3px;
background: linear-gradient(90deg, var(--bs-primary) 0 calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) calc(var(--p, 0) * 1%) 100%);
}
.lrn-bar.is-go {
background: linear-gradient(90deg, #1ABE17 0 calc(var(--p, 0) * 1%), var(--bs-tertiary-bg) calc(var(--p, 0) * 1%) 100%);
}
/* ============================================================
COACH CARDS — a bold call to action
============================================================ */
.lrn-coach {
display: flex;
flex-direction: column;
height: 100%;
border-radius: 16px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.lrn-coach:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow-lift);
}
.lrn-coach:hover .lrn-coach-ic {
transform: scale(1.06) rotate(-4deg);
}
.lrn-coach-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 18px 0;
}
.lrn-coach-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 16px;
background: linear-gradient(135deg, var(--bs-primary), #02a8b5);
color: #fff;
font-size: 21px;
transition: var(--transition);
}
.lrn-coach-body {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 auto;
padding: 14px 18px 18px;
}
.lrn-coach-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.lrn-coach-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed var(--bs-border-color);
}
/* ============================================================
GOAL TRACKS — milestones along a filled rail
============================================================ */
.lrn-goal {
padding: 18px 20px;
border-radius: 16px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.lrn-goal + .lrn-goal {
margin-top: 14px;
}
.lrn-goal:hover {
box-shadow: var(--shadow);
}
.lrn-goal-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 18px;
}
.lrn-goal-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* the track: a rail with milestone dots sitting on it */
.lrn-track {
position: relative;
display: flex;
justify-content: space-between;
padding-top: 22px;
/* the unfilled rail */
}
.lrn-track::before {
content: "";
position: absolute;
left: 6px;
right: 6px;
top: 6px;
height: 3px;
border-radius: 2px;
background: var(--bs-tertiary-bg);
}
.lrn-track {
/* the filled portion */
}
.lrn-track::after {
content: "";
position: absolute;
left: 6px;
top: 6px;
width: calc((100% - 12px) * var(--p, 0) / 100);
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--bs-primary), #02a8b5);
}
.lrn-mile {
position: relative;
z-index: 1;
flex: 1 1 0;
text-align: center;
font-size: 11px;
color: var(--bs-secondary-color);
}
.lrn-mile::before {
content: "";
position: absolute;
left: 50%;
top: -22px;
transform: translateX(-50%);
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 3px solid var(--bs-tertiary-bg);
}
.lrn-mile:first-child::before {
left: 6px;
transform: none;
}
.lrn-mile:last-child::before {
left: auto;
right: 6px;
transform: none;
}
.lrn-mile.is-done::before {
background: var(--bs-primary);
border-color: var(--bs-primary);
}
.lrn-mile.is-now::before {
border-color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
/* ============================================================
COMPANION TILES — icon, title, arrow
============================================================ */
.lrn-do {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 16px;
border-radius: 14px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.lrn-do:hover {
border-color: rgba(61, 94, 225, 0.3);
background: var(--tint-primary);
}
.lrn-do:hover .lrn-do-go {
transform: translateX(4px);
color: var(--bs-primary);
}
.lrn-do-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 14px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 19px;
}
.lrn-do-go {
flex-shrink: 0;
font-size: 17px;
color: var(--bs-secondary-color);
transition: var(--transition);
}
/* ============================================================
GROWTH STORY — badges on a dashed rail
============================================================ */
.lrn-story {
position: relative;
padding-left: 62px;
}
.lrn-story::before {
content: "";
position: absolute;
left: 23px;
top: 16px;
bottom: 16px;
border-left: 2px dashed var(--bs-border-color);
}
.lrn-beat {
position: relative;
padding: 16px 18px;
border-radius: 14px;
background: var(--bs-secondary-bg);
border: 1px solid transparent;
transition: var(--transition);
}
.lrn-beat + .lrn-beat {
margin-top: 14px;
}
.lrn-beat:hover {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
box-shadow: var(--shadow);
}
.lrn-beat {
/* the badge sits on the rail */
}
.lrn-beat::before {
content: "";
position: absolute;
left: -62px;
top: 14px;
width: 48px;
height: 48px;
border-radius: 16px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.lrn-beat.is-done::before {
background: linear-gradient(135deg, var(--bs-primary), #02a8b5);
border-color: transparent;
}
.lrn-beat.is-win::before {
background: linear-gradient(135deg, #EAB300, #E82646);
border-color: transparent;
}
.lrn-beat-ic {
position: absolute;
left: -62px;
top: 14px;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: 20px;
color: var(--bs-secondary-color);
}
.is-done .lrn-beat-ic, .is-win .lrn-beat-ic {
color: #fff;
}
.lrn-beat-title {
margin: 0 0 3px;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
OPPORTUNITY ROWS
============================================================ */
.lrn-opp {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 16px;
border-radius: 14px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.lrn-opp:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow-lift);
}
.lrn-opp-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 20px;
}
.lrn-opp-ic.is-go {
background: #E8F9E8;
color: #1ABE17;
}
.lrn-opp-ic.is-soon {
background: #FEF8EA;
color: #EAB300;
}
.lrn-opp-ic.is-now {
background: #E7F1FC;
color: #0F65CD;
}
.lrn-opp-title {
margin: 0 0 2px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
INSPIRATION TILES — soft tinted, quoted
============================================================ */
.lrn-tip {
position: relative;
height: 100%;
padding: 18px 20px;
border-radius: 16px;
background: linear-gradient(150deg, var(--tint-primary) 0%, var(--bs-body-bg) 60%);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.lrn-tip:hover {
box-shadow: var(--shadow-lift);
}
.lrn-tip.is-go {
background: linear-gradient(150deg, #E8F9E8 0%, var(--bs-body-bg) 60%);
}
.lrn-tip.is-soon {
background: linear-gradient(150deg, #FEF8EA 0%, var(--bs-body-bg) 60%);
}
.lrn-tip.is-now {
background: linear-gradient(150deg, #E7F1FC 0%, var(--bs-body-bg) 60%);
}
.lrn-tip-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 12px;
border-radius: 13px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 17px;
}
.lrn-tip-title {
margin: 0 0 6px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
WORKSPACE OFFCANVAS — a quest bar stepper
============================================================ */
.offcanvas.offcanvas-end.lrn-ws {
width: 88% !important;
max-width: 1420px !important;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-end.lrn-ws {
width: 100% !important;
}
}
.offcanvas.offcanvas-end.lrn-ws .offcanvas-body {
padding: 22px;
}
.lrn-ws-head {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding: 22px;
background: radial-gradient(70% 130% at 0% 0%, rgba(61, 94, 225, 0.14) 0%, transparent 54%), radial-gradient(60% 120% at 100% 100%, rgba(2, 168, 181, 0.14) 0%, transparent 54%), var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color);
}
/* one rounded bar cut into five; the active segment grows to show its label */
.lrn-quest {
display: flex;
gap: 6px;
list-style: none;
margin: 0;
padding: 16px 22px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.lrn-quest li {
display: flex;
}
@media (max-width: 767.98px) {
.lrn-quest {
flex-wrap: wrap;
}
.lrn-quest li {
flex: 1 1 45%;
}
}
.lrn-questbtn {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px 16px;
border: 1px solid var(--bs-border-color);
border-radius: 999px;
background: var(--bs-body-bg);
white-space: nowrap;
transition: var(--transition);
}
.lrn-questbtn:hover {
border-color: rgba(61, 94, 225, 0.35);
}
.lrn-questbtn {
/* inactive steps shrink to the number, the active one takes the room */
}
li:has(.lrn-questbtn) {
flex: 0 1 auto;
}
li:has(.lrn-questbtn.active) {
flex: 1 1 auto;
}
.lrn-questbtn .lrn-questbtn-txt {
display: none;
}
.lrn-questbtn.active {
background: linear-gradient(135deg, var(--bs-primary), #02a8b5);
border-color: transparent;
box-shadow: 0 8px 20px rgba(61, 94, 225, 0.28);
}
.lrn-questbtn.active .lrn-questbtn-n {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
.lrn-questbtn.active .lrn-questbtn-txt {
display: flex;
color: #fff;
}
@media (max-width: 767.98px) {
.lrn-questbtn .lrn-questbtn-txt {
display: flex;
}
}
.lrn-questbtn-n {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: var(--transition);
}
.lrn-questbtn-txt {
flex-direction: column;
min-width: 0;
line-height: 1.2;
text-align: left;
}
.lrn-questbtn-txt span:first-child {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.75;
}
.lrn-questbtn-txt span:last-child {
font-size: 13px;
font-weight: 600;
}
/* panels inside the workspace */
.lrn-box {
height: 100%;
border-radius: 14px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.lrn-box-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.lrn-box-head h6 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.lrn-box-body {
padding: 16px;
}
.lrn-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.lrn-row + .lrn-row {
border-top: 1px dashed var(--bs-border-color);
}
.lrn-row b {
font-weight: 600;
}
/* ============================================================
PREMIUM ACCORDION + EMPTY STATE
============================================================ */
.lrn-acc .accordion-item {
margin-bottom: 10px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 14px !important;
overflow: hidden;
}
.lrn-acc .accordion-button {
padding: 14px 16px;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
background: var(--bs-body-bg);
box-shadow: none;
}
.lrn-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.lrn-acc .accordion-button:focus {
box-shadow: none;
}
.lrn-acc .accordion-body {
padding: 15px 16px;
font-size: 13px;
line-height: 1.65;
color: var(--bs-secondary-color);
border-top: 1px solid var(--bs-border-color);
}
.lrn-empty {
padding: 40px 24px;
text-align: center;
border-radius: 16px;
background: linear-gradient(150deg, var(--tint-primary), var(--bs-body-bg));
border: 1px dashed var(--bs-border-color);
}
.lrn-empty-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin-bottom: 14px;
border-radius: 20px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
color: var(--bs-primary);
font-size: 26px;
}
/*-----------------
Notifications — reusable notification centre components
A shared vocabulary for notification surfaces anywhere in the product,
not styles for one page. Class prefix `ntf-`.
The language here is an inbox rather than a workspace: date dividers,
an unread rail down the left of each row, category chips, priority
ribs and a sticky filter bar. Nothing here depends on the AI families
in `_ai-insights.scss` and nothing overrides them.
Contents
1. Tokens
2. Hero
3. Sticky filter toolbar
4. Feed — groups, rows, states
5. Category cards
6. Priority cards
7. Quick actions
8. Timeline
9. Insights + announcements
10. Preferences
11. Offcanvas + modal + empty state
-----------------*/
/* ============================================================
1. TOKENS
============================================================ */
@media (prefers-reduced-motion: reduce) {
[class*=ntf-],
[class*=ntf-]::before,
[class*=ntf-]::after {
animation: none !important;
transition: none !important;
}
}
/* ---- shared small pieces ---------------------------------------------- */
.ntf-lbl {
display: block;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* category chip — a coloured dot and a name */
.ntf-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 11px;
font-weight: 600;
color: var(--bs-emphasis-color);
white-space: nowrap;
}
.ntf-chip::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bs-primary);
}
.ntf-chip.is-academic::before {
background: #3D5EE1;
}
.ntf-chip.is-attendance::before {
background: #0F65CD;
}
.ntf-chip.is-fees::before {
background: #1ABE17;
}
.ntf-chip.is-exams::before {
background: #4A00E5;
}
.ntf-chip.is-library::before {
background: #02a8b5;
}
.ntf-chip.is-transport::before {
background: #EAB300;
}
.ntf-chip.is-hostel::before {
background: #6FCCD8;
}
.ntf-chip.is-medical::before {
background: #E82646;
}
.ntf-chip.is-hr::before {
background: #E83E8C;
}
.ntf-chip.is-security::before {
background: #202C4B;
}
.ntf-chip.is-system::before {
background: #677788;
}
.ntf-chip {
/* a plain variant with no dot, for counts and meta */
}
.ntf-chip.is-plain::before {
display: none;
}
/* priority badge — a small rib rather than a pill */
.ntf-pri {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.ntf-pri::before {
content: "";
width: 3px;
height: 12px;
border-radius: 2px;
background: var(--bs-tertiary-bg);
}
.ntf-pri.is-critical {
color: #E82646;
}
.ntf-pri.is-critical::before {
background: #E82646;
}
.ntf-pri.is-high {
color: #EAB300;
}
.ntf-pri.is-high::before {
background: #EAB300;
}
.ntf-pri.is-medium {
color: #0F65CD;
}
.ntf-pri.is-medium::before {
background: #0F65CD;
}
.ntf-pri.is-low {
color: #1ABE17;
}
.ntf-pri.is-low::before {
background: #1ABE17;
}
/* an unread count bubble */
.ntf-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: var(--bs-primary);
color: #fff;
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.ntf-count.is-quiet {
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
}
.ntf-count.is-alert {
background: #E82646;
}
/* ============================================================
2. HERO
============================================================ */
.ntf-hero {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: radial-gradient(70% 130% at 100% 0%, #F2F5FF 0%, transparent 58%), var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
/* a stack of faint envelopes in the corner, the only decoration */
.ntf-hero::after {
content: "";
position: absolute;
right: 34px;
top: -30px;
width: 150px;
height: 150px;
border-radius: 26px;
border: 1px solid var(--bs-border-color);
transform: rotate(24deg);
opacity: 0.5;
pointer-events: none;
}
.ntf-hero-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 26px;
padding: 26px 28px;
}
@media (max-width: 575.98px) {
.ntf-hero-inner {
padding: 22px;
}
}
.ntf-hero-title {
margin: 12px 0 8px;
font-size: 27px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--bs-emphasis-color);
}
@media (max-width: 767.98px) {
.ntf-hero-title {
font-size: 22px;
}
}
/* the readouts sit on one ruled line, no boxes */
.ntf-hero-rail {
display: flex;
flex-wrap: wrap;
gap: 14px 30px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--bs-border-color);
}
.ntf-stat {
display: flex;
flex-direction: column;
gap: 3px;
line-height: 1.25;
}
.ntf-stat b {
font-size: 19px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.ntf-stat b small {
font-size: 12px;
font-weight: 500;
color: var(--bs-secondary-color);
}
/* ============================================================
3. STICKY FILTER TOOLBAR
============================================================ */
.ntf-bar {
position: sticky;
top: 0;
z-index: 5;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
@media (max-width: 991.98px) {
.ntf-bar {
position: static;
}
}
/* the quick filters read as a segmented row of pills */
.ntf-quick {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
.ntf-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 13px;
border-radius: 999px;
background: var(--bs-secondary-bg);
border: 1px solid transparent;
font-size: 12px;
font-weight: 600;
color: var(--bs-secondary-color);
transition: var(--transition);
white-space: nowrap;
}
.ntf-tab i {
font-size: 14px;
}
.ntf-tab:hover {
background: var(--bs-tertiary-bg);
color: var(--bs-emphasis-color);
}
.ntf-tab.active {
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.24);
color: var(--bs-primary);
}
/* ============================================================
4. FEED
============================================================ */
.ntf-feed {
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
/* a sticky date divider between groups */
.ntf-group {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 18px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.ntf-group + .ntf-row {
border-top: 0;
}
.ntf-group span:first-child {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
/* a notification row */
.ntf-row {
position: relative;
display: grid;
grid-template-columns: 46px minmax(0, 1fr) auto;
gap: 14px;
padding: 16px 18px 16px 22px;
border-top: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.ntf-row:first-child {
border-top: 0;
}
.ntf-row {
/* the unread rail down the left edge */
}
.ntf-row::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: transparent;
transition: var(--transition);
}
.ntf-row:hover {
background: var(--bs-secondary-bg);
}
.ntf-row:hover .ntf-row-tools {
opacity: 1;
transform: translateX(0);
}
.ntf-row {
/* unread rows are tinted and carry the rail */
}
.ntf-row.is-unread {
background: var(--tint-primary);
}
.ntf-row.is-unread::before {
background: var(--bs-primary);
}
.ntf-row.is-unread:hover {
background: #ECEFFC;
}
.ntf-row.is-unread .ntf-row-title {
font-weight: 600;
}
.ntf-row.is-critical::before {
background: #E82646;
}
.ntf-row {
/* a pinned row keeps a marker whatever its read state */
}
.ntf-row.is-pinned::after {
content: "\ea5f";
position: absolute;
left: 8px;
top: 18px;
font-family: "tabler-icons" !important;
font-size: 11px;
color: var(--bs-primary);
}
@media (max-width: 767.98px) {
.ntf-row {
grid-template-columns: 40px minmax(0, 1fr);
row-gap: 10px;
}
}
/* the avatar column, with a small module glyph pinned to it */
.ntf-ava {
position: relative;
width: 46px;
height: 46px;
}
.ntf-ava img, .ntf-ava > .avatar {
width: 100%;
height: 100%;
border-radius: 12px;
object-fit: cover;
}
@media (max-width: 767.98px) {
.ntf-ava {
width: 40px;
height: 40px;
}
}
.ntf-ava-badge {
position: absolute;
right: -5px;
bottom: -5px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
font-size: 11px;
color: var(--bs-primary);
}
/* a glyph-only avatar for system notifications */
.ntf-ava-sys {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 12px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 20px;
}
.ntf-row-title {
margin: 0 0 3px;
font-size: 14px;
font-weight: 500;
color: var(--bs-emphasis-color);
}
.ntf-row-title b {
font-weight: 600;
}
.ntf-row-txt {
margin: 0 0 8px;
font-size: 13px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
.ntf-row-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* an attachment pill */
.ntf-file {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
font-size: 11.5px;
color: var(--bs-emphasis-color);
}
.ntf-file i {
font-size: 14px;
color: var(--bs-secondary-color);
}
/* a quoted preview of the underlying record */
.ntf-preview {
margin: 10px 0 0;
padding: 10px 13px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--bs-tertiary-bg);
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* the right column: time above, tools that appear on hover */
.ntf-row-side {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
white-space: nowrap;
}
@media (max-width: 767.98px) {
.ntf-row-side {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.ntf-row-tools {
display: flex;
align-items: center;
gap: 4px;
opacity: 0;
transform: translateX(6px);
transition: var(--transition);
}
@media (max-width: 991.98px) {
.ntf-row-tools {
opacity: 1;
transform: none;
}
}
.ntf-tool {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 15px;
transition: var(--transition);
}
.ntf-tool:hover {
background: var(--tint-primary);
border-color: var(--bs-primary);
color: var(--bs-primary);
}
/* the foot of the feed */
.ntf-feed-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 14px 18px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
5. CATEGORY CARDS
============================================================ */
.ntf-cat {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
padding: 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.ntf-cat:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.ntf-cat-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 19px;
}
.ntf-cat-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
6. PRIORITY CARDS — a thick rib along the top edge
============================================================ */
.ntf-prio {
position: relative;
height: 100%;
padding: 20px 18px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.ntf-prio::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--bs-tertiary-bg);
}
.ntf-prio.is-critical::before {
background: #E82646;
}
.ntf-prio.is-high::before {
background: #EAB300;
}
.ntf-prio.is-medium::before {
background: #0F65CD;
}
.ntf-prio.is-low::before {
background: #1ABE17;
}
.ntf-prio:hover {
box-shadow: var(--shadow-lift);
}
.ntf-prio-fig {
display: block;
margin: 10px 0 4px;
font-size: 30px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
color: var(--bs-emphasis-color);
}
.ntf-prio-latest {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--bs-border-color);
}
/* ============================================================
7. QUICK ACTIONS
============================================================ */
.ntf-act {
display: flex;
align-items: center;
gap: 13px;
height: 100%;
padding: 15px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.ntf-act:hover {
border-color: rgba(61, 94, 225, 0.3);
background: var(--tint-primary);
}
.ntf-act:hover .ntf-act-ic {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.ntf-act-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 17px;
transition: var(--transition);
}
/* ============================================================
8. TIMELINE — a horizontal delivery track
============================================================ */
.ntf-track-flow {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 991.98px) {
.ntf-track-flow {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 22px;
}
}
@media (max-width: 480px) {
.ntf-track-flow {
grid-template-columns: minmax(0, 1fr);
}
}
.ntf-step {
position: relative;
padding-top: 40px;
text-align: center;
}
.ntf-step::before {
content: "";
position: absolute;
left: calc(50% + 18px);
right: calc(-50% + 18px);
top: 15px;
height: 2px;
background: var(--bs-tertiary-bg);
}
.ntf-step:last-child::before {
display: none;
}
.ntf-step.is-done::before {
background: #1ABE17;
}
.ntf-step::after {
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 32px;
height: 32px;
border-radius: 10px;
background: var(--bs-body-bg);
border: 2px solid var(--bs-tertiary-bg);
}
.ntf-step.is-done::after {
background: #1ABE17;
border-color: #1ABE17;
}
.ntf-step.is-now::after {
border-color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
@media (max-width: 991.98px) {
.ntf-step::before {
display: none;
}
}
.ntf-step-ic {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
font-size: 15px;
color: var(--bs-secondary-color);
}
.ntf-step.is-done .ntf-step-ic {
color: #fff;
}
.ntf-step.is-now .ntf-step-ic {
color: var(--bs-primary);
}
.ntf-step-title {
margin: 0 0 3px;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
9. INSIGHTS + ANNOUNCEMENTS
============================================================ */
.ntf-note {
display: flex;
align-items: flex-start;
gap: 13px;
height: 100%;
padding: 16px 18px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid transparent;
transition: var(--transition);
}
.ntf-note:hover {
background: var(--bs-body-bg);
border-color: var(--bs-border-color);
box-shadow: var(--shadow);
}
.ntf-note-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 17px;
}
.ntf-note-title {
margin: 0 0 3px;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* announcement cards carry a tinted head strip */
.ntf-ann {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.ntf-ann:hover {
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.ntf-ann-head {
display: flex;
align-items: center;
gap: 11px;
padding: 13px 16px;
background: var(--tint-primary);
}
.ntf-ann-head.is-warn {
background: #FEF8EA;
}
.ntf-ann-head.is-alert {
background: #FDE9ED;
}
.ntf-ann-head.is-good {
background: #E8F9E8;
}
.ntf-ann-head.is-info {
background: #E7F1FC;
}
.ntf-ann-body {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 auto;
padding: 16px;
}
.ntf-ann-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.ntf-ann-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
10. PREFERENCES
============================================================ */
.ntf-pref {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.ntf-pref:hover {
box-shadow: var(--shadow);
}
.ntf-pref-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 19px;
}
.ntf-pref-title {
margin: 0 0 2px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
11. OFFCANVAS + MODAL + EMPTY STATE
============================================================ */
.offcanvas.offcanvas-end.ntf-panel {
width: 88% !important;
max-width: 1400px !important;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-end.ntf-panel {
width: 100% !important;
}
}
.offcanvas.offcanvas-end.ntf-panel .offcanvas-body {
padding: 22px;
}
.ntf-panel-head {
display: flex;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
padding: 22px;
background: radial-gradient(60% 130% at 100% 0%, #F2F5FF 0%, transparent 60%), var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.ntf-box {
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.ntf-box-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.ntf-box-head h6 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.ntf-box-body {
padding: 16px;
}
.ntf-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.ntf-line + .ntf-line {
border-top: 1px dashed var(--bs-border-color);
}
.ntf-line b {
font-weight: 600;
}
/* a comment thread inside the panel */
.ntf-comment {
display: flex;
gap: 12px;
padding: 12px 0;
}
.ntf-comment + .ntf-comment {
border-top: 1px solid var(--bs-border-color);
}
.ntf-comment p {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* an audit line */
.ntf-audit {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
font-size: 12.5px;
color: var(--bs-secondary-color);
}
.ntf-audit + .ntf-audit {
border-top: 1px dotted var(--bs-border-color);
}
.ntf-audit time {
flex-shrink: 0;
width: 96px;
font-variant-numeric: tabular-nums;
}
.ntf-audit b {
font-weight: 600;
color: var(--bs-emphasis-color);
}
.ntf-modal .modal-content {
border-radius: var(--radius);
border: 0;
}
.ntf-modal .modal-header {
align-items: flex-start;
padding: 20px 22px;
border-bottom: 1px solid var(--bs-border-color);
}
.ntf-modal .modal-body {
padding: 22px;
}
.ntf-modal .modal-footer {
padding: 16px 22px;
border-top: 1px solid var(--bs-border-color);
}
.ntf-empty {
padding: 48px 24px;
text-align: center;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px dashed var(--bs-border-color);
}
.ntf-empty-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
margin-bottom: 14px;
border-radius: 18px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
color: var(--bs-primary);
font-size: 26px;
}
.ntf-empty-title {
margin: 0 0 4px;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/*-----------------
Dashboard widgets — merged in from the former
components/_ui-dashboard-widgets.scss. These are generic, reusable
components; they live with their own kind rather than in a page-shaped file.
-----------------*/
/* ---------- TOASTS ---------- */
#tdToasts {
position: fixed;
top: 76px;
right: 20px;
z-index: 3000;
display: flex;
flex-direction: column;
gap: 10px;
}
#tdToasts .toast {
min-width: 250px;
}
/*-----------------
Settings module
Every Settings screen — profile, branding, identity, configuration,
compliance, audit trail and each settings sub-module — lives here. The
blocks below were previously ten separate partials under components/,
which made them look reusable when they are page styles for one module.
Order is preserved exactly as it was compiled before the merge.
-----------------*/
/*===== Settings top tabs =====*/
/* An editorial underline bar for settings-family pages that were moved from
a left-hand link list to a horizontal switcher above the content. No pill
track — the tabs sit directly on a hairline rail, and only the active one
earns a gradient underline and a filled icon, so the bar reads as a piece
of typography rather than a segmented control. */
.settings-toptabs {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 4px 30px;
padding: 0 4px;
border-bottom: 1px solid var(--bs-border-color);
margin-bottom: 28px;
}
.settings-toptabs-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 2px 13px;
font-size: 14px;
font-weight: 600;
color: var(--bs-secondary-color);
white-space: nowrap;
transition: color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
/* the underline — scaled to nothing until active, so it grows in
rather than just appearing */
}
.settings-toptabs-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2.5px;
border-radius: 2px 2px 0 0;
background: linear-gradient(90deg, var(--bs-primary), rgb(125.7775, 114.0035714286, 233.1964285714));
transform: scaleX(0);
transform-origin: left center;
opacity: 0;
transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s;
}
.settings-toptabs-link:hover {
color: var(--heading);
}
.settings-toptabs-link:hover .settings-toptabs-ic {
background: var(--surface-soft);
border-color: rgba(var(--bs-primary-rgb), 0.3);
color: var(--bs-primary);
}
.settings-toptabs-link.active {
color: var(--bs-primary);
}
.settings-toptabs-link.active::after {
transform: scaleX(1);
opacity: 1;
}
.settings-toptabs-link.active .settings-toptabs-ic {
background: linear-gradient(155deg, var(--bs-primary) 0%, rgb(28.7410714286, 60.35625, 185.8589285714) 100%);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 10px -2px rgba(var(--bs-primary-rgb), 0.5);
}
@media (max-width: 575.98px) {
.settings-toptabs-link {
width: 100%;
justify-content: flex-start;
}
}
.settings-toptabs-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 9px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 14px;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 575.98px) {
.settings-toptabs {
flex-direction: column;
align-items: stretch;
border-bottom: 0;
}
.settings-toptabs-link {
border-bottom: 1px solid var(--bs-border-color);
}
}
/*===== Profile & upload =====*/
.profile-uploader.profile-uploader-two {
position: relative;
width: 100%;
border: 1px dashed #B5B9C3;
background-color: transparent;
border-radius: 5px;
padding: 15px 15px 12px;
margin-bottom: 15px;
}
.profile-uploader.profile-uploader-two .upload-icon {
display: block;
text-align: center;
font-size: 24px;
line-height: 0;
margin-bottom: 15px;
}
.profile-uploader.profile-uploader-two input[type=file] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.profile-uploader.profile-uploader-two input[type=file].form-control {
padding: 0;
}
.profile-uploader.profile-uploader-two .drag-upload-btn {
font-size: 12px;
text-align: center;
}
.profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn {
font-size: 12px;
margin-bottom: 5px;
}
.profile-uploader.profile-uploader-two .drag-upload-btn .upload-btn span {
color: #3D5EE1;
}
.profile-uploader.profile-uploader-two .drag-upload-btn h6 {
font-size: 12px;
font-weight: 400;
margin-bottom: 5px;
}
.settings-profile-upload {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.settings-profile-upload .profile-pic {
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 15px;
display: block;
flex-shrink: 0;
}
.settings-profile-upload .profile-pic img {
width: 100%;
border-radius: 50%;
}
.settings-profile-upload .title-upload h5 {
margin-bottom: 5px;
}
.language-setup-table {
border: 1px solid #E9EDF4;
border-radius: 5px;
overflow: auto;
}
.language-setup-table .table thead {
background: #F2F4F8;
}
.language-setup-table .table thead th {
background: #F2F4F8;
}
.language-setup-table .table tbody tr td {
border-bottom: 1px solid #E9EDF4;
width: 50%;
}
.language-setup-table .table tbody tr:last-child td {
border-bottom: 0;
}
.tax-group-input {
position: relative;
}
/*===== settings =====*/
/*-----------------
Settings — reusable administration workspace components
A shared vocabulary for configuration surfaces anywhere in the product,
not styles for one page. Class prefix `set-`.
The language here is an admin console: a sticky navigation rail, rows of
label/value/edit, colour swatches, asset frames, compliance ribs and
document tiles. Nothing here depends on the AI families in
`_ai-insights.scss` or on `_notifications.scss`, and nothing overrides them.
Contents
1. Tokens
2. Identity hero
3. Sticky settings navigation
4. Configuration cards + value rows
5. Branding — swatches and asset frames
6. Contact + management cards
7. Compliance cards
8. Document tiles
9. Audit timeline
10. Offcanvas + modal + empty state
-----------------*/
@media (prefers-reduced-motion: reduce) {
.identity-panel, .identity-panel::before, .identity-panel::after,
.section-nav-link, .option-card, .option-item, .choice-tile,
.segmented-btn, .inline-meter, .state-dot {
animation: none !important;
transition: none !important;
}
}
/* ---- shared small pieces ---------------------------------------------- */
.eyebrow-label {
display: block;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* status badge — a dot and a word */
.meta-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border-radius: 6px;
background: var(--surface-soft);
border: 1px solid var(--bs-border-color);
font-size: 11px;
font-weight: 600;
color: var(--heading);
white-space: nowrap;
}
.meta-badge::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bs-secondary-color);
}
.meta-badge.is-active {
color: #1ABE17;
background: #E8F9E8;
border-color: #D1F2D1;
}
.meta-badge.is-active::before {
background: #1ABE17;
}
.meta-badge.is-pending {
color: #EAB300;
background: #FEF8EA;
border-color: #FDF1D6;
}
.meta-badge.is-pending::before {
background: #EAB300;
}
.meta-badge.is-expiring {
color: #E82646;
background: #FDE9ED;
border-color: #FAD4DA;
}
.meta-badge.is-expiring::before {
background: #E82646;
}
.meta-badge.is-draft {
color: #0F65CD;
background: #E7F1FC;
border-color: #CFE2FA;
}
.meta-badge.is-draft::before {
background: #0F65CD;
}
.meta-badge {
/* a plain variant with no dot */
}
.meta-badge.is-plain::before {
display: none;
}
/* a small "set / not set" indicator used beside field names */
.state-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #1ABE17;
flex-shrink: 0;
}
.state-dot.is-empty {
background: var(--border-strong);
}
.state-dot.is-warn {
background: #EAB300;
}
/* an icon-led "jump to another settings screen" rail — a card of links
threaded on a connecting spine, like a route map, used beside the content
on payment/tax-style settings screens in place of a bare list-group.
Class prefix stays `settings-index-*` since 21 pages already reference it;
only the visual treatment changed. */
.settings-index-card {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.settings-index-card > .card-header {
padding: 16px 18px;
background: radial-gradient(120% 180% at 0% 0%, #F2F5FF 0%, transparent 60%), var(--surface);
}
.settings-index-card > .card-header h5 {
font-size: 14.5px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--heading);
}
.settings-index-card > .card-header {
/* same $primary-transparent-doesn't-adapt issue as the identity panel
and the active nav row: on dark this left a bright white glare
across an otherwise dark header. */
}
[data-theme=dark] .settings-index-card > .card-header {
background: radial-gradient(120% 180% at 0% 0%, rgba(var(--bs-primary-rgb), 0.16) 0%, transparent 60%), var(--surface);
}
.settings-index-nav {
position: relative;
display: flex;
flex-direction: column;
gap: 1px;
padding: 14px 14px 14px 12px;
/* the spine every station sits on — offset must land on the icon's
horizontal centre: nav's own left padding (12px) + the link's left
padding (10px) + half the 32px icon (16px) = 38px */
}
.settings-index-nav::before {
content: "";
position: absolute;
left: 38px;
top: 33px;
bottom: 33px;
width: 2px;
background: var(--bs-border-color);
}
.settings-index-link {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: 11px;
color: var(--bs-secondary-color);
font-size: 13.5px;
font-weight: 500;
line-height: 1.4;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-index-link:hover {
background: var(--surface-soft);
color: var(--heading);
}
.settings-index-link:hover .settings-index-ic {
border-color: rgba(var(--bs-primary-rgb), 0.35);
color: var(--bs-primary);
}
.settings-index-link:hover .settings-index-arrow {
opacity: 1;
transform: translateX(0);
}
.settings-index-link.active {
color: var(--bs-primary);
font-weight: 600;
background: linear-gradient(90deg, #F2F5FF 0%, transparent 92%);
}
.settings-index-link.active .settings-index-ic {
background: linear-gradient(155deg, var(--bs-primary) 0%, #2E48C4 100%);
border-color: transparent;
color: #fff;
box-shadow: 0 0 0 4px #F2F5FF, 0 6px 14px -4px rgba(var(--bs-primary-rgb), 0.55);
}
.settings-index-link.active .settings-index-label {
color: var(--bs-primary);
}
.settings-index-link.active .settings-index-arrow {
opacity: 1;
transform: translateX(0);
color: var(--bs-primary);
}
.settings-index-link.active {
/* $primary-transparent (#F2F5FF) is a near-white wash baked in at
compile time; on dark it painted the active row as a bright light
patch instead of a subtle highlight. Same fix as .identity-panel:
swap for a translucent primary tint. */
}
[data-theme=dark] .settings-index-link.active {
background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.18) 0%, transparent 92%);
}
[data-theme=dark] .settings-index-link.active .settings-index-ic {
box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.22), 0 6px 14px -4px rgba(var(--bs-primary-rgb), 0.55);
}
/* the station: a circle riding the spine, ring-bordered so the connecting
line reads as passing behind it rather than through a solid square */
.settings-index-ic {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 50%;
background: var(--surface);
border: 1.5px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 15px;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-index-label {
flex: 1;
min-width: 0;
}
.settings-index-arrow {
flex-shrink: 0;
font-size: 13px;
opacity: 0;
transform: translateX(-4px);
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
/* the compact in-page tab nav (e.g. Payment Gateway / Tax Rates) — stays
visible below the fixed header while the content beside it is scrolled */
.settings-tab-nav {
position: sticky;
top: 76px;
}
/* ============================================================
2. IDENTITY HERO
============================================================ */
.identity-panel {
position: relative;
overflow: hidden;
border-radius: 16px;
background: linear-gradient(115deg, #F2F5FF 0%, var(--surface) 44%), var(--surface);
border: 1px solid var(--bs-border-color);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}
/* a faint institutional seal tucked into the very corner — small enough
to stay clear of the action toolbar that now lives in that corner */
.identity-panel::after {
content: "";
position: absolute;
right: -130px;
top: -130px;
width: 160px;
height: 160px;
border-radius: 50%;
border: 16px solid #F2F5FF;
opacity: 0.6;
pointer-events: none;
}
/* a second, softer glow low on the opposite side for depth */
.identity-panel::before {
content: "";
position: absolute;
left: -60px;
bottom: -80px;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--bs-primary-rgb), 0.1) 0%, transparent 72%);
pointer-events: none;
}
/* $primary-transparent is a near-white wash (#F2F5FF) baked in at compile
time, so it can't respond to the [data-theme] attribute the way the
--surface custom property does. Left alone it painted a pale patch over
a dark panel, crushing the crest box against it into near-invisibility.
Swap it for a translucent primary tint that reads as a glow on dark. */
[data-theme=dark] .identity-panel {
background: linear-gradient(115deg, rgba(var(--bs-primary-rgb), 0.16) 0%, var(--surface) 44%), var(--surface);
}
[data-theme=dark] .identity-panel::after {
border-color: rgba(var(--bs-primary-rgb), 0.18);
}
.identity-panel-inner {
position: relative;
display: flex;
align-items: flex-start;
gap: 20px 26px;
flex-wrap: wrap;
padding: 28px 32px;
}
@media (max-width: 575.98px) {
.identity-panel-inner {
padding: 22px;
}
}
@media (max-width: 575.98px) {
.identity-panel-actions {
width: 100%;
}
.identity-panel-actions .btn {
width: 100%;
}
}
/* the crest: the logo in a bordered frame with a status pip */
/* crest + name/badges/description as one unit, growing to fill the row */
.identity-panel-main {
display: flex;
align-items: flex-start;
gap: 20px;
flex: 1 1 380px;
min-width: 0;
}
/* the crest: the logo in a bordered frame with a status pip. No
overflow:hidden — the pip badge deliberately sits partly outside the
frame and would get clipped otherwise; the logo image itself doesn't
need clipping since it's inset via max-width/max-height. */
.identity-crest {
position: relative;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 104px;
height: 104px;
border-radius: 22px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 0 0 6px rgba(var(--bs-primary-rgb), 0.07);
}
.identity-crest img {
max-width: 72%;
max-height: 72%;
object-fit: contain;
}
.identity-crest-pip {
position: absolute;
right: -6px;
bottom: -6px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #1ABE17;
border: 3px solid var(--surface);
color: #fff;
font-size: 14px;
box-shadow: 0 3px 8px rgba(26, 190, 23, 0.35);
}
.identity-panel-name {
margin: 0 0 6px;
font-size: 27px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--heading);
}
@media (max-width: 767.98px) {
.identity-panel-name {
font-size: 22px;
}
}
/* action toolbar — one primary CTA plus an overflow menu, pinned top-right
so it never has to stretch full-width and stack like a list of bricks */
.identity-panel-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
margin-left: auto;
}
@media (max-width: 575.98px) {
.identity-panel-actions {
width: 100%;
margin-left: 0;
}
.identity-panel-actions .btn:not(.btn-icon) {
flex: 1 1 auto;
}
}
/* the facts always take their own full-width row below the CTA row */
.identity-facts {
flex: 1 0 100%;
display: flex;
flex-wrap: wrap;
gap: 18px 30px;
margin-top: 2px;
padding-top: 18px;
border-top: 1px solid var(--bs-border-color);
}
.identity-fact {
display: flex;
align-items: center;
gap: 10px;
line-height: 1.3;
}
.identity-fact b {
font-size: 14px;
font-weight: 600;
color: var(--heading);
}
/* small icon chip in front of each fact */
.identity-fact-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 9px;
background: rgba(var(--bs-primary-rgb), 0.08);
color: #3D5EE1;
font-size: 15px;
}
/* ============================================================
3. STICKY SETTINGS NAVIGATION
============================================================ */
/* The rail sticks below the fixed header, not to the top of the viewport,
and never grows taller than the space left underneath it. */
.section-nav {
position: sticky;
top: calc(60px + 16px);
padding: 10px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
max-height: calc(100vh - 60px - 32px);
overflow-y: auto;
/* Bootstrap's `.nav` sets `flex-wrap: wrap`. In a column flex container
with a capped height that wraps overflowing items into a SECOND COLUMN
rather than scrolling them, which is what produces a horizontal
scrollbar. The rail must scroll vertically and never wrap. */
flex-wrap: nowrap !important;
overflow-x: hidden;
/* items keep their height instead of being squeezed to fit */
}
.section-nav > * {
flex-shrink: 0;
}
@media (max-width: 991.98px) {
.section-nav {
position: static;
max-height: none;
}
}
/* Anchor targets must clear the fixed header when jumped to, otherwise the
heading lands underneath it. */
.scroll-anchor {
scroll-margin-top: calc(60px + 20px);
}
.section-nav-heading {
padding: 10px 12px 8px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.section-nav-heading + .section-nav-link {
margin-top: 0;
}
.section-nav-link {
position: relative;
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 9px 12px;
border: 0;
border-radius: 8px;
background: transparent;
text-align: left;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: var(--bs-secondary-color);
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
/* a long label wraps onto a second line instead of widening the rail */
min-width: 0;
white-space: normal;
word-break: break-word;
}
.section-nav-link i {
flex-shrink: 0;
font-size: 17px;
}
.section-nav-link:hover {
background: var(--surface-soft);
color: var(--heading);
}
.section-nav-link {
/* the active rail sits inside the pill rather than outside it */
}
.section-nav-link.active {
background: #F2F5FF;
color: var(--bs-primary);
font-weight: 600;
}
.section-nav-link.active::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 0 2px 2px 0;
background: var(--bs-primary);
}
/* a completion meter at the foot of the rail */
.section-nav-foot {
margin-top: 10px;
padding: 14px 12px 10px;
border-top: 1px solid var(--bs-border-color);
}
.inline-meter {
display: block;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, var(--bs-primary) 0 calc(var(--p, 0) * 1%), var(--border-strong) calc(var(--p, 0) * 1%) 100%);
}
/* Value carriers, so percentages stay out of inline styles. Declared here
rather than borrowed from another partial, which keeps this file usable on
its own. */
.inline-meter-p-0 {
--p: 0;
}
.inline-meter-p-1 {
--p: 1;
}
.inline-meter-p-2 {
--p: 2;
}
.inline-meter-p-3 {
--p: 3;
}
.inline-meter-p-4 {
--p: 4;
}
.inline-meter-p-5 {
--p: 5;
}
.inline-meter-p-6 {
--p: 6;
}
.inline-meter-p-7 {
--p: 7;
}
.inline-meter-p-8 {
--p: 8;
}
.inline-meter-p-9 {
--p: 9;
}
.inline-meter-p-10 {
--p: 10;
}
.inline-meter-p-11 {
--p: 11;
}
.inline-meter-p-12 {
--p: 12;
}
.inline-meter-p-13 {
--p: 13;
}
.inline-meter-p-14 {
--p: 14;
}
.inline-meter-p-15 {
--p: 15;
}
.inline-meter-p-16 {
--p: 16;
}
.inline-meter-p-17 {
--p: 17;
}
.inline-meter-p-18 {
--p: 18;
}
.inline-meter-p-19 {
--p: 19;
}
.inline-meter-p-20 {
--p: 20;
}
.inline-meter-p-21 {
--p: 21;
}
.inline-meter-p-22 {
--p: 22;
}
.inline-meter-p-23 {
--p: 23;
}
.inline-meter-p-24 {
--p: 24;
}
.inline-meter-p-25 {
--p: 25;
}
.inline-meter-p-26 {
--p: 26;
}
.inline-meter-p-27 {
--p: 27;
}
.inline-meter-p-28 {
--p: 28;
}
.inline-meter-p-29 {
--p: 29;
}
.inline-meter-p-30 {
--p: 30;
}
.inline-meter-p-31 {
--p: 31;
}
.inline-meter-p-32 {
--p: 32;
}
.inline-meter-p-33 {
--p: 33;
}
.inline-meter-p-34 {
--p: 34;
}
.inline-meter-p-35 {
--p: 35;
}
.inline-meter-p-36 {
--p: 36;
}
.inline-meter-p-37 {
--p: 37;
}
.inline-meter-p-38 {
--p: 38;
}
.inline-meter-p-39 {
--p: 39;
}
.inline-meter-p-40 {
--p: 40;
}
.inline-meter-p-41 {
--p: 41;
}
.inline-meter-p-42 {
--p: 42;
}
.inline-meter-p-43 {
--p: 43;
}
.inline-meter-p-44 {
--p: 44;
}
.inline-meter-p-45 {
--p: 45;
}
.inline-meter-p-46 {
--p: 46;
}
.inline-meter-p-47 {
--p: 47;
}
.inline-meter-p-48 {
--p: 48;
}
.inline-meter-p-49 {
--p: 49;
}
.inline-meter-p-50 {
--p: 50;
}
.inline-meter-p-51 {
--p: 51;
}
.inline-meter-p-52 {
--p: 52;
}
.inline-meter-p-53 {
--p: 53;
}
.inline-meter-p-54 {
--p: 54;
}
.inline-meter-p-55 {
--p: 55;
}
.inline-meter-p-56 {
--p: 56;
}
.inline-meter-p-57 {
--p: 57;
}
.inline-meter-p-58 {
--p: 58;
}
.inline-meter-p-59 {
--p: 59;
}
.inline-meter-p-60 {
--p: 60;
}
.inline-meter-p-61 {
--p: 61;
}
.inline-meter-p-62 {
--p: 62;
}
.inline-meter-p-63 {
--p: 63;
}
.inline-meter-p-64 {
--p: 64;
}
.inline-meter-p-65 {
--p: 65;
}
.inline-meter-p-66 {
--p: 66;
}
.inline-meter-p-67 {
--p: 67;
}
.inline-meter-p-68 {
--p: 68;
}
.inline-meter-p-69 {
--p: 69;
}
.inline-meter-p-70 {
--p: 70;
}
.inline-meter-p-71 {
--p: 71;
}
.inline-meter-p-72 {
--p: 72;
}
.inline-meter-p-73 {
--p: 73;
}
.inline-meter-p-74 {
--p: 74;
}
.inline-meter-p-75 {
--p: 75;
}
.inline-meter-p-76 {
--p: 76;
}
.inline-meter-p-77 {
--p: 77;
}
.inline-meter-p-78 {
--p: 78;
}
.inline-meter-p-79 {
--p: 79;
}
.inline-meter-p-80 {
--p: 80;
}
.inline-meter-p-81 {
--p: 81;
}
.inline-meter-p-82 {
--p: 82;
}
.inline-meter-p-83 {
--p: 83;
}
.inline-meter-p-84 {
--p: 84;
}
.inline-meter-p-85 {
--p: 85;
}
.inline-meter-p-86 {
--p: 86;
}
.inline-meter-p-87 {
--p: 87;
}
.inline-meter-p-88 {
--p: 88;
}
.inline-meter-p-89 {
--p: 89;
}
.inline-meter-p-90 {
--p: 90;
}
.inline-meter-p-91 {
--p: 91;
}
.inline-meter-p-92 {
--p: 92;
}
.inline-meter-p-93 {
--p: 93;
}
.inline-meter-p-94 {
--p: 94;
}
.inline-meter-p-95 {
--p: 95;
}
.inline-meter-p-96 {
--p: 96;
}
.inline-meter-p-97 {
--p: 97;
}
.inline-meter-p-98 {
--p: 98;
}
.inline-meter-p-99 {
--p: 99;
}
.inline-meter-p-100 {
--p: 100;
}
/* ============================================================
4. CONFIGURATION CARDS
============================================================ */
.option-card {
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.option-card:hover {
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}
.option-card-head {
display: flex;
align-items: center;
gap: 13px;
padding: 15px 18px;
background: var(--surface-soft);
border-bottom: 1px solid var(--bs-border-color);
}
.option-card-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 17px;
}
.option-card-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--heading);
}
.option-card-body {
padding: 6px 18px 14px;
}
/* the value row — the workhorse of the page */
.option-row {
display: grid;
grid-template-columns: 200px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 12px 0;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.option-row + .option-row {
border-top: 1px solid var(--bs-border-color);
}
.option-row:hover .inline-edit {
opacity: 1;
}
@media (max-width: 767.98px) {
.option-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 12px;
}
.option-row .option-row-value {
grid-column: 1/-1;
}
}
.option-row-key {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--bs-secondary-color);
}
.option-row-value {
display: inline-flex;
align-items: center;
font-size: 13.5px;
font-weight: 500;
color: var(--heading);
word-break: break-word;
}
.option-row-value.is-empty {
color: var(--bs-secondary-color);
font-style: italic;
}
.option-row-value code {
padding: 2px 7px;
border-radius: 5px;
background: var(--surface-soft);
border: 1px solid var(--bs-border-color);
font-size: 12.5px;
color: var(--heading);
}
/* a small colour dot ahead of a hex value in a value row */
.value-dot {
display: inline-block;
width: 9px;
height: 9px;
margin-right: 8px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(17, 24, 39, 0.12);
box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.12);
}
/* the edit affordance appears on hover, stays on touch */
.inline-edit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 15px;
opacity: 0;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.inline-edit:hover {
background: #F2F5FF;
border-color: var(--bs-primary);
color: var(--bs-primary);
}
@media (max-width: 991.98px) {
.inline-edit {
opacity: 1;
}
}
/* section heading inside a workspace */
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 20px;
}
.section-head-title {
margin: 0 0 4px;
font-size: 19px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--heading);
}
.section-head-sub {
margin: 0;
font-size: 13px;
color: var(--bs-secondary-color);
max-width: 660px;
}
/* ============================================================
5. BRANDING
============================================================ */
.asset-card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.asset-card:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.1);
}
/* the preview well — a chequerboard so transparency is visible */
.inset-well {
display: flex;
align-items: center;
justify-content: center;
height: 116px;
padding: 16px;
border-bottom: 1px solid var(--bs-border-color);
background-color: var(--surface-soft);
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.04) 75%), linear-gradient(45deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.04) 75%);
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
}
.inset-well img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.inset-well {
/* the dark variant, for checking a reversed logo */
}
.inset-well.is-dark {
background-color: #202C4B;
background-image: none;
}
.asset-card-body {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
}
.asset-card-title {
margin: 0 0 2px;
font-size: 13.5px;
font-weight: 600;
color: var(--heading);
}
/* a colour swatch card */
.color-swatch {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 14px 16px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.color-swatch:hover {
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.1);
}
.swatch-chip {
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 13px;
border: 1px solid rgba(17, 24, 39, 0.12);
box-shadow: inset 0 -12px 18px rgba(0, 0, 0, 0.1);
}
.swatch-chip.is-primary {
background: #3D5EE1;
}
.swatch-chip.is-secondary {
background: #6FCCD8;
}
.swatch-chip.is-success {
background: #1ABE17;
}
.swatch-chip.is-dark {
background: #202C4B;
}
/* where a brand asset is applied */
.usage-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
font-size: 13px;
}
.usage-row + .usage-row {
border-top: 1px dashed var(--bs-border-color);
}
.usage-row-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--surface-soft);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 15px;
}
/* ============================================================
6. CONTACT + MANAGEMENT
============================================================ */
.contact-block {
position: relative;
height: 100%;
padding: 18px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-block:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.1);
}
.contact-block-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: 12px;
border-radius: 12px;
background: #F2F5FF;
color: var(--bs-primary);
font-size: 18px;
}
.contact-block-icon.is-alert {
background: #FDE9ED;
color: #E82646;
}
.contact-block-icon.is-good {
background: #E8F9E8;
color: #1ABE17;
}
.contact-block-title {
margin: 0 0 6px;
font-size: 14px;
font-weight: 600;
color: var(--heading);
}
.contact-block-text {
margin: 0;
font-size: 13px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
/* a person card for the management section */
.person-block {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 16px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.person-block:hover {
border-color: rgba(61, 94, 225, 0.3);
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.1);
}
.person-block-name {
margin: 0 0 2px;
font-size: 14.5px;
font-weight: 600;
color: var(--heading);
}
.person-block-role {
display: block;
margin-bottom: 6px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--bs-primary);
}
/* ============================================================
7. COMPLIANCE — a rib keyed to expiry
============================================================ */
.compliance-card {
position: relative;
height: 100%;
padding: 18px 18px 18px 22px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.compliance-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #1ABE17;
}
.compliance-card.is-expiring::before {
background: #EAB300;
}
.compliance-card.is-expired::before {
background: #E82646;
}
.compliance-card.is-pending::before {
background: #0F65CD;
}
.compliance-card:hover {
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.1);
}
.compliance-card-title {
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
color: var(--heading);
}
/* the registration number, set apart as a reference */
.reference-code {
display: inline-block;
margin: 8px 0;
padding: 5px 11px;
border-radius: 8px;
background: var(--surface-soft);
border: 1px solid var(--bs-border-color);
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
color: var(--heading);
}
.compliance-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--bs-border-color);
}
/* ============================================================
8. DOCUMENT TILES
============================================================ */
.document-row {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 15px 16px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.document-row:hover {
border-color: rgba(61, 94, 225, 0.3);
background: var(--surface-soft);
}
/* a folded-corner file glyph */
.document-row-icon {
position: relative;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 50px;
border-radius: 8px 14px 8px 8px;
background: var(--surface-soft);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 19px;
/* the fold */
}
.document-row-icon::after {
content: "";
position: absolute;
right: 0;
top: 0;
border-width: 0 13px 13px 0;
border-style: solid;
border-color: var(--surface) var(--surface) var(--bs-border-color) var(--bs-border-color);
border-top-right-radius: 13px;
}
.document-row-icon.is-pdf {
color: #E82646;
}
.document-row-icon.is-img {
color: #1ABE17;
}
.document-row-icon.is-doc {
color: #0F65CD;
}
.document-row-title {
margin: 0 0 2px;
font-size: 13.5px;
font-weight: 600;
color: var(--heading);
}
/* ============================================================
9. AUDIT TIMELINE — a ruled ledger of changes
============================================================ */
.audit-trail {
position: relative;
padding-left: 34px;
}
.audit-trail::before {
content: "";
position: absolute;
left: 11px;
top: 14px;
bottom: 14px;
width: 2px;
background: var(--bs-border-color);
}
.audit-event {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 15px 17px;
border-radius: 12px;
background: var(--surface-soft);
border: 1px solid transparent;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.audit-event + .audit-event {
margin-top: 12px;
}
.audit-event:hover {
background: var(--surface);
border-color: var(--bs-border-color);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}
.audit-event {
/* the knot on the rule */
}
.audit-event::before {
content: "";
position: absolute;
left: -29px;
top: 20px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--surface);
border: 3px solid var(--bs-border-color);
}
.audit-event.is-done::before {
background: var(--bs-primary);
border-color: var(--bs-primary);
}
.audit-event.is-now::before {
border-color: var(--bs-primary);
box-shadow: 0 0 0 4px #F2F5FF;
}
.audit-event-title {
margin: 0 0 3px;
font-size: 14px;
font-weight: 600;
color: var(--heading);
}
/* a before / after pair inside an audit entry */
.delta-value {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: 12px;
}
.delta-value s {
color: var(--bs-secondary-color);
}
.delta-value b {
font-weight: 600;
color: var(--heading);
}
.delta-value i {
font-size: 13px;
color: var(--bs-secondary-color);
}
/* consecutive .row blocks inside one tab pane (e.g. a colour-swatch row
followed by an option-card row, with no section-head between them) have
no gap by default — Bootstrap's gutter only spaces columns within a row,
not row against row. */
.settings-tab-content .row + .row {
margin-top: 24px;
}
/* ============================================================
10. OFFCANVAS + MODAL + EMPTY STATE
============================================================ */
.offcanvas.offcanvas-end.flush-panel {
width: 88% !important;
max-width: 1360px !important;
overflow-y: auto;
}
@media (max-width: 991.98px) {
.offcanvas.offcanvas-end.flush-panel {
width: 100% !important;
}
}
.offcanvas.offcanvas-end.flush-panel {
/* the head and footer scroll away with the body instead of staying
pinned — the offcanvas itself is the scroll container, not the body */
}
.offcanvas.offcanvas-end.flush-panel .offcanvas-body {
padding: 22px;
flex-grow: 0;
overflow-y: visible;
}
.flush-panel-head {
position: relative;
display: flex;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
padding: 22px 56px 22px 22px;
background: linear-gradient(115deg, #F2F5FF 0%, var(--surface) 55%), var(--surface);
border-bottom: 1px solid var(--bs-border-color);
/* pinned to the corner (not a flex item) so it can never wrap away
when the title/badges take up the full width of the row. Every
visual property is repeated here (not just position) because
`.offcanvas .btn-close` in _popup.scss ties on specificity — it
compiles earlier so this rule wins, but only for properties this
rule actually declares. Leaving color/background undeclared here
let that earlier rule's `background: transparent` and (on hover)
`color: $danger` through, making the icon invisible. */
}
.flush-panel-head .custom-btn-close {
position: absolute;
top: 18px;
right: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border-radius: 50%;
background-color: var(--surface);
border: 1px solid var(--bs-border-color);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
color: var(--bs-secondary-color);
opacity: 1;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.flush-panel-head .custom-btn-close i {
font-size: 16px;
line-height: 1;
}
.flush-panel-head .custom-btn-close:hover {
background-color: #FDE9ED;
border-color: #FAD4DA;
color: #E82646;
box-shadow: 0 4px 10px rgba(232, 38, 70, 0.16);
}
.flush-panel .offcanvas-footer {
padding: 16px 22px;
background: var(--surface);
border-top: 1px solid var(--bs-border-color);
}
.outline-box {
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
overflow: hidden;
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.outline-box:hover {
border-color: rgba(61, 94, 225, 0.25);
box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08);
}
/* the hero swatch — a full-bleed colour banner for a "current value" card,
used in place of a bare colour dot so a colour setting reads as premium
rather than as an empty card with a small chip in it. Colour comes in via
the --hero-color custom property set inline per instance. */
.color-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
flex-wrap: wrap;
padding: 24px;
background-color: var(--hero-color, #3D5EE1);
background-image: radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 55%), linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.22) 100%);
}
@media (max-width: 575.98px) {
.color-hero {
padding: 20px;
}
}
.color-hero-main {
min-width: 0;
}
.color-hero-label {
display: block;
margin-bottom: 7px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
}
.color-hero-hex {
display: block;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
color: #fff;
}
.color-hero-side {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.color-hero-prev {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 13px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.28);
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
white-space: nowrap;
}
.color-hero-prev s {
font-weight: 500;
color: rgba(255, 255, 255, 0.68);
}
.color-hero-prev-dot {
width: 10px;
height: 10px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.55);
}
.color-hero-copy {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #fff;
font-size: 15px;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.color-hero-copy:hover {
background: rgba(255, 255, 255, 0.26);
}
.outline-box-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
background: var(--surface-soft);
border-bottom: 1px solid var(--bs-border-color);
}
.outline-box-head h6 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--heading);
}
.outline-box-body {
padding: 16px;
}
/* a validation line: a rule passed or failed */
.check-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
font-size: 13px;
color: var(--heading);
}
.check-row + .check-row {
border-top: 1px dashed var(--bs-border-color);
}
.check-row i {
flex-shrink: 0;
margin-top: 1px;
font-size: 16px;
color: #1ABE17;
}
.check-row.is-warn i {
color: #EAB300;
}
.check-row.is-fail i {
color: #E82646;
}
.settings-modal .modal-content {
border-radius: 16px;
border: 0;
}
.settings-modal .modal-header {
align-items: flex-start;
padding: 20px 22px;
border-bottom: 1px solid var(--bs-border-color);
}
.settings-modal .modal-body {
padding: 22px;
}
.settings-modal .modal-footer {
padding: 16px 22px;
border-top: 1px solid var(--bs-border-color);
}
/* a drop target for uploads */
.inline-drop {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 30px 20px;
text-align: center;
border-radius: 12px;
background: var(--surface-soft);
border: 1px dashed var(--bs-border-color);
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.inline-drop:hover {
background: #F2F5FF;
border-color: var(--bs-primary);
}
.inline-drop i {
font-size: 26px;
color: var(--bs-primary);
}
.empty-block {
padding: 44px 24px;
text-align: center;
border-radius: 12px;
background: var(--surface-soft);
border: 1px dashed var(--bs-border-color);
}
.empty-block-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin-bottom: 14px;
border-radius: 18px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
color: var(--bs-primary);
font-size: 25px;
}
/* ============================================================
11. PREFERENCES — grouped setting lists and inline controls
The school-profile surfaces are read-only records: label, value, edit.
Preferences are the opposite — the control lives in the row and the value
changes in place. These components carry that difference: grouped lists
with hairlines, segmented pickers, accent swatches and toggle tiles.
============================================================ */
/* a grouped list, in the manner of a system settings panel */
.option-group {
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.option-group + .option-group {
margin-top: 20px;
}
.option-group-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: var(--surface-soft);
border-bottom: 1px solid var(--bs-border-color);
}
.option-group-title {
margin: 0;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--heading);
}
/* one setting: glyph, name and description, then the control */
.option-item {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 15px 18px;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 1199.98px) {
.option-item {
display: flex;
flex-wrap: wrap;
}
}
.option-item + .option-item {
border-top: 1px solid var(--bs-border-color);
}
.option-item:hover {
background: var(--surface-soft);
}
.option-item {
/* a setting that is switched off dims its own description */
}
.option-item.is-off .option-item-text p {
opacity: 0.65;
}
@media (max-width: 767.98px) {
.option-item {
grid-template-columns: 40px minmax(0, 1fr);
row-gap: 12px;
}
.option-item .option-item-control {
grid-column: 2/-1;
justify-content: flex-start;
}
}
.option-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--surface-soft);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 18px;
}
.option-item-text {
min-width: 0;
}
.option-item-text span:first-child {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--heading);
}
.option-item-text p {
margin: 2px 0 0;
font-size: 12.5px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
.option-item-control {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
white-space: nowrap;
}
/* a compact select that sits inside a row without dominating it */
.inline-select {
min-width: 168px;
padding: 7px 32px 7px 12px;
border-radius: 8px;
background-color: var(--surface);
border: 1px solid var(--bs-border-color);
font-size: 13px;
color: var(--heading);
}
.inline-select:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px #F2F5FF;
outline: 0;
}
@media (max-width: 575.98px) {
.inline-select {
min-width: 0;
width: 100%;
}
}
/* ---- segmented control ------------------------------------------------
Two or three mutually exclusive options shown side by side, so the choice
and its alternatives are visible at once. */
.segmented {
display: inline-flex;
padding: 3px;
border-radius: 10px;
background: var(--surface-soft);
border: 1px solid var(--bs-border-color);
}
.segmented-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border: 0;
border-radius: 7px;
background: transparent;
font-size: 12.5px;
font-weight: 600;
color: var(--bs-secondary-color);
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.segmented-btn i {
font-size: 15px;
}
.segmented-btn:hover {
color: var(--heading);
}
.segmented-btn.active {
background: var(--surface);
color: var(--heading);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}
/* ---- accent picker ---------------------------------------------------- */
.accent-picker {
display: inline-flex;
gap: 8px;
}
.accent-picker-dot {
position: relative;
width: 26px;
height: 26px;
border-radius: 50%;
border: 0;
padding: 0;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.accent-picker-dot::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid transparent;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.accent-picker-dot:hover {
transform: scale(1.08);
}
.accent-picker-dot.active::after {
border-color: currentColor;
}
.accent-picker-dot.c-primary {
background: #3D5EE1;
color: #3D5EE1;
}
.accent-picker-dot.c-teal {
background: #02a8b5;
color: #02a8b5;
}
.accent-picker-dot.c-success {
background: #1ABE17;
color: #1ABE17;
}
.accent-picker-dot.c-warning {
background: #EAB300;
color: #EAB300;
}
.accent-picker-dot.c-danger {
background: #E82646;
color: #E82646;
}
.accent-picker-dot.c-purple {
background: #4A00E5;
color: #4A00E5;
}
.accent-picker-dot.c-pink {
background: #E83E8C;
color: #E83E8C;
}
.accent-picker-dot.c-dark {
background: #202C4B;
color: #202C4B;
}
/* ---- toggle tile ------------------------------------------------------
For settings that deserve more room than a list row: a glyph, a short
explanation and a switch, with the whole tile reflecting its state. */
.choice-tile {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
padding: 18px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.choice-tile:hover {
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.1);
}
.choice-tile {
/* an enabled tile tints and keeps its glyph solid */
}
.choice-tile.is-on {
background: #F2F5FF;
border-color: rgba(61, 94, 225, 0.26);
}
.choice-tile.is-on .choice-tile-icon {
background: var(--bs-primary);
border-color: transparent;
color: #fff;
}
.choice-tile-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 13px;
background: var(--surface-soft);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 19px;
transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.choice-tile-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--heading);
}
.choice-tile-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ---- keyboard shortcut display ---------------------------------------- */
.key-list {
display: inline-flex;
align-items: center;
gap: 4px;
}
.key-list kbd {
padding: 3px 8px;
border-radius: 6px;
background: var(--surface);
border: 1px solid var(--bs-border-color);
border-bottom-width: 2px;
box-shadow: none;
font-size: 11px;
font-weight: 600;
color: var(--heading);
}
.key-list span {
font-size: 11px;
color: var(--bs-secondary-color);
}
/* ---- a miniature of the interface, for previewing appearance ---------- */
.layout-preview {
display: flex;
height: 148px;
border-radius: 12px;
border: 1px solid var(--bs-border-color);
overflow: hidden;
background: var(--bs-white);
}
.layout-preview.is-dark {
background: #202C4B;
border-color: rgba(255, 255, 255, 0.12);
}
.layout-preview.is-dark .layout-preview-side {
background: rgba(255, 255, 255, 0.06);
}
.layout-preview.is-dark .layout-preview-bar {
background: rgba(255, 255, 255, 0.08);
}
.layout-preview.is-dark .layout-preview-line {
background: rgba(255, 255, 255, 0.14);
}
.layout-preview.is-dark .layout-preview-card {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.1);
}
.layout-preview-side {
flex-shrink: 0;
width: 42px;
padding: 8px 6px;
background: #F8FAFC;
border-right: 1px solid var(--bs-border-color);
display: flex;
flex-direction: column;
gap: 6px;
}
.layout-preview-main {
flex: 1 1 auto;
padding: 8px;
display: flex;
flex-direction: column;
gap: 7px;
}
.layout-preview-bar {
height: 10px;
border-radius: 3px;
background: #F8FAFC;
}
.layout-preview-bar.is-accent {
background: var(--bs-primary);
}
.layout-preview-line {
height: 6px;
border-radius: 3px;
background: #EDF1F6;
width: calc(var(--p, 100) * 1%);
}
.layout-preview-card {
flex: 1 1 auto;
border-radius: 6px;
background: #F8FAFC;
border: 1px solid var(--bs-border-color);
}
/* ---- a summary strip at the head of a pane ---------------------------- */
.summary-line {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
margin-bottom: 20px;
border-radius: 12px;
background: linear-gradient(110deg, #F2F5FF, #F8FAFC);
border: 1px solid var(--bs-border-color);
}
.summary-line i {
flex-shrink: 0;
font-size: 20px;
color: var(--bs-primary);
}
.summary-line p {
margin: 0;
font-size: 13px;
color: #202C4B;
}
/*===== financial settings =====*/
/*-----------------
Financial Settings — reusable configuration components
A shared vocabulary for every page in the Financial Settings Center
(payment settings, gateways, tax rates, invoicing, fee and discount rules,
currency, accounting, approvals and preferences). Class prefix `fin-`.
The language here is a finance console rather than a settings form:
a banded hero carrying the environment it is editing, a sticky rail of
the whole centre, workspaces split into cards, provider tiles that show
their own credentials and mode, rule rows that read condition -> outcome,
and a publication timeline. Values are always accompanied by the control
that changes them.
It deliberately does NOT depend on `_settings.scss`, `_notifications.scss`
or the AI families in `_ai-insights.scss`, and overrides nothing in them,
so the two settings centres can evolve separately.
Contents
1. Tokens + shared pieces
2. Settings hero
3. Sticky centre navigation
4. Configuration workspace + premium tabs
5. Configuration cards and setting rows
6. Payment provider cards
7. Business rule rows
8. Feature cards
9. Premium accordion
10. Information centre panels
11. Configuration timeline
12. Offcanvas, modal helpers and empty state
-----------------*/
/* ============================================================
1. TOKENS + SHARED PIECES
============================================================ */
:root {
--fin-border: var(--bs-border-color, #E9EDF4);
--fin-border-strong: #EDF1F6;
--fin-money: #1ABE17;
--fin-money-soft: #E8F9E8;
--fin-alert: #E82646;
--fin-alert-soft: #FDE9ED;
}
@media (prefers-reduced-motion: reduce) {
[class*=fin-],
[class*=fin-]::before,
[class*=fin-]::after {
animation: none !important;
transition: none !important;
}
}
/* Carries a numeric value into CSS without an inline style. */
.fin-p-0 {
--p: 0;
}
.fin-p-1 {
--p: 1;
}
.fin-p-2 {
--p: 2;
}
.fin-p-3 {
--p: 3;
}
.fin-p-4 {
--p: 4;
}
.fin-p-5 {
--p: 5;
}
.fin-p-6 {
--p: 6;
}
.fin-p-7 {
--p: 7;
}
.fin-p-8 {
--p: 8;
}
.fin-p-9 {
--p: 9;
}
.fin-p-10 {
--p: 10;
}
.fin-p-11 {
--p: 11;
}
.fin-p-12 {
--p: 12;
}
.fin-p-13 {
--p: 13;
}
.fin-p-14 {
--p: 14;
}
.fin-p-15 {
--p: 15;
}
.fin-p-16 {
--p: 16;
}
.fin-p-17 {
--p: 17;
}
.fin-p-18 {
--p: 18;
}
.fin-p-19 {
--p: 19;
}
.fin-p-20 {
--p: 20;
}
.fin-p-21 {
--p: 21;
}
.fin-p-22 {
--p: 22;
}
.fin-p-23 {
--p: 23;
}
.fin-p-24 {
--p: 24;
}
.fin-p-25 {
--p: 25;
}
.fin-p-26 {
--p: 26;
}
.fin-p-27 {
--p: 27;
}
.fin-p-28 {
--p: 28;
}
.fin-p-29 {
--p: 29;
}
.fin-p-30 {
--p: 30;
}
.fin-p-31 {
--p: 31;
}
.fin-p-32 {
--p: 32;
}
.fin-p-33 {
--p: 33;
}
.fin-p-34 {
--p: 34;
}
.fin-p-35 {
--p: 35;
}
.fin-p-36 {
--p: 36;
}
.fin-p-37 {
--p: 37;
}
.fin-p-38 {
--p: 38;
}
.fin-p-39 {
--p: 39;
}
.fin-p-40 {
--p: 40;
}
.fin-p-41 {
--p: 41;
}
.fin-p-42 {
--p: 42;
}
.fin-p-43 {
--p: 43;
}
.fin-p-44 {
--p: 44;
}
.fin-p-45 {
--p: 45;
}
.fin-p-46 {
--p: 46;
}
.fin-p-47 {
--p: 47;
}
.fin-p-48 {
--p: 48;
}
.fin-p-49 {
--p: 49;
}
.fin-p-50 {
--p: 50;
}
.fin-p-51 {
--p: 51;
}
.fin-p-52 {
--p: 52;
}
.fin-p-53 {
--p: 53;
}
.fin-p-54 {
--p: 54;
}
.fin-p-55 {
--p: 55;
}
.fin-p-56 {
--p: 56;
}
.fin-p-57 {
--p: 57;
}
.fin-p-58 {
--p: 58;
}
.fin-p-59 {
--p: 59;
}
.fin-p-60 {
--p: 60;
}
.fin-p-61 {
--p: 61;
}
.fin-p-62 {
--p: 62;
}
.fin-p-63 {
--p: 63;
}
.fin-p-64 {
--p: 64;
}
.fin-p-65 {
--p: 65;
}
.fin-p-66 {
--p: 66;
}
.fin-p-67 {
--p: 67;
}
.fin-p-68 {
--p: 68;
}
.fin-p-69 {
--p: 69;
}
.fin-p-70 {
--p: 70;
}
.fin-p-71 {
--p: 71;
}
.fin-p-72 {
--p: 72;
}
.fin-p-73 {
--p: 73;
}
.fin-p-74 {
--p: 74;
}
.fin-p-75 {
--p: 75;
}
.fin-p-76 {
--p: 76;
}
.fin-p-77 {
--p: 77;
}
.fin-p-78 {
--p: 78;
}
.fin-p-79 {
--p: 79;
}
.fin-p-80 {
--p: 80;
}
.fin-p-81 {
--p: 81;
}
.fin-p-82 {
--p: 82;
}
.fin-p-83 {
--p: 83;
}
.fin-p-84 {
--p: 84;
}
.fin-p-85 {
--p: 85;
}
.fin-p-86 {
--p: 86;
}
.fin-p-87 {
--p: 87;
}
.fin-p-88 {
--p: 88;
}
.fin-p-89 {
--p: 89;
}
.fin-p-90 {
--p: 90;
}
.fin-p-91 {
--p: 91;
}
.fin-p-92 {
--p: 92;
}
.fin-p-93 {
--p: 93;
}
.fin-p-94 {
--p: 94;
}
.fin-p-95 {
--p: 95;
}
.fin-p-96 {
--p: 96;
}
.fin-p-97 {
--p: 97;
}
.fin-p-98 {
--p: 98;
}
.fin-p-99 {
--p: 99;
}
.fin-p-100 {
--p: 100;
}
/* small caps label used above groups of values */
.fin-lbl {
display: block;
margin: 0 0 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* an amount, set in tabular figures so columns of money line up */
.fin-amt {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ---- status badges ----------------------------------------------------- */
.fin-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 11.5px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
color: var(--bs-secondary-color);
}
.fin-badge::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.fin-badge.is-live {
background: var(--fin-money-soft);
border-color: rgba(26, 190, 23, 0.28);
color: rgb(21.0197183099, 153.6056338028, 18.5943661972);
}
.fin-badge.is-test {
background: var(--tint-warning);
border-color: rgba(234, 179, 0, 0.32);
color: rgb(162.6, 124.3820512821, 0);
}
.fin-badge.is-review {
background: var(--tint-primary);
border-color: rgba(61, 94, 225, 0.26);
color: var(--bs-primary);
}
.fin-badge.is-alert {
background: var(--fin-alert-soft);
border-color: rgba(232, 38, 70, 0.26);
color: var(--fin-alert);
}
.fin-badge.is-off {
opacity: 0.85;
}
.fin-badge {
/* a badge with no dot, for plain metadata */
}
.fin-badge.is-plain::before {
display: none;
}
/* ---- a thin proportion meter ------------------------------------------- */
.fin-meter {
position: relative;
height: 6px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.fin-meter span {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--p, 0) * 1%);
border-radius: inherit;
background: var(--bs-primary);
transition: width var(--transition);
}
.fin-meter.is-money span {
background: var(--fin-money);
}
.fin-meter.is-warn span {
background: var(--bs-warning);
}
/* ============================================================
2. SETTINGS HERO
A banded surface that names what is being edited and, just as
importantly, WHICH environment it will land in.
============================================================ */
.fin-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: flex-end;
gap: 24px 32px;
padding: 26px 28px;
margin-bottom: 24px;
border-radius: var(--radius);
background: linear-gradient(112deg, var(--tint-primary) 0%, rgba(255, 255, 255, 0) 46%), var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow: hidden;
/* a hairline rule of the accent along the top edge */
}
.fin-hero::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--bs-primary), var(--fin-money));
}
@media (max-width: 1199.98px) {
.fin-hero {
grid-template-columns: minmax(0, 1fr);
align-items: flex-start;
}
}
@media (max-width: 575.98px) {
.fin-hero {
padding: 20px;
}
}
.fin-hero-top {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.fin-hero-crest {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: 16px;
background: var(--bs-primary);
color: #fff;
font-size: 25px;
box-shadow: 0 8px 18px rgba(61, 94, 225, 0.28);
}
.fin-hero-title {
margin: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.fin-hero-title {
font-size: 21px;
}
}
.fin-hero-sub {
margin: 4px 0 0;
max-width: 62ch;
font-size: 13.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* the environment chip — deliberately loud, because it changes consequences */
.fin-hero-env {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: var(--bs-emphasis-color);
color: #fff;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.fin-hero-env i {
font-size: 14px;
}
.fin-hero-env.is-test {
background: rgb(172.8, 132.1846153846, 0);
}
/* facts sit on a single rule, divided by hairlines */
.fin-hero-facts {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--bs-border-color);
}
.fin-hero-fact {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1 1 0;
min-width: 150px;
padding: 0 20px;
}
.fin-hero-fact:first-child {
padding-left: 0;
}
.fin-hero-fact + .fin-hero-fact {
border-left: 1px solid var(--bs-border-color);
}
.fin-hero-fact span {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.fin-hero-fact strong {
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
@media (max-width: 767.98px) {
.fin-hero-fact {
flex: 1 1 46%;
padding: 10px 14px;
}
.fin-hero-fact:first-child {
padding-left: 14px;
}
.fin-hero-fact + .fin-hero-fact {
border-left: 0;
}
}
.fin-hero-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
@media (max-width: 1199.98px) {
.fin-hero-actions {
width: 100%;
}
}
/* ============================================================
3. STICKY CENTRE NAVIGATION
Every page of the centre, always visible, current one marked.
============================================================ */
.fin-nav {
position: sticky;
top: calc(60px + 16px);
max-height: calc(100vh - 60px - 32px);
padding: 14px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow-y: auto;
/* Bootstrap's `.nav` sets `flex-wrap: wrap`; inside a column flex box with
a capped height that wraps the overflow into a SECOND COLUMN instead of
scrolling, which shows as a horizontal scrollbar. The rail must scroll
vertically and never wrap. */
flex-wrap: nowrap;
overflow-x: hidden;
}
.fin-nav > * {
flex-shrink: 0;
}
@media (max-width: 991.98px) {
.fin-nav {
position: static;
max-height: none;
}
}
.fin-nav-hdr {
display: block;
padding: 12px 10px 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.fin-nav-hdr:first-child {
padding-top: 2px;
}
.fin-nav-link {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--radius-sm);
font-size: 13.5px;
font-weight: 500;
color: var(--bs-emphasis-color);
text-decoration: none;
transition: var(--transition);
}
.fin-nav-link i {
flex-shrink: 0;
font-size: 17px;
color: var(--bs-secondary-color);
transition: var(--transition);
}
.fin-nav-link span:first-of-type {
flex: 1 1 auto;
min-width: 0;
}
.fin-nav-link:hover {
background: var(--bs-secondary-bg);
color: var(--bs-emphasis-color);
}
.fin-nav-link.active {
background: var(--tint-primary);
color: var(--bs-primary);
font-weight: 600;
}
.fin-nav-link.active i {
color: var(--bs-primary);
}
.fin-nav-link.active {
/* a short mark against the left edge, rather than a full border */
}
.fin-nav-link.active::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 18px;
border-radius: 0 3px 3px 0;
background: var(--bs-primary);
}
/* a quiet marker for a page that is configured, or not yet */
.fin-nav-tag {
flex-shrink: 0;
padding: 2px 7px;
border-radius: 999px;
background: var(--bs-secondary-bg);
font-size: 10px;
font-weight: 600;
color: var(--bs-secondary-color);
}
.fin-nav-tag.is-set {
background: var(--fin-money-soft);
color: rgb(21.0197183099, 153.6056338028, 18.5943661972);
}
.fin-nav-tag.is-warn {
background: var(--tint-warning);
color: rgb(152.4, 116.5794871795, 0);
}
.fin-nav-foot {
margin-top: 14px;
padding: 14px 12px 6px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
4. CONFIGURATION WORKSPACE + PREMIUM TABS
============================================================ */
.fin-ws {
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow: hidden;
}
.fin-ws-head {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 18px 22px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.fin-ws-title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.fin-ws-title + p {
margin: 2px 0 0;
font-size: 12.5px;
color: var(--bs-secondary-color);
}
.fin-ws-body {
padding: 22px;
}
@media (max-width: 575.98px) {
.fin-ws-body {
padding: 18px 16px;
}
}
/* premium tabs — a rail of pills on a recessed track */
.fin-tabs {
display: flex;
gap: 4px;
padding: 4px;
border-radius: 11px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow-x: auto;
scrollbar-width: none;
flex-wrap: nowrap;
}
.fin-tabs::-webkit-scrollbar {
display: none;
}
.fin-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 15px;
border: 0;
border-radius: 8px;
background: transparent;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
color: var(--bs-secondary-color);
transition: var(--transition);
}
.fin-tab i {
font-size: 16px;
}
.fin-tab:hover {
background: var(--bs-secondary-bg);
color: var(--bs-emphasis-color);
}
.fin-tab.active {
background: var(--bs-primary);
color: #fff;
box-shadow: 0 4px 12px rgba(61, 94, 225, 0.26);
}
.fin-tab {
/* a count riding along with the label */
}
.fin-tab .fin-tab-n {
padding: 1px 6px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.07);
font-size: 10.5px;
line-height: 1.6;
}
.fin-tab.active .fin-tab-n {
background: rgba(255, 255, 255, 0.24);
}
/* ============================================================
5. CONFIGURATION CARDS + SETTING ROWS
============================================================ */
.fin-card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.fin-card:hover {
border-color: var(--fin-border-strong);
box-shadow: var(--shadow-lift);
}
.fin-card {
/* a card whose whole surface opens the workspace */
}
.fin-card.is-clickable {
cursor: pointer;
}
.fin-card-head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid var(--bs-border-color);
}
.fin-card-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 12px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 19px;
}
.fin-card-ic.is-money {
background: var(--fin-money-soft);
color: rgb(21.0197183099, 153.6056338028, 18.5943661972);
}
.fin-card-ic.is-warn {
background: var(--tint-warning);
color: rgb(162.6, 124.3820512821, 0);
}
.fin-card-ic.is-alert {
background: var(--fin-alert-soft);
color: var(--fin-alert);
}
.fin-card-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fin-card-body {
flex: 1 1 auto;
padding: 6px 18px 14px;
}
.fin-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 12px 18px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
/* one setting: what it is, what it is set to, and the control that changes it */
.fin-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px 16px;
padding: 12px 0;
}
.fin-row + .fin-row {
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.fin-row {
grid-template-columns: minmax(0, 1fr);
}
.fin-row .fin-row-ctl {
justify-content: flex-start;
}
}
.fin-row-key {
min-width: 0;
}
.fin-row-key strong {
display: block;
font-size: 13.5px;
font-weight: 500;
color: var(--bs-emphasis-color);
}
.fin-row-key span {
display: block;
margin-top: 2px;
font-size: 12px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
.fin-row-ctl {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
white-space: nowrap;
}
/* a compact input that sits inside a row without dominating it */
.fin-input,
.fin-select {
min-width: 150px;
padding: 7px 12px;
border-radius: var(--radius-sm);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
font-size: 13px;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.fin-input:focus,
.fin-select:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
outline: 0;
}
@media (max-width: 575.98px) {
.fin-input,
.fin-select {
min-width: 0;
width: 100%;
}
}
.fin-select {
padding-right: 30px;
}
/* an amount field with its currency fixed to the front */
.fin-money-field {
display: inline-flex;
align-items: stretch;
border-radius: var(--radius-sm);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.fin-money-field .fin-money-sym {
display: inline-flex;
align-items: center;
padding: 0 10px;
background: var(--bs-secondary-bg);
border-right: 1px solid var(--bs-border-color);
font-size: 13px;
font-weight: 600;
color: var(--bs-secondary-color);
}
.fin-money-field input {
width: 108px;
padding: 7px 10px;
border: 0;
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.fin-money-field input:focus {
outline: 0;
}
.fin-money-field:focus-within {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
}
/* ============================================================
6. PAYMENT PROVIDER CARDS
A provider shows its mark, the mode it is running in, its
credentials as a masked fingerprint, and its cost.
============================================================ */
.fin-prov {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.fin-prov:hover {
border-color: var(--fin-border-strong);
box-shadow: var(--shadow-lift);
}
.fin-prov {
/* the live provider is marked along its leading edge */
}
.fin-prov.is-primary::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--fin-money);
}
.fin-prov.is-disabled {
background: var(--bs-secondary-bg);
}
.fin-prov.is-disabled .fin-prov-mark,
.fin-prov.is-disabled .fin-prov-name {
opacity: 0.7;
}
.fin-prov-head {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 18px 18px 14px;
}
.fin-prov-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 13px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 22px;
color: var(--bs-emphasis-color);
}
.fin-prov-name {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fin-prov-name + p {
margin: 2px 0 0;
font-size: 12px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
/* the credential fingerprint — enough to identify a key, never enough to use it */
.fin-prov-key {
display: flex;
align-items: center;
gap: 8px;
margin: 0 18px 14px;
padding: 9px 12px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border: 1px dashed var(--fin-border-strong);
font-size: 12px;
color: var(--bs-secondary-color);
}
.fin-prov-key code {
font-size: 12px;
letter-spacing: 0.04em;
color: var(--bs-emphasis-color);
}
/* provider facts, on their own hairline grid */
.fin-prov-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--bs-border-color);
}
.fin-prov-fact {
padding: 11px 18px;
}
.fin-prov-fact:nth-child(odd) {
border-right: 1px solid var(--bs-border-color);
}
.fin-prov-fact:nth-child(n+3) {
border-top: 1px solid var(--bs-border-color);
}
.fin-prov-fact span {
display: block;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.fin-prov-fact strong {
display: block;
margin-top: 2px;
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.fin-prov-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 18px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
7. BUSINESS RULE ROWS
A rule reads as a sentence: when this, then that.
============================================================ */
.fin-rule {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 15px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.fin-rule + .fin-rule {
margin-top: 10px;
}
.fin-rule:hover {
border-color: var(--fin-border-strong);
box-shadow: var(--shadow);
}
.fin-rule.is-off {
background: var(--bs-secondary-bg);
}
.fin-rule.is-off .fin-rule-body {
opacity: 0.68;
}
@media (max-width: 767.98px) {
.fin-rule {
grid-template-columns: 34px minmax(0, 1fr);
row-gap: 12px;
}
.fin-rule .fin-rule-ctl {
grid-column: 2/-1;
justify-content: flex-start;
}
}
/* the rule's order in the chain — order matters when rules stack */
.fin-rule-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 12.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--bs-secondary-color);
}
.fin-rule-body {
min-width: 0;
}
.fin-rule-line {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13.5px;
line-height: 1.6;
color: var(--bs-emphasis-color);
/* the arrow between condition and outcome */
}
.fin-rule-line i.ti-arrow-narrow-right {
color: var(--bs-secondary-color);
font-size: 17px;
}
/* the variable parts of the sentence, marked so the rule can be scanned */
.fin-rule-cond,
.fin-rule-then {
padding: 2px 9px;
border-radius: 7px;
font-size: 12.5px;
font-weight: 600;
}
.fin-rule-cond {
background: var(--tint-primary);
color: var(--bs-primary);
}
.fin-rule-then {
background: var(--fin-money-soft);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.fin-rule-note {
display: block;
margin-top: 4px;
font-size: 12px;
color: var(--bs-secondary-color);
}
.fin-rule-ctl {
display: flex;
align-items: center;
gap: 12px;
justify-content: flex-end;
}
/* ============================================================
8. FEATURE CARDS
Status, what it does, what it needs, and the switch.
============================================================ */
.fin-feature {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.fin-feature:hover {
box-shadow: var(--shadow-lift);
}
.fin-feature {
/* an enabled feature tints and solidifies its glyph */
}
.fin-feature.is-on {
border-color: rgba(61, 94, 225, 0.26);
background: linear-gradient(160deg, var(--tint-primary), var(--bs-body-bg) 58%);
}
.fin-feature.is-on .fin-feature-ic {
background: var(--bs-primary);
border-color: transparent;
color: #fff;
}
.fin-feature-top {
display: flex;
align-items: flex-start;
gap: 12px;
}
.fin-feature-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: 13px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 20px;
transition: var(--transition);
}
.fin-feature-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fin-feature-txt {
margin: 0;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* the things this feature depends on, named plainly */
.fin-deps {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.fin-dep {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 7px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 11.5px;
font-weight: 500;
color: var(--bs-secondary-color);
}
.fin-dep i {
font-size: 13px;
}
.fin-dep.is-missing {
background: var(--fin-alert-soft);
border-color: rgba(232, 38, 70, 0.24);
color: var(--fin-alert);
}
.fin-feature-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
9. PREMIUM ACCORDION
============================================================ */
.fin-acc {
border-radius: var(--radius);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
overflow: hidden;
}
.fin-acc .accordion-item {
border: 0;
background: transparent;
}
.fin-acc .accordion-item + .accordion-item {
border-top: 1px solid var(--bs-border-color);
}
.fin-acc .accordion-button {
gap: 12px;
padding: 16px 18px;
background: var(--bs-body-bg);
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
box-shadow: none;
}
.fin-acc .accordion-button::after {
margin-left: 0;
}
.fin-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.fin-acc .accordion-button:focus {
box-shadow: 0 0 0 3px var(--tint-primary);
}
.fin-acc .accordion-button i {
font-size: 18px;
}
.fin-acc {
/* pushes anything after it to the right of the header */
}
.fin-acc .fin-acc-spacer {
margin-left: auto;
}
.fin-acc .accordion-body {
padding: 4px 18px 18px;
}
/* ============================================================
10. INFORMATION CENTRE PANELS
============================================================ */
.fin-note {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--bs-primary);
}
.fin-note.is-money {
border-left-color: var(--fin-money);
}
.fin-note.is-warn {
border-left-color: var(--bs-warning);
}
.fin-note.is-alert {
border-left-color: var(--fin-alert);
}
.fin-note-head {
display: flex;
align-items: center;
gap: 9px;
}
.fin-note-head i {
font-size: 18px;
color: var(--bs-primary);
}
.is-money .fin-note-head i {
color: rgb(21.0197183099, 153.6056338028, 18.5943661972);
}
.is-warn .fin-note-head i {
color: rgb(162.6, 124.3820512821, 0);
}
.is-alert .fin-note-head i {
color: var(--fin-alert);
}
.fin-note-head h6 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fin-note-list {
margin: 0;
padding: 0;
list-style: none;
}
.fin-note-list li {
position: relative;
padding: 6px 0 6px 18px;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
/* a small dash rather than a bullet */
}
.fin-note-list li::before {
content: "";
position: absolute;
left: 0;
top: 14px;
width: 9px;
height: 1px;
background: var(--fin-border-strong);
}
.fin-note-list li + li {
border-top: 1px solid var(--bs-border-color);
}
.fin-note-list li strong {
color: var(--bs-emphasis-color);
font-weight: 600;
}
/* a recent change, showing what moved from what to what */
.fin-delta {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
margin-top: 3px;
font-size: 12px;
}
.fin-delta del {
text-decoration: line-through;
color: var(--bs-secondary-color);
}
.fin-delta ins {
text-decoration: none;
font-weight: 600;
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.fin-delta i {
font-size: 14px;
color: var(--bs-secondary-color);
}
/* ============================================================
11. CONFIGURATION TIMELINE
Horizontal on a wide screen, vertical when there is no room.
============================================================ */
.fin-tl {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
padding: 24px 22px 22px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
@media (max-width: 991.98px) {
.fin-tl {
grid-template-columns: minmax(0, 1fr);
padding: 18px;
}
}
.fin-tl-step {
position: relative;
padding: 0 18px;
/* the connecting rule runs behind the markers */
}
.fin-tl-step::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 13px;
height: 2px;
background: var(--bs-tertiary-bg);
}
.fin-tl-step:first-child::before {
left: 50%;
}
.fin-tl-step:last-child::before {
right: 50%;
}
.fin-tl-step {
/* a completed step carries the accent through to the next marker */
}
.fin-tl-step.is-done::before {
background: var(--bs-primary);
}
.fin-tl-step.is-current ::before {
background: var(--bs-primary);
}
@media (max-width: 991.98px) {
.fin-tl-step {
padding: 0 0 22px 30px;
}
.fin-tl-step::before {
left: 13px;
right: auto;
top: 0;
bottom: 0;
width: 2px;
height: auto;
}
.fin-tl-step:first-child::before {
left: 13px;
top: 13px;
}
.fin-tl-step:last-child::before {
right: auto;
bottom: auto;
height: 13px;
}
}
.fin-tl-dot {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-bottom: 12px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--bs-tertiary-bg);
font-size: 14px;
color: var(--bs-secondary-color);
}
.is-done .fin-tl-dot {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.is-current .fin-tl-dot {
border-color: var(--bs-primary);
color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
@media (max-width: 991.98px) {
.fin-tl-dot {
position: absolute;
left: -30px;
top: 0;
margin-bottom: 0;
}
}
.fin-tl-title {
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fin-tl-meta {
display: block;
margin-top: 2px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.fin-tl-txt {
margin: 6px 0 0;
font-size: 12px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* ============================================================
12. OFFCANVAS, MODAL HELPERS, EMPTY STATE
============================================================ */
/* The theme sets `.offcanvas.offcanvas-end { width: auto !important }` in
`_popup.scss`. Two classes plus `!important` beats any single-class rule,
so the workspace has to match on three classes to win. */
.offcanvas.offcanvas-end.fin-ws-canvas {
width: 88% !important;
max-width: 1180px !important;
}
.fin-canvas-head {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 20px 24px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.fin-canvas-body {
padding: 22px 24px 32px;
}
/* a section inside the workspace panel */
.fin-sect + .fin-sect {
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid var(--bs-border-color);
}
.fin-sect-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.fin-sect-title i {
font-size: 17px;
color: var(--bs-primary);
}
/* key/value pairs with a dotted leader, as on a statement */
.fin-kv {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0;
padding: 8px 0;
font-size: 13px;
}
.fin-kv + .fin-kv {
border-top: 1px solid var(--bs-border-color);
}
.fin-kv dt {
order: 0;
flex-shrink: 0;
font-weight: 400;
color: var(--bs-secondary-color);
}
.fin-kv {
/* The leader is a pseudo-element ordered between the term and the
description, so the markup stays a valid `dl` with nothing but
`dt`/`dd` inside it. */
}
.fin-kv::before {
content: "";
order: 1;
flex: 1 1 auto;
min-width: 14px;
height: 1px;
border-bottom: 1px dotted var(--fin-border-strong);
transform: translateY(-3px);
}
.fin-kv dd {
order: 2;
margin: 0;
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--bs-emphasis-color);
}
/* a validation result: what was checked and whether it passed */
.fin-check {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 0;
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.fin-check + .fin-check {
border-top: 1px solid var(--bs-border-color);
}
.fin-check > i {
flex-shrink: 0;
margin-top: 1px;
font-size: 17px;
color: rgb(21.0197183099, 153.6056338028, 18.5943661972);
}
.fin-check.is-warn > i {
color: rgb(162.6, 124.3820512821, 0);
}
.fin-check.is-alert > i {
color: var(--fin-alert);
}
.fin-check span {
display: block;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* audit entries — a date gutter and the change beside it */
.fin-audit {
display: grid;
grid-template-columns: 108px minmax(0, 1fr);
gap: 14px;
padding: 12px 0;
}
.fin-audit + .fin-audit {
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.fin-audit {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
}
.fin-audit-when {
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--bs-secondary-color);
}
.fin-audit-when strong {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fin-audit-what {
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.fin-audit-what span {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ---- empty state ------------------------------------------------------- */
.fin-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 40px 24px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px dashed var(--fin-border-strong);
}
.fin-empty i {
font-size: 32px;
color: var(--bs-secondary-color);
opacity: 0.8;
}
.fin-empty h6 {
margin: 8px 0 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.fin-empty p {
margin: 0;
max-width: 46ch;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
.fin-empty .btn {
margin-top: 10px;
}
/*===== email settings =====*/
/*-----------------
Email Settings — mail delivery configuration components
Reusable pieces for the Email Settings & Mail Delivery Configuration
Center. Class prefix `eml-`.
The visual language is a mail operations console rather than a settings
page: values are presented the way a message header presents them, a dark
transcript panel shows the live SMTP handshake, provider health is read
off signal bars, DNS authentication is shown as records with a pass seal,
and templates are previewed as miniature letters.
It borrows nothing from `_financial-settings.scss` or `_settings.scss`
and overrides nothing in them.
Contents
1. Tokens + shared pieces
2. Workspace hero + connection console
3. Sticky section navigation
4. Configuration panels + header rows
5. Mail provider rows
6. Sender identity cards
7. Template cards
8. Rules, queue and log rows
9. Authentication records
10. Premium accordion
11. Mail activity timeline
12. Offcanvas, panel helpers and empty state
-----------------*/
/* ============================================================
1. TOKENS + SHARED PIECES
============================================================ */
:root {
--eml-border: var(--bs-border-color, #E9EDF4);
--eml-border-strong: #EDF1F6;
--eml-ok: #1ABE17;
--eml-ok-soft: #E8F9E8;
--eml-bad: #E82646;
--eml-bad-soft: #FDE9ED;
--eml-ink: #101828;
--eml-ink-line: rgba(255, 255, 255, .09);
--eml-ink-text: rgba(255, 255, 255, .68);
}
@media (prefers-reduced-motion: reduce) {
[class*=eml-],
[class*=eml-]::before,
[class*=eml-]::after {
animation: none !important;
transition: none !important;
}
}
/* Carries a numeric value into CSS without an inline style. */
.eml-p-0 {
--p: 0;
}
.eml-p-1 {
--p: 1;
}
.eml-p-2 {
--p: 2;
}
.eml-p-3 {
--p: 3;
}
.eml-p-4 {
--p: 4;
}
.eml-p-5 {
--p: 5;
}
.eml-p-6 {
--p: 6;
}
.eml-p-7 {
--p: 7;
}
.eml-p-8 {
--p: 8;
}
.eml-p-9 {
--p: 9;
}
.eml-p-10 {
--p: 10;
}
.eml-p-11 {
--p: 11;
}
.eml-p-12 {
--p: 12;
}
.eml-p-13 {
--p: 13;
}
.eml-p-14 {
--p: 14;
}
.eml-p-15 {
--p: 15;
}
.eml-p-16 {
--p: 16;
}
.eml-p-17 {
--p: 17;
}
.eml-p-18 {
--p: 18;
}
.eml-p-19 {
--p: 19;
}
.eml-p-20 {
--p: 20;
}
.eml-p-21 {
--p: 21;
}
.eml-p-22 {
--p: 22;
}
.eml-p-23 {
--p: 23;
}
.eml-p-24 {
--p: 24;
}
.eml-p-25 {
--p: 25;
}
.eml-p-26 {
--p: 26;
}
.eml-p-27 {
--p: 27;
}
.eml-p-28 {
--p: 28;
}
.eml-p-29 {
--p: 29;
}
.eml-p-30 {
--p: 30;
}
.eml-p-31 {
--p: 31;
}
.eml-p-32 {
--p: 32;
}
.eml-p-33 {
--p: 33;
}
.eml-p-34 {
--p: 34;
}
.eml-p-35 {
--p: 35;
}
.eml-p-36 {
--p: 36;
}
.eml-p-37 {
--p: 37;
}
.eml-p-38 {
--p: 38;
}
.eml-p-39 {
--p: 39;
}
.eml-p-40 {
--p: 40;
}
.eml-p-41 {
--p: 41;
}
.eml-p-42 {
--p: 42;
}
.eml-p-43 {
--p: 43;
}
.eml-p-44 {
--p: 44;
}
.eml-p-45 {
--p: 45;
}
.eml-p-46 {
--p: 46;
}
.eml-p-47 {
--p: 47;
}
.eml-p-48 {
--p: 48;
}
.eml-p-49 {
--p: 49;
}
.eml-p-50 {
--p: 50;
}
.eml-p-51 {
--p: 51;
}
.eml-p-52 {
--p: 52;
}
.eml-p-53 {
--p: 53;
}
.eml-p-54 {
--p: 54;
}
.eml-p-55 {
--p: 55;
}
.eml-p-56 {
--p: 56;
}
.eml-p-57 {
--p: 57;
}
.eml-p-58 {
--p: 58;
}
.eml-p-59 {
--p: 59;
}
.eml-p-60 {
--p: 60;
}
.eml-p-61 {
--p: 61;
}
.eml-p-62 {
--p: 62;
}
.eml-p-63 {
--p: 63;
}
.eml-p-64 {
--p: 64;
}
.eml-p-65 {
--p: 65;
}
.eml-p-66 {
--p: 66;
}
.eml-p-67 {
--p: 67;
}
.eml-p-68 {
--p: 68;
}
.eml-p-69 {
--p: 69;
}
.eml-p-70 {
--p: 70;
}
.eml-p-71 {
--p: 71;
}
.eml-p-72 {
--p: 72;
}
.eml-p-73 {
--p: 73;
}
.eml-p-74 {
--p: 74;
}
.eml-p-75 {
--p: 75;
}
.eml-p-76 {
--p: 76;
}
.eml-p-77 {
--p: 77;
}
.eml-p-78 {
--p: 78;
}
.eml-p-79 {
--p: 79;
}
.eml-p-80 {
--p: 80;
}
.eml-p-81 {
--p: 81;
}
.eml-p-82 {
--p: 82;
}
.eml-p-83 {
--p: 83;
}
.eml-p-84 {
--p: 84;
}
.eml-p-85 {
--p: 85;
}
.eml-p-86 {
--p: 86;
}
.eml-p-87 {
--p: 87;
}
.eml-p-88 {
--p: 88;
}
.eml-p-89 {
--p: 89;
}
.eml-p-90 {
--p: 90;
}
.eml-p-91 {
--p: 91;
}
.eml-p-92 {
--p: 92;
}
.eml-p-93 {
--p: 93;
}
.eml-p-94 {
--p: 94;
}
.eml-p-95 {
--p: 95;
}
.eml-p-96 {
--p: 96;
}
.eml-p-97 {
--p: 97;
}
.eml-p-98 {
--p: 98;
}
.eml-p-99 {
--p: 99;
}
.eml-p-100 {
--p: 100;
}
/* Anything that should read as machine output rather than prose. */
.eml-mono {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: -0.01em;
}
.eml-lbl {
display: block;
margin: 0 0 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* ---- status badges ----------------------------------------------------- */
.eml-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 6px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
color: var(--bs-secondary-color);
}
.eml-badge.is-ok {
background: var(--eml-ok-soft);
border-color: rgba(26, 190, 23, 0.28);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.eml-badge.is-warn {
background: var(--tint-warning);
border-color: rgba(234, 179, 0, 0.34);
color: rgb(152.4, 116.5794871795, 0);
}
.eml-badge.is-bad {
background: var(--eml-bad-soft);
border-color: rgba(232, 38, 70, 0.26);
color: var(--eml-bad);
}
.eml-badge.is-info {
background: var(--tint-primary);
border-color: rgba(15, 101, 205, 0.24);
color: var(--bs-primary);
}
/* a small pulsing light, used where something is live */
.eml-live {
position: relative;
display: inline-block;
width: 8px;
height: 8px;
flex-shrink: 0;
border-radius: 50%;
background: var(--bs-success);
margin-left: auto;
flex: unset !important;
}
.eml-live::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--bs-success);
opacity: 0.45;
animation: eml-ping 2.4s ease-out infinite;
}
.eml-live.is-warn {
background: var(--bs-warning);
}
.eml-live.is-warn::after {
border-color: var(--bs-warning);
}
.eml-live.is-bad {
background: var(--eml-bad);
}
.eml-live.is-bad::after {
border-color: var(--eml-bad);
animation: none;
}
.eml-live.is-off {
background: var(--eml-border-strong);
}
.eml-live.is-off::after {
display: none;
}
@keyframes eml-ping {
0% {
transform: scale(0.7);
opacity: 0.6;
}
70%, 100% {
transform: scale(1.5);
opacity: 0;
}
}
/* ---- signal bars ------------------------------------------------------
Connection health read at a glance. `--p` is 0-100; each bar lights when
the value clears its own threshold. */
.eml-sig {
display: inline-flex;
align-items: flex-end;
gap: 3px;
height: 16px;
}
.eml-sig i {
display: block;
width: 4px;
border-radius: 2px;
background: var(--bs-tertiary-bg);
transition: var(--transition);
}
.eml-sig i:nth-child(1) {
height: 6px;
}
.eml-sig i:nth-child(2) {
height: 9px;
}
.eml-sig i:nth-child(3) {
height: 12px;
}
.eml-sig i:nth-child(4) {
height: 16px;
}
.eml-sig {
/* Bars light up to the level given by `is-1` … `is-4`. Unlit bars keep
the track colour, so a weak connection reads as mostly empty rather
than as a different shape. */
}
.eml-sig.is-4 i {
background: var(--bs-success);
}
.eml-sig.is-3 i:nth-child(-n+3) {
background: var(--bs-success);
}
.eml-sig.is-2 i:nth-child(-n+2) {
background: var(--bs-warning);
}
.eml-sig.is-1 i:nth-child(1) {
background: var(--eml-bad);
}
/* ============================================================
2. WORKSPACE HERO + CONNECTION CONSOLE
The hero pairs the identity of the configuration with a live
transcript of the last handshake, the way a mail console does.
============================================================ */
.eml-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 0;
margin-bottom: 26px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow: hidden;
}
@media (max-width: 1399.98px) {
.eml-hero {
grid-template-columns: minmax(0, 1fr);
}
}
.eml-hero-id {
padding: 26px 28px;
}
@media (max-width: 575.98px) {
.eml-hero-id {
padding: 20px;
}
}
.eml-hero-top {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.eml-hero-crest {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
flex-shrink: 0;
border-radius: 15px;
background: var(--bs-primary);
color: #fff;
font-size: 24px;
box-shadow: 0 8px 18px rgba(15, 101, 205, 0.26);
}
.eml-hero-title {
margin: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.eml-hero-title {
font-size: 21px;
}
}
.eml-hero-sub {
margin: 4px 0 0;
max-width: 64ch;
font-size: 13.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
/* the hero's facts are chips, not a fact strip */
.eml-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.eml-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: 9px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.eml-chip i {
font-size: 15px;
color: var(--bs-secondary-color);
}
.eml-chip b {
font-weight: 600;
}
.eml-chip span {
color: var(--bs-secondary-color);
}
.eml-hero-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--bs-border-color);
}
/* ---- the dark transcript panel ---------------------------------------- */
.eml-console {
display: flex;
flex-direction: column;
padding: 20px 22px;
background: var(--eml-ink);
color: var(--eml-ink-text);
border-left: 1px solid var(--bs-border-color);
}
@media (max-width: 1399.98px) {
.eml-console {
border-left: 0;
border-top: 1px solid var(--bs-border-color);
}
}
.eml-console-head {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid var(--eml-ink-line);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.eml-console-head strong {
color: #fff;
font-weight: 600;
}
.eml-console-body {
flex: 1 1 auto;
font-family: var(--font-mono);
font-size: 11.5px;
line-height: 1.9;
overflow-x: auto;
scrollbar-width: thin;
}
.eml-console-line {
display: flex;
gap: 10px;
white-space: nowrap;
/* the direction of each line of the conversation */
}
.eml-console-line .eml-console-dir {
flex-shrink: 0;
width: 22px;
color: rgba(255, 255, 255, 0.35);
}
.eml-console-line.is-in .eml-console-dir {
color: #6EE7B7;
}
.eml-console-line.is-out .eml-console-dir {
color: #7DA9F5;
}
.eml-console-line.is-ok {
color: #6EE7B7;
}
.eml-console-line.is-warn {
color: #FCD34D;
}
.eml-console-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--eml-ink-line);
font-size: 11.5px;
color: rgba(255, 255, 255, 0.55);
}
.eml-console-foot .eml-console-stat {
display: inline-flex;
align-items: center;
gap: 6px;
}
.eml-console-foot .eml-console-stat b {
font-family: var(--font-mono);
color: #fff;
font-weight: 600;
}
/* ============================================================
3. STICKY SECTION NAVIGATION
A boxed rail: each section numbered, with its own state light.
============================================================ */
.eml-nav {
position: sticky;
top: calc(60px + 16px);
max-height: calc(100vh - 60px - 32px);
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow-y: auto;
/* Bootstrap's `.nav` wraps by default; in a capped-height column that
wraps overflow into a second column instead of scrolling. */
flex-wrap: nowrap;
overflow-x: hidden;
}
.eml-nav > * {
flex-shrink: 0;
}
@media (max-width: 991.98px) {
.eml-nav {
position: static;
max-height: none;
}
}
.eml-nav-head {
position: sticky;
top: 0;
z-index: 2;
padding: 14px;
background: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.eml-nav-search {
position: relative;
}
.eml-nav-search i {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--bs-secondary-color);
}
.eml-nav-search input {
width: 100%;
padding: 8px 12px 8px 34px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 13px;
color: var(--bs-emphasis-color);
}
.eml-nav-search input:focus {
background: var(--bs-body-bg);
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
outline: 0;
}
.eml-nav-list {
padding: 8px;
}
.eml-nav-link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 11px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
font-size: 13.5px;
font-weight: 500;
text-align: left;
color: var(--bs-emphasis-color);
transition: var(--transition);
/* the section number, in the machine face */
}
.eml-nav-link .eml-nav-n {
flex-shrink: 0;
width: 22px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--bs-secondary-color);
transition: var(--transition);
}
.eml-nav-link span:not(.eml-nav-n) {
flex: 1 1 auto;
min-width: 0;
}
.eml-nav-link:hover {
background: var(--bs-secondary-bg);
}
.eml-nav-link {
/* the active section fills, rather than carrying an edge mark */
}
.eml-nav-link.active {
background: var(--bs-primary);
color: #fff;
font-weight: 600;
box-shadow: 0 4px 12px rgba(15, 101, 205, 0.24);
}
.eml-nav-link.active .eml-nav-n {
color: rgba(255, 255, 255, 0.72);
}
.eml-nav-link.active .eml-live {
background: #fff;
}
.eml-nav-link.active .eml-live::after {
border-color: #fff;
}
.eml-nav-foot {
padding: 14px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
4. CONFIGURATION PANELS + HEADER ROWS
============================================================ */
.eml-panel {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.eml-panel:hover {
border-color: var(--eml-border-strong);
box-shadow: var(--shadow-lift);
}
/* a tinted band across the top, the way a message header is banded */
.eml-panel-band {
display: flex;
align-items: center;
gap: 11px;
padding: 13px 17px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
.eml-panel-band.is-ok {
background: var(--eml-ok-soft);
}
.eml-panel-band.is-warn {
background: var(--tint-warning);
}
.eml-panel-band.is-bad {
background: var(--eml-bad-soft);
}
.eml-panel-band.is-info {
background: var(--tint-primary);
}
.eml-panel-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 10px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 17px;
}
.eml-panel-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.eml-panel-title + p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.eml-panel-body {
flex: 1 1 auto;
padding: 8px 17px 14px;
}
.eml-panel-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 11px 17px;
border-top: 1px solid var(--bs-border-color);
}
/* ---- header row -------------------------------------------------------
A setting presented as a message header: the field name in the machine
face, the value beside it, and the control that changes it. */
.eml-hdr {
display: grid;
grid-template-columns: 148px minmax(0, 1fr) auto;
align-items: center;
gap: 8px 14px;
padding: 10px 0;
}
.eml-hdr + .eml-hdr {
border-top: 1px dashed var(--bs-border-color);
}
.eml-hdr dt,
.eml-hdr .eml-hdr-key {
margin: 0;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 600;
color: var(--bs-secondary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.eml-hdr dd,
.eml-hdr .eml-hdr-val {
margin: 0;
min-width: 0;
font-size: 13px;
color: var(--bs-emphasis-color);
word-break: break-word;
}
.eml-hdr dd small,
.eml-hdr .eml-hdr-val small {
display: block;
font-size: 11.5px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
.eml-hdr .eml-hdr-ctl {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
@media (max-width: 767.98px) {
.eml-hdr {
grid-template-columns: minmax(0, 1fr) auto;
}
.eml-hdr dt,
.eml-hdr .eml-hdr-key {
grid-column: 1/-1;
}
}
/* ---- compact controls -------------------------------------------------- */
.eml-input,
.eml-select {
min-width: 140px;
padding: 6px 11px;
border-radius: var(--radius-sm);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
font-size: 13px;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.eml-input:focus,
.eml-select:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
outline: 0;
}
@media (max-width: 575.98px) {
.eml-input,
.eml-select {
min-width: 0;
width: 100%;
}
}
.eml-input.is-mono {
font-family: var(--font-mono);
font-size: 12.5px;
}
/* a secret, shown as its shape only */
.eml-secret {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 11px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border: 1px dashed var(--eml-border-strong);
font-family: var(--font-mono);
font-size: 12px;
color: var(--bs-emphasis-color);
}
.eml-secret i {
font-size: 14px;
color: var(--bs-secondary-color);
}
/* ============================================================
5. MAIL PROVIDER ROWS
Providers are wide rows, so health and authentication line up
down the column and can be compared at a glance.
============================================================ */
.eml-prov {
display: grid;
/* six children (icon, name, three cells, actions) need six columns.
The template only ever defined five, so the actions block - the
last child - had nowhere to go in row 1 and silently wrapped to an
implicit row 2 under the icon column, where it was clipped to 46px.
That happened at every desktop width, not just narrow ones. */
grid-template-columns: 46px minmax(140px, 1.6fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(260px, auto);
align-items: center;
gap: 18px;
padding: 15px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.eml-prov + .eml-prov {
margin-top: 10px;
}
.eml-prov:hover {
border-color: var(--eml-border-strong);
box-shadow: var(--shadow-lift);
}
.eml-prov {
/* the default provider is marked across the top edge */
}
.eml-prov.is-default {
border-color: rgba(15, 101, 205, 0.3);
box-shadow: inset 0 3px 0 var(--bs-primary);
}
.eml-prov.is-off {
background: var(--bs-secondary-bg);
}
.eml-prov.is-off .eml-prov-mark,
.eml-prov.is-off .eml-prov-name {
opacity: 0.68;
}
.eml-prov {
/* Below the point where five columns can breathe, stop trying to
squeeze the action buttons into the header row next to the name —
that's what forced "Amazon SES" and its hostname to wrap into a
ragged column fighting the buttons for space. Everything below the
icon/name header stacks full-width instead, with the actions row
set off by its own divider so it reads as a distinct footer rather
than bleeding into the card below it. */
}
@media (max-width: 1199.98px) {
.eml-prov {
grid-template-columns: 46px minmax(0, 1fr);
row-gap: 14px;
}
.eml-prov .eml-prov-cell {
grid-column: 2/3;
}
.eml-prov .eml-prov-act {
grid-row: auto;
grid-column: 1/-1;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid var(--bs-border-color);
}
}
.eml-prov-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 13px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 22px;
color: var(--bs-emphasis-color);
}
.eml-prov-name {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.eml-prov-name + p {
margin: 2px 0 0;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* one measured column of the row */
.eml-prov-cell {
min-width: 0;
}
.eml-prov-cell span {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.eml-prov-cell strong {
display: flex;
align-items: center;
gap: 8px;
margin-top: 3px;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.eml-prov-act {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
/* ============================================================
6. SENDER IDENTITY CARDS
============================================================ */
.eml-ident {
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.eml-ident:hover {
box-shadow: var(--shadow-lift);
}
.eml-ident {
/* an unverified identity is outlined rather than filled */
}
.eml-ident.is-unverified {
border-style: dashed;
border-color: var(--bs-warning);
}
.eml-ident-top {
display: flex;
align-items: center;
gap: 12px;
}
/* the avatar carries the sender's initials, as a mail client would show it */
.eml-ident-av {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 14px;
background: var(--tint-primary);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--bs-primary);
}
.eml-ident-name {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.eml-ident-name + p {
margin: 1px 0 0;
font-family: var(--font-mono);
font-size: 12px;
color: var(--bs-secondary-color);
word-break: break-all;
}
/* the signature, shown as it would appear beneath a message */
.eml-ident-sig {
padding: 12px 14px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border-left: 3px solid var(--eml-border-strong);
font-size: 12px;
line-height: 1.7;
color: var(--bs-secondary-color);
}
.eml-ident-sig strong {
display: block;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.eml-ident-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
7. TEMPLATE CARDS
Each template is previewed as a miniature letter, so the shape
of the message is recognisable before it is opened.
============================================================ */
.eml-tpl {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.eml-tpl:hover {
border-color: var(--eml-border-strong);
box-shadow: var(--shadow-lift);
}
.eml-tpl:hover .eml-tpl-act {
opacity: 1;
}
.eml-tpl.is-draft .eml-tpl-paper {
opacity: 0.6;
}
/* the miniature letter */
.eml-tpl-paper {
position: relative;
padding: 14px 16px 16px;
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.eml-tpl-sub {
display: block;
margin-bottom: 10px;
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* the body of the letter, suggested rather than written out */
.eml-tpl-lines {
display: flex;
flex-direction: column;
gap: 6px;
}
.eml-tpl-lines i {
display: block;
height: 5px;
border-radius: 3px;
background: var(--eml-border-strong);
opacity: 0.75;
}
.eml-tpl-lines i:nth-child(1) {
width: 100%;
}
.eml-tpl-lines i:nth-child(2) {
width: 92%;
}
.eml-tpl-lines i:nth-child(3) {
width: 78%;
}
.eml-tpl-lines i:nth-child(4) {
width: 44%;
background: var(--bs-primary);
opacity: 1;
height: 12px;
border-radius: 4px;
margin-top: 4px;
}
/* actions ride over the paper, appearing on hover and always on touch */
.eml-tpl-act {
position: absolute;
right: 10px;
top: 10px;
display: flex;
gap: 6px;
opacity: 0;
transition: var(--transition);
}
@media (hover: none) {
.eml-tpl-act {
opacity: 1;
}
}
.eml-tpl-meta {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
}
.eml-tpl-name {
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.eml-tpl-name + p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.eml-tpl-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
padding: 10px 16px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* ============================================================
8. RULES, QUEUE AND LOG ROWS
============================================================ */
/* a notification rule: trigger, audience, channel */
.eml-rule {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 13px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.eml-rule + .eml-rule {
margin-top: 8px;
}
.eml-rule:hover {
border-color: var(--eml-border-strong);
}
.eml-rule.is-off {
background: var(--bs-secondary-bg);
}
.eml-rule.is-off .eml-rule-body {
opacity: 0.66;
}
@media (max-width: 767.98px) {
.eml-rule {
grid-template-columns: 38px minmax(0, 1fr);
row-gap: 10px;
}
.eml-rule .eml-rule-ctl {
grid-column: 2/-1;
justify-content: flex-start;
}
}
.eml-rule-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 18px;
}
.eml-rule-body {
min-width: 0;
}
.eml-rule-body strong {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.eml-rule-body p {
margin: 2px 0 0;
font-size: 12px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
.eml-rule-ctl {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
}
/* an audience or channel tag */
/* ---- queue rows -------------------------------------------------------
A rib along the leading edge carries the priority, so the queue can be
scanned without reading it. */
.eml-q {
display: grid;
grid-template-columns: 4px minmax(0, 1fr) auto;
align-items: center;
gap: 0 14px;
padding: 0;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.eml-q + .eml-q {
margin-top: 8px;
}
.eml-q::before {
content: "";
align-self: stretch;
background: var(--eml-border-strong);
}
.eml-q.is-high::before {
background: var(--eml-bad);
}
.eml-q.is-normal::before {
background: var(--bs-primary);
}
.eml-q.is-low::before {
background: var(--bs-warning);
}
.eml-q-body {
min-width: 0;
padding: 11px 0;
}
.eml-q-body strong {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.eml-q-body span {
display: block;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
word-break: break-all;
}
.eml-q-side {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px 11px 0;
text-align: right;
}
@media (max-width: 575.98px) {
.eml-q-side {
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
}
/* ---- log rows ---------------------------------------------------------- */
.eml-log {
display: grid;
grid-template-columns: 152px 74px minmax(0, 1fr);
gap: 14px;
padding: 9px 0;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.7;
}
.eml-log + .eml-log {
border-top: 1px solid var(--bs-border-color);
}
.eml-log .eml-log-t {
color: var(--bs-secondary-color);
white-space: nowrap;
}
.eml-log .eml-log-msg {
min-width: 0;
color: var(--bs-emphasis-color);
word-break: break-word;
}
.eml-log.is-bad .eml-log-msg {
color: var(--eml-bad);
}
.eml-log.is-warn .eml-log-msg {
color: rgb(142.2, 108.7769230769, 0);
}
@media (max-width: 767.98px) {
.eml-log {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
}
}
/* ============================================================
9. AUTHENTICATION RECORDS
DNS-based authentication shown as the record itself, with the
result stamped beside it.
============================================================ */
.eml-dns {
padding: 15px 17px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.eml-dns + .eml-dns {
margin-top: 10px;
}
.eml-dns-top {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.eml-dns-top h6 {
margin: 0;
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--bs-emphasis-color);
}
.eml-dns-top p {
margin: 0;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* the record value, wrapped and selectable */
.eml-dns-rec {
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--bs-emphasis-color);
font-family: var(--font-mono);
font-size: 11.5px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.8);
word-break: break-all;
overflow-x: auto;
}
/* a pass mark, stamped rather than written */
.eml-seal {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border: 1px solid currentColor;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.eml-seal i {
font-size: 14px;
}
.eml-seal.is-warn {
color: rgb(142.2, 108.7769230769, 0);
}
.eml-seal.is-bad {
color: var(--eml-bad);
}
/* ============================================================
10. PREMIUM ACCORDION
============================================================ */
.eml-acc {
border-radius: var(--radius);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.eml-acc .accordion-item {
border: 0;
background: var(--bs-body-bg);
}
.eml-acc .accordion-item + .accordion-item {
border-top: 1px solid var(--bs-border-color);
}
.eml-acc .accordion-button {
gap: 11px;
padding: 15px 17px;
background: var(--bs-body-bg);
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
box-shadow: none;
}
.eml-acc .accordion-button::after {
margin-left: 0;
}
.eml-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.eml-acc .accordion-button:focus {
box-shadow: 0 0 0 3px var(--tint-primary);
}
.eml-acc .accordion-button i {
font-size: 17px;
}
.eml-acc .eml-acc-spacer {
margin-left: auto;
}
.eml-acc .accordion-body {
padding: 4px 17px 17px;
}
/* ============================================================
11. MAIL ACTIVITY TIMELINE
Vertical, with the time in its own gutter.
============================================================ */
.eml-tl {
padding: 20px 22px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.eml-tl-step {
position: relative;
display: grid;
grid-template-columns: 116px 30px minmax(0, 1fr);
gap: 0 14px;
padding-bottom: 20px;
/* the rail runs down the marker column */
}
.eml-tl-step::before {
content: "";
position: absolute;
left: 144px;
top: 20px;
bottom: 0;
width: 2px;
background: var(--bs-tertiary-bg);
}
.eml-tl-step:last-child {
padding-bottom: 0;
}
.eml-tl-step:last-child::before {
display: none;
}
.eml-tl-step.is-done::before {
background: var(--bs-success);
}
@media (max-width: 767.98px) {
.eml-tl-step {
grid-template-columns: 30px minmax(0, 1fr);
}
.eml-tl-step::before {
left: 14px;
}
.eml-tl-step .eml-tl-when {
grid-column: 2;
order: -1;
margin-bottom: 2px;
text-align: left;
}
}
.eml-tl-when {
font-family: var(--font-mono);
font-size: 11.5px;
line-height: 1.6;
text-align: right;
color: var(--bs-secondary-color);
}
.eml-tl-when strong {
display: block;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.eml-tl-dot {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--bs-tertiary-bg);
font-size: 15px;
color: var(--bs-secondary-color);
}
.is-done .eml-tl-dot {
background: var(--bs-success);
border-color: var(--bs-success);
color: #fff;
}
.is-current .eml-tl-dot {
border-color: var(--bs-primary);
color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
.eml-tl-body {
min-width: 0;
padding-top: 3px;
}
.eml-tl-body h6 {
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.eml-tl-body p {
margin: 3px 0 0;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* ============================================================
12. OFFCANVAS, PANEL HELPERS, EMPTY STATE
============================================================ */
/* The theme sets `.offcanvas.offcanvas-end { width: auto !important }`; the
workspace has to match on three classes to beat it. */
.offcanvas.offcanvas-end.eml-canvas {
width: 88% !important;
max-width: 1160px !important;
}
.eml-canvas-head {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 24px;
background: var(--bs-emphasis-color);
color: #fff;
}
.eml-canvas-head .eml-panel-ic {
background: rgba(255, 255, 255, 0.1);
border-color: var(--eml-ink-line);
color: #fff;
}
.eml-canvas-head .offcanvas-title {
color: #fff;
}
.eml-canvas-head p {
color: rgba(255, 255, 255, 0.55);
}
.eml-canvas-head .btn-close {
filter: invert(1) grayscale(1);
opacity: 0.7;
}
.eml-canvas-body {
padding: 22px 24px 30px;
}
.eml-sect + .eml-sect {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--bs-border-color);
}
.eml-sect-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 13px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.eml-sect-title i {
font-size: 16px;
color: var(--bs-primary);
}
/* a validation result */
.eml-check {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.eml-check + .eml-check {
border-top: 1px solid var(--bs-border-color);
}
.eml-check > i {
flex-shrink: 0;
margin-top: 1px;
font-size: 16px;
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.eml-check.is-warn > i {
color: rgb(142.2, 108.7769230769, 0);
}
.eml-check.is-bad > i {
color: var(--eml-bad);
}
.eml-check span {
display: block;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* audit entries */
.eml-audit {
display: grid;
grid-template-columns: 148px minmax(0, 1fr);
gap: 14px;
padding: 11px 0;
}
.eml-audit + .eml-audit {
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.eml-audit {
grid-template-columns: minmax(0, 1fr);
gap: 3px;
}
}
.eml-audit-when {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.eml-audit-when strong {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.eml-audit-what {
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.eml-audit-what span {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ---- empty state ------------------------------------------------------- */
.eml-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
padding: 38px 24px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px dashed var(--eml-border-strong);
}
.eml-empty i {
font-size: 30px;
color: var(--bs-secondary-color);
opacity: 0.8;
}
.eml-empty h6 {
margin: 8px 0 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.eml-empty p {
margin: 0;
max-width: 48ch;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
.eml-empty .btn {
margin-top: 10px;
}
/*===== sms settings =====*/
/*-----------------
SMS Settings — gateway and messaging configuration components
Reusable pieces for the SMS Gateway & Messaging Configuration Center.
Class prefix `sms-`.
The visual language is a messaging console. Where the email centre speaks
in message headers and SMTP transcripts, this one speaks in the things
that are particular to SMS: a handset showing the message as it will
actually arrive, a segment counter because 160 characters is a hard
boundary that costs money, sender IDs shown as registered plates, a
delivery ladder from submission to handset, and per-message pricing.
It borrows nothing from `_email-settings.scss`, `_financial-settings.scss`
or `_settings.scss` and overrides nothing in them.
Contents
1. Tokens + shared pieces
2. Workspace hero + delivery ladder
3. Sticky section navigation
4. Configuration cards + setting lines
5. Handset preview + segment meter
6. Gateway provider tiles
7. Sender ID plates
8. Template cards
9. Rules, queue and log rows
10. Premium accordion
11. Messaging timeline
12. Offcanvas, panel helpers and empty state
-----------------*/
/* ============================================================
1. TOKENS + SHARED PIECES
============================================================ */
:root {
--sms-border: var(--bs-border-color, #E9EDF4);
--sms-border-strong: #EDF1F6;
/* the theme has no purple tint, so one is mixed to match the density of
the `-transparent` colours it does define */
--sms-ok: #1ABE17;
--sms-ok-soft: var(--tint-success);
--sms-bad: #E82646;
--sms-bad-soft: var(--tint-danger);
}
@media (prefers-reduced-motion: reduce) {
[class*=sms-],
[class*=sms-]::before,
[class*=sms-]::after {
animation: none !important;
transition: none !important;
}
}
/* Carries a numeric value into CSS without an inline style. */
.sms-p-0 {
--p: 0;
}
.sms-p-1 {
--p: 1;
}
.sms-p-2 {
--p: 2;
}
.sms-p-3 {
--p: 3;
}
.sms-p-4 {
--p: 4;
}
.sms-p-5 {
--p: 5;
}
.sms-p-6 {
--p: 6;
}
.sms-p-7 {
--p: 7;
}
.sms-p-8 {
--p: 8;
}
.sms-p-9 {
--p: 9;
}
.sms-p-10 {
--p: 10;
}
.sms-p-11 {
--p: 11;
}
.sms-p-12 {
--p: 12;
}
.sms-p-13 {
--p: 13;
}
.sms-p-14 {
--p: 14;
}
.sms-p-15 {
--p: 15;
}
.sms-p-16 {
--p: 16;
}
.sms-p-17 {
--p: 17;
}
.sms-p-18 {
--p: 18;
}
.sms-p-19 {
--p: 19;
}
.sms-p-20 {
--p: 20;
}
.sms-p-21 {
--p: 21;
}
.sms-p-22 {
--p: 22;
}
.sms-p-23 {
--p: 23;
}
.sms-p-24 {
--p: 24;
}
.sms-p-25 {
--p: 25;
}
.sms-p-26 {
--p: 26;
}
.sms-p-27 {
--p: 27;
}
.sms-p-28 {
--p: 28;
}
.sms-p-29 {
--p: 29;
}
.sms-p-30 {
--p: 30;
}
.sms-p-31 {
--p: 31;
}
.sms-p-32 {
--p: 32;
}
.sms-p-33 {
--p: 33;
}
.sms-p-34 {
--p: 34;
}
.sms-p-35 {
--p: 35;
}
.sms-p-36 {
--p: 36;
}
.sms-p-37 {
--p: 37;
}
.sms-p-38 {
--p: 38;
}
.sms-p-39 {
--p: 39;
}
.sms-p-40 {
--p: 40;
}
.sms-p-41 {
--p: 41;
}
.sms-p-42 {
--p: 42;
}
.sms-p-43 {
--p: 43;
}
.sms-p-44 {
--p: 44;
}
.sms-p-45 {
--p: 45;
}
.sms-p-46 {
--p: 46;
}
.sms-p-47 {
--p: 47;
}
.sms-p-48 {
--p: 48;
}
.sms-p-49 {
--p: 49;
}
.sms-p-50 {
--p: 50;
}
.sms-p-51 {
--p: 51;
}
.sms-p-52 {
--p: 52;
}
.sms-p-53 {
--p: 53;
}
.sms-p-54 {
--p: 54;
}
.sms-p-55 {
--p: 55;
}
.sms-p-56 {
--p: 56;
}
.sms-p-57 {
--p: 57;
}
.sms-p-58 {
--p: 58;
}
.sms-p-59 {
--p: 59;
}
.sms-p-60 {
--p: 60;
}
.sms-p-61 {
--p: 61;
}
.sms-p-62 {
--p: 62;
}
.sms-p-63 {
--p: 63;
}
.sms-p-64 {
--p: 64;
}
.sms-p-65 {
--p: 65;
}
.sms-p-66 {
--p: 66;
}
.sms-p-67 {
--p: 67;
}
.sms-p-68 {
--p: 68;
}
.sms-p-69 {
--p: 69;
}
.sms-p-70 {
--p: 70;
}
.sms-p-71 {
--p: 71;
}
.sms-p-72 {
--p: 72;
}
.sms-p-73 {
--p: 73;
}
.sms-p-74 {
--p: 74;
}
.sms-p-75 {
--p: 75;
}
.sms-p-76 {
--p: 76;
}
.sms-p-77 {
--p: 77;
}
.sms-p-78 {
--p: 78;
}
.sms-p-79 {
--p: 79;
}
.sms-p-80 {
--p: 80;
}
.sms-p-81 {
--p: 81;
}
.sms-p-82 {
--p: 82;
}
.sms-p-83 {
--p: 83;
}
.sms-p-84 {
--p: 84;
}
.sms-p-85 {
--p: 85;
}
.sms-p-86 {
--p: 86;
}
.sms-p-87 {
--p: 87;
}
.sms-p-88 {
--p: 88;
}
.sms-p-89 {
--p: 89;
}
.sms-p-90 {
--p: 90;
}
.sms-p-91 {
--p: 91;
}
.sms-p-92 {
--p: 92;
}
.sms-p-93 {
--p: 93;
}
.sms-p-94 {
--p: 94;
}
.sms-p-95 {
--p: 95;
}
.sms-p-96 {
--p: 96;
}
.sms-p-97 {
--p: 97;
}
.sms-p-98 {
--p: 98;
}
.sms-p-99 {
--p: 99;
}
.sms-p-100 {
--p: 100;
}
.sms-mono {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: -0.01em;
}
.sms-lbl {
display: block;
margin: 0 0 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* ---- status badges ----------------------------------------------------
Squared off and monospaced, in the manner of a delivery receipt code. */
.sms-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 5px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
color: var(--bs-secondary-color);
}
.sms-badge.is-ok {
background: var(--sms-ok-soft);
border-color: rgba(26, 190, 23, 0.28);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.sms-badge.is-warn {
background: var(--tint-warning);
border-color: rgba(234, 179, 0, 0.34);
color: rgb(152.4, 116.5794871795, 0);
}
.sms-badge.is-bad {
background: var(--sms-bad-soft);
border-color: rgba(232, 38, 70, 0.26);
color: var(--sms-bad);
}
.sms-badge.is-accent {
background: var(--tint-primary);
border-color: rgba(74, 0, 229, 0.22);
color: var(--bs-primary);
}
/* a small tag for a route, country or channel */
/* a price, in tabular figures so a column of them lines up */
.sms-price {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
2. WORKSPACE HERO + DELIVERY LADDER
The hero pairs the configuration's identity with the journey a
message actually takes, which is what an SMS console is for.
============================================================ */
.sms-hero {
position: relative;
padding: 26px 28px;
margin-bottom: 26px;
border-radius: var(--radius);
background: radial-gradient(120% 140% at 100% 0%, var(--tint-primary) 0%, rgba(255, 255, 255, 0) 52%), var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow: hidden;
}
@media (max-width: 575.98px) {
.sms-hero {
padding: 20px;
}
}
.sms-hero-top {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.sms-hero-crest {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: 17px;
background: var(--bs-primary);
color: #fff;
font-size: 25px;
box-shadow: 0 8px 20px rgba(74, 0, 229, 0.3);
}
.sms-hero-title {
margin: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.sms-hero-title {
font-size: 21px;
}
}
.sms-hero-sub {
margin: 4px 0 0;
max-width: 64ch;
font-size: 13.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
/* the hero's facts sit in a boxed grid, not on a rule or in chips */
.sms-hero-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
gap: 1px;
margin-top: 22px;
border-radius: var(--radius);
background: var(--bs-border-color);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.sms-hero-cell {
display: flex;
flex-direction: column;
gap: 4px;
padding: 13px 16px;
background: var(--bs-body-bg);
}
.sms-hero-cell span {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.sms-hero-cell strong {
display: flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-hero-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
}
/* ---- the delivery ladder ----------------------------------------------
Where a message went and how long each leg took. Rendered as connected
stages so the slow leg is obvious without reading the numbers. */
.sms-ladder {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 20px;
padding: 16px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
.sms-ladder {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.sms-ladder-leg {
position: relative;
padding-left: 18px;
/* the marker, and the rule running on to the next leg */
}
.sms-ladder-leg::before {
content: "";
position: absolute;
left: 0;
top: -7px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--bs-primary);
}
.sms-ladder-leg::after {
content: "";
position: absolute;
left: 9px;
right: -10px;
top: -3px;
height: 1px;
background: var(--sms-border-strong);
}
.sms-ladder-leg:last-child::after {
display: none;
}
.sms-ladder-leg.is-pending::before {
background: var(--bs-tertiary-bg);
}
.sms-ladder-leg span {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.sms-ladder-leg strong {
display: block;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-ladder-leg small {
display: block;
font-size: 11px;
color: var(--bs-secondary-color);
}
@media (max-width: 767.98px) {
.sms-ladder-leg::after {
display: none;
}
}
/* ============================================================
3. STICKY SECTION NAVIGATION
A plain rail: each entry carries a right-aligned state word so
the whole centre can be read down the column.
============================================================ */
.sms-nav {
position: sticky;
top: calc(60px + 16px);
max-height: calc(100vh - 60px - 32px);
padding: 10px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow-y: auto;
/* Bootstrap's `.nav` wraps; in a capped-height column that wraps
overflow into a second column instead of scrolling. */
flex-wrap: nowrap;
overflow-x: hidden;
}
.sms-nav > * {
flex-shrink: 0;
}
@media (max-width: 991.98px) {
.sms-nav {
position: static;
max-height: none;
}
}
.sms-nav-link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
font-size: 13.5px;
font-weight: 500;
text-align: left;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.sms-nav-link i {
flex-shrink: 0;
font-size: 17px;
color: var(--bs-secondary-color);
transition: var(--transition);
}
.sms-nav-link .sms-nav-txt {
flex: 1 1 auto;
min-width: 0;
}
.sms-nav-link {
/* the state word, quiet until the row is active */
}
.sms-nav-link .sms-nav-state {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.sms-nav-link:hover {
background: var(--bs-secondary-bg);
}
.sms-nav-link {
/* the active row is outlined and tinted rather than filled solid */
}
.sms-nav-link.active {
background: var(--tint-primary);
border-left: 3px solid var(--bs-primary);
padding-left: 9px;
color: var(--bs-primary);
font-weight: 600;
}
.sms-nav-link.active i,
.sms-nav-link.active .sms-nav-state {
color: var(--bs-primary);
}
.sms-nav-foot {
margin-top: 8px;
padding: 14px 12px 6px;
border-top: 1px solid var(--bs-border-color);
}
/* a credit balance bar */
.sms-credit {
height: 7px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.sms-credit span {
display: block;
height: 100%;
width: calc(var(--p, 0) * 1%);
border-radius: inherit;
background: var(--bs-primary);
}
.sms-credit.is-low span {
background: var(--bs-warning);
}
/* ============================================================
4. CONFIGURATION CARDS + SETTING LINES
============================================================ */
.sms-card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.sms-card:hover {
border-color: var(--sms-border-strong);
box-shadow: var(--shadow-lift);
}
/* the header is a plain bar with a rule beneath, the icon set apart */
.sms-card-head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px 13px;
border-bottom: 2px solid var(--bs-border-color);
flex-wrap: wrap;
}
.sms-card-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 11px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 18px;
}
.sms-card-ic.is-ok {
background: var(--sms-ok-soft);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.sms-card-ic.is-warn {
background: var(--tint-warning);
color: rgb(152.4, 116.5794871795, 0);
}
.sms-card-ic.is-bad {
background: var(--sms-bad-soft);
color: var(--sms-bad);
}
.sms-card-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-card-title + p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.sms-card-body {
flex: 1 1 auto;
padding: 6px 18px 14px;
}
.sms-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 11px 18px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
/* ---- setting line -----------------------------------------------------
The name sits above its value, and the control sits to the right. A
stacked pair rather than a labelled column, so long API endpoints and
keys have the full width to themselves. */
.sms-line {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 0;
flex-wrap: wrap;
}
.sms-line + .sms-line {
border-top: 1px solid var(--bs-border-color);
}
.sms-line .sms-line-txt {
flex: 1 1 auto;
min-width: 0;
}
.sms-line strong {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-line p {
margin: 2px 0 0;
font-size: 12px;
line-height: 1.55;
color: var(--bs-secondary-color);
word-break: break-word;
}
.sms-line .sms-line-ctl {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
}
@media (max-width: 575.98px) {
.sms-line {
flex-wrap: wrap;
}
.sms-line .sms-line-ctl {
width: 100%;
}
}
.sms-input,
.sms-select {
min-width: 138px;
padding: 6px 11px;
border-radius: var(--radius-sm);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
font-size: 13px;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.sms-input:focus,
.sms-select:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
outline: 0;
}
@media (max-width: 575.98px) {
.sms-input,
.sms-select {
min-width: 0;
width: 100%;
}
}
.sms-input.is-mono {
font-family: var(--font-mono);
font-size: 12.5px;
}
/* a credential, shown as its shape only */
.sms-secret {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border: 1px dashed var(--sms-border-strong);
font-family: var(--font-mono);
font-size: 12px;
color: var(--bs-emphasis-color);
}
.sms-secret i {
font-size: 14px;
color: var(--bs-secondary-color);
}
/* an endpoint or payload, on a dark strip */
.sms-code {
padding: 10px 12px;
border-radius: var(--radius-sm);
background: #101828;
font-family: var(--font-mono);
font-size: 11.5px;
line-height: 1.75;
color: rgba(255, 255, 255, 0.8);
word-break: break-all;
overflow-x: auto;
}
/* ============================================================
5. HANDSET PREVIEW + SEGMENT METER
The message as it will actually arrive, because on SMS the
rendering IS the specification.
============================================================ */
.sms-phone {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 12px 16px;
border-radius: 18px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
/* the sender line at the head of the conversation */
}
.sms-phone .sms-phone-from {
display: block;
margin-bottom: 2px;
text-align: center;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* the message bubble, with the tail an SMS client draws */
.sms-bubble {
position: relative;
align-self: flex-start;
max-width: 92%;
padding: 10px 13px;
border-radius: 14px 14px 14px 4px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
font-size: 12.5px;
line-height: 1.65;
color: var(--bs-emphasis-color);
white-space: pre-line;
/* a placeholder inside the body, marked so it can be picked out */
}
.sms-bubble code {
padding: 0 3px;
border-radius: 4px;
background: var(--tint-primary);
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-primary);
}
.sms-bubble + .sms-bubble {
margin-top: 2px;
}
.sms-phone-time {
align-self: flex-start;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
/* ---- segment meter ----------------------------------------------------
160 characters is a hard boundary that costs money, so it is shown as a
filled track with the count beside it rather than buried in a footnote. */
.sms-seg {
display: flex;
align-items: center;
gap: 10px;
}
.sms-seg .sms-seg-track {
position: relative;
flex: 1 1 auto;
height: 5px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.sms-seg .sms-seg-track span {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--p, 0) * 1%);
border-radius: inherit;
background: var(--bs-primary);
}
.sms-seg .sms-seg-n {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--bs-secondary-color);
}
.sms-seg {
/* over one segment: the message now costs twice as much to send */
}
.sms-seg.is-over .sms-seg-track span {
background: var(--bs-warning);
}
.sms-seg.is-over .sms-seg-n {
color: rgb(142.2, 108.7769230769, 0);
}
/* ============================================================
6. GATEWAY PROVIDER TILES
Compact tiles in a grid, each carrying its route, latency and
the price it charges per message.
============================================================ */
.sms-gw {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
padding: 17px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.sms-gw:hover {
border-color: var(--sms-border-strong);
box-shadow: var(--shadow-lift);
}
.sms-gw {
/* the default route is ringed, so it reads as selected rather than better */
}
.sms-gw.is-default {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
}
.sms-gw.is-off {
background: var(--bs-secondary-bg);
}
.sms-gw.is-off .sms-gw-mark,
.sms-gw.is-off .sms-gw-name {
opacity: 0.68;
}
.sms-gw-top {
display: flex;
align-items: flex-start;
gap: 12px;
}
.sms-gw-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 13px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 21px;
color: var(--bs-emphasis-color);
}
.sms-gw-name {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-gw-name + p {
margin: 2px 0 0;
font-family: var(--font-mono);
font-size: 11px;
color: var(--bs-secondary-color);
word-break: break-all;
}
/* the tile's measured facts, on their own hairline grid */
.sms-gw-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
border-radius: var(--radius-sm);
background: var(--bs-border-color);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.sms-gw-fact {
padding: 8px 10px;
background: var(--bs-body-bg);
text-align: center;
}
.sms-gw-fact span {
display: block;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.sms-gw-fact strong {
display: block;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-gw-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
7. SENDER ID PLATES
A sender ID is six fixed characters that a regulator has to
approve, so it is drawn as a registered plate.
============================================================ */
.sms-sid {
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.sms-sid:hover {
box-shadow: var(--shadow-lift);
}
.sms-sid.is-pending {
border-style: dashed;
border-color: var(--bs-warning);
}
/* the plate itself */
.sms-plate {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 10px;
border-radius: var(--radius-sm);
background: var(--bs-dark);
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.22em;
text-indent: 0.22em;
color: #fff;
}
.is-pending .sms-plate {
background: var(--bs-secondary-bg);
border: 1px dashed var(--sms-border-strong);
color: var(--bs-secondary-color);
}
.sms-sid-name {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-sid-name + p {
margin: 2px 0 0;
font-size: 12px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
/* the registration facts, as label/value pairs on one line each */
.sms-sid-facts {
display: flex;
flex-direction: column;
gap: 7px;
}
.sms-sid-facts div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 12px;
}
.sms-sid-facts dt,
.sms-sid-facts span:first-child {
margin: 0;
font-weight: 400;
color: var(--bs-secondary-color);
}
.sms-sid-facts dd,
.sms-sid-facts span:last-child {
margin: 0;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-sid-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
8. TEMPLATE CARDS
============================================================ */
.sms-tpl {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.sms-tpl:hover {
border-color: var(--sms-border-strong);
box-shadow: var(--shadow-lift);
}
.sms-tpl.is-draft .sms-phone {
opacity: 0.62;
}
.sms-tpl-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px 12px;
}
.sms-tpl-name {
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-tpl-name + p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.sms-tpl-body {
padding: 0 16px 14px;
}
.sms-tpl-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
padding: 10px 16px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
9. RULES, QUEUE AND LOG ROWS
============================================================ */
/* a notification rule, with its trigger set apart from its audience */
.sms-rule {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.sms-rule + .sms-rule {
margin-top: 8px;
}
.sms-rule:hover {
border-color: var(--sms-border-strong);
}
.sms-rule.is-off {
background: var(--bs-secondary-bg);
}
.sms-rule.is-off .sms-rule-body {
opacity: 0.66;
}
@media (max-width: 767.98px) {
.sms-rule {
grid-template-columns: 40px minmax(0, 1fr);
row-gap: 10px;
}
.sms-rule .sms-rule-ctl {
grid-column: 2/-1;
justify-content: flex-start;
}
}
.sms-rule-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 19px;
}
.sms-rule-body {
min-width: 0;
}
.sms-rule-body strong {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-rule-body p {
margin: 2px 0 0;
font-size: 12px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
.sms-rule-ctl {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
}
/* ---- queue rows -------------------------------------------------------
The delivery state is the leading column, because in a message queue
that is the only thing being scanned for. */
.sms-q {
display: grid;
grid-template-columns: 108px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.sms-q + .sms-q {
margin-top: 8px;
}
@media (max-width: 767.98px) {
.sms-q {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
}
.sms-q-body {
min-width: 0;
}
.sms-q-body strong {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-q-body span {
display: block;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
word-break: break-word;
}
.sms-q-side {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
}
/* ---- log rows ---------------------------------------------------------- */
.sms-log {
display: grid;
grid-template-columns: 148px 96px minmax(0, 1fr);
gap: 14px;
padding: 9px 0;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.7;
}
.sms-log + .sms-log {
border-top: 1px solid var(--bs-border-color);
}
.sms-log .sms-log-t {
color: var(--bs-secondary-color);
white-space: nowrap;
}
.sms-log .sms-log-msg {
min-width: 0;
color: var(--bs-emphasis-color);
word-break: break-word;
}
.sms-log.is-bad .sms-log-msg {
color: var(--sms-bad);
}
.sms-log.is-warn .sms-log-msg {
color: rgb(142.2, 108.7769230769, 0);
}
@media (max-width: 767.98px) {
.sms-log {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
}
}
/* ============================================================
10. PREMIUM ACCORDION
============================================================ */
.sms-acc {
border-radius: var(--radius);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.sms-acc .accordion-item {
border: 0;
background: var(--bs-body-bg);
}
.sms-acc .accordion-item + .accordion-item {
border-top: 1px solid var(--bs-border-color);
}
.sms-acc .accordion-button {
gap: 11px;
padding: 15px 18px;
background: var(--bs-body-bg);
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
box-shadow: none;
}
.sms-acc .accordion-button::after {
margin-left: 0;
}
.sms-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.sms-acc .accordion-button:focus {
box-shadow: 0 0 0 3px var(--tint-primary);
}
.sms-acc .accordion-button i {
font-size: 17px;
}
.sms-acc .sms-acc-spacer {
margin-left: auto;
}
.sms-acc .accordion-body {
padding: 4px 18px 18px;
}
/* ============================================================
11. MESSAGING TIMELINE
A trail of stages that wraps, each notched into the next.
============================================================ */
.sms-trail {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 20px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.sms-trail-step {
position: relative;
flex: 1 1 210px;
padding: 14px 16px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
/* the notch pointing on to the next stage */
}
.sms-trail-step::after {
content: "";
position: absolute;
right: -7px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 12px;
height: 12px;
background: inherit;
border-top: 1px solid var(--bs-border-color);
border-right: 1px solid var(--bs-border-color);
z-index: 1;
}
.sms-trail-step:last-child::after {
display: none;
}
.sms-trail-step.is-done {
background: var(--sms-ok-soft);
border-color: rgba(26, 190, 23, 0.26);
}
.sms-trail-step.is-done::after {
border-color: rgba(26, 190, 23, 0.26);
}
.sms-trail-step.is-done .sms-trail-n {
background: var(--bs-success);
border-color: var(--bs-success);
color: #fff;
}
.sms-trail-step.is-current {
background: var(--tint-primary);
border-color: rgba(74, 0, 229, 0.28);
}
.sms-trail-step.is-current::after {
border-color: rgba(74, 0, 229, 0.28);
}
.sms-trail-step.is-current .sms-trail-n {
border-color: var(--bs-primary);
color: var(--bs-primary);
}
@media (max-width: 991.98px) {
.sms-trail-step {
flex: 1 1 100%;
}
.sms-trail-step::after {
right: 50%;
top: auto;
bottom: -7px;
transform: translateX(50%) rotate(135deg);
}
}
.sms-trail-top {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 7px;
}
.sms-trail-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--bs-tertiary-bg);
font-size: 13px;
color: var(--bs-secondary-color);
}
.sms-trail-title {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-trail-when {
display: block;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.sms-trail-txt {
margin: 0;
font-size: 12px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* ============================================================
12. OFFCANVAS, PANEL HELPERS, EMPTY STATE
============================================================ */
/* The theme sets `.offcanvas.offcanvas-end { width: auto !important }`; the
workspace has to match on three classes to beat it. */
.offcanvas.offcanvas-end.sms-canvas {
width: 88% !important;
max-width: 1160px !important;
}
.sms-canvas-head {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 24px;
background: var(--tint-primary);
border-bottom: 1px solid var(--bs-border-color);
}
.sms-canvas-body {
padding: 22px 24px 30px;
}
.sms-sect + .sms-sect {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--bs-border-color);
}
.sms-sect-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 13px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.sms-sect-title i {
font-size: 16px;
color: var(--bs-primary);
}
/* a validation result */
.sms-check {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.sms-check + .sms-check {
border-top: 1px solid var(--bs-border-color);
}
.sms-check > i {
flex-shrink: 0;
margin-top: 1px;
font-size: 16px;
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.sms-check.is-warn > i {
color: rgb(142.2, 108.7769230769, 0);
}
.sms-check.is-bad > i {
color: var(--sms-bad);
}
.sms-check span {
display: block;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* audit entries */
.sms-audit {
display: grid;
grid-template-columns: 146px minmax(0, 1fr);
gap: 14px;
padding: 11px 0;
}
.sms-audit + .sms-audit {
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.sms-audit {
grid-template-columns: minmax(0, 1fr);
gap: 3px;
}
}
.sms-audit-when {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.sms-audit-when strong {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-audit-what {
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.sms-audit-what span {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ---- empty state ------------------------------------------------------- */
.sms-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
padding: 38px 24px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px dashed var(--sms-border-strong);
}
.sms-empty i {
font-size: 30px;
color: var(--bs-secondary-color);
opacity: 0.8;
}
.sms-empty h6 {
margin: 8px 0 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sms-empty p {
margin: 0;
max-width: 48ch;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
.sms-empty .btn {
margin-top: 10px;
}
/*===== account security =====*/
/*-----------------
Account & Security — reusable account protection components
A shared vocabulary for the Account & Security Center: identity,
authentication, passwords, sessions, devices, permissions and the
activity that follows from all of it. Class prefix `acs-`.
The visual language is a security console. Where the finance, email and
SMS centres are about configuring a service, this one is about a person
and the state of their account, so the pieces are different in kind: a
shield carrying a posture score, factor cards that show whether a method
is armed, device cards that mark the machine you are reading this on,
login rows ranked by outcome, recovery codes struck through as they are
spent, and recommendations ordered by how much risk each one removes.
It borrows nothing from `_financial-settings.scss`, `_email-settings.scss`,
`_sms-settings.scss` or `_settings.scss` and overrides nothing in them.
Contents
1. Tokens + shared pieces
2. Identity hero + posture shield
3. Sticky section navigation
4. Security cards + fact rows
5. Authentication factor cards
6. Password strength + recovery codes
7. Session and device cards
8. Login history rows
9. Permission grid
10. Recommendation cards
11. Premium accordion + alternating timeline
12. Offcanvas, panel helpers and empty state
-----------------*/
/* ============================================================
1. TOKENS + SHARED PIECES
============================================================ */
:root {
--acs-border: var(--bs-border-color, #E9EDF4);
--acs-border-strong: #EDF1F6;
--acs-safe: #1ABE17;
--acs-safe-soft: #E8F9E8;
--acs-watch: #EAB300;
--acs-watch-soft: #FEF8EA;
--acs-risk: #E82646;
--acs-risk-soft: #FDE9ED;
}
@media (prefers-reduced-motion: reduce) {
[class*=acs-],
[class*=acs-]::before,
[class*=acs-]::after {
animation: none !important;
transition: none !important;
}
}
/* Carries a numeric value into CSS without an inline style. */
.acs-p-0 {
--p: 0;
}
.acs-p-1 {
--p: 1;
}
.acs-p-2 {
--p: 2;
}
.acs-p-3 {
--p: 3;
}
.acs-p-4 {
--p: 4;
}
.acs-p-5 {
--p: 5;
}
.acs-p-6 {
--p: 6;
}
.acs-p-7 {
--p: 7;
}
.acs-p-8 {
--p: 8;
}
.acs-p-9 {
--p: 9;
}
.acs-p-10 {
--p: 10;
}
.acs-p-11 {
--p: 11;
}
.acs-p-12 {
--p: 12;
}
.acs-p-13 {
--p: 13;
}
.acs-p-14 {
--p: 14;
}
.acs-p-15 {
--p: 15;
}
.acs-p-16 {
--p: 16;
}
.acs-p-17 {
--p: 17;
}
.acs-p-18 {
--p: 18;
}
.acs-p-19 {
--p: 19;
}
.acs-p-20 {
--p: 20;
}
.acs-p-21 {
--p: 21;
}
.acs-p-22 {
--p: 22;
}
.acs-p-23 {
--p: 23;
}
.acs-p-24 {
--p: 24;
}
.acs-p-25 {
--p: 25;
}
.acs-p-26 {
--p: 26;
}
.acs-p-27 {
--p: 27;
}
.acs-p-28 {
--p: 28;
}
.acs-p-29 {
--p: 29;
}
.acs-p-30 {
--p: 30;
}
.acs-p-31 {
--p: 31;
}
.acs-p-32 {
--p: 32;
}
.acs-p-33 {
--p: 33;
}
.acs-p-34 {
--p: 34;
}
.acs-p-35 {
--p: 35;
}
.acs-p-36 {
--p: 36;
}
.acs-p-37 {
--p: 37;
}
.acs-p-38 {
--p: 38;
}
.acs-p-39 {
--p: 39;
}
.acs-p-40 {
--p: 40;
}
.acs-p-41 {
--p: 41;
}
.acs-p-42 {
--p: 42;
}
.acs-p-43 {
--p: 43;
}
.acs-p-44 {
--p: 44;
}
.acs-p-45 {
--p: 45;
}
.acs-p-46 {
--p: 46;
}
.acs-p-47 {
--p: 47;
}
.acs-p-48 {
--p: 48;
}
.acs-p-49 {
--p: 49;
}
.acs-p-50 {
--p: 50;
}
.acs-p-51 {
--p: 51;
}
.acs-p-52 {
--p: 52;
}
.acs-p-53 {
--p: 53;
}
.acs-p-54 {
--p: 54;
}
.acs-p-55 {
--p: 55;
}
.acs-p-56 {
--p: 56;
}
.acs-p-57 {
--p: 57;
}
.acs-p-58 {
--p: 58;
}
.acs-p-59 {
--p: 59;
}
.acs-p-60 {
--p: 60;
}
.acs-p-61 {
--p: 61;
}
.acs-p-62 {
--p: 62;
}
.acs-p-63 {
--p: 63;
}
.acs-p-64 {
--p: 64;
}
.acs-p-65 {
--p: 65;
}
.acs-p-66 {
--p: 66;
}
.acs-p-67 {
--p: 67;
}
.acs-p-68 {
--p: 68;
}
.acs-p-69 {
--p: 69;
}
.acs-p-70 {
--p: 70;
}
.acs-p-71 {
--p: 71;
}
.acs-p-72 {
--p: 72;
}
.acs-p-73 {
--p: 73;
}
.acs-p-74 {
--p: 74;
}
.acs-p-75 {
--p: 75;
}
.acs-p-76 {
--p: 76;
}
.acs-p-77 {
--p: 77;
}
.acs-p-78 {
--p: 78;
}
.acs-p-79 {
--p: 79;
}
.acs-p-80 {
--p: 80;
}
.acs-p-81 {
--p: 81;
}
.acs-p-82 {
--p: 82;
}
.acs-p-83 {
--p: 83;
}
.acs-p-84 {
--p: 84;
}
.acs-p-85 {
--p: 85;
}
.acs-p-86 {
--p: 86;
}
.acs-p-87 {
--p: 87;
}
.acs-p-88 {
--p: 88;
}
.acs-p-89 {
--p: 89;
}
.acs-p-90 {
--p: 90;
}
.acs-p-91 {
--p: 91;
}
.acs-p-92 {
--p: 92;
}
.acs-p-93 {
--p: 93;
}
.acs-p-94 {
--p: 94;
}
.acs-p-95 {
--p: 95;
}
.acs-p-96 {
--p: 96;
}
.acs-p-97 {
--p: 97;
}
.acs-p-98 {
--p: 98;
}
.acs-p-99 {
--p: 99;
}
.acs-p-100 {
--p: 100;
}
.acs-mono {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: -0.01em;
}
.acs-lbl {
display: block;
margin: 0 0 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* ---- status badges ----------------------------------------------------
Pill-shaped with a leading glyph slot, so a state is legible without
relying on colour alone. */
.acs-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px 3px 8px;
border-radius: 999px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 11.5px;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
color: var(--bs-secondary-color);
}
.acs-badge i {
font-size: 13px;
}
.acs-badge.is-safe {
background: var(--acs-safe-soft);
border-color: rgba(26, 190, 23, 0.28);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.acs-badge.is-watch {
background: var(--acs-watch-soft);
border-color: rgba(234, 179, 0, 0.34);
color: rgb(142.2, 108.7769230769, 0);
}
.acs-badge.is-risk {
background: var(--acs-risk-soft);
border-color: rgba(232, 38, 70, 0.26);
color: var(--acs-risk);
}
.acs-badge.is-info {
background: var(--tint-info);
border-color: rgba(15, 101, 205, 0.24);
color: var(--bs-info);
}
/* a quiet tag for a browser, platform or scope */
/* ============================================================
2. IDENTITY HERO + POSTURE SHIELD
The hero is about a person, not a service, so it leads with
the account and states its posture as a single figure.
============================================================ */
.acs-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 0;
margin-bottom: 26px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow: hidden;
}
@media (max-width: 1199.98px) {
.acs-hero {
grid-template-columns: minmax(0, 1fr);
}
}
.acs-hero-id {
padding: 26px 28px;
}
@media (max-width: 575.98px) {
.acs-hero-id {
padding: 20px;
}
}
.acs-hero-top {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
/* the portrait, ringed by its own account state */
.acs-portrait {
position: relative;
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 20px;
background: var(--tint-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 21px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--bs-body-bg), 0 0 0 5px var(--acs-safe);
}
.acs-portrait.is-unverified {
box-shadow: 0 0 0 3px var(--bs-body-bg), 0 0 0 5px var(--acs-watch);
}
.acs-portrait.is-unverified .acs-portrait-tick {
background: var(--acs-watch);
}
/* the verification tick, set into the corner of the portrait */
.acs-portrait-tick {
position: absolute;
right: -6px;
bottom: -6px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--acs-safe);
border: 2px solid var(--bs-body-bg);
font-size: 12px;
color: #fff;
}
.acs-hero-name {
margin: 0;
font-size: 25px;
font-weight: 700;
line-height: 1.2;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.acs-hero-name {
font-size: 21px;
}
}
.acs-hero-role {
margin: 3px 0 0;
font-size: 13.5px;
color: var(--bs-secondary-color);
}
/* the hero's facts, stacked as label-over-value pairs on a single rule */
.acs-hero-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
gap: 18px 24px;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--bs-border-color);
}
.acs-hero-fact span {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.acs-hero-fact strong {
display: flex;
align-items: center;
gap: 7px;
margin-top: 4px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acs-hero-fact small {
display: block;
margin-top: 2px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.acs-hero-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 22px;
}
/* ---- the posture shield ------------------------------------------------
One figure for the state of the account, drawn on a shield rather than a
dial, because a security score is a judgement rather than a measurement. */
.acs-posture {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 26px 20px;
background: var(--bs-primary);
color: rgba(255, 255, 255, 0.72);
text-align: center;
}
@media (max-width: 1199.98px) {
.acs-posture {
border-top: 1px solid var(--bs-border-color);
}
}
.acs-shield {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 104px;
height: 116px;
margin-bottom: 12px;
/* the shield silhouette, filled from the bottom to the score */
}
.acs-shield::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--acs-safe) 0%, var(--acs-safe) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.12) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.12) 100%);
clip-path: polygon(50% 0%, 100% 16%, 100% 58%, 50% 100%, 0% 58%, 0% 16%);
}
.acs-shield {
/* the inner face the figure sits on */
}
.acs-shield::after {
content: "";
position: absolute;
inset: 6px;
background: var(--bs-primary);
clip-path: polygon(50% 0%, 100% 16%, 100% 58%, 50% 100%, 0% 58%, 0% 16%);
}
.acs-shield.is-watch::before {
background: linear-gradient(to top, var(--acs-watch) 0%, var(--acs-watch) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.12) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.12) 100%);
}
.acs-shield.is-risk::before {
background: linear-gradient(to top, var(--acs-risk) 0%, var(--acs-risk) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.12) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.12) 100%);
}
.acs-shield-n {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
color: #fff;
}
.acs-shield-n b {
font-size: 32px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.acs-shield-n span {
margin-top: 3px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.acs-posture-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #fff;
}
.acs-posture-txt {
margin: 2px 0 0;
max-width: 30ch;
font-size: 12px;
line-height: 1.6;
}
/* ============================================================
3. STICKY SECTION NAVIGATION
Grouped under headings, with a state glyph rather than a word.
============================================================ */
.acs-nav {
position: sticky;
top: calc(60px + 16px);
max-height: calc(100vh - 60px - 32px);
padding: 8px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow-y: auto;
/* Bootstrap's `.nav` wraps; in a capped-height column that wraps
overflow into a second column instead of scrolling. */
flex-wrap: nowrap;
overflow-x: hidden;
}
.acs-nav > * {
flex-shrink: 0;
}
@media (max-width: 991.98px) {
.acs-nav {
position: static;
max-height: none;
}
}
.acs-nav-hdr {
display: block;
padding: 14px 12px 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.acs-nav-hdr:first-child {
padding-top: 6px;
}
.acs-nav-link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
font-size: 13.5px;
font-weight: 500;
text-align: left;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.acs-nav-link > i:first-child {
flex-shrink: 0;
font-size: 17px;
color: var(--bs-secondary-color);
transition: var(--transition);
}
.acs-nav-link .acs-nav-txt {
flex: 1 1 auto;
min-width: 0;
}
.acs-nav-link {
/* the state glyph: attention needed, or nothing at all */
}
.acs-nav-link .acs-nav-flag {
flex-shrink: 0;
font-size: 15px;
color: var(--acs-watch);
}
.acs-nav-link:hover {
background: var(--bs-secondary-bg);
}
.acs-nav-link {
/* the active row is inked solid, which suits a console about identity */
}
.acs-nav-link.active {
background: var(--bs-primary);
color: #fff;
font-weight: 600;
}
.acs-nav-link.active > i:first-child {
color: rgba(255, 255, 255, 0.8);
}
.acs-nav-link.active .acs-nav-flag {
color: #FFD666;
}
.acs-nav-foot {
margin-top: 8px;
padding: 14px 12px 6px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
4. SECURITY CARDS + FACT ROWS
============================================================ */
.acs-card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.acs-card:hover {
border-color: var(--acs-border-strong);
box-shadow: var(--shadow-lift);
}
.acs-card {
/* a card whose subject needs attention carries a tinted top edge */
}
.acs-card.is-watch {
box-shadow: inset 0 3px 0 var(--acs-watch);
}
.acs-card.is-risk {
box-shadow: inset 0 3px 0 var(--acs-risk);
}
.acs-card-head {
display: flex;
align-items: center;
gap: 12px;
padding: 17px 18px 14px;
}
@media (max-width: 575.98px) {
.acs-card-head {
flex-direction: column;
align-items: start;
gap: 12px;
}
}
.acs-card-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 12px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 19px;
}
.acs-card-ic.is-safe {
background: var(--acs-safe-soft);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.acs-card-ic.is-watch {
background: var(--acs-watch-soft);
color: rgb(142.2, 108.7769230769, 0);
}
.acs-card-ic.is-risk {
background: var(--acs-risk-soft);
color: var(--acs-risk);
}
.acs-card-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acs-card-title + p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.acs-card-body {
flex: 1 1 auto;
padding: 0 18px 14px;
}
.acs-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 12px 18px;
border-top: 1px solid var(--bs-border-color);
}
/* ---- fact row ---------------------------------------------------------
Label above, value below, with the control to the right. The label sits
above rather than beside because account values — email addresses,
employee ids, device fingerprints — are long. */
.acs-fact {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 0;
}
.acs-fact + .acs-fact {
border-top: 1px solid var(--bs-border-color);
}
.acs-fact .acs-fact-txt {
flex: 1 1 auto;
min-width: 0;
}
.acs-fact span {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.acs-fact strong {
display: block;
margin-top: 2px;
font-size: 13.5px;
font-weight: 500;
color: var(--bs-emphasis-color);
word-break: break-word;
}
.acs-fact .acs-fact-ctl {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
}
@media (max-width: 575.98px) {
.acs-fact {
flex-wrap: wrap;
}
.acs-fact .acs-fact-ctl {
width: 100%;
}
}
.acs-input,
.acs-select {
min-width: 150px;
padding: 6px 11px;
border-radius: var(--radius-sm);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
font-size: 13px;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.acs-input:focus,
.acs-select:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
outline: 0;
}
@media (max-width: 575.98px) {
.acs-input,
.acs-select {
min-width: 0;
width: 100%;
}
}
/* ============================================================
5. AUTHENTICATION FACTOR CARDS
A factor is either armed or it is not, and the card says which
before anything else.
============================================================ */
.acs-factor {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.acs-factor:hover {
box-shadow: var(--shadow-lift);
}
.acs-factor {
/* an armed factor is tinted and its glyph made solid */
}
.acs-factor.is-on {
border-color: rgba(26, 190, 23, 0.3);
background: linear-gradient(165deg, var(--acs-safe-soft), var(--bs-body-bg) 62%);
}
.acs-factor.is-on .acs-factor-ic {
background: var(--acs-safe);
border-color: transparent;
color: #fff;
}
.acs-factor {
/* an available but unused factor is drawn as an outline */
}
.acs-factor.is-off {
border-style: dashed;
}
.acs-factor-top {
display: flex;
align-items: flex-start;
gap: 12px;
}
.acs-factor-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 14px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-primary);
font-size: 21px;
transition: var(--transition);
}
.acs-factor-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acs-factor-txt {
margin: 0;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* how strong the factor is, as a run of pips rather than a number */
.acs-strength {
display: inline-flex;
align-items: center;
gap: 4px;
}
.acs-strength i {
display: block;
width: 16px;
height: 4px;
border-radius: 2px;
background: var(--bs-tertiary-bg);
}
.acs-strength.is-3 i:nth-child(-n+3), .acs-strength.is-4 i {
background: var(--acs-safe);
}
.acs-strength.is-2 i:nth-child(-n+2) {
background: var(--acs-watch);
}
.acs-strength.is-1 i:nth-child(1) {
background: var(--acs-risk);
}
.acs-strength em {
margin-left: 4px;
font-style: normal;
font-size: 11px;
font-weight: 600;
color: var(--bs-secondary-color);
}
.acs-factor-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
6. PASSWORD STRENGTH + RECOVERY CODES
============================================================ */
/* the age of a password, as a bar that fills towards expiry */
.acs-age .acs-age-track {
position: relative;
height: 8px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.acs-age .acs-age-track span {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--p, 0) * 1%);
border-radius: inherit;
background: var(--acs-safe);
}
.acs-age.is-watch .acs-age-track span {
background: var(--acs-watch);
}
.acs-age.is-risk .acs-age-track span {
background: var(--acs-risk);
}
.acs-age .acs-age-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 7px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.acs-age .acs-age-meta b {
font-family: var(--font-mono);
color: var(--bs-emphasis-color);
}
/* a rule the password must satisfy */
.acs-rule {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 0;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.acs-rule i {
flex-shrink: 0;
font-size: 16px;
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.acs-rule.is-off {
color: var(--bs-secondary-color);
}
.acs-rule.is-off i {
color: var(--acs-border-strong);
}
/* ---- recovery codes ---------------------------------------------------
Printed as a block, with the spent ones struck through, because that is
how they are actually used: on paper, one at a time. */
.acs-codes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
gap: 1px;
border-radius: var(--radius-sm);
background: var(--bs-border-color);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.acs-code {
padding: 10px 12px;
background: var(--bs-body-bg);
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.04em;
text-align: center;
color: var(--bs-emphasis-color);
}
.acs-code.is-used {
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
text-decoration: line-through;
}
/* ============================================================
7. SESSION AND DEVICE CARDS
============================================================ */
.acs-device {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 16px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.acs-device + .acs-device {
margin-top: 10px;
}
.acs-device:hover {
border-color: var(--acs-border-strong);
box-shadow: var(--shadow);
}
.acs-device {
/* the machine this page is being read on */
}
.acs-device.is-current {
border-color: rgba(26, 190, 23, 0.34);
background: linear-gradient(100deg, var(--acs-safe-soft), var(--bs-body-bg) 42%);
}
.acs-device {
/* a device that has not been seen in a long time */
}
.acs-device.is-stale {
background: var(--bs-secondary-bg);
}
.acs-device.is-stale .acs-device-ic,
.acs-device.is-stale .acs-device-name {
opacity: 0.72;
}
@media (max-width: 767.98px) {
.acs-device {
grid-template-columns: 52px minmax(0, 1fr);
row-gap: 12px;
}
.acs-device .acs-device-act {
grid-column: 2/-1;
justify-content: flex-start;
}
}
.acs-device-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 15px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 25px;
color: var(--bs-emphasis-color);
}
.acs-device-name {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* the device's particulars, run together on one line with separators */
.acs-device-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 10px;
margin: 6px 0 0;
font-size: 12px;
color: var(--bs-secondary-color);
}
.acs-device-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.acs-device-meta span i {
font-size: 14px;
}
.acs-device-meta {
/* a hairline between particulars, rather than a bullet */
}
.acs-device-meta span + span::before {
content: "";
width: 1px;
height: 11px;
margin-right: 5px;
background: var(--acs-border-strong);
}
.acs-device-act {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
}
/* ============================================================
8. LOGIN HISTORY ROWS
Outcome first, because that is the only thing being scanned for.
============================================================ */
.acs-login {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.acs-login + .acs-login {
margin-top: 8px;
}
.acs-login.is-fail {
background: var(--acs-risk-soft);
border-color: rgba(232, 38, 70, 0.2);
}
.acs-login.is-flagged {
background: var(--acs-watch-soft);
border-color: rgba(234, 179, 0, 0.28);
}
@media (max-width: 767.98px) {
.acs-login {
grid-template-columns: 30px minmax(0, 1fr);
row-gap: 8px;
}
.acs-login .acs-login-side {
grid-column: 2/-1;
justify-content: flex-start;
}
}
.acs-login-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--acs-safe-soft);
font-size: 16px;
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.is-fail .acs-login-mark {
background: rgba(255, 255, 255, 0.7);
color: var(--acs-risk);
}
.is-flagged .acs-login-mark {
background: rgba(255, 255, 255, 0.7);
color: rgb(142.2, 108.7769230769, 0);
}
.acs-login-body {
min-width: 0;
}
.acs-login-body strong {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acs-login-body span {
display: block;
margin-top: 2px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.acs-login-side {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
}
.acs-login-side .acs-login-ip {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* ============================================================
9. PERMISSION GRID
Not a table: a list of capabilities, each with its verdict.
============================================================ */
.acs-perm {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(4, 62px);
align-items: center;
gap: 8px;
padding: 10px 0;
}
.acs-perm + .acs-perm {
border-top: 1px solid var(--bs-border-color);
}
.acs-perm {
/* the header row of the grid */
}
.acs-perm.is-head {
padding-bottom: 8px;
border-bottom: 2px solid var(--bs-border-color);
}
.acs-perm.is-head span {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
text-align: center;
color: var(--bs-secondary-color);
}
.acs-perm.is-head span:first-child {
text-align: left;
}
.acs-perm .acs-perm-name {
min-width: 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
@media (max-width: 767.98px) {
.acs-perm {
grid-template-columns: minmax(0, 1fr) repeat(4, 1fr);
gap: 4px;
}
}
/* a verdict pip: granted, denied, or granted with a condition */
.acs-pip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin: 0 auto;
border-radius: 8px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 15px;
color: var(--acs-border-strong);
}
.acs-pip.is-yes {
background: var(--acs-safe-soft);
border-color: rgba(26, 190, 23, 0.28);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.acs-pip.is-cond {
background: var(--acs-watch-soft);
border-color: rgba(234, 179, 0, 0.32);
color: rgb(142.2, 108.7769230769, 0);
}
/* ============================================================
10. RECOMMENDATION CARDS
Ranked, because the order is the advice.
============================================================ */
.acs-rec {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 16px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--acs-border-strong);
transition: var(--transition);
}
@media (max-width: 575.98px) {
.acs-rec {
flex-direction: column;
display: flex;
align-items: start;
}
}
.acs-rec + .acs-rec {
margin-top: 10px;
}
.acs-rec:hover {
box-shadow: var(--shadow-lift);
}
.acs-rec.is-high {
border-left-color: var(--acs-risk);
}
.acs-rec.is-high .acs-rec-n {
background: var(--acs-risk-soft);
color: var(--acs-risk);
}
.acs-rec.is-medium {
border-left-color: var(--acs-watch);
}
.acs-rec.is-medium .acs-rec-n {
background: var(--acs-watch-soft);
color: rgb(142.2, 108.7769230769, 0);
}
.acs-rec.is-done {
border-left-color: var(--acs-safe);
background: var(--bs-secondary-bg);
}
.acs-rec.is-done .acs-rec-n {
background: var(--acs-safe-soft);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.acs-rec.is-done .acs-rec-title {
text-decoration: line-through;
color: var(--bs-secondary-color);
}
@media (max-width: 767.98px) {
.acs-rec {
grid-template-columns: 44px minmax(0, 1fr);
row-gap: 12px;
}
.acs-rec .acs-rec-act {
grid-column: 2/-1;
justify-content: flex-start;
}
}
/* the rank, which is the whole point of the list */
.acs-rec-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: var(--bs-secondary-bg);
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--bs-secondary-color);
}
.acs-rec-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acs-rec-txt {
margin: 3px 0 0;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
.acs-rec-act {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
}
/* ============================================================
11. PREMIUM ACCORDION + ALTERNATING TIMELINE
============================================================ */
.acs-acc {
border-radius: var(--radius);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.acs-acc .accordion-item {
border: 0;
background: var(--bs-body-bg);
}
.acs-acc .accordion-item + .accordion-item {
border-top: 1px solid var(--bs-border-color);
}
.acs-acc .accordion-button {
gap: 11px;
padding: 16px 18px;
background: var(--bs-body-bg);
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
box-shadow: none;
}
.acs-acc .accordion-button::after {
margin-left: 0;
}
.acs-acc .accordion-button:not(.collapsed) {
background: var(--bs-primary);
color: #fff;
}
.acs-acc .accordion-button:not(.collapsed)::after {
filter: invert(1) grayscale(1) brightness(2);
}
.acs-acc .accordion-button:focus {
box-shadow: 0 0 0 3px var(--tint-primary);
}
.acs-acc .accordion-button i {
font-size: 17px;
}
.acs-acc .acs-acc-spacer {
margin-left: auto;
}
.acs-acc .accordion-body {
padding: 6px 18px 18px;
}
/* ---- alternating timeline ---------------------------------------------
Events fall either side of a central rule on a wide screen, which keeps
a long security history readable without a date gutter. */
.acs-time {
position: relative;
padding: 22px 0;
/* the central rule */
}
.acs-time::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: var(--bs-tertiary-bg);
}
@media (max-width: 991.98px) {
.acs-time::before {
left: 15px;
margin-left: 0;
}
}
.acs-time-item {
position: relative;
width: 50%;
padding-right: 42px;
margin-bottom: 22px;
}
.acs-time-item:last-child {
margin-bottom: 0;
}
.acs-time-item {
/* the marker sits on the central rule */
}
.acs-time-item::after {
content: "";
position: absolute;
right: -7px;
top: 20px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 3px solid var(--bs-tertiary-bg);
}
.acs-time-item.is-done::after {
background: var(--acs-safe);
border-color: var(--acs-safe);
}
.acs-time-item.is-current::after {
border-color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
.acs-time-item {
/* every second event crosses to the other side */
}
.acs-time-item:nth-child(even) {
margin-left: 50%;
padding-right: 0;
padding-left: 42px;
text-align: left;
}
.acs-time-item:nth-child(even)::after {
right: auto;
left: -7px;
}
.acs-time-item:nth-child(odd) {
text-align: right;
}
@media (max-width: 991.98px) {
.acs-time-item {
width: 100%;
padding-right: 0;
padding-left: 44px;
text-align: left;
}
.acs-time-item::after {
right: auto;
left: 8px;
}
.acs-time-item:nth-child(even) {
margin-left: 0;
padding-left: 44px;
}
.acs-time-item:nth-child(even)::after {
left: 8px;
}
.acs-time-item:nth-child(odd) {
text-align: left;
}
}
.acs-time-card {
display: inline-block;
max-width: 100%;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
text-align: left;
}
.acs-time-card h6 {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 8px;
}
.acs-time-card h6 i {
font-size: 16px;
color: var(--bs-secondary-color);
}
.acs-time-card time {
display: block;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--bs-secondary-color);
}
.acs-time-card p {
margin: 7px 0 0;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* ============================================================
12. OFFCANVAS, PANEL HELPERS, EMPTY STATE
============================================================ */
/* The theme sets `.offcanvas.offcanvas-end { width: auto !important }`; the
workspace has to match on three classes to beat it. */
.offcanvas.offcanvas-end.acs-canvas {
width: 88% !important;
max-width: 1160px !important;
}
.acs-canvas-head {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 24px;
background: var(--bs-primary);
color: #fff;
}
.acs-canvas-head .acs-card-ic {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.acs-canvas-head .offcanvas-title {
color: #fff;
}
.acs-canvas-head p {
color: rgba(255, 255, 255, 0.58);
}
.acs-canvas-head .btn-close {
filter: invert(1) grayscale(1);
opacity: 0.7;
}
.acs-canvas-body {
padding: 22px 24px 30px;
}
.acs-sect + .acs-sect {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--bs-border-color);
}
.acs-sect-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 13px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.acs-sect-title i {
font-size: 16px;
color: var(--bs-primary);
}
/* a check result */
.acs-check {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.acs-check + .acs-check {
border-top: 1px solid var(--bs-border-color);
}
.acs-check > i {
flex-shrink: 0;
margin-top: 1px;
font-size: 16px;
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.acs-check.is-watch > i {
color: rgb(142.2, 108.7769230769, 0);
}
.acs-check.is-risk > i {
color: var(--acs-risk);
}
.acs-check span {
display: block;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* audit entries */
.acs-audit {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 14px;
padding: 11px 0;
}
.acs-audit + .acs-audit {
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.acs-audit {
grid-template-columns: minmax(0, 1fr);
gap: 3px;
}
}
.acs-audit-when {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.acs-audit-when strong {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acs-audit-what {
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.acs-audit-what span {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ---- empty state ------------------------------------------------------- */
.acs-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
padding: 38px 24px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px dashed var(--acs-border-strong);
}
.acs-empty i {
font-size: 30px;
color: var(--bs-secondary-color);
opacity: 0.8;
}
.acs-empty h6 {
margin: 8px 0 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acs-empty p {
margin: 0;
max-width: 48ch;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
.acs-empty .btn {
margin-top: 10px;
}
/*===== academic settings =====*/
/*-----------------
Academic Settings — institution configuration components
A shared vocabulary for the Academic Settings & Institution Configuration
Center: the year and its terms, grades and sections, subjects and credits,
grading scales, examinations, promotion rules and the calendar that ties
them together. Class prefix `acd-`.
The visual language is an academic register rather than a service console.
The pieces come from how a school actually describes itself: a year drawn
as a spine divided into terms, grades and their sections as a bracketed
tree, a grading scale as a ladder of bands with their cut-offs, subjects
as chips carrying credits, the calendar as twelve tinted months, and
recommendations filed as tabbed cards.
It borrows nothing from `_financial-settings.scss`, `_email-settings.scss`,
`_sms-settings.scss`, `_account-security.scss` or `_settings.scss`, and
overrides nothing in them.
Contents
1. Tokens + shared pieces
2. Workspace hero + year spine
3. Sticky section navigation
4. Configuration cards + setting rows
5. Term ribbon
6. Grade and section tree
7. Subject chips + credit meter
8. Grading ladder
9. Policy statements + rule rows
10. Calendar strip
11. Premium accordion + milestone track
12. Recommendation folders
13. Offcanvas, panel helpers and empty state
-----------------*/
/* ============================================================
1. TOKENS + SHARED PIECES
============================================================ */
:root {
--acd-border: var(--bs-border-color, #E9EDF4);
--acd-border-strong: #EDF1F6;
--acd-pass: #1ABE17;
--acd-pass-soft: #E8F9E8;
--acd-watch: #EAB300;
--acd-watch-soft: #FEF8EA;
--acd-fail: #E82646;
--acd-fail-soft: #FDE9ED;
--acd-alt: #4A00E5;
}
@media (prefers-reduced-motion: reduce) {
[class*=acd-],
[class*=acd-]::before,
[class*=acd-]::after {
animation: none !important;
transition: none !important;
}
}
/* Carries a numeric value into CSS without an inline style. */
.acd-p-0 {
--p: 0;
}
.acd-p-1 {
--p: 1;
}
.acd-p-2 {
--p: 2;
}
.acd-p-3 {
--p: 3;
}
.acd-p-4 {
--p: 4;
}
.acd-p-5 {
--p: 5;
}
.acd-p-6 {
--p: 6;
}
.acd-p-7 {
--p: 7;
}
.acd-p-8 {
--p: 8;
}
.acd-p-9 {
--p: 9;
}
.acd-p-10 {
--p: 10;
}
.acd-p-11 {
--p: 11;
}
.acd-p-12 {
--p: 12;
}
.acd-p-13 {
--p: 13;
}
.acd-p-14 {
--p: 14;
}
.acd-p-15 {
--p: 15;
}
.acd-p-16 {
--p: 16;
}
.acd-p-17 {
--p: 17;
}
.acd-p-18 {
--p: 18;
}
.acd-p-19 {
--p: 19;
}
.acd-p-20 {
--p: 20;
}
.acd-p-21 {
--p: 21;
}
.acd-p-22 {
--p: 22;
}
.acd-p-23 {
--p: 23;
}
.acd-p-24 {
--p: 24;
}
.acd-p-25 {
--p: 25;
}
.acd-p-26 {
--p: 26;
}
.acd-p-27 {
--p: 27;
}
.acd-p-28 {
--p: 28;
}
.acd-p-29 {
--p: 29;
}
.acd-p-30 {
--p: 30;
}
.acd-p-31 {
--p: 31;
}
.acd-p-32 {
--p: 32;
}
.acd-p-33 {
--p: 33;
}
.acd-p-34 {
--p: 34;
}
.acd-p-35 {
--p: 35;
}
.acd-p-36 {
--p: 36;
}
.acd-p-37 {
--p: 37;
}
.acd-p-38 {
--p: 38;
}
.acd-p-39 {
--p: 39;
}
.acd-p-40 {
--p: 40;
}
.acd-p-41 {
--p: 41;
}
.acd-p-42 {
--p: 42;
}
.acd-p-43 {
--p: 43;
}
.acd-p-44 {
--p: 44;
}
.acd-p-45 {
--p: 45;
}
.acd-p-46 {
--p: 46;
}
.acd-p-47 {
--p: 47;
}
.acd-p-48 {
--p: 48;
}
.acd-p-49 {
--p: 49;
}
.acd-p-50 {
--p: 50;
}
.acd-p-51 {
--p: 51;
}
.acd-p-52 {
--p: 52;
}
.acd-p-53 {
--p: 53;
}
.acd-p-54 {
--p: 54;
}
.acd-p-55 {
--p: 55;
}
.acd-p-56 {
--p: 56;
}
.acd-p-57 {
--p: 57;
}
.acd-p-58 {
--p: 58;
}
.acd-p-59 {
--p: 59;
}
.acd-p-60 {
--p: 60;
}
.acd-p-61 {
--p: 61;
}
.acd-p-62 {
--p: 62;
}
.acd-p-63 {
--p: 63;
}
.acd-p-64 {
--p: 64;
}
.acd-p-65 {
--p: 65;
}
.acd-p-66 {
--p: 66;
}
.acd-p-67 {
--p: 67;
}
.acd-p-68 {
--p: 68;
}
.acd-p-69 {
--p: 69;
}
.acd-p-70 {
--p: 70;
}
.acd-p-71 {
--p: 71;
}
.acd-p-72 {
--p: 72;
}
.acd-p-73 {
--p: 73;
}
.acd-p-74 {
--p: 74;
}
.acd-p-75 {
--p: 75;
}
.acd-p-76 {
--p: 76;
}
.acd-p-77 {
--p: 77;
}
.acd-p-78 {
--p: 78;
}
.acd-p-79 {
--p: 79;
}
.acd-p-80 {
--p: 80;
}
.acd-p-81 {
--p: 81;
}
.acd-p-82 {
--p: 82;
}
.acd-p-83 {
--p: 83;
}
.acd-p-84 {
--p: 84;
}
.acd-p-85 {
--p: 85;
}
.acd-p-86 {
--p: 86;
}
.acd-p-87 {
--p: 87;
}
.acd-p-88 {
--p: 88;
}
.acd-p-89 {
--p: 89;
}
.acd-p-90 {
--p: 90;
}
.acd-p-91 {
--p: 91;
}
.acd-p-92 {
--p: 92;
}
.acd-p-93 {
--p: 93;
}
.acd-p-94 {
--p: 94;
}
.acd-p-95 {
--p: 95;
}
.acd-p-96 {
--p: 96;
}
.acd-p-97 {
--p: 97;
}
.acd-p-98 {
--p: 98;
}
.acd-p-99 {
--p: 99;
}
.acd-p-100 {
--p: 100;
}
/* A second channel, for components that need two values at once — a term
band needs both where it starts and how wide it is. */
.acd-q-0 {
--q: 0;
}
.acd-q-1 {
--q: 1;
}
.acd-q-2 {
--q: 2;
}
.acd-q-3 {
--q: 3;
}
.acd-q-4 {
--q: 4;
}
.acd-q-5 {
--q: 5;
}
.acd-q-6 {
--q: 6;
}
.acd-q-7 {
--q: 7;
}
.acd-q-8 {
--q: 8;
}
.acd-q-9 {
--q: 9;
}
.acd-q-10 {
--q: 10;
}
.acd-q-11 {
--q: 11;
}
.acd-q-12 {
--q: 12;
}
.acd-q-13 {
--q: 13;
}
.acd-q-14 {
--q: 14;
}
.acd-q-15 {
--q: 15;
}
.acd-q-16 {
--q: 16;
}
.acd-q-17 {
--q: 17;
}
.acd-q-18 {
--q: 18;
}
.acd-q-19 {
--q: 19;
}
.acd-q-20 {
--q: 20;
}
.acd-q-21 {
--q: 21;
}
.acd-q-22 {
--q: 22;
}
.acd-q-23 {
--q: 23;
}
.acd-q-24 {
--q: 24;
}
.acd-q-25 {
--q: 25;
}
.acd-q-26 {
--q: 26;
}
.acd-q-27 {
--q: 27;
}
.acd-q-28 {
--q: 28;
}
.acd-q-29 {
--q: 29;
}
.acd-q-30 {
--q: 30;
}
.acd-q-31 {
--q: 31;
}
.acd-q-32 {
--q: 32;
}
.acd-q-33 {
--q: 33;
}
.acd-q-34 {
--q: 34;
}
.acd-q-35 {
--q: 35;
}
.acd-q-36 {
--q: 36;
}
.acd-q-37 {
--q: 37;
}
.acd-q-38 {
--q: 38;
}
.acd-q-39 {
--q: 39;
}
.acd-q-40 {
--q: 40;
}
.acd-q-41 {
--q: 41;
}
.acd-q-42 {
--q: 42;
}
.acd-q-43 {
--q: 43;
}
.acd-q-44 {
--q: 44;
}
.acd-q-45 {
--q: 45;
}
.acd-q-46 {
--q: 46;
}
.acd-q-47 {
--q: 47;
}
.acd-q-48 {
--q: 48;
}
.acd-q-49 {
--q: 49;
}
.acd-q-50 {
--q: 50;
}
.acd-q-51 {
--q: 51;
}
.acd-q-52 {
--q: 52;
}
.acd-q-53 {
--q: 53;
}
.acd-q-54 {
--q: 54;
}
.acd-q-55 {
--q: 55;
}
.acd-q-56 {
--q: 56;
}
.acd-q-57 {
--q: 57;
}
.acd-q-58 {
--q: 58;
}
.acd-q-59 {
--q: 59;
}
.acd-q-60 {
--q: 60;
}
.acd-q-61 {
--q: 61;
}
.acd-q-62 {
--q: 62;
}
.acd-q-63 {
--q: 63;
}
.acd-q-64 {
--q: 64;
}
.acd-q-65 {
--q: 65;
}
.acd-q-66 {
--q: 66;
}
.acd-q-67 {
--q: 67;
}
.acd-q-68 {
--q: 68;
}
.acd-q-69 {
--q: 69;
}
.acd-q-70 {
--q: 70;
}
.acd-q-71 {
--q: 71;
}
.acd-q-72 {
--q: 72;
}
.acd-q-73 {
--q: 73;
}
.acd-q-74 {
--q: 74;
}
.acd-q-75 {
--q: 75;
}
.acd-q-76 {
--q: 76;
}
.acd-q-77 {
--q: 77;
}
.acd-q-78 {
--q: 78;
}
.acd-q-79 {
--q: 79;
}
.acd-q-80 {
--q: 80;
}
.acd-q-81 {
--q: 81;
}
.acd-q-82 {
--q: 82;
}
.acd-q-83 {
--q: 83;
}
.acd-q-84 {
--q: 84;
}
.acd-q-85 {
--q: 85;
}
.acd-q-86 {
--q: 86;
}
.acd-q-87 {
--q: 87;
}
.acd-q-88 {
--q: 88;
}
.acd-q-89 {
--q: 89;
}
.acd-q-90 {
--q: 90;
}
.acd-q-91 {
--q: 91;
}
.acd-q-92 {
--q: 92;
}
.acd-q-93 {
--q: 93;
}
.acd-q-94 {
--q: 94;
}
.acd-q-95 {
--q: 95;
}
.acd-q-96 {
--q: 96;
}
.acd-q-97 {
--q: 97;
}
.acd-q-98 {
--q: 98;
}
.acd-q-99 {
--q: 99;
}
.acd-q-100 {
--q: 100;
}
.acd-mono {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: -0.01em;
}
.acd-lbl {
display: block;
margin: 0 0 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* ---- status badges ----------------------------------------------------
Squared with a soft radius, the way a syllabus marks a status. */
.acd-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 7px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 11.5px;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
color: var(--bs-secondary-color);
}
.acd-badge i {
font-size: 13px;
}
.acd-badge.is-live {
background: var(--acd-pass-soft);
border-color: rgba(26, 190, 23, 0.28);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.acd-badge.is-draft {
background: var(--acd-watch-soft);
border-color: rgba(234, 179, 0, 0.34);
color: rgb(142.2, 108.7769230769, 0);
}
.acd-badge.is-closed {
background: var(--acd-fail-soft);
border-color: rgba(232, 38, 70, 0.26);
color: var(--acd-fail);
}
.acd-badge.is-accent {
background: var(--tint-primary);
border-color: rgba(2, 168, 181, 0.3);
color: rgb(1.5540983607, 130.5442622951, 140.6459016393);
}
/* ============================================================
2. WORKSPACE HERO + YEAR SPINE
The hero leads with the year, because in a school every other
setting is scoped to one.
============================================================ */
.acd-hero {
position: relative;
padding: 26px 28px;
margin-bottom: 26px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow: hidden;
/* a broad tint sweeping in from the leading edge */
}
.acd-hero::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 46%;
background: linear-gradient(100deg, var(--tint-primary), rgba(255, 255, 255, 0));
pointer-events: none;
}
.acd-hero > * {
position: relative;
}
@media (max-width: 575.98px) {
.acd-hero {
padding: 20px;
}
}
.acd-hero-top {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
/* the year mark: the academic year set as a plate, since it is the scope
for everything else on the page */
.acd-yearmark {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 84px;
padding: 10px 14px;
border-radius: 16px;
background: var(--bs-primary);
color: #fff;
box-shadow: 0 8px 20px rgba(2, 168, 181, 0.28);
}
.acd-yearmark b {
font-size: 19px;
font-weight: 700;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.acd-yearmark span {
margin-top: 2px;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.acd-hero-title {
margin: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.acd-hero-title {
font-size: 21px;
}
}
.acd-hero-sub {
margin: 4px 0 0;
max-width: 66ch;
font-size: 13.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
/* the hero's facts, stacked in a plain row of columns divided by rules */
.acd-hero-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
gap: 16px 0;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--bs-border-color);
}
.acd-hero-fact {
padding: 0 20px;
}
.acd-hero-fact:first-child {
padding-left: 0;
}
.acd-hero-fact + .acd-hero-fact {
border-left: 1px solid var(--bs-border-color);
}
.acd-hero-fact span {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.acd-hero-fact strong {
display: flex;
align-items: center;
gap: 7px;
margin-top: 4px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
@media (max-width: 767.98px) {
.acd-hero-fact {
padding: 0 14px;
}
.acd-hero-fact:first-child {
padding-left: 14px;
}
.acd-hero-fact + .acd-hero-fact {
border-left: 0;
}
}
.acd-hero-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
}
/* ---- the year spine ---------------------------------------------------
The whole academic year on one bar, divided into its terms, with a mark
for today. It is the one drawing that makes the shape of the year legible
at a glance. */
.acd-spine {
position: relative;
margin-top: 22px;
padding: 18px 20px 16px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
}
.acd-spine-bar {
position: relative;
display: flex;
height: 34px;
border-radius: 8px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
/* one term, sized by the share of the year it occupies */
.acd-spine-term {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 calc(var(--p, 20) * 1%);
min-width: 0;
padding: 0 8px;
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
background: var(--bs-primary);
}
.acd-spine-term + .acd-spine-term {
border-left: 2px solid var(--bs-body-bg);
}
.acd-spine-term {
/* a break between terms reads as a gap, not as teaching time */
}
.acd-spine-term.is-break {
background: var(--acd-border-strong);
color: var(--bs-emphasis-color);
}
.acd-spine-term.is-exam {
background: rgb(203.4, 155.5923076923, 0);
}
.acd-spine-term.is-future {
background: var(--tint-primary);
color: rgb(1.331147541, 111.8163934426, 120.468852459);
}
/* today, marked across the bar */
.acd-spine-now {
position: absolute;
top: -6px;
bottom: -6px;
left: calc(var(--p, 0) * 1%);
width: 2px;
background: var(--bs-emphasis-color);
z-index: 2;
}
.acd-spine-now::before {
content: "";
position: absolute;
left: 50%;
top: -4px;
width: 9px;
height: 9px;
margin-left: -4.5px;
border-radius: 50%;
background: var(--bs-emphasis-color);
}
.acd-spine-scale {
display: flex;
margin-top: 8px;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.acd-spine-scale span {
flex: 1 1 0;
text-align: center;
}
.acd-spine-scale span:first-child {
text-align: left;
}
.acd-spine-scale span:last-child {
text-align: right;
}
/* ============================================================
3. STICKY SECTION NAVIGATION
Long — nineteen sections — so it is grouped and scrolls.
============================================================ */
.acd-nav {
position: sticky;
top: calc(60px + 16px);
max-height: calc(100vh - 60px - 32px);
padding: 8px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow-y: auto;
/* Bootstrap's `.nav` wraps; in a capped-height column that wraps
overflow into a second column instead of scrolling. */
flex-wrap: nowrap;
overflow-x: hidden;
}
.acd-nav > * {
flex-shrink: 0;
}
@media (max-width: 991.98px) {
.acd-nav {
position: static;
max-height: none;
}
}
.acd-nav-hdr {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 12px 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.acd-nav-hdr:first-child {
padding-top: 6px;
}
.acd-nav-hdr {
/* a rule filling the space after the group name */
}
.acd-nav-hdr::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--bs-border-color);
}
.acd-nav-link {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 12px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
font-size: 13.5px;
font-weight: 500;
text-align: left;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.acd-nav-link .acd-nav-txt {
flex: 1 1 auto;
min-width: 0;
}
.acd-nav-link {
/* a count of what the section holds, which is what an administrator
actually wants to know before opening it */
}
.acd-nav-link .acd-nav-n {
flex-shrink: 0;
min-width: 22px;
padding: 1px 6px;
border-radius: 999px;
background: var(--bs-secondary-bg);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-align: center;
color: var(--bs-secondary-color);
transition: var(--transition);
}
.acd-nav-link:hover {
background: var(--bs-secondary-bg);
}
.acd-nav-link {
/* the active section is banded across, with a rule down the leading edge */
}
.acd-nav-link.active {
background: var(--tint-primary);
color: rgb(1.2196721311, 102.4524590164, 110.3803278689);
font-weight: 600;
}
.acd-nav-link.active::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--bs-primary);
}
.acd-nav-link.active .acd-nav-n {
background: var(--bs-primary);
color: #fff;
}
.acd-nav-foot {
margin-top: 8px;
padding: 14px 12px 6px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
4. CONFIGURATION CARDS + SETTING ROWS
============================================================ */
.acd-card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.acd-card:hover {
border-color: var(--acd-border-strong);
box-shadow: var(--shadow-lift);
}
/* height: 100% is for equal-height cards sitting side by side in a
multi-column row (see the col-xl-6 pairs further down this page). A
full-width col-12 card is always alone on its line, so there's nothing
to match heights with - but it was still inheriting whatever tall
cross-size the row's OTHER wrapped lines produced, stretching its
.acd-card-body (flex: 1 1 auto) into a block of empty space under a
four-row card. Full-width cards should just size to their content. */
.col-12 > .acd-card {
height: auto;
}
/* the header carries a coloured rule beneath rather than a filled band */
.acd-card-head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px 13px;
border-bottom: 1px solid var(--bs-border-color);
flex-wrap: wrap;
}
.acd-card-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 12px;
background: var(--tint-primary);
color: rgb(1.5540983607, 130.5442622951, 140.6459016393);
font-size: 19px;
}
.acd-card-ic.is-pass {
background: var(--acd-pass-soft);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.acd-card-ic.is-watch {
background: var(--acd-watch-soft);
color: rgb(142.2, 108.7769230769, 0);
}
.acd-card-ic.is-fail {
background: var(--acd-fail-soft);
color: var(--acd-fail);
}
.acd-card-ic.is-alt {
background: rgba(74, 0, 229, 0.08);
color: var(--acd-alt);
}
.acd-card-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acd-card-title + p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.acd-card-body {
flex: 1 1 auto;
padding: 6px 18px 14px;
}
.acd-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 11px 18px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
/* ---- setting row ------------------------------------------------------
Name and value on one line with a dot leader between, the way a syllabus
or a prospectus sets out a specification. */
.acd-row {
display: flex;
align-items: baseline;
gap: 10px;
padding: 10px 0;
}
.acd-row + .acd-row {
border-top: 1px solid var(--bs-border-color);
}
.acd-row .acd-row-key {
flex-shrink: 0;
max-width: 58%;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.acd-row .acd-row-key small {
display: block;
font-size: 11.5px;
line-height: 1.5;
color: var(--bs-secondary-color);
}
.acd-row .acd-row-fill {
flex: 1 1 auto;
min-width: 12px;
height: 1px;
border-bottom: 1px dotted var(--acd-border-strong);
transform: translateY(-3px);
}
.acd-row .acd-row-val {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
text-align: right;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.acd-row {
flex-wrap: wrap;
}
.acd-row .acd-row-key {
max-width: 100%;
}
.acd-row .acd-row-fill {
display: none;
}
.acd-row .acd-row-val {
width: 100%;
justify-content: flex-start;
}
}
.acd-input,
.acd-select {
min-width: 140px;
padding: 6px 11px;
border-radius: var(--radius-sm);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
font-size: 13px;
font-weight: 400;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.acd-input:focus,
.acd-select:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
outline: 0;
}
@media (max-width: 575.98px) {
.acd-input,
.acd-select {
min-width: 0;
width: 100%;
}
}
/* ============================================================
5. TERM RIBBON
Each term as a card with its dates, weeks and what it contains.
============================================================ */
.acd-term {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.acd-term:hover {
box-shadow: var(--shadow-lift);
}
.acd-term {
/* the term in progress is banded down its leading edge */
}
.acd-term.is-current {
border-color: rgba(2, 168, 181, 0.34);
box-shadow: inset 3px 0 0 var(--bs-primary);
}
.acd-term.is-done {
background: var(--bs-secondary-bg);
}
.acd-term.is-done .acd-term-name {
opacity: 0.78;
}
.acd-term-top {
display: flex;
align-items: center;
gap: 10px;
}
/* the term's ordinal, set large and hollow */
.acd-term-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 13px;
border: 2px solid var(--bs-primary);
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: rgb(1.4426229508, 121.1803278689, 130.5573770492);
}
.acd-term-name {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acd-term-name + p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* how far through the term the school is */
.acd-term-bar {
height: 6px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.acd-term-bar span {
display: block;
height: 100%;
width: calc(var(--p, 0) * 1%);
border-radius: inherit;
background: var(--bs-primary);
}
.acd-term-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
6. GRADE AND SECTION TREE
A grade and the sections beneath it, drawn with the bracket a
timetable or a register would use.
============================================================ */
.acd-tree {
padding: 16px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.acd-tree + .acd-tree {
margin-top: 10px;
}
.acd-tree-head {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.acd-tree-grade {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
padding: 7px 12px;
border-radius: 10px;
background: var(--bs-emphasis-color);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
}
.acd-tree-name {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acd-tree-name + p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* the sections, hanging off a bracket */
.acd-tree-body {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 14px 0 0;
padding: 14px 0 0 22px;
border-top: 1px solid var(--bs-border-color);
/* the trunk */
}
.acd-tree-body::before {
content: "";
position: absolute;
left: 8px;
top: 14px;
bottom: 14px;
width: 1px;
background: var(--acd-border-strong);
}
.acd-section {
position: relative;
display: flex;
align-items: center;
gap: 9px;
padding: 8px 12px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 12.5px;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.acd-section:hover {
border-color: var(--bs-primary);
background: var(--tint-primary);
}
.acd-section b {
font-weight: 700;
}
.acd-section span {
color: var(--bs-secondary-color);
}
.acd-section {
/* a section that is over its intended size */
}
.acd-section.is-full {
border-color: rgba(234, 179, 0, 0.4);
background: var(--acd-watch-soft);
}
.acd-section.is-full span {
color: rgb(132, 100.9743589744, 0);
}
/* ============================================================
7. SUBJECT CHIPS + CREDIT METER
============================================================ */
.acd-subjects {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.acd-subject {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 12px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
font-size: 12.5px;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.acd-subject:hover {
border-color: var(--acd-border-strong);
box-shadow: var(--shadow);
}
.acd-subject {
/* the credit value, carried in its own well */
}
.acd-subject .acd-subject-cr {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
border-radius: 6px;
background: var(--bs-secondary-bg);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--bs-secondary-color);
}
.acd-subject.is-core {
border-color: rgba(2, 168, 181, 0.34);
}
.acd-subject.is-core .acd-subject-cr {
background: var(--bs-primary);
color: #fff;
}
.acd-subject.is-elective {
border-style: dashed;
}
.acd-subject.is-elective .acd-subject-cr {
background: rgba(74, 0, 229, 0.1);
color: var(--acd-alt);
}
.acd-subject.is-practical .acd-subject-cr {
background: var(--acd-pass-soft);
color: rgb(18.5295774648, 135.4084507042, 16.3915492958);
}
/* ============================================================
8. GRADING LADDER
Bands from the top down, each showing the range it covers and
the point it starts, because a grading scale is read as a scale.
============================================================ */
.acd-ladder {
border-radius: var(--radius);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.acd-band {
display: grid;
grid-template-columns: 62px 92px minmax(0, 1fr) 74px;
align-items: center;
gap: 14px;
padding: 11px 16px;
background: var(--bs-body-bg);
transition: var(--transition);
}
.acd-band + .acd-band {
border-top: 1px solid var(--bs-border-color);
}
.acd-band:hover {
background: var(--bs-secondary-bg);
}
.acd-band {
/* below the pass mark the whole band reads as a failure */
}
.acd-band.is-fail {
background: var(--acd-fail-soft);
}
.acd-band.is-fail .acd-band-letter {
background: var(--acd-fail);
color: #fff;
}
@media (max-width: 767.98px) {
.acd-band {
grid-template-columns: 54px minmax(0, 1fr) 64px;
}
.acd-band .acd-band-track {
grid-column: 1/-1;
}
}
.acd-band-letter {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 0;
border-radius: 8px;
background: var(--bs-emphasis-color);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
}
.acd-band-range {
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* the band's extent, drawn against the full 0-100 scale */
.acd-band-track {
position: relative;
height: 8px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.acd-band-track span {
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--p, 0) * 1%);
width: calc(var(--q, 0) * 1%);
border-radius: 999px;
background: var(--bs-primary);
}
.is-fail .acd-band-track span {
background: var(--acd-fail);
}
.acd-band-point {
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 600;
text-align: right;
color: var(--bs-secondary-color);
}
/* ============================================================
9. POLICY STATEMENTS + RULE ROWS
============================================================ */
/* a policy set out as a statement, with the reasoning beneath it */
.acd-policy {
display: flex;
gap: 14px;
padding: 16px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--bs-primary);
}
.acd-policy + .acd-policy {
margin-top: 10px;
}
.acd-policy.is-watch {
border-left-color: var(--acd-watch);
}
.acd-policy.is-fail {
border-left-color: var(--acd-fail);
}
.acd-policy.is-off {
border-left-color: var(--acd-border-strong);
background: var(--bs-secondary-bg);
}
.acd-policy.is-off .acd-policy-txt {
opacity: 0.72;
}
.acd-policy-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 12px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-emphasis-color);
font-size: 18px;
}
.acd-policy-body {
flex: 1 1 auto;
min-width: 0;
}
/* the rule itself, set larger than the prose that explains it */
.acd-policy-rule {
margin: 0;
font-size: 14.5px;
font-weight: 600;
line-height: 1.5;
color: var(--bs-emphasis-color);
}
.acd-policy-rule b {
color: rgb(1.2196721311, 102.4524590164, 110.3803278689);
}
.acd-policy-txt {
margin: 6px 0 0;
font-size: 12.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
.acd-policy-act {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* ============================================================
10. CALENDAR STRIP
Twelve months across, tinted by what happens in each.
============================================================ */
.acd-months {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1px;
border-radius: var(--radius-sm);
background: var(--bs-border-color);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
@media (max-width: 991.98px) {
.acd-months {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.acd-months {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.acd-month {
padding: 12px 6px;
background: var(--bs-body-bg);
text-align: center;
}
.acd-month b {
display: block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.acd-month span {
display: block;
margin-top: 3px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.acd-month.is-term {
background: var(--tint-primary);
}
.acd-month.is-exam {
background: var(--acd-watch-soft);
}
.acd-month.is-break {
background: var(--bs-secondary-bg);
}
.acd-month.is-break b,
.acd-month.is-break span {
color: var(--bs-secondary-color);
}
.acd-month.is-now {
box-shadow: inset 0 0 0 2px var(--bs-emphasis-color);
}
/* a dated entry in the calendar */
.acd-event {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 11px 0;
}
.acd-event + .acd-event {
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.acd-event {
grid-template-columns: 58px minmax(0, 1fr);
row-gap: 8px;
}
}
/* the date, set as a torn-off leaf */
.acd-event-date {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 0;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
}
.acd-event-date b {
font-size: 16px;
font-weight: 700;
line-height: 1.1;
font-variant-numeric: tabular-nums;
color: var(--bs-emphasis-color);
}
.acd-event-date span {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.acd-event-body {
min-width: 0;
}
.acd-event-body strong {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acd-event-body span {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ============================================================
11. PREMIUM ACCORDION + MILESTONE TRACK
============================================================ */
.acd-acc {
border-radius: var(--radius);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.acd-acc .accordion-item {
border: 0;
background: var(--bs-body-bg);
}
.acd-acc .accordion-item + .accordion-item {
border-top: 1px solid var(--bs-border-color);
}
.acd-acc .accordion-button {
gap: 11px;
padding: 15px 18px;
background: var(--bs-body-bg);
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
box-shadow: none;
}
.acd-acc .accordion-button::after {
margin-left: 0;
}
.acd-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: rgb(1.2196721311, 102.4524590164, 110.3803278689);
}
.acd-acc .accordion-button:focus {
box-shadow: 0 0 0 3px var(--tint-primary);
}
.acd-acc .accordion-button i {
font-size: 17px;
}
.acd-acc .acd-acc-spacer {
margin-left: auto;
}
.acd-acc .accordion-body {
padding: 4px 18px 18px;
}
/* ---- milestone track --------------------------------------------------
A descending list where each stage carries a large hollow numeral in its
own gutter, and a continuous band runs behind them. */
.acd-track {
position: relative;
padding: 4px 0;
}
.acd-track::before {
content: "";
position: absolute;
left: 27px;
top: 12px;
bottom: 12px;
width: 2px;
background: var(--bs-tertiary-bg);
}
@media (max-width: 575.98px) {
.acd-track::before {
left: 19px;
}
}
.acd-track-step {
position: relative;
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 18px;
padding-bottom: 16px;
}
.acd-track-step:last-child {
padding-bottom: 0;
}
@media (max-width: 575.98px) {
.acd-track-step {
grid-template-columns: 40px minmax(0, 1fr);
gap: 12px;
}
}
/* the numeral, hollow so the band reads through the column */
.acd-track-n {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 18px;
background: var(--bs-body-bg);
border: 2px solid var(--bs-tertiary-bg);
font-size: 19px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--bs-secondary-color);
}
.is-done .acd-track-n {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.is-current .acd-track-n {
border-color: var(--bs-primary);
color: rgb(1.2196721311, 102.4524590164, 110.3803278689);
box-shadow: 0 0 0 4px var(--tint-primary);
}
@media (max-width: 575.98px) {
.acd-track-n {
width: 40px;
height: 40px;
border-radius: 13px;
font-size: 15px;
}
}
.acd-track-card {
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.acd-track-card h6 {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acd-track-card time {
display: block;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--bs-secondary-color);
}
.acd-track-card p {
margin: 7px 0 0;
font-size: 12.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
/* ============================================================
12. RECOMMENDATION FOLDERS
Filed rather than listed: each card carries a tab naming what
kind of note it is.
============================================================ */
.acd-folder {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
margin-top: 13px;
padding: 18px;
border-radius: 0 var(--radius) var(--radius) var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.acd-folder:hover {
box-shadow: var(--shadow-lift);
}
/* the tab, sitting above the card's top-left corner */
.acd-folder-tab {
position: absolute;
left: -1px;
top: -13px;
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 14px;
border-radius: 8px 8px 0 0;
background: var(--bs-primary);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
}
.acd-folder-tab i {
font-size: 13px;
}
.acd-folder-tab.is-watch {
background: rgb(183, 139.9871794872, 0);
}
.acd-folder-tab.is-alt {
background: var(--acd-alt);
}
.acd-folder-tab.is-pass {
background: rgb(23.5098591549, 171.8028169014, 20.7971830986);
}
.acd-folder-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acd-folder-txt {
margin: 0;
font-size: 12.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
.acd-folder-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
13. OFFCANVAS, PANEL HELPERS, EMPTY STATE
============================================================ */
/* The theme sets `.offcanvas.offcanvas-end { width: auto !important }`; the
workspace has to match on three classes to beat it. */
.offcanvas.offcanvas-end.acd-canvas {
width: 88% !important;
max-width: 1180px !important;
}
.acd-canvas-head {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 24px;
background: var(--tint-primary);
border-bottom: 1px solid var(--bs-border-color);
}
.acd-canvas-body {
padding: 22px 24px 30px;
}
.acd-sect + .acd-sect {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--bs-border-color);
}
.acd-sect-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 13px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.acd-sect-title i {
font-size: 16px;
color: rgb(1.5540983607, 130.5442622951, 140.6459016393);
}
/* a validation result */
.acd-check {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.acd-check + .acd-check {
border-top: 1px solid var(--bs-border-color);
}
.acd-check > i {
flex-shrink: 0;
margin-top: 1px;
font-size: 16px;
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.acd-check.is-watch > i {
color: rgb(142.2, 108.7769230769, 0);
}
.acd-check.is-fail > i {
color: var(--acd-fail);
}
.acd-check span {
display: block;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* a preview of what a setting produces, framed as a printed page */
.acd-preview {
padding: 18px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
.acd-preview .acd-preview-head {
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 2px solid var(--bs-emphasis-color);
text-align: center;
}
.acd-preview .acd-preview-head b {
display: block;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--bs-emphasis-color);
}
.acd-preview .acd-preview-head span {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--bs-secondary-color);
}
.acd-preview .acd-preview-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 0;
font-size: 12px;
color: var(--bs-emphasis-color);
}
.acd-preview .acd-preview-line + .acd-preview-line {
border-top: 1px dotted var(--bs-border-color);
}
.acd-preview .acd-preview-line b {
font-family: var(--font-mono);
font-weight: 600;
}
/* audit entries */
.acd-audit {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 14px;
padding: 11px 0;
}
.acd-audit + .acd-audit {
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.acd-audit {
grid-template-columns: minmax(0, 1fr);
gap: 3px;
}
}
.acd-audit-when {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.acd-audit-when strong {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acd-audit-what {
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.acd-audit-what span {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ---- empty state ------------------------------------------------------- */
.acd-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
padding: 38px 24px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px dashed var(--acd-border-strong);
}
.acd-empty i {
font-size: 30px;
color: var(--bs-secondary-color);
opacity: 0.8;
}
.acd-empty h6 {
margin: 8px 0 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.acd-empty p {
margin: 0;
max-width: 48ch;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
.acd-empty .btn {
margin-top: 10px;
}
/*===== language settings =====*/
/*-----------------
Language & Localization — multilingual configuration components
A shared vocabulary for the Language & Localization Configuration Center:
languages and their locales, translation coverage, regional formats,
right-to-left support and typography. Class prefix `lng-`.
The visual language is a translation console. The pieces are the ones only
a localization tool needs: a language plate that shows the native name in
its own script, coverage split three ways between translated, needing
review and missing, string keys paired with their translations, format
samples rendered as they will actually appear, and a mirror that shows a
layout flipping for right-to-left.
It borrows nothing from `_financial-settings.scss`, `_email-settings.scss`,
`_sms-settings.scss`, `_account-security.scss`, `_academic-settings.scss`
or `_settings.scss`, and overrides nothing in them.
Contents
1. Tokens + shared pieces
2. Workspace hero + locale summary
3. Sticky section navigation
4. Configuration cards + setting rows
5. Language plates
6. Coverage bars
7. String keys and translation pairs
8. Format samples
9. RTL mirror + font specimens
10. Premium accordion + milestone filmstrip
11. Insight cards
12. Offcanvas, panel helpers and empty state
-----------------*/
/* ============================================================
1. TOKENS + SHARED PIECES
============================================================ */
:root {
--lng-border: var(--bs-border-color, #E9EDF4);
--lng-border-strong: #EDF1F6;
/* The theme's `$pink-transparent` is a salmon rather than a tint, so a
proper one is mixed at the density the other `-transparent` colours use. */
--lng-done: #1ABE17;
--lng-done-soft: var(--tint-success);
--lng-review: #EAB300;
--lng-review-soft: var(--tint-warning);
--lng-missing: #E82646;
--lng-missing-soft: var(--tint-danger);
}
@media (prefers-reduced-motion: reduce) {
[class*=lng-],
[class*=lng-]::before,
[class*=lng-]::after {
animation: none !important;
transition: none !important;
}
}
/* Carries a numeric value into CSS without an inline style. Coverage needs
three at once — translated, needing review, missing — so there are three
channels rather than one. */
.lng-p-0 {
--p: 0;
}
.lng-q-0 {
--q: 0;
}
.lng-r-0 {
--r: 0;
}
.lng-p-1 {
--p: 1;
}
.lng-q-1 {
--q: 1;
}
.lng-r-1 {
--r: 1;
}
.lng-p-2 {
--p: 2;
}
.lng-q-2 {
--q: 2;
}
.lng-r-2 {
--r: 2;
}
.lng-p-3 {
--p: 3;
}
.lng-q-3 {
--q: 3;
}
.lng-r-3 {
--r: 3;
}
.lng-p-4 {
--p: 4;
}
.lng-q-4 {
--q: 4;
}
.lng-r-4 {
--r: 4;
}
.lng-p-5 {
--p: 5;
}
.lng-q-5 {
--q: 5;
}
.lng-r-5 {
--r: 5;
}
.lng-p-6 {
--p: 6;
}
.lng-q-6 {
--q: 6;
}
.lng-r-6 {
--r: 6;
}
.lng-p-7 {
--p: 7;
}
.lng-q-7 {
--q: 7;
}
.lng-r-7 {
--r: 7;
}
.lng-p-8 {
--p: 8;
}
.lng-q-8 {
--q: 8;
}
.lng-r-8 {
--r: 8;
}
.lng-p-9 {
--p: 9;
}
.lng-q-9 {
--q: 9;
}
.lng-r-9 {
--r: 9;
}
.lng-p-10 {
--p: 10;
}
.lng-q-10 {
--q: 10;
}
.lng-r-10 {
--r: 10;
}
.lng-p-11 {
--p: 11;
}
.lng-q-11 {
--q: 11;
}
.lng-r-11 {
--r: 11;
}
.lng-p-12 {
--p: 12;
}
.lng-q-12 {
--q: 12;
}
.lng-r-12 {
--r: 12;
}
.lng-p-13 {
--p: 13;
}
.lng-q-13 {
--q: 13;
}
.lng-r-13 {
--r: 13;
}
.lng-p-14 {
--p: 14;
}
.lng-q-14 {
--q: 14;
}
.lng-r-14 {
--r: 14;
}
.lng-p-15 {
--p: 15;
}
.lng-q-15 {
--q: 15;
}
.lng-r-15 {
--r: 15;
}
.lng-p-16 {
--p: 16;
}
.lng-q-16 {
--q: 16;
}
.lng-r-16 {
--r: 16;
}
.lng-p-17 {
--p: 17;
}
.lng-q-17 {
--q: 17;
}
.lng-r-17 {
--r: 17;
}
.lng-p-18 {
--p: 18;
}
.lng-q-18 {
--q: 18;
}
.lng-r-18 {
--r: 18;
}
.lng-p-19 {
--p: 19;
}
.lng-q-19 {
--q: 19;
}
.lng-r-19 {
--r: 19;
}
.lng-p-20 {
--p: 20;
}
.lng-q-20 {
--q: 20;
}
.lng-r-20 {
--r: 20;
}
.lng-p-21 {
--p: 21;
}
.lng-q-21 {
--q: 21;
}
.lng-r-21 {
--r: 21;
}
.lng-p-22 {
--p: 22;
}
.lng-q-22 {
--q: 22;
}
.lng-r-22 {
--r: 22;
}
.lng-p-23 {
--p: 23;
}
.lng-q-23 {
--q: 23;
}
.lng-r-23 {
--r: 23;
}
.lng-p-24 {
--p: 24;
}
.lng-q-24 {
--q: 24;
}
.lng-r-24 {
--r: 24;
}
.lng-p-25 {
--p: 25;
}
.lng-q-25 {
--q: 25;
}
.lng-r-25 {
--r: 25;
}
.lng-p-26 {
--p: 26;
}
.lng-q-26 {
--q: 26;
}
.lng-r-26 {
--r: 26;
}
.lng-p-27 {
--p: 27;
}
.lng-q-27 {
--q: 27;
}
.lng-r-27 {
--r: 27;
}
.lng-p-28 {
--p: 28;
}
.lng-q-28 {
--q: 28;
}
.lng-r-28 {
--r: 28;
}
.lng-p-29 {
--p: 29;
}
.lng-q-29 {
--q: 29;
}
.lng-r-29 {
--r: 29;
}
.lng-p-30 {
--p: 30;
}
.lng-q-30 {
--q: 30;
}
.lng-r-30 {
--r: 30;
}
.lng-p-31 {
--p: 31;
}
.lng-q-31 {
--q: 31;
}
.lng-r-31 {
--r: 31;
}
.lng-p-32 {
--p: 32;
}
.lng-q-32 {
--q: 32;
}
.lng-r-32 {
--r: 32;
}
.lng-p-33 {
--p: 33;
}
.lng-q-33 {
--q: 33;
}
.lng-r-33 {
--r: 33;
}
.lng-p-34 {
--p: 34;
}
.lng-q-34 {
--q: 34;
}
.lng-r-34 {
--r: 34;
}
.lng-p-35 {
--p: 35;
}
.lng-q-35 {
--q: 35;
}
.lng-r-35 {
--r: 35;
}
.lng-p-36 {
--p: 36;
}
.lng-q-36 {
--q: 36;
}
.lng-r-36 {
--r: 36;
}
.lng-p-37 {
--p: 37;
}
.lng-q-37 {
--q: 37;
}
.lng-r-37 {
--r: 37;
}
.lng-p-38 {
--p: 38;
}
.lng-q-38 {
--q: 38;
}
.lng-r-38 {
--r: 38;
}
.lng-p-39 {
--p: 39;
}
.lng-q-39 {
--q: 39;
}
.lng-r-39 {
--r: 39;
}
.lng-p-40 {
--p: 40;
}
.lng-q-40 {
--q: 40;
}
.lng-r-40 {
--r: 40;
}
.lng-p-41 {
--p: 41;
}
.lng-q-41 {
--q: 41;
}
.lng-r-41 {
--r: 41;
}
.lng-p-42 {
--p: 42;
}
.lng-q-42 {
--q: 42;
}
.lng-r-42 {
--r: 42;
}
.lng-p-43 {
--p: 43;
}
.lng-q-43 {
--q: 43;
}
.lng-r-43 {
--r: 43;
}
.lng-p-44 {
--p: 44;
}
.lng-q-44 {
--q: 44;
}
.lng-r-44 {
--r: 44;
}
.lng-p-45 {
--p: 45;
}
.lng-q-45 {
--q: 45;
}
.lng-r-45 {
--r: 45;
}
.lng-p-46 {
--p: 46;
}
.lng-q-46 {
--q: 46;
}
.lng-r-46 {
--r: 46;
}
.lng-p-47 {
--p: 47;
}
.lng-q-47 {
--q: 47;
}
.lng-r-47 {
--r: 47;
}
.lng-p-48 {
--p: 48;
}
.lng-q-48 {
--q: 48;
}
.lng-r-48 {
--r: 48;
}
.lng-p-49 {
--p: 49;
}
.lng-q-49 {
--q: 49;
}
.lng-r-49 {
--r: 49;
}
.lng-p-50 {
--p: 50;
}
.lng-q-50 {
--q: 50;
}
.lng-r-50 {
--r: 50;
}
.lng-p-51 {
--p: 51;
}
.lng-q-51 {
--q: 51;
}
.lng-r-51 {
--r: 51;
}
.lng-p-52 {
--p: 52;
}
.lng-q-52 {
--q: 52;
}
.lng-r-52 {
--r: 52;
}
.lng-p-53 {
--p: 53;
}
.lng-q-53 {
--q: 53;
}
.lng-r-53 {
--r: 53;
}
.lng-p-54 {
--p: 54;
}
.lng-q-54 {
--q: 54;
}
.lng-r-54 {
--r: 54;
}
.lng-p-55 {
--p: 55;
}
.lng-q-55 {
--q: 55;
}
.lng-r-55 {
--r: 55;
}
.lng-p-56 {
--p: 56;
}
.lng-q-56 {
--q: 56;
}
.lng-r-56 {
--r: 56;
}
.lng-p-57 {
--p: 57;
}
.lng-q-57 {
--q: 57;
}
.lng-r-57 {
--r: 57;
}
.lng-p-58 {
--p: 58;
}
.lng-q-58 {
--q: 58;
}
.lng-r-58 {
--r: 58;
}
.lng-p-59 {
--p: 59;
}
.lng-q-59 {
--q: 59;
}
.lng-r-59 {
--r: 59;
}
.lng-p-60 {
--p: 60;
}
.lng-q-60 {
--q: 60;
}
.lng-r-60 {
--r: 60;
}
.lng-p-61 {
--p: 61;
}
.lng-q-61 {
--q: 61;
}
.lng-r-61 {
--r: 61;
}
.lng-p-62 {
--p: 62;
}
.lng-q-62 {
--q: 62;
}
.lng-r-62 {
--r: 62;
}
.lng-p-63 {
--p: 63;
}
.lng-q-63 {
--q: 63;
}
.lng-r-63 {
--r: 63;
}
.lng-p-64 {
--p: 64;
}
.lng-q-64 {
--q: 64;
}
.lng-r-64 {
--r: 64;
}
.lng-p-65 {
--p: 65;
}
.lng-q-65 {
--q: 65;
}
.lng-r-65 {
--r: 65;
}
.lng-p-66 {
--p: 66;
}
.lng-q-66 {
--q: 66;
}
.lng-r-66 {
--r: 66;
}
.lng-p-67 {
--p: 67;
}
.lng-q-67 {
--q: 67;
}
.lng-r-67 {
--r: 67;
}
.lng-p-68 {
--p: 68;
}
.lng-q-68 {
--q: 68;
}
.lng-r-68 {
--r: 68;
}
.lng-p-69 {
--p: 69;
}
.lng-q-69 {
--q: 69;
}
.lng-r-69 {
--r: 69;
}
.lng-p-70 {
--p: 70;
}
.lng-q-70 {
--q: 70;
}
.lng-r-70 {
--r: 70;
}
.lng-p-71 {
--p: 71;
}
.lng-q-71 {
--q: 71;
}
.lng-r-71 {
--r: 71;
}
.lng-p-72 {
--p: 72;
}
.lng-q-72 {
--q: 72;
}
.lng-r-72 {
--r: 72;
}
.lng-p-73 {
--p: 73;
}
.lng-q-73 {
--q: 73;
}
.lng-r-73 {
--r: 73;
}
.lng-p-74 {
--p: 74;
}
.lng-q-74 {
--q: 74;
}
.lng-r-74 {
--r: 74;
}
.lng-p-75 {
--p: 75;
}
.lng-q-75 {
--q: 75;
}
.lng-r-75 {
--r: 75;
}
.lng-p-76 {
--p: 76;
}
.lng-q-76 {
--q: 76;
}
.lng-r-76 {
--r: 76;
}
.lng-p-77 {
--p: 77;
}
.lng-q-77 {
--q: 77;
}
.lng-r-77 {
--r: 77;
}
.lng-p-78 {
--p: 78;
}
.lng-q-78 {
--q: 78;
}
.lng-r-78 {
--r: 78;
}
.lng-p-79 {
--p: 79;
}
.lng-q-79 {
--q: 79;
}
.lng-r-79 {
--r: 79;
}
.lng-p-80 {
--p: 80;
}
.lng-q-80 {
--q: 80;
}
.lng-r-80 {
--r: 80;
}
.lng-p-81 {
--p: 81;
}
.lng-q-81 {
--q: 81;
}
.lng-r-81 {
--r: 81;
}
.lng-p-82 {
--p: 82;
}
.lng-q-82 {
--q: 82;
}
.lng-r-82 {
--r: 82;
}
.lng-p-83 {
--p: 83;
}
.lng-q-83 {
--q: 83;
}
.lng-r-83 {
--r: 83;
}
.lng-p-84 {
--p: 84;
}
.lng-q-84 {
--q: 84;
}
.lng-r-84 {
--r: 84;
}
.lng-p-85 {
--p: 85;
}
.lng-q-85 {
--q: 85;
}
.lng-r-85 {
--r: 85;
}
.lng-p-86 {
--p: 86;
}
.lng-q-86 {
--q: 86;
}
.lng-r-86 {
--r: 86;
}
.lng-p-87 {
--p: 87;
}
.lng-q-87 {
--q: 87;
}
.lng-r-87 {
--r: 87;
}
.lng-p-88 {
--p: 88;
}
.lng-q-88 {
--q: 88;
}
.lng-r-88 {
--r: 88;
}
.lng-p-89 {
--p: 89;
}
.lng-q-89 {
--q: 89;
}
.lng-r-89 {
--r: 89;
}
.lng-p-90 {
--p: 90;
}
.lng-q-90 {
--q: 90;
}
.lng-r-90 {
--r: 90;
}
.lng-p-91 {
--p: 91;
}
.lng-q-91 {
--q: 91;
}
.lng-r-91 {
--r: 91;
}
.lng-p-92 {
--p: 92;
}
.lng-q-92 {
--q: 92;
}
.lng-r-92 {
--r: 92;
}
.lng-p-93 {
--p: 93;
}
.lng-q-93 {
--q: 93;
}
.lng-r-93 {
--r: 93;
}
.lng-p-94 {
--p: 94;
}
.lng-q-94 {
--q: 94;
}
.lng-r-94 {
--r: 94;
}
.lng-p-95 {
--p: 95;
}
.lng-q-95 {
--q: 95;
}
.lng-r-95 {
--r: 95;
}
.lng-p-96 {
--p: 96;
}
.lng-q-96 {
--q: 96;
}
.lng-r-96 {
--r: 96;
}
.lng-p-97 {
--p: 97;
}
.lng-q-97 {
--q: 97;
}
.lng-r-97 {
--r: 97;
}
.lng-p-98 {
--p: 98;
}
.lng-q-98 {
--q: 98;
}
.lng-r-98 {
--r: 98;
}
.lng-p-99 {
--p: 99;
}
.lng-q-99 {
--q: 99;
}
.lng-r-99 {
--r: 99;
}
.lng-p-100 {
--p: 100;
}
.lng-q-100 {
--q: 100;
}
.lng-r-100 {
--r: 100;
}
.lng-mono {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: -0.01em;
}
.lng-lbl {
display: block;
margin: 0 0 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* ---- the locale code ---------------------------------------------------
`en-IN`, `ta-IN`, `ar-AE` — set in the machine face and given its own
well, because in a localization tool the code is the identifier and the
name is only a label. */
.lng-code {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 6px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--bs-emphasis-color);
}
.lng-code.is-accent {
background: var(--tint-primary);
border-color: rgba(232, 62, 140, 0.26);
color: rgb(208.0111111111, 24.7888888889, 108.8555555556);
}
/* ---- status badges ----------------------------------------------------- */
.lng-badge {
/* geometry, typography and surface come from the shared badge component */
}
.lng-badge i {
font-size: 13px;
}
.lng-badge.is-done {
background: var(--lng-done-soft);
border-color: rgba(26, 190, 23, 0.28);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.lng-badge.is-review {
background: var(--lng-review-soft);
border-color: rgba(234, 179, 0, 0.34);
color: rgb(142.2, 108.7769230769, 0);
}
.lng-badge.is-missing {
background: var(--lng-missing-soft);
border-color: rgba(232, 38, 70, 0.26);
color: var(--lng-missing);
}
.lng-badge.is-accent {
background: var(--tint-primary);
border-color: rgba(232, 62, 140, 0.26);
color: rgb(208.0111111111, 24.7888888889, 108.8555555556);
}
/* ============================================================
2. WORKSPACE HERO + LOCALE SUMMARY
============================================================ */
.lng-hero {
position: relative;
padding: 26px 28px;
margin-bottom: 26px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow: hidden;
/* a soft corner wash, drawn from the trailing edge */
}
.lng-hero::before {
content: "";
position: absolute;
right: -80px;
top: -80px;
width: 320px;
height: 320px;
border-radius: 50%;
background: var(--tint-primary);
pointer-events: none;
}
.lng-hero > * {
position: relative;
}
@media (max-width: 575.98px) {
.lng-hero {
padding: 20px;
}
}
.lng-hero-top {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
/* the default locale, set as a glyph carrying its own script */
.lng-hero-crest {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 62px;
height: 62px;
border-radius: 20px;
background: var(--bs-primary);
color: #fff;
box-shadow: 0 8px 20px rgba(232, 62, 140, 0.28);
}
.lng-hero-crest b {
font-size: 19px;
font-weight: 700;
line-height: 1;
}
.lng-hero-crest span {
margin-top: 3px;
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.78);
}
.lng-hero-title {
margin: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.lng-hero-title {
font-size: 21px;
}
}
.lng-hero-sub {
margin: 4px 0 0;
max-width: 66ch;
font-size: 13.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
/* the hero's facts, in a plain boxed strip */
.lng-hero-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
gap: 1px;
margin-top: 22px;
border-radius: var(--radius);
background: var(--bs-border-color);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.lng-hero-fact {
padding: 13px 16px;
background: var(--bs-body-bg);
}
.lng-hero-fact span {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.lng-hero-fact strong {
display: flex;
align-items: center;
gap: 7px;
margin-top: 4px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.lng-hero-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
}
/* ============================================================
3. STICKY SECTION NAVIGATION
Each entry carries its locale-ish shorthand on the right.
============================================================ */
.lng-nav {
position: sticky;
top: calc(60px + 16px);
max-height: calc(100vh - 60px - 32px);
padding: 10px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow-y: auto;
/* Bootstrap's `.nav` wraps; in a capped-height column that wraps
overflow into a second column instead of scrolling. */
flex-wrap: nowrap;
overflow-x: hidden;
}
.lng-nav > * {
flex-shrink: 0;
}
@media (max-width: 991.98px) {
.lng-nav {
position: static;
max-height: none;
}
}
.lng-nav-link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
font-size: 13.5px;
font-weight: 500;
text-align: left;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.lng-nav-link > i {
flex-shrink: 0;
font-size: 17px;
color: var(--bs-secondary-color);
transition: var(--transition);
}
.lng-nav-link .lng-nav-txt {
flex: 1 1 auto;
min-width: 0;
}
.lng-nav-link .lng-nav-hint {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: var(--bs-secondary-color);
}
.lng-nav-link:hover {
background: var(--bs-secondary-bg);
}
.lng-nav-link {
/* the active section is inked in the accent and its glyph reversed out */
}
.lng-nav-link.active {
background: var(--bs-primary);
color: #fff;
font-weight: 600;
box-shadow: 0 4px 12px rgba(232, 62, 140, 0.24);
}
.lng-nav-link.active > i,
.lng-nav-link.active .lng-nav-hint {
color: rgba(255, 255, 255, 0.82);
}
.lng-nav-foot {
margin-top: 10px;
padding: 14px 12px 6px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
4. CONFIGURATION CARDS + SETTING ROWS
============================================================ */
.lng-card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.lng-card:hover {
border-color: var(--lng-border-strong);
box-shadow: var(--shadow-lift);
}
.lng-card-head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px 13px;
}
@media (max-width: 575.98px) {
.lng-card-head {
flex-wrap: wrap;
}
}
.lng-card-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 12px;
background: var(--tint-primary);
color: rgb(208.0111111111, 24.7888888889, 108.8555555556);
font-size: 19px;
}
.lng-card-ic.is-done {
background: var(--lng-done-soft);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.lng-card-ic.is-review {
background: var(--lng-review-soft);
color: rgb(142.2, 108.7769230769, 0);
}
.lng-card-ic.is-missing {
background: var(--lng-missing-soft);
color: var(--lng-missing);
}
.lng-card-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.lng-card-title + p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.lng-card-body {
flex: 1 1 auto;
padding: 0 18px 14px;
}
.lng-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 11px 18px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
/* ---- setting row ------------------------------------------------------
Two columns: the name on the left, the value and its control on the
right, separated by a hairline rather than a leader. */
.lng-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px 16px;
padding: 11px 0;
}
.lng-row + .lng-row {
border-top: 1px solid var(--bs-border-color);
}
.lng-row .lng-row-key {
min-width: 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.lng-row .lng-row-key small {
display: block;
margin-top: 2px;
font-size: 11.5px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
.lng-row .lng-row-val {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.lng-row {
grid-template-columns: minmax(0, 1fr);
}
.lng-row .lng-row-val {
justify-content: flex-start;
}
}
.lng-input,
.lng-select {
min-width: 150px;
padding: 6px 11px;
border-radius: var(--radius-sm);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
font-size: 13px;
font-weight: 400;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.lng-input:focus,
.lng-select:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
outline: 0;
}
@media (max-width: 575.98px) {
.lng-input,
.lng-select {
min-width: 0;
width: 100%;
}
}
/* ============================================================
5. LANGUAGE PLATES
The native name is set large in its own script, because that is
what a speaker of the language recognises. The English name and
the locale code sit beneath it as metadata.
============================================================ */
.lng-plate {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.lng-plate:hover {
border-color: var(--lng-border-strong);
box-shadow: var(--shadow-lift);
}
.lng-plate {
/* the default language is ringed rather than filled */
}
.lng-plate.is-default {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
}
.lng-plate.is-off {
background: var(--bs-secondary-bg);
}
.lng-plate.is-off .lng-plate-native,
.lng-plate.is-off .lng-plate-name {
opacity: 0.66;
}
.lng-plate-top {
display: flex;
align-items: flex-start;
gap: 12px;
}
/* the native name — the one element on the page set at display size */
.lng-plate-native {
margin: 0;
font-size: 24px;
font-weight: 600;
line-height: 1.25;
color: var(--bs-emphasis-color);
/* a right-to-left language sets its own name the right way round */
}
.lng-plate-native.is-rtl {
direction: rtl;
text-align: right;
}
.lng-plate-name {
margin: 3px 0 0;
font-size: 12.5px;
color: var(--bs-secondary-color);
}
.lng-plate-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.lng-plate-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
6. COVERAGE BARS
Translation is never simply done or not done. A string can be
translated, translated but awaiting review, or missing, so the
bar is split three ways and labelled underneath.
============================================================ */
.lng-cover .lng-cover-bar {
display: flex;
height: 8px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.lng-cover .lng-cover-bar i {
display: block;
height: 100%;
}
.lng-cover .lng-cover-bar {
/* translated and approved */
}
.lng-cover .lng-cover-bar i:nth-child(1) {
width: calc(var(--p, 0) * 1%);
background: var(--lng-done);
}
.lng-cover .lng-cover-bar {
/* translated, awaiting review */
}
.lng-cover .lng-cover-bar i:nth-child(2) {
width: calc(var(--q, 0) * 1%);
background: var(--lng-review);
}
.lng-cover .lng-cover-bar {
/* missing */
}
.lng-cover .lng-cover-bar i:nth-child(3) {
width: calc(var(--r, 0) * 1%);
background: var(--lng-missing);
}
.lng-cover .lng-cover-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 7px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.lng-cover .lng-cover-meta b {
font-family: var(--font-mono);
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* the key to the bar, used once per pane rather than on every card */
.lng-legend {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.lng-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.lng-legend i {
width: 10px;
height: 10px;
border-radius: 3px;
background: var(--bs-tertiary-bg);
}
.lng-legend i.is-done {
background: var(--lng-done);
}
.lng-legend i.is-review {
background: var(--lng-review);
}
.lng-legend i.is-missing {
background: var(--lng-missing);
}
/* ============================================================
7. STRING KEYS AND TRANSLATION PAIRS
============================================================ */
.lng-string {
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.lng-string + .lng-string {
margin-top: 10px;
}
/* the key itself, on a dark strip so it reads as an identifier */
.lng-key {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 10px;
border-radius: 6px;
background: #101828;
font-family: var(--font-mono);
font-size: 11.5px;
color: rgba(255, 255, 255, 0.84);
word-break: break-all;
}
.lng-key i {
font-size: 13px;
color: rgba(255, 255, 255, 0.45);
}
/* one language's rendering of that key */
.lng-pair {
display: grid;
grid-template-columns: 84px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 9px 0;
}
.lng-pair + .lng-pair {
border-top: 1px dashed var(--bs-border-color);
}
.lng-pair .lng-pair-val {
min-width: 0;
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
word-break: break-word;
}
.lng-pair .lng-pair-val.is-rtl {
direction: rtl;
text-align: right;
}
.lng-pair .lng-pair-val {
/* an untranslated string falls back and says so */
}
.lng-pair .lng-pair-val.is-missing {
color: var(--bs-secondary-color);
font-style: italic;
}
@media (max-width: 575.98px) {
.lng-pair {
grid-template-columns: minmax(0, 1fr) auto;
}
.lng-pair .lng-code {
grid-column: 1/-1;
justify-self: start;
}
}
/* ============================================================
8. FORMAT SAMPLES
A format setting is only meaningful rendered, so the sample is
the largest thing in the card and the rule beneath it.
============================================================ */
.lng-sample {
display: flex;
flex-direction: column;
gap: 6px;
height: 100%;
padding: 16px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.lng-sample:hover {
border-color: var(--bs-primary);
box-shadow: var(--shadow);
}
.lng-sample-out {
font-family: var(--font-mono);
font-size: 19px;
font-weight: 600;
line-height: 1.3;
color: var(--bs-emphasis-color);
word-break: break-word;
}
@media (max-width: 575.98px) {
.lng-sample-out {
font-size: 16px;
}
}
.lng-sample-rule {
font-family: var(--font-mono);
font-size: 11.5px;
color: rgb(208.0111111111, 24.7888888889, 108.8555555556);
word-break: break-all;
}
.lng-sample-name {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* ============================================================
9. RTL MIRROR + FONT SPECIMENS
============================================================ */
/* two miniature layouts side by side, one flipped, so the effect of
turning right-to-left on is visible rather than described */
.lng-mirror {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 575.98px) {
.lng-mirror {
grid-template-columns: minmax(0, 1fr);
}
}
.lng-mock {
display: flex;
height: 132px;
border-radius: var(--radius-sm);
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
overflow: hidden;
}
.lng-mock.is-rtl {
flex-direction: row-reverse;
}
.lng-mock.is-rtl .lng-mock-side {
border-right: 0;
border-left: 1px solid var(--bs-border-color);
}
.lng-mock.is-rtl .lng-mock-line {
margin-left: 0;
margin-right: auto;
}
.lng-mock-side {
flex-shrink: 0;
width: 38px;
padding: 8px 6px;
background: var(--bs-secondary-bg);
border-right: 1px solid var(--bs-border-color);
display: flex;
flex-direction: column;
gap: 6px;
}
.lng-mock-main {
flex: 1 1 auto;
padding: 8px;
display: flex;
flex-direction: column;
gap: 7px;
}
.lng-mock-bar {
height: 10px;
border-radius: 3px;
background: var(--bs-secondary-bg);
}
.lng-mock-bar.is-accent {
background: var(--bs-primary);
}
.lng-mock-line {
height: 6px;
border-radius: 3px;
background: var(--bs-tertiary-bg);
width: calc(var(--p, 100) * 1%);
margin-left: 0;
}
.lng-mock-card {
flex: 1 1 auto;
border-radius: 6px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
}
.lng-mock-cap {
display: block;
margin-top: 6px;
font-family: var(--font-mono);
font-size: 10.5px;
text-align: center;
color: var(--bs-secondary-color);
}
/* ---- font specimen ----------------------------------------------------- */
.lng-font {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.lng-font + .lng-font {
margin-top: 8px;
}
@media (max-width: 767.98px) {
.lng-font {
flex-wrap: wrap;
}
}
.lng-font-meta {
flex-shrink: 0;
width: 172px;
}
.lng-font-meta strong {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.lng-font-meta span {
display: block;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--bs-secondary-color);
}
@media (max-width: 767.98px) {
.lng-font-meta {
width: 100%;
}
}
/* the specimen line, set at reading size in the face being described */
.lng-font-spec {
flex: 1 1 auto;
min-width: 0;
font-size: 17px;
line-height: 1.5;
color: var(--bs-emphasis-color);
word-break: break-word;
}
.lng-font-spec.is-rtl {
direction: rtl;
text-align: right;
}
/* ============================================================
10. PREMIUM ACCORDION + MILESTONE FILMSTRIP
============================================================ */
.lng-acc {
border-radius: var(--radius);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.lng-acc .accordion-item {
border: 0;
background: var(--bs-body-bg);
}
.lng-acc .accordion-item + .accordion-item {
border-top: 1px solid var(--bs-border-color);
}
.lng-acc .accordion-button {
gap: 11px;
padding: 15px 18px;
background: var(--bs-body-bg);
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
box-shadow: none;
}
.lng-acc .accordion-button::after {
margin-left: 0;
}
.lng-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: rgb(198.8972222222, 23.7027777778, 104.0861111111);
}
.lng-acc .accordion-button:focus {
box-shadow: 0 0 0 3px var(--tint-primary);
}
.lng-acc .accordion-button i {
font-size: 17px;
}
.lng-acc .lng-acc-spacer {
margin-left: auto;
}
.lng-acc .accordion-body {
padding: 4px 18px 18px;
}
/* ---- milestone filmstrip ----------------------------------------------
Stages laid along a rule that runs above them, so the sequence reads
left to right and scrolls sideways when it will not fit. */
.lng-strip {
position: relative;
display: flex;
gap: 16px;
padding: 26px 20px 20px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow-x: auto;
scrollbar-width: thin;
}
.lng-strip-stage {
position: relative;
flex: 1 0 234px;
padding-top: 22px;
/* the rule running along the top of the strip */
}
.lng-strip-stage::before {
content: "";
position: absolute;
left: 0;
right: -16px;
top: 8px;
height: 2px;
background: var(--bs-tertiary-bg);
}
.lng-strip-stage:last-child::before {
right: 0;
}
.lng-strip-stage.is-done::before {
background: var(--lng-done);
}
.lng-strip-stage {
/* the marker sitting on the rule */
}
.lng-strip-stage::after {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 3px solid var(--bs-tertiary-bg);
}
.lng-strip-stage.is-done::after {
background: var(--lng-done);
border-color: var(--lng-done);
}
.lng-strip-stage.is-current::after {
border-color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
.lng-strip-when {
display: block;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.lng-strip-title {
margin: 3px 0 0;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.lng-strip-txt {
margin: 6px 0 0;
font-size: 12px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* ============================================================
11. INSIGHT CARDS
Each carries the locale it concerns as a watermark, so a column
of them can be scanned by language rather than by heading.
============================================================ */
.lng-insight {
position: relative;
display: flex;
flex-direction: column;
gap: 9px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
transition: var(--transition);
}
.lng-insight:hover {
box-shadow: var(--shadow-lift);
}
.lng-insight > * {
position: relative;
}
/* the watermark, large and very pale behind the text */
.lng-insight-mark {
position: absolute;
right: 30px;
top: 20px;
font-family: var(--font-mono);
font-size: 20px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
color: var(--bs-secondary-bg);
pointer-events: none;
user-select: none;
}
.lng-insight-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.lng-insight-txt {
margin: 0;
font-size: 12.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
.lng-insight-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
12. OFFCANVAS, PANEL HELPERS, EMPTY STATE
============================================================ */
/* The theme sets `.offcanvas.offcanvas-end { width: auto !important }`; the
workspace has to match on three classes to beat it. */
.offcanvas.offcanvas-end.lng-canvas {
width: 88% !important;
max-width: 1160px !important;
}
.lng-canvas-head {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 24px;
background: var(--tint-primary);
border-bottom: 1px solid var(--bs-border-color);
}
.lng-canvas-body {
padding: 22px 24px 30px;
}
.lng-sect + .lng-sect {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--bs-border-color);
}
.lng-sect-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 13px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.lng-sect-title i {
font-size: 16px;
color: rgb(208.0111111111, 24.7888888889, 108.8555555556);
}
/* a validation result */
.lng-check {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.lng-check + .lng-check {
border-top: 1px solid var(--bs-border-color);
}
.lng-check > i {
flex-shrink: 0;
margin-top: 1px;
font-size: 16px;
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.lng-check.is-review > i {
color: rgb(142.2, 108.7769230769, 0);
}
.lng-check.is-missing > i {
color: var(--lng-missing);
}
.lng-check span {
display: block;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* audit entries */
.lng-audit {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 14px;
padding: 11px 0;
}
.lng-audit + .lng-audit {
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.lng-audit {
grid-template-columns: minmax(0, 1fr);
gap: 3px;
}
}
.lng-audit-when {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.lng-audit-when strong {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.lng-audit-what {
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.lng-audit-what span {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ---- empty state ------------------------------------------------------- */
.lng-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
padding: 38px 24px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px dashed var(--lng-border-strong);
}
.lng-empty i {
font-size: 30px;
color: var(--bs-secondary-color);
opacity: 0.8;
}
.lng-empty h6 {
margin: 8px 0 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.lng-empty p {
margin: 0;
max-width: 48ch;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
.lng-empty .btn {
margin-top: 10px;
}
/*===== system settings =====*/
/*-----------------
System Settings — platform configuration components
A shared vocabulary for the System Settings & Platform Configuration
Center: services and their health, performance, storage, maintenance,
APIs, backups and the environment all of it runs in. Class prefix `sys-`.
The visual language is a cloud console. The pieces are the ones an
infrastructure operator reads first: a loud environment ribbon, service
tiles carrying a state light and thirty days of uptime as a strip of
cells, resources measured as thin inline gauges, disk usage as a single
partitioned bar, versions in the machine face, and a deployment stair for
the sequence of events that produced the current state.
It borrows nothing from `_financial-settings.scss`, `_email-settings.scss`,
`_sms-settings.scss`, `_account-security.scss`, `_academic-settings.scss`,
`_language-settings.scss` or `_settings.scss`, and overrides nothing in
them.
Contents
1. Tokens + shared pieces
2. Workspace hero + environment ribbon
3. Sticky section navigation
4. Configuration cards + setting rows
5. Service tiles + uptime strip
6. Resource gauges
7. Disk partitions
8. Maintenance control
9. Endpoint and job rows
10. Premium accordion + deployment stair
11. Advisory cards
12. Offcanvas, panel helpers and empty state
-----------------*/
/* ============================================================
1. TOKENS + SHARED PIECES
============================================================ */
:root {
--sys-border: var(--bs-border-color, #E9EDF4);
--sys-border-strong: #EDF1F6;
/* `$secondary` is a pale cyan, which is right for a fill but not for ink,
so the accent keeps a darkened companion for text and glyphs. */
--sys-up: #1ABE17;
--sys-up-soft: #E8F9E8;
--sys-down: #E82646;
--sys-down-soft: #FDE9ED;
}
@media (prefers-reduced-motion: reduce) {
[class*=sys-],
[class*=sys-]::before,
[class*=sys-]::after {
animation: none !important;
transition: none !important;
}
}
/* Carries a numeric value into CSS without an inline style. Two channels,
because a partition needs both its width and its offset. */
.sys-p-0 {
--p: 0;
}
.sys-q-0 {
--q: 0;
}
.sys-p-1 {
--p: 1;
}
.sys-q-1 {
--q: 1;
}
.sys-p-2 {
--p: 2;
}
.sys-q-2 {
--q: 2;
}
.sys-p-3 {
--p: 3;
}
.sys-q-3 {
--q: 3;
}
.sys-p-4 {
--p: 4;
}
.sys-q-4 {
--q: 4;
}
.sys-p-5 {
--p: 5;
}
.sys-q-5 {
--q: 5;
}
.sys-p-6 {
--p: 6;
}
.sys-q-6 {
--q: 6;
}
.sys-p-7 {
--p: 7;
}
.sys-q-7 {
--q: 7;
}
.sys-p-8 {
--p: 8;
}
.sys-q-8 {
--q: 8;
}
.sys-p-9 {
--p: 9;
}
.sys-q-9 {
--q: 9;
}
.sys-p-10 {
--p: 10;
}
.sys-q-10 {
--q: 10;
}
.sys-p-11 {
--p: 11;
}
.sys-q-11 {
--q: 11;
}
.sys-p-12 {
--p: 12;
}
.sys-q-12 {
--q: 12;
}
.sys-p-13 {
--p: 13;
}
.sys-q-13 {
--q: 13;
}
.sys-p-14 {
--p: 14;
}
.sys-q-14 {
--q: 14;
}
.sys-p-15 {
--p: 15;
}
.sys-q-15 {
--q: 15;
}
.sys-p-16 {
--p: 16;
}
.sys-q-16 {
--q: 16;
}
.sys-p-17 {
--p: 17;
}
.sys-q-17 {
--q: 17;
}
.sys-p-18 {
--p: 18;
}
.sys-q-18 {
--q: 18;
}
.sys-p-19 {
--p: 19;
}
.sys-q-19 {
--q: 19;
}
.sys-p-20 {
--p: 20;
}
.sys-q-20 {
--q: 20;
}
.sys-p-21 {
--p: 21;
}
.sys-q-21 {
--q: 21;
}
.sys-p-22 {
--p: 22;
}
.sys-q-22 {
--q: 22;
}
.sys-p-23 {
--p: 23;
}
.sys-q-23 {
--q: 23;
}
.sys-p-24 {
--p: 24;
}
.sys-q-24 {
--q: 24;
}
.sys-p-25 {
--p: 25;
}
.sys-q-25 {
--q: 25;
}
.sys-p-26 {
--p: 26;
}
.sys-q-26 {
--q: 26;
}
.sys-p-27 {
--p: 27;
}
.sys-q-27 {
--q: 27;
}
.sys-p-28 {
--p: 28;
}
.sys-q-28 {
--q: 28;
}
.sys-p-29 {
--p: 29;
}
.sys-q-29 {
--q: 29;
}
.sys-p-30 {
--p: 30;
}
.sys-q-30 {
--q: 30;
}
.sys-p-31 {
--p: 31;
}
.sys-q-31 {
--q: 31;
}
.sys-p-32 {
--p: 32;
}
.sys-q-32 {
--q: 32;
}
.sys-p-33 {
--p: 33;
}
.sys-q-33 {
--q: 33;
}
.sys-p-34 {
--p: 34;
}
.sys-q-34 {
--q: 34;
}
.sys-p-35 {
--p: 35;
}
.sys-q-35 {
--q: 35;
}
.sys-p-36 {
--p: 36;
}
.sys-q-36 {
--q: 36;
}
.sys-p-37 {
--p: 37;
}
.sys-q-37 {
--q: 37;
}
.sys-p-38 {
--p: 38;
}
.sys-q-38 {
--q: 38;
}
.sys-p-39 {
--p: 39;
}
.sys-q-39 {
--q: 39;
}
.sys-p-40 {
--p: 40;
}
.sys-q-40 {
--q: 40;
}
.sys-p-41 {
--p: 41;
}
.sys-q-41 {
--q: 41;
}
.sys-p-42 {
--p: 42;
}
.sys-q-42 {
--q: 42;
}
.sys-p-43 {
--p: 43;
}
.sys-q-43 {
--q: 43;
}
.sys-p-44 {
--p: 44;
}
.sys-q-44 {
--q: 44;
}
.sys-p-45 {
--p: 45;
}
.sys-q-45 {
--q: 45;
}
.sys-p-46 {
--p: 46;
}
.sys-q-46 {
--q: 46;
}
.sys-p-47 {
--p: 47;
}
.sys-q-47 {
--q: 47;
}
.sys-p-48 {
--p: 48;
}
.sys-q-48 {
--q: 48;
}
.sys-p-49 {
--p: 49;
}
.sys-q-49 {
--q: 49;
}
.sys-p-50 {
--p: 50;
}
.sys-q-50 {
--q: 50;
}
.sys-p-51 {
--p: 51;
}
.sys-q-51 {
--q: 51;
}
.sys-p-52 {
--p: 52;
}
.sys-q-52 {
--q: 52;
}
.sys-p-53 {
--p: 53;
}
.sys-q-53 {
--q: 53;
}
.sys-p-54 {
--p: 54;
}
.sys-q-54 {
--q: 54;
}
.sys-p-55 {
--p: 55;
}
.sys-q-55 {
--q: 55;
}
.sys-p-56 {
--p: 56;
}
.sys-q-56 {
--q: 56;
}
.sys-p-57 {
--p: 57;
}
.sys-q-57 {
--q: 57;
}
.sys-p-58 {
--p: 58;
}
.sys-q-58 {
--q: 58;
}
.sys-p-59 {
--p: 59;
}
.sys-q-59 {
--q: 59;
}
.sys-p-60 {
--p: 60;
}
.sys-q-60 {
--q: 60;
}
.sys-p-61 {
--p: 61;
}
.sys-q-61 {
--q: 61;
}
.sys-p-62 {
--p: 62;
}
.sys-q-62 {
--q: 62;
}
.sys-p-63 {
--p: 63;
}
.sys-q-63 {
--q: 63;
}
.sys-p-64 {
--p: 64;
}
.sys-q-64 {
--q: 64;
}
.sys-p-65 {
--p: 65;
}
.sys-q-65 {
--q: 65;
}
.sys-p-66 {
--p: 66;
}
.sys-q-66 {
--q: 66;
}
.sys-p-67 {
--p: 67;
}
.sys-q-67 {
--q: 67;
}
.sys-p-68 {
--p: 68;
}
.sys-q-68 {
--q: 68;
}
.sys-p-69 {
--p: 69;
}
.sys-q-69 {
--q: 69;
}
.sys-p-70 {
--p: 70;
}
.sys-q-70 {
--q: 70;
}
.sys-p-71 {
--p: 71;
}
.sys-q-71 {
--q: 71;
}
.sys-p-72 {
--p: 72;
}
.sys-q-72 {
--q: 72;
}
.sys-p-73 {
--p: 73;
}
.sys-q-73 {
--q: 73;
}
.sys-p-74 {
--p: 74;
}
.sys-q-74 {
--q: 74;
}
.sys-p-75 {
--p: 75;
}
.sys-q-75 {
--q: 75;
}
.sys-p-76 {
--p: 76;
}
.sys-q-76 {
--q: 76;
}
.sys-p-77 {
--p: 77;
}
.sys-q-77 {
--q: 77;
}
.sys-p-78 {
--p: 78;
}
.sys-q-78 {
--q: 78;
}
.sys-p-79 {
--p: 79;
}
.sys-q-79 {
--q: 79;
}
.sys-p-80 {
--p: 80;
}
.sys-q-80 {
--q: 80;
}
.sys-p-81 {
--p: 81;
}
.sys-q-81 {
--q: 81;
}
.sys-p-82 {
--p: 82;
}
.sys-q-82 {
--q: 82;
}
.sys-p-83 {
--p: 83;
}
.sys-q-83 {
--q: 83;
}
.sys-p-84 {
--p: 84;
}
.sys-q-84 {
--q: 84;
}
.sys-p-85 {
--p: 85;
}
.sys-q-85 {
--q: 85;
}
.sys-p-86 {
--p: 86;
}
.sys-q-86 {
--q: 86;
}
.sys-p-87 {
--p: 87;
}
.sys-q-87 {
--q: 87;
}
.sys-p-88 {
--p: 88;
}
.sys-q-88 {
--q: 88;
}
.sys-p-89 {
--p: 89;
}
.sys-q-89 {
--q: 89;
}
.sys-p-90 {
--p: 90;
}
.sys-q-90 {
--q: 90;
}
.sys-p-91 {
--p: 91;
}
.sys-q-91 {
--q: 91;
}
.sys-p-92 {
--p: 92;
}
.sys-q-92 {
--q: 92;
}
.sys-p-93 {
--p: 93;
}
.sys-q-93 {
--q: 93;
}
.sys-p-94 {
--p: 94;
}
.sys-q-94 {
--q: 94;
}
.sys-p-95 {
--p: 95;
}
.sys-q-95 {
--q: 95;
}
.sys-p-96 {
--p: 96;
}
.sys-q-96 {
--q: 96;
}
.sys-p-97 {
--p: 97;
}
.sys-q-97 {
--q: 97;
}
.sys-p-98 {
--p: 98;
}
.sys-q-98 {
--q: 98;
}
.sys-p-99 {
--p: 99;
}
.sys-q-99 {
--q: 99;
}
.sys-p-100 {
--p: 100;
}
.sys-q-100 {
--q: 100;
}
/* The stair uses its own channel for depth. */
.sys-i-0 {
--i: 0;
}
.sys-i-1 {
--i: 1;
}
.sys-i-2 {
--i: 2;
}
.sys-i-3 {
--i: 3;
}
.sys-i-4 {
--i: 4;
}
.sys-i-5 {
--i: 5;
}
.sys-i-6 {
--i: 6;
}
.sys-i-7 {
--i: 7;
}
.sys-i-8 {
--i: 8;
}
.sys-mono {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: -0.01em;
}
.sys-lbl {
display: block;
margin: 0 0 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* a version or identifier, in the machine face */
.sys-ver {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 5px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ---- status badges ----------------------------------------------------
Rectangular with a small radius, the way a console labels a resource. */
.sys-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 5px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 11.5px;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
color: var(--bs-secondary-color);
}
.sys-badge i {
font-size: 13px;
}
.sys-badge.is-up {
background: var(--sys-up-soft);
border-color: rgba(26, 190, 23, 0.28);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.sys-badge.is-warn {
background: var(--tint-warning);
border-color: rgba(234, 179, 0, 0.34);
color: rgb(142.2, 108.7769230769, 0);
}
.sys-badge.is-down {
background: var(--sys-down-soft);
border-color: rgba(232, 38, 70, 0.26);
color: var(--sys-down);
}
.sys-badge.is-accent {
background: var(--tint-primary);
border-color: rgba(111, 204, 216, 0.5);
color: var(--bs-primary);
}
.sys-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
border-radius: 5px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 11px;
font-weight: 500;
color: var(--bs-secondary-color);
}
.sys-tag i {
font-size: 13px;
}
/* a state light */
.sys-led {
position: relative;
display: inline-block;
width: 8px;
height: 8px;
flex-shrink: 0;
border-radius: 50%;
background: var(--sys-up);
}
.sys-led::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--sys-up);
opacity: 0.4;
animation: sys-pulse 2.6s ease-out infinite;
}
.sys-led.is-warn {
background: var(--bs-warning);
}
.sys-led.is-warn::after {
border-color: var(--bs-warning);
}
.sys-led.is-down {
background: var(--sys-down);
}
.sys-led.is-down::after {
border-color: var(--sys-down);
animation: none;
}
.sys-led.is-off {
background: var(--sys-border-strong);
}
.sys-led.is-off::after {
display: none;
}
@keyframes sys-pulse {
0% {
transform: scale(0.7);
opacity: 0.55;
}
70%, 100% {
transform: scale(1.6);
opacity: 0;
}
}
/* ============================================================
2. WORKSPACE HERO + ENVIRONMENT RIBBON
In a console the environment is the loudest thing on the page,
because everything else means something different without it.
============================================================ */
.sys-hero {
margin-bottom: 26px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow: hidden;
}
/* the ribbon across the top */
.sys-ribbon {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 24px;
background: var(--bs-emphasis-color);
color: rgba(255, 255, 255, 0.62);
font-size: 12px;
}
.sys-ribbon strong {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 3px 10px;
border-radius: 5px;
background: var(--sys-up);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
}
.sys-ribbon .sys-ribbon-sep {
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.16);
}
.sys-ribbon b {
font-family: var(--font-mono);
font-weight: 600;
color: #fff;
}
.sys-ribbon {
/* a non-production environment shouts louder */
}
.sys-ribbon.is-staging strong {
background: rgb(193.2, 147.7897435897, 0);
}
.sys-hero-body {
padding: 24px 26px;
}
@media (max-width: 575.98px) {
.sys-hero-body {
padding: 20px;
}
}
.sys-hero-top {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.sys-hero-crest {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: 15px;
background: var(--bs-primary);
color: #fff;
font-size: 25px;
box-shadow: 0 8px 18px rgba(2, 132, 148, 0.26);
}
.sys-hero-title {
margin: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.sys-hero-title {
font-size: 21px;
}
}
.sys-hero-sub {
margin: 4px 0 0;
max-width: 66ch;
font-size: 13.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
/* the hero's facts, each in its own bordered cell */
.sys-hero-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px;
margin-top: 22px;
}
.sys-hero-cell {
padding: 12px 14px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
}
.sys-hero-cell span {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.sys-hero-cell strong {
display: flex;
align-items: center;
gap: 7px;
margin-top: 4px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sys-hero-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
}
/* ============================================================
3. STICKY SECTION NAVIGATION
Nineteen sections, so each carries a state light rather than a
count and the rail scrolls.
============================================================ */
.sys-nav {
position: sticky;
top: calc(60px + 16px);
max-height: calc(100vh - 60px - 32px);
padding: 8px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow-y: auto;
/* Bootstrap's `.nav` wraps; in a capped-height column that wraps
overflow into a second column instead of scrolling. */
flex-wrap: nowrap;
overflow-x: hidden;
}
.sys-nav > * {
flex-shrink: 0;
}
@media (max-width: 991.98px) {
.sys-nav {
position: static;
max-height: none;
}
}
.sys-nav-hdr {
display: block;
padding: 13px 12px 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.sys-nav-hdr:first-child {
padding-top: 5px;
}
.sys-nav-link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 12px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
font-size: 13.5px;
font-weight: 500;
text-align: left;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.sys-nav-link > i:first-child {
flex-shrink: 0;
font-size: 17px;
color: var(--bs-secondary-color);
transition: var(--transition);
}
.sys-nav-link .sys-nav-txt {
flex: 1 1 auto;
min-width: 0;
}
.sys-nav-link:hover {
background: var(--bs-secondary-bg);
}
.sys-nav-link {
/* the active row is filled in the deep accent, as a console selection is */
}
.sys-nav-link.active {
background: var(--bs-primary);
color: #fff;
font-weight: 600;
}
.sys-nav-link.active > i:first-child {
color: rgba(255, 255, 255, 0.82);
}
.sys-nav-link.active .sys-led {
background: #fff;
}
.sys-nav-link.active .sys-led::after {
border-color: #fff;
}
.sys-nav-foot {
margin-top: 8px;
padding: 13px 12px 5px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
4. CONFIGURATION CARDS + SETTING ROWS
============================================================ */
.sys-card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.sys-card:hover {
border-color: var(--sys-border-strong);
box-shadow: var(--shadow-lift);
}
/* the header carries a thin rule of state along its very top */
.sys-card-head {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 15px 17px 12px;
border-bottom: 1px solid var(--bs-border-color);
}
.sys-card-head::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: var(--bs-primary);
}
.sys-card-head.is-up::before {
background: var(--sys-up);
}
.sys-card-head.is-warn::before {
background: var(--bs-warning);
}
.sys-card-head.is-down::before {
background: var(--sys-down);
}
.sys-card-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 10px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 18px;
}
.sys-card-ic.is-up {
background: var(--sys-up-soft);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.sys-card-ic.is-warn {
background: var(--tint-warning);
color: rgb(142.2, 108.7769230769, 0);
}
.sys-card-ic.is-down {
background: var(--sys-down-soft);
color: var(--sys-down);
}
.sys-card-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sys-card-title + p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.sys-card-body {
flex: 1 1 auto;
padding: 4px 17px 12px;
}
.sys-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 10px 17px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
/* ---- setting row ------------------------------------------------------
A console lists a key and its value in two fixed columns, with the
control tucked to the right of the value. */
.sys-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 14px;
padding: 10px 0;
}
.sys-row + .sys-row {
border-top: 1px solid var(--bs-border-color);
}
.sys-row .sys-row-key {
min-width: 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.sys-row .sys-row-key small {
display: block;
margin-top: 2px;
font-size: 11.5px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
.sys-row .sys-row-val {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.sys-row {
grid-template-columns: minmax(0, 1fr);
}
.sys-row .sys-row-val {
justify-content: flex-start;
}
}
.sys-input,
.sys-select {
min-width: 148px;
padding: 6px 10px;
border-radius: var(--radius-sm);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
font-size: 13px;
font-weight: 400;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.sys-input:focus,
.sys-select:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
outline: 0;
}
@media (max-width: 575.98px) {
.sys-input,
.sys-select {
min-width: 0;
width: 100%;
}
}
.sys-input.is-mono {
font-family: var(--font-mono);
font-size: 12.5px;
}
/* a value that is machine output rather than a choice */
.sys-code {
padding: 9px 11px;
border-radius: var(--radius-sm);
background: var(--bs-emphasis-color);
font-family: var(--font-mono);
font-size: 11.5px;
line-height: 1.75;
color: rgba(255, 255, 255, 0.8);
word-break: break-all;
overflow-x: auto;
}
/* ============================================================
5. SERVICE TILES + UPTIME STRIP
============================================================ */
.sys-svc {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
padding: 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.sys-svc:hover {
border-color: var(--sys-border-strong);
box-shadow: var(--shadow-lift);
}
.sys-svc {
/* a degraded or stopped service is tinted along its whole surface */
}
.sys-svc.is-warn {
background: linear-gradient(170deg, var(--tint-warning), var(--bs-body-bg) 52%);
border-color: rgba(234, 179, 0, 0.3);
}
.sys-svc.is-down {
background: linear-gradient(170deg, var(--sys-down-soft), var(--bs-body-bg) 52%);
border-color: rgba(232, 38, 70, 0.28);
}
.sys-svc-top {
display: flex;
align-items: center;
gap: 11px;
}
.sys-svc-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 12px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-emphasis-color);
font-size: 19px;
}
.sys-svc-name {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sys-svc-name + p {
margin: 2px 0 0;
font-family: var(--font-mono);
font-size: 11px;
color: var(--bs-secondary-color);
}
/* ---- uptime strip -----------------------------------------------------
Thirty cells, one per day. A console shows history this way because the
shape of an outage matters as much as the percentage. */
.sys-uptime {
display: flex;
gap: 2px;
height: 22px;
}
.sys-uptime i {
flex: 1 1 0;
min-width: 0;
border-radius: 2px;
background: var(--sys-up);
}
.sys-uptime i.is-warn {
background: var(--bs-warning);
}
.sys-uptime i.is-down {
background: var(--sys-down);
}
.sys-uptime i.is-none {
background: var(--bs-tertiary-bg);
}
.sys-uptime-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 6px;
font-size: 11px;
color: var(--bs-secondary-color);
}
.sys-uptime-meta b {
font-family: var(--font-mono);
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sys-svc-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 11px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
6. RESOURCE GAUGES
Thin, inline, and always paired with the figure — a bar without
a number is decoration.
============================================================ */
.sys-gauge {
display: flex;
align-items: center;
gap: 10px;
}
.sys-gauge .sys-gauge-track {
position: relative;
flex: 1 1 auto;
height: 5px;
min-width: 60px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
overflow: hidden;
}
.sys-gauge .sys-gauge-track span {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--p, 0) * 1%);
border-radius: inherit;
background: var(--bs-primary);
}
.sys-gauge .sys-gauge-n {
flex-shrink: 0;
min-width: 46px;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 600;
text-align: right;
color: var(--bs-emphasis-color);
}
.sys-gauge.is-warn .sys-gauge-track span {
background: var(--bs-warning);
}
.sys-gauge.is-down .sys-gauge-track span {
background: var(--sys-down);
}
/* ============================================================
7. DISK PARTITIONS
One bar for the volume, divided into what is actually on it,
with each block naming itself underneath.
============================================================ */
.sys-disk {
display: flex;
height: 30px;
border-radius: var(--radius-sm);
background: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.sys-part {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 calc(var(--p, 10) * 1%);
min-width: 0;
padding: 0 6px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
background: var(--bs-primary);
}
.sys-part + .sys-part {
border-left: 1px solid rgba(255, 255, 255, 0.35);
}
.sys-part.is-media {
background: rgb(17.0863636364, 115.0481818182, 233.5136363636);
}
.sys-part.is-db {
background: rgb(126.9388646288, 65.8, 255);
}
.sys-part.is-logs {
background: rgb(203.4, 155.5923076923, 0);
}
.sys-part.is-backup {
background: rgb(22.2647887324, 162.7042253521, 19.6957746479);
}
.sys-part {
/* free space is not a partition, so it is left unfilled */
}
.sys-part.is-free {
background: transparent;
color: var(--bs-secondary-color);
}
.sys-disk-key {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 12px;
}
.sys-disk-key span {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.sys-disk-key span b {
font-family: var(--font-mono);
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sys-disk-key i {
width: 10px;
height: 10px;
border-radius: 3px;
background: var(--bs-primary);
}
.sys-disk-key i.is-media {
background: rgb(17.0863636364, 115.0481818182, 233.5136363636);
}
.sys-disk-key i.is-db {
background: rgb(126.9388646288, 65.8, 255);
}
.sys-disk-key i.is-logs {
background: rgb(203.4, 155.5923076923, 0);
}
.sys-disk-key i.is-backup {
background: rgb(22.2647887324, 162.7042253521, 19.6957746479);
}
.sys-disk-key i.is-free {
background: var(--bs-tertiary-bg);
}
/* ============================================================
8. MAINTENANCE CONTROL
A switch that takes the platform away from everyone deserves
more than a row in a list.
============================================================ */
.sys-switchboard {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 22px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-left: 4px solid var(--sys-up);
/* armed: the platform is closed */
}
.sys-switchboard.is-armed {
border-left-color: var(--sys-down);
background: linear-gradient(100deg, var(--sys-down-soft), var(--bs-body-bg) 48%);
}
@media (max-width: 767.98px) {
.sys-switchboard {
flex-wrap: wrap;
}
}
.sys-switchboard-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: 16px;
background: var(--sys-up-soft);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
font-size: 25px;
}
.is-armed .sys-switchboard-ic {
background: var(--sys-down-soft);
color: var(--sys-down);
}
.sys-switchboard-body {
flex: 1 1 auto;
min-width: 0;
}
.sys-switchboard-body h6 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sys-switchboard-body p {
margin: 4px 0 0;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* ============================================================
9. ENDPOINT AND JOB ROWS
============================================================ */
.sys-item {
display: grid;
grid-template-columns: 10px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.sys-item + .sys-item {
margin-top: 8px;
}
.sys-item:hover {
border-color: var(--sys-border-strong);
}
.sys-item {
/* a rib carrying the row's state */
}
.sys-item::before {
content: "";
width: 4px;
height: 26px;
border-radius: 3px;
background: var(--sys-up);
}
.sys-item.is-warn::before {
background: var(--bs-warning);
}
.sys-item.is-down::before {
background: var(--sys-down);
}
.sys-item.is-off {
background: var(--bs-secondary-bg);
}
.sys-item.is-off::before {
background: var(--sys-border-strong);
}
.sys-item.is-off .sys-item-body {
opacity: 0.7;
}
@media (max-width: 767.98px) {
.sys-item {
grid-template-columns: 10px minmax(0, 1fr);
row-gap: 10px;
}
.sys-item .sys-item-side {
grid-column: 2/-1;
justify-content: flex-start;
}
}
.sys-item-body {
min-width: 0;
}
.sys-item-body strong {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sys-item-body span {
display: block;
margin-top: 2px;
font-size: 11.5px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
.sys-item-body code {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-primary);
}
.sys-item-side {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
}
/* ---- log lines --------------------------------------------------------- */
.sys-log {
display: grid;
grid-template-columns: 152px 78px minmax(0, 1fr);
gap: 14px;
padding: 8px 0;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.7;
}
.sys-log + .sys-log {
border-top: 1px solid var(--bs-border-color);
}
.sys-log .sys-log-t {
color: var(--bs-secondary-color);
white-space: nowrap;
}
.sys-log .sys-log-msg {
min-width: 0;
color: var(--bs-emphasis-color);
word-break: break-word;
}
.sys-log.is-down .sys-log-msg {
color: var(--sys-down);
}
.sys-log.is-warn .sys-log-msg {
color: rgb(142.2, 108.7769230769, 0);
}
@media (max-width: 767.98px) {
.sys-log {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
}
}
/* ============================================================
10. PREMIUM ACCORDION + DEPLOYMENT STAIR
============================================================ */
.sys-acc {
border-radius: var(--radius);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.sys-acc .accordion-item {
border: 0;
background: var(--bs-body-bg);
}
.sys-acc .accordion-item + .accordion-item {
border-top: 1px solid var(--bs-border-color);
}
.sys-acc .accordion-button {
gap: 11px;
padding: 15px 17px;
background: var(--bs-body-bg);
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
box-shadow: none;
}
.sys-acc .accordion-button::after {
margin-left: 0;
}
.sys-acc .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.sys-acc .accordion-button:focus {
box-shadow: 0 0 0 3px var(--tint-primary);
}
.sys-acc .accordion-button i {
font-size: 17px;
}
.sys-acc .sys-acc-spacer {
margin-left: auto;
}
.sys-acc .accordion-body {
padding: 4px 17px 17px;
}
/* ---- deployment stair -------------------------------------------------
Each stage steps in from the one before it and is joined by an elbow, so
the sequence reads as a pipeline rather than a list of dates. */
.sys-stair {
padding: 4px 0;
}
.sys-stair-step {
position: relative;
margin-left: calc(var(--i, 0) * 30px);
padding-bottom: 14px;
}
.sys-stair-step:last-child {
padding-bottom: 0;
}
.sys-stair-step {
/* the elbow: down from the previous step, then across into this one */
}
.sys-stair-step::before {
content: "";
position: absolute;
left: -18px;
top: -14px;
bottom: 50%;
width: 18px;
border-left: 2px solid var(--bs-tertiary-bg);
border-bottom: 2px solid var(--bs-tertiary-bg);
border-bottom-left-radius: 10px;
}
.sys-stair-step:first-child::before {
display: none;
}
.sys-stair-step.is-done::before {
border-color: var(--sys-up);
}
@media (max-width: 991.98px) {
.sys-stair-step {
margin-left: 0;
}
.sys-stair-step::before {
left: 20px;
width: 0;
border-bottom: 0;
border-radius: 0;
}
}
.sys-stair-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.sys-stair-card h6 {
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sys-stair-card time {
display: block;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--bs-secondary-color);
}
.sys-stair-card p {
margin: 7px 0 0;
font-size: 12.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
.sys-stair-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 11px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 18px;
}
.is-done .sys-stair-ic {
background: var(--sys-up);
border-color: var(--sys-up);
color: #fff;
}
.is-current .sys-stair-ic {
border-color: var(--bs-primary);
color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
}
/* ============================================================
11. ADVISORY CARDS
A console recommendation names the resource it concerns and how
severe it is before it says anything else.
============================================================ */
.sys-advice {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
padding: 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
/* a folded corner, cut out of the top-right */
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.sys-advice::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 18px;
height: 18px;
background: var(--bs-border-color);
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.sys-advice:hover {
box-shadow: var(--shadow-lift);
}
.sys-advice.is-warn::after {
background: var(--bs-warning);
}
.sys-advice.is-down::after {
background: var(--sys-down);
}
.sys-advice.is-up::after {
background: var(--sys-up);
}
.sys-advice-top {
display: flex;
align-items: center;
gap: 10px;
}
.sys-advice-sev {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 9px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
color: var(--bs-secondary-color);
font-size: 17px;
}
.is-warn .sys-advice-sev {
background: var(--tint-warning);
border-color: rgba(234, 179, 0, 0.32);
color: rgb(142.2, 108.7769230769, 0);
}
.is-down .sys-advice-sev {
background: var(--sys-down-soft);
border-color: rgba(232, 38, 70, 0.26);
color: var(--sys-down);
}
.is-up .sys-advice-sev {
background: var(--sys-up-soft);
border-color: rgba(26, 190, 23, 0.28);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.sys-advice-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sys-advice-txt {
margin: 0;
font-size: 12.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
.sys-advice-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
12. OFFCANVAS, PANEL HELPERS, EMPTY STATE
============================================================ */
/* The theme sets `.offcanvas.offcanvas-end { width: auto !important }`; the
workspace has to match on three classes to beat it. */
.offcanvas.offcanvas-end.sys-canvas {
width: 88% !important;
max-width: 1180px !important;
}
.sys-canvas-head {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 24px;
background: var(--bs-emphasis-color);
color: #fff;
}
.sys-canvas-head .sys-card-ic {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.sys-canvas-head .offcanvas-title {
color: #fff;
}
.sys-canvas-head p {
color: rgba(255, 255, 255, 0.55);
}
.sys-canvas-head .btn-close {
filter: invert(1) grayscale(1);
opacity: 0.7;
}
.sys-canvas-body {
padding: 22px 24px 30px;
}
.sys-sect + .sys-sect {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--bs-border-color);
}
.sys-sect-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 13px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.sys-sect-title i {
font-size: 16px;
color: var(--bs-primary);
}
/* a check result */
.sys-check {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.sys-check + .sys-check {
border-top: 1px solid var(--bs-border-color);
}
.sys-check > i {
flex-shrink: 0;
margin-top: 1px;
font-size: 16px;
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.sys-check.is-warn > i {
color: rgb(142.2, 108.7769230769, 0);
}
.sys-check.is-down > i {
color: var(--sys-down);
}
.sys-check span {
display: block;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* audit entries */
.sys-audit {
display: grid;
grid-template-columns: 152px minmax(0, 1fr);
gap: 14px;
padding: 11px 0;
}
.sys-audit + .sys-audit {
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.sys-audit {
grid-template-columns: minmax(0, 1fr);
gap: 3px;
}
}
.sys-audit-when {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.sys-audit-when strong {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sys-audit-what {
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.sys-audit-what span {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ---- empty state ------------------------------------------------------- */
.sys-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
padding: 38px 24px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px dashed var(--sys-border-strong);
}
.sys-empty i {
font-size: 30px;
color: var(--bs-secondary-color);
opacity: 0.8;
}
.sys-empty h6 {
margin: 8px 0 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.sys-empty p {
margin: 0;
max-width: 48ch;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
.sys-empty .btn {
margin-top: 10px;
}
/*===== ai settings =====*/
/*-----------------
AI Settings — intelligence configuration components
A shared vocabulary for the AI Settings & Intelligence Configuration
Center: providers, models, the features each model is routed to, prompt
templates, automations, permissions and privacy. Class prefix `aig-`.
The visual language is a model-governance console. The pieces are the
ones this subject needs and no other settings page does: a model plate
with its context window drawn as a ruler, sampling parameters as marked
dials, prompts shown as the text they actually are with their variables
picked out, features routed to a named model, and a token budget read as
a column rather than a bar.
It is separate from `_ai-insights.scss`, which styles the AI feature
pages themselves — this partial governs them rather than joining them —
and it borrows nothing from the other settings partials.
Contents
1. Tokens + shared pieces
2. Configuration hero
3. Sticky section navigation
4. Configuration cards + setting rows
5. Provider cards
6. Model plates + context ruler
7. Sampling dials + token column
8. Feature routing rows
9. Prompt templates
10. Automation rows + permission matrix
11. Premium accordion + activity flow
12. Recommendation cards
13. Offcanvas, panel helpers and empty state
-----------------*/
/* ============================================================
1. TOKENS + SHARED PIECES
============================================================ */
:root {
--aig-border: var(--bs-border-color, #E9EDF4);
--aig-border-strong: #EDF1F6;
/* A deep indigo, mixed rather than taken straight, so it sits apart from
both the bright purple and the navy already in use elsewhere. */
--aig-model: #02a8b5;
--aig-model-soft: #E6F9FF;
--aig-ok: #1ABE17;
--aig-ok-soft: #E8F9E8;
--aig-stop: #E82646;
--aig-stop-soft: #FDE9ED;
}
@media (prefers-reduced-motion: reduce) {
[class*=aig-],
[class*=aig-]::before,
[class*=aig-]::after {
animation: none !important;
transition: none !important;
}
}
/* Value carriers. Two channels: a position and a width, since a context
ruler needs both. */
.aig-p-0 {
--p: 0;
}
.aig-q-0 {
--q: 0;
}
.aig-p-1 {
--p: 1;
}
.aig-q-1 {
--q: 1;
}
.aig-p-2 {
--p: 2;
}
.aig-q-2 {
--q: 2;
}
.aig-p-3 {
--p: 3;
}
.aig-q-3 {
--q: 3;
}
.aig-p-4 {
--p: 4;
}
.aig-q-4 {
--q: 4;
}
.aig-p-5 {
--p: 5;
}
.aig-q-5 {
--q: 5;
}
.aig-p-6 {
--p: 6;
}
.aig-q-6 {
--q: 6;
}
.aig-p-7 {
--p: 7;
}
.aig-q-7 {
--q: 7;
}
.aig-p-8 {
--p: 8;
}
.aig-q-8 {
--q: 8;
}
.aig-p-9 {
--p: 9;
}
.aig-q-9 {
--q: 9;
}
.aig-p-10 {
--p: 10;
}
.aig-q-10 {
--q: 10;
}
.aig-p-11 {
--p: 11;
}
.aig-q-11 {
--q: 11;
}
.aig-p-12 {
--p: 12;
}
.aig-q-12 {
--q: 12;
}
.aig-p-13 {
--p: 13;
}
.aig-q-13 {
--q: 13;
}
.aig-p-14 {
--p: 14;
}
.aig-q-14 {
--q: 14;
}
.aig-p-15 {
--p: 15;
}
.aig-q-15 {
--q: 15;
}
.aig-p-16 {
--p: 16;
}
.aig-q-16 {
--q: 16;
}
.aig-p-17 {
--p: 17;
}
.aig-q-17 {
--q: 17;
}
.aig-p-18 {
--p: 18;
}
.aig-q-18 {
--q: 18;
}
.aig-p-19 {
--p: 19;
}
.aig-q-19 {
--q: 19;
}
.aig-p-20 {
--p: 20;
}
.aig-q-20 {
--q: 20;
}
.aig-p-21 {
--p: 21;
}
.aig-q-21 {
--q: 21;
}
.aig-p-22 {
--p: 22;
}
.aig-q-22 {
--q: 22;
}
.aig-p-23 {
--p: 23;
}
.aig-q-23 {
--q: 23;
}
.aig-p-24 {
--p: 24;
}
.aig-q-24 {
--q: 24;
}
.aig-p-25 {
--p: 25;
}
.aig-q-25 {
--q: 25;
}
.aig-p-26 {
--p: 26;
}
.aig-q-26 {
--q: 26;
}
.aig-p-27 {
--p: 27;
}
.aig-q-27 {
--q: 27;
}
.aig-p-28 {
--p: 28;
}
.aig-q-28 {
--q: 28;
}
.aig-p-29 {
--p: 29;
}
.aig-q-29 {
--q: 29;
}
.aig-p-30 {
--p: 30;
}
.aig-q-30 {
--q: 30;
}
.aig-p-31 {
--p: 31;
}
.aig-q-31 {
--q: 31;
}
.aig-p-32 {
--p: 32;
}
.aig-q-32 {
--q: 32;
}
.aig-p-33 {
--p: 33;
}
.aig-q-33 {
--q: 33;
}
.aig-p-34 {
--p: 34;
}
.aig-q-34 {
--q: 34;
}
.aig-p-35 {
--p: 35;
}
.aig-q-35 {
--q: 35;
}
.aig-p-36 {
--p: 36;
}
.aig-q-36 {
--q: 36;
}
.aig-p-37 {
--p: 37;
}
.aig-q-37 {
--q: 37;
}
.aig-p-38 {
--p: 38;
}
.aig-q-38 {
--q: 38;
}
.aig-p-39 {
--p: 39;
}
.aig-q-39 {
--q: 39;
}
.aig-p-40 {
--p: 40;
}
.aig-q-40 {
--q: 40;
}
.aig-p-41 {
--p: 41;
}
.aig-q-41 {
--q: 41;
}
.aig-p-42 {
--p: 42;
}
.aig-q-42 {
--q: 42;
}
.aig-p-43 {
--p: 43;
}
.aig-q-43 {
--q: 43;
}
.aig-p-44 {
--p: 44;
}
.aig-q-44 {
--q: 44;
}
.aig-p-45 {
--p: 45;
}
.aig-q-45 {
--q: 45;
}
.aig-p-46 {
--p: 46;
}
.aig-q-46 {
--q: 46;
}
.aig-p-47 {
--p: 47;
}
.aig-q-47 {
--q: 47;
}
.aig-p-48 {
--p: 48;
}
.aig-q-48 {
--q: 48;
}
.aig-p-49 {
--p: 49;
}
.aig-q-49 {
--q: 49;
}
.aig-p-50 {
--p: 50;
}
.aig-q-50 {
--q: 50;
}
.aig-p-51 {
--p: 51;
}
.aig-q-51 {
--q: 51;
}
.aig-p-52 {
--p: 52;
}
.aig-q-52 {
--q: 52;
}
.aig-p-53 {
--p: 53;
}
.aig-q-53 {
--q: 53;
}
.aig-p-54 {
--p: 54;
}
.aig-q-54 {
--q: 54;
}
.aig-p-55 {
--p: 55;
}
.aig-q-55 {
--q: 55;
}
.aig-p-56 {
--p: 56;
}
.aig-q-56 {
--q: 56;
}
.aig-p-57 {
--p: 57;
}
.aig-q-57 {
--q: 57;
}
.aig-p-58 {
--p: 58;
}
.aig-q-58 {
--q: 58;
}
.aig-p-59 {
--p: 59;
}
.aig-q-59 {
--q: 59;
}
.aig-p-60 {
--p: 60;
}
.aig-q-60 {
--q: 60;
}
.aig-p-61 {
--p: 61;
}
.aig-q-61 {
--q: 61;
}
.aig-p-62 {
--p: 62;
}
.aig-q-62 {
--q: 62;
}
.aig-p-63 {
--p: 63;
}
.aig-q-63 {
--q: 63;
}
.aig-p-64 {
--p: 64;
}
.aig-q-64 {
--q: 64;
}
.aig-p-65 {
--p: 65;
}
.aig-q-65 {
--q: 65;
}
.aig-p-66 {
--p: 66;
}
.aig-q-66 {
--q: 66;
}
.aig-p-67 {
--p: 67;
}
.aig-q-67 {
--q: 67;
}
.aig-p-68 {
--p: 68;
}
.aig-q-68 {
--q: 68;
}
.aig-p-69 {
--p: 69;
}
.aig-q-69 {
--q: 69;
}
.aig-p-70 {
--p: 70;
}
.aig-q-70 {
--q: 70;
}
.aig-p-71 {
--p: 71;
}
.aig-q-71 {
--q: 71;
}
.aig-p-72 {
--p: 72;
}
.aig-q-72 {
--q: 72;
}
.aig-p-73 {
--p: 73;
}
.aig-q-73 {
--q: 73;
}
.aig-p-74 {
--p: 74;
}
.aig-q-74 {
--q: 74;
}
.aig-p-75 {
--p: 75;
}
.aig-q-75 {
--q: 75;
}
.aig-p-76 {
--p: 76;
}
.aig-q-76 {
--q: 76;
}
.aig-p-77 {
--p: 77;
}
.aig-q-77 {
--q: 77;
}
.aig-p-78 {
--p: 78;
}
.aig-q-78 {
--q: 78;
}
.aig-p-79 {
--p: 79;
}
.aig-q-79 {
--q: 79;
}
.aig-p-80 {
--p: 80;
}
.aig-q-80 {
--q: 80;
}
.aig-p-81 {
--p: 81;
}
.aig-q-81 {
--q: 81;
}
.aig-p-82 {
--p: 82;
}
.aig-q-82 {
--q: 82;
}
.aig-p-83 {
--p: 83;
}
.aig-q-83 {
--q: 83;
}
.aig-p-84 {
--p: 84;
}
.aig-q-84 {
--q: 84;
}
.aig-p-85 {
--p: 85;
}
.aig-q-85 {
--q: 85;
}
.aig-p-86 {
--p: 86;
}
.aig-q-86 {
--q: 86;
}
.aig-p-87 {
--p: 87;
}
.aig-q-87 {
--q: 87;
}
.aig-p-88 {
--p: 88;
}
.aig-q-88 {
--q: 88;
}
.aig-p-89 {
--p: 89;
}
.aig-q-89 {
--q: 89;
}
.aig-p-90 {
--p: 90;
}
.aig-q-90 {
--q: 90;
}
.aig-p-91 {
--p: 91;
}
.aig-q-91 {
--q: 91;
}
.aig-p-92 {
--p: 92;
}
.aig-q-92 {
--q: 92;
}
.aig-p-93 {
--p: 93;
}
.aig-q-93 {
--q: 93;
}
.aig-p-94 {
--p: 94;
}
.aig-q-94 {
--q: 94;
}
.aig-p-95 {
--p: 95;
}
.aig-q-95 {
--q: 95;
}
.aig-p-96 {
--p: 96;
}
.aig-q-96 {
--q: 96;
}
.aig-p-97 {
--p: 97;
}
.aig-q-97 {
--q: 97;
}
.aig-p-98 {
--p: 98;
}
.aig-q-98 {
--q: 98;
}
.aig-p-99 {
--p: 99;
}
.aig-q-99 {
--q: 99;
}
.aig-p-100 {
--p: 100;
}
.aig-q-100 {
--q: 100;
}
.aig-mono {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: -0.01em;
}
.aig-lbl {
display: block;
margin: 0 0 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* ---- status badges ----------------------------------------------------- */
.aig-badge {
/* geometry, typography and surface come from the shared badge component */
}
.aig-badge i {
font-size: 13px;
}
.aig-badge.is-on {
background: var(--aig-ok-soft);
border-color: rgba(26, 190, 23, 0.28);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.aig-badge.is-warn {
background: var(--tint-warning);
border-color: rgba(234, 179, 0, 0.34);
color: rgb(142.2, 108.7769230769, 0);
}
.aig-badge.is-stop {
background: var(--aig-stop-soft);
border-color: rgba(232, 38, 70, 0.26);
color: var(--aig-stop);
}
.aig-badge.is-accent {
background: var(--tint-primary);
border-color: rgba(74, 0, 229, 0.2);
color: var(--bs-primary);
}
/* a model reference, always in the machine face because it is an identifier */
.aig-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 7px;
background: var(--aig-model-soft);
border: 1px solid rgba(2, 168, 181, 0.3);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
color: rgb(1.2196721311, 102.4524590164, 110.3803278689);
}
.aig-chip i {
font-size: 12px;
}
.aig-chip.is-plain {
background: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
color: var(--bs-emphasis-color);
}
.aig-chip.is-none {
background: transparent;
border-style: dashed;
border-color: var(--aig-border-strong);
color: var(--bs-secondary-color);
}
/* ============================================================
2. CONFIGURATION HERO
============================================================ */
.aig-hero {
position: relative;
padding: 26px 28px;
margin-bottom: 26px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow: hidden;
/* a fine grid, the way a model console suggests a latent space without
drawing a chart */
}
.aig-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(var(--bs-border-color) 1px, transparent 1px), linear-gradient(90deg, var(--bs-border-color) 1px, transparent 1px);
background-size: 34px 34px;
opacity: 0.5;
mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 62%);
-webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 62%);
pointer-events: none;
}
.aig-hero > * {
position: relative;
}
@media (max-width: 575.98px) {
.aig-hero {
padding: 20px;
}
}
.aig-hero-top {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.aig-hero-crest {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
flex-shrink: 0;
border-radius: 17px;
background: var(--bs-primary);
color: #fff;
font-size: 26px;
box-shadow: 0 8px 20px rgba(43, 22, 106, 0.3);
}
.aig-hero-title {
margin: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.aig-hero-title {
font-size: 21px;
}
}
.aig-hero-sub {
margin: 4px 0 0;
max-width: 66ch;
font-size: 13.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
/* the hero's facts, run along one rule and divided by hairlines */
.aig-hero-facts {
display: flex;
flex-wrap: wrap;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--bs-border-color);
}
.aig-hero-fact {
flex: 1 1 0;
min-width: 170px;
padding: 0 20px;
}
.aig-hero-fact:first-child {
padding-left: 0;
}
.aig-hero-fact + .aig-hero-fact {
border-left: 1px solid var(--bs-border-color);
}
.aig-hero-fact span {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.aig-hero-fact strong {
display: flex;
align-items: center;
gap: 7px;
margin-top: 4px;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
@media (max-width: 767.98px) {
.aig-hero-fact {
flex: 1 1 46%;
padding: 10px 14px;
}
.aig-hero-fact:first-child {
padding-left: 14px;
}
.aig-hero-fact + .aig-hero-fact {
border-left: 0;
}
}
.aig-hero-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
}
/* ============================================================
3. STICKY SECTION NAVIGATION
============================================================ */
.aig-nav {
position: sticky;
top: calc(60px + 16px);
max-height: calc(100vh - 60px - 32px);
padding: 10px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
overflow-y: auto;
/* Bootstrap's `.nav` wraps; in a capped-height column that wraps
overflow into a second column instead of scrolling. */
flex-wrap: nowrap;
overflow-x: hidden;
}
.aig-nav > * {
flex-shrink: 0;
}
@media (max-width: 991.98px) {
.aig-nav {
position: static;
max-height: none;
}
}
.aig-nav-link {
position: relative;
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 9px 12px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
font-size: 13.5px;
font-weight: 500;
text-align: left;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.aig-nav-link > i {
flex-shrink: 0;
font-size: 17px;
color: var(--bs-secondary-color);
transition: var(--transition);
}
.aig-nav-link .aig-nav-txt {
flex: 1 1 auto;
min-width: 0;
}
.aig-nav-link .aig-nav-n {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--bs-secondary-color);
}
.aig-nav-link:hover {
background: var(--bs-secondary-bg);
}
.aig-nav-link {
/* the active row is tinted and carries a short accent bar inside its
own rounded edge, rather than a full-height border */
}
.aig-nav-link.active {
background: var(--tint-primary);
color: var(--bs-primary);
font-weight: 600;
}
.aig-nav-link.active > i,
.aig-nav-link.active .aig-nav-n {
color: var(--bs-primary);
}
.aig-nav-link.active::before {
content: "";
position: absolute;
left: 4px;
top: 12px;
bottom: 12px;
width: 3px;
border-radius: 3px;
background: var(--bs-primary);
}
.aig-nav-foot {
margin-top: 10px;
padding: 14px 12px 6px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
4. CONFIGURATION CARDS + SETTING ROWS
============================================================ */
.aig-card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.aig-card:hover {
border-color: var(--aig-border-strong);
box-shadow: var(--shadow-lift);
}
.aig-card-head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px 13px;
border-bottom: 1px solid var(--bs-border-color);
}
.aig-card-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 12px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 19px;
}
.aig-card-ic.is-model {
background: var(--aig-model-soft);
color: rgb(1.2196721311, 102.4524590164, 110.3803278689);
}
.aig-card-ic.is-warn {
background: var(--tint-warning);
color: rgb(142.2, 108.7769230769, 0);
}
.aig-card-ic.is-stop {
background: var(--aig-stop-soft);
color: var(--aig-stop);
}
.aig-card-title {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.aig-card-title + p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.aig-card-body {
flex: 1 1 auto;
padding: 4px 18px 14px;
}
.aig-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 11px 18px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
.aig-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 14px;
padding: 10px 0;
}
.aig-row + .aig-row {
border-top: 1px solid var(--bs-border-color);
}
.aig-row .aig-row-key {
min-width: 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.aig-row .aig-row-key small {
display: block;
margin-top: 2px;
font-size: 11.5px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
.aig-row .aig-row-val {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
@media (max-width: 575.98px) {
.aig-row {
grid-template-columns: minmax(0, 1fr);
}
.aig-row .aig-row-val {
justify-content: flex-start;
}
}
.aig-input,
.aig-select {
min-width: 148px;
padding: 6px 11px;
border-radius: var(--radius-sm);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
font-size: 13px;
font-weight: 400;
color: var(--bs-emphasis-color);
transition: var(--transition);
}
.aig-input:focus,
.aig-select:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
outline: 0;
}
@media (max-width: 575.98px) {
.aig-input,
.aig-select {
min-width: 0;
width: 100%;
}
}
.aig-secret {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border: 1px dashed var(--aig-border-strong);
font-family: var(--font-mono);
font-size: 12px;
color: var(--bs-emphasis-color);
}
.aig-secret i {
font-size: 14px;
color: var(--bs-secondary-color);
}
/* ============================================================
5. PROVIDER CARDS
The endpoint is carried on a dark strip at the head, because a
provider is identified by where it is reached, not by its name.
============================================================ */
.aig-prov {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.aig-prov:hover {
border-color: var(--aig-border-strong);
box-shadow: var(--shadow-lift);
}
.aig-prov.is-default {
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px var(--tint-primary);
}
.aig-prov.is-off .aig-prov-bar,
.aig-prov.is-off .aig-prov-name {
opacity: 0.62;
}
.aig-prov-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--bs-emphasis-color);
font-family: var(--font-mono);
font-size: 10.5px;
color: rgba(255, 255, 255, 0.68);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aig-prov-bar i {
flex-shrink: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
}
.aig-prov-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
}
.aig-prov-top {
display: flex;
align-items: flex-start;
gap: 12px;
}
.aig-prov-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: 13px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 20px;
color: var(--bs-emphasis-color);
}
.aig-prov-name {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.aig-prov-name + p {
margin: 2px 0 0;
font-size: 11.5px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
/* the models this provider makes available, as chips */
.aig-prov-models {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.aig-prov-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
6. MODEL PLATES + CONTEXT RULER
============================================================ */
.aig-model {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.aig-model:hover {
border-color: var(--aig-border-strong);
box-shadow: var(--shadow-lift);
}
.aig-model.is-off {
background: var(--bs-secondary-bg);
}
.aig-model.is-off .aig-model-id {
opacity: 0.66;
}
.aig-model-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px 12px;
}
.aig-model-id {
margin: 0;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bs-emphasis-color);
word-break: break-all;
}
.aig-model-id + p {
margin: 2px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.aig-model-body {
flex: 1 1 auto;
padding: 0 16px 12px;
}
/* ---- context ruler ----------------------------------------------------
A context window is a length, so it is drawn as one: a measured track
with the reserved portion filled and the scale marked beneath. */
.aig-ruler .aig-ruler-track {
position: relative;
height: 10px;
border-radius: 4px;
background: var(--bs-tertiary-bg);
overflow: hidden;
/* what a typical request actually occupies */
}
.aig-ruler .aig-ruler-track span {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--p, 0) * 1%);
background: var(--aig-model);
}
.aig-ruler .aig-ruler-track {
/* the reserve kept for the response */
}
.aig-ruler .aig-ruler-track em {
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--p, 0) * 1%);
width: calc(var(--q, 0) * 1%);
background: repeating-linear-gradient(45deg, rgba(2, 168, 181, 0.34) 0 4px, transparent 4px 8px);
}
.aig-ruler .aig-ruler-scale {
display: flex;
justify-content: space-between;
margin-top: 5px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--bs-secondary-color);
}
.aig-ruler .aig-ruler-meta {
margin-top: 6px;
font-size: 11.5px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
.aig-ruler .aig-ruler-meta b {
font-family: var(--font-mono);
font-weight: 600;
color: var(--bs-emphasis-color);
}
.aig-model-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
padding: 10px 16px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
7. SAMPLING DIALS + TOKEN COLUMN
============================================================ */
/* a parameter with a marked position on its range, not a slider control */
.aig-dial + .aig-dial {
margin-top: 14px;
}
.aig-dial .aig-dial-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
}
.aig-dial .aig-dial-top span {
font-size: 12px;
color: var(--bs-secondary-color);
}
.aig-dial .aig-dial-top b {
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.aig-dial .aig-dial-track {
position: relative;
height: 4px;
border-radius: 999px;
background: var(--bs-tertiary-bg);
/* the marker */
}
.aig-dial .aig-dial-track i {
position: absolute;
top: 50%;
left: calc(var(--p, 0) * 1%);
width: 13px;
height: 13px;
margin: -6.5px 0 0 -6.5px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 3px solid var(--bs-primary);
}
.aig-dial .aig-dial-track {
/* the travelled part of the range */
}
.aig-dial .aig-dial-track::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--p, 0) * 1%);
border-radius: inherit;
background: var(--bs-primary);
}
.aig-dial .aig-dial-ends {
display: flex;
justify-content: space-between;
margin-top: 5px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--bs-secondary-color);
}
/* ---- token column -----------------------------------------------------
A monthly budget read vertically, which keeps the figures beside it and
makes an overspend obvious as height rather than as a number. */
.aig-budget {
display: flex;
align-items: flex-end;
gap: 16px;
}
.aig-column {
position: relative;
flex-shrink: 0;
width: 46px;
height: 132px;
border-radius: 8px;
background: var(--bs-tertiary-bg);
overflow: hidden;
/* used */
}
.aig-column span {
position: absolute;
inset: auto 0 0 0;
height: calc(var(--p, 0) * 1%);
background: var(--bs-primary);
}
.aig-column {
/* the ceiling mark */
}
.aig-column::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: calc(var(--q, 100) * 1%);
height: 2px;
background: var(--aig-stop);
}
.aig-budget-facts {
flex: 1 1 auto;
min-width: 0;
}
.aig-budget-facts div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 5px 0;
font-size: 12.5px;
color: var(--bs-secondary-color);
}
.aig-budget-facts div + div {
border-top: 1px solid var(--bs-border-color);
}
.aig-budget-facts div b {
font-family: var(--font-mono);
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
8. FEATURE ROUTING ROWS
Which feature is answered by which model, and who may see it.
============================================================ */
.aig-feat {
display: grid;
grid-template-columns: 42px minmax(0, 1.3fr) minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 14px 16px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.aig-feat + .aig-feat {
margin-top: 9px;
}
.aig-feat:hover {
border-color: var(--aig-border-strong);
box-shadow: var(--shadow);
}
.aig-feat.is-off {
background: var(--bs-secondary-bg);
}
.aig-feat.is-off .aig-feat-body {
opacity: 0.66;
}
@media (max-width: 1199.98px) {
.aig-feat {
grid-template-columns: 42px minmax(0, 1fr) auto;
}
.aig-feat .aig-feat-route {
grid-column: 2/-1;
}
}
@media (max-width: 575.98px) {
.aig-feat {
grid-template-columns: 42px minmax(0, 1fr);
}
.aig-feat .aig-feat-act {
grid-column: 2/-1;
justify-content: flex-start;
}
}
.aig-feat-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 13px;
background: var(--tint-primary);
color: var(--bs-primary);
font-size: 20px;
}
.aig-feat-body {
min-width: 0;
}
.aig-feat-body strong {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.aig-feat-body p {
margin: 2px 0 0;
font-size: 12px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
/* the routing itself, read as an arrow into a named model */
.aig-feat-route {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.aig-feat-route > i {
font-size: 16px;
color: var(--bs-secondary-color);
}
.aig-feat-act {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
}
/* ============================================================
9. PROMPT TEMPLATES
Shown as the text they are, with the variables picked out and
the system instruction separated from the task.
============================================================ */
.aig-prompt {
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
overflow: hidden;
}
.aig-prompt:hover {
border-color: var(--aig-border-strong);
box-shadow: var(--shadow-lift);
}
.aig-prompt.is-draft .aig-prompt-text {
opacity: 0.68;
}
.aig-prompt-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px 11px;
}
.aig-prompt-name {
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.aig-prompt-name + p {
margin: 1px 0 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* the prompt body, on a recessed surface with a marker rule */
.aig-prompt-text {
margin: 0 16px;
padding: 12px 14px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
border-left: 3px solid var(--bs-primary);
font-size: 12.5px;
line-height: 1.7;
color: var(--bs-emphasis-color);
white-space: pre-line;
}
.aig-prompt-text + .aig-prompt-text {
margin-top: 8px;
border-left-color: var(--aig-model);
}
.aig-prompt-text {
/* the role this segment plays */
}
.aig-prompt-text .aig-prompt-role {
display: block;
margin-bottom: 5px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.aig-prompt-text {
/* a variable filled in at run time */
}
.aig-prompt-text var {
padding: 0 4px;
border-radius: 4px;
background: var(--tint-primary);
font-family: var(--font-mono);
font-size: 11.5px;
font-style: normal;
color: var(--bs-primary);
}
.aig-prompt-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
/* `auto` rather than a fixed gap, so the footer sits on the bottom edge
however short the prompt above it is */
margin-top: auto;
padding: 11px 16px;
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
/* the space between the last prompt segment and the footer */
.aig-prompt-text:last-of-type {
margin-bottom: 14px;
}
/* ============================================================
10. AUTOMATION ROWS + PERMISSION MATRIX
============================================================ */
.aig-auto {
display: grid;
grid-template-columns: 8px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 13px 16px;
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
}
.aig-auto + .aig-auto {
margin-top: 8px;
}
.aig-auto {
/* a rib carrying whether the automation ran cleanly */
}
.aig-auto::before {
content: "";
width: 4px;
height: 28px;
border-radius: 3px;
background: var(--bs-success);
}
.aig-auto.is-warn::before {
background: var(--bs-warning);
}
.aig-auto.is-stop::before {
background: var(--aig-stop);
}
.aig-auto.is-off {
background: var(--bs-secondary-bg);
}
.aig-auto.is-off::before {
background: var(--aig-border-strong);
}
.aig-auto.is-off .aig-auto-body {
opacity: 0.68;
}
@media (max-width: 767.98px) {
.aig-auto {
grid-template-columns: 8px minmax(0, 1fr);
row-gap: 10px;
}
.aig-auto .aig-auto-side {
grid-column: 2/-1;
justify-content: flex-start;
}
}
.aig-auto-body {
min-width: 0;
}
.aig-auto-body strong {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.aig-auto-body span {
display: block;
margin-top: 2px;
font-size: 11.5px;
line-height: 1.55;
color: var(--bs-secondary-color);
}
.aig-auto-side {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
}
/* ---- permission matrix ------------------------------------------------- */
.aig-perm {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(4, 68px);
align-items: center;
gap: 8px;
padding: 10px 0;
}
.aig-perm + .aig-perm {
border-top: 1px solid var(--bs-border-color);
}
.aig-perm.is-head {
padding-bottom: 8px;
border-bottom: 2px solid var(--bs-border-color);
}
.aig-perm.is-head span {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
text-align: center;
color: var(--bs-secondary-color);
}
.aig-perm.is-head span:first-child {
text-align: left;
}
.aig-perm .aig-perm-name {
min-width: 0;
font-size: 13px;
color: var(--bs-emphasis-color);
}
.aig-perm .aig-perm-name small {
display: block;
margin-top: 2px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
@media (max-width: 767.98px) {
.aig-perm {
grid-template-columns: minmax(0, 1fr) repeat(4, 1fr);
gap: 4px;
}
}
.aig-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin: 0 auto;
border-radius: 8px;
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
font-size: 15px;
color: var(--aig-border-strong);
}
.aig-dot.is-yes {
background: var(--aig-ok-soft);
border-color: rgba(26, 190, 23, 0.28);
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.aig-dot.is-limited {
background: var(--tint-warning);
border-color: rgba(234, 179, 0, 0.32);
color: rgb(142.2, 108.7769230769, 0);
}
/* ============================================================
11. PREMIUM ACCORDION + ACTIVITY FLOW
============================================================ */
.aig-acc {
border-radius: var(--radius);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
.aig-acc .accordion-item {
border: 0;
background: var(--bs-body-bg);
}
.aig-acc .accordion-item + .accordion-item {
border-top: 1px solid var(--bs-border-color);
}
.aig-acc .accordion-button {
gap: 11px;
padding: 15px 18px;
background: var(--bs-body-bg);
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
box-shadow: none;
}
.aig-acc .accordion-button::after {
margin-left: 0;
}
.aig-acc .accordion-button:not(.collapsed) {
background: var(--bs-primary);
color: #fff;
}
.aig-acc .accordion-button:not(.collapsed)::after {
filter: invert(1) grayscale(1) brightness(2);
}
.aig-acc .accordion-button:focus {
box-shadow: 0 0 0 3px var(--tint-primary);
}
.aig-acc .accordion-button i {
font-size: 17px;
}
.aig-acc .aig-acc-spacer {
margin-left: auto;
}
.aig-acc .accordion-body {
padding: 6px 18px 18px;
}
/* ---- activity flow ----------------------------------------------------
A rule runs horizontally through the middle of the row and the stages
sit alternately above and below it, which reads as a signal path. */
.aig-flow {
position: relative;
display: flex;
gap: 14px;
padding: 8px 4px;
overflow-x: auto;
scrollbar-width: thin;
/* the rule itself */
}
.aig-flow::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
margin-top: -1px;
background: var(--bs-tertiary-bg);
}
.aig-flow-stage {
position: relative;
flex: 1 0 232px;
padding: 106px 0 0;
/* the node on the rule */
}
.aig-flow-stage::after {
content: "";
position: absolute;
left: 22px;
top: 50%;
width: 13px;
height: 13px;
margin-top: -6.5px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 3px solid var(--bs-tertiary-bg);
z-index: 1;
}
.aig-flow-stage.is-done::after {
background: var(--bs-success);
border-color: var(--bs-success);
}
.aig-flow-stage.is-current::after {
border-color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
.aig-flow-stage {
/* every second stage lifts above the rule instead of hanging below it */
}
.aig-flow-stage:nth-child(even) {
padding: 0 0 106px;
}
@media (max-width: 991.98px) {
.aig-flow-stage {
padding: 106px 0 0;
}
.aig-flow-stage:nth-child(even) {
padding: 106px 0 0;
}
}
.aig-flow-card {
padding: 13px 15px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow);
}
.aig-flow-card h6 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.aig-flow-card time {
display: block;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.aig-flow-card p {
margin: 6px 0 0;
font-size: 12px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
/* ============================================================
12. RECOMMENDATION CARDS
The heading sits in a pill that straddles the top edge.
============================================================ */
.aig-rec {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
margin-top: 14px;
padding: 26px 18px 18px;
border-radius: var(--radius);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
transition: var(--transition);
}
.aig-rec:hover {
box-shadow: var(--shadow-lift);
}
.aig-rec-pill {
position: absolute;
left: 18px;
top: -14px;
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 13px;
border-radius: 999px;
background: var(--bs-primary);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
}
.aig-rec-pill i {
font-size: 13px;
}
.aig-rec-pill.is-model {
background: rgb(1.4426229508, 121.1803278689, 130.5573770492);
}
.aig-rec-pill.is-warn {
background: rgb(172.8, 132.1846153846, 0);
}
.aig-rec-pill.is-ok {
background: rgb(22.2647887324, 162.7042253521, 19.6957746479);
}
.aig-rec-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.aig-rec-txt {
margin: 0;
font-size: 12.5px;
line-height: 1.65;
color: var(--bs-secondary-color);
}
.aig-rec-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--bs-border-color);
}
/* ============================================================
13. OFFCANVAS, PANEL HELPERS, EMPTY STATE
============================================================ */
/* The theme sets `.offcanvas.offcanvas-end { width: auto !important }`; the
workspace has to match on three classes to beat it. */
.offcanvas.offcanvas-end.aig-canvas {
width: 88% !important;
max-width: 1180px !important;
}
.aig-canvas-head {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 24px;
background: var(--bs-primary);
color: #fff;
}
.aig-canvas-head .aig-card-ic {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.aig-canvas-head .offcanvas-title {
color: #fff;
}
.aig-canvas-head p {
color: rgba(255, 255, 255, 0.6);
}
.aig-canvas-head .btn-close {
filter: invert(1) grayscale(1);
opacity: 0.7;
}
.aig-canvas-body {
padding: 22px 24px 30px;
}
.aig-sect + .aig-sect {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--bs-border-color);
}
.aig-sect-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 13px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--bs-emphasis-color);
}
.aig-sect-title i {
font-size: 16px;
color: var(--bs-primary);
}
.aig-check {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.aig-check + .aig-check {
border-top: 1px solid var(--bs-border-color);
}
.aig-check > i {
flex-shrink: 0;
margin-top: 1px;
font-size: 16px;
color: rgb(19.7746478873, 144.5070422535, 17.4929577465);
}
.aig-check.is-warn > i {
color: rgb(142.2, 108.7769230769, 0);
}
.aig-check.is-stop > i {
color: var(--aig-stop);
}
.aig-check span {
display: block;
font-size: 12px;
color: var(--bs-secondary-color);
}
.aig-audit {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 14px;
padding: 11px 0;
}
.aig-audit + .aig-audit {
border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 575.98px) {
.aig-audit {
grid-template-columns: minmax(0, 1fr);
gap: 3px;
}
}
.aig-audit-when {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.aig-audit-when strong {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.aig-audit-what {
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
}
.aig-audit-what span {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ---- empty state ------------------------------------------------------- */
.aig-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
padding: 38px 24px;
border-radius: var(--radius);
background: var(--bs-secondary-bg);
border: 1px dashed var(--aig-border-strong);
}
.aig-empty i {
font-size: 30px;
color: var(--bs-secondary-color);
opacity: 0.8;
}
.aig-empty h6 {
margin: 8px 0 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.aig-empty p {
margin: 0;
max-width: 48ch;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-secondary-color);
}
.aig-empty .btn {
margin-top: 10px;
}
/*===== custom fields =====*/
/*-----------------
Custom Fields — dynamic form configuration components
A shared vocabulary for the Custom Fields & Dynamic Form Configuration
Center: the reusable fields themselves, the modules they are bound to,
the validation that guards them, the layout that arranges them and the
rules that make them move. Class prefix `cfx-`.
The visual language is a low-code field builder, not a settings form.
The pieces are the ones this subject needs and no other page does: a
field plate carrying its type glyph and its machine name in monospace,
a module plate whose field budget is drawn as a split required/optional
bar, a live preview surface drawn on a dotted canvas, validation stated
as rule chips rather than switches, and a rule card written as
when/then.
It borrows nothing from `_settings.scss` or `_ai-settings.scss` — those
govern option lists; this one governs a schema.
Contents
1. Tokens + shared pieces
2. Builder hero
3. Sticky module navigation
4. Module cards
5. Field cards + type glyphs
6. Field preview canvas
7. Validation cards + rule chips
8. Layout / section cards
9. Dynamic rule cards (when → then)
10. Activity timeline
11. Template cards
12. Insight cards
13. Premium accordion + tabs
14. Offcanvas workspace, modals, empty state
-----------------*/
/* ============================================================
1. TOKENS + SHARED PIECES
============================================================ */
:root {
/* A cool slate-cyan, mixed rather than taken straight, so the builder
reads as a schema tool and not as another blue settings page. */
--field-accent: rgb(13.4, 120.88, 140.72);
--field-accent-line: rgb(189.22, 232.38, 235.76);
--field-req: #E82646;
--field-req-soft: #FDE9ED;
--field-opt: #0F65CD;
--field-opt-soft: #E7F1FC;
--field-ok: #1ABE17;
--field-ok-soft: #E8F9E8;
--field-draft: #4A00E5;
--field-draft-soft: rgb(236.9, 229.5, 252.4);
--field-grid: rgb(228.24, 229.68, 233.4);
}
[data-bs-theme=dark] {
--field-accent-line: rgba(2, 168, 181, .34);
--field-grid: rgba(255, 255, 255, .14);
}
/* Small eyebrow label used above every section heading. */
.field-metric-label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
margin-bottom: 4px;
}
/* Machine name of a field / module — always monospace, always selectable. */
.field-key {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
border-radius: 6px;
padding: 1px 6px;
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
/* Status / meta badge. Modifiers colour it; the base is neutral. */
.field-status-badge {
/* geometry, typography and surface come from the shared badge component */
}
.field-status-badge i {
font-size: 12px;
}
.field-status-badge.is-published {
background: var(--field-ok-soft);
color: var(--bs-success);
border-color: transparent;
}
.field-status-badge.is-draft {
background: var(--field-draft-soft);
color: var(--field-draft);
border-color: transparent;
}
.field-status-badge.is-required {
background: var(--field-req-soft);
color: var(--field-req);
border-color: transparent;
}
.field-status-badge.is-optional {
background: var(--field-opt-soft);
color: var(--field-opt);
border-color: transparent;
}
.field-status-badge.is-warn {
background: var(--tint-warning);
color: rgb(172.8, 132.1846153846, 0);
border-color: transparent;
}
.field-status-badge.is-accent {
background: var(--tint-primary);
color: var(--bs-primary);
border-color: transparent;
}
.field-status-badge.is-archived {
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
border-style: dashed;
}
/* Field-type badge — carries the glyph of the input it produces. */
.type {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
padding: 2px 9px 2px 4px;
border-radius: 999px;
background: var(--tint-primary);
color: var(--bs-primary);
white-space: nowrap;
}
.type i {
font-size: 12px;
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--bs-body-bg);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* A split meter: required portion first, optional portion after. */
.field-progress-meter {
height: 6px;
border-radius: 999px;
background: var(--track);
display: flex;
overflow: hidden;
}
.field-progress-meter span {
display: block;
height: 100%;
}
.field-progress-meter span:first-child {
background: var(--field-req);
}
.field-progress-meter span:last-child {
background: var(--field-opt);
}
/* Percentage helpers for the meter and coverage bars. */
/* ============================================================
2. BUILDER HERO
============================================================ */
.hero {
position: relative;
overflow: hidden;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: radial-gradient(120% 160% at 100% 0%, var(--tint-primary) 0%, transparent 58%), var(--bs-body-bg);
padding: 26px 26px 22px;
margin-bottom: 24px;
box-shadow: var(--shadow);
/* The dotted canvas is the signature of this page — a field grid the
builder snaps to, drawn faintly behind the hero content. */
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(var(--field-grid) 1px, transparent 1px);
background-size: 18px 18px;
opacity: 0.35;
pointer-events: none;
}
.hero > * {
position: relative;
}
.hero-top {
display: flex;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
.hero-crest {
width: 54px;
height: 54px;
flex-shrink: 0;
border-radius: var(--radius);
background: var(--bs-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
box-shadow: 0 8px 20px rgba(2, 168, 181, 0.28);
}
.hero-title {
font-size: 26px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1.25;
margin-bottom: 6px;
}
.hero-subtitle {
font-size: 13.5px;
color: var(--bs-secondary-color);
max-width: 74ch;
margin-bottom: 0;
}
/* Hero facts read as a schema summary strip, not as KPI cards. */
.hero-facts {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-top: 22px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
overflow: hidden;
}
.hero-fact {
flex: 1 1 168px;
min-width: 150px;
padding: 13px 16px;
border-right: 1px solid var(--bs-border-color);
}
.hero-fact:last-child {
border-right: 0;
}
.hero-fact span {
display: block;
font-size: 11px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
margin-bottom: 4px;
}
.hero-fact strong {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
font-size: 16px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1.3;
}
.hero-fact small {
font-size: 12px;
font-weight: 400;
color: var(--bs-secondary-color);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
/* ============================================================
3. STICKY MODULE NAVIGATION
============================================================ */
.field-navigation {
position: sticky;
top: 76px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
padding: 8px;
box-shadow: var(--shadow);
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.field-navigation::-webkit-scrollbar {
width: 5px;
}
.field-navigation::-webkit-scrollbar-thumb {
background: var(--track);
border-radius: 999px;
}
.navigation-header {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
padding: 10px 10px 6px;
}
.field-navigation-link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
border: 0;
background: transparent;
color: var(--bs-emphasis-color);
font-size: 13.5px;
font-weight: 500;
padding: 9px 11px;
border-radius: var(--radius-sm);
transition: var(--transition);
}
.field-navigation-link > i {
font-size: 17px;
color: var(--bs-secondary-color);
flex-shrink: 0;
transition: var(--transition);
}
.field-navigation-link .navigation-text {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.field-navigation-link .navigation-n {
font-size: 11px;
font-weight: 600;
color: var(--bs-secondary-color);
background: var(--bs-secondary-bg);
border-radius: 999px;
padding: 1px 7px;
flex-shrink: 0;
}
.field-navigation-link:hover {
background: var(--bs-secondary-bg);
}
.field-navigation-link.active {
background: var(--bs-primary);
color: #fff;
}
.field-navigation-link.active > i,
.field-navigation-link.active .navigation-n {
color: #fff;
}
.field-navigation-link.active .navigation-n {
background: rgba(255, 255, 255, 0.18);
}
.navigation-footer {
border-top: 1px solid var(--bs-border-color);
margin-top: 8px;
padding: 14px 11px 6px;
}
/* Coverage bar in the nav footer. */
.cover {
height: 8px;
border-radius: 999px;
background: var(--track);
overflow: hidden;
margin-bottom: 8px;
}
.cover span {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--bs-primary), var(--field-accent-line));
}
/* ============================================================
4. MODULE CARDS
============================================================ */
.module {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
transition: var(--transition);
overflow: hidden;
}
.module:hover {
border-color: var(--field-accent-line);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.module-header {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 16px 12px;
}
.module-icon {
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 21px;
}
.module-name {
font-size: 15px;
font-weight: 700;
color: var(--bs-emphasis-color);
margin-bottom: 3px;
line-height: 1.3;
}
/* The field budget: total, then the required/optional split beneath it. */
.module-count {
display: flex;
align-items: baseline;
gap: 6px;
padding: 0 16px;
}
.module-count b {
font-size: 26px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1;
}
.module-count span {
font-size: 12px;
color: var(--bs-secondary-color);
}
.module-split {
padding: 10px 16px 0;
}
.module-split .module-legend {
display: flex;
gap: 14px;
margin-top: 8px;
font-size: 12px;
color: var(--bs-secondary-color);
}
.module-split .module-legend span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.module-split .module-legend span::before {
content: "";
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--field-opt);
}
.module-split .module-legend span.is-req::before {
background: var(--field-req);
}
.module-split .module-legend b {
color: var(--bs-emphasis-color);
font-weight: 600;
}
.module-footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
padding: 14px 16px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
font-size: 12px;
color: var(--bs-secondary-color);
}
/* ============================================================
5. FIELD CARDS + TYPE GLYPHS
============================================================ */
.field {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
transition: var(--transition);
cursor: pointer;
/* The drag rail — this is a builder, so a field can be reordered. */
}
.field::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--bs-primary);
opacity: 0;
transition: var(--transition);
}
.field:hover, .field:focus-visible {
border-color: var(--field-accent-line);
box-shadow: var(--shadow-lift);
outline: 0;
}
.field:hover::before, .field:focus-visible::before {
opacity: 1;
}
.field.is-draft {
border-style: dashed;
}
.field.is-archived {
opacity: 0.72;
}
.field-header {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 14px 14px 10px;
}
.field-glyph {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: var(--radius-sm);
border: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
color: var(--bs-emphasis-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
}
.field-name {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 4px;
line-height: 1.35;
}
.field-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 0 14px 12px;
}
.field-footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px;
border-top: 1px solid var(--bs-border-color);
font-size: 12px;
color: var(--bs-secondary-color);
}
/* Type palette — every supported field type as a pickable glyph tile. */
.palette {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
gap: 10px;
}
.field-tile {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 11px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
font-size: 12.5px;
font-weight: 500;
text-align: left;
width: 100%;
transition: var(--transition);
}
.field-tile i {
font-size: 17px;
color: var(--bs-primary);
flex-shrink: 0;
}
.field-tile span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.field-tile:hover {
border-color: var(--field-accent-line);
background: var(--tint-primary);
transform: translateY(-1px);
}
.field-tile.is-active {
border-color: var(--bs-primary);
background: var(--tint-primary);
box-shadow: inset 0 0 0 1px var(--bs-primary);
}
/* ============================================================
6. FIELD PREVIEW CANVAS
============================================================ */
.canvas {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background-color: var(--bs-body-bg);
background-image: radial-gradient(var(--field-grid) 1px, transparent 1px);
background-size: 16px 16px;
padding: 18px;
}
.preview {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
padding: 14px;
box-shadow: var(--shadow);
}
.preview + .preview {
margin-top: 12px;
}
.preview .preview-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 6px;
}
.preview .preview-label .star {
color: var(--field-req);
}
.preview .preview-help {
font-size: 11.5px;
color: var(--bs-secondary-color);
margin: 6px 0 0;
}
/* A dashed slot where the next field will land. */
.slot {
border: 1px dashed var(--border-strong);
border-radius: var(--radius-sm);
background: transparent;
color: var(--bs-secondary-color);
font-size: 12.5px;
font-weight: 500;
padding: 16px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
transition: var(--transition);
}
.slot:hover {
border-color: var(--bs-primary);
color: var(--bs-primary);
background: var(--tint-primary);
}
/* ============================================================
7. VALIDATION CARDS + RULE CHIPS
============================================================ */
.guard {
display: flex;
align-items: flex-start;
gap: 12px;
height: 100%;
padding: 14px;
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--bs-primary);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
transition: var(--transition);
}
.guard:hover {
box-shadow: var(--shadow-lift);
}
.guard.is-req {
border-left-color: var(--field-req);
}
.guard.is-warn {
border-left-color: var(--bs-warning);
}
.guard.is-ok {
border-left-color: var(--bs-success);
}
.guard .guard-icon {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
color: var(--bs-emphasis-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
}
.guard .guard-title {
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 2px;
}
.guard p {
font-size: 12px;
color: var(--bs-secondary-color);
margin-bottom: 0;
}
/* A validation rule stated as an expression. */
.expression {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-emphasis-color);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
border-radius: 6px;
padding: 3px 8px;
margin: 6px 6px 0 0;
}
.expression b {
color: var(--bs-primary);
font-weight: 600;
}
/* ============================================================
8. LAYOUT / SECTION CARDS
============================================================ */
.field-panel {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
}
.field-panel-header {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 16px;
border-bottom: 1px solid var(--bs-border-color);
}
.field-panel-header .field-panel-icon {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
}
.field-panel-header .field-panel-title {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 1px;
}
.field-panel-header p {
font-size: 12px;
color: var(--bs-secondary-color);
margin-bottom: 0;
}
.field-panel-body {
padding: 14px 16px;
flex: 1 1 auto;
}
.field-panel-footer {
padding: 12px 16px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
border-radius: 0 0 var(--radius) var(--radius);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* A key/value line inside any panel. */
.field-info-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px dashed var(--bs-border-color);
}
.field-info-row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.field-info-row:first-child {
padding-top: 0;
}
.field-info-row .field-row-key {
flex: 1 1 auto;
font-size: 13px;
font-weight: 500;
color: var(--bs-emphasis-color);
}
.field-info-row .field-row-key small {
display: block;
font-size: 11.5px;
font-weight: 400;
color: var(--bs-secondary-color);
margin-top: 1px;
}
.field-info-row .field-row-value {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
}
/* A compact column diagram for the layout section. */
.columns {
display: flex;
gap: 6px;
}
.columns span {
flex: 1 1 0;
height: 34px;
border-radius: 6px;
border: 1px dashed var(--border-strong);
background: var(--bs-secondary-bg);
}
.columns.is-active span {
border-style: solid;
border-color: var(--field-accent-line);
background: var(--tint-primary);
}
/* ============================================================
9. DYNAMIC RULE CARDS (WHEN → THEN)
============================================================ */
.field-rule {
height: 100%;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
padding: 15px;
transition: var(--transition);
}
.field-rule:hover {
border-color: var(--field-accent-line);
box-shadow: var(--shadow-lift);
}
.field-rule .rule-top {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 12px;
}
.field-rule .rule-top i {
font-size: 18px;
color: var(--bs-primary);
}
.field-rule .rule-top .rule-title {
flex: 1 1 auto;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 0;
}
.field-clause {
position: relative;
padding: 8px 10px 8px 52px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.field-clause + .field-clause {
margin-top: 6px;
}
.field-clause {
/* WHEN / THEN keyword rendered in the gutter. */
}
.field-clause::before {
content: attr(data-kw);
position: absolute;
left: 10px;
top: 9px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--bs-primary);
}
.field-clause code {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-emphasis-color);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 5px;
padding: 0 4px;
}
/* ============================================================
10. ACTIVITY TIMELINE
============================================================ */
.flow {
position: relative;
padding-left: 30px;
margin: 0;
list-style: none;
}
.flow::before {
content: "";
position: absolute;
left: 11px;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--track);
}
.flow-item {
position: relative;
padding-bottom: 20px;
}
.flow-item:last-child {
padding-bottom: 0;
}
.flow-item::before {
content: "";
position: absolute;
left: -25px;
top: 3px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--bs-body-bg);
border: 2px solid var(--track);
}
.flow-item.is-done::before {
background: var(--bs-success);
border-color: var(--bs-success);
}
.flow-item.is-current::before {
background: var(--bs-primary);
border-color: var(--bs-primary);
box-shadow: 0 0 0 4px var(--tint-primary);
}
.flow-item .flow-title {
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 2px;
}
.flow-item p {
font-size: 12px;
color: var(--bs-secondary-color);
margin-bottom: 0;
}
.flow-item time {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* ============================================================
11. TEMPLATE CARDS
============================================================ */
.field-template {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.field-template:hover {
border-color: var(--field-accent-line);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.field-template {
/* A miniature of the form the template produces. */
}
.field-template .template-thumb {
height: 82px;
padding: 12px 14px;
background-color: var(--tint-primary);
background-image: radial-gradient(var(--field-grid) 1px, transparent 1px);
background-size: 14px 14px;
display: flex;
flex-direction: column;
gap: 6px;
border-bottom: 1px solid var(--bs-border-color);
}
.field-template .template-thumb span {
height: 8px;
border-radius: 3px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
display: block;
}
.field-template .field-template-body {
padding: 14px;
flex: 1 1 auto;
}
.field-template .field-template-title {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 3px;
}
.field-template .template-stats {
display: flex;
gap: 16px;
margin-top: 11px;
}
.field-template .template-stats div {
line-height: 1.2;
}
.field-template .template-stats b {
display: block;
font-size: 16px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.field-template .template-stats span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-secondary-color);
}
.field-template .field-template-footer {
display: flex;
gap: 8px;
padding: 12px 14px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
/* ============================================================
12. INSIGHT CARDS
============================================================ */
.insight {
height: 100%;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
padding: 16px;
}
.insight .insight-top {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 12px;
}
.insight .insight-top i {
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--tint-primary);
color: var(--bs-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.insight .insight-top .insight-title {
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 0;
}
.insight.is-warn .insight-top i {
background: var(--tint-warning);
color: rgb(172.8, 132.1846153846, 0);
}
.insight.is-stop .insight-top i {
background: var(--field-req-soft);
color: var(--field-req);
}
/* A ranked usage line inside an insight card. */
.rank {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
border-bottom: 1px dashed var(--bs-border-color);
}
.rank:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.rank .rank-n {
width: 20px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--bs-secondary-color);
flex-shrink: 0;
}
.rank .rank-name {
flex: 1 1 auto;
font-size: 12.5px;
color: var(--bs-emphasis-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rank .rank-bar {
flex: 0 0 78px;
height: 5px;
border-radius: 999px;
background: var(--track);
overflow: hidden;
}
.rank .rank-bar span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--bs-primary);
}
.rank .rank-v {
flex: 0 0 auto;
font-size: 11.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
/* ============================================================
13. PREMIUM ACCORDION + TABS
============================================================ */
.field-accordion .accordion-item {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius) !important;
background: var(--bs-body-bg);
margin-bottom: 10px;
overflow: hidden;
box-shadow: var(--shadow);
}
.field-accordion .accordion-button {
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
font-size: 13.5px;
font-weight: 600;
padding: 14px 16px;
box-shadow: none;
}
.field-accordion .accordion-button:not(.collapsed) {
background: var(--tint-primary);
color: var(--bs-primary);
}
.field-accordion .accordion-button:focus {
box-shadow: none;
border-color: transparent;
}
.field-accordion .accordion-button::after {
width: 24px;
height: 24px;
background-size: 15px;
}
.field-accordion .accordion-body {
padding: 6px 16px 16px;
font-size: 13px;
color: var(--bs-secondary-color);
}
/* Segmented tabs used inside the offcanvas workspace. */
.segment {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px;
border: 1px solid var(--bs-border-color);
border-radius: 999px;
background: var(--bs-secondary-bg);
}
.segment .nav-link {
border: 0;
border-radius: 999px;
padding: 6px 14px;
font-size: 12.5px;
font-weight: 500;
color: var(--bs-secondary-color);
background: transparent;
transition: var(--transition);
}
.segment .nav-link:hover {
color: var(--bs-emphasis-color);
}
.segment .nav-link.active {
background: var(--bs-body-bg);
color: var(--bs-primary);
box-shadow: var(--shadow);
}
/* ============================================================
14. OFFCANVAS WORKSPACE, MODALS, EMPTY STATE
============================================================ */
.field-detail-panel {
width: 88% !important;
max-width: 1400px;
}
.field-detail-panel .offcanvas-header {
border-bottom: 1px solid var(--bs-border-color);
padding: 16px 22px;
align-items: flex-start;
gap: 14px;
}
.field-detail-panel .offcanvas-body {
padding: 20px 22px 28px;
background: var(--bs-secondary-bg);
}
@media (max-width: 991.98px) {
.field-detail-panel {
width: 100% !important;
}
}
.field-detail-title {
font-size: 19px;
font-weight: 700;
color: var(--bs-emphasis-color);
margin-bottom: 4px;
line-height: 1.3;
}
.field-modal-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.field-modal-icon.is-stop {
background: var(--field-req-soft);
color: var(--field-req);
}
.empty-state {
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
background-color: var(--bs-body-bg);
background-image: radial-gradient(var(--field-grid) 1px, transparent 1px);
background-size: 16px 16px;
padding: 44px 24px;
text-align: center;
}
.empty-state i {
font-size: 32px;
color: var(--bs-secondary-color);
margin-bottom: 10px;
display: block;
}
.empty-state .empty-title {
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 4px;
}
.empty-state p {
font-size: 12.5px;
color: var(--bs-secondary-color);
max-width: 46ch;
margin: 0 auto 14px;
}
/* Section heading shared by every workspace pane. */
.field-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.field-section-header h2 {
font-size: 19px;
font-weight: 700;
color: var(--bs-emphasis-color);
margin-bottom: 3px;
}
.field-section-header p {
font-size: 13px;
color: var(--bs-secondary-color);
margin-bottom: 0;
max-width: 72ch;
}
@media (max-width: 1199.98px) {
.settings-profile .border-start {
border-left: none !important;
padding: 0px !important;
}
}
@media (max-width: 767.98px) {
div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
text-align: start !important;
}
}
/*-----------------
Communications — announcement workspace components
A shared vocabulary for the Announcements & Communication Center: the
announcements themselves, who they go to, the channels that carry them,
what is queued to go out, and the templates they are written from.
Class prefix `cmx-`.
The visual language is a publishing desk. An announcement is treated as
a piece with a cover, a priority rail down its left edge, and a
delivery footer stating which channels carried it and how far it got.
Audience and channel cards are read as delivery instruments — a
recipient count with a read-rate bar underneath — not as dashboard
tiles.
Contents
1. Tokens + shared pieces
2. Announcement cards
3. Audience cards
4. Template cards
5. Schedule cards
6. Channel cards
7. Offcanvas workspace + modals
8. Broadcast scheduler
9. SMS communication center
10. WhatsApp communication center
11. Notification & parent communication center
-----------------*/
/* ============================================================
1. TOKENS + SHARED PIECES
============================================================ */
:root {
/* A deep editorial indigo-blue, distinct from the plain brand blue so
the communication desk reads as its own surface. */
--message-accent: rgb(52.88, 80, 183);
--message-accent-line: rgb(196.8, 206.7, 246);
--message-urgent: #E82646;
--message-urgent-soft: #FDE9ED;
--message-high: #EAB300;
--message-high-soft: #FEF8EA;
--message-normal: #0F65CD;
--message-normal-soft: #E7F1FC;
--message-live: #1ABE17;
--message-live-soft: #E8F9E8;
--message-draft: #4A00E5;
--message-draft-soft: rgb(236.9, 229.5, 252.4);
}
[data-theme=dark],
[data-bs-theme=dark],
html.darkmode {
--message-accent-line: rgba(61, 94, 225, .38);
--message-urgent-soft: rgba(234, 84, 85, 0.18);
--message-high-soft: rgba(255, 159, 67, 0.18);
--message-normal-soft: rgba(0, 207, 232, 0.18);
--message-live-soft: rgba(40, 199, 111, 0.18);
--message-draft-soft: rgba(115, 103, 240, 0.18);
}
[data-theme=dark] .message-status-badge.is-high,
[data-bs-theme=dark] .message-status-badge.is-high,
html.darkmode .message-status-badge.is-high {
color: var(--message-high);
}
.message-metric-label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
margin-bottom: 4px;
}
/* Section heading shared by every block on the page. */
.message-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.message-section-header h2 {
font-size: 20px;
font-weight: 700;
color: var(--bs-emphasis-color);
margin-bottom: 3px;
}
.message-section-header p {
font-size: 13px;
color: var(--bs-secondary-color);
margin-bottom: 0;
max-width: 74ch;
}
/* Status / meta badge. */
.message-status-badge {
/* geometry, typography and surface come from the shared badge component */
}
.message-status-badge i {
font-size: 12px;
}
.message-status-badge.is-live {
background: var(--message-live-soft);
color: var(--message-live);
border-color: transparent;
}
.message-status-badge.is-draft {
background: var(--message-draft-soft);
color: var(--message-draft);
border-color: transparent;
}
.message-status-badge.is-scheduled {
background: var(--message-normal-soft);
color: var(--message-normal);
border-color: transparent;
}
.message-status-badge.is-urgent {
background: var(--message-urgent-soft);
color: var(--message-urgent);
border-color: transparent;
}
.message-status-badge.is-high {
background: var(--message-high-soft);
color: rgb(172.8, 132.1846153846, 0);
border-color: transparent;
}
.message-status-badge.is-accent {
background: var(--tint-primary);
color: var(--bs-primary);
border-color: transparent;
}
.message-status-badge.is-expired {
border-style: dashed;
}
/* Category tag — the subject of the announcement, always plain. */
.category {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--bs-primary);
}
.category::before {
content: "";
width: 6px;
height: 6px;
border-radius: 2px;
background: currentcolor;
}
/* Channel pip — a channel this piece was carried on. */
.pip {
width: 24px;
height: 24px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
border: 1px solid var(--bs-border-color);
}
.pip.is-on {
background: var(--tint-primary);
color: var(--bs-primary);
border-color: transparent;
}
.pip.is-off {
opacity: 0.45;
}
.pips {
display: inline-flex;
gap: 4px;
}
/* Read-rate bar, used on announcement, audience and channel cards. */
.rate {
height: 5px;
border-radius: 999px;
background: var(--track);
overflow: hidden;
}
.rate span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--bs-primary);
}
.rate.is-live span {
background: var(--message-live);
}
.rate.is-warn span {
background: var(--message-high);
}
/* Small key/value line reused inside card bodies. */
.info-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 0;
border-bottom: 1px dashed var(--bs-border-color);
}
.info-row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.info-row:first-child {
padding-top: 0;
}
.info-row .row-key {
flex: 1 1 auto;
font-size: 13px;
font-weight: 500;
color: var(--bs-emphasis-color);
}
.info-row .row-key small {
display: block;
font-size: 11.5px;
font-weight: 400;
color: var(--bs-secondary-color);
margin-top: 1px;
}
.info-row .row-value {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--bs-emphasis-color);
}
/* ============================================================
2. ANNOUNCEMENT CARDS
============================================================ */
.message-post {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.message-post:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.message-post {
/* Priority rail — the one piece of colour on an otherwise calm card. */
}
.message-post::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--message-normal);
z-index: 2;
}
.message-post.is-urgent::before {
background: var(--message-urgent);
}
.message-post.is-high::before {
background: var(--message-high);
}
.message-post.is-draft {
border-style: dashed;
}
.message-post.is-draft::before {
background: var(--message-draft);
}
.post-cover {
position: relative;
display: block;
height: 148px;
overflow: hidden;
background: var(--bs-secondary-bg);
}
.post-cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.message-post:hover .post-cover img {
transform: scale(1.04);
}
.post-cover {
/* Status sits on the cover so the body stays about the content. */
}
.post-cover .post-status {
position: absolute;
top: 10px;
left: 12px;
display: inline-flex;
gap: 5px;
flex-wrap: wrap;
}
.post-cover .post-acknowledgement {
position: absolute;
top: 10px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
padding: 2px 9px;
border-radius: 999px;
background: rgba(20, 20, 43, 0.72);
color: #fff;
backdrop-filter: blur(4px);
}
.post-body {
padding: 14px 16px;
flex: 1 1 auto;
}
.post-body .post-title {
font-size: 15.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
line-height: 1.35;
margin: 6px 0 5px;
}
.post-body .post-title a {
color: inherit;
}
.post-body .post-summary {
font-size: 12.5px;
color: var(--bs-secondary-color);
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Dates and attachments — the practical facts, set apart from the copy. */
.post-facts {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin-top: 12px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.post-facts span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.post-facts b {
color: var(--bs-emphasis-color);
font-weight: 600;
}
.post-reach {
padding: 0 16px 12px;
}
.post-reach .post-reach-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
font-size: 11.5px;
color: var(--bs-secondary-color);
margin-bottom: 5px;
}
.post-reach .post-reach-top b {
color: var(--bs-emphasis-color);
font-weight: 600;
}
.post-footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
padding: 11px 16px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
/* ============================================================
3. AUDIENCE CARDS
============================================================ */
.audience {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
padding: 16px;
transition: var(--transition);
}
.audience:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
}
.audience .audience-top {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 14px;
}
.audience .audience-top .audience-icon {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
}
.audience .audience-top .audience-name {
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 1px;
}
.audience .audience-top small {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.audience .audience-count {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 12px;
}
.audience .audience-count b {
font-size: 24px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1;
}
.audience .audience-count span {
font-size: 12px;
color: var(--bs-secondary-color);
}
.audience .audience-footer {
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed var(--bs-border-color);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* ============================================================
4. TEMPLATE CARDS
============================================================ */
.template {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.template:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.template {
/* A miniature of the notice the template writes. */
}
.template .template-preview {
padding: 14px 16px 12px;
background: var(--tint-primary);
border-bottom: 1px solid var(--bs-border-color);
}
.template .template-preview .template-mini {
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
padding: 10px 12px;
}
.template .template-preview .template-mini b {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 7px;
}
.template .template-preview .template-mini i {
display: block;
height: 6px;
border-radius: 3px;
background: var(--track);
margin-bottom: 5px;
}
.template .template-preview .template-mini i:last-child {
margin-bottom: 0;
}
.template .template-body {
padding: 13px 16px;
flex: 1 1 auto;
}
.template .template-body .template-title {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin: 5px 0 4px;
}
.template .template-body p {
font-size: 12px;
color: var(--bs-secondary-color);
margin-bottom: 0;
}
.template .template-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 11px 16px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* ============================================================
5. SCHEDULE CARDS
============================================================ */
.schedule {
display: flex;
gap: 0;
height: 100%;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.schedule:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
}
.schedule {
/* The date block reads as a tear-off from a desk calendar. */
}
.schedule .schedule-when {
flex: 0 0 92px;
padding: 14px 10px;
text-align: center;
background: var(--tint-primary);
border-right: 1px solid var(--bs-border-color);
display: flex;
flex-direction: column;
justify-content: center;
}
.schedule .schedule-when .schedule-day {
font-size: 26px;
font-weight: 700;
color: var(--bs-primary);
line-height: 1;
}
.schedule .schedule-when .schedule-month {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-primary);
margin-top: 3px;
}
.schedule .schedule-when .schedule-time {
font-size: 11.5px;
color: var(--bs-secondary-color);
margin-top: 7px;
padding-top: 7px;
border-top: 1px dashed var(--border-strong);
}
.schedule .schedule-main {
flex: 1 1 auto;
padding: 13px 15px;
min-width: 0;
}
.schedule .schedule-main .schedule-title {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 4px;
}
.schedule .schedule-meta {
display: flex;
flex-wrap: wrap;
gap: 5px 14px;
margin-top: 10px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.schedule .schedule-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.schedule .schedule-meta b {
color: var(--bs-emphasis-color);
font-weight: 600;
}
/* ============================================================
6. CHANNEL CARDS
============================================================ */
.channel {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
padding: 16px;
transition: var(--transition);
}
.channel:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
}
.channel.is-off {
background: var(--bs-secondary-bg);
}
.channel .channel-top {
display: flex;
align-items: flex-start;
gap: 11px;
margin-bottom: 12px;
}
.channel .channel-top .channel-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.channel .channel-top .channel-name {
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 2px;
}
.channel .channel-top p {
font-size: 11.5px;
color: var(--bs-secondary-color);
margin-bottom: 0;
}
.channel .channel-footer {
margin-top: auto;
padding-top: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border-top: 1px dashed var(--bs-border-color);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* ============================================================
7. OFFCANVAS WORKSPACE + MODALS
============================================================ */
.message-detail-panel {
width: 88% !important;
max-width: 1400px;
}
.message-detail-panel .offcanvas-header {
border-bottom: 1px solid var(--bs-border-color);
padding: 16px 22px;
align-items: flex-start;
gap: 14px;
}
.message-detail-panel .offcanvas-body {
padding: 20px 22px 28px;
background: var(--bs-secondary-bg);
}
@media (max-width: 991.98px) {
.message-detail-panel {
width: 100% !important;
}
}
.detail-title {
font-size: 20px;
font-weight: 700;
color: var(--bs-emphasis-color);
margin-bottom: 5px;
line-height: 1.3;
}
/* A plain panel used to group anything inside the offcanvas or a modal. */
.message-panel {
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
}
.message-panel .message-panel-header {
display: flex;
align-items: center;
gap: 11px;
padding: 13px 16px;
border-bottom: 1px solid var(--bs-border-color);
}
.message-panel .message-panel-header .panel-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.message-panel .message-panel-header .panel-title {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 0;
}
.message-panel .message-panel-body {
padding: 14px 16px;
flex: 1 1 auto;
}
.message-panel .panel-footer {
padding: 11px 16px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
border-radius: 0 0 var(--radius) var(--radius);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* The announcement as the recipient sees it. */
.reader {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
overflow: hidden;
}
.reader .reader-cover {
height: 210px;
}
.reader .reader-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.reader .reader-body {
padding: 20px 22px 24px;
}
.reader .reader-body h3 {
font-size: 22px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1.3;
margin: 8px 0 10px;
}
.reader .reader-body p {
font-size: 13.5px;
line-height: 1.7;
color: var(--bs-secondary-color);
}
.reader .reader-body h6 {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin: 18px 0 8px;
}
.reader .reader-body ul {
padding-left: 18px;
font-size: 13.5px;
line-height: 1.8;
color: var(--bs-secondary-color);
}
/* Attachment row. */
.file {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 11px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
transition: var(--transition);
}
.file + .file {
margin-top: 8px;
}
.file:hover {
border-color: var(--message-accent-line);
}
.file i {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 8px;
background: var(--bs-secondary-bg);
color: var(--bs-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.file .message-file-name {
flex: 1 1 auto;
min-width: 0;
font-size: 12.5px;
font-weight: 500;
color: var(--bs-emphasis-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file .message-file-name small {
display: block;
font-size: 11px;
font-weight: 400;
color: var(--bs-secondary-color);
}
/* Comment thread inside the offcanvas. */
.comment {
display: flex;
gap: 11px;
padding: 12px 0;
border-bottom: 1px dashed var(--bs-border-color);
}
.comment:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.comment img {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.comment .comment-who {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 3px;
}
.comment .comment-who b {
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.comment .comment-who time {
font-size: 11px;
color: var(--bs-secondary-color);
}
.comment p {
font-size: 12.5px;
color: var(--bs-secondary-color);
margin-bottom: 0;
line-height: 1.6;
}
/* Compact related-announcement row. */
.message-related-item {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 0;
border-bottom: 1px dashed var(--bs-border-color);
}
.message-related-item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.message-related-item img {
width: 46px;
height: 40px;
border-radius: 7px;
object-fit: cover;
flex-shrink: 0;
}
.message-related-item .related-text {
flex: 1 1 auto;
min-width: 0;
}
.message-related-item .related-text b {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.message-related-item .related-text small {
font-size: 11px;
color: var(--bs-secondary-color);
}
.message-modal-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
/* ============================================================
8. BROADCAST SCHEDULER
The scheduler shares the badges, pips, rows, panels, reader and
offcanvas above — a broadcast is an announcement that has not left
yet. What it adds is the machinery of *when*: a departure clock on
every card, a recurrence rule stated in words, a per-channel queue,
and an approval that has to clear before the clock matters.
============================================================ */
/* --- Broadcast card ----------------------------------------- */
.broadcast {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.broadcast:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.broadcast {
/* State rail — reads at a glance across a wall of cards. */
}
.broadcast::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--message-normal);
z-index: 2;
}
.broadcast.is-paused::before {
background: var(--message-high);
}
.broadcast.is-draft {
border-style: dashed;
}
.broadcast.is-draft::before {
background: var(--message-draft);
}
.broadcast.is-cancelled {
opacity: 0.72;
}
.broadcast.is-cancelled::before {
background: var(--bs-secondary-color);
}
.broadcast.is-sent::before {
background: var(--message-live);
}
/* The departure block: when this leaves, and from which time zone. */
.broadcast-when {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 15px;
background: var(--tint-primary);
border-bottom: 1px solid var(--bs-border-color);
}
.broadcast-when .clock {
flex: 0 0 auto;
text-align: center;
line-height: 1;
}
.broadcast-when .clock b {
display: block;
font-size: 20px;
font-weight: 700;
color: var(--bs-primary);
}
.broadcast-when .clock span {
display: block;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bs-primary);
margin-top: 4px;
}
.broadcast-when .broadcast-when-text {
flex: 1 1 auto;
min-width: 0;
padding-left: 12px;
border-left: 1px dashed var(--border-strong);
}
.broadcast-when .broadcast-when-text b {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.broadcast-when .broadcast-when-text small {
display: block;
font-size: 11px;
color: var(--bs-secondary-color);
margin-top: 2px;
}
.broadcast-body {
padding: 13px 15px;
flex: 1 1 auto;
}
.broadcast-body .broadcast-title {
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
line-height: 1.35;
margin: 6px 0 5px;
}
.broadcast-body .broadcast-title a {
color: inherit;
}
.broadcast-body .broadcast-description {
font-size: 12.5px;
color: var(--bs-secondary-color);
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.broadcast-facts {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-top: 11px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.broadcast-facts span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.broadcast-facts b {
color: var(--bs-emphasis-color);
font-weight: 600;
}
.broadcast-footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
padding: 11px 15px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
/* --- Recurrence rule, written out --------------------------- */
.recurrence {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
padding: 2px 9px;
border-radius: 999px;
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
border: 1px dashed var(--border-strong);
white-space: nowrap;
}
.recurrence i {
font-size: 12px;
color: var(--bs-primary);
}
.recurrence.is-once {
border-style: solid;
color: var(--bs-secondary-color);
}
/* --- Channel queue meter ------------------------------------ */
.queue {
display: flex;
gap: 3px;
margin-top: 4px;
}
.queue span {
flex: 1 1 0;
height: 18px;
border-radius: 3px;
background: var(--track);
}
.queue span.is-filled {
background: var(--bs-primary);
}
.queue span.is-warn {
background: var(--message-high);
}
.queue span.is-done {
background: var(--message-live);
}
/* --- Schedule state card ------------------------------------ */
.state {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
padding: 15px;
transition: var(--transition);
}
.state:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
}
.state .state-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.state .state-top .state-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.state .state-top .state-name {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 0;
}
.state .state-top .state-n {
font-size: 18px;
font-weight: 700;
color: var(--bs-emphasis-color);
margin-left: auto;
}
.state.is-warn .state-icon {
background: var(--message-high-soft);
color: rgb(172.8, 132.1846153846, 0);
}
.state.is-done .state-icon {
background: var(--message-live-soft);
color: var(--message-live);
}
.state.is-stop .state-icon {
background: var(--message-urgent-soft);
color: var(--message-urgent);
}
.state.is-draft .state-icon {
background: var(--message-draft-soft);
color: var(--message-draft);
}
/* --- Approval card ------------------------------------------ */
.approval {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--message-high);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
padding: 14px;
transition: var(--transition);
}
.approval:hover {
box-shadow: var(--shadow-lift);
}
.approval.is-approved {
border-left-color: var(--message-live);
}
.approval.is-rejected {
border-left-color: var(--message-urgent);
}
.approval.is-scheduled {
border-left-color: var(--message-normal);
}
.approval.is-review {
border-left-color: var(--message-draft);
}
.approval .approval-title {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
line-height: 1.35;
margin-bottom: 8px;
}
.approval .approval-who {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
font-size: 12px;
color: var(--bs-secondary-color);
}
.approval .approval-who img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
.approval .approval-who b {
color: var(--bs-emphasis-color);
font-weight: 600;
}
.approval .approval-footer {
margin-top: auto;
padding-top: 12px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* --- Quick action card -------------------------------------- */
.quick-action {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 100%;
text-align: left;
padding: 15px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
transition: var(--transition);
}
.quick-action i.message-action-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: var(--transition);
}
.quick-action .action-text {
flex: 1 1 auto;
min-width: 0;
}
.quick-action .action-text b {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 2px;
}
.quick-action .action-text small {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.quick-action .message-action-go {
flex: 0 0 auto;
font-size: 16px;
color: var(--bs-secondary-color);
transition: var(--transition);
}
.quick-action:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.quick-action:hover i.message-action-icon {
background: var(--bs-primary);
color: #fff;
}
.quick-action:hover .message-action-go {
color: var(--bs-primary);
transform: translateX(2px);
}
/* ============================================================
9. SMS COMMUNICATION CENTER
SMS is the one channel with a hard budget — 160 characters to a
segment, and every segment costs money and arrives separately. So
the pieces here are built around that constraint: a composer whose
counter is part of the furniture rather than a footnote, merge
fields that are visibly placeholders, a recipient card that reads
as selected or not, and a preview drawn as the handset it lands on.
Everything else — badges, rows, panels, offcanvas, template and
action cards — is reused from the sections above.
============================================================ */
/* --- Composer workspace ------------------------------------- */
.compose {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
}
.compose .compose-header {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 16px;
border-bottom: 1px solid var(--bs-border-color);
}
.compose .compose-header .compose-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--bs-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.compose .compose-header .compose-title {
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 1px;
}
.compose .compose-header p {
font-size: 12px;
color: var(--bs-secondary-color);
margin-bottom: 0;
}
.compose .compose-body {
padding: 16px;
}
.compose .compose-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 13px 16px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
/* The editor surface — a plain field, but framed so it reads as the
message body rather than as one more form input. */
.editor {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
overflow: hidden;
}
.editor .editor-bar {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
padding: 7px 9px;
border-bottom: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
.editor .editor-bar button {
width: 28px;
height: 28px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
transition: var(--transition);
}
.editor .editor-bar button:hover {
background: var(--bs-body-bg);
color: var(--bs-primary);
}
.editor .editor-bar .editor-sep {
width: 1px;
height: 18px;
background: var(--bs-border-color);
margin: 0 4px;
}
.editor textarea.form-control {
border: 0;
border-radius: 0;
resize: vertical;
font-size: 13.5px;
line-height: 1.7;
min-height: 150px;
background-color: transparent !important;
color: var(--bs-emphasis-color);
}
.editor textarea.form-control:focus {
box-shadow: none;
}
/* --- Character / segment counter ---------------------------- */
.counter {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding: 11px 13px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
}
.counter .counter-figure {
line-height: 1.15;
}
.counter .counter-figure b {
display: block;
font-size: 17px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.counter .counter-figure span {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.counter .counter-bar {
flex: 1 1 120px;
min-width: 110px;
}
/* Segment ticks — one block per 160-character segment. */
.segments {
display: flex;
gap: 3px;
}
.segments span {
flex: 1 1 0;
height: 6px;
border-radius: 999px;
background: var(--track);
}
.segments span.is-used {
background: var(--bs-primary);
}
.segments span.is-part {
background: var(--message-accent-line);
}
.segments span.is-over {
background: var(--message-high);
}
/* --- Merge field chip --------------------------------------- */
.merge {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
font-size: 11.5px;
font-weight: 500;
padding: 3px 9px;
border-radius: 6px;
background: var(--tint-primary);
color: var(--bs-primary);
border: 1px solid transparent;
transition: var(--transition);
white-space: nowrap;
}
.merge i {
font-size: 12px;
}
.merge:hover {
border-color: var(--bs-primary);
background: var(--bs-body-bg);
}
.merges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* --- Recipient selection card ------------------------------- */
.pick {
position: relative;
height: 100%;
display: flex;
align-items: flex-start;
gap: 11px;
padding: 14px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
transition: var(--transition);
cursor: pointer;
}
.pick:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
}
.pick {
/* Selected reads through the border and the tick, not a fill — a
wall of filled cards would be unreadable. */
}
.pick.is-picked {
border-color: var(--bs-primary);
box-shadow: inset 0 0 0 1px var(--bs-primary), var(--shadow);
}
.pick.is-picked .pick-icon {
background: var(--bs-primary);
color: #fff;
}
.pick .pick-icon {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
transition: var(--transition);
}
.pick .pick-text {
flex: 1 1 auto;
min-width: 0;
}
.pick .pick-text b {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 2px;
}
.pick .pick-text .pick-n {
font-size: 17px;
font-weight: 700;
color: var(--bs-emphasis-color);
line-height: 1.2;
}
.pick .pick-text .pick-n small {
font-size: 11.5px;
font-weight: 400;
color: var(--bs-secondary-color);
margin-left: 4px;
}
.pick .pick-text .pick-last {
display: block;
font-size: 11px;
color: var(--bs-secondary-color);
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed var(--bs-border-color);
}
.pick .form-check-input {
flex-shrink: 0;
margin-top: 2px;
}
/* --- Upload dropzone ---------------------------------------- */
.dropzone {
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
background: var(--bs-body-bg);
padding: 26px 20px;
text-align: center;
transition: var(--transition);
}
.dropzone:hover {
border-color: var(--bs-primary);
background: var(--tint-primary);
}
.dropzone > i {
display: block;
font-size: 30px;
color: var(--bs-primary);
margin-bottom: 8px;
}
.dropzone b {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 3px;
}
.dropzone p {
font-size: 12px;
color: var(--bs-secondary-color);
margin: 0 auto 12px;
max-width: 44ch;
}
/* --- Mobile message preview --------------------------------- */
.phone {
max-width: 300px;
margin: 0 auto;
/* always a dark bezel/status bar, like a phone's own chrome — not
var(--bs-emphasis-color), which flips light in dark mode and left
white text on a near-white bar; fixed to the colour light mode
already rendered, so light mode is unchanged */
border: 8px solid #202C4B;
border-radius: 28px;
background: var(--bs-secondary-bg);
overflow: hidden;
box-shadow: var(--shadow-lift);
}
.phone .phone-top {
background: #202C4B;
color: #fff;
padding: 4px 14px 10px;
text-align: center;
}
.phone .phone-top b {
display: block;
font-size: 12.5px;
font-weight: 600;
}
.phone .phone-top small {
font-size: 10.5px;
opacity: 0.7;
}
.phone .phone-body {
padding: 14px 12px 18px;
min-height: 190px;
background: var(--bs-secondary-bg);
}
.phone {
/* The message as it lands: a received bubble, tail on the left. */
}
.phone .message-bubble {
position: relative;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 14px 14px 14px 3px;
padding: 10px 12px;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-emphasis-color);
box-shadow: var(--shadow);
}
.phone .message-bubble + .message-bubble {
margin-top: 8px;
}
.phone .message-bubble mark {
background: var(--tint-primary);
color: var(--bs-primary);
padding: 0 3px;
border-radius: 3px;
font-weight: 600;
}
.phone .bubble-time {
display: block;
font-size: 10px;
color: var(--bs-secondary-color);
margin: 5px 0 0 4px;
}
/* --- SMS log card ------------------------------------------- */
.log {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
padding: 14px;
transition: var(--transition);
}
.log:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
}
.log {
/* Delivery outcome as a corner flag rather than a full-width band. */
}
.log::after {
content: "";
position: absolute;
top: 14px;
right: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--message-live);
}
.log.is-failed::after {
background: var(--message-urgent);
}
.log.is-pending::after {
background: var(--message-high);
}
.log.is-queued::after {
background: var(--message-normal);
}
.log .log-title {
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
line-height: 1.35;
margin: 0 18px 8px 0;
}
.log .log-to {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--bs-emphasis-color);
margin-bottom: 10px;
}
.log .log-to i {
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 8px;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.log .log-to small {
display: block;
font-size: 11px;
color: var(--bs-secondary-color);
}
.log {
/* A failure is stated, not hidden behind a status pill. */
}
.log .log-why {
font-size: 11.5px;
color: var(--message-urgent);
background: var(--message-urgent-soft);
border-radius: 6px;
padding: 5px 8px;
margin-top: 8px;
}
.log .log-footer {
margin-top: auto;
padding-top: 11px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
border-top: 1px dashed var(--bs-border-color);
font-size: 11px;
color: var(--bs-secondary-color);
}
/* ============================================================
10. WHATSAPP COMMUNICATION CENTER
A conversation channel rather than a broadcast one, so the centre of
this page is an inbox and a chat, not a composer. Everything already
defined above — badges, rows, panels, template cards, action cards,
dropzone, merge fields, offcanvas — is reused as-is.
The one page-wide change is the accent: `.whatsapp` remaps the accent
tokens to WhatsApp's green, so every shared component picks it up
without a second copy of any rule. Put the class on the content
wrapper, and on the offcanvas and modals, which live outside it.
============================================================ */
.whatsapp {
--message-accent: rgb(35.3, 154.22, 92.82);
--message-accent-line: rgb(167.8, 237.4, 193.8);
}
[data-bs-theme=dark] .whatsapp {
--message-accent: rgb(93.68, 222.44, 141.78);
--message-accent-line: rgba(37, 211, 102, .38);
}
/* --- Conversation inbox ------------------------------------- */
.inbox {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
}
.inbox .inbox-header {
padding: 13px 14px;
border-bottom: 1px solid var(--bs-border-color);
}
.inbox .inbox-list {
flex: 1 1 auto;
overflow-y: auto;
max-height: 560px;
}
.inbox .inbox-list::-webkit-scrollbar {
width: 5px;
}
.inbox .inbox-list::-webkit-scrollbar-thumb {
background: var(--track);
border-radius: 999px;
}
.inbox .inbox-footer {
padding: 11px 14px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
font-size: 11.5px;
color: var(--bs-secondary-color);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* Section label inside the list — Pinned, Today, Earlier. */
.inbox-section {
position: sticky;
top: 0;
z-index: 1;
padding: 7px 14px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--bs-secondary-color);
background: var(--bs-secondary-bg);
border-bottom: 1px solid var(--bs-border-color);
}
/* A single conversation row. */
.thread {
position: relative;
display: flex;
align-items: flex-start;
gap: 11px;
width: 100%;
text-align: left;
padding: 12px 14px;
border: 0;
border-bottom: 1px solid var(--bs-border-color);
background: transparent;
transition: var(--transition);
}
.thread:hover {
background: var(--bs-secondary-bg);
}
.thread {
/* Active thread carries a rail, not a fill, so the avatar and the
preview text keep their contrast. */
}
.thread.is-active {
background: var(--tint-primary);
}
.thread.is-active::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--bs-primary);
}
.thread.is-unread .thread-name, .thread.is-unread .thread-preview {
color: var(--bs-emphasis-color);
font-weight: 600;
}
.thread .thread-avatar {
position: relative;
flex: 0 0 auto;
}
.thread .thread-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.thread .thread-avatar {
/* Presence dot, cut out of the avatar edge. */
}
.thread .thread-avatar::after {
content: "";
position: absolute;
right: -1px;
bottom: -1px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--bs-secondary-color);
border: 2px solid var(--bs-body-bg);
}
.thread .thread-avatar.is-online::after {
background: var(--message-live);
}
.thread .thread-text {
flex: 1 1 auto;
min-width: 0;
}
.thread .thread-top {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 2px;
}
.thread .thread-name {
flex: 1 1 auto;
min-width: 0;
font-size: 13.5px;
font-weight: 500;
color: var(--bs-emphasis-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.thread .thread-time {
flex: 0 0 auto;
font-size: 10.5px;
color: var(--bs-secondary-color);
}
.thread .thread-preview {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--bs-secondary-color);
margin-bottom: 0;
}
.thread .thread-preview span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.thread .thread-preview > i {
flex-shrink: 0;
font-size: 13px;
}
.thread .thread-meta {
display: flex;
align-items: center;
gap: 5px;
margin-top: 6px;
flex-wrap: wrap;
}
.thread .thread-n {
flex: 0 0 auto;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--bs-primary);
color: #fff;
font-size: 10.5px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.thread .thread-pin {
font-size: 13px;
color: var(--bs-secondary-color);
}
/* --- Chat workspace ----------------------------------------- */
.message-chat {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
}
.message-chat .message-chat-header {
display: flex;
align-items: center;
gap: 11px;
padding: 12px 15px;
border-bottom: 1px solid var(--bs-border-color);
}
.message-chat .message-chat-header img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.message-chat .message-chat-header .chat-who {
flex: 1 1 auto;
min-width: 0;
}
.message-chat .message-chat-header .chat-who b {
display: block;
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
line-height: 1.3;
}
.message-chat .message-chat-header .chat-who small {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.message-chat {
/* The canvas carries the faint pattern a messaging app has, so the
bubbles read as a conversation rather than a list of rows. */
}
.message-chat .chat-canvas {
flex: 1 1 auto;
overflow-y: auto;
max-height: 480px;
padding: 18px 16px;
background-color: var(--bs-secondary-bg);
background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
background-size: 22px 22px;
}
.message-chat .chat-canvas::-webkit-scrollbar {
width: 5px;
}
.message-chat .chat-canvas::-webkit-scrollbar-thumb {
background: var(--track);
border-radius: 999px;
}
/* Day divider inside the canvas. */
.message-day {
display: flex;
align-items: center;
justify-content: center;
margin: 4px 0 16px;
}
.message-day span {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bs-secondary-color);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 999px;
padding: 3px 12px;
}
/* --- Message bubble ----------------------------------------- */
.message-message {
display: flex;
margin-bottom: 12px;
}
.message-message .message-in {
max-width: 78%;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 14px 14px 14px 3px;
padding: 9px 12px;
box-shadow: var(--shadow);
}
.message-message .message-in p {
font-size: 13px;
line-height: 1.6;
color: var(--bs-emphasis-color);
margin-bottom: 0;
}
.message-message .message-meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
font-size: 10px;
color: var(--bs-secondary-color);
margin-top: 4px;
/* Read receipt — the double tick, blue once seen. */
}
.message-message .message-meta i.is-read {
color: var(--message-normal);
}
.message-message {
/* Outgoing sits right, tinted, with the tail mirrored. */
}
.message-message.is-out {
justify-content: flex-end;
}
.message-message.is-out .message-in {
background: var(--tint-primary);
border-color: transparent;
border-radius: 14px 14px 3px 14px;
}
.message-message {
/* An outgoing message sent from a registered template is labelled,
because a template send is billed and a session reply is not. */
}
.message-message .message-template {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 600;
color: var(--bs-primary);
margin-bottom: 5px;
}
/* Attachment bubbles: document, voice note and image. */
.message-attachment {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 9px;
background: var(--bs-secondary-bg);
min-width: 210px;
}
.message-attachment > i {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 8px;
background: var(--bs-body-bg);
color: var(--bs-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
}
.message-attachment .attachment-text {
flex: 1 1 auto;
min-width: 0;
font-size: 12px;
font-weight: 500;
color: var(--bs-emphasis-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.message-attachment .attachment-text small {
display: block;
font-size: 10.5px;
font-weight: 400;
color: var(--bs-secondary-color);
}
/* Voice note — a static waveform, not a control. */
.wave {
display: flex;
align-items: center;
gap: 2px;
flex: 1 1 auto;
height: 22px;
}
.wave span {
flex: 1 1 0;
background: var(--message-accent-line);
border-radius: 999px;
min-height: 3px;
}
.wave .h-1 {
height: 25%;
}
.wave .h-2 {
height: 45%;
}
.wave .h-3 {
height: 70%;
}
.wave .h-4 {
height: 100%;
}
.wave .h-5 {
height: 55%;
}
.message-image {
display: block;
width: 190px;
max-width: 100%;
border-radius: 9px;
margin-bottom: 6px;
}
/* --- Composer ----------------------------------------------- */
.composer {
border-top: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
padding: 11px 14px;
}
.composer .composer-row {
display: flex;
align-items: flex-end;
gap: 8px;
}
.composer .composer-row .form-control {
resize: none;
}
.composer .composer-tools {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.composer .composer-tools button {
width: 34px;
height: 34px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--bs-secondary-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
transition: var(--transition);
}
.composer .composer-tools button:hover {
background: var(--bs-secondary-bg);
color: var(--bs-primary);
}
/* Quick reply chip above the composer. */
.quick-reply {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 500;
padding: 4px 11px;
border-radius: 999px;
background: var(--bs-body-bg);
color: var(--bs-emphasis-color);
border: 1px solid var(--bs-border-color);
white-space: nowrap;
transition: var(--transition);
}
.quick-reply i {
font-size: 12px;
color: var(--bs-primary);
}
.quick-reply:hover {
border-color: var(--bs-primary);
background: var(--tint-primary);
}
.qrs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 9px;
}
/* --- Broadcast queue card ----------------------------------- */
.message-quote {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
padding: 14px 14px 14px 17px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
transition: var(--transition);
}
.message-quote:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
}
.message-quote::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
border-radius: var(--radius) 0 0 var(--radius);
background: var(--message-normal);
}
.message-quote.is-draft::before {
background: var(--message-draft);
}
.message-quote.is-processing::before {
background: var(--message-high);
}
.message-quote.is-sent::before, .message-quote.is-delivered::before {
background: var(--message-live);
}
.message-quote.is-failed::before {
background: var(--message-urgent);
}
.message-quote.is-cancelled {
opacity: 0.72;
}
.message-quote.is-cancelled::before {
background: var(--bs-secondary-color);
}
.message-quote .message-quote-title {
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
line-height: 1.35;
margin-bottom: 6px;
}
.message-quote .message-quote-message {
font-size: 12px;
color: var(--bs-secondary-color);
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.message-quote .message-quote-footer {
margin-top: auto;
padding-top: 11px;
border-top: 1px dashed var(--bs-border-color);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
font-size: 11px;
color: var(--bs-secondary-color);
}
/* --- Media library tile ------------------------------------- */
.message-media {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.message-media:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.message-media .media-thumb {
position: relative;
height: 104px;
background: var(--bs-secondary-bg);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--bs-border-color);
}
.message-media .media-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.message-media .media-thumb > i {
font-size: 30px;
color: var(--bs-primary);
}
.message-media .media-thumb .media-kind {
position: absolute;
top: 8px;
left: 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 999px;
background: rgba(20, 20, 43, 0.72);
color: #fff;
backdrop-filter: blur(4px);
}
.message-media .message-media-body {
padding: 11px 12px;
flex: 1 1 auto;
}
.message-media .message-media-body b {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.message-media .message-media-body small {
font-size: 11px;
color: var(--bs-secondary-color);
}
.message-media .media-footer {
display: flex;
gap: 6px;
padding: 10px 12px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
/* ============================================================
11. NOTIFICATION & PARENT COMMUNICATION CENTER
Three channels governed together — email, push and the parent
communications that ride on either. Almost everything is reused from
the sections above: channel cards, audience cards, template cards,
log cards, action cards, panels, rows, badges, dropzone, merge
fields, handset preview and the offcanvas.
What this page adds is the distinction it lives on: delivered is not
read. A notification card states both, stacked, because a 99%
delivery rate against a 40% read rate is the whole story. `.notification`
remaps the accent to a violet so the centre is not mistaken for the
announcements desk; put it on the content wrapper and on the
offcanvas and modals, which sit outside it.
============================================================ */
.notification {
--message-accent: rgb(81.7, 53.8, 150.6);
--message-accent-line: rgb(203.32, 188.02, 230.52);
}
[data-bs-theme=dark] .notification {
--message-accent: rgb(160.76, 132.86, 210.36);
--message-accent-line: rgba(103, 58, 183, .44);
}
/* --- Notification card -------------------------------------- */
.message-note-item {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.message-note-item:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.message-note-item {
/* Priority rail. */
}
.message-note-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--message-normal);
z-index: 2;
}
.message-note-item.is-urgent::before {
background: var(--message-urgent);
}
.message-note-item.is-high::before {
background: var(--message-high);
}
.message-note-item.is-sent::before {
background: var(--message-live);
}
.message-note-item.is-draft {
border-style: dashed;
}
.message-note-item.is-draft::before {
background: var(--message-draft);
}
.message-note-item.is-archived {
opacity: 0.72;
}
.message-note-item.is-archived::before {
background: var(--bs-secondary-color);
}
.message-note-item .note-body {
padding: 14px 15px;
flex: 1 1 auto;
}
.message-note-item .note-title {
font-size: 15px;
font-weight: 600;
color: var(--bs-emphasis-color);
line-height: 1.35;
margin: 6px 0 5px;
}
.message-note-item .note-title a {
color: inherit;
}
.message-note-item .note-description {
font-size: 12.5px;
color: var(--bs-secondary-color);
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.message-note-item .note-facts {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-top: 11px;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.message-note-item .note-facts span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.message-note-item .note-facts b {
color: var(--bs-emphasis-color);
font-weight: 600;
}
.message-note-item {
/* Author line — who sent it is part of the record, not metadata. */
}
.message-note-item .message-note-by {
display: flex;
align-items: center;
gap: 7px;
margin-top: 12px;
padding-top: 11px;
border-top: 1px dashed var(--bs-border-color);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.message-note-item .message-note-by img {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
}
.message-note-item .message-note-by b {
color: var(--bs-emphasis-color);
font-weight: 600;
}
.message-note-item .note-footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
padding: 11px 15px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
/* --- Delivered versus read ---------------------------------- */
.dual {
padding: 0 15px 12px;
}
.dual .dual-row {
display: flex;
align-items: center;
gap: 9px;
}
.dual .dual-row + .dual-row {
margin-top: 6px;
}
.dual .dual-row > span:first-child {
flex: 0 0 62px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.dual .dual-row .dual-bar {
flex: 1 1 auto;
height: 5px;
border-radius: 999px;
background: var(--track);
overflow: hidden;
}
.dual .dual-row .dual-bar span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--message-live);
}
.dual .dual-row {
/* The read bar is deliberately the accent, not green — read is a
different achievement from delivered and should not look like
the same success. */
}
.dual .dual-row.is-read .dual-bar span {
background: var(--bs-primary);
}
.dual .dual-row > b {
flex: 0 0 auto;
font-size: 11.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
min-width: 34px;
text-align: right;
}
/* --- Parent communication card ------------------------------ */
.message-push {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
padding: 15px;
transition: var(--transition);
}
.message-push:hover {
border-color: var(--message-accent-line);
box-shadow: var(--shadow-lift);
}
.message-push .push-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 11px;
}
.message-push .push-top .push-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.message-push .push-top .push-name {
flex: 1 1 auto;
min-width: 0;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 0;
}
.message-push {
/* The message itself, quoted — the point of a communication card is
what it actually says, not its configuration. */
}
.message-push .push-quote {
position: relative;
font-size: 12.5px;
line-height: 1.6;
color: var(--bs-emphasis-color);
background: var(--bs-secondary-bg);
border-radius: var(--radius-sm);
padding: 10px 12px 10px 26px;
margin-bottom: 12px;
}
.message-push .push-quote::before {
content: "“";
position: absolute;
left: 9px;
top: 4px;
font-size: 22px;
line-height: 1;
color: var(--message-accent-line);
}
.message-push .push-footer {
margin-top: auto;
padding-top: 11px;
border-top: 1px dashed var(--bs-border-color);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/*-----------------
Automation — workflow rule components
A shared vocabulary for the Workflow Rules Center: the rules
themselves, the modules they belong to, the trigger that starts
them, the conditions that gate them and the actions they run.
Class prefix `wfx-`.
The visual language is a rule engine, not a flowchart editor. A
workflow is drawn as the sentence it actually is — WHEN something
happens, IF these conditions hold, THEN run these actions — with
the three clauses set apart from each other and the action chain
numbered in the order it executes. Conditions carry their boolean
operator on the connector between them rather than inside a form
control, because AND and OR are the part people misread.
Contents
1. Tokens + shared pieces
2. Workflow rule cards
3. Trigger / condition / action clauses
4. Action chain
5. Category cards
6. Template cards
7. Conditions builder
8. Quick actions
9. Offcanvas, panels and modals
-----------------*/
/* ============================================================
1. TOKENS + SHARED PIECES
============================================================ */
:root {
/* A deep engineered blue-grey, mixed rather than taken straight, so
the automation console reads as machinery rather than as another
communication surface. */
--rule-accent: rgb(22.14, 77.06, 150.4);
--rule-accent-line: rgb(178.2, 205.72, 239);
/* The three clauses each keep their own colour throughout the page. */
--rule-when: #4A00E5;
--rule-when-soft: rgb(238.71, 232.05, 252.66);
--rule-if: #EAB300;
--rule-if-soft: #FEF8EA;
--rule-then: #1ABE17;
--rule-then-soft: #E8F9E8;
--rule-on: #1ABE17;
--rule-on-soft: #E8F9E8;
--rule-stop: #E82646;
--rule-stop-soft: #FDE9ED;
}
[data-bs-theme=dark] {
--rule-accent-line: rgba(15, 101, 205, .4);
--rule-when-soft: rgba(74, 0, 229, .18);
}
.rule-metric-label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
margin-bottom: 4px;
}
.rule-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.rule-section-header h2 {
font-size: 20px;
font-weight: 700;
color: var(--bs-emphasis-color);
margin-bottom: 3px;
}
.rule-section-header p {
font-size: 13px;
color: var(--bs-secondary-color);
margin-bottom: 0;
max-width: 74ch;
}
.rule-status-badge {
/* geometry, typography and surface come from the shared badge component */
}
.rule-status-badge i {
font-size: 12px;
}
.rule-status-badge.is-on {
background: var(--rule-on-soft);
color: var(--rule-on);
border-color: transparent;
}
.rule-status-badge.is-off {
border-style: dashed;
}
.rule-status-badge.is-draft {
background: var(--rule-when-soft);
color: var(--rule-when);
border-color: transparent;
}
.rule-status-badge.is-warn {
background: var(--rule-if-soft);
color: rgb(172.8, 132.1846153846, 0);
border-color: transparent;
}
.rule-status-badge.is-stop {
background: var(--rule-stop-soft);
color: var(--rule-stop);
border-color: transparent;
}
.rule-status-badge.is-accent {
background: var(--tint-primary);
color: var(--bs-primary);
border-color: transparent;
}
/* A field or variable, always monospace and always selectable. */
.key {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-emphasis-color);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
border-radius: 5px;
padding: 1px 6px;
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
/* Priority marker — three stacked bars, filled to the level set. */
.priority {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 12px;
vertical-align: middle;
}
.priority span {
width: 3px;
border-radius: 1px;
background: var(--track);
}
.priority span:nth-child(1) {
height: 5px;
}
.priority span:nth-child(2) {
height: 8px;
}
.priority span:nth-child(3) {
height: 12px;
}
.priority span.is-lit {
background: var(--bs-primary);
}
.priority.is-high span.is-lit {
background: var(--rule-if);
}
.priority.is-critical span.is-lit {
background: var(--rule-stop);
}
.rule-info-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 0;
border-bottom: 1px dashed var(--bs-border-color);
}
.rule-info-row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.rule-info-row:first-child {
padding-top: 0;
}
.rule-info-row .rule-row-key {
flex: 1 1 auto;
font-size: 13px;
font-weight: 500;
color: var(--bs-emphasis-color);
}
.rule-info-row .rule-row-key small {
display: block;
font-size: 11.5px;
font-weight: 400;
color: var(--bs-secondary-color);
margin-top: 1px;
}
.rule-info-row .rule-row-value {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--bs-emphasis-color);
}
/* ============================================================
2. WORKFLOW RULE CARDS
============================================================ */
.rule {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.rule:hover {
border-color: var(--rule-accent-line);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.rule {
/* Live rail. A disabled rule loses it entirely rather than changing
colour — the absence is what should register. */
}
.rule::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--rule-on);
z-index: 2;
}
.rule.is-off {
background: var(--bs-secondary-bg);
}
.rule.is-off::before {
background: transparent;
}
.rule.is-draft {
border-style: dashed;
}
.rule.is-draft::before {
background: var(--rule-when);
}
.rule.is-error::before {
background: var(--rule-stop);
}
.rule .rule-header {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 14px 15px 10px;
}
.rule .rule-header .rule-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.rule .rule-header .rule-name {
font-size: 14.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
line-height: 1.35;
margin-bottom: 3px;
}
.rule .rule-header .rule-name a {
color: inherit;
}
.rule .rule-header .rule-description {
font-size: 12px;
color: var(--bs-secondary-color);
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rule .rule-clauses {
padding: 0 15px;
}
.rule .rule-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
padding: 12px 15px 0;
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.rule .rule-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.rule .rule-meta b {
color: var(--bs-emphasis-color);
font-weight: 600;
}
.rule .rule-by {
display: flex;
align-items: center;
gap: 7px;
margin: 12px 15px 0;
padding-top: 11px;
border-top: 1px dashed var(--bs-border-color);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.rule .rule-by img {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
}
.rule .rule-by b {
color: var(--bs-emphasis-color);
font-weight: 600;
}
.rule .rule-footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
padding: 11px 15px;
margin-top: 12px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
}
/* ============================================================
3. TRIGGER / CONDITION / ACTION CLAUSES
The rule read as a sentence. The keyword sits in the gutter so the
three clauses line up down the left edge of every card on the page.
============================================================ */
.clause {
position: relative;
padding: 7px 10px 7px 54px;
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
font-size: 12.5px;
line-height: 1.5;
color: var(--bs-emphasis-color);
}
.clause + .clause {
margin-top: 5px;
}
.clause::before {
content: attr(data-kw);
position: absolute;
left: 10px;
top: 8px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--bs-primary);
}
.clause.is-when {
background: var(--rule-when-soft);
}
.clause.is-when::before {
color: var(--rule-when);
}
.clause.is-if {
background: var(--rule-if-soft);
}
.clause.is-if::before {
color: rgb(162.6, 124.3820512821, 0);
}
.clause.is-then {
background: var(--rule-then-soft);
}
.clause.is-then::before {
color: var(--rule-then);
}
.clause code {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-emphasis-color);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 5px;
padding: 0 4px;
}
/* ============================================================
4. ACTION CHAIN
============================================================ */
.chain {
list-style: none;
padding: 0;
margin: 0;
counter-reset: wfx-step;
}
.chain li {
position: relative;
counter-increment: wfx-step;
display: flex;
align-items: flex-start;
gap: 11px;
padding: 10px 0;
}
.chain li + li {
border-top: 1px dashed var(--bs-border-color);
}
.chain li {
/* The execution order is the point, so it is numbered rather than
bulleted, and the number is what the eye lands on. */
}
.chain li::before {
content: counter(wfx-step);
flex: 0 0 auto;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--rule-then-soft);
color: var(--rule-then);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.chain li.is-skipped {
opacity: 0.6;
}
.chain li.is-skipped::before {
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
}
.chain li.is-failed::before {
background: var(--rule-stop-soft);
color: var(--rule-stop);
}
.chain .chain-text {
flex: 1 1 auto;
min-width: 0;
}
.chain .chain-text b {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 2px;
}
.chain .chain-text small {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* Compact action pip row, used on the rule cards. */
.actions {
display: inline-flex;
gap: 4px;
}
.actions .rule-action {
width: 24px;
height: 24px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
background: var(--rule-then-soft);
color: var(--rule-then);
}
/* ============================================================
5. CATEGORY CARDS
============================================================ */
.rule-category {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
height: 100%;
text-align: left;
padding: 14px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
transition: var(--transition);
}
.rule-category i.category-icon {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 19px;
transition: var(--transition);
}
.rule-category .category-text {
flex: 1 1 auto;
min-width: 0;
}
.rule-category .category-text b {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 2px;
}
.rule-category .category-text small {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.rule-category .category-n {
flex: 0 0 auto;
font-size: 17px;
font-weight: 700;
color: var(--bs-emphasis-color);
}
.rule-category:hover {
border-color: var(--rule-accent-line);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.rule-category:hover i.category-icon {
background: var(--bs-primary);
color: #fff;
}
.rule-category.is-empty {
border-style: dashed;
}
.rule-category.is-empty .category-n {
color: var(--bs-secondary-color);
}
/* ============================================================
6. TEMPLATE CARDS
============================================================ */
.rule-template {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.rule-template:hover {
border-color: var(--rule-accent-line);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.rule-template .template-header {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 15px;
border-bottom: 1px solid var(--bs-border-color);
}
.rule-template .template-header .template-icon {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
}
.rule-template .template-header .template-name {
flex: 1 1 auto;
min-width: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 0;
}
.rule-template .rule-template-body {
padding: 13px 15px;
flex: 1 1 auto;
}
.rule-template .rule-template-body p {
font-size: 12px;
color: var(--bs-secondary-color);
margin-bottom: 10px;
}
.rule-template .rule-template-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 11px 15px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
/* ============================================================
7. CONDITIONS BUILDER
============================================================ */
.builder {
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
overflow: hidden;
}
.builder .builder-header {
display: flex;
align-items: center;
gap: 11px;
padding: 13px 16px;
border-bottom: 1px solid var(--bs-border-color);
}
.builder .builder-header .builder-icon {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--rule-if-soft);
color: rgb(162.6, 124.3820512821, 0);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
}
.builder .builder-header .builder-title {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 1px;
}
.builder .builder-header p {
font-size: 12px;
color: var(--bs-secondary-color);
margin-bottom: 0;
}
.builder .builder-body {
padding: 16px;
}
.builder .builder-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 12px 16px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
font-size: 12px;
color: var(--bs-secondary-color);
}
/* A condition group — an indented block sharing one boolean operator. */
.group {
position: relative;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-secondary-bg);
padding: 12px 12px 12px 16px;
}
.group + .group {
margin-top: 26px;
}
.group {
/* The bracket down the left edge is what makes the grouping legible
at a glance, which is exactly where nested rules go wrong. */
}
.group::before {
content: "";
position: absolute;
left: 6px;
top: 12px;
bottom: 12px;
width: 2px;
border-radius: 2px;
background: var(--rule-accent-line);
}
.condition {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 8px 10px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius-sm);
background: var(--bs-body-bg);
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.condition .condition-op {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.condition .form-select-sm,
.condition .form-control-sm {
width: auto;
min-width: 120px;
font-size: 12.5px;
}
.condition .condition-x {
margin-left: auto;
border: 0;
background: transparent;
color: var(--bs-secondary-color);
font-size: 15px;
line-height: 1;
padding: 2px;
}
.condition .condition-x:hover {
color: var(--rule-stop);
}
/* The boolean connector between two conditions — a pill on the rule
line, so AND and OR cannot be skimmed past. */
.join {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
}
.join::before, .join::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--bs-border-color);
}
.join .join-pill {
flex: 0 0 auto;
display: inline-flex;
border-radius: 999px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
padding: 2px;
overflow: hidden;
}
.join .join-pill button {
border: 0;
background: transparent;
border-radius: 999px;
padding: 2px 12px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--bs-secondary-color);
transition: var(--transition);
}
.join .join-pill button.is-active {
background: var(--bs-primary);
color: #fff;
}
/* A variable chip, insertable into a condition value. */
.variable {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 11.5px;
padding: 3px 9px;
border-radius: 6px;
background: var(--tint-primary);
color: var(--bs-primary);
border: 1px solid transparent;
transition: var(--transition);
white-space: nowrap;
}
.variable i {
font-size: 12px;
}
.variable:hover {
border-color: var(--bs-primary);
background: var(--bs-body-bg);
}
.vars {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* ============================================================
8. QUICK ACTIONS
============================================================ */
.rule-quick-action {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 100%;
text-align: left;
padding: 15px;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
transition: var(--transition);
}
.rule-quick-action i.rule-action-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: var(--transition);
}
.rule-quick-action .rule-action-text {
flex: 1 1 auto;
min-width: 0;
}
.rule-quick-action .rule-action-text b {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 2px;
}
.rule-quick-action .rule-action-text small {
font-size: 11.5px;
color: var(--bs-secondary-color);
}
.rule-quick-action .rule-action-go {
flex: 0 0 auto;
font-size: 16px;
color: var(--bs-secondary-color);
transition: var(--transition);
}
.rule-quick-action:hover {
border-color: var(--rule-accent-line);
box-shadow: var(--shadow-lift);
transform: translateY(-2px);
}
.rule-quick-action:hover i.rule-action-icon {
background: var(--bs-primary);
color: #fff;
}
.rule-quick-action:hover .rule-action-go {
color: var(--bs-primary);
transform: translateX(2px);
}
/* ============================================================
9. OFFCANVAS, PANELS AND MODALS
============================================================ */
.rule-detail-panel {
width: 88% !important;
max-width: 1400px;
}
.rule-detail-panel .offcanvas-header {
border-bottom: 1px solid var(--bs-border-color);
padding: 16px 22px;
align-items: flex-start;
gap: 14px;
}
.rule-detail-panel .offcanvas-body {
padding: 20px 22px 28px;
background: var(--bs-secondary-bg);
}
@media (max-width: 991.98px) {
.rule-detail-panel {
width: 100% !important;
}
}
.rule-detail-title {
font-size: 20px;
font-weight: 700;
color: var(--bs-emphasis-color);
margin-bottom: 5px;
line-height: 1.3;
}
.rule-panel {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--bs-border-color);
border-radius: var(--radius);
background: var(--bs-body-bg);
box-shadow: var(--shadow);
}
.rule-panel .rule-panel-header {
display: flex;
align-items: center;
gap: 11px;
padding: 13px 16px;
border-bottom: 1px solid var(--bs-border-color);
}
.rule-panel .rule-panel-header .rule-panel-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.rule-panel .rule-panel-header .rule-panel-title {
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 0;
}
.rule-panel .rule-panel-body {
padding: 14px 16px;
flex: 1 1 auto;
}
.rule-panel .rule-panel-footer {
padding: 11px 16px;
border-top: 1px solid var(--bs-border-color);
background: var(--bs-secondary-bg);
border-radius: 0 0 var(--radius) var(--radius);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: var(--bs-secondary-color);
}
/* An execution-history row: one past run, with its outcome. */
.run {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 0;
border-bottom: 1px dashed var(--bs-border-color);
}
.run:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.run > i {
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 8px;
background: var(--rule-on-soft);
color: var(--rule-on);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.run.is-failed > i {
background: var(--rule-stop-soft);
color: var(--rule-stop);
}
.run.is-skipped > i {
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
}
.run .run-text {
flex: 1 1 auto;
min-width: 0;
font-size: 12.5px;
color: var(--bs-emphasis-color);
}
.run .run-text small {
display: block;
font-size: 11px;
color: var(--bs-secondary-color);
}
.run .run-when {
flex: 0 0 auto;
font-size: 11px;
color: var(--bs-secondary-color);
}
/* A dependency edge — this rule feeds, or is fed by, another. */
.dependency {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px dashed var(--bs-border-color);
}
.dependency:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.dependency > i {
font-size: 16px;
color: var(--bs-primary);
flex-shrink: 0;
}
.dependency .dependency-text {
flex: 1 1 auto;
min-width: 0;
}
.dependency .dependency-text b {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--bs-emphasis-color);
}
.dependency .dependency-text small {
font-size: 11px;
color: var(--bs-secondary-color);
}
.rule-modal-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--tint-primary);
color: var(--bs-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.rule-modal-icon.is-stop {
background: var(--rule-stop-soft);
color: var(--rule-stop);
}
.rule-dropzone {
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
background: var(--bs-body-bg);
padding: 26px 20px;
text-align: center;
transition: var(--transition);
}
.rule-dropzone:hover {
border-color: var(--bs-primary);
background: var(--tint-primary);
}
.rule-dropzone > i {
display: block;
font-size: 30px;
color: var(--bs-primary);
margin-bottom: 8px;
}
.rule-dropzone b {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--bs-emphasis-color);
margin-bottom: 3px;
}
.rule-dropzone p {
font-size: 12px;
color: var(--bs-secondary-color);
margin: 0 auto 12px;
max-width: 46ch;
}
/*-----------------
Alumni — community platform components
A shared vocabulary for the Alumni Network Platform: the members
themselves, the chapters they organise into, the mentorship they
offer, the opportunities they post, the events they attend and
the stories the school tells about them. Class prefix `alx-`.
The visual language is a professional community, not a directory.
A member is drawn as a community tile rather than a contact card:
the thing that leads is what they can offer the network — mentor,
recruit, speak — carried as intent pills rather than buried in a
field list. Chapters, opportunities and events each get their own
silhouette so the eye can tell the sections apart while scrolling,
and nothing on the page repeats the shape of a data table.
Contents
1. Tokens + shared pieces
2. Community tiles
3. Chapter cards
4. Career + mentorship rosters
5. Opportunity postings
6. Event cards
7. Spotlight stories
8. Community resources
9. Community actions
10. Offcanvas, panels and modals
-----------------*/
/* ============================================================
1. TOKENS + SHARED PIECES
============================================================ */
:root {
--community-radius: 14px;
--community-radius-sm: 9px;
--community-border: var(--bs-border-color, #E9EDF4);
--community-border-strong: #EDF1F6;
--community-surface: #ffffff;
--community-surface-soft: #F8FAFC;
--community-surface-hover: rgb(247.24, 248.56, 253.8);
--community-text: #202C4B;
--community-muted: #677788;
--community-accent: rgb(68.92, 51.28, 131.16);
--community-accent-soft: rgb(242.84, 239.24, 249.24);
--community-accent-line: rgb(209.4, 195.9, 233.4);
--community-mono: "SFMono-Regular", "Menlo", "Consolas", monospace;
--community-shadow: 0 1px 2px rgba(17, 24, 39, .05);
--community-shadow-lift: 0 10px 28px rgba(17, 24, 39, .10);
--community-ease: .18s cubic-bezier(.4, 0, .2, 1);
}
/* Sticky toolbar shell — rides just under the fixed 60px layout header.
Released below lg, where the header itself stops being fixed. */
.toolbar-sticky {
position: sticky;
top: 64px;
z-index: 4;
}
@media (max-width: 991.98px) {
.toolbar-sticky {
position: static;
}
}
/* Section heading — a rule that runs out from the label */
.section-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.section-header .section-title {
font-size: 18px;
font-weight: 600;
color: var(--community-text);
margin: 0;
white-space: nowrap;
}
.section-header .section-subtitle {
font-size: 13px;
color: var(--community-muted);
margin: 2px 0 0;
}
.section-header .section-rule {
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, var(--community-border) 0%, transparent 100%);
}
/* Micro label */
.metric-label {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--community-muted);
margin-bottom: 3px;
}
/* Skill / interest chip */
.member-tag {
display: inline-flex;
align-items: center;
gap: 5px;
height: 24px;
padding: 0 9px;
border-radius: 999px;
border: 1px solid var(--community-border);
background: var(--community-surface-soft);
font-size: 11.5px;
font-weight: 500;
color: var(--community-text);
}
.member-tag i {
font-size: 13px;
color: var(--community-muted);
}
.member-tag.is-accent {
border-color: var(--community-accent-line);
background: var(--community-accent-soft);
color: var(--community-accent);
}
.member-tag.is-accent i {
color: currentcolor;
}
/* Status badge */
.status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
background: var(--community-surface-soft);
color: var(--community-muted);
}
.status-badge i {
font-size: 12px;
}
.status-badge.is-open {
background: rgb(227.52, 247.2, 227.16);
color: rgb(27.56, 152.04, 36.52);
}
.status-badge.is-soon {
background: rgb(252.06, 244.36, 219.3);
color: rgb(149.16, 122.3, 31.5);
}
.status-badge.is-closed {
background: rgb(252.7, 233.3, 236.5);
color: rgb(176, 39.68, 71.4);
}
.status-badge.is-accent {
background: var(--community-accent-soft);
color: var(--community-accent);
}
.status-badge.is-featured {
background: var(--community-accent);
color: #ffffff;
}
/* Avatar stack — who else is here */
.avatar-stack {
display: flex;
align-items: center;
}
.avatar-stack img,
.avatar-stack span.more {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid var(--community-surface);
margin-left: -8px;
object-fit: cover;
}
.avatar-stack img:first-child,
.avatar-stack span.more:first-child {
margin-left: 0;
}
.avatar-stack span.more {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--community-surface-soft);
color: var(--community-muted);
font-size: 10px;
font-weight: 700;
}
/* Capacity meter — a fill bar, deliberately not a chart */
.progress-meter {
height: 5px;
border-radius: 999px;
background: var(--community-surface-soft);
overflow: hidden;
}
.progress-meter span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--community-accent);
}
.progress-meter.is-warm span {
background: #EAB300;
}
.progress-meter.is-full span {
background: #E82646;
}
/* ============================================================
2. COMMUNITY TILES
============================================================ */
.tile {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--community-border);
border-radius: var(--community-radius);
background: var(--community-surface);
box-shadow: var(--community-shadow);
overflow: hidden;
width: 100%;
transition: box-shadow var(--community-ease), border-color var(--community-ease), transform var(--community-ease);
}
.tile:hover {
border-color: var(--community-accent-line);
box-shadow: var(--community-shadow-lift);
transform: translateY(-2px);
}
/* Identity band — cover strip the avatar sits across */
.tile-band {
position: relative;
height: 62px;
background: linear-gradient(135deg, var(--community-accent) 0%, #524ccc 100%);
/* A faint grid so the band reads as texture, not a colour block */
}
.tile-band::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 22px 22px;
}
.tile-band .tile-batch {
position: absolute;
top: 10px;
right: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 9px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.34);
color: #ffffff;
font-family: var(--community-mono);
font-size: 11px;
font-weight: 600;
}
.tile-identity {
position: relative;
display: flex;
align-items: flex-end;
gap: 12px;
padding: 0 16px;
margin-top: -26px;
/* Lets the name and role ellipsis instead of forcing the flex row wider */
}
.tile-identity > div {
min-width: 0;
}
.tile-identity .tile-avatar {
position: relative;
flex-shrink: 0;
width: 62px;
height: 62px;
border-radius: 14px;
border: 3px solid var(--community-surface);
object-fit: cover;
background: var(--community-surface-soft);
}
.tile-identity .tile-dot {
position: absolute;
left: 62px;
bottom: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--community-surface);
background: #1ABE17;
}
.tile-identity .tile-name {
font-size: 15.5px;
font-weight: 600;
color: var(--community-text);
margin: 0 0 1px;
}
.tile-identity .tile-name a {
color: inherit;
}
.tile-identity .tile-name a:hover {
color: var(--community-accent);
}
.tile-identity .tile-role {
font-size: 12.5px;
color: var(--community-muted);
margin: 0;
padding-bottom: 3px;
}
.tile-body {
flex: 1 1 auto;
padding: 14px 16px 0;
}
/* Company / industry / country facts, three to a row */
.tile-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--community-border);
border-radius: var(--community-radius-sm);
background: var(--community-surface-soft);
margin-bottom: 12px;
}
.tile-facts p {
margin: 0;
font-size: 12.5px;
font-weight: 500;
color: var(--community-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Intent pills — what this member offers the network */
.intents {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.intent {
display: inline-flex;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 10px;
border-radius: 7px;
border: 1px dashed var(--community-border-strong);
background: transparent;
color: var(--community-muted);
font-size: 11.5px;
font-weight: 600;
}
.intent i {
font-size: 14px;
}
.intent {
/* Solid + coloured only when the member has actually opted in, so a
scan of the grid reads availability without reading any labels. */
}
.intent.is-on {
border-style: solid;
}
.intent.is-on.is-mentor {
border-color: rgb(154.24, 226.4, 152.92);
background: rgb(232.1, 248.5, 231.8);
color: rgb(27.68, 149.12, 37.56);
}
.intent.is-on.is-recruit {
border-color: rgb(149.4, 187.24, 233);
background: rgb(231, 239.6, 250);
color: rgb(19.76, 85.04, 168.6);
}
.intent.is-on.is-speak {
border-color: rgb(245.76, 221.56, 142.8);
background: rgb(252.06, 244.36, 219.3);
color: rgb(141.08, 116.9, 34.5);
}
/* Achievement line */
.tile-note {
display: flex;
align-items: flex-start;
gap: 7px;
font-size: 12.5px;
color: var(--community-muted);
margin-bottom: 12px;
}
.tile-note i {
flex-shrink: 0;
margin-top: 1px;
font-size: 15px;
color: #EAB300;
}
.tile-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 16px;
border-top: 1px solid var(--community-border);
background: rgb(251.78, 252.7, 253.62);
}
.tile-footer .tile-connections {
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
color: var(--community-muted);
}
/* Compact icon button used across footers */
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid var(--community-border);
background: var(--community-surface);
color: var(--community-muted);
transition: all var(--community-ease);
}
.icon-button i {
font-size: 15px;
}
.icon-button:hover {
border-color: var(--community-accent-line);
background: var(--community-accent-soft);
color: var(--community-accent);
}
/* ============================================================
3. CHAPTER CARDS
============================================================ */
.chapter {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
padding: 16px 16px 14px 20px;
border: 1px solid var(--community-border);
border-radius: var(--community-radius);
background: var(--community-surface);
box-shadow: var(--community-shadow);
transition: box-shadow var(--community-ease), border-color var(--community-ease);
/* Regional rail — the one piece of colour that distinguishes chapters */
}
.chapter::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--chapter-hue, var(--community-accent));
}
.chapter:hover {
border-color: var(--community-accent-line);
box-shadow: var(--community-shadow-lift);
}
.chapter.hue-teal {
--chapter-hue: #02a8b5;
}
.chapter.hue-purple {
--chapter-hue: #4A00E5;
}
.chapter.hue-warning {
--chapter-hue: #EAB300;
}
.chapter.hue-success {
--chapter-hue: #1ABE17;
}
.chapter.hue-info {
--chapter-hue: #0F65CD;
}
.chapter.hue-danger {
--chapter-hue: #E82646;
}
.chapter-header {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 13px;
}
.chapter-header .crest {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 12px;
background: color-mix(in srgb, var(--chapter-hue, var(--community-accent)) 12%, #ffffff);
color: var(--chapter-hue, var(--community-accent));
}
.chapter-header .crest i {
font-size: 21px;
}
.chapter-header h6 {
font-size: 14.5px;
font-weight: 600;
color: var(--community-text);
margin: 0 0 1px;
}
.chapter-header p {
font-size: 12px;
color: var(--community-muted);
margin: 0;
}
/* Meetup strip */
.meetup {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 11px;
border-radius: var(--community-radius-sm);
background: var(--community-surface-soft);
margin-bottom: 12px;
}
.meetup i {
font-size: 16px;
color: var(--chapter-hue, var(--community-accent));
}
.meetup .meetup-text {
font-size: 12.5px;
font-weight: 500;
color: var(--community-text);
line-height: 1.35;
}
.meetup .meetup-text small {
display: block;
font-size: 11px;
font-weight: 400;
color: var(--community-muted);
}
.chapter-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed var(--community-border);
}
.chapter-footer .coordinator {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.chapter-footer .coordinator img {
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
}
.chapter-footer .coordinator span {
font-size: 12px;
color: var(--community-text);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chapter-footer .coordinator small {
display: block;
font-size: 10.5px;
font-weight: 400;
color: var(--community-muted);
}
/* ============================================================
4. CAREER + MENTORSHIP ROSTERS
============================================================ */
.roster {
height: 100%;
width: 100%;
border: 1px solid var(--community-border);
border-radius: var(--community-radius);
background: var(--community-surface);
box-shadow: var(--community-shadow);
overflow: hidden;
}
.roster-header {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 16px;
border-bottom: 1px solid var(--community-border);
}
.roster-header .roster-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--community-accent-soft);
color: var(--community-accent);
}
.roster-header .roster-icon i {
font-size: 19px;
}
.roster-header h6 {
font-size: 14px;
font-weight: 600;
margin: 0 0 1px;
color: var(--community-text);
}
.roster-header p {
font-size: 11.5px;
color: var(--community-muted);
margin: 0;
}
/* One person inside a roster */
.person {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 16px;
border-bottom: 1px solid var(--community-border);
transition: background var(--community-ease);
}
.person:last-child {
border-bottom: 0;
}
.person:hover {
background: var(--community-surface-hover);
}
.person img {
width: 36px;
height: 36px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.person .person-main {
flex: 1 1 auto;
min-width: 0;
}
.person .person-name {
font-size: 13px;
font-weight: 600;
color: var(--community-text);
margin: 0 0 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.person .person-org {
font-size: 11.5px;
color: var(--community-muted);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.person .person-meta {
flex-shrink: 0;
text-align: right;
}
.person .person-meta .years {
display: block;
font-family: var(--community-mono);
font-size: 12px;
font-weight: 600;
color: var(--community-text);
}
.person .person-meta small {
font-size: 10px;
color: var(--community-muted);
}
/* Availability dot + word */
.availability {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
color: var(--community-muted);
}
.availability::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentcolor;
}
.availability.is-free {
color: rgb(27.8, 146.2, 38.6);
}
.availability.is-limited {
color: rgb(137.04, 114.2, 36);
}
.availability.is-busy {
color: #677788;
}
.roster-footer {
padding: 11px 16px;
border-top: 1px solid var(--community-border);
background: rgb(251.78, 252.7, 253.62);
}
/* ============================================================
5. OPPORTUNITY POSTINGS
============================================================ */
.post {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 15px 16px 14px;
border: 1px solid var(--community-border);
border-radius: var(--community-radius);
background: var(--community-surface);
box-shadow: var(--community-shadow);
transition: box-shadow var(--community-ease), border-color var(--community-ease);
}
.post:hover {
border-color: var(--community-accent-line);
box-shadow: var(--community-shadow-lift);
}
/* Category worn on the top edge rather than as another badge in the body */
.post-category {
position: absolute;
top: -1px;
left: 16px;
height: 3px;
width: 46px;
border-radius: 0 0 3px 3px;
background: var(--post-hue, var(--community-accent));
}
.post-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 11px;
}
.post-header h6 {
font-size: 14.5px;
font-weight: 600;
color: var(--community-text);
margin: 0 0 3px;
line-height: 1.35;
}
.post-header .post-org {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--community-muted);
}
.post-header .post-org img {
width: 18px;
height: 18px;
border-radius: 5px;
object-fit: cover;
}
.post-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-bottom: 12px;
font-size: 12px;
color: var(--community-muted);
}
.post-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.post-meta i {
font-size: 14px;
}
/* Deadline strip — the fact that decides whether the card matters */
.deadline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding: 9px 11px;
border-radius: var(--community-radius-sm);
background: var(--community-surface-soft);
font-size: 12px;
}
.deadline .deadline-when {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
color: var(--community-text);
}
.deadline .deadline-when i {
font-size: 15px;
color: var(--community-muted);
}
/* ============================================================
6. EVENT CARDS
============================================================ */
.event {
display: flex;
height: 100%;
width: 100%;
border: 1px solid var(--community-border);
border-radius: var(--community-radius);
background: var(--community-surface);
box-shadow: var(--community-shadow);
overflow: hidden;
transition: box-shadow var(--community-ease), border-color var(--community-ease);
}
.event:hover {
border-color: var(--community-accent-line);
box-shadow: var(--community-shadow-lift);
}
/* Date block — a torn calendar leaf down the left edge */
.event-date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 78px;
padding: 14px 6px;
border-right: 1px solid var(--community-border);
background: linear-gradient(180deg, var(--community-accent-soft) 0%, var(--community-surface) 100%);
}
.event-date .event-day {
font-size: 26px;
font-weight: 700;
line-height: 1;
color: var(--community-accent);
}
.event-date .event-month {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--community-muted);
margin-top: 3px;
}
.event-date .event-time {
font-size: 10.5px;
color: var(--community-muted);
margin-top: 7px;
padding-top: 7px;
border-top: 1px dashed var(--community-border);
width: 100%;
text-align: center;
}
.event-body {
flex: 1 1 auto;
min-width: 0;
padding: 13px 15px;
display: flex;
flex-direction: column;
}
.event-body h6 {
font-size: 14.5px;
font-weight: 600;
color: var(--community-text);
margin: 0 0 4px;
}
.event-body .event-where {
display: flex;
flex-wrap: wrap;
gap: 4px 13px;
font-size: 12px;
color: var(--community-muted);
margin-bottom: 11px;
}
.event-body .event-where span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.event-body .event-where i {
font-size: 14px;
}
.event-seats {
margin-top: auto;
}
.event-seats .seats-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11.5px;
color: var(--community-muted);
margin-bottom: 5px;
}
.event-seats .seats-row b {
color: var(--community-text);
}
.event-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
padding-top: 11px;
border-top: 1px solid var(--community-border);
}
/* ============================================================
7. SPOTLIGHT STORIES
============================================================ */
.spotlight {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--community-radius);
overflow: hidden;
border: 1px solid var(--community-border);
background: var(--community-surface);
box-shadow: var(--community-shadow);
transition: box-shadow var(--community-ease), transform var(--community-ease);
}
.spotlight:hover {
box-shadow: var(--community-shadow-lift);
transform: translateY(-2px);
}
.spotlight-photo {
position: relative;
height: 168px;
overflow: hidden;
}
.spotlight-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.spotlight-photo {
/* Scrim so the ribbon and award stay legible on any photo */
}
.spotlight-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(32, 44, 75, 0.48) 0%, rgba(32, 44, 75, 0) 46%, rgba(32, 44, 75, 0.72) 100%);
}
.spotlight-photo .spotlight-ribbon {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
}
.spotlight-photo .spotlight-award {
position: absolute;
left: 14px;
right: 14px;
bottom: 11px;
z-index: 2;
display: flex;
align-items: center;
gap: 7px;
color: #ffffff;
font-size: 12px;
font-weight: 500;
}
.spotlight-photo .spotlight-award i {
font-size: 16px;
color: #EAB300;
}
.spotlight:hover .spotlight-photo img {
transform: scale(1.04);
}
.spotlight-body {
flex: 1 1 auto;
padding: 14px 16px 0;
}
.spotlight-body h6 {
font-size: 15.5px;
font-weight: 600;
line-height: 1.4;
color: var(--community-text);
margin: 0 0 7px;
}
.spotlight-body p {
font-size: 12.5px;
color: var(--community-muted);
line-height: 1.6;
margin: 0;
}
.spotlight-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 16px;
}
.spotlight-footer .spotlight-who {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.spotlight-footer .spotlight-who img {
width: 32px;
height: 32px;
border-radius: 9px;
object-fit: cover;
}
.spotlight-footer .spotlight-who b {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--community-text);
}
.spotlight-footer .spotlight-who small {
font-size: 11px;
color: var(--community-muted);
}
/* ============================================================
8. COMMUNITY RESOURCES
============================================================ */
/* Rounded glyph tile. Top level rather than nested under .resource because the
offcanvas event rows reuse it outside a resource card. */
.resource-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 11px;
background: var(--community-surface-soft);
color: var(--community-accent);
}
.resource-icon i {
font-size: 20px;
}
.resource {
display: flex;
align-items: center;
gap: 12px;
height: 100%;
padding: 13px 14px;
border: 1px solid var(--community-border);
border-radius: var(--community-radius);
background: var(--community-surface);
box-shadow: var(--community-shadow);
transition: all var(--community-ease);
}
.resource:hover {
border-color: var(--community-accent-line);
background: var(--community-surface-hover);
box-shadow: var(--community-shadow-lift);
}
.resource:hover .resource-go {
color: var(--community-accent);
transform: translateX(2px);
}
.resource .resource-main {
flex: 1 1 auto;
min-width: 0;
}
.resource .resource-main h6 {
font-size: 13.5px;
font-weight: 600;
color: var(--community-text);
margin: 0 0 2px;
}
.resource .resource-main p {
font-size: 11.5px;
color: var(--community-muted);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.resource .resource-go {
flex-shrink: 0;
color: var(--community-muted);
font-size: 17px;
transition: all var(--community-ease);
}
/* ============================================================
9. COMMUNITY ACTIONS
============================================================ */
.action {
position: relative;
display: block;
height: 100%;
padding: 16px 15px 14px;
border: 1px solid var(--community-border);
border-radius: var(--community-radius);
background: var(--community-surface);
box-shadow: var(--community-shadow);
text-align: left;
width: 100%;
transition: all var(--community-ease);
}
.action:hover {
border-color: var(--community-accent);
box-shadow: var(--community-shadow-lift);
transform: translateY(-2px);
}
.action .action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--community-accent-soft);
color: var(--community-accent);
margin-bottom: 11px;
}
.action .action-icon i {
font-size: 19px;
}
.action h6 {
font-size: 13.5px;
font-weight: 600;
color: var(--community-text);
margin: 0 0 3px;
}
.action p {
font-size: 11.5px;
color: var(--community-muted);
line-height: 1.5;
margin: 0;
}
.action .action-go {
position: absolute;
top: 16px;
right: 15px;
color: var(--community-border-strong);
font-size: 16px;
transition: all var(--community-ease);
}
.action:hover .action-go {
color: var(--community-accent);
transform: translateX(2px);
}
/* ============================================================
10. OFFCANVAS, PANELS AND MODALS
============================================================ */
.detail-panel {
width: 88%;
}
@media (max-width: 991.98px) {
.detail-panel {
width: 100%;
}
}
.detail-panel .offcanvas-body {
background: rgb(252.2, 253, 253.8);
}
/* Member header inside the offcanvas */
.detail-identity {
display: flex;
align-items: center;
gap: 14px;
}
.detail-identity img {
width: 56px;
height: 56px;
border-radius: 14px;
object-fit: cover;
}
.detail-identity h5 {
font-size: 17px;
font-weight: 600;
margin: 0 0 2px;
color: var(--community-text);
}
.detail-identity p {
font-size: 12.5px;
color: var(--community-muted);
margin: 0;
}
/* Generic panel used for every block in the offcanvas */
.panel {
border: 1px solid var(--community-border);
border-radius: var(--community-radius);
background: var(--community-surface);
box-shadow: var(--community-shadow);
margin-bottom: 16px;
}
.panel .panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--community-border);
}
.panel .panel-header h6 {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 600;
color: var(--community-text);
margin: 0;
}
.panel .panel-header h6 i {
font-size: 16px;
color: var(--community-accent);
}
.panel .panel-body {
padding: 14px 16px;
}
.panel .panel-body.is-flush {
padding: 0;
}
/* Definition rows — profile and education facts */
.facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
}
.facts .fact p {
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--community-text);
}
/* Professional journey — stacked posting blocks, not a timeline */
.journey .job {
display: flex;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--community-border);
}
.journey .job:last-child {
border-bottom: 0;
}
.journey .job .job-logo {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 10px;
border: 1px solid var(--community-border);
background: var(--community-surface-soft);
color: var(--community-muted);
}
.journey .job .job-logo i {
font-size: 18px;
}
.journey .job h6 {
font-size: 13px;
font-weight: 600;
color: var(--community-text);
margin: 0 0 2px;
}
.journey .job .job-org {
font-size: 12px;
color: var(--community-muted);
margin: 0 0 4px;
}
.journey .job .job-span {
font-family: var(--community-mono);
font-size: 11px;
color: var(--community-muted);
white-space: nowrap;
margin-left: auto;
flex-shrink: 0;
}
.journey .job.is-current .job-logo {
border-color: var(--community-accent-line);
background: var(--community-accent-soft);
color: var(--community-accent);
}
/* Achievement rows */
.award {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 0;
border-bottom: 1px dashed var(--community-border);
}
.award:first-child {
padding-top: 0;
}
.award:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.award i {
flex-shrink: 0;
margin-top: 1px;
font-size: 17px;
color: #EAB300;
}
.award b {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--community-text);
}
.award small {
font-size: 11.5px;
color: var(--community-muted);
}
/* Community participation counters, no card chrome */
.tally {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
gap: 1px;
background: var(--community-border);
border-radius: var(--community-radius-sm);
overflow: hidden;
}
.tally .tally-cell {
padding: 12px 10px;
background: var(--community-surface);
text-align: center;
}
.tally .tally-cell b {
display: block;
font-size: 19px;
font-weight: 700;
color: var(--community-text);
line-height: 1.15;
}
.tally .tally-cell small {
font-size: 11px;
color: var(--community-muted);
}
/* Gallery thumbs */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 8px;
}
.gallery img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: var(--community-radius-sm);
border: 1px solid var(--community-border);
}
/* Social links */
.social {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.social a {
display: inline-flex;
align-items: center;
gap: 7px;
height: 32px;
padding: 0 12px;
border-radius: 8px;
border: 1px solid var(--community-border);
background: var(--community-surface-soft);
font-size: 12px;
font-weight: 500;
color: var(--community-text);
transition: all var(--community-ease);
}
.social a i {
font-size: 15px;
color: var(--community-muted);
}
.social a:hover {
border-color: var(--community-accent-line);
background: var(--community-accent-soft);
color: var(--community-accent);
}
.social a:hover i {
color: currentcolor;
}
/* Note entries */
.note-item {
padding: 11px 12px;
border-radius: var(--community-radius-sm);
background: var(--community-surface-soft);
border: 1px solid var(--community-border);
margin-bottom: 9px;
}
.note-item:last-child {
margin-bottom: 0;
}
.note-item p {
font-size: 12.5px;
color: var(--community-text);
line-height: 1.55;
margin: 0 0 6px;
}
.note-item .note-by {
font-size: 11px;
color: var(--community-muted);
}
/* Related alumni rows */
.related-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
border-bottom: 1px solid var(--community-border);
transition: background var(--community-ease);
}
.related-item:last-child {
border-bottom: 0;
}
.related-item:hover {
background: var(--community-surface-hover);
}
.related-item img {
width: 34px;
height: 34px;
border-radius: 9px;
object-fit: cover;
}
.related-item .related-main {
flex: 1 1 auto;
min-width: 0;
}
.related-item .related-main b {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--community-text);
}
.related-item .related-main small {
font-size: 11px;
color: var(--community-muted);
}
/* Modal header icon */
.modal-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--community-accent-soft);
color: var(--community-accent);
margin-right: 11px;
}
.modal-icon i {
font-size: 18px;
}
/* ============================================================
DARK THEME
============================================================ */
[data-theme=dark],
[data-bs-theme=dark] {
--community-border: #2c3448;
--community-border-strong: #3a4459;
--community-surface: #1f2536;
--community-surface-soft: #262d40;
--community-surface-hover: #2a3145;
--community-text: #e6e9f2;
--community-muted: #9aa3b8;
--community-accent: rgb(175.96, 152.56, 217.56);
--community-accent-soft: rgba(103, 58, 183, .18);
--community-accent-line: rgba(103, 58, 183, .42);
--community-shadow: 0 1px 2px rgba(0, 0, 0, .32);
--community-shadow-lift: 0 10px 28px rgba(0, 0, 0, .42);
}
[data-theme=dark] .tile-footer,
[data-theme=dark] .roster-footer,
[data-bs-theme=dark] .tile-footer,
[data-bs-theme=dark] .roster-footer {
background: #232a3c;
}
[data-theme=dark] .intent,
[data-bs-theme=dark] .intent {
border-color: #3a4459;
}
[data-theme=dark] .detail-panel .offcanvas-body,
[data-bs-theme=dark] .detail-panel .offcanvas-body {
background: #1a2030;
}
[data-theme=dark] .tile-band::after,
[data-bs-theme=dark] .tile-band::after {
background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}
.sticky-item {
position: sticky;
top: 80px;
}
.choices[data-type*=select-multiple] .choices__inner {
padding-top: 3px !important;
padding-left: 10px !important;
}
.timepicker ~ .cal-icon, .datetimepicker ~ .cal-icon {
display: none !important;
}
/*-----------------
Percentage width helpers
Fill widths for meters, coverage bars and progress rails. One shared set
replaces the three identical per-family loops that used to generate
`alx-w-*`, `cmx-w-*` and `cfx-w-*`. Named `width-*` rather than `w-*` so
they cannot collide with Bootstrap's own `.w-25/50/75/100`.
-----------------*/
.width-4 {
width: 4%;
}
.width-8 {
width: 8%;
}
.width-12 {
width: 12%;
}
.width-16 {
width: 16%;
}
.width-18 {
width: 18%;
}
.width-20 {
width: 20%;
}
.width-24 {
width: 24%;
}
.width-28 {
width: 28%;
}
.width-30 {
width: 30%;
}
.width-32 {
width: 32%;
}
.width-36 {
width: 36%;
}
.width-38 {
width: 38%;
}
.width-40 {
width: 40%;
}
.width-44 {
width: 44%;
}
.width-48 {
width: 48%;
}
.width-52 {
width: 52%;
}
.width-56 {
width: 56%;
}
.width-58 {
width: 58%;
}
.width-60 {
width: 60%;
}
.width-64 {
width: 64%;
}
.width-68 {
width: 68%;
}
.width-72 {
width: 72%;
}
.width-76 {
width: 76%;
}
.width-78 {
width: 78%;
}
.width-80 {
width: 80%;
}
.width-84 {
width: 84%;
}
.width-86 {
width: 86%;
}
.width-88 {
width: 88%;
}
.width-92 {
width: 92%;
}
.width-96 {
width: 96%;
}
.width-100 {
width: 100%;
}
#wm-dashboard .welcome-banner .wm-summary-tile {
padding: 0.85rem 0.9rem;
background: var(--bs-body-bg, #fff);
border-color: var(--bs-border-color, #dce2ec);
}
#wm-dashboard .welcome-banner .wm-summary-tile .wm-summary-value {
margin: 0.35rem 0 0.25rem;
font-size: 1.75rem;
font-weight: 700;
line-height: 1.15;
color: var(--bs-heading-color, #202c4b);
font-variant-numeric: tabular-nums;
}
#wm-dashboard .welcome-banner .wm-summary-tile .wm-summary-label {
display: block;
color: var(--bs-heading-color, #202c4b);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.4;
}
#wm-dashboard .welcome-banner .wm-summary-tile .wm-summary-detail {
color: var(--bs-body-color, #45516b);
font-size: 0.75rem;
font-weight: 500;
line-height: 1.4;
text-align: right;
}
#wm-gender .wm-gender-total {
margin: 1.25rem 0;
}
#wm-gender .wm-gender-total h2 {
font-size: 2rem;
line-height: 1.15;
}
#wm-gender .wm-gender-row {
--gender-accent: #3d5ee1;
border: 1px solid var(--bs-border-color);
border-left: 3px solid var(--gender-accent);
border-radius: 0.5rem;
padding: 0.6rem 0.7rem;
margin-bottom: 0.6rem;
}
#wm-gender .wm-gender-row:last-child {
margin-bottom: 0;
}
#wm-gender .wm-gender-row.wm-gender-danger {
--gender-accent: #ec4899;
}
#wm-gender .wm-gender-row.wm-gender-purple {
--gender-accent: #6500ff;
}
#wm-gender .wm-gender-row h6, #wm-gender .wm-gender-row .wm-gender-value {
color: var(--bs-heading-color, #202c4b);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.4;
}
#wm-gender .wm-gender-row .avatar {
color: var(--gender-accent) !important;
background: color-mix(in srgb, var(--gender-accent) 8%, transparent) !important;
}
#wm-gender .wm-gender-row .progress {
height: 6px;
}
#wm-gender .wm-gender-row .progress-bar {
background-color: var(--gender-accent) !important;
}
#wm-gender .apexcharts-text, #wm-gender .apexcharts-legend-text {
font-family: inherit !important;
}
#wm-gender .apexcharts-yaxis-label {
fill: var(--bs-secondary-color, #6a7287);
font-size: 12px;
font-weight: 400;
}
#wm-gender .apexcharts-legend-text {
color: var(--bs-heading-color, #202c4b) !important;
font-size: 12px !important;
}
#wm-kit-chart .apexcharts-tooltip, #wm-kit-chart .apexcharts-tooltip .apexcharts-tooltip-text, #wm-kit-chart .apexcharts-tooltip .apexcharts-tooltip-text * {
color: #fff !important;
}
#wm-dashboard .wm-card-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding: 0.25rem 0;
font-weight: 500;
}
.wm-sidebar-swatch.wm-sidebar-light {
background: #f8faff;
}
html[data-sidebar=light] .sidebar {
background: #f8faff !important;
}
html[data-sidebar=light] .sidebar .sidebar-inner, html[data-sidebar=light] .sidebar .sidebar-menu, html[data-sidebar=light] .sidebar .mui-side-footer {
background: transparent !important;
}
html[data-sidebar=light] .sidebar .sidebar-menu nav a {
color: #45516b;
}
html[data-sidebar=light] .sidebar .sidebar-menu nav a.active {
color: #3d5ee1;
background: #fff;
}
html[data-sidebar=light] .sidebar .submenu-hdr, html[data-sidebar=light] .sidebar .mui-brand-sub {
color: #65718a;
}
html[data-sidebar=light] .sidebar .mui-brand-card, html[data-sidebar=light] .sidebar .mui-side-user {
background: #fff;
color: #202c4b;
}
html[data-sidebar=light] .sidebar .mui-brand-name, html[data-sidebar=light] .sidebar .mui-su-name {
color: #202c4b;
}
.wm-sidebar-swatch.wm-sidebar-ice {
background: #edf6ff;
}
html[data-sidebar=ice] .sidebar {
background: #edf6ff !important;
}
html[data-sidebar=ice] .sidebar .sidebar-inner, html[data-sidebar=ice] .sidebar .sidebar-menu, html[data-sidebar=ice] .sidebar .mui-side-footer {
background: transparent !important;
}
html[data-sidebar=ice] .sidebar .sidebar-menu nav a {
color: #45516b;
}
html[data-sidebar=ice] .sidebar .sidebar-menu nav a.active {
color: #3d5ee1;
background: #fff;
}
html[data-sidebar=ice] .sidebar .submenu-hdr, html[data-sidebar=ice] .sidebar .mui-brand-sub {
color: #65718a;
}
html[data-sidebar=ice] .sidebar .mui-brand-card, html[data-sidebar=ice] .sidebar .mui-side-user {
background: #fff;
color: #202c4b;
}
html[data-sidebar=ice] .sidebar .mui-brand-name, html[data-sidebar=ice] .sidebar .mui-su-name {
color: #202c4b;
}
.wm-sidebar-swatch.wm-sidebar-mint {
background: #edfaf5;
}
html[data-sidebar=mint] .sidebar {
background: #edfaf5 !important;
}
html[data-sidebar=mint] .sidebar .sidebar-inner, html[data-sidebar=mint] .sidebar .sidebar-menu, html[data-sidebar=mint] .sidebar .mui-side-footer {
background: transparent !important;
}
html[data-sidebar=mint] .sidebar .sidebar-menu nav a {
color: #45516b;
}
html[data-sidebar=mint] .sidebar .sidebar-menu nav a.active {
color: #3d5ee1;
background: #fff;
}
html[data-sidebar=mint] .sidebar .submenu-hdr, html[data-sidebar=mint] .sidebar .mui-brand-sub {
color: #65718a;
}
html[data-sidebar=mint] .sidebar .mui-brand-card, html[data-sidebar=mint] .sidebar .mui-side-user {
background: #fff;
color: #202c4b;
}
html[data-sidebar=mint] .sidebar .mui-brand-name, html[data-sidebar=mint] .sidebar .mui-su-name {
color: #202c4b;
}
.wm-sidebar-swatch.wm-sidebar-lavender {
background: #f3f0fc;
}
html[data-sidebar=lavender] .sidebar {
background: #f3f0fc !important;
}
html[data-sidebar=lavender] .sidebar .sidebar-inner, html[data-sidebar=lavender] .sidebar .sidebar-menu, html[data-sidebar=lavender] .sidebar .mui-side-footer {
background: transparent !important;
}
html[data-sidebar=lavender] .sidebar .sidebar-menu nav a {
color: #45516b;
}
html[data-sidebar=lavender] .sidebar .sidebar-menu nav a.active {
color: #3d5ee1;
background: #fff;
}
html[data-sidebar=lavender] .sidebar .submenu-hdr, html[data-sidebar=lavender] .sidebar .mui-brand-sub {
color: #65718a;
}
html[data-sidebar=lavender] .sidebar .mui-brand-card, html[data-sidebar=lavender] .sidebar .mui-side-user {
background: #fff;
color: #202c4b;
}
html[data-sidebar=lavender] .sidebar .mui-brand-name, html[data-sidebar=lavender] .sidebar .mui-su-name {
color: #202c4b;
}
.wm-sidebar-swatch.wm-sidebar-peach {
background: #fff3ed;
}
html[data-sidebar=peach] .sidebar {
background: #fff3ed !important;
}
html[data-sidebar=peach] .sidebar .sidebar-inner, html[data-sidebar=peach] .sidebar .sidebar-menu, html[data-sidebar=peach] .sidebar .mui-side-footer {
background: transparent !important;
}
html[data-sidebar=peach] .sidebar .sidebar-menu nav a {
color: #45516b;
}
html[data-sidebar=peach] .sidebar .sidebar-menu nav a.active {
color: #3d5ee1;
background: #fff;
}
html[data-sidebar=peach] .sidebar .submenu-hdr, html[data-sidebar=peach] .sidebar .mui-brand-sub {
color: #65718a;
}
html[data-sidebar=peach] .sidebar .mui-brand-card, html[data-sidebar=peach] .sidebar .mui-side-user {
background: #fff;
color: #202c4b;
}
html[data-sidebar=peach] .sidebar .mui-brand-name, html[data-sidebar=peach] .sidebar .mui-su-name {
color: #202c4b;
}
.wm-sidebar-swatch.wm-sidebar-ocean {
background: linear-gradient(160deg, #edf4ff, #eefbf6);
}
html[data-sidebar=ocean] .sidebar {
background: linear-gradient(160deg, #edf4ff, #eefbf6) !important;
}
html[data-sidebar=ocean] .sidebar .sidebar-inner, html[data-sidebar=ocean] .sidebar .sidebar-menu, html[data-sidebar=ocean] .sidebar .mui-side-footer {
background: transparent !important;
}
html[data-sidebar=ocean] .sidebar .sidebar-menu nav a {
color: #45516b;
}
html[data-sidebar=ocean] .sidebar .sidebar-menu nav a.active {
color: #3d5ee1;
background: #fff;
}
html[data-sidebar=ocean] .sidebar .submenu-hdr, html[data-sidebar=ocean] .sidebar .mui-brand-sub {
color: #65718a;
}
html[data-sidebar=ocean] .sidebar .mui-brand-card, html[data-sidebar=ocean] .sidebar .mui-side-user {
background: #fff;
color: #202c4b;
}
html[data-sidebar=ocean] .sidebar .mui-brand-name, html[data-sidebar=ocean] .sidebar .mui-su-name {
color: #202c4b;
}
.wm-sidebar-swatch.wm-sidebar-bloom {
background: linear-gradient(160deg, #f0efff, #fff2f5);
}
html[data-sidebar=bloom] .sidebar {
background: linear-gradient(160deg, #f0efff, #fff2f5) !important;
}
html[data-sidebar=bloom] .sidebar .sidebar-inner, html[data-sidebar=bloom] .sidebar .sidebar-menu, html[data-sidebar=bloom] .sidebar .mui-side-footer {
background: transparent !important;
}
html[data-sidebar=bloom] .sidebar .sidebar-menu nav a {
color: #45516b;
}
html[data-sidebar=bloom] .sidebar .sidebar-menu nav a.active {
color: #3d5ee1;
background: #fff;
}
html[data-sidebar=bloom] .sidebar .submenu-hdr, html[data-sidebar=bloom] .sidebar .mui-brand-sub {
color: #65718a;
}
html[data-sidebar=bloom] .sidebar .mui-brand-card, html[data-sidebar=bloom] .sidebar .mui-side-user {
background: #fff;
color: #202c4b;
}
html[data-sidebar=bloom] .sidebar .mui-brand-name, html[data-sidebar=bloom] .sidebar .mui-su-name {
color: #202c4b;
}
.wm-sidebar-swatch.wm-sidebar-sunrise {
background: linear-gradient(160deg, #fff0e8, #fffbea);
}
html[data-sidebar=sunrise] .sidebar {
background: linear-gradient(160deg, #fff0e8, #fffbea) !important;
}
html[data-sidebar=sunrise] .sidebar .sidebar-inner, html[data-sidebar=sunrise] .sidebar .sidebar-menu, html[data-sidebar=sunrise] .sidebar .mui-side-footer {
background: transparent !important;
}
html[data-sidebar=sunrise] .sidebar .sidebar-menu nav a {
color: #45516b;
}
html[data-sidebar=sunrise] .sidebar .sidebar-menu nav a.active {
color: #3d5ee1;
background: #fff;
}
html[data-sidebar=sunrise] .sidebar .submenu-hdr, html[data-sidebar=sunrise] .sidebar .mui-brand-sub {
color: #65718a;
}
html[data-sidebar=sunrise] .sidebar .mui-brand-card, html[data-sidebar=sunrise] .sidebar .mui-side-user {
background: #fff;
color: #202c4b;
}
html[data-sidebar=sunrise] .sidebar .mui-brand-name, html[data-sidebar=sunrise] .sidebar .mui-su-name {
color: #202c4b;
}
.wm-sidebar-swatches {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem 0.65rem;
}
.wm-sidebar-choice {
position: relative;
}
.wm-sidebar-choice input {
position: absolute;
opacity: 0;
}
.wm-sidebar-choice label {
display: block;
cursor: pointer;
font-size: 11px;
text-align: center;
color: #45516b;
}
.wm-sidebar-choice .wm-sidebar-swatch {
display: block;
height: 44px;
border: 1px solid #dce2ec;
border-radius: 8px;
margin-bottom: 6px;
}
.wm-sidebar-choice input:checked + label .wm-sidebar-swatch {
outline: 2px solid #3d5ee1;
outline-offset: 2px;
}
.wm-sidebar-choice input:focus-visible + label {
outline: 2px solid #3d5ee1;
outline-offset: 4px;
}
.wm-login {
background: #fafcff;
position: relative;
isolation: isolate;
}
.wm-login::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
background: linear-gradient(125deg, #edf2ff 0%, #eefaf8 35%, #fffbea 65%, #fff0ef 100%);
}
.wm-login::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
opacity: 0.065;
background-image: url("../img/white-mind-logo-small.svg");
background-position: right bottom;
background-size: min(650px, 75vw) auto;
background-repeat: no-repeat;
pointer-events: none;
}
.wm-login .wm-login-logo {
width: 302px;
height: auto;
}
.wm-login .card {
background: #fff;
border: 1px solid #e3e8f2;
border-radius: 18px;
box-shadow: 0 16px 48px rgba(35, 28, 103, 0.09);
}
.wm-login .wm-login-roles .btn {
padding: 0.65rem 0.4rem;
font-size: 0.8125rem;
}
.wm-login .wm-login-roles legend {
float: none;
font-size: 0.875rem;
font-weight: 600;
}
.wm-login .wm-login-roles .btn-check:focus-visible + .btn {
outline: 2px solid #3d5ee1;
outline-offset: 3px;
}
/*# sourceMappingURL=style.css.map */
|