/* ============================================================================
   3. AGENDAMENTO · topbar própria (h1 + toggle + refresh) + rail lateral +
   canvas de calendário. Templates injetados pelo app.js (ag-mini-*,
   ag-cal-*, ag-month, ag-tl-*, ag-onb-*) revestidos aqui.
   ========================================================================== */
:root[data-theme] #page-agendamento.page.active{
  display: flex;
  flex-direction: column;
  background: var(--color-carbon);
}

/* ── topbar ── */
:root[data-theme] #page-agendamento .agx-top{
  flex: 0 0 var(--lx-h-topbar);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--color-graphite);
  background: var(--color-carbon);
}
:root[data-theme] #page-agendamento .agx-h1{
  margin: 0;
  font-size: 24px;
  line-height: 1.33;
  letter-spacing: -.288px;
  font-weight: var(--lx-w-510);
  color: var(--color-paper);
}
:root[data-theme] #page-agendamento .agx-sub{
  font-size: 13px;
  color: var(--color-ash);
  white-space: nowrap;
}
:root[data-theme] #page-agendamento .agx-spacer{ flex: 1; }
:root[data-theme] #page-agendamento .agx-ibtn{
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--lx-r-md);
  background: transparent;
  color: var(--color-fog);
}
:root[data-theme] #page-agendamento .agx-ibtn:hover{
  background: var(--lx-wash-hover-2);
  border-color: transparent;
  color: var(--color-bone);
}
:root[data-theme] #page-agendamento .agx-ibtn svg{ width: 15px; height: 15px; }

/* toggle de visualização: controle segmentado do protótipo */
:root[data-theme] #page-agendamento .ag-view-toggle{
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--color-obsidian);
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-md);
}
:root[data-theme] #page-agendamento .ag-view-opt{
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--lx-r-badge);
  background: transparent;
  color: var(--color-fog);
  font-family: var(--lx-font-ui);
  font-size: 12px;
  font-weight: var(--lx-w-510);
  cursor: pointer;
  box-shadow: none;
  transition: background-color .12s ease, color .12s ease;
}
:root[data-theme] #page-agendamento .ag-view-opt:hover{ color: var(--color-bone); }
:root[data-theme] #page-agendamento .ag-view-opt.active{
  background: var(--color-graphite);
  color: var(--color-paper);
  box-shadow: none;
}
/* Item 13 — a aba ativa "Google Calendar" (#bk-tabbar .bk-tab.active) vinha azul
   (#4d7cff) no escuro e lima com TEXTO BRANCO no claro (contraste ~1.3 e visual
   inconsistente). Unifica no acento padrão das abas ativas nos dois temas: fundo
   lima + tinta on-lime (quase-preto), igual a .trk-tab-btn.active. !important
   vence os estilos inline do bkSwitch e o override [data-theme="light"] da base. */
:root[data-theme] #bk-tabbar .bk-tab.active{
  background: var(--color-acid-lime) !important;
  border-color: var(--color-acid-lime) !important;
  color: var(--lx-on-lime) !important;
}

/* ── shell: rail + main ocupam o restante da viewport abaixo da topbar ── */
:root[data-theme] #page-agendamento .ag-shell{
  flex: 1;
  min-height: 0;
  height: calc(100dvh - var(--lx-h-topbar));
  background: var(--color-carbon);
}
:root[data-theme] #page-agendamento .ag-side{
  width: 248px;
  padding: 16px 12px;
  gap: 16px;
  border-right: 1px solid var(--color-graphite);
  background: var(--color-carbon);
}

/* criar evento: primário lime */
:root[data-theme] #page-agendamento .ag-create-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--lx-h-btn);
  padding: 0 12px;
  border: 1px solid var(--color-acid-lime);
  border-radius: var(--lx-r-md);
  background: var(--color-acid-lime);
  color: var(--lx-on-lime);
  font-family: var(--lx-font-ui);
  font-size: 13px;
  font-weight: var(--lx-w-590);
  letter-spacing: -.011em;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease;
}
:root[data-theme] #page-agendamento .ag-create-btn:hover{
  background: var(--lx-acid-lime-hi);
  border-color: var(--lx-acid-lime-hi);
  transform: none;
  box-shadow: none;
}
:root[data-theme] #page-agendamento .ag-create-btn svg{ width: 14px; height: 14px; }

