/*
  Tab component layer.
  Loaded after buttons.css/forms.css so navigation tabs are not treated as generic action buttons.
*/

body.has-app-sidebar,
body.client-portal-body{
  --tab-shell-bg: #ffffff;
  --tab-shell-border: #d8e3e8;
  --tab-shell-shadow: none;
  --tab-bg: transparent;
  --tab-bg-hover: #f3f7f6;
  --tab-bg-active: #ecfdf5;
  --tab-border: transparent;
  --tab-border-active: rgb(15 159 110 / .42);
  --tab-text: #475569;
  --tab-text-active: #0f9f6e;
  --tab-muted: #64748b;
  --tab-radius: 8px;
  --tab-height: 38px;
  --tab-gap: 8px;
  --tab-accent: #0f9f6e;
}

html[data-theme="dark"] body.has-app-sidebar,
html[data-theme="dark"] body.client-portal-body{
  --tab-shell-bg: #111111;
  --tab-shell-border: #262626;
  --tab-bg: transparent;
  --tab-bg-hover: #191919;
  --tab-bg-active: #0f261d;
  --tab-border: transparent;
  --tab-border-active: rgb(0 188 125 / .52);
  --tab-text: #d1d5db;
  --tab-text-active: #34d399;
  --tab-muted: #9ca3af;
  --tab-accent: #34d399;
}

body:is(.has-app-sidebar, .client-portal-body) :is(
  .seg-tabs,
  .tabsbar,
  .catalog-tabs,
  .reports-tabs,
  .client-modal-tabs,
  .profile-modal-tabs,
  .company-modal-tabs,
  .accounting-modal-tabs,
  .plantao-modal-tabs,
  .fincol-contract-tabs,
  .tk-view-tabs,
  .fin-tabs,
  .plantao-tabs,
  .dash-upcoming-tabs
){
  align-items: center !important;
  background: var(--tab-shell-bg) !important;
  background-image: none !important;
  border: 1px solid var(--tab-shell-border) !important;
  border-radius: var(--tab-radius) !important;
  box-shadow: var(--tab-shell-shadow) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--tab-gap) !important;
  min-width: 0;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  padding: 8px !important;
  position: relative;
  scrollbar-width: thin;
}

body:is(.has-app-sidebar, .client-portal-body) :is(.seg-tabs__spacer, .tabsbar__spacer){
  flex: 1 1 auto !important;
  min-width: 12px;
}

