/* ==========================================================================
   newsty.css - Main Application Stylesheet
   Canteen Management System
   ==========================================================================
   TABLE OF CONTENTS:
   1. Layout & Containers
   2. Spacing Utilities
   3. Typography & Text Utilities
   4. Form & Input Styles
   5. Button Styles
   6. Card Components
   7. Scrollbar Customization
   8. Branding & Logo
   9. Navbar & Navigation
   10. Offcanvas Side Navigation
   11. Login Card (Legacy)
   12. Profile & User
   13. Feedback
   14. Action Boxes
   15. Heading Styles
   16. Dalma Branding
   17. Booking Items
   18. Coupon Styles
   19. Animations
   20. Attention & Alerts
   21. Menu & Form Areas
   22. Simple Page Styles
   23. Side Nav (Legacy)
   24. Data Table Styling
   25. Tally Blocks (Legacy)
   ── COMMON STYLES (extracted from templates) ──
   26. Auth Pages (Login, Signup, Password Reset)
   27. Status Badges
   28. Filter Section & Controls
   29. Pagination
   30. Page Layout Containers
   31. Data Table (Modern)
   32. View & Action Buttons
   33. Empty State
   34. Cancel Cards
   35. Summary Box
   36. Settings Cards
   37. Modal Dialog
   38. Back Link
   39. Submit Button (Gradient)
   40. No Data Enhanced
   41. Vue Cloak
   ========================================================================== */

/* ==========================================================================
   1. LAYOUT & CONTAINERS
   ========================================================================== */

.container {
  max-width: 1140px !important;
  width: 100%;
}

.container-lg {
  max-width: 1720px !important;
  width: 100%;
}

.container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}
.user-select-none {
  user-select: none;
}

/* Mobile responsive container */
@media (max-width: 768px) {
  .container {
    max-width: 100% !important;
  }
}
/* Background utility classes */
.bg-antique {
  background: #f4fffd;
}
.bg-alice {
  background: aliceblue;
}

.w-100 {
  width: 100%;
  overflow-x: auto;
}

/* ==========================================================================
   4. FORM & INPUT STYLES
   ========================================================================== */

