/* INBICOM web console — page layout on top of the design system (tokens.css + components.css) */
html, body { margin: 0; min-height: 100%; background: var(--bg-000); color: var(--ink-100); }
body { font-family: var(--font-sans); font-size: 14px; line-height: 20px; }
a { color: inherit; }
#app { min-height: 100vh; display: flex; flex-direction: column; }
main { max-width: 1320px; width: 100%; margin: 0 auto; padding: var(--space-7); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-5); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-3); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.cols > .main { flex: 999 1 560px; min-width: 0; }
.cols > .side { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.inline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.login .ib-card { width: 100%; max-width: 380px; gap: var(--space-4); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--bg-100); border: var(--hairline) solid var(--line-hi); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; z-index: 10; }
.toast--bad { border-color: var(--signal-bad); color: var(--signal-bad); }
.breadcrumb { font-size: 13px; color: var(--ink-200); }
.breadcrumb a { text-decoration: none; }
.empty { color: var(--ink-200); font-size: 13px; padding: var(--space-4) 0; }
.sig { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: var(--hairline) solid var(--line-100); font-size: 13px; line-height: 1.4; }
.sig .ib-dot { margin-top: 5px; }
@media (max-width: 900px) { .kpis, .kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } main { padding: var(--space-4); } }