/* =========================================================
   ShedOffice App CSS (FIXED)
   - Removes conflicting/duplicate rules
   - Single source of truth for topbar/viewport offsets
   - Fixes sidebar “white gap” / drop-down behavior on certain pages
   ========================================================= */

/* =========================
   THEME VARIABLES
   ========================= */
:root{
  --so-red: #cf1f1f;
  --so-red-2: #b61a1a;
  --so-black: #121418;
  --so-black-2: #1b1f26;
  --so-muted: #9aa4b2;
  --so-bg: #eef1f5;
  --so-card: #ffffff;
  --so-border: rgba(18,20,24,0.10);
  --so-shadow: 0 10px 30px rgba(18,20,24,0.10);
  --so-radius: 14px;
  --so-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Layout sizing */
  --so-topbar-h: 64px;

  /* Safe area (iOS) */
  --so-safe-top: env(safe-area-inset-top, 0px);
  --so-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Total topbar height including safe area */
  --so-topbar-total: calc(var(--so-topbar-h) + var(--so-safe-top));
}

/* =========================
   GLOBAL / RESET
   ========================= */
*{ box-sizing: border-box; }

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family: var(--so-font);
  background: var(--so-bg);
  color:#1a1f2a;
}

/* Prevent horizontal bleed from tables/forms */
.so-app, .so-layout, .so-content{
  max-width:100%;
}
.table-responsive{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

.so-app{ min-height:100vh; }

/* =========================
   TOP BAR (FIXED)
   IMPORTANT:
   - Must be fixed so layout is deterministic across pages
   - Sticky + page-specific content sometimes caused offset mismatch
   ========================= */
.so-topbar{
  height: var(--so-topbar-total);
  padding: 0 16px;
  padding-top: var(--so-safe-top);

  background: linear-gradient(180deg, var(--so-black) 0%, var(--so-black-2) 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;

  position: fixed;
  top:0;
  left:0;
  right:0;
  z-index: 1000;

  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.so-topbar-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.so-topbar-right{ display:flex; align-items:center; gap:10px; min-width:0; }

/* Buttons */
.so-icon-btn{
  width:40px; height:40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition: all .15s ease;
}
.so-icon-btn:hover{ background: rgba(255,255,255,0.10); transform: translateY(-1px); }

.so-badge{
  position:absolute;
  top:6px; right:6px;
  min-width:18px; height:18px;
  padding:0 5px;
  border-radius: 999px;
  background: var(--so-red);
  color:#fff;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* BRAND */
.so-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
  user-select:none;
  white-space:nowrap;
}
.so-brand-mark{
  width:38px; height:38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(207,31,31,0.18);
  border: 1px solid rgba(207,31,31,0.35);
  color: #fff;
}
.so-brand-text{ display:flex; align-items:baseline; gap:2px; }
.so-brand-name{ font-weight:800; letter-spacing:-0.3px; font-size:18px; color:#fff; }
.so-brand-dot{ color: var(--so-red); font-weight:800; }

/* TOP NAV LINKS */
.so-topnav{ display:flex; align-items:center; gap:6px; margin-left: 6px; min-width:0; }
.so-topnav-link{
  color: rgba(255,255,255,0.85);
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight:600;
  font-size: 14px;
  display:flex;
  align-items:center;
  gap:8px;
  transition: all .15s ease;
  white-space:nowrap;
}
.so-topnav-link:hover{
  background: rgba(255,255,255,0.08);
  color:#fff;
}
.so-topnav-link.active{
  background: rgba(207,31,31,0.18);
  border: 1px solid rgba(207,31,31,0.35);
  color:#fff;
}

/* USER CHIP */
.so-userchip{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color:#fff;
  text-decoration:none;
}
.so-userchip:hover{ background: rgba(255,255,255,0.10); }
.so-avatar{
  width:34px; height:34px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:0.3px;
}
.so-avatar.sm{ width:30px; height:30px; font-size:12px; }
.so-userchip-text{ display:flex; flex-direction:column; line-height:1.1; }
.so-userchip-name{ font-weight:700; font-size:13px; }
.so-userchip-role{ font-size:11px; color: rgba(255,255,255,0.65); }

/* DROPDOWN */
.so-dropdown{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  max-width: calc(100vw - 24px);
}

/* =========================
   LAYOUT
   IMPORTANT:
   - Because topbar is FIXED, the layout must be pushed down
   - This eliminates page-specific “gap” behavior entirely
   ========================= */
.so-layout{
  display:flex;
  padding-top: var(--so-topbar-total);
  min-height: calc(100dvh - var(--so-topbar-total));
}

/* =========================
   SIDEBAR
   IMPORTANT:
   - Use fixed positioning so it NEVER “floats down”
   - Sticky can break if any ancestor has overflow/transform (page-dependent)
   ========================= */
.so-sidebar{
  width: 260px;
  border-right: 1px solid rgba(255,255,255,0.06);

  position: fixed;
  left: 0;
  top: var(--so-topbar-total);
  bottom: 0;

  /* OPAQUE background (no bleed) */
  background: #0b0f14;

  overflow:hidden;
  z-index: 900; /* under topbar, above content */
}

.so-sidebar-inner{
  padding: 14px 12px;
  overflow:auto;
  height: calc(100% - 78px);
}

.so-side-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,0.82);
  text-decoration:none;
  font-weight: 600;
  transition: all .15s ease;
}
.so-side-link i{ width:18px; text-align:center; opacity:0.95; }
.so-side-link:hover{ background: rgba(255,255,255,0.08); color:#fff; }
.so-side-link.active{
  background: linear-gradient(180deg, rgba(207,31,31,0.95) 0%, rgba(176,22,22,0.95) 100%);
  color:#fff;
  box-shadow: 0 10px 18px rgba(207,31,31,0.22);
}

.so-side-section{
  margin: 14px 10px 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* sidebar footer */
.so-sidebar-footer{
  height: 78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.15);
}
.so-sidebar-user{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
}
.so-sidebar-usertext .name{ font-weight:700; font-size:13px; }
.so-sidebar-usertext .sub{ font-size:11px; color: rgba(255,255,255,0.65); }
.so-sidebar-logout{
  width:40px; height:40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.so-sidebar-logout:hover{ background: rgba(255,255,255,0.10); }

/* =========================
   CONTENT
   IMPORTANT:
   - Because sidebar is FIXED, content must be offset with margin-left
   ========================= */
.so-content{
  flex:1;
  margin-left: 260px;
  padding: 18px 18px 32px;

  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(207,31,31,0.10) 0%, rgba(207,31,31,0.00) 55%),
    radial-gradient(1200px 600px at 10% 10%, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.00) 50%),
    var(--so-bg);

  padding-bottom: calc(32px + var(--so-safe-bottom));
}

/* =========================
   PAGE HEADING
   ========================= */
.so-page-title{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.8px;
  margin: 10px 0 2px;
}
.so-page-sub{
  color: #6b7280;
  margin-bottom: 14px;
}

/* =========================
   CARDS
   ========================= */
.so-card{
  background: var(--so-card);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius);
  box-shadow: var(--so-shadow);
}
.so-card .so-card-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px 0;
}
.so-card .so-card-title{
  font-weight: 800;
  letter-spacing: -0.3px;
  margin:0;
}
.so-card .so-card-body{
  padding: 14px 16px 16px;
}

