/* Adept Intranet — Global Stylesheet · one combined file, sections in cascade order (search "SECTION NN"). */
/* SECTION 01 · TokensTheme — :root tokens, all-bright lift, switches, flatpickr theme, date dropdowns */
/* ============================================
Adept Intranet — Custom Theme (Bootstrap 5 overrides)
Adept brand: dark background, magenta accent (sparingly), violet secondary
============================================ */
html,
body {
height: 100%;
overflow: hidden;
width: 100%;
position: relative;
}
/* Prevent iOS Safari from auto-adjusting font sizes on orientation change */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
:root {
--ai-primary: #e91e63;
--ai-primary-rgb: 233, 30, 99;
/* Pink chip/badge label on dark surfaces (date pill, ADMIN, MAINTENANCE, etc.) */
--ai-chip-pink-text: #f9a8d4;
/* Menus / chrome: stays magenta when pink rail overrides --ai-primary on .ai-sidebar */
--ai-app-accent: #e91e63;
--ai-app-accent-rgb: 233, 30, 99;
--ai-primary-dark: #ad1457;
--ai-primary-light: rgba(233, 30, 99, 0.12);
--ai-secondary: #9580f8;
--ai-secondary-rgb: 149, 128, 248;
--ai-secondary-light: rgba(149, 128, 248, 0.15);
/* Violet accent — paired with magenta */
--ai-accent-lilac: #9580f8;
--ai-accent-lilac-rgb: 149, 128, 248;
--ai-success: #22c55e;
--ai-danger: #ff4757;
--ai-warning: #ffa502;
--ai-info: #9580f8;
--ai-dark: #181c28;
--ai-darker: #0c0e14;
/* Body bg shares the table/card blue-slate hue, just darker — so the page
reads as the same family as the tables rather than a colder near-black */
--ai-body-bg: #161b27;
--ai-card-bg: #1e2433;
--ai-sidebar-width: 240px;
/* Sidebar: neutral surface; brand pink only as accent (active/focus) */
--ai-sidebar-bg: #1a1f2e;
--ai-sidebar-bg-hover: rgba(255, 255, 255, 0.052);
--ai-sidebar-bg-active: rgba(var(--ai-primary-rgb), 0.16);
--ai-sidebar-text: #f1f5f9;
--ai-sidebar-text-muted: rgba(241, 245, 249, 0.78);
--ai-sidebar-section: #94a3b8;
--ai-sidebar-border: rgba(255, 255, 255, 0.1);
--ai-sidebar-icon-badge-bg: rgba(255, 255, 255, 0.08);
--ai-sidebar-icon-badge-border: rgba(255, 255, 255, 0.14);
--ai-sidebar-footer-muted: rgba(241, 245, 249, 0.45);
--ai-sidebar-panel-shadow: 8px 0 40px rgba(0, 0, 0, 0.32);
--ai-sidebar-badge-shadow: 0 2px 5px rgba(0, 0, 0, 0.24), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
--ai-sidebar-badge-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.16) inset;
--ai-sidebar-badge-shadow-active: 0 2px 12px rgba(var(--ai-primary-rgb), 0.28), 0 1px 0 rgba(255, 255, 255, 0.14) inset;
--ai-navbar-height: 56px;
--ai-text: #e8e8e8;
--ai-border: rgba(255, 255, 255, 0.08);
/* Semi-transparent white for refined dark mode borders */
--ai-radius: 8px;
--ai-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
--ai-transition: all 0.2s ease;
--ai-text-muted: #abb5cf;
/* Brightened for better dark mode visibility */
--ai-table-row-hover: color-mix(in srgb, var(--ai-card-bg), #ffffff 5.2%);
--ai-table-row-active: #454e66;
/* Bulk multi-select row highlight (solid = sticky column parity) */
--ai-table-row-bulk-selected: #2d2028;
--ai-table-row-bulk-hover: #3a2530;
/* Bulk actions strip (table card) */
--ai-bulk-bar-bg: color-mix(in srgb, var(--ai-input-bg) 86%, rgba(var(--ai-primary-rgb), 0.11) 14%);
--ai-bulk-bar-border: color-mix(in srgb, var(--ai-border) 70%, rgba(var(--ai-primary-rgb), 0.2) 30%);
/* Placeholder Color (Dark) */
--ai-placeholder: rgba(255, 255, 255, 0.35);
/* Filter Bar Defaults (Dark) */
--ai-filter-bg: #222838;
--ai-filter-bar-bg: linear-gradient(180deg, #262b3a 0%, #181c28 100%);
--ai-filter-border-top: rgba(255, 255, 255, 0.03);
--ai-filter-border: #3d4660;
--ai-filter-input-bg: rgba(255, 255, 255, 0.05);
--ai-filter-input-border: rgba(255, 255, 255, 0.1);
--ai-filter-text: #ffffff;
--ai-filter-icon: #777777;
/*
* Filter “chrome” — identical structure in dark & light (gloss + hairline + lift + top highlight).
* Light mode redefines these tokens only; components use the same declarations.
*/
--ai-filter-ctrl-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
--ai-filter-ctrl-gloss-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
--ai-filter-ctrl-border: rgba(255, 255, 255, 0.05);
--ai-filter-ctrl-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
--ai-filter-ctrl-shadow-hover: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
--ai-filter-native-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.02);
/* Form Input Variables (Dark) */
--ai-input-bg: #222838;
--ai-select-bg: #2a3144;
/* Select icon (White) */
--ai-select-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
/* Calendar Range Colors (Solid equivalents to prevent overlap artifacts) */
--ai-calendar-range-bg: #3a202f;
--ai-calendar-range-text: #fce4ec;
/* Scrollbar Variables (Dark) */
--ai-scrollbar-thumb: rgba(255, 255, 255, 0.35);
--ai-scrollbar-hover: rgba(255, 255, 255, 0.55);
/* Card & Surface Elevation (Dark) */
--ai-card-shadow:
0 4px 18px rgba(0, 0, 0, 0.22);
/* Magenta rail — sticky column headers, modals, accent chrome (matches reset-password modal) */
--ai-pink-rail-gradient: linear-gradient(135deg, #ec407a 0%, #e91e63 50%, #c2185b 100%);
/* Table header slate (non-sticky columns) — overridden in all-bright-mode */
--ai-table-head-bg-start: #2a3140;
--ai-table-head-bg-end: var(--ai-card-bg);
}
:root.light-mode {
/* Surfaces — cool slate stack, no bare white (parity with dark-mode layering) */
--ai-dark: #b7c4d8;
--ai-body-bg: #c4d0e4;
--ai-card-bg: #d6e2f2;
--ai-darker: var(--ai-card-bg);
--ai-pink-rail-gradient: linear-gradient(135deg, #ec407a 0%, #e91e63 50%, #c2185b 100%);
--ai-text: #0f172a;
--ai-text-muted: #64748b;
--ai-border: #a8b9d0;
--ai-filter-bg: #c9d7eb;
--ai-filter-bar-bg: linear-gradient(180deg, #d2dff0 0%, #c5d4e8 100%);
--ai-filter-border-top: rgba(15, 23, 42, 0.07);
--ai-filter-border: #96a9c4;
--ai-filter-input-bg: #c2d2e8;
--ai-filter-input-border: color-mix(in srgb, var(--ai-body-bg) 90%, rgb(15, 23, 42) 10%);
--ai-filter-text: #1e293b;
--ai-filter-icon: #64748b;
--ai-input-bg: #cad8eb;
--ai-select-bg: #d0ddf0;
/* Placeholder Color (Light) */
--ai-placeholder: rgba(15, 23, 42, 0.38);
/* Select icon (Dark Gray) */
--ai-select-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
/* Calendar Range Colors (Light mode solid equivalents) */
--ai-calendar-range-bg: #fce4f1;
--ai-calendar-range-text: #ad1457;
/* Flatpickr Variables */
--ai-calendar-bg: var(--ai-card-bg);
--ai-calendar-text: #0f172a;
--ai-calendar-border: #96a9c4;
--ai-calendar-hover: #c5d4e8;
/* Scrollbar Variables (Light) */
--ai-scrollbar-thumb: rgba(15, 23, 42, 0.22);
--ai-scrollbar-hover: rgba(15, 23, 42, 0.38);
--ai-switch-bg: #b9c8dc;
/* Table row solids — same pattern as dark mode */
--ai-table-row-hover: color-mix(in srgb, var(--ai-card-bg), #000000 5.5%);
--ai-table-row-active: #dfe6f0;
--ai-table-row-bulk-selected: #fdf2f7;
--ai-table-row-bulk-hover: #fbe6f1;
/* Match non-sticky thead: slate gradient (same recipe as :root.light-mode .ai-table thead th) */
--ai-table-head-bg-start: var(--ai-select-bg);
--ai-table-head-bg-end: var(--ai-input-bg);
--ai-bulk-bar-bg: linear-gradient(180deg, var(--ai-select-bg) 0%, var(--ai-input-bg) 100%);
--ai-bulk-bar-border: color-mix(in srgb, var(--ai-border) 82%, rgba(15, 23, 42, 0.22) 18%);
/* Elevation — deepened for true dark-mode-parity depth (cards clearly lift
off the page). Layered: tight contact shadow + soft ambient spread. */
--ai-card-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 3px 8px rgba(15, 23, 42, 0.045),
0 14px 34px rgba(15, 23, 42, 0.07);
--ai-card-shadow-lg:
0 2px 4px rgba(15, 23, 42, 0.06),
0 8px 18px rgba(15, 23, 42, 0.065),
0 26px 56px rgba(15, 23, 42, 0.09);
--ai-dropdown-shadow:
0 2px 4px rgba(15, 23, 42, 0.06),
0 8px 18px rgba(15, 23, 42, 0.065),
0 22px 48px rgba(15, 23, 42, 0.085);
/* Sidebar — reads as a distinct strip vs canvas */
--ai-sidebar-bg: #ccd8ea;
--ai-sidebar-bg-hover: rgba(0, 0, 0, 0.055);
--ai-sidebar-bg-active: rgba(var(--ai-primary-rgb), 0.1);
--ai-sidebar-text: #0f172a;
--ai-sidebar-text-muted: #475569;
--ai-sidebar-section: #64748b;
--ai-sidebar-border: #a8b9d0;
--ai-sidebar-hover-bar: rgba(15, 23, 42, 0.28);
--ai-sidebar-icon-badge-bg: #bfcfe6;
--ai-sidebar-icon-badge-border: #96a9c4;
--ai-sidebar-footer-muted: #64748b;
--ai-sidebar-panel-shadow: 10px 0 48px rgba(15, 23, 42, 0.1);
--ai-sidebar-badge-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 8px 20px rgba(15, 23, 42, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.42);
--ai-sidebar-badge-shadow-hover: 0 2px 10px rgba(15, 23, 42, 0.09), 0 16px 36px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.52);
--ai-sidebar-badge-shadow-active: 0 2px 12px rgba(var(--ai-primary-rgb), 0.16), 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 18px rgba(var(--ai-primary-rgb), 0.09);
/* Badge lift (light surfaces) */
--ai-accent-rose-mist: rgba(233, 30, 140, 0.09);
/* 3D bevel — bright top inner edge + soft bottom inner shadow, no drop shadow.
Elevate is a transparent no-op (not `none`, which would invalidate the
whole box-shadow list and kill the bevel too). */
--ai-badge-inset: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.85), inset 0 -2px 2px rgba(15, 23, 42, 0.12);
--ai-badge-elevate: 0 0 transparent;
/* Filter chrome — same recipe as dark; values for cool light surfaces */
--ai-filter-ctrl-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 48%);
--ai-filter-ctrl-gloss-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 50%);
--ai-filter-ctrl-border: rgba(15, 23, 42, 0.085);
--ai-filter-ctrl-shadow: 0 4px 12px rgba(15, 23, 42, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
--ai-filter-ctrl-shadow-hover: 0 4px 15px rgba(15, 23, 42, 0.14), inset 0 1px 0 0 rgba(255, 255, 255, 0.55);
--ai-filter-native-shadow: 0 4px 10px rgba(15, 23, 42, 0.08), inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* All Bright Mode — lifts surface luminance only; text tokens stay theme-appropriate */
:root.all-bright-mode:not(.light-mode) {
--ai-dark: #2a323f;
--ai-darker: #1e242d;
--ai-body-bg: #242b37;
--ai-card-bg: #2e3746;
--ai-card-header-bg-start: #394456;
--ai-card-header-bg-end: #2e3746;
--ai-table-head-bg-start: #394456;
--ai-table-head-bg-end: #2e3746;
--ai-sidebar-bg: #29313e;
--ai-sidebar-bg-hover: rgba(255, 255, 255, 0.08);
--ai-sidebar-border: rgba(255, 255, 255, 0.12);
--ai-sidebar-icon-badge-bg: rgba(255, 255, 255, 0.1);
--ai-sidebar-icon-badge-border: rgba(255, 255, 255, 0.16);
--ai-text: #f2f4f8;
--ai-text-muted: #c8d2e4;
--ai-border: rgba(255, 255, 255, 0.12);
--ai-filter-bg: #333d4e;
--ai-filter-bar-bg: linear-gradient(180deg, #394456 0%, #2e3746 100%);
--ai-filter-border: #445167;
--ai-filter-text: #ffffff;
--ai-filter-icon: #8ca2c4;
--ai-filter-input-bg: rgba(255, 255, 255, 0.07);
--ai-filter-input-border: rgba(255, 255, 255, 0.12);
--ai-input-bg: #333d4e;
--ai-select-bg: #394456;
--ai-table-row-hover: color-mix(in srgb, var(--ai-card-bg), #ffffff 8%);
--ai-table-row-active: #4c576e;
--ai-table-row-bulk-selected: #3c2432;
--ai-table-row-bulk-hover: #4b2c3d;
--ai-placeholder: rgba(255, 255, 255, 0.45);
--ai-scrollbar-thumb: rgba(255, 255, 255, 0.45);
--ai-scrollbar-hover: rgba(255, 255, 255, 0.65);
/* Pickers & Tom Select dropdowns (override hardcoded :root calendar tokens) */
--ai-calendar-bg: var(--ai-card-bg);
--ai-calendar-text: var(--ai-text);
--ai-calendar-border: var(--ai-border);
--ai-calendar-hover: var(--ai-table-row-hover);
/* No drop shadow on lifted pills in all-bright dark mode */
--ai-badge-elevate-dark: 0 0 transparent;
--ai-badge-inset-dark: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -2px 3px rgba(0, 0, 0, 0.30);
}
:root.light-mode.all-bright-mode {
--ai-dark: #dce6f5;
--ai-body-bg: #ecf2fa;
--ai-card-bg: #fafcff;
--ai-card-header-bg-start: #f4f9ff;
--ai-card-header-bg-end: #ecf4fc;
--ai-table-head-bg-start: #f0f6ff;
--ai-table-head-bg-end: #e4eef8;
--ai-text: #0f172a;
--ai-text-muted: #475569;
--ai-border: #b8c9de;
--ai-filter-bg: #eef4fc;
--ai-filter-bar-bg: linear-gradient(180deg, #f4f9ff 0%, #e8f2fc 100%);
--ai-filter-border: #b0c4dc;
--ai-filter-text: #1e293b;
--ai-filter-icon: #64748b;
--ai-filter-input-bg: #e8f2fc;
--ai-filter-input-border: color-mix(in srgb, var(--ai-body-bg) 88%, rgb(15, 23, 42) 12%);
--ai-input-bg: #f0f6ff;
--ai-select-bg: #f6faff;
--ai-switch-bg: #c8d6ea;
--ai-table-row-hover: color-mix(in srgb, var(--ai-card-bg), #000000 6%);
--ai-table-row-active: #e3eaf5;
--ai-table-row-bulk-selected: #fef6fa;
--ai-table-row-bulk-hover: #fceaf3;
--ai-sidebar-bg: #eef4fc;
--ai-sidebar-bg-hover: rgba(15, 23, 42, 0.06);
--ai-sidebar-bg-active: rgba(var(--ai-primary-rgb), 0.12);
--ai-sidebar-text: #0f172a;
--ai-sidebar-text-muted: #475569;
--ai-sidebar-section: #64748b;
--ai-sidebar-footer-muted: #64748b;
--ai-sidebar-border: #c5d6ea;
--ai-sidebar-icon-badge-bg: #e4eef8;
--ai-sidebar-icon-badge-border: #b8c9de;
--ai-sidebar-panel-shadow: 10px 0 48px rgba(15, 23, 42, 0.08);
--ai-calendar-text: #0f172a;
--ai-calendar-hover: #d4e2f4;
--ai-placeholder: rgba(15, 23, 42, 0.42);
}
/* Page canvas — bright mode lifts the full backdrop (not only cards/surfaces) */
html.all-bright-mode,
html.all-bright-mode body,
html.all-bright-mode .ai-content-wrapper,
html.all-bright-mode body.ai-login-page {
background-color: var(--ai-body-bg);
}
/* Cards & table headers — brighter chrome (same lift as page bg) */
:root.all-bright-mode:not(.light-mode) .ai-card,
:root.all-bright-mode:not(.light-mode) .ai-stat-card {
background: var(--ai-card-bg);
}
:root.all-bright-mode:not(.light-mode) .ai-card-header {
background: linear-gradient(180deg, var(--ai-card-header-bg-start) 0%, var(--ai-card-header-bg-end) 100%);
}
:root.light-mode.all-bright-mode .ai-card,
:root.light-mode.all-bright-mode .ai-stat-card {
background: var(--ai-card-bg);
}
:root.light-mode.all-bright-mode .ai-card-header {
background: linear-gradient(180deg, var(--ai-card-header-bg-start) 0%, var(--ai-card-header-bg-end) 100%);
}
:root.light-mode.all-bright-mode .ai-card-header h5,
:root.light-mode.all-bright-mode .ai-card-header h5 i {
color: var(--ai-text);
}
/* Non-pink sidebar — brighter slate rail (pink-sidebar-mode keeps magenta gradient) */
:root.all-bright-mode:not(.light-mode):not(.pink-sidebar-mode) .ai-sidebar {
background: linear-gradient(180deg, #354051 0%, var(--ai-sidebar-bg) 42%);
box-shadow:
10px 0 40px rgba(0, 0, 0, 0.28),
inset -1px 0 0 rgba(255, 255, 255, 0.06);
}
:root.light-mode.all-bright-mode:not(.pink-sidebar-mode) .ai-sidebar {
background: linear-gradient(180deg, #f4f9ff 0%, var(--ai-sidebar-bg) 40%);
box-shadow:
var(--ai-sidebar-panel-shadow),
inset -1px 0 0 rgba(255, 255, 255, 0.42);
}
:root.all-bright-mode:not(.pink-sidebar-mode) .ai-sidebar-user-panel {
border-color: var(--ai-sidebar-border) !important;
}
/* -- Form Switches (Dark Mode) ---------------------------------------------- */
.form-check-input {
background-color: var(--ai-input-bg);
border-color: var(--ai-border);
}
.form-switch .form-check-input {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255, 255, 255, 0.45)'/%3e%3c/svg%3e");
background-color: var(--ai-select-bg);
border-color: rgba(255, 255, 255, 0.1);
}
.form-check-input:checked {
background-color: var(--ai-primary) !important;
border-color: var(--ai-primary) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.form-check-input:focus {
border-color: var(--ai-primary);
box-shadow: 0 0 0 0.25rem rgba(var(--ai-primary-rgb), 0.15);
}
:root.light-mode .form-switch .form-check-input {
background-color: var(--ai-switch-bg);
border-color: #cbd5e1;
}
/* User-menu “Pink sidebar”: align with .dropdown-item padding, kill BS switch left-indent, pink track (dark + light) */
.ai-dropdown-pink-sidebar-row {
padding: 8px 16px !important;
}
.ai-dropdown .form-switch.ai-switch-pink {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-height: 0;
padding-left: 0 !important;
margin-bottom: 0 !important;
}
.ai-dropdown .form-switch.ai-switch-pink .form-check-input {
float: none;
position: relative;
margin: 0 !important;
flex-shrink: 0;
}
.ai-dropdown .form-switch.ai-switch-pink .form-check-label {
flex: 1 1 auto;
min-width: 0;
font-size: 0.85rem !important;
font-weight: 600 !important;
color: var(--ai-text) !important;
cursor: pointer;
line-height: 1.25;
}
.ai-dropdown .form-switch.ai-switch-pink .form-check-label i {
color: inherit !important;
}
:root.light-mode .ai-dropdown .form-switch.ai-switch-pink .form-check-label {
color: #475569 !important;
}
.ai-dropdown .form-switch.ai-switch-pink .form-check-input:not(:checked) {
--bs-form-switch-bg: rgba(var(--ai-app-accent-rgb), 0.42) !important;
background-color: rgba(var(--ai-app-accent-rgb), 0.32) !important;
border: 1px solid rgba(var(--ai-app-accent-rgb), 0.55) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,245,250,0.97)'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: left center !important;
}
:root.light-mode .ai-dropdown .form-switch.ai-switch-pink .form-check-input:not(:checked) {
--bs-form-switch-bg: rgba(var(--ai-app-accent-rgb), 0.38) !important;
background-color: rgba(var(--ai-app-accent-rgb), 0.22) !important;
border-color: rgba(var(--ai-app-accent-rgb), 0.48) !important;
}
:root:not(.light-mode) .ai-dropdown .form-switch.ai-switch-pink .form-check-input:not(:checked) {
background-color: rgba(var(--ai-app-accent-rgb), 0.36) !important;
border-color: rgba(var(--ai-app-accent-rgb), 0.58) !important;
}
.ai-dropdown .form-switch.ai-switch-pink .form-check-input:checked {
--bs-form-switch-bg: var(--ai-app-accent) !important;
background-color: var(--ai-app-accent) !important;
border-color: var(--ai-app-accent) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
background-position: right center !important;
}
.ai-dropdown .form-switch.ai-switch-pink .form-check-input:focus {
border-color: var(--ai-app-accent) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--ai-app-accent-rgb), 0.32);
}
.ai-dropdown .form-switch.ai-switch-pink .form-check-input {
accent-color: var(--ai-app-accent);
}
:root {
/* Flatpickr Variables (Dark) */
--ai-calendar-bg: #222838;
--ai-calendar-text: #ffffff;
--ai-calendar-border: #3d4660;
--ai-calendar-hover: #323a50;
/* Badge depth (dark surfaces) — parity with light “crystal” pills */
--ai-badge-inset-dark: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -2px 3px rgba(0, 0, 0, 0.30);
/* No drop shadow under pills in regular dark mode */
--ai-badge-elevate-dark: 0 0 transparent;
}
/* Custom Flatpickr Theme */
.flatpickr-calendar {
background: var(--ai-calendar-bg) !important;
border: 1px solid var(--ai-calendar-border) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
color: var(--ai-calendar-text) !important;
border-radius: 12px !important;
}
:root.light-mode .flatpickr-calendar {
box-shadow: var(--ai-dropdown-shadow) !important;
border-color: var(--ai-calendar-border) !important;
}
.flatpickr-day {
color: var(--ai-calendar-text) !important;
border-radius: 8px !important;
}
.flatpickr-day.today {
border-color: rgba(173, 20, 87, 0.65) !important;
}
.flatpickr-day:hover {
background: var(--ai-calendar-hover) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
background: var(--ai-pink-rail-gradient) !important;
border-color: transparent !important;
color: #fff !important;
box-shadow: none !important;
z-index: 2;
}
.flatpickr-day.startRange {
border-radius: 50% 0 0 50% !important;
box-shadow: 5px 0 0 var(--ai-calendar-range-bg) !important;
}
.flatpickr-day.endRange {
border-radius: 0 50% 50% 0 !important;
box-shadow: -5px 0 0 var(--ai-calendar-range-bg) !important;
}
.flatpickr-day.startRange.endRange {
border-radius: 50% !important;
box-shadow: none !important;
}
.flatpickr-day.inRange {
background: var(--ai-calendar-range-bg) !important;
box-shadow: -5px 0 0 var(--ai-calendar-range-bg), 5px 0 0 var(--ai-calendar-range-bg) !important;
color: var(--ai-calendar-range-text) !important;
border-radius: 0 !important;
border-color: transparent !important;
}
/* -- Date Dropdown System --------------------------------------------------- */
.ai-date-dropdown {
position: relative;
display: inline-block;
width: 100%;
}
.ai-date-dropdown-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: var(--ai-filter-ctrl-gloss), var(--ai-card-bg);
border: 1px solid var(--ai-filter-ctrl-border);
border-radius: 50px !important;
color: var(--ai-text);
font-size: 0.76rem;
font-weight: 600;
padding: 0 14px;
height: 34px !important;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: var(--ai-filter-ctrl-shadow);
}
.ai-date-dropdown-btn:hover {
border-color: var(--ai-primary);
}
.ai-date-dropdown.open .ai-date-dropdown-btn {
border-color: var(--ai-primary) !important;
box-shadow: 0 0 0 1px var(--ai-primary), 0 0 0 3px var(--ai-primary-light) !important;
}
.ai-date-dropdown.ai-filter-active .ai-date-dropdown-btn {
/* Subtle highlight instead of full pink outline if requested, but user said remove it */
border-color: var(--ai-border) !important;
box-shadow: none !important;
}
.ai-date-dropdown-btn .ai-select-chevron {
transition: transform 0.2s ease;
width: 10px;
height: 10px;
opacity: 0.5;
margin-left: auto;
}
.ai-date-dropdown.open .ai-date-dropdown-btn .ai-select-chevron {
transform: rotate(180deg);
}
.ai-date-dropdown-btn i {
font-size: 0.9rem;
color: var(--ai-text-muted);
}
.ai-date-dropdown-btn span {
flex-grow: 1;
text-align: left;
margin-left: 8px;
}
/* -- Date Presets Panel -- */
.ai-date-presets-panel {
background: var(--ai-calendar-bg);
/* Match date dropdown color */
border: 1px solid var(--ai-border);
border-radius: 12px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
padding: 4px 0;
display: none;
animation: aiSelectFadeIn 0.15s ease;
overflow: hidden;
}
.ai-date-dropdown.open .ai-date-presets-panel:not(.hidden) {
display: block;
}
.ai-date-presets-panel.hidden {
display: none !important;
}
.ai-date-preset-item {
display: flex;
align-items: center;
padding: 8px 16px;
font-size: 0.85rem;
font-weight: 600;
color: var(--ai-text);
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
white-space: nowrap;
}
.ai-date-preset-item:hover {
background-color: var(--ai-table-row-hover);
color: var(--ai-text);
}
.ai-date-preset-item.selected {
background-color: var(--ai-table-row-active);
color: var(--ai-text);
font-weight: 700;
}
:root.light-mode .ai-date-preset-item {
color: #334155;
}
:root.light-mode .ai-date-preset-item:hover {
background-color: var(--ai-table-row-hover);
color: var(--ai-text);
}
:root.light-mode .ai-date-preset-item.selected {
background-color: var(--ai-table-row-active);
color: var(--ai-text);
}
/* -- Description info button + popup (folds a Description column into Service) -- */
.ai-desc-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--ai-text-muted);
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
}
.ai-desc-info:hover,
.ai-desc-info:focus-visible {
background: var(--ai-table-row-hover);
color: var(--ai-primary);
outline: none;
}
/* -- Service cell: service name + description shown inline, stacked -- */
.ai-service-cell {
display: flex;
flex-direction: column;
gap: 2px;
padding: 2px 0;
min-width: 0;
}
.ai-service-name {
font-weight: 600;
font-size: 0.85rem;
color: var(--ai-text);
}
.ai-service-desc {
font-size: 0.78rem;
line-height: 1.4;
color: var(--ai-text-muted);
white-space: normal;
word-break: break-word;
}
.ai-service-desc-only {
font-size: 0.83rem;
color: var(--ai-text);
}
.ai-desc-popup {
position: fixed;
z-index: 20000;
max-width: 360px;
min-width: 200px;
padding: 12px 14px;
background: var(--ai-calendar-bg, #fff);
border: 1px solid var(--ai-border);
border-radius: 12px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
animation: aiSelectFadeIn 0.12s ease;
}
.ai-desc-popup-title {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ai-text-muted);
margin-bottom: 6px;
}
.ai-desc-popup-body {
font-size: 0.85rem;
line-height: 1.5;
color: var(--ai-text);
white-space: pre-wrap;
word-break: break-word;
max-height: 320px;
overflow-y: auto;
}
/* -- Premium Bootstrap Dropdown skin -- */
.ai-dropdown {
padding: 6px 0 !important;
border: 1px solid var(--ai-border) !important;
background: var(--ai-calendar-bg) !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border-radius: 14px !important;
z-index: 2000 !important;
overflow: hidden !important;
}
.ai-dropdown .dropdown-item {
padding: 8px 16px !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
color: var(--ai-text) !important;
transition: all 0.15s ease !important;
}
.ai-dropdown .dropdown-item:hover {
background-color: var(--ai-table-row-hover) !important;
color: var(--ai-text) !important;
}
.ai-dropdown .dropdown-item.active,
.ai-dropdown .dropdown-item:active {
background-color: var(--ai-table-row-active) !important;
color: var(--ai-text) !important;
}
:root.light-mode .ai-dropdown .dropdown-item {
color: #475569 !important;
}
:root.light-mode .ai-dropdown .dropdown-item.active,
:root.light-mode .ai-dropdown .dropdown-item:active {
background-color: var(--ai-table-row-active) !important;
color: var(--ai-text) !important;
}
:root.light-mode .ai-date-dropdown-btn {
color: var(--ai-text-muted);
}
/* Hidden input for Flatpickr trigger */
.ai-datepicker-hidden {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 1px;
padding: 0;
margin: 0;
border: none;
opacity: 0;
pointer-events: none;
}
/* Avatar Picker for Forms */
.ai-avatar-picker {
position: relative;
cursor: pointer;
overflow: hidden;
border: 3px solid var(--ai-border);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.ai-avatar-picker .ai-avatar {
width: 100% !important;
height: 100% !important;
}
.ai-avatar-picker:hover {
border-color: color-mix(in srgb, var(--ai-primary) 55%, var(--ai-border));
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 22px rgba(173, 20, 87, 0.22);
}
:root.light-mode .ai-avatar-picker:hover {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65), 0 8px 22px rgba(173, 20, 87, 0.18);
}
.ai-avatar-picker-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--ai-pink-rail-gradient);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 8px 6px;
color: #fff;
opacity: 0;
transition: opacity 0.2s ease;
border-radius: 50%;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.ai-avatar-picker:hover .ai-avatar-picker-overlay,
.ai-avatar-picker:focus-visible .ai-avatar-picker-overlay {
opacity: 1;
}
.ai-avatar-picker-overlay i {
font-size: 1.35rem;
margin-bottom: 0;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}
.ai-avatar-picker-overlay span {
font-size: 0.62rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1.25;
text-align: center;
max-width: 92%;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.ai-avatar-picker:focus-visible {
outline: none;
box-shadow:
0 0 0 3px rgba(var(--ai-primary-rgb), 0.35),
0 0 0 1px rgba(255, 255, 255, 0.12);
}
.ai-avatar-upload-group {
width: 120px;
}
/* Side panel wrapping user-form avatar (Create / Edit user) */
.ai-avatar-form-panel {
min-height: 200px;
border-radius: var(--ai-radius);
border: 1px dashed var(--ai-border);
background: color-mix(in srgb, var(--ai-input-bg) 88%, var(--ai-card-bg) 12%);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
:root.light-mode .ai-avatar-form-panel {
background: color-mix(in srgb, var(--ai-input-bg) 82%, #fff 18%);
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
}
:root:not(.light-mode) .ai-avatar-form-panel {
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.38);
}
.ai-avatar {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-weight: 700;
color: #fff;
flex-shrink: 0;
text-align: center;
user-select: none;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekday {
color: var(--ai-calendar-text) !important;
fill: var(--ai-calendar-text) !important;
}
/* Form inputs that are replaced by inline calendars should not be absolute
to ensure the parent container flow and layout are calculated correctly. */
input.ai-datepicker,
input.ai-date-range-inline,
input.ai-date-inline {
display: block !important;
height: 0 !important;
padding: 0 !important;
border: 0 !important;
margin: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
.flatpickr-innerContainer {
border-top: 1px solid var(--ai-calendar-border);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
fill: var(--ai-text-muted) !important;
transition: fill 0.25s ease;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
fill: var(--ai-primary) !important;
}
/* Fix broken/stacked arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
display: flex !important;
align-items: center;
justify-content: center;
height: 34px !important;
}
/* Ensure inline calendar fits container and looks premium */
.flatpickr-calendar.inline {
position: relative !important;
display: block !important;
width: 256px !important;
/* Standard compact width */
margin: 8px 0 4px 0 !important;
border-radius: 12px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
background: var(--ai-calendar-bg) !important;
border: 1px solid var(--ai-border) !important;
font-size: 14px !important;
}
/* Full-width fluid inline calendar for form column layouts */
.ai-calendar-form .flatpickr-calendar.inline {
width: 100% !important;
font-size: 13px !important;
}
.ai-calendar-form .flatpickr-rContainer {
width: 100% !important;
}
.ai-calendar-form .flatpickr-days,
.ai-calendar-form .dayContainer {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
.ai-calendar-form .flatpickr-day {
max-width: calc(100% / 7) !important;
flex-basis: calc(100% / 7) !important;
height: 34px !important;
line-height: 34px !important;
}
.ai-calendar-form .flatpickr-month {
height: 30px !important;
}
.flatpickr-days,
.flatpickr-days .dayContainer {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
.form-label+.flatpickr-calendar.inline {
margin: 8px 0 16px 0 !important;
/* Left aligned by default */
}
/* SECTION 02 · Layout — base, navbar, action buttons */
/* ---- Base ---- */
* {
box-sizing: border-box;
}
::placeholder {
color: var(--ai-placeholder) !important;
opacity: 1 !important;
}
html,
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: var(--ai-body-bg);
color: var(--ai-text);
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Remove tap highlight and add fast-tap on all interactive elements */
a,
button,
[role="button"],
input,
select,
textarea,
label,
.btn,
.nav-link,
.dropdown-item,
.dropdown-toggle {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* Suppress transitions/animations during theme switch so inputs/buttons flip with the reveal */
.no-transition,
.no-transition *,
.no-transition *::before,
.no-transition *::after {
transition: none !important;
animation-duration: 0s !important;
animation-delay: 0s !important;
}
/* -- Seamless page-to-page transitions ------------------------------------
The cross-document opt-in (@view-transition { navigation: auto }) lives in
the authenticated layout's inline style (Header.php) so it applies to
app pages only — the login/logout pages keep their own overlay transitions.
With it active the browser holds a snapshot of the outgoing page and
cross-fades into the new one, so there is no blank frame (the white/black
flash) between full-page loads. The rules below style those snapshots. */
::view-transition-old(root),
::view-transition-new(root) {
mix-blend-mode: normal;
}
/* Default (page navigation): a short cross-fade. The two snapshots overlap, so
the new page paints over the old one — no flash. Scoped to NOT the theme
type so the circular reveal below stays exclusive to the theme toggle. */
:root:not(:active-view-transition-type(theme))::view-transition-old(root),
:root:not(:active-view-transition-type(theme))::view-transition-new(root) {
animation-duration: 0.22s;
animation-timing-function: ease;
}
/* -- View Transitions — Circular Reveal for Theme Toggle ------------------- */
:root:active-view-transition-type(theme)::view-transition-old(root),
:root:active-view-transition-type(theme)::view-transition-new(root) {
animation: none;
}
:root:active-view-transition-type(theme)::view-transition-old(root) {
z-index: 1;
}
:root:active-view-transition-type(theme)::view-transition-new(root) {
z-index: 9999;
animation: vt-reveal 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* When going from dark → light, the OLD layer should be on top instead */
html.light-mode:active-view-transition-type(theme)::view-transition-old(root) {
z-index: 9999;
animation: vt-reveal 0.7s cubic-bezier(0.4, 0, 0.2, 1) reverse forwards;
}
html.light-mode:active-view-transition-type(theme)::view-transition-new(root) {
z-index: 1;
animation: none;
}
/* Respect reduced-motion: skip the cross-fade, keep the instant (flash-free) swap. */
@media (prefers-reduced-motion: reduce) {
:root:not(:active-view-transition-type(theme))::view-transition-old(root),
:root:not(:active-view-transition-type(theme))::view-transition-new(root) {
animation-duration: 0.001s;
}
}
@keyframes vt-reveal {
from {
clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%));
}
to {
clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%));
}
}
.text-accent {
color: var(--ai-primary) !important;
}
/* ---- Top Navbar ---- */
.ai-navbar {
/* Header matches the table/card surface colour (translucent for the glass blur) */
background: color-mix(in srgb, var(--ai-card-bg) 86%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
height: var(--ai-navbar-height);
padding: 0 20px;
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
border: none;
border-bottom: 1px solid var(--ai-border);
box-shadow:
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
0 4px 24px rgba(0, 0, 0, 0.35);
z-index: 11000;
left: 0;
width: 100%;
}
/* On desktop, strip the container-fluid's extra left padding so the toggle button's
left edge sits at exactly the navbar's own 20px — the same as the sidebar nav-link
padding-left, putting the toggle and the icon column on the same vertical axis. */
@media (min-width: 992px) {
.ai-navbar > .container-fluid {
padding-left: 0 !important;
}
}
.ai-brand {
color: #fff !important;
font-weight: 700;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 8px;
margin: 0 !important;
text-decoration: none !important;
}
.ai-brand img {
height: 40px;
width: auto;
filter:
drop-shadow(0 1px 0 rgba(0, 0, 0, 0.18))
drop-shadow(0 3px 10px rgba(233, 30, 140, 0.22))
drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28));
transition: filter 0.25s ease;
}
.ai-brand:hover img {
filter:
drop-shadow(0 1px 0 rgba(0, 0, 0, 0.18))
drop-shadow(0 4px 14px rgba(233, 30, 140, 0.38))
drop-shadow(0 8px 22px rgba(0, 0, 0, 0.3));
}
:root.light-mode .ai-brand img {
filter:
drop-shadow(0 1px 0 rgba(15, 23, 42, 0.1))
drop-shadow(0 2px 6px rgba(15, 23, 42, 0.14))
drop-shadow(0 5px 16px rgba(233, 30, 140, 0.12));
}
:root.light-mode .ai-brand:hover img {
filter:
drop-shadow(0 1px 0 rgba(15, 23, 42, 0.12))
drop-shadow(0 3px 8px rgba(15, 23, 42, 0.18))
drop-shadow(0 6px 20px rgba(233, 30, 140, 0.2));
}
.ai-brand .logo-light { display: none; }
.ai-brand .logo-dark { display: block; }
:root.light-mode .ai-brand .logo-light { display: block; }
:root.light-mode .ai-brand .logo-dark { display: none; }
.ai-brand i {
color: var(--ai-primary);
font-size: 1.4rem;
}
.ai-sidebar-toggle {
color: var(--ai-text) !important;
font-size: 1.25rem;
border: none;
background: transparent;
/* Match the logo image height so flexbox centres them on the same baseline */
width: 36px;
height: 36px;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 6px;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.ai-sidebar-toggle:hover {
background-color: rgba(128, 128, 128, 0.15);
}
:root.light-mode .ai-sidebar-toggle:hover {
background-color: rgba(0, 0, 0, 0.08);
}
.ai-sidebar-toggle:active {
transform: scale(0.92);
}
.ai-search-wrap {
position: relative;
}
/* Light mode table clear — same flat style just darker text */
:root.light-mode .ai-btn-clear,
:root.light-mode .btn-clear {
color: #bbb !important;
}
:root.light-mode .ai-btn-clear:hover,
:root.light-mode .btn-clear:hover {
color: var(--ai-primary) !important;
}
.ai-search-wrap i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--ai-text-muted);
font-size: 0.85rem;
}
.ai-search-wrap .form-control {
background: var(--ai-input-bg);
border: 1px solid var(--ai-border);
color: #fff;
padding: 6px 12px 6px 34px;
border-radius: 20px;
width: 220px;
font-size: 0.85rem;
transition: width 0.2s ease, box-shadow 0.2s ease;
}
.ai-search-wrap .form-control:focus {
border-color: var(--ai-primary);
box-shadow: 0 0 0 1px var(--ai-primary), 0 0 0 4px var(--ai-primary-light);
width: 280px;
}
/* Standardized Clear Search Button */
.ai-btn-clear,
.btn-clear {
position: absolute !important;
right: 10px !important;
/* Standardized offset */
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 10;
padding: 0 4px !important;
color: var(--ai-text-muted) !important;
opacity: 0 !important;
visibility: hidden;
transition: all 0.2s ease !important;
text-decoration: none !important;
background: transparent !important;
border: none !important;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
pointer-events: none;
}
.ai-btn-clear.visible,
.btn-clear.visible {
opacity: 0.8 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.ai-btn-clear:hover,
.btn-clear:hover {
opacity: 1 !important;
color: var(--ai-primary) !important;
}
/* Ensure search inputs have enough padding for the clear button */
.ai-search-wrap .form-control,
.input-group .form-control[name="search"] {
padding-right: 2.5rem !important;
/* ~40px clearance */
}
/* Ensure parents are always relative for proper button containment */
.ai-search-wrap,
.ai-filter-form .input-group {
position: relative !important;
}
.ai-btn-clear i,
.btn-clear i {
font-size: 0.8rem;
/* Slightly larger for visibility */
}
.ai-nav-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: rgba(255, 255, 255, 0.7);
/* 3D — gradient surface + beveled inner edges (top highlight + bottom shadow) */
background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
font-size: 1.15rem;
padding: 0;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
cursor: pointer;
}
.ai-nav-icon:hover {
color: #fff;
background: rgba(var(--ai-primary-rgb), 0.15);
border-color: var(--ai-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--ai-primary-rgb), 0.2);
}
.ai-nav-icon:active {
transform: translateY(0);
}
/* ---- Action Buttons (Table Rows) ---- */
.btn-action-qb {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border-radius: 8px;
border: 1px solid rgba(44, 160, 28, 0.3);
background: transparent;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-action-qb:hover {
background: rgba(44, 160, 28, 0.1);
border-color: #2ca01c;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(44, 160, 28, 0.2);
}
.btn-action-edit,
.btn-action-delete,
.btn-action-restore,
.btn-action-skip,
.btn-action-archive {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 8px !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-action-edit:hover,
.btn-action-delete:hover,
.btn-action-restore:hover,
.btn-action-skip:hover,
.btn-action-archive:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
.ai-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ai-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
}
.ai-dropdown {
background: var(--ai-card-bg);
border: 1px solid var(--ai-border);
border-radius: var(--ai-radius);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
padding: 6px 0;
outline: none !important;
}
:root.light-mode .ai-dropdown,
:root.light-mode .dropdown-menu,
:root.light-mode .ai-layout-panel {
background: var(--ai-card-bg) !important;
background-color: var(--ai-card-bg) !important;
border: 1px solid var(--ai-border) !important;
box-shadow: var(--ai-dropdown-shadow) !important;
backdrop-filter: blur(12px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}
.ai-dropdown .dropdown-item {
font-size: 0.85rem;
padding: 8px 16px;
color: var(--ai-text);
outline: none !important;
box-shadow: none !important;
}
.ai-dropdown .dropdown-item:hover,
.ai-dropdown .dropdown-item:focus {
background: var(--ai-table-row-hover);
color: var(--ai-text);
outline: none !important;
}
.ai-dropdown .dropdown-divider {
border-color: var(--ai-border);
}
.ai-dropdown .dropdown-header {
color: var(--ai-text-muted);
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.5px;
}
.text-primary { color: #3b82f6 !important; }
.text-success { color: #2ca01c !important; }
@keyframes ai-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ai-qb-loading {
animation: ai-spin 1s linear infinite !important;
pointer-events: none;
opacity: 0.7;
}
/* Fix row stacking for dropdowns */
tr:focus-within,
tr.ai-row-selected {
z-index: 5 !important;
position: relative;
}
/* position:relative without z-index avoids creating a stacking context,
which would trap sticky column cells and let scrolled content paint over them */
tr:hover {
position: relative;
}
tr:has(.show),
tr.ai-row-open {
z-index: 2000 !important; /* Ensure it stays above other rows (100) and sidebar (1040) */
position: relative;
}
.dropdown.show {
z-index: 2100 !important;
}
.dropdown-menu.show {
z-index: 2200 !important;
}
/* Improve QB button spacing and alignment */
.btn-action-qb {
width: 32px !important;
height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
background: transparent !important;
border: 1px solid rgba(44, 160, 28, 0.25) !important;
border-radius: 8px !important;
transition: all 0.2s ease !important;
}
.btn-action-qb:hover,
.btn-action-qb.show {
background: rgba(44, 160, 28, 0.08) !important;
border-color: #2ca01c !important;
}
.btn-action-qb img {
margin: 0 !important;
display: block;
}
.no-caret::after {
display: none !important;
}
/* Global fix for blue select/focus state in nav/dropdowns */
.ai-nav-icon:focus,
.dropdown-item:focus,
.btn:focus {
outline: none !important;
box-shadow: none !important;
}
/* Neutral active state (replaces Bootstrap blue / brand pink — matches table row) */
.dropdown-item:active,
.dropdown-item.active {
background-color: var(--ai-table-row-active) !important;
color: var(--ai-text) !important;
}
.hover-bg:hover {
background-color: var(--ai-primary-light) !important;
}
/* SECTION 03 · Sidebar — sidebar, content wrapper, footer */
/* ---- Sidebar ---- */
.ai-sidebar {
position: fixed;
top: var(--ai-navbar-height);
left: 0;
width: var(--ai-sidebar-width);
height: calc(100vh - var(--ai-navbar-height));
background: var(--ai-sidebar-bg);
display: flex;
flex-direction: column;
z-index: 1040;
transition: transform 0.3s ease;
border-right: 1px solid var(--ai-sidebar-border);
box-shadow: var(--ai-sidebar-panel-shadow);
overflow: visible !important;
}
:root:not(.light-mode) .ai-sidebar {
background: linear-gradient(180deg, #1c2135 0%, var(--ai-sidebar-bg) 40%);
box-shadow:
var(--ai-sidebar-panel-shadow),
inset -1px 0 0 rgba(255, 255, 255, 0.03);
}
.ai-sidebar-group-label {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px; /* Symmetric padding for vertical centering */
margin: 18px 10px 4px; /* Margin for pill-style effect */
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--ai-sidebar-section);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none !important;
position: relative;
user-select: none;
border-radius: 10px; /* Rounded corners for the hover pill */
}
.ai-sidebar-group-label:hover {
color: var(--ai-sidebar-text) !important;
background: var(--ai-sidebar-bg-hover);
padding-left: 24px; /* Keep the subtle shift */
}
/* Section Divider: Refined to work with the pill layout */
.ai-sidebar-group-label:not(:first-of-type)::before {
content: '';
position: absolute;
top: -10px;
left: 10px;
right: 10px;
height: 1px;
background: var(--ai-sidebar-border);
}
.ai-sidebar-group-label i {
font-size: 0.75rem;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.8;
}
.ai-sidebar-group-label[aria-expanded="true"] i {
transform: rotate(180deg);
}
:root.light-mode .ai-sidebar-group-label {
color: var(--ai-sidebar-section);
}
:root.light-mode .ai-sidebar-group-label:hover {
color: var(--ai-sidebar-text) !important;
background: var(--ai-sidebar-bg-hover);
}
:root.light-mode .ai-sidebar .nav-link.active {
background: rgba(var(--ai-primary-rgb), 0.1);
border-left-color: var(--ai-primary);
box-shadow: inset 4px 0 14px rgba(var(--ai-primary-rgb), 0.08);
}
:root.light-mode .ai-sidebar .nav-link.active .ai-nav-icon-badge {
background: rgba(var(--ai-primary-rgb), 0.15);
border-color: rgba(var(--ai-primary-rgb), 0.38);
box-shadow: var(--ai-sidebar-badge-shadow-active);
transform: translateY(-1px);
}
:root.light-mode .ai-sidebar .nav-link:not(.active) .ai-nav-icon-badge {
background: var(--ai-sidebar-icon-badge-bg);
border-color: var(--ai-sidebar-icon-badge-border);
box-shadow: var(--ai-sidebar-badge-shadow);
}
.ai-sidebar-nav {
flex: 1;
padding: 12px 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
min-height: 0;
/* Ensure flex child can scroll */
}
.ai-sidebar .nav-link {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 20px;
color: var(--ai-sidebar-text-muted);
font-size: 0.92rem;
font-weight: 500;
border-left: 4px solid transparent;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
}
.ai-nav-icon-badge {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--ai-sidebar-icon-badge-bg);
border: 1px solid var(--ai-sidebar-icon-badge-border);
border-radius: 9px;
box-shadow: var(--ai-sidebar-badge-shadow);
transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.ai-sidebar .nav-link i {
font-size: 1.05rem;
color: var(--ai-sidebar-text);
transition: all 0.25s ease;
}
.ai-sidebar .nav-link:hover {
color: var(--ai-sidebar-text);
background: var(--ai-sidebar-bg-hover);
padding-left: 24px;
}
/* Hover only: grey accent bar — pink reserved for .active */
.ai-sidebar .nav-link:hover:not(.active) {
border-left-color: rgba(255, 255, 255, 0.26);
}
:root.light-mode .ai-sidebar .nav-link:hover:not(.active) {
border-left-color: var(--ai-sidebar-hover-bar);
background: var(--ai-sidebar-bg-hover);
}
:root.light-mode .ai-sidebar .nav-link:hover:not(.active) .ai-nav-icon-badge {
background: rgba(255, 255, 255, 0.105);
border-color: rgba(255, 255, 255, 0.26);
box-shadow: var(--ai-sidebar-badge-shadow-hover);
transform: translateY(-1px) scale(1.02);
}
.ai-sidebar .nav-link:hover:not(.active) .ai-nav-icon-badge {
background: var(--ai-sidebar-bg-hover);
border-color: var(--ai-sidebar-icon-badge-border);
box-shadow: var(--ai-sidebar-badge-shadow-hover);
transform: translateY(-1px) scale(1.02);
}
.ai-sidebar .nav-link.active {
color: var(--ai-sidebar-text);
background: var(--ai-sidebar-bg-active);
border-left-color: var(--ai-primary);
font-weight: 700;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
inset 4px 0 12px rgba(var(--ai-primary-rgb), 0.12);
}
.ai-sidebar .nav-link.active .ai-nav-icon-badge {
background: rgba(var(--ai-primary-rgb), 0.2);
border-color: rgba(var(--ai-primary-rgb), 0.48);
box-shadow: var(--ai-sidebar-badge-shadow-active);
transform: translateY(-1px);
}
.ai-sidebar .nav-link.active:hover {
border-left-color: var(--ai-primary);
}
:root:not(.light-mode) .ai-sidebar .nav-link:not(.active) .ai-nav-icon-badge {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.2);
}
:root:not(.light-mode) .ai-sidebar .nav-link:hover:not(.active) .ai-nav-icon-badge {
background: rgba(255, 255, 255, 0.105);
border-color: rgba(255, 255, 255, 0.26);
box-shadow: var(--ai-sidebar-badge-shadow-hover);
}
:root:not(.light-mode) .ai-sidebar .nav-link.active .ai-nav-icon-badge,
:root:not(.light-mode) .ai-sidebar .nav-link.active:hover .ai-nav-icon-badge {
background: rgba(var(--ai-primary-rgb), 0.22);
border-color: rgba(var(--ai-primary-rgb), 0.5);
box-shadow: var(--ai-sidebar-badge-shadow-active);
}
/* Collapse animation */
.ai-sidebar .collapse {
transition: none;
}
.ai-sidebar .collapsing {
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Sidebar user panel (profile dropup) */
.ai-sidebar-user-panel {
border-color: var(--ai-sidebar-border) !important;
}
.ai-sidebar-user-btn {
background: var(--ai-sidebar-icon-badge-bg) !important;
border: 1px solid var(--ai-sidebar-icon-badge-border) !important;
color: var(--ai-sidebar-text) !important;
box-shadow: var(--ai-sidebar-badge-shadow) !important;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ai-sidebar-user-btn:hover,
.ai-sidebar-user-btn:focus,
.ai-sidebar-user-btn:active,
.ai-sidebar-user-btn.show {
background: var(--ai-sidebar-bg-hover) !important;
border-color: var(--ai-sidebar-icon-badge-border) !important;
color: var(--ai-sidebar-text) !important;
box-shadow: var(--ai-sidebar-badge-shadow-hover) !important;
transform: translateY(-1px);
}
.ai-sidebar-user-role {
font-size: 0.75rem;
color: var(--ai-sidebar-text-muted) !important;
line-height: 1.2;
margin-top: 2px;
}
.ai-sidebar-version {
color: var(--ai-sidebar-footer-muted);
font-size: 0.73rem;
letter-spacing: 0.3px;
}
/*
* Optional “pink rail” sidebar (user preference): saturated magenta surface, white type,
* frosted icon tiles, active state = darker pink row + white left bar. Scoped to .ai-sidebar only.
* Brand anchor: #e91e63 / #d81b60 — matches vivid intranet reference, works in both app light & dark themes.
*/
:root.pink-sidebar-mode .ai-sidebar {
/* Accent inside the rail reads as white (active bar, icon lift); avoids hot-pink-on-hot-pink */
--ai-primary: #ffffff;
--ai-primary-rgb: 255, 255, 255;
--ai-sidebar-bg: #e91e63;
--ai-sidebar-bg-hover: rgba(255, 255, 255, 0.12);
--ai-sidebar-bg-active: #ad1457;
--ai-sidebar-text: #ffffff;
--ai-sidebar-text-muted: rgba(255, 255, 255, 0.88);
--ai-sidebar-section: rgba(255, 255, 255, 0.92);
--ai-sidebar-border: rgba(255, 255, 255, 0.28);
--ai-sidebar-hover-bar: rgba(255, 255, 255, 0.55);
--ai-sidebar-icon-badge-bg: rgba(255, 255, 255, 0.14);
--ai-sidebar-icon-badge-border: rgba(255, 255, 255, 0.48);
--ai-sidebar-footer-muted: rgba(255, 255, 255, 0.65);
--ai-sidebar-badge-shadow:
0 2px 8px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
--ai-sidebar-badge-shadow-hover:
0 4px 14px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
--ai-sidebar-badge-shadow-active:
0 2px 12px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
:root.pink-sidebar-mode:not(.light-mode) .ai-sidebar {
--ai-sidebar-panel-shadow:
10px 0 40px rgba(0, 0, 0, 0.45),
inset -1px 0 0 rgba(255, 255, 255, 0.12);
background: var(--ai-pink-rail-gradient);
box-shadow: var(--ai-sidebar-panel-shadow);
}
:root.light-mode.pink-sidebar-mode .ai-sidebar {
--ai-sidebar-panel-shadow:
10px 0 36px rgba(173, 20, 87, 0.35),
inset -1px 0 0 rgba(255, 255, 255, 0.2);
background: var(--ai-pink-rail-gradient);
box-shadow: var(--ai-sidebar-panel-shadow);
}
/* Active row: darker magenta fill + crisp white rail (overrides generic primary bar rules) */
:root.pink-sidebar-mode .ai-sidebar .nav-link.active {
color: #ffffff;
background: var(--ai-sidebar-bg-active);
border-left-color: #ffffff !important;
font-weight: 700;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 4px 0 14px rgba(0, 0, 0, 0.18);
}
:root.pink-sidebar-mode .ai-sidebar .nav-link.active .ai-nav-icon-badge {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.6);
box-shadow: var(--ai-sidebar-badge-shadow-active);
}
:root.pink-sidebar-mode:not(.light-mode) .ai-sidebar .nav-link.active .ai-nav-icon-badge,
:root.pink-sidebar-mode:not(.light-mode) .ai-sidebar .nav-link.active:hover .ai-nav-icon-badge {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.6);
box-shadow: var(--ai-sidebar-badge-shadow-active);
}
:root.pink-sidebar-mode .ai-sidebar .nav-link.active:hover {
border-left-color: #ffffff !important;
}
:root.light-mode.pink-sidebar-mode .ai-sidebar .nav-link.active {
background: var(--ai-sidebar-bg-active);
border-left-color: #ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 4px 0 14px rgba(0, 0, 0, 0.16);
}
:root.light-mode.pink-sidebar-mode .ai-sidebar .nav-link.active .ai-nav-icon-badge,
:root.light-mode.pink-sidebar-mode .ai-sidebar .nav-link.active:hover .ai-nav-icon-badge {
background: rgba(255, 255, 255, 0.24);
border-color: rgba(255, 255, 255, 0.62);
box-shadow: var(--ai-sidebar-badge-shadow-active);
}
/* Win specificity over neutral rules that hard-code greys on badges / hovers */
:root.pink-sidebar-mode .ai-sidebar .nav-link:not(.active) .ai-nav-icon-badge {
background: var(--ai-sidebar-icon-badge-bg);
border-color: var(--ai-sidebar-icon-badge-border);
}
:root.pink-sidebar-mode .ai-sidebar .nav-link:hover:not(.active) {
border-left-color: rgba(255, 255, 255, 0.42) !important;
}
:root.pink-sidebar-mode .ai-sidebar .nav-link:hover:not(.active) .ai-nav-icon-badge {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.55);
}
:root.pink-sidebar-mode .ai-sidebar .ai-sidebar-group-label {
color: rgba(255, 255, 255, 0.9);
}
/* Settings — pill tabs + primary/outline buttons use rail gradient (not tied to “Pink sidebar”) */
.ai-settings-wrapper .ai-nav-tabs .nav-link.active {
background: var(--ai-pink-rail-gradient) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.28);
box-shadow:
0 4px 18px rgba(173, 20, 87, 0.38),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ai-settings-wrapper .ai-nav-tabs .nav-link:not(.active) {
border-color: rgba(var(--ai-app-accent-rgb), 0.28);
}
.ai-settings-wrapper .ai-nav-tabs .nav-link:hover:not(.active) {
border-color: rgba(var(--ai-app-accent-rgb), 0.5);
color: var(--ai-app-accent) !important;
background: rgba(var(--ai-app-accent-rgb), 0.07);
}
:root.light-mode .ai-settings-wrapper .ai-nav-tabs .nav-link:hover:not(.active) {
background: rgba(var(--ai-app-accent-rgb), 0.06);
}
.ai-settings-wrapper .btn-ai {
background: var(--ai-pink-rail-gradient) !important;
box-shadow:
0 3px 14px rgba(173, 20, 87, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.ai-settings-wrapper .btn-ai:hover {
filter: brightness(1.06);
box-shadow:
0 6px 22px rgba(173, 20, 87, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
.ai-settings-wrapper .btn-ai:focus,
.ai-settings-wrapper .btn-ai.show {
background: var(--ai-pink-rail-gradient) !important;
box-shadow:
0 0 0 3px rgba(var(--ai-app-accent-rgb), 0.35),
0 4px 14px rgba(173, 20, 87, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.ai-settings-wrapper .btn-ai-outline {
border-color: rgba(var(--ai-app-accent-rgb), 0.42);
color: var(--ai-app-accent);
}
.ai-settings-wrapper .btn-ai-outline:hover,
.ai-settings-wrapper .btn-ai-outline:active {
border-color: var(--ai-app-accent);
color: var(--ai-app-accent);
background: rgba(var(--ai-app-accent-rgb), 0.1) !important;
}
:root:not(.light-mode) .ai-settings-wrapper .btn-ai-outline {
color: #ffb3d4;
border-color: rgba(var(--ai-app-accent-rgb), 0.45);
}
:root:not(.light-mode) .ai-settings-wrapper .btn-ai-outline:hover,
:root:not(.light-mode) .ai-settings-wrapper .btn-ai-outline:active {
color: #fff;
background: rgba(var(--ai-app-accent-rgb), 0.18) !important;
border-color: rgba(var(--ai-app-accent-rgb), 0.65);
}
/* Wiki add/edit — primary/outline CTAs (TinyMCE toolbar uses global neutral .tox chrome below) */
#wiki-form-container .btn-ai {
background: var(--ai-pink-rail-gradient) !important;
box-shadow:
0 3px 14px rgba(173, 20, 87, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
#wiki-form-container .btn-ai:hover {
filter: brightness(1.06);
box-shadow:
0 6px 22px rgba(173, 20, 87, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
#wiki-form-container .btn-ai:focus,
#wiki-form-container .btn-ai.show {
background: var(--ai-pink-rail-gradient) !important;
box-shadow:
0 0 0 3px rgba(var(--ai-app-accent-rgb), 0.35),
0 4px 14px rgba(173, 20, 87, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
#wiki-form-container .btn-ai-outline {
border-color: rgba(var(--ai-app-accent-rgb), 0.42);
color: var(--ai-app-accent);
}
#wiki-form-container .btn-ai-outline:hover,
#wiki-form-container .btn-ai-outline:active {
border-color: var(--ai-app-accent);
background: rgba(var(--ai-app-accent-rgb), 0.1) !important;
}
:root:not(.light-mode) #wiki-form-container .btn-ai-outline {
color: #ffffff;
}
:root:not(.light-mode) #wiki-form-container .btn-ai-outline:hover,
:root:not(.light-mode) #wiki-form-container .btn-ai-outline:active {
color: #fff;
background: rgba(var(--ai-app-accent-rgb), 0.18) !important;
}
/* ---- Content Wrapper & Sticky Footer ---- */
.ai-content-wrapper {
display: flex;
flex-direction: column;
height: calc(100vh - var(--ai-navbar-height));
margin-left: var(--ai-sidebar-width);
margin-top: var(--ai-navbar-height);
transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--ai-scrollbar-thumb) transparent;
background-color: var(--ai-body-bg);
}
/* Premium Scrollbar for Content Wrapper */
.ai-content-wrapper::-webkit-scrollbar {
width: 6px;
}
.ai-content-wrapper::-webkit-scrollbar-track {
background: transparent;
}
.ai-content-wrapper::-webkit-scrollbar-thumb {
background: var(--ai-scrollbar-thumb);
border-radius: 10px;
}
.ai-content-wrapper::-webkit-scrollbar-thumb:hover {
background: var(--ai-scrollbar-hover);
}
/* ---- Collapsed Sidebar (QuickBooks Style) ---- */
/* Unified smooth transition on the sidebar — width, transform, and opacity */
.ai-sidebar {
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Nav-link spans — no opacity animation, text appears/disappears instantly */
.ai-sidebar .nav-link span {
transition: none;
opacity: 1;
}
/* Icon badge smoothly resizes */
.ai-sidebar .ai-nav-icon-badge {
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Nav-link layout direction change */
.ai-sidebar .nav-link {
transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 992px) {
:root.sidebar-collapsed {
/* 80px gives enough room for 'User Management' on 2 lines without mid-word breaks */
--ai-sidebar-width: 80px;
}
html.sidebar-collapsed .ai-sidebar {
width: var(--ai-sidebar-width);
}
/* When collapsed, hide group labels */
html.sidebar-collapsed .ai-sidebar .ai-sidebar-group-label {
display: none !important;
}
/* Force show collapse content so they are visible as items in the collapsed rail */
html.sidebar-collapsed .ai-sidebar .collapse {
display: block !important;
height: auto !important;
}
/* Divider between sections in collapsed mode */
html.sidebar-collapsed .ai-sidebar div[id^="sidebar-group-"] {
border-top: 1px solid var(--ai-sidebar-border);
margin-top: 6px;
padding-top: 6px;
}
/* Redefine link layout: icon above text, compact and centered */
html.sidebar-collapsed .ai-sidebar .nav-link {
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px;
border-left: none !important;
text-align: center;
}
/* Override horizontal shift on hover in collapsed mode */
html.sidebar-collapsed .ai-sidebar .nav-link:hover {
padding-left: 4px;
background: var(--ai-sidebar-bg-hover);
}
/* Text styles in collapsed links — 2-line clamp, no mid-word breaks */
html.sidebar-collapsed .ai-sidebar .nav-link span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.65rem;
line-height: 1.2;
font-weight: 500;
text-align: center;
color: var(--ai-sidebar-text-muted);
white-space: normal;
word-break: normal;
overflow-wrap: normal;
width: 100%;
}
html.sidebar-collapsed .ai-sidebar .nav-link.active span {
color: var(--ai-sidebar-text);
font-weight: 600;
}
/* User profile panel in collapsed mode: hide text details and caret, center avatar */
html.sidebar-collapsed .ai-sidebar .ai-sidebar-user-panel {
padding: 12px 6px !important;
}
html.sidebar-collapsed .ai-sidebar .ai-sidebar-user-btn {
padding: 6px !important;
justify-content: center;
}
html.sidebar-collapsed .ai-sidebar .ai-sidebar-user-btn .me-2 {
margin-right: 0 !important;
}
html.sidebar-collapsed .ai-sidebar .ai-sidebar-user-btn .d-flex.flex-column,
html.sidebar-collapsed .ai-sidebar .ai-sidebar-user-btn::after,
html.sidebar-collapsed .ai-sidebar .ai-sidebar-version {
display: none !important;
}
/* Clip sidebar content to the rail width */
html.sidebar-collapsed .ai-sidebar {
overflow: hidden !important;
}
/* Suppress Bootstrap collapsing animation when sidebar is in rail mode */
html.sidebar-collapsed .ai-sidebar .collapsing {
transition: none !important;
height: auto !important;
overflow: visible !important;
}
/* Ensure nav-link content doesn't overflow the narrow rail — kills horizontal scrollbar */
html.sidebar-collapsed .ai-sidebar .nav-link {
overflow: hidden;
width: 100%;
}
/* Kill horizontal scrollbar on the nav scroll container */
html.sidebar-collapsed .ai-sidebar .ai-sidebar-nav {
overflow-x: hidden;
}
/* Active state indicator: bottom border instead of left border in rail mode */
html.sidebar-collapsed .ai-sidebar .nav-link.active {
border-bottom: 2px solid var(--ai-primary) !important;
border-left: none !important;
}
/* Scale icon slightly larger when collapsed for better tap targets */
html.sidebar-collapsed .ai-sidebar .ai-nav-icon-badge {
width: 36px;
height: 36px;
}
/* Center nav items inside the narrow rail */
html.sidebar-collapsed .ai-sidebar-nav > ul.nav {
align-items: stretch;
}
/* Ensure the group divider wrappers don't bleed layout */
html.sidebar-collapsed .ai-sidebar div[id^="sidebar-group-"] > ul.nav {
align-items: stretch;
}
/* Hide the group-label chevron when nav is expanded in rail mode */
html.sidebar-collapsed .ai-sidebar .ai-sidebar-group-label i {
display: none;
}
}
/* ---- Main Content ---- */
.ai-main {
flex: 1 0 auto;
padding: 28px;
max-width: 100%;
display: flex;
flex-direction: column;
}
/* Ensure the last element in the main content area has no bottom margin to maintain consistent spacing with the footer */
.ai-main>.ai-card:last-child,
.ai-main>form:last-child>.ai-card:last-child,
.ai-main>.row:last-child,
.ai-main>.row:last-child>.col-12>.ai-card:last-child,
#table-card,
#audit-log-card {
margin-bottom: 0 !important;
}
/* ---- Footer ---- */
.ai-footer {
flex-shrink: 0;
padding: 16px 28px;
padding-bottom: max(16px, env(safe-area-inset-bottom));
font-size: 0.8rem;
color: var(--ai-text-muted);
border-top: 1px solid var(--ai-border);
background: var(--ai-dark);
}
/* Lighter footer in light / all-bright modes (var(--ai-dark) reads grey there).
Use the card surface so it stays distinct from the page bg, not a blend. */
:root.light-mode .ai-footer {
background: var(--ai-card-bg);
}
/* SECTION 04 · CardsForms — page header, cards, password toggle, form controls */
/* ---- Page Header ---- */
.ai-page-header {
margin-bottom: 28px;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(var(--ai-primary-rgb), 0.12);
position: relative;
animation: aiEntrance 0.4s ease-out both;
}
.ai-page-header.text-center::after {
left: 50%;
transform: translateX(-50%);
width: clamp(120px, 28vw, 220px);
background: linear-gradient(
90deg,
transparent 0%,
rgba(var(--ai-primary-rgb), 0.22) 28%,
var(--ai-primary) 50%,
rgba(var(--ai-primary-rgb), 0.22) 72%,
transparent 100%
);
}
.ai-page-header::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: clamp(72px, 12vw, 120px);
height: 3px;
border-radius: 4px;
background: linear-gradient(90deg, var(--ai-primary) 0%, rgba(var(--ai-primary-rgb), 0.35) 55%, transparent 100%);
}
.ai-page-header h1 {
font-size: 1.5rem;
font-weight: 800;
color: #fff;
margin-bottom: 2px;
letter-spacing: -0.02em;
}
.ai-page-header p {
color: var(--ai-text-muted);
font-size: 0.88rem;
margin-bottom: 0;
letter-spacing: 0.01em;
}
/* ---- Cards ---- */
.ai-card {
background: var(--ai-card-bg);
border: 1px solid var(--ai-border);
border-radius: var(--ai-radius);
box-shadow: var(--ai-card-shadow);
margin-bottom: 24px;
max-width: 100%;
display: flex;
flex-direction: column;
animation: aiEntrance 0.4s ease-out both;
}
.ai-card-body {
flex: 1;
/* Uniform padding incl. bottom so the last field/select isn't flush against
(and overflowing) the card's rounded bottom edge. Table cards use .p-0. */
padding: 1.25rem;
/* Allow dropdowns to bleed out */
overflow: visible !important;
display: flex;
flex-direction: column;
}
.ai-card-body.p-0 {
padding: 0 !important;
overflow: visible !important;
display: flex;
flex-direction: column;
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-card-body.p-0.ai-table-loaded {
opacity: 1;
}
/* Subtle spinner during initialization */
.ai-card-body.p-0:not(.ai-table-loaded)::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 -12px;
border: 2px solid var(--ai-primary-light);
border-top-color: var(--ai-primary);
border-radius: 50%;
animation: ai-spin 0.8s linear infinite;
z-index: 100;
}
@keyframes ai-spin {
to { transform: rotate(360deg); }
}
/* Dashboard Card Animations */
.ai-dashboard-card {
opacity: 0;
transform: translateY(30px);
}
.ai-dashboard-card.ai-dash-visible {
animation: aiDashboardSlideUp 0.7s cubic-bezier(0.2, 1, 0.2, 1) forwards;
}
@keyframes aiDashboardSlideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Dashboard Stat Card Animations */
.ai-stat-card-animate {
opacity: 0;
transform: translateX(-20px);
animation: aiDashboardFadeInLeft 0.6s cubic-bezier(0.2, 1, 0.2, 1) forwards;
}
@keyframes aiDashboardFadeInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Container Fade-out Effect */
.ai-card-fade-bottom {
position: relative;
}
.ai-card-fade-bottom>.ai-card-body {
overflow: auto !important;
/* Clip scrolling content (e.g. a hovered row's pink accent bar) to the
card's rounded bottom corners instead of letting it poke past them. */
border-bottom-left-radius: var(--ai-radius);
border-bottom-right-radius: var(--ai-radius);
}
.ai-card-fade-bottom::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: linear-gradient(to bottom, transparent 0%, var(--ai-card-bg) 70%);
pointer-events: none;
z-index: 999;
border-bottom-left-radius: var(--ai-radius);
border-bottom-right-radius: var(--ai-radius);
transition: opacity 0.25s ease;
}
.ai-card-fade-bottom.scrolled-to-bottom::after {
opacity: 0;
}
:root.light-mode .ai-card-fade-bottom::after {
background: linear-gradient(to bottom, transparent 0%, var(--ai-card-bg) 70%);
}
.ai-card-body>*:last-child {
margin-bottom: 0;
}
/* Remove bottom margin for main content cards on module pages */
.ai-main>.ai-card:not(.mb-4):not(.mb-5) {
margin-bottom: 0;
}
/* Table specific overrides */
.ai-table {
margin-bottom: 0 !important;
width: 100% !important;
min-width: 100% !important;
border-collapse: separate;
border-spacing: 0;
}
/* Header cells – consistent, readable style */
.ai-table thead th {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.045em;
text-transform: uppercase;
white-space: nowrap;
padding: 11px 14px;
vertical-align: middle;
}
/* Body cells – comfortable density */
.ai-table tbody td {
padding: 10px 14px;
vertical-align: middle;
font-size: 0.875rem;
line-height: 1.45;
}
.table-responsive {
margin-bottom: 0 !important;
overflow-x: auto !important;
overflow-y: visible !important;
position: relative;
/* Initialise the scroll-shadow custom property */
--sticky-shadow-opacity: 0;
/* Custom Scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--ai-border) transparent;
}
/* ---- Admin Special Card ---- */
.ai-admin-card {
background: var(--ai-card-bg);
border: 1px solid var(--ai-primary);
border-radius: var(--ai-radius);
margin-bottom: 24px;
}
.ai-admin-card .ai-card-header h5 i {
color: var(--ai-primary) !important;
}
/* Light Mode Overrides for Admin Card */
:root.light-mode .ai-admin-card {
border-color: rgba(233, 30, 140, 0.4);
box-shadow: 0 4px 20px rgba(233, 30, 140, 0.05);
}
:root.light-mode .text-accent {
color: var(--ai-primary) !important;
}
/* Inline-styled magenta headers (e.g. some PHP modals) — always use rail token */
.modal-header[style*='#e91e63'] {
background: var(--ai-pink-rail-gradient) !important;
}
/* Permissions matrix inside role modal — roomier layout, consistent columns */
.ai-role-modal .ai-role-perm-table-wrap {
padding-bottom: 4px;
border: none;
}
/* Toggle-switch rows for binary permissions (QuickBooks, Settings) */
.ai-role-modal .perm-toggle-row td {
padding-top: 0.2rem !important;
padding-bottom: 0.2rem !important;
}
/* Mobile Responsive */
/* Minimize Button Styling */
.ai-card-minimize {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: var(--ai-text-muted);
transition: var(--ai-transition);
border: none;
background: transparent;
cursor: pointer;
margin-left: auto;
}
.ai-card-minimize:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--ai-primary);
}
:root.light-mode .ai-card-minimize:hover {
background: rgba(0, 0, 0, 0.05);
}
.ai-card-header>.btn-ai-outline {
margin-left: 10px;
}
/* Ensure header content has proper alignment */
.ai-card-header {
padding: 16px 24px;
border-bottom: 1px solid var(--ai-border);
display: flex;
align-items: center;
position: relative !important;
z-index: 250 !important;
}
:root:not(.light-mode) .ai-card-header {
background: transparent;
}
.ai-card-header h5 {
display: grid !important;
grid-template-columns: auto 1fr;
column-gap: 12px;
align-items: center;
font-size: 0.95rem;
font-weight: 700;
color: var(--ai-text);
margin: 0;
}
/* Explicit title cell: bare text nodes in a grid can fail to paint in some layout paths (dashboard log cards). */
.ai-card-header h5 .ai-card-header-title {
grid-column: 2;
min-width: 0;
}
.ai-card-header h5 i {
grid-row: 1 / 3;
margin-right: 0 !important;
font-size: 1.1rem;
color: var(--ai-text-muted);
/* Softer icon color */
opacity: 0.8;
}
.ai-record-count {
grid-column: 2;
display: block;
font-size: 0.7rem;
font-weight: 600;
color: var(--ai-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 1px;
}
/* ---- Password Visibility Toggle ---- */
.ai-password-group {
position: relative;
}
.ai-password-group .ai-password-toggle {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 10;
padding: 0 12px !important;
border: none !important;
background: transparent !important;
color: var(--ai-text-muted);
line-height: 1;
}
.ai-password-group .ai-password-toggle:hover {
color: var(--ai-primary);
}
.ai-card-body.p-0 {
padding: 0 !important;
}
/* ---- Browser Autofill Custom Styling ---- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px var(--ai-input-bg) inset !important;
-webkit-text-fill-color: var(--ai-text) !important;
caret-color: var(--ai-text) !important;
transition: background-color 5000s ease-in-out 0s;
}
/* Firefox Autofill */
input:autofill,
textarea:autofill,
select:autofill {
background-color: var(--ai-input-bg) !important;
/* Standard property for Firefox */
color: var(--ai-text) !important;
box-shadow: 0 0 0 1000px var(--ai-input-bg) inset !important;
}
/* ---- Form controls (dark) ---- */
.ai-card .form-label {
display: block;
color: var(--ai-text-muted);
white-space: nowrap;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
margin-bottom: 6px;
}
/* Descriptive sub-text inside a label must wrap — the label itself is nowrap,
and white-space inherits, so without this a long hint overflows horizontally. */
.ai-card .form-label small,
.ai-card .form-label .d-block {
white-space: normal;
text-transform: none;
letter-spacing: normal;
}
.ai-card .form-control {
background: var(--ai-input-bg);
border: 1px solid var(--ai-border);
color: var(--ai-text);
font-size: 0.85rem;
border-radius: 50px;
padding: 8px 16px;
width: 100%;
min-height: 38px;
height: auto;
transition: all 0.2s ease;
}
.ai-card .input-group .form-control {
width: 1%;
/* Allow flexbox to handle width in input-groups */
flex: 1 1 auto;
}
.input-group-text {
border: 1px solid var(--ai-border);
transition: all 0.2s ease;
}
.ai-card .form-select {
background: var(--ai-select-bg);
border: 1px solid var(--ai-border);
color: var(--ai-text);
font-size: 0.85rem;
border-radius: 50px;
padding: 8px 16px;
width: 100%;
min-height: 38px;
height: auto;
transition: all 0.2s ease;
}
.ai-card .form-control::placeholder {
color: var(--ai-placeholder);
}
.ai-card .form-control:focus,
.ai-card .form-select:focus {
background: var(--ai-input-bg);
border-color: var(--ai-primary);
box-shadow: 0 0 0 3px rgba(var(--ai-primary-rgb), 0.18), 0 0 16px rgba(var(--ai-primary-rgb), 0.12);
color: var(--ai-text);
outline: none;
}
textarea.form-control,
.ai-card textarea.form-control {
height: auto !important;
border-radius: 12px !important;
padding: 12px !important;
resize: none !important;
overflow-y: auto !important;
}
.ai-card .row.g-3>[class*='col'] {
min-width: 0;
}
.form-select,
.ai-card .form-select,
.form-select-sm {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-color: var(--ai-select-bg) !important;
background-image: var(--ai-select-icon) !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 14px 12px !important;
border: 1px solid #3a3a3a !important;
color: var(--ai-text) !important;
padding-right: 36px !important;
position: relative;
color-scheme: dark;
}
input[type='date']::-webkit-calendar-picker-indicator {
filter: invert(0.7);
cursor: pointer;
}
input[type='date'],
input[type='number'],
select {
color-scheme: dark;
}
/* Standardized Table Filter Row (Above Table Headers) */
.ai-table-filters {
display: flex;
padding: 1.25rem 1.5rem;
background: var(--ai-filter-bar-bg);
border-top: 1px solid var(--ai-filter-border-top);
border-bottom: 1px solid var(--ai-border);
position: relative;
z-index: 200;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.ai-table-filters form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem;
width: 100%;
}
.ai-table-filters .ms-auto {
display: flex;
align-items: center;
}
.ai-filter-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-end !important;
gap: 0.75rem 1.25rem !important;
}
.ai-filter-col {
display: flex;
flex-direction: column;
gap: 6px;
flex: 0 0 auto;
min-width: 180px;
max-width: 300px;
}
.ai-filter-col .ts-wrapper,
.ai-filter-col .ai-filter-input,
.ai-filter-col .ai-select,
.ai-table-filters .ai-select {
width: 100% !important;
}
.ai-filter-col .ai-select .ai-select-btn,
.ai-table-filters .ai-select .ai-select-btn,
.ai-filter-col .ai-date-dropdown-btn {
width: 100% !important;
justify-content: space-between !important;
}
/* Regular (AdeptSelect) filter dropdowns must use the SAME control surface as the
searchbar (Tom Select) ones beside them. The base .ai-select-btn uses the lighter
--ai-card-bg; in the filter row it has to be --ai-input-bg (what .ts-control uses),
else the regular dropdown looks lighter than the searchable one. Tokens adapt to
light/dark, so this one rule matches in both modes. */
.ai-filter-col .ai-select .ai-select-btn,
.ai-table-filters .ai-select .ai-select-btn,
.ai-filter-row .ai-select .ai-select-btn {
background: var(--ai-filter-ctrl-gloss), var(--ai-input-bg) !important;
color: var(--ai-text) !important;
}
/* Same surface for the date-range dropdown button (it also defaults to the lighter
--ai-card-bg). All filter rows nest under .ai-table-filters, which catches the
.ov-filter-col / .ai-filter-col variants. */
.ai-filter-col .ai-date-dropdown-btn,
.ai-table-filters .ai-date-dropdown-btn,
.ai-filter-row .ai-date-dropdown-btn {
background: var(--ai-filter-ctrl-gloss), var(--ai-input-bg) !important;
}
/* AdeptSelect filter dropdowns (e.g. Status, when not TomSelect-searchable) —
shrink to match the other filter-row pills. Scoped to the filter row rather
than the base .ai-select-btn, which is a general-purpose control also used
at full size in forms/modals outside the table filter bars. */
.ai-filter-col .ai-select-btn,
.ai-table-filters .ai-select-btn,
.ai-filter-row .ai-select-btn {
min-height: 34px !important;
height: 34px !important;
max-height: 34px !important;
font-size: 0.76rem !important;
padding: 0 12px 0 14px !important;
}
.ai-filter-col .ai-select-chevron,
.ai-table-filters .ai-select-chevron,
.ai-filter-row .ai-select-chevron {
width: 11px;
height: 11px;
}
.ai-filter-label {
display: block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--ai-text-muted);
opacity: 1;
margin-bottom: 2px;
}
label.ai-filter-label {
padding-left: 16px;
}
.ai-filter-input.form-select,
.ai-filter-input.form-control {
min-height: 34px !important;
height: 34px !important;
font-size: 0.76rem !important;
padding: 0 32px 0 14px !important;
border-radius: 50px !important;
/* Pill shape to avoid square edges */
background-color: var(--ai-filter-input-bg) !important;
border: 1px solid var(--ai-filter-input-border) !important;
box-shadow: var(--ai-filter-native-shadow) !important;
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
backdrop-filter: blur(4px);
}
.ai-filter-input:focus,
.ai-filter-input.ai-filter-active {
border-color: var(--ai-primary) !important;
background-color: var(--ai-filter-bg) !important;
box-shadow: 0 0 0 1px var(--ai-primary), 0 0 0 3px var(--ai-primary-light) !important;
z-index: 201;
}
.ai-filter-input.ai-filter-active {
background-color: rgba(var(--ai-primary-rgb), 0.05) !important;
}
/* Ensure source selects are completely hidden */
.ai-table-filters select.ai-filter-input,
.ai-filter-row select.ai-filter-input {
display: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
position: absolute !important;
}
.ai-filter-input.form-control {
padding-right: 12px !important;
}
.btn-ai-clear {
width: 34px;
height: 34px;
border-radius: 50px;
border: 1px solid var(--ai-border);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%), var(--ai-input-bg) !important;
display: flex;
align-items: center;
justify-content: center;
color: var(--ai-text-muted);
transition: all 0.2s ease;
text-decoration: none !important;
padding: 0 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
}
.btn-ai-clear:hover {
background: rgba(255, 71, 87, 0.08) !important;
color: var(--ai-danger) !important;
border-color: var(--ai-danger) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(255, 71, 87, 0.1);
}
.btn-ai-clear i {
font-size: 1.2rem;
margin: 0 !important;
line-height: 1;
}
:root.light-mode .btn-ai-clear {
background: linear-gradient(180deg, var(--ai-select-bg) 0%, var(--ai-input-bg) 100%);
border-color: var(--ai-filter-border);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
/* Specific Filter Bar Styles (Responsive & Theme Adaptive) */
.ai-filter-form .input-group {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
background: var(--ai-filter-bg);
border: 1px solid var(--ai-filter-border);
border-radius: 6px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ai-filter-form .input-group:focus-within {
border-color: var(--ai-primary);
box-shadow: 0 0 0 3px var(--ai-primary-light);
}
.ai-filter-form .input-group-text {
background: transparent !important;
border: none !important;
color: var(--ai-filter-icon) !important;
padding-left: 10px;
}
.ai-filter-form .form-control {
background: transparent !important;
border: none !important;
color: var(--ai-filter-text) !important;
font-size: 0.8rem;
padding: 7px 10px 7px 0;
width: auto !important;
flex: 1 1 auto !important;
box-shadow: none !important;
}
.ai-filter-form .form-control:focus {
box-shadow: none !important;
}
/* Standalone Selects (No Wrapper) in Filter Bars */
.ai-filter-form .form-select,
.ai-filter-form select:not(.flatpickr-monthDropdown-months) {
width: auto !important;
flex: 0 1 auto !important;
background-color: var(--ai-filter-bg) !important;
background-image: var(--ai-select-icon) !important;
border: 1px solid var(--ai-filter-border) !important;
color: var(--ai-filter-text) !important;
border-radius: 6px;
font-size: 0.8rem;
padding: 6px 32px 6px 10px !important;
min-height: 33px;
/* Match input-group-sm height */
}
/* SECTION 05 · Tables — tables & overflow aesthetics, bulk selection */
/* ---- Tables ---- */
/* ---- Tables & Overflow Aesthetics ---- */
.table-responsive {
margin-bottom: 0 !important;
position: relative;
overflow-x: auto;
/* Premium Scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--ai-primary) rgba(0, 0, 0, 0.05);
}
/* Custom Scrollbar for Webkit */
.table-responsive::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.table-responsive::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.02);
border-radius: 10px;
}
.table-responsive::-webkit-scrollbar-thumb {
background: #e2e8f0; /* Default subtle */
border-radius: 10px;
border: 2px solid transparent;
background-clip: content-box;
transition: background 0.2s;
}
.table-responsive:hover::-webkit-scrollbar-thumb {
background: var(--ai-primary);
}
.table-responsive::-webkit-scrollbar-thumb:hover {
background: var(--ai-text-muted);
}
/* Scroll Edge Shadows (Ambient Indicators)
Uses background-attachment: local/scroll trick to show shadows only when content is hidden.
*/
.table-responsive {
margin-bottom: 0 !important;
position: relative;
overflow-x: auto;
overflow-y: visible !important;
/* Premium Scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--ai-border) transparent;
background: transparent !important;
}
:root.light-mode .table-responsive {
background: transparent !important;
}
.ai-table,
.table {
margin-bottom: 0;
font-size: 0.85rem;
--bs-table-bg: transparent;
--bs-table-color: var(--ai-text);
--bs-table-border-color: var(--ai-border);
--bs-table-accent-bg: transparent;
--bs-table-striped-color: var(--ai-text);
--bs-table-active-color: var(--ai-text);
--bs-table-hover-color: var(--ai-text);
--bs-table-accent-bg: transparent;
--bs-table-hover-bg: rgba(255, 255, 255, 0.04);
--bs-table-hover-color: var(--ai-text);
--bs-table-striped-bg: rgba(255, 255, 255, 0.02);
color: var(--ai-text);
background: transparent;
border-collapse: separate;
/* Required for sticky borders */
border-spacing: 0;
}
.ai-table thead th {
background: linear-gradient(180deg, var(--ai-table-head-bg-start) 0%, var(--ai-table-head-bg-end) 100%);
/* Aligned with app slate surfaces (avoids flat blue-grey) */
backdrop-filter: none;
-webkit-backdrop-filter: none;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(241, 245, 249, 0.72);
border-top: 0 !important;
border-bottom: 1px solid var(--ai-border);
border-right: none;
padding: 12px 32px 12px 16px;
white-space: nowrap;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}
:root.light-mode .ai-table thead th {
background: linear-gradient(180deg, var(--ai-table-head-bg-start) 0%, var(--ai-table-head-bg-end) 100%) !important;
background-color: transparent !important;
--bs-table-bg: var(--ai-table-head-bg-start) !important;
color: #334155 !important;
/* Slightly darker text for better legibility */
border-bottom: 2px solid rgba(0, 0, 0, 0.14) !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09);
}
.ai-col-actions,
.ai-table thead th.ai-col-actions,
.ai-table tbody td.ai-col-actions {
width: 1% !important;
white-space: nowrap !important;
padding: 0 !important;
min-width: 0 !important;
text-align: left !important;
}
.ai-col-actions > div,
.ai-col-actions .d-flex {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: fit-content !important;
margin-left: auto !important;
padding: 12px 16px !important;
}
.ai-col-actions .form-check-input {
margin: 0 !important;
}
/* Specific Grey Header for Application Change Log (Audit Log) */
:root.light-mode .ai-table-audit thead th {
background: linear-gradient(180deg, var(--ai-table-head-bg-start) 0%, var(--ai-table-head-bg-end) 100%) !important;
background-color: transparent !important;
--bs-table-bg: var(--ai-table-head-bg-start) !important;
}
/* Sticky First Column - position & background (shadow handled in resizing section) */
.ai-table th.ai-col-sticky,
.ai-table td.ai-col-sticky,
.ai-table th.ai-col-company,
.ai-table td.ai-col-company {
position: -webkit-sticky !important;
position: sticky !important;
left: 0 !important;
z-index: 150 !important;
background-color: var(--ai-card-bg) !important;
border-right: none !important;
}
.ai-table thead th.ai-col-sticky,
.ai-table thead th.ai-col-company,
:root.light-mode .ai-table thead th.ai-col-sticky,
:root.light-mode .ai-table thead th.ai-col-company {
z-index: 160 !important;
background: var(--ai-pink-rail-gradient) !important;
background-color: transparent !important;
color: #ffffff !important;
font-weight: 800;
border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
border-right: none !important;
/* Suppress downward shadow that bleeds pink from the gradient background */
box-shadow: none !important;
}
:root.light-mode .ai-table thead th.ai-col-sticky,
:root.light-mode .ai-table thead th.ai-col-company {
border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
border-right: none !important;
}
/* Wiki: extra sort emphasis on sticky Title column */
#wiki-table thead th.ai-col-sticky.ai-sort-active {
background: var(--ai-pink-rail-gradient) !important;
color: #ffffff !important;
box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.38) !important;
}
/* Wiki list: slate headers on secondary columns */
#wiki-table thead th:not(.ai-col-sticky) {
background: linear-gradient(180deg, var(--ai-table-head-bg-start) 0%, var(--ai-table-head-bg-end) 100%) !important;
color: rgba(241, 245, 249, 0.82) !important;
}
:root.light-mode #wiki-table thead th:not(.ai-col-sticky) {
background: linear-gradient(180deg, var(--ai-table-head-bg-start) 0%, var(--ai-table-head-bg-end) 100%) !important;
color: #475569 !important;
box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
}
/*
* All bright — table headers (must follow base .ai-table / #wiki-table rules; those use !important in light mode)
*/
:root.all-bright-mode:not(.light-mode) .ai-table thead th:not(.ai-col-sticky):not(.ai-col-company):not(.ai-col-client),
:root.all-bright-mode:not(.light-mode) .ai-table-audit thead th:not(.ai-col-sticky):not(.ai-col-company):not(.ai-col-client),
:root.all-bright-mode:not(.light-mode) #audit-log-card .dash-audit-table thead th:not(.ai-col-sticky):not(.ai-col-company):not(.ai-col-client),
:root.all-bright-mode:not(.light-mode) #wiki-table thead th:not(.ai-col-sticky) {
background-color: transparent !important;
background-image: linear-gradient(180deg, var(--ai-table-head-bg-start) 0%, var(--ai-table-head-bg-end) 100%) !important;
color: rgba(241, 245, 249, 0.92) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22) !important;
}
:root.light-mode.all-bright-mode .ai-table thead th:not(.ai-col-sticky):not(.ai-col-company):not(.ai-col-client),
:root.light-mode.all-bright-mode .ai-table-audit thead th:not(.ai-col-sticky):not(.ai-col-company):not(.ai-col-client),
:root.light-mode.all-bright-mode #audit-log-card .dash-audit-table thead th:not(.ai-col-sticky):not(.ai-col-company):not(.ai-col-client),
:root.light-mode.all-bright-mode #wiki-table thead th:not(.ai-col-sticky) {
background-color: transparent !important;
background-image: linear-gradient(180deg, var(--ai-table-head-bg-start) 0%, var(--ai-table-head-bg-end) 100%) !important;
--bs-table-bg: var(--ai-table-head-bg-start) !important;
color: #334155 !important;
border-bottom: 2px solid rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.07) !important;
}
:root.light-mode.all-bright-mode .ai-table thead th.ai-col-sticky,
:root.light-mode.all-bright-mode .ai-table thead th.ai-col-company,
:root.light-mode.all-bright-mode .ai-table thead th.ai-col-client {
box-shadow: none;
}
/* Sticky column body cells — brighter card surface in all bright. Scoped to normal
rows only: on selected / hovered / active rows the row-state tint must win for
every column (otherwise the non-sticky Client column stayed white when its row
was bulk-selected, unlike the sticky/company columns which have their own
state overrides). */
:root.all-bright-mode .ai-table tbody tr:not(.ai-row-selected):not(:hover):not(.table-active) td.ai-col-sticky,
:root.all-bright-mode .ai-table tbody tr:not(.ai-row-selected):not(:hover):not(.table-active) td.ai-col-company,
:root.all-bright-mode .ai-table tbody tr:not(.ai-row-selected):not(:hover):not(.table-active) td.ai-col-client {
background-color: var(--ai-card-bg) !important;
}
:root.all-bright-mode .ai-table-filters {
background: var(--ai-filter-bar-bg) !important;
}
/* Wiki list rows: zebra on scrollable columns only — sticky column matches Projects (solid card surface) */
:root.light-mode #wiki-table tbody tr:nth-child(odd) td:not(.ai-col-sticky):not(.ai-col-company) {
background-color: color-mix(in srgb, var(--ai-card-bg) 92%, var(--ai-body-bg) 8%) !important;
}
:root.light-mode #wiki-table tbody tr:nth-child(even) td:not(.ai-col-sticky):not(.ai-col-company) {
background-color: color-mix(in srgb, var(--ai-card-bg) 78%, var(--ai-input-bg) 22%) !important;
}
:root.light-mode .wiki-pages-table-card .table-responsive {
background: color-mix(in srgb, var(--ai-input-bg) 35%, var(--ai-card-bg) 65%);
border-radius: 0 0 var(--ai-radius) var(--ai-radius);
}
/* Zebra rows use #wiki-table + nth-child — re-assert row states (beat striped td backgrounds).
* Hover/selected/active must use the same td:not(...) specificity as zebra or plain `td` loses and only the sticky column paints. */
:root.light-mode #wiki-table tbody tr:hover:not(.ai-row-selected) td:not(.ai-col-sticky):not(.ai-col-company) {
background-color: var(--ai-table-row-hover) !important;
background-image: none !important;
}
:root.light-mode #wiki-table tbody tr:hover:not(.ai-row-selected) td.ai-col-sticky {
background-color: var(--ai-table-row-hover) !important;
background-image: none !important;
z-index: 151 !important;
}
:root.light-mode #wiki-table tbody tr.ai-row-selected:hover td:not(.ai-col-sticky):not(.ai-col-company) {
background-color: var(--ai-table-row-bulk-hover) !important;
background-image: none !important;
}
:root.light-mode #wiki-table tbody tr.ai-row-selected:hover td.ai-col-sticky {
background-color: var(--ai-table-row-bulk-hover) !important;
background-image: none !important;
z-index: 151 !important;
}
:root.light-mode #wiki-table tbody tr.ai-row-selected:not(:hover) td:not(.ai-col-sticky):not(.ai-col-company),
:root.light-mode #wiki-table tbody tr.ai-row-selected:not(:hover) td.ai-col-sticky {
background-color: var(--ai-table-row-bulk-selected) !important;
background-image: none !important;
}
:root.light-mode #wiki-table tbody tr.table-active td:not(.ai-col-sticky):not(.ai-col-company),
:root.light-mode #wiki-table tbody tr.table-active td.ai-col-sticky {
background-color: var(--ai-table-row-active) !important;
background-image: none !important;
z-index: 151 !important;
}
/* Wiki editor form — same inset fields + hairline border as other ai-card forms (light) */
:root.light-mode #wiki-form-container #mainAddEditForm .form-control,
:root.light-mode #wiki-form-container #mainAddEditForm .form-select {
background-color: var(--ai-card-bg) !important;
border: 1px solid var(--ai-filter-border) !important;
box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
}
:root.light-mode #wiki-form-container .tox-tinymce {
border: 1px solid var(--ai-filter-border) !important;
box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
}
:root.light-mode #wiki-form-container .tox .tox-toolbar-overlord,
:root.light-mode #wiki-form-container .tox .tox-toolbar__primary,
:root.light-mode #wiki-form-container .tox .tox-toolbar__overflow,
:root.light-mode #wiki-form-container .tox .tox-statusbar,
:root.light-mode #wiki-form-container .tox .tox-edit-area {
background: var(--ai-card-bg) !important;
}
:root.light-mode #wiki-form-container #mainAddEditForm .form-select {
background-image: var(--ai-select-icon) !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 14px 12px !important;
border-radius: 50px !important;
}
:root.light-mode #wiki-form-container #mainAddEditForm .form-control:not(textarea) {
border-radius: 50px !important;
}
:root.light-mode #wiki-form-container #mainAddEditForm textarea.form-control {
border-radius: 12px !important;
}
:root.light-mode #wiki-form-container #mainAddEditForm .form-control:focus,
:root.light-mode #wiki-form-container #mainAddEditForm .form-select:focus {
background-color: var(--ai-select-bg) !important;
border-color: var(--ai-primary) !important;
box-shadow: 0 0 0 3px rgba(var(--ai-primary-rgb), 0.14), inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
:root.light-mode #wiki-form-container #mainAddEditForm > .col-lg-3 > .ai-card {
background: var(--ai-card-bg) !important;
border: 1px solid var(--ai-border) !important;
box-shadow: none;
}
:root.light-mode #wiki-form-container #mainAddEditForm .ts-wrapper.single .ts-control {
background: var(--ai-card-bg) !important;
border: 1px solid var(--ai-filter-border) !important;
box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
:root.light-mode #wiki-form-container #mainAddEditForm .ts-wrapper.single .ts-control.focus,
:root.light-mode #wiki-form-container #mainAddEditForm .ts-wrapper.single.focus .ts-control {
background: var(--ai-select-bg) !important;
border: 1px solid var(--ai-primary) !important;
box-shadow:
0 0 0 3px rgba(var(--ai-primary-rgb), 0.14),
inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
:root.light-mode #wiki-form-container .tox .tox-edit-area__iframe {
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}
#wiki-table thead th.ai-sort-active:not(.ai-col-sticky) {
background: linear-gradient(180deg, rgba(var(--ai-primary-rgb), 0.24) 0%, rgba(var(--ai-primary-rgb), 0.07) 100%) !important;
color: var(--ai-text) !important;
box-shadow: inset 0 -2px 0 rgba(var(--ai-primary-rgb), 0.4) !important;
}
:root.light-mode #wiki-table thead th.ai-sort-active:not(.ai-col-sticky) {
background: linear-gradient(180deg, rgba(var(--ai-primary-rgb), 0.14) 0%, rgba(var(--ai-primary-rgb), 0.04) 100%) !important;
color: var(--ai-text) !important;
}
/* Light Mode Sticky Solids */
:root.light-mode .ai-table td.ai-col-sticky,
:root.light-mode .ai-table td.ai-col-company {
background-color: var(--ai-card-bg) !important;
}
/* Bulk selection — every cell uses the same solid fill (sticky + scroll columns stay matched) */
.ai-table tbody tr.ai-row-selected:not(:hover) td {
background-color: var(--ai-table-row-bulk-selected) !important;
background-image: none !important;
}
.ai-table tbody tr.ai-row-selected:not(:hover) td.ai-col-sticky,
.ai-table tbody tr.ai-row-selected:not(:hover) td.ai-col-company {
background-color: var(--ai-table-row-bulk-selected) !important;
background-image: none !important;
z-index: 151 !important;
}
.ai-table tbody tr.ai-row-selected:hover td {
background-color: var(--ai-table-row-bulk-hover) !important;
background-image: none !important;
}
.ai-table tbody tr.ai-row-selected:hover td.ai-col-sticky,
.ai-table tbody tr.ai-row-selected:hover td.ai-col-company {
background-color: var(--ai-table-row-bulk-hover) !important;
background-image: none !important;
z-index: 151 !important;
}
/* Active edit row — after bulk so it supersedes bulk tint when both apply */
.ai-table tbody tr.table-active td {
background-color: var(--ai-table-row-active) !important;
background-image: none !important;
}
.ai-table tbody tr.table-active td.ai-col-sticky,
.ai-table tbody tr.table-active td.ai-col-company {
background-color: var(--ai-table-row-active) !important;
background-image: none !important;
z-index: 151 !important;
}
:root.light-mode .ai-table tbody tr.table-active td {
background-color: var(--ai-table-row-active) !important;
background-image: none !important;
}
:root.light-mode .ai-table tbody tr.table-active td.ai-col-sticky,
:root.light-mode .ai-table tbody tr.table-active td.ai-col-company {
background-color: var(--ai-table-row-active) !important;
background-image: none !important;
z-index: 151 !important;
}
.ai-table th {
position: relative;
}
.ai-table td {
overflow: hidden;
text-overflow: ellipsis;
}
.ai-table tr.ai-filter-row th {
overflow: visible;
/* Filters need to show dropdowns */
}
.ai-table .ai-filter-input,
.ai-table .ai-select,
.ai-table .ai-date-filter-wrap {
max-width: 100% !important;
min-width: 0 !important;
}
/* Sticky Footer (Connects the sticky column from bottom) */
.ai-table tfoot {
position: -webkit-sticky;
position: sticky;
bottom: 0;
z-index: 25;
}
.ai-table tfoot td {
background: var(--ai-card-bg);
border-top: 2px solid var(--ai-border);
padding: 12px 16px;
font-weight: 600;
color: var(--ai-text-muted);
border-bottom: none;
}
.ai-table tfoot td.ai-col-sticky,
.ai-table tfoot td.ai-col-company {
position: -webkit-sticky !important;
position: sticky !important;
left: 0 !important;
z-index: 30 !important;
background: var(--ai-card-bg) !important;
border-top: 2px solid var(--ai-primary) !important;
/* Depth comes from the shared scroll-driven .ai-col-sticky::after gradient
(0 opacity at rest), matching the body rows. A fixed box-shadow here showed
an always-on divider in the totals section even when not horizontally scrolled. */
}
:root.light-mode .ai-table tfoot td {
background: var(--ai-card-bg) !important;
}
.ai-table-status-bar {
background: rgba(var(--ai-primary-rgb), 0.03);
/* No top border — the last content row (whose own border is removed) blends
smoothly into the footer instead of being cut off by a hard divider line. */
border-top: none;
border-bottom-left-radius: var(--ai-card-border-radius);
border-bottom-right-radius: var(--ai-card-border-radius);
position: relative !important;
z-index: 5 !important;
}
.ai-pagination-sticky-wrapper nav {
padding-bottom: 0 !important;
}
/* Status-bar pagination: true center of the whole footer bar, independent of
the "Showing X of Y" label's width sitting to its left. A plain flex-grow
centers only within the space *left over* after that label, which drifts
off-center as the label's text length changes — absolute + translate pins
it to the bar's actual midpoint instead. Stacks normally on mobile (below
the label, per .ai-table-status-bar's flex-column) since the bar isn't
wide enough there for a floating center to make sense. */
.ai-status-bar-pagination {
display: flex;
justify-content: center;
}
@media (min-width: 768px) {
.ai-status-bar-pagination {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
}
.ai-status-bar-pagination .ai-pagination {
gap: 0.375rem !important;
}
.ai-table th.ai-col-company .ai-th-company-inner,
.ai-th-sticky-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
/* min-width: 0 is required so the flex container can shrink below its intrinsic
content size. Without this, flex children force the | wider than its
max-width, breaking the saved column width. */
min-width: 0;
overflow: hidden;
}
/* Allow each flex child to shrink independently so the container never
forces the column wider than its set width. */
.ai-table th.ai-col-company .ai-th-company-inner > *,
.ai-th-sticky-inner > * {
min-width: 0;
flex-shrink: 1;
}
/* Sticky thead: min-width:0 + overflow:hidden on .ai-th-sticky-inner was clipping the
A–Z / Z–A pill next to “Client” when the column width is tight. */
.ai-table thead th.ai-col-sticky .ai-th-sticky-inner > *:first-child {
flex-shrink: 0;
min-width: min-content;
}
/* Date / Client pills share one sticky header — don't flex-shrink active sort triggers */
.ai-table thead th.ai-col-sticky .ai-th-sticky-inner > [data-sort-col]:has(.ai-sort-label:not(:empty)),
.ai-table thead th.ai-col-sticky .ai-th-sticky-inner > [data-sort-col].ai-sort-active {
flex-shrink: 0;
min-width: min-content;
}
/* Sticky-column depth — a soft shadow cast rightward onto the content so the column
always reads as a floating layer above the table (shown at rest too, not only
while scrolled).
Header uses a ::after strip; body + footer use a per-cell box-shadow so the depth
renders on EVERY row (a ::after on body cells gets painted over by scrolled
content — see the row-stacking note up top). */
.ai-table thead th.ai-col-sticky::after,
.ai-table thead th.ai-col-company::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -24px;
width: 24px;
background: linear-gradient(to right,
rgba(0, 0, 0, 0.14),
rgba(0, 0, 0, 0.085) 20%,
rgba(0, 0, 0, 0.045) 45%,
rgba(0, 0, 0, 0.018) 70%,
transparent);
opacity: 1; /* always layered, even when the table isn't scrolled */
z-index: 21;
pointer-events: none;
}
.ai-table tbody td.ai-col-sticky,
.ai-table tbody td.ai-col-company,
.ai-table tfoot td.ai-col-sticky,
.ai-table tfoot td.ai-col-company {
/* Vertical SPREAD (3rd value ≥ blur) pushes the shadow's corner-fade above and
below the cell; clip-path then trims that bleed to the cell's exact top/bottom.
Result: a uniform right-edge shadow per row that tiles into one continuous,
gap-free shadow down the whole column (no per-row pinching). */
box-shadow: 3px 0 10px 10px rgba(0, 0, 0, 0.1); /* always layered, even when the table isn't scrolled */
clip-path: inset(0 -24px 0 0);
}
:root.light-mode .ai-table thead th.ai-col-sticky::after,
:root.light-mode .ai-table thead th.ai-col-company::after {
background: linear-gradient(to right,
rgba(0, 0, 0, 0.10),
rgba(0, 0, 0, 0.06) 20%,
rgba(0, 0, 0, 0.03) 45%,
rgba(0, 0, 0, 0.01) 70%,
transparent);
}
:root.light-mode .ai-table tbody td.ai-col-sticky,
:root.light-mode .ai-table tbody td.ai-col-company,
:root.light-mode .ai-table tfoot td.ai-col-sticky,
:root.light-mode .ai-table tfoot td.ai-col-company {
box-shadow: 3px 0 10px 10px rgba(0, 0, 0, 0.06);
}
/* Raised column heading: the sticky header casts a soft shadow downward onto the
rows (the ::after above handles the rightward edge), so the heading reads as a
lifted layer. Overrides the earlier box-shadow:none on the pink header — a black
shadow doesn't bleed the gradient's pink. */
.ai-table thead th.ai-col-sticky,
.ai-table thead th.ai-col-company {
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.30), /* lit top edge — raised bevel */
4px 8px 14px -2px rgba(0, 0, 0, 0.4) !important; /* drop shadow down + right */
}
:root.light-mode .ai-table thead th.ai-col-sticky,
:root.light-mode .ai-table thead th.ai-col-company {
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.35),
4px 8px 14px -2px rgba(0, 0, 0, 0.24) !important;
}
.ai-table tbody td {
padding: 12px 16px;
vertical-align: middle;
border-bottom: 1px solid var(--ai-border);
border-right: none;
color: var(--ai-text);
white-space: nowrap;
transition: background-color 0.12s ease;
}
/* Clear row dividers across all data lists (matches Projects-style separation) */
:root.light-mode .ai-table tbody td {
border-bottom-color: color-mix(in srgb, var(--ai-border) 78%, rgba(15, 23, 42, 0.42));
}
:root:not(.light-mode) .ai-table tbody td {
border-bottom-color: color-mix(in srgb, var(--ai-border) 72%, rgba(255, 255, 255, 0.2));
}
/* Row hover — solid opaque colour applied identically to every cell.
Using one fixed colour (instead of rgba over a possibly-transparent base)
guarantees the sticky column matches the rest of the row pixel-for-pixel. */
/* --- Dark mode hover ---------------------------------------------------- */
/* Solid hover ~6% lighter than card for pixel-perfect sticky columns */
.ai-table tbody tr:hover:not(.ai-row-selected) td {
background-color: var(--ai-table-row-hover) !important;
background-image: none !important;
}
.ai-table tbody tr:hover:not(.ai-row-selected) td.ai-col-sticky,
.ai-table tbody tr:hover:not(.ai-row-selected) td.ai-col-company {
background-color: var(--ai-table-row-hover) !important;
background-image: none !important;
z-index: 151 !important;
}
/* --- Light mode hover --------------------------------------------------- */
:root.light-mode .ai-table tbody tr:hover:not(.ai-row-selected) td {
background-color: var(--ai-table-row-hover) !important;
background-image: none !important;
}
:root.light-mode .ai-table tbody tr:hover:not(.ai-row-selected) td.ai-col-sticky,
:root.light-mode .ai-table tbody tr:hover:not(.ai-row-selected) td.ai-col-company {
background-color: var(--ai-table-row-hover) !important;
background-image: none !important;
z-index: 151 !important;
}
.ai-table tbody tr:last-child td {
border-bottom: none;
}
/* Column Visibility Toggling (Instant JS Support) */
.ai-col-hidden {
display: none !important;
}
/* ---- Dashboard Card Filters ---- */
/* Pill Toggle Group (Chart Range, Date Range) */
.dash-filter-pills {
display: inline-flex;
align-items: center;
gap: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%), var(--ai-input-bg);
border: 1px solid var(--ai-border);
border-radius: 50px;
padding: 3px;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}
/* Header filters wrapper — always wraps, never overflows card */
.dash-clear-filters {
appearance: none;
width: 28px;
height: 28px;
padding: 0;
/* Visible 3D danger circle — beveled inner edges, no flat outline (dark base) */
border: 1px solid rgba(255, 71, 87, 0.5);
border-radius: 50%;
background: linear-gradient(180deg, rgba(255, 71, 87, 0.30) 0%, rgba(255, 71, 87, 0.12) 100%);
color: #ff9aa3;
cursor: pointer;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 4px rgba(0, 0, 0, 0.32);
font-size: 0.75rem;
}
/* Header filters wrapper — always wraps, never overflows card */
.dash-header-filters {
flex-shrink: 1;
min-width: 0;
flex-wrap: wrap;
width: 100%;
}
/* Responsive: stack filters on small viewports */
/* SECTION 06 · Components — badges, buttons, alerts */
/* ---- Badges ---- */
.ai-badge {
font-size: 0.7rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.ai-badge.active {
background: rgba(16, 185, 129, 0.22);
color: #10b981;
}
.ai-badge.inactive {
background: rgba(255, 71, 87, 0.18);
color: var(--ai-danger);
}
.ai-badge.warning {
background: rgba(255, 165, 2, 0.18);
color: var(--ai-warning);
}
.ai-badge.info {
background: rgba(99, 102, 241, 0.22);
color: #818cf8;
}
.ai-badge.danger {
background: rgba(255, 71, 87, 0.18);
color: var(--ai-danger);
}
.ai-badge.success {
background: rgba(16, 185, 129, 0.22);
color: #10b981;
}
.ai-badge.archive {
background: rgba(255, 165, 2, 0.18);
color: var(--ai-warning);
}
/* Dark: premium crystal badges (gradients + lift; matches light-mode language) */
:root:not(.light-mode) .ai-badge {
font-weight: 700;
border: 1px solid transparent;
box-shadow: var(--ai-badge-elevate-dark), var(--ai-badge-inset-dark);
}
:root:not(.light-mode) .ai-badge.active,
:root:not(.light-mode) .ai-badge.success {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.4) 0%, rgba(16, 185, 129, 0.18) 100%);
color: #6ee7b7;
border-color: rgba(16, 185, 129, 0.4);
}
:root:not(.light-mode) .ai-badge.inactive,
:root:not(.light-mode) .ai-badge.danger {
background: linear-gradient(180deg, rgba(255, 71, 87, 0.38) 0%, rgba(255, 71, 87, 0.16) 100%);
color: #fda4af;
border-color: rgba(255, 71, 87, 0.4);
}
:root:not(.light-mode) .ai-badge.warning,
:root:not(.light-mode) .ai-badge.archive {
background: linear-gradient(180deg, rgba(255, 165, 2, 0.36) 0%, rgba(255, 165, 2, 0.15) 100%);
color: #fcd34d;
border-color: rgba(255, 165, 2, 0.42);
}
:root:not(.light-mode) .ai-badge.info {
background: linear-gradient(180deg, rgba(99, 102, 241, 0.38) 0%, rgba(129, 140, 248, 0.14) 100%);
color: #a5b4fc;
border-color: rgba(99, 102, 241, 0.4);
}
:root.light-mode .ai-badge {
font-weight: 700;
border: 1px solid transparent;
box-shadow: var(--ai-badge-elevate), var(--ai-badge-inset);
}
:root.light-mode .ai-badge.active,
:root.light-mode .ai-badge.success {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.26) 0%, rgba(16, 185, 129, 0.14) 100%);
color: #047857;
border-color: rgba(16, 185, 129, 0.42);
}
:root.light-mode .ai-badge.inactive,
:root.light-mode .ai-badge.danger {
background: linear-gradient(180deg, rgba(255, 71, 87, 0.22) 0%, rgba(255, 71, 87, 0.12) 100%);
color: #c81e2c;
border-color: rgba(255, 71, 87, 0.4);
}
:root.light-mode .ai-badge.warning,
:root.light-mode .ai-badge.archive {
background: rgba(255, 165, 2, 0.12) !important;
color: #f57c00 !important;
border-color: rgba(255, 165, 2, 0.28) !important;
}
:root.light-mode .ai-badge.info {
background: linear-gradient(180deg, rgba(99, 102, 241, 0.26) 0%, rgba(var(--ai-accent-lilac-rgb), 0.18) 100%);
color: #4f46e5;
border-color: rgba(99, 102, 241, 0.38);
}
/* Cyan "UPDATED" badge (update/edit audit actions) — inherits the badge bevel */
.ai-badge.updated {
background: rgba(34, 211, 238, 0.2);
color: #0e7490;
}
:root:not(.light-mode) .ai-badge.updated {
background: linear-gradient(180deg, rgba(34, 211, 238, 0.34) 0%, rgba(34, 211, 238, 0.12) 100%);
color: #67e8f9;
border-color: rgba(34, 211, 238, 0.42);
}
:root.light-mode .ai-badge.updated {
background: linear-gradient(180deg, rgba(6, 182, 212, 0.22) 0%, rgba(6, 182, 212, 0.12) 100%);
color: #0e7490;
border-color: rgba(6, 182, 212, 0.4);
}
:root.all-bright-mode:not(.light-mode) .ai-badge.updated {
background: linear-gradient(180deg, rgba(34, 211, 238, 0.42) 0%, rgba(34, 211, 238, 0.16) 100%);
color: #a5f3fc;
border-color: rgba(34, 211, 238, 0.45);
}
/* Bootstrap utility badges — same premium depth as .ai-badge (light) */
:root.light-mode .badge.bg-success {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.28) 0%, rgba(16, 185, 129, 0.15) 100%) !important;
color: #047857 !important;
border: 1px solid rgba(16, 185, 129, 0.4);
box-shadow: var(--ai-badge-elevate), var(--ai-badge-inset);
font-weight: 700;
}
:root.light-mode .badge.bg-danger {
background: linear-gradient(180deg, rgba(239, 68, 68, 0.26) 0%, rgba(239, 68, 68, 0.13) 100%) !important;
color: #b91c1c !important;
border: 1px solid rgba(239, 68, 68, 0.38);
box-shadow: var(--ai-badge-elevate), var(--ai-badge-inset);
font-weight: 700;
}
:root.light-mode .badge.bg-warning {
background: linear-gradient(180deg, rgba(245, 158, 11, 0.3) 0%, rgba(245, 158, 11, 0.14) 100%) !important;
color: #92400e !important;
border: 1px solid rgba(245, 158, 11, 0.42);
box-shadow: var(--ai-badge-elevate), var(--ai-badge-inset);
font-weight: 700;
}
:root.light-mode .badge.bg-info {
background: linear-gradient(180deg, rgba(99, 102, 241, 0.24) 0%, rgba(var(--ai-accent-lilac-rgb), 0.16) 100%) !important;
color: #4338ca !important;
border: 1px solid rgba(99, 102, 241, 0.34);
box-shadow: var(--ai-badge-elevate), var(--ai-badge-inset);
font-weight: 700;
}
:root.light-mode .badge.bg-secondary {
background: linear-gradient(180deg, rgba(100, 116, 139, 0.22) 0%, rgba(var(--ai-accent-lilac-rgb), 0.1) 100%) !important;
color: #334155 !important;
border: 1px solid rgba(100, 116, 139, 0.32);
box-shadow: var(--ai-badge-elevate), var(--ai-badge-inset);
font-weight: 700;
}
/* Bootstrap utility badges — crystal depth on dark */
:root:not(.light-mode) .badge.bg-success {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.42) 0%, rgba(16, 185, 129, 0.2) 100%) !important;
color: #6ee7b7 !important;
border: 1px solid rgba(16, 185, 129, 0.42);
box-shadow: var(--ai-badge-elevate-dark), var(--ai-badge-inset-dark);
font-weight: 700;
}
:root:not(.light-mode) .badge.bg-danger {
background: linear-gradient(180deg, rgba(239, 68, 68, 0.4) 0%, rgba(239, 68, 68, 0.18) 100%) !important;
color: #fca5a5 !important;
border: 1px solid rgba(239, 68, 68, 0.42);
box-shadow: var(--ai-badge-elevate-dark), var(--ai-badge-inset-dark);
font-weight: 700;
}
:root:not(.light-mode) .badge.bg-warning {
background: linear-gradient(180deg, rgba(245, 158, 11, 0.4) 0%, rgba(245, 158, 11, 0.16) 100%) !important;
color: #fcd34d !important;
border: 1px solid rgba(245, 158, 11, 0.42);
box-shadow: var(--ai-badge-elevate-dark), var(--ai-badge-inset-dark);
font-weight: 700;
}
:root:not(.light-mode) .badge.bg-info {
background: linear-gradient(180deg, rgba(99, 102, 241, 0.4) 0%, rgba(var(--ai-accent-lilac-rgb), 0.16) 100%) !important;
color: #c4b5fd !important;
border: 1px solid rgba(99, 102, 241, 0.4);
box-shadow: var(--ai-badge-elevate-dark), var(--ai-badge-inset-dark);
font-weight: 700;
}
:root:not(.light-mode) .badge.bg-secondary {
background: linear-gradient(180deg, rgba(148, 163, 184, 0.35) 0%, rgba(100, 116, 139, 0.14) 100%) !important;
color: #e2e8f0 !important;
border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: var(--ai-badge-elevate-dark), var(--ai-badge-inset-dark);
font-weight: 700;
}
/* ---- Buttons ---- */
/* Primary CTA — same magenta rail stack as wiki / sticky headers (--ai-pink-rail-gradient) */
.btn-ai {
background: var(--ai-pink-rail-gradient);
color: #fff;
border: none;
font-size: 0.85rem;
font-weight: 700;
padding: 8px 24px;
border-radius: 50px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 3px 14px rgba(173, 20, 87, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.btn-ai:focus,
.btn-ai.show {
background: var(--ai-pink-rail-gradient);
color: #fff;
outline: none;
box-shadow:
0 0 0 3px rgba(var(--ai-app-accent-rgb), 0.35),
0 4px 14px rgba(173, 20, 87, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-ai:hover {
background: var(--ai-pink-rail-gradient);
color: #fff;
filter: brightness(1.06);
transform: translateY(-2px);
box-shadow:
0 6px 22px rgba(173, 20, 87, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-ai:active {
color: #fff;
transform: translateY(0) !important;
filter: none;
box-shadow: 0 2px 10px rgba(173, 20, 87, 0.32) !important;
}
/* Green success variant of .btn-ai (e.g. invoice "Done" buttons) */
.btn-ai.btn-ai-success {
background: linear-gradient(135deg, #34c759 0%, #2ca01c 100%) !important;
border-color: #2ca01c !important;
box-shadow: 0 3px 14px rgba(44, 160, 28, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.btn-ai.btn-ai-success:hover {
background: linear-gradient(135deg, #3ad15f 0%, #25901a 100%) !important;
box-shadow: 0 6px 22px rgba(44, 160, 28, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
.btn-ai.btn-ai-success:active {
box-shadow: 0 2px 10px rgba(44, 160, 28, 0.32) !important;
}
.btn-ai:active .bi {
color: inherit;
}
.btn-ai-outline {
background: var(--ai-card-bg);
color: var(--ai-text);
border: 1px solid var(--ai-border);
font-size: 0.85rem;
font-weight: 700;
padding: 8px 24px;
border-radius: 50px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--ai-card-shadow);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
:root:not(.light-mode) .btn-ai-outline {
background: rgba(255, 255, 255, 0.06);
color: #e8e8e8;
border-color: rgba(255, 255, 255, 0.18);
box-shadow:
0 2px 10px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.btn-sm.btn-ai,
.btn-sm.btn-ai-outline {
padding: 4px 14px;
font-size: 0.76rem;
}
.btn-ai-outline:focus,
.btn-ai-outline.show {
background: var(--ai-select-bg);
color: var(--ai-text);
border-color: var(--ai-filter-border);
}
:root:not(.light-mode) .btn-ai-outline:focus,
:root:not(.light-mode) .btn-ai-outline.show {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
.btn-ai-outline:hover,
.btn-ai-outline:active {
background: var(--ai-input-bg);
color: var(--ai-text);
border-color: var(--ai-filter-border);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}
:root:not(.light-mode) .btn-ai-outline:hover,
:root:not(.light-mode) .btn-ai-outline:active {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.32);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* ---- Table Action Buttons ---- */
.btn-action-edit,
.btn-action-delete,
.btn-action-restore,
.btn-action-skip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
font-size: 0.85rem;
border-radius: 6px;
background: transparent;
transition: var(--ai-transition);
}
.btn-action-edit {
border: 1px solid #0891b2;
color: #0891b2;
}
.btn-action-edit:hover {
background: #0891b2;
color: #fff;
}
/* Brighter cyan for dark surfaces */
:root:not(.light-mode) .btn-action-edit {
border-color: #22d3ee;
color: #22d3ee;
}
:root:not(.light-mode) .btn-action-edit:hover {
background: #22d3ee;
color: #07323b;
}
.btn-action-delete {
border: 1px solid var(--ai-warning);
color: var(--ai-warning);
}
.btn-action-delete:hover {
background: var(--ai-warning);
color: #fff;
}
/* Permanent delete (red) override — only for archived records */
.btn-action-delete.ai-action-danger {
border-color: var(--ai-danger);
color: var(--ai-danger);
}
.btn-action-delete.ai-action-danger:hover {
background: var(--ai-danger);
color: #fff;
}
.btn-action-restore {
border: 1px solid var(--ai-success, #10b981);
color: var(--ai-success, #10b981);
}
.btn-action-restore:hover {
background: var(--ai-success, #10b981);
color: #fff;
}
/* Skip / hold-back — distinct slate-indigo, set apart from edit/delete/restore */
.btn-action-skip {
border: 1px solid #6366f1;
color: #6366f1;
}
.btn-action-skip:hover {
background: #6366f1;
color: #fff;
}
/* ---- Premium Alerts ---- */
.ai-alert {
display: flex;
align-items: center;
gap: 15px;
padding: 14px 20px;
border-radius: 10px;
font-size: 0.88rem;
font-weight: 500;
margin-bottom: 24px;
border: 1px solid transparent;
border-left-width: 4px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: ai-alert-entrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ai-alert i {
font-size: 1.2rem;
flex-shrink: 0;
}
.ai-alert-info {
background: rgba(var(--ai-accent-lilac-rgb), 0.12);
border-color: rgba(var(--ai-accent-lilac-rgb), 0.22);
border-left-color: var(--ai-info);
color: #c4b5fd;
}
:root.light-mode .ai-alert-info {
background: rgba(var(--ai-accent-lilac-rgb), 0.08);
border-color: rgba(var(--ai-accent-lilac-rgb), 0.2);
border-left-color: var(--ai-info);
color: #5b21b6;
}
@keyframes ai-alert-entrance {
0% {
opacity: 0;
transform: translateY(-8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes drift-orb-1 {
from {
transform: translate(0, 0) scale(1);
}
to {
transform: translate(120px, 80px) scale(1.1);
}
}
@keyframes drift-orb-2 {
from {
transform: translate(0, 0) scale(1.1);
}
to {
transform: translate(-100px, -60px) scale(0.9);
}
}
@keyframes drift-orb-3 {
from {
transform: translate(0, 0);
}
to {
transform: translate(-40px, 80px);
}
}
@keyframes card-entrance {
from {
opacity: 0;
transform: translateY(40px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* SECTION 07 · ChromeLight — empty state, scrollbars, light-mode polish, responsive */
/* ---- Empty State ---- */
.ai-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px 20px;
color: var(--ai-text-muted);
min-height: 200px;
height: 100%;
flex: 1;
}
.ai-empty i {
font-size: 3rem;
margin-bottom: 16px;
opacity: 0.25;
display: block;
}
.ai-empty p {
font-size: 0.95rem;
font-weight: 500;
margin: 0;
}
/* ---- Global Premium Scrollbars ---- */
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--ai-scrollbar-thumb);
border: 1px solid transparent;
background-clip: content-box;
border-radius: 4px;
transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
background: var(--ai-scrollbar-hover);
border: 0;
}
/* Grab to Scroll Cursor Style */
.ai-card-body[style*="overflow-x: auto"],
.ai-card-body[style*="overflow: auto"],
.ai-list,
.table-responsive {
cursor: grab;
-webkit-user-select: none;
user-select: none;
/* Prevent text selection during drag */
}
.ai-card-body:active,
.ai-list:active,
.table-responsive:active {
cursor: grabbing;
}
/* Table header: don't inherit horizontal “grab” scroll — it blocks sort/filter clicks */
.table-responsive thead,
.table-responsive thead th {
cursor: default;
}
.table-responsive thead [data-sort-col],
.table-responsive thead .ai-sort-col-label {
cursor: pointer;
user-select: none;
}
.table-responsive thead .ai-resizer {
cursor: col-resize !important;
}
.table-responsive:active thead,
.table-responsive thead:active {
cursor: default !important;
}
.table-responsive:active thead [data-sort-col],
.table-responsive thead:active [data-sort-col] {
cursor: pointer !important;
}
.table-responsive:active thead .ai-resizer,
.table-responsive thead:active .ai-resizer {
cursor: col-resize !important;
}
/* Firefox Support */
* {
scrollbar-width: thin;
scrollbar-color: var(--ai-scrollbar-thumb) transparent;
}
/* ---- Sidebar Scrollbar (prevent layout gap) ---- */
.ai-sidebar-nav::-webkit-scrollbar-track {
background: transparent !important;
}
.ai-sidebar-nav {
scrollbar-width: thin;
scrollbar-color: var(--ai-sidebar-border) transparent;
}
/* ---- Light Mode: layout & component polish (tokens live in early :root.light-mode) ---- */
:root.light-mode body.ai-login-page {
background:
radial-gradient(130% 100% at 50% -5%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
#f8fbfe;
}
:root.light-mode .ai-card,
:root.light-mode .ai-stat-card,
:root.light-mode .ai-login-card {
background: var(--ai-card-bg);
border: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: var(--ai-card-shadow-lg);
}
:root.light-mode .ai-card-header {
background: linear-gradient(180deg, var(--ai-select-bg) 0%, var(--ai-input-bg) 100%);
border-bottom-color: rgba(15, 23, 42, 0.09);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
/* Card / login forms — same surface as card + subtle outline so fields read on light slate */
:root.light-mode .ai-card .form-control:not(.ai-filter-input),
:root.light-mode .ai-login-card .form-control,
:root.light-mode .ai-login-forgot-modal .form-control {
background-color: var(--ai-card-bg) !important;
border: 1px solid var(--ai-filter-border) !important;
color: var(--ai-text);
box-shadow:
0 2px 6px rgba(15, 23, 42, 0.06),
inset 0 1px 3px rgba(15, 23, 42, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
border-radius: 50px !important;
}
:root.light-mode .ai-login-card .form-select {
background-color: var(--ai-card-bg) !important;
background-image: var(--ai-select-icon) !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 14px 12px !important;
border: 1px solid var(--ai-filter-border) !important;
color: var(--ai-text) !important;
box-shadow:
0 2px 6px rgba(15, 23, 42, 0.06),
inset 0 1px 3px rgba(15, 23, 42, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
border-radius: 50px !important;
}
:root.light-mode .ai-card textarea.form-control:not(.ai-filter-input),
:root.light-mode .ai-login-card textarea.form-control {
border-radius: 12px !important;
}
:root.light-mode .ai-card .form-select:not(.ai-filter-input) {
background-color: var(--ai-card-bg) !important;
background-image: var(--ai-select-icon) !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 14px 12px !important;
border: 1px solid var(--ai-filter-border) !important;
color: var(--ai-text) !important;
box-shadow:
0 2px 6px rgba(15, 23, 42, 0.06),
inset 0 1px 3px rgba(15, 23, 42, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
border-radius: 50px !important;
}
:root.light-mode .ai-search-wrap .form-control {
background: var(--ai-input-bg);
border: 1px solid var(--ai-border);
color: var(--ai-text);
box-shadow: var(--ai-filter-native-shadow);
}
:root.light-mode .ai-card .form-control:not(.ai-filter-input):focus,
:root.light-mode .ai-card .form-select:not(.ai-filter-input):focus,
:root.light-mode .ai-login-card .form-control:focus,
:root.light-mode .ai-login-card .form-select:focus,
:root.light-mode .ai-login-forgot-modal .form-control:focus,
:root.light-mode .ai-search-wrap .form-control:focus {
background-color: var(--ai-select-bg) !important;
border-color: var(--ai-primary) !important;
color: var(--ai-text);
box-shadow:
0 0 0 3px rgba(var(--ai-primary-rgb), 0.14),
inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
/* Currency override modal — same field surfaces as add/edit client (.ai-card), not global --ai-input-bg */
:root.light-mode #overrideModal .form-control:not(.ai-filter-input) {
background-color: var(--ai-card-bg) !important;
border: 1px solid var(--ai-filter-border) !important;
color: var(--ai-text);
box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
border-radius: 50px !important;
}
:root.light-mode #overrideModal .form-control:not(.ai-filter-input):focus {
background-color: var(--ai-select-bg) !important;
border-color: var(--ai-primary) !important;
color: var(--ai-text);
box-shadow:
0 0 0 3px rgba(var(--ai-primary-rgb), 0.14),
inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
:root.light-mode .ai-login-card .form-control::placeholder {
color: var(--ai-text-muted);
}
:root.light-mode .ai-brand {
color: var(--ai-text) !important;
}
:root.light-mode .ai-navbar {
background: color-mix(in srgb, var(--ai-card-bg) 72%, var(--ai-body-bg) 28%) !important;
backdrop-filter: blur(14px) saturate(1.08);
-webkit-backdrop-filter: blur(14px) saturate(1.08);
border-bottom: 1px solid rgba(15, 23, 42, 0.1);
/* Layered drop shadow so the header lifts off the page (card-depth parity) */
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.35) inset,
0 2px 6px rgba(15, 23, 42, 0.05),
0 8px 24px rgba(15, 23, 42, 0.07);
}
/* All bright (dark theme) — lifted navbar, still dark chrome (white logo) */
:root.all-bright-mode:not(.light-mode) .ai-navbar {
background: color-mix(in srgb, var(--ai-card-bg) 86%, transparent) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--ai-border);
box-shadow:
inset 0 -1px 0 rgba(255, 255, 255, 0.06),
0 4px 24px rgba(0, 0, 0, 0.28);
}
:root.all-bright-mode:not(.light-mode) .ai-brand {
color: var(--ai-text) !important;
}
:root.all-bright-mode:not(.light-mode) .ai-sidebar-toggle {
color: var(--ai-text);
}
:root.all-bright-mode:not(.light-mode) .ai-nav-icon {
background: linear-gradient(180deg, var(--ai-select-bg) 0%, var(--ai-input-bg) 100%);
border-color: rgba(15, 23, 42, 0.12);
color: var(--ai-text-muted) !important;
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
:root.all-bright-mode:not(.light-mode) .ai-nav-icon:hover {
background: linear-gradient(180deg, var(--ai-card-bg) 0%, var(--ai-select-bg) 100%);
border-color: rgba(var(--ai-primary-rgb), 0.35);
color: var(--ai-primary) !important;
}
:root.light-mode .ai-nav-icon {
background: linear-gradient(180deg, var(--ai-select-bg) 0%, var(--ai-input-bg) 100%);
border-color: rgba(15, 23, 42, 0.12);
color: var(--ai-text-muted) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(15, 23, 42, 0.1);
}
:root.light-mode .ai-nav-icon:hover {
background: linear-gradient(180deg, var(--ai-card-bg) 0%, var(--ai-select-bg) 100%);
border-color: rgba(var(--ai-primary-rgb), 0.35);
color: var(--ai-primary) !important;
}
:root.light-mode .ai-sidebar-toggle {
color: var(--ai-text);
}
/* Light mode sidebar — subtle top gradient for depth parity with dark mode */
:root.light-mode .ai-sidebar {
background: linear-gradient(180deg, #d3e1f5 0%, var(--ai-sidebar-bg) 38%);
box-shadow:
var(--ai-sidebar-panel-shadow),
inset -1px 0 0 rgba(255, 255, 255, 0.18);
}
/* Light mode primary button — rail-matched shadow (parity with wiki) */
:root.light-mode .btn-ai {
box-shadow:
0 3px 14px rgba(173, 20, 87, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
:root.light-mode .btn-ai:hover {
box-shadow:
0 6px 22px rgba(173, 20, 87, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
:root.light-mode .btn-ai:active {
color: #fff;
box-shadow: 0 2px 10px rgba(173, 20, 87, 0.28) !important;
}
/* Light mode outline button — gloss highlight + soft lift */
:root.light-mode .btn-ai-outline {
box-shadow:
0 2px 8px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.62);
}
:root.light-mode .btn-ai-outline:hover,
:root.light-mode .btn-ai-outline:active {
box-shadow:
0 4px 16px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
:root.light-mode input[type='date']::-webkit-calendar-picker-indicator {
filter: none;
}
:root.light-mode input[type='date'],
:root.light-mode input[type='number'],
:root.light-mode select,
:root.light-mode textarea {
color-scheme: light;
}
:root.light-mode .ai-page-header {
border-bottom-color: rgba(var(--ai-accent-lilac-rgb), 0.22);
}
:root.light-mode .ai-page-header::after {
width: clamp(88px, 26vw, 200px);
height: 3px;
background: linear-gradient(
90deg,
var(--ai-primary) 0%,
rgba(var(--ai-primary-rgb), 0.45) 38%,
rgba(var(--ai-accent-lilac-rgb), 0.2) 62%,
transparent 100%
);
box-shadow: 0 1px 10px rgba(var(--ai-primary-rgb), 0.2);
}
:root.light-mode .ai-page-header.text-center::after {
width: clamp(140px, 32vw, 260px);
background: linear-gradient(
90deg,
transparent 0%,
rgba(var(--ai-accent-lilac-rgb), 0.14) 22%,
rgba(var(--ai-primary-rgb), 0.65) 42%,
var(--ai-primary) 50%,
rgba(var(--ai-primary-rgb), 0.65) 58%,
rgba(var(--ai-accent-lilac-rgb), 0.14) 78%,
transparent 100%
);
box-shadow: 0 1px 14px rgba(var(--ai-primary-rgb), 0.16);
}
:root.light-mode .ai-page-header h1 {
color: var(--ai-text);
}
/* All bright — page header matches light-mode chrome (title + accent rule) */
:root.all-bright-mode .ai-page-header {
border-bottom-color: rgba(var(--ai-accent-lilac-rgb), 0.22);
}
:root.all-bright-mode .ai-page-header::after {
width: clamp(88px, 26vw, 200px);
height: 3px;
background: linear-gradient(
90deg,
var(--ai-primary) 0%,
rgba(var(--ai-primary-rgb), 0.45) 38%,
rgba(var(--ai-accent-lilac-rgb), 0.2) 62%,
transparent 100%
);
box-shadow: 0 1px 10px rgba(var(--ai-primary-rgb), 0.2);
}
:root.all-bright-mode .ai-page-header.text-center::after {
left: 50%;
transform: translateX(-50%);
width: clamp(140px, 32vw, 260px);
background: linear-gradient(
90deg,
transparent 0%,
rgba(var(--ai-accent-lilac-rgb), 0.14) 22%,
rgba(var(--ai-primary-rgb), 0.65) 42%,
var(--ai-primary) 50%,
rgba(var(--ai-primary-rgb), 0.65) 58%,
rgba(var(--ai-accent-lilac-rgb), 0.14) 78%,
transparent 100%
);
box-shadow: 0 1px 14px rgba(var(--ai-primary-rgb), 0.16);
}
:root.all-bright-mode .ai-page-header h1 {
color: var(--ai-text);
}
:root.light-mode .ai-stat-card .stat-value {
color: var(--ai-text);
}
:root.light-mode .ai-card-header h5 {
color: var(--ai-text);
}
:root.light-mode .form-control::placeholder,
:root.light-mode .ai-search-wrap .form-control::placeholder {
color: rgba(0, 0, 0, 0.45) !important;
}
/* ---- Responsive ---- */
/* Card header filter form — fill remaining space in row layout */
.ai-card-header .ai-filter-form {
flex: 1 1 auto;
justify-content: flex-end;
}
/* Cards & tables never overflow the viewport */
.ai-card {
overflow: visible;
}
/* Extra-small screens (576px and below) */
.ai-email-link {
color: var(--ai-primary) !important;
text-decoration: none;
transition: opacity 0.2s ease;
}
.ai-email-link:hover {
opacity: 0.85;
text-decoration: underline !important;
}
/* SECTION 08 · LoadersModals — tom-select skin, dropdown panels, record modal, session warning, scrollbars */
/* Base wrapper — kill all extra spacing from .form-select inheritance */
.ts-wrapper,
.ts-wrapper.form-select,
.ts-wrapper.form-select-sm,
.ai-card .ts-wrapper.form-select,
.ai-filter-form .ts-wrapper.form-select,
.ai-filter-form .ts-wrapper.form-select-sm {
min-height: 0 !important;
border: none !important;
background: none !important;
background-color: transparent !important;
background-image: none !important;
padding: 0 !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
}
/* Light mode: ':root.light-mode .form-select' (border-color + box-shadow) is copied
onto the .ts-wrapper via TomSelect's class copy and out-specifies the reset above,
painting a shadowed rectangle AROUND the inner .ts-control pill (the "outer border").
Re-assert the transparent wrapper here so only the pill itself carries the border. */
:root.light-mode .ts-wrapper,
:root.light-mode .ts-wrapper.form-select,
:root.light-mode .ts-wrapper.form-select-sm {
border: none !important;
background: none !important;
background-color: transparent !important;
box-shadow: none !important;
}
.ts-wrapper.single .ts-control {
background: var(--ai-filter-ctrl-gloss), var(--ai-card-bg) !important;
border: 1px solid var(--ai-filter-ctrl-border) !important;
color: var(--ai-text) !important;
border-radius: 50px !important;
box-shadow: var(--ai-filter-ctrl-shadow) !important;
transition: var(--ai-transition);
display: flex !important;
align-items: center !important;
padding: 0 34px 0 16px !important;
min-height: 38px !important;
height: 38px !important;
line-height: 36px !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
}
:root.light-mode .ai-card .ts-wrapper.single:not(.ai-filter-search) .ts-control {
background: var(--ai-card-bg) !important;
border: 1px solid var(--ai-filter-border) !important;
box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
:root.light-mode .ai-card .ts-wrapper.single:not(.ai-filter-search) .ts-control.focus,
:root.light-mode .ai-card .ts-wrapper.single:not(.ai-filter-search).focus .ts-control {
background: var(--ai-select-bg) !important;
border: 1px solid var(--ai-primary) !important;
box-shadow:
0 0 0 3px rgba(var(--ai-primary-rgb), 0.14),
inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
:root.light-mode .ts-wrapper.single .ts-control .item,
:root.light-mode .ts-wrapper.single .ts-control input {
color: var(--ai-text-muted) !important;
}
:root.light-mode .ai-card .ts-wrapper.single:not(.ai-filter-search) .ts-control .item,
:root.light-mode .ai-card .ts-wrapper.single:not(.ai-filter-search) .ts-control input {
color: var(--ai-text) !important;
}
.ts-wrapper.single .ts-control>input {
display: inline-block !important;
vertical-align: middle !important;
color: var(--ai-text) !important;
font-size: 0.8rem !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1.4 !important;
}
/* Hide the search cursor only when a value is selected and the control isn't open */
.ts-wrapper.single.has-items:not(.dropdown-active) .ts-control>input {
opacity: 0 !important;
width: 0 !important;
max-width: 0 !important;
position: absolute !important;
}
/* When open, hide the item so the search input takes the full line (no stacked "extra line") */
.ts-wrapper.single.dropdown-active .ts-control .item {
display: none !important;
}
.ts-wrapper.single.dropdown-active .ts-control>input {
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
position: static !important;
}
.ts-wrapper.single .ts-control .item {
display: inline-block !important;
vertical-align: middle !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
color: var(--ai-text) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
/* Hide built-in caret — SVG chevron is injected via JS */
.ts-wrapper.single .ts-control::after {
display: none !important;
}
/* Injected SVG chevron for Tom Select (matches .ai-select-chevron) */
.ts-chevron {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
pointer-events: none;
line-height: 1;
flex-shrink: 0;
}
.ts-chevron .ai-select-chevron {
width: 14px;
height: 14px;
opacity: 0.5;
transition: transform 0.2s ease;
}
.ts-wrapper.single.dropdown-active .ts-chevron .ai-select-chevron {
transform: rotate(180deg);
}
.ts-wrapper.single .ts-control.focus,
.ts-wrapper.single.focus .ts-control {
border-color: var(--ai-primary) !important;
box-shadow: 0 0 0 3px var(--ai-primary-light) !important;
}
/* Dropdown panel — unified with .ai-select-panel */
.ts-dropdown {
background: var(--ai-calendar-bg) !important;
border: 1px solid var(--ai-border) !important;
border-radius: 14px !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
color: var(--ai-text) !important;
margin-top: 4px !important;
/* Must exceed .modal (12010), .modal-backdrop (12000), .ai-confirm-overlay (12050) */
z-index: 13100 !important;
padding: 6px 0 !important;
overflow: hidden !important;
animation: aiSelectFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Smooth fade-out when a dropdown is dismissed on scroll (see initScrollDismiss). */
.ts-dropdown.ai-dropdown-closing,
.ai-select-panel.ai-dropdown-closing,
.dropdown-menu.ai-dropdown-closing,
.tox-menu.ai-dropdown-closing,
.tox-tiered-menu.ai-dropdown-closing,
.tox-swatches-menu.ai-dropdown-closing,
.ai-customization-menu.ai-dropdown-closing {
opacity: 0 !important;
transform: translateY(-6px) !important;
transition: opacity 0.13s ease, transform 0.13s ease !important;
animation: none !important;
pointer-events: none !important;
}
.ts-dropdown .ts-dropdown-content {
max-height: 300px !important;
overflow-y: auto !important;
}
:root.light-mode .ts-dropdown {
background: var(--ai-card-bg) !important;
border-color: var(--ai-border) !important;
box-shadow: var(--ai-dropdown-shadow) !important;
}
.ts-dropdown .option {
padding: 8px 16px !important;
cursor: pointer !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
color: var(--ai-text) !important;
transition: background-color 0.15s, color 0.15s !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
line-height: 1.4 !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
background-color: var(--ai-table-row-hover) !important;
color: var(--ai-text) !important;
}
.ts-dropdown .option.selected {
background-color: var(--ai-table-row-active) !important;
color: var(--ai-text) !important;
font-weight: 700 !important;
}
:root.light-mode .ts-dropdown .option {
color: #334155 !important;
}
:root.light-mode .ts-dropdown .option:hover,
:root.light-mode .ts-dropdown .option.active {
background-color: var(--ai-table-row-hover) !important;
color: var(--ai-text) !important;
}
:root.light-mode .ts-dropdown .option.selected {
background-color: var(--ai-table-row-active) !important;
color: var(--ai-text) !important;
}
/* Normal light mode only: the slate card-bg darkened for hover/active reads as
muddy grey — use a clean, cooler blue-grey step so the active state is clear. */
:root.light-mode:not(.all-bright-mode) .ts-dropdown .option:hover,
:root.light-mode:not(.all-bright-mode) .ts-dropdown .option.active {
background-color: #cdd9ec !important;
color: var(--ai-text) !important;
}
:root.light-mode:not(.all-bright-mode) .ts-dropdown .option.selected {
background-color: #bccde3 !important;
color: var(--ai-text) !important;
}
.ts-dropdown .optgroup-header {
background: var(--ai-calendar-bg) !important;
color: var(--ai-text-muted) !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
padding: 8px 16px 4px !important;
}
@keyframes fadeOutOverlay {
0% {
opacity: 1;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes scaleInCircles {
0% {
transform: scale(0.4) rotateX(-30deg);
opacity: 0;
}
100% {
transform: scale(1) rotateX(0);
opacity: 1;
}
}
@keyframes scaleOutCircles {
0% {
transform: scale(1);
opacity: 1;
}
70% {
transform: scale(1.5) rotateX(15deg);
opacity: 0.8;
}
100% {
transform: scale(2.2) rotateX(25deg);
opacity: 0;
}
}
@keyframes fadeInText {
0% {
opacity: 0;
transform: translateY(15px);
filter: blur(4px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes fadeOutText {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(15px) scale(0.95);
}
}
@keyframes orbitOuter {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg);
}
}
@keyframes orbitMiddle {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(-180deg) rotateY(360deg) rotateZ(-180deg);
}
}
@keyframes orbitInner {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(-360deg);
}
}
/* ---- Compact Filters Inside Dropdown Menu ---- */
.ai-filter-form .ai-filter-dropdown .dropdown-menu .mb-3 {
margin-bottom: 10px !important;
}
.ai-filter-form .ai-filter-dropdown .dropdown-menu .form-label {
font-size: 0.7rem !important;
margin-bottom: 4px !important;
}
.ai-filter-form .ai-filter-dropdown .ts-wrapper.single .ts-control,
.ai-filter-form .ai-filter-dropdown .input-group-text,
.ai-filter-form .ai-filter-dropdown .form-control {
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
font-size: 0.75rem !important;
line-height: 26px !important;
}
.ai-filter-form .ai-filter-dropdown .ts-wrapper.single .ts-control {
padding: 0 30px 0 10px !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
}
.ai-filter-form .ai-filter-dropdown .input-group-text {
padding: 0 8px !important;
}
.ai-filter-form .ai-filter-dropdown .form-control {
padding: 0 10px !important;
}
.ai-filter-form .ai-filter-dropdown .ts-wrapper.single .ts-control>input,
.ai-filter-form .ai-filter-dropdown .ts-wrapper.single .ts-control .item {
height: 26px !important;
line-height: 26px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.ai-filter-form .ai-filter-dropdown .dropdown-menu {
overflow: visible !important;
background-color: var(--ai-card-bg);
border: 1px solid var(--ai-border) !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
padding-bottom: 8px !important;
}
.ai-filter-form .ai-filter-dropdown .ts-dropdown .ts-dropdown-content {
max-height: 180px !important;
overflow-y: auto !important;
}
/* Instant collapse within filter dropdowns to prevent content cropping */
.ai-filter-dropdown .collapsing {
transition: none !important;
height: auto !important;
overflow: visible !important;
}
/* ---- Record Detail Modal ---- */
.ai-record-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 12000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
padding: 20px;
}
.ai-record-overlay.show {
opacity: 1;
visibility: visible;
}
.ai-record-modal {
background: var(--ai-card-bg);
border: none;
border-radius: 14px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
width: 100%;
max-width: 700px;
max-height: 85vh;
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateY(20px) scale(0.97);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.ai-record-overlay.show .ai-record-modal {
transform: translateY(0) scale(1);
}
.ai-record-modal::before { display: none; }
/* Confirm / password dialogs: coloured gradient header bar matching the action
button (gradient is set inline per type in JS), white title + glassy icon. */
.ai-confirm-modal .ai-record-modal-header {
padding: 16px 20px;
gap: 14px;
align-items: center;
border-radius: 14px 14px 0 0;
}
.ai-confirm-modal .ai-record-modal-header .ai-confirm-title {
margin: 0;
color: #fff;
font-weight: 700;
font-size: 1rem;
line-height: 1.25;
}
.ai-confirm-modal .ai-record-modal-header .ai-modal-icon-lg {
width: 34px;
height: 34px;
border-radius: 50%;
/* glassy white chip on the coloured header (mode-independent) */
background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 100%);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 3px rgba(0, 0, 0, 0.16);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ai-confirm-modal .ai-record-modal-header .ai-modal-icon-lg i {
font-size: 1.05rem;
color: #fff !important;
}
.ai-confirm-modal .ai-record-modal-actions .btn {
border-radius: 50px;
}
.ai-confirm-modal .ai-record-modal-header .ai-modal-icon-lg img {
width: 22px;
height: 22px;
border-radius: 50%;
}
/* -- Session Inactivity Warning Modal ----------------------------------- */
.ai-session-modal {
text-align: center;
overflow: hidden;
}
.ai-session-modal::before {
display: block !important;
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--ai-warning), #ffc94d);
}
.ai-session-modal-icon {
width: 64px;
height: 64px;
margin: 28px auto 4px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255, 165, 2, 0.18), rgba(255, 165, 2, 0.06));
color: var(--ai-warning);
font-size: 1.8rem;
animation: ai-session-pulse 2s ease-in-out infinite;
}
@keyframes ai-session-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 165, 2, 0.35); }
50% { box-shadow: 0 0 0 12px rgba(255, 165, 2, 0); }
}
.ai-session-modal-title {
margin: 12px 0 6px;
color: var(--ai-text);
font-weight: 700;
font-size: 1.25rem;
}
.ai-session-modal-text {
margin: 0 0 18px;
color: var(--ai-text-muted);
font-size: 0.92rem;
line-height: 1.6;
}
.ai-session-countdown-wrap {
margin-bottom: 14px;
}
.ai-session-countdown {
font-size: 2.4rem;
font-weight: 800;
line-height: 1.1;
color: var(--ai-warning);
font-variant-numeric: tabular-nums;
letter-spacing: 1px;
}
.ai-session-countdown-label {
color: var(--ai-text-muted);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
opacity: 0.8;
}
.ai-session-progress {
height: 6px;
border-radius: 999px;
background: var(--ai-border);
overflow: hidden;
}
.ai-session-progress-bar {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--ai-warning), #ffc94d);
transition: width 1s linear;
}
.ai-session-modal-actions {
justify-content: center !important;
gap: 12px;
}
.ai-session-btn {
padding: 8px 20px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
border-radius: 999px !important;
}
.ai-session-btn-primary {
background: linear-gradient(135deg, var(--ai-warning), #ff8f00);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 14px rgba(255, 165, 2, 0.4);
}
.ai-session-btn-primary:hover,
.ai-session-btn-primary:focus {
background: linear-gradient(135deg, #ff8f00, var(--ai-warning));
color: #fff;
box-shadow: 0 6px 18px rgba(255, 165, 2, 0.5);
}
.ai-record-modal-scroll {
overflow-y: auto;
flex: 1;
min-height: 0;
}
/* Ultra-thin custom scrollbar */
.ai-record-modal-scroll::-webkit-scrollbar {
width: 4px;
}
.ai-record-modal-scroll::-webkit-scrollbar-track {
background: transparent;
margin: 8px 0;
}
.ai-record-modal-scroll::-webkit-scrollbar-thumb {
background: rgba(233, 30, 140, 0.35);
border-radius: 4px;
}
.ai-record-modal-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(233, 30, 140, 0.55);
}
/* Firefox scrollbar */
.ai-record-modal-scroll {
scrollbar-width: thin;
scrollbar-color: rgba(233, 30, 140, 0.35) transparent;
}
.ai-record-modal-header {
padding: 16px 20px;
display: flex;
align-items: center;
gap: 14px;
background: var(--ai-pink-rail-gradient);
flex-shrink: 0;
border-radius: 14px 14px 0 0;
}
.ai-record-modal-header h4 {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
line-height: 1.25;
font-family: 'Inter', sans-serif;
}
.ai-record-modal-header .ai-modal-icon,
.ai-record-modal-header .ai-modal-icon-lg {
width: 36px;
height: 36px;
border-radius: 50%;
/* 3D — glassy white gradient + bevel on the coloured header (mode-independent) */
background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 100%);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 3px rgba(0, 0, 0, 0.16);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ai-record-modal-header .ai-modal-icon i,
.ai-record-modal-header .ai-modal-icon-lg i {
font-size: 1rem;
color: #fff;
}
.ai-confirm-modal .ai-record-modal-header .ai-modal-icon i,
.ai-confirm-modal .ai-record-modal-header .ai-modal-icon-lg i {
color: inherit;
}
.ai-record-modal-header .ai-modal-subtitle {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
margin-top: 1px;
opacity: 1;
}
.ai-record-modal-header .ai-record-close,
.ai-login-forgot-modal-header .ai-record-close {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
margin-left: auto;
padding: 0;
}
.ai-record-modal-header .ai-record-close:hover,
.ai-login-forgot-modal-header .ai-record-close:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.4);
}
.ai-record-modal-body {
padding: 4px 24px 24px;
}
.ai-record-detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
}
.ai-record-detail-item {
padding: 12px 0;
border-bottom: 1px solid var(--ai-border);
}
.ai-record-detail-item:last-child {
border-bottom: none;
}
.ai-record-detail-item.col-left {
padding-right: 16px;
padding-left: 0;
border-left: none;
}
.ai-record-detail-item.col-right {
padding-left: 16px;
padding-right: 0;
border-left: 1px solid var(--ai-border);
}
.ai-record-detail-item.full-width {
grid-column: 1 / -1;
padding-left: 0;
padding-right: 0;
border-left: none;
}
.ai-record-detail-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--ai-text-muted);
margin-bottom: 4px;
}
.ai-record-detail-value {
font-size: 0.88rem;
color: var(--ai-text);
word-break: break-word;
line-height: 1.5;
}
.ai-record-detail-value a {
color: var(--ai-primary);
text-decoration: none;
}
.ai-record-detail-value a:hover {
text-decoration: underline;
}
/* SECTION 09 · ModalsToasts — client modal lists, modal backdrop/transitions, toasts */
/* Client modal — projects + wiki (unified list panel) */
.ai-client-modal-projects-wrap {
max-height: min(58vh, 28rem);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 0;
margin: 0;
border-radius: 10px;
border: 1px solid var(--ai-border);
background: var(--ai-card-bg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
scrollbar-width: thin;
scrollbar-color: rgba(233, 30, 140, 0.3) transparent;
}
.ai-client-modal-projects-wrap::-webkit-scrollbar {
width: 5px;
}
.ai-client-modal-projects-wrap::-webkit-scrollbar-thumb {
background: rgba(233, 30, 140, 0.35);
border-radius: 5px;
}
.ai-client-modal-projects-wrap::-webkit-scrollbar-thumb:hover {
background: rgba(233, 30, 140, 0.5);
}
:root.light-mode .ai-client-modal-projects-wrap {
background: #fafafa;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ai-client-modal-projects-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin: 0;
padding: 7px 12px;
background: rgba(0, 0, 0, 0.04);
border-bottom: 1px solid var(--ai-border);
}
:root.light-mode .ai-client-modal-projects-toolbar {
background: rgba(0, 0, 0, 0.03);
}
.ai-client-modal-projects-total {
font-size: 8.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--ai-text-muted);
}
.ai-client-modal-projects {
display: flex;
flex-direction: column;
gap: 0;
font-size: 11px;
line-height: 1.35;
padding: 4px 0;
}
.ai-client-modal-project {
border: none;
border-radius: 0;
background: transparent;
overflow: visible;
border-bottom: 1px solid var(--ai-border);
}
.ai-client-modal-project:last-child {
border-bottom: none;
}
.ai-client-modal-project-summary {
cursor: pointer;
list-style: none;
padding: 8px 12px 8px 10px;
margin: 0 4px;
display: flex;
align-items: center;
gap: 8px;
user-select: none;
border-radius: 8px;
transition: background 0.15s ease, color 0.15s ease;
}
.ai-client-modal-project-summary:hover {
background: rgba(233, 30, 140, 0.07);
}
:root.light-mode .ai-client-modal-project-summary:hover {
background: rgba(233, 30, 140, 0.09);
}
.ai-client-modal-project[open] > .ai-client-modal-project-summary {
background: rgba(233, 30, 140, 0.06);
}
:root.light-mode .ai-client-modal-project[open] > .ai-client-modal-project-summary {
background: rgba(233, 30, 140, 0.08);
}
.ai-client-modal-project-summary::-webkit-details-marker {
display: none;
}
.ai-client-modal-project-caret {
flex-shrink: 0;
font-size: 0.62rem;
line-height: 1;
color: var(--ai-primary);
opacity: 0.85;
transition: transform 0.18s ease, color 0.15s ease;
}
.ai-client-modal-project[open] .ai-client-modal-project-caret {
transform: rotate(-180deg);
}
.ai-client-modal-project-titles {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px 12px;
flex-wrap: wrap;
}
.ai-client-modal-project-name-row {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
min-width: 0;
}
.ai-client-modal-project-name {
color: var(--ai-text) !important;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.2;
}
.ai-client-modal-project-badge {
font-size: 7.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.32px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(108, 117, 125, 0.18);
color: var(--ai-text-muted);
}
.ai-client-modal-project-meta {
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: flex-end;
}
.ai-client-modal-project-status {
font-size: 8.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--ai-text-muted);
padding: 2px 7px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.06);
}
:root.light-mode .ai-client-modal-project-status {
background: rgba(0, 0, 0, 0.055);
}
.ai-client-modal-project-count {
font-size: 8.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2px;
color: var(--ai-primary);
opacity: 0.95;
padding: 2px 7px;
border-radius: 999px;
background: rgba(233, 30, 140, 0.1);
}
.ai-client-modal-project-panel {
padding: 0 14px 10px 34px;
margin: 0 4px 6px;
background: rgba(0, 0, 0, 0.03);
border-radius: 0 0 8px 8px;
border-left: 2px solid rgba(233, 30, 140, 0.35);
}
:root.light-mode .ai-client-modal-project-panel {
background: rgba(0, 0, 0, 0.025);
}
.ai-client-modal-project-empty {
color: var(--ai-text-muted);
font-size: 10px;
padding: 6px 0 4px;
line-height: 1.3;
}
.ai-client-modal-project-wiki-scroll {
max-height: 7rem;
overflow-y: auto;
overflow-x: hidden;
padding: 4px 6px 2px 2px;
margin: 0;
min-height: 0;
background: transparent;
scrollbar-width: thin;
scrollbar-color: rgba(233, 30, 140, 0.28) transparent;
}
.ai-client-modal-project-wiki-scroll::-webkit-scrollbar {
width: 4px;
}
.ai-client-modal-project-wiki-scroll::-webkit-scrollbar-thumb {
background: rgba(233, 30, 140, 0.35);
border-radius: 4px;
}
.ai-client-modal-project-wiki-list {
list-style: disc;
padding-left: 0.95rem;
margin: 0;
}
.ai-client-modal-project-wiki-li {
margin-bottom: 3px;
line-height: 1.35;
}
.ai-client-modal-project-wiki-li:last-child {
margin-bottom: 0;
}
.ai-record-detail-value .ai-client-modal-wiki-link {
font-size: 10.5px;
font-weight: 500;
}
.ai-client-modal-wiki-link:not(a) {
color: var(--ai-text);
}
.ai-client-modal-wiki-archived {
font-size: 7px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2px;
color: var(--ai-text-muted);
opacity: 0.85;
margin-left: 2px;
}
/* Client record modal — tax block (taxable + code ref) */
.ai-client-modal-tax-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem 1.25rem;
align-items: start;
padding: 10px 12px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.03);
border: 1px solid var(--ai-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
:root.light-mode .ai-client-modal-tax-wrap {
background: rgba(0, 0, 0, 0.02);
}
.ai-client-modal-tax-col {
min-width: 0;
padding-left: 10px;
border-left: 2px solid rgba(233, 30, 140, 0.45);
margin-left: 0;
}
.ai-client-modal-tax-col:first-child {
padding-left: 0;
border-left: none;
}
.ai-client-modal-tax-sublabel {
font-size: 0.58rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.55px;
color: var(--ai-text-muted);
margin-bottom: 4px;
line-height: 1.2;
opacity: 0.92;
}
.ai-record-modal-actions {
padding: 12px 24px 20px;
display: flex;
gap: 8px;
border-top: 1px solid var(--ai-border);
flex-shrink: 0;
}
.ai-record-modal .form-control {
background-color: var(--ai-input-bg) !important;
border: 1px solid var(--ai-border) !important;
color: var(--ai-text) !important;
border-radius: 10px !important;
font-size: 0.95rem;
padding: 11px 14px;
height: auto;
transition: var(--ai-transition);
}
.ai-record-modal .form-control:focus {
background-color: var(--ai-input-bg) !important;
border-color: var(--ai-primary) !important;
box-shadow: 0 0 0 4px rgba(233, 30, 140, 0.2) !important;
color: var(--ai-text) !important;
}
.ai-record-modal .form-control::placeholder {
color: var(--ai-text-muted);
opacity: 0.5;
}
.ai-record-modal .form-label {
color: var(--ai-text-muted);
font-size: 0.75rem;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.ai-record-modal .ai-password-toggle {
color: var(--ai-text-muted) !important;
opacity: 0.6;
transition: var(--ai-transition);
}
.ai-record-modal .ai-password-toggle:hover {
color: var(--ai-primary) !important;
opacity: 1;
}
/* Modal Backdrop Blur Effect & Layering */
.modal-backdrop {
z-index: 12000 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
/* Fixed base color to prevent black flash on close */
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.modal-backdrop.show {
opacity: 1 !important;
}
.modal {
z-index: 12010 !important;
}
.ai-confirm-overlay {
z-index: 12050 !important;
}
/* Dropdowns that are positioned inside a modal or custom overlay must sit
above the modal stack. Applies to Bootstrap dropdown-menus, .ai-dropdown
skins, and Tom Select menus that remain in-DOM (not body-appended). */
.modal .dropdown-menu.show,
.modal .ai-dropdown,
.ai-record-overlay .dropdown-menu.show,
.ai-record-overlay .ai-dropdown {
z-index: 13000 !important;
}
/* AI Modal Smooth Transition Override */
.modal.fade .modal-dialog {
transform: none !important;
transition: none !important;
}
.modal.show .ai-record-modal {
transform: translateY(0) scale(1);
}
.ai-record-modal-actions .btn-ai-outline {
color: var(--ai-text-muted);
border-color: var(--ai-border);
}
.ai-record-modal-actions .btn-ai-outline:hover,
.ai-record-modal-actions .btn-ai-outline:active {
background: transparent;
color: var(--ai-text);
border-color: var(--ai-text-muted);
}
/* Neutral Cancel Buttons in Forms */
form a.btn-ai-outline {
color: var(--ai-text-muted);
border-color: var(--ai-border);
}
form a.btn-ai-outline:hover,
form a.btn-ai-outline:active {
background: transparent;
color: var(--ai-text);
border-color: var(--ai-text-muted);
}
/* Clickable Table Rows */
.ai-table tbody tr.ai-clickable-row {
cursor: pointer;
transition: background 0.15s ease;
}
.ai-table tbody tr.ai-clickable-row:hover {
background: transparent;
}
/* ---- Light Mode: Record Modal ---- */
:root.light-mode .ai-record-modal {
background: var(--ai-card-bg);
border: none;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
}
:root.light-mode .ai-record-modal-header h4 {
color: #fff;
}
:root.light-mode .ai-record-detail-value {
color: var(--ai-text);
}
:root.light-mode .ai-record-overlay {
background: rgba(0, 0, 0, 0.4);
}
/* ---- Toast Notifications ---- */
.ai-toast-container {
position: fixed;
top: calc(var(--ai-navbar-height) + 16px);
right: 20px;
z-index: 13000;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
max-width: 400px;
width: 100%;
}
.ai-toast {
pointer-events: auto;
display: flex;
align-items: stretch;
background: var(--ai-card-bg);
border: 1px solid var(--ai-border);
border-radius: 10px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
overflow: hidden;
position: relative;
transform: translateX(120%);
opacity: 0;
animation: aiToastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
min-width: 320px;
}
.ai-toast.ai-toast-out {
animation: aiToastOut 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes aiToastIn {
from {
transform: translateX(120%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes aiToastOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(120%);
opacity: 0;
}
}
.ai-toast-accent {
width: 4px;
flex-shrink: 0;
border-radius: 10px 0 0 10px;
}
.ai-toast-content {
flex: 1;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.ai-toast-icon {
font-size: 1.2rem;
flex-shrink: 0;
line-height: 1;
}
.ai-toast-text {
flex: 1;
min-width: 0;
}
.ai-toast-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 2px;
opacity: 0.7;
}
.ai-toast-message {
font-size: 0.85rem;
font-weight: 500;
color: var(--ai-text);
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ai-toast-close {
background: transparent;
border: none;
color: var(--ai-text-muted);
padding: 14px 14px 14px 6px;
cursor: pointer;
font-size: 0.85rem;
transition: color 0.15s ease;
flex-shrink: 0;
line-height: 1;
display: flex;
align-items: center;
}
.ai-toast-close:hover {
color: var(--ai-danger);
}
.ai-toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
border-radius: 0 0 10px 10px;
animation: aiToastProgress linear forwards;
}
.ai-toast.ai-toast-pinned .ai-toast-progress {
display: none;
}
.ai-toast.ai-toast-expanded {
min-height: auto;
}
.ai-toast.ai-toast-expanded .ai-toast-message {
white-space: normal;
overflow: visible;
text-overflow: unset;
word-break: break-word;
}
@keyframes aiToastProgress {
from {
width: 100%;
}
to {
width: 0%;
}
}
/* Light mode toast */
:root.light-mode .ai-toast {
background: var(--ai-card-bg);
border-color: var(--ai-border);
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06);
}
:root.light-mode .ai-toast-message {
color: var(--ai-text);
}
/* SECTION 10 · AjaxTransitions — seamless ajax row highlight & table transitions */
/* ============================================
Seamless AJAX — Row Highlight & Table Transitions
============================================ */
/* Highlight pulse animation for new/edited rows (Outline Style) */
@keyframes aiRowOutlineMiddle {
0% {
box-shadow: inset 0 2px 0 0 rgba(233, 30, 140, 1), inset 0 -2px 0 0 rgba(233, 30, 140, 1);
}
50% {
box-shadow: inset 0 2px 0 0 rgba(233, 30, 140, 0.4), inset 0 -2px 0 0 rgba(233, 30, 140, 0.4);
}
100% {
box-shadow: inset 0 2px 0 0 rgba(233, 30, 140, 1), inset 0 -2px 0 0 rgba(233, 30, 140, 1);
}
}
@keyframes aiRowOutlineFirst {
0% {
box-shadow: inset 0 2px 0 0 rgba(233, 30, 140, 1), inset 0 -2px 0 0 rgba(233, 30, 140, 1), inset 2px 0 0 0 rgba(233, 30, 140, 1);
}
50% {
box-shadow: inset 0 2px 0 0 rgba(233, 30, 140, 0.4), inset 0 -2px 0 0 rgba(233, 30, 140, 0.4), inset 2px 0 0 0 rgba(233, 30, 140, 0.4);
}
100% {
box-shadow: inset 0 2px 0 0 rgba(233, 30, 140, 1), inset 0 -2px 0 0 rgba(233, 30, 140, 1), inset 2px 0 0 0 rgba(233, 30, 140, 1);
}
}
@keyframes aiRowOutlineLast {
0% {
box-shadow: inset 0 2px 0 0 rgba(233, 30, 140, 1), inset 0 -2px 0 0 rgba(233, 30, 140, 1), inset -2px 0 0 0 rgba(233, 30, 140, 1);
}
50% {
box-shadow: inset 0 2px 0 0 rgba(233, 30, 140, 0.4), inset 0 -2px 0 0 rgba(233, 30, 140, 0.4), inset -2px 0 0 0 rgba(233, 30, 140, 0.4);
}
100% {
box-shadow: inset 0 2px 0 0 rgba(233, 30, 140, 1), inset 0 -2px 0 0 rgba(233, 30, 140, 1), inset -2px 0 0 0 rgba(233, 30, 140, 1);
}
}
/* Edited / newly-saved row indicator — a soft pink fill highlight (not an outline).
An inset box-shadow fill shows even on the sticky column cells, whose background
is set with !important and would otherwise block a background-color highlight. */
@keyframes aiRowHighlightFill {
0%, 100% { box-shadow: inset 0 0 0 9999px rgba(233, 30, 140, 0.16); }
50% { box-shadow: inset 0 0 0 9999px rgba(233, 30, 140, 0.05); }
}
.ai-row-highlight td {
animation: aiRowHighlightFill 0.8s ease-in-out infinite !important;
}
/* Table content fade during AJAX refresh */
.ai-table-loading {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* Submit button loading state */
.btn-ai-loading {
position: relative;
pointer-events: none;
opacity: 0.75;
}
.btn-ai-loading::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
top: 50%;
right: 12px;
transform: translateY(-50%);
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: aiSpinner 0.6s linear infinite;
}
@keyframes aiSpinner {
to {
transform: translateY(-50%) rotate(360deg);
}
}
/* Smooth delete row collapse */
.ai-row-deleting td {
transition: all 0.35s ease;
opacity: 0;
transform: translateX(20px);
}
.ai-row-deleted {
display: none !important;
}
/* Dashboard: renewals, access log & audit readability */
.dash-renewal-card {
gap: 0.25rem;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.text-ai-primary {
color: var(--ai-primary) !important;
}
:root.light-mode .ai-date-badge {
background: rgba(var(--ai-primary-rgb), 0.1) !important;
border: 1px solid rgba(var(--ai-primary-rgb), 0.28) !important;
box-shadow: var(--ai-badge-elevate), var(--ai-badge-inset);
color: #a61e6f !important;
}
:root.light-mode .ai-date-badge i {
color: var(--ai-primary);
opacity: 1;
}
:root.light-mode .ai-date-badge:hover {
background: rgba(var(--ai-primary-rgb), 0.15) !important;
border-color: rgba(var(--ai-primary-rgb), 0.42) !important;
box-shadow: 0 4px 22px rgba(var(--ai-accent-lilac-rgb), 0.2), var(--ai-badge-inset);
}
.ai-date-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 14px;
border-radius: 50px;
border: 1px solid rgba(233, 30, 140, 0.25) !important;
background: rgba(233, 30, 140, 0.08) !important;
color: var(--ai-primary) !important;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
transition: var(--ai-transition);
letter-spacing: 0.2px;
}
.ai-date-badge i {
font-size: 0.85rem;
margin-right: 8px;
color: var(--ai-primary);
opacity: 0.9;
}
.ai-date-badge:hover {
background: rgba(233, 30, 140, 0.12) !important;
border-color: rgba(233, 30, 140, 0.45) !important;
}
:root:not(.light-mode) .ai-date-badge {
background: linear-gradient(180deg, rgba(233, 30, 140, 0.28) 0%, rgba(233, 30, 140, 0.1) 100%) !important;
border: 1px solid rgba(233, 30, 140, 0.48) !important;
box-shadow: var(--ai-badge-elevate-dark), var(--ai-badge-inset-dark);
color: var(--ai-chip-pink-text) !important;
}
:root:not(.light-mode) .ai-date-badge i {
color: var(--ai-chip-pink-text);
opacity: 1;
}
/* Regular dark mode — pink badges match date pill text (not All Bright) */
:root:not(.light-mode):not(.all-bright-mode) .dash-tz-pill,
:root:not(.light-mode):not(.all-bright-mode) .dash-resource-pill,
:root:not(.light-mode):not(.all-bright-mode) .ai-badge-primary,
:root:not(.light-mode):not(.all-bright-mode) .ai-badge[style*="233,30,140"] {
color: var(--ai-chip-pink-text) !important;
}
:root:not(.light-mode) .ai-date-badge:hover {
background: linear-gradient(180deg, rgba(233, 30, 140, 0.36) 0%, rgba(233, 30, 140, 0.14) 100%) !important;
border-color: rgba(233, 30, 140, 0.62) !important;
box-shadow: 0 4px 22px rgba(233, 30, 140, 0.2), var(--ai-badge-inset-dark);
}
/* SECTION 11 · MobileOverlays — mobile sidebar backdrop, toast/notification dropdown viewport clamps */
/* ============================================
Mobile Sidebar Backdrop
============================================ */
.ai-sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1039;
/* just below sidebar z-index: 1040 */
opacity: 0;
transition: opacity 0.3s ease;
cursor: pointer;
}
.ai-sidebar-backdrop.show {
display: block;
opacity: 1;
}
/* ============================================
Responsive: ≤480px — Toast & Dropdown fixes
============================================ */
/* ============================================
Responsive: 320px minimum (≤399px)
============================================ */
/* SECTION 12 · TableToolbar — pagination, search, layout buttons, badges */
/* -- Pagination Styles ------------------------------------------------------- */
.ai-pagination {
--bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--ai-primary-light);
}
.ai-pagination .page-item .page-link {
background-color: var(--ai-input-bg);
border: 1px solid var(--ai-border);
color: var(--ai-text);
font-weight: 500;
transition: all 0.2s ease;
box-shadow: none;
}
.ai-pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.ai-pagination .page-item:not(.active):not(.disabled) .page-link:focus {
background-color: var(--ai-primary-light) !important;
border-color: var(--ai-primary) !important;
color: var(--ai-primary) !important;
transform: translateY(-1px);
}
.ai-pagination .page-link .bi-chevron-left {
margin-right: 0.35rem;
}
.ai-pagination .page-link .bi-chevron-right {
margin-left: 0.35rem;
}
.ai-pagination .page-item.active .page-link {
background-color: var(--ai-primary) !important;
border-color: var(--ai-primary) !important;
color: #ffffff !important;
box-shadow: 0 4px 10px rgba(233, 30, 140, 0.4);
}
.ai-pagination .page-item.disabled .page-link {
background-color: transparent !important;
border-color: transparent !important;
color: var(--ai-text-muted);
opacity: 0.6;
}
:root.light-mode .ai-pagination .page-item .page-link {
background-color: var(--ai-card-bg);
border-color: var(--ai-border);
color: #495057;
}
:root.light-mode .ai-pagination .page-item:not(.active):not(.disabled) .page-link:hover,
:root.light-mode .ai-pagination .page-item:not(.active):not(.disabled) .page-link:focus {
background-color: rgba(233, 30, 140, 0.08) !important;
border-color: var(--ai-primary) !important;
color: var(--ai-primary) !important;
}
:root.light-mode .ai-pagination .page-item.active .page-link {
background-color: var(--ai-primary) !important;
border-color: var(--ai-primary) !important;
color: #ffffff !important;
box-shadow: 0 4px 10px rgba(233, 30, 140, 0.25);
}
:root.light-mode .ai-pagination .page-item.disabled .page-link {
background-color: transparent !important;
border-color: transparent !important;
color: #adb5bd;
}
/* -- Muted Text Visibility ------------------------------------------------- */
.text-muted {
color: var(--ai-text-muted) !important;
}
.small.text-muted,
small.text-muted {
opacity: 0.85;
}
/* Sticky Pagination Container */
.ai-pagination-sticky-wrapper {
position: -webkit-sticky;
position: sticky;
left: 0;
width: 100%;
z-index: 10;
}
/* -- Table Search Bar ------------------------------------------------------- */
.ai-table-search {
width: 100%;
max-width: min(500px, 100%);
height: 38px !important;
border-radius: 50px !important;
overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%), var(--ai-card-bg);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
position: relative;
}
.ai-table-search:focus-within {
border-color: var(--ai-primary);
box-shadow: 0 0 0 1px var(--ai-primary), 0 0 0 4px rgba(233, 30, 140, 0.15), 0 12px 32px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
:root.light-mode .ai-table-search {
background: linear-gradient(180deg, var(--ai-select-bg) 0%, var(--ai-input-bg) 100%) !important;
border: 1px solid var(--ai-filter-border);
box-shadow:
0 2px 8px rgba(15, 23, 42, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
:root.light-mode .ai-table-search:focus-within {
border-color: var(--ai-primary) !important;
box-shadow: 0 0 0 1px var(--ai-primary), 0 0 0 4px rgba(233, 30, 140, 0.1), var(--ai-card-shadow-lg);
}
.ai-search-icon {
color: var(--ai-text-muted);
padding-left: 22px;
font-size: 1.15rem;
pointer-events: none;
flex-shrink: 0;
}
.ai-search-input {
background: transparent !important;
border: none !important;
outline: none !important;
color: var(--ai-text);
font-size: 0.85rem;
font-weight: 500;
padding: 0 16px;
flex: 1;
min-width: 0;
height: 38px;
line-height: 38px;
box-shadow: none !important;
white-space: nowrap;
overflow: hidden;
}
:root.light-mode .ai-search-input {
color: #64748b;
}
.ai-search-clear {
background: transparent !important;
border: none !important;
color: var(--ai-text-muted) !important;
padding-right: 20px !important;
transition: all 0.2s ease;
display: flex;
align-items: center;
flex-shrink: 0;
cursor: pointer;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.ai-search-clear.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ai-search-clear:hover {
color: var(--ai-primary) !important;
transform: scale(1.15);
}
/* -- Layout & Action Buttons ------------------------------------------------ */
.ai-layout-btn,
.ai-sync-btn {
border-radius: 50px;
/* 3D — gradient surface + beveled inner edges (top highlight + bottom shadow) */
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%), var(--ai-card-bg);
border: 1px solid var(--ai-border) !important;
color: var(--ai-text-muted);
font-weight: 600;
font-size: 13px;
padding: 8px 18px;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(8px);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 8px;
}
.ai-layout-btn:hover,
.ai-sync-btn:hover {
border-color: var(--ai-primary) !important;
color: var(--ai-text);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}
:root.light-mode .ai-layout-btn,
:root.light-mode .ai-sync-btn {
background: linear-gradient(180deg, var(--ai-select-bg) 0%, var(--ai-input-bg) 100%) !important;
border-color: var(--ai-filter-border) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(15, 23, 42, 0.1);
}
:root.light-mode .ai-layout-panel {
background: var(--ai-card-bg) !important;
background-color: var(--ai-card-bg) !important;
box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
backdrop-filter: none !important;
}
.ai-layout-btn:hover,
.ai-sync-btn:hover,
.ai-layout-btn:focus,
.ai-sync-btn:focus,
.ai-layout-btn.active {
border-color: var(--ai-primary) !important;
color: var(--ai-primary);
box-shadow: 0 0 0 1px var(--ai-primary), 0 4px 15px rgba(233, 30, 140, 0.15) !important;
transform: translateY(-1.5px);
}
.ai-layout-btn .bi-columns-gap,
.ai-layout-btn .bi-archive,
.ai-layout-btn .bi-archive-fill {
color: var(--ai-primary);
}
/* -- Layout Dropdown Panel -------------------------------------------------- */
.ai-layout-panel {
min-width: 270px;
border-radius: 12px;
z-index: 10001 !important;
max-height: 450px;
overflow-y: auto;
padding: 1.25rem !important;
background: var(--ai-card-bg);
/* Solid opaque background */
border: 1px solid var(--ai-border);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
/* Fix row negative margins to prevent horizontal scroll without clipping padding */
.ai-layout-panel .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.ai-layout-panel .row > [class*="col-"]:first-child {
padding-left: 0 !important;
}
.ai-layout-panel .row > [class*="col-"]:last-child {
padding-right: 0 !important;
}
/* True 2-col grid (row tracks size to their tallest cell) so switches for a
wrapping 2-line label still line up with their row partner — used where a
flex-based two-column split (independent stacks) would drift out of sync. */
.ai-layout-panel .row.ai-layout-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 0.5rem;
}
.ai-layout-panel .form-check {
display: flex;
align-items: center;
gap: 0.5rem;
padding-left: 0;
}
.ai-layout-panel .form-check-label {
color: var(--ai-text);
margin-bottom: 0;
}
.ai-layout-panel .form-check-input {
background-color: var(--ai-input-bg);
border-color: var(--ai-border);
float: none;
margin-left: 0;
flex-shrink: 0;
}
.ai-layout-panel .form-check-input:checked {
background-color: var(--ai-primary);
border-color: var(--ai-primary);
}
/* -- Premium Form Controls -------------------------------------------------- */
.form-control,
.form-select {
background-color: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 12px !important;
color: var(--ai-text) !important;
color-scheme: dark;
padding: 0.6rem 1rem !important;
line-height: 1.2 !important;
font-size: 0.85rem !important;
font-weight: 500;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}
.form-control:focus,
.form-select:focus {
background-color: transparent !important;
border-color: rgba(255, 255, 255, 0.3) !important;
color: var(--ai-text) !important;
outline: none !important;
box-shadow: none !important;
transform: none !important;
}
textarea.form-control {
min-height: 100px !important;
}
:root.light-mode .form-control,
:root.light-mode .form-select {
background-color: var(--ai-input-bg) !important;
border-color: var(--ai-filter-border) !important;
color: var(--ai-text) !important;
color-scheme: light;
box-shadow:
0 2px 6px rgba(15, 23, 42, 0.06),
inset 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
:root.light-mode .form-control:focus,
:root.light-mode .form-select:focus {
background-color: var(--ai-select-bg) !important;
border-color: var(--ai-primary) !important;
box-shadow: 0 0 0 3px rgba(var(--ai-primary-rgb), 0.14) !important;
}
/* -- Premium Badge Icons ------------------------------------------------------- */
/* -- Premium Badge Icons (Status & Currency) ------------------------------- */
.ai-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px !important;
border-radius: 50px !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
min-width: 72px;
/* standard width for currency and status */
height: 26px !important;
line-height: normal;
border: 1px solid transparent;
}
.ai-badge svg,
.ai-badge i {
margin-right: 5px;
flex-shrink: 0;
}
.ai-badge.info {
background: rgba(108, 92, 231, 0.1) !important;
color: #6c5ce7 !important;
border-color: rgba(108, 92, 231, 0.2) !important;
}
.ai-badge.success {
background: rgba(44, 160, 28, 0.1) !important;
color: #2ca01c !important;
border-color: rgba(44, 160, 28, 0.2) !important;
}
.ai-badge.warning {
background: rgba(251, 191, 36, 0.1) !important;
color: #fbbf24 !important;
border-color: rgba(251, 191, 36, 0.2) !important;
}
.ai-badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
/* Make them circular like the image */
font-size: 1.15rem;
flex-shrink: 0;
position: relative;
/* For badges */
background: rgba(255, 255, 255, 0.08) !important;
/* Standardized light grey background */
color: var(--ai-text-muted) !important;
/* Neutral icon color */
border: 1px solid var(--ai-border);
}
:root.light-mode .ai-badge-icon {
background: linear-gradient(180deg, var(--ai-select-bg) 0%, var(--ai-input-bg) 100%) !important;
color: #64748b !important;
border-color: var(--ai-filter-border);
}
/* Header disc submit — neutral like other .ai-badge-icon; rail magenta on hover only */
button.ai-badge-icon.ai-header-submit {
outline: none;
cursor: pointer;
transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
button.ai-badge-icon.ai-header-submit i {
transition: color 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
button.ai-badge-icon.ai-header-submit:hover {
background: var(--ai-pink-rail-gradient) !important;
filter: brightness(1.06);
color: #fff !important;
border-color: rgba(255, 255, 255, 0.28) !important;
box-shadow:
0 6px 18px rgba(173, 20, 87, 0.38),
inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
transform: scale(1.05);
}
button.ai-badge-icon.ai-header-submit:hover i {
color: #fff !important;
}
/* When the add/edit form card is collapsed, the header submit (+) is inert:
no hover effect and no submit. pointer-events:none also lets the click fall
through to the header so clicking + expands the form instead. */
.ai-card-collapsed button.ai-badge-icon.ai-header-submit {
pointer-events: none;
}
/* Icon Badges */
.ai-icon-badge {
position: absolute;
top: -5px;
right: -5px;
color: #fff;
font-size: 0.65rem;
font-weight: 800;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--ai-card-bg);
z-index: 2;
animation: badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
:root.light-mode .ai-icon-badge {
/* Solid magenta-pink stack (match dashboard chart / notification reference; no lilac blend) */
background: linear-gradient(145deg, #f48fb1 0%, #ec407a 38%, #e91e63 70%, #d81b60 100%);
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.08),
0 6px 18px rgba(var(--ai-primary-rgb), 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
:root:not(.light-mode) .ai-icon-badge {
background: linear-gradient(145deg, #f06292 0%, #e91e63 40%, #c2185b 100%);
box-shadow:
var(--ai-badge-inset-dark),
0 2px 12px rgba(0, 0, 0, 0.5),
0 2px 16px rgba(var(--ai-primary-rgb), 0.38);
}
/* Navbar bell — count pill (replaces Bootstrap bg-danger red) */
.ai-notif-header-badge {
background: linear-gradient(145deg, #ec407a 0%, #e91e63 45%, #d81b60 100%) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.42) !important;
box-shadow:
0 2px 8px rgba(var(--ai-primary-rgb), 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
font-weight: 800;
}
/* ---- Notification dropdown header count badge ---- */
.ai-notif-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 50px;
font-size: 0.72rem;
font-weight: 800;
line-height: 1;
color: #fff;
background: linear-gradient(145deg, #ec407a 0%, #e91e63 45%, #d81b60 100%);
border: 1px solid rgba(255, 255, 255, 0.42);
box-shadow: 0 2px 8px rgba(var(--ai-primary-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* ---- Notification dropdown items ---- */
.ai-notif-scroll {
max-height: 320px;
overflow-y: auto;
padding: 6px;
}
.ai-notif-scroll li:not(:last-child) {
border-bottom: 1px solid var(--ai-border);
}
.ai-notif-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 12px;
border-radius: 12px;
text-decoration: none;
color: var(--ai-text);
transition: background 0.16s ease, transform 0.16s ease;
}
.ai-notif-item:hover {
background: var(--ai-table-row-hover);
transform: translateX(2px);
}
.ai-notif-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.ai-notif-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.ai-notif-company {
font-size: 0.86rem;
font-weight: 700;
color: var(--ai-text);
min-width: 0;
}
.ai-notif-badge {
flex-shrink: 0;
font-size: 0.58rem !important;
font-weight: 800 !important;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 3px 8px !important;
line-height: 1 !important;
}
.ai-notif-domain {
display: block;
font-size: 0.77rem;
color: var(--ai-text-muted);
min-width: 0;
}
.ai-notif-meta {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 6px;
margin-top: 4px;
}
.ai-notif-chip {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: 4px;
font-size: 0.67rem;
font-weight: 600;
color: var(--ai-text-muted);
background: color-mix(in srgb, var(--ai-text-muted) 12%, transparent);
padding: 2px 8px;
border-radius: 50px;
white-space: nowrap;
}
.ai-notif-chip i {
font-size: 0.64rem;
opacity: 0.85;
}
.ai-notif-chip-danger {
color: var(--ai-danger);
background: color-mix(in srgb, var(--ai-danger) 13%, transparent);
}
.ai-notif-chip-warning {
color: var(--ai-warning);
background: color-mix(in srgb, var(--ai-warning) 16%, transparent);
}
:root.light-mode .ai-notif-chip-warning {
color: #f57c00;
background: rgba(255, 165, 2, 0.14);
}
:root.light-mode .ai-notif-chip-danger {
color: #c81e2c;
background: rgba(255, 71, 87, 0.16);
}
.ai-notif-date {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.7rem;
font-weight: 600;
color: var(--ai-text-muted);
white-space: nowrap;
}
.ai-notif-date i {
font-size: 0.68rem;
opacity: 0.7;
}
@keyframes badgePop {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.ai-badge-gray {
background: rgba(255, 255, 255, 0.08);
color: #94a3b8;
}
:root.light-mode .ai-badge-gray {
background: linear-gradient(180deg, rgba(100, 116, 139, 0.14) 0%, rgba(var(--ai-accent-lilac-rgb), 0.08) 100%);
color: #475569;
border: 1px solid rgba(100, 116, 139, 0.28);
box-shadow: var(--ai-badge-elevate), var(--ai-badge-inset);
}
/* SECTION 13 · TableFilters — filter row, currency pills, filter dropdowns */
/* -- Filter Row (in-table column filters) ----------------------------------- */
.ai-filter-row th {
padding: 0.85rem 0.6rem !important;
background: var(--ai-card-bg) !important;
border-bottom: 2px solid var(--ai-border) !important;
vertical-align: middle;
}
:root.light-mode .ai-filter-row th {
background: linear-gradient(180deg, rgba(var(--ai-accent-lilac-rgb), 0.07) 0%, var(--ai-card-bg) 100%) !important;
border-bottom-color: rgba(var(--ai-accent-lilac-rgb), 0.18) !important;
}
.ai-filter-input {
background-color: var(--ai-input-bg) !important;
border: 1px solid var(--ai-border) !important;
border-radius: 50px;
color: var(--ai-text) !important;
font-size: 0.76rem;
font-weight: 600;
padding: 0.3rem 0.6rem !important;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
width: 100%;
min-width: 110px;
box-shadow: var(--ai-filter-native-shadow);
height: 34px !important;
line-height: normal;
}
/* -- Currency Selection Pills ----------------------------------------------- */
.ai-curr-pill {
border-color: var(--ai-border) !important;
background-color: var(--ai-input-bg);
color: var(--ai-text);
}
:root.light-mode .ai-curr-pill {
border-color: var(--ai-filter-border) !important;
background: linear-gradient(180deg, var(--ai-select-bg) 0%, var(--ai-input-bg) 100%);
}
.ai-curr-checkbox input:checked+.ai-curr-pill,
.ai-curr-checkbox input:checked~.ai-curr-pill {
border-color: var(--active-color) !important;
color: var(--active-color);
background-color: transparent;
}
.ai-curr-pill-mobile {
width: 44px;
height: 44px;
padding: 0 !important;
}
.ai-filter-input:focus,
select.form-select.ai-filter-input:focus,
.ts-wrapper.ai-filter-input.focus .ts-control,
.ts-wrapper.ai-filter-input.dropdown-active .ts-control,
.ai-filter-active+.ts-wrapper .ts-control {
border-color: var(--ai-primary) !important;
outline: none !important;
box-shadow: 0 0 0 1px var(--ai-primary), 0 0 0 3px var(--ai-primary-light) !important;
transform: none !important;
caret-color: var(--ai-primary) !important;
/* Brand-colored cursor on iOS */
}
/* -- Searchable Table Filter Dropdowns (ai-filter-search) ------------------ */
.ts-wrapper.ai-filter-search {
width: 100%;
height: auto !important;
min-width: 110px;
}
.ts-wrapper.ai-filter-search.single .ts-control {
background: var(--ai-filter-ctrl-gloss), var(--ai-input-bg) !important;
border: 1px solid var(--ai-filter-ctrl-border) !important;
border-radius: 50px !important;
color: var(--ai-text) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
padding: 0 2rem 0 0.85rem !important;
line-height: 36px !important;
box-shadow: var(--ai-filter-ctrl-shadow) !important;
display: flex !important;
align-items: center !important;
}
.ts-wrapper.ai-filter-search.single .ts-control>input {
color: var(--ai-text) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
height: 36px !important;
line-height: 36px !important;
padding: 0 !important;
margin: 0 !important;
}
.ts-wrapper.ai-filter-search.single .ts-control .item {
color: var(--ai-text) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
line-height: 36px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.ts-wrapper.ai-filter-search.focus .ts-control,
.ts-wrapper.ai-filter-search.dropdown-active .ts-control {
border-color: var(--ai-primary) !important;
outline: none !important;
box-shadow: 0 0 0 1px var(--ai-primary), 0 0 0 3px var(--ai-primary-light) !important;
}
/* -- Compact Date Filter Button (filter row) -------------------------------- */
.ai-date-filter-wrap {
position: relative;
width: 100%;
}
.ai-filter-cal-btn {
display: flex !important;
align-items: center !important;
gap: 5px;
cursor: pointer !important;
white-space: nowrap;
overflow: hidden;
text-align: left;
}
.ai-filter-cal-btn .ai-cal-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.ai-filter-cal-btn .ai-cal-clear {
font-size: 0.85rem;
flex-shrink: 0;
transition: color 0.15s;
margin-left: 2px;
line-height: 1;
}
.ai-filter-cal-btn .ai-cal-clear:hover {
color: var(--ai-danger) !important;
}
.ai-filter-cal-btn.ai-cal-active {
border-color: var(--ai-primary) !important;
color: var(--ai-primary) !important;
background: var(--ai-primary-light) !important;
}
:root.light-mode .ai-filter-cal-btn.ai-cal-active {
background: rgba(233, 30, 140, 0.06) !important;
}
/* -- Custom Vanilla Dropdown (filter-row selects) --------------------------- */
.ai-select {
position: relative;
display: inline-block;
width: auto;
}
.ai-select.open {
z-index: 2000 !important;
}
.ai-select-btn {
display: inline-flex;
align-items: center;
gap: 8px;
width: auto;
min-width: 90px;
background: var(--ai-filter-ctrl-gloss), var(--ai-card-bg);
border: 1px solid var(--ai-filter-ctrl-border);
border-radius: 50px !important;
color: var(--ai-text);
font-size: 0.8rem;
font-weight: 600;
padding: 0 14px 0 16px;
min-height: 38px !important;
height: 38px !important;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: var(--ai-filter-ctrl-shadow);
white-space: nowrap;
user-select: none;
text-align: left;
}
/* Expand to fill parent when wrapper has explicit width class */
.ai-select.w-100 .ai-select-btn,
.ai-select.flex-grow-1 .ai-select-btn {
width: 100%;
}
.ai-select-btn span {
text-align: left;
display: inline-block;
flex: 0 0 auto;
white-space: nowrap;
}
.ai-select-btn:hover {
border-color: var(--ai-primary) !important;
background: rgba(var(--ai-primary-rgb), 0.04) !important;
box-shadow: var(--ai-filter-ctrl-shadow-hover), 0 0 0 1px rgba(var(--ai-primary-rgb), 0.1) !important;
}
.ai-select.open .ai-select-btn,
.ai-select.ai-filter-active .ai-select-btn {
border-color: var(--ai-primary) !important;
box-shadow: 0 0 0 1px var(--ai-primary), 0 0 0 3px var(--ai-primary-light) !important;
}
.ai-select-chevron {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: transform 0.2s ease;
opacity: 0.5;
}
.ai-select.open .ai-select-chevron {
transform: rotate(180deg);
}
/* Elevate parent containers when a dropdown is open */
th.ai-dropdown-open,
.ai-filter-col.ai-dropdown-open {
z-index: 1000 !important;
position: relative !important;
}
.ts-wrapper.dropdown-active {
z-index: 1000 !important;
}
:root.light-mode .ai-select-btn {
color: var(--ai-text-muted);
}
/* Dropdown panel */
.ai-select-panel {
display: none;
min-width: 100%;
background-color: var(--ai-calendar-bg);
border: 1px solid var(--ai-border);
border-radius: 14px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
z-index: 2000;
overflow: hidden;
padding: 6px 0;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
animation: aiSelectFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-select.open .ai-select-panel {
display: block;
}
@keyframes aiSelectFadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
:root.light-mode .ai-select-panel {
background-color: var(--ai-card-bg);
border-color: var(--ai-border);
box-shadow: var(--ai-dropdown-shadow);
}
/* Options */
.ai-select-option {
padding: 8px 16px;
font-size: 0.85rem;
font-weight: 600;
color: var(--ai-text);
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.4;
}
.ai-select-option:hover {
background-color: var(--ai-table-row-hover);
color: var(--ai-text);
}
.ai-select-option.selected {
background-color: var(--ai-table-row-active);
color: var(--ai-text);
font-weight: 700;
}
:root.light-mode .ai-select-option {
color: #334155;
}
:root.light-mode .ai-select-option:hover {
background-color: var(--ai-table-row-hover);
color: var(--ai-text);
}
:root.light-mode .ai-select-option.selected {
background-color: var(--ai-table-row-active);
color: var(--ai-text);
}
/* Compact variant for sort-only dropdowns inside flex forms */
.ai-select-compact {
width: auto !important;
flex: 0 0 auto !important;
}
.ai-select-compact .ai-select-btn {
min-width: 70px;
width: auto;
}
/* Hide the native select when replaced */
.ai-filter-row select.ai-filter-input {
display: none !important;
}
/* -- Custom Dropdown Integration (TomSelect) overrides -- */
.ts-wrapper.ai-filter-input {
padding: 0 !important;
min-height: 38px;
height: auto !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.ts-wrapper.ai-filter-input .ts-control {
background: var(--ai-filter-ctrl-gloss), var(--ai-input-bg) !important;
border: 1px solid var(--ai-filter-ctrl-border) !important;
border-radius: 50px !important;
color: var(--ai-text) !important;
font-size: 0.76rem;
font-weight: 600;
padding: 0 2.1rem 0 0.75rem !important;
width: 100%;
min-width: 110px;
box-shadow: var(--ai-filter-ctrl-shadow) !important;
min-height: 34px !important;
height: 34px !important;
max-height: 34px !important;
line-height: 32px !important;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
position: relative;
z-index: 1;
}
/* Hover for searchbar (Tom Select) filter dropdowns — matches the normal
AdeptSelect filter hover (.ai-select-btn:hover). Guarded so the open/focus
pink-glow state still wins when the dropdown is active. */
.ts-wrapper.ai-filter-input:not(.dropdown-active):not(.focus) .ts-control:hover {
border-color: var(--ai-primary) !important;
background: rgba(var(--ai-primary-rgb), 0.04) !important;
box-shadow: var(--ai-filter-ctrl-shadow-hover), 0 0 0 1px rgba(var(--ai-primary-rgb), 0.1) !important;
}
:root.light-mode .ts-wrapper.ai-filter-input:not(.dropdown-active):not(.focus) .ts-control:hover {
background-color: var(--ai-select-bg) !important;
border-color: var(--ai-primary) !important;
box-shadow:
0 4px 15px rgba(15, 23, 42, 0.14),
0 0 0 1px rgba(var(--ai-primary-rgb), 0.1),
inset 0 1px 0 0 rgba(255, 255, 255, 0.55) !important;
}
.ts-wrapper.ai-filter-input .ts-control .item {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
display: block !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Ensure the input doesn't push the content or grow the pill unnecessarily WHEN an item is selected */
.ts-wrapper.ai-filter-input.has-items .ts-control>input {
position: absolute !important;
opacity: 0 !important;
width: 0 !important;
min-width: 0 !important;
}
/* Allow input to be visible for placeholder text when NO item is selected */
.ts-wrapper.ai-filter-input:not(.has-items) .ts-control>input {
position: relative !important;
opacity: 1 !important;
width: 100% !important;
}
.ts-wrapper.ai-filter-input .ts-control>input::placeholder {
color: var(--ai-text-muted) !important;
opacity: 0.7 !important;
}
/* Allow search input to be visible but NOT grow the pill beyond the current item's width */
.ts-wrapper.ai-filter-input.ai-filter-search.dropdown-active .ts-control>input {
position: absolute !important;
left: 0.8rem !important;
right: 2.2rem !important;
opacity: 1 !important;
width: auto !important;
display: block !important;
}
/* Hide the selected item text when searching to avoid overlap with the input, but keep its space to maintain width */
.ts-wrapper.ai-filter-input.ai-filter-search.dropdown-active.ts-focus .ts-control .item {
display: block !important;
color: transparent !important;
}
/* .ts-wrapper.ai-filter-input .ts-dropdown inherits all styles from the
unified .ts-dropdown block above. Only add overrides that are truly unique. */
.ts-wrapper.ai-filter-input .ts-dropdown {
margin-top: 5px;
}
/* -- Mobile Filter Refinements ---------------------------------------------- */
/* SECTION 14 · TableCard — shared #table-card scroll/sticky chrome */
/* ======================================================
Clients Table — Scoped scroll, design & responsive
====================================================== */
/* 1. Contain the table inside the card — table-responsive is the sole scroll container */
#table-card {
overflow: visible;
/* Clip content to rounded card corners, stop table spilling out */
}
#table-card .ai-card-body.p-0 {
overflow: hidden !important;
/* Let table-responsive handle all horizontal scroll */
}
#table-card .table-responsive {
overflow-x: auto !important;
scrollbar-width: none !important;
/* Hide native — use custom below */
-ms-overflow-style: none !important;
/* Remove the scroll-edge gradient — it fades the tfoot row to white as you scroll */
background: var(--ai-card-bg) !important;
}
#table-card .table-responsive::-webkit-scrollbar {
height: 8px;
}
#table-card .table-responsive::-webkit-scrollbar-track {
background: transparent;
}
#table-card .table-responsive::-webkit-scrollbar-thumb {
background: rgba(var(--ai-primary-rgb), 0.3);
border-radius: 4px;
}
#table-card .table-responsive::-webkit-scrollbar-thumb:hover {
background: rgba(var(--ai-primary-rgb), 0.5);
}
/* Status bar and scrollbar strip sit outside the scroll pane — keep them full width */
#table-card .clients-scrollbar-outer,
#table-card .ai-table-status-bar {
width: 100%;
box-sizing: border-box;
flex-shrink: 0;
}
#table-card .ai-table-status-bar {
position: -webkit-sticky;
position: sticky;
left: 0;
width: 100%;
box-sizing: border-box;
}
/* Identifying Icon Badges (Table context) */
.ai-table-icon-badge {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(var(--ai-primary-rgb), 0.1);
color: var(--ai-primary);
font-size: 1rem;
flex-shrink: 0;
transition: var(--ai-transition);
}
.ai-table-icon-badge.secondary {
background: rgba(var(--ai-accent-lilac-rgb), 0.14);
color: var(--ai-accent-lilac);
}
.ai-table-icon-badge.warning {
background: rgba(255, 165, 2, 0.1);
color: var(--ai-warning);
}
:root:not(.light-mode) .ai-table-icon-badge {
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: var(--ai-badge-elevate-dark), var(--ai-badge-inset-dark);
}
:root:not(.light-mode) .ai-table-icon-badge.secondary {
border-color: rgba(var(--ai-accent-lilac-rgb), 0.28);
}
:root:not(.light-mode) .ai-table-icon-badge.warning {
border-color: rgba(255, 165, 2, 0.28);
}
:root.light-mode .ai-table-icon-badge {
border: 1px solid rgba(var(--ai-primary-rgb), 0.22);
box-shadow: 0 2px 10px rgba(var(--ai-accent-lilac-rgb), 0.14), var(--ai-badge-inset);
background: rgba(var(--ai-primary-rgb), 0.12);
}
:root.light-mode .ai-table-icon-badge.secondary {
border-color: rgba(var(--ai-accent-lilac-rgb), 0.32);
background: rgba(var(--ai-accent-lilac-rgb), 0.14);
}
:root.light-mode .ai-table-icon-badge.warning {
border-color: rgba(255, 165, 2, 0.35);
box-shadow: 0 2px 10px rgba(255, 165, 2, 0.12), var(--ai-badge-inset);
background: rgba(255, 165, 2, 0.2);
}
/* Body column cell sizing & clipping */
.ai-table td.ai-col-company,
.ai-table td.ai-col-client,
.ai-table td.ai-col-name,
.ai-table td.ai-col-contact,
.ai-table td.ai-col-address,
.ai-table td.ai-col-currencies,
.ai-table td.ai-col-projects,
.ai-table td.ai-col-date {
max-width: 260px;
min-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
.ai-table tbody td.ai-col-company strong,
.ai-table tbody td.ai-col-client strong,
.ai-table tbody td.ai-col-client .ai-client-name,
.ai-table tbody td.ov-td-name .ai-client-name,
.ai-table tbody td.ai-col-name strong,
.ai-table tbody td.ai-col-project strong,
.ai-table tbody td.ai-col-project .ai-client-name,
.ai-table tbody td.ai-col-user strong,
.ai-table tbody td.ai-col-user .ai-client-name,
.ai-table tbody td.ai-col-title strong,
.ai-table tbody td.ai-col-title .ai-client-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: break-word;
line-height: 1.3;
}
/* 4. Filter row sticky column — must NOT inherit the pink header */
#table-card .ai-table thead tr.ai-filter-row th.ai-col-company,
#table-card .ai-table thead tr.ai-filter-row th.ai-col-client,
#table-card .ai-table thead tr.ai-filter-row th.ai-col-name,
#table-card .ai-table thead tr.ai-filter-row th.ai-col-date,
#table-card .ai-table thead tr.ai-filter-row th.ai-col-user,
#table-card .ai-table thead tr.ai-filter-row th.ai-col-project,
#table-card .ai-table thead tr.ai-filter-row th.ai-col-title {
background: var(--ai-card-bg) !important;
color: var(--ai-text) !important;
border-top: 1px solid var(--ai-border) !important;
}
:root.light-mode #table-card .ai-table thead tr.ai-filter-row th.ai-col-company,
:root.light-mode #table-card .ai-table thead tr.ai-filter-row th.ai-col-client,
:root.light-mode #table-card .ai-table thead tr.ai-filter-row th.ai-col-name,
:root.light-mode #table-card .ai-table thead tr.ai-filter-row th.ai-col-date,
:root.light-mode #table-card .ai-table thead tr.ai-filter-row th.ai-col-user,
:root.light-mode #table-card .ai-table thead tr.ai-filter-row th.ai-col-project,
:root.light-mode #table-card .ai-table thead tr.ai-filter-row th.ai-col-title {
background: var(--ai-card-bg) !important;
color: var(--ai-text) !important;
border-top: 1px solid var(--ai-border) !important;
}
/* 5. Custom scrollbar - card background, standard thumb */
.ai-custom-scroll-outer,
.clients-scrollbar-outer {
box-sizing: border-box;
background: var(--ai-card-bg);
border-bottom: 1px solid var(--ai-border);
z-index: 50;
}
.ai-custom-scroll-track,
.clients-scrollbar-track {
overflow-x: auto;
overflow-y: hidden;
height: 10px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.25) rgba(255,255,255,0.05);
}
:root.light-mode .ai-custom-scroll-track,
:root.light-mode .clients-scrollbar-track {
scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.06);
}
.ai-custom-scroll-track::-webkit-scrollbar,
.clients-scrollbar-track::-webkit-scrollbar {
height: 10px;
}
.ai-custom-scroll-track::-webkit-scrollbar-track,
.clients-scrollbar-track::-webkit-scrollbar-track {
background: rgba(255,255,255,0.04);
border-radius: 10px;
}
:root.light-mode .ai-custom-scroll-track::-webkit-scrollbar-track,
:root.light-mode .clients-scrollbar-track::-webkit-scrollbar-track {
background: rgba(0,0,0,0.06);
}
.ai-custom-scroll-track::-webkit-scrollbar-thumb,
.clients-scrollbar-track::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.25);
border-radius: 10px;
}
:root.light-mode .ai-custom-scroll-track::-webkit-scrollbar-thumb,
:root.light-mode .clients-scrollbar-track::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.3);
}
.ai-custom-scroll-track::-webkit-scrollbar-thumb:hover,
.clients-scrollbar-track::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.45);
}
:root.light-mode .ai-custom-scroll-track::-webkit-scrollbar-thumb:hover,
:root.light-mode .clients-scrollbar-track::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.5);
}
.ai-custom-scroll-spacer,
.clients-scrollbar-spacer {
height: 1px;
background: transparent;
}
/* Table responsiveness overrides for custom scrollbar */
.table-responsive {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.table-responsive::-webkit-scrollbar {
display: none !important;
}
/* ======================================================
Clients Table — Responsive ≤768px
====================================================== */
/* ======================================================
Clients Table — Responsive ≤480px
====================================================== */
/* ======================================================
Clients Table — Responsive ≤399px (320px target)
====================================================== */
/* SECTION 15 · FormInputs — hybrid textarea, tom-select option styling */
/* ==========================================================================
Hybrid Textarea (from footer.php)
========================================================================== */
.ai-textarea-hybrid-wrap {
position: relative;
width: 100%;
}
.ai-textarea-hybrid {
height: 140px;
overflow-y: auto;
transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
resize: none !important;
padding-right: 35px !important;
}
.ai-textarea-hybrid-wrap.expanded .ai-textarea-hybrid {
overflow: hidden !important;
}
.ai-textarea-expand-btn {
position: absolute;
top: 8px;
right: 8px;
width: 26px;
height: 26px;
border-radius: 6px;
background: rgba(236, 64, 122, 0.09);
border: 1px solid rgba(236, 64, 122, 0.22);
color: #ec407a;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
z-index: 5;
transition: all 0.2s ease;
}
:root.light-mode .ai-textarea-expand-btn {
background: rgba(173, 20, 87, 0.09);
border: 1px solid rgba(173, 20, 87, 0.22);
color: #c2185b;
}
.ai-textarea-expand-btn:hover {
background: var(--ai-pink-rail-gradient);
border-color: rgba(255, 255, 255, 0.22);
color: #fff;
}
/* Wiki project Tom Select — dropdown is position:fixed on body; scope by .ts-option-stack only */
.ts-dropdown .ts-option-stack {
display: block;
}
.ts-dropdown .ts-option-title {
display: block;
font-weight: 700;
line-height: 1.25;
}
.ts-dropdown .ts-option-sub {
display: block;
font-size: 0.7rem;
font-weight: 500;
color: var(--ai-text-muted);
margin-top: 4px;
line-height: 1.3;
}
.ts-dropdown .option:hover .ts-option-sub,
.ts-dropdown .option.active .ts-option-sub {
color: var(--ai-primary);
opacity: 0.92;
}
:root.light-mode .ts-dropdown .ts-option-sub {
color: #64748b;
}
:root.light-mode .ts-dropdown .option:hover .ts-option-sub,
:root.light-mode .ts-dropdown .option.active .ts-option-sub {
color: var(--ai-primary);
}
/* ── Toolbar dropdown menus (font family, font size, etc.) ── */
.tox-menu,
.tox-tiered-menu {
background-color: var(--ai-card-bg) !important;
border: 1px solid var(--ai-border) !important;
border-radius: 10px !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
max-height: 400px !important;
overflow-y: auto !important;
scrollbar-width: thin !important;
z-index: 15000 !important;
/* no animation — transform-based entry causes page shake */
animation: none !important;
}
/* ── TinyMCE Dialogs — neutral chrome matching the editor itself, compact sizing ── */
.tox-dialog-wrap {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 12000 !important;
}
/* ── Dialog sidebar nav (emoji categories, image tabs) ── */
.tox-dialog__body-nav {
background-color: var(--ai-card-bg) !important;
border-right: 1px solid var(--ai-border) !important;
padding: 8px 4px !important;
min-width: 110px !important;
display: flex !important;
flex-direction: column !important;
}
/* Toolbar dropdowns (font family, size, etc.): TinyMCE stacks .tox-menu + .tox-collection--list
on one element; without this, the later transparent rule makes the menu see-through in dark mode */
.tox-menu.tox-collection--list,
.tox-tiered-menu.tox-collection--list {
background-color: var(--ai-card-bg) !important;
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ── Dialog buttons — neutral, matching the editor's own chrome ── */
.tox-button {
background: var(--ai-card-bg) !important;
background-color: var(--ai-card-bg) !important;
border: 1px solid var(--ai-border) !important;
border-radius: 8px !important;
padding: 6px 14px !important;
font-weight: 700 !important;
font-size: 0.8rem !important;
color: var(--ai-text-muted) !important;
transition: background 0.15s ease !important;
box-shadow: none !important;
}
/* -- Weekly Log — Responsive column sizing ------------------------------------ */
/* Col order: 1=Day, 2=Project, 3=Service, 4=Hours, 5=Description, 6=Actions */
/* Weekly Log — Table horizontal scroll logic */
.ai-bulk-table {
min-width: 1200px !important;
/* Increased from 1100px to accommodate wider columns */
table-layout: fixed !important;
}
/* Specific column widths to fit long names */
/* Day (Col 1) */
.ai-bulk-table th:nth-child(1) {
width: 65px !important;
}
/* Client & Service (Col 2) */
.ai-bulk-table th:nth-child(2) {
width: 550px !important;
}
/* Hours (Col 3) */
.ai-bulk-table th:nth-child(3) {
width: 110px !important;
}
/* Description (Col 4) will take the remaining space */
.ai-bulk-table th:nth-child(4) {
width: auto !important;
}
/* Actions (Col 5) */
.ai-bulk-table th:nth-child(5) {
width: 50px !important;
}
/* Static Header/Footer & Scrolling Content Logic */
.ai-log-form-card .ai-card-body {
/* Do NOT use overflow-x: hidden — it creates a stacking context that
clips fixed-positioned dropdown panels (TomSelect, ai-select-panel). */
overflow-x: visible !important;
position: relative;
}
.ai-log-form-card .table-responsive {
overflow-x: auto !important;
/* Only scroll the table */
width: 100%;
-webkit-overflow-scrolling: touch;
margin-bottom: 0;
}
.weekly-nav-bar {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50px;
padding: 10px 20px;
box-shadow: none !important;
margin-bottom: 1rem !important;
}
.weekly-nav-btn {
color: var(--ai-text-muted) !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
transition: all 0.3s;
border-radius: 20px;
}
.weekly-nav-btn:hover {
color: #fff !important;
background: var(--ai-pink-rail-gradient);
border-color: transparent !important;
box-shadow: 0 4px 14px rgba(173, 20, 87, 0.28);
transform: translateX(2px);
}
.weekly-nav-btn:first-child:hover {
transform: translateX(-2px);
}
.ai-bulk-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
table-layout: fixed !important;
border-top: 1px solid var(--ai-border);
}
.ai-bulk-table thead th {
position: sticky;
top: 0;
z-index: 10;
background: #282828;
border-bottom: 1px solid var(--ai-border);
padding: 15px !important;
color: var(--ai-text-muted);
text-transform: uppercase;
font-size: 0.65rem !important;
letter-spacing: 1.5px;
font-weight: 800;
}
:root.light-mode .ai-bulk-table thead th {
background: linear-gradient(180deg, var(--ai-select-bg) 0%, var(--ai-input-bg) 100%) !important;
}
.weekly-day-row {
background: transparent;
transition: all 0.2s ease;
border-bottom: 1px solid var(--ai-border);
}
.weekly-day-row:hover {
background: rgba(255, 255, 255, 0.02) !important;
}
.weekly-day-row td {
border: none !important;
padding: 14px 10px !important;
overflow: visible !important;
vertical-align: middle !important;
}
.weekly-day-badge {
display: flex;
flex-direction: column;
line-height: 1;
min-width: 45px;
}
.weekly-day-name {
font-size: 0.65rem;
text-transform: uppercase;
font-weight: 800;
color: var(--ai-primary);
margin-bottom: 4px;
opacity: 0.9;
}
.weekly-day-num {
font-size: 1.4rem;
font-weight: 800;
color: var(--ai-text);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.weekly-project,
.weekly-service,
.weekly-hours,
.weekly-desc {
background: var(--ai-input-bg) !important;
border: 1px solid var(--ai-border) !important;
color: var(--ai-text) !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
min-height: 42px !important;
height: auto !important;
/* Allow vertical growth */
border-radius: 50px !important;
font-weight: 600;
padding: 8px 14px !important;
/* Switched to vertical padding for wrapping */
line-height: 1.4 !important;
/* Flexible line height */
white-space: normal !important;
/* Allow text to wrap */
}
/* Removed conflicting light-mode override */
.weekly-desc.ai-textarea-hybrid {
padding: 10px 40px 10px 14px !important;
min-height: 44px !important;
line-height: 1.4 !important;
resize: none;
background: var(--ai-input-bg);
overflow: hidden !important;
transition: height 0.1s ease-out;
}
.ai-textarea-hybrid-wrap.expanded .weekly-desc.ai-textarea-hybrid {
min-height: 100px !important;
}
.ai-textarea-hybrid-wrap .ai-textarea-expand-btn {
top: 8px !important;
right: 8px !important;
color: #ec407a !important;
background: rgba(236, 64, 122, 0.09);
border-radius: 6px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(236, 64, 122, 0.18);
}
:root.light-mode .ai-textarea-hybrid-wrap .ai-textarea-expand-btn {
background: rgba(173, 20, 87, 0.09);
border-color: rgba(173, 20, 87, 0.18);
color: #c2185b !important;
}
.ai-textarea-hybrid-wrap .ai-textarea-expand-btn:hover {
background: var(--ai-pink-rail-gradient);
border-color: rgba(255, 255, 255, 0.2);
color: white !important;
}
.weekly-hours {
width: 100% !important;
padding-right: 5px !important;
font-weight: 800;
text-align: center;
}
.weekly-desc {
font-size: 0.9rem;
}
.weekly-project:focus,
.weekly-service:focus,
.weekly-hours:focus,
.weekly-desc:focus,
.ai-select-btn:focus {
border-color: rgba(255, 255, 255, 0.3) !important;
box-shadow: none !important;
background: var(--ai-select-bg) !important;
}
.dropdown-menu.ai-dropdown {
background-color: var(--ai-calendar-bg) !important;
}
/* Compact AdeptSelect (.form-select-sm): match Status / m_term pill (filter + card tokens).
Search-in-panel dropdowns (.ai-select-searchbar from data-searchable) keep the flatter input-bg chip. */
.ai-select.ai-select-sm:not(.ai-select-searchbar) .ai-select-btn {
min-height: 38px !important;
height: 38px !important;
max-height: 38px !important;
line-height: 36px !important;
border-radius: 50px !important;
background: var(--ai-filter-ctrl-gloss), var(--ai-input-bg) !important;
border: 1px solid var(--ai-filter-ctrl-border) !important;
box-shadow: var(--ai-filter-ctrl-shadow) !important;
color: var(--ai-text) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
padding: 0 14px 0 0.8rem !important;
display: flex !important;
justify-content: space-between;
align-items: center;
white-space: nowrap;
}
.ai-select.ai-select-sm:not(.ai-select-searchbar) .ai-select-btn:hover {
border-color: var(--ai-primary) !important;
background: rgba(var(--ai-primary-rgb), 0.04) !important;
box-shadow: var(--ai-filter-ctrl-shadow-hover), 0 0 0 1px rgba(var(--ai-primary-rgb), 0.1) !important;
}
:root.light-mode .ai-select.ai-select-sm:not(.ai-select-searchbar) .ai-select-btn {
background: var(--ai-filter-ctrl-gloss), var(--ai-input-bg) !important;
border: 1px solid var(--ai-filter-ctrl-border) !important;
box-shadow: var(--ai-filter-ctrl-shadow) !important;
color: var(--ai-text) !important;
}
:root.light-mode .ai-select.ai-select-sm:not(.ai-select-searchbar) .ai-select-btn:hover {
background-color: var(--ai-select-bg) !important;
border-color: var(--ai-primary) !important;
box-shadow:
0 4px 15px rgba(15, 23, 42, 0.14),
0 0 0 1px rgba(var(--ai-primary-rgb), 0.1),
inset 0 1px 0 0 rgba(255, 255, 255, 0.55) !important;
}
:root.light-mode .ai-select.ai-select-sm:not(.ai-select-searchbar).open .ai-select-btn,
:root.light-mode .ai-select.ai-select-sm:not(.ai-select-searchbar).ai-filter-active .ai-select-btn {
border-color: var(--ai-primary) !important;
box-shadow: 0 0 0 1px var(--ai-primary), 0 0 0 3px var(--ai-primary-light) !important;
}
/* AdeptSelect + in-panel search field — preserve previous compact input surface */
.ai-select.ai-select-searchbar.ai-select-sm .ai-select-btn {
height: auto;
min-height: 38px;
border-radius: 50px;
background: var(--ai-input-bg);
font-size: 0.85rem;
padding: 8px 14px;
display: flex;
justify-content: space-between;
align-items: center;
white-space: normal;
}
.ai-select.ai-select-searchbar.ai-select-sm .ai-select-btn:hover {
background: rgba(var(--ai-primary-rgb), 0.04) !important;
border-color: var(--ai-primary) !important;
box-shadow: 0 2px 10px rgba(var(--ai-primary-rgb), 0.1) !important;
}
.ai-select-panel {
background: var(--ai-select-bg);
border: 1px solid var(--ai-border);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.ai-select-panel.show {
opacity: 1;
transform: translateY(0);
}
.ai-select-option {
color: var(--ai-text);
padding: 10px 15px;
cursor: pointer;
transition: all 0.15s;
}
.ai-select-option:hover {
background: var(--ai-table-row-hover);
color: var(--ai-text);
}
.ai-select-option.selected {
background: var(--ai-table-row-active);
color: var(--ai-text);
}
.weekly-add-btn,
.weekly-remove-btn {
font-size: 1.4rem !important;
opacity: 0.6;
transition: all 0.2s;
}
.weekly-add-btn {
color: #c2185b !important;
}
.weekly-remove-btn {
color: var(--ai-danger) !important;
}
.weekly-add-btn:hover,
.weekly-remove-btn:hover {
opacity: 1;
transform: scale(1.15);
}
.ai-btn-group-pill {
background: var(--ai-input-bg);
padding: 5px;
border-radius: 50px;
border: 1px solid var(--ai-border);
display: inline-flex;
box-shadow: none !important;
}
.ai-btn-group-pill .btn {
border-radius: 50px;
border: none;
color: var(--ai-text-muted);
font-weight: 700;
padding: 8px 28px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ai-btn-group-pill .btn-check:checked+.btn {
background: var(--ai-pink-rail-gradient) !important;
color: white !important;
box-shadow:
0 3px 12px rgba(173, 20, 87, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
transform: scale(1.05);
border-color: transparent !important;
}
#single-entry-view,
#weekly-entry-view {}
.fc td,
.fc th {
border-color: var(--ai-border) !important;
}
@keyframes toxModalIn {
from {
transform: translateY(16px) scale(0.97);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes aiEntrance {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* SECTION 16 · SmallScreens — extra-small screen (<=480px) refinements */
/* ==========================================================================
Extra-small screen refinements — ≤480px
Maintenance Hours, Login, Wiki at sub-480 widths
========================================================================== */
/* ==========================================================================
320px minimum — prevent any horizontal overflow, tighten final edge cases
========================================================================== */
@keyframes ai-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ==========================================================================
Bulk Operations — shared across all table pages
========================================================================== */
.btn-bulk {
border-radius: 8px;
font-weight: 600;
padding: 0.25rem 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
background: transparent;
white-space: nowrap;
}
.btn-bulk-archive {
border: 1px solid color-mix(in srgb, var(--ai-warning) 62%, var(--ai-border) 38%);
color: var(--ai-warning);
background: rgba(255, 165, 2, 0.14);
}
.btn-bulk-archive:hover {
background: var(--ai-warning);
border-color: var(--ai-warning);
color: #fff !important;
}
:root.light-mode .btn-bulk-archive {
background: rgba(255, 165, 2, 0.11);
border-color: color-mix(in srgb, var(--ai-warning) 52%, var(--ai-border) 48%);
}
:root.light-mode .btn-bulk-archive:hover {
background: var(--ai-warning);
border-color: var(--ai-warning);
color: #fff !important;
}
.btn-bulk-restore {
border: 1px solid #10b981;
color: #10b981;
}
.btn-bulk-restore:hover {
background: #10b981;
color: #fff !important;
}
.btn-bulk-delete {
border: 1px solid var(--ai-danger);
color: var(--ai-danger);
}
.btn-bulk-delete:hover {
background: var(--ai-danger);
color: #fff !important;
}
.btn-bulk-skip {
border: 1px solid #6366f1;
color: #6366f1;
background: rgba(99, 102, 241, 0.12);
}
.btn-bulk-skip:hover {
background: #6366f1;
border-color: #6366f1;
color: #fff !important;
}
/* Bulk row tint is applied per | so it matches sticky cells while scrolling */
.ai-bulk-bar {
background: var(--ai-bulk-bar-bg);
border-bottom: 1px solid var(--ai-bulk-bar-border);
border-left: 3px solid var(--ai-primary);
font-size: 0.85rem;
color: var(--ai-text);
}
:root.light-mode .ai-bulk-bar {
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}
.ai-bulk-bar .ai-bulk-bar-dismiss {
color: var(--ai-text-muted) !important;
opacity: 0.9;
border-radius: 8px;
padding: 0.35rem 0.45rem !important;
line-height: 1 !important;
transition:
color 0.15s ease,
background-color 0.15s ease,
opacity 0.15s ease;
}
.ai-bulk-bar .ai-bulk-bar-dismiss:hover {
color: var(--ai-text) !important;
opacity: 1;
background-color: rgba(var(--ai-primary-rgb), 0.14) !important;
}
:root.light-mode .ai-bulk-bar .ai-bulk-bar-dismiss:hover {
background-color: rgba(var(--ai-primary-rgb), 0.1) !important;
}
.ai-bulk-count {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.02em;
}
.ai-bulk-count-num {
color: var(--ai-text);
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.ai-bulk-count-label {
color: var(--ai-text-muted);
font-weight: 600;
font-size: 0.82em;
text-transform: lowercase;
letter-spacing: 0.03em;
}
.bulk-row-cb:checked {
background-color: var(--ai-primary) !important;
border-color: var(--ai-primary) !important;
}
/* Bulk row/column checkboxes: global .form-check-input:checked uses a white dot SVG; use tick on brand fill */
.ai-table thead .form-check-input:checked,
.ai-table tbody .bulk-row-cb.form-check-input:checked {
background-color: var(--ai-primary) !important;
border-color: var(--ai-primary) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.ai-table thead .form-check-input:indeterminate,
.ai-table tbody .bulk-row-cb.form-check-input:indeterminate {
background-color: var(--ai-primary) !important;
border-color: var(--ai-primary) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") !important;
}
.ai-table thead .form-check-input,
.ai-table tbody .bulk-row-cb.form-check-input {
width: 1.25rem !important;
height: 1.25rem !important;
min-width: 1.25rem;
min-height: 1.25rem;
margin-top: 0 !important;
border-width: 2px !important;
border-radius: 50% !important;
cursor: pointer;
background-color: color-mix(in srgb, var(--ai-card-bg) 88%, rgba(var(--ai-primary-rgb), 0.06)) !important;
border-color: color-mix(in srgb, var(--ai-border) 50%, var(--ai-text-muted) 50%) !important;
transition:
border-color 0.15s ease,
background-color 0.15s ease,
box-shadow 0.15s ease;
}
:root.light-mode .ai-table thead .form-check-input,
:root.light-mode .ai-table tbody .bulk-row-cb.form-check-input {
background-color: var(--ai-card-bg) !important;
border-color: color-mix(in srgb, var(--ai-border) 72%, var(--ai-primary) 14%) !important;
}
/* Light mode: unchecked rule above is more specific than :checked without :root.light-mode — re-assert brand fill */
:root.light-mode .ai-table thead .form-check-input:checked,
:root.light-mode .ai-table tbody .bulk-row-cb.form-check-input:checked {
background-color: var(--ai-primary) !important;
border-color: var(--ai-primary) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
:root.light-mode .ai-table thead .form-check-input:indeterminate,
:root.light-mode .ai-table tbody .bulk-row-cb.form-check-input:indeterminate {
background-color: var(--ai-primary) !important;
border-color: var(--ai-primary) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") !important;
}
.ai-table thead .form-check-input:hover:not(:checked):not(:indeterminate),
.ai-table tbody .bulk-row-cb.form-check-input:hover:not(:checked) {
border-color: var(--ai-primary) !important;
background-color: rgba(var(--ai-primary-rgb), 0.14) !important;
}
:root.light-mode .ai-table thead .form-check-input:hover:not(:checked):not(:indeterminate),
:root.light-mode .ai-table tbody .bulk-row-cb.form-check-input:hover:not(:checked) {
background-color: rgba(var(--ai-primary-rgb), 0.1) !important;
}
.ai-table thead .form-check-input:focus,
.ai-table tbody .bulk-row-cb.form-check-input:focus {
border-color: var(--ai-primary) !important;
box-shadow: 0 0 0 3px rgba(var(--ai-primary-rgb), 0.28) !important;
}
.ai-row-removing {
transition: opacity 0.35s ease, transform 0.35s ease;
opacity: 0 !important;
transform: translateX(30px) !important;
pointer-events: none;
}
/* QB loading state */
.btn-action-qb {
position: relative;
overflow: hidden;
}
.btn-action-qb.ai-qb-loading {
pointer-events: none;
}
.btn-action-qb.ai-qb-loading img {
opacity: 0.3;
}
.btn-action-qb.ai-qb-loading::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
border: 2px solid transparent;
border-top-color: #2ca01c;
border-right-color: #2ca01c;
border-radius: 50%;
animation: ai-qb-spin 0.6s linear infinite;
}
@keyframes ai-qb-spin {
to {
transform: rotate(360deg);
}
}
.ai-syncing {
pointer-events: none;
opacity: 0.85;
}
.ai-syncing span {
display: inline-block;
animation: ai-pulse-text 1.2s ease-in-out infinite;
}
@keyframes ai-pulse-text {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
/* Bulk bar responsive stacking */
/* -- Locked Out Status Badge -- */
.ai-badge.locked-out {
background: rgba(255, 165, 2, 0.14);
color: #ffa502;
}
.form-select, .form-control {
color-scheme: dark;
}
:root.light-mode .form-select, :root.light-mode .form-control {
color-scheme: light;
}
.form-select:focus, .form-control:focus {
border-color: var(--ai-primary) !important;
box-shadow: 0 0 0 0.15rem rgba(var(--ai-primary-rgb), 0.1) !important;
}
/* -- High-Density Table Cells ---------------------------------------------- */
.ai-table-cell-limit {
/* Limit removed to prevent cropping of important info */
position: relative;
}
.ai-cell-more-badge {
display: inline-block;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--ai-primary);
background: rgba(var(--ai-primary-rgb), 0.1);
padding: 2px 10px;
border-radius: 50px;
margin-top: 8px;
cursor: pointer;
border: 1px solid rgba(var(--ai-primary-rgb), 0.25);
transition: var(--ai-transition);
}
.ai-cell-more-badge:hover {
background: rgba(var(--ai-primary-rgb), 0.18);
transform: translateY(-1px);
}
/* Light mode — premium lift matching .ai-date-badge */
:root.light-mode .ai-cell-more-badge {
background: linear-gradient(180deg, rgba(var(--ai-primary-rgb), 0.12) 0%, rgba(var(--ai-primary-rgb), 0.06) 100%);
color: #b91c6c;
border-color: rgba(var(--ai-primary-rgb), 0.3);
box-shadow: var(--ai-badge-elevate), var(--ai-badge-inset);
}
:root.light-mode .ai-cell-more-badge:hover {
background: linear-gradient(180deg, rgba(var(--ai-primary-rgb), 0.2) 0%, rgba(var(--ai-primary-rgb), 0.1) 100%);
}
/* Dark mode — gradient + crystal depth matching .ai-date-badge */
:root:not(.light-mode) .ai-cell-more-badge {
background: linear-gradient(180deg, rgba(233, 30, 140, 0.28) 0%, rgba(233, 30, 140, 0.1) 100%);
border-color: rgba(233, 30, 140, 0.48);
color: var(--ai-chip-pink-text);
box-shadow: var(--ai-badge-elevate-dark), var(--ai-badge-inset-dark);
}
:root:not(.light-mode) .ai-cell-more-badge:hover {
background: linear-gradient(180deg, rgba(233, 30, 140, 0.38) 0%, rgba(233, 30, 140, 0.15) 100%);
border-color: rgba(233, 30, 140, 0.62);
}
/* All Bright dark — matches .ai-date-badge in same mode */
:root.all-bright-mode:not(.light-mode) .ai-cell-more-badge {
background: linear-gradient(180deg, rgba(233, 30, 140, 0.34) 0%, rgba(233, 30, 140, 0.14) 100%);
border-color: rgba(233, 30, 140, 0.52);
color: #e8b4d0;
box-shadow: var(--ai-badge-elevate-dark), var(--ai-badge-inset-dark);
}
:root.all-bright-mode:not(.light-mode) .ai-cell-more-badge:hover {
background: linear-gradient(180deg, rgba(233, 30, 140, 0.42) 0%, rgba(233, 30, 140, 0.18) 100%);
border-color: rgba(233, 30, 140, 0.65);
}
/* Column hover effects removed to restrict sorting to label clicks */
/* Smooth width transition when sort badge expands/contracts a column */
.ai-table thead th[data-sort-col] {
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-sort-label {
display: none;
font-size: 0.65rem;
font-weight: 700;
margin-left: 8px;
padding: 2px 10px;
background: var(--ai-pink-rail-gradient);
color: #fff !important;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 0.5px;
align-items: center;
gap: 4px;
box-shadow: 0 2px 6px rgba(233, 30, 99, 0.35);
white-space: nowrap;
vertical-align: middle;
}
.ai-sort-active .ai-sort-label,
.ai-sort-asc .ai-sort-label,
.ai-sort-desc .ai-sort-label {
display: inline-flex;
}
.ai-table thead th.ai-sort-active .ai-sort-col-label::after,
.ai-table thead th.ai-sort-asc .ai-sort-col-label::after,
.ai-table thead th.ai-sort-desc .ai-sort-col-label::after {
display: none !important;
}
.ai-sort-asc .ai-sort-label::before {
content: '\F148';
font-family: "bootstrap-icons";
font-size: 0.75rem;
}
.ai-sort-desc .ai-sort-label::before {
content: '\F128';
font-family: "bootstrap-icons";
font-size: 0.75rem;
}
.ai-table thead th.ai-col-sticky .ai-sort-label,
.ai-table thead th.ai-col-company .ai-sort-label {
background: rgba(0, 0, 0, 0.22) !important;
box-shadow: none;
}
/* Make sort arrows always visible but dimmed when inactive */
.ai-table thead th[data-sort-col] .ai-sort-col-label::after {
content: '\F143'; /* bi-arrow-down-up for neutral sort */
font-family: "bootstrap-icons";
display: inline-block;
margin-left: 8px;
font-weight: 900;
font-size: 0.85rem;
opacity: 0.25;
color: inherit;
vertical-align: middle;
transition: opacity 0.2s ease;
}
.ai-table thead th[data-sort-col]:hover .ai-sort-col-label::after {
opacity: 0.5;
}
/* -- Table Column Resizing ------------------------------------------------- */
.ai-table thead th {
position: relative;
/* Clip inner content but not the absolutely-positioned resizer handle */
overflow: hidden;
}
/* Sort direction pill: don't clip past the next column */
.ai-table thead th:has(.ai-sort-label:not(:empty)),
.ai-table thead th.ai-sort-active {
overflow: visible;
z-index: 8;
}
/* Resizer – wider invisible hit area, thin visible bar */
.ai-resizer {
position: absolute;
top: 0;
right: -1px; /* overlap the cell border so there is no gap */
width: 14px; /* generous hit target */
height: 100%;
cursor: col-resize;
user-select: none;
touch-action: none; /* required for pointer-capture drag on touch */
z-index: 1001;
display: flex;
justify-content: center;
align-items: stretch;
}
/* Visible bar – thin, subtle, centred inside the hit area */
.ai-resizer::after {
content: '';
align-self: center;
width: 3px;
height: 20px;
background-color: rgba(255, 255, 255, 0.18);
border-radius: 3px;
transition: background-color 0.18s ease, height 0.18s ease, width 0.18s ease, opacity 0.18s ease;
opacity: 0.7;
}
:root.light-mode .ai-resizer::after {
background-color: rgba(0, 0, 0, 0.22);
}
/* Pink sticky-column header – slightly more visible by default */
.ai-table thead th.ai-col-sticky .ai-resizer::after,
.ai-table thead th.ai-col-company .ai-resizer::after {
background-color: rgba(255, 255, 255, 0.55);
opacity: 1;
}
/* Hover / active states */
.ai-resizer:hover::after,
.ai-resizer.resizing::after {
background-color: var(--ai-primary);
width: 3px;
height: 24px;
opacity: 1;
box-shadow: 0 0 8px rgba(var(--ai-primary-rgb), 0.5);
}
/* Light mode: base ::after uses :root.light-mode … (higher specificity than the rule above);
without this block, the bar stays grey on hover and only the pink shadow reads as “muddy purple”. */
:root.light-mode .ai-resizer:hover::after,
:root.light-mode .ai-resizer.resizing::after {
background-color: var(--ai-primary);
width: 3px;
height: 24px;
opacity: 1;
box-shadow: 0 0 10px rgba(var(--ai-primary-rgb), 0.55);
}
.ai-table thead th.ai-col-sticky .ai-resizer:hover::after,
.ai-table thead th.ai-col-sticky .ai-resizer.resizing::after,
.ai-table thead th.ai-col-company .ai-resizer:hover::after,
.ai-table thead th.ai-col-company .ai-resizer.resizing::after {
background-color: #ffffff !important;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}
/* Tooltip hint on resizer hover */
.ai-resizer[title] {
pointer-events: all;
}
/* During drag – lock cursor & kill transitions globally; keep resizer interactive */
.ai-table.resizing,
body.ai-col-resizing {
cursor: col-resize !important;
user-select: none !important;
}
.ai-table.resizing *,
body.ai-col-resizing * {
transition: none !important;
pointer-events: none !important;
}
.ai-table.resizing .ai-resizer,
body.ai-col-resizing .ai-resizer {
pointer-events: all !important;
}
/* -- Sticky column – depth + scroll-driven shadow --------------------------- */
/* The depth is cast by ONE continuous gradient strip (.ai-col-sticky::after,
above) rather than a per-cell box-shadow. Per-cell shadows round off at each
cell's corners, so they pinched at every row border and the strip looked
segmented; a gradient strip bridged across the row borders connects cleanly
top-to-bottom. Keep the cells themselves shadow-free so nothing competes. */
.ai-table thead th.ai-col-sticky,
.ai-table thead th.ai-col-company {
transition: background-color 0.12s ease;
}
.ai-table tbody td.ai-col-sticky,
.ai-table tbody td.ai-col-company,
.ai-table tfoot td.ai-col-sticky,
.ai-table tfoot td.ai-col-company {
transition: background-color 0.12s ease;
}
/* -- Actions Column --------------------------------------------------------
Targeted by class, not :last-child — when a user lacks update/delete
permission the Actions | / | aren't rendered at all, so whichever
data column happens to render last would otherwise inherit this shrink-
to-fit/right-align treatment (e.g. HostingContracts' "Invoice Date &
Status" column got squeezed to width:1% and its badge rows forced to
justify-content:flex-end, while its plain-text "Last invoiced" line
stayed left-aligned — a visible misalignment plus knock-on custom-
scrollbar sizing issues from the forced nowrap overflow). */
.ai-table th.ai-col-actions,
.ai-table td.ai-col-actions {
width: 1%;
white-space: nowrap;
}
/* Ensure action buttons in the actions column stay compact */
.ai-table td.ai-col-actions .d-flex {
justify-content: flex-end;
gap: 8px !important;
}
/* ── Global Modal Close Button ─────────────────────────────────────────────── */
.ov-modal-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 8px;
color: #fff;
transition: all 0.2s;
padding: 0;
cursor: pointer;
flex-shrink: 0;
}
.ov-modal-close:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.4);
}
.ov-modal-close i {
font-size: 1.1rem;
line-height: 1;
}
/* ── Client quick modal (projects.php, hosting_contracts.php) ─────────────────
Pill inputs + theme tokens so New/Edit Client matches in both light/dark. */
#clientQuickModal .form-label {
color: var(--ai-text-muted);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
margin-bottom: 6px;
}
#clientQuickModal .form-control {
background: var(--ai-input-bg);
border: 1px solid var(--ai-border);
color: var(--ai-text);
font-size: 0.85rem;
border-radius: 50px;
padding: 8px 16px;
width: 100%;
min-height: 38px;
height: auto;
transition: all 0.2s ease;
}
#clientQuickModal .form-control::placeholder {
color: var(--ai-placeholder);
}
#clientQuickModal .form-select {
background: var(--ai-input-bg);
border: 1px solid var(--ai-border);
border-radius: 50px;
padding: 8px 16px;
min-height: 38px;
height: auto;
font-size: 0.85rem;
color: var(--ai-text);
transition: all 0.2s ease;
}
#clientQuickModal .form-control:focus,
#clientQuickModal .form-select:focus {
background: var(--ai-input-bg);
border-color: var(--ai-primary);
box-shadow: 0 0 0 3px rgba(var(--ai-primary-rgb), 0.18), 0 0 16px rgba(var(--ai-primary-rgb), 0.12);
color: var(--ai-text);
outline: none;
}
:root.light-mode #clientQuickModal .form-control {
background-color: var(--ai-card-bg) !important;
border: 1px solid var(--ai-filter-border) !important;
box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
}
:root.light-mode #clientQuickModal .form-select {
background-color: var(--ai-card-bg) !important;
background-image: var(--ai-select-icon) !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 14px 12px !important;
border: 1px solid var(--ai-filter-border) !important;
box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
}
:root.light-mode #clientQuickModal .form-control:focus,
:root.light-mode #clientQuickModal .form-select:focus {
background-color: var(--ai-select-bg) !important;
border-color: var(--ai-primary) !important;
box-shadow: 0 0 0 3px rgba(var(--ai-primary-rgb), 0.14), inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
#clientQuickModal .form-check-label {
color: var(--ai-text);
}
#clientQuickModal .form-check-input {
--bs-form-switch-bg: var(--ai-border);
}
#clientQuickModal .form-check-input:focus {
border-color: var(--ai-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--ai-primary-rgb), 0.25);
}
#clientQuickModal .form-check-input:checked {
background-color: var(--ai-primary);
border-color: var(--ai-primary);
}
/* Default tax code: Tom Select control matches modal inputs */
#clientQuickModal .ts-wrapper.single .ts-control {
background: var(--ai-input-bg) !important;
border: 1px solid var(--ai-border) !important;
box-shadow: none !important;
}
#clientQuickModal .ts-wrapper.single .ts-control.focus,
#clientQuickModal .ts-wrapper.single.focus .ts-control {
background: var(--ai-input-bg) !important;
border-color: var(--ai-primary) !important;
box-shadow: 0 0 0 3px rgba(var(--ai-primary-rgb), 0.18), 0 0 16px rgba(var(--ai-primary-rgb), 0.12) !important;
}
:root.light-mode #clientQuickModal .ts-wrapper.single:not(.ai-filter-search) .ts-control {
background: var(--ai-card-bg) !important;
border: 1px solid var(--ai-filter-border) !important;
box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
:root.light-mode #clientQuickModal .ts-wrapper.single:not(.ai-filter-search) .ts-control.focus,
:root.light-mode #clientQuickModal .ts-wrapper.single:not(.ai-filter-search).focus .ts-control {
background: var(--ai-select-bg) !important;
border: 1px solid var(--ai-primary) !important;
box-shadow:
0 0 0 3px rgba(var(--ai-primary-rgb), 0.14),
inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
:root.light-mode #clientQuickModal .ts-wrapper.single:not(.ai-filter-search) .ts-control .item,
:root.light-mode #clientQuickModal .ts-wrapper.single:not(.ai-filter-search) .ts-control input {
color: var(--ai-text) !important;
}
/* ── Consistent Modal Header ────────────────────────────────────────────────── */
.ai-modal-gradient-header {
background: var(--ai-pink-rail-gradient);
border-bottom: none !important;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 14px;
color: #fff;
}
.ai-modal-gradient-header .ai-modal-icon-circle {
width: 36px;
height: 36px;
border-radius: 50%;
/* 3D — glassy white gradient + bevel on the coloured header (mode-independent) */
background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 100%);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 3px rgba(0, 0, 0, 0.16);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-size: 1.05rem;
}
.ai-modal-gradient-header .modal-title,
.ai-modal-gradient-header h5 {
color: #fff !important;
font-weight: 700;
font-family: 'Inter', sans-serif;
margin: 0;
font-size: 1rem;
}
.ai-modal-gradient-header .ai-modal-subtitle-text,
.ai-role-modal .modal-header .ai-modal-subtitle-text {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.85);
margin-top: 1px;
}
/* SECTION 17 · ThemeOverrides — all-bright readability, currency/role badges — KEEP LAST */
/* =============================================================================
All Bright (dark theme) — readability overrides (after :root:not(.light-mode))
Surfaces are lifted but still dark; keep white logo + high-contrast chip text.
============================================================================= */
:root.all-bright-mode:not(.light-mode) .ai-date-badge {
background: linear-gradient(180deg, rgba(233, 30, 140, 0.34) 0%, rgba(233, 30, 140, 0.14) 100%) !important;
border: 1px solid rgba(233, 30, 140, 0.52) !important;
box-shadow: var(--ai-badge-elevate-dark), var(--ai-badge-inset-dark);
color: #e8b4d0 !important;
}
:root.all-bright-mode:not(.light-mode) .ai-date-badge i {
color: #d97aaa;
opacity: 1;
}
:root.all-bright-mode:not(.light-mode) .ai-date-badge:hover {
background: linear-gradient(180deg, rgba(233, 30, 140, 0.42) 0%, rgba(233, 30, 140, 0.18) 100%) !important;
border-color: rgba(233, 30, 140, 0.65) !important;
box-shadow:
0 2px 8px rgba(var(--ai-primary-rgb), 0.2),
var(--ai-badge-inset-dark);
}
:root.all-bright-mode:not(.light-mode) .dash-tz-pill {
border-color: rgba(var(--ai-primary-rgb), 0.45);
background: linear-gradient(165deg, rgba(var(--ai-primary-rgb), 0.24) 0%, rgba(var(--ai-primary-rgb), 0.1) 100%);
color: #ffc2e4;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.12),
0 3px 10px rgba(var(--ai-primary-rgb), 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
:root.all-bright-mode:not(.light-mode) .dash-tz-pill-icon {
background: rgba(var(--ai-primary-rgb), 0.22);
color: #ff9ed0;
}
:root.all-bright-mode:not(.light-mode) .dash-resource-pill {
background: rgba(var(--ai-primary-rgb), 0.24);
color: #ffd0ec;
border: 1px solid rgba(var(--ai-primary-rgb), 0.38);
}
/* Inline role badges (render_role_badge) — brighter on lifted card surfaces */
:root.all-bright-mode:not(.light-mode) .ai-badge[style*="233,30,140"] {
background: rgba(233, 30, 140, 0.28) !important;
color: #ffb3de !important;
border: 1px solid rgba(233, 30, 140, 0.4);
font-weight: 700;
}
:root.all-bright-mode:not(.light-mode) .ai-badge.info {
background: linear-gradient(180deg, rgba(99, 102, 241, 0.44) 0%, rgba(129, 140, 248, 0.18) 100%);
color: #c7d2fe;
border-color: rgba(99, 102, 241, 0.45);
}
:root.all-bright-mode:not(.light-mode) .ai-badge.warning,
:root.all-bright-mode:not(.light-mode) .ai-badge.archive {
color: #fde68a;
}
:root.all-bright-mode:not(.light-mode) .ai-badge.active,
:root.all-bright-mode:not(.light-mode) .ai-badge.success {
color: #86efac;
}
:root.all-bright-mode:not(.light-mode) .ai-badge.inactive,
:root.all-bright-mode:not(.light-mode) .ai-badge.danger {
color: #fecdd3;
}
/* =============================================================================
All Bright (dark theme) — pickers, dropdowns, rich text
============================================================================= */
:root.all-bright-mode:not(.light-mode) .flatpickr-calendar,
:root.all-bright-mode:not(.light-mode) .flatpickr-calendar.inline {
background: var(--ai-calendar-bg) !important;
border-color: var(--ai-calendar-border) !important;
color: var(--ai-calendar-text) !important;
}
:root.all-bright-mode:not(.light-mode) .flatpickr-innerContainer {
border-top-color: var(--ai-calendar-border) !important;
}
:root.all-bright-mode:not(.light-mode) .ts-dropdown,
:root.all-bright-mode:not(.light-mode) .ai-select-panel,
:root.all-bright-mode:not(.light-mode) .dropdown-menu,
:root.all-bright-mode:not(.light-mode) .ai-dropdown {
background: var(--ai-card-bg) !important;
border-color: var(--ai-border) !important;
color: var(--ai-text) !important;
}
:root.all-bright-mode:not(.light-mode) .ts-dropdown .option:hover,
:root.all-bright-mode:not(.light-mode) .ts-dropdown .option.active,
:root.all-bright-mode:not(.light-mode) .ai-dropdown .dropdown-item:hover,
:root.all-bright-mode:not(.light-mode) .ai-dropdown .dropdown-item:focus {
background-color: var(--ai-table-row-hover) !important;
color: var(--ai-text) !important;
}
:root.all-bright-mode:not(.light-mode) .ai-dropdown .dropdown-item.active,
:root.all-bright-mode:not(.light-mode) .ai-dropdown .dropdown-item:active,
:root.all-bright-mode:not(.light-mode) .dropdown-item.active,
:root.all-bright-mode:not(.light-mode) .ts-dropdown .option.selected {
background-color: var(--ai-table-row-active) !important;
color: var(--ai-text) !important;
}
:root.all-bright-mode:not(.light-mode) .ts-dropdown .optgroup-header {
background: var(--ai-card-bg) !important;
}
:root.all-bright-mode:not(.light-mode) .tox .tox-toolbar-overlord,
:root.all-bright-mode:not(.light-mode) .tox .tox-toolbar__primary,
:root.all-bright-mode:not(.light-mode) .tox .tox-toolbar__overflow,
:root.all-bright-mode:not(.light-mode) .tox .tox-statusbar,
:root.all-bright-mode:not(.light-mode) .tox .tox-edit-area {
background: var(--ai-input-bg) !important;
}
:root.all-bright-mode:not(.light-mode) .tox-menu,
:root.all-bright-mode:not(.light-mode) .tox-tiered-menu {
background-color: var(--ai-card-bg) !important;
border-color: var(--ai-border) !important;
}
:root.all-bright-mode:not(.light-mode) .tox-menu .tox-collection__item:hover,
:root.all-bright-mode:not(.light-mode) .tox-menu .tox-collection__item--active,
:root.all-bright-mode:not(.light-mode) .tox-tiered-menu .tox-collection__item:hover,
:root.all-bright-mode:not(.light-mode) .tox-tiered-menu .tox-collection__item--active {
background-color: var(--ai-table-row-hover) !important;
color: var(--ai-text) !important;
}
:root.all-bright-mode:not(.light-mode) .tox .tox-tbtn--select {
background: rgba(255, 255, 255, 0.08) !important;
border-color: var(--ai-border) !important;
}
/* All Bright + light mode — wiki / TinyMCE chrome matches wiki form fields (--ai-card-bg) */
:root.light-mode.all-bright-mode #wiki-form-container .tox .tox-toolbar-overlord,
:root.light-mode.all-bright-mode #wiki-form-container .tox .tox-toolbar__primary,
:root.light-mode.all-bright-mode #wiki-form-container .tox .tox-toolbar__overflow,
:root.light-mode.all-bright-mode #wiki-form-container .tox .tox-statusbar,
:root.light-mode.all-bright-mode #wiki-form-container .tox .tox-edit-area {
background: var(--ai-card-bg) !important;
}
:root.light-mode.all-bright-mode .tox-menu,
:root.light-mode.all-bright-mode .tox-tiered-menu {
background-color: var(--ai-card-bg) !important;
border-color: var(--ai-border) !important;
}
:root.light-mode.all-bright-mode .tox .tox-tbtn--select {
background: rgba(255, 255, 255, 0.65) !important;
border-color: var(--ai-border) !important;
}
/* All Bright (dark) — card header direct icon (grid layout): fully opaque muted, no pink override */
:root.all-bright-mode:not(.light-mode) .ai-card-header h5 > i {
opacity: 1;
color: var(--ai-text-muted);
}
/* All modes — record count + email links: match new pink, bold */
.ai-record-count {
color: #ec407a !important;
font-weight: 900 !important;
-webkit-text-stroke: 0.3px #ec407a;
opacity: 1;
}
.ai-email-link {
color: #ec407a !important;
font-weight: 800 !important;
}
/* All modes — only the FILTERS icon span gets pink; column labels (label.ai-filter-label) stay muted */
span.ai-filter-label {
color: #ec407a !important;
opacity: 1;
font-weight: 900 !important;
-webkit-text-stroke: 0.3px #ec407a;
}
/* All Bright (dark) — card header h5 title text */
:root.all-bright-mode:not(.light-mode) .ai-card-header h5,
:root.all-bright-mode:not(.light-mode) .ai-card-header h5 .ai-card-header-title {
color: var(--ai-text);
}
/* All Bright (dark) — Layout and Archive Buttons */
:root.all-bright-mode:not(.light-mode) .ai-layout-btn .bi-columns-gap,
:root.all-bright-mode:not(.light-mode) .ai-layout-btn .bi-archive,
:root.all-bright-mode:not(.light-mode) .ai-layout-btn .bi-archive-fill {
color: #ec407a !important;
}
:root.all-bright-mode:not(.light-mode) .ai-layout-btn:hover,
:root.all-bright-mode:not(.light-mode) .ai-sync-btn:hover,
:root.all-bright-mode:not(.light-mode) .ai-layout-btn:focus,
:root.all-bright-mode:not(.light-mode) .ai-sync-btn:focus,
:root.all-bright-mode:not(.light-mode) .ai-layout-btn.active {
border-color: #ec407a !important;
color: #ec407a !important;
box-shadow: 0 0 0 1px #ec407a, 0 4px 15px rgba(236, 64, 122, 0.15) !important;
}
/* All Bright (dark) — Form helpers and toggles */
:root.all-bright-mode:not(.light-mode) .form-text {
color: var(--ai-text-muted) !important;
}
:root.all-bright-mode:not(.light-mode) .form-check-input:checked {
background-color: #ec407a !important;
border-color: #ec407a !important;
}
/* ---- Persona modal currency pill (next to contact name) ---- */
.ai-badge-persona-currency {
display: inline-block;
font-size: 8px;
font-weight: 800;
padding: 1px 6px;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 0.4px;
background: linear-gradient(180deg, rgba(233, 30, 140, 0.22) 0%, rgba(233, 30, 140, 0.08) 100%);
color: var(--ai-chip-pink-text);
border: 1px solid rgba(233, 30, 140, 0.38);
}
.ai-badge-persona-primary {
background: rgba(128, 128, 128, 0.12);
color: var(--ai-text-muted);
border-color: var(--ai-border);
}
:root.light-mode .ai-badge-persona-currency {
background: linear-gradient(180deg, rgba(var(--ai-primary-rgb), 0.14) 0%, rgba(var(--ai-primary-rgb), 0.06) 100%);
color: #b91c6c;
border-color: rgba(var(--ai-primary-rgb), 0.3);
}
:root.light-mode .ai-badge-persona-primary {
background: rgba(100, 116, 139, 0.1);
color: var(--ai-text-muted);
border-color: var(--ai-border);
}
:root.all-bright-mode:not(.light-mode) .ai-badge-persona-currency {
background: linear-gradient(180deg, rgba(233, 30, 140, 0.3) 0%, rgba(233, 30, 140, 0.12) 100%);
color: #e8b4d0;
border-color: rgba(233, 30, 140, 0.48);
}
/* All Bright (dark) — badge-icon circles: lift white-alpha bg for lifted surfaces */
:root.all-bright-mode:not(.light-mode) .ai-badge-icon {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.22);
color: var(--ai-text-muted);
}
:root.all-bright-mode:not(.light-mode) .ai-badge-gray {
background: rgba(255, 255, 255, 0.14);
color: var(--ai-text-muted);
border-color: rgba(255, 255, 255, 0.22);
}
/* All Bright (dark) — header-submit button icon matches neutral badge-icon siblings */
:root.all-bright-mode:not(.light-mode) .ai-badge-icon.ai-header-submit i {
color: var(--ai-text-muted);
}
#wiki-form-container .tox-tinymce {
min-height: 332px;
}
/* Defensive backstop: if the editor's scroll happens to be owned by the
parent-document wrapper (.tox-edit-area) rather than the TinyMCE iframe's
own document, style it here too — the iframe-side fix lives in the
`content_style` built in assets/js/pages/Wiki/Wiki.js. */
.tox-edit-area,
.tox-edit-area__iframe {
scrollbar-width: thin;
scrollbar-color: var(--ai-scrollbar-thumb) transparent;
}
.tox-edit-area::-webkit-scrollbar,
.tox-edit-area__iframe::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.tox-edit-area::-webkit-scrollbar-track,
.tox-edit-area__iframe::-webkit-scrollbar-track {
background: transparent;
}
.tox-edit-area::-webkit-scrollbar-thumb,
.tox-edit-area__iframe::-webkit-scrollbar-thumb {
background: var(--ai-scrollbar-thumb);
border-radius: 4px;
}
.tox-edit-area::-webkit-scrollbar-thumb:hover,
.tox-edit-area__iframe::-webkit-scrollbar-thumb:hover {
background: var(--ai-scrollbar-hover);
}
/* =============================================================================
Premium Currency Badges (USD / EUR / SRD)
============================================================================= */
.ai-currency-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
border-radius: 50px;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.25s ease;
border: 1px solid transparent;
}
/* USD (Green Theme) — matched to the active/success emerald green (16,185,129) */
.ai-currency-badge.usd {
background: rgba(16, 185, 129, 0.22) !important;
color: #10b981 !important;
border-color: rgba(16, 185, 129, 0.4) !important;
}
:root.light-mode .ai-currency-badge.usd {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.26) 0%, rgba(16, 185, 129, 0.14) 100%) !important;
color: #047857 !important;
border-color: rgba(16, 185, 129, 0.42) !important;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
:root:not(.light-mode) .ai-currency-badge.usd {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.4) 0%, rgba(16, 185, 129, 0.18) 100%) !important;
color: #6ee7b7 !important;
border-color: rgba(16, 185, 129, 0.4) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* EUR (Amber/Gold Theme) */
.ai-currency-badge.eur {
background: rgba(245, 158, 11, 0.12) !important;
color: #b45309 !important;
border-color: rgba(245, 158, 11, 0.22) !important;
}
:root.light-mode .ai-currency-badge.eur {
background: linear-gradient(180deg, rgba(245, 158, 11, 0.14) 0%, rgba(245, 158, 11, 0.06) 100%) !important;
color: #9a3412 !important;
border-color: rgba(245, 158, 11, 0.3) !important;
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
:root:not(.light-mode) .ai-currency-badge.eur {
background: linear-gradient(180deg, rgba(251, 191, 36, 0.16) 0%, rgba(251, 191, 36, 0.05) 100%) !important;
color: #fbbf24 !important;
border-color: rgba(251, 191, 36, 0.32) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* SRD (Indigo Theme) */
.ai-currency-badge.srd {
background: rgba(99, 102, 241, 0.12) !important;
color: #4338ca !important;
border-color: rgba(99, 102, 241, 0.22) !important;
}
:root.light-mode .ai-currency-badge.srd {
background: linear-gradient(180deg, rgba(99, 102, 241, 0.14) 0%, rgba(99, 102, 241, 0.06) 100%) !important;
color: #3730a3 !important;
border-color: rgba(99, 102, 241, 0.3) !important;
box-shadow: 0 2px 4px rgba(99, 102, 241, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
:root:not(.light-mode) .ai-currency-badge.srd {
background: linear-gradient(180deg, rgba(129, 140, 248, 0.16) 0%, rgba(129, 140, 248, 0.05) 100%) !important;
color: #818cf8 !important;
border-color: rgba(129, 140, 248, 0.32) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* Pending Sync (Dashed Muted Gray Theme) */
.ai-currency-badge.pending {
background: transparent !important;
border: 1px dashed rgba(128, 128, 128, 0.3) !important;
}
:root.light-mode .ai-currency-badge.pending {
border-color: rgba(100, 116, 139, 0.35) !important;
color: #64748b !important;
}
:root:not(.light-mode) .ai-currency-badge.pending {
border-color: rgba(148, 163, 184, 0.3) !important;
color: #94a3b8 !important;
}
/* =============================================================================
Premium User Role Badges (Admin / Employee / Developer / Project Manager / etc.)
============================================================================= */
.ai-role-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
border-radius: 50px;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.25s ease;
border: 1px solid transparent;
line-height: normal;
}
/* Default / Fallback (Muted Gray Theme) */
.ai-role-badge {
background: rgba(148, 163, 184, 0.12) !important;
color: #475569 !important;
border-color: rgba(148, 163, 184, 0.2) !important;
}
:root:not(.light-mode) .ai-role-badge {
background: rgba(148, 163, 184, 0.16) !important;
color: #cbd5e1 !important;
border-color: rgba(148, 163, 184, 0.3) !important;
}
/* Admin (Pink / Magenta Chrome) */
.ai-role-badge.admin {
background: rgba(233, 30, 140, 0.1) !important;
color: #be185d !important;
border-color: rgba(233, 30, 140, 0.2) !important;
}
:root.light-mode .ai-role-badge.admin {
background: linear-gradient(180deg, rgba(233, 30, 140, 0.12) 0%, rgba(233, 30, 140, 0.04) 100%) !important;
color: #be185d !important;
border-color: rgba(233, 30, 140, 0.25) !important;
box-shadow: 0 2px 4px rgba(233, 30, 140, 0.05);
}
:root:not(.light-mode) .ai-role-badge.admin {
background: linear-gradient(180deg, rgba(233, 30, 140, 0.16) 0%, rgba(233, 30, 140, 0.06) 100%) !important;
color: #f9a8d4 !important;
border-color: rgba(233, 30, 140, 0.32) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* Employee / Developer / Support / Editor (Green Theme) */
.ai-role-badge.employee,
.ai-role-badge.developer,
.ai-role-badge.support {
background: rgba(16, 185, 129, 0.1) !important;
color: #047857 !important;
border-color: rgba(16, 185, 129, 0.2) !important;
}
:root.light-mode .ai-role-badge.employee,
:root.light-mode .ai-role-badge.developer,
:root.light-mode .ai-role-badge.support {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.04) 100%) !important;
color: #065f46 !important;
border-color: rgba(16, 185, 129, 0.25) !important;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.05);
}
:root:not(.light-mode) .ai-role-badge.employee,
:root:not(.light-mode) .ai-role-badge.developer,
:root:not(.light-mode) .ai-role-badge.support {
background: linear-gradient(180deg, rgba(52, 211, 153, 0.16) 0%, rgba(52, 211, 153, 0.06) 100%) !important;
color: #34d399 !important;
border-color: rgba(52, 211, 153, 0.32) !important;
}
/* Project Manager / Manager (Blue/Cyan Theme) */
.ai-role-badge.project-manager,
.ai-role-badge.manager {
background: rgba(59, 130, 246, 0.1) !important;
color: #1d4ed8 !important;
border-color: rgba(59, 130, 246, 0.2) !important;
}
:root.light-mode .ai-role-badge.project-manager,
:root.light-mode .ai-role-badge.manager {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.04) 100%) !important;
color: #1e40af !important;
border-color: rgba(59, 130, 246, 0.25) !important;
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.05);
}
:root:not(.light-mode) .ai-role-badge.project-manager,
:root:not(.light-mode) .ai-role-badge.manager {
background: linear-gradient(180deg, rgba(96, 165, 250, 0.16) 0%, rgba(96, 165, 250, 0.06) 100%) !important;
color: #60a5fa !important;
border-color: rgba(96, 165, 250, 0.32) !important;
}
/* Editor / Viewer (Purple/Violet Theme) */
.ai-role-badge.editor,
.ai-role-badge.viewer {
background: rgba(139, 92, 246, 0.1) !important;
color: #6d28d9 !important;
border-color: rgba(139, 92, 246, 0.2) !important;
}
:root.light-mode .ai-role-badge.editor,
:root.light-mode .ai-role-badge.viewer {
background: linear-gradient(180deg, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.04) 100%) !important;
color: #5b21b6 !important;
border-color: rgba(139, 92, 246, 0.25) !important;
box-shadow: 0 2px 4px rgba(139, 92, 246, 0.05);
}
:root:not(.light-mode) .ai-role-badge.editor,
:root:not(.light-mode) .ai-role-badge.viewer {
background: linear-gradient(180deg, rgba(167, 139, 250, 0.16) 0%, rgba(167, 139, 250, 0.06) 100%) !important;
color: #a78bfa !important;
border-color: rgba(167, 139, 250, 0.32) !important;
}
/* Same 3D bevel as .ai-badge — replaces the per-variant drop shadows above so
role pills (ADMIN, etc.) match the shadow-free 3D look in every mode. */
:root.light-mode .ai-role-badge {
box-shadow: var(--ai-badge-inset) !important;
}
:root:not(.light-mode) .ai-role-badge {
box-shadow: var(--ai-badge-inset-dark) !important;
}
/* Every role except admin renders as a neutral grey badge (overrides the
green/blue/purple variants above — same specificity, declared later). */
:root.light-mode .ai-role-badge:not(.admin) {
background: linear-gradient(180deg, rgba(148, 163, 184, 0.2) 0%, rgba(148, 163, 184, 0.08) 100%) !important;
color: #475569 !important;
border-color: rgba(148, 163, 184, 0.34) !important;
}
:root:not(.light-mode) .ai-role-badge:not(.admin) {
background: linear-gradient(180deg, rgba(148, 163, 184, 0.24) 0%, rgba(148, 163, 184, 0.09) 100%) !important;
color: #cbd5e1 !important;
border-color: rgba(148, 163, 184, 0.32) !important;
}
/* ---- Back to Top Button ---- */
.ai-back-to-top {
position: fixed;
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ai-pink-rail-gradient); /* Brand pink/magenta gradient bg */
color: #ffffff !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
cursor: pointer;
z-index: 1035;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
visibility: hidden;
transform: translateY(16px) scale(0.9);
border: none;
box-shadow: 0 4px 16px rgba(233, 30, 99, 0.35); /* Elegant pink glow shadow */
}
/* Perfectly center the chevron glyph (neutralises Bootstrap Icons' baseline offset) */
.ai-back-to-top i {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.ai-back-to-top i::before {
vertical-align: middle;
}
/* Light mode override for shadow visibility */
:root.light-mode .ai-back-to-top {
box-shadow: 0 4px 16px rgba(233, 30, 99, 0.28);
}
/* Hover lift and glow boost */
.ai-back-to-top:hover {
filter: brightness(1.08); /* Lift brightness slightly on hover */
transform: translateY(-4px) scale(1.05);
box-shadow: 0 8px 24px rgba(233, 30, 99, 0.5); /* Stronger pink glow on hover */
}
/* Active press effect */
.ai-back-to-top:active {
transform: translateY(-1px) scale(0.98);
box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3);
}
/* Show class with scale and fade transition */
.ai-back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Stacked pair: scroll-to-top sits on top, scroll-to-bottom below it. Both
inherit the back-to-top styling; only the resting offsets differ. */
.ai-back-to-top:not(.ai-back-to-bottom) {
bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
.ai-back-to-bottom {
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
/* Consistent add/edit form submit button: same fixed width across every form
(matching the Wiki form's button) and left-aligned. Shrinks on narrow screens. */
.ai-btn-form-submit {
width: 300px;
max-width: 100%;
}
/* ---- Password Generate Link ---- */
.ai-password-generate {
color: var(--ai-primary) !important;
text-decoration: none !important;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
transition: var(--ai-transition);
}
.ai-password-generate:hover {
filter: brightness(1.2);
text-decoration: underline !important;
}
|