body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f0f2f5;
  font-size: px;
}
.dashboard {
  display: flex;
  height: 100vh;
}

/* =========================
   SIDEBAR (MODERN UI)
========================= */
.sidebar {
  width: 180px;
  background: linear-gradient(180deg, #0f172a, #111827);
  color: white;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-shadow: 4px 0 20px rgba(0,0,0,0.25);
}

.sidebar h2 {
  text-align: center;
  padding: 10px 5px;
  font-size: 13px;
  color: #94a3b8;
  border-bottom: 1px solid #1f2937;
}

/* Sidebar Buttons */
.sidebar button {
  all: unset;
  display: block;
  padding: 12px 14px;
  margin: 4px 0;
  border-radius: 10px;
  cursor: pointer;
  color: #cbd5e1;
  font-size: 15px;
  transition: 0.2s;
}

.sidebar button:hover {
  background: rgba(59, 130, 246, 0.15);
  color: white;
  transform: translateX(4px);
}

.sidebar button.active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  font-weight: 600;
  box-shadow: 0 6px 15px rgba(37,99,235,0.35);
}


/* ========== MAIN ========== */
.main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* Sections */
.section { display: none; }
.section.active { display: block; }

/* Cards */
.card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  display: flex;
  gap: 20px;
}

/* Inputs & buttons */
input, button {
  padding: 8px;
  margin: 5px 0;
  font-size: 14px;
}
button.primary {
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button.primary:hover { background: #1d4ed8; }
button.secondary {
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button.secondary:hover { background: #b91c1c; }

/* ========== SERVICES ACCORDION ========== */
.service {
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
.service-header {
  padding: 14px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  background: linear-gradient(90deg, #6366f1, #3b82f6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service-header:hover { opacity: 0.95; }

.service-body {
  max-height: 0;
  overflow: hidden;
  background: white;
  transition: max-height 0.35s ease;
  padding: 0 14px;
}
.service.expanded .service-body {
  max-height: 2000px;
  padding-bottom: 14px;
}

/* Items */
.items-grid {
  display: grid;
  grid-template-columns: 1fr  1fr 1fr;
  flex-direction: column;
  gap: 10px;
  background-color: #f3ffb1;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 10px;
}
.item {
  display: flex;
  
  gap: 10px;
  padding: 10px;
  background: #56abff;
  border-radius: 8px;
  align-items: center;
  border: 1px solid #e5e7eb;
  transition: all 0.25s ease;
  width: 250px ;
  
}
.item:hover {
  background: #14bcff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.item img {
  width: 50px;
  height: 50px;
  object-fit:cover;
  border-radius: 6px;
  border: 1px solid #ccc;
}


.item-actions {
  display: flex;
  flex-direction: row;
  gap: 4px;
}
.item-actions button {
  padding: 4px 8px;
  font-size: 12px;
}

/* POS / Staff / History placeholders */
.placeholder {
  color: #6b7280;
  font-size: 16px;
}


/*   ===========POS ===================*/
/* =========================
   POS SERVICES ACCORDION
========================= */
.pos-service {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  margin-bottom: 12px;
  overflow: hidden;
}

.pos-service-header {
  width: 100%; /* Full width */
  padding: 12px;
  background: linear-gradient(90deg, #6366f1, #3b82f6);
  color: white;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pos-service-header:hover { opacity: 0.95; }

.pos-service-body {
  max-height: 0;
  overflow: hidden;
  background: #f8fafc;
  transition: max-height 0.35s ease;
  padding: 0 12px;
}

.pos-service.expanded .pos-service-body {
  max-height: 2000px;
  padding-bottom: 12px;
}
.stock-off {
  background-color: #f1f1f1;
  color: #888;
  border: 1px solid #ddd;
  cursor: not-allowed;
  opacity: 0.7;
}
/* =========================
   POS ITEMS GRID (4 Columns)
========================= */
.pos-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.pos-item {
  background: rgb(203, 234, 255);
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.25s ease;
}

.pos-item:hover {
  background: #4db8ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.pos-item img {
  width: 85%;
  height: auto;         /* scale height proportionally */
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 6px;
}


.pos-item-info {
  text-align: center;
  font-size: 14px;
}

.pos-item-qty {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pos-item-qty input {
  width: 50px;
  text-align: center;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
}

/* =========================
   POS ACTION BUTTONS (Fixed)
========================= */
.pos-actions {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
}

.pos-actions button {
  padding: 8px 12px;
  font-size: 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  width: 200px;
  height: 70px;
}

.pos-actions .calculate {
  background: #2563eb;
  color: white;
  transition: transform 0.25s ease, background 0.25s ease;
}
.pos-actions .calculate:hover { 
  background: #1d4ed8; 
  
  transform: scale(1.1);
}

.pos-actions .clear {
  background: #ef4444;
  color: white;
  transition: transform 0.25s ease, background 0.25s ease;
  
}
.pos-actions .clear:hover { 
  transform: scale(1.1);
  background: #b91c1c; 
}

/* =========================
   COMPACT SERVICES & ITEMS
========================= */

/* Card slimmer */
.card {
  padding: 14px;
  gap: 12px;
}

/* Service header more compact */
.service-header {
  padding: 10px 12px;
  font-size: 14px;
}

/* Service action buttons smaller */
.service-actions button {
  padding: 4px 8px;
  font-size: 12px;
}

/* Inputs tighter */
.service-body input {
  padding: 6px;
  font-size: 13px;
}

/* Items grid denser */
.items-grid {
  grid-template-columns: repeat(3, 1fr); /* more columns */
  gap: 8px;
  max-height: 220px;
}

/* Item card compact */
.item {
  padding: 6px;
  gap: 6px;
  align-items: center;
  width: 320px;
  
}

/* Smaller image */
.item img {
  width: 90px;
  height: 120px;
}

/* Text tighter */
.item-info {
  font-size: 18px;
  line-height: 1.2;
  
  
}

/* Horizontal buttons instead of vertical */
.item-actions {
  flex-direction: column;
  gap: 4px;
}

/* Smaller buttons */
.item-actions button {
  padding: 3px 6px;
  font-size: 11px;
  border-radius: 4px;
}

/* Remove hover lift (less jumpy) */
.item:hover {
  transform: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* =========================
   ITEM ACTIONS – VERTICAL RIGHT
========================= */

.item {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Push actions to the far right */
.item-info {
  flex: 1;
}

/* Vertical icon buttons */
.item-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
}

/* Icon-style buttons */
.item-actions button {
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  min-width: 26px;
  border-radius: 4px;
}



/* =========================
   POS SERVICE SELECT DROPDOWN
========================= */
#serviceSelect {
  width: 100%;           /* full width of POS main section */
  max-width: 100%;       /* do not exceed container */
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 20px;
  
  border-radius: 6px;
  border: 3px solid #5a5a5a;
  margin-bottom: 12px;   /* space between dropdown and items */
  background: rgb(253, 255, 116);
  appearance: none;      /* remove default arrow styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

#serviceSelect:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}



/* Add this to your stylesheet or inside <style> */



/* Click animation */
.pos-item.clicked {
  animation: clickAnim 0.2s ease;
}

.item {
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.item:active {
  cursor: grabbing;
}

.item.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

.item.drag-over {
  border: 2px dashed #ff9800;
}



/* ---------- STAFF SECTION STYLING ---------- */
#staff .card {
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  background: #fff;
  margin-top: 10px;
}

#staff .card h3 {
  color: #FF7F50;
  font-size: 24px;
  margin-bottom: 15px;
}

#staff .primary {
  background: #FF7F50;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 15px;
  transition: all 0.2s ease;
}

#staff .primary:hover {
  background: #1b63ff;
}

.table-wrapper {
  overflow-x: auto;
}

#staffTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

#staffTable th, #staffTable td {
  padding: 10px;
  text-align: left;
}

#staffTable th {
  background: #5972ff;
  color: #fff;
  border-radius: 6px;
  
}

#staffTable tr:nth-child(even) {
  background: #f9f9f9;
}

#staffTable tr td {
  border-bottom: 1px solid #ddd;
}

#staffTable input, #staffTable select {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  
}

#staffTable button {
  margin-right: 5px;
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}

#staffTable button:hover {
  opacity: 0.85;
}

#staffTable button.edit {
  background: #4CAF50;
  color: #fff;
}

