:root {
  --primary-color: #1976d2;
  --primary-hover: #1565c0;
  --purple-color: #6f42c1;
  --text-action: #20c997;
  --light-bg: #f3f4f6;
  --dark-text: #404040;
  --text-color: #464646;
  --danger-color: #dc3545;
  --cancel-color: #e8e8e8;
  --header-color: #f6f6f6;
  --bs-primary-rgb: rgba(25, 118, 210, 1);
  --bs-dark-rgb: rgba(64, 64, 64, 1);
  --bs-header-rgb: rgba(246, 246, 246, 1);
  --bs-back-rgb: rgba(64, 64, 64, 0.75);  
  --bs-cancel-rgb: rgba(232, 232, 232, 1);
  --bs-white-rgb: rgba(255, 255, 255, 1);
  --bs-danger-rgb: rgba(220, 53, 69, 1);
  --bs-muted-rgb: rgba(33, 37, 41, 0.5);
  --bs-secondary-rgb: rgba(33, 37, 41, 0.75);
  --bs-light-rgb: rgba(248, 249, 250, 1);
  --bs-unpaid-rgb: rgba(255, 193, 7, 1);
  --bs-border-radius-lg: 0.5rem;
  --bs-border-width: 1px;
  --bs-border-color: #cccccc;
}

