/* ============================================================
   Feazel Roof Replacement Phasing Plan
   app.css  (WHITE SITE FIX)

   Keeps:
   - Reduced border-radius globally (via vars)
   - Larger table/list headers; bolder phase + building text
   - Current-year/final prices in dark blue; delay in dark orange
   - Phase legend pills (map + print) in phase colors w/ white text
   - Up/Down arrows tighter + no outline
   - No spacing between phase groups + tighter phase headers
   - Map taller (+75px)
   - Pin bubbles padded left/right
   - Bottom page spacing + footer line

   Fixes:
   - Restores white background + light surfaces everywhere
   - Removes leftover dark/navy panels, sticky headers, modals, etc.
   ============================================================ */

:root{
  /* Light site system */
  --bg:#ffffff;
  --panel:#ffffff;
  --panel2:#f6f8fc;
  --card:#ffffff;
  --ink:#0b1220;
  --muted:#5b6b82;
  --border:rgba(11,18,32,.12);
  --shadow: 0 10px 25px rgba(11,18,32,.09);

  /* Halved-ish radii */
  --radius: 6px;
  --radius2: 10px;

  /* Column tints */
  --greenBg: rgba(24,169,87,.10);
  --blueBg:  rgba(31,111,235,.10);
  --orangeBg:rgba(209,154,44,.10);

  /* Column inks */
  --greenInk:#14532d;
  --blueInk:#1e3a8a;     /* dark blue */
  --orangeInk:#9a3412;   /* dark orange */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:'Barlow', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:var(--ink);
}

a{ color:inherit; }
.hidden{ display:none !important; }

/* =========================
   Auth / Login
   ========================= */
body.auth{
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 28px 18px;
  background:
    radial-gradient(1100px 520px at 10% 10%, rgba(31,111,235,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(24,169,87,.14), transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(209,154,44,.16), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
}

.auth-card{
  width: min(460px, 100%);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,18,32,.14);
  border-radius: var(--radius2);
  box-shadow: 0 18px 46px rgba(11,18,32,.14);
  backdrop-filter: blur(10px);
  overflow: hidden;
  padding: 18px;
}

.auth-brand{
  
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(11,18,32,.10);
  margin-bottom: 14px;
}

.auth-brand img{
  height: 34px;
  width: auto;
  display: block;
}

.auth-title{
  font-weight: 900;
  color: #263b5e;
  line-height: 1.1;
}

.auth-form label{
  display: block;
  margin-bottom: 12px;
}

.auth-form label > span{
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: rgba(11,18,32,.70);
  margin-bottom: 6px;
}

/* If you forget class="input", still style auth inputs */
.auth-form input[type="password"],
.auth-form input[type="text"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(11,18,32,.14);
  background: #fff;
  color: rgba(11,18,32,.92);
  outline: none;
  font-weight: 800;
}
.auth-form input:focus{
  border-color: rgba(31,111,235,.45);
  box-shadow: 0 0 0 3px rgba(31,111,235,.18);
}

.auth-form .btn{
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
}

.auth-error{
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color: rgba(140,12,12,.95);
  font-weight: 900;
}


.wrap{
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 18px 110px; /* bottom breathing room */
}
/* =========================
   Topbar (light)
   ========================= */
.topbar{
  position: relative; /* no sticky */
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 10px 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 260px;
}
.logo{ height: 30px; width:auto; margin-right: 5px }
.pipe{ opacity:.45; font-weight:700; color: var(--muted); }
.page-name{ font-weight:900; color:#263b5e; }

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Topbar nav buttons: slightly smaller */
.topbar .btn{
  padding: 7px 10px;
  font-size: 13px;
}

.topbar .btn.tiny{
  padding: 6px 9px;
  font-size: 12px;
}
/* Status pill */
.status{
  font-weight:900;
  font-size:12px;
  color: rgba(11,18,32,.86);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,18,32,.06);
  border: 1px solid rgba(11,18,32,.10);
  display:none;
}
.status.on{ display:inline-flex; }
.status.err{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.35);
  color: rgba(140,12,12,.95);
}