#staffTable button.delete {
  background: #F44336;
  color: #fff;
}

#staffTable button.toggle {
  background: #FFC107;
  color: #fff;
}

/* Style for select dropdowns */
#selectSTAFF {
  width: 200px;           /* Set a fixed width in pixels */
  padding: 6px 10px;      /* Inner spacing */
  font-size: 16px;        /* Bigger text */
  border-radius: 6px;     /* Rounded corners */
  border: 3px solid #ccc; /* Light gray border */
  background-color: rgb(45, 255, 126);  /* White background */
  color: rgb(20, 20, 20);            /* Text color */
  outline: none;
  appearance: none;       /* Remove default arrow (modern browsers) */
  cursor: pointer;
  margin-bottom: 15px;;
  
}

/* Optional: add a small arrow icon */
#selectSTAFF::after, #serviceSelect::after {
  content: "▼";
  position: absolute;
  right: 10px;
  pointer-events: none;
}

/* Optional hover effect */
#selectSTAFF:hover, #serviceSelect:hover {
  border-color: #4CAF50;
}


.invoice-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.invoice-modal.hidden {
  display: none;
}

.invoice-card {
  background: #fff;
  width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  border-radius: 12px;
}

.invoice-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.invoice-client input {
  width: 100%;
  padding: 6px;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.invoice-table th,
.invoice-table td {
  border-bottom: 1px solid #ddd;
  padding: 6px;
  text-align: left;
}

.invoice-summary {
  margin-top: 10px;
}

.payment-row input {
  width: 120px;
}

.invoice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}



