/* ============================================================
   SPM Builders - Civil Labour Management Software
   Stylesheet
   ============================================================ */
:root {
  --spm-green: #1f7a4d;
  --spm-green-dark: #145536;
  --spm-orange: #e8762c;
  --spm-bg: #f4f6f5;
  --spm-card-border: #e4e8e6;
  --spm-text-muted: #6b7573;
  --sidebar-w: 250px;
}

* { box-sizing: border-box; }

html {
  /* The off-canvas sidebar (see .sidebar below) sits at a negative `left`
     offset when closed on mobile. Fixed-position elements still contribute
     to the document's scrollable area unless overflow-x is clipped here,
     which otherwise causes a persistent few-hundred-pixel horizontal
     scroll/gutter on every page on phones. */
  overflow-x: hidden;
}

body {
  background: var(--spm-bg);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: #202826;
  overflow-x: hidden;
  max-width: 100vw;
}

/* ---------- Auth pages (no shell) ---------- */
body:not(.has-shell) {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--spm-green-dark), var(--spm-green) 60%, #2f9e64);
}

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--spm-green-dark);
  color: #eaf3ee;
  height: 100vh;
  /* `dvh` (dynamic viewport height) tracks the browser's *actual* visible
     area on phones, where the address bar/toolbar shrinks or grows as the
     page is scrolled. A fixed/height:100vh sidebar sized against the old
     "vh" unit stays locked to the viewport height measured before the
     toolbar collapsed, so once the toolbar hides mid-scroll and the real
     viewport grows taller, the sidebar box no longer reaches the bottom of
     the screen and the page background shows through as blank space below
     the last nav item. `100vh` above is kept as a fallback for browsers
     that don't support dvh; this line overrides it where supported. */
  height: 100dvh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.brand-mark {
  background: var(--spm-orange);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 6px;
  letter-spacing: .5px;
}

