@import url('css/theme.css');
@import url('css/console.css');
@import url('css/workspace.css');
@import url('css/modules.css');
@import url('css/intercom.css');
@import url('css/intercom-desks.css');
@import url('css/racks.css');
:root { font-family:Inter,'Segoe UI',system-ui,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.48; cursor:not-allowed; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { letter-spacing:-.045em; }
h1 { font-size:44px; line-height:1.15; margin-bottom:14px; }
h1:focus { outline:none; }
h2 { font-size:25px; margin-bottom:16px; }
p { line-height:1.65; }
label { display:block; font-size:13px; font-weight:600; margin-bottom:9px; }
input:not([type=range]) { width:100%; min-width:0; border:1px solid var(--input-border); background:var(--surface-recessed); border-radius:9px; padding:12px 14px; color:var(--ink); }
input:read-only { background:var(--surface-raised); }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
input[type=range] { accent-color:var(--accent); width:100%; }
.app-shell { width:100%; padding:0 32px; }
.topbar { height:52px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:28px; }
.brand { font-weight:800; font-size:22px; letter-spacing:-1px; display:flex; align-items:center; }
.brand-dot { color:var(--accent); }
.brand-icon { width:26px; height:28px; border-radius:8px 8px 8px 2px; background:var(--primary); color:var(--on-primary); display:inline-grid; place-items:center; font-size:21px; margin-right:8px; font-style:italic; }
.topbar nav { display:flex; gap:24px; margin-left:auto; font-size:12px; font-weight:600; }
.topbar nav a { padding:12px 0; color:var(--muted); }
.topbar nav a:hover,.topbar nav a.active { color:var(--accent); }
.topbar form { margin:0; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; padding:14px 22px; font-size:14px; font-weight:600; border:1px solid transparent; border-radius:9px; line-height:1.2; transition:background .15s; }
.topbar .button { font-size:11px; padding:8px 12px; gap:6px; }
.primary { background:var(--primary); color:var(--on-primary); }
.primary:hover:not(:disabled) { background:var(--primary-hover); }
.secondary { background:var(--surface-raised); border-color:var(--input-border); }
.secondary:hover:not(:disabled),.subtle:hover:not(:disabled) { background:var(--surface-hover); }
.subtle { background:transparent; border-color:var(--line); }
.wide { width:100%; margin-top:15px; }
.text-link { font-weight:600; font-size:14px; color:var(--accent); }
.eyebrow { display:flex; align-items:center; gap:9px; font-size:10px; font-weight:700; letter-spacing:1.65px; color:var(--accent); margin-bottom:22px; }
.status-dot { height:7px; width:7px; flex-shrink:0; border-radius:50%; display:inline-block; background:var(--accent); }
.hero { display:grid; grid-template-columns:1.07fr 1fr; align-items:center; gap:76px; padding:86px 0 78px; }
.hero h1 { font-size:clamp(50px,5.5vw,78px); line-height:1.04; font-weight:600; letter-spacing:-5px; margin-bottom:30px; }
.hero h1 span { color:var(--accent); }
.hero-description { font-size:16px; max-width:450px; color:var(--muted); line-height:1.8; margin-bottom:30px; }
.actions { display:flex; align-items:center; gap:24px; }
.hero-note { font-size:11px; line-height:1.7; color:var(--muted); margin-top:24px; }
.hero-console { position:relative; }
.feature-grid { border-top:1px solid var(--line); padding:34px 0 52px; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.feature-grid article+article { border-left:1px solid var(--line); padding-left:34px; }
.feature-number { color:var(--accent); font-size:9px; letter-spacing:1.3px; font-weight:700; }
.feature-grid h2 { font-size:18px; letter-spacing:-.4px; margin:17px 0 9px; }
.feature-grid p { font-size:13px; color:var(--muted); max-width:280px; margin:0; }
footer { border-top:1px solid var(--line); padding:22px 0 26px; display:flex; justify-content:space-between; color:var(--muted); font-size:9px; letter-spacing:1.5px; }
footer .status-dot { margin-left:10px; }
.footer-mark { margin:0 10px; color:var(--muted); }
.page-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:18px 0; }
.page-toolbar h1 { font-size:20px; letter-spacing:-.5px; margin:0; }
.page-toolbar .button { font-size:12px; padding:10px 14px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.chip { font-size:9px; letter-spacing:1px; white-space:nowrap; border-radius:6px; padding:9px 12px; background:var(--accent-soft); color:var(--accent); }
.muted { color:var(--muted); }
.small { font-size:12px; }
.divider { height:1px; background:var(--line); margin:25px 0; }
.notice { border:1px solid var(--accent-line); border-radius:10px; background:var(--accent-soft); padding:15px 18px; margin-bottom:22px; font-size:13px; }
.auth-card { max-width:470px; margin:72px auto 100px; padding:36px; border:1px solid var(--line); background:var(--surface); border-radius:20px; }
.auth-card h1 { font-size:35px; }
.auth-card>p { font-size:14px; color:var(--muted); }
.auth-card .small { font-size:11px; margin:12px 0 0; }
.validation-message,.validation-errors { color:var(--danger); font-size:12px; padding-left:15px; }
.valid.modified:not([type=checkbox]) { outline:1px solid var(--accent); }
.invalid { outline:1px solid var(--danger); }
#blazor-error-ui { display:none; background:var(--warning-surface); color:var(--warning); border-top:1px solid var(--warning); padding:14px; position:fixed; bottom:0; left:0; width:100%; z-index:1000; font-size:13px; }
#blazor-error-ui .dismiss { float:right; cursor:pointer; }
.blazor-error-boundary { background:var(--danger-surface); padding:1rem; color:var(--danger); }
@media(min-width:1500px) { .hero { padding-top:110px; padding-bottom:100px; } }
@media(max-width:1100px) {
    .app-shell { padding:0 24px; } .hero { gap:40px; } .hero h1 { font-size:60px; letter-spacing:-3px; } .actions { flex-wrap:wrap; gap:16px; }
}
@media(max-width:760px) {
    .app-shell { padding:0 22px; } .topbar { height:48px; gap:12px; } .brand-name { display:none; } .brand-icon { margin-right:0; } .topbar nav { gap:12px; font-size:11px; } .topbar nav a:last-child { display:block; } .topbar .button { padding:7px 9px; }
    .hero { grid-template-columns:1fr; padding:45px 0; gap:38px; } .hero h1 { font-size:64px; letter-spacing:-4px; } .hero-console { max-width:500px; }
    .feature-grid { grid-template-columns:1fr; gap:25px; padding-top:28px; } .feature-grid article+article { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:23px; } .feature-grid p { max-width:none; }
    .auth-card { margin:40px auto 60px; padding:26px; } .auth-card h1 { font-size:30px; } footer { font-size:7px; letter-spacing:1px; } .footer-mark { margin:0 5px; } .hero-note { font-size:10px; }
}

/* Company context stays in the compact application header. */
.topbar .company-switcher { width:clamp(140px, 20vw, 260px); min-width:0; margin:0; padding:6px 26px 6px 10px; font-size:12px; height:32px; }
.create-company-page { min-height:calc(100dvh - 52px); display:grid; place-items:center; padding:32px 0; }
.create-company-page .create-company-panel { width:100%; max-width:520px; margin:0; padding:32px; border-radius:8px; }
.create-company-panel h1 { font-size:24px; letter-spacing:-.5px; margin:0 0 12px; }
.create-company-panel>p { font-size:14px; margin:0 0 28px; }
.create-company-panel label { display:block; margin-bottom:10px; }
.create-company-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:24px; }
@media(max-width:600px) { .create-company-page .create-company-panel { padding:24px; } }
@media(max-width:600px) {
    .app-shell { padding-left:12px; padding-right:12px; }
    .topbar { gap:8px; }
    .topbar .brand { display:none; }
    .topbar .company-switcher { width:clamp(86px, 27vw, 150px); font-size:11px; padding-left:6px; }
    .topbar nav { gap:8px; font-size:10px; }
    .topbar .button { font-size:10px; padding:7px 6px; white-space:nowrap; }
}

.header-capacity { position:relative; display:flex; align-items:center; gap:7px; flex-shrink:0; height:32px; padding:0 10px 3px; border:0; border-radius:6px; background:var(--surface-recessed); font-size:11px; white-space:nowrap; }
.header-capacity .fa-solid { color:var(--accent); font-size:15px; }.header-capacity-label { color:var(--muted); }.header-capacity strong { font-variant-numeric:tabular-nums; font-size:12px; }
.header-capacity-track { position:absolute; left:7px; right:7px; bottom:3px; height:2px; border-radius:2px; overflow:hidden; background:var(--line); }
.header-capacity-track>span { display:block; height:100%; background:var(--accent); transition:width .2s; }
@media(max-width:1000px) { .header-capacity-label { display:none; }.topbar { gap:14px; } }
@media(max-width:600px) {
    .topbar { gap:6px; }
    .topbar .company-switcher { flex:1; width:0; min-width:40px; max-width:150px; }
    .header-capacity { padding:0 6px 3px; gap:0; }.header-capacity .fa-solid { display:none; }.header-capacity strong { font-size:10px; }
    .topbar nav { gap:6px; font-size:10px; }
}

/* Company selector shares the capacity badge's compact dark treatment. */
.company-badge { position:relative; width:clamp(140px,20vw,260px); min-width:0; height:32px; border:1px solid var(--line); border-radius:6px; background:var(--surface-recessed); transition:border-color .15s,background .15s; }
.company-badge:hover,.company-badge:focus-within { border-color:var(--accent-line); background:var(--surface-hover); }
.topbar .company-badge .company-switcher { appearance:none; display:block; width:100%; min-width:0; max-width:none; height:30px; margin:0; padding:0 28px 0 33px; border:0; border-radius:5px; background:transparent; font-size:12px; font-weight:650; color:var(--ink); cursor:pointer; text-overflow:ellipsis; }
.topbar .company-badge .company-switcher:disabled { cursor:wait; opacity:.65; }
.company-switcher option { background:var(--surface-recessed); color:var(--ink); }
.company-badge-icon,.company-badge-chevron { position:absolute; top:50%; transform:translateY(-50%); pointer-events:none; }
.company-badge-icon { left:11px; font-size:14px; color:var(--accent); }
.company-badge-chevron { right:10px; font-size:9px; color:var(--muted); }
@media(max-width:600px) {
    .company-badge { flex:1; width:0; min-width:55px; max-width:150px; }
    .topbar .company-badge .company-switcher { padding-left:23px; padding-right:17px; font-size:10px; }
    .company-badge-icon { left:7px; font-size:11px; }.company-badge-chevron { right:6px; font-size:7px; }
}