/* ============ THEME TOKENS ============ */ :root { --bg: #f4f6fb; --card: #ffffff; --ink: #1c2434; --muted: #626c7e; --line: #e3e8f0; --field: #ffffff; --hover: #f5f7fc; /* --brand is the accent for TEXT (links, labels) and must read on --card; --brand-solid is the same colour as a SURFACE (buttons, the active nav item) and must carry --on-brand text. They differ on the dark themes, where a readable link is too pale for a button. */ --brand: #2f6fed; --brand-solid: #2f6fed; --brand-dk: #1f56c4; --on-brand: #ffffff; /* --ok / --warn / --danger are SURFACES (a filled button, a bar); the -ink twins are the text versions, which have to be light on a dark theme and dark on a light one. */ --ok: #15803d; --warn: #b45309; --danger: #dc2626; --ok-ink: #15803d; --warn-ink: #b45309; --danger-ink: #b91c1c; --side-bg: #0f1320; --side-ink: #e8ebf3; --side-muted: #8a93a8; --side-active: #1f2940; --side-line: #1d2438; --radius: 12px; --shadow: 0 2px 8px rgba(20,30,60,.06), 0 8px 24px rgba(20,30,60,.05); } /* Light theme: a fully bright app, including the sidebar (the :root defaults keep a dark sidebar). */ body[data-theme="light"] { --bg: #f4f6fb; --card: #ffffff; --ink: #1c2434; --muted: #626c7e; --line: #e3e8f0; --field: #ffffff; --hover: #f5f7fc; --brand: #2f6fed; --brand-solid: #2f6fed; --brand-dk: #1f56c4; --on-brand: #ffffff; --ok: #15803d; --warn: #b45309; --danger: #dc2626; --ok-ink: #15803d; --warn-ink: #b45309; --danger-ink: #b91c1c; --side-bg: #ffffff; --side-ink: #1c2434; --side-muted: #626c7e; --side-active: #eef2fb; --side-line: #e3e8f0; --shadow: 0 2px 8px rgba(20,30,60,.06), 0 8px 24px rgba(20,30,60,.05); } body[data-theme="dark"] { --bg: #0e1014; --card: #171a21; --ink: #e7eaf0; --muted: #9aa3b2; --line: #262b36; --field: #1d212b; --hover: #1f242f; --brand: #60a5fa; --brand-solid: #2563eb; --brand-dk: #1d4ed8; --on-brand: #ffffff; --side-bg: #0b0d12; --side-ink: #e7eaf0; --side-muted: #8b94a5; --side-active: #1b2230; --side-line: #1b1f29; --shadow: 0 2px 10px rgba(0,0,0,.35); } body[data-theme="midnight"] { --bg: #0b1020; --card: #141a2e; --ink: #e8ebf6; --muted: #97a3c0; --line: #243049; --field: #19203a; --hover: #1a2236; --brand: #a58bff; --brand-solid: #5b3fd6; --brand-dk: #4c33bd; --on-brand: #ffffff; --side-bg: #080c18; --side-ink: #e8ebf6; --side-muted: #8b97b8; --side-active: #1c2747; --side-line: #18203a; --shadow: 0 2px 10px rgba(0,0,0,.4); } body[data-theme="forest"] { --bg: #0c130f; --card: #141d18; --ink: #e6efe9; --muted: #93a89c; --line: #22302a; --field: #172420; --hover: #19241e; --brand: #4ade80; --brand-solid: #15803d; --brand-dk: #126631; --on-brand: #ffffff; --side-bg: #08110c; --side-ink: #e6efe9; --side-muted: #8aa295; --side-active: #16271d; --side-line: #14241a; --shadow: 0 2px 10px rgba(0,0,0,.4); } /* --- Aliases + status colours ------------------------------------------------- Rules written early on ask for --border and --panel-2, which no theme ever defined: CSS then silently used their light-grey fallback, so a white band appeared on dark screens. They are resolved HERE, on , where data-theme lives, so they follow the active theme. The status colours (done / pending / lost …) keep their meaning on every theme: a fixed pastel on light, and the same hue mixed into the card on dark — a soft tint instead of a glare block. */ body { --border: var(--line); /* legacy name for --line */ --panel-2: var(--hover); /* a surface one step off the card: group rows, readonly inputs */ --t-ok-bg: #dcfce7; --t-ok-ink: #166534; --t-warn-bg: #fef3c7; --t-warn-ink: #92400e; --t-bad-bg: #fee2e2; --t-bad-ink: #991b1b; --t-info-bg: #dbeafe; --t-info-ink: #1e40af; --t-idea-bg: #eef2ff; --t-idea-ink: #3730a3; --t-neutral-bg: #f1f3f7; --t-neutral-ink: #4b5563; } body[data-theme="dark"], body[data-theme="midnight"], body[data-theme="forest"] { --ok-ink: #4ade80; --warn-ink: #fbbf24; --danger-ink: #f87171; --t-ok-bg: color-mix(in srgb, #22c55e 16%, var(--card)); --t-ok-ink: #86efac; --t-warn-bg: color-mix(in srgb, #f59e0b 16%, var(--card)); --t-warn-ink: #fcd34d; --t-bad-bg: color-mix(in srgb, #ef4444 16%, var(--card)); --t-bad-ink: #fca5a5; --t-info-bg: color-mix(in srgb, #3b82f6 16%, var(--card)); --t-info-ink: #93c5fd; --t-idea-bg: color-mix(in srgb, #8b5cf6 16%, var(--card)); --t-idea-ink: #c4b5fd; --t-neutral-bg: var(--hover); --t-neutral-ink: #c3cad8; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); font-size: 14px; } a { color: var(--brand); } .hidden { display: none !important; } input[readonly] { background: var(--panel-2); color: var(--muted); cursor: default; } .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .seg button { border: 0; border-radius: 0; margin: 0; } .seg button.active { background: var(--brand-solid); color: var(--on-brand); } label.choice { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 400; background: var(--field); color: var(--ink); } label.choice input { width: auto; margin-top: 3px; } label.choice:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--card)); } label.choice small { color: var(--muted); } tr.group-row td { background: var(--panel-2); color: var(--ink); padding-top: 10px; border-bottom: 1px solid var(--line); } .muted { color: var(--muted); } /* ============ CUSTOMER 360 / subtabs ============ */ dialog.wide { max-width: 920px; width: 92vw; } .subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .cm-split { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: start; } .cm-split .subtabs { flex-direction: column; gap: 0; position: sticky; top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; } .cm-split .subtabs::before { content: 'Sections'; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 6px 10px 6px; } .cm-split .subtab { display: flex; align-items: center; justify-content: space-between; text-align: left; border: 0; border-left: 3px solid transparent; border-radius: 8px; padding: 9px 10px 9px 11px; color: var(--muted); font-weight: 600; font-size: 13px; } .cm-split .subtab::after { content: '›'; font-size: 15px; color: var(--muted); opacity: .6; } .cm-split .subtab:hover { background: var(--hover); color: var(--ink); } .cm-split .subtab.active { background: var(--brand-solid); color: var(--on-brand); border-left-color: var(--brand-dk); box-shadow: 0 2px 6px rgba(47,111,237,.35); } .cm-split .subtab.active::after { color: var(--on-brand); opacity: 1; } @media (max-width: 820px) { .cm-split { grid-template-columns: 1fr; } .cm-split .subtabs { flex-direction: row; position: static; } } .subtab { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 12px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; } .subtab:hover { color: var(--ink); } .subtab.active { color: var(--brand); border-bottom-color: var(--brand); } .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--border); } .badge.credit { background: var(--t-warn-bg); color: var(--t-warn-ink); border-color: color-mix(in srgb, var(--t-warn-ink) 40%, transparent); } .badge.advance { background: var(--t-info-bg); color: var(--t-info-ink); border-color: color-mix(in srgb, var(--t-info-ink) 40%, transparent); } .badge.active { background: var(--t-ok-bg); color: var(--t-ok-ink); border-color: color-mix(in srgb, var(--t-ok-ink) 40%, transparent); } .badge.inactive, .badge.lost { background: var(--t-bad-bg); color: var(--t-bad-ink); border-color: color-mix(in srgb, var(--t-bad-ink) 40%, transparent); } .tl { list-style: none; padding: 0; margin: 0; } .tl li { position: relative; padding: 8px 0 8px 22px; border-left: 2px solid var(--border); margin-left: 6px; } .tl li::before { content: ''; position: absolute; left: -7px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); } .tl li.enquiry::before { background: #f59e0b; } .tl li.followup::before { background: #10b981; } .tl li.deal::before { background: #6366f1; } .tl .when { font-size: 11px; color: var(--muted); } .cust-link { color: var(--brand); cursor: pointer; font-weight: 600; } .cust-link:hover { text-decoration: underline; } .row-link { cursor: pointer; font-weight: 500; } .row-link:hover { color: var(--brand); text-decoration: underline; } th { cursor: pointer; user-select: none; } th .sort-ind { opacity: 0.6; font-size: 10px; margin-left: 3px; } .ubar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; min-width: 90px; } .ubar .ufill { height: 100%; border-radius: 4px; } .ufill.ok { background: var(--ok); } .ufill.under { background: #38bdf8; } .ufill.high { background: #f59e0b; } .ufill.over { background: #ef4444; } .ufill.no-limit { background: #9ca3af; } .fchip { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; } .fchip.ok { background: var(--t-ok-bg); color: var(--t-ok-ink); } .fchip.under { background: var(--t-info-bg); color: var(--t-info-ink); } .fchip.high { background: var(--t-warn-bg); color: var(--t-warn-ink); } .fchip.over { background: var(--t-bad-bg); color: var(--t-bad-ink); } .fchip.no-limit { background: var(--t-neutral-bg); color: var(--t-neutral-ink); } .global-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; } /* ============ LOGIN ============ */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; } .login-card { background: var(--card); padding: 32px; border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-width: 380px; border: 1px solid var(--line); } .login-card h1 { margin: 0 0 4px; font-size: 22px; } .login-card p.sub { margin: 0 0 22px; color: var(--muted); } /* ============ APP LAYOUT ============ */ .layout { display: grid; grid-template-columns: 234px 1fr; min-height: 100vh; } .sidebar { background: var(--side-bg); color: var(--side-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--side-line); } /* collapse toggle */ .side-toggle { align-self: flex-end; margin: 8px 10px 0; background: none; border: 0; color: var(--side-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 5px 8px; border-radius: 7px; } .side-toggle:hover { background: var(--side-active); color: var(--side-ink); } /* collapsed (icon-rail) sidebar */ .layout.nav-collapsed { grid-template-columns: 64px 1fr; } .layout.nav-collapsed .side-toggle { align-self: center; margin: 8px 0 0; } .layout.nav-collapsed .brand { justify-content: center; padding: 8px 0 12px; gap: 0; } .layout.nav-collapsed .brand-text { display: none; } .layout.nav-collapsed .nav-item { justify-content: center; font-size: 0; gap: 0; padding: 11px 0; } .layout.nav-collapsed .nav-item svg { width: 20px; height: 20px; } .layout.nav-collapsed .sidebar-foot { padding: 8px 6px; } .layout.nav-collapsed .theme-row, .layout.nav-collapsed .foot-actions, .layout.nav-collapsed .userchip > div:not(.avatar) { display: none; } .layout.nav-collapsed .userchip { justify-content: center; } .nav-tip { position: fixed; z-index: 200; background: #111827; color: #fff; border: 1px solid #2c3444; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-50%); box-shadow: 0 4px 16px rgba(0,0,0,.28); transition: opacity .05s; } .nav-tip.show { opacity: 1; } .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .seg-btn { background: var(--card); border: 0; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; } .seg-btn + .seg-btn { border-left: 1px solid var(--line); } .seg-btn.active { background: var(--brand-solid); color: var(--on-brand); } .mchip { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; } .mchip.active { background: var(--brand-solid); color: var(--on-brand); border-color: var(--brand-solid); } /* full-screen takeover while viewing a customer profile */ .layout.profile-mode { grid-template-columns: 1fr; } .layout.profile-mode .sidebar { display: none; } /* ============ ELEGANT CUSTOMER PROFILE ============ */ .profile-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; margin-top: 10px; } .profile-head { display: flex; gap: 16px; align-items: flex-start; padding: 24px 26px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--hover); } .profile-head { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--card)), var(--card) 70%); } .cm-avatar { width: 58px; height: 58px; border-radius: 15px; background: linear-gradient(135deg, var(--brand-solid), var(--brand-dk)); color: var(--on-brand); display: grid; place-items: center; font-size: 25px; font-weight: 700; flex: none; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 35%, transparent); } .profile-head h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; } .cm-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; } .cm-poc { font-size: 13px; margin-top: 9px; line-height: 1.5; } .cm-actions { display: flex; gap: 8px; flex-wrap: wrap; } #cmStats.kpis { padding: 18px 26px 2px; margin: 0; } #cmSubtabs { padding: 6px 26px 0; } #cmBody { padding: 16px 26px 24px; } #cmBody .row { margin-top: 0; } #cmBody .row + .row { margin-top: 14px; } .brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; } .brand-logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--brand-solid), var(--brand-dk)); display: grid; place-items: center; color: var(--on-brand); font-size: 16px; flex: none; } .brand-name { font-weight: 700; font-size: 15px; color: var(--side-ink); } .brand-sub { font-size: 11px; color: var(--side-muted); } .nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; cursor: pointer; color: var(--side-muted); font-weight: 500; font-size: 13.5px; user-select: none; } .nav-item svg { width: 18px; height: 18px; flex: none; } .nav-item:hover { background: var(--side-active); color: var(--side-ink); } .nav-item.active { background: var(--brand-solid); color: var(--on-brand); } .nav-item.active svg { color: var(--on-brand); } .sidebar-foot { border-top: 1px solid var(--side-line); padding: 12px; } .theme-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .swatches { display: flex; gap: 6px; } .swatch { width: 20px; height: 20px; border-radius: 6px; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--sw); } .swatch.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--side-bg); } .userchip { display: flex; align-items: center; gap: 10px; padding: 4px 2px 10px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-solid); color: var(--on-brand); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; } .userchip-name { font-size: 13px; font-weight: 600; color: var(--side-ink); display: flex; align-items: center; gap: 6px; } .userchip-email { font-size: 11px; color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .foot-actions { display: flex; gap: 6px; } .foot-actions button { flex: 1; } .main { min-width: 0; } .container { padding: 14px 16px 40px; max-width: none; margin: 0; } /* ============ CARDS / PANELS ============ */ .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 12px; } .panel h2 { margin: 0 0 14px; font-size: 16px; } .row { display: flex; gap: 12px; flex-wrap: wrap; } .row > * { flex: 1; min-width: 260px; } /* ============ KPI CARDS ============ */ .kpis { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; flex: 1 1 170px; min-width: 0; box-shadow: var(--shadow); overflow: hidden; } /* keep the value on ONE line; a script (fitAllKpis) shrinks the font if it would overflow */ .kpi .n { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; } .kpi .l { color: var(--muted); font-size: 12px; margin-top: 2px; } /* ============ TABLES ============ */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; } #appView th { cursor: pointer; user-select: none; white-space: nowrap; } #appView th:hover { color: var(--brand); } .sort-ind { font-size: 10px; color: var(--brand); } tbody tr:hover { background: var(--hover); } .empty { color: var(--muted); padding: 18px 4px; } .table-scroll { overflow-x: auto; } .table-scroll table { min-width: 720px; } /* ============ FORMS ============ */ label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; font-weight: 600; } input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--field); color: var(--ink); } input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; } input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); border-color: var(--brand); } textarea { resize: vertical; min-height: 56px; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; } .form-grid .full { grid-column: 1 / -1; } /* ============ BUTTONS ============ */ button { background: var(--brand-solid); color: var(--on-brand); border: 0; padding: 10px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px; } button:hover { background: var(--brand-dk); } button.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); } button.ghost:hover { background: var(--hover); } button.sm { padding: 5px 10px; font-size: 12px; } button.danger { background: var(--danger); color: #ffffff; } button.danger:hover { background: #b91c1c; } .actions { display: flex; gap: 8px; margin-top: 14px; } .inline-actions { display: flex; gap: 6px; } /* ============ PILLS / BADGES / CHIPS ============ */ .pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; } .pill.Pending { background: var(--t-warn-bg); color: var(--t-warn-ink); } .pill.Confirmed { background: var(--t-info-bg); color: var(--t-info-ink); } .pill.Delivered { background: var(--t-ok-bg); color: var(--t-ok-ink); } .pill.Cancelled { background: var(--t-bad-bg); color: var(--t-bad-ink); } .pill.pay-rec { background: var(--t-ok-bg); color: var(--t-ok-ink); } .pill.pay-par { background: var(--t-warn-bg); color: var(--t-warn-ink); } .pill.pay-pen { background: var(--t-bad-bg); color: var(--t-bad-ink); } .pill.pay-hold { background: var(--t-neutral-bg); color: var(--t-neutral-ink); } /* stalled enquiry stage */ .role-badge { background: var(--t-idea-bg); color: var(--t-idea-ink); padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; text-transform: capitalize; } .chip { display:inline-block; background: var(--t-idea-bg); color: var(--t-idea-ink); border-radius:999px; padding:3px 9px; font-size:12px; margin:2px 4px 2px 0; } .chip.warn { background: var(--t-warn-bg); color: var(--t-warn-ink); } .flag { color: var(--warn-ink); cursor:help; } /* ============ TOAST ============ */ .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #1c2434; color: #fff; border: 1px solid #333c50; padding: 11px 18px; border-radius: 8px; box-shadow: var(--shadow); z-index: 100; font-size: 13px; } .toast.err { background: var(--danger); } /* ============ TOOLBAR ============ */ .toolbar { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; } .toolbar .spacer { flex:1; } .toolbar select, .toolbar input { max-width: 190px; padding: 7px 9px; } .err-msg { color: var(--danger-ink); font-size: 13px; margin-top: 10px; min-height: 18px; } /* ============ DIALOG / MODAL ============ */ dialog { border: 0; border-radius: var(--radius); padding: 0; box-shadow: var(--shadow); width: 94%; max-width: 680px; background: var(--card); color: var(--ink); } dialog::backdrop { background: rgba(8,12,22,.55); } .modal-body { padding: 20px; max-height: 88vh; overflow: auto; } .modal-body h3 { margin: 0 0 12px; } /* financial breakdown in the deal form */ .fin-grid { display:grid; grid-template-columns: 1.7fr 1fr 1fr; gap:6px 12px; margin-top:6px; font-size:13px; align-items:center; background:var(--hover); border:1px solid var(--line); border-radius:8px; padding:12px; } .fin-grid > div:nth-child(3n+2), .fin-grid > div:nth-child(3n+0) { text-align:right; font-variant-numeric: tabular-nums; } .fin-head { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; } .fin-row { color:var(--muted); } .fin-total { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:8px; font-size:13px; color:var(--ink); } /* section dividers in the deal form */ .section-label { font-size: 12px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 2px; border-top: 1px solid var(--line); padding-top: 12px; } /* ============ CHARTS ============ */ .chart-box { position: relative; height: 280px; width: 100%; } .chart-box canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } /* ============ BANNERS ============ */ .warn-banner { background: var(--t-warn-bg); color: var(--t-warn-ink); border:1px solid color-mix(in srgb, var(--t-warn-ink) 35%, transparent); border-radius:8px; padding:10px 12px; margin:8px 0; font-size:13px; } .ok-banner { background: var(--t-ok-bg); color: var(--t-ok-ink); border:1px solid color-mix(in srgb, var(--t-ok-ink) 35%, transparent); border-radius:8px; padding:10px 12px; font-weight:600; } /* ============ ACTIVITY BADGES ============ */ .act { font-weight:600; font-size:12px; } .act-created { color: var(--ok-ink); } .act-updated { color: var(--t-info-ink); } .act-deleted { color: var(--danger-ink); } .act-status_changed, .act-payment_changed { color: var(--warn-ink); } .act-imported { color: var(--t-idea-ink); } /* ============ DETAILS / IMPORT ============ */ .summary-list { margin:10px 0; padding-left:18px; line-height:1.8; } details summary { cursor:pointer; font-weight:600; font-size:13px; color:var(--brand); } details { font-size:13px; } #csvFile { margin:10px 0; } /* ============ CHECK-LIST (assignment / team) ============ */ .check-list { max-height:300px; overflow:auto; border:1px solid var(--line); border-radius:8px; margin-top:6px; } .check-row { display:flex; align-items:center; gap:9px; padding:7px 10px; cursor:pointer; border-bottom:1px solid var(--line); font-size:14px; } .check-row:last-child { border-bottom:0; } .check-row:hover { background: var(--hover); } .check-row input[type=checkbox] { width:auto; margin:0; } .check-row.is-assigned { color:var(--muted); cursor:default; } .check-row.is-assigned:hover { background:transparent; } .tag-assigned { margin-left:auto; font-size:11px; color: var(--t-ok-ink); background: var(--t-ok-bg); padding:2px 7px; border-radius:999px; } /* ============ ANALYTICS FILTERS ============ */ .addfilter { position:relative; } .dropdown-menu { position:absolute; top:110%; right:0; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); z-index:20; min-width:160px; padding:4px; } .dropdown-menu .menu-item { padding:8px 12px; border-radius:6px; cursor:pointer; font-size:13px; } .dropdown-menu .menu-item:hover { background:var(--hover); } .active-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; align-items:center; } .filter-chip { display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:5px 8px; box-shadow:var(--shadow); max-width:100%; } .filter-label { font-size:12px; font-weight:600; color:var(--muted); } .filter-input { padding:5px 8px; font-size:13px; max-width:180px; } .filter-input[type=date], .filter-chip input[type=date] { max-width:138px; } #anCustomDates { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } #anCustomDates input[type=date] { width:138px; } .filter-x { cursor:pointer; color:var(--danger-ink); font-weight:700; padding:0 2px; } .ms { position:relative; display:inline-block; } .ms-toggle { padding:5px 24px 5px 10px; border:1px solid var(--line); border-radius:6px; background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a93a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center; font-size:13px; cursor:pointer; min-width:96px; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; color:var(--ink); } .ms-panel { position:absolute; top:115%; left:0; z-index:30; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); width:250px; padding:8px; } .ms-search { width:100%; margin-bottom:6px; padding:7px 9px; font-size:13px; } .ms-bar { display:flex; align-items:center; justify-content:space-between; font-size:12px; padding:2px 4px 6px; border-bottom:1px solid var(--line); margin-bottom:4px; } .ms-bar:empty { display:none; } .ms-clear, .ms-selectall { background:none; border:0; color:var(--brand); font-weight:600; cursor:pointer; font-size:12px; padding:0; } .ms-list { max-height:240px; overflow:auto; } .ms-item { display:flex; align-items:center; gap:8px; padding:6px; border-radius:6px; cursor:pointer; font-size:13px; } .ms-item:hover { background:var(--hover); } .ms-item input { width:auto; margin:0; } .pin-btn { background:none; border:0; cursor:pointer; font-size:13px; padding:0 2px; line-height:1; filter:grayscale(1); opacity:.45; transform:rotate(40deg); } .pin-btn.pinned { filter:none; opacity:1; transform:none; } /* ============ ASSIGNMENT GROUPS ============ */ .assign-group { border:1px solid var(--line); border-radius:8px; margin-bottom:8px; padding:4px 12px; } .assign-group summary { padding:8px 0; cursor:pointer; font-size:14px; color:var(--ink); } .assign-group summary::marker { color:var(--brand); } .assign-group .chips { display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 10px; } /* ============ RESPONSIVE ============ */ @media (max-width: 820px) { .layout { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; flex-direction: column; border-right: 0; border-bottom: 1px solid var(--side-line); } .nav { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; } .nav-item { white-space: nowrap; } } /* row actions: small icon buttons, LeadSquared-style */ .row-actions { display: inline-flex; gap: 2px; } .row-actions button { border: 0; background: transparent; padding: 3px 6px; font-size: 14px; line-height: 1; color: var(--muted); border-radius: 6px; cursor: pointer; } .row-actions button:hover { background: var(--panel-2); color: var(--ink); } .row-actions button.ok:hover { color: var(--ok-ink); } .row-actions button.del:hover { color: var(--danger-ink); } /* searchable dropdown (replaces the native datalist look) */ .combo { position: relative; display: inline-block; width: 100%; vertical-align: middle; } .combo input { width: 100%; padding-right: 26px; } .combo-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 4px; cursor: pointer; border-radius: 4px; } .combo-x:hover { color: var(--ink); background: var(--hover); } .combo-panel { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30; max-height: 240px; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); } .combo-item { padding: 7px 10px; cursor: pointer; font-size: 13px; } .combo-item:hover, .combo-item.active { background: var(--hover); color: var(--brand); } .combo-empty { padding: 8px 10px; color: var(--muted); font-size: 12px; } /* dashboard "My tasks": one compact line per task, no table, no scrolling */ .panel h2 { font-size: 15px; margin: 0 0 8px; } .tl-list { font-size: 12.5px; } .tl-head { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 0 3px; border-bottom: 1px solid var(--line); margin-bottom: 2px; } .tl-row { display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 1.6fr) auto auto auto auto 26px; gap: 10px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--line); } .tl-row > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-what { font-size: 12px; } .tl-phone, .tl-how, .tl-own { font-size: 11.5px; } .tl-due { font-size: 12px; font-weight: 600; } .tl-due.late { color: var(--danger-ink); } .tl-ok { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 6px; width: 24px; height: 22px; padding: 0; font-size: 13px; line-height: 1; cursor: pointer; } .tl-ok:hover { color: #ffffff; background: var(--ok); border-color: var(--ok); } .kpi-link { cursor: pointer; transition: box-shadow .12s, transform .12s; } .kpi-link:hover { box-shadow: 0 4px 14px rgba(20,30,60,.12); transform: translateY(-1px); } .kpi-link .l { color: var(--brand); } table.prod { font-size: 12.5px; } table.prod th, table.prod td { padding: 6px 8px; white-space: nowrap; } table.prod tfoot th { border-top: 2px solid var(--line); } table.mini { width: 100%; font-size: 12.5px; } table.mini td { padding: 3px 6px; border-bottom: 1px dashed var(--line); } table.mini td:last-child { text-align: right; font-weight: 600; } /* configurable dashboard: 6-column grid; widgets span by their width */ .dash-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: start; } .dash-grid .widget { grid-column: span 6; min-width: 0; margin: 0; } .dash-grid .widget.w-two { grid-column: span 4; } .dash-grid .widget.w-half { grid-column: span 3; } .dash-grid .widget.w-third { grid-column: span 2; } @media (max-width: 900px) { .dash-grid .widget, .dash-grid .widget.w-two, .dash-grid .widget.w-half, .dash-grid .widget.w-third { grid-column: span 6; } } .dc-row { display: grid; grid-template-columns: 24px 1fr 110px 56px; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px dashed var(--line); font-size: 13px; } .dc-row input[type="checkbox"] { width: auto; } .dc-row .arrows button { border: 0; background: transparent; cursor: pointer; padding: 2px 4px; color: var(--muted); } .dc-row .arrows button:hover { color: var(--ink); } /* a small add-form that opens inside another form (new site / new contact on the enquiry and activity forms) */ .mini-add { margin-top: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; background: var(--hover); } .mini-add .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mini-add .mini-grid .full { grid-column: 1 / -1; } .mini-add label { font-size: 11px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 2px; } .mini-add input, .mini-add select { font-size: 13px; padding: 5px 7px; } .mini-add .mini-actions { display: flex; gap: 6px; align-items: center; margin-top: 7px; } .mini-add .mini-err { color: var(--danger-ink); font-size: 12px; }