/* Buttons (light) */
.btn{
  border: 1px solid rgba(11,18,32,.14);
  background: rgba(255,255,255,.92);
  color: rgba(11,18,32,.92);
  padding: 9px 12px;
  border-radius: var(--radius);
  font-weight:900;
  cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ background: rgba(246,248,252,1); border-color: rgba(11,18,32,.18); }
.btn:active{ transform: translateY(1px); }

.btn.primary{
  background: #263b5e;
  border-color: #263b5e;
  color: #fff;
}
.btn.primary:hover{ background: #1f2f4c; }

.btn.danger{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.30);
  color: rgba(140,12,12,.95);
}
.btn.danger:hover{ background: rgba(239,68,68,.14); }

.btn.tiny{
  padding: 7px 10px;
  border-radius: var(--radius);
}

.btn.green{
  background: rgba(24,169,87,.10);
  border-color: rgba(24,169,87,.28);
  color: rgba(8,90,40,.95);
}
.btn.green:hover{ background: rgba(24,169,87,.14); }

.btn.icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px;
  width: 38px;
  height: 38px;
}
.btn.icon svg{ width:18px; height:18px; }
#phaseModalBody .icon-x{
  grid-column: 4;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding-bottom: 2px; /* visually align with selects */
}

#phaseModalBody .icon-x .btn.icon{
  border-color: rgba(154,52,18,.25);
  background: rgba(209,154,44,.10);
  color: var(--orangeInk);            /* dark orange */
}
#phaseModalBody .icon-x .btn.icon:hover{
  background: rgba(209,154,44,.16);
  border-color: rgba(154,52,18,.32);
}
#phaseModalBody .icon-x .btn.icon:disabled{
  opacity: .25;
  background: rgba(11,18,32,.04);
  border-color: rgba(11,18,32,.10);
  color: rgba(11,18,32,.35);
}

.share-link-inline{
  display:flex;
  gap:10px;
  align-items:center;
}

.share-link-inline .input{
  flex:1;
}

/* Footer layout: Disable far left, Done far right */
.share-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
/* Panels (light) */
.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Compact / polished Share modal */
.share-modal{
  width: 560px;
  max-width: calc(100vw - 28px);
}

.share-modal .modal-body{
  padding-top: 12px;
  padding-bottom: 10px;
}

.share-modal .pin-form{
  gap: 8px;
}

.share-modal .pin-field .label{
  margin-bottom: 6px;
  font-size: 12px;
}

.share-modal #shareLinkInput{
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 10px;
}

.share-modal .modal-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: space-between;
}

/* Disable button far left */
.share-modal #rotateShareLinkBtn{
  margin-right: auto;
}

/* Copy Link sits right next to Done */
.share-modal #copyShareLinkBtn{
  order: 2;
}

.share-modal #doneShareModalBtn{
  order: 3;
}

/* Slightly tighter buttons in this modal only */
.share-modal .modal-actions .btn{
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
}

/* =========================
   Landing proposal cards
   ========================= */
.proposal-card{
  padding: 0;
	 margin-bottom: 10px;;
}

.proposal-card:last-child{ margin-bottom: 0; }

.proposal-card-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 14px;
}

.proposal-card-left{
  min-width: 0;
  flex: 1;
}

.proposal-card-title{
  font-weight: 900;
  font-size: 18px;        /* big + bold property name */
  color:#263b5e;
  line-height: 1.15;
  margin: 0 0 6px;
  display:flex;
  gap: 10px;
  align-items:baseline;
  flex-wrap: wrap;
}

.proposal-card-meta{
  font-size: 12px;
  font-weight: 800;
  color: rgba(11,18,32,.62);
}

.proposal-card-right{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
  flex: 0 0 auto;
}

