:root {
  --mos-canvas: #0d100f;
  --mos-shell: #121614;
  --mos-surface: #181d1a;
  --mos-raised: #202621;
  --mos-line: rgba(224, 230, 222, .14);
  --mos-line-strong: rgba(224, 230, 222, .25);
  --mos-text: #f1f4ef;
  --mos-muted: #9ea8a0;
  --mos-yellow: #e1bf36;
  --mos-blue: #62a8d7;
  --mos-green: #49b978;
  --mos-amber: #e6a23c;
  --mos-red: #e05a56;
  --mos-radius: 7px;
  --mos-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

#appWrapper { width: 100%; max-width: 100vw; min-width: 0; overflow-x: clip; }
.tiny-sync-drawer:not(.open) { display: none; }

/* A moldura é uma bancada operacional, não uma coleção de cartões soltos. */
.topnav { border-bottom-color: rgba(225, 191, 54, .36) !important; }
.topnav-brand::after { color: #c9b96f !important; content: "OPERATIONAL OS" !important; }
.sidebar-group-toggle { letter-spacing: .055em; text-transform: uppercase; font-size: 10px !important; }
.sidebar-group-items a { border-left: 2px solid transparent; }
.sidebar-group-items a.active { border-left-color: var(--mos-yellow); }
.main-content { background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size: 32px 32px; }

.mos-context-bar {
  min-height: 34px; margin: -7px 0 14px; padding: 6px 10px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--mos-line); border-radius: var(--mos-radius);
  background: rgba(18, 22, 20, .88); color: var(--mos-muted);
  font-size: 11px; letter-spacing: .02em;
}
.mos-context-mark { width: 6px; height: 20px; border-radius: 2px; background: var(--mos-yellow); box-shadow: 0 0 14px rgba(225,191,54,.3); }
.mos-context-domain { color: var(--mos-text); font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.mos-context-separator { color: #59625c; }
.mos-context-page { color: #c7cec8; }
.mos-context-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mos-mono); }
.mos-context-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mos-green); }

/* Cabeçalhos deixam claro o objeto e separam ações principais das utilitárias. */
#pageHoje .page-header, #pageProdutos .page-header, #pageCrm .page-header {
  position: relative; padding-left: 14px !important;
}
#pageHoje .page-header::before, #pageProdutos .page-header::before, #pageCrm .page-header::before {
  content: ""; position: absolute; left: 0; top: 5px; bottom: 14px; width: 4px;
  border-radius: 2px; background: var(--mos-yellow);
}
#pageProdutos .actions, #pageHoje .actions, #pageCrm .actions { align-items: center; }
#pageProdutos .data-card, #pageHoje .data-card, #crmTabRadar .data-card { box-shadow: 0 9px 24px rgba(0,0,0,.16) !important; }
#pageProdutos table :is(td,th), #crmRadarContent { font-variant-numeric: tabular-nums; }
#pageProdutos table td:first-child { font-family: var(--mos-mono); color: #d7c77e; }
#pageHoje #hojeResumo { font-family: var(--mos-mono); }
#crmTabRadar > .data-card { border-top: 2px solid var(--mos-yellow) !important; }
#crmRadarContent .badge { border: 1px solid var(--mos-line-strong); background: var(--mos-raised); color: var(--mos-text); }

/* Central de atenção: cada item comunica severidade, estado e ação. */
#notifDropdown.mos-attention-center {
  top: 52px !important; width: min(440px, calc(100vw - 24px)) !important;
  max-height: min(680px, calc(100vh - 76px)) !important;
  border-radius: 8px !important; border-color: var(--mos-line-strong) !important;
  background: var(--mos-shell) !important; box-shadow: 0 28px 80px rgba(0,0,0,.62) !important;
}
.mos-attention-header { padding: 14px 16px 11px; border-bottom: 1px solid var(--mos-line); display: flex; gap: 12px; align-items: flex-start; }
.mos-attention-title { display: block; color: var(--mos-text); font-size: 15px; }
.mos-attention-subtitle { display: block; margin-top: 3px; color: var(--mos-muted); font-size: 11px; font-weight: 500; }
.mos-attention-header .btn { margin-left: auto; white-space: nowrap; }
#notifList.mos-attention-list { max-height: min(590px, calc(100vh - 150px)) !important; padding: 0 !important; }
.mos-notification {
  position: relative; padding: 12px 16px 12px 17px !important;
  border-bottom: 1px solid var(--mos-line) !important; background: transparent !important;
  transition: background .14s ease, opacity .14s ease;
}
.mos-notification::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--mos-blue); }
.mos-notification:hover, .mos-notification:focus-visible { background: var(--mos-raised) !important; outline: 0; }
.mos-notification.is-read { opacity: .68 !important; }
.mos-notification.is-unread { opacity: 1 !important; }
.mos-notification.is-success::before { background: var(--mos-green); }
.mos-notification.is-warning::before { background: var(--mos-amber); }
.mos-notification.is-critical::before { background: var(--mos-red); }
.mos-notification.is-info::before { background: var(--mos-blue); }
.mos-notification .mos-notif-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--mos-line); border-radius: 5px; font-size: 14px !important; background: var(--mos-raised); }
.mos-notification .mos-notif-title { color: var(--mos-text); font-weight: 730 !important; }
.mos-notification .mos-notif-time { color: var(--mos-muted) !important; font-family: var(--mos-mono); font-size: 10px !important; }
.mos-notification .btn { min-height: 28px; }
#notifBadge { background: var(--mos-red) !important; border: 2px solid var(--mos-shell); font-family: var(--mos-mono); }

