/* CDR CRM — stylesheet (new-gen design system applied) * Light by default; full dark theme via . * Plus Jakarta Sans + JetBrains Mono, vivid per-status soft-tint chips, pill * buttons, soft layered shadows. Class names match the existing templates so the * markup is unchanged. Tokens ported from external/tokens/*. */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* surfaces (light) */ --canvas: #f6f7f9; --surface: #ffffff; --surface-2: #f1f3f6; --surface-3: #e8ebf0; --border: #e7e9ee; --border-strong: #d4d8e0; /* text */ --text: #0e1116; --text-muted: #59616f; --text-subtle: #8a93a2; --text-inverse: #fff; /* primary (indigo) */ --primary: #6366f1; --primary-strong: #4f46e5; --primary-soft: #eef0ff; --primary-on: #fff; --primary-border: #c7c9fb; /* status */ --success: #10b981; --success-soft: #e7f9f1; --success-text: #047857; --warning: #f59e0b; --warning-soft: #fff5e5; --warning-text: #b45309; --danger: #f43f5e; --danger-soft: #ffeef1; --danger-text: #be123c; --info: #06b6d4; --info-soft: #e4fbff; --info-text: #0e7490; --violet: #8b5cf6; --violet-soft: #f3efff; --violet-text: #6d28d9; --neutral: #94a3b8; --neutral-soft: #eef1f5; --neutral-text: #475569; /* effects */ --focus-ring: 0 0 0 3px rgba(99,102,241,.30); --glow-dot: 0 0 0 4px rgba(16,185,129,.18); --brand-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 45%, #06b6d4 100%); --primary-gradient: linear-gradient(180deg, #6f72f5, #5b5ef0); /* type */ --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* radii */ --r-sm: 8px; --r: 12px; --r-md: 14px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; /* shadows */ --shadow-xs: 0 1px 2px rgba(16,24,40,.05); --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10); --shadow-md: 0 2px 4px -2px rgba(16,24,40,.06), 0 6px 12px -2px rgba(16,24,40,.10); --shadow-lg: 0 4px 6px -2px rgba(16,24,40,.04), 0 16px 24px -6px rgba(16,24,40,.12); --shadow-primary: 0 6px 16px -4px rgba(99,102,241,.40); } [data-theme="dark"] { --canvas: #0a0c11; --surface: #14171e; --surface-2: #1b1f28; --surface-3: #242a35; --border: #262b35; --border-strong: #353c48; --text: #f2f4f8; --text-muted: #9aa4b3; --text-subtle: #69727f; --text-inverse: #0e1116; --primary: #7d7bff; --primary-strong: #6f72f5; --primary-soft: #1c1f33; --primary-border: #353a63; --success: #34d399; --success-soft: #0e2922; --success-text: #6ee7b7; --warning: #fbbf24; --warning-soft: #2c2410; --warning-text: #fcd34d; --danger: #fb7185; --danger-soft: #2e1620; --danger-text: #fda4af; --info: #22d3ee; --info-soft: #0c2630; --info-text: #67e8f9; --violet: #a78bfa; --violet-soft: #211a3a; --violet-text: #c4b5fd; --neutral: #94a3b8; --neutral-soft: #1c2230; --neutral-text: #cbd5e1; --focus-ring: 0 0 0 3px rgba(125,123,255,.40); --glow-dot: 0 0 0 4px rgba(52,211,153,.20); --primary-gradient: linear-gradient(180deg, #8284ff, #6f72f5); --shadow-xs: 0 1px 2px rgba(0,0,0,.40); --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.55); --shadow-md: 0 2px 4px -2px rgba(0,0,0,.50), 0 8px 16px -4px rgba(0,0,0,.55); --shadow-lg: 0 8px 24px -6px rgba(0,0,0,.60); --shadow-primary: 0 6px 18px -4px rgba(125,123,255,.45); } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--canvas); color: var(--text); font: var(--text-base, 14px)/1.5 var(--font-sans); font-size: 14px; font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--primary-soft); } /* ---- app shell ---- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; } .brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--success); box-shadow: var(--glow-dot); } .toolbar { display: flex; align-items: center; gap: 10px; } .date-field { display: flex; flex-direction: column; font-size: 12px; font-weight: 500; color: var(--text-muted); gap: 4px; } .date-field input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 12px; font-family: inherit; } /* ---- buttons (pill) ---- */ .btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 9px 16px; border-radius: var(--r-pill); cursor: pointer; font-weight: 600; font-family: inherit; font-size: 14px; box-shadow: var(--shadow-xs); transition: border-color .14s, background .14s, box-shadow .14s; } .btn:hover { border-color: var(--border-strong); } .btn.primary { background: var(--primary); border-color: transparent; color: var(--primary-on); box-shadow: var(--shadow-primary); } .btn.primary:hover { background: var(--primary-strong); } .btn.ghost { background: transparent; box-shadow: none; } .btn.ghost:hover { background: var(--surface-2); border-color: var(--border-strong); } .btn.sm { padding: 6px 12px; font-size: 12px; } .btn.block { width: 100%; margin-top: 6px; } .btn:disabled { opacity: .5; cursor: default; } :focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ---- nav / user ---- */ .nav { display: flex; gap: 4px; margin-left: 8px; flex: 1; } .nav a { color: var(--text-muted); text-decoration: none; padding: 8px 14px; border-radius: var(--r-pill); font-weight: 600; font-size: 13px; } .nav a:hover { color: var(--text); background: var(--surface-2); } .nav a.on { color: var(--primary-strong); background: var(--primary-soft); } .userbox { display: flex; align-items: center; gap: 12px; } .who { font-size: 12px; color: var(--text-muted); } .who em { font-style: normal; color: var(--primary-strong); text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .08em; margin-left: 5px; } .inline { display: inline; } .theme-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); width: 32px; height: 32px; border-radius: var(--r-pill); cursor: pointer; font-size: 15px; line-height: 1; } .theme-btn:hover { border-color: var(--border-strong); color: var(--text); } .wrap { max-width: 1080px; margin: 28px auto; padding: 0 24px; } .wrap.wide { max-width: 1280px; } .page-title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 18px; } /* ---- login ---- */ .login-body { display: grid; place-items: center; min-height: 100vh; } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 32px; width: 360px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-lg); } .login-card .brand.big { font-size: 20px; } .login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-muted); } .login-card input { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 11px 12px; color: var(--text); font-family: inherit; } .login-card input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); } /* ---- banners / alerts / legend ---- */ .banner { padding: 12px 16px; border-radius: var(--r-md); margin-bottom: 16px; border: 1px solid var(--warning); background: var(--warning-soft); color: var(--warning-text); font-weight: 500; } .alert { padding: 11px 14px; border-radius: var(--r); margin-bottom: 16px; border: 1px solid var(--border); font-weight: 500; } .alert.ok { border-color: var(--success); background: var(--success-soft); color: var(--success-text); } .alert.err { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-text); } .legend { display: flex; gap: 16px; margin-bottom: 12px; color: var(--text-muted); font-size: 12px; } .pill { display: inline-flex; align-items: center; gap: 6px; } .pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--neutral); } .pill.saved::before { background: var(--success); } .pill.carried::before { background: var(--warning); } .pill.empty::before { background: var(--neutral); } /* ---- cards / tables ---- */ .grid-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); } table.grid { width: 100%; border-collapse: collapse; } .grid thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--text-subtle); padding: 12px 16px; background: var(--surface-2); position: sticky; top: 56px; border-bottom: 1px solid var(--border); } .grid td { padding: 12px 16px; border-bottom: 1px solid var(--border); } .grid tr:last-child td { border-bottom: none; } .grid tbody tr:hover td { background: var(--surface-2); } .col-ext { width: 120px; } .col-status { width: 160px; } .ext-badge { font-family: var(--font-mono); font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px 10px; display: inline-block; } .grid input[type=text] { width: 100%; background: transparent; border: 1px solid transparent; color: var(--text); padding: 8px 10px; border-radius: var(--r-sm); font: inherit; } .grid input[type=text]:hover { border-color: var(--border); } .grid input[type=text]:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: var(--focus-ring); } .grid input.matched { border-color: var(--success); } /* roster status */ .status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); } .status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--neutral); } .status.saved::before { background: var(--success); } .status.carried::before { background: var(--warning); } .status.dirty { color: var(--primary-strong); font-weight: 600; } .status.dirty::before { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } /* ---- listing helpers ---- */ table.listing th a { color: inherit; text-decoration: none; } table.listing th.sorted a { color: var(--primary-strong); } table.listing td.mono, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; } .center { text-align: center; } .muted { color: var(--text-muted); } .pos { color: var(--success-text); font-weight: 600; } .neg { color: var(--warning-text); font-weight: 600; } .ok-dot { color: var(--success-text); font-weight: 600; } /* ---- chips: tag / qtag / disp ---- */ .tag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--neutral-soft); color: var(--neutral-text); text-transform: capitalize; } .tag.admin { background: var(--violet-soft); color: var(--violet-text); } .tag.staff { background: var(--info-soft); color: var(--info-text); } .tag.dir-inbound { background: var(--info-soft); color: var(--info-text); } .tag.dir-outbound { background: var(--primary-soft); color: var(--primary-strong); } .qtag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--neutral-soft); color: var(--neutral-text); } .qtag.good { background: var(--success-soft); color: var(--success-text); } .qtag.retry { background: var(--warning-soft); color: var(--warning-text); } .qtag.invalid { background: var(--danger-soft); color: var(--danger-text); } .disp { font-size: 12px; font-weight: 600; text-transform: capitalize; } .disp.answered { color: var(--success-text); } .disp.no_answer { color: var(--warning-text); } .disp.busy { color: var(--warning-text); } .disp.failed { color: var(--danger-text); } .rec { color: var(--success); } /* ---- toolbars / filters ---- */ .subtoolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .subtoolbar .spacer { flex: 1; } .filterbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; } .filterbar input, .filterbar select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 9px 12px; color: var(--text); font-family: inherit; } .filterbar input:focus, .filterbar select:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); } .inline-field { display: flex; flex-direction: column; font-size: 12px; font-weight: 500; color: var(--text-muted); gap: 4px; } .report-actions { display: flex; justify-content: flex-end; margin: -6px 0 14px; } /* ---- panel / forms / popover ---- */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 16px; box-shadow: var(--shadow-xs); } .panel > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; } .form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 16px 16px; } .form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 500; color: var(--text-muted); } .form-grid input, .form-grid select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 9px; color: var(--text); font-family: inherit; } .form-actions { grid-column: 1 / -1; } .row-actions { position: relative; } .row-actions > summary { list-style: none; display: inline-block; } .row-actions .popover { position: absolute; right: 0; z-index: 9; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; width: 240px; box-shadow: var(--shadow-lg); } .mini { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .mini label { display: flex; flex-direction: column; font-size: 11px; font-weight: 500; color: var(--text-muted); gap: 4px; } .mini input, .mini select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px; color: var(--text); font-family: inherit; } /* ---- pager ---- */ .pager { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 13px; color: var(--text-muted); } .pg-controls { display: flex; align-items: center; gap: 10px; } .pg { color: var(--text); text-decoration: none; border: 1px solid var(--border); padding: 7px 14px; border-radius: var(--r-pill); background: var(--surface); } .pg:hover { border-color: var(--primary); } .pg.disabled { color: var(--text-subtle); border-color: var(--border); opacity: .6; } .pg-page { color: var(--text-subtle); } /* ---- KPI cards ---- */ .kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 24px; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-xs); } .kpi.accent { background: var(--primary-soft); border-color: var(--primary-border); box-shadow: none; } .k-val { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .k-lbl { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 6px; } .empty-hint { padding: 36px; text-align: center; color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); } /* ---- reports index ---- */ .group-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--text-subtle); margin: 22px 0 10px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } .report-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; text-decoration: none; color: var(--text); box-shadow: var(--shadow-xs); transition: border-color .14s, box-shadow .14s, transform .14s; } .report-card:hover { border-color: var(--primary-border); box-shadow: var(--shadow-md); transform: translateY(-1px); } .rc-name { font-weight: 700; font-size: 15px; } .rc-desc { color: var(--text-muted); font-size: 12px; margin-top: 6px; } /* ---- hourly bars ---- */ .hourly .bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; align-items: end; height: 170px; padding: 16px; } .bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; } .bar { width: 70%; background: var(--surface-3); border-radius: 5px 5px 0 0; min-height: 2px; display: flex; align-items: flex-end; } .bar-conn { width: 100%; background: var(--success); border-radius: 0 0 5px 5px; } .bar-x { font-size: 9px; color: var(--text-subtle); font-family: var(--font-mono); } .bars-legend { display: flex; gap: 16px; padding: 0 16px 16px; } /* ---- distribution rows ---- */ .dist-row { display: grid; grid-template-columns: 140px 1fr 120px; align-items: center; gap: 14px; padding: 6px 0; } .dist-bar { background: var(--surface-3); border-radius: var(--r-sm); height: 16px; overflow: hidden; } .dist-fill { height: 100%; border-radius: var(--r-sm); } .dist-fill.good { background: var(--success); } .dist-fill.retry { background: var(--warning); } .dist-fill.invalid { background: var(--danger); } .dist-val { text-align: right; } /* ---- toast ---- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 12px 18px; border-radius: var(--r); box-shadow: var(--shadow-lg); font-weight: 500; } .toast.ok { border-color: var(--success); } .toast.err { border-color: var(--danger); } @media (max-width: 920px) { .kpis { grid-template-columns: repeat(3, 1fr); } .form-grid { grid-template-columns: repeat(2, 1fr); } .topbar { padding: 12px 16px; } }