/* mini calendário */
:root[data-theme] #page-agendamento .ag-mini{
  background: var(--color-obsidian);
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-card);
  padding: 10px;
}
:root[data-theme] #page-agendamento .ag-mini-title{
  font-size: 12px;
  font-weight: var(--lx-w-510);
  color: var(--color-bone);
}
:root[data-theme] #page-agendamento .ag-mini-nav button{
  border-radius: var(--lx-r-badge);
  color: var(--color-fog);
}
:root[data-theme] #page-agendamento .ag-mini-nav button:hover{
  background: var(--lx-wash-hover-2);
  color: var(--color-bone);
}
:root[data-theme] #page-agendamento .ag-mini-dow{
  font-size: 10px;
  font-weight: var(--lx-w-510);
  letter-spacing: .04em;
  color: var(--color-ash);
}
:root[data-theme] #page-agendamento .ag-mini-day{
  border-radius: var(--lx-r-badge);
  font-family: var(--lx-font-mono);
  font-size: 11px;
  color: var(--color-mist);
  font-variant-numeric: tabular-nums;
}
:root[data-theme] #page-agendamento .ag-mini-day:hover{ background: var(--lx-wash-hover-2); }
:root[data-theme] #page-agendamento .ag-mini-day.out{ color: var(--lx-day-out); opacity: 1; }
:root[data-theme] #page-agendamento .ag-mini-day.today{
  background: var(--color-acid-lime);
  color: var(--lx-on-lime);
  font-weight: var(--lx-w-590);
}
:root[data-theme] #page-agendamento .ag-mini-day.sel{ outline: 1px solid var(--color-acid-lime); }

/* lista de agendas */
:root[data-theme] #page-agendamento .ag-cals-title{
  font-size: 10px;
  font-weight: var(--lx-w-510);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: 8px;
}
:root[data-theme] #page-agendamento .ag-cal-item{
  padding: 6px 8px;
  border-radius: var(--lx-r-md);
}
:root[data-theme] #page-agendamento .ag-cal-item:hover{ background: var(--lx-wash-hover); }
:root[data-theme] #page-agendamento .ag-cal-name{ font-size: 13px; color: var(--color-mist); }
:root[data-theme] #page-agendamento .ag-skel-row{
  background: var(--color-obsidian);
  border-radius: var(--lx-r-md);
  animation: none;
}

/* caixa de conexão */
:root[data-theme] #page-agendamento .ag-conn-ok{
  padding: 8px 10px;
  border-radius: var(--lx-r-md);
  background: var(--color-obsidian);
  border: 1px solid var(--color-graphite);
  color: var(--color-fog);
  font-size: 12px;
}
:root[data-theme] #page-agendamento .ag-conn-dot{
  width: 6px;
  height: 6px;
  background: var(--color-pulse-green);
  box-shadow: none;
}
:root[data-theme] #page-agendamento .ag-conn-bad{
  padding: 10px;
  border-radius: var(--lx-r-md);
  background: var(--lx-wash-coral);
  border: 1px solid rgba(var(--lx-coral-rgb),.28);
  color: var(--color-mist);
  font-size: 12px;
}
:root[data-theme] #page-agendamento .ag-conn-reconnect{
  min-height: var(--lx-h-btn-sm);
  padding: 0 10px;
  border: 1px solid rgba(var(--lx-coral-rgb),.28);
  border-radius: var(--lx-r-md);
  background: transparent;
  color: var(--lx-coral-text);
  font-family: var(--lx-font-ui);
  font-size: 12px;
  font-weight: var(--lx-w-510);
  cursor: pointer;
}
:root[data-theme] #page-agendamento .ag-conn-reconnect:hover{
  background: rgba(var(--lx-coral-rgb),.10);
  border-color: rgba(var(--lx-coral-rgb),.45);
}

