/* Ruber Media CRM UI */
:root{
  --crm-bg:#f6f7fb;
  --crm-surface:#ffffff;
  --crm-card:#ffffff;
  --crm-muted:#64748b;
  --crm-border:rgba(15,23,42,.10);
  --crm-text:#0f172a;
  --crm-sidebar:#ffffff;
  --crm-sidebar-border:rgba(15,23,42,.08);
  --crm-sidebar-hover:#f1f5f9;
}
.crm-body{ background:#f6f7fb; }
/* App shell (desktop) */
.crm-app{ display:grid; grid-template-columns: 260px 1fr; min-height:100vh; }
.crm-app > aside.crm-sidebar{min-height:100vh;position:sticky;top:0;height:100vh;overflow:auto;background:#fff;border-right:1px solid rgba(0,0,0,.06);} 
.crm-app > main.crm-main{ min-width:0; }
.crm-sidebar{
  background: var(--crm-sidebar);
  color: var(--crm-text);
  border-right:1px solid var(--crm-sidebar-border);
}
.crm-sidebar .list-group-item{
  background: transparent;
  border: 0;
  color:#334155;
  border-radius: 12px;
  margin-bottom: 6px;
}
.crm-sidebar .list-group-item:hover{ background: rgba(255,255,255,.06); color:#fff; }
.crm-sidebar .list-group-item.active{
  background: rgba(255,255,255,.12);
  color:#fff;
}
.crm-sidebar .list-group-item i{ opacity:.9; }
.crm-topbar{
  background:#fff;
  border-bottom:1px solid var(--crm-border);
}
.crm-card{
  background:#fff;
  border:1px solid var(--crm-border);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
.kpi{
  display:flex; align-items:center; gap:12px;
}
.kpi .kpi-icon{
  width:42px; height:42px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background:#f1f5f9; color:#0f172a;
}
.table thead th{ color:#334155; font-weight:600; background:#f8fafc; }
.badge-soft{
  background:#f1f5f9; color:#0f172a; border:1px solid var(--crm-border);
}
.btn-soft{
  background:#f1f5f9; border:1px solid var(--crm-border);
}
.btn-soft:hover{ background:#e2e8f0; }
.form-control, .form-select{ border-radius: 12px; }

/* Enhancements v2.2 */
.crm-topbar{ position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); }
.crm-sidebar .list-group-item{ border-radius: 12px; margin-bottom: 6px; }
.crm-sidebar .input-group-text{ background: #fff; border-color: var(--crm-border); color: var(--crm-muted); }
.crm-sidebar .form-control{ background:#fff; border-color: var(--crm-border); color: var(--crm-text); }
.crm-sidebar .form-control::placeholder{ color: rgba(15,23,42,.45); }
.table> :not(caption)>*>*{ padding:.75rem .75rem; }
.table thead th{ position: sticky; top: 0; background: #f8fafc; z-index: 5; }
.crm-card{ transition: transform .12s ease, box-shadow .12s ease; }
.crm-card:hover{ box-shadow: 0 18px 45px rgba(2,6,23,.10); }
.btn{ border-radius: 12px; }


/* Consistent page spacing */
.crm-main{ padding:24px !important; }
.crm-page{ width:100%; max-width:none; margin:0; }
@media (max-width: 768px){
  .crm-main{ padding:16px !important; }
}
/* Keep finance filter row one line */
.crm-toolbar{ flex-wrap:nowrap !important; overflow-x:auto; }
.crm-toolbar::-webkit-scrollbar{ height:6px; }

/* Mobile topbar + offcanvas */
.crm-mobile-topbar{ position: sticky; top:0; z-index: 30; background:#fff; border-bottom:1px solid var(--crm-border); padding: 10px 12px; }
.crm-mobile-topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.crm-mobile-topbar__brand img{ height:28px; width:auto; display:block; }
.crm-mobile-topbar__search{ margin-top: 10px; }

@media (max-width: 991.98px){
  .crm-main{ padding: 14px !important; }
.crm-page{ width:100%; max-width:none; margin:0; }
  /* kill horizontal scroll */
  html, body{ overflow-x:hidden; }
  .container-fluid{ padding-left:0; padding-right:0; }
  .crm-shell .row{ margin-left:0; margin-right:0; }
  .crm-main{ width:100%; }
  .crm-card{ border-radius: 18px; }
  .table-responsive{ border-radius: 18px; }
  .offcanvas{ width: 86vw; max-width: 360px; }
}

/* Charts */
.crm-chart-box{ position:relative; height: 320px; }
@media (max-width: 768px){
  .crm-chart-box{ height: 240px; }
}


/* Light theme + mobile polish v11.5 */
.crm-sidebar .list-group-item:hover{ background: var(--crm-sidebar-hover); }
.crm-sidebar .list-group-item.active{ background:#e2e8f0; border-color: transparent; color: var(--crm-text); font-weight:600; }
.crm-mobile-topbar{ background:#fff; border-bottom:1px solid var(--crm-border); padding:10px 12px; }
.crm-mobile-topbar__brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.crm-mobile-topbar__title{ font-size:14px; font-weight:600; color: var(--crm-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-mobile-topbar__search{ margin-top:10px; }
@media (max-width: 991.98px){
  .crm-main{ padding: 12px !important; }
  .crm-card{ padding:14px !important; }
  .crm-card.p-3{ padding:14px !important; }
  .row{ --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
  .container, .container-fluid{ padding-left:12px !important; padding-right:12px !important; }
}
.crm-chart-mini{ position:relative; height: 220px; }
@media (max-width: 768px){ .crm-chart-mini{ height: 200px; } }
.crm-chart-mini canvas{ width:100% !important; height:100% !important; }


/* --- v11.5 UI fixes: stronger sidebar text + full-height sidebar --- */
.crm-shell > .crm-sidebar{min-height:100vh; color: var(--crm-text) !important;}
.crm-sidebar .nav-link,
.crm-sidebar a{color: var(--crm-text) !important; opacity: .92; font-weight: 600;}
.crm-sidebar .nav-link:hover{background: var(--crm-sidebar-hover);}
.crm-sidebar .nav-link.active{background: var(--crm-sidebar-hover); opacity:1;}
/* Ensure main stretches */
.crm-main{width:100%;}

@media (max-width: 991.98px){
  .crm-main{padding:12px !important;}
}

.crm-sidebar .brand{display:flex;align-items:center;gap:10px;margin-bottom:14px; padding:8px 6px;border-bottom:1px solid rgba(0,0,0,.06);}

/* Desktop layout fixes */
@media (min-width: 992px){
  .crm-main{ padding:24px 28px !important; }
}
@media (max-width: 991.98px){
  .crm-app{ grid-template-columns: 1fr; }
}

.crm-sidebar .brand img{display:block;height:44px;width:auto;max-width:100%;}