(self["webpackChunkapp"] = self["webpackChunkapp"] || []).push([["src_app_pages_home_home_module_ts"],{

/***/ 10935:
/*!***************************************************!*\
  !*** ./src/app/pages/home/home-routing.module.ts ***!
  \***************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   HomePageRoutingModule: () => (/* binding */ HomePageRoutingModule)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/core */ 37580);
/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/router */ 95072);
/* harmony import */ var _home_page__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./home.page */ 66393);




const routes = [{
  path: '',
  component: _home_page__WEBPACK_IMPORTED_MODULE_0__.HomePage
}];
let HomePageRoutingModule = class HomePageRoutingModule {};
HomePageRoutingModule = (0,tslib__WEBPACK_IMPORTED_MODULE_1__.__decorate)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.NgModule)({
  imports: [_angular_router__WEBPACK_IMPORTED_MODULE_3__.RouterModule.forChild(routes)],
  exports: [_angular_router__WEBPACK_IMPORTED_MODULE_3__.RouterModule]
})], HomePageRoutingModule);


/***/ }),

/***/ 96998:
/*!*******************************************!*\
  !*** ./src/app/pages/home/home.module.ts ***!
  \*******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   HomePageModule: () => (/* binding */ HomePageModule)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @angular/core */ 37580);
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @angular/common */ 60316);
/* harmony import */ var _ionic_angular__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @ionic/angular */ 21507);
/* harmony import */ var _angular_forms__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @angular/forms */ 34456);
/* harmony import */ var _home_page__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./home.page */ 66393);
/* harmony import */ var _home_routing_module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./home-routing.module */ 10935);
/* harmony import */ var src_app_components_shared_module__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! src/app/components/shared.module */ 47774);








let HomePageModule = class HomePageModule {};
HomePageModule = (0,tslib__WEBPACK_IMPORTED_MODULE_3__.__decorate)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_4__.NgModule)({
  imports: [_angular_common__WEBPACK_IMPORTED_MODULE_5__.CommonModule, _angular_forms__WEBPACK_IMPORTED_MODULE_6__.FormsModule, _angular_forms__WEBPACK_IMPORTED_MODULE_6__.ReactiveFormsModule, _ionic_angular__WEBPACK_IMPORTED_MODULE_7__.IonicModule, _home_routing_module__WEBPACK_IMPORTED_MODULE_1__.HomePageRoutingModule, src_app_components_shared_module__WEBPACK_IMPORTED_MODULE_2__.SharedModule],
  declarations: [_home_page__WEBPACK_IMPORTED_MODULE_0__.HomePage]
})], HomePageModule);


/***/ }),

/***/ 66393:
/*!*****************************************!*\
  !*** ./src/app/pages/home/home.page.ts ***!
  \*****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   HomePage: () => (/* binding */ HomePage)
/* harmony export */ });
/* harmony import */ var _workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js */ 89204);
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var _home_page_html_ngResource__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./home.page.html?ngResource */ 68395);
/* harmony import */ var _home_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./home.page.scss?ngResource */ 52743);
/* harmony import */ var _home_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_home_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var src_app_util_baseHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! src/app/util/baseHelper */ 76434);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @angular/core */ 37580);
/* harmony import */ var src_app_services_report_api_service__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! src/app/services/report_api.service */ 55763);
/* harmony import */ var _ionic_angular__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @ionic/angular */ 4059);
/* harmony import */ var src_app_services_connectivity_service__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! src/app/services/connectivity.service */ 65065);
/* harmony import */ var src_app_services_permission_service__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! src/app/services/permission.service */ 7773);
/* harmony import */ var _app_constants_icons_constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @app/constants/icons.constants */ 35997);

var _HomePage;



/* eslint-disable @typescript-eslint/member-ordering */





 // Import PermissionService

let HomePage = (_HomePage = class HomePage {
  get loading() {
    if (this.shouldShowStoreKeeperDashboard()) {
      return this.loadingStockReport;
    } else if (this.shouldShowSCManagerDashboard()) {
      return this.loadingSCDashboard;
    }
    return this.loadingDashboard;
  }
  ionViewDidEnter() {
    this.b.menuOpen();
  }
  constructor(b, reportApi, platform, connectivity, permissionService // Inject PermissionService
  ) {
    this.b = b;
    this.reportApi = reportApi;
    this.platform = platform;
    this.connectivity = connectivity;
    this.permissionService = permissionService;
    this.menuConfig = [];
    this.filteredMenuConfig = [];
    this.isOnline = true;
    // Store keeper data
    this.stockReportData = [];
    this.dateRangeType = 'today';
    this.loadingStockReport = false;
    // SC Manager data
    this.scStatistics = [];
    this.loadingSCDashboard = false;
    // Dashboard data (for all users except store keepers and SC managers)
    this.dashboardData = null;
    this.loadingDashboard = false;
    this.icons = _app_constants_icons_constants__WEBPACK_IMPORTED_MODULE_7__.ICONS;
    this.user = this.b.getCurrentUser();
    if (this.user && this.user.user) {
      this.menuConfig = this.b.getMenuConfig(this.user.user);
      this.filteredMenuConfig = [...this.menuConfig];
    } else {
      this.menuConfig = [];
      this.filteredMenuConfig = [];
    }
    // Set date range for all users
    this.setDateRange('today');
  }
  ngOnInit() {
    var _this = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      _this.load();
      if (_this.shouldShowStoreKeeperDashboard()) {
        yield _this.loadStorekeeperStockReport();
      } else if (_this.shouldShowSCManagerDashboard()) {
        yield _this.loadSCManagerDashboard();
      } else {
        yield _this.loadDashboard();
      }
      yield _this.setupNetworkListener();
    })();
  }
  load() {
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {})();
  } // Previous user comparison logic removed
  cancel() {}
  refreshData() {
    var _this2 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      yield _this2.loadDashboard();
    })();
  }
  handleRefresh(event) {
    var _this3 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      try {
        if (_this3.shouldShowStoreKeeperDashboard()) {
          yield _this3.loadStorekeeperStockReport();
        } else if (_this3.shouldShowSCManagerDashboard()) {
          yield _this3.loadSCManagerDashboard();
        } else {
          yield _this3.loadDashboard();
        }
      } catch (error) {} finally {
        event.target.complete();
      }
    })();
  }
  getCategoryRowClass(title) {
    return '';
  }
  setupNetworkListener() {
    var _this4 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      // Check if our target server is reachable
      _this4.isOnline = yield _this4.connectivity.checkServerConnectivity(false);
      // Initial menu update
      _this4.updateMenuBasedOnConnectivity();
      // Poll server connectivity periodically
      setInterval(/*#__PURE__*/(0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
        const previousStatus = _this4.isOnline;
        _this4.isOnline = yield _this4.connectivity.checkServerConnectivity(false);
        if (previousStatus !== _this4.isOnline) {
          _this4.updateMenuBasedOnConnectivity();
        }
      }), 30000); // Check every 30 seconds
    })();
  }
  updateMenuBasedOnConnectivity() {
    if (!this.menuConfig || this.menuConfig.length === 0) {
      this.filteredMenuConfig = [];
      return;
    }
    if (this.isOnline) {
      // Show all menu items when online
      this.filteredMenuConfig = [...this.menuConfig];
    } else {
      // Show only community assessments when offline
      this.filteredMenuConfig = this.menuConfig.filter(item => item.url === '/offline-survey-list');
    }
  }
  getTodayDateString() {
    return new Date().toISOString().split('T')[0];
  }
  setDateRange(type) {
    this.dateRangeType = type;
    const today = new Date();
    switch (type) {
      case 'today':
        this.reportStartDate = this.formatDate(today);
        this.reportEndDate = this.formatDate(today);
        break;
      case 'week':
        // Week runs from Sunday to today
        const currentDay = today.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
        const sunday = new Date(today);
        sunday.setDate(today.getDate() - currentDay); // Go back to Sunday of current week
        this.reportStartDate = this.formatDate(sunday);
        this.reportEndDate = this.formatDate(today);
        break;
      case 'month':
        // This month: from 1st day of current month to today
        const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
        this.reportStartDate = this.formatDate(firstDayOfMonth);
        this.reportEndDate = this.formatDate(today);
        break;
      case '6months':
        // Last 6 months including current month: from 1st day of the month 5 months ago to today
        const fiveMonthsAgo = new Date(today);
        fiveMonthsAgo.setMonth(today.getMonth() - 5);
        const firstDayOf5MonthsAgo = new Date(fiveMonthsAgo.getFullYear(), fiveMonthsAgo.getMonth(), 1);
        this.reportStartDate = this.formatDate(firstDayOf5MonthsAgo);
        this.reportEndDate = this.formatDate(today);
        break;
      case 'year':
        // Last 1 year: from 365 days ago to today
        const oneYearAgo = new Date(today);
        oneYearAgo.setDate(today.getDate() - 365);
        this.reportStartDate = this.formatDate(oneYearAgo);
        this.reportEndDate = this.formatDate(today);
        break;
      case 'custom':
        // Don't auto-set dates for custom, let user select
        if (!this.reportStartDate) {
          this.reportStartDate = this.formatDate(today);
        }
        if (!this.reportEndDate) {
          this.reportEndDate = this.formatDate(today);
        }
        break;
    }
    // Auto-load report for non-custom selections
    if (type !== 'custom') {
      if (this.shouldShowStoreKeeperDashboard()) {
        void this.loadStorekeeperStockReport();
      } else if (this.shouldShowSCManagerDashboard()) {
        void this.loadSCManagerDashboard();
      } else {
        void this.loadDashboard();
      }
    }
  }
  formatDate(date) {
    // Avoid timezone issues by formatting manually
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }
  loadStorekeeperStockReport() {
    var _this5 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      if (!_this5.reportStartDate || !_this5.reportEndDate) {
        return;
      }
      try {
        _this5.loadingStockReport = true;
        const response = yield _this5.reportApi.getStorekeeperDailyStock(_this5.reportStartDate, _this5.reportEndDate);
        if (response !== null && response !== void 0 && response.success) {
          var _response$data;
          _this5.stockReportData = ((_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.stock_report) || [];
        } else {
          _this5.stockReportData = [];
        }
      } catch (error) {
        _this5.stockReportData = [];
      } finally {
        _this5.loadingStockReport = false;
      }
    })();
  }
  onDateRangeChange() {
    // When user manually changes dates, switch to custom mode
    this.dateRangeType = 'custom';
  }
  loadDashboard() {
    var _this6 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      if (!_this6.reportStartDate || !_this6.reportEndDate) {
        return;
      }
      try {
        _this6.loadingDashboard = true;
        const response = yield _this6.reportApi.getDashboard(_this6.reportStartDate, _this6.reportEndDate);
        if (response !== null && response !== void 0 && response.success) {
          _this6.dashboardData = response.data;
        } else {
          _this6.dashboardData = null;
        }
      } catch (error) {
        _this6.dashboardData = null;
      } finally {
        _this6.loadingDashboard = false;
      }
    })();
  }
  /**
   * Check if the current user should see program summary
   * Only Facility Supervisor role can see this section
   */
  shouldShowProgramSummary() {
    return this.permissionService.hasPermission('app-home-program-summary-view');
  }
  /**
   * Get program percentages data
   */
  get programPercentages() {
    if (!this.dashboardData || !this.dashboardData.child_program_percentages) {
      return null;
    }
    return this.dashboardData;
  }
  /**
   * Get child program data as array for display
   */
  get childProgramData() {
    if (!this.programPercentages || !this.programPercentages.child_program_percentages) {
      return [];
    }
    const data = this.programPercentages.child_program_percentages;
    const programs = [];
    if (data.otp) {
      programs.push({
        program: 'OTP',
        inCare: data.otp.in_care || 0,
        percentage: data.otp.percentage || 0,
        colorClass: 'program-danger'
      });
    }
    if (data.tsfp) {
      programs.push({
        program: 'TSFP',
        inCare: data.tsfp.in_care || 0,
        percentage: data.tsfp.percentage || 0,
        colorClass: 'program-warning'
      });
    }
    if (data.bsfp) {
      programs.push({
        program: 'BSFP',
        inCare: data.bsfp.in_care || 0,
        percentage: data.bsfp.percentage || 0,
        colorClass: 'program-success'
      });
    }
    return programs;
  }
  /**
   * Get child program total
   */
  get childProgramTotal() {
    if (!this.programPercentages || !this.programPercentages.child_program_percentages) {
      return 0;
    }
    return this.programPercentages.child_program_percentages.total || 0;
  }
  /**
   * Get PBW program data as array for display (using PBW instead of PLW in frontend)
   */
  get pbwProgramData() {
    if (!this.programPercentages || !this.programPercentages.plw_program_percentages) {
      return [];
    }
    const data = this.programPercentages.plw_program_percentages;
    const programs = [];
    if (data.bsfp_plw) {
      programs.push({
        program: 'BSFP',
        inCare: data.bsfp_plw.in_care || 0,
        percentage: data.bsfp_plw.percentage || 0,
        colorClass: 'program-success'
      });
    }
    if (data.tsfp_plw) {
      programs.push({
        program: 'TSFP',
        inCare: data.tsfp_plw.in_care || 0,
        percentage: data.tsfp_plw.percentage || 0,
        colorClass: 'program-warning'
      });
    }
    return programs;
  }
  /**
   * Get PBW program total
   */
  get pbwProgramTotal() {
    if (!this.programPercentages || !this.programPercentages.plw_program_percentages) {
      return 0;
    }
    return this.programPercentages.plw_program_percentages.total || 0;
  }
  /**
   * Check if program summary has data
   */
  hasProgramSummaryData() {
    return this.childProgramData.length > 0 || this.pbwProgramData.length > 0;
  }
  /**
   * Check if the current user should see measurement information
   * Only Measurer and Facility Supervisor roles can see this section
   */
  shouldShowMeasurementInfo() {
    return this.permissionService.hasPermission('app-home-measurement-info-view');
  }
  /**
   * Get measurement count by title from the measurement array
   */
  getMeasurementCount(title) {
    if (!this.dashboardData || !this.dashboardData.measurement || !Array.isArray(this.dashboardData.measurement)) {
      return 0;
    }
    const measurement = this.dashboardData.measurement.find(item => item.title === title);
    return measurement ? measurement.count : 0;
  }
  get measurementSummary() {
    return [{
      title: 'Total Measurement',
      key: 'Total Measurement',
      colorClass: 'measurement-total',
      icon: 'stats-chart-outline'
    }, {
      title: 'Boy',
      key: 'Boy',
      colorClass: 'measurement-boy',
      icon: 'male-outline'
    }, {
      title: 'Girl',
      key: 'Girl',
      colorClass: 'measurement-girl',
      icon: 'female-outline'
    }, {
      title: 'SAM Identified',
      key: 'SAM Identified',
      colorClass: 'measurement-sam',
      icon: 'flame-outline'
    }, {
      title: 'MAM Identified',
      key: 'MAM Identified',
      colorClass: 'measurement-mam',
      icon: 'medkit-outline'
    }, {
      title: 'Normal Case',
      key: 'Normal Case',
      colorClass: 'measurement-normal',
      icon: 'happy-outline'
    }, {
      title: 'Wasting (WFH < -2SD)',
      key: 'Wasting (WFH < -2SD)',
      colorClass: 'measurement-wasting',
      icon: 'fitness-outline'
    }, {
      title: 'Stunting (HAZ < -2SD)',
      key: 'Stunting (HAZ < -2SD)',
      colorClass: 'measurement-stunting',
      icon: 'accessibility-outline'
    }, {
      title: 'Underweight (WAZ < -2SD)',
      key: 'Underweight (WAZ < -2SD)',
      colorClass: 'measurement-underweight',
      icon: 'scale-outline'
    }];
  }
  /**
   * Check if the current user should see PBW measurement information
   * Only PBW - Point and Facility Supervisor roles can see this section
   */
  shouldShowPbwMeasurementInfo() {
    return this.permissionService.hasPermission('app-home-pbw-measurement-info-view');
  }
  /**
   * Get PBW measurement count by title from the pbw_measurement array
   */
  getPbwMeasurementCount(title) {
    if (!this.dashboardData || !this.dashboardData.pbw_measurement || !Array.isArray(this.dashboardData.pbw_measurement)) {
      return 0;
    }
    const measurement = this.dashboardData.pbw_measurement.find(item => item.title === title);
    return measurement ? measurement.count : 0;
  }
  get pbwMeasurementSummary() {
    return [{
      title: 'Total Measurement',
      key: 'Total PBW Measurement',
      colorClass: 'measurement-total',
      icon: 'stats-chart-outline'
    }, {
      title: 'MAM Identified',
      key: 'MAM Identified',
      colorClass: 'measurement-mam',
      icon: 'medkit-outline'
    }
    // { title: 'MUAC < 21 cm', key: 'MUAC < 21 cm', colorClass: 'measurement-mam', icon: 'warning-outline' },
    ];
  }
  get pbwNormalCaseParent() {
    return {
      title: 'Normal Case',
      key: 'Normal Case',
      colorClass: 'measurement-normal',
      icon: 'happy-outline'
    };
  }
  get pbwNormalCaseChildren() {
    return [{
      title: 'MUAC 21 - 22.9 cm',
      key: 'MUAC 21 - 22.9 cm',
      colorClass: 'measurement-normal',
      icon: 'alert-circle-outline'
    }, {
      title: 'MUAC ≥ 23 cm',
      key: 'MUAC ≥ 23 cm',
      colorClass: 'measurement-normal',
      icon: 'checkmark-circle-outline'
    }];
  }
  get gmpTargets() {
    if (!this.dashboardData || !Array.isArray(this.dashboardData.gmp)) {
      return [];
    }
    return this.dashboardData.gmp;
  }
  getGmpAchievementPercent(row) {
    if (!row || !row.target) {
      return row !== null && row !== void 0 && row.achievement ? 100 : 0;
    }
    const percent = row.achievement / row.target * 100;
    return Math.max(0, Math.min(100, percent));
  }
  /**
   * Determine if user has access to the nurse dashboard card
   */
  canAccessNurseDashboard() {
    return this.permissionService.hasPermission('app-home-nurse-dashboard-view');
  }
  /**
   * Nurse dashboard is only visible online for nurses and facility supervisors
   */
  shouldShowNurseDashboard() {
    return this.canAccessNurseDashboard() && this.isOnline;
  }
  /**
   * Nurse metrics that are simple counters (no breakdown)
   */
  get nurseSummaryMetrics() {
    if (!this.dashboardData || !Array.isArray(this.dashboardData.nurse)) {
      return [];
    }
    return this.dashboardData.nurse.filter(item => typeof (item === null || item === void 0 ? void 0 : item.count) === 'number' && (!item.breakdown || item.breakdown.length === 0));
  }
  filterNurseSummaryByKeyword(keyword) {
    if (!keyword) {
      return [];
    }
    const lowerKeyword = keyword.toLowerCase();
    return this.nurseSummaryMetrics.filter(item => ((item === null || item === void 0 ? void 0 : item.title) || '').toLowerCase().includes(lowerKeyword));
  }
  get nurseOtpSummaryMetrics() {
    return this.filterNurseSummaryByKeyword('otp');
  }
  get nurseTsfpSummaryMetrics() {
    return this.filterNurseSummaryByKeyword('tsfp');
  }
  get nurseOtherSummaryMetrics() {
    return this.nurseSummaryMetrics.filter(item => {
      const title = ((item === null || item === void 0 ? void 0 : item.title) || '').toLowerCase();
      return !title.includes('otp') && !title.includes('tsfp');
    });
  }
  /**
   * Nurse metrics with detailed breakdown arrays
   */
  get nurseBreakdownGroups() {
    if (!this.dashboardData || !Array.isArray(this.dashboardData.nurse)) {
      return [];
    }
    return this.dashboardData.nurse.filter(item => Array.isArray(item === null || item === void 0 ? void 0 : item.breakdown) && item.breakdown.length > 0);
  }
  filterBreakdownGroupsByKeyword(keyword) {
    if (!keyword) {
      return [];
    }
    const normalized = keyword.toLowerCase();
    return this.nurseBreakdownGroups.filter(group => ((group === null || group === void 0 ? void 0 : group.title) || '').toLowerCase().includes(normalized));
  }
  get nurseOtpBreakdownGroups() {
    return this.filterBreakdownGroupsByKeyword('otp');
  }
  get nurseTsfpBreakdownGroups() {
    return this.filterBreakdownGroupsByKeyword('tsfp');
  }
  get nurseOtherBreakdownGroups() {
    const normalizedGroups = this.nurseBreakdownGroups;
    return normalizedGroups.filter(group => {
      const title = ((group === null || group === void 0 ? void 0 : group.title) || '').toLowerCase();
      return !title.includes('otp') && !title.includes('tsfp');
    });
  }
  /**
   * Sum the counts for a breakdown list
   */
  getNurseBreakdownTotal(breakdown) {
    if (!Array.isArray(breakdown)) {
      return 0;
    }
    return breakdown.reduce((total, current) => total + ((current === null || current === void 0 ? void 0 : current.count) || 0), 0);
  }
  /**
   * Provide contextual icons for nurse metrics
   */
  getNurseMetricIcon(title) {
    if (!title) {
      return 'medkit-outline';
    }
    const normalized = title.toLowerCase();
    if (normalized.includes('admission')) {
      return 'log-in-outline';
    }
    if (normalized.includes('discharge')) {
      return 'exit-outline';
    }
    if (normalized.includes('follow')) {
      return 'repeat-outline';
    }
    if (normalized.includes('in care')) {
      return 'people-outline';
    }
    if (normalized.includes('criteria')) {
      return 'list-circle-outline';
    }
    return 'medical-outline';
  }
  getNurseProgramClass(title) {
    if (!title) {
      return 'nurse-card-general';
    }
    const normalized = title.toLowerCase();
    if (normalized.includes('otp')) {
      return 'otp-card';
    }
    if (normalized.includes('tsfp')) {
      return 'tsfp-card';
    }
    return 'nurse-card-general';
  }
  trackByTitle(index, item) {
    return (item === null || item === void 0 ? void 0 : item.title) || index;
  }
  trackByKey(index, item) {
    return (item === null || item === void 0 ? void 0 : item.key) || index;
  }
  /**
   * IYCF Counselor visibility helpers
   */
  canAccessMiycnDashboard() {
    return this.permissionService.hasPermission('app-home-miycn-dashboard-view');
  }
  shouldShowMiycnDashboard() {
    return this.canAccessMiycnDashboard() && this.isOnline;
  }
  get miycnMetrics() {
    if (!this.dashboardData || !Array.isArray(this.dashboardData.miycn)) {
      return [];
    }
    return this.dashboardData.miycn;
  }
  hasMiycnMetrics() {
    return this.miycnMetrics.length > 0;
  }
  /**
   * PBW visibility helpers
   */
  canAccessPbwDashboard() {
    return this.permissionService.hasPermission('app-home-pbw-dashboard-view');
  }
  shouldShowPbwDashboard() {
    return this.canAccessPbwDashboard() && this.isOnline;
  }
  get pbwMetrics() {
    if (!this.dashboardData || !Array.isArray(this.dashboardData.pbw)) {
      return [];
    }
    return this.dashboardData.pbw;
  }
  hasPbwMetrics() {
    return this.pbwMetrics.length > 0;
  }
  /**
   * PBW metrics that are simple counters (no breakdown)
   */
  get pbwSummaryMetrics() {
    return this.pbwMetrics.filter(item => typeof (item === null || item === void 0 ? void 0 : item.count) === 'number' && (!item.breakdown || item.breakdown.length === 0));
  }
  filterPbwSummaryByKeyword(keyword) {
    if (!keyword) {
      return [];
    }
    const lowerKeyword = keyword.toLowerCase();
    return this.pbwSummaryMetrics.filter(item => ((item === null || item === void 0 ? void 0 : item.title) || '').toLowerCase().includes(lowerKeyword));
  }
  get pbwBsfpSummaryMetrics() {
    return this.filterPbwSummaryByKeyword('bsfp');
  }
  get pbwTsfpSummaryMetrics() {
    return this.filterPbwSummaryByKeyword('tsfp');
  }
  get pbwOtherSummaryMetrics() {
    return this.pbwSummaryMetrics.filter(item => {
      const title = ((item === null || item === void 0 ? void 0 : item.title) || '').toLowerCase();
      return !title.includes('bsfp') && !title.includes('tsfp');
    });
  }
  /**
   * PBW metrics with detailed breakdown arrays
   */
  get pbwBreakdownGroups() {
    return this.pbwMetrics.filter(item => Array.isArray(item === null || item === void 0 ? void 0 : item.breakdown) && item.breakdown.length > 0);
  }
  filterPbwBreakdownGroupsByKeyword(keyword) {
    if (!keyword) {
      return [];
    }
    const normalized = keyword.toLowerCase();
    return this.pbwBreakdownGroups.filter(group => ((group === null || group === void 0 ? void 0 : group.title) || '').toLowerCase().includes(normalized));
  }
  get pbwBsfpBreakdownGroups() {
    return this.filterPbwBreakdownGroupsByKeyword('bsfp');
  }
  get pbwTsfpBreakdownGroups() {
    return this.filterPbwBreakdownGroupsByKeyword('tsfp');
  }
  get pbwOtherBreakdownGroups() {
    const normalizedGroups = this.pbwBreakdownGroups;
    return normalizedGroups.filter(group => {
      const title = ((group === null || group === void 0 ? void 0 : group.title) || '').toLowerCase();
      return !title.includes('bsfp') && !title.includes('tsfp');
    });
  }
  /**
   * Sum the counts for a PBW breakdown list
   */
  getPbwBreakdownTotal(breakdown) {
    if (!Array.isArray(breakdown)) {
      return 0;
    }
    return breakdown.reduce((total, current) => total + ((current === null || current === void 0 ? void 0 : current.count) || 0), 0);
  }
  /**
   * Provide contextual icons for PBW metrics
   */
  getPbwMetricIcon(title) {
    if (!title) {
      return 'woman-outline';
    }
    const normalized = title.toLowerCase();
    if (normalized.includes('admission')) {
      return 'log-in-outline';
    }
    if (normalized.includes('discharge')) {
      return 'exit-outline';
    }
    if (normalized.includes('follow')) {
      return 'repeat-outline';
    }
    if (normalized.includes('in care')) {
      return 'people-outline';
    }
    if (normalized.includes('criteria')) {
      return 'list-circle-outline';
    }
    return 'heart-outline';
  }
  getPbwProgramClass(title) {
    if (!title) {
      return 'pbw-card-general';
    }
    const normalized = title.toLowerCase();
    if (normalized.includes('bsfp')) {
      return 'bsfp-card';
    }
    if (normalized.includes('tsfp')) {
      return 'tsfp-card';
    }
    return 'pbw-card-general';
  }
  /**
   * Check if the current user should see disability information
   * Only Facility Supervisor role can see this section
   */
  shouldShowDisabilityInfo() {
    return this.permissionService.hasPermission('app-home-disability-info-view');
  }
  /**
   * Get disability information metrics
   */
  get disabilityMetrics() {
    if (!this.dashboardData || !this.dashboardData.disability) {
      return [];
    }
    return [{
      title: 'Child with Disability',
      count: this.dashboardData.disability.child || 0,
      icon: 'people-outline',
      colorClass: 'disability-child'
    }, {
      title: 'PLW with Disability',
      count: this.dashboardData.disability.plw || 0,
      icon: 'woman-outline',
      colorClass: 'disability-plw'
    }];
  }
  hasDisabilityData() {
    return this.disabilityMetrics.length > 0 && this.disabilityMetrics.some(metric => metric.count > 0);
  }
  /**
   * Check if the current user should see beneficiary verified information
   */
  shouldShowBeneficiaryVerifiedInfo() {
    return this.permissionService.hasPermission('app-home-beneficiary-verified-info-view');
  }
  /**
   * Get beneficiary verified information metrics
   */
  get beneficiaryVerifiedMetrics() {
    if (!this.dashboardData) {
      return [];
    }
    return [{
      title: 'Verified Children',
      count: this.dashboardData.verified_children || 0,
      icon: 'checkmark-done-outline',
      colorClass: 'verified-child'
    }, {
      title: 'Verified PLW',
      count: this.dashboardData.verified_plw || 0,
      icon: 'checkmark-done-circle-outline',
      colorClass: 'verified-plw'
    }];
  }
  hasBeneficiaryVerifiedData() {
    return this.beneficiaryVerifiedMetrics.length > 0 && this.beneficiaryVerifiedMetrics.some(metric => metric.count > 0);
  }
  /**
   * Get home visit and exit interview metrics
   */
  get homeVisitMetrics() {
    if (!this.dashboardData) {
      return [];
    }
    return [{
      title: 'Home Visit for Child',
      count: this.dashboardData.home_visit_child_count || 0,
      icon: 'home-outline',
      colorClass: 'home-visit'
    }, {
      title: 'Home Visit for PLW',
      count: this.dashboardData.home_visit_plw_count || 0,
      icon: 'home-outline',
      colorClass: 'home-visit'
    }, {
      title: 'Exit Interview',
      count: this.dashboardData.exit_interview_count || 0,
      icon: 'exit-outline',
      colorClass: 'exit-interview'
    }];
  }
  hasHomeVisitData() {
    return this.homeVisitMetrics.length > 0 && this.homeVisitMetrics.some(metric => metric.count > 0);
  }
  shouldShowHomeVisitInfo() {
    return this.permissionService.hasPermission('app-home-home-visit-info-view');
  }
  /**
   * Check if the current user should see general information
   * Only Facility Supervisor role can see this section
   */
  shouldShowGeneralInfo() {
    return this.permissionService.hasPermission('app-home-general-info-view');
  }
  /**
   * Check if the current user should see distribution summary
   * Only Distributor role can see this section
   */
  shouldShowDistribution() {
    return this.permissionService.hasPermission('app-home-distribution-view');
  }
  loadSCManagerDashboard() {
    var _this7 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      if (!_this7.reportStartDate || !_this7.reportEndDate) {
        return;
      }
      try {
        _this7.loadingSCDashboard = true;
        const response = yield _this7.reportApi.getSCManagerDashboard(_this7.reportStartDate, _this7.reportEndDate);
        if (response !== null && response !== void 0 && response.success) {
          var _response$data2;
          _this7.scStatistics = ((_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.statistics) || [];
        } else {
          _this7.scStatistics = [];
        }
      } catch (error) {
        _this7.scStatistics = [];
      } finally {
        _this7.loadingSCDashboard = false;
      }
    })();
  }
  /**
   * Check if the current user should see Store Keeper dashboard
   */
  shouldShowStoreKeeperDashboard() {
    return this.permissionService.hasPermission('app-home-store-keeper-dashboard-view');
  }
  /**
   * Check if the current user should see SC Manager dashboard
   */
  shouldShowSCManagerDashboard() {
    return this.permissionService.hasPermission('app-home-sc-manager-dashboard-view');
  }
}, _HomePage.ctorParameters = () => [{
  type: src_app_util_baseHelper__WEBPACK_IMPORTED_MODULE_3__.BaseHelper
}, {
  type: src_app_services_report_api_service__WEBPACK_IMPORTED_MODULE_4__.ReportAPIService
}, {
  type: _ionic_angular__WEBPACK_IMPORTED_MODULE_8__.Platform
}, {
  type: src_app_services_connectivity_service__WEBPACK_IMPORTED_MODULE_5__.ConnectivityService
}, {
  type: src_app_services_permission_service__WEBPACK_IMPORTED_MODULE_6__.PermissionService
}], _HomePage);
HomePage = (0,tslib__WEBPACK_IMPORTED_MODULE_9__.__decorate)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_10__.Component)({
  selector: 'app-home',
  template: _home_page_html_ngResource__WEBPACK_IMPORTED_MODULE_1__,
  styles: [(_home_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2___default())]
})], HomePage);


