/* GYPTO EHS V80 — NO GRAY UI
   Visual override only. Keeps the dark animated splash untouched while removing gray fills
   from the live application. Palette: White + GYPTO Blue + Orange + status colors. */
:root{
  --v80-white:#ffffff;
  --v80-canvas:#f7fcff;
  --v80-blue-25:#f5fbff;
  --v80-blue-50:#eef8ff;
  --v80-blue-100:#e1f3ff;
  --v80-blue-150:#d6edfc;
  --v80-blue-200:#c7e5f8;
  --v80-blue-300:#9fd2ef;
  --v80-blue:#0b74b8;
  --v80-blue-strong:#075f9a;
  --v80-navy:#123f63;
  --v80-text:#173f5d;
  --v80-muted:#527a98;
  --v80-border:#cfe7f7;
  --v80-orange:#f28c28;
  --v80-orange-soft:#fff4e8;
  --v80-green:#16845b;
  --v80-green-soft:#eafaf3;
  --v80-red:#c84050;
  --v80-red-soft:#fff0f2;
  --v80-amber:#a76600;
  --v80-amber-soft:#fff8e8;
}

/* App canvas — splash screen intentionally excluded by is-loading */
html body:not(.is-loading){
  background:var(--v80-canvas)!important;
  color:var(--v80-text)!important;
}
body:not(.is-loading) .app,
body:not(.is-loading) .main,
body:not(.is-loading) .content,
body:not(.is-loading) .page,
body:not(.is-loading) .page-content,
body:not(.is-loading) main{
  background:var(--v80-canvas)!important;
}

/* White / blue-tint surfaces only */
body:not(.is-loading) .card,
body:not(.is-loading) .panel,
body:not(.is-loading) .box,
body:not(.is-loading) .section-card,
body:not(.is-loading) .content-card,
body:not(.is-loading) .metric-card,
body:not(.is-loading) .kpi-card,
body:not(.is-loading) .stat-card,
body:not(.is-loading) .modal-card,
body:not(.is-loading) .modal-content,
body:not(.is-loading) .dialog,
body:not(.is-loading) .popover,
body:not(.is-loading) .dropdown-panel,
body:not(.is-loading) .ehs-v55-panel,
body:not(.is-loading) .ehs-quality-card,
body:not(.is-loading) .ehs-quality-hero,
body:not(.is-loading) .capa69-performance-card,
body:not(.is-loading) .capa69-table-wrap,
body:not(.is-loading) .c74-header,
body:not(.is-loading) .c74-stepper,
body:not(.is-loading) .c74-next,
body:not(.is-loading) .c74-card,
body:not(.is-loading) .capa68-card,
body:not(.is-loading) .capa68-hero,
body:not(.is-loading) .capa-enterprise-hero,
body:not(.is-loading) .capa-simple-hero,
body:not(.is-loading) .capa-workflow-hero{
  background:var(--v80-white)!important;
  color:var(--v80-text)!important;
  border-color:var(--v80-border)!important;
}

/* Headers / bars / utility surfaces */
body:not(.is-loading) .topbar,
body:not(.is-loading) .ehs-quality-header,
body:not(.is-loading) .ehs-quality-utility,
body:not(.is-loading) .ehs-quality-nav,
body:not(.is-loading) #sectionsTabs,
body:not(.is-loading) .nav-shell,
body:not(.is-loading) .toolbar,
body:not(.is-loading) .filters,
body:not(.is-loading) .filterbar,
body:not(.is-loading) .pagination,
body:not(.is-loading) .capa69-command,
body:not(.is-loading) .capa69-pagination{
  background:var(--v80-white)!important;
  border-color:var(--v80-border)!important;
  color:var(--v80-text)!important;
}

