* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* Keep sign-in and header layout simple, let DevExtreme handle most visuals */
.signin-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px; }
.signin-card { max-width: 560px; width: 100%; text-align: center; }
.signin-brand img { height: 40px; }
.btn.primary { color:#fff; }

.app.hidden, .signin-wrap.hidden { display: none; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:4px 16px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand img { height: 34px; }
.userbox { display:flex; align-items:center; gap:12px; }
.avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; overflow:hidden; }
.avatar.photo { background-size: cover; background-position: center; }
.avatar.initials { font-size: .85rem; }

/* Theme toggle */
.theme-toggle { display:flex; align-items:center; gap:6px; margin-right:12px; font-size:.85rem; }
.switch { position:relative; display:inline-block; width:40px; height:20px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#d1d5db; transition:.2s; border-radius:999px; }
.slider:before { position:absolute; content:""; height:14px; width:14px; left:3px; bottom:3px; background-color:white; transition:.2s; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .slider { background-color:#111827; }
.switch input:checked + .slider:before { transform:translateX(18px); }

/* Grid container */
#grid { padding:16px; }

.load-summary { display:flex; align-items:center; gap:16px; margin:0 16px 8px; font-size:.85rem; }
.load-summary-count { opacity:.8; }