/***/ }),

/***/ 55763:
/*!************************************************!*\
  !*** ./src/app/services/report_api.service.ts ***!
  \************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   ReportAPIService: () => (/* binding */ ReportAPIService)
/* harmony export */ });
/* harmony import */ var _workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js */ 89204);
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @angular/core */ 37580);
/* harmony import */ var _api_base_service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./api_base.service */ 70014);
/* harmony import */ var src_environments_environment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! src/environments/environment */ 45312);
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rxjs/operators */ 70271);
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! rxjs/operators */ 61318);


/* eslint-disable @typescript-eslint/naming-convention */




let ReportAPIService = class ReportAPIService extends _api_base_service__WEBPACK_IMPORTED_MODULE_1__.APIBaseService {
  constructor() {
    super(...arguments);
    this.namespace = 'report';
  }
  getDashboard(startDate, endDate) {
    var _this = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      let url = `${src_environments_environment__WEBPACK_IMPORTED_MODULE_2__.domain}/${_this.namespace}/dashboard`;
      if (startDate && endDate) {
        url += `?start_date=${startDate}&end_date=${endDate}`;
      } else if (startDate) {
        // If only start date provided, use it for both
        url += `?start_date=${startDate}&end_date=${startDate}`;
      }
      const options = _this.getHeader();
      return _this.http.get(url, options).pipe((0,rxjs_operators__WEBPACK_IMPORTED_MODULE_3__.map)(results => results), (0,rxjs_operators__WEBPACK_IMPORTED_MODULE_4__.catchError)(error => _this.errorHandle(error))).toPromise();
    })();
  }
  getStorekeeperDailyStock(startDate, endDate) {
    var _this2 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      let url = `${src_environments_environment__WEBPACK_IMPORTED_MODULE_2__.domain}/${_this2.namespace}/storekeeper-daily-stock`;
      if (startDate && endDate) {
        url += `?start_date=${startDate}&end_date=${endDate}`;
      } else if (startDate) {
        // If only start date provided, use it for both
        url += `?start_date=${startDate}&end_date=${startDate}`;
      }
      const options = _this2.getHeader();
      return _this2.http.get(url, options).pipe((0,rxjs_operators__WEBPACK_IMPORTED_MODULE_3__.map)(results => results), (0,rxjs_operators__WEBPACK_IMPORTED_MODULE_4__.catchError)(error => _this2.errorHandle(error))).toPromise();
    })();
  }
  getSCManagerDashboard(startDate, endDate) {
    var _this3 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      let url = `${src_environments_environment__WEBPACK_IMPORTED_MODULE_2__.domain}/${_this3.namespace}/sc-manager-dashboard`;
      if (startDate && endDate) {
        url += `?start_date=${startDate}&end_date=${endDate}`;
      } else if (startDate) {
        // If only start date provided, use it for both
        url += `?start_date=${startDate}&end_date=${startDate}`;
      }
      const options = _this3.getHeader();
      return _this3.http.get(url, options).pipe((0,rxjs_operators__WEBPACK_IMPORTED_MODULE_3__.map)(results => results), (0,rxjs_operators__WEBPACK_IMPORTED_MODULE_4__.catchError)(error => _this3.errorHandle(error))).toPromise();
    })();
  }
};
ReportAPIService = (0,tslib__WEBPACK_IMPORTED_MODULE_5__.__decorate)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_6__.Injectable)({
  providedIn: 'root'
})], ReportAPIService);


/***/ }),

