:root {
     --brand-green: #377a63;
     --brand-green-dark: #2f6653;
     --brand-yellow: #ffc107;
     --brand-yellow-dark: #e0a800;
     --border: #d4d4d4;
     --muted: #555;
     --radius: 10px;
     --shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
     --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.15);
     --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
     --input-border: #cfd8dc;
     --input-padding: 10px;
     --input-height: 42px;
     --card-bg: #fff;
     --card-border: #e5e5e5;
     --day-border: #b6d7b9;
     --glass: rgba(55, 122, 99, 0.06);
     --gray-600: #666667;
     --accent-orange: #ed824f;
     --accent-orange-dark: #a14e3f;
     --radius-lg: 14px;

     /* small derived helpers */
     --page-bg: rgba(249, 249, 249, 1);
     --brand-green-10: rgba(55, 122, 99, 0.10);
     --brand-green-20: rgba(55, 122, 99, 0.20);
 }

 body,
 html {
     background-color: var(--page-bg);
     font-family: "Inter", "Poppins", "Segoe UI", sans-serif;
     color: #222;
 }

 h2,
 h2 i,
 h5 {
     color: var(--brand-green-dark);
     font-weight: 600;
 }

 h6 {
     font-weight: 700;
     font-size: 15px;
     color: #444;
 }

 label {
     display: block;
     margin: 8px 0 6px;
     font-weight: 600;
     color: var(--muted);
 }

 /*--------------------------------------
 | login logo
 ------------------------------------------------*/
 .login-logo,
 .register-logo {
     font-size: 2rem !important;
 }

 /*-----------------------------
 |  for Sidebars
 -----------------------------------------*/
 .sidebar .nav-treeview {
     padding-left: 8px !important;
 }

 .sidebar .nav-treeview>.nav-item>.nav-link {
     padding-left: 15px !important;
 }

 .brand-link .brand-image {
     height: 30px !important;
     width: 30px !important;
     max-height: 30px !important;
     object-fit: contain;
     margin-right: 10px;
 }


 /* ------------------------------------------------
       TIFFIN NUMBER TABS
    -------------------------------------------------- */
 .nav-pills {
     margin-top: 12px;
     margin-bottom: 20px !important;
 }

 .nav-pills .nav-link {
     font-size: 14px;
     font-weight: 600;
     padding: 10px 18px;
     border-radius: 10px !important;
     border: 1px solid var(--border);
     color: var(--muted) !important;
     background: color-mix(in srgb, var(--card-bg) 98%, black 2%);
     transition: 0.25s ease;
 }

 .nav-pills .nav-link:hover {
     background: color-mix(in srgb, var(--brand-green) 6%, var(--card-bg));
     border-color: var(--brand-green);
 }

 .nav-pills .nav-link.active {
     color: var(--card-bg) !important;
     background: var(--brand-green-dark) !important;
     border-color: var(--brand-green-dark);
     box-shadow: 0 2px 8px rgba(47, 102, 83, 0.25);
 }


 /* =========================================================
   SEARCH BOX
   ========================================================= */
 .search-wrapper {
     position: relative;
     margin-bottom: 1rem;
 }

 #customer_search {
     border: 2px solid var(--brand-green);
     border-radius: var(--radius);
     padding: 8px 13px;
     transition: 0.25s ease;
 }

 #customer_search:focus {
     box-shadow: 0 0 6px rgba(55, 122, 99, 0.3);
     outline: none;
 }

 .button-group {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     margin-top: 1rem;
 }

 /* SEARCH RESULTS DROPDOWN */
 #search_results {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     background: #fff;
     border: 1px solid var(--border);
     border-radius: var(--radius);
     margin-top: 4px;
     max-height: 250px;
     overflow-y: auto;
     z-index: 9999;
     display: none;
 }

 #search_results .list-group-item:hover {
     background-color: var(--brand-green);
     color: #fff;
 }

 /* =========================================================
   CUSTOMER HEADER
   ========================================================= */
 .customer-header {
     display: flex;
     align-items: center;
     margin-bottom: 1rem;
 }

 .customer-avatar {
     width: 55px;
     height: 55px;
     border-radius: 50%;
     background: var(--brand-green);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     font-weight: 700;
     margin-right: 15px;
 }

 .customer-status {
     font-weight: 600;
     margin-left: auto;
 }

 /* =========================================================
   CARDS
   ========================================================= */
 .card {
     border: none;
     border-radius: var(--radius-lg);
     background: var(--card-bg);
     box-shadow: var(--shadow-soft);
     margin-bottom: 1.5rem;
     padding: .4rem;
     transition: all 0.3s ease;
 }

 .card:hover {
     box-shadow: var(--shadow-hover);
 }

 /* Card */
 .card-custom {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 20px;
     transition: 0.3s ease;
     box-shadow: var(--shadow);
 }

 .card-custom:hover {
     box-shadow: var(--shadow-hover);
     transform: translateY(-3px);
 }

 /* =========================================================
   FORM FIELDS
   ========================================================= */
 .form-control,
 .form-select {
     border: 1px solid var(--input-border);
     border-radius: var(--radius);
     padding: 10px 14px;
     transition: all 0.3s ease;
     font-size: 14px;
     background-color: var(--card-bg);
     width: 100%;
     height: 42px;
 }

 input[type="number"],
 textarea {
     width: 100%;
     padding: 10px 12px;
     border-radius: 8px;
     border: 1px solid var(--input-border);
     box-shadow: none;
     box-sizing: border-box;
     font-size: 14px;
 }

 .form-control:focus,
 .form-select:focus {
     border-color: var(--brand-green);
     box-shadow: 0 0 6px rgba(55, 122, 99, 0.3);
     outline: none;
 }

 .form-control:disabled {
     background: #f4f4f4;
 }

 /* =========================================================
   RADIO / CHECK INPUTS
   ========================================================= */
 .form-check-input {
     width: 1.2em;
     height: 1.2em;
     border: 2px solid #999;
     cursor: pointer;
 }

 .form-check-input:checked {
     background-color: var(--brand-green) !important;
     border-color: var(--brand-green) !important;
 }

 /* Disable but keep green */
 .form-check-input:checked:disabled {
     opacity: 1;
 }

 .form-check-label {
     margin-left: 8px;
     font-size: 0.95rem;
 }

 .form-group {
     margin-bottom: 16px;
 }

 /* =========================================================
   CUSTOM CHECKBOX
   ========================================================= */
 .custom-checkbox {
     position: relative;
     display: inline-block;
     width: 22px;
     height: 22px;
     cursor: pointer;
 }

 .custom-checkbox input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .custom-checkbox .checkmark {
     width: 100%;
     height: 100%;
     background: #f1f1f1;
     border: 1px solid var(--border);
     border-radius: 5px;
     transition: 0.3s ease;
     position: absolute;
     left: 0;
     top: 0;
 }

 .custom-checkbox input:checked~.checkmark {
     background: #28a745;
     border-color: #28a745;
 }

 .custom-checkbox .checkmark::after {
     content: "";
     position: absolute;
     display: none;
 }

 .custom-checkbox input:checked~.checkmark::after {
     display: block;
     left: 7px;
     top: 3px;
     width: 5px;
     height: 10px;
     border: solid #fff;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }