/* Custom Scrollbar */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #09090b; }
    ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.05); }
    ::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

    /* Shadcn Dark Minimal Surface & Cards */
    .glass-panel {
      background: #09090b;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
    }

    .glass-card {
      position: relative;
      background: #0c0c0e;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
      transition: all 0.2s ease-in-out;
    }

    /* Card Base */
    .spotlight-card {
      position: relative;
    }

    /* Shadcn Subtle Hover States */
    .glass-card:hover {
      background: #121215;
      border-color: rgba(255, 255, 255, 0.16);
      box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.6);
    }

    .card-glow-emerald:hover,
    .card-glow-cyan:hover,
    .card-glow-amber:hover,
    .card-glow-purple:hover,
    .card-glow-sky:hover,
    .card-glow-blue:hover,
    .card-glow-rose:hover {
      border-color: rgba(255, 255, 255, 0.2) !important;
      box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.7) !important;
    }

    /* Button Light Sheen Effect */
    .btn-sheen {
      position: relative;
      overflow: hidden;
    }

    /* Shadcn Navigation Tabs (Sidebar) */
    .tab-active {
      position: relative;
      background: #18181b !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      color: #ffffff !important;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
    }
    .tab-active .tab-icon-box {
      background: #27272a !important;
      border-color: rgba(255, 255, 255, 0.15) !important;
      color: #ffffff !important;
    }

    .tab-active-overview,
    .tab-active-pipeline,
    .tab-active-risk,
    .tab-active-inventory,
    .tab-active-pages,
    .tab-active-perfis {
      background: #18181b !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      color: #ffffff !important;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
    }

    .tab-inactive {
      background: transparent;
      border: 1px solid transparent;
      color: #a1a1aa;
      position: relative;
    }
    .tab-inactive:hover {
      background: rgba(255, 255, 255, 0.04);
      color: #f4f4f5;
    }
    .tab-inactive .tab-icon-box {
      background: rgba(255, 255, 255, 0.03);
      border-color: rgba(255, 255, 255, 0.06);
      color: #71717a;
    }
    .tab-inactive:hover .tab-icon-box {
      background: #18181b;
      border-color: rgba(255, 255, 255, 0.1);
      color: #e4e4e7;
    }

    #tab-btn-overview.tab-inactive:hover,
    #tab-btn-pipeline.tab-inactive:hover,
    #tab-btn-risk.tab-inactive:hover,
    #tab-btn-inventory.tab-inactive:hover {
      background: rgba(255, 255, 255, 0.04) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      color: #ffffff !important;
      transform: none !important;
      box-shadow: none !important;
    }

    /* Live Equalizer Audio Wave in Sidebar Telemetry */
    .telemetry-wave {
      display: inline-flex;
      align-items: flex-end;
      gap: 2.5px;
      height: 12px;
    }
    .telemetry-bar {
      width: 2.5px;
      background: #2563EB;
      box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
      border-radius: 2px;
      animation: soundWave 1.2s ease-in-out infinite alternate;
    }
    .telemetry-bar:nth-child(1) { height: 4px; animation-delay: 0.0s; }
    .telemetry-bar:nth-child(2) { height: 11px; animation-delay: 0.2s; }
    .telemetry-bar:nth-child(3) { height: 7px; animation-delay: 0.4s; }
    .telemetry-bar:nth-child(4) { height: 12px; animation-delay: 0.1s; }

    @keyframes soundWave {
      0% { height: 3px; opacity: 0.5; }
      100% { height: 12px; opacity: 1; }
    }

    @keyframes pulseSlow {
      0%, 100% { opacity: 0.9; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(1.04); }
    }
    .animate-pulse-slow {
      animation: pulseSlow 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    /* ========================================================= */
    /* ESTEIRA MECÂNICA & TRILHO OPERACIONAL DE CONTINGÊNCIA     */
    /* ========================================================= */
    @keyframes conveyorTrackMove {
      0% { background-position: 0 0; }
      100% { background-position: 48px 0; }
    }

    .conveyor-tread-belt {
      background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.05) 0px,
        rgba(255, 255, 255, 0.05) 8px,
        rgba(0, 0, 0, 0.45) 8px,
        rgba(0, 0, 0, 0.45) 16px
      );
      background-size: 48px 48px;
      animation: conveyorTrackMove 1.8s linear infinite;
    }

    @keyframes flowChevronPulse {
      0% { opacity: 0.25; transform: translateX(-3px); }
      50% { opacity: 1; transform: translateX(3px); }
      100% { opacity: 0.25; transform: translateX(-3px); }
    }

    .flow-chevron-anim {
      animation: flowChevronPulse 1.4s ease-in-out infinite;
    }

    @keyframes rollerSpinSlow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .roller-wheel-anim {
      animation: rollerSpinSlow 4s linear infinite;
    }

    /* Animação Física Avançada da Esteira & Fluxo de Ativos */
    .conveyor-tread-belt-v2 {
      background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.08) 0px,
        rgba(255, 255, 255, 0.08) 6px,
        rgba(0, 0, 0, 0.7) 6px,
        rgba(0, 0, 0, 0.7) 12px
      );
      background-size: 32px 32px;
      animation: conveyorTrackMove 1s linear infinite;
    }

    @keyframes assetFlowMove {
      0% { left: 2%; opacity: 0; transform: translateY(-50%) scale(0.7); }
      8% { opacity: 1; transform: translateY(-50%) scale(1); }
      92% { opacity: 1; transform: translateY(-50%) scale(1); }
      100% { left: 96%; opacity: 0; transform: translateY(-50%) scale(0.7); }
    }

    .asset-flow-token {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      animation: assetFlowMove 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .asset-flow-token-2 {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      animation: assetFlowMove 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      animation-delay: 2.5s;
    }

    @keyframes laserPulseGlow {
      0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5)); }
      50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.8)); }
    }

    .conveyor-laser-glow {
      animation: laserPulseGlow 2.5s ease-in-out infinite;
    }

    /* Botão WhatsApp com Expansão Suave & Glow ao Hover */
    .btn-whatsapp-copy {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      padding: 0;
      border-radius: 9px;
      background: transparent;
      border: 1px solid transparent;
      color: #25D366;
      font-size: 11px;
      font-weight: 600;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      user-select: none;
      flex-shrink: 0;
      box-shadow: none;
    }
    .btn-whatsapp-copy:hover,
    .btn-whatsapp-copy:focus-visible {
      background: rgba(37, 211, 102, 0.26);
      border-color: rgba(37, 211, 102, 0.7);
      color: #86efac;
      box-shadow: 0 0 20px rgba(37, 211, 102, 0.38), inset 0 1px 0 rgba(255,255,255,0.2);
      padding: 0 10px 0 7px;
      transform: translateY(-1px);
    }
    .btn-whatsapp-copy:active {
      transform: translateY(1px) scale(0.98);
    }
    .btn-whatsapp-copy .btn-icon {
      width: 22px;
      height: 22px;
      object-fit: contain;
      flex-shrink: 0;
      display: block;
    }
    .btn-whatsapp-copy .btn-text {
      max-width: 0;
      opacity: 0;
      margin-left: 0;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      overflow: hidden;
      display: inline-block;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 700;
      color: #86efac;
      line-height: 1;
    }
    .btn-whatsapp-copy:hover .btn-text,
    .btn-whatsapp-copy:focus-visible .btn-text {
      max-width: 160px;
      opacity: 1;
      margin-left: 7px;
    }

    /* ========================================================= */
    /* THEME SYSTEM (LIGHT MODE ADAPTIVE SHADCN PALETTE)         */
    /* ========================================================= */
    html.light {
      background-color: #f4f4f5 !important;
      color: #09090b !important;
    }
    html.light body {
      background-color: #f4f4f5 !important;
      color: #18181b !important;
    }
    html.light ::-webkit-scrollbar-track { background: #f4f4f5; }
    html.light ::-webkit-scrollbar-thumb { background: #d4d4d8; border: 1px solid rgba(0,0,0,0.05); }
    html.light ::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

    /* Superfícies e Paineis */
    html.light .glass-panel {
      background: #ffffff !important;
      border-color: #e4e4e7 !important;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
    }
    html.light .glass-card {
      background: #ffffff !important;
      border-color: #e4e4e7 !important;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
    }
    html.light .glass-card:hover {
      background: #fafafa !important;
      border-color: #d4d4d8 !important;
      box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08) !important;
    }

    /* Sidebar & Top Bar no Light Mode */
    html.light aside {
      background: #fafafa !important;
      border-color: #e4e4e7 !important;
      box-shadow: 4px 0 20px rgba(0,0,0,0.04) !important;
    }
    html.light aside div,
    html.light aside nav {
      border-color: #e4e4e7 !important;
    }
    html.light main {
      background: #f4f4f5 !important;
    }
    html.light header {
      background: #ffffff !important;
      border-color: #e4e4e7 !important;
    }

    /* Tabs da Sidebar */
    html.light .tab-active,
    html.light .tab-active-overview,
    html.light .tab-active-pipeline,
    html.light .tab-active-risk,
    html.light .tab-active-inventory,
    html.light .tab-active-pages,
    .tab-active-perfis {
      background: #ffffff !important;
      border-color: #e4e4e7 !important;
      color: #09090b !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    }
    html.light .tab-active span,
    html.light .tab-active-overview span,
    html.light .tab-active-pipeline span,
    html.light .tab-active-risk span,
    html.light .tab-active-inventory span,
    html.light .tab-active-pages,
    .tab-active-perfis span {
      color: #09090b !important;
    }
    html.light .tab-active .tab-icon-box {
      background: #f4f4f5 !important;
      border-color: #e4e4e7 !important;
      color: #18181b !important;
    }
    html.light .tab-inactive {
      color: #52525b !important;
    }
    html.light .tab-inactive span {
      color: #52525b !important;
    }
    html.light .tab-inactive:hover {
      background: #e4e4e7 !important;
      color: #09090b !important;
    }
    html.light .tab-inactive:hover span {
      color: #09090b !important;
    }
    html.light .tab-inactive .tab-icon-box {
      background: #f4f4f5 !important;
      border-color: #e4e4e7 !important;
      color: #71717a !important;
    }
    html.light .tab-inactive:hover .tab-icon-box {
      background: #d4d4d8 !important;
      border-color: #a1a1aa !important;
      color: #09090b !important;
    }

    /* Barra de Filtros Facetados de Status Operacional no Light Mode */
    html.light #view-inventory .overflow-x-auto.bg-zinc-900\/80 {
      background-color: #e4e4e7 !important;
      border-color: #d4d4d8 !important;
    }
    html.light #view-inventory button[id^="seg-btn-"] {
      color: #52525b !important;
    }
    html.light #view-inventory button[id^="seg-btn-"]:hover {
      background-color: #d4d4d8 !important;
      color: #09090b !important;
    }
    html.light #view-inventory button[id^="seg-btn-"].bg-zinc-800 {
      background-color: #ffffff !important;
      color: #09090b !important;
      border-color: #d4d4d8 !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    }
    html.light #view-inventory button[id^="seg-btn-"] span[id^="seg-count-"] {
      background-color: #f4f4f5 !important;
      color: #18181b !important;
      border: 1px solid #d4d4d8 !important;
    }
    html.light #view-inventory button[id^="seg-btn-"].bg-zinc-800 span[id^="seg-count-"] {
      background-color: #e4e4e7 !important;
      color: #09090b !important;
      border: 1px solid #d4d4d8 !important;
    }

    /* Barra de Filtros de Páginas no Light Mode */
    html.light button[id^="pages-filter-btn-"] {
      color: #52525b !important;
    }
    html.light button[id^="pages-filter-btn-"]:hover {
      background-color: #e4e4e7 !important;
      color: #09090b !important;
    }
    html.light button[id^="pages-filter-btn-"].bg-zinc-800 {
      background-color: #ffffff !important;
      color: #09090b !important;
      border-color: #d4d4d8 !important;
      box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
    }

    /* Textos no Light Mode */
    html.light .text-white { color: #09090b !important; }
    html.light .text-slate-100,
    html.light .text-slate-200,
    html.light .text-zinc-100,
    html.light .text-zinc-200 { color: #18181b !important; }
    html.light .text-slate-300,
    html.light .text-zinc-300 { color: #27272a !important; }
    html.light .text-slate-400,
    html.light .text-zinc-400 { color: #52525b !important; }
    html.light .text-slate-500,
    html.light .text-zinc-500 { color: #71717a !important; }

    /* Backgrounds escuros convertidos em claros */
    html.light [class*="bg-[#0c0c0e]"],
    html.light [class*="bg-[#09090b]"],
    html.light [class*="bg-[#0e0e11]"],
    html.light [class*="bg-[#0a0a0d]"],
    html.light [class*="bg-[#121215]"] {
      background-color: #ffffff !important;
    }
    html.light .bg-zinc-950,
    html.light .bg-zinc-900,
    html.light .bg-zinc-900\/90,
    html.light .bg-zinc-900\/80,
    html.light .bg-zinc-900\/60,
    html.light .bg-zinc-900\/50,
    html.light .bg-zinc-900\/40,
    html.light .bg-zinc-900\/30 {
      background-color: #f4f4f5 !important;
    }
    html.light .bg-zinc-800,
    html.light .bg-zinc-800\/50,
    html.light .bg-zinc-800\/40 {
      background-color: #e4e4e7 !important;
    }
    html.light .border-zinc-800,
    html.light .border-zinc-800\/80,
    html.light .border-zinc-800\/60,
    html.light .border-zinc-700,
    html.light .border-zinc-700\/80,
    html.light .border-zinc-700\/60,
    html.light .border-white\/10,
    html.light .border-white\/15,
    html.light .border-white\/\[0\.08\],
    html.light .border-white\/\[0\.07\],
    html.light .border-white\/\[0\.06\],
    html.light .border-white\/5 {
      border-color: #e4e4e7 !important;
    }

    /* Inputs, Selects e Dropdowns */
    html.light input,
    html.light select,
    html.light textarea {
      background-color: #ffffff !important;
      color: #09090b !important;
      border-color: #d4d4d8 !important;
    }
    html.light input::placeholder {
      color: #a1a1aa !important;
    }
    html.light select option {
      background-color: #ffffff !important;
      color: #09090b !important;
    }

    /* Tabelas */
    html.light thead {
      background-color: #f4f4f5 !important;
      border-color: #e4e4e7 !important;
    }
    html.light tbody tr:hover {
      background-color: #f4f4f5 !important;
    }
    html.light .divide-zinc-800\/60 > * + * {
      border-color: #e4e4e7 !important;
    }

    /* Badges com Contraste no Light Mode */
    html.light .bg-emerald-500\/10,
    html.light .bg-emerald-500\/15,
    html.light .bg-emerald-500\/20 {
      background-color: #dcfce7 !important;
      color: #166534 !important;
      border-color: #bbf7d0 !important;
    }
    html.light .text-emerald-300,
    html.light .text-emerald-400 {
      color: #15803d !important;
    }
    html.light .bg-rose-500\/10,
    html.light .bg-rose-500\/15,
    html.light .bg-rose-500\/20 {
      background-color: #ffe4e6 !important;
      color: #9f1239 !important;
      border-color: #fecdd3 !important;
    }
    html.light .text-rose-300,
    html.light .text-rose-400 {
      color: #be123c !important;
    }
    html.light .bg-amber-500\/10,
    html.light .bg-amber-500\/15,
    html.light .bg-amber-500\/20 {
      background-color: #fef3c7 !important;
      color: #92400e !important;
      border-color: #fde68a !important;
    }
    html.light .text-amber-300,
    html.light .text-amber-400 {
      color: #b45309 !important;
    }
    html.light .bg-purple-500\/10,
    html.light .bg-purple-500\/15,
    html.light .bg-purple-500\/20 {
      background-color: #f3e8ff !important;
      color: #6b21a8 !important;
      border-color: #e9d5ff !important;
    }
    html.light .text-purple-300,
    html.light .text-purple-400 {
      color: #7e22ce !important;
    }
    html.light .bg-cyan-500\/10,
    html.light .bg-cyan-500\/15,
    html.light .bg-cyan-500\/20 {
      background-color: #cffafe !important;
      color: #155e75 !important;
      border-color: #a5f3fc !important;
    }
    html.light .text-cyan-300,
    html.light .text-cyan-400 {
      color: #0e7490 !important;
    }
    html.light .bg-blue-500\/10,
    html.light .bg-blue-500\/15,
    html.light .bg-blue-500\/20 {
      background-color: #dbeafe !important;
      color: #1e40af !important;
      border-color: #bfdbfe !important;
    }
    html.light .text-blue-300,
    html.light .text-blue-400 {
      color: #1d4ed8 !important;
    }

    /* Botões e Badges de Tabela no Light Mode */
    html.light #btn-refresh,
    html.light #theme-toggle-btn {
      background-color: #ffffff !important;
      border-color: #e4e4e7 !important;
      color: #18181b !important;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }
    html.light #btn-refresh:hover,
    html.light #theme-toggle-btn:hover {
      background-color: #f4f4f5 !important;
      color: #09090b !important;
    }
    html.light #theme-icon-moon {
      color: #4b5563 !important;
    }

    /* Botões de Ação na Tabela de Páginas */
    html.light #pages-table-body a {
      background-color: #ffffff !important;
      border-color: #e4e4e7 !important;
      color: #18181b !important;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
    }
    html.light #pages-table-body a:hover {
      background-color: #f4f4f5 !important;
      color: #09090b !important;
    }

    /* Badges Sim/Não na Tabela */
    html.light #pages-table-body .bg-zinc-900 {
      background-color: #f4f4f5 !important;
      color: #18181b !important;
      border-color: #d4d4d8 !important;
    }
    html.light #pages-table-body .bg-zinc-950 {
      background-color: #ffffff !important;
      color: #71717a !important;
      border-color: #e4e4e7 !important;
    }

    /* Modal no Light Mode */
    html.light #modal-asset-detail > div {
      background-color: #ffffff !important;
      border-color: #e4e4e7 !important;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    }

    /* Canvas matrix no Light Mode */
    html.light #tactical-matrix-canvas {
      opacity: 0.15 !important;
    }

    /* Remove a caixa branca/azul padrão do autofill do navegador em campos de entrada */
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    input:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
      box-shadow: 0 0 0 1000px transparent inset !important;
      -webkit-text-fill-color: #ffffff !important;
      caret-color: #ffffff !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      transition: background-color 500000s ease-in-out 0s !important;
    }