.form-area {
  padding: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .form-area {
    padding: 0.5rem;
  }

  .form_wrapper {
    padding: 0.5rem;
  }

  .form-control {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
}

/* ==========================================================================
   6. CARD COMPONENTS
   ========================================================================== */

.mycard {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .mycard {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .mycard-heading {
    font-size: 1.1rem;
  }
}

/* Table responsive wrapper */
.w-100 table {
  min-width: 600px;
}

@media (max-width: 768px) {
  .table {
    font-size: 0.85rem;
  }

  .table td,
  .table th {
    padding: 0.5rem;
  }
}
/* ==========================================================================
   2. SPACING UTILITIES
   ========================================================================== */

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.pa-3 {
  padding: 1rem !important;
}
.pt-2 {
  padding-top: 0.5rem !important;
}
.pt-3 {
  padding-top: 1rem !important;
}
.pb-3 {
  padding-bottom: 1rem !important;
}
.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.ma-0 {
  margin: 0;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
.mb-3 {
  margin-bottom: 1rem !important;
}
.mb-4 {
  margin-bottom: 1.5rem !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-3 {
  margin-top: 1rem !important;
}
.my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.mx-10 {
  margin: 0 10px;
}
.mr-25 {
  margin-right: 25px;
}
.ml-30 {
  margin-left: 30px;
}
/* ==========================================================================
   3. TYPOGRAPHY & TEXT UTILITIES
   ========================================================================== */

.justify-center {
  justify-content: center;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-bold {
  font-weight: bold;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-lowercase {
  text-transform: lowercase;
}
.text-italic {
  font-style: italic;
}
.width-fit-content {
  width: fit-content !important;
}

/* ==========================================================================
   5. BUTTON STYLES
   ========================================================================== */

/* Button responsive improvements */
@media (max-width: 576px) {
  .btn-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .btn-group .btn {
    width: 100%;
    margin: 0;
  }

  .my-btn {
    width: 100%;
  }
}

/* Input and select responsive */

@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
}

.text-left {
  text-align: left;
}
.border-left {
  border-left: 1px solid #dee2e6;
}
.border-right {
  border-right: 1px solid #dee2e6;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.scroll {
  overflow-y: auto;
  height: 95vh;
}

.fs-10 {
  font-size: 1rem;
}

.overflow-x {
  width: 100%;
  overflow-x: auto;
}

.border-bottom {
  border-bottom: 1px solid #eee;
}

.orangered {
  color: #f44336;
}

/* Additional date input styling */
/* input[type="date"],
input[type="month"] {
  position: relative;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  font-size: 1rem;
  background: white;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  font-size: 1.2rem;
  opacity: 0.7;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
} */

/* Mobile responsive additions */
/* @media (max-width: 768px) {
  input[type="date"],
  input[type="month"] {
    font-size: 16px !important;
  }

  .border-left,
  .border-right {
    border-left: none !important;
    border-right: none !important;
  }

  .scroll {
    height: auto;
    max-height: 80vh;
  }
} */

/* ==========================================================================
   GLOBAL & BODY STYLES
   ========================================================================== */

body {
  background: #f8f9fa;
  padding-top: 0;
  min-height: 100vh;
}
.colorful {
  background: #e9f8ff;
  min-height: 100vh;
}
#vue-app {
  margin-bottom: 50px;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-color: #dee2e6;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  background: #ffffff;
}

/* Mobile Responsive Fixes */
@media (max-width: 991.98px) {
  #vue-app {
    border-left: none;
    border-right: none;
    margin-bottom: 20px;
  }

  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .row {
    margin-left: 0;
    margin-right: 0;
  }

  .col,
  [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Make tables responsive */
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: 0.875rem;
  }

  /* Form responsive */
  .form-control,
  .btn {
    font-size: 1rem;
  }

  /* Card responsive */
  .card,
  .mycard {
    margin-bottom: 1rem;
  }

  .card-body {
    padding: 1rem;
  }

  /* Heading responsive */
  h1 {
    font-size: 1.75rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.25rem;
  }
  h4 {
    font-size: 1.1rem;
  }
  h5 {
    font-size: 1rem;
  }

  /* Button sizing */
  .btn {
    white-space: nowrap;
  }

  .btn-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 575.98px) {
  .container {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  table {
    font-size: 0.8rem;
  }

  .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .card-body,
  .mycard {
    padding: 0.75rem;
  }
}
/* ==========================================================================
   7. SCROLLBAR CUSTOMIZATION
   ========================================================================== */

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* ==========================================================================
   8. BRANDING & LOGO
   ========================================================================== */

.logoimg {
  width: 150px;
  height: auto;
}
.intro-panel {
  padding: 50px 0;
}
.intro-panel .welcome {
  font-size: 1.5rem;
  margin: 10px 0 0;
  font-family: cursive;
}
.intro-panel h1 {
  font-size: 2.2rem;
  margin: 10px;
}
.intro-panel h1 b.stylish {
  color: red;
  font-size: 3rem;
  background: -webkit-linear-gradient(#ff0645, #770ec6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dalma {
  font-weight: bold;
  color: red;
  font-size: 3rem;
  background: -webkit-linear-gradient(#ff0645, #770ec6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.intro-panel h2 {
  font-size: 1.5rem;
  margin-top: 20px;
}
.intro-panel h3 {
  font-size: 1.4rem;
  margin-top: 20px;
}
.bg-white {
  background: white !important;
}
header {
}
header h1 {
  font-size: 2rem;
  margin: 0;
}
header h2 {
  font-size: 1.4rem;
  margin: 5px 0;
}
nav {
  background: #47658b;
  font-size: 1.1rem;
  box-shadow: none;
}
nav ul a.active {
  background: #3390db;
}

nav.staffpage {
  background-color: #1b665f;
}
nav.staffpage ul a.active {
  background: #0da495;
}

/* ==========================================================================
   9. NAVBAR & NAVIGATION
   ========================================================================== */

/* .navbar {
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1020;
  margin-bottom: 0;
  overflow: visible;
  min-height: 60px;
}

.navbar .container-fluid {
  position: relative;
  display: block;
  align-items: center;
  flex-wrap: wrap;
  min-height: 40px;
}

.navbar-brand {
  font-weight: 600;
  font-size: 1.25rem;
  padding: 0.65rem 1rem;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 80px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar-brand:hover {
  transform: scale(1.05);
}

.navbar-brand i {
  font-size: 1.4rem;
  margin-right: 0.5rem;
  vertical-align: middle;
  flex-shrink: 0;
} */

/* Icon sizing in nav links */
.navbar-dark .navbar-nav .nav-link i {
  font-size: 1.1rem;
  margin-right: 0.4rem;
  vertical-align: middle;
  display: inline-block;
  width: 1.25rem;
  text-align: center;
}

li.nav-item {
  margin: 0 0.25rem;
}

.navbar-dark .navbar-nav .dropdown-toggle::after {
  margin-left: 0.5em;
  vertical-align: 0.15em;
  border-width: 0.25em;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9);
  padding: 0rem 0.75rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.navbar-dark .navbar-nav .nav-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 600;
}

.navbar-dark .navbar-nav .dropdown-menu {
  background: #ffffff;
  border: none;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.navbar-dark .navbar-nav .dropdown-item {
  padding: 0 10px;
  transition: all 0.2s ease;
}

.navbar-dark .navbar-nav .dropdown-item:hover {
  background: #f8f9fa;
  color: #0d6efd;
}

.navbar-dark .navbar-nav .dropdown-item i {
  margin-right: 0.5rem;
  width: 1.25rem;
}

/* ==========================================================================
   10. OFFCANVAS SIDE NAVIGATION
   ========================================================================== */

.offcanvas {
  width: 280px !important;
}

.offcanvas-header {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.offcanvas-header.bg-primary {
  background-color: #0d6efd !important;
}

.offcanvas-header.bg-danger {
  background-color: #dc3545 !important;
}

.offcanvas-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
}

.offcanvas-title i {
  font-size: 1.4rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.offcanvas-body {
  padding: 0;
  background: #ffffff;
}

.offcanvas-body .navbar-nav {
  width: 100%;
}

.offcanvas-body .nav-item {
  border-bottom: 1px solid #f0f0f0;
}

.offcanvas-body .nav-link {
  padding: 1rem 1.25rem;
  color: #212529 !important;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.offcanvas-body .nav-link i {
  font-size: 1.2rem;
  margin-right: 0.75rem;
  width: 1.5rem;
  text-align: center;
  color: #6c757d;
}

.offcanvas-body .nav-link:hover {
  background: #f8f9fa;
  color: #0d6efd;
}

.offcanvas-body .nav-link:hover i {
  color: #0d6efd;
}

.offcanvas-body .nav-link.active {
  background: #e7f3ff;
  color: #0d6efd;
  border-left: 4px solid #0d6efd;
}

.offcanvas-body .nav-link.active i {
  color: #0d6efd;
}

/* Dropdown in offcanvas */
.offcanvas-body .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin: 0;
  border: none;
  box-shadow: none;
  background: #f8f9fa;
}

.offcanvas-body .dropdown-item {
  padding: 0.75rem 1.25rem 0.75rem 3rem;
  font-size: 0.95rem;
  color: #495057;
}

.offcanvas-body .dropdown-item i {
  font-size: 1rem;
  margin-right: 0.5rem;
  width: 1.25rem;
  color: #6c757d;
}

.offcanvas-body .dropdown-item:hover {
  background: #e9ecef;
  color: #212529;
}

.offcanvas-body .dropdown-item:hover i {
  color: #0d6efd;
}

.offcanvas-body .dropdown-item.text-danger {
  color: #dc3545 !important;
}

.offcanvas-body .dropdown-item.text-danger:hover {
  background: #ffe5e8;
  color: #dc3545 !important;
}

.offcanvas-body .dropdown-header {
  padding: 0.5rem 1.25rem 0.5rem 3rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6c757d;
}

.offcanvas-body .dropdown-divider {
  margin: 0.5rem 1.25rem 0.5rem 3rem;
}

/* Navbar toggler for mobile */
@media (max-width: 991.98px) {
  /* Fix navbar height to contain all elements properly */
  .navbar {
    padding: 1rem 0;
    min-height: 50px;
  }

  .navbar .container-fluid {
    min-height: 40px;
    display: block;
    align-items: center;
    flex-wrap: nowrap;
  }

  .navbar-toggler {
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
    border-color: #ffffff;
  }

  .navbar-brand {
    font-size: 1.1rem;
    padding: 0.65rem 0.85rem;
    margin-right: 0.5rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    flex-shrink: 1;
    overflow: hidden;
  }

  .navbar-brand i {
    font-size: 1.2rem;
    flex-shrink: 0;
  }
}

/* Extra small devices */
@media (max-width: 575.98px) {
  .navbar {
    padding: 0.85rem 0;
    min-height: 50px;
  }

  .navbar .container-fluid {
    min-height: 50px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .navbar-brand {
    font-size: 0.95rem;
    padding: 0.65rem 0.65rem;
    line-height: 1.3;
  }

  .navbar-brand i {
    font-size: 1rem;
    margin-right: 0.35rem;
  }

  .navbar-toggler {
    font-size: 1.15rem;
  }

  .offcanvas {
    width: 260px !important;
  }

  .offcanvas-body .nav-link {
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
  }
}

/* Admin navbar specific styling */
.staffpage.bg-danger .navbar-brand {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.staffpage.bg-danger .navbar-brand:hover {
  cursor: default;
}

/* Navbar toggler button improvements */
.navbar-toggler {
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

.navbar-toggler:hover {
  border-color: rgba(255, 255, 255, 0.8);
}

.navbar-toggler-icon {
  width: 1.25em;
  height: 1.25em;
}

.staffpage .nav-link.active {
  background: #ffd4d0 !important;
  color: #540606 !important;
}

/* Navbar badge styling */
.navbar-dark .badge.bg-light {
  font-weight: 600;
  padding: 0.35em 0.6em;
  font-size: 0.85em;
  margin-left: 5px;
}

/* Dropdown header styling */
.dropdown-header {
  font-size: 0.9rem;
  font-weight: 600;
  color: #495057;
  padding: 0.5rem 1rem;
}

/* Dropdown item text colors */
.dropdown-item.text-danger {
  color: #dc3545 !important;
  font-weight: 500;
}

.dropdown-item.text-danger:hover {
  background: #ffe5e8;
  color: #dc3545 !important;
}

/* Smooth transitions */
.navbar-expand-lg .navbar-collapse {
  display: block !important;
  transition: all 0.3s ease-in-out;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
    display: block !important;
    transition: all 0.3s ease-in-out;
    text-align: center;
  }
}

.navbar-collapse.collapsing {
  transition: height 0.35s ease;
}

.dropdown-menu {
  animation: slideDown 0.2s ease-in-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Focus states for accessibility */
.navbar-dark .navbar-nav .nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Improve shadow for navbar */
.navbar.shadow-sm {
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15) !important;
  height: auto;
  padding: 0;
}

/* Ensure text is always visible */
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-brand {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-size: 1rem;
}

/* Prevent background bleed-through */
.navbar.bg-primary,
.navbar.bg-danger {
  background-color: inherit !important;
  position: relative;
  padding: 0;
}

.navbar.bg-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #0d6efd;
  z-index: -1;
}

.navbar.bg-danger::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dc3545;
  z-index: -1;
}

/* ==========================================================================
   11. LOGIN CARD (Legacy)
   ========================================================================== */

.login-card {
  background: #ffffff;
  background: linear-gradient(to right, #ffffff, #f1feff, #ffffff);
  padding: 2rem;
  display: inline-block;
  margin-top: 50px;
  max-width: 350px;
  text-align: left;
}
.login-card .user_details {
  margin: 10px 0;
  background: #faebd76e;
  padding: 10px 0;
  border: 1px solid #f4daad;
}
.login-card .user_details p {
  margin: 0px 0;
  font-size: 1.2rem;
}
.login-card .user_details p.username span {
  display: block;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  font-weight: normal;
}
.login-card .user_details p.username {
  background: bisque;
  padding: 5px 0;
  font-weight: bold;
  font-size: 1.5rem;
}

.login-card .user_details p.balance {
  display: inline-flex;
  align-items: center;
}
.user-icon {
  width: 150px;
  border: 1px solid #e0e0e0;
  padding: 10px;
  border-radius: 20px;
  display: block;
  margin: auto;
}
.userform {
  display: inline-flex;
  padding: 5px;
  align-items: center;
}

.teal {
  color: teal;
}

/* ==========================================================================
   12. PROFILE & USER
   ========================================================================== */

.profile-details p {
  margin: 0px;
}
.profile-details table td {
  /* word-break: break-word; */
}

/* ==========================================================================
   13. FEEDBACK (Legacy)
   ========================================================================== */

.feedback_wrapper {
}

.feedback_wrapper .item {
  text-align: left;
}

.feedback_wrapper .item h2 {
  font-size: 1.6rem;
  margin: 10px 0 0;
  font-weight: bold;
  letter-spacing: 1px;
  font-style: italic;
  color: brown;
}

.feedback_wrapper .item .star {
  font-size: 2.5rem;
  line-height: 2.5rem;
  cursor: pointer;
}

.feedback_wrapper .item .star.fill {
  color: #ffce00;
}

/* ==========================================================================
   14. ACTION BOXES
   ========================================================================== */

.box1 {
  display: block;
  margin: 10px 0 10px 0px;
  text-align: center;
  text-decoration: none;
  padding: 25px 0;
  border: 1px solid #747474;
  background: #e9f8ff;
  background-image: radial-gradient(circle, #ffffff 0%, #c7e8f7 100%);
  color: #417690;
  border-radius: 2px;
  font-size: 1.3rem;
  font-weight: bold;
  text-transform: capitalize;
}

.box1:hover {
  background-image: radial-gradient(circle, #f6ffa9 0%, #25eb77 100%);
  transition: all 0.5s ease;
  /* transform-origin: left; */
}

.mycard {
  border: 1px solid #0000002d;
  padding: 10px;
  font-size: 1.3rem;
}
.mycard-heading {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  margin-bottom: 10px;
  color: #09405f;
  padding: 5px;
  text-transform: uppercase;
  border: 2px solid;
  display: inline-block;
}
.mycard table td {
  padding: 5px 10px;
}

.mycard .radio_box_wrapper {
  align-items: center;
  margin: 10px 0;
}
.mycard .radio_box {
  align-items: center;
  display: inline-flex;
  margin-right: 10px;
}
.mycard .radio_box:hover {
  background: #d9edff;
}
.mycard .radio_box p {
  margin: 5px 0;
  padding-right: 10px;
}
.mycard .radio_box input {
  width: 1.2rem;
  margin: 0 5px 0 0;
}
.mycard .input-field {
  margin-bottom: 10px;
  user-select: none;
}

.profile_tab_underhead {
  font-size: 1.5rem;
  margin: 10px 0;
}

.tabs-area,
.tabs-area .tabs {
  /* background: #f9ffe7; */
}

table.bordered td,
table.bordered th {
  border: 1px solid #c0bcbc;
}

/* ==========================================================================
   23. SIDE NAV (Legacy - Materialize)
   ========================================================================== */

nav,
nav .nav-wrapper i,
nav a.sidenav-trigger,
nav a.sidenav-trigger i {
  height: 48px;
  line-height: 48px;
}

@media only screen and (min-width: 601px) {
}
@media only screen and (max-width: 992px) {
  nav a.sidenav-trigger,
  nav a.sidenav-trigger i {
    display: flex;
  }
}

ul#mobile-demo {
  padding: 1rem 0;
  overflow: auto;
}

ul#mobile-demo li a {
  font-size: 1.5rem;
  text-align: left;
  display: flex;
  align-items: center;
}
ul#mobile-demo li a.active {
  background-color: #c7e4ff;
}
ul#mobile-demo li a span.material-icons {
  margin-right: 10px;
}

ul#mobile-demo li.name {
  font-size: 1.5rem;
  color: #ee6e73;
  text-align: center;
  padding: 0px 10px;
  line-height: 2rem;
}
ul#mobile-demo li.username {
  font-size: 1.5rem;
  color: #8a8a8a;
  text-align: center;
  padding: 0px 10px;
  line-height: 2rem;
}
ul#mobile-demo li.balance {
  text-transform: capitalize;
  font-size: 1.4rem;
  font-family: system-ui;
  color: #32bf38;
  text-align: center;
  padding: 0px 10px;
  line-height: 2rem;
}

ul#mobile-demo li.admin_section {
  text-transform: capitalize;
  font-size: 1.5rem;
  font-family: system-ui;
  font-weight: bold;
  color: rgb(138 103 227);
  text-align: left;
  line-height: 2rem;
  margin: 0 30px;
  border-bottom: 2px solid;
}

nav ul a:hover {
  /* background-color: rgb(29 29 29 / 44%); */
}

ul#mobile-demo li a:hover {
  background: #c6ddeb;
}