@font-face {
  font-family: 'MyFont1';
  src: url('roboto.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body {
  background-color: #f8fafc;
  font-family: 'MyFont1', Tahoma, Verdana, sans-serif;
  color: var(--dark-text);
}

small,
.small {
  font-size: 0.75em;
}

.smaller {
  font-size: 0.7em;
}

.menufont {
  font-size: 1.05em;
}

.btn-lg {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.btn-primary {
  --bs-btn-color: #ffffff; /* white text */
  --bs-btn-bg: #1976d2; /* base blue */
  --bs-btn-border-color: #1976d2;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #1565c0; /* darker blue on hover */
  --bs-btn-hover-border-color: #1565c0;
  --bs-btn-focus-shadow-rgb: 25, 118, 210; /* rgb for #1976d2 */
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #0d47a1; /* even darker when active */
  --bs-btn-active-border-color: #0d47a1;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #1976d2;
  --bs-btn-disabled-border-color: #1976d2;
}

.btn-unpaid {
  --bs-btn-color: #212529;             /* dark text (better contrast on yellow) */
  --bs-btn-bg: #ffc107;                /* base yellow */
  --bs-btn-border-color: #ffc107;

  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #e0a800;          /* darker yellow on hover */
  --bs-btn-hover-border-color: #e0a800;

  --bs-btn-focus-shadow-rgb: 255, 193, 7; /* rgb for #ffc107 */

  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #d39e00;         /* even darker when active */
  --bs-btn-active-border-color: #d39e00;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);

  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: #ffc107;
  --bs-btn-disabled-border-color: #ffc107;
}

.myborder {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 4px;
}

.btn-outline-primary {
  --bs-btn-color: #1976d2; /* blue text */
  --bs-btn-bg: #ffffff; /* white background */
  --bs-btn-border-color: #cccccc; /* blue border */
  --bs-btn-hover-color: #ffffff; /* text turns white */

  --bs-btn-hover-bg: #f3f4f6; /* background turns blue */
  --bs-btn-hover-border-color: #1976d2; /* border stays blue */

  --bs-btn-focus-shadow-rgb: 25, 118, 210;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #1565c0; /* darker blue active */
  --bs-btn-active-border-color: #1565c0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
  --bs-btn-disabled-color: #1976d2;
  --bs-btn-disabled-bg: #ffffff;
  --bs-btn-disabled-border-color: #1976d2;
}

.btn-outline-trash {
  --bs-btn-color: #dc3545; /* red text */
  --bs-btn-bg: #ffffff; /* white background */
  --bs-btn-border-color: #cccccc; /* red border */
  --bs-btn-hover-color: #ffffff; /* text turns white */
  --bs-btn-hover-bg: #ffffff; /* background turns red */
  --bs-btn-hover-border-color: #dc3545; /* border stays red */
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #bb2d3b; /* darker red when active */
  --bs-btn-active-border-color: #bb2d3b;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
  --bs-btn-disabled-color: #dc3545;
  --bs-btn-disabled-bg: #ffffff;
  --bs-btn-disabled-border-color: #dc3545;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #404040;
  --bs-btn-border-color: #404040;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #595959; /* lighter than #404040 */
  --bs-btn-hover-border-color: #4d4d4d;
  --bs-btn-focus-shadow-rgb: 64, 64, 64; /* match #404040 */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #333333; /* darker than #404040 */
  --bs-btn-active-border-color: #2b2b2b;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #404040;
  --bs-btn-disabled-border-color: #404040;
}

.btn-cancel {
  --bs-btn-color: #404040; /* text color */
  --bs-btn-bg: #e8e8e8; /* base bg */
  --bs-btn-border-color: #e8e8e8;
  --bs-btn-hover-color: #404040;
  --bs-btn-hover-bg: #dcdcdc; /* slightly darker gray */
  --bs-btn-hover-border-color: #dcdcdc;
  --bs-btn-focus-shadow-rgb: 232, 232, 232;
  --bs-btn-active-color: #404040;
  --bs-btn-active-bg: #d0d0d0; /* darker active state */
  --bs-btn-active-border-color: #d0d0d0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
  --bs-btn-disabled-color: #404040;
  --bs-btn-disabled-bg: #e8e8e8;
  --bs-btn-disabled-border-color: #e8e8e8;
}

.bg-primary {
  background-color: var(--bs-primary-rgb) !important;
}
.bg-dark {
  background-color: var(--bs-dark-rgb) !important;
}
.bg-back {
  background-color: var(--bs-back-rgb) !important;
}
.bg-cancel {
  background-color: var(--bs-cancel-rgb) !important;
}
.bg-alter {
  background-color: #fcfcfc;
}
.bg-header {
  background-color: var(--bs-header-rgb) !important;
}
.bg-unpaid {
  background-color: var(--bs-unpaid-rgb) !important;
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:focus:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: white !important;
  box-shadow: none !important;
}

.stats-card {
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.stats-card:hover {
  transform: translateY(-2px);
}

.line-item-row {
  border-bottom: 1px solid #e5e7eb;
  padding: 15px 0;
}

.btn-sm,
.btn-group-sm > .btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.badge-paid {
  background-color: #198754;
}

.badge-pending {
  background-color: #ffc107;
}

.badge-overdue {
  background-color: #dc3545;
}


/* Ensure all primary colored elements use our blue */
.text-primary {
  color: var(--primary-color) !important;
}
.text-purple {
  color: var(--purple-color) !important;
}
.text-action {
  color: var(--text-action) !important;
}
.text-color {
  color: var(--text-color) !important;
}

.text-white {
  color: var(--bs-white-rgb) !important;
}

.text-danger {
  color: var(--bs-danger-rgb) !important;
}
.text-muted {
  color: var(--bs-muted-rgb) !important;
}
.text-secondary {
  color: var(--bs-secondary-rgb) !important;
}

.text-light {
  color: var(--bs-light-rgb) !important;
}

/* Override any Bootstrap button focus states */
.btn:focus,
.btn.focus {
  box-shadow: none !important;
}

.btn-close.btncustom {
  filter: invert(1) brightness(200%);
  /* optional extras */
  opacity: 1; /* ensure it’s fully visible */
}
.btn-close.btncustom:hover {
  filter: invert(1) brightness(250%); /* slightly brighter on hover */
}

.nav-link-custom {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: 0s;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.mb-3 {
  margin-bottom: 1rem !important;
}

.modal-fullscreen .modal-body {
  max-height: 100dvh;
  overflow: auto;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

@media (max-width: 767.98px) {
  .input-group .orders_filter {
    width: 140px;
    min-width: 100px;
  }
  .max-160 {
    min-width: 30% !important;
  }
  .input-group .btn {
    width: 10%;
  }
}

.max-160 {
  max-width: 120px;
}

.fab {
  --bs-btn-bg: #1976d2;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: #1976d2;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 1000;
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: 50%;
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.fab:hover {
  --bs-btn-hover-bg: #1565c0;
  --bs-btn-hover-border-color: #1565c0;
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

/* .mycalendar {
  display: flex;
  flex-wrap: wrap;
}
.myday {
  margin: 0px;
  width: calc(100% / 7);
  border: 0px solid #CCCCCC;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  transform: scale(0.95);
} */

/* .mycalendar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; 
}
.myday {
  flex: 1 0 calc(14.28% - 8px);
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
} */

.mycalendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0; /* no space between cells */
  /* border: 1px solid #ccc; */
}

.myday {
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  /* border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc; */
}

/* no right border on last column */
.myday:nth-child(7n) {
  border-right: 0;
}
/* optional: no bottom border on last row if you want */

.fw-bold {
  font-weight: 700 !important;
}

.menu-link {
  display: flex; /* Use flexbox layout */
  align-items: center; /* Align items vertically */
  text-decoration: none; /* Remove default underline */
  color: #ffffff; /* Set text color */
}

/* Mobile: full screen */
@media (max-width: 768px) {
  .line-item-row .row > div {
    margin-bottom: 10px;
  }
  .line-item-row .col-md-1,
  .line-item-row .col-md-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .line-item-row .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .stats-card {
    margin-bottom: 1rem;
  }
}

.amount-col {
  min-width: 14ch;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.amount-label {
  margin-right: 1rem;
  text-align: right;
}
.strikethrough {
  text-decoration: line-through;
  opacity: 0.6;
}
.text-red {
  color: #cc0000 !important;
}
.text-green {
  color: #198754 !important;
}
.text-warning {
  color: #ffc107 !important;
}
.text-due {
  color: #D7A100 !important;
}

/* scope this to your modal/page if you like */
/* .form-floating > .form-control,
.form-floating > .form-select {
  font-size: 1rem;
  line-height: 1.5;
}
.form-select option {
  font-size: inherit;
}
.text-color {
  font-size: inherit;
}
@media (max-width: 576px) {
  .form-floating > .form-control,
  .form-floating > .form-select {
    font-size: 16px;
  }
} */

.login-wrapper {
  min-height: 100vh; /* full viewport height */
  display: flex; /* flexbox for centering */
  align-items: center; /* vertical centering */
  justify-content: center; /* horizontal centering */
  background-color: #f8f9fa; /* same as bg-light */
}
.login-card {
  border-radius: 1rem;
}
.side-mx {
  margin-left: 3rem;
  margin-right: 3rem;
}
.btn-login {
  padding: 0.6rem 1rem;
}
@media (max-width: 576px) {
  .side-mx {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .form-floating > .form-control,
  .form-floating > .form-select {
    font-size: 16px;
    /* height: auto; */
    /* padding-top: 1.05rem; */
    /* padding-bottom: 1.05rem; */
  }
  .form-floating > label {
    /* font-size: 0.95rem; */
    font-size: 1rem;
  }
  .btn-login {
    padding: 0.9rem 1rem;
    font-size: 1.05rem;
  }
  .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
}

.img-circle-bg {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;   /* slightly larger than image */
  height: 32px;
  border-radius: 50%;
  background-color: #404040;
}

.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinners {
  -moz-appearance: textfield;
}