:root{
  --ink:#1c2230;
  --ink-soft:#5b6472;
  --line:#e3e7ee;
  --bg:#f4f6f9;
  --panel:#ffffff;
  --brand:#f8660c;
  --brand-dark:#c14f09;
  --brand-soft:#feefe6;
  --red:#b3392c;
  --red-soft:#fbe9e6;
  --shadow: 0 1px 2px rgba(20,25,35,.04), 0 6px 20px rgba(20,25,35,.06);
  --radius: 14px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}
.topbar{
  padding:16px 20px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 4px rgba(20,25,35,.05);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky; top:0; z-index:10;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand .mark{
  width:34px;height:34px;
  display:block;
  border-radius:8px;
}
.brand .name{font-weight:700;font-size:14.5px;letter-spacing:-.1px;}
.brand .eyebrow{
  font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--brand-dark); margin-top:1px;
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel-head{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}
.panel-head h2{margin:0;font-size:15px;font-weight:650;}
.panel-head p{margin:2px 0 0;font-size:12.5px;color:var(--ink-soft);}
.panel-body{padding:16px 18px;}

label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
  margin:12px 0 5px;
}
label:first-child{margin-top:0;}
input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], textarea, select{
  width:100%;
  padding:10px 12px;
  border:1px solid #d7dce4;
  border-radius:9px;
  font-size:15px;
  font-family:inherit;
  color:var(--ink);
  background:#fbfcfd;
}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--brand);
  background:#fff;
}
textarea{resize:vertical;min-height:56px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 16px;
  border-radius:9px;
  border:1px solid transparent;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-ghost{background:#fff;border-color:#d7dce4;color:var(--ink);}
.btn-decline{background:#fff;color:var(--red);border-color:#e6c6c1;}
.btn-danger{background:#fff;color:var(--red);border-color:#e6c6c1;}
.btn-danger:hover{background:var(--red-soft);}
.btn-block{width:100%;margin-top:14px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.badge{
  font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
}
.badge.sent{background:#eef1f6;color:#4c5566;}
.badge.accepted{background:var(--brand-soft);color:var(--brand-dark);}
.badge.declined{background:var(--red-soft);color:var(--red);}
.badge.completed{background:#e6eefc;color:#2a4f8f;}
.badge.cancelled{background:#eee;color:#767c87;}

.empty{padding:24px 18px;color:var(--ink-soft);font-size:13px;text-align:center;}

.status-banner{
  margin-top:12px;
  padding:10px 12px;
  border-radius:9px;
  font-size:13px;
  font-weight:600;
}
.status-banner.accepted{background:var(--brand-soft);color:var(--brand-dark);}
.status-banner.declined{background:var(--red-soft);color:var(--red);}

.photo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px;
}
.photo-thumb{
  aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#eef1f6;
  border:1px solid var(--line);
}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.upload-box{
  margin-top:10px;
  border:1.5px dashed #c6cdd9;
  border-radius:10px;
  padding:16px;
  text-align:center;
  font-size:13px;
  color:var(--ink-soft);
  cursor:pointer;
  background:#fbfcfd;
}
.file-input{display:none;}

.toast-stack{
  position:fixed; bottom:16px; left:16px; right:16px;
  display:flex;flex-direction:column;gap:8px;
  z-index:50;
  align-items:center;
}
.toast{
  background:var(--ink);
  color:#fff;
  padding:11px 15px;
  border-radius:10px;
  font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  max-width:420px;
  text-align:center;
}

.container{max-width:640px;margin:0 auto;padding:18px;}
.wide-container{max-width:1100px;margin:0 auto;padding:18px;}

/* Jobs tab: New job form + Sent jobs list side by side on desktop. Each
   column has a 320px floor so form fields stay usable — but that floor
   means two of them plus the gap need ~660px, wider than a phone screen.
   Below that, force a single column so the page actually fits instead of
   forcing a shrink-to-fit zoom on mobile. */
.jobs-two-col{
  display:grid; grid-template-columns: minmax(320px,1fr) minmax(320px,1fr); gap:18px; align-items:start;
}
/* Dropdown that switches between the two panels on phone widths — hidden
   entirely on desktop, where both panels already show at once and there's
   nothing to switch between. */
.jobs-mobile-switcher{ display:none; }
@media (max-width:860px){
  .jobs-two-col{ grid-template-columns: 1fr; }
  .jobs-mobile-switcher{ display:block; padding-bottom:0; }
  .jobs-mobile-switcher label{ margin-top:0; }
  /* Only one panel shows at a time on phone — which one is controlled by
     the dropdown's selected value via data-active on the grid container. */
  .jobs-two-col[data-active="new"] [data-jobs-panel="sent"]{ display:none; }
  .jobs-two-col[data-active="sent"] [data-jobs-panel="new"]{ display:none; }
}

.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.stat-tile{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 16px;
}
.stat-label{font-size:11.5px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.3px;}
.stat-value{font-size:20px;font-weight:700;margin-top:6px;}
@media (max-width:720px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
}

.filter-bar{
  display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;
}
.filter-bar input[type=text]{flex:2; min-width:180px;}
.filter-bar select{flex:1; min-width:140px;}

.main-tabs{
  display:flex; gap:4px; max-width:1100px; margin:0 auto; padding:0 18px;
  background:var(--panel); border-bottom:1px solid var(--line);
  overflow-x:auto;
  /* Without these, swiping across the tabs on a touchscreen can get
     interpreted as a vertical drag too, so the whole page jitters/bounces
     instead of the tab strip sliding cleanly left-right. touch-action locks
     the gesture to horizontal; overscroll-behavior-x stops the swipe from
     "leaking" into the page behind it (like a pull-to-refresh bounce) once
     it hits the first/last tab; -webkit-overflow-scrolling adds momentum on
     older iOS Safari, which doesn't scroll smoothly without it. */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.main-tab-btn{
  border:none; background:transparent; cursor:pointer; font-family:inherit;
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  padding:12px 14px 10px; white-space:nowrap;
  border-bottom:2.5px solid transparent; margin-bottom:-1px;
}
.main-tab-btn:hover{color:var(--ink);}
.main-tab-btn.active{color:var(--brand); border-bottom-color:var(--brand);}
.main-tab-btn .count{
  display:inline-block; margin-left:6px; font-size:11px; font-weight:700;
  background:var(--brand-soft); color:var(--brand-dark); border-radius:999px;
  padding:1px 7px;
}

.sub-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px 16px; margin-bottom:12px;
}
.status-pill{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  border-radius:999px; padding:3px 10px;
}
.status-pill.available{background:#e7f7ec; color:#1a7a3d;}
.status-pill.unavailable{background:#f1f1ee; color:#6b6f76;}
.status-pill.on-job{background:var(--brand-soft); color:var(--brand-dark);}

.view-toggle{display:flex; border:1px solid #d7dce4; border-radius:9px; overflow:hidden;}
.view-toggle-btn{
  border:none; background:#fff; padding:7px 12px; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); cursor:pointer; font-family:inherit;
}
.view-toggle-btn.active{background:var(--brand); color:#fff;}

.schedule-day-label{
  font-size:12px; font-weight:700; color:var(--ink-soft); text-transform:uppercase;
  letter-spacing:.3px; margin:16px 0 8px;
}
.schedule-day-label:first-child{margin-top:0;}

.job-card{
  padding:12px;
  border:1px solid var(--line);
  border-radius:11px;
  margin-bottom:10px;
}
.job-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.job-card .title{font-weight:650;font-size:13.5px;}
.job-card .meta{font-size:12px;color:var(--ink-soft);margin-top:3px;}
.job-card .who{font-size:12px;color:var(--ink-soft);margin-top:6px;}
.job-card .link-row{margin-top:8px;display:flex;gap:6px;align-items:center;}
.job-card .link-row input{font-size:11.5px;padding:6px 8px;}
.job-card .actions-row{margin-top:8px;display:flex;gap:6px;}
.small-btn{font-size:11.5px;padding:6px 10px;}

.modal-overlay{
  position:fixed; inset:0; background:rgba(20,25,35,.45);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:100;
}
.modal{
  background:var(--panel);
  border-radius:var(--radius);
  max-width:560px; width:100%;
  max-height:85vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.modal-head{
  padding:16px 20px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  position:sticky; top:0; background:var(--panel);
}
.modal-head h3{margin:0; font-size:15.5px;}
.modal-head .close-btn{
  border:none; background:none; font-size:20px; line-height:1; cursor:pointer;
  color:var(--ink-soft); padding:2px 6px;
}
.modal-body{padding:16px 20px;}
.modal-photo-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px;
}
.modal-photo-grid a{display:block; aspect-ratio:1/1; border-radius:8px; overflow:hidden; border:1px solid var(--line);}
.modal-photo-grid img{width:100%;height:100%;object-fit:cover;display:block;}
.modal-section-label{font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:16px 0 4px;}
.modal-section-label:first-child{margin-top:0;}
.modal-note{font-size:13.5px; background:#f7f8fa; border-radius:9px; padding:10px 12px;}

/* ---------------------------------------------------------------------
   Contractor portal (me.html + job.html) — the field-facing pages a sub
   opens from a text/email link. Same design tokens as the admin panel,
   but dressed up a bit more (avatar header, icon rows, accent borders)
   since this is the only KARD-branded surface most subs ever see and it
   should read as a real business tool, not a bare form. */

.sub-hero{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; margin-bottom:18px;
}
.sub-hero-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--brand), var(--brand-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:17px;
}
.sub-hero-name{font-weight:700; font-size:15.5px;}
.sub-hero-sub{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}

.section-label-icon{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.4px;
  margin:20px 4px 9px;
}
.section-label-icon:first-child{margin-top:0;}
.section-label-icon svg{flex-shrink:0; color:#98a1b0;}

.job-card-link{text-decoration:none; color:inherit; display:block;}
.job-card-portal{
  position:relative;
  padding-right:32px;
  border-left-width:3px; border-left-style:solid; border-left-color:var(--line);
}
.job-card-portal .chevron{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:#b3bac6; display:flex;
}
.job-card-portal .meta-rows{margin-top:8px; display:flex; flex-direction:column; gap:5px;}
.job-card-portal .meta-row{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft);}
.job-card-portal .meta-row svg{flex-shrink:0; color:#98a1b0;}
.job-card-portal .meta-row.pay{color:var(--brand-dark); font-weight:650;}
.job-card-portal .meta-row.pay svg{color:var(--brand-dark);}
.job-card-portal.accent-sent{border-left-color:var(--brand); background:#fffaf6;}
.job-card-portal.accent-accepted{border-left-color:#2a5fa8;}
.job-card-portal.accent-completed{border-left-color:#2f9e57;}
.job-card-portal.accent-declined{border-left-color:var(--red);}

.portal-empty{
  text-align:center; padding:36px 20px; color:var(--ink-soft);
}
.portal-empty svg{color:#c6cdd9; margin-bottom:10px;}
.portal-empty .headline{font-size:14px; font-weight:600; color:var(--ink); margin-bottom:3px;}
.portal-empty .sub{font-size:12.5px;}

.portal-footer{
  text-align:center; font-size:11px; color:var(--ink-soft); opacity:.65;
  padding:26px 4px 6px;
}

.job-info-rows{display:flex; flex-direction:column; gap:9px; margin:14px 0;}
.job-info-row{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; line-height:1.35;}
.job-info-row svg{flex-shrink:0; margin-top:2px; color:var(--brand-dark);}
.job-info-row .label{color:var(--ink-soft); font-weight:600; margin-right:3px;}
.job-info-row a.map-link{color:var(--brand-dark); text-decoration:none; font-weight:600;}
.job-info-row.pay-row .pay-amount{color:var(--brand-dark); font-weight:750; font-size:14.5px;}

.status-banner{display:flex; align-items:center; gap:8px;}
.status-banner svg{flex-shrink:0;}

.upload-box{display:flex; flex-direction:column; align-items:center; gap:5px;}
.upload-box svg{color:#9aa3b2;}

/* Result pages (payment success/cancel, booking confirmation) — a plain
   colored circle + icon instead of an emoji, so it renders identically
   across phones/platforms instead of however each OS draws its emoji font. */
.result-icon{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.result-icon.success{background:#e7f7ec; color:#1a7a3d;}
.result-icon.neutral{background:#f1f1ee; color:#6b6f76;}

/* "First to accept" ribbon on broadcast job offers. */
.offer-ribbon{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  color:var(--brand-dark); background:var(--brand-soft);
  padding:4px 10px; border-radius:999px; margin-bottom:10px;
}

/* "Call/text the office" + "Email" links shown on contractor-facing pages
   so a sub with a problem on-site (wrong gate code, no one home) has an
   obvious way to reach a person instead of being stuck on a static page. */
.contact-row{display:flex; gap:8px; margin-top:14px;}
.contact-office{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 10px;
  border:1px solid var(--line); border-radius:9px;
  font-size:13px; font-weight:600; color:var(--ink-soft);
  text-decoration:none; background:#fbfcfd;
}
.contact-office svg{flex-shrink:0; color:var(--brand-dark);}