.my_box_1 {
  padding: 15px;
  margin: 20px 0;
}

.accounts_pages_head {
  font-size: 2rem !important;
  line-height: 2rem !important;
  margin: 10px 0 !important;
  font-weight: bold;
  color: #284391;
}
.accounts_pages_head_subtext {
  font-size: 1.6rem;
  margin: 0;
}
.errorlist li {
  color: red;
}
.msg_bar ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
  box-shadow: 1px 1px 1px #cbcbcb;
}
.msg_bar li {
  text-align: center;
  padding: 5px;
  font-size: 1rem;
  background: #fff3cd;
}

.pwd_change_page ul {
  margin-bottom: 30px;
  color: #2d8a76;
}

.pwd_change_page ul.errorlist {
  margin: 0px;
}

.registration_help {
  font-size: 1.5rem;
}

.no_data_div {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 1.2rem;
}

.no_data_div i {
  font-size: 4rem;
  display: block;
  margin-bottom: 20px;
  opacity: 0.5;
}

.no_data_div p {
  font-size: 1.6rem;
  margin: 10px 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 100;
}

.stats_item_name {
  font-size: 2rem;
  margin: 0 0 5px;
  text-align: left;
}

nav ul a {
  display: flex;
  align-items: center;
}
nav ul a > span {
  margin-right: 5px;
}
nav ul a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.dropdown-content li > a {
  font-size: 1rem;
  color: #102748;
  display: flex;
  line-height: 22px;
  padding: 14px 16px;
  border-bottom: 1px solid #d9d9d9;
}

.dropdown-content li > a span {
  margin-right: 5px;
}

.bg-white {
  background: white;
}
.meal-type-wrapper {
  /* background-color: aquamarine; */
}
.styl_head {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.black_head {
  text-transform: uppercase;
  font-weight: bold;
  margin: 0;
  font-size: 2.6rem;
}
.red_head {
  text-transform: uppercase;
  font-weight: bold;
  margin: 0;
  font-size: 2.6rem;
  color: #d03c31;
}

/* === HEADING STYLE #3 === */
.three .styl_head {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5em;
  padding-bottom: 5px;
  margin-bottom: 10px;
  position: relative;
}
.three .styl_head:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 55px;
  background-color: #111;
}
.three .styl_head:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 1px;
  width: 95%;
  max-width: 255px;
  background-color: #333;
}

