/* KROVIO / Unified visual system • 2026-10-29
   Presentation only. No database, authentication, bank, or API mutations. */
:root{
  --kv-ink:#142035;--kv-ink-soft:#304158;--kv-blue:#4166e9;
  --kv-blue-hover:#3153d1;--kv-bg:#f5f7fa;--kv-surface:#fff;
  --kv-border:#e2e8f0;--kv-muted:#68788f;--kv-radius:18px;
  --kv-shadow:0 8px 28px rgba(14,35,70,.045);
  --app-bg:var(--kv-bg);--app-surface:var(--kv-surface);
  --app-ink:var(--kv-ink);--app-muted:var(--kv-muted);
  --app-line:var(--kv-border);--app-dark:#142338;
  --app-blue:var(--kv-blue);--app-shadow:var(--kv-shadow)
}
html{scroll-behavior:smooth}
body.krovio-public,body.krovio-app-body,body.krovio-setup-body{color:var(--kv-ink);-webkit-font-smoothing:antialiased}
body :where(button,a,input,select,textarea){-webkit-tap-highlight-color:transparent}
body :where(button,a,input,select,textarea):focus-visible{outline:3px solid rgba(65,102,233,.45);outline-offset:2px}
body :where(button){transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
body :where(button):not(:disabled):active{transform:translateY(1px)}
/* Core application shell */
.krovio-app-body .app-shell{grid-template-columns:238px minmax(0,1fr);grid-template-rows:76px auto}
.krovio-app-body .app-topbar{height:76px;grid-template-columns:238px minmax(220px,430px) minmax(0,1fr);gap:24px;padding:0 26px;background:rgba(255,255,255,.97)}
.krovio-app-body .app-sidebar{background:#16253a;padding:26px 15px 20px;top:76px;height:calc(100dvh - 76px)}
.krovio-app-body .app-sidebar nav{display:grid;gap:5px}
.krovio-app-body .app-sidebar nav a{min-height:45px;border-radius:11px;font-size:13px;font-weight:650;padding-inline:14px;transition:background .2s ease,color .2s ease}
.krovio-app-body .app-sidebar nav a.active{background:#2a3e59;color:#fff}
.krovio-app-body .app-sidebar nav a:hover{background:#263953}
.krovio-app-body .app-sidebar .app-nav-label{font-size:10px;letter-spacing:.105em;margin-bottom:11px;color:#94a8c6}
.krovio-app-body .app-sidebar-foot{margin-top:auto}
.krovio-app-body .app-sidebar-foot a{font-size:12px;color:#a9b6c9}
.krovio-app-body .app-main{width:100%;max-width:1560px;padding:38px clamp(22px,3vw,54px) 88px}
.krovio-app-body .app-page-header{margin-bottom:27px;align-items:center;gap:18px}
.krovio-app-body .app-page-header h1{font-size:clamp(28px,2.5vw,40px);line-height:1.13;letter-spacing:-.045em;margin:7px 0 8px}
.krovio-app-body .app-page-header>div:first-child>span,.krovio-app-body .card-head>div>span{font-size:10px;letter-spacing:.13em;color:#6f7f97}
.krovio-app-body .app-page-header p{font-size:14px;line-height:1.5}
.krovio-app-body .app-logo img{height:28px}
.krovio-app-body .app-building-switch select{height:48px;border-radius:12px;font-size:14px;font-weight:700;border-color:var(--kv-border);padding:0 17px}
.krovio-app-body .app-account>div span{font-size:10px;letter-spacing:.06em}
.krovio-app-body .app-account>div strong{font-size:13px}
.krovio-app-body .app-logout{font-size:12px}
.krovio-app-body .app-avatar{width:39px;height:39px;font-size:12px;background:var(--kv-blue)}
/* Reusable component language across finance, invoices, records and cards */
.krovio-app-body :where(.app-card,.dash-kpis article,.finance-summary article,.apartment-directory-card,.kfc-metric,.kfc-review,.kfc-details,.kfc-months>div,.kf57-panel,.kf57-kpis>div,.kfs-stats>div){border:1px solid var(--kv-border);border-radius:var(--kv-radius);background:var(--kv-surface);box-shadow:var(--kv-shadow)}
.krovio-app-body :where(.app-card,.apartment-directory-card){padding:clamp(18px,2vw,28px)}
.krovio-app-body :where(.dash-kpis article,.finance-summary article){padding:22px 22px 20px}
.krovio-app-body .dash-kpis{gap:14px;margin-bottom:18px}
.krovio-app-body .dash-kpis span{font-size:12px;font-weight:600}
.krovio-app-body .dash-kpis strong{font-size:clamp(23px,2vw,32px);letter-spacing:-.04em}
.krovio-app-body .dash-kpis small{font-size:11px;margin-top:7px}
.krovio-app-body :where(.overview-grid,.manager-home-grid){gap:17px}
.krovio-app-body .card-head{align-items:center;margin-bottom:17px}
.krovio-app-body .card-head h2{font-size:19px;letter-spacing:-.025em}
.krovio-app-body .card-head a{font-size:12px}
.krovio-app-body :where(.app-card,.kfc,.kfc-review,.kfc-details) :where(p,small){line-height:1.55}
.krovio-app-body :where(.page-actions button,.button-primary,.button-secondary,.kfc-btn,.krovio-ms-button,.kb-button,.krovio-fr-save){min-height:43px;border-radius:11px;font-size:13px;font-weight:700;padding:10px 17px}
.krovio-app-body :where(.button-primary,.page-actions button.primary){background:var(--kv-ink);color:#fff;border-color:var(--kv-ink)}
.krovio-app-body :where(.button-primary,.page-actions button.primary):hover{background:#2d4160}
.krovio-app-body :where(input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:11px;border-color:#d5dfeb;font-size:14px;max-width:100%}
.krovio-app-body :where(.record-row,.task-row,.attention-row,.apartment-list-row){border-bottom-color:#e9edf3}
.krovio-app-body :where(.record-row,.task-row,.apartment-list-row):hover{background:#fafcff}
.krovio-app-body .empty-state{padding:36px 22px;text-align:center;background:#fafbfe;border:1px dashed #d6e0eb;border-radius:15px}
.krovio-app-body .kfc-head h2{font-size:21px}
.krovio-app-body .kfc-head p{font-size:13px}
.krovio-app-body .kfc-metrics{gap:14px}
.krovio-app-body .kfc-metric small{font-size:12px}
.krovio-app-body .kfc-metric strong{font-size:clamp(18px,1.6vw,23px)}
.krovio-app-body .kfc-note{font-size:13px}
.krovio-app-body .kfc-scroll{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
.krovio-app-body .kfc-scroll th{background:#f7f9fc;color:#40536e;font-weight:700}
.krovio-app-body .kfc-scroll th,.krovio-app-body .kfc-scroll td{padding:13px 14px}
.krovio-app-body .kfc-review-head{gap:14px}
.krovio-app-body details>summary{cursor:pointer;outline-offset:3px}
.krovio-app-body .app-modal-sheet{border-radius:22px}
/* Public, auth, setup: one type and control language without overriding layout logic */
.krovio-public :where(.k-header-cta,.k-btn-primary,.k-primary-button),.krovio-setup-body :where(button[type=submit],.setup-primary){border-radius:12px}
.krovio-public :where(.k-header-cta,.k-btn-primary,.k-primary-button):hover{filter:brightness(.94)}
.krovio-public :where(.k-site-header),.krovio-setup-body .k-setup-header{border-bottom:1px solid #e7ecf3;background:rgba(255,255,255,.97)}
.krovio-public :where(.k-brand-logo),.krovio-setup-body .k-setup-logo img{height:auto;max-height:34px}
.krovio-public :where(input,textarea,select),.krovio-setup-body :where(input,textarea,select){border-radius:12px}
.krovio-setup-body{background:var(--kv-bg)}
.krovio-setup-body :where(.setup-card,.k-setup-card,.setup-panel){box-shadow:var(--kv-shadow)}
.krovio-app-body .k2-menu-toggle{display:none}
.krovio-app-body .k2-menu-overlay[hidden]{display:none}
@media (max-width:1100px){
  .krovio-app-body .app-shell{grid-template-columns:204px minmax(0,1fr)}
  .krovio-app-body .app-topbar{grid-template-columns:204px minmax(180px,390px) minmax(0,1fr);gap:13px}
  .krovio-app-body .app-main{padding:29px 24px 70px}
  .krovio-app-body .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .krovio-app-body .app-shell{display:block;padding-bottom:80px}
  .krovio-app-body .app-topbar{height:auto;min-height:69px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;padding:10px 14px;gap:9px}
  .krovio-app-body .k2-menu-toggle{display:flex;width:42px;height:42px;border:1px solid var(--kv-border);background:#fff;border-radius:11px;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;grid-column:1;grid-row:1}
  .krovio-app-body .k2-menu-toggle span{height:2px;width:18px;border-radius:2px;background:#1f3654}
  .krovio-app-body .app-logo{grid-column:2;grid-row:1;align-self:center}
  .krovio-app-body .app-logo img{height:24px}
  .krovio-app-body .app-account{grid-column:3;grid-row:1}
  .krovio-app-body .app-avatar{width:35px;height:35px}
  .krovio-app-body .app-building-switch{grid-column:1/-1;grid-row:2}
  .krovio-app-body .app-sidebar{display:flex;position:fixed;z-index:110;top:0;left:0;bottom:0;width:min(310px,85vw);height:100dvh;padding:26px 17px;transform:translateX(-105%);transition:transform .23s ease;box-shadow:16px 0 40px rgba(0,0,0,.16);overflow-y:auto}
  .krovio-app-body.k2-nav-open .app-sidebar{transform:translateX(0)}
  .krovio-app-body .k2-menu-overlay:not([hidden]){display:block;position:fixed;z-index:105;inset:0;border:0;border-radius:0;margin:0;background:rgba(12,21,36,.52);width:100%;height:100%;cursor:pointer}
  .krovio-app-body .app-main{padding:24px 15px 38px}
  .krovio-app-body .app-page-header{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-bottom:20px}
  .krovio-app-body .app-page-header h1{font-size:clamp(26px,6vw,34px)}
  .krovio-app-body .page-actions{display:flex;flex-wrap:wrap;margin-top:0}
  .krovio-app-body .page-actions button{flex:1 1 145px}
  .krovio-app-body .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .krovio-app-body .dash-kpis article{padding:16px 14px}
  .krovio-app-body .dash-kpis strong{font-size:clamp(18px,4.6vw,25px);overflow-wrap:anywhere}
  .krovio-app-body .app-card{padding:18px 16px}
  .krovio-app-body .kfc-metrics,.krovio-app-body .kfc-months{grid-template-columns:repeat(2,minmax(0,1fr))}
  .krovio-app-body .kfc-metric{padding:15px}
  .krovio-app-body .kfc-head{flex-direction:column;align-items:stretch}
  .krovio-app-body .app-mobile-nav{z-index:70}
}
@media (max-width:480px){
  .krovio-app-body .dash-kpis strong{font-size:19px}
  .krovio-app-body .kfc-metrics,.krovio-app-body .kfc-months{grid-template-columns:1fr 1fr}
  .krovio-app-body .kfc-metric strong{font-size:17px}
  .krovio-app-body .kfc-fields{grid-template-columns:minmax(0,1fr)}
  .krovio-app-body .page-actions button{width:100%}
  .krovio-app-body .app-account .app-logout{display:none}
  .krovio-public :where(.k-header-inner){padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}