/* ── toolbar de navegação do período ── */
:root[data-theme] #page-agendamento .ag-toolbar{
  padding: 10px 20px;
  border-bottom: 1px solid var(--color-graphite);
  background: var(--color-carbon);
}
:root[data-theme] #page-agendamento .ag-today-btn{
  min-height: var(--lx-h-btn-sm);
  padding: 0 10px;
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-md);
  background: transparent;
  color: var(--color-mist);
  font-family: var(--lx-font-ui);
  font-size: 12px;
  font-weight: var(--lx-w-510);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
:root[data-theme] #page-agendamento .ag-today-btn:hover{
  background: var(--lx-wash-hover);
  border-color: var(--color-smoke);
  color: var(--color-bone);
}
:root[data-theme] #page-agendamento .ag-arrow{
  width: 28px;
  height: 28px;
  border-radius: var(--lx-r-md);
  color: var(--color-fog);
}
:root[data-theme] #page-agendamento .ag-arrow:hover{
  background: var(--lx-wash-hover-2);
  color: var(--color-bone);
}
:root[data-theme] #page-agendamento .ag-period{
  margin: 0;
  font-size: 15px;
  font-weight: var(--lx-w-510);
  letter-spacing: -.165px;
  color: var(--color-bone);
}

/* ── canvas: loading, vazio e onboarding ── */
:root[data-theme] #page-agendamento .ag-canvas{ background: var(--color-carbon); }
:root[data-theme] #page-agendamento .ag-loading{
  color: var(--color-fog);
  font-size: 13px;
}
:root[data-theme] #page-agendamento .ag-spinner{
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-graphite);
  border-top-color: var(--color-acid-lime);
}
:root[data-theme] #page-agendamento .ag-empty{
  color: var(--color-ash);
  font-size: 13px;
  gap: 10px;
}
:root[data-theme] #page-agendamento .ag-empty strong{
  color: var(--color-mist);
  font-weight: var(--lx-w-510);
}
:root[data-theme] #page-agendamento .ag-empty svg{
  width: 88px;
  height: 56px;
  padding: 12px;
  border: 1px dashed var(--color-graphite);
  border-radius: var(--lx-r-md);
  color: var(--color-ash);
  opacity: 1;
}

/* onboarding "Conectar agenda" */
:root[data-theme] #page-agendamento .ag-onb-card{
  background: var(--color-obsidian);
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-card);
  box-shadow: none;
  padding: 28px;
}
:root[data-theme] #page-agendamento .ag-onb-ic{
  width: 88px;
  height: 56px;
  border-radius: var(--lx-r-md);
  background: transparent;
  border: 1px dashed var(--color-graphite);
}
:root[data-theme] #page-agendamento .ag-onb-ic svg{
  width: 24px;
  height: 24px;
  stroke: var(--color-ash);
}
:root[data-theme] #page-agendamento .ag-onb-title{
  font-size: 15px;
  font-weight: var(--lx-w-510);
  letter-spacing: -.165px;
  color: var(--color-bone);
}
:root[data-theme] #page-agendamento .ag-onb-sub{
  font-size: 13px;
  color: var(--color-fog);
}
:root[data-theme] #page-agendamento .ag-onb-step{
  font-size: 13px;
  color: var(--color-mist);
}
:root[data-theme] #page-agendamento .ag-onb-num{
  width: 20px;
  height: 20px;
  border-radius: var(--lx-r-badge);
  background: var(--color-graphite);
  border: 0;
  color: var(--color-bone);
  font-size: 11px;
  font-weight: var(--lx-w-590);
  font-family: var(--lx-font-mono);
}
:root[data-theme] #page-agendamento .ag-onb-btn{
  min-height: var(--lx-h-btn);
  padding: 0 12px;
  border-radius: var(--lx-r-md);
  font-family: var(--lx-font-ui);
  font-size: 13px;
  font-weight: var(--lx-w-510);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
:root[data-theme] #page-agendamento .ag-onb-btn:hover{ transform: none; filter: none; }
:root[data-theme] #page-agendamento .ag-onb-btn-primary{
  background: var(--color-acid-lime);
  border-color: var(--color-acid-lime);
  color: var(--lx-on-lime);
  font-weight: var(--lx-w-590);
  box-shadow: none;
}
:root[data-theme] #page-agendamento .ag-onb-btn-primary:hover{
  background: var(--lx-acid-lime-hi);
  border-color: var(--lx-acid-lime-hi);
}
:root[data-theme] #page-agendamento .ag-onb-btn-ghost{
  background: transparent;
  border-color: var(--color-graphite);
  color: var(--color-mist);
}
:root[data-theme] #page-agendamento .ag-onb-btn-ghost:hover{
  background: var(--lx-wash-hover);
  border-color: var(--color-smoke);
  color: var(--color-bone);
}
:root[data-theme] #page-agendamento .ag-onb-link{ color: var(--color-ash); font-size: 12px; }
:root[data-theme] #page-agendamento .ag-onb-link:hover{ color: var(--color-bone); }