/* Horizontal navigation: no gray states */
body:not(.is-loading) #sectionsTabs .ehs-qms-nav-button,
body:not(.is-loading) .ehs-qms-nav-button,
body:not(.is-loading) #sectionsMyTasks{
  background:var(--v80-white)!important;
  color:var(--v80-navy)!important;
  border-color:transparent!important;
}
body:not(.is-loading) #sectionsTabs .ehs-qms-nav-button:hover,
body:not(.is-loading) .ehs-qms-nav-button:hover,
body:not(.is-loading) #sectionsMyTasks:hover{
  background:var(--v80-blue-50)!important;
  color:var(--v80-blue-strong)!important;
  border-color:var(--v80-blue-200)!important;
}
body:not(.is-loading) #sectionsTabs .active .ehs-qms-nav-button,
body:not(.is-loading) #sectionsTabs .ehs-qms-nav-button.active,
body:not(.is-loading) .ehs-qms-nav-button.active,
body:not(.is-loading) #sectionsMyTasks.active{
  background:var(--v80-blue-100)!important;
  color:var(--v80-blue-strong)!important;
  border-color:var(--v80-blue-200)!important;
  box-shadow:inset 0 -3px 0 var(--v80-orange)!important;
}
body:not(.is-loading) .v78-nav-icon,
body:not(.is-loading) .ehs-qms-nav-icon{
  background:var(--v80-blue-50)!important;
  color:var(--v80-blue)!important;
}
body:not(.is-loading) #sectionsTabs .active .v78-nav-icon,
body:not(.is-loading) #sectionsTabs .active .ehs-qms-nav-icon{
  background:var(--v80-white)!important;
  color:var(--v80-blue-strong)!important;
}

/* Dropdown / mega menu and selected items */
body:not(.is-loading) #nav,
body:not(.is-loading) .ehs-v55-panel,
body:not(.is-loading) .ehs-v55-panel-body,
body:not(.is-loading) .mega-menu,
body:not(.is-loading) .dropdown-menu,
body:not(.is-loading) .menu-panel{
  background:var(--v80-white)!important;
  border-color:var(--v80-blue-200)!important;
}
body:not(.is-loading) #nav button,
body:not(.is-loading) .dropdown-menu button,
body:not(.is-loading) .menu-panel button,
body:not(.is-loading) .mega-menu button{
  background:var(--v80-white)!important;
  color:var(--v80-navy)!important;
  border-color:var(--v80-blue-100)!important;
}
body:not(.is-loading) #nav button:hover,
body:not(.is-loading) .dropdown-menu button:hover,
body:not(.is-loading) .menu-panel button:hover,
body:not(.is-loading) .mega-menu button:hover{
  background:var(--v80-blue-50)!important;
  color:var(--v80-blue-strong)!important;
  border-color:var(--v80-blue-200)!important;
}
body:not(.is-loading) #nav button.active,
body:not(.is-loading) #nav button[aria-current="page"],
body:not(.is-loading) .dropdown-menu button.active,
body:not(.is-loading) .menu-panel button.active,
body:not(.is-loading) .mega-menu button.active,
body:not(.is-loading) .dropdown-menu [aria-selected="true"],
body:not(.is-loading) .menu-panel [aria-selected="true"]{
  background:var(--v80-blue-100)!important;
  color:var(--v80-navy)!important;
  border-color:var(--v80-blue-300)!important;
  box-shadow:inset 4px 0 0 var(--v80-orange)!important;
}
body:not(.is-loading) #nav button.active *,
body:not(.is-loading) #nav button[aria-current="page"] *,
body:not(.is-loading) .dropdown-menu button.active *,
body:not(.is-loading) .menu-panel button.active *,
body:not(.is-loading) .mega-menu button.active *{
  color:var(--v80-navy)!important;
}

