/* ============================================================
   Colour layer — loaded after office.css
   Portal accents, deterministic avatar colours, tinted surfaces.
   ============================================================ */

/* ---------- per-portal accent ----------
   Each portal gets its own identity so people can tell at a glance
   which one they are in — useful when seniors move between them. */
body.of-panel-admin   { --of-primary: #e11d48; --of-primary-d: #9f1239; --of-primary-l: #ffe4e6; --of-accent-2: #f43f5e; }
body.of-panel-company { --of-primary: #d97706; --of-primary-d: #b45309; --of-primary-l: #fef3c7; --of-accent-2: #f59e0b; }
body.of-panel-team    { --of-primary: #2563eb; --of-primary-d: #1d4ed8; --of-primary-l: #dbeafe; --of-accent-2: #3b82f6; }
body.of-panel-staff   { --of-primary: #0e9f6e; --of-primary-d: #057a55; --of-primary-l: #def7ec; --of-accent-2: #10b981; }

.dark body.of-panel-admin   { --of-primary-l: #3f1220; }
.dark body.of-panel-company { --of-primary-l: #3a2708; }
.dark body.of-panel-team    { --of-primary-l: #10233f; }
.dark body.of-panel-staff   { --of-primary-l: #052e22; }

/* ---------- tinted stat cards ---------- */
.of-stat-tint { position: relative; overflow: hidden; }
.of-stat-tint::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 4px 0 0 4px;
}
.of-stat-tint.t-green::before  { background: #0e9f6e; }
.of-stat-tint.t-blue::before   { background: #2563eb; }
.of-stat-tint.t-amber::before  { background: #d97706; }
.of-stat-tint.t-violet::before { background: #7c3aed; }
.of-stat-tint.t-rose::before   { background: #e11d48; }
.of-stat-tint.t-teal::before   { background: #0d9488; }

.of-stat-tint.t-green  .of-stat-value { color: #0e9f6e; }
.of-stat-tint.t-blue   .of-stat-value { color: #2563eb; }
.of-stat-tint.t-amber  .of-stat-value { color: #b45309; }
.of-stat-tint.t-violet .of-stat-value { color: #7c3aed; }
.of-stat-tint.t-rose   .of-stat-value { color: #e11d48; }
.of-stat-tint.t-teal   .of-stat-value { color: #0d9488; }

/* ---------- deterministic avatar colours ----------
   Derived from the user id, so the same person is always the same
   colour everywhere in the app. Familiarity beats decoration. */
.of-av.c0 { background: #dbeafe; color: #1d4ed8; }
.of-av.c1 { background: #dcfce7; color: #15803d; }
.of-av.c2 { background: #fef3c7; color: #b45309; }
.of-av.c3 { background: #fae8ff; color: #a21caf; }
.of-av.c4 { background: #ffe4e6; color: #be123c; }
.of-av.c5 { background: #ccfbf1; color: #0f766e; }
.of-av.c6 { background: #e0e7ff; color: #4338ca; }
.of-av.c7 { background: #ffedd5; color: #c2410c; }

.dark .of-av.c0 { background: #172554; color: #93c5fd; }
.dark .of-av.c1 { background: #14532d; color: #86efac; }
.dark .of-av.c2 { background: #451a03; color: #fcd34d; }
.dark .of-av.c3 { background: #4a044e; color: #f0abfc; }
.dark .of-av.c4 { background: #4c0519; color: #fda4af; }
.dark .of-av.c5 { background: #042f2e; color: #5eead4; }
.dark .of-av.c6 { background: #1e1b4b; color: #a5b4fc; }
.dark .of-av.c7 { background: #431407; color: #fdba74; }

/* ---------- coloured board columns ---------- */
.of-col.k-planned  { background: linear-gradient(180deg, #f8fafc 0%, var(--of-bg) 60%); }
.of-col.k-progress { background: linear-gradient(180deg, #eff6ff 0%, var(--of-bg) 60%); }
.of-col.k-done     { background: linear-gradient(180deg, #ecfdf5 0%, var(--of-bg) 60%); }
.dark .of-col.k-planned  { background: var(--of-bg); }
.dark .of-col.k-progress { background: linear-gradient(180deg, #101d33 0%, var(--of-bg) 60%); }
.dark .of-col.k-done     { background: linear-gradient(180deg, #06251b 0%, var(--of-bg) 60%); }

.of-task.k-progress { border-left: 3px solid #2563eb; }
.of-task.k-done     { border-left: 3px solid #0e9f6e; }
.of-task.k-late     { border-left: 3px solid #e11d48; }

/* ---------- greeting banner ---------- */
.of-banner {
    border-radius: var(--of-radius);
    padding: 20px 22px;
    color: #fff;
    background: linear-gradient(120deg, var(--of-primary-d) 0%, var(--of-primary) 55%, var(--of-accent-2, var(--of-primary)) 100%);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.of-banner .of-h1, .of-banner .of-h2 { color: #fff; }
.of-banner .of-xs, .of-banner .of-tiny { color: rgba(255,255,255,.82); }
.of-banner-pill {
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25);
    color: #fff; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 650;
    display: inline-flex; align-items: center; gap: 7px;
}
.of-banner-pill .of-dot { background: #fff; }
.of-banner-pill .of-dot.is-live { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }

/* ---------- auth screens ---------- */
.of-auth-note {
    background: var(--of-primary-l); border: 1px solid var(--of-border);
    border-radius: var(--of-radius-sm); padding: 12px 14px; font-size: 12px;
    color: var(--of-text); line-height: 1.55;
}
.of-pending-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: var(--of-bg); font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.of-pending-card {
    background: var(--of-surface); border: 1px solid var(--of-border);
    border-radius: 18px; padding: 34px; max-width: 440px; text-align: center;
    box-shadow: var(--of-shadow-lg);
}
.of-pending-badge {
    width: 62px; height: 62px; border-radius: 999px; margin: 0 auto 16px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex; align-items: center; justify-content: center; font-size: 27px;
}