/* ── mês ── */
:root[data-theme] #page-agendamento .ag-month-dow{
  border-bottom: 1px solid var(--color-graphite);
}
:root[data-theme] #page-agendamento .ag-month-dow > div{
  padding: 8px;
  font-size: 10px;
  font-weight: var(--lx-w-510);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ash);
}
:root[data-theme] #page-agendamento .ag-mcell{
  border-right: 1px solid var(--color-graphite);
  border-bottom: 1px solid var(--color-graphite);
  background: var(--color-carbon);
}
:root[data-theme] #page-agendamento .ag-mcell:hover{ background: var(--lx-wash-hover); }
:root[data-theme] #page-agendamento .ag-mcell.out{
  background: var(--color-carbon);
  opacity: .45;
}
:root[data-theme] #page-agendamento .ag-mcell-num{
  width: 22px;
  height: 22px;
  font-family: var(--lx-font-mono);
  font-size: 12px;
  font-weight: var(--lx-w-reg);
  color: var(--color-mist);
  font-variant-numeric: tabular-nums;
}
:root[data-theme] #page-agendamento .ag-mcell.today .ag-mcell-num{
  background: var(--color-acid-lime);
  color: var(--lx-on-lime);
  font-weight: var(--lx-w-590);
  border-radius: var(--lx-r-pill);
}
:root[data-theme] #page-agendamento .ag-pill{
  border-radius: var(--lx-r-badge);
  font-size: 11px;
  font-weight: var(--lx-w-510);
  box-shadow: none;
}
:root[data-theme] #page-agendamento .ag-pill-time{
  font-family: var(--lx-font-mono);
  font-variant-numeric: tabular-nums;
}
:root[data-theme] #page-agendamento .ag-more{
  font-size: 11px;
  color: var(--color-fog);
  border-radius: var(--lx-r-badge);
}
:root[data-theme] #page-agendamento .ag-more:hover{
  background: var(--lx-wash-hover-2);
  color: var(--color-bone);
}

/* ── semana/dia (timeline) ── */
:root[data-theme] #page-agendamento .ag-tl-head{
  border-bottom: 1px solid var(--color-graphite);
  background: var(--color-carbon);
}
:root[data-theme] #page-agendamento .ag-tl-dow{
  font-size: 10px;
  font-weight: var(--lx-w-510);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ash);
}
:root[data-theme] #page-agendamento .ag-tl-dnum{
  font-family: var(--lx-font-mono);
  font-size: 13px;
  color: var(--color-mist);
  font-variant-numeric: tabular-nums;
}
:root[data-theme] #page-agendamento .ag-tl-daycol-head.today .ag-tl-dnum{
  background: var(--color-acid-lime);
  color: var(--lx-on-lime);
  font-weight: var(--lx-w-590);
}
:root[data-theme] #page-agendamento .ag-allday-row{
  border-bottom: 1px solid var(--color-graphite);
}
:root[data-theme] #page-agendamento .ag-allday-lbl{
  font-size: 10px;
  font-weight: var(--lx-w-510);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ash);
}
:root[data-theme] #page-agendamento .ag-tl-hour span{
  font-family: var(--lx-font-mono);
  font-size: 10px;
  color: var(--color-ash);
  font-variant-numeric: tabular-nums;
}
:root[data-theme] #page-agendamento .ag-tl-hline{
  border-bottom: 1px solid var(--color-graphite);
}
:root[data-theme] #page-agendamento .ag-tl-daycol{
  border-left: 1px solid var(--color-graphite);
}
:root[data-theme] #page-agendamento .ag-tl-now{
  background: var(--color-coral-red);
  box-shadow: none;
}
:root[data-theme] #page-agendamento .ag-ev{
  border-radius: var(--lx-r-badge);
  box-shadow: none;
}
:root[data-theme] #page-agendamento .ag-ev-title{
  font-size: 11px;
  font-weight: var(--lx-w-510);
}
:root[data-theme] #page-agendamento .ag-ev-sub{
  font-family: var(--lx-font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}


