* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --hue: 223;
  --hue2: 253;
  --hue-negative: 8;
  --hue-positive: 133;
  --bg: hsl(var(--hue), 0%, 10%); /* Dark theme default */
  --fg: hsl(var(--hue), 0%, 90%); /* Dark theme default */
  --primary: hsl(var(--hue), 90%, 50%);
  --primary-t: hsla(var(--hue), 90%, 50%, 0);
  --negative: hsl(var(--hue-negative), 90%, 67.5%); /* Dark theme default */
  --positive: hsl(var(--hue-positive), 90%, 50%); /* Dark theme default */
  --trans-dur: 0.3s;
  --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
  font-size: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
}
body,
button {
  color: var(--fg);
  font: 1em/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    sans-serif;
}
/* body {
  background-color: var(--bg);
  display: flex;
  height: 100vh;
  transition: background-color var(--trans-dur), color var(--trans-dur);
} */
#widget-section button {
  cursor: pointer;
  outline: transparent;
  transition: background-color var(--trans-dur),
    box-shadow calc(var(--trans-dur) / 2), color var(--trans-dur);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
main#widget-section {
  width: 100%;
  /* height: 400px; */
}
main#widget-section > svg {
  /* For the hidden SVG sprite sheet */
  display: none;
}
#widget-section small {
  font-size: 0.875em;
}

/* Change indicator styles */
#widget-section .change-positive,
#widget-section .change-negative,
#widget-section .change-neutral {
  transition: color var(--trans-dur);
}
#widget-section .change-positive {
  color: var(--positive);
}
#widget-section .change-negative {
  color: var(--negative);
}
#widget-section .change-neutral {
  color: hsl(var(--hue), 0%, 60%);
}

#widget-section .icon,
#widget-section .saas__stat-change .icon {
  display: block;
  width: 1em;
  height: 1em;
}

#widget-section .change-positive .arrow-bg {
  fill: hsla(var(--hue-positive), 90%, 50%, 0.18);
}
#widget-section .change-negative .arrow-bg {
  fill: hsla(var(--hue-negative), 90%, 67.5%, 0.18);
}
#widget-section .change-neutral .arrow-bg {
  fill: hsla(var(--hue), 0%, 60%, 0.18);
}
#widget-section .change-positive .arrow-stroke {
  stroke: var(--positive);
}
#widget-section .change-negative .arrow-stroke {
  stroke: var(--negative);
}
#widget-section .change-neutral .arrow-stroke {
  stroke: hsl(var(--hue), 0%, 60%);
}

/* .saas styles */
#widget-section .saas {
  background-color: hsl(var(--hue), 10%, 17.5%);
  border-radius: 1.25em;
  box-shadow: 0 0.25em 0.75em hsla(0, 0%, 0%, 0.1);
  padding: 2.5em 1.75em 1.75em;
  width: 100%;
  /* height: 37.5em;  */ /* Fixed height, content might overflow if too much*/
  transition: background-color var(--trans-dur), box-shadow var(--trans-dur);
  display: flex;
  flex-direction: column;
}
#widget-section .saas__block {
  background-color: hsl(var(--hue), 10%, 20%);
  border-radius: 1em;
  box-shadow: 0 0.25em 0.5em hsla(0, 0%, 0%, 0.1);
  margin-bottom: 1em;
  padding: 1.5em;
  transition: background-color var(--trans-dur), box-shadow var(--trans-dur);
}
#widget-section .saas__button {
  background-color: hsl(var(--hue), 10%, 15%);
  border-radius: 1rem;
  box-shadow: 0 0 0 2px var(--primary-t);
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 2;
  padding: 0 1em;
}
#widget-section .saas__button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
#widget-section .saas__button:focus-visible {
  box-shadow: 0 0 0 2px var(--primary);
}
#widget-section .saas__button:not(:disabled):hover {
  background-color: hsl(var(--hue), 10%, 5%);
}
#widget-section .saas__column {
  width: 100%;
}
#widget-section .saas__columns {
  display: flex;
  align-items: center;
  gap: 1.25em;
}
#widget-section .saas__label {
  color: hsl(var(--hue), 10%, 65%);
  font-size: 0.625em;
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
  transition: color var(--trans-dur);
}
#widget-section .saas__sep {
  border-top: 1px solid hsl(var(--hue), 10%, 30%);
  margin: 1.25em 0;
  transition: border-color var(--trans-dur);
}
#widget-section .saas__stat {
  margin-bottom: 1.5em;
  position: relative;
}
#widget-section .saas__stat-change {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75em;
  font-weight: 700;
  position: absolute;
  top: 0;
  right: 0;
}
[dir="rtl"] .saas__stat-change {
  right: auto;
  left: 0;
}
#widget-section .saas__stat-change .icon {
  width: 1rem;
  height: 1rem;
}
#widget-section .saas__tip {
  color: hsl(var(--hue), 10%, 70%);
  font-size: 0.75em;
  line-height: 2;
  text-align: center;
  transition: color var(--trans-dur);
  margin-top: 1.5em;
}
#widget-section .saas__title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 2rem;
}
#widget-section .saas__user-avatar {
  border-radius: 50%;
  box-shadow: 0 0 0 0.125em hsl(var(--hue), 10%, 20%);
  color: hsl(0, 0%, 0%);
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  transition: box-shadow var(--trans-dur);
}
#widget-section .saas__user-avatar--lg {
  box-shadow: none !important;
  font-size: 4.5em;
  width: 7rem;
  height: 7rem;
}
#widget-section .saas__user-avatar-list,
#widget-section .saas__user-avatar-row {
  display: flex;
}
#widget-section .saas__user-avatar-list {
  height: 2.5em;
}
#widget-section .saas__user-avatar-list .saas__user-avatar {
  margin-inline-end: -1em;
}
#widget-section .saas__user-avatar-row {
  justify-content: space-between;
  align-items: center;
}
#widget-section .saas__user-details {
  width: 100%;
}
#widget-section .saas__user-empty {
  color: hsl(var(--hue), 10%, 50%);
  display: flex;
  gap: 0.75em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 7em;
}
#widget-section .saas__user-empty .icon {
  color: hsl(var(--hue), 10%, 40%);
  font-size: 3em;
  line-height: 1;
  transition: color var(--trans-dur);
}
#widget-section .saas__user-info {
  min-width: 0;
}
#widget-section .saas__value {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.4;
}
#widget-section .saas__value--lg {
  font-size: 2.75em;
}
#widget-section .saas__value--truncated {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#widget-section .saas__value + .saas__label {
  margin-top: 1rem;
}

