/* =================================================================== Account team task scoreboard — wall-display styles Theming is driven by CSS custom properties swapped via the data-theme="dark|light" attribute on . =================================================================== */ /* ---- Dark theme (default) ----------------------------------------- */ :root, :root[data-theme="dark"] { --bg: #1a1917; --panel-bg: #232220; --panel-border: #34322f; --row-border: #2f2d2a; --text: #f3f1ee; --text-muted: #8b8782; --text-faint: #6f6b66; --kpi-action: #f26a5f; --kpi-progress: #f0a93a; --pill-action-bg: #3a1f1c; --pill-action-fg: #f4796d; --pill-action-dot: #e7574b; --pill-progress-bg: #3a2e16; --pill-progress-fg: #f0b048; --pill-progress-dot:#e09a2e; --pill-zero-bg: #2c2b28; --pill-zero-fg: #8b8782; --toggle-bg: #2c2b28; --toggle-border: #3f3d39; --toggle-hover: #36342f; color-scheme: dark; } /* ---- Light theme -------------------------------------------------- */ :root[data-theme="light"] { --bg: #f4f3f1; --panel-bg: #ffffff; --panel-border: #e4e1dc; --row-border: #ebe9e5; --text: #201e1b; --text-muted: #6c6863; --text-faint: #928d86; --kpi-action: #d4392f; --kpi-progress: #b9760f; --pill-action-bg: #fae3e1; --pill-action-fg: #b8332a; --pill-action-dot: #d4392f; --pill-progress-bg: #f7e8ca; --pill-progress-fg: #8f5f0d; --pill-progress-dot:#c9881c; --pill-zero-bg: #ecebe8; --pill-zero-fg: #87827c; --toggle-bg: #efede9; --toggle-border: #ddd9d3; --toggle-hover: #e5e2dd; color-scheme: light; } /* ---- Reset / base ------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } .board { max-width: 1280px; margin: 0 auto; padding: clamp(20px, 3vw, 44px); } /* ---- Header ------------------------------------------------------- */ .board__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: clamp(20px, 2.5vw, 34px); } .board__title { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.01em; } .board__meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .board__refresh { color: var(--text-muted); font-size: clamp(.8rem, 1vw, .95rem); white-space: nowrap; } .board__refresh.is-stale { color: var(--kpi-action); } /* ---- Theme toggle ------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; font: inherit; font-size: .85rem; color: var(--text-muted); background: var(--toggle-bg); border: 1px solid var(--toggle-border); border-radius: 999px; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .theme-toggle:hover { background: var(--toggle-hover); color: var(--text); } .theme-toggle__icon { width: 14px; height: 14px; border-radius: 50%; background: var(--kpi-progress); box-shadow: inset -4px -4px 0 0 var(--toggle-bg); } :root[data-theme="light"] .theme-toggle__icon { background: transparent; box-shadow: none; border: 2px solid var(--kpi-progress); } /* ---- KPI tiles ---------------------------------------------------- */ .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); margin-bottom: clamp(20px, 2.4vw, 32px); } .kpi { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 14px; padding: clamp(18px, 2vw, 28px); } .kpi__label { text-transform: uppercase; letter-spacing: .06em; font-size: clamp(.72rem, .9vw, .85rem); font-weight: 600; color: var(--text-muted); margin-bottom: 10px; } .kpi__glyph { margin-right: 4px; } .kpi__value { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; line-height: 1; } .kpi--action .kpi__value { color: var(--kpi-action); } .kpi--progress .kpi__value { color: var(--kpi-progress); } /* ---- Panels ------------------------------------------------------- */ .panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 14px; padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 28px); margin-bottom: clamp(14px, 1.6vw, 22px); } .panel__label { text-transform: uppercase; letter-spacing: .07em; font-size: clamp(.72rem, .9vw, .82rem); font-weight: 700; color: var(--text-muted); margin-bottom: 6px; } /* ---- Apps table --------------------------------------------------- */ .apps { width: 100%; border-collapse: collapse; table-layout: fixed; } .col-name { width: 46%; } .col-num { width: 18%; } .apps th, .apps td { padding: clamp(11px, 1.3vw, 17px) 8px; font-size: clamp(.95rem, 1.25vw, 1.18rem); } .apps__th-name, .apps__th-num { text-transform: uppercase; letter-spacing: .05em; font-size: clamp(.68rem, .85vw, .8rem); font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--row-border); } .apps__th-name { text-align: left; } .apps__th-num { text-align: right; } .apps tbody tr { border-bottom: 1px solid var(--row-border); } .apps tbody tr:last-child { border-bottom: none; } .apps__name { font-weight: 700; color: var(--text); } .apps__num { text-align: right; } .apps__total { font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.25rem); } .apps__placeholder { text-align: center; color: var(--text-faint); } /* ---- Status pills ------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 7px; min-width: 46px; justify-content: center; padding: 6px 13px; border-radius: 999px; font-weight: 700; font-size: .95em; line-height: 1; } .pill__dot { width: 7px; height: 7px; border-radius: 50%; } .pill--action { background: var(--pill-action-bg); color: var(--pill-action-fg); } .pill--action .pill__dot { background: var(--pill-action-dot); } .pill--progress { background: var(--pill-progress-bg); color: var(--pill-progress-fg); } .pill--progress .pill__dot { background: var(--pill-progress-dot); } .pill--zero { background: var(--pill-zero-bg); color: var(--pill-zero-fg); } /* ---- Other jobs list ---------------------------------------------- */ .panel--other .other-apps { color: var(--text-faint); font-size: clamp(.78rem, 1vw, .92rem); line-height: 1.6; margin: 8px 0 4px; } /* ---- Error banner ------------------------------------------------- */ .board__error { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--pill-action-bg); color: var(--pill-action-fg); font-size: .9rem; text-align: center; } /* ---- Narrow screens ---------------------------------------------- */ @media (max-width: 620px) { .kpis { grid-template-columns: 1fr; } .board__header { flex-direction: column; gap: 12px; } }