/* Site2Site Plans Room — clean design system */
:root{
  --brand:#D15F32; --brand-600:#c1542b; --brand-700:#AC5330;
  --brand-soft:rgba(209,95,50,.12); --brand-ring:rgba(209,95,50,.28);
  --bg:#eef1f6; --surface:#fff; --surface-2:#f7f9fc;
  --border:#e4e8ef; --border-2:#eef1f6;
  --text:#1a2230; --muted:#687184;
  --danger:#e03131; --danger-soft:#ffe3e3;
  --warn:#f08c00; --warn-soft:#fff4e2;
  --ok:#2f9e44; --ok-soft:#e6f5ea;
  --blue:#1971c2; --blue-soft:#e7f1fb;
  --r:14px; --r-sm:9px;
  --sh-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --sh:0 6px 18px rgba(16,24,40,.08);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--brand-600)}

/* Topbar */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);height:62px;display:flex;align-items:center;gap:18px;padding:0 24px;position:sticky;top:0;z-index:50;box-shadow:var(--sh-sm)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand-mark{height:34px;width:auto;display:block;background:#fff;border-radius:8px;padding:3px;box-sizing:content-box}
.brand-text{font-size:16px;font-weight:600;letter-spacing:-.2px}
.brand-text strong{font-weight:800}
.topnav{display:flex;gap:4px;margin-left:14px}
.topnav a{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:600;font-size:13.5px}
.topnav a:hover{background:var(--surface-2);color:var(--text)}
.topnav a.active{background:var(--brand-soft);color:var(--brand-700)}
.topbar-spacer{flex:1}
.user-chip{display:flex;align-items:center;gap:9px;padding:5px 6px 5px 5px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2)}
.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.user-name{font-size:13px;font-weight:600}
.logout-btn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--muted);text-decoration:none}
.logout-btn:hover{background:var(--danger-soft);color:var(--danger)}

