body {
      background: #f4f6fb;
    }

    .pointer {
      cursor: pointer;
    }

    .child-row {
      background: #fafafa;
    }

    .benchmark-table td {
      font-size: 14px;
    }

    body {
      background: #f4f6fb;
    }

    .pointer {
      cursor: pointer;
    }

    .child-row {
      background: #fafafa;
    }

    .benchmark-table td {
      font-size: 14px;
    }

    /* Mobile Optimization */
    @media (max-width: 768px) {
      h3 {
        font-size: 18px;
      }

      table {
        font-size: 13px;
      }

      th,
      td {
        padding: 8px !important;
        white-space: nowrap;
      }

      .fa-plus,
      .fa-minus {
        font-size: 18px;
      }

      .table-responsive {
        border: none;
      }

      .benchmark-table td,
      .benchmark-table th {
        font-size: 12px;
      }
    }

    .menu-bar {
      display: flex;
      gap: 12px;
    }

    .section {
      display: none;
    }

    .section.active {
      display: block;
    }

    .attendance-item {
      padding: 10px 12px;
      border-bottom: 1px solid #eaeaea;
    }

    body {
      background: #f4f6f9;
      font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
      margin-top: 70px;
    }

    .dashboard-header {
      background: #ffffff;
      border-bottom: 1px solid #e5e7eb;
    }

    h1 {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    /* DATE + MENU GROUPING */
    .control-panel {
      background: #ffffff;
      padding: 16px;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
    }

    /* MENU */
    .menu-bar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }


    /* CARD GRID */
    .location-block {
      background: #ffffff;
      border-radius: 12px;
      padding: 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      height: 100%;
    }

    .location-title {
      font-size: 15px;
      font-weight: 700;
    }

    .total-count {
      font-size: 12px;
      color: #6b7280;
    }

    /* STATS */
    .stat-card {
      border-radius: 10px;
      padding: 14px 10px;
      text-align: center;
    }

    .stat-count {
      font-size: 20px;
      font-weight: 700;
    }

    .stat-label {
      font-size: 12px;
    }

    /* COLORS */
    .present {
      background: #198754;
      color: #fff;
    }

    .remote {
      background: #0d6efd;
      color: #fff;
    }

    .leave {
      background: #ffc107;
      color: #000;
    }

    .notin {
      background: #dc3545;
      color: #fff;
    }

    /* ATTENDANCE LIST */
    .attendance-item {
      padding: 10px 14px;
      font-size: 13px;
      border-bottom: 1px solid #e5e7eb;
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      h1 {
        font-size: 18px;
      }

      .menu-bar {
        flex-direction: column;
      }

      .stat-count {
        font-size: 18px;
      }
    }

    /* SHIFT PILLS */
    .shift-tabs {
      background: #f4f6fb;
      padding: 8px;
      border-radius: 14px;
      gap: 8px;
    }

    .shift-tabs .nav-link {
      border-radius: 12px;
      font-weight: 600;
      color: #555;
      padding: 8px 18px;
      transition: all 0.3s ease;
    }

    .shift-tabs .nav-link.active {
      background: linear-gradient(135deg, #2563eb, #1e40af);
      color: #fff;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    }

    /* ROLE TABS */
    .role-tabs {
      border-bottom: none;
    }

    .role-tabs .nav-link {
      border: none;
      border-radius: 10px;
      font-weight: 600;
      color: #6b7280;
      padding: 10px 20px;
      margin-right: 6px;
      background: #f9fafb;
      transition: all 0.25s ease;
    }

    .role-tabs .nav-link.active {
      color: #111827;
      background: #fff;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
      border-bottom: 3px solid #2563eb;
    }

    /* MOBILE FRIENDLY */
    @media (max-width: 576px) {

      .shift-tabs,
      .role-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
      }

      .nav-link {
        white-space: nowrap;
      }
    }