/***/ 52743:
/*!******************************************************!*\
  !*** ./src/app/pages/home/home.page.scss?ngResource ***!
  \******************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

// Imports
var ___CSS_LOADER_API_SOURCEMAP_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/sourceMaps.js */ 53142);
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ 35950);
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, `:host {
  --ion-color-light: #f8f9fa;
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #eb5daa;
  --ion-color-tertiary: #7854e4;
  --ion-color-success: #39c0b0;
  --ion-color-warning: #ffce00;
  --ion-color-danger: #f04141;
  --ion-color-dark: #222428;
  --ion-color-purple: #a32e80;
  --card-border-radius: 16px;
  --card-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

ion-header ion-toolbar {
  --background: #ffffff;
  --border-width: 0;
}

ion-title {
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 18px;
}

.profile-container {
  margin-top: 16px;
}

.profile-card {
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-box-shadow);
  overflow: hidden;
}

.profile-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
}

.profile-info {
  flex: 1;
}

.username {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}

.user-type {
  color: var(--ion-color-medium);
  margin: 0 0 8px;
  font-size: 14px;
}

.user-title {
  font-size: 16px;
  margin: 0 0 8px;
  font-weight: 600;
}

.profile-avatar {
  width: 70px;
  height: 95px;
  --border-radius: 15px;
  background: var(--ion-color-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 12px;
  color: var(--ion-color-dark);
  opacity: 1 !important;
}

.stat-card {
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-box-shadow);
  margin: 0px 4px;
  height: 100%;
  min-height: 80px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 5px;
  height: 100%;
}

.stat-icon {
  font-size: 36px;
  margin-right: 16px;
  color: rgba(255, 255, 255, 0.9);
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: white;
  line-height: 1;
}

.stat-label {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  font-weight: 500;
}

.menu-card {
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-box-shadow);
  margin: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.menu-card:active {
  transform: scale(0.97);
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 0px;
  text-align: center;
  height: 100%;
}

.menu-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(var(--ion-color-primary-rgb), 0.1);
  margin-bottom: 12px;
}

.menu-icon-container ion-icon {
  font-size: 26px;
}

.menu-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

/* Responsive Design */
@media (max-width: 576px) {
  .stat-card {
    margin: 4px 2px;
    min-height: 100px;
  }
  .stat-content {
    padding: 0px;
    flex-direction: column;
    text-align: center;
  }
  .stat-number {
    font-size: 22px;
  }
  .stat-label {
    font-size: 11px;
    line-height: 1.2;
  }
  .stat-icon {
    font-size: 24px;
    margin-right: 0;
    margin-bottom: 6px;
    min-width: auto;
  }
  .menu-icon-container {
    width: 48px;
    height: 48px;
  }
  .menu-icon-container ion-icon {
    font-size: 22px;
  }
}
/* Nurse Dashboard Styles */
.nurse-dashboard-card {
  margin-top: 1.5rem;
}

.nurse-online-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}
.nurse-online-indicator ion-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-transform: uppercase;
}
.nurse-online-indicator span {
  color: var(--ion-color-medium);
  font-size: 0.85rem;
}

.nurse-summary-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nurse-summary-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nurse-program-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ion-color-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nurse-program-label ion-icon {
  font-size: 1.2rem;
}
.nurse-program-label.otp-label {
  color: var(--ion-color-danger);
}
.nurse-program-label.tsfp-label {
  color: var(--ion-color-warning);
}
.nurse-program-label.bsfp-label {
  color: var(--ion-color-success);
}

.nurse-breakdown-wrapper {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nurse-breakdown-category {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.breakdown-group-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ion-color-dark);
}
.breakdown-group-label ion-icon {
  font-size: 1.2rem;
}
.breakdown-group-label.otp-label {
  color: var(--ion-color-danger);
}
.breakdown-group-label.tsfp-label {
  color: var(--ion-color-warning);
}
.breakdown-group-label.bsfp-label {
  color: var(--ion-color-success);
}

.nurse-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.nurse-summary-card {
  border-radius: 16px;
  padding: 16px;
  background: white;
  border: 1px solid rgba(var(--ion-color-primary-rgb), 0.15);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nurse-summary-card.otp-card {
  background: linear-gradient(135deg, rgba(240, 65, 65, 0.15), rgba(232, 88, 88, 0.35));
  border-color: rgba(var(--ion-color-danger-rgb), 0.4);
}
.nurse-summary-card.otp-card .summary-card-header ion-icon,
.nurse-summary-card.otp-card .summary-card-value {
  color: var(--ion-color-danger);
}
.nurse-summary-card.tsfp-card {
  background: linear-gradient(135deg, rgba(255, 206, 0, 0.2), rgba(255, 184, 0, 0.35));
  border-color: rgba(var(--ion-color-warning-rgb), 0.45);
}
.nurse-summary-card.tsfp-card .summary-card-header ion-icon,
.nurse-summary-card.tsfp-card .summary-card-value {
  color: var(--ion-color-warning);
}
.nurse-summary-card.bsfp-card {
  background: linear-gradient(135deg, rgba(57, 192, 176, 0.15), rgba(57, 192, 176, 0.3));
  border-color: rgba(var(--ion-color-success-rgb), 0.4);
}
.nurse-summary-card.bsfp-card .summary-card-header ion-icon,
.nurse-summary-card.bsfp-card .summary-card-value {
  color: var(--ion-color-success);
}
.nurse-summary-card.nurse-card-general, .nurse-summary-card.pbw-card-general {
  background: linear-gradient(135deg, rgba(120, 84, 228, 0.08), rgba(120, 84, 228, 0.2));
  border-color: rgba(var(--ion-color-tertiary-rgb), 0.4);
}
.nurse-summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.summary-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ion-color-dark);
}
.summary-card-header ion-icon {
  font-size: 22px;
  color: var(--ion-color-primary);
}

.summary-card-title {
  font-size: 0.95rem;
}

.summary-card-value {
  margin-top: 12px;
  font-size: 2rem;
  font-weight: 700;
  color: var(--ion-color-dark);
}

.nurse-breakdown-section {
  margin-top: 1.5rem;
}

.breakdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.breakdown-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--ion-color-dark);
}
.breakdown-title ion-icon {
  font-size: 1.3rem;
}

.nurse-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.nurse-breakdown-card {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 12px 14px;
  background: rgba(var(--ion-color-primary-rgb), 0.02);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.breakdown-label {
  font-size: 0.85rem;
  color: var(--ion-color-medium);
}

.breakdown-count {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ion-color-primary);
}

.nurse-offline-card {
  margin-top: 1rem;
}
.nurse-offline-card .offline-notice {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nurse-offline-card .offline-notice ion-icon {
  font-size: 2.5rem;
}
.nurse-offline-card .offline-notice h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  color: var(--ion-color-dark);
}
.nurse-offline-card .offline-notice p {
  margin: 0;
  color: var(--ion-color-medium);
  font-size: 0.85rem;
}

@media (max-width: 992px) {
  .nurse-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px) {
  .nurse-summary-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .summary-card-value {
    font-size: 1.5rem;
  }
  .nurse-breakdown-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}
.miycn-dashboard-card {
  margin-top: 1.5rem;
}

.miycn-online-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}
.miycn-online-indicator ion-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-transform: uppercase;
}
.miycn-online-indicator span {
  color: var(--ion-color-medium);
  font-size: 0.85rem;
}

.miycn-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.miycn-summary-card {
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(var(--ion-color-tertiary-rgb), 0.1), rgba(var(--ion-color-tertiary-rgb), 0.2));
  border: 1px solid rgba(var(--ion-color-tertiary-rgb), 0.4);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.miycn-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ion-color-dark);
}

.miycn-card-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ion-color-tertiary);
}

.counselor-offline-card, .pbw-offline-card {
  margin-top: 1rem;
}
.counselor-offline-card .offline-notice, .pbw-offline-card .offline-notice {
  display: flex;
  align-items: center;
  gap: 12px;
}
.counselor-offline-card .offline-notice ion-icon, .pbw-offline-card .offline-notice ion-icon {
  font-size: 2.5rem;
}
.counselor-offline-card .offline-notice h3, .pbw-offline-card .offline-notice h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  color: var(--ion-color-dark);
}
.counselor-offline-card .offline-notice p, .pbw-offline-card .offline-notice p {
  margin: 0;
  color: var(--ion-color-medium);
  font-size: 0.85rem;
}

.pbw-dashboard-card {
  margin-top: 1.5rem;
}

@media (max-width: 576px) {
  .miycn-summary-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .miycn-card-value {
    font-size: 1.6rem;
  }
}
/* For very small screens (< 400px) */
@media (max-width: 400px) {
  .stat-content {
    padding: 8px;
  }
  .stat-number {
    font-size: 20px;
  }
  .stat-label {
    font-size: 10px;
  }
  .stat-icon {
    font-size: 20px;
    margin-bottom: 4px;
  }
}
@media (max-width: 768px) {
  .stat-card {
    margin: 0px 2px;
  }
}
/* Better color contrast for warning cards */
.stat-card[color=warning] .stat-number,
.stat-card[color=warning] .stat-label,
.stat-card[color=warning] .stat-icon {
  color: #333 !important;
}

/* Improved hover effects for different card colors */
.stat-card[color=primary]:hover {
  box-shadow: 0 8px 24px rgba(56, 128, 255, 0.3);
}

.stat-card[color=secondary]:hover {
  box-shadow: 0 8px 24px rgba(235, 93, 170, 0.3);
}

.stat-card[color=tertiary]:hover {
  box-shadow: 0 8px 24px rgba(120, 84, 228, 0.3);
}

.stat-card[color=success]:hover {
  box-shadow: 0 8px 24px rgba(57, 192, 176, 0.3);
}

.stat-card[color=warning]:hover {
  box-shadow: 0 8px 24px rgba(255, 206, 0, 0.3);
}

.stat-card[color=danger]:hover {
  box-shadow: 0 8px 24px rgba(240, 65, 65, 0.3);
}

.stat-card[color=purple]:hover {
  box-shadow: 0 8px 24px rgba(163, 46, 128, 0.3);
}

/* Filters Card Styles */
.filters-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.filters-card ion-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
}
.filters-card ion-card-subtitle {
  margin-top: 0.5rem;
  color: var(--ion-color-medium);
  font-size: 0.9rem;
}

.form-item {
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.form-item ion-label {
  font-weight: 500;
  color: var(--ion-color-dark);
}
.form-item ion-icon[slot=start] {
  margin-inline-end: 12px;
}
.form-item ion-select,
.form-item ion-input {
  width: 100%;
}

.refresh-button {
  height: 44px;
  font-weight: 600;
  --border-radius: 8px;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 8px;
}

.quick-select-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.quick-select-buttons ion-button {
  height: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  --border-radius: 8px;
  --border-width: 2px;
  transition: all 0.2s ease;
}
.quick-select-buttons ion-button[color=primary] {
  --background: var(--ion-color-primary);
  --color: white;
  --border-color: var(--ion-color-primary);
}
.quick-select-buttons ion-button[color=medium] {
  --background: transparent;
  --color: var(--ion-color-medium);
  --border-color: rgba(0, 0, 0, 0.12);
}
.quick-select-buttons ion-button ion-icon {
  font-size: 18px;
}

/* Responsive Grid for Quick Select Buttons on Large Screens */
@media (min-width: 992px) {
  .quick-select-buttons {
    grid-template-columns: repeat(6, 1fr);
  }
}
/* Date Range Display Above Table */
.date-range-display {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.date-range-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(var(--ion-color-primary-rgb), 0.08), rgba(var(--ion-color-primary-rgb), 0.04));
  border: 2px solid rgba(var(--ion-color-primary-rgb), 0.2);
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.date-range-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  border-color: rgba(var(--ion-color-primary-rgb), 0.35);
}
.date-range-badge ion-icon {
  font-size: 24px;
  color: var(--ion-color-primary);
  flex-shrink: 0;
}
.date-range-badge .date-range-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ion-color-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.date-range-badge .date-range-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ion-color-dark);
  white-space: nowrap;
}
.date-range-badge .items-count-badge {
  font-size: 0.9rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
}

/* Stats Container Spacing */
.stats-container {
  margin-top: 16px;
}

/* Dashboard Table Styles */
.dashboard-table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--ion-color-light);
  margin-top: 1rem;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.dashboard-table th {
  background-color: var(--ion-color-light);
  color: var(--ion-color-primary);
  font-weight: 600;
  padding: 12px 16px;
  text-align: center;
  border-bottom: 2px solid var(--ion-color-medium);
  font-size: 0.85rem;
  white-space: nowrap;
}
.dashboard-table th:first-child {
  text-align: left;
  width: 75%;
}
.dashboard-table th:nth-child(2) {
  text-align: center;
  width: 25%;
}
.dashboard-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ion-color-light);
  font-size: 0.85rem;
  text-align: center;
  vertical-align: middle;
}
.dashboard-table td.serial-number {
  font-weight: 600;
  color: var(--ion-color-primary);
}
.dashboard-table td.category-title {
  font-weight: 500;
  color: var(--ion-color-dark);
  text-align: left;
}
.dashboard-table td.total-count .count-value, .dashboard-table td.today-count .count-value, .dashboard-table td.target-count .count-value, .dashboard-table td.achievement-count .count-value, .dashboard-table td.progress-count .count-value {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ion-color-success);
}
.dashboard-table td.total-count .count-value.highlight-today, .dashboard-table td.today-count .count-value.highlight-today, .dashboard-table td.target-count .count-value.highlight-today, .dashboard-table td.achievement-count .count-value.highlight-today, .dashboard-table td.progress-count .count-value.highlight-today {
  color: var(--ion-color-success);
  background-color: rgba(var(--ion-color-success-rgb), 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
  display: inline-block;
}
.dashboard-table td.target-count .count-value {
  color: var(--ion-color-primary);
  font-weight: 600;
}
.dashboard-table td.achievement-count .count-value {
  color: var(--ion-color-success);
  font-weight: 700;
}
.dashboard-table td.progress-count .count-value {
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}
.dashboard-table td.progress-count .count-value.progress-excellent {
  color: #2dd36f;
  background-color: rgba(45, 211, 111, 0.15);
}
.dashboard-table td.progress-count .count-value.progress-good {
  color: #3880ff;
  background-color: rgba(56, 128, 255, 0.15);
}
.dashboard-table td.progress-count .count-value.progress-moderate {
  color: #ffc409;
  background-color: rgba(255, 196, 9, 0.15);
}
.dashboard-table td.progress-count .count-value.progress-low {
  color: #eb445a;
  background-color: rgba(235, 68, 90, 0.15);
}
.dashboard-table tbody tr {
  transition: all 0.2s ease;
}
.dashboard-table tbody tr:hover {
  background-color: var(--ion-color-light-tint);
}
.dashboard-table tbody tr:last-child td {
  border-bottom: none;
}

.stock-table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--ion-color-light);
  margin-top: 1rem;
}

.stock-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.stock-table th {
  background-color: var(--ion-color-light);
  color: var(--ion-color-primary);
  font-weight: 600;
  padding: 10px 6px;
  text-align: center;
  border-bottom: 2px solid var(--ion-color-medium);
  border-right: 1px solid var(--ion-color-light-shade);
  font-size: 0.85rem;
  white-space: nowrap;
}
.stock-table th:last-child {
  border-right: none;
}
.stock-table th.sub-header {
  background-color: #e3f2fd;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 8px 4px;
  border-left: 1px solid var(--ion-color-light-shade);
  text-align: center;
}
.stock-table thead tr:first-child th:nth-child(2) {
  text-align: left;
}
.stock-table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--ion-color-light);
  border-right: 1px solid var(--ion-color-light);
  font-size: 0.85rem;
  vertical-align: middle;
  text-align: center;
}
.stock-table td:last-child {
  border-right: none;
}
.stock-table td.serial-number {
  font-weight: 600;
  color: var(--ion-color-primary);
}
.stock-table td.item-title {
  text-align: left;
  font-weight: 500;
  color: var(--ion-color-dark);
}
.stock-table td.unit {
  font-weight: 500;
  color: var(--ion-color-medium);
}
.stock-table td.numeric {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
}
.stock-table td.numeric.opening-balance {
  color: var(--ion-color-primary);
}
.stock-table td.numeric.supply-in, .stock-table td.numeric.supply-in-inf, .stock-table td.numeric.supply-in-warehouse {
  color: var(--ion-color-success);
}
.stock-table td.numeric.supply-out, .stock-table td.numeric.supply-out-inf, .stock-table td.numeric.supply-out-dp, .stock-table td.numeric.supply-out-damage {
  color: var(--ion-color-warning);
}
.stock-table td.numeric.supply-in-dp {
  color: var(--ion-color-success);
}
.stock-table td.numeric.dp-distribution {
  color: var(--ion-color-primary);
  font-weight: 700;
}
.stock-table td.numeric.closing {
  color: var(--ion-color-tertiary);
}
.stock-table td.numeric.available-stock {
  color: var(--ion-color-primary);
  font-weight: 700;
}
.stock-table td.numeric.used-percentage .count-value {
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}
.stock-table td.numeric.used-percentage .count-value.progress-excellent {
  color: #2dd36f;
  background-color: rgba(45, 211, 111, 0.15);
}
.stock-table td.numeric.used-percentage .count-value.progress-good {
  color: #3880ff;
  background-color: rgba(56, 128, 255, 0.15);
}
.stock-table td.numeric.used-percentage .count-value.progress-moderate {
  color: #ffc409;
  background-color: rgba(255, 196, 9, 0.15);
}
.stock-table td.numeric.used-percentage .count-value.progress-low {
  color: #eb445a;
  background-color: rgba(235, 68, 90, 0.15);
}
.stock-table tbody tr {
  transition: all 0.2s ease;
}
.stock-table tbody tr:hover {
  background-color: var(--ion-color-light-tint);
}
.stock-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {
  .stock-table {
    min-width: 600px;
  }
  .stock-table th, .stock-table td {
    padding: 8px 4px;
    font-size: 0.8rem;
  }
  .dashboard-table {
    min-width: 500px;
  }
  .dashboard-table th, .dashboard-table td {
    padding: 8px 4px;
    font-size: 0.8rem;
  }
  .dashboard-table td.total-count .count-value, .dashboard-table td.today-count .count-value {
    font-size: 0.95rem;
  }
  .dashboard-table td.total-count .count-value.highlight-today, .dashboard-table td.today-count .count-value.highlight-today {
    padding: 3px 8px;
  }
}
@media (max-width: 576px) {
  .stock-table {
    min-width: 500px;
  }
  .stock-table th, .stock-table td {
    padding: 6px 3px;
    font-size: 0.75rem;
  }
  .dashboard-table {
    min-width: 400px;
  }
  .dashboard-table th, .dashboard-table td {
    padding: 6px 3px;
    font-size: 0.75rem;
  }
  .dashboard-table td.total-count .count-value, .dashboard-table td.today-count .count-value {
    font-size: 0.9rem;
  }
  .dashboard-table td.total-count .count-value.highlight-today, .dashboard-table td.today-count .count-value.highlight-today {
    padding: 2px 6px;
  }
}
.section-header {
  margin-bottom: 1.5rem;
}
.section-header .section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ion-color-dark);
  margin: 0 0 0.5rem 0;
}
.section-header .section-subtitle {
  color: var(--ion-color-medium);
  margin: 0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.section-header .section-subtitle ion-icon {
  font-size: 1rem;
}

.empty-state {
  text-align: center;
  padding: 3rem 2rem;
}
.empty-state ion-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}
.empty-state h3 {
  color: var(--ion-color-dark);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}
.empty-state p {
  color: var(--ion-color-medium);
  margin: 0;
  font-size: 0.9rem;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}
.loading-container ion-spinner {
  margin-bottom: 1rem;
}
.loading-container p {
  color: var(--ion-color-medium);
  margin: 0;
}

/* Additional Responsive Design for Section Headers */
@media (max-width: 768px) {
  .section-header .section-title {
    font-size: 1.25rem;
  }
  .section-header .section-subtitle {
    font-size: 0.8rem;
  }
}
@media (max-width: 768px) {
  .filters-card ion-card-title {
    font-size: 16px;
  }
  .filters-card ion-card-subtitle {
    font-size: 0.85rem;
  }
  .form-item {
    margin-bottom: 12px;
  }
  .form-item ion-label {
    font-size: 0.9rem;
  }
  .refresh-button {
    height: 42px;
    font-size: 0.9rem;
  }
  .quick-select-buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 14px;
  }
  .quick-select-buttons ion-button {
    height: 38px;
    font-size: 0.8rem;
  }
  .quick-select-buttons ion-button ion-icon {
    font-size: 16px;
  }
  .date-range-badge {
    padding: 12px 16px;
    gap: 10px;
  }
  .date-range-badge ion-icon {
    font-size: 20px;
  }
  .date-range-badge .date-range-label {
    font-size: 0.85rem;
  }
  .date-range-badge .date-range-value {
    font-size: 1rem;
  }
  .date-range-badge .items-count-badge {
    font-size: 0.85rem;
    padding: 5px 10px;
  }
}
@media (max-width: 480px) {
  .section-header .section-title {
    font-size: 1.1rem;
  }
  .section-header .section-subtitle {
    font-size: 0.75rem;
  }
  .filters-card ion-card-title {
    font-size: 15px;
  }
  .filters-card ion-card-subtitle {
    font-size: 0.8rem;
  }
  .form-item {
    margin-bottom: 10px;
  }
  .form-item ion-label {
    font-size: 0.85rem;
  }
  .form-item ion-icon[slot=start] {
    font-size: 18px;
  }
  .refresh-button {
    height: 40px;
    font-size: 0.85rem;
  }
  .quick-select-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-bottom: 12px;
  }
  .quick-select-buttons ion-button {
    height: 36px;
    font-size: 0.7rem;
  }
  .quick-select-buttons ion-button ion-icon {
    font-size: 16px;
  }
  .quick-select-buttons ion-button span {
    font-size: 0.7rem;
    white-space: nowrap;
  }
  .quick-select-buttons ion-button::part(native) {
    padding-left: 4px;
    padding-right: 4px;
  }
  .date-range-display {
    margin-bottom: 12px;
  }
  .date-range-badge {
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    text-align: center;
  }
  .date-range-badge ion-icon {
    font-size: 22px;
  }
  .date-range-badge .date-range-label {
    font-size: 0.75rem;
  }
  .date-range-badge .date-range-value {
    font-size: 0.9rem;
    white-space: normal;
    word-break: break-word;
  }
  .date-range-badge .items-count-badge {
    font-size: 0.8rem;
    padding: 4px 10px;
  }
}
/* Measurement Information Styles */
.measurement-grid {
  margin-top: 1rem;
}

.pbw-measurement-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.pbw-measurement-row ion-col {
  display: flex;
}
.pbw-measurement-row ion-col > * {
  width: 100%;
}

.measurement-box {
  --measurement-accent: var(--ion-color-primary);
  --measurement-accent-rgb: 56, 128, 255;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(135deg, rgba(var(--measurement-accent-rgb), 0.08), rgba(var(--measurement-accent-rgb), 0.02));
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}
.measurement-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.measurement-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(var(--measurement-accent-rgb), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--measurement-accent);
  flex-shrink: 0;
}

.measurement-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.measurement-label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ion-color-medium);
  text-transform: uppercase;
  line-height: 1.2;
}

.measurement-value {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--measurement-accent);
  line-height: 1;
}

.disability-child .measurement-label,
.disability-plw .measurement-label {
  color: var(--measurement-accent);
}

.measurement-total {
  --measurement-accent: #4a7ac2;
  --measurement-accent-rgb: 74, 122, 194;
}

.measurement-boy {
  --measurement-accent: #31b77c;
  --measurement-accent-rgb: 49, 183, 124;
}

.measurement-girl {
  --measurement-accent: #ec6ba4;
  --measurement-accent-rgb: 236, 107, 164;
}

.measurement-sam {
  --measurement-accent: #e45858;
  --measurement-accent-rgb: 228, 88, 88;
}

.measurement-mam {
  --measurement-accent: #f3a712;
  --measurement-accent-rgb: 243, 167, 18;
}

.measurement-normal {
  --measurement-accent: #43c466;
  --measurement-accent-rgb: 67, 196, 102;
}

.measurement-wasting {
  --measurement-accent: #ff7b3f;
  --measurement-accent-rgb: 255, 123, 63;
}

.measurement-stunting {
  --measurement-accent: #7b5ed1;
  --measurement-accent-rgb: 123, 94, 209;
}

.measurement-underweight {
  --measurement-accent: #2aa4b1;
  --measurement-accent-rgb: 42, 164, 177;
}

.disability-child {
  --measurement-accent: #6a4c93;
  --measurement-accent-rgb: 106, 76, 147;
}

.disability-plw {
  --measurement-accent: #8e44ad;
  --measurement-accent-rgb: 142, 68, 173;
}

.verified-child {
  --measurement-accent: #28a745;
  --measurement-accent-rgb: 40, 167, 69;
}

.verified-plw {
  --measurement-accent: #20c997;
  --measurement-accent-rgb: 32, 201, 151;
}

.home-visit {
  --measurement-accent: #17a2b8;
  --measurement-accent-rgb: 23, 162, 184;
}

.exit-interview {
  --measurement-accent: #fd7e14;
  --measurement-accent-rgb: 253, 126, 20;
}

@media (max-width: 992px) {
  .measurement-box {
    padding: 0.8rem 0.9rem;
    gap: 10px;
  }
  .measurement-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  .measurement-label {
    font-size: 0.75rem;
  }
  .measurement-value {
    font-size: 1.55rem;
  }
}
@media (max-width: 768px) {
  .measurement-box {
    padding: 0.7rem 0.8rem;
    gap: 9px;
    border-radius: 12px;
  }
  .measurement-icon {
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
    border-radius: 10px;
  }
  .measurement-label {
    font-size: 0.7rem;
    letter-spacing: 0.2px;
  }
  .measurement-value {
    font-size: 1.4rem;
  }
}
@media (max-width: 576px) {
  .measurement-box {
    flex-direction: row;
    padding: 0.65rem 0.75rem;
    gap: 8px;
  }
  .measurement-icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    border-radius: 9px;
  }
  .measurement-label {
    font-size: 0.65rem;
    letter-spacing: 0.15px;
  }
  .measurement-value {
    font-size: 1.25rem;
  }
}
@media (max-width: 480px) {
  .measurement-box {
    padding: 0.6rem 0.7rem;
    gap: 7px;
  }
  .measurement-icon {
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
    border-radius: 8px;
  }
  .measurement-label {
    font-size: 0.6rem;
  }
  .measurement-value {
    font-size: 1.15rem;
  }
}
@media (max-width: 400px) {
  .measurement-box {
    padding: 0.55rem 0.65rem;
    gap: 6px;
  }
  .measurement-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  .measurement-label {
    font-size: 0.58rem;
  }
  .measurement-value {
    font-size: 1.1rem;
  }
}
.gmp-table-container {
  margin-top: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 1rem;
  background: rgba(var(--ion-color-primary-rgb), 0.02);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.gmp-table-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.gmp-table-header ion-icon {
  font-size: 1.8rem;
}
.gmp-table-header .gmp-table-title {
  margin: 0;
  font-weight: 600;
  color: var(--ion-color-dark);
}
.gmp-table-header .gmp-table-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ion-color-medium);
}

.gmp-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gmp-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.gmp-table-row--head {
  background: rgba(var(--ion-color-primary-rgb), 0.08);
  box-shadow: none;
  font-weight: 600;
  color: var(--ion-color-primary);
}

.gmp-cell {
  font-size: 0.9rem;
  color: var(--ion-color-dark);
}

.gmp-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ion-color-dark);
}
.gmp-progress span {
  min-width: 3ch;
  text-align: right;
}

.gmp-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(var(--ion-color-primary-rgb), 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.gmp-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ion-color-success), var(--ion-color-primary));
  transition: width 0.3s ease;
}

@media (max-width: 768px) {
  .gmp-table-row {
    grid-template-columns: 1fr 0.8fr 0.8fr;
    grid-template-areas: "title title title" "target achievement progress";
  }
  .gmp-table-row .gmp-title {
    grid-area: title;
    font-weight: 600;
  }
  .gmp-table-row .gmp-target {
    grid-area: target;
  }
  .gmp-table-row .gmp-achievement {
    grid-area: achievement;
  }
  .gmp-table-row .gmp-progress {
    grid-area: progress;
  }
}
/* Parent-Child Measurement Structure with Chips Inside */
.measurement-parent {
  border: 2px solid rgba(var(--measurement-accent-rgb), 0.3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  flex-direction: column;
  padding: 0.9rem 1rem 0.7rem;
  gap: 0;
}

.measurement-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.65rem;
}

.measurement-children-chips {
  margin-top: 0.45rem;
  padding: 0;
  width: 100%;
}

.measurement-chip {
  --background: rgba(255, 255, 255, 0.6);
  --color: var(--ion-color-dark);
  border: 1px solid rgba(67, 196, 102, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  height: 100%;
  width: 100%;
  padding: 7px 9px;
  border-radius: 9px;
  transition: all 0.2s ease;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.measurement-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-color: rgba(67, 196, 102, 0.6);
  --background: rgba(255, 255, 255, 0.8);
}
.measurement-chip ion-icon {
  font-size: 1.2rem;
  color: #43c466;
  margin-right: 0;
  margin-bottom: 3px;
}
.measurement-chip ion-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 0;
  width: 100%;
  text-align: center;
}
.measurement-chip .chip-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ion-color-dark);
  letter-spacing: 0.15px;
  line-height: 1.15;
}
.measurement-chip .chip-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #43c466;
  white-space: nowrap;
}

@media (max-width: 992px) {
  .measurement-parent {
    padding: 0.8rem 0.9rem 0.65rem;
  }
  .measurement-header {
    margin-bottom: 0.6rem;
    gap: 10px;
  }
  .measurement-children-chips {
    margin-top: 0.4rem;
  }
  .measurement-chip {
    padding: 6px 8px;
  }
  .measurement-chip ion-icon {
    font-size: 1.15rem;
  }
  .measurement-chip .chip-title {
    font-size: 0.67rem;
  }
  .measurement-chip .chip-value {
    font-size: 1.15rem;
  }
}
@media (max-width: 768px) {
  .measurement-parent {
    padding: 0.7rem 0.8rem 0.6rem;
  }
  .measurement-header {
    margin-bottom: 0.55rem;
    gap: 9px;
  }
  .measurement-children-chips {
    margin-top: 0.38rem;
  }
  .measurement-chip {
    padding: 5px 7px;
    border-radius: 8px;
  }
  .measurement-chip ion-icon {
    font-size: 1.1rem;
    margin-bottom: 3px;
  }
  .measurement-chip .chip-title {
    font-size: 0.62rem;
    letter-spacing: 0.1px;
  }
  .measurement-chip .chip-value {
    font-size: 1.05rem;
  }
}
@media (max-width: 576px) {
  .measurement-parent {
    padding: 0.65rem 0.75rem 0.55rem;
  }
  .measurement-header {
    margin-bottom: 0.5rem;
    gap: 8px;
  }
  .measurement-children-chips {
    margin-top: 0.35rem;
  }
  .measurement-chip {
    padding: 5px 6px;
    border-radius: 7px;
  }
  .measurement-chip ion-icon {
    font-size: 1.05rem;
    margin-bottom: 2px;
  }
  .measurement-chip ion-label {
    gap: 2px;
  }
  .measurement-chip .chip-title {
    font-size: 0.58rem;
  }
  .measurement-chip .chip-value {
    font-size: 1rem;
  }
}
@media (max-width: 480px) {
  .measurement-parent {
    padding: 0.6rem 0.7rem 0.5rem;
  }
  .measurement-header {
    gap: 7px;
  }
  .measurement-chip {
    padding: 4px 5px;
  }
  .measurement-chip ion-icon {
    font-size: 1rem;
  }
  .measurement-chip .chip-title {
    font-size: 0.55rem;
  }
  .measurement-chip .chip-value {
    font-size: 0.95rem;
  }
}
@media (max-width: 400px) {
  .measurement-parent {
    padding: 0.55rem 0.65rem 0.45rem;
  }
  .measurement-header {
    gap: 6px;
  }
  .measurement-chip {
    padding: 4px 5px;
  }
  .measurement-chip ion-icon {
    font-size: 0.95rem;
    margin-bottom: 2px;
  }
  .measurement-chip ion-label {
    gap: 2px;
  }
  .measurement-chip .chip-title {
    font-size: 0.52rem;
  }
  .measurement-chip .chip-value {
    font-size: 0.9rem;
  }
}
/* Program Summary Grid-Based Styles */
.program-subtitle-with-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.program-total-badge {
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  margin-left: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(56, 128, 255, 0.3) !important;
}

.program-grid {
  display: grid;
  gap: 0.85rem;
}
.program-grid.program-grid-3col {
  grid-template-columns: repeat(3, 1fr);
}
.program-grid.program-grid-2col {
  grid-template-columns: repeat(2, 1fr);
}

.program-card {
  border-radius: 10px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.program-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.program-card.program-danger {
  background: linear-gradient(135deg, rgba(240, 65, 65, 0.06), rgba(240, 65, 65, 0.02));
  border-color: rgba(240, 65, 65, 0.25);
}
.program-card.program-danger .program-color-bar {
  background: var(--ion-color-danger);
}
.program-card.program-danger .program-name {
  color: var(--ion-color-danger);
}
.program-card.program-danger .stat-value {
  color: var(--ion-color-danger);
}
.program-card.program-warning {
  background: linear-gradient(135deg, rgba(255, 206, 0, 0.06), rgba(255, 206, 0, 0.02));
  border-color: rgba(255, 206, 0, 0.25);
}
.program-card.program-warning .program-color-bar {
  background: var(--ion-color-warning);
}
.program-card.program-warning .program-name {
  color: #d39e00;
}
.program-card.program-warning .stat-value {
  color: #d39e00;
}
.program-card.program-success {
  background: linear-gradient(135deg, rgba(57, 192, 176, 0.06), rgba(57, 192, 176, 0.02));
  border-color: rgba(57, 192, 176, 0.25);
}
.program-card.program-success .program-color-bar {
  background: var(--ion-color-success);
}
.program-card.program-success .program-name {
  color: var(--ion-color-success);
}
.program-card.program-success .stat-value {
  color: var(--ion-color-success);
}

.program-color-bar {
  height: 4px;
  width: 100%;
}

.program-card-content {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.program-name {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.program-stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.program-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.program-stat .stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ion-color-medium);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.program-stat .stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
.program-stat.program-stat-full {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}
.program-stat.program-stat-full .stat-label {
  width: 100%;
}

.program-progress-container {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
}
.program-progress-container .stat-value {
  min-width: 3.2rem;
  text-align: right;
  font-size: 1rem;
}

.program-progress-bar {
  flex: 1;
  height: 9px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.program-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ion-color-primary), var(--ion-color-secondary));
  transition: width 0.4s ease;
}

.program-danger .program-progress-fill {
  background: linear-gradient(90deg, #f04141, #ff6b6b);
}

.program-warning .program-progress-fill {
  background: linear-gradient(90deg, #ffce00, #ffd700);
}

.program-success .program-progress-fill {
  background: linear-gradient(90deg, #39c0b0, #4dd0c1);
}

@media (max-width: 992px) {
  .program-total-badge {
    font-size: 0.95rem !important;
    padding: 6px 12px !important;
  }
  .program-grid {
    gap: 0.75rem;
  }
  .program-grid.program-grid-3col {
    grid-template-columns: repeat(3, 1fr);
  }
  .program-grid.program-grid-2col {
    grid-template-columns: repeat(2, 1fr);
  }
  .program-card-content {
    padding: 0.75rem;
    gap: 0.65rem;
  }
  .program-name {
    font-size: 1.1rem;
    letter-spacing: 0.6px;
    padding-bottom: 0.5rem;
  }
  .program-stat {
    padding: 0.45rem 0.6rem;
  }
  .program-stat .stat-label {
    font-size: 0.65rem;
    letter-spacing: 0.3px;
  }
  .program-stat .stat-value {
    font-size: 1.15rem;
  }
  .program-progress-container {
    gap: 0.55rem;
  }
  .program-progress-container .stat-value {
    font-size: 0.95rem;
    min-width: 3rem;
  }
  .program-progress-bar {
    height: 8px;
  }
}
@media (max-width: 768px) {
  .program-total-badge {
    font-size: 0.9rem !important;
    padding: 5px 11px !important;
  }
  .program-grid {
    gap: 0.65rem;
  }
  .program-grid.program-grid-3col {
    grid-template-columns: repeat(3, 1fr);
  }
  .program-grid.program-grid-2col {
    grid-template-columns: repeat(2, 1fr);
  }
  .program-card {
    border-radius: 8px;
  }
  .program-color-bar {
    height: 3px;
  }
  .program-card-content {
    padding: 0.65rem;
    gap: 0.55rem;
  }
  .program-name {
    font-size: 0.95rem;
    letter-spacing: 0.4px;
    padding-bottom: 0.4rem;
  }
  .program-stats {
    gap: 0.4rem;
  }
  .program-stat {
    padding: 0.38rem 0.5rem;
  }
  .program-stat .stat-label {
    font-size: 0.5rem;
    letter-spacing: 0.1px;
    line-height: 1.15;
  }
  .program-stat .stat-value {
    font-size: 1rem;
  }
  .program-stat.program-stat-full {
    gap: 0.35rem;
  }
  .program-progress-container {
    gap: 0.4rem;
  }
  .program-progress-container .stat-value {
    font-size: 0.75rem;
    min-width: 2.2rem;
  }
  .program-progress-bar {
    height: 6px;
  }
}
@media (max-width: 576px) {
  .program-total-badge {
    font-size: 0.85rem !important;
    padding: 5px 10px !important;
  }
  .program-grid {
    gap: 0.6rem;
  }
  .program-grid.program-grid-3col {
    grid-template-columns: repeat(3, 1fr);
  }
  .program-grid.program-grid-2col {
    grid-template-columns: repeat(2, 1fr);
  }
  .program-card {
    border-radius: 8px;
  }
  .program-card-content {
    padding: 0.6rem;
    gap: 0.5rem;
  }
  .program-name {
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    padding-bottom: 0.35rem;
  }
  .program-stats {
    gap: 0.35rem;
  }
  .program-stat {
    padding: 0.35rem 0.45rem;
  }
  .program-stat .stat-label {
    font-size: 0.48rem;
    letter-spacing: 0.1px;
    line-height: 1.1;
  }
  .program-stat .stat-value {
    font-size: 0.95rem;
  }
  .program-stat.program-stat-full {
    gap: 0.3rem;
  }
  .program-progress-container {
    gap: 0.35rem;
  }
  .program-progress-container .stat-value {
    font-size: 0.7rem;
    min-width: 2rem;
  }
  .program-progress-bar {
    height: 5px;
  }
}
@media (max-width: 480px) {
  .program-total-badge {
    font-size: 0.8rem !important;
    padding: 4px 9px !important;
  }
  .program-grid {
    gap: 0.55rem;
  }
  .program-grid.program-grid-3col {
    grid-template-columns: repeat(3, 1fr);
  }
  .program-grid.program-grid-2col {
    grid-template-columns: repeat(2, 1fr);
  }
  .program-card-content {
    padding: 0.55rem;
    gap: 0.45rem;
  }
  .program-name {
    font-size: 0.8rem;
    letter-spacing: 0.2px;
    padding-bottom: 0.3rem;
  }
  .program-stats {
    gap: 0.3rem;
  }
  .program-stat {
    padding: 0.3rem 0.4rem;
  }
  .program-stat .stat-label {
    font-size: 0.45rem;
    letter-spacing: 0.05px;
    line-height: 1.1;
  }
  .program-stat .stat-value {
    font-size: 0.9rem;
  }
  .program-stat.program-stat-full {
    gap: 0.28rem;
  }
  .program-progress-container {
    gap: 0.3rem;
  }
  .program-progress-container .stat-value {
    font-size: 0.65rem;
    min-width: 1.9rem;
  }
  .program-progress-bar {
    height: 4px;
  }
}`, "",{"version":3,"sources":["webpack://./src/app/pages/home/home.page.scss"],"names":[],"mappings":"AAAA;EACE,0BAAA;EACA,4BAAA;EACA,8BAAA;EACA,6BAAA;EACA,4BAAA;EACA,4BAAA;EACA,2BAAA;EACA,yBAAA;EACA,2BAAA;EACA,0BAAA;EACA,iDAAA;AACF;;AAEA;EACE,qBAAA;EACA,iBAAA;AACF;;AAEA;EACE,gBAAA;EACA,mBAAA;EACA,eAAA;AACF;;AAEA;EACE,gBAAA;AACF;;AAEA;EACE,wCAAA;EACA,kCAAA;EACA,gBAAA;AACF;;AAEA;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,YAAA;AACF;;AAEA;EACE,OAAA;AACF;;AAEA;EACE,eAAA;EACA,gBAAA;EACA,eAAA;AACF;;AAEA;EACE,8BAAA;EACA,eAAA;EACA,eAAA;AACF;;AAEA;EACE,eAAA;EACA,eAAA;EACA,gBAAA;AACF;;AAEA;EACE,WAAA;EACA,YAAA;EACA,qBAAA;EACA,kCAAA;EACA,wCAAA;AACF;;AAEA;EACE,eAAA;EACA,gBAAA;EACA,mBAAA;EACA,4BAAA;EACA,qBAAA;AACF;;AAEA;EACE,wCAAA;EACA,kCAAA;EACA,eAAA;EACA,YAAA;EACA,gBAAA;EACA,qDAAA;AACF;;AAEA;EACE,2BAAA;EACA,0CAAA;AACF;;AAEA;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,YAAA;AACF;;AAEA;EACE,eAAA;EACA,kBAAA;EACA,+BAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;AACF;;AAEA;EACE,OAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;AACF;;AAEA;EACE,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,YAAA;EACA,cAAA;AACF;;AAEA;EACE,SAAA;EACA,eAAA;EACA,+BAAA;EACA,gBAAA;EACA,gBAAA;AACF;;AAEA;EACE,wCAAA;EACA,kCAAA;EACA,SAAA;EACA,YAAA;EACA,kBAAA;EACA,gBAAA;EACA,yBAAA;EACA,eAAA;AACF;;AAEA;EACE,sBAAA;AACF;;AAEA;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,g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","sourcesContent":[":host {\n  --ion-color-light: #f8f9fa;\n  --ion-color-primary: #3880ff;\n  --ion-color-secondary: #eb5daa;\n  --ion-color-tertiary: #7854e4;\n  --ion-color-success: #39c0b0;\n  --ion-color-warning: #ffce00;\n  --ion-color-danger: #f04141;\n  --ion-color-dark: #222428;\n  --ion-color-purple: #a32e80;\n  --card-border-radius: 16px;\n  --card-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);\n}\n\nion-header ion-toolbar {\n  --background: #ffffff;\n  --border-width: 0;\n}\n\nion-title {\n  font-weight: 600;\n  letter-spacing: 1px;\n  font-size: 18px;\n}\n\n.profile-container {\n  margin-top: 16px;\n}\n\n.profile-card {\n  border-radius: var(--card-border-radius);\n  box-shadow: var(--card-box-shadow);\n  overflow: hidden;\n}\n\n.profile-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 6px;\n}\n\n.profile-info {\n  flex: 1;\n}\n\n.username {\n  font-size: 20px;\n  font-weight: 700;\n  margin: 0 0 4px;\n}\n\n.user-type {\n  color: var(--ion-color-medium);\n  margin: 0 0 8px;\n  font-size: 14px;\n}\n\n.user-title {\n  font-size: 16px;\n  margin: 0 0 8px;\n  font-weight: 600;\n}\n\n.profile-avatar {\n  width: 70px;\n  height: 95px;\n  --border-radius: 15px;\n  background: var(--ion-color-light);\n  box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.section-title {\n  font-size: 18px;\n  font-weight: 600;\n  margin: 24px 0 12px;\n  color: var(--ion-color-dark);\n  opacity: 1 !important;\n}\n\n.stat-card {\n  border-radius: var(--card-border-radius);\n  box-shadow: var(--card-box-shadow);\n  margin: 0px 4px;\n  height: 100%;\n  min-height: 80px;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.stat-card:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n}\n\n.stat-content {\n  display: flex;\n  align-items: center;\n  padding: 5px;\n  height: 100%;\n}\n\n.stat-icon {\n  font-size: 36px;\n  margin-right: 16px;\n  color: rgba(255, 255, 255, 0.9);\n  min-width: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.stat-text {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.stat-number {\n  font-size: 32px;\n  font-weight: 700;\n  margin: 0 0 6px 0;\n  color: white;\n  line-height: 1;\n}\n\n.stat-label {\n  margin: 0;\n  font-size: 14px;\n  color: rgba(255, 255, 255, 0.9);\n  line-height: 1.3;\n  font-weight: 500;\n}\n\n.menu-card {\n  border-radius: var(--card-border-radius);\n  box-shadow: var(--card-box-shadow);\n  margin: 0;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.3s ease;\n  cursor: pointer;\n}\n\n.menu-card:active {\n  transform: scale(0.97);\n}\n\n.menu-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0px 0px;\n  text-align: center;\n  height: 100%;\n}\n\n.menu-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: rgba(var(--ion-color-primary-rgb), 0.1);\n  margin-bottom: 12px;\n}\n\n.menu-icon-container ion-icon {\n  font-size: 26px;\n}\n\n.menu-title {\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1.2;\n}\n\n/* Responsive Design */\n@media (max-width: 576px) {\n  .stat-card {\n    margin: 4px 2px;\n    min-height: 100px;\n  }\n\n  .stat-content {\n    padding: 0px;\n    flex-direction: column;\n    text-align: center;\n  }\n\n  .stat-number {\n    font-size: 22px;\n  }\n\n  .stat-label {\n    font-size: 11px;\n    line-height: 1.2;\n  }\n\n  .stat-icon {\n    font-size: 24px;\n    margin-right: 0;\n    margin-bottom: 6px;\n    min-width: auto;\n  }\n\n  .menu-icon-container {\n    width: 48px;\n    height: 48px;\n  }\n\n  .menu-icon-container ion-icon {\n    font-size: 22px;\n  }\n}\n\n/* Nurse Dashboard Styles */\n.nurse-dashboard-card {\n  margin-top: 1.5rem;\n}\n\n.nurse-online-indicator {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 1rem;\n\n  ion-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-weight: 600;\n    text-transform: uppercase;\n  }\n\n  span {\n    color: var(--ion-color-medium);\n    font-size: 0.85rem;\n  }\n}\n\n.nurse-summary-section {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.nurse-summary-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.nurse-program-label {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n\n  ion-icon {\n    font-size: 1.2rem;\n  }\n\n  &.otp-label {\n    color: var(--ion-color-danger);\n  }\n\n  &.tsfp-label {\n    color: var(--ion-color-warning);\n  }\n\n  &.bsfp-label {\n    color: var(--ion-color-success);\n  }\n}\n\n.nurse-breakdown-wrapper {\n  margin-top: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.nurse-breakdown-category {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.breakdown-group-label {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--ion-color-dark);\n\n  ion-icon {\n    font-size: 1.2rem;\n  }\n\n  &.otp-label {\n    color: var(--ion-color-danger);\n  }\n\n  &.tsfp-label {\n    color: var(--ion-color-warning);\n  }\n\n  &.bsfp-label {\n    color: var(--ion-color-success);\n  }\n}\n\n.nurse-summary-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 12px;\n}\n\n.nurse-summary-card {\n  border-radius: 16px;\n  padding: 16px;\n  background: white;\n  border: 1px solid rgba(var(--ion-color-primary-rgb), 0.15);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n\n  &.otp-card {\n    background: linear-gradient(135deg, rgba(240, 65, 65, 0.15), rgba(232, 88, 88, 0.35));\n    border-color: rgba(var(--ion-color-danger-rgb), 0.4);\n\n    .summary-card-header ion-icon,\n    .summary-card-value {\n      color: var(--ion-color-danger);\n    }\n  }\n\n  &.tsfp-card {\n    background: linear-gradient(135deg, rgba(255, 206, 0, 0.2), rgba(255, 184, 0, 0.35));\n    border-color: rgba(var(--ion-color-warning-rgb), 0.45);\n\n    .summary-card-header ion-icon,\n    .summary-card-value {\n      color: var(--ion-color-warning);\n    }\n  }\n\n  &.bsfp-card {\n    background: linear-gradient(135deg, rgba(57, 192, 176, 0.15), rgba(57, 192, 176, 0.3));\n    border-color: rgba(var(--ion-color-success-rgb), 0.4);\n\n    .summary-card-header ion-icon,\n    .summary-card-value {\n      color: var(--ion-color-success);\n    }\n  }\n\n  &.nurse-card-general, &.pbw-card-general {\n    background: linear-gradient(135deg, rgba(120, 84, 228, 0.08), rgba(120, 84, 228, 0.2));\n    border-color: rgba(var(--ion-color-tertiary-rgb), 0.4);\n  }\n\n  &:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.summary-card-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n\n  ion-icon {\n    font-size: 22px;\n    color: var(--ion-color-primary);\n  }\n}\n\n.summary-card-title {\n  font-size: 0.95rem;\n}\n\n.summary-card-value {\n  margin-top: 12px;\n  font-size: 2rem;\n  font-weight: 700;\n  color: var(--ion-color-dark);\n}\n\n.nurse-breakdown-section {\n  margin-top: 1.5rem;\n}\n\n.breakdown-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex-wrap: wrap;\n  margin-bottom: 0.75rem;\n}\n\n.breakdown-title {\n  display: flex;\n  align-items: center;\n  gap: 0.45rem;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n\n  ion-icon {\n    font-size: 1.3rem;\n  }\n}\n\n.nurse-breakdown-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));\n  gap: 10px;\n}\n\n.nurse-breakdown-card {\n  border-radius: 12px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  padding: 12px 14px;\n  background: rgba(var(--ion-color-primary-rgb), 0.02);\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n}\n\n.breakdown-label {\n  font-size: 0.85rem;\n  color: var(--ion-color-medium);\n}\n\n.breakdown-count {\n  font-size: 1.15rem;\n  font-weight: 700;\n  color: var(--ion-color-primary);\n}\n\n\n.nurse-offline-card {\n  margin-top: 1rem;\n\n  .offline-notice {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n\n    ion-icon {\n      font-size: 2.5rem;\n    }\n\n    h3 {\n      margin: 0 0 4px 0;\n      font-size: 1rem;\n      color: var(--ion-color-dark);\n    }\n\n    p {\n      margin: 0;\n      color: var(--ion-color-medium);\n      font-size: 0.85rem;\n    }\n  }\n}\n\n@media (max-width: 992px) {\n  .nurse-summary-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 576px) {\n  .nurse-summary-grid {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n\n  .summary-card-value {\n    font-size: 1.5rem;\n  }\n\n  .nurse-breakdown-grid {\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  }\n}\n\n.miycn-dashboard-card {\n  margin-top: 1.5rem;\n}\n\n.miycn-online-indicator {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 1rem;\n\n  ion-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-weight: 600;\n    text-transform: uppercase;\n  }\n\n  span {\n    color: var(--ion-color-medium);\n    font-size: 0.85rem;\n  }\n}\n\n.miycn-summary-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 12px;\n}\n\n.miycn-summary-card {\n  border-radius: 16px;\n  padding: 16px;\n  background: linear-gradient(135deg, rgba(var(--ion-color-tertiary-rgb), 0.1), rgba(var(--ion-color-tertiary-rgb), 0.2));\n  border: 1px solid rgba(var(--ion-color-tertiary-rgb), 0.4);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.miycn-card-title {\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n}\n\n.miycn-card-value {\n  font-size: 2rem;\n  font-weight: 700;\n  color: var(--ion-color-tertiary);\n}\n\n.counselor-offline-card, .pbw-offline-card {\n  margin-top: 1rem;\n\n  .offline-notice {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n\n    ion-icon {\n      font-size: 2.5rem;\n    }\n\n    h3 {\n      margin: 0 0 4px 0;\n      font-size: 1rem;\n      color: var(--ion-color-dark);\n    }\n\n    p {\n      margin: 0;\n      color: var(--ion-color-medium);\n      font-size: 0.85rem;\n    }\n  }\n}\n\n.pbw-dashboard-card {\n  margin-top: 1.5rem;\n}\n\n@media (max-width: 576px) {\n  .miycn-summary-grid {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n\n  .miycn-card-value {\n    font-size: 1.6rem;\n  }\n}\n\n/* For very small screens (< 400px) */\n@media (max-width: 400px) {\n  .stat-content {\n    padding: 8px;\n  }\n\n  .stat-number {\n    font-size: 20px;\n  }\n\n  .stat-label {\n    font-size: 10px;\n  }\n\n  .stat-icon {\n    font-size: 20px;\n    margin-bottom: 4px;\n  }\n}\n\n@media (max-width: 768px) {\n  .stat-card {\n    margin: 0px 2px;\n  }\n}\n\n/* Better color contrast for warning cards */\n.stat-card[color=\"warning\"] .stat-number,\n.stat-card[color=\"warning\"] .stat-label,\n.stat-card[color=\"warning\"] .stat-icon {\n  color: #333 !important;\n}\n\n/* Improved hover effects for different card colors */\n.stat-card[color=\"primary\"]:hover {\n  box-shadow: 0 8px 24px rgba(56, 128, 255, 0.3);\n}\n\n.stat-card[color=\"secondary\"]:hover {\n  box-shadow: 0 8px 24px rgba(235, 93, 170, 0.3);\n}\n\n.stat-card[color=\"tertiary\"]:hover {\n  box-shadow: 0 8px 24px rgba(120, 84, 228, 0.3);\n}\n\n.stat-card[color=\"success\"]:hover {\n  box-shadow: 0 8px 24px rgba(57, 192, 176, 0.3);\n}\n\n.stat-card[color=\"warning\"]:hover {\n  box-shadow: 0 8px 24px rgba(255, 206, 0, 0.3);\n}\n\n.stat-card[color=\"danger\"]:hover {\n  box-shadow: 0 8px 24px rgba(240, 65, 65, 0.3);\n}\n\n.stat-card[color=\"purple\"]:hover {\n  box-shadow: 0 8px 24px rgba(163, 46, 128, 0.3);\n}\n\n/* Filters Card Styles */\n.filters-card {\n  margin-bottom: 20px;\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n\n  ion-card-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 18px;\n    font-weight: 600;\n  }\n\n  ion-card-subtitle {\n    margin-top: 0.5rem;\n    color: var(--ion-color-medium);\n    font-size: 0.9rem;\n  }\n}\n\n.form-item {\n  margin-bottom: 16px;\n  border-radius: 8px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n\n  ion-label {\n    font-weight: 500;\n    color: var(--ion-color-dark);\n  }\n\n  ion-icon[slot=\"start\"] {\n    margin-inline-end: 12px;\n  }\n\n  ion-select,\n  ion-input {\n    width: 100%;\n  }\n}\n\n.refresh-button {\n  height: 44px;\n  font-weight: 600;\n  --border-radius: 8px;\n  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n}\n\n.quick-select-buttons {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 8px;\n  margin-bottom: 16px;\n\n  ion-button {\n    height: 40px;\n    font-size: 0.85rem;\n    font-weight: 600;\n    --border-radius: 8px;\n    --border-width: 2px;\n    transition: all 0.2s ease;\n\n    &[color=\"primary\"] {\n      --background: var(--ion-color-primary);\n      --color: white;\n      --border-color: var(--ion-color-primary);\n    }\n\n    &[color=\"medium\"] {\n      --background: transparent;\n      --color: var(--ion-color-medium);\n      --border-color: rgba(0, 0, 0, 0.12);\n    }\n\n    ion-icon {\n      font-size: 18px;\n    }\n  }\n}\n\n/* Responsive Grid for Quick Select Buttons on Large Screens */\n@media (min-width: 992px) {\n  .quick-select-buttons {\n    grid-template-columns: repeat(6, 1fr);\n  }\n}\n\n/* Date Range Display Above Table */\n.date-range-display {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.date-range-badge {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: linear-gradient(135deg, rgba(var(--ion-color-primary-rgb), 0.08), rgba(var(--ion-color-primary-rgb), 0.04));\n  border: 2px solid rgba(var(--ion-color-primary-rgb), 0.2);\n  border-radius: 12px;\n  padding: 14px 20px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n  transition: all 0.3s ease;\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);\n    border-color: rgba(var(--ion-color-primary-rgb), 0.35);\n  }\n\n  ion-icon {\n    font-size: 24px;\n    color: var(--ion-color-primary);\n    flex-shrink: 0;\n  }\n\n  .date-range-label {\n    font-size: 0.9rem;\n    font-weight: 600;\n    color: var(--ion-color-medium);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n\n  .date-range-value {\n    font-size: 1.1rem;\n    font-weight: 700;\n    color: var(--ion-color-dark);\n    white-space: nowrap;\n  }\n\n  .items-count-badge {\n    font-size: 0.9rem;\n    font-weight: 700;\n    padding: 6px 12px;\n    border-radius: 8px;\n  }\n}\n\n/* Stats Container Spacing */\n.stats-container {\n  margin-top: 16px;\n}\n\n/* Dashboard Table Styles */\n.dashboard-table-container {\n  overflow-x: auto;\n  border-radius: 8px;\n  border: 1px solid var(--ion-color-light);\n  margin-top: 1rem;\n}\n\n.dashboard-table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: auto;\n\n  th {\n    background-color: var(--ion-color-light);\n    color: var(--ion-color-primary);\n    font-weight: 600;\n    padding: 12px 16px;\n    text-align: center;\n    border-bottom: 2px solid var(--ion-color-medium);\n    font-size: 0.85rem;\n    white-space: nowrap;\n\n    &:first-child {\n      text-align: left;\n      width: 75%;\n    }\n\n    &:nth-child(2) {\n      text-align: center;\n      width: 25%;\n    }\n  }\n\n  td {\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--ion-color-light);\n    font-size: 0.85rem;\n    text-align: center;\n    vertical-align: middle;\n\n    &.serial-number {\n      font-weight: 600;\n      color: var(--ion-color-primary);\n    }\n\n    &.category-title {\n      font-weight: 500;\n      color: var(--ion-color-dark);\n      text-align: left;\n    }\n\n    &.total-count, &.today-count, &.target-count, &.achievement-count, &.progress-count {\n      .count-value {\n        font-weight: 600;\n        font-size: 1rem;\n        color: var(--ion-color-success);\n\n        &.highlight-today {\n          color: var(--ion-color-success);\n          background-color: rgba(var(--ion-color-success-rgb), 0.15);\n          padding: 4px 10px;\n          border-radius: 6px;\n          font-weight: 700;\n          display: inline-block;\n        }\n      }\n    }\n\n    &.target-count {\n      .count-value {\n        color: var(--ion-color-primary);\n        font-weight: 600;\n      }\n    }\n\n    &.achievement-count {\n      .count-value {\n        color: var(--ion-color-success);\n        font-weight: 700;\n      }\n    }\n\n    &.progress-count {\n      .count-value {\n        font-weight: 700;\n        padding: 4px 10px;\n        border-radius: 6px;\n        display: inline-block;\n\n        &.progress-excellent {\n          color: #2dd36f;\n          background-color: rgba(45, 211, 111, 0.15);\n        }\n\n        &.progress-good {\n          color: #3880ff;\n          background-color: rgba(56, 128, 255, 0.15);\n        }\n\n        &.progress-moderate {\n          color: #ffc409;\n          background-color: rgba(255, 196, 9, 0.15);\n        }\n\n        &.progress-low {\n          color: #eb445a;\n          background-color: rgba(235, 68, 90, 0.15);\n        }\n      }\n    }\n  }\n\n  tbody tr {\n    transition: all 0.2s ease;\n\n    &:hover {\n      background-color: var(--ion-color-light-tint);\n    }\n\n    &:last-child td {\n      border-bottom: none;\n    }\n  }\n}\n\n.stock-table-container {\n  overflow-x: auto;\n  border-radius: 8px;\n  border: 1px solid var(--ion-color-light);\n  margin-top: 1rem;\n}\n\n.stock-table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 720px;\n\n  th {\n    background-color: var(--ion-color-light);\n    color: var(--ion-color-primary);\n    font-weight: 600;\n    padding: 10px 6px;\n    text-align: center;\n    border-bottom: 2px solid var(--ion-color-medium);\n    border-right: 1px solid var(--ion-color-light-shade);\n    font-size: 0.85rem;\n    white-space: nowrap;\n\n    &:last-child {\n      border-right: none;\n    }\n\n    &.sub-header {\n      background-color: #e3f2fd;\n      font-size: 0.75rem;\n      font-weight: 500;\n      padding: 8px 4px;\n      border-left: 1px solid var(--ion-color-light-shade);\n      text-align: center;\n    }\n  }\n\n  thead tr:first-child th:nth-child(2) {\n    text-align: left;\n  }\n\n  td {\n    padding: 10px 6px;\n    border-bottom: 1px solid var(--ion-color-light);\n    border-right: 1px solid var(--ion-color-light);\n    font-size: 0.85rem;\n    vertical-align: middle;\n    text-align: center;\n\n    &:last-child {\n      border-right: none;\n    }\n\n    &.serial-number {\n      font-weight: 600;\n      color: var(--ion-color-primary);\n    }\n\n    &.item-title {\n      text-align: left;\n      font-weight: 500;\n      color: var(--ion-color-dark);\n    }\n\n    &.unit {\n      font-weight: 500;\n      color: var(--ion-color-medium);\n    }\n\n    &.numeric {\n      font-variant-numeric: tabular-nums;\n      font-weight: 600;\n      text-align: center;\n\n      &.opening-balance {\n        color: var(--ion-color-primary);\n      }\n\n      &.supply-in, &.supply-in-inf, &.supply-in-warehouse {\n        color: var(--ion-color-success);\n      }\n\n      &.supply-out, &.supply-out-inf, &.supply-out-dp, &.supply-out-damage {\n        color: var(--ion-color-warning);\n      }\n\n      &.supply-in-dp {\n        color: var(--ion-color-success);\n      }\n\n      &.dp-distribution {\n        color: var(--ion-color-primary);\n        font-weight: 700;\n      }\n\n      &.closing {\n        color: var(--ion-color-tertiary);\n      }\n\n      &.available-stock {\n        color: var(--ion-color-primary);\n        font-weight: 700;\n      }\n\n      &.used-percentage {\n        .count-value {\n          font-weight: 700;\n          padding: 4px 10px;\n          border-radius: 6px;\n          display: inline-block;\n\n          &.progress-excellent {\n            color: #2dd36f;\n            background-color: rgba(45, 211, 111, 0.15);\n          }\n\n          &.progress-good {\n            color: #3880ff;\n            background-color: rgba(56, 128, 255, 0.15);\n          }\n\n          &.progress-moderate {\n            color: #ffc409;\n            background-color: rgba(255, 196, 9, 0.15);\n          }\n\n          &.progress-low {\n            color: #eb445a;\n            background-color: rgba(235, 68, 90, 0.15);\n          }\n        }\n      }\n    }\n  }\n\n  tbody tr {\n    transition: all 0.2s ease;\n\n    &:hover {\n      background-color: var(--ion-color-light-tint);\n    }\n\n    &:last-child td {\n      border-bottom: none;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .stock-table {\n    min-width: 600px;\n\n    th, td {\n      padding: 8px 4px;\n      font-size: 0.8rem;\n    }\n  }\n\n  .dashboard-table {\n    min-width: 500px;\n\n    th, td {\n      padding: 8px 4px;\n      font-size: 0.8rem;\n    }\n\n    td.total-count, td.today-count {\n      .count-value {\n        font-size: 0.95rem;\n\n        &.highlight-today {\n          padding: 3px 8px;\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 576px) {\n  .stock-table {\n    min-width: 500px;\n\n    th, td {\n      padding: 6px 3px;\n      font-size: 0.75rem;\n    }\n  }\n\n  .dashboard-table {\n    min-width: 400px;\n\n    th, td {\n      padding: 6px 3px;\n      font-size: 0.75rem;\n    }\n\n    td.total-count, td.today-count {\n      .count-value {\n        font-size: 0.9rem;\n\n        &.highlight-today {\n          padding: 2px 6px;\n        }\n      }\n    }\n  }\n}\n\n.section-header {\n  margin-bottom: 1.5rem;\n\n  .section-title {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: var(--ion-color-dark);\n    margin: 0 0 0.5rem 0;\n  }\n\n  .section-subtitle {\n    color: var(--ion-color-medium);\n    margin: 0;\n    font-size: 0.9rem;\n    display: flex;\n    align-items: center;\n    gap: 0.4rem;\n\n    ion-icon {\n      font-size: 1rem;\n    }\n  }\n}\n\n.empty-state {\n  text-align: center;\n  padding: 3rem 2rem;\n\n  ion-icon {\n    font-size: 4rem;\n    margin-bottom: 1rem;\n  }\n\n  h3 {\n    color: var(--ion-color-dark);\n    margin-bottom: 0.5rem;\n    font-size: 1.25rem;\n  }\n\n  p {\n    color: var(--ion-color-medium);\n    margin: 0;\n    font-size: 0.9rem;\n  }\n}\n\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 2rem;\n  text-align: center;\n\n  ion-spinner {\n    margin-bottom: 1rem;\n  }\n\n  p {\n    color: var(--ion-color-medium);\n    margin: 0;\n  }\n}\n\n/* Additional Responsive Design for Section Headers */\n@media (max-width: 768px) {\n  .section-header .section-title {\n    font-size: 1.25rem;\n  }\n\n  .section-header .section-subtitle {\n    font-size: 0.8rem;\n  }\n}\n\n@media (max-width: 768px) {\n  .filters-card {\n    ion-card-title {\n      font-size: 16px;\n    }\n\n    ion-card-subtitle {\n      font-size: 0.85rem;\n    }\n  }\n\n  .form-item {\n    margin-bottom: 12px;\n\n    ion-label {\n      font-size: 0.9rem;\n    }\n  }\n\n  .refresh-button {\n    height: 42px;\n    font-size: 0.9rem;\n  }\n\n  .quick-select-buttons {\n    grid-template-columns: repeat(3, 1fr);\n    gap: 6px;\n    margin-bottom: 14px;\n\n    ion-button {\n      height: 38px;\n      font-size: 0.8rem;\n\n      ion-icon {\n        font-size: 16px;\n      }\n    }\n  }\n\n  .date-range-badge {\n    padding: 12px 16px;\n    gap: 10px;\n\n    ion-icon {\n      font-size: 20px;\n    }\n\n    .date-range-label {\n      font-size: 0.85rem;\n    }\n\n    .date-range-value {\n      font-size: 1rem;\n    }\n\n    .items-count-badge {\n      font-size: 0.85rem;\n      padding: 5px 10px;\n    }\n  }\n}\n\n@media (max-width: 480px) {\n  .section-header .section-title {\n    font-size: 1.1rem;\n  }\n\n  .section-header .section-subtitle {\n    font-size: 0.75rem;\n  }\n\n  .filters-card {\n    ion-card-title {\n      font-size: 15px;\n    }\n\n    ion-card-subtitle {\n      font-size: 0.8rem;\n    }\n  }\n\n  .form-item {\n    margin-bottom: 10px;\n\n    ion-label {\n      font-size: 0.85rem;\n    }\n\n    ion-icon[slot=\"start\"] {\n      font-size: 18px;\n    }\n  }\n\n  .refresh-button {\n    height: 40px;\n    font-size: 0.85rem;\n  }\n\n  .quick-select-buttons {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 4px;\n    margin-bottom: 12px;\n\n    ion-button {\n      height: 36px;\n      font-size: 0.7rem;\n\n      ion-icon {\n        font-size: 16px;\n      }\n\n      span {\n        font-size: 0.7rem;\n        white-space: nowrap;\n      }\n\n      &::part(native) {\n        padding-left: 4px;\n        padding-right: 4px;\n      }\n    }\n  }\n\n  .date-range-display {\n    margin-bottom: 12px;\n  }\n\n  .date-range-badge {\n    flex-direction: column;\n    gap: 8px;\n    padding: 12px 14px;\n    text-align: center;\n\n    ion-icon {\n      font-size: 22px;\n    }\n\n    .date-range-label {\n      font-size: 0.75rem;\n    }\n\n    .date-range-value {\n      font-size: 0.9rem;\n      white-space: normal;\n      word-break: break-word;\n    }\n\n    .items-count-badge {\n      font-size: 0.8rem;\n      padding: 4px 10px;\n    }\n  }\n}\n\n/* Measurement Information Styles */\n.measurement-grid {\n  margin-top: 1rem;\n}\n\n.pbw-measurement-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n\n  ion-col {\n    display: flex;\n\n    > * {\n      width: 100%;\n    }\n  }\n}\n\n.measurement-box {\n  --measurement-accent: var(--ion-color-primary);\n  --measurement-accent-rgb: 56, 128, 255;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 0.9rem 1rem;\n  border-radius: 14px;\n  border: 1px solid rgba(0, 0, 0, 0.06);\n  background: linear-gradient(135deg, rgba(var(--measurement-accent-rgb), 0.08), rgba(var(--measurement-accent-rgb), 0.02));\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n  height: 100%;\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.measurement-icon {\n  width: 44px;\n  height: 44px;\n  border-radius: 11px;\n  background: rgba(var(--measurement-accent-rgb), 0.15);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.3rem;\n  color: var(--measurement-accent);\n  flex-shrink: 0;\n}\n\n.measurement-content {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1;\n}\n\n.measurement-label {\n  margin: 0;\n  font-size: 0.8rem;\n  font-weight: 600;\n  letter-spacing: 0.3px;\n  color: var(--ion-color-medium);\n  text-transform: uppercase;\n  line-height: 1.2;\n}\n\n.measurement-value {\n  margin: 0;\n  font-size: 1.7rem;\n  font-weight: 700;\n  color: var(--measurement-accent);\n  line-height: 1;\n}\n\n.disability-child,\n.disability-plw {\n  .measurement-label {\n    color: var(--measurement-accent);\n  }\n}\n\n.measurement-total {\n  --measurement-accent: #4a7ac2;\n  --measurement-accent-rgb: 74, 122, 194;\n}\n\n.measurement-boy {\n  --measurement-accent: #31b77c;\n  --measurement-accent-rgb: 49, 183, 124;\n}\n\n.measurement-girl {\n  --measurement-accent: #ec6ba4;\n  --measurement-accent-rgb: 236, 107, 164;\n}\n\n.measurement-sam {\n  --measurement-accent: #e45858;\n  --measurement-accent-rgb: 228, 88, 88;\n}\n\n.measurement-mam {\n  --measurement-accent: #f3a712;\n  --measurement-accent-rgb: 243, 167, 18;\n}\n\n.measurement-normal {\n  --measurement-accent: #43c466;\n  --measurement-accent-rgb: 67, 196, 102;\n}\n\n.measurement-wasting {\n  --measurement-accent: #ff7b3f;\n  --measurement-accent-rgb: 255, 123, 63;\n}\n\n.measurement-stunting {\n  --measurement-accent: #7b5ed1;\n  --measurement-accent-rgb: 123, 94, 209;\n}\n\n.measurement-underweight {\n  --measurement-accent: #2aa4b1;\n  --measurement-accent-rgb: 42, 164, 177;\n}\n\n.disability-child {\n  --measurement-accent: #6a4c93;\n  --measurement-accent-rgb: 106, 76, 147;\n}\n\n.disability-plw {\n  --measurement-accent: #8e44ad;\n  --measurement-accent-rgb: 142, 68, 173;\n}\n\n.verified-child {\n  --measurement-accent: #28a745;\n  --measurement-accent-rgb: 40, 167, 69;\n}\n\n.verified-plw {\n  --measurement-accent: #20c997;\n  --measurement-accent-rgb: 32, 201, 151;\n}\n\n.home-visit {\n  --measurement-accent: #17a2b8;\n  --measurement-accent-rgb: 23, 162, 184;\n}\n\n.exit-interview {\n  --measurement-accent: #fd7e14;\n  --measurement-accent-rgb: 253, 126, 20;\n}\n\n@media (max-width: 992px) {\n  .measurement-box {\n    padding: 0.8rem 0.9rem;\n    gap: 10px;\n  }\n\n  .measurement-icon {\n    width: 40px;\n    height: 40px;\n    font-size: 1.2rem;\n  }\n\n  .measurement-label {\n    font-size: 0.75rem;\n  }\n\n  .measurement-value {\n    font-size: 1.55rem;\n  }\n}\n\n@media (max-width: 768px) {\n  .measurement-box {\n    padding: 0.7rem 0.8rem;\n    gap: 9px;\n    border-radius: 12px;\n  }\n\n  .measurement-icon {\n    width: 38px;\n    height: 38px;\n    font-size: 1.15rem;\n    border-radius: 10px;\n  }\n\n  .measurement-label {\n    font-size: 0.7rem;\n    letter-spacing: 0.2px;\n  }\n\n  .measurement-value {\n    font-size: 1.4rem;\n  }\n}\n\n@media (max-width: 576px) {\n  .measurement-box {\n    flex-direction: row;\n    padding: 0.65rem 0.75rem;\n    gap: 8px;\n  }\n\n  .measurement-icon {\n    width: 36px;\n    height: 36px;\n    font-size: 1.1rem;\n    border-radius: 9px;\n  }\n\n  .measurement-label {\n    font-size: 0.65rem;\n    letter-spacing: 0.15px;\n  }\n\n  .measurement-value {\n    font-size: 1.25rem;\n  }\n}\n\n@media (max-width: 480px) {\n  .measurement-box {\n    padding: 0.6rem 0.7rem;\n    gap: 7px;\n  }\n\n  .measurement-icon {\n    width: 34px;\n    height: 34px;\n    font-size: 1.05rem;\n    border-radius: 8px;\n  }\n\n  .measurement-label {\n    font-size: 0.6rem;\n  }\n\n  .measurement-value {\n    font-size: 1.15rem;\n  }\n}\n\n@media (max-width: 400px) {\n  .measurement-box {\n    padding: 0.55rem 0.65rem;\n    gap: 6px;\n  }\n\n  .measurement-icon {\n    width: 32px;\n    height: 32px;\n    font-size: 1rem;\n  }\n\n  .measurement-label {\n    font-size: 0.58rem;\n  }\n\n  .measurement-value {\n    font-size: 1.1rem;\n  }\n}\n\n.gmp-table-container {\n  margin-top: 1.5rem;\n  border: 1px solid rgba(0, 0, 0, 0.06);\n  border-radius: 12px;\n  padding: 1rem;\n  background: rgba(var(--ion-color-primary-rgb), 0.02);\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n}\n\n.gmp-table-header {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin-bottom: 0.75rem;\n\n  ion-icon {\n    font-size: 1.8rem;\n  }\n\n  .gmp-table-title {\n    margin: 0;\n    font-weight: 600;\n    color: var(--ion-color-dark);\n  }\n\n  .gmp-table-subtitle {\n    margin: 0;\n    font-size: 0.85rem;\n    color: var(--ion-color-medium);\n  }\n}\n\n.gmp-table {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.gmp-table-row {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr 1.5fr;\n  gap: 0.75rem;\n  align-items: center;\n  padding: 0.5rem 0.75rem;\n  border-radius: 8px;\n  background: white;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n\n  &--head {\n    background: rgba(var(--ion-color-primary-rgb), 0.08);\n    box-shadow: none;\n    font-weight: 600;\n    color: var(--ion-color-primary);\n  }\n}\n\n.gmp-cell {\n  font-size: 0.9rem;\n  color: var(--ion-color-dark);\n}\n\n.gmp-progress {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n\n  span {\n    min-width: 3ch;\n    text-align: right;\n  }\n}\n\n.gmp-progress-bar {\n  flex: 1;\n  height: 8px;\n  background: rgba(var(--ion-color-primary-rgb), 0.15);\n  border-radius: 999px;\n  overflow: hidden;\n}\n\n.gmp-progress-fill {\n  height: 100%;\n  border-radius: 999px;\n  background: linear-gradient(90deg, var(--ion-color-success), var(--ion-color-primary));\n  transition: width 0.3s ease;\n}\n\n@media (max-width: 768px) {\n  .gmp-table-row {\n    grid-template-columns: 1fr 0.8fr 0.8fr;\n    grid-template-areas:\n      'title title title'\n      'target achievement progress';\n\n    .gmp-title {\n      grid-area: title;\n      font-weight: 600;\n    }\n\n    .gmp-target {\n      grid-area: target;\n    }\n\n    .gmp-achievement {\n      grid-area: achievement;\n    }\n\n    .gmp-progress {\n      grid-area: progress;\n    }\n  }\n}\n\n\n/* Parent-Child Measurement Structure with Chips Inside */\n.measurement-parent {\n  border: 2px solid rgba(var(--measurement-accent-rgb), 0.3);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);\n  flex-direction: column;\n  padding: 0.9rem 1rem 0.7rem;\n  gap: 0;\n}\n\n.measurement-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 0.65rem;\n}\n\n.measurement-children-chips {\n  margin-top: 0.45rem;\n  padding: 0;\n  width: 100%;\n}\n\n.measurement-chip {\n  --background: rgba(255, 255, 255, 0.6);\n  --color: var(--ion-color-dark);\n  border: 1px solid rgba(67, 196, 102, 0.4);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);\n  height: 100%;\n  width: 100%;\n  padding: 7px 9px;\n  border-radius: 9px;\n  transition: all 0.2s ease;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n    border-color: rgba(67, 196, 102, 0.6);\n    --background: rgba(255, 255, 255, 0.8);\n  }\n\n  ion-icon {\n    font-size: 1.2rem;\n    color: #43c466;\n    margin-right: 0;\n    margin-bottom: 3px;\n  }\n\n  ion-label {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 3px;\n    margin: 0;\n    width: 100%;\n    text-align: center;\n  }\n\n  .chip-title {\n    font-size: 0.7rem;\n    font-weight: 600;\n    color: var(--ion-color-dark);\n    letter-spacing: 0.15px;\n    line-height: 1.15;\n  }\n\n  .chip-value {\n    font-size: 1.2rem;\n    font-weight: 700;\n    color: #43c466;\n    white-space: nowrap;\n  }\n}\n\n@media (max-width: 992px) {\n  .measurement-parent {\n    padding: 0.8rem 0.9rem 0.65rem;\n  }\n\n  .measurement-header {\n    margin-bottom: 0.6rem;\n    gap: 10px;\n  }\n\n  .measurement-children-chips {\n    margin-top: 0.4rem;\n  }\n\n  .measurement-chip {\n    padding: 6px 8px;\n\n    ion-icon {\n      font-size: 1.15rem;\n    }\n\n    .chip-title {\n      font-size: 0.67rem;\n    }\n\n    .chip-value {\n      font-size: 1.15rem;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .measurement-parent {\n    padding: 0.7rem 0.8rem 0.6rem;\n  }\n\n  .measurement-header {\n    margin-bottom: 0.55rem;\n    gap: 9px;\n  }\n\n  .measurement-children-chips {\n    margin-top: 0.38rem;\n  }\n\n  .measurement-chip {\n    padding: 5px 7px;\n    border-radius: 8px;\n\n    ion-icon {\n      font-size: 1.1rem;\n      margin-bottom: 3px;\n    }\n\n    .chip-title {\n      font-size: 0.62rem;\n      letter-spacing: 0.1px;\n    }\n\n    .chip-value {\n      font-size: 1.05rem;\n    }\n  }\n}\n\n@media (max-width: 576px) {\n  .measurement-parent {\n    padding: 0.65rem 0.75rem 0.55rem;\n  }\n\n  .measurement-header {\n    margin-bottom: 0.5rem;\n    gap: 8px;\n  }\n\n  .measurement-children-chips {\n    margin-top: 0.35rem;\n  }\n\n  .measurement-chip {\n    padding: 5px 6px;\n    border-radius: 7px;\n\n    ion-icon {\n      font-size: 1.05rem;\n      margin-bottom: 2px;\n    }\n\n    ion-label {\n      gap: 2px;\n    }\n\n    .chip-title {\n      font-size: 0.58rem;\n    }\n\n    .chip-value {\n      font-size: 1rem;\n    }\n  }\n}\n\n@media (max-width: 480px) {\n  .measurement-parent {\n    padding: 0.6rem 0.7rem 0.5rem;\n  }\n\n  .measurement-header {\n    gap: 7px;\n  }\n\n  .measurement-chip {\n    padding: 4px 5px;\n\n    ion-icon {\n      font-size: 1rem;\n    }\n\n    .chip-title {\n      font-size: 0.55rem;\n    }\n\n    .chip-value {\n      font-size: 0.95rem;\n    }\n  }\n}\n\n@media (max-width: 400px) {\n  .measurement-parent {\n    padding: 0.55rem 0.65rem 0.45rem;\n  }\n\n  .measurement-header {\n    gap: 6px;\n  }\n\n  .measurement-chip {\n    padding: 4px 5px;\n\n    ion-icon {\n      font-size: 0.95rem;\n      margin-bottom: 2px;\n    }\n\n    ion-label {\n      gap: 2px;\n    }\n\n    .chip-title {\n      font-size: 0.52rem;\n    }\n\n    .chip-value {\n      font-size: 0.9rem;\n    }\n  }\n}\n\n/* Program Summary Grid-Based Styles */\n.program-subtitle-with-badge {\n  display: flex !important;\n  align-items: center !important;\n  justify-content: space-between !important;\n  flex-wrap: wrap !important;\n  gap: 0.5rem !important;\n}\n\n.program-total-badge {\n  font-size: 1rem !important;\n  font-weight: 700 !important;\n  padding: 7px 14px !important;\n  margin-left: 0 !important;\n  border-radius: 8px !important;\n  box-shadow: 0 2px 8px rgba(56, 128, 255, 0.3) !important;\n}\n\n.program-grid {\n  display: grid;\n  gap: 0.85rem;\n\n  &.program-grid-3col {\n    grid-template-columns: repeat(3, 1fr);\n  }\n\n  &.program-grid-2col {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n.program-card {\n  border-radius: 10px;\n  background: white;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n  display: flex;\n  flex-direction: column;\n\n  &:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);\n  }\n\n  &.program-danger {\n    background: linear-gradient(135deg, rgba(240, 65, 65, 0.06), rgba(240, 65, 65, 0.02));\n    border-color: rgba(240, 65, 65, 0.25);\n\n    .program-color-bar {\n      background: var(--ion-color-danger);\n    }\n\n    .program-name {\n      color: var(--ion-color-danger);\n    }\n\n    .stat-value {\n      color: var(--ion-color-danger);\n    }\n  }\n\n  &.program-warning {\n    background: linear-gradient(135deg, rgba(255, 206, 0, 0.06), rgba(255, 206, 0, 0.02));\n    border-color: rgba(255, 206, 0, 0.25);\n\n    .program-color-bar {\n      background: var(--ion-color-warning);\n    }\n\n    .program-name {\n      color: #d39e00;\n    }\n\n    .stat-value {\n      color: #d39e00;\n    }\n  }\n\n  &.program-success {\n    background: linear-gradient(135deg, rgba(57, 192, 176, 0.06), rgba(57, 192, 176, 0.02));\n    border-color: rgba(57, 192, 176, 0.25);\n\n    .program-color-bar {\n      background: var(--ion-color-success);\n    }\n\n    .program-name {\n      color: var(--ion-color-success);\n    }\n\n    .stat-value {\n      color: var(--ion-color-success);\n    }\n  }\n}\n\n.program-color-bar {\n  height: 4px;\n  width: 100%;\n}\n\n.program-card-content {\n  padding: 0.85rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.7rem;\n}\n\n.program-name {\n  font-size: 1.2rem;\n  font-weight: 700;\n  letter-spacing: 0.8px;\n  text-transform: uppercase;\n  text-align: center;\n  padding-bottom: 0.55rem;\n  border-bottom: 2px solid rgba(0, 0, 0, 0.08);\n}\n\n.program-stats {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.program-stat {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.5rem 0.65rem;\n  background: rgba(255, 255, 255, 0.7);\n  border-radius: 7px;\n  border: 1px solid rgba(0, 0, 0, 0.05);\n\n  .stat-label {\n    font-size: 0.7rem;\n    font-weight: 600;\n    color: var(--ion-color-medium);\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n  }\n\n  .stat-value {\n    font-size: 1.25rem;\n    font-weight: 700;\n    line-height: 1;\n  }\n\n  &.program-stat-full {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.45rem;\n\n    .stat-label {\n      width: 100%;\n    }\n  }\n}\n\n.program-progress-container {\n  display: flex;\n  align-items: center;\n  gap: 0.65rem;\n  width: 100%;\n\n  .stat-value {\n    min-width: 3.2rem;\n    text-align: right;\n    font-size: 1rem;\n  }\n}\n\n.program-progress-bar {\n  flex: 1;\n  height: 9px;\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: 999px;\n  overflow: hidden;\n}\n\n.program-progress-fill {\n  height: 100%;\n  border-radius: 999px;\n  background: linear-gradient(90deg, var(--ion-color-primary), var(--ion-color-secondary));\n  transition: width 0.4s ease;\n}\n\n.program-danger .program-progress-fill {\n  background: linear-gradient(90deg, #f04141, #ff6b6b);\n}\n\n.program-warning .program-progress-fill {\n  background: linear-gradient(90deg, #ffce00, #ffd700);\n}\n\n.program-success .program-progress-fill {\n  background: linear-gradient(90deg, #39c0b0, #4dd0c1);\n}\n\n// Tablet responsive (992px and below)\n@media (max-width: 992px) {\n  .program-total-badge {\n    font-size: 0.95rem !important;\n    padding: 6px 12px !important;\n  }\n\n  .program-grid {\n    gap: 0.75rem;\n\n    &.program-grid-3col {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    &.program-grid-2col {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .program-card-content {\n    padding: 0.75rem;\n    gap: 0.65rem;\n  }\n\n  .program-name {\n    font-size: 1.1rem;\n    letter-spacing: 0.6px;\n    padding-bottom: 0.5rem;\n  }\n\n  .program-stat {\n    padding: 0.45rem 0.6rem;\n\n    .stat-label {\n      font-size: 0.65rem;\n      letter-spacing: 0.3px;\n    }\n\n    .stat-value {\n      font-size: 1.15rem;\n    }\n  }\n\n  .program-progress-container {\n    gap: 0.55rem;\n\n    .stat-value {\n      font-size: 0.95rem;\n      min-width: 3rem;\n    }\n  }\n\n  .program-progress-bar {\n    height: 8px;\n  }\n}\n\n// Mobile responsive (768px and below)\n@media (max-width: 768px) {\n  .program-total-badge {\n    font-size: 0.9rem !important;\n    padding: 5px 11px !important;\n  }\n\n  .program-grid {\n    gap: 0.65rem;\n\n    &.program-grid-3col {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    &.program-grid-2col {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .program-card {\n    border-radius: 8px;\n  }\n\n  .program-color-bar {\n    height: 3px;\n  }\n\n  .program-card-content {\n    padding: 0.65rem;\n    gap: 0.55rem;\n  }\n\n  .program-name {\n    font-size: 0.95rem;\n    letter-spacing: 0.4px;\n    padding-bottom: 0.4rem;\n  }\n\n  .program-stats {\n    gap: 0.4rem;\n  }\n\n  .program-stat {\n    padding: 0.38rem 0.5rem;\n\n    .stat-label {\n      font-size: 0.5rem;\n      letter-spacing: 0.1px;\n      line-height: 1.15;\n    }\n\n    .stat-value {\n      font-size: 1rem;\n    }\n\n    &.program-stat-full {\n      gap: 0.35rem;\n    }\n  }\n\n  .program-progress-container {\n    gap: 0.4rem;\n\n    .stat-value {\n      font-size: 0.75rem;\n      min-width: 2.2rem;\n    }\n  }\n\n  .program-progress-bar {\n    height: 6px;\n  }\n}\n\n// Small mobile responsive (576px and below)\n@media (max-width: 576px) {\n  .program-total-badge {\n    font-size: 0.85rem !important;\n    padding: 5px 10px !important;\n  }\n\n  .program-grid {\n    gap: 0.6rem;\n\n    &.program-grid-3col {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    &.program-grid-2col {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .program-card {\n    border-radius: 8px;\n  }\n\n  .program-card-content {\n    padding: 0.6rem;\n    gap: 0.5rem;\n  }\n\n  .program-name {\n    font-size: 0.85rem;\n    letter-spacing: 0.3px;\n    padding-bottom: 0.35rem;\n  }\n\n  .program-stats {\n    gap: 0.35rem;\n  }\n\n  .program-stat {\n    padding: 0.35rem 0.45rem;\n\n    .stat-label {\n      font-size: 0.48rem;\n      letter-spacing: 0.1px;\n      line-height: 1.1;\n    }\n\n    .stat-value {\n      font-size: 0.95rem;\n    }\n\n    &.program-stat-full {\n      gap: 0.3rem;\n    }\n  }\n\n  .program-progress-container {\n    gap: 0.35rem;\n\n    .stat-value {\n      font-size: 0.7rem;\n      min-width: 2rem;\n    }\n  }\n\n  .program-progress-bar {\n    height: 5px;\n  }\n}\n\n// Extra small mobile (480px and below)\n@media (max-width: 480px) {\n  .program-total-badge {\n    font-size: 0.8rem !important;\n    padding: 4px 9px !important;\n  }\n\n  .program-grid {\n    gap: 0.55rem;\n\n    &.program-grid-3col {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    &.program-grid-2col {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .program-card-content {\n    padding: 0.55rem;\n    gap: 0.45rem;\n  }\n\n  .program-name {\n    font-size: 0.8rem;\n    letter-spacing: 0.2px;\n    padding-bottom: 0.3rem;\n  }\n\n  .program-stats {\n    gap: 0.3rem;\n  }\n\n  .program-stat {\n    padding: 0.3rem 0.4rem;\n\n    .stat-label {\n      font-size: 0.45rem;\n      letter-spacing: 0.05px;\n      line-height: 1.1;\n    }\n\n    .stat-value {\n      font-size: 0.9rem;\n    }\n\n    &.program-stat-full {\n      gap: 0.28rem;\n    }\n  }\n\n  .program-progress-container {\n    gap: 0.3rem;\n\n    .stat-value {\n      font-size: 0.65rem;\n      min-width: 1.9rem;\n    }\n  }\n\n  .program-progress-bar {\n    height: 4px;\n  }\n}\n"],"sourceRoot":""}]);
// Exports
module.exports = ___CSS_LOADER_EXPORT___.toString();


