:root{
  --bg:#070b14;--bg2:#0b1220;
  --stroke:rgba(255,255,255,.09);
  --text:rgba(233,240,255,.92);--muted:rgba(233,240,255,.70);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(74,163,255,.14), transparent 55%),
    radial-gradient(1000px 700px at 88% 18%, rgba(124,92,255,.10), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}
a{color:inherit;text-decoration:none}
.container{max-width:1250px;margin:0 auto;padding:0 16px}
.small{font-size:13px;color:var(--muted)}
.h1{font-size:38px;line-height:1.05;font-weight:900;margin:0}
.h2{font-size:22px;line-height:1.2;font-weight:850;margin:0}
.lead{font-size:16px;color:var(--muted);max-width:70ch}
.header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(7,11,20,.92); /* less see-through */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:42px;height:42px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);display:grid;place-items:center;font-weight:950;letter-spacing:.02em;}
.brand .name{font-size:13px;font-weight:950;letter-spacing:.08em}
.brand .tag{font-size:12px;color:rgba(233,240,255,.65)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:10px 14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--text);font-weight:800;font-size:13px;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.08)}
.btn.primary{background:linear-gradient(90deg, rgba(74,163,255,.28), rgba(124,92,255,.24));border-color:rgba(255,255,255,.18)}
.btn.white{background:#fff;color:#000;border-color:#fff}
.layout{display:grid;grid-template-columns:240px 1fr;gap:16px;padding:18px 0}
@media (max-width: 920px){ .layout{grid-template-columns:1fr} }
.sidebar{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:24px;padding:12px}
.nav{display:grid;gap:6px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid transparent;color:rgba(233,240,255,.90)}
.nav a.active{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.10)}
.nav a:hover{background:rgba(255,255,255,.06)}
.tip{margin-top:12px;padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);color:rgba(233,240,255,.75);font-size:12px}
.card{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);border-radius:24px;padding:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width: 920px){ .grid3{grid-template-columns:1fr} }
.input, select, textarea{width:100%;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text);padding:12px 14px;outline:none}

/* --- Native select dropdown menu theming (best-effort across browsers) --- */
select{
  background-color: rgba(255,255,255,.04);
  color: var(--text);
  color-scheme: dark; /* helps Firefox/Chromium render dark dropdown UI */
}
select option, select optgroup{
  background-color:#1f2937;
  color:#ffffff;
}
textarea{resize:vertical}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
hr.sep{border:0;border-top:1px solid rgba(255,255,255,.08);margin:14px 0}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{font-size:12px;color:rgba(233,240,255,.65);text-align:left;padding:0 10px}
.table td{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:10px}
.table tr td:first-child{border-radius:14px 0 0 14px}
.table tr td:last-child{border-radius:0 14px 14px 0}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);font-size:12px;color:rgba(233,240,255,.78)}
.notice{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);padding:12px;border-radius:18px;color:rgba(233,240,255,.78);font-size:13px}

.report-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width: 920px){ .report-photos{grid-template-columns:repeat(2,1fr)} }
.photo-card{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);border-radius:18px;padding:10px}
.photo-card img{width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)}