/* =========================
   HISTORY SECTION STYLING
========================= */

#history .card {
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

#history h3 {
  font-size: 22px;
  color: #3b82f6; /* Blue gradient theme */
  margin-bottom: 15px;
}

/* Table Wrapper - scrollable horizontally */
#history .table-wrapper {
  overflow-x: auto;
}

/* Table Styling */
#historyTable {

  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#historyTable th,
#historyTable td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 17px;
}

#historyTable th {
  background: linear-gradient(90deg, #6366f1, #3b82f6);
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  
}

#historyTable tr:nth-child(even) {
  background: #f9fafb;
}

#historyTable tr:hover {
  background: #e0f2fe;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: all 0.15s ease;
}

/* Buttons */
#historyTable button {
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

#historyTable button.view {
  background: #10b981; /* Green */
  color: #fff;
}

#historyTable button.view:hover {
  background: #059669;
}

#historyTable button.delete {
  background: #ef4444; /* Red */
  color: #fff;
}

#historyTable button.delete:hover {
  background: #b91c1c;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  #historyTable th,
  #historyTable td {
    padding: 8px;
    font-size: 12px;
  }

  #historyTable button {
    padding: 4px 8px;
    font-size: 11px;
  }
}


#handles {
  display: flex;
  flex-direction: row;
  gap: 10px;
 
}
#sorting {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hidden {
  display: none !important;
}

/* Backdrop */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal card */
.modal-card {
  background: #fff;
  width: 80%;
  max-height: 80%;
  overflow: auto;
  padding: 20px;
  border-radius: 8px;
  position: relative;
}

/* Close button */
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}


/* PASSWORD MODAL FIX */
.modal {
  display: none;               /* hidden by default */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.modal-box {
  background: #fff;
  padding: 20px;
  width: 300px;
  border-radius: 10px;
  text-align: center;
}

.modal-box input {
  width: 100%;
  padding: 8px;
  margin: 10px 0;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
}

#staffPasswordError {
  color: red;
  font-size: 13px;
}


#dailyTotalSales {
  position: fixed;      /* Sticky relative to viewport */
  top: 3px;         /* Distance from bottom */
  right: 20px;          /* Distance from right */
  background-color: rgba(255, 242, 130, 0.9); /* Slight white background */
  padding: 10px 15px;   /* Some padding */
  border-radius: 10px;  /* Rounded corners */
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Shadow for visibility */
  font-size: 1.1rem;    /* Adjust font size */
  font-weight: bold;     /* Bold text */
  z-index: 9999;         /* Stay on top of everything */
}



/* ===============================
   CLEAN PRINT FOR DAILY REPORT
=============================== */

@media print {

  /* Hide buttons and pagination */
  #dailyReportListModal button,
  #dailyReportPageInfo {
    display: none !important;
  }

  /* Remove modal styling */
  #dailyReportListModal {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Clean table layout */
  #dailyReportListModal table {
    width: 100%;
    border-collapse: collapse;
  }

  #dailyReportListModal th,
  #dailyReportListModal td {
    border: 1px solid black;
    padding: 6px;
    font-size: 14px;
  }

}



/* ======================================
   MOBILE RESPONSIVE DESIGN (ANDROID)
====================================== */

