/*
 * Arquivo: public/assets/css/app.css
 * Pasta: /public/assets/css
 * Projeto: oGerente Universal — v2.2 Fundação + Layout Premium
 * Criado em: 09/06/2026 02:42
 * Modificado em: 09/06/2026 03:08
 * Descrição: Tema premium integrado, inspirado na demo visual recebida e adaptado ao motor PHP.
 */

:root {
  --brand:       #6366f1;
  --brand-2:     #818cf8;
  --brand-glow:  rgba(99,102,241,.25);
  --ok:          #10b981;
  --warn:        #f59e0b;
  --danger:      #ef4444;
  --info:        #3b82f6;
}

[data-theme="dark"] {
  --bg:          #08080f;
  --bg2:         #0f0f1a;
  --surface:     #131320;
  --surface2:    #1a1a2e;
  --surface3:    #22223a;
  --border:      #1e1e30;
  --border2:     #2a2a40;
  --text:        #e4e4f0;
  --text2:       #9898b8;
  --sidebar-bg:  #0a0a14;
  --sidebar-item:#ffffff10;
  --topbar-bg:   rgba(10,10,20,.95);
}

[data-theme="light"] {
  --bg:          #f5f5ff;
  --bg2:         #eeeeff;
  --surface:     #ffffff;
  --surface2:    #f8f8fe;
  --surface3:    #f0f0fc;
  --border:      #e0e0f0;
  --border2:     #d0d0e8;
  --text:        #1a1a2e;
  --text2:       #555578;
  --sidebar-bg:  #0f0f1a;
  --sidebar-item:#ffffff10;
  --topbar-bg:   rgba(245,245,255,.95);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; }

.app-shell {
  display: grid;
  grid-template-rows: 56px 1fr;
  grid-template-columns: 260px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar content";
  min-height: 100vh;
  transition: grid-template-columns .3s ease;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 64px 1fr;
}

.topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-brand {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.5px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 110px;
}

.topbar-brand .accent { color: var(--brand); }

.sidebar-toggle {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: .2s;
  display: flex;
  align-items: center;
}

.sidebar-toggle:hover,
.top-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

.topbar-search {
  flex: 1;
  max-width: 430px;
  position: relative;
  margin: 0 auto;
}

.topbar-search input,
.sidebar-search input,
.mobile-menu-search input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px 8px 38px;
  border-radius: 10px;
  font-size: .9rem;
  outline: none;
  transition: .2s;
}

.topbar-search input:focus,
.sidebar-search input:focus,
.mobile-menu-search input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.search-icon,
.sidebar-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text2);
  font-size: .9rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.top-btn {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 7px 9px;
  border-radius: 8px;
  position: relative;
  transition: .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.top-btn .notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--bg);
}

.avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  border: none;
  color: white;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  transition: .2s;
}

.avatar-btn:hover { transform: scale(1.05); }

.avatar-menu {
  position: absolute;
  top: 50px;
  right: 20px;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  overflow: hidden;
  display: none;
  z-index: 200;
}

.avatar-menu.open { display: block; }

.avatar-menu-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.avatar-menu-header strong {
  display: block;
  font-size: .9rem;
}

.avatar-menu-header small {
  color: var(--text2);
  font-size: .78rem;
}

.avatar-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: .88rem;
  transition: .15s;
}

.avatar-menu a:hover { background: var(--surface2); }
.avatar-menu a.danger { color: var(--danger); }
.avatar-menu .divider { height: 1px; background: var(--border); }

.sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.sidebar-search {
  position: relative;
  margin: 0 2px 8px;
}

.app-shell.sidebar-collapsed .sidebar-search {
  display: none;
}

.sidebar-group-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text2);
  padding: 12px 10px 4px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity .2s;
}

