/* BoxCards design system: camada visual global sem alterar contratos de páginas existentes. */
:root {
  --bc-navy: #082c63;
  --bc-blue: #1e73d8;
  --bc-blue-strong: #105bb7;
  --bc-green: #78b928;
  --bc-green-strong: #4e8e1c;
  --bc-ice: #f6f7fa;
  --bc-ink: #15233b;
  --bc-muted: #61708a;
  --bc-line: rgba(8, 44, 99, .12);
  --bc-panel: rgba(255, 255, 255, .86);
  --bc-shadow-sm: 0 8px 24px rgba(8, 44, 99, .08);
  --bc-shadow: 0 20px 55px rgba(8, 44, 99, .13);
  --bc-radius-sm: .75rem;
  --bc-radius: 1.15rem;
  --bc-radius-lg: 1.6rem;
}

html { scroll-behavior: smooth; }
body.bc-app {
  color: var(--bc-ink);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 4% 0%, rgba(120, 185, 40, .10), transparent 24rem),
    radial-gradient(circle at 100% 8%, rgba(30, 115, 216, .12), transparent 30rem),
    var(--bc-ice);
  text-rendering: optimizeLegibility;
}
body.bc-app::before {
  background-image: linear-gradient(rgba(30,115,216,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(30,115,216,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}
.bc-app .app-container { max-width: 1920px; padding: clamp(.75rem, 2vw, 2rem); }
.bc-app main { min-width: 0; }
.bc-header { position: sticky; top: 0; z-index: 1030; padding: .7rem clamp(.75rem, 2vw, 2rem); transition: padding .25s ease; }
.bc-header .navbar {
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: var(--bc-radius-lg);
  box-shadow: 0 10px 35px rgba(8,44,99,.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  margin: 0 !important;
  padding: .55rem .85rem;
}
.bc-header.is-scrolled .navbar { background: rgba(255,255,255,.94); box-shadow: var(--bc-shadow-sm); }

.bc-brand {
    align-items: center;
    display: inline-flex;
    height: 116px;
    min-width: 146px;
    overflow: hidden;
    width: 146px;
}

    .bc-brand .bc-brand-image {
        display: block;
        height: 130px;
        max-width: none;
        object-fit: contain;
        transform: translate(-29px, -34px);
        width: 173px;
    }

.bc-theme-toggle {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: .4rem;
}

.bc-theme-toggle { align-items: center; cursor: pointer; display: inline-flex; gap: .4rem; }
.bc-theme-icon { align-items: center; background: rgba(8,44,99,.08); border-radius: 50%; display: inline-flex; font-size: 1.05rem; height: 1.45rem; justify-content: center; line-height: 1; width: 1.45rem; }
.bc-app .navbar-toggler { border: 1px solid var(--bc-line); border-radius: .75rem; box-shadow: none; padding: .5rem .6rem; }
.bc-app .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(30,115,216,.16); }
.bc-app .navbar-nav { align-items: center; gap: .2rem; }
.bc-app .navbar .nav-link, .bc-app .navbar .btn-light {
  background: transparent;
  border: 1px solid transparent;
  border-radius: .7rem;
  color: var(--bc-navy) !important;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.2;
  padding: .55rem .7rem;
}
.bc-app .navbar .nav-link:hover, .bc-app .navbar .btn-light:hover, .bc-app .navbar .nav-link:focus, .bc-app .navbar .btn-light:focus { background: rgba(30,115,216,.09); border-color: rgba(30,115,216,.12); color: var(--bc-blue-strong) !important; }
.bc-app .dropdown-menu { border: 1px solid var(--bc-line); border-radius: var(--bc-radius); box-shadow: var(--bc-shadow); padding: .45rem; }
.bc-app .dropdown-item { border-radius: .65rem; color: var(--bc-ink); font-size: .9rem; padding: .55rem .7rem; }
.bc-app .dropdown-item:focus, .bc-app .dropdown-item:hover { background: rgba(30,115,216,.09); color: var(--bc-blue-strong); }
.bc-app .btn { border-radius: .7rem; font-weight: 650; transition: box-shadow .2s ease, transform .2s ease, background .2s ease; }
.bc-app .btn:hover { transform: translateY(-1px); }
.bc-app .btn-primary { background: linear-gradient(135deg, var(--bc-blue), var(--bc-navy)); border-color: var(--bc-navy); box-shadow: 0 8px 18px rgba(8,44,99,.2); }
.bc-app .btn-success { background: linear-gradient(135deg, var(--bc-green), var(--bc-green-strong)); border-color: var(--bc-green-strong); }
.bc-app .btn-outline-primary { border-color: rgba(30,115,216,.4); color: var(--bc-blue-strong); }
.bc-app .form-control, .bc-app .form-select { border-color: var(--bc-line); border-radius: .7rem; color: var(--bc-ink); min-height: 2.6rem; }
.bc-app .form-control:focus, .bc-app .form-select:focus { border-color: var(--bc-blue); box-shadow: 0 0 0 .22rem rgba(30,115,216,.14); }
.bc-app .card { background: var(--bc-panel); border: 1px solid rgba(255,255,255,.76); border-radius: var(--bc-radius); box-shadow: var(--bc-shadow-sm); }

/* Dashboard: cards de KPI preservam os gradientes funcionais definidos pela página. */
.bc-app .card.order-card.bg-c-blue { background: linear-gradient(45deg, #4099ff, #73b4ff) !important; color: #fff !important; }
.bc-app .card.order-card.bg-c-green { background: linear-gradient(45deg, #2ed8b6, #59e0c5) !important; color: #fff !important; }
.bc-app .card.order-card.bg-c-yellow { background: linear-gradient(45deg, #ffb64d, #ffcb80) !important; color: #3b2500 !important; }
.bc-app .card.order-card.bg-c-yellow2 { background: linear-gradient(45deg, #f3ff4d, #ffed4d) !important; color: #243000 !important; }
.bc-app .card.order-card.bg-c-pink { background: linear-gradient(45deg, #ff5370, #ff869a) !important; color: #fff !important; }
.bc-app .card.order-card h1, .bc-app .card.order-card h2, .bc-app .card.order-card h3, .bc-app .card.order-card h4, .bc-app .card.order-card h5, .bc-app .card.order-card h6, .bc-app .card.order-card p, .bc-app .card.order-card span, .bc-app .card.order-card i { color: inherit !important; }
.bc-app .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(30,115,216,.025); --bs-table-hover-bg: rgba(30,115,216,.06); color: var(--bc-ink); }
.bc-app .table > :not(caption) > * > * { border-color: var(--bc-line); padding: .75rem; }
.bc-app .table thead th { color: var(--bc-navy); font-size: .77rem; letter-spacing: .04em; text-transform: uppercase; }
.bc-app .badge { border-radius: 999px; font-weight: 650; padding: .45em .7em; }
.bc-app .footer { background: transparent; border-color: var(--bc-line) !important; color: var(--bc-muted) !important; font-size: .82rem; margin-top: 1rem; padding: 1.15rem clamp(.75rem, 2vw, 2rem); }
.bc-app #statusPanel, .bc-app #miniPopup { border-radius: var(--bc-radius) !important; box-shadow: var(--bc-shadow) !important; overflow: hidden; }
.bc-app #statusPanel .card, .bc-app #miniPopup .card { border: 0; box-shadow: none; }
.bc-app #statusPanel .card-header, .bc-app #miniPopup .card-header { background: linear-gradient(135deg, rgba(30,115,216,.1), rgba(120,185,40,.08)); border-color: var(--bc-line); }

/* Catálogo: os seletores existentes recebem acabamento consistente sem mudar o fluxo de dados. */
.bc-app .product-card { background: rgba(255,255,255,.92); border: 1px solid rgba(8,44,99,.09); border-radius: var(--bc-radius) !important; box-shadow: var(--bc-shadow-sm); overflow: hidden; }
.bc-app .product-card:hover { box-shadow: var(--bc-shadow); transform: translateY(-4px); }
.bc-app .product-card.selected { outline: 3px solid rgba(120,185,40,.35); }
.bc-app .product-image { background: linear-gradient(145deg, #fff, #eef7ff); }

/* Chat: melhora hierarquia e densidade visual mantendo IDs, handlers e SignalR da view. */
.bc-app .chat-root { background: var(--bc-panel); border: 1px solid rgba(255,255,255,.8); border-radius: var(--bc-radius-lg); box-shadow: var(--bc-shadow-sm); overflow: hidden; }
.bc-app .conversations-panel { background: rgba(246,247,250,.8); border-color: var(--bc-line) !important; }
.bc-app .chat-panel { background: transparent; }
.bc-app .messages-box { background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(240,248,255,.85)); border-color: var(--bc-line); border-radius: var(--bc-radius); }
.bc-app #conversations .list-group-item { background: transparent; border-color: var(--bc-line); color: var(--bc-ink); transition: background .2s ease, transform .2s ease; }
.bc-app #conversations .list-group-item:hover { background: rgba(30,115,216,.07); transform: translateX(2px); }
.bc-app #conversations .list-group-item.active, .bc-app .conversation-item.active { background: linear-gradient(90deg, rgba(30,115,216,.14), rgba(120,185,40,.08)); border-left: 3px solid var(--bc-blue); color: var(--bc-navy); }

/* Kanban: área de arrasto com leitura rápida em desktop e rolagem horizontal no touch. */
.bc-app .kanban { padding-bottom: .75rem; scrollbar-color: var(--bc-blue) transparent; }
.bc-app .kanban-column { background: rgba(255,255,255,.72); border: 1px solid rgba(8,44,99,.09); border-radius: var(--bc-radius); box-shadow: var(--bc-shadow-sm); min-width: 255px; padding: .85rem; }
.bc-app .kanban-column h5 { color: var(--bc-navy); font-size: .88rem; font-weight: 750; }
.bc-app .card-kanban { border: 1px solid var(--bc-line); border-radius: .8rem; box-shadow: 0 5px 14px rgba(8,44,99,.06); padding: .75rem; transition: box-shadow .2s ease, transform .2s ease; }
.bc-app .card-kanban:hover { box-shadow: var(--bc-shadow-sm); transform: translateY(-2px); }
.bc-app .kanban-column.drag-over { background: rgba(120,185,40,.12); outline: 2px dashed var(--bc-green); outline-offset: 3px; }

@media (max-width: 991.98px) {
  .bc-header { padding: .45rem .6rem; }
  .bc-header .navbar { border-radius: 1rem; }
  .bc-app .navbar-collapse { background: rgba(255,255,255,.97); border: 1px solid var(--bc-line); border-radius: 1rem; box-shadow: var(--bc-shadow); margin-top: .65rem; padding: .55rem; }
  .bc-app .navbar-nav { align-items: stretch; }
  .bc-app .navbar .nav-link, .bc-app .navbar .btn-light { text-align: left; width: 100%; }
}
@media (max-width: 767.98px) {
  .bc-app .app-container { padding: .65rem; }
  .bc-brand { height: 42px; width: 88px; }
  .bc-brand .bc-brand-image { height: 99px; transform: translate(-22px, -27px); width: 132px; }
  .bc-app .card { border-radius: 1rem; }
  .bc-app .chat-root { border-radius: 1rem; }
  .bc-app .conversations-panel { border-radius: 0 0 1rem 1rem; }
  .bc-app .messages-box { border-radius: .9rem; }
  .bc-app .kanban { overflow-x: auto; scroll-snap-type: x proximity; }
  .bc-app .kanban-column { scroll-snap-align: start; width: min(82vw, 320px) !important; }
  .bc-app #statusPanel { bottom: .65rem !important; left: .65rem; right: .65rem !important; width: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Tema escuro: preserva contraste AA e a hierarquia visual da interface. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body.bc-app {
  --bc-ice: #081221;
  --bc-ink: #edf5ff;
  --bc-muted: #aebdd1;
  --bc-line: rgba(167, 205, 255, .16);
  --bc-panel: rgba(14, 30, 52, .87);
  --bc-shadow-sm: 0 10px 30px rgba(0, 0, 0, .28);
  --bc-shadow: 0 24px 64px rgba(0, 0, 0, .42);
  background: radial-gradient(circle at 4% 0%, rgba(120,185,40,.16), transparent 26rem), radial-gradient(circle at 100% 8%, rgba(30,115,216,.2), transparent 32rem), #081221;
}
html[data-theme="dark"] body.bc-app::before { background-image: linear-gradient(rgba(150,200,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(150,200,255,.035) 1px, transparent 1px); }
html[data-theme="dark"] .bc-header .navbar { background: rgba(8, 24, 45, .76); border-color: rgba(150,205,255,.13); }
html[data-theme="dark"] .bc-header.is-scrolled .navbar { background: rgba(8, 24, 45, .96); }
html[data-theme="dark"] .bc-app .navbar-toggler { border-color: var(--bc-line); filter: invert(1) grayscale(1) brightness(2); }
html[data-theme="dark"] .bc-app .navbar .nav-link, html[data-theme="dark"] .bc-app .navbar .btn-light { color: var(--bc-ink) !important; }
html[data-theme="dark"] .bc-app .navbar .nav-link:hover, html[data-theme="dark"] .bc-app .navbar .btn-light:hover { background: rgba(80,156,255,.16); color: #fff !important; }
html[data-theme="dark"] .bc-theme-icon { background: rgba(120,185,40,.2); color: #c7ef88; }
html[data-theme="dark"] .bc-app .dropdown-menu, html[data-theme="dark"] .bc-app .navbar-collapse { background: #10233d; border-color: var(--bc-line); }
html[data-theme="dark"] .bc-app .dropdown-item { color: var(--bc-ink); }
html[data-theme="dark"] .bc-app .dropdown-item:focus, html[data-theme="dark"] .bc-app .dropdown-item:hover { background: rgba(80,156,255,.17); color: #fff; }
html[data-theme="dark"] .bc-app .card { background: var(--bc-panel); border-color: rgba(150,205,255,.11); }
html[data-theme="dark"] .bc-app .card.order-card.bg-c-blue { background: linear-gradient(45deg, #287bd4, #56a1e8) !important; }
html[data-theme="dark"] .bc-app .card.order-card.bg-c-green { background: linear-gradient(45deg, #159e86, #3cc6b0) !important; }
html[data-theme="dark"] .bc-app .card.order-card.bg-c-yellow { background: linear-gradient(45deg, #d98a27, #f0ae52) !important; color: #211400 !important; }
html[data-theme="dark"] .bc-app .card.order-card.bg-c-yellow2 { background: linear-gradient(45deg, #c8d42a, #e1d53a) !important; color: #202800 !important; }
html[data-theme="dark"] .bc-app .card.order-card.bg-c-pink { background: linear-gradient(45deg, #d93b58, #eb6680) !important; }
html[data-theme="dark"] .bc-app .form-control, html[data-theme="dark"] .bc-app .form-select { background-color: #10233d; border-color: var(--bc-line); color: var(--bc-ink); }
html[data-theme="dark"] .bc-app .form-control::placeholder { color: #93a7c0; }
html[data-theme="dark"] .bc-app .form-select option { background: #10233d; color: var(--bc-ink); }
html[data-theme="dark"] .bc-app .table { --bs-table-color: var(--bc-ink); --bs-table-striped-color: var(--bc-ink); --bs-table-hover-color: #fff; --bs-table-striped-bg: rgba(80,156,255,.07); --bs-table-hover-bg: rgba(80,156,255,.13); }
html[data-theme="dark"] .bc-app .table thead th { color: #c9ddfa; }
html[data-theme="dark"] .bc-app .product-card { background: linear-gradient(145deg, rgba(18,42,70,.97), rgba(12,27,47,.97)); border-color: var(--bc-line); }
html[data-theme="dark"] .bc-app .product-image { background: linear-gradient(145deg, #173858, #0c1e34); }
html[data-theme="dark"] .bc-app .chat-root { border-color: rgba(150,205,255,.12); }
html[data-theme="dark"] .bc-app .conversations-panel { background: rgba(9,24,43,.82); }
html[data-theme="dark"] .bc-app .messages-box { background: linear-gradient(145deg, rgba(17,42,71,.96), rgba(9,25,45,.95)); }
html[data-theme="dark"] .bc-app #conversations .list-group-item { color: var(--bc-ink); }
html[data-theme="dark"] .bc-app #conversations .list-group-item:hover { background: rgba(80,156,255,.12); }
html[data-theme="dark"] .bc-app #conversations .list-group-item.active, html[data-theme="dark"] .bc-app .conversation-item.active { background: linear-gradient(90deg, rgba(30,115,216,.31), rgba(120,185,40,.16)); color: #fff; }
html[data-theme="dark"] .bc-app .kanban-column { background: rgba(12,30,53,.88); border-color: var(--bc-line); }
html[data-theme="dark"] .bc-app .kanban-column h5 { color: #d8e8ff; }
html[data-theme="dark"] .bc-app .card-kanban { background: #102742; border-color: var(--bc-line); color: var(--bc-ink); }
html[data-theme="dark"] .bc-app .text-muted { color: var(--bc-muted) !important; }
html[data-theme="dark"] .bc-app .footer { border-color: var(--bc-line) !important; }
html[data-theme="dark"] .bc-app #statusPanel .card-header, html[data-theme="dark"] .bc-app #miniPopup .card-header { background: linear-gradient(135deg, rgba(30,115,216,.25), rgba(120,185,40,.15)); }

/* 25/09/2026 imagens conforme o tema (claro/escuro): use as classes bc-logo-light e bc-logo-dark */
html:not([data-theme="dark"]) .bc-logo-dark { display: none !important; }
html[data-theme="dark"] .bc-logo-light { display: none !important; }

/* 25/09/2026 tema escuro: textos dos popups em branco (antes ficavam escuros sobre fundo escuro).
   Vale para o aviso flutuante (#miniPopup, usado pelo chat em "Nova mensagem"), o painel de status,
   janelas modais, menus suspensos, popovers e toasts. */
html[data-theme="dark"] .bc-app #miniPopup .card,
html[data-theme="dark"] .bc-app #miniPopup .card-header,
html[data-theme="dark"] .bc-app #miniPopup .card-body,
html[data-theme="dark"] .bc-app #miniPopup #miniPopupTitle,
html[data-theme="dark"] .bc-app #miniPopup #miniPopupMessage,
html[data-theme="dark"] .bc-app #statusPanel,
html[data-theme="dark"] .bc-app #statusPanel .card-header,
html[data-theme="dark"] .bc-app #statusPanel .card-body,
html[data-theme="dark"] .bc-app .modal-content,
html[data-theme="dark"] .bc-app .modal-title,
html[data-theme="dark"] .bc-app .dropdown-menu,
html[data-theme="dark"] .bc-app .dropdown-item-text,
html[data-theme="dark"] .bc-app .popover,
html[data-theme="dark"] .bc-app .popover-body,
html[data-theme="dark"] .bc-app .toast { color: #fff; }
html[data-theme="dark"] .bc-app .modal-content { background: #10233d; border-color: var(--bc-line); }
/* botão X (fechar) visível no fundo escuro */
html[data-theme="dark"] .bc-app #miniPopup .btn-close,
html[data-theme="dark"] .bc-app .modal-content .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }