/* =============================================================================
   MauesDesk — Workspace (Outubro/2026)
   Camada visual de "ferramenta de equipe" (referências: TomTicket, Bitrix24,
   eKyte, ClickUp, Jira). Carregada DEPOIS de custom.css: tudo aqui só
   refina o que já existe. Para voltar ao visual anterior, basta remover o
   <link> deste arquivo em inc/doctype.php.
   ============================================================================= */

:root {
  --ws-radius: 12px;
  --ws-border: rgba(15,23,42,.08);
  --ws-muted: #64748b;
  --ws-row-hover: rgba(15,23,42,.025);

}
[data-bs-theme="dark"] {
  --ws-border: rgba(255,255,255,.08);
  --ws-muted: #94a3b8;
  --ws-row-hover: rgba(255,255,255,.03);
}

/* ── 1. Menu lateral claro ──────────────────────────────────────────────────
   Ativado automaticamente quando a cor do menu (Configurações > Aparência >
   cor secundária) é clara — ver $sidebar_light em inc/config.php. */
[data-bs-theme="light"] #sidebar.sb-light {
  --sb-text:   #52607a;
  --sb-hi:     #0f172a;
  --sb-hover:  rgba(15,23,42,.05);
  --sb-active: rgba(var(--bs-primary-rgb),.10);
  --sb-border: rgba(15,23,42,.08);
  border-right: 1px solid var(--sb-border);
}
[data-bs-theme="light"] #sidebar.sb-light .brand-logo-full,
[data-bs-theme="light"] #sidebar.sb-light .brand-logo-mini { filter: none; }
[data-bs-theme="light"] #sidebar.sb-light .sb-item.active { color: var(--bs-primary); font-weight: 600; }
[data-bs-theme="light"] #sidebar.sb-light .sb-item.active::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--bs-primary);
}
[data-bs-theme="light"] #sidebar.sb-light .sb-ws-name { color: var(--sb-hi) !important; }
[data-bs-theme="light"] #sidebar.sb-light .sb-ws-role { color: var(--sb-text) !important; }
[data-bs-theme="light"] #sidebar.sb-light .sb-item-logout { color: #dc2626; opacity: .75; }
[data-bs-theme="light"] #sidebar.sb-light .sb-section-label { color: #8a96ab; }

/* Rótulo de seção em frase normal (não em caixa alta) */
.sb-section-label { text-transform: none; letter-spacing: 0; font-size: .72rem; font-weight: 600; padding: 14px 10px 4px; }
.sb-item { padding: 7px 10px; font-size: .86rem; }

/* ── 2. Barra superior ────────────────────────────────────────────────────── */
/* A barra é sticky (ocupa espaço no fluxo): o conteúdo não precisa reservar
   a altura dela de novo — antes sobrava uma faixa vazia no topo de toda página. */
.app-content { padding-top: 24px; }
#topbar { box-shadow: none; border-bottom: 1px solid var(--ws-border); }
.tb-search { flex-basis: 380px; border-radius: 8px; }

/* Selo do plano na barra superior */
.tb-plan { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 5px 11px; border-radius: 99px;
  text-decoration: none; margin-right: 6px; color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); white-space: nowrap; }
.tb-plan:hover { background: rgba(var(--bs-primary-rgb), .15); }
.tb-plan--trial { color: #0369a1; background: #e0f2fe; }
@media (max-width: 576px) { .tb-plan { display: none; } }

/* ── 2b. Padrão único de títulos e botões (todas as páginas) ─────────────
   Regra (Jira/ClickUp/Linear): título de página sem ícone — o ícone já está
   no menu —, mesmo tamanho em todo o sistema; subtítulo em cinza; botões com
   uma altura por tamanho e o mesmo peso de fonte. */
.page-title, .ws-head-title, .home-greeting-title {
  font-size: 1.375rem !important; font-weight: 700 !important; letter-spacing: -.015em; line-height: 1.25; margin: 0;
}
.page-title > .bi:first-child, .ws-head-title > .bi:first-child { display: none; }
.page-subtitle, .home-greeting-sub { font-size: .875rem; color: var(--ws-muted); margin: 2px 0 0; }

.btn { --bs-btn-font-weight: 600; font-size: .875rem; min-height: 36px; padding: .4rem .9rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.btn.fw-600, .btn.fw-700, .btn.fw-800 { font-weight: 600 !important; }
.btn-sm { font-size: .8125rem; min-height: 30px; padding: .25rem .65rem; }
.btn-lg { font-size: .95rem; min-height: 44px; padding: .55rem 1.25rem; }
.btn-xs { min-height: 24px; }
.btn > .bi { font-size: 1em; line-height: 1; }
.btn .me-1, .btn .me-2 { margin-right: 0 !important; } /* o gap já espaça ícone e texto */
.btn-group > .btn, .input-group > .btn { min-height: auto; }

/* ── 3. Cabeçalho de módulo: título + abas de visualização + ações ───────── */
.ws-head { margin: -4px 0 20px; }
.ws-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ws-head-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 0; display: flex; align-items: center; gap: 10px; }
.ws-head-title .bi { color: var(--bs-primary); font-size: 1.15rem; }
.ws-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ws-head .ws-views { margin-bottom: 0 !important; }
.ws-views { display: flex; gap: 2px; margin-top: 14px; border-bottom: 1px solid var(--ws-border); overflow-x: auto; scrollbar-width: none; }
.ws-views::-webkit-scrollbar { display: none; }
.ws-view {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 9px 14px; font-size: .86rem; font-weight: 500; color: var(--ws-muted);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: 6px 6px 0 0; transition: color .15s, background .15s;
}
.ws-view:hover { color: var(--bs-body-color); background: var(--ws-row-hover); }
.ws-view.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); font-weight: 600; }
.ws-view .bi { font-size: .95rem; }