.app-shell.sidebar-collapsed .sidebar-group-label {
  opacity: 0;
  height: 0;
  padding: 0;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  color: var(--text2);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  transition: .15s;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.sidebar-item:hover {
  background: var(--sidebar-item);
  color: var(--text);
}

.sidebar-item.active {
  background: var(--brand);
  color: white;
  box-shadow: 0 4px 16px var(--brand-glow);
}

.sidebar-item i {
  font-size: 1.1rem;
  flex-shrink: 0;
  min-width: 22px;
  text-align: center;
}

.sidebar-item span { transition: opacity .2s; }

.app-shell.sidebar-collapsed .sidebar-item span:not(.sidebar-badge) {
  opacity: 0;
  pointer-events: none;
}

.app-shell.sidebar-collapsed .sidebar-item::after {
  content: attr(data-label);
  position: fixed;
  left: 72px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: .82rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 300;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.app-shell.sidebar-collapsed .sidebar-item:hover::after {
  opacity: 1;
}

.sidebar-bottom {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.sidebar-badge {
  margin-left: auto;
  background: var(--brand);
  color: #fff;
  font-size: .65rem;
  padding: 2px 7px;
  border-radius: 99px;
}

.danger-soft {
  color: var(--danger) !important;
  opacity: .85;
}

.content {
  grid-area: content;
  padding: 24px;
  min-width: 0;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 1.4rem;
  font-weight: 700;
}

.page-sub {
  color: var(--text2);
  font-size: .9rem;
}

.action-btn {
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: white;
  border-radius: 18px;
  padding: 26px;
  margin-bottom: 24px;
  box-shadow: 0 8px 36px var(--brand-glow);
}

.hero h1 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.hero p {
  color: rgba(255,255,255,.88);
  max-width: 850px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: .2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand);
}

.stat-card.ok::before { background: var(--ok); }
.stat-card.warn::before { background: var(--warn); }
.stat-card.info::before { background: var(--info); }

.stat-icon {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}

.stat-label {
  color: var(--text2);
  font-size: .82rem;
  margin-top: 4px;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: .8rem;
}

.stat-trend.up { color: var(--ok); }
.stat-trend.neutral { color: var(--text2); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
}

.card-action {
  color: var(--brand);
  font-size: .82rem;
  text-decoration: none;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.table th {
  text-align: left;
  padding: 10px 14px;
  color: var(--text2);
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}

.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--surface2); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
}

.badge-ok { background: rgba(16,185,129,.15); color: var(--ok); }
.badge-warn { background: rgba(245,158,11,.15); color: var(--warn); }
.badge-danger { background: rgba(239,68,68,.15); color: var(--danger); }
.badge-info { background: rgba(99,102,241,.15); color: var(--brand); }

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--surface2);
  border-radius: 10px;
}

.task-item input[type=checkbox] {
  accent-color: var(--brand);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.task-item span.main {
  flex: 1;
  font-size: .88rem;
}

.status-list {
  display: grid;
  gap: 10px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: var(--surface2);
}

.status-item.ok { border-left: 6px solid var(--ok); }
.status-item.fail { border-left: 6px solid var(--danger); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 13px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}

.palette-panel {
  position: fixed;
  right: 0;
  top: 56px;
  width: 290px;
  height: calc(100vh - 56px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 20px;
  transform: translateX(100%);
  transition: .3s ease;
  z-index: 90;
  overflow-y: auto;
}

.palette-panel.open { transform: translateX(0); }

.palette-panel h3 {
  font-size: .95rem;
  margin-bottom: 16px;
}

.pal-section { margin-bottom: 20px; }

.pal-label {
  font-size: .78rem;
  color: var(--text2);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.palette-colors {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.pal-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: .2s;
}

.pal-dot:hover,
.pal-dot.active {
  border-color: var(--text);
  transform: scale(1.15);
}

.theme-switch {
  display: flex;
  gap: 8px;
}

.theme-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: .85rem;
  cursor: pointer;
  transition: .2s;
}

.theme-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}

.pal-note {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.pal-note small { color: var(--text2); }

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  height: 62px;
  z-index: 100;
}

.bottom-nav-inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
}

.bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text2);
  text-decoration: none;
  font-size: .65rem;
  padding: 6px 12px;
  border-radius: 10px;
  transition: .15s;
  border: none;
  background: transparent;
  cursor: pointer;
}

.bnav-item i { font-size: 1.3rem; }
.bnav-item.active { color: var(--brand); }

.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

.mobile-menu-overlay.open {
  display: flex;
}

.mobile-menu-search input {
  padding: 12px 16px;
  margin-bottom: 20px;
}

.mobile-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.mob-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--surface);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  font-size: .72rem;
  text-align: center;
  transition: .15s;
}

.mob-item i {
  font-size: 1.6rem;
  color: var(--brand);
}

