:root{
  --splash-in: 800ms;
  --splash-hold: 800ms;
  --splash-out: 800ms;
  --login-fade: 1000ms;
}

:root {
  --sb-collapsed: 60px;
  --sb-expanded: 300px;
}

/* main layout */

input , textarea , select{
        background: #EFF8F1!important;
}

#app {
  display: flex;
  min-height: 100vh;
}

/* HARD rule for the real sidebar */
#app > #sidebar {
  flex: 0 0 var(--sb-collapsed);
  width: var(--sb-collapsed);
  min-width: var(--sb-collapsed);
  max-width: var(--sb-collapsed);
  /* keep your background etc. */
}

/* when expanded */
html.sidebar-expanded #app > #sidebar {
  flex: 0 0 var(--sb-expanded);
  width: var(--sb-expanded);
  min-width: var(--sb-expanded);
  max-width: var(--sb-expanded);
}

/* belt + braces: anything INSIDE content called .sidebar is NOT the real one */
#content .sidebar,
#content aside.sidebar {
  width: auto !important;
  flex: 1 1 auto !important;
}


html,body{height:100%}
*{box-sizing:border-box; font-family: Arial, sans-serif;}
body{
  margin:0;
  color:#111;
  overflow-x:hidden;
}

/* BACKGROUND GATE: stop bg.png flashing before JS runs */
html:not(.bg-ready) body{
  background:#fff !important;
  background-image:none !important;
}



.hidden{display:none!important}

/* ===== Splash ===== */
#splash{
  position:fixed; inset:0; display:grid; place-items:center;
  z-index:1000; pointer-events:none;
}
#splash img{
  width:clamp(420px, 44vw, 980px);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));
  opacity:0;
  transform:translateY(8px);
}
html.bg-ready #splash img{
  animation:splashText calc(var(--splash-in) + var(--splash-hold) + var(--splash-out)) ease both;
}
@keyframes splashText{
  0%        {opacity:0; transform:translateY(8px)}
  33.333%   {opacity:1; transform:translateY(0)}
  66.666%   {opacity:1; transform:translateY(0)}
  100%      {opacity:0; transform:translateY(-6px)}
}

