/* ---------- Page layout ---------- */
    :root {
      --green: #2f7e6a;
      --green-dark: #2b6e5b;
      --accent: #ffffff;
      --card-bg: #fff;
      --muted: #6b7280;
    }
    body {
      font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
      background: #f3f6f5;
      margin: 18px;
      color: #0b1a1a;
    }

    .container {
      max-width: 1500px;
      margin: 0 auto;
    }

    .card {
      background: var(--card-bg);
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(12, 18, 16, 0.06);
      padding: 18px;
      border: 1px solid rgba(17, 24, 22, 0.04);
    }

    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }

    .tab-btn {
      border-radius: 6px;
      background: var(--green-dark);
      color: #fff;
      padding: 8px 12px;
      border: none;
      cursor: pointer;
      font-weight: 600;
    }
    .tab-btn.inactive {
      background: #f0f6f3;
      color: var(--green-dark);
      border: 1px solid rgba(47,126,106,0.12);
    }

    /* header section like screenshot */
    .header-block {
      background: var(--green);
      color: #fff;
      padding: 10px;
      border-radius: 6px;
      margin-bottom: 12px;
    }
    .header-block h1 {
      margin: 0;
      font-size: 32px;
      letter-spacing: -0.5px;
    }
    .header-sub {
      margin-top: 8px;
      color: rgba(255,255,255,0.92);
      font-size: 14px;
    }

    /* actions and totals row */
    .actions-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 14px 0;
      flex-wrap:wrap;
    }
    .left-actions { display:flex; gap:8px; align-items:center; }
    .right-actions { margin-left:auto; display:flex; gap:12px; align-items:center; }

    .btn {
      border: none;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .btn.primary { background: #2f7e6a; color: #fff; box-shadow: none; }
    .btn.ghost { background: #fff; border: 1px solid rgba(15,23,16,0.06); color: #0b1a1a; }
    .btn.danger { background: #b91c1c; color: #fff; }

    .total-box {
      font-weight: 700;
      color: #111827;
    }
    .total-label { font-size: 13px; color: var(--muted); margin-right:6px; }

    /* DataTable tweaks */
    table.dataTable thead th {
      background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
      color: #fff;
      font-weight:700;
      border-bottom: 0;
    }
    table.dataTable tbody td { vertical-align: middle; }
    .dataTables_wrapper .dataTables_filter { float: right; text-align: right; }
    .dataTables_wrapper .dt-buttons { margin-bottom: 8px; }

    /* small helpers */
    .muted { color: var(--muted); font-size: 14px; }

    /* modal */
    .modal {
      display:none;
      position:fixed;
      inset:0;
      background: rgba(6,6,6,0.45);
      z-index: 9999;
      align-items:center;
      justify-content:center;
      padding: 20px;
    }
    .modal .panel {
      width:400px;
      max-width:96%;
      background:#fff;
      border-radius:8px;
      padding: 17px 28px 15px 16px;
    }
    .modal label { display:block; margin-top:8px; font-size:13px; color:#374151; }
    .modal input[type="text"], select, .modal input[type="date"], .modal input[type="number"], .modal textarea {
      width:100%; padding:8px; margin-top:6px; border-radius:6px; border:1px solid #e6eef0;
    }
    .modal .modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }

    /* notification */
    .notification {
      position:fixed; right:18px; bottom:18px; background:#111827; color:#fff; padding:12px 14px; border-radius:8px; z-index:10000;
      opacity:0.98;
    }
    .notification.error { background:#b91c1c; }

    /* responsive table container spacing */
    .table-wrap { background: #fff; border-radius: 6px; padding: 10px; border:1px solid rgba(11,26,26,0.02); }

  .dataTables_processing {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px 40px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 10;
}

.processing-overlay .spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #ccc;
  border-top: 3px solid #007bff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}