@media print{
  body{ background:#fff !important; color:#000 !important; }
  .header, .sidebar, .no-print{ display:none !important; }
  .layout{ grid-template-columns: 1fr !important; padding:0 !important; }
  .card{ border:1px solid #ddd !important; background:#fff !important; }
  .badge{ border:1px solid #ddd !important; background:#f5f5f5 !important; color:#111 !important; }
  .small, .lead{ color:#333 !important; }
}


/* --- Submenu visibility fix (dark background, readable text) --- */
:is(.submenu, .sub-menu, .dropdown-menu, .menu, .menu-panel, .nav-sub, .subnav, .nav ul ul, nav ul ul){
  background-color:#1f2937 !important;
}
:is(.submenu, .sub-menu, .dropdown-menu, .menu, .menu-panel, .nav-sub, .subnav, .nav ul ul, nav ul ul) a{
  color:#ffffff !important;
}
:is(.submenu, .sub-menu, .dropdown-menu, .menu, .menu-panel, .nav-sub, .subnav, .nav ul ul, nav ul ul) a:hover{
  background-color:#374151 !important;
  color:#ffffff !important;
}
/* === Use installed company logo instead of demo TG initials === */
.logo {
  background-image: url("ico white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* hide the old TG letters */
  color: transparent !important;
  text-indent: -9999px;
  overflow: hidden;
}
/* FIX: blue haze overlay covering bottom of forms */
.header, .layout, .sidebar, .main, .card {
  position: relative;
  z-index: 5;
}

/* If you have any decorative overlay/glow layers, they must NOT sit above content */
body::before, body::after {
  pointer-events: none;
  z-index: 0;
}
/* Blue haze is almost certainly a pseudo-element overlay */
body::before,
body::after,
.layout::before,
.layout::after,
.main::before,
.main::after,
.card::before,
.card::after {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Keep real content above any background effects */
.header,
.layout,
.sidebar,
.main,
.card {
  position: relative;
  z-index: 10;
}
/* FIX: stop sticky header haze overlapping page content */
.layout { z-index: 30; }
/* NUCLEAR FIX: remove any global glow/haze overlays */
html::before,
html::after,
body::before,
body::after {
  content: none !important;
  display: none !important;
}
/* Fix: remove blue haze band by making the content panels less transparent */
.card {
  background: rgba(11, 18, 32, 0.92) !important;   /* solid dark panel */
  border-color: rgba(255,255,255,.10) !important;
}
/* Fix: stop blue haze showing through the left sidebar */
.sidebar {
  background: rgba(11, 18, 32, 0.92) !important;
}

.tip {
  background: rgba(11, 18, 32, 0.80) !important;
}
/* LOGIN: eye icon always visible (works with your HTML: input then button) */
.pw-wrap{ position: relative; }
.pw-wrap input{ padding-right: 52px; }

.pw-wrap .eye-btn{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: 10px;
  cursor: pointer;
  z-index: 5;
  font-size: 16px;
  line-height: 1;
  opacity: .95;

  /* default on dark input */
  color: rgba(255,255,255,.85);
}

.pw-wrap .eye-btn:hover{
  background: rgba(255,255,255,0.08);
  opacity: 1;
}

/* when input is focused or has text (yellow), make the eye dark */
.pw-wrap input:focus + .eye-btn,
.pw-wrap input:not(:placeholder-shown) + .eye-btn,
.pw-wrap input:valid + .eye-btn,
.pw-wrap input:-webkit-autofill + .eye-btn{
  color: rgba(0,0,0,.70) !important;
}

/* extra safety: if wrapper is focused, also make it dark */
.pw-wrap:focus-within .eye-btn{
  color: rgba(0,0,0,.70) !important;
}
/* STOP Chrome autofill turning inputs yellow */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
  box-shadow: 0 0 0px 1000px rgba(10,14,22,0.55) inset !important;
  caret-color: rgba(255,255,255,0.92) !important;
  transition: background-color 999999s ease-in-out 0s;
}
/* --- Mobile: turn tables into stacked cards (no left/right scroll) --- */
@media (max-width: 820px){
  .table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 10px;
  }

  .table thead{
    display:none; /* hide header row on mobile */
  }

  .table, .table tbody, .table tr, .table td{
    display:block;
    width:100%;
  }

  .table tr{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    overflow:hidden;
    margin-bottom:10px;
  }

  .table td{
    border:0 !important;
    padding:10px 12px;
    display:flex;
    gap:10px;
    align-items:flex-start;
    justify-content:space-between;
  }

  .table td::before{
    content: attr(data-label);
    font-weight:800;
    opacity:.75;
    min-width: 120px;
  }
}
/* ===== Mobile hamburger sidebar ===== */
.mobile-only{ display:none; }

@media (max-width: 900px){
  .mobile-only{ display:inline-flex; }

  /* Layout becomes single column */
  .layout.container{ display:block; }
 
  /* Sidebar becomes a slide-in panel */
  .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(86vw, 320px);

    /* IMPORTANT: make it definitely above overlay */
    z-index: 10001;

    -webkit-transform: translate3d(-110%, 0, 0);
transform: translate3d(-110%, 0, 0);
will-change: transform;
    transition: transform .18s ease;
    overflow-y: auto;
    padding-top: 14px;

    /* IMPORTANT: ensure taps go to sidebar */
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.nav-open .sidebar{
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

  /* Dark overlay behind sidebar */
  .nav-overlay{
    display:none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);

    /* IMPORTANT: behind sidebar */
    z-index: 10000;

    /* catches taps OUTSIDE the sidebar */
    pointer-events: auto;
  }
  body.nav-open .nav-overlay{ display:block; }

  /* When menu is closed, overlay should not catch taps */
  body:not(.nav-open) .nav-overlay{
    display:none;
    pointer-events: none;
  }
  /* =========================================================
   Mobile helpers (FIX)
   - mobile-only should be hidden on desktop, visible on mobile
   - desktop-only should be visible on desktop, hidden on mobile
   ========================================================= */

.mobile-only { display: none !important; }
.desktop-only { display: block !important; }

/* Mobile breakpoint */
@media (max-width: 900px){
  .mobile-only { display: block !important; }
  /* Buttons should stay inline-flex */
  button.mobile-only,
  a.mobile-only.btn,
  .btn.mobile-only { display: inline-flex !important; }

  .desktop-only { display: none !important; }
}
/* Mobile fix: sidebar becomes overlay, main should be full width */
@media (max-width: 900px){
  .layout{
    display: block !important;
  }
  .sidebar{
    width: 320px;           /* keep your menu width */
  }
  .main{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Desktop: make the portal layout full-width (stop container centering) */
@media (min-width: 901px){
  .layout.container{
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Portal: force full-width on desktop (override container max-width) */
@media (min-width: 901px){
  body .container{
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Documents page: keep layout contained like other pages, but without using .container */
@media (min-width: 901px){
  .layout{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}/* Documents page: keep layout contained like other pages */
@media (min-width: 901px){
  #docsLayout{
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 901px){
  .container{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* Re-center the portal container on desktop */
@media (min-width: 901px){
  .container{
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .layout.container{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* inspections ticks */
.tick{
  display:inline-block;
  font-weight:800;
  font-size:16px;
  line-height:1;
  color:#16a34a !important;
}