.badge{
  font-size: 11px;
  font-weight: 900;
  color: rgba(11,18,32,.72);
  background: rgba(11,18,32,.06);
  border: 1px solid rgba(11,18,32,.10);
  padding: 4px 8px;
  border-radius: 999px;
}

.badge.badge-brand{
  color: #1d4f91;
  background: rgba(94,130,188,.16);
  border: 1px solid rgba(94,130,188,.38);
  white-space: nowrap;
}

.panel + .panel{ margin-top: 14px; }

.panel-head{ padding: 14px 14px 0; }
.panel-title{ font-weight: 900; font-size: 16px; color:#263b5e; }

.label{
  display:block;
  font-size: 12px;
  font-weight: 900;
  color: rgba(11,18,32,.70);
  margin-bottom: 6px;
}

.input{
  width:100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(11,18,32,.14);
  background: #fff;
  color: rgba(11,18,32,.92);
  outline:none;
  font-weight: 800;
}
.input:focus{
  border-color: rgba(31,111,235,.45);
  box-shadow: 0 0 0 3px rgba(31,111,235,.18);
}
.input.small{ width: 90px; }
/* Branding dropdown a bit longer */
#brandSelect{
  width: 100%;
  min-width: 210px;
}
#communityInput{
  min-width: 320px;
}
.muted{ color: rgba(11,18,32,.58); font-weight:700; }
.inline{ display:flex; align-items:center; gap:8px; }

/* Landing list */
.landing .list{ padding: 10px 14px 14px; }
.landing .list .muted{ padding: 14px 8px; } /* “No proposals yet” padding */

/* Editor layout */
.editor-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* ============================================================
   Proposal header row — 4 items, always side-by-side, no overlap
   ============================================================ */

.proposal-panel{ padding: 14px; }

.proposal-row{
  white-space: nowrap;
  font-size: 0; /* removes inline-block gaps */
}

.proposal-row > *{
  display: inline-block;
  vertical-align: bottom;
  white-space: normal;
  font-size: 14px;
}

.proposal-row .proposal-field:nth-child(1){ width: 39%; padding-right:1% }
.proposal-row .proposal-field:nth-child(2){ width: 12%; padding-right:1%}
.proposal-row .proposal-field:nth-child(3){ width: 28%; padding-right:1% }
.proposal-row .proposal-actions{ width: 17%; white-space: nowrap; }


/* =========================
   Map panel
   ========================= */
.map-panel{ padding: 0; }

.map-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel2);
}

.addr{ display:flex; gap:8px; flex:1; }
.tool-group{ display:flex; gap:8px; }

.map-wrap{
  position: relative;
  height: 515px; /* +75px */
}
#map{
  position:absolute;
  inset:0;
}

/* Compass top-right */
/* Compass top-right (smaller, white, 50% alpha, arrow) */
.compass{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 10;
  opacity: .75;
}

.compass .needle{
  width: 18px;
  height: 18px;

  /* solid fill */
  background: rgba(255,255,255,.96);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.30));
  transform-origin: 50% 50%;

  /* nav arrow silhouette (points UP by default) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 3,10.5 10.6,12.6 12,22 13.4,12.6 21,10.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 3,10.5 10.6,12.6 12,22 13.4,12.6 21,10.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* kill the old pseudo-elements */
.compass .needle::before,
.compass .needle::after{
  content:none !important;
}


/* Map legend bottom-left as pills */
.legend{
  position:absolute;
  left: 14px;
  bottom: 14px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  z-index: 10;
  background: transparent;
  border: none;
  padding: 0;
}
.leg-pill{
  color:#fff;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
}