/* Generic buttons: no charcoal / gray fills */
body:not(.is-loading) button,
body:not(.is-loading) .btn,
body:not(.is-loading) a.btn{
  background:var(--v80-white)!important;
  color:var(--v80-blue-strong)!important;
  border-color:var(--v80-blue-200)!important;
}
body:not(.is-loading) button:hover,
body:not(.is-loading) .btn:hover,
body:not(.is-loading) a.btn:hover{
  background:var(--v80-blue-50)!important;
  color:var(--v80-blue-strong)!important;
  border-color:var(--v80-blue-300)!important;
}
body:not(.is-loading) button.primary,
body:not(.is-loading) .btn-primary,
body:not(.is-loading) .primary-action,
body:not(.is-loading) .capa69-row-actions button:first-child,
body:not(.is-loading) .c74-next button.primary{
  background:var(--v80-blue)!important;
  color:#fff!important;
  border-color:var(--v80-blue)!important;
}
body:not(.is-loading) button.primary:hover,
body:not(.is-loading) .btn-primary:hover,
body:not(.is-loading) .primary-action:hover,
body:not(.is-loading) .capa69-row-actions button:first-child:hover{
  background:var(--v80-blue-strong)!important;
  color:#fff!important;
  border-color:var(--v80-blue-strong)!important;
}
body:not(.is-loading) button.secondary,
body:not(.is-loading) .btn-secondary{
  background:var(--v80-white)!important;
  color:var(--v80-blue-strong)!important;
  border-color:var(--v80-blue-200)!important;
}
body:not(.is-loading) button:disabled,
body:not(.is-loading) .btn:disabled,
body:not(.is-loading) button[disabled]{
  background:var(--v80-blue-25)!important;
  color:#76a4c3!important;
  border-color:var(--v80-blue-150)!important;
  opacity:1!important;
}

