/* SPARK Portal — brand styles */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root {
--navy: #2e5e6f;
--navy-deep: #1f424d;
--accent: #26b497;
--accent-soft: #d4f1e9;
--accent-hover: #2dc8a8;
--ink: #1a1a1a;
--muted: #6b6b6b;
--rule: #e2e7e9;
--soft: #f4f7f8;
--card: #ffffff;
--danger: #c0392b;
--danger-soft: #fbeeec;
--warn: #d4a017;
--warn-soft: #fff8e5;
--ok: #2d8659;
--ok-soft: #e2f3e9;
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.container { max-width: 1480px; margin: 0 auto; padding: 0 28px; }
.container.narrow { max-width: 760px; } /* opt-in narrow for article pages */
a { color: var(--navy); }
/* ===== Hero / Header bar ===== */
.hero {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
color: #fff;
padding: 30px 0 36px;
position: relative;
overflow: hidden;
}
.hero::after {
content: '';
position: absolute;
top: -100px; right: -80px;
width: 320px; height: 320px;
background: var(--accent);
opacity: 0.08;
border-radius: 50%;
pointer-events: none; /* decorative — must not block clicks on header buttons */
}
.hero-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.eyebrow {
color: var(--accent);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
margin-bottom: 8px;
}
.hero h1 {
margin: 0 0 4px;
font-size: 30px;
font-weight: 800;
letter-spacing: -0.01em;
}
.hero .role { color: #B0BAC8; font-size: 14px; margin: 0; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 8px;
text-decoration: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all 0.15s ease;
border: 1px solid transparent;
}
.btn-accent {
background: var(--accent);
color: var(--navy-deep);
box-shadow: 0 4px 14px -4px rgba(38, 180, 151, 0.4);
}
.btn-accent:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-ghost {
background: transparent;
color: #fff;
border-color: rgba(255,255,255,0.3);
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--accent); }
.btn-navy {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
.btn-navy:hover { background: var(--navy-deep); }
/* Optimisation launcher — same accent family as Performance but inverted
(border + tint instead of solid fill) so the two buttons read as a pair
without one shouting over the other. */
.btn-optim {
background: #fff;
color: var(--accent);
border: 1px solid var(--accent);
}
.btn-optim:hover { background: var(--accent-soft); }
.btn-danger {
background: var(--danger-soft);
color: var(--danger);
border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-small { padding: 6px 12px; font-size: 11px; }
/* ===== Section ===== */
section { padding: 36px 0 24px; }
.section-title {
display: flex; align-items: baseline; justify-content: space-between;
margin: 0 0 22px;
flex-wrap: wrap;
gap: 14px;
}
.section-title h2 {
margin: 0;
font-size: 22px;
font-weight: 800;
color: var(--navy);
}
.section-title .sub { color: var(--muted); font-size: 13px; }
/* ===== Cards / Account hubs ===== */
.account-card {
background: var(--card);
border: 1px solid var(--rule);
border-radius: 14px;
padding: 24px 28px;
margin-bottom: 22px;
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.account-head {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--rule);
}
.account-head h3 { margin: 0; font-size: 22px; font-weight: 800; color: var(--navy); }
.account-market {
color: var(--accent);
font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
background: var(--accent-soft);
padding: 3px 10px;
border-radius: 999px;
}
.link-group { margin-bottom: 18px; }
.link-group:last-child { margin-bottom: 0; }
.link-group-label {
font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--muted);
margin-bottom: 10px;
}
.link-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.link-btn {
display: flex; align-items: center; gap: 10px;
background: #fff;
border: 1px solid var(--rule);
border-radius: 8px;
padding: 12px 14px;
text-decoration: none;
color: var(--ink);
font-size: 13px; font-weight: 600;
transition: all 0.15s ease;
}
.link-btn:hover {
border-color: var(--accent);
background: var(--accent-soft);
transform: translateY(-1px);
}
.link-btn svg { width: 18px; height: 18px; color: var(--navy); flex-shrink: 0; }
.link-btn:hover svg { color: var(--accent); }
/* ===== Login form ===== */
.login-shell {
max-width: 420px;
margin: 60px auto;
background: #fff;
border: 1px solid var(--rule);
border-radius: 14px;
padding: 38px 36px;
box-shadow: 0 10px 40px -16px rgba(31,66,77,0.18);
}
.login-shell h1 {
margin: 0 0 8px;
font-size: 22px;
color: var(--navy);
font-weight: 800;
}
.login-shell .lede {
color: var(--muted);
font-size: 13px;
margin: 0 0 24px;
}
.field { margin-bottom: 16px; }
.field label {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="password"],
.field select,
.field textarea {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--rule);
border-radius: 8px;
font-family: inherit;
font-size: 14px;
color: var(--ink);
background: #fff;
transition: border-color 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { resize: vertical; min-height: 88px; }
.field .hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.alert {
padding: 12px 14px;
border-radius: 8px;
font-size: 13px;
margin-bottom: 16px;
}
.alert-error { background: var(--danger-soft); color: var(--danger); border-left: 3px solid var(--danger); }
.alert-ok { background: var(--ok-soft); color: var(--ok); border-left: 3px solid var(--ok); }
.alert-info { background: var(--accent-soft); color: var(--navy); border-left: 3px solid var(--accent); }
.alert-warn { background: var(--warn-soft); color: #6B4F00; border-left: 3px solid var(--warn); }
/* ===== Admin panel: tables + sections ===== */
.admin-tabs {
display: flex;
gap: 4px;
border-bottom: 2px solid var(--rule);
margin-bottom: 24px;
}
.admin-tabs a {
padding: 10px 18px;
text-decoration: none;
font-size: 13px;
font-weight: 700;
color: var(--muted);
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: all 0.15s ease;
}
.admin-tabs a:hover { color: var(--navy); }
.admin-tabs a.active {
color: var(--navy);
border-bottom-color: var(--accent);
}
table.data {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border: 1px solid var(--rule);
border-radius: 10px;
overflow: hidden;
}
table.data th, table.data td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--rule);
font-size: 13px;
vertical-align: middle;
}
table.data th {
background: var(--soft);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--navy);
}
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--soft); }
table.data .actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
table.data .row-name { font-weight: 700; color: var(--navy); }
.badge {
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.badge-admin { background: var(--accent); color: var(--navy-deep); }
.badge-user { background: var(--soft); color: var(--muted); }
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
}
.form-grid .field-full { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
padding: 14px;
background: var(--soft);
border: 1px solid var(--rule);
border-radius: 8px;
}
.checkbox-grid label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 13px;
color: var(--ink);
background: #fff;
padding: 8px 12px;
border: 1px solid var(--rule);
border-radius: 6px;
cursor: pointer;
}
.checkbox-grid label:hover { border-color: var(--accent); }
.checkbox-grid input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.section-block {
background: #fff;
border: 1px solid var(--rule);
border-radius: 10px;
padding: 22px 24px;
margin-bottom: 20px;
}
.section-block h3 {
margin: 0 0 16px;
font-size: 15px;
font-weight: 800;
color: var(--navy);
letter-spacing: 0.02em;
}
/* ===== Footer ===== */
footer {
background: var(--navy-deep);
color: #B0BAC8;
padding: 24px 0;
margin-top: 40px;
text-align: center;
font-size: 12px;
}
footer b { color: var(--accent); }
@media (max-width: 720px) {
.hero h1 { font-size: 24px; }
.account-card { padding: 18px 20px; }
.link-grid { grid-template-columns: 1fr; }
}
*:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* =======================================================================
* v3 additions: header nav, bell, status, chat, feed, calendar, KB, search
* ======================================================================= */
/* Slim top nav */
.topnav {
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
margin: 14px 0 6px;
}
.topnav .nav-link {
display: inline-flex; align-items: center; gap: 6px;
color: #cfdde5; text-decoration: none;
padding: 6px 12px; border-radius: 8px;
font-size: 13px; font-weight: 600;
border: 1px solid transparent;
background: rgba(255,255,255,0.05);
}
.topnav .nav-link:hover { background: rgba(255,255,255,0.12); color: #fff; }
.topnav .nav-link svg { width: 14px; height: 14px; }
.topnav .nav-link.active { background: var(--accent); color: var(--navy-deep); }
.topnav .badge {
background: var(--accent); color: var(--navy-deep);
padding: 1px 6px; border-radius: 999px;
font-size: 10px; font-weight: 700;
}
.topnav .badge.dim { background: rgba(255,255,255,0.2); color: #fff; }
/* Search box in header */
.topsearch {
position: relative; min-width: 220px; flex: 1;
}
.topsearch input {
width: 100%; padding: 8px 12px 8px 32px;
background: rgba(255,255,255,0.1);
color: #fff;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 8px;
font-family: inherit; font-size: 13px;
}
.topsearch input::placeholder { color: #aebccc; }
.topsearch svg {
position: absolute; top: 9px; left: 10px;
width: 14px; height: 14px; color: #aebccc;
}
/* Status pill (next to user name) */
.status-pill {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(255,255,255,0.12); color: #fff;
padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 600;
margin-left: 8px;
max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Bell dropdown */
.bell-wrap { position: relative; }
.bell-btn {
position: relative;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
color: #fff; width: 36px; height: 36px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
}
.bell-btn:hover { background: rgba(255,255,255,0.2); }
.bell-btn svg { width: 16px; height: 16px; }
.bell-btn .dot {
position: absolute; top: 6px; right: 6px;
background: var(--danger); color: #fff;
font-size: 10px; font-weight: 700;
padding: 1px 5px; border-radius: 999px;
min-width: 16px; text-align: center;
}
.bell-panel {
position: absolute; top: 42px; right: 0;
width: 360px; max-height: 420px; overflow-y: auto;
background: #fff; color: var(--ink);
border: 1px solid var(--rule); border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
z-index: 50; display: none;
}
.bell-panel.open { display: block; }
.bell-panel .head {
padding: 12px 16px; border-bottom: 1px solid var(--rule);
display: flex; align-items: center; justify-content: space-between;
}
.bell-panel .head h4 { margin: 0; font-size: 13px; font-weight: 700; }
.bell-panel .item {
padding: 10px 16px; border-bottom: 1px solid #f0f2f4;
display: flex; gap: 10px;
font-size: 13px; text-decoration: none; color: var(--ink);
}
.bell-panel .item:hover { background: #f7f9fa; }
.bell-panel .item.unread { background: #f2faf7; }
.bell-panel .item .when { color: var(--muted); font-size: 11px; }
.bell-panel .empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }
/* Status setter modal trigger */
.status-set {
background: transparent; border: 1px dashed rgba(255,255,255,0.3);
color: #cfdde5; cursor: pointer;
padding: 4px 10px; border-radius: 999px;
font-size: 11px; font-weight: 600;
}
.status-set:hover { background: rgba(255,255,255,0.1); color: #fff; }
/* ===== Chat ===== */
/* ======================================================================
* v4.12: Slack-style chat redesign
* Color tokens scoped here so other parts of the app stay untouched.
* ====================================================================== */
/* Re-assert HTML5 [hidden] so display:flex/grid on .modal-backdrop,
* .slack-thread, .typing-strip etc. doesn't override the attribute. */
[hidden] { display: none !important; }
.chat-section { padding-top: 8px; padding-bottom: 8px; }
.chat-container {
/* Use the full viewport width on chat — Slack-style wide canvas */
max-width: 100%;
padding-left: 14px; padding-right: 14px;
}
.slack-shell {
/* Brand-tuned palette — navy rail, teal accent */
--slack-purple: #1f424d; /* navy-deep — rail bg */
--slack-purple-deep: #143038; /* darker navy */
--slack-purple-soft: #2e5e6f; /* navy — divider */
--slack-purple-text: #d8e6ea; /* rail text */
--slack-purple-muted: #94afb6; /* rail muted text */
--slack-accent: #26b497; /* teal accent */
--slack-rail-active: #26b497; /* teal active bg */
--slack-rail-hover: rgba(255,255,255,0.08);
--slack-bg: #fafbfc;
--slack-pane: #ffffff;
--slack-rule: #e6e8ea;
--slack-text: #1a1a1a;
--slack-text-muted: #616061;
--slack-link: #1f7a8c;
--slack-bubble-hover: #f4faf8;
--slack-mention: #d4f1e9;
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: minmax(0, 1fr);
border-radius: 12px;
overflow: hidden;
background: var(--slack-bg);
height: calc(100vh - 130px); min-height: 560px;
box-shadow: 0 6px 24px rgba(15, 23, 42, .08);
border: 1px solid var(--slack-rule);
}
.slack-shell:has(#thread-panel:not([hidden])) {
grid-template-columns: 280px 1fr 380px;
}
@media (max-width: 1000px) {
.slack-shell { grid-template-columns: 1fr; }
.slack-rail { display: none; }
.slack-shell:has(#thread-panel:not([hidden])) {
grid-template-columns: 1fr;
}
.slack-thread { display: none; }
}
/* ============================ LEFT RAIL ============================ */
.slack-rail {
background: var(--slack-purple);
color: var(--slack-purple-text);
display: flex; flex-direction: column; min-height: 0;
}
.rail-top {
padding: 12px 14px 10px;
display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid var(--slack-purple-soft);
gap: 8px;
}
.rail-workspace {
display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
cursor: pointer; border-radius: 8px; padding: 2px;
transition: background .15s;
}
.rail-workspace:hover { background: rgba(255,255,255,0.06); }
.ws-avatar {
width: 34px; height: 34px; border-radius: 8px;
background: var(--slack-accent); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 13px; flex-shrink: 0;
position: relative; overflow: hidden;
}
.ws-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ws-avatar .presence-dot {
width: 11px; height: 11px;
border: 2px solid var(--slack-purple);
position: absolute; right: -2px; bottom: -2px;
}
.ws-meta { min-width: 0; }
.ws-title { font-size: 13px; font-weight: 700; color: #fff;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sub { font-size: 11px; color: var(--slack-purple-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Status menu dropdown */
.status-menu {
position: absolute; z-index: 30;
top: 64px; left: 12px;
background: #fff; border: 1px solid var(--slack-rule);
border-radius: 10px; padding: 6px;
box-shadow: 0 12px 30px rgba(0,0,0,0.18);
min-width: 200px;
display: flex; flex-direction: column;
}
.status-menu button {
background: transparent; border: none;
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; text-align: left;
font-size: 13px; cursor: pointer; border-radius: 6px;
color: var(--slack-text);
}
.status-menu button:hover { background: var(--slack-bubble-hover); }
.status-menu button .presence-dot {
position: static; border-color: #fff; width: 9px; height: 9px;
}
.status-menu .status-auto {
border-top: 1px solid var(--slack-rule); margin-top: 4px;
padding-top: 10px; color: var(--slack-text-muted);
}
.rail-new {
background: rgba(255,255,255,0.1); border: none; color: #fff;
width: 30px; height: 30px; border-radius: 6px;
font-size: 18px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.rail-new:hover { background: rgba(255,255,255,0.18); }
.rail-search {
padding: 8px 12px; position: relative;
border-bottom: 1px solid var(--slack-purple-soft);
}
.rail-search .search-icon {
position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
font-size: 12px; opacity: 0.6;
}
.rail-search input {
width: 100%; box-sizing: border-box;
padding: 7px 10px 7px 30px;
background: rgba(0,0,0,0.18); color: #fff;
border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
font-size: 13px;
}
.rail-search input::placeholder { color: var(--slack-purple-muted); }
.rail-search input:focus {
outline: none; background: rgba(0,0,0,0.32);
border-color: rgba(255,255,255,0.2);
}
.rail-list { flex: 1; overflow-y: auto; padding-bottom: 14px; }
.rail-list::-webkit-scrollbar { width: 8px; }
.rail-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.rail-section { margin-top: 6px; }
.rail-section summary {
list-style: none;
padding: 6px 14px;
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--slack-purple-muted);
cursor: pointer;
display: flex; align-items: center; gap: 6px;
}
.rail-section summary::-webkit-details-marker { display: none; }
.rail-section[open] .rail-arrow { transform: rotate(0deg); }
.rail-section:not([open]) .rail-arrow { transform: rotate(-90deg); }
.rail-arrow { font-size: 9px; transition: transform .15s; }
.rail-h { flex: 1; }
.rail-count { font-size: 10px; opacity: 0.6; }
.rail-items { display: flex; flex-direction: column; gap: 1px; }
.rail-item {
display: flex; align-items: center; gap: 8px;
padding: 5px 14px;
color: var(--slack-purple-text); text-decoration: none;
font-size: 14px;
border-left: 3px solid transparent;
min-height: 28px;
}
.rail-item:hover { background: var(--slack-rail-hover); }
.rail-item.active {
background: var(--slack-rail-active); color: #fff;
font-weight: 600;
}
.rail-item.has-unread { color: #fff; font-weight: 700; }
.rail-item.has-unread:not(.active)::before {
content: ''; position: absolute; /* tiny dot before label not used */
}
.rail-icon {
display: inline-flex; align-items: center; justify-content: center;
position: relative; width: 22px; height: 22px; flex-shrink: 0;
}
.rail-prefix {
color: var(--slack-purple-muted); font-weight: 400;
font-size: 14px; line-height: 1;
}
.rail-item.active .rail-prefix,
.rail-item.has-unread .rail-prefix { color: #fff; }
.rail-dm-avatar {
width: 22px; height: 22px; border-radius: 4px;
color: #fff; font-size: 9px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.rail-dm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rail-label {
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-badge {
background: #cd2553; color: #fff;
font-size: 11px; font-weight: 800;
padding: 1px 7px; border-radius: 10px;
min-width: 18px; text-align: center;
}
/* Presence dots */
.presence-dot {
width: 9px; height: 9px; border-radius: 50%;
border: 2px solid var(--slack-purple);
position: absolute; right: -2px; bottom: -2px;
background: var(--slack-purple-muted);
}
.presence-online { background: #2bac76; }
.presence-away { background: #ecb22e; }
.presence-dnd { background: #cd2553; }
.presence-offline{ background: transparent; border-color: var(--slack-purple-muted); }
/* When the dot appears outside the dark rail (head, popover, etc.) */
.slack-head .presence-dot,
.members-popover .presence-dot,
.online-pill .presence-dot {
position: static; border-color: #fff;
}
/* ============================ MAIN PANE ============================ */
.slack-main {
background: var(--slack-pane);
display: flex; flex-direction: column; min-height: 0;
}
.slack-empty {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 40px 20px; text-align: center;
}
.slack-empty-icon { font-size: 56px; margin-bottom: 8px; }
.slack-empty h2 { margin: 0 0 4px; color: var(--slack-text); font-size: 22px; }
.slack-empty p { margin: 0 0 16px; color: var(--slack-text-muted); font-size: 14px; }
.slack-head {
padding: 12px 22px; border-bottom: 1px solid var(--slack-rule);
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
background: #fff; position: relative;
}
.slack-head-title { min-width: 0; }
.slack-head-title h2 {
margin: 0; font-size: 18px; font-weight: 800; color: var(--slack-text);
display: flex; align-items: center; gap: 8px;
}
.head-hash { color: var(--slack-text-muted); font-weight: 400; font-size: 22px; }
.head-dm-avatar {
width: 26px; height: 26px; border-radius: 6px;
color: #fff; font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.slack-head-sub {
font-size: 12px; color: var(--slack-text-muted);
margin-top: 4px; display: flex; align-items: center; gap: 10px;
}
.online-pill {
display: inline-flex; align-items: center; gap: 4px;
background: #e6f6ed; color: #197a4a;
padding: 1px 8px; border-radius: 999px;
font-size: 11px; font-weight: 600;
}
.head-tag {
background: var(--soft); color: var(--slack-text-muted);
padding: 1px 8px; border-radius: 4px;
font-size: 11px;
}
.slack-head-actions { display: flex; gap: 6px; align-items: center; }
.head-pill {
background: #fff; border: 1px solid var(--slack-rule);
padding: 5px 10px; border-radius: 6px; font-size: 12px;
cursor: pointer; color: var(--slack-text); font-weight: 600;
display: inline-flex; align-items: center; gap: 4px;
}
.head-pill:hover { background: var(--soft); }
.head-pill-accent { color: #fff; background: #26b497; border-color: #26b497; }
.head-pill-accent:hover { background: #1f9a82; }
.head-pill-danger { color: #cd2553; }
.head-pill-danger:hover { background: #fde8ee; }
/* Members popover */
.members-popover {
position: absolute; top: 58px; right: 22px;
background: #fff; border: 1px solid var(--slack-rule);
border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.12);
z-index: 20; padding: 12px; min-width: 240px;
}
.members-popover .mp-title {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--slack-text-muted); font-weight: 700;
margin-bottom: 8px;
}
.members-popover ul { list-style: none; padding: 0; margin: 0; }
.members-popover li {
display: flex; align-items: center; gap: 8px;
padding: 5px 4px; font-size: 13px; color: var(--slack-text);
border-radius: 6px; position: relative;
}
.members-popover li:hover { background: var(--soft); }
.mp-avatar {
width: 26px; height: 26px; border-radius: 6px;
color: #fff; font-size: 10px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.mp-name { flex: 1; }
.mp-name .you { color: var(--slack-text-muted); font-size: 11px; }
.members-popover .mp-title {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
}
.mp-add-toggle {
background: var(--accent); color: var(--navy-deep); border: none;
font-size: 11px; font-weight: 700; padding: 3px 10px;
border-radius: 999px; cursor: pointer; text-transform: none;
letter-spacing: 0;
}
.mp-add-toggle:hover { background: var(--accent-hover); }
.mp-add-panel {
padding: 8px; margin-bottom: 8px;
background: var(--slack-bubble-hover);
border-radius: 8px;
}
.mp-add-panel form {
display: flex; gap: 6px;
}
.mp-add-panel select {
flex: 1; padding: 5px 8px; font-size: 12px;
border: 1px solid var(--slack-rule); border-radius: 6px;
background: #fff;
}
.mp-remove-form {
margin: 0; display: inline;
}
.mp-remove-form button {
background: transparent; border: none; cursor: pointer;
color: var(--slack-text-muted); font-size: 13px;
width: 22px; height: 22px; border-radius: 4px;
}
.mp-remove-form button:hover {
background: #fde8ee; color: #cd2553;
}
/* ============================ MESSAGES ============================ */
.messages-wrap {
flex: 1; min-height: 0; display: flex; flex-direction: column;
position: relative;
}
.slack-messages {
flex: 1; overflow-y: auto; padding: 14px 0;
display: flex; flex-direction: column;
}
.slack-messages::-webkit-scrollbar { width: 10px; }
.slack-messages::-webkit-scrollbar-thumb { background: #d8d9da; border-radius: 5px; }
.day-sep {
position: relative; text-align: center;
margin: 12px 0 4px; padding: 0 22px;
font-size: 12px; font-weight: 700; color: var(--slack-text-muted);
}
.day-sep::before {
content: ''; position: absolute; left: 22px; right: 22px; top: 50%;
border-top: 1px solid var(--slack-rule);
}
.day-sep span {
display: inline-block; position: relative;
background: var(--slack-pane); padding: 0 12px;
border: 1px solid var(--slack-rule); border-radius: 999px;
padding: 2px 14px;
}
/* WhatsApp-style: own messages right-aligned with teal bubble,
* others' messages left-aligned with grey bubble. */
.slack-msg {
display: flex; align-items: flex-start; gap: 10px;
padding: 6px 22px 6px 18px;
position: relative;
}
.slack-msg.is-grouped { padding-top: 1px; padding-bottom: 1px; }
.slack-msg .msg-left { width: 36px; display: flex; justify-content: center; padding-top: 2px; flex-shrink: 0; }
.slack-msg .msg-body {
flex: 1; min-width: 0;
max-width: 68%;
background: #ffffff;
border: 1px solid var(--slack-rule);
padding: 8px 12px;
border-radius: 12px 12px 12px 4px;
padding-left: 12px; padding-right: 12px;
box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
}
/* Own messages: shift the bubble to the right, recolor, hide avatar. */
.slack-msg.is-mine { flex-direction: row-reverse; }
.slack-msg.is-mine .msg-left { display: none; }
.slack-msg.is-mine .msg-body {
background: var(--accent-soft); /* brand light teal #d4f1e9 */
border-color: #b9e4d8;
border-radius: 12px 12px 4px 12px;
margin-left: auto;
}
.slack-msg.is-mine .msg-head .msg-author { color: var(--navy-deep); }
/* On grouped runs we don't want the bubble border again (looks busier) */
.slack-msg.is-grouped .msg-body { border-radius: 12px; }
.msg-avatar {
width: 36px; height: 36px; border-radius: 8px;
color: #fff; font-size: 12px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.head-dm-avatar { overflow: hidden; }
.head-dm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mp-avatar { overflow: hidden; }
.mp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-time-mini {
font-size: 10px; color: var(--slack-text-muted);
opacity: 0; transition: opacity .1s;
padding-top: 4px;
}
.slack-msg:hover .msg-time-mini { opacity: 0.7; }
.msg-body { min-width: 0; padding-left: 12px; padding-right: 8px; }
.msg-head {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 1px;
}
.msg-author { font-weight: 800; color: var(--slack-text); font-size: 14px; }
.msg-time { font-size: 11px; color: var(--slack-text-muted); }
.msg-text {
font-size: 14px; line-height: 1.5; color: var(--slack-text);
white-space: pre-wrap; word-wrap: break-word; word-break: break-word;
}
.msg-text .mention {
background: var(--slack-mention); color: #815105;
padding: 0 4px; border-radius: 3px; font-weight: 600;
}
.msg-text .chat-link { color: var(--slack-link); text-decoration: underline; }
.msg-attachment {
display: inline-flex; align-items: center; gap: 8px;
background: #fff; border: 1px solid var(--slack-rule);
padding: 8px 12px; border-radius: 8px;
font-size: 13px; margin-top: 6px;
text-decoration: none; color: var(--slack-text);
max-width: 360px;
}
.msg-attachment:hover { border-color: var(--slack-link); }
.att-name { font-weight: 600; }
.att-size { color: var(--slack-text-muted); font-size: 11px; }
/* Reactions */
.msg-reactions {
display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.rx-pill {
display: inline-flex; align-items: center; gap: 4px;
background: #fff; border: 1px solid var(--slack-rule);
padding: 1px 8px; border-radius: 999px;
font-size: 12px; cursor: pointer; color: var(--slack-text);
transition: transform .08s, border-color .08s;
}
.rx-pill:hover { transform: translateY(-1px); border-color: var(--slack-link); }
.rx-pill.mine {
background: #e8f5fa; border-color: var(--slack-link);
color: var(--slack-link);
}
.rx-pill .rx-n { font-weight: 700; font-size: 11px; }
/* Chat-only: hide the rx-add until the message is hovered */
.msg-reactions .rx-add {
background: transparent; border: 1px dashed var(--slack-rule);
padding: 1px 8px; border-radius: 999px;
font-size: 12px; cursor: pointer; color: var(--slack-text-muted);
opacity: 0; transition: opacity .1s;
}
.slack-msg:hover .msg-reactions .rx-add { opacity: 1; }
.msg-reactions .rx-pill ~ .rx-add { opacity: 0.5; }
.msg-reactions .rx-pill:first-child ~ .rx-add { opacity: 1; }
/* Quick-react popover */
.qr-popover {
position: absolute; z-index: 50;
background: #fff; border: 1px solid var(--slack-rule);
border-radius: 999px; padding: 4px;
display: flex; gap: 2px;
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.qr-popover button {
background: transparent; border: none;
width: 30px; height: 30px; font-size: 18px;
border-radius: 50%; cursor: pointer;
}
.qr-popover button:hover { background: var(--slack-bubble-hover); }
/* Thread teaser */
.thread-teaser {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 1px solid transparent;
color: var(--slack-link); font-size: 12px; font-weight: 600;
padding: 4px 8px; border-radius: 6px;
margin-top: 4px; cursor: pointer;
}
.thread-teaser:hover {
background: #fff; border-color: var(--slack-rule);
}
.thread-go { color: var(--slack-text-muted); font-weight: 500; }
/* Hover action bar — defaults on the right for others' messages,
* flips to the left for own (right-aligned bubble). */
.msg-actions {
position: absolute; top: -10px; right: 22px;
background: #fff; border: 1px solid var(--slack-rule);
border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.06);
display: none; padding: 2px;
z-index: 5;
}
.slack-msg:hover .msg-actions { display: flex; }
.slack-msg.is-mine .msg-actions {
right: auto; left: 22px;
}
.act-btn {
background: transparent; border: none;
width: 30px; height: 30px; font-size: 16px;
border-radius: 6px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.act-btn:hover { background: var(--slack-bubble-hover); }
.act-del-form { display: inline; margin: 0; }
.act-del { color: #cd2553; }
/* Typing indicator strip */
.typing-strip {
display: flex; align-items: center; gap: 8px;
padding: 4px 22px 8px;
font-size: 12px; color: var(--slack-text-muted);
font-style: italic;
}
.typing-dots {
display: inline-flex; gap: 3px;
}
.typing-dots span {
width: 6px; height: 6px; border-radius: 50%;
background: var(--slack-text-muted);
animation: typing-bounce 1.4s infinite ease-in-out both;
}
.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing-bounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
40% { transform: scale(1.0); opacity: 1; }
}
/* ============================ COMPOSER ============================ */
.slack-composer {
padding: 6px 22px 14px; position: relative;
}
.composer-wrap {
border: 1px solid var(--slack-rule);
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
transition: border-color .1s, box-shadow .1s;
}
.composer-wrap:focus-within {
border-color: var(--slack-link);
box-shadow: 0 0 0 3px rgba(18, 100, 163, .1);
}
.composer-wrap textarea {
width: 100%; box-sizing: border-box;
border: none; outline: none; resize: none;
font-family: inherit; font-size: 14.5px; line-height: 1.5;
padding: 12px 14px 6px; min-height: 44px; max-height: 180px;
background: transparent;
}
.composer-foot {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 8px 6px;
border-top: 1px solid var(--slack-rule);
}
.composer-left { display: flex; gap: 2px; }
.tool-btn {
background: transparent; border: none;
width: 32px; height: 32px; border-radius: 6px;
font-size: 16px; cursor: pointer; color: var(--slack-text-muted);
display: inline-flex; align-items: center; justify-content: center;
margin: 0;
}
.tool-btn:hover { background: var(--slack-bubble-hover); color: var(--slack-text); }
.tool-btn input[type=file] { display: none; }
.composer-send {
background: #26b497; color: #fff; border: none;
padding: 6px 16px; border-radius: 6px;
font-size: 13px; font-weight: 700; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
}
.composer-send:hover { background: #1f9a82; }
.send-icon { font-size: 14px; opacity: 0.8; }
.composer-attachment {
margin: 8px; padding: 8px 12px;
background: var(--slack-bubble-hover); border-radius: 6px;
display: flex; align-items: center; justify-content: space-between;
font-size: 12px;
}
.att-clear {
background: transparent; border: none; cursor: pointer;
color: var(--slack-text-muted); font-size: 14px;
}
/* WhatsApp-style reply chip (above composer textarea) */
.reply-chip {
display: flex; align-items: stretch; gap: 8px;
padding: 8px 12px;
background: var(--slack-bubble-hover);
border-bottom: 1px solid var(--slack-rule);
border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.reply-chip-bar {
width: 3px; border-radius: 2px;
background: var(--slack-accent);
flex-shrink: 0;
}
.reply-chip-body {
flex: 1; min-width: 0;
}
.reply-chip-author {
font-size: 12px; font-weight: 700; color: var(--slack-accent);
}
.reply-chip-text {
font-size: 12px; color: var(--slack-text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#reply-chip-cancel {
background: transparent; border: none; cursor: pointer;
color: var(--slack-text-muted); font-size: 14px;
width: 28px; align-self: flex-start;
}
#reply-chip-cancel:hover { color: var(--slack-text); }
/* WhatsApp-style quoted reply preview inside a message bubble */
.reply-quote {
display: block;
background: var(--slack-bubble-hover);
border-left: 3px solid var(--slack-accent);
padding: 6px 10px;
border-radius: 6px;
margin: 2px 0 6px;
text-decoration: none; color: var(--slack-text);
max-width: 460px;
transition: background .12s;
}
.reply-quote:hover { background: #ecf6f3; }
.reply-quote-author {
font-size: 12px; font-weight: 700; color: var(--slack-accent);
margin-bottom: 1px;
}
.reply-quote-text {
font-size: 12px; color: var(--slack-text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* @ mention autocomplete picker */
.mention-picker {
position: absolute;
bottom: 70px; left: 14px; right: 14px;
max-width: 320px;
background: #fff; border: 1px solid var(--slack-rule); border-radius: 10px;
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
z-index: 30; padding: 4px;
max-height: 240px; overflow-y: auto;
}
.mention-item {
display: flex; align-items: center; gap: 8px;
background: transparent; border: none;
width: 100%; padding: 6px 8px; border-radius: 6px;
cursor: pointer; text-align: left;
font-size: 13px; color: var(--slack-text);
}
.mention-item:hover, .mention-item.active {
background: var(--slack-bubble-hover);
}
.mention-av {
width: 28px; height: 28px; border-radius: 6px;
color: #fff; font-size: 10px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; overflow: hidden;
}
.mention-av img { width: 100%; height: 100%; object-fit: cover; }
.mention-name { font-weight: 600; flex: 1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-user { color: var(--slack-text-muted); font-size: 11px; }
/* Emoji picker (compose) */
.emoji-picker {
position: absolute;
bottom: 70px; left: 30px;
background: #fff; border: 1px solid var(--slack-rule); border-radius: 10px;
padding: 8px; display: none;
grid-template-columns: repeat(8, 1fr); gap: 2px;
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
z-index: 30;
}
.emoji-picker.open { display: grid; }
.emoji-picker span {
cursor: pointer; padding: 4px; font-size: 18px;
text-align: center; border-radius: 4px;
}
.emoji-picker span:hover { background: var(--slack-bubble-hover); }
/* ============================ THREAD PANEL ============================ */
.slack-thread {
background: var(--slack-pane);
border-left: 1px solid var(--slack-rule);
display: flex; flex-direction: column; min-height: 0;
}
.thread-head {
padding: 12px 18px; border-bottom: 1px solid var(--slack-rule);
display: flex; align-items: center; justify-content: space-between;
}
.thread-head h3 { margin: 0; font-size: 16px; color: var(--slack-text); }
.thread-sub { font-size: 11px; color: var(--slack-text-muted); margin-top: 2px; }
.thread-close {
background: transparent; border: none; cursor: pointer;
font-size: 18px; color: var(--slack-text-muted);
width: 32px; height: 32px; border-radius: 6px;
}
.thread-close:hover { background: var(--slack-bubble-hover); color: var(--slack-text); }
.thread-body {
flex: 1; overflow-y: auto;
padding: 12px 0;
}
.thread-loading { padding: 24px; text-align: center; color: var(--slack-text-muted); }
.thread-divider {
margin: 10px 18px;
font-size: 11px; color: var(--slack-text-muted);
position: relative;
}
.thread-divider::before {
content: ''; position: absolute; left: 0; right: 0; top: 50%;
border-top: 1px solid var(--slack-rule);
}
.thread-divider span {
position: relative; background: var(--slack-pane); padding-right: 8px;
}
.thread-msg {
display: flex; gap: 10px; padding: 6px 18px;
align-items: flex-start;
}
.thread-msg .msg-avatar { width: 32px; height: 32px; font-size: 11px; }
.thread-msg.parent { border-bottom: 1px solid var(--slack-rule); padding-bottom: 12px; }
.thread-composer {
padding: 10px 14px; border-top: 1px solid var(--slack-rule);
display: flex; gap: 8px; align-items: flex-end;
}
.thread-composer textarea {
flex: 1; resize: none; min-height: 36px; max-height: 120px;
border: 1px solid var(--slack-rule); border-radius: 8px;
padding: 8px 12px; font-family: inherit; font-size: 13px;
}
/* ============================ MODAL ============================ */
.modal-backdrop {
position: fixed; inset: 0; background: rgba(20,30,40,0.5);
z-index: 100; display: flex; align-items: center; justify-content: center;
}
.modal-card {
background: #fff; padding: 24px 26px; border-radius: 12px;
max-width: 480px; width: 90%;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.modal-card h3 { margin-top: 0; }
.modal-actions {
display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px;
}
/* ===========================================================================
* v4.17 — Customers Analysis section (Excel-faithful)
*
* Layout matches the Drink Dry Customers Analysis workbook 1:1:
* Retention KPIs strip · Absolute heatmap · Retention % heatmap ·
* Cohort acquisition bar · Cohort curve · Segment topline cards ·
* Segment performance breakdown · Buyer lifecycle ·
* Purchase status + preferred-window · Top 20 customers
* =========================================================================== */
/* ============= Retention KPIs strip ============= */
.cust-retention-strip {
background: #fff; border: 1px solid var(--rule);
border-radius: 12px; padding: 16px 20px; margin-bottom: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.cust-retention-title {
font-size: 16px; font-weight: 800; color: var(--navy);
text-align: center; margin-bottom: 14px;
}
.cust-retention-grid {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
}
@media (max-width: 1100px) { .cust-retention-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .cust-retention-grid { grid-template-columns: repeat(2, 1fr); } }
.cust-rkpi {
text-align: center;
padding: 10px 8px;
border-right: 1px solid var(--rule);
}
.cust-rkpi:nth-child(6n) { border-right: none; }
.cust-rkpi:empty { background: transparent; }
.rkpi-label {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted); margin-bottom: 6px;
}
.rkpi-value {
font-size: 26px; font-weight: 800;
color: var(--navy-deep); letter-spacing: -0.01em;
}
.rkpi-sub {
font-size: 11px; color: var(--muted);
margin-top: 4px; font-style: italic;
}
.cust-rkpi-sub .rkpi-value { font-size: 22px; }
.cust-rkpi-sub .rkpi-label { font-size: 11px; text-transform: none; letter-spacing: 0; }
/* ============= Cohort heatmap (used by both absolute + % tables) ============= */
.cust-section-title {
font-size: 14px; font-weight: 800; letter-spacing: 0.02em;
color: var(--navy); margin-bottom: 8px;
}
.cust-section-title-center {
font-size: 16px; font-weight: 800; color: var(--navy);
text-align: center; margin: 8px 0 14px;
}
.cust-strip-sub {
display: inline-block; margin-left: 6px;
font-size: 12px; font-weight: 500; color: var(--muted);
text-transform: none; letter-spacing: 0;
}
.cust-cohort-table {
font-size: 11.5px;
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 1px;
}
.cust-cohort-table th,
.cust-cohort-table td {
text-align: center;
padding: 6px 4px;
}
.cust-cohort-table thead th {
background: var(--navy-deep); color: #fff;
font-weight: 700; font-size: 11px;
letter-spacing: 0.04em; text-transform: uppercase;
}
.cust-cohort-table thead th:first-child { width: 110px; text-align: left; padding-left: 10px; }
.cust-cohort-table thead th:nth-child(2) { width: 60px; }
.cust-cohort-month {
background: #fff;
font-weight: 700; color: var(--navy);
text-align: left !important; padding-left: 10px !important;
font-size: 12px;
border: 1px solid var(--rule);
}
.cust-cohort-size {
font-weight: 700; color: var(--ink);
background: #fafbfc;
font-size: 12px;
border: 1px solid var(--rule);
}
.cust-cohort-cell {
font-weight: 600; color: var(--navy-deep);
font-size: 11.5px;
}
.cust-cohort-empty { background: #fafbfc; }
/* ============= Cohort acquisition + curve charts ============= */
.dash-chart-wrap {
background: #fff; border: 1px solid var(--rule);
border-radius: 12px; padding: 16px 20px; margin-bottom: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
/* ============= Customer segments — topline cards ============= */
.cust-section-block {
background: #fff; border: 1px solid var(--rule);
border-radius: 12px; padding: 16px 20px; margin-bottom: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.cust-seg-cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 1000px) { .cust-seg-cards { grid-template-columns: 1fr; } }
.cust-seg-card {
background: #fff; border: 1px solid var(--rule);
border-radius: 8px; overflow: hidden;
display: flex; flex-direction: column;
}
.cust-seg-card-head {
text-align: center;
color: #fff; font-weight: 800; font-size: 15px;
padding: 8px 12px; letter-spacing: 0.02em;
}
.cust-seg-card-body {
padding: 14px 16px;
background: #fafbfc;
flex: 1;
}
.cust-seg-card-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
text-align: center;
margin-bottom: 8px;
}
.cust-seg-cell-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--muted);
margin-bottom: 4px;
}
.cust-seg-cell-value {
font-size: 20px; font-weight: 800; color: var(--navy-deep);
}
.cust-seg-card-sub {
text-align: center;
font-size: 11.5px; color: var(--muted);
font-style: italic;
padding-top: 8px; border-top: 1px dashed var(--rule);
}
/* ============= Segment performance breakdown table ============= */
.cust-breakdown-table thead th {
background: var(--navy-deep); color: #fff;
font-weight: 700; font-size: 11.5px;
padding: 8px 10px;
}
.cust-breakdown-table tbody tr td {
padding: 7px 10px;
font-size: 12.5px;
border-bottom: 1px solid var(--rule);
}
.cust-breakdown-table tbody tr:nth-child(even) td { background: #fafbfc; }
.cust-breakdown-total th,
.cust-breakdown-total td {
background: var(--navy-deep) !important;
color: #fff !important;
font-weight: 800 !important;
font-size: 13px;
padding: 9px 10px !important;
}
.cust-seg-name {
display: flex; align-items: center; gap: 8px;
font-weight: 700;
}
.cust-seg-dot {
width: 8px; height: 8px; border-radius: 50%;
display: inline-block;
}
/* ============= Buyer lifecycle table — uses the existing .data styling */
/* ============= Purchase status cards ============= */
.cust-status-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
margin-bottom: 14px;
}
@media (max-width: 800px) { .cust-status-grid { grid-template-columns: 1fr; } }
.cust-status-card {
background: #fff; border: 1px solid var(--rule);
border-radius: 8px; overflow: hidden;
}
.cust-status-head {
text-align: center;
color: #fff; font-weight: 800; font-size: 15px;
padding: 8px 12px;
}
.cust-status-body {
text-align: center;
padding: 18px 12px;
background: #fafbfc;
}
.cust-status-count {
font-size: 36px; font-weight: 800;
letter-spacing: -0.02em;
}
.cust-status-pct {
font-size: 13px; font-weight: 700;
color: var(--muted); margin-top: 2px;
}
.cust-status-sub {
font-size: 12px; color: var(--muted);
font-style: italic;
margin-top: 8px;
}
/* Empty state when account has no customer views */
.dash-empty {
background: #fff; border: 1px dashed var(--rule);
border-radius: 14px; padding: 40px 24px;
text-align: center; color: var(--muted);
margin: 14px 0;
}
.dash-empty-icon { font-size: 42px; margin-bottom: 8px; }
.dash-empty h3 { margin: 0 0 4px; font-size: 17px; color: var(--navy-deep); }
.dash-empty p { font-size: 13px; line-height: 1.55; max-width: 540px; margin: 0 auto; }
.cust-strip {
background: #fff; border: 1px solid var(--rule);
border-radius: 12px; padding: 14px 18px; margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.cust-strip-title {
font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--navy);
margin-bottom: 10px;
}
.cust-strip-sub {
display: inline-block; margin-left: 10px;
font-size: 11px; font-weight: 500; color: var(--muted);
text-transform: none; letter-spacing: 0;
}
.cust-strip-sub code {
background: var(--soft); padding: 0 4px; border-radius: 3px;
font-size: 10.5px;
}
.cust-strip-grid {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
@media (max-width: 1400px) { .cust-strip-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .cust-strip-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-card-cust {
background: #fff; border: 1px solid var(--rule);
border-radius: 10px; padding: 12px 14px;
border-left: 3px solid var(--accent);
position: relative;
}
.kpi-card-cust .kpi-label {
font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted);
margin-bottom: 4px;
}
.kpi-card-cust .kpi-value {
font-size: 22px; font-weight: 800; color: var(--navy-deep);
letter-spacing: -0.01em;
}
.kpi-card-cust .kpi-sub {
font-size: 11px; color: var(--muted); margin-top: 2px;
}
.kpi-card-cust .kpi-trio {
display: flex; gap: 8px; flex-wrap: wrap;
font-size: 11px; color: var(--muted); margin-top: 4px;
}
.kpi-card-cust .kpi-trio span {
background: var(--soft); padding: 1px 6px; border-radius: 4px;
}
.kpi-card-cust .kpi-delta { margin-top: 4px; }
/* Section sub-title used by cohort heatmap + others */
.cust-section-title {
font-size: 14px; font-weight: 800; letter-spacing: 0.02em;
color: var(--navy); margin-bottom: 8px;
}
/* Cohort retention heatmap */
.cust-cohort-table {
font-size: 11.5px;
table-layout: fixed;
width: 100%;
}
.cust-cohort-table th,
.cust-cohort-table td {
text-align: center;
padding: 5px 4px;
}
.cust-cohort-table thead th {
background: var(--navy-deep); color: #fff;
font-weight: 700; font-size: 11px;
letter-spacing: 0.04em; text-transform: uppercase;
}
.cust-cohort-table thead th:first-child { width: 96px; text-align: left; padding-left: 10px; }
.cust-cohort-table thead th:nth-child(2) { width: 60px; }
.cust-cohort-month {
background: var(--soft);
font-weight: 700; color: var(--navy);
text-align: left !important; padding-left: 10px !important;
font-size: 11px;
}
.cust-cohort-size {
font-weight: 700; color: var(--ink);
background: #fafbfc;
font-size: 11px;
}
.cust-cohort-cell {
font-weight: 600; color: var(--navy-deep);
border: 1px solid #fff;
}
.cust-cohort-empty { background: #fafbfc; border: 1px solid #fff; }
/* Segments donut + table */
.cust-seg-block {
background: #fff; border: 1px solid var(--rule);
border-radius: 12px; padding: 14px 18px; margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.cust-seg-grid {
display: grid; grid-template-columns: 380px 1fr; gap: 18px;
align-items: start;
}
@media (max-width: 900px) { .cust-seg-grid { grid-template-columns: 1fr; } }
.cust-seg-chart { background: transparent; border: none; padding: 0; height: 280px; }
.cust-seg-cell { padding-left: 0; }
/* At-Risk VIP highlight card */
.cust-at-risk {
display: grid; grid-template-columns: 48px 1fr auto; gap: 14px;
align-items: center;
background: linear-gradient(120deg, #fff7f9 0%, #fff 80%);
border: 1px solid #f3c3d1; border-left: 4px solid #cd2553;
border-radius: 12px; padding: 14px 18px; margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.cust-at-risk-icon {
width: 40px; height: 40px; border-radius: 50%;
background: #cd2553; color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 18px;
}
.cust-at-risk-title { font-size: 15px; font-weight: 800; color: var(--navy-deep); }
.cust-at-risk-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cust-at-risk-metrics {
display: flex; gap: 24px;
}
.cust-at-risk-metrics .kpi-label {
font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted);
}
.cust-at-risk-metrics .kpi-value {
font-size: 22px; font-weight: 800; color: #cd2553;
}
/* Empty state when account has no customer views */
.dash-empty {
background: #fff; border: 1px dashed var(--rule);
border-radius: 14px; padding: 40px 24px;
text-align: center; color: var(--muted);
margin: 14px 0;
}
.dash-empty-icon { font-size: 42px; margin-bottom: 8px; }
.dash-empty h3 { margin: 0 0 4px; font-size: 17px; color: var(--navy-deep); }
.dash-empty p { font-size: 13px; line-height: 1.55; max-width: 540px; margin: 0 auto; }
/* ===========================================================================
* v4.17 — Optimisation tab (sprint execution + daily standup thread)
*
* One tab. Inside: picker chips (Budget & Bid · SQR · Creatives · Products),
* a counter strip, a recommendations table with per-row Done/Skip/Defer
* actions, and a daily standup thread.
* =========================================================================== */
.optim-picker {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
margin-bottom: 14px;
}
@media (max-width: 1000px) { .optim-picker { grid-template-columns: 1fr 1fr; } }
.optim-chip {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
background: #fff; border: 1px solid var(--rule); border-radius: 10px;
cursor: pointer; text-align: left;
transition: border-color .15s, transform .08s, box-shadow .15s;
}
.optim-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.optim-chip.active {
border-color: var(--accent); background: var(--accent-soft);
box-shadow: 0 4px 14px rgba(38,180,151,0.18);
}
.optim-chip.soon { opacity: 0.55; cursor: not-allowed; }
.optim-chip.soon:hover { transform: none; border-color: var(--rule); }
.optim-chip-icon {
width: 36px; height: 36px; border-radius: 8px;
background: linear-gradient(135deg, var(--navy-deep), var(--accent));
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px;
}
.optim-chip-body { min-width: 0; }
.optim-chip-label { font-weight: 800; font-size: 14px; color: var(--navy-deep); }
.optim-chip-day {
font-size: 11px; color: var(--muted);
letter-spacing: 0.04em; text-transform: uppercase; margin-top: 1px;
}
.optim-counts {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 14px; padding: 10px 14px;
background: #fafbfc; border: 1px solid var(--rule); border-radius: 10px;
font-size: 12.5px; color: var(--muted);
}
.optim-count { padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--rule); }
.optim-count b { color: var(--navy-deep); font-weight: 800; }
.optim-count-open { color: var(--muted); }
.optim-count-done { background: #d9f0e2; border-color: #b9e4c9; color: #1d6b46; }
.optim-count-discuss { background: #fff7e0; border-color: #f3d986; color: #815105; }
/* Legacy classes kept for backwards-compat */
.optim-count-skip { background: #f3f4f6; border-color: #d8dadc; color: #4b5563; }
.optim-count-defer { background: #fff7e0; border-color: #f3d986; color: #815105; }
/* Editor-sheet info banner (SQR sprint) */
.optim-info-banner {
display: flex; gap: 12px; align-items: flex-start;
padding: 12px 16px; margin-bottom: 14px;
background: linear-gradient(120deg, #d4f1e9, #fff);
border: 1px solid var(--accent); border-left: 4px solid var(--accent);
border-radius: 10px;
font-size: 13px; color: var(--navy-deep); line-height: 1.55;
}
.optim-info-icon { font-size: 22px; line-height: 1; }
.optim-block-title {
font-size: 14px; font-weight: 800; letter-spacing: 0.02em;
color: var(--navy-deep); margin: 4px 0 10px;
}
/* Recs table */
.optim-table { font-size: 12.5px; }
.optim-table thead th {
background: var(--navy-deep); color: #fff;
font-weight: 700; padding: 9px 10px; font-size: 11.5px;
letter-spacing: 0.04em; text-transform: uppercase;
}
.optim-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.optim-table tbody tr:nth-child(even) td { background: #fafbfc; }
.optim-table tbody tr.optim-row-done td { background: #f3faf6; }
.optim-table tbody tr.optim-row-discuss td { background: #fffaf0; }
/* Legacy fallbacks for older saved rows */
.optim-table tbody tr.optim-row-skip td { background: #f7f8f9; opacity: 0.7; }
.optim-table tbody tr.optim-row-defer td { background: #fffaf0; }
.optim-cmp-name { font-weight: 700; color: var(--navy); }
.optim-cmp-meta { font-size: 11px; color: var(--muted); margin-top: 2px; font-weight: 500; }
.optim-action-txt { font-size: 12px; line-height: 1.4; color: var(--ink); max-width: 340px; }
.optim-chan {
display: inline-block; padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
background: var(--soft); color: var(--navy);
}
.optim-chan-google { background: #fff0c4; color: #815105; }
.optim-chan-meta { background: #d6e9ff; color: #1f4d8c; }
.optim-chan-tiktok { background: #1a1a1a; color: #fff; }
.optim-chan-snapchat { background: #fff7c4; color: #815105; }
.optim-chan-pinterest, .optim-chan-twitter, .optim-chan-linkedin { background: var(--soft); }
.optim-delta-pos { color: #1d6b46; font-weight: 700; }
.optim-delta-neg { color: #a3173d; font-weight: 700; }
.optim-delta-flat{ color: var(--muted); }
.optim-pill {
display: inline-block; padding: 2px 10px; border-radius: 999px;
color: #fff; font-weight: 700; font-size: 11px;
letter-spacing: 0.04em;
}
/* Status pill on a recommendation row */
.optim-status {
display: inline-block; padding: 2px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.optim-status-open { background: var(--soft); color: var(--muted); }
.optim-status-done { background: #d9f0e2; color: #1d6b46; }
.optim-status-discuss { background: #fff7e0; color: #815105; }
/* Legacy fallbacks */
.optim-status-skip { background: #f3f4f6; color: #4b5563; }
.optim-status-defer { background: #fff7e0; color: #815105; }
.optim-status-meta { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; font-weight: 500; }
.optim-status-note {
display: block; font-size: 11.5px; color: var(--ink);
margin-top: 4px; padding: 4px 8px;
background: #fffaf0; border-left: 3px solid #d4a017;
border-radius: 4px;
white-space: pre-wrap;
max-width: 280px;
line-height: 1.4;
}
/* ===== Discussion Log — cross-sprint audit view ===== */
.optim-chip-log {
background: linear-gradient(135deg, #fdf6e3 0%, #fef9e7 100%);
border-color: #e6cb8a;
}
.optim-chip-log.active {
background: var(--accent); color: var(--navy-deep);
border-color: var(--accent);
}
.optim-log-filterbar {
display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
background: #f8fafc;
border: 1px solid var(--rule); border-radius: 8px;
padding: 10px 14px;
margin: 12px 0;
font-size: 12px;
}
.optim-log-filterbar label {
display: flex; align-items: center; gap: 6px;
font-weight: 700; font-size: 11px; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.05em;
}
.optim-log-filterbar select {
padding: 5px 8px;
border: 1px solid var(--rule); border-radius: 6px;
font-size: 12px;
background: #fff;
cursor: pointer;
}
.optim-log-filterbar #optim-log-export { margin-left: auto; }
.optim-log-table .optim-log-when {
font-family: 'SF Mono', 'Roboto Mono', 'Consolas', monospace;
font-size: 11.5px;
color: var(--muted);
white-space: nowrap;
}
.optim-log-sprint {
display: inline-block;
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
padding: 2px 8px;
border-radius: 4px;
background: #e2e8f0; color: var(--navy);
}
.optim-log-sprint-budget { background: #e7f5ee; color: #0e8b6f; }
.optim-log-sprint-sqr { background: #e8eef9; color: #1a4f8b; }
.optim-log-sprint-creatives { background: #fdf3e7; color: #8a5500; }
.optim-log-sprint-products { background: #f5e7f5; color: #6f1e6f; }
/* Ad-ID chip in the creatives sprint table — click to copy. */
.optim-adid {
display: inline-block;
font-family: 'SF Mono', 'Roboto Mono', 'Consolas', monospace;
font-size: 11px;
font-weight: 600;
color: var(--navy);
background: #f1f5f9;
border: 1px solid #cbd5e1;
padding: 2px 7px;
border-radius: 4px;
cursor: pointer;
user-select: all;
letter-spacing: 0.2px;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.optim-adid:hover { background: #e2e8f0; border-color: #94a3b8; }
.optim-adid.optim-adid-copied {
background: #22a06b; border-color: #22a06b; color: #fff;
}
/* Per-row action buttons */
.optim-row-actions { display: flex; gap: 4px; }
.optim-act {
background: #fff; border: 1px solid var(--rule);
font-size: 11px; font-weight: 700;
padding: 4px 9px; border-radius: 6px; cursor: pointer;
color: var(--navy);
white-space: nowrap;
}
.optim-act:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.optim-act.active.optim-act-done { background: #22a06b; border-color: #22a06b; color: #fff; }
.optim-act.active.optim-act-skip { background: #4b5563; border-color: #4b5563; color: #fff; }
.optim-act.active.optim-act-defer { background: #d4a017; border-color: #d4a017; color: #fff; }
/* Standup thread */
.optim-thread {
background: #fff; border: 1px solid var(--rule);
border-radius: 12px; padding: 16px 18px;
margin-top: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.optim-thread-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.optim-thread-msg {
display: flex; gap: 10px; align-items: flex-start;
padding: 10px 12px; background: #fafbfc; border-radius: 10px;
border: 1px solid var(--rule);
}
.optim-thread-av {
width: 32px; height: 32px; border-radius: 50%;
color: #fff; font-size: 11px; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
overflow: hidden; flex-shrink: 0;
}
.optim-thread-av img { width: 100%; height: 100%; object-fit: cover; }
.optim-thread-body { flex: 1; min-width: 0; }
.optim-thread-head {
display: flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--muted); margin-bottom: 3px;
}
.optim-thread-head b { color: var(--navy); font-weight: 700; }
.optim-thread-when { font-size: 11px; color: var(--muted); }
.optim-thread-del {
background: transparent; border: none; cursor: pointer;
color: var(--muted); font-size: 12px;
margin-left: auto;
}
.optim-thread-del:hover { color: #cd2553; }
.optim-thread-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; color: var(--ink); }
.optim-thread-form {
display: flex; gap: 8px; align-items: stretch;
}
.optim-thread-form textarea {
flex: 1; border: 1px solid var(--rule); border-radius: 8px;
padding: 8px 12px; font-family: inherit; font-size: 13px;
resize: vertical; min-height: 50px;
}
.optim-thread-form textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* ============= v4.16 — Per-account sprint cadence editor (admin) ============= */
.sprint-cfg-grid {
display: flex; flex-direction: column; gap: 6px;
background: var(--soft);
padding: 10px; border-radius: 8px;
border: 1px solid var(--rule);
}
.sprint-row {
display: grid;
grid-template-columns: 100px 1.2fr 1fr 2fr;
gap: 6px;
align-items: center;
background: #fff;
padding: 6px 8px;
border-radius: 6px;
}
.sprint-row .sprint-day {
font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--navy);
}
.sprint-row input[type=text],
.sprint-row select {
padding: 5px 8px; font-size: 12px;
border: 1px solid var(--rule); border-radius: 6px;
background: #fff;
}
.sprint-row input:focus,
.sprint-row select:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-soft);
}
/* ===========================================================================
* v4.15 — Daily Routine (SPARK Playbook companion)
*
* Three blocks: weekly cadence banner, 7-step morning routine grid, anomalies
* list with playbook deep-links, and the side action log.
* =========================================================================== */
.daily-routine {
background: linear-gradient(120deg, var(--navy-deep), var(--navy) 60%, var(--accent) 130%);
color: #fff; border-radius: 14px;
padding: 18px 22px; margin-bottom: 14px;
position: relative; overflow: hidden;
box-shadow: 0 8px 24px rgba(31, 66, 77, 0.2);
}
.daily-routine::before {
content: ''; position: absolute; top: -50%; right: -10%;
width: 320px; height: 320px;
background: radial-gradient(closest-side, rgba(255,255,255,0.15), transparent 75%);
pointer-events: none;
}
.dr-cadence { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.dr-cadence-day {
font-size: 12px; font-weight: 800; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--accent);
padding: 3px 10px; background: rgba(255,255,255,0.12);
border-radius: 999px;
}
.dr-cadence-name {
font-size: 22px; font-weight: 800; letter-spacing: -0.01em; flex: 0 0 auto;
}
.dr-cadence-hint {
flex: 1; min-width: 200px; color: rgba(255,255,255,0.85); font-size: 13px;
}
.dr-cadence-go {
background: rgba(255,255,255,0.16); color: #fff;
border: 1px solid rgba(255,255,255,0.3);
padding: 7px 16px; border-radius: 999px;
font-size: 13px; font-weight: 700; cursor: pointer;
}
.dr-cadence-go:hover { background: rgba(255,255,255,0.28); }
.dr-grid {
display: grid; grid-template-columns: minmax(0, 1fr) 360px;
gap: 16px; align-items: flex-start;
}
@media (max-width: 1100px) {
.dr-grid { grid-template-columns: 1fr; }
}
.dr-section {
background: #fff; border: 1px solid var(--rule);
border-radius: 12px; padding: 14px 18px;
margin-bottom: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dr-section-head {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 10px;
}
.dr-section-head h3 {
margin: 0; font-size: 14px; font-weight: 800;
letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy);
}
.dr-section-hint { font-size: 11px; color: var(--muted); }
/* 7-step morning routine */
.dr-steps { display: flex; flex-direction: column; gap: 6px; }
.dr-step {
display: grid; grid-template-columns: 36px 1fr auto;
align-items: center; gap: 12px;
padding: 10px 14px;
background: #fafbfc; border: 1px solid var(--rule);
border-radius: 10px;
transition: border-color .12s, background .12s;
}
.dr-step:hover { background: #fff; border-color: var(--accent); }
.dr-step-n {
width: 30px; height: 30px; border-radius: 50%;
background: var(--navy-deep); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 13px;
}
.dr-step-label { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.dr-step-detail { font-size: 12px; color: var(--muted); margin-top: 1px; }
.dr-step-status { display: flex; align-items: center; gap: 8px; }
.dr-status-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.dr-status-pill.dr-status-ok { background: #d9f0e2; color: #1d6b46; }
.dr-status-pill.dr-status-warn { background: #fff0c8; color: #815105; }
.dr-status-pill.dr-status-bad { background: #fce1e7; color: #a3173d; }
.dr-status-pill.dr-status-na { background: var(--soft); color: var(--muted); }
.dr-step-go {
background: transparent; border: 1px solid var(--rule);
padding: 4px 10px; border-radius: 999px;
font-size: 12px; font-weight: 700; cursor: pointer;
color: var(--navy);
}
.dr-step-go:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.dr-step.dr-status-bad { border-left: 3px solid #cd2553; }
.dr-step.dr-status-warn { border-left: 3px solid #d4a017; }
.dr-step.dr-status-ok { border-left: 3px solid var(--accent); }
.dr-step.dr-status-na { border-left: 3px solid var(--rule); }
/* ===========================================================================
* Daily Routine v2 — playbook-inspired layout (hero + three iron rules +
* diagnostic chain + two truths + 7-step list + weekly cadence).
* Mirrors the SPARK Playbook visual language so the dashboard's Daily Routine
* tab reads as the field-guide instead of a generic checklist.
* ======================================================================== */
/* ----- Hero strip ----- */
.dr-hero {
background: linear-gradient(135deg, #1f424d 0%, #16505d 100%);
color: #fff;
border-radius: 16px;
padding: 36px 40px 30px;
margin: 0 0 22px;
}
.dr-hero-title {
margin: 0;
font-size: 44px; line-height: 1.05;
font-weight: 900;
letter-spacing: -0.02em;
}
.dr-hero-accent { color: var(--accent); }
.dr-hero-sub {
margin: 14px 0 0;
font-size: 15px; line-height: 1.55;
max-width: 780px;
color: rgba(255,255,255,0.82);
}
.dr-hero-counters {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
margin-top: 22px; padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.15);
font-size: 13px;
color: rgba(255,255,255,0.82);
}
.dr-hero-count b {
color: var(--accent);
font-size: 16px; font-weight: 800;
margin-right: 4px;
}
.dr-hero-count em { font-style: normal; font-weight: 600; color: #fff; }
.dr-hero-sep { color: rgba(255,255,255,0.35); }
@media (max-width: 700px) {
.dr-hero { padding: 28px 22px 22px; }
.dr-hero-title { font-size: 32px; }
.dr-hero-sub { font-size: 14px; }
}
/* ----- Section headers ----- */
.dr-section-header {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
margin: 28px 0 14px;
}
.dr-h2 {
margin: 0;
font-size: 22px; font-weight: 800; color: var(--navy);
letter-spacing: -0.01em;
}
.dr-h2-sub { font-size: 13px; color: var(--muted); }
/* ----- Three Iron Rules cards ----- */
.dr-rules {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-bottom: 18px;
}
@media (max-width: 900px) { .dr-rules { grid-template-columns: 1fr; } }
.dr-rule {
position: relative;
background: #fff; border: 1px solid var(--rule);
border-top: 3px solid var(--accent);
border-radius: 12px;
padding: 22px 22px 18px;
}
.dr-rule-n {
position: absolute;
top: -16px; left: 22px;
width: 30px; height: 30px;
background: var(--accent); color: var(--navy-deep);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 14px;
border: 3px solid #fff;
}
.dr-rule-title {
font-size: 13.5px; font-weight: 900;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--accent);
margin: 6px 0 10px;
}
.dr-rule-body {
margin: 0;
font-size: 13.5px; line-height: 1.55;
color: var(--ink);
}
/* ----- Diagnostic Chain strip ----- */
.dr-chain-wrap {
background: linear-gradient(135deg, #1f424d 0%, #16505d 100%);
color: #fff;
border-radius: 14px;
padding: 22px 24px;
margin: 0 0 22px;
}
.dr-chain-head {
font-size: 12px; font-weight: 900;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--accent);
}
.dr-chain-intro {
font-size: 13.5px; line-height: 1.55;
margin: 8px 0 18px;
color: rgba(255,255,255,0.85);
}
.dr-chain {
display: flex; align-items: stretch; gap: 6px;
overflow-x: auto;
}
.dr-chain-step {
flex: 1 1 0;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
padding: 12px 14px;
min-width: 140px;
}
.dr-chain-n {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--accent);
}
.dr-chain-label {
font-size: 16px; font-weight: 800;
margin: 4px 0 6px;
}
.dr-chain-sub {
font-size: 11px; color: rgba(255,255,255,0.72);
background: rgba(0,0,0,0.18);
padding: 4px 8px; border-radius: 4px;
font-family: 'SF Mono', 'Roboto Mono', Consolas, monospace;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dr-chain-arr {
display: flex; align-items: center;
color: var(--accent);
font-size: 18px; font-weight: 700;
padding: 0 2px;
}
@media (max-width: 900px) {
.dr-chain { flex-direction: column; }
.dr-chain-arr { display: none; }
.dr-chain-step { min-width: 0; }
}
/* ----- Platform vs Backend Truth ----- */
.dr-truths {
display: grid;
grid-template-columns: 1fr 60px 1fr;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
@media (max-width: 800px) {
.dr-truths { grid-template-columns: 1fr; }
.dr-truth-vs { display: none; }
}
.dr-truth {
background: #fff;
border: 2px solid;
border-radius: 12px;
padding: 22px 24px;
}
.dr-truth-platform { border-color: #2E86AB; }
.dr-truth-backend { border-color: #22a06b; }
.dr-truth-tag {
font-size: 10.5px; font-weight: 800;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--muted);
}
.dr-truth-platform .dr-truth-tag { color: #2E86AB; }
.dr-truth-backend .dr-truth-tag { color: #22a06b; }
.dr-truth-title {
margin: 6px 0 10px;
font-size: 20px; font-weight: 800;
color: var(--navy);
}
.dr-truth-body {
margin: 0;
font-size: 13.5px; line-height: 1.55;
color: var(--ink);
}
.dr-truth-vs {
text-align: center;
font-size: 16px; font-weight: 900;
letter-spacing: 0.1em;
color: var(--accent);
}
/* ----- 7-step morning routine list (v2) ----- */
.dr-steps2 { display: flex; flex-direction: column; gap: 8px; }
.dr-step2 {
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center; gap: 16px;
background: #fff; border: 1px solid var(--rule);
border-radius: 10px;
padding: 14px 18px;
cursor: pointer;
transition: border-color .15s, transform .12s, box-shadow .15s;
}
.dr-step2:hover {
border-color: var(--accent);
transform: translateX(2px);
box-shadow: 0 1px 4px rgba(38,180,151,0.12);
}
.dr-step2:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.dr-step2-n {
width: 36px; height: 36px; border-radius: 50%;
background: var(--accent-soft); color: var(--accent);
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 15px;
}
.dr-step2-head {
display: flex; align-items: center; gap: 8px;
font-size: 15px; color: var(--navy);
}
.dr-step2-desc {
margin-top: 3px;
font-size: 13px; line-height: 1.45;
color: var(--ink);
}
.dr-step2-detail {
margin-top: 4px;
font-size: 11.5px; color: var(--muted); font-style: italic;
}
.dr-step2-dot {
width: 9px; height: 9px; border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.dr-dot-ok { background: #22a06b; }
.dr-dot-warn { background: #d4a017; }
.dr-dot-bad { background: #cd2553; }
.dr-dot-na { background: var(--rule); }
.dr-step2-pills {
display: flex; flex-wrap: wrap; gap: 4px;
justify-content: flex-end;
max-width: 280px;
}
.dr-step2-pill {
font-family: 'SF Mono', 'Roboto Mono', Consolas, monospace;
font-size: 11px;
background: var(--accent-soft); color: var(--accent);
padding: 3px 9px; border-radius: 999px;
white-space: nowrap;
}
@media (max-width: 800px) {
.dr-step2 { grid-template-columns: 36px 1fr; }
.dr-step2-pills { grid-column: 2; justify-content: flex-start; max-width: none; margin-top: 4px; }
}
/* ----- Weekly Cadence cards ----- */
.dr-weekly {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-bottom: 24px;
}
@media (max-width: 1100px) { .dr-weekly { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .dr-weekly { grid-template-columns: 1fr; } }
.dr-week-card {
background: #fff; border: 1px solid var(--rule); border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: border-color .15s, transform .12s, box-shadow .15s;
}
.dr-week-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(15,50,70,0.08);
}
.dr-week-card:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.dr-week-card-today {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(38,180,151,0.18);
}
.dr-week-head {
display: flex; justify-content: space-between; align-items: center; gap: 6px;
background: var(--navy-deep);
color: #fff;
padding: 12px 14px;
}
.dr-week-day {
font-size: 12px; font-weight: 900;
letter-spacing: 0.08em;
}
.dr-week-badge {
background: var(--accent); color: var(--navy-deep);
font-size: 10px; font-weight: 800;
letter-spacing: 0.05em;
padding: 3px 8px; border-radius: 999px;
}
.dr-week-name {
font-size: 16px; font-weight: 800;
color: var(--navy);
padding: 14px 14px 6px;
}
.dr-week-hint {
font-size: 12.5px; line-height: 1.5;
color: var(--ink);
padding: 0 14px 12px;
}
.dr-week-pills {
display: flex; flex-wrap: wrap; gap: 4px;
padding: 0 14px 14px;
}
.dr-week-pill {
font-family: 'SF Mono', 'Roboto Mono', Consolas, monospace;
font-size: 10.5px;
background: #eef3f6; color: var(--navy);
padding: 3px 8px; border-radius: 4px;
white-space: nowrap;
max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* Anomalies card */
.dr-anomalies { display: flex; flex-direction: column; gap: 6px; }
.dr-anomalies-empty {
background: #f7fcf9; border: 1px dashed #b9e4d8;
border-radius: 10px; padding: 16px;
text-align: center; color: #1d6b46; font-size: 13px; font-weight: 600;
}
.dr-anom-row {
display: grid; grid-template-columns: 40px 1fr auto; gap: 12px;
align-items: center; padding: 10px 14px;
background: #fafbfc; border: 1px solid var(--rule); border-radius: 10px;
}
.dr-anom-row.sev-bad { border-left: 3px solid #cd2553; background: #fff7f9; }
.dr-anom-row.sev-warn { border-left: 3px solid #d4a017; background: #fffaf0; }
.dr-anom-letter {
width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(135deg, var(--navy-deep), var(--accent));
color: #fff; display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 14px;
}
.dr-anom-title { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.dr-anom-msg { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dr-anom-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dr-anom-jump,
.dr-anom-log {
background: var(--soft); border: 1px solid var(--rule);
padding: 4px 10px; border-radius: 999px; cursor: pointer;
font-size: 11.5px; font-weight: 600; color: var(--navy);
}
.dr-anom-jump:hover, .dr-anom-log:hover {
background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.dr-anom-playbook {
background: var(--navy-deep); color: #fff; border: 1px solid var(--navy-deep);
padding: 4px 10px; border-radius: 999px;
font-size: 11.5px; font-weight: 700; text-decoration: none;
}
.dr-anom-playbook:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Action log side column */
.dr-col-side { position: sticky; top: 70px; }
.dr-section-log { padding: 12px 14px; }
.dr-log-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 280px); overflow-y: auto; }
.dr-log-row {
background: #fafbfc; border: 1px solid var(--rule);
border-radius: 10px; padding: 10px 12px;
border-left: 3px solid var(--accent);
}
.dr-log-row.dr-log-status-done { border-left-color: #1d6b46; opacity: 0.85; }
.dr-log-row.dr-log-status-dropped { opacity: 0.55; border-left-color: var(--rule); }
.dr-log-head {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 11px; color: var(--muted); margin-bottom: 6px;
}
.dr-log-author { color: var(--ink); font-weight: 600; }
.dr-log-when { font-size: 11px; }
.dr-log-tag {
background: var(--soft); color: var(--navy);
padding: 1px 8px; border-radius: 4px;
font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase;
}
.dr-log-tag-channel { background: var(--accent-soft); color: var(--accent); }
.dr-log-pbref {
background: var(--navy-deep); color: #fff !important;
padding: 1px 8px; border-radius: 4px;
font-size: 10px; font-weight: 700; text-decoration: none;
}
.dr-log-status {
font-size: 10px; font-weight: 700; text-transform: uppercase;
color: var(--accent); margin-left: auto;
}
.dr-log-del {
background: transparent; border: none; cursor: pointer;
color: var(--muted); font-size: 13px;
}
.dr-log-del:hover { color: #cd2553; }
.dr-log-grid { display: flex; flex-direction: column; gap: 6px; }
.dr-log-cell { display: flex; flex-direction: column; }
.dr-log-cell span {
font-size: 9.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--muted);
}
.dr-log-cell p {
margin: 1px 0 0; font-size: 12.5px; color: var(--ink); line-height: 1.4;
}
/* ============= Persistent Playbook side panel ============= */
.pb-panel {
position: fixed; top: 70px; right: 14px; bottom: 14px;
width: 420px; max-width: 92vw;
background: #fff;
border: 1px solid var(--rule); border-radius: 14px;
box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
z-index: 90;
display: flex; flex-direction: column;
overflow: hidden;
}
.pb-panel[hidden] { display: none; }
.pb-panel-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
background: linear-gradient(120deg, var(--navy-deep), var(--navy));
color: #fff;
}
.pb-panel-title { display: flex; align-items: center; gap: 10px; }
.pb-panel-title h3 { margin: 0; font-size: 15px; color: #fff; }
.pb-panel-icon {
width: 26px; height: 26px; border-radius: 6px;
background: rgba(255,255,255,0.16);
display: inline-flex; align-items: center; justify-content: center;
}
.pb-panel-actions { display: flex; gap: 4px; }
.pb-panel-min, .pb-panel-close {
background: rgba(255,255,255,0.16); color: #fff; border: none;
width: 28px; height: 28px; border-radius: 6px;
cursor: pointer; font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
}
.pb-panel-min:hover, .pb-panel-close:hover { background: rgba(255,255,255,0.28); }
.pb-panel-body {
flex: 1; min-height: 0; overflow-y: auto;
padding: 14px 16px;
}
/* Minimized strip */
.pb-panel-tab {
position: fixed; right: 0; top: 50%;
transform: translateY(-50%);
background: var(--accent); color: #fff; border: none;
padding: 10px 12px;
border-radius: 10px 0 0 10px;
font-size: 12px; font-weight: 700;
cursor: pointer;
box-shadow: -2px 4px 14px rgba(15, 23, 42, .15);
z-index: 89;
writing-mode: vertical-rl; text-orientation: mixed;
}
.pb-panel-tab[hidden] { display: none; }
.pb-panel-tab:hover { background: var(--accent-hover); }
/* Launchpad: pick a playbook */
.pb-launch { display: flex; flex-direction: column; gap: 6px; }
.pb-launch-intro {
margin: 0 0 8px; font-size: 13px; color: var(--muted);
}
.pb-launch-card {
display: flex; align-items: center; gap: 12px; text-align: left;
background: #fafbfc; border: 1px solid var(--rule);
border-radius: 10px; padding: 10px 12px;
cursor: pointer; transition: border-color .12s, transform .08s;
}
.pb-launch-card:hover {
border-color: var(--accent);
transform: translateY(-1px);
background: #fff;
}
.pb-launch-letter {
width: 32px; height: 32px; border-radius: 50%;
background: linear-gradient(135deg, var(--navy-deep), var(--accent));
color: #fff; display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 13px;
flex-shrink: 0;
}
.pb-launch-title { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.pb-launch-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
/* Walker toolbar */
.pb-toolbar {
display: flex; align-items: center; gap: 4px;
margin-bottom: 10px; flex-wrap: wrap;
}
.pb-toolbar-back, .pb-toolbar-restart {
background: var(--soft); border: 1px solid var(--rule);
width: 28px; height: 28px; border-radius: 6px;
cursor: pointer; font-size: 13px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--navy);
}
.pb-toolbar-back:hover, .pb-toolbar-restart:hover {
background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.pb-toolbar-spacer { flex: 1; }
.pb-bc {
display: inline-flex; gap: 2px; align-items: center;
font-size: 11px; color: var(--muted);
}
.pb-bc-step {
background: var(--soft); border: 1px solid var(--rule);
width: 22px; height: 22px; border-radius: 6px;
font-size: 10.5px; font-weight: 700; cursor: pointer;
color: var(--navy);
}
.pb-bc-step:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pb-bc-sep { color: var(--muted); }
.pb-bc-current {
background: var(--accent); color: #fff; border-radius: 6px;
padding: 2px 8px; font-weight: 700; font-size: 10.5px;
}
.pb-pb-switcher { display: inline-flex; gap: 3px; }
.pb-chip {
background: var(--soft); border: 1px solid var(--rule);
padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 700; cursor: pointer;
color: var(--navy);
}
.pb-chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pb-chip.active {
background: var(--accent); border-color: var(--accent); color: #fff;
}
.pb-current-pb {
font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--navy);
margin-bottom: 8px;
}
.pb-context {
background: #fff7e0; border: 1px solid #f3d986;
color: #815105; padding: 8px 12px; border-radius: 8px;
font-size: 12px; margin-bottom: 10px;
}
.pb-card {
background: #fff; border: 1px solid var(--rule); border-radius: 10px;
padding: 14px 16px;
}
.pb-q {
font-size: 15px; font-weight: 700; line-height: 1.4;
color: var(--navy-deep); margin-bottom: 6px;
}
.pb-q-hint { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.pb-redirect {
background: var(--soft); border: 1px dashed var(--accent);
color: var(--accent); font-size: 12px; font-weight: 700;
padding: 6px 12px; border-radius: 999px; cursor: pointer;
margin-bottom: 10px;
}
.pb-redirect:hover { background: var(--accent-soft); }
.pb-answers { display: flex; gap: 6px; }
.pb-yes, .pb-no {
flex: 1;
padding: 9px 12px; border-radius: 8px;
font-size: 13px; font-weight: 700; cursor: pointer;
}
.pb-yes {
background: linear-gradient(120deg, var(--navy-deep), var(--accent));
color: #fff; border: 1px solid var(--accent);
}
.pb-yes:hover { filter: brightness(1.08); }
.pb-no {
background: #fff; color: var(--navy);
border: 1px solid var(--rule);
}
.pb-no:hover { background: var(--soft); border-color: var(--navy); }
/* Terminal card */
.pb-terminal {
background: linear-gradient(135deg, #f7fcf9 0%, #fff 100%);
border: 1px solid var(--accent);
border-radius: 10px; padding: 14px 16px;
}
.pb-terminal-title {
font-size: 15px; font-weight: 800; color: var(--navy-deep);
margin-bottom: 10px;
}
.pb-terminal-grid { display: flex; flex-direction: column; gap: 10px; }
.pb-terminal-grid div { display: flex; flex-direction: column; }
.pb-terminal-grid span {
font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--muted);
}
.pb-terminal-grid p {
margin: 2px 0 0; font-size: 12.5px; color: var(--ink); line-height: 1.5;
}
.pb-terminal-actions {
display: flex; gap: 6px; justify-content: flex-end;
margin-top: 12px; flex-wrap: wrap;
}
.pb-copy {
background: var(--soft); border: 1px solid var(--rule);
color: var(--navy); padding: 6px 12px; border-radius: 999px;
cursor: pointer; font-size: 12px; font-weight: 700;
}
.pb-copy:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* Optional: when panel is open, you might want body padding to feel comfortable.
We don't shift content — the panel floats above the dashboard. */
/* ============= Old Interactive Playbook Walker (in-section) ============= */
.dr-walker-section { padding: 14px 18px; }
.dr-walker-intro {
font-size: 13px; color: var(--muted); margin: 0 0 10px;
}
.dr-walker-launchpad-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px;
}
.dr-walker-pick {
display: flex; flex-direction: column; gap: 4px;
text-align: left;
background: #fafbfc; border: 1px solid var(--rule);
border-radius: 10px; padding: 12px 14px;
cursor: pointer; transition: transform .1s, border-color .12s, box-shadow .12s;
}
.dr-walker-pick:hover {
background: #fff; border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(38,180,151,0.12);
}
.dr-walker-letter {
width: 30px; height: 30px; border-radius: 50%;
background: linear-gradient(135deg, var(--navy-deep), var(--accent));
color: #fff; display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 13px;
}
.dr-walker-title {
font-weight: 700; color: var(--ink); font-size: 14px;
}
.dr-walker-hint {
font-size: 11.5px; color: var(--muted);
}
.dr-walker-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 14px; margin: -4px -4px 10px;
background: linear-gradient(120deg, var(--navy-deep), var(--navy));
border-radius: 10px;
color: #fff;
}
.dr-walker-bar-left { display: flex; align-items: center; gap: 10px; }
.dr-walker-bar-letter {
width: 28px; height: 28px; border-radius: 50%;
background: rgba(255,255,255,0.12); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800;
}
.dr-walker-bar-title { font-size: 14px; font-weight: 700; }
.dr-walker-bar-step {
background: rgba(255,255,255,0.18); color: #fff;
padding: 2px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.dr-walker-restart {
background: rgba(255,255,255,0.16); color: #fff;
border: 1px solid rgba(255,255,255,0.2);
padding: 4px 10px; border-radius: 999px; cursor: pointer;
font-size: 11.5px; font-weight: 600;
}
.dr-walker-restart:hover { background: rgba(255,255,255,0.26); }
.dr-walker-context {
background: #fff7e0; border: 1px solid #f3d986;
color: #815105; padding: 8px 12px; border-radius: 8px;
font-size: 12px; margin-bottom: 10px;
}
.dr-walker-card {
background: #fff; border: 1px solid var(--rule);
border-radius: 10px; padding: 14px 18px;
}
.dr-walker-q {
font-size: 16px; font-weight: 700; color: var(--navy-deep);
line-height: 1.4; margin-bottom: 8px;
}
.dr-walker-hint-text {
font-size: 12px; color: var(--muted); margin-bottom: 10px;
}
.dr-walker-redirect {
display: inline-block;
background: var(--soft); border: 1px dashed var(--accent);
color: var(--accent); padding: 6px 14px; border-radius: 999px;
font-size: 12px; font-weight: 700; cursor: pointer;
margin-bottom: 12px;
}
.dr-walker-redirect:hover { background: var(--accent-soft); }
.dr-walker-answers { display: flex; gap: 8px; }
.dr-walker-yes, .dr-walker-no {
flex: 1;
padding: 10px 16px; border-radius: 10px;
font-size: 14px; font-weight: 700; cursor: pointer;
}
.dr-walker-yes {
background: linear-gradient(120deg, var(--navy-deep), var(--accent));
color: #fff; border: 1px solid var(--accent);
}
.dr-walker-yes:hover { filter: brightness(1.08); }
.dr-walker-no {
background: #fff; color: var(--navy);
border: 1px solid var(--rule);
}
.dr-walker-no:hover { background: var(--soft); border-color: var(--navy); }
.dr-walker-back {
background: transparent; border: none; color: var(--muted);
font-size: 12px; margin-top: 10px; cursor: pointer;
}
.dr-walker-back:hover { color: var(--accent); }
.dr-walker-terminal {
background: linear-gradient(135deg, #f7fcf9 0%, #ffffff 100%);
border: 1px solid var(--accent);
border-radius: 10px; padding: 18px 20px;
}
.dr-walker-terminal-title {
font-size: 16px; font-weight: 800; color: var(--navy-deep);
margin-bottom: 12px;
}
.dr-walker-terminal-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin-bottom: 16px;
}
.dr-walker-terminal-grid div { display: flex; flex-direction: column; }
.dr-walker-terminal-grid span {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--muted);
}
.dr-walker-terminal-grid p {
margin: 2px 0 0; font-size: 13px; color: var(--ink); line-height: 1.5;
}
.dr-walker-terminal-actions {
display: flex; gap: 8px; justify-content: flex-end;
}
.dr-walker-jump {
background: var(--soft); border: 1px solid var(--rule);
color: var(--navy); padding: 6px 14px; border-radius: 999px;
font-size: 12px; font-weight: 700; cursor: pointer;
}
.dr-walker-jump:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
@media (max-width: 700px) {
.dr-walker-terminal-grid { grid-template-columns: 1fr; }
}
/* Add-log modal */
.dr-log-card { max-width: 560px; width: 92%; padding: 0; overflow: hidden; }
.dr-log-card-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px;
background: linear-gradient(120deg, var(--navy-deep), var(--navy));
color: #fff;
}
.dr-log-card-head h3 { margin: 0; color: #fff; font-size: 15px; }
.dr-log-close {
background: transparent; border: none; cursor: pointer;
color: #fff; font-size: 14px;
width: 26px; height: 26px; border-radius: 6px;
}
.dr-log-close:hover { background: rgba(255,255,255,0.12); }
.dr-log-card-body { padding: 16px 20px; max-height: 70vh; overflow-y: auto; }
.dr-log-card-body label {
display: block; font-size: 11px; font-weight: 700;
letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
margin-top: 10px;
}
.dr-log-card-body label .hint { color: #cd2553; text-transform: none; }
.dr-log-card-body input,
.dr-log-card-body select,
.dr-log-card-body textarea {
display: block; width: 100%; box-sizing: border-box;
border: 1px solid var(--rule); border-radius: 8px;
padding: 8px 12px; margin-top: 4px;
font-family: inherit; font-size: 13.5px;
background: #fff;
}
.dr-log-card-body input:focus,
.dr-log-card-body select:focus,
.dr-log-card-body textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.dr-log-card-body textarea { resize: vertical; min-height: 50px; }
.dr-log-row-2 {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
@media (max-width: 600px) { .dr-log-row-2 { grid-template-columns: 1fr; } }
.dr-log-card-foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--rule);
background: #fafbfc;
}
/* ============= Push-to-Slides modal ============= */
.push-slides-card {
max-width: 560px; padding: 0; overflow: hidden;
}
.push-slides-card .psm-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px;
background: linear-gradient(120deg, var(--navy-deep), var(--navy));
color: #fff;
}
.push-slides-card .psm-head h3 { margin: 0; color: #fff; font-size: 16px; }
.push-slides-card .psm-close {
background: transparent; border: none; cursor: pointer;
color: #fff; font-size: 16px;
width: 28px; height: 28px; border-radius: 6px;
}
.push-slides-card .psm-close:hover { background: rgba(255,255,255,0.12); }
.push-slides-card .psm-body { padding: 18px 22px; }
.psm-intro {
margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5;
}
.psm-section-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
background: var(--soft);
padding: 10px; border-radius: 8px;
margin-bottom: 14px;
}
.psm-section {
display: flex; align-items: center; gap: 6px;
padding: 6px 10px;
background: #fff; border-radius: 6px;
font-size: 13px; cursor: pointer;
border: 1px solid var(--rule);
transition: border-color .12s, background .12s;
}
.psm-section:hover { border-color: var(--accent); }
.psm-section input:checked + span { font-weight: 600; color: var(--navy-deep); }
.psm-include {
border-top: 1px solid var(--rule);
padding-top: 12px;
}
.psm-include-title {
font-size: 11px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.06em;
margin-bottom: 6px;
}
.psm-include label {
display: flex; align-items: center; gap: 6px;
font-size: 13px; padding: 4px 0; cursor: pointer;
}
/* ============= v4.16 — nested section cards in push modal ============= */
.psm-toolbar {
display: flex; gap: 6px; margin-bottom: 10px;
}
.psm-mini-btn {
background: var(--soft); border: 1px solid var(--rule);
padding: 4px 10px; border-radius: 999px;
font-size: 11px; font-weight: 600; cursor: pointer;
color: var(--navy);
}
.psm-mini-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.psm-section-cards {
display: flex; flex-direction: column; gap: 6px;
max-height: 360px; overflow-y: auto;
border: 1px solid var(--rule); border-radius: 8px;
padding: 6px;
background: #fbfcfc;
}
.psm-section-card {
background: #fff; border: 1px solid var(--rule); border-radius: 8px;
overflow: hidden;
transition: border-color .15s, opacity .15s;
}
.psm-section-card[open] { border-color: var(--accent); }
.psm-section-card.is-off { opacity: 0.55; border-color: var(--rule); }
.psm-section-card summary {
list-style: none;
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; cursor: pointer;
font-size: 13px;
}
.psm-section-card summary::-webkit-details-marker { display: none; }
.psm-section-card .psm-section-label {
flex: 1; font-weight: 700; color: var(--navy);
}
.psm-section-card .psm-sub-count {
font-size: 10.5px; color: var(--muted);
background: var(--soft); padding: 1px 8px; border-radius: 999px;
}
.psm-section-card .psm-expand { color: var(--muted); transition: transform .12s; }
.psm-section-card[open] .psm-expand { transform: rotate(180deg); }
.psm-sub-list {
padding: 4px 12px 12px 32px;
background: #f9fbfb;
display: grid; grid-template-columns: 1fr; gap: 2px;
border-top: 1px solid var(--rule);
}
.psm-sub-item {
display: flex; align-items: center; gap: 6px;
padding: 4px 6px; font-size: 12.5px; cursor: pointer;
border-radius: 4px;
}
.psm-sub-item:hover { background: var(--accent-soft); }
.psm-sub-item code {
margin-left: auto; font-size: 10px;
color: var(--muted); background: var(--soft);
padding: 0 5px; border-radius: 4px;
}
.psm-section-card.is-off .psm-sub-item { pointer-events: none; }
.psm-foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 20px; border-top: 1px solid var(--rule);
background: #fafbfc;
}
.psm-progress {
padding: 22px 24px; text-align: center;
}
.psm-progress-bar {
height: 8px; background: var(--soft); border-radius: 999px; overflow: hidden;
margin-bottom: 10px;
}
.psm-progress-fill {
height: 100%; width: 0%;
background: linear-gradient(90deg, var(--accent), var(--navy));
border-radius: 999px;
transition: width .25s;
}
.psm-progress-label {
font-size: 12.5px; color: var(--muted); font-weight: 600;
}
.psm-success {
padding: 24px 24px 22px; text-align: center;
}
.psm-success-icon { font-size: 42px; margin-bottom: 6px; }
.psm-success h4 { margin: 0 0 6px; font-size: 17px; color: var(--navy-deep); }
.psm-success p { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.psm-error {
padding: 22px 24px; text-align: center;
}
.psm-error-icon { font-size: 36px; margin-bottom: 6px; }
.psm-error-msg {
font-size: 13px; color: var(--bad, #cd2553);
background: var(--bad-soft, #fde8ee);
padding: 8px 12px; border-radius: 8px;
margin: 0 0 12px;
}
.mention { color: var(--slack-link); font-weight: 600; }
/* ===== Feed ===== */
.feed { max-width: 820px; margin: 0 auto; } /* wider, but stays readable */
.feed-card {
background: #fff; border: 1px solid var(--rule); border-radius: 12px;
padding: 18px 22px; margin-bottom: 14px;
}
.feed-card.pinned { border-color: var(--accent); background: linear-gradient(0deg, var(--accent-soft) 0%, #fff 12%); }
.feed-card.kind-birthday, .feed-card.kind-holiday {
background: linear-gradient(135deg, #fff8e5 0%, #fff 100%);
border-color: var(--warn);
}
.feed-card .head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
}
.feed-card .head .who { font-weight: 700; }
.feed-card .head .when { color: var(--muted); font-size: 11px; }
.feed-card .title { font-size: 17px; font-weight: 700; margin: 4px 0 8px; }
.feed-card .body { font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.feed-card .reactions {
margin-top: 10px;
display: flex; gap: 4px; flex-wrap: wrap;
}
.feed-card .reaction {
background: var(--soft); border: 1px solid var(--rule);
padding: 2px 8px; border-radius: 999px;
font-size: 12px; cursor: pointer;
}
.feed-card .reaction.mine { background: var(--accent-soft); border-color: var(--accent); }
.feed-card .react-bar {
margin-top: 6px; display: flex; gap: 2px;
}
.feed-card .react-bar button {
background: transparent; border: 1px solid transparent; padding: 4px;
font-size: 16px; cursor: pointer; border-radius: 6px;
}
.feed-card .react-bar button:hover { background: var(--soft); }
.feed-card .comments {
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.feed-comment {
display: flex; gap: 8px; margin-bottom: 8px;
font-size: 13px;
}
.feed-comment .who { font-weight: 700; }
.feed-comment .body { color: var(--ink); }
.feed-comment.indent { margin-left: 32px; }
.feed-card .pin-badge {
display: inline-block;
background: var(--accent); color: var(--navy-deep);
font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
letter-spacing: 0.08em; text-transform: uppercase;
}
/* ===========================================================================
* v4.14 — Magazine-grid feed (feed.php redesign)
* Class names are scoped (.feed-tile, .feed-rail-v2, etc.) so the old
* .feed-card / .rail-card rules above stay untouched for index.php.
* =========================================================================== */
.feed-section { padding-top: 8px; padding-bottom: 14px; }
.feed-v2-container { max-width: 1320px; padding-left: 14px; padding-right: 14px; }
.feed-top {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 16px; margin: 4px 0 16px;
flex-wrap: wrap;
}
.feed-title {
margin: 0; font-size: 28px; font-weight: 800;
background: linear-gradient(120deg, var(--navy-deep), var(--accent));
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.feed-subtitle {
margin: 6px 0 0; display: flex; gap: 8px; flex-wrap: wrap;
}
.feed-stat-pill {
display: inline-flex; align-items: center; gap: 5px;
background: #fff; border: 1px solid var(--rule);
padding: 3px 10px; border-radius: 999px;
font-size: 12px; color: var(--ink);
box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.feed-stat-pill .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--muted);
}
.feed-stat-pill .dot-accent { background: var(--accent); }
.feed-stat-pill .dot-warm { background: #ff8a4c; }
.feed-filter-chips {
display: flex; gap: 6px; flex-wrap: wrap;
}
.feed-filter-chips .chip {
background: #fff; border: 1px solid var(--rule);
padding: 6px 14px; border-radius: 999px;
font-size: 13px; font-weight: 600; cursor: pointer;
color: var(--navy);
transition: background .12s, border-color .12s, transform .08s;
}
.feed-filter-chips .chip:hover { border-color: var(--accent); }
.feed-filter-chips .chip.active {
background: var(--accent); color: #fff; border-color: var(--accent);
box-shadow: 0 2px 8px rgba(38, 180, 151, .35);
}
.feed-grid-v2 {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 22px;
align-items: flex-start;
}
@media (max-width: 1080px) {
.feed-grid-v2 { grid-template-columns: 1fr; }
.feed-rail-v2 { order: 2; }
.feed-main { order: 1; }
}
/* ---------- Avatars ---------- */
.feed-av,
.feed-av-sm,
.feed-av-xs {
border-radius: 50%;
color: #fff; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; overflow: hidden;
}
.feed-av { width: 40px; height: 40px; font-size: 13px; }
.feed-av-sm { width: 32px; height: 32px; font-size: 11px; }
.feed-av-xs { width: 26px; height: 26px; font-size: 10px; }
.feed-av img, .feed-av-sm img, .feed-av-xs img {
width: 100%; height: 100%; object-fit: cover;
}
/* ---------- Hero strip (pinned announcements) ---------- */
.feed-hero-strip {
display: grid; gap: 14px; margin-bottom: 18px;
}
.feed-hero-card {
position: relative; overflow: hidden;
padding: 22px 26px; border-radius: 16px;
color: #fff;
background: linear-gradient(120deg, #1f424d 0%, #2e5e6f 40%, #26b497 110%);
box-shadow: 0 12px 30px rgba(31, 66, 77, .28);
}
.feed-hero-card::before {
content: ''; position: absolute; top: -40%; right: -10%;
width: 320px; height: 320px;
background: radial-gradient(closest-side, rgba(255,255,255,0.18), transparent 70%);
pointer-events: none;
}
.hero-eyebrow {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
font-size: 11px; opacity: 0.95;
}
.hero-badge {
background: rgba(255,255,255,0.18); color: #fff;
padding: 3px 12px; border-radius: 999px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.04em;
}
.hero-time { opacity: 0.8; }
.hero-title { margin: 6px 0 8px; font-size: 22px; font-weight: 800; line-height: 1.25; }
.hero-body { font-size: 15px; line-height: 1.55; opacity: 0.96; white-space: pre-wrap; }
.hero-foot {
display: flex; align-items: center; gap: 10px;
margin-top: 16px; font-size: 12px;
}
.hero-author { font-weight: 700; }
.hero-meta { opacity: 0.75; }
.hero-jump {
margin-left: auto; color: #fff;
background: rgba(255,255,255,0.18);
padding: 4px 12px; border-radius: 999px;
text-decoration: none; font-weight: 600;
font-size: 12px;
}
.hero-jump:hover { background: rgba(255,255,255,0.3); }
/* ---------- Composer ---------- */
.feed-composer {
background: #fff; border: 1px solid var(--rule);
border-radius: 14px; padding: 12px 16px;
margin-bottom: 18px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.composer-head {
display: flex; align-items: center; gap: 10px;
}
.composer-head input[type=text] {
flex: 1; border: 1px solid var(--rule); border-radius: 999px;
padding: 10px 16px;
background: var(--soft); color: var(--ink);
font-size: 14px; cursor: pointer;
}
.composer-head input[type=text]:hover { background: #ecf3f1; }
.composer-form { margin-top: 12px; }
.composer-title {
width: 100%; box-sizing: border-box;
border: 1px solid var(--rule); border-radius: 8px;
padding: 8px 12px; margin-bottom: 8px;
font-family: inherit; font-size: 14px;
}
.composer-body {
width: 100%; box-sizing: border-box;
border: 1px solid var(--rule); border-radius: 10px;
padding: 10px 14px; font-family: inherit; font-size: 14.5px;
line-height: 1.5; resize: vertical; min-height: 80px;
}
.composer-body:focus, .composer-title:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.composer-tools {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-top: 8px;
}
.tool-pill {
display: inline-flex; align-items: center; gap: 5px;
background: var(--soft); border: 1px solid var(--rule);
padding: 5px 12px; border-radius: 999px;
font-size: 12px; font-weight: 600; cursor: pointer;
color: var(--navy);
}
.tool-pill:hover { background: #ecf3f1; }
.tool-pill input[type=file] { display: none; }
.tool-pill input[type=checkbox] { margin: 0; }
.composer-char {
font-size: 11px; color: var(--muted);
margin-left: 4px;
}
.composer-spacer { flex: 1; }
.composer-file-preview {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; margin-top: 8px;
background: var(--soft); border-radius: 8px;
font-size: 12px;
}
.composer-file-preview img {
width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
}
.composer-file-preview .prev-clear {
background: transparent; border: none; cursor: pointer;
color: var(--muted); margin-left: auto; font-size: 14px;
}
.composer-emoji-picker {
display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
padding: 8px;
background: #fff; border: 1px solid var(--rule);
border-radius: 10px;
margin-top: 8px;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.composer-emoji-picker span {
font-size: 18px; padding: 4px; text-align: center;
border-radius: 6px; cursor: pointer;
}
.composer-emoji-picker span:hover { background: var(--soft); }
/* ---------- Masonry tiles ---------- */
.feed-masonry {
column-count: 2; column-gap: 16px;
}
@media (max-width: 760px) {
.feed-masonry { column-count: 1; }
}
.feed-tile {
break-inside: avoid;
background: #fff; border: 1px solid var(--rule);
border-radius: 14px; padding: 16px 18px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
transition: transform .15s, box-shadow .15s, border-color .15s;
position: relative;
}
.feed-tile:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.feed-tile.is-bookmarked { border-color: var(--accent); }
/* Pinned announcement tile — accent border + small badge ribbon */
.feed-tile.is-pinned {
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(38, 180, 151, .14);
}
.tile-announce-badge {
position: relative;
display: inline-block;
background: linear-gradient(135deg, var(--navy-deep), var(--accent));
color: #fff;
padding: 4px 12px; border-radius: 999px;
font-size: 11px; font-weight: 800;
letter-spacing: 0.04em;
margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(38, 180, 151, .25);
}
/* Birthday / Holiday auto-cards — celebratory backgrounds */
.feed-tile.is-auto {
background: linear-gradient(135deg, #fffaf3 0%, #fdf2e9 60%, #ffe6d1 100%);
border-color: #fad9a6;
overflow: hidden;
}
.feed-tile.kind-holiday {
background: linear-gradient(135deg, #e6f7f3 0%, #d5f2ea 60%, #b8eadd 100%);
border-color: #9bdac7;
}
.feed-tile.is-auto .tile-celebrate {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(circle at 12% 18%, rgba(255,202,138,.6) 0 4px, transparent 5px),
radial-gradient(circle at 88% 22%, rgba(255,182,202,.6) 0 3px, transparent 4px),
radial-gradient(circle at 22% 78%, rgba(166,224,193,.7) 0 3px, transparent 4px),
radial-gradient(circle at 78% 82%, rgba(202,182,255,.65) 0 4px, transparent 5px),
radial-gradient(circle at 50% 50%, rgba(255,225,160,.45) 0 5px, transparent 6px);
opacity: 0.6;
}
.feed-tile.kind-holiday .tile-celebrate {
background:
radial-gradient(circle at 14% 20%, rgba(38,180,151,.5) 0 3px, transparent 4px),
radial-gradient(circle at 90% 24%, rgba(46,94,111,.5) 0 4px, transparent 5px),
radial-gradient(circle at 24% 80%, rgba(38,180,151,.4) 0 4px, transparent 5px),
radial-gradient(circle at 82% 76%, rgba(31,66,77,.4) 0 3px, transparent 4px);
opacity: 0.6;
}
.tile-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
position: relative; /* above .tile-celebrate */
}
.tile-author {
display: flex; align-items: center; gap: 10px; min-width: 0;
}
.tile-who { font-weight: 700; font-size: 14px; color: var(--ink); }
.tile-when { font-size: 11px; color: var(--muted); }
.tile-head-actions { display: flex; gap: 2px; align-items: center; }
.tile-icon-btn {
background: transparent; border: none; cursor: pointer;
width: 30px; height: 30px; border-radius: 6px;
font-size: 15px; color: var(--muted);
display: inline-flex; align-items: center; justify-content: center;
}
.tile-icon-btn:hover { background: var(--soft); color: var(--ink); }
.tile-del-form { margin: 0; }
.act-bookmark .bm-on { display: none; }
.act-bookmark .bm-off { display: inline; }
.feed-tile.is-bookmarked .act-bookmark { color: var(--accent); }
.feed-tile.is-bookmarked .act-bookmark .bm-on { display: inline; }
.feed-tile.is-bookmarked .act-bookmark .bm-off { display: none; }
.tile-title {
font-size: 17px; font-weight: 800; margin: 4px 0 8px;
color: var(--navy-deep); line-height: 1.3;
position: relative;
}
.tile-body {
font-size: 14px; line-height: 1.6;
white-space: pre-wrap; word-wrap: break-word; color: var(--ink);
position: relative;
}
.tile-img {
display: block; margin-top: 12px; border-radius: 10px; overflow: hidden;
border: 1px solid var(--rule);
position: relative;
}
.tile-img img {
width: 100%; max-height: 480px; object-fit: cover; display: block;
}
.tile-attachment {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 10px;
background: var(--soft); border: 1px solid var(--rule);
padding: 8px 12px; border-radius: 10px;
font-size: 13px; text-decoration: none; color: var(--navy);
position: relative;
}
.tile-attachment:hover { background: var(--accent-soft); border-color: var(--accent); }
.att-name { font-weight: 600; }
.att-size { color: var(--muted); font-size: 11px; }
/* HBD wish button on birthday auto-cards */
.hbd-btn {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 12px;
background: linear-gradient(135deg, #ff8a4c, #ff5783);
color: #fff; border: none;
padding: 7px 16px; border-radius: 999px;
font-size: 13px; font-weight: 700; cursor: pointer;
box-shadow: 0 4px 14px rgba(255, 87, 131, .35);
position: relative;
transition: transform .1s, box-shadow .1s;
}
.hbd-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255, 87, 131, .45); }
.hbd-btn.sent { background: var(--accent); box-shadow: none; cursor: default; }
/* Reactions */
.tile-reactions {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 12px;
position: relative;
}
.rx-pill {
display: inline-flex; align-items: center; gap: 4px;
background: #fff; border: 1px solid var(--rule);
padding: 2px 10px; border-radius: 999px;
font-size: 13px; cursor: pointer;
color: var(--ink);
transition: transform .08s, border-color .12s, background .12s;
}
.rx-pill:hover { border-color: var(--accent); transform: translateY(-1px); }
.rx-pill.mine {
background: var(--accent-soft); border-color: var(--accent); color: var(--navy-deep);
font-weight: 700;
}
.rx-pill .rx-n { font-weight: 700; font-size: 11px; }
.rx-pill.animate { animation: rx-bounce 0.4s ease-out; }
@keyframes rx-bounce {
0% { transform: scale(0.7); }
60% { transform: scale(1.18); }
100% { transform: scale(1.0); }
}
.tile-reactions .rx-add {
display: inline-flex; align-items: center; gap: 4px;
background: var(--soft); border: 1px solid var(--rule);
padding: 3px 12px; border-radius: 999px;
font-size: 14px; line-height: 1; cursor: pointer; color: var(--navy);
font-weight: 700;
opacity: 1; /* override the chat-rule opacity rule, just in case */
transition: background .12s, border-color .12s, color .12s;
}
.tile-reactions .rx-add::after {
content: 'React'; font-size: 11px; font-weight: 600;
color: var(--muted); margin-left: 2px;
}
.tile-reactions .rx-add:hover {
background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.tile-reactions .rx-add:hover::after { color: var(--accent); }
/* Reaction tooltip */
.rx-tooltip {
position: absolute; z-index: 60;
background: #1a1a1a; color: #fff;
padding: 6px 10px; border-radius: 6px;
font-size: 12px; max-width: 320px;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
pointer-events: none;
}
/* Quick-react popover (reused look) — small inline pill */
.qr-popover {
position: absolute; z-index: 70;
background: #fff; border: 1px solid var(--rule);
border-radius: 999px; padding: 4px;
display: flex; gap: 2px;
box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.qr-popover button {
background: transparent; border: none;
width: 32px; height: 32px; font-size: 18px;
border-radius: 50%; cursor: pointer;
}
.qr-popover button:hover { background: var(--soft); }
/* Full-grid variant — used by the feed + chat for the React popover.
* Top row = 8 frequent emojis, grid below = full library (64). */
.qr-popover-full {
flex-direction: column; align-items: stretch;
border-radius: 14px; padding: 8px;
width: 320px; max-width: calc(100vw - 20px);
gap: 6px;
}
.qr-popover-full .qr-quick-row {
display: flex; gap: 2px;
padding-bottom: 6px;
border-bottom: 1px solid var(--rule);
}
.qr-popover-full .qr-quick-row button {
width: 34px; height: 34px; font-size: 19px;
}
.qr-popover-full .qr-grid {
display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
max-height: 240px; overflow-y: auto;
padding-top: 4px;
}
.qr-popover-full .qr-grid button {
width: 34px; height: 34px; font-size: 18px;
border-radius: 8px;
}
/* Tile foot */
.tile-foot {
display: flex; align-items: center; gap: 8px;
margin-top: 10px; padding-top: 10px;
border-top: 1px solid var(--rule);
font-size: 12px; color: var(--muted);
position: relative;
}
.tile-action {
background: transparent; border: none;
display: inline-flex; align-items: center; gap: 4px;
color: var(--muted); cursor: pointer; font-size: 12px;
}
.tile-action:hover { color: var(--accent); }
.tile-count { font-weight: 700; color: var(--ink); }
.tile-foot-sep { color: var(--rule); }
/* Comments */
.tile-comments {
margin-top: 10px; padding-top: 10px;
border-top: 1px solid var(--rule);
position: relative;
}
.tile-comment {
display: flex; gap: 8px; margin-bottom: 6px;
}
.tc-bubble {
background: var(--soft); padding: 7px 12px;
border-radius: 12px;
font-size: 13px; line-height: 1.45;
flex: 1; min-width: 0;
}
.tc-head {
display: flex; align-items: baseline; gap: 6px;
margin-bottom: 1px;
}
.tc-who { font-weight: 700; color: var(--navy); }
.tc-when { font-size: 11px; color: var(--muted); }
.tc-body { color: var(--ink); word-wrap: break-word; }
.show-more-comments {
background: transparent; border: none; cursor: pointer;
color: var(--accent); font-size: 12px; font-weight: 600;
padding: 4px 0;
}
.tile-comment-form {
display: flex; gap: 4px; align-items: center;
margin-top: 6px;
}
.tile-comment-form input[type=text] {
flex: 1;
border: 1px solid var(--rule); border-radius: 999px;
padding: 6px 12px; font-size: 12.5px;
background: #fff;
height: 30px;
}
.tile-comment-form input[type=text]:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.comment-send-btn {
background: transparent; color: var(--accent); border: none;
width: 30px; height: 30px; border-radius: 50%;
font-size: 15px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .12s;
}
.comment-send-btn:hover { background: var(--accent-soft); }
/* Empty state */
.feed-empty {
background: #fff; border: 1px dashed var(--rule);
border-radius: 14px; padding: 40px 20px;
text-align: center; color: var(--muted);
}
.feed-empty .empty-icon { font-size: 42px; margin-bottom: 8px; }
.feed-empty h3 { margin: 0 0 4px; color: var(--navy-deep); font-size: 18px; }
/* ---------- Right rail v2 ---------- */
.feed-rail-v2 { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 70px; }
.rail-card-v2 {
background: #fff; border: 1px solid var(--rule);
border-radius: 12px; padding: 14px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.rail-card-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px;
}
.rail-card-head h3 {
margin: 0; font-size: 13px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--navy);
}
.rail-card-head .rail-icon {
width: 26px; height: 26px; border-radius: 8px;
background: var(--accent-soft); color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px;
}
.rail-card-v2 ul { list-style: none; padding: 0; margin: 0; }
.rail-card-v2 li {
display: flex; align-items: center; gap: 8px;
padding: 6px 0; border-bottom: 1px solid var(--rule);
font-size: 13px;
}
.rail-card-v2 li:last-child { border-bottom: none; }
.rail-name { flex: 1; font-weight: 600; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-date { font-size: 11px; color: var(--muted); }
.rail-substatus { font-size: 11px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-dot {
width: 8px; height: 8px; border-radius: 50%;
}
.rail-bday .rail-icon { background: #ffe5d6; color: #c25a1e; }
.rail-hol .rail-icon { background: #e3eef1; color: var(--navy); }
.rail-status .rail-icon { background: #ddf3eb; color: var(--accent); }
.rail-out .rail-icon { background: #fef0d6; color: #a76b16; }
.rail-link {
display: block; padding: 8px 4px;
text-decoration: none; color: var(--ink); font-size: 13px;
border-bottom: 1px solid var(--rule);
}
.rail-link:last-child { border-bottom: none; }
.rail-link:hover { color: var(--accent); }
/* ===== Calendar ===== */
.cal-shell { background: #fff; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.cal-head {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 20px; border-bottom: 1px solid var(--rule);
}
.cal-head h2 { margin: 0; font-size: 18px; }
.cal-out-today {
margin: 0 20px 0;
padding: 10px 14px;
background: var(--warn-soft); border-left: 4px solid var(--warn);
font-size: 13px;
}
.cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr);
border-top: 1px solid var(--rule);
}
.cal-grid .dow {
background: var(--soft);
padding: 8px 10px;
font-size: 11px; font-weight: 700; text-transform: uppercase;
color: var(--muted); letter-spacing: 0.1em;
border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.cal-day {
min-height: 90px;
border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
padding: 6px 8px;
font-size: 12px;
position: relative;
}
.cal-day.other { background: #fafbfc; color: #b0b8c0; }
.cal-day.today { background: #fffcef; }
.cal-day .num { font-weight: 700; font-size: 13px; }
.cal-day .event {
margin-top: 3px;
padding: 2px 6px; border-radius: 4px;
font-size: 10px; font-weight: 600;
background: var(--accent-soft); color: var(--navy-deep);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-day .event.holiday { background: var(--warn-soft); color: #8a6500; }
.cal-day .event.birthday { background: #fce7f3; color: #831843; }
/* ===== Knowledge Base ===== */
.kb-grid {
display: grid; grid-template-columns: 240px 1fr;
gap: 24px;
}
.kb-cats { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 12px; }
.kb-cats a {
display: block; padding: 8px 12px; border-radius: 6px;
color: var(--ink); text-decoration: none; font-size: 13px;
}
.kb-cats a:hover { background: var(--soft); }
.kb-cats a.active { background: var(--accent-soft); color: var(--navy-deep); font-weight: 700; }
.kb-article {
background: #fff; border: 1px solid var(--rule); border-radius: 10px;
padding: 14px 18px; margin-bottom: 10px;
}
.kb-article h3 { margin: 0 0 6px; font-size: 16px; }
.kb-article h3 a { color: var(--ink); text-decoration: none; }
.kb-article h3 a:hover { color: var(--accent); }
.kb-article .meta { font-size: 11px; color: var(--muted); }
.kb-article .tags { margin-top: 6px; }
.kb-article .tag {
display: inline-block; background: var(--soft); border: 1px solid var(--rule);
padding: 1px 8px; border-radius: 999px;
font-size: 10px; color: var(--navy);
margin-right: 4px;
}
/* ===== Knowledge Base — v2 redesign ===== */
.kb-cats-v2 { padding: 8px; }
.kb-cat-row { display: flex; align-items: center; gap: 4px; }
.kb-cat-link {
flex: 1; display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: 8px;
text-decoration: none; color: var(--ink); font-size: 13px;
transition: background .15s ease;
}
.kb-cat-link:hover { background: var(--soft); }
.kb-cat-link.active {
background: var(--accent-soft); color: var(--navy-deep);
font-weight: 700;
}
.kb-cat-dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
}
.kb-cat-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-cat-count {
font-size: 11px; color: var(--muted);
background: var(--soft); padding: 1px 8px; border-radius: 10px;
min-width: 22px; text-align: center; font-weight: 600;
}
.kb-cat-link.active .kb-cat-count { background: #fff; color: var(--accent); }
.kb-cat-del { margin: 0; }
.kb-cat-del button {
background: transparent; border: none; cursor: pointer;
color: var(--muted); font-size: 12px; padding: 4px 6px;
border-radius: 4px;
}
.kb-cat-del button:hover { color: var(--bad); background: var(--bad-soft); }
.kb-cat-new {
margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 8px;
}
.kb-cat-new summary {
cursor: pointer; font-size: 12px; color: var(--accent);
padding: 6px 10px; font-weight: 600; list-style: none;
}
.kb-cat-new summary::-webkit-details-marker { display: none; }
.kb-cat-new form { padding: 6px 10px; }
.kb-cat-new input[type=text] {
width: 100%; padding: 6px 10px; border: 1px solid var(--rule);
border-radius: 6px; font-size: 12px; margin-bottom: 6px;
}
.kb-cat-new button { width: 100%; }
.kb-main { min-width: 0; }
.kb-search {
display: flex; gap: 8px; margin-bottom: 14px;
}
.kb-search input[type=text] {
flex: 1; padding: 10px 14px;
border: 1px solid var(--rule); border-radius: 8px;
font-size: 14px; background: #fff;
}
.kb-search input[type=text]:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.kb-filter-strip {
background: var(--accent-soft); border: 1px solid var(--accent);
padding: 8px 12px; border-radius: 8px; margin-bottom: 14px;
font-size: 12px; color: var(--navy-deep);
}
.kb-filter-strip a { color: var(--accent); font-weight: 600; }
.kb-row-2col {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
margin-bottom: 18px;
}
.kb-mini-card {
background: #fff; border: 1px solid var(--rule);
border-radius: 10px; padding: 14px 16px;
}
.kb-mini-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 10px;
}
.kb-mini-head h4 {
margin: 0; font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--navy);
}
.kb-mini-icon {
width: 22px; height: 22px; border-radius: 6px;
background: var(--accent-soft); color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
}
.kb-mini-list { list-style: none; padding: 0; margin: 0; }
.kb-mini-list li {
display: flex; align-items: center; gap: 8px;
padding: 6px 0; border-bottom: 1px solid var(--rule);
font-size: 13px;
}
.kb-mini-list li:last-child { border-bottom: none; }
.kb-mini-dot {
width: 6px; height: 6px; border-radius: 50%;
flex-shrink: 0;
}
.kb-mini-list li a {
flex: 1; color: var(--ink); text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-mini-list li a:hover { color: var(--accent); }
.kb-mini-meta { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.kb-empty {
background: #fff; border: 1px dashed var(--rule);
border-radius: 12px; padding: 40px 20px;
text-align: center;
}
.kb-empty-icon { font-size: 36px; margin-bottom: 8px; }
.kb-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--navy-deep); }
.kb-empty p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.kb-card-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 900px) {
.kb-card-grid { grid-template-columns: 1fr; }
.kb-row-2col { grid-template-columns: 1fr; }
}
.kb-card {
background: #fff; border: 1px solid var(--rule);
border-radius: 12px; padding: 16px 18px;
text-decoration: none; color: var(--ink);
display: flex; flex-direction: column; gap: 8px;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kb-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
border-color: var(--accent);
}
.kb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kb-card-cat {
display: inline-block; padding: 3px 10px;
border-radius: 999px; font-size: 10px; font-weight: 700;
color: #fff; text-transform: uppercase; letter-spacing: 0.06em;
}
.kb-card-badge {
font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
padding: 3px 8px; border-radius: 4px;
text-transform: uppercase;
}
.kb-card-badge.new {
background: #dcfce7; color: #166534;
}
.kb-card-badge.updated {
background: #fef3c7; color: #92400e;
}
.kb-card-title {
margin: 4px 0 0; font-size: 16px; font-weight: 700;
color: var(--navy-deep); line-height: 1.3;
}
.kb-card:hover .kb-card-title { color: var(--accent); }
.kb-card-excerpt {
font-size: 13px; color: var(--muted);
line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.kb-card-foot {
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--muted);
margin-top: auto; padding-top: 6px;
border-top: 1px solid var(--rule);
}
.kb-foot-author { font-weight: 600; color: var(--navy); }
.kb-foot-dot { color: var(--muted); }
.kb-foot-chips { margin-left: auto; display: flex; gap: 6px; }
.kb-chip {
background: var(--soft); padding: 2px 8px;
border-radius: 999px; font-size: 10px; font-weight: 600;
color: var(--navy);
}
.kb-card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.kb-card-tag {
font-size: 10px; color: var(--accent); font-weight: 600;
}
.kb-card-tag.muted { color: var(--muted); }
/* Article page enhancements (kb_article.php) */
.kb-article-layout {
display: grid; grid-template-columns: 220px 1fr 240px;
gap: 24px;
}
@media (max-width: 1100px) {
.kb-article-layout { grid-template-columns: 1fr; }
.kb-toc, .kb-related-side { display: none; }
}
.kb-toc {
position: sticky; top: 80px; align-self: start;
background: #fff; border: 1px solid var(--rule);
border-radius: 10px; padding: 14px;
max-height: calc(100vh - 100px); overflow-y: auto;
}
.kb-toc h5 {
margin: 0 0 8px; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted); font-weight: 700;
}
.kb-toc ul { list-style: none; padding: 0; margin: 0; }
.kb-toc li { margin: 0; padding: 0; }
.kb-toc a {
display: block; padding: 5px 8px; border-radius: 4px;
text-decoration: none; color: var(--ink); font-size: 12px;
line-height: 1.4;
border-left: 2px solid transparent;
}
.kb-toc a:hover { background: var(--soft); color: var(--accent); }
.kb-toc a.h3 { padding-left: 18px; font-size: 11px; color: var(--muted); }
.kb-toc a.active { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
.kb-article-meta {
display: flex; align-items: center; gap: 10px;
font-size: 12px; color: var(--muted);
padding: 10px 0; border-bottom: 1px solid var(--rule); margin-bottom: 14px;
flex-wrap: wrap;
}
.kb-article-meta .kb-card-cat { color: #fff; }
.kb-article-meta .kb-chip { background: var(--soft); }
.kb-feedback {
background: #fff; border: 1px solid var(--rule);
border-radius: 10px; padding: 18px 20px;
text-align: center; margin: 30px 0 20px;
}
.kb-feedback h4 { margin: 0 0 8px; font-size: 14px; color: var(--navy-deep); }
.kb-feedback p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.kb-feedback-buttons { display: flex; justify-content: center; gap: 10px; }
.kb-feedback-btn {
background: var(--soft); border: 1px solid var(--rule);
border-radius: 8px; padding: 8px 16px;
font-size: 13px; cursor: pointer; color: var(--ink);
display: inline-flex; align-items: center; gap: 6px;
transition: all .15s ease;
}
.kb-feedback-btn:hover {
background: var(--accent-soft); border-color: var(--accent);
color: var(--accent);
}
.kb-feedback-btn.voted {
background: var(--accent); border-color: var(--accent); color: #fff;
}
.kb-feedback-thanks {
color: var(--good); font-size: 13px; font-weight: 600;
display: none;
}
.kb-feedback.done .kb-feedback-thanks { display: block; }
.kb-feedback.done .kb-feedback-buttons { display: none; }
.kb-related-side {
position: sticky; top: 80px; align-self: start;
background: #fff; border: 1px solid var(--rule);
border-radius: 10px; padding: 14px;
}
.kb-related-side h5 {
margin: 0 0 8px; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted); font-weight: 700;
}
.kb-related-list { display: flex; flex-direction: column; gap: 8px; }
.kb-related-item {
display: block; padding: 8px 10px;
background: var(--soft); border-radius: 6px;
text-decoration: none; color: var(--ink);
font-size: 12px; line-height: 1.4;
border-left: 3px solid transparent;
}
.kb-related-item:hover {
background: var(--accent-soft); border-left-color: var(--accent);
}
.kb-related-cat {
display: block; font-size: 10px; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.06em;
font-weight: 600; margin-bottom: 2px;
}
/* ===== Leaves ===== */
.balance-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
.balance-card {
background: #fff; border: 1px solid var(--rule); border-radius: 10px;
padding: 14px;
border-top: 3px solid var(--accent);
}
.balance-card .label {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted); font-weight: 700; margin-bottom: 4px;
}
.balance-card .num {
font-size: 24px; font-weight: 800;
}
.balance-card .num small { font-size: 12px; color: var(--muted); font-weight: 600; }
.leave-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.leave-row .type-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
vertical-align: middle;
}
.leave-row .status {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
padding: 2px 8px; border-radius: 999px; font-weight: 700;
}
.leave-row .status.pending { background: var(--warn-soft); color: #8a6500; }
.leave-row .status.approved { background: var(--ok-soft); color: var(--ok); }
.leave-row .status.rejected { background: var(--danger-soft); color: var(--danger); }
.leave-row .status.cancelled { background: var(--soft); color: var(--muted); }
/* ===== Search results ===== */
.search-results .src-section {
margin-bottom: 22px;
}
.search-results .src-section h3 {
font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--muted); font-weight: 700;
border-bottom: 1px solid var(--rule); padding-bottom: 6px;
}
.search-result {
padding: 10px 4px; border-bottom: 1px solid var(--rule);
}
.search-result a { color: var(--navy); font-weight: 600; text-decoration: none; }
.search-result a:hover { color: var(--accent); }
.search-result .snippet { font-size: 13px; color: var(--muted); margin-top: 2px; }
.search-result mark { background: #fff5b8; color: inherit; padding: 0 2px; border-radius: 2px; }
/* =======================================================================
* v4: Inbox (mini Gmail client)
* ======================================================================= */
.inbox-shell {
display: grid;
grid-template-columns: 200px 320px 1fr;
border: 1px solid var(--rule); border-radius: 10px;
overflow: hidden; background: #fff;
height: 75vh; min-height: 560px;
}
.inbox-rail, .inbox-list {
border-right: 1px solid var(--rule);
display: flex; flex-direction: column; min-height: 0;
}
.inbox-rail .list, .inbox-list .list { flex: 1; overflow-y: auto; }
.inbox-rail .chat-item { border-left-width: 4px; }
.inbox-list .thread-row {
display: block;
padding: 10px 14px;
border-bottom: 1px solid var(--rule);
text-decoration: none;
color: var(--ink);
font-size: 13px;
}
.inbox-list .thread-row:hover { background: #f7f9fa; }
.inbox-list .thread-row.unread { background: #f2faf7; }
.inbox-list .thread-row.unread .from,
.inbox-list .thread-row.unread .subject { font-weight: 700; }
.inbox-list .thread-row.active { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.inbox-list .thread-row .from { font-size: 13px; }
.inbox-list .thread-row .subject { font-size: 13px; margin: 1px 0; }
.inbox-list .thread-row .snippet { color: var(--muted); font-size: 11px; }
.inbox-list .thread-row .meta { color: var(--muted); font-size: 10px; margin-top: 3px; }
.inbox-pane {
display: flex; flex-direction: column; min-height: 0;
}
@media (max-width: 900px) {
.inbox-shell { grid-template-columns: 1fr; height: auto; }
.inbox-rail, .inbox-list { border-right: none; border-bottom: 1px solid var(--rule); }
}
/* =======================================================================
* v4.1: Gmail-style inbox layout (replaces v4 three-pane shell)
* ======================================================================= */
/* Top bar with account dropdown + actions */
.inbox-topbar {
display: flex; gap: 14px; align-items: flex-end;
margin-bottom: 16px; flex-wrap: wrap;
}
.inbox-topbar-actions {
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
margin-left: auto;
}
/* Thread list (Gmail-style stacked rows) */
.thread-list {
background: #fff; border: 1px solid var(--rule); border-radius: 10px;
overflow: hidden;
}
.gthread {
display: grid;
grid-template-columns: 14px 220px 1fr auto 90px;
gap: 10px;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--rule);
text-decoration: none; color: var(--ink);
font-size: 13px;
transition: background 0.08s;
}
.gthread:last-child { border-bottom: none; }
.gthread:hover { background: #f7f9fa; }
.gthread.unread { background: #f2faf7; font-weight: 600; }
.gthread.unread .from, .gthread.unread .subject { font-weight: 700; }
.gthread .dot {
width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.gthread .from {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gthread .subject {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--ink);
}
.gthread .subject .snippet { color: var(--muted); font-weight: 400; }
.gthread .icons { color: var(--muted); font-size: 11px; }
.gthread .icons .msg-count { margin-right: 6px; }
.gthread .date {
color: var(--muted); font-size: 11px;
text-align: right; white-space: nowrap;
}
@media (max-width: 720px) {
.gthread {
grid-template-columns: 10px 1fr auto;
grid-template-rows: auto auto;
gap: 4px 8px;
}
.gthread .from { grid-column: 2; grid-row: 1; }
.gthread .date { grid-column: 3; grid-row: 1; }
.gthread .subject { grid-column: 2 / span 2; grid-row: 2; font-size: 12px; }
.gthread .icons { display: none; }
}
/* Full-page thread view */
.thread-page {
background: #fff; border: 1px solid var(--rule); border-radius: 10px;
padding: 24px 26px;
}
.thread-msg {
border: 1px solid var(--rule); border-radius: 8px;
padding: 14px 18px;
margin-bottom: 12px;
background: #fff;
}
.thread-msg-head {
display: flex; justify-content: space-between; align-items: flex-start;
font-size: 13px;
margin-bottom: 10px;
}
.thread-msg-head .from-line { font-weight: 700; }
.thread-msg-head .to-line { color: var(--muted); font-size: 11px; }
.thread-msg-head .when-line { color: var(--muted); font-size: 11px; }
.thread-msg .attachments {
margin: 8px 0; display: flex; gap: 6px; flex-wrap: wrap;
}
.thread-msg-iframe {
width: 100%; min-height: 320px;
border: 1px solid var(--rule); border-radius: 6px;
}
.thread-msg-text {
font-family: inherit; white-space: pre-wrap; margin: 6px 0; font-size: 14px;
}
.thread-reply {
margin-top: 14px; padding-top: 18px;
border-top: 1px solid var(--rule);
}
/* =======================================================================
* v4.1: chat enhancements — delete-on-hover, wider shell, pin badge
* ======================================================================= */
.chat-shell { height: 78vh; min-height: 600px; } /* taller now that container is wider */
.chat-rail { min-width: 280px; }
.chat-msg .meta .msg-del-form {
display: inline-block; margin-left: 6px;
opacity: 0; transition: opacity 0.12s;
}
.chat-msg:hover .meta .msg-del-form { opacity: 1; }
.chat-msg .meta .msg-del-form button {
background: transparent; border: none; cursor: pointer;
color: var(--danger); font-size: 11px; padding: 0;
}
.chat-pane .pane-head {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 18px; border-bottom: 1px solid var(--rule);
}
/* =======================================================================
* v4.1: Facebook-inspired feed card refresh
* ======================================================================= */
.fb-avatar {
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(135deg, var(--navy) 0%, var(--accent) 100%);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
flex-shrink: 0;
}
.fb-avatar.fb-avatar-sm { width: 32px; height: 32px; font-size: 11px; }
.feed-card {
background: #fff;
border: 1px solid var(--rule);
border-radius: 14px;
padding: 16px 20px;
margin-bottom: 16px;
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.05);
transition: box-shadow 0.15s ease;
}
.feed-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.feed-card .head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 10px; margin-bottom: 12px;
}
.feed-card .head-user {
display: flex; align-items: center; gap: 10px;
}
.feed-card .head-user .who { font-weight: 700; color: var(--ink); font-size: 14px; }
.feed-card .head-user .when { color: var(--muted); font-size: 11px; margin-top: 1px; }
.feed-card .post-del-btn {
background: transparent; border: none; cursor: pointer;
color: var(--muted); font-size: 18px; padding: 4px 8px;
border-radius: 50%;
line-height: 1;
}
.feed-card .post-del-btn:hover { background: var(--soft); color: var(--danger); }
.feed-card .title { font-size: 18px; font-weight: 700; margin: 4px 0 8px; color: var(--ink); }
.feed-card .body { font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: var(--ink); }
.feed-card .reactions { margin-top: 12px; }
.feed-card .react-bar {
margin-top: 6px; padding-top: 10px;
border-top: 1px solid var(--rule);
display: flex; gap: 2px;
}
.feed-card .react-bar button { color: var(--muted); }
/* Comments */
.feed-card .comments {
margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule);
}
.feed-comment {
display: flex; gap: 10px;
margin-bottom: 10px;
align-items: flex-start;
}
.feed-comment.indent { margin-left: 42px; }
.feed-comment .comment-bubble {
flex: 1;
background: var(--soft);
padding: 8px 14px;
border-radius: 14px;
}
.feed-comment .comment-bubble .who { font-size: 12px; font-weight: 700; color: var(--ink); }
.feed-comment .comment-bubble .when { font-size: 10px; color: var(--muted); display:block; margin-top:4px; }
.feed-comment .comment-bubble div { font-size: 13px; color: var(--ink); }
.pin-badge {
display: inline-block;
background: var(--accent-soft); color: var(--navy-deep);
font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
letter-spacing: 0.06em; text-transform: uppercase;
}
/* =======================================================================
* v4.1: Inbox compose full-screen toggle
* ======================================================================= */
.compose-modal-inner.fullscreen {
max-width: 96vw !important;
width: 96vw !important;
max-height: 96vh !important;
height: 96vh !important;
display: flex; flex-direction: column;
}
.compose-modal-inner.fullscreen .ql-editor-mount {
min-height: 50vh !important;
max-height: none !important;
flex: 1;
}
/* KB body — handle Quill HTML output styling */
.kb-body img { max-width: 100%; height: auto; border-radius: 6px; }
.kb-body h1 { font-size: 22px; margin-top: 18px; }
.kb-body h2 { font-size: 18px; margin-top: 14px; }
.kb-body h3 { font-size: 16px; margin-top: 12px; }
.kb-body blockquote {
border-left: 4px solid var(--accent);
margin: 12px 0; padding: 8px 14px;
background: var(--soft); color: var(--ink);
}
.kb-body pre, .kb-body code {
background: var(--soft); padding: 2px 6px; border-radius: 4px;
font-family: ui-monospace, monospace; font-size: 13px;
}
.kb-body ul, .kb-body ol { padding-left: 24px; }
/* =======================================================================
* v4.2: dashboard tiles + dashboard-grid + feed-grid + kb dropzone
* ======================================================================= */
/* ===== Top launcher row — Daily Checks / Performance / Optimisation =====
Three big buttons above the stat tiles. Each is its own kind of jump:
- Daily Checks → opens the .dr-panel side widget
- Performance → direct link (1 account) or account picker
- Optimisation → same shape, but routes with ?focus=optimisation */
.dash-launchers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 18px;
}
@media (max-width: 900px) { .dash-launchers { grid-template-columns: 1fr; } }
.dash-launch {
display: flex; align-items: center; gap: 14px;
background: #fff;
border: 1px solid var(--rule);
border-radius: 12px;
padding: 16px 18px;
text-align: left;
text-decoration: none;
color: inherit;
font: inherit;
transition: border-color .15s, transform .12s, box-shadow .15s;
}
.dash-launch:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
cursor: pointer;
}
.dash-launch-daily { border-top: 3px solid #d4a017; }
.dash-launch-perf { border-top: 3px solid #2E86AB; }
.dash-launch-optim { border-top: 3px solid var(--accent); }
.dash-launch-icon {
font-size: 28px; line-height: 1;
flex-shrink: 0;
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
background: var(--accent-soft); border-radius: 10px;
}
.dash-launch-daily .dash-launch-icon { background: #fff5dc; }
.dash-launch-perf .dash-launch-icon { background: #e6f2f9; }
.dash-launch-body {
display: flex; flex-direction: column; gap: 2px;
flex: 1 1 auto; min-width: 0;
}
.dash-launch-label {
font-size: 16px; font-weight: 800;
color: var(--navy);
letter-spacing: -0.01em;
}
.dash-launch-sub {
font-size: 12px; color: var(--muted);
line-height: 1.4;
}
.dash-launch-go {
margin-left: auto;
padding: 6px 14px;
background: var(--accent); color: var(--navy-deep);
border-radius: 8px;
font-size: 12px; font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.dash-launch-go:hover { background: #1a9981; }
.dash-launch-pick {
margin-left: auto;
padding: 7px 10px;
border: 1px solid var(--rule); border-radius: 8px;
background: #fff;
font-family: inherit; font-size: 12.5px;
color: var(--navy);
cursor: pointer;
max-width: 200px;
}
/* ===== Daily Routine floating panel (v2) — mirror of the Playbook panel
but anchored to the LEFT edge of the viewport. Same minimise / close /
re-open pattern as .pb-panel; state persisted in localStorage so the
panel survives page navigations. =================================== */
.dr-panel-v2 {
position: fixed; top: 70px; left: 14px; bottom: 14px;
width: 540px; max-width: 92vw;
background: #fff;
border: 1px solid var(--rule); border-radius: 14px;
box-shadow: 18px 18px 48px rgba(15, 23, 42, .18);
z-index: 90;
display: flex; flex-direction: column;
overflow: hidden;
}
.dr-panel-v2[hidden] { display: none; }
.dr-panel-v2-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
background: linear-gradient(120deg, var(--navy-deep), var(--navy));
color: #fff;
flex-shrink: 0;
}
.dr-panel-v2-title { display: flex; align-items: center; gap: 10px; }
.dr-panel-v2-title h3 { margin: 0; font-size: 15px; color: #fff; }
.dr-panel-v2-icon {
width: 26px; height: 26px; border-radius: 6px;
background: rgba(255,255,255,0.16);
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px;
}
.dr-panel-v2-head-r { display: flex; align-items: center; gap: 6px; }
.dr-panel-v2-acc {
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.24);
color: #fff;
padding: 5px 9px; border-radius: 6px;
font: inherit; font-size: 12px; font-weight: 600;
cursor: pointer;
margin-right: 4px;
}
.dr-panel-v2-acc option { color: var(--ink); background: #fff; }
.dr-panel-v2-min, .dr-panel-v2-close {
background: rgba(255,255,255,0.16); color: #fff; border: none;
width: 28px; height: 28px; border-radius: 6px;
cursor: pointer; font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
}
.dr-panel-v2-min:hover, .dr-panel-v2-close:hover { background: rgba(255,255,255,0.28); }
.dr-panel-v2-body {
flex: 1; min-height: 0; overflow-y: auto;
padding: 18px 20px 28px;
background: var(--soft, #f7f9fa);
}
/* Inside the floating panel the hero strip shrinks so it doesn't dwarf
everything else. Larger sections also tighten up a notch. */
.dr-panel-v2-body .dr-hero { padding: 22px 24px 18px; }
.dr-panel-v2-body .dr-hero-title { font-size: 30px; }
.dr-panel-v2-body .dr-hero-sub { font-size: 13.5px; }
.dr-panel-v2-body .dr-h2 { font-size: 18px; }
.dr-panel-v2-body .dr-chain { flex-direction: column; }
.dr-panel-v2-body .dr-chain-arr { display: none; }
.dr-panel-v2-body .dr-chain-step { min-width: 0; }
.dr-panel-v2-body .dr-truths { grid-template-columns: 1fr; }
.dr-panel-v2-body .dr-truth-vs { display: none; }
.dr-panel-v2-body .dr-rules { grid-template-columns: 1fr; gap: 12px; }
.dr-panel-v2-body .dr-weekly { grid-template-columns: 1fr; }
.dr-panel-v2-body .dr-step2 { grid-template-columns: 36px 1fr; }
.dr-panel-v2-body .dr-step2-pills { grid-column: 2; justify-content: flex-start; max-width: none; margin-top: 4px; }
/* Vertical re-open tab on the LEFT edge — mirror of .pb-panel-tab. */
.dr-panel-v2-tab {
position: fixed; left: 0; top: 50%;
transform: translateY(-50%);
background: #d4a017; color: #fff; border: none;
padding: 10px 12px;
border-radius: 0 10px 10px 0;
font-size: 12px; font-weight: 700;
cursor: pointer;
box-shadow: 2px 4px 14px rgba(15, 23, 42, .15);
z-index: 89;
writing-mode: vertical-rl; text-orientation: mixed;
letter-spacing: 0.04em;
}
.dr-panel-v2-tab[hidden] { display: none; }
.dr-panel-v2-tab:hover { background: #b88c10; }
@media (max-width: 700px) {
.dr-panel-v2 { left: 0; right: 0; top: 60px; bottom: 0; width: auto; max-width: none; border-radius: 0; }
}
/* Stat tiles on dashboard */
.stat-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-bottom: 22px;
}
.stat-tile {
display: block; padding: 16px 18px;
background: #fff; border: 1px solid var(--rule); border-radius: 12px;
text-decoration: none; color: var(--ink);
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
transition: transform 0.12s, box-shadow 0.12s;
border-top: 3px solid var(--accent);
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.stat-tile .num { font-size: 28px; font-weight: 800; color: var(--navy); }
.stat-tile .label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted); margin-top: 2px;
}
/* Dashboard 2-column grid (accounts | right rail) */
.dashboard-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 24px;
}
@media (max-width: 1080px) {
.dashboard-grid { grid-template-columns: 1fr; }
}
/* Feed 3-column grid (left rail | center | right rail) */
.feed-grid {
display: grid;
grid-template-columns: 260px minmax(0, 1fr) 260px;
gap: 22px;
align-items: start;
}
@media (max-width: 1180px) {
.feed-grid { grid-template-columns: minmax(0, 1fr) 260px; }
.feed-grid .feed-rail:first-child { display: none; }
}
@media (max-width: 880px) {
.feed-grid { grid-template-columns: 1fr; }
.feed-grid .feed-rail { display: none; }
}
/* Side-rail cards (used by dashboard + feed) */
.dashboard-rail, .feed-rail { display: flex; flex-direction: column; gap: 16px; }
.rail-card {
background: #fff;
border: 1px solid var(--rule);
border-radius: 12px;
padding: 14px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.rail-card h3 {
margin: 0 0 10px;
font-size: 13px; font-weight: 800;
color: var(--navy);
}
.rail-card .rail-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 0;
border-top: 1px solid #f0f2f4;
font-size: 13px;
}
.rail-card .rail-row:first-of-type { border-top: none; }
.rail-card .rail-row .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
.rail-card .empty {
color: var(--muted); font-size: 12px; text-align: center;
margin: 8px 0 4px;
}
/* KB drop-zone */
.kb-dropzone {
display: block;
border: 2px dashed var(--rule);
border-radius: 12px;
padding: 24px;
text-align: center;
cursor: pointer;
background: var(--soft);
transition: all 0.15s;
}
.kb-dropzone:hover, .kb-dropzone.over {
border-color: var(--accent);
background: var(--accent-soft);
}
.kb-dropzone input[type=file] { display: none; }
.kb-dropzone .dz-icon { font-size: 32px; margin-bottom: 6px; }
.kb-dropzone .dz-title { font-size: 14px; font-weight: 700; color: var(--navy); }
.kb-dropzone .dz-hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kb-dropzone .dz-list { margin-top: 10px; text-align: left; }
/* Chat link auto-link styling */
.chat-link {
color: var(--accent);
text-decoration: underline;
word-break: break-all;
}
.chat-link:hover { color: var(--navy); }
/* =======================================================================
* v4.3 dashboard stat tiles — visual redesign + !important to defeat
* browser default underline on
* ======================================================================= */
.stat-tiles {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
gap: 14px !important;
margin-bottom: 24px !important;
list-style: none !important;
padding: 0 !important;
}
a.stat-tile, .stat-tiles .stat-tile {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 16px 18px !important;
background: #fff !important;
border: 1px solid var(--rule) !important;
border-radius: 14px !important;
text-decoration: none !important;
color: var(--ink) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
transition: transform 0.15s, box-shadow 0.15s !important;
position: relative;
overflow: hidden;
}
a.stat-tile:hover, .stat-tiles .stat-tile:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(0,0,0,0.10) !important;
}
.stat-tile .tile-icon {
width: 48px; height: 48px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
flex-shrink: 0;
color: #fff;
}
.stat-tile .tile-data {
display: flex; flex-direction: column;
line-height: 1.1;
}
.stat-tile .num {
font-size: 26px !important;
font-weight: 800 !important;
color: var(--navy) !important;
text-decoration: none !important;
}
.stat-tile .label {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--muted) !important;
text-decoration: none !important;
margin-top: 2px;
}
/* Per-tile accent colors */
.tile-tasks .tile-icon { background: linear-gradient(135deg, #2D8659, #4caf50); }
.tile-mail .tile-icon { background: linear-gradient(135deg, #2E86AB, #4dd0e1); }
.tile-chat .tile-icon { background: linear-gradient(135deg, #26b497, #2dc8a8); }
.tile-notif .tile-icon { background: linear-gradient(135deg, #d4a017, #f7b733); }
.tile-leaves .tile-icon { background: linear-gradient(135deg, #8e44ad, #b06ab3); }
.tile-events .tile-icon { background: linear-gradient(135deg, #2e5e6f, #5b8c98); }
/* Subtle colored top accent stripe per tile */
.stat-tile.tile-tasks { border-top: 3px solid #2D8659 !important; }
.stat-tile.tile-mail { border-top: 3px solid #2E86AB !important; }
.stat-tile.tile-chat { border-top: 3px solid #26b497 !important; }
.stat-tile.tile-notif { border-top: 3px solid #d4a017 !important; }
.stat-tile.tile-leaves { border-top: 3px solid #8e44ad !important; }
.stat-tile.tile-events { border-top: 3px solid #2e5e6f !important; }
/* =======================================================================
* v4.4: My Tasks redesign — stat tiles, toolbar, task cards, kanban
* ======================================================================= */
/* Stat tiles row on top */
.task-stats {
display: grid; gap: 10px; margin-bottom: 16px;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.task-stat {
--accent-color: var(--accent);
display: block; padding: 12px 14px;
background: #fff; border: 1px solid var(--rule); border-radius: 10px;
text-decoration: none !important; color: var(--ink);
transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
border-top: 3px solid var(--accent-color);
}
.task-stat:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.task-stat.active {
border-color: var(--accent-color);
box-shadow: 0 0 0 2px var(--accent-color);
}
.task-stat .num { font-size: 22px; font-weight: 800; color: var(--navy); }
.task-stat .label {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted); margin-top: 2px;
}
/* Toolbar */
.task-toolbar {
display: flex; gap: 14px;
align-items: center; justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 18px;
background: var(--soft);
padding: 10px 14px; border-radius: 10px;
border: 1px solid var(--rule);
}
.view-modes { display: flex; gap: 4px; flex-wrap: wrap; }
.view-mode {
padding: 6px 12px; border-radius: 8px;
text-decoration: none; font-size: 12px; font-weight: 600;
color: var(--muted); background: transparent;
border: 1px solid transparent;
transition: all 0.12s;
}
.view-mode:hover { color: var(--navy); background: #fff; border-color: var(--rule); }
.view-mode.active {
color: var(--navy-deep); background: var(--accent); border-color: var(--accent);
}
.task-filters {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.task-filters input[type=search],
.task-filters select {
padding: 6px 10px; border: 1px solid var(--rule); border-radius: 8px;
font-family: inherit; font-size: 12px; background: #fff;
min-width: 140px;
}
/* ===== Task card ===== */
.task-card {
--prio-color: var(--muted);
background: #fff; border: 1px solid var(--rule);
border-radius: 12px;
margin-bottom: 10px;
overflow: hidden;
transition: box-shadow 0.12s, border-color 0.12s;
}
.task-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-color: #d6dcdf; }
.task-card.open { border-color: var(--accent); box-shadow: 0 4px 14px rgba(38,180,151,0.12); }
.task-card.done .task-title a { text-decoration: line-through; color: var(--muted); }
.task-card.done .task-meta { opacity: 0.6; }
.task-card.overdue { border-left: 4px solid var(--danger); }
.task-summary {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
}
.task-summary .prio-stripe {
width: 4px; align-self: stretch; border-radius: 4px;
background: var(--prio-color);
flex-shrink: 0;
}
.task-main { flex: 1; min-width: 0; }
.task-title {
font-size: 14px; font-weight: 600; color: var(--ink);
display: flex; align-items: center; gap: 8px;
}
.task-title .task-open-link {
text-decoration: none; color: inherit;
}
.task-title .task-open-link:hover { color: var(--accent); }
.task-comment-pill {
font-size: 11px; color: var(--muted);
background: var(--soft); padding: 1px 7px; border-radius: 999px;
}
.task-meta {
display: flex; gap: 6px; flex-wrap: wrap;
margin-top: 5px; font-size: 11px;
}
.task-meta .meta-chip {
display: inline-flex; align-items: center; gap: 4px;
background: var(--soft); border: 1px solid var(--rule);
padding: 1px 8px; border-radius: 999px;
color: var(--muted);
}
.task-meta .meta-chip.due { background: var(--accent-soft); color: var(--navy-deep); border-color: transparent; }
.task-meta .meta-chip.due.today { background: var(--warn-soft); color: #8a6500; border-color: transparent; }
.task-meta .meta-chip.due.overdue { background: var(--danger-soft); color: var(--danger); border-color: transparent; font-weight: 700; }
.mini-avatar {
width: 18px; height: 18px; border-radius: 50%;
background: linear-gradient(135deg, var(--navy), var(--accent));
color: #fff; font-size: 9px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.status-pill {
appearance: none; -webkit-appearance: none;
border: none; border-radius: 999px;
padding: 4px 12px; font-size: 11px; font-weight: 700;
cursor: pointer;
text-transform: uppercase; letter-spacing: 0.06em;
font-family: inherit;
background: var(--muted); color: #fff;
}
/* Expand panel */
.task-detail {
padding: 14px 18px;
background: #fafbfc;
border-top: 1px solid var(--rule);
}
.task-desc {
white-space: pre-wrap;
font-size: 13px; line-height: 1.55;
color: var(--ink);
margin-bottom: 12px;
}
.task-desc.empty { color: var(--muted); font-style: italic; }
.task-edit-row {
display: flex; gap: 10px; flex-wrap: wrap;
align-items: flex-end;
margin-bottom: 14px;
padding: 10px 12px;
background: #fff; border: 1px solid var(--rule); border-radius: 8px;
}
.task-edit-row label {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--muted);
}
.task-edit-row select, .task-edit-row input[type=date] {
display: block; margin-top: 4px;
padding: 5px 8px; border: 1px solid var(--rule); border-radius: 6px;
font-family: inherit; font-size: 12px;
}
.task-comments { margin-top: 8px; }
.task-comments .empty {
font-size: 12px; color: var(--muted); font-style: italic;
margin: 4px 0 10px;
}
.task-comment {
display: flex; gap: 8px; align-items: flex-start;
margin-bottom: 8px; font-size: 13px;
}
.task-comment .when { font-size: 11px; color: var(--muted); }
.task-comment-form {
display: flex; gap: 6px; margin-top: 8px;
}
.task-comment-form input[type=text] {
flex: 1; padding: 6px 10px;
border: 1px solid var(--rule); border-radius: 6px;
font-family: inherit; font-size: 12px;
}
.task-actions-row {
display: flex; gap: 8px; margin-top: 12px; align-items: center;
}
/* ===== Kanban board ===== */
.kanban {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 980px) {
.kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.kanban { grid-template-columns: 1fr; }
}
.kanban-col {
--col-color: var(--accent);
background: var(--soft);
border-radius: 12px;
padding: 12px;
border-top: 3px solid var(--col-color);
min-height: 200px;
}
.kanban-col-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 10px; padding: 0 4px;
}
.kanban-col-head .dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--col-color);
}
.kanban-col-head h3 {
margin: 0; font-size: 13px; font-weight: 700;
color: var(--navy); flex: 1;
}
.kanban-count {
background: #fff; color: var(--muted);
font-size: 11px; font-weight: 700;
padding: 2px 8px; border-radius: 999px;
border: 1px solid var(--rule);
}
.kanban-col-body { display: flex; flex-direction: column; gap: 8px; }
.kanban-col-body .task-card { margin-bottom: 0; }
.kanban-col-body .task-card .task-meta { font-size: 10px; }
.kanban-empty {
text-align: center; font-size: 12px;
color: var(--muted); font-style: italic;
padding: 12px;
}
/* ===== Grouped views ===== */
.task-group { margin-bottom: 22px; }
.task-group-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 2px solid var(--rule);
}
.task-group-head h3 {
margin: 0; font-size: 14px; font-weight: 800;
color: var(--navy); flex: 1;
}
.task-group-count {
background: var(--accent-soft); color: var(--navy-deep);
font-size: 11px; font-weight: 700;
padding: 2px 10px; border-radius: 999px;
}
/* =======================================================================
* v4.3: Personal Development Plan (Growth tracks)
* ======================================================================= */
.pdp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 14px;
}
.pdp-card {
background: #fff; border: 1px solid var(--rule);
border-radius: 12px; padding: 16px 18px;
text-decoration: none !important; color: var(--ink);
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
display: block;
transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.pdp-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
border-color: var(--accent);
}
.pdp-card-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.pdp-card-title { font-size: 16px; font-weight: 800; color: var(--navy); }
.pdp-card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pdp-status {
font-size: 10px; font-weight: 700;
padding: 2px 9px; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.06em;
flex-shrink: 0;
}
.pdp-status-big {
font-size: 11px; font-weight: 700;
padding: 4px 12px; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.08em;
}
.pdp-card-foot {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: var(--ink);
margin-top: 8px;
}
/* Progress bar — used in PDP cards, headers, milestones, auto-track */
.pdp-progress-bar {
width: 100%; height: 8px;
background: var(--rule);
border-radius: 999px;
overflow: hidden;
}
.pdp-progress-bar.tall { height: 14px; }
.pdp-progress-bar .fill {
height: 100%;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
transition: width 0.3s;
border-radius: 999px;
}
/* Plan header */
.pdp-header {
background: #fff; border: 1px solid var(--rule);
border-radius: 14px;
padding: 22px 26px;
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.pdp-header-top { display: flex; gap: 16px; flex-wrap: wrap; }
/* Milestone */
.pdp-milestone {
--ms-color: var(--muted);
background: #fff; border: 1px solid var(--rule);
border-left: 4px solid var(--ms-color);
border-radius: 10px;
padding: 16px 18px;
margin-bottom: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.pdp-milestone.done { opacity: 0.85; }
.pdp-milestone.done .pdp-ms-title { text-decoration: line-through; color: var(--muted); }
.pdp-ms-head { display: flex; gap: 12px; align-items: flex-start; }
.pdp-ms-title {
font-size: 15px; font-weight: 700; color: var(--ink);
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.pdp-weight {
background: var(--soft); border: 1px solid var(--rule);
font-size: 11px; padding: 1px 7px; border-radius: 999px;
color: var(--muted);
}
.pdp-ms-status {
font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.06em;
}
.pdp-ms-desc { font-size: 13px; color: var(--ink); margin-top: 6px; white-space: pre-wrap; }
.pdp-ms-score {
flex-shrink: 0; text-align: center;
background: var(--accent-soft);
padding: 8px 14px; border-radius: 10px;
min-width: 80px;
}
.pdp-ms-score .num { font-size: 22px; font-weight: 800; color: var(--navy); }
.pdp-ms-score .lbl { font-size: 9px; color: var(--muted); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.pdp-auto-track {
margin-top: 12px; padding: 8px 12px;
background: var(--soft); border-radius: 8px;
}
.pdp-feedback {
margin-top: 10px; padding: 8px 12px;
background: var(--accent-soft);
border-left: 3px solid var(--accent);
border-radius: 6px;
}
.pdp-ms-controls {
margin-top: 14px; padding-top: 12px;
border-top: 1px solid var(--rule);
}
.pdp-ms-controls summary {
cursor: pointer; font-size: 12px; font-weight: 700;
color: var(--accent);
}
/* =======================================================================
* v4.4: AI Insights chat
* ======================================================================= */
.ai-shell {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 18px;
height: 78vh; min-height: 600px;
}
@media (max-width: 880px) {
.ai-shell { grid-template-columns: 1fr; height: auto; }
.ai-rail { display: none; }
}
/* Left rail */
.ai-rail {
background: #fff;
border: 1px solid var(--rule);
border-radius: 12px;
display: flex; flex-direction: column;
overflow: hidden;
}
.ai-rail .rail-head {
padding: 12px 14px;
border-bottom: 1px solid var(--rule);
}
.ai-rail-list { flex: 1; overflow-y: auto; }
.ai-rail-item {
display: block;
padding: 10px 14px;
border-bottom: 1px solid #f0f2f4;
text-decoration: none; color: var(--ink);
font-size: 12px;
transition: background 0.1s;
}
.ai-rail-item:hover { background: #f7f9fa; }
.ai-rail-item.active { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.ai-rail-item .t {
font-weight: 600; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-rail-item .w { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* Main pane */
.ai-pane {
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--rule); border-radius: 12px;
overflow: hidden;
min-height: 0;
}
.ai-messages {
flex: 1; overflow-y: auto;
padding: 22px 26px;
display: flex; flex-direction: column; gap: 16px;
background: linear-gradient(180deg, #fafbfc 0%, #ffffff 30%);
}
/* Empty state */
.ai-empty {
margin: auto;
text-align: center;
max-width: 540px;
}
/* Messages */
.ai-msg { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.ai-msg-user { align-self: flex-end; align-items: flex-end; }
.ai-msg-assistant{ align-self: flex-start; align-items: flex-start; }
.ai-bubble {
padding: 12px 16px;
border-radius: 16px;
font-size: 14px; line-height: 1.55;
word-wrap: break-word; overflow-wrap: anywhere;
max-width: 100%;
}
.ai-msg-user .ai-bubble {
background: var(--accent);
color: var(--navy-deep);
border-bottom-right-radius: 4px;
max-width: 70%;
}
.ai-msg-assistant .ai-bubble {
background: #fff;
color: var(--ink);
border: 1px solid var(--rule);
border-bottom-left-radius: 4px;
width: 100%;
max-width: 900px;
}
/* Inline chart inside an assistant bubble */
.ai-chart {
width: 100%;
max-width: 900px;
background: #fff;
border: 1px solid var(--rule);
border-radius: 12px;
padding: 14px 16px;
}
.ai-chart-title {
font-size: 12px; font-weight: 700;
color: var(--navy);
text-transform: uppercase; letter-spacing: 0.08em;
margin-bottom: 6px;
}
.ai-chart canvas {
max-width: 100%;
height: 280px !important;
}
/* Composer */
.ai-composer {
display: flex; gap: 10px;
padding: 14px 18px;
border-top: 1px solid var(--rule);
background: #fff;
}
.ai-composer textarea {
flex: 1; resize: none;
min-height: 44px; max-height: 160px;
padding: 10px 12px;
border: 1px solid var(--rule);
border-radius: 10px;
font-family: inherit; font-size: 14px;
}
.ai-composer textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.ai-composer button {
align-self: stretch;
min-width: 100px;
}
.ai-composer button:disabled {
opacity: 0.5; cursor: not-allowed;
}
/* =======================================================================
* v4.4.1: Markdown rendering inside AI chat bubbles
* ======================================================================= */
.ai-bubble[data-md] h1,
.ai-bubble[data-md] h2,
.ai-bubble[data-md] h3,
.ai-bubble[data-md] h4 {
margin: 14px 0 6px;
color: var(--navy);
font-weight: 700;
line-height: 1.25;
}
.ai-bubble[data-md] h1 { font-size: 19px; }
.ai-bubble[data-md] h2 { font-size: 17px; }
.ai-bubble[data-md] h3 { font-size: 15px; }
.ai-bubble[data-md] h4 { font-size: 14px; }
.ai-bubble[data-md] p { margin: 6px 0; }
.ai-bubble[data-md] ul,
.ai-bubble[data-md] ol { margin: 6px 0; padding-left: 22px; }
.ai-bubble[data-md] li { margin: 2px 0; }
.ai-bubble[data-md] strong { font-weight: 700; color: var(--ink); }
.ai-bubble[data-md] em { font-style: italic; }
.ai-bubble[data-md] a {
color: var(--accent); text-decoration: underline;
}
.ai-bubble[data-md] code {
background: var(--soft);
padding: 1px 6px; border-radius: 4px;
font-family: ui-monospace, monospace;
font-size: 12.5px;
color: var(--navy-deep);
}
.ai-bubble[data-md] pre {
background: #1f2a30; color: #e6edf3;
padding: 12px 14px; border-radius: 8px;
overflow-x: auto;
margin: 8px 0;
font-family: ui-monospace, monospace;
font-size: 12.5px;
line-height: 1.45;
}
.ai-bubble[data-md] pre code { background: transparent; padding: 0; color: inherit; }
.ai-bubble[data-md] blockquote {
border-left: 3px solid var(--accent);
margin: 8px 0; padding: 6px 12px;
background: var(--accent-soft);
color: var(--ink);
border-radius: 0 8px 8px 0;
}
.ai-bubble[data-md] table {
border-collapse: collapse;
margin: 10px 0;
font-size: 12.5px;
width: 100%;
background: #fff;
border: 1px solid var(--rule);
border-radius: 8px;
overflow: hidden;
}
.ai-bubble[data-md] th {
background: var(--soft);
text-align: left;
padding: 8px 12px;
font-weight: 700;
font-size: 11.5px;
color: var(--navy);
border-bottom: 1px solid var(--rule);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ai-bubble[data-md] td {
padding: 7px 12px;
border-top: 1px solid #f0f2f4;
vertical-align: top;
}
.ai-bubble[data-md] tr:nth-child(even) td { background: #fafbfc; }
.ai-bubble[data-md] hr {
border: none;
border-top: 1px solid var(--rule);
margin: 12px 0;
}
/* Editable chat title in pane header */
.ai-pane-head {
padding: 10px 18px;
border-bottom: 1px solid var(--rule);
display: flex; align-items: center; gap: 10px;
}
.ai-pane-title {
flex: 1;
font-size: 14px; font-weight: 700; color: var(--navy);
cursor: text;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid transparent;
transition: background 0.12s, border-color 0.12s;
}
.ai-pane-title:hover {
background: var(--soft);
border-color: var(--rule);
}
.ai-pane-title.editing {
outline: 2px solid var(--accent);
background: #fff;
}
/* Chat header buttons (rename / delete) */
.ai-pane-head .chat-head-btn {
background: transparent;
border: 1px solid var(--rule);
color: var(--muted);
width: 32px; height: 32px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.12s, color 0.12s;
}
.ai-pane-head .chat-head-btn:hover {
background: var(--soft);
color: var(--navy);
}
#chat-title-input {
flex: 1;
padding: 5px 10px;
border: 1px solid var(--accent);
border-radius: 6px;
font-family: inherit;
font-size: 14px; font-weight: 700;
color: var(--navy);
background: #fff;
outline: none;
}
/* =======================================================================
* v4.6: Account BI dashboard (Phase 1)
* ======================================================================= */
.dash-filterbar {
display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap;
margin-bottom: 18px; padding: 22px 16px 14px;
background: var(--soft); border: 1px solid var(--rule); border-radius: 10px;
/* v5.9.2 — Sticky filter bar. Stays pinned at the top of the viewport
when the user scrolls through long dashboards (Daily table, Channels,
Campaigns, etc.). Applied to every dashboard, not NFH-only.
• top: 0 anchors it to the top of the scroll container.
• z-index: 5 keeps it above tables/charts but under modals (z>=100).
• A solid background prevents the filters from becoming transparent
over scrolled content (the default --soft has alpha on some themes).
• The subtle bottom shadow appears only when the bar is "stuck" so
it visually detaches from the rest of the page. Using position:sticky
means the browser automatically triggers this state — no JS needed. */
position: sticky;
top: 0;
z-index: 5;
background: #fff;
box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.12);
}
.dash-filterbar .field { margin: 0; display: flex; flex-direction: column; }
.dash-filterbar input,
.dash-filterbar select {
padding: 6px 10px;
border: 1px solid var(--rule); border-radius: 6px;
font-family: inherit; font-size: 12.5px;
background: #fff;
width: 100%; min-width: 140px;
height: 32px; box-sizing: border-box;
}
.dash-filterbar .field label {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted); margin-bottom: 4px;
}
.dash-filterbar-actions {
display: flex; gap: 6px; margin-left: auto;
align-items: center;
}
/* "This period" / "Compare to" / "Filters" pills inside the filter bar. */
.dash-filter-group {
display: flex; gap: 10px; align-items: flex-end;
padding: 12px 14px 12px;
background: #fff;
border: 1px solid var(--rule); border-radius: 10px;
position: relative;
}
.dash-filter-group[data-group="this"] {
background: rgba(38,180,151,0.06);
border-color: rgba(38,180,151,0.30);
}
.dash-filter-group[data-group="prev"] {
background: rgba(46,134,171,0.06);
border-color: rgba(46,134,171,0.30);
}
.dash-filter-group[data-group="filters"] {
background: #fff;
border-color: var(--rule);
}
.dash-filter-group-label {
position: absolute; top: -9px; left: 12px;
background: var(--soft);
padding: 1px 8px;
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.10em;
color: var(--navy);
border-radius: 4px;
line-height: 1.4;
}
.dash-filter-group[data-group="this"] .dash-filter-group-label { color: #26b497; }
.dash-filter-group[data-group="prev"] .dash-filter-group-label { color: #2E86AB; }
.dash-filter-group .field { min-width: 140px; }
.dash-filter-group .field input,
.dash-filter-group .field select { min-width: 130px; }
#dash-tabs { margin: 18px 0 18px; }
/* v4.24 — Customers sub-tabs (per-category split). Sits above the Customers section content. */
.cust-cat-tabs {
display: flex; gap: 6px; flex-wrap: wrap;
margin: 0 0 18px;
padding: 6px;
background: var(--cream, #F4F7F8);
border: 1px solid var(--rule, #E2E7E9);
border-radius: 10px;
}
.cust-cat-tab {
padding: 8px 16px;
border-radius: 6px;
background: transparent;
color: var(--navy, #2e5e6f);
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: all 0.15s;
letter-spacing: 0.02em;
}
.cust-cat-tab:hover { background: #fff; }
.cust-cat-tab.active {
background: var(--navy, #2e5e6f);
color: #fff;
}
/* 2×2 grid for the daily-trend sub-charts on Topline. */
.dash-chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 12px;
margin-bottom: 22px;
}
.dash-chart-grid .dash-chart { margin-bottom: 0; }
.dash-chart-grid .dash-chart canvas { height: 220px !important; }
/* Topline wants 5 columns on wide screens to match the reference workbook. */
.kpi-grid-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1280px) {
.kpi-grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
.kpi-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.kpi-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* KPI grid */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 22px;
}
.kpi-card {
background: #fff; border: 1px solid var(--rule); border-radius: 12px;
padding: 14px 16px;
border-top: 3px solid var(--accent);
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.kpi-label {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted);
}
.kpi-value {
font-size: 26px; font-weight: 800; color: var(--navy);
line-height: 1.1; margin: 4px 0 6px;
}
.kpi-delta {
display: flex; align-items: center; gap: 8px;
font-size: 11px; color: var(--muted);
}
.delta-pill {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.03em;
}
.delta-pill.good { background: var(--ok-soft); color: var(--ok); }
.delta-pill.bad { background: var(--danger-soft); color: var(--danger); }
.delta-pill.flat { background: var(--soft); color: var(--muted); }
.kpi-prev { color: var(--muted); font-size: 11px; }
/* Inline backend (Shopify) row that appears on the 6 conversion-side cards
(Orders, Revenue, AOV, CPO, CVR, ROAS) when the account has backend access.
Sits below the GA4 delta; shows the backend value + gap chip vs GA4. */
.kpi-card-has-backend { padding-bottom: 10px; }
.kpi-backend {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--rule);
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
font-size: 11.5px; color: var(--navy);
}
.kpi-backend-tag {
font-size: 9px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted);
background: var(--soft);
padding: 2px 6px; border-radius: 4px;
border: 1px solid var(--rule);
}
.kpi-backend-val { font-weight: 700; color: var(--navy); }
.kpi-backend-gap {
margin-left: auto;
font-size: 10.5px; font-weight: 700;
padding: 1px 7px; border-radius: 999px;
letter-spacing: 0.02em;
}
.kpi-backend-gap.gap-ok { background: var(--ok-soft); color: var(--ok); }
.kpi-backend-gap.gap-warn { background: #fff4d6; color: #8a6500; }
.kpi-backend-gap.gap-alert { background: var(--danger-soft); color: var(--danger); }
.kpi-backend-gap.gap-flat { background: var(--soft); color: var(--muted); }
/* =======================================================================
* v4.7: Channels — wide funnel breakdown table
* ======================================================================= */
.dash-table-wide { overflow-x: auto; }
table.ch-table {
min-width: 1500px;
font-size: 12px;
border-collapse: collapse;
}
table.ch-table thead th {
background: var(--soft);
color: var(--navy);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px;
padding: 6px 8px;
border-bottom: 1px solid var(--rule);
text-align: right;
}
table.ch-table thead .ch-table-h1 th {
border-bottom: 2px solid var(--accent);
padding: 8px 8px 6px;
text-align: center;
}
table.ch-table thead .ch-table-h2 th { font-size: 9.5px; opacity: 0.85; }
table.ch-table thead .ch-name,
table.ch-table tbody .ch-name,
table.ch-table tfoot .ch-name {
text-align: left;
position: sticky; left: 0;
background: #fff;
z-index: 2;
}
table.ch-table thead .ch-name { background: var(--soft); }
table.ch-table tbody td,
table.ch-table tfoot td {
padding: 6px 8px; text-align: right;
border-bottom: 1px solid #f1f4f5;
white-space: nowrap;
}
table.ch-table tbody tr:hover td { background: #fafdfc; }
table.ch-table tbody tr:hover td.ch-name { background: #fafdfc; }
table.ch-table .ch-lw { color: var(--muted); font-size: 11px; }
table.ch-table .ch-delta { font-size: 11px; }
table.ch-table .ch-rate {
color: var(--navy);
background: rgba(38,180,151,0.05);
font-weight: 700;
border-left: 2px solid rgba(38,180,151,0.25);
}
table.ch-table tfoot .ch-total td {
background: rgba(46,94,111,0.06);
font-weight: 800;
border-top: 2px solid var(--navy);
}
table.ch-table tfoot .ch-total td.ch-name { background: rgba(46,94,111,0.06); }
/* Small "paid" pill next to paid-channel names in the breakdown. */
.ch-tag {
display: inline-block;
margin-left: 6px;
font-size: 9px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.08em;
padding: 1px 6px; border-radius: 4px;
vertical-align: middle;
}
.ch-tag-paid {
background: var(--danger-soft);
color: var(--danger);
border: 1px solid rgba(192,57,43,0.25);
}
/* Donut charts on the paid-vs-organic row need a fixed height so they don't blow up. */
.dash-chart-grid canvas { max-height: 240px; }
/* =======================================================================
* v4.7: Daily — 3-section wide table (Platforms / GA / Backend)
* ======================================================================= */
table.daily-table {
min-width: 2200px;
font-size: 12px;
border-collapse: collapse;
}
/* Section header colors */
table.daily-table thead .d-pl-hdr { background: rgba(38,180,151,0.12); color: #0e8b6f; border-bottom: 2px solid #26b497; }
table.daily-table thead .d-ga-hdr { background: rgba(46,134,171,0.12); color: #1c6587; border-bottom: 2px solid #2E86AB; }
table.daily-table thead .d-be-hdr { background: rgba(192,57,43,0.10); color: #8c2d22; border-bottom: 2px solid #C0392B; }
.d-hdr-sub { font-weight: 500; font-size: 10px; opacity: 0.78; margin-left: 4px; text-transform: none; letter-spacing: 0.02em; }
table.daily-table thead th {
background: var(--soft);
color: var(--navy);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px;
padding: 6px 8px;
border-bottom: 1px solid var(--rule);
text-align: right;
}
table.daily-table thead .daily-h1 th { padding: 8px 8px 6px; text-align: center; }
table.daily-table thead .daily-h2 th { font-size: 9.5px; padding-top: 4px; }
/* Sticky Day + Date columns */
table.daily-table thead .d-day,
table.daily-table thead .d-date,
table.daily-table tbody .d-day,
table.daily-table tbody .d-date {
position: sticky;
background: #fff;
z-index: 2;
text-align: left;
}
table.daily-table thead .d-day,
table.daily-table thead .d-date { background: var(--soft); z-index: 3; }
table.daily-table .d-day { left: 0; min-width: 80px; width: 80px; }
table.daily-table .d-date { left: 80px; min-width: 100px; width: 100px;
border-right: 2px solid var(--rule); }
/* Per-section cell tints */
table.daily-table tbody td {
padding: 5px 8px;
text-align: right;
border-bottom: 1px solid #f1f4f5;
white-space: nowrap;
}
table.daily-table tbody .d-pl { background: rgba(38,180,151,0.025); }
table.daily-table tbody .d-ga { background: rgba(46,134,171,0.025); }
table.daily-table tbody .d-be { background: rgba(192,57,43,0.025); }
table.daily-table tbody tr:hover .d-pl { background: rgba(38,180,151,0.08); }
table.daily-table tbody tr:hover .d-ga { background: rgba(46,134,171,0.08); }
table.daily-table tbody tr:hover .d-be { background: rgba(192,57,43,0.08); }
table.daily-table tbody tr:hover .d-day,
table.daily-table tbody tr:hover .d-date { background: #fafdfc; }
/* Section dividers — the leftmost cell in each section gets a thin colored left border */
table.daily-table tbody td:nth-child(3), /* first .d-pl */
table.daily-table thead .daily-h2 .d-pl:first-of-type,
table.daily-table tbody td.d-pl:nth-child(3) { border-left: 2px solid rgba(38,180,151,0.3); }
table.daily-table thead .daily-h2 .d-ga:first-of-type,
table.daily-table tbody td.d-ga:first-of-type { border-left: 2px solid rgba(46,134,171,0.3); }
table.daily-table thead .daily-h2 .d-be:first-of-type,
table.daily-table tbody td.d-be:first-of-type { border-left: 2px solid rgba(192,57,43,0.3); }
/* TOTAL row at the top of the body */
table.daily-table tbody .d-total td {
background: rgba(46,94,111,0.06) !important;
font-weight: 800;
border-bottom: 2px solid var(--navy);
}
table.daily-table tbody .d-total td.d-day,
table.daily-table tbody .d-total td.d-date {
background: rgba(46,94,111,0.08) !important;
}
/* Legend below the table */
.daily-legend {
margin: 12px 4px 0;
font-size: 11.5px;
color: var(--muted);
line-height: 1.7;
}
.daily-legend .d-key {
display: inline-block;
width: 10px; height: 10px;
border-radius: 2px;
margin: 0 4px 0 14px;
vertical-align: -1px;
}
.daily-legend .d-key:first-child { margin-left: 0; }
.daily-legend .d-key-pl { background: rgba(38,180,151,0.7); }
.daily-legend .d-key-ga { background: rgba(46,134,171,0.7); }
.daily-legend .d-key-be { background: rgba(192,57,43,0.6); }
/* Heat-map gradient swatch in the legend */
.daily-legend .d-key-heat {
display: inline-flex; margin: 0 4px 0 14px; vertical-align: -1px;
border-radius: 2px; overflow: hidden;
border: 1px solid var(--rule);
}
.daily-legend .d-key-heat-bad,
.daily-legend .d-key-heat-good { display: inline-block; width: 18px; height: 10px; }
.daily-legend .d-key-heat-bad { background: rgba(229,75,75,0.30); }
.daily-legend .d-key-heat-good { background: rgba(38,180,151,0.30); }
/* =======================================================================
* v4.7: MTD vs Target
* ======================================================================= */
.mtd-head {
display: flex; align-items: baseline; justify-content: space-between;
margin: 6px 4px 14px;
}
.mtd-head-month {
font-size: 16px; font-weight: 800; color: var(--navy);
letter-spacing: 0.02em;
}
.mtd-head-sub { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 8px; }
/* Orders-source badge on the MTD header — tells the user which BQ source actually
fed the Orders/Revenue numbers this render (backend / ga4 / ga4_fallback). */
.mtd-head-src { font-size: 11px; }
.mtd-src {
display: inline-block;
font-size: 10.5px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 3px 10px; border-radius: 999px;
border: 1px solid transparent;
}
.mtd-src-backend { background: var(--ok-soft); color: var(--ok); border-color: rgba(45,134,89,0.25); }
.mtd-src-ga4 { background: rgba(46,134,171,0.10); color: #1c6587; border-color: rgba(46,134,171,0.25); }
.mtd-src-fallback { background: #fff4d6; color: #8a6500; border-color: rgba(138,101,0,0.30); }
/* =======================================================================
* v4.7: Meta / Google Campaigns — per-campaign breakdown table
* ======================================================================= */
table.cmp-table {
min-width: 1400px;
font-size: 12px;
border-collapse: collapse;
}
table.cmp-table thead th {
background: var(--soft);
color: var(--navy);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px;
padding: 7px 8px;
border-bottom: 2px solid var(--rule);
text-align: right;
}
table.cmp-table thead .cmp-name { text-align: left; }
table.cmp-table tbody td {
padding: 6px 8px;
text-align: right;
border-bottom: 1px solid #f1f4f5;
white-space: nowrap;
}
table.cmp-table tbody .cmp-name {
text-align: left;
position: sticky; left: 0; background: #fff; z-index: 2;
min-width: 220px; max-width: 320px;
white-space: normal;
border-right: 2px solid var(--rule);
}
table.cmp-table thead .cmp-name {
position: sticky; left: 0; background: var(--soft); z-index: 3;
}
table.cmp-table tbody tr:hover td { background: #fafdfc; }
table.cmp-table tbody tr:hover td.cmp-name { background: #fafdfc; }
/* Filtered-out count chip — sits next to "Per-campaign breakdown" subtitle */
.cmp-excl-count {
display: inline-block;
margin-left: 10px;
font-size: 10.5px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 2px 9px; border-radius: 999px;
background: #fff4d6; color: #8a6500;
border: 1px solid rgba(138,101,0,0.25);
}
/* =======================================================================
* v4.7: Creatives Overview — bands + detail table + archetype legend
* ======================================================================= */
.cr-bands {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-bottom: 22px;
}
@media (max-width: 980px) { .cr-bands { grid-template-columns: 1fr; } }
.cr-band {
background: #fff;
border: 1px solid var(--rule);
border-top-width: 4px;
border-radius: 12px;
padding: 14px 16px;
display: flex; flex-direction: column;
}
.cr-band-keep { border-top-color: var(--ok); }
.cr-band-pause { border-top-color: var(--danger); }
.cr-band-learn { border-top-color: #d4a017; }
.cr-band-h {
font-size: 13px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--navy); margin-bottom: 4px;
}
.cr-band-h b { font-size: 22px; margin: 0 4px; }
.cr-band-keep .cr-band-h { color: var(--ok); }
.cr-band-pause .cr-band-h { color: var(--danger); }
.cr-band-learn .cr-band-h { color: #8a6500; }
.cr-band-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.cr-band-sub {
font-size: 11.5px; color: var(--muted);
margin-bottom: 10px;
}
.cr-band-names {
font-size: 12px; color: var(--navy);
line-height: 1.55;
flex: 1 1 auto;
}
.cr-band-name {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
cursor: default;
}
.cr-band-empty { color: var(--muted); font-style: italic; }
.cr-band-foot {
margin-top: 10px; padding-top: 10px;
border-top: 1px dashed var(--rule);
font-size: 11.5px; color: var(--muted);
font-style: italic; line-height: 1.4;
}
/* Detail table */
table.cr-table {
min-width: 1800px;
font-size: 12px;
border-collapse: collapse;
}
table.cr-table thead th {
background: var(--soft);
color: var(--navy);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px;
padding: 6px 6px;
border-bottom: 1px solid var(--rule);
text-align: right;
}
table.cr-table thead .cr-h1 th { padding: 8px 6px 6px; text-align: center; }
table.cr-table thead .cr-h-weeks { background: rgba(38,180,151,0.10); color: #0e8b6f; border-bottom: 2px solid #26b497; }
table.cr-table thead .cr-h-volume { background: rgba(46,134,171,0.08); color: #1c6587; border-bottom: 2px solid #2E86AB; }
table.cr-table thead .cr-h-perf { background: rgba(212,160,23,0.08); color: #8a6500; border-bottom: 2px solid #d4a017; }
table.cr-table tbody td {
padding: 6px 6px;
text-align: right;
border-bottom: 1px solid #f1f4f5;
white-space: nowrap;
}
table.cr-table tbody .cr-name {
text-align: left;
position: sticky; left: 0; background: #fff; z-index: 2;
min-width: 220px; max-width: 320px;
white-space: normal;
border-right: 2px solid var(--rule);
}
table.cr-table thead .cr-name-h,
table.cr-table thead th:first-child {
position: sticky; left: 0; background: var(--soft); z-index: 3;
}
.cr-name-sub {
font-size: 10.5px; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.05em;
margin-top: 2px;
}
table.cr-table .cr-trans { text-align: left; color: var(--muted); font-size: 11.5px; max-width: 180px; white-space: normal; }
.cr-cluster { font-size: 11px; color: var(--muted); margin-left: 6px; }
table.cr-table tbody tr:hover td { background: #fafdfc; }
table.cr-table tbody tr:hover td.cr-name { background: #fafdfc; }
/* Action-plan pill — same shape as MTD status pills */
.cr-ap {
display: inline-block;
font-size: 10.5px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 2px 8px; border-radius: 999px;
border: 1px solid transparent;
}
.cr-ap-keep { background: var(--ok-soft); color: var(--ok); border-color: rgba(45,134,89,0.25); }
.cr-ap-pause { background: var(--danger-soft); color: var(--danger); border-color: rgba(192,57,43,0.30); }
.cr-ap-learn { background: #fff4d6; color: #8a6500; border-color: rgba(138,101,0,0.25); }
.cr-ap-na { background: var(--soft); color: var(--muted); border-color: var(--rule); }
/* Archetype legend table */
.cr-legend-table { min-width: 720px; font-size: 12.5px; }
.cr-legend-table td { padding: 6px 10px; }
.cr-legend-table th { text-align: left; }
/* =======================================================================
* v4.7: Products Overview — matrix + view pills + filter chips + table
* ======================================================================= */
.prod-matrix {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 22px;
}
@media (max-width: 1100px) { .prod-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .prod-matrix { grid-template-columns: 1fr; } }
.prod-bucket {
background: #fff; border: 1px solid var(--rule);
border-top-width: 4px; border-radius: 12px;
padding: 12px 14px;
font-size: 12px;
}
.prod-bucket-star { border-top-color: var(--ok); }
.prod-bucket-gem { border-top-color: #26b497; }
.prod-bucket-fix { border-top-color: #d4a017; }
.prod-bucket-review { border-top-color: #d4a017; }
.prod-bucket-dead { border-top-color: var(--danger); }
.prod-bucket-monitor { border-top-color: var(--muted); }
.prod-bucket-h {
font-size: 12.5px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--navy);
}
.prod-bucket-h b { font-size: 20px; margin: 0 4px; }
.prod-bucket-star .prod-bucket-h { color: var(--ok); }
.prod-bucket-gem .prod-bucket-h { color: #0e8b6f; }
.prod-bucket-fix .prod-bucket-h { color: #8a6500; }
.prod-bucket-review .prod-bucket-h { color: #8a6500; }
.prod-bucket-dead .prod-bucket-h { color: var(--danger); }
.prod-bucket-monitor .prod-bucket-h { color: var(--muted); }
.prod-bucket-label { color: var(--muted); font-size: 11px; }
.prod-bucket-sub { color: var(--muted); font-size: 11px; margin: 4px 0 8px; }
.prod-bucket-items {
display: flex; flex-direction: column; gap: 2px;
font-size: 12px;
min-height: 96px;
}
.prod-bucket-item {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
color: var(--navy);
white-space: nowrap; overflow: hidden;
}
.prod-bucket-item > :first-child {
overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.prod-bucket-item-rev { color: var(--muted); font-size: 11px; }
.prod-bucket-empty { color: var(--muted); font-style: italic; font-size: 11px; }
.prod-bucket-foot {
margin-top: 10px; padding-top: 8px;
border-top: 1px dashed var(--rule);
font-size: 11px; color: var(--muted); font-style: italic;
}
/* Primary tiles (STARS + Hidden Gems) get a subtle highlight so they read as
the buyer's main drill-in targets in the matrix. */
.prod-bucket-primary {
box-shadow: 0 1px 3px rgba(22, 75, 89, 0.08);
background: linear-gradient(180deg, #fff 0%, #f7fcfb 100%);
}
/* Expand button on the tile header */
.prod-bucket-h {
display: flex; align-items: center; gap: 6px;
}
.prod-bucket-toggle {
margin-left: auto;
background: #fff; border: 1px solid var(--rule);
font-size: 10.5px; font-weight: 700;
text-transform: none; letter-spacing: 0;
padding: 3px 8px; border-radius: 5px;
cursor: pointer;
color: var(--navy);
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.prod-bucket-toggle:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.prod-bucket-toggle.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Per-bucket expandable table — drops in below the matrix. */
.prod-bucket-expands { display: block; margin-bottom: 22px; }
.prod-bucket-expand {
display: none;
background: #fff; border: 1px solid var(--rule); border-radius: 12px;
margin-top: 8px; padding: 14px 16px;
box-shadow: 0 2px 8px rgba(15, 50, 70, 0.06);
}
.prod-bucket-expand.open { display: block; animation: prodBucketIn 0.2s ease-out; }
@keyframes prodBucketIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
.prod-bucket-expand-h {
display: flex; align-items: center; gap: 10px;
font-size: 13.5px; color: var(--navy);
margin-bottom: 10px; padding-bottom: 8px;
border-bottom: 1px solid var(--rule);
}
.prod-bucket-expand-h b { font-size: 15px; color: var(--navy-deep); }
.prod-bucket-export { margin-left: auto; }
.prod-bucket-close {
background: transparent; border: 0;
font-size: 16px; color: var(--muted);
cursor: pointer;
padding: 2px 8px; border-radius: 4px;
transition: background 0.15s, color 0.15s;
}
.prod-bucket-close:hover { background: #f3f4f6; color: var(--danger); }
/* View-mode pill switch */
.prod-view-switch {
display: inline-flex;
margin-left: 12px;
border: 1px solid var(--rule); border-radius: 8px;
overflow: hidden;
vertical-align: middle;
}
.prod-view-switch button {
background: #fff; color: var(--navy);
border: 0; padding: 5px 14px;
font-size: 11.5px; font-weight: 700;
cursor: pointer; transition: background 0.15s;
}
.prod-view-switch button + button { border-left: 1px solid var(--rule); }
.prod-view-switch button:hover { background: var(--soft); }
.prod-view-switch button.active {
background: var(--accent); color: var(--navy-deep);
}
/* Filter bar for Category + Brand dropdowns at top of Products view */
.prod-filterbar {
display: flex; gap: 14px; align-items: center;
margin: 8px 0 12px;
font-size: 12px;
}
.prod-filterbar label {
display: flex; align-items: center; gap: 6px;
font-weight: 700; font-size: 11px; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.05em;
}
.prod-filterbar select {
padding: 5px 8px;
border: 1px solid var(--rule); border-radius: 6px;
font-size: 12px;
background: #fff;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--navy);
min-width: 200px;
}
/* Drill-down chips */
.prod-drill {
display: inline-block;
margin: 8px 0 14px;
font-size: 12px; color: var(--muted);
}
.prod-drill b { color: var(--navy); }
.prod-drill-clear {
background: var(--soft); color: var(--danger);
border: 1px solid var(--rule); border-radius: 4px;
width: 18px; height: 18px;
font-size: 12px; line-height: 1; font-weight: 700;
cursor: pointer; margin-left: 4px;
padding: 0;
}
.prod-drill-hint { font-size: 12px; color: var(--muted); font-style: italic; margin: 0 0 10px; }
/* Tables */
table.prod-table { min-width: 1100px; font-size: 12px; border-collapse: collapse; }
table.prod-table thead th {
background: var(--soft); color: var(--navy);
font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
font-size: 10px;
padding: 7px 8px;
border-bottom: 2px solid var(--rule);
text-align: right;
}
table.prod-table thead .prod-name { text-align: left; }
table.prod-table tbody td {
padding: 6px 8px; text-align: right;
border-bottom: 1px solid #f1f4f5;
white-space: nowrap;
}
table.prod-table tbody .prod-num { color: var(--muted); font-size: 11px; min-width: 28px; }
table.prod-table tbody .prod-name { text-align: left; white-space: normal; min-width: 240px; max-width: 340px; }
.prod-name-sub { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
table.prod-table tbody tr:hover td { background: #fafdfc; }
.prod-row-drill { cursor: pointer; }
.prod-row-drill:hover td { background: rgba(38,180,151,0.05) !important; }
/* Segment pills */
.prod-seg {
display: inline-block;
font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 2px 7px; border-radius: 999px;
border: 1px solid transparent;
}
.prod-seg-star { background: var(--ok-soft); color: var(--ok); border-color: rgba(45,134,89,0.25); }
.prod-seg-gem { background: var(--accent-soft);color: #0e8b6f; border-color: rgba(38,180,151,0.30); }
.prod-seg-fix { background: #fff4d6; color: #8a6500; border-color: rgba(138,101,0,0.30); }
.prod-seg-review { background: #fff4d6; color: #8a6500; border-color: rgba(138,101,0,0.30); }
.prod-seg-dead { background: var(--danger-soft); color: var(--danger); border-color: rgba(192,57,43,0.30); }
.prod-seg-monitor { background: var(--soft); color: var(--muted); border-color: var(--rule); }
/* Pager */
.prod-pager {
display: flex; align-items: center; gap: 12px;
margin-top: 14px;
font-size: 12px;
}
.prod-pg {
background: #fff; color: var(--navy);
border: 1px solid var(--rule); border-radius: 6px;
padding: 6px 12px; font-weight: 700; font-size: 12px;
cursor: pointer;
}
.prod-pg:hover:not(:disabled) { background: var(--soft); }
.prod-pg:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.6; }
.prod-pager-info { color: var(--muted); }
/* =======================================================================
* v4.7: Global column sorting for all dashboard tables
* ======================================================================= */
th.th-sortable {
cursor: pointer;
user-select: none;
position: relative;
transition: background 0.12s;
}
th.th-sortable:hover { background: #e7eced !important; }
th.th-sorted { background: rgba(38,180,151,0.10) !important; color: var(--ok) !important; }
.th-arrow {
display: inline-block;
font-size: 9px;
margin-left: 3px;
vertical-align: 1px;
color: var(--accent);
font-weight: 700;
}
th.th-sorted .th-arrow { color: var(--ok); }
/* Don't show the cursor affordance on opt-out columns */
th.th-no-sort { cursor: default; }
/* =======================================================================
* v4.7: Themes Overview
* ======================================================================= */
.kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpi-grid-4 { grid-template-columns: 1fr; } }
/* n-gram pill switch (1 / 2 / 3) */
.theme-gram-switch {
display: inline-flex;
margin-left: 12px;
border: 1px solid var(--rule); border-radius: 8px;
overflow: hidden;
vertical-align: middle;
}
.theme-gram-switch button {
background: #fff; color: var(--navy);
border: 0; padding: 5px 14px;
font-size: 11.5px; font-weight: 700;
cursor: pointer; transition: background 0.15s;
}
.theme-gram-switch button + button { border-left: 1px solid var(--rule); }
.theme-gram-switch button:hover { background: var(--soft); }
.theme-gram-switch button.active { background: var(--accent); color: var(--navy-deep); }
/* Opportunity matrix — 2×2 quadrants */
.theme-matrix {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-bottom: 22px;
}
@media (max-width: 980px) { .theme-matrix { grid-template-columns: 1fr; } }
.theme-quad {
background: #fff;
border: 1px solid var(--rule);
border-top-width: 4px;
border-radius: 12px;
padding: 14px 16px;
display: flex; flex-direction: column;
}
.theme-quad-scale { border-top-color: var(--ok); }
.theme-quad-optimize { border-top-color: #d4a017; }
.theme-quad-investigate { border-top-color: var(--muted); }
.theme-quad-negate { border-top-color: var(--danger); }
.theme-quad-h {
font-size: 13px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--navy);
}
.theme-quad-scale .theme-quad-h { color: var(--ok); }
.theme-quad-optimize .theme-quad-h { color: #8a6500; }
.theme-quad-investigate .theme-quad-h { color: var(--muted); }
.theme-quad-negate .theme-quad-h { color: var(--danger); }
.theme-quad-label { font-size: 13px; }
.theme-quad-sub { font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
.theme-quad-stat {
font-size: 11.5px; color: var(--navy);
padding: 4px 8px; border-radius: 6px;
background: var(--soft); border: 1px solid var(--rule);
margin-bottom: 10px;
display: inline-block;
}
.theme-quad-clusters {
flex: 1 1 auto;
display: flex; flex-direction: column; gap: 10px;
font-size: 12px;
}
.theme-cluster {
padding: 6px 10px;
background: rgba(38,180,151,0.03);
border-left: 3px solid var(--rule);
border-radius: 4px;
}
.theme-quad-scale .theme-cluster { border-left-color: var(--ok); background: rgba(45,134,89,0.04); }
.theme-quad-optimize .theme-cluster { border-left-color: #d4a017; background: rgba(212,160,23,0.04); }
.theme-quad-investigate .theme-cluster { border-left-color: var(--muted); background: var(--soft); }
.theme-quad-negate .theme-cluster { border-left-color: var(--danger); background: rgba(192,57,43,0.04); }
.theme-cluster-h {
font-size: 11.5px; font-weight: 700; color: var(--navy);
display: flex; align-items: baseline; justify-content: space-between;
gap: 6px; margin-bottom: 4px;
flex-wrap: wrap;
}
.theme-cluster-stat { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.theme-cluster-ngrams { display: flex; flex-wrap: wrap; gap: 4px; }
.theme-ngram {
display: inline-block;
padding: 1px 7px; border-radius: 4px;
background: #fff;
border: 1px solid var(--rule);
font-size: 11px; color: var(--navy);
font-style: italic;
}
.theme-quad-empty { color: var(--muted); font-style: italic; }
.theme-quad-foot {
margin-top: 10px; padding-top: 8px;
border-top: 1px dashed var(--rule);
font-size: 11px; color: var(--muted); font-style: italic;
}
/* Quadrant pills in the detail table */
.theme-pill {
display: inline-block;
font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 2px 8px; border-radius: 999px;
border: 1px solid transparent;
}
.theme-pill-scale { background: var(--ok-soft); color: var(--ok); border-color: rgba(45,134,89,0.25); }
.theme-pill-optimize { background: #fff4d6; color: #8a6500; border-color: rgba(138,101,0,0.25); }
.theme-pill-investigate { background: var(--soft); color: var(--muted); border-color: var(--rule); }
.theme-pill-negate { background: var(--danger-soft); color: var(--danger); border-color: rgba(192,57,43,0.30); }
/* Detail table */
table.theme-table { min-width: 1200px; font-size: 12px; border-collapse: collapse; }
table.theme-table thead th {
background: var(--soft); color: var(--navy);
font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
font-size: 10px;
padding: 7px 8px;
border-bottom: 2px solid var(--rule);
text-align: right;
}
table.theme-table thead th:nth-child(1),
table.theme-table thead th:nth-child(2) { text-align: left; }
table.theme-table tbody td {
padding: 6px 8px;
text-align: right;
border-bottom: 1px solid #f1f4f5;
white-space: nowrap;
}
table.theme-table tbody td:nth-child(1),
table.theme-table tbody td:nth-child(2),
table.theme-table tbody td.theme-preview { text-align: left; }
table.theme-table tbody td.theme-preview {
white-space: normal;
min-width: 320px; max-width: 480px;
color: var(--navy);
font-style: italic;
font-size: 11.5px;
}
.theme-row-sub { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
table.theme-table tbody tr:hover td { background: #fafdfc; }
/* Cluster-row drill-down */
table.theme-table tbody .theme-row { cursor: pointer; }
table.theme-table tbody .theme-row-open td { background: rgba(38,180,151,0.06); }
.theme-row-expand {
display: inline-block;
margin-left: 8px;
font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--accent);
padding: 1px 6px; border-radius: 4px;
border: 1px solid rgba(38,180,151,0.30);
background: var(--accent-soft);
vertical-align: 1px;
}
.theme-row:hover .theme-row-expand { background: var(--accent); color: var(--navy-deep); }
.theme-row-open .theme-row-expand::before { content: '↑ '; }
.theme-row-open .theme-row-expand { content: 'expand ↑'; }
/* Drill-down sub-row panel */
.theme-ngram-row > td { padding: 0 !important; background: var(--soft) !important; border-bottom: 2px solid var(--accent) !important; }
.theme-ngram-panel { padding: 14px 18px; }
.theme-ngram-panel-h {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 10px;
font-size: 13px; color: var(--navy);
}
.theme-ngram-panel-sub { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.theme-ngram-loading {
padding: 16px; text-align: center; color: var(--muted);
font-size: 13px;
}
table.theme-ngram-table {
min-width: 800px; font-size: 12px; border-collapse: collapse;
background: #fff;
}
table.theme-ngram-table thead th {
background: rgba(38,180,151,0.10); color: var(--navy);
font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
font-size: 10px; padding: 7px 8px;
border-bottom: 2px solid var(--accent);
text-align: right;
}
table.theme-ngram-table thead th:nth-child(1),
table.theme-ngram-table thead th:nth-child(2) { text-align: left; }
table.theme-ngram-table tbody td {
padding: 5px 8px; text-align: right;
border-bottom: 1px solid #f1f4f5;
}
table.theme-ngram-table tbody .theme-ngram-num { color: var(--muted); font-size: 11px; min-width: 28px; text-align: right; }
table.theme-ngram-table tbody .theme-ngram-word { text-align: left; }
table.theme-ngram-table tbody tr:hover td { background: #fafdfc; }
/* =======================================================================
* v4.7: PMax Dashboard
* ======================================================================= */
table.pmax-net-table { min-width: 1700px; font-size: 12px; border-collapse: collapse; }
table.pmax-net-table thead th {
background: var(--soft); color: var(--navy);
font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
font-size: 10px; padding: 7px 6px;
border-bottom: 2px solid var(--rule); text-align: right;
}
table.pmax-net-table thead th:first-child { text-align: left; }
table.pmax-net-table tbody td {
padding: 6px 6px; text-align: right;
border-bottom: 1px solid #f1f4f5;
white-space: nowrap;
}
table.pmax-net-table tbody .pmax-net-name { text-align: left; min-width: 140px; }
table.pmax-net-table tbody tr:hover td { background: #fafdfc; }
.pmax-spark-cell { padding: 4px 8px !important; }
.pmax-spark { vertical-align: middle; }
/* Branded vs Non-Branded — two side-by-side cards */
.pmax-bvnb-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-bottom: 22px;
}
@media (max-width: 900px) { .pmax-bvnb-grid { grid-template-columns: 1fr; } }
.pmax-bvnb {
background: #fff; border: 1px solid var(--rule);
border-top-width: 4px; border-radius: 12px;
padding: 16px 18px;
}
.pmax-bvnb-branded { border-top-color: var(--accent); }
.pmax-bvnb-non-branded { border-top-color: #d4a017; }
.pmax-bvnb-h {
font-size: 13px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--navy); margin-bottom: 10px;
}
.pmax-bvnb-branded .pmax-bvnb-h { color: var(--accent); }
.pmax-bvnb-non-branded .pmax-bvnb-h { color: #8a6500; }
.pmax-bvnb-rows { display: flex; flex-direction: column; gap: 0; }
.pmax-bvnb-row {
display: grid; grid-template-columns: 110px 1fr 1fr 90px;
gap: 10px; padding: 7px 0;
border-bottom: 1px dashed var(--rule);
font-size: 12.5px; align-items: center;
}
.pmax-bvnb-row:last-child { border-bottom: 0; }
.pmax-bvnb-label { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pmax-bvnb-val { color: var(--navy); }
.pmax-bvnb-prev { color: var(--muted); font-size: 11.5px; }
.pmax-bvnb-delta { text-align: right; }
.pmax-bvnb-empty { color: var(--muted); font-style: italic; font-size: 12.5px; }
/* Asset groups table */
table.pmax-ag-table { min-width: 1100px; font-size: 12px; border-collapse: collapse; }
table.pmax-ag-table thead th {
background: var(--soft); color: var(--navy);
font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
font-size: 10px; padding: 7px 8px;
border-bottom: 2px solid var(--rule); text-align: right;
}
table.pmax-ag-table thead th:first-child { text-align: left; }
table.pmax-ag-table tbody td {
padding: 6px 8px; text-align: right;
border-bottom: 1px solid #f1f4f5;
white-space: nowrap;
}
table.pmax-ag-table tbody .pmax-ag-name { text-align: left; min-width: 220px; max-width: 320px; white-space: normal; }
.pmax-ag-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
table.pmax-ag-table tbody tr:hover td { background: #fafdfc; }
/* Strength + status pills */
.pmax-strength, .pmax-status {
display: inline-block;
font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 2px 8px; border-radius: 999px;
border: 1px solid transparent;
}
.pmax-strength-excellent { background: var(--ok-soft); color: var(--ok); border-color: rgba(45,134,89,0.30); }
.pmax-strength-good { background: var(--accent-soft);color: #0e8b6f; border-color: rgba(38,180,151,0.30); }
.pmax-strength-average { background: #fff4d6; color: #8a6500; border-color: rgba(138,101,0,0.30); }
.pmax-strength-poor { background: var(--danger-soft); color: var(--danger); border-color: rgba(192,57,43,0.30); }
.pmax-strength-pending { background: var(--soft); color: var(--muted); border-color: var(--rule); }
.pmax-status-enabled { background: var(--ok-soft); color: var(--ok); border-color: rgba(45,134,89,0.30); }
.pmax-status-paused { background: var(--soft); color: var(--muted); border-color: var(--rule); }
.pmax-status-removed { background: var(--danger-soft); color: var(--danger); border-color: rgba(192,57,43,0.30); }
/* =======================================================================
* v4.7: Impression Share
* ======================================================================= */
table.is-cmp-table { min-width: 1100px; font-size: 12px; border-collapse: collapse; }
table.is-cmp-table thead th {
background: var(--soft); color: var(--navy);
font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
font-size: 10px; padding: 7px 8px;
border-bottom: 2px solid var(--rule); text-align: right;
}
table.is-cmp-table thead th:first-child { text-align: left; }
table.is-cmp-table tbody td {
padding: 6px 8px; text-align: right;
border-bottom: 1px solid #f1f4f5;
white-space: nowrap;
}
table.is-cmp-table tbody .is-cmp-name {
text-align: left;
min-width: 240px; max-width: 320px;
white-space: normal;
position: sticky; left: 0; background: #fff; z-index: 2;
border-right: 2px solid var(--rule);
}
table.is-cmp-table thead th:first-child {
position: sticky; left: 0; background: var(--soft); z-index: 3;
}
.is-cmp-sub { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
table.is-cmp-table tbody tr:hover td { background: #fafdfc; }
table.is-cmp-table tbody tr:hover td.is-cmp-name { background: #fafdfc; }
/* =======================================================================
* v4.9: Dashboard templates — section-checkbox grid (admin)
* ======================================================================= */
.tmpl-section-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 6px;
margin-top: 6px;
padding: 12px;
background: var(--soft);
border: 1px solid var(--rule);
border-radius: 8px;
}
.tmpl-section-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px;
background: #fff;
border: 1px solid var(--rule);
border-radius: 6px;
font-size: 12.5px;
cursor: pointer;
transition: background 0.15s;
}
.tmpl-section-row:hover { background: var(--accent-soft); }
.tmpl-section-row code {
margin-left: auto;
font-size: 10.5px;
color: var(--muted);
background: var(--soft);
padding: 1px 6px;
border-radius: 4px;
}
/* v4.11 — granular per-chart visibility (section row + nested sub-grid) */
.tmpl-section-row-v2 {
display: block;
cursor: default;
padding: 0;
}
.tmpl-section-row-v2 .tmpl-section-head {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
cursor: pointer;
border-radius: 6px;
}
.tmpl-section-row-v2 .tmpl-section-head:hover { background: var(--accent-soft); }
.tmpl-section-row-v2 code {
margin-left: auto;
font-size: 10.5px;
color: var(--muted);
background: var(--soft);
padding: 1px 6px;
border-radius: 4px;
}
.tmpl-sub-expand {
color: var(--accent); font-size: 14px; font-weight: 700;
cursor: pointer;
padding: 0 4px;
margin-left: 4px;
user-select: none;
}
.tmpl-sub-expand:hover { color: var(--navy-deep); }
.tmpl-sub-grid {
border-top: 1px dashed var(--rule);
padding: 8px 10px 10px 26px;
background: #fafbfc;
border-radius: 0 0 6px 6px;
}
.tmpl-sub-all-row {
display: flex; align-items: center; gap: 6px;
font-size: 11.5px;
color: var(--navy);
margin-bottom: 6px;
padding-bottom: 6px;
border-bottom: 1px dashed var(--rule);
cursor: pointer;
}
.tmpl-sub-list {
display: grid;
grid-template-columns: 1fr;
gap: 3px;
}
.tmpl-sub-item {
display: flex; align-items: center; gap: 6px;
padding: 3px 4px;
font-size: 11.5px;
cursor: pointer;
border-radius: 4px;
}
.tmpl-sub-item:hover { background: var(--accent-soft); }
.tmpl-sub-item code {
margin-left: auto;
font-size: 10px;
color: var(--muted);
background: var(--soft);
padding: 0 5px;
border-radius: 4px;
}
/* Metrics explained legend at the bottom of the Impression Share section */
.is-legend {
background: #fff;
border: 1px solid var(--rule);
border-top: 3px solid var(--navy);
border-radius: 12px;
padding: 18px 22px;
font-size: 13px;
line-height: 1.55;
}
.is-legend-row {
display: grid; grid-template-columns: 180px 1fr; gap: 18px;
padding: 10px 0;
align-items: baseline;
}
.is-legend-row + .is-legend-row { border-top: 1px dashed var(--rule); }
.is-legend-label {
font-weight: 800;
font-size: 12.5px;
}
.is-legend-label-is { color: var(--navy); }
.is-legend-label-top { color: #d4a017; }
.is-legend-label-abs { color: var(--accent); }
.is-legend-label-rank { color: var(--danger); }
.is-legend-label-budget { color: #d4a017; }
.is-legend-label-sum { color: var(--navy); }
.is-legend-text {
color: var(--navy);
}
@media (max-width: 700px) {
.is-legend-row { grid-template-columns: 1fr; gap: 4px; }
}
/* Status pills (per-market CPO/ROAS rows + top KPI cards). */
.mtd-status {
display: inline-block;
font-size: 10.5px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 2px 9px; border-radius: 999px;
border: 1px solid transparent;
}
.mtd-status-on-track { background: var(--ok-soft); color: var(--ok); border-color: rgba(45,134,89,0.25); }
.mtd-status-watch { background: #fff4d6; color: #8a6500; border-color: rgba(138,101,0,0.25); }
.mtd-status-above { background: var(--danger-soft); color: var(--danger); border-color: rgba(192,57,43,0.30); }
.mtd-status-below { background: var(--danger-soft); color: var(--danger); border-color: rgba(192,57,43,0.30); }
.mtd-status-na { background: var(--soft); color: var(--muted); border-color: var(--rule); }
table.mtd-table { min-width: 720px; font-size: 12.5px; }
table.mtd-table .mtd-mkt { text-align: left; }
table.mtd-table tfoot .mtd-total td {
background: rgba(46,94,111,0.06);
font-weight: 800;
border-top: 2px solid var(--navy);
}
table.mtd-table tfoot .mtd-total td.mtd-mkt { background: rgba(46,94,111,0.08); }
/* Pacing bar in the "% of monthly target" column */
.mtd-pace-cell {
position: relative; min-width: 160px;
text-align: right;
}
.mtd-pace-bar {
display: inline-block;
width: 110px; height: 8px;
background: var(--soft);
border-radius: 999px;
overflow: hidden;
margin-right: 8px;
vertical-align: middle;
border: 1px solid var(--rule);
}
.mtd-pace-fill {
display: block; height: 100%;
background: var(--accent);
transition: width 0.4s ease;
}
.mtd-pace-bar.mtd-pace-good .mtd-pace-fill { background: var(--ok); }
.mtd-pace-bar.mtd-pace-watch .mtd-pace-fill { background: #d4a017; }
.mtd-pace-bar.mtd-pace-bad .mtd-pace-fill { background: var(--danger); }
.mtd-pace-bar.mtd-pace-flat .mtd-pace-fill { background: var(--muted); }
.mtd-pace-label {
font-weight: 700; color: var(--navy);
font-variant-numeric: tabular-nums;
}
/* Admin-only targets editor */
.mtd-editor {
margin-top: 28px; padding-top: 18px;
border-top: 1px dashed var(--rule);
}
.mtd-editor table.dash-table input {
width: 100%;
padding: 5px 8px;
font-size: 12.5px;
border: 1px solid var(--rule); border-radius: 6px;
background: #fff;
box-sizing: border-box;
}
.mtd-editor table.dash-table .mtd-editor-add { background: rgba(38,180,151,0.04); }
.mtd-editor table.dash-table .mtd-editor-add input { background: #fff; }
.mtd-editor-actions {
display: flex; align-items: center; gap: 12px;
margin-top: 12px;
}
.mtd-editor-status {
font-size: 12px; color: var(--muted);
}
.mtd-editor-status-ok { color: var(--ok); }
.mtd-editor-status-err { color: var(--danger); }
/* Per-row × delete button in the targets editor */
.mtd-editor-rm-th { width: 36px; }
.mtd-editor-rm { width: 36px; text-align: center !important; padding: 4px !important; }
.btn-rm-market {
background: transparent;
color: var(--muted);
border: 1px solid var(--rule);
width: 26px; height: 26px;
border-radius: 6px;
font-size: 16px; line-height: 1; font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
}
.btn-rm-market:hover {
background: var(--danger-soft);
color: var(--danger);
border-color: rgba(192,57,43,0.30);
}
/* Diagnostic block (admin) when raw market values across sources don't match */
.mtd-debug {
margin-top: 24px;
padding: 14px 16px;
background: #fff8e6;
border: 1px solid #f0c987;
border-radius: 10px;
font-size: 12px;
}
.mtd-debug summary {
cursor: pointer;
font-weight: 700;
color: #8a6500;
}
.mtd-debug summary:hover { color: #6a4d00; }
.mtd-debug-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
@media (max-width: 900px) { .mtd-debug-grid { grid-template-columns: 1fr; } }
.mtd-debug-h {
font-size: 10.5px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--navy);
margin-bottom: 4px;
}
.mtd-debug code {
display: block;
background: #fff;
border: 1px solid var(--rule);
border-radius: 6px;
padding: 6px 8px;
font-size: 11.5px;
color: var(--navy);
word-break: break-word;
}
.mtd-debug-foot {
margin: 12px 0 0; font-size: 11.5px; color: #6a4d00; line-height: 1.5;
}
/* Trend chart container */
.dash-chart {
background: #fff; border: 1px solid var(--rule); border-radius: 12px;
padding: 16px 20px; margin-bottom: 22px;
}
.dash-chart-title {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--navy);
margin-bottom: 8px;
}
.dash-chart canvas { width: 100% !important; height: 280px !important; }
/* Tables */
.dash-table-wrap { overflow-x: auto; position: relative; }
table.dash-table {
min-width: 700px;
font-size: 12.5px;
}
table.dash-table th {
font-size: 10px;
}
table.dash-table td .delta-pill { margin-left: 6px; }
/* ----------------------------------------------------------------------
* v5.40 — Sticky dimension columns for ALL dashboard tables.
*
* Keeps the leftmost identifier cell visible when the table is scrolled
* horizontally so the user never loses track of which row a value
* belongs to. The .daily-table has its own (more elaborate) sticky rules
* earlier in this file for d-day + d-date; this block covers the rest:
*
* • Default: every .dash-table's first | / | becomes sticky.
* Catches Channels, MTD targets, Markets, Campaigns, Creatives, …
* • Products / Categories / Brands tables (.prod-table): freeze the
* .prod-name column instead (the human-readable identifier), since
* column 1 there is just a # counter. When .prod-num precedes
* .prod-name (Products view), .prod-num also pins to left: 0 and
* .prod-name shifts right past it.
*
* Background must be opaque (not inherit) — sticky cells are lifted out
* of the row flow so scrolled body cells would otherwise show through.
* Hover + nth-child striping rules add matching overrides further down.
* ---------------------------------------------------------------------- */
/* v5.40 — CRITICAL: position:sticky on | / | requires the table to
use border-collapse: separate. With `collapse` (the default for most
dashboard tables defined further up this file), sticky positioning is
computed but never actually honored during scroll — cells move WITH the
scrolled content despite having `position: sticky` set. Override here
with !important to defeat the more-specific per-table rules above.
ALSO CRITICAL: `table.data` (further up) sets `overflow: hidden` so the
rounded border-radius clips content. But `overflow: hidden` between a
sticky cell and its intended scroll container hijacks the sticky scroll
context — the table becomes the sticky reference instead of the wrap.
Since the table itself doesn't scroll (the wrap does), sticky has no
axis to react to and cells just move with the scrolled content. We
force overflow: visible on every dashboard table to release sticky
back to the wrap, which is the intended scroll container. The
border-radius clipping is handled by the wrap itself in practice. */
table.dash-table,
table.ch-table,
table.daily-table,
table.cmp-table,
table.cr-table,
table.theme-table,
table.prod-table,
table.pmax-net-table,
table.pmax-ag-table,
table.is-cmp-table,
table.mtd-table {
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: visible !important;
}
/* Default: first-column freeze across every dashboard table.
IMPORTANT: thead targets `tr:first-of-type` only. Tables with two-row
headers (Channels, Daily, Creatives) use rowspan="2" on the dimension
column in the FIRST row; the SECOND row's first cell is a metric (TW /
Spends / etc.) and must NOT be made sticky — otherwise it overlaps and
hides the actual rowspan'd dimension column. */
table.dash-table > thead > tr:first-of-type > th:first-child,
table.dash-table > tbody > tr > td:first-child,
table.dash-table > tfoot > tr > td:first-child,
table.dash-table > tfoot > tr > th:first-child {
position: sticky;
left: 0;
z-index: 2;
background: #fff;
box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.06);
}
table.dash-table > thead > tr:first-of-type > th:first-child {
z-index: 3;
background: var(--soft, #f8fafc);
}
/* Striped + hovered row backgrounds need explicit overrides on the
sticky cell or the scrolling content shows through. */
table.dash-table > tbody > tr:nth-child(even) > td:first-child { background: #fafbfc; }
table.dash-table > tbody > tr:hover > td:first-child { background: #fafdfc; }
/* Products / Categories / Brands: freeze .prod-name (the real identifier)
instead of the leading # column. When .prod-num exists (Products view),
.prod-num itself stays sticky at left:0 and .prod-name shifts right
to sit just past it (40px ≈ .prod-num's natural rendered width including
padding). */
table.prod-table thead .prod-name,
table.prod-table tbody .prod-name {
position: sticky;
left: 0;
z-index: 2;
background: #fff;
border-right: 1px solid var(--rule);
}
table.prod-table thead .prod-name { z-index: 3; background: var(--soft, #f8fafc); }
/* When .prod-num precedes .prod-name in the same row (Products view only),
shift .prod-name right by ~40px so it doesn't overlap. */
table.prod-table thead .prod-num + .prod-name,
table.prod-table tbody .prod-num + .prod-name {
left: 40px;
}
table.prod-table thead .prod-num,
table.prod-table tbody .prod-num {
position: sticky;
left: 0;
z-index: 2;
background: #fff;
}
table.prod-table thead .prod-num { z-index: 3; background: var(--soft, #f8fafc); }
/* Hover state for .prod-table sticky cells. */
table.prod-table tbody tr:hover .prod-num,
table.prod-table tbody tr:hover .prod-name { background: #fafdfc; }
/* prod-row-drill (clickable rows in Categories / Brands) — also stick. */
table.prod-table tbody tr.prod-row-drill:hover .prod-num,
table.prod-table tbody tr.prod-row-drill:hover .prod-name {
background: rgba(38,180,151,0.06);
}
.dash-loading {
text-align: center; color: var(--muted);
padding: 40px; font-size: 14px;
background: #fff; border: 1px solid var(--rule); border-radius: 12px;
}
/* =======================================================================
* v4.7: Compact filter bar (preset-driven)
* ======================================================================= */
.dash-filterbar-compact {
display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
padding: 14px 16px;
}
.dash-filterbar-compact .field {
min-width: 0;
flex: 0 0 auto;
}
.dash-filterbar-compact .field select,
.dash-filterbar-compact .field input[type="text"],
.dash-filterbar-compact .field input[type="date"] {
min-width: 160px;
}
.dash-filterbar-compact .field[data-section-only] select,
.dash-filterbar-compact .field[data-section-only] input { min-width: 140px; }
.dash-custom-dates[hidden] { display: none !important; }
.dash-custom-range {
display: flex; gap: 6px; align-items: center;
}
.dash-custom-range input[type="date"] {
flex: 1 1 0;
min-width: 130px !important;
}
.dash-range-sep { color: var(--muted); font-size: 12px; padding: 0 2px; }
.dash-filter-summary {
flex-basis: 100%;
margin-top: 4px;
font-size: 11.5px;
color: var(--muted);
letter-spacing: 0.02em;
padding-top: 6px;
border-top: 1px dashed var(--rule);
}
.dash-filter-summary b { color: var(--navy); font-weight: 700; }
.dash-summary-sep { color: var(--rule); padding: 0 6px; }
/* =======================================================================
* v4.7: Topline — section titles + backend (Shopify) cards
* ======================================================================= */
.dash-section-title {
font-size: 13px; font-weight: 800; color: var(--navy);
text-transform: uppercase; letter-spacing: 0.10em;
margin: 22px 0 12px;
padding-bottom: 6px;
border-bottom: 2px solid var(--accent);
}
.dash-section-title:first-child { margin-top: 0; }
.dash-section-title .dash-section-sub {
font-size: 11px; font-weight: 500;
color: var(--muted); letter-spacing: 0.05em;
text-transform: none;
margin-left: 8px;
}
.dash-subsection-title {
font-size: 11.5px; font-weight: 700; color: var(--navy);
text-transform: uppercase; letter-spacing: 0.08em;
margin: 18px 0 10px;
}
.kpi-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) { .kpi-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) { .kpi-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .kpi-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpi-grid-4 { grid-template-columns: 1fr; } }
/* Backend cards get a deeper teal top border so the user can see at a glance which
row is the Shopify source-of-truth set vs the GA4-reported set. */
.kpi-card-backend { border-top-color: var(--navy); }
.kpi-card-new { border-top-color: #26b497; }
.kpi-card-ret { border-top-color: #2E86AB; }
/* Backend-vs-GA4 reconciliation card. */
.reconcile-card {
background: #fff; border: 1px solid var(--rule); border-radius: 12px;
padding: 16px 20px; margin-bottom: 22px;
border-left: 4px solid var(--navy);
}
.reconcile-title {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--navy);
margin-bottom: 12px;
}
.reconcile-grid {
display: grid; gap: 8px;
}
.reconcile-row {
display: grid; grid-template-columns: 90px 1fr;
align-items: center; gap: 12px;
padding: 6px 0;
}
.reconcile-row + .reconcile-row { border-top: 1px dashed var(--rule); }
.reconcile-row-label {
font-size: 11px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.06em;
}
.reconcile-row-vals {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
font-size: 13px; color: var(--navy);
}
.reconcile-sep { color: var(--rule); padding: 0 4px; }
.reconcile-gap {
margin-left: auto;
font-weight: 800; font-size: 13px;
padding: 3px 10px; border-radius: 999px;
}
.reconcile-gap.gap-ok { background: var(--ok-soft); color: var(--ok); }
.reconcile-gap.gap-warn { background: #fff4d6; color: #8a6500; }
.reconcile-gap.gap-alert { background: var(--danger-soft); color: var(--danger); }
.reconcile-gap.gap-flat { background: var(--soft); color: var(--muted); }
.reconcile-foot {
margin-top: 10px; font-size: 11px; color: var(--muted);
font-style: italic; line-height: 1.4;
}
/* ===========================================================================
* v4.18 — Stickers
*
* Three surfaces share these styles:
* 1. .stk-tray shared popover (composer + quick-react)
* 2. .msg-sticker sticker-as-message bubble in chat
* 3. .rx-pill-sticker sticker-as-reaction pill
* 4. .stk-admin-* Admin Panel → Stickers UI
* ======================================================================== */
/* ----- Shared sticker tray (popover) ----- */
.stk-tray {
background: #fff;
border: 1px solid var(--rule);
border-radius: 12px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
width: 360px; max-width: 92vw;
max-height: 340px;
overflow: hidden;
display: flex; flex-direction: column;
}
.stk-tray[hidden] { display: none; }
.stk-tray-empty {
padding: 22px 16px; text-align: center; color: var(--muted);
font-size: 13px;
}
.stk-tray-empty a { color: var(--accent); font-weight: 700; }
.stk-tray-tabs {
display: flex; gap: 2px; padding: 6px 6px 0;
background: var(--soft); border-bottom: 1px solid var(--rule);
overflow-x: auto;
}
.stk-tray-tab {
background: transparent; border: 0;
padding: 6px 10px; border-radius: 6px 6px 0 0;
font-size: 12px; font-weight: 600; color: var(--muted);
cursor: pointer; white-space: nowrap;
}
.stk-tray-tab.active {
background: #fff; color: var(--navy);
border: 1px solid var(--rule); border-bottom-color: #fff;
margin-bottom: -1px;
}
.stk-tray-panels { flex: 1; overflow-y: auto; }
.stk-tray-panel { display: none; padding: 10px; }
.stk-tray-panel.active { display: block; }
.stk-tray-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.stk-tray-item {
background: var(--soft);
border: 1px solid transparent;
border-radius: 8px;
padding: 6px;
cursor: pointer;
transition: border-color .1s, background .1s, transform .1s;
}
.stk-tray-item:hover {
border-color: var(--accent);
background: #fff;
transform: translateY(-1px);
}
.stk-tray-item img {
display: block; width: 100%; height: auto;
max-height: 64px; object-fit: contain;
}
/* Personal tab — star prefix + warmer tint so it reads as "yours". */
.stk-tray-tab-personal { color: var(--accent); }
.stk-tray-tab-personal.active { color: var(--navy); }
/* Per-tile delete badge on personal stickers (hidden until hover). */
.stk-tray-item { position: relative; }
.stk-tray-item-del {
position: absolute; top: 2px; right: 2px;
width: 18px; height: 18px; border-radius: 50%;
background: rgba(255,255,255,0.92); color: var(--muted);
font-size: 10px; font-weight: 700;
display: none; align-items: center; justify-content: center;
border: 1px solid var(--rule);
cursor: pointer;
}
.stk-tray-item:hover .stk-tray-item-del { display: inline-flex; }
.stk-tray-item-del:hover { color: var(--danger); border-color: var(--danger); }
/* Tray footer — personal upload form. Shows under the panels regardless
of which tab is open, but only does anything when the user picks a file. */
.stk-tray-foot {
border-top: 1px solid var(--rule);
padding: 8px 10px;
display: flex; gap: 8px; align-items: center;
background: var(--soft);
}
.stk-tray-upload {
position: relative;
cursor: pointer;
background: #fff;
border: 1px dashed var(--accent);
color: var(--accent);
padding: 6px 10px;
border-radius: 6px;
font-size: 11.5px; font-weight: 700;
}
.stk-tray-upload:hover { background: var(--accent-soft); }
.stk-tray-upload input[type="file"] {
position: absolute; inset: 0;
opacity: 0; cursor: pointer;
}
.stk-tray-foot input[type="text"] {
flex: 1;
border: 1px solid var(--rule);
border-radius: 6px;
padding: 6px 8px;
font: inherit; font-size: 12px; color: var(--ink);
min-width: 0;
}
/* In the chat composer the tray pops up above the composer foot */
.slack-composer .stk-tray {
position: absolute; bottom: 60px; left: 12px;
z-index: 50;
}
/* ----- Sticker as a chat message bubble (no chrome) ----- */
.msg-sticker {
margin-top: 4px;
}
.msg-sticker img {
display: block;
max-height: 140px; width: auto; max-width: 220px;
background: transparent;
}
/* ----- Sticker reaction pill ----- */
.rx-pill-sticker {
padding: 2px 6px;
display: inline-flex; align-items: center; gap: 4px;
}
.rx-stk-img {
display: inline-block;
height: 22px; width: auto;
vertical-align: middle;
}
/* ----- Quick-react popover: sticker subsection ----- */
.qr-stickers {
padding: 8px 6px 4px;
border-top: 1px solid var(--rule);
max-height: 260px;
overflow-y: auto;
}
.qr-stickers-head {
font-size: 10.5px; font-weight: 800;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
padding: 0 4px 6px;
}
.qr-stickers .stk-tray-tabs { background: transparent; padding: 0 0 4px; }
.qr-stickers .stk-tray-tab { padding: 4px 8px; font-size: 11px; }
.qr-stickers .stk-tray-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.qr-stickers .stk-tray-item img { max-height: 48px; }
/* ----- Feed sticker post / comment ----- */
.tile-sticker {
margin: 6px 0;
padding: 4px;
background: transparent;
}
.tile-sticker img {
display: block;
max-height: 180px; width: auto; max-width: 240px;
margin: 0 auto;
}
.tc-bubble-sticker {
background: transparent !important;
border: none;
padding-left: 0; padding-right: 0;
}
.tc-sticker img {
display: block;
max-height: 100px; width: auto; max-width: 180px;
}
.comment-sticker-btn {
background: transparent; border: 0;
font-size: 16px; cursor: pointer;
padding: 4px 8px;
color: var(--muted);
transition: color .1s;
}
.comment-sticker-btn:hover { color: var(--accent); }
/* ----- Admin Panel → Stickers ----- */
.stk-admin {
display: grid;
grid-template-columns: 260px 1fr;
gap: 18px;
margin-top: 8px;
}
@media (max-width: 900px) { .stk-admin { grid-template-columns: 1fr; } }
.stk-admin-side {
background: var(--soft);
border: 1px solid var(--rule);
border-radius: 10px;
padding: 12px;
}
.stk-admin-main {
background: #fff;
border: 1px solid var(--rule);
border-radius: 10px;
padding: 16px;
}
.stk-admin-h {
margin: 0 0 8px;
font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--navy);
}
.stk-admin-h em { font-style: normal; color: var(--accent); }
.stk-admin-h-sub {
font-size: 11px; color: var(--muted); font-weight: 500;
text-transform: none; letter-spacing: 0;
margin-left: 6px;
}
.stk-pack-list {
list-style: none; padding: 0; margin: 0 0 14px;
display: flex; flex-direction: column; gap: 4px;
}
.stk-pack-empty { color: var(--muted); font-style: italic; font-size: 12px; padding: 8px 0; }
.stk-pack-row a {
display: block; padding: 8px 10px;
border-radius: 6px;
text-decoration: none; color: var(--ink);
font-size: 13px;
}
.stk-pack-row a:hover { background: #fff; }
.stk-pack-row.active a {
background: var(--accent); color: var(--navy-deep);
font-weight: 700;
}
.stk-pack-name { display: block; font-weight: 600; }
.stk-pack-meta {
display: block;
font-size: 11px; color: var(--muted);
margin-top: 2px;
}
.stk-pack-row.active .stk-pack-meta { color: var(--navy-deep); opacity: 0.7; }
.stk-admin-create, .stk-admin-edit, .stk-admin-upload {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.stk-admin-create label, .stk-admin-edit label, .stk-admin-upload label {
display: flex; flex-direction: column; gap: 4px;
font-size: 11px; color: var(--muted);
font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
flex: 1 1 140px;
}
.stk-admin-create input[type="text"],
.stk-admin-edit input[type="text"],
.stk-admin-upload input[type="text"] {
padding: 6px 9px; border: 1px solid var(--rule); border-radius: 6px;
font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0;
color: var(--ink);
}
.stk-admin-checkbox {
flex-direction: row !important; align-items: center; gap: 6px !important;
text-transform: none !important; letter-spacing: 0 !important;
font-size: 12px !important; color: var(--ink) !important;
font-weight: 600 !important;
flex: 0 0 auto !important;
}
.stk-admin-delete-form { margin-top: 8px; }
.stk-admin-rule {
border: 0; border-top: 1px solid var(--rule);
margin: 18px 0;
}
.stk-admin-file {
position: relative;
overflow: hidden;
display: inline-block;
cursor: pointer;
text-transform: none !important; letter-spacing: 0 !important;
}
.stk-admin-file input[type="file"] {
position: absolute; left: -9999px; opacity: 0;
}
.stk-admin-file-fake {
display: inline-block;
padding: 6px 12px;
border: 1px dashed var(--rule);
border-radius: 6px;
font-size: 12px; color: var(--navy);
font-weight: 600;
}
.stk-admin-file:hover .stk-admin-file-fake { border-color: var(--accent); color: var(--accent); }
.stk-admin-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 10px;
margin-top: 12px;
}
.stk-admin-grid-empty {
grid-column: 1 / -1;
text-align: center;
padding: 28px;
color: var(--muted);
font-style: italic;
}
.stk-admin-tile {
position: relative;
background: var(--soft);
border: 1px solid var(--rule);
border-radius: 8px;
padding: 8px;
display: flex; flex-direction: column;
align-items: center; gap: 4px;
}
.stk-admin-tile img {
display: block;
width: 100%; height: 80px; object-fit: contain;
}
.stk-admin-tile-label {
font-size: 10.5px; color: var(--muted);
text-align: center;
max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stk-admin-tile-del {
position: absolute; top: 2px; right: 2px;
}
.stk-admin-tile-del button {
background: rgba(255,255,255,0.85);
border: 1px solid var(--rule);
width: 22px; height: 22px; border-radius: 50%;
cursor: pointer;
font-size: 11px;
color: var(--muted);
display: inline-flex; align-items: center; justify-content: center;
}
.stk-admin-tile-del button:hover { color: var(--danger); border-color: var(--danger); }
/* ─────────────────────────────────────────────────────────────────────────
v5.42 — Creative preview hover/click UX.
Triggered from .cr-preview-link (in dashboard Creatives tab).
──────────────────────────────────────────────────────────────────────── */
/* The clickable creative name itself. */
.cr-preview-link {
color: var(--navy);
text-decoration: underline;
text-decoration-color: rgba(38, 180, 151, 0.5);
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
cursor: zoom-in;
transition: text-decoration-color .15s ease;
}
.cr-preview-link:hover {
text-decoration-color: #26b497;
}
/* Hover popover — small, anchored absolutely on top of everything. */
.cr-preview-pop {
position: absolute;
z-index: 9999;
background: #fff;
border: 1px solid var(--rule);
border-radius: 6px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
overflow: hidden;
display: flex;
flex-direction: column;
pointer-events: auto;
}
.cr-preview-pop-head {
padding: 6px 10px;
font-size: 11px;
font-weight: 600;
color: var(--navy);
background: #f7f8f9;
border-bottom: 1px solid var(--rule);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cr-preview-pop-body {
flex: 1;
background: #fafafa;
}
.cr-preview-pop-body iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.cr-preview-pop-foot {
padding: 4px 10px;
font-size: 10px;
color: #888;
background: #f7f8f9;
border-top: 1px solid var(--rule);
text-align: center;
}
/* Click modal — full overlay with a centered preview shell. */
.cr-preview-modal-overlay {
position: fixed;
inset: 0;
background: rgba(20, 30, 40, 0.55);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.cr-preview-modal {
background: #fff;
border-radius: 8px;
width: 100%;
max-width: 460px;
height: 100%;
max-height: 760px;
display: flex;
flex-direction: column;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.cr-preview-modal-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--rule);
background: #f7f8f9;
}
.cr-preview-modal-title {
font-size: 13px;
font-weight: 600;
color: var(--navy);
flex: 0 0 auto;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cr-preview-modal-toggle {
display: flex;
gap: 4px;
margin-left: auto;
flex-wrap: wrap;
}
.cr-preview-modal-toggle button {
font-size: 11px;
padding: 4px 10px;
border: 1px solid var(--rule);
background: #fff;
border-radius: 4px;
cursor: pointer;
color: var(--navy);
}
.cr-preview-modal-toggle button.active {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
.cr-preview-modal-close {
background: transparent;
border: 0;
font-size: 24px;
line-height: 1;
color: #666;
cursor: pointer;
padding: 0 6px;
}
.cr-preview-modal-close:hover { color: #c0392b; }
.cr-preview-modal-body {
flex: 1;
background: #f3f4f5;
display: flex;
}
.cr-preview-modal-iframe {
flex: 1;
width: 100%;
height: 100%;
border: 0;
background: #fff;
}
.cr-preview-modal-foot {
padding: 6px 14px;
border-top: 1px solid var(--rule);
background: #f7f8f9;
font-size: 11px;
color: #666;
display: flex;
gap: 10px;
align-items: center;
}
.cr-preview-modal-foot code {
background: #fff;
padding: 1px 6px;
border-radius: 3px;
border: 1px solid var(--rule);
font-size: 10.5px;
}
/* ─────────────────────────────────────────────────────────────────────────
v5.42 — Inline creative thumbnail column.
──────────────────────────────────────────────────────────────────────── */
td.cr-thumb {
width: 64px;
padding: 4px;
text-align: center;
vertical-align: middle;
}
.cr-thumb-img {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 4px;
border: 1px solid var(--rule);
background: #f0f2f4;
cursor: zoom-in;
transition: transform .12s ease, box-shadow .12s ease;
display: inline-block;
}
.cr-thumb-img:hover {
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-color: #26b497;
}
.cr-thumb-na {
display: inline-block;
width: 56px;
height: 56px;
line-height: 56px;
color: #ccc;
font-size: 16px;
border: 1px dashed var(--rule);
border-radius: 4px;
background: #fafafa;
}
/* ─────────────────────────────────────────────────────────────────────────
v5.42 — PMax Branded vs Non-Branded drill panel.
──────────────────────────────────────────────────────────────────────── */
.pmax-bvnb-clickable {
cursor: pointer;
transition: box-shadow .15s ease, transform .15s ease;
}
.pmax-bvnb-clickable:hover {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
transform: translateY(-1px);
}
.pmax-bvnb-drill-hint {
font-size: 11px;
color: #888;
font-weight: 500;
margin-left: 8px;
text-transform: none;
letter-spacing: 0;
}
.pmax-bvnb-clickable:hover .pmax-bvnb-drill-hint { color: var(--accent, #26b497); }
.pmax-bvnb-drill {
margin-top: 16px;
background: #fff;
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
}
.pbd-head {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px; background: #f7f8f9;
border-bottom: 1px solid var(--rule);
}
.pbd-title { font-size: 13px; color: var(--navy); }
.pbd-pageinfo { color: #777; font-size: 11.5px; margin-left: 10px; }
.pbd-actions { margin-left: auto; display: flex; gap: 6px; }
.pbd-actions .btn { font-size: 12px; padding: 5px 12px; }
.pbd-table th, .pbd-table td { font-size: 12.5px; }
.pbd-table .pbd-term { font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 12px; word-break: break-word; max-width: 360px; }
.pbd-foot {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; background: #f7f8f9; border-top: 1px solid var(--rule);
font-size: 12px;
}
.pbd-foot .btn { font-size: 12px; padding: 4px 12px; }
.pbd-foot .btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* v5.42 — Force visible styling for the BvNB drill panel buttons. The
existing .btn-ghost on a grey header/footer was rendering near-invisible. */
.pmax-bvnb-drill .pbd-actions .btn,
.pmax-bvnb-drill .pbd-foot .btn {
background: #fff !important;
color: var(--navy, #1f2d3d) !important;
border: 1px solid var(--rule, #cfd6dc) !important;
font-weight: 600 !important;
padding: 6px 14px !important;
}
.pmax-bvnb-drill .pbd-actions .pbd-csv {
background: var(--accent, #26b497) !important;
color: #fff !important;
border-color: var(--accent, #26b497) !important;
}
.pmax-bvnb-drill .pbd-actions .pbd-csv:hover { filter: brightness(0.95); }
.pmax-bvnb-drill .pbd-actions .pbd-close {
color: #c0392b !important;
border-color: #c0392b !important;
padding: 4px 10px !important;
font-size: 14px !important;
}
.pmax-bvnb-drill .pbd-foot .btn:hover:not(:disabled) {
background: var(--navy, #1f2d3d) !important;
color: #fff !important;
}
.pmax-bvnb-drill .pbd-foot .btn:disabled {
opacity: 0.35 !important;
cursor: not-allowed !important;
}
/* v5.42 — Sortable column headers in the BvNB drill panel. */
.pbd-table th.pbd-th-sort {
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: background .12s ease;
}
.pbd-table th.pbd-th-sort:hover {
background: rgba(38, 180, 151, 0.08);
}
.pbd-table th.pbd-th-active {
background: rgba(38, 180, 151, 0.12);
color: var(--navy, #1f2d3d);
}
.pbd-table th .pbd-sort-arrow {
font-size: 10px;
color: var(--accent, #26b497);
font-weight: 700;
margin-left: 4px;
}
|