.mob-item:hover { background: var(--surface2); }

.mobile-menu-close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 1.5rem;
  cursor: pointer;
  margin-bottom: 16px;
  align-self: flex-end;
}

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }

  .sidebar {
    display: none;
  }

  .content {
    padding: 16px;
    padding-bottom: 80px;
  }

  .bottom-nav {
    display: block;
  }

  .topbar-search {
    display: none;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .palette-panel {
    width: 88vw;
  }

  .page-header .action-btn {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .cards-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .mobile-menu-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .topbar-brand {
    min-width: auto;
  }
}


/*
 * Complementos do Lote 03 — Usuários, Papéis e Permissões
 * Modificado em: 09/06/2026 04:32
 */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: .82rem;
  color: var(--text2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.field input,
.field select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 12px;
  border-radius: 12px;
  outline: none;
}

.field input:focus,
.field select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}

.secondary-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
}

.alert {
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.alert.fail {
  background: rgba(239,68,68,.12);
  color: var(--danger);
  border-color: rgba(239,68,68,.22);
}

.subcard {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0;
}

.subcard h2 {
  font-size: 1rem;
  margin-bottom: 12px;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.check-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
}

.check-card input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

.check-card span {
  font-weight: 700;
}

.check-card small {
  color: var(--text2);
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.mini-btn {
  padding: 6px 9px;
  font-size: .76rem;
}

.inline-password {
  max-width: 120px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 8px;
  border-radius: 9px;
}

@media(max-width: 760px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .table-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .inline-password {
    max-width: 100%;
    width: 100%;
  }
}


/*
 * Complementos do Lote 04 — Menu, Paleta e Dashboard
 * Modificado em: 09/06/2026 05:12
 */

.table-input {
  width: 100%;
  min-width: 110px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 9px;
  border-radius: 10px;
  outline: none;
}

.table-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.small-number {
  max-width: 90px;
}

.alert.ok {
  background: rgba(16,185,129,.12);
  color: var(--ok);
  border-color: rgba(16,185,129,.22);
}

input[type="color"] {
  min-height: 44px;
  padding: 4px !important;
  cursor: pointer;
}

@media(max-width: 760px) {
  .table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}


/*
 * Complementos do Lote 05 — Campos Dinâmicos e Cadastros Universais
 * Modificado em: 09/06/2026 05:54
 */

.field textarea,
textarea.table-input {
  width: 100%;
  min-height: 92px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 12px;
  border-radius: 12px;
  outline: none;
  resize: vertical;
  font-family: inherit;
}

.field small {
  color: var(--text2);
  font-size: .78rem;
}

.inline-form {
  max-width: 420px;
}

.dynamic-hint {
  color: var(--text2);
  font-size: .9rem;
}

@media(max-width: 760px) {
  .field textarea,
  textarea.table-input {
    min-height: 80px;
  }
}


/*
 * Complementos do Lote 06 — Logs, Notificações, Aprovações e JAI
 * Modificado em: 09/06/2026 06:41
 */

.notification-list {
  display: grid;
  gap: 12px;
}

.notification-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface2);
}

.notification-item.unread {
  border-left: 5px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface2));
}

.notification-item p {
  margin: 4px 0;
  color: var(--text);
}

.notification-item small {
  color: var(--text2);
}

.approval-actions {
  display: grid;
  gap: 8px;
}

.badge-warn {
  background: rgba(245,158,11,.15);
  color: var(--warn);
}

@media(max-width: 760px) {
  .notification-item {
    flex-direction: column;
  }
}


/*
 * Complementos do Lote 07 — Mensagens Internas e Chat de Equipe
 * Modificado em: 09/06/2026 07:18
 */
