/* GYPTO Mezzanine V18.7 — Approved GYPTO Corporate UI
   Visual parity with the approved GYPTO enterprise systems: navy / orange / white.
   Safety states (green/amber/red) remain semantic and are not rebranded. */
:root{
  --gypto-navy-950:#082b49;
  --gypto-navy-900:#0d3557;
  --gypto-navy-800:#174a70;
  --gypto-navy-700:#285f86;
  --gypto-blue-strip:#35688f;
  --gypto-orange:#f57c00;
  --gypto-orange-2:#ff8a17;
  --gypto-bg:#f2f5f9;
  --gypto-panel:#ffffff;
  --gypto-line:#d9e2ec;
  --gypto-muted:#6f8094;
  --gypto-text:#0f2f4d;
  --green-950:var(--gypto-navy-950);
  --green-900:var(--gypto-navy-900);
  --green-800:var(--gypto-navy-800);
  --green-600:var(--gypto-navy-700);
  --green-500:#2b6f9b;
  --mint:#dcecf8;
  --line:var(--gypto-line);
  --muted:var(--gypto-muted);
  --shadow:0 10px 30px rgba(20,55,84,.08);
}
html,body{max-width:100%;overflow-x:hidden}
body{
  color:var(--gypto-text)!important;
  background:linear-gradient(180deg,#f7f9fc 0,#eef3f8 100%)!important;
}
::selection{background:rgba(245,124,0,.18);color:#0b2f4e}

/* ---------- Loader ---------- */
#app-loader{
  background:
    radial-gradient(circle at 83% 14%,rgba(245,124,0,.12),transparent 28%),
    linear-gradient(135deg,#f6f9fc 0%,#eaf1f7 100%)!important;
}
.loader-card{
  border-radius:20px!important;
  border:1px solid #d7e2ed!important;
  box-shadow:0 22px 65px rgba(13,53,87,.16)!important;
}
.loader-card::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--gypto-orange),#ffad4d)}
.loader-badge{background:#edf4fa!important;color:var(--gypto-navy-800)!important}
.loader-badge i{background:var(--gypto-orange)!important}
.loader-title{color:var(--gypto-navy-900)!important}
.loader-subtitle,.loader-footer span{color:#6f8094!important}
.loader-footer strong{color:var(--gypto-orange)!important}
.loader-bar{background:#e2e9f0!important}
.loader-bar::before{background:linear-gradient(90deg,var(--gypto-navy-900),var(--gypto-blue-strip),var(--gypto-orange))!important}
.loader-pills span{background:#f7f9fc!important;border-color:#d8e3ed!important;color:#586d82!important}

/* ---------- Login / first access ---------- */
.auth-layout{background:#f3f6fa!important}
.auth-hero{
  background:
    radial-gradient(circle at 18% 15%,rgba(245,124,0,.25),transparent 30%),
    linear-gradient(135deg,#082b49f7,#174a70f0)!important;
}
.auth-hero::after{content:"GYPTO PHARMA · EHS";position:absolute;left:34px;top:28px;color:#fff;font-size:11px;font-weight:900;letter-spacing:1.8px;opacity:.82}
.hero-content .eyebrow,.auth-hero .eyebrow{color:#ffc06f!important}
.auth-panel{background:#fff!important;border-left:1px solid #dde5ee}
.auth-card h2,.brand-lockup h1{color:var(--gypto-navy-900)!important}
.brand-icon,.primary-button{
  background:linear-gradient(135deg,var(--gypto-navy-800),var(--gypto-navy-950))!important;
  box-shadow:0 10px 24px rgba(13,53,87,.20)!important;
}
.primary-button:hover{box-shadow:0 12px 28px rgba(13,53,87,.25)!important}
.secondary-button{background:#f5f8fb!important;color:var(--gypto-navy-800)!important;border-color:#d7e1eb!important}
.text-button{color:var(--gypto-orange)!important}
input:focus,select:focus,textarea:focus{border-color:#4d7fa4!important;box-shadow:0 0 0 4px rgba(40,95,134,.10)!important}

/* ---------- Main GYPTO header ---------- */
.engineering-topbar{
  position:sticky!important;
  top:0!important;
  z-index:70!important;
  background:#fff!important;
  border-bottom:1px solid #d8e1ea!important;
  box-shadow:0 6px 18px rgba(19,55,83,.06)!important;
  backdrop-filter:none!important;
}
.gypto-corporate-strip{
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 max(22px,calc((100vw - 1600px)/2 + 22px));
  color:#fff;
  background:linear-gradient(90deg,#2e5f84,#376f98);
  font-size:10px;
  font-weight:800;
  direction:ltr;
}
.gypto-corporate-strip strong{font-size:11px;letter-spacing:.4px}
.gypto-corporate-strip span{opacity:.88;white-space:nowrap}
.gypto-corporate-strip .gy-strip-right{display:flex;align-items:center;gap:24px}
.gypto-corporate-strip .gy-live-dot{width:7px;height:7px;border-radius:50%;background:#67e2aa;display:inline-block;margin-right:6px;box-shadow:0 0 0 3px rgba(103,226,170,.13)}
.engineering-topbar-main{
  min-height:82px!important;
  padding:10px 22px 9px!important;
  gap:16px!important;
  align-items:center!important;
  background:#fff!important;
}
.engineering-system-brand{
  min-height:62px!important;
  padding:4px 0!important;
  gap:15px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.engineering-logo-card{
  min-width:112px!important;
  min-height:58px!important;
  padding:6px 12px!important;
  border:0!important;
  border-right:1px solid #e1e7ee!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}
.engineering-logo-card img{width:98px!important;max-width:98px!important}
.engineering-system-copy strong{
  color:var(--gypto-navy-900)!important;
  font-size:clamp(20px,1.75vw,27px)!important;
  letter-spacing:-.25px;
}
.engineering-system-copy span{color:#718298!important;font-size:11px!important}
.engineering-system-copy::before{
  content:"MSTS";
  display:block;
  margin-bottom:2px;
  color:var(--gypto-orange);
  font-size:9px;
  font-weight:900;
  letter-spacing:2.4px;
}
.engineering-user-card{
  flex-basis:315px!important;
  min-height:60px!important;
  padding:8px 10px!important;
  border:1px solid #dce4ed!important;
  border-radius:14px!important;
  background:#f9fbfd!important;
  box-shadow:none!important;
}
.engineering-avatar{background:#e8f0f7!important;color:var(--gypto-navy-800)!important;border:1px solid #d6e2ec!important}
.engineering-user-copy>strong{color:var(--gypto-navy-900)!important}
.engineering-user-copy>span{color:#728297!important}
.engineering-role-pills b{color:#1c5d84!important;background:#e7f1f8!important}
.engineering-role-pills b:first-child{color:#8f5100!important;background:#fff0dc!important}
.engineering-logout{background:#fff!important;color:#5d7185!important;border:1px solid #dce4ed!important}
.engineering-logout:hover{color:#b2232f!important;background:#fff4f5!important;border-color:#efc8cc!important}

/* ---------- Primary navigation ---------- */
.engineering-nav{
  min-height:55px!important;
  padding:0 22px!important;
  gap:3px!important;
  overflow-x:auto!important;
  background:#fff!important;
  border-top:1px solid #eef2f6!important;
  border-bottom:3px solid #edf1f5!important;
  scrollbar-width:thin;
}
.engineering-nav-item{
  position:relative;
  min-height:52px!important;
  padding:0 16px!important;
  border-radius:0!important;
  color:#173b5a!important;
  background:transparent!important;
  font-size:13px!important;
  font-weight:800!important;
}
.engineering-nav-item:hover{color:var(--gypto-orange)!important;background:#fff9f2!important}
.engineering-nav-item.active{color:var(--gypto-orange)!important;background:#fffaf5!important;box-shadow:none!important}
.engineering-nav-item.active::after{content:"";position:absolute;left:10px;right:10px;bottom:-3px;height:3px;border-radius:3px 3px 0 0;background:var(--gypto-orange)}
.engineering-nav-item:focus-visible{outline:3px solid rgba(245,124,0,.16)!important}

/* ---------- Dashboard content ---------- */
.engineering-dashboard-main.dashboard-main{
  max-width:1600px!important;
  padding:24px 22px 44px!important;
  background:transparent!important;
}
.dashboard-header{
  min-height:144px;
  margin:0 0 18px!important;
  padding:22px 26px!important;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 88% 35%,rgba(255,255,255,.08),transparent 24%),
    linear-gradient(120deg,#103b60,#2d648b)!important;
  box-shadow:0 12px 30px rgba(15,55,87,.12);
}
.dashboard-header h1{color:#fff!important;font-size:29px!important}
.dashboard-header p{color:#dbe8f2!important}
.dashboard-header .eyebrow{color:#ffb051!important;letter-spacing:1.5px!important}
.header-actions{align-items:center!important;flex-wrap:wrap!important}
.header-actions .secondary-button,.dashboard-header .secondary-button{
  color:#fff!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.23)!important;
}
.header-actions .secondary-button:hover,.dashboard-header .secondary-button:hover{background:rgba(255,255,255,.15)!important}
.header-actions .primary-button,.dashboard-header .primary-button{
  background:linear-gradient(135deg,var(--gypto-orange),var(--gypto-orange-2))!important;
  box-shadow:0 9px 20px rgba(245,124,0,.22)!important;
}
.metric-grid{gap:14px!important;margin-bottom:18px!important}
.metric-card{
  min-height:112px;
  border:1px solid #dce4ed!important;
  border-top:4px solid #2e678f!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 6px 18px rgba(22,57,84,.045)!important;
}
.metric-card:nth-child(2){border-top-color:#27a275!important}
.metric-card:nth-child(3){border-top-color:var(--gypto-orange)!important}
.metric-card.warning{border-top-color:#e19a17!important;border-color:#ead39c!important;background:#fffdf8!important}
.metric-card.danger{border-top-color:#d6424d!important;border-color:#efc9cd!important;background:#fffafa!important}
.metric-icon{background:#eaf2f8!important;color:#255f87!important}
.metric-icon.green{background:#e7f7f0!important;color:#16825f!important}
.metric-icon.amber{background:#fff1d7!important;color:#a56800!important}
.metric-icon.red{background:#ffeaec!important;color:#c72e39!important}
.metric-card span{color:#6d7f92!important;font-weight:700!important}
.metric-card strong{color:#0c3555!important}
.metric-card small{color:#91a0ae!important}

.glass-card,.panel,.guest-admin-panel,.guest-create-card,.guest-list-card,.weather-auto-card{
  border-color:#dbe3ec!important;
  background:#fff!important;
  box-shadow:0 7px 22px rgba(18,55,83,.045)!important;
}
.panel{border-radius:17px!important}
.panel-heading{border-bottom:1px solid #edf1f5;padding:18px 20px 14px!important}
.panel-heading h2,.guest-admin-heading h2,.guest-create-card h3,.guest-list-card h3{color:#103957!important}
.panel-heading p,.guest-admin-heading p{color:#75869a!important}
.live-pill,.live-badge{background:#e8f7f0!important;color:#13785a!important}

/* ---------- Buttons / controls ---------- */
.primary-button,.guest-create-button,.weather-auto-primary,.ff-layout-button.primary,.ff-layout-button.active,.ff-layout-return,.usage-guide-done{
  background:linear-gradient(135deg,var(--gypto-navy-800),var(--gypto-navy-900))!important;
  border-color:var(--gypto-navy-800)!important;
  color:#fff!important;
}
.primary-button[data-accent="orange"],.gypto-orange-action{background:linear-gradient(135deg,var(--gypto-orange),var(--gypto-orange-2))!important}
.secondary-button,.guest-refresh,.ff-layout-button,.usage-guide-print{
  color:var(--gypto-navy-800)!important;
  background:#fff!important;
  border-color:#d5e0ea!important;
}
.secondary-button:hover,.guest-refresh:hover,.ff-layout-button:hover{border-color:#97afc2!important;background:#f5f8fb!important}

/* ---------- FIRST vector layout ---------- */
#first-floor-layout-panel{scroll-margin-top:190px}
.ff-layout-badge{background:#f4f7fa!important;border-color:#d3dfe9!important;color:#486176!important}
.ff-layout-badge.vector{background:#eaf2f8!important;border-color:#c8dce9!important;color:#1f628d!important}
.ff-layout-toolbar{background:#f8fafc!important;border-color:#d9e2eb!important}
.ff-layout-viewport{background:#e9eef4!important;border-color:#cfdbe5!important;box-shadow:inset 0 0 0 1px #fff!important}
.ff-layout-world{box-shadow:0 8px 30px rgba(20,55,84,.10)!important}
.ff-zone{border-color:rgba(39,96,136,.54)!important;background:rgba(50,105,145,.045)!important}
.ff-zone span{color:#245f86!important;border-color:rgba(43,105,147,.20)!important}
.ff-layout-note{border-color:#d5e0ea!important;color:#64788b!important}
.ff-layout-note strong{color:var(--gypto-navy-800)!important}
/* People and SOS keep semantic colors intentionally. */

/* ---------- Guest tracking ---------- */
html.guest-mode-pending body{background:#f2f5f9!important}
.guest-admin-panel{border-radius:17px!important}
.guest-admin-heading{border-color:#e5ebf1!important}
.guest-admin-badge{background:#eaf2f8!important;color:#225f87!important}
.guest-create-card,.guest-list-card{background:#f9fbfd!important}
.guest-form-grid input,.guest-form-grid select,.guest-form-grid textarea{border-color:#d8e2eb!important}
.guest-session-card{border-color:#dbe3ec!important}
.guest-session-details div{background:#f3f6f9!important}
.guest-session-actions button,.guest-session-actions a{color:#245f86!important;border-color:#d7e1ea!important;background:#f8fafc!important}

/* ---------- Voice PTT ---------- */
.voice-drawer,.ptt-drawer,.voice-communication-panel,.wireless-ptt-card,.ptt-card{
  --voice-primary:var(--gypto-navy-800);
}
.voice-drawer-header,.ptt-header,.voice-header,.wireless-ptt-header{
  background:linear-gradient(135deg,var(--gypto-navy-900),var(--gypto-navy-800))!important;
}
.voice-record-button,.ptt-talk-button,.wireless-ptt-button{
  background:linear-gradient(135deg,var(--gypto-navy-800),var(--gypto-navy-900))!important;
}

/* ---------- Administration ---------- */
.mezz-admin-menu,.mezz-admin-dropdown,.mezz-admin-popover{border-color:#dbe4ed!important;box-shadow:0 14px 34px rgba(18,55,83,.14)!important}
.mezz-admin-menu button,.mezz-admin-dropdown button{color:#183e5c!important}
.mezz-admin-menu button:hover,.mezz-admin-dropdown button:hover{background:#f4f7fa!important;color:var(--gypto-orange)!important}
.mezz-admin-dialog-header,.admin-modal-header{background:linear-gradient(135deg,var(--gypto-navy-900),var(--gypto-navy-800))!important}

/* ---------- Guide ---------- */
.usage-guide-backdrop{background:rgba(9,35,57,.64)!important}
.usage-guide-dialog{background:#f5f7fa!important;border-color:#d8e3ec!important}
.usage-guide-header{background:linear-gradient(135deg,var(--gypto-navy-900),var(--gypto-navy-700))!important}
.usage-guide-eyebrow{color:#ffc270!important}
.usage-guide-intro strong,.usage-guide-warning strong{color:var(--gypto-navy-800)!important}
.usage-guide-card,.usage-guide-intro,.usage-guide-troubleshooting{border-color:#dce4ec!important}
.usage-guide-step{background:var(--gypto-orange)!important}
.usage-guide-card h3,.usage-guide-troubleshooting h3{color:#123b59!important}
.usage-guide-troubleshooting div{background:#f1f5f8!important}

/* ---------- Mobile ---------- */
@media(max-width:820px){
  .gypto-corporate-strip{min-height:31px;padding:0 11px;font-size:8px}
  .gypto-corporate-strip .gy-strip-right{gap:10px}
  .gypto-corporate-strip .hide-mobile{display:none}
  .engineering-topbar-main{grid-template-columns:1fr!important;padding:8px 11px 7px!important}
  .engineering-system-brand{min-height:60px!important}
  .engineering-logo-card{min-width:84px!important;min-height:50px!important;padding:4px 8px!important}
  .engineering-logo-card img{width:74px!important;max-width:74px!important}
  .engineering-system-copy strong{font-size:15px!important}
  .engineering-system-copy::before{font-size:7px;letter-spacing:1.6px}
  .engineering-system-copy span{font-size:8px!important}
  .engineering-user-card{min-height:56px!important;border-radius:12px!important}
  .engineering-nav{min-height:48px!important;padding:0 8px!important}
  .engineering-nav-item{min-height:46px!important;padding:0 12px!important;font-size:11px!important}
  .engineering-dashboard-main.dashboard-main{padding:13px 10px 30px!important}
  .dashboard-header{min-height:118px;padding:17px!important;border-radius:15px!important}
  .dashboard-header h1{font-size:22px!important}
  .metric-card{min-height:100px}
}
@media(max-width:520px){
  .gypto-corporate-strip strong{font-size:9px}
  .engineering-system-copy span{display:none!important}
  .engineering-logo-card{min-width:76px!important}.engineering-logo-card img{width:68px!important}
  .dashboard-header{display:grid!important;gap:14px!important}
  .header-actions{width:100%!important}
}