/* Pin */
.ph-pin{
  position: relative;
  transform: translate(-50%, -100%);
  user-select:none;
}
.ph-pin-panel{
  padding: 3px 7px; /* tighter */
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.95);
  color:#fff;
  font-weight: 900;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.ph-pin-caret{
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid rgba(255,255,255,.95);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.14));
}
.ph-pin-trash{
  position:absolute;
  left: 50%;
  top: -18px;                 /* higher */
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(11,18,32,.14);
  background: rgba(255,255,255,.92);
  color: rgba(11,18,32,.92);
  display:none;
  cursor:pointer;
}
.ph-pin.active .ph-pin-trash{ display:inline-flex; align-items:center; justify-content:center; }
.ph-pin-trash svg{ width: 16px; height:16px; }

/* Add Building modal stacked layout */
#pinModalBack .modal-body,
#pinModalBack .pin-body,
#pinModalBack .modal-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#pinModalBack input {
  width: 100%;
}

/* Add Building form: force single-column stack */
#pinModalBack .pin-form{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#pinModalBack .pin-form .pin-field{
  width: 100%;
}

/* =========================
   List panel
   ========================= */
.list-panel{ padding: 0;  position: relative;
  overflow: visible; }

/* =========================
   Std / GP pricing toggle tab (attached to list panel)
   Appears only when JS removes .hidden
   ========================= */
/* =========================
   Std / GP pricing toggle tab
   ========================= */
#priceModeToggle{
  position: absolute;
  right: -44px;                 /* hangs off the list panel edge */
  top: 25px;
  z-index: 50;
  display: flex;
  flex-direction: column;

  background: rgba(255,255,255,.96) !important;
  border-color: rgba(11,18,32,.26) !important;
  border-left: none;            /* "attached" look */
  border-radius: 0 10px 10px 0;
  overflow: hidden;

  box-shadow: 0 10px 22px rgba(11,18,32,.14);
  backdrop-filter: blur(10px);
}

#priceModeToggle button{
  width: 44px;
  height: 34px;
  border: 0;
  margin: 0;

  background: transparent !important;
  color: #82868C !important;          /* strong readable idle */
  opacity: 1 !important;        
  font-weight: 900;
  font-size: 12px;
 -webkit-text-fill-color: #82868C !important; /* catches weird iOS/webkit cases */
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

#priceModeToggle button + button{
  border-top: 1px solid rgba(11,18,32,.22)!important; border-radius: 0!important /* clean divider line */
}

#priceModeToggle button:hover{
  background: rgba(11,18,32,.05);
	 color: #05BF03 !important;
  -webkit-text-fill-color: #05BF03 !important;
}

#priceModeToggle button.on{
     /* strong active fill */
  color: #0C660B !important;
  -webkit-text-fill-color: #0C660B !important;
}


/* =========================
   Auto Budget (brain) toggle tab (attached to list panel)
   - Available in BOTH editor + share
   ========================= */
#autoBudgetToggle{
  position: absolute;
  left: -44px;                  /* hangs off the left edge */
  top: 25px;
  z-index: 51;
  width: 44px;
  height: 44px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.96);
  border: 1px solid rgba(11,18,32,.26);
  border-right: none;
  border-radius: 10px 0 0 10px;

  box-shadow: 0 10px 22px rgba(11,18,32,.14);
  backdrop-filter: blur(10px);

  cursor: pointer;
  user-select:none;
}
#autoBudgetToggle:hover{ background: rgba(255,255,255,1); }
#autoBudgetToggle .brain{
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}
#autoBudgetToggle .dot{
  position:absolute;
  right: 8px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(5,191,3,.9);
  box-shadow: 0 0 0 2px rgba(255,255,255,.95);
  display:none;
}
#autoBudgetToggle.on .dot{ display:block; }