/* ── 4. Cartões e tabelas: bordas finas, sombra mínima, densidade ────────── */
/* Um só tipo de cartão: caixa fechada com o título DENTRO, em frase normal.
   (custom.css tirava o título para fora da caixa, em caixa alta e colorido,
   só nos cartões com header+body — deixando dois visuais no sistema.) */
.app-card,
.app-card:has(> .app-card-header):has(> .app-card-body) {
  background: var(--bs-body-bg); border: 1px solid var(--ws-border); box-shadow: none;
  border-radius: var(--ws-radius); overflow: visible; /* visible: não corta menus suspensos dentro do cartão */
}
.app-card-header,
.app-card:has(> .app-card-header):has(> .app-card-body) > .app-card-header {
  background: transparent; border-bottom: 1px solid var(--ws-border); padding: 13px 18px; min-height: 52px;
}
.app-card-title,
.app-card:has(> .app-card-header):has(> .app-card-body) > .app-card-header .app-card-title {
  font-size: .9375rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--bs-body-color); margin: 0;
}
.app-card:has(> .app-card-header):has(> .app-card-body) > .app-card-body {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
.app-card-body { padding: 18px; }

.table > :not(caption) > * > * { padding-top: .6rem; padding-bottom: .6rem; border-bottom-color: var(--ws-border); }
.table thead th { font-size: .74rem; font-weight: 600; color: var(--ws-muted); text-transform: none; letter-spacing: 0; background: transparent; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--ws-row-hover); }

.btn { border-radius: 8px; }
.form-control, .form-select { border-radius: 8px; }

/* Barras de filtro: busca + selects na mesma linha (o form-select do
   Bootstrap tem width:100%, o que empilhava cada filtro numa linha) */
.filter-select { width: auto !important; flex: 0 0 auto; }
.filter-search { flex: 1 1 240px; max-width: 380px; }

/* Indicadores (KPI) compactos */
.ws-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ws-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 8 indicadores = 2 linhas iguais */
@media (max-width: 900px) { .ws-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-kpi { background: var(--bs-body-bg); border: 1px solid var(--ws-border); border-radius: var(--ws-radius); padding: 14px 16px; }
.ws-kpi-label { font-size: .78rem; color: var(--ws-muted); }
.ws-kpi-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-top: 2px; }
.ws-kpi-sub { font-size: .75rem; color: var(--ws-muted); }

/* Selo de status genérico */
.ws-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

/* ── 5. Painel lateral (abrir chamado/tarefa sem sair da lista) ──────────── */
.ws-panel { --bs-offcanvas-width: min(900px, 94vw); border-left: 1px solid var(--ws-border); }
.ws-panel .offcanvas-header { padding: 10px 14px; border-bottom: 1px solid var(--ws-border); gap: 8px; }
.ws-panel .offcanvas-body { padding: 0; }
.ws-panel iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--page-canvas); }
.ws-panel-loading { position: absolute; inset: 56px 0 0 0; display: grid; place-items: center; color: var(--ws-muted); font-size: .9rem; pointer-events: none; }

/* Modo embutido (página aberta dentro do painel lateral) */
.ws-embed #sidebar, .ws-embed #topbar, .ws-embed .sb-overlay, .ws-embed .app-footer,
.ws-embed .cookie-banner, .ws-embed .app-footer-main, .ws-embed #notesDrawer, .ws-embed .ws-views, .ws-embed #cookieConsent, .ws-embed #wsPanel { display: none !important; }
.ws-embed .app-wrapper { margin-left: 0 !important; }
.ws-embed .app-content { padding: 18px 20px 32px !important; }

