body {
      background-color: #fff5f8;
      color: #5a4a4a;
      font-family: 'Poppins', sans-serif;
    }
    /* Admin navbar: cleaner, professional appearance */
    .navbar {
      background-color: #ffffff; /* crisp white */
      border-bottom: 1px solid rgba(16,24,40,0.06);
      padding-top: .6rem;
      padding-bottom: .6rem;
    }
    .navbar-brand {
      font-weight: 700;
      color: #3a2b33 !important;
      letter-spacing: .2px;
    }
    .navbar .nav-link {
      color: #5b4952 !important;
      padding: .45rem .6rem;
      font-weight: 600;
      opacity: .92;
    }
    .navbar .nav-link:hover { color: #d63384 !important; opacity: 1; }
    .navbar .nav-link.active {
      color: #ff6f9b !important;
      background: rgba(255,111,155,0.06);
      border-radius: 8px;
    }
    /* compact navbar brand for small screens */
    @media (max-width: 576px) {
      .navbar-brand { font-size: 0.98rem; }
    }
    .section-title {
      color: #d63384;
      font-weight: bold;
      text-align: center;
    }
    .section-subtitle {
      color: #5a3b4e;
      text-align: center;
    }
    .card {
      border: none;
      border-radius: 12px;
      background: linear-gradient(180deg,#fffafc,#fff1f6);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 22px rgba(0,0,0,0.08);
    }
    .flower-img {
      height: 250px;
      object-fit: cover;
      border-radius: 15px 15px 0 0;
    }
    .btn-pink {
      background-color: #ff6f9b;
      color: white;
      border: none;
      box-shadow: 0 2px 6px rgba(255,111,155,0.18);
    }
    .btn-pink:hover {
      background-color: #ff5588;
    }
    .text-pink { color: #ff6f9b !important; }
    .btn-outline-pink {
      color: #ff6f9b;
      border: 1px solid #ff6f9b;
      background: transparent;
      transition: all 0.3s ease;
    }
    .btn-outline-pink:hover {
      background: #ff6f9b;
      color: white;
      border-color: #ff6f9b;
    }
    footer {
      background-color: #ffcce1;
      color: #5a3b4e;
      padding: 30px 0;
      text-align: center;
    }
    
    /* Category Cards */
    .category-card {
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 12px;
      overflow: hidden;
      height: 100%;
    }
    
    .category-card-inner {
      position: relative;
      height: 100%;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
    }
    
    .category-card:hover .category-card-inner {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(255, 111, 155, 0.2);
    }
    
    .category-card.active .category-card-inner {
      border: 2px solid #ff6f9b;
      box-shadow: 0 8px 20px rgba(255, 111, 155, 0.3);
    }
    
    .category-image {
      position: relative;
      width: 100%;
      height: 220px; /* match product card image height */
      overflow: hidden;
    }
    
    .category-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    
    .category-card:hover .category-image img {
      transform: scale(1.1);
    }
    
    .category-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255, 111, 155, 0.7), rgba(255, 81, 130, 0.7));
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .category-card:hover .category-overlay {
      opacity: 1;
    }
    
    .category-overlay i {
      color: white;
      font-size: 1.5rem;
    }
    
    .category-info {
      padding: 1.25rem; /* match card body spacing */
      text-align: center;
      background: white;
    }
    
    .category-name {
      font-size: 0.95rem;
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
      line-height: 1.2;
    }
    
    .category-count {
      font-size: 0.75rem;
      color: #999;
      margin: 0;
    }
    
    .category-card.active .category-name {
      color: #ff6f9b;
    }
    
    @media (max-width: 576px) {
      .category-image {
        height: 100px;
      }
      
      .category-name {
        font-size: 0.85rem;
      }
      
      .category-count {
        font-size: 0.7rem;
      }
      
      /* Match product card image height to category cards on mobile */
      .product-card .card-img-top,
      .product-card .position-relative.overflow-hidden {
        height: 100px !important;
      }
      
      .product-card .card-title {
        font-size: 0.9rem;
      }
      
      .product-card .btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.75rem;
      }
    }
    
    .modal-content {
      border-radius: 12px;
      border: none;
    }

.modal-header {
  border-radius: 12px 12px 0 0;
}

