/* =====================================================================
   CONSTRUCTION CRM - Core styles
   Palette: graphite structure + safety amber. Deliberately different
   from the sales CRM's gold so the two apps are never confused on a phone.
   ===================================================================== */

:root{
  --c-ink:        #12181F;
  --c-ink-soft:   #1C2530;
  --c-ink-line:   #2A3644;
  --c-surface:    #F4F6F8;
  --c-card:       #FFFFFF;
  --c-line:       #E3E7EC;
  --c-text:       #1E2A35;
  --c-muted:      #6B7A88;
  --c-accent:     #F2A413;
  --c-accent-dk:  #C8860A;
  --c-steel:      #3E5C76;
  --c-ok:         #1E8E5A;
  --c-warn:       #D97706;
  --c-danger:     #C2413B;

  --sidebar-w:    248px;
  --topbar-h:     58px;
  --radius:       10px;
  --shadow:       0 1px 2px rgba(18,24,31,.06), 0 4px 14px rgba(18,24,31,.05);

  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,.display-face{
  font-family: var(--font-display);
  letter-spacing:.2px;
}

a{ color: var(--c-steel); text-decoration:none; }
a:hover{ color: var(--c-ink); }

:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }

/* ---------------------------------------------------------------
   Layout
   The wrapper stacks the topbar above the content. Without
   flex-direction:column they fight as horizontal siblings.
   --------------------------------------------------------------- */
.app-wrapper{
  display:flex;
  flex-direction: column;
  min-height:100vh;
  margin-left: var(--sidebar-w);
  transition: margin-left .2s ease;
}

.main-content{
  flex:1;
  padding: 22px 26px 40px;
  max-width:1500px;
  width:100%;
}

/* ---------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------- */
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--c-ink);
  color:#C9D3DD;
  display:flex;
  flex-direction:column;
  z-index:1040;
  transition: transform .22s ease;
}

