:root{
  --mf-primary:#4e73df;   /* Primary */
  --mf-info:#36b9cc;      /* Info */
  --mf-secondary:#858796; /* Secondary */
  --mf-light:#f8f9fc;     /* Light for text on primary */
}
:root{
  --bs-primary: var(--mf-primary);
  --bs-info: var(--mf-info);
  --bs-secondary: var(--mf-secondary);
  --bs-light: var(--mf-light);
}
html, body{ margin:0; padding:0; background:#eef1f5; }

/* Single header (no includes) */
header, .site-header{ background: var(--mf-primary); color: var(--mf-light); margin:0; }
.site-header a{ color: var(--mf-light); text-decoration:none; }
.site-header a:hover{ opacity:.9; }

/* Content */
.content{ padding: 24px 16px; }
.content.container, .content.container-fluid{ padding-left:0!important; padding-right:0!important; }
.content > :first-child{ margin-top:0; }

/* Cards & stats cosmetics */
:root{ --mf-radius: 1rem; --mf-shadow: 0 6px 20px rgba(0,0,0,.08); }
.card{ border-radius: var(--mf-radius); box-shadow: var(--mf-shadow); }
.card .card-header{ font-weight:600; }
.stat-card{
  border: 0; border-radius: var(--mf-radius);
  background: linear-gradient(135deg, rgba(78,115,223,.10), rgba(54,185,204,.10));
}
.stat-card .icon-badge{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px; background: rgba(78,115,223,.15); color:#fff;
}
.stat-card .icon-badge.info{ background: rgba(54,185,204,.2); }
.stat-card .icon-badge.warn{ background: rgba(133,135,150,.25); }

/* Buttons */
.btn-primary{ background-color: var(--mf-primary) !important; border-color: var(--mf-primary) !important; }
.btn-info{ background-color: var(--mf-info) !important; border-color: var(--mf-info) !important; }
.btn-outline-primary{ color: var(--mf-primary) !important; border-color: var(--mf-primary) !important; }
.btn-outline-primary:hover{ background: var(--mf-primary) !important; color: var(--mf-light) !important; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.08); }
.btn:active{ transform: translateY(0); box-shadow:none; }
@media (max-width:575.98px){
  .btn{ padding:.75rem 1rem; border-radius:.75rem; }
  .btn-group>.btn{ padding:.6rem .9rem; }
}

/* Mobile card tables */
@media (max-width: 767.98px){
  .table-responsive{ border-radius: var(--mf-radius); overflow: hidden; }
  table.table{ display:block; }
  table.table thead{ display:none; }
  table.table tbody{ display:block; }
  table.table tr{ display:block; background:#fff; margin:0 0 .75rem 0; padding:.75rem; border-radius:.75rem; box-shadow: var(--mf-shadow); }
  table.table td{ display:flex; justify-content:space-between; padding:.35rem 0; border:0 !important; }
  table.table td::before{ content: attr(data-label); font-weight:600; color:#6b7280; margin-right:1rem; }
  .table .text-end{ justify-content:flex-end; }
  .table .btn{ width:100%; margin-top:.5rem; }
}

/* Icon helpers */
.i-xxl{ font-size:28px; } .i-xl{ font-size:22px; } .i-lg{ font-size:18px; }
.rounded-avatar{width:112px;height:112px;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.06)}


/* Header brand pill uses secondary background */
.site-header .brand-pill{
  background: var(--mf-secondary);
  color: var(--mf-light);
  padding: .25rem .6rem;
  border-radius: .5rem;
}

/* Mobile actions: stack 3 buttons nicely */
@media (max-width: 767.98px){
  td.actions{
    display:block;
  }
  td.actions .btn{
    width:100%;
    margin:.3rem 0;
  }
}


/* Header: make nav links subtle pills */
.site-header .nav-pills .nav-link{
  padding:.35rem .6rem;
  border-radius:.5rem;
  opacity:.95;
}
.site-header .nav-pills .nav-link:hover{ background: rgba(255,255,255,.15); }
.site-header .nav-pills .nav-link.active{ background: rgba(255,255,255,.22); }

/* Compact mobile card rows to reduce scroll */
@media (max-width: 767.98px){
  table.table tr{ margin: .4rem 0; padding: .5rem .6rem; box-shadow: 0 3px 10px rgba(0,0,0,.06); }
  table.table td{ padding: .25rem 0; }
}

/* Extra-compact variant for heavy lists */
.table.compact-card tr{ margin:.3rem 0; padding:.45rem .5rem; }
.table.compact-card td{ padding:.2rem 0; }
td.actions .btn{ white-space: nowrap; }


/* Preserve KPI styling on mobile (no color washout) */
@media (max-width: 767.98px){
  .stat-card{ background: linear-gradient(135deg, rgba(78,115,223,.12), rgba(54,185,204,.12)); }
  .stat-card .icon-badge{ background: rgba(78,115,223,.2); }
  .stat-card .icon-badge.info{ background: rgba(54,185,204,.25); }
  .stat-card .icon-badge.warn{ background: rgba(133,135,150,.28); }
}

/* Even more compact mobile rows to avoid long scroll */
@media (max-width: 767.98px){
  table.table tr{ margin:.25rem 0; padding:.45rem .5rem; }
  table.table td{ padding:.18rem 0; }
}


/* Smaller KPIs on mobile */
@media (max-width: 575.98px){
  .stat-card .card-body{ padding: .6rem .75rem !important; }
  .stat-card .icon-badge{ width:32px; height:32px; border-radius:10px; }
  .stat-card .h4, .stat-card .h5{ font-size: 1.05rem; }
  .stat-card .text-muted.small{ font-size: .72rem; }
}