/* ============================================================================
   sector.erp — Chrome do Design System (sector-ds-chrome.css) · issue #357 Fase 2
   Layout/integração do app bar + rail + header temático. Depende dos tokens e
   componentes do sector-ds.css (carregar ESTE arquivo DEPOIS).
   Importar no base.html:  <link rel="stylesheet" href="/static/css/sector-ds-chrome.css?v=6.63.0">
   ============================================================================ */

/* ---- Layout fixo: app bar (topo) + rail (esquerda) + offset do conteúdo ---- */
.ds-chrome .appbar{position:fixed;top:0;left:0;right:0;z-index:1040}
.ds-chrome .rail{position:fixed;top:52px;left:0;width:64px;height:calc(100vh - 52px);z-index:1030}

/* Breadcrumbs eliminados no chrome novo (#357 Fase 2) — rail + header temático
   já dão o contexto de navegação. Cobre os 2 padrões do sistema:
   `.page-breadcrumb` (dominante) e o Bootstrap `nav[aria-label=breadcrumb]`/`.breadcrumb`.
   Markup permanece no DOM (limpeza física dos templates fica p/ varredura futura). */
.page-breadcrumb,
nav[aria-label="breadcrumb"],
.breadcrumb{display:none !important}

/* Container do conteúdo (NÃO é `.ds`): offset do rail + app bar */
.ds-main{margin-left:64px;padding-top:52px;padding-bottom:46px;min-height:100vh}
/* Conteúdo legado alinhado à ESQUERDA (sem centralizar) — padrão do MOC:
   gutter 28px, max-width 1360. Sobrepõe o auto-centramento do .container BS. */
.ds-main > main.container,
.ds-main > main.container-fluid{max-width:1360px;margin-left:0;margin-right:auto;padding-top:22px;padding-left:28px;padding-right:28px}
/* ws-head temático cola abaixo da app bar (fica DENTRO de .ds-main → sticky ok) */
.ds-main .ds-wshead{top:52px;z-index:1020}

/* ---- App bar: hambúrguer + utilitários ---- */
.ds-burger{display:none;background:transparent;border:0;color:#fff;font-size:20px;cursor:pointer;padding:4px 8px;line-height:1}
.ds .appbar .brand{color:#fff;text-decoration:none}
.ds-appbar-utils{display:flex;align-items:center;gap:4px}
.ds-util{color:#fff;opacity:.92;display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:6px;font-size:13px;position:relative;cursor:pointer;text-decoration:none}
.ds-util:hover{background:rgba(255,255,255,.14);opacity:1;color:#fff}
.ds-util i{font-size:18px}
.ds-util-text strong{font-weight:600;font-size:13px}
.ds-badge{position:absolute;top:1px;right:1px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;border-radius:10px;padding:0 4px;line-height:1.5}
.ds-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:inline-grid;place-items:center;font-weight:600;font-size:13px;cursor:pointer;text-decoration:none;letter-spacing:.5px}
.ds-avatar:hover{background:rgba(255,255,255,.28);color:#fff}
/* dropdowns da app bar herdam o estilo Bootstrap/tema; só garantir z-index */
.ds-chrome .dropdown-menu{z-index:1050}

/* ---- ftabs como links <a> (espelha .ds .ftabs button do sector-ds.css) ---- */
.ds .ftabs a{font-family:inherit;border:0;background:transparent;font-size:13.5px;font-weight:600;color:var(--muted);padding:11px 14px;cursor:pointer;border-bottom:2.5px solid transparent;display:flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none}
.ds .ftabs a i{font-size:15px}
.ds .ftabs a:hover{color:var(--petroleo)}
.ds .ftabs a.on{color:var(--petroleo);border-bottom-color:var(--ambar)}

/* ---- Rail mobile (offcanvas) ---- */
.ds-rail-oc .offcanvas-header .brand{font-weight:800;font-size:17px}
.ds-rail-oc .offcanvas-body{display:flex;flex-direction:column;gap:2px;padding:10px 12px}
.ds-rail-oc .ds-oc-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;color:var(--ink);font-weight:600;font-size:14px;text-decoration:none}
.ds-rail-oc .ds-oc-item:hover{background:#eef3f4;color:var(--petroleo)}
.ds-rail-oc .ds-oc-item i{font-size:20px;color:var(--muted)}
.ds-rail-oc .ds-oc-item.on{background:rgba(31,78,95,.1);color:var(--petroleo)}
.ds-rail-oc .ds-oc-item.on i{color:var(--petroleo)}

/* ---- Caixa de Ferramentas HORIZONTAL da obra (#357 Fase 3) ----
   Barra de ícones na 1ª linha do cabeçalho (lado direito do ws-title-row). */
/* Globais (funcionam fora de `.ds` — ex.: toolbar de landing — e em <button>). */
.ds-obra-tools{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.ds-tool{width:34px;height:34px;border-radius:var(--se-radius-md,6px);display:grid;place-items:center;color:var(--se-primary,#1F4E5F);font-size:18px;text-decoration:none;border:0;background:transparent;cursor:pointer;font-family:inherit;padding:0}
.ds-tool:hover{background:rgba(31,78,95,.1);color:var(--se-primary,#1F4E5F)}
.ds-tool-sep{width:1px;height:22px;background:var(--se-border,#E5E7EB);margin:0 4px;align-self:center}

/* ---- Barra de contexto da sub-tab nas telas filhas (#357 Fase 3) ----
   Indica "Execução › Diário" acima do form especializado dentro do workspace. */
.ds .ws-subctx{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:var(--petroleo);background:rgba(31,78,95,.06);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:7px 12px;margin:14px 0 4px}
.ds .ws-subctx i{font-size:15px;color:var(--petroleo-l)}

/* ---- Responsivo: <720px o rail vira drawer ---- */
@media(max-width:720px){
  .ds-rail-desk{display:none}
  .ds-burger{display:inline-flex;align-items:center}
  .ds-main{margin-left:0}
  .ds-main .ds-wshead{position:static}
}