body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--emerald,
  [data-tab-tone="emerald"]
){ --tab-accent: #0f9f6e; }

body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--teal,
  [data-tab-tone="teal"]
){ --tab-accent: #0e9384; }

body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--sky,
  [data-tab-tone="sky"]
){ --tab-accent: #0ea5e9; }

body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--indigo,
  [data-tab-tone="indigo"]
){ --tab-accent: #6366f1; }

body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--violet,
  [data-tab-tone="violet"]
){ --tab-accent: #8b5cf6; }

body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--amber,
  [data-tab-tone="amber"]
){ --tab-accent: #d97706; }

body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--rose,
  [data-tab-tone="rose"]
){ --tab-accent: #e11d48; }

html[data-theme="dark"] body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--emerald,
  [data-tab-tone="emerald"]
){ --tab-accent: #34d399; }

html[data-theme="dark"] body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--teal,
  [data-tab-tone="teal"]
){ --tab-accent: #5eead4; }

html[data-theme="dark"] body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--sky,
  [data-tab-tone="sky"]
){ --tab-accent: #7dd3fc; }

html[data-theme="dark"] body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--indigo,
  [data-tab-tone="indigo"]
){ --tab-accent: #a5b4fc; }

html[data-theme="dark"] body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--violet,
  [data-tab-tone="violet"]
){ --tab-accent: #c4b5fd; }

html[data-theme="dark"] body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--amber,
  [data-tab-tone="amber"]
){ --tab-accent: #fbbf24; }

html[data-theme="dark"] body:is(.has-app-sidebar, .client-portal-body) :is(
  .mhd-tab-btn--rose,
  [data-tab-tone="rose"]
){ --tab-accent: #fb7185; }

body:is(.has-app-sidebar, .client-portal-body) :is(
  #mhdTabLayer,
  .tk-view-tab,
  .mhd-tab-btn,
  .catalog-tabs > .tab,
  .catalog-tabs > a.tab,
  .seg-tabs [data-tab-btn],
  .tabsbar [data-tab-btn],
  .seg-tabs [data-cat-tab-btn],
  .seg-tabs [data-finc-tab-btn],
  .seg-tabs [data-fin-tab-btn],
  .seg-tabs [data-fincol-tab-btn],
  .seg-tabs [data-finps-tab-btn],
  .seg-tabs [data-reports-tab-btn],
  .seg-tabs [data-jornada-tab-btn],
  .tabsbar [data-upcoming-tab-btn],
  .client-modal-tabs [data-client-tab-btn],
  .client-modal-tabs [data-company-tab-btn],
  .client-modal-tabs [data-accounting-tab-btn],
  .client-modal-tabs [data-fincol-contract-tab-btn],
  .client-modal-tabs [data-plantao-modal-tab-btn],
  .profile-modal-tabs [data-profile-tab-btn],
  .company-modal-tabs [data-company-tab-btn],
  .plantao-modal-tabs [data-plantao-modal-tab-btn],
  .accounting-modal-tabs [data-accounting-tab-btn],
  .fincol-contract-tabs [data-fincol-contract-tab-btn]
){
  align-items: center !important;
  background: var(--tab-bg) !important;
  background-image: none !important;
  border: 1px solid var(--tab-border) !important;
  border-radius: calc(var(--tab-radius) - 2px) !important;
  box-shadow: none !important;
  color: var(--tab-text) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  gap: 8px !important;
  justify-content: center !important;
  line-height: 1.15 !important;
  min-height: var(--tab-height) !important;
  min-width: 0 !important;
  padding: 0 13px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease !important;
  white-space: nowrap !important;
}

body:is(.has-app-sidebar, .client-portal-body) :is(
  .tk-view-tab,
  .mhd-tab-btn,
  .catalog-tabs > .tab,
  .catalog-tabs > a.tab,
  .seg-tabs [data-tab-btn],
  .tabsbar [data-tab-btn],
  .seg-tabs [data-cat-tab-btn],
  .seg-tabs [data-finc-tab-btn],
  .seg-tabs [data-fin-tab-btn],
  .seg-tabs [data-fincol-tab-btn],
  .seg-tabs [data-finps-tab-btn],
  .seg-tabs [data-reports-tab-btn],
  .seg-tabs [data-jornada-tab-btn],
  .tabsbar [data-upcoming-tab-btn],
  .client-modal-tabs [data-client-tab-btn],
  .client-modal-tabs [data-company-tab-btn],
  .client-modal-tabs [data-accounting-tab-btn],
  .client-modal-tabs [data-fincol-contract-tab-btn],
  .client-modal-tabs [data-plantao-modal-tab-btn],
  .profile-modal-tabs [data-profile-tab-btn],
  .company-modal-tabs [data-company-tab-btn],
  .plantao-modal-tabs [data-plantao-modal-tab-btn],
  .accounting-modal-tabs [data-accounting-tab-btn],
  .fincol-contract-tabs [data-fincol-contract-tab-btn]
):hover{
  background: var(--tab-bg-hover) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--tab-accent) 28%, transparent) !important;
  color: var(--tab-accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

body:is(.has-app-sidebar, .client-portal-body) :is(
  .tk-view-tab.is-active,
  .tk-view-tab[aria-selected="true"],
  .mhd-tab-btn.is-active,
  .mhd-tab-btn.primary,
  .mhd-tab-btn[aria-selected="true"],
  .catalog-tabs > .tab.is-active,
  .catalog-tabs > .tab[aria-selected="true"],
  .seg-tabs [data-tab-btn].is-active,
  .seg-tabs [data-tab-btn].primary,
  .seg-tabs [data-tab-btn][aria-selected="true"],
  .tabsbar [data-tab-btn].is-active,
  .tabsbar [data-tab-btn].primary,
  .tabsbar [data-tab-btn][aria-selected="true"],
  .seg-tabs [data-cat-tab-btn].is-active,
  .seg-tabs [data-cat-tab-btn].primary,
  .seg-tabs [data-cat-tab-btn][aria-selected="true"],
  .seg-tabs [data-finc-tab-btn].is-active,
  .seg-tabs [data-finc-tab-btn].primary,
  .seg-tabs [data-finc-tab-btn][aria-selected="true"],
  .seg-tabs [data-fin-tab-btn].is-active,
  .seg-tabs [data-fin-tab-btn].primary,
  .seg-tabs [data-fin-tab-btn][aria-selected="true"],
  .seg-tabs [data-fincol-tab-btn].is-active,
  .seg-tabs [data-fincol-tab-btn].primary,
  .seg-tabs [data-fincol-tab-btn][aria-selected="true"],
  .seg-tabs [data-finps-tab-btn].is-active,
  .seg-tabs [data-finps-tab-btn].primary,
  .seg-tabs [data-finps-tab-btn][aria-selected="true"],
  .seg-tabs [data-reports-tab-btn].is-active,
  .seg-tabs [data-reports-tab-btn].primary,
  .seg-tabs [data-reports-tab-btn][aria-selected="true"],
  .seg-tabs [data-jornada-tab-btn].is-active,
  .seg-tabs [data-jornada-tab-btn].primary,
  .seg-tabs [data-jornada-tab-btn][aria-selected="true"],
  .tabsbar [data-upcoming-tab-btn].is-active,
  .tabsbar [data-upcoming-tab-btn].primary,
  .tabsbar [data-upcoming-tab-btn][aria-selected="true"],
  .client-modal-tabs [data-client-tab-btn].is-active,
  .client-modal-tabs [data-client-tab-btn].primary,
  .client-modal-tabs [data-client-tab-btn][aria-selected="true"],
  .client-modal-tabs [data-company-tab-btn].is-active,
  .client-modal-tabs [data-company-tab-btn].primary,
  .client-modal-tabs [data-company-tab-btn][aria-selected="true"],
  .client-modal-tabs [data-accounting-tab-btn].is-active,
  .client-modal-tabs [data-accounting-tab-btn].primary,
  .client-modal-tabs [data-accounting-tab-btn][aria-selected="true"],
  .client-modal-tabs [data-fincol-contract-tab-btn].is-active,
  .client-modal-tabs [data-fincol-contract-tab-btn].primary,
  .client-modal-tabs [data-fincol-contract-tab-btn][aria-selected="true"],
  .client-modal-tabs [data-plantao-modal-tab-btn].is-active,
  .client-modal-tabs [data-plantao-modal-tab-btn].primary,
  .client-modal-tabs [data-plantao-modal-tab-btn][aria-selected="true"],
  .profile-modal-tabs [data-profile-tab-btn].is-active,
  .profile-modal-tabs [data-profile-tab-btn].primary,
  .profile-modal-tabs [data-profile-tab-btn][aria-selected="true"],
  .company-modal-tabs [data-company-tab-btn].is-active,
  .company-modal-tabs [data-company-tab-btn].primary,
  .company-modal-tabs [data-company-tab-btn][aria-selected="true"],
  .plantao-modal-tabs [data-plantao-modal-tab-btn].is-active,
  .plantao-modal-tabs [data-plantao-modal-tab-btn].primary,
  .plantao-modal-tabs [data-plantao-modal-tab-btn][aria-selected="true"],
  .accounting-modal-tabs [data-accounting-tab-btn].is-active,
  .accounting-modal-tabs [data-accounting-tab-btn].primary,
  .accounting-modal-tabs [data-accounting-tab-btn][aria-selected="true"],
  .fincol-contract-tabs [data-fincol-contract-tab-btn].is-active,
  .fincol-contract-tabs [data-fincol-contract-tab-btn].primary,
  .fincol-contract-tabs [data-fincol-contract-tab-btn][aria-selected="true"]
){
  background: color-mix(in srgb, var(--tab-accent) 12%, var(--tab-bg-active)) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--tab-accent) 46%, transparent) !important;
  box-shadow: inset 0 -2px 0 var(--tab-accent) !important;
  color: var(--tab-accent) !important;
}