@media screen and (max-width: 768px) {

  /* ---------- Dashboard Layout ---------- */

  .dashboard {
    flex-direction: column;
    height: auto;
  }

  /* Sidebar becomes top bar */
  .sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5px;
  }

  .sidebar button {
    padding: 10px;
    font-size: 14px;
  }

  .sidebar h2,
  .sidebar img {
    display: none;
  }

  /* Main section full width */
  .main {
    padding: 10px;
  }

  /* ---------- Cards ---------- */

  .card {
    flex-direction: column;
    gap: 10px;
  }

  /* ---------- POS Grid ---------- */

  .pos-items {
    grid-template-columns: repeat(2, 1fr);
  }

  .items-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Very small phones */
  @media screen and (max-width: 480px) {
    .pos-items {
      grid-template-columns: 1fr;
    }

    .items-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- Dropdowns ---------- */

  #serviceSelect,
  #selectSTAFF {
    width: 100%;
    font-size: 16px;
  }

  /* ---------- POS Action Buttons ---------- */

  .pos-actions {
    position: static;
    justify-content: center;
    margin-top: 15px;
  }

  .pos-actions button {
    width: 45%;
  }

  /* ---------- Tables ---------- */

  table {
    font-size: 12px;
  }

  th, td {
    padding: 6px;
  }

  /* Scrollable tables */
  .table-wrapper,
  #historyTable,
  #staffTable {
    display: block;
    overflow-x: auto;
  }

  /* ---------- Invoice Modal ---------- */

  .invoice-card {
    width: 95%;
    max-height: 95vh;
  }

  .invoice-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .invoice-actions button {
    width: 100%;
  }

  /* ---------- Sticky Sales Display ---------- */

  #dailyTotalSales {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    height: 20px;
  }

  /* ---------- History Controls ---------- */

  #handles {
    flex-direction: column;
  }

  #historySearch1,
  #historySearch2 {
    width: 100%;
  }

}


/***********************************
 * INVENTORY SECTION
 ***********************************/
/***********************************
 * INVENTORY SECTION (FULL REDESIGN)
 ***********************************/

/* SECTION SPACING */
#inventory {
  padding: 10px;
}

/***********************************
 * CARD
 ***********************************/
#inventory .card {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  border: 1px solid #f1f5f9;
}

/***********************************
 * FORM INPUTS
 ***********************************/
#inventory input {
  width: 100%;
  padding: 11px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  transition: all 0.2s ease;
}

#inventory input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
  outline: none;
}

/***********************************
 * PRIMARY BUTTON
 ***********************************/
#inventory .primary {
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

#inventory .primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(37,99,235,0.35);
}

/***********************************
 * TABLE CONTAINER
 ***********************************/
#inventory table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden;
}

/***********************************
 * HEADER
 ***********************************/
#inventory thead {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
}

#inventory th {
  color: #fff;
  text-align: left;
  padding: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/***********************************
 * BODY CELLS
 ***********************************/
#inventory td {
  padding: 13px;
  font-size: 20px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

/***********************************
 * ZEBRA ROW EFFECT
 ***********************************/
#inventory tbody tr:nth-child(even) {
  background: #f8fbff;
}

#inventory tbody tr:nth-child(odd) {
  background: #ffffff;
}

/***********************************
 * HOVER EFFECT
 ***********************************/
#inventory tbody tr {
  transition: all 0.2s ease;
}

#inventory tbody tr:hover {
  background: #eaf2ff !important;
  transform: scale(1.01);
}

/***********************************
 * IMAGE STYLE
 ***********************************/
#inventory img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

/***********************************
 * LOW STOCK BADGE
 ***********************************/
.low-stock {
  color: #dc2626;
  font-weight: 600;
  background: rgba(220,38,38,0.08);
  padding: 5px 10px;
  border-radius: 8px;
  display: inline-block;
}

/***********************************
 * ACTION BUTTONS
 ***********************************/
#inventory td button {
  border: none;
  padding: 6px 10px;
  margin-right: 5px;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* EDIT */
#inventory td button:nth-child(1) {
  background: #fde68a;
  color: #92400e;
}

#inventory td button:nth-child(1):hover {
  background: #facc15;
}

/* REFILL */
#inventory td button:nth-child(2) {
  background: #22c55e;
  color: #fff;
}

#inventory td button:nth-child(2):hover {
  background: #16a34a;
}

/* DELETE */
#inventory td button:nth-child(3) {
  background: #ef4444;
  color: #fff;
}