/* CAPA mode switch from the user's screenshot */
body:not(.is-loading) .capa69-mode-pill,
body:not(.is-loading) .capa-mode-switch,
body:not(.is-loading) .capa-toggle{
  background:var(--v80-blue-50)!important;
  border-color:var(--v80-blue-200)!important;
}
body:not(.is-loading) .capa69-mode-pill button,
body:not(.is-loading) .capa-mode-switch button,
body:not(.is-loading) .capa-toggle button{
  background:var(--v80-white)!important;
  color:var(--v80-blue-strong)!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
body:not(.is-loading) .capa69-mode-pill button.active,
body:not(.is-loading) .capa-mode-switch button.active,
body:not(.is-loading) .capa-toggle button.active{
  background:var(--v80-blue-100)!important;
  color:var(--v80-blue-strong)!important;
  border-color:var(--v80-blue-200)!important;
  box-shadow:inset 0 -2px 0 var(--v80-orange)!important;
}
body:not(.is-loading) .capa69-mode-pill button:disabled,
body:not(.is-loading) .capa-mode-switch button:disabled,
body:not(.is-loading) .capa-toggle button:disabled{
  background:var(--v80-white)!important;
  color:#73a2c1!important;
  border-color:transparent!important;
}

/* CAPA tabs / steps */
body:not(.is-loading) .c74-tabs,
body:not(.is-loading) .capa-tabs,
body:not(.is-loading) .capa-workflow-tabs{
  background:var(--v80-blue-50)!important;
  border-color:var(--v80-blue-200)!important;
}
body:not(.is-loading) .c74-tabs button,
body:not(.is-loading) .capa-tab,
body:not(.is-loading) .capa-workflow-tab{
  background:transparent!important;
  color:var(--v80-muted)!important;
}
body:not(.is-loading) .c74-tabs button.active,
body:not(.is-loading) .capa-tab.active,
body:not(.is-loading) .capa-workflow-tab.active{
  background:var(--v80-white)!important;
  color:var(--v80-blue-strong)!important;
  border-color:var(--v80-blue-200)!important;
  box-shadow:inset 0 -2px 0 var(--v80-orange)!important;
}
body:not(.is-loading) .c74-progressbox,
body:not(.is-loading) .c74-step span,
body:not(.is-loading) .c74-progress,
body:not(.is-loading) .capa69-rate,
body:not(.is-loading) .capa69-progress-mini>div,
body:not(.is-loading) .capa68-progress,
body:not(.is-loading) .progress,
body:not(.is-loading) .progress-track{
  background:var(--v80-blue-100)!important;
  border-color:var(--v80-blue-200)!important;
}
body:not(.is-loading) .c74-step{
  color:var(--v80-muted)!important;
}
body:not(.is-loading) .c74-step.current{
  background:var(--v80-blue-50)!important;
  color:var(--v80-blue-strong)!important;
}
body:not(.is-loading) .c74-step.current span{
  background:var(--v80-blue-100)!important;
  color:var(--v80-blue-strong)!important;
}

/* Tables: white body, blue-tinted headers; no gray rows */
body:not(.is-loading) table,
body:not(.is-loading) .table,
body:not(.is-loading) .capa69-table,
body:not(.is-loading) .capa-excel-table{
  background:var(--v80-white)!important;
  color:var(--v80-text)!important;
}
body:not(.is-loading) th,
body:not(.is-loading) .capa69-table th,
body:not(.is-loading) .capa-excel-table th{
  background:var(--v80-blue-50)!important;
  color:var(--v80-navy)!important;
  border-color:var(--v80-border)!important;
}
body:not(.is-loading) td,
body:not(.is-loading) .capa69-table td,
body:not(.is-loading) .capa-excel-table td{
  background:var(--v80-white)!important;
  color:var(--v80-text)!important;
  border-color:var(--v80-blue-100)!important;
}
body:not(.is-loading) tbody tr:hover td,
body:not(.is-loading) .capa69-table tbody tr:hover td,
body:not(.is-loading) .capa-excel-table tbody tr:hover td{
  background:var(--v80-blue-25)!important;
}
body:not(.is-loading) .capa-excel-table .capa-group-head th{
  background:var(--v80-blue-100)!important;
  color:var(--v80-navy)!important;
}
body:not(.is-loading) .capa69-card-head,
body:not(.is-loading) .table-head,
body:not(.is-loading) .card-head{
  background:var(--v80-blue-25)!important;
  color:var(--v80-navy)!important;
  border-color:var(--v80-border)!important;
}

/* Inputs / filters */
body:not(.is-loading) input,
body:not(.is-loading) select,
body:not(.is-loading) textarea,
body:not(.is-loading) .search-input{
  background:var(--v80-white)!important;
  color:var(--v80-text)!important;
  border-color:var(--v80-blue-200)!important;
}
body:not(.is-loading) input:focus,
body:not(.is-loading) select:focus,
body:not(.is-loading) textarea:focus{
  background:var(--v80-white)!important;
  border-color:var(--v80-blue-300)!important;
  box-shadow:0 0 0 3px rgba(11,116,184,.10)!important;
}
body:not(.is-loading) input::placeholder,
body:not(.is-loading) textarea::placeholder{
  color:#6b9cbd!important;
}

/* Pills / badges: use blue or semantic colors, never gray fill */
body:not(.is-loading) .pill,
body:not(.is-loading) .badge,
body:not(.is-loading) .chip,
body:not(.is-loading) .capa69-chip,
body:not(.is-loading) .c74-pill{
  background:var(--v80-blue-50)!important;
  color:var(--v80-blue-strong)!important;
  border-color:var(--v80-blue-200)!important;
}
body:not(.is-loading) .success,
body:not(.is-loading) .status-closed,
body:not(.is-loading) .capa69-chip.closed,
body:not(.is-loading) .c74-pill.done{
  background:var(--v80-green-soft)!important;
  color:var(--v80-green)!important;
  border-color:#bfe9d8!important;
}
body:not(.is-loading) .warning,
body:not(.is-loading) .warn,
body:not(.is-loading) .status-open,
body:not(.is-loading) .capa69-chip.open,
body:not(.is-loading) .c74-pill.wait{
  background:var(--v80-amber-soft)!important;
  color:var(--v80-amber)!important;
  border-color:#f2d99f!important;
}
body:not(.is-loading) .danger,
body:not(.is-loading) .status-overdue,
body:not(.is-loading) .capa69-chip.overdue{
  background:var(--v80-red-soft)!important;
  color:var(--v80-red)!important;
  border-color:#f2c7ce!important;
}

/* Details / evidence / history */
body:not(.is-loading) .c74-link,
body:not(.is-loading) .c74-files a,
body:not(.is-loading) .c74-field,
body:not(.is-loading) .capa68-evidence-item,
body:not(.is-loading) .history-item,
body:not(.is-loading) .audit-item{
  background:var(--v80-white)!important;
  color:var(--v80-text)!important;
  border-color:var(--v80-blue-100)!important;
}
body:not(.is-loading) .c74-empty,
body:not(.is-loading) .empty-state{
  background:var(--v80-blue-25)!important;
  color:var(--v80-muted)!important;
  border-color:var(--v80-blue-200)!important;
}

/* User / account / notification controls */
body:not(.is-loading) .user-card,
body:not(.is-loading) .side-user,
body:not(.is-loading) .notification-btn,
body:not(.is-loading) .account-pill,
body:not(.is-loading) .install-menu-btn,
body:not(.is-loading) .logout{
  background:var(--v80-white)!important;
  color:var(--v80-navy)!important;
  border-color:var(--v80-blue-200)!important;
}
body:not(.is-loading) .notification-btn #notificationCount{
  background:var(--v80-blue-100)!important;
  color:var(--v80-blue-strong)!important;
}

