/* Visual reference: simpliholdings-crm-platform/ui/src/index.css,
   components/{PortalLayout,Button,Card,BrandLogo}.jsx and tailwind.config.js.
   Keep the shared brand styling separate from SimpliCloud's functional layouts. */
:root {
  --font-body:"Avenir Next","Segoe UI",Arial,sans-serif;
  --ink:#102743; --ink-strong:#071f3a; --muted:#65758a;
  --line:rgba(16,39,67,.12); --surface:#fff; --surface-soft:#fbfaf8;
  --blue:#2563eb; --blue-dark:#1749b8; --blue-soft:#eaf4ff; --pink:#d92b68;
  --bg:#f6f9fd; --paper:#fff; --green:var(--blue); --lime:#7eb8ff;
  --sidebar:var(--ink-strong); --radius:24px;
}
html{background:var(--bg)}
body{font-family:var(--font-body);font-size:14px;min-width:320px;color:var(--ink);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{color:white;background:var(--blue)}
button,input,textarea,select{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}
.sidebar{width:280px;background:var(--ink-strong);padding:24px 16px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(126,184,255,.45) transparent;z-index:40}
.brand{gap:10px;letter-spacing:normal;padding:0 8px;min-height:36px}
.brand-cloud{width:36px;flex:none}
.brand-wordmark{display:inline-flex;align-items:baseline;font-size:26.4px;font-weight:650;letter-spacing:-.055em;line-height:1;color:white}
.brand-wordmark>span{color:#7eb8ff}
.brand-wordmark em{margin-left:9px;padding:5px 7px;color:white;background:var(--blue);border-radius:7px;font-size:9px;font-style:normal;font-weight:900;letter-spacing:.08em}
.brand-caption{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#94a3b8;padding:12px 8px 24px;border-bottom:1px solid #ffffff1a}
.workspace{margin:20px 0 24px;padding:12px;border-color:#ffffff1a;background:#ffffff0d;border-radius:14px;font-size:11px}
.workspace-icon{background:#2563eb33;color:#bfdbfe;border-radius:9px}
.workspace small,.profile small,.read-only small{color:#bfdbfe;font-size:11px}
.workspace-dot{background:#34d399}
.nav-label{color:#94a3b8;font-size:10px;letter-spacing:.14em;margin:0 14px 10px}
.nav{padding:10px 12px;gap:12px;border-radius:14px;font-size:14px;font-weight:700;color:#cbd5e1;margin-bottom:6px;min-height:56px}
.nav>span:first-child{display:grid;place-items:center;width:36px;height:36px;flex:none;background:#ffffff0d;color:#94a3b8;border-radius:11px;font-size:18px}
.nav>span:first-child svg{width:18px;height:18px}
.nav.active{background:#ffffff1f;color:white;box-shadow:inset 0 0 0 1px rgba(126,184,255,.16)}
.nav.active>span:first-child{background:var(--blue);color:white;box-shadow:0 8px 20px rgba(37,99,235,.34)}
.nav:hover{background:#ffffff12;color:white}.nav:hover>span:first-child{color:#bfdbfe}
.nav-tag,.count{background:#ffffff12;color:#bfdbfe;border-color:#ffffff26}
nav+.nav-label{margin-top:24px}
.sidebar-bottom{padding-top:28px}.read-only{border-radius:18px;border-color:#ffffff1a;background:#ffffff0d;font-size:11px;padding:16px;margin-bottom:16px;color:#e2e8f0}
.read-only>span{color:#7eb8ff}.profile{padding:16px;border:1px solid #ffffff1a;border-radius:18px;background:#ffffff0d;color:white;font-weight:700}
.avatar,.avatar.small{background:linear-gradient(135deg,var(--blue),#60a5fa);color:white;font-weight:900;width:40px;height:40px;font-size:12px}
.shell{margin-left:280px;min-width:0;background:radial-gradient(circle at 96% 2%,rgba(37,99,235,.08),transparent 24%),radial-gradient(circle at 4% 96%,rgba(217,43,104,.045),transparent 22%),#f6f9fd}
.topbar{position:sticky;top:0;z-index:30;height:auto;min-height:76px;padding:12px 32px;gap:16px;background:#ffffffe6;backdrop-filter:blur(20px);border-color:#e2e8f0}
.breadcrumb{display:none}.topbar-right{margin-left:auto;gap:12px;flex-shrink:0}.region{color:var(--muted);font-size:11px}
.global-search-form{position:relative;width:100%;max-width:576px}.global-search-form svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none}
.global-search-form input{width:100%;border-radius:14px;border:1px solid #e2e8f0;background:#f8fafc;color:var(--ink-strong);padding:12px 14px 12px 44px;font-size:14px;min-height:46px}
.global-search-form input::placeholder{color:#94a3b8}.global-search-form input:focus{background:white;border-color:var(--blue);outline:none;box-shadow:0 0 0 4px #dbeafe}
.activity-button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #e2e8f0;background:white;color:var(--ink);box-shadow:0 1px 2px #1027430d;flex-shrink:0}
.activity-button:hover{background:#eff6ff;color:var(--blue)}
.operator-pill{display:flex;align-items:center;gap:12px;border-radius:999px;border:1px solid #e2e8f0;background:white;padding:6px 16px 6px 6px;box-shadow:0 1px 2px #1027430d}.operator-pill .avatar{width:36px;height:36px}.operator-pill strong{font-size:12px;font-weight:700;color:var(--ink-strong)}.operator-pill small{display:block;font-size:9px;letter-spacing:.1em;font-weight:700;color:var(--muted);margin-top:2px}
main{padding:40px 32px;max-width:1564px;min-height:calc(100vh - 123px)}
.page-heading{margin-bottom:32px;align-items:end}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--blue);margin-bottom:8px}
h1{font-size:48px;font-weight:700;letter-spacing:-.045em;color:var(--ink-strong);line-height:1.12;margin-bottom:12px}h2{font-size:22px;font-weight:600;color:var(--ink-strong);letter-spacing:-.025em}h3{font-size:16px;font-weight:650;color:var(--ink-strong)}
.subheading{font-size:14px;color:var(--muted)}
.btn{min-height:44px;border-radius:999px;padding:10px 20px;font-size:14px;font-weight:700;border-color:#e2e8f0;color:var(--ink-strong);box-shadow:0 1px 2px #1027430d;transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);background:#eff6ff;border-color:#cbd5e1;box-shadow:0 4px 8px #1027430d}
.btn.primary{background:var(--blue);border-color:var(--blue);color:white;box-shadow:0 12px 28px rgba(37,99,235,.22)}
.btn.primary:hover{background:var(--blue-dark);box-shadow:0 16px 34px rgba(37,99,235,.28)}
.btn.small{font-size:12px;padding:8px 14px;min-height:38px}.btn.text{font-size:12px;color:var(--blue);box-shadow:none;min-height:auto;background:none}.btn:disabled:hover{transform:none}
.card,.metric{border-radius:24px;border:1px solid #e2e8f0cc;box-shadow:0 14px 38px rgba(16,39,67,.07)}
.card-header{padding:24px}.card-header p{font-size:13px;color:var(--muted)}.card-body{padding:0 24px 24px}.card-footer{background:var(--surface-soft);color:var(--muted);font-size:11px;border-color:#e2e8f0;padding:14px 24px}
.briefing{background:var(--ink-strong);border-color:var(--ink-strong);border-radius:24px;padding:26px;margin-bottom:24px;color:white;box-shadow:0 14px 38px rgba(16,39,67,.07)}
.briefing h2{color:white;font-size:24px}.briefing p{color:#dbeafe;font-size:14px;line-height:1.8}.briefing .eyebrow{color:#bfdbfe;font-size:11px}.briefing:after{color:#7eb8ff1a}.briefing .btn{white-space:nowrap}
.metric{padding:24px}.metric-top{font-size:14px;font-weight:500;color:var(--muted)}.metric-icon{color:var(--blue)}.metric-value{font-size:32px;font-weight:600;color:var(--ink-strong);letter-spacing:-.03em}.metric-bottom{font-size:11px;flex-wrap:wrap;color:var(--muted)}
.badge{font-size:10px;font-weight:700;border-radius:999px;padding:5px 10px;background:#eff6ff;color:#1d4ed8;letter-spacing:.03em}.badge.sample{background:#f1f5f9;color:#475569}
.badge.critical,.badge.failed,.badge.rejected,.badge.interrupted{background:#fee2e2;color:#b91c1c}.badge.high{background:#ffedd5;color:#c2410c}.badge.medium,.badge.pending,.badge.running,.badge.partial{background:#fef3c7;color:#92400e}.badge.low,.badge.complete,.badge.approved{background:#d1fae5;color:#047857}
.trend{background:#fff7ed;color:#c2410c}.trend.good{background:#ecfdf5;color:#047857}.status-dot{background:#34d399}
.finding{padding:20px 24px;border-color:#f1f5f9}.finding:hover{background:#f8fafc}.finding h3{font-size:14px}.finding-icon{border-radius:11px;background:#fff7ed;color:#c2410c}.finding:first-of-type .finding-icon{background:#fef2f2;color:#b91c1c}.finding-meta{font-size:11px;color:var(--muted)}.finding-right{color:var(--blue)}
.chart-legend{font-size:11px;color:var(--muted);flex-wrap:wrap}.legend-dot,.bar{background:var(--blue)}.legend-dot.previous,.bar.previous{background:#bfdbfe}.bar-row{grid-template-columns:110px 1fr 64px;font-size:12px;color:var(--muted);margin:18px 0}.bar-value{font-size:11px;color:var(--ink)}.chart-insight{font-size:13px;color:var(--muted)}
.specialists{padding:0 24px 24px}.specialist{border-radius:16px;border-color:#e2e8f0;padding:20px}.specialist-icon{border-radius:11px;background:var(--blue-soft);color:var(--blue);width:36px;height:36px}.specialist h3{font-size:15px}.specialist p{font-size:12px;color:var(--muted)}.specialist-status{font-size:11px;color:var(--muted)}
.search,.select{border-radius:14px;border-color:#cbd5e1;color:var(--ink-strong);font-size:14px;padding:11px 14px}th{background:var(--surface-soft);font-size:11px;color:var(--muted);font-weight:600;padding:16px 24px}td{font-size:14px;padding:18px 24px;border-color:#f1f5f9}td small{color:var(--muted);font-size:12px}
.notice{border-radius:16px;border-color:#fde68a;background:#fffbeb;color:#92400e;font-size:13px;padding:16px}.empty{font-size:14px;color:var(--muted)}
.orb{background:var(--blue-soft);border-color:#bfdbfe;color:var(--blue);border-radius:18px}.chat-intro h2{font-size:28px;font-weight:650}.chat-intro p{font-size:14px;color:var(--muted);max-width:500px}.prompt{border-color:#e2e8f0;border-radius:999px;color:var(--blue);font-size:12px;padding:10px 14px}.prompt:hover{background:#eff6ff}.message{background:#f8fafc;font-size:14px;border-radius:16px;color:var(--ink)}.message.user{background:#eaf4ff}.message-label{font-size:11px;color:var(--blue)}.message-meta{font-size:11px;color:var(--muted)}.composer{border-radius:16px;border-color:#cbd5e1}.composer textarea{font-size:14px;color:var(--ink)}.composer-note{font-size:11px;color:var(--muted)}.context-item{font-size:13px;color:var(--muted);border-color:#e2e8f0}.context-item strong{font-size:13px;color:var(--ink-strong)}
.activity{border-color:#f1f5f9}.activity p{font-size:14px;color:var(--ink)}.activity small{font-size:11px;color:var(--muted)}.activity-icon{color:var(--blue);background:#eff6ff;border-color:#dbeafe}
.connection{padding:24px}.connection p{font-size:14px;color:var(--muted)}.connection-icon{color:var(--blue)}.connection pre{background:#f8fafc;color:var(--ink);font-size:12px;border-radius:12px}.document p{font-size:14px;color:var(--muted)}
.review-row{padding:24px}.review-row h3{font-size:17px}.action-plan{font-size:14px;color:var(--muted)}.review-row small{font-size:12px;color:var(--muted)}.evidence-link{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8;border-radius:999px;padding:5px 10px;font-size:11px}.evidence-link:hover{background:#dbeafe}
.assessment-mode{border-color:#bfdbfe;background:#eff6ff;border-radius:16px;padding:16px}.assessment-mode p{font-size:13px;color:var(--muted)}.assessment-mode .badge{background:#dbeafe;color:#1d4ed8}.agent-card{padding:24px}.agent-card h2{font-size:22px}.agent-card p{font-size:14px;color:var(--muted);min-height:66px}.agent-check input{accent-color:var(--blue);width:18px;height:18px}.agent-readiness{font-size:12px;color:var(--muted)}.agent-last{font-size:12px;color:var(--muted)}
.assessment-history{font-size:13px;color:var(--muted);flex-wrap:wrap}.assessment-summary{padding:24px;border-color:#e2e8f0}.assessment-summary h3{font-size:16px}.assessment-summary p,.assessment-summary li{font-size:13px;color:var(--muted)}summary{font-size:13px;color:var(--blue)}
.recommendation{padding:24px}.recommendation h3{font-size:18px}.recommendation>p{font-size:14px;color:var(--muted)}.recommendation-action{background:#eff6ff;border-left-color:var(--blue);border-radius:12px;padding:16px}.recommendation-action strong{font-size:12px;color:var(--ink-strong)}.recommendation-action p,.recommendation details p{font-size:14px;color:var(--muted)}
.inline-stats strong{font-size:30px;color:var(--ink-strong)}.inline-stats small{font-size:12px;color:var(--muted)}
dialog{border-radius:24px;border-color:#e2e8f0;box-shadow:0 30px 90px #071f3a40;width:min(720px,92vw);padding:28px}dialog::backdrop{background:#071f3a8c}dialog h2{font-size:24px}dialog p,dialog li{font-size:14px;color:var(--muted)}dialog pre{background:#f8fafc;border-color:#e2e8f0;border-radius:14px;color:var(--ink);font-size:12px}.close{background:#eff6ff;color:var(--ink);width:36px;height:36px}
.toast{background:var(--ink-strong);font-size:14px;color:white;border-radius:14px;box-shadow:0 10px 30px #071f3a33;z-index:60}.loading{color:var(--muted)}footer{padding:18px 32px;color:var(--muted);font-size:11px;background:#ffffff80}footer span:first-child{font-size:10px}
.menu-toggle,.close-navigation,.nav-backdrop{display:none}
@media(min-width:1280px) and (max-width:1510px){.page-heading{align-items:start;flex-direction:column}.operator-pill{display:none}.region{display:none}.agent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-main{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
@media(max-width:1279px){
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(86vw,310px);padding:24px 16px;transform:translateX(-100%);visibility:hidden;z-index:50;transition:transform .18s ease,visibility .18s}
  .shell{margin-left:0}.nav-open .sidebar{transform:translateX(0);visibility:visible}.nav-open{overflow:hidden}
  .nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;border:0;background:#071f3a8c;backdrop-filter:blur(4px);z-index:45;width:100%;height:100%}
  .menu-toggle{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid #e2e8f0;border-radius:13px;background:white;color:var(--ink-strong);box-shadow:0 1px 2px #1027430d}
  .close-navigation{display:grid;place-items:center;position:absolute;right:12px;top:12px;border:0;border-radius:50%;background:#ffffff1a;color:white;width:32px;height:32px;font-size:22px}
  .sidebar .brand{padding-top:24px}.sidebar .workspace,.sidebar .sidebar-bottom,.sidebar .nav-label{display:block}.sidebar .workspace{display:flex}
  main{padding:32px 24px}.topbar{padding:12px 24px}.page-heading{align-items:start;flex-direction:column}.grid-main{grid-template-columns:1fr}.specialists{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .sidebar nav{display:block;overflow:visible;margin-top:0}.sidebar .nav{width:100%;white-space:normal;display:flex;min-height:56px;padding:10px 12px;margin-bottom:6px;font-size:14px}.sidebar .nav>span:first-child{display:grid}.sidebar nav+.nav-label{margin-top:24px}
  .sidebar .brand{font-size:26px}.sidebar .profile{display:flex}.sidebar .read-only{display:flex}.sidebar .sidebar-bottom{margin-top:auto;padding-top:24px}
  .topbar{padding:12px 16px;gap:12px;min-height:76px}.topbar-right{gap:8px}.global-search-form{display:none}.operator-pill{display:none}.region{display:none}.activity-button{width:40px;height:40px}.topbar .badge{font-size:9px}
  main{padding:28px 16px}h1{font-size:36px;line-height:1.12}.eyebrow{font-size:10px}.subheading{font-size:14px}.page-heading{margin-bottom:24px}.buttons{gap:8px}.page-heading .buttons{width:100%}.btn{font-size:12px;padding:10px 16px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.metric{padding:18px}.metric-top{font-size:12px}.metric-value{font-size:27px}.metric-bottom{font-size:11px}.briefing{padding:24px;grid-template-columns:1fr}.briefing h2{font-size:22px}.briefing .btn{white-space:normal}
  .specialists{grid-template-columns:1fr;padding:0 20px 20px}.specialist{display:grid;grid-template-columns:36px 1fr}.specialist p{min-height:0}.card-header{padding:20px;align-items:start;flex-wrap:wrap}.card-body{padding:0 20px 20px}.card-header h2{font-size:20px}.finding{padding:18px}.finding h3{font-size:13px}.finding-meta{font-size:10px}.bar-row{grid-template-columns:86px 1fr 55px;font-size:11px;gap:8px}.bar-value{font-size:10px}
  .agent-grid{grid-template-columns:1fr}.agent-card p{min-height:0}.assessment-summary,.recommendation{padding:20px}.assessment-history{padding:0 20px 20px}.assessment-history .select{max-width:100%;font-size:11px}.review-row{padding:20px}.assessment-toolbar{align-items:start}.assessment-toolbar .subheading{font-size:12px}.recommendation .eyebrow{letter-spacing:.1em}footer{padding:16px;font-size:10px}.chat-intro h2{font-size:25px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
