/* EMReportPlatform v0.2 — Premium Clinical palette (granat + amber) Inspiracja: Bloomberg Terminal × Mayo Clinic × Linear Mobile-first, ale desktop ma DYSTYNKTNY layout (dark sidebar, glass cards). */ :root { /* ============ PALETA — PREMIUM CLINICAL ============ */ /* Tła */ --bg-app: #F4F1EA; /* cream warm — papier dyplomu */ --bg-card: #FFFFFF; --bg-subtle: #ECE7DC; /* hover, divider-as-block */ --bg-inverse: #0F1B2D; /* granat — sidebar, hero */ --bg-inverse-2: #1A2845; /* navy step up */ --bg-inverse-3: #243558; /* navy step up 2 */ /* Akcenty */ --accent: #C8932F; /* amber/gold — CTA, aktywny stan */ --accent-strong: #A87820; /* hover */ --accent-soft: #F0E2C0; /* selected bg, badge */ --accent-on-dark: #E5B85C; /* amber jaśniejszy na ciemnym tle */ /* Status */ --success: #2D8F6F; /* emerald deep */ --success-soft: #D4EDE0; --success-on-dark: #4FBF93; --warning: #D49831; /* amber-orange */ --warning-soft: #F7E6C2; --danger: #B5402E; /* deep terracotta — nie krwistoczerwona */ --danger-soft: #F2D8D0; --danger-on-dark: #E97768; --info: #2C5A8C; /* deep blue */ --info-soft: #D6E2EE; /* Triaż 5 poziomów (deep + saturated, nie pastel) */ --triage-1: #B5402E; /* czerwony — terracotta */ --triage-2: #D17A2B; /* pomarańczowy — burnt */ --triage-3: #C8932F; /* żółty — amber */ --triage-4: #2D8F6F; /* zielony — emerald */ --triage-5: #2C5A8C; /* niebieski — deep */ /* Tekst */ --text-primary: #14213D; /* navy ink */ --text-secondary: #4A5878; --text-tertiary: #8A95AD; --text-inverse: #F4F1EA; /* cream na granat */ --text-inverse-secondary: #B6BCD0; --text-inverse-tertiary: #7A85A0; --text-on-accent: #FFFFFF; --text-on-amber: #1A1409; /* Linie */ --border-subtle: #DDD5C5; --border-strong: #B8AC96; --border-on-dark: #2D3E62; /* Typografia */ --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino', Georgia, serif; --font-sans: 'Inter', -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 0.9375rem; /* 15 — desktop nieco mniejsze, więcej info */ --fs-md: 1.0625rem; /* 17 */ --fs-lg: 1.3125rem; /* 21 */ --fs-xl: 1.6875rem; /* 27 */ --fs-2xl: 2.25rem; /* 36 */ --fs-3xl: 3rem; /* 48 — hero KPI */ /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; /* Radius — bardziej refined, mniej obłe */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-full: 999px; /* Cień — premium, multi-layer */ --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.04), 0 0 0 1px rgba(15, 27, 45, 0.04); --shadow-md: 0 1px 2px rgba(15, 27, 45, 0.04), 0 4px 16px rgba(15, 27, 45, 0.06), 0 0 0 1px rgba(15, 27, 45, 0.03); --shadow-lg: 0 8px 32px rgba(15, 27, 45, 0.12), 0 0 0 1px rgba(15, 27, 45, 0.04); --shadow-card-amber: 0 1px 2px rgba(168, 120, 32, 0.06), 0 0 0 1px rgba(168, 120, 32, 0.12); /* Focus ring */ --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent); } /* Auto dark mode WYŁĄCZONY — system zawsze renderuje w jasnej palecie Premium Clinical (cream #F4F1EA + granat akcenty). Ciemne kolory tylko w hero i sidebar zgodnie z designem. Włącz przez .theme-dark na jeśli kiedyś będzie toggle. */ html.theme-dark { --bg-app: #0F1B2D; --bg-card: #1A2845; --bg-subtle: #243558; --accent: #E5B85C; --accent-strong: #F0CB7E; --accent-soft: #3D2F0F; --text-primary: #F4F1EA; --text-secondary: #B6BCD0; --text-tertiary: #7A85A0; --border-subtle: #2D3E62; --border-strong: #4A5878; --success-soft: #1F3D31; --warning-soft: #3D2F0F; --danger-soft: #3D1F1A; --info-soft: #1A2D45; } /* Wymusza tryb jasny niezależnie od ustawień systemu */ html, body { color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.5; color: var(--text-primary); background: var(--bg-app); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'ss01', 'cv11'; overflow-x: hidden; } .app-shell, .content, main { max-width: 100%; min-width: 0; } .greet, .kpi-strip, .activity-grid, .units-table-wrap, .priority { max-width: 100%; min-width: 0; } .greet .sub { overflow: hidden; text-overflow: ellipsis; } button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; } *:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } ::selection { background: var(--accent-soft); color: var(--text-on-amber); } a { color: var(--info); text-decoration: none; } a:hover { color: var(--accent-strong); } h1, h2, h3, h4 { margin: 0; letter-spacing: -0.01em; font-weight: 600; } .display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .tabnum { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ============ APP SHELL ============ */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-app); } /* MOBILE: light bg, granat topbar accent */ .topbar { position: sticky; top: 0; z-index: 10; background: var(--bg-app); padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); border-bottom: 1px solid var(--border-subtle); } .topbar h1 { font-size: var(--fs-md); font-weight: 600; margin: 0; flex: 1; } .topbar .icon-btn { background: none; border: none; padding: 8px; border-radius: var(--r-sm); color: var(--text-secondary); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .topbar .icon-btn:hover { background: var(--bg-subtle); } .topbar .badge-dot { position: relative; } .topbar .badge-dot::after { content: ''; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg-app); } .content { flex: 1; padding: var(--sp-4); padding-bottom: 7rem; } /* TABLET */ @media (min-width: 768px) { .content { max-width: 760px; margin: 0 auto; padding: var(--sp-5); } } /* DESKTOP — premium dense layout */ @media (min-width: 1024px) { body { font-size: var(--fs-base); } .app-shell { display: grid; grid-template-columns: 264px 1fr; grid-template-rows: 64px 1fr; grid-template-areas: "nav header" "nav main"; min-height: 100vh; } .topbar { grid-area: header; position: sticky; top: 0; background: var(--bg-app); border-bottom: 1px solid var(--border-subtle); padding: 0 var(--sp-6); height: 64px; } .topbar h1 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; } .content { grid-area: main; max-width: none; margin: 0; padding: var(--sp-6); padding-bottom: var(--sp-7); width: 100%; } } /* ============ NAV (mobile bottom / desktop sidebar dark) ============ */ .tab-bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-card); border-top: 1px solid var(--border-subtle); display: flex; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); z-index: 20; } /* Desktop-only nav parts — hidden on mobile */ .tab-bar .brand-mark, .tab-bar .nav-label, .tab-bar .nav-foot { display: none; } /* On mobile, .nav-section becomes the flex row container */ .tab-bar .nav-section { display: contents; } .tab-bar a { flex: 1; text-align: center; text-decoration: none; color: var(--text-tertiary); font-size: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border: none !important; background: none !important; } .tab-bar a.active { color: var(--accent-strong); font-weight: 600; } .tab-bar a svg { width: 22px; height: 22px; stroke-width: 1.75; } /* Limit mobile to 5 main tabs — hide secondary */ @media (max-width: 1023px) { .tab-bar a:nth-of-type(n+6) { display: none; } } @media (min-width: 1024px) { .tab-bar { grid-area: nav; position: static; background: var(--bg-inverse); flex-direction: column; padding: 0; gap: 0; border-top: none; border-right: 1px solid #0A1421; color: var(--text-inverse); } .tab-bar .brand-mark, .tab-bar .nav-label, .tab-bar .nav-foot { display: flex; } .tab-bar .nav-section { display: flex; } .tab-bar a:nth-of-type(n+6) { display: flex; } .tab-bar .brand-mark { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-5); border-bottom: 1px solid var(--border-on-dark); height: 64px; box-sizing: border-box; } .tab-bar .brand-mark .lg { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--accent); display: flex; align-items: center; justify-content: center; color: var(--text-on-amber); font-weight: 700; font-size: 13px; letter-spacing: -0.02em; } .tab-bar .brand-mark .nm { font-family: var(--font-display); font-size: var(--fs-md); color: var(--text-inverse); font-weight: 500; letter-spacing: -0.01em; } .tab-bar .nav-section { padding: var(--sp-5) var(--sp-3); display: flex; flex-direction: column; gap: 2px; } .tab-bar .nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-inverse-tertiary); padding: var(--sp-2) var(--sp-3) var(--sp-1); font-weight: 600; } .tab-bar a { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; text-align: left; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-inverse-secondary); border-left: 2px solid transparent; margin-bottom: 2px; } .tab-bar a:hover { background: rgba(255,255,255,0.04); color: var(--text-inverse); } .tab-bar a.active { background: linear-gradient(90deg, rgba(229,184,92,0.15), rgba(229,184,92,0.02)); color: var(--accent-on-dark); border-left-color: var(--accent); font-weight: 500; } .tab-bar a svg { width: 18px; height: 18px; stroke-width: 1.75; } .tab-bar .nav-foot { margin-top: auto; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border-on-dark); font-size: var(--fs-xs); color: var(--text-inverse-tertiary); display: flex; align-items: center; gap: var(--sp-3); } .tab-bar .nav-foot .av { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-inverse-3); color: var(--accent-on-dark); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--fs-xs); flex-shrink: 0; } .tab-bar .nav-foot .nm { color: var(--text-inverse); font-size: var(--fs-sm); font-weight: 500; } } /* ============ KARTY I PRYMITYWY ============ */ .card { background: var(--bg-card); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-sm); border: 1px solid var(--border-subtle); margin-bottom: var(--sp-3); } @media (min-width: 1024px) { .card { padding: var(--sp-5); } } .card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .card-h h2 { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; } .card-h .lead { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; } .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); font-weight: 600; } .btn { appearance: none; border: 1px solid transparent; border-radius: var(--r-md); padding: 10px 16px; font-weight: 500; font-size: var(--fs-sm); display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; transition: all 120ms ease; letter-spacing: -0.005em; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--text-on-amber); border-color: var(--accent-strong); } .btn-primary:hover { background: var(--accent-strong); } .btn-dark { background: var(--bg-inverse); color: var(--text-inverse); border-color: var(--bg-inverse-2); } .btn-dark:hover { background: var(--bg-inverse-2); } .btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-subtle); } .btn-ghost:hover { background: var(--bg-subtle); } .btn-soft { background: var(--accent-soft); color: var(--text-on-amber); } .btn-danger { background: var(--danger); color: white; border-color: #8E3022; } .btn-block { width: 100%; } .btn-sm { min-height: 32px; padding: 6px 12px; font-size: var(--fs-xs); } .btn-lg { min-height: 48px; padding: 12px 20px; font-size: var(--fs-base); } .input, .textarea, .select { width: 100%; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 10px 12px; min-height: 44px; font-size: var(--fs-sm); color: var(--text-primary); transition: all 120ms; } .input:focus, .textarea:focus, .select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .textarea { min-height: 96px; resize: vertical; line-height: 1.55; padding: 12px; } .field { margin-bottom: var(--sp-4); } .field label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; } .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 0.01em; border: 1px solid transparent; } .pill-success { background: var(--success-soft); color: #1A6B52; border-color: rgba(45,143,111,0.2); } .pill-warning { background: var(--warning-soft); color: #7A5A1C; border-color: rgba(212,152,49,0.25); } .pill-danger { background: var(--danger-soft); color: #7A2418; border-color: rgba(181,64,46,0.25); } .pill-info { background: var(--info-soft); color: #1F4068; border-color: rgba(44,90,140,0.2); } .pill-neutral { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border-subtle); } .pill-amber { background: var(--accent-soft); color: var(--text-on-amber); border-color: rgba(200,147,47,0.3); } .pill-dark { background: var(--bg-inverse); color: var(--accent-on-dark); border-color: var(--bg-inverse-3); } .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .dot-success { background: var(--success); } .dot-warning { background: var(--warning); } .dot-danger { background: var(--danger); } .dot-info { background: var(--info); } .triage-bar { display: flex; height: 6px; border-radius: var(--r-full); overflow: hidden; background: var(--bg-subtle); } .triage-bar span { display: block; height: 100%; } .t1 { background: var(--triage-1); } .t2 { background: var(--triage-2); } .t3 { background: var(--triage-3); } .t4 { background: var(--triage-4); } .t5 { background: var(--triage-5); } /* Bottom bar (mobile actions sticky) */ .bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-card); border-top: 1px solid var(--border-subtle); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); display: flex; gap: var(--sp-3); z-index: 20; box-shadow: 0 -1px 0 var(--border-subtle), 0 -8px 24px rgba(15, 27, 45, 0.05); } .bottom-bar .btn { flex: 1; } @media (min-width: 1024px) { .bottom-bar { position: static; background: transparent; box-shadow: none; border-top: none; padding: var(--sp-4) 0 0; justify-content: flex-end; } .bottom-bar .btn { flex: 0; min-width: 180px; } } /* ============ KPI / METRYKI ============ */ .kpi-strip { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-4); } @media (min-width: 1024px) { .kpi-strip { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); } } .kpi { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-4); position: relative; overflow: hidden; min-width: 0; } .kpi .delta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .kpi.accent { border-color: rgba(200,147,47,0.3); box-shadow: var(--shadow-card-amber); } .kpi.dark { background: var(--bg-inverse); color: var(--text-inverse); border-color: var(--bg-inverse-3); } .kpi.dark .lbl { color: var(--text-inverse-tertiary); } .kpi.dark .delta.up { color: var(--success-on-dark); } .kpi.dark .delta.down { color: var(--danger-on-dark); } .kpi .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); font-weight: 600; } .kpi .v { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500; margin: 4px 0 6px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } @media (min-width: 1024px) { .kpi .v { font-size: var(--fs-3xl); } } .kpi .delta { font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 3px; font-weight: 500; } .delta.up { color: #1A6B52; } .delta.down { color: #7A2418; } .delta.flat { color: var(--text-secondary); } /* ============ DATA TABLE (desktop premium) ============ */ .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); font-weight: 600; padding: 10px var(--sp-3); border-bottom: 1px solid var(--border-subtle); } .table tbody td { padding: var(--sp-3); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .table tbody tr:hover { background: var(--bg-subtle); cursor: pointer; } .table tbody tr:last-child td { border-bottom: none; } /* ============ KOD ODDZIAŁU ============ */ .unit-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 28px; padding: 0 8px; border-radius: var(--r-sm); background: var(--bg-inverse); color: var(--accent-on-dark); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } .unit-tag.lg { min-width: 56px; height: 36px; font-size: var(--fs-sm); } /* ============ STEPPER ============ */ .stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-card); overflow: hidden; } .stepper button { appearance: none; border: none; background: transparent; width: 36px; height: 40px; font-size: var(--fs-md); font-weight: 500; color: var(--text-primary); } .stepper button:hover { background: var(--bg-subtle); } .stepper .val { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-md); border-left: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); padding: 0 6px; } /* ============ MISC HELPERS ============ */ .muted { color: var(--text-tertiary); } .row { display: flex; align-items: center; gap: var(--sp-3); } .row.between { justify-content: space-between; } .stack-1 > * + * { margin-top: var(--sp-1); } .stack-2 > * + * { margin-top: var(--sp-2); } .stack-3 > * + * { margin-top: var(--sp-3); } .stack-4 > * + * { margin-top: var(--sp-4); } .stack-5 > * + * { margin-top: var(--sp-5); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); } .weight-500 { font-weight: 500; } .weight-600 { font-weight: 600; } .divider { height: 1px; background: var(--border-subtle); margin: var(--sp-5) 0; border: none; } hr { height: 1px; background: var(--border-subtle); border: none; margin: var(--sp-4) 0; } /* Sparkline */ .sparkline { width: 100%; height: 40px; display: block; } /* Bar row */ .bar-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); } .bar-row .label { width: 96px; font-size: var(--fs-sm); color: var(--text-secondary); } .bar-row .bar { flex: 1; height: 8px; background: var(--bg-subtle); border-radius: var(--r-full); overflow: hidden; } .bar-row .fill { height: 100%; border-radius: var(--r-full); background: var(--accent); } .bar-row .num { width: 40px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; } /* Section header */ .section-title { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); } .section-title h2 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.01em; } .section-title .count { font-size: var(--fs-sm); color: var(--text-tertiary); } .section-title .actions { margin-left: auto; display: flex; gap: var(--sp-2); }