#autoBudgetBack .ab-top{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}
#autoBudgetBack .ab-note{
  font-size: 12px;
  color: rgba(11,18,32,.70);
  font-weight: 700;
}
#autoBudgetBack .ab-controls{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
}
#autoBudgetBack .ab-controls label{
  display:flex;
  align-items:center;
  gap: 6px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(11,18,32,.82);
}
#autoBudgetBack .ab-table{
  width:100%;
  border-collapse: collapse;
}
#autoBudgetBack .ab-table th,
#autoBudgetBack .ab-table td{
  border-bottom: 1px solid rgba(11,18,32,.10);
  padding: 10px 8px;
  text-align:left;
  vertical-align:middle;
}
#autoBudgetBack .ab-table th{
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(11,18,32,.62);
  font-weight: 900;
  background: rgba(11,18,32,.03);
}
#autoBudgetBack .ab-money{
  font-weight: 900;
  color: rgba(11,18,32,.88);
  white-space:nowrap;
}
#autoBudgetBack .ab-input{
  width: 140px;
  max-width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(11,18,32,.14);
  background:#fff;
  font-weight: 900;
  color: rgba(11,18,32,.92);
}
#autoBudgetBack .ab-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 8px;
  border-radius: 99px;
  border: 1px solid rgba(11,18,32,.12);
  background: rgba(11,18,32,.04);
  font-weight: 900;
  font-size: 12px;
  color: rgba(11,18,32,.82);
}
#autoBudgetBack .ab-summary{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
#autoBudgetBack .ab-box{
  border: 1px solid rgba(11,18,32,.12);
  border-radius: var(--radius2);
  padding: 10px;
  background: rgba(11,18,32,.03);
}
#autoBudgetBack .ab-box .k{
  font-size: 12px;
  font-weight: 900;
  color: rgba(11,18,32,.62);
  text-transform: uppercase;
}
#autoBudgetBack .ab-box .v{
  margin-top: 6px;
  font-size: 14px;
  font-weight: 900;
  color: rgba(11,18,32,.92);
}



/* Make sure list panel is the positioning anchor */
.list-panel{ position: relative; }

