/* ==========================================================================
   RENOVATRR — Contractor OS
   Design system: industrial / blueprint aesthetic
   Fonts: Big Shoulders Display (display), Archivo (body), IBM Plex Mono (data)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* surfaces */
  --bg:            #14171a;
  --bg-blueprint:  #12151a;
  --surface:       #1c2024;
  --surface-2:     #22262b;
  --surface-3:     #292e34;
  --border:        #33393f;
  --border-soft:   #262b30;

  /* text */
  --text:          #eef1f3;
  --text-dim:      #a7afb6;
  --text-mute:     #6d757c;

  /* brand */
  --orange:        #ff6b35;
  --orange-dim:    #e8501f;
  --orange-glow:   rgba(255,107,53,.22);
  --steel:         #4a90a4;
  --steel-bright:  #6fc2dc;

  /* status */
  --green:         #33c17a;
  --amber:         #f5a623;
  --red:           #e5484d;
  --violet:        #9d7fe8;

  /* type */
  --f-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-body:    'Archivo', -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --radius:    3px;
  --radius-lg: 6px;
  --nav-w:     236px;
  --nav-w-collapsed: 68px;
  --topbar-h:  62px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; overflow-x:hidden; }
body{
  margin:0;
  background:
    linear-gradient(var(--bg-blueprint), var(--bg-blueprint)),
    repeating-linear-gradient(0deg, rgba(74,144,164,.055) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(74,144,164,.055) 0 1px, transparent 1px 32px);
  color: var(--text);
  font-family: var(--f-body);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--orange); color:#fff; }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; letter-spacing:.3px; margin:0; text-transform:uppercase; }
.mono{ font-family:var(--f-mono); }

/* scrollbar */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--border); }

/* ==========================================================================
   AUTH / LOGIN SHELL
   ========================================================================== */
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
}
@media (max-width:860px){ .auth-shell{ grid-template-columns:1fr; } .auth-side{ display:none; } }

.auth-side{
  position:relative;
  background:
    radial-gradient(circle at 20% 20%, var(--orange-glow), transparent 45%),
    linear-gradient(160deg,#1a1e22,#0f1113);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px;
  overflow:hidden;
}
.auth-side::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 40px);
  pointer-events:none;
}
.auth-side .blurb{ position:relative; max-width:420px; }
.auth-side .blurb h1{ font-size:42px; line-height:1.05; margin-bottom:16px; }
.auth-side .blurb p{ color:var(--text-dim); font-size:15px; }
.auth-stats{ position:relative; display:flex; gap:28px; margin-top:40px; }
.auth-stats div b{ display:block; font-family:var(--f-mono); font-size:22px; color:var(--orange); }
.auth-stats div span{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text-mute); }

.auth-form-wrap{ display:flex; align-items:center; justify-content:center; padding:32px; }
.auth-card{ width:100%; max-width:380px; }
.auth-card .field{ margin-bottom:16px; }
.auth-foot{ margin-top:20px; text-align:center; font-size:13px; color:var(--text-mute); }
.auth-foot a{ color:var(--orange); font-weight:600; }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.app-shell{ display:flex; min-height:100vh; }