body:is(.has-app-sidebar, .client-portal-body) :is(
  .tk-view-tab,
  .mhd-tab-btn,
  .seg-tabs [data-tab-btn],
  .tabsbar [data-tab-btn],
  .seg-tabs [data-cat-tab-btn],
  .seg-tabs [data-finc-tab-btn],
  .seg-tabs [data-fin-tab-btn],
  .seg-tabs [data-fincol-tab-btn],
  .seg-tabs [data-finps-tab-btn],
  .seg-tabs [data-reports-tab-btn],
  .seg-tabs [data-jornada-tab-btn],
  .client-modal-tabs button,
  .profile-modal-tabs button,
  .company-modal-tabs button
) :is(i[data-lucide], svg),
body:is(.has-app-sidebar, .client-portal-body) :is(
  .tk-view-tab,
  .mhd-tab-btn,
  .seg-tabs [data-tab-btn],
  .tabsbar [data-tab-btn],
  .seg-tabs [data-cat-tab-btn],
  .seg-tabs [data-finc-tab-btn],
  .seg-tabs [data-fin-tab-btn],
  .seg-tabs [data-fincol-tab-btn],
  .seg-tabs [data-finps-tab-btn],
  .seg-tabs [data-reports-tab-btn],
  .seg-tabs [data-jornada-tab-btn],
  .client-modal-tabs button,
  .profile-modal-tabs button,
  .company-modal-tabs button
) > :is(i[data-lucide], svg){
  color: currentColor !important;
  flex: 0 0 auto;
  height: 1.05em;
  opacity: 1;
  stroke: currentColor !important;
  width: 1.05em;
}

