/* =========================
   SalesHub – App Shell CSS
   ========================= */

/* ------ Theme tokens ------ */
:root{
  --sidebar-width: 260px;

  --sidebar-bg: #0f1424;        /* dark navy */
  --sidebar-fg: #c7d1e2;
  --sidebar-fg-dim: #9aa6bf;
  --sidebar-hover: #1a2338;
  --sidebar-active: #202a44;
  --sidebar-border: #1b2440;

  --content-bg: #f5f7fb;
  --card-bg: #ffffff;
  --border: #e8ebf2;

  --brand-sales: #ffffff;
  --brand-hub: #8bb3ff;
}

/* ------ Layout ------ */
html, body { height:100%; }
body { background: var(--content-bg); }

.app-wrapper{
  display:flex;
  min-height:100vh;
}

/* Sidebar (left) */
aside.sidebar{
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  border-right: 1px solid var(--sidebar-border);
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  transition:
    flex-basis .2s ease,
    width .2s ease,
    transform .2s ease,
    margin-left .2s ease,
    box-shadow .2s ease;
}

/* Content (right) */
main.content{
  flex: 1 1 auto;
  min-width: 0;
  background: var(--content-bg);
}

/* ------ Topbar ------ */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: .5rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.topbar .left{ display:flex; align-items:center; gap:.5rem; }
#burger{ width:36px; height:36px; padding:0; line-height:1; }

/* Avatar */
.user-avatar{
  width:32px; height:32px; border-radius:9999px; object-fit:cover;
}

/* ------ Brand ------ */
.brand{ padding: .875rem 1rem .5rem; border-bottom:1px solid var(--sidebar-border); }
.brand-link{ text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; }
.brand-mark .brand-sales{
  color: var(--brand-sales);
  font-weight: 800;
  letter-spacing:.5px;
}
.brand-mark .brand-hub{
  display:inline-block;
  background:#1f2a48;
  color: var(--brand-hub);
  padding:.15rem .4rem;
  border-radius:.5rem;
  font-weight:700;
  font-size:.85rem;
  margin-left:.35rem;
}

/* ------ Menu ------ */
.menu{ padding: .75rem; }
.menu-group{
  color: var(--sidebar-fg-dim);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:.75rem .25rem .35rem;
}

.menu-item{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .7rem;
  margin:.2rem .25rem;
  color: var(--sidebar-fg);
  text-decoration:none;
  border-radius:.6rem;
  outline:0;
  border:1px solid transparent;
}
.menu-item:hover{ background: var(--sidebar-hover); }
.menu-item.active{ background: var(--sidebar-active); border-color: rgba(255,255,255,.04); }
.menu-item i{ width:1.1rem; text-align:center; }

/* Submenus */
.submenu{ display:none; padding-left:2.1rem; margin:.15rem 0 .35rem; }
.submenu.show{ display:block; }
.submenu a{
  display:block; color: var(--sidebar-fg);
  text-decoration:none; padding:.45rem .5rem;
  border-radius:.5rem; margin:.15rem 0;
}
.submenu a:hover{ background: var(--sidebar-hover); }

/* Chevron on parent link (rotated via JS inline style) */
.caret{ transition: transform .18s ease; margin-left:auto; }

/* ------ Desktop collapse (class on WRAPPER) ------ */
/* When collapsed, remove the sidebar’s flex space entirely */
.app-wrapper.sidebar-collapsed aside.sidebar{
  width:0 !important;
  flex-basis:0 !important;
  overflow:hidden;
  box-shadow:none;
}

/* ------ Mobile off-canvas ------ */
@media (max-width: 991.98px){
  /* Sidebar is off-canvas by default; we animate with transform */
  aside.sidebar{
    position:fixed; left:0; top:0; bottom:0;
    transform: translateX(-100%);
    width: var(--sidebar-width);
    flex-basis: var(--sidebar-width);
    z-index:1040;
    box-shadow:none;
  }

  /* When wrapper has .sidebar-open, slide it in and add a scrim */
  .app-wrapper.sidebar-open aside.sidebar{
    transform: translateX(0);
    box-shadow: 0 0 0 9999px rgba(0,0,0,.35);
  }
}