/* ===== Login ===== */
#login{
  position:fixed; inset:0;
  display:grid; place-items:center;
  min-height:100dvh;
  z-index:1100; isolation:isolate;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity var(--login-fade, 800ms) ease, visibility 0s linear var(--login-fade, 800ms);
  will-change: opacity;
}
#login.show{ opacity:1; visibility:visible; pointer-events:auto; transition: opacity var(--login-fade, 800ms) ease, visibility 0s; }
.login-card{
  width:min(420px,92vw);
  background:#E6EEF5; backdrop-filter:blur(6px); color:#e5e7eb;
  border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:26px 22px 20px;
  box-shadow:0 24px 70px rgba(0,0,0,.55); animation:pop .5s ease-out both;
}
@keyframes pop{from{transform:scale(.98);opacity:.9} to{transform:scale(1);opacity:1}}
.logo{display:grid; place-items:center; margin-bottom:8px}
.logo img{height:44px}
.login-sub{text-align:center; color:#000000; margin:25px 0 5px}
label{display:block; font-size:13px; color:#d1d5db; margin:10px 2px 6px}
#login input{width:100%; background:#F2FDF4; border:1px solid #2a3140; color:#092449; border-radius:8px; padding:12px; outline:none}
#login input::placeholder{color:#526070; opacity:1;}
input:focus{border-color:#092449; box-shadow:0 0 0 3px rgba(120,190,67,.18)}
.btn{width:150px; margin-top:16px; background:#E6EEF5; color:#fff; font-weight:800; border:solid 2px #fff; border-radius:10px; padding:12px 14px; cursor:pointer; transition:filter .15s, transform .03s}
.btn:hover{background:#092449; color:#fff;}
.login-error{min-height:18px; margin-top:10px; font-size:13px; color:#ff6b6b}

/* ===== App shell ===== */
#app{
  display:flex;           /* sidebar + content */
  width:100%;
  min-height:100vh;
}



/* ===== Sidebar — EXACT OLD STYLES ===== */

/* Sticky wrapper (old behaviour) */
.sticky-sidebar{
  position: sticky;
  top: 0;
  width: 100%;
}

/* Hide labels when collapsed (old selector) */
html.sidebar-collapsed .menu-text { display: none; }

/* aside element styled like old `.sidebar` */
.sidebar{
  width: 60px; /* default collapsed width */
  background-color: #fff;
  background-image: url('');
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  color: #41485a;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  transition: width 0.3s ease;
}

/* header row */
.logo-container{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: center;
}
.logo{ height: 30px; }

#logo{
  display: none; /* hidden when collapsed */
  max-width: 55%;
  margin: 10px 0 10px 10px;
}
#logo-small{
  display: block; /* visible when collapsed */
  width: 40px;
  height: 20px;
  margin-top: 6px;
  margin-left: 10px;
  margin-right: 10px;
}

/* hamburger (exact) */
.hamburger{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  width: 30px;
  height: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  margin-right: 10px;
}
.hamburger span{
  display: block;
  width: 100%;
  height: 2px;
  background-color: black;
  border-radius: 2px;
}
.hamburger span:nth-child(1){ width: 75%; margin-left: auto; }
.hamburger span:nth-child(3){ width: 55%; margin-left: auto; }

/* nav list */
.menu{ width: 100%; transition: opacity 0.3s ease; }
.menu ul{
  list-style: none;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* row pills */
.menu li{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 90%;
  height: 50px;
  margin: 7px 0;
  padding: 0 10px;
  border-radius: 5px; /* old = 5px */
  transition: background-color 0.3s ease;
  font-size: 18px;
}
.menu li:hover{ background-color: #ecf7ee; }
.menu li.current-page{ background-color: #ecf7ee; }

/* link content (flex, like old) */
.menu li a{
  display: flex;
  align-items: center;
  width: 100%;
  text-decoration: none;
  color: #41485a;
}

/* icon (exact sizes/spacings) */
.menu li .menu-icon{
  flex: 0 0 50%;
  max-width: 35px;
  height: auto;
  margin-right: 10px;
  display: block;
}

/* text (exact) */
.menu li .menu-text{
  flex: 1;
  text-align: left;
  font-size: 18px;
  white-space: nowrap;
  margin-left: 40px;
}

/* collapsed vs expanded visibility */
html.sidebar-collapsed #logo{ display:none; }
html.sidebar-collapsed #logo-small{ display:block; }
html.sidebar-expanded  #logo{ display:block; }
html.sidebar-expanded  #logo-small{ display:none; }
/* add anywhere in your CSS */
html.no-splash #splash { display: none !important; }


/* width toggles (old selectors) */
.sidebar-collapsed .sidebar{ width: 60px; }
.sidebar-expanded .sidebar{ width: 300px; }

/* optional search parity if you re-add it */
#search-icon{ display:block; margin-top:30px; }
#search-box{ display:none; }
.sidebar-expanded #search-icon{ display:none; }
.sidebar-expanded #search-box{ display:block; }

/* logout row (parity) */
.logout{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 10px;
}
.logout a{
  text-decoration: none;
  color: #41485a;
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-left: 10px;
}

/* ===== Main panel ===== */
.main-content{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:linear-gradient(0deg, #092449 50%, #092449 50%);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  border-bottom:1px solid rgba(0,0,0,.06); background:rgba(255,255,255,.75); backdrop-filter:blur(4px);
}
.content{ padding:18px; background:transparent; flex:1 1 auto; }
#sidebar .menu ul {
  list-style: none;
  padding-inline-start: 0;
  padding: 0;      /* belt + braces */
  margin: 0;
}
/* ===== OLD HEADER STYLES (exact) ===== */
.header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0px 20px;
}

/* text/icons are white over the gradient */
.user-info { display: flex; align-items: center; color: #fff; }

.user-info .icons img {
  width: 30px;
  height: auto;
  cursor: pointer;
  margin: 0 10px;
}

.user-info .user-profile {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.user-profile img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  background-color: #fff;
}

.user-profile a {
  text-decoration: none;
  display: flex;
  color: #fff;
  font-size: 18px;
  align-items: center;
}

/* (keep your .main-content gradient as-is) */
.dashboard-title{
    display: block;
    font-size: 1.7em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-block-start: 0px;
    unicode-bidi: isolate;
    color:#fff;
    font-weight: normal;
    letter-spacing: 1.5px;
}

.nq-back-btn{
  margin-left:auto;              /* shoves it to the right */
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:8px;
  background:#092449;
  color:#fff !important;
  font-weight:800;
  font-size:14px;
  letter-spacing:.3px;
  text-decoration:none !important;
  border:1px solid #092449;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transform:translateY(0);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.nq-back-btn:hover{
  background:#092449;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}

.nq-back-btn:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}

.nq-back-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(120,190,67,.25), 0 6px 16px rgba(0,0,0,.12);
}

/* Mobile: don’t squish the title */
@media (max-width: 700px){
  .dashboard-title{
    flex-wrap:wrap;
  }
  .nq-back-btn{
    width:100%;
    justify-content:center;
    margin-left:0;
    margin-top:8px;
  }
}

.bold{
  font-weight: bold;
}

 .dashboard-title {
    font-size: 24px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: 200;
    letter-spacing: 1.5px;
  }
  .dashboard .highlight { color:#fff; font-weight:1000; }

    .dashboard { width:95%; margin:0 auto; }
  .dashboard-title {
    font-size: 24px; margin-bottom: 20px; color: #fff;
    font-weight: 200; letter-spacing: 1.5px;
  }
  .dashboard .highlight { color:#fff; font-weight:1000; }
  /* If your layout uses .main-content wrapper, this keeps the green/blue split bg */
  .main-content { background: linear-gradient(0deg, #092449 50%, #092449 50%); padding:20px; }

  .stats {
    display:flex; gap:30px; margin:40px 0;
    justify-content: space-between; flex-wrap: wrap;
  }
  .stat-card,
  .views,.other,.input,.visits{
    flex:1 1 220px; max-width:400px; min-width:220px; height:150px;
    background:#fff; border-radius:15px;
    box-shadow: rgba(0,0,0,0.24) 0 3px 8px;
    padding:15px 15px 35px; text-align:center;
  }
  .stat-value{ font-size:40px; font-weight:bold; }
  .stat-value.green{ color:#092449; }
  .stat-value.red{ color:#e65a5a; }

  .charts{
    display:flex; gap:20px; justify-content:space-evenly;
    flex-wrap:wrap; align-content:center;
  }
  .charts > *{
    flex:1 1 500px; min-width:500px; box-sizing:border-box;
    background:#fff; border-radius:15px; padding:20px;
    box-shadow: rgba(0,0,0,0.24) 0 3px 8px;
  }

  @media (max-width: 540px){
    .charts > *{ min-width:100%; }
    .stat-card{ min-width:100%; }
  }

  /* Center the whole Survey Review block and match the old width rhythm */
#surveySection {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;     /* center */
  padding: 0;         /* keep old spacing (children handle their own) */
}
/* --- base for quote screen --- */
.quote-form-shell {
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,.05);
  padding:20px;
}

.searchable-input {
  width:100%;
  background:#EFF8F1;
  border:1px solid #ddd;
  border-radius:4px;
  padding:8px 10px;
  font-size:14px;
  color:#092449; /* add this */
}
.searchable-input::placeholder {
  color:#6b7c93;
}

/* top card – match old .combined-card */
#nq-combined-card.combined-card {
  background:#EFF8F1;
  border:1px solid #d4e8d3;
  border-radius:8px;
  padding:12px 16px;
  margin-bottom:20px;
}
#nq-combined-card .info-row {
  display:flex;
  justify-content:space-between;
  margin-bottom:4px;
}
#nq-combined-card .info-label {
  font-weight:700;
  color:#555;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:1px;
}
#nq-combined-card .info-value {
  font-weight:600;
  color:#333;
}
#nq-combined-card .totals-row {
  display:flex;
  justify-content:space-around;
  align-items:center;
  margin-top:10px;
  border-top:1px solid #d4e8d3;
  padding-top:8px;
}
#nq-combined-card .totals-item h3 {
  font-size:11px;
  text-transform:uppercase;
  color:#555;
  margin-bottom:4px;
}
#nq-combined-card .totals-item p {
  font-size:18px;
  font-weight:700;
  color:#333;
}

/* quote items block */
.quote-items-block h3 {
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#555;
  margin-bottom:6px;
}
#nq-items-container {
  background:#f9f9f9;
  border-radius:4px;
  padding:6px;
  min-height:36px;
}
.nq-item-row {
  display:flex;
  gap:6px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:4px;
  padding:6px;
  margin-bottom:6px;
  align-items:flex-start;
}
.nq-drag-handle {
  cursor:grab;
  user-select:none;
  font-size:16px;
  margin-right:2px;
  color:#092449;
}
.nq-item-row .searchable-input,
.nq-item-row textarea {
  background:#EFF8F1;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:13px;
  color:#333;
  min-height:34px;
}
.nq-item-row textarea {
  resize:vertical;
}
.nq-item-row .nq-item-del {
  background:#ff4d4d;
  color:#fff;
  border:none;
  border-radius:4px;
  width:28px;
  height:28px;
  cursor:pointer;
}
#nq-add-item {
  margin-top:8px;
  background:#092449;
  color:#fff;
  border:none;
  border-radius:4px;
  padding:6px 12px;
  cursor:pointer;
}
#nq-add-item:hover {
  background:#2d3040;
}
#nq-subtotal, #nq-total {
  font-weight:700;
}