/* Piloto Venda: a jornada e a próxima ação comandam a tela. */
body.mi-sales { --accent: var(--mos-yellow); --key: var(--mos-yellow); --ok: var(--mos-green); --danger: var(--mos-red); background: var(--mos-canvas) !important; }
.mi-sales .topbar { border-bottom: 1px solid rgba(225,191,54,.34) !important; background: linear-gradient(180deg,#181c1a,#101311) !important; }
.mi-sales .brand { letter-spacing: -.02em; }
.mi-sales .sale-flow { border: 1px solid var(--mos-line); background: var(--mos-shell); border-radius: var(--mos-radius); padding: 5px; }
.mi-sales .sale-step { border-radius: 5px !important; }
.mi-sales .sale-step.active { background: rgba(225,191,54,.14) !important; color: var(--mos-text) !important; }
.mi-sales .sale-step.active .step-n { background: var(--mos-yellow) !important; color: #171811 !important; }
.mi-sales .sale-smartbar { border: 1px solid var(--mos-line) !important; border-radius: var(--mos-radius) !important; background: #171c19 !important; }
.mi-sales .sale-saveflag { color: #8fbe9f !important; font-family: var(--mos-mono); font-size: 10px !important; }
.mi-sales :is(.card,.sale-review-box,.sale-alertstrip,.sale-timeline) { border-color: var(--mos-line) !important; border-radius: var(--mos-radius) !important; box-shadow: none !important; }
.mi-sales .grid :is(th,td), .mi-sales .num, .mi-sales .val { font-variant-numeric: tabular-nums; }
.mi-sales .grid th { font-family: var(--mos-mono); letter-spacing: .045em; text-transform: uppercase; font-size: 10px !important; }
.mi-sales #nextActionHint { border-left: 3px solid var(--mos-yellow); padding-left: 11px; }
.mi-sales #finishMainBtn { background: var(--mos-yellow) !important; border-color: #efd052 !important; color: #171811 !important; }
.mi-sales .action-row-operations { border-top: 1px solid var(--mos-line); padding-top: 8px; }
.mi-sales .sale-alert.ok { border-left: 3px solid var(--mos-green) !important; }
.mi-sales .sale-alert.warn { border-left: 3px solid var(--mos-amber) !important; }

/* Toasts representam resultado; não usam a mesma cor para tudo. */
.mos-toast { position: fixed; right: 18px; bottom: 20px; z-index: 10050; width: min(390px, calc(100vw - 36px)); padding: 12px 14px; display: grid; grid-template-columns: 4px 1fr auto; gap: 11px; border: 1px solid var(--mos-line-strong); border-radius: 8px; background: #191f1b; color: var(--mos-text); box-shadow: 0 20px 55px rgba(0,0,0,.48); }
.mos-toast-rail { border-radius: 3px; background: var(--mos-blue); }
.mos-toast.is-success .mos-toast-rail { background: var(--mos-green); }
.mos-toast.is-warning .mos-toast-rail { background: var(--mos-amber); }
.mos-toast.is-critical .mos-toast-rail { background: var(--mos-red); }
.mos-toast-title { font-weight: 780; font-size: 13px; }
.mos-toast-message { margin-top: 3px; color: #bdc6bf; font-size: 12px; line-height: 1.4; }
.mos-toast-close { align-self: start; border: 0; background: transparent; color: var(--mos-muted); cursor: pointer; font-size: 17px; }

@media (max-width: 900px) {
  .mos-context-bar { margin-top: -3px; }
  .mos-context-status { display: none; }
  #notifDropdown.mos-attention-center { right: 12px !important; }
}

/* Produtos em notebooks e janelas reduzidas: a bancada se reorganiza sem
   aumentar a largura do shell. Somente a tabela pode rolar horizontalmente. */
@media (max-width: 1600px) {
  body:has(#pageProdutos:not(.hidden)),
  body:has(#pageProdutos:not(.hidden)) .app-layout,
  body:has(#pageProdutos:not(.hidden)) .main-content,
  #pageProdutos,
  #pageProdutos > *,
  #pageProdutos .data-card,
  #pageProdutos .data-card-header,
  #pageProdutos .search-bar { min-width: 0; max-width: 100%; }

  body:has(#pageProdutos:not(.hidden)) .main-content { overflow-x: clip; }
  #pageProdutos > .page-header {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
  }
  #pageProdutos > .page-header .actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
  }
  #pageProdutos > .page-header .actions .btn {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #pageProdutos .data-card > .data-card-header:has(.search-bar) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  #pageProdutos .data-card-header .search-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }
  #pageProdutos .search-bar > * { width: 100% !important; min-width: 0 !important; }
  #pageProdutos .search-bar > :is(.btn-primary, #prodBusca) { grid-column: span 2; }
  #pageProdutos #produtosTableWrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  #pageProdutos #produtosTableWrapper .data-table { min-width: 1040px; }
}

@media (max-width: 1050px) {
  #pageProdutos > .page-header .actions,
  #pageProdutos .data-card-header .search-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pageProdutos > .page-header .actions .btn:nth-child(3) { grid-column: 1 / -1; grid-row: 1; }
  #pageProdutos .search-bar > :is(.btn-primary, #prodBusca, #btnSyncCadastros) { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  #pageProdutos > .page-header .actions { grid-template-columns: 1fr; }
  #pageProdutos > .page-header .actions .btn:nth-child(3) { grid-column: auto; }
  #pageProdutos .data-card-header .search-bar { grid-template-columns: 1fr; }
  #pageProdutos .search-bar > :is(.btn-primary, #prodBusca, #btnSyncCadastros) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mos-notification, .mos-toast { transition: none !important; animation: none !important; }
}