/* Signature: the hazard strip. The one loud element in the whole app. */
.sidebar::before{
  content:"";
  display:block;
  height:5px;
  background: repeating-linear-gradient(
    -45deg,
    var(--c-accent) 0 10px,
    var(--c-ink-soft) 10px 20px
  );
  flex:0 0 5px;
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:11px;
  padding:18px 18px 16px;
  border-bottom:1px solid var(--c-ink-line);
}
.brand-mark{
  width:38px; height:38px;
  border-radius:9px;
  background: var(--c-accent);
  color: var(--c-ink);
  display:grid; place-items:center;
  font-size:20px;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{
  font-family: var(--font-display);
  font-weight:700; font-size:19px; color:#fff;
  text-transform:uppercase; letter-spacing:.6px;
}
.brand-sub{ font-size:11px; color:var(--c-accent); letter-spacing:2.4px; text-transform:uppercase; }

.sidebar-nav{ flex:1; overflow-y:auto; padding:12px 10px 20px; }

.nav-heading{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:#5C6C7C;
  padding:16px 10px 7px;
}

.sidebar .nav-link{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 11px;
  border-radius:8px;
  color:#C9D3DD;
  font-size:14.5px;
  margin-bottom:2px;
}
.sidebar .nav-link i{ font-size:16px; width:19px; text-align:center; }
.sidebar .nav-link:hover{ background: var(--c-ink-soft); color:#fff; }

.sidebar .nav-link.active{
  background: var(--c-ink-soft);
  color:#fff;
  box-shadow: inset 3px 0 0 var(--c-accent);
}

.sidebar .nav-link.disabled{
  color:#57677A;
  cursor:default;
}
.sidebar .nav-link.disabled:hover{ background:transparent; color:#57677A; }
.sidebar .nav-link em{
  margin-left:auto;
  font-style:normal;
  font-size:10px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#4E5E6E;
  border:1px solid #33414F;
  border-radius:4px;
  padding:1px 5px;
}

.sidebar-foot{
  padding:13px 18px;
  border-top:1px solid var(--c-ink-line);
  font-size:13px;
}
.sidebar-foot .who{ color:#fff; font-weight:500; }
.sidebar-foot .what{ color:var(--c-accent); font-size:11.5px; text-transform:uppercase; letter-spacing:1px; }

.sidebar-backdrop{
  display:none;
  position:fixed; inset:0;
  background: rgba(10,14,19,.5);
  z-index:1035;
}
.sidebar-backdrop.show{ display:block; }

/* ---------------------------------------------------------------
   Topbar
   --------------------------------------------------------------- */
.topbar{
  height: var(--topbar-h);
  background: var(--c-card);
  border-bottom:1px solid var(--c-line);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 26px;
  position:sticky; top:0;
  z-index:1020;
}
.topbar-title{
  font-size:19px;
  font-weight:600;
  margin:0;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.topbar-role{
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:1.1px;
  color:var(--c-muted);
  border:1px solid var(--c-line);
  border-radius:20px;
  padding:3px 11px;
}
.menu-toggle{
  display:none;
  background:none; border:none;
  font-size:24px; color:var(--c-text);
  padding:4px 6px; line-height:1;
}

/* ---------------------------------------------------------------
   Cards & KPI tiles
   --------------------------------------------------------------- */
.card{
  background: var(--c-card);
  border:1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header{
  background:transparent;
  border-bottom:1px solid var(--c-line);
  padding:13px 18px;
  font-family: var(--font-display);
  font-weight:600;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.card-body{ padding:18px; }

.stat-card{
  background: var(--c-card);
  border:1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  height:100%;
}
.stat-icon{
  width:44px; height:44px;
  border-radius:10px;
  display:grid; place-items:center;
  font-size:20px;
  background:#FDF3E0; color:var(--c-accent-dk);
  flex:0 0 44px;
}
.stat-icon.steel{ background:#EAF0F5; color:var(--c-steel); }
.stat-icon.ok{ background:#E6F4EE; color:var(--c-ok); }
.stat-icon.warn{ background:#FDF0E3; color:var(--c-warn); }
.stat-value{
  font-family: var(--font-display);
  font-size:27px; font-weight:700; line-height:1;
}
.stat-label{
  font-size:11.5px; color:var(--c-muted);
  text-transform:uppercase; letter-spacing:1px; margin-top:3px;
}

/* ---------------------------------------------------------------
   Tables
   --------------------------------------------------------------- */
.table{ margin-bottom:0; }
.table > thead > tr > th{
  background:#F8FAFB;
  border-bottom:1px solid var(--c-line);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.9px;
  color:var(--c-muted);
  font-weight:600;
  white-space:nowrap;
  padding:11px 14px;
}
.table > tbody > tr > td{
  padding:12px 14px;
  border-bottom:1px solid var(--c-line);
  vertical-align:middle;
}
.table > tbody > tr:hover{ background:#FAFBFC; }

.empty-state{
  padding:44px 20px;
  text-align:center;
  color:var(--c-muted);
}
.empty-state i{ font-size:34px; color:#C3CCD5; display:block; margin-bottom:10px; }

/* ---------------------------------------------------------------
   Buttons, badges, forms
   --------------------------------------------------------------- */
.btn{ border-radius:8px; font-weight:500; }
.btn-primary{
  background: var(--c-ink); border-color: var(--c-ink);
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--c-ink-soft); border-color: var(--c-ink-soft);
}
.btn-accent{
  background: var(--c-accent); border:1px solid var(--c-accent);
  color: var(--c-ink); font-weight:600;
}
.btn-accent:hover{ background: var(--c-accent-dk); border-color: var(--c-accent-dk); color:#fff; }

.badge-soft{
  display:inline-block;
  font-size:11px; font-weight:600;
  letter-spacing:.5px; text-transform:uppercase;
  border-radius:20px; padding:3px 10px;
}
.badge-planning{ background:#EAF0F5; color:var(--c-steel); }
.badge-progress{ background:#FDF3E0; color:var(--c-accent-dk); }
.badge-hold{ background:#F3E9E8; color:var(--c-danger); }
.badge-completed{ background:#E6F4EE; color:var(--c-ok); }
.badge-cancelled{ background:#EEF0F2; color:var(--c-muted); }

.form-label{
  font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.7px;
  color:var(--c-muted); margin-bottom:5px;
}
.form-control, .form-select{
  border-radius:8px;
  border-color:#D6DDE4;
  padding:9px 12px;
}
.form-control:focus, .form-select:focus{
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(242,164,19,.16);
}

.page-head{
  display:flex; align-items:center;
  justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:18px;
}
.page-head .lead-note{ color:var(--c-muted); font-size:14px; margin:0; }

/* ---------------------------------------------------------------
   Login
   --------------------------------------------------------------- */
.login-page{
  min-height:100vh;
  display:grid; place-items:center;
  background: var(--c-ink);
  padding:20px;
}
.login-card{
  width:100%; max-width:400px;
  background: var(--c-card);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.login-card .strip{
  height:6px;
  background: repeating-linear-gradient(-45deg, var(--c-accent) 0 12px, var(--c-ink) 12px 24px);
}
.login-body{ padding:32px 30px 30px; }
.login-mark{
  width:52px; height:52px; border-radius:12px;
  background: var(--c-accent); color: var(--c-ink);
  display:grid; place-items:center; font-size:26px;
  margin-bottom:16px;
}
.login-title{
  font-family: var(--font-display);
  font-size:24px; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px;
  margin:0;
}
.login-sub{ color:var(--c-muted); font-size:14px; margin:2px 0 22px; }

/* ---------------------------------------------------------------
   Bottom nav (mobile only - shown in responsive.css)
   --------------------------------------------------------------- */
.bottom-nav{ display:none; }