/* ejuiceresellers CRM — charcoal + gold analytics dashboard, with a light theme */ :root { --bg: #16140f; --surface: #1f1c15; --surface-2: #272318; --line: rgba(255,255,255,0.07); --text: #ede7d6; --text-dim: #968b72; --text-faint: #6b6450; --gold: #c9a24b; --gold-bright: #e3bd45; --pos: #5fa86a; --neg: #c2603f; --radius: 14px; --radius-sm: 10px; --ease: cubic-bezier(.22,.61,.36,1); /* one easing curve for every micro-interaction */ --shadow: 0 1px 2px rgba(0,0,0,.28), 0 14px 34px -14px rgba(0,0,0,.55); /* layered: contact + ambient */ /* subtle surface tints used for tracks/chips/row-hover — flip direction in light mode */ --overlay-soft: rgba(255,255,255,.06); --overlay-softer: rgba(255,255,255,.025); --topbar-bg: rgba(22,20,15,.7); --sidebar-bg: linear-gradient(180deg, #18160f, #121009); } /* Light theme: the WHOLE dashboard flips, sidebar included, so it matches the light ejuiceresellers storefront (white/cream + gold) instead of a dark rail. Toggled via [data-theme="light"] on , set by a tiny inline script in (before first paint, no flash) + the sidebar toggle. */ [data-theme="light"] { --bg: #f6f4ee; --surface: #ffffff; --surface-2: #f1ece1; --line: rgba(30,24,10,0.10); --text: #221c10; --text-dim: #6e6650; --text-faint: #978f78; --gold: #a87a26; --gold-bright: #8c6318; --pos: #2f8f55; --neg: #b14a35; --shadow: 0 1px 2px rgba(40,32,12,.06), 0 12px 30px -14px rgba(40,32,12,.16); --overlay-soft: rgba(30,24,10,.05); --overlay-softer: rgba(30,24,10,.035); --topbar-bg: rgba(255,255,255,.82); --sidebar-bg: linear-gradient(180deg, #ffffff, #f2ecdf); } body, .card, .kpi, .topbar, .sidebar, .modal, .drawer, input, select, textarea { transition: background-color .15s ease, border-color .15s ease, color .15s ease; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--text); font: 14px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } a { color: inherit; text-decoration: none; } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .muted { color: var(--text-dim); } .sm { font-size: 12px; } .gold { color: var(--gold-bright); font-weight: 600; } .neg { color: var(--neg); } .right { text-align: right; } .app { display: grid; grid-template-columns: 232px 1fr; height: 100vh; } /* sidebar */ .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; } .brand { display: flex; align-items: center; padding: 6px 8px 18px; } /* Full logo, always fully visible (contain = never cropped), scales to the sidebar. Two PNGs swap with the theme: white+gold on dark, black+gold on light. */ .brand .brand-logo { display: block; width: 100%; max-height: 56px; height: auto; object-fit: contain; object-position: left center; } .brand .logo-light { display: none; } [data-theme="light"] .brand .logo-dark { display: none; } [data-theme="light"] .brand .logo-light { display: block; } .brand .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--gold), #8a6d12); display: grid; place-items: center; font-weight: 800; color: #1a1206; font-size: 17px; box-shadow: 0 4px 14px rgba(201,162,75,0.3); } /* EJR monogram mark: gold in both themes (brand accent). */ .brand .brand-mark { width: 34px; height: 35px; color: var(--gold); flex: none; } /* wordmark flips with the theme: white in dark, black in light. */ .brand .name { font-weight: 800; letter-spacing: .04em; font-size: 12px; color: var(--text); white-space: nowrap; } .brand .sub { font-size: 11px; color: var(--text-faint); } /* role switcher */ .session-switch { position: relative; margin: 2px 4px 8px; } .sess-trigger { width: 100%; display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--text); cursor: pointer; } .sess-trigger:hover { border-color: rgba(201,162,75,.4); } .sess-ava { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), #8a6d12); color: #1a1206; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: 0 0 auto; } .sess-meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; min-width: 0; } .sess-name { font-weight: 650; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sess-role { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; } .sess-role.admin { color: var(--gold-bright); } .sess-role.agent { color: var(--text-dim); } .sess-caret { margin-left: auto; color: var(--text-faint); } .sess-menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); padding: 6px; z-index: 50; max-height: 60vh; overflow-y: auto; } .session-switch.open .sess-menu { display: block; } .sess-sep { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 8px 8px 4px; } .sess-opt { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; } .sess-opt:hover { background: var(--surface); } .sess-opt.on { background: rgba(201,162,75,.16); color: var(--gold-bright); } .new-order-btn { margin: 0 4px 6px; padding: 9px; border-radius: 10px; border: 1px solid rgba(201,162,75,.4); background: rgba(201,162,75,.12); color: var(--gold-bright); font-weight: 700; cursor: pointer; font-size: 13px; } .new-order-btn:hover { background: rgba(201,162,75,.2); } .nav-group { font-size: 10px; letter-spacing: .1em; color: var(--text-faint); padding: 14px 12px 5px; font-weight: 700; } /* order builder */ #builder-root { position: fixed; inset: 0; pointer-events: none; z-index: 70; } #builder-root.open { pointer-events: auto; } #builder-root .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; } #builder-root.open .scrim { opacity: 1; } #builder-root .drawer { transform: translateX(100%); } #builder-root.open .drawer { transform: translateX(0); } /* slide the builder in (was missing) */ /* coupon editor drawer (same slide-in mechanics as the builder) */ #coupon-root { position: fixed; inset: 0; pointer-events: none; z-index: 72; } #coupon-root.open { pointer-events: auto; } #coupon-root .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; } #coupon-root.open .scrim { opacity: 1; } #coupon-root .drawer { transform: translateX(100%); } #coupon-root.open .drawer { transform: translateX(0); } .cf { display: block; margin: 9px 0; } .cf-l { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 3px; } .cf-i, .cf textarea { width: 100%; } .cf-h { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; } .cf-ro { display: inline-block; padding: 6px 0; color: var(--text); } .cf-chks { display: flex; flex-direction: column; gap: 6px; } .cf-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin: 5px 0; cursor: pointer; } .cf-confirm { color: var(--gold-bright); } .cpn-managed { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.4); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 10px; } .loading-row { padding: 24px; color: var(--text-dim); display: flex; align-items: center; gap: 10px; } .pos { color: var(--pos, #3fb950); } .drawer.builder { width: 560px; max-width: 100vw; } .b-input { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; color: var(--text); font-size: 13.5px; outline: none; } .b-input:focus { border-color: var(--gold); } .b-row { margin: 4px 0; } .b-seg { margin-bottom: 10px; } .b-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .b-grid input:first-child { grid-column: 1 / -1; } .b-agent-fixed { font-weight: 650; color: var(--gold-bright); } .b-results { max-height: 240px; overflow-y: auto; margin-top: 4px; } .b-res { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; margin-top: 4px; cursor: pointer; color: var(--text); font-size: 13px; } .b-res:hover { border-color: var(--gold); background: var(--surface); } .b-warn { color: #e6b06a; font-size: 12.5px; margin-top: 6px; } .b-items { width: 100%; border-collapse: collapse; margin-top: 8px; } .b-items td { padding: 7px 6px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; } .b-qty { white-space: nowrap; } .b-qty button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; } .b-qty input { width: 48px; text-align: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 4px; margin: 0 2px; } .b-rm { background: none; border: none; color: var(--text-faint); font-size: 18px; cursor: pointer; } .b-rm:hover { color: var(--neg); } .b-price-input { width: 78px; text-align: right; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 4px 6px; font-size: 13px; } .b-price-input:focus { outline: none; border-color: var(--gold); } .b-price-input.b-price-bad { border-color: var(--neg); color: var(--neg); } .b-line-warn { color: var(--neg); font-size: 11.5px; margin-top: 2px; } tr.b-line-bad td { background: color-mix(in srgb, var(--neg) 9%, transparent); } .sess-ava { overflow: hidden; } a.sess-ava { text-decoration: none; cursor: pointer; } a.sess-ava:hover { filter: brightness(1.12); } .sess-ava img { width: 100%; height: 100%; object-fit: cover; display: block; } /* attachment viewer — keeps the signed URL out of the address bar */ .lightbox { position: relative; z-index: 2; max-width: min(92vw, 1100px); max-height: 88vh; } .lightbox img { max-width: 100%; max-height: 88vh; border-radius: 10px; display: block; box-shadow: 0 24px 70px rgba(0,0,0,.6); } .lightbox-x { position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; } /* brand multi-select */ .bp { position: relative; } .bp-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; background: var(--bg); } .bp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--gold) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); } .bp-chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 1px; opacity: .7; } .bp-chip button:hover { opacity: 1; } .bp-add { background: none; border: 1px dashed var(--line); color: var(--text-dim); cursor: pointer; font-size: 12px; border-radius: 6px; padding: 3px 8px; } .bp-add:hover { border-color: var(--gold); color: var(--text); } .bp-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 80; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.45); padding: 8px; display: block; } /* MUST follow the rule above — an author `display` beats [hidden] */ .bp-menu[hidden] { display: none; } .bp-tip { font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; } .bp-search { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; color: var(--text); font-size: 12.5px; outline: none; font-family: inherit; } .bp-search:focus { border-color: var(--gold); } .bp-list { max-height: min(260px, 40vh); overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 1px; } .bp-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; padding: 6px 7px; border-radius: 6px; font-size: 12.5px; font-family: inherit; } .bp-opt:hover { background: var(--overlay-soft); } .bp-opt.on { background: color-mix(in srgb, var(--gold) 12%, transparent); } .bp-check { width: 14px; flex: none; color: var(--gold); } .bp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bp-empty { padding: 10px 7px; font-size: 12.5px; color: var(--text-dim); } .bp-foot { display: flex; justify-content: flex-end; padding-top: 6px; } /* leads drawer: editable contact / qualification / internal grids */ .lead-editgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 4px 0 10px; } .lead-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .lead-f.wide { grid-column: 1 / -1; } .lead-f > span { font-size: 11.5px; color: var(--text-dim); } .lead-f input, .lead-f select, .lead-f textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color: var(--text); font-size: 13px; font-family: inherit; outline: none; } .lead-f input:focus, .lead-f select:focus, .lead-f textarea:focus { border-color: var(--gold); } .lead-editactions { display: flex; align-items: center; gap: 10px; } @media (max-width: 560px) { .lead-editgrid { grid-template-columns: 1fr; } } /* square-crop editor for profile pictures */ .crop-box { position: relative; width: 300px; height: 300px; max-width: 100%; margin: 4px auto 10px; overflow: hidden; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); cursor: grab; touch-action: none; user-select: none; } .crop-box:active { cursor: grabbing; } .crop-box img { position: absolute; top: 0; left: 0; transform-origin: 0 0; max-width: none; pointer-events: none; } .crop-ring { position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 9999px color-mix(in srgb, var(--bg) 72%, transparent) inset; border-radius: 50%; } .crop-zoom { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; } .crop-zoom input[type="range"] { flex: 1; accent-color: var(--gold); } /* ---- My Profile: avatar + personal colour theme ---- */ /* padding comes from .card-head/.card-body, same as every other card in the app */ .pf-shell { max-width: 760px; } .pf-head { margin-bottom: 16px; } .pf-ava-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .pf-ava { width: 78px; height: 78px; border-radius: 50%; overflow: hidden; flex: none; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 28px; color: var(--text-dim); } .pf-ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-ava-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .pf-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .pf-slots { display: grid; gap: 9px; } .pf-slot { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--overlay-softer); } .pf-slot input[type=color] { width: 42px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: none; padding: 2px; cursor: pointer; flex: none; } .pf-slot-txt { flex: 1; min-width: 0; } .pf-slot-txt b { display: block; font-size: 12.5px; } .pf-slot-txt small { color: var(--text-dim); font-size: 11.5px; } .pf-slot code { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--text-dim); } .pf-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; } @media (max-width: 560px) { .pf-slot { gap: 8px; } .pf-slot code { display: none; } } /* ---- messaging: attachments, emoji, presence ---- */ .msg-attach { cursor: pointer; font-size: 17px; line-height: 1; padding: 6px 4px; opacity: .75; } .msg-attach:hover { opacity: 1; } .msg-emoji-btn { background: none; border: 0; cursor: pointer; font-size: 17px; line-height: 1; padding: 6px 4px; opacity: .75; color: inherit; } .msg-emoji-btn:hover { opacity: 1; } .emoji-pop { position: absolute; bottom: 100%; left: 0; z-index: 60; margin-bottom: 6px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; padding: 8px; background: var(--surface, #17171a); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.5); max-width: 320px; } /* MUST come after the rule above: an author `display` beats the UA stylesheet's [hidden] { display: none }, so without this the picker is permanently open. */ .emoji-pop[hidden] { display: none; } .emoji-pop button { background: none; border: 0; cursor: pointer; font-size: 17px; padding: 4px; border-radius: 6px; line-height: 1; } /* theme token, not a hardcoded white: rgba(255,255,255,.09) is invisible on the light theme's white picker */ .emoji-pop button:hover { background: var(--overlay-soft); } .msg-composer { position: relative; } .msg-pending { display: flex; align-items: center; gap: 10px; padding: 7px 10px; } .msg-pending img { max-height: 62px; border-radius: 8px; border: 1px solid var(--line); } .msg-img { display: block; margin-bottom: 5px; cursor: zoom-in; } .msg-img img { max-width: 240px; max-height: 240px; border-radius: 9px; display: block; } .msg-img.up { position: relative; opacity: .6; } .msg-img-up { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; } .msg-img-err { font-size: 11.5px; opacity: .6; font-style: italic; } .msg-ava { position: relative; } .msg-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); border: 2px solid var(--surface); } .msg-sub { display: block; font-size: 11.5px; color: var(--text-dim); font-weight: 400; } .msg-me { display: flex; align-items: center; gap: 8px; font-size: 11.5px; } .msg-me-clock { color: var(--c); } .msg-me select { background: transparent; color: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 11.5px; } .cr-attach-row { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 8px; } .cr-drop { border: 1px dashed var(--line); border-radius: 9px; padding: 12px; text-align: center; font-size: 12px; color: var(--text-dim); transition: border-color .15s, background .15s; } .cr-drop.on { border-color: var(--gold); background: var(--overlay-soft); color: var(--text); } .msg-thread.drop-on { outline: 2px dashed var(--gold); outline-offset: -6px; } .chreq-img img { max-width: 220px; max-height: 180px; border-radius: 8px; margin: 6px 0; border: 1px solid var(--line); cursor: zoom-in; display: block; } /* super-admin order editor + approve-with-fees dialog */ .modal-wide { max-width: 720px; width: min(720px, 94vw); } .oe-h { margin: 14px 0 6px; font-size: 13px; } .oe-tbl { width: 100%; border-collapse: collapse; } .oe-tbl td { padding: 6px 5px; border-bottom: 1px solid var(--line); font-size: 12.5px; vertical-align: middle; } .oe-tbl tr:last-child td { border-bottom: 0; } .oe-num { width: 92px; text-align: right; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-input, transparent); color: inherit; font-size: 12.5px; } tr.oe-gone td { opacity: .45; text-decoration: line-through; } tr.oe-new td { background: color-mix(in srgb, var(--gold-bright, #c9a24b) 8%, transparent); } .oe-tag { font-size: 10.5px; color: var(--gold-bright, #c9a24b); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 5px; vertical-align: middle; } .oe-add { position: relative; margin-top: 8px; } .oe-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; } .oe-f { display: block; margin-bottom: 6px; } .oe-f span { display: block; font-size: 11.5px; color: var(--text-dim); margin-bottom: 2px; } .oe-total { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 13px; } @media (max-width: 640px) { .oe-addr { grid-template-columns: 1fr; } } /* stock triage panel: what bulk add / CSV import left out or trimmed */ .b-stock { margin-top: 10px; border: 1px solid color-mix(in srgb, var(--neg) 34%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--neg) 6%, transparent); padding: 9px 11px; } .b-stock-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .b-stock-head b { font-size: 12.5px; } .b-stock-head .link-btn { margin-left: auto; } .b-stock-tbl { width: 100%; border-collapse: collapse; margin: 7px 0 5px; } .b-stock-tbl td { padding: 5px 6px; border-bottom: 1px solid var(--line); font-size: 12.5px; vertical-align: top; } .b-stock-tbl tr:last-child td { border-bottom: 0; } .b-bulk { margin-top: 12px; } .b-bulk summary { cursor: pointer; color: var(--text-dim); font-size: 12.5px; } .b-bulk textarea { margin-top: 8px; font-family: ui-monospace, Consolas, monospace; } .b-csv-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .b-file-label { display: inline-block; } .b-bulk code { font-family: ui-monospace, Consolas, monospace; color: var(--gold-bright); font-size: 12px; } .btn-ghost { margin-top: 8px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); padding: 7px 14px; border-radius: 8px; cursor: pointer; } .btn-ghost:hover { border-color: var(--gold); } .b-foot { border-top: 1px solid var(--line); padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; } .b-sub { font-size: 15px; } .b-sub b { color: var(--gold-bright); } .b-foot .btn-apply { width: 100%; padding: 11px; } .b-msg { min-height: 16px; font-size: 12.5px; } .b-done { text-align: center; padding: 30px 16px; } .b-done-check { width: 56px; height: 56px; border-radius: 50%; background: rgba(95,168,106,.16); color: var(--pos); font-size: 28px; display: grid; place-items: center; margin: 0 auto 14px; } .b-done .btn-apply { display: inline-block; margin: 14px 8px 0; text-decoration: none; } .b-addr-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin: 12px 0 6px; } .b-addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .b-addr-grid .b-addr-input[data-f="address_1"], .b-addr-grid .b-addr-input[data-f="address_2"], .b-addr-grid .b-addr-input[data-f="company"] { grid-column: 1 / -1; } .b-same { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 13px; color: var(--text-dim); } .b-coupon-row { display: flex; gap: 8px; } .b-coupon-row .b-input { flex: 1; } .b-coupon-row .btn-ghost { margin-top: 0; white-space: nowrap; } .b-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .b-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(201,162,75,.14); color: var(--gold-bright); border: 1px solid rgba(201,162,75,.4); border-radius: 999px; padding: 3px 6px 3px 11px; font-size: 12.5px; font-family: ui-monospace, Consolas, monospace; } .b-chip button { background: none; border: none; color: var(--gold-bright); cursor: pointer; font-size: 15px; line-height: 1; } .b-coupon-results { margin: 10px 0; text-align: left; display: inline-block; } .pos-line { color: var(--pos); font-size: 13px; } /* goal bar (agent home) */ .goal-card { margin-bottom: 18px; } .goal-head { font-size: 13px; font-weight: 650; margin-bottom: 10px; } .goal-nums { font-size: 22px; margin-bottom: 10px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } .goal-nums b { color: var(--text); } .goal-pct { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--gold-bright); } .goal-pct.met { color: var(--pos); } .goal-track { height: 12px; border-radius: 7px; background: var(--overlay-soft); overflow: hidden; } .goal-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); } .goal-fill.met { background: var(--pos); } /* goals editor */ .goal-edit { white-space: nowrap; color: var(--text-dim); } .goal-input { width: 100px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; color: var(--text); text-align: right; font-size: 13px; } .goal-input:focus { border-color: var(--gold); outline: none; } .goal-input.saved { border-color: var(--pos); } .goal-input.failed { border-color: var(--neg); } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--text-dim); font-weight: 500; transition: all .14s; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.on { background: rgba(201,162,75,0.12); color: var(--gold-bright); } .nav-item.on .nav-icon { color: var(--gold); } .nav-icon { font-size: 14px; width: 18px; text-align: center; color: var(--text-faint); } .sidebar-foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .data-badge { font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 4px 9px; border-radius: 999px; color: var(--pos); border: 1px solid rgba(95,168,106,.4); } .data-badge.err { color: var(--neg); border-color: rgba(194,96,63,.5); } .ro-badge { font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 4px 9px; border-radius: 999px; color: var(--gold); border: 1px solid rgba(201,162,75,.45); cursor: help; } .theme-toggle { margin-left: auto; width: 26px; height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); font-size: 13px; cursor: pointer; } .theme-toggle:hover { border-color: rgba(201,162,75,.4); color: var(--gold-bright); } /* main */ .main { overflow: hidden; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 16px; padding: 16px 28px; border-bottom: 1px solid var(--line); background: var(--topbar-bg); } .topbar h1 { font-size: 19px; margin: 0; font-weight: 650; } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } .refresh-meta { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; } .refresh-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 13px; color: var(--text); cursor: pointer; font-size: 13px; } .refresh-btn:hover { border-color: rgba(201,162,75,.4); } .refresh-btn:disabled { opacity: .6; cursor: default; } .refresh-ico { display: inline-block; font-size: 15px; line-height: 1; } .refresh-btn.spinning .refresh-ico { animation: refresh-spin .7s linear infinite; } @keyframes refresh-spin { to { transform: rotate(360deg); } } .range-control { position: relative; } #view { padding: 24px 28px 64px; overflow-y: auto; flex: 1; } .loading { display: flex; align-items: center; gap: 10px; color: var(--text-dim); padding: 60px; justify-content: center; } .spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .errbox { background: var(--surface); border: 1px solid rgba(194,96,63,.4); border-radius: var(--radius); padding: 20px; } /* range control */ .range-trigger { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 13px; color: var(--text); cursor: pointer; font-size: 13px; } .range-trigger:hover { border-color: rgba(201,162,75,.4); } .rt-label { font-weight: 650; } .rt-span { color: var(--text-dim); font-size: 12px; } .rt-cmp { font-size: 10px; font-weight: 700; color: var(--gold-bright); background: rgba(201,162,75,.15); padding: 2px 6px; border-radius: 5px; } .rt-caret { color: var(--text-faint); } .range-panel { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 300px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 14px; z-index: 40; } .range-control.open .range-panel { display: block; } .presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .preset { background: var(--surface); border: 1px solid var(--line); color: var(--text-dim); padding: 8px; border-radius: 8px; cursor: pointer; font-size: 12.5px; } .preset:hover { color: var(--text); } .preset.on { background: rgba(201,162,75,.16); color: var(--gold-bright); border-color: rgba(201,162,75,.4); font-weight: 600; } .range-custom { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .range-custom label { font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; } .range-custom input { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 7px; color: var(--text); } .cmp-toggle { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 12.5px; color: var(--text-dim); } .panel-foot { display: flex; justify-content: flex-end; } .btn-apply { background: var(--gold); color: #1a1206; border: none; padding: 8px 18px; border-radius: 8px; font-weight: 700; cursor: pointer; } .btn-apply:hover { background: var(--gold-bright); } .btn-apply:disabled { opacity: .5; cursor: default; } /* status (order-status) filter control — same shape as the range control */ .status-control { position: relative; } .status-panel { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 280px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 14px; z-index: 40; } .status-control.open .status-panel { display: block; } .status-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; } .status-row { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text); } .status-row:hover { background: var(--overlay-soft); } .status-row input { flex: 0 0 auto; } .status-row .dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; } .status-quick { font-size: 12px; color: var(--text-dim); margin: 8px 0; } .status-quick .link-btn { font-size: 12px; } .status-panel p.muted.sm { margin: 6px 0 10px; line-height: 1.4; } /* product -> live-store links */ .prod-link:hover b { color: var(--gold-bright); text-decoration: underline; } /* kpis */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; position: relative; overflow: hidden; } .kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); opacity: .8; } .kpi-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; } .kpi-value { font-size: 25px; font-weight: 700; margin: 6px 0 4px; } .kpi-foot { display: flex; align-items: center; gap: 8px; } .kpi-sub { font-size: 12px; color: var(--text-faint); } .kpi-clickable { cursor: pointer; transition: border-color .14s, transform .05s; } .kpi-clickable:hover { border-color: rgba(201,162,75,.5); } .kpi-clickable:active { transform: translateY(1px); } .kpi-drill-cue { color: var(--gold); font-size: 10px; } .controls-label { font-size: 12px; color: var(--text-dim); align-self: center; } .chip { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; } .chip.pos { color: var(--pos); background: rgba(95,168,106,.14); } .chip.neg { color: var(--neg); background: rgba(194,96,63,.14); } .chip.neutral { color: var(--text-faint); background: var(--overlay-soft); } /* cards + grid */ .grid { display: grid; gap: 18px; margin-bottom: 18px; } .grid-2 { grid-template-columns: 1fr 1fr; } /* Responsive rules (hamburger nav + breakpoints) are consolidated in the RESPONSIVE section at the end of this file. */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; } .card-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px 0; } .card-head h3 { margin: 0; font-size: 16px; font-weight: 650; } .card-body { padding: 14px 18px 18px; } .count { font-size: 12px; color: var(--text-faint); font-weight: 500; margin-left: 6px; } .cmp-key { font-size: 11px; color: var(--text-faint); font-weight: 500; } .link { color: var(--gold-bright); font-size: 12.5px; font-weight: 600; } /* charts */ .chart { width: 100%; height: auto; display: block; } .chart-empty { color: var(--text-faint); padding: 40px; text-align: center; } /* line/area chart hover tooltip + per-point marker (wired in wireCharts) */ .chart-hit { cursor: default; } .chart-dot { transition: opacity .12s ease; } .chart-tip { position: absolute; transform: translate(-50%, -132%); pointer-events: none; z-index: 6; background: var(--surface-2, #26221a); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; font-size: 12px; line-height: 1.25; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.45); } .chart-tip b { display: block; color: var(--text-dim); font-weight: 600; font-size: 10.5px; } .chart-tip span { color: var(--gold-bright); font-weight: 800; } /* category parent/child accordion */ .acc-parent.has-kids { cursor: pointer; } .acc-parent.has-kids:hover td { background: rgba(201,162,75,.06); } .acc-caret { display: inline-block; width: 14px; margin-right: 2px; color: var(--gold-bright); transition: transform .15s ease; font-size: 10px; } .acc-caret.sp { visibility: hidden; } .acc-parent.open .acc-caret { transform: rotate(90deg); } .acc-count { display: inline-block; background: var(--surface-2, #26221a); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; font-size: 10.5px; color: var(--text-dim); margin-left: 6px; vertical-align: middle; } .acc-child td { background: rgba(255,255,255,.018); } [data-theme="light"] .acc-child td { background: rgba(0,0,0,.02); } .acc-indent { padding-left: 30px !important; color: var(--text-dim); } /* customer drawer stats */ .cust-stats { display: flex; gap: 10px; margin: 4px 0 6px; } .cust-stat { flex: 1; background: var(--surface-2, #26221a); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .cust-stat span { display: block; font-size: 11px; color: var(--text-dim); } .cust-stat b { font-size: 18px; } .drawer-sub { margin: 16px 0 8px; font-size: 13px; color: var(--text-dim); } /* order notes (bottom of the order drawer) */ .ordnotes { display: flex; flex-direction: column; gap: 8px; } .ordnote { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; padding: 8px 11px; background: var(--surface-2, #26221a); } .ordnote.cust { border-left-color: var(--gold); } .ordnote-meta { font-size: 11px; color: var(--text-faint); margin-bottom: 3px; } .ordnote-tag { color: var(--gold-bright); } .ordnote-body { font-size: 13px; color: var(--text); white-space: pre-wrap; } .rank-chart { max-width: 100%; } /* tables */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; position: relative; } .table-wrap::-webkit-scrollbar { height: 8px; } .table-wrap::-webkit-scrollbar-thumb { background: rgba(201,162,75,.35); border-radius: 4px; } .table-wrap::-webkit-scrollbar-track { background: transparent; } .table-wrap.is-scrollable::after { content: ''; position: absolute; top: 0; right: 0; bottom: 8px; width: 36px; pointer-events: none; background: linear-gradient(90deg, rgba(31,28,21,0), var(--surface)); transition: opacity .15s; } .table-wrap.scrolled-end::after { opacity: 0; } th.sortable:active { color: var(--gold-bright); } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; } th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 600; } th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--text-dim); } .caret { color: var(--gold); font-size: 10px; } td { font-size: 13.5px; } td.right, th.right { text-align: right; } tbody tr:hover { background: var(--overlay-softer); } tr.clickable { cursor: pointer; } tr.clickable:hover { background: rgba(201,162,75,.07); } .empty { text-align: center; color: var(--text-faint); padding: 26px; white-space: normal; } .arrow { color: var(--text-faint); font-size: 18px; } .profbar { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--overlay-soft); margin-right: 8px; vertical-align: middle; overflow: hidden; } .profbar span { display: block; height: 100%; background: var(--gold); } .pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-transform: capitalize; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); } /* controls (orders) */ .controls { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; } .input { flex: 1; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--text); font-size: 13.5px; outline: none; } .input:focus { border-color: var(--gold); } .seg { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 4px; flex-wrap: wrap; } .seg-btn { background: none; border: none; color: var(--text-dim); padding: 6px 11px; border-radius: 7px; cursor: pointer; font-size: 12px; text-transform: capitalize; } .seg-btn:hover { color: var(--text); } .seg-btn.on { background: rgba(201,162,75,.16); color: var(--gold-bright); font-weight: 600; } .pager { display: flex; align-items: center; gap: 12px 16px; justify-content: center; margin-top: 16px; flex-wrap: wrap; } .pg-btn { background: var(--surface); border: 1px solid var(--line); color: var(--text); padding: 11px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; min-height: 44px; } .pg-btn:disabled { opacity: .4; cursor: default; } .pg-btn:not(:disabled):hover { border-color: var(--gold); } /* detail page */ .back { color: var(--text-dim); font-size: 13px; } .back:hover { color: var(--gold-bright); } .detail-title { font-size: 22px; margin: 8px 0 18px; } /* drawer */ #drawer-root { position: fixed; inset: 0; pointer-events: none; z-index: 60; } #drawer-root.open { pointer-events: auto; } .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; } #drawer-root.open .scrim { opacity: 1; } .drawer { position: absolute; right: 0; top: 0; bottom: 0; width: 720px; max-width: 96vw; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.5); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; } #drawer-root.open .drawer { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .drawer, .scrim { transition: none; } } .drawer-loading { display: flex; gap: 10px; align-items: center; color: var(--text-dim); padding: 40px; } .drawer-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); position: relative; } .drawer-num { font-weight: 700; font-size: 16px; } .drawer-top { margin-left: auto; display: flex; align-items: center; gap: 10px; } .drawer-total { font-size: 18px; font-weight: 700; color: var(--gold-bright); } .drawer-x { background: none; border: none; color: var(--text-dim); font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px; } .drawer-x:hover { color: var(--text); } .drawer-back { background: none; border: 1px solid var(--line); border-radius: 7px; color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 4px 10px; cursor: pointer; white-space: nowrap; } .drawer-back:hover { border-color: var(--gold); color: var(--text); } .drawer-body { overflow-y: auto; padding: 8px 20px 28px; } .drawer-body section { padding: 16px 0; border-bottom: 1px solid var(--line); } .drawer-body h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .kv { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; font-size: 13.5px; } .kv span { color: var(--text-dim); } .kv.total-row { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; font-size: 15px; } .addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; font-size: 13px; line-height: 1.6; } .addr-h { font-size: 11px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; } .track { font-size: 13px; margin: 2px 0; } .track a { color: var(--gold-bright); } .wc-link { display: inline-block; margin-top: 16px; color: var(--gold-bright); font-size: 13px; font-weight: 600; } /* ============================================================================ * RESPONSIVE — mobile-first overrides. Desktop (>=901px) is untouched. * ========================================================================== */ /* hamburger + nav scrim: hidden on desktop */ .nav-toggle { display: none; } #nav-scrim { display: none; } /* ---- sidebar -> off-canvas hamburger drawer (phones + small tablets) ---- */ @media (max-width: 900px) { .app { grid-template-columns: 1fr; height: 100dvh; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 264px; max-width: 84vw; z-index: 55; transform: translateX(-100%); transition: transform .24s ease; box-shadow: 12px 0 40px rgba(0,0,0,.55); will-change: transform; } .app.nav-open .sidebar { transform: translateX(0); } #nav-scrim { display: block; position: fixed; inset: 0; z-index: 54; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .24s ease; } .app.nav-open #nav-scrim { opacity: 1; pointer-events: auto; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; } .nav-toggle:hover { border-color: rgba(201,162,75,.4); } .topbar { padding: 12px 16px; gap: 10px; } .topbar h1 { font-size: 17px; } .sidebar .nav-item { padding: 12px 14px; } .new-order-btn { padding: 13px; font-size: 14px; } .sess-trigger { padding: 11px 12px; } th.sortable { padding-top: 0; padding-bottom: 0; height: 44px; -webkit-tap-highlight-color: rgba(201,162,75,.2); } th.sortable .caret { font-size: 12px; } } /* ---- two-up card grids collapse (tablets keep them above 720) ---- */ @media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } } /* ---- phone tuning ---- */ @media (max-width: 640px) { .topbar { flex-wrap: wrap; row-gap: 10px; } .topbar h1 { font-size: 17px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-actions { width: 100%; margin-left: 0; justify-content: flex-end; gap: 8px; } .refresh-meta { display: none; } .refresh-txt { display: none; } .refresh-btn { padding: 0; width: 44px; height: 44px; justify-content: center; gap: 0; } .refresh-ico { font-size: 18px; } .range-trigger { min-height: 44px; padding: 9px 12px; } .rt-span { display: none; } .controls { gap: 10px; } .input { flex: 1 1 100%; min-width: 0; width: 100%; } .seg { width: 100%; } .seg-btn { padding: 9px 12px; min-height: 40px; } .controls-label { width: 100%; align-self: flex-start; } /* range panel -> bottom sheet (closes via the existing outside-click handler) */ .range-panel, .status-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 80vh; overflow-y: auto; border-radius: 14px 14px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.5); z-index: 80; } .status-row { min-height: 44px; } .range-custom { flex-direction: column; } .range-custom label, .range-custom input { width: 100%; } #view { padding: 16px 14px 56px; } .grid { gap: 12px; margin-bottom: 12px; } .card { margin-bottom: 12px; } .card-head { padding: 13px 14px 0; } .card-body { padding: 12px 14px 14px; } .kpi-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; } .kpi { padding: 13px 14px; } .kpi-value { font-size: 20px; word-break: break-word; } .chart { min-height: 180px; height: 180px; } .detail-title { font-size: 18px; margin: 6px 0 12px; line-height: 1.25; } .goal-nums { font-size: 18px; } .goal-pct { font-size: 14px; } th, td { padding: 9px 9px; } td { font-size: 13px; } th { font-size: 10px; } .pager { gap: 10px; } .pager .muted { flex-basis: 100%; text-align: center; order: -1; } .pg-btn { flex: 1; max-width: 48%; } /* drawers full-bleed */ .drawer, .drawer.builder { width: 100vw; max-width: 100vw; border-left: none; } .b-addr-grid, .b-grid, .addr-grid { grid-template-columns: 1fr; } .drawer-head { padding: 14px 16px; } .drawer-body { padding: 8px 16px 24px; flex: 1 1 auto; min-height: 0; } #bBody { flex: 1 1 auto; min-height: 0; } .b-foot { position: sticky; bottom: 0; background: var(--surface); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 20px rgba(0,0,0,.35); } .b-items td { padding: 8px 4px; } .b-items td:first-child { white-space: normal; word-break: break-word; } .b-price-input { width: 64px; padding: 6px 4px; } .b-qty input { width: 40px; } .b-qty button { width: 36px; height: 36px; font-size: 18px; } .b-rm { min-width: 44px; min-height: 44px; padding: 0 10px; } .drawer-x { min-width: 44px; min-height: 44px; font-size: 28px; } .b-chip { padding: 6px 8px 6px 12px; } .b-chip button { min-width: 28px; min-height: 28px; font-size: 18px; } .cf-chk, .b-same { min-height: 44px; } .cf-chk input, .b-same input, .cf-chks input { width: 20px; height: 20px; } /* iOS focus-zoom guard */ .b-input, .cf-i, .input, .b-price-input, .b-qty input, .range-custom input, .goal-input { font-size: 16px; } } /* ---- smallest phones: even 2-up KPI grid ---- */ @media (max-width: 380px) { .kpi-row { grid-template-columns: 1fr 1fr; } } /* ---- tablets 481-900: cap drawers so the scrim edge stays tap-to-close ---- */ @media (min-width: 481px) and (max-width: 900px) { .drawer, .drawer.builder { width: 100vw; max-width: 480px; } } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } #nav-scrim { transition: none; } } /* ============================================================================ * TIME CLOCK · AUTH GATE · MODALS (added with the time-tracking feature) * ========================================================================== */ /* ---- login / no-access gate ---- */ .auth-gate { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: radial-gradient(1200px 600px at 50% -10%, rgba(201,162,75,.10), transparent 60%), var(--bg); } .auth-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; } .auth-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 20px; } .auth-logo-img { display: block; width: 100%; max-width: 240px; height: auto; object-fit: contain; } .auth-brand .logo-light { display: none; } [data-theme="light"] .auth-brand .logo-dark { display: none; } [data-theme="light"] .auth-brand .logo-light { display: block; } .auth-logo { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--gold), #8a6d12); display: grid; place-items: center; font-weight: 800; color: #1a1206; font-size: 20px; } .auth-title { font-size: 17px; font-weight: 700; } .auth-sub { font-size: 12.5px; color: var(--text-dim); } .auth-field { display: block; margin-bottom: 14px; } .auth-field span { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; } .auth-field input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; color: var(--text); font-size: 16px; outline: none; } .auth-field input:focus { border-color: var(--gold); } .auth-remember { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; cursor: pointer; font-size: 13px; color: var(--text-dim); } .auth-remember input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; flex: 0 0 auto; } .auth-remember span { user-select: none; } .auth-err { color: var(--neg); font-size: 13px; min-height: 18px; margin-bottom: 6px; } .auth-btn { width: 100%; padding: 13px; border-radius: 10px; border: 1px solid rgba(201,162,75,.45); background: linear-gradient(135deg, var(--gold), #a07c1e); color: #1a1206; font-weight: 800; font-size: 15px; cursor: pointer; } .auth-btn:hover { filter: brightness(1.07); } .auth-btn:disabled { opacity: .6; cursor: default; } .auth-foot { margin-top: 14px; text-align: center; font-size: 12px; color: var(--text-faint); } /* ---- sidebar identity card ---- */ .sess-card { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; } .sess-card .sess-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .sess-card .sess-name { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sess-card .sess-role { font-size: 11px; text-transform: capitalize; } .sess-signout { background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--text-dim); width: 30px; height: 30px; cursor: pointer; flex: 0 0 auto; font-size: 14px; } .sess-signout:hover { border-color: var(--neg); color: var(--neg); } /* ---- the clock card ---- */ /* ---- clock hero (redesigned: big, one-tap, mobile-first) ---- */ .clock-wrap { max-width: 460px; margin: 0 auto 18px; } .clock-hero { text-align: center; border-radius: 22px; padding: 30px 22px 26px; border: 1px solid var(--line); background: radial-gradient(120% 80% at 50% 0%, var(--overlay-soft), var(--surface)); position: relative; } .clock-hero.working { border-color: rgba(95,168,106,.5); background: radial-gradient(120% 80% at 50% 0%, rgba(95,168,106,.14), var(--surface)); } .clock-hero.lunch { border-color: rgba(208,138,31,.5); background: radial-gradient(120% 80% at 50% 0%, rgba(208,138,31,.16), var(--surface)); } .clock-greet { font-size: 15px; color: var(--text-dim); margin-bottom: 12px; } .clock-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); } .clock-badge .clock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); } .clock-hero.working .clock-badge { color: var(--pos); border-color: rgba(95,168,106,.4); } .clock-hero.working .clock-badge .clock-dot { background: var(--pos); box-shadow: 0 0 0 4px rgba(95,168,106,.2); animation: clockPulse 2s infinite; } .clock-hero.lunch .clock-badge { color: #d08a1f; border-color: rgba(208,138,31,.45); } .clock-hero.lunch .clock-badge .clock-dot { background: #d08a1f; box-shadow: 0 0 0 4px rgba(208,138,31,.2); } @keyframes clockPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(95,168,106,.22); } 50% { box-shadow: 0 0 0 8px rgba(95,168,106,0); } } .clock-elapsed { font-size: 38px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 16px 0 4px; color: var(--text); line-height: 1.1; } .clock-hero.out .clock-elapsed { font-size: 20px; font-weight: 600; color: var(--text-dim); } .clock-since { font-size: 13px; color: var(--text-faint); margin-bottom: 22px; } .clock-hero.out .clock-since { margin-bottom: 0; } .clock-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 20px; margin-top: 12px; border-radius: 16px; border: none; font-size: 18px; font-weight: 800; cursor: pointer; color: #fff; min-height: 60px; -webkit-tap-highlight-color: transparent; transition: transform .06s, filter .12s; } .clock-cta:first-of-type { margin-top: 4px; } .clock-cta:active { transform: scale(.98); } .clock-cta:disabled { opacity: .55; cursor: default; } .clock-cta:hover:not(:disabled) { filter: brightness(1.06); } .clock-cta-ico { font-size: 15px; opacity: .9; } .clock-cta.in { background: linear-gradient(135deg, var(--gold), #a07c1e); color: #1a1206; } .clock-cta.out { background: linear-gradient(135deg, #c05a34, #8f4227); } .clock-cta.lunch, .clock-cta.lunch-end { background: var(--surface-2); color: #d99a30; border: 1px solid rgba(208,138,31,.45); min-height: 52px; font-size: 16px; } /* the 30-min quick break: same family, visibly the smaller option */ .clock-cta.lunch.alt { min-height: 42px; padding: 12px 20px; font-size: 14px; opacity: .92; border-style: dashed; } .clock-hint { font-size: 12px; color: var(--text-faint); margin-top: 14px; } .clock-msg { text-align: center; font-size: 14px; min-height: 22px; margin: 12px 0 2px; font-weight: 600; } .clock-msg.busy { color: var(--gold-bright); } .clock-msg.err { color: var(--neg); } .clock-pw { display: block; margin: 6px auto 0; font-size: 13px; color: var(--text-dim); } .clock-pw:hover { border-color: var(--gold); color: var(--text); } /* ---- modal ---- */ #modal-root { display: none; } #modal-root.open { display: grid; place-items: center; position: fixed; inset: 0; z-index: 250; padding: 16px; } .modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); } .modal { position: relative; width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; max-height: 90vh; overflow-y: auto; } .modal h3 { margin: 0 0 4px; font-size: 17px; } /* :not(checkbox/radio) matters — this rule is for TEXT fields. Without the exclusion it stretched every checkbox in every modal to 100% width with 11px padding, which is what wrecked the project-members list (a 221px checkbox shoving the name to the middle of the row). */ .modal textarea, .modal input:not([type="checkbox"]):not([type="radio"]), .modal select { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; color: var(--text); font-size: 16px; outline: none; font-family: inherit; } .modal input[type="checkbox"], .modal input[type="radio"] { width: auto; flex: none; margin: 0; padding: 0; accent-color: var(--gold); cursor: pointer; } .modal textarea:focus, .modal input:not([type="checkbox"]):not([type="radio"]):focus, .modal select:focus { border-color: var(--gold); } .modal-field { display: block; margin: 12px 0; } .modal-field > span { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; } .modal-err { color: var(--neg); font-size: 13px; min-height: 18px; } .pw-row { display: flex; gap: 8px; align-items: flex-start; } .pw-row input { flex: 1; min-width: 0; } .pw-row .btn-ghost { margin-top: 0; flex: 0 0 auto; } .field-dim { opacity: .5; transition: opacity .15s ease; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; } .modal-actions .btn-ghost { margin-top: 0; } .btn-primary { background: linear-gradient(135deg, var(--gold), #a07c1e); color: #1a1206; font-weight: 800; border: 1px solid rgba(201,162,75,.5); border-radius: 9px; padding: 9px 16px; cursor: pointer; } .btn-primary:hover { filter: brightness(1.07); } .btn-primary:disabled { opacity: .6; cursor: default; } .btn-danger { background: linear-gradient(135deg, #c2603f, #a13b26); color: #fff; font-weight: 800; border: 1px solid rgba(194,96,63,.55); border-radius: 9px; padding: 9px 16px; cursor: pointer; } .btn-danger:hover { filter: brightness(1.06); } .btn-danger:disabled { opacity: .5; cursor: default; filter: none; } .modal-err.ok { color: var(--pos); } .danger-modal { border-color: rgba(194,96,63,.5); box-shadow: 0 0 0 1px rgba(194,96,63,.25), 0 24px 60px rgba(0,0,0,.5); } .danger-modal h3 { color: var(--neg); } /* danger zone at the foot of the customer drawers (admins only) */ .cust-danger { margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--line); } .cust-danger .link-btn { color: var(--neg); } /* ---- admin time console + staff ---- */ .loc-link { color: var(--gold-bright); text-decoration: none; white-space: nowrap; font-size: 12.5px; } .loc-link:hover { text-decoration: underline; } .btn-mini { border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; font-size: 12px; cursor: pointer; background: var(--surface-2, #26221a); color: var(--text); } .btn-mini.ok { border-color: rgba(95,168,106,.5); color: var(--pos); } .btn-mini.no { border-color: rgba(194,96,63,.5); color: var(--neg); } .btn-mini:disabled { opacity: .5; } .link-btn { background: none; border: none; color: var(--gold-bright); cursor: pointer; font-size: 12.5px; padding: 0; text-decoration: underline; } .link-btn.danger { color: var(--neg); } .tag-edited { display: inline-block; background: rgba(139,92,246,.16); color: color-mix(in srgb, #8b5cf6 70%, var(--text)); border-radius: 6px; padding: 1px 6px; font-size: 11px; } .edited-row td { background: rgba(139,92,246,.05); } .cell-clip { display: inline-block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .staff-edit { background: var(--bg); border: 1px solid var(--line); border-radius: 7px; color: var(--text); padding: 5px 7px; font-size: 13px; } .staff-edit.saved-flash { border-color: var(--pos); box-shadow: 0 0 0 2px rgba(95,168,106,.25); } .count { font-size: 12px; color: var(--text-dim); font-weight: 600; } /* ============================================================================ * SETTINGS · PAYROLL · IMPORT · rate inputs (admin tools) * ========================================================================== */ .settings-wrap { max-width: 760px; } /* data export tiles */ .exp-scope { margin-bottom: 14px; align-items: center; } .exp-scopelabel { margin-left: 8px; } .exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .exp-tile { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; } .exp-tile-h { display: flex; align-items: center; gap: 9px; font-size: 15px; } .exp-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(201,162,75,.14); color: var(--gold-bright); font-size: 15px; } .exp-desc { margin: 8px 0 12px; flex: 1; } .exp-btn { margin-top: 0 !important; width: 100%; justify-content: center; } .exp-status { margin-top: 12px; font-size: 13px; min-height: 18px; font-weight: 600; } .exp-status.busy { color: var(--gold-bright); } .exp-status.ok { color: var(--pos); } .exp-status.err { color: var(--neg); } .settings-add { display: flex; gap: 8px; margin: 12px 0 6px; } .settings-add .input { flex: 1; min-width: 0; } .settings-add .btn-ghost { margin-top: 0; white-space: nowrap; } .settings-foot { display: flex; align-items: center; gap: 12px; justify-content: flex-end; margin-top: 12px; } .settings-msg { margin-right: auto; font-size: 13px; color: var(--text-dim); } .settings-msg.ok { color: var(--pos); } .settings-msg.err { color: var(--neg); } .notify-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 7px; background: var(--surface-2); } .notify-row.locked { background: var(--overlay-soft); border-style: dashed; } .notify-em { font-size: 13.5px; word-break: break-all; } .notify-lock { margin-left: auto; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; } .notify-x { margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 7px; width: 26px; height: 26px; color: var(--text-dim); cursor: pointer; font-size: 16px; line-height: 1; flex: 0 0 auto; } .notify-x:hover { border-color: var(--neg); color: var(--neg); } /* page-permissions matrix (super-admin only, Settings) */ .perm-table { width: 100%; border-collapse: collapse; } .perm-table th, .perm-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13.5px; } .perm-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 600; } .perm-table tbody tr:hover { background: var(--overlay-softer); } .perm-cell { text-align: center !important; width: 96px; } .perm-chk { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; } .rate-cell { white-space: nowrap; } .rate-cell::before { content: ''; } .rate-input { width: 68px; text-align: right; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; color: var(--text); padding: 5px 7px; font-size: 13px; } .rate-input:focus { outline: none; border-color: var(--gold); } .rate-input.saved-flash { border-color: var(--pos); box-shadow: 0 0 0 2px rgba(95,168,106,.25); } .pay-date { font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; } .pay-date input { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px; color: var(--text); } .import-cols { font-size: 13px; margin-bottom: 14px; } .import-cols code { font-family: ui-monospace, Consolas, monospace; color: var(--gold-bright); font-size: 12px; background: var(--overlay-soft); padding: 1px 5px; border-radius: 4px; } .import-notes { margin: 8px 0 4px; padding-left: 18px; color: var(--text-dim); font-size: 12.5px; line-height: 1.7; } .import-notes code { font-size: 11.5px; } .import-drop { border: 2px dashed var(--line); border-radius: 12px; padding: 22px; text-align: center; margin: 6px 0 4px; } .import-drop input[type=file] { color: var(--text-dim); font-size: 14px; } .team-tabs { flex-wrap: wrap; } /* mobile tuning for the admin tools */ @media (max-width: 640px) { .settings-wrap { max-width: 100%; } .settings-add { flex-direction: column; } .settings-add .btn-ghost { width: 100%; padding: 12px; } .settings-foot { flex-wrap: wrap; } .settings-foot .btn-apply { width: 100%; } .pay-date { flex: 1 1 46%; } .pay-date input { font-size: 16px; } .rate-input { font-size: 16px; width: 76px; } .notify-input, .settings-add input { font-size: 16px; } } /* ============================================================================ * ATTENDANCE (Team → Attendance) + header clock + my-week strip (Batch 3C) * ========================================================================== */ .att-section { margin-bottom: 18px; } .att-h { font-size: 13px; font-weight: 650; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } /* "right now" strip — horizontally scrolling live cards */ .att-now { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .att-empty { color: var(--text-dim); padding: 18px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; background: var(--overlay-softer); } .att-now-card { text-align: left; border-radius: 14px; padding: 14px 15px; cursor: pointer; color: var(--text); border: 1px solid rgba(95,168,106,.5); background: radial-gradient(120% 90% at 0% 0%, rgba(95,168,106,.14), var(--surface)); transition: transform .12s ease, filter .12s ease; } .att-now-card.lunch { border-color: rgba(208,138,31,.5); background: radial-gradient(120% 90% at 0% 0%, rgba(208,138,31,.15), var(--surface)); } .att-now-card:hover { filter: brightness(1.05); transform: translateY(-1px); } .att-now-top { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--pos); } .att-now-card.lunch .att-now-top { color: #d08a1f; } .att-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 4px rgba(95,168,106,.2); animation: clockPulse 2s infinite; } .att-now-card.lunch .att-dot { background: #d08a1f; box-shadow: 0 0 0 4px rgba(208,138,31,.2); animation: none; } .att-now-name { font-weight: 700; font-size: 15px; margin: 8px 0 2px; } .att-now-timer { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: .01em; } .att-now-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; } .att-now-card[role="button"] { cursor: pointer; } .att-now-card[role="button"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .att-now-actions { display: flex; gap: 8px; margin-top: 12px; } .att-act { flex: 1; border-radius: 8px; padding: 8px 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--text); } .att-act:hover:not(:disabled) { filter: brightness(1.06); } .att-act:disabled { opacity: .6; cursor: default; } .att-act.out { border-color: rgba(194,96,63,.5); color: var(--neg); } .att-act.remind { border-color: rgba(201,162,75,.5); color: var(--gold-bright); } .att-act.sent { border-color: rgba(95,168,106,.6); color: var(--pos); } /* range control row */ .att-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; } .att-range { } .att-dates { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; } .att-dates input { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color: var(--text); } .att-dates input:focus { outline: none; border-color: var(--gold); } /* per-employee cards */ .att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .att-card { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; color: var(--text); transition: transform .12s ease, border-color .12s ease; } .att-card:hover { transform: translateY(-1px); border-color: rgba(201,162,75,.45); } .att-card.live { border-color: rgba(95,168,106,.5); } .att-card-head { display: flex; align-items: center; gap: 10px; } .att-ava { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #1a1206; background: linear-gradient(135deg, var(--gold), #8a6d12); } .att-id { display: flex; flex-direction: column; min-width: 0; } .att-name { font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .att-job { font-size: 11.5px; color: var(--text-faint); } .att-status { margin-left: auto; flex: 0 0 auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--pos); border: 1px solid rgba(95,168,106,.4); border-radius: 999px; padding: 2px 8px; } .att-card-hours { font-size: 26px; font-weight: 750; margin: 12px 0 2px; font-variant-numeric: tabular-nums; } .att-card-hours .att-zero { color: var(--text-faint); font-weight: 500; } .att-card-sub { font-size: 12px; color: var(--text-dim); } .att-card-sub .att-live-timer { color: var(--pos); font-weight: 650; font-variant-numeric: tabular-nums; } /* employee drawer: month nav + KPI tiles */ .emp-month { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 0 4px; font-size: 15px; } .emp-mnav { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 34px; color: var(--text); font-size: 18px; cursor: pointer; } .emp-mnav:hover:not(:disabled) { border-color: var(--gold); } .emp-mnav:disabled { opacity: .35; cursor: default; } .emp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 0 4px; } .emp-kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px; text-align: center; } .emp-kpi span { display: block; font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; } .emp-kpi label { display: block; font-size: 11px; color: var(--text-dim); margin-top: 3px; } /* employee "my week" strip on the clock page */ .myweek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 4px; } .myweek-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px; text-align: center; } .myweek-item b { display: block; font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; } .myweek-item span { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; } /* header clock pill (topbar) */ .header-clock { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--pos); border: 1px solid rgba(95,168,106,.45); background: rgba(95,168,106,.12); } .header-clock:hover { filter: brightness(1.06); } .header-clock.lunch { color: #d08a1f; border-color: rgba(208,138,31,.45); background: rgba(208,138,31,.12); } .header-clock .hc-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(95,168,106,.18); animation: clockPulse 2s infinite; } .header-clock.lunch .hc-dot { box-shadow: 0 0 0 4px rgba(208,138,31,.18); animation: none; } .header-clock .hc-txt b { font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .att-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .att-now { grid-template-columns: 1fr; } .att-head { gap: 8px; } .att-dates input { font-size: 16px; } .emp-kpis { grid-template-columns: repeat(2, 1fr); } .header-clock .hc-txt { display: none; } /* pill collapses to a dot on small screens */ .header-clock { padding: 7px; } } /* ============================================================================ * TASKS / BOARDS (Monday + Trello style) * ========================================================================== */ .tk-wrap { display: flex; flex-direction: column; gap: 16px; } .tk-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .tk-stats { display: flex; gap: 16px; font-size: 13px; color: var(--text-dim); } .tk-stats b { color: var(--text); font-size: 15px; } .tk-stats .tk-over b { color: var(--neg); } .tk-quickadd { flex: 1; min-width: 220px; } .tk-quickadd input { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--text); font-size: 14px; } .tk-quickadd input:focus { outline: none; border-color: var(--gold); } .tk-empty { text-align: center; color: var(--text-dim); padding: 40px; border: 1px dashed var(--line); border-radius: 14px; } /* My Work lanes */ .tk-lane { } .tk-lane-h { font-size: 13px; font-weight: 650; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .tk-lane-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } /* card tile */ .tk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: transform .1s ease, border-color .1s ease; } .tk-card:hover { border-color: rgba(201,162,75,.45); transform: translateY(-1px); } .tk-card.dragging { opacity: .5; } .tk-card.done { opacity: .62; } .tk-card.done .tk-title { text-decoration: line-through; } .tk-labels { display: flex; gap: 4px; margin-bottom: 7px; } .tk-label { width: 26px; height: 6px; border-radius: 3px; background: var(--c); } .tk-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; } /* My Tasks: To-do / Done tabs + one-click complete toggle on each card */ .tk-tabs { margin: 2px 0 16px; width: fit-content; } .tk-tabn { margin-left: 5px; opacity: .7; font-weight: 700; } .tk-titlerow { display: flex; align-items: flex-start; gap: 9px; } .tk-typeicon { flex: 0 0 auto; font-size: 14px; line-height: 1.3; } .tk-donebtn { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; padding: 0; border-radius: 50%; border: 1.6px solid color-mix(in srgb, var(--text-dim) 55%, transparent); background: transparent; cursor: pointer; position: relative; transition: border-color .12s, background .12s; } .tk-donebtn::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: transparent; transition: color .12s; } .tk-donebtn:hover { border-color: var(--pos); } .tk-donebtn:hover::after { color: color-mix(in srgb, var(--pos) 50%, transparent); } .tk-donebtn.on { background: var(--pos); border-color: var(--pos); } .tk-donebtn.on::after { color: #fff; } .tk-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; font-size: 11px; } .tk-prio { color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 999px; padding: 1px 7px; font-weight: 600; } .tk-due { border-radius: 6px; padding: 1px 6px; font-weight: 600; background: var(--overlay-soft); color: var(--text-dim); } .tk-due.due-over { background: rgba(194,96,63,.16); color: var(--neg); } .tk-due.due-today { background: rgba(224,135,47,.18); color: color-mix(in srgb, #e0872f 68%, var(--text)); } .tk-due.due-soon { background: rgba(201,162,75,.16); color: var(--gold-bright); } .tk-check { color: var(--text-dim); } .tk-check.all { color: var(--pos); } .tk-board { color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius: 6px; padding: 1px 6px; } .tk-ava { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #1a1206; background: linear-gradient(135deg, var(--gold), #8a6d12); } .tk-ava.sm { width: 20px; height: 20px; font-size: 10px; margin: 0; display: inline-grid; vertical-align: middle; } /* a real profile picture covers the gold initials disc; the initial stays underneath so a failed/expired image degrades to it rather than an empty ring */ .tk-ava { position: relative; } .tk-ava.has-img { background: none; overflow: hidden; color: transparent; } .tk-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* boards home */ .tk-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .tk-boardcard { text-align: left; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 14px; padding: 16px; cursor: pointer; color: var(--text); } .tk-boardcard:hover { border-color: rgba(201,162,75,.45); border-left-color: var(--c); } .tk-boardcard-h { font-weight: 700; font-size: 15px; margin-bottom: 4px; } .tk-boardcard-f { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--text-dim); } .tk-prog { flex: 1; height: 6px; border-radius: 3px; background: var(--overlay-soft); overflow: hidden; } .tk-prog.sm { display: inline-block; width: 60px; vertical-align: middle; } .tk-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--pos)); } /* board header */ .tk-bhead { display: flex; align-items: center; gap: 12px; } .tk-btitle { font-size: 18px; font-weight: 700; border-left: 4px solid var(--c); padding-left: 10px; } .tk-members { display: inline-flex; } .tk-members .tk-ava { margin-left: -6px; border: 2px solid var(--bg); } .tk-bactions { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* kanban */ .tk-kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; } .tk-col { flex: 0 0 280px; background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 9px; max-height: 76vh; } .tk-col-h { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 13px; } .tk-col-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); } .tk-col-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 24px; } .tk-col-cards.drop { outline: 2px dashed rgba(201,162,75,.5); outline-offset: 3px; border-radius: 8px; } .tk-addcard { background: none; border: none; color: var(--text-dim); text-align: left; padding: 6px 4px; cursor: pointer; font-size: 12.5px; border-radius: 6px; } .tk-addcard:hover { background: var(--overlay-soft); color: var(--text); } .tk-addcol { flex: 0 0 200px; align-items: center; justify-content: center; color: var(--text-dim); border-style: dashed; border-top-style: solid; border-top-color: transparent; cursor: pointer; } .tk-addcol:hover { color: var(--gold-bright); border-color: rgba(201,162,75,.4); } /* board table view */ .tk-table { width: 100%; border-collapse: collapse; } .tk-table th, .tk-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; } .tk-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); } .tk-trow { cursor: pointer; } .tk-trow:hover { background: var(--overlay-softer); } .tk-statuscell { color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 6px; padding: 2px 9px; font-weight: 600; font-size: 12px; } /* card drawer */ .tk-titleedit { width: 100%; background: none; border: none; color: var(--text); font-size: 18px; font-weight: 700; padding: 4px 0; } .tk-titleedit:focus { outline: none; border-bottom: 1px solid var(--gold); } .tk-cardbody { padding: 8px 20px 28px; } .tk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0; } .tk-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; } .tk-fields select, .tk-fields input { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 14px; } .tk-section { padding: 14px 0; border-top: 1px solid var(--line); } .tk-section h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .tk-section textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; color: var(--text); font: inherit; } .tk-labeledit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .tk-labelchip { color: #1a1206; background: var(--c); border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } .tk-labelchip button, .tk-checkitem button, .tk-additem + * button { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; opacity: .7; } .tk-addlabel { background: var(--overlay-soft); border: 1px dashed var(--line); border-radius: 6px; padding: 3px 9px; font-size: 12px; color: var(--text-dim); cursor: pointer; } .tk-checkitem { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; } .tk-checkitem span { flex: 1; } .tk-checkitem span.done { text-decoration: line-through; color: var(--text-faint); } .tk-checkitem button, .tk-comment button { margin-left: auto; } .tk-additem input, .tk-addcomment input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 13.5px; margin-top: 6px; } .tk-comments { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; } .tk-comment { display: flex; gap: 9px; font-size: 13.5px; } .tk-comment-h { font-size: 12px; margin-bottom: 2px; } .tk-act { font-size: 12.5px; color: var(--text-dim); padding: 3px 0; } .tk-activity { opacity: .85; } .tk-cardfoot { padding-top: 16px; } /* vh-capped so Save/Cancel stay on screen on a short window instead of being pushed below the modal's own scroll fold */ .tk-memberlist { max-height: min(340px, 42vh); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .tk-memberrow { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; } /* the avatar must not shrink (it was being squeezed to 13px), and the name takes the slack so the job label sits hard right */ .tk-memberrow .tk-ava { flex: none; } .tk-memberrow .tk-mname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-memberrow .tk-mjob { flex: none; margin-left: auto; padding-left: 8px; } .tk-memberrow:hover { background: var(--overlay-soft); } @media (max-width: 640px) { .tk-lane-cards, .tk-boards { grid-template-columns: 1fr; } .tk-col { flex-basis: 82vw; } .tk-fields { grid-template-columns: 1fr; } .tk-bactions { width: 100%; margin-left: 0; flex-wrap: wrap; } } /* ---- Tasks v2: projects, time tracking, Monday table, task picker ---- */ .tk-activebar { display: flex; align-items: center; gap: 8px; background: rgba(139,124,246,.14); border: 1px solid rgba(139,124,246,.4); border-radius: 12px; padding: 11px 15px; font-size: 14px; cursor: pointer; } .tk-activebar .link { margin-left: auto; color: var(--gold-bright); font-weight: 600; } .tk-projgroup { margin-bottom: 20px; } .tk-typechip { color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; } /* Monday-style table */ .tk-item { display: flex; align-items: center; gap: 10px; } .tk-lstripe { width: 4px; align-self: stretch; min-height: 20px; border-radius: 3px; background: var(--c); } .tk-pill { color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); border-radius: 6px; padding: 3px 12px; font-weight: 700; font-size: 12px; display: inline-block; } .tk-pill.solid { color: #fff; background: var(--c); border-color: transparent; } /* time tracking */ .tk-timecard { display: flex; gap: 14px; margin: 10px 0 4px; } .tk-timecard > div { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .tk-timebig { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; } .tk-timecard label { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; } .tk-livedot { color: var(--pos); } .tk-times { display: flex; flex-direction: column; gap: 6px; } .tk-timerow { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line); } .tk-timewho { color: var(--gold); font-weight: 650; } .tk-timemins { font-weight: 650; font-variant-numeric: tabular-nums; } .tk-timeloc { margin-left: auto; font-size: 12px; } /* task picker (clock) */ .tk-picklist { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 8px 0; } .tk-pickrow { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; color: var(--text); font-size: 14px; } .tk-pickrow:hover { border-color: var(--gold); } .clock-taskbar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 12px 0 0; font-size: 14px; } .clock-taskbar button { margin-top: 0; margin-left: auto; } /* project types editor (settings) */ .ptype-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .ptype-color { width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; padding: 0; flex: 0 0 auto; } .ptype-name { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); } /* ---- Tasks UI polish ---- */ .tk-typefield { display: flex; gap: 8px; align-items: center; } .tk-typefield select { flex: 1; min-width: 0; } .tk-typefield button { margin-top: 0 !important; white-space: nowrap; flex: 0 0 auto; } /* inline card composer */ .tk-compose { display: flex; flex-direction: column; gap: 8px; } .tk-compose textarea { width: 100%; background: var(--surface); border: 1px solid var(--gold); border-radius: 10px; padding: 10px 11px; color: var(--text); font: inherit; resize: none; box-shadow: 0 4px 14px rgba(0,0,0,.28); } .tk-compose textarea:focus { outline: none; } .tk-compose-actions { display: flex; align-items: center; gap: 8px; } .tk-compose-add { margin-top: 0 !important; padding: 8px 16px; } .tk-compose-cancel { background: none; border: none; color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .tk-compose-cancel:hover { color: var(--text); } /* elevate cards + columns */ .tk-card { box-shadow: 0 1px 2px rgba(0,0,0,.22); border-radius: 12px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .tk-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.32); border-color: rgba(201,162,75,.5); } .tk-kanban { gap: 16px; padding-bottom: 12px; } .tk-col { background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 88%, var(--bg))); border-radius: 14px; padding: 12px 10px; box-shadow: var(--shadow); } .tk-col-h { text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; color: var(--text-dim); padding: 2px 4px 6px; } .tk-col-h .count { margin-left: auto; background: var(--overlay-soft); border-radius: 999px; padding: 1px 8px; } .tk-addcard { border: 1px dashed transparent; border-radius: 8px; font-weight: 500; transition: background .12s ease, border-color .12s ease; } .tk-addcard:hover { background: rgba(201,162,75,.1); border-color: rgba(201,162,75,.35); color: var(--gold-bright); } .tk-addcol { background: var(--overlay-softer); border: 1.5px dashed var(--line); box-shadow: none; font-weight: 600; } /* board + project cards */ .tk-boardcard { border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .tk-boardcard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.32); } .tk-boardcard-h { font-size: 16px; } .tk-boards { gap: 16px; } /* My Tasks lanes — pill headers */ .tk-lane { margin-bottom: 8px; } .tk-lane-h { text-transform: none; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); margin-bottom: 12px; } .tk-lane-h .count { margin-left: auto; } .tk-activebar { box-shadow: 0 4px 16px rgba(139,124,246,.18); border-radius: 14px; } /* board header refinement */ .tk-topbar { padding: 2px 0 4px; } .tk-btitle { font-size: 19px; } .tk-bhead .link-btn { font-size: 13px; opacity: .85; } /* time tracked block */ .tk-timecard > div { background: linear-gradient(180deg, var(--surface-2), var(--bg)); } .tk-timebig { color: var(--gold-bright); } /* ===== Team → Tasks (company-wide overview) ===== */ .tk-teamwrap { gap: 14px; } .tk-teamctl { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; } .tk-teamctl .seg { flex: 0 0 auto; } .tk-teamctl.hide-group .tk-group { display: none; } .tk-ctl { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; } .tk-ctl select { text-transform: none; letter-spacing: 0; font-size: 13px; padding: 7px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; color: var(--text); } .tk-ctl-search { align-self: flex-end; flex: 1 1 180px; min-width: 150px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font: inherit; font-size: 13px; } .tk-ctl-search:focus { outline: none; border-color: var(--gold); } .tk-teamkpis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; } .tk-teamkpi { flex: 1 1 110px; background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 85%, var(--bg))); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; } .tk-teamkpi b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1; } .tk-teamkpi span { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; } .tk-teamkpi.over b { color: var(--neg, #c2603f); } .tk-teamkpi.today b { color: var(--gold-bright); } .tk-teamkpi.done b { color: var(--pos, #5fa86a); } .tk-teamkanban { max-height: none; } .tk-teamcol { max-height: 72vh; } .tk-teamcol .tk-col-h { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); font-weight: 650; } .tk-teamcol .tk-col-h .tk-ava { width: 20px; height: 20px; } .tk-teamcol .tk-col-cards { overflow-y: auto; display: flex; flex-direction: column; gap: 9px; } .tk-teamtable .tk-sortable { cursor: pointer; user-select: none; white-space: nowrap; } .tk-teamtable .tk-sortable:hover { color: var(--gold-bright); } .tk-teamtable .tk-sortable.sorted { color: var(--gold-bright); } .tk-sortcaret { font-size: 9px; margin-left: 4px; opacity: .8; } .tk-teamtable .tk-trow { cursor: pointer; } .tk-teamtable .tk-trow.done .tk-item b { text-decoration: line-through; opacity: .6; } .tk-teamtable .tk-board { display: inline-block; font-size: 12px; } /* danger buttons + read-only card note */ .btn-ghost.danger { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 40%, var(--line)); } .btn-ghost.danger:hover { border-color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); } .btn-primary.danger { background: var(--neg); border-color: transparent; color: #fff; } .btn-primary.danger:disabled { opacity: .5; cursor: not-allowed; } .tk-readonly-note { background: color-mix(in srgb, var(--gold) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--text-dim); margin-bottom: 4px; } .tk-readonly-note b { color: var(--text); } /* ===================== Calls — phone-sales lead desk ===================== */ .calls-wrap { display: flex; flex-direction: column; gap: 12px; } .calls-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; } .calls-buychk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); white-space: nowrap; } .calls-daterange { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12px; } .calls-daterange input { padding: 6px 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; font-size: 12px; } .calls-table td { vertical-align: middle; } .calls-table .tk-sortable { cursor: pointer; user-select: none; white-space: nowrap; } .calls-table .tk-sortable:hover, .calls-table .tk-sortable.sorted { color: var(--gold-bright); } .calls-ordval { font-variant-numeric: tabular-nums; } /* call-center (admin Calls tab) */ .cc-tabs { flex-wrap: wrap; margin-bottom: 12px; } .cc-tabn { background: var(--overlay-soft); border-radius: 999px; padding: 0 6px; font-size: 11px; margin-left: 4px; } .cc-table .cc-when { white-space: nowrap; font-size: 12.5px; } .cc-table .cc-notes { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-size: 12.5px; } /* Customer name: cap the column and clamp long store names to 2 lines (full name on hover) so a huge name can't force horizontal scroll. */ .cc-table td.cc-cust { max-width: 300px; } /* white-space:normal overrides the global `td { white-space:nowrap }`; without it the name never wraps and the 2-line clamp has nothing to clamp. max-height is a fallback for engines that don't honor -webkit-line-clamp. */ .cc-custname { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: normal; max-height: 2.7em; line-height: 1.35; } .cc-outcome { font-size: 12px; } .cc-outcome.good { color: var(--pos); font-weight: 600; } .cc-rec { color: var(--gold-bright); font-weight: 600; white-space: nowrap; } .cc-audio { height: 34px; width: 210px; vertical-align: middle; } .cc-row { cursor: pointer; } .calls-contact b { font-weight: 650; } .calls-buytag { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: color-mix(in srgb, #4ec9a8 62%, var(--text)); background: color-mix(in srgb, #4ec9a8 16%, transparent); border: 1px solid color-mix(in srgb, #4ec9a8 45%, var(--line)); border-radius: 5px; padding: 0 5px; vertical-align: middle; } .calls-priochip { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-radius: 5px; padding: 0 5px; vertical-align: middle; } .calls-calledtag { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); border: 1px solid color-mix(in srgb, var(--pos) 40%, var(--line)); border-radius: 5px; padding: 0 5px; vertical-align: middle; white-space: nowrap; } .calls-row { cursor: pointer; } /* keep the table within its container so the reach-out buttons never scroll off-screen: cap the contact column (long emails/company names would otherwise widen the table) and reserve a fixed slot for the two action buttons. */ .calls-contact { max-width: 320px; overflow-wrap: anywhere; } .calls-table th.calls-act, .calls-table td.calls-act { width: 92px; min-width: 92px; } .calls-act { white-space: nowrap; text-align: right; } .calls-btn { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); width: 34px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; margin-left: 6px; } .calls-btn.call:hover:not(:disabled) { border-color: var(--pos); color: var(--pos); } .calls-btn.wa:hover:not(:disabled) { border-color: #25d366; color: #25d366; } .calls-btn:disabled { opacity: .35; cursor: not-allowed; } .calls-dnc { color: var(--neg); font-size: 12px; font-weight: 600; } .calls-repchip { display: inline-block; font-size: 12px; font-weight: 600; color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); border-radius: 6px; padding: 1px 8px; white-space: nowrap; } /* lead drawer */ .calls-body { display: flex; flex-direction: column; gap: 14px; } .calls-dh-name { font-size: 18px; font-weight: 650; } .calls-dncbar { background: color-mix(in srgb, var(--neg) 14%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--neg) 40%, var(--line)); color: var(--neg); border-radius: 10px; padding: 9px 12px; font-size: 13px; } .calls-reach { display: flex; gap: 10px; } .calls-bigcall { flex: 1; margin-top: 0; font-size: 15px; padding: 12px; } .calls-bigwa { flex: 0 0 auto; padding: 12px 16px; } .calls-bigwa:hover:not(:disabled) { border-color: #25d366; color: #25d366; } .calls-bigsms { flex: 0 0 auto; padding: 12px 16px; } .calls-bigsms:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); } .calls-status-row { display: flex; gap: 16px; align-items: center; } .calls-status-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; } .calls-status-row select { text-transform: none; letter-spacing: 0; font-size: 14px; padding: 7px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; color: var(--text); } .calls-dnctoggle { flex-direction: row !important; align-items: center; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--text) !important; margin-top: 16px; } .calls-outcome { display: flex; gap: 8px; flex-wrap: wrap; } .calls-outcome select { flex: 1 1 180px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font-size: 13px; } .calls-outcome input { flex: 2 1 200px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font: inherit; font-size: 13px; } .calls-details { display: flex; flex-direction: column; gap: 6px; } .calls-detail { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line); } .calls-detail span { color: var(--text-dim); } .calls-detail b { text-align: right; font-weight: 550; } .calls-history { display: flex; flex-direction: column; gap: 8px; } .calls-hrow { display: flex; gap: 10px; align-items: flex-start; } .calls-hicon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 13px; } /* add-client modal */ .calls-addmodal { max-width: 640px; } .calls-woosearch { margin-bottom: 10px; } .calls-woosearch input { width: 100%; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font: inherit; } .calls-wooresults { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; max-height: 220px; overflow-y: auto; } .calls-woorow { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; cursor: pointer; color: var(--text); } .calls-woorow:hover { border-color: var(--gold); } .calls-addgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .calls-addgrid .modal-field { margin: 0; } @media (max-width: 560px) { .calls-addgrid { grid-template-columns: 1fr; } } /* Notifications — topbar bell + badge + dropdown panel + page */ .notif-bell { position: relative; background: transparent; border: 1px solid var(--line); color: var(--text); width: 38px; height: 38px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: background .12s, border-color .12s; } .notif-bell:hover { background: rgba(201,162,75,.10); border-color: var(--gold); } .notif-bell .nb-ico { filter: grayscale(.15); } .nb-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e05d44; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--bg); } /* Messages — dedicated topbar indicator (blue badge, vs the bell's red) + sound toggle */ .msg-ind { position: relative; background: transparent; border: 1px solid var(--line); color: var(--text); width: 38px; height: 38px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: background .12s, border-color .12s; } .msg-ind:hover { background: rgba(201,162,75,.10); border-color: var(--gold); } .msg-ind .mi-ico { filter: grayscale(.1); } .mi-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #3a86ff; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--bg); } .mi-badge.pulse { animation: miPulse .45s ease; } @keyframes miPulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .msg-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .msg-sound { background: transparent; border: 1px solid var(--line); color: var(--text-dim); border-radius: 8px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s; } .msg-sound:hover { border-color: var(--gold); color: var(--text); } .msg-sound.off { color: var(--text-faint); } .notif-panel { position: fixed; z-index: 3000; width: min(380px, calc(100vw - 16px)); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.5); overflow: hidden; } .np-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--line); } .np-head b { font-size: 14px; } .np-allread { background: transparent; border: none; color: var(--gold); font-size: 12px; cursor: pointer; padding: 2px 4px; } .np-allread:hover { text-decoration: underline; } .np-body { overflow-y: auto; flex: 1; } .np-loading { display: flex; justify-content: center; padding: 28px; } .np-empty { padding: 26px 16px; text-align: center; color: var(--text-dim); font-size: 13px; } .np-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); padding: 11px 14px; cursor: pointer; position: relative; color: var(--text); } .np-item:hover { background: rgba(201,162,75,.06); } .np-item.unread { background: rgba(201,162,75,.05); } .np-ico { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .np-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .np-title { font-size: 13px; font-weight: 600; color: var(--text); } .np-sub { font-size: 12px; color: var(--text-dim); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .np-time { font-size: 11px; color: var(--text-dim); opacity: .8; } .np-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 5px; } .np-foot { display: block; text-align: center; padding: 10px; font-size: 12.5px; color: var(--gold); border-top: 1px solid var(--line); text-decoration: none; } .np-foot:hover { background: rgba(201,162,75,.06); } .notif-page-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .npg-item { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); padding: 14px 16px; cursor: pointer; color: var(--text); } .npg-item:last-child { border-bottom: none; } .npg-item:hover { background: rgba(201,162,75,.06); } .npg-item.unread { background: rgba(201,162,75,.05); } .npg-ico { font-size: 19px; flex-shrink: 0; } .npg-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .npg-title { font-size: 14px; font-weight: 600; } .npg-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; } .npg-time { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; display: flex; align-items: center; gap: 6px; } /* Clock — my time-fix requests */ .fixreq-list { display: flex; flex-direction: column; } .fixreq-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); } .fixreq-row:last-child { border-bottom: none; } @media (max-width: 560px) { .fixreq-row { grid-template-columns: 1fr auto; } } /* Payroll — per-staff accordion with day-by-day breakdown */ .pay-table .pay-staff { cursor: pointer; } .pay-table .pay-staff:hover td { background: rgba(201,162,75,.06); } .pay-table .pay-staff .acc-caret { display: inline-block; transition: transform .15s; color: var(--text-dim); } .pay-table .pay-staff.open .acc-caret { transform: rotate(90deg); color: var(--gold); } .pay-detail > td { padding: 0 !important; background: color-mix(in srgb, var(--surface-2) 60%, transparent); } .pay-days { padding: 6px 14px 12px; } .pay-day { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); } .pay-day:last-child { border-bottom: none; } .pay-day-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 4px; } .pay-shift { display: grid; grid-template-columns: 1.4fr 2fr .9fr 1fr .8fr; gap: 10px; align-items: center; font-size: 12.5px; padding: 3px 0 3px 12px; color: var(--text-dim); } .pay-shift b { color: var(--text); } .pay-sh-amt { text-align: right; color: var(--text); } .pay-allow { opacity: .7; } @media (max-width: 640px) { .pay-shift { grid-template-columns: 1fr 1fr; } .pay-sh-amt { text-align: left; } } /* Orders — per-agent filter dropdown + active-filter tag in the card title */ .ord-filter { flex: 0 0 auto; min-width: 170px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--text); font-size: 13.5px; cursor: pointer; outline: none; } .ord-filter:focus { border-color: var(--gold); } .ord-filter.active { border-color: var(--gold); color: var(--gold-bright); font-weight: 600; } .ord-agent-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 999px; padding: 1px 6px 1px 10px; vertical-align: middle; } .ord-agent-clear { background: none; border: none; color: var(--gold-bright); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .75; } .ord-agent-clear:hover { opacity: 1; } @media (max-width: 560px) { .ord-filter { flex: 1 1 100%; min-width: 0; } } /* Agent Orders (approval queue) */ .appr-actions { white-space: nowrap; } .appr-actions .link-btn { margin-right: 8px; } .link-btn.appr { color: var(--pos); } .link-btn.rej { color: var(--neg); } tr.appr-pending td { background: rgba(201,162,75,.04); } .appr-drawer-actions { display: flex; gap: 10px; flex-wrap: wrap; } .btn-ghost.rej { border-color: color-mix(in srgb, #c2603f 55%, transparent); color: #c2603f; } .warn.sm { font-size: 12px; } /* Messages — two-pane DM layout */ .msg-layout { display: grid; grid-template-columns: 280px 1fr; gap: 14px; height: calc(100vh - 170px); min-height: 420px; } .msg-pane { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .msg-pane-head { padding: 12px 14px; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--line); min-height: 43px; } .msg-list { overflow-y: auto; flex: 1; } .msg-contact { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); padding: 11px 12px; cursor: pointer; color: var(--text); } .msg-contact:hover { background: rgba(201,162,75,.06); } .msg-contact.on { background: rgba(201,162,75,.10); } .msg-ava { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .msg-cmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .msg-cname { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .msg-unread { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e05d44; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; } .msg-cprev { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-ctime { font-size: 11px; color: var(--text-dim); flex-shrink: 0; } .msg-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; } .msg-day { text-align: center; font-size: 11px; color: var(--text-dim); margin: 10px 0 4px; } .msg-row { display: flex; } .msg-row.mine { justify-content: flex-end; } .msg-bubble { max-width: 72%; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .msg-row.mine .msg-bubble { background: color-mix(in srgb, var(--gold) 20%, var(--surface)); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); } .msg-time { display: block; font-size: 10.5px; color: var(--text-dim); margin-top: 3px; text-align: right; } .msg-empty { padding: 40px 16px; text-align: center; color: var(--text-dim); font-size: 13.5px; margin: auto; } .msg-composer { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); } .msg-composer textarea { flex: 1; resize: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; color: var(--text); padding: 9px 12px; font: inherit; font-size: 13.5px; } .msg-composer textarea:focus { outline: none; border-color: var(--gold); } @media (max-width: 760px) { .msg-layout { grid-template-columns: 1fr; height: auto; } .msg-left { max-height: 260px; } .msg-thread { min-height: 300px; } } /* SMS tab — reuses .msg-* ; a few extras */ .sms-mynum { font-size: 11.5px; font-weight: 700; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-radius: 999px; padding: 2px 9px; } .sms-fail { color: #e05d44; font-weight: 800; } .sms-readonly { padding: 9px 12px; font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--line); background: var(--surface-2); text-align: center; } .sms-setup { display: grid; place-items: center; min-height: 320px; padding: 24px; } .sms-setup-card { max-width: 460px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; } .sms-setup-card h2 { margin: 0 0 10px; font-size: 18px; } .sms-setup-card p { color: var(--text-dim); font-size: 13.5px; line-height: 1.5; margin: 8px 0; } .sms-setup-hint { font-size: 11.5px; } .sms-setup-hint code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; font-size: 11px; word-break: break-all; } .sms-head-actions { display: flex; gap: 6px; flex-shrink: 0; } .sms-hbtn { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 12px; font-weight: 600; padding: 5px 10px; cursor: pointer; white-space: nowrap; } .sms-hbtn:hover { border-color: var(--gold); color: var(--gold); } @media (max-width: 760px) { .sms-hbtn { padding: 5px 7px; font-size: 11px; } } /* Softphone (Phone tab) */ .ph-wrap { max-width: 420px; margin: 0 auto; padding: 8px 0; } .ph-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .ph-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); } .ph-title { font-weight: 700; font-size: 15px; } .ph-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-dim); } .ph-dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; } .ph-status.ok .ph-dot { background: #4ec9a8; } .ph-status.ok { color: #4ec9a8; } .ph-status.warn .ph-dot { background: #c9a24b; } .ph-status.warn { color: #c9a24b; } .ph-status.bad .ph-dot { background: #e05d44; } .ph-status.bad { color: #e05d44; } .ph-idle { padding: 18px; } .ph-input { width: 100%; text-align: center; font-size: 24px; letter-spacing: 1px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 12px; margin-bottom: 16px; } .ph-input:focus { outline: none; border-color: var(--gold); } .ph-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ph-key { aspect-ratio: 1.6; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } .ph-key b { font-size: 20px; font-weight: 600; } .ph-key span { font-size: 9px; letter-spacing: 1px; color: var(--text-dim); min-height: 10px; } .ph-key:hover { border-color: var(--gold); } .ph-callrow { margin-top: 16px; } .ph-btn { border: none; border-radius: 999px; font-size: 15px; font-weight: 700; padding: 13px 20px; cursor: pointer; color: #fff; } .ph-btn.call { width: 100%; background: #2fa36b; } .ph-btn.call:hover { background: #278a5b; } .ph-btn.hang { background: #e05d44; } .ph-btn.hang:hover { background: #c94b34; } .ph-btn.answer { background: #2fa36b; } .ph-btn.answer:hover { background: #278a5b; } .ph-btn:not(.call):not(.hang):not(.answer) { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); } .ph-btn.on { border-color: var(--gold); color: var(--gold); } .ph-incall { padding: 30px 18px 22px; text-align: center; } .ph-incall.ringing { animation: ph-pulse 1.4s ease-in-out infinite; } @keyframes ph-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } } .ph-who { margin-bottom: 22px; } .ph-name { font-size: 20px; font-weight: 700; } .ph-num { font-size: 14px; color: var(--text-dim); margin-top: 4px; } .ph-timer { font-size: 26px; font-weight: 700; margin-top: 14px; font-variant-numeric: tabular-nums; } .ph-actions { display: flex; gap: 12px; justify-content: center; } .ph-actions .ph-btn { min-width: 120px; } .ph-err { margin-top: 14px; padding: 10px 12px; border-radius: 9px; background: color-mix(in srgb, #e05d44 12%, transparent); border: 1px solid color-mix(in srgb, #e05d44 40%, var(--line)); color: #e0806f; font-size: 12.5px; text-align: center; } .ph-note { max-width: 420px; margin: 12px auto 0; text-align: center; font-size: 12px; color: var(--text-dim); } /* Paychecks tab */ .pack-controls { flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; } .pack-agent, .pack-status { min-width: 150px; } .pack-filter { min-width: 200px; flex: 1 1 200px; } .pack-cols { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; margin-bottom: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; } .pack-cols-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin-right: 4px; } .pack-colchk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: pointer; user-select: none; } .pack-colchk input { cursor: pointer; } .pack-loading { display: flex; align-items: center; gap: 10px; padding: 40px 16px; color: var(--text-dim); font-size: 13.5px; justify-content: center; } .pack-empty { padding: 24px; text-align: center; color: var(--text-dim); } .pack-warn { margin: 0 0 12px; padding: 9px 12px; border-radius: 9px; background: color-mix(in srgb, #c9a24b 12%, transparent); border: 1px solid color-mix(in srgb, #c9a24b 40%, var(--line)); color: #d9b972; font-size: 12.5px; } .pack-scroll, .pack-preview { max-height: 62vh; overflow: auto; } .pay-sheet { width: 100%; border-collapse: collapse; } .pay-sheet thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; } .pay-sheet .pay-totals td { border-top: 2px solid var(--line); background: var(--surface-2); } .pack-preview .pay-sheet td, .pack-preview .pay-sheet th { white-space: nowrap; font-size: 12px; } .pack-fail { display: inline-block; min-width: 16px; text-align: center; border-radius: 50%; background: color-mix(in srgb, #e05d44 18%, transparent); color: #e0806f; font-weight: 700; cursor: help; } .pack-exp-status { margin-top: 10px; font-size: 12.5px; } .pack-exp-status.ok { color: #4ec9a8; } .pack-exp-status.err { color: #e05d44; } .pack-exp-status.busy { color: var(--text-dim); } /* Paychecks: selection, paid state, modal, history */ .pack-seg { margin: 0 0 14px; } .pack-selth, .pack-selcell { width: 30px; text-align: center; } .pack-selcell input, .pack-selth input { cursor: pointer; } .pack-selbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 12px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); } .pack-selbar-btns { margin-left: auto; display: flex; gap: 8px; } .pack-paid { display: inline-block; min-width: 20px; text-align: center; font-weight: 800; } .pack-paid.yes { color: #4ec9a8; } .pack-paid.no { color: #6b7280; } .pack-paidbtn { background: none; border: none; padding: 2px 4px; cursor: pointer; border-radius: 6px; } .pack-paidbtn:hover { background: var(--surface-2); } .pack-modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 200; } .pack-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 201; width: min(460px, calc(100vw - 32px)); max-height: 86vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; } .pack-modal h3 { margin: 0 0 6px; font-size: 16px; } .pack-modal-row { display: flex; gap: 12px; margin: 12px 0; } .pack-modal-row label, .pack-modal-agent label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); flex: 1; } .pack-modal input, .pack-modal select { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 8px 10px; font: inherit; font-size: 13.5px; } .pack-modal input:focus, .pack-modal select:focus { outline: none; border-color: var(--gold); } .pack-modal-agent { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; } .pack-modal-aghead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .pack-modal-err { color: #e05d44; font-size: 12.5px; min-height: 16px; margin: 6px 0; } .pack-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; } .pack-checks { display: flex; flex-direction: column; gap: 10px; } .pack-check { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .pack-check summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; } .pack-check summary::-webkit-details-marker { display: none; } .pack-check[open] summary { border-bottom: 1px solid var(--line); } .pack-check-main { display: flex; flex-direction: column; gap: 2px; } .pack-check-right { display: flex; align-items: center; gap: 12px; } .pack-check-body { padding: 12px 16px 14px; } .pack-check-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .pack-check.voided { opacity: .65; } .pack-voided { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: #e05d44; border: 1px solid #e05d44; border-radius: 6px; padding: 2px 6px; } .pack-danger { color: #e0806f; } .pack-danger:hover { border-color: #e05d44; color: #e05d44; } /* WK: schedules, tasks v2, meetings */ .wk-head-task { margin-left: 8px; font-size: 12px; color: var(--gold); white-space: nowrap; } .wk-head-task .wk-timer { font-variant-numeric: tabular-nums; } .wk-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 860px; } .wk-today td { background: color-mix(in srgb, var(--gold) 8%, transparent); } .wk-req-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .wk-req-row .input { min-width: 160px; } .wk-req-msg { font-size: 12.5px; min-height: 16px; display: inline-block; margin-left: 8px; } .wk-req-msg.ok { color: #4ec9a8; } .wk-req-msg.err { color: #e05d44; } .wk-task-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow: auto; margin: 10px 0; } .wk-task-opt { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 10px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; } .wk-task-opt:hover { border-color: var(--gold); } .wk-task-opt.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); } /* ===== Employee Handbook (#/help) ===== */ .help-wrap { display: flex; flex-direction: column; gap: 16px; width: 100%; } .help-hero { text-align: center; padding: 26px 16px 4px; } .help-hero h2 { margin: 0 0 6px; font-size: 26px; } .help-hero p { margin: 0 auto 14px; color: var(--text-dim); max-width: 560px; } .help-search { width: min(560px, 100%); font-size: 16px; padding: 13px 16px; border-radius: 12px; } .help-count { min-height: 18px; margin-top: 8px; } .help-chips { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 2px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); scrollbar-width: none; } .help-chips::-webkit-scrollbar { display: none; } @media (max-width: 860px) { .help-chips { flex-wrap: nowrap; overflow-x: auto; } } /* phones keep the swipe row */ .help-chip { flex: 0 0 auto; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 13px; text-decoration: none; white-space: nowrap; } .help-chip:hover { border-color: var(--gold); color: var(--gold); } .help-sec { scroll-margin-top: 64px; } .help-p { font-size: 14px; line-height: 1.6; } .help-steps { margin: 8px 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 1.55; } .help-steps li::marker { color: var(--gold); font-weight: 700; } .help-callout { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13.5px; line-height: 1.55; border-left: 3px solid var(--gold); } .help-callout.warn { border-left-color: #e05d44; } .help-callout b { color: var(--gold); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; } .help-callout.warn b { color: #e05d44; } .help-go { display: inline-block; margin: 6px 0; padding: 10px 18px; border-radius: 10px; background: linear-gradient(135deg, var(--gold), #8a6d12); color: #1a1206; font-weight: 700; font-size: 13.5px; text-decoration: none; } .help-go:hover { filter: brightness(1.08); } .help-qa { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); margin: 7px 0; overflow: hidden; } .help-qa summary { cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: 14px; list-style: none; position: relative; padding-right: 34px; } .help-qa summary::-webkit-details-marker { display: none; } .help-qa summary::after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 18px; font-weight: 700; } .help-qa[open] summary::after { content: '\2212'; } .help-qa[open] summary { color: var(--gold); } .help-a { padding: 0 14px 13px; font-size: 13.5px; line-height: 1.6; color: var(--text); } .help-a a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .help-media { display: flex; gap: 18px; align-items: flex-start; margin: 14px 0; } .help-media-txt { flex: 1 1 52%; font-size: 14px; line-height: 1.6; } .help-media-txt p { margin: 0 0 10px; } .help-fig { flex: 1 1 48%; margin: 0; max-width: 720px; } .help-fig img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; cursor: zoom-in; display: block; } .help-fig figcaption { margin-top: 6px; font-size: 12px; color: var(--text-dim); line-height: 1.45; text-align: center; } .help-table table td { font-size: 13px; } .help-top { position: fixed; right: 18px; bottom: 76px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--gold); font-size: 18px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; } .help-top.on { opacity: 1; pointer-events: auto; } .help-zoom { position: fixed; inset: 0; z-index: 4500; background: rgba(0,0,0,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; cursor: zoom-out; } .help-zoom[hidden] { display: none; } /* the class display beats the hidden attribute otherwise */ .help-zoom img { max-width: 96vw; max-height: 88vh; border-radius: 10px; } @media (max-width: 860px) { .help-media { flex-direction: column; } .help-media-txt, .help-fig { flex: 1 1 auto; width: 100%; } .help-hero h2 { font-size: 22px; } } /* clock page: blocked-clock-in action links (unmissably clickable) */ .clock-links { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 12px; } .clock-link { color: var(--gold); font-weight: 600; cursor: pointer; text-decoration: none; } .clock-link .cl-label { text-decoration: underline; text-underline-offset: 3px; } .clock-link:hover .cl-label { color: color-mix(in srgb, var(--gold) 70%, #fff); } .clock-link small { color: var(--text-dim); font-weight: 400; font-size: 12px; } /* My Tasks: "you have BOTH lists" callout + cross-tab nudges */ .tk-bothbar { margin: 0 0 12px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--gold) 10%, var(--surface)); font-size: 13.5px; line-height: 1.45; } .tk-crossnudge { margin-top: 14px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--text-dim); } .tk-crossnudge .link-btn { margin-left: 4px; } .tk-tabn.hot { background: #e05d44; color: #fff; } /* task picker: "are you having lunch?" escape bar */ .wk-lunch-ask { margin: 12px 0 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--gold) 10%, var(--surface)); font-size: 13.5px; } .wk-lunch-ask p { margin: 0 0 10px; } .wk-lunch-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .wk-lunch-ask a { display: inline-block; text-decoration: underline; text-underline-offset: 3px; } .wk-radios { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; } /* full-width tappable rows (phone-friendly targets), picked row lights up */ .wk-radio { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; cursor: pointer; line-height: 1.35; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); } .wk-radio:hover { border-color: var(--gold); } .wk-radio.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); } .wk-radio input { margin-top: 2px; cursor: pointer; } .wk-meet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .wk-meet:last-child { border-bottom: none; } .wk-meet.daily .wk-meet-kind { color: var(--gold); } .wk-meet-act { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* super view: main cards left, team roster fills ALL the remaining width */ .wk-meet-layout { display: grid; grid-template-columns: minmax(0, 860px) minmax(360px, 1fr); gap: 18px; align-items: start; } .wk-meet-side { position: sticky; top: 12px; } .wk-ros-roles { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .wk-role-chip { padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 12.5px; cursor: pointer; } .wk-role-chip:hover { border-color: var(--gold); color: var(--gold); } /* Team → Schedules: detailed task-time report */ .wk-tt-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; } .wk-tt-controls .input[type="date"] { width: auto; } .wk-tt-controls select { min-width: 160px; margin-left: auto; } .wk-tt-chips { display: flex; flex-wrap: wrap; gap: 6px; } .wk-tt-chip { padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font-size: 12.5px; cursor: pointer; } .wk-tt-chip:hover { border-color: var(--gold); color: var(--gold); } .wk-tt-chip.on { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); border-color: var(--gold); color: var(--gold); font-weight: 700; } .wk-tt-person { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 8px; background: var(--surface-2); } .wk-tt-person > summary { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 11px 14px; cursor: pointer; list-style: none; } .wk-tt-person > summary::-webkit-details-marker { display: none; } .wk-tt-person > summary::before { content: '▸'; color: var(--text-dim); font-size: 12px; } .wk-tt-person[open] > summary::before { content: '▾'; } .wk-tt-sum { margin-left: auto; color: var(--text-dim); font-size: 13px; white-space: nowrap; } .wk-tt-sum b { color: var(--text); } .wk-tt-person .table-wrap { padding: 0 12px 12px; } .wk-tt-table thead th { position: static; } .wk-tt-taskrow td { vertical-align: top; } .wk-tt-bar { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 14%, transparent); max-width: 260px; margin-top: 6px; } .wk-tt-bar i { display: block; height: 100%; border-radius: 999px; background: var(--gold); } .wk-tt-stint td { color: var(--text-dim); font-size: 12px; padding-top: 3px; padding-bottom: 3px; } .wk-tt-stint td:first-child { padding-left: 18px; } .wk-tt-live { color: #4ec9a8; font-size: 12px; font-weight: 600; } .wk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; min-height: 30px; align-items: center; } .wk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line)); font-size: 12.5px; font-weight: 600; } .wk-chip button { border: none; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 5px; } .wk-chip button:hover { color: #e05d44; } @media (max-width: 1100px) { .wk-meet-layout { grid-template-columns: 1fr; } .wk-meet-side { position: static; } } .wk-roster { display: flex; flex-direction: column; } .wk-ros-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 8px; } .wk-ros-row:last-child { border-bottom: none; } .wk-ros-row:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); } .wk-ros-who { display: flex; flex-direction: column; min-width: 0; } .wk-ros-who b { font-size: 13.5px; } .wk-ros-acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .wk-meet.mini { padding: 5px 0; font-size: 12.5px; gap: 8px; } .wk-ros-modal { max-width: 520px; } .wk-ros-h { margin: 14px 0 6px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); } .wk-ros-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .wk-ros-cols { grid-template-columns: 1fr; } } .wk-ros-week td { font-size: 12.5px; padding: 4px 8px; } .wk-meet-join { display: inline-block; padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--gold), #8a6d12); color: #1a1206; font-weight: 700; font-size: 12.5px; text-decoration: none; white-space: nowrap; } .wk-meet-join:hover { filter: brightness(1.08); } .wk-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .wk-slot { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 7px 12px; cursor: pointer; font-size: 13px; } .wk-slot:hover { border-color: var(--gold); color: var(--gold); } .wk-admin { display: flex; flex-direction: column; gap: 16px; } .wk-sched-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .wk-sched-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; } .wk-sched-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 8px; border-radius: 9px; } .wk-sched-row.today { background: color-mix(in srgb, var(--gold) 8%, transparent); } .wk-sched-row.off .wk-sched-day, .wk-sched-row.off .wk-day-hours { color: var(--text-dim); } .wk-sched-day { width: 104px; font-weight: 600; font-size: 13.5px; } .wk-sched-row input[type="time"], .wk-sched-tools input[type="time"] { width: 118px; } .wk-day-hours { min-width: 44px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--gold); } .wk-sched-row.off .wk-day-hours { font-weight: 500; } .wk-dchk { cursor: pointer; } .wk-sched-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .wk-cfg { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; } .wk-cfg label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wk-cfg input[type="number"] { width: 80px; } .wk-daychk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: pointer; margin-right: 8px; } .wk-chk-grid { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: 6px; max-height: 30vh; overflow: auto; } .wk-jobs-host { margin-top: 12px; } .wk-jobs-dept { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wk-jobs-dept > b { min-width: 110px; } .wk-inactive { opacity: .55; } .wk-task-modal { max-height: 86vh; overflow: auto; } .wk-status { padding: 9px 12px; border-radius: 9px; font-size: 13px; margin-bottom: 12px; border: 1px solid var(--line); } .wk-status.ok { color: #4ec9a8; border-color: color-mix(in srgb, #4ec9a8 40%, var(--line)); background: color-mix(in srgb, #4ec9a8 8%, transparent); } .wk-status.late { color: #d9b972; border-color: color-mix(in srgb, #c9a24b 45%, var(--line)); background: color-mix(in srgb, #c9a24b 10%, transparent); } .wk-status.over { color: #e0806f; border-color: color-mix(in srgb, #e05d44 40%, var(--line)); background: color-mix(in srgb, #e05d44 8%, transparent); } .tk-daily { display: flex; flex-direction: column; gap: 8px; } .tk-daily-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; } .tk-daily-row.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); } .tk-daily-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; } .tk-daily-time { font-size: 12.5px; color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; } .tk-daily-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius: 999px; padding: 3px 9px; } .wk-shake { animation: wk-shake .35s ease; } @keyframes wk-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } } /* Product catalog + customer directory controls */ .cat-controls { flex-wrap: wrap; gap: 10px; align-items: center; } .cat-search { min-width: 300px; flex: 1 1 300px; } .dir-search { min-width: 320px; flex: 1 1 340px; } .cat-parent { cursor: pointer; } .cat-parent:hover td { background: rgba(201,162,75,.06); } /* Lead notes — timestamped log */ .note-add { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; } .note-add textarea { flex: 1 1 auto; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; color: var(--text); font: inherit; font-size: 13px; resize: vertical; } .note-add .btn-primary { flex: 0 0 auto; padding: 9px 14px; } .note-log { display: flex; flex-direction: column; gap: 10px; } .note-entry { border-left: 2px solid var(--line); padding: 1px 0 1px 10px; } .note-body { font-size: 13px; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word; } .note-meta { margin-top: 3px; font-size: 11px; color: var(--text-faint); } .note-legacy { opacity: .72; } /* ============================================================================ * MODERN UI LAYER — 2026 refresh. * Appended LAST on purpose: equal-specificity rules below win the cascade, * so the whole restyle lives here without touching a selector the JS uses. * Language: one easing (--ease), 120–280ms durations, layered shadows, * soft gold focus rings, gold-rail nav. Identity stays charcoal + gold. * ========================================================================== */ /* ---- foundations ----------------------------------------------------------- */ ::selection { background: color-mix(in srgb, var(--gold) 30%, transparent); } :focus-visible { outline: 2px solid color-mix(in srgb, var(--gold) 80%, transparent); outline-offset: 2px; } /* light gold at 80% alpha composites too pale on white — solid dark gold passes 3:1 */ [data-theme="light"] :focus-visible { outline-color: #8c6318; } html { scrollbar-width: thin; } * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 28%, transparent) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gold) 26%, transparent); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--gold) 45%, transparent); background-clip: content-box; border: 2px solid transparent; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-corner { background: transparent; } /* light theme: 26% gold on white is near-invisible (1.3:1) — bump to ~2:1 */ [data-theme="light"] * { scrollbar-color: color-mix(in srgb, var(--gold) 62%, transparent) transparent; } [data-theme="light"] *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gold) 60%, transparent); background-clip: content-box; border: 2px solid transparent; } [data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--gold) 85%, transparent); background-clip: content-box; border: 2px solid transparent; } /* ---- typography ------------------------------------------------------------ */ .topbar h1 { font-weight: 700; letter-spacing: -.015em; } .detail-title { font-weight: 750; letter-spacing: -.015em; } .kpi-value { letter-spacing: -.02em; } .card-head h3 { letter-spacing: -.01em; } .drawer-num { letter-spacing: -.01em; } /* ---- sidebar + nav (the signature) ----------------------------------------- */ .sidebar { padding: 18px 12px; } .nav-group { padding: 16px 12px 6px; letter-spacing: .12em; } .nav-item { position: relative; border-radius: var(--radius-sm); font-weight: 550; transition: background-color .16s var(--ease), color .16s var(--ease); } /* gold rail: hints on hover, commits on active */ .nav-item::before { content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 3px; height: 0; border-radius: 999px; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); transition: height .2s var(--ease); } .nav-item:hover { background: var(--overlay-soft); color: var(--text); } .nav-item:hover::before { height: 34%; } .nav-item.on { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 16%, transparent), color-mix(in srgb, var(--gold) 6%, transparent)); color: var(--gold-bright); font-weight: 650; } .nav-item.on::before { height: 62%; } /* light theme: gold-bright text on the gold-tint gradient misses AA — darken (4.78:1 worst case) */ [data-theme="light"] .nav-item.on { color: #7a5614; } .nav-icon { transition: transform .16s var(--ease), color .16s var(--ease); } .nav-item:hover .nav-icon { transform: translateX(1px) scale(1.1); color: var(--gold); } .new-order-btn { border-radius: var(--radius-sm); transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease); } .new-order-btn:hover { background: rgba(201,162,75,.22); border-color: color-mix(in srgb, var(--gold) 65%, transparent); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--gold) 60%, transparent); transform: translateY(-1px); } .new-order-btn:active { transform: translateY(0); box-shadow: none; } .sess-card { transition: border-color .15s var(--ease); } .sess-card:hover { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); } /* ---- controls: unified interaction language -------------------------------- */ .btn-apply, .btn-primary, .btn-danger, .btn-ghost, .refresh-btn, .range-trigger, .pg-btn, .sess-trigger, .theme-toggle, .notif-bell, .msg-ind, .btn-mini, .seg-btn, .preset, .att-act, .calls-btn, .drawer-back, .emp-mnav, .nav-toggle, .msg-sound, .exp-btn { transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease), filter .15s var(--ease), opacity .15s var(--ease); } .btn-apply:hover:not(:disabled), .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--gold) 60%, transparent); } .btn-apply:active:not(:disabled), .btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: none; } .btn-danger:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--neg) 55%, transparent); } .btn-danger:active:not(:disabled) { transform: translateY(0); box-shadow: none; } .btn-ghost:hover { background: var(--overlay-soft); color: var(--text); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); } .refresh-btn:hover:not(:disabled), .range-trigger:hover, .sess-trigger:hover { background: var(--overlay-softer); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); } .seg-btn { border-radius: 7px; } .seg-btn:hover:not(.on) { background: var(--overlay-softer); color: var(--text); } .preset:hover:not(.on) { background: var(--overlay-softer); border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); } .pg-btn:not(:disabled):hover { background: var(--overlay-softer); transform: translateY(-1px); } .theme-toggle:hover { background: var(--overlay-soft); } .notif-bell:hover, .msg-ind:hover { transform: translateY(-1px); } /* ---- inputs: soft gold focus ring ------------------------------------------ */ .input, .b-input, .auth-field input, .modal input, .modal select, .modal textarea, .tk-quickadd input, .goal-input, .rate-input, .staff-edit, .msg-composer textarea, .tk-ctl-search, .range-custom input, .att-dates input, .pay-date input, .ord-filter, .calls-woosearch input, .note-add textarea, .ptype-name { transition: border-color .15s var(--ease), box-shadow .18s var(--ease), background-color .15s var(--ease), color .15s var(--ease); } .input:focus, .b-input:focus, .auth-field input:focus, .modal input:focus, .modal select:focus, .modal textarea:focus, .tk-quickadd input:focus, .goal-input:focus, .rate-input:focus, .msg-composer textarea:focus, .tk-ctl-search:focus, .range-custom input:focus, .att-dates input:focus, .ord-filter:focus, .calls-woosearch input:focus, .note-add textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); } /* keep the save-state colors visible while editing (they'd otherwise be masked by the gold focus ring) */ .goal-input.saved:focus { border-color: var(--pos); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 16%, transparent); } .goal-input.failed:focus { border-color: var(--neg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 16%, transparent); } /* ---- cards + KPIs ----------------------------------------------------------- */ .kpi { transition: border-color .15s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease), background-color .15s ease, color .15s ease; } .kpi::before { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); opacity: 1; } .kpi-clickable:hover { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); transform: translateY(-1px); box-shadow: 0 10px 26px -12px rgba(0,0,0,.5); } [data-theme="light"] .kpi-clickable:hover { box-shadow: 0 10px 24px -12px rgba(40,32,12,.22); } .kpi-clickable:active { transform: translateY(0); } /* ---- tables ----------------------------------------------------------------- */ th { letter-spacing: .08em; font-size: 10.5px; } tbody tr { transition: background-color .12s var(--ease); } tr.clickable:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); } th.sortable:hover { color: var(--gold-bright); } /* ---- floating panels: pop-in ------------------------------------------------ */ @keyframes panelIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } } .range-control.open .range-panel, .status-control.open .status-panel, .session-switch.open .sess-menu { animation: panelIn .18s var(--ease); } .notif-panel { animation: panelIn .18s var(--ease); } @media (max-width: 640px) { /* bottom sheets rise instead of dropping */ @keyframes sheetIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .range-control.open .range-panel, .status-control.open .status-panel { animation: sheetIn .22s var(--ease); } /* restore the phone table-header tuning the layer's bare th rule would otherwise override */ th { font-size: 10px; letter-spacing: .05em; } } /* ---- drawers + modals: springier, blurred scrim ----------------------------- */ .drawer { transition: transform .3s cubic-bezier(.32,.72,.28,1); } .scrim, .modal-scrim, #builder-root .scrim, #coupon-root .scrim { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .modal { animation: panelIn .2s var(--ease); } .drawer-x { transition: color .15s var(--ease), transform .15s var(--ease); } .drawer-x:hover { transform: rotate(90deg); } /* ---- messages: asymmetric bubbles ------------------------------------------- */ .msg-bubble { border-radius: 14px 14px 14px 5px; } .msg-row.mine .msg-bubble { border-radius: 14px 14px 5px 14px; } .msg-contact { transition: background-color .13s var(--ease); } .msg-contact.on { box-shadow: inset 3px 0 0 var(--gold); } /* ---- notification rows ------------------------------------------------------ */ .np-item, .npg-item { transition: background-color .13s var(--ease); } /* ---- login gate -------------------------------------------------------------- */ .auth-gate { background: radial-gradient(1100px 520px at 20% -10%, rgba(201,162,75,.12), transparent 55%), radial-gradient(900px 500px at 90% 110%, rgba(201,162,75,.06), transparent 60%), var(--bg); } .auth-card { animation: panelIn .3s var(--ease); } /* ---- reduced motion: kill the whole layer's movement ------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } /* spinners are status, not decoration — keep them turning, just slower */ .spinner, .refresh-btn.spinning .refresh-ico { animation-duration: 1.5s !important; animation-iteration-count: infinite !important; } } /* ============================================================================ * HOME ("Today") + SALES MAP * ========================================================================== */ .today-wrap { display: flex; flex-direction: column; gap: 18px; } .today-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%), var(--surface); } .today-greet { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } .today-date { font-size: 13.5px; color: var(--text-dim); margin-top: 3px; } .today-goal { min-width: 240px; flex: 1 1 240px; max-width: 320px; } .today-goal-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; } .today-goal-top .goal-pct { font-size: 15px; font-weight: 800; color: var(--gold-bright); text-transform: none; letter-spacing: 0; } .today-goal-top .goal-pct.met { color: var(--pos); } .today-goal-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; } .today-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .today-cols.one { grid-template-columns: 1fr; } /* no leaderboard → tasks span full width */ .today-tasks { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; } .today-task { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--text); transition: border-color .14s var(--ease), transform .1s var(--ease); } .today-task:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); transform: translateX(2px); } .today-task-t { font-size: 13.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .today-due { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .today-due.over { color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, transparent); } .today-due.today { color: color-mix(in srgb, #e0872f 68%, var(--text)); background: rgba(224,135,47,.16); } .today-due.soon { color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 14%, transparent); } .lb-seg { flex: 0 0 auto; } .lb-table td, .lb-table th { border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .lb-table .lb-rank { width: 34px; text-align: center; font-size: 15px; } .lb-table .lb-rankh { width: 34px; } .lb-num { color: var(--text-faint); font-weight: 700; font-size: 12px; } .lb-table tr.lb-me { background: color-mix(in srgb, var(--gold) 10%, transparent); } .lb-table tr.lb-me td { color: var(--text); } .lb-you { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 16%, transparent); border-radius: 5px; padding: 1px 5px; margin-left: 6px; } /* --- Sales map: US tile-grid cartogram --- */ .map-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .map-stage { display: flex; justify-content: center; } /* real US map (SVG choropleth) */ .us-map { width: 100%; max-width: 880px; height: auto; display: block; margin: 4px auto 0; } .us-state { stroke: var(--bg); stroke-width: 1; cursor: pointer; transition: fill .15s var(--ease), opacity .12s var(--ease); } .us-state:hover { opacity: .8; } .us-state.us-empty { fill: var(--surface-2); } .us-state.us-sel { stroke: var(--gold-bright); stroke-width: 2.2; } .map-grid { display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(8, 1fr); gap: 6px; width: 100%; max-width: 720px; aspect-ratio: 11 / 8; } .map-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line)); border-radius: 9px; cursor: pointer; background: color-mix(in srgb, var(--gold) var(--mix, 0%), var(--surface)); color: var(--text); padding: 2px; overflow: hidden; transition: transform .1s var(--ease), box-shadow .14s var(--ease); font-variant-numeric: tabular-nums; } .map-cell:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); } .map-cell.map-empty { background: transparent; border-style: dashed; border-color: var(--line); cursor: pointer; } .map-cell.map-hot { color: #1a1206; } /* halo keeps the near-black label legible on the muddy mid-gold band (AA-safe) */ .map-cell.map-hot .map-code, .map-cell.map-hot .map-val { text-shadow: 0 1px 1.5px rgba(255,247,230,.7); } .map-cell.map-sel { outline: 2px solid var(--gold-bright); outline-offset: 1px; } .map-code { font-size: 11px; font-weight: 800; letter-spacing: .02em; } .map-empty .map-code { color: var(--text-faint); font-weight: 600; } .map-val { font-size: 9.5px; font-weight: 600; opacity: .92; } .map-detail { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } .map-detail.empty-detail { color: var(--text-dim); font-size: 13px; text-align: center; padding: 18px; } .map-detail-h { font-size: 18px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .map-white-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: 6px; padding: 2px 8px; } .map-detail-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; margin-bottom: 12px; } .map-detail-kpis > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; } .map-detail-kpis b { display: block; font-size: 18px; font-weight: 800; } .map-detail-kpis span { font-size: 11px; color: var(--text-dim); } .map-detail-ag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .map-detail-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); } .map-agchip { font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; } @media (max-width: 760px) { .today-cols { grid-template-columns: 1fr; } .today-greet { font-size: 22px; } .map-detail-kpis { grid-template-columns: repeat(2, 1fr); } .map-code { font-size: 9.5px; } .map-val { font-size: 8px; } } /* Payroll — controls, filter, totals row */ .pay-controls { flex-wrap: wrap; } .pay-controls .pay-filter { flex: 0 1 180px; min-width: 120px; } .pay-controls .pay-exp-lbl { align-self: center; margin-left: 6px; text-transform: uppercase; letter-spacing: .05em; } .pay-table .pay-totals td { border-top: 2px solid var(--line); background: var(--overlay-softer); font-size: 13.5px; } .pay-day-n { font-size: 11px; color: var(--text-dim); background: var(--overlay-soft); border-radius: 999px; padding: 1px 8px; margin: 0 6px; } /* Leads — admin bulk-select bar */ .lead-bulk { display: none; } .lead-bulk.on { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 14px; background: color-mix(in srgb, var(--gold) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-radius: 12px; } .lead-bulk-n { font-weight: 700; color: var(--gold-bright); } .lead-bulk-sel { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 6px 10px; font-size: 13px; cursor: pointer; } .lead-bulk .lead-bulk-del { border-color: color-mix(in srgb, var(--neg) 45%, var(--line)); color: var(--neg); } .lead-bulk .lead-bulk-del:hover { background: color-mix(in srgb, var(--neg) 12%, transparent); border-color: var(--neg); } .calls-table th.lead-cb, .calls-table td.lead-cb { width: 34px; text-align: center; padding-left: 8px; padding-right: 4px; } .lead-check, #leadSelAll { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; vertical-align: middle; } /* ============================================================================ * v2 POLISH — nav icons · modal drawers · appear animations · map tooltip * ========================================================================== */ /* ---- nav: consistent SVG line icons ---- */ .nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; } .nav-icon svg { width: 18px; height: 18px; display: block; } /* ---- detail / order-builder / coupon drawers → centered wide modals ---- Same open/close mechanics (scrim + .open on the root); only the box changes from a right rail to a centered 85%-wide modal, so wide content fits. */ .drawer, .drawer.builder { left: 50%; top: 50%; right: auto; bottom: auto; width: min(85vw, 1300px); max-width: 85vw; height: auto; max-height: 90vh; transform: translate(-50%, -50%) scale(.965); opacity: 0; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 40px 100px -24px rgba(0,0,0,.7); transition: transform .26s var(--ease), opacity .2s var(--ease); } #builder-root .drawer, #coupon-root .drawer { transform: translate(-50%, -50%) scale(.965); } #drawer-root.open .drawer, #builder-root.open .drawer, #coupon-root.open .drawer { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* the body region absorbs remaining height + scrolls inside the capped modal */ .drawer .drawer-body, .drawer #bBody, .drawer .tk-cardbody, .drawer .calls-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } @media (max-width: 700px) { .drawer, .drawer.builder { width: 96vw; max-width: 96vw; max-height: 94vh; border-radius: 14px; } } /* ---- appear animations (page + map; reduced-motion killed by the block above) ---- */ @keyframes appearUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes appearFade { from { opacity: 0; } to { opacity: 1; } } /* fill BACKWARDS only (never forwards/both): a retained transform/opacity animation keeps the element in its own stacking context forever in Chrome, which trapped the controls row's popovers (the date-filter panel) BELOW the KPI cards and tables that follow it. backwards still hides staggered children during their delay, renders identically, and releases the stacking context the moment the entrance finishes. */ #view > * { animation: appearUp .3s var(--ease) backwards; } #view > *:nth-child(2) { animation-delay: .05s; } #view > *:nth-child(3) { animation-delay: .1s; } #view > *:nth-child(4) { animation-delay: .15s; } #view > *:nth-child(n+5) { animation-delay: .2s; } .us-state { animation: appearFade .4s var(--ease) backwards; } /* same retained-context reason as #view > * */ /* ---- map: custom cursor tooltip + legend caption ---- */ .map-stage { position: relative; } .map-tip { position: absolute; z-index: 10; pointer-events: none; min-width: 132px; max-width: 240px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); border-radius: 10px; padding: 8px 11px; box-shadow: 0 12px 30px -8px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; animation: appearFade .1s var(--ease) both; } /* our `display:` declarations beat the browser's [hidden]{display:none}, so the empty tooltip pill (and the custom date inputs) rendered before any hover — restore the attribute's meaning wherever we style display on hideables */ .map-tip[hidden], .map-daterange[hidden] { display: none !important; } .map-tip-name { font-weight: 800; font-size: 13.5px; letter-spacing: -.01em; } .map-tip-val { color: var(--gold-bright); font-weight: 700; font-size: 12.5px; } .map-tip-sub { color: var(--text-dim); font-size: 11.5px; } .map-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .map-filters .tk-ctl select { min-width: 150px; } .map-daterange { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12px; padding-bottom: 6px; } .map-daterange input { padding: 6px 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; font-size: 12px; } .map-detail-sub { font-size: 12.5px; font-weight: 500; color: var(--text-dim); margin-left: 8px; } .map-detail .table-wrap { max-height: 440px; overflow-y: auto; } .map-cust-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; } /* customer drawer — "add as lead" bar */ .cust-lead-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; background: color-mix(in srgb, var(--gold) 9%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line)); border-radius: 10px; } .cust-lead-bar select { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 6px 10px; font-size: 13px; } /* drawer header chip: customer is already a lead — show the owner + change */ .cust-lead-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); padding: 5px 11px; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--gold) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); } .cust-lead-owner .link-btn { margin-left: 2px; } /* leads: registered-store-account badge + create-account bar */ .calls-acctag { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700; color: #c9a24b; background: color-mix(in srgb, #c9a24b 14%, transparent); border: 1px solid color-mix(in srgb, #c9a24b 40%, var(--line)); border-radius: 5px; padding: 0 5px; vertical-align: middle; white-space: nowrap; } .lead-acct-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; padding: 10px 12px; background: color-mix(in srgb, var(--gold) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); border-radius: 10px; } .lead-acct-bar .muted { flex: 1; min-width: 220px; } .lead-acct-note { margin: 8px 0 2px; } /* ===================== Master Activity Log (super admin) ================= */ .page-lead { color: var(--text-dim); font-size: 13px; margin: 0 0 14px; } .empty-state { padding: 34px 18px; text-align: center; color: var(--text-dim); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .audit-result .muted.pad, .muted.pad { padding: 26px 18px; text-align: center; } .audit-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; } .af-field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); } .af-field .input { min-width: 150px; } .audit-table { width: 100%; } .audit-table th { white-space: nowrap; } .audit-table td { vertical-align: top; } .au-when { white-space: nowrap; color: var(--text-dim); font-variant-numeric: tabular-nums; } .au-who { white-space: nowrap; font-weight: 600; } .au-verb { color: var(--text-dim); font-size: 12px; } .au-detail { color: var(--text); } .au-kind { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--line); background: var(--surface-2); } /* var(--gold), not the literal #c9a24b: light mode darkens gold to #a87a26 on purpose because the dark-theme value is ~2.4:1 on white */ .au-kind.k-lead { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 12%, transparent); } .au-kind.k-order { color: #5fa86a; border-color: color-mix(in srgb, #5fa86a 45%, var(--line)); background: color-mix(in srgb, #5fa86a 12%, transparent); } .au-kind.k-clock { color: #5c8fd6; border-color: color-mix(in srgb, #5c8fd6 45%, var(--line)); background: color-mix(in srgb, #5c8fd6 12%, transparent); } .au-kind.k-time { color: #b07fd0; border-color: color-mix(in srgb, #b07fd0 45%, var(--line)); background: color-mix(in srgb, #b07fd0 12%, transparent); } .au-kind.k-acct { color: #c2603f; border-color: color-mix(in srgb, #c2603f 45%, var(--line)); background: color-mix(in srgb, #c2603f 12%, transparent); } .au-kind.k-call { color: #4fa9a0; border-color: color-mix(in srgb, #4fa9a0 45%, var(--line)); background: color-mix(in srgb, #4fa9a0 12%, transparent); } .au-kind.k-goal { color: #d08a3f; border-color: color-mix(in srgb, #d08a3f 45%, var(--line)); background: color-mix(in srgb, #d08a3f 12%, transparent); } .au-kind.k-task { color: #8a7bd8; border-color: color-mix(in srgb, #8a7bd8 45%, var(--line)); background: color-mix(in srgb, #8a7bd8 12%, transparent); } .audit-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; } .audit-pager .muted { min-width: 160px; text-align: center; } @media (max-width: 720px) { .af-field, .af-field .input { width: 100%; } .audit-filters { gap: 10px; } } /* activity log — clickable rows + detail popup */ .audit-table tbody tr.au-row { cursor: pointer; } .audit-table tbody tr.au-row:hover td { background: color-mix(in srgb, var(--gold) 7%, transparent); } .au-via-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--line); background: var(--surface-2); } .au-ov { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 24px; animation: appearFade .16s ease-out; } .au-modal { width: min(92vw, 760px); max-height: 88vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: appearUp .18s ease-out; } .au-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; } .au-modal-body { padding: 16px 18px 20px; } .au-modal-body h4 { margin: 16px 0 8px; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-dim); } .au-close { background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; } .au-close:hover { color: var(--text); border-color: var(--gold); } .au-kv { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; align-items: baseline; flex-wrap: wrap; } .au-kv > span { flex: 0 0 90px; color: var(--text-dim); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; } .au-diff { width: 100%; font-size: 13px; } .au-diff td, .au-diff th { vertical-align: top; } .au-field { white-space: nowrap; color: var(--text-dim); text-transform: capitalize; } .au-arrow { color: var(--gold); white-space: nowrap; width: 1%; } .au-json { font-size: 11px; word-break: break-all; color: var(--text-dim); } /* ===================== Documentation (super admin) ======================= */ .docs-page { max-width: 1100px; } .docs-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; } .docs-toc-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 12px; text-decoration: none; } .docs-toc-chip:hover { border-color: var(--gold); } .docs-section { margin-bottom: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; } .docs-section h3 { margin: 0 0 10px; font-size: 16px; scroll-margin-top: 80px; } .docs-section p, .docs-list { color: var(--text); font-size: 13px; line-height: 1.55; } .docs-list { margin: 6px 0 0 18px; } .docs-list li { margin-bottom: 8px; } .docs-table { width: 100%; font-size: 13px; } .docs-table td { vertical-align: top; line-height: 1.45; } .docs-what { font-weight: 600; min-width: 220px; } .docs-src { color: var(--text-dim); min-width: 190px; } .docs-src code, .docs-section code { font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; } .docs-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--line); vertical-align: middle; } .docs-badge.b-live { color: #5fa86a; border-color: color-mix(in srgb, #5fa86a 45%, var(--line)); background: color-mix(in srgb, #5fa86a 12%, transparent); } .docs-badge.b-cached { color: #5c8fd6; border-color: color-mix(in srgb, #5c8fd6 45%, var(--line)); background: color-mix(in srgb, #5c8fd6 12%, transparent); } .docs-badge.b-synced { color: #c9a24b; border-color: color-mix(in srgb, #c9a24b 45%, var(--line)); background: color-mix(in srgb, #c9a24b 12%, transparent); } .docs-badge.b-crm { color: #b07fd0; border-color: color-mix(in srgb, #b07fd0 45%, var(--line)); background: color-mix(in srgb, #b07fd0 12%, transparent); } /* ===================== refunded order totals ============================= */ .ord-total-ref { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .ord-gross { color: var(--text-dim); text-decoration: line-through; text-decoration-thickness: 1.5px; font-weight: 400; } .refund-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 0 6px; border-radius: 999px; color: var(--neg); border: 1px solid color-mix(in srgb, var(--neg) 45%, var(--line)); background: color-mix(in srgb, var(--neg) 12%, transparent); } .drawer-total .ord-gross { font-size: .82em; } /* ===== 2026-07-17 batch: logo, phone actions, clock week, notes, requests, tour ===== */ /* centered sidebar logo */ .brand { display: flex; justify-content: center; text-align: center; } /* the img is full-width; the artwork inside was pinned left by object-position */ .brand .brand-logo { margin: 0 auto; object-position: center center; } /* sidebar footer: the ? (tour) and theme buttons sit together on ONE row. Both carry .theme-toggle whose margin-left:auto made them stack; only the first of the pair pushes right, the second sits beside it. The row never wraps; the Read-only badge shrinks with ellipsis when space is tight. */ .sidebar-foot { flex-wrap: nowrap; gap: 6px; } .sidebar-foot .ro-badge { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-foot .theme-toggle { margin-left: 0; } .sidebar-foot #tourBtn { margin-left: auto; } /* call + WhatsApp beside any phone number (small, quiet inline chips) */ .ph-acts { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; } .ph-act { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; font-size: 10.5px; line-height: 1; text-decoration: none; border: 1px solid var(--line); color: var(--text); background: transparent; opacity: .85; } .ph-act:hover { opacity: 1; background: color-mix(in srgb, var(--gold) 10%, transparent); } .ph-act.call { color: #2f9e44; border-color: color-mix(in srgb, #2f9e44 40%, var(--line)); } .ph-act.wa { color: #25d366; border-color: color-mix(in srgb, #25d366 40%, var(--line)); } .ph-act:hover { filter: brightness(1.2); } /* My Clock — earnings blocks + week accordion */ .myweek.clock-earn { flex-wrap: wrap; } .cw-week { display: flex; flex-direction: column; gap: 6px; } .cw-day-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: color-mix(in srgb, var(--gold) 4%, transparent); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--text); } .cw-day-head.today { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); } .cw-day-head:hover { background: color-mix(in srgb, var(--gold) 9%, transparent); } .cw-day-name { flex: 0 0 auto; font-weight: 700; min-width: 168px; } .cw-day-sum { flex: 1; text-align: right; } .cw-caret { flex: 0 0 auto; opacity: .6; transition: transform .15s ease; } .cw-day-head.open .cw-caret { transform: rotate(180deg); } .cw-day-body { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; margin: -6px 6px 0; padding: 10px 12px; } .cw-day-body[hidden] { display: none !important; } .cw-shift { padding: 8px 0; } .cw-shift + .cw-shift { border-top: 1px dashed var(--line); } .cw-sh-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cw-sh-break { margin: 6px 0 0 4px; font-size: 13px; opacity: .9; } .cw-sh-notes { margin: 8px 0 0 4px; padding: 8px 10px; border-left: 2px solid color-mix(in srgb, var(--gold) 50%, var(--line)); } .cw-notes-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .6; margin-bottom: 4px; } .cw-note { font-size: 13px; padding: 2px 0; } .cw-away { color: #d08a3f; font-size: 12px; } .cw-weeknav { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cw-weeknav .pg-btn { padding: 2px 10px; margin: 0; } .cw-weeknav .link-btn { font-size: 12.5px; } .cw-weeknav .input, .cw-weeknav select { font-weight: 400; font-size: 13px; } .cw-weeklabel { display: inline-flex; flex-direction: column; line-height: 1.25; } .cw-sh-sum { margin: 6px 0 0 4px; font-size: 13px; opacity: .92; } /* the clock header block spans the same width as the week card below it */ .clock-wrap { max-width: none; } /* native date/time pickers: tell the browser which theme we are, so the calendar/clock dropdowns stop rendering as a mismatched white-on-dark mess */ :root { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } input[type="date"], input[type="time"], input[type="datetime-local"] { color-scheme: dark; } [data-theme="light"] input[type="date"], [data-theme="light"] input[type="time"], [data-theme="light"] input[type="datetime-local"] { color-scheme: light; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; } input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* customer stat tiles: 3-per-row grid (5 tiles = 3 + 2, no lonely straggler) */ .cust-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } /* quick customer-info popup (My Orders rows) */ .wcust { max-width: 400px; } .wcust-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .wcust-head .tk-ava { width: 40px; height: 40px; font-size: 17px; flex: 0 0 auto; } .wcust-head > div { flex: 1; min-width: 0; } .wcust-head .drawer-x { margin-left: auto; } .wcust-rows { border-top: 1px solid var(--line); padding-top: 8px; } .wcust-btns { display: flex; gap: 10px; margin-top: 14px; } .wcust-btns .btn-primary, .wcust-btns .btn-ghost { margin-top: 0; flex: 1; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 9px 10px; } .wcust-wa[aria-disabled="true"] { opacity: .45; pointer-events: none; } /* order drawer: request-change actions */ .ord-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .ord-actions .btn-ghost { margin-top: 0; padding: 6px 12px; font-size: 12.5px; } /* customer notes (drawers) */ .cust-notes-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .cust-notes-add input { width: 100%; } /* sidebar "Request a change" */ .req-change-btn { margin: 6px 14px 8px; padding: 8px 10px; border-radius: 9px; border: 1px dashed color-mix(in srgb, var(--gold) 45%, var(--line)); background: transparent; color: var(--text); cursor: pointer; font-size: 13px; text-align: center; } .req-change-btn:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); } /* change-request review list (Settings) */ .chreq-list { display: flex; flex-direction: column; gap: 12px; } .chreq { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .chreq-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chreq-body { margin-top: 6px; white-space: pre-wrap; } .chreq-note { margin-top: 6px; color: var(--gold); } .chreq-actions { margin-top: 6px; font-size: 13px; } /* spotlight tour (role-specific onboarding) */ .tour-overlay { position: fixed; inset: 0; z-index: 4000; } .tour-spot { position: fixed; border-radius: 12px; pointer-events: none; transition: all .28s cubic-bezier(.4, 0, .2, 1); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8), 0 0 0 2px color-mix(in srgb, var(--gold) 85%, transparent), 0 0 28px rgba(201, 162, 75, .35); animation: tourPulse 2s ease-in-out infinite; } @keyframes tourPulse { 50% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8), 0 0 0 4px color-mix(in srgb, var(--gold) 60%, transparent), 0 0 34px rgba(201, 162, 75, .5); } } .tour-tip { position: fixed; z-index: 4001; background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); border-radius: 14px; padding: 16px 18px 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 28px 70px rgba(0, 0, 0, .6); transition: left .28s cubic-bezier(.4, 0, .2, 1), top .28s cubic-bezier(.4, 0, .2, 1); } .tour-tip-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .tour-step-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; font-size: 16px; background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); } .tour-tip-title { flex: 1; font-weight: 800; font-size: 15.5px; letter-spacing: .01em; } .tour-skip { flex: 0 0 auto; background: none; border: none; color: var(--text); opacity: .45; font-size: 12.5px; cursor: pointer; padding: 4px 2px; } .tour-skip:hover { opacity: .85; text-decoration: underline; } .tour-tip-body { font-size: 13.5px; line-height: 1.55; opacity: .92; } .tour-progress { height: 3px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); margin: 14px 0 10px; overflow: hidden; } .tour-progress-fill { display: block; height: 100%; border-radius: 999px; width: 0; background: linear-gradient(90deg, #a07c1e, var(--gold)); transition: width .28s ease; } .tour-tip-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tour-count { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; opacity: .5; } .tour-btns { display: inline-flex; gap: 8px; } .tour-btn { border-radius: 9px; padding: 8px 16px; cursor: pointer; font-weight: 700; font-size: 13px; line-height: 1; font-family: inherit; transition: filter .12s ease, transform .12s ease; } .tour-btn.main { background: linear-gradient(135deg, var(--gold), #a07c1e); color: #1a1206; border: 1px solid rgba(201, 162, 75, .5); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--gold) 55%, transparent); } .tour-btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); } .tour-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .tour-btn:active { transform: translateY(0); } .tour-btn.main:focus-visible { outline: 2px solid color-mix(in srgb, var(--gold) 70%, transparent); outline-offset: 2px; } /* ===================== Settings v2 — the super-admin control room ========= */ .set-shell { display: flex; flex-direction: column; gap: 16px; } .set-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .set-title { margin: 0; font-size: 22px; letter-spacing: .01em; } .set-chips { display: flex; gap: 8px; flex-wrap: wrap; } .set-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; color: var(--text-dim); box-shadow: var(--shadow); } .set-chip b { font-size: 14px; color: var(--gold); } .set-cols { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; } .set-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 6px; } .set-rail-btn { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-dim); cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); } .set-rail-btn:hover { background: var(--overlay-soft); color: var(--text); } .set-rail-btn.on { background: var(--surface); border-color: var(--line); color: var(--text); box-shadow: inset 3px 0 0 var(--gold), var(--shadow); } .set-rail-ico { font-size: 16px; width: 22px; text-align: center; flex: none; } .set-rail-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .set-rail-txt b { font-size: 13.5px; font-weight: 600; } .set-rail-txt small { font-size: 11px; color: var(--text-faint); } .set-panel { display: none; min-width: 0; } .set-panel.on { display: block; animation: setfade .18s var(--ease); } @keyframes setfade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } .set-panel .settings-wrap { max-width: none; } /* --- permission accordions --- */ .pacc-group { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); margin: 16px 0 6px; } .pacc-group:first-child { margin-top: 4px; } .pacc { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); margin: 0 0 8px; overflow: hidden; transition: border-color .15s var(--ease); } .pacc.open { border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); } .pacc-headrow { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 0; } .pacc-tog { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; padding: 11px 0 11px 12px; background: none; border: 0; color: inherit; cursor: pointer; } .pacc-caret { flex: none; font-size: 11px; color: var(--text-faint); transition: transform .18s var(--ease); } .pacc-tog.open .pacc-caret { transform: rotate(90deg); color: var(--gold); } .pacc-ico { flex: none; width: 20px; height: 20px; color: var(--text-dim); } .pacc-ico svg { width: 20px; height: 20px; display: block; } .pacc-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pacc-name b { font-size: 13.5px; font-weight: 600; } .pacc-name small { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pacc-ctl { display: flex; align-items: center; gap: 10px; flex: none; } .pacc-lock { font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--text-faint); border: 1px dashed var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; } .pacc-lock.on { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, var(--line)); border-style: solid; } .pacc-eff { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: none; } .pacc-eff.ok { color: var(--pos); background: color-mix(in srgb, var(--pos) 13%, transparent); } .pacc-eff.off { color: var(--neg); background: color-mix(in srgb, var(--neg) 13%, transparent); } .pacc-eff.sm { margin-left: auto; } .pacc-body { border-top: 1px solid var(--line); padding: 6px 14px 10px; background: var(--overlay-softer); } .pacc-note { margin: 8px 0 4px; } .pfeat-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); } .pfeat-row:last-child { border-bottom: 0; } .pfeat-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pfeat-name b { font-size: 13px; font-weight: 600; } .pfeat-name small { font-size: 11.5px; color: var(--text-faint); } /* --- toggle switches (role matrix) --- */ .pswitch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; flex: none; user-select: none; } .pswitch input { position: absolute; opacity: 0; pointer-events: none; } .pswitch i { width: 32px; height: 18px; border-radius: 999px; background: var(--overlay-soft); border: 1px solid var(--line); position: relative; transition: background .15s var(--ease), border-color .15s var(--ease); flex: none; } .pswitch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-faint); transition: transform .15s var(--ease), background .15s var(--ease); } .pswitch input:checked + i { background: color-mix(in srgb, var(--gold) 30%, transparent); border-color: var(--gold); } .pswitch input:checked + i::after { transform: translateX(14px); background: var(--gold); } .pswitch em { font-style: normal; font-size: 11px; color: var(--text-dim); } .pswitch.dis { opacity: .45; cursor: not-allowed; } .pswitch input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px; } /* --- tri-state segments (per-person) --- */ .ptri { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; } .ptri-btn { padding: 4px 11px; font-size: 11.5px; font-weight: 600; background: none; border: 0; color: var(--text-dim); cursor: pointer; transition: background .12s var(--ease), color .12s var(--ease); } .ptri-btn + .ptri-btn { border-left: 1px solid var(--line); } .ptri-btn:hover { background: var(--overlay-soft); } .ptri-btn.on { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-bright); } .ptri-btn.on:first-child { color: var(--text); background: var(--overlay-soft); } .ptri-btn.on:last-child { color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, transparent); } .puser-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; } .puser-bar .input { min-width: 260px; } @media (max-width: 900px) { .set-cols { grid-template-columns: 1fr; } .set-rail { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; } .set-rail-btn { flex: none; width: auto; } .set-rail-txt small { display: none; } .pacc-headrow { flex-wrap: wrap; padding: 0 10px 8px 0; } .pacc-ctl { margin-left: 42px; } .pfeat-row { flex-wrap: wrap; } .pacc-name small { white-space: normal; } } /* --- access-level selects (Editor / Viewer / Hidden) --- */ .plv-wrap { display: inline-flex; align-items: center; gap: 6px; flex: none; } .plv-wrap em { font-style: normal; font-size: 11px; color: var(--text-dim); } .plevel { padding: 5px 26px 5px 10px; font-size: 12.5px; font-weight: 600; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 10px) 55%; background-size: 4px 4px; background-repeat: no-repeat; } .plevel:hover { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); } .plevel:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } .pacc-eff.mid { color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 15%, transparent); } /* ===================== Customers "Last order" date filter ================= */ .dir-datefilter { position: relative; display: inline-block; } .dir-datebtn { gap: 8px; } .dir-datebtn-ico { font-size: 13px; opacity: .85; } .dir-datebtn .rt-label { color: var(--text-dim); font-weight: 600; } .dir-datebtn .rt-span { color: var(--text); font-weight: 650; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dir-datefilter.open .dir-datebtn { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent); } .dir-datefilter.open .dir-datebtn .rt-caret { transform: rotate(180deg); } .dir-datebtn .rt-caret { transition: transform .18s var(--ease); } .dir-datepanel { display: none; position: absolute; left: 0; top: calc(100% + 8px); width: 320px; max-width: min(92vw, 340px); background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 14px; z-index: 50; } .dir-datefilter.open .dir-datepanel { display: block; animation: dpIn .16s var(--ease); } @keyframes dpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .dir-dp-sec + .dir-dp-sec { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); } .dir-dp-h { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; } .dir-chips { display: flex; flex-wrap: wrap; gap: 6px; } .dir-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .12s var(--ease), color .12s var(--ease), background .12s var(--ease); } .dir-chip:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); color: var(--text); } .dir-chip.on { background: color-mix(in srgb, var(--gold) 18%, transparent); border-color: var(--gold); color: var(--gold-bright); } .dir-dp-custom, .dir-dp-range { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .dir-dp-lbl { font-size: 12px; color: var(--text-dim); } .dir-dp-num { width: 68px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; } .dir-dp-date { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; } .dir-dp-num:focus, .dir-dp-date:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent); } .dir-dp-date.bad { border-color: var(--neg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 16%, transparent); } .dir-dp-dash { color: var(--text-faint); font-size: 13px; } .dir-dp-apply { padding: 7px 13px; border-radius: 9px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-bright); font-size: 12.5px; font-weight: 650; cursor: pointer; transition: background .12s var(--ease); white-space: nowrap; } .dir-dp-apply:hover { background: color-mix(in srgb, var(--gold) 28%, transparent); } @media (max-width: 620px) { .dir-datebtn .rt-label { display: none; } .dir-datepanel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.5); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); } .dir-datefilter.open .dir-datepanel { animation: sheetIn .22s var(--ease); } .dir-chip { padding: 9px 13px; font-size: 13px; } } /* ===================== Title-case multi-word titles (owner pref) ========== */ .card-head h3, .set-rail-txt b, #reqChangeBtn { text-transform: capitalize; } /* but keep inline subtitles / counts inside a title exactly as written */ .card-head h3 .muted, .card-head h3 .count { text-transform: none; } /* ===================== RangeCal — one calendar for a whole range ========== */ /* Above every page surface, panel, drawer and modal (250) — the calendar closes on any outside click, so nothing legitimately covers it except the notifications dropdown (3000) and the tour (4000). */ #rangecal-root { position: relative; z-index: 2500; } .rc-pop { position: fixed; display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; z-index: 2500; } .rc-presets { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-right: 1px solid var(--line); background: var(--overlay-softer); min-width: 118px; max-height: 380px; overflow-y: auto; } .rc-preset { text-align: left; padding: 6px 10px; border: 0; background: none; border-radius: 8px; color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .rc-preset:hover { background: var(--overlay-soft); color: var(--gold-bright); } .rc-main { padding: 12px 14px 10px; } .rc-title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; } .rc-cals { display: flex; gap: 18px; } .rc-month { width: 224px; } .rc-mhead { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; } .rc-mname { font-size: 13px; font-weight: 650; color: var(--text); } .rc-nav { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); font-size: 14px; cursor: pointer; } .rc-nav:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); color: var(--gold-bright); } .rc-nav-sp { width: 26px; } .rc-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin: 0 0 2px; } .rc-dow span { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-faint); padding: 3px 0; } .rc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } .rc-day { position: relative; height: 30px; border: 0; background: none; border-radius: 8px; color: var(--text); font-size: 12px; font-weight: 550; cursor: pointer; } .rc-day.pad { pointer-events: none; } .rc-day:hover:not(.pad) { background: var(--overlay-soft); } .rc-day.today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); } .rc-day.mid { background: color-mix(in srgb, var(--gold) 13%, transparent); border-radius: 0; } .rc-day.sel { background: var(--gold); color: #16140f; font-weight: 750; } .rc-day.sel-a { border-radius: 8px 0 0 8px; } .rc-day.sel-b { border-radius: 0 8px 8px 0; } .rc-day.sel-a.sel-b { border-radius: 8px; } .rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .rc-sum { font-size: 12px; color: var(--text-dim); } .rc-sum b { color: var(--text); } .rc-hint { color: var(--text-faint); font-style: italic; } .rc-btns { display: flex; gap: 8px; } .rc-cancel { padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background: none; color: var(--text-dim); font-size: 12.5px; font-weight: 600; cursor: pointer; } .rc-cancel:hover { color: var(--text); border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); } .rc-apply { padding: 7px 16px; border-radius: 9px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-bright); font-size: 12.5px; font-weight: 700; cursor: pointer; } .rc-apply:hover:not(:disabled) { background: color-mix(in srgb, var(--gold) 30%, transparent); } .rc-apply:disabled { opacity: .45; cursor: not-allowed; } /* the compact trigger button every custom-range site uses */ .rc-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .12s var(--ease); } .rc-btn:hover { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); } .rc-btn .rc-btn-ico { opacity: .8; } .rc-btn .rc-btn-val { color: var(--text); } .rc-btn .rc-btn-val.empty { color: var(--text-faint); font-weight: 500; } @media (max-width: 620px) { .rc-pop { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: auto; flex-direction: column; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.5); max-height: 86vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); animation: sheetIn .22s var(--ease); } .rc-presets { flex-direction: row; overflow-x: auto; max-height: none; min-width: 0; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; } .rc-cals { justify-content: center; } .rc-month[data-rcmonth="1"] { display: none; } .rc-month:first-child .rc-mhead::after { content: ''; } .rc-month:first-child .rc-nav-sp { display: none; } .rc-day { height: 38px; font-size: 13.5px; } } /* desktop: the forward arrow sits on the SECOND month; month 0's copy is for mobile */ @media (min-width: 621px) { .rc-month[data-rcmonth="0"] .rc-nav-fwd { visibility: hidden; } } .rc-btn[hidden] { display: none; } /* the map toggles it via the hidden ATTRIBUTE */ /* ============================================================================ Theme + layout corrections from the CSS audit. Kept together at the end so the cascade guarantees they win, and so the reasoning stays in one place. ========================================================================= */ /* --- task boards: flex children that could not shrink ------------------- */ /* Bare text nodes in a flex row become anonymous flex items that cannot ellipsize, and siblings with no `flex: none` get squeezed instead. Same defect class as the project-members row. */ .tk-col-h { min-width: 0; } .tk-col-h .tk-col-dot { flex: none; } .tk-col-h .tk-ava { flex: none; } .tk-col-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-col-h .count { flex: none; } /* a long unbroken word in a card title spilled into the next column */ .tk-title { min-width: 0; overflow-wrap: anywhere; } .tk-titlerow { min-width: 0; } /* comment rows: avatar held its size, body takes the slack and wraps */ .tk-comment > .tk-ava { flex: none; } .tk-comment > div { min-width: 0; overflow-wrap: anywhere; } /* the 4px colour stripe was allowed to shrink to nothing in table rows */ .tk-lstripe { flex: 0 0 4px; } /* the hover lift was being clipped by the column's own scroll box */ .tk-col-cards { padding-top: 3px; } /* --- light-theme corrections -------------------------------------------- */ /* Each of these hardcoded a colour picked against the DARK canvas, so it washed out once --surface/--surface-2 became near-white. */ [data-theme="light"] .clock-cta.lunch, [data-theme="light"] .clock-cta.lunch-end { color: #7a4f0e; border-color: rgba(122,79,14,.55); } [data-theme="light"] .clock-hero.lunch .clock-badge { color: #7a4f0e; } [data-theme="light"] .header-clock.lunch { color: #7a4f0e; } [data-theme="light"] .ph-act.wa { color: #0f7a3d; } [data-theme="light"] .btn-ghost.rej { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 55%, transparent); } /* label chips carry an arbitrary user colour, so the text must follow the chip's own lightness instead of always being near-black */ .tk-labelchip { color: color-mix(in srgb, var(--c) 18%, #000); } /* order builder: brand bulk-add + the post-submit out-of-stock report */ .b-brandrow { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0 6px; } .b-brandrow select { flex: 1; min-width: 180px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color: var(--text); font-size: 13px; font-family: inherit; } .b-brandqty { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--text-dim); } .b-brandqty input { width: 74px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color: var(--text); font-size: 13px; } .b-oos-btn { margin-top: 10px; } .b-oos { margin: 10px 0; text-align: left; border: 1px solid color-mix(in srgb, var(--neg) 34%, var(--line)); border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--neg) 6%, transparent); } .b-oos[hidden] { display: none; } .b-oos .b-stock-tbl th { text-align: left; font-size: 11px; color: var(--text-dim); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); } .b-oos .b-stock-tbl th.right, .b-oos .b-stock-tbl td.right { text-align: right; } /* order builder: save-draft + submit side by side */ .b-foot-btns { display: flex; gap: 8px; align-items: stretch; } .b-foot-btns .btn-apply { flex: 1; } .b-foot-btns .btn-ghost { flex: 0 0 auto; } .b-msg .pos { color: var(--pos); } /* My Orders: draft rows + draft drawer note */ tr.appr-draft td { background: color-mix(in srgb, var(--text-faint) 8%, transparent); } .appr-draft-note { font-size: 12.5px; color: var(--text-dim); margin-bottom: 8px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; background: var(--overlay-softer); } /* below-wholesale price request (agent asks; super admin approves the low price) */ .appr-pricereq { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: color-mix(in srgb, var(--neg) 70%, var(--text)); vertical-align: middle; background: color-mix(in srgb, var(--neg) 12%, transparent); border: 1px solid color-mix(in srgb, var(--neg) 40%, var(--line)); border-radius: 5px; padding: 1px 5px; margin-left: 4px; } tr.appr-belowrow td { background: color-mix(in srgb, var(--neg) 7%, transparent); } tr.b-line-flag td { background: color-mix(in srgb, var(--gold) 7%, transparent); }