/* Buttons */
.so-btn{
  border-radius: 12px;
  font-weight: 700;
  padding: 9px 14px;
  border: 1px solid rgba(207,31,31,0.35);
  background: rgba(207,31,31,0.10);
  color: var(--so-red);
}
.so-btn:hover{
  background: rgba(207,31,31,0.16);
  color: var(--so-red-2);
}

/* =========================
   STAT CARDS
   ========================= */
.so-stat{
  padding: 16px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-height: 108px;
}
.so-stat-ico{
  width:44px; height:44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(207,31,31,0.12);
  border: 1px solid rgba(207,31,31,0.25);
  color: var(--so-red);
  font-size: 18px;
}
.so-stat-title{
  font-weight: 800;
  letter-spacing: -0.2px;
  margin:0;
}
.so-stat-line{
  margin-top: 2px;
  color:#6b7280;
  font-size: 13px;
}
.so-stat-value{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.7px;
  margin-top: 6px;
}
.so-stat-meta{
  margin-top: 6px;
  font-size: 12px;
  color:#6b7280;
}
.so-stat-meta .up{ color:#16a34a; font-weight:700; }
.so-stat-meta .down{ color:#dc2626; font-weight:700; }

/* =========================
   TABLES
   ========================= */
.so-table{ margin:0; }
.so-table th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color:#64748b;
  border-bottom: 1px solid rgba(18,20,24,0.10) !important;
}
.so-table td{
  vertical-align: middle;
  color:#111827;
}

.so-pill{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 92px;
}
.so-pill.red{ background: rgba(220,38,38,0.12); color:#b91c1c; border:1px solid rgba(220,38,38,0.25); }
.so-pill.orange{ background: rgba(234,88,12,0.12); color:#c2410c; border:1px solid rgba(234,88,12,0.25); }
.so-pill.blue{ background: rgba(37,99,235,0.12); color:#1d4ed8; border:1px solid rgba(37,99,235,0.25); }
.so-pill.gray{ background: rgba(100,116,139,0.12); color:#334155; border:1px solid rgba(100,116,139,0.20); }

/* =========================
   MAP
   ========================= */
.so-map{
  height: 320px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(18,20,24,0.10);
}

/* =========================
   MOBILE
   - Sidebar becomes a slide-in drawer
   - Content margin-left must be removed
   ========================= */
@media (max-width: 992px){
  /* Sidebar drawer */
  .so-sidebar{
    left: -280px;
    width: 260px;
    transition: left .18s ease;
  }
  .so-sidebar.open{ left: 0; }

  /* Content becomes full width */
  .so-content{
    margin-left: 0;
    padding: 16px;
    padding-bottom: calc(24px + var(--so-safe-bottom));
  }

  /* Optional: shrink brand text a touch */
  .so-brand-name{ font-size:16px; }

  /* Keep the right area tight */
  .so-topbar-right{ gap: 8px; }
}