     /* Calendar Start */

     .calendar-grid {
         display: grid;
         grid-template-columns: repeat(7, 1fr);
         gap: 10px;
     }

     .calendar-day {
         min-height: 110px;
         border-radius: 10px;
         padding: 8px;
         background: #f8f9fa;
         border: 1px solid #dee2e6;
         font-size: 14px;
     }

     .calendar-day.has-milk {
         background: #d1f7d6;
         border-color: #198754;
     }

     .day-number {
         font-weight: bold;
         font-size: 15px;
     }

     .kg-badge {
         font-size: 0.8rem;
         display: inline-block;
         margin-top: 5px;
     }

     .calendar-day.milk-covered {
         background-color: #d1e7dd;
         /* light green */
     }

     .calendar-day.milk-partial {
         background: #fff3cd;
     }

     .today-highlight {
         border: 2px solid #0d6efd;
         box-shadow: 0 0 8px rgba(13, 110, 253, .4);
     }

     .calendar-day {
         transition: transform .15s ease, box-shadow .15s ease;
     }

     .calendar-day:hover {
         transform: translateY(-3px);
         box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
     }


     /* Calendar status colors */

     .badge:empty {
         display: inline-block !important;
     }

     .badge-milk-added {
         background-color: #2ecc71;
         /* green */
         color: #fff;
     }

     .badge-no-milk {
         background-color: #bdc3c7;
         /* light gray */
         color: #2c3e50;
     }

     .badge-covered {
         background-color: #a4d5b7;
         /* blue */
         color: #fff;
     }

     .badge-partial {
         background-color: #f1c40f;
         /* yellow */
         color: #000;
     }

     /* Optional: round dot style */
     /* .badge-dot {
         width: 10px;
         height: 10px;
         padding: 0;
         border-radius: 50%;
         display: inline-block;
     } */



     /* ---------------- MOBILE ---------------- */
     @media (max-width: 768px) {
         .calendar-grid {
             grid-template-columns: repeat(4, 1fr);
         }

         .calendar-day {
             min-height: 90px;
             padding: 6px;
             font-size: 13px;
         }

         .day-number {
             font-size: 14px;
         }
     }

     @media (max-width: 480px) {
         /* .calendar-grid {
             grid-template-columns: repeat(4, 1fr);
         } */

         .calendar-day {
             min-height: 80px;
             padding: 6px;
         }
     }

     /* Calendar End */

     /* Calculator Start */

     .top-cal-card .card-body {
         height: 108px;
     }

     @media (max-width: 768px) {
         h3 {
             text-align: center;
         }

         .btn {
             width: 100%;
             margin-bottom: 8px;
         }

         .card {
             margin-bottom: 12px;
         }

         table {
             font-size: 14px;
         }
     }

     @media (max-width: 480px) {
         h3 {
             font-size: 20px;
         }

         .fs-4 {
             font-size: 18px !important;
         }

         table {
             font-size: 13px;
         }
     }

     /* Calculation End */

     .collapse-toggle i {
         transition: transform 0.2s ease;
     }

     .collapse.show+.collapse-toggle i,
     .collapse-toggle[aria-expanded="true"] i {
         transform: rotate(180deg);
     }

     .border-dashed {
         border-style: dashed !important;
     }

     /* Yearly Report Start */

     @media (max-width: 768px) {
         h3 {
             text-align: center;
             font-size: 22px;
         }

         .btn {
             width: 100%;
             margin-bottom: 8px;
         }

         table {
             font-size: 14px;
         }
     }

     @media (max-width: 480px) {
         h3 {
             font-size: 20px;
         }

         table {
             font-size: 13px;
         }
     }

     /* Yearly Report End */