body:is(.has-app-sidebar, .client-portal-body) :is(
  .tk-view-tab:focus-visible,
  .mhd-tab-btn:focus-visible,
  .seg-tabs [data-tab-btn]:focus-visible,
  .tabsbar [data-tab-btn]:focus-visible,
  .seg-tabs [data-cat-tab-btn]:focus-visible,
  .seg-tabs [data-finc-tab-btn]:focus-visible,
  .seg-tabs [data-fin-tab-btn]:focus-visible,
  .seg-tabs [data-fincol-tab-btn]:focus-visible,
  .seg-tabs [data-finps-tab-btn]:focus-visible,
  .seg-tabs [data-reports-tab-btn]:focus-visible,
  .seg-tabs [data-jornada-tab-btn]:focus-visible,
  .client-modal-tabs button:focus-visible,
  .profile-modal-tabs button:focus-visible,
  .company-modal-tabs button:focus-visible
){
  outline: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tab-accent) 20%, transparent) !important;
}

@media (max-width: 720px){
  body:is(.has-app-sidebar, .client-portal-body) :is(
    .seg-tabs,
    .tabsbar,
    .catalog-tabs,
    .reports-tabs,
    .client-modal-tabs,
    .profile-modal-tabs,
    .company-modal-tabs,
    .tk-view-tabs,
    .fin-tabs
  ){
    flex-wrap: nowrap !important;
  }
}

/* Tickets view switcher: same chrome on Lista, Kanban and Documentacao. */
body:is(.has-app-sidebar, .client-portal-body) .page-chamados .tk-view-tabs{
  --tab-accent: #0f9f6e;
  align-items: center !important;
  background: var(--tab-shell-bg) !important;
  background-image: none !important;
  border: 1px solid var(--tab-shell-border) !important;
  border-radius: var(--tab-radius) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: var(--tab-gap) !important;
  margin: 0 0 14px !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  padding: 8px !important;
  width: auto !important;
}

body:is(.has-app-sidebar, .client-portal-body) .page-chamados .tk-view-tabs::before,
body:is(.has-app-sidebar, .client-portal-body) .page-chamados .tk-view-tabs::after{
  content: none !important;
  display: none !important;
}

body:is(.has-app-sidebar, .client-portal-body) .page-chamados .tk-view-tabs > .tk-view-tab{
  background: var(--tab-bg) !important;
  background-image: none !important;
  border: 1px solid var(--tab-border) !important;
  border-radius: calc(var(--tab-radius) - 2px) !important;
  box-shadow: none !important;
  color: var(--tab-text) !important;
  flex: 0 0 auto !important;
  min-height: var(--tab-height) !important;
  padding: 0 13px !important;
  transform: none !important;
}

body:is(.has-app-sidebar, .client-portal-body) .page-chamados .tk-view-tabs > .tk-view-tab:hover{
  background: var(--tab-bg-hover) !important;
  border-color: color-mix(in srgb, var(--tab-accent) 28%, transparent) !important;
  color: var(--tab-accent) !important;
  transform: none !important;
}