/***/ }),

/***/ 68395:
/*!******************************************************!*\
  !*** ./src/app/pages/home/home.page.html?ngResource ***!
  \******************************************************/
/***/ ((module) => {

"use strict";
module.exports = "<ion-header class=\"ion-no-border\">\n  <ion-toolbar color=\"light\">\n    <ion-buttons slot=\"start\">\n      <ion-menu-button color=\"primary\"></ion-menu-button>\n    </ion-buttons>\n    <ion-title class=\"ion-text-center ion-text-uppercase\" color=\"primary\">\n      Dashboard\n    </ion-title>\n    <ion-buttons slot=\"end\" *ngIf=\"!shouldShowStoreKeeperDashboard() && !shouldShowSCManagerDashboard()\">\n      <ion-button (click)=\"refreshData()\" [disabled]=\"loading\">\n        <ion-icon slot=\"icon-only\" [name]=\"icons.REFRESH\" color=\"primary\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [fullscreen]=\"true\" class=\"ion-padding\">\n\n  <!-- Pull to Refresh -->\n  <ion-refresher slot=\"fixed\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content\n      pullingIcon=\"chevron-down-circle-outline\"\n      pullingText=\"Pull to refresh\"\n      refreshingSpinner=\"circles\"\n      refreshingText=\"Refreshing...\">\n    </ion-refresher-content>\n  </ion-refresher>\n\n  <!-- Store Keeper Stock Summary -->\n  <div class=\"stats-container\" *ngIf=\"shouldShowStoreKeeperDashboard()\">\n    <div class=\"section-header\">\n      <h2 class=\"section-title\">\n        <ion-icon [name]=\"icons.CUBE\" color=\"primary\"></ion-icon>\n        Stock Summary\n      </h2>\n      <p class=\"section-subtitle\">Track opening, issued and closing stock for each item</p>\n    </div>\n\n    <ion-card class=\"filters-card\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.FILTER\" color=\"primary\"></ion-icon>\n          Report Filters\n        </ion-card-title>\n        <ion-card-subtitle>Select date range to view stock report</ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <!-- Quick Select Buttons -->\n        <div class=\"quick-select-buttons\">\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('today')\"\n            [color]=\"dateRangeType === 'today' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.TODAY\" slot=\"start\"></ion-icon>\n            <span>Today</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('week')\"\n            [color]=\"dateRangeType === 'week' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.CALENDAR\" slot=\"start\"></ion-icon>\n            <span>This Week</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('month')\"\n            [color]=\"dateRangeType === 'month' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.CALENDAR_NUMBER\" slot=\"start\"></ion-icon>\n            <span>This Month</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('6months')\"\n            [color]=\"dateRangeType === '6months' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.TIME\" slot=\"start\"></ion-icon>\n            <span>Last 6 Months</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('year')\"\n            [color]=\"dateRangeType === 'year' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.CALENDAR_CLEAR\" slot=\"start\"></ion-icon>\n            <span>Last 1 Year</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('custom')\"\n            [color]=\"dateRangeType === 'custom' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.OPTIONS\" slot=\"start\"></ion-icon>\n            <span>Custom</span>\n          </ion-button>\n        </div>\n\n        <!-- Date Range Inputs -->\n        <ion-row>\n          <ion-col size=\"12\" size-md=\"6\">\n            <ion-item class=\"form-item\">\n              <ion-icon slot=\"start\" [name]=\"icons.CALENDAR\" color=\"primary\"></ion-icon>\n              <ion-label position=\"stacked\">Start Date</ion-label>\n              <ion-input\n                type=\"date\"\n                [(ngModel)]=\"reportStartDate\"\n                (ionChange)=\"onDateRangeChange()\"\n                [disabled]=\"loadingStockReport || dateRangeType !== 'custom'\"\n                placeholder=\"Select start date\">\n              </ion-input>\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"12\" size-md=\"6\">\n            <ion-item class=\"form-item\">\n              <ion-icon slot=\"start\" [name]=\"icons.CALENDAR\" color=\"primary\"></ion-icon>\n              <ion-label position=\"stacked\">End Date</ion-label>\n              <ion-input\n                type=\"date\"\n                [(ngModel)]=\"reportEndDate\"\n                (ionChange)=\"onDateRangeChange()\"\n                [disabled]=\"loadingStockReport || dateRangeType !== 'custom'\"\n                placeholder=\"Select end date\">\n              </ion-input>\n            </ion-item>\n          </ion-col>\n        </ion-row>\n\n        <!-- Refresh Button -->\n        <ion-row>\n          <ion-col size=\"12\">\n            <ion-button\n              expand=\"block\"\n              color=\"primary\"\n              (click)=\"loadStorekeeperStockReport()\"\n              [disabled]=\"loadingStockReport || !reportStartDate || !reportEndDate\"\n              class=\"refresh-button\">\n              <ion-icon slot=\"start\" [name]=\"icons.REFRESH\"></ion-icon>\n              Load Report\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <ion-card *ngIf=\"loadingStockReport\">\n      <ion-card-content>\n        <div class=\"loading-container\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          <p>Loading stock report...</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Date Range Display -->\n    <div class=\"date-range-display\" *ngIf=\"reportStartDate && reportEndDate && stockReportData && stockReportData.length > 0\">\n      <div class=\"date-range-badge\">\n        <ion-icon [name]=\"icons.CALENDAR\"></ion-icon>\n        <span class=\"date-range-label\">Report Period:</span>\n        <span class=\"date-range-value\">\n          {{ reportStartDate === reportEndDate\n            ? (reportStartDate | date:'dd MMM yyyy')\n            : (reportStartDate | date:'dd MMM yyyy') + ' - ' + (reportEndDate | date:'dd MMM yyyy')\n          }}\n        </span>\n        <ion-badge color=\"primary\" class=\"items-count-badge\">\n          {{ stockReportData?.length || 0 }} items\n        </ion-badge>\n      </div>\n    </div>\n\n    <ion-card *ngIf=\"!loadingStockReport && stockReportData && stockReportData.length > 0\">\n      <ion-card-content>\n        <div class=\"stock-table-container\">\n          <table class=\"stock-table\">\n            <thead>\n              <tr>\n                <th rowspan=\"2\">#</th>\n                <th rowspan=\"2\">Item</th>\n                <th rowspan=\"2\">Unit</th>\n                <th rowspan=\"2\">Opening</th>\n                <th colspan=\"3\">Supply In</th>\n                <th colspan=\"4\">Supply Out</th>\n                <th rowspan=\"2\">Closing</th>\n              </tr>\n              <tr>\n                <th class=\"sub-header\">INF</th>\n                <th class=\"sub-header\">Warehouse</th>\n                <th class=\"sub-header\">Total</th>\n                <th class=\"sub-header\">INF</th>\n                <th class=\"sub-header\">DP</th>\n                <th class=\"sub-header\">Damage</th>\n                <th class=\"sub-header\">Total</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of stockReportData; let i = index\">\n                <td class=\"serial-number\">{{ i + 1 }}</td>\n                <td class=\"item-title\">{{ item.item_name }}</td>\n                <td class=\"unit\">{{ item.unit }}</td>\n                <td class=\"numeric opening-balance\">{{ item.opening_stock | number:'1.0-2' }}</td>\n                <td class=\"numeric supply-in-inf\">{{ item.supply_in_inf | number:'1.0-2' }}</td>\n                <td class=\"numeric supply-in-warehouse\">{{ item.supply_in_warehouse | number:'1.0-2' }}</td>\n                <td class=\"numeric supply-in\">{{ (item.supply_in_inf + item.supply_in_warehouse) | number:'1.0-2' }}</td>\n                <td class=\"numeric supply-out-inf\">{{ item.supply_out_inf | number:'1.0-2' }}</td>\n                <td class=\"numeric supply-out-dp\">{{ item.supply_out_dp_net | number:'1.0-2' }}</td>\n                <td class=\"numeric supply-out-damage\">{{ item.supply_out_damage | number:'1.0-2' }}</td>\n                <td class=\"numeric supply-out\">{{ (item.supply_out_inf + item.supply_out_dp_net + item.supply_out_damage) | number:'1.0-2' }}</td>\n                <td class=\"numeric closing\">{{ item.closing_stock | number:'1.0-2' }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <ion-card *ngIf=\"!loadingStockReport && (!stockReportData || stockReportData.length === 0)\">\n      <ion-card-content>\n        <div class=\"empty-state\">\n          <ion-icon [name]=\"icons.CUBE\" color=\"medium\"></ion-icon>\n          <h3>No Stock Data</h3>\n          <p>No stock transactions recorded for the selected date.</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- DP Distribution Summary -->\n    <ion-card *ngIf=\"!loadingStockReport && stockReportData && stockReportData.length > 0\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.BASKET\" color=\"primary\"></ion-icon>\n          DP Distribution Summary\n        </ion-card-title>\n        <ion-card-subtitle>Track supplies sent to and returned from Distribution Points</ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <div class=\"stock-table-container\">\n          <table class=\"stock-table\">\n            <thead>\n              <tr>\n                <th>#</th>\n                <th>Item</th>\n                <th>Unit</th>\n                <th>Supply Out to DP</th>\n                <th>Return from DP</th>\n                <th>Total Distribution</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of stockReportData; let i = index\">\n                <td class=\"serial-number\">{{ i + 1 }}</td>\n                <td class=\"item-title\">{{ item.item_name }}</td>\n                <td class=\"unit\">{{ item.unit }}</td>\n                <td class=\"numeric supply-out-dp\">{{ item.dp_supply_out | number:'1.0-2' }}</td>\n                <td class=\"numeric supply-in-dp\">{{ item.dp_return | number:'1.0-2' }}</td>\n                <td class=\"numeric dp-distribution\">{{ item.dp_total_distribution | number:'1.0-2' }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </ion-card-content>\n    </ion-card>\n  </div>\n\n  <!-- SC Manager Dashboard -->\n  <div class=\"stats-container\" *ngIf=\"shouldShowSCManagerDashboard()\">\n    <div class=\"section-header\">\n      <h2 class=\"section-title\">\n        <ion-icon [name]=\"icons.MEDICAL\" color=\"primary\"></ion-icon>\n        Stabilization Center Dashboard\n      </h2>\n      <p class=\"section-subtitle\">Monitor admissions, discharges, and patient status</p>\n    </div>\n\n    <ion-card class=\"filters-card\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.FILTER\" color=\"primary\"></ion-icon>\n          Report Filters\n        </ion-card-title>\n        <ion-card-subtitle>Select date range to view statistics</ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <!-- Quick Select Buttons -->\n        <div class=\"quick-select-buttons\">\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('today')\"\n            [color]=\"dateRangeType === 'today' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.TODAY\" slot=\"start\"></ion-icon>\n            <span>Today</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('week')\"\n            [color]=\"dateRangeType === 'week' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.CALENDAR\" slot=\"start\"></ion-icon>\n            <span>This Week</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('month')\"\n            [color]=\"dateRangeType === 'month' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.CALENDAR_NUMBER\" slot=\"start\"></ion-icon>\n            <span>This Month</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('6months')\"\n            [color]=\"dateRangeType === '6months' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.TIME\" slot=\"start\"></ion-icon>\n            <span>Last 6 Months</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('year')\"\n            [color]=\"dateRangeType === 'year' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.CALENDAR_CLEAR\" slot=\"start\"></ion-icon>\n            <span>Last 1 Year</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('custom')\"\n            [color]=\"dateRangeType === 'custom' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.OPTIONS\" slot=\"start\"></ion-icon>\n            <span>Custom</span>\n          </ion-button>\n        </div>\n\n        <!-- Date Range Inputs -->\n        <ion-row>\n          <ion-col size=\"12\" size-md=\"6\">\n            <ion-item class=\"form-item\">\n              <ion-icon slot=\"start\" [name]=\"icons.CALENDAR\" color=\"primary\"></ion-icon>\n              <ion-label position=\"stacked\">Start Date</ion-label>\n              <ion-input\n                type=\"date\"\n                [(ngModel)]=\"reportStartDate\"\n                (ionChange)=\"onDateRangeChange()\"\n                [disabled]=\"loadingSCDashboard || dateRangeType !== 'custom'\"\n                placeholder=\"Select start date\">\n              </ion-input>\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"12\" size-md=\"6\">\n            <ion-item class=\"form-item\">\n              <ion-icon slot=\"start\" [name]=\"icons.CALENDAR\" color=\"primary\"></ion-icon>\n              <ion-label position=\"stacked\">End Date</ion-label>\n              <ion-input\n                type=\"date\"\n                [(ngModel)]=\"reportEndDate\"\n                (ionChange)=\"onDateRangeChange()\"\n                [disabled]=\"loadingSCDashboard || dateRangeType !== 'custom'\"\n                placeholder=\"Select end date\">\n              </ion-input>\n            </ion-item>\n          </ion-col>\n        </ion-row>\n\n        <!-- Refresh Button -->\n        <ion-row>\n          <ion-col size=\"12\">\n            <ion-button\n              expand=\"block\"\n              color=\"primary\"\n              (click)=\"loadSCManagerDashboard()\"\n              [disabled]=\"loadingSCDashboard || !reportStartDate || !reportEndDate\"\n              class=\"refresh-button\">\n              <ion-icon slot=\"start\" [name]=\"icons.REFRESH\"></ion-icon>\n              Load Dashboard\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <ion-card *ngIf=\"loadingSCDashboard\">\n      <ion-card-content>\n        <div class=\"loading-container\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          <p>Loading dashboard...</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Date Range Display -->\n    <div class=\"date-range-display\" *ngIf=\"reportStartDate && reportEndDate && scStatistics && scStatistics.length > 0\">\n      <div class=\"date-range-badge\">\n        <ion-icon [name]=\"icons.CALENDAR\"></ion-icon>\n        <span class=\"date-range-label\">Report Period:</span>\n        <span class=\"date-range-value\">\n          {{ reportStartDate === reportEndDate\n            ? (reportStartDate | date:'dd MMM yyyy')\n            : (reportStartDate | date:'dd MMM yyyy') + ' - ' + (reportEndDate | date:'dd MMM yyyy')\n          }}\n        </span>\n      </div>\n    </div>\n\n    <!-- SC Statistics -->\n    <ion-card *ngIf=\"!loadingSCDashboard && scStatistics && scStatistics.length > 0\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.MEDICAL\" color=\"primary\"></ion-icon>\n          Stabilization Center Statistics\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-row class=\"measurement-grid\">\n          <ion-col size=\"6\" size-md=\"4\" *ngFor=\"let stat of scStatistics\">\n            <div class=\"measurement-box\" [ngClass]=\"'measurement-' + stat.color\">\n              <div class=\"measurement-value\">\n                {{ stat.count }}\n                <span class=\"measurement-unit\" *ngIf=\"stat.unit\">{{stat.unit}}</span>\n              </div>\n              <div class=\"measurement-label\">\n                <ion-icon [name]=\"stat.icon\" [color]=\"stat.color\"></ion-icon>\n                {{ stat.title }}\n              </div>\n            </div>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Empty State -->\n    <ion-card *ngIf=\"!loadingSCDashboard && (!scStatistics || scStatistics.length === 0)\">\n      <ion-card-content>\n        <div class=\"empty-state\">\n          <ion-icon [name]=\"icons.MEDICAL\" color=\"medium\"></ion-icon>\n          <h3>No Data</h3>\n          <p>No statistics available for the selected date range.</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n  </div>\n\n  <!-- Dashboard -->\n  <div class=\"stats-container\" *ngIf=\"!shouldShowStoreKeeperDashboard() && !shouldShowSCManagerDashboard()\">\n    <div class=\"section-header\">\n      <h2 class=\"section-title\">\n        <ion-icon [name]=\"icons.STATS_CHART\" color=\"primary\"></ion-icon>\n        Dashboard\n      </h2>\n      <p class=\"section-subtitle\">Track general information, services, and distributions</p>\n    </div>\n\n    <ion-card class=\"filters-card\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.FILTER\" color=\"primary\"></ion-icon>\n          Report Filters\n        </ion-card-title>\n        <ion-card-subtitle>Select date range to view dashboard data</ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <!-- Quick Select Buttons -->\n        <div class=\"quick-select-buttons\">\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('today')\"\n            [color]=\"dateRangeType === 'today' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.TODAY\" slot=\"start\"></ion-icon>\n            <span>Today</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('week')\"\n            [color]=\"dateRangeType === 'week' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.CALENDAR\" slot=\"start\"></ion-icon>\n            <span>This Week</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('month')\"\n            [color]=\"dateRangeType === 'month' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.CALENDAR_NUMBER\" slot=\"start\"></ion-icon>\n            <span>This Month</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('6months')\"\n            [color]=\"dateRangeType === '6months' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.TIME\" slot=\"start\"></ion-icon>\n            <span>Last 6 Months</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('year')\"\n            [color]=\"dateRangeType === 'year' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.CALENDAR_CLEAR\" slot=\"start\"></ion-icon>\n            <span>Last 1 Year</span>\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"setDateRange('custom')\"\n            [color]=\"dateRangeType === 'custom' ? 'primary' : 'medium'\">\n            <ion-icon [name]=\"icons.OPTIONS\" slot=\"start\"></ion-icon>\n            <span>Custom</span>\n          </ion-button>\n        </div>\n\n        <!-- Date Range Inputs -->\n        <ion-row>\n          <ion-col size=\"12\" size-md=\"6\">\n            <ion-item class=\"form-item\">\n              <ion-icon slot=\"start\" [name]=\"icons.CALENDAR\" color=\"primary\"></ion-icon>\n              <ion-label position=\"stacked\">Start Date</ion-label>\n              <ion-input\n                type=\"date\"\n                [(ngModel)]=\"reportStartDate\"\n                (ionChange)=\"onDateRangeChange()\"\n                [disabled]=\"loadingDashboard || dateRangeType !== 'custom'\"\n                placeholder=\"Select start date\">\n              </ion-input>\n            </ion-item>\n          </ion-col>\n          <ion-col size=\"12\" size-md=\"6\">\n            <ion-item class=\"form-item\">\n              <ion-icon slot=\"start\" [name]=\"icons.CALENDAR\" color=\"primary\"></ion-icon>\n              <ion-label position=\"stacked\">End Date</ion-label>\n              <ion-input\n                type=\"date\"\n                [(ngModel)]=\"reportEndDate\"\n                (ionChange)=\"onDateRangeChange()\"\n                [disabled]=\"loadingDashboard || dateRangeType !== 'custom'\"\n                placeholder=\"Select end date\">\n              </ion-input>\n            </ion-item>\n          </ion-col>\n        </ion-row>\n\n        <!-- Refresh Button -->\n        <ion-row>\n          <ion-col size=\"12\">\n            <ion-button\n              expand=\"block\"\n              color=\"primary\"\n              (click)=\"loadDashboard()\"\n              [disabled]=\"loadingDashboard || !reportStartDate || !reportEndDate\"\n              class=\"refresh-button\">\n              <ion-icon slot=\"start\" [name]=\"icons.REFRESH\"></ion-icon>\n              Load Dashboard\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <ion-card *ngIf=\"loadingDashboard\">\n      <ion-card-content>\n        <div class=\"loading-container\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          <p>Loading dashboard...</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Date Range Display -->\n    <div class=\"date-range-display\" *ngIf=\"reportStartDate && reportEndDate && dashboardData\">\n      <div class=\"date-range-badge\">\n        <ion-icon [name]=\"icons.CALENDAR\"></ion-icon>\n        <span class=\"date-range-label\">Report Period:</span>\n        <span class=\"date-range-value\">\n          {{ reportStartDate === reportEndDate\n            ? (reportStartDate | date:'dd MMM yyyy')\n            : (reportStartDate | date:'dd MMM yyyy') + ' - ' + (reportEndDate | date:'dd MMM yyyy')\n          }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Total Beneficiary Verified Information -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && shouldShowBeneficiaryVerifiedInfo()\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.CHECKMARK_DONE\" color=\"primary\"></ion-icon>\n          Total Beneficiary Verified\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-row class=\"measurement-grid\">\n          <ion-col size=\"6\" size-md=\"6\" *ngFor=\"let metric of beneficiaryVerifiedMetrics; trackBy: trackByTitle\">\n            <div class=\"measurement-box\" [ngClass]=\"metric.colorClass\">\n              <div class=\"measurement-icon\">\n                <ion-icon [name]=\"metric.icon\"></ion-icon>\n              </div>\n              <div class=\"measurement-content\">\n                <p class=\"measurement-label\">{{ metric.title }}</p>\n                <p class=\"measurement-value\">{{ metric.count | number }}</p>\n              </div>\n            </div>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Section: Child Program Summary (for Facility Supervisor only) -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && shouldShowProgramSummary() && childProgramData.length > 0\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.PERSON\" color=\"primary\"></ion-icon>\n          Child Program Summary\n        </ion-card-title>\n        <ion-card-subtitle class=\"program-subtitle-with-badge\">\n          <span>Distribution of children across nutrition programs</span>\n          <ion-badge color=\"primary\" class=\"program-total-badge\">Total: {{ childProgramTotal | number }}</ion-badge>\n        </ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <div class=\"program-grid program-grid-3col\">\n          <div class=\"program-card\" [ngClass]=\"program.colorClass\" *ngFor=\"let program of childProgramData; trackBy: trackByTitle\">\n            <div class=\"program-color-bar\"></div>\n            <div class=\"program-card-content\">\n              <div class=\"program-name\">{{ program.program }}</div>\n              <div class=\"program-stats\">\n                <div class=\"program-stat\">\n                  <span class=\"stat-label\">In Care</span>\n                  <span class=\"stat-value\">{{ program.inCare | number }}</span>\n                </div>\n                <div class=\"program-stat program-stat-full\">\n                  <span class=\"stat-label\">% of total In Care</span>\n                  <div class=\"program-progress-container\">\n                    <div class=\"program-progress-bar\">\n                      <div class=\"program-progress-fill\" [style.width.%]=\"program.percentage\"></div>\n                    </div>\n                    <span class=\"stat-value\">{{ program.percentage | number:'1.0-1' }}%</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Section: PBW Program Summary (for Facility Supervisor only) -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && shouldShowProgramSummary() && pbwProgramData.length > 0\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.WOMAN\" color=\"primary\"></ion-icon>\n          PBW Program Summary\n        </ion-card-title>\n        <ion-card-subtitle class=\"program-subtitle-with-badge\">\n          <span>Distribution of PBW across nutrition programs</span>\n          <ion-badge color=\"primary\" class=\"program-total-badge\">Total: {{ pbwProgramTotal | number }}</ion-badge>\n        </ion-card-subtitle>\n      </ion-card-header>\n      <ion-card-content>\n        <div class=\"program-grid program-grid-2col\">\n          <div class=\"program-card\" [ngClass]=\"program.colorClass\" *ngFor=\"let program of pbwProgramData; trackBy: trackByTitle\">\n            <div class=\"program-color-bar\"></div>\n            <div class=\"program-card-content\">\n              <div class=\"program-name\">{{ program.program }}</div>\n              <div class=\"program-stats\">\n                <div class=\"program-stat\">\n                  <span class=\"stat-label\">In Care</span>\n                  <span class=\"stat-value\">{{ program.inCare | number }}</span>\n                </div>\n                <div class=\"program-stat program-stat-full\">\n                  <span class=\"stat-label\">% of total In Care</span>\n                  <div class=\"program-progress-container\">\n                    <div class=\"program-progress-bar\">\n                      <div class=\"program-progress-fill\" [style.width.%]=\"program.percentage\"></div>\n                    </div>\n                    <span class=\"stat-value\">{{ program.percentage | number:'1.0-1' }}%</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Section: Measurement Information (for Measurer and Facility Supervisor only) -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && dashboardData.measurement && shouldShowMeasurementInfo()\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.BODY\" color=\"primary\"></ion-icon>\n          Anthropometric Measurement Information\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-row class=\"measurement-grid\">\n          <ion-col size=\"6\" size-md=\"4\" *ngFor=\"let metric of measurementSummary; trackBy: trackByTitle\">\n            <div class=\"measurement-box\" [ngClass]=\"metric.colorClass\">\n              <div class=\"measurement-icon\">\n                <ion-icon [name]=\"metric.icon\"></ion-icon>\n              </div>\n              <div class=\"measurement-content\">\n                <p class=\"measurement-label\">{{ metric.title }}</p>\n                <p class=\"measurement-value\">{{ getMeasurementCount(metric.key) | number }}</p>\n              </div>\n            </div>\n          </ion-col>\n        </ion-row>\n\n        <div class=\"gmp-table-container\" *ngIf=\"gmpTargets.length > 0\">\n          <div class=\"gmp-table-header\">\n            <ion-icon [name]=\"icons.PODIUM\" color=\"primary\"></ion-icon>\n            <div>\n              <p class=\"gmp-table-title\">Target vs Achievement (Not Applicable for Custom Date range)</p>\n              <p class=\"gmp-table-subtitle\">Tracking growth monitoring performance</p>\n            </div>\n          </div>\n          <div class=\"gmp-table\">\n            <div class=\"gmp-table-row gmp-table-row--head\">\n              <div class=\"gmp-cell gmp-title\">Group</div>\n              <div class=\"gmp-cell gmp-target\">Target</div>\n              <div class=\"gmp-cell gmp-achievement\">Achievement</div>\n              <div class=\"gmp-cell gmp-progress\">Progress</div>\n            </div>\n            <div class=\"gmp-table-row\" *ngFor=\"let row of gmpTargets; trackBy: trackByTitle\">\n              <div class=\"gmp-cell gmp-title\">{{ row.title }}</div>\n              <div class=\"gmp-cell gmp-target\">{{ row.target | number }}</div>\n              <div class=\"gmp-cell gmp-achievement\">{{ row.achievement | number }}</div>\n              <div class=\"gmp-cell gmp-progress\">\n                <div class=\"gmp-progress-bar\">\n                  <div class=\"gmp-progress-fill\" [style.width.%]=\"getGmpAchievementPercent(row)\"></div>\n                </div>\n                <span>{{ getGmpAchievementPercent(row) | number:'1.0-0' }}%</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Nurse Dashboard (online only for Nurses & Facility Supervisors) -->\n    <ng-container *ngIf=\"canAccessNurseDashboard()\">\n      <ion-card class=\"nurse-offline-card\" *ngIf=\"!isOnline\">\n        <ion-card-content>\n          <div class=\"offline-notice\">\n            <ion-icon [name]=\"icons.CLOUD_OFFLINE\" color=\"medium\"></ion-icon>\n            <div>\n              <h3>Nurse dashboard is available online only</h3>\n              <p>Please reconnect to view real-time OTP & TSFP insights.</p>\n            </div>\n          </div>\n        </ion-card-content>\n      </ion-card>\n\n      <ion-card class=\"nurse-dashboard-card\" *ngIf=\"shouldShowNurseDashboard()\">\n        <ion-card-header>\n          <ion-card-title>\n            <ion-icon [name]=\"icons.MEDKIT\" color=\"primary\"></ion-icon>\n            Nurse Service Information\n          </ion-card-title>\n          <ion-card-subtitle>OTP & TSFP Programme snapshots for clinical follow-up</ion-card-subtitle>\n        </ion-card-header>\n        <ion-card-content>\n          <ng-container *ngIf=\"loadingDashboard; else nurseDataTemplate\">\n            <div class=\"loading-container\">\n              <ion-spinner name=\"crescent\"></ion-spinner>\n              <p>Loading nurse statistics...</p>\n            </div>\n          </ng-container>\n\n          <ng-template #nurseDataTemplate>\n            <ng-container *ngIf=\"nurseSummaryMetrics as nurseSummary\">\n              <ng-container *ngIf=\"nurseBreakdownGroups as nurseBreakdowns\">\n                <div class=\"nurse-summary-section\" *ngIf=\"nurseSummary.length > 0\">\n                  <div class=\"nurse-summary-group\" *ngIf=\"nurseOtpSummaryMetrics.length > 0\">\n                    <div class=\"nurse-program-label otp-label\">\n                      <ion-icon [name]=\"icons.PULSE\"></ion-icon>\n                      <span>OTP Caseload (SAM)</span>\n                    </div>\n                    <div class=\"nurse-summary-grid\">\n                      <div\n                        class=\"nurse-summary-card\"\n                        [ngClass]=\"getNurseProgramClass(metric.title)\"\n                        *ngFor=\"let metric of nurseOtpSummaryMetrics; trackBy: trackByTitle\">\n                        <div class=\"summary-card-header\">\n                          <ion-icon [name]=\"getNurseMetricIcon(metric.title)\"></ion-icon>\n                          <span class=\"summary-card-title\">{{ metric.title }}</span>\n                        </div>\n                        <div class=\"summary-card-value\">{{ metric.count | number }}</div>\n                      </div>\n                    </div>\n                  </div>\n\n                  <div class=\"nurse-summary-group\" *ngIf=\"nurseTsfpSummaryMetrics.length > 0\">\n                    <div class=\"nurse-program-label tsfp-label\">\n                      <ion-icon [name]=\"icons.NUTRITION\"></ion-icon>\n                      <span>TSFP Caseload (MAM)</span>\n                    </div>\n                    <div class=\"nurse-summary-grid\">\n                      <div\n                        class=\"nurse-summary-card\"\n                        [ngClass]=\"getNurseProgramClass(metric.title)\"\n                        *ngFor=\"let metric of nurseTsfpSummaryMetrics; trackBy: trackByTitle\">\n                        <div class=\"summary-card-header\">\n                          <ion-icon [name]=\"getNurseMetricIcon(metric.title)\"></ion-icon>\n                          <span class=\"summary-card-title\">{{ metric.title }}</span>\n                        </div>\n                        <div class=\"summary-card-value\">{{ metric.count | number }}</div>\n                      </div>\n                    </div>\n                  </div>\n\n                  <div class=\"nurse-summary-group\" *ngIf=\"nurseOtherSummaryMetrics.length > 0\">\n                    <div class=\"nurse-program-label\">\n                      <ion-icon [name]=\"icons.STATS_CHART\"></ion-icon>\n                      <span>Additional Metrics</span>\n                    </div>\n                    <div class=\"nurse-summary-grid\">\n                      <div\n                        class=\"nurse-summary-card\"\n                        [ngClass]=\"getNurseProgramClass(metric.title)\"\n                        *ngFor=\"let metric of nurseOtherSummaryMetrics; trackBy: trackByTitle\">\n                        <div class=\"summary-card-header\">\n                          <ion-icon [name]=\"getNurseMetricIcon(metric.title)\"></ion-icon>\n                          <span class=\"summary-card-title\">{{ metric.title }}</span>\n                        </div>\n                        <div class=\"summary-card-value\">{{ metric.count | number }}</div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"nurse-breakdown-wrapper\" *ngIf=\"nurseBreakdowns.length > 0\">\n                  <ng-container *ngTemplateOutlet=\"breakdownGroupTemplate; context: {\n                    groups: nurseOtpBreakdownGroups,\n                    label: 'OTP Criteria',\n                    icon: 'pulse-outline',\n                    className: 'otp-label'\n                  }\">\n                  </ng-container>\n\n                  <ng-container *ngTemplateOutlet=\"breakdownGroupTemplate; context: {\n                    groups: nurseTsfpBreakdownGroups,\n                    label: 'TSFP Criteria',\n                    icon: 'nutrition-outline',\n                    className: 'tsfp-label'\n                  }\">\n                  </ng-container>\n\n                  <ng-container *ngTemplateOutlet=\"breakdownGroupTemplate; context: {\n                    groups: nurseOtherBreakdownGroups,\n                    label: 'Additional Insights',\n                    icon: 'analytics-outline',\n                    className: ''\n                  }\">\n                  </ng-container>\n                </div>\n\n                <div class=\"empty-state\" *ngIf=\"!nurseSummary.length && !nurseBreakdowns.length && !loadingDashboard\">\n                  <ion-icon [name]=\"icons.MEDKIT\" color=\"medium\"></ion-icon>\n                  <h3>No nurse statistics</h3>\n                  <p>There are no OTP or TSFP updates for the selected dates.</p>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n\n          <ng-template #breakdownGroupTemplate let-groups=\"groups\" let-label=\"label\" let-icon=\"icon\" let-className=\"className\">\n            <div class=\"nurse-breakdown-category\" *ngIf=\"groups && groups.length > 0\">\n              <div class=\"breakdown-group-label\" [ngClass]=\"className ? className : null\">\n                <ion-icon [name]=\"icon\"></ion-icon>\n                <span>{{ label }}</span>\n              </div>\n              <div class=\"nurse-breakdown-section\" *ngFor=\"let group of groups; trackBy: trackByTitle\">\n                <div class=\"breakdown-header\">\n                  <div class=\"breakdown-title\">\n                    <ion-icon [name]=\"icons.LIST_CIRCLE\" color=\"primary\"></ion-icon>\n                    <span>{{ group.title }}</span>\n                  </div>\n                  <ion-badge color=\"success\" style=\"font-size: 1.3em;\">\n                    {{ getNurseBreakdownTotal(group.breakdown) }} Total\n                  </ion-badge>\n                </div>\n                <div class=\"nurse-breakdown-grid\">\n                  <div class=\"nurse-breakdown-card\" *ngFor=\"let breakdown of group.breakdown; trackBy: trackByKey\">\n                    <span class=\"breakdown-label\">{{ breakdown.label }}</span>\n                    <span class=\"breakdown-count\">{{ breakdown.count | number }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </ion-card-content>\n      </ion-card>\n    </ng-container>\n\n    <!-- Section: PBW Anthropometric Measurement Information (for PBW - Point and Facility Supervisor only) -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && dashboardData.pbw_measurement && shouldShowPbwMeasurementInfo()\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.BODY\" color=\"primary\"></ion-icon>\n          PBW Anthropometric Measurement Information\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-row class=\"measurement-grid pbw-measurement-row\">\n          <!-- Regular measurement boxes -->\n          <ion-col size=\"6\" *ngFor=\"let metric of pbwMeasurementSummary; trackBy: trackByTitle\">\n            <div class=\"measurement-box\" [ngClass]=\"metric.colorClass\">\n              <div class=\"measurement-icon\">\n                <ion-icon [name]=\"metric.icon\"></ion-icon>\n              </div>\n              <div class=\"measurement-content\">\n                <p class=\"measurement-label\">{{ metric.title }}</p>\n                <p class=\"measurement-value\">{{ getPbwMeasurementCount(metric.key) | number }}</p>\n              </div>\n            </div>\n          </ion-col>\n\n          <!-- Normal Case Parent Box with Children Chips Inside -->\n          <ion-col size=\"12\">\n            <div class=\"measurement-box measurement-parent\" [ngClass]=\"pbwNormalCaseParent.colorClass\">\n              <div class=\"measurement-header\">\n                <div class=\"measurement-icon\">\n                  <ion-icon [name]=\"pbwNormalCaseParent.icon\"></ion-icon>\n                </div>\n                <div class=\"measurement-content\">\n                  <p class=\"measurement-label\">{{ pbwNormalCaseParent.title }}</p>\n                  <p class=\"measurement-value\">{{ getPbwMeasurementCount(pbwNormalCaseParent.key) | number }}</p>\n                </div>\n              </div>\n\n              <!-- Children chips inside Normal Case box -->\n              <ion-row class=\"measurement-children-chips\">\n                <ion-col size=\"6\" *ngFor=\"let child of pbwNormalCaseChildren; trackBy: trackByTitle\">\n                  <ion-chip class=\"measurement-chip\">\n                    <ion-icon [name]=\"child.icon\"></ion-icon>\n                    <ion-label>\n                      <span class=\"chip-title\">{{ child.title }}</span>\n                      <span class=\"chip-value\">{{ getPbwMeasurementCount(child.key) | number }}</span>\n                    </ion-label>\n                  </ion-chip>\n                </ion-col>\n              </ion-row>\n            </div>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- PBW Service Provider Dashboard -->\n    <ng-container *ngIf=\"canAccessPbwDashboard()\">\n      <ion-card class=\"pbw-offline-card\" *ngIf=\"!isOnline\">\n        <ion-card-content>\n          <div class=\"offline-notice\">\n            <ion-icon [name]=\"icons.CLOUD_OFFLINE\" color=\"medium\"></ion-icon>\n            <div>\n              <h3>PBW dashboard is available online only</h3>\n              <p>Reconnect to review latest BSFP & TSFP PBW services and coverage.</p>\n            </div>\n          </div>\n        </ion-card-content>\n      </ion-card>\n\n      <ion-card class=\"pbw-dashboard-card\" *ngIf=\"shouldShowPbwDashboard()\">\n        <ion-card-header>\n          <ion-card-title>\n            <ion-icon [name]=\"icons.WOMAN\" color=\"primary\"></ion-icon>\n            PBW Service Information\n          </ion-card-title>\n          <ion-card-subtitle>BSFP & TSFP PBW programme snapshots for service delivery</ion-card-subtitle>\n        </ion-card-header>\n        <ion-card-content>\n          <ng-container *ngIf=\"loadingDashboard; else pbwDataTemplate\">\n            <div class=\"loading-container\">\n              <ion-spinner name=\"crescent\"></ion-spinner>\n              <p>Loading PBW statistics...</p>\n            </div>\n          </ng-container>\n\n          <ng-template #pbwDataTemplate>\n            <ng-container *ngIf=\"pbwSummaryMetrics as pbwSummary\">\n              <ng-container *ngIf=\"pbwBreakdownGroups as pbwBreakdowns\">\n                <div class=\"nurse-summary-section\" *ngIf=\"pbwSummary.length > 0\">\n                  <div class=\"nurse-summary-group\" *ngIf=\"pbwBsfpSummaryMetrics.length > 0\">\n                    <div class=\"nurse-program-label bsfp-label\">\n                      <ion-icon [name]=\"icons.FITNESS\"></ion-icon>\n                      <span>BSFP Caseload (PBW)</span>\n                    </div>\n                    <div class=\"nurse-summary-grid\">\n                      <div\n                        class=\"nurse-summary-card\"\n                        [ngClass]=\"getPbwProgramClass(metric.title)\"\n                        *ngFor=\"let metric of pbwBsfpSummaryMetrics; trackBy: trackByTitle\">\n                        <div class=\"summary-card-header\">\n                          <ion-icon [name]=\"getPbwMetricIcon(metric.title)\"></ion-icon>\n                          <span class=\"summary-card-title\">{{ metric.title }}</span>\n                        </div>\n                        <div class=\"summary-card-value\">{{ metric.count | number }}</div>\n                      </div>\n                    </div>\n                  </div>\n\n                  <div class=\"nurse-summary-group\" *ngIf=\"pbwTsfpSummaryMetrics.length > 0\">\n                    <div class=\"nurse-program-label tsfp-label\">\n                      <ion-icon [name]=\"icons.HEART\"></ion-icon>\n                      <span>TSFP Caseload (PBW)</span>\n                    </div>\n                    <div class=\"nurse-summary-grid\">\n                      <div\n                        class=\"nurse-summary-card\"\n                        [ngClass]=\"getPbwProgramClass(metric.title)\"\n                        *ngFor=\"let metric of pbwTsfpSummaryMetrics; trackBy: trackByTitle\">\n                        <div class=\"summary-card-header\">\n                          <ion-icon [name]=\"getPbwMetricIcon(metric.title)\"></ion-icon>\n                          <span class=\"summary-card-title\">{{ metric.title }}</span>\n                        </div>\n                        <div class=\"summary-card-value\">{{ metric.count | number }}</div>\n                      </div>\n                    </div>\n                  </div>\n\n                  <div class=\"nurse-summary-group\" *ngIf=\"pbwOtherSummaryMetrics.length > 0\">\n                    <div class=\"nurse-program-label\">\n                      <ion-icon [name]=\"icons.STATS_CHART\"></ion-icon>\n                      <span>Additional Metrics</span>\n                    </div>\n                    <div class=\"nurse-summary-grid\">\n                      <div\n                        class=\"nurse-summary-card\"\n                        [ngClass]=\"getPbwProgramClass(metric.title)\"\n                        *ngFor=\"let metric of pbwOtherSummaryMetrics; trackBy: trackByTitle\">\n                        <div class=\"summary-card-header\">\n                          <ion-icon [name]=\"getPbwMetricIcon(metric.title)\"></ion-icon>\n                          <span class=\"summary-card-title\">{{ metric.title }}</span>\n                        </div>\n                        <div class=\"summary-card-value\">{{ metric.count | number }}</div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"nurse-breakdown-wrapper\" *ngIf=\"pbwBreakdowns.length > 0\">\n                  <ng-container *ngTemplateOutlet=\"pbwBreakdownGroupTemplate; context: {\n                    groups: pbwBsfpBreakdownGroups,\n                    label: 'BSFP Criteria',\n                    icon: 'fitness-outline',\n                    className: 'bsfp-label'\n                  }\">\n                  </ng-container>\n\n                  <ng-container *ngTemplateOutlet=\"pbwBreakdownGroupTemplate; context: {\n                    groups: pbwTsfpBreakdownGroups,\n                    label: 'TSFP Criteria',\n                    icon: 'heart-outline',\n                    className: 'tsfp-label'\n                  }\">\n                  </ng-container>\n\n                  <ng-container *ngTemplateOutlet=\"pbwBreakdownGroupTemplate; context: {\n                    groups: pbwOtherBreakdownGroups,\n                    label: 'Additional Insights',\n                    icon: 'analytics-outline',\n                    className: ''\n                  }\">\n                  </ng-container>\n                </div>\n\n                <div class=\"empty-state\" *ngIf=\"!pbwSummary.length && !pbwBreakdowns.length && !loadingDashboard\">\n                  <ion-icon [name]=\"icons.WOMAN\" color=\"medium\"></ion-icon>\n                  <h3>No PBW statistics</h3>\n                  <p>There are no BSFP or TSFP PBW updates for the selected dates.</p>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n\n          <ng-template #pbwBreakdownGroupTemplate let-groups=\"groups\" let-label=\"label\" let-icon=\"icon\" let-className=\"className\">\n            <div class=\"nurse-breakdown-category\" *ngIf=\"groups && groups.length > 0\">\n              <div class=\"breakdown-group-label\" [ngClass]=\"className ? className : null\">\n                <ion-icon [name]=\"icon\"></ion-icon>\n                <span>{{ label }}</span>\n              </div>\n              <div class=\"nurse-breakdown-section\" *ngFor=\"let group of groups; trackBy: trackByTitle\">\n                <div class=\"breakdown-header\">\n                  <div class=\"breakdown-title\">\n                    <ion-icon [name]=\"icons.LIST_CIRCLE\" color=\"primary\"></ion-icon>\n                    <span>{{ group.title }}</span>\n                  </div>\n                  <ion-badge color=\"success\" style=\"font-size: 1.3em;\">\n                    {{ getPbwBreakdownTotal(group.breakdown) }} Total\n                  </ion-badge>\n                </div>\n                <div class=\"nurse-breakdown-grid\">\n                  <div class=\"nurse-breakdown-card\" *ngFor=\"let breakdown of group.breakdown; trackBy: trackByKey\">\n                    <span class=\"breakdown-label\">{{ breakdown.label }}</span>\n                    <span class=\"breakdown-count\">{{ breakdown.count | number }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </ion-card-content>\n      </ion-card>\n    </ng-container>\n\n        <!-- IYCF Counselor Dashboard -->\n    <ng-container *ngIf=\"canAccessMiycnDashboard()\">\n      <ion-card class=\"counselor-offline-card\" *ngIf=\"!isOnline\">\n        <ion-card-content>\n          <div class=\"offline-notice\">\n            <ion-icon [name]=\"icons.CLOUD_OFFLINE\" color=\"medium\"></ion-icon>\n            <div>\n              <h3>IYCF counselor dashboard is available online only</h3>\n              <p>Reconnect to review latest group sessions and counseling coverage.</p>\n            </div>\n          </div>\n        </ion-card-content>\n      </ion-card>\n\n      <ion-card class=\"miycn-dashboard-card\" *ngIf=\"shouldShowMiycnDashboard()\">\n        <ion-card-header>\n          <ion-card-title>\n            <ion-icon [name]=\"icons.PEOPLE_CIRCLE\" color=\"primary\"></ion-icon>\n            IYCF Counseling Overview\n          </ion-card-title>\n          <ion-card-subtitle>Track MIYCN sessions, counseling visits, and service reach</ion-card-subtitle>\n        </ion-card-header>\n        <ion-card-content>\n          <ng-container *ngIf=\"loadingDashboard; else miycnDataTemplate\">\n            <div class=\"loading-container\">\n              <ion-spinner name=\"crescent\"></ion-spinner>\n              <p>Loading MIYCN statistics...</p>\n            </div>\n          </ng-container>\n\n          <ng-template #miycnDataTemplate>\n            <div *ngIf=\"hasMiycnMetrics(); else miycnEmptyState\">\n              <div class=\"dashboard-table-container\">\n                <table class=\"dashboard-table\">\n                  <thead>\n                    <tr>\n                      <th>Category</th>\n                      <th>Count</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr *ngFor=\"let metric of miycnMetrics; trackBy: trackByTitle\">\n                      <td class=\"category-title\">{{ metric.title }}</td>\n                      <td class=\"achievement-count\">\n                        <span class=\"count-value\" [ngClass]=\"{'highlight-today': metric.count > 0}\">\n                          {{ metric.count | number }}\n                        </span>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </div>\n            <ng-template #miycnEmptyState>\n              <div class=\"empty-state\">\n                <ion-icon [name]=\"icons.PEOPLE_CIRCLE\" color=\"medium\"></ion-icon>\n                <h3>No MIYCN data</h3>\n                <p>There are no IYCF counseling updates for the selected dates.</p>\n              </div>\n            </ng-template>\n          </ng-template>\n        </ion-card-content>\n      </ion-card>\n    </ng-container>\n\n    <!-- Disability Information (for Facility Supervisor only) -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && dashboardData.disability && shouldShowDisabilityInfo()\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.ACCESSIBILITY\" color=\"primary\"></ion-icon>\n          Disability Information\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-row class=\"measurement-grid\">\n          <ion-col size=\"6\" size-md=\"6\" *ngFor=\"let metric of disabilityMetrics; trackBy: trackByTitle\">\n            <div class=\"measurement-box\" [ngClass]=\"metric.colorClass\">\n              <div class=\"measurement-icon\">\n                <ion-icon [name]=\"metric.icon\"></ion-icon>\n              </div>\n              <div class=\"measurement-content\">\n                <p class=\"measurement-label\">{{ metric.title }}</p>\n                <p class=\"measurement-value\">{{ metric.count | number }}</p>\n              </div>\n            </div>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Field Home Visit and Exit Interview Information (for Facility Supervisor only) -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && shouldShowHomeVisitInfo()\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.HOME\" color=\"primary\"></ion-icon>\n          Field Home Visit and Exit Interview Information\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <ion-row class=\"measurement-grid\">\n          <ion-col size=\"6\" size-md=\"4\" *ngFor=\"let metric of homeVisitMetrics; trackBy: trackByTitle\">\n            <div class=\"measurement-box\" [ngClass]=\"metric.colorClass\">\n              <div class=\"measurement-icon\">\n                <ion-icon [name]=\"metric.icon\"></ion-icon>\n              </div>\n              <div class=\"measurement-content\">\n                <p class=\"measurement-label\">{{ metric.title }}</p>\n                <p class=\"measurement-value\">{{ metric.count | number }}</p>\n              </div>\n            </div>\n          </ion-col>\n        </ion-row>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Section 1: General Information -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && dashboardData.general_information && dashboardData.general_information.length > 0 && shouldShowGeneralInfo()\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.INFORMATION_CIRCLE\" color=\"primary\"></ion-icon>\n          General Information\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <div class=\"dashboard-table-container\">\n          <table class=\"dashboard-table\">\n            <thead>\n              <tr>\n                <th>Category</th>\n                <th>Count</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of dashboardData.general_information\">\n                <td class=\"category-title\">{{ item.title }}</td>\n                <td class=\"achievement-count\">\n                  <span class=\"count-value\" [ngClass]=\"{'highlight-today': item.count > 0}\">\n                    {{ item.count }}\n                  </span>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </ion-card-content>\n    </ion-card>\n\n    <!-- Section 2: Distribution -->\n    <ion-card *ngIf=\"!loadingDashboard && dashboardData && dashboardData.distribution && shouldShowDistribution()\">\n      <ion-card-header>\n        <ion-card-title>\n          <ion-icon [name]=\"icons.BASKET\" color=\"primary\"></ion-icon>\n          Distribution Summary\n        </ion-card-title>\n      </ion-card-header>\n      <ion-card-content>\n        <div class=\"stock-table-container\" *ngIf=\"dashboardData.distribution.length > 0\">\n          <table class=\"stock-table\">\n            <thead>\n              <tr>\n                <th>#</th>\n                <th>Item</th>\n                <th>Unit</th>\n                <th>Available</th>\n                <th>Distributed</th>\n                <th>Used %</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of dashboardData.distribution; let i = index\">\n                <td class=\"serial-number\">{{ i + 1 }}</td>\n                <td class=\"item-title\">{{ item.item_name }}</td>\n                <td class=\"unit\">{{ item.unit }}</td>\n                <td class=\"numeric available-stock\">{{ item.available | number:'1.0-2' }}</td>\n                <td class=\"numeric supply-out\">{{ item.distributed | number:'1.0-2' }}</td>\n                <td class=\"numeric used-percentage\">\n                  <span class=\"count-value\" [ngClass]=\"{\n                    'progress-excellent': item.used_percentage >= 90,\n                    'progress-good': item.used_percentage >= 70 && item.used_percentage < 90,\n                    'progress-moderate': item.used_percentage >= 50 && item.used_percentage < 70,\n                    'progress-low': item.used_percentage < 50 && item.available > 0\n                  }\">\n                    {{ item.used_percentage | number:'1.0-1' }}%\n                  </span>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"empty-state\" *ngIf=\"dashboardData.distribution.length === 0\">\n          <ion-icon [name]=\"icons.BASKET\" color=\"medium\"></ion-icon>\n          <h3>No Survey Items</h3>\n          <p>No supply items are configured in active survey forms.</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n  </div>\n\n\n  <!-- Loading Template -->\n  <ng-template #loadingTemplate>\n    <ion-card>\n      <ion-card-content>\n        <div class=\"loading-container\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n          <p>Loading dashboard data...</p>\n        </div>\n      </ion-card-content>\n    </ion-card>\n  </ng-template>\n\n  <!-- Floating Action Buttons -->\n  <ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"!shouldShowStoreKeeperDashboard()\">\n    <ion-fab-button color=\"primary\">\n      <ion-icon [name]=\"icons.APPS\"></ion-icon>\n    </ion-fab-button>\n    <ion-fab-list side=\"top\">\n      <ion-fab-button [routerLink]=\"b.routesConfig.childList\" color=\"tertiary\">\n        <ion-icon [name]=\"icons.PERSON\"></ion-icon>\n      </ion-fab-button>\n      <ion-fab-button [routerLink]=\"b.routesConfig.plwList\" color=\"secondary\">\n        <ion-icon [name]=\"icons.WOMAN\"></ion-icon>\n      </ion-fab-button>\n    </ion-fab-list>\n  </ion-fab>\n</ion-content>\n";

/***/ })

}]);
//# sourceMappingURL=src_app_pages_home_home_module_ts.js.map