#inventory td button:nth-child(3):hover {
  background: #dc2626;
}

/***********************************
 * EMPTY STATE
 ***********************************/
#inventory tbody:empty::after {
  content: "No inventory items yet";
  display: block;
  text-align: center;
  padding: 25px;
  color: #313131;
  font-size: 14px;
}

/***********************************
 * SCROLL (FOR LARGE TABLES)
 ***********************************/
#inventory .card:last-child {
  overflow-x: auto;
}

/***********************************
 * RESPONSIVE (MOBILE)
 ***********************************/
@media (max-width: 768px) {
  #inventory table,
  #inventory thead,
  #inventory tbody,
  #inventory th,
  #inventory td,
  #inventory tr {
    display: block;
  }

  #inventory thead {
    display: none;
  }

  #inventory tr {
    margin-bottom: 12px;
    background: #fff;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
  }

  #inventory td {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
  }

  #inventory td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6b7280;
  }
}


.status-badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.status-ok {
  background: #dcfce7;
  color: #166534;
}

.status-low {
  background: #fef9c3;
  color: #854d0e;
}

.status-out {
  background: #fee2e2;
  color: #991b1b;
}

.inv-photo-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.inv-photo-wrapper img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  transition: 0.2s;
}

.inv-photo-wrapper:hover img {
  transform: scale(1.05);
  border: 2px solid #1d4ed8;
}

.photo-line {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #1d4ed8;
  opacity: 0;
  transition: 0.2s;
}

.inv-photo-wrapper:hover .photo-line {
  opacity: 1;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  justify-content: center;
  align-items: center;
}

.modal.show {
  display: flex;
}

/* COMPACT ROW */
.custom-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* SMALL INPUTS */
.custom-row input {
  padding: 6px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* WIDTH CONTROL */
.i-name, .f-name { flex: 1; min-width: 120px; }
.i-price, .f-price { width: 80px; }
.i-qty, .f-qty { width: 60px; }
.f-l, .f-w { width: 60px; }

/* TOTAL */
.i-total {
  width: 90px;
  text-align: right;
  font-weight: bold;
}

/* REMOVE BUTTON */
.custom-row button {
  background: #ef4444;
  color: white;
  border: none;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
}




.compact-actions {
  display:flex ;        /* shrink to content width */
  gap: 8px;                    /* tight spacing */
  width: 200px;         /* prevents full stretch */
  padding: 4px;               /* minimal breathing room */
  background: #f8fafc;       /* optional subtle container */
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.compact-actions button.primary {
  height: 60px;        /* fixed height */
  padding: 0 10px;     /* horizontal spacing only */
  font-size: 20px;     /* smaller text */
  line-height: 34px;   /* vertically center text */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.custom-row {
  display: flex;
  flex-wrap: nowrap;     /* ❌ prevents line breaks */
  align-items: center;
  gap: 6px;
  overflow-x: auto;      /* allows horizontal scroll if needed */
}

.field {
  flex-shrink: 0;        /* prevents resizing weirdly */
}

.total-field {
  min-width: 90px;       /* keeps it fixed */
  white-space: nowrap;   /* prevents text wrapping */
}

#customGrandTotal {
  white-space: nowrap;
  font-size: 16px;
}

.flex-group.compact-actions {
  display: flex;
  flex-wrap: wrap;      /* allow buttons to stay normal */
  gap: 8px;
  align-items: center;
}





/* =========================
   RANGE BUTTONS
========================= */
.range-btn {
  background: #eef2ff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  width: 170px;
  height: 50px;
  font-size: 20px;
}

.range-btn:hover {
  background: #1e2db4;
  color: white;
}

/* =========================
   STAT CARDS
========================= */
.stat-card {
  flex: 1;
  padding: 18px;
  border-radius: 14px;
  height: 80px;
  color: white;
  min-width: 220px;
  
}
.stat-card h4 {
  font-size: 22px;
}

.stat-card h2 {
  font-size: 40px;
}
.income {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.expense {
  background: linear-gradient(135deg, #ef4444, #f97316);
}

.profit {
  background: linear-gradient(135deg, #10b981, #22c55e);
}

/* =========================
   TABLE
========================= */
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: #f1f5f9;
}

td,
th {
  padding: 10px;
  border-bottom: 1px solid #e5e7eb;
}

tbody tr:hover {
  background: #eef6ff;
}

/* =========================
   FILTER BAR
========================= */
/* =========================
   FILTER BAR (CLEAN + COMPACT)
========================= */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;

  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

/* inputs & select */
.filter-bar input,
.filter-bar select {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid #d1d5db;

  width: auto;
  min-width: 140px;
}

/* focus polish */
.filter-bar input:focus,
.filter-bar select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
  outline: none;
}

/* filter button */
.filter-bar .primary {
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 8px;
}

/* =========================
   MODAL BACKDROP BASE
========================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-backdrop.show {
  display: flex;
}

/* =========================
   EXPENSE MODAL (FIXED CLEAN VERSION)
========================= */
/* =========================
   EXPENSE MODAL (FINAL FIXED VERSION)
========================= */

.expense-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);

  display: none;              /* hidden by default */
  align-items: center;
  justify-content: center;

  z-index: 99999;
}

/* only show when JS adds .show */
.expense-popup.show {
  display: flex;
}

/* modal box */
.expense-popup-box {
  background: rgb(165, 211, 255);
  width: 380px;
  max-width: 90%;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);

  animation: popIn 0.15s ease;
}

