*{box-sizing:border-box}:root{--bg:#f5f7fb;--border:#dfe4ec;--text:#18202b;--muted:#687385;--primary:#4f46e5;--danger:#dc2626;--shadow:0 12px 30px rgba(26,34,48,.12)}html,body{margin:0;width:100%;height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);overflow:hidden}body{background:var(--bg)}.hidden{display:none!important}.auth-screen{height:100%;display:grid;place-items:center;background:radial-gradient(circle at top,#eef2ff,#f5f7fb 55%)}.auth-card{width:min(430px,calc(100vw - 30px));background:#fff;border:1px solid var(--border);border-radius:20px;padding:30px;box-shadow:0 24px 70px rgba(30,41,59,.12)}.auth-card .brand-mark{margin-bottom:20px}.auth-card h1{font-size:25px;margin:6px 0}.auth-card p{color:var(--muted);font-size:13px;line-height:1.6}.auth-card input,.auth-card select{display:block;width:100%;margin:8px 0 13px;padding:11px;border:1px solid var(--border);border-radius:9px;font:inherit}.auth-card small{display:block;margin-top:12px;color:var(--muted)}.token-box{margin-top:15px;padding-top:15px;border-top:1px solid var(--border)}.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 8px 18px rgba(79,70,229,.25)}.eyebrow{font-size:10px;letter-spacing:.12em;color:#6366f1;font-weight:800}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:12px 22px;background:#fff;border-bottom:1px solid var(--border);z-index:20;position:relative}.brand{display:flex;align-items:center;gap:12px}.brand h1{font-size:18px;margin:0}.brand span{color:var(--muted);font-size:12px}.toolbar{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.btn{border:1px solid var(--border);background:#fff;color:var(--text);border-radius:9px;padding:9px 13px;cursor:pointer;font-weight:650;font-size:13px}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.06)}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn.ghost{background:#f8fafc}.btn.danger{color:var(--danger);border-color:#fecaca}.wide{width:100%}.subbar{height:54px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;z-index:10;position:relative}.search-wrap{display:flex;align-items:center;gap:8px;width:300px;border:1px solid var(--border);background:#f8fafc;padding:7px 10px;border-radius:9px;color:#8a94a4}.search-wrap input{border:0;outline:0;background:transparent;width:100%;font-size:13px}.userbar{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:11px}.userbar button{border:0;background:#f1f5f9;border-radius:7px;padding:6px 8px;cursor:pointer}.viewport{position:absolute;inset:130px 0 0;overflow:hidden;cursor:grab;background:#f5f7fb;background-image:radial-gradient(#d8dee8 1px,transparent 1px);background-size:22px 22px}.viewport.panning{cursor:grabbing}.canvas{position:absolute;left:0;top:0;width:5000px;height:4000px;transform-origin:0 0}.item{position:absolute;user-select:none}.card{width:250px;min-height:150px;border:1px solid rgba(0,0,0,.08);border-radius:13px;box-shadow:var(--shadow);padding:14px;cursor:move;overflow:hidden}.card:hover{box-shadow:0 16px 35px rgba(26,34,48,.18)}.card-head{display:flex;justify-content:space-between;gap:8px}.card h3{margin:0;font-size:15px;line-height:1.25;word-break:break-word}.category{margin-top:4px;color:#596579;font-size:11px;font-weight:700;text-transform:uppercase}.card p{margin:10px 0 0;font-size:12px;line-height:1.5;color:#3d4756;white-space:pre-wrap}.card-fields{margin-top:10px;padding-top:9px;border-top:1px dashed rgba(0,0,0,.12);display:grid;gap:4px}.card-field{font-size:11px;color:#4b5563}.card-field b{color:#1f2937}.item-actions{display:flex;gap:3px;opacity:0;transition:.15s}.card:hover .item-actions,.group:hover .item-actions{opacity:1}.icon-btn{border:0;background:rgba(255,255,255,.72);width:25px;height:25px;border-radius:7px;cursor:pointer;font-size:15px}.group{min-width:300px;min-height:180px;border:2px dashed rgba(14,116,144,.35);border-radius:17px;background:rgba(255,255,255,.54);box-shadow:0 8px 22px rgba(15,23,42,.06)}.group.drag-over{border-style:solid;border-color:#4f46e5;box-shadow:0 0 0 4px rgba(79,70,229,.1)}.group-header{height:54px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;border-radius:15px 15px 0 0;background:rgba(255,255,255,.6);cursor:move}.group-title{font-size:14px;font-weight:800}.group-count{font-size:10px;color:#64748b;margin-left:6px}.group-body{padding:12px;display:grid;min-height:126px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;align-content:start}.group-body .card{position:relative!important;left:auto!important;top:auto!important;width:100%;min-width:0;min-height:105px;max-height:190px;box-shadow:0 5px 14px rgba(26,34,48,.08);contain:layout paint;display:flex;flex-direction:column}.group-body .card p{max-height:55px;overflow:auto;margin-bottom:0}.group-body .card-fields{max-height:58px;overflow:auto;padding-right:4px}.group-body .card-head{min-width:0}.group-body .card-head>div:first-child{min-width:0}.group-body .card h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-description{display:none}.zoom-controls{position:fixed;right:18px;bottom:18px;display:flex;align-items:center;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);border-radius:10px;overflow:hidden;z-index:30}.zoom-controls button{border:0;border-right:1px solid var(--border);background:#fff;width:38px;height:35px;cursor:pointer}.zoom-controls span{min-width:58px;text-align:center;font-size:12px;color:var(--muted)}dialog{border:0;border-radius:16px;padding:0;width:min(560px,calc(100vw - 28px));box-shadow:0 25px 80px rgba(15,23,42,.28)}dialog::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}.modal,.logs-modal{padding:22px}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.modal h2{margin:3px 0 0;font-size:21px}.modal label{display:block;font-size:12px;font-weight:700;color:#374151;margin-bottom:13px}.modal input:not([type=color]),.modal textarea,.modal select{display:block;width:100%;margin-top:6px;border:1px solid var(--border);border-radius:9px;padding:10px;outline:0;font:inherit;font-size:13px;background:#fbfcfe}.modal input[type=color]{display:block;width:100%;height:39px;margin-top:6px;border:1px solid var(--border);border-radius:9px;background:#fff;padding:3px}.form-grid{display:grid;grid-template-columns:1fr 110px;gap:12px}.modal-actions{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:15px;border-top:1px solid var(--border)}.modal-actions>div{display:flex;gap:7px}.logs-list{max-height:65vh;overflow:auto;display:grid;gap:8px}.log{padding:10px;border:1px solid var(--border);border-radius:9px;background:#fafbfc}.log strong{font-size:12px}.log small{color:var(--muted)}.log pre{white-space:pre-wrap;word-break:break-word;font-size:10px;color:#475569}.muted{color:var(--muted);font-size:12px;line-height:1.5}.toast{position:fixed;bottom:68px;left:50%;transform:translate(-50%,20px);background:#172033;color:#fff;padding:9px 14px;border-radius:9px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:800px){.topbar{height:auto;align-items:flex-start;flex-direction:column;gap:10px}.toolbar{justify-content:flex-start}.subbar{height:auto;padding:8px 12px;flex-direction:column;align-items:stretch;gap:8px}.search-wrap{width:100%}.userbar{justify-content:flex-end}.viewport{inset:152px 0 0}.toolbar .btn{padding:8px 9px}}
.view-content{background:#f8fafc;border:1px solid var(--border);border-radius:11px;padding:15px;max-height:65vh;overflow:auto}.view-row{padding:8px 0;border-bottom:1px solid #e7ebf0;font-size:12px;white-space:pre-wrap}.view-row:last-child{border-bottom:0}.view-row b{display:block;font-size:10px;text-transform:uppercase;color:#64748b;margin-bottom:3px}.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.shortcut{display:flex;align-items:center;justify-content:space-between;padding:10px;border:1px solid var(--border);border-radius:9px;background:#fafbfc;font-size:12px}.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;border:1px solid #cfd6e1;border-bottom-width:2px;border-radius:5px;padding:3px 6px;font-size:10px}.confirm-message{font-size:13px;line-height:1.6;color:#4b5563;white-space:pre-line}.diff-summary{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.diff-pill{padding:7px 10px;border-radius:999px;font-size:11px;font-weight:700}.diff-pill.add{background:#dcfce7;color:#15803d}.diff-pill.remove{background:#fee2e2;color:#b91c1c}.diff-pill.change{background:#fef3c7;color:#92400e}.diff-list{max-height:52vh;overflow:auto;display:grid;gap:7px}.diff-item{border:1px solid var(--border);border-radius:9px;padding:9px;background:#fff;font-size:12px}.diff-item .label{font-weight:800}.diff-item .detail{color:#64748b;font-size:11px;margin-top:3px}.log details{margin-top:7px}.log summary{cursor:pointer;color:#6366f1;font-size:11px}.log pre{white-space:pre-wrap;word-break:break-word;font-size:10px;color:#475569;margin:8px 0 0}.muted{color:var(--muted);font-size:12px;line-height:1.5}@media(max-width:800px){.shortcut-grid{grid-template-columns:1fr}}

/* Layout dos cards dentro de grupos */
.group-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 190px;
  align-items: stretch;
}
.group-body:empty {
  min-height: 112px;
}
.group-body .card {
  width: 100%;
  height: 190px;
  min-height: 0;
  max-height: none;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.group-body .card-head {
  flex: 0 0 auto;
  min-width: 0;
}
.group-body .card-title-wrap {
  min-width: 0;
  overflow: hidden;
}
.group-body .card h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-body .card-description {
  flex: 0 0 auto;
  max-height: 48px;
  margin: 9px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-right: 4px;
}
.group-body .card-fields {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-right: 5px;
}
.group-body .card-field {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.group-body .item-actions {
  flex: 0 0 auto;
}
@media(max-width:800px){
  .group-body { grid-template-columns: 1fr; }
}


/* Ajuste final: cards dentro de grupos */
.group-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 220px;
  align-items: stretch;
}

.group-body .card {
  height: 220px;
  min-height: 220px;
  max-height: 220px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Os botões ficam em uma linha própria no topo. O título fica abaixo,
   usando toda a largura disponível e sem competir com os botões. */
.group-body .card-head {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  flex: 0 0 auto;
}

.group-body .card-head > .item-actions {
  order: 0;
  align-self: flex-end;
  flex: 0 0 auto;
  width: auto;
  min-height: 25px;
}

.group-body .card-head > .card-title-wrap {
  order: 1;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.group-body .card h3 {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.group-body .card .category {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-body .card-description {
  flex: 0 0 auto;
  max-height: 52px;
  margin: 10px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.group-body .card-fields {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-top: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.group-body .card-field {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 800px) {
  .group-body {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
}

/* Organizações: contêiner visual de grupos */
.organization {
  min-width: 420px;
  min-height: 190px;
  border: 2px dashed rgba(124,58,237,.30);
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 10px 26px rgba(15,23,42,.07);
}
.organization.drag-over {
  border-style: solid;
  border-color: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124,58,237,.10);
}
.organization-header {
  height: 60px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px 16px 0 0;
  background: rgba(255,255,255,.72);
  cursor: move;
}
.organization-header-main {
  display: flex;
  align-items: center;
  min-width: 0;
}
.organization-title {
  font-size: 15px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.organization-body {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  min-height: 126px;
}
.organization-body .group {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
}
.organization-body .group-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media(max-width:760px) {
  .organization { min-width: 320px; }
  .organization-body { grid-template-columns: 1fr; }
}


/* Ações da organização: ficam visíveis ao passar o mouse sobre a própria organização. */
.organization .item-actions {
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity .15s;
  flex: 0 0 auto;
  min-height: 25px;
}
.organization:hover .item-actions {
  opacity: 1;
}

/* Busca e navegação entre resultados. */
.search-area {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.search-position-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}
.search-position-option input {
  margin: 0;
  accent-color: var(--primary);
}
.search-result-count {
  min-width: 110px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.search-next {
  padding: 7px 10px;
  font-size: 11px;
  white-space: nowrap;
}
.search-next:disabled {
  cursor: not-allowed;
  opacity: .45;
  transform: none;
  box-shadow: none;
}
.search-match {
  outline: 3px solid rgba(79,70,229,.55);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(79,70,229,.10), var(--shadow);
}
.search-container-match {
  opacity: 1 !important;
}
.search-current {
  outline: 4px solid rgba(79,70,229,.85);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(79,70,229,.16), 0 16px 35px rgba(26,34,48,.20);
}

@media(max-width:1100px){
  .search-area { flex-wrap: wrap; }
}
@media(max-width:800px){
  .search-area { width: 100%; }
  .search-wrap { flex: 1 1 100%; }
  .search-result-count { min-width: auto; }
}

/* Modal de organização de posições */
.order-modal {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 24px;
}
#orderDialog {
  width: min(700px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 0;
  overflow: hidden;
}
#orderDialog .modal-head > div {
  min-width: 0;
}
.order-list {
  max-height: 55vh;
  overflow: auto;
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-right: 2px;
}
.order-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 105px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.order-position {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}
.order-item-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}
.order-select-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}
.order-select {
  width: 58px !important;
  margin: 0 !important;
  padding: 7px 8px !important;
}
.order-select-label {
  min-width: 0;
}
.order-select {
  flex: 0 0 auto;
}
@media(max-width:600px){
  .order-row { grid-template-columns: 34px minmax(0,1fr); }
  .order-select-label { grid-column: 2; justify-content: flex-start; }
}


/* Opções destrutivas de conteúdo */
.delete-content-option {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 11px 12px;
  border: 1px solid #fecaca;
  border-radius: 9px;
  background: #fff7f7;
  color: #7f1d1d;
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}
.delete-content-option.visible { display: flex; }
.delete-content-option input { margin: 2px 0 0; accent-color: var(--danger); }


/* Tema escuro */
.auth-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.auth-card .auth-head .brand-mark{margin-bottom:0}.theme-toggle{white-space:nowrap}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
html[data-theme="dark"]{--bg:#0b1120;--border:#263244;--text:#e5e7eb;--muted:#9aa6b7;--primary:#6366f1;--danger:#f87171;--shadow:0 12px 30px rgba(0,0,0,.35)}
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="dark"] .auth-screen{background:radial-gradient(circle at top,#1b2340,#0b1120 58%)}
html[data-theme="dark"] .auth-card,.html[data-theme="dark"] .auth-card{background:#111827;border-color:var(--border);box-shadow:0 24px 70px rgba(0,0,0,.4)}
html[data-theme="dark"] .auth-card input,html[data-theme="dark"] .auth-card select{background:#0f172a;color:var(--text);border-color:var(--border)}
html[data-theme="dark"] .topbar,html[data-theme="dark"] .subbar{background:#111827;border-color:var(--border)}
html[data-theme="dark"] .btn{background:#172033;color:var(--text);border-color:var(--border)}
html[data-theme="dark"] .sheet-refresh-btn{background:#172033;color:#e5e7eb;border-color:#334155;box-shadow:0 10px 25px rgba(0,0,0,.35)}
html[data-theme="dark"] .sheet-refresh-btn:hover{background:#1e293b;color:#a5b4fc;border-color:#6366f1}
html[data-theme="dark"] .btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
html[data-theme="dark"] .btn.ghost{background:#0f172a}
html[data-theme="dark"] .btn.danger{color:#fca5a5;border-color:#7f1d1d}
html[data-theme="dark"] .search-wrap{background:#0f172a;border-color:var(--border);color:#94a3b8}
html[data-theme="dark"] .search-wrap input{color:var(--text)}
html[data-theme="dark"] .userbar button{background:#1e293b;color:var(--text)}
html[data-theme="dark"] .viewport{background:#0b1120;background-image:radial-gradient(#253044 1px,transparent 1px)}
html[data-theme="dark"] .card{border-color:#334155;box-shadow:var(--shadow)}
html[data-theme="dark"] .category,html[data-theme="dark"] .card p,html[data-theme="dark"] .card-field{color:#c1cad8}
html[data-theme="dark"] .card-field b{color:#e5e7eb}
html[data-theme="dark"] .item-actions .icon-btn{background:rgba(15,23,42,.9);color:#e5e7eb}
html[data-theme="dark"] .group{background:rgba(15,23,42,.72);border-color:#3b536f}
html[data-theme="dark"] .group-header{background:rgba(30,41,59,.82)}
html[data-theme="dark"] .zoom-controls{background:#111827;border-color:var(--border)}
html[data-theme="dark"] .zoom-controls button{background:#111827;color:var(--text);border-color:var(--border)}
html[data-theme="dark"] dialog{background:#111827;color:var(--text)}
html[data-theme="dark"] dialog::backdrop{background:rgba(0,0,0,.62)}
html[data-theme="dark"] .modal input:not([type=color]),html[data-theme="dark"] .modal textarea,html[data-theme="dark"] .modal select{background:#0f172a;color:var(--text);border-color:var(--border)}
html[data-theme="dark"] .modal input[type=color]{background:#0f172a;border-color:var(--border)}
html[data-theme="dark"] .log{background:#0f172a;border-color:var(--border)}
html[data-theme="dark"] .log pre{color:#cbd5e1}
html[data-theme="dark"] .order-row,html[data-theme="dark"] .diff-item{background:#0f172a;border-color:var(--border)}
html[data-theme="dark"] .order-select{background:#111827;color:var(--text);border-color:var(--border)}
html[data-theme="dark"] .eyebrow{color:#a5b4fc}
html[data-theme="dark"] .delete-content-option{background:#1e293b!important;border-color:#334155!important}


/* ========================================================================
   Tema escuro — componentes do mural
   Os cards/grupos/organizações recebem sua cor por style inline. No tema
   escuro, estas regras usam --component-color para preservar a identidade
   visual sem deixar o fundo claro demais e garantindo contraste do texto.
   ======================================================================== */
html[data-theme="dark"] .card {
  background: color-mix(in srgb, var(--component-color) 34%, #111827) !important;
  border-color: color-mix(in srgb, var(--component-color) 52%, #64748b) !important;
  color: #f3f4f6;
  box-shadow: 0 14px 30px rgba(0,0,0,.38);
}
html[data-theme="dark"] .card:hover {
  box-shadow: 0 18px 38px rgba(0,0,0,.48);
}
html[data-theme="dark"] .card h3 {
  color: #f8fafc;
}
html[data-theme="dark"] .card .category {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .card p {
  color: #d7dee9 !important;
}
html[data-theme="dark"] .card-fields {
  border-top-color: rgba(203,213,225,.22);
}
html[data-theme="dark"] .card-field {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .card-field b {
  color: #f8fafc !important;
}
html[data-theme="dark"] .group {
  background: color-mix(in srgb, var(--component-color) 18%, #111827) !important;
  border-color: color-mix(in srgb, var(--component-color) 48%, #475569) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  color: #f3f4f6;
}
html[data-theme="dark"] .group-header {
  background: color-mix(in srgb, var(--component-color) 24%, #1e293b) !important;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
html[data-theme="dark"] .group-title,
html[data-theme="dark"] .group-count {
  color: #f1f5f9;
}
html[data-theme="dark"] .group-count {
  color: #aebbd0;
}
html[data-theme="dark"] .organization {
  background: color-mix(in srgb, var(--component-color) 13%, #0f172a) !important;
  border-color: color-mix(in srgb, var(--component-color) 48%, #475569) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.34);
  color: #f3f4f6;
}
html[data-theme="dark"] .organization-header {
  background: color-mix(in srgb, var(--component-color) 18%, #111827) !important;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
html[data-theme="dark"] .organization-title {
  color: #f8fafc;
}
html[data-theme="dark"] .organization .group-count {
  color: #aebbd0;
}
html[data-theme="dark"] .icon-btn {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155;
}
html[data-theme="dark"] .icon-btn:hover {
  background: #334155 !important;
}
html[data-theme="dark"] .search-current {
  outline-color: #a5b4fc !important;
  box-shadow: 0 0 0 4px rgba(129,140,248,.25), 0 16px 35px rgba(0,0,0,.42) !important;
}
html[data-theme="dark"] .view-content {
  background: #0f172a;
  border-color: var(--border);
}
html[data-theme="dark"] .view-row {
  border-bottom-color: #263244;
}
html[data-theme="dark"] .view-row b {
  color: #aebbd0;
}
html[data-theme="dark"] .shortcut {
  background: #0f172a;
  border-color: var(--border);
}
html[data-theme="dark"] .kbd {
  background: #1e293b;
  border-color: #475569;
  color: #f8fafc;
}
html[data-theme="dark"] .confirm-message {
  color: #cbd5e1;
}
html[data-theme="dark"] .diff-item {
  color: #e5e7eb;
}
html[data-theme="dark"] .modal label {
  color: #dbe4f0;
}
html[data-theme="dark"] .modal-actions {
  border-top-color: var(--border);
}
html[data-theme="dark"] .zoom-controls {
  box-shadow: 0 12px 30px rgba(0,0,0,.42);
}
html[data-theme="dark"] .zoom-controls button:hover {
  background: #1e293b;
}

/* Sheets */
.sheetbar{height:42px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:flex-end;padding:0 18px;z-index:9;position:relative;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
.sheet-tabs{display:flex;align-items:flex-end;gap:4px;min-width:max-content;height:100%}
.sheet-tab{position:relative;display:flex;align-items:center;height:34px;border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;background:transparent;overflow:visible}
.sheet-tab.active{background:var(--bg);border-color:var(--border)}
.sheet-tab-main{height:33px;border:0;background:transparent;color:var(--muted);padding:0 8px 0 12px;font:600 12px inherit;cursor:pointer;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-tab.active .sheet-tab-main{color:var(--text);font-weight:800}
.sheet-tab-more{height:27px;width:27px;margin-right:4px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;opacity:.35;font-size:16px;line-height:1}
.sheet-tab:hover .sheet-tab-more,.sheet-tab.active .sheet-tab-more{opacity:1}
.sheet-tab-more:hover{background:var(--border);color:var(--text)}
.sheet-add{height:29px;min-width:32px;margin:0 0 3px 3px;border:1px dashed var(--border);border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;font-size:16px}
.sheet-add:hover{background:var(--bg);color:var(--text);border-style:solid}
.sheet-menu{position:fixed;left:0;top:0;z-index:1000;width:150px;padding:5px;background:var(--panel,#fff);border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow)}
.sheet-menu button{display:block;width:100%;border:0;background:transparent;color:var(--text);text-align:left;padding:8px 9px;border-radius:6px;cursor:pointer;font:600 12px inherit}
.sheet-menu button:hover{background:var(--bg)}
.sheet-menu button.danger{color:var(--danger)}
.sheet-menu.hidden{display:none!important}
.sheet-modal{width:min(460px,calc(100vw - 28px))}

html[data-theme="dark"] .sheetbar{background:#111827}
html[data-theme="dark"] .sheet-tab.active{background:#0b1120;border-color:#263244}
html[data-theme="dark"] .sheet-menu{--panel:#111827;background:#111827}
html[data-theme="dark"] .sheet-menu button:hover{background:#1b2638}

@media(max-width:800px){
  .sheetbar{padding:0 10px}
  .sheet-tab-main{max-width:135px}
}

/* A área do mural começa abaixo da barra de sheets. */
.viewport{inset:172px 0 0}
@media(max-width:800px){.viewport{inset:194px 0 0}}

/* Reordenação das sheets por arrastar e soltar */
.sheet-tab{transition:transform .12s ease, opacity .12s ease, border-color .12s ease, background .12s ease}
.sheet-tab.dragging{opacity:.45;transform:scale(.98)}
.sheet-tab.drag-over{border-color:var(--primary);background:color-mix(in srgb, var(--primary) 8%, transparent);box-shadow:inset 0 -2px 0 var(--primary)}
.sheet-tab[draggable="true"] .sheet-tab-main{cursor:grab}
.sheet-tab[draggable="true"] .sheet-tab-main:active{cursor:grabbing}
html[data-theme="dark"] .sheet-tab.drag-over{background:color-mix(in srgb, var(--primary) 18%, #0b1120);box-shadow:inset 0 -2px 0 var(--primary)}

/* Exportação */
.export-modal{width:min(720px,calc(100vw - 28px));max-height:min(88vh,900px);overflow:auto}
.export-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.export-mode{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:11px;padding:12px;text-align:left;cursor:pointer;display:grid;gap:4px}
.export-mode strong{font-size:13px}.export-mode span{font-size:11px;color:var(--muted);line-height:1.45}.export-mode.active{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 16%,transparent);background:color-mix(in srgb,var(--primary) 7%,var(--bg))}
.export-panel{border:1px solid var(--border);border-radius:11px;padding:14px;background:color-mix(in srgb,var(--bg) 65%,transparent)}
.export-two{grid-template-columns:1fr 1fr;margin-bottom:4px}.export-check{display:flex!important;align-items:center;gap:8px;margin:8px 0 12px!important}.export-check input{margin:0!important;width:auto!important}
.export-sheet-list,.export-tree-list{display:grid;gap:5px;max-height:180px;overflow:auto;border-top:1px solid var(--border);padding-top:10px;margin-top:10px}
.export-sheet-row,.export-tree-row{display:flex!important;align-items:center;gap:8px;padding:8px 9px!important;margin:0!important;border:1px solid var(--border);border-radius:8px;background:var(--panel,#fff);font-weight:600!important;color:var(--text)!important}
.export-sheet-row input,.export-tree-row input{width:auto!important;margin:0!important}.export-help{margin:10px 0 0}
html[data-theme="dark"] .export-mode,html[data-theme="dark"] .export-panel{background:#0f172a}
html[data-theme="dark"] .export-mode.active{background:#172033}.export-render .item-actions{opacity:0!important}.export-render .drag-over,.export-render .search-match,.export-render .search-current{box-shadow:none!important}
@media(max-width:800px){.export-mode-grid,.export-two{grid-template-columns:1fr}.export-modal{max-height:92vh}}


/* Exportação: o .export-modal é o FORM dentro do dialog. O tamanho deve ser
   aplicado ao dialog pai para que o conteúdo nunca seja cortado horizontalmente. */
#exportDialog {
  width: min(760px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(90vh, 920px);
  padding: 0;
  overflow: hidden;
}
#exportDialog > .export-modal {
  width: 100%;
  max-width: none;
  max-height: min(90vh, 920px);
  margin: 0;
  padding: 22px;
  overflow-x: hidden;
  overflow-y: auto;
}
#exportDialog .modal-head,
#exportDialog .export-mode-grid,
#exportDialog .export-panel,
#exportDialog .modal-actions {
  width: 100%;
  min-width: 0;
}
#exportDialog .export-mode-grid,
#exportDialog .export-two {
  min-width: 0;
}
#exportDialog .export-mode,
#exportDialog label,
#exportDialog select,
#exportDialog input,
#exportDialog .export-panel {
  min-width: 0;
  max-width: 100%;
}
#exportDialog .export-mode span,
#exportDialog .export-help,
#exportDialog label {
  overflow-wrap: anywhere;
}
#exportDialog .export-sheet-list,
#exportDialog .export-tree-list {
  width: 100%;
  min-width: 0;
}
@media(max-width:800px){
  #exportDialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
  #exportDialog > .export-modal { max-height: 92vh; }
}

/* Workspace / multi-selection / grid / minimap / presentation */
.viewport.grid-enabled { background-image: radial-gradient(#cfd6e1 1px, transparent 1px); background-size: 22px 22px; }
.workspace-badge{position:fixed;left:18px;top:146px;z-index:35;background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);max-width:330px;backdrop-filter:blur(8px)}
.workspace-badge-title{display:flex;align-items:center;gap:7px;font-size:13px}.workspace-badge-title span{font-size:18px}.workspace-description{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4}.workspace-stats{font-size:10px;color:#64748b;margin-top:6px}
.selection-toolbar{position:fixed;top:126px;left:50%;transform:translateX(-50%);z-index:200;display:flex;gap:7px;align-items:center;background:#172033;color:#fff;border-radius:11px;padding:7px 9px;box-shadow:0 12px 35px rgba(0,0,0,.2);font-size:12px}.selection-toolbar .btn{padding:6px 9px;font-size:11px}.selection-toolbar .btn.danger{color:#fff;background:#991b1b;border-color:#991b1b}
.item.multi-selected{outline:3px solid #4f46e5;outline-offset:3px;z-index:25}.item.locked{cursor:not-allowed!important}.item.locked::after{content:'🔒';position:absolute;right:8px;bottom:7px;font-size:13px;background:rgba(255,255,255,.85);border-radius:6px;padding:2px 4px;z-index:8}.group-body .item.locked::after{right:5px;bottom:5px}.grid-toolbar{position:fixed;left:18px;bottom:18px;z-index:36;display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 10px;box-shadow:var(--shadow);font-size:11px}.grid-toolbar label{display:flex;align-items:center;gap:4px}.sheet-refresh-btn{position:fixed;right:18px;top:164px;z-index:36;width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.94);color:var(--text);box-shadow:var(--shadow);font:700 21px/1 inherit;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px)}.sheet-refresh-btn:hover{background:var(--bg);border-color:var(--primary);color:var(--primary)}.sheet-refresh-btn:disabled{cursor:wait;opacity:.65}.sheet-refresh-btn.is-refreshing{animation:sheet-refresh-spin .8s linear infinite}@keyframes sheet-refresh-spin{to{transform:rotate(360deg)}}
.minimap{position:fixed;right:18px;bottom:62px;width:190px;height:130px;background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);z-index:35;overflow:hidden}.minimap #minimapItems{position:absolute;inset:6px}.minimap-item{position:absolute;border:1px solid rgba(79,70,229,.45);background:rgba(79,70,229,.18);border-radius:2px}.minimap-viewport{position:absolute;border:2px solid #111827;background:rgba(79,70,229,.08);pointer-events:none}.presentation-mode .topbar,.presentation-mode .subbar,.presentation-mode .sheetbar,.presentation-mode .zoom-controls,.presentation-mode .grid-toolbar,.presentation-mode .minimap,.presentation-mode .workspace-badge,.presentation-mode .selection-toolbar,.presentation-mode .sheet-refresh-btn{display:none!important}.presentation-mode .viewport{inset:0!important}.presentation-mode .canvas{transform-origin:0 0}.presentation-mode .item-actions{opacity:0!important}.versions-list{max-height:65vh;overflow:auto;display:grid;gap:8px}.version-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:10px;padding:10px;background:#fafbfc}.version-info strong{display:block;font-size:12px}.version-info small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.version-counts{font-size:10px;color:#64748b;margin-top:5px}.version-row .btn{white-space:nowrap}
@media(max-width:800px){.workspace-badge{top:155px;left:10px;max-width:250px}.sheet-refresh-btn{right:10px;top:164px}.minimap{width:150px;height:105px;right:10px;bottom:58px}.grid-toolbar{left:10px;bottom:10px}.selection-toolbar{top:190px;max-width:calc(100vw - 20px);flex-wrap:wrap;justify-content:center}}


/* Correções do Workspace Pro: navegação, grid, minimap e workspace */
.sheetbar {
  position: relative;
  align-items: center;
  overflow: hidden;
  padding-right: 360px;
}
.sheet-tabs { min-width: 0; overflow-x: auto; overflow-y: visible; padding-right: 8px; }
.workspace-badge {
  position: absolute;
  right: 18px;
  left: auto;
  top: 4px;
  height: 38px;
  max-width: 360px;
  min-width: 240px;
  padding: 4px 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 16px 13px;
  column-gap: 7px;
  align-items: center;
  border-radius: 9px;
  box-shadow: none;
  backdrop-filter: none;
  z-index: 12;
  pointer-events: auto;
}
.workspace-badge-title { grid-column: 1 / -1; min-width: 0; }
.workspace-badge-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-description {
  display: block;
  grid-column: 1 / -1;
  margin: 0;
  font-size: 10px;
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workspace-stats { display: none; }
.viewport { background-image: none !important; }
.canvas.grid-enabled {
  --grid-size: 20px;
  background-image: radial-gradient(circle, rgba(148,163,184,.42) 1px, transparent 1.2px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: 0 0;
}
.grid-toolbar { gap: 8px; }
.grid-toolbar select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 5px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 10px;
}
.marquee-selection {
  position: absolute;
  border: 1px solid var(--primary);
  background: rgba(79,70,229,.10);
  border-radius: 4px;
  pointer-events: none;
  z-index: 90;
}
.minimap { width: 210px; height: 150px; }
.minimap #minimapItems { inset: 6px; }
.minimap-viewport { box-sizing: border-box; }
.item.locked::after { content: '🔒'; }
@media(max-width:800px){
  .sheetbar { padding-right: 10px; }
  .workspace-badge { display: none !important; }
  .minimap { width: 170px; height: 120px; right: 10px; bottom: 58px; }
  .grid-toolbar { left: 10px; bottom: 10px; }
}

/* Ajustes finais de interação e tema do Workspace */
.card { cursor: default; }
.card.shift-draggable { cursor: grab; }
.card.shift-draggable:active { cursor: grabbing; }
.card.multi-selected { outline: 2px solid var(--primary); outline-offset: 3px; }

/* O foco visual não deve sugerir que o card pode ser arrastado sem Shift. */
.card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Grid realmente pertence ao canvas e escala junto com o mundo. */
.canvas.grid-enabled {
  background-image: radial-gradient(circle, rgba(100,116,139,.34) 1px, transparent 1.15px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: 0 0;
}
html[data-theme="dark"] .canvas.grid-enabled {
  background-image: radial-gradient(circle, rgba(148,163,184,.28) 1px, transparent 1.15px);
}

/* Controles fixos precisam seguir o tema, inclusive labels e select. */
html[data-theme="dark"] .workspace-badge {
  background: rgba(17,24,39,.96);
  border-color: #263244;
  color: #e5e7eb;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
html[data-theme="dark"] .workspace-badge-title strong { color: #f8fafc; }
html[data-theme="dark"] .workspace-description { color: #9aa6b7; }
html[data-theme="dark"] .workspace-favorite,
html[data-theme="dark"] #workspaceFavorite { color: #fbbf24; }
html[data-theme="dark"] .grid-toolbar {
  background: #111827;
  border-color: #263244;
  color: #e5e7eb;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
html[data-theme="dark"] .grid-toolbar label { color: #e5e7eb; }
html[data-theme="dark"] .grid-toolbar select {
  background: #0f172a;
  color: #e5e7eb;
  border-color: #334155;
}
html[data-theme="dark"] .minimap {
  background: rgba(17,24,39,.96);
  border-color: #263244;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
html[data-theme="dark"] .minimap-item {
  border-color: rgba(129,140,248,.55);
  background: rgba(99,102,241,.22);
}
html[data-theme="dark"] .minimap-viewport {
  border-color: #f8fafc;
  background: rgba(99,102,241,.12);
}
html[data-theme="dark"] .marquee-selection {
  border-color: #818cf8;
  background: rgba(99,102,241,.18);
}

/* Bloqueio visual mais claro em cards internos. */
.item.locked { cursor: not-allowed !important; }
.item.locked::after {
  background: rgba(15,23,42,.82);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
}

/* Quando o usuário segura Shift sobre um card, deixa explícito que ele é móvel. */
body.shift-held .card:not(.locked) { cursor: grab; }
body.shift-held .card:not(.locked):active { cursor: grabbing; }

/* O minimap não deve receber eventos do viewport. */
.minimap { pointer-events: auto; }
.minimap * { pointer-events: none; }

@media(max-width:800px){
  .workspace-badge { max-width: 300px; }
}


/* Workspace Pro v2: seleção, guias, snap, minimap, layers e comentários */
.selection-tools{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.selection-toolbar .btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
#selectionToolbar{max-width:min(96vw,1100px);justify-content:center;flex-wrap:wrap}
#minimapViewport{position:absolute;box-sizing:border-box;border:2px solid var(--primary);background:rgba(79,70,229,.10);pointer-events:none;z-index:20;min-width:4px;min-height:4px;border-radius:3px}
.minimap-head{position:absolute;left:0;right:0;top:0;height:22px;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 5px;background:rgba(255,255,255,.82);font-size:9px;font-weight:800;color:var(--muted);pointer-events:none}
.minimap-head button{pointer-events:auto;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;padding:0 3px}
.minimap #minimapItems{top:22px}
.minimap{user-select:none}
.minimap.dragging{cursor:grabbing}
.smart-guide{position:absolute;pointer-events:none;z-index:40;background:var(--primary);opacity:.8}
.smart-guide.vertical{top:0;bottom:0;width:1px}
.smart-guide.horizontal{left:0;right:0;height:1px}
.temporary-group-box{position:absolute;pointer-events:none;z-index:39;border:1px dashed var(--primary);border-radius:8px;background:rgba(79,70,229,.04)}
.temporary-group-label{position:absolute;left:6px;top:-18px;font-size:9px;font-weight:800;color:var(--primary);background:var(--bg);padding:2px 5px;border-radius:4px}
.layer-selected{outline:2px dashed var(--primary);outline-offset:5px}
.comments-modal{width:min(680px,calc(100vw - 28px));max-height:85vh;overflow:auto}
.comments-list{display:grid;gap:8px;max-height:48vh;overflow:auto;margin-bottom:14px}
.comment-row{border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--panel,#fff)}
.comment-row.resolved{opacity:.65}
.comment-row>div:first-child{display:flex;gap:8px;align-items:center}.comment-row small{color:var(--muted);font-size:10px}.comment-row p{white-space:pre-wrap;line-height:1.5;font-size:12px;margin:7px 0}.comment-actions{display:flex;gap:6px}.comment-actions .btn{font-size:10px;padding:5px 7px}
html[data-theme="dark"] .minimap-head{background:rgba(17,24,39,.86)}
html[data-theme="dark"] .temporary-group-label{background:#0b1120}
html[data-theme="dark"] .comment-row{background:#0f172a}
@media(max-width:800px){#selectionToolbar{top:185px}.selection-tools{justify-content:center}.grid-toolbar{max-width:calc(100vw - 20px);flex-wrap:wrap}.minimap-head{height:20px}.minimap #minimapItems{top:20px}}

/* ========================================================================
   Correções finais — comentários, histórico e guias inteligentes
   ======================================================================== */

/* Comentários: nunca permitir que conteúdo interno force overflow horizontal. */
#commentsDialog {
  width: min(680px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: 85vh;
  padding: 0;
  overflow: hidden;
}
#commentsDialog > .comments-modal {
  width: 100%;
  max-width: none;
  max-height: 85vh;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}
#commentsDialog .modal-head,
#commentsDialog .comments-list,
#commentsDialog .modal-actions,
#commentsDialog label,
#commentsDialog textarea {
  min-width: 0;
  max-width: 100%;
}
#commentsDialog .modal-head > div {
  min-width: 0;
  max-width: 100%;
}
#commentsDialog #commentsTitle {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#commentsDialog .comment-row {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#commentsDialog .comment-row > div:first-child {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}
#commentsDialog .comment-row p {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#commentsDialog .comment-actions {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}
#commentsDialog textarea {
  box-sizing: border-box;
  resize: vertical;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Histórico de versões — garantir tema escuro completo. */
html[data-theme="dark"] .version-row {
  background: #0f172a;
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .version-info strong {
  color: #f8fafc;
}
html[data-theme="dark"] .version-info small,
html[data-theme="dark"] .version-counts {
  color: #9aa6b7;
}
html[data-theme="dark"] .versions-list .muted {
  color: #9aa6b7;
}

/* Guias inteligentes: camada transitória e sempre removida ao terminar a interação. */
.smart-guide {
  pointer-events: none !important;
  user-select: none !important;
}

.workspace-presence{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:10px}.workspace-presence>strong{display:block;font-size:10px;margin-bottom:5px}.presence-list{display:flex;flex-wrap:wrap;gap:5px}.presence-user{display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border:1px solid var(--border);border-radius:999px;background:rgba(248,250,252,.9);max-width:100%}.presence-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex:0 0 auto}.presence-user span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}.item.collab-locked{cursor:not-allowed!important;outline:2px solid rgba(245,158,11,.8);outline-offset:2px}.item.collab-locked::before{content:'👤';position:absolute;right:8px;top:7px;font-size:12px;background:rgba(255,255,255,.92);border-radius:6px;padding:2px 4px;z-index:9}.item.collab-owned{outline:2px solid rgba(34,197,94,.55);outline-offset:2px}.collab-lock-hint{font-size:10px;color:#92400e;margin-top:4px}.presence-empty{color:var(--muted)}html[data-theme="dark"] .presence-user{background:#1e293b}html[data-theme="dark"] .item.collab-locked::before{background:#1e293b}


/* Presença colaborativa: painel fixo, legível e colapsável para 5-10+ usuários. */
.presence-panel {
  position: fixed;
  top: 178px;
  right: 18px;
  left: auto;
  width: min(330px, calc(100vw - 36px));
  min-height: 0;
  z-index: 60;
  background: rgba(15, 23, 42, .96);
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.presence-panel-header {
  min-height: 46px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(148,163,184,.12);
  user-select: none;
}
.presence-drag-handle {
  width: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  color: #94a3b8;
  font-size: 18px;
  cursor: grab;
  touch-action: none;
}
.presence-drag-handle:hover { color: #e2e8f0; background: rgba(255,255,255,.05); }
.presence-drag-handle:active, .presence-panel.is-dragging .presence-drag-handle { cursor: grabbing; }
.presence-toggle {
  flex: 1 1 auto; min-width: 0; min-height: 46px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 12px 9px 6px; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit;
}
.presence-toggle:hover { background: rgba(255,255,255,.05); }
.presence-title { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.presence-title strong { font-size: 13px; }
.presence-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.12); flex: 0 0 auto; }
.presence-count { min-width: 21px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 999px; background: rgba(99,102,241,.22); color: #c7d2fe; font-size: 10px; font-weight: 800; }
.presence-chevron { font-size: 16px; color: #94a3b8; line-height: 1; }
.presence-body { border-top: 1px solid rgba(148,163,184,.18); }
.presence-users { max-height: 290px; overflow-y: auto; padding: 7px; scrollbar-width: thin; }
.presence-user-row { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; }
.presence-user-row:hover { background: rgba(255,255,255,.055); }
.presence-user-row.own { background: rgba(79,70,229,.14); }
.presence-user-avatar { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: #334155; color: #e2e8f0; font-size: 11px; font-weight: 800; }
.presence-user-row.own .presence-user-avatar { background: #4f46e5; color: #fff; }
.presence-user-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.presence-user-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
.presence-user-main small { color: #94a3b8; font-size: 9px; }
.presence-user-main .presence-user-sheet { color: #c7d2fe; font-weight: 700; }
.presence-user-state { color: #22c55e; font-size: 10px; flex: 0 0 auto; }
.presence-empty { padding: 12px 10px; color: #94a3b8; font-size: 10px; }
.presence-updated { padding: 6px 12px 8px; color: #64748b; font-size: 9px; border-top: 1px solid rgba(148,163,184,.12); }
.presence-panel.collapsed { width: auto; min-width: 132px; }
.presence-panel.collapsed .presence-panel-header { min-height: 40px; }
.presence-panel.collapsed .presence-toggle { min-height: 40px; }
.presence-panel.collapsed .presence-drag-handle { width: 34px; flex-basis: 34px; font-size: 16px; }
.presence-panel.collapsed .presence-body { display: none; }
.item.collab-owned { outline: 2px solid rgba(34,197,94,.8); outline-offset: 2px; }
.item.collab-locked { cursor: not-allowed !important; outline: 2px solid rgba(245,158,11,.9); outline-offset: 2px; }
.item.collab-locked::before { content: '👤'; position: absolute; right: 8px; top: 7px; font-size: 11px; background: rgba(15,23,42,.9); color: #fff; border-radius: 6px; padding: 2px 4px; z-index: 90; }
html[data-theme="light"] .presence-panel { background: rgba(255,255,255,.97); color: #18202b; border-color: #dfe4ec; box-shadow: 0 14px 38px rgba(26,34,48,.16); }
html[data-theme="light"] .presence-toggle:hover { background: #f8fafc; }
html[data-theme="light"] .presence-user-row:hover { background: #f8fafc; }
html[data-theme="light"] .presence-user-row.own { background: #eef2ff; }
html[data-theme="light"] .presence-user-avatar { background: #e2e8f0; color: #334155; }
html[data-theme="light"] .presence-user-row.own .presence-user-avatar { background: #4f46e5; color: #fff; }
html[data-theme="light"] .presence-user-main small { color: #64748b; }
html[data-theme="light"] .presence-user-main .presence-user-sheet { color: #3730a3; }
html[data-theme="light"] .presence-updated { color: #94a3b8; }
html[data-theme="light"] .presence-empty { color: #64748b; }
@media(max-width:800px){
  .presence-panel { top: 150px; right: 10px; width: min(310px, calc(100vw - 20px)); }
  .presence-users { max-height: 240px; }
  .presence-panel.collapsed { min-width: 125px; }
}

/* ================================================================
   FASE 1 — DESIGN/UI REFRESH
   Apenas apresentação visual. Sem alteração de comportamento.
   ================================================================ */
:root {
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-surface-hover: #f1f5f9;
  --ui-border: #e2e8f0;
  --ui-border-strong: #cbd5e1;
  --ui-text: #0f172a;
  --ui-muted: #64748b;
  --ui-primary: #4f46e5;
  --ui-primary-soft: #eef2ff;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-shadow-sm: 0 2px 8px rgba(15,23,42,.06);
  --ui-shadow-md: 0 8px 24px rgba(15,23,42,.10);
  --ui-shadow-lg: 0 18px 48px rgba(15,23,42,.14);
}

html[data-theme="dark"] {
  --ui-surface: #111827;
  --ui-surface-soft: #0f172a;
  --ui-surface-hover: #1e293b;
  --ui-border: #273449;
  --ui-border-strong: #3a4a62;
  --ui-text: #f8fafc;
  --ui-muted: #94a3b8;
  --ui-primary-soft: rgba(99,102,241,.14);
  --ui-shadow-sm: 0 2px 8px rgba(0,0,0,.16);
  --ui-shadow-md: 0 8px 24px rgba(0,0,0,.24);
  --ui-shadow-lg: 0 18px 48px rgba(0,0,0,.34);
}

/* ---------- Base / chrome ---------- */
body { color: var(--ui-text); }

.topbar {
  height: 68px;
  padding: 10px 18px;
  gap: 18px;
  background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
  backdrop-filter: blur(14px);
}

.brand { min-width: 190px; gap: 10px; }
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 17px;
  box-shadow: 0 6px 16px rgba(79,70,229,.20);
}
.brand h1 { font-size: 16px; letter-spacing: -.02em; }
.brand span { font-size: 11px; }

.toolbar {
  flex: 1 1 auto;
  min-width: 0;
  gap: 5px;
}

.toolbar .btn,
.userbar button,
.btn {
  min-height: 34px;
  border-radius: var(--ui-radius-sm);
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  background: var(--ui-surface-hover);
  border-color: var(--ui-border-strong);
  box-shadow: var(--ui-shadow-sm);
}

.btn:active { transform: translateY(0); }
.btn:focus-visible,
.userbar button:focus-visible,
.icon-btn:focus-visible,
.sheet-tab-main:focus-visible,
.sheet-tab-more:focus-visible {
  outline: 3px solid rgba(79,70,229,.22);
  outline-offset: 1px;
}

.btn.primary {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  box-shadow: 0 4px 12px rgba(79,70,229,.18);
}
.btn.primary:hover { background: #4338ca; border-color: #4338ca; }
.btn.ghost { background: var(--ui-surface-soft); }

/* ---------- Search / secondary bar ---------- */
.subbar {
  height: 52px;
  padding: 0 18px;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
}

.search-area { min-width: 0; display: flex; align-items: center; gap: 8px; }
.search-wrap {
  width: 340px;
  min-height: 34px;
  border-radius: 9px;
  border-color: var(--ui-border);
  background: var(--ui-surface-soft);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.search-wrap:focus-within {
  background: var(--ui-surface);
  border-color: rgba(79,70,229,.55);
  box-shadow: 0 0 0 3px rgba(79,70,229,.09);
}
.search-wrap input { color: var(--ui-text); }
.search-wrap input::placeholder { color: #94a3b8; }
.search-result-count { font-size: 10px; color: var(--ui-muted); font-weight: 650; }

.userbar { gap: 9px; }
.userbar button { background: var(--ui-surface-soft); }

/* ---------- Sheets ---------- */
.sheetbar {
  height: 48px;
  position: relative;
  z-index: 70;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
  padding: 0 18px;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
.sheet-tabs { gap: 3px; align-items: stretch; }
.sheet-tab {
  border: 0;
  border-radius: 8px 8px 0 0;
  margin-top: 5px;
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.sheet-tab:hover { background: var(--ui-surface-hover); }
.sheet-tab.active { background: var(--ui-primary-soft); }
.sheet-tab-main { min-height: 42px; padding: 0 12px; font-weight: 700; }
.sheet-tab.active .sheet-tab-main { color: var(--ui-primary); }
.sheet-add {
  width: 34px;
  height: 34px;
  margin: 7px 0 0 4px;
  border-radius: 9px;
  border: 1px dashed var(--ui-border-strong);
  background: transparent;
  color: var(--ui-muted);
}
.sheet-add:hover { color: var(--ui-primary); border-color: var(--ui-primary); background: var(--ui-primary-soft); }

/* ---------- Canvas ---------- */
.viewport {
  inset: 168px 0 0;
  background-color: #f8fafc;
}
html[data-theme="dark"] .viewport { background-color: #0b1120; }

.canvas.grid-enabled {
  background-image: radial-gradient(circle, rgba(100,116,139,.26) 1px, transparent 1.15px);
}
html[data-theme="dark"] .canvas.grid-enabled {
  background-image: radial-gradient(circle, rgba(148,163,184,.18) 1px, transparent 1.15px);
}

.item { transition: filter .15s ease; }
.card {
  border-color: rgba(148,163,184,.30);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-md);
  padding: 15px;
}
.card:hover {
  box-shadow: var(--ui-shadow-lg);
  filter: saturate(1.02);
}
.card h3 { letter-spacing: -.01em; }
.category { letter-spacing: .05em; color: var(--ui-muted); }
.card p { color: #475569; }
html[data-theme="dark"] .card p { color: #cbd5e1; }

.group,
.organization {
  border-color: rgba(79,70,229,.28);
  background: rgba(255,255,255,.56);
  box-shadow: var(--ui-shadow-md);
  backdrop-filter: blur(5px);
}
html[data-theme="dark"] .group,
html[data-theme="dark"] .organization {
  background: rgba(15,23,42,.54);
}
.group-header,
.organization-header {
  background: rgba(255,255,255,.66);
  border-bottom: 1px solid rgba(148,163,184,.16);
}
html[data-theme="dark"] .group-header,
html[data-theme="dark"] .organization-header {
  background: rgba(30,41,59,.58);
}

/* ---------- Floating tools ---------- */
.grid-toolbar,
.zoom-controls,
.minimap {
  border-color: var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
  box-shadow: var(--ui-shadow-md);
  backdrop-filter: blur(12px);
}
.grid-toolbar { border-radius: 11px; padding: 7px 9px; }
.grid-toolbar label { color: var(--ui-muted); font-weight: 650; }
.grid-toolbar select { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
.zoom-controls { border-radius: 11px; overflow: hidden; }
.zoom-controls button { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
.zoom-controls button:hover { background: var(--ui-surface-hover); }
.zoom-controls span { color: var(--ui-muted); }

.minimap { border-radius: 12px; }
.minimap-head { background: color-mix(in srgb, var(--ui-surface) 90%, transparent); }

/* ---------- Selection ---------- */
.selection-toolbar {
  top: 126px;
  z-index: 200;
  max-width: min(1100px, calc(100vw - 36px));
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(15,23,42,.94);
  box-shadow: 0 14px 36px rgba(15,23,42,.22);
  backdrop-filter: blur(12px);
}
.selection-toolbar strong { padding: 0 5px; white-space: nowrap; }
.selection-toolbar .btn {
  min-height: 31px;
  padding: 5px 8px;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.07);
  color: #e5e7eb;
}
.selection-toolbar .btn:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.18); }
.selection-toolbar .btn.danger { background: #991b1b; }
.item.multi-selected { outline-width: 2px; outline-offset: 4px; }

/* ---------- Presence ---------- */
.presence-panel {
  border-radius: 14px;
  box-shadow: var(--ui-shadow-lg);
  backdrop-filter: blur(16px);
}

/* ---------- Dialogs ---------- */
dialog {
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-lg);
}
.modal { padding: 24px; }
.modal-head { margin-bottom: 20px; }
.modal h2 { letter-spacing: -.025em; }
.modal input:not([type=color]),
.modal textarea,
.modal select {
  border-color: var(--ui-border);
  background: var(--ui-surface-soft);
  color: var(--ui-text);
  border-radius: 9px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.modal input:not([type=color]):focus,
.modal textarea:focus,
.modal select:focus {
  background: var(--ui-surface);
  border-color: rgba(79,70,229,.55);
  box-shadow: 0 0 0 3px rgba(79,70,229,.09);
}
.modal-actions { border-top-color: var(--ui-border); }
.view-content,
.log,
.diff-item,
.version-row,
.shortcut,
.comments-list {
  border-color: var(--ui-border);
  background: var(--ui-surface-soft);
}

/* ---------- Authentication ---------- */
.auth-screen { background: radial-gradient(circle at 50% 0, #eef2ff 0, #f8fafc 55%); }
.auth-card {
  border-color: var(--ui-border);
  border-radius: 22px;
  box-shadow: var(--ui-shadow-lg);
}
.auth-card input,
.auth-card select {
  border-color: var(--ui-border);
  background: var(--ui-surface-soft);
}
.auth-card input:focus,
.auth-card select:focus {
  outline: 0;
  border-color: rgba(79,70,229,.55);
  box-shadow: 0 0 0 3px rgba(79,70,229,.09);
}

/* ---------- Utility / polish ---------- */
.icon-btn { transition: background .15s ease, transform .15s ease; }
.icon-btn:hover { background: var(--ui-surface-hover); transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .btn, .sheet-tab, .search-wrap, .modal input, .modal textarea, .modal select, .icon-btn { transition: none; }
}

@media (max-width: 1100px) {
  .topbar { padding-left: 14px; padding-right: 14px; }
  .brand { min-width: 165px; }
  .toolbar .btn { padding-left: 9px; padding-right: 9px; }
  .search-wrap { width: 280px; }
}


/* ================================================================
   AJUSTES FASE 1.1 — TEMA, PRESENÇA E EXPORTAÇÃO
   ================================================================ */

/* Barra de seleção: acompanha o tema em vez de permanecer sempre escura. */
html[data-theme="light"] .selection-toolbar {
  border-color: var(--ui-border-strong);
  background: rgba(255, 255, 255, .96);
  color: var(--ui-text);
  box-shadow: 0 14px 36px rgba(15, 23, 42, .16);
}

html[data-theme="light"] .selection-toolbar .btn {
  border-color: var(--ui-border);
  background: var(--ui-surface-soft);
  color: var(--ui-text);
}

html[data-theme="light"] .selection-toolbar .btn:hover {
  background: var(--ui-surface-hover);
  border-color: var(--ui-border-strong);
}

html[data-theme="light"] .selection-toolbar .btn.primary,
html[data-theme="light"] .selection-toolbar .btn.active {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: #fff;
}

html[data-theme="light"] .selection-toolbar .btn.danger {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

html[data-theme="dark"] .selection-toolbar {
  background: rgba(15, 23, 42, .96);
  color: #f8fafc;
}

/* Painel Ativos: novo padrão começa à esquerda. A posição pode continuar
   sendo alterada pelo usuário e persistida pelo app.js. */
html[data-theme="light"] .presence-panel {
  background: rgba(255, 255, 255, .97);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

html[data-theme="dark"] .presence-panel {
  background: rgba(15, 23, 42, .96);
  color: #f8fafc;
}

/* Exportação de dados: os itens selecionáveis também respeitam o tema. */
html[data-theme="light"] .export-sheet-row,
html[data-theme="light"] .export-tree-row {
  background: var(--ui-surface);
  color: var(--ui-text) !important;
  border-color: var(--ui-border);
}

html[data-theme="light"] .export-sheet-row:hover,
html[data-theme="light"] .export-tree-row:hover {
  background: var(--ui-surface-hover);
  border-color: var(--ui-border-strong);
}

html[data-theme="dark"] .export-sheet-row,
html[data-theme="dark"] .export-tree-row {
  background: var(--ui-surface-soft);
  color: var(--ui-text) !important;
  border-color: var(--ui-border);
}

html[data-theme="dark"] .export-sheet-row:hover,
html[data-theme="dark"] .export-tree-row:hover {
  background: var(--ui-surface-hover);
  border-color: var(--ui-border-strong);
}

html[data-theme="dark"] .export-sheet-row input,
html[data-theme="dark"] .export-tree-row input {
  accent-color: var(--ui-primary);
}

.command-only{display:none}.command-modal{width:min(620px,calc(100vw - 28px));padding:12px}.command-search{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#f8fafc}.command-search span{font-size:11px;color:var(--muted);font-weight:800}.command-search input{border:0;outline:0;background:transparent;flex:1;font:inherit}.command-list{display:grid;gap:4px;margin-top:10px;max-height:430px;overflow:auto}.command-item{display:flex;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:9px;cursor:pointer}.command-item:hover,.command-item.active{background:#eef2ff}.command-item small{color:var(--muted)}.command-hint{padding:9px 4px 2px;font-size:11px}.card-type-fields{display:grid;gap:10px;margin-bottom:4px}.type-preview{border:1px dashed var(--border);padding:10px;border-radius:9px;background:#f8fafc;font-size:12px}.analytics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.metric-tile{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fbfcfe}.metric-tile strong{display:block;font-size:22px}.metric-tile span{font-size:11px;color:var(--muted)}.analytics-section{margin-top:18px}.analytics-section h3{font-size:13px;margin:0 0 9px}.analytics-list{display:grid;gap:7px}.analytics-row{display:flex;justify-content:space-between;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:12px}.share-result{margin-top:12px;padding:12px;border:1px solid #c7d2fe;background:#eef2ff;border-radius:10px;word-break:break-all;font-size:12px}.share-result a{color:#4f46e5;font-weight:700}.card-type-badge{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:10px;font-weight:800;text-transform:uppercase;color:#596579}.card-task-done{text-decoration:line-through;opacity:.7}.card-metric{font-size:28px;font-weight:800;margin-top:10px}.card-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;background:#111827;color:#f9fafb;padding:9px;border-radius:8px;white-space:pre-wrap;overflow:auto;max-height:120px}.card-media{display:block;width:100%;max-height:120px;object-fit:cover;border-radius:8px;margin-top:9px}.analytics-modal{width:min(780px,calc(100vw - 28px))}@media(max-width:800px){.analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ================================================================
   Correções de modais e Command Palette
   O tamanho deve ser aplicado ao <dialog> pai. Isso evita que o
   conteúdo interno ultrapasse a caixa visual ou seja recortado.
   ================================================================ */
#commandDialog,
#analyticsDialog,
#shareDialog {
  width: min(760px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(90vh, 920px);
  padding: 0;
  overflow: hidden;
}
#commandDialog > .command-modal,
#analyticsDialog > .analytics-modal,
#shareDialog > .modal {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}
#commandDialog > .command-modal {
  padding: 14px;
  overflow: hidden;
}
#commandDialog .command-search,
#commandDialog .command-list,
#commandDialog .command-hint {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#commandDialog .command-search {
  background: var(--ui-surface-soft, #f8fafc);
  border-color: var(--ui-border, var(--border));
}
#commandDialog .command-search input {
  min-width: 0;
  color: var(--ui-text, var(--text));
}
#commandDialog .command-item {
  min-width: 0;
  overflow: hidden;
}
#commandDialog .command-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#commandDialog .command-item small { flex: 0 0 auto; }
#analyticsDialog > .analytics-modal {
  padding: 22px;
  max-height: min(90vh, 920px);
  overflow-x: hidden;
  overflow-y: auto;
}
#analyticsDialog .analytics-content,
#analyticsDialog .analytics-grid,
#analyticsDialog .analytics-section,
#analyticsDialog .analytics-list,
#analyticsDialog .analytics-row {
  min-width: 0;
}
#analyticsDialog .analytics-row span,
#analyticsDialog .analytics-row strong {
  overflow-wrap: anywhere;
}
#shareDialog > .modal {
  padding: 22px;
  max-height: min(90vh, 920px);
  overflow-x: hidden;
  overflow-y: auto;
}
#shareDialog .share-result {
  display: grid;
  gap: 9px;
}
#shareDialog .share-link-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
#shareDialog .share-link-value {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--ui-border, var(--border));
  border-radius: 8px;
  background: var(--ui-surface, #fff);
  color: var(--ui-text, var(--text));
  overflow-wrap: anywhere;
}
#shareDialog .share-link-value a { color: var(--primary); }

/* Command Palette / Analytics / Share no tema escuro */
html[data-theme="dark"] #commandDialog,
html[data-theme="dark"] #analyticsDialog,
html[data-theme="dark"] #shareDialog {
  background: #111827;
  color: #f8fafc;
  border-color: #334155;
}
html[data-theme="dark"] #commandDialog .command-search {
  background: #0b1120;
  border-color: #334155;
}
html[data-theme="dark"] #commandDialog .command-item:hover,
html[data-theme="dark"] #commandDialog .command-item.active {
  background: #1e293b;
}
html[data-theme="dark"] #commandDialog .command-item,
html[data-theme="dark"] #commandDialog .command-hint,
html[data-theme="dark"] #analyticsDialog .analytics-section,
html[data-theme="dark"] #shareDialog label {
  color: #e5e7eb;
}
html[data-theme="dark"] #commandDialog .command-item small,
html[data-theme="dark"] #commandDialog .command-hint,
html[data-theme="dark"] #analyticsDialog .metric-tile span,
html[data-theme="dark"] #analyticsDialog .muted {
  color: #94a3b8;
}
html[data-theme="dark"] #analyticsDialog .metric-tile,
html[data-theme="dark"] #analyticsDialog .analytics-row {
  background: #0f172a;
  border-color: #334155;
  color: #e5e7eb;
}
html[data-theme="dark"] #shareDialog .share-result {
  background: #172033;
  border-color: #3b82f6;
  color: #e5e7eb;
}
html[data-theme="dark"] #shareDialog .share-link-value {
  background: #0b1120;
  border-color: #334155;
  color: #e5e7eb;
}
html[data-theme="dark"] #shareDialog .share-link-value a { color: #a5b4fc; }

/* Contraste do contador Ativos no tema claro. */
html[data-theme="light"] .presence-count {
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}

/* Anexos e compartilhamento */
.attachment-panel,.share-scope{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#f8fafc}.attachment-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}.attachment-title small{color:var(--muted);font-size:10px}.attachment-list,.share-tree-list{display:grid;gap:6px;margin-top:8px}.attachment-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:11px}.attachment-row small{color:var(--muted)}.share-check{display:flex;align-items:center;gap:7px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:11px}.share-check.nested{margin-left:18px}.share-scope>strong{display:block;margin-top:9px;font-size:11px}.share-scope>strong:first-child{margin-top:0}.view-attachments{display:grid;gap:10px;margin-top:8px}.attachment-preview{display:grid;gap:7px;padding:8px;border:1px solid var(--border);border-radius:9px;background:#f8fafc}.attachment-preview img{display:block;max-width:100%;max-height:420px;object-fit:contain;border-radius:7px;background:#fff}.attachment-preview iframe{width:100%;height:480px;border:1px solid var(--border);border-radius:7px;background:#fff}.attachment-file{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid var(--border);border-radius:9px}.share-attachments{margin-top:10px;display:grid;gap:8px}
html[data-theme="dark"] .attachment-panel,html[data-theme="dark"] .share-scope,html[data-theme="dark"] .attachment-row,html[data-theme="dark"] .share-check,html[data-theme="dark"] .attachment-preview{background:#0f172a}.attachment-panel input[type="file"]{max-width:100%;font-size:11px}
@media(max-width:800px){.attachment-preview iframe{height:360px}.attachment-title{align-items:flex-start;flex-direction:column}}


.sheet-access-panel{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#f8fafc}.sheet-access-panel.hidden{display:none}.sheet-access-head{display:grid;gap:3px;margin-bottom:10px}.sheet-access-head small{color:var(--muted);font-size:10px}.share-scope-toolbar{display:flex;align-items:center;gap:6px;margin:8px 0}.share-scope-toolbar .muted{margin-left:auto}.share-sheet-check{min-height:38px}.share-element-org{justify-content:flex-start}.share-element-org small{margin-left:auto;color:var(--muted);font-size:9px}.nested{margin-left:18px!important}

/* ========================================================================
   Correções de cards Tarefa e editor Código
   ======================================================================== */
.card-task {
  min-height: 150px;
  height: auto;
  max-height: 240px;
  display: flex;
  flex-direction: column;
}
.card-task .card-head { flex: 0 0 auto; min-width: 0; }
.card-task .card-title-wrap { min-width: 0; overflow: hidden; }
.card-task .card-type-badge { flex: 0 0 auto; }
.task-preview {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}
.task-check { flex: 0 0 auto; font-size: 14px; line-height: 1.35; }
.task-description {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.task-due { display: block; margin-top: 7px; flex: 0 0 auto; }
.card-task .card-fields { min-height: 0; max-height: 58px; overflow: auto; }
.group-body .card-task { height: 190px; max-height: 190px; min-height: 0; }
.group-body .card-task .task-description { -webkit-line-clamp: 2; line-clamp: 2; }

html[data-theme="dark"] .card-task .task-preview,
html[data-theme="dark"] .card-task .task-due,
html[data-theme="dark"] .card-type-badge { color: #e5edf7 !important; }
html[data-theme="dark"] .card-task .task-check { color: #a5f3a5; }
html[data-theme="dark"] .card-task.card-task-done .task-description { color: #aebbd0; }
html[data-theme="dark"] .card-code-preview { color: #e5e7eb; }

.card-code-preview { margin-top: 9px; min-width: 0; }
.code-language-badge {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(99,102,241,.12);
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.card-code {
  margin: 0;
  max-width: 100%;
  max-height: 118px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.code-editor { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #0b1220; }
.code-editor-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 9px; background:#111827; color:#cbd5e1; font-size:10px; font-weight:800; }
.code-editor-toolbar select { width:auto!important; min-width:170px; margin:0!important; padding:6px 8px!important; background:#0f172a!important; color:#f8fafc!important; border-color:#334155!important; }
.code-editor-surface { position:relative; height:260px; overflow:hidden; }
.code-editor-surface pre,
.code-editor-surface textarea {
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:12px 14px; border:0; border-radius:0; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; tab-size:2; white-space:pre; overflow:auto;
}
.code-editor-surface pre { pointer-events:none; color:#e5e7eb; background:#0b1220; }
.code-editor-surface textarea { resize:none; background:transparent!important; color:transparent!important; -webkit-text-fill-color:transparent; caret-color:#fff; outline:0; z-index:2; }
.code-editor-surface textarea::selection { background:rgba(99,102,241,.35); }
.code-token-comment { color:#94a3b8; font-style:italic; }
.code-token-string { color:#86efac; }
.code-token-number { color:#fbbf24; }
.code-token-keyword { color:#c4b5fd; font-weight:700; }
.view-code-block { margin-top: 10px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#0b1220; }
.view-code-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 10px; background:#111827; color:#e5e7eb; }
.view-code-head > div { display:flex; align-items:center; gap:8px; }
.view-code-head b { font-size:9px; text-transform:uppercase; color:#94a3b8; }
.view-code-head span { font-size:12px; font-weight:800; }
.view-code { margin:0; max-height:50vh; overflow:auto; padding:14px; color:#e5e7eb; background:#0b1220; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; white-space:pre; tab-size:2; }
.view-task-status.done { text-decoration:line-through; opacity:.7; }
html[data-theme="dark"] .view-code-block { border-color:#334155; }
html[data-theme="dark"] .view-code-head { background:#111827; }

@media(max-width:800px){
  .code-editor-surface { height:220px; }
  .code-editor-toolbar select { min-width:130px; }
}
/* Hierarquia e gestão de compartilhamentos */
.group-body > .group { position: relative; left:auto!important; top:auto!important; width:100%; min-width:0; min-height:150px; }
.organization-body > .organization { position:relative; left:auto!important; top:auto!important; width:100%; min-width:0; min-height:150px; margin-bottom:10px; }
.organization-body > .organization .organization-body { padding:10px; }
.analytics-toolbar { display:flex; justify-content:flex-end; margin-bottom:12px; }
.analytics-toolbar label { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; }
.analytics-toolbar select,.share-edit-mode,.share-edit-expiration { border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:8px; padding:7px 9px; font:inherit; }
.analytics-click { width:100%; border:1px solid var(--border); background:transparent; color:inherit; cursor:pointer; text-align:left; }
.analytics-click:hover,.analytics-detail-row:hover { background:#eef2ff; }
.analytics-details { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.analytics-details h3 { margin:0 0 8px; font-size:13px; }
.analytics-detail-row { width:100%; display:grid; gap:3px; text-align:left; border:1px solid var(--border); background:transparent; color:inherit; border-radius:8px; padding:9px 10px; cursor:pointer; margin-bottom:6px; }
.analytics-detail-row span,.analytics-detail-row small { color:var(--muted); }
.shares-modal { width:min(980px,calc(100vw - 28px)); }
.shares-content { display:grid; gap:10px; max-height:65vh; overflow:auto; }
.share-management-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--bg); }
.share-management-main { display:grid; gap:4px; min-width:0; }
.share-management-main strong { font-size:12px; }
.share-management-main span,.share-management-main small,.share-management-main a { font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.share-management-main a { color:var(--primary); }
.share-management-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; }
.share-edit-expiration { min-width:190px; }
@media(max-width:760px){ .share-management-row{grid-template-columns:1fr}.share-management-actions{justify-content:stretch}.share-management-actions>*{flex:1}.analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
html[data-theme="dark"] .analytics-click:hover,html[data-theme="dark"] .analytics-detail-row:hover { background:#1e293b; }

/* ================================================================
   Hierarquia: componentes aninhados ocupam toda a largura disponível
   do contêiner pai. Isso evita que um grupo/organização filho force
   overflow horizontal ou fique espremido em uma coluna.
   ================================================================ */
#sharesDialog {
  width: min(980px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: min(90vh, 920px);
  padding: 0;
  overflow: hidden;
}
#sharesDialog > .shares-modal {
  width: 100%;
  max-width: none;
  min-width: 0;
  max-height: min(90vh, 920px);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}
#sharesDialog .shares-content,
#sharesDialog .share-management-row,
#sharesDialog .share-management-main,
#sharesDialog .share-management-actions {
  min-width: 0;
  max-width: 100%;
}
#sharesDialog .share-management-row {
  grid-template-columns: minmax(0, 1fr);
}
#sharesDialog .share-management-actions {
  display: grid;
  grid-template-columns: minmax(145px, 180px) minmax(190px, 220px) auto auto;
  justify-content: stretch;
  align-items: center;
}
#sharesDialog .share-management-actions > * {
  min-width: 0;
  max-width: 100%;
}
#sharesDialog .share-edit-expiration {
  width: 100%;
  min-width: 0;
}
#sharesDialog .share-expiration-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
#sharesDialog .share-expiration-field span {
  line-height: 1.2;
}
#sharesDialog .share-management-main a {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.share-password-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}
.group-body > .group {
  grid-column: 1 / -1;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
}
.organization-body > .organization {
  grid-column: 1 / -1;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  margin-bottom: 0;
}
.organization-body > .group {
  min-width: 0 !important;
  max-width: 100%;
}
.group-header-main,
.organization-header-main {
  min-width: 0;
  max-width: 100%;
}
.group-header-main .group-title,
.organization-header-main .organization-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media(max-width: 760px) {
  #sharesDialog .share-management-actions {
    grid-template-columns: 1fr 1fr;
  }
  #sharesDialog .share-management-actions .share-save,
  #sharesDialog .share-management-actions .share-delete {
    width: 100%;
  }
}
@media(max-width: 480px) {
  #sharesDialog > .shares-modal { padding: 16px; }
  #sharesDialog .share-management-actions { grid-template-columns: 1fr; }
}


/* ================================================================
   Hierarquia 2.4 — layout determinístico para itens aninhados
   ================================================================ */
.group-body.layout-horizontal,
.organization-body.layout-horizontal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
}
/* Um único filho não deve ocupar uma coluna de uma grade de duas colunas.
   Ele usa toda a largura interna do contêiner pai. */
.group-body.layout-single,
.organization-body.layout-single {
  grid-template-columns: minmax(0, 1fr);
}
.group-body.layout-single > .group,
.organization-body.layout-single > .organization,
.organization-body.layout-single > .group {
  grid-column: 1 / -1 !important;
}
.group-body.layout-vertical,
.organization-body.layout-vertical {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
}
.group-body > .group,
.organization-body > .organization {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.organization-body.layout-horizontal > .organization,
.organization-body.layout-horizontal > .group,
.organization-body.layout-vertical > .organization,
.organization-body.layout-vertical > .group {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.group-body.layout-vertical > .group,
.organization-body.layout-vertical > .organization {
  grid-column: 1 / -1 !important;
}
.group-body > .group .group-body,
.organization-body > .group .group-body,
.organization-body > .organization .organization-body {
  min-width: 0;
  overflow: hidden;
}
.order-layout-field { margin: 10px 0 0; }
.order-layout-field select { max-width: 320px; }

/* Compartilhamentos: preserva o layout anterior, mas impede qualquer
   overflow horizontal e deixa a área de gestão responsiva. */
#sharesDialog { width:min(900px,calc(100vw - 28px)); max-width:calc(100vw - 28px); }
#sharesDialog > .shares-modal { overflow-x:hidden; }
#sharesDialog .share-management-row { grid-template-columns:minmax(0,1fr); }
#sharesDialog .share-management-actions { grid-template-columns:minmax(145px,180px) minmax(180px,220px) auto auto; }
.share-password-editor { display:none; align-items:center; gap:6px; min-width:0; }
.share-password-editor.visible { display:flex; }
.share-password-editor input { width:180px!important; min-width:0; margin:0!important; }
.share-password-status { white-space:nowrap; }
@media(max-width:760px){
  #sharesDialog .share-management-actions { grid-template-columns:1fr 1fr; }
  .share-password-editor { grid-column:1 / -1; }
  .share-password-editor input { width:100%!important; flex:1; }
  .group-body.layout-horizontal,
  .organization-body.layout-horizontal { grid-template-columns:1fr; }
}

.share-password-control { display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0; }
.share-password-editor { display:none; align-items:center; gap:6px; min-width:0; }
.share-password-editor.visible { display:flex; }
.share-password-editor input { width:180px!important; min-width:120px; margin:0!important; }
.share-password-status { font-size:10px; color:var(--muted); white-space:nowrap; }
@media(max-width:760px){ .share-password-control { grid-column:1 / -1; } .share-password-editor { width:100%; } .share-password-editor input { flex:1; width:auto!important; } }

/* ================================================================
   Avisos do Mural
   Barra fixa no canto inferior esquerdo, imediatamente acima do
   Grid/Snap/Objetos/Guias, sem participar do canvas.
   ================================================================ */
.announcement-bar {
  position: fixed;
  left: 12px;
  bottom: 66px;
  z-index: 38;
  width: min(390px, calc(100vw - 24px));
  max-height: min(60vh, 520px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: none;
}
.announcement-item {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--ui-border-strong, var(--border));
  border-radius: 12px;
  background: var(--ui-surface, #fff);
  color: var(--ui-text, var(--text));
  box-shadow: 0 14px 34px rgba(15,23,42,.18);
  box-sizing: border-box;
  pointer-events: auto;
}
.announcement-main { min-width: 0; flex: 1; }
.announcement-title { font-size: 12px; font-weight: 850; line-height: 1.3; }
.announcement-message { margin-top: 4px; font-size: 11px; line-height: 1.5; color: var(--ui-muted, var(--muted)); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 92px; overflow-y: auto; overflow-x: hidden; }
.announcement-actions { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.announcement-link { color: var(--ui-primary, var(--primary)); font-size: 11px; font-weight: 800; white-space: nowrap; text-decoration: none; }
.announcement-link:hover { text-decoration: underline; }
.announcement-close { width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--ui-muted, var(--muted)); cursor: pointer; font-size: 18px; line-height: 1; }
.announcement-close:hover { background: var(--ui-surface-soft, #f1f5f9); color: var(--ui-text, var(--text)); }
.announcement-modal { width: min(760px, calc(100vw - 28px)); max-height: min(90vh, 900px); overflow: auto; }
.announcement-form { display: grid; gap: 10px; }
.announcement-form label { display: grid; gap: 5px; font-size: 11px; font-weight: 750; }
.announcement-form input, .announcement-form textarea { width: 100%; border: 1px solid var(--ui-border, var(--border)); border-radius: 9px; padding: 9px 10px; background: var(--ui-surface, #fff); color: var(--ui-text, var(--text)); font: inherit; box-sizing: border-box; }
.announcement-form textarea { resize: vertical; min-height: 90px; }
.announcement-campaigns-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ui-border, var(--border)); }
.announcement-campaigns-head { margin-bottom: 9px; }
.announcement-campaigns-head h3 { margin: 0 0 3px; font-size: 13px; }
.announcement-campaign-list { display: grid; gap: 7px; max-height: 300px; overflow: auto; }
.announcement-campaign-row { width: 100%; min-width: 0; display: flex; align-items: stretch; gap: 6px; text-align: left; border: 1px solid var(--ui-border, var(--border)); border-radius: 9px; padding: 0; background: var(--ui-surface-soft, #f8fafc); color: var(--ui-text, var(--text)); overflow: hidden; box-sizing: border-box; }
.announcement-campaign-report { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.announcement-campaign-report:hover { background: var(--ui-surface-hover, #eef2ff); }
.announcement-campaign-delete { flex: 0 0 34px; align-self: stretch; border: 0; border-left: 1px solid var(--ui-border, var(--border)); border-radius: 0; background: transparent; color: var(--ui-muted, var(--muted)); cursor: pointer; font-size: 18px; line-height: 1; }
.announcement-campaign-delete:hover { background: rgba(239,68,68,.12); color: #ef4444; }
.announcement-campaign-main { min-width: 0; display: grid; gap: 3px; }
.announcement-campaign-main strong { font-size: 11px; overflow-wrap: anywhere; }
.announcement-campaign-main small { color: var(--ui-muted, var(--muted)); font-size: 10px; }
.announcement-campaign-count { min-width: 55px; text-align: center; display: grid; gap: 2px; }
.announcement-campaign-count strong { font-size: 17px; }
.announcement-campaign-count small { color: var(--ui-muted, var(--muted)); font-size: 9px; }
.announcement-analytics-tile { width: 100%; border: 1px solid var(--border); text-align: left; cursor: pointer; color: inherit; font: inherit; }
.announcement-analytics-tile:hover { background: #eef2ff; }
html[data-theme="dark"] .announcement-item { background: var(--ui-surface, #0f172a); color: var(--ui-text, #f8fafc); box-shadow: 0 18px 40px rgba(0,0,0,.38); }
html[data-theme="dark"] .announcement-message, html[data-theme="dark"] .announcement-campaign-main small, html[data-theme="dark"] .announcement-campaign-count small { color: var(--ui-muted, #94a3b8); }
html[data-theme="dark"] .announcement-campaign-row { background: #111827; color: #f8fafc; }
html[data-theme="dark"] .announcement-campaign-row:hover, html[data-theme="dark"] .announcement-analytics-tile:hover { background: #1e293b; }
@media (max-width: 800px) {
  .announcement-bar { left: 10px; bottom: 88px; width: min(390px, calc(100vw - 20px)); max-height: 55vh; }
  .announcement-modal { width: calc(100vw - 20px); }
}

/* ================================================================
   Ajuste estrutural — modal de Avisos do Mural
   O dialog pai define a largura real; o conteúdo interno nunca pode
   criar overflow horizontal. A rolagem fica somente no conteúdo vertical.
   ================================================================ */
#announcementDialog {
  width: min(760px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(90vh, 920px);
  padding: 0;
  overflow: hidden;
}

#announcementDialog > .announcement-modal {
  width: 100%;
  max-width: none;
  min-width: 0;
  max-height: min(90vh, 920px);
  margin: 0;
  padding: 22px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

#announcementDialog .modal-head,
#announcementDialog .modal-head > div,
#announcementDialog .announcement-form,
#announcementDialog .announcement-campaigns-section,
#announcementDialog .announcement-campaigns-head {
  min-width: 0;
  max-width: 100%;
}

#announcementDialog .modal-head > div,
#announcementDialog .announcement-campaigns-head {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#announcementDialog .announcement-form input,
#announcementDialog .announcement-form textarea,
#announcementDialog .announcement-form select {
  min-width: 0;
  max-width: 100%;
}

#announcementDialog .announcement-form textarea {
  overflow-x: hidden;
  overflow-y: auto;
}

#announcementDialog .modal-actions {
  min-width: 0;
}

#announcementDialog .modal-actions > div {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#announcementDialog .announcement-campaign-list {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#announcementDialog .announcement-campaign-row {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 800px) {
  #announcementDialog .announcement-campaign-report {
    gap: 8px;
  }

  #announcementDialog .announcement-campaign-main small {
    overflow-wrap: anywhere;
  }

  #announcementDialog .announcement-campaign-count {
    min-width: 42px;
  }

  #announcementDialog {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  #announcementDialog > .announcement-modal {
    max-height: calc(100vh - 20px);
    padding: 18px;
  }
}

.reminder-option{display:flex;align-items:center;gap:10px;margin:12px 0;padding:10px;border:1px dashed var(--border);border-radius:9px;background:rgba(248,250,252,.7)}
.reminder-option label{margin:0!important;display:flex;align-items:center;gap:7px}
.reminder-option .muted{font-size:11px}
.reminder-modal{width:min(760px,calc(100vw - 30px))}
.reminder-contact-actions{display:flex;justify-content:flex-end;margin-top:-4px}
.reminder-preview-note{font-size:11px;line-height:1.5;margin-top:4px}
.slack-contacts-modal{width:min(760px,calc(100vw - 30px))}
.contact-form{display:grid;gap:10px}
.slack-contacts-list{display:grid;gap:7px;margin-top:16px;max-height:320px;overflow:auto}
.slack-contact-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--border);border-radius:9px;background:#fff}
.slack-contact-row small{display:block;color:var(--muted)}
.slack-contact-actions{display:flex;gap:5px}

/* ================================================================
   Lembretes Slack — tema escuro e overflow
   ================================================================ */
#reminderDialog,
#slackContactsDialog,
#viewDialog,
#reminderCenterDialog {
  width: min(760px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: min(90vh, 920px);
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#reminderDialog > .reminder-modal,
#slackContactsDialog > .slack-contacts-modal,
#viewDialog > .view-modal,
#reminderCenterDialog > .reminder-center-modal {
  width: 100%;
  max-width: none;
  min-width: 0;
  max-height: min(90vh, 920px);
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

#reminderDialog > .reminder-modal,
#slackContactsDialog > .slack-contacts-modal,
#reminderCenterDialog > .reminder-center-modal {
  min-width: 0;
}

#reminderDialog .modal-head,
#reminderDialog label,
#reminderDialog .modal-actions,
#slackContactsDialog .modal-head,
#slackContactsDialog form,
#slackContactsDialog .modal-actions,
#slackContactsDialog .slack-contacts-list,
#viewDialog .modal-head,
#viewDialog .view-content,
#viewDialog .modal-actions,
#reminderCenterDialog .modal-head,
#reminderCenterDialog > .reminder-center-modal > p,
#reminderCenterDialog .reminder-center-toolbar,
#reminderCenterDialog .reminder-center-content,
#reminderCenterDialog .modal-actions {
  min-width: 0;
  max-width: 100%;
}

#reminderDialog input,
#reminderDialog textarea,
#reminderDialog select,
#slackContactsDialog input,
#slackContactsDialog select {
  min-width: 0;
  max-width: 100%;
}

#reminderDialog textarea,
#viewDialog .view-content,
#viewDialog .view-reminder-text {
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

#viewDialog .view-content {
  width: 100%;
  box-sizing: border-box;
}

#reminderCenterDialog .reminder-center-modal {
  width: 100%;
  max-width: none;
  max-height: min(90vh, 920px);
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

#reminderCenterDialog .reminder-center-toolbar {
  width: 100%;
  box-sizing: border-box;
}

#reminderCenterDialog .reminder-center-toolbar > * {
  min-width: 0;
  max-width: 100%;
}

#reminderCenterDialog .reminder-center-toolbar label {
  min-width: 0;
  flex: 1 1 auto;
}

#reminderCenterDialog .reminder-center-toolbar select {
  width: 100%;
  max-width: 100%;
}

#reminderCenterDialog .reminder-center-content {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

#reminderCenterDialog .reminder-center-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#reminderCenterDialog .reminder-center-actions {
  min-width: 0;
  max-width: 100%;
}

#reminderCenterDialog .reminder-center-actions .btn {
  flex: 0 1 auto;
}

#reminderCenterDialog .modal-actions {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#viewDialog .view-row {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#viewDialog .view-row > * {
  min-width: 0;
  max-width: 100%;
}

#viewDialog .view-reminder {
  min-width: 0;
  max-width: 100%;
}

#viewDialog .view-reminder-text {
  margin: 7px 0 0;
  font: inherit;
  color: inherit;
  max-width: 100%;
}

.reminder-option {
  min-width: 0;
}

.reminder-option label {
  flex: 0 0 auto;
}

.reminder-option .muted {
  min-width: 0;
  overflow-wrap: anywhere;
}

.slack-contact-row {
  min-width: 0;
}

.slack-contact-row > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.slack-contact-row strong,
.slack-contact-row small {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* O calendário nativo fica legível no tema escuro. Mantemos o campo claro
   para preservar o ícone e a área de seleção de data/hora bem visíveis. */
html[data-theme="dark"] .modal input[type="date"],
html[data-theme="dark"] .modal input[type="datetime-local"] {
  color-scheme: light;
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="dark"] .reminder-option {
  background: #172033;
  border-color: #475569;
  color: #f8fafc;
}

html[data-theme="dark"] .reminder-option .muted,
html[data-theme="dark"] #reminderDialog .reminder-preview-note {
  color: #aebbd0;
}

html[data-theme="dark"] #reminderDialog .modal,
html[data-theme="dark"] #slackContactsDialog .modal {
  background: #111827;
  color: #f8fafc;
}

html[data-theme="dark"] #reminderDialog .modal input:not([type="color"]),
html[data-theme="dark"] #reminderDialog .modal textarea,
html[data-theme="dark"] #reminderDialog .modal select,
html[data-theme="dark"] #slackContactsDialog .modal input:not([type="color"]),
html[data-theme="dark"] #slackContactsDialog .modal select {
  background: #0f172a;
  color: #f8fafc;
  border-color: #334155;
}

html[data-theme="dark"] #slackContactsDialog .slack-contact-row {
  background: #172033;
  border-color: #475569;
  color: #f8fafc;
}

html[data-theme="dark"] #slackContactsDialog .slack-contact-row small {
  color: #cbd5e1;
}

html[data-theme="dark"] #slackContactsDialog .slack-contact-row .btn {
  background: #1e293b;
  color: #f8fafc;
  border-color: #475569;
}

html[data-theme="dark"] #slackContactsDialog .slack-contact-row .btn.danger {
  color: #fca5a5;
  border-color: #7f1d1d;
}

@media (max-width: 800px) {
  #reminderDialog,
  #slackContactsDialog,
  #viewDialog,
  #reminderCenterDialog {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  #reminderDialog > .reminder-modal,
  #slackContactsDialog > .slack-contacts-modal,
  #viewDialog > .view-modal,
  #reminderCenterDialog > .reminder-center-modal {
    max-height: calc(100vh - 20px);
    padding: 18px;
  }
}

/* Lembrete configurado: indicador compacto e visível no próprio componente. */
.reminder-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  font-size: .82em;
  line-height: 1;
  vertical-align: middle;
  filter: saturate(1.15);
}
.view-reminder {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(99,102,241,.06);
}
.view-reminder .view-row:last-child { border-bottom: 0; }
html[data-theme="dark"] .view-reminder {
  background: rgba(99,102,241,.10);
  border-color: #3b4560;
}


/* Central de alertas */
.reminder-center-modal { width:min(900px,calc(100vw - 28px)); }
.reminder-center-toolbar { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:14px 0; }
.reminder-center-toolbar label { display:grid; gap:6px; font-size:12px; font-weight:800; min-width:240px; }
.reminder-center-toolbar select { border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:8px; padding:8px 10px; font:inherit; }
.reminder-center-content { display:grid; gap:9px; max-height:62vh; overflow:auto; min-width:0; }
.reminder-center-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; padding:12px; border:1px solid var(--border); border-radius:11px; background:var(--bg); min-width:0; }
.reminder-center-main { min-width:0; display:grid; gap:4px; }
.reminder-center-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.reminder-center-title strong { font-size:13px; overflow-wrap:anywhere; }
.reminder-center-main > span,.reminder-center-main > small { color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.reminder-center-status { display:inline-flex; align-items:center; border-radius:999px; padding:3px 7px; font-size:10px; font-weight:800; }
.reminder-center-status.active { background:#dcfce7; color:#166534; }
.reminder-center-status.ended { background:#f1f5f9; color:#64748b; }
.reminder-center-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; }
.reminder-center-empty { display:grid; gap:5px; padding:28px 12px; text-align:center; border:1px dashed var(--border); border-radius:11px; color:var(--muted); }
.reminder-center-empty strong { color:var(--text); }
.reminder-analytics-tile { width:100%; border:1px solid var(--border); text-align:left; cursor:pointer; color:inherit; font:inherit; }
.reminder-analytics-tile:hover { background:#eef2ff; }
@media(max-width:760px){ .reminder-center-toolbar { align-items:stretch; flex-direction:column; } .reminder-center-toolbar label { min-width:0; } .reminder-center-row { grid-template-columns:1fr; } .reminder-center-actions { justify-content:flex-start; } }
html[data-theme="dark"] .reminder-center-status.active { background:#14532d; color:#bbf7d0; }
html[data-theme="dark"] .reminder-center-status.ended { background:#1e293b; color:#94a3b8; }
html[data-theme="dark"] .reminder-analytics-tile:hover { background:#1e293b; }

/* Seleção múltipla de destinos Slack */
#reminderChannel { min-height: 130px; }
#reminderChannel option { padding: 7px 8px; }
html[data-theme="dark"] #reminderChannel option:checked { background: #dbeafe; color: #111827; }

/* Destinos do lembrete — seleção e ordenação por drag-and-drop */
#reminderChannel {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.reminder-destination-picker { display:grid; gap:9px; margin-top:6px; min-width:0; }
.reminder-destination-add { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; min-width:0; }
.reminder-destination-add select { min-width:0; width:100%; }
.reminder-destination-list { display:grid; gap:7px; min-width:0; }
.reminder-destination-row {
  display:grid;
  grid-template-columns:22px 28px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;
  cursor:grab;
  user-select:none;
}
.reminder-destination-row:active { cursor:grabbing; }
.reminder-destination-row.dragging { opacity:.45; }
.reminder-destination-row.drag-over { border-color:var(--primary); box-shadow:0 0 0 2px rgba(99,102,241,.15); }
.reminder-drag-handle { color:var(--muted); font-size:18px; line-height:1; text-align:center; }
.reminder-destination-order { display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:#eef2ff; color:#4f46e5; font-size:11px; font-weight:800; }
.reminder-destination-info { min-width:0; display:grid; gap:2px; }
.reminder-destination-info strong,.reminder-destination-info small { min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.reminder-destination-info small { color:var(--muted); }
.reminder-destination-remove { padding:5px 9px !important; }
.reminder-destination-empty { padding:12px; border:1px dashed var(--border); border-radius:9px; color:var(--muted); font-size:12px; text-align:center; }
.reminder-recipient-list { display:grid; gap:5px; margin-top:5px; min-width:0; }
.reminder-recipient-item { display:flex; align-items:center; gap:8px; min-width:0; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.55); }
.reminder-recipient-item > div { min-width:0; display:grid; gap:1px; }
.reminder-recipient-item strong,.reminder-recipient-item small { overflow-wrap:anywhere; word-break:break-word; }
.reminder-recipient-item small { color:var(--muted); }
.reminder-recipient-order { display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px; border-radius:6px; background:#eef2ff; color:#4f46e5; font-size:10px; font-weight:800; }
.log-reminder-recipients { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:6px; font-size:11px; min-width:0; }
.log-reminder-recipient { display:inline-flex; padding:4px 7px; border:1px solid var(--border); border-radius:7px; background:rgba(99,102,241,.08); overflow-wrap:anywhere; }
html[data-theme="dark"] .reminder-destination-row { background:#0f172a; border-color:#334155; }
html[data-theme="dark"] .reminder-destination-order,
html[data-theme="dark"] .reminder-recipient-order { background:#1e1b4b; color:#c7d2fe; }
html[data-theme="dark"] .reminder-destination-empty,
html[data-theme="dark"] .reminder-recipient-item { background:#0f172a; border-color:#334155; }
html[data-theme="dark"] .reminder-recipient-item { background:rgba(15,23,42,.7); }
html[data-theme="dark"] .log-reminder-recipient { background:rgba(99,102,241,.14); border-color:#3b4560; }
@media(max-width:600px){
  .reminder-destination-add { grid-template-columns:1fr; }
  .reminder-destination-row { grid-template-columns:20px 26px minmax(0,1fr) auto; }
}

/* Autenticação persistente v2 */
.auth-links{margin-top:10px;text-align:center}.link-btn{border:0;background:transparent;color:var(--accent,#2563eb);cursor:pointer;padding:6px 8px;font:inherit}.password-policy{font-size:.78rem;line-height:1.45;color:var(--muted,#64748b);padding:9px 11px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:var(--surface-soft,#f8fafc)}
#securityDialog{width:min(920px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:min(90vh,920px);padding:0;overflow:hidden;box-sizing:border-box}#securityDialog>.security-modal{width:100%;max-width:none;min-width:0;max-height:min(90vh,920px);box-sizing:border-box;padding:22px;overflow-x:hidden;overflow-y:auto}.security-modal{width:100%;max-width:none;box-sizing:border-box;min-width:0;overflow-x:hidden}.security-summary{padding:12px 14px;border:1px solid var(--border,#e2e8f0);border-radius:12px;margin-bottom:12px;min-width:0;overflow-wrap:anywhere}.security-tabs{display:flex;gap:8px;margin-bottom:12px;min-width:0;flex-wrap:wrap}.security-tabs .active{font-weight:700}.sessions-list{display:grid;gap:8px;max-height:60vh;overflow-y:auto;overflow-x:hidden;padding:0 4px 0 0;min-width:0;width:100%;box-sizing:border-box}.session-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border:1px solid var(--border,#e2e8f0);border-radius:12px;min-width:0;max-width:100%;width:100%;box-sizing:border-box;overflow:hidden}.session-row>div{display:grid;gap:4px;min-width:0;max-width:100%;flex:1}.session-row strong{overflow-wrap:anywhere;word-break:break-word}.session-row span,.session-row small{color:var(--muted,#64748b);overflow-wrap:anywhere;word-break:break-word}.session-row.revoked{opacity:.72}.session-admin-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%;flex:0 0 auto}.security-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-width:0}.security-history-count{color:var(--muted,#64748b)}#securityDialog .modal-actions{min-width:0;gap:12px;flex-wrap:wrap}#securityDialog .modal-actions>.muted{min-width:0;flex:1;overflow-wrap:anywhere}#securityDialog .modal-actions>div{min-width:0}.security-actions .btn{white-space:nowrap}
.session-admin-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

@media(max-width:700px){.security-modal{width:calc(100vw - 20px)}.session-row{align-items:flex-start;flex-direction:column}.session-admin-actions{width:100%;justify-content:flex-start}.security-actions{width:100%}.security-actions .btn{flex:1}}