/* ---- Sidebar ("island") ---- */
.sidebar{
  width:var(--nav-w);
  flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--border);
  position:fixed; top:0; left:0; bottom:0;
  display:flex; flex-direction:column;
  z-index:100;
  transition:transform .2s ease, width .2s ease;
}
.sidebar-brand{
  height:var(--topbar-h);
  display:flex; align-items:center; gap:10px;
  padding:0 18px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sidebar-brand img{ height:26px; width:26px; }
.sidebar-brand .word{ font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:.5px; }
.sidebar-brand .word b{ color:var(--orange); }

.nav-scroll{ flex:1; overflow-y:auto; padding:14px 10px; }
.nav-group{ margin-bottom:18px; }
.nav-group-label{
  font-family:var(--f-mono); font-size:10px; letter-spacing:1.5px;
  color:var(--text-mute); text-transform:uppercase;
  padding:0 10px; margin-bottom:6px;
}
.nav-link{
  display:flex; align-items:center; gap:11px;
  padding:9px 10px; border-radius:var(--radius);
  color:var(--text-dim); font-size:13.5px; font-weight:500;
  border-left:2px solid transparent;
  margin-bottom:2px;
}
.nav-link .ic{ width:17px; height:17px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.8; }
.nav-link:hover{ background:var(--surface-2); color:var(--text); }
.nav-link.active{ background:var(--surface-2); color:var(--text); border-left-color:var(--orange); }
.nav-link.active .ic{ stroke:var(--orange); }
.nav-badge{
  margin-left:auto; font-family:var(--f-mono); font-size:10px;
  background:var(--surface-3); color:var(--text-dim);
  padding:1px 6px; border-radius:10px;
}

.sidebar-foot{
  border-top:1px solid var(--border); padding:12px;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.avatar{
  width:32px; height:32px; border-radius:var(--radius);
  background:linear-gradient(135deg,var(--orange),var(--orange-dim));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; color:#14171a; font-size:14px; flex-shrink:0;
}
.sidebar-foot .who{ overflow:hidden; }
.sidebar-foot .who b{ display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-foot .who span{ font-size:11px; color:var(--text-mute); }

/* ---- Main column ---- */
.main{
  margin-left:var(--nav-w);
  flex:1; min-width:0;
  display:flex; flex-direction:column;
}

/* ---- Topbar ("island") ---- */
.topbar{
  height:var(--topbar-h);
  border-bottom:1px solid var(--border);
  background:rgba(20,23,26,.85);
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:80;
  display:flex; align-items:center; gap:18px;
  padding:0 24px;
}
.hamburger{
  display:none; width:34px; height:34px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface-2);
  align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.hamburger span, .hamburger span::before, .hamburger span::after{
  content:""; display:block; width:16px; height:2px; background:var(--text); position:relative;
}
.hamburger span::before{ position:absolute; top:-5px; }
.hamburger span::after{ position:absolute; top:5px; }

/* title absorbs all leftover space, which is what actually pins search+actions
   to the right edge — a fixed-width sibling with margin-left:auto only works
   while every sibling before it stays visible, and breaks the moment one
   (e.g. search) is hidden on mobile. flex:1 here fixes that for good. */
.topbar-title{
  font-family:var(--f-display); font-size:20px; letter-spacing:.4px;
  flex:1; min-width:0; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar-title .crumb{
  font-family:var(--f-mono); font-size:11px; color:var(--text-mute);
  display:block; letter-spacing:1px; text-transform:uppercase; line-height:1.4;
}

.topbar-search{
  flex-shrink:0; display:flex; align-items:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:7px 12px; width:240px; color:var(--text-mute);
}
.topbar-search input{ background:none; border:0; outline:0; color:var(--text); font-size:13px; width:100%; }
.topbar-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.icon-btn{
  width:36px; height:36px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer;
}
.icon-btn .ic{ width:17px; height:17px; stroke:var(--text-dim); fill:none; stroke-width:1.8; }
.icon-btn .dot{ position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--orange); border:1.5px solid var(--surface-2); }

/* content */
.content{ padding:24px; flex:1; min-width:0; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.page-head h1{ font-size:26px; }
.page-head p{ color:var(--text-mute); font-size:12.5px; font-family:var(--f-mono); margin-top:4px; letter-spacing:.5px; text-transform:uppercase; }

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:9px 16px; border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-weight:600; font-size:13px;
  cursor:pointer; white-space:nowrap;
}
.btn .ic{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.btn-primary{ background:var(--orange); border-color:var(--orange); color:#181008; }
.btn-primary:hover{ background:var(--orange-dim); }
.btn-ghost{ background:transparent; }
.btn-sm{ padding:6px 11px; font-size:12px; }
.btn-danger{ background:transparent; border-color:var(--red); color:var(--red); }

/* card / island */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px;
  min-width:0; /* critical: lets grid/flex children shrink instead of stretching the page width */
}
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card-head h3{ font-size:14px; letter-spacing:.5px; }
.card-head .tag{ font-family:var(--f-mono); font-size:10.5px; color:var(--text-mute); }

/* stat grid */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.stat-grid > *{ min-width:0; }
.stat-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1100px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stat-grid, .stat-grid.cols-3{ grid-template-columns:1fr; } }
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--orange);
  border-radius:var(--radius-lg); padding:16px 18px; position:relative; overflow:hidden;
}
.stat-card.steel{ border-left-color:var(--steel); }
.stat-card.green{ border-left-color:var(--green); }
.stat-card.violet{ border-left-color:var(--violet); }
.stat-card .lbl{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--text-mute); }
.stat-card .val{ font-family:var(--f-display); font-size:32px; margin:6px 0 4px; }
.stat-card .delta{ font-size:11.5px; font-weight:600; }
.stat-card .delta.up{ color:var(--green); }
.stat-card .delta.down{ color:var(--red); }

