/* =========================================================
   Ajustes de interface — Biblioteca | Copyright Sitter
   Arquivo: /biblioteca/ajustes-interface.css
   Para mudar tamanhos, altere só as variáveis abaixo.
   ========================================================= */

:root {
  /* botões secundários (Contato, Valores, Claro/Escuro...) */
  --cs-btn-h: 36px;
  --cs-btn-min-w: 96px;
  --cs-btn-pad: 0 14px;
  --cs-btn-fs: 13px;

  /* botão principal (Registrar Nova Obra) */
  --cs-main-h: 42px;
  --cs-main-min-w: 170px;
  --cs-main-pad: 0 20px;
  --cs-main-fs: 14px;

  /* título "Copyright Sitter" */
  --cs-title-fs: 20px;
  --cs-title-fs-mobile: 16px;
}

/* ---------- Grupo de botões do cabeçalho ---------- */
#root .library-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ---------- Botões secundários ---------- */
body button.library-header-action,
body button.theme-toggle,
body button#cs-header-values-button {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: var(--cs-btn-min-w) !important;
  height: var(--cs-btn-h) !important;
  min-height: var(--cs-btn-h) !important;
  padding: var(--cs-btn-pad) !important;
  font-size: var(--cs-btn-fs) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  flex: 0 0 auto;
}

/* ---------- Botão principal: "Registrar Nova Obra" ---------- */
body button.cs-wizard-trigger {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: var(--cs-main-min-w) !important;
  height: var(--cs-main-h) !important;
  min-height: var(--cs-main-h) !important;
  padding: var(--cs-main-pad) !important;
  font-size: var(--cs-main-fs) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  flex: 0 0 auto;
}

/* ---------- Botão de fechar do cadastro ---------- */
body button.cs-registration-close {
  box-sizing: border-box !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
}

/* ---------- Botões desativados ("Em breve") ---------- */
body button.library-header-action:disabled,
body button#cs-header-values-button:disabled {
  cursor: not-allowed;
}

/* ---------- Acessibilidade: foco visível no teclado ---------- */
body button.library-header-action:focus-visible,
body button.theme-toggle:focus-visible,
body button#cs-header-values-button:focus-visible,
body button.cs-wizard-trigger:focus-visible,
body button.cs-registration-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------- Título "Copyright Sitter" no cabeçalho ---------- */
/* .brand-company vem do app; .eyebrow-company vem dos scripts extras */
#root .brand-company,
#root .eyebrow-company {
  display: block !important;
  margin-top: 6px !important;
  font-size: var(--cs-title-fs) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  opacity: 1 !important;
}

/* ---------- Celular ---------- */
@media (max-width: 640px) {
  /* alvo de toque maior */
  body button.library-header-action,
  body button.theme-toggle,
  body button#cs-header-values-button,
  body button.cs-wizard-trigger {
    height: 44px !important;
    min-height: 44px !important;
  }

  body button.cs-wizard-trigger {
    width: 100% !important;
    flex: 1 1 100%;
  }

  body button.cs-registration-close {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  #root .brand-company,
  #root .eyebrow-company {
    font-size: var(--cs-title-fs-mobile) !important;
  }
}