:root {
  color-scheme: light;
  --focus: #3b9ce9;
  --surface: #ffffff;
  --border: #d8e2e7;
}

html { scroll-behavior: smooth; }
body { font-size: 16px; line-height: 1.5; }
body.modal-open { overflow: hidden; }
button:disabled { cursor: wait; opacity: .65; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.entity-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.btn { min-height: 42px; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn:hover { box-shadow: 0 6px 16px #0d2f3718; }
.btn:active { transform: translateY(1px); }
.nav button { min-height: 44px; font-size: 15px; }
.nav button:focus-visible { outline-color: #8bc7ff; }
.content { max-width: 1680px; margin: 0 auto; }
.top h2 { letter-spacing: -.02em; }
.top p { max-width: 720px; font-size: 15px; }
.header .actions { min-width: 0; }
.user-chip { min-width: 0; max-width: 240px; }
.user-chip b, .user-chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card { box-shadow: 0 4px 18px #0d2f370a; }

.field { gap: 7px; }
.field label,
.drawer-field,
.drawer-label { font-size: 14px; }
.field input,
.field select,
.field textarea,
.toolbar input,
.toolbar select,
.filter-field input,
.filter-field select,
.drawer-field input,
.drawer-field select,
.drawer-field textarea {
  min-height: 44px;
  border-color: #c9d7dd;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: #98adb7; }
input:focus, select:focus, textarea:focus { border-color: #2b87d3; box-shadow: 0 0 0 3px #2b87d31c; }

.tablewrap { position: relative; border-color: var(--border); }
.tablewrap table { font-size: 14px; }
.tablewrap thead { position: sticky; top: 0; z-index: 1; background: #f7fafb; }
.tablewrap th { padding-top: 12px; padding-bottom: 12px; color: #52646d; font-size: 12px; }
.tablewrap tbody tr { transition: background .12s ease; }
.tablewrap tbody tr:hover { background: #f7fafb; }
.badge { font-size: 13px; }
.muted { color: #5f7078; }

.box { border: 1px solid #d7e1e6; }
.box h2 { padding-right: 48px; letter-spacing: -.02em; }
.close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font-size: 23px; }
.toast { max-width: min(420px, calc(100vw - 32px)); font-size: 14px; }

.side-backdrop { display: none; }
.password-field { position: relative; }
.login-card > label { margin: 14px 0 7px; font-size: 14px; }
.login-card > input,
.password-field input { width: 100%; min-height: 48px; padding: 12px 96px 12px 13px; border: 1px solid #bccbd2; border-radius: 11px; background: #f9fbfc; }
.login-card > input { padding-right: 13px; }
.password-field button { position: absolute; top: 5px; right: 5px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: #e8eef1; color: #28414b; font-size: 13px; font-weight: 750; }
.login-card > .btn { min-height: 48px; }

@media (max-width: 1100px) {
  .side { box-shadow: 18px 0 50px #071b2140; }
  .side-backdrop { position: fixed; inset: 0; z-index: 19; border: 0; background: #071b2173; }
  .menu-open .side-backdrop { display: block; }
}

@media (min-width: 1101px) and (max-width: 1300px) {
  .header #saveStatus { display: none; }
  .header { padding-right: 18px; padding-left: 22px; }
}

@media (max-width: 700px) {
  body { font-size: 15px; }
  .header { gap: 8px; }
  .header h1 { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .content { padding-bottom: 92px; }
  .top p { font-size: 14px; }
  .dashboard-kpis { grid-template-columns: 1fr 1fr !important; }
  .dashboard-kpis .pro-kpi { align-items: flex-start; min-height: 102px; padding: 14px 12px; }
  .dashboard-kpis .pro-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .dashboard-kpis .pro-kpi strong { font-size: 16px; overflow-wrap: anywhere; }
  .tablewrap { margin-right: -15px; border-radius: 13px 0 0 13px; }
  .mobile-nav button { min-height: 52px; font-size: 11px; }
  .box { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (max-width: 410px) {
  .dashboard-kpis { grid-template-columns: 1fr !important; }
  .dashboard-kpis .pro-kpi { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}