.chat-shell { display:grid; grid-template-columns:320px 1fr; gap:18px; min-height:calc(100vh - 150px); }
.chat-sidebar { display:grid; gap:14px; align-content:start; }
.chat-box,.chat-header-card,.chat-compose { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; }
.chat-box h2 { font-size:1rem; margin-bottom:12px; }
.chat-channel-list { display:grid; gap:8px; }
.chat-channel { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:12px; color:var(--text); text-decoration:none; background:var(--surface2); border:1px solid var(--border); }
.chat-channel.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.chat-channel b { min-width:22px; height:22px; display:inline-grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.2); font-size:.75rem; }
.chat-main { display:grid; grid-template-rows:auto minmax(360px,1fr) auto; gap:14px; min-width:0; }
.chat-header-card h1 { font-size:1.25rem; margin-bottom:4px; }
.chat-header-card p,.chat-header-card small { color:var(--text2); }
.chat-messages { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px; overflow-y:auto; max-height:60vh; display:flex; flex-direction:column; gap:14px; }
.chat-empty { color:var(--text2); text-align:center; padding:40px 10px; }
.chat-message { display:flex; gap:10px; max-width:78%; }
.chat-message.mine { align-self:flex-end; flex-direction:row-reverse; }
.chat-avatar { width:36px; height:36px; flex:0 0 36px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:.78rem; font-weight:800; }
.chat-bubble { background:var(--surface2); border:1px solid var(--border); border-radius:16px; padding:10px 12px; }
.chat-message.mine .chat-bubble { background:color-mix(in srgb, var(--brand) 18%, var(--surface2)); border-color:color-mix(in srgb, var(--brand) 40%, var(--border)); }
.chat-meta { display:flex; gap:8px; align-items:baseline; margin-bottom:4px; }
.chat-meta small { color:var(--text2); font-size:.74rem; }
.chat-bubble p { margin:0; }
.chat-compose form { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; }
.chat-compose textarea { width:100%; min-height:72px; resize:vertical; background:var(--surface2); border:1px solid var(--border); border-radius:14px; color:var(--text); padding:12px; outline:none; font-family:inherit; }
.chat-compose textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow); }
@media(max-width:900px){ .chat-shell{grid-template-columns:1fr;} .chat-message{max-width:94%;} .chat-compose form{grid-template-columns:1fr;} }

/*
 * Complementos do Lote 08 — Arquivos, Documentos e Ninja Files
 * Modificado em: 09/06/2026 07:56
 */

.file-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.doc-preview {
  white-space: pre-wrap;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 14px;
  padding: 16px;
  line-height: 1.65;
}

input[type="file"] {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 12px;
  border-radius: 12px;
}

@media(max-width: 760px) {
  .file-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

/*
 * Complementos do Lote 09 — Agenda, Tarefas e Relatórios
 * Modificado em: 09/06/2026 08:37
 */

.agenda-list,
.task-list {
  display: grid;
  gap: 12px;
}

.agenda-item,
.task-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface2);
}

.agenda-item p,
.task-item p {
  margin: 4px 0;
  color: var(--text);
}

.agenda-item small,
.task-item small {
  color: var(--text2);
}

.task-item {
  border-left: 5px solid var(--brand);
}

.task-item.priority-urgent {
  border-left-color: var(--danger);
}

.task-item.priority-high {
  border-left-color: var(--warn);
}

.task-item.priority-low {
  border-left-color: var(--ok);
}

@media(max-width: 760px) {
  .agenda-item,
  .task-item {
    flex-direction: column;
  }
}

/* Complementos do Lote 10 — Gerador de Prompts por Categoria */
.prompt-category-card.active{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.prompt-category-card h2{display:flex;gap:8px;align-items:center}.prompt-category-card p{color:var(--text2)}
textarea[name^="vars"]{min-height:88px}

/*
 * Complementos do Lote 11 — Integrações, Webhooks e Mini Zapier
 * Modificado em: 09/06/2026 09:58
 */

.integration-card {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface2);
  margin-bottom: 14px;
}

.integration-form {
  display: grid;
  gap: 10px;
}

.mini-code,
.table-json {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  font-size: .82rem;
}

@media(max-width: 900px) {
  .integration-card {
    grid-template-columns: 1fr;
  }
}

/*
 * Complementos do Lote 12 — Financeiro, Cobranças, PIX e Assinaturas
 * Modificado em: 09/06/2026 10:42
 */

details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--brand);
}

details .mini-code {
  margin-top: 8px;
}

.financial-positive {
  color: var(--ok);
}

.financial-negative {
  color: var(--danger);
}

/*
 * Complementos do Lote 13 — CRM, Clientes, Funil e Atendimento Comercial
 * Modificado em: 09/06/2026 11:26
 */