/* grid layout helpers */
.grid-2{ display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.grid-2 > *{ min-width:0; }
@media (max-width:980px){ .grid-2{ grid-template-columns:1fr; } }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-3 > *{ min-width:0; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } }

/* table */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:0; }
table.data{ width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
table.data th{
  text-align:left; font-family:var(--f-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--text-mute); padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap;
}
table.data td{ padding:12px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
table.data tbody tr:hover{ background:var(--surface-2); }
table.data tr.clickable{ cursor:pointer; }

/* badges */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px;
  font-size:11px; font-weight:600; font-family:var(--f-mono); letter-spacing:.3px; text-transform:uppercase;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.b-green{ background:rgba(51,193,122,.12); color:var(--green); }
.badge.b-amber{ background:rgba(245,166,35,.12); color:var(--amber); }
.badge.b-red{ background:rgba(229,72,77,.12); color:var(--red); }
.badge.b-steel{ background:rgba(74,144,164,.15); color:var(--steel-bright); }
.badge.b-violet{ background:rgba(157,127,232,.15); color:var(--violet); }
.badge.b-mute{ background:var(--surface-3); color:var(--text-dim); }

/* progress bar */
.progress{ height:6px; border-radius:4px; background:var(--surface-3); overflow:hidden; }
.progress > span{ display:block; height:100%; background:var(--orange); }

/* forms */
.field label{ display:block; font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:6px; letter-spacing:.3px; }
.field input, .field select, .field textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); padding:10px 12px; font-size:13.5px; font-family:var(--f-body); outline:0;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--orange); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }

/* kanban (leads pipeline) */
.kanban{ display:grid; grid-template-columns:repeat(5,minmax(240px,1fr)); gap:14px; overflow-x:auto; padding-bottom:8px; }
.kcol{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); min-width:240px; display:flex; flex-direction:column; }
.kcol-head{ padding:12px 14px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.kcol-head span.n{ font-family:var(--f-mono); font-size:11px; background:var(--surface-3); padding:1px 7px; border-radius:10px; color:var(--text-dim); }
.kcol-body{ padding:10px; display:flex; flex-direction:column; gap:10px; min-height:120px; }
.kcard{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:11px; cursor:grab; }
.kcard b{ display:block; font-size:13px; margin-bottom:4px; }
.kcard .meta{ font-size:11px; color:var(--text-mute); display:flex; justify-content:space-between; margin-top:8px; }
.kcard .val{ font-family:var(--f-mono); color:var(--orange); font-weight:600; }

/* calendar grid */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--border); border-left:1px solid var(--border); }
.cal-dow{ font-family:var(--f-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--text-mute); padding:8px; border-right:1px solid var(--border); background:var(--surface); text-align:center; }
.cal-cell{ min-height:96px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:6px; position:relative; }
.cal-cell .d{ font-family:var(--f-mono); font-size:11px; color:var(--text-mute); }
.cal-cell.today{ background:rgba(255,107,53,.06); }
.cal-cell.today .d{ color:var(--orange); font-weight:700; }
.cal-cell .ev{ margin-top:5px; font-size:10.5px; padding:2px 5px; border-radius:3px; background:var(--surface-3); border-left:2px solid var(--steel); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-cell .ev.orange{ border-left-color:var(--orange); }
@media (max-width:760px){ .cal-grid{ grid-template-columns:1fr; } .cal-dow{ display:none; } }

/* empty state / placeholder */
.placeholder{
  border:1.5px dashed var(--border); border-radius:var(--radius-lg);
  padding:48px 20px; text-align:center; color:var(--text-mute);
}
.placeholder .ic{ width:34px; height:34px; stroke:var(--text-mute); fill:none; stroke-width:1.3; margin:0 auto 12px; }
.placeholder h4{ color:var(--text-dim); font-size:15px; margin-bottom:6px; }
.placeholder p{ font-size:12.5px; max-width:340px; margin:0 auto; }

/* modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(10,11,13,.7); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); width:100%; max-width:480px; max-height:90vh; overflow-y:auto; }
.modal-head{ padding:16px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.modal-body{ padding:18px; display:flex; flex-direction:column; gap:14px; }
.modal-foot{ padding:14px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }
.modal-close{ cursor:pointer; color:var(--text-mute); font-size:20px; line-height:1; }

/* db status strip */
.db-flag{
  font-family:var(--f-mono); font-size:11px; padding:6px 12px; border-radius:var(--radius);
  display:flex; align-items:center; gap:8px; margin-bottom:18px; border:1px solid var(--border);
}
.db-flag.live{ color:var(--green); background:rgba(51,193,122,.08); border-color:rgba(51,193,122,.3); }
.db-flag.demo{ color:var(--amber); background:rgba(245,166,35,.08); border-color:rgba(245,166,35,.3); }
.db-flag .pulse{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 0 currentColor; animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,107,53,.5); } 70%{ box-shadow:0 0 0 6px rgba(255,107,53,0); } 100%{ box-shadow:0 0 0 0 rgba(255,107,53,0); } }

