/* ────────────────────────────────────────────────────────────────── CMS — Salesforce Lightning theme · light + dark switchable Toggle: document.documentElement.setAttribute('data-theme','dark') ────────────────────────────────────────────────────────────────── */ :root { /* ───── Soft airy "fox-manager" palette: pastel surfaces, white cards ───── */ --bg: #EEF2FB; /* subtle periwinkle behind cards */ --surface: #FFFFFF; /* cards */ --surface-2: #F4F7FC; /* alt rows / inset panels */ /* Sidebar — light periwinkle background, blue active pill */ --sidebar-bg: #F4F7FC; --sidebar-fg: #1F2A44; --sidebar-muted: #6B7894; --sidebar-hov: #E7EEFB; --sidebar-active-bg: #DDE8FF; --sidebar-active-fg: #2563EB; --sidebar-section: #98A2BD; --text: #0F172A; --text-2: #334155; --muted: #64748B; --line: #E5EAF2; --line-2: #EFF2F7; --primary: #2563EB; /* deeper, more refined blue */ --primary-2: #1D4ED8; --success: #22C55E; --warning: #F59E0B; --danger: #EF4444; --info: #06B6D4; --purple: #8B5CF6; /* KPI accent colors — vibrant, paired with their pastel backgrounds in CSS */ --kpi-1: #EF4444; /* coral red (Accounts Payable) */ --kpi-2: #F59E0B; /* warm amber (Receivable) */ --kpi-3: #22C55E; /* mint green (Total Sales) */ --kpi-4: #8B5CF6; /* lavender (Current Balance) */ --kpi-5: #FB7185; /* rose (Products) */ --kpi-6: #06B6D4; /* teal (Services) */ --kpi-7: #2563EB; /* royal blue (Customers) */ --kpi-8: #6366F1; /* indigo (Users) */ --kpi-9: #F97316; /* tangerine */ --kpi-10:#10B981; /* emerald */ --shadow-sm: 0 1px 3px rgba(15, 23, 42, .04); --shadow: 0 6px 22px -10px rgba(31, 41, 91, .12), 0 2px 6px rgba(15, 23, 42, .04); --radius: 14px; --radius-sm: 10px; --side-w: 232px; } html[data-theme="dark"] { --bg: #0B1220; --surface: #131C2E; --surface-2: #0F1828; --sidebar-bg: #0E1626; --sidebar-fg: #DDE3EE; --sidebar-muted:#7B8AA3; --sidebar-hov: #1A2336; --sidebar-active-bg: #14304F; --sidebar-active-fg: #5DA8FF; --sidebar-section: #5F6E84; --text: #E4E8F1; --text-2: #B5BDCD; --muted: #8B95A8; --line: rgba(255,255,255,.06); --line-2: rgba(255,255,255,.04); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 2px 12px rgba(0, 0, 0, .35); } * { box-sizing: border-box; } html, body { background: var(--bg); /* Hard guard: no page-level horizontal scroll under any circumstance */ overflow-x: hidden; max-width: 100vw; } .lds-body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); font-size: 12.5px; line-height: 1.45; overflow-x: hidden; } /* Universal overflow-protection — every element gets a sensible cap. Prevents long URLs, long names, fixed pixel widths from breaking the layout. */ .lds-h-shell, .lds-h-main, .lds-content, .lds-card, .lds-card__body, .lds-card-h2, .lds-row, .lds-row-2, .lds-kanban, .lds-kpis, .lds-pipeline, .lds-funnel-row, .lds-list-row, .lds-tl__row, .lds-form, .lds-hl, .lds-table, .lds-table tr, .lds-table td, .lds-table th { min-width: 0; } /* Long text inside cards/cells wraps safely */ .lds-card__body, .lds-card-h2, .lds-list-row__title, .lds-list-row__sub, .lds-tl__title, .lds-tl__sub, .lds-table td { overflow-wrap: anywhere; word-break: normal; } /* SVGs inside chart cards never push past their container */ svg.lds-chart, svg.lds-donut { max-width: 100%; height: auto; } /* Images cap at container width */ img { max-width: 100%; height: auto; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-2); } /* ─── Shell ─── */ .lds-shell { display: flex; min-height: 100vh; } .lds-side { width: var(--side-w); background: var(--sidebar-bg); color: var(--sidebar-fg); border-right: 1px solid transparent; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 10; box-shadow: inset -1px 0 0 var(--line); } .lds-side__brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); } .lds-side__logo { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, #0A6CFF 0%, #6B5BFF 100%); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; letter-spacing: .04em; } .lds-side__brand-name { font-weight: 700; font-size: 15px; line-height: 1.1; } .lds-side__brand-sub { font-size: 10px; color: var(--sidebar-muted); letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; } .lds-side__nav { flex: 1; padding: 10px 8px; overflow-y: auto; } .lds-side__section { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sidebar-section); font-weight: 600; padding: 14px 12px 6px; } .lds-side__link { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 14px; margin: 2px 0; color: var(--sidebar-fg); font-size: 13.5px; font-weight: 500; border-radius: 10px; text-decoration: none; transition: background .14s ease, color .14s ease; } .lds-side__link:hover { background: var(--sidebar-hov); text-decoration: none; } .lds-side__link.is-active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); font-weight: 600; box-shadow: 0 2px 8px rgba(37, 99, 235, .12); } .lds-side__link.is-active::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; background: var(--sidebar-active-fg); border-radius: 0 3px 3px 0; } .lds-side__badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 10px; background: #F97316; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .lds-side__badge--red { background: #EF4444; } .lds-side__badge--blue { background: #0A6CFF; } .lds-side__footer { padding: 12px 14px; border-top: 1px solid var(--line); } .lds-side__user { display: flex; align-items: center; gap: 10px; } .lds-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #0A6CFF 0%, #6B5BFF 100%); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 12px; } .lds-side__user-name { font-size: 13px; font-weight: 600; } .lds-side__user-role { font-size: 11px; color: var(--sidebar-muted); } /* ─── Main column ─── */ .lds-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .lds-header { background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px 24px; display: flex; align-items: center; gap: 18px; position: sticky; top: 0; z-index: 5; } .lds-header__title { font-size: 17px; font-weight: 700; line-height: 1.1; color: var(--text); } .lds-header__sub { font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: .02em; } .lds-header__search { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; } .lds-header__search input { flex: 1; background: transparent; border: 0; outline: none; font: inherit; color: inherit; font-size: 13px; } .lds-header__kbd { font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; font-family: monospace; } .lds-header__right { margin-left: auto; display: flex; gap: 8px; align-items: center; } .lds-icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; } /* The theme-toggle pill is 56×28 — wider than the round icon-btn shell. When the icon-btn wraps it, drop the circle styling so the pill is the only visible chrome and adjacent buttons don't get pushed/overlapped. */ .lds-icon-btn[data-theme-toggle] { width: auto; height: auto; padding: 0; border: 0; border-radius: 999px; background: transparent; } .lds-icon-btn[data-theme-toggle]:hover { background: transparent; } .lds-icon-btn:hover { background: var(--bg); } .lds-icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; background: var(--danger); border-radius: 50%; border: 2px solid var(--surface); } .lds-content { padding: 18px 24px 28px; } /* ─── Filter pills ─── */ .lds-pills { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .lds-pill { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 500; cursor: pointer; } .lds-pill.is-active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); border-color: var(--sidebar-active-bg); font-weight: 600; } /* ─── Configuration sub-nav — fixed-column grid so pills align in two clean rows ─── */ .lds-config-nav { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); /* 7 per row × ~2 rows = 14 pills aligned */ gap: 6px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); } .lds-config-nav__pill { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 10px; border-radius: 6px; border: 1px solid transparent; background: var(--surface); color: var(--text-2); font-size: 11px; font-weight: 500; line-height: 1.1; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s, color .12s, border-color .12s; } .lds-config-nav__pill:hover { background: var(--surface-2); color: var(--text); border-color: var(--line); } .lds-config-nav__pill.is-active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); border-color: var(--sidebar-active-bg); font-weight: 600; } .lds-config-nav__icon { font-size: 13px; line-height: 1; flex-shrink: 0; } .lds-config-nav__label { line-height: 1.1; overflow: hidden; text-overflow: ellipsis; } /* Responsive — fewer columns at narrower widths so labels stay readable */ @media (max-width: 1280px) { .lds-config-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 1080px) { .lds-config-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 880px) { .lds-config-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 640px) { .lds-config-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } } @media (max-width: 420px) { .lds-config-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .lds-config-nav__pill { padding: 6px 8px; font-size: 10.5px; } .lds-config-nav__icon { font-size: 12px; } } .lds-live { margin-left: auto; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; } .lds-live::before { content: ''; width: 8px; height: 8px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 3px rgba(16, 185, 129, .15); } /* ─── KPI grid (ultra-compact — 8 in one row at desktop) ─── */ /* KPI strip — auto-fit grid so any subset (e.g. 3 of 6 after authorization) redistributes evenly across the row. The dashboard view also passes an inline `--kpi-count` so the layout collapses to exactly N equal columns when N tiles are visible at a given role. */ .lds-kpis { display: grid; grid-template-columns: repeat(var(--kpi-count, 6), minmax(0, 1fr)) !important; gap: 8px; margin-bottom: 10px; } @media (max-width: 1180px) { .lds-kpis { gap: 6px; } } @media (max-width: 900px) { .lds-kpis { gap: 5px; } } @media (max-width: 600px) { .lds-kpis { grid-template-columns: repeat(min(3, var(--kpi-count, 6)), minmax(0, 1fr)) !important; gap: 6px; } } @media (max-width: 380px) { .lds-kpis { grid-template-columns: repeat(min(2, var(--kpi-count, 6)), minmax(0, 1fr)) !important; } } /* Compact KPI content so 6 tiles still read well at narrow widths */ @media (max-width: 1180px) { .lds-kpi { padding: 10px 11px; border-radius: 12px; } .lds-kpi__value { font-size: 18px; } .lds-kpi__label { font-size: 10.5px; } .lds-kpi__delta { font-size: 10px; } .lds-kpi__icon { width: 30px !important; height: 30px !important; font-size: 12px !important; border-radius: 10px; } } @media (max-width: 900px) { .lds-kpi { padding: 8px 9px; } .lds-kpi__value { font-size: 16px; } .lds-kpi__label { font-size: 10px; } .lds-kpi__delta { font-size: 9.5px; } .lds-kpi__icon { width: 26px !important; height: 26px !important; font-size: 11px !important; } } .lds-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); position: relative; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .lds-kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(31, 41, 91, .18), 0 4px 10px rgba(15, 23, 42, .05); } .lds-kpi__row { display: flex; align-items: center; gap: 5px; /* used as the top row: icon on the left, delta on the right */ } .lds-kpi__icon { width: 36px !important; height: 36px !important; border-radius: 12px; background: color-mix(in oklab, var(--kpi-color, var(--kpi-1)) 16%, transparent); color: var(--kpi-color, var(--kpi-1)); display: flex !important; align-items: center; justify-content: center; font-size: 14px !important; flex-shrink: 0; margin-bottom: 2px; } .lds-kpi__icon .lds-icon { width: 18px; height: 18px; } .lds-kpi__delta { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--muted); line-height: 1; white-space: nowrap; } .lds-kpi__delta.up { color: var(--success); } .lds-kpi__delta.down { color: var(--danger); } .lds-kpi__delta.flat { color: var(--muted); } .lds-kpi__value { font-size: 22px; font-weight: 800; line-height: 1.05; color: var(--text); margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; } .lds-kpi__label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } /* Combo KPI value: two numbers (count + amount) rendered with the same big bold style */ .lds-kpi__value--combo { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 700; line-height: 1.1; } .lds-kpi__value--combo > span:not(.lds-kpi__sep) { color: var(--text); } .lds-kpi__sep { color: var(--muted); font-weight: 600; opacity: .7; } /* Split combo KPI — two cells (Leads | Value · Deals | Value) side-by-side each with their own tiny uppercase label sitting above the number. */ .lds-kpi--split { padding: 6px 8px 6px 8px; } .lds-kpi__split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; margin-top: 2px; } .lds-kpi__split-cell { position: relative; padding: 0 0 0 0; min-width: 0; overflow: hidden; } .lds-kpi__split-cell + .lds-kpi__split-cell { padding-left: 8px; border-left: 1px solid var(--line); } .lds-kpi__split-label { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kpi-color, var(--muted)); line-height: 1; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lds-kpi__split-num { font-size: 14px; font-weight: 700; line-height: 1.1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Hide the regular .lds-kpi__label since each cell has its own */ .lds-kpi--split > .lds-kpi__label { display: none; } /* Visual breathing room between adjacent combo tiles (Leads · Value | Deals · Value) so they read as two distinct KPIs rather than a continuous block. */ .lds-kpi--combo + .lds-kpi--combo { margin-left: 10px; border-left: 3px solid color-mix(in oklab, var(--kpi-color, var(--kpi-1)) 40%, transparent); } .lds-kpi--combo + .lds-kpi--combo::before { content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); width: 2px; height: 18px; border-radius: 1px; background: var(--line); } /* ─── Card (airy, soft pastel theme) ─── */ .lds-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 14px; } .lds-card__head { padding: 9px 12px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); font-weight: 700; } .lds-card__head::before { content: ''; width: 3px; height: 12px; background: var(--primary); border-radius: 2px; } .lds-card__head .right { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); font-size: 10.5px; } .lds-card__body { padding: 12px; } /* ─── Pipeline chevrons (one-line compact, responsive) ─── */ .lds-pipeline { display: flex; gap: 6px; align-items: stretch; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .lds-pipeline > .lds-pipe-card { flex: 1 1 0; min-width: 0; } .lds-pipe-card { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent, var(--primary)); border-radius: 6px; padding: 6px 8px; position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; min-height: 0; } /* No more chevron arrow — keeps spacing tight on every row */ .lds-pipe-card::after { display: none !important; } .lds-pipe__num { grid-row: 1; grid-column: 1; font-size: 12px; font-weight: 800; color: var(--accent, var(--primary)); line-height: 1; letter-spacing: -.01em; } .lds-pipe__label { grid-row: 2; grid-column: 1; font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 2px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lds-pipe__status { grid-row: 1 / span 2; grid-column: 2; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--accent, var(--text)); line-height: 1; letter-spacing: -.01em; white-space: nowrap; } .lds-pipe__status::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent, var(--success)); flex-shrink: 0; } /* On tablet and below — give each card a minimum width so they scroll horizontally if needed */ /* On smaller viewports the KPI cards stay stretchable (flex: 1 1 0) but are allowed to wrap to a second row when there's no horizontal room. This means visible cards always fill the row width — never leaving a trailing gap when a role can only see 3 of 6 tiles. */ @media (max-width: 1100px) { .lds-pipeline { flex-wrap: wrap; } .lds-pipeline > .lds-pipe-card { flex: 1 1 130px; min-width: 130px; } } @media (max-width: 700px) { .lds-pipeline > .lds-pipe-card { flex: 1 1 120px; min-width: 120px; } } /* ─── Layout grid for charts row ─── Auto-fit so the row redistributes whatever children render. This is the key to making the dashboard align cleanly for non-Director / non-VP roles where the @dwidget Blade directive removes some widgets entirely from the DOM. Inline style="grid-template-columns: 2fr 1fr;" overrides still work. */ .lds-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; } @media (max-width: 768px) { .lds-row { grid-template-columns: 1fr; gap: 8px; } } .lds-row > * { min-width: 0; } /* prevent overflow when card body has wide SVG/table */ /* Top-band layout: KPI strip + Sales Pipeline (left, stacked) | Recent Activity (right, full height). align-items:stretch (CSS-grid default) makes both columns share the row's tallest height, so the Recent Activity card aligns flush with the bottom of the Sales Pipeline card. When Recent Activity is hidden for a role (the @dwidget skips it), the left column collapses to single-column via :only-child rule below. */ .lds-top-band { align-items: stretch; } .lds-top-band__right { height: 100%; min-height: 0; } .lds-top-band__right .lds-card__body { min-height: 0; } .lds-top-band__left:only-child { grid-column: 1 / -1; } /* span full width when alone */ @media (max-width: 1100px) { .lds-top-band { grid-template-columns: 1fr !important; } .lds-top-band__right { max-height: 360px; } } /* Cards inside the same lds-row have the same height (so Lead Stage, Top Customers, Leads by Source, etc. all line up at the bottom). The internal scroll containers (lists, charts) cope fine with the stretch. Cards that don't render for a given role simply disappear, and the remaining ones redistribute via auto-fit. */ .lds-row > .lds-card { display: flex; flex-direction: column; min-height: 0; } .lds-row > .lds-card > .lds-card__body { flex: 1 1 auto; min-height: 0; } /* Same alignment for the top band's left column (KPI strip + Sales Pipeline stacked) and any other free-standing card. Ensures non-Director users see tidy rectangular blocks regardless of which widgets DashboardConfig hid. */ .lds-top-band__left > .lds-card { display: flex; flex-direction: column; min-height: 0; } /* Auto-balanced KPI strip: when a role can't see all 6 KPI cards, the remaining ones grow evenly to fill the row instead of leaving a gap. `flex: 1 1 0` makes every visible card take an equal share of the row width — 6 cards = 1/6 each, 3 cards = 1/3 each, 1 card = full width. */ .lds-pipeline { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; } .lds-pipeline > * { flex: 1 1 0; min-width: 0; } /* Standalone cards (KPI strip, Sales Pipeline) outside lds-row still stack with consistent gap */ .lds-h-main > .lds-card { margin-bottom: 10px; } /* Inline overrides like style="grid-template-columns: 2fr 1fr;" still kick in above 768px but on mobile we force a single column for ALL .lds-row variants */ @media (max-width: 768px) { [class*="lds-row"][style*="grid-template-columns"] { grid-template-columns: 1fr !important; } } .lds-row-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; } @media (max-width: 1024px) { .lds-row-2 { grid-template-columns: 1fr; } } /* ─── Sales/Spend trend chart svg ─── */ .lds-chart { width: 100%; height: 200px; } .lds-legend { display: flex; gap: 16px; font-size: 12px; padding: 0 16px 8px; } .lds-legend__item { display: flex; align-items: center; gap: 6px; color: var(--text-2); } .lds-legend__dot { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid currentColor; } /* ─── Donut + legend ─── */ .lds-donut-wrap { display: flex; align-items: center; gap: 14px; } .lds-donut { width: 140px; height: 140px; } .lds-donut__legend { flex: 1; font-size: 12.5px; } .lds-donut__row { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--text-2); } .lds-donut__dot { width: 8px; height: 8px; border-radius: 50%; } .lds-donut__count { margin-left: auto; font-weight: 700; color: var(--text); } /* ─── Funnel bars (compact) ─── */ .lds-funnel-row { display: grid; grid-template-columns: 100px 1fr 40px 50px; gap: 8px; align-items: center; padding: 4px 0; font-size: 11.5px; } .lds-funnel-row__label { color: var(--text-2); font-weight: 500; } .lds-bar { height: 6px; background: var(--line); border-radius: 999px; position: relative; overflow: hidden; } .lds-bar__fill { height: 100%; background: var(--accent, var(--primary)); border-radius: 999px; } .lds-funnel-row__count { text-align: right; font-weight: 700; color: var(--text); } .lds-funnel-row__pct { text-align: right; font-size: 10.5px; color: var(--muted); } /* ─── Data table (compact) ─── */ .lds-table { width: 100%; border-collapse: collapse; } .lds-table thead tr { background: var(--surface-2); } .lds-table th { text-align: left; padding: 7px 10px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); } .lds-table td { padding: 7px 10px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; vertical-align: middle; color: var(--text); } .lds-table tr:last-child td { border-bottom: 0; } .lds-table tr:hover td { background: var(--surface-2); } /* Reusable alignment helpers (Lead Report + future big tables) */ .lds-table .t-l { text-align: left !important; } .lds-table .t-c { text-align: center !important; } .lds-table .t-r { text-align: right !important; } .lds-table .t-nowrap { white-space: nowrap; } .lds-table .t-trunc { max-width: 0; /* lets the colgroup width define overflow boundary */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Lead Report ───────────────────────────────────────────────── Headings get clipped + ellipsis so a heading label that's slightly wider than its column never spills into its neighbour (was causing visible overlap between adjacent column titles). `table-layout: fixed` plus `overflow: hidden` on every cell guarantees that the title row, filter row and body all share identical column boundaries — so as the table scrolls horizontally, headings and data stay perfectly aligned. Title row allows soft wrapping (white-space: normal) and aligns to the bottom so a 2-line title doesn't push the filter row out of place. */ .lds-report-table { table-layout: fixed; } .lds-report-table thead tr:first-child th { white-space: normal; /* allow long titles to wrap onto 2 lines */ word-break: keep-all; line-height: 1.2; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; min-height: 28px; } .lds-report-table thead th { vertical-align: middle; } .lds-report-table thead .lds-report-filter-row th { padding: 4px 6px; vertical-align: middle; overflow: hidden; /* keep filter inputs from forcing column expansion */ } .lds-report-table thead .lds-report-filter-row th input, .lds-report-table thead .lds-report-filter-row th select { max-width: 100%; box-sizing: border-box; } .lds-report-table tbody td { font-variant-numeric: tabular-nums; overflow: hidden; /* clip body cells too so they line up with header columns */ text-overflow: ellipsis; } .lds-report-table tbody td.t-trunc { white-space: nowrap; } /* Make the title row sticky so headings stay visible while scrolling the table vertically; horizontal scroll still works as before. */ .lds-table-wrap .lds-report-table thead { position: sticky; top: 0; z-index: 2; background: var(--surface); } .lds-table-wrap .lds-report-table thead tr { background: var(--surface-2); } .lds-table-wrap .lds-report-table thead th { background: var(--surface-2); } /* ─── Badges + status ─── */ .lds-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.2; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); } .lds-badge--success { background: rgba(16, 185, 129, .12); color: var(--success); border-color: transparent; } .lds-badge--warn { background: rgba(245, 158, 11, .12); color: var(--warning); border-color: transparent; } .lds-badge--danger { background: rgba(239, 68, 68, .12); color: var(--danger); border-color: transparent; } .lds-badge--info { background: rgba(10, 108, 255, .12); color: var(--primary); border-color: transparent; } .lds-badge--purple { background: rgba(139, 92, 246, .12); color: var(--purple); border-color: transparent; } .lds-badge--ghost { background: transparent; } /* Score grade pill */ .lds-grade { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 12px; } .lds-grade--a { background: var(--success); } .lds-grade--b { background: var(--warning); } .lds-grade--c { background: var(--info); } .lds-grade--d { background: var(--danger); } /* ─── Buttons ─── */ .lds-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 13px/1 'Inter', sans-serif; cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; } .lds-btn:hover { background: var(--surface-2); text-decoration: none; box-shadow: 0 4px 10px rgba(15, 23, 42, .07); } .lds-btn:active { transform: translateY(1px); } .lds-btn--primary { background: var(--primary); color: #fff !important; border-color: var(--primary); box-shadow: 0 4px 14px -4px rgba(37, 99, 235, .45); } .lds-btn--primary:hover { background: var(--primary-2); border-color: var(--primary-2); box-shadow: 0 6px 18px -4px rgba(37, 99, 235, .50); } .lds-btn--success { background: var(--success); color: #fff !important; border-color: var(--success); box-shadow: 0 4px 14px -4px rgba(34, 197, 94, .35); } .lds-btn--danger { background: var(--danger); color: #fff !important; border-color: var(--danger); box-shadow: 0 4px 14px -4px rgba(239, 68, 68, .35); } /* ─── Forms (compact + sectioned) ─── */ .lds-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; } .lds-form .full { grid-column: 1 / -1; } .lds-form .col-2 { grid-column: span 2; } @media (max-width: 1024px) { .lds-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lds-form .col-2 { grid-column: span 2; } } @media (max-width: 640px) { .lds-form { grid-template-columns: 1fr; } .lds-form .col-2 { grid-column: auto; } } .lds-form label { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .04em; } .lds-form input, .lds-form select, .lds-form textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface); transition: border-color .12s, box-shadow .12s; } .lds-form input:hover, .lds-form select:hover, .lds-form textarea:hover { border-color: #cdd5e2; } .lds-form input:focus, .lds-form select:focus, .lds-form textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent); } .lds-form textarea { min-height: 60px; resize: vertical; } /* Section header — spans the full row, stylized rule before/after */ .lds-form-section { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); font-weight: 700; } .lds-form-section::before { content: ''; display: inline-block; width: 3px; height: 12px; background: var(--primary); border-radius: 2px; } .lds-form-section::after { content: ''; flex: 1; height: 1px; background: var(--line-2); } /* First section gets no top margin */ .lds-form > .lds-form-section:first-child { margin-top: 0; } /* Form actions row */ .lds-form-actions { margin-top: 14px; display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-2); } /* ─── Page head (compact) ─── */ .lds-page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .lds-page-head h1 { font-size: 16px; font-weight: 700; margin: 0; color: var(--text); } .lds-page-head__actions { margin-left: auto; display: flex; gap: 6px; } /* ─── Highlights Panel + Path (kept from old theme) ─── */ .lds-hl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .lds-hl__top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .lds-hl__icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; flex-shrink: 0; } .lds-hl__title { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--text); } .lds-hl__subtitle { font-size: 11px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .lds-hl__actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .lds-hl__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; padding-top: 12px; border-top: 1px solid var(--line-2); } .lds-hl__fields > * { min-width: 0; } /* let grid items shrink so long values wrap inside their cell */ .lds-hl__field-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 4px; } .lds-hl__field-value { font-size: 13px; font-weight: 500; color: var(--text); /* Long values like emails (manoj.long.handle@example.co.in) used to push neighbouring cells out of alignment; wrap aggressively inside the cell and break-all as a final fallback so nothing ever spills into the next column. */ overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; } .lds-path { display: flex; gap: 2px; padding: 0; margin: 0 0 16px; list-style: none; } .lds-path__stage { flex: 1; padding: 10px 14px 10px 28px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); text-transform: capitalize; text-align: center; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); margin-right: -14px; color: var(--text-2); } .lds-path__stage:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); } .lds-path__stage:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); margin-right: 0; } .lds-path__stage--done { background: var(--success); color: #fff; border-color: var(--success); } .lds-path__stage--current { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); } /* ─── Kanban (fits the viewport — equal columns, no horizontal scroll) ─── */ .lds-kanban { display: grid; grid-template-columns: repeat(var(--kb-cols, 7), minmax(0, 1fr)); gap: 8px; padding-bottom: 4px; } @media (max-width: 1280px) { .lds-kanban { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1024px) { .lds-kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .lds-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .lds-kanban { grid-template-columns: 1fr; } } .lds-kanban__col { min-width: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; } .lds-kanban__col-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-weight: 700; font-size: 12px; color: var(--text); gap: 6px; min-width: 0; } .lds-kanban__col-head > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .lds-kanban__col-total { font-size: 10.5px; color: var(--muted); font-weight: 500; white-space: nowrap; } .lds-kanban__card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; margin-bottom: 6px; box-shadow: var(--shadow-sm); min-width: 0; } .lds-kanban__card-title { font-weight: 600; font-size: 12px; margin-bottom: 2px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lds-kanban__card-meta { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lds-kanban__card-amount { font-weight: 700; color: var(--success); font-size: 11.5px; margin-top: 3px; } /* ─── Login page (NexLink-style centered card) ─── */ .lds-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: radial-gradient(1200px 600px at -10% -10%, rgba(10, 108, 255, .14), transparent 60%), radial-gradient(1000px 600px at 110% 110%, rgba(139, 92, 246, .14), transparent 60%), var(--bg); position: relative; } html[data-theme="dark"] .lds-auth { background: radial-gradient(1200px 600px at -10% -10%, rgba(10, 108, 255, .22), transparent 60%), radial-gradient(1000px 600px at 110% 110%, rgba(195, 45, 110, .18), transparent 60%), #0B1220; } .lds-auth__theme { position: absolute; top: 16px; right: 16px; } .lds-auth__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; justify-content: center; } .lds-auth__brand-logo { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #0A6CFF 0%, #6B5BFF 100%); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(10, 108, 255, .35); } .lds-auth__brand-name { font-weight: 700; font-size: 18px; } .lds-auth__brand-sub { font-size: 11px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; } .lds-auth__card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px 28px 24px; box-shadow: 0 20px 50px rgba(15, 26, 45, .12); color: var(--text); } html[data-theme="dark"] .lds-auth__card { box-shadow: 0 20px 50px rgba(0, 0, 0, .35); } .lds-auth__title { font-size: 20px; font-weight: 700; text-align: center; margin: 4px 0 4px; } .lds-auth__sub { font-size: 12.5px; color: var(--muted); text-align: center; margin-bottom: 18px; } .lds-auth__row { margin-bottom: 12px; } .lds-auth__label { display: block; font-size: 11px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; } .lds-auth__input { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px; transition: border-color .15s, box-shadow .15s; } .lds-auth__input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent); } .lds-auth__pwwrap { position: relative; } .lds-auth__pwtoggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--muted); cursor: pointer; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .lds-auth__pwtoggle:hover { background: var(--surface-2); color: var(--text); } .lds-auth__hint { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin: 4px 0 16px; } .lds-auth__hint label { display: flex; align-items: center; gap: 6px; color: var(--text-2); cursor: pointer; } .lds-auth__hint input[type="checkbox"] { accent-color: var(--primary); } .lds-auth__hint a { color: var(--primary); font-weight: 600; } .lds-auth__btn { width: 100%; padding: 11px 14px; border-radius: 10px; background: linear-gradient(135deg, #0A6CFF 0%, #6B5BFF 100%); color: #fff; border: 0; font: 700 13.5px/1 'Inter', sans-serif; cursor: pointer; box-shadow: 0 6px 14px rgba(10, 108, 255, .25); transition: transform .1s, box-shadow .15s; } .lds-auth__btn:hover { box-shadow: 0 10px 20px rgba(10, 108, 255, .35); } .lds-auth__btn:active { transform: translateY(1px); } .lds-auth__divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--muted); font-size: 11px; } .lds-auth__divider::before, .lds-auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .lds-auth__socials { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 18px; } .lds-auth__social { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font: 600 12px/1 'Inter', sans-serif; text-decoration: none; cursor: pointer; } .lds-auth__social:hover { background: var(--bg); } .lds-auth__social svg { width: 14px; height: 14px; } .lds-auth__signup { text-align: center; font-size: 12.5px; color: var(--muted); } .lds-auth__signup a { color: var(--primary); font-weight: 600; } .lds-auth__demo { margin-top: 16px; padding: 10px 12px; background: var(--surface-2); border: 1px dashed var(--line); border-radius: 10px; font-size: 11.5px; color: var(--muted); text-align: center; } .lds-auth__demo code { color: var(--text); background: transparent; } .lds-auth__error { background: color-mix(in oklab, var(--danger) 12%, transparent); color: var(--danger); border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent); padding: 9px 12px; border-radius: 10px; font-size: 12.5px; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; } @media (max-width: 480px) { .lds-auth { padding: 16px 12px; } .lds-auth__card { padding: 22px 20px; border-radius: 14px; } .lds-auth__title { font-size: 18px; } .lds-auth__socials { grid-template-columns: 1fr; } } /* ─── Theme toggle — iOS-style on/off switch ───────────────────── Off (light mode): pale grey track, knob on the left, sun icon. On (dark mode): indigo track, knob on the right, moon icon. Kept large enough that both states are obvious at a glance and the ☀ / ☾ track hints stay readable on either theme. */ .lds-theme-toggle { width: 56px; height: 28px; background: #E5E7EB; /* off-state track (slate-200) */ border: 1px solid rgba(15, 23, 42, .15); border-radius: 999px; position: relative; cursor: pointer; display: inline-flex; align-items: center; padding: 2px; transition: background .25s, border-color .25s; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08); } /* Tiny ☀ / ☾ markers anchored at the ends of the track. They stay put while the knob slides over them, mirroring iOS-style switches. */ .lds-theme-toggle::before, .lds-theme-toggle::after { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px; line-height: 1; pointer-events: none; transition: opacity .25s; } .lds-theme-toggle::before { content: "☀"; left: 6px; color: #F59E0B; opacity: 1; } .lds-theme-toggle::after { content: "☾"; right: 6px; color: #94A3B8; opacity: .5; } /* Knob */ .lds-theme-toggle__knob { width: 22px; height: 22px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 1px 3px rgba(15, 23, 42, .25), 0 0 0 1px rgba(15, 23, 42, .06); transition: transform .25s cubic-bezier(.4, 0, .2, 1), background .25s; display: flex; align-items: center; justify-content: center; color: #F59E0B; /* sun colour in the off state */ z-index: 1; /* sits above the ☀/☾ track markers */ } /* ── ON state (dark mode) ─────────────────────────────────────── */ html[data-theme="dark"] .lds-theme-toggle { background: linear-gradient(135deg, #4F46E5, #6366F1); /* indigo "on" track */ border-color: rgba(99, 102, 241, .55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); } html[data-theme="dark"] .lds-theme-toggle::before { opacity: .35; color: #FCD34D; } html[data-theme="dark"] .lds-theme-toggle::after { opacity: 1; color: #FFFFFF; } html[data-theme="dark"] .lds-theme-toggle__knob { transform: translateX(28px); background: #F8FAFC; color: #4F46E5; /* moon-tinted icon in the knob */ box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .35); } /* Swap the in-knob icon to a moon when dark mode is on. The button markup has a single .lds-icon--sun span; we simply override its mask-image so the same element morphs into a moon. */ html[data-theme="dark"] .lds-theme-toggle__knob .lds-icon--sun { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Hover affordance */ .lds-theme-toggle:hover { border-color: rgba(15, 23, 42, .28); } html[data-theme="dark"] .lds-theme-toggle:hover { border-color: rgba(99, 102, 241, .85); } /* ─── Pagination (Laravel) ─── */ .pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; } .pagination li > * { padding: 5px 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 6px; font-size: 12px; text-decoration: none; } .pagination li.active > * { background: var(--primary); color: #fff; border-color: var(--primary); } .pagination li.disabled > * { color: var(--muted); } /* ─── Lucide-style mask icons ─── */ .lds-icon { display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; flex-shrink: 0; } .lds-icon--home { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--user-plus { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--building { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--users { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--briefcase { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--calendar { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--life-ring { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--megaphone { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--package { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--file-text { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--bar-chart { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--shield { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--cog { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--search { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); width: 14px; height: 14px; } .lds-icon--bell { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); width: 16px; height: 16px; } .lds-icon--user-circle { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); width: 16px; height: 16px; } .lds-icon--alert { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--check { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--rupee { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--trending { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--star { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--circle { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .lds-icon--moon { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); width: 12px; height: 12px; } .lds-icon--sun { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); width: 12px; height: 12px; } @media (max-width: 768px) { .lds-side { width: 64px; } .lds-side__brand-name, .lds-side__brand-sub, .lds-side__user-name, .lds-side__user-role, .lds-side__link span:not(.lds-icon), .lds-side__section, .lds-side__badge { display: none; } } /* ───────────────────────────────────────────────────────────────── HORIZONTAL LAYOUT (Crm2-inspired top-nav variant) ───────────────────────────────────────────────────────────────── */ .lds-h-shell { display: flex; flex-direction: column; min-height: 100vh; } .lds-h-brandbar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px 24px; display: flex; align-items: center; gap: 18px; position: sticky; top: 0; z-index: 6; } .lds-h-brandbar__logo { width: 110px; height: 64px; border-radius: 12px; background: #fff; border: 1px solid rgba(15,23,42,.08); box-shadow: 0 1px 3px rgba(15,23,42,.06); display: flex; align-items: center; justify-content: center; padding: 4px 10px; flex-shrink: 0; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .lds-h-brandbar__logo:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,.10); } .lds-h-brandbar__logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .lds-h-brandbar__title { font-size: 16px; font-weight: 700; line-height: 1; } .lds-h-brandbar__sub { font-size: 10px; color: var(--muted); margin-top: 3px; letter-spacing: .14em; text-transform: uppercase; } .lds-h-topnav { background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 24px; display: flex; align-items: stretch; gap: 4px; position: sticky; top: 65px; z-index: 5; overflow-x: auto; } .lds-h-topnav__link { padding: 12px 14px; color: var(--text-2); font-size: 13.5px; font-weight: 500; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; display: flex; align-items: center; gap: 8px; } .lds-h-topnav__link:hover { color: var(--primary); text-decoration: none; } .lds-h-topnav__link.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } /* Colored pastel pill icons in the top nav (Dashboard / Reports / Leads / etc.) Background + foreground come in via inline style so every browser renders correctly regardless of color-mix() support. */ .lds-h-topnav__pill { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .15s ease, filter .15s ease; } .lds-h-topnav__link--colored:hover .lds-h-topnav__pill { transform: scale(1.08); filter: brightness(.96); } .lds-h-topnav__link--colored.is-active .lds-h-topnav__pill { background: var(--nav-fg, var(--primary)) !important; color: #fff !important; box-shadow: 0 4px 10px -3px var(--nav-fg, var(--primary)); } .lds-h-main { padding: 14px 18px 22px; } /* ─── Themed confirmation modal & toast strip ───────────────────────── */ .lds-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: none; opacity: 0; transition: opacity .12s ease; } .lds-modal.is-open { pointer-events: auto; opacity: 1; } .lds-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .lds-modal__dialog { position: relative; width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px 18px; box-shadow: 0 30px 60px -12px rgba(15, 23, 42, .35), 0 12px 28px -10px rgba(15, 23, 42, .20); transform: translateY(8px) scale(.98); transition: transform .18s cubic-bezier(.22,1,.36,1); } .lds-modal.is-open .lds-modal__dialog { transform: translateY(0) scale(1); } .lds-modal__icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(239, 68, 68, .12); color: #DC2626; font-size: 22px; font-weight: 800; margin: 0 auto 12px; } .lds-modal__title { text-align: center; font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.25; margin-bottom: 6px; } .lds-modal__body { text-align: center; font-size: 13px; line-height: 1.5; color: var(--text-2); margin-bottom: 20px; } .lds-modal__actions { display: flex; gap: 8px; justify-content: center; } .lds-modal__actions .lds-btn { min-width: 96px; } /* ─── Toasts (auto-show flash / errors at top-right) ───────────── */ .lds-toasts { position: fixed; top: 16px; right: 16px; z-index: 9998; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); pointer-events: none; } .lds-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary, #3B82F6); border-radius: 10px; box-shadow: 0 10px 24px -8px rgba(15, 23, 42, .18), 0 3px 8px -3px rgba(15, 23, 42, .10); font-size: 12.5px; color: var(--text); min-width: 240px; max-width: 380px; opacity: 0; transform: translateX(12px); transition: opacity .18s ease, transform .18s ease; } .lds-toast.is-shown { opacity: 1; transform: translateX(0); } .lds-toast--success { border-left-color: #10B981; } .lds-toast--success .lds-toast__icon { background: rgba(16,185,129,.14); color: #047857; } .lds-toast--error { border-left-color: #EF4444; } .lds-toast--error .lds-toast__icon { background: rgba(239,68,68,.14); color: #B91C1C; } .lds-toast--info { border-left-color: #3B82F6; } .lds-toast--info .lds-toast__icon { background: rgba(59,130,246,.14); color: #1D4ED8; } .lds-toast__icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; flex-shrink: 0; } .lds-toast__msg { line-height: 1.45; word-wrap: break-word; flex: 1; min-width: 0; } .lds-toast__close { appearance: none; background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 18px; line-height: 1; flex-shrink: 0; } .lds-toast__close:hover { color: var(--text); } /* Site footer — auto-prints on every authenticated page via layouts/app.blade.php */ .lds-footer { text-align: center; padding: 14px 18px 22px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 8px; background: var(--surface); } .lds-footer a { color: var(--primary, #2563EB); text-decoration: none; font-weight: 600; } .lds-footer a:hover { text-decoration: underline; } /* Welcome banner (compact) — now also hosts the dashboard filters */ .lds-welcome { background: linear-gradient(115deg, #0A6CFF 0%, #6B5BFF 60%, #C2185B 100%); color: #fff; border-radius: 10px; padding: 12px 18px; margin-bottom: 10px; box-shadow: 0 4px 14px rgba(10, 108, 255, .22); } .lds-welcome__top { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; } .lds-welcome__hi { font-size: 12px; opacity: .85; } .lds-welcome__name { font-size: 17px; font-weight: 700; line-height: 1.2; margin-top: 1px; } .lds-welcome__msg { font-size: 11.5px; opacity: .92; margin-top: 4px; } .lds-welcome__stats { display: flex; gap: 16px; align-items: center; } .lds-welcome__sep { width: 1px; height: 36px; background: rgba(255, 255, 255, .25); } .lds-welcome__stat-num { font-size: 18px; font-weight: 700; line-height: 1; } .lds-welcome__stat-lbl { font-size: 9.5px; opacity: .85; margin-top: 2px; letter-spacing: .06em; text-transform: uppercase; } /* In-banner filter row */ .lds-welcome__filters { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .18); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .lds-welcome__flabel { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .85; } .lds-welcome__fctl { appearance: none; -webkit-appearance: none; padding: 6px 28px 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .15); color: #fff; font: 600 12px/1 'Inter', sans-serif; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%), linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; transition: background-color .15s, border-color .15s; } .lds-welcome__fctl:hover { background-color: rgba(255, 255, 255, .25); border-color: rgba(255, 255, 255, .55); } .lds-welcome__fctl:focus { outline: 0; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); } .lds-welcome__fctl option { color: #16325C; background: #fff; } /* dropdown items legible */ /* Compact mode — used when many filter pills (Person, Zone, Region, Product, From, To) need to fit */ .lds-filters--compact { gap: 6px; row-gap: 6px; } .lds-filters--compact .lds-welcome__flabel { font-size: 9.5px; opacity: .8; } .lds-filters--compact .lds-welcome__fctl { font-size: 11px; padding: 4px 22px 4px 9px; background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%; max-width: 180px; text-overflow: ellipsis; } .lds-filters--compact input[type="date"].lds-welcome__fctl { padding-right: 8px; min-width: 130px; background-image: none; /* date input has its own native picker */ } /* Active filter strip — sits on its own row directly under the filter selects */ .lds-welcome__factive { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 11px; } .lds-welcome__factive-lbl { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .8; margin-right: 4px; } .lds-welcome__factive .lds-welcome__fpill { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28); padding: 3px 9px; border-radius: 999px; font-weight: 600; line-height: 1.4; } .lds-welcome__factive .lds-welcome__fclear { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.18); color: #fff; font-weight: 600; text-decoration: none; font-size: 11px; } .lds-welcome__factive .lds-welcome__fclear:hover { background: rgba(0,0,0,.32); } .lds-welcome__fclear { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #C2185B; font: 700 11.5px/1 'Inter', sans-serif; text-decoration: none; } .lds-welcome__fclear:hover { background: #fff; text-decoration: none; } .lds-welcome__fpills { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .lds-welcome__fpill { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); color: #fff; border: 1px solid rgba(255, 255, 255, .3); font-size: 11px; font-weight: 600; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } @media (max-width: 768px) { .lds-welcome__top { grid-template-columns: 1fr; gap: 10px; } .lds-welcome__filters{ gap: 6px; } .lds-welcome__fpills { margin-left: 0; flex-basis: 100%; } .lds-welcome__fctl { font-size: 11.5px; padding: 5px 24px 5px 10px; } } /* Chart card title bar (compact) */ .lds-card-h2 { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line-2); } .lds-card-h2 h3 { font-size: 12px; font-weight: 700; margin: 0; letter-spacing: .02em; } .lds-card-h2 .right { margin-left: auto; font-size: 10.5px; color: var(--muted); } /* Recent / List rows (compact) */ .lds-list-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--line-2); } .lds-list-row:last-child { border-bottom: 0; } .lds-list-row__title { font-weight: 600; font-size: 12px; color: var(--text); } .lds-list-row__sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; } .lds-list-row__amt { margin-left: auto; font-weight: 700; color: var(--success); font-size: 12px; } /* Activity timeline (compact) */ .lds-tl { padding: 2px 0; } .lds-tl__row { position: relative; padding: 6px 12px 6px 28px; } .lds-tl__row::before { content: ''; position: absolute; left: 14px; top: 12px; bottom: -6px; width: 2px; background: var(--line); } .lds-tl__row:last-child::before { bottom: 12px; } .lds-tl__dot { position: absolute; left: 9px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); border: 2px solid var(--surface); } .lds-tl__title { font-weight: 600; font-size: 12px; } .lds-tl__sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; } /* ─── Salesperson paired vertical bars (Deals / Leads by Salesperson) ─── */ .lds-vbars { display: flex; align-items: stretch; gap: 12px; height: 200px; padding: 0 6px; position: relative; background-image: linear-gradient(to bottom, transparent calc(33.333% - 1px), rgba(15, 23, 42, .06) 33.333%, transparent calc(33.333% + 1px)), linear-gradient(to bottom, transparent calc(66.666% - 1px), rgba(15, 23, 42, .06) 66.666%, transparent calc(66.666% + 1px)); background-size: 100% 100%; background-repeat: no-repeat; } .lds-vbars__group { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; /* Bars grow upward from the bottom */ } .lds-vbars__pair { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: 5px; } .lds-vbars__bar { width: 16px; min-width: 10px; border-radius: 6px 6px 2px 2px; transition: filter .15s ease, transform .15s ease; cursor: default; position: relative; /* Inline height: N% applies — parent is the flex pair which fills available vertical space. */ } .lds-vbars__bar:hover { filter: brightness(1.08); transform: translateY(-2px); } .lds-vbars__bar::before { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #0F172A; color: #fff; padding: 3px 8px; border-radius: 5px; font-size: 10.5px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; } .lds-vbars__bar:hover::before { opacity: 1; } /* Primary (taller) bar = total value — deep brand-navy */ .lds-vbars__bar--primary { background: linear-gradient(180deg, #2A3548 0%, #1E2A40 100%); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); } /* Secondary bar = count — mint/teal accent */ .lds-vbars__bar--secondary { background: linear-gradient(180deg, #2DD4BF 0%, #14B8A6 100%); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); } .lds-vbars__label { flex: 0 0 auto; text-align: center; margin-top: 8px; font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lds-vbars__legend { display: flex; gap: 18px; padding: 12px 6px 2px; margin-top: 6px; border-top: 1px solid var(--line-2); font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .04em; } .lds-vbars__legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; } .lds-vbars__legend .dot--primary { background: #2A3548; } .lds-vbars__legend .dot--secondary { background: #14B8A6; } /* Clickable timeline rows (Recent Activity on dashboard) */ .lds-tl__row--link { transition: background .12s ease; cursor: pointer; } .lds-tl__row--link:hover { background: var(--surface-2, rgba(0,0,0,.03)); } .lds-tl__row--link:hover .lds-tl__title { color: var(--primary); } /* Top Customers compact rank list (dashboard) */ .lds-tc-row { transition: background .12s ease, transform .12s ease; } .lds-tc-row:hover { background: var(--surface-2, rgba(0,0,0,.03)); transform: translateX(2px); text-decoration: none; } .lds-tc-row:last-child { border-bottom: 0 !important; } /* Lead-Nature drill-through tiles (dashboard → Lead Report) */ .lds-temp-tile { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; cursor: pointer; } .lds-temp-tile:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .25); } /* Compact LDS pagination — slim themed prev / page-numbers / next */ .lds-pager { padding: 4px 0; } .lds-pager__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; transition: background .12s, border-color .12s, color .12s; } .lds-pager__btn:hover { background: var(--surface-2, rgba(0,0,0,.04)); border-color: var(--primary); color: var(--primary); } .lds-pager__btn.is-current { background: var(--primary); border-color: var(--primary); color: #fff; } .lds-pager__btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } .lds-pager__gap { padding: 0 4px; color: var(--muted); font-size: 12px; } .lds-pager__info { font-size: 11px; color: var(--muted); } /* Progress with pct label */ .lds-prog { display: flex; align-items: center; gap: 10px; } .lds-prog .lds-bar { flex: 1; } .lds-prog__pct { font-size: 12px; font-weight: 700; color: var(--text); width: 40px; text-align: right; } /* ─── Heatmap box-grid (Stage × Month) ─── */ .lds-heatmap { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; } .lds-heatmap th { padding: 4px 6px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: transparent; border: 0; } .lds-heatmap th:first-child { text-align: left; width: 110px; } .lds-heatmap th:not(:first-child) { text-align: center; } .lds-heatmap td { padding: 0; border: 0; text-align: center; vertical-align: middle; } .lds-heatmap td.lds-heatmap__label { text-align: left; padding: 0 8px; font-size: 11px; font-weight: 600; color: var(--text); width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: transparent; } .lds-heatmap__cell { display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 6px; font-size: 12px; font-weight: 700; transition: transform .12s ease; cursor: default; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .15); } .lds-heatmap__cell:hover { transform: scale(1.05); box-shadow: 0 4px 10px rgba(0, 0, 0, .12); } .lds-heatmap__cell--zero { color: var(--muted); background: var(--surface-2) !important; border: 1px dashed var(--line); text-shadow: none; font-weight: 500; } .lds-heatmap__total { font-weight: 700; color: var(--text); font-size: 12px; } .lds-heatmap__total-row td { padding-top: 6px; border-top: 1px solid var(--line-2); } @media (max-width: 700px) { .lds-heatmap th, .lds-heatmap td.lds-heatmap__label { font-size: 10px; } .lds-heatmap th:first-child, .lds-heatmap td.lds-heatmap__label { width: 80px; } .lds-heatmap__cell { height: 26px; font-size: 11px; } } /* Top-performer chips */ .lds-people { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px; } .lds-people__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; } /* ───────────────────────────────────────────────────────────────── COMPREHENSIVE RESPONSIVE BREAKPOINTS ───────────────────────────────────────────────────────────────── */ /* Generic table wrapper for horizontal scroll on small screens */ .lds-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .lds-table-wrap table { min-width: 540px; } /* Tablet landscape and below — 1280px */ @media (max-width: 1280px) { .lds-row { grid-template-columns: 1fr 1fr; } .lds-row > :nth-child(3) { grid-column: 1 / -1; } /* Keep 6-column KPI strip — handled by the high-priority rule near top */ .lds-h-main { padding: 18px 18px 28px; } .lds-content { padding: 16px 18px 24px; } .lds-pipeline { grid-template-columns: repeat(3, 1fr); } .lds-welcome { padding: 18px 22px; } .lds-welcome__name { font-size: 22px; } } /* Tablet portrait — 1024px */ @media (max-width: 1024px) { .lds-h-brandbar { padding: 10px 16px; gap: 10px; } .lds-h-brandbar__title{ font-size: 15px; } .lds-h-brandbar__sub { display: none; } .lds-header__search { max-width: 280px; margin-left: auto !important; } .lds-h-topnav { padding: 0 12px; top: 60px; } .lds-h-topnav__link { padding: 11px 12px; font-size: 13px; } .lds-row { grid-template-columns: 1fr; } .lds-row > :nth-child(3) { grid-column: auto; } .lds-row-2 { grid-template-columns: 1fr; } /* KPI strip stays 6-wide via high-priority rule near top */ .lds-form { grid-template-columns: 1fr; max-width: 600px; } .lds-pipeline { grid-template-columns: repeat(2, 1fr); } .lds-pipe-card::after { display: none; } } /* Mobile landscape & tablet small — 768px */ @media (max-width: 768px) { .lds-body { font-size: 13px; } /* brandbar — hide search, keep logo + actions */ .lds-h-brandbar { padding: 10px 12px; gap: 8px; flex-wrap: wrap; } .lds-h-brandbar__logo { width: 90px; height: 54px; padding: 3px 8px; border-radius: 10px; } .lds-header__search { display: none; } .lds-header__right { gap: 6px; margin-left: auto; } .lds-icon-btn { width: 32px; height: 32px; } .lds-btn { padding: 6px 10px; font-size: 12px; } .lds-btn--primary { padding: 6px 10px; } .lds-side__user-name, .lds-side__user-role { display: none; } /* topnav — keep horizontal scroll, but tighter */ .lds-h-topnav { padding: 0 8px; top: 56px; } .lds-h-topnav__link { padding: 10px 10px; font-size: 12.5px; gap: 6px; } .lds-h-topnav__link .lds-icon { width: 16px; height: 16px; } /* main padding */ .lds-h-main, .lds-content { padding: 14px 12px 24px; } /* welcome banner — stack stats below text */ .lds-welcome { grid-template-columns: 1fr; gap: 14px; padding: 16px 18px; } .lds-welcome__name { font-size: 19px; } .lds-welcome__msg { font-size: 12.5px; } .lds-welcome__stats { gap: 16px; flex-wrap: wrap; } .lds-welcome__stat-num{ font-size: 20px; } /* KPI strip stays 6-wide via the high-priority rule near the top of this stylesheet */ /* Cards spacing */ .lds-card { margin-bottom: 12px; } .lds-card__head { padding: 10px 14px; font-size: 10.5px; } .lds-card__body { padding: 12px 14px; } .lds-card-h2 { padding: 12px 14px; } .lds-card-h2 h3 { font-size: 13px; } /* Tables — horizontal scroll */ .lds-table { font-size: 12.5px; } .lds-table th, .lds-table td { padding: 8px 10px; } /* Pipeline cards */ .lds-pipeline { grid-template-columns: repeat(2, 1fr); gap: 8px; } .lds-pipe__num { font-size: 16px; } .lds-pipe__status { font-size: 16px; } /* Funnel rows */ .lds-funnel-row { grid-template-columns: 1fr 1fr 60px 50px; } .lds-funnel-row__label{ grid-column: 1 / -1; font-size: 12px; margin-bottom: 4px; } /* Donut compact */ .lds-donut-wrap { flex-direction: column; align-items: stretch; gap: 12px; } .lds-donut { align-self: center; } /* Highlights panel */ .lds-hl { padding: 14px 16px; } .lds-hl__top { gap: 12px; flex-wrap: wrap; } .lds-hl__title { font-size: 16px; } .lds-hl__actions { width: 100%; } .lds-hl__fields { grid-template-columns: 1fr 1fr; gap: 12px; } /* Path — stack chevrons vertically */ .lds-path { flex-direction: column; } .lds-path__stage { clip-path: none !important; margin-right: 0; border-radius: 6px; padding: 8px 12px; } /* Page head */ .lds-page-head { flex-wrap: wrap; } .lds-page-head h1 { font-size: 18px; } /* Pills — smaller */ .lds-pill { padding: 5px 11px; font-size: 11.5px; } /* Login card */ .lds-login__card { width: 92%; max-width: 360px; padding: 22px; } } /* Small mobile — 480px */ @media (max-width: 480px) { .lds-h-brandbar__title{ font-size: 14px; } .lds-header__right .lds-btn:not(.lds-btn--primary):not(form button) { display: none; } .lds-kpis { grid-template-columns: 1fr; } .lds-pipeline { grid-template-columns: 1fr; } .lds-hl__fields { grid-template-columns: 1fr; } .lds-welcome { padding: 14px 16px; border-radius: 10px; } .lds-welcome__name { font-size: 17px; } .lds-welcome__stats { gap: 12px; } .lds-welcome__stats > div:nth-child(2) { display: none; } /* hide separator on tiny screens */ .lds-funnel-row { grid-template-columns: 1fr 50px 40px; } .lds-funnel-row__label{ grid-column: 1 / -1; } .lds-funnel-row .lds-bar { grid-column: 1 / -1; } } /* Print-friendly fallback */ @media print { .lds-side, .lds-h-brandbar, .lds-h-topnav, .lds-header { display: none; } .lds-h-main, .lds-content { padding: 0; } .lds-card { break-inside: avoid; box-shadow: none; } } /* ───────────────────────────────────────────────────────────────── Hamburger menu for mobile (drawer-style top-nav) ───────────────────────────────────────────────────────────────── */ .lds-hamburger { display: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 0; } .lds-hamburger span { width: 18px; height: 2px; background: currentColor; border-radius: 2px; } @media (max-width: 768px) { .lds-hamburger { display: inline-flex; } .lds-h-topnav { flex-direction: column; padding: 0; max-height: 0; overflow: hidden; border-bottom: 0; transition: max-height .25s ease; } .lds-h-topnav.is-open { max-height: 70vh; overflow-y: auto; border-bottom: 1px solid var(--line); } .lds-h-topnav__link { padding: 12px 18px; border-bottom: 1px solid var(--line-2); border-bottom-color: var(--line-2); } .lds-h-topnav__link.is-active { border-bottom: 1px solid var(--line-2); background: var(--sidebar-active-bg); } } /* Card head wraps gracefully on narrow viewports */ .lds-card-h2, .lds-card__head { flex-wrap: wrap; gap: 8px; } .lds-card-h2 .right, .lds-card__head .right { flex-shrink: 0; } /* Brand-bar wraps the search to the next line on tablet portrait */ @media (max-width: 1024px) { .lds-h-brandbar { flex-wrap: wrap; } .lds-header__search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0 !important; margin-top: 6px; } } /* Pills wrap on small screens */ .lds-pills { flex-wrap: wrap; } /* Configuration KPI grid auto-fit (smaller cards) */ .lds-kpis { gap: 12px; } @media (min-width: 1281px) { .lds-kpis[style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(6, 1fr); } } /* ───────────────────────────────────────────────────────────────── FINAL RESPONSIVE PASS — Audit Log filter row, Lead Funnel widget, Pre-Sales tab, theme toggle / header right cluster. Goal: every page renders cleanly between 320px (smallest mobile) and 2560px (5K desktop) without horizontal scroll on the page itself (table-wraps still scroll internally) and with comfortable tap targets on touch devices. ───────────────────────────────────────────────────────────────── */ /* Universal — never let images push their container wider than viewport */ img, svg, canvas, video { max-width: 100%; height: auto; } /* Audit Log filter grid — 6 cols on desktop, 3 on tablet, 2 on phone, 1 on tiny */ @media (max-width: 1024px) { .lds-card form[action*="audit-log"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { .lds-card form[action*="audit-log"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .lds-card form[action*="audit-log"] > .lds-btn { grid-column: span 2 !important; } } @media (max-width: 380px) { .lds-card form[action*="audit-log"] { grid-template-columns: 1fr !important; } .lds-card form[action*="audit-log"] > .lds-btn { grid-column: auto !important; } } /* Lead Funnel Stage widget — bottom KPI strip stacks on phones */ @media (max-width: 640px) { .lds-funnel-foot { grid-template-columns: 1fr !important; gap: 10px !important; text-align: left !important; } .lds-funnel-foot > div { text-align: left !important; } } /* Pre-Sales tab — assignment select + button row stacks vertically on phones */ @media (max-width: 640px) { .hub__panel[data-hub-panel="presales"] .hub__row[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } } /* Lead Report — the very tight column widths cramp on very small screens. At < 480px we let the table flex its own content while the wrapper still scrolls horizontally; users can pan to see all columns. */ @media (max-width: 480px) { .lds-report-table { font-size: 10.5px; } .lds-report-table th, .lds-report-table td { padding: 6px 6px; } } /* Header right cluster — graceful collapse on phone: - Profile + extras hide - Theme toggle keeps full size (visual control matters) - + New Lead becomes a compact icon-only button on the smallest screens */ @media (max-width: 640px) { .lds-header__right .lds-icon-btn:not([data-theme-toggle]) { display: none; } } @media (max-width: 380px) { .lds-header__right .lds-btn--primary { font-size: 0; padding: 8px 10px; min-width: 0; } .lds-header__right .lds-btn--primary::before { content: "+"; font-size: 16px; font-weight: 800; } } /* Touch targets — anything tappable must be at least 36×36px on touch devices (browsers expose hover:none). */ @media (hover: none) and (pointer: coarse) { .lds-btn, .lds-icon-btn, .lds-pill, .lds-side__link, .hub__tab, .lds-config-nav__pill { min-height: 36px; } .lds-side__link { padding: 10px 12px; } } /* Wide screens — cap the content column so reading line lengths stay sane on 4K / ultra-wide monitors. Keeps the layout from looking lost in negative space. */ @media (min-width: 1920px) { .lds-h-main, .lds-content { max-width: 1700px; margin-left: auto; margin-right: auto; } } /* Misc — ensure dashboard widgets that use inline grid templates don't bleed past their card on narrow viewports. */ @media (max-width: 640px) { .lds-card .lds-card__body [style*="grid-template-columns:repeat(3"], .lds-card .lds-card__body [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 420px) { .lds-card .lds-card__body [style*="grid-template-columns:repeat(3"], .lds-card .lds-card__body [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; } } /* Anything overflowing horizontally inside a card-body becomes scrollable instead of breaking the page layout. */ .lds-card__body { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Configuration nav pills — keep tap targets comfortable on touch */ @media (max-width: 640px) { .lds-config-nav__pill { padding: 8px 10px; font-size: 11.5px; } .lds-config-nav__icon { font-size: 14px; } } /* Activity Hub tabs — wrap their pill row gracefully at narrow widths */ .hub__tabs { flex-wrap: wrap; } @media (max-width: 640px) { .hub__tab { padding: 8px 10px; font-size: 11.5px; } } /* ───────────────────────────────────────────────────────────────── ORG CHART — Configuration → Users Top-down hierarchy tree using the canonical "CSS family tree" pattern. Every