/* =========================
 PannaHub – 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 */
}

#burger{ 
  width: 44px;  /* Increased from 36px for better mobile touch */
  height: 44px; 
  padding: 0; 
  line-height: 1;
  position: relative;
  z-index: 1050; /* Higher than topbar and sidebar */
}

/* para el gear que recibe json de SAP */
.column-toggle-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
  padding: 1rem;
  min-width: 320px;
  max-height: 500px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}
.column-toggle-menu.show { display: block; }
.column-search { margin-bottom: 0.75rem; }
.column-search input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}
.column-toggle-item {
  display: flex;
  align-items: center;
  padding: 0.4rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s;
  font-size: 0.875rem;
}
.column-toggle-item:hover { background-color: #f8f9fa; }
.column-toggle-item input[type="checkbox"] {
  margin-right: 0.5rem;
  cursor: pointer;
}
.column-toggle-item label {
  margin: 0;
  cursor: pointer;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.column-toggle-item .friendly-name {
  font-weight: 500;
  color: #212529;
}
.column-toggle-item .field-name {
  font-size: 0.75rem;
  color: #6c757d;
  font-family: 'Courier New', monospace;
}
.gear-icon-btn {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: #6c757d;
  transition: color 0.15s;
  font-size: 1.5rem;
}
.gear-icon-btn:hover { color: #0d6efd; }
.gear-icon-btn svg { width: 20px; height: 20px; }
.toggle-actions {
  border-top: 1px solid #dee2e6;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}
.toggle-actions button { flex: 1; font-size: 0.875rem; }
.field-count {
  font-size: 0.75rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

td.text-end {
  vertical-align: middle;
  white-space: nowrap;
}