/* Base styles. Every color comes from a token that theme.js overrides per tenant. */
:root {
  --sc-primary: #1f5fbf; --sc-primary-text: #fff; --sc-accent: #0f8f8f;
  --sc-bg: #fff; --sc-surface: #f4f6f9; --sc-fg: #1b1f24; --sc-muted: #5b6570; --sc-border: #dde2e8;
  --sc-danger: #b42318; --sc-ok: #1a7f37; --sc-warn: #9a6700;
  --sc-font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --sc-radius: 8px;
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; --sc-danger: #ff8a80; --sc-ok: #6fdc8c; --sc-warn: #e3b341; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sc-bg); color: var(--sc-fg); font: 14px/1.45 var(--sc-font); }
a { color: var(--sc-primary); }
:root[data-theme="dark"] a { color: color-mix(in srgb, var(--sc-primary) 45%, #fff); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .75em; }
code { font-size: .9em; background: var(--sc-surface); padding: 1px 4px; border-radius: 4px; }

.sc-header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--sc-border);
  background: var(--sc-bg); position: sticky; top: 0; z-index: 5; }
.sc-header img { width: 28px; height: 28px; border-radius: 6px; }
.sc-header .sc-title { font-weight: 600; }
.sc-header .sc-sub { color: var(--sc-muted); font-size: 12px; }
.sc-header .sc-spacer { flex: 1; }
.sc-header nav a { text-decoration: none; font-size: 13px; }
.sc-main { max-width: 1040px; margin: 0 auto; padding: 20px 16px 48px; }
.sc-pane .sc-main { padding: 12px; }             /* Office task panes are narrow */
.sc-pane .sc-header { padding: 8px 12px; }

.sc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sc-card { border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: 14px; background: var(--sc-bg); }
.sc-card.sc-tile { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.sc-card.sc-tile:hover { border-color: var(--sc-primary); }
.sc-card .sc-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--sc-muted); }
.sc-muted { color: var(--sc-muted); }
.sc-small { font-size: 12px; }
.sc-section { margin: 24px 0; }
.sc-band { background: var(--sc-surface); border-radius: var(--sc-radius); padding: 16px; }

.sc-btn { font: inherit; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--sc-primary); background: var(--sc-primary);
  color: var(--sc-primary-text); padding: 6px 12px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.sc-btn.sc-secondary { background: transparent; color: var(--sc-primary); }
:root[data-theme="dark"] .sc-btn.sc-secondary { color: var(--sc-fg); border-color: var(--sc-border); }
.sc-btn:disabled { opacity: .5; cursor: default; }
.sc-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input, select, textarea { font: inherit; color: inherit; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 6px; padding: 6px 8px; }
textarea { width: 100%; min-height: 80px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
label { display: block; font-size: 12px; color: var(--sc-muted); margin: 8px 0 4px; }

.sc-msg { padding: 10px 12px; border-radius: 6px; border: 1px solid var(--sc-border); background: var(--sc-surface); margin: 8px 0; }
.sc-msg.sc-error { border-color: var(--sc-danger); color: var(--sc-danger); }
.sc-msg.sc-ok { border-color: var(--sc-ok); }
.sc-list { list-style: none; padding: 0; margin: 0; }
.sc-list li { padding: 6px 0; border-bottom: 1px solid var(--sc-border); display: flex; gap: 8px; align-items: center; }
table.sc-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.sc-table th, .sc-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--sc-border); vertical-align: top; }
.sc-table th { color: var(--sc-muted); font-weight: 600; }
.sc-pill { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--sc-surface); border: 1px solid var(--sc-border); }
.sc-diag { font: 11px/1.4 ui-monospace, Consolas, monospace; white-space: pre-wrap; background: var(--sc-surface); padding: 8px; border-radius: 6px; overflow: auto; }
.sc-hidden { display: none !important; }