/* Layout */
.container{max-width:1080px;margin:0 auto;padding:30px 24px 60px}
.page-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.page-head h1{font-size:23px;font-weight:800;letter-spacing:-.4px}
.page-head .spacer{flex:1}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.center{text-align:center}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-sm);padding:22px;margin-bottom:18px}
.card h2{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.card h2 .fa{color:var(--brand)}

/* Job grid */
.job-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.job-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-sm);padding:18px;text-decoration:none;color:var(--text);transition:transform .08s,box-shadow .15s;display:block}
.job-card:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.job-card h3{font-size:15.5px;font-weight:700;margin-bottom:6px}
.job-card .addr{color:var(--muted);font-size:13px;margin-bottom:14px}
.job-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.job-stats{display:flex;gap:18px;border-top:1px solid var(--border-2);padding-top:12px;margin-top:4px}
.job-stats .st{display:flex;flex-direction:column}
.job-stats .st b{font-size:18px;font-weight:800}
.job-stats .st span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.2px}
.pill.open{background:var(--blue-soft);color:var(--blue)}
.pill.closed{background:var(--surface-2);color:var(--muted)}
.pill.won{background:var(--ok-soft);color:var(--ok)}
.pill.lost{background:var(--danger-soft);color:var(--danger)}
.pill.due{background:var(--warn-soft);color:var(--warn)}
.pill.bidding{background:var(--ok-soft);color:var(--ok)}
.pill.not_bidding{background:var(--danger-soft);color:var(--danger)}
.pill.pending{background:var(--surface-2);color:var(--muted)}
.pill.addendum{background:var(--warn-soft);color:var(--warn)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;font-weight:600;font-size:14px;font-family:inherit;background:var(--brand);color:#fff;text-decoration:none;transition:all .15s}
.btn:hover{background:var(--brand-600);transform:translateY(-1px);box-shadow:0 6px 16px -8px var(--brand)}
.btn.secondary{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn.secondary:hover{background:var(--surface-2);border-color:var(--brand);color:var(--brand-700);box-shadow:none}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:#c92a2a}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn.ghost{background:transparent;color:var(--muted);border-color:transparent}
.btn.ghost:hover{background:var(--surface-2);color:var(--text);box-shadow:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}

/* Forms */
label.field{display:block;margin:0 0 14px}
label.field>span{display:block;font-weight:600;margin-bottom:5px;font-size:13px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],input[type=search],textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm);font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);transition:border-color .15s,box-shadow .15s}
textarea{min-height:90px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-grid .full{grid-column:1/-1}
.checkbox{display:flex;align-items:center;gap:8px;font-weight:500;margin:8px 0}
.checkbox input{width:auto;accent-color:var(--brand)}

/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);margin:6px 0 0}
thead th{background:var(--surface-2);padding:11px 14px;text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
tbody td{padding:12px 14px;border-bottom:1px solid var(--border-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}

/* Drop zone */
.dropzone{border:2px dashed #c7d0dd;border-radius:var(--r);background:var(--surface-2);padding:40px 24px;text-align:center;cursor:pointer;transition:all .15s}
.dropzone:hover,.dropzone.drag{border-color:var(--brand);background:var(--brand-soft)}
.dropzone .fa{font-size:34px;color:var(--brand);margin-bottom:10px}
.dropzone h3{font-size:16px;font-weight:700;margin-bottom:4px}
.dropzone p{color:var(--muted);font-size:13px}
.dz-status{margin-top:12px;font-weight:600}

/* Banners */
.banner{padding:11px 14px;border-radius:var(--r-sm);font-size:13px;margin-bottom:16px;display:flex;gap:9px;align-items:center}
.banner.info{background:var(--blue-soft);color:var(--blue)}
.banner.warn{background:var(--warn-soft);color:#9a6a00}
.banner.ok{background:var(--ok-soft);color:var(--ok)}
.banner.err{background:var(--danger-soft);color:var(--danger)}

/* Floating auto-dismiss toast (flash confirmations) */
.toast{position:fixed;top:78px;right:24px;z-index:200;max-width:380px;margin:0;box-shadow:var(--sh-lg);animation:toastIn .25s ease}
.toast.hide{opacity:0;transform:translateY(-10px);transition:opacity .4s,transform .4s}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (max-width:600px){.toast{left:14px;right:14px;max-width:none}}

/* Cards/Table view toggle */
.view-toggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.view-toggle a{padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;background:var(--surface);display:inline-flex;align-items:center;gap:6px}
.view-toggle a+a{border-left:1px solid var(--border)}
.view-toggle a.active{background:var(--brand);color:#fff}

/* Sortable table headers */
.sorth{color:var(--muted);text-decoration:none;white-space:nowrap}
.sorth:hover{color:var(--text)}

/* Row highlight marker + colour palette */
.row-hl{background:none;border:0;cursor:pointer;padding:5px;font-size:15px;line-height:1;border-radius:6px}
.row-hl:hover{background:var(--surface-2);transform:none;box-shadow:none}
.hl-pop{position:fixed;z-index:200;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--sh);padding:8px;display:flex;gap:6px;flex-wrap:wrap;width:170px}
.hl-pop[hidden]{display:none}
.hl-swatch{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);cursor:pointer;display:grid;place-items:center;color:var(--muted);background:var(--surface)}
.hl-swatch:hover{border-color:var(--brand);transform:none;box-shadow:0 0 0 2px var(--brand-ring)}

/* Job label colour swatches (job details) */
.color-swatches{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.swatch-radio{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.swatch{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);cursor:pointer;display:grid;place-items:center;color:var(--muted);background:var(--surface)}
.swatch-radio:checked + .swatch{outline:3px solid var(--brand-ring);outline-offset:1px;border-color:var(--brand)}

/* Section tabs */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:20px;flex-wrap:wrap}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:11px 14px;font-weight:600;color:var(--muted);cursor:pointer;font-size:14px;border-radius:0}
.tabs button:hover{color:var(--text);transform:none;box-shadow:none;background:none}
.tabs button.active{color:var(--brand-700);border-bottom-color:var(--brand)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Login */
.login-wrap{min-height:calc(100vh - 0px);display:grid;place-items:center;padding:40px 16px}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:34px;width:100%;max-width:380px}
.login-card .brand-mark{height:74px;width:auto;padding:0;background:none;border-radius:0;margin:0 auto 14px;display:block}
.login-card h1{font-size:20px;font-weight:800;text-align:center;margin-bottom:4px}
.login-card p.sub{text-align:center;color:var(--muted);margin-bottom:22px;font-size:13px}

/* Contact list rows */
.sub-list{display:flex;flex-direction:column;gap:0}
.sub-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border-2)}
.sub-row:last-child{border-bottom:0}
.sub-row .nm{font-weight:600}
.sub-row .em{color:var(--muted);font-size:13px}
.sub-chips{display:flex;flex-wrap:wrap;gap:8px}
.sub-chips:empty{display:none}
.sub-chips:not(:empty){margin-top:12px}
.sub-chip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-soft);color:var(--brand-700);border:1px solid var(--brand-ring);border-radius:999px;padding:5px 6px 5px 12px;font-size:13px;font-weight:600}
.sub-chip-x{background:none;border:0;color:inherit;cursor:pointer;font-size:16px;line-height:1;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0}
.sub-chip-x:hover{background:rgba(0,0,0,.08);transform:none;box-shadow:none}

.list-empty{padding:28px;text-align:center;color:var(--muted)}

