:root {
      --pfx-primary: #1b2f70;
      --pfx-primary-2: #3c7ab3;
      --pfx-accent: #22c55e;
      --pfx-descent: rgba(255, 0, 0, .4);
      --pfx-ink: #0b1220;
      --pfx-muted: #667085;
      --pfx-bg: #f6f8fc;
      --pfx-card: #ffffff;
      --pfx-border: rgba(15, 23, 42, .10);
      --pfx-shadow: 0 10px 30px rgba(2, 6, 23, .08);
      --radius: 18px;
      --sidebar-w: 280px;
    }

    html,
    body {
      height: 100%;
    }

    body {
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: radial-gradient(1200px 700px at 10% -10%, rgba(60, 122, 179, .22), transparent 60%),
        radial-gradient(900px 600px at 100% 0%, rgba(27, 47, 112, .16), transparent 55%),
        var(--pfx-bg);
      color: var(--pfx-ink);
    }

    /* App shell */
    .app {
      min-height: 100%;
      display: flex;
    }

    /* Sidebar */
    .sidebar {
      width: var(--sidebar-w);
      background: linear-gradient(180deg, rgba(27, 47, 112, .96), rgba(27, 47, 112, .90));
      color: #fff;
      border-right: 1px solid rgba(255, 255, 255, .10);
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 16px;
      overflow-y: auto;
    }

    @media (min-width: 992px) {
      .sidebar {
        display: block;
      }
    }

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

    .brand .logo {
      width: 36px;
      height: 36px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .14);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    }

    .navpill {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      color: rgba(255, 255, 255, .90);
      text-decoration: none;
      margin-bottom: 6px;
    }

    .navpill:hover {
      background: rgba(255, 255, 255, .10);
      color: #fff;
    }

    .navpill.active {
      background: rgba(255, 255, 255, .14);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
      color: #fff;
    }

    .sidebar small {
      color: rgba(255, 255, 255, .70);
    }

    /* Main */
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    /* Topbar (mobile + actions) */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(10px);
      background: rgba(246, 248, 252, .75);
      border-bottom: 1px solid var(--pfx-border);
    }

    .topbar-inner {
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .search {
      max-width: 520px;
      width: 100%;
    }

    .search .form-control {
      border-radius: 14px;
      border: 1px solid var(--pfx-border);
      background: #fff;
    }

    /* Cards */
    .cardx {
      background: var(--pfx-card);
      border: 1px solid var(--pfx-border);
      border-radius: var(--radius);
      box-shadow: var(--pfx-shadow);
      overflow: hidden;
    }

    .cardx-header {
      padding: 16px 18px;
      border-bottom: 1px solid var(--pfx-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .cardx-body {
      padding: 16px 18px;
    }

    /* Chips */
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(27, 47, 112, .06);
      border: 1px solid rgba(27, 47, 112, .14);
      color: var(--pfx-primary);
      font-weight: 600;
      font-size: 12.5px;
      white-space: nowrap;
    }

    .chip.success {
      background: rgba(34, 197, 94, .10);
      border: 1px solid rgba(34, 197, 94, .22);
      color: #168a3f;
    }

    /* Tabs */
    .nav-tabs .nav-link {
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--pfx-muted);
      font-weight: 600;
      border-radius: 0;
      padding: 12px 14px;
    }

    .nav-tabs .nav-link.active {
      color: var(--pfx-primary);
      border-bottom-color: var(--pfx-primary);
      background: transparent;
    }

    /* Buttons */
    .btn-primary {
      background: linear-gradient(135deg, var(--pfx-primary), var(--pfx-primary-2));
      border: none;
      box-shadow: 0 10px 20px rgba(27, 47, 112, .18);
    }

    /* Chart canvas spacing */
    .chart-wrap {
      position: relative;
      width: 100%;
      min-height: 200px;
    }

    .chart-wrap canvas {
      width: 100% !important;
      height: 100% !important;
    }

    .muted {
      color: var(--pfx-muted);
    }

    .kpi {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .kpi .box {
      flex: 1;
      min-width: 140px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid var(--pfx-border);
      background: rgba(27, 47, 112, .04);
    }

    .kpi .label {
      font-size: 12px;
      color: var(--pfx-muted);
    }

    .kpi .value {
      font-size: 18px;
      font-weight: 700;
    }

    .kpi .sub {
      font-size: 12px;
      color: var(--pfx-muted);
    }

    /* Modal polish */
    .modal-content {
      border-radius: 18px;
      border: 1px solid var(--pfx-border);
      box-shadow: 0 25px 60px rgba(2, 6, 23, .18);
    }

    /* ===== DataTable container ===== */
    .dataTables_wrapper {
      font-size: 0.95rem;
    }

    /* ===== Header ===== */
    table.dataTable thead th {
      font-weight: 700;
      color: var(--pfx-primary);
      background: linear-gradient(180deg,
          rgba(27, 47, 112, .06),
          rgba(27, 47, 112, .02));
      border-bottom: 1px solid var(--pfx-border) !important;
      padding: 14px 12px;
    }

    /* ===== Body rows ===== */
    table.dataTable tbody td {
      padding: 12px;
      border-top: 1px solid var(--pfx-border);
    }

    /* Hover row */
    table.dataTable tbody tr:hover {
      background: rgba(27, 47, 112, .04);
    }

    /* ===== Zebra (soft) ===== */
    table.dataTable.stripe tbody tr.odd {
      background-color: rgba(27, 47, 112, .015);
    }

    /* ===== Numbers alignment ===== */
    .table-number {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 600;
    }

    /* ===== Pagination ===== */
    .dataTables_paginate .page-item .page-link {
      border-radius: 12px;
      margin: 0 3px;
      border: 1px solid var(--pfx-border);
      color: var(--pfx-primary);
    }

    .dataTables_paginate .page-item.active .page-link {
      background: linear-gradient(135deg, var(--pfx-primary), var(--pfx-primary-2));
      border: none;
      color: #fff;
    }

    /* ===== Search input ===== */
    .dataTables_filter input {
      border-radius: 14px;
      border: 1px solid var(--pfx-border);
      padding: 6px 12px;
      margin-left: 8px;
    }


    /* ===== Accounting tables (inside tabs) ===== */
    .pfx-table-wrap {
      border: 1px solid var(--pfx-border);
      border-radius: 16px;
      overflow: hidden;
      background: #fff;
    }

    /* table base */
    .pfx-table {
      font-size: 0.95rem;
    }

    /* header */
    .pfx-table thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: linear-gradient(180deg,
          rgba(27, 47, 112, .06),
          rgba(27, 47, 112, .02));
      border-bottom: 1px solid var(--pfx-border) !important;
      color: var(--pfx-primary);
      font-weight: 800;
    }

    /* row label column */
    .pfx-table tbody th {
      font-weight: 700;
      color: var(--pfx-ink);
      max-width: 520px;
    }

    /* sticky first column (super useful on mobile) */
    .pfx-sticky-col {
      position: sticky;
      left: 0;
      z-index: 3;
      background: #fff;
      box-shadow: 1px 0 0 var(--pfx-border);
    }

    /* keep sticky header + sticky col looking correct */
    .pfx-table thead .pfx-sticky-col {
      z-index: 4;
    }

    /* cells */
    .pfx-table td,
    .pfx-table th {
      padding: 12px 12px;
      border-top: 1px solid var(--pfx-border);
      white-space: nowrap;
    }

    /* hover */
    .pfx-table tbody tr:hover {
      background: rgba(27, 47, 112, .03);
    }

    /* numbers */
    .pfx-table .table-number {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
    }