/* ── 6. Carga de trabalho (pessoa × dia) ─────────────────────────────────── */
.ws-load { width: 100%; border-collapse: separate; border-spacing: 0; }
.ws-load th, .ws-load td { border-bottom: 1px solid var(--ws-border); padding: 8px 6px; text-align: center; font-size: .82rem; }
.ws-load th:first-child, .ws-load td:first-child { text-align: left; position: sticky; left: 0; background: var(--bs-body-bg); min-width: 200px; z-index: 1; }
.ws-load thead th { font-weight: 600; color: var(--ws-muted); font-size: .74rem; white-space: nowrap; }
.ws-load .ws-today { background: rgba(var(--bs-primary-rgb),.05); }
.ws-load-cell { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border-radius: 50%; font-weight: 700; font-size: .78rem; text-decoration: none; }
.ws-load-0 { color: var(--ws-muted); opacity: .45; }
.ws-load-1 { background: rgba(34,197,94,.16); color: #15803d; }
.ws-load-2 { background: rgba(245,158,11,.20); color: #b45309; }
.ws-load-3 { background: rgba(239,68,68,.18); color: #b91c1c; }
[data-bs-theme="dark"] .ws-load-1 { color: #4ade80; }
[data-bs-theme="dark"] .ws-load-2 { color: #fbbf24; }
[data-bs-theme="dark"] .ws-load-3 { color: #f87171; }
.ws-person { display: flex; align-items: center; gap: 10px; }
.ws-person img, .ws-person .ws-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ws-ava { display: grid; place-items: center; background: var(--avatar-fallback-bg); color: #fff; font-weight: 700; font-size: .75rem; }

@media (max-width: 768px) {
  .ws-head-title { font-size: 1.15rem; }
  .ws-view { padding: 8px 10px; }
}

/* ── Tema escuro sempre escuro (Out/2026) ────────────────────────────────────
   O fundo e o menu configurados em Configurações > Aparência valem só no modo
   claro; no escuro, página e menu ficam sempre escuros. */
[data-bs-theme="dark"] { --page-canvas: #0a0e1a; }
[data-bs-theme="dark"] body { background: var(--page-canvas); }
[data-bs-theme="dark"] #sidebar,
[data-bs-theme="dark"] #sidebar.sb-light {
  --sb-bg: #0b1120; --sb-text: #94a3b8; --sb-hi: #f1f5f9;
  --sb-hover: rgba(255,255,255,.06); --sb-active: rgba(var(--bs-primary-rgb),.18); --sb-border: rgba(255,255,255,.07);
  background: #0b1120;
}

/* ── Menu recolhido: rótulos das seções viram um traço fino ── */
@media (min-width: 992px) {
  #sidebar:not(.pinned):not(:hover) .sb-section-label {
    opacity: .5; width: auto; height: 1px; padding: 0; margin: 12px 9px 8px;
    font-size: 0; background: var(--sb-text); overflow: hidden;
  }
}

/* ── Barra fina de carregamento entre páginas (substitui o skeleton) ── */
.ws-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000; background: var(--bs-primary);
  box-shadow: 0 0 8px rgba(var(--bs-primary-rgb), .6); opacity: 0; transition: width .25s ease, opacity .3s ease; pointer-events: none; }
.ws-progress.on { opacity: 1; }

/* ── Rodapé ── */
.ws-foot { border-top: 1px solid var(--ws-border); background: transparent; padding: 14px 24px; }
.ws-foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; font-size: .8rem; color: var(--ws-muted); }
.ws-foot-brand { font-weight: 500; }
.ws-foot-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ws-foot-links a, .ws-foot-link { color: var(--ws-muted); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ws-foot-links a:hover, .ws-foot-link:hover { color: var(--bs-link-color); }
.ws-foot-link kbd { font-size: .68rem; padding: 1px 5px; margin-left: 3px; background: var(--bs-tertiary-bg); color: var(--ws-muted); border: 1px solid var(--ws-border); box-shadow: none; }
.ws-keys td:first-child { white-space: nowrap; width: 46%; }
.ws-keys kbd { font-size: .74rem; background: var(--bs-tertiary-bg); color: var(--bs-body-color); border: 1px solid var(--ws-border); box-shadow: 0 1px 0 var(--ws-border); }
@media (max-width: 576px) { .ws-foot-inner { justify-content: center; text-align: center; } .ws-foot { padding-bottom: 80px; } }

/* ── Busca global do topo ── */
.tb-search { position: relative; }
.tb-search input { min-width: 0; }
@media (min-width: 992px) { .tb-search { width: min(460px, 38vw); } }
.gs-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 360px; max-height: 70vh; overflow-y: auto; z-index: 1060;
  background: var(--bs-body-bg); border: 1px solid var(--ws-border); border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(15,23,42,.35); padding: 6px; text-align: left; }
.gs-results--m { position: static; min-width: 0; margin: 8px 0 0; max-height: 60vh; }
.gs-label { font-size: .68rem; font-weight: 700; color: var(--ws-muted); text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px 4px; display: flex; gap: 6px; align-items: center; }
.gs-item, .gs-all { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--bs-body-color); text-decoration: none; font-size: .86rem; }
.gs-item i, .gs-all i { color: var(--ws-muted); width: 18px; text-align: center; }
.gs-item span { min-width: 0; display: flex; flex-direction: column; }
.gs-item b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item small { color: var(--ws-muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item:hover, .gs-item.on { background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-body-color); }
.gs-item.on i, .gs-item:hover i { color: var(--bs-primary); }
.gs-all { border-top: 1px solid var(--ws-border); margin-top: 4px; border-radius: 0 0 8px 8px; color: var(--bs-link-color); }
.gs-empty { padding: 14px; font-size: .85rem; color: var(--ws-muted); }