/* === HEADING STYLE #13 === */
.thirteen {
  text-align: center;
}
.thirteen .styl_head {
  position: relative;
  font-size: 1.5rem;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  margin: auto;
  border: 2px solid #222;
  padding: 5px 11px 3px 11px;
}
.thirteen .styl_head:before,
.thirteen .styl_head:after {
  background-color: #c50000;
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 50%;
  bottom: 14px;
}
.thirteen .styl_head:before {
  left: -20px;
}
.thirteen .styl_head:after {
  right: -20px;
}

/* myheading */
.myheading .styl_head {
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: uppercase;
  /* border: 2px solid #222; */
  padding: 5px 0px;
  color: #f14ed3;
  background-image: -webkit-linear-gradient(
    0deg,
    #cb1a64 36%,
    #ed9a32 94%,
    #db3636 39%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.myheading h3 {
  color: #1a3f96;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2rem;
}
.myheading h4 {
  color: #555;
  font-weight: 500;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 1.5rem;
}

/* ==========================================================================
   16. DALMA BRANDING
   ========================================================================== */

.dalma-top-bar {
  background: white;
  border-bottom: 2px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dalma-brand-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  background: -webkit-linear-gradient(#ff0645, #770ec6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
}

.dalma-brand-subtitle {
  color: #666;
  margin: 0;
}

.dalma-avatar {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dalma-balance-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white !important;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ==========================================================================
   17. BOOKING ITEMS
   ========================================================================== */

.booking_item {
  margin: 0;
}
.booking_item label.main {
  font-weight: bold;
  display: block;
  cursor: pointer;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: #153672;
}
.booking_item label.sub {
  display: block;
  cursor: pointer;
  font-size: 1.1rem;
  color: #5e1212;
}
.booking_item label span.item_name {
  font-size: 1.3rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
}

.booking_item:hover {
  background: #fff2e6;
  cursor: pointer;
}
.booking_item.selected {
  background: #cfffcf;
  border: 1px solid #115f14;
}

.booking_item .sub-detail {
  display: block;
  font-size: 1rem;
  font-weight: normal;
  padding-left: 36px;
  color: #424242;
  cursor: pointer;
}
.booking_item .sub-detail .chip {
  align-items: center;
  display: inline-block;
  color: #4c4c4c;
  background: #eafffe;
  border: 1px solid #75b5ab;
  border-radius: 6px;
  margin-top: 5px;
}
.booking_item .sub-detail .chip.red {
  color: white;
}
.input-field.qc {
  display: grid;
  grid-template-columns: auto auto auto auto;
  max-width: 300px;
  text-align: center;
  margin: 0 0 0 50px;
  align-items: center;
}
.input-field.qc .label {
  padding: 10px;
  border-radius: 10px 0 0 10px;
  border: 1px solid #979797;
  margin-right: 15px;
}
.input-field.qc button {
  border-radius: 2px;
  text-align: center;
  width: 50px;
  border: 0;
  cursor: pointer;
}
.input-field.qc input {
  width: 50px;
  text-align: center;
}

.lunchitem-group {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.lunchitem-group .ic p {
  margin-bottom: 0;
}

.sel_items {
  border: 5px;
  border-style: double;
  border-color: #e2e2e2;
  margin-bottom: 10px;
  padding: 15px;
}
.lunch_sel_items {
  width: 100%;
  display: inline-flex;
  text-align: left;
  font-size: 1.2rem;
}
.lunch_sel_items p {
  margin: 0 0 5px;
}
.no_lunch_items {
  margin: 5px 0;
  color: #cd123c;
  font-size: 1.2rem;
  text-align: center;
}
.sel_items .balance_detail {
  display: flex;
}
.sel_items .balance_detail p {
  font-size: 1rem;
  margin: 5px 0;
  color: blue;
}

.active_coupon_head {
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 2rem;
  border: 4px solid;
  border-radius: 8px;
  text-align: center;
  padding: 5px 10px;
  display: inline-block;
  color: #232c76;
  font-weight: 600;
}

.active_coupon_head .date {
  display: block;
  font-weight: bold;
  font-size: 2rem;
  line-height: 2rem;
}
/* ==========================================================================
   18. COUPON CARD (Professional Redesign)
   ========================================================================== */

/* ── Card shell ── */
.cpn-card {
  position: relative;
  background: #fff;
  border: 2px solid #dee2e6;
  border-radius: 14px;
  margin-bottom: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.2s;
}
.cpn-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* State variations */
.cpn-card.cpn-used {
  border-color: #a3cfbb;
  background: #f6fdf8;
}
.cpn-card.cpn-cancelled {
  border-color: #f1aeb5;
  background: #fef7f7;
}
.cpn-card.cpn-active {
  border-color: #b6d4fe;
}

/* ── Perforated edge circles ── */
.cpn-perf {
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--bs-body-bg, #f5f5f5);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.cpn-perf-l {
  left: -11px;
  border-right: 2px solid #dee2e6;
}
.cpn-perf-r {
  right: -11px;
  border-left: 2px solid #dee2e6;
}
.cpn-card.cpn-used .cpn-perf-l {
  border-color: #a3cfbb;
}
.cpn-card.cpn-used .cpn-perf-r {
  border-color: #a3cfbb;
}
.cpn-card.cpn-cancelled .cpn-perf-l {
  border-color: #f1aeb5;
}
.cpn-card.cpn-cancelled .cpn-perf-r {
  border-color: #f1aeb5;
}
.cpn-card.cpn-active .cpn-perf-l {
  border-color: #b6d4fe;
}
.cpn-card.cpn-active .cpn-perf-r {
  border-color: #b6d4fe;
}

/* ── Watermark ── */
.cpn-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  font-size: 4.5rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: rgba(25, 135, 84, 0.1);
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
  user-select: none;
}
.cpn-watermark-cancel {
  color: rgba(220, 53, 69, 0.1);
}

/* ── Header strip ── */
.cpn-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 18px 10px;
  background: linear-gradient(135deg, #1a1f71 0%, #274690 100%);
  color: #fff;
}
.cpn-card.cpn-used .cpn-header {
  background: linear-gradient(135deg, #157347 0%, #198754 100%);
}
.cpn-card.cpn-cancelled .cpn-header {
  background: linear-gradient(135deg, #8c2022 0%, #b02a30 100%);
}

.cpn-org {
  font-size: 0.72rem;
  opacity: 0.85;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cpn-category {
  font-size: 1.35rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.cpn-header-right {
  text-align: right;
  flex-shrink: 0;
  margin-left: 10px;
}

/* badges */
.cpn-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.cpn-badge-active {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.cpn-badge-used {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.cpn-badge-cancelled {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.cpn-badge i {
  font-size: 0.6rem;
}

/* Blinking green dot for active/live coupons */
.cpn-live-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #22c55e;
  position: relative;
  flex-shrink: 0;
}
.cpn-live-dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.45);
  animation: cpn-pulse 1.4s ease-in-out infinite;
}
@keyframes cpn-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* ── Body: info + QR ── */
.cpn-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 18px 10px;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.cpn-info {
  flex: 1;
  min-width: 0;
}
.cpn-number {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  background: linear-gradient(90deg, #0d0860 0%, #0654aa 50%, #00a86b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.cpn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: #495057;
  margin-bottom: 4px;
}
.cpn-meta i {
  color: #6c757d;
  margin-right: 2px;
}
.cpn-date {
  font-weight: 700;
  color: #c41717;
  font-size: 0.92rem;
}
.cpn-user {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 2px;
}
.cpn-user i {
  margin-right: 2px;
}

/* QR container */
.cpn-qr {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}
.cpn-qr img,
.cpn-qr canvas,
.cpn-qr svg {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* ── Dashed separator ── */
.cpn-sep {
  border-top: 2px dashed #ced4da;
  margin: 0 28px;
}
.cpn-card.cpn-used .cpn-sep {
  border-color: #a3cfbb;
}
.cpn-card.cpn-cancelled .cpn-sep {
  border-color: #f1aeb5;
}

/* ── Items table ── */
.cpn-items {
  padding: 8px 18px 4px;
  position: relative;
  z-index: 2;
}
.cpn-row {
  display: flex;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
  color: #1a2eaa;
  text-transform: uppercase;
}
.cpn-row:last-child {
  border-bottom: none;
}
.cpn-row-head {
  font-weight: 700;
  color: #6c757d;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cpn-row-total {
  font-weight: 800;
  border-top: 2px solid #dee2e6;
  border-bottom: none;
  color: #212529;
}
.cpn-row-cancelled {
  opacity: 0.5;
}
.cpn-row-pending {
  background: #fff8e1;
  border-radius: 4px;
}

.cpn-col-name {
  flex: 1 1 40%;
  min-width: 0;
  word-break: break-word;
}
.cpn-col-qty {
  flex: 0 0 14%;
  text-align: center;
  font-feature-settings: "tnum";
}
.cpn-col-amt {
  flex: 0 0 18%;
  text-align: right;
  font-feature-settings: "tnum";
}
.cpn-col-status {
  flex: 0 0 28%;
  text-align: right;
  font-size: 0.78em;
}

.cpn-strike {
  text-decoration: line-through;
}

/* status pills */
.cpn-st {
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.72rem;
  white-space: nowrap;
}
.cpn-st-active {
  color: #0d6efd;
  background: #e7f1ff;
}
.cpn-st-done {
  color: #198754;
  background: #d1e7dd;
}
.cpn-st-cancel {
  color: #dc3545;
  background: #f8d7da;
}
.cpn-st-pending {
  color: #fd7e14;
  background: #fff3cd;
}

/* ── Sections (cancel, remarks) ── */
.cpn-section {
  padding: 10px 18px;
  border-top: 1px solid #e9ecef;
}
.cpn-cancel-disabled {
  padding: 10px 18px;
  border-top: 1px solid #e9ecef;
  font-size: 0.85em;
  color: #999;
}
.cpn-cancel-label {
  font-size: 0.85em;
  color: #666;
  margin-bottom: 6px;
}
.cpn-cancel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding: 4px 8px;
  background: #fff8f8;
  border-radius: 6px;
  border: 1px solid #f5c6cb;
  font-size: 0.9em;
}
.cpn-remarks-label {
  font-size: 0.82em;
  font-weight: 600;
  color: #856404;
  margin-bottom: 4px;
}

/* ── Footer ── */
.cpn-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 18px 12px;
  border-top: 1px solid #e9ecef;
}
.cpn-tagline {
  font-size: 0.78em;
  color: #adb5bd;
  font-style: italic;
}

/* ── Mobile tweaks ── */
@media (max-width: 500px) {
  .cpn-header {
    padding: 10px 14px 8px;
  }
  .cpn-category {
    font-size: 1.1rem;
  }
  .cpn-body {
    padding: 10px 14px 8px;
    flex-wrap: wrap;
  }
  .cpn-number {
    font-size: 1.8rem;
  }
  .cpn-qr {
    width: 64px;
    height: 64px;
  }
  .cpn-sep {
    margin: 0 20px;
  }
  .cpn-items {
    padding: 6px 14px 4px;
  }
  .cpn-row {
    font-size: 0.82rem;
  }
  .cpn-col-name {
    flex-basis: 36%;
  }
  .cpn-col-qty {
    flex-basis: 12%;
  }
  .cpn-col-amt {
    flex-basis: 18%;
  }
  .cpn-col-status {
    flex-basis: 34%;
  }
  .cpn-section,
  .cpn-cancel-disabled,
  .cpn-footer {
    padding-left: 14px;
    padding-right: 14px;
  }
  .cpn-perf {
    display: none;
  }
}

/* ==========================================================================
   19. ANIMATIONS
   ========================================================================== */

.circle {
  width: 20px;
  height: 20px;
  background: #f98238;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  margin: auto;
  animation: circle 6s linear infinite;
}

@keyframes circle {
  0% {
    transform: rotate(0deg) translate(-50px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translate(-50px) rotate(-360deg);
  }
}

.square-mover {
  width: 15px;
  height: 15px;
  background: #f98238;
  position: absolute;
  top: -15px;
  bottom: 0;
  left: -15px;
  right: 0;
  animation-name: up-down;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes square {
  0% {
    top: -15px;
    left: -15px;
  }
  25% {
    top: 100%;
    left: -15px;
  }
  50% {
    top: 100%;
    left: 100%;
  }
  75% {
    top: -15px;
    left: 100%;
  }
  100% {
    top: -15px;
    left: -15px;
  }
}

@keyframes up-down {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(2) rotate(-90deg);
  }
  75% {
    transform: translateY(100%) rotate(90deg);
  }
  100% {
    transform: translateY(0%) scale(1);
  }
}

/* ==========================================================================
   20. ATTENTION & ALERTS
   ========================================================================== */

.attention {
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0;
}
.attention_details {
  font-size: 1.25rem;
  margin: 10px 0;
  text-align: center;
}
.attention_details td,
.attention_details th {
  text-align: center;
  padding: 5px;
  border: 1px solid #6f6f6f;
}
.closedimg {
  max-width: 250px;
  user-select: none;
}
.for_date {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: #42cd00;
}
.timing {
  display: flex;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #3a3b3b;
}

.nothing-to-show {
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #38578e;
}

/* ==========================================================================
   21. MENU & FORM AREAS
   ========================================================================== */

.menu_item_list {
  border: 1px solid #e0e0e0;
  margin-top: 20px;
}
.menu_item_list h2 {
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: bold;
  color: #47658b;
  margin: 0 0 10px;
}

.form-area {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

.form-area .ctl2 {
  display: inline-block;
  margin: 5px;
}
.btn-ctl2 {
  outline: none;
  border: 0;
  padding: 10px;
}
.btn-ctl2:focus {
  outline: 1px solid #dcdcdc;
  background-color: inherit;
}
.btn-ctl2.closed {
  background-color: #e7f4ff;
}

.form_wrapper {
  display: inline-block;
}
.form_wrapper .form_report {
  display: inline-flex;
  padding: 0 10px;
  align-items: center;
}

tr.delivered {
  background: #a7e78b !important;
}

/* ==========================================================================
   25. TALLY BLOCKS (Legacy)
   ========================================================================== */

.tally_blocks {
  padding: 10px;
  background: #f0f5f2;
  border: 1px solid #636363;
  margin-top: 20px;
}
.tally_blocks h1 {
  font-size: 1.3em;
  margin: 0 0 15px;
  font-weight: bold;
  color: #006256;
}

.tally_blocks .sub h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 10px 0;
}

.tally_blocks .sub span {
  display: block;
}

.tally_page_btn {
  cursor: pointer;
  margin: 10px 0;
  display: block;
}

/* ==========================================================================
   22. SIMPLE PAGE STYLES
   ========================================================================== */

.simple-page .menu-area {
}

.simple-page .coupon-details-area {
  padding: 10px;
}

.simple-page .coupon-details-area tr.delivered td {
  background: #7dc156;
}

.simple-page input {
  border: 2px solid #c5c5c5;
  border-radius: 4px;
  height: 30px;
  line-height: normal;
  color: #282828;
  box-sizing: border-box;
  user-select: auto;
  font-size: 16px;
  padding: 0 6px;
  padding-left: 12px;
  margin-right: 5px;
}

.simple-page .my-btn {
  background-color: #2778c4;
  border-radius: 2px;
  border: none;
  color: white;
  padding: 4px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
.simple-page .my-btn:hover {
}
.simple-page .my-btn.lg {
  padding: 10px 20px;
}
.simple-page .my-btn.red {
  background-color: #c42731;
}

.simple-page td span {
  background: antiquewhite;
  border: 1px solid #b0b0b0;
  padding: 2px 4px;
  border-radius: 4px;
  margin-right: 5px;
  display: inline-block;
}

.my-nav {
  padding: 10px 10px 0;
  background: #47658b;
  margin-bottom: 5px;
}
.my-nav .nav-btn {
  border-radius: 2px;
  font-size: 1rem;
  color: #ffffff;
  padding: 5px 20px;
  display: inline-flex;
  align-items: center;
  text-transform: capitalize;
  text-decoration: none;
  margin-bottom: 10px;
}

.my-nav .nav-btn:hover {
  background: rgb(255, 255, 229);
  color: black;
}

.my-nav .nav-btn.active {
  background: #def8ff;
  color: black;
}

#txn-table tr.credit {
  background-color: #b7ffb9;
}

/* ==========================================================================
   24. DATA TABLE STYLING (Legacy)
   ========================================================================== */
.dt-container {
  width: 100%;
  overflow: auto;
}

.dt-container select {
  background-color: rgba(255, 255, 255, 0.9);
  width: auto;
  height: auto;
  padding: 5px;
  border: 1px solid #f2f2f2;
  border-radius: 2px;
}
.dt-container select {
  display: inline-block;
}

.dt-container input[type="search"]:not(.browser-default) {
  width: auto;
  height: auto;
}

body.dt-print-view {
  font-family: sans-serif;
  font-size: 14px;
}

body.dt-print-view h1 {
  text-align: center;
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: bold;
}

body.dt-print-view div {
  text-align: center;
  margin: 0 0 10px;
  font-size: 1.3rem;
}

body.dt-print-view table {
  font-size: 1.1rem;
}
body.dt-print-view table td span {
  display: block;
}
body.dt-print-view tr.bold td {
  font-weight: bold;
}
body.dt-print-view table tfoot {
  display: table-row-group;
}

/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVE STYLES
   ============================================ */

/* General Mobile Optimizations */
@media (max-width: 991.98px) {
  /* Typography */
  body {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Spacing adjustments */
  .py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  .my-4 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-3 {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Full width elements */
  .form-control,
  .btn,
  input,
  select,
  textarea {
    width: 100%;
  }

  /* Button improvements */
  .btn {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .btn-group .btn {
    flex: 1;
  }

  /* Card and content areas */
  .card,
  .mycard,
  .form-area,
  .coupon-details-area {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
  }

  /* Remove side borders on mobile */
  .border-left,
  .border-right {
    border-left: none !important;
    border-right: none !important;
  }

  /* Table improvements */
  table {
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  table thead {
    display: table-header-group;
  }

  table tbody {
    display: table-row-group;
  }

  /* DataTable mobile fixes */
  .dataTables_wrapper {
    overflow-x: auto;
  }

  .dataTables_filter input,
  .dataTables_length select {
    width: 100% !important;
    margin: 0.5rem 0;
  }

  /* Modal responsive */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-content {
    border-radius: 0.5rem;
  }

  /* Image responsive */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Flex adjustments */
  .flex {
    flex-direction: column;
  }

  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }

  /* Show mobile-only elements */
  .mobile-only {
    display: block !important;
  }
}

/* Small Mobile Devices */
@media (max-width: 575.98px) {
  body {
    font-size: 13px;
  }

  /* Headings */
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.35rem;
  }
  h3 {
    font-size: 1.2rem;
  }
  h4 {
    font-size: 1.1rem;
  }
  h5 {
    font-size: 1rem;
  }
  h6 {
    font-size: 0.9rem;
  }

  /* Padding/margin reductions */
  .py-3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-2 {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
  }
  .my-3 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-2 {
    margin-top: 0.375rem !important;
    margin-bottom: 0.375rem !important;
  }

  /* Button sizing */
  .btn {
    font-size: 0.9rem;
  }

  .btn-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  /* Card/form spacing */
  .card,
  .mycard,
  .form-area {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }

  /* Table font size */
  table {
    font-size: 0.75rem;
  }

  table th,
  table td {
    padding: 0.375rem 0.25rem;
  }

  /* Form inputs */
  .form-control {
    padding: 0.5rem 0.75rem;
    font-size: 14px;
  }

  label {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
  }
}

/* Landscape phone orientation */
@media (max-width: 767.98px) and (orientation: landscape) {
  .navbar {
    padding: 0.5rem 0;
  }

  .offcanvas {
    width: 240px !important;
  }
}

/* Print styles */
@media print {
  .navbar,
  .offcanvas,
  .btn,
  .no-print {
    display: none !important;
  }

  body {
    background: white;
  }

  #vue-app {
    border: none;
    box-shadow: none;
  }
}

/* ============================================================================
   26. AUTH PAGES � Login, Signup, Password Reset, Verification
   Used by: account/login.html, account/signup.html, account/password_reset.html,
            account/verification_sent.html, account/signup_request_sent.html
   ============================================================================ */

/* Container that centres the auth card */
.auth-container {
  max-width: 500px;
  margin: 30px auto;
}

/* Card wrapper with rounded corners and shadow */
.auth-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Gradient header banner */
.auth-header {
  color: #0f4888;
  padding: 10px;
  text-align: center;
}

.auth-header i {
  font-size: 3rem;
  display: block;
}

.auth-header h2 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
}

.auth-header p {
  margin: 10px 0 0;
  opacity: 0.95;
  font-size: 1rem;
}

/* Body / form area */
.auth-body {
  padding: 35px;
}

/* Info/alert strip inside auth pages */
.auth-info {
  background: #e3f2fd;
  border-left: 4px solid #2196f3;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 25px;
}

.auth-info i {
  color: #2196f3;
  margin-right: 8px;
}

.auth-info a {
  color: #1976d2;
  font-weight: 600;
  text-decoration: none;
}

.auth-info a:hover {
  text-decoration: underline;
}

/* Footer strip (links to login / signup) */
.auth-footer {
  text-align: center;
  padding: 20px 35px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}

.auth-footer p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

.auth-footer a {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* Error banner shown when login fails */
.error-message {
  background: #ffebee;
  border-left: 4px solid #f44336;
  padding: 12px 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  color: #c62828;
  font-size: 0.9rem;
}

.error-message i {
  margin-right: 8px;
}

/* Inline-icon wrapper for form fields */
.input-icon-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #adb5bd;
  font-size: 1.1rem;
}

.input-icon-wrapper input {
  padding-left: 45px;
}

/* Password requirement checklist (signup) */
.requirements-list {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
  font-size: 0.9rem;
}

.requirements-list h6 {
  color: #667eea;
  font-weight: 600;
  margin-bottom: 10px;
}

.requirements-list ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
}

.requirements-list li {
  margin-bottom: 5px;
}

/* Help text for password reset */
.help-text {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 12px;
  border-radius: 5px;
  margin-top: 20px;
  font-size: 0.9rem;
  color: #856404;
}

.help-text i {
  margin-right: 8px;
}

/* Success card variation (signup_request_sent) */
.success-container {
  max-width: 550px;
  margin: 50px auto;
}

.success-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
}

.success-header {
  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  color: white;
  padding: 40px 30px;
}

.success-header i {
  font-size: 4rem;
  margin-bottom: 15px;
  display: block;
}

.success-header h2 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
}

.success-body {
  padding: 35px;
}

.success-body p {
  font-size: 1.05rem;
  color: #555;
  margin-bottom: 15px;
}

.info-card {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  padding: 20px;
  border-radius: 8px;
  margin: 25px 0;
  text-align: left;
}

.info-card h6 {
  color: #2e7d32;
  font-weight: 700;
  margin-bottom: 10px;
}

.info-card ul {
  margin: 0;
  padding-left: 20px;
  color: #555;
}

.info-card li {
  margin-bottom: 5px;
}

/* Generic "go home" gradient button */
.btn-home {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  color: white;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s;
}

.btn-home:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
  color: white;
}

/* ============================================================================
   27. STATUS BADGES
   Used by: cancellation_requests_store/mess, store_admin_dashboard,
            my_store_orders, view_requisitions, approve_requisitions,
            complete_requisitions, requisition_detail, requisition_report,
            manage_user_requests
   ============================================================================ */

/* Base badge � attach a modifier for colour */
.status-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* Colour modifiers using .status-badge.{state} syntax */
.status-badge.pending,
.status-pending {
  background: #fff3cd;
  color: #856404;
}

.status-badge.approved,
.status-approved {
  background: #d1e7dd;
  color: #0f5132;
}

.status-badge.rejected,
.status-rejected {
  background: #f8d7da;
  color: #842029;
}

.status-badge.completed,
.status-completed {
  background: #d1ecf1;
  color: #0c5460;
}

.status-badge.cancelled,
.status-cancelled {
  background: #f8d7da;
  color: #721c24;
}

.status-badge.delivered,
.status-delivered {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

/* ========== STATS STRIP ========== */
.stats-strip {
  display: flex;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 12px;
}
.stats-strip .stat-item {
  flex: 1;
  padding: 10px 8px;
  border-right: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stats-strip .stat-item:last-child {
  border-right: none;
}
.stats-strip .stat-num {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.stats-strip .stat-lbl {
  font-size: 0.65rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* ============================================================================
   28. FILTER SECTION & CONTROLS
   Used by: cancellation_requests_store, cancellation_requests_mess,
            admin_cancel_bookings, manage_user_requests, requisition_report,
            view_requisitions, feedback_admin, feedback_history
   ============================================================================ */

/* Containing box for filter controls */
.filter-section {
  background: white;
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  overflow: hidden;
}

.filter-section-header {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.filter-section-body {
  padding: 18px;
  border-top: 1px solid #e9ecef;
}

/* Inline form row inside filter sections */
.filter-section form,
.filter-row {
  padding: auto;
}

/* Inputs / selects within filter sections */
.filter-section select,
.filter-section input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.95rem;
  background: white;
}

.filter-section select:focus,
.filter-section input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Primary action button within filter area */
.filter-section button,
.filter-btn {
  padding: 6px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.filter-section button:hover,
.filter-btn:hover {
  background: #764ba2;
}

/* Pill-style toggle filter buttons */
.filter-btn.pill {
  border-radius: 20px;
  font-size: 0.85em;
}

.filter-btn.active {
  font-weight: 700;
}

/* Quick date-range buttons */
.quick-range-btn {
  border-radius: 20px;
  font-size: 0.82em;
  padding: 4px 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.quick-range-btn:hover {
  transform: translateY(-1px);
}

/* Summary info box above tables */
.summary-box {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

/* ============================================================================
   28b. COLLAPSIBLE FILTER CARD (shared)
   Used by: get_coupons_data, summary_report
   ============================================================================ */
.cpn-filter-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.cpn-filter-toggle {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  font-size: 0.95rem;
  font-weight: 600;
  color: #374151;
}
.cpn-filter-toggle:hover {
  background: #f9fafb;
}
.cpn-filter-toggle .cpn-toggle-icon {
  transition: transform 0.25s;
  font-size: 1.1rem;
}
.cpn-filter-toggle[aria-expanded="true"] .cpn-toggle-icon {
  transform: rotate(180deg);
}
.cpn-filter-body {
  padding: 0 20px 20px;
}
.cpn-filter-form {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cpn-filter-form .form-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6b7280;
  margin-bottom: 6px;
}
.cpn-filter-form .form-control {
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  padding: 10px 14px;
  font-size: 0.95rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.cpn-filter-form .form-control:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}
.cpn-filter-form .cpn-filter-btn {
  margin-top: auto;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cpn-filter-form .cpn-filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

/* ============================================================================
   29. PAGINATION
   Used by: cancellation_requests_store, view_requisitions,
            approve_requisitions, complete_requisitions
   ============================================================================ */

/* Row of page links */
.pagination {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #667eea;
}

.pagination a:hover {
  background: #f0f0f0;
}

/* Currently active page indicator */
.pagination span.current {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

/* Vue-driven pagination wrapper (cancellation_requests_mess) */
.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.pagination-info {
  color: #6c757d;
  font-size: 0.9em;
}

.pagination-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Individual page number buttons */
.page-btn {
  padding: 6px 12px;
  border: 1px solid #dee2e6;
  background: white;
  color: #495057;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.page-btn:hover:not(:disabled) {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

/* Per-page size selector */
.page-size-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-size-selector select {
  padding: 4px 10px;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  cursor: pointer;
}

/* ============================================================================
   30. PAGE LAYOUT CONTAINERS
   Used by: view_requisitions, approve_requisitions, complete_requisitions,
            raise_requisition, requisition_report, manage_user_requests
   ============================================================================ */

/* Centred page wrapper with card styling */
.list-container {
  max-width: 1200px;
  margin: 30px auto;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Standard page heading */
.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 30px;
}

/* Sub-line under page heading */
.page-subtitle {
  color: #666;
  margin-bottom: 30px;
}

/* Horizontal scrollable table wrapper */
.table-wrapper {
  overflow-x: auto;
}

/* ============================================================================
   31. DATA TABLE (Modern � requisition pages)
   Used by: view_requisitions, approve_requisitions, complete_requisitions,
            manage_user_requests
   ============================================================================ */

/* Basic table reset within list containers */
.list-container table,
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

.list-container table thead,
.table-wrapper table thead {
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

.list-container table th,
.table-wrapper table th {
  padding: 15px;
  text-align: left;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.list-container table td,
.table-wrapper table td {
  padding: 12px 15px;
  border-bottom: 1px solid #dee2e6;
}

.list-container table tr:hover,
.table-wrapper table tr:hover {
  background: #f8f9fa;
}

/* ============================================================================
   32. VIEW & ACTION BUTTONS
   Used by: view_requisitions, approve_requisitions, complete_requisitions,
            requisition_detail
   ============================================================================ */

/* Simple underline-on-hover link */
.view-btn {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
}

.view-btn:hover {
  text-decoration: underline;
}

/* Generic action button with colour variants */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.action-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.action-btn.secondary {
  background: #f0f0f0;
  color: #333;
}

.action-btn.secondary:hover {
  background: #e0e0e0;
}

.action-btn.danger {
  background: #dc3545;
  color: white;
}

.action-btn.danger:hover {
  background: #c82333;
  transform: translateY(-2px);
}

.action-btn.approve {
  background: #d4edda;
  color: #155724;
}

.action-btn.approve:hover {
  background: #c3e6cb;
}

.action-btn.reject {
  background: #f8d7da;
  color: #721c24;
}

.action-btn.reject:hover {
  background: #f5c6cb;
}

/* ============================================================================
   33. EMPTY STATE
   Used by: view_requisitions, approve_requisitions, complete_requisitions,
            manage_user_requests
   ============================================================================ */

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 15px;
}

/* ============================================================================
   34. CANCEL CARDS
   Used by: cancellation_requests_store.html, cancellation_requests_mess.html
   ============================================================================ */

.cancel-card {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.cancel-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Left border colour indicates status */
.cancel-card.pending {
  border-left: 4px solid #fd7e14;
}
.cancel-card.approved {
  border-left: 4px solid #198754;
}
.cancel-card.rejected {
  border-left: 4px solid #dc3545;
}

/* ============================================================================
   35. SETTINGS CARDS
   Used by: manage_coupon_settings.html, manage_general_settings.html
   ============================================================================ */

/* Card container for each setting group */
.settings-card {
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s;
}

.settings-card:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

/* Section heading within settings card */
.settings-card .card-title {
  font-size: 1.1rem;
  font-weight: 700;
  border-bottom: 2px solid #dee2e6;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

/* Save button minimum width so it doesn't look too narrow */
.save-btn {
  min-width: 110px;
}

/* Monospace identifier chip (coupon settings) */
.identifier-badge {
  font-family: monospace;
  font-size: 0.85em;
  background: #f1f3f5;
  padding: 3px 10px;
  border-radius: 6px;
  color: #495057;
}

/* Read-only field badge (general settings) */
.readonly-badge {
  font-size: 0.7em;
  background: #e9ecef;
  color: #6c757d;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
}

/* Toggle-switch row wrapping a Bootstrap checkbox */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggle-switch .form-check-input {
  width: 3em;
  height: 1.5em;
  cursor: pointer;
}

.toggle-switch .form-check-input:checked {
  background-color: #198754;
  border-color: #198754;
}

.toggle-switch label {
  cursor: pointer;
  font-weight: 500;
}

/* ============================================================================
   36. MODAL DIALOG (custom lightweight modal)
   Used by: approve_requisitions, complete_requisitions, requisition_detail
   ============================================================================ */

/* Full-screen overlay */
.modal-custom {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-custom.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Centred dialog box */
.modal-custom .modal-content {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-custom .modal-header-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #333;
}

/* Form within modal */
.modal-custom .form-group {
  margin-bottom: 20px;
}

.modal-custom .form-group label {
  display: block;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.modal-custom .form-group textarea,
.modal-custom .form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
}

.modal-custom .form-group textarea:focus,
.modal-custom .form-group input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Confirm / cancel button row */
.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 25px;
}

.modal-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-actions button.cancel {
  background: #f0f0f0;
  color: #333;
}

.modal-actions button.cancel:hover {
  background: #e0e0e0;
}

.modal-actions button.confirm {
  background: #667eea;
  color: white;
}

.modal-actions button.confirm:hover {
  background: #764ba2;
  transform: translateY(-2px);
}

/* Required field asterisk */
.required-mark {
  color: #dc3545;
}

/* ============================================================================
   37. BACK LINK
   Used by: raise_requisition.html, requisition_detail.html
   ============================================================================ */

.back-link {
  display: inline-block;
  margin-bottom: 20px;
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
}

.back-link:hover {
  text-decoration: underline;
}

/* ============================================================================
   38. SUBMIT BUTTON (gradient primary)
   Used by: raise_requisition.html (also mirrors .btn-primary in auth pages)
   ============================================================================ */

.submit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ============================================================================
   39. ENHANCED "NO DATA" STATE
   Used by: summary_report.html, get_coupons_data.html
   ============================================================================ */

/* Override the legacy .no_data_div from legacy section above */
.no_data_div.enhanced {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 1.2rem;
}

.no_data_div.enhanced i {
  font-size: 4rem;
  display: block;
  margin-bottom: 20px;
  opacity: 0.5;
}

/* ============================================================================
   40. VUE CLOAK � hide un-rendered Vue templates
   Used by any page that uses Vue.js (cancellation pages, etc.)
   ============================================================================ */

[v-cloak] {
  display: none !important;
}

/* Export Controls */
.export-controls {
  background: #ffffff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  text-align: left;
}

.search-box-wrapper {
  position: relative;
  flex: 1;
  min-width: 300px;
}

.search-box {
  width: 100%;
  padding: 5px 40px;
  border: 1px solid #929393;
  border-radius: 4px;
  transition: all 0.3s;
}

.search-box:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  z-index: 2;
}

.clear-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6c757d;
  opacity: 0;
  transition: opacity 0.3s;
}

.clear-search.show {
  opacity: 1;
}
.clear-search:hover {
  color: #dc3545;
}

.export-btn {
  background: #ffffff;
  border: 1px solid #667eea;
  color: #667eea;
  padding: 5px 8px;
  border-radius: 4px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s;
}

.export-btn:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* ==========================================================================
   41. MERGED FROM MODERN-TABLE-STYLES.CSS
   Classes previously defined only in modern-table-styles.css (now removed).
   For conflicting selectors the rules above (newsty.css) take priority.
   ========================================================================== */

/* Modern Page Container */
.modern-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 25px 20px;
}

/* Modern Card */
.modern-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.modern-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* Card Title (inside modern cards) */
.card-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-title i {
  color: #667eea;
  font-size: 1.5rem;
}

/* Filter Title */
.filter-title {
  font-size: 1rem;
  font-weight: 600;
  color: #414141;
  text-transform: uppercase;
  padding: 0 10px;
}

/* Form group */
.form-group {
  margin-bottom: 20px;
}

/* Form label */
.form-label {
  font-weight: 600;
  color: #555;
  margin-bottom: 8px;
  display: block;
  font-size: 0.95rem;
}

/* Primary button gradient (applied globally to override Bootstrap default) */
.great-submit-btn {
  padding: 10px 20px;
  font-size: 1.3rem;
  color: #ffffff;
  background-color: #1e8882;
  outline: none;
  border: 0px double;
  cursor: pointer;
  text-transform: uppercase;
}
.great-submit-btn:hover {
  background-color: #0c6585;
  color: #ffffff;
  border: 4px double;
  transform: translateY(-2px);
  box-shadow: 1px 1px 4px #888888;
}
.btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  font-weight: 600;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.btn-primary:hover:not(:disabled),
.btn-primary:focus:not(:disabled) {
  background: linear-gradient(135deg, #5568d9 0%, #653d91 100%);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary button gradient */
.btn-secondary {
  background: linear-gradient(135deg, #bbc1dd 0%, #e3dbdb 100%);
  border-color: transparent;
  color: #222;
  font-weight: 600;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background: linear-gradient(135deg, #a8afd0 0%, #d0c8c8 100%);
  border-color: transparent;
  color: #111 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Important button gradient */
.btn-important {
  background: linear-gradient(135deg, #ff7e5f 0%, #801f95 100%);
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.btn-important:hover,
.btn-important:focus {
  background: linear-gradient(135deg, #801f95 0%, #ff7e5f 100%);
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 126, 95, 0.4);
}

/* Vue Data Table */
.vue-data-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}
.vue-data-table thead th {
  background: #495057;
  color: white;
  font-weight: 600;
  padding: 15px 12px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 10;
}
.vue-data-table thead th:hover {
  background: #343a40;
}
.vue-data-table thead th .sort-icon {
  margin-left: 6px;
  font-size: 0.9em;
  opacity: 0.7;
}
.vue-data-table thead th.sorted .sort-icon {
  opacity: 1;
}
.vue-data-table tbody td {
  padding: 12px;
  border-bottom: 1px solid #e9ecef;
}
.vue-data-table tbody tr:hover {
  background-color: #f8f9fa;
}
.vue-data-table tfoot th {
  background: #f8f9fa;
  font-weight: 700;
  padding: 15px 12px;
  border-top: 3px solid #667eea;
  color: #333;
}

/* Coloured badge variants (separate from status-badge above) */
.badge-success {
  background: #d4edda;
  color: #155724;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.85rem;
}
.badge-warning {
  background: #fff3cd;
  color: #856404;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.85rem;
}
.badge-danger {
  background: #f8d7da;
  color: #721c24;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.85rem;
}
.badge-info {
  background: #d1ecf1;
  color: #0c5460;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Statistics Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}
.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #667eea;
  transition: all 0.3s;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.stat-label {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #333;
}

/* Page size selector (table pagination) */
.page-size-select {
  padding: 8px 12px;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  font-weight: 500;
}

/* Responsive for modern styles */
@media (max-width: 768px) {
  .modern-container {
    padding: 10px;
  }
  .modern-card {
    padding: 15px;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .vue-data-table {
    font-size: 0.85rem;
  }
  .vue-data-table thead th,
  .vue-data-table tbody td {
    padding: 8px 6px;
  }
}
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}