/*
 * Design System do Painel Master — base visual v1
 *
 * Convenção obrigatória para novos componentes:
 * - .ds-*  componente compartilhado do painel;
 * - .is-*  estado visual;
 * - data-* comportamento JavaScript;
 * - nunca estilizar tags genéricas para resolver uma tela isolada.
 */
:root {
  --ds-font-sans: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-display: var(--ds-font-sans);
  --ds-content-max: 1280px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-radius-control: 9px;
  --ds-radius-card: 13px;
  --ds-radius-panel: 18px;
  --ds-focus-ring: 0 0 0 3px var(--blue-soft);
}

body,
button,
input,
select,
textarea {
  font-family: var(--ds-font-sans);
}

/* Primitivos reutilizáveis. Novas telas devem compor estes elementos. */
.ds-eyebrow {
  margin: 0 0 var(--ds-space-3);
  color: var(--blue-bright);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ds-heading {
  margin: 0;
  color: var(--white);
  font-family: var(--ds-font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: 1.05;
}

.ds-heading em { color: var(--blue-bright); font-style: normal; }

.ds-copy {
  max-width: 680px;
  margin: var(--ds-space-3) 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
}

.ds-card {
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-card);
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  box-shadow: 0 8px 25px #0003;
  padding: var(--ds-space-5);
}

.ds-field:focus-visible,
.ds-button:focus-visible,
.ds-icon-button:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus-ring);
}

.ds-button,
.ds-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: 42px;
  border: 1px solid #329dff55;
  border-radius: var(--ds-radius-control);
  background: linear-gradient(180deg, #1595ff, #0565dc);
  color: #fff;
  font: 700 14px/1 var(--ds-font-sans);
  text-decoration: none;
  cursor: pointer;
}

/* O menu e os submenus compartilham raio, contraste e foco visível. */
.sidebar .nav-group-toggle,
.sidebar .nav-group-panel a,
.sidebar .accordion-nav > a,
.sidebar .nav-subcategory-label {
  font-family: var(--ds-font-sans);
}

.brand-version { display: none; }
.nav-account-logout { margin: 7px 0 1px; padding-top: 7px; border-top: 1px solid var(--line); }
.nav-account-logout button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; box-shadow: none; color: #b7c0ce; font: 700 14px/1 var(--ds-font-sans); text-align: left; }
.nav-account-logout button:hover { border-color: #ff758455; background: #ff5b6e12; color: #ffd4d9; filter: none; transform: none; }
.nav-account-logout i { width: 17px; color: #d9a1aa; font-size: 16px; font-style: normal; text-align: center; }

@media (max-width: 840px) {
  .ds-card { padding: var(--ds-space-4); }
  .ds-heading { font-size: clamp(28px, 9vw, 36px); }
}

@media (min-width: 841px) {
  .brand-version { position: absolute; top: 51px; left: -17px; display: block !important; width: 78px; color: #7d91aa; font-size: 7px; font-weight: 800; letter-spacing: .01em; line-height: 1.1; text-align: center; white-space: nowrap; }
  .brand-mark { font-size: 15px !important; letter-spacing: -.08em; }
}

/* Prévia administrativa: usa um iframe para ativar os breakpoints reais da tela. */
.responsive-preview-dialog {
  width: min(1600px, calc(100vw - 28px));
  height: min(1000px, calc(100vh - 28px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--ds-radius-panel);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 28px 90px #000b;
}

.responsive-preview-dialog::backdrop { background: #000b; backdrop-filter: blur(4px); }
.responsive-preview-trigger { padding: 0 !important; border-color: #258cff88 !important; background: #087cff14 !important; color: var(--blue-bright) !important; box-shadow: none !important; }
.responsive-preview-trigger:hover { background: #087cff2a !important; color: var(--white) !important; transform: none !important; }
@media (min-width: 1220px) {
  .responsive-preview-trigger { width: auto !important; padding: 0 12px !important; }
  .responsive-preview-trigger > span { display: inline !important; font-size: 12px; font-weight: 800; }
}
.responsive-preview-shell { display: flex; height: 100%; min-height: 0; flex-direction: column; }
.responsive-preview-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.responsive-preview-header .ds-eyebrow { margin-bottom: 5px; }
.responsive-preview-header strong { color: var(--white); font-size: 15px; }
.responsive-preview-toolbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.responsive-preview-toolbar button { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: none; color: var(--muted); font-size: 12px; }
.responsive-preview-toolbar button:hover,
.responsive-preview-toolbar button.is-active { border-color: #198eff66; background: var(--blue-soft); color: var(--white); transform: none; }
.responsive-preview-toolbar .responsive-preview-close { width: 34px; padding: 0; font-size: 23px; line-height: 1; }
.responsive-preview-note { margin: 0; padding: 10px 22px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.45; }
.responsive-preview-stage { display: flex; min-height: 0; flex: 1; align-items: stretch; justify-content: center; overflow: auto; padding: 18px; background: repeating-conic-gradient(#11141a 0 25%, #0d0f13 0 50%) 50% / 20px 20px; }
.responsive-preview-stage iframe { width: 1440px; min-width: 1440px; height: 100%; min-height: 680px; border: 1px solid #3b4350; border-radius: 10px; background: var(--bg); box-shadow: 0 20px 60px #0009; transition: width .2s ease, min-width .2s ease; }
.responsive-preview-stage[data-device="tablet"] iframe { width: 768px; min-width: 768px; }
.responsive-preview-stage[data-device="mobile"] iframe { width: 390px; min-width: 390px; }

@media (max-width: 840px) {
  .responsive-preview-trigger { display: none !important; }
}

@media (max-width: 650px) {
  .responsive-preview-dialog { width: calc(100vw - 12px); height: calc(100vh - 12px); }
  .responsive-preview-header { align-items: flex-start; flex-direction: column; padding: 15px; }
  .responsive-preview-toolbar { justify-content: flex-start; }
  .responsive-preview-note { padding: 9px 15px; }
  .responsive-preview-stage { padding: 12px; }
}