.list-head{
  position: relative; /* no sticky => no overlay */
  top: auto;
  z-index: 1;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.phase-table-head{
  display:grid;
  grid-template-columns: 1.25fr .55fr .55fr .55fr;
  gap: 0;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 14px; /* larger headers */
  color: rgba(11,18,32,.86);
}
/* Header labels: match column ink colors */
.phase-table-head .col-money:nth-child(2){ color: var(--blueInk); }   /* 2026 Pricing */
.phase-table-head .col-money:nth-child(3){ color: var(--orangeInk); } /* Price of Delay */
.phase-table-head .col-money:nth-child(4){ color: var(--greenInk); }  /* Full Total */
.phase-table-head .col-name{ color: #263b5e; } /* Phase & Buildings header */

.phase-table-head > .cell-green,
.phase-table-head > .cell-blue,
.phase-table-head > .cell-orange{
  background: transparent !important;
}
.col-name{ padding-right:10px; }
.col-money{ text-align:right; }

.phase-list{
  display:flex;
  flex-direction:column;
  gap: 0;           /* no spacing between phases */
  padding: 0;       /* no extra padding above/below phase names */
}
.phase-group{
  border-top: 1px solid rgba(11,18,32,.08);
}
.phase-group:first-child{ border-top: none; }

.phase-row{
  display:grid;
  grid-template-columns: 1.25fr .55fr .55fr .55fr;
  gap: 0;
  align-items: stretch; /* let cells fill full row height */
}
/* Phase header (tight, no bubble) */
.phase-header .phase-title-cell{
  padding: 10px 12px; /* tight */
  color:#fff; /* phase title cell is colored inline via JS */
}
.phase-header .build-title{
  line-height: 1.05;
  margin: 0;
  display:flex;
  flex-wrap:wrap;
  gap:0;
}

/* “Phase X” bigger + bolder */
.phase-header .build-title .ph{
  font-weight: 900;
  font-size: 17px;
}

/* Separator subtle */
.phase-header .build-title .sep{
  font-weight: 700;
  font-size: 16px;
  opacity: .85;
}

/* Timing/year: slightly smaller + less bold */
.phase-header .build-title .when{
  font-weight: 800;
  font-size: 16px;
  opacity: .92;
}
/* Row separators */
.phase-row{ border-bottom: 1px solid rgba(11,18,32,.08); }
.phase-group:last-child .phase-row:last-child{ border-bottom: none; }

/* Vertical centering inside stretched grid cells */
.build-row .build-name,
.phase-header .phase-title-cell,
.money{
  display:flex;
  align-items:center;
}
.money{ justify-content:flex-end; }

/* Cells */
.build-row .build-name{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 5px 12px; /* less vertical padding */
  background: rgba(11,18,32,.01);
}

/* Non-negotiable (locked) flag icon */
.build-flag{
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11,18,32,.12);
  background: rgba(255,255,255,.80);
  border-radius: 10px;
  cursor: pointer;
  color: rgba(11,18,32,.35); /* greyed out */
}
.build-flag svg{ width: 18px; height: 18px; }
.build-flag:hover{ background: rgba(255,255,255,1); color: rgba(11,18,32,.55); }
.build-flag.on{
  color: rgba(185,28,28,.95);
  border-color: rgba(185,28,28,.28);
  background: rgba(239,68,68,.10);
}
.build-flag.on:hover{ background: rgba(239,68,68,.14); }
.build-row .build-title{
  font-weight: 900; /* bolder building names */
  font-size: 16px;
  color: rgba(11,18,32,.92);
}

/* Building title: bold auto-number + optional normal-weight label */
.build-row .build-title .bnum{ font-weight: 900; }
.build-row .build-title .blabel{
  font-weight: 400;
  opacity: .88;
}

/* Up/Down arrows */
.phase-arrows{
  display:flex;
  flex-direction:column;
  gap: 0px; /* closer together */
  width: 20px;
  align-items:center;
  justify-content:center;
  flex: 0 0 20px;
}
.phase-arrows button{
  width: 20px;
  height: 16px;
  border: none;              /* not outlined */
  color: rgba(11,18,32,.86);
	background: #fff !important;
  cursor:pointer;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}
.phase-arrows button:hover{ color:rgba(16,63,156,1.00); }
.phase-arrows button:disabled{
  opacity: .28;
  cursor: default;
}

/* Column backgrounds */
.cell-green{ background: var(--greenBg); }
.cell-blue{ background: var(--blueBg); }
.cell-orange{ background: var(--orangeBg); }
/* Darker tints on Phase header rows */
.phase-header .cell-green{ background: rgba(24,169,87,.14); }
.phase-header .cell-blue{  background: rgba(31,111,235,.14); }
.phase-header .cell-orange{background: rgba(209,154,44,.14); }

/* Phase header totals: restore right padding + make them slightly less prominent than building prices */
.phase-header .money{
  padding: 10px 14px 10px 12px; /* extra right padding */
  font-size: 16px;              /* 2px bigger than regular prices */
  font-weight: 900;
}
/* Lighter tints on Building rows */
.build-row .cell-green{ background: rgba(24,169,87,.08); }
.build-row .cell-blue{  background: rgba(31,111,235,.08); }
.build-row .cell-orange{background: rgba(209,154,44,.08); }

.feazel-footer {width: 100%; margin-top: -55px; text-align: center}
.money{
  padding: 10px 12px;
  text-align:right;
  font-weight: 900;
  font-size: 14px;
  color: rgba(11,18,32,.92);
}

/* Column ink overrides */
.money.cell-blue,
.cell-blue .money{ color: var(--blueInk); }     /* current-year/final in dark blue */
.money.cell-orange,
.cell-orange .money{ color: var(--orangeInk); } /* delay in dark orange */

/* Only the editable Current Price cell needs padding reset */
/* Full Total (editable) needs a little right padding like the other columns */
.build-row .cell-green{
  padding: 0 12px 0 0;  /* right padding matches .money */
}

/* Make sure the input fills the padded space cleanly */
.build-row .cell-green .price-input{
  padding: 10px 0;      /* vertical only; horizontal handled by the cell */
}
/* Price input */
.price-input{
  width: 100%;
  border: none;
  outline:none;
  background: transparent;
  padding: 10px 12px;
  text-align:right;
  font-weight: 900;
  font-size: 14px; /* same size as other prices */
  color: rgba(11,18,32,.92);
}
.cell-blue .price-input{ color: var(--blueInk); }
.cell-orange .price-input{ color: var(--orangeInk); }

.build-row.empty .build-name{
  color: rgba(11,18,32,.58);
}



/* Footer totals */
.list-footer{
  padding: 14px;
  border-top: 1px solid var(--border);
  background: var(--panel2);
}

.grandTotals{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:flex-end;
  justify-content:space-between;
}

.grandBox{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 10px 12px;
  min-width: 220px;
}
.grandBox .label{ margin:0 0 6px; }
.grandBox .value{
  font-weight: 900;
  font-size: 18px; /* main line size */
  line-height: 1.05;
}

/* Main + alternate price stack (injected by JS) */
.grandBox .value .grand-main{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.05;
}

.grandBox .value .grand-alt{
  margin-top: 6px;
  font-weight: 900;
  font-size: 14px;           /* smaller under main price */
  opacity: .88;
}

.grandBox .value .grand-alt-label{
  margin-top: 2px;
  font-weight: 800;
  font-size: 12px;           /* per brief */
  opacity: .70;
}
.grandBox.emphasis{
  border-color: rgba(209,154,44,.35);
  background: rgba(209,154,44,.10);
}

/* Grand totals: make the 3 boxes match column colors (blue/orange/green) */
.grandTotals .grandBox:nth-of-type(1){
  background: var(--blueBg);
  border-color: rgba(31,111,235,.30);
}
.grandTotals .grandBox:nth-of-type(1) .value{ color: var(--blueInk); }

.grandTotals .grandBox:nth-of-type(2){
  background: var(--orangeBg);
  border-color: rgba(209,154,44,.35);
}
.grandTotals .grandBox:nth-of-type(2) .value{ color: var(--orangeInk); }

.grandTotals .grandBox:nth-of-type(3){
  background: var(--greenBg);
  border-color: rgba(24,169,87,.30);
}
.grandTotals .grandBox:nth-of-type(3) .value{ color: var(--greenInk); }
/* (Optional) labels slightly darker inside tinted boxes */
.grandTotals .grandBox .label{
  color: rgba(11,18,32,.72);
}

.price-disclaimer{
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.82);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(11,18,32,.78);
}

