/* GYPTO EHS V73 — LIGHT CORPORATE APP / ORIGINAL SPLASH
   No dark filled surfaces anywhere in the application. Dark tones are kept only for readable text. */
:root,
html,
html[data-theme],
html[data-theme="dark"],
html[data-theme="iso-graphite"],
html[data-theme="health-blue"],
html[data-theme="environment-green"],
html[data-theme="safety-amber"]{
  --bg:#f6f9fc !important;
  --panel:#ffffff !important;
  --surface:#ffffff !important;
  --card:#ffffff !important;
  --ink:#18324a !important;
  --muted:#66788a !important;
  --line:#dbe5ef !important;
  --brand:#2a79b8 !important;
  --brand2:#58aee6 !important;
  --side1:#f7fbff !important;
  --side2:#eef6fc !important;
  --shadow:0 8px 24px rgba(40,76,110,.07) !important;
  --qms-navy:#dceefd !important;
  --qms-navy-deep:#eef7ff !important;
  --qms-bg:#f6f9fc !important;
  --qms-border:#dbe5ef !important;
  --qms-text:#18324a !important;
  --qms-muted:#66788a !important;
}
html{color-scheme:light !important;background:#f6f9fc !important}
body,body .main,.app,.content{background:#f6f9fc !important;color:#18324a !important}

/* Loading + login */
.login-screen{background:linear-gradient(135deg,#f8fbfe,#eef7ff)!important}
.login-card,.codebox{background:#fff!important;color:#18324a!important;border:1px solid #dbe5ef!important}
.codebox{box-shadow:inset 0 0 0 1px #eef4f8!important}

/* Main navigation / header */
.sidebar{
  background:linear-gradient(180deg,#fbfdff,#eef7fd)!important;
  color:#18324a!important;
  border-right:1px solid #dbe5ef!important;
  box-shadow:8px 0 22px rgba(40,76,110,.04)!important;
}
.brand{border-color:#dbe5ef!important}.brand b{color:#18324a!important}.brand span{color:#6a8195!important}
.nav-title,.nav button,.side-user,.side-user strong{color:#294c68!important}
.nav-title{border-color:#e3edf5!important}
.nav button{background:#fff!important;border:1px solid transparent!important}
.nav button:hover,.nav button.active{background:#eaf5ff!important;border-color:#c7dff0!important;color:#176b9f!important}
.nav small,.side-user span{background:#e8f2fa!important;color:#42637e!important}
.side-user{background:#fff!important;border-color:#dbe5ef!important}
.logout{background:#f4f9fd!important;color:#176b9f!important;border:1px solid #cbddeb!important}
.topbar,.ehs-quality-header.ehs-v44-header.topbar{background:#fff!important;border-color:#dbe5ef!important;box-shadow:0 8px 22px rgba(40,76,110,.05)!important}

/* The old dark utility strip is now a light corporate strip */
.ehs-quality-utilitybar{
  background:linear-gradient(90deg,#f8fbff,#edf6fd)!important;
  color:#24445f!important;
  border-bottom:1px solid #dbe5ef!important;
  box-shadow:0 6px 16px rgba(40,76,110,.04)!important;
}
.ehs-quality-utility-left span,.ehs-quality-utility-right{color:#657d90!important}
.ehs-quality-utility-left strong{color:#18324a!important}

/* Generic surfaces */
.card,.panel,.hero,.board-slot,.modal,.tablewrap,
.ehs-quality-hero,.ehs-quality-panel,.ehs-quality-metric,.ehs-mini-panel,
.ehs-v48-section-menu,.ehs-v48-nav-panel,
.capa69-performance-card,.capa68-card,.capa68-panel,.capa68-hero,
.capa-performance-columns>article,.capa-performance-kpis>div,
.capa-v67-register,.capa69-shell,.capa69-table-wrap{
  background:#fff!important;
  color:#18324a!important;
  border-color:#dbe5ef!important;
  box-shadow:0 8px 22px rgba(40,76,110,.05)!important;
}
.hero,.ehs-quality-hero{
  background:linear-gradient(135deg,#ffffff,#f3f9fe)!important;
  color:#18324a!important;
}
.hero h1,.hero h2,.hero h3,.hero p,.hero .badge{color:#18324a!important}
.badge{background:#eef7ff!important;border-color:#cfe5f5!important}

/* Buttons: never use navy/graphite filled buttons. */
button,
button.primary,
.btn,.btn-primary,
.ehs-v44-topnav button,
.ehs-quality-hero-actions button,
.ehs-header-install-popover-install,
.capa68-action-strip button,
.capa69-row-actions button,
.capa69-pages button,
.capa-pagination button{
  background:#f4f9fd!important;
  color:#176b9f!important;
  border:1px solid #cbddeb!important;
  box-shadow:none!important;
}
button:hover,.btn:hover,.btn-primary:hover{background:#e8f4fd!important;border-color:#9fc8e5!important;color:#0f5f91!important}
button.active,.nav button.active,.capa69-mode-pill button.active{background:#e4f2fd!important;color:#0f6095!important;border-color:#afd3ea!important}
button.secondary{background:#fff!important;color:#45677f!important;border-color:#d7e3ec!important}
button:disabled{background:#f3f6f8!important;color:#9aa8b4!important;border-color:#e2e8ee!important}
/* Soft semantic actions */
.capa68-owner-btn,.capa68-approve-btn,.capa68-switch input:checked+i{background:#eaf8f0!important;color:#177245!important;border-color:#bfe7ce!important}
.capa68-close-btn,.danger,.btn-danger{background:#fff1f3!important;color:#b42345!important;border-color:#f4c7d1!important}
.warn,.warning,.btn-warning{background:#fff8e8!important;color:#9b6712!important;border-color:#f2dfb2!important}

/* Forms and tables */
input,select,textarea{background:#fff!important;color:#18324a!important;border-color:#d7e3ec!important;box-shadow:none!important}
input:focus,select:focus,textarea:focus{border-color:#8fc2e4!important;box-shadow:0 0 0 3px rgba(88,174,230,.12)!important}
table,.capa69-table{background:#fff!important}
th,.capa69-table th,.capa-excel-table th{background:#f3f8fc!important;color:#526b7f!important;border-color:#dfe8f0!important}
td,.capa69-table td,.capa-excel-table td{background:#fff!important;color:#29475e!important;border-color:#e5edf3!important}
tbody tr:hover td,.capa69-table tbody tr:hover{background:#f7fbfe!important}
.capa-excel-table .capa-group-head th{background:#e8f3fb!important;color:#244b68!important}
.capa-excel-table .capa-sub-head th{background:#f5f9fc!important;color:#526b7f!important}

/* CAPA trend lists: fix the dark pill-like rows seen in the dashboard. */
.capa-trend-row,
button.capa-trend-row,
.capa-trend-list .capa-trend-row,
.capa-trend-list.employee .capa-trend-row{
  background:#fff!important;
  color:#18324a!important;
  border:0!important;
  border-bottom:1px solid #e3ebf2!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.capa-trend-row:hover{background:#f5fafe!important}
.capa-trend-name b{color:#24445f!important}.capa-trend-name small{color:#7a8d9d!important}
.capa-trend-bar,.capa69-rate,.capa69-progress-mini>div,.capa68-progress{background:#eaf0f5!important}
.capa-trend-counts .done{background:#eaf8f0!important;color:#24744c!important}
.capa-trend-counts .todo{background:#fff2ef!important;color:#b64e44!important}

/* CAPA enterprise/workflow */
.capa69-card-head{background:#f7fbfe!important;color:#18324a!important}
.capa69-rank{background:#fff!important;color:#29475e!important}
.capa69-chip{background:#f3f6f9!important;color:#50687b!important;border-color:#dae4ec!important}
.capa69-mode-pill{background:#f4f8fb!important;border-color:#d7e3ec!important}
.capa69-mode-pill button{background:transparent!important;color:#607589!important;border:0!important}
.capa69-mode-pill button.active{background:#e7f3fc!important;color:#176b9f!important}
.capa68-chip{background:#f3f6f9!important;color:#50687b!important}
.capa68-hero:before{background:#85bde0!important}
.capa68-switch i{background:#dfe8ef!important}
.capa68-switch input:checked+i{background:#9ed8b9!important}

/* Status colors remain readable but are light fills only */
.capa69-chip.closed,.pill.success,.status-closed{background:#edf9f2!important;color:#21734b!important;border-color:#c7e8d4!important}
.capa69-chip.open,.status-open{background:#fff8ed!important;color:#9e6219!important;border-color:#f3ddb8!important}
.capa69-chip.overdue,.status-overdue{background:#fff1f3!important;color:#b42345!important;border-color:#f4c9d2!important}
.capa69-chip.waiting,.status-waiting{background:#eef7ff!important;color:#246a9c!important;border-color:#c9e2f3!important}

/* AI / media areas */
.ai-scan-status{background:#eef7ff!important;color:#24445f!important;border:1px solid #cfe3f2!important}
.ai-scan-status span,.ai-scan-status small{color:#667f92!important}
.ai-video,.ai-preview,.ai-recorded-preview{background:#eef3f7!important;border-color:#d7e3ec!important}

/* Popovers / notifications / dialogs */
.modal-backdrop{background:rgba(92,117,137,.18)!important;backdrop-filter:blur(2px)}
.toast,.gypto-offline-toast{background:#fff!important;color:#29475e!important;border:1px solid #d7e3ec!important;box-shadow:0 10px 28px rgba(40,76,110,.12)!important}
.ehs-install-popover,.ehs-install-popover-qr{background:#fff!important;color:#29475e!important;border-color:#dbe5ef!important}
.ehs-header-install-popover-install{background:#edf7ff!important;color:#176b9f!important}
.ehs-header-install-popover-install .ehs-install-app-copy strong,
.ehs-header-install-popover-install .ehs-install-app-copy small{color:#176b9f!important}
.ehs-install-popover-download{background:#dceffc!important;color:#176b9f!important}

/* Any legacy dark utility classes that survive old modules */
.dark,.dark-panel,.navy,.navy-panel,.graphite,.dark-card,
[class*="dark-card"],[class*="navy-card"]{
  background:#fff!important;color:#29475e!important;border-color:#dbe5ef!important
}

/* Bottom online state: light as well */
#gyptoOfflineStatus{background:#fff!important;color:#496579!important;border:1px solid #d7e3ec!important;box-shadow:0 8px 22px rgba(40,76,110,.10)!important}
#gyptoOfflinePanel{background:#fff!important;color:#29475e!important;border-color:#d7e3ec!important}
.gypto-offline-note{background:#fff9ec!important;color:#80611c!important}

/* Preserve dark TEXT only for contrast; never dark surface fills. */
.footer,.creator-footer{background:#fff!important;color:#66788a!important;border-color:#dbe5ef!important}


/* V73 — keep the original premium loading screen colors exactly dark/blue/orange. */
.splash{
  background:
    radial-gradient(circle at 50% 68%,rgba(14,165,233,.20),transparent 31%),
    radial-gradient(circle at 18% 18%,rgba(245,158,11,.12),transparent 24%),
    linear-gradient(135deg,#06172d,#050927 54%,#0a1c2d) !important;
  color:#fff !important;
}
.splash .splash-grid{
  background-image:
    linear-gradient(rgba(80,154,192,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,154,192,.075) 1px,transparent 1px) !important;
}
.splash .splash-copy>span,
.splash .splash-copy h1,
.splash .splash-trust b{color:#fff !important}
.splash .splash-copy h1 b{color:#f59e0b !important}
.splash .splash-copy p{color:#d7e2ef !important}
.splash .splash-copy p strong{color:#38bdf8 !important}
.splash .splash-trust span{color:#9fb2c8 !important}
.splash .splash-marquee{color:#fff !important}

/* Large animated SAFETY FIRST message on the loading screen. */
.safety-first-motion{
  position:absolute;
  left:50%;
  top:72%;
  z-index:7;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  font-size:clamp(36px,5.5vw,82px);
  line-height:1;
  font-weight:1000;
  letter-spacing:.16em;
  color:#fff;
  text-shadow:
    0 0 12px rgba(56,189,248,.48),
    0 0 30px rgba(14,165,233,.30),
    0 8px 28px rgba(0,0,0,.34);
  animation:safetyFirstMotion 2.8s ease-in-out infinite;
}
.safety-first-motion::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:-14px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,#38bdf8,#f59e0b,transparent);
  animation:safetyFirstLine 2.8s ease-in-out infinite;
}
@keyframes safetyFirstMotion{
  0%,100%{transform:translate(-50%,-50%) scale(.96);opacity:.72;letter-spacing:.14em}
  50%{transform:translate(-50%,-50%) scale(1.045);opacity:1;letter-spacing:.20em}
}
@keyframes safetyFirstLine{
  0%,100%{transform:scaleX(.45);opacity:.35}
  50%{transform:scaleX(1);opacity:1}
}
@media(max-width:900px){.safety-first-motion{top:70%;font-size:clamp(32px,7vw,58px)}}
@media(max-width:620px){.safety-first-motion{top:69%;font-size:clamp(26px,9vw,44px);letter-spacing:.10em}}
@media(max-height:650px){.safety-first-motion{top:68%;font-size:clamp(28px,5vw,56px)}}
@media(prefers-reduced-motion:reduce){.safety-first-motion,.safety-first-motion::after{animation:none!important}}