/* .segmented styles */
#widget-section .segmented {
  background-color: hsl(var(--hue), 10%, 10%);
  border-radius: 2em;
  display: flex; /* Parent is flex */
  justify-content: center;
  align-items: center;
  margin: 0 auto 1em auto;
  position: relative;
  width: 100%;
  transition: background-color var(--trans-dur);
}
#widget-section .segmented__bg {
  background-color: hsl(var(--hue), 10%, 25%);
  border-radius: inherit;
  box-shadow: 0 0.25em 0.5em hsla(0, 0%, 0%, 0.1);
  position: absolute;
  top: 0.25em;
  left: 0;
  /* width is set by JS */
  height: calc(100% - 0.5em);
  transition: background-color var(--trans-dur),
    transform var(--trans-dur) var(--trans-timing);
  z-index: 0;
}
[dir="rtl"] .segmented__bg {
  right: 0;
  left: auto;
}
#widget-section .segmented__button {
  background-color: transparent;
  border-radius: 2rem;
  box-shadow: 0 0 0 3px var(--primary-t);
  color: hsl(var(--hue), 10%, 55%);
  cursor: pointer;
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.7;
  padding: 0.5rem;
  position: relative;
  transition: box-shadow var(--trans-dur), color var(--trans-dur);
  flex: 1; /* MODIFIED: Replaces width: 100% to allow buttons to share space */
  text-align: center; /* Ensure text is centered */
  z-index: 1;
}
#widget-section .segmented__button:focus-visible {
  box-shadow: 0 0 0 3px var(--primary);
}
#widget-section .segmented__button[aria-selected="true"] {
  color: var(--fg);
}
#widget-section .segmented__button[aria-selected="false"]:focus-visible,
#widget-section .segmented__button[aria-selected="false"]:hover {
  color: hsl(var(--hue), 10%, 75%);
}

/* .tab-content {
  Base styles for tab content, JS handles display:none/block 
} */

#widget-section #online-sales-chart-container,
#widget-section #daily-sales-chart-container {
  width: 100%; /* Ensure it takes full width of parent .saas__block's content area */
  max-width: 100%; /* Prevent it from exceeding parent's width */
  box-sizing: border-box; /* Ensure padding/border are included in width/height */
}

  body, html {
    margin: 0;
    padding: 0;
  }
#widget-section .loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: white;
  font-family: sans-serif;
  font-size: 1.5rem;
  flex-direction: column;
}
#widget-section .spinner {
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top: 4px solid white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* Light theme (Optional - can be added if light mode toggle is needed) */

#widget-section img.bill-icon{
  width: 1.5em;
  height: 1.5em;
}
/* Animations */
@keyframes slide-in {
  from {
    transform: translate(-200px, 0);
  }
  to {
    transform: translate(0, 0);
  }
}

#widget-section pay-btn {
  background-color: #444;
  color: #fff;
  border: none;
  transition: background-color var(--trans-dur);
}
#widget-section .pay-btn:hover {
  background-color: #000;
}

/* Modal background */
#widget-section .modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #000;
  animation: fadeIn 0.3s ease-out;
}

/* Modal content */
#widget-section .modal-content {
  /* background-color: #fff; */
  margin: 0;
  padding: 0;
  border-radius: 8px;
  width: 100%;
  /* max-width: 500px; */
  position: relative;
  animation: slideIn 0.4s ease;
}

/* Close button */
#widget-section .close-btn {
  position: absolute;
  right: 16px;
  top: 15;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  z-index:3
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@media (max-width: 480px) {
    #newest-bill-list {
        max-width: 100px;
        overflow: scroll;
    }
}