/* Cockpit-specific global polish on top of the Leap design tokens. */
html, body, #root { height: 100%; margin: 0; }
body { background: var(--bg-subtle); }
#root { overflow: hidden; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #CBD5D9; border-radius: 999px; border: 2px solid var(--surface); }
*::-webkit-scrollbar-track { background: transparent; }

select option { color: #0B3B42; }

/* hide scrollbars where we scroll but don't want the bar (e.g. sidebar nav) */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* native controls inherit the brand font + accent */
input, textarea, select, button { font-family: var(--font-sans); }
input[type="datetime-local"] { color-scheme: light; }
input[type="checkbox"] { accent-color: var(--accent); }

/* custom caret for selects (appearance:none in JS) */
select.cropr-caret {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px !important;
}

/* responsive: collapse two-pane layouts on narrow screens */
@media (max-width: 1080px) {
  .composer-grid { grid-template-columns: 1fr !important; }
  .composer-grid > div:last-child { position: static !important; }
  .pulse-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  .asset-upload-grid { grid-template-columns: 1fr !important; }
  .profile-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 920px) {
  .profile-2col { grid-template-columns: 1fr !important; }
  .profile-2col > div:last-child { position: static !important; }
}