.price-disclaimer strong{
  color: rgba(11,18,32,.92);
}

.grandInline{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 240px;
}

.projectTotals{
  margin-top: 12px;
  display:grid;
  gap: 8px;
}
.pt-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius2);
}
.pt-label{ font-weight:900; color: rgba(11,18,32,.70); }
.pt-value{ font-weight:900; color: rgba(11,18,32,.92); }
.pt-row.emphasis{
  border-color: rgba(209,154,44,.35);
  background: rgba(209,154,44,.10);
}
.pt-row.emphasis .pt-value{ color: var(--orangeInk); }

/* =========================
   Modals (light)
   ========================= */
.modal-back{
  position:fixed;
  inset:0;
  background: rgba(11,18,32,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 300;
  padding: 18px;
}
.modal{
  width: 680px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
}


.pin-field .input{ width:100%; }

#shareLinkInput{
  width:100%;
  font-size:12px;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel2);
}
.modal-title{
  font-weight: 900;
  font-size: 16px;
  color:#263b5e;
}
.modal-body{ padding: 12px; }
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: #fff;
}

.pin-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cell-select{
  width:100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(11,18,32,.14);
  background: #fff;
  color: rgba(11,18,32,.92);
  font-weight: 900;
}

/* Phase timing modal rows */
#phaseModalBody .phase-row{
  display:grid;
  grid-template-columns: 110px minmax(0,1fr) minmax(0,1fr) 38px; /* add delete column */
  gap: 10px;                          /* tighter */
  align-items: end;                   /* align to dropdown bottoms */
  padding: 8px 8px;                   /* slightly tighter */
  border-bottom: 1px solid rgba(11,18,32,.08);
}
#phaseModalBody .phase-name{
  font-weight: 900;
  color: rgba(11,18,32,.92);
}