/* Online badge / footer / toasts: blue or white, not charcoal */
body:not(.is-loading) .online-indicator,
body:not(.is-loading) .offline-status,
body:not(.is-loading) .sync-status{
  background:var(--v80-white)!important;
  color:var(--v80-blue-strong)!important;
  border-color:var(--v80-blue-200)!important;
}
body:not(.is-loading) .footer,
body:not(.is-loading) .creator-footer,
body:not(.is-loading) .ehs-quality-footer{
  background:var(--v80-white)!important;
  color:var(--v80-muted)!important;
  border-color:var(--v80-border)!important;
}
body:not(.is-loading) .toast,
body:not(.is-loading) .snackbar{
  background:var(--v80-blue-strong)!important;
  color:#fff!important;
  border-color:var(--v80-blue)!important;
}

/* Scrollbar: blue instead of gray */
body:not(.is-loading) *{scrollbar-color:var(--v80-blue-200) transparent!important}
body:not(.is-loading) *::-webkit-scrollbar-thumb{
  background:var(--v80-blue-200)!important;
  border-color:transparent!important;
}

/* Ensure legacy charcoal text/fills cannot leak into common CAPA controls */
body:not(.is-loading) .capa69-row-actions button,
body:not(.is-loading) .c74-big-actions button,
body:not(.is-loading) .capa68-actions button,
body:not(.is-loading) .capa-workflow-actions button{
  box-shadow:none!important;
}
body:not(.is-loading) .capa69-row-actions button:not(:first-child),
body:not(.is-loading) .c74-big-actions button:not(.primary),
body:not(.is-loading) .capa68-actions button:not(.primary),
body:not(.is-loading) .capa-workflow-actions button:not(.primary){
  background:var(--v80-white)!important;
  color:var(--v80-blue-strong)!important;
  border-color:var(--v80-blue-200)!important;
}

/* Strong final guard for known legacy dark fills — only inside live app */
body:not(.is-loading) [style*="background: rgb(51, 65, 85)"],
body:not(.is-loading) [style*="background-color: rgb(51, 65, 85)"],
body:not(.is-loading) [style*="background: #334155"],
body:not(.is-loading) [style*="background-color: #334155"],
body:not(.is-loading) [style*="background: #475569"],
body:not(.is-loading) [style*="background-color: #475569"]{
  background:var(--v80-blue-50)!important;
  color:var(--v80-blue-strong)!important;
  border-color:var(--v80-blue-200)!important;
}