/* ═══ Dashboard — New Components ═══ */

/* ── Page header ── */
.dm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.dash-main .dm-title {
  font-size: 24px;
  font-weight: 800;
  color: #1d1d1d;
  margin: 0;
}
.dm-subtitle {
  font-size: 13px;
  color: #696969;
  margin: 2px 0 0;
}
.dm-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Search ── */
.dm-search {
  position: relative;
  display: flex;
  align-items: center;
}
.dm-search svg {
  position: absolute;
  left: 12px;
  pointer-events: none;
}
.dm-search input {
  width: 220px;
  padding: 9px 12px 9px 36px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #1d1d1d;
  outline: none;
  min-height: 38px;
  transition: border-color 0.15s;
}
.dm-search input:focus { border-color: #16a34a }
.dm-search input::placeholder { color: #b0b0b0 }

/* ── Filter button ── */
.dm-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: white;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1d;
  cursor: pointer;
  font-family: inherit;
  min-height: 38px;
  transition: border-color 0.15s;
}
.dm-filter-btn:hover { border-color: #16a34a }

/* ── Stats ── */
.dm-stats {
  display: flex;
  gap: 16px;
  margin: 24px 0;
}
.dm-stat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 20px;
}
.dm-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dm-stat-body {
  display: flex;
  flex-direction: column;
}
.dm-stat-num {
  font-size: 28px;
  font-weight: 800;
  color: #1d1d1d;
  line-height: 1.1;
}
.dm-stat-label {
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1d;
  margin-top: 2px;
}
.dm-stat-sub {
  font-size: 12px;
  color: #696969;
}

/* ── Toolbar ── */
.dm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.dm-toolbar-left {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dm-toolbar-right {
  display: flex;
  gap: 4px;
}

.dm-select {
  padding: 7px 32px 7px 12px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1d1d1d;
  font-family: inherit;
  background: white url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  min-height: 36px;
  outline: none;
  width: auto;
  min-width: 160px;
  flex-shrink: 0;
}
.dm-select:focus { border-color: #16a34a }

/* ── View toggle ── */
.dm-view-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  background: white;
  color: #696969;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.dm-view-btn.active {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #16a34a;
}
.dm-view-btn:hover:not(.active) { border-color: #b0b0b0 }

/* ── Pill badges ── */
.dm-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 90px;
  white-space: nowrap;
}

/* ── Table (list view) ── */
.dm-table-head {
  display: grid;
  grid-template-columns: 2fr 100px 100px 140px 130px 60px;
  align-items: center;
  padding: 10px 16px;
  background: #f8f8f8;
  border-bottom: 1px solid #e6e6e6;
  border-radius: 10px 10px 0 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #b0b0b0;
}
.dm-table-row {
  display: grid;
  grid-template-columns: 2fr 100px 100px 140px 130px 60px;
  align-items: center;
  padding: 14px 16px;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}
.dm-table-row:hover { background: #fafafa }
.dm-table-row:last-child { border-radius: 0 0 10px 10px }

.dm-table-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dm-table-img-wrap {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.dm-table-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dm-table-img-ph {
  width: 100%;
  height: 100%;
  background: #f0fdf4;
}
.dm-table-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dm-table-item-name {
  font-size: 14px;
  font-weight: 700;
  color: #1d1d1d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-table-item-desc {
  font-size: 12px;
  color: #696969;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-table-price {
  font-size: 14px;
  font-weight: 700;
  color: #1d1d1d;
  font-variant-numeric: tabular-nums;
}
.dm-table-status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dm-table-actions {
  display: flex;
  justify-content: center;
}

/* ── Three dot menu ── */
.dm-dot-wrap {
  position: relative;
}
.dm-dot-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0b0b0;
  transition: background 0.15s, color 0.15s;
}
.dm-dot-btn:hover { background: #f4f4f4; color: #1d1d1d }
.dm-dot-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  min-width: 140px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 100;
}
.dm-dot-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.dm-dot-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #1d1d1d;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s;
}
.dm-dot-item:hover { background: #f4fdf7; color: #16a34a }
.dm-dot-item + .dm-dot-item { border-top: 1px solid #f0f0f0 }
.dm-dot-danger { color: #cc4117 }
.dm-dot-danger:hover { background: #fff5f5; color: #cc4117 }

/* ── Grid view ── */
.dm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.dm-grid-card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.dm-grid-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08) }
.dm-grid-img {
  width: 100%;
  height: 140px;
  overflow: hidden;
}
.dm-grid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dm-grid-img-ph {
  width: 100%;
  height: 100%;
  background: #f0fdf4;
}
.dm-grid-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm-grid-name {
  font-size: 14px;
  font-weight: 700;
  color: #1d1d1d;
}
.dm-grid-price {
  font-size: 14px;
  font-weight: 700;
  color: #16a34a;
}
.dm-grid-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

/* ── Pagination ── */
.dm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.dm-page-info {
  font-size: 13px;
  color: #696969;
}
.dm-page-btns {
  display: flex;
  gap: 4px;
}
.dm-page-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  background: white;
  color: #1d1d1d;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all 0.15s;
}
.dm-page-btn:hover:not(.active):not(:disabled) { border-color: #16a34a; color: #16a34a }
.dm-page-btn.active {
  background: #16a34a;
  color: white;
  border-color: #16a34a;
}
.dm-page-btn:disabled { opacity: 0.4; cursor: not-allowed }
.dm-page-size { min-width: 100px }

/* ── Sidebar additions ── */
.sidebar-signout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  margin: 4px 0 0;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: #696969;
  cursor: pointer;
  font-family: inherit;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.sidebar-signout:hover { color: #cc4117; background: #fff5f5 }

.plan-lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  vertical-align: middle;
  color: #b0b0b0;
  flex-shrink: 0;
}

.upgrade-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 998; }
.upgrade-modal-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #ffffff; border-radius: 20px; padding: 32px 32px 28px; width: 90%; max-width: 560px; max-height: 90vh; overflow-y: auto; z-index: 999; box-shadow: 0 24px 80px rgba(0,0,0,0.2); }
.upgrade-close-btn { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: #f0f0f0; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #696969; transition: background 0.15s; }
.upgrade-close-btn:hover { background: #e0e0e0; }
.upgrade-icon-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.upgrade-icon { width: 64px; height: 64px; background: #f0fdf4; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.upgrade-title { font-size: 24px; font-weight: 800; color: #1d1d1d; text-align: center; letter-spacing: -0.5px; margin-bottom: 8px; line-height: 1.2; }
.upgrade-sub { font-size: 14px; color: #696969; text-align: center; line-height: 1.6; margin-bottom: 20px; max-width: 420px; margin-left: auto; margin-right: auto; }
.upgrade-preview-wrap { position: relative; background: #f8f8f8; border: 1px solid #e6e6e6; border-radius: 12px; overflow: hidden; margin-bottom: 20px; min-height: 180px; }
.upgrade-preview-inner { padding: 16px; filter: blur(3px); opacity: 0.6; pointer-events: none; user-select: none; }
.upgrade-preview-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,0.4); }
.upgrade-lock-circle { width: 52px; height: 52px; background: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.12); margin-bottom: 4px; }
.upgrade-lock-text { font-size: 16px; font-weight: 700; color: #1d1d1d; text-align: center; }
.upgrade-lock-sub { font-size: 12px; color: #696969; text-align: center; max-width: 240px; }
.upgrade-features-label { font-size: 14px; font-weight: 700; color: #1d1d1d; margin-bottom: 12px; }
.upgrade-feature-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.upgrade-feature-card { background: #ffffff; border: 1px solid #e6e6e6; border-radius: 10px; padding: 14px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.upgrade-feature-card-icon { width: 40px; height: 40px; background: #f0fdf4; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.upgrade-feature-card-title { font-size: 12px; font-weight: 700; color: #1d1d1d; line-height: 1.3; }
.upgrade-feature-card-sub { font-size: 11px; color: #696969; line-height: 1.4; }
.upgrade-primary-btn { display: block; width: 100%; padding: 15px; background: #16a34a; color: #ffffff; font-size: 15px; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; font-family: Inter, sans-serif; text-align: center; text-decoration: none; margin-bottom: 10px; transition: background 0.15s; box-sizing: border-box; }
.upgrade-primary-btn:hover { background: #15803d; }
.upgrade-secondary-btn { display: block; width: 100%; padding: 14px; background: transparent; color: #1d1d1d; font-size: 14px; font-weight: 600; border: 1.5px solid #e6e6e6; border-radius: 12px; cursor: pointer; font-family: Inter, sans-serif; margin-bottom: 16px; transition: border-color 0.15s; box-sizing: border-box; }
.upgrade-secondary-btn:hover { border-color: #1d1d1d; }
.upgrade-contact-line { text-align: center; font-size: 13px; color: #696969; }
.upgrade-contact-link { color: #16a34a; font-weight: 600; text-decoration: none; }
.upgrade-contact-link:hover { text-decoration: underline; }

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid #e6e6e6;
  margin-top: 12px;
}
.sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #16a34a;
  color: white;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sidebar-user-name {
  font-size: 13px;
  font-weight: 700;
  color: #1d1d1d;
}
.sidebar-user-role {
  font-size: 11px;
  color: #696969;
}

/* ── Toast ── */
.dm-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1d1d1d;
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 90px;
  z-index: 9999;
  font-family: Inter, sans-serif;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  animation: toastIn 0.25s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) }
}

/* ── Discount preview ── */
.discount-preview {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
  margin-top: 4px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .dm-stats { flex-wrap: wrap }
  .dm-stat { flex: 1 1 calc(50% - 8px); min-width: 180px }
  .dm-table-head, .dm-table-row {
    grid-template-columns: 2fr 90px 90px 120px 110px 50px;
  }
}

@media (max-width: 768px) {
  .dm-header { flex-direction: column }
  .dm-header-actions { width: 100% }
  .dm-search input { width: 100%; flex: 1 }
  .dm-stats { flex-direction: column }
  .dm-stat { flex: 1 1 100% }
  .dm-toolbar { flex-wrap: wrap }
  .dm-toolbar-left { flex-wrap: wrap }
  .dm-table-head { display: none }
  .dm-table-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .dm-table-item { flex: 1 1 100% }
  .dm-pagination { flex-direction: column; align-items: center }
}

/* ═══ Analytics ═══ */

.analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.time-filter-tabs {
  display: flex;
  gap: 4px;
  background: #f0f0f0;
  padding: 4px;
  border-radius: 10px;
}
.time-tab {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #696969;
  cursor: pointer;
  transition: all 0.15s;
  font-family: Inter, sans-serif;
}
.time-tab.active {
  background: #ffffff;
  color: #16a34a;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.analytics-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.analytics-stat-card {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon-wrap.green { background: #f0fdf4 }
.stat-icon-wrap.amber { background: #fffbeb }
.stat-icon-wrap.blue { background: #eff6ff }
.stat-icon-wrap.purple { background: #faf5ff }
.stat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-number {
  font-size: 26px;
  font-weight: 800;
  color: #1d1d1d;
  letter-spacing: -0.5px;
  line-height: 1;
}
.stat-label {
  font-size: 13px;
  font-weight: 500;
  color: #696969;
}
.stat-sub {
  font-size: 11px;
  color: #b0b0b0;
}
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.analytics-card {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 20px;
}
.chart-card { grid-column: span 2 }
.analytics-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.analytics-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #1d1d1d;
}
.analytics-card-sub {
  font-size: 12px;
  color: #b0b0b0;
}
.bar-chart-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
}
.bar {
  width: 100%;
  background: #16a34a;
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.bar:hover { background: #15803d }
.bar-value {
  font-size: 10px;
  font-weight: 700;
  color: #16a34a;
  text-align: center;
}
.bar-chart-labels {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.bar-label {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: #b0b0b0;
}
.top-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.top-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.top-item-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f0fdf4;
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.top-item-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-item-bar-wrap {
  width: 80px;
  height: 6px;
  background: #f0f0f0;
  border-radius: 90px;
  overflow: hidden;
}
.top-item-bar {
  height: 100%;
  background: #16a34a;
  border-radius: 90px;
}
.top-item-count {
  font-size: 12px;
  font-weight: 700;
  color: #1d1d1d;
  min-width: 32px;
  text-align: right;
}
.peak-hours-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peak-hour-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.peak-hour-label {
  font-size: 12px;
  font-weight: 500;
  color: #696969;
  min-width: 60px;
}
.peak-hour-bar-wrap {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 90px;
  overflow: hidden;
}
.peak-hour-bar {
  height: 100%;
  background: #16a34a;
  border-radius: 90px;
  transition: width 0.4s ease;
}
.peak-hour-count {
  font-size: 11px;
  font-weight: 600;
  color: #696969;
  min-width: 24px;
  text-align: right;
}
@media (max-width: 1024px) {
  .analytics-stats-row { grid-template-columns: repeat(2, 1fr) }
  .chart-card { grid-column: span 1 }
  .analytics-grid { grid-template-columns: 1fr }
}

/* ═══ Customers ═══ */
.cust-search-wrap { position:relative }
.cust-search-input { padding:9px 14px;border:1px solid #e6e6e6;border-radius:8px;font-size:13px;width:220px;font-family:Inter,sans-serif;outline:none }
.cust-search-input:focus { border-color:#16a34a }
.cust-table-wrap { background:#fff;border:1px solid #e6e6e6;border-radius:12px;overflow:hidden }
.cust-table { width:100%;border-collapse:collapse }
.cust-table thead tr { background:#f8f8f8;border-bottom:1px solid #e6e6e6 }
.cust-table th { padding:12px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#b0b0b0;text-align:left }
.cust-table td { padding:14px 16px;font-size:13px;color:#1d1d1d;border-bottom:1px solid #f0f0f0;vertical-align:middle }
.cust-table tbody tr:last-child td { border-bottom:none }
.cust-table tbody tr { cursor:pointer;transition:background 0.12s }
.cust-table tbody tr:hover { background:#f8fffe }
.cust-avatar-cell { display:flex;align-items:center;gap:10px }
.cust-avatar { width:36px;height:36px;border-radius:50%;background:#f0fdf4;color:#16a34a;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.cust-name { font-weight:600;color:#1d1d1d }
.cust-email { font-size:11px;color:#696969;margin-top:2px }
.cust-visits-badge { background:#f0fdf4;color:#16a34a;font-size:12px;font-weight:700;padding:3px 10px;border-radius:90px;display:inline-block }
.cust-fav-pill { background:#f4f4f4;color:#696969;font-size:11px;font-weight:600;padding:3px 10px;border-radius:90px;display:inline-block }
.cust-last-visit { font-size:12px;color:#696969 }
.cust-empty-state { display:flex;flex-direction:column;align-items:center;padding:60px 20px;gap:12px }
.cust-empty-title { font-size:16px;font-weight:700;color:#1d1d1d;margin:0 }
.cust-empty-sub { font-size:13px;color:#696969;text-align:center;max-width:280px;line-height:1.5;margin:0 }

/* Customer drawer */
.cust-drawer-overlay { position:fixed;inset:0;z-index:500 }
.cust-drawer-backdrop { position:absolute;inset:0;background:rgba(0,0,0,0.4) }
.cust-drawer-panel { position:absolute;right:0;top:0;bottom:0;width:380px;max-width:100vw;background:#fff;overflow-y:auto;box-shadow:-4px 0 24px rgba(0,0,0,0.1);animation:custSlide 0.25s ease }
@keyframes custSlide { from{transform:translateX(100%)} to{transform:translateX(0)} }
.cust-drawer-head { display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid #e6e6e6 }
.cust-drawer-avatar { width:48px;height:48px;border-radius:50%;background:#f0fdf4;color:#16a34a;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.cust-drawer-info { flex:1 }
.cust-drawer-info h3 { font-size:16px;font-weight:700;color:#1d1d1d;margin:0 0 2px }
.cust-drawer-info p { font-size:12px;color:#696969;margin:0 }
.cust-drawer-close { background:#f0f0f0;border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;color:#696969;font-size:14px;display:flex;align-items:center;justify-content:center }
.cust-drawer-stats { display:flex;border-bottom:1px solid #e6e6e6 }
.cust-drawer-stat { flex:1;padding:16px;text-align:center;border-right:1px solid #e6e6e6;display:flex;flex-direction:column;gap:4px }
.cust-drawer-stat:last-child { border-right:none }
.cust-drawer-num { font-size:22px;font-weight:800;color:#16a34a;letter-spacing:-0.5px }
.cust-drawer-lbl { font-size:11px;color:#696969 }
.cust-drawer-section { padding:16px 20px;border-bottom:1px solid #f0f0f0 }
.cust-drawer-section h4 { font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#b0b0b0;margin:0 0 12px }

/* ═══ Settings ═══ */
.stg-page { max-width:720px;padding:0 0 48px }
.stg-page-header { margin-bottom:24px }
.stg-card { background:#fff;border:1px solid #e6e6e6;border-radius:16px;margin-bottom:20px;overflow:hidden }
.stg-card-head { display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid #f0f0f0 }
.stg-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.stg-icon.green { background:#f0fdf4 }
.stg-icon.amber { background:#fffbeb }
.stg-icon.blue { background:#eff6ff }
.stg-icon.red { background:#fff5f5 }
.stg-title { font-size:15px;font-weight:700;color:#1d1d1d;margin:0 0 2px }
.stg-sub { font-size:12px;color:#696969;margin:0 }
.stg-fields { padding:20px 24px;display:flex;flex-direction:column;gap:20px }
.stg-field { display:flex;flex-direction:column;gap:6px }
.stg-label { font-size:13px;font-weight:600;color:#1d1d1d;margin:0 }
.stg-input { width:100%;padding:10px 12px;border:1.5px solid #e6e6e6;border-radius:8px;font-size:14px;color:#1d1d1d;font-family:Inter,sans-serif;background:#fff;transition:border-color 0.15s;box-sizing:border-box }
.stg-input:focus { outline:none;border-color:#16a34a }
.stg-textarea { resize:vertical;min-height:80px;line-height:1.5 }
.stg-select { cursor:pointer }
.stg-field-hint { font-size:11px;color:#b0b0b0;line-height:1.4;margin:0 }
.stg-card-foot { padding:16px 24px;border-top:1px solid #f0f0f0;display:flex;align-items:center;gap:12px }
.stg-save { background:#16a34a;color:#fff;font-size:14px;font-weight:700;padding:10px 24px;border-radius:90px;border:none;cursor:pointer;font-family:Inter,sans-serif;transition:background 0.15s }
.stg-save:hover { background:#15803d }
.stg-saved { font-size:13px;font-weight:600;color:#16a34a }
.stg-secondary-btn { background:#f0f0f0;color:#1d1d1d;font-size:13px;font-weight:600;padding:9px 18px;border-radius:90px;border:none;cursor:pointer;font-family:Inter,sans-serif;transition:background 0.15s }
.stg-secondary-btn:hover { background:#e0e0e0 }
.stg-error { font-size:12px;color:#cc4117;padding:8px 12px;background:#fff5f5;border-radius:6px;margin:4px 0 0 }
.stg-success { font-size:12px;color:#16a34a;padding:8px 12px;background:#f0fdf4;border-radius:6px;margin:4px 0 0 }
.stg-logo-wrap { display:flex;align-items:center;gap:16px }
.stg-logo-preview { width:72px;height:72px;border-radius:12px;border:1.5px dashed #e6e6e6;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;background:#f8f8f8 }
.stg-logo-info { display:flex;flex-direction:column;gap:4px }
.stg-logo-btn { background:#f0f0f0;color:#1d1d1d;font-size:13px;font-weight:600;padding:8px 16px;border-radius:90px;border:none;cursor:pointer;font-family:Inter,sans-serif;width:fit-content }
.stg-logo-hint { font-size:11px;color:#b0b0b0;margin:0 }
.stg-hours-grid { display:flex;flex-direction:column;gap:10px }
.stg-hours-row { display:flex;align-items:center;gap:10px }
.stg-hours-day { font-size:13px;font-weight:500;color:#1d1d1d;min-width:80px }
.stg-hours-input { padding:6px 10px;border:1px solid #e6e6e6;border-radius:6px;font-size:13px;font-family:Inter,sans-serif;color:#1d1d1d;width:110px }
.stg-hours-sep { font-size:12px;color:#696969 }
.stg-tax-wrap { display:flex;align-items:center;gap:12px }
.stg-tax-hint { font-size:12px;color:#696969 }
.stg-cats { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;min-height:32px }
.stg-cat-tag { display:flex;align-items:center;gap:6px;background:#f4f4f4;color:#1d1d1d;font-size:13px;font-weight:500;padding:5px 12px;border-radius:90px }
.stg-cat-remove { background:none;border:none;color:#b0b0b0;cursor:pointer;font-size:12px;padding:0;line-height:1 }
.stg-cat-remove:hover { color:#cc4117 }
.stg-add-cat { display:flex;gap:8px }
.stg-add-cat-btn { background:#f0fdf4;color:#16a34a;border:1.5px solid #16a34a;font-size:13px;font-weight:700;padding:8px 16px;border-radius:8px;cursor:pointer;font-family:Inter,sans-serif;white-space:nowrap;transition:all 0.15s }
.stg-add-cat-btn:hover { background:#16a34a;color:#fff }
.stg-email-display { padding:10px 12px;background:#f8f8f8;border-radius:8px;font-size:14px;color:#696969;border:1px solid #e6e6e6 }
.stg-plan { display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#f8f8f8;border-radius:10px;border:1px solid #e6e6e6 }
.stg-plan-info { display:flex;flex-direction:column;gap:2px }
.stg-plan-name { font-size:15px;font-weight:700;color:#1d1d1d }
.stg-plan-price { font-size:12px;color:#696969 }
.stg-upgrade { background:#16a34a;color:#fff;font-size:13px;font-weight:700;padding:9px 18px;border-radius:90px;border:none;cursor:pointer;font-family:Inter,sans-serif }
.stg-danger-card { border-color:#fecaca }
.stg-danger-item { display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid #fff0f0 }
.stg-danger-info { display:flex;flex-direction:column;gap:3px }
.stg-danger-name { font-size:14px;font-weight:600;color:#1d1d1d }
.stg-danger-desc { font-size:12px;color:#696969 }
.stg-danger-btn { background:#fff5f5;color:#cc4117;border:1.5px solid #fecaca;font-size:13px;font-weight:600;padding:8px 16px;border-radius:8px;cursor:pointer;font-family:Inter,sans-serif;white-space:nowrap;flex-shrink:0;transition:all 0.15s }
.stg-danger-btn:hover { background:#cc4117;color:#fff;border-color:#cc4117 }
.stg-danger-strong { background:#cc4117;color:#fff;border-color:#cc4117 }
.stg-danger-strong:hover { background:#9a2f0d;border-color:#9a2f0d }
@media (max-width:768px) { .stg-hours-row { flex-wrap:wrap } .stg-hours-day { min-width:70px } .stg-hours-input { width:90px } .stg-danger-item { flex-direction:column;align-items:flex-start } }

/* ═══ Settings — Notifications & Branding ═══ */
.stg-icon.purple { background:#faf5ff }
.stg-toggle-row { display:flex;align-items:center;justify-content:space-between;gap:16px }
.stg-toggle-info { display:flex;flex-direction:column;gap:3px;flex:1 }
.stg-toggle-title { font-size:14px;font-weight:600;color:#1d1d1d }
.stg-toggle-sub { font-size:12px;color:#696969;line-height:1.4 }
.stg-color-wrap { display:flex;flex-direction:column;gap:16px }
.stg-swatches { display:flex;gap:8px;flex-wrap:wrap }
.stg-swatch { width:32px;height:32px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:transform 0.15s,border-color 0.15s;flex-shrink:0 }
.stg-swatch:hover { transform:scale(1.1) }
.stg-swatch.active { border-color:#1d1d1d;transform:scale(1.15) }
.stg-custom-color { display:flex;flex-direction:column;gap:6px }
.stg-custom-color-row { display:flex;align-items:center;gap:10px }
.stg-color-preview { display:flex;flex-direction:column;gap:8px }
.stg-color-preview-btn { display:inline-flex;align-items:center;padding:9px 20px;border-radius:90px;font-size:14px;font-weight:700;color:#fff;background:#16a34a;width:fit-content }
.stg-msg-preview { margin-top:8px;padding:10px 14px;background:#f8f8f8;border-radius:8px;border:1px solid #e6e6e6;font-size:13px;color:#1d1d1d;display:flex;gap:8px;align-items:flex-start }
.stg-preview-label { font-size:11px;font-weight:700;color:#b0b0b0;text-transform:uppercase;letter-spacing:0.5px;flex-shrink:0;margin-top:1px }

/* ── Table inactive state ── */
.table-card.table-inactive { opacity:0.6 }
.table-card.table-inactive .qr-code-wrap { filter:grayscale(100%) }
.table-inactive-overlay { position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:4px;background:#fff5f5;border:1px solid #fecaca;border-radius:90px;padding:3px 10px;font-size:11px;font-weight:700;color:#cc4117;z-index:3 }
.table-capacity-label { display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:500;color:#696969;margin:4px 0 0 }

/* ── Modals ── */
#rename-modal, #capacity-modal { position:fixed;inset:0;z-index:999;align-items:center;justify-content:center }
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:999 }
.modal-box { position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffffff;border-radius:16px;padding:28px;width:90%;max-width:400px;z-index:1000;box-shadow:0 20px 60px rgba(0,0,0,0.2) }
.modal-title { font-size:18px;font-weight:700;color:#1d1d1d;margin-bottom:6px }
.modal-sub { font-size:13px;color:#696969;margin-bottom:16px;line-height:1.5 }
.modal-actions { display:flex;gap:10px;margin-top:20px;justify-content:flex-end }

/* ── Capacity controls ── */
.capacity-controls { display:flex;align-items:center;justify-content:center;gap:24px;margin:16px 0 8px }
.capacity-btn { width:44px;height:44px;border-radius:50%;border:2px solid #e6e6e6;background:#ffffff;font-size:22px;font-weight:700;color:#1d1d1d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s }
.capacity-btn:hover { border-color:#16a34a;color:#16a34a }
.capacity-display { font-size:48px;font-weight:900;color:#16a34a;letter-spacing:-2px;min-width:80px;text-align:center }
.capacity-label-text { text-align:center;font-size:14px;color:#696969;margin-bottom:8px }

/* ── Locations ── */
.locations-list { display:flex;flex-direction:column;gap:16px }
.location-card { background:#ffffff;border:1px solid #e6e6e6;border-radius:16px;overflow:hidden;transition:box-shadow 0.2s }
.location-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.07) }
.location-card-header { display:flex;align-items:flex-start;justify-content:space-between;padding:20px 20px 16px;gap:16px }
.location-card-left { display:flex;align-items:flex-start;gap:14px;flex:1 }
.location-icon { width:44px;height:44px;border-radius:10px;background:#f0fdf4;display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.location-info { display:flex;flex-direction:column;gap:3px }
.location-name { font-size:16px;font-weight:700;color:#1d1d1d }
.location-address, .location-phone { font-size:12px;color:#696969 }
.location-card-right { display:flex;align-items:center;gap:10px;flex-shrink:0 }
.location-status-badge { font-size:11px;font-weight:700;text-transform:uppercase;padding:4px 10px;border-radius:90px }
.location-status-badge.status-active { background:#dcfce7;color:#16a34a }
.location-status-badge.status-inactive { background:#f3f4f6;color:#696969 }
.location-card-body { display:flex;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0 }
.location-stat { flex:1;padding:14px 16px;text-align:center;border-right:1px solid #f0f0f0;display:flex;flex-direction:column;gap:3px }
.location-stat:last-child { border-right:none }
.location-stat-num { font-size:22px;font-weight:800;color:#16a34a;letter-spacing:-0.5px }
.location-stat-label { font-size:11px;color:#696969 }
.location-managers-section { padding:16px 20px }
.location-managers-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px }
.location-managers-title { font-size:13px;font-weight:600;color:#1d1d1d }
.add-manager-btn { background:transparent;border:1.5px solid #16a34a;color:#16a34a;font-size:12px;font-weight:700;padding:5px 12px;border-radius:90px;cursor:pointer;font-family:Inter,sans-serif;transition:all 0.15s }
.add-manager-btn:hover { background:#16a34a;color:#ffffff }
.managers-list { display:flex;flex-direction:column;gap:8px }
.manager-row { display:flex;align-items:center;gap:10px;padding:8px 12px;background:#f8f8f8;border-radius:8px }
.manager-avatar { width:28px;height:28px;border-radius:50%;background:#f0fdf4;color:#16a34a;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.manager-email { flex:1;font-size:13px;color:#1d1d1d }
.remove-manager-btn { background:none;border:none;color:#b0b0b0;cursor:pointer;font-size:13px;padding:2px;transition:color 0.15s }
.remove-manager-btn:hover { color:#cc4117 }
.no-managers-text { font-size:12px;color:#b0b0b0;padding:8px 0 }
.location-active-indicator { padding:10px 20px;background:#f0fdf4;border-top:1px solid #bbf7d0;font-size:12px;font-weight:600;color:#16a34a;text-align:center }
#current-location-label { display:none;font-size:11px;font-weight:600;color:#16a34a;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;padding:4px 10px;margin:8px 16px;text-align:center }

/* ── Orders Redesign ── */
.orders-page-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px }
.orders-header-left { display:flex;align-items:center;gap:14px }
.orders-bell-wrap { display:flex;align-items:center;gap:6px;color:#696969 }
.orders-count-badge { font-size:13px;font-weight:600;color:#696969 }
.server-time { font-size:12px;color:#b0b0b0 }
.orders-stats-strip { display:flex;align-items:center;background:#ffffff;border:1px solid #e6e6e6;border-radius:12px;padding:16px 24px;margin-bottom:24px }
.orders-stat-item { flex:1;display:flex;flex-direction:column;align-items:center;gap:3px }
.orders-stat-value { font-size:24px;font-weight:800;color:#16a34a;letter-spacing:-0.5px;line-height:1 }
.orders-stat-label { font-size:11px;font-weight:500;color:#b0b0b0;text-transform:uppercase;letter-spacing:0.5px }
.orders-stat-divider { width:1px;height:40px;background:#e6e6e6;flex-shrink:0 }
.orders-empty-state { display:flex;flex-direction:column;align-items:center;padding:80px 20px;gap:12px;background:#ffffff;border:1px solid #e6e6e6;border-radius:16px }
.orders-empty-icon { margin-bottom:8px }
.orders-empty-title { font-size:18px;font-weight:700;color:#1d1d1d;margin:0 }
.orders-empty-sub { font-size:13px;color:#696969;text-align:center;max-width:280px;line-height:1.6;margin:0 }
.active-orders-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:32px }
.active-order-card { background:#ffffff;border:1px solid #e6e6e6;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow 0.2s,border-color 0.2s }
.active-order-card:hover { box-shadow:0 4px 20px rgba(0,0,0,0.08);border-color:#d1fae5 }
.active-card-top { display:flex;align-items:center;justify-content:space-between;padding:16px 16px 8px }
.active-card-table { font-size:22px;font-weight:900;color:#1d1d1d;letter-spacing:-0.5px }
.active-card-status { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:5px 12px;border-radius:90px;flex-shrink:0 }
.status-new { background:#dcfce7;color:#16a34a }
.status-preparing { background:#fef3c7;color:#92400e }
.active-card-time { font-size:12px;color:#b0b0b0;padding:0 16px 12px }
.active-card-items { padding:12px 16px;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;flex:1;display:flex;flex-direction:column;gap:6px }
.active-card-item-row { display:flex;align-items:center;justify-content:space-between;gap:8px }
.active-card-item-name { font-size:14px;font-weight:500;color:#1d1d1d }
.active-card-item-qty { font-size:14px;font-weight:700;color:#1d1d1d;flex-shrink:0 }
.items-missing { font-size:12px;color:#b0b0b0;font-style:italic;margin:0 }
.active-card-notes { display:flex;align-items:flex-start;gap:6px;padding:10px 16px;background:#fffbeb;border-bottom:1px solid #fef3c7;font-size:12px;color:#92400e;line-height:1.4 }
.active-card-footer { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px }
.active-card-total { font-size:18px;font-weight:800;color:#1d1d1d;letter-spacing:-0.3px }
.active-card-item-count { font-size:11px;font-weight:400;color:#696969;display:block }
.mark-served-btn { display:flex;align-items:center;gap:6px;background:#16a34a;color:#ffffff;font-size:13px;font-weight:700;padding:10px 16px;border-radius:10px;border:none;cursor:pointer;font-family:Inter,sans-serif;white-space:nowrap;flex-shrink:0;transition:background 0.15s }
.mark-served-btn:hover { background:#15803d }
.start-preparing-btn { display:flex;align-items:center;gap:6px;background:#fef3c7;color:#92400e;font-size:13px;font-weight:700;padding:10px 16px;border-radius:10px;border:none;cursor:pointer;font-family:Inter,sans-serif;white-space:nowrap;flex-shrink:0;transition:all 0.15s }
.start-preparing-btn:hover { background:#92400e;color:#ffffff }
.stg-logout-btn { display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;background:#ffffff;color:#dc2626;font-size:14px;font-weight:600;font-family:Inter,sans-serif;border:1.5px solid #dc2626;border-radius:12px;cursor:pointer;margin-bottom:24px;transition:all 0.15s }
.stg-logout-btn:hover { background:#dc2626;color:#ffffff }
.stg-logout-btn:hover svg { stroke:#ffffff }
.order-history-zone { margin-top:8px }
.history-header-row { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:4px 0 }
.history-toggle-btn { display:flex;align-items:center;gap:8px;background:transparent;border:none;font-size:14px;font-weight:600;color:#696969;cursor:pointer;padding:10px 0;font-family:Inter,sans-serif;transition:color 0.15s }
.history-toggle-btn:hover { color:#1d1d1d }
.history-count { background:#f0f0f0;color:#696969;font-size:11px;font-weight:700;padding:2px 8px;border-radius:90px }
.history-chevron { transition:transform 0.2s ease;margin-left:4px }
.history-chevron.open { transform:rotate(180deg) }
.history-time-tabs { display:flex;gap:4px;background:#f0f0f0;padding:3px;border-radius:8px }
.history-time-tab { padding:6px 14px;border-radius:6px;border:none;background:transparent;font-size:12px;font-weight:600;color:#696969;cursor:pointer;font-family:Inter,sans-serif;transition:all 0.15s;white-space:nowrap }
.history-time-tab.active { background:#ffffff;color:#16a34a;box-shadow:0 1px 4px rgba(0,0,0,0.08) }
.history-stats-strip { display:flex;align-items:center;background:#ffffff;border:1px solid #e6e6e6;border-radius:12px;padding:14px 20px;margin-bottom:16px;gap:0;flex-wrap:wrap }
.history-stat { flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:80px }
.history-stat-value { font-size:18px;font-weight:800;color:#1d1d1d;letter-spacing:-0.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;text-align:center }
.history-stat-label { font-size:10px;font-weight:500;color:#b0b0b0;text-transform:uppercase;letter-spacing:0.5px }
.history-stat-divider { width:1px;height:32px;background:#e6e6e6;flex-shrink:0;margin:0 4px }
.history-export-wrap { margin-left:auto;padding-left:16px;flex-shrink:0 }
.history-export-btn { display:flex;align-items:center;gap:6px;background:#f8f8f8;border:1px solid #e6e6e6;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;color:#696969;cursor:pointer;font-family:Inter,sans-serif;transition:all 0.15s;white-space:nowrap }
.history-export-btn:hover { background:#f0f0f0;color:#1d1d1d;border-color:#d0d0d0 }
.history-groups-wrap { display:flex;flex-direction:column;gap:12px }
.history-date-group { background:#ffffff;border:1px solid #e6e6e6;border-radius:12px;overflow:hidden }
.history-date-header { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8f8f8;border-bottom:1px solid #e6e6e6;cursor:pointer;user-select:none;transition:background 0.15s }
.history-date-header:hover { background:#f0f0f0 }
.history-date-label { font-size:13px;font-weight:700;color:#1d1d1d;display:flex;align-items:center;gap:10px }
.history-date-count { font-size:11px;font-weight:600;color:#696969;background:#e6e6e6;padding:2px 8px;border-radius:90px }
.history-date-revenue { font-size:13px;font-weight:700;color:#16a34a }
.history-date-chevron { color:#b0b0b0;transition:transform 0.2s ease;flex-shrink:0 }
.history-date-chevron.open { transform:rotate(180deg) }
.history-table { width:100%;border-collapse:collapse }
.history-table thead tr { border-bottom:1px solid #f0f0f0 }
.history-table th { padding:10px 16px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#b0b0b0;text-align:left }
.history-table td { padding:12px 16px;font-size:13px;color:#696969;border-bottom:1px solid #f8f8f8;vertical-align:middle }
.history-table tr:last-child td { border-bottom:none }
.history-table tr:hover td { background:#fafeff }
.history-td-table { font-weight:700;color:#1d1d1d;white-space:nowrap }
.history-td-total { font-weight:700;color:#1d1d1d;white-space:nowrap }
.history-td-items { max-width:200px }
.history-td-notes { max-width:160px;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.history-td-time { white-space:nowrap;font-size:12px }
.history-served-pill { display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#16a34a;background:#f0fdf4;padding:3px 10px;border-radius:90px;white-space:nowrap }
.history-empty { text-align:center;padding:40px 20px;color:#b0b0b0;font-size:13px }
@keyframes newOrderPulse { 0%{box-shadow:0 0 0 0 rgba(22,163,74,0.4);border-color:#16a34a} 70%{box-shadow:0 0 0 10px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0);border-color:#16a34a} }
.active-order-card.new-arrival { animation:newOrderPulse 1s ease 3;border-color:#16a34a;border-width:2px }