.modal-header.gradient-pink {
  background: linear-gradient(135deg,#ff99bb 0%,#ff6f9b 100%);
  color: #fff;
}

.modal-header.gradient-pink .btn-close {
  filter: brightness(0) invert(1);
}

.admin-page .form-control:focus,
.admin-page .form-select:focus {
  border-color: #ff99bb;
  box-shadow: 0 0 0 0.2rem rgba(255,111,155,0.15);
}

.admin-page .table {
  border-radius: 8px;
  overflow: hidden;
}

.admin-page .table thead {
  background: linear-gradient(135deg,#fff6f9 0%,#ffe9f0 100%);
}

.admin-page .btn,
.admin-page .badge {
  transition: all 0.3s ease;
}

.status-badge i {
  margin-right: 4px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-page .toast {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  .admin-page .metric-card .fs-5 {
    font-size: 1.1rem !important;
  }
}
    /* Admin header */
    .header { position: sticky; top: 0; z-index: 1030; }
    .admin-logo { border-radius: 8px; object-fit:cover }
    @media (max-width: 576px) {
      .header nav { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    }
    /* header brand shrink and ellipsis to keep hamburger inline */
    .header .brand { min-width: 0; }
    .header .brand h1, .header .brand .text-muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .header nav { gap: 0.5rem; }
    /* Admin products responsive tweaks */
    .admin-controls > * { flex: 0 0 auto; }
    .search-input { min-width: 220px; }
    /* reduce search width on small screens and make inputs full width */
    @media (max-width: 768px) {
      .search-input { min-width: 120px; width: 100%; }
      .admin-controls { width: 100%; justify-content: flex-end; }
      .admin-controls .btn { flex: 1 1 auto; }
      .admin-controls .btn + .btn { margin-left: 0.5rem; }
      .table td, .table th { font-size: 0.9rem; }
      .admin-logo { width: 36px; height:36px; }
      #imagePreview { max-width: 100%; height: auto; }
    }
    /* Make the header collapse expand full-width when opened on small screens without forcing layout when closed */
    @media (max-width: 576px) {
      #adminControlsCollapse.show { display: block !important; width: 100%; margin-top: 0.5rem; }
      header .admin-controls { justify-content: flex-end; }
      header .d-flex.align-items-center > button.d-sm-none { align-self: center; }
    }
    /* Toolbar styling for products page */
    .toolbar.card { border-radius: 12px; padding: 0; }
    .toolbar .card-body { padding: 0.8rem 1rem; }
    .toolbar .search-input { max-width: 420px; }
    .table img { border-radius: 8px; object-fit: cover; width: 96px; height: 64px; }
    .table th, .table td { vertical-align: middle; }
    .edit-btn, .delete-btn { min-width: 36px; }
    .btn i.bi { vertical-align: -.125em; }
  .icon-svg { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
    @media (max-width: 480px) {
      .search-input { min-width: 0; }
      .admin-controls { flex-direction: column; gap: 0.5rem; }
      .admin-controls .btn { width: 100%; }
    }
    .table th, .table td {
      text-align: center;
    }
    /* Keep action buttons inline on small screens instead of stretching/full-width */
    .table td > .btn {
      display: inline-flex;
      width: auto;
      white-space: nowrap;
      vertical-align: middle;
      margin-bottom: 0;
    }
    .table td .btn + .btn {
      margin-left: .4rem;
    }
    @media (max-width: 480px) {
      /* ensure action buttons remain compact and side-by-side on narrow viewports */
      .table td > .btn { display: inline-flex; width: auto; }
      .table td .btn + .btn { margin-left: .35rem; }
    }
    /* Status badge style: refined professional look */
    :root{
      --badge-bg: #0d6efd; /* primary */
      --badge-bg-2: #0b5ed7;
      --badge-text: #ffffff;
      --badge-shadow: 0 6px 20px rgba(13,110,253,0.14);
      --bubble-bg: #d6332a; /* red */
      --bubble-color: #fff;
      --bubble-size: 20px;
    }
    .status-badge {
      position: relative;
      /* Do not override Bootstrap color/background; let btn-* control appearance */
      border-radius: 999px !important;
      padding: .32rem .75rem !important;
      /* subtle generic shadow to lift the pill without changing color semantics */
      box-shadow: 0 4px 12px rgba(15,23,42,0.06);
      display: inline-flex !important;
      align-items: center;
      gap: .5rem;
      font-weight: 600;
      font-size: .9rem;
      transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
      white-space: nowrap;
      margin-right: 10px;
    }
    /* Per-status subtle accents (use colored left border to maintain consistent pill shape)
       Keep pills consistent but hint the status color for quick scanning */
    .status-badge[data-status="Pending"] { box-shadow: 0 6px 18px rgba(255,193,7,0.12); }
    .status-badge[data-status="Processing"] { box-shadow: 0 6px 18px rgba(13,110,253,0.12); }
    .status-badge[data-status="To Receive"] { box-shadow: 0 6px 18px rgba(25,135,84,0.12); }

    .status-badge[aria-pressed="true"] {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(15,23,42,0.12);
    }

    .status-badge:focus { outline: 3px solid rgba(13,110,253,0.14); outline-offset: 2px; }

    .status-badge .status-count {
      position: absolute;
      top: 4px;
      right: 3px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transform: translate(50%,-50%);
      background: var(--bubble-bg) !important; /* red bubble */
      color: var(--bubble-color) !important;
      border-radius: 999px !important;
      font-size: .68rem;
      font-weight: 700;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }

    /* Floating Chat Button - shared styles so pages without inline CSS render correctly */
    .floating-chat-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ff99bb 0%, #ff6f9b 100%);
      color: white;
      border: none;
      box-shadow: 0 10px 28px rgba(255, 111, 155, 0.4);
      font-size: 24px;
      cursor: pointer;
      z-index: 9998;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .floating-chat-btn:hover {
      transform: scale(1.06);
      box-shadow: 0 12px 32px rgba(255, 111, 155, 0.5);
      color: white;
    }

    .floating-chat-btn:active {
      transform: scale(0.95);
    }
    
    /* Floating Dashboard was converted to inline CTA under the hero; floating styles removed */
  /* Mobile bell pill and badge styling: keep the count visually attached to the bell */
  .notif-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    border-radius: 12px;
    background: #0d6efd; /* match Bootstrap primary */
    color: #fff;
    border: none;
    /* slightly stronger shadow to lift the pill like the example */
    box-shadow: 0 8px 20px rgba(13,110,253,0.16);
    -webkit-font-smoothing:antialiased;
    font-weight: 600;
  }

  .notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bubble-bg) !important;
    color: var(--bubble-color) !important;
    border-radius: 999px !important;
    font-size: .68rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    border: none; /* compact single red circle without white ring */
    pointer-events: none; /* don't intercept button clicks */
  }

  /* Make sure the bell icon inside the pill is white */
  .notif-pill svg { color: #fff; fill: currentColor; }

  @media (max-width: 480px) {
    .notif-badge { top: -6px; right: -6px; min-width:20px; height:20px; font-size:.65rem; }
    .notif-pill { padding: .36rem .72rem; }
  }

    /* Make badges responsive: allow wrapping and label wrapping on small widths */
    #statusBadges { flex-wrap: wrap; align-items: center; }

    /* Mobile status dropdown styling */
    #mobileStatusDropdown {
      position: relative;
    }

    .mobile-status-filter.active {
      background-color: rgba(255, 111, 155, 0.1);
      font-weight: 600;
    }

    @media (max-width: 768px) {
      .status-badge { font-size: .8rem; padding: .28rem .6rem; white-space: normal; }
      .status-badge .status-count { --bubble-size: 18px; font-size: .6rem; }
      /* make the search input shrink to allow dropdown/bell to sit next to it */
      .d-flex > #ordersSearch { flex: 1 1 160px; min-width: 120px; }
    }
    /* Right-aligned search above orders table: 50% width on desktop, full-width on small screens */
    .search-input-right {
      width: 40%;
      max-width: 720px;
    }
    @media (max-width: 768px) {
      .search-input-right { width: 100%; }
    }
    /* Small-screen icon replacement for action buttons */
    .btn-icon { display: none; vertical-align: middle; }
    .btn-label { display: inline; }
    @media (max-width: 576px) {
      .btn-label { display: none; }
      .btn-icon { display: inline-block; width: 16px; height: 16px; }
      /* slightly tighten button padding on very small screens */
      .table td > .btn { padding: .28rem .5rem; font-size: .85rem; }
    }
    .rows-per-page .form-select { min-width: 72px; }
    a {
      color: #d63384;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
      /* Reviews thumbnail shared styles (used on index and reviews pages) */
      .review-card-row { display: flex; align-items: stretch; }
      .review-thumb-wrap { flex: 0 0 70px; width: 70px; height: 70px; overflow: hidden; border-radius: 8px; margin-right: 12px; background: #fff; }
      .review-thumb-wrap img.review-thumb { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
      /* ensure card body flex rows align at the top */
      .card-body.d-flex { align-items: flex-start; }
      @media (max-width: 767px) {
        .review-card-row { flex-direction: column; }
        /* on narrow screens ensure the thumbnail keeps reasonable spacing from the text
           (the original `margin-right: 1` was missing units and had no effect) */
        .review-thumb-wrap { width: 70px; height: 70px; margin-right: 12px; margin-bottom: 12px; align-self: center; }
      }
    
      /* Admin page refinements */
      .admin-page .card-title { font-size: 1.1rem; font-weight: 700; }
      .admin-page .small.text-muted { color: #6c6c6c; }
      /* compact table on small screens: reduce padding and allow action buttons to wrap */
      @media (max-width: 576px) {
        .table td, .table th { padding: .45rem .5rem; font-size: .9rem; }
        .table-responsive { overflow-x: auto; }
        .table td > .d-flex { gap: .35rem; }
      }
      /* metric cards */
      .metric-card { border-radius: 10px; padding: 12px; background: linear-gradient(180deg,#fff,#fffafc); }
      .metric-card .h6 { color: #6c6c6c; }
      /* Admin table refinements: professional, compact, readable */
      .admin-page .admin-table {
        border-collapse: separate;
        border-spacing: 0;
        background: transparent;
        width: 100%;
        table-layout: auto;
      }
  .admin-page .table-responsive {
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Column width optimization for better layout */
  .admin-page .admin-table th:nth-child(1),
  .admin-page .admin-table td:nth-child(1) {
    width: 120px;
    min-width: 100px;
  }

  .admin-page .admin-table th:nth-child(2),
  .admin-page .admin-table td:nth-child(2) {
    width: 180px;
    min-width: 150px;
  }

  .admin-page .admin-table th:nth-child(3),
  .admin-page .admin-table td:nth-child(3) {
    width: 200px;
    min-width: 180px;
  }

  .admin-page .admin-table th:nth-child(4),
  .admin-page .admin-table td:nth-child(4) {
    width: auto;
    min-width: 150px;
  }

  .admin-page .admin-table th.actions,
  .admin-page .admin-table td.actions {
    width: 120px;
    min-width: 100px;
  }
      .admin-page .admin-table thead th {
        background: linear-gradient(180deg, #ffffff, #fff6f9);
        border-bottom: 1px solid rgba(16,24,40,0.06);
        color: #5b4952;
        font-weight: 700;
        font-size: .9rem;
        text-transform: none;
      }
      .admin-page .admin-table tbody tr {
        background: #fffafc;
        transition: background .12s ease, transform .06s ease;
      }
      .admin-page .admin-table tbody tr:nth-of-type(odd) { background: #fff6f8; }
      .admin-page .admin-table tbody tr:hover {
        background: #fff1f6;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(15,23,42,0.04);
      }
      .admin-page .admin-table td, .admin-page .admin-table th {
        padding: .6rem .75rem;
        vertical-align: middle;
        color: #4f3f45;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      /* Prevent email and Facebook link from breaking layout */
      .admin-page .admin-table td:nth-child(3),
      .admin-page .admin-table td:nth-child(4) {
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

/* Admin sidebar layout shared across dashboard and section pages */
body.admin-page {
  overflow-x: hidden;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 260px;
  background: linear-gradient(180deg,#fff 0%,#fff5f8 100%);
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  z-index: 1040;
  transition: all .3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sidebar.collapsed {
  transform: translateX(-260px);
}

.sidebar-header {
  padding: 1.5rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  background: linear-gradient(135deg,#ff99bb 0%,#ff6f9b 100%);
  flex-shrink: 0;
}

.sidebar-brand {
  color: #fff !important;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  white-space: nowrap;
}

.sidebar-brand i {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.sidebar-brand span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav {
  padding: 1.5rem 0;
  list-style: none;
  margin: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* Hide native scrollbar for the sidebar navigation while keeping scroll behavior */
.sidebar-nav {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.sidebar-nav::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* Chrome/Safari */
}

.sidebar-nav-item {
  margin: .25rem .75rem;
}

.sidebar-section-label {
  color: #9e8c93;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1rem 1rem 0.5rem 1rem;
  margin: 0.5rem 0.75rem 0 0.75rem;
  border-top: 1px solid rgba(255, 111, 155, 0.1);
}

.sidebar-section-label:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  color: #5b4952;
  text-decoration: none;
  transition: all .3s ease;
  font-weight: 500;
  border-radius: 8px;
  border-left: 3px solid transparent;
}

.sidebar-nav-link i {
  font-size: 1.1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-nav-link span {
  flex: 1;
}

.sidebar-nav-link .badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.sidebar-nav-link:hover {
  background: rgba(255,111,155,0.1);
  color: #ff6f9b;
  border-left-color: transparent;
  transform: translateX(2px);
}

.sidebar-nav-link.active {
  background: rgba(255,111,155,0.15);
  color: #ff6f9b;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255,111,155,0.15);
}

.sidebar-nav-item .btn-pink {
  margin-top: 1rem;
  padding: .875rem 1rem;
}

.main-content {
  margin-left: 260px;
  transition: margin-left .3s ease;
  min-height: 100vh;
  background: #fff5f8;
}

.main-content.expanded {
  margin-left: 0;
}

.sidebar-toggle {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 265px;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff6f9b;
  border: none;
  color: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(255,111,155,0.3);
  transition: all .3s ease;
}

.sidebar-toggle:hover {
  background: #ff5588;
  transform: translateY(-50%) scale(1.05);
}

.sidebar-toggle.sidebar-open {
  left: 265px;
}

.sidebar-toggle.collapsed {
  left: 0;
}

.sidebar-toggle i {
  font-size: 1.2rem;
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1030;
  display: none;
  opacity: 0;
  transition: opacity .3s ease;
}

.sidebar-overlay.show {
  display: block;
  opacity: 1;
}

@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .sidebar.collapsed {
    transform: translateX(-100%);
  }

  .main-content {
    margin-left: 0;
  }

  .main-content.expanded {
    margin-left: 0;
  }

  .sidebar-toggle {
    left: 1rem;
    top: 1rem;
    transform: none;
    z-index: 1060;
  }

  .sidebar-toggle:hover {
    transform: scale(1.05);
  }

  .sidebar-toggle.sidebar-open {
    left: 225px;
  }
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,111,155,0.3);
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255,111,155,0.5);
}

      /* On hover, show full text */
      .admin-page .admin-table td:nth-child(3):hover,
      .admin-page .admin-table td:nth-child(4):hover {
        white-space: normal;
        overflow: visible;
      }
      /* Actions column: keep compact and right-aligned */
      .admin-page .admin-table td.actions, .admin-page .admin-table th.actions { text-align: center; white-space: nowrap; }
      /* Keep table layout on small screens but allow horizontal scrolling
         We prefer a scrollable table (consistent layout) rather than converting to stacked cards. */
      @media (max-width: 768px) {
        .admin-page .admin-table thead { display: table-header-group; }
        .admin-page .admin-table tbody tr { display: table-row; }
        .admin-page .admin-table tbody td { display: table-cell; padding: .45rem .6rem; border-bottom: none; }
        .admin-page .admin-table th, .admin-page .admin-table td { white-space: nowrap; }
        /* Slightly reduce padding for compactness on small screens */
        .admin-page .admin-table td, .admin-page .admin-table th { padding: .45rem .5rem; font-size: .92rem; }
        /* Ensure the responsive wrapper allows scrolling and shows a subtle scrollbar on desktops */
        .admin-page .table-responsive { overflow-x: auto; }
      }

      /* Reports page specific toolbar and metric styles */
  .report-header h3 { font-size: 1.25rem; font-weight: 700; color: #222; }
  .reports-toolbar { gap: .5rem; }
  .reports-toolbar .form-control, .reports-toolbar .form-select { min-width: 160px; }
  /* KPI cards */
  .kpi-card { min-width: 140px; padding: 10px 14px; border-radius: 8px; background: linear-gradient(180deg,#fff,#fbfbfc); border: 1px solid rgba(16,24,40,0.04); }
  .report-header .kpi-card { flex: 1 1 140px; }
  .kpi-label { color: #6c6c6c; font-weight: 600; }
  .kpi-value { color: #ff6f9b; }
  /* Report card: clean white surface with subtle border for a corporate look */
  .report-card { background: #ffffff; border: 1px solid rgba(16,24,40,0.06); box-shadow: 0 6px 20px rgba(15,23,42,0.04); }
  /* Primary export button: conservative business blue */
  #exportBtnPrimary { background: linear-gradient(180deg,#0d6efd,#0b5ed7); color: #fff; border: none; }
  #exportBtnPrimary:hover { filter: brightness(.96); }
  .reports-toolbar .btn-sm { min-height: 34px; }
  .fa-download { font-size: .9rem; }
  /* Table header refinement */
  .admin-page .admin-table thead th { background: #ffffff; border-bottom: 1px solid rgba(16,24,40,0.06); }
  .admin-page .admin-table tbody td { color: #333; }
  .admin-page .admin-table tbody tr:hover { transform: none; box-shadow: 0 6px 18px rgba(15,23,42,0.03); background: #fffafc; }
  /* Pagination tweaks */
  .pagination .page-link { color: #ff6f9b; }
  .pagination .page-item.active .page-link { background: #ff6f9b; border-color: #ff6f9b; }
      @media (max-width: 768px) {
        .reports-toolbar { flex-direction: column; align-items: stretch; }
        .report-header .d-flex { width: 100%; justify-content: space-between; }
        .report-header .kpi-card { width: 100%; }
        .reports-toolbar .d-flex { width: 100%; justify-content: space-between; }
        .reports-toolbar .form-control { width: 100%; }
      }

    /* Order success specific tweaks: make action buttons full width on small screens */
    @media (max-width: 576px) {
      .report-card .btn { width: 100%; }
      .report-card .btn + .btn { margin-top: .5rem; }
    }
    /* Ensure the Order Success action column does not force horizontal overflow
       and becomes full-width on small screens. Keep a comfortable min-width on
       medium+ screens for nicer layout. */
    .order-actions { min-width: 200px; }
    @media (max-width: 768px) {
      /* allow action column to shrink and wrap on narrow tablets */
      .order-actions { min-width: 160px; }
    }
    @media (max-width: 576px) {
      .order-actions { min-width: 0 !important; width: 100%; }
      /* ensure action buttons stretch full width and spacing is clear */
      .order-actions .btn { width: 100%; }
      .order-actions .btn + .btn { margin-top: .5rem; }
      .report-card .d-flex.flex-column.flex-md-row { gap: 1rem; }
    }

/* Order Summary / Total row styles: keep label on the left and amount on the right
   without wrapping. Make the divider subtle and consistent with card styling. */
.report-card .summary-row { border-top: 1px solid rgba(16,24,40,0.06); padding-top: .75rem; }
/* Make the Total row a true two-column flex: label (left) and amount (right).
  Label is allowed to shrink and truncate, amount stays fixed and right-aligned. */
.report-card .summary-inner { display: flex !important; justify-content: space-between; align-items: center; gap: .5rem; width: 100%; }
.report-card .summary-label { color: #6c6c6c; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.report-card .summary-amount { white-space: nowrap; flex: 0 0 auto; margin-left: 12px; text-align: right; margin-left: auto; }

/* Ensure the summary-row spans the full content width (fixes short divider issue) */
.report-card .summary-row { display: block; width: 100%; box-sizing: border-box; }

@media (max-width: 420px) {
  /* On very narrow devices keep the same two-column behaviour but allow the label
    to take most of the space and force the amount to remain visible on the right. */
  .report-card .summary-label { font-size: 0.95rem; }
  .report-card .summary-amount { font-size: 1.05rem; text-align: right;}
}

/* Order form item row layout: keep fields aligned and prevent selects from stretching
   to full width inside the row. Provide sensible defaults and responsive behavior. */
.order-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.order-item .item-flower {
  flex: 1 1 0%; /* allow the flower select to take remaining space */
  min-width: 0;
}
.order-item .item-color {
  flex: 0 0 160px;
  min-width: 100px;
}
.order-item .item-quantity {
  flex: 0 0 90px;
  min-width: 60px;
}
.order-item .remove-item {
  flex: 0 0 38px;
}
/* Prevent Bootstrap's .form-select/.form-control from forcing 100% width inside order-item */
.order-item .form-select,
.order-item .form-control {
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure the controls inside an item stay on a single line where possible */
.order-item .item-controls {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  align-items: center;
  width: 100%;
}
.order-item .item-flower { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 576px) {
  /* On very small screens, keep the flower select full-width and keep the
     color + quantity + remove button on a single row when possible */
  .order-item { align-items: center; }
  .order-item .item-controls { width: 100%; }
  .order-item .item-flower { flex: 1 1 60%; min-width: 0; }
  .order-item .item-color { flex: 0 0 28%; }
  .order-item .item-quantity { flex: 0 0 70px; }
  .order-item .remove-item { flex: 0 0 38px; }
}

/* Reviews thumbnails: ensure cards rendered by JS (card.review-card .card-body.d-flex)
   have a right gap when laid out as a row, and stack/center on narrow screens. */
.card.review-card .card-body.d-flex .review-thumb-wrap {
  margin-right: 12px;
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  /* Keep the thumbnail before the details on narrow screens by allowing the
     flex row to wrap instead of forcing column. Left-align the thumb and give
     the content room to shrink/grow. */
  .card.review-card .card-body.d-flex {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .card.review-card .card-body.d-flex .review-thumb-wrap {
    width: 72px !important;
    height: 72px !important;
    margin: 0 12px 10px 0; /* keep it to the left of details */
    align-self: flex-start;
  }
  .card.review-card .card-body.d-flex .flex-grow-1 {
    flex: 1 1 0%;
    min-width: 0; /* allow overflow handling and proper text wrapping */
  }
}

/* Edit Modal Mobile Responsiveness */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 0.5rem;
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  /* Make tables stack better on mobile */
  .table-responsive table {
    font-size: 0.875rem;
  }
  
  .table-responsive .input-group-sm {
    width: 100px !important;
  }
  
  .table-responsive .input-group-sm .form-control {
    font-size: 0.75rem;
    padding: 0.15rem !important;
  }
  
  .table-responsive .btn-sm {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
  }
  
  .table-responsive td {
    padding: 0.4rem 0.3rem;
  }
  
  .table-responsive th {
    padding: 0.5rem 0.3rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 576px) {
  /* Even smaller adjustments for very small screens */
  .table-responsive .input-group-sm {
    width: 85px !important;
  }
  
  .table-responsive small {
    font-size: 0.7rem;
  }
  
  .table-responsive .fas {
    font-size: 0.7rem;
  }
  
  /* Stack modal footer buttons */
  .modal-footer {
    flex-direction: column;
  }
  
  .modal-footer .btn {
    width: 100%;
    margin: 0.25rem 0 !important;
  }
}
/* Image Preview Tooltip for Customize Order Modal */
.image-preview-tooltip {
  position: fixed;
  z-index: 99999;
  background: white;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  animation: fadeInTooltip 0.2s ease;
  border: 2px solid #ff99bb;
}

@keyframes fadeInTooltip {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.has-preview {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.has-preview:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 111, 155, 0.3);
}
/* Custom Order Accordion Styling */
#customizeOrderAccordion .accordion-item {
  border-radius: 12px !important;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

#customizeOrderAccordion .accordion-button {
  border-radius: 12px !important;
  padding: 1rem 1.25rem;
  font-weight: 600;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 111, 155, 0.1);
}

#customizeOrderAccordion .accordion-button:not(.collapsed) {
  box-shadow: 0 4px 12px rgba(255, 111, 155, 0.2);
}

#customizeOrderAccordion .accordion-button:focus {
  box-shadow: 0 4px 12px rgba(255, 111, 155, 0.3);
  border-color: transparent;
}

#customizeOrderAccordion .accordion-button::after {
  background-size: 1.25rem;
  filter: invert(44%) sepia(49%) saturate(3178%) hue-rotate(314deg) brightness(101%) contrast(101%);
}

#customizeOrderAccordion .accordion-body {
  padding: 1.25rem;
  background: white;
}