(self["webpackChunkapp"] = self["webpackChunkapp"] || []).push([["src_app_pages_child-detail_child-detail_module_ts"],{

/***/ 93805:
/*!*******************************************************************!*\
  !*** ./src/app/pages/child-detail/child-detail-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 */   ChildDetailPageRoutingModule: () => (/* binding */ ChildDetailPageRoutingModule)
/* 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 _child_detail_page__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./child-detail.page */ 57087);




const routes = [{
  path: '',
  component: _child_detail_page__WEBPACK_IMPORTED_MODULE_0__.ChildDetailPage
}];
let ChildDetailPageRoutingModule = class ChildDetailPageRoutingModule {};
ChildDetailPageRoutingModule = (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]
})], ChildDetailPageRoutingModule);


/***/ }),

/***/ 6676:
/*!***********************************************************!*\
  !*** ./src/app/pages/child-detail/child-detail.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 */   ChildDetailPageModule: () => (/* binding */ ChildDetailPageModule)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var src_app_components_shared_module__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! src/app/components/shared.module */ 47774);
/* 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 _angular_forms__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @angular/forms */ 34456);
/* harmony import */ var _ionic_angular__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @ionic/angular */ 21507);
/* harmony import */ var _angular_material_stepper__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @angular/material/stepper */ 56622);
/* harmony import */ var _child_detail_routing_module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./child-detail-routing.module */ 93805);
/* harmony import */ var _child_detail_page__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./child-detail.page */ 57087);
/* harmony import */ var _angular_material_icon__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @angular/material/icon */ 93840);










let ChildDetailPageModule = class ChildDetailPageModule {};
ChildDetailPageModule = (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, _ionic_angular__WEBPACK_IMPORTED_MODULE_7__.IonicModule, src_app_components_shared_module__WEBPACK_IMPORTED_MODULE_0__.SharedModule, _angular_material_stepper__WEBPACK_IMPORTED_MODULE_8__.MatStepperModule, _angular_material_icon__WEBPACK_IMPORTED_MODULE_9__.MatIconModule, _child_detail_routing_module__WEBPACK_IMPORTED_MODULE_1__.ChildDetailPageRoutingModule],
  declarations: [_child_detail_page__WEBPACK_IMPORTED_MODULE_2__.ChildDetailPage]
})], ChildDetailPageModule);


/***/ }),

/***/ 57087:
/*!*********************************************************!*\
  !*** ./src/app/pages/child-detail/child-detail.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 */   ChildDetailPage: () => (/* binding */ ChildDetailPage)
/* 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_17__ = __webpack_require__(/*! tslib */ 24398);
/* harmony import */ var _child_detail_page_html_ngResource__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./child-detail.page.html?ngResource */ 91489);
/* harmony import */ var _child_detail_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./child-detail.page.scss?ngResource */ 54753);
/* harmony import */ var _child_detail_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_child_detail_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_14__ = __webpack_require__(/*! @angular/core */ 37580);
/* harmony import */ var _angular_router__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @angular/router */ 95072);
/* harmony import */ var src_app_services_child_api_service__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! src/app/services/child_api.service */ 57571);
/* harmony import */ var src_app_services_measurement_api_service__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! src/app/services/measurement_api.service */ 15433);
/* harmony import */ var src_app_services_distribution_api_service__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! src/app/services/distribution_api.service */ 51339);
/* harmony import */ var src_app_util_utility__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! src/app/util/utility */ 89999);
/* harmony import */ var src_app_services_permission_service__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! src/app/services/permission.service */ 7773);
/* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @angular/platform-browser */ 80436);
/* harmony import */ var src_environments_environment__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! src/environments/environment */ 45312);
/* harmony import */ var _ionic_angular__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @ionic/angular */ 21507);
/* harmony import */ var _components_report_modal_report_modal_component__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../components/report-modal/report-modal.component */ 69843);
/* harmony import */ var src_app_services_plw_transfer_out_api_service__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! src/app/services/plw_transfer_out_api.service */ 58455);
/* harmony import */ var src_app_services_inpatient_care_treatment_api_service__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! src/app/services/inpatient_care_treatment_api.service */ 62446);

var _ChildDetailPage;



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














let ChildDetailPage = (_ChildDetailPage = class ChildDetailPage {
  constructor(api, measurementApi, distributionApi, activatedRoute, b, router, change, permissionService, sanitizer, transferOutApi, alertController, modalCtrl, navigateRouter, scApi) {
    this.api = api;
    this.measurementApi = measurementApi;
    this.distributionApi = distributionApi;
    this.activatedRoute = activatedRoute;
    this.b = b;
    this.router = router;
    this.change = change;
    this.permissionService = permissionService;
    this.sanitizer = sanitizer;
    this.transferOutApi = transferOutApi;
    this.alertController = alertController;
    this.modalCtrl = modalCtrl;
    this.navigateRouter = navigateRouter;
    this.scApi = scApi;
    this.NutritionStatusColor = src_app_util_utility__WEBPACK_IMPORTED_MODULE_7__.NutritionStatusColor;
    this.measurements = [];
    this.distributions = [];
    this.surveyResponses = [];
    this.inpatient_care_treatments = [];
    // Pagination properties
    this.currentPage = 1;
    this.itemsPerPage = 10;
    this.distributionCurrentPage = 1;
    this.distributionItemsPerPage = 10;
    this.assessmentCurrentPage = 1;
    this.assessmentItemsPerPage = 10;
    // Collapse state for cards (all collapsed by default)
    this.isTransferHistoryCollapsed = true;
    this.isSiblingInfoCollapsed = true;
    this.isMeasurementHistoryCollapsed = true;
    this.isAssessmentHistoryCollapsed = true;
    this.isDistributionHistoryCollapsed = true;
    this.isSCHistoryCollapsed = true;
    //construction works
    this.id = this.activatedRoute.snapshot.paramMap.get('id');
  }
  ngOnInit() {
    this.user = this.b.getCurrentUser();
    this.load(null);
  }
  hasPermission(permissionTitle) {
    var _userObj$user;
    if (!this.user) {
      return false;
    }
    // Handle both UserApiResponse and User types
    const userObj = this.user;
    const roles = userObj.roles || ((_userObj$user = userObj.user) === null || _userObj$user === void 0 ? void 0 : _userObj$user.roles);
    if (!roles) {
      return false;
    }
    // Iterate through all roles and their permissions
    for (const role of roles) {
      if (role.permissions) {
        const hasPermission = role.permissions.some(permission => permission.title === permissionTitle);
        if (hasPermission) {
          return true;
        }
      }
    }
    return false;
  }
  load(event) {
    var _this = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      var _this$childDetailData, _this$childDetailData2, _this$childDetailData3, _this$childDetailData4;
      _this.childDetailData = (yield _this.api.getChild(_this.id)).data;
      // Extract measurements, distributions, and survey responses from child data
      _this.measurements = ((_this$childDetailData = _this.childDetailData) === null || _this$childDetailData === void 0 ? void 0 : _this$childDetailData.measurements) || [];
      _this.distributions = ((_this$childDetailData2 = _this.childDetailData) === null || _this$childDetailData2 === void 0 ? void 0 : _this$childDetailData2.distributions) || [];
      _this.surveyResponses = ((_this$childDetailData3 = _this.childDetailData) === null || _this$childDetailData3 === void 0 ? void 0 : _this$childDetailData3.assessment_responses) || [];
      _this.inpatient_care_treatments = ((_this$childDetailData4 = _this.childDetailData) === null || _this$childDetailData4 === void 0 ? void 0 : _this$childDetailData4.inpatient_care_treatments) || [];
      if (event) {
        setTimeout(() => {
          event.target.complete();
        }, 2000);
      }
      _this.change.markForCheck();
    })();
  }
  deleteMeasurement(id) {
    var _this2 = this;
    this.b.loadAlert('Delete Measurement', 'Are you sure you want to delete this measurement?', /*#__PURE__*/(0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      const result = yield _this2.measurementApi.deleteMeasurement(id);
      _this2.b.responseToast(result);
      if (result.success) {
        _this2.measurements = _this2.measurements.filter(item => item.id !== id);
        // Reset to page 1 if current page becomes empty
        if (_this2.paginatedMeasurements.length === 0 && _this2.currentPage > 1) {
          _this2.currentPage = 1;
        }
        _this2.change.markForCheck();
      }
    }));
  }
  deleteDistribution(id) {
    var _this3 = this;
    this.b.loadAlert('Delete Distribution', 'Are you sure you want to delete this distribution?', /*#__PURE__*/(0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      const result = yield _this3.distributionApi.deleteDistribution(id);
      _this3.b.responseToast(result);
      if (result.success) {
        _this3.distributions = _this3.distributions.filter(item => item.id !== id);
        // Reset to page 1 if current page becomes empty
        if (_this3.paginatedDistributions.length === 0 && _this3.distributionCurrentPage > 1) {
          _this3.distributionCurrentPage = 1;
        }
        _this3.change.markForCheck();
      }
    }));
  }
  ionViewDidEnter() {
    if (this.router.snapshot.queryParamMap.get('reload')) {
      this.load(null);
    }
  }
  toggleVerification() {
    var _this4 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      var _this4$childDetailDat;
      const isCurrentlyVerified = ((_this4$childDetailDat = _this4.childDetailData) === null || _this4$childDetailDat === void 0 ? void 0 : _this4$childDetailDat.verified) === 1;
      const actionText = isCurrentlyVerified ? 'unverify' : 'verify';
      const confirmMessage = `Are you sure you want to ${actionText} this child?`;
      _this4.b.loadAlert(`${isCurrentlyVerified ? 'Unverify' : 'Verify'} Child`, confirmMessage, /*#__PURE__*/(0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
        try {
          let result;
          if (isCurrentlyVerified) {
            result = yield _this4.api.unverifyChild(_this4.id);
          } else {
            result = yield _this4.api.verifyChild(_this4.id);
          }
          _this4.b.responseToast(result);
          if (result.success) {
            _this4.childDetailData.verified = isCurrentlyVerified ? 0 : 1;
            _this4.change.markForCheck();
          }
        } catch (error) {
          _this4.b.errorToast('An error occurred while updating verification status');
        }
      }));
    })();
  }
  deleteChild() {
    var _this5 = this;
    this.b.loadAlert('Delete Child', 'Are you sure you want to delete this child?', /*#__PURE__*/(0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      const result = yield _this5.api.deleteChild(_this5.id);
      _this5.b.responseToast(result);
      if (result.success) {
        // Navigate back to child list after successful deletion
        _this5.navigateRouter.navigate([_this5.b.routesConfig.childList]);
      }
    }));
  }
  calculateAgeInMonths(dateOfBirth) {
    if (!dateOfBirth) {
      return 0;
    }
    const today = new Date();
    const birthDate = new Date(dateOfBirth);
    const months = (today.getFullYear() - birthDate.getFullYear()) * 12 + (today.getMonth() - birthDate.getMonth());
    return months;
  }
  isWithinLastWeek(measurementDate) {
    if (!measurementDate) {
      return false;
    }
    const today = new Date();
    const measurement = new Date(measurementDate);
    const oneWeekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
    return measurement >= oneWeekAgo;
  }
  // Measurement Pagination methods
  get paginatedMeasurements() {
    const startIndex = (this.currentPage - 1) * this.itemsPerPage;
    const endIndex = startIndex + this.itemsPerPage;
    return this.measurements.slice(startIndex, endIndex);
  }
  get totalPages() {
    return Math.ceil(this.measurements.length / this.itemsPerPage);
  }
  nextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++;
      this.change.markForCheck();
    }
  }
  previousPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
      this.change.markForCheck();
    }
  }
  goToPage(page) {
    if (page >= 1 && page <= this.totalPages) {
      this.currentPage = page;
      this.change.markForCheck();
    }
  }
  // Distribution Pagination methods
  get paginatedDistributions() {
    const startIndex = (this.distributionCurrentPage - 1) * this.distributionItemsPerPage;
    const endIndex = startIndex + this.distributionItemsPerPage;
    return this.distributions.slice(startIndex, endIndex);
  }
  get distributionTotalPages() {
    return Math.ceil(this.distributions.length / this.distributionItemsPerPage);
  }
  distributionNextPage() {
    if (this.distributionCurrentPage < this.distributionTotalPages) {
      this.distributionCurrentPage++;
      this.change.markForCheck();
    }
  }
  distributionPreviousPage() {
    if (this.distributionCurrentPage > 1) {
      this.distributionCurrentPage--;
      this.change.markForCheck();
    }
  }
  distributionGoToPage(page) {
    if (page >= 1 && page <= this.distributionTotalPages) {
      this.distributionCurrentPage = page;
      this.change.markForCheck();
    }
  }
  isToday(date) {
    if (!date) {
      return false;
    }
    const today = new Date();
    const compareDate = new Date(date);
    return today.getFullYear() === compareDate.getFullYear() && today.getMonth() === compareDate.getMonth() && today.getDate() === compareDate.getDate();
  }
  navigateToMother() {
    var _this$childDetailData5;
    if ((_this$childDetailData5 = this.childDetailData) !== null && _this$childDetailData5 !== void 0 && (_this$childDetailData5 = _this$childDetailData5.my_mother) !== null && _this$childDetailData5 !== void 0 && _this$childDetailData5.id) {
      this.navigateRouter.navigate([this.b.routesConfig.plwDetail + this.childDetailData.my_mother.id]);
    }
  }
  getLatestMeasurement() {
    if (!this.measurements || this.measurements.length === 0) {
      return null;
    }
    return this.measurements[0];
  }
  getLatestDistribution() {
    if (!this.distributions || this.distributions.length === 0) {
      return null;
    }
    return this.distributions[0];
  }
  getUniqueItemsCount() {
    if (!this.distributions || this.distributions.length === 0) {
      return 0;
    }
    const uniqueItems = new Set(this.distributions.map(d => {
      var _d$supply_item;
      return (_d$supply_item = d.supply_item) === null || _d$supply_item === void 0 ? void 0 : _d$supply_item.id;
    }).filter(id => id !== undefined));
    return uniqueItems.size;
  }
  getNutritionStatusCounts() {
    if (!this.measurements || this.measurements.length === 0) {
      return [];
    }
    const statusMap = new Map();
    this.measurements.forEach(measurement => {
      const status = measurement.nutrition_status;
      if (status && status.id) {
        if (statusMap.has(status.id)) {
          statusMap.get(status.id).count++;
        } else {
          statusMap.set(status.id, {
            id: status.id,
            title: status.title,
            count: 1
          });
        }
      }
    });
    return Array.from(statusMap.values()).sort((a, b) => b.count - a.count);
  }
  getItemWiseDistribution() {
    if (!this.distributions || this.distributions.length === 0) {
      return [];
    }
    const itemMap = new Map();
    this.distributions.forEach(distribution => {
      const item = distribution.supply_item;
      if (item && item.id) {
        var _item$unit;
        const quantity = parseFloat(distribution.quantity) || 0;
        const unit = ((_item$unit = item.unit) === null || _item$unit === void 0 ? void 0 : _item$unit.title) || 'units';
        if (itemMap.has(item.id)) {
          const existing = itemMap.get(item.id);
          existing.totalQuantity += quantity;
          existing.count++;
        } else {
          itemMap.set(item.id, {
            id: item.id,
            name: item.title,
            unit,
            totalQuantity: quantity,
            count: 1
          });
        }
      }
    });
    return Array.from(itemMap.values()).sort((a, b) => b.totalQuantity - a.totalQuantity);
  }
  // Assessment pagination methods
  get assessmentTotalPages() {
    return Math.ceil(this.surveyResponses.length / this.assessmentItemsPerPage);
  }
  get paginatedAssessments() {
    const startIndex = (this.assessmentCurrentPage - 1) * this.assessmentItemsPerPage;
    const endIndex = startIndex + this.assessmentItemsPerPage;
    return this.surveyResponses.slice(startIndex, endIndex);
  }
  assessmentPreviousPage() {
    if (this.assessmentCurrentPage > 1) {
      this.assessmentCurrentPage--;
      this.change.markForCheck();
    }
  }
  assessmentNextPage() {
    if (this.assessmentCurrentPage < this.assessmentTotalPages) {
      this.assessmentCurrentPage++;
      this.change.markForCheck();
    }
  }
  assessmentGoToPage(page) {
    if (page >= 1 && page <= this.assessmentTotalPages) {
      this.assessmentCurrentPage = page;
      this.change.markForCheck();
    }
  }
  displayAssessmentForm(responseId) {
    this.navigateRouter.navigate(['/survey-view', responseId]);
  }
  displayProgrammeCard(responseId) {
    const token = localStorage.getItem('token');
    if (!token) return;
    const fullUrl = `${src_environments_environment__WEBPACK_IMPORTED_MODULE_9__.hostLocal}/programme-card/${responseId}?api_token=${token}`;
    this.modalCtrl.create({
      component: _components_report_modal_report_modal_component__WEBPACK_IMPORTED_MODULE_10__.ReportModalComponent,
      componentProps: {
        url: fullUrl,
        title: 'Programme Card'
      }
    }).then(modal => modal.present());
  }
  hasProgrammeTag(assessment) {
    var _assessment$survey_fo;
    return assessment === null || assessment === void 0 || (_assessment$survey_fo = assessment.survey_form) === null || _assessment$survey_fo === void 0 || (_assessment$survey_fo = _assessment$survey_fo.tags) === null || _assessment$survey_fo === void 0 ? void 0 : _assessment$survey_fo.includes('programme');
  }
  formatDate(dateString) {
    if (!dateString) return '';
    const date = new Date(dateString);
    if (isNaN(date.getTime())) return '';
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  }
  getAssessmentWiseCounts() {
    if (!this.surveyResponses || this.surveyResponses.length === 0) {
      return [];
    }
    const assessmentMap = new Map();
    this.surveyResponses.forEach(assessment => {
      const surveyForm = assessment.survey_form;
      if (surveyForm && surveyForm.id) {
        if (assessmentMap.has(surveyForm.id)) {
          assessmentMap.get(surveyForm.id).count++;
        } else {
          assessmentMap.set(surveyForm.id, {
            id: surveyForm.id,
            title: surveyForm.title,
            count: 1
          });
        }
      }
    });
    return Array.from(assessmentMap.values()).sort((a, b) => b.count - a.count);
  }
  getTransferStatusColor(status) {
    switch (status) {
      case 'Pending':
        return 'warning';
      case 'Received':
        return 'success';
      case 'Reject':
        return 'danger';
      default:
        return 'medium';
    }
  }
  deleteTransfer(transferId) {
    var _this6 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      const alert = yield _this6.alertController.create({
        header: 'Confirm Delete',
        message: 'Are you sure you want to delete this transfer request?',
        buttons: [{
          text: 'Cancel',
          role: 'cancel'
        }, {
          text: 'Delete',
          role: 'destructive',
          handler: function () {
            var _ref5 = (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
              try {
                const result = yield _this6.transferOutApi.deleteTransferOut(transferId);
                if (result.success) {
                  _this6.b.toast('Transfer request deleted successfully');
                  _this6.load(null);
                } else {
                  _this6.b.toast(result.message || 'Failed to delete transfer request');
                }
              } catch (error) {
                _this6.b.toast('Error deleting transfer request');
              }
            });
            return function handler() {
              return _ref5.apply(this, arguments);
            };
          }()
        }]
      });
      yield alert.present();
    })();
  }
  // Toggle methods for collapsible cards
  toggleTransferHistory() {
    this.isTransferHistoryCollapsed = !this.isTransferHistoryCollapsed;
    this.change.markForCheck();
  }
  toggleSiblingInfo() {
    this.isSiblingInfoCollapsed = !this.isSiblingInfoCollapsed;
    this.change.markForCheck();
  }
  toggleMeasurementHistory() {
    this.isMeasurementHistoryCollapsed = !this.isMeasurementHistoryCollapsed;
    this.change.markForCheck();
  }
  toggleAssessmentHistory() {
    this.isAssessmentHistoryCollapsed = !this.isAssessmentHistoryCollapsed;
    this.change.markForCheck();
  }
  toggleDistributionHistory() {
    this.isDistributionHistoryCollapsed = !this.isDistributionHistoryCollapsed;
    this.change.markForCheck();
  }
  toggleSCHistory() {
    this.isSCHistoryCollapsed = !this.isSCHistoryCollapsed;
    this.change.markForCheck();
  }
  getSCStatusColor(status) {
    const statusColors = {
      'pending': 'warning',
      'admitted': 'primary',
      'discharged': 'success',
      'rejected': 'danger'
    };
    return statusColors[status === null || status === void 0 ? void 0 : status.toLowerCase()] || 'medium';
  }
  isSCTransferEditable(admission) {
    var _admission$status;
    return ((_admission$status = admission.status) === null || _admission$status === void 0 ? void 0 : _admission$status.toLowerCase()) === 'pending' && admission.sync_status !== 'synced';
  }
  deleteSCTransfer(admissionId) {
    var _this7 = this;
    return (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
      const alert = yield _this7.alertController.create({
        header: 'Confirm Delete',
        message: 'Are you sure you want to delete this SC transfer request?',
        buttons: [{
          text: 'Cancel',
          role: 'cancel'
        }, {
          text: 'Delete',
          role: 'destructive',
          handler: function () {
            var _ref6 = (0,_workdir_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () {
              try {
                const result = yield _this7.scApi.deleteTreatment(admissionId);
                if (result.success) {
                  _this7.b.toast('SC transfer request deleted successfully');
                  _this7.load(null);
                } else {
                  _this7.b.toast(result.message || 'Failed to delete SC transfer request');
                }
              } catch (error) {
                _this7.b.toast('Error deleting SC transfer request');
              }
            });
            return function handler() {
              return _ref6.apply(this, arguments);
            };
          }()
        }]
      });
      yield alert.present();
    })();
  }
  editSCTransfer(admission) {
    if (this.isSCTransferEditable(admission)) {
      this.navigateRouter.navigate(['/sc-transfer-create', this.childDetailData.id], {
        queryParams: {
          scTransferId: admission.id
        }
      });
    }
  }
  navigateToScTransfer() {
    var _this$inpatient_care_;
    // Check if there's a pending unsynced SC transfer
    const pendingUnsyncedTransfer = (_this$inpatient_care_ = this.inpatient_care_treatments) === null || _this$inpatient_care_ === void 0 ? void 0 : _this$inpatient_care_.find(admission => {
      var _admission$status2;
      return ((_admission$status2 = admission.status) === null || _admission$status2 === void 0 ? void 0 : _admission$status2.toLowerCase()) === 'pending' && admission.sync_status !== 'synced';
    });
    if (pendingUnsyncedTransfer) {
      // Navigate to edit mode
      this.navigateRouter.navigate(['/sc-transfer-create', this.childDetailData.id], {
        queryParams: {
          scTransferId: pendingUnsyncedTransfer.id
        }
      });
    } else {
      // Navigate to create mode
      this.navigateRouter.navigate(['/sc-transfer-create', this.childDetailData.id]);
    }
  }
}, _ChildDetailPage.ctorParameters = () => [{
  type: src_app_services_child_api_service__WEBPACK_IMPORTED_MODULE_4__.ChildAPIService
}, {
  type: src_app_services_measurement_api_service__WEBPACK_IMPORTED_MODULE_5__.MeasurementAPIService
}, {
  type: src_app_services_distribution_api_service__WEBPACK_IMPORTED_MODULE_6__.DistributionAPIService
}, {
  type: _angular_router__WEBPACK_IMPORTED_MODULE_13__.ActivatedRoute
}, {
  type: src_app_util_baseHelper__WEBPACK_IMPORTED_MODULE_3__.BaseHelper
}, {
  type: _angular_router__WEBPACK_IMPORTED_MODULE_13__.ActivatedRoute
}, {
  type: _angular_core__WEBPACK_IMPORTED_MODULE_14__.ChangeDetectorRef
}, {
  type: src_app_services_permission_service__WEBPACK_IMPORTED_MODULE_8__.PermissionService
}, {
  type: _angular_platform_browser__WEBPACK_IMPORTED_MODULE_15__.DomSanitizer
}, {
  type: src_app_services_plw_transfer_out_api_service__WEBPACK_IMPORTED_MODULE_11__.PlwTransferOutAPIService
}, {
  type: _ionic_angular__WEBPACK_IMPORTED_MODULE_16__.AlertController
}, {
  type: _ionic_angular__WEBPACK_IMPORTED_MODULE_16__.ModalController
}, {
  type: _angular_router__WEBPACK_IMPORTED_MODULE_13__.Router
}, {
  type: src_app_services_inpatient_care_treatment_api_service__WEBPACK_IMPORTED_MODULE_12__.InpatientCareTreatmentAPIService
}], _ChildDetailPage);
ChildDetailPage = (0,tslib__WEBPACK_IMPORTED_MODULE_17__.__decorate)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_14__.Component)({
  selector: 'app-child-detail',
  template: _child_detail_page_html_ngResource__WEBPACK_IMPORTED_MODULE_1__,
  changeDetection: _angular_core__WEBPACK_IMPORTED_MODULE_14__.ChangeDetectionStrategy.OnPush,
  styles: [(_child_detail_page_scss_ngResource__WEBPACK_IMPORTED_MODULE_2___default())]
})], ChildDetailPage);