body:is(.has-app-sidebar, .client-portal-body) .page-chamados .tk-view-tabs > .tk-view-tab.is-active,
body:is(.has-app-sidebar, .client-portal-body) .page-chamados .tk-view-tabs > .tk-view-tab[aria-selected="true"]{
  background: color-mix(in srgb, var(--tab-accent) 12%, var(--tab-bg-active)) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--tab-accent) 46%, transparent) !important;
  box-shadow: inset 0 -2px 0 var(--tab-accent) !important;
  color: var(--tab-accent) !important;
}

@media (max-width: 720px){
  body:is(.has-app-sidebar, .client-portal-body) .page-chamados .tk-view-tabs{
    flex-wrap: nowrap !important;
  }
}

/* Ticket view tabs: fixed identity across Lista, Kanban and Documentacao.
   The repeated classes are intentional until the older app.css ticket overrides are removed. */
body.has-app-sidebar,
body.client-portal-body{
  --ticket-tabs-shell-bg: var(--tab-shell-bg);
  --ticket-tabs-shell-border: var(--tab-shell-border);
  --ticket-tabs-item-bg: transparent;
  --ticket-tabs-item-hover: var(--tab-bg-hover);
  --ticket-tabs-item-border: transparent;
  --ticket-tabs-text: var(--tab-text);
  --ticket-tabs-active-bg: color-mix(in srgb, var(--tab-accent) 12%, var(--tab-bg-active));
  --ticket-tabs-active-border: color-mix(in srgb, var(--tab-accent) 46%, transparent);
  --ticket-tabs-active-text: var(--tab-accent);
}

html[data-theme="dark"] body.has-app-sidebar,
html[data-theme="dark"] body.client-portal-body{
  --ticket-tabs-shell-bg: #111111;
  --ticket-tabs-shell-border: #262626;
  --ticket-tabs-item-bg: transparent;
  --ticket-tabs-item-hover: #191919;
  --ticket-tabs-item-border: transparent;
  --ticket-tabs-text: #d1d5db;
  --ticket-tabs-active-bg: #10251d;
  --ticket-tabs-active-border: rgb(0 188 125 / .52);
  --ticket-tabs-active-text: #34d399;
}

body.has-app-sidebar.has-app-sidebar :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs,
body.client-portal-body.client-portal-body :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs{
  background: var(--ticket-tabs-shell-bg) !important;
  background-image: none !important;
  border-color: var(--ticket-tabs-shell-border) !important;
  box-shadow: none !important;
  gap: var(--tab-gap) !important;
  margin: 0 0 14px !important;
  padding: 8px !important;
}

body.has-app-sidebar.has-app-sidebar :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs::before,
body.has-app-sidebar.has-app-sidebar :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs::after,
body.client-portal-body.client-portal-body :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs::before,
body.client-portal-body.client-portal-body :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs::after{
  content: none !important;
  display: none !important;
}

body.has-app-sidebar.has-app-sidebar :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs > .tk-view-tab,
body.client-portal-body.client-portal-body :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs > .tk-view-tab{
  background: var(--ticket-tabs-item-bg) !important;
  background-image: none !important;
  border-color: var(--ticket-tabs-item-border) !important;
  box-shadow: none !important;
  color: var(--ticket-tabs-text) !important;
  transform: none !important;
}

body.has-app-sidebar.has-app-sidebar :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs > .tk-view-tab:is(:hover, :focus-visible),
body.client-portal-body.client-portal-body :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs > .tk-view-tab:is(:hover, :focus-visible){
  background: var(--ticket-tabs-item-hover) !important;
  border-color: var(--ticket-tabs-active-border) !important;
  color: var(--ticket-tabs-active-text) !important;
  box-shadow: none !important;
}

body.has-app-sidebar.has-app-sidebar :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs > .tk-view-tab.is-active,
body.has-app-sidebar.has-app-sidebar :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs > .tk-view-tab[aria-selected="true"],
body.client-portal-body.client-portal-body :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs > .tk-view-tab.is-active,
body.client-portal-body.client-portal-body :is(#ticketsPage, #ticketsKanbanPage, #ticketsDocsPage).page-chamados.page-chamados .tk-view-tabs > .tk-view-tab[aria-selected="true"]{
  background: var(--ticket-tabs-active-bg) !important;
  background-image: none !important;
  border-color: var(--ticket-tabs-active-border) !important;
  box-shadow: inset 0 -2px 0 var(--ticket-tabs-active-text) !important;
  color: var(--ticket-tabs-active-text) !important;
}