.brand-name { font-weight: 700; font-size: 15px; line-height: 1.2; color: #fff; }
.brand-sub { font-size: 11px; color: #b9d6c6; }

.sidebar-nav { padding: 8px 0 24px; }

.nav-section {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8fbba2;
  padding: 14px 16px 4px;
  font-weight: 700;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: #dcecE3;
  font-size: 13.5px;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.nav-link i { width: 16px; text-align: center; }

.nav-link:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

.nav-link.active {
  background: rgba(255,255,255,.1);
  border-left-color: var(--spm-orange);
  color: #fff;
  font-weight: 600;
}

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border-bottom: 1px solid var(--spm-card-border);
  padding: 12px 22px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.page-title {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  color: #16281f;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sidebarToggle { flex-shrink: 0; }

.btn-user {
  background: #f0f4f2;
  border: 1px solid var(--spm-card-border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.role-pill {
  background: var(--spm-green);
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 4px;
}

.content { padding: 22px; flex: 1; }

.app-footer {
  text-align: center;
  font-size: 12px;
  color: var(--spm-text-muted);
  padding: 14px 22px;
  border-top: 1px solid var(--spm-card-border);
  background: #fff;
}

/* ---------- Cards / widgets ---------- */
.card {
  border: 1px solid var(--spm-card-border);
  border-radius: 10px;
}

.card-header {
  background: #fff;
  border-bottom: 1px solid var(--spm-card-border);
  font-weight: 700;
  font-size: 14.5px;
  color: #16281f;
}

.kpi-card {
  border-radius: 12px;
  padding: 18px 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.kpi-card i.bg-icon { position: absolute; right: 10px; top: 8px; font-size: 42px; opacity: .18; }
.kpi-card .kpi-label { font-size: 12.5px; opacity: .92; text-transform: uppercase; letter-spacing: .05em; }
.kpi-card .kpi-value { font-size: 24px; font-weight: 700; margin-top: 4px; }
.kpi-green { background: linear-gradient(135deg, #1f7a4d, #2f9e64); }
.kpi-orange { background: linear-gradient(135deg, #c25b1c, #e8762c); }
.kpi-blue { background: linear-gradient(135deg, #1d5b96, #2f80c9); }
.kpi-purple { background: linear-gradient(135deg, #5b3d96, #7c56c9); }
.kpi-red { background: linear-gradient(135deg, #a3231f, #d6392f); }
.kpi-teal { background: linear-gradient(135deg, #0f7a72, #14a89b); }

.quick-link {
  display: block;
  border: 1px solid var(--spm-card-border);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: #16281f;
  background: #fff;
  height: 100%;
}
.quick-link:hover { border-color: var(--spm-green); box-shadow: 0 2px 10px rgba(31,122,77,.12); }
.quick-link i { font-size: 20px; color: var(--spm-green); margin-bottom: 6px; display: block; }
.quick-link .ql-title { font-weight: 600; font-size: 13.5px; }
.quick-link .ql-desc { font-size: 11.5px; color: var(--spm-text-muted); }

/* ---------- Tables ---------- */
.table-card { padding: 0; }
.table > :not(caption) > * > * { padding: 10px 14px; font-size: 13.5px; vertical-align: middle; }
.table thead th {
  background: #eef3f0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #3d4a44;
  border-bottom: none;
  white-space: nowrap;
}
.table tbody tr:hover { background: #f7faf8; }

.badge-success { background: #e4f6ea; color: #157347; }
.badge-secondary { background: #eef0ef; color: #55605c; }
.badge-info { background: #e3f2fb; color: #0b6ba8; }
.badge-primary { background: #e6ecfb; color: #2748c4; }
.badge-warning { background: #fff4e0; color: #a35b00; }
.badge-danger { background: #fbe6e6; color: #b3251f; }
.badge { font-weight: 600; font-size: 11px; padding: 5px 10px; border-radius: 20px; }

/* ---------- Forms ---------- */
.form-label { font-size: 12.5px; font-weight: 600; color: #3d4a44; }
.section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--spm-green-dark);
  font-weight: 700;
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e4f0e9;
}
.section-title:first-child { margin-top: 0; }

.line-items thead th { font-size: 11px; }
.line-items input, .line-items select { font-size: 13px; }
.remove-row-btn { color: #b3251f; }

.auth-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 14px;
  padding: 34px 30px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.auth-brand { text-align: center; margin-bottom: 20px; }
.auth-brand .brand-mark { display: inline-block; margin-bottom: 10px; font-size: 15px; padding: 8px 12px; }
.auth-brand h1 { font-size: 19px; font-weight: 700; margin: 0; color: #16281f; }
.auth-brand p { font-size: 12.5px; color: var(--spm-text-muted); margin: 2px 0 0; }

.total-strip {
  background: #eef6f0;
  border: 1px dashed #bfe0cc;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  color: var(--spm-green-dark);
}

.filter-bar { background: #fff; border: 1px solid var(--spm-card-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }

@media print {
  .sidebar, .topbar, .app-footer, .no-print { display: none !important; }
  .main-col, .content { padding: 0 !important; margin: 0 !important; }
  body { background: #fff !important; }
}

@media (max-width: 991px) {
  .sidebar {
    position: fixed; left: -260px; top: 0; z-index: 40; transition: left .2s; box-shadow: 0 0 30px rgba(0,0,0,.3);
    /* Force the drawer onto its own compositor layer so it stays visually
       pinned to the viewport instead of momentarily dragging along with the
       page content during a touch-scroll gesture (a well-known WebKit/iOS
       quirk with position:fixed elements while the page underneath scrolls). */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
  }
  .sidebar.open { left: 0; }

  /* While the drawer is open, the page behind it must not scroll at all -
     only the menu's own nav list (overflow-y:auto above) should move. This
     also removes any chance of the fixed drawer "scrolling with" the page,
     since there is nothing left underneath for a touch-drag to scroll. */
  body.sidebar-open { overflow: hidden; }
}

@media (max-width: 576px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .page-title { font-size: 16px; }
  .btn-user .user-fullname { display: none; }
  .btn-user { padding: 6px 10px; }
  .role-pill { margin-left: 0; }
  .content { padding: 14px; }
  .kpi-card { padding: 14px 16px; }
  .kpi-card .kpi-value { font-size: 20px; }
}