/* SenteSphere shared design + responsive layer.
   Loaded after page-local styles so all modules keep one visual language. */
:root {
  --sente-navy:#0d2b45;
  --sente-navy-deep:#071827;
  --sente-blue:#0d5f9f;
  --sente-orange:#ff5722;
  --sente-bg:#f4f7fb;
  --sente-text:#172033;
  --sente-muted:#6f7d90;
  --sente-border:#dce4f0;
  --sente-surface:#ffffff;
  --sente-danger:#e53935;
  --sente-radius:18px;
  --sente-shadow:0 10px 30px rgba(17,38,70,.08);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--sente-bg); color:var(--sente-text); font-family:"Segoe UI",Arial,sans-serif; }
img,svg,canvas,video { max-width:100%; }
input,select,textarea,button { max-width:100%; font:inherit; }

/* Canonical sidebar/navigation — same on every authenticated staff page. */
.sidebar {
  width:270px !important;
  background:linear-gradient(180deg,var(--sente-navy-deep),var(--sente-navy)) !important;
  color:#fff !important;
  padding:22px 16px !important;
  position:fixed !important;
  left:0; top:0; bottom:0;
  height:100vh !important;
  overflow-y:auto !important;
  box-shadow:12px 0 35px rgba(7,24,39,.18) !important;
  z-index:10000 !important;
}
.sidebar .logo {
  font-size:26px !important; font-weight:900 !important; line-height:1.2 !important;
  padding:18px 16px !important; border-radius:20px !important;
  background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.12) !important;
  margin:0 0 20px !important; letter-spacing:.2px !important; color:#fff !important;
}
.sidebar .logo span { color:var(--sente-orange) !important; }
.sidebar .nav { display:grid !important; gap:7px !important; }
.sidebar .nav a {
  display:flex !important; align-items:center !important; gap:11px !important;
  color:#d7e7f5 !important; text-decoration:none !important;
  padding:11px 12px !important; border-radius:14px !important;
  font-size:14px !important; font-weight:700 !important; line-height:1.25 !important;
  border:1px solid transparent !important; transition:.18s ease !important;
}
.sidebar .nav a .icon {
  width:32px !important; height:32px !important; flex:0 0 32px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border-radius:10px !important; background:rgba(255,255,255,.10) !important; font-size:16px !important;
}
.sidebar .nav a:hover,.sidebar .nav a.active {
  background:rgba(255,255,255,.14) !important; color:#fff !important;
  border-color:rgba(255,255,255,.12) !important; transform:translateX(3px) !important;
}
.sidebar .nav a:hover .icon,.sidebar .nav a.active .icon { background:var(--sente-orange) !important; color:#fff !important; }
.sidebar .nav .logout { margin-top:10px !important; background:rgba(229,57,53,.14) !important; border-color:rgba(229,57,53,.25) !important; color:#fff !important; }
.sidebar .nav .logout .icon { background:var(--sente-danger) !important; }

/* Normalize staff page content areas while preserving each module's structure. */
body.sente-shell-with-sidebar { padding-left:270px; }
body.sente-shell-with-sidebar > .main, body.sente-shell-with-sidebar > .main-content { margin-left:0 !important; width:100% !important; }
.main,.main-content { min-width:0; }
.topbar,.panel,.card,.stat,.stat-card,.report-card,.chart-card {
  border-color:var(--sente-border) !important;
  box-shadow:var(--sente-shadow) !important;
}
.topbar { border-radius:20px !important; }
.panel,.card,.stat,.stat-card,.report-card,.chart-card { border-radius:18px !important; }

input:not([type="checkbox"]):not([type="radio"]),select,textarea {
  border:1px solid #ccd7e5 !important; border-radius:11px !important;
  background:#fff !important; color:var(--sente-text) !important;
}
input:focus,select:focus,textarea:focus {
  outline:2px solid rgba(13,95,159,.16) !important; border-color:var(--sente-blue) !important;
}
button,.btn { border-radius:11px !important; font-weight:700 !important; }

.table-wrap,.table-container,.reports-table-wrap,.portfolio-table-wrap,.sente-table-scroll {
  width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
table { border-collapse:collapse; }
table th { color:#536173; }

.sente-mobile-menu {
  display:none; position:fixed; top:12px; left:12px; z-index:10050;
  border:0 !important; border-radius:12px !important; padding:10px 13px !important;
  background:var(--sente-navy) !important; color:#fff !important; font-size:18px !important;
  line-height:1 !important; box-shadow:0 8px 24px rgba(7,24,39,.25); cursor:pointer;
  align-items:center; gap:7px;
}
.sente-menu-label { font-size:13px; font-weight:800; }
.sente-nav-overlay { display:none; position:fixed; inset:0; z-index:9990; background:rgba(2,10,20,.52); }

.sente-member-nav {
  position:sticky; top:0; z-index:2000; display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:10px 14px; background:var(--sente-navy); box-shadow:0 5px 18px rgba(7,24,39,.18);
}
.sente-member-nav a { color:#fff; text-decoration:none; font-weight:700; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.10); }

@media (max-width:1024px) {
  body { overflow-x:hidden !important; padding-left:0 !important; }
  .layout { display:block !important; width:100% !important; min-width:0 !important; }
  .main,.main-content {
    margin-left:0 !important; width:100% !important; max-width:100% !important; min-width:0 !important;
  }
  body.sente-has-mobile-menu .main,body.sente-has-mobile-menu .main-content { padding-top:64px !important; }
  .sidebar {
    left:-310px !important; width:min(290px,86vw) !important; max-width:86vw !important;
    transition:left .22s ease !important;
  }
  .sidebar.show,body.sente-nav-open .sidebar { left:0 !important; }
  body.sente-nav-open .sente-nav-overlay { display:block; }
  .sente-mobile-menu { display:flex; }
  .mobile-top { z-index:10020 !important; }
  .topbar { min-width:0 !important; }

  .stats,.stats-grid,.report-grid,.chart-grid,.quick-grid,.reports-highlight-grid,.reports-metrics-grid,
  .inventory-stats,.summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .grid,.content-grid,.bottom-grid,.ledger-grid,.reports-content-grid,.inventory-grid,.inventory-content-grid { grid-template-columns:1fr !important; }
  .form-grid,.form-row,.reports-filter-grid,.inventory-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .table-wrap,.table-container,.reports-table-wrap,.portfolio-table-wrap,.sente-table-scroll { overflow-x:auto !important; }
  table { max-width:none !important; min-width:max-content; }
  .modal,.modal-content,.dialog,.dialog-card { max-width:calc(100vw - 32px) !important; }
}

@media (max-width:700px) {
  .main,.main-content { padding:64px 12px 18px !important; }
  .mobile-top + .main { padding-top:14px !important; }
  .topbar,.topbar-right,.filters,.reports-head,.preview-header,.member-form-top-note,.toolbar,.action-row,.actions {
    align-items:stretch !important;
  }
  .topbar { flex-direction:column !important; gap:10px !important; padding:16px !important; }
  .topbar-left,.topbar-right,.user-box { min-width:0 !important; width:100% !important; text-align:left !important; }
  .stats,.stats-grid,.report-grid,.chart-grid,.quick-grid,.reports-highlight-grid,.reports-metrics-grid,
  .form-grid,.form-row,.reports-filter-grid,.inventory-stats,.summary-grid,.inventory-form-grid { grid-template-columns:1fr !important; }
  .card,.panel,.stat-card,.stat,.report-card,.chart-card { border-radius:15px !important; }
  .panel,.card { padding:15px !important; }
  .fg,.form-group { min-width:0 !important; }
  input:not([type="checkbox"]):not([type="radio"]),select,textarea { min-width:0 !important; width:100% !important; font-size:16px !important; }
  .filters,.toolbar,.actions,.report-actions { flex-wrap:wrap !important; }
  .filters > *,.report-actions > *,.actions > *,.toolbar > * { flex:1 1 100% !important; }
  .btn,button { min-height:42px; }
  .ledger-item { grid-template-columns:1fr !important; align-items:start !important; }
  table th,table td { white-space:nowrap; }
  .chart-box,.small-chart-box { height:230px !important; }
  .sente-mobile-menu { top:10px; left:10px; }
}

@media (max-width:420px) {
  .main,.main-content { padding-left:9px !important; padding-right:9px !important; }
  .topbar,.panel,.card,.table-wrap,.table-container { padding-left:12px !important; padding-right:12px !important; }
  .sente-menu-label { display:none; }
}

@media print {
  .sente-mobile-menu,.sente-nav-overlay,.sente-member-nav { display:none !important; }
  .sidebar { display:none !important; }
  .main,.main-content { margin:0 !important; width:100% !important; }
}