/* autocomplete for products */
.nq-prod-dd {
  /* created in JS, we just make it pretty */
  background:#fff;
  border:1px solid #ddd;
  border-radius:6px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  overflow:hidden;
  font-size:13px;
}
.nq-prod-dd > div {
  padding:6px 10px;
  cursor:pointer;
}
.nq-prod-dd > div:hover {
  background:#ecf7ee;
}

/* defects panel – match old */
.defects-block {
  margin-top:20px;
}
.defects-head {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.defects-head h3 {
  margin:0;
}
.defects-head .area-control {
  margin-left:auto;
  display:flex;
  gap:6px;
  align-items:center;
}
#nq-defects .defect-section,
#nq-defects > div {
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  padding:10px;
  margin-bottom:6px;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
#nq-defects .defect-text {
  flex:1;
}
#nq-defects .defect-section strong {
  color:#092449;
}

/* buttons: reuse old look */
.btn,
.send-quote-btn {
  background:#092449;
  border:none;
  border-radius:4px;
  color:#fff;
  cursor:pointer;
  padding:8px 14px;
  font-weight:600;
}
.btn:hover,
.send-quote-btn:hover {
  background:#14C4D6;
}
.draft-btn {
  background:none;
  border:none;
  color:#969696;
  font-weight:600;
  cursor:pointer;
}
.draft-btn:hover {
  color:#000;
}
.quote-reset {
  background:#092449;
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
  padding:4px 10px;
  font-size:13px;
}

/* action bar */
.action-buttons-smt {
  display:flex;
  justify-content:flex-end;
  gap:14px;
  align-items:center;
  width:100%;
}

/* match old textareas inside trumbowyg */
.trumbowyg-box {
  margin-top:6px;
}

/* mobile-ish */
@media (max-width:900px){
  .nq-item-row {
    flex-wrap:wrap;
  }
  .defects-head {
    flex-wrap:wrap;
  }
}

/* Base size for all tables */
table { font-size: 14px; }

/* Make header cells match the table size */
table th { font-size: inherit; }  /* stays 14px to match <table> */


table tr > th:last-child,
table tr > td:last-child,
table.surveys tr > th:last-child,
table.surveys tr > td:last-child {
  text-align: right !important;
}

/* ================================
   Tenant overrides: C91F92CJ
   ================================ */
html.tenant-c91f92cj .main-content{
  /* Fallback split colours (top / bottom) */
  background-color: #2D282A !important;
  background-image:
    url('./images/arkebg.png'),
    linear-gradient(to bottom, #2D282A 0 50%, #375A65 50% 100%) !important;

  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}