/* ============================================================
   MSB Publishers — Shared Professional Theme
   Overlay over Bootstrap 4. Visual only — no markup/logic change.
   Brand: deep indigo-purple + red accent (from MSB logo)
   ============================================================ */

:root{
  --msb-purple:#3a2a7d;
  --msb-purple-dark:#2c1f5f;
  --msb-purple-light:#5a47b0;
  --msb-red:#e1251b;
  --msb-red-dark:#b91d15;
  --msb-bg:#f4f5fa;
  --msb-card:#ffffff;
  --msb-border:#e6e8f0;
  --msb-text:#2b2f3a;
  --msb-muted:#6b7280;
  --msb-shadow:0 2px 10px rgba(33,28,80,.06);
  --msb-shadow-lg:0 8px 28px rgba(33,28,80,.12);
  --msb-radius:.6rem;
}

/* ---------- Base ---------- */
body{
  background:var(--msb-bg) !important;
  color:var(--msb-text);
  font-family:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
}

h1,h2,h3,h4,h5,h6{ color:var(--msb-purple-dark); font-weight:600; }
a{ color:var(--msb-purple); }
a:hover{ color:var(--msb-purple-dark); }

/* ---------- Navbar ---------- */
.navbar{
  background:linear-gradient(90deg,var(--msb-purple) 0%,var(--msb-purple-light) 100%) !important;
  box-shadow:var(--msb-shadow);
  padding:.55rem 1.25rem;
}
.navbar .navbar-brand{
  color:#fff !important;
  font-weight:700;
  letter-spacing:.4px;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.navbar .navbar-brand img{ height:34px; width:auto; background:#fff; padding:3px 6px; border-radius:6px; }
.navbar .nav-link{
  color:rgba(255,255,255,.85) !important;
  font-weight:500;
  padding:.5rem 1rem !important;
  border-radius:6px;
  transition:all .15s ease;
}
.navbar .nav-link:hover{ color:#fff !important; background:rgba(255,255,255,.12); }
/* active link (page logic sets inline color #0000FF — override to a clean active pill) */
.navbar .nav-link[style*="0000FF"]{
  color:#fff !important;
  background:var(--msb-red);
  box-shadow:0 2px 6px rgba(225,37,27,.35);
}
.navbar .navbar-toggler{ border-color:rgba(255,255,255,.5); }
.navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-user{
  color:#fff;
  font-weight:500;
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.92rem;
}
.navbar-user .avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--msb-red); color:#fff; font-weight:700; font-size:.85rem;
}

/* ---------- Cards / containers ---------- */
.card{
  border:1px solid var(--msb-border) !important;
  border-radius:var(--msb-radius) !important;
  box-shadow:var(--msb-shadow);
}
.container,.container-fluid{ padding-top:.5rem; }

/* ---------- Tables ---------- */
.table{
  background:var(--msb-card);
  border-radius:var(--msb-radius);
  overflow:hidden;
  box-shadow:var(--msb-shadow);
  margin-bottom:1.5rem;
}
.table thead th{
  background:var(--msb-purple);
  color:#fff !important;
  font-weight:600;
  border:none !important;
  vertical-align:middle;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.table.table-light thead th,.table thead.table-light th{
  background:#eef0f8;
  color:var(--msb-purple-dark) !important;
}
.table td,.table th{ vertical-align:middle; border-color:var(--msb-border) !important; }
.table-striped tbody tr:nth-of-type(odd){ background:#f8f9fd; }
.table-hover tbody tr:hover{ background:#eef0f8; }
.table-bordered{ border:1px solid var(--msb-border) !important; }

/* Grand-total / footer rows */
.table tbody tr:last-child td[colspan]{ font-weight:700; color:var(--msb-purple-dark); }

/* ---------- Buttons ---------- */
.btn{ border-radius:.45rem; font-weight:500; letter-spacing:.2px; }
.btn-primary{ background:var(--msb-purple) !important; border-color:var(--msb-purple) !important; }
.btn-primary:hover,.btn-primary:focus{ background:var(--msb-purple-dark) !important; border-color:var(--msb-purple-dark) !important; box-shadow:0 4px 12px rgba(58,42,125,.3); }
.btn-info{ background:var(--msb-purple-light) !important; border-color:var(--msb-purple-light) !important; color:#fff !important; }
.btn-info:hover{ background:var(--msb-purple) !important; border-color:var(--msb-purple) !important; }
.btn-warning{ background:#f3a712 !important; border-color:#f3a712 !important; color:#fff !important; }
.btn-warning:hover{ background:#d8920a !important; border-color:#d8920a !important; }
.btn-danger{ background:var(--msb-red) !important; border-color:var(--msb-red) !important; }
.btn-danger:hover{ background:var(--msb-red-dark) !important; border-color:var(--msb-red-dark) !important; }
.btn-dark{ background:var(--msb-purple) !important; border-color:var(--msb-purple) !important; }
.btn-dark:hover{ background:var(--msb-purple-dark) !important; border-color:var(--msb-purple-dark) !important; }
.btn-secondary{ background:#6b7280 !important; border-color:#6b7280 !important; }
.btn-success{ background:#1f9d5b !important; border-color:#1f9d5b !important; }

/* ---------- Forms ---------- */
.form-control,.form-select,select.form-control{
  border:1px solid var(--msb-border);
  border-radius:.45rem;
  font-size:.92rem;
  color:var(--msb-text);
}
.form-control:focus,select.form-control:focus{
  border-color:var(--msb-purple-light);
  box-shadow:0 0 0 .18rem rgba(90,71,176,.18);
}
.form-control-lg{ border-radius:.5rem; }
label,.form-label{ font-weight:500; color:var(--msb-text); font-size:.9rem; }
.form-group{ margin-bottom:1rem; }

/* ---------- Pagination ---------- */
.pagination{ flex-wrap:wrap; gap:.25rem; }
.page-link{ color:var(--msb-purple); border:1px solid var(--msb-border); border-radius:.4rem !important; margin:0 1px; }
.page-link:hover{ background:#eef0f8; color:var(--msb-purple-dark); }
.page-item.active .page-link{ background:var(--msb-purple) !important; border-color:var(--msb-purple) !important; color:#fff; }

/* ---------- Modals ---------- */
.modal-content{ border:none; border-radius:var(--msb-radius); box-shadow:var(--msb-shadow-lg); overflow:hidden; }
.modal-header{ background:var(--msb-purple); color:#fff; border-bottom:none; }
.modal-header .modal-title{ color:#fff; font-weight:600; }
.modal-header .close,.modal-header .btn-close{ color:#fff; opacity:.85; text-shadow:none; }
.modal-header .close span{ color:#fff; }
.modal-footer{ border-top:1px solid var(--msb-border); }

/* ---------- Badges / misc ---------- */
.badge-primary{ background:var(--msb-purple); }
hr{ border-color:var(--msb-border); }

/* ---------- Login page (index.php) ---------- */
.vh-100[style*="9A616D"]{
  background:linear-gradient(135deg,var(--msb-purple) 0%,var(--msb-purple-light) 55%,var(--msb-red) 140%) !important;
}
#loginForm .btn{ background:var(--msb-purple); border-color:var(--msb-purple); }
#loginForm .btn:hover{ background:var(--msb-purple-dark); border-color:var(--msb-purple-dark); }

/* ---------- Utility spacing for centered action bars ---------- */
center > a > .btn,center > .btn{ margin:1rem .25rem; }

/* ---------- Responsive niceties ---------- */
@media (max-width:768px){
  body{ font-size:14px; }
  .table thead th{ font-size:.75rem; }
  .navbar-user{ margin:.5rem 0 0; }
}

/* ============================================================
   ADVANCED COMPONENTS (page header, filters, KPIs, badges…)
   ============================================================ */

/* ---------- Content wrapper ---------- */
.msb-content{ max-width:1320px; margin:0 auto; padding:0 1.25rem 2rem; }

/* ---------- Page header bar ---------- */
.page-header{
  background:#fff;
  border-bottom:1px solid var(--msb-border);
  box-shadow:var(--msb-shadow);
  padding:1rem 1.5rem;
  margin-bottom:1.4rem;
}
.page-header .ph-inner{
  max-width:1320px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.page-header .ph-title{ font-size:1.35rem; font-weight:700; color:var(--msb-purple-dark); margin:0; display:flex; align-items:center; gap:.55rem; }
.page-header .ph-title i{ color:var(--msb-purple); }
.page-header .ph-crumb{ font-size:.82rem; color:var(--msb-muted); margin-top:3px; }
.page-header .ph-crumb a{ color:var(--msb-purple); text-decoration:none; }
.page-header .ph-crumb a:hover{ text-decoration:underline; }

/* ---------- KPI / summary cards ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1.4rem; }
.kpi-card{
  background:#fff; border:1px solid var(--msb-border); border-radius:var(--msb-radius);
  box-shadow:var(--msb-shadow); padding:1rem 1.2rem; display:flex; align-items:center; gap:.9rem;
}
.kpi-card .kpi-ic{
  width:48px; height:48px; border-radius:12px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:23px;
  background:#eef0f8; color:var(--msb-purple);
}
.kpi-card .kpi-label{ font-size:.8rem; color:var(--msb-muted); margin:0; }
.kpi-card .kpi-val{ font-size:1.55rem; font-weight:700; color:var(--msb-purple-dark); margin:0; line-height:1.1; }
.kpi-card.accent .kpi-ic{ background:#fdeceb; color:var(--msb-red); }
.kpi-card.accent .kpi-val{ color:var(--msb-red-dark); }
.kpi-card.green .kpi-ic{ background:#e1f5ee; color:#0f6e56; }
.kpi-card.green .kpi-val{ color:#0f6e56; }

/* ---------- Filter card ---------- */
.filter-card{
  background:#fff; border:1px solid var(--msb-border); border-radius:var(--msb-radius);
  box-shadow:var(--msb-shadow); padding:1.1rem 1.25rem; margin-bottom:1.4rem;
}
.filter-card .fc-head{
  font-size:.78rem; font-weight:700; color:var(--msb-muted);
  text-transform:uppercase; letter-spacing:.5px; margin:0 0 .85rem;
  display:flex; align-items:center; gap:.4rem;
}
.filter-card .fc-head i{ color:var(--msb-purple); }
.filter-card label{ font-size:.78rem; color:var(--msb-muted); margin-bottom:.2rem; }

/* ---------- Sticky table header ---------- */
.table-responsive{ border-radius:var(--msb-radius); box-shadow:var(--msb-shadow); }
.table thead th{ position:sticky; top:0; z-index:2; }

/* ---------- Icon action buttons ---------- */
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:8px; font-size:16px; margin:0 2px;
}
.btn-icon i{ line-height:1; }

/* ---------- Status badges ---------- */
.msb-badge{ display:inline-block; padding:.25rem .65rem; border-radius:20px; font-size:.74rem; font-weight:600; white-space:nowrap; }
.msb-badge.purple{ background:#eef0f8; color:var(--msb-purple); }
.msb-badge.green{ background:#e1f5ee; color:#0f6e56; }
.msb-badge.amber{ background:#faeeda; color:#854f0b; }
.msb-badge.muted{ background:#eef0f3; color:var(--msb-muted); }
.msb-badge.red{ background:#fcebeb; color:#a32d2d; }

/* Visit-report row highlighting */
.table-striped tbody tr.row-novisit,
tr.row-novisit{ background:#fcebeb !important; }
.table-striped tbody tr.row-low,
tr.row-low{ background:#fdf3e3 !important; }
tr.row-novisit td:first-child,
tr.row-low td:first-child{ font-weight:600; }

/* ---------- Footer ---------- */
.msb-footer{
  text-align:center; color:var(--msb-muted); font-size:.82rem;
  padding:1.6rem 1rem; border-top:1px solid var(--msb-border); margin-top:2.5rem; background:#fff;
}
.msb-footer a{ color:var(--msb-purple); text-decoration:none; font-weight:500; }

/* ---------- Modal AJAX loading spinner (shows while body empty) ---------- */
.modal.show .modal-body:empty::after{
  content:""; display:block; width:36px; height:36px; margin:2rem auto;
  border:3px solid #e6e8f0; border-top-color:var(--msb-purple);
  border-radius:50%; animation:msbspin .7s linear infinite;
}
@keyframes msbspin{ to{ transform:rotate(360deg); } }

/* ---------- Print letterhead (print-voucher) ---------- */
.msb-letterhead{
  display:flex; align-items:center; gap:1rem;
  border-bottom:3px solid var(--msb-purple); padding-bottom:.85rem; margin-bottom:1.25rem;
}
.msb-letterhead img{ height:54px; }
.msb-letterhead .lh-meta{ margin-left:auto; text-align:right; font-size:.8rem; color:var(--msb-muted); }
@media print{
  .navbar,.page-header,.msb-footer,.no-print{ display:none !important; }
  body{ background:#fff !important; }
}