/* ==========================================================================
   BOTTOM TAB BAR (mobile app-style primary nav, phones only)
   ========================================================================== */
.bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:rgba(28,32,36,.92); backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-inner{ display:flex; }
.bottom-nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:9px 2px 8px; color:var(--text-mute);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.3px; text-transform:uppercase;
  border:0; border-top:2px solid transparent; background:none; cursor:pointer;
}
.bottom-nav-item .ic{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
.bottom-nav-item.active{ color:var(--orange); border-top-color:var(--orange); }
.bottom-nav-item.active .ic{ stroke:var(--orange); }

/* ==========================================================================
   RESPONSIVE TABLES — collapse to stacked cards on phones so nothing
   ever forces horizontal scroll of a whole data table on a small screen.
   Requires each <td> to carry data-label="Column Name".
   ========================================================================== */
@media (max-width:700px){
  table.data{ min-width:0; }
  table.data thead{ display:none; }
  table.data, table.data tbody, table.data tr, table.data td{ display:block; width:100%; }
  table.data tr{
    border:1px solid var(--border); border-radius:var(--radius-lg);
    margin-bottom:10px; padding:4px 12px; background:var(--surface-2);
  }
  table.data td{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:9px 0; border-bottom:1px solid var(--border-soft); text-align:right; white-space:normal;
  }
  table.data td:last-child{ border-bottom:0; }
  table.data td::before{
    content:attr(data-label); font-family:var(--f-mono); font-size:10px; letter-spacing:.5px;
    text-transform:uppercase; color:var(--text-mute); text-align:left; flex-shrink:0;
  }
  table.data td:empty::before{ content:none; }
  .table-wrap{ overflow-x:visible; }
}

/* ==========================================================================
   PHONE-SCALE SPACING — tighter padding, room for bottom nav
   ========================================================================== */
@media (max-width:760px){
  .bottom-nav{ display:block; }
  .content{ padding:16px 14px calc(84px + env(safe-area-inset-bottom)); }
  .page-head{ margin-bottom:16px; }
  .page-head h1{ font-size:21px; }
  .card{ padding:14px; }
  .stat-card{ padding:13px 14px; }
  .stat-card .val{ font-size:26px; }
  .kanban{ gap:10px; }
  .kcol{ min-width:210px; }
  .cal-cell{ min-height:70px; padding:5px; }
  .modal-body, .modal-head, .modal-foot{ padding-left:14px; padding-right:14px; }
}
@media (max-width:420px){
  .content{ padding-left:12px; padding-right:12px; }
  .stat-grid{ gap:10px; }
  .grid-2, .grid-3{ gap:12px; }
}

/* fade-up */
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.fade-up{ animation:fadeUp .4s ease both; }

/* responsive shell */
.sidebar-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:90; display:none; }
.sidebar-scrim.open{ display:block; }

@media (max-width:980px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); }
  .main{ margin-left:0; }
  .hamburger{ display:flex; }
  .topbar-search{ display:none; }
}
@media (max-width:600px){
  .topbar{ padding:0 12px; gap:10px; }
  .topbar-title{ font-size:16px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-title .crumb{ display:none; }
  .topbar-actions .btn span{ display:none; }
  .topbar-actions .btn{ padding:9px 11px; }
}