/* GYPTO Mezzanine V18.8 — Unified GYPTO Enterprise Design
   Matches the approved GYPTO corporate system language: navy / orange / white.
   Semantic safety colours remain green / amber / red. */
:root{
  --gy-navy-950:#082b49;
  --gy-navy-900:#0d3557;
  --gy-navy-850:#123f63;
  --gy-navy-800:#174a70;
  --gy-navy-700:#2d648b;
  --gy-strip:#3d6f95;
  --gy-orange:#f57c00;
  --gy-orange-2:#ff8e1f;
  --gy-bg:#f3f6fa;
  --gy-panel:#ffffff;
  --gy-line:#dbe3ec;
  --gy-text:#0d3557;
  --gy-muted:#6d8094;
}
html,body{max-width:100%;overflow-x:hidden;background:var(--gy-bg)!important;color:var(--gy-text)!important}
body{font-family:Cairo,system-ui,sans-serif!important}

/* ======= Three-tier GYPTO shell ======= */
.engineering-topbar.gypto-enterprise-header{
  position:sticky!important;top:0!important;z-index:90!important;
  width:100%!important;background:#fff!important;border:0!important;
  box-shadow:0 5px 18px rgba(16,52,80,.055)!important;
}
.gypto-corporate-strip{
  width:100%!important;max-width:none!important;min-height:35px!important;
  margin:0!important;padding:0 clamp(18px,2.2vw,38px)!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  direction:ltr!important;background:linear-gradient(90deg,#315f83,#3f739a)!important;
  color:#fff!important;font-size:10px!important;font-weight:800!important;
}
.gy-strip-left,.gy-strip-right{display:flex;align-items:center;gap:20px;min-width:0}
.gy-strip-left strong{font-size:11px;letter-spacing:.25px;white-space:nowrap}
.gy-strip-left span,.gy-strip-right span{opacity:.93;white-space:nowrap}
.gy-live-dot{width:7px!important;height:7px!important;border-radius:50%!important;background:#6ae0ad!important;display:inline-block!important;margin-right:6px!important;box-shadow:0 0 0 3px rgba(106,224,173,.13)!important}

.engineering-topbar-main.gypto-utility-header{
  width:100%!important;max-width:none!important;min-height:88px!important;
  margin:0!important;padding:10px clamp(18px,2.2vw,38px)!important;
  display:grid!important;grid-template-columns:minmax(410px,.95fr) minmax(650px,1.55fr)!important;
  align-items:center!important;gap:20px!important;direction:ltr!important;background:#fff!important;
}
.engineering-system-brand{
  min-width:0!important;min-height:66px!important;padding:0!important;margin:0!important;
  display:flex!important;align-items:center!important;gap:16px!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
}
.engineering-logo-card{
  flex:0 0 124px!important;min-width:124px!important;min-height:62px!important;
  padding:6px 14px!important;display:grid!important;place-items:center!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:105px!important;max-width:105px!important;height:auto!important;display:block!important}
.engineering-system-copy{min-width:0!important;display:block!important;direction:ltr!important;text-align:left!important}
.engineering-system-copy::before{display:none!important}
.gy-system-code{height:23px;display:flex;align-items:flex-start;gap:7px;margin:0 0 1px;font-weight:900;font-size:20px;letter-spacing:2px;color:var(--gy-navy-900)}
.gy-system-code span:nth-child(3),.gy-system-code span:nth-child(4){animation:gyCodeDrift 3.6s ease-in-out infinite alternate}
.gy-system-code span:nth-child(4){animation-delay:.4s}
@keyframes gyCodeDrift{from{transform:translateX(0)}to{transform:translateX(4px)}}
.engineering-system-copy>strong{
  display:block!important;margin:0!important;color:var(--gy-navy-900)!important;
  font-size:clamp(17px,1.35vw,23px)!important;font-weight:900!important;line-height:1.2!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.engineering-system-copy>span{display:block!important;margin-top:4px!important;color:#74869a!important;font-size:9.5px!important;font-weight:600!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

.gypto-utility-right{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:12px;direction:ltr}
.gypto-utility-tools{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:9px;direction:ltr;flex:1 1 auto}
.gypto-global-search{
  width:min(100%,345px);min-width:220px;height:49px;margin:0!important;padding:0 14px!important;
  display:flex!important;grid-template-columns:none!important;align-items:center!important;gap:9px!important;
  border:1px solid #efd5b9!important;border-radius:14px!important;background:#fff!important;
  color:var(--gy-orange)!important;box-shadow:none!important;font-weight:400!important;
}
.gypto-global-search>span{font-size:22px;line-height:1;color:#cf7720;transform:translateY(-1px)}
.gypto-global-search input{min-width:0!important;height:42px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#384d62!important;font-size:11px!important;outline:0!important}
.gypto-global-search input::placeholder{color:#7f8d9b!important}
.gypto-global-search input.no-result{animation:gyNoResult .22s linear 2;background:#fff2f2!important}
@keyframes gyNoResult{50%{transform:translateX(3px)}}

.gypto-tools-wrap{position:relative;flex:0 0 auto}
.gypto-safety-tools{
  min-height:49px!important;padding:0 16px!important;border:0!important;border-radius:14px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  color:#fff!important;background:linear-gradient(135deg,var(--gy-orange),var(--gy-orange-2))!important;
  box-shadow:0 8px 18px rgba(245,124,0,.18)!important;font-weight:900!important;font-size:11px!important;white-space:nowrap!important;
}
.gypto-tools-menu{
  position:absolute;top:57px;left:0;z-index:120;width:220px;padding:7px;border:1px solid #dbe3ec;border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(15,50,76,.16)
}
.gypto-tools-menu[hidden]{display:none!important}
.gypto-tools-menu button{width:100%;min-height:40px;padding:0 11px;border:0;border-radius:9px;background:#fff;color:#173b5a;text-align:left;font:inherit;font-size:10px;font-weight:800}
.gypto-tools-menu button:hover{background:#fff8ef;color:var(--gy-orange)}

.gypto-status-chip{
  flex:0 0 auto;min-height:49px;padding:0 12px;display:flex;align-items:center;gap:6px;
  border:1px solid #e0e6ec;border-radius:14px;background:#fff;color:#50677c;font-size:9.5px;white-space:nowrap
}
.gypto-status-chip b{color:#a65b00;font-size:10px}.gypto-status-chip>i{width:7px;height:7px;border-radius:50%;background:#29ad77;box-shadow:0 0 0 3px rgba(41,173,119,.11)}.gypto-status-chip strong{color:#195d47}
.gypto-access-chip{
  flex:0 0 130px;min-height:49px;padding:7px 12px;display:grid;align-content:center;
  border:1px solid #dbe5ee;border-radius:14px;background:#f7fafc;text-align:left;line-height:1.15
}
.gypto-access-chip small{font-size:7.5px;color:#8594a3;font-weight:800}.gypto-access-chip strong{margin-top:4px;color:#173d5d;font-size:9.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gypto-notification-button{
  position:relative;flex:0 0 46px;width:46px;height:46px;border:1px solid #dbe5ee;border-radius:14px;background:#fff;color:#d78a13;font-size:19px
}
.gypto-notification-button span{position:absolute;top:-6px;right:-5px;min-width:20px;height:20px;padding:0 5px;border:2px solid #fff;border-radius:99px;display:grid;place-items:center;background:#dc3f49;color:#fff;font-size:8px;font-weight:900}

.engineering-user-card{
  flex:0 0 238px!important;width:238px!important;min-height:54px!important;margin:0!important;padding:7px 9px!important;
  display:grid!important;grid-template-columns:42px minmax(0,1fr) 36px!important;align-items:center!important;gap:9px!important;
  direction:ltr!important;border:1px solid #dbe4ed!important;border-radius:14px!important;background:#f8fafc!important;box-shadow:none!important;
}
.engineering-avatar-wrap,.engineering-avatar{width:40px!important;height:40px!important}.engineering-avatar{border-radius:50%!important;background:#e6f0f7!important;color:#174a70!important;border:1px solid #d5e2ec!important;font-size:11px!important}
.engineering-user-copy{min-width:0!important;text-align:left!important}.engineering-user-copy>strong{display:block!important;color:#0f3555!important;font-size:10.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.engineering-user-copy>span{display:block!important;margin-top:1px!important;color:#708195!important;font-size:7.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.engineering-role-pills{display:flex!important;gap:4px!important;margin-top:4px!important}.engineering-role-pills b{padding:3px 6px!important;border-radius:99px!important;background:#e5eff7!important;color:#235b81!important;font-size:6.5px!important}.engineering-role-pills b:first-child{background:#fff0dd!important;color:#955500!important}
.engineering-logout{width:34px!important;height:34px!important;border:1px solid #dce5ed!important;border-radius:10px!important;background:#fff!important;color:#5d7185!important}

/* ======= Main nav, exact GYPTO tab language ======= */
.engineering-nav{
  width:100%!important;max-width:none!important;min-height:56px!important;margin:0!important;padding:0 clamp(18px,2.2vw,38px)!important;
  display:flex!important;align-items:stretch!important;gap:4px!important;direction:ltr!important;overflow-x:auto!important;
  background:#fff!important;border-top:1px solid #eef2f6!important;border-bottom:2px solid #e8edf2!important;box-shadow:none!important;scrollbar-width:thin
}
.engineering-nav-item{
  position:relative!important;min-height:54px!important;padding:0 15px!important;border:0!important;border-radius:0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;
  background:transparent!important;color:#143c5d!important;font-size:11.5px!important;font-weight:900!important;white-space:nowrap!important
}
.engineering-nav-item:hover{background:#fff9f1!important;color:var(--gy-orange)!important}
.engineering-nav-item.active{background:#fffaf4!important;color:var(--gy-orange)!important;box-shadow:none!important}
.engineering-nav-item.active::after{content:"";position:absolute;left:9px;right:9px;bottom:-2px;height:3px;border-radius:4px 4px 0 0;background:var(--gy-orange)}
.mezz-admin-nav{margin-left:auto!important}

/* ======= Content ======= */
.engineering-dashboard-main.dashboard-main{width:100%!important;max-width:1600px!important;margin:0 auto!important;padding:22px clamp(18px,2.2vw,38px) 48px!important;background:transparent!important}
.dashboard-header{border-radius:18px!important;background:linear-gradient(115deg,#123d60,#2f668d)!important;color:#fff!important;border:0!important;box-shadow:0 12px 28px rgba(14,53,82,.12)!important}
.dashboard-header .eyebrow{color:#ffb35a!important}.dashboard-header h1{color:#fff!important}.dashboard-header p{color:#dbe6ef!important}
.header-actions .primary-button,.dashboard-header .primary-button{background:linear-gradient(135deg,var(--gy-orange),var(--gy-orange-2))!important}
.header-actions .secondary-button,.dashboard-header .secondary-button{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.23)!important;color:#fff!important}
.metric-card,.panel,.guest-admin-panel,.guest-create-card,.guest-list-card,.weather-auto-card{border:1px solid var(--gy-line)!important;background:#fff!important;box-shadow:0 6px 18px rgba(18,55,83,.04)!important}
.metric-card{border-top:4px solid #2d678f!important;border-radius:15px!important}.metric-card:nth-child(2){border-top-color:#27a275!important}.metric-card:nth-child(3){border-top-color:var(--gy-orange)!important}.metric-card.warning{border-top-color:#db971b!important}.metric-card.danger{border-top-color:#d6414b!important}
.metric-card strong,.panel-heading h2,.guest-admin-heading h2,.guest-create-card h3,.guest-list-card h3{color:#0d3557!important}
.panel-heading{border-bottom:1px solid #edf1f5!important}

/* Guest/temporary tracking page */
.guest-admin-heading{background:linear-gradient(90deg,#fff,#f8fafc)!important;border-bottom:1px solid #e4eaf0!important}
.guest-admin-badge{background:#e7f0f7!important;color:#245f86!important}
.guest-create-card,.guest-list-card{background:#fbfcfe!important}
.guest-form-grid input,.guest-form-grid select,.guest-form-grid textarea{border-color:#d8e1ea!important;color:#183c59!important;background:#fff!important}
.guest-form-grid input:focus,.guest-form-grid select:focus,.guest-form-grid textarea:focus{border-color:#4f7da0!important;box-shadow:0 0 0 4px rgba(44,101,142,.1)!important}
.guest-create-button{background:linear-gradient(135deg,#174a70,#0d3557)!important;box-shadow:0 8px 18px rgba(13,53,87,.16)!important}
.guest-created-link{border-color:#c9dce9!important;background:#eef5fa!important}.guest-created-link strong{color:#174f73!important}.guest-created-link button{background:#174a70!important}.guest-created-link button.secondary{background:#dfeaf2!important;color:#174a70!important}
.guest-session-details div{background:#f2f6f9!important}.guest-session-actions button,.guest-session-actions a{border-color:#d6e0e9!important;background:#f8fafc!important;color:#225e86!important}

/* FIRST layout */
.ff-layout-toolbar,.ff-layout-note{border-color:#d7e1ea!important;background:#f8fafc!important}.ff-layout-viewport{background:#e8eef4!important;border-color:#cfdae4!important}.ff-layout-button.primary,.ff-layout-button.active,.ff-layout-return{background:linear-gradient(135deg,#174a70,#0d3557)!important}.ff-layout-badge.vector{background:#e7f1f8!important;color:#235f88!important}

/* Admin */
.mezz-admin-popover{border-color:#d8e2eb!important;box-shadow:0 18px 38px rgba(14,48,75,.16)!important}.mezz-admin-popover button:hover{background:#fff7ed!important;color:var(--gy-orange)!important}
.mezz-admin-head{background:linear-gradient(135deg,#0d3557,#205579)!important;color:#fff!important}

.gypto-search-hit{outline:4px solid rgba(245,124,0,.28)!important;outline-offset:3px!important;transition:outline .2s ease!important}

/* ======= Responsive ======= */
@media(max-width:1320px){
  .engineering-topbar-main.gypto-utility-header{grid-template-columns:minmax(350px,.9fr) minmax(520px,1.4fr)!important;gap:12px!important}
  .gypto-global-search{display:none!important}.gypto-access-chip{flex-basis:118px}.engineering-user-card{flex-basis:220px!important;width:220px!important}
}
@media(max-width:1030px){
  .engineering-topbar-main.gypto-utility-header{grid-template-columns:1fr!important;gap:8px!important;padding-top:7px!important;padding-bottom:7px!important}
  .engineering-system-brand{min-height:58px!important}.gypto-utility-right{width:100%!important;justify-content:space-between!important}.gypto-utility-tools{justify-content:flex-start!important}.engineering-user-card{margin-left:auto!important}
  .gy-strip-left>span{display:none}.engineering-nav-item{padding:0 12px!important;font-size:10.5px!important}
}
@media(max-width:760px){
  .gypto-corporate-strip{min-height:30px!important;padding:0 10px!important}.gy-strip-left strong{font-size:9px}.gy-strip-right{gap:9px}.gy-strip-right .hide-mobile{display:none!important}
  .engineering-topbar-main.gypto-utility-header{padding:7px 10px!important}.engineering-logo-card{flex-basis:88px!important;min-width:88px!important;min-height:52px!important;padding:4px 8px!important}.engineering-logo-card img{width:76px!important;max-width:76px!important}
  .gy-system-code{font-size:16px;height:20px}.engineering-system-copy>strong{font-size:14px!important;white-space:normal!important}.engineering-system-copy>span{display:none!important}
  .gypto-utility-right{display:grid!important;grid-template-columns:1fr!important}.gypto-utility-tools{display:grid!important;grid-template-columns:1fr auto auto!important;gap:7px!important}.gypto-safety-tools{min-height:44px!important}.gypto-status-chip{min-height:44px!important}.gypto-access-chip{display:none!important}.gypto-notification-button{width:44px;height:44px}.engineering-user-card{width:100%!important;max-width:none!important;flex-basis:auto!important;margin:0!important}
  .engineering-nav{padding:0 8px!important;min-height:49px!important}.engineering-nav-item{min-height:47px!important;padding:0 11px!important;font-size:10px!important}.mezz-admin-nav{margin-left:0!important}
  .engineering-dashboard-main.dashboard-main{padding:13px 10px 32px!important}
}
@media(max-width:480px){
  .gypto-utility-tools{grid-template-columns:1fr auto!important}.gypto-status-chip{display:none!important}.gypto-safety-tools span{display:none}.gypto-safety-tools{width:45px;padding:0!important}
  .engineering-logo-card{flex-basis:78px!important;min-width:78px!important}.engineering-logo-card img{width:68px!important}.engineering-system-copy>strong{font-size:12.5px!important}.gy-system-code{font-size:14px;letter-spacing:1px;gap:4px}
}