/* inputs */
.expense-popup-box input,
.expense-popup-box select {
  width: 90%;
  margin: 6px 0;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

/* animation */
@keyframes popIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}


/* =========================
   PREMIUM ADD EXPENSE BUTTON
========================= */
.action-btn {
  width: 30%;
  height: 50px;
  padding: 16px 18px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.3px;

  border: none;
  border-radius: 14px;

  background: linear-gradient(135deg, #0a58ff, #ff5fea);
  color: white;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);

  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.action-btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 15px 35px rgba(37, 99, 235, 0.45);
}

.action-btn:active {
  transform: scale(0.98);
}

.action-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.25);
  transform: skewX(-20deg);
  transition: 0.5s;
}

.action-btn:hover::before {
  left: 130%;
}
/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {

  .dashboard {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .sidebar button {
    flex: 1;
    text-align: center;
  }

  .main {
    padding: 10px;
  }
}

.range-sticky {
  position: fixed;
  top: 120px;
  right: 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 9999;
}

.action-bar {
  display: flex;
  justify-content: space-between; /* THIS is the key */
  align-items: center;
  margin-bottom: 15px;
}



/* =========================
   DASHBOARD HEADER (INLINE FIXES)
========================= */
.card-flex {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

/* =========================
   RANGE BUTTON GROUP
========================= */
.range-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================
   STAT ROW
========================= */
.stat-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* =========================
   REMOVE INLINE TEXT MARGINS
========================= */
.stat-card h4 {
  margin: 0 0 5px 0;
}

.stat-card h2 {
  margin: 0;
}

/* =========================
   DATE LABEL
========================= */
#dateRangeLabel {
  background: #eef2ff;
  color: #4338ca;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}

/* =========================
   SIDEBAR IMAGE + TITLE FIX
========================= */
.sidebar img {
  width: 100px;
  margin: 20px auto;
  display: block;
}

.sidebar h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}

.sidebar h2:first-of-type {
  padding-bottom: 5px;
}

.sidebar h2:last-of-type {
  padding-top: 5px;
  margin-bottom: 10px;
}

/* =========================
   MODAL BUTTON GROUP
========================= */
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* =========================
   TABLE WRAPPER
========================= */
.table-wrapper {
  overflow: auto;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}

/* =========================
   TABLE HEADER FIX
========================= */
.table-header-row {
  background: #f8fafc;
  text-align: left;
  font-size: 13px;
  color: #6b7280;
}

.table-header-row th {
  padding: 12px;
}

/* =========================
   EMPTY STATE
========================= */
.empty-state {
  text-align: center;
  padding: 30px;
  color: #9ca3af;
  font-size: 14px;
}

/* =========================
   DATE RANGE MODAL
========================= */
.modal-content-custom {
  width: 300px;
  padding: 15px;
  background: rgb(213, 245, 255);
  border-radius: 10px;
}

.modal-content-custom input {
  width: 90%;
}

/* =========================
   SMALL FIXES
========================= */
.table-min {
  min-width: 600px;
}

/* =========================
   CARD (VERTICAL FLEX VERSION)
========================= */
.card-flex {
  padding: 20px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);

  display: flex;
  flex-direction: column;
  gap: 16px;
}




.field.small {
  width: 30px;          /* controls the whole block width */
  min-width: 60px;
}