/***/ }),

/***/ 54753:
/*!**********************************************************************!*\
  !*** ./src/app/pages/child-detail/child-detail.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, `ion-icon {
  margin-inline-end: 0.75em !important;
}

:root {
  --ion-color-primary: #4990E2;
  --ion-color-primary-rgb: 73, 144, 226;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-secondary: #6D5AE6;
  --ion-color-secondary-rgb: 109, 90, 230;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-tertiary: #FF8A65;
  --ion-color-tertiary-rgb: 255, 138, 101;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-light: #f4f5f8;
  --ion-color-medium: #92949c;
  --ion-color-dark: #222428;
}

.section-header-main {
  max-width: 800px;
  margin: 0 auto 24px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
  flex-wrap: wrap;
}

.section-title-main {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--ion-color-dark);
  flex: 0 1 auto;
}
.section-title-main ion-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.action-buttons-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 1 auto;
}
.action-buttons-group .action-btn {
  --border-radius: 12px;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  height: 44px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  min-width: 120px;
  transition: all 0.3s ease;
}
.action-buttons-group .action-btn ion-icon {
  font-size: 18px;
  margin-inline-end: 6px !important;
}
.action-buttons-group .action-btn:hover {
  transform: translateY(-2px);
  --box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.action-buttons-group .action-btn:active {
  transform: translateY(0);
}

.gmp-buttons-section {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 16px 0 0 0;
  margin: 0;
}
.gmp-buttons-section .gmp-btn {
  --border-radius: 12px;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  height: 48px;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  flex: 1;
  min-width: 150px;
  max-width: 300px;
  transition: all 0.3s ease;
}
.gmp-buttons-section .gmp-btn ion-icon {
  font-size: 20px;
  margin-inline-end: 6px !important;
}
.gmp-buttons-section .gmp-btn:hover {
  transform: translateY(-2px);
  --box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.gmp-buttons-section .gmp-btn:active {
  transform: translateY(0);
}

.quick-action-buttons {
  max-width: 800px;
  margin: 16px auto 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.quick-action-buttons .quick-action-btn {
  width: 100%;
  height: 48px;
  --border-radius: 12px;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quick-action-buttons .quick-action-btn ion-icon {
  font-size: 20px;
  margin-inline-end: 8px !important;
}
.quick-action-buttons .quick-action-btn:hover:not([disabled]) {
  transform: translateY(-2px);
  --box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.quick-action-buttons .quick-action-btn:active:not([disabled]) {
  transform: translateY(0);
}

@media (min-width: 577px) and (max-width: 1024px) {
  .quick-action-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .quick-action-buttons .quick-action-btn {
    height: 44px;
    font-size: 13px;
  }
  .quick-action-buttons .quick-action-btn ion-icon {
    font-size: 18px;
    margin-inline-end: 6px !important;
  }
}
@media (max-width: 576px) {
  .quick-action-buttons {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .quick-action-buttons .quick-action-btn {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .quick-action-buttons {
    gap: 8px;
  }
  .quick-action-buttons .quick-action-btn {
    height: 42px;
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .section-header-main {
    margin-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .section-title-main {
    font-size: 20px;
    width: 100%;
  }
  .section-title-main ion-icon {
    font-size: 24px;
  }
  .action-buttons-group {
    width: 100%;
    justify-content: stretch;
  }
  .action-buttons-group .action-btn {
    flex: 1 1 auto;
    height: 42px;
    font-size: 13px;
    min-width: 100px;
  }
  .action-buttons-group .action-btn ion-icon {
    font-size: 16px;
  }
  .gmp-buttons-section {
    padding: 12px 0 0 0;
    gap: 10px;
  }
  .gmp-buttons-section .gmp-btn {
    height: 44px;
    font-size: 14px;
    min-width: 140px;
  }
  .gmp-buttons-section .gmp-btn ion-icon {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .section-header-main {
    margin-bottom: 16px;
  }
  .section-title-main {
    font-size: 18px;
  }
  .section-title-main ion-icon {
    font-size: 22px;
  }
  .action-buttons-group {
    flex-direction: column;
    gap: 8px;
  }
  .action-buttons-group .action-btn {
    width: 100%;
    min-width: auto;
    height: 40px;
    font-size: 13px;
  }
  .gmp-buttons-section {
    flex-direction: column;
    gap: 8px;
    padding: 12px 0 0 0;
  }
  .gmp-buttons-section .gmp-btn {
    flex: 1 1 100%;
    max-width: none;
    height: 42px;
    font-size: 14px;
  }
  .gmp-buttons-section .gmp-btn ion-icon {
    font-size: 18px;
  }
}
ion-content {
  --padding-start: 16px;
  --padding-end: 16px;
  --padding-top: 20px;
  --padding-bottom: 20px;
}

.card-container {
  max-width: 800px;
  margin: 0 auto 20px auto;
}

ion-card {
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin: 0 0 16px 0;
}

@media (max-width: 768px) {
  ion-content {
    --padding-start: 12px;
    --padding-end: 12px;
    --padding-top: 16px;
    --padding-bottom: 16px;
  }
  .card-container {
    margin-bottom: 16px;
  }
  .child-info-card .profile-content {
    padding: 16px;
  }
  .child-info-card .content-grid ion-col {
    padding: 0 3px;
  }
  .child-info-card .content-grid ion-col:first-child {
    padding-left: 0;
    padding-right: 5px;
  }
  .child-info-card .content-grid ion-col:last-child {
    padding-right: 0;
    padding-left: 5px;
  }
  .child-info-card .info-item {
    padding: 10px 6px;
    gap: 10px;
    margin-bottom: 6px;
  }
  .child-info-card .info-item ion-icon {
    font-size: 16px;
    width: 18px;
  }
  .child-info-card .item-content .label {
    font-size: 10px;
    letter-spacing: 0.3px;
  }
  .child-info-card .item-content .value {
    font-size: 13px;
  }
  .verified-badge-inline {
    font-size: 10px;
    padding: 2px 6px;
  }
  .verified-badge-inline ion-icon {
    font-size: 11px;
  }
}
@media (max-width: 480px) {
  ion-content {
    --padding-start: 8px;
    --padding-end: 8px;
    --padding-top: 12px;
    --padding-bottom: 12px;
  }
  .card-container {
    margin-bottom: 12px;
  }
  .child-info-card .profile-content {
    padding: 12px;
  }
  .child-info-card .content-grid ion-col {
    padding: 0 2px;
  }
  .child-info-card .content-grid ion-col:first-child {
    padding-left: 0;
    padding-right: 4px;
  }
  .child-info-card .content-grid ion-col:last-child {
    padding-right: 0;
    padding-left: 4px;
  }
  .child-info-card .info-item {
    padding: 8px 4px;
    gap: 8px;
    margin-bottom: 5px;
  }
  .child-info-card .info-item ion-icon {
    font-size: 14px;
    width: 16px;
  }
  .child-info-card .item-content .label {
    font-size: 9px;
    letter-spacing: 0.2px;
  }
  .child-info-card .item-content .value {
    font-size: 12px;
  }
}
.child-info-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.child-info-card ion-card-content {
  padding-inline-start: 6px;
  padding-inline-end: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.child-info-card-female {
  background: linear-gradient(135deg, rgba(234, 167, 205, 0.4), rgba(255, 192, 203, 0.05));
}

.child-info-card-male {
  background: linear-gradient(135deg, rgba(142, 243, 201, 0.289), rgba(135, 206, 250, 0.05));
}

.profile-content {
  padding: 20px;
}

.content-grid {
  padding: 0;
  margin: 0;
}
.content-grid ion-row {
  margin: 0;
}
.content-grid ion-col {
  padding: 0 6px;
  display: flex;
  flex-direction: column;
}
.content-grid ion-col:first-child {
  padding-left: 0;
  padding-right: 8px;
}
.content-grid ion-col:last-child {
  padding-right: 0;
  padding-left: 8px;
}

.child-info-card .info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 8px;
  transition: all 0.2s ease;
}
.child-info-card .info-item:last-child {
  margin-bottom: 0;
}
.child-info-card .info-item:hover {
  background: rgba(73, 144, 226, 0.04);
  border-color: rgba(73, 144, 226, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.child-info-card .info-item ion-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  margin-inline-end: 0 !important;
}

.child-info-card .item-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.child-info-card .item-content .label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ion-color-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}
.child-info-card .item-content .value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ion-color-dark);
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-word;
  margin: 0;
  text-align: left;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.child-info-card .item-content .value:empty::after {
  content: "-";
  color: var(--ion-color-medium);
  font-style: italic;
}
.child-info-card .item-content .value.clickable {
  color: var(--ion-color-primary);
  cursor: pointer;
}
.child-info-card .item-content .value.clickable:hover {
  text-decoration: underline;
}
.child-info-card .item-content .value .subtitle-text {
  color: var(--ion-color-medium);
  font-size: 12px;
  font-weight: 400;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 4px;
  gap: 16px;
  flex-wrap: wrap;
}
.section-header ion-button {
  flex-shrink: 0;
  height: 44px;
  --padding-start: 16px;
  --padding-end: 16px;
  --border-radius: 12px;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  transition: all 0.3s ease;
}
.section-header ion-button:hover {
  transform: translateY(-2px);
  --box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.section-header ion-button ion-icon {
  font-size: 18px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--ion-color-dark);
  flex: 1 1 auto;
  min-width: 0;
}
.section-title ion-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.section-buttons-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
}

.followup-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.followup-card {
  background: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  border-left: 3px solid rgba(0, 0, 0, 0.1);
}
.followup-card.nutrition-danger {
  border-left-color: #dc3545;
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.01), rgb(255, 255, 255));
}
.followup-card.nutrition-warning {
  border-left-color: #ffc107;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.01), rgb(255, 255, 255));
}
.followup-card.nutrition-success {
  border-left-color: #28a745;
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.01), rgb(255, 255, 255));
}
.followup-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.followup-header-complete {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.header-row-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cycle-status {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cycle-badge-compact, .status-badge-compact {
  font-weight: 700;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cycle-badge-compact {
  min-width: 36px;
  text-align: center;
}

.visit-info {
  display: flex;
  gap: 10px;
  align-items: center;
}

.visit-number {
  font-size: 16px;
  font-weight: 700;
  color: var(--ion-color-dark);
}

.date-compact {
  font-size: 14px;
  color: var(--ion-color-dark);
  background: rgba(73, 144, 226, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
}

.discharge-indicator ion-icon {
  font-size: 16px;
  background: white;
  border-radius: 50%;
  padding: 2px;
}

.header-row-2 {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 5px;
}

.metrics-compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.metric-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(73, 144, 226, 0.04);
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid rgba(73, 144, 226, 0.1);
  transition: all 0.2s ease;
}

.metric-compact:hover {
  background: rgba(73, 144, 226, 0.08);
  transform: translateY(-1px);
}

.metric-label-compact {
  font-size: 12px;
  color: var(--ion-color-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.metric-value-compact {
  font-size: 15px;
  font-weight: 800;
  color: var(--ion-color-dark);
}

.header-row-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 5px;
}

.additional-info-compact {
  display: flex;
  gap: 6px;
  flex: 1;
}

.info-chip-compact {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(73, 144, 226, 0.12);
  color: var(--ion-color-primary);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(73, 144, 226, 0.2);
}
.info-chip-compact ion-icon {
  font-size: 14px;
}
.info-chip-compact span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  font-weight: 600;
}

.actions-compact {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.action-btn-compact {
  --padding-start: 0px;
  --padding-end: 0px;
  --padding-top: 0px;
  --padding-bottom: 0px;
  height: 44px;
  width: 44px;
  --border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  margin: 0;
  flex-shrink: 0;
}
.action-btn-compact ion-icon {
  font-size: 24px;
  margin: 0 !important;
  padding: 0 !important;
}
.action-btn-compact:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.empty-state ion-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--ion-color-dark);
}
.empty-state p {
  font-size: 14px;
  color: var(--ion-color-medium);
  margin: 0;
  max-width: 300px;
}

@media (max-width: 768px) {
  .section-header {
    padding: 0 4px;
    gap: 12px;
  }
  .section-header .section-title {
    font-size: 18px;
  }
  .section-header .section-title ion-icon {
    font-size: 22px;
  }
  .section-header ion-button {
    height: 40px;
    font-size: 13px;
    --padding-start: 12px;
    --padding-end: 12px;
  }
  .section-header ion-button ion-icon {
    font-size: 16px;
  }
  .section-buttons-group {
    gap: 6px;
  }
  .followup-container {
    gap: 6px;
    padding: 0 8px;
  }
  .followup-card {
    padding: 10px;
    margin: 0;
    border-radius: 6px;
  }
  .followup-header-complete {
    gap: 5px;
  }
  .cycle-badge-compact, .status-badge-compact {
    font-size: 12px;
    padding: 4px 8px;
  }
  .visit-number {
    font-size: 15px;
  }
  .date-compact {
    font-size: 13px;
    padding: 3px 8px;
  }
  .metrics-compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
  .metric-compact {
    padding: 5px 3px;
  }
  .metric-label-compact {
    font-size: 11px;
  }
  .metric-value-compact {
    font-size: 14px;
  }
  .info-chip-compact {
    font-size: 12px;
    padding: 4px 8px;
    gap: 3px;
  }
  .info-chip-compact ion-icon {
    font-size: 13px;
  }
  .info-chip-compact span {
    max-width: 80px;
  }
  .action-btn-compact {
    height: 40px;
    width: 40px;
    --padding-start: 0px;
    --padding-end: 0px;
    --padding-top: 0px;
    --padding-bottom: 0px;
  }
  .action-btn-compact ion-icon {
    font-size: 22px;
    margin: 0 !important;
    padding: 0 !important;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .followup-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .followup-card {
    padding: 12px;
  }
  .metrics-compact {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .action-btn-compact {
    height: 46px;
    width: 46px;
    --padding-start: 0px;
    --padding-end: 0px;
    --padding-top: 0px;
    --padding-bottom: 0px;
  }
  .action-btn-compact ion-icon {
    font-size: 26px;
    margin: 0 !important;
    padding: 0 !important;
  }
}
@media (max-width: 480px) {
  .section-header {
    padding: 0 4px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .section-header .section-title {
    font-size: 16px;
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .section-header .section-title ion-icon {
    font-size: 20px;
  }
  .section-header ion-button {
    flex: 1 1 100%;
    height: 40px;
    font-size: 13px;
    --padding-start: 12px;
    --padding-end: 12px;
  }
  .section-header ion-button ion-icon {
    font-size: 16px;
  }
  .section-buttons-group {
    width: 100%;
    gap: 6px;
  }
  .section-buttons-group ion-button {
    flex: 1 1 auto;
  }
  .followup-container {
    padding: 0 6px;
    gap: 5px;
  }
  .followup-card {
    padding: 8px;
    border-radius: 6px;
  }
  .followup-header-complete {
    gap: 4px;
  }
  .cycle-badge-compact, .status-badge-compact {
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 5px;
  }
  .visit-number {
    font-size: 14px;
  }
  .date-compact {
    font-size: 12px;
    padding: 3px 6px;
  }
  .metrics-compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
  .metric-compact {
    padding: 4px 2px;
    border-radius: 4px;
  }
  .metric-label-compact {
    font-size: 10px;
  }
  .metric-value-compact {
    font-size: 13px;
  }
  .info-chip-compact {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 5px;
  }
  .info-chip-compact ion-icon {
    font-size: 12px;
  }
  .info-chip-compact span {
    max-width: 70px;
  }
  .action-btn-compact {
    height: 36px;
    width: 36px;
    --padding-start: 0px;
    --padding-end: 0px;
    --padding-top: 0px;
    --padding-bottom: 0px;
  }
  .action-btn-compact ion-icon {
    font-size: 20px;
    margin: 0 !important;
    padding: 0 !important;
  }
  .actions-compact {
    gap: 6px;
    justify-content: center;
  }
}
.children-info-card {
  margin: 16px 0;
}
.children-info-card .children-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.children-info-card .children-card ion-card-header {
  --background: #f8f9fa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.children-info-card .children-card ion-card-header ion-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ion-color-dark);
}
.children-info-card .children-card ion-card-header ion-card-title ion-icon {
  font-size: 20px;
}

.children-list {
  padding: 0;
}

.child-item {
  padding: 16px 0;
}
.child-item:first-child {
  padding-top: 0;
}
.child-item:last-child {
  padding-bottom: 0;
}

.child-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.child-header ion-icon {
  font-size: 24px;
}
.child-header .child-name {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--ion-color-dark);
  margin: 0;
}
.child-header .gender-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
}

.child-details {
  padding: 0;
  margin: 0;
}
.child-details ion-row {
  margin: 0;
}
.child-details ion-col {
  padding: 0 6px;
}
.child-details ion-col:first-child {
  padding-left: 0;
  padding-right: 8px;
}
.child-details ion-col:last-child {
  padding-right: 0;
  padding-left: 8px;
}

.child-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 6px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 6px;
  transition: all 0.2s ease;
}
.child-detail-item:hover {
  background: rgba(73, 144, 226, 0.05);
  border-color: rgba(73, 144, 226, 0.2);
}
.child-detail-item ion-icon {
  font-size: 16px;
  margin-top: 2px;
  width: 20px;
  flex-shrink: 0;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.detail-label {
  font-size: 11px;
  color: var(--ion-color-medium);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.detail-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ion-color-dark);
  word-wrap: break-word;
}

.view-child-btn {
  --padding-start: 8px;
  --padding-end: 8px;
  --padding-top: 6px;
  --padding-bottom: 6px;
  font-size: 12px;
  height: auto;
  min-height: 32px;
}
.view-child-btn ion-icon {
  font-size: 14px;
}

.child-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
  margin: 16px 0;
}

@media (max-width: 767px) {
  .children-info-card {
    margin: 12px 0;
  }
  .children-info-card .children-card ion-card-header ion-card-title {
    font-size: 14px;
  }
  .children-info-card .children-card ion-card-header ion-card-title ion-icon {
    font-size: 18px;
  }
  .child-item {
    padding: 12px 0;
  }
  .child-header {
    gap: 10px;
    margin-bottom: 10px;
  }
  .child-header ion-icon {
    font-size: 20px;
  }
  .child-header .child-name {
    font-size: 14px;
  }
  .child-header .gender-badge {
    font-size: 10px;
    padding: 3px 6px;
  }
  .child-details ion-col {
    padding: 0 3px;
  }
  .child-details ion-col:first-child {
    padding-left: 0;
    padding-right: 5px;
  }
  .child-details ion-col:last-child {
    padding-right: 0;
    padding-left: 5px;
  }
  .child-detail-item {
    padding: 6px 4px;
    gap: 8px;
    margin-bottom: 4px;
  }
  .child-detail-item ion-icon {
    font-size: 14px;
    width: 16px;
  }
  .detail-label {
    font-size: 10px;
  }
  .detail-value {
    font-size: 12px;
  }
  .view-child-btn {
    font-size: 11px;
    --padding-start: 6px;
    --padding-end: 6px;
  }
  .view-child-btn ion-icon {
    font-size: 12px;
  }
  .child-divider {
    margin: 12px 0;
  }
}
.verified-badge-inline {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  margin-left: 4px;
}
.verified-badge-inline ion-icon {
  font-size: 12px;
  margin-inline-end: 0 !important;
}

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

.measurements-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 100%;
}
.measurements-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);
  font-size: 0.85rem;
  white-space: normal;
  word-wrap: break-word;
}
.measurements-table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--ion-color-light);
  font-size: 0.85rem;
  text-align: center;
  vertical-align: middle;
}
.measurements-table td.date-cell {
  font-weight: 600;
  color: var(--ion-color-primary);
  text-align: left;
}
.measurements-table td.actions-cell {
  white-space: nowrap;
  width: 80px;
  padding: 10px 2px;
}
.measurements-table td.actions-cell ion-button {
  margin: 0 1px;
  --padding-start: 4px;
  --padding-end: 4px;
}
.measurements-table td.actions-cell .disabled-text {
  color: var(--ion-color-medium);
  font-size: 0.9rem;
}
.measurements-table tbody tr {
  transition: all 0.2s ease;
}
.measurements-table tbody tr:hover {
  background-color: var(--ion-color-light-tint);
}
.measurements-table tbody tr.nutrition-danger {
  background-color: rgba(var(--ion-color-danger-rgb), 0.05);
  border-left: 3px solid var(--ion-color-danger);
}
.measurements-table tbody tr.nutrition-warning {
  background-color: rgba(var(--ion-color-warning-rgb), 0.05);
  border-left: 3px solid var(--ion-color-warning);
}
.measurements-table tbody tr.nutrition-success {
  background-color: rgba(var(--ion-color-success-rgb), 0.05);
  border-left: 3px solid var(--ion-color-success);
}
.measurements-table tbody tr:last-child td {
  border-bottom: none;
}

.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.2rem;
}
.empty-state p {
  color: var(--ion-color-medium);
  margin: 0;
  font-size: 0.95rem;
}

.pagination-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
  margin-top: 16px;
  border-top: 1px solid var(--ion-color-light);
}

.pagination-info {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ion-color-medium);
  font-weight: 500;
}

.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pagination-controls ion-button {
  --padding-start: 12px;
  --padding-end: 12px;
  height: 36px;
  font-size: 0.85rem;
  font-weight: 500;
}
.pagination-controls ion-button:disabled {
  opacity: 0.4;
}

.page-numbers {
  display: flex;
  gap: 4px;
  align-items: center;
}
.page-numbers ion-button {
  --padding-start: 8px;
  --padding-end: 8px;
  min-width: 36px;
  height: 36px;
  font-weight: 600;
}
.page-numbers ion-button.active-page {
  --background: var(--ion-color-primary);
  --color: white;
  font-weight: 700;
}

@media (max-width: 768px) {
  .pagination-container {
    padding: 12px 0;
    gap: 8px;
  }
  .pagination-info {
    font-size: 0.8rem;
  }
  .pagination-controls {
    gap: 6px;
  }
  .pagination-controls ion-button {
    height: 32px;
    font-size: 0.8rem;
    --padding-start: 8px;
    --padding-end: 8px;
  }
  .page-numbers {
    gap: 2px;
  }
  .page-numbers ion-button {
    min-width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}
.summary-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  padding: 0;
}

.summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(73, 144, 226, 0.05), rgba(255, 255, 255, 0.95));
  border: 1px solid rgba(73, 144, 226, 0.15);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: rgba(73, 144, 226, 0.3);
}
.summary-card ion-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.summary-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.summary-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ion-color-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.summary-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--ion-color-dark);
  line-height: 1.3;
  word-wrap: break-word;
  word-break: break-word;
}
.summary-value ion-badge {
  font-size: 13px;
  padding: 4px 10px;
}

@media (max-width: 768px) {
  .summary-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }
  .summary-card {
    padding: 12px;
    gap: 10px;
  }
  .summary-card ion-icon {
    font-size: 28px;
  }
  .summary-label {
    font-size: 10px;
  }
  .summary-value {
    font-size: 16px;
  }
  .summary-value ion-badge {
    font-size: 11px;
    padding: 3px 8px;
  }
}
@media (max-width: 480px) {
  .summary-container {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  .summary-card {
    padding: 10px;
    gap: 8px;
  }
  .summary-card ion-icon {
    font-size: 24px;
  }
  .summary-label {
    font-size: 9px;
  }
  .summary-value {
    font-size: 14px;
  }
  .summary-value ion-badge {
    font-size: 10px;
    padding: 2px 6px;
  }
}
.status-count-container {
  margin: 20px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.status-count-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ion-color-dark);
  margin: 0 0 12px 0;
}
.status-count-title ion-icon {
  font-size: 20px;
  color: var(--ion-color-primary);
}

.status-count-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.status-count-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  border-left: 4px solid transparent;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.status-count-item:hover {
  transform: translateX(4px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
.status-count-item.status-danger {
  border-left-color: var(--ion-color-danger);
  background: linear-gradient(135deg, rgba(var(--ion-color-danger-rgb), 0.05), white);
}
.status-count-item.status-warning {
  border-left-color: var(--ion-color-warning);
  background: linear-gradient(135deg, rgba(var(--ion-color-warning-rgb), 0.05), white);
}
.status-count-item.status-success {
  border-left-color: var(--ion-color-success);
  background: linear-gradient(135deg, rgba(var(--ion-color-success-rgb), 0.05), white);
}

.status-count-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ion-color-dark);
}

.status-count {
  font-size: 12px;
  color: var(--ion-color-medium);
}

.status-badge ion-badge {
  font-size: 16px;
  font-weight: 700;
  padding: 6px 12px;
}

.item-distribution-container {
  margin: 20px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.item-distribution-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ion-color-dark);
  margin: 0 0 12px 0;
}
.item-distribution-title ion-icon {
  font-size: 20px;
  color: var(--ion-color-secondary);
}

.item-distribution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.item-distribution-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: white;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.item-distribution-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-color: rgba(var(--ion-color-secondary-rgb), 0.3);
}

.item-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--ion-color-secondary-rgb), 0.1), rgba(var(--ion-color-secondary-rgb), 0.05));
  border-radius: 10px;
}
.item-icon ion-icon {
  font-size: 28px;
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.item-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ion-color-dark);
  word-wrap: break-word;
}

.item-quantity {
  font-size: 18px;
  font-weight: 700;
  color: var(--ion-color-secondary);
}

.item-count {
  font-size: 12px;
  color: var(--ion-color-medium);
  font-style: italic;
}

@media (max-width: 768px) {
  .status-count-container,
  .item-distribution-container {
    padding: 12px;
    margin: 16px 0;
  }
  .status-count-title,
  .item-distribution-title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .status-count-title ion-icon,
  .item-distribution-title ion-icon {
    font-size: 18px;
  }
  .status-count-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .status-count-item {
    padding: 10px 12px;
  }
  .status-name {
    font-size: 13px;
  }
  .status-count {
    font-size: 11px;
  }
  .status-badge ion-badge {
    font-size: 14px;
    padding: 4px 10px;
  }
  .item-distribution-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .item-distribution-card {
    padding: 12px;
  }
  .item-icon {
    width: 40px;
    height: 40px;
  }
  .item-icon ion-icon {
    font-size: 24px;
  }
  .item-name {
    font-size: 14px;
  }
  .item-quantity {
    font-size: 16px;
  }
  .item-count {
    font-size: 11px;
  }
}
@media (max-width: 480px) {
  .status-count-container,
  .item-distribution-container {
    padding: 10px;
    margin: 12px 0;
  }
  .status-count-title,
  .item-distribution-title {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .status-count-title ion-icon,
  .item-distribution-title ion-icon {
    font-size: 16px;
  }
  .status-count-item {
    padding: 8px 10px;
  }
  .status-name {
    font-size: 12px;
  }
  .status-count {
    font-size: 10px;
  }
  .status-badge ion-badge {
    font-size: 12px;
    padding: 3px 8px;
  }
  .item-distribution-card {
    padding: 10px;
    gap: 10px;
  }
  .item-icon {
    width: 36px;
    height: 36px;
  }
  .item-icon ion-icon {
    font-size: 20px;
  }
  .item-name {
    font-size: 13px;
  }
  .item-quantity {
    font-size: 15px;
  }
  .item-count {
    font-size: 10px;
  }
}
.compact-summary {
  background: rgba(73, 144, 226, 0.04);
  border-radius: 8px;
  padding: 12px 8px;
  margin-bottom: 16px;
  border: 1px solid rgba(73, 144, 226, 0.1);
}
.compact-summary ion-row {
  margin: 0;
}
.compact-summary ion-col {
  padding: 0 6px;
}

.nutrition-breakdown-grid {
  padding: 0;
  margin: 0;
}
.nutrition-breakdown-grid ion-row {
  margin: 0;
}
.nutrition-breakdown-grid ion-col {
  padding: 0 6px;
}

.nutrition-status-item {
  height: 100%;
}

.compact-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 4px;
  background: white;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  min-height: 60px;
  transition: all 0.2s ease;
}
.compact-summary-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-color: rgba(73, 144, 226, 0.2);
}

.compact-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ion-color-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  line-height: 1.2;
}

.compact-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--ion-color-dark);
  line-height: 1.3;
  word-break: break-word;
}

.compact-badge {
  font-size: 11px !important;
  padding: 3px 8px !important;
  font-weight: 600 !important;
}

.distribution-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: center;
}
.distribution-value strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ion-color-dark);
}
.distribution-value .unit-text {
  font-size: 11px;
  font-weight: 500;
  color: var(--ion-color-medium);
}

@media (max-width: 768px) {
  .compact-summary {
    padding: 10px 6px;
    margin-bottom: 14px;
  }
  .compact-summary ion-col {
    padding: 0 4px;
  }
  .compact-summary-item {
    padding: 6px 3px;
    min-height: 55px;
  }
  .compact-label {
    font-size: 9px;
  }
  .compact-value {
    font-size: 13px;
  }
  .compact-badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
  .distribution-value strong {
    font-size: 13px;
  }
  .distribution-value .unit-text {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .compact-summary {
    padding: 8px 4px;
    margin-bottom: 12px;
  }
  .compact-summary ion-col {
    padding: 0 3px;
  }
  .compact-summary-item {
    padding: 5px 2px;
    min-height: 50px;
  }
  .compact-label {
    font-size: 8px;
    margin-bottom: 3px;
  }
  .compact-value {
    font-size: 12px;
  }
  .compact-badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
  }
  .distribution-value strong {
    font-size: 12px;
  }
  .distribution-value .unit-text {
    font-size: 9px;
  }
}
.collapsible-header {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: all 0.2s ease;
  position: relative;
  background: linear-gradient(135deg, rgba(73, 144, 226, 0.08), rgba(73, 144, 226, 0.04));
  padding: 16px 20px;
  border-radius: 12px 12px 0 0;
  border-bottom: 2px solid rgba(73, 144, 226, 0.15);
  margin-bottom: 0;
}
.collapsible-header:hover {
  background: linear-gradient(135deg, rgba(73, 144, 226, 0.12), rgba(73, 144, 226, 0.06));
  border-bottom-color: rgba(73, 144, 226, 0.25);
}
.collapsible-header:active {
  background: linear-gradient(135deg, rgba(73, 144, 226, 0.15), rgba(73, 144, 226, 0.08));
}
.collapsible-header .section-title {
  margin: 0;
  font-weight: 700;
  color: var(--ion-color-primary);
}

.collapse-icon {
  font-size: 24px;
  color: var(--ion-color-primary);
  transition: transform 0.3s ease;
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .collapsible-header {
    padding: 14px 16px;
  }
  .collapsible-header .section-title {
    font-size: 18px;
  }
  .collapse-icon {
    font-size: 22px;
  }
}
@media (max-width: 480px) {
  .collapsible-header {
    padding: 12px 14px;
  }
  .collapsible-header .section-title {
    font-size: 16px;
  }
  .collapsible-header .section-title ion-icon {
    font-size: 20px;
  }
  .collapse-icon {
    font-size: 20px;
  }
}
.measurements-table tr.clickable-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.measurements-table tr.clickable-row:hover {
  background-color: rgba(73, 144, 226, 0.05);
}`, "",{"version":3,"sources":["webpack://./src/app/pages/child-detail/child-detail.page.scss"],"names":[],"mappings":"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","sourcesContent":["ion-icon{\n   margin-inline-end: .75em !important;\n}\n\n// Card styles imported from followup-create page\n:root {\n  --ion-color-primary: #4990E2;\n  --ion-color-primary-rgb: 73, 144, 226;\n  --ion-color-primary-contrast: #ffffff;\n  --ion-color-secondary: #6D5AE6;\n  --ion-color-secondary-rgb: 109, 90, 230;\n  --ion-color-secondary-contrast: #ffffff;\n  --ion-color-tertiary: #FF8A65;\n  --ion-color-tertiary-rgb: 255, 138, 101;\n  --ion-color-tertiary-contrast: #ffffff;\n  --ion-color-light: #f4f5f8;\n  --ion-color-medium: #92949c;\n  --ion-color-dark: #222428;\n}\n\n// Main Section Header (title on left, buttons on right)\n.section-header-main {\n  max-width: 800px;\n  margin: 0 auto 24px auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 0 4px;\n  flex-wrap: wrap;\n}\n\n.section-title-main {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0;\n  color: var(--ion-color-dark);\n  flex: 0 1 auto;\n\n  ion-icon {\n    font-size: 28px;\n    flex-shrink: 0;\n  }\n}\n\n.action-buttons-group {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  align-items: center;\n  flex: 0 1 auto;\n\n  .action-btn {\n    --border-radius: 12px;\n    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n    height: 44px;\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: none;\n    min-width: 120px;\n    transition: all 0.3s ease;\n\n    ion-icon {\n      font-size: 18px;\n      margin-inline-end: 6px !important;\n    }\n\n    &:hover {\n      transform: translateY(-2px);\n      --box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);\n    }\n\n    &:active {\n      transform: translateY(0);\n    }\n  }\n}\n\n// GMP Buttons Section (below child info card)\n.gmp-buttons-section {\n  display: flex;\n  gap: 12px;\n  justify-content: center;\n  flex-wrap: wrap;\n  padding: 16px 0 0 0;\n  margin: 0;\n\n  .gmp-btn {\n    --border-radius: 12px;\n    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n    height: 48px;\n    font-size: 15px;\n    font-weight: 600;\n    text-transform: none;\n    flex: 1;\n    min-width: 150px;\n    max-width: 300px;\n    transition: all 0.3s ease;\n\n    ion-icon {\n      font-size: 20px;\n      margin-inline-end: 6px !important;\n    }\n\n    &:hover {\n      transform: translateY(-2px);\n      --box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);\n    }\n\n    &:active {\n      transform: translateY(0);\n    }\n  }\n}\n\n// Quick Action Buttons Section (highlighted buttons below basic info)\n.quick-action-buttons {\n  max-width: 800px;\n  margin: 16px auto 24px;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 12px;\n  align-items: stretch;\n\n  .quick-action-btn {\n    width: 100%;\n    height: 48px;\n    --border-radius: 12px;\n    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    font-size: 15px;\n    font-weight: 600;\n    text-transform: none;\n    transition: all 0.3s ease;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    ion-icon {\n      font-size: 20px;\n      margin-inline-end: 8px !important;\n    }\n\n    &:hover:not([disabled]) {\n      transform: translateY(-2px);\n      --box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n    }\n\n    &:active:not([disabled]) {\n      transform: translateY(0);\n    }\n  }\n}\n\n@media (min-width: 577px) and (max-width: 1024px) {\n  .quick-action-buttons {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 10px;\n\n    .quick-action-btn {\n      height: 44px;\n      font-size: 13px;\n\n      ion-icon {\n        font-size: 18px;\n        margin-inline-end: 6px !important;\n      }\n    }\n  }\n}\n\n@media (max-width: 576px) {\n  .quick-action-buttons {\n    grid-template-columns: 1fr;\n    gap: 10px;\n\n    .quick-action-btn {\n      width: 100%;\n    }\n  }\n}\n\n@media (max-width: 480px) {\n  .quick-action-buttons {\n    gap: 8px;\n\n    .quick-action-btn {\n      height: 42px;\n      font-size: 14px;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .section-header-main {\n    margin-bottom: 20px;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 12px;\n  }\n\n  .section-title-main {\n    font-size: 20px;\n    width: 100%;\n\n    ion-icon {\n      font-size: 24px;\n    }\n  }\n\n  .action-buttons-group {\n    width: 100%;\n    justify-content: stretch;\n\n    .action-btn {\n      flex: 1 1 auto;\n      height: 42px;\n      font-size: 13px;\n      min-width: 100px;\n\n      ion-icon {\n        font-size: 16px;\n      }\n    }\n  }\n\n  .gmp-buttons-section {\n    padding: 12px 0 0 0;\n    gap: 10px;\n\n    .gmp-btn {\n      height: 44px;\n      font-size: 14px;\n      min-width: 140px;\n\n      ion-icon {\n        font-size: 18px;\n      }\n    }\n  }\n}\n\n@media (max-width: 480px) {\n  .section-header-main {\n    margin-bottom: 16px;\n  }\n\n  .section-title-main {\n    font-size: 18px;\n\n    ion-icon {\n      font-size: 22px;\n    }\n  }\n\n  .action-buttons-group {\n    flex-direction: column;\n    gap: 8px;\n\n    .action-btn {\n      width: 100%;\n      min-width: auto;\n      height: 40px;\n      font-size: 13px;\n    }\n  }\n\n  .gmp-buttons-section {\n    flex-direction: column;\n    gap: 8px;\n    padding: 12px 0 0 0;\n\n    .gmp-btn {\n      flex: 1 1 100%;\n      max-width: none;\n      height: 42px;\n      font-size: 14px;\n\n      ion-icon {\n        font-size: 18px;\n      }\n    }\n  }\n}\n\n// Main container\nion-content {\n  --padding-start: 16px;\n  --padding-end: 16px;\n  --padding-top: 20px;\n  --padding-bottom: 20px;\n}\n\n.card-container {\n  max-width: 800px;\n  margin: 0 auto 20px auto;\n}\n\nion-card {\n  border-radius: 16px;\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  margin: 0 0 16px 0;\n}\n\n@media (max-width: 768px) {\n  ion-content {\n    --padding-start: 12px;\n    --padding-end: 12px;\n    --padding-top: 16px;\n    --padding-bottom: 16px;\n  }\n\n  .card-container {\n    margin-bottom: 16px;\n  }\n\n  .child-info-card {\n    .profile-content {\n      padding: 16px;\n    }\n\n    .content-grid {\n      ion-col {\n        padding: 0 3px;\n\n        &:first-child {\n          padding-left: 0;\n          padding-right: 5px;\n        }\n\n        &:last-child {\n          padding-right: 0;\n          padding-left: 5px;\n        }\n      }\n    }\n\n    .info-item {\n      padding: 10px 6px;\n      gap: 10px;\n      margin-bottom: 6px;\n\n      ion-icon {\n        font-size: 16px;\n        width: 18px;\n      }\n    }\n\n    .item-content {\n      .label {\n        font-size: 10px;\n        letter-spacing: 0.3px;\n      }\n\n      .value {\n        font-size: 13px;\n      }\n    }\n  }\n\n  .verified-badge-inline {\n    font-size: 10px;\n    padding: 2px 6px;\n\n    ion-icon {\n      font-size: 11px;\n    }\n  }\n}\n\n@media (max-width: 480px) {\n  ion-content {\n    --padding-start: 8px;\n    --padding-end: 8px;\n    --padding-top: 12px;\n    --padding-bottom: 12px;\n  }\n\n  .card-container {\n    margin-bottom: 12px;\n  }\n\n  .child-info-card {\n    .profile-content {\n      padding: 12px;\n    }\n\n    .content-grid {\n      ion-col {\n        padding: 0 2px;\n\n        &:first-child {\n          padding-left: 0;\n          padding-right: 4px;\n        }\n\n        &:last-child {\n          padding-right: 0;\n          padding-left: 4px;\n        }\n      }\n    }\n\n    .info-item {\n      padding: 8px 4px;\n      gap: 8px;\n      margin-bottom: 5px;\n\n      ion-icon {\n        font-size: 14px;\n        width: 16px;\n      }\n    }\n\n    .item-content {\n      .label {\n        font-size: 9px;\n        letter-spacing: 0.2px;\n      }\n\n      .value {\n        font-size: 12px;\n      }\n    }\n  }\n}\n\n// Child Information Card (matching woman-detail design)\n.child-info-card {\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  margin: 0;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n\n  ion-card-content {\n    padding-inline-start: 6px;\n    padding-inline-end: 6px;\n    padding-top: 6px;\n    padding-bottom: 6px;\n  }\n}\n\n// Gender-based background colors\n.child-info-card-female {\n  background: linear-gradient(135deg, rgb(234 167 205 / 40%), rgba(255, 192, 203, 0.05))\n}\n\n.child-info-card-male {\n  background: linear-gradient(135deg, rgba(142, 243, 201, 0.289), rgba(135, 206, 250, 0.05));\n}\n\n.profile-content {\n  padding: 20px;\n}\n\n.content-grid {\n  padding: 0;\n  margin: 0;\n\n  ion-row {\n    margin: 0;\n  }\n\n  ion-col {\n    padding: 0 6px;\n    display: flex;\n    flex-direction: column;\n\n    &:first-child {\n      padding-left: 0;\n      padding-right: 8px;\n    }\n\n    &:last-child {\n      padding-right: 0;\n      padding-left: 8px;\n    }\n  }\n}\n\n.child-info-card .info-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 12px 8px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 6px;\n  border: 1px solid rgba(0, 0, 0, 0.06);\n  margin-bottom: 8px;\n  transition: all 0.2s ease;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  &:hover {\n    background: rgba(73, 144, 226, 0.04);\n    border-color: rgba(73, 144, 226, 0.2);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  }\n\n  ion-icon {\n    font-size: 18px;\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-top: 2px;\n    margin-inline-end: 0 !important;\n  }\n}\n\n.child-info-card .item-content {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  flex: 1;\n  min-width: 0;\n  text-align: left;\n\n  .label {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--ion-color-medium);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    line-height: 1.2;\n    margin: 0;\n    text-align: left;\n  }\n\n  .value {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--ion-color-dark);\n    line-height: 1.4;\n    word-wrap: break-word;\n    word-break: break-word;\n    margin: 0;\n    text-align: left;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 6px;\n\n    &:empty::after {\n      content: '-';\n      color: var(--ion-color-medium);\n      font-style: italic;\n    }\n\n    &.clickable {\n      color: var(--ion-color-primary);\n      cursor: pointer;\n\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    .subtitle-text {\n      color: var(--ion-color-medium);\n      font-size: 12px;\n      font-weight: 400;\n    }\n  }\n}\n\n// Section Header (consistent with measurement-create page)\n.section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  padding: 0 4px;\n  gap: 16px;\n  flex-wrap: wrap;\n\n  ion-button {\n    flex-shrink: 0;\n    height: 44px;\n    --padding-start: 16px;\n    --padding-end: 16px;\n    --border-radius: 12px;\n    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    font-size: 14px;\n    font-weight: 600;\n    text-transform: none;\n    transition: all 0.3s ease;\n\n    &:hover {\n      transform: translateY(-2px);\n      --box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    ion-icon {\n      font-size: 18px;\n    }\n  }\n}\n\n.section-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 20px;\n  font-weight: 600;\n  margin: 0;\n  color: var(--ion-color-dark);\n  flex: 1 1 auto;\n  min-width: 0;\n\n  ion-icon {\n    font-size: 24px;\n    flex-shrink: 0;\n  }\n}\n\n.section-buttons-group {\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  align-items: center;\n}\n\n// Followup Container - Mobile First Design\n.followup-container {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 0;\n}\n\n.followup-card {\n  background: white;\n  border-radius: 8px;\n  padding: 12px;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);\n  transition: all 0.2s ease;\n  position: relative;\n  overflow: hidden;\n  border-left: 3px solid rgba(0, 0, 0, 0.1);\n\n  // Nutrition status indicators\n  &.nutrition-danger {\n    border-left-color: #dc3545;\n    background: linear-gradient(135deg, rgba(220, 53, 69, 0.01), rgba(255, 255, 255, 1));\n  }\n\n  &.nutrition-warning {\n    border-left-color: #ffc107;\n    background: linear-gradient(135deg, rgba(255, 193, 7, 0.01), rgba(255, 255, 255, 1));\n  }\n\n  &.nutrition-success {\n    border-left-color: #28a745;\n    background: linear-gradient(135deg, rgba(40, 167, 69, 0.01), rgba(255, 255, 255, 1));\n  }\n\n  &:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n  }\n}\n\n// Compact All-in-One Header Design\n.followup-header-complete {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.header-row-1 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.cycle-status {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n\n.cycle-badge-compact, .status-badge-compact {\n  font-weight: 700;\n  font-size: 13px;\n  padding: 5px 10px;\n  border-radius: 6px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.cycle-badge-compact {\n  min-width: 36px;\n  text-align: center;\n}\n\n.visit-info {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n}\n\n.visit-number {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--ion-color-dark);\n}\n\n.date-compact {\n  font-size: 14px;\n  color: var(--ion-color-dark);\n  background: rgba(73, 144, 226, 0.1);\n  padding: 4px 10px;\n  border-radius: 6px;\n  font-weight: 600;\n}\n\n.discharge-indicator {\n  ion-icon {\n    font-size: 16px;\n    background: white;\n    border-radius: 50%;\n    padding: 2px;\n  }\n}\n\n.header-row-2 {\n  border-top: 1px solid rgba(0, 0, 0, 0.08);\n  padding-top: 5px;\n}\n\n.metrics-compact {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 6px;\n}\n\n.metric-compact {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: rgba(73, 144, 226, 0.04);\n  padding: 6px 4px;\n  border-radius: 6px;\n  border: 1px solid rgba(73, 144, 226, 0.1);\n  transition: all 0.2s ease;\n}\n\n.metric-compact:hover {\n  background: rgba(73, 144, 226, 0.08);\n  transform: translateY(-1px);\n}\n\n.metric-label-compact {\n  font-size: 12px;\n  color: var(--ion-color-primary);\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 2px;\n}\n\n.metric-value-compact {\n  font-size: 15px;\n  font-weight: 800;\n  color: var(--ion-color-dark);\n}\n\n.header-row-3 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid rgba(0, 0, 0, 0.08);\n  padding-top: 5px;\n}\n\n.additional-info-compact {\n  display: flex;\n  gap: 6px;\n  flex: 1;\n}\n\n.info-chip-compact {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background: rgba(73, 144, 226, 0.12);\n  color: var(--ion-color-primary);\n  padding: 5px 10px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 600;\n  border: 1px solid rgba(73, 144, 226, 0.2);\n\n  ion-icon {\n    font-size: 14px;\n  }\n\n  span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 100px;\n    font-weight: 600;\n  }\n}\n\n.actions-compact {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  justify-content: flex-end;\n  flex-shrink: 0;\n}\n\n.action-btn-compact {\n  --padding-start: 0px;\n  --padding-end: 0px;\n  --padding-top: 0px;\n  --padding-bottom: 0px;\n  height: 44px;\n  width: 44px;\n  --border-radius: 8px;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  margin: 0;\n  flex-shrink: 0;\n\n  ion-icon {\n    font-size: 24px;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n  &:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);\n  }\n}\n\n\n// Empty State (consistent with woman-add-edit)\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  text-align: center;\n  \n  ion-icon {\n    font-size: 48px;\n    margin-bottom: 16px;\n  }\n  \n  h3 {\n    font-size: 18px;\n    font-weight: 600;\n    margin: 0 0 8px 0;\n    color: var(--ion-color-dark);\n  }\n  \n  p {\n    font-size: 14px;\n    color: var(--ion-color-medium);\n    margin: 0;\n    max-width: 300px;\n  }\n}\n\n// Mobile and Tablet Responsive Design\n@media (max-width: 768px) {\n  .section-header {\n    padding: 0 4px;\n    gap: 12px;\n\n    .section-title {\n      font-size: 18px;\n\n      ion-icon {\n        font-size: 22px;\n      }\n    }\n\n    ion-button {\n      height: 40px;\n      font-size: 13px;\n      --padding-start: 12px;\n      --padding-end: 12px;\n\n      ion-icon {\n        font-size: 16px;\n      }\n    }\n  }\n\n  .section-buttons-group {\n    gap: 6px;\n  }\n\n  .followup-container {\n    gap: 6px;\n    padding: 0 8px;\n  }\n\n  .followup-card {\n    padding: 10px;\n    margin: 0;\n    border-radius: 6px;\n  }\n\n  .followup-header-complete {\n    gap: 5px;\n  }\n\n  .cycle-badge-compact, .status-badge-compact {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n\n  .visit-number {\n    font-size: 15px;\n  }\n\n  .date-compact {\n    font-size: 13px;\n    padding: 3px 8px;\n  }\n\n  .metrics-compact {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 5px;\n  }\n\n  .metric-compact {\n    padding: 5px 3px;\n  }\n\n  .metric-label-compact {\n    font-size: 11px;\n  }\n\n  .metric-value-compact {\n    font-size: 14px;\n  }\n\n  .info-chip-compact {\n    font-size: 12px;\n    padding: 4px 8px;\n    gap: 3px;\n\n    ion-icon {\n      font-size: 13px;\n    }\n\n    span {\n      max-width: 80px;\n    }\n  }\n\n  .action-btn-compact {\n    height: 40px;\n    width: 40px;\n    --padding-start: 0px;\n    --padding-end: 0px;\n    --padding-top: 0px;\n    --padding-bottom: 0px;\n\n    ion-icon {\n      font-size: 22px;\n      margin: 0 !important;\n      padding: 0 !important;\n    }\n  }\n}\n\n// Tablet Design (769px - 1024px)\n@media (min-width: 769px) and (max-width: 1024px) {\n  .followup-container {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n  }\n\n  .followup-card {\n    padding: 12px;\n  }\n\n  .metrics-compact {\n    grid-template-columns: repeat(4, 1fr);\n    gap: 6px;\n  }\n\n  .action-btn-compact {\n    height: 46px;\n    width: 46px;\n    --padding-start: 0px;\n    --padding-end: 0px;\n    --padding-top: 0px;\n    --padding-bottom: 0px;\n\n    ion-icon {\n      font-size: 26px;\n      margin: 0 !important;\n      padding: 0 !important;\n    }\n  }\n}\n\n// Small Mobile Enhancements\n@media (max-width: 480px) {\n  .section-header {\n    padding: 0 4px;\n    gap: 8px;\n    flex-wrap: wrap;\n\n    .section-title {\n      font-size: 16px;\n      flex: 1 1 100%;\n      justify-content: flex-start;\n\n      ion-icon {\n        font-size: 20px;\n      }\n    }\n\n    ion-button {\n      flex: 1 1 100%;\n      height: 40px;\n      font-size: 13px;\n      --padding-start: 12px;\n      --padding-end: 12px;\n\n      ion-icon {\n        font-size: 16px;\n      }\n    }\n  }\n\n  .section-buttons-group {\n    width: 100%;\n    gap: 6px;\n\n    ion-button {\n      flex: 1 1 auto;\n    }\n  }\n\n  .followup-container {\n    padding: 0 6px;\n    gap: 5px;\n  }\n\n  .followup-card {\n    padding: 8px;\n    border-radius: 6px;\n  }\n\n  .followup-header-complete {\n    gap: 4px;\n  }\n\n  .cycle-badge-compact, .status-badge-compact {\n    font-size: 11px;\n    padding: 3px 7px;\n    border-radius: 5px;\n  }\n\n  .visit-number {\n    font-size: 14px;\n  }\n\n  .date-compact {\n    font-size: 12px;\n    padding: 3px 6px;\n  }\n\n  .metrics-compact {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 4px;\n  }\n\n  .metric-compact {\n    padding: 4px 2px;\n    border-radius: 4px;\n  }\n\n  .metric-label-compact {\n    font-size: 10px;\n  }\n\n  .metric-value-compact {\n    font-size: 13px;\n  }\n\n  .info-chip-compact {\n    font-size: 11px;\n    padding: 3px 6px;\n    border-radius: 5px;\n\n    ion-icon {\n      font-size: 12px;\n    }\n\n    span {\n      max-width: 70px;\n    }\n  }\n\n  .action-btn-compact {\n    height: 36px;\n    width: 36px;\n    --padding-start: 0px;\n    --padding-end: 0px;\n    --padding-top: 0px;\n    --padding-bottom: 0px;\n\n    ion-icon {\n      font-size: 20px;\n      margin: 0 !important;\n      padding: 0 !important;\n    }\n  }\n\n  .actions-compact {\n    gap: 6px;\n    justify-content: center;\n  }\n}\n\n// Children Section Styles (matching woman-detail design)\n.children-info-card {\n  margin: 16px 0;\n\n  .children-card {\n    border-radius: 12px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n    margin: 0;\n    border: 1px solid rgba(0, 0, 0, 0.08);\n\n    ion-card-header {\n      --background: #f8f9fa;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.06);\n\n      ion-card-title {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        font-size: 16px;\n        font-weight: 600;\n        color: var(--ion-color-dark);\n\n        ion-icon {\n          font-size: 20px;\n        }\n      }\n    }\n  }\n}\n\n.children-list {\n  padding: 0;\n}\n\n.child-item {\n  padding: 16px 0;\n\n  &:first-child {\n    padding-top: 0;\n  }\n\n  &:last-child {\n    padding-bottom: 0;\n  }\n}\n\n.child-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-top: 8px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.06);\n\n  ion-icon {\n    font-size: 24px;\n  }\n\n  .child-name {\n    flex: 1;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--ion-color-dark);\n    margin: 0;\n  }\n\n  .gender-badge {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 3px 8px;\n  }\n}\n\n.child-details {\n  padding: 0;\n  margin: 0;\n\n  ion-row {\n    margin: 0;\n  }\n\n  ion-col {\n    padding: 0 6px;\n\n    &:first-child {\n      padding-left: 0;\n      padding-right: 8px;\n    }\n\n    &:last-child {\n      padding-right: 0;\n      padding-left: 8px;\n    }\n  }\n}\n\n.child-detail-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 8px 6px;\n  background: rgba(255, 255, 255, 0.8);\n  border-radius: 6px;\n  border: 1px solid rgba(0, 0, 0, 0.06);\n  margin-bottom: 6px;\n  transition: all 0.2s ease;\n\n  &:hover {\n    background: rgba(73, 144, 226, 0.05);\n    border-color: rgba(73, 144, 226, 0.2);\n  }\n\n  ion-icon {\n    font-size: 16px;\n    margin-top: 2px;\n    width: 20px;\n    flex-shrink: 0;\n  }\n}\n\n.detail-content {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex: 1;\n  min-width: 0;\n}\n\n.detail-label {\n  font-size: 11px;\n  color: var(--ion-color-medium);\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n  word-wrap: break-word;\n}\n\n.view-child-btn {\n  --padding-start: 8px;\n  --padding-end: 8px;\n  --padding-top: 6px;\n  --padding-bottom: 6px;\n  font-size: 12px;\n  height: auto;\n  min-height: 32px;\n\n  ion-icon {\n    font-size: 14px;\n  }\n}\n\n.child-divider {\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);\n  margin: 16px 0;\n}\n\n// Mobile responsive design for children section\n@media (max-width: 767px) {\n  .children-info-card {\n    margin: 12px 0;\n\n    .children-card {\n      ion-card-header {\n        ion-card-title {\n          font-size: 14px;\n\n          ion-icon {\n            font-size: 18px;\n          }\n        }\n      }\n    }\n  }\n\n  .child-item {\n    padding: 12px 0;\n  }\n\n  .child-header {\n    gap: 10px;\n    margin-bottom: 10px;\n\n    ion-icon {\n      font-size: 20px;\n    }\n\n    .child-name {\n      font-size: 14px;\n    }\n\n    .gender-badge {\n      font-size: 10px;\n      padding: 3px 6px;\n    }\n  }\n\n  .child-details {\n    ion-col {\n      padding: 0 3px;\n\n      &:first-child {\n        padding-left: 0;\n        padding-right: 5px;\n      }\n\n      &:last-child {\n        padding-right: 0;\n        padding-left: 5px;\n      }\n    }\n  }\n\n  .child-detail-item {\n    padding: 6px 4px;\n    gap: 8px;\n    margin-bottom: 4px;\n\n    ion-icon {\n      font-size: 14px;\n      width: 16px;\n    }\n  }\n\n  .detail-label {\n    font-size: 10px;\n  }\n\n  .detail-value {\n    font-size: 12px;\n  }\n\n  .view-child-btn {\n    font-size: 11px;\n    --padding-start: 6px;\n    --padding-end: 6px;\n\n    ion-icon {\n      font-size: 12px;\n    }\n  }\n\n  .child-divider {\n    margin: 12px 0;\n  }\n}\n\n// Verified Badge Inline Styles (for inside value field)\n.verified-badge-inline {\n  font-size: 11px;\n  font-weight: 600;\n  padding: 3px 8px;\n  border-radius: 12px;\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  vertical-align: middle;\n  margin-left: 4px;\n\n  ion-icon {\n    font-size: 12px;\n    margin-inline-end: 0 !important;\n  }\n}\n// Measurements Table Styles\n.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.measurements-table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 100%; // Changed from 600px to fit viewport\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    font-size: 0.85rem;\n    white-space: normal; // Changed from nowrap to allow text wrapping\n    word-wrap: break-word;\n  }\n\n  td {\n    padding: 10px 6px;\n    border-bottom: 1px solid var(--ion-color-light);\n    font-size: 0.85rem;\n    text-align: center;\n    vertical-align: middle;\n\n    &.date-cell {\n      font-weight: 600;\n      color: var(--ion-color-primary);\n      text-align: left;\n    }\n\n    &.actions-cell {\n      white-space: nowrap;\n      width: 80px;\n      padding: 10px 2px;\n\n      ion-button {\n        margin: 0 1px;\n        --padding-start: 4px;\n        --padding-end: 4px;\n      }\n\n      .disabled-text {\n        color: var(--ion-color-medium);\n        font-size: 0.9rem;\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    &.nutrition-danger {\n      background-color: rgba(var(--ion-color-danger-rgb), 0.05);\n      border-left: 3px solid var(--ion-color-danger);\n    }\n    \n    &.nutrition-warning {\n      background-color: rgba(var(--ion-color-warning-rgb), 0.05);\n      border-left: 3px solid var(--ion-color-warning);\n    }\n    \n    &.nutrition-success {\n      background-color: rgba(var(--ion-color-success-rgb), 0.05);\n      border-left: 3px solid var(--ion-color-success);\n    }\n  }\n  \n  tbody tr:last-child td {\n    border-bottom: none;\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.2rem;\n  }\n\n  p {\n    color: var(--ion-color-medium);\n    margin: 0;\n    font-size: 0.95rem;\n  }\n}\n\n// Pagination Styles\n.pagination-container {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px 0;\n  margin-top: 16px;\n  border-top: 1px solid var(--ion-color-light);\n}\n\n.pagination-info {\n  text-align: center;\n  font-size: 0.85rem;\n  color: var(--ion-color-medium);\n  font-weight: 500;\n}\n\n.pagination-controls {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  flex-wrap: wrap;\n\n  ion-button {\n    --padding-start: 12px;\n    --padding-end: 12px;\n    height: 36px;\n    font-size: 0.85rem;\n    font-weight: 500;\n\n    &:disabled {\n      opacity: 0.4;\n    }\n  }\n}\n\n.page-numbers {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  ion-button {\n    --padding-start: 8px;\n    --padding-end: 8px;\n    min-width: 36px;\n    height: 36px;\n    font-weight: 600;\n\n    &.active-page {\n      --background: var(--ion-color-primary);\n      --color: white;\n      font-weight: 700;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .pagination-container {\n    padding: 12px 0;\n    gap: 8px;\n  }\n\n  .pagination-info {\n    font-size: 0.8rem;\n  }\n\n  .pagination-controls {\n    gap: 6px;\n\n    ion-button {\n      height: 32px;\n      font-size: 0.8rem;\n      --padding-start: 8px;\n      --padding-end: 8px;\n    }\n  }\n\n  .page-numbers {\n    gap: 2px;\n\n    ion-button {\n      min-width: 32px;\n      height: 32px;\n      font-size: 0.8rem;\n    }\n  }\n}\n\n// (GMP buttons are now part of action-buttons-section)\n\n// Summary Container and Cards\n.summary-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 12px;\n  margin-bottom: 20px;\n  padding: 0;\n}\n\n.summary-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: linear-gradient(135deg, rgba(73, 144, 226, 0.05), rgba(255, 255, 255, 0.95));\n  border: 1px solid rgba(73, 144, 226, 0.15);\n  border-radius: 12px;\n  padding: 16px;\n  transition: all 0.3s ease;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    border-color: rgba(73, 144, 226, 0.3);\n  }\n\n  ion-icon {\n    font-size: 32px;\n    flex-shrink: 0;\n  }\n}\n\n.summary-content {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1;\n  min-width: 0;\n}\n\n.summary-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--ion-color-medium);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  line-height: 1.2;\n}\n\n.summary-value {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--ion-color-dark);\n  line-height: 1.3;\n  word-wrap: break-word;\n  word-break: break-word;\n\n  ion-badge {\n    font-size: 13px;\n    padding: 4px 10px;\n  }\n}\n\n@media (max-width: 768px) {\n  .summary-container {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 10px;\n    margin-bottom: 16px;\n  }\n\n  .summary-card {\n    padding: 12px;\n    gap: 10px;\n\n    ion-icon {\n      font-size: 28px;\n    }\n  }\n\n  .summary-label {\n    font-size: 10px;\n  }\n\n  .summary-value {\n    font-size: 16px;\n\n    ion-badge {\n      font-size: 11px;\n      padding: 3px 8px;\n    }\n  }\n}\n\n@media (max-width: 480px) {\n  .summary-container {\n    grid-template-columns: 1fr;\n    gap: 8px;\n    margin-bottom: 12px;\n  }\n\n  .summary-card {\n    padding: 10px;\n    gap: 8px;\n\n    ion-icon {\n      font-size: 24px;\n    }\n  }\n\n  .summary-label {\n    font-size: 9px;\n  }\n\n  .summary-value {\n    font-size: 14px;\n\n    ion-badge {\n      font-size: 10px;\n      padding: 2px 6px;\n    }\n  }\n}\n\n// Nutrition Status Count Section\n.status-count-container {\n  margin: 20px 0;\n  padding: 16px;\n  background: rgba(255, 255, 255, 0.6);\n  border-radius: 12px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.status-count-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n  margin: 0 0 12px 0;\n\n  ion-icon {\n    font-size: 20px;\n    color: var(--ion-color-primary);\n  }\n}\n\n.status-count-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 12px;\n}\n\n.status-count-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background: white;\n  border-radius: 8px;\n  border-left: 4px solid transparent;\n  transition: all 0.2s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n\n  &:hover {\n    transform: translateX(4px);\n    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);\n  }\n\n  &.status-danger {\n    border-left-color: var(--ion-color-danger);\n    background: linear-gradient(135deg, rgba(var(--ion-color-danger-rgb), 0.05), white);\n  }\n\n  &.status-warning {\n    border-left-color: var(--ion-color-warning);\n    background: linear-gradient(135deg, rgba(var(--ion-color-warning-rgb), 0.05), white);\n  }\n\n  &.status-success {\n    border-left-color: var(--ion-color-success);\n    background: linear-gradient(135deg, rgba(var(--ion-color-success-rgb), 0.05), white);\n  }\n}\n\n.status-count-info {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.status-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n}\n\n.status-count {\n  font-size: 12px;\n  color: var(--ion-color-medium);\n}\n\n.status-badge {\n  ion-badge {\n    font-size: 16px;\n    font-weight: 700;\n    padding: 6px 12px;\n  }\n}\n\n// Item-wise Distribution Section\n.item-distribution-container {\n  margin: 20px 0;\n  padding: 16px;\n  background: rgba(255, 255, 255, 0.6);\n  border-radius: 12px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.item-distribution-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n  margin: 0 0 12px 0;\n\n  ion-icon {\n    font-size: 20px;\n    color: var(--ion-color-secondary);\n  }\n}\n\n.item-distribution-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 12px;\n}\n\n.item-distribution-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 14px;\n  background: white;\n  border-radius: 10px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  transition: all 0.3s ease;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n    border-color: rgba(var(--ion-color-secondary-rgb), 0.3);\n  }\n}\n\n.item-icon {\n  flex-shrink: 0;\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, rgba(var(--ion-color-secondary-rgb), 0.1), rgba(var(--ion-color-secondary-rgb), 0.05));\n  border-radius: 10px;\n\n  ion-icon {\n    font-size: 28px;\n  }\n}\n\n.item-info {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1;\n  min-width: 0;\n}\n\n.item-name {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--ion-color-dark);\n  word-wrap: break-word;\n}\n\n.item-quantity {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--ion-color-secondary);\n}\n\n.item-count {\n  font-size: 12px;\n  color: var(--ion-color-medium);\n  font-style: italic;\n}\n\n@media (max-width: 768px) {\n  .status-count-container,\n  .item-distribution-container {\n    padding: 12px;\n    margin: 16px 0;\n  }\n\n  .status-count-title,\n  .item-distribution-title {\n    font-size: 14px;\n    margin-bottom: 10px;\n\n    ion-icon {\n      font-size: 18px;\n    }\n  }\n\n  .status-count-grid {\n    grid-template-columns: 1fr;\n    gap: 10px;\n  }\n\n  .status-count-item {\n    padding: 10px 12px;\n  }\n\n  .status-name {\n    font-size: 13px;\n  }\n\n  .status-count {\n    font-size: 11px;\n  }\n\n  .status-badge ion-badge {\n    font-size: 14px;\n    padding: 4px 10px;\n  }\n\n  .item-distribution-grid {\n    grid-template-columns: 1fr;\n    gap: 10px;\n  }\n\n  .item-distribution-card {\n    padding: 12px;\n  }\n\n  .item-icon {\n    width: 40px;\n    height: 40px;\n\n    ion-icon {\n      font-size: 24px;\n    }\n  }\n\n  .item-name {\n    font-size: 14px;\n  }\n\n  .item-quantity {\n    font-size: 16px;\n  }\n\n  .item-count {\n    font-size: 11px;\n  }\n}\n\n@media (max-width: 480px) {\n  .status-count-container,\n  .item-distribution-container {\n    padding: 10px;\n    margin: 12px 0;\n  }\n\n  .status-count-title,\n  .item-distribution-title {\n    font-size: 13px;\n    margin-bottom: 8px;\n\n    ion-icon {\n      font-size: 16px;\n    }\n  }\n\n  .status-count-item {\n    padding: 8px 10px;\n  }\n\n  .status-name {\n    font-size: 12px;\n  }\n\n  .status-count {\n    font-size: 10px;\n  }\n\n  .status-badge ion-badge {\n    font-size: 12px;\n    padding: 3px 8px;\n  }\n\n  .item-distribution-card {\n    padding: 10px;\n    gap: 10px;\n  }\n\n  .item-icon {\n    width: 36px;\n    height: 36px;\n\n    ion-icon {\n      font-size: 20px;\n    }\n  }\n\n  .item-name {\n    font-size: 13px;\n  }\n\n  .item-quantity {\n    font-size: 15px;\n  }\n\n  .item-count {\n    font-size: 10px;\n  }\n}\n\n// Compact Summary Styles\n.compact-summary {\n  background: rgba(73, 144, 226, 0.04);\n  border-radius: 8px;\n  padding: 12px 8px;\n  margin-bottom: 16px;\n  border: 1px solid rgba(73, 144, 226, 0.1);\n\n  ion-row {\n    margin: 0;\n  }\n\n  ion-col {\n    padding: 0 6px;\n  }\n}\n\n.nutrition-breakdown-grid {\n  padding: 0;\n  margin: 0;\n\n  ion-row {\n    margin: 0;\n  }\n\n  ion-col {\n    padding: 0 6px;\n  }\n}\n\n.nutrition-status-item {\n  height: 100%;\n}\n\n.compact-summary-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 8px 4px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  min-height: 60px;\n  transition: all 0.2s ease;\n\n  &:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);\n    border-color: rgba(73, 144, 226, 0.2);\n  }\n}\n\n.compact-label {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--ion-color-medium);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 4px;\n  line-height: 1.2;\n}\n\n.compact-value {\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--ion-color-dark);\n  line-height: 1.3;\n  word-break: break-word;\n}\n\n.compact-badge {\n  font-size: 11px !important;\n  padding: 3px 8px !important;\n  font-weight: 600 !important;\n}\n\n.distribution-value {\n  display: flex;\n  align-items: baseline;\n  gap: 4px;\n  justify-content: center;\n\n  strong {\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--ion-color-dark);\n  }\n\n  .unit-text {\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--ion-color-medium);\n  }\n}\n\n@media (max-width: 768px) {\n  .compact-summary {\n    padding: 10px 6px;\n    margin-bottom: 14px;\n\n    ion-col {\n      padding: 0 4px;\n    }\n  }\n\n  .compact-summary-item {\n    padding: 6px 3px;\n    min-height: 55px;\n  }\n\n  .compact-label {\n    font-size: 9px;\n  }\n\n  .compact-value {\n    font-size: 13px;\n  }\n\n  .compact-badge {\n    font-size: 10px !important;\n    padding: 2px 6px !important;\n  }\n\n  .distribution-value {\n    strong {\n      font-size: 13px;\n    }\n\n    .unit-text {\n      font-size: 10px;\n    }\n  }\n}\n\n@media (max-width: 480px) {\n  .compact-summary {\n    padding: 8px 4px;\n    margin-bottom: 12px;\n\n    ion-col {\n      padding: 0 3px;\n    }\n  }\n\n  .compact-summary-item {\n    padding: 5px 2px;\n    min-height: 50px;\n  }\n\n  .compact-label {\n    font-size: 8px;\n    margin-bottom: 3px;\n  }\n\n  .compact-value {\n    font-size: 12px;\n  }\n\n  .compact-badge {\n    font-size: 9px !important;\n    padding: 2px 5px !important;\n  }\n\n  .distribution-value {\n    strong {\n      font-size: 12px;\n    }\n\n    .unit-text {\n      font-size: 9px;\n    }\n  }\n}\n\n// Collapsible Card Styles\n.collapsible-header {\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n  position: relative;\n  background: linear-gradient(135deg, rgba(73, 144, 226, 0.08), rgba(73, 144, 226, 0.04));\n  padding: 16px 20px;\n  border-radius: 12px 12px 0 0;\n  border-bottom: 2px solid rgba(73, 144, 226, 0.15);\n  margin-bottom: 0;\n\n  &:hover {\n    background: linear-gradient(135deg, rgba(73, 144, 226, 0.12), rgba(73, 144, 226, 0.06));\n    border-bottom-color: rgba(73, 144, 226, 0.25);\n  }\n\n  &:active {\n    background: linear-gradient(135deg, rgba(73, 144, 226, 0.15), rgba(73, 144, 226, 0.08));\n  }\n\n  .section-title {\n    margin: 0;\n    font-weight: 700;\n    color: var(--ion-color-primary);\n  }\n}\n\n.collapse-icon {\n  font-size: 24px;\n  color: var(--ion-color-primary);\n  transition: transform 0.3s ease;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n@media (max-width: 768px) {\n  .collapsible-header {\n    padding: 14px 16px;\n\n    .section-title {\n      font-size: 18px;\n    }\n  }\n\n  .collapse-icon {\n    font-size: 22px;\n  }\n}\n\n@media (max-width: 480px) {\n  .collapsible-header {\n    padding: 12px 14px;\n\n    .section-title {\n      font-size: 16px;\n\n      ion-icon {\n        font-size: 20px;\n      }\n    }\n  }\n\n  .collapse-icon {\n    font-size: 20px;\n  }\n}\n\n// Clickable row style for editable SC transfers\n.measurements-table {\n  tr.clickable-row {\n    cursor: pointer;\n    transition: background-color 0.2s ease;\n\n    &:hover {\n      background-color: rgba(73, 144, 226, 0.05);\n    }\n  }\n}\n"],"sourceRoot":""}]);
// Exports
module.exports = ___CSS_LOADER_EXPORT___.toString();


/***/ }),