/* Footer line */
.site-footer{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px 22px;
}
.site-footer-inner{
  margin-top: 18px;
  text-align:center;
  font-weight: 900;
  font-size: 12px;
  color: rgba(11,18,32,.48);
}

/* =========================
   Landing: search + pagination
   ========================= */
.panel-head-split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.panel-tools{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

.proposal-brand-filter{
  width: 150px;
  min-width: 150px;
  flex: 0 0 150px;
}

.proposal-search{
  width: 280px;
  max-width: 46vw;
}

.proposal-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px 14px;
}
.proposal-pager .pager-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.proposal-pager .pager-pages{
  font-weight:800;
  color: rgba(11,18,32,.72);
}

/* Flashing attention badge (Saved via link…) */
.badge.badge-attn{
  border: 1px solid rgba(239,68,68,.65);
  color: rgba(185,28,28,.98);
  background: rgba(239,68,68,.10);
  animation: badgeFlash 1.6s ease-out 1;
}
@keyframes badgeFlash{
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.00); }
  18%  { box-shadow: 0 0 0 6px rgba(239,68,68,0.20); }
  35%  { box-shadow: 0 0 0 0 rgba(239,68,68,0.00); }
  55%  { box-shadow: 0 0 0 6px rgba(239,68,68,0.18); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.00); }
}

/* =========================
   Login screen polish
   ========================= */
body.auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(38,59,94,.20), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(125,166,57,.14), transparent 60%),
    radial-gradient(900px 600px at 40% 90%, rgba(210,137,12,.12), transparent 60%),
    #f6f8fc;
}

.auth-card{
  width: 520px;
  max-width: 100%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,18,32,.10);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(11,18,32,.14);
  padding: 20px 20px 18px;
  backdrop-filter: blur(10px);
}

.auth-brand img{
  width: 240px;
  max-width: 100%;
  height:auto;
  display:block;
  margin: 4px auto 8px;
}

.auth-title{
  text-align:center;
  margin: 6px 0 14px;
  font-weight: 900;
  color:#263b5e;
}

.auth-form{
  display:grid;
  gap: 12px;
}

.auth-form label{
  display:grid;
  gap: 6px;
  font-weight: 800;
  color: rgba(11,18,32,.72);
  font-size: 12px;
}

.auth-form input{
  width:100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(11,18,32,.14);
  background: #fff;
  font-weight: 700;
  outline: none;
}

.auth-form input:focus{
  border-color: rgba(38,59,94,.38);
  box-shadow: 0 0 0 4px rgba(38,59,94,.10);
}

.auth-form button{
  margin-top: 6px;
}

.auth-err{
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(239,68,68,.40);
  background: rgba(239,68,68,.08);
  color: rgba(185,28,28,.98);
  font-weight: 800;
}



/* Responsive */
@media (max-width: 920px){
	  /* Keep the Std/GP tab visible on smaller screens */
  #priceModeToggle{
    right: 10px;     /* move inside the panel on mobile */
    top: 10px;
    border-right: 1px solid rgba(11,18,32,.14);
    border-radius: 9px;
  }
  .map-toolbar{ flex-direction:column; align-items:stretch; }
  .tool-group{ justify-content:flex-end; }
  .pin-form{ grid-template-columns: 1fr; }
  .phase-table-head,
  .phase-row{ grid-template-columns: 1.2fr .6fr .6fr .6fr; }
  .map-wrap{ height: 455px; }
	.phase-arrows{ display:none !important; }
}