/* Extracted from home/templates/base.html — the app-shell theme/layout stylesheet (CSS variables, themes, sidebar, topbar).
Loaded as a classic (non-defer) script/stylesheet at the same document
position the inline block occupied, so ordering is unchanged. */
/* ===============================================================
THEME SYSTEM - CSS VARIABLES
=============================================================== */
:root {
--app-rail-width: 74px;
--app-panel-width: 210px;
--sidebar-width: calc(var(--app-rail-width) + var(--app-panel-width));
--sidebar-collapsed-width: var(--app-rail-width);
--transition-speed: 0.3s;
--primary-color: #0ea5e9;
--primary-hover: #0284c7;
--primary-light: #e0f2fe;
--secondary-color: #06b6d4;
--accent-color: #38bdf8;
--accent-hover: #7dd3fc;
--sidebar-bg: #0f172a;
--sidebar-bg-hover: rgba(255, 255, 255, 0.08);
--sidebar-bg-active: rgba(14, 165, 233, 0.15);
--sidebar-text: rgba(255, 255, 255, 0.85);
--sidebar-text-muted: rgba(255, 255, 255, 0.5);
--sidebar-border: rgba(255, 255, 255, 0.1);
--sidebar-accent-bar: #0ea5e9;
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-tertiary: #f1f5f9;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
--border-color: #e2e8f0;
--success-color: #10b981;
--notice-color: #3b82f6;
--danger-color: #ef4444;
--info-color: #06b6d4;
--btn-primary-bg: #0ea5e9;
--btn-primary-hover: #0284c7;
--btn-primary-text: #ffffff;
--btn-secondary-bg: #f1f5f9;
--btn-secondary-hover: #e2e8f0;
--btn-secondary-text: #475569;
}
/* ===============================================================
GLOBAL STYLES USING THEME VARIABLES
=============================================================== */
body {
background-color: var(--bg-secondary);
color: var(--text-primary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
/* ===============================================================
GLOBAL MODAL THEMING
Every Bootstrap modal follows the active theme. Light themes are
visually unchanged (--bg-primary is #fff and --text-primary is
dark, i.e. Bootstrap's own defaults); dark themes (midnight /
carbon) get fixed instead of rendering a white box. Modals that
style their own .modal-content win via later cascade.
=============================================================== */
.modal {
--bs-modal-bg: var(--bg-primary, #ffffff);
--bs-modal-color: var(--text-primary, #0f172a);
--bs-modal-border-color: var(--border-color, #e2e8f0);
--bs-modal-header-border-color: var(--border-color, #e2e8f0);
--bs-modal-footer-border-color: var(--border-color, #e2e8f0);
}
.modal-backdrop:not([id]) {
--bs-backdrop-bg: var(--sidebar-bg);
--bs-backdrop-opacity: 0.68;
/* Keep the page sharp behind dialogs; no frosted backdrop. */
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.modal-content {
background-color: var(--bg-primary, #ffffff);
color: var(--text-primary, #0f172a);
border-color: var(--border-color, #e2e8f0);
}
.modal-header,
.modal-footer { border-color: var(--border-color, #e2e8f0); }
.modal-title { color: var(--text-primary, #0f172a); }
.brand-gradient {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 600;
letter-spacing: 0.5px;
}
/* ===============================================================
SIDEBAR STYLES
=============================================================== */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: var(--sidebar-width);
/* The sidebar owns its palette rather than reading the page one,
so the rail stays dark on a light content area. Declared as vars
(not literals) so every later rule reading a bare
var(--sidebar-text) resolves — including the "quiet workspace
rail" overrides further down this file. */
--sidebar-bg: #2c2c2c;
--sidebar-bg-hover: rgba(255, 255, 255, 0.08);
--sidebar-bg-active: rgba(255, 255, 255, 0.14);
--sidebar-text: rgba(255, 255, 255, 0.88);
--sidebar-text-muted: rgba(255, 255, 255, 0.52);
--sidebar-border: rgba(255, 255, 255, 0.10);
background-color: var(--sidebar-bg);
color: var(--sidebar-text);
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
z-index: 1000;
overflow: hidden;
transition: width var(--transition-speed) ease;
display: flex;
flex-direction: column;
}
.sidebar.collapsed {
width: var(--sidebar-collapsed-width);
}
.sidebar-header {
flex-shrink: 0;
padding: 0.85rem 0.75rem;
border-bottom: 1px solid var(--sidebar-border, rgba(255, 255, 255, 0.1));
display: flex;
align-items: center;
gap: 6px;
min-height: 60px;
}
.sidebar-brand {
color: var(--sidebar-text);
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.6rem;
overflow: hidden;
}
.sidebar-brand:hover {
color: #ffffff;
}
.brand-logo {
width: 32px;
height: 32px;
object-fit: contain;
border-radius: 6px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.sidebar-brand:hover .brand-logo {
transform: scale(1.05);
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 1rem 0;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.sidebar-nav::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.logo-text {
color: var(--sidebar-text);
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 700;
font-size: 24px;
letter-spacing: 0.03em;
margin: 0;
white-space: nowrap;
opacity: 1;
transition: opacity 0.2s ease, width 0.3s ease;
}
.sidebar.collapsed .logo-text {
opacity: 0;
width: 0;
}
.sidebar-toggle {
background: none;
border: none;
color: var(--sidebar-text-muted, rgba(255, 255, 255, 0.5));
cursor: pointer;
padding: 8px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.sidebar-toggle:hover {
color: #ffffff;
background-color: var(--sidebar-bg-hover, rgba(255, 255, 255, 0.08));
}
.sidebar-toggle i {
font-size: 20px;
}
.sidebar-header-actions {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
}
.sidebar-global-search-trigger {
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sidebar-text-muted);
background: transparent;
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease;
}
.sidebar-global-search-trigger:hover,
.sidebar-global-search-trigger[aria-expanded="true"] {
color: var(--sidebar-text);
background: var(--sidebar-bg-hover);
}
.sidebar-global-search-trigger:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.sidebar-global-search-trigger i {
font-size: 18px;
}
/* Sidebar Filter (menu search) */
.sidebar-search {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
margin: 8px 12px 4px;
padding: 6px 10px;
background: var(--sidebar-bg-hover, rgba(255,255,255,0.06));
border: 1px solid var(--sidebar-border, rgba(255,255,255,0.1));
border-radius: 6px;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sidebar-search:focus-within {
border-color: var(--sidebar-accent-bar, #0ea5e9);
}
/* Sits in the header row where the brand used to be. */
.sidebar-search--header {
flex: 1;
min-width: 0;
margin: 0;
}
.sidebar.collapsed .sidebar-search { display: none; }
.sidebar-nav-empty {
margin: 0.5rem 1rem;
font-size: 0.8rem;
color: var(--sidebar-text-muted, rgba(255, 255, 255, 0.5));
}
.sidebar.collapsed .sidebar-nav-empty { display: none; }
.sidebar-search > i {
color: var(--sidebar-text-muted, rgba(255,255,255,0.5));
font-size: 16px;
flex-shrink: 0;
}
.sidebar-search input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
color: var(--sidebar-text, rgba(255,255,255,0.85));
font-size: 13px;
padding: 0;
}
.sidebar-search input::placeholder {
color: var(--sidebar-text-muted, rgba(255,255,255,0.5));
}
/* Hide the native search-input clear "×"; we use the custom themed one. */
.sidebar-search input::-webkit-search-cancel-button,
.sidebar-search input::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.sidebar-search-clear {
display: none;
align-items: center;
justify-content: center;
border: none;
background: none;
color: var(--sidebar-text-muted, rgba(255,255,255,0.5));
cursor: pointer;
padding: 0;
line-height: 1;
}
.sidebar-search-clear.show { display: inline-flex; }
.sidebar-search-clear:hover { color: var(--sidebar-text, #fff); }
.sidebar-search-clear i { font-size: 16px; }
.sf-hidden {
display: none !important;
}
.sidebar-inline-results {
margin-bottom: 0.5rem;
}
.sidebar-inline-results[hidden] {
display: none;
}
.sidebar-inline-command {
width: 100%;
border: 0;
background: transparent;
text-align: left;
font: inherit;
cursor: pointer;
}
.sidebar-inline-context {
margin-left: auto;
color: var(--sidebar-text-muted);
font-size: 10px;
font-weight: 400;
white-space: nowrap;
}
.sidebar-search-action {
padding-left: 2.1rem !important;
color: var(--sidebar-text-muted) !important;
font-size: 12.5px !important;
}
.sidebar-search-action:hover,
.sidebar-search-action:focus-visible,
.sidebar .nav-link.sf-keyboard-active {
color: var(--sidebar-text) !important;
background: var(--sidebar-bg-hover);
}
.sidebar-search-status {
min-height: 32px;
padding: 0.45rem 0.5rem 0.45rem 2.1rem;
color: var(--sidebar-text-muted);
font-size: 12px;
}
/* Nav Group Styles */
.nav-group {
margin-bottom: 0.25rem;
}
.nav-group-label {
padding: 0.3rem 1rem;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sidebar-text-muted, rgba(255, 255, 255, 0.5));
margin-top: 0.15rem;
white-space: nowrap;
overflow: hidden;
transition: opacity 0.2s ease, color 0.2s ease;
display: flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
user-select: none;
}
.nav-group-label:hover {
color: var(--sidebar-text, #ffffff);
}
.nav-group-label--split {
justify-content: space-between;
padding-right: 0.5rem;
}
.nav-group-label-title {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
}
.nav-group-action {
appearance: none;
border: 0;
background: transparent;
color: var(--sidebar-text, rgba(255, 255, 255, 0.88));
cursor: pointer;
font: inherit;
font-size: 0.85rem;
font-weight: 500;
margin: 0 10px;
padding: 0;
white-space: nowrap;
}
.nav-group-label > .group-toggle-arrow {
font-size: 1rem;
line-height: 1;
transition: transform 0.2s ease;
flex-shrink: 0;
opacity: 0.75;
}
.nav-group.collapsed > .nav-group-label .group-toggle-arrow {
transform: rotate(-90deg);
}
.nav-group.collapsed > *:not(.nav-group-label) {
display: none !important;
}
.sidebar.collapsed .nav-group-label {
opacity: 0;
pointer-events: none;
}
/* Nav Item Styles */
.sidebar .nav-link {
color: var(--sidebar-text, rgba(255, 255, 255, 0.88));
font-weight: 500;
padding: 0.6rem 1rem;
border-radius: 4px;
transition: all 0.2s ease;
margin: 2px 0.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
}
.sidebar .nav-link:hover {
color: #ffffff;
background-color: var(--sidebar-bg-hover, rgba(255, 255, 255, 0.08));
}
/* Sign out posts a form; its button has to sit like the links do. */
.sidebar button.nav-link {
width: calc(100% - 1rem);
background: none;
border: 0;
font: inherit;
font-weight: 500;
text-align: left;
cursor: pointer;
}
/* .nav-link sets display:flex, which outranks the UA [hidden] rule —
without this the nav filter would hide nothing. */
.sidebar .nav-link[hidden],
.sidebar .nav-group[hidden],
.sidebar .sidebar-nav-empty[hidden] { display: none !important; }
.sidebar .nav-link-deprecated { opacity: 0.55; }
/* Marks a dashboard only admins are served. Pushed to the trailing
edge and dimmed: it is a note about the row, not part of its name. */
.sidebar .nav-link-flag {
margin-left: auto;
font-size: 0.95rem;
opacity: 0.45;
}
.sidebar .nav-link:hover .nav-link-flag { opacity: 0.75; }
.sidebar .nav-link-deprecated span { text-decoration: line-through; }
.sidebar .nav-link.active {
color: #ffffff;
background-color: var(--sidebar-bg-active, rgba(255, 255, 255, 0.14));
position: relative;
}
.sidebar .nav-link.active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background-color: var(--sidebar-accent-bar, #6366f1);
border-radius: 0 2px 2px 0;
}
.sidebar .nav-link i,
.sidebar .nav-link svg {
font-size: 1.1rem;
width: 20px;
flex-shrink: 0;
}
/* Per-section sidebar icon colors when item colors are on — sourced
from the --ent-* system (home/brand_colors.py). */
.sidebar.item-colors-on .nav-link[data-model="companies"] i { color: var(--ent-company); }
.sidebar.item-colors-on .nav-link[data-model="candidates"] i { color: var(--ent-candidate); }
.sidebar.item-colors-on .nav-link[data-model="contacts"] i { color: var(--ent-contact); }
.sidebar.item-colors-on .nav-link[data-model="suppliers"] i { color: var(--ent-supplier); }
.sidebar.item-colors-on .nav-link[data-model="jobs"] i { color: var(--ent-job); }
.sidebar.item-colors-on .nav-link[data-model="deals"] i { color: var(--ent-deal); }
.sidebar.item-colors-on .nav-link[data-model="projects"] i { color: var(--ent-project); }
.sidebar.item-colors-on .nav-link[data-model="hr"] i { color: var(--ent-employee); }
.sidebar.item-colors-on .nav-link[data-model="assets"] i { color: var(--ent-asset); }
.sidebar.item-colors-on .nav-link[data-model="sales"] i { color: var(--ent-sales); }
.sidebar.item-colors-on .nav-link[data-model="prospects"] i { color: var(--ent-prospect); }
.sidebar.item-colors-on .nav-link[data-model="mailbox"] i { color: var(--ent-mailbox); }
.sidebar.item-colors-on .nav-link[data-model="cvbuilder"] i { color: var(--ent-cvbuilder); }
/* Remaining sections — workspace / HR / finance / reports. */
.sidebar.item-colors-on .nav-link[data-model="myspace"] i { color: var(--ent-myspace); }
.sidebar.item-colors-on .nav-link[data-model="orgchart"] i { color: var(--ent-orgchart); }
.sidebar.item-colors-on .nav-link[data-model="pto"] i { color: var(--ent-pto); }
.sidebar.item-colors-on .nav-link[data-model="costcenters"] i { color: var(--ent-costcenters); }
.sidebar.item-colors-on .nav-link[data-model="racunoid"] i { color: var(--ent-racunoid); }
.sidebar.item-colors-on .nav-link[data-model="reporting"] i { color: var(--ent-reporting); }
.sidebar.item-colors-on .nav-link[data-model="rsr"] i { color: var(--ent-rsr); }
.sidebar.item-colors-on .nav-link[data-model="timetracker"] i { color: var(--ent-timetracker); }
/* SVG icon for Time Tracker (if rendered as svg) - colored when toggled on */
.sidebar .nav-link[data-model="timetracker"] svg { stroke: var(--sidebar-text); transition: stroke 0.2s; }
.sidebar.item-colors-on .nav-link[data-model="timetracker"] svg { stroke: var(--ent-timetracker); }
/* Sidebar - Favorites submenu */
/* Outer clickable link - no border, handles indentation */
.fav-proj-item {
display: block;
padding: 3px 0.5rem 3px 1rem;
text-decoration: none;
color: var(--sidebar-text);
transition: background-color 0.15s;
}
.fav-proj-item:hover {
text-decoration: none;
color: var(--sidebar-text);
}
/* Inner box - this is what has the even border and the star */
.fav-border-box {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 5px;
border: 1.5px solid rgba(59, 130, 246, 0.55);
transition: border-color 0.15s, background-color 0.15s;
overflow: visible;
}
.fav-proj-item:hover .fav-border-box {
border-color: #3b82f6;
background-color: var(--sidebar-bg-hover);
}
.fav-proj-star {
position: absolute;
top: -4px;
left: -5px;
width: 11px;
height: 11px;
background: #3b82f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 7px;
line-height: 1;
color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
z-index: 2;
}
.fav-proj-icon {
width: 18px;
height: 18px;
border-radius: 4px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
}
.fav-proj-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.875rem;
}
.fav-empty-msg {
padding: 0.45rem 1rem 0.45rem 2.25rem;
font-size: 0.8rem;
color: var(--sidebar-text-muted);
font-style: italic;
}
#sidebarFavoritesList {
padding-top: 8px;
padding-bottom: 0px;
}
/* Hide corner-star dot inside sidebar favorites — intended for larger views */
#sidebarFavoritesList .fav-proj-star {
display: none !important;
}
.sidebar.collapsed #sidebarFavoritesGroup {
display: none !important;
}
/* Toggle switch for preferences */
.pref-toggle-group {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
}
.pref-toggle-label {
font-size: 12px;
font-weight: 500;
color: var(--sidebar-text);
}
.pref-toggle-desc {
font-size: 10px;
color: var(--sidebar-text-muted);
margin-top: 2px;
}
.pref-toggle {
position: relative;
width: 36px;
height: 20px;
flex-shrink: 0;
}
.pref-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.pref-toggle .toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
transition: 0.2s;
}
.pref-toggle .toggle-slider::before {
content: '';
position: absolute;
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
transition: 0.2s;
}
.pref-toggle input:checked + .toggle-slider {
background: var(--primary-color, #0ea5e9);
}
.pref-toggle input:checked + .toggle-slider::before {
transform: translateX(16px);
}
.sidebar .nav-link span {
opacity: 1;
transition: opacity 0.2s ease;
}
.sidebar.collapsed .nav-link span {
opacity: 0;
}
/* Kanban quick-link */
.kanban-pill {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 6px;
font-size: 0.58rem;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--sidebar-text-muted);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: rgba(255,255,255,0.2);
white-space: nowrap;
flex-shrink: 0;
transition: color 0.15s ease, text-decoration-color 0.15s ease, opacity 0.2s ease;
opacity: 1;
}
.kanban-pill:hover {
color: var(--accent-color);
text-decoration-color: var(--accent-color);
}
.kanban-pill i {
font-size: 0.65rem;
width: auto !important;
flex-shrink: 0;
}
/* Hide when sidebar is collapsed */
.sidebar.collapsed .kanban-pill {
opacity: 0;
pointer-events: none;
}
.soon-pill {
display: inline-flex;
align-items: center;
margin-left: auto;
padding: 1px 6px;
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sidebar-text-muted, rgba(255,255,255,0.5));
background: var(--sidebar-bg-hover, rgba(255,255,255,0.08));
border-radius: 8px;
white-space: nowrap;
flex-shrink: 0;
opacity: 1;
transition: opacity 0.2s ease;
}
.sidebar.collapsed .soon-pill { opacity: 0; pointer-events: none; }
.sidebar .nav-link.is-soon { opacity: 0.55; cursor: not-allowed; }
.sidebar .nav-link.is-soon:hover { background: transparent; }
/* Submenu Styles */
.nav-item-with-submenu > .nav-link {
justify-content: space-between;
}
.nav-item-with-submenu > .nav-link .submenu-arrow {
transition: transform 0.2s ease, opacity 0.2s ease;
margin-left: auto;
flex-shrink: 0;
}
.nav-item-with-submenu.open > .nav-link .submenu-arrow {
transform: rotate(180deg);
}
.sidebar.collapsed .submenu-arrow {
opacity: 0;
}
.submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 4px;
margin: 0 0.5rem;
}
.nav-item-with-submenu.open .submenu {
max-height: 500px;
}
#sidebarFavoritesList {
padding-top: 8px;
padding-bottom: 0px;
}
.sidebar.collapsed .submenu {
max-height: 0 !important;
}
.submenu .nav-link {
padding: 0.5rem 1rem 0.5rem 2.5rem;
font-size: 0.9rem;
margin: 0;
border-radius: 0;
}
.submenu .nav-link:first-child {
border-radius: 4px 4px 0 0;
}
.submenu .nav-link:last-child {
border-radius: 0 0 4px 4px;
}
/* Sidebar Footer - compact */
.sidebar-footer {
flex-shrink: 0;
padding: 0.4rem 0.5rem;
border-top: 1px solid var(--sidebar-border, rgba(255, 255, 255, 0.1));
background-color: var(--sidebar-bg, #0b0d10);
display: flex;
flex-direction: column;
gap: 1px;
}
.footer-link {
color: var(--sidebar-text, rgba(255, 255, 255, 0.88));
font-weight: 500;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.38rem 0.65rem;
border-radius: 4px;
transition: all 0.2s ease;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
position: relative;
cursor: pointer;
font-size: 0.85rem;
}
.footer-link:hover {
color: #ffffff;
background-color: var(--sidebar-bg-hover);
}
.footer-link.active {
color: var(--primary-color);
background-color: var(--sidebar-bg-active);
}
.footer-link i {
flex-shrink: 0;
font-size: 1rem;
width: 18px;
}
.footer-link span {
opacity: 1;
transition: opacity 0.2s ease;
font-size: 0.85rem;
}
.sidebar-activities-label {
padding: 0.42rem 0.65rem 0.2rem;
color: var(--sidebar-text-muted);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
}
.sidebar-footer-divider {
height: 1px;
margin: 0.3rem 0.65rem;
background: var(--sidebar-border, rgba(255, 255, 255, 0.1));
}
.footer-link .sidebar-action-badge {
min-width: 18px;
height: 18px;
margin-left: auto;
padding: 0 5px;
border-radius: 999px;
background: var(--danger-color);
color: var(--sidebar-text);
font-size: 0.65rem;
font-weight: 700;
line-height: 1;
display: none;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
}
.footer-link .sidebar-action-badge.visible { display: inline-flex; }
.footer-link .sidebar-action-badge[hidden] { display: none; }
.footer-link.sidebar-action-pulse i {
animation: sidebarActionPulse 280ms ease-out;
}
@keyframes sidebarActionPulse {
50% { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
.footer-link.sidebar-action-pulse i { animation: none; }
}
.sidebar.collapsed .footer-link span {
opacity: 0;
}
.sidebar.collapsed .sidebar-activities-label { display: none; }
.sidebar.collapsed .footer-link .sidebar-action-badge {
position: absolute;
top: 2px;
right: 4px;
margin: 0;
opacity: 1;
}
.sidebar.collapsed .footer-link {
position: relative;
}
.sidebar.collapsed .footer-link:hover::after {
content: attr(data-title);
position: absolute;
left: calc(var(--sidebar-collapsed-width) - 8px);
top: 50%;
transform: translateY(-50%);
background-color: var(--sidebar-bg);
color: #fff;
padding: 6px 12px;
border-radius: 4px;
font-size: 0.85rem;
white-space: nowrap;
z-index: 1060;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Main Content Area */
.main-content {
margin-left: var(--sidebar-width);
min-height: 100vh;
transition: margin-left var(--transition-speed) ease;
background-color: var(--bg-secondary);
}
.main-content.expanded {
margin-left: var(--sidebar-collapsed-width);
}
/* Tooltip for collapsed state */
.sidebar.collapsed .nav-link {
position: relative;
}
.sidebar.collapsed .nav-link:hover::after {
content: attr(data-title);
position: absolute;
left: calc(var(--sidebar-collapsed-width) - 8px);
top: 50%;
transform: translateY(-50%);
background-color: var(--sidebar-bg);
color: #fff;
padding: 6px 12px;
border-radius: 4px;
font-size: 0.85rem;
white-space: nowrap;
z-index: 1001;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Activity Badge */
.activity-badge {
position: absolute;
top: 4px;
left: 28px;
background: var(--danger-color);
color: white;
font-size: 0.6rem;
font-weight: 600;
min-width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--sidebar-bg);
}
.sidebar.collapsed .activity-badge {
left: 24px;
top: 2px;
}
.activity-badge.hidden {
display: none;
}
.pto-sidebar-badge {
margin-left: auto;
background: #dc2626;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 999px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.sidebar.collapsed .pto-sidebar-badge {
position: absolute;
top: 2px;
right: 6px;
margin: 0;
}
.pto-sidebar-badge.hidden {
display: none;
}
/* ===============================================================
PREFERENCES POPUP STYLES
=============================================================== */
.preferences-popup {
position: fixed;
bottom: 12px;
left: var(--sidebar-width);
width: 320px;
max-height: 70vh;
background: var(--sidebar-bg);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
z-index: 1050;
display: none;
flex-direction: column;
overflow: hidden;
margin-left: 12px;
border: 1px solid var(--sidebar-border);
}
.sidebar.collapsed ~ .preferences-popup {
left: var(--sidebar-collapsed-width);
}
.preferences-popup.show {
display: flex;
animation: popupSlideIn 0.2s ease;
}
@keyframes popupSlideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.preferences-popup-header {
padding: 14px 16px;
border-bottom: 1px solid var(--sidebar-border);
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.preferences-popup-header h6 {
margin: 0;
font-weight: 600;
color: var(--sidebar-text);
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.preferences-popup-header .close-btn {
background: none;
border: none;
color: var(--sidebar-text-muted);
cursor: pointer;
padding: 4px;
line-height: 1;
border-radius: 4px;
transition: all 0.2s;
}
.preferences-popup-header .close-btn:hover {
color: var(--sidebar-text);
background: var(--sidebar-bg-hover);
}
.preferences-popup-content {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.pref-section {
margin-bottom: 20px;
}
.pref-section-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--sidebar-text-muted);
margin-bottom: 10px;
}
/* Detail Page Layout — one segmented Attio/HR control per model. */
.dv-list {
display: flex;
flex-direction: column;
gap: 7px;
}
.dv-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.dv-name {
font-size: 12px;
font-weight: 500;
color: var(--sidebar-text);
}
.dv-seg {
display: inline-flex;
gap: 2px;
padding: 2px;
border-radius: 7px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--sidebar-border);
}
.dv-seg-btn {
border: none;
background: transparent;
color: var(--sidebar-text-muted);
font-size: 11px;
font-weight: 600;
padding: 4px 13px;
border-radius: 5px;
cursor: pointer;
transition: all 0.15s ease;
}
.dv-seg-btn:hover {
color: var(--sidebar-text);
}
.dv-seg-btn.active {
background: var(--primary-color, #0ea5e9);
color: #fff;
}
/* Theme Selector Grid */
.theme-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.theme-option {
padding: 10px 12px;
border: 2px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
gap: 10px;
}
.theme-option:hover {
background: rgba(255, 255, 255, 0.1);
}
.theme-option.active {
border-color: var(--primary-color);
background: rgba(255, 255, 255, 0.1);
}
.theme-swatch {
width: 24px;
height: 24px;
border-radius: 6px;
flex-shrink: 0;
}
.theme-swatch.ocean { background: linear-gradient(135deg, #0ea5e9, #0f172a); }
.theme-swatch.forest { background: linear-gradient(135deg, #10b981, #064e3b); }
.theme-swatch.sunset { background: linear-gradient(135deg, #f97316, #7c2d12); }
.theme-swatch.slate { background: linear-gradient(135deg, #6366f1, #1e293b); }
.theme-swatch.midnight { background: linear-gradient(135deg, #8b5cf6, #0c0a1d); }
.theme-swatch.carbon { background: linear-gradient(135deg, #14b8a6, #0a0a0c); }
.theme-name {
font-size: 12px;
font-weight: 500;
color: var(--sidebar-text);
}
.theme-option.active .theme-name {
color: var(--primary-color);
}
/* Preference Select */
.pref-select-group {
margin-bottom: 12px;
}
.pref-select-label {
font-size: 12px;
font-weight: 500;
color: var(--sidebar-text);
margin-bottom: 6px;
display: block;
}
.pref-select {
width: 100%;
padding: 8px 12px;
border-radius: 6px;
border: 1px solid var(--sidebar-border);
background: rgba(255, 255, 255, 0.05);
color: var(--sidebar-text);
font-size: 13px;
cursor: pointer;
transition: all 0.15s ease;
}
.pref-select:hover {
background: rgba(255, 255, 255, 0.08);
}
.pref-select:focus {
outline: none;
border-color: var(--primary-color);
}
.pref-select option {
background: var(--sidebar-bg);
color: var(--sidebar-text);
}
/* Disabled Options */
.pref-disabled-option {
padding: 10px 12px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
opacity: 0.5;
cursor: not-allowed;
}
.pref-disabled-option .option-text {
font-size: 12px;
color: var(--sidebar-text-muted);
}
.pref-disabled-option .coming-soon-badge {
font-size: 9px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
color: var(--sidebar-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.preferences-popup::before {
content: '';
position: absolute;
bottom: 60px;
left: -8px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid var(--sidebar-bg);
}
/* ===============================================================
ACTIVITY POPUP STYLES (Using Theme Variables)
=============================================================== */
.activity-popup {
position: fixed;
bottom: 12px;
left: var(--sidebar-width);
width: 400px;
max-height: 65vh;
background: var(--sidebar-bg);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
z-index: 1050;
display: none;
flex-direction: column;
overflow: hidden;
margin-left: 12px;
border: 1px solid var(--sidebar-border);
}
.sidebar.collapsed ~ .activity-popup {
left: var(--sidebar-collapsed-width);
}
.activity-popup.show {
display: flex;
animation: popupSlideIn 0.2s ease;
}
.activity-popup-header {
padding: 14px 16px;
border-bottom: 1px solid var(--sidebar-border);
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.activity-popup-header h6 {
margin: 0;
font-weight: 600;
color: var(--sidebar-text);
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.activity-popup-header .close-btn {
background: none;
border: none;
color: var(--sidebar-text-muted);
cursor: pointer;
padding: 4px;
line-height: 1;
border-radius: 4px;
transition: all 0.2s;
}
.activity-popup-header .close-btn:hover {
color: var(--sidebar-text);
background: var(--sidebar-bg-hover);
}
/* ── Header actions row (info + close) ── */
.activity-header-actions {
display: flex;
align-items: center;
gap: 4px;
}
.notif-info-wrapper {
position: relative;
}
.notif-info-btn {
background: none;
border: none;
color: var(--sidebar-text-muted);
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
display: flex;
align-items: center;
transition: all 0.2s;
font-size: 15px;
line-height: 1;
}
.notif-info-btn:hover,
.notif-info-wrapper:hover .notif-info-btn {
color: var(--primary-color);
background: rgba(255,255,255,0.07);
}
.notif-info-bubble {
display: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 295px;
background: var(--sidebar-bg, #0f172a);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 14px;
box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.25);
z-index: 200;
animation: infoBubblePop 0.18s cubic-bezier(.22,.68,0,1.2);
}
@keyframes infoBubblePop {
from { opacity: 0; transform: translateY(-6px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-info-bubble::before {
content: '';
position: absolute;
top: -6px;
right: 14px;
width: 10px;
height: 10px;
background: var(--sidebar-bg, #0f172a);
border-left: 1px solid rgba(255,255,255,0.1);
border-top: 1px solid rgba(255,255,255,0.1);
transform: rotate(45deg);
}
.notif-info-wrapper:hover .notif-info-bubble {
display: block;
}
.notif-info-title {
font-size: 11px;
font-weight: 700;
color: var(--sidebar-text);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.notif-info-title i { color: var(--primary-color); font-size: 14px; }
.notif-info-list {
list-style: none;
padding: 0;
margin: 0 0 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.notif-info-list li {
font-size: 11px;
color: var(--sidebar-text-muted);
line-height: 1.5;
display: flex;
flex-direction: column;
gap: 3px;
}
.notif-info-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 8px 2px 6px;
border-radius: 20px;
width: fit-content;
margin-bottom: 2px;
}
.notif-info-chip i { font-size: 11px; }
.notif-info-chip.mentions { background: rgba(14,165,233,0.15); color: #38bdf8; }
.notif-info-chip.tasks { background: rgba(59, 130, 246,0.15); color: #60a5fa; }
.notif-info-chip.following { background: rgba(14,165,233,0.12); color: #60a5fa; }
.notif-info-chip.my-records { background: rgba(16,185,129,0.15); color: #34d399; }
.notif-info-chip.ownership { background: rgba(59, 130, 246,0.15); color: #3b82f6; }
.notif-info-tip {
font-size: 10.5px;
color: var(--sidebar-text-muted);
border-top: 1px solid rgba(255,255,255,0.07);
padding-top: 8px;
display: flex;
gap: 5px;
align-items: flex-start;
line-height: 1.5;
}
.notif-info-tip i { font-size: 13px; color: var(--notice-color, #3b82f6); flex-shrink: 0; margin-top: 1px; }
/* ── Date group headers ── */
.activity-date-header {
padding: 5px 16px 4px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sidebar-text-muted);
background: rgba(0, 0, 0, 0.18);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
position: sticky;
top: 0;
z-index: 2;
}
/* ── Undo-delete ── */
.activity-item.deleting {
pointer-events: none;
}
.activity-item.deleting .activity-undo-bar {
pointer-events: auto;
}
.activity-undo-bar {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px 0 16px;
background: rgba(10, 10, 20, 0.82);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
gap: 10px;
animation: undoSlideIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
border-radius: inherit;
}
@keyframes undoSlideIn {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: scale(1); }
}
.activity-undo-bar span {
display: flex;
align-items: center;
gap: 7px;
color: rgba(255,255,255,0.38);
font-weight: 400;
font-size: 11.5px;
letter-spacing: 0.01em;
}
.activity-undo-bar span i {
font-size: 13px;
color: rgba(255,255,255,0.22);
}
.activity-undo-bar button {
flex-shrink: 0;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.13);
color: rgba(255,255,255,0.75);
font-size: 10px;
font-weight: 600;
padding: 5px 14px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.activity-undo-bar button:hover {
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.32);
color: #fff;
box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.activity-popup-actions {
padding: 10px 16px;
border-bottom: 1px solid var(--sidebar-border);
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-shrink: 0;
gap: 8px;
}
.activity-popup-actions .filter-tabs {
display: flex;
gap: 4px;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.activity-popup-actions .filter-tab {
padding: 4px 10px;
font-size: 11px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
color: var(--sidebar-text-muted);
cursor: pointer;
transition: all 0.2s;
border: none;
display: flex;
align-items: center;
gap: 4px;
}
.activity-popup-actions .filter-tab.active,
.activity-popup-actions .filter-tab:hover {
background: var(--primary-color);
color: white;
}
.activity-popup-actions .filter-tab .tab-badge {
background: rgba(255, 255, 255, 0.3);
color: white;
font-size: 9px;
font-weight: 600;
padding: 1px 5px;
border-radius: 8px;
min-width: 16px;
text-align: center;
}
.activity-popup-actions .mark-all-read {
font-size: 11px;
color: var(--primary-color);
cursor: pointer;
text-decoration: none;
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
}
.activity-popup-actions .mark-all-read:hover {
text-decoration: underline;
}
/* Push notification toggle row */
.activity-push-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 16px;
border-bottom: 1px solid var(--sidebar-border);
flex-shrink: 0;
}
.activity-push-toggle-label {
font-size: 12px;
color: var(--sidebar-text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.activity-push-toggle-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
flex-shrink: 0;
}
.activity-push-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.activity-push-slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255,255,255,0.15);
border-radius: 20px;
transition: background 0.2s;
}
.activity-push-slider::before {
content: '';
position: absolute;
width: 14px;
height: 14px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
transition: transform 0.2s;
}
.activity-push-toggle-switch input:checked + .activity-push-slider {
background: var(--primary-color);
}
.activity-push-toggle-switch input:checked + .activity-push-slider::before {
transform: translateX(16px);
}
.activity-push-toggle-switch input:disabled + .activity-push-slider {
opacity: 0.45;
cursor: not-allowed;
}
.push-denied-msg {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 16px 8px;
font-size: 11px;
color: #3b82f6;
flex-shrink: 0;
}
.push-denied-msg a {
color: var(--primary-color);
text-decoration: none;
}
.push-denied-msg a:hover {
text-decoration: underline;
}
.activity-list {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.activity-item {
padding: 12px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
cursor: pointer;
transition: background-color 0.15s ease;
display: flex;
align-items: flex-start;
gap: 10px;
position: relative;
}
.activity-item:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.activity-item.unread {
background-color: rgba(var(--primary-color), 0.1);
}
.activity-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.activity-icon i {
color: white;
font-size: 14px;
}
.activity-icon.reminder {
background: var(--notice-color);
}
.activity-icon.overdue {
background: var(--danger-color);
}
.activity-content {
flex-grow: 1;
min-width: 0;
}
.activity-message {
font-size: 12px;
color: var(--sidebar-text);
line-height: 1.4;
margin-bottom: 4px;
}
.activity-message strong {
color: var(--primary-color);
}
.activity-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.activity-time {
font-size: 11px;
color: var(--sidebar-text-muted);
font-weight: 500;
}
.activity-unread-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary-color);
flex-shrink: 0;
margin-top: 4px;
}
.activity-delete-btn {
background: none;
border: none;
color: var(--sidebar-text-muted);
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: all 0.2s;
flex-shrink: 0;
opacity: 0.5;
}
.activity-item:hover .activity-delete-btn {
opacity: 1;
}
.activity-delete-btn:hover {
color: var(--danger-color);
background: rgba(239, 68, 68, 0.15);
}
.activity-icon.collab-request {
background: #8b5cf6;
}
.activity-icon.following {
background: #0ea5e9;
}
.activity-icon.ownership {
background: #3b82f6;
}
.activity-icon.my-records {
background: #10b981;
}
/* ── Model tag styles ── */
.activity-model-tag {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
font-weight: 600;
padding: 1px 7px;
border-radius: 20px;
letter-spacing: 0.03em;
}
.activity-model-tag.tag-candidate { background: rgba(2,132,199,0.18); color: #38bdf8; }
.activity-model-tag.tag-company { background: rgba(225,29,72,0.18); color: #fb7185; }
.activity-model-tag.tag-job { background: rgba(37, 99, 235,0.18); color: #60a5fa; }
.activity-model-tag.tag-deal { background: rgba(79,70,229,0.18); color: #818cf8; }
.activity-model-tag.tag-contact { background: rgba(5,150,105,0.18); color: #34d399; }
.activity-model-tag.tag-supplier { background: rgba(124,58,237,0.18); color: #a78bfa; }
.activity-model-tag.tag-default { background: rgba(255,255,255,0.08); color: var(--sidebar-text-muted); }
/* ── Time display ── */
.activity-time-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.activity-time-relative {
font-size: 11px;
color: var(--sidebar-text-muted);
font-weight: 500;
}
.activity-time-absolute {
font-size: 10px;
color: var(--sidebar-text-muted);
opacity: 0.65;
}
.activity-time-sep {
font-size: 10px;
color: var(--sidebar-text-muted);
opacity: 0.35;
}
.activity-join-btn {
display: inline-block;
margin-top: 6px;
padding: 3px 12px;
font-size: 11px;
font-weight: 600;
border: none;
border-radius: 5px;
background: var(--primary-color, #3b82f6);
color: #fff;
cursor: pointer;
transition: all 0.15s;
}
.activity-join-btn:hover:not(:disabled) {
filter: brightness(1.15);
}
.activity-join-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.activity-join-btn.joined {
background: var(--success-color, #10b981);
opacity: 1;
}
.activity-content.no-click {
cursor: default;
}
.activity-assigned-list {
margin: 6px 0 8px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 3px;
}
.activity-assigned-list li {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--sidebar-text-secondary, var(--text-secondary));
padding: 3px 6px;
border-radius: 4px;
background: var(--sidebar-item-hover, rgba(0,0,0,0.04));
}
.activity-assigned-id {
font-size: 10px;
font-weight: 600;
color: var(--sidebar-text-muted);
min-width: 28px;
}
.activity-open-records-btn {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 4px;
padding: 5px 10px;
font-size: 11.5px;
font-weight: 500;
color: var(--primary-color, #4f46e5);
background: transparent;
border: 1px solid var(--primary-color, #4f46e5);
border-radius: 5px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.activity-open-records-btn:hover {
background: var(--primary-color, #4f46e5);
color: #fff;
}
.activity-open-records-btn i {
font-size: 13px;
}
.activity-empty {
padding: 40px 20px;
text-align: center;
color: var(--sidebar-text-muted);
}
.activity-empty i {
font-size: 40px;
margin-bottom: 10px;
opacity: 0.5;
}
.activity-loading {
padding: 30px;
text-align: center;
}
.activity-loading .spinner-border {
width: 24px;
height: 24px;
color: var(--primary-color);
}
.activity-popup::before {
content: '';
position: absolute;
bottom: 20px;
left: -8px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid var(--sidebar-bg);
}
/* ===============================================================
GLOBAL BUTTON STYLES (Using Theme Variables)
=============================================================== */
.btn-primary, .btn-theme-primary {
background-color: var(--btn-primary-bg) !important;
border-color: var(--btn-primary-bg) !important;
color: var(--btn-primary-text) !important;
}
.btn-primary:hover, .btn-theme-primary:hover {
background-color: var(--btn-primary-hover) !important;
border-color: var(--btn-primary-hover) !important;
}
.btn-secondary, .btn-theme-secondary {
background-color: var(--btn-secondary-bg) !important;
border-color: var(--border-color) !important;
color: var(--btn-secondary-text) !important;
}
.btn-secondary:hover, .btn-theme-secondary:hover {
background-color: var(--btn-secondary-hover) !important;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.activity-popup,
.preferences-popup {
left: 10px;
right: 10px;
width: auto;
bottom: 80px;
margin-left: 0;
}
.activity-popup::before,
.preferences-popup::before {
display: none;
}
}
/* ===============================================================
RESPONSIVE - Small laptops / tablets (769px - 1199px)
Auto-collapse sidebar to save space on smaller screens
=============================================================== */
@media (max-width: 1199px) and (min-width: 769px) {
:root {
--sidebar-width: 220px;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
:root {
--sidebar-width: 200px;
}
.sidebar .nav-link {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
.nav-group-label {
font-size: 0.65rem;
padding: 0.4rem 0.75rem;
}
.logo-text {
font-size: 16px;
}
.sidebar-header {
padding: 1rem 0.75rem;
min-height: 60px;
}
.footer-link {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
}
/* ===============================================================
MOBILE RESPONSIVE - everything below only fires on mobile
Desktop is completely untouched.
=============================================================== */
/* Hamburger button - hidden on desktop */
.mobile-hamburger {
display: none;
}
/* Mobile overlay backdrop - hidden on desktop */
.sidebar-overlay {
display: none;
}
@media (max-width: 768px) {
/* Hamburger menu button */
.mobile-hamburger {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 12px;
left: 12px;
z-index: 1100;
width: 40px;
height: 40px;
border-radius: 8px;
border: 1px solid var(--border-color);
background: var(--bg-primary);
color: var(--text-primary);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
cursor: pointer;
font-size: 20px;
padding: 0;
}
.mobile-hamburger:active {
transform: scale(0.95);
}
/* Hide hamburger when sidebar is open */
.mobile-hamburger.hidden {
display: none;
}
/* Sidebar: off-screen by default on mobile */
.sidebar {
transform: translateX(-100%);
width: var(--sidebar-width) !important;
z-index: 1200;
}
/* When sidebar is open on mobile */
.sidebar.mobile-open {
transform: translateX(0);
}
/* Ignore desktop collapsed state on mobile - always full-width sidebar */
.sidebar.collapsed {
width: var(--sidebar-width) !important;
}
.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-group-label,
.sidebar.collapsed .nav-link span,
.sidebar.collapsed .submenu-arrow,
.sidebar.collapsed .footer-link span {
opacity: 1;
}
.sidebar.collapsed .sidebar-activities-label { display: block; }
.sidebar.collapsed .nav-link {
justify-content: flex-start;
}
.sidebar.collapsed .submenu {
max-height: none !important;
}
.sidebar.collapsed .nav-item-with-submenu.open .submenu {
max-height: 500px !important;
}
.sidebar.collapsed .nav-item-with-submenu:not(.open) .submenu {
max-height: 0 !important;
}
/* Disable collapsed hover tooltips on mobile */
.sidebar.collapsed .nav-link:hover::after {
display: none;
}
.sidebar.collapsed .footer-link:hover::after {
display: none;
}
/* Overlay backdrop */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1150;
opacity: 0;
transition: opacity 0.3s ease;
}
.sidebar-overlay.active {
display: block;
opacity: 1;
}
/* Main content: full width, no margin */
.main-content {
margin-left: 0 !important;
padding-top: 56px;
}
.main-content.expanded {
margin-left: 0 !important;
}
/* Activity/preferences popups: full-width on mobile */
.activity-popup,
.preferences-popup {
position: fixed;
left: 10px !important;
right: 10px !important;
bottom: auto !important;
top: 60px !important;
width: auto !important;
max-height: calc(100vh - 80px);
margin-left: 0 !important;
z-index: 1300;
}
/* Sidebar footer: add close button area */
.sidebar-header {
min-height: 60px;
}
/* Global modal fixes for mobile */
.modal-dialog {
margin: 8px !important;
max-width: calc(100vw - 16px) !important;
}
.modal-dialog.modal-lg,
.modal-dialog.modal-xl {
max-width: calc(100vw - 16px) !important;
}
.modal-content {
max-height: 92vh;
overflow-y: auto;
}
.modal-body {
padding: 12px;
}
/* Prevent body scroll when modal is open */
body.modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
}
/* Container fluid - tighter padding on mobile */
.container-fluid {
padding-left: 8px !important;
padding-right: 8px !important;
margin-top: 8px !important;
}
}
/* ===============================================================
GLOBAL SEARCH SPOTLIGHT
=============================================================== */
.gs-spotlight {
display: none;
position: fixed;
inset: 0;
z-index: 1060;
align-items: flex-start;
justify-content: center;
padding: max(12vh, 76px) 16px 24px;
pointer-events: none;
}
.gs-spotlight.show {
display: flex;
}
.gs-bar {
position: relative;
width: min(640px, 100%);
margin: 0;
pointer-events: auto;
}
.gs-input-wrap {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-primary);
transition: border-color 0.15s, box-shadow 0.15s;
}
.gs-input-wrap:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.gs-input-wrap i {
font-size: 18px;
color: var(--text-muted);
flex-shrink: 0;
}
.gs-input-wrap input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
background: transparent;
color: var(--text-primary);
min-width: 0;
}
.gs-input-wrap input::placeholder { color: var(--text-muted); }
.gs-kbd {
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-tertiary);
color: var(--text-muted);
border: 1px solid var(--border-color);
font-family: inherit;
line-height: 1.4;
white-space: nowrap;
}
.gs-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 420px;
overflow: hidden; /* inner .gs-scroll handles scrolling */
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 10px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
z-index: 1060;
}
.gs-dropdown.show { display: flex; flex-direction: column; }
/* Scrollable area: records + jump-to. The Create row is pinned below it. */
.gs-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 4px 0;
}
.gs-scroll::-webkit-scrollbar { width: 5px; }
.gs-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
/* Fixed "Create" footer — always reachable without scrolling. */
.gs-footer {
flex-shrink: 0;
border-top: 1px solid var(--border-color);
background: var(--bg-primary);
padding-top: 2px;
}
.gs-category {
padding: 8px 16px 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 6px;
}
.gs-category i { font-size: 14px; }
.gs-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
cursor: pointer;
text-decoration: none;
color: var(--text-primary);
transition: background 0.1s;
}
.gs-item:hover, .gs-item.gs-active {
background: var(--bg-tertiary);
color: var(--text-primary);
text-decoration: none;
}
.gs-item-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.gs-item-text { flex: 1; min-width: 0; }
.gs-item-name {
font-size: 13px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gs-item-sub {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gs-item-badge {
font-size: 10px;
font-weight: 600;
padding: 1px 7px;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
}
.gs-item-arrow {
font-size: 16px;
color: var(--text-muted);
opacity: 0;
transition: opacity 0.1s;
flex-shrink: 0;
}
.gs-item:hover .gs-item-arrow,
.gs-item.gs-active .gs-item-arrow { opacity: 1; }
/* Inline preview button on file rows in global search */
.gs-item-preview {
width: 28px;
height: 28px;
border-radius: 6px;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.gs-item-preview:hover {
background: var(--bg-tertiary);
color: var(--primary-color);
border-color: var(--primary-color);
}
.gs-item-preview i { font-size: 16px; line-height: 1; }
/* Compact "Jump to" rows (pages/settings/actions) — single line, no badge */
.gs-item.gs-nav { padding: 5px 16px; gap: 9px; }
.gs-item-ico {
width: 24px;
height: 24px;
border-radius: 6px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
background: var(--bg-tertiary, #f1f5f9);
color: var(--text-secondary, #475569);
transition: background 0.1s, color 0.1s;
}
.gs-item:hover .gs-item-ico,
.gs-item.gs-active .gs-item-ico { color: var(--primary-color, #0ea5e9); }
.gs-nav-label {
flex: 1;
min-width: 0;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gs-nav-ctx {
font-size: 11px;
color: var(--text-muted);
flex-shrink: 0;
white-space: nowrap;
}
/* "Create" actions collapsed into a single compact chip row */
.gs-create-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 2px 16px 10px;
}
.gs-chip {
/* Per-entity brand color set inline (style="--chip-c: var(--ent-)");
falls back to the primary accent. Tints follow docs/COLOR_SYSTEM.md. */
--chip-c: var(--primary-color, #0ea5e9);
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
color: var(--chip-c);
background: color-mix(in srgb, var(--chip-c) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--chip-c) 32%, transparent);
transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.gs-chip > i { font-size: 14px; }
.gs-chip:hover, .gs-chip.gs-active {
color: var(--btn-primary-text, #fff);
background: var(--chip-c);
border-color: var(--chip-c);
}
.gs-empty {
padding: 20px 16px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
}
.gs-empty i { font-size: 22px; display: block; margin-bottom: 6px; }
.gs-spinner {
padding: 18px;
text-align: center;
color: var(--text-muted);
}
/* Click-outside overlay (invisible) */
.gs-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 1059;
background: color-mix(in srgb, var(--text-primary) 16%, transparent);
}
.gs-backdrop.show { display: block; }
/* =============================================================
GLOBAL DOPAMINE — subtle polish across all pages
============================================================= */
/* ── Sidebar nav links — hover indent + glow ── */
.sidebar .nav-link:hover {
padding-left: 1.15rem;
box-shadow: inset 3px 0 0 0 var(--sidebar-accent-bar, #6366f1);
}
.sidebar .nav-link:active {
transform: scale(0.98);
transition-duration: 0.06s;
}
/* ── Active nav link accent bar — animate in ── */
@keyframes accentBarIn {
from { height: 0; opacity: 0; }
to { height: 60%; opacity: 1; }
}
.sidebar .nav-link.active::before {
animation: accentBarIn 0.25s ease-out;
}
/* ── Smooth page content transitions ── */
.main-content {
animation: pageIn 0.25s ease-out;
}
@keyframes pageIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── All buttons — subtle press feedback ── */
.btn {
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:active:not(:disabled) {
transform: scale(0.97);
transition-duration: 0.06s;
}
/* ── Focus rings — consistent glow ── */
input:focus, select:focus, textarea:focus {
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* ── Sidebar brand logo — hover warmth ── */
.sidebar-brand {
transition: all 0.2s ease;
}
.sidebar-brand:hover .brand-logo {
filter: brightness(1.15);
}
/* ── Sidebar toggle — spin on hover ── */
.sidebar-toggle i {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-toggle:hover i {
transform: rotate(180deg);
}
/* ── Toast / alert — slide in ── */
@keyframes toastIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.alert {
animation: toastIn 0.25s ease-out;
}
/* ── Scrollbar — sleek everywhere ── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.45); }
/* ── Favorite project items — hover feel ── */
.fav-proj-item {
transition: background-color 0.15s ease, padding-left 0.15s ease;
}
.fav-proj-item:hover {
padding-left: 1.15rem;
}
/* ===============================================================
SIDEBAR — quiet workspace rail
=============================================================== */
.sidebar {
box-shadow: inset -1px 0 0 var(--sidebar-border);
}
.sidebar-header {
min-height: 58px;
padding: 0.75rem 0.7rem;
border-bottom: 0;
}
.brand-logo {
width: 28px;
height: 28px;
border-radius: 5px;
}
.logo-text {
font-size: 18px;
font-weight: 650;
letter-spacing: 0.01em;
}
.sidebar-toggle {
width: 30px;
height: 30px;
padding: 0;
border-radius: 5px;
}
.sidebar.collapsed .sidebar-global-search-trigger {
display: none;
}
.sidebar-search {
min-height: 34px;
margin: 2px 8px 6px;
padding: 7px 9px;
border-color: transparent;
border-radius: 6px;
background: color-mix(in srgb, var(--sidebar-text) 7%, transparent);
}
.sidebar-search:focus-within {
border-color: color-mix(in srgb, var(--sidebar-accent-bar, #6366f1) 62%, transparent);
background: color-mix(in srgb, var(--sidebar-text) 10%, transparent);
}
.sidebar-search input {
font-size: 12.5px;
}
.sidebar-nav {
padding: 0.2rem 0.5rem 0.75rem;
}
.nav-group {
margin-bottom: 0.5rem;
}
.nav-group-label {
min-height: 26px;
margin-top: 0;
padding: 0.38rem 0.4rem 0.2rem;
gap: 0.25rem;
color: var(--sidebar-text-muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
}
.nav-group-label--split {
padding-right: 0.25rem;
}
.nav-group-label > .group-toggle-arrow,
.nav-group-label-title > .group-toggle-arrow {
width: 14px;
margin-left: -2px;
font-size: 13px;
opacity: 0.58;
}
.nav-group-action {
width: 24px;
height: 22px;
margin: 0;
padding: 0;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sidebar-text-muted);
font-size: 16px;
}
.nav-group-action:hover {
color: var(--sidebar-text);
background: var(--sidebar-bg-hover);
}
.sidebar .nav-link {
min-height: 32px;
margin: 1px 0;
padding: 0.38rem 0.5rem;
gap: 0.55rem;
border-radius: 6px;
color: var(--sidebar-text);
font-size: 13px;
font-weight: 500;
transition: color 0.14s ease, background-color 0.14s ease;
}
.sidebar .nav-link:hover {
padding-left: 0.5rem;
color: var(--sidebar-text);
background: var(--sidebar-bg-hover);
box-shadow: none;
}
.sidebar .nav-link.active {
color: var(--sidebar-text);
background: var(--sidebar-bg-active);
font-weight: 600;
}
.sidebar .nav-link.active::before {
display: none;
}
.sidebar .nav-link i,
.sidebar .nav-link svg {
width: 17px;
font-size: 16px;
color: currentColor;
}
.kanban-pill {
margin-left: auto;
opacity: 0 !important;
pointer-events: none;
text-decoration: none;
}
.sidebar .nav-link:hover .kanban-pill,
.sidebar .nav-link:focus-visible .kanban-pill {
opacity: 1 !important;
pointer-events: auto;
}
.nav-link-with-badge {
position: relative;
}
.submenu {
margin: 1px 0 0;
border-radius: 0;
background: transparent;
}
.submenu .nav-link {
padding-left: 2.1rem;
border-radius: 6px;
font-size: 12.5px;
}
.submenu .nav-link:hover {
padding-left: 2.1rem;
}
.submenu .nav-link:first-child,
.submenu .nav-link:last-child {
border-radius: 6px;
}
.sidebar-project-shortcuts {
padding-top: 0.2rem;
}
.sidebar-subsection-label {
padding: 0.28rem 0.5rem 0.18rem 2.1rem;
color: var(--sidebar-text-muted);
font-size: 10.5px;
font-weight: 500;
}
#sidebarFavoritesList {
padding: 0;
}
.fav-proj-item {
margin: 1px 0;
padding: 0;
transition: none;
}
.fav-proj-item:hover {
padding-left: 0;
}
.fav-border-box {
min-height: 30px;
padding: 0.32rem 0.5rem 0.32rem 2.1rem;
gap: 0.5rem;
border: 0;
border-radius: 6px;
transition: color 0.14s ease, background-color 0.14s ease;
}
.fav-proj-item:hover .fav-border-box {
border-color: transparent;
background: var(--sidebar-bg-hover);
}
.fav-proj-item.active .fav-border-box {
background: var(--sidebar-bg-active);
}
.fav-proj-item.active .fav-proj-name {
font-weight: 600;
}
.fav-proj-icon {
width: 16px;
height: 16px;
border-radius: 4px;
color: var(--project-color, var(--sidebar-text-muted));
background: color-mix(in srgb, var(--project-color, var(--sidebar-text-muted)) 18%, transparent);
}
.fav-proj-icon svg {
width: 10px;
height: 10px;
stroke-width: 2;
}
.fav-proj-name {
color: var(--sidebar-text);
font-size: 12.75px;
}
.fav-empty-msg {
display: block;
padding: 0.34rem 0.5rem 0.34rem 2.1rem;
color: var(--sidebar-text-muted);
font-size: 12px;
font-style: normal;
}
.fav-empty-msg.is-error {
color: var(--danger-color);
}
.sidebar.collapsed .sidebar-project-shortcuts {
display: none;
}
.sidebar.collapsed .sidebar-header {
padding-inline: 0;
justify-content: center;
}
.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .nav-group-label {
display: none;
}
.sidebar.collapsed .nav-group {
margin-bottom: 0.15rem;
}
.sidebar.collapsed .nav-link {
padding-inline: 0;
justify-content: center;
gap: 0;
}
.sidebar.collapsed .nav-link > span,
.sidebar.collapsed .nav-link > .submenu-arrow {
display: none;
}
.sidebar-footer {
padding: 0.5rem;
gap: 0.4rem;
border-top: 1px solid var(--sidebar-border);
background: var(--sidebar-bg);
}
.sidebar-quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
gap: 3px;
}
.sidebar-quick-action {
position: relative;
min-width: 0;
height: 32px;
border: 0;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sidebar-text-muted);
background: transparent;
text-decoration: none;
cursor: pointer;
}
.sidebar-quick-action:hover {
color: var(--sidebar-text);
background: var(--sidebar-bg-hover);
}
.sidebar-quick-action > i {
font-size: 17px;
}
.sidebar-quick-action .sidebar-action-badge,
.sidebar-quick-action .activity-badge {
position: absolute;
top: 1px;
right: 1px;
min-width: 15px;
height: 15px;
padding: 0 4px;
border: 2px solid var(--sidebar-bg);
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sidebar-text);
background: var(--danger-color);
font-size: 9px;
font-weight: 700;
line-height: 1;
}
.sidebar-quick-action .sidebar-action-badge[hidden],
.sidebar-quick-action .activity-badge.hidden {
display: none;
}
.sidebar-account-button {
width: 100%;
min-height: 40px;
padding: 0.34rem 0.4rem;
border: 0;
border-radius: 7px;
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--sidebar-text);
background: transparent;
text-align: left;
}
.sidebar-account-button:hover,
.sidebar-account-button[aria-expanded="true"] {
background: var(--sidebar-bg-hover);
}
.sidebar-account-avatar {
width: 28px;
height: 28px;
border: 1px solid var(--sidebar-border);
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--sidebar-text);
background: var(--sidebar-bg-active);
font-size: 11px;
font-weight: 700;
}
.sidebar-account-copy {
min-width: 0;
display: flex;
flex: 1;
flex-direction: column;
line-height: 1.15;
}
.sidebar-account-copy strong {
overflow: hidden;
color: var(--sidebar-text);
font-size: 12.5px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-account-copy small {
margin-top: 2px;
color: var(--sidebar-text-muted);
font-size: 10.5px;
}
.sidebar-account-more {
flex-shrink: 0;
color: var(--sidebar-text-muted);
font-size: 17px;
}
.sidebar-account-menu {
min-width: 220px;
margin-left: 8px !important;
padding: 0.35rem;
border: 1px solid var(--sidebar-border);
border-radius: 8px;
background: var(--sidebar-bg);
box-shadow: 0 16px 40px color-mix(in srgb, var(--text-primary) 22%, transparent);
}
.sidebar-account-menu .dropdown-item {
min-height: 34px;
padding: 0.42rem 0.55rem;
border: 0;
border-radius: 5px;
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--sidebar-text);
background: transparent;
font-size: 12.5px;
}
.sidebar-account-menu .dropdown-item:hover,
.sidebar-account-menu .dropdown-item.active {
color: var(--sidebar-text);
background: var(--sidebar-bg-hover);
}
.sidebar-account-menu .dropdown-item i {
width: 17px;
color: var(--sidebar-text-muted);
font-size: 16px;
}
.sidebar-account-menu .dropdown-divider {
border-color: var(--sidebar-border);
}
.sidebar-menu-badge {
min-width: 18px;
margin-left: auto;
padding: 1px 5px;
border-radius: 999px;
color: var(--sidebar-text);
background: var(--danger-color);
font-size: 10px;
font-weight: 700;
text-align: center;
}
.sidebar.collapsed .sidebar-quick-actions {
grid-template-columns: 1fr;
}
.sidebar.collapsed .sidebar-account-button {
justify-content: center;
}
.sidebar.collapsed .sidebar-account-copy,
.sidebar.collapsed .sidebar-account-more {
display: none;
}
.sidebar.collapsed .sidebar-quick-action:hover::after {
content: attr(data-title);
position: fixed;
left: calc(var(--sidebar-collapsed-width) + 8px);
z-index: 1001;
padding: 6px 9px;
border: 1px solid var(--sidebar-border);
border-radius: 5px;
color: var(--sidebar-text);
background: var(--sidebar-bg);
box-shadow: 0 8px 24px color-mix(in srgb, var(--text-primary) 18%, transparent);
font-size: 12px;
white-space: nowrap;
}
@media (max-width: 768px) {
.kanban-pill {
opacity: 1 !important;
pointer-events: auto;
}
.sidebar.collapsed .sidebar-header {
padding: 0.75rem 0.7rem;
justify-content: space-between;
}
.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .nav-group-label {
display: flex;
}
.sidebar.collapsed .nav-group {
margin-bottom: 0.5rem;
}
.sidebar.collapsed .nav-link {
padding-inline: 0.5rem;
gap: 0.55rem;
}
.sidebar.collapsed .nav-link > span,
.sidebar.collapsed .nav-link > .submenu-arrow {
display: inline-flex;
}
.sidebar.collapsed .sidebar-project-shortcuts {
display: block;
}
.sidebar.collapsed .sidebar-quick-actions {
grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
}
.sidebar.collapsed .sidebar-account-button {
justify-content: flex-start;
}
.sidebar.collapsed .sidebar-account-copy {
display: flex;
}
.sidebar.collapsed .sidebar-account-more {
display: block;
}
.sidebar.collapsed .sidebar-quick-action:hover::after {
display: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════
LOADING SYSTEM — app-wide skeleton + entrance-stagger utilities.
Skeletons: etc. while data is in
flight. Entrance: call window.crmAnimateIn(container) (base-shell.js)
right after painting fetched data — children fade-up staggered once.
═══════════════════════════════════════════════════════════════════════ */
.skel {
position: relative;
overflow: hidden;
background: var(--bg-secondary, #f4f5f7);
border-radius: 8px;
}
.skel::after {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(
90deg,
transparent,
color-mix(in srgb, var(--text-muted, #94a3b8) 14%, transparent),
transparent
);
animation: crm-skel-sweep 1.1s ease-in-out infinite;
}
@keyframes crm-skel-sweep {
100% { transform: translateX(100%); }
}
.skel-line { height: 12px; border-radius: 6px; }
.skel-line.w30 { width: 30%; } .skel-line.w40 { width: 40%; }
.skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; }
.skel-circle { border-radius: 50%; width: 34px; height: 34px; flex: 0 0 auto; }
/* Skeleton list row: avatar circle + two text lines (chat, feeds, drawers) */
.skel-list-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
}
.skel-list-row .skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
/* Skeleton kanban column: header line + stacked cards (boards) */
.skel-board {
display: flex;
gap: 16px;
padding: 16px;
align-items: flex-start;
}
.skel-board-col {
flex: 0 0 280px;
display: flex;
flex-direction: column;
gap: 10px;
}
.skel-board-col .skel-card { height: 84px; border-radius: 10px; }
/* Entrance stagger — added briefly by crmAnimateIn() after a data paint */
.load-in > * {
animation: crm-load-in 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
.load-in > *:nth-child(1) { animation-delay: 0.02s; }
.load-in > *:nth-child(2) { animation-delay: 0.05s; }
.load-in > *:nth-child(3) { animation-delay: 0.08s; }
.load-in > *:nth-child(4) { animation-delay: 0.11s; }
.load-in > *:nth-child(5) { animation-delay: 0.14s; }
.load-in > *:nth-child(6) { animation-delay: 0.17s; }
.load-in > *:nth-child(7) { animation-delay: 0.20s; }
.load-in > *:nth-child(8) { animation-delay: 0.23s; }
.load-in > *:nth-child(9) { animation-delay: 0.26s; }
.load-in > *:nth-child(10) { animation-delay: 0.29s; }
.load-in > *:nth-child(n+11) { animation-delay: 0.32s; }
@keyframes crm-load-in {
from { opacity: 0; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
.skel::after { animation: none; }
.load-in > * { animation: none; }
}
/* =============================================================
THEMED SELECT PICKER (static/js/base-select.js)
Native