/* No scroll while mobile drawer is open */
body.no-scroll{ overflow:hidden; }

/* ------ Utilities ------ */
.h5, h5{ margin:0; }

/* DataTables optional tweaks (safe no-ops if not used) */
.table thead th{ border-bottom:1px solid var(--border); }
.table td, .table th{ vertical-align:middle; }

/* Keep the default border for all cards */
.card { border: 1px solid var(--border); }

/* Only force a white background when the card does NOT already have a color class */
.card:not([class*="bg-"]):not([class*="text-bg-"]) {
  background: var(--card-bg);
  
}

/* Cards */
.card { border: 1px solid var(--border); }
.card:not([class*="bg-"]):not([class*="text-bg-"]) { background: var(--card-bg); }

/* --- Soft color utilities (paste here) --- */
.bg-soft-success { background:#eaf7f0 !important; color:#0f5132 !important; border-color:#cfe9db !important; }
.bg-soft-danger  { background:#fdebea !important; color:#842029 !important; border-color:#f7d3d0 !important; }
.bg-soft-warning { background:#fff6e5 !important; color:#7a4d00 !important; border-color:#fde6b8 !important; }
.bg-soft-info    { background:#eaf5fb !important; color:#055160 !important; border-color:#cfe7f3 !important; }
.bg-soft-primary { background:#eef0ff !important; color:#2937f0 !important; border-color:#dfe3ff !important; }

/* Optional: keep headers/text readable inside soft cards */
.card[class*="bg-soft-"] .card-header { background: transparent; }
.card[class*="bg-soft-"] .card-title,
.card[class*="bg-soft-"] .card-subtitle { color: inherit; }

/* KPI cards */
.kpi-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.85rem .75rem;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.kpi-card .kpi-title{
  font-size:.8rem;
  letter-spacing:.03em;
  color:#667085;
  margin-bottom:.2rem;
  text-transform:none;
}
.kpi-card .kpi-value{
  font-weight:700;
  font-size:1.15rem;
  color:#0f172a;
}
.kpi-card .kpi-sub{ margin-top:.35rem; }

/* Left accent by trend (set via PHP class) */
.kpi-card.kpi-up   { border-left:4px solid #12b76a; } /* green */
.kpi-card.kpi-down { border-left:4px solid #f04438; } /* red   */
.kpi-card.kpi-flat { border-left:4px solid #98a2b3; } /* gray  */

@media (min-width: 992px){
  .kpi-card .kpi-value{ font-size:1.25rem; }
}

/* Optional “soft” tints you can use as needed */
.bg-soft-success { background:#eaf7f0 !important; color:#0f5132 !important; border-color:#cfe9db !important; }
.bg-soft-danger  { background:#fdebea !important; color:#842029 !important; border-color:#f7d3d0 !important; }
.bg-soft-warning { background:#fff6e5 !important; color:#7a4d00 !important; border-color:#fde6b8 !important; }
.bg-soft-info    { background:#eaf5fb !important; color:#055160 !important; border-color:#cfe7f3 !important; }
.bg-soft-primary { background:#eef0ff !important; color:#2937f0 !important; border-color:#dfe3ff !important; }



/* Make sure links in the dark sidebar don’t get default blue underline */
.sidebar a { text-decoration:none; }

/* --- Brand pill color fix (PANNA Hub) --- */
:root{
  --brand-hub-bg: #6275f0;   /* PANNA blue */
  --brand-hub-fg: #ffffff;   /* white text */
}

.brand-mark .brand-hub{
  background: var(--brand-hub-bg) !important;
  color: var(--brand-hub-fg) !important;
}

.brand-link:hover .brand-hub{
  background: var(--brand-hub-bg) !important; /* no darkening on hover */
}