/* =========================================
   MaamuusExpress Global UI (UPGRADED)
   - Works with all pages (dashboard, cashbook, credit, clients, auth)
   - Mobile-first polish
   - Sidebar drawer + topbar support
========================================= */

:root{
  --mx-primary:#0ea5e9;
  --mx-primary-600:#0284c7;
  --mx-success:#22c55e;
  --mx-danger:#ef4444;
  --mx-dark:#0b1220;
  --mx-text:#111827;
  --mx-muted:#667085;
  --mx-border:#eef2f7;
  --mx-bg:#f6f8fb;
  --mx-card:#ffffff;
  --mx-radius:18px;

  --mx-shadow:0 10px 30px rgba(16,24,40,.06);
  --mx-shadow-sm:0 8px 20px rgba(16,24,40,.05);
  --mx-focus:0 0 0 .22rem rgba(14,165,233,.16);
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--mx-bg);
  color:var(--mx-text);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Make anchor/btn tap-friendly */
a, button{ -webkit-tap-highlight-color: transparent; }

/* ===== Layout helpers used by sidebar.php ===== */
.layout{ min-height:100vh; background:var(--mx-bg); }
.content{ width:100%; }

/* Topbar (shared) */
.topbar{
  background:var(--mx-card);
  border:1px solid rgba(16,24,40,.08);
  border-radius:16px;
  box-shadow:var(--mx-shadow);
}

/* Icon button (menu) */
.icon-btn{
  border:1px solid #e5e7eb;
  background:#fff;
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
}

/* ===== Cards ===== */
.cardx{
  border:0;
  border-radius:var(--mx-radius);
  box-shadow:var(--mx-shadow);
  background:var(--mx-card);
}
.card, .card-body{ border-radius:inherit; }

/* ===== Buttons ===== */
.btn{
  border-radius:14px;
  font-weight:700;
}
.btn-primary{
  background:var(--mx-primary);
  border-color:var(--mx-primary);
}
.btn-primary:hover{
  background:var(--mx-primary-600);
  border-color:var(--mx-primary-600);
}
.btn-outline-primary{
  border-color:rgba(14,165,233,.45);
  color:var(--mx-primary-600);
}
.btn-outline-primary:hover{
  background:rgba(14,165,233,.10);
  border-color:rgba(14,165,233,.55);
  color:var(--mx-primary-600);
}
.btn:focus, .btn:active:focus{
  box-shadow:var(--mx-focus);
}

/* ===== Badges / Pills ===== */
.badge{ border-radius:999px; }
.pill{ border-radius:999px; padding:.35rem .7rem; font-weight:800; }

/* ===== Typography / Utility ===== */
.muted{ color:var(--mx-muted); }
.tiny{ font-size:12px; color:var(--mx-muted); }
.stat{ font-size:1.5rem; font-weight:900; letter-spacing:-.2px; }

/* ===== Forms ===== */
.form-control,
.form-select,
.input-group-text{
  border-radius:14px;
}
.form-control,
.form-select{
  border:1px solid #e5e7eb;
}
.form-control:focus,
.form-select:focus{
  border-color:rgba(14,165,233,.55);
  box-shadow:var(--mx-focus);
}
.input-group-text{
  border:1px solid #e5e7eb;
  background:#f8fafc;
}
::placeholder{ color:#98a2b3; }

/* Make inputs nicer on mobile */
@media (max-width: 768px){
  .form-control, .form-select{ padding:.75rem .9rem; }
}

/* ===== Tables ===== */
.table{
  --bs-table-border-color:#eef2f7;
}
.table thead th{
  font-weight:800;
  color:#475467;
  white-space:nowrap;
}
.table tbody td{
  color:#101828;
}
.table-responsive{
  border-radius:16px;
}

/* ===== Alerts ===== */
.alert{
  border-radius:16px;
  border:1px solid rgba(16,24,40,.08);
}

/* ===== Sidebar / Navigation (compatible with your new sidebar.php) ===== */
.sidebar{
  background:var(--mx-dark);
  color:#e5e7eb;
}

/* Primary nav links */
.navlink{
  color:#cbd5e1;
  padding:10px 12px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:4px 6px;
  text-decoration:none;
  font-size:14px;
  border:1px solid transparent;
}
.navlink:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}
.navlink.active{
  background:rgba(99,102,241,.22); /* matches sidebar.php active */
  border-color:rgba(99,102,241,.28);
  color:#fff;
  font-weight:900;
}

/* Subnav links */
.subnav a{
  color:#cbd5e1;
}
.subnav a.active{
  background:rgba(99,102,241,.22);
  color:#fff;
  font-weight:900;
}

/* Overlay */
.sidebar-overlay{
  background:rgba(0,0,0,.35);
}

/* ===== Page spacing: prevent “big empty gap” feeling ===== */
.container-fluid.px-0{ padding-left:0 !important; padding-right:0 !important; }
.content{ padding-bottom:14px; }

/* ===== Nice small animations ===== */
.navlink,
.btn,
.cardx,
.form-control,
.form-select{
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.btn:active{ transform:translateY(1px); }

/* ===== Scroll polish ===== */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(16,24,40,.15); border-radius:999px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ===== Mobile improvements ===== */
@media (max-width: 768px){
  .cardx{ border-radius:16px; }
  .stat{ font-size:1.3rem; }
}

/* ===== Print safety ===== */
@media print{
  .sidebar, .sidebar-overlay, .topbar, .btn{ display:none !important; }
  body{ background:#fff; }
  .cardx{ box-shadow:none; border:1px solid #e5e7eb; }
}