/* ============================================================================
   4. CONTAS (owner) · container preenchido por loadOwnerAccountsPage:
   seções por agência com linhas de subconta. Redesign inteiro via CSS.
   ========================================================================== */
:root[data-theme] #page-contas .owner-accounts-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 48px;
}
:root[data-theme] #page-contas .owner-accounts-head{
  display: flex;
  align-items: center;
  min-height: var(--lx-h-topbar);
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid var(--color-graphite);
}
:root[data-theme] #page-contas .owner-accounts-head h1{
  margin: 0 0 2px;
  font-size: 24px;
  line-height: 1.33;
  letter-spacing: -.288px;
  font-weight: var(--lx-w-510);
  color: var(--color-paper);
}
:root[data-theme] #page-contas .owner-accounts-head p{
  margin: 0;
  font-size: 13px;
  color: var(--color-ash);
}
:root[data-theme] #page-contas .owner-accounts-root{
  display: grid;
  gap: 12px;
}
:root[data-theme] #page-contas .owner-accounts-state{
  padding: 40px 20px;
  border: 1px dashed var(--color-graphite);
  border-radius: var(--lx-r-card);
  background: transparent;
  color: var(--color-fog);
  font-size: 13px;
  text-align: center;
}

/* seção da agência: painel obsidian com cabeçalho hairline */
:root[data-theme] #page-contas .owner-account-agency{
  overflow: hidden;
  border: 1px solid var(--color-graphite);
  border-radius: var(--lx-r-card);
  background: var(--color-obsidian);
}
:root[data-theme] #page-contas .owner-account-agency-head{
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-graphite);
  background: var(--color-obsidian);
}
:root[data-theme] #page-contas .owner-account-agency-head h2{
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: var(--lx-w-510);
  letter-spacing: -.165px;
  color: var(--color-bone);
}
:root[data-theme] #page-contas .owner-account-agency-head span{
  font-size: 12px;
  color: var(--color-ash);
}

/* linha da subconta: grid nome · status · entrar */
:root[data-theme] #page-contas .owner-account-row{
  min-height: 52px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-graphite);
  transition: background-color .12s ease;
}
:root[data-theme] #page-contas .owner-account-row:hover{
  background: var(--lx-wash-hover);
}
:root[data-theme] #page-contas .owner-account-row:last-child{ border-bottom: 0; }
:root[data-theme] #page-contas .owner-account-main strong{
  font-size: 13px;
  font-weight: var(--lx-w-510);
  color: var(--color-bone);
}
:root[data-theme] #page-contas .owner-account-main span{
  font-family: var(--lx-font-mono);
  font-size: 12px;
  color: var(--color-ash);
}
:root[data-theme] #page-contas .owner-account-status{
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--lx-r-badge);
  background: var(--lx-wash-hover);
  color: var(--color-fog);
  font-size: 12px;
  font-weight: var(--lx-w-reg);
}
:root[data-theme] #page-contas .owner-account-status.active{
  background: var(--lx-wash-green);
  color: var(--lx-green-text);
}
:root[data-theme] #page-contas .owner-account-status.inactive{
  background: var(--lx-wash-hover);
  color: var(--color-fog);
}
:root[data-theme] #page-contas .owner-account-empty{
  padding: 20px 16px;
  color: var(--color-ash);
  font-size: 13px;
}

/* botão Entrar (ctxp-btn primary já vira lime no core; geometria aqui) */
:root[data-theme] #page-contas .owner-account-enter{
  min-height: var(--lx-h-btn-sm);
  padding: 0 10px;
  border-radius: var(--lx-r-md);
  font-family: var(--lx-font-ui);
  font-size: 12px;
  font-weight: var(--lx-w-590);
}
:root[data-theme] #page-contas .owner-account-enter[disabled]{
  opacity: .45;
  cursor: not-allowed;
}