/**
 * Octo11 — tema claro (referência: mock + octo11_roboto.html)
 * Tipografia: Roboto (UI), IBM Plex Mono (labels densos / breadcrumb-style)
 */

.theme-octo11 {
  --q11-font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
  --q11-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --q11-bg-primary: #f7f3ec;
  --q11-bg-secondary: #fffdf8;
  --q11-bg-tertiary: #f2ede3;

  --q11-sidebar-bg: #fffdf8;
  --q11-sidebar-border: rgba(26, 23, 16, 0.08);
  --q11-sidebar-accent: #c9a84c;
  --q11-sidebar-text-muted: #6b6355;

  --q11-sidebar-logo-collapsed-size: 40px;
  --q11-sidebar-collapsed-width: 80px;
  --q11-sidebar-logo-full-width: 112px;
  --q11-sidebar-logo-full-height: 72px;

  /* Header institucional: barra fina (tipo SPAR11) + logo grande que desce sobre o hero. */
  --q11-institutional-toolbar-height: 52px;
  --q11-institutional-header-band-bg: var(--q11-bg-secondary);
  --q11-institutional-logo-mobile-height: 54px;
  --q11-institutional-logo-full-height: 102px;
  --q11-institutional-logo-full-max-width: min(280px, 42vw);
  --q11-institutional-logo-mobile-max-width: 200px;
  /* Popover de idioma (core) usa ~15px; botão “idioma atual” alinha ao mesmo token. */
  --q11-font-size-lang: 0.9375rem;

  --q11-text-primary: #1a1710;
  --q11-text-secondary: #6b6355;
  --q11-text-muted: #b5afa4;

  --q11-accent: #c9a84c;
  --q11-accent-hover: #a88b3d;
  --q11-on-accent: #1a1710;
  --q11-sidebar-toggle-bg: var(--q11-bg-secondary);
  --q11-sidebar-toggle-bg-hover: var(--q11-bg-tertiary);
  --q11-sidebar-toggle-border: var(--q11-border);
  --q11-sidebar-toggle-color: var(--q11-accent);
  --q11-sidebar-toggle-color-hover: var(--q11-accent-hover);

  --q11-border: rgba(26, 23, 16, 0.1);
  --q11-border-focus: #c9a84c;

  --q11-card-bg: #fffdf8;
  --q11-card-shadow: 0 1px 3px rgba(26, 23, 16, 0.06);

  --q11-modal-body-color: var(--q11-text-secondary);
  --q11-danger: #c73e3e;
  --q11-danger-hover: #d14a4a;
  --q11-on-danger: #fff8f7;

  --q11-toast-success-bg: #e8f5ef;
  --q11-toast-success-color: #1e6b45;
  --q11-toast-warning-bg: #fdf6e3;
  --q11-toast-warning-color: #7a5a1a;
  --q11-toast-error-bg: #fdecea;
  --q11-toast-error-color: #8c2a2a;
  --q11-toast-info-bg: #eef6fc;
  --q11-toast-info-color: #1a4a6e;
}

.theme-octo11 ion-header.header-md {
  box-shadow: none;
  --background: var(--q11-bg-primary);
}

.theme-octo11 ion-header ion-toolbar {
  --border-width: 0;
  /* Mesmo fundo que .shell-main / shell-content — evita “faixa” no topo. */
  --background: var(--q11-bg-primary);
  --color: var(--q11-text-primary);
}

/* Landing institucional: faixa um pouco mais clara; sem border Ionic (evita linha preta no toolbar). */
.theme-octo11 ion-header.institutional-header {
  box-shadow: none;
}

.theme-octo11 ion-header.institutional-header ion-toolbar.institutional-toolbar {
  --background: var(--q11-institutional-header-band-bg, var(--q11-bg-secondary));
  --border-width: 0;
  --border-color: transparent;
  box-shadow: none;
  border: 0;
}

.theme-octo11 .shell-nav-group,
.theme-octo11 .shell-nav-group-btn {
  font-family: var(--q11-font-mono);
  letter-spacing: 0.1em;
}

/* Menu lateral / overflow / tabs: mesma “receita” que o modo escuro (accent + bg-secondary) */
.theme-octo11 .shell-nav-link:hover {
  background: color-mix(in srgb, var(--q11-accent) 12%, var(--q11-bg-secondary));
  color: var(--q11-text-primary);
}

