.
Minimal first slice — plans 06-05 / 06-06 / 06-07 / 06-08 / 06-09
add selection visuals (.spk-grid-cell-selected,
.spk-grid-cell-anchor),
column resize handles,
context-menu,
and ribbon styling.
BUG FIX (post-ship): `max-width: 100%` was forcing the table to fit the
editor width,
so column drag-resize compressed neighboring columns
instead of growing the table horizontally (the user expected Outlook-
style: drag a column wider,
table grows,
horizontal scroll appears in
the editor). Removed max-width; the editors get `overflow-x:auto` near
the bottom of this file so wide tables scroll within the composer
instead of overflowing it.
Scope-broadened from `.reply-editor` to also `.compose-editor` so the
inbox compose modal (plan 06-12 extension) gets the same chrome — the
reply-editor-only scope was a plan 06-12 oversight. */
.reply-editor table.spk-grid,
horizontal scroll appears in
the editor). Removed max-width; the editors get `overflow-x:auto` near
the bottom of this file so wide tables scroll within the composer
instead of overflowing it.
Scope-broadened from `.reply-editor` to also `.compose-editor` so the
inbox compose modal (plan 06-12 extension) gets the same chrome — the
reply-editor-only scope was a plan 06-12 oversight. */
.macro-body-editor table.spk-grid,
.compose-editor table.spk-grid{
margin: 12px 0;
border-collapse: collapse;
/* BUG FIX (post-ship round 3): the parent editors are
`display: flex; flex-direction: column;` — without overriding
align-self, the table inherits the default `stretch` cross-axis
alignment and is forced to the editor's full width. Result: when
the user drag-resized one column smaller, the table couldn't
shrink (locked at editor-width), so the browser redistributed the
freed space across the OTHER columns — looking like a fixed-width
table with proportional columns. `align-self: flex-start` opts
the table out of the flex stretch, letting it size to its own
content width (`table-layout: auto` + the per-cell widths emitted
by the drag-resize handler in grid-editor.js). Now drag-shrink
narrows the column AND the whole table. Drag-grow widens both. */
align-self: flex-start;
}
.reply-editor table.spk-grid td,
.macro-body-editor table.spk-grid td,
.reply-editor table.spk-grid th,
.macro-body-editor table.spk-grid th,
.compose-editor table.spk-grid td,
.compose-editor table.spk-grid th{
position: relative;
min-width: 40px;
}
/* Phase 06 plan 05 — multi-cell selection visual overlay
(REQ-06-11 in-editor preview chrome slice — selection overlay).
.spk-grid-cell-selected: every cell in the rectangle from anchor to focus.
1px inset border (via box-shadow so it doesn't shift layout) + light
bg overlay tinted with the brand primary.
.spk-grid-cell-anchor: the anchor cell additionally — 2px inset border
(heavier ring to mark "this is where the drag started").
!important on background-color defeats any inline style="background-color:#X"
that plan 06-07 (color picker) writes onto the cell — the selection overlay
must remain visible while the user is making a multi-cell pick. After
deselection the inline style takes back over (cascade resumes).
Class-strip leakage: the `.spk-grid-cell-*` classes are removed from the
DOM when selection clears (mousedown outside any .spk-grid),
so they
normally never reach _cleanupEditorHtml on send. Plan 06-13's class-strip
pass in _cleanupEditorHtml is the belt-and-braces guard for the
ribbon-action mid-selection edge case. */
.reply-editor table.spk-grid td.spk-grid-cell-selected,
so they
normally never reach _cleanupEditorHtml on send. Plan 06-13's class-strip
pass in _cleanupEditorHtml is the belt-and-braces guard for the
ribbon-action mid-selection edge case. */
.macro-body-editor table.spk-grid td.spk-grid-cell-selected,
.reply-editor table.spk-grid th.spk-grid-cell-selected,
.macro-body-editor table.spk-grid th.spk-grid-cell-selected,
.compose-editor table.spk-grid td.spk-grid-cell-selected,
.compose-editor table.spk-grid th.spk-grid-cell-selected{
box-shadow: inset 0 0 0 1px var(--primary);
background-color: var(--primary-light) !important;
}
.reply-editor table.spk-grid td.spk-grid-cell-anchor,
.macro-body-editor table.spk-grid td.spk-grid-cell-anchor,
.reply-editor table.spk-grid th.spk-grid-cell-anchor,
.macro-body-editor table.spk-grid th.spk-grid-cell-anchor,
.compose-editor table.spk-grid td.spk-grid-cell-anchor,
.compose-editor table.spk-grid th.spk-grid-cell-anchor{
box-shadow: inset 0 0 0 2px var(--primary) !important;
background-color: var(--primary-light) !important;
}
/* Phase 06 plan 06 — context menu + nested submenu chrome
(REQ-06-11 in-editor preview chrome slice — context menu surface).
Right-click on a .spk-grid cell opens .spk-grid-ctx-menu via JS; hovering
a row with [data-submenu] mounts a .spk-grid-ctx-submenu to its right.
Both menus are position:fixed (viewport coords), appended to so
they aren't trapped inside overflow:auto editor parents. Z-index 9999
mirrors the .entity-context-menu precedent (single tier for floating
menus — always defeats other UI in the page).
Theme tokens only — zero hardcoded hex except the rgba(239,68,68,0.1)
red-tint for danger hover (matches .entity-context-menu .menu-item.danger
:hover at line 8930 of this file — semantic constant for "danger states
on hover", not a theme color).
Dark-mode parity comes for free: all tokens used here have per-theme
definitions in :root and body.dark-theme. */
.spk-grid-ctx-menu,
.spk-grid-ctx-submenu {
position: fixed;
z-index: 9999;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: var(--shadow-lg);
padding: 4px 0;
min-width: 220px;
font-size: 13px;
color: var(--text-primary);
user-select: none;
}
.spk-grid-ctx-submenu {
/* Submenu sits visually above its parent menu — bump z so the parent
row's hover tint doesn't bleed through if they overlap on small
viewports after viewport-overflow flip. */
z-index: 10000;
min-width: 200px;
}
.spk-grid-ctx-header {
padding: 6px 14px 6px 14px;
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-light);
margin-bottom: 4px;
}
.spk-grid-ctx-header .sel-count {
color: var(--primary);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
.spk-grid-ctx-item {
padding: 8px 14px;
cursor: pointer;
color: var(--text-primary);
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
gap: 10px;
}
.spk-grid-ctx-item:hover,
.spk-grid-ctx-item.hovered {
background: var(--hover-bg);
}
.spk-grid-ctx-item .label {
flex: 1;
}
.spk-grid-ctx-item .kbd {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
padding: 1px 4px;
background: var(--bg-secondary);
border-radius: 3px;
border: 1px solid var(--border-light);
}
.spk-grid-ctx-item .chevron {
color: var(--text-muted);
font-size: 10px;
}
.spk-grid-ctx-item.danger {
color: var(--danger);
}
.spk-grid-ctx-item.danger:hover {
/* Semantic red-tint hover state — mirrors .entity-context-menu .menu-item.danger:hover */
background: rgba(239, 68, 68, 0.1);
}
.spk-grid-ctx-sep {
height: 1px;
background: var(--border-light);
margin: 4px 0;
}
.spk-grid-ctx-align-row {
display: flex;
gap: 4px;
padding: 8px 12px;
}
.spk-grid-ctx-align-btn {
flex: 1;
padding: 6px 8px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
color: var(--text-primary);
font-size: 14px;
font-family: inherit;
transition: all 0.1s ease;
}
.spk-grid-ctx-align-btn:hover {
background: var(--hover-bg);
}
.spk-grid-ctx-align-btn.active {
background: var(--primary-light);
border-color: var(--primary);
color: var(--primary);
}
.spk-grid-ctx-colors-stub {
padding: 12px 14px;
font-size: 11px;
color: var(--text-muted);
font-style: italic;
}
/* Phase 06 plan 07 — color picker submenu chrome (REQ-06-11 in-editor
preview chrome slice — color picker surface).
The Couleurs ▸ submenu hosts three stacked sections (Fond / Texte /
Bordures). Each section: title row (label + Effacer link aligned right)
+ swatch row (8 presets + 1 ⊕ custom-picker). All values use existing
theme tokens — no new hardcoded colors except the checkerboard pattern
for 'transparent' swatches (a 6×6 gray-on-white checker is a UI
convention for "no fill", not a theme color). Dark-mode parity is
automatic via the tokens.
The .spk-grid-color-submenu selector inherits all of .spk-grid-ctx-submenu's
base chrome (background, border, shadow, z-index, padding) from plan
06-06's CSS — this block only adds the layout / sizing / swatch-grid
styling specific to the color picker. */
.spk-grid-color-submenu {
min-width: 240px;
padding: 4px 0;
}
.spk-grid-color-section {
padding: 8px 12px 10px;
border-bottom: 1px solid var(--border-light);
}
.spk-grid-color-section:last-child {
border-bottom: none;
}
.spk-grid-color-section-title {
font-size: 11px;
color: var(--text-muted);
margin-bottom: 6px;
display: flex;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.spk-grid-color-clear {
margin-left: auto;
padding: 2px 6px;
font-size: 10px;
color: var(--text-muted);
text-decoration: underline;
cursor: pointer;
}
.spk-grid-color-clear:hover {
color: var(--danger);
text-decoration: underline;
}
.spk-grid-color-swatches {
display: flex;
gap: 4px;
flex-wrap: wrap;
align-items: center;
}
.spk-grid-color-swatch {
width: 22px;
height: 22px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: var(--text-primary);
background: var(--bg-secondary);
transition: transform 0.1s ease, box-shadow 0.1s ease;
position: relative;
}
.spk-grid-color-swatch:hover {
transform: scale(1.15);
box-shadow: 0 0 0 2px var(--primary-light);
z-index: 1;
}
.spk-grid-color-swatch.selected {
box-shadow: 0 0 0 2px var(--primary);
}
/* Checkerboard pattern marking the "transparent" swatch (Fond + Bordure
sections include it as their first swatch). 6×6 gray-on-white checker
is a standard UI convention for "no fill" — not a theme color, so the
hardcoded #ccc / transparent here is a semantic pattern, not a chrome
color. */
.spk-grid-color-swatch.transparent {
background:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 6px 6px;
background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}
.spk-grid-color-swatch-custom {
border: 1px dashed var(--border);
background: var(--bg-secondary);
color: var(--text-secondary);
font-weight: bold;
}
.spk-grid-color-swatch-custom:hover {
color: var(--primary);
border-color: var(--primary);
}
/* Phase 06 plan 08 — column drag-resize handle + guide overlay
(REQ-06-11 in-editor preview chrome slice — drag handles + guide).
The handle (.spk-grid-col-resize) is a 6px-wide absolute-positioned
child of every / ,
anchored to the cell's right edge. Hidden
by default (opacity 0); revealed on cell hover and on direct handle
hover. The parent cell already has position: relative (declared in
the .reply-editor/.compose-editor table.spk-grid td/th rule near
line 2592).
The guide (.spk-grid-drag-guide) is appended to at drag start
and removed at drag end. position: fixed + height: 100vh so it spans
the viewport regardless of scroll position. pointer-events: none so
the document-level mouseup still fires correctly (the guide is
visual-only — never an event target).
The label (.spk-grid-drag-guide-label) floats at the vertical center
of the guide and uses monospace for stable digit alignment as the
delta animates. Hardcoded `monospace` (no project --font-mono var). */
.reply-editor table.spk-grid .spk-grid-col-resize,
anchored to the cell's right edge. Hidden
by default (opacity 0); revealed on cell hover and on direct handle
hover. The parent cell already has position: relative (declared in
the .reply-editor/.compose-editor table.spk-grid td/th rule near
line 2592).
The guide (.spk-grid-drag-guide) is appended to at drag start
and removed at drag end. position: fixed + height: 100vh so it spans
the viewport regardless of scroll position. pointer-events: none so
the document-level mouseup still fires correctly (the guide is
visual-only — never an event target).
The label (.spk-grid-drag-guide-label) floats at the vertical center
of the guide and uses monospace for stable digit alignment as the
delta animates. Hardcoded `monospace` (no project --font-mono var). */
.macro-body-editor table.spk-grid .spk-grid-col-resize,
.compose-editor table.spk-grid .spk-grid-col-resize{
position: absolute;
top: 0;
right: -3px;
width: 6px;
height: 100%;
cursor: col-resize;
opacity: 0;
transition: opacity 0.15s ease, background-color 0.15s ease;
z-index: 2;
}
.reply-editor table.spk-grid td:hover .spk-grid-col-resize,
.macro-body-editor table.spk-grid td:hover .spk-grid-col-resize,
.compose-editor table.spk-grid td:hover .spk-grid-col-resize,
.reply-editor table.spk-grid th:hover .spk-grid-col-resize,
.macro-body-editor table.spk-grid th:hover .spk-grid-col-resize,
.compose-editor table.spk-grid th:hover .spk-grid-col-resize{
opacity: 1;
background-color: var(--primary);
}
.reply-editor table.spk-grid .spk-grid-col-resize:hover,
.macro-body-editor table.spk-grid .spk-grid-col-resize:hover,
.compose-editor table.spk-grid .spk-grid-col-resize:hover{
background-color: var(--primary-hover);
}
.spk-grid-drag-guide {
position: fixed;
top: 0;
width: 0;
height: 100vh;
border-left: 1px dashed var(--primary);
pointer-events: none;
z-index: 10000;
}
.spk-grid-drag-guide-label {
position: absolute;
top: 50%;
left: 8px;
transform: translateY(-50%);
background: var(--primary);
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-family: monospace;
white-space: nowrap;
}
/* Phase 06 plan 09 — contextual table ribbon + help popover (REQ-06-03 /
REQ-06-11 in-editor preview chrome slice — slide-in toolbar for tables).
The ribbon sits between #richtext-toolbar and #reply-editor in
templates/ticket_detail.html. JS controls visibility via the `hidden`
HTML attribute — we OVERRIDE the browser default `[hidden]{display:none}`
so the element stays in layout and we can animate max-height + opacity
on the [hidden] toggle. Without the override, display:none would skip
the transition entirely (display has no animatable value).
Button states reuse the project's --primary / --hover-bg / --border-light
semantic tokens — dark-mode parity is automatic via the cascade since
those tokens flip in body.dark-theme. No explicit dark-mode override
needed in CONSOLIDATED FIXES for this section. */
.spk-grid-ribbon {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-light);
overflow: hidden;
max-height: 40px;
opacity: 1;
transition: max-height 180ms ease, opacity 180ms ease, padding 180ms ease;
z-index: 10;
}
/* Override the browser's default `[hidden] { display: none }` — we need
the element to stay in layout so max-height + opacity can animate.
The `display: flex` mirrors the visible state. The transition still
applies (matches the rule above) — toggling `hidden` triggers the
180ms slide-in or slide-out. pointer-events:none ensures buttons
aren't accidentally clickable during the collapsed state. */
.spk-grid-ribbon[hidden] {
display: flex !important;
max-height: 0 !important;
opacity: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
pointer-events: none !important;
border-bottom-width: 0 !important;
}
.spk-grid-ribbon-label {
font-size: 12px;
color: var(--text-secondary);
font-weight: 600;
padding: 0 6px;
user-select: none;
}
.spk-grid-ribbon-sep {
width: 1px;
height: 18px;
background: var(--border-light);
margin: 0 4px;
flex-shrink: 0;
}
.spk-grid-ribbon-btn {
padding: 4px 8px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
color: var(--text-primary);
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
line-height: 1;
white-space: nowrap;
}
.spk-grid-ribbon-btn:hover {
background: var(--hover-bg);
border-color: var(--border-light);
}
.spk-grid-ribbon-btn.active {
background: var(--primary-light);
border-color: var(--primary);
color: var(--primary);
}
.spk-grid-ribbon-btn svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
flex-shrink: 0;
}
.spk-grid-ribbon-spacer {
flex: 1;
}
.spk-grid-ribbon-help {
width: 22px;
height: 22px;
padding: 0;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 50%;
cursor: pointer;
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
line-height: 1;
flex-shrink: 0;
}
.spk-grid-ribbon-help:hover {
background: var(--primary-light);
border-color: var(--primary);
color: var(--primary);
}
/* Help popover — six-row keyboard shortcuts list anchored below the ?
pill (or flipped above if no room below). Mirrors sketch 003's
.kbd-popover visual style adapted to project semantic tokens. */
.spk-grid-help-popover {
position: fixed;
z-index: 100;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-lg);
padding: 12px 16px;
min-width: 280px;
font-size: 12px;
color: var(--text-primary);
}
.spk-grid-help-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border-light);
}
.spk-grid-help-popover table {
width: 100%;
border-collapse: collapse;
}
.spk-grid-help-popover td {
padding: 4px 0;
color: var(--text-secondary);
}
.spk-grid-help-popover td:first-child {
font-family: monospace;
color: var(--primary);
padding-right: 16px;
font-weight: 500;
white-space: nowrap;
}
/* Context panel */
.context-section {
margin-bottom: 16px;
}
.context-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.context-card {
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
}
.client-field {
margin-bottom: 10px;
}
.client-field:last-child {
margin-bottom: 0;
}
.client-field label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 2px;
}
.client-field span {
font-size: 13px;
color: var(--text-primary);
}
.client-note {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
font-family: var(--font);
resize: vertical;
min-height: 60px;
}
.no-data {
font-size: 13px;
color: var(--text-muted);
font-style: italic;
text-align: center;
padding: 12px;
}
/* CRM source badge (SharePoint / Excel indicator) */
.crm-source-badge {
display: inline-block;
font-size: 10px;
font-weight: 600;
padding: 1px 6px;
border-radius: 8px;
margin-left: 8px;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.crm-source-sharepoint {
background: #e0f2fe;
color: #0369a1;
}
.crm-source-excel {
background: #dcfce7;
color: #15803d;
}
.excel-field {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.excel-field:last-child {
border-bottom: none;
}
.excel-field-label {
color: var(--text-muted);
font-weight: 500;
}
.excel-field-value {
color: var(--text-primary);
text-align: right;
}
.lots-section-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin: 12px 0 6px 0;
padding-top: 8px;
border-top: 2px solid var(--border);
}
/* CRM multi-match display */
.crm-match-header {
padding: 6px 0;
margin-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.crm-match-count {
font-size: 12px;
font-weight: 600;
color: var(--primary);
}
.crm-match-row {
position: relative;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
margin: 2px 0;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
border: 1px solid transparent;
transition: background 0.15s, border-color 0.15s;
}
.crm-match-row:hover {
background: var(--bg-hover, #f3f4f6);
border-color: var(--border);
}
.crm-match-row.crm-match-active {
background: var(--primary-light, #eff6ff);
border-color: var(--primary);
}
.crm-match-source {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
color: #fff;
background: var(--primary);
padding: 1px 5px;
border-radius: 3px;
flex-shrink: 0;
}
.crm-match-summary {
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.crm-match-tooltip {
/* position:fixed escapes ALL ancestor stacking contexts (including the
central message-thread panel, which has its own z-index context).
Without this, a `position:absolute; z-index:2500` tooltip stays trapped
inside the CRM panel's stacking context and gets drawn UNDER siblings of
any positioned ancestor that sits above it in the DOM — visible only
at the leftmost edge.
JS sets top/left on hover (see _renderCrmSection in tickets.js) since
fixed positioning is viewport-relative. */
display: none;
position: fixed;
min-width: 300px;
max-width: 400px;
max-height: 60vh;
overflow-y: auto;
background: var(--bg-card, #fff);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
padding: 10px;
z-index: 9999;
font-size: 12px;
pointer-events: auto;
}
.crm-detail-section {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--border);
}
/* Floating cleanup pattern button (text selection) */
#cleanup-selection-btn {
transition: opacity 0.15s ease, transform 0.15s ease;
animation: cleanupBtnAppear 0.15s ease;
}
#cleanup-selection-btn:hover {
background: var(--blue-hover, #2554c7) !important;
transform: translateY(-1px);
}
@keyframes cleanupBtnAppear {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.folder-select, .priority-select {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
background: var(--bg-white);
}
/* ==========================================================================
DASHBOARD
========================================================================== */
.dashboard-container {
padding: 24px;
max-width: 1400px;
}
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.dashboard-title {
font-size: 24px;
font-weight: 700;
}
.period-selector {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.period-btn {
background: var(--bg-white);
border: 1px solid var(--border);
color: var(--text-secondary);
}
.period-btn.active {
background: var(--blue);
border-color: var(--blue);
color: white;
}
.custom-date-range {
display: flex;
align-items: center;
gap: 8px;
margin-left: 8px;
}
.date-input {
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
}
/* KPI Cards */
.kpi-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.kpi-card {
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: var(--shadow-sm);
}
.kpi-icon {
width: 48px;
height: 48px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.kpi-icon-blue {
background: var(--blue-light);
color: var(--blue);
}
.kpi-icon-amber {
background: var(--amber-light);
color: var(--amber);
}
.kpi-icon-green {
background: var(--green-light);
color: var(--green);
}
.kpi-icon-purple {
background: var(--purple-light);
color: var(--purple);
}
.kpi-content {
display: flex;
flex-direction: column;
}
.kpi-value {
font-size: 28px;
font-weight: 700;
line-height: 1.1;
color: var(--text-primary);
}
.kpi-label {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
/* Charts */
.charts-row {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.chart-card {
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow-sm);
position: relative;
min-height: 280px;
max-height: 380px;
overflow: hidden;
}
.chart-card canvas {
max-height: 300px !important;
}
.chart-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 16px;
}
/* SLA Cards */
.sla-cards {
display: flex;
flex-direction: column;
gap: 12px;
padding: 8px 0;
}
.sla-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-radius: var(--radius);
}
.sla-ok { background: var(--green-light); }
.sla-warning { background: var(--amber-light); }
.sla-critical { background: var(--red-light); }
.sla-count {
font-size: 24px;
font-weight: 700;
}
.sla-ok .sla-count { color: #15803d; }
.sla-warning .sla-count { color: #92400e; }
.sla-critical .sla-count { color: #b91c1c; }
.sla-label {
font-size: 13px;
font-weight: 500;
}
.sla-ok .sla-label { color: #15803d; }
.sla-warning .sla-label { color: #92400e; }
.sla-critical .sla-label { color: #b91c1c; }
/* Stats table */
.stats-table-card {
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow-sm);
}
.stats-table {
width: 100%;
border-collapse: collapse;
}
.stats-table th {
padding: 10px 12px;
text-align: left;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
border-bottom: 2px solid var(--border);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.stats-table td {
padding: 10px 12px;
font-size: 13px;
border-bottom: 1px solid var(--border);
}
.stats-table .empty-row td {
text-align: center;
color: var(--text-muted);
font-style: italic;
padding: 24px;
}
/* ==========================================================================
SETTINGS
========================================================================== */
.settings-container {
padding: 24px;
}
.settings-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}
/* --- Settings 2-column layout --- */
.settings-layout {
display: flex;
gap: 0;
min-height: calc(100vh - 140px);
}
/* --- Vertical sidebar navigation --- */
.settings-sidebar {
width: 220px;
min-width: 220px;
border-right: 1px solid var(--border);
padding: 8px 0;
overflow-y: auto;
background: var(--bg-white);
}
.settings-nav-group {
margin-bottom: 8px;
}
.settings-nav-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted);
padding: 12px 16px 4px;
user-select: none;
}
.settings-tab {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 16px;
border: none;
background: none;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
border-left: 3px solid transparent;
transition: all var(--transition);
text-align: left;
white-space: nowrap;
}
.settings-tab:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.settings-tab.active {
color: var(--blue);
border-left-color: var(--blue);
background: var(--blue-light);
font-weight: 600;
}
.settings-tab svg {
flex-shrink: 0;
}
/* --- Content panel (right side) --- */
.settings-content {
flex: 1;
min-width: 0;
padding: 0 0 0 28px;
max-width: 900px;
}
/* When users-management panel is active, allow full width for organigramme */
.settings-content.organigramme-fullwidth {
max-width: none;
}
.settings-panel {
display: none;
}
.settings-panel.active {
display: block;
}
.panel-section {
margin-bottom: 28px;
}
.panel-section h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
color: var(--text-primary);
}
.panel-description {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 16px;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.section-header h3 {
margin-bottom: 0;
}
/* Mailbox management cards */
#mailbox-mgmt-cards {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
.mbx-card {
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: box-shadow var(--transition);
}
.mbx-card:hover {
box-shadow: var(--shadow-md);
}
.mbx-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: var(--bg-primary);
border-bottom: 1px solid var(--border);
}
.mbx-card-header-left {
display: flex;
flex-direction: column;
gap: 2px;
}
.mbx-card-name {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.mbx-card-account {
font-size: 12px;
color: var(--text-muted);
}
.mbx-card-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
font-size: 11px;
font-weight: 600;
border-radius: 999px;
background: var(--green-light);
color: #16a34a;
letter-spacing: 0.3px;
}
.mbx-card-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
padding: 16px 20px;
}
.mbx-field-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.mbx-field-group > label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
}
.mbx-field-group .form-input {
font-size: 13px;
padding: 7px 10px;
}
.mbx-sidebar-row {
display: flex;
align-items: center;
gap: 6px;
}
.mbx-sidebar-row input[type="checkbox"] {
margin: 0;
cursor: pointer;
}
.mbx-features-section {
padding: 12px 20px 4px;
border-top: 1px solid var(--border);
}
.mbx-features-label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 8px;
display: block;
}
.mbx-features-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mbx-feature-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all var(--transition);
user-select: none;
font-size: 13px;
background: var(--bg-white);
}
.mbx-feature-item:hover {
border-color: var(--blue);
background: var(--blue-light);
}
.mbx-feature-item input[type="checkbox"] {
margin: 0;
cursor: pointer;
accent-color: var(--blue);
}
.mbx-feature-item input[type="checkbox"]:checked ~ .mbx-feature-text {
color: var(--text-primary);
font-weight: 500;
}
.mbx-feature-icon {
font-size: 14px;
}
.mbx-feature-text {
font-size: 12px;
color: var(--text-secondary);
}
.mbx-card-footer {
display: flex;
justify-content: flex-end;
padding: 10px 20px 14px;
}
/* Forms */
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 4px;
}
.form-input, .form-select, .form-textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
font-family: var(--font);
transition: border-color var(--transition);
background: var(--bg-white);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.form-input-lg, .form-select-lg {
padding: 12px 16px;
font-size: 15px;
}
.form-textarea {
resize: vertical;
min-height: 80px;
font-family: var(--font-mono);
font-size: 12px;
}
/* Macro body is a contenteditable (so it can hold a pasted grid), not a
textarea. Override the .form-textarea mono/12px with the normal editor
font, give it scroll + a comfortable min-height, and a placeholder via
data-placeholder (mirrors .reply-editor:empty::before). */
.macro-body-editor {
min-height: 160px;
max-height: 360px;
overflow-y: auto;
overflow-x: auto;
resize: vertical;
font-family: var(--font);
font-size: 13px;
line-height: 1.5;
text-align: left;
cursor: text;
}
.macro-body-editor:empty::before {
content: attr(data-placeholder);
color: var(--text-muted);
pointer-events: none;
}
.macro-body-editor:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.form-help {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
.form-row {
display: flex;
gap: 16px;
}
.form-row .form-group {
flex: 1;
}
.form-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
}
.checkbox-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.checkbox-grid label {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
cursor: pointer;
}
/* File upload */
.file-upload-zone {
border: 2px dashed var(--border);
border-radius: var(--radius);
padding: 32px;
text-align: center;
color: var(--text-muted);
transition: all var(--transition);
cursor: pointer;
}
.file-upload-zone:hover,
.file-upload-zone.dragover {
border-color: var(--blue);
background: var(--blue-light);
}
.file-upload-zone p {
margin-top: 8px;
font-size: 13px;
}
.file-browse {
color: var(--blue);
cursor: pointer;
font-weight: 500;
}
.file-name {
display: block;
margin-top: 8px;
font-weight: 500;
color: var(--text-primary);
}
/* Rules list */
.rules-list, .macros-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.rule-item, .macro-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: box-shadow var(--transition);
}
.rule-item:hover, .macro-item:hover {
box-shadow: var(--shadow);
}
.rule-info, .macro-info {
display: flex;
flex-direction: column;
}
.rule-name, .macro-item-name {
font-weight: 500;
font-size: 14px;
}
.rule-sender, .macro-item-category {
font-size: 12px;
color: var(--text-muted);
}
.rule-actions, .macro-actions {
display: flex;
gap: 6px;
}
/* Signatures list */
.signatures-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.signature-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all var(--transition);
}
.signature-item:hover {
box-shadow: var(--shadow);
border-color: var(--blue);
}
.signature-item.active {
border-color: var(--blue);
background: var(--blue-light);
}
.signature-name {
font-weight: 500;
}
.signature-preview {
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
min-height: 100px;
}
/* Settings table */
.settings-table {
width: 100%;
border-collapse: collapse;
}
.settings-table th {
padding: 8px 12px;
text-align: left;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
border-bottom: 2px solid var(--border);
}
.settings-table td {
padding: 8px 12px;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.settings-table input {
width: 100%;
padding: 4px 8px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
}
/* Preview table */
.table-scroll {
overflow-x: auto;
}
.preview-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.preview-table th, .preview-table td {
padding: 6px 10px;
border: 1px solid var(--border);
white-space: nowrap;
}
.preview-table th {
background: var(--bg-primary);
font-weight: 600;
}
/* Sync status */
.sync-status {
font-size: 13px;
color: var(--text-muted);
}
.sync-status.syncing {
color: var(--blue);
}
.sync-status.success {
color: var(--green);
}
.sync-status.error {
color: var(--red);
}
.reprocess-status {
font-size: 13px;
color: var(--text-muted);
}
.reprocess-status.success {
color: var(--green);
}
.reprocess-status.error {
color: var(--red);
}
/* ==========================================================================
SETUP WIZARD
========================================================================== */
.setup-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
padding: 40px 24px;
}
.setup-card {
width: 100%;
max-width: 640px;
background: var(--bg-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 40px;
}
.setup-header {
text-align: center;
margin-bottom: 32px;
}
.setup-logo {
color: var(--blue);
margin-bottom: 16px;
}
.setup-header h1 {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
}
.setup-header p {
color: var(--text-muted);
}
/* Steps indicator */
.setup-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 32px;
}
.setup-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.step-number {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--gray-light);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
transition: all var(--transition);
}
.setup-step.active .step-number {
background: var(--blue);
color: white;
}
.setup-step.completed .step-number {
background: var(--green);
color: white;
}
.step-label {
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
}
.setup-step.active .step-label {
color: var(--blue);
}
.step-connector {
width: 48px;
height: 2px;
background: var(--gray-light);
margin: 0 4px;
margin-bottom: 18px;
}
/* Setup panels */
.setup-panel {
display: none;
}
.setup-panel.active {
display: block;
}
.setup-panel h2 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.setup-panel > p {
color: var(--text-muted);
margin-bottom: 20px;
font-size: 14px;
}
.setup-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
}
.quick-periods {
display: flex;
gap: 8px;
margin-top: 12px;
}
.quick-period.active {
background: var(--blue);
border-color: var(--blue);
color: white;
}
/* Progress */
.progress-container {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0;
}
.progress-bar {
flex: 1;
height: 8px;
background: var(--gray-light);
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--blue);
border-radius: 4px;
transition: width 0.3s ease;
}
.progress-text {
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
min-width: 40px;
}
.import-stats {
display: flex;
justify-content: center;
gap: 32px;
margin-top: 20px;
}
.import-stat {
text-align: center;
}
.import-stat-value {
display: block;
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
}
.import-stat-label {
font-size: 12px;
color: var(--text-muted);
}
/* ==========================================================================
MODAL
========================================================================== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal {
background: var(--bg-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 560px;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.modal-header h3 {
font-size: 16px;
font-weight: 600;
}
.modal-close {
font-size: 24px;
color: var(--text-muted);
line-height: 1;
}
.modal-body {
padding: 20px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--border);
}
/* Link-confirm modal — phishing defense (quick 260527-eaf) */
.link-confirm-url {
display: block;
background: var(--bg-secondary, #f3f4f6);
border: 1px solid var(--border, #e5e7eb);
border-radius: var(--radius-sm, 6px);
padding: 10px 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
color: var(--text-primary, #111827);
word-break: break-all;
max-height: 120px;
overflow-y: auto;
line-height: 1.5;
user-select: all;
}
.link-confirm-text-mismatch {
margin-top: 12px;
padding: 10px 12px;
background: rgba(245, 158, 11, 0.08);
border-left: 3px solid var(--amber, #f59e0b);
border-radius: var(--radius-sm, 6px);
font-size: 13px;
color: var(--text-primary, #111827);
}
.link-confirm-text-mismatch .link-confirm-visible-text {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
padding: 1px 4px;
background: rgba(245, 158, 11, 0.15);
border-radius: 3px;
word-break: break-all;
}
/* ==========================================================================
BUTTONS
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
font-family: var(--font);
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary {
background: var(--blue);
color: white;
border-color: var(--blue);
}
.btn-primary:hover:not(:disabled) {
background: var(--blue-dark);
border-color: var(--blue-dark);
}
.btn-success {
background: var(--green);
color: white;
border-color: var(--green);
}
.btn-success:hover:not(:disabled) {
background: #16a34a;
}
.btn-outline {
background: var(--bg-white);
color: var(--text-secondary);
border-color: var(--border);
}
.btn-outline:hover:not(:disabled) {
background: var(--bg-hover);
border-color: var(--text-muted);
}
.btn-danger {
color: var(--red);
border-color: var(--red-light);
}
.btn-danger:hover:not(:disabled) {
background: var(--red-light);
}
.btn-warning {
background: var(--amber);
color: white;
border-color: var(--amber);
}
.btn-warning:hover:not(:disabled) {
background: #d97706;
border-color: #d97706;
}
.btn-ghost {
background: none;
border: none;
color: var(--text-muted);
padding: 4px 8px;
}
.btn-ghost:hover {
color: var(--blue);
background: var(--blue-light);
}
.btn-icon {
padding: 6px;
background: none;
border: 1px solid transparent;
color: var(--text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition);
}
.btn-icon:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.btn-sm {
padding: 5px 10px;
font-size: 12px;
}
.btn-xs {
padding: 2px 6px;
font-size: 11px;
}
.btn-lg {
padding: 12px 24px;
font-size: 15px;
}
/* ==========================================================================
TOAST NOTIFICATIONS
========================================================================== */
.toast-container {
position: fixed;
top: 16px;
right: 16px;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 8px;
}
.toast {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: var(--radius);
background: var(--bg-white);
box-shadow: var(--shadow-lg);
font-size: 13px;
min-width: 280px;
animation: slideIn 0.3s ease;
border-left: 4px solid;
}
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.warning { border-left-color: var(--amber); }
.toast.info { border-left-color: var(--blue); }
.toast-close {
margin-left: auto;
cursor: pointer;
color: var(--text-muted);
font-size: 16px;
background: none;
border: none;
padding: 0 4px;
}
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
/* ==========================================================================
UTILITIES
========================================================================== */
.text-muted { color: var(--text-muted); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-amber { color: var(--amber); }
.text-blue { color: var(--blue); }
.hidden { display: none !important; }
/* ==========================================================================
SIDEBAR SECTION HEADER (with add button)
========================================================================== */
.sidebar-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 12px;
}
.btn-sidebar-add {
background: none;
border: none;
color: var(--sidebar-text);
cursor: pointer;
padding: 2px;
border-radius: 4px;
opacity: 0;
transition: all var(--transition);
}
.sidebar-section:hover .btn-sidebar-add {
opacity: 1;
}
.btn-sidebar-add:hover {
color: var(--blue);
background: rgba(59, 130, 246, 0.15);
}
.sidebar-inline-form {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 16px 8px;
}
.sidebar-inline-input {
flex: 1;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.08);
color: var(--sidebar-text-bright);
font-size: 12px;
font-family: var(--font);
}
.sidebar-inline-input:focus {
outline: none;
border-color: var(--blue);
}
.sidebar-color-picker {
width: 24px;
height: 24px;
border: none;
border-radius: 4px;
cursor: pointer;
padding: 0;
background: none;
}
.btn-sidebar-confirm,
.btn-sidebar-cancel {
background: none;
border: none;
cursor: pointer;
padding: 2px;
border-radius: 4px;
}
.btn-sidebar-confirm {
color: var(--green);
}
.btn-sidebar-cancel {
color: var(--red);
}
.btn-sidebar-confirm:hover {
background: rgba(34, 197, 94, 0.15);
}
.btn-sidebar-cancel:hover {
background: rgba(239, 68, 68, 0.15);
}
/* Badge purple for waiting_client */
.sidebar-badge.badge-purple {
background: rgba(168, 85, 247, 0.2);
color: var(--purple);
}
/* ==========================================================================
STATUS SELECT (in ticket topbar)
========================================================================== */
.status-dropdown-wrap {
position: relative;
}
.status-select {
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
background: var(--bg-white);
cursor: pointer;
font-family: var(--font);
}
.status-select:focus {
outline: none;
border-color: var(--blue);
}
/* ==========================================================================
SNOOZE DROPDOWN
========================================================================== */
.snooze-dropdown-wrap {
position: relative;
}
.snooze-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
min-width: 160px;
z-index: 100;
overflow: hidden;
}
.snooze-option {
display: block;
width: 100%;
padding: 8px 14px;
border: none;
background: none;
text-align: left;
font-size: 13px;
cursor: pointer;
font-family: var(--font);
transition: background var(--transition);
}
.snooze-option:hover {
background: var(--bg-hover);
}
.snooze-info {
font-size: 11px;
color: var(--amber);
font-weight: 500;
}
/* ==========================================================================
PARSING MODAL FIELDS
========================================================================== */
.parsing-field-row {
display: flex;
gap: 8px;
margin-bottom: 6px;
}
.parsing-field-name {
width: 140px;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
font-family: var(--font);
}
.parsing-field-pattern {
flex: 1;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13px;
font-family: var(--font-mono);
}
.parsing-field-name:focus,
.parsing-field-pattern:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
}
/* Status dot colors for new statuses */
.status-dot.paused {
background: var(--amber);
}
.status-dot.waiting_client {
background: var(--purple);
}
/* ==========================================================================
GROUPED CONVERSATION
========================================================================== */
.conversation-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--purple-light);
border-radius: var(--radius);
margin-bottom: 16px;
font-size: 13px;
}
.conversation-header-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--purple);
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.conversation-header-info {
display: flex;
flex-direction: column;
}
.conversation-header-name {
font-weight: 600;
color: var(--text-primary);
}
.conversation-header-count {
font-size: 12px;
color: var(--text-muted);
}
.ticket-group-separator {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0 12px;
position: relative;
}
.separator-line {
flex: 1;
height: 1px;
background: var(--border);
}
.separator-content {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 20px;
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
flex-shrink: 0;
}
.separator-content a {
font-weight: 600;
color: var(--blue);
text-decoration: none;
}
.separator-content a:hover {
text-decoration: underline;
}
.separator-subject {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.separator-date {
color: var(--text-muted);
}
.separator-status {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
}
.separator-status.status-open {
background: var(--green-light);
color: #15803d;
}
.separator-status.status-paused {
background: var(--amber-light);
color: #92400e;
}
.separator-status.status-waiting_client {
background: var(--purple-light);
color: var(--purple);
}
.separator-status.status-closed {
background: var(--gray-light);
color: var(--gray);
}
.separator-current {
border-color: var(--blue);
background: var(--blue-light);
color: var(--blue-dark);
font-weight: 600;
}
.message-bubble.related-ticket {
border-left: 3px solid var(--purple);
opacity: 0.85;
}
.message-bubble.related-ticket .message-header {
color: var(--purple);
}
/* ==========================================================================
COLLISION DETECTION BANNER
========================================================================== */
.collision-banner {
display: none;
align-items: center;
gap: 12px;
padding: 12px 20px;
background: linear-gradient(135deg, #fef3c7 0%, #fff7ed 100%);
border: 1px solid #fbbf24;
border-radius: 8px;
margin: 8px 16px;
color: #92400e;
font-size: 14px;
font-weight: 500;
box-shadow: 0 1px 4px rgba(245,158,11,0.12);
}
.collision-banner .collision-avatars {
display: flex;
gap: 0;
}
.collision-banner .collision-avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: #f59e0b;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
font-weight: 700;
border: 2px solid #fef3c7;
margin-left: -6px;
}
.collision-banner .collision-avatar:first-child {
margin-left: 0;
}
/* ==========================================================================
CONTACT HISTORY PAGE
========================================================================== */
.contact-page {
max-width: 900px;
margin: 0 auto;
padding: 24px;
}
.contact-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 24px;
box-shadow: var(--shadow-sm);
}
.contact-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--purple);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 600;
flex-shrink: 0;
}
.contact-info {
flex: 1;
min-width: 0;
}
.contact-name {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 4px 0;
}
.contact-meta {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: 13px;
color: var(--text-muted);
}
.contact-meta span::before {
margin-right: 4px;
}
.contact-email-display {
color: var(--blue);
}
.contact-ticket-count {
font-weight: 500;
color: var(--text-primary);
background: var(--bg-tertiary, #f0f0f0);
padding: 2px 8px;
border-radius: 10px;
}
/* Ticket cards */
.contact-ticket-card {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
margin-bottom: 12px;
transition: box-shadow 0.15s;
}
.contact-ticket-card:hover {
box-shadow: var(--shadow-sm);
}
.contact-card-header {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.contact-card-subject {
font-weight: 500;
color: var(--text-primary);
text-decoration: none;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact-card-subject:hover {
color: var(--blue);
text-decoration: underline;
}
.contact-status-badge {
font-size: 11px;
color: white;
padding: 2px 8px;
border-radius: 10px;
font-weight: 500;
flex-shrink: 0;
}
.contact-card-date {
font-size: 12px;
color: var(--text-muted);
flex-shrink: 0;
}
.contact-card-tags {
display: flex;
gap: 4px;
margin-top: 8px;
flex-wrap: wrap;
}
/* Message accordion */
.contact-msg-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 4px 12px;
border: 1px solid var(--border);
border-radius: 14px;
background: #fafafa;
font-size: 12px;
color: var(--text-muted);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.contact-msg-toggle::before {
content: '\25B6';
font-size: 8px;
transition: transform 0.2s;
}
.contact-msg-toggle.expanded::before {
transform: rotate(90deg);
}
.contact-msg-toggle:hover {
background: #f0f0f0;
color: var(--text-primary);
}
.contact-messages {
margin-top: 12px;
padding-left: 8px;
border-left: 2px solid #e5e7eb;
}
.contact-msg-bubble {
padding: 10px 14px;
margin-bottom: 8px;
border-radius: var(--radius);
font-size: 13px;
}
.contact-msg-bubble.inbound {
background: #f9fafb;
border: 1px solid #e5e7eb;
}
.contact-msg-bubble.outbound {
background: #eff6ff;
border: 1px solid #bfdbfe;
}
.contact-msg-bubble.note {
background: #fffbeb;
border: 1px solid #fde68a;
}
.contact-msg-header {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 6px;
font-size: 12px;
}
.contact-msg-sender {
font-weight: 600;
color: var(--text-primary);
}
.contact-msg-dir {
color: var(--text-muted);
font-style: italic;
}
.contact-msg-time {
color: var(--text-muted);
margin-left: auto;
}
.contact-msg-body p {
margin: 0 0 4px 0;
line-height: 1.5;
color: var(--text-primary);
}
/* Rendered HTML body (via DOMParser) inside the contact history accordion.
Inherit the bubble's colors so inbound/outbound/note tinting stays
consistent, and tame Outlook's generous default margins. */
.contact-msg-html {
color: var(--text-primary);
font-size: 13px;
line-height: 1.5;
word-wrap: break-word;
}
.contact-msg-html p { margin: 0 0 0.5em 0; color: inherit; }
.contact-msg-html p:empty { margin: 0; min-height: 0.4em; }
.contact-msg-html div { margin: 0; }
.contact-msg-html img { max-width: 100%; height: auto; }
.contact-msg-html table {
border-collapse: collapse;
max-width: 100% !important;
table-layout: fixed;
}
.contact-msg-html td, .contact-msg-html th { word-break: break-word; }
.contact-msg-html a { color: var(--primary, #3b82f6); }
body.dark-theme .contact-msg-html { color: var(--text-primary); }
.contact-msg-spacer { height: 0.5em; }
.contact-empty {
text-align: center;
color: var(--text-muted);
padding: 40px;
font-size: 14px;
}
/* ==========================================================================
DRAG & DROP
========================================================================== */
tr.dragging {
opacity: 0.4;
background: #e0e7ff !important;
}
tr[draggable="true"] {
cursor: default;
}
tr[draggable="true"]:active {
cursor: default;
}
body.is-dragging,
body.is-dragging * {
cursor: grabbing !important;
}
.sidebar-link.drag-over,
li.drag-over .sidebar-link {
background: var(--blue) !important;
color: white !important;
border-radius: var(--radius);
transition: background 0.15s;
}
/* ==========================================================================
CLICKABLE TAGS
========================================================================== */
.tag-badge.tag-clickable {
cursor: pointer;
transition: opacity 0.15s, box-shadow 0.15s;
}
.tag-badge.tag-clickable:hover {
opacity: 0.85;
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
/* ==========================================================================
FILTERS BAR — Filtres button + active chip row + popover panel
(replaces the standalone ACTIVE FILTER BAR; chip row now lives inline next
to the Filtres trigger and shares the bar background.)
========================================================================== */
.filters-bar {
position: relative;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-light);
}
.filters-bar-inline {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
flex-wrap: wrap;
}
/* Hide the whole bar when no filters AND no panel open. We leave the
button always visible — handled in JS by only hiding on empty state. */
.filters-bar.is-empty .active-filters { display: none; }
/* Filtres trigger button */
.btn-filtres {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bg-white);
color: var(--text-primary);
border: 1px solid var(--border-light);
border-radius: 20px;
padding: 5px 12px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
line-height: 1.4;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-filtres:hover {
background: var(--bg-hover);
border-color: var(--primary);
}
.btn-filtres[aria-expanded="true"] {
background: var(--primary-light);
border-color: var(--primary);
color: var(--primary);
}
.btn-filtres svg { opacity: 0.75; }
.btn-filtres-badge {
background: var(--primary);
color: white;
border-radius: 10px;
padding: 1px 7px;
font-size: 11px;
font-weight: 600;
min-width: 18px;
text-align: center;
line-height: 1.3;
}
/* Active filter chip container — inline, no own background (filters-bar handles it) */
.active-filters {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
/* Chip — uses --blue so it re-tints per theme (violet/emerald/rose/etc.) */
.filter-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: var(--blue);
color: white;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.filter-chip-body {
cursor: pointer;
transition: opacity 0.12s;
}
.filter-chip-body:hover { opacity: 0.85; }
.filter-chip-remove {
cursor: pointer;
margin-left: 4px;
font-size: 14px;
opacity: 0.8;
line-height: 1;
padding: 0 2px;
}
.filter-chip-remove:hover { opacity: 1; }
/* Clear-all action */
.active-filters-clear {
color: var(--text-muted);
font-size: 12px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: background 0.15s, color 0.15s;
background: transparent;
border: none;
font-family: inherit;
}
.active-filters-clear:hover {
background: var(--bg-hover);
color: var(--danger);
}
/* ==========================================================================
FILTER PANEL (popover anchored to .filters-bar, variant B from sketch 004)
========================================================================== */
.filter-panel {
position: absolute;
top: calc(100% + 4px);
left: 16px;
z-index: 100;
width: 400px;
max-width: calc(100vw - 32px);
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 12px;
box-shadow: var(--shadow-md);
overflow: hidden;
color: var(--text-primary);
}
.filter-panel[hidden] { display: none; }
/* Tabs row */
.filter-panel-tabs {
display: flex;
gap: 0;
padding: 4px 6px 0 6px;
border-bottom: 1px solid var(--border-light);
background: var(--bg-primary);
}
.filter-panel-tab {
background: transparent;
border: none;
padding: 8px 14px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
color: var(--text-secondary);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color 0.15s, border-color 0.15s;
}
.filter-panel-tab[hidden] { display: none; }
.filter-panel-tab:hover { color: var(--text-primary); }
.filter-panel-tab.is-active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.filter-panel-tab-count {
background: var(--primary-light);
color: var(--primary);
border-radius: 8px;
padding: 0 5px;
font-size: 10px;
font-weight: 600;
min-width: 14px;
text-align: center;
line-height: 1.4;
}
.filter-panel-tab-count[hidden] { display: none; }
/* Section body */
.filter-panel-body {
min-height: 160px;
max-height: 360px;
overflow-y: auto;
}
.filter-panel-section {
padding: 12px 14px;
}
.filter-panel-section[hidden] { display: none; }
.filter-panel-section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.filter-panel-section-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
color: var(--text-muted);
}
.filter-panel-actions { display: flex; gap: 4px; }
.filter-panel-mini {
background: transparent;
border: none;
color: var(--primary);
font-size: 11px;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
font-weight: 500;
font-family: inherit;
}
.filter-panel-mini:hover { background: var(--primary-light); }
/* Tag search input */
.filter-panel-search {
width: 100%;
box-sizing: border-box;
background: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
outline: none;
margin-bottom: 6px;
font-family: inherit;
}
.filter-panel-search:focus { border-color: var(--primary); }
/* Checkbox list */
.filter-panel-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.filter-panel-list-scroll {
max-height: 180px;
overflow-y: auto;
margin-right: -4px;
padding-right: 4px;
}
.filter-panel-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 6px;
border-radius: 5px;
cursor: pointer;
font-size: 13px;
color: var(--text-primary);
transition: background 0.1s;
}
.filter-panel-row:hover { background: var(--bg-hover); }
.filter-panel-row input[type="checkbox"] {
margin: 0;
accent-color: var(--primary);
width: 14px;
height: 14px;
cursor: pointer;
}
.filter-panel-row[hidden] { display: none; }
.filter-panel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.filter-panel-dot.s-open { background: #22c55e; }
.filter-panel-dot.s-paused { background: #f59e0b; }
.filter-panel-dot.s-waiting { background: #3b82f6; }
.filter-panel-dot.s-closed { background: #94a3b8; }
.filter-panel-empty {
padding: 12px 4px;
font-size: 12px;
color: var(--text-muted);
font-style: italic;
text-align: center;
}
/* Footer */
.filter-panel-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
background: var(--bg-primary);
border-top: 1px solid var(--border-light);
font-size: 11px;
}
.filter-panel-footer-info { color: var(--text-muted); }
.filter-panel-close {
background: var(--bg-white);
border: 1px solid var(--border-light);
color: var(--text-primary);
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
}
.filter-panel-close:hover { background: var(--bg-hover); }
/* Responsive adjustments */
@media (max-width: 1200px) {
.kpi-cards {
grid-template-columns: repeat(2, 1fr);
}
.charts-row {
grid-template-columns: 1fr;
}
.context-panel {
width: 280px;
min-width: 280px;
}
}
@media (max-width: 900px) {
.sidebar {
width: 60px;
min-width: 60px;
}
.sidebar .logo-text,
.sidebar .sidebar-section-title,
.sidebar-link span,
.sidebar-badge,
.sidebar .user-name {
display: none;
}
.sidebar-link {
justify-content: center;
padding: 10px;
}
.ticket-detail-layout {
flex-direction: column;
overflow: hidden; /* Constrain children in column mode */
}
.ticket-conversation {
flex: 1 1 0%;
min-height: 0; /* Allow shrinking below content size */
overflow: hidden; /* Constrain message-thread */
}
.context-panel {
width: 100%;
min-width: 0;
max-height: 40vh; /* Cap panel height in mobile stacked layout */
border-right: none;
border-top: 1px solid var(--border);
}
}
/* ==========================================================================
LAN SHARING
========================================================================== */
.lan-share-card {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 8px;
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.lan-ip-info {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.lan-label { font-size: 0.9rem; color: #374151; }
.lan-ip {
font-family: monospace;
font-size: 1.1rem;
font-weight: 600;
color: #059669;
background: #d1fae5;
padding: 2px 8px;
border-radius: 4px;
}
.lan-hostname {
font-size: 0.8rem;
color: #6b7280;
}
.lan-url-row {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.lan-url-input {
flex: 1;
font-family: monospace;
font-size: 0.95rem;
}
.lan-security-row { margin-top: 0.75rem; }
.lan-security-hint {
font-size: 0.8rem;
color: #6b7280;
margin: 0.25rem 0 0 1.75rem;
}
.settings-divider {
border: none;
border-top: 1px solid #e5e7eb;
margin: 1.5rem 0;
}
.lan-share-loading {
text-align: center;
padding: 1rem;
color: #6b7280;
}
.lan-share-error {
text-align: center;
padding: 1rem;
color: #dc2626;
}
/* ==========================================================================
PUBLIC TUNNEL / SHARING
========================================================================== */
.tunnel-status-card {
display: flex;
align-items: center;
padding: 12px 16px;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 1.5rem;
}
.tunnel-status-indicator {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
}
.tunnel-status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.tunnel-status-dot.dot-green {
background: var(--green);
box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
animation: tunnel-pulse 2s ease-in-out infinite;
}
.tunnel-status-dot.dot-red {
background: var(--red);
}
.tunnel-status-dot.dot-gray {
background: var(--gray-light);
}
.tunnel-status-dot.dot-amber {
background: var(--amber);
animation: tunnel-pulse 1s ease-in-out infinite;
}
@keyframes tunnel-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.tunnel-start-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
font-size: 1rem;
font-weight: 600;
}
.tunnel-help-text {
margin-top: 0.75rem;
font-size: 0.85rem;
color: var(--text-muted);
}
/* Loading spinner */
.tunnel-loading {
display: flex;
align-items: center;
gap: 16px;
padding: 2rem;
justify-content: center;
font-size: 1rem;
color: var(--text-secondary);
}
.tunnel-spinner {
width: 28px;
height: 28px;
border: 3px solid var(--gray-light);
border-top: 3px solid var(--blue);
border-radius: 50%;
animation: tunnel-spin 0.8s linear infinite;
}
@keyframes tunnel-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* URL card (when running) */
.tunnel-url-card {
background: var(--bg-white);
border: 2px solid var(--green);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 1rem;
}
.tunnel-url-label {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 0.5rem;
display: block;
}
.tunnel-url-row {
display: flex;
gap: 8px;
margin-bottom: 1.5rem;
}
.tunnel-url-input {
flex: 1;
font-size: 0.95rem;
font-weight: 500;
color: var(--blue-dark);
background: #f0f7ff;
border: 1px solid var(--blue-light);
}
.tunnel-url-input:focus {
outline: none;
border-color: var(--blue);
}
/* QR section */
.tunnel-qr-section {
text-align: center;
margin-bottom: 1.5rem;
padding: 1rem 0;
}
.tunnel-qr-label {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 1rem;
}
.tunnel-qr-container {
display: inline-block;
padding: 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.tunnel-qr-container img,
.tunnel-qr-container canvas {
display: block;
}
/* Action buttons row */
.tunnel-actions-row {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.tunnel-actions-row .btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Info box */
.tunnel-info-box {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: var(--radius);
padding: 1rem;
font-size: 0.85rem;
color: #166534;
}
.tunnel-info-box p {
margin: 0;
}
.tunnel-info-box p + p {
margin-top: 0.5rem;
}
/* ---- Folder edit row (ticket detail context panel) ---- */
.folder-edit-row {
display: flex;
align-items: center;
gap: 4px;
}
.folder-edit-row .folder-select {
flex: 1;
}
/* ---- Folder color dot (used in sidebar + Settings → Dossiers table) ---- */
.folder-color-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
/* ---- Tag input compact ---- */
.ticket-tags-inline .tag-input {
width: 60px;
padding: 2px 6px;
font-size: 11px;
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
background: transparent;
}
.ticket-tags-inline .tag-input:focus {
width: 120px;
border-style: solid;
border-color: var(--primary);
outline: none;
}
/* ==========================================================================
Mailbox Selector (sidebar)
========================================================================== */
.mailbox-selector-section {
padding: 8px 12px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mailbox-current {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
color: var(--sidebar-text-bright);
transition: background 0.15s;
}
.mailbox-current:hover {
background: var(--sidebar-hover);
}
.mailbox-name {
flex: 1;
font-size: 14px;
font-weight: 600;
}
.mailbox-chevron {
opacity: 0.5;
transition: transform 0.2s;
}
.mailbox-dropdown {
margin-top: 4px;
background: #273548;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.mailbox-list {
list-style: none;
padding: 4px 0;
margin: 0;
}
.mailbox-item {
padding: 8px 14px;
color: var(--sidebar-text);
cursor: pointer;
font-size: 13px;
transition: background 0.1s, color 0.1s;
}
.mailbox-item:hover {
background: var(--sidebar-hover);
color: var(--sidebar-text-bright);
}
.mailbox-item.active {
color: var(--sidebar-active);
font-weight: 600;
}
.mailbox-add-btn {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 8px 14px;
border: none;
border-top: 1px solid rgba(255,255,255,0.06);
background: none;
color: var(--sidebar-text);
font-size: 12px;
cursor: pointer;
transition: background 0.1s, color 0.1s;
}
.mailbox-add-btn:hover {
background: var(--sidebar-hover);
color: var(--sidebar-text-bright);
}
/* ==========================================================================
System Notices (legacy — kept for backward compatibility)
========================================================================== */
.system-notice {
text-align: center;
padding: 4px 12px;
margin: 4px auto;
max-width: 80%;
color: var(--text-muted);
font-style: italic;
font-size: 11px;
background: var(--bg-hover);
border-radius: 4px;
}
.system-notice-time {
font-size: 11px;
opacity: 0.7;
}
/* ==========================================================================
Ticket ID column + badge
========================================================================== */
.col-id {
width: 70px;
white-space: nowrap;
}
.ticket-ref {
font-weight: 600;
color: var(--blue);
font-size: 13px;
font-family: monospace;
}
.ticket-id-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--blue-light);
color: var(--blue-dark);
font-weight: 700;
font-size: 13px;
font-family: monospace;
border-radius: 4px;
margin-right: 8px;
flex-shrink: 0;
}
/* ==========================================================================
Merge Modal
========================================================================== */
.merge-results {
margin-top: 12px;
max-height: 300px;
overflow-y: auto;
}
.merge-result-item {
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 6px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.merge-result-item:hover {
background: var(--blue-light);
border-color: var(--blue);
}
.merge-ref {
font-weight: 600;
color: var(--blue);
font-size: 13px;
}
.merge-subject {
color: var(--text-primary);
font-size: 13px;
}
.merge-sender {
color: var(--text-muted);
font-size: 12px;
}
.merge-no-result {
text-align: center;
padding: 16px;
color: var(--text-muted);
font-size: 13px;
}
/* ==========================================================================
AUTH - Logout button & sidebar user
========================================================================== */
.btn-logout {
color: #94a3b8;
padding: 4px;
border-radius: 4px;
margin-left: auto;
transition: color 0.2s;
/* Reset browser defaults so it looks like the previous */
background: transparent;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font: inherit;
line-height: 0;
}
.btn-logout:hover { color: #f87171; }
.btn-logout:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#logout-form { margin-left: auto; }
.sidebar-user { display: flex; align-items: center; gap: 8px; }
/* ==========================================================================
ATTACHMENTS IN MESSAGES
========================================================================== */
.message-attachments {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.attachment-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: #f8fafc;
border: 1px solid var(--border);
border-radius: 16px;
font-size: 12px;
color: var(--text-primary);
text-decoration: none;
transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
max-width: 260px;
}
.attachment-chip:hover {
background: #eff6ff;
border-color: var(--blue);
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
color: var(--blue-dark);
}
.attachment-icon {
flex-shrink: 0;
display: flex;
align-items: center;
color: var(--text-muted);
}
.attachment-chip:hover .attachment-icon {
color: var(--blue);
}
.attachment-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
font-weight: 500;
}
.attachment-size {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.attachment-previewable {
cursor: zoom-in;
}
.attachment-previewable:hover {
border-color: var(--blue);
background: #eff6ff;
}
.attachment-preview-badge {
flex-shrink: 0;
display: flex;
align-items: center;
color: var(--blue);
opacity: 0;
transition: opacity 0.15s;
margin-left: -2px;
}
.attachment-chip:hover .attachment-preview-badge {
opacity: 1;
}
/* ==========================================================================
ATTACHMENT PREVIEW LIGHTBOX
========================================================================== */
#attachment-preview-overlay {
position: fixed;
inset: 0;
/* z-index 100000 ensures the lightbox is above any in-app overlay,
including the DEV environment banner (z-index 99999). */
z-index: 100000;
display: none;
opacity: 0;
transition: opacity 0.2s ease;
}
#attachment-preview-overlay.ap-visible {
display: block;
opacity: 1;
}
.ap-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
/* Purely decorative — must not intercept pointer events.
Click-to-close is handled at the overlay level in tickets.js. */
pointer-events: none;
}
.ap-container {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
z-index: 1;
}
.ap-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: rgba(0,0,0,0.4);
flex-shrink: 0;
}
.ap-actions {
display: flex;
gap: 8px;
}
.ap-btn {
background: rgba(255,255,255,0.15);
border: none;
border-radius: 8px;
padding: 8px;
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.ap-btn:hover {
background: rgba(255,255,255,0.3);
}
.ap-body {
flex: 1;
display: flex;
/* align-items: stretch (default) — was 'center' which caused tall PDF
content to overflow EQUALLY above and below the body. The upper
overflow sat invisibly over the modal header, intercepting all clicks
on the close/download/search/newtab buttons (live hit-test confirmed
elementsFromPoint at button position returned .ap-content).
overflow: hidden defensively clips any remaining overflow. */
align-items: stretch;
min-height: 0;
position: relative;
overflow: hidden;
}
.ap-content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
min-height: 0;
min-width: 0;
overflow: auto;
}
.ap-image {
max-width: 100%;
max-height: calc(100vh - 140px);
object-fit: contain;
border-radius: 4px;
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
cursor: zoom-in;
transition: transform 0.25s ease;
}
.ap-image-zoomed {
max-width: none;
max-height: none;
cursor: zoom-out;
transform: scale(1);
}
.ap-pdf {
width: 90%;
height: calc(100vh - 140px);
border: none;
border-radius: 6px;
background: #fff;
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.ap-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 20px 12px;
background: rgba(0,0,0,0.4);
flex-shrink: 0;
flex-wrap: wrap;
gap: 8px;
}
.ap-info {
color: rgba(255,255,255,0.7);
font-size: 12px;
}
.ap-counter {
color: rgba(255,255,255,0.7);
font-size: 12px;
font-weight: 600;
}
/* ==========================================================================
PROFILE PAGE
========================================================================== */
.profile-page {
max-width: 900px;
margin: 0 auto;
padding: 24px;
}
.profile-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
background: white;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 24px;
box-shadow: var(--shadow-sm);
}
.profile-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--blue);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 600;
flex-shrink: 0;
}
/* ==========================================================================
SIGNATURE CARDS
========================================================================== */
.sig-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.sig-card {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px;
transition: border-color 0.15s;
}
.sig-card:hover {
border-color: var(--blue);
}
.sig-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.sig-card-name {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 13px;
}
.sig-card-actions {
display: flex;
gap: 6px;
}
.sig-badge-default {
font-size: 10px;
background: var(--blue-light);
color: var(--blue-dark);
padding: 2px 6px;
border-radius: 10px;
font-weight: 500;
}
.sig-preview-frame {
width: 100%;
border: none;
height: 80px;
pointer-events: none;
border-top: 1px solid var(--border);
padding-top: 8px;
}
/* ==========================================================================
MAILBOX SIGNATURES ADMIN (Settings)
========================================================================== */
.mailbox-sig-section {
margin-bottom: 24px;
}
.mailbox-sig-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.mailbox-sig-toolbar select {
min-width: 200px;
}
.mailbox-sig-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.mailbox-sig-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: #f9fafb;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
transition: border-color 0.15s;
}
.mailbox-sig-card:hover {
border-color: var(--blue);
}
.mailbox-sig-info {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.mailbox-sig-info strong {
font-weight: 600;
}
.mailbox-sig-actions {
display: flex;
gap: 6px;
}
/* ==========================================================================
DRAG & DROP — Tag onto Ticket Row
========================================================================== */
.ticket-table tr.drag-over {
background: rgba(59, 130, 246, 0.08) !important;
outline: 2px dashed var(--blue);
outline-offset: -2px;
}
.sidebar-tag[draggable="true"] {
cursor: default;
}
.sidebar-tag[draggable="true"]:active {
cursor: default;
}
/* ==========================================================================
SPINNING ANIMATION (Refresh button)
========================================================================== */
.btn-icon.spinning svg,
.spinning svg {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ---- Toggle Switch ---- */
.toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
cursor: pointer;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
inset: 0;
background: #475569;
border-radius: 24px;
transition: background 0.25s;
}
.toggle-slider::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
left: 3px;
bottom: 3px;
background: #fff;
border-radius: 50%;
transition: transform 0.25s;
}
.toggle-switch input:checked + .toggle-slider {
background: #2563eb;
}
.toggle-switch input:checked + .toggle-slider::before {
transform: translateX(20px);
}
/* --- Message iframe lazy-load placeholder --- */
.message-iframe-placeholder {
background: var(--bg-secondary, #f8fafc);
border-radius: 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.message-iframe-placeholder:not([data-loaded])::before {
content: 'Chargement...';
color: var(--text-muted, #94a3b8);
font-size: 12px;
}
/* ---- Undo-Send Banner ---- */
/* Gmail-style always-dark toast: text is white on a dark surface in
BOTH themes so it stays highly visible. Using var(--bg-tertiary)
before resolved to a pale grey in light mode, producing white-on-
white text. The palette below is hard-coded to a neutral slate so
it reads consistently regardless of theme. */
.undo-send-banner {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 3100;
display: flex;
align-items: center;
gap: 16px;
padding: 12px 20px;
background: #1f2937;
color: #ffffff;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,.25);
font-size: 13.5px;
font-weight: 500;
min-width: 340px;
animation: undo-slide-in .3s ease-out;
}
body.dark-theme .undo-send-banner {
background: #111827;
box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
@keyframes undo-slide-in {
from { transform: translateX(-50%) translateY(40px); opacity: 0; }
to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.undo-send-banner .undo-label { flex: 1; white-space: nowrap; }
.undo-send-banner .undo-timer {
font-variant-numeric: tabular-nums;
min-width: 32px;
text-align: right;
color: rgba(255,255,255,.7);
}
.undo-send-banner .undo-cancel-btn {
background: none;
border: 1px solid rgba(255,255,255,.4);
color: #fff;
padding: 5px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.undo-send-banner .undo-cancel-btn:hover {
background: rgba(255,255,255,.15);
border-color: rgba(255,255,255,.7);
}
.undo-send-banner .undo-progress {
position: absolute;
bottom: 0; left: 0;
height: 3px;
background: var(--primary, #2563eb);
border-radius: 0 0 10px 10px;
transition: width linear;
}
/* Pending message in thread — 60% opacity + spinner */
.msg-pending-send {
opacity: 0.6;
position: relative;
pointer-events: none;
}
.msg-pending-send::after {
content: '';
position: absolute;
top: 12px;
right: 12px;
width: 20px;
height: 20px;
border: 2.5px solid rgba(0,0,0,.15);
border-top-color: var(--primary, #2563eb);
border-radius: 50%;
animation: undo-spin .7s linear infinite;
}
@keyframes undo-spin { to { transform: rotate(360deg); } }
/* ---- Quick Actions Bar ---- */
.quick-actions-bar {
display: none;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--bg-secondary, #f8fafc);
border-bottom: 1px solid var(--border-color, #e2e8f0);
flex-wrap: wrap;
}
.qa-buttons {
display: flex;
gap: 6px;
flex-wrap: wrap;
flex: 1;
}
.qa-action-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
border: 1.5px solid;
border-radius: 6px;
background: transparent;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.qa-action-btn:hover {
filter: brightness(0.85);
background: rgba(37, 99, 235, 0.06);
}
.qa-action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.qa-action-btn svg {
flex-shrink: 0;
}
/* Accounting status section */
.qa-accounting {
display: flex;
align-items: center;
gap: 6px;
position: relative;
margin-left: auto;
}
.qa-accounting-label {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary, #64748b);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.qa-accounting-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.15s;
}
.qa-accounting-badge:hover {
filter: brightness(0.9);
transform: scale(1.04);
}
.qa-status-pending {
background: #fef3c7;
color: #92400e;
border: 1px solid #f59e0b;
}
.qa-status-done {
background: #d1fae5;
color: #065f46;
border: 1px solid #10b981;
}
.qa-status-none {
background: var(--bg-secondary, #f1f5f9);
color: var(--text-secondary, #64748b);
border: 1px solid var(--border-color, #e2e8f0);
}
.qa-accounting-dropdown {
position: absolute;
top: 100%;
right: 0;
z-index: 100;
background: var(--bg-primary, #fff);
border: 1px solid var(--border-color, #e2e8f0);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
min-width: 130px;
margin-top: 4px;
overflow: hidden;
}
.qa-accounting-dropdown button {
display: block;
width: 100%;
padding: 8px 12px;
border: none;
background: none;
text-align: left;
cursor: pointer;
font-size: 13px;
color: var(--text-primary, #1e293b);
}
.qa-accounting-dropdown button:hover {
background: var(--bg-secondary, #f1f5f9);
}
/* ---- Sidebar Folder Drag Reorder ---- */
#sidebar-folders li[draggable="true"] {
cursor: default;
}
#sidebar-folders li[draggable="true"]:active {
cursor: default;
}
#sidebar-folders li.dragging {
opacity: 0.4;
}
#sidebar-folders li.drag-over {
border-top: 2px solid var(--blue, #2563eb);
}
/* ---- Sidebar Mailbox Sub-views ---- */
#sidebar-mailbox-views {
padding-top: 2px;
}
#sidebar-mailbox-views li {
list-style: none;
}
.sidebar-mailbox-view {
padding-left: 8px;
}
.sidebar-mailbox-view .sidebar-icon {
opacity: 0.6;
}
/* --- Sync progress widget --- */
.sync-widget {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
background: var(--bg-primary, #fff);
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: 9999;
overflow: hidden;
font-size: 13px;
transition: opacity 0.3s;
}
.sync-widget-header {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
background: var(--bg-secondary, #f9fafb);
border-bottom: 1px solid var(--border-color, #e5e7eb);
font-weight: 600;
font-size: 12px;
color: var(--text-primary, #1a1a1a);
}
.sync-widget-header svg {
animation: sync-spin 1.5s linear infinite;
flex-shrink: 0;
}
@keyframes sync-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.sync-widget-close {
margin-left: auto;
background: none;
border: none;
font-size: 16px;
cursor: pointer;
color: var(--text-secondary, #6b7280);
padding: 0 2px;
line-height: 1;
}
.sync-widget-close:hover { color: var(--danger, #ef4444); }
.sync-widget-body {
padding: 10px 12px;
}
.sync-widget-label {
font-size: 12px;
color: var(--text-secondary, #6b7280);
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sync-widget-bar-bg {
height: 6px;
background: var(--bg-secondary, #e5e7eb);
border-radius: 3px;
overflow: hidden;
}
.sync-widget-bar {
height: 100%;
background: var(--primary, #2563eb);
border-radius: 3px;
transition: width 0.3s ease;
min-width: 0;
}
.sync-widget-stats {
margin-top: 6px;
font-size: 11px;
color: var(--text-secondary, #6b7280);
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.sync-widget-stats span {
display: inline-flex;
align-items: center;
gap: 3px;
}
.sync-widget[data-phase="done"] .sync-widget-header svg {
animation: none;
}
.sync-widget[data-phase="error"] .sync-widget-header svg {
animation: none;
stroke: var(--danger, #ef4444);
}
.sync-widget[data-phase="error"] .sync-widget-bar {
background: var(--danger, #ef4444);
}
.sync-widget[data-phase="done"] .sync-widget-bar {
background: var(--success, #10b981);
}
/* ---- Compose Modal ---- */
.compose-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.compose-modal {
background: var(--bg-white, #fff);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
width: 860px;
max-width: 95vw;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.compose-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border, #e5e7eb);
}
.compose-title {
font-size: 16px;
font-weight: 600;
margin: 0;
}
.compose-close {
background: none;
border: none;
font-size: 22px;
cursor: pointer;
color: var(--text-muted, #9ca3af);
line-height: 1;
padding: 0 4px;
}
.compose-close:hover {
color: var(--text-primary, #111827);
}
.compose-body {
padding: 16px 20px;
overflow-y: auto;
flex: 1;
}
.compose-field {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.compose-label {
width: 50px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary, #6b7280);
flex-shrink: 0;
text-align: right;
}
.compose-input {
flex: 1;
font-size: 13px;
}
.compose-cc-toggles {
display: flex;
gap: 8px;
margin-bottom: 10px;
padding-left: 58px;
}
.btn-text {
background: none;
border: none;
color: var(--blue, #3b82f6);
font-size: 12px;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
}
.btn-text:hover {
background: var(--blue-light, #eff6ff);
}
.compose-editor-field {
flex-direction: column;
align-items: stretch;
}
.compose-toolbar {
display: flex;
gap: 2px;
padding: 4px 6px;
border: 1px solid var(--border, #e5e7eb);
border-bottom: none;
border-radius: 8px 8px 0 0;
background: var(--bg-subtle, #f9fafb);
}
.toolbar-btn {
background: none;
border: none;
padding: 4px 8px;
cursor: pointer;
border-radius: 4px;
font-size: 13px;
color: var(--text-secondary, #6b7280);
}
.toolbar-btn:hover {
background: var(--bg-hover, #f3f4f6);
color: var(--text-primary, #111827);
}
.toolbar-sep {
width: 1px;
background: var(--border, #e5e7eb);
margin: 2px 4px;
}
.compose-editor {
min-height: 200px;
max-height: 350px;
overflow-y: auto;
overflow-x: auto; /* Phase 06 bug fix: wide grid-editor tables scroll
horizontally inside the editor instead of overflowing
past the composer edge. */
padding: 12px;
border: 1px solid var(--border, #e5e7eb);
border-radius: 0 0 8px 8px;
font-size: 13px;
line-height: 1.6;
outline: none;
}
.compose-editor:focus {
border-color: var(--blue, #3b82f6);
box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.compose-footer {
display: flex;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--border, #e5e7eb);
justify-content: flex-start;
}
.compose-footer .btn {
font-size: 13px;
}
/* Compose button in inbox header */
.btn-compose {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
padding: 6px 14px;
border-radius: 8px;
white-space: nowrap;
}
.btn-compose svg {
flex-shrink: 0;
}
/* ---- Teams ---- */
.teams-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 1200px) { .teams-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .teams-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .teams-list { grid-template-columns: 1fr; } }
.team-card {
background: var(--bg-secondary, #f9fafb);
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 10px;
padding: 14px;
transition: box-shadow .15s, border-color .15s;
}
.team-card:hover {
border-color: var(--blue, #3b82f6);
box-shadow: 0 2px 8px rgba(59,130,246,0.10);
}
.team-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.team-card-name { font-weight: 600; font-size: 15px; }
.team-card-desc { display: block; font-size: 13px; color: var(--text-secondary, #6b7280); margin-bottom: 4px; }
.team-card-stats { display: block; font-size: 12px; color: var(--text-secondary, #6b7280); }
.team-card-actions { display: flex; gap: 6px; }
.team-card-members { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.team-member-badge {
width: 28px; height: 28px; border-radius: 50%;
background: var(--primary, #2563eb); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600;
}
.team-member-row {
display: flex; align-items: center; gap: 8px; padding: 6px 0;
border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.team-member-row:last-child { border-bottom: none; }
.team-member-name { flex: 1; font-size: 14px; }
.team-members-modal-list { max-height: 200px; overflow-y: auto; }
.team-add-member { display: flex; gap: 8px; align-items: center; }
.team-add-member select { flex: 1; }
/* Sidebar team groups */
.sidebar-team-group-header {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 12px; margin: 2px 0; cursor: default;
font-size: 12px; font-weight: 600; text-transform: uppercase;
color: var(--text-secondary, #6b7280); letter-spacing: 0.3px;
}
.sidebar-team-group-header.drag-over { background: rgba(37,99,235,0.08); }
.sidebar-team-group-name { flex: 1; font-size: 13px; font-weight: 600; }
/* Badge for "recipient" teams (teams this user's team has delegated work to) */
.sidebar-team-recipient-badge {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 3px;
background: rgba(249, 115, 22, 0.12);
color: #d97706;
margin-left: 4px;
flex-shrink: 0;
}
body.dark-theme .sidebar-team-recipient-badge {
background: rgba(249, 115, 22, 0.2);
color: #fbbf24;
}
.empty-state-small { text-align: center; padding: 24px; color: var(--text-secondary, #6b7280); }
/* ---- Collapsible sidebar sections ---- */
.sidebar-collapse-toggle {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 6px;
}
.sidebar-chevron {
transition: transform 0.2s ease;
flex-shrink: 0;
}
.sidebar-collapsible.collapsed .sidebar-chevron {
transform: rotate(-90deg);
}
.sidebar-collapse-body {
transition: none;
}
.sidebar-collapsible.collapsed .sidebar-collapse-body {
display: none;
}
/* ---- Team sub-views in sidebar ---- */
.sidebar-team-block {
margin-bottom: 4px;
}
.sidebar-team-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 12px 5px 16px;
cursor: pointer;
user-select: none;
font-size: 12px;
font-weight: 600;
color: var(--sidebar-text);
border-left: 3px solid var(--team-color, #6b7280);
transition: background 0.15s;
}
.sidebar-team-block-header:hover {
background: var(--sidebar-hover, rgba(0,0,0,0.04));
}
.sidebar-team-block-header .team-chevron {
width: 10px;
height: 10px;
transition: transform 0.2s ease;
color: var(--text-secondary, #6b7280);
flex-shrink: 0;
}
.sidebar-team-block-header .team-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
margin-left: 6px;
margin-right: 4px;
}
.sidebar-team-block.collapsed .team-chevron {
transform: rotate(-90deg);
}
.sidebar-team-block.collapsed .sidebar-team-block-body {
display: none;
}
.sidebar-team-block-body .sidebar-link {
padding: 4px 16px 4px 28px;
font-size: 12.5px;
gap: 8px;
}
.sidebar-team-block-body .sidebar-link .sidebar-badge {
font-size: 11px;
min-width: 18px;
}
.sidebar-team-block-header .sidebar-badge {
font-size: 11px;
min-width: 18px;
}
.sidebar-team-block-header.drag-over {
background: rgba(37,99,235,0.08);
}
/* Personal mailbox sidebar block */
.sidebar-personal-block {
margin-bottom: 4px;
}
.sidebar-personal-header {
gap: 6px;
}
.sidebar-personal-header .sidebar-personal-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
color: #2563eb;
}
.sidebar-personal-block .sidebar-collapse-body .sidebar-link {
padding: 4px 16px 4px 28px;
font-size: 12.5px;
gap: 8px;
}
.sidebar-personal-block .sidebar-collapse-body .sidebar-badge {
font-size: 11px;
min-width: 18px;
}
/* Sortable views container */
.sidebar-views-sortable .sidebar-link {
cursor: default;
}
.sidebar-views-sortable .sidebar-link.dragging {
opacity: 0.4;
}
.sidebar-views-sortable .sidebar-link[draggable="true"]:active {
cursor: default;
}
/* Global VUES drag-reorder */
#sidebar-global-views li[draggable="true"] {
cursor: default;
transition: opacity 0.15s;
}
#sidebar-global-views li.dragging {
opacity: 0.4;
}
#sidebar-global-views li[draggable="true"]:active {
cursor: default;
}
/* Team member items inside team block */
.sidebar-team-members-sep {
font-size: 10px;
color: var(--text-secondary, #6b7280);
padding: 4px 28px 2px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Collapsible members toggle */
.sidebar-team-members-toggle {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 4px;
border-radius: 4px;
transition: background 0.15s;
}
.sidebar-team-members-toggle:hover {
background: var(--sidebar-hover, rgba(0,0,0,0.04));
}
.sidebar-team-members-toggle .members-chevron {
width: 9px;
height: 9px;
transition: transform 0.2s ease;
}
.sidebar-team-members-toggle.collapsed .members-chevron {
transform: rotate(-90deg);
}
.sidebar-team-members-body {
transition: all 0.15s ease;
}
/* Green online indicator on team member avatar */
.team-avatar-online {
position: relative;
box-shadow: 0 0 0 2px #22c55e;
}
.team-avatar-online::after {
content: '';
position: absolute;
bottom: -1px;
right: -1px;
width: 7px;
height: 7px;
background: #22c55e;
border-radius: 50%;
border: 1.5px solid var(--sidebar-bg, #fff);
}
/* ---- Hierarchy groups ---- */
.sidebar-hierarchy-group {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--border-color, #e5e7eb);
}
.sidebar-hierarchy-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-secondary, #6b7280);
padding: 4px 16px 2px;
font-weight: 600;
}
.sidebar-hierarchy-user {
padding: 3px 16px 3px 24px;
font-size: 12px;
color: var(--sidebar-text);
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
}
.sidebar-hierarchy-user:hover {
background: var(--sidebar-hover, rgba(0,0,0,0.04));
}
.sidebar-hierarchy-user .hierarchy-chevron {
width: 10px;
height: 10px;
transition: transform 0.2s ease;
color: var(--text-secondary, #6b7280);
flex-shrink: 0;
}
.sidebar-hierarchy-user.collapsed .hierarchy-chevron {
transform: rotate(-90deg);
}
.sidebar-hierarchy-user-body {
padding-left: 8px;
}
.sidebar-hierarchy-user.collapsed + .sidebar-hierarchy-user-body {
display: none;
}
/* Assigned to me in team section */
.sidebar-assigned-me-link {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 16px;
color: var(--sidebar-text);
text-decoration: none;
font-size: 13px;
transition: all var(--transition);
border-left: 3px solid transparent;
font-weight: 500;
}
.sidebar-assigned-me-link:hover {
background: var(--sidebar-hover, rgba(0,0,0,0.04));
}
.sidebar-assigned-me-link.active {
background: rgba(59, 130, 246, 0.12);
color: var(--blue);
border-left-color: var(--blue);
}
/* ---- Notification Bell ---- */
.notif-bell-wrapper {
position: relative;
display: inline-flex;
z-index: 1100;
}
.notif-badge {
position: absolute;
top: 2px; right: 2px;
min-width: 16px; height: 16px;
background: #ef4444;
color: #fff;
font-size: 10px; font-weight: 700;
border-radius: 999px;
display: flex; align-items: center; justify-content: center;
padding: 0 4px;
pointer-events: none;
line-height: 1;
}
.notif-dropdown {
position: absolute;
top: 100%; right: 0;
width: 360px;
max-height: 440px;
background: var(--surface, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
z-index: 9999;
overflow: hidden;
}
.notif-dropdown-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border, #e5e7eb);
font-weight: 600; font-size: 14px;
}
.notif-mark-all {
font-size: 12px; font-weight: 500;
color: var(--primary, #2563eb);
text-decoration: none;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list {
max-height: 380px;
overflow-y: auto;
}
.notif-item {
display: flex; gap: 10px;
padding: 10px 16px;
text-decoration: none;
color: inherit;
border-bottom: 1px solid var(--border-light, #f3f4f6);
transition: background .15s;
}
.notif-item:hover { background: var(--hover-bg, #f9fafb); }
.notif-unread { background: #eff6ff; }
.notif-unread:hover { background: #dbeafe; }
.notif-icon {
flex-shrink: 0;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-muted, #f3f4f6);
border-radius: 50%;
font-size: 14px;
color: var(--text-secondary, #6b7280);
}
.notif-icon.notif-icon-avatar {
background: var(--blue, #3b82f6);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
}
/* Send-failure notification: red warning icon so it stands out in the bell. */
.notif-send-failed .notif-icon {
background: var(--danger, #ef4444);
color: #fff;
}
.notif-content { flex: 1; min-width: 0; }
.notif-title {
font-size: 13px; font-weight: 500;
color: var(--text-primary, #111827);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-message {
font-size: 12px; color: var(--text-secondary, #6b7280);
margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-time {
font-size: 11px; color: var(--text-tertiary, #9ca3af);
margin-top: 2px;
}
.notif-empty {
text-align: center; padding: 24px;
color: var(--text-secondary, #6b7280);
font-size: 13px;
}
/* Notification dropdown — small screens: escape overflow clipping */
@media (max-width: 900px) {
.notif-dropdown {
position: fixed;
top: 48px;
right: 8px;
left: auto;
width: min(360px, calc(100vw - 76px));
}
}
/* Badge blue for "Assignés à moi" */
.badge-blue {
background: #2563eb !important;
color: #fff !important;
}
/* ---- @Mention Tags ---- */
.mention-tag {
display: inline;
background: #dbeafe;
color: #1d4ed8;
font-weight: 600;
border-radius: 4px;
padding: 1px 4px;
font-size: 13px;
white-space: nowrap;
cursor: default;
user-select: all;
}
.mention-dropdown {
position: fixed;
min-width: 200px;
max-width: 300px;
background: var(--surface, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
z-index: 2000;
overflow: hidden;
}
.mention-option {
padding: 8px 12px;
font-size: 13px;
cursor: pointer;
color: var(--text-primary, #111827);
transition: background .1s;
}
.mention-option:hover,
.mention-option.active {
background: #eff6ff;
color: #1d4ed8;
}
/* ---- Drag & drop attachments ---- */
.reply-editor.drag-over {
outline: 2px dashed var(--blue, #2563eb) !important;
outline-offset: -2px;
background: rgba(37, 99, 235, 0.04) !important;
}
.pending-attachments {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 12px;
}
.pending-attachment-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--bg-secondary, #f9fafb);
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 6px;
font-size: 12px;
}
.pending-att-name {
color: var(--text-primary, #111827);
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pending-att-size {
color: var(--text-muted, #9ca3af);
font-size: 11px;
}
.pending-att-remove {
background: none;
border: none;
color: var(--text-muted, #9ca3af);
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0 2px;
}
.pending-att-remove:hover {
color: var(--danger, #ef4444);
}
/* ==========================================================================
MULTI-SELECT DROPDOWN (mailbox access)
========================================================================== */
.multiselect-wrapper {
position: relative;
min-width: 140px;
}
.multiselect-display {
display: flex;
flex-wrap: wrap;
gap: 3px;
align-items: center;
padding: 3px 6px;
border: 1px solid var(--border, #d1d5db);
border-radius: var(--radius-sm, 4px);
cursor: pointer;
min-height: 28px;
font-size: 11px;
background: white;
}
.multiselect-display:hover {
border-color: var(--blue, #3b82f6);
}
.multiselect-tag {
background: var(--blue-50, #eff6ff);
color: var(--blue-700, #1d4ed8);
padding: 1px 6px;
border-radius: 3px;
font-size: 10px;
display: flex;
align-items: center;
gap: 3px;
white-space: nowrap;
}
.multiselect-tag .tag-remove {
cursor: pointer;
font-weight: bold;
font-size: 12px;
line-height: 1;
opacity: 0.6;
}
.multiselect-tag .tag-remove:hover {
opacity: 1;
}
.multiselect-chevron {
margin-left: auto;
font-size: 10px;
color: var(--text-muted, #9ca3af);
flex-shrink: 0;
}
.multiselect-placeholder {
color: var(--text-muted, #9ca3af);
font-size: 11px;
}
.multiselect-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 50;
background: white;
border: 1px solid var(--border, #d1d5db);
border-radius: var(--radius-sm, 4px);
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
max-height: 200px;
overflow-y: auto;
display: none;
margin-top: 2px;
}
.multiselect-dropdown.open {
display: block;
}
.multiselect-dropdown label {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
cursor: pointer;
font-size: 12px;
margin: 0;
}
.multiselect-dropdown label:hover {
background: var(--hover-bg, #f5f5f5);
}
/* ==========================================================================
HIERARCHY TREE (org chart)
========================================================================== */
.hierarchy-tree-container {
overflow: auto;
padding: 20px 16px;
background: var(--bg-secondary, #fafafa);
border-radius: var(--radius-md, 6px);
border: 1px solid var(--border, #d1d5db);
margin-bottom: 20px;
min-height: 80px;
max-height: 75vh;
position: relative;
}
/* When the organigramme panel is active, allow it to use full width */
#hierarchy-tree-section {
max-width: none;
}
/* Zoom wrapper inside the container */
.hierarchy-zoom-wrapper {
transform-origin: top center;
transition: transform 0.2s ease;
display: inline-block;
min-width: 100%;
}
/* Zoom controls floating over the organigramme */
.hierarchy-zoom-controls {
position: sticky;
top: 0;
right: 0;
z-index: 20;
display: flex;
gap: 4px;
justify-content: flex-end;
margin-bottom: 8px;
pointer-events: none;
}
.hierarchy-zoom-controls button {
pointer-events: auto;
width: 32px;
height: 32px;
border: 1px solid var(--border, #d1d5db);
border-radius: var(--radius-sm, 4px);
background: white;
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: var(--text-primary, #111827);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: background 0.15s, border-color 0.15s;
}
.hierarchy-zoom-controls button:hover {
background: var(--hover-bg, #f5f5f5);
border-color: var(--blue, #3b82f6);
}
.hierarchy-zoom-controls .zoom-level-label {
pointer-events: auto;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary, #6b7280);
display: flex;
align-items: center;
padding: 0 6px;
background: white;
border: 1px solid var(--border, #d1d5db);
border-radius: var(--radius-sm, 4px);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
min-width: 42px;
justify-content: center;
}
.hierarchy-tree {
display: flex;
flex-direction: column;
align-items: center;
min-width: fit-content;
}
.hierarchy-node {
background: white;
border: 2px solid var(--border, #d1d5db);
border-radius: var(--radius-md, 6px);
padding: 10px 16px;
min-width: 130px;
text-align: center;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
position: relative;
}
.hierarchy-node:hover {
border-color: var(--blue, #3b82f6);
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.hierarchy-node.selected {
border-color: var(--blue, #3b82f6);
background: var(--blue-50, #eff6ff);
}
.hierarchy-node .node-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: white;
margin: 0 auto 4px;
}
.hierarchy-node .node-avatar.admin {
background: #f59e0b;
}
.hierarchy-node .node-avatar.gestionnaire {
background: #3b82f6;
}
.hierarchy-node .node-avatar.user {
background: #6b7280;
}
.hierarchy-node .node-name {
font-weight: 600;
font-size: 12px;
margin-bottom: 2px;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hierarchy-node .node-role-badge {
font-size: 9px;
padding: 1px 6px;
border-radius: 3px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: 600;
}
.hierarchy-node .node-role-badge.admin {
background: #fef3c7;
color: #92400e;
}
.hierarchy-node .node-role-badge.gestionnaire {
background: #dbeafe;
color: #1e40af;
}
.hierarchy-node .node-role-badge.user {
background: #f3f4f6;
color: #374151;
}
.hierarchy-node .node-role-badge.manager {
background: #d1fae5;
color: #065f46;
}
.hierarchy-node .node-children-count {
font-size: 9px;
color: var(--text-muted, #9ca3af);
margin-top: 2px;
}
.hierarchy-node .node-teams {
display: flex;
flex-wrap: wrap;
gap: 2px;
justify-content: center;
margin-top: 3px;
}
.hierarchy-node .node-team-badge {
font-size: 8px;
padding: 0px 5px;
border-radius: 3px;
border: 1px solid;
background: white;
font-weight: 500;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Tree lines: branch container */
.hierarchy-children {
display: flex;
gap: 16px;
justify-content: center;
position: relative;
padding-top: 28px;
}
/* Vertical line from parent down */
.hierarchy-children::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 14px;
background: var(--border-color, #d1d5db);
}
.hierarchy-branch {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
/* Vertical line from horizontal bar to child */
.hierarchy-branch::before {
content: '';
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 14px;
background: var(--border-color, #d1d5db);
}
/* Horizontal bar connecting siblings */
.hierarchy-children.multi > .hierarchy-branch::after {
content: '';
position: absolute;
top: -14px;
height: 2px;
background: var(--border-color, #d1d5db);
}
.hierarchy-children.multi > .hierarchy-branch:first-child::after {
left: 50%;
right: -8px;
}
.hierarchy-children.multi > .hierarchy-branch:last-child::after {
left: -8px;
right: 50%;
}
.hierarchy-children.multi > .hierarchy-branch:not(:first-child):not(:last-child)::after {
left: -8px;
right: -8px;
}
/* Context menu for hierarchy nodes */
.node-context-menu {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: white;
border: 1px solid var(--border, #d1d5db);
border-radius: var(--radius-sm, 4px);
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
z-index: 60;
min-width: 180px;
overflow: hidden;
}
.node-context-menu button {
display: block;
width: 100%;
text-align: left;
padding: 8px 12px;
border: none;
background: none;
cursor: pointer;
font-size: 12px;
color: var(--text-primary, #111827);
}
.node-context-menu button:hover {
background: var(--hover-bg, #f5f5f5);
}
.node-context-menu button.danger {
color: var(--danger, #ef4444);
}
.node-context-menu button.danger:hover {
background: #fef2f2;
}
/* Change-referent modal within hierarchy */
.hierarchy-referent-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 1100;
}
.hierarchy-referent-modal .modal {
max-width: 360px;
}
/* ═══════════════════════════════════════════════════════════════════
ENTITIES LIST PAGE
═══════════════════════════════════════════════════════════════════ */
.entities-page {
padding: 24px 32px;
max-width: 1200px;
}
.entities-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 12px;
}
.entities-header-left {
display: flex;
align-items: baseline;
gap: 12px;
}
.entities-title {
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.entities-count {
font-size: 13px;
color: var(--text-muted);
}
.entities-header-right {
display: flex;
align-items: center;
gap: 8px;
}
.entities-search-wrap {
position: relative;
}
.entities-search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
}
.entities-search {
padding-left: 34px !important;
width: 260px;
}
/* Entity card (list item) */
.entity-card {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 8px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.entity-card:hover {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.entity-card-avatar {
width: 42px;
height: 42px;
border-radius: 10px;
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 18px;
flex-shrink: 0;
}
.entity-card-info {
flex: 1;
min-width: 0;
}
.entity-card-name {
font-weight: 600;
font-size: 15px;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.entity-card-meta {
display: flex;
gap: 12px;
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.entity-card-meta span::before {
content: "";
}
.entity-card-domain {
color: var(--primary);
font-weight: 500;
}
.entity-card-stats {
display: flex;
gap: 16px;
font-size: 13px;
color: var(--text-secondary);
flex-shrink: 0;
}
.entity-stat strong {
color: var(--text-primary);
}
.entities-empty {
text-align: center;
padding: 48px 20px;
color: var(--text-muted);
}
.entities-empty p {
margin: 4px 0;
}
/* ═══════════════════════════════════════════════════════════════════
ENTITY DETAIL PAGE
═══════════════════════════════════════════════════════════════════ */
.entity-page {
padding: 24px 32px;
max-width: 1200px;
}
.entity-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid var(--border);
margin-bottom: 24px;
}
.entity-avatar {
width: 52px;
height: 52px;
border-radius: 12px;
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 22px;
flex-shrink: 0;
}
.entity-info {
flex: 1;
}
.entity-name {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 4px 0;
}
.entity-meta {
display: flex;
gap: 16px;
font-size: 13px;
color: var(--text-muted);
}
.entity-meta span::before {
content: "";
}
.entity-domain {
color: var(--primary);
font-weight: 500;
}
.entity-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* Entity KPIs */
.entity-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
/* Entity panels (contacts + notes) */
.entity-panels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 24px;
}
.entity-panel {
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px 20px;
}
.entity-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.entity-panel-header h3 {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.entity-panel-count {
background: var(--bg-gray);
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
}
/* Contacts list inside entity */
.entity-contact-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border-light, #f0f0f0);
}
.entity-contact-row:last-child {
border-bottom: none;
}
.entity-contact-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--bg-gray);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
}
.entity-contact-info {
flex: 1;
min-width: 0;
}
.entity-contact-name {
font-weight: 600;
font-size: 13px;
color: var(--text-primary);
}
.entity-contact-detail {
display: flex;
gap: 12px;
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
flex-wrap: wrap;
}
.entity-contact-detail span::before {
content: "";
}
.entity-contact-email {
color: var(--primary);
}
.entity-contact-title {
font-style: italic;
}
.entity-contact-last-seen {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.entity-contact-remove {
flex-shrink: 0;
color: var(--danger, #ef4444);
border-color: var(--danger, #ef4444);
}
.entity-contact-remove:hover {
background: #fef2f2;
}
/* Notes panel */
.entity-notes-input {
width: 100%;
min-height: 100px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 13px;
font-family: inherit;
resize: vertical;
background: var(--bg-white);
color: var(--text-primary);
}
.entity-notes-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
/* Ticket history section */
.entity-tickets-section {
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px 20px;
}
.entity-ticket-ref {
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
margin-right: 4px;
}
.entity-empty-msg {
color: var(--text-muted);
font-size: 13px;
text-align: center;
padding: 20px 0;
}
@media (max-width: 768px) {
.entities-page,
.entity-page {
padding: 16px;
}
.entities-header {
flex-direction: column;
align-items: flex-start;
}
.entity-panels {
grid-template-columns: 1fr;
}
.entity-kpis {
grid-template-columns: 1fr 1fr;
}
}
/* --- Activity Log --- */
.activity-list { display:flex; flex-direction:column; gap:0; }
.activity-item { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); font-size:12px; }
.activity-item:last-child { border-bottom:none; }
.activity-icon { flex-shrink:0; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; }
.activity-content { flex:1; }
.activity-actor { font-weight:600; color:var(--text-primary); }
.activity-time { color:var(--text-muted); font-size:11px; }
.activity-icon.act-created { background:#dcfce7; color:#16a34a; }
.activity-icon.act-status { background:#dbeafe; color:#2563eb; }
.activity-icon.act-assign { background:#fef3c7; color:#d97706; }
.activity-icon.act-tag { background:#f3e8ff; color:#9333ea; }
.activity-icon.act-reply { background:#e0e7ff; color:#4f46e5; }
.activity-icon.act-note { background:#fce7f3; color:#db2777; }
.activity-icon.act-merge { background:#fff7ed; color:#ea580c; }
/* ==========================================================================
DARK THEME
========================================================================== */
body.dark-theme {
--sidebar-bg: #0f172a;
--sidebar-hover: #1e293b;
--sidebar-active: #3b82f6;
--sidebar-text: #94a3b8;
--sidebar-text-bright: #e2e8f0;
--bg-primary: #0f172a;
--bg-white: #1e293b;
--bg-hover: #334155;
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--blue: #60a5fa;
--blue-light: #1e3a5f;
--blue-dark: #93c5fd;
--green: #4ade80;
--green-light: #14532d;
--amber: #fbbf24;
--amber-light: #451a03;
--red: #f87171;
--red-light: #450a0a;
--purple: #c084fc;
--purple-light: #3b0764;
--gray: #9ca3af;
--gray-light: #374151;
--bg-gray: #1e293b;
--primary: #60a5fa;
--border: #334155;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
--shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
--shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
--bg-secondary: #1e293b;
--border-color: #334155;
--input-bg: #0f172a;
--input-border: #475569;
--card-bg: #1e293b;
color-scheme: dark;
}
/* Dark: cards, forms, tables, modals */
body.dark-theme .team-card { background: var(--bg-secondary); border-color: var(--border); color: var(--text-primary); }
body.dark-theme .team-card-name { color: var(--text-primary); }
body.dark-theme input, body.dark-theme select, body.dark-theme textarea { background: var(--input-bg); color: var(--text-primary); border-color: var(--input-border); }
body.dark-theme .form-input, body.dark-theme .form-select, body.dark-theme .form-textarea { background: var(--input-bg); color: var(--text-primary); border-color: var(--input-border); }
body.dark-theme .btn-outline { color: var(--text-primary); border-color: var(--border); }
body.dark-theme .btn-outline:hover { background: var(--bg-hover); }
body.dark-theme .context-card { background: var(--bg-secondary); border-color: var(--border); }
body.dark-theme .context-section { color: var(--text-primary); }
body.dark-theme .settings-panel { color: var(--text-primary); }
body.dark-theme .panel-section { color: var(--text-primary); }
body.dark-theme .hierarchy-tree-container { background: var(--bg-secondary); }
body.dark-theme .hierarchy-node { background: var(--bg-secondary); border-color: var(--border); color: var(--text-primary); }
body.dark-theme .hierarchy-node-name { color: var(--text-primary); }
body.dark-theme .hierarchy-node-role { color: var(--text-secondary); }
body.dark-theme table th { color: var(--text-secondary); border-color: var(--border); }
body.dark-theme table td { color: var(--text-primary); border-color: var(--border); }
body.dark-theme .dropdown-menu { background: var(--bg-secondary); border-color: var(--border); }
body.dark-theme .dropdown-item { color: var(--text-primary); }
body.dark-theme .dropdown-item:hover { background: var(--bg-hover); }
body.dark-theme .modal-content { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border); }
body.dark-theme .tag { opacity: 0.9; }
body.dark-theme a { color: var(--blue); }
body.dark-theme .settings-tab { color: var(--text-secondary); }
body.dark-theme .settings-tab:hover, body.dark-theme .settings-tab.active { color: var(--text-primary); }
body.dark-theme .empty-state { color: var(--text-secondary); }
body.dark-theme .topbar { background: var(--bg-secondary); border-color: var(--border); }
body.dark-theme .breadcrumb { color: var(--text-secondary); }
body.dark-theme .ticket-table thead { background: var(--bg-primary); }
body.dark-theme .ticket-table tbody tr:hover { background: var(--bg-hover); }
body.dark-theme .ticket-table tbody tr { border-bottom-color: var(--border); }
/* Dark: email body + ticket content */
body.dark-theme .email-body, body.dark-theme .message-body { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
body.dark-theme .email-body *, body.dark-theme .message-body * { color: inherit !important; }
body.dark-theme .email-body a, body.dark-theme .message-body a { color: var(--blue) !important; }
body.dark-theme .message-card { background: var(--bg-secondary); border-color: var(--border); }
body.dark-theme .message-card .message-header { color: var(--text-secondary); }
body.dark-theme .reply-editor, body.dark-theme .reply-box { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); }
body.dark-theme .reply-editor [contenteditable] { color: var(--text-primary); }
/* REMOVED: was double-inverting dark-mode srcdoc content */
body.dark-theme .note-card { background: rgba(245, 158, 11, 0.06) !important; border-color: rgba(245, 158, 11, 0.15) !important; }
body.dark-theme .note-card * { color: var(--text-primary) !important; }
body.dark-theme .forward-card { background: rgba(96, 165, 250, 0.06) !important; border-color: rgba(96, 165, 250, 0.15) !important; }
body.dark-theme .forward-card * { color: var(--text-primary) !important; }
/* Dark: hardcoded color overrides */
body.dark-theme .sidebar-footer { border-top-color: rgba(255,255,255,0.06); }
body.dark-theme .modal-overlay { background: rgba(0,0,0,0.7); }
body.dark-theme .search-suggestion-status.open { background: var(--green-light); color: #4ade80; }
body.dark-theme .search-suggestion-status.snoozed { background: var(--amber-light); color: #fbbf24; }
body.dark-theme .search-suggestion-highlight { background: rgba(245, 158, 11, 0.3); color: #fef08a; }
body.dark-theme .sla-ok .sla-count { color: #4ade80; }
body.dark-theme .sla-warning .sla-count { color: #fbbf24; }
body.dark-theme .sla-critical .sla-count { color: #f87171; }
body.dark-theme .sla-ok .sla-label { color: #4ade80; }
body.dark-theme .sla-warning .sla-label { color: #fbbf24; }
body.dark-theme .sla-critical .sla-label { color: #f87171; }
body.dark-theme .activity-icon.act-created { background: #14532d; color: #4ade80; }
body.dark-theme .activity-icon.act-status { background: var(--primary-light); color: var(--primary); }
body.dark-theme .activity-icon.act-assign { background: #451a03; color: #fbbf24; }
body.dark-theme .activity-icon.act-tag { background: #3b0764; color: #c084fc; }
body.dark-theme .activity-icon.act-reply { background: #1e1b4b; color: #818cf8; }
body.dark-theme .activity-icon.act-note { background: #500724; color: #f472b6; }
body.dark-theme .activity-icon.act-merge { background: #431407; color: #fb923c; }
/* Dark: form elements */
/* Removed: duplicate hardcoded input styles */
body.dark-theme input:focus,
body.dark-theme select:focus,
body.dark-theme textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(96,165,250,0.15); }
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder { color: var(--text-muted); }
body.dark-theme .btn-secondary,
body.dark-theme .btn-ghost { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); }
body.dark-theme .btn-secondary:hover,
body.dark-theme .btn-ghost:hover { background: var(--bg-hover); }
body.dark-theme .compose-modal { background: var(--bg-secondary); }
body.dark-theme .compose-input { background: var(--input-bg); color: var(--text-primary); border-color: var(--input-border); }
body.dark-theme .compose-editor { background: var(--input-bg); color: var(--text-primary); }
body.dark-theme .compose-toolbar { background: var(--bg-secondary); border-color: var(--border); }
body.dark-theme .tag { background: var(--bg-hover); color: var(--text-primary); }
body.dark-theme ::-webkit-scrollbar { width: 6px; height: 6px; }
body.dark-theme ::-webkit-scrollbar-track { background: var(--bg-primary); }
body.dark-theme ::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 3px; }
body.dark-theme ::-webkit-scrollbar-thumb:hover { background: var(--input-border); }
/* REMOVED: duplicate of above, also caused double-inversion */
body.dark-theme .ticket-row:hover,
body.dark-theme .ticket-row.active { background: var(--bg-hover) !important; }
body.dark-theme .dropdown-menu,
body.dark-theme .context-menu { background: var(--bg-secondary); border-color: var(--border); }
body.dark-theme .dropdown-item:hover,
body.dark-theme .context-menu-item:hover { background: var(--bg-hover); }
/* Theme toggle switch */
.theme-toggle-wrapper {
display: flex; align-items: center; gap: 8px;
padding: 6px 16px; margin: 4px 0;
font-size: 12px; color: var(--sidebar-text);
}
.theme-toggle-wrapper:hover { color: var(--sidebar-text-bright); }
.theme-toggle-label {
display: flex; align-items: center; gap: 6px;
cursor: pointer; user-select: none; flex: 1;
}
.theme-toggle-icon { width: 16px; height: 16px; flex-shrink: 0; }
.theme-switch { position: relative; width: 32px; height: 18px; flex-shrink: 0; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.theme-slider {
position: absolute; cursor: pointer; inset: 0;
background: #475569; border-radius: 9px;
transition: background var(--transition);
}
.theme-slider::before {
content: ''; position: absolute;
height: 14px; width: 14px; left: 2px; bottom: 2px;
background: white; border-radius: 50%;
transition: transform var(--transition);
}
.theme-switch input:checked + .theme-slider { background: var(--blue); }
.theme-switch input:checked + .theme-slider::before { transform: translateX(14px); }
/* ===== COLOR THEMES ===== */
/* Each theme overrides --primary and --sidebar-* via data-theme attribute */
/* Theme: Violet */
[data-theme="violet"] { --primary: #8b5cf6; --primary-hover: #7c3aed; --primary-light: #ede9fe; --sidebar-bg: #1e1b2e; --sidebar-hover: #2d2640; --sidebar-active: #8b5cf6; --sidebar-text: #a095b8; --sidebar-text-bright: #e8e0f0; --blue: #8b5cf6; --blue-light: #ede9fe; }
body.dark-theme[data-theme="violet"] { --primary: #a78bfa; --primary-hover: #c4b5fd; --primary-light: #2e1065; --bg-primary: #0f0d1a; --bg-secondary: #1e1b2e; --bg-white: #1e1b2e; --bg-hover: #2d2640; --sidebar-bg: #0f0d1a; --sidebar-hover: #1e1b2e; --sidebar-active: #a78bfa; --border: #3d3555; --border-color: #3d3555; --input-bg: #0f0d1a; --input-border: #4a3f66; --card-bg: #1e1b2e; --blue: #a78bfa; --blue-light: #2e1065; --sidebar-text: #a095b8; --sidebar-text-bright: #e8e0f0;}
/* Theme: Cyan */
[data-theme="cyan"] { --primary: #06b6d4; --primary-hover: #0891b2; --primary-light: #cffafe; --sidebar-bg: #0f2027; --sidebar-hover: #1a3a40; --sidebar-active: #06b6d4; --sidebar-text: #7fbbc8; --sidebar-text-bright: #d4f0f5; --blue: #06b6d4; --blue-light: #cffafe; }
body.dark-theme[data-theme="cyan"] { --primary: #22d3ee; --primary-hover: #67e8f9; --primary-light: #0c3644; --bg-primary: #071318; --bg-secondary: #0f2027; --bg-white: #0f2027; --bg-hover: #1a3a40; --sidebar-bg: #071318; --sidebar-hover: #0f2027; --sidebar-active: #22d3ee; --border: #1e4a52; --border-color: #1e4a52; --input-bg: #071318; --input-border: #2a5a64; --card-bg: #0f2027; --blue: #22d3ee; --blue-light: #0c3644; --sidebar-text: #7fbbc8; --sidebar-text-bright: #d4f0f5;}
/* Theme: Rose */
[data-theme="rose"] { --primary: #f43f5e; --primary-hover: #e11d48; --primary-light: #ffe4e6; --sidebar-bg: #2a1520; --sidebar-hover: #3d1f30; --sidebar-active: #f43f5e; --sidebar-text: #c09aaa; --sidebar-text-bright: #f0dce4; --blue: #f43f5e; --blue-light: #ffe4e6; }
body.dark-theme[data-theme="rose"] { --primary: #fb7185; --primary-hover: #fda4af; --primary-light: #4c0519; --bg-primary: #1a0b14; --bg-secondary: #2a1520; --bg-white: #2a1520; --bg-hover: #3d1f30; --sidebar-bg: #1a0b14; --sidebar-hover: #2a1520; --sidebar-active: #fb7185; --border: #4a2535; --border-color: #4a2535; --input-bg: #1a0b14; --input-border: #5a3045; --card-bg: #2a1520; --blue: #fb7185; --blue-light: #4c0519; --sidebar-text: #c09aaa; --sidebar-text-bright: #f0dce4;}
/* Theme: Emerald */
[data-theme="emerald"] { --primary: #10b981; --primary-hover: #059669; --primary-light: #d1fae5; --sidebar-bg: #0f2318; --sidebar-hover: #1a3d2a; --sidebar-active: #10b981; --sidebar-text: #7fb8a0; --sidebar-text-bright: #d4f0e0; --blue: #10b981; --blue-light: #d1fae5; }
body.dark-theme[data-theme="emerald"] { --primary: #34d399; --primary-hover: #6ee7b7; --primary-light: #064e3b; --bg-primary: #071510; --bg-secondary: #0f2318; --bg-white: #0f2318; --bg-hover: #1a3d2a; --sidebar-bg: #071510; --sidebar-hover: #0f2318; --sidebar-active: #34d399; --border: #1e4a30; --border-color: #1e4a30; --input-bg: #071510; --input-border: #2a5a3a; --card-bg: #0f2318; --blue: #34d399; --blue-light: #064e3b; --sidebar-text: #7fb8a0; --sidebar-text-bright: #d4f0e0;}
/* Theme: Amber */
[data-theme="amber"] { --primary: #f59e0b; --primary-hover: #d97706; --primary-light: #fef3c7; --sidebar-bg: #271a05; --sidebar-hover: #3d2a0e; --sidebar-active: #f59e0b; --sidebar-text: #c8a87a; --sidebar-text-bright: #f5e6cc; --blue: #f59e0b; --blue-light: #fef3c7; }
body.dark-theme[data-theme="amber"] { --primary: #fbbf24; --primary-hover: #fcd34d; --primary-light: #451a03; --bg-primary: #1a1005; --bg-secondary: #271a05; --bg-white: #271a05; --bg-hover: #3d2a0e; --sidebar-bg: #1a1005; --sidebar-hover: #271a05; --sidebar-active: #fbbf24; --border: #4a3510; --border-color: #4a3510; --input-bg: #1a1005; --input-border: #5a4520; --card-bg: #271a05; --blue: #fbbf24; --blue-light: #451a03; --sidebar-text: #c8a87a; --sidebar-text-bright: #f5e6cc;}
/* Theme: Crimson */
[data-theme="crimson"] { --primary: #ef4444; --primary-hover: #dc2626; --primary-light: #fee2e2; --sidebar-bg: #2a1215; --sidebar-hover: #3d1c20; --sidebar-active: #ef4444; --sidebar-text: #c09096; --sidebar-text-bright: #f0d8dc; --blue: #ef4444; --blue-light: #fee2e2; }
body.dark-theme[data-theme="crimson"] { --primary: #f87171; --primary-hover: #fca5a5; --primary-light: #450a0a; --bg-primary: #1a0a0c; --bg-secondary: #2a1215; --bg-white: #2a1215; --bg-hover: #3d1c20; --sidebar-bg: #1a0a0c; --sidebar-hover: #2a1215; --sidebar-active: #f87171; --border: #4a2025; --border-color: #4a2025; --input-bg: #1a0a0c; --input-border: #5a2530; --card-bg: #2a1215; --blue: #f87171; --blue-light: #450a0a; --sidebar-text: #c09096; --sidebar-text-bright: #f0d8dc;}
/* Theme: Indigo */
[data-theme="indigo"] { --primary: #6366f1; --primary-hover: #4f46e5; --primary-light: #e0e7ff; --sidebar-bg: #1a1a2e; --sidebar-hover: #2a2a45; --sidebar-active: #6366f1; --sidebar-text: #9a9abe; --sidebar-text-bright: #e0e0f0; --blue: #6366f1; --blue-light: #e0e7ff; }
body.dark-theme[data-theme="indigo"] { --primary: #818cf8; --primary-hover: #a5b4fc; --primary-light: #1e1b4b; --bg-primary: #0e0e1a; --bg-secondary: #1a1a2e; --bg-white: #1a1a2e; --bg-hover: #2a2a45; --sidebar-bg: #0e0e1a; --sidebar-hover: #1a1a2e; --sidebar-active: #818cf8; --border: #33335a; --border-color: #33335a; --input-bg: #0e0e1a; --input-border: #44447a; --card-bg: #1a1a2e; --blue: #818cf8; --blue-light: #1e1b4b; --sidebar-text: #9a9abe; --sidebar-text-bright: #e0e0f0;}
/* Theme picker swatches */
.theme-picker { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.theme-swatch { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: border-color .2s, transform .15s; background: var(--swatch); position: relative; }
.theme-swatch:hover { transform: scale(1.15); }
.theme-swatch.active { border-color: var(--text-primary); }
.theme-swatch.active::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.theme-swatch-label { font-size: 10px; text-align: center; margin-top: 4px; color: var(--text-secondary); }
/* Hide inbox and closed badges in global VUES — too noisy */
#badge-all, #badge-closed { display: none !important; }
/* ===== DARK MODE: Comprehensive overrides (148 fixes) ===== */
body.dark-theme .form-card,
body.dark-theme .contact-ticket-card,
body.dark-theme .message-editor-card,
body.dark-theme .sig-card,
body.dark-theme .sorting-indicator,
body.dark-theme .hierarchy-menu,
body.dark-theme .hierarchy-avatar-edit,
body.dark-theme .hierarchy-avatar-input,
body.dark-theme .hierarchy-node,
body.dark-theme .hierarchy-node-header-label,
body.dark-theme .hierarchy-tooltip,
body.dark-theme .template-line,
body.dark-theme .contact-msg-bubble,
body.dark-theme .contact-msg-bubble.inbound,
body.dark-theme .dropdown-option,
body.dark-theme .compose-modal,
body.dark-theme .modal-body { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
body.dark-theme .contact-msg-bubble.outbound { background: var(--primary-light, #1e3a5f) !important; border-color: var(--border) !important; }
body.dark-theme .contact-msg-bubble.note,
body.dark-theme .msg-note-banner,
body.dark-theme .msg-forward-banner,
body.dark-theme .reply-box.note-mode .reply-editor,
body.dark-theme .msg-system-merge,
body.dark-theme .compose-header-warn { background: rgba(245, 158, 11, 0.06) !important; border-color: rgba(245, 158, 11, 0.15) !important; color: var(--text-primary) !important; }
body.dark-theme .table-header { background-color: var(--bg-secondary) !important; }
body.dark-theme .hierarchy-node .node-role-badge.user { background: var(--bg-hover) !important; color: var(--text-secondary) !important; }
body.dark-theme .hierarchy-node .node-role-badge.admin { background: #451a03 !important; color: #fbbf24 !important; }
body.dark-theme .qa-status-done { background: #064e3b !important; color: #4ade80 !important; border-color: #10b981 !important; }
body.dark-theme .qa-status-pending { background: #451a03 !important; color: #fbbf24 !important; border-color: #f59e0b !important; }
body.dark-theme .lan-share-card,
body.dark-theme .tunnel-info-box { background: #064e3b !important; border-color: #10b981 !important; color: var(--text-primary) !important; }
body.dark-theme .progress-bar-bg { background: var(--bg-hover) !important; }
body.dark-theme .notif-unread { background: var(--primary-light, #1e3a5f) !important; }
body.dark-theme .spinner { border-color: var(--border) !important; border-top-color: var(--primary) !important; }
body.dark-theme .form-divider { border-color: var(--border) !important; }
/* Dark: email/message content */
body.dark-theme .email-body, body.dark-theme .message-body, body.dark-theme .message-content { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
body.dark-theme .email-body *, body.dark-theme .message-body *, body.dark-theme .message-content * { color: inherit !important; }
body.dark-theme .email-body a, body.dark-theme .message-body a { color: var(--primary) !important; }
body.dark-theme .compose-overlay .compose-modal { background: var(--bg-primary) !important; color: var(--text-primary) !important; }
/* Dark: inline style overrides for settings.js dynamic elements */
body.dark-theme [style*="background:#d4edda"],
body.dark-theme [style*="background:#f0fdf4"],
body.dark-theme [style*="background:#dcfce7"] { background: #064e3b !important; color: #4ade80 !important; }
body.dark-theme [style*="background:#fef2f2"],
body.dark-theme [style*="background:#fee2e2"],
body.dark-theme [style*="background:#fecaca"] { background: #450a0a !important; color: #f87171 !important; }
body.dark-theme [style*="background:#dbeafe"] { background: #1e3a5f !important; color: #93c5fd !important; }
body.dark-theme [style*="background:#fef3c7"],
body.dark-theme [style*="background:#fffbeb"] { background: rgba(245, 158, 11, 0.06) !important; color: #fbbf24 !important; }
body.dark-theme [style*="background:#f3f4f6"],
body.dark-theme [style*="background:#f9fafb"],
body.dark-theme [style*="background:#fafafa"],
body.dark-theme [style*="background: white"],
body.dark-theme [style*="background:white"],
body.dark-theme [style*="background: #fff"],
body.dark-theme [style*="background:#fff"] { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
body.dark-theme [style*="color:#888"],
body.dark-theme [style*="color: #888"],
body.dark-theme [style*="color:#aaa"],
body.dark-theme [style*="color: #aaa"] { color: var(--text-muted) !important; }
body.dark-theme [style*="color:#e53e3e"] { color: #f87171 !important; }
body.dark-theme [style*="color:#374151"],
body.dark-theme [style*="color: #374151"] { color: var(--text-secondary) !important; }
body.dark-theme [style*="color:#6b7280"],
body.dark-theme [style*="color: #6b7280"] { color: var(--text-muted) !important; }
body.dark-theme [style*="border-color:#e5e7eb"],
body.dark-theme [style*="border: 1px solid #e5e7eb"],
body.dark-theme [style*="border:1px solid #e5e7eb"] { border-color: var(--border) !important; }
/* Fix: assigned-to-me filter badge text visibility */
body.dark-theme .filter-badge { color: white !important; }
.sidebar-link.active { position: relative; z-index: 1; }
/* ===== DARK MODE FIXES — Batch 2 ===== */
/* Reply/Note editor */
body.dark-theme .reply-editor,
body.dark-theme .reply-textarea,
body.dark-theme [contenteditable] {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
}
/* Message cards — remove white border */
body.dark-theme .message-card,
body.dark-theme .msg-card,
body.dark-theme .msg-content {
border-color: var(--border) !important;
background: var(--bg-secondary) !important;
}
body.dark-theme .msg-body-wrapper {
background: var(--bg-secondary) !important;
border-color: var(--border) !important;
}
/* Email body iframe wrapper */
body.dark-theme .email-body-wrapper,
body.dark-theme .email-body {
background: var(--bg-primary) !important;
border-color: var(--border) !important;
}
/* Status bar / table header */
body.dark-theme .ticket-table thead,
body.dark-theme .ticket-table thead th {
background: var(--bg-primary) !important;
border-color: var(--border) !important;
}
/* Form cards and white backgrounds */
body.dark-theme .form-card,
body.dark-theme .contact-ticket-card,
body.dark-theme .sig-card,
body.dark-theme .message-editor-card {
background: var(--bg-secondary) !important;
border-color: var(--border) !important;
}
/* Note/forward banners */
body.dark-theme .msg-note-banner {
background: rgba(245, 158, 11, 0.1) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
}
body.dark-theme .msg-forward-banner {
background: rgba(96, 165, 250, 0.1) !important;
border-color: rgba(96, 165, 250, 0.3) !important;
}
/* System merge message */
body.dark-theme .msg-system-merge {
background: rgba(245, 158, 11, 0.1) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
}
/* Contact bubbles */
body.dark-theme .contact-msg-bubble.inbound {
background: var(--bg-secondary) !important;
border-color: var(--border) !important;
}
body.dark-theme .contact-msg-bubble.outbound {
background: rgba(59, 130, 246, 0.1) !important;
border-color: rgba(59, 130, 246, 0.3) !important;
}
body.dark-theme .contact-msg-bubble.note {
background: rgba(245, 158, 11, 0.1) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
}
/* Hierarchy / organigramme */
body.dark-theme .hierarchy-node,
body.dark-theme .hierarchy-menu,
body.dark-theme .hierarchy-tooltip,
body.dark-theme .hierarchy-avatar-edit,
body.dark-theme .hierarchy-avatar-input {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border-color: var(--border) !important;
}
/* Sorting indicator */
body.dark-theme .sorting-indicator {
background: var(--bg-secondary) !important;
}
/* Compose modal */
body.dark-theme .compose-header-warn {
background: rgba(245, 158, 11, 0.1) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
}
/* Note mode editor background */
body.dark-theme .reply-box.note-mode .reply-editor {
background: rgba(245, 158, 11, 0.08) !important;
}
/* Spinner */
body.dark-theme .spinner {
border-color: rgba(255, 255, 255, 0.15) !important;
border-top-color: var(--primary) !important;
}
/* QA status badges */
body.dark-theme .qa-status-pending {
background: rgba(245, 158, 11, 0.15) !important;
color: #fbbf24 !important;
border-color: rgba(245, 158, 11, 0.3) !important;
}
body.dark-theme .qa-status-done {
background: rgba(16, 185, 129, 0.15) !important;
color: #34d399 !important;
border-color: rgba(16, 185, 129, 0.3) !important;
}
/* Notification unread */
body.dark-theme .notif-unread {
background: rgba(59, 130, 246, 0.1) !important;
}
/* Template lines */
body.dark-theme .template-line {
background: var(--bg-secondary) !important;
}
/* Table header background */
body.dark-theme .table-header {
background-color: var(--bg-secondary) !important;
}
/* Signature block in editor */
body.dark-theme .signature-block {
border-color: var(--border) !important;
color: var(--text-secondary) !important;
background: transparent !important;
}
body.dark-theme .signature-block *:not(a):not(img) {
background: transparent !important;
}
/* Macros panel */
body.dark-theme .macro-header {
background: var(--primary) !important;
}
/* CRM match tooltip */
body.dark-theme .crm-match-tooltip {
background: var(--bg-secondary) !important;
border-color: var(--border) !important;
color: var(--text-primary) !important;
}
/* Auto-match label in contacts */
body.dark-theme [style*="background:#dbeafe"] {
background: rgba(59, 130, 246, 0.2) !important;
color: #93c5fd !important;
}
/* ===== Theme Picker ===== */
.theme-picker {
display: flex;
gap: 6px;
padding: 6px 12px;
flex-wrap: wrap;
justify-content: center;
}
.theme-picker.visible {
display: flex;
}
.theme-swatch {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
background: var(--swatch);
transition: transform 0.15s, border-color 0.15s;
position: relative;
}
.theme-swatch:hover {
transform: scale(1.15);
border-color: var(--text-secondary);
}
.theme-swatch.active {
border-color: var(--text-primary);
box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--swatch);
}
/* Dark mode toggle — compact */
.theme-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 12px 8px;
gap: 8px;
}
.theme-row.visible {
display: flex;
}
.dark-toggle-compact {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 11px;
color: var(--sidebar-text);
}
.dark-toggle-compact input {
width: 32px;
height: 16px;
appearance: none;
background: var(--sidebar-hover);
border-radius: 8px;
position: relative;
cursor: pointer;
transition: background 0.2s;
}
.dark-toggle-compact input:checked {
background: var(--primary);
}
.dark-toggle-compact input::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: white;
transition: transform 0.2s;
}
.dark-toggle-compact input:checked::after {
transform: translateX(16px);
}
/* ===== DARK MODE — White border fixes ===== */
body.dark-theme .msg-card,
body.dark-theme .message-card,
body.dark-theme .msg-body-wrapper,
body.dark-theme .msg-content,
body.dark-theme .email-body,
body.dark-theme .email-body-wrapper {
border-color: var(--border) !important;
}
/* Fix any remaining hardcoded #e5e7eb borders */
body.dark-theme [style*="border"][style*="e5e7eb"],
body.dark-theme [style*="border"][style*="E5E7EB"] {
border-color: var(--border) !important;
}
/* Muted text needs more contrast in dark */
body.dark-theme .text-muted,
body.dark-theme .sidebar-badge:not([class*="badge-"]) {
color: var(--text-secondary) !important;
}
/* Inbox/ticket list active row */
body.dark-theme .ticket-table tbody tr.active,
body.dark-theme .ticket-table tbody tr:hover {
background: var(--bg-hover) !important;
}
/* Context panel sections */
body.dark-theme .context-card {
background: var(--bg-secondary) !important;
border-color: var(--border) !important;
}
body.dark-theme .context-section {
border-color: var(--border) !important;
}
body.dark-theme .context-title {
color: var(--text-primary) !important;
}
/* Active filters bar */
body.dark-theme .active-filters {
background: var(--bg-secondary) !important;
border-bottom-color: var(--border) !important;
}
/* Email address text in inbox — lighter gray for dark mode */
body.dark-theme .col-sender .sender-email,
body.dark-theme .sender-info small,
body.dark-theme .sender-info .sender-email {
color: #94a3b8 !important; /* Lighter than default gray */
}
/* Signature block text in dark mode */
body.dark-theme .signature-block,
body.dark-theme .signature-block * {
color: var(--text-secondary) !important;
}
body.dark-theme .signature-block a {
color: var(--primary) !important;
}
/* Reply box resizable via drag handle */
.reply-box {
resize: vertical;
overflow: hidden;
min-height: 150px;
}
/* Compact formatting toolbar */
.reply-toolbar, .rt-toolbar {
padding: 4px 8px !important;
gap: 2px !important;
}
.reply-toolbar .rt-btn, .rt-toolbar .rt-btn {
padding: 3px 6px !important;
font-size: 12px !important;
}
/* Narrower To: field */
.reply-recipients {
max-width: 50%;
}
.reply-to-input, .compose-to-input {
min-width: 150px;
}
/* CC/BCC buttons closer to center */
.reply-cc-btns {
margin-left: auto;
margin-right: auto;
}
/* White borders on messages in dark mode — comprehensive fix */
body.dark-theme .msg-card,
body.dark-theme .message-bubble,
body.dark-theme .msg-bubble,
body.dark-theme .msg-inbound,
body.dark-theme .msg-outbound,
body.dark-theme .msg-note,
body.dark-theme .msg-forward,
body.dark-theme [class*="msg-"] {
border-color: var(--border) !important;
}
body.dark-theme iframe {
border-color: var(--border) !important;
}
/* Dark mode: msg-item border + outbound background override */
body.dark-theme .msg-item {
border-color: var(--border) !important;
background: var(--bg-secondary) !important;
}
body.dark-theme .msg-item.msg-inbound {
background: var(--bg-secondary) !important;
border-left-color: var(--primary) !important;
}
body.dark-theme .msg-item.msg-outbound {
background: var(--bg-secondary) !important;
border-left-color: var(--border-light) !important;
}
body.dark-theme .msg-header {
background: var(--bg-primary) !important;
border-color: var(--border) !important;
}
/* DUPLICATE outbound tint removed (was lines 7960-7962): D-02 — outbound has no background fill in light mode either. */
/* Reply resize bar — sits above the Repondre/Note interne tabs */
.reply-resize-bar {
height: 4px;
cursor: ns-resize;
background: transparent;
transition: background 0.15s;
flex-shrink: 0;
}
.reply-resize-bar:hover,
.reply-resize-bar.dragging {
background: var(--primary);
opacity: 0.5;
}
/* ===== ML Classification UI ===== */
/* Vocabulary cards */
.ml-vocab-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
margin: 16px 0;
}
.ml-vocab-card {
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: var(--bg-white);
transition: box-shadow 0.2s;
}
.ml-vocab-card:hover {
box-shadow: var(--shadow-md);
}
.ml-vocab-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
cursor: pointer;
user-select: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
.ml-vocab-card.expanded .ml-vocab-header {
border-bottom-color: var(--border);
}
.ml-vocab-title {
font-weight: 600;
font-size: 13px;
color: var(--text-primary);
}
.ml-vocab-meta {
font-size: 11px;
color: var(--text-muted);
}
.ml-vocab-body {
display: none;
padding: 10px 14px;
}
.ml-vocab-card.expanded .ml-vocab-body {
display: block;
}
.ml-word-row {
display: flex;
align-items: center;
gap: 8px;
padding: 3px 0;
font-size: 12px;
}
.ml-word-name {
flex: 0 0 120px;
font-family: monospace;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ml-word-bar-bg {
flex: 1;
height: 6px;
background: var(--bg-secondary);
border-radius: 3px;
overflow: hidden;
}
.ml-word-bar {
height: 100%;
border-radius: 3px;
background: var(--primary);
transition: width 0.3s;
}
.ml-word-weight {
flex: 0 0 40px;
text-align: right;
font-size: 11px;
color: var(--text-muted);
}
.ml-word-remove {
flex: 0 0 20px;
border: none;
background: none;
color: var(--text-muted);
cursor: pointer;
font-size: 14px;
padding: 0;
line-height: 1;
}
.ml-word-remove:hover {
color: var(--red);
}
/* Actions auto table */
.ml-actions-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
margin: 12px 0;
}
.ml-actions-table th {
text-align: left;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
color: var(--text-muted);
padding: 8px 10px;
border-bottom: 2px solid var(--border);
}
.ml-actions-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.ml-actions-table select,
.ml-actions-table input {
font-size: 12px;
padding: 4px 8px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-white);
color: var(--text-primary);
}
/* Confidence slider */
.ml-confidence-slider {
width: 80px;
accent-color: var(--primary);
}
.ml-confidence-value {
font-size: 11px;
font-weight: 600;
color: var(--primary);
min-width: 30px;
display: inline-block;
}
/* Accuracy bars */
.ml-accuracy-bar {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0;
}
.ml-accuracy-label {
flex: 0 0 80px;
font-size: 12px;
color: var(--text-secondary);
}
.ml-accuracy-track {
flex: 1;
height: 8px;
background: var(--bg-secondary);
border-radius: 4px;
overflow: hidden;
}
.ml-accuracy-fill {
height: 100%;
border-radius: 4px;
transition: width 0.5s;
}
.ml-accuracy-fill.good { background: var(--green); }
.ml-accuracy-fill.ok { background: var(--amber); }
.ml-accuracy-fill.low { background: var(--red); }
.ml-accuracy-pct {
flex: 0 0 40px;
font-size: 12px;
font-weight: 600;
text-align: right;
}
/* Validation encart (ticket sidebar) */
.ml-validation-card {
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 8px;
}
.ml-validation-card.high {
background: rgba(34, 197, 94, 0.08);
border: 1px solid rgba(34, 197, 94, 0.25);
}
.ml-validation-card.medium {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.25);
}
.ml-validation-card.low {
background: var(--bg-secondary);
border: 1px solid var(--border);
}
.ml-validation-label {
font-size: 12px;
font-weight: 600;
margin-bottom: 6px;
}
.ml-validation-card.high .ml-validation-label { color: var(--green); }
.ml-validation-card.medium .ml-validation-label { color: var(--amber); }
.ml-validation-card.low .ml-validation-label { color: var(--text-muted); }
.ml-validation-keywords {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 6px 0;
}
.ml-keyword-chip {
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-secondary);
color: var(--text-secondary);
font-family: monospace;
}
.ml-validation-actions {
display: flex;
gap: 6px;
margin-top: 8px;
}
.ml-validation-actions .btn {
font-size: 11px;
padding: 4px 10px;
}
/* Training progress */
.ml-training-progress {
padding: 12px;
border-radius: 8px;
background: var(--bg-secondary);
border: 1px solid var(--border);
margin: 12px 0;
}
.ml-training-bar {
height: 6px;
background: var(--bg-primary);
border-radius: 3px;
overflow: hidden;
margin: 8px 0;
}
.ml-training-fill {
height: 100%;
background: var(--primary);
border-radius: 3px;
transition: width 0.3s;
animation: ml-pulse 1.5s ease-in-out infinite;
}
@keyframes ml-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.ml-training-status {
font-size: 12px;
color: var(--text-secondary);
}
/* Signature collapsed/expanded in editor */
.signature-block.collapsed {
max-height: 24px;
overflow: hidden;
position: relative;
cursor: pointer;
opacity: 0.5;
}
.signature-block.collapsed::after {
content: '... (cliquez pour voir la signature)';
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, var(--bg-secondary));
padding: 2px 8px;
font-size: 11px;
color: var(--text-muted);
text-align: center;
}
.signature-block.collapsed:hover {
opacity: 0.8;
}
.sig-collapse-btn {
display: block;
width: 100%;
padding: 4px 8px;
margin-top: 2px;
background: var(--bg-tertiary, #f3f4f6);
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 4px;
color: var(--text-muted, #6b7280);
font-size: 11px;
cursor: pointer;
text-align: center;
}
.sig-collapse-btn:hover {
background: var(--bg-secondary, #e5e7eb);
color: var(--text-primary, #374151);
}
/* Draggable widget highlight — title is draggable so the body can keep
text selection (selecting client email in the card was previously blocked
by draggable="true" on the whole section). */
.context-section .context-title[draggable="true"] { cursor: grab; }
.context-section.drag-over-widget { border-top: 2px solid var(--blue, #3b82f6); }
.context-card,
.context-card * {
user-select: text;
}
/* Dark mode: contenteditable editors that may receive pasted Outlook HTML.
Pasted content carries inline `style="background-color:white; color:#000"`
on every //. CSS rules with regular `!important` lose to
inline styles, so we cannot just declare `background:transparent` here —
instead we use the `attr` selector trick: a very high-specificity selector
that wraps the editor and forces children backgrounds. The contenteditable
container itself uses a CSS variable so it follows the theme. */
body.dark-theme .signature-html-editor,
body.dark-theme #mailbox-sig-editor,
body.dark-theme #user-sig-editor,
body.dark-theme #reply-editor,
body.dark-theme #sc-message {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border-color: var(--border) !important;
}
/* Force pasted Outlook elements to use the editor background.
`html body` boost beats simple `body` from email