/***/ 91489:
/*!**********************************************************************!*\
  !*** ./src/app/pages/child-detail/child-detail.page.html?ngResource ***!
  \**********************************************************************/
/***/ ((module) => {

"use strict";
module.exports = "<ion-header>\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-back-button defaultHref=\"child-list\"></ion-back-button>\n    </ion-buttons>\n    <ion-title>{{ childDetailData?.name }} - Profile</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <ion-refresher slot=\"fixed\" (ionRefresh)=\"load($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n  <ng-container *ngIf=\"childDetailData;else skeleton\">\n    <!-- Header Section with Action Buttons -->\n    <div class=\"section-header-main\">\n      <h2 class=\"section-title-main\">\n        <ion-icon name=\"person-outline\" color=\"primary\"></ion-icon>\n        Basic Information\n      </h2>\n      <div class=\"action-buttons-group\">\n        <ion-button *ngIf=\"permissionService.hasPermission('app-child-edit')\" fill=\"outline\" color=\"primary\" [routerLink]=\"[b.routesConfig.childEdit + id]\" size=\"small\">\n          <ion-icon name=\"create-outline\" slot=\"start\"></ion-icon>\n          Edit\n        </ion-button>\n        <ion-button *ngIf=\"permissionService.hasPermission('app-child-sc-transfer')\" fill=\"outline\" color=\"warning\" (click)=\"navigateToScTransfer()\" size=\"small\">\n          <ion-icon name=\"medkit-outline\" slot=\"start\"></ion-icon>\n          SC Transfer\n        </ion-button>\n        <ion-button *ngIf=\"permissionService.hasPermission('app-child-delete')\" fill=\"outline\" color=\"danger\" (click)=\"deleteChild()\" size=\"small\">\n          <ion-icon name=\"trash-outline\" slot=\"start\"></ion-icon>\n          Delete\n        </ion-button>\n        <ion-button\n          *ngIf=\"permissionService.hasPermission('app-beneficiary-verification')\"\n          fill=\"outline\"\n          [color]=\"childDetailData?.verified === 1 ? 'warning' : 'success'\"\n          size=\"small\"\n          (click)=\"toggleVerification()\">\n          <ion-icon\n            [name]=\"childDetailData?.verified === 1 ? 'shield-outline' : 'shield-checkmark-outline'\"\n            slot=\"start\">\n          </ion-icon>\n          {{ childDetailData?.verified === 1 ? 'Unverify' : 'Verify' }}\n        </ion-button>\n      </div>\n    </div>\n\n    <!-- Child Information Card -->\n    <div class=\"card-container\">\n      <ion-card class=\"child-info-card\" [class.child-info-card-female]=\"childDetailData?.gender === 'Female'\" [class.child-info-card-male]=\"childDetailData?.gender !== 'Female'\">\n        <ion-card-content>\n          <div class=\"profile-content\">\n            <ion-grid class=\"content-grid\">\n              <ion-row>\n                <!-- First Column -->\n                <ion-col size=\"4\">\n                  <div class=\"info-item\">\n                    <ion-icon name=\"person-circle-outline\" color=\"primary\"></ion-icon>\n                    <div class=\"item-content\">\n                      <span class=\"label\">Child Name</span>\n                      <span class=\"value\">\n                        {{ childDetailData?.name || '-' }}\n                        <ion-icon\n                          *ngIf=\"childDetailData?.verified === 1\"\n                          name=\"shield-checkmark\"\n                          color=\"success\">\n                        </ion-icon>\n                      </span>\n                    </div>\n                  </div>\n\n                  <div class=\"info-item\">\n                    <ion-icon name=\"calendar-outline\" color=\"primary\"></ion-icon>\n                    <div class=\"item-content\">\n                      <span class=\"label\">Age</span>\n                      <span class=\"value\">{{ calculateAgeInMonths(childDetailData?.date_of_birth) }} months</span>\n                    </div>\n                  </div>\n\n                  <div class=\"info-item\">\n                    <ion-icon name=\"id-card-outline\" color=\"primary\"></ion-icon>\n                    <div class=\"item-content\">\n                      <span class=\"label\">Progress ID</span>\n                      <span class=\"value\">{{ childDetailData?.progress_id || '-' }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"info-item\">\n                    <ion-icon name=\"document-text-outline\" color=\"primary\"></ion-icon>\n                    <div class=\"item-content\">\n                      <span class=\"label\">FCN</span>\n                      <span class=\"value\">{{ childDetailData?.fcn || '-' }}</span>\n                    </div>\n                  </div>\n                </ion-col>\n\n                <!-- Second Column -->\n                <ion-col size=\"4\">\n                  <div class=\"info-item\">\n                    <ion-icon name=\"woman-outline\" color=\"secondary\"></ion-icon>\n                    <div class=\"item-content\">\n                      <span class=\"label\">Mother</span>\n                      <span class=\"value clickable\"\n                            *ngIf=\"childDetailData?.my_mother?.id; else noMotherLink\"\n                            (click)=\"navigateToMother()\">\n                        {{ childDetailData?.mother || '-' }}\n                        <ion-icon name=\"open-outline\" size=\"small\"></ion-icon>\n                      </span>\n                      <ng-template #noMotherLink>\n                        <span class=\"value\">{{ childDetailData?.mother || '-' }}</span>\n                      </ng-template>\n                    </div>\n                  </div>\n\n                  <div class=\"info-item\">\n                    <ion-icon name=\"man-outline\" color=\"secondary\"></ion-icon>\n                    <div class=\"item-content\">\n                      <span class=\"label\">Father</span>\n                      <span class=\"value\">{{ childDetailData?.father || '-' }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"info-item\">\n                    <ion-icon name=\"people-outline\" color=\"tertiary\"></ion-icon>\n                    <div class=\"item-content\">\n                      <span class=\"label\">Caregiver</span>\n                      <span class=\"value\">\n                        <ng-container *ngIf=\"childDetailData?.my_mother?.mother_support_status === 'no'; else noCaregiver\">\n                          {{ childDetailData?.my_mother?.caregiver_name || '-' }}\n                          <span *ngIf=\"childDetailData?.my_mother?.caregiver?.title\" class=\"subtitle-text\">\n                            ({{ childDetailData?.my_mother?.caregiver?.title }})\n                          </span>\n                        </ng-container>\n                        <ng-template #noCaregiver>-</ng-template>\n                      </span>\n                    </div>\n                  </div>\n\n                  <div class=\"info-item\">\n                    <ion-icon name=\"accessibility-outline\" color=\"secondary\"></ion-icon>\n                    <div class=\"item-content\">\n                      <span class=\"label\">Has Disability</span>\n                      <span class=\"value\">{{ childDetailData?.has_disability || '-' }}</span>\n                    </div>\n                  </div>\n                </ion-col>\n\n                <!-- Third Column -->\n                <ion-col size=\"4\">\n                  <div class=\"info-item\">\n                    <ion-icon name=\"business-outline\" color=\"tertiary\"></ion-icon>\n                    <div class=\"item-content\">\n                      <span class=\"label\">INF</span>\n                      <span class=\"value\">{{ childDetailData?.current_location?.inf?.title || '-' }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"info-item\">\n                    <ion-icon name=\"location-outline\" color=\"tertiary\"></ion-icon>\n                    <div class=\"item-content\">\n                      <span class=\"label\">Block</span>\n                      <span class=\"value\">{{ childDetailData?.current_location?.block_majhi?.block?.title || '-' }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"info-item\">\n                    <ion-icon name=\"home-outline\" color=\"tertiary\"></ion-icon>\n                    <div class=\"item-content\">\n                      <span class=\"label\">Sub Block</span>\n                      <span class=\"value\">{{ childDetailData?.current_location?.sub_block_sub_majhi?.sub_block_title || '-' }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"info-item\">\n                    <ion-icon name=\"male-female-outline\" color=\"primary\"></ion-icon>\n                    <div class=\"item-content\">\n                      <span class=\"label\">Gender</span>\n                      <span class=\"value\">{{ childDetailData?.gender || '-' }}</span>\n                    </div>\n                  </div>\n                </ion-col>\n              </ion-row>\n            </ion-grid>\n          </div>\n        </ion-card-content>\n      </ion-card>\n    </div>\n\n    <!-- Quick Action Buttons -->\n    <div class=\"quick-action-buttons\">\n      <ion-button\n        class=\"quick-action-btn measurement-btn\"\n        fill=\"solid\"\n        color=\"primary\"\n        size=\"small\"\n        [disabled]=\"!hasPermission('app-child-measurement-add')\"\n        [routerLink]=\"['/measurement-create', childDetailData.id]\">\n        <ion-icon name=\"fitness-outline\" slot=\"start\"></ion-icon>\n        Measurement\n      </ion-button>\n      <ion-button\n        class=\"quick-action-btn intervention-btn\"\n        fill=\"solid\"\n        color=\"success\"\n        size=\"small\"\n        [disabled]=\"!hasPermission('app-child-assessment-add')\"\n        [routerLink]=\"['/beneficiary-assessment', childDetailData.id, 'child']\">\n        <ion-icon name=\"medical-outline\" slot=\"start\"></ion-icon>\n        Service\n      </ion-button>\n      <ion-button\n        class=\"quick-action-btn distribution-btn\"\n        fill=\"solid\"\n        color=\"secondary\"\n        size=\"small\"\n        [disabled]=\"!hasPermission('app-child-distribution-add')\"\n        [routerLink]=\"['/distribution-create', childDetailData.id]\">\n        <ion-icon name=\"cube-outline\" slot=\"start\"></ion-icon>\n        Distribution\n      </ion-button>\n    </div>\n    <!-- Transfer History Section -->\n    <div class=\"card-container\" *ngIf=\"childDetailData?.transfer_outs && childDetailData.transfer_outs.length > 0\">\n      <ion-card>\n        <div class=\"section-header collapsible-header\" (click)=\"toggleTransferHistory()\">\n          <h2 class=\"section-title\">\n            <ion-icon name=\"swap-horizontal-outline\" color=\"primary\"></ion-icon>\n            Transfer History ({{ childDetailData.transfer_outs.length }})\n          </h2>\n          <ion-icon [name]=\"isTransferHistoryCollapsed ? 'chevron-down-outline' : 'chevron-up-outline'\" class=\"collapse-icon\"></ion-icon>\n        </div>\n\n        <ion-card-content *ngIf=\"!isTransferHistoryCollapsed\">\n          <div class=\"table-container\">\n            <table class=\"measurements-table\">\n              <thead>\n                <tr>\n                  <th>Transfer Date</th>\n                  <th>From INF</th>\n                  <th>To INF</th>\n                  <th>Status</th>\n                  <th>Comment</th>\n                  <th>Action</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr *ngFor=\"let transfer of childDetailData.transfer_outs\">\n                  <td class=\"date-cell\">{{ transfer.created_at | date: 'dd MMM yyyy' }}</td>\n                  <td>{{ transfer.transfer_out_from?.title || '-' }}</td>\n                  <td>{{ transfer.transfer_in_to?.title || '-' }}</td>\n                  <td>\n                    <ion-badge [color]=\"getTransferStatusColor(transfer.status)\">\n                      {{ transfer.status }}\n                    </ion-badge>\n                  </td>\n                  <td>{{ transfer.comment || '-' }}</td>\n                  <td>\n                    <ion-button\n                      *ngIf=\"transfer.status === 'Pending' && transfer.sync_status !== 'synced'\"\n                      fill=\"clear\"\n                      size=\"small\"\n                      color=\"danger\"\n                      (click)=\"deleteTransfer(transfer.id)\">\n                      <ion-icon name=\"trash-outline\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </ion-card-content>\n      </ion-card>\n    </div>\n\n    <!-- SC Admission History Section -->\n    <div class=\"card-container\" *ngIf=\"inpatient_care_treatments && inpatient_care_treatments.length > 0\">\n      <ion-card>\n        <div class=\"section-header collapsible-header\" (click)=\"toggleSCHistory()\">\n          <h2 class=\"section-title\">\n            <ion-icon name=\"medkit-outline\" color=\"primary\"></ion-icon>\n            SC Admission History ({{ inpatient_care_treatments.length }})\n          </h2>\n          <ion-icon [name]=\"isSCHistoryCollapsed ? 'chevron-down-outline' : 'chevron-up-outline'\" class=\"collapse-icon\"></ion-icon>\n        </div>\n\n        <ion-card-content *ngIf=\"!isSCHistoryCollapsed\">\n          <div class=\"table-container\">\n            <table class=\"measurements-table\">\n              <thead>\n                <tr>\n                  <th>Request Date</th>\n                  <th>From INF</th>\n                  <th>SC</th>\n                  <th>Status</th>\n                  <th>Sync Status</th>\n                  <th>Reason</th>\n                  <th>Action</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr *ngFor=\"let admission of inpatient_care_treatments\">\n                  <td>{{ admission.created_at | date:'dd/MM/yyyy' }}</td>\n                  <td>{{ admission.from_inf?.title || '-' }}</td>\n                  <td>{{ admission.stabilization_center?.title || '-' }}</td>\n                  <td>\n                    <ion-badge [color]=\"getSCStatusColor(admission.status)\">\n                      {{ admission.status }}\n                    </ion-badge>\n                  </td>\n                  <td>\n                    <ion-badge [color]=\"admission.sync_status === 'synced' ? 'success' : 'warning'\">\n                      {{ admission.sync_status || 'pending' }}\n                    </ion-badge>\n                  </td>\n                  <td class=\"transfer-reason\">{{ admission.transfer_reason || '-' }}</td>\n                  <td>\n                    <ion-button\n                      *ngIf=\"isSCTransferEditable(admission)\"\n                      fill=\"clear\"\n                      size=\"small\"\n                      color=\"danger\"\n                      (click)=\"deleteSCTransfer(admission.id)\">\n                      <ion-icon name=\"trash-outline\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </ion-card-content>\n      </ion-card>\n    </div>\n\n    <!-- Sibling Information Section -->\n    <div class=\"card-container\" *ngIf=\"hasPermission('app-child-sibling-information') && childDetailData?.siblings && childDetailData.siblings.length > 0\">\n      <ion-card>\n        <div class=\"section-header collapsible-header\" (click)=\"toggleSiblingInfo()\">\n          <h2 class=\"section-title\">\n            <ion-icon name=\"people-outline\" color=\"primary\"></ion-icon>\n            Sibling Information ({{ childDetailData.siblings?.length }})\n          </h2>\n          <ion-icon [name]=\"isSiblingInfoCollapsed ? 'chevron-down-outline' : 'chevron-up-outline'\" class=\"collapse-icon\"></ion-icon>\n        </div>\n\n        <ion-card-content *ngIf=\"!isSiblingInfoCollapsed\">\n          <div class=\"table-container\">\n            <table class=\"measurements-table\">\n              <thead>\n                <tr>\n                  <th>Name</th>\n                  <th>Gender</th>\n                  <th>Date of Birth (Age)</th>\n                  <th>Progress ID</th>\n                  <th>Verified</th>\n                  <th>Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr *ngFor=\"let sibling of childDetailData.siblings\">\n                  <td class=\"date-cell\">{{ sibling.name }}</td>\n                  <td>\n                    <ion-badge [color]=\"sibling.gender === 'Male' ? 'primary' : 'secondary'\">\n                      {{ sibling.gender }}\n                    </ion-badge>\n                  </td>\n                  <td>{{ sibling.date_of_birth | date:'dd MMM yyyy' }} ({{ calculateAgeInMonths(sibling.date_of_birth) }} mo)</td>\n                  <td>{{ sibling.progress_id || '-' }}</td>\n                  <td>\n                    <ion-badge [color]=\"sibling.verified === 1 ? 'success' : 'warning'\">\n                      {{ sibling.verified === 1 ? 'Yes' : 'No' }}\n                    </ion-badge>\n                  </td>\n                  <td class=\"actions-cell\">\n                    <ion-button fill=\"clear\" size=\"small\" color=\"primary\" [routerLink]=\"'/child-detail/' + sibling.id\">\n                      <ion-icon name=\"eye-outline\"></ion-icon>\n                    </ion-button>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </ion-card-content>\n      </ion-card>\n    </div>\n\n    <!-- Measurement History Section -->\n    <div class=\"card-container\" *ngIf=\"hasPermission('app-child-view-measurement-card-section')\">\n      <ion-card>\n        <div class=\"section-header collapsible-header\" (click)=\"toggleMeasurementHistory()\">\n          <h2 class=\"section-title\">\n            <ion-icon name=\"fitness-outline\" color=\"primary\"></ion-icon>\n            Anthropometric Measurement Information ({{ measurements?.length || 0 }})\n          </h2>\n          <ion-icon [name]=\"isMeasurementHistoryCollapsed ? 'chevron-down-outline' : 'chevron-up-outline'\" class=\"collapse-icon\"></ion-icon>\n        </div>\n\n        <ion-card-content *ngIf=\"!isMeasurementHistoryCollapsed\">\n          <div class=\"section-buttons-group\" style=\"margin-bottom: 16px; display: flex; gap: 8px;\">\n            <ion-button fill=\"outline\" color=\"success\" [routerLink]=\"['/gmp/weight', childDetailData.id]\" size=\"medium\" style=\"flex: 1;\">\n              <ion-icon name=\"scale-outline\" slot=\"start\"></ion-icon>\n              GMP Weight\n            </ion-button>\n            <ion-button fill=\"outline\" color=\"tertiary\" [routerLink]=\"['/gmp/height', childDetailData.id]\" size=\"medium\" style=\"flex: 1;\">\n              <ion-icon name=\"resize-outline\" slot=\"start\"></ion-icon>\n              GMP Height\n            </ion-button>\n          </div>\n          <div *ngIf=\"measurements && measurements.length > 0; else noMeasurements\">\n            <!-- Compact Summary -->\n            <ion-grid class=\"compact-summary\">\n              <ion-row>\n                <ion-col size=\"3\">\n                  <div class=\"compact-summary-item\">\n                    <span class=\"compact-label\">Total</span>\n                    <span class=\"compact-value\">{{ measurements.length }}</span>\n                  </div>\n                </ion-col>\n                <ion-col size=\"9\">\n                  <ion-grid class=\"nutrition-breakdown-grid\">\n                    <ion-row>\n                      <ion-col *ngFor=\"let status of getNutritionStatusCounts()\" [size]=\"12 / getNutritionStatusCounts().length\">\n                        <div class=\"compact-summary-item nutrition-status-item\">\n                          <span class=\"compact-label\">{{ status.title }}</span>\n                          <ion-badge [color]=\"NutritionStatusColor[status.id]\" class=\"compact-badge\">\n                            {{ status.count }}\n                          </ion-badge>\n                        </div>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-col>\n              </ion-row>\n            </ion-grid>\n\n            <!-- Measurements Table -->\n            <div class=\"table-container\">\n              <table class=\"measurements-table\">\n                <thead>\n                  <tr>\n                    <th>Date</th>\n                    <th>MUAC (cm)</th>\n                    <th>Weight (kg)</th>\n                    <th>Height (cm)</th>\n                    <th>WFH Z-Score</th>\n                    <th>HAZ Z-Score</th>\n                    <th>WAZ Z-Score</th>\n                    <th>Oedema</th>\n                    <th>Nutrition Status</th>\n                    <th>Referral Status</th>\n                    <th>Actions</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let measurement of paginatedMeasurements\"\n                      [class.nutrition-danger]=\"measurement?.nutrition_status?.id === 1\"\n                      [class.nutrition-warning]=\"measurement?.nutrition_status?.id === 2\"\n                      [class.nutrition-success]=\"measurement?.nutrition_status?.id === 3\">\n                    <td class=\"date-cell\">{{ measurement?.date | date: 'dd MMM yyyy' }}</td>\n                    <td>{{ measurement?.muac || '-' }}</td>\n                    <td>{{ measurement?.weight || '-' }}</td>\n                    <td>{{ measurement?.height || '-' }}</td>\n                    <td>{{ measurement?.wfh_zscore || '-' }}</td>\n                    <td>{{ measurement?.haz_zscore || '-' }}</td>\n                    <td>{{ measurement?.waz_zscore || '-' }}</td>\n                    <td>{{ measurement?.oedema || '-' }}</td>\n                    <td>\n                      <ion-badge [color]=\"NutritionStatusColor[measurement?.nutrition_status?.id]\">\n                        {{ measurement?.nutrition_status?.title || '-' }}\n                      </ion-badge>\n                    </td>\n                    <td>{{ measurement?.referral_status || '-' }}</td>\n                    <td class=\"actions-cell\">\n                      <ion-button *ngIf=\"isWithinLastWeek(measurement.date)\"\n                                  fill=\"clear\" size=\"small\" color=\"warning\" [routerLink]=\"['/measurement-edit', measurement.id]\">\n                        <ion-icon name=\"create-outline\"></ion-icon>\n                      </ion-button>\n                      <ion-button *ngIf=\"isWithinLastWeek(measurement.date)\"\n                                  fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"deleteMeasurement(measurement.id)\">\n                        <ion-icon name=\"trash-outline\"></ion-icon>\n                      </ion-button>\n                      <span *ngIf=\"!isWithinLastWeek(measurement.date)\" class=\"disabled-text\">-</span>\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <!-- Pagination Controls -->\n            <div class=\"pagination-container\" *ngIf=\"totalPages > 1\">\n              <div class=\"pagination-info\">\n                Showing {{ ((currentPage - 1) * itemsPerPage) + 1 }} to {{ currentPage * itemsPerPage > measurements.length ? measurements.length : currentPage * itemsPerPage }} of {{ measurements.length }} records\n              </div>\n              <div class=\"pagination-controls\">\n                <ion-button fill=\"clear\" size=\"small\" (click)=\"previousPage()\" [disabled]=\"currentPage === 1\">\n                  <ion-icon name=\"chevron-back-outline\"></ion-icon>\n                  Previous\n                </ion-button>\n\n                <div class=\"page-numbers\">\n                  <ion-button *ngFor=\"let page of [].constructor(totalPages); let i = index\"\n                              fill=\"clear\"\n                              size=\"small\"\n                              [color]=\"currentPage === i + 1 ? 'primary' : 'medium'\"\n                              [class.active-page]=\"currentPage === i + 1\"\n                              (click)=\"goToPage(i + 1)\">\n                    {{ i + 1 }}\n                  </ion-button>\n                </div>\n\n                <ion-button fill=\"clear\" size=\"small\" (click)=\"nextPage()\" [disabled]=\"currentPage === totalPages\">\n                  Next\n                  <ion-icon name=\"chevron-forward-outline\"></ion-icon>\n                </ion-button>\n              </div>\n            </div>\n          </div>\n\n          <ng-template #noMeasurements>\n            <div class=\"empty-state\">\n              <ion-icon name=\"fitness-outline\" color=\"medium\"></ion-icon>\n              <h3>No Measurement Records</h3>\n              <p>No measurements have been recorded yet. Click \"New Measurement\" to create the first record.</p>\n            </div>\n          </ng-template>\n        </ion-card-content>\n      </ion-card>\n    </div>\n\n    <!-- Assessment History Section -->\n    <div class=\"card-container\" *ngIf=\"hasPermission('app-child-view-assessment-card-section')\">\n      <ion-card>\n        <div class=\"section-header collapsible-header\" (click)=\"toggleAssessmentHistory()\">\n          <h2 class=\"section-title\">\n            <ion-icon name=\"document-text-outline\" color=\"primary\"></ion-icon>\n            Intervention/Service Information ({{ surveyResponses?.length || 0 }})\n          </h2>\n          <ion-icon [name]=\"isAssessmentHistoryCollapsed ? 'chevron-down-outline' : 'chevron-up-outline'\" class=\"collapse-icon\"></ion-icon>\n        </div>\n\n        <ion-card-content *ngIf=\"!isAssessmentHistoryCollapsed\">\n          <div *ngIf=\"surveyResponses && surveyResponses.length > 0; else noAssessments\">\n            <!-- Compact Summary -->\n            <ion-grid class=\"compact-summary\">\n              <ion-row>\n                <ion-col size=\"3\">\n                  <div class=\"compact-summary-item\">\n                    <span class=\"compact-label\">Total</span>\n                    <span class=\"compact-value\">{{ surveyResponses.length }}</span>\n                  </div>\n                </ion-col>\n                <ion-col size=\"9\">\n                  <ion-grid class=\"nutrition-breakdown-grid\">\n                    <ion-row>\n                      <ion-col *ngFor=\"let assessment of getAssessmentWiseCounts()\" [size]=\"12 / getAssessmentWiseCounts().length\">\n                        <div class=\"compact-summary-item nutrition-status-item\">\n                          <span class=\"compact-label\">{{ assessment.title }}</span>\n                          <ion-badge color=\"primary\" class=\"compact-badge\">\n                            {{ assessment.count }}\n                          </ion-badge>\n                        </div>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-col>\n              </ion-row>\n            </ion-grid>\n\n            <!-- Assessments Table -->\n            <div class=\"table-container\">\n              <table class=\"measurements-table\">\n                <thead>\n                  <tr>\n                    <th>Service Name</th>\n                    <th>Initiated Date</th>\n                    <th>Completed Date</th>\n                    <th>Status</th>\n                    <th>Remarks</th>\n                    <th>Actions</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let assessment of paginatedAssessments\">\n                    <td>{{ assessment?.survey_form?.title || '-' }}</td>\n                    <td class=\"date-cell\">{{ formatDate(assessment?.created_at) }}</td>\n                    <td class=\"date-cell\">{{ assessment?.finalized_date ? formatDate(assessment?.finalized_date) : '-' }}</td>\n                    <td>\n                      <ion-badge [color]=\"assessment?.is_finalized ? 'success' : 'warning'\">\n                        {{ assessment?.is_finalized ? 'Completed' : 'In Progress' }}\n                      </ion-badge>\n                    </td>\n                    <td>{{ assessment?.remarks || '-' }}</td>\n                    <td class=\"actions-cell\">\n                      <ion-button fill=\"clear\" size=\"small\" color=\"primary\" (click)=\"displayAssessmentForm(assessment?.id)\">\n                        <ion-icon name=\"eye-outline\"></ion-icon>\n                      </ion-button>\n                      <ion-button *ngIf=\"hasProgrammeTag(assessment)\" fill=\"clear\" size=\"small\" color=\"secondary\" (click)=\"displayProgrammeCard(assessment?.id)\">\n                        <ion-icon name=\"card-outline\"></ion-icon>\n                      </ion-button>\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <!-- Pagination Controls -->\n            <div class=\"pagination-container\" *ngIf=\"assessmentTotalPages > 1\">\n              <div class=\"pagination-info\">\n                Showing {{ ((assessmentCurrentPage - 1) * assessmentItemsPerPage) + 1 }} to {{ assessmentCurrentPage * assessmentItemsPerPage > surveyResponses.length ? surveyResponses.length : assessmentCurrentPage * assessmentItemsPerPage }} of {{ surveyResponses.length }} records\n              </div>\n              <div class=\"pagination-controls\">\n                <ion-button fill=\"clear\" size=\"small\" (click)=\"assessmentPreviousPage()\" [disabled]=\"assessmentCurrentPage === 1\">\n                  <ion-icon name=\"chevron-back-outline\"></ion-icon>\n                  Previous\n                </ion-button>\n\n                <div class=\"page-numbers\">\n                  <ion-button *ngFor=\"let page of [].constructor(assessmentTotalPages); let i = index\"\n                              fill=\"clear\"\n                              size=\"small\"\n                              [color]=\"assessmentCurrentPage === i + 1 ? 'primary' : 'medium'\"\n                              [class.active-page]=\"assessmentCurrentPage === i + 1\"\n                              (click)=\"assessmentGoToPage(i + 1)\">\n                    {{ i + 1 }}\n                  </ion-button>\n                </div>\n\n                <ion-button fill=\"clear\" size=\"small\" (click)=\"assessmentNextPage()\" [disabled]=\"assessmentCurrentPage === assessmentTotalPages\">\n                  Next\n                  <ion-icon name=\"chevron-forward-outline\"></ion-icon>\n                </ion-button>\n              </div>\n            </div>\n          </div>\n\n          <ng-template #noAssessments>\n            <div class=\"empty-state\">\n              <ion-icon name=\"document-text-outline\" color=\"medium\"></ion-icon>\n              <h3>No Assessment Records</h3>\n              <p>No assessments have been completed yet. Click \"Conduct Assessment\" to create the first record.</p>\n            </div>\n          </ng-template>\n        </ion-card-content>\n      </ion-card>\n    </div>\n\n    <!-- Distribution History Section -->\n    <div class=\"card-container\" *ngIf=\"hasPermission('app-child-view-distribution-card-section')\">\n      <ion-card>\n        <div class=\"section-header collapsible-header\" (click)=\"toggleDistributionHistory()\">\n          <h2 class=\"section-title\">\n            <ion-icon name=\"cube-outline\" color=\"primary\"></ion-icon>\n            Distribution History ({{ distributions?.length || 0 }})\n          </h2>\n          <ion-icon [name]=\"isDistributionHistoryCollapsed ? 'chevron-down-outline' : 'chevron-up-outline'\" class=\"collapse-icon\"></ion-icon>\n        </div>\n\n        <ion-card-content *ngIf=\"!isDistributionHistoryCollapsed\">\n          <div *ngIf=\"distributions && distributions.length > 0; else noDistributions\">\n            <!-- Compact Summary -->\n            <ion-grid class=\"compact-summary\">\n              <ion-row>\n                <ion-col size=\"3\">\n                  <div class=\"compact-summary-item\">\n                    <span class=\"compact-label\">Total</span>\n                    <span class=\"compact-value\">{{ distributions.length }}</span>\n                  </div>\n                </ion-col>\n                <ion-col size=\"9\">\n                  <ion-grid class=\"nutrition-breakdown-grid\">\n                    <ion-row>\n                      <ion-col *ngFor=\"let item of getItemWiseDistribution()\" [size]=\"12 / getItemWiseDistribution().length\">\n                        <div class=\"compact-summary-item nutrition-status-item\">\n                          <span class=\"compact-label\">{{ item.name }}</span>\n                          <div class=\"compact-value distribution-value\">\n                            <strong>{{ item.totalQuantity }}</strong>\n                            <span class=\"unit-text\">{{ item.unit }}</span>\n                          </div>\n                        </div>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-col>\n              </ion-row>\n            </ion-grid>\n\n            <!-- Distributions Table -->\n            <div class=\"table-container\">\n              <table class=\"measurements-table\">\n                <thead>\n                  <tr>\n                    <th>Date</th>\n                    <th>Item</th>\n                    <th>Quantity</th>\n                    <th>Unit</th>\n                    <th>Service Name</th>\n                    <th>Actions</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let distribution of paginatedDistributions\">\n                    <td class=\"date-cell\">{{ distribution?.date | date: 'dd MMM yyyy' }}</td>\n                    <td>{{ distribution?.supply_item?.title || '-' }}</td>\n                    <td>{{ distribution?.quantity || '-' }}</td>\n                    <td>{{ distribution?.supply_item?.unit?.title || '-' }}</td>\n                    <td>{{ distribution?.survey_form?.title || '-' }}</td>\n                    <td class=\"actions-cell\">\n                      <ion-button *ngIf=\"isToday(distribution?.date) && hasPermission('app-child-distribution-delete')\" fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"deleteDistribution(distribution.id)\">\n                        <ion-icon name=\"trash-outline\"></ion-icon>\n                      </ion-button>\n                      <span *ngIf=\"!isToday(distribution?.date) || !hasPermission('app-child-distribution-delete')\">-</span>\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <!-- Pagination Controls -->\n            <div class=\"pagination-container\" *ngIf=\"distributionTotalPages > 1\">\n              <div class=\"pagination-info\">\n                Showing {{ ((distributionCurrentPage - 1) * distributionItemsPerPage) + 1 }} to {{ distributionCurrentPage * distributionItemsPerPage > distributions.length ? distributions.length : distributionCurrentPage * distributionItemsPerPage }} of {{ distributions.length }} records\n              </div>\n              <div class=\"pagination-controls\">\n                <ion-button fill=\"clear\" size=\"small\" (click)=\"distributionPreviousPage()\" [disabled]=\"distributionCurrentPage === 1\">\n                  <ion-icon name=\"chevron-back-outline\"></ion-icon>\n                  Previous\n                </ion-button>\n\n                <div class=\"page-numbers\">\n                  <ion-button *ngFor=\"let page of [].constructor(distributionTotalPages); let i = index\"\n                              fill=\"clear\"\n                              size=\"small\"\n                              [color]=\"distributionCurrentPage === i + 1 ? 'primary' : 'medium'\"\n                              [class.active-page]=\"distributionCurrentPage === i + 1\"\n                              (click)=\"distributionGoToPage(i + 1)\">\n                    {{ i + 1 }}\n                  </ion-button>\n                </div>\n\n                <ion-button fill=\"clear\" size=\"small\" (click)=\"distributionNextPage()\" [disabled]=\"distributionCurrentPage === distributionTotalPages\">\n                  Next\n                  <ion-icon name=\"chevron-forward-outline\"></ion-icon>\n                </ion-button>\n              </div>\n            </div>\n          </div>\n\n          <ng-template #noDistributions>\n            <div class=\"empty-state\">\n              <ion-icon name=\"cube-outline\" color=\"medium\"></ion-icon>\n              <h3>No Distribution Records</h3>\n              <p>No distributions have been recorded yet. Click \"New Distribution\" to create the first record.</p>\n            </div>\n          </ng-template>\n        </ion-card-content>\n      </ion-card>\n    </div>\n\n  </ng-container>\n  <ng-template #skeleton>\n    <app-skeleton></app-skeleton>\n  </ng-template>\n\n\n</ion-content>\n";

/***/ })

}]);
//# sourceMappingURL=src_app_pages_child-detail_child-detail_module_ts.js.map