.theme-octo11 .shell-nav-link.active {
  background: color-mix(in srgb, var(--q11-accent) 14%, var(--q11-bg-secondary));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q11-accent) 32%, transparent);
  border-left: 4px solid var(--q11-accent);
  color: var(--q11-sidebar-accent, var(--q11-accent));
}

.theme-octo11 .shell-overflow-link:hover {
  background: color-mix(in srgb, var(--q11-accent) 12%, var(--q11-bg-secondary));
}

.theme-octo11 .shell-tab-link:hover {
  color: var(--q11-text-primary);
  background: color-mix(in srgb, var(--q11-accent) 12%, var(--q11-bg-secondary));
  border-radius: 10px;
}

.theme-octo11 .shell-tab-link.active {
  color: var(--q11-accent);
  background: color-mix(in srgb, var(--q11-accent) 14%, var(--q11-bg-secondary));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q11-accent) 32%, transparent);
  border-radius: 10px;
}

.theme-octo11 .institutional-nav-link:hover {
  background: color-mix(in srgb, var(--q11-accent) 12%, var(--q11-bg-secondary));
  color: var(--q11-text-primary);
  border-radius: 8px;
}

.theme-octo11 .institutional-nav-link.active {
  color: var(--q11-accent);
  font-weight: 500;
  background: color-mix(in srgb, var(--q11-accent) 14%, var(--q11-bg-secondary));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q11-accent) 32%, transparent);
  border-radius: 8px;
}

/*
 * Modo claro: precisa de especificidade >= .theme-octo11.theme-dark (ficheiro escuro), senão o
 * z-index: 20 encapsulado do shell ganha à cascata e o .shell-main tapa o toggle fixed.
 */
.theme-octo11:not(.theme-dark) .shell-main {
  background: var(--q11-bg-primary);
  z-index: 1;
}

body.q11-overlay-open .theme-octo11:not(.theme-dark) .shell-main {
  z-index: 10020;
}

.theme-octo11:not(.theme-dark) .shell-left-layout-desktop .shell-main {
  padding-inline-start: 12px;
}

.theme-octo11 .shell-content {
  --background: var(--q11-bg-primary);
}

.theme-octo11 .institutional-content {
  --background: var(--q11-bg-primary);
  --border-width: 0;
  box-shadow: none;
}

.theme-octo11 q11-breadcrumb a,
.theme-octo11 .q11-breadcrumb-left,
.theme-octo11 .q11-breadcrumb-left a {
  font-family: var(--q11-font-mono);
  font-size: 11px;
}

.theme-octo11 .shell-logo-img,
.theme-octo11 .shell-logo-collapsed {
  height: auto;
  max-height: 72px;
}

.theme-octo11 .shell-header-logo-mobile {
  margin-right: 20px;
}

.theme-octo11 .shell-header-logo-mobile q11-logo {
  height: 36px;
}

.theme-octo11 q11-logo.institutional-logo-full {
  height: var(--q11-institutional-logo-full-height);
  max-height: var(--q11-institutional-logo-full-height);
  max-width: var(--q11-institutional-logo-full-max-width);
  width: auto;
}

.theme-octo11 q11-logo.institutional-logo-mobile {
  height: var(--q11-institutional-logo-mobile-height);
  max-height: var(--q11-institutional-logo-mobile-height);
  max-width: var(--q11-institutional-logo-mobile-max-width);
  width: auto;
}

/* PNG com muito espaço transparente em baixo: prioriza o “11” visível dentro da caixa. */
.theme-octo11 ion-header.institutional-header q11-logo img {
  object-fit: contain;
  object-position: top center;
}

/*
 * q11-theme-toggle (core): border 1px + variáveis do ion-button geram “caixa” dupla / anel extra.
 * Deixar só ícone, alinhado ao header plano Octo11.
 */
.theme-octo11 q11-theme-toggle ion-button.theme-toggle-btn {
  --border-width: 0;
  --box-shadow: none;
  border: none;
  box-shadow: none;
}

.theme-octo11 q11-theme-toggle ion-button.theme-toggle-btn::part(native) {
  border: none;
  box-shadow: none;
}

/* Toggle recolher menu: anel + sombra como referência Vitmov (cor accent do tema). */
.theme-octo11 .shell-collapse-btn {
  --q11-sidebar-toggle-shadow: 0 0 0 1px color-mix(in srgb, var(--q11-accent) 40%, transparent),
    0 4px 14px rgba(26, 23, 16, 0.12);
}