/* Shared visual system. Clinical risk colors remain defined in app.css. */
:root {
  --ot-brand: #4f46d4;
  --ot-bg: #f2f5fb;
  --ot-panel: #fff;
  --ot-text: #1c2c45;
  --ot-muted: #607089;
  --ot-border: #e0e7f1;
  --ot-soft: #f6f8fd;
  --ot-shadow: 0 4px 0 #e1e7f1, 0 14px 30px #25365b09;
  --bs-primary: #4f46d4;
  --bs-primary-rgb: 79, 70, 212;
  --bs-link-color: #4f46d4;
  --bs-link-hover-color: #3730a3;
}
body { font-family: 'Segoe UI', system-ui, sans-serif; background: radial-gradient(ellipse at 100% 0, #dcefeb70, transparent 48%), var(--ot-bg); line-height: 1.55; }
h1, h2, h3, h4, .brand-title { letter-spacing: -.035em; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #8678ef; outline-offset: 4px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 2000; padding: 12px 20px; background: var(--ot-panel); border-radius: 12px; }
.skip-link:focus { top: 12px; }
.sidebar { flex-shrink: 0; width: 238px; padding: 24px 16px; background: radial-gradient(ellipse at 0 100%, #164a56, transparent 65%), #14243e; overflow-y: auto; }
.brand { flex-direction: column; align-items: center; gap: 14px; padding-bottom: 25px; margin-bottom: 24px; text-align: center; }
.brand-logo-wrap { width: 164px; max-width: 100%; height: 68px; padding: 12px; border-radius: 12px; }
.brand-logo { width: 100%; max-height: 44px; }
.brand-title { font-size: 1.15rem; line-height: 1.3; }
.sidebar-caption { color: #9aaecb; font-size: .65rem; font-weight: 700; letter-spacing: .16em; padding: 0 12px 12px; }
.sidebar .nav-link { border: 1px solid transparent; padding: 11px 13px; border-radius: 12px; margin-bottom: 3px; transition: background .18s, transform .18s; }
.sidebar .nav-link i { color: #8dddd0; }
.sidebar .nav-link:hover { transform: translateX(3px); }
.sidebar .nav-link.active { color: white; background: linear-gradient(120deg, #5860d9, #454db4); border-color: #7e84e0; box-shadow: 0 4px 0 #101f38, inset 0 1px 0 #ffffff30, 0 8px 18px #0002; }
.sidebar .nav-link.active i { color: white; }
.topbar { min-height: 78px; padding: 16px 26px; background: var(--ot-panel); }
.topbar strong { font-size: 1.1rem; }
.topbar .small { font-size: .73rem; }
.content-wrap, body.dashboard-page .content-wrap { padding: 24px; }
.user-chip { background: var(--ot-soft); color: var(--ot-text); padding: 7px 13px; }
.clinical-disclaimer { border: 1px solid #f0ddaf !important; background: #fff7e5; color: #72541b; border-radius: 12px !important; margin-left: 24px !important; margin-right: 24px !important; }
.panel, .auth-card, .metric-card, .triage-panel { border-radius: 18px; padding: 20px; box-shadow: var(--ot-shadow); }
.panel-heading { margin-bottom: 18px; }
.panel-heading h2 { font-size: 1.05rem; }
.eyebrow { color: var(--ot-muted); letter-spacing: .12em; margin-bottom: 5px; font-size: .64rem; }
.btn { border-radius: 10px; font-weight: 600; padding: .58rem .95rem; transition: transform .18s, box-shadow .18s, background-color .18s; box-shadow: 0 3px 0 var(--ot-border); }
.btn-sm { padding: .38rem .65rem; font-size: .79rem; }
.btn-primary { --bs-btn-bg: #4f46d4; --bs-btn-border-color: #4f46d4; --bs-btn-hover-bg: #4338be; --bs-btn-hover-border-color: #4338be; --bs-btn-active-bg: #3730a3; background-image: linear-gradient(170deg, #ffffff17, transparent); box-shadow: 0 4px 0 #30298b, 0 8px 16px #4f46d426, inset 0 1px 0 #ffffff30; }
.btn-outline-primary { --bs-btn-color: #4f46d4; --bs-btn-border-color: #beb9ed; --bs-btn-hover-bg: #4f46d4; --bs-btn-hover-border-color: #4f46d4; --bs-btn-active-bg: #4338be; }
.btn-success { box-shadow: 0 4px 0 #0d583a, 0 8px 16px #19875420; }
.btn-danger { box-shadow: 0 4px 0 #8f2130, 0 8px 16px #dc354520; }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn:disabled, .btn.disabled { transform: none; box-shadow: none; }
.btn-icon, .icon-btn { width: 38px; height: 38px; padding: 0; }
.form-control, .form-select, .input-group-text { border-color: var(--ot-border); border-radius: 10px; padding: .65rem .8rem; }
.form-control, .form-select { background-color: var(--ot-panel); color: var(--ot-text); box-shadow: inset 0 2px 4px #22335405; }
.form-control:focus, .form-select:focus { border-color: #8b81e8; box-shadow: 0 0 0 4px #7364db18; }
.form-label { font-size: .83rem; font-weight: 650; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ot-text); --bs-table-border-color: var(--ot-border); --bs-table-striped-bg: var(--ot-soft); --bs-table-hover-bg: var(--ot-soft); vertical-align: middle; }
.table > :not(caption) > * > * { padding: .8rem .7rem; }
.table thead th { background: var(--ot-soft); color: var(--ot-muted); font-size: .73rem; letter-spacing: .025em; }
.badge { border-radius: 6px; padding: .45em .65em; }
.nav-tabs { gap: 4px; border-color: var(--ot-border); }
.nav-tabs .nav-link { border-radius: 10px 10px 0 0; font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--ot-brand); background: var(--ot-panel); border-color: var(--ot-border) var(--ot-border) var(--ot-panel); }
.dashboard-command { gap: 20px; }
.dashboard-hero { position: relative; padding: 25px; border-radius: 20px; background: linear-gradient(115deg, #f0edff, #eaf8f7); border-color: #dcdcf1; box-shadow: var(--ot-shadow); }
.dashboard-hero h1 { font-size: clamp(1.4rem, 2vw, 1.95rem); }
.dashboard-hero p { max-width: 680px; margin-top: 8px; }
.dashboard-kpi-strip { gap: 14px; }
.kpi-compact { --tile-color: #5148ca; --tile-soft: #efedff; padding: 18px 14px; min-height: 98px; gap: 12px; border-radius: 16px; border-top: 3px solid var(--tile-color); box-shadow: var(--ot-shadow); transition: transform .2s, box-shadow .2s; }
.kpi-compact:nth-child(4n+2) { --tile-color: #147c79; --tile-soft: #dff5ef; }
.kpi-compact:nth-child(4n+3) { --tile-color: #ac5825; --tile-soft: #fff0df; }
.kpi-compact:nth-child(4n+4) { --tile-color: #a44078; --tile-soft: #fce9f3; }
.kpi-compact i { width: 42px; height: 42px; border-radius: 12px; background: var(--tile-soft); color: var(--tile-color); font-size: 1.15rem; box-shadow: 0 4px 0 color-mix(in srgb, var(--tile-color) 20%, var(--ot-panel)), inset 0 1px 0 #fff8; transform: rotate(-5deg); }
.kpi-compact strong { font-size: 1.65rem; letter-spacing: -.04em; }
.kpi-compact small { margin-top: 7px; font-size: .73rem; white-space: normal; line-height: 1.3; }
.dashboard-workspace { gap: 20px; }
.queue-row, .action-chip, .mini-chart { background: var(--ot-soft); border-radius: 12px; padding: 12px; }
.queue-list { gap: 10px; }
.queue-count { background: #eae8fb; color: #5148ca; border-radius: 10px; box-shadow: 0 3px 0 #d9d5ef; }
.action-chip { box-shadow: 0 3px 0 var(--ot-border); transition: transform .18s; }
.action-chip i { color: #6558cc; }
.analytics-grid { gap: 12px; }
.watch-card, .empty-state, .ai-action-card, .workflow-step-panel, .mdt-ai-suggestion { border-radius: 12px; }
.sticky-actions { background: var(--ot-panel); z-index: 10; padding: 14px; border-radius: 12px; box-shadow: 0 -6px 20px #14243e08; }
.footer-note { font-size: .74rem; }
/* Login: dimensional CSS artwork, with no image or animation dependency. */
.login-view .topbar { background: transparent; border: 0; }
.login-view .topbar strong { font-size: .95rem; }
.login-view .content-wrap { padding-top: 20px; }
.login-page { min-height: auto; padding: 4px 0 28px; }
.login-shell { width: min(1120px, 100%); grid-template-columns: 1.05fr 1fr; border-radius: 26px; box-shadow: 0 8px 0 #dce3ee, 0 28px 70px #25365b16; }
.login-brand-pane { grid-column: auto; position: relative; overflow: hidden; min-height: 620px; padding: 36px; gap: 24px; background: radial-gradient(ellipse at 0 100%, #216b73, transparent 65%), radial-gradient(ellipse at 100% 0, #42477f, transparent 65%), #142b48; }
.login-logo-surface { width: 142px; padding: 10px 14px; border-radius: 12px; box-shadow: 0 4px 0 #0002; }
.login-logo { height: 30px; }
.login-kicker { font-size: .63rem; letter-spacing: .14em; color: #91d9d1; }
.login-product-name { font-weight: 600; font-size: .85rem; color: #e1e8f5; margin-bottom: 14px; }
.login-brand-pane h1 { font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1.13; font-weight: 750; letter-spacing: -.045em; }
.login-brand-pane h1 span { color: #91e2d5; }
.login-brand-pane p { color: #c2d1e5; font-size: .86rem; line-height: 1.8; max-width: 370px; }
.login-assurance { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: .67rem; }
.login-assurance i { color: #91e2d5; margin-right: 4px; }
.care-scene { position: relative; height: 205px; isolation: isolate; }
.care-orbit { position: absolute; width: 200px; height: 170px; border: 1px solid #8ae1d03b; border-radius: 50%; left: 22%; top: 10px; transform: rotate(-20deg); }
.care-orbit::after { content: ''; position: absolute; inset: 20px -30px; border: 1px solid #8ae1d025; border-radius: 50%; }
.care-core { position: absolute; display: grid; place-items: center; left: 39%; top: 53px; width: 90px; height: 90px; border-radius: 25px; background: linear-gradient(145deg, #b5fff1, #41b9b0); color: #17676d; font-size: 2.8rem; transform: rotate(-12deg); box-shadow: 5px 9px 0 #237f89, 12px 22px 26px #06152860, inset 2px 2px 0 #ffffffb0; }
.care-tile { position: absolute; display: flex; align-items: center; gap: 10px; background: #f5faff; color: #213650; border: 1px solid #fff; padding: 12px 14px; border-radius: 13px; box-shadow: 3px 5px 0 #9aacbf, 5px 14px 22px #06152845; }
.care-tile i { font-size: 1.2rem; color: #6359c7; }
.care-tile span { display: grid; }
.care-tile strong { font-size: .74rem; }
.care-tile small { font-size: .59rem; color: #5c6b82; }
.care-tile-screen { left: 0; top: 5px; transform: rotate(-6deg); }
.care-tile-triage { right: 0; top: 57px; transform: rotate(7deg); }
.care-tile-connect { left: 10%; bottom: 0; transform: rotate(-3deg); }
.care-tile-connect i { color: #187b78; }
.login-form-pane { padding: 42px; }
.login-form-header { margin-bottom: 30px; }
.login-form-header > .d-flex { flex-direction: column; }
.login-welcome-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #5b50c6; background: #efedff; box-shadow: 0 5px 0 #dedaf5; font-size: 1.4rem; margin-bottom: 24px; }
.login-form-header h2 { font-weight: 750; font-size: 1.95rem; }
.login-form .input-group { border-radius: 12px; }
.login-form .input-group-text { background: var(--ot-soft); color: var(--ot-muted); }
.login-form .form-control { min-height: 49px; }
.password-toggle { color: var(--ot-muted); background: var(--ot-soft); border: 1px solid var(--ot-border); box-shadow: none; }
.login-form .form-check-label, .login-form .small { font-size: .78rem; }
.login-submit { margin-top: 7px; min-height: 49px; }
.login-security-note { text-align: center; font-size: .69rem; color: var(--ot-muted); margin: 22px 0 0; }
.login-demo-pane { grid-column: 1 / -1; padding: 0; border-left: 0; border-top: 1px solid var(--ot-border); background: var(--ot-soft); }
.demo-details { width: 100%; }
.demo-details summary { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; cursor: pointer; padding: 20px 28px; color: var(--ot-muted); font-size: .83rem; }
.demo-details summary::-webkit-details-marker { display: none; }
.demo-details summary > span:first-child { font-weight: 650; color: var(--ot-text); }
.demo-details[open] summary { border-bottom: 1px solid var(--ot-border); }
.credential-panel-standalone { margin: 20px; }
.credential-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
.credential-role { white-space: normal; }
.login-demo-note { margin: 12px; }
[data-bs-theme="dark"] { --ot-bg: #101b2c; --ot-panel: #1b2a40; --ot-soft: #152237; --ot-text: #e4ecf7; --ot-muted: #a7b8d0; --ot-border: #34445f; --ot-shadow: 0 4px 0 #0b1423, 0 14px 30px #0002; --bs-link-color: #b3adff; --bs-link-hover-color: #d2ceff; }
[data-bs-theme="dark"] body { background: radial-gradient(ellipse at 100% 0, #21424750, transparent 48%), var(--ot-bg); }
[data-bs-theme="dark"] .dashboard-hero { background: linear-gradient(115deg, #302d52, #1b4148); border-color: #424b6a; }
[data-bs-theme="dark"] .clinical-disclaimer { background: #382f20; color: #f3d8a4; border-color: #665538 !important; }
[data-bs-theme="dark"] .login-shell { box-shadow: 0 8px 0 #0b1423, 0 28px 70px #0003; }
[data-bs-theme="dark"] .user-chip { color: var(--ot-text); }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #bbb5ff; --bs-btn-border-color: #7d73c9; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .queue-count { background: #373357; color: #d6d0ff; box-shadow: 0 3px 0 #24213e; }
[data-bs-theme="dark"] .action-chip i { color: #aaa0f7; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):not(.disabled):hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(2px) !important; }
  .kpi-compact:hover { transform: translateY(-4px); box-shadow: 0 7px 0 var(--ot-border), 0 18px 30px #25365b16; }
  .action-chip:hover { transform: translateY(-2px); }
}
@media (max-width: 1180px) { .login-brand-pane { grid-column: auto; } .login-shell { grid-template-columns: 1fr 1fr; } .login-form-pane { padding: 30px; } }
@media (max-width: 900px) {
  .sidebar { width: 100%; padding: 16px; overflow: visible; }
  .sidebar .brand { padding-bottom: 0; margin-bottom: 16px; border: 0; }
  .sidebar-caption { display: none; }
  .sidebar .nav { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .sidebar .nav-link { white-space: nowrap; margin: 0; }
  .content-wrap, body.dashboard-page .content-wrap { padding: 16px; }
  .clinical-disclaimer { margin-left: 16px !important; margin-right: 16px !important; }
  .login-shell { grid-template-columns: 1fr; max-width: 600px; }
  .login-brand-pane { min-height: auto; padding: 28px; }
  .login-brand-pane h1 { font-size: 2.3rem; }
  .care-scene { display: none; }
  .login-form-pane { padding: 30px; }
  .login-assurance { font-size: .7rem; }
  .login-demo-pane { padding: 0; }
  .dashboard-hero-actions { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .topbar { padding: 14px 16px; }
  .panel, .dashboard-hero { padding: 16px; }
  .login-form-pane, .login-brand-pane { padding: 24px; }
  .login-form-header h2 { font-size: 1.65rem; }
  .credential-list { grid-template-columns: 1fr; }
  .credential-row { grid-template-columns: minmax(0, 1fr) 92px; }
  .kpi-compact { padding: 14px 10px; gap: 8px; }
  .kpi-compact i { width: 34px; height: 34px; }
  .demo-details summary { padding: 18px 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .kpi-compact:hover, .sidebar .nav-link:hover { transform: none; } }
@media print { body { background: white; } .panel, .dashboard-hero, .kpi-compact { box-shadow: none; break-inside: avoid; } .skip-link { display: none; } }