/* =======================
   Proconics / Core Tokens
   ======================= */
:root{
  --pro-teal:   #125666;   /* primary */
  --pro-teal-600:#188392;
  --pro-teal-400:#38b5a6;
  --pro-teal-100:#dcf4ef;
  --pro-teal-700:#0e4552;

  --text-dark:  #0f2b31;
  --text-muted: #5a6a6d;
  --white:      #ffffff;
}

.dark-mode{
  --pro-teal: #0d3c47;
  --pro-teal-600:#13606d;
  --pro-teal-400:#2b8a7e;
  --pro-teal-100:#152a2f;
  --pro-teal-700:#0a1f25;
  --text-dark:#e5f0f3;
  --text-muted:#9fb4b8;
  --white:#0f1a1d;
  background:#0f1a1d;
  color: var(--text-dark);
}

/*
==============
Base / Reset
==============
*/

* { box-sizing: border-box; }

html, body { height:100%; }

body {
  margin:0;
  font-family: montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-dark);
}

/* Brand animated background placed on body so long pages don’t show white bands */
@keyframes tealFlow {
  0% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

body::before{
  content:""; position: fixed; inset:0; z-index:-1;
  background: linear-gradient(90deg, var(--pro-teal), var(--pro-teal-600), var(--pro-teal-400), var(--pro-teal-100));
  background-size: 400% 400%;
  animation: tealFlow 18s ease infinite;
}

/* =========
   Navbar
   ========= */
.navbar-pro{
  position: sticky;
  top: 0;
  z-index: 1200;
  margin: 12px 14px 0;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(248,252,251,.88), rgba(237,246,243,.84));
  box-shadow: 0 18px 34px rgba(0,0,0,.12);
  backdrop-filter: blur(16px);
}
.nav-inner{
  max-width: 1440px;
  min-height: 76px;
  margin: 0 auto;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto auto;
  gap: 14px;
  align-items: center;
}
.nav-brand-zone{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.logoWeblink{
  display:flex;
  align-items:center;
  text-decoration:none;
  gap:12px;
  min-width:0;
}
.logo-shell{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(13,90,97,.96), rgba(22,115,119,.88));
  border: 1px solid rgba(255,255,255,.36);
  box-shadow: 0 10px 20px rgba(8,52,61,.18);
  flex:0 0 auto;
}
.logo{
  height:34px;
  width:auto;
  margin:0;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.16));
}
.brand-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.brand-title{
  color:#10343b;
  font-weight:900;
  letter-spacing:-0.03em;
  font-size:20px;
  line-height:1;
}
.brand-subtitle{
  margin-top:3px;
  color:#60767d;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.nav-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding-left:14px;
  border-left:1px solid rgba(16,52,59,.12);
  color:#698088;
  font-size:13px;
  font-weight:700;
}
.nav-breadcrumb strong{
  color:#10343b;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nav-breadcrumb i {
  font-size:10px;
  color:#8ea0a5;
}
.nav-list{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.nav-link-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#24505a;
  font-weight:800;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  letter-spacing:.02em;
  transition: color .2s ease, background .2s ease, transform .15s ease, box-shadow .15s ease;
}
.nav-link-item i{
  font-size:13px;
}
.nav-link-item.active,
.nav-link-item:hover{
  background: linear-gradient(135deg, #0f6668, #167378);
  color:#ffffff;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15,102,104,.18);
}
.nav-utility-zone{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.nav-utility-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(16,52,59,.08);
  color:#18444e;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}
.nav-utility-link:hover{
  text-decoration:none;
  color:#0a4f55;
  background:#ffffff;
}
.nav-utility-link-admin{
  background: rgba(225,244,239,.9);
  color:#0f6668;
}
.nav-utility-link-tenant{
  background: rgba(231,247,240,.92);
  color:#14664f;
}
.userchip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(16,52,59,.08);
  border-radius:999px;
  padding: 7px 10px 7px 12px;
  cursor:pointer;
  box-shadow: 0 8px 16px rgba(0,0,0,.06);
  position:relative;
}
.userchip .name{ font-weight: 800; color:#10343b; }
.userchip .role-pill{
  background: #e9f4f1;
  color: #0f4f57;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(18,86,102,.12);
}
.user-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 320px;
  display:none;
  z-index: 1000;
  background: #fff;
  border: 1px solid rgba(18,86,102,.12);
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,.16);
  overflow: hidden;
}
.user-menu.open{ display:block; }
.user-menu-header{
  display:flex;
  gap:12px;
  padding:14px 16px;
  background: linear-gradient(180deg, #f5faf8, #eaf5f2);
  border-bottom:1px solid #e3ece9;
}
.user-menu-header .avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background: #e3f3ee;
  color: #0f6668;
}
.um-name{ font-weight:900; color:#10343b; }
.um-email,.um-meta{ font-size:12px; color:#60767d; }
.verified-logout-form{ margin:0; }
.verified-logout-action{ border:0; background:transparent; font:inherit; cursor:pointer; }
.user-menu-actions a, .user-menu-actions .verified-logout-action{
  display:flex;
  gap:10px;
  align-items:center;
  padding:11px 16px;
  color:#16363c;
  text-decoration:none;
  font-weight:700;
}
.user-menu-actions .verified-logout-action{ width:100%; text-align:left; }
.user-menu-actions a:hover, .user-menu-actions .verified-logout-action:hover{ background:#f5faf8; }

.app-mode-admin .navbar-pro{
  border-color: rgba(57,84,140,.26);
  background: linear-gradient(180deg, rgba(247,250,253,.94), rgba(237,243,249,.88));
}
.app-mode-admin .logo-shell{
  background: linear-gradient(135deg, #123f66, #316b8f);
}
.app-mode-admin .nav-link-item.active,
.app-mode-admin .nav-link-item:hover{
  background: linear-gradient(135deg, #123f66, #316b8f);
  box-shadow: 0 12px 24px rgba(49,107,143,.18);
}
.app-mode-admin .nav-utility-link-admin,
.app-mode-admin .userchip .role-pill{
  background: #edf4fb;
  color: #123f66;
  border-color: rgba(18,63,102,.12);
}
.app-mode-tenant .navbar-pro{
  border-color: rgba(20,110,84,.24);
  background: linear-gradient(180deg, rgba(248,252,250,.94), rgba(236,247,241,.88));
}
.app-mode-tenant .logo-shell{
  background: linear-gradient(135deg, var(--tenant-primary, #126650), var(--tenant-accent, #278b7b));
}
.app-mode-tenant .nav-link-item.active,
.app-mode-tenant .nav-link-item:hover{
  background: linear-gradient(135deg, var(--tenant-primary, #126650), var(--tenant-accent, #278b7b));
  box-shadow: 0 12px 24px rgba(18,102,80,.18);
}
.app-mode-tenant .userchip .role-pill{
  background: #e9f7ef;
  color: var(--tenant-primary, #126650);
  border-color: rgba(18,102,80,.12);
}

.mode-shell-strip{
  margin: 8px 14px 0;
  position: relative;
  z-index: 1100;
  pointer-events:none;
}
.mode-shell-inner{
  max-width: 1440px;
  min-height: 42px;
  margin: 0 auto;
  padding: 8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,.38);
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(9,43,48,.08);
  backdrop-filter: blur(14px);
  pointer-events:none;
}
.mode-shell-left,
.mode-shell-right{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.mode-shell-badge,
.mode-shell-context,
.mode-shell-right span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:26px;
  border-radius:999px;
  padding:5px 9px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.mode-shell-badge{
  color:#fff;
}
.app-mode-admin .mode-shell-badge{
  background:#123f66;
}
.app-mode-tenant .mode-shell-badge{
  background: var(--tenant-primary, #126650);
}
.mode-shell-logo{
  width:18px;
  height:18px;
  border-radius:5px;
  object-fit:contain;
  background:rgba(255,255,255,.92);
  padding:2px;
  flex:0 0 auto;
}
.mode-shell-context{
  max-width: min(58vw, 640px);
  background:#fff;
  border:1px solid rgba(16,52,59,.08);
  color:#62757a;
}
.mode-shell-context strong{
  color:#10343b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mode-shell-right{
  justify-content:flex-end;
  flex-wrap:wrap;
}
.mode-shell-right span{
  background: rgba(255,255,255,.66);
  border:1px solid rgba(16,52,59,.08);
  color:#4f656b;
}
.app-mode-admin .mode-shell-inner{
  border-color: rgba(18,63,102,.14);
  background: rgba(246,250,254,.86);
}
.app-mode-tenant .mode-shell-inner{
  border-color: rgba(18,102,80,.14);
  background: rgba(246,252,249,.86);
}

@media (max-width: 1180px){
  .nav-inner{
    grid-template-columns: minmax(0, 1fr);
  }
  .nav-list{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .nav-utility-zone{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .mode-shell-inner{
    align-items:flex-start;
    flex-direction:column;
  }
  .mode-shell-right{
    justify-content:flex-start;
  }
}
@media (max-width: 760px){
  .navbar-pro{
    margin: 8px 8px 0;
    border-radius: 18px;
  }
  .nav-inner{
    padding: 10px 12px;
    min-height: 68px;
  }
  .brand-title{
    font-size: 17px;
  }
  .brand-subtitle,
  .nav-breadcrumb,
  .nav-utility-link span,
  .userchip .name{
    display:none;
  }
  .nav-list{
    gap:6px;
  }
  .nav-link-item{
    padding:9px 12px;
  }
  .mode-shell-strip{
    margin: 6px 8px 0;
  }
  .mode-shell-inner{
    padding: 8px 10px;
    border-radius: 14px;
  }
  .mode-shell-left{
    width:100%;
    align-items:flex-start;
    flex-direction:column;
  }
  .mode-shell-context{
    max-width:100%;
  }
  .mode-shell-right{
    display:none;
  }
  .user-menu{
    width: min(92vw, 320px);
  }
}
/* =========
   Layout
   ========= */
.content-wrapper{
  position: relative;
  width:100%;
  min-height: calc(100vh - 80px);
  padding: 16px 16px 28px;
  background: transparent;
}

.pro-flash-stack{
  position:fixed;
  top:94px;
  right:18px;
  z-index:1300;
  display:grid;
  gap:10px;
  width:min(420px, calc(100vw - 36px));
}
.pro-flash{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(18,86,102,.14);
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 32px rgba(0,0,0,.12);
  backdrop-filter:blur(14px);
  color:#16363c;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  transition: opacity .24s ease, transform .24s ease, filter .24s ease;
  will-change: opacity, transform;
}
.pro-flash.is-closing,
[data-auto-flash-item].is-closing{
  opacity:0;
  transform:translateY(-8px);
  filter:blur(2px);
  pointer-events:none;
}
.pro-flash-success{
  border-color:rgba(21,118,82,.18);
  color:#145744;
}
.pro-flash-error{
  border-color:rgba(161,40,40,.18);
  color:#7e2323;
}
.pro-flash-warning{
  border-color:rgba(191,129,46,.2);
  color:#7a5214;
}
.pro-flash-info{
  border-color:rgba(23,119,149,.16);
  color:#175770;
}
@media (max-width: 760px){
  .pro-flash-stack{
    top:78px;
    right:10px;
    width:min(94vw, 420px);
  }
}

/* =========
   Footer
   ========= */

.footer-banner {
  margin: 18px 14px 0;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(248,252,251,.9), rgba(237,246,243,.86));
  color: var(--text-dark);
  box-shadow: 0 16px 32px rgba(0,0,0,0.08);
  backdrop-filter: blur(14px);
}
.footer-banner .footer-inner{
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto auto;
  align-items: center;
  gap: 14px;
}
.footer-meta-block{
  min-width: 0;
}
.footer-meta-center,
.footer-meta-right{
  text-align: right;
}
.footer-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 15px;
  color: #10343b;
}
.footer-sub{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #60767d;
}
.footer-meta-label{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7b8f95;
}
.footer-meta-value{
  margin-top: 2px;
  font-size: 13px;
  font-weight: 800;
  color: #10343b;
}
@media (max-width: 860px){
  .footer-banner{
    margin: 14px 8px 0;
    border-radius: 18px;
  }
  .footer-banner .footer-inner{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .footer-meta-center,
  .footer-meta-right{
    text-align: left;
  }
}

/* Cards look better on glassy bg */
.card{
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(18,86,102,0.12);
  border-radius: 12px;
  /* transition: transform .15s ease, box-shadow .15s ease; */
}
/* .card:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,0.12); } */

/* Page title chip for readability on gradient */
.page-title-chip{
  display:inline-block;
  padding: 10px 18px; border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(18,86,102,.18);
  color: #0d2b31; font-weight: 900; letter-spacing:.3px;
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
}

/* =========
   Buttons
   ========= */
.btn-pro{ background: var(--pro-teal); color:#fff; border:none; border-radius:10px; font-weight:800; }

.btn-pro:hover{ filter:brightness(.95); }

.btn-soft, .btn-back {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(18,86,102,.18);
  color:#0f2b31;
  border-radius: 999px;
  font-weight:800;
}

.btn-soft:hover {
  background: var(--pro-teal);
  color:#fff;
}

.btn-back {
  padding: 4px 12px;
  border-radius: 8px;
  transition: all 300ms ease-in-out 0s !important;
}

.btn-back:hover {
  background: var(--pro-teal-100);
  color: var(--pro-teal-700);
}



.btn-teal-outline{
  background: rgba(255,255,255,.85);
  color: var(--pro-teal);
  border: 1px solid rgba(18,86,102,.22);
  border-radius: 999px;
  padding: 8px 14px; font-weight: 800;
}
.btn-teal-outline:hover{ background: var(--pro-teal); color:#fff; }

/* “Open Big Map” & outline CTAs on gradient */
.btn-openmap{
  background: #ffffff;
  border: 1px solid rgba(18,86,102,.22);
  color: #0f2b31; font-weight:800; border-radius:999px;
}
.btn-openmap:hover{ background: var(--pro-teal); color:#fff; }

/* Technical support “Cancel” – high contrast ghost */
.btn-cancel-ghost{
  background: rgba(255,255,255,.86) !important;
  color: #0f2b31 !important;
  border: 1px solid rgba(18,86,102,.25) !important;
  border-radius: 10px;
  font-weight: 700;
}
.btn-cancel-ghost:hover{
  background: var(--pro-teal) !important;
  color: #fff !important;
}

/* =========
   Tables
   ========= */
.table td.action-cell{ width: 160px; white-space: nowrap; }
.table td.action-cell .stack{
  display:flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.badge-soft{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#eef6f6; color:#567; border:1px solid rgba(18,86,102,.15); font-weight:700;
}

/* Projects quick filter inputs */
.filter-row .form-control{ border-radius: 10px; }

/* =========
   Flash popup
   ========= */
.popup{
  display:none; position:fixed; top: 96px; right:20px;
  background: var(--pro-teal); color:#fff;
  padding: 14px 16px; border-radius: 10px;
  z-index: 9999; box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

/* =========
   Map viewer essentials
   ========= */
#map{ position: relative; overflow: hidden; }
#model-container{
  opacity: 0; position: absolute; top:10px; right:10px;
  width:300px; height:300px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(18,86,102,0.2);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
#map.collapsed #model-container{ opacity:1; z-index:9999; transition:opacity .2s .2s; }
#model-content{ height:300px; width:300px; }

#map-label{
  position: absolute; bottom:10px; left: 260px;
  font-size: 18px;
  background: var(--pro-teal-100);
  color: var(--pro-teal-700);
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(18,86,102,0.15);
  display: none; z-index: 9999;
}

/* =========
   Home hero (index)
   ========= */
/* These are used by the modernized homepage you added */
.home-wrap{ position:relative; min-height: calc(100vh - 140px); display:flex; flex-direction:column; align-items:center; padding:54px 16px 64px; }
.blob{ position:absolute; filter: blur(45px); opacity:.35; z-index:0; animation: float 18s ease-in-out infinite; }
.blob.b1{ width:380px; height:380px; border-radius:999px; background:#dcf4ef; left:8%; top:22%; animation-delay:0s; }
.blob.b2{ width:300px; height:300px; border-radius:999px; background:#38b5a6; right:12%; top:12%; animation-delay:2.5s; }
.blob.b3{ width:280px; height:280px; border-radius:999px; background:#188392; right:20%; bottom:10%; animation-delay:5s; }
@keyframes float{ 0%,100%{ transform: translateY(0) translateX(0) scale(1); } 50%{ transform: translateY(-18px) translateX(10px) scale(1.03); } }
@keyframes heroFloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
@keyframes buttonFloat{ 0%{ transform: translateY(0);} 100%{ transform: translateY(-3px);} }

.hero-card{
  position: relative; z-index:1; width: min(980px,92vw);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.82));
  border:1px solid rgba(18,86,102,.15); border-radius:22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.20);
  padding:42px 36px; text-align:center; backdrop-filter: blur(3px);
  animation: heroFloat 12s ease-in-out infinite;
}
.hero-chip{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background: var(--pro-teal-100); color: var(--pro-teal);
  border: 1px solid rgba(18,86,102,.18); font-weight:700; margin-bottom:10px;
}
.hero-title{
  color:#0f2a30; font-weight:800; letter-spacing:.2px;
  font-size: clamp(28px, 3.2vw + 12px, 44px); margin-bottom:10px;
}
.hero-sub{ color:rgba(20,20,20,.78); font-size:18px; max-width:820px; margin:0 auto 22px; }
.hero-actions{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.btn-hero{
  display:inline-flex; align-items:center; gap:10px; border-radius:12px;
  padding:12px 18px; font-weight:800; text-decoration:none;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  animation: buttonFloat 8s ease-in-out infinite alternate;
}
.btn-hero.primary{ background:#fff; color:#0e3b43; border:1px solid rgba(18,86,102,.2); }
.btn-hero.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.65); }
.btn-hero:hover{ transform:translateY(-1px); filter:brightness(.98); box-shadow:0 14px 26px rgba(0,0,0,.18); }

.hero-features{ margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.feature{ display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid rgba(18,86,102,.12); border-radius:14px; padding:10px 12px; text-align:left; }
.feature i{ color:var(--pro-teal); font-size:20px; margin-top:2px; }
.feature h5{ font-size:16px; margin:0 0 2px 0; color:#16353c; font-weight:800; }
.feature p{ font-size:13px; margin:0; color:#5a6a6d; }

.hero-stats{ position:relative; z-index:1; margin-top:22px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.stat{ min-width:180px; background:rgba(255,255,255,.9); border:1px solid rgba(18,86,102,.15); border-radius:16px; padding:12px 18px; text-align:center; box-shadow:0 10px 28px rgba(0,0,0,.12); }
.stat .n{ font-weight:900; font-size:24px; color:#0f2a30; line-height:1; }
.stat .l{ font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:#466068; }

@media (max-width: 900px) {
  .hero-features{ grid-template-columns:1fr; }
}