.crm-kanban {
  display: grid;
  grid-template-columns: repeat(6, minmax(230px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.crm-stage {
  min-width: 230px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-top: 4px solid var(--stage-color);
  border-radius: 16px;
  padding: 12px;
}

.crm-stage-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.crm-stage-head small {
  color: var(--text2);
  text-align: right;
}

.crm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}

.crm-card p {
  margin: 5px 0;
  color: var(--text2);
}

.crm-mini-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.tiny-check {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: .75rem;
  color: var(--text2);
}

@media(max-width: 900px) {
  .crm-kanban {
    grid-template-columns: repeat(6, 260px);
  }
}

/*
 * Complementos do Lote 14 — Estoque, Produtos, Serviços e Ordens de Serviço
 * Modificado em: 09/06/2026 12:08
 */

.inventory-low {
  color: var(--danger);
  font-weight: 800;
}

.inventory-os-total {
  font-size: 1.35rem;
  font-weight: 900;
}

.inline-password {
  max-width: 130px;
}

@media(max-width: 900px) {
  .inventory-os-total {
    font-size: 1.05rem;
  }
}

/*
 * Complementos do Lote 15 — Portal do Cliente, Formulários Públicos e Atendimento Externo
 * Modificado em: 09/06/2026 12:51
 */

.portal-link-box {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .82rem;
}

.external-status-new {
  color: var(--brand);
  font-weight: 800;
}

/*
 * Complementos do Lote 16 — Marketing, Campanhas, Landing Pages e Compartilhamento
 * Modificado em: 09/06/2026 13:34
 */

.marketing-url {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .82rem;
}

.marketing-click-source {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Complementos do Lote 17 — Relatórios Avançados, Exportações e BI Operacional
 * Modificado em: 09/06/2026 14:18
 */

.bi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.bi-card h2 {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bi-items {
  display: grid;
  gap: 8px;
}

.bi-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}

.bi-row span {
  color: var(--text2);
}

.bi-row strong {
  text-align: right;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/*
 * Complementos do Lote 18 — Segurança Avançada, Permissões Finas, Auditoria e LGPD
 * Modificado em: 09/06/2026 15:02
 */

.security-critical {
  color: var(--danger);
  font-weight: 900;
}

.security-warning {
  color: var(--warning);
  font-weight: 800;
}

.security-permission-note {
  border-left: 4px solid var(--brand);
  padding-left: 12px;
  color: var(--text2);
}

/*
 * Complementos do Lote 19 — Performance, Cache, Fila, Cron e Manutenção
 * Modificado em: 09/06/2026 15:51
 */

.maintenance-health-ok {
  color: var(--success);
  font-weight: 900;
}

.maintenance-health-warn {
  color: var(--warning);
  font-weight: 900;
}

.maintenance-cron-url {
  white-space: pre-wrap;
  word-break: break-word;
}

/*
 * Complementos do Lote 20 — Instalador Final, Empacotador de Módulos, Atualizador e Manual Mestre
 * Modificado em: 09/06/2026 16:43
 */

.release-final-ok {
  color: var(--success);
  font-weight: 900;
}

.release-final-warn {
  color: var(--warning);
  font-weight: 900;
}

.release-checklist-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--surface2);
  overflow: hidden;
}

.release-checklist-progress span {
  display: block;
  height: 100%;
  background: var(--brand);
}

/*
 * Complementos da v5.0 — Estabilização, Testes, Hardening e Produção
 * Modificado em: 09/06/2026 17:28
 */

.stability-ok { color: var(--success); font-weight: 900; }
.stability-warning { color: var(--warning); font-weight: 900; }
.stability-fail { color: var(--danger); font-weight: 900; }
.production-progress-bar {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface2);
}
.production-progress-bar span {
  display: block;
  height: 100%;
  background: var(--brand);
}


/* ===== v5.2 — sincronização UX Jéssica ===== */
.table-scroll,.contact-table-scroll,.week-scroll,.month-scroll,.day-scroll{overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.contact-table{min-width:1050px}.name-wide{min-width:230px}.name-edit-link{display:flex;flex-direction:column;text-decoration:none;color:var(--text)}.name-edit-link:hover strong{color:var(--brand);text-decoration:underline}
.name-edit-link small,.field small,.check-card small,.reminder-row small{display:block;color:var(--text2);font-size:.76rem}.icon-col{width:72px;text-align:center}
.icon-square{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.icon-square:hover{border-color:var(--brand);color:var(--brand)}.static-icon{cursor:help}.pager-bar{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-top:14px}
.filter-grid{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.filter-grid .field{min-width:130px;margin:0}.filter-grid .grow{flex:1;min-width:250px}.filter-actions{display:flex;gap:7px}
.notify-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:12px 0 16px}.birthday-strip{display:flex;gap:8px;overflow:auto;padding-bottom:4px}
.birthday-chip{display:flex;gap:8px;align-items:center;padding:9px 12px;border:1px solid var(--border);border-radius:999px;text-decoration:none;white-space:nowrap;background:var(--surface2)}
.birthday-chip strong{color:var(--warn)}.dash-link-card{text-decoration:none;color:inherit}.dash-link-card:hover{transform:translateY(-2px);border-color:var(--brand)}
.reminder-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}.reminder-row a{color:inherit;text-decoration:none}.reminder-row a:hover{color:var(--brand)}
.badge-warn{background:rgba(245,158,11,.18);color:#f59e0b}.badge-ok{background:rgba(16,185,129,.18);color:#10b981}
.agenda-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.view-switch{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}.view-switch a{width:40px;height:38px;display:grid;place-items:center;text-decoration:none;color:var(--text2);border-right:1px solid var(--border)}.view-switch a:last-child{border:0}.view-switch a.active{background:var(--brand);color:#fff}
.agenda-nav{display:flex;justify-content:center;align-items:center;gap:10px}.day-grid{min-width:680px}.day-row{display:grid;grid-template-columns:84px 1fr;border-bottom:1px solid var(--border);min-height:56px}.time-label{padding:8px;text-align:center;font-weight:800;background:var(--surface2);border-right:1px solid var(--border)}.time-label small{display:block;color:var(--text2);font-size:.68rem}.slot-area{padding:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.event-pill{flex:1;min-width:200px;padding:8px 10px;border-radius:9px;background:var(--ec);color:#fff;text-decoration:none;font-size:.78rem}.free-slot{border:1px dashed rgba(16,185,129,.55);background:rgba(16,185,129,.08);color:var(--text2);border-radius:9px;padding:8px 10px;cursor:pointer}.free-slot:hover{background:rgba(16,185,129,.17);color:var(--text)}
.week-grid{width:100%;min-width:1020px;border-collapse:collapse}.week-grid th,.week-grid td{border:1px solid var(--border);padding:5px}.week-grid th{background:var(--surface2);position:sticky;top:0}.week-grid td{height:46px;vertical-align:top}.week-grid td.free{cursor:pointer;background:rgba(16,185,129,.04)}.week-grid td.free:hover{background:rgba(16,185,129,.13)}.week-event{display:block;padding:4px 6px;border-radius:6px;color:#fff;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.month-grid{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));min-width:800px}.month-head{padding:8px;text-align:center;background:var(--surface2);border:1px solid var(--border);font-weight:800}.month-day{min-height:112px;padding:8px;border:1px solid var(--border);text-decoration:none;color:var(--text)}.month-day:hover{background:var(--surface2)}.month-day.other{opacity:.45}.month-day.today{box-shadow:inset 0 0 0 2px var(--brand)}.month-event{display:block;margin-top:4px;padding:3px 5px;border-radius:5px;color:#fff;font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-form-card.highlight{box-shadow:0 0 0 3px var(--brand-glow);border-color:var(--brand)}
.floating-palette{position:fixed;right:22px;bottom:24px;z-index:220}.floating-main{width:54px;height:54px;border-radius:50%;border:0;background:var(--brand);color:#fff;font-size:1.35rem;box-shadow:0 15px 40px rgba(0,0,0,.35);cursor:pointer}.floating-close{position:absolute;right:-5px;top:-9px;width:23px;height:23px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;z-index:2}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea,[data-theme="dark"] .modal,[data-theme="dark"] .dialog,[data-theme="dark"] .popover-card{background-color:var(--surface2);color:var(--text);border-color:var(--border);color-scheme:dark}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--text2);opacity:.8}
@media(max-width:760px){.filter-grid .field{flex:1;min-width:145px}.agenda-actions{width:100%}.contact-table{min-width:980px}}