/* Site-visit photo thumbnails */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:6px}
.thumb{display:block;border:1px solid var(--border);border-radius:8px;overflow:hidden;aspect-ratio:1/1;background:var(--surface-2)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{border-color:var(--brand)}
.thumb.lightbox-link{cursor:zoom-in}

/* Photo lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,14,20,.92);z-index:300;display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:84vh;border-radius:8px;box-shadow:0 12px 48px rgba(0,0,0,.5);object-fit:contain;background:#000}
.lb-close{position:absolute;top:14px;right:20px;font-size:32px;line-height:1;color:#fff;background:none;border:0;cursor:pointer}
.lb-close:hover{color:#fff;background:none;transform:none;box-shadow:none}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:24px;cursor:pointer;display:grid;place-items:center}
.lb-nav:hover{background:rgba(255,255,255,.32);color:#fff;transform:translateY(-50%);box-shadow:none}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-cap{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#e8edf3;font-size:13px;padding:0 16px}
.lb-cap a{color:#cfe3ff;margin-left:8px}
@media (max-width:720px){.lb-nav{width:42px;height:42px;font-size:20px}.lb-prev{left:6px}.lb-next{right:6px}}

/* Pipeline stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:26px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-sm);padding:16px 18px}
.stat .v{font-size:25px;font-weight:800;letter-spacing:-.5px}
.stat .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-top:2px}
.stat .sub{font-size:12px;color:var(--muted);margin-top:4px}
.stat.alert .v{color:var(--warn)}

/* Modal + link-style button */
.modal-overlay{position:fixed;inset:0;background:rgba(16,24,40,.5);display:none;align-items:flex-start;justify-content:center;padding:48px 16px;z-index:100;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-lg);width:100%;max-width:560px;padding:26px;position:relative}
.modal h2{margin-bottom:2px}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;width:34px;height:34px;border-radius:8px}
.modal-close:hover{background:var(--surface-2);color:var(--text);transform:none;box-shadow:none}
.linklike{background:none;border:0;padding:0;color:var(--brand-700);font-weight:700;cursor:pointer;font:inherit}
.linklike:hover{text-decoration:underline;background:none;box-shadow:none;transform:none}
tr.pq-row{cursor:pointer}

/* Activity timeline */
.activity{list-style:none}
.activity li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--border-2)}
.activity li:first-child{border-top:0}
.act-icon{width:32px;height:32px;border-radius:50%;background:var(--brand-soft);color:var(--brand-700);display:grid;place-items:center;flex-shrink:0}
.act-body{flex:1}

/* Job card priority star + full-card click cover */
.job-card{position:relative}
.card-cover{position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.star-toggle{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:#c2cad6;background:none;text-decoration:none}
.star-toggle:hover{background:var(--surface-2);color:var(--warn);transform:none;box-shadow:none}
.job-card.starred{border-color:#f1cf78}
.job-card.starred .star-toggle{color:var(--warn)}

/* Bid board filter tabs (sub portal) */
.board-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.board-tab{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-weight:600;font-size:13.5px;color:var(--muted);cursor:pointer;font-family:inherit}
.board-tab:hover{border-color:var(--brand);color:var(--brand-700);background:var(--brand-soft);transform:none;box-shadow:none}
.board-tab.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* Bid leveling accordion */
.lvl-group{border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:10px;background:var(--surface);overflow:hidden}
.lvl-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none}
.lvl-head:hover{background:var(--surface-2)}
.lvl-head:focus-visible{outline:2px solid var(--brand-ring);outline-offset:-2px}
.lvl-chev{color:var(--muted);transition:transform .15s;width:12px;text-align:center}
.lvl-group.open .lvl-chev{transform:rotate(90deg)}
.lvl-name{font-weight:700}
.lvl-sum{color:var(--muted);font-size:12.5px;margin-left:auto;text-align:right}
.lvl-body{display:none;border-top:1px solid var(--border-2)}
.lvl-group.open .lvl-body{display:block}
.lvl-body table{border:0;border-radius:0;box-shadow:none;margin:0}

/* ============ Mobile ============ */
@media (max-width:720px){
  .container{padding:18px 14px calc(92px + env(safe-area-inset-bottom,0px))}

  /* Topbar keeps brand + account; the nav becomes a bottom tab bar */
  .topbar{padding:0 14px;gap:10px;height:56px}
  .brand-text{font-size:15px}
  .user-name{display:none}

  .topnav{
    position:fixed;left:0;right:0;bottom:0;margin:0;z-index:60;gap:0;
    background:var(--surface);border-top:1px solid var(--border);
    display:flex;justify-content:space-around;align-items:stretch;
    padding:7px 4px calc(8px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -2px 12px rgba(16,24,40,.08)
  }
  .topnav a{flex:1;flex-direction:column;gap:3px;padding:5px 2px;border-radius:10px;text-align:center;color:var(--muted)}
  .topnav a i{font-size:18px}
  .topnav a span{display:block;font-size:10px;line-height:1.15;font-weight:600}
  .topnav a.active{background:var(--brand-soft);color:var(--brand-700)}

  /* Stack & breathe */
  .form-grid{grid-template-columns:1fr}
  .page-head{flex-wrap:wrap;gap:10px}
  .page-head h1{font-size:20px}
  .card{padding:16px}
  .btn{padding:11px 16px}

  /* 16px inputs stop iOS from zooming on focus */
  input[type=text],input[type=email],input[type=password],input[type=date],
  input[type=time],input[type=number],input[type=search],textarea,select{font-size:16px}

  /* Wide tables scroll horizontally instead of squishing */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}

  /* Section tabs scroll horizontally instead of wrapping */
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex-shrink:0;white-space:nowrap;padding:11px 12px}

  /* Modals use the screen */
  .modal-overlay{padding:14px 8px}
  .modal{padding:20px}

  /* Toast pinned above the bottom nav */
  .toast{top:auto;bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}