.range-btn {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}

.range-btn:hover {
  background: #f3f4f6;
}

/* ACTIVE STATE */
.range-btn.active-range {
  background: #4f46e5;
  color: white;
  border-color: #4f46e5;
  box-shadow: 0 4px 12px rgba(79,70,229,0.3);
}

.range-btn.active-range {
  background: #4f46e5;
  color: white;
  border-color: #4f46e5;
  box-shadow: 0 4px 12px rgba(79,70,229,0.3);
}

/* =========================
   EXPENSE TABLE FIX (ISOLATED)
========================= */

#profitDashboard .expense-table-card {
  display: block !important;   /* override global .card flex */
  padding: 20px;
}

/* table wrapper */
#profitDashboard .expense-table-card table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 12px;
  overflow: hidden;
}

/* header */
#profitDashboard .expense-table-card thead th {
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

/* body cells */
#profitDashboard .expense-table-card tbody td {
  padding: 12px;
  font-size: 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #111827;
}

/* hover ONLY here */
#profitDashboard .expense-table-card tbody tr:hover {
  background: #f1f5ff;
  transition: 0.15s;
}

/* empty state */
#profitDashboard .expense-table-card .empty-row td {
  text-align: center;
  padding: 30px;
  color: #9ca3af;
  font-size: 14px;
}

/* DEFAULT */
.range-btn{
  padding:8px 14px;
  border:none;
  border-radius:10px;
  background:#eef2ff;
  color:#374151;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
}

/* HOVER */
.range-btn:hover{
  background:#c7d2fe;
  transform:translateY(-1px);
}

/* ACTIVE BUTTON */
.range-btn.active-range{
  background:linear-gradient(135deg,#4f46e5,#4338ca);
  color:white;
  box-shadow:0 6px 18px rgba(79,70,229,.25);
}

#dateRangeModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);

  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;

  z-index: 9999;
}

/* when active */
#dateRangeModal.show {
  display: flex;
}

/* modal box */
#dateRangeModal .modal-box {
  background: white;
  padding: 20px;
  border-radius: 12px;
  width: 300px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  text-align: center;
}


/* =========================
   PAYMENT MODAL
========================= */

#paymentModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 99999;
}

#paymentModal.hidden {
  display: none;
}

.payment-modal-content {
  background: white;
  width: 400px;
  max-width: 90%;

  padding: 20px;
  border-radius: 14px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.2);

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-modal-content input,
.payment-modal-content select {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  font-size: 16px;
}

.payment-modal-actions {
  display: flex;
  gap: 10px;
}

.payment-modal-actions button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;

  font-size: 15px;
  font-weight: bold;

  cursor: pointer;
}

.payment-modal-actions button:first-child {
  background: #16a34a;
  color: white;
}

.payment-modal-actions button:last-child {
  background: #ef4444;
  color: white;
}


/* =========================
   PAYMENT HISTORY MODAL
========================= */

#paymentHistoryModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 99999;
}

#paymentHistoryModal.hidden {
  display: none;
}

#paymentHistoryModal .payment-modal-content {
  background: #ffffff;
  width: 600px;
  max-width: 95%;
  max-height: 85vh;

  padding: 20px;
  border-radius: 14px;

  overflow-y: auto;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

  display: flex;
  flex-direction: column;
  gap: 12px;
}

#paymentHistoryModal h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  text-align: center;
}

/* TABLE */
#paymentHistoryModal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#paymentHistoryModal th,
#paymentHistoryModal td {
  border: 1px solid #e5e7eb;
  padding: 8px;
  text-align: center;
}

#paymentHistoryModal th {
  background: #f3f4f6;
  font-weight: 700;
}

/* BUTTONS */
#paymentHistoryModal button {
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

/* Reprint button */
#paymentHistoryModal button {
  background: #2563eb;
  color: white;
}

#paymentHistoryModal button:hover {
  background: #1d4ed8;
}

/* Close button */
#paymentHistoryModal button:last-child {
  background: #ef4444;
  margin-top: 10px;
}

#paymentHistoryModal button:last-child:hover {
  background: #dc2626;
}


/* Payment History Table */
.payment-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.payment-table th,
.payment-table td {
  border-bottom: 1px solid #ddd;
  padding: 6px 4px;
  font-size: 12px;
}

.payment-table th {
  background: #f5f5f5;
  text-align: left;
}

.payment-table td.right {
  text-align: right;
}