/* ============================================================
   CliniClick — Design Tokens & Modern Component Layer
   ============================================================
   קובץ מרכזי לשפה עיצובית אחידה. כל ערך צבע/רדיוס/צל/ריווח
   מוגדר כאן כמשתנה CSS, ואפשר לדרוס במקומות מיוחדים.
   נטען אחרי ה-CSS הקיים ב-index.html ולכן מוסיף שיפורים
   מבלי לשבור סגנונות קיימים.
   ============================================================ */

:root {
  /* --- Brand palette --- */
  --cc-primary:        #3b82f6;   /* כחול רפואי בהיר יותר */
  --cc-primary-dark:   #2563eb;
  --cc-primary-light:  #dbeafe;
  --cc-accent:         #0d9488;   /* ירוק-טורקיז קליני */
  --cc-success:        #16a34a;
  --cc-success-light:  #dcfce7;
  --cc-warning:        #f59e0b;
  --cc-warning-light:  #fef3c7;
  --cc-danger:         #dc2626;
  --cc-danger-light:   #fee2e2;
  --cc-info:           #0284c7;
  --cc-info-light:     #e0f2fe;

  /* --- Neutrals --- */
  --cc-bg:             #f6f8fb;
  --cc-surface:        #ffffff;
  --cc-surface-2:      #f8fafc;
  --cc-border:         #e5e7eb;
  --cc-border-strong:  #d1d5db;
  --cc-text:           #111827;
  --cc-text-muted:     #6b7280;
  --cc-text-subtle:    #9ca3af;

  /* --- Radii --- */
  --cc-radius-sm:  6px;
  --cc-radius-md:  10px;
  --cc-radius-lg:  14px;
  --cc-radius-xl:  20px;
  --cc-radius-full: 9999px;

  /* --- Shadows --- */
  --cc-shadow-sm:  0 1px 2px rgba(17,24,39,.06);
  --cc-shadow-md:  0 4px 12px rgba(17,24,39,.08);
  --cc-shadow-lg:  0 10px 30px rgba(17,24,39,.12);
  --cc-shadow-glow: 0 0 0 3px rgba(59,130,246,.16);

  /* --- Spacing --- */
  --cc-space-1: 4px;
  --cc-space-2: 8px;
  --cc-space-3: 12px;
  --cc-space-4: 16px;
  --cc-space-5: 20px;
  --cc-space-6: 24px;

  /* --- Gradients --- */
  --cc-grad-primary:  linear-gradient(135deg, #2563eb 0%, #3b82f6 58%, #14b8a6 100%);
  --cc-grad-success:  linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);
  --cc-grad-warm:     linear-gradient(135deg, #fa709a 0%, #fee140 100%);

  /* --- Transitions --- */
  --cc-t-fast:   120ms ease;
  --cc-t-normal: 200ms ease;
  --cc-t-slow:   320ms cubic-bezier(.2,.8,.2,1);
  --cc-trans-fast: 120ms ease;

  /* --- Android/WebView compatibility z-scale + viewport --- */
  --z-app-shell: 1;
  --z-header: 100;
  --z-drawer: 9000;
  --z-backdrop: 10500;
  --z-modal: 10520;
  --z-payment: 10600;
  --z-credit: 10700;
  --z-toast: 11000;
  --app-vw: 100vw;
  --app-vh: 100dvh;
  --app-height: 100dvh;
  --app-keyboard-inset: 0px;
  --cc-topbar-offset: calc(76px + env(safe-area-inset-top, 0px));
}

html,
body {
  min-height: -webkit-fill-available;
  overscroll-behavior: none !important;
  touch-action: manipulation !important;
}

body {
  padding-bottom: 0;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

button,
.btn,
[role="button"],
.icon-circle {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
.btn:not([disabled]),
[role="button"]:not([aria-disabled="true"]) {
  pointer-events: auto;
}

button:disabled,
.btn[disabled],
[aria-disabled="true"] {
  pointer-events: none !important;
}

body.app-scroll-locked,
body.modal-open,
body.loading-open,
body.cc-pay-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

header {
  z-index: var(--z-header) !important;
}

.modal-backdrop,
.modal-overlay {
  z-index: var(--z-backdrop) !important;
}

.modal-backdrop.show,
.modal-overlay.show {
  pointer-events: auto !important;
}

.modal-backdrop:not(.show),
.modal-overlay:not(.show) {
  pointer-events: none !important;
}

.modal-backdrop.show > .modal,
.modal-overlay.show > .modal {
  z-index: var(--z-modal) !important;
}

.toast,
#toast,
.cc-toast,
[id*="toast" i] {
  z-index: var(--z-toast) !important;
}

.screen,
.app-screen,
main,
#app,
#appRoot {
  min-height: min(100dvh, var(--app-height));
  min-height: -webkit-fill-available;
}

body.keyboard-open .modal-footer,
body.keyboard-open .cc-pay-summary-bar,
body.keyboard-open .bottom-nav {
  transform: translateY(calc(-1 * min(var(--app-keyboard-inset), 220px)));
}

body.is-webview .modal,
body.is-android .modal {
  max-height: calc(var(--app-height) - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
}

body.is-webview .modal-backdrop,
body.is-webview .modal-overlay,
body.is-android .modal-backdrop,
body.is-android .modal-overlay {
  height: var(--app-height) !important;
  min-height: -webkit-fill-available;
}

body.is-webview .modal-backdrop.show,
body.is-webview .modal-overlay.show,
body.is-android .modal-backdrop.show,
body.is-android .modal-overlay.show {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--app-height) !important;
  max-height: none !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
  z-index: var(--z-backdrop) !important;
}

body.is-webview .modal-backdrop.show > .modal,
body.is-webview .modal-overlay.show > .modal,
body.is-android .modal-backdrop.show > .modal,
body.is-android .modal-overlay.show > .modal {
  width: 100vw !important;
  max-width: none !important;
  height: var(--app-height) !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  z-index: var(--z-modal) !important;
}

body.is-webview .modal-body,
body.is-android .modal-body {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
body input,
body textarea,
body select {
  direction: rtl;
  text-align: right;
}

input[type="email"],
input[type="url"],
input[inputmode="url"] {
  direction: ltr;
  text-align: left;
}

.cc-filterbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cc-search-filter-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
}

.cc-search-filter-row input {
  width: 100%;
  min-width: 0;
}

.cc-filter-icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  cursor: pointer;
}

.cc-filter-icon-btn:active,
.cc-filter-icon-btn:focus-visible {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
  outline: none;
}

.cc-filter-add {
  width: auto;
  min-height: 40px;
  padding: 8px 12px;
}

.cc-filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cc-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
  cursor: pointer;
}

.cc-filter-chip span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(29, 78, 216, .12);
  line-height: 1;
}

.cc-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 50;
  min-width: 180px;
  padding: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}

.cc-filter-menu button {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: right;
  font-weight: 700;
  cursor: pointer;
}

.cc-filter-menu button:hover {
  background: #f1f5f9;
}

.cc-receipt-cards {
  display: grid;
  gap: 8px;
}

.cc-receipt-card {
  cursor: pointer;
  padding: 12px 14px;
  border-right: 4px solid #3b82f6;
}

.cc-receipt-card.is-credit {
  border-right-color: #dc2626;
  background: #fff7f7;
}

.cc-receipt-card.is-cancelled {
  opacity: .65;
  border-right-color: #9ca3af;
}

.cc-receipt-row,
.cc-receipt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cc-receipt-desc {
  margin-top: 6px;
  color: #64748b;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-receipt-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
}

#settingsDisplayEntry {
  display: none !important;
}

body:not(.is-webview):not(.is-android) #dashboard #dashboardTiles .tile {
  min-height: 132px;
  padding: 18px 16px;
}

body:not(.is-webview):not(.is-android) #dashboard #dashboardTiles {
  gap: 12px;
}

#paymentMethodModal .cc-payment-modal,
#cashPaymentModal .cc-payment-modal {
  border-radius: 10px;
  background: #f8fafc;
}

#paymentMethodModal .modal-header,
#cashPaymentModal .modal-header {
  border-bottom: 1px solid #e5e7eb;
}

#paymentMethodModal .cc-payment-panel,
#cashPaymentModal .cc-payment-total {
  border: 1px solid #e5e7eb;
  box-shadow: none;
}

.new-day-grid,
.new-week-grid {
  overflow: visible !important;
}

.day-time-label,
.week-time-label {
  position: relative;
  z-index: 12;
}

.day-time-cell,
.week-time-cell {
  position: relative;
  overflow: visible !important;
  z-index: 1;
}

.cal-appointment-block {
  z-index: 20 !important;
  max-width: calc(100% - 12px);
}

.cal-appointment-block.blocked,
.cal-appointment-block.day-closed,
.cal-day-closed-overlay,
.cal-week-day-closed {
  background: linear-gradient(135deg, rgba(245, 158, 11, .95), rgba(217, 119, 6, .98)) !important;
  border-color: rgba(255,255,255,.55) !important;
}

/* Keep every modal layer above the fixed bottom navigation. */
.modal-backdrop,
.modal-overlay,
.modal-backdrop.show,
.modal-overlay.show {
  z-index: var(--z-backdrop) !important;
}

.modal-backdrop.show > .modal,
.modal-overlay.show > .modal,
.modal-backdrop > .modal,
.modal-overlay > .modal {
  position: relative;
  z-index: var(--z-modal) !important;
}

#packageSelectionModal.show,
#productSelectionModal.show,
#zcreditPaymentModal.modal-backdrop,
#pendingPaymentRecoveryModal.modal-backdrop {
  z-index: var(--z-credit) !important;
}

#packageSelectionModal.show .modal,
#productSelectionModal.show .modal,
#zcreditPaymentModal.modal-backdrop .modal,
#pendingPaymentRecoveryModal.modal-backdrop .modal {
  z-index: calc(var(--z-credit) + 1) !important;
}

/* ============================================================
   Empty States — רכיב מודרני לרשימות ריקות
   שימוש: <div class="cc-empty"><span class="cc-empty-icon">📭</span>
            <div class="cc-empty-title">אין עדיין תורים</div>
            <div class="cc-empty-sub">נסה להוסיף תור חדש</div></div>
   ============================================================ */
.cc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--cc-space-3);
  padding: 40px 20px;
  text-align: center;
  color: var(--cc-text-muted);
  background: var(--cc-surface-2);
  border: 1.5px dashed var(--cc-border-strong);
  border-radius: var(--cc-radius-lg);
  margin: var(--cc-space-4) 0;
}
.cc-empty-icon { font-size: 42px; line-height: 1; opacity: .8; }
.cc-empty-title { font-size: 15px; font-weight: 700; color: var(--cc-text); }
.cc-empty-sub  { font-size: 13px; color: var(--cc-text-muted); max-width: 280px; }
.cc-empty .btn { margin-top: var(--cc-space-2); }

/* ============================================================
   Modern Card — כרטיסייה אחידה, מחליפה שימוש inline-style
   ============================================================ */
.cc-card {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-4);
  box-shadow: var(--cc-shadow-sm);
  transition: box-shadow var(--cc-t-normal), transform var(--cc-t-fast);
}
.cc-card:hover { box-shadow: var(--cc-shadow-md); }
.cc-card.is-interactive { cursor: pointer; }
.cc-card.is-interactive:active { transform: scale(.995); }

.cc-card-title { font-weight: 700; font-size: 14px; color: var(--cc-text); margin: 0 0 6px; }
.cc-card-sub   { font-size: 12px; color: var(--cc-text-muted); }

/* ============================================================
   Badges — תגיות סטטוס אחידות
   ============================================================ */
.cc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 700;
  border-radius: var(--cc-radius-full);
  background: var(--cc-border);
  color: var(--cc-text);
  line-height: 1.4;
  white-space: nowrap;
}
.cc-badge.is-success { background: var(--cc-success-light); color: var(--cc-success); }
.cc-badge.is-warning { background: var(--cc-warning-light); color: #92400e; }
.cc-badge.is-danger  { background: var(--cc-danger-light);  color: var(--cc-danger); }
.cc-badge.is-info    { background: var(--cc-info-light);    color: var(--cc-info); }
.cc-badge.is-primary { background: var(--cc-primary-light); color: var(--cc-primary); }

/* ============================================================
   Section header — כותרת מקטע אחידה
   ============================================================ */
.cc-section-h {
  display: flex; align-items: center; justify-content: space-between;
  margin: var(--cc-space-4) 0 var(--cc-space-2);
  padding: 0 4px;
}
.cc-section-h h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--cc-text); }
.cc-section-h .cc-section-count {
  font-size: 12px; color: var(--cc-text-muted);
  background: var(--cc-surface-2); padding: 2px 10px;
  border-radius: var(--cc-radius-full);
}

/* ============================================================
   Button polish — נוסף על .btn הקיים, לא מחליף
   ============================================================ */
.btn { transition: transform var(--cc-t-fast), box-shadow var(--cc-t-normal), background var(--cc-t-fast); }
.btn:active { transform: scale(.97); }
.cc-pressed {
  transform: scale(.98);
  opacity: .86;
}
button,
a,
[role="button"],
.settings-item,
.cc-card.is-interactive {
  touch-action: manipulation;
}
input,
textarea,
select {
  touch-action: manipulation;
}
.btn.primary:focus-visible,
.btn.ghost:focus-visible,
.btn.danger:focus-visible { outline: none; box-shadow: var(--cc-shadow-glow); }

/* ============================================================
   Modal polish — צל עדין יותר + פוקוס ברור
   ============================================================ */
.modal { box-shadow: var(--cc-shadow-lg); }
.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none; border-color: var(--cc-primary) !important;
  box-shadow: var(--cc-shadow-glow);
}

/* ============================================================
   Sync status pill (for topbar)
   ============================================================ */
.cc-sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 11px; font-weight: 600;
  border-radius: var(--cc-radius-full);
  background: var(--cc-surface-2);
}
.cc-sync-pill.ok      { background: var(--cc-success-light); color: var(--cc-success); }
.cc-sync-pill.syncing { background: var(--cc-info-light);    color: var(--cc-info); }
.cc-sync-pill.error   { background: var(--cc-danger-light);  color: var(--cc-danger); }
.cc-sync-pill.offline { background: var(--cc-warning-light); color: #92400e; }
.cc-sync-pill .cc-sync-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
.cc-sync-pill.syncing .cc-sync-dot { animation: cc-pulse 1.2s infinite; }
@keyframes cc-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .4; transform: scale(.8); }
}

/* ============================================================
   Utility classes
   ============================================================ */
.cc-row     { display: flex; align-items: center; gap: var(--cc-space-2); }
.cc-row-wrap{ display: flex; align-items: center; gap: var(--cc-space-2); flex-wrap: wrap; }
.cc-col     { display: flex; flex-direction: column; gap: var(--cc-space-2); }
.cc-spacer  { flex: 1; }
.cc-mt-1 { margin-top: var(--cc-space-1); } .cc-mt-2 { margin-top: var(--cc-space-2); }
.cc-mt-3 { margin-top: var(--cc-space-3); } .cc-mt-4 { margin-top: var(--cc-space-4); }
.cc-hidden { display: none !important; }
.cc-segmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface-2);
  border: 1px solid var(--cc-border);
}
.cc-segmented button {
  border: 0;
  border-radius: var(--cc-radius-sm);
  background: transparent;
  color: var(--cc-text-muted);
  min-height: 34px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.cc-segmented button.is-active {
  background: var(--cc-surface);
  color: var(--cc-primary);
  box-shadow: var(--cc-shadow-sm);
}

/* ============================================================
   Dashboard brief — fast operational snapshot
   ============================================================ */
.cc-dashboard-brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 112px;
  align-items: stretch;
  gap: var(--cc-space-2);
  margin: 0 0 var(--cc-space-4);
}
.cc-dashboard-focus {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-space-3);
  margin-bottom: var(--cc-space-4);
}
.cc-focus-panel {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 12px;
  box-shadow: var(--cc-shadow-sm);
}
.cc-link-btn {
  border: 0;
  background: var(--cc-primary-light);
  color: var(--cc-primary);
  border-radius: var(--cc-radius-full);
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.cc-work-list,
.cc-task-list {
  display: grid;
  gap: 8px;
}
.cc-work-row,
.cc-task-row {
  width: 100%;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface-2);
  padding: 10px;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--cc-text);
  font: inherit;
}
.cc-work-row:hover,
.cc-task-row:hover {
  border-color: var(--cc-border-strong);
  background: #fff;
}
.cc-work-time {
  width: 64px;
  flex-shrink: 0;
  color: var(--cc-text-muted);
  font-size: 11px;
  text-align: center;
  display: grid;
  gap: 2px;
}
.cc-work-time b {
  display: block;
  color: var(--cc-primary);
  font-size: 15px;
}
.cc-work-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.cc-work-main b,
.cc-task-row b {
  font-size: 13px;
}
.cc-work-main small,
.cc-task-row small {
  display: block;
  color: var(--cc-text-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-task-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cc-primary);
  flex-shrink: 0;
}
.cc-task-row.debt .cc-task-dot { background: var(--cc-danger); }
.cc-task-row.warn .cc-task-dot { background: var(--cc-warning); }
.cc-task-row.empty .cc-task-dot { background: var(--cc-info); }
.cc-empty-compact {
  margin: 0;
  padding: 18px 12px;
}
.cc-brief-card {
  min-height: 104px;
  height: 100%;
  padding: 12px;
  border-radius: var(--cc-radius-lg);
  border: 1px solid var(--cc-border);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  width: 100%;
  text-align: right;
  color: var(--cc-text);
  font: inherit;
  overflow: hidden;
}
.cc-brief-action,
.cc-add-brief-card {
  cursor: pointer;
}
.cc-brief-action:hover,
.cc-add-brief-card:hover {
  border-color: var(--cc-border-strong);
  transform: translateY(-1px);
}
.cc-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cc-price-tile {
  min-height: 96px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--cc-text);
  font: inherit;
  cursor: pointer;
}
.cc-price-tile.is-active {
  border-color: var(--cc-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, .12);
}
.cc-price-swatch,
.cc-price-plus {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
}
.cc-price-plus {
  color: var(--cc-primary);
  background: rgba(99, 102, 241, .1);
  border: 1px dashed rgba(99, 102, 241, .35);
}
.cc-price-tile small {
  color: var(--cc-muted);
}
.cc-price-hero {
  align-items: center;
}
.cc-price-hero .btn {
  width: auto;
  flex-shrink: 0;
}
.cc-price-catalog {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.cc-category-block {
  position: relative;
  background: var(--tile-bg, #fff);
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  padding: 12px 12px 12px 17px;
  box-shadow: var(--cc-shadow-sm);
  overflow: hidden;
}
.cc-category-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--tile-color, var(--cc-primary));
}
.cc-category-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cc-category-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.cc-category-head b {
  font-size: 17px;
}
.cc-category-head small {
  color: var(--cc-muted);
}
.cc-category-head .btn {
  width: auto;
  min-width: 64px;
  flex-shrink: 0;
}
.cc-category-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.cc-category-products .cc-price-tile,
.cc-category-add {
  min-height: 104px;
  word-break: break-word;
  overflow-wrap: break-word;
}
.cc-category-add {
  width: 100%;
}
.cc-minute-price-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.cc-minute-price-card > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-minute-price-card strong {
  font-size: 22px;
}
.cc-minute-price-card .btn {
  width: auto;
  flex-shrink: 0;
}
.cc-status-hero {
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  background: linear-gradient(135deg, #ecfdf5, #ffffff);
  border: 1px solid rgba(22, 163, 74, .18);
}
.cc-status-hero.is-bad {
  background: linear-gradient(135deg, #fef2f2, #ffffff);
  border-color: rgba(220, 38, 38, .18);
}
.cc-status-hero span,
.cc-status-card span {
  color: var(--cc-muted);
  font-size: 12px;
  font-weight: 700;
}
.cc-status-hero h2 {
  margin: 4px 0;
  font-size: 24px;
}
.cc-status-hero p {
  margin: 0;
  color: var(--cc-muted);
  font-size: 13px;
}
.cc-status-hero strong {
  font-size: 28px;
  white-space: nowrap;
}
.cc-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.cc-status-card {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  padding: 12px;
}
.cc-status-card b {
  display: block;
  font-size: 22px;
  margin: 6px 0;
}
.cc-status-card small {
  color: var(--cc-muted);
}
.cc-status-chip {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
}
.cc-status-chip.is-good { background: #dcfce7; color: #166534; }
.cc-status-chip.is-bad { background: #fee2e2; color: #991b1b; }
.cc-tight-title {
  margin: 0 0 10px;
  font-size: 16px;
}
.cc-status-month {
  padding: 10px 0;
  border-bottom: 1px solid var(--cc-border);
}
.cc-status-month:last-child {
  border-bottom: 0;
}
.cc-status-bar-row {
  display: grid;
  grid-template-columns: 70px 1fr 88px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
}
.cc-status-bar {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #f1f5f9;
}
.cc-status-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.cc-status-bar i.income { background: #2563eb; }
.cc-status-bar i.expenses { background: #f97316; }
.cc-status-bar i.profit { background: #16a34a; }
.cc-status-bar i.loss { background: #dc2626; }
.cc-brief-card.is-wide {
  grid-column: 1 / -1;
}
.cc-brief-top {
  display: block;
  gap: 8px;
  color: var(--cc-text-muted);
  font-size: 12px;
  width: 100%;
  min-height: 32px;
  padding-left: 38px;
}
.cc-brief-top > span:first-child {
  min-width: 0;
}
.cc-brief-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--cc-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-primary-light);
  color: var(--cc-primary);
  font-weight: 800;
  flex: 0 0 30px;
  position: absolute;
  top: 12px;
  left: 12px;
}
.cc-brief-value {
  color: var(--cc-text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}
.cc-brief-sub {
  color: var(--cc-text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.cc-brief-card.is-warning .cc-brief-icon { background: var(--cc-warning-light); color: #92400e; }
.cc-brief-card.is-danger .cc-brief-icon { background: var(--cc-danger-light); color: var(--cc-danger); }
.cc-brief-card.is-success .cc-brief-icon { background: var(--cc-success-light); color: var(--cc-success); }

/* ============================================================
   Bottom navigation + contextual floating action
   ============================================================ */
.cc-bottom-nav {
  position: fixed;
  z-index: 35;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  max-width: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  background: rgba(255,255,255,.94);
  border-top: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 -8px 24px rgba(15,23,42,.08);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}
body:not(.app-authenticated) .cc-bottom-nav,
body:not(.app-authenticated) .cc-fab,
body:not(.app-authenticated) .cc-search-fab,
body:not(.app-authenticated) #globalSearchModal {
  display: none !important;
}
body.keyboard-open .cc-fab,
body.keyboard-open .cc-search-fab {
  display: none !important;
}
.cc-bottom-nav button {
  min-width: 0;
  min-height: 54px;
  border: 0;
  border-radius: var(--cc-radius-md);
  background: transparent;
  color: var(--cc-text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
}
body.app-authenticated {
  padding-bottom: calc(168px + env(safe-area-inset-bottom));
}
.screen {
  padding-bottom: calc(156px + env(safe-area-inset-bottom));
}
.cc-bottom-nav button.is-active {
  color: var(--cc-primary);
  background: var(--cc-primary-light);
}
.cc-bottom-icon {
  font-size: 18px;
  line-height: 1;
}
.cc-fab {
  position: fixed;
  z-index: 38;
  left: 18px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--cc-primary);
  color: #fff;
  box-shadow: 0 12px 28px rgba(79,70,229,.28);
  font-size: 26px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cc-fab.show {
  display: flex;
}
.cc-fab:active {
  transform: scale(.96);
}

.cc-search-fab {
  position: fixed;
  z-index: 37;
  bottom: calc(94px + env(safe-area-inset-bottom));
  left: 8px;
  right: auto;
  width: 52px;
  height: 52px;
  border: 1px solid var(--cc-border);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: var(--cc-primary);
  box-shadow: var(--cc-shadow-md);
  font-size: 23px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cc-search-fab.is-add {
  border: 0;
  background: var(--cc-primary);
  color: #fff;
  box-shadow: 0 12px 28px rgba(79,70,229,.28);
  font-size: 27px;
}
.cc-global-search-modal {
  max-width: 560px;
}
.cc-global-search-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  max-height: min(58vh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.cc-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-surface);
  cursor: pointer;
  text-align: right;
}
.cc-search-result:hover {
  background: var(--cc-surface-2);
  border-color: var(--cc-border-strong);
}
.cc-search-result-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--cc-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-primary-light);
  color: var(--cc-primary);
  flex-shrink: 0;
  font-weight: 800;
}
.cc-search-result-main {
  flex: 1;
  min-width: 0;
}
.cc-search-result-title {
  font-weight: 800;
  color: var(--cc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-search-result-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--cc-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-undo-toast {
  position: fixed;
  z-index: 10020;
  left: 50%;
  bottom: calc(150px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(520px, calc(100% - 28px));
  padding: 12px;
  border-radius: var(--cc-radius-lg);
  background: rgba(17,24,39,.96);
  color: #fff;
  box-shadow: var(--cc-shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-undo-toast span {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}
.cc-undo-toast button {
  border: 0;
  border-radius: var(--cc-radius-md);
  padding: 8px 12px;
  background: #fff;
  color: var(--cc-text);
  font-weight: 800;
  cursor: pointer;
}

.toast {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(17,24,39,.94);
}
.toast.is-success { background: rgba(22,101,52,.96); }
.toast.is-warning { background: rgba(146,64,14,.96); }
.toast.is-danger { background: rgba(153,27,27,.96); }
.toast.is-info { background: rgba(30,64,175,.96); }

/* Contextual polish */
#customer .section-title {
  align-items: flex-start;
  padding: 0;
  border-radius: 0;
  color: var(--cc-text);
  background: transparent;
  box-shadow: none;
}
#customer .section-title h2,
#customer .section-title .sub {
  color: inherit;
}
#customer .section-title .badge {
  background: var(--cc-surface);
  color: var(--cc-text);
  border-color: var(--cc-border);
}
.customer-card {
  position: relative;
}
.cc-customer-row {
  min-height: 52px;
  padding: 10px 12px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 10px;
}
.cc-customer-row .customer-meta strong {
  font-size: 15px;
  line-height: 1.2;
}
.cc-customer-flags {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cc-badge.is-muted {
  background: #f1f5f9;
  color: #64748b;
}
#customerList.list {
  gap: 6px;
}
#customerList > .card + .card {
  margin-top: 6px !important;
}
.cc-customer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cc-customer-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-space-3);
  margin-bottom: var(--cc-space-4);
}
.cc-customer-detail-card,
.cc-danger-zone {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 12px;
  box-shadow: var(--cc-shadow-sm);
}
.cc-customer-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cc-customer-stat {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 12px;
  display: grid;
  gap: 5px;
  min-height: 72px;
  width: 100%;
  text-align: right;
  font: inherit;
  cursor: pointer;
}
.cc-customer-stat:hover { border-color: var(--cc-primary); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.cc-customer-stat span {
  color: var(--cc-text-muted);
  font-size: 12px;
}
.cc-customer-stat b {
  color: var(--cc-text);
  font-size: 20px;
}
.cc-customer-stat.is-danger {
  background: var(--cc-danger-light);
  border-color: rgba(220,38,38,.2);
}
.cc-customer-stat.is-danger b {
  color: var(--cc-danger);
}
.cc-customer-stat.is-wide {
  grid-column: 1 / -1;
}
.cc-activity-button {
  width: 100%;
  text-align: right;
  font: inherit;
  cursor: pointer;
}
.cc-arrange-wrap {
  position: relative;
  display: flex;
  min-width: 0;
}
.cc-arrange-wrap > .cc-brief-card {
  flex: 1;
}
.cc-arrange-tools {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  gap: 4px;
}
.cc-arrange-tools button {
  border: 0;
  border-radius: 6px;
  background: #111827;
  color: #fff;
  width: 30px;
  height: 28px;
  font-size: 12px;
}
.cc-action-grid .tile {
  min-height: 120px;
}
.cc-customer-commandbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: var(--cc-space-4);
}
.cc-customer-commandbar .btn,
.cc-danger-zone .btn {
  width: 100%;
}
.cc-danger-zone {
  margin-top: var(--cc-space-3);
  display: grid;
  gap: 12px;
  border-color: rgba(220,38,38,.2);
  background: linear-gradient(135deg, rgba(254,226,226,.55), #fff 46%);
}

@media (min-width: 720px) {
  .cc-dashboard-focus {
    grid-template-columns: 1.2fr .8fr;
  }
  .cc-customer-overview {
    grid-template-columns: 1.1fr .9fr;
  }
  .cc-customer-commandbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cc-danger-zone {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .cc-danger-zone .btn {
    width: auto;
  }
}
.cc-mini-action {
  width: 34px;
  height: 34px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface-2);
  color: var(--cc-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cc-mini-action:hover {
  background: var(--cc-primary-light);
  color: var(--cc-primary);
}

@media (min-width: 720px) {
  .cc-dashboard-brief {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cc-brief-card.is-wide {
    grid-column: span 2;
  }
}

@media (max-width: 420px) {
  .cc-dashboard-brief {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .cc-brief-card.is-wide {
    grid-column: auto;
  }
  .cc-brief-card {
    min-height: 104px;
    padding: 10px;
  }
  .cc-brief-top {
    min-height: 28px;
    padding-left: 32px;
    font-size: 11px;
  }
  .cc-brief-icon {
    width: 26px;
    height: 26px;
    top: 10px;
    left: 10px;
  }
  .cc-brief-value {
    font-size: 18px;
  }
  .cc-brief-sub {
    font-size: 11px;
  }
  .cc-bottom-nav {
    padding-left: 6px;
    padding-right: 6px;
  }
  .cc-bottom-nav button {
    font-size: 10px;
  }
}

/* ============================================================
   Smooth scroll & better tap targets for Android
   ============================================================ */
html { scroll-behavior: smooth; }
button, .btn, .icon-circle, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* ============================================================
   UI POLISH — unified buttons, cards, forms, calendar blocks
   (loaded AFTER base styles; adjusts without breaking)
   ============================================================ */

/* --- Buttons: tighter, consistent, better focus --- */
.btn {
  border-radius: var(--cc-radius-md);
  font-weight: 600;
  transition: background var(--cc-trans-fast), transform var(--cc-trans-fast), box-shadow var(--cc-trans-fast);
  border: 1px solid transparent;
}
.btn.primary {
  background: var(--cc-primary);
  color: #fff;
  box-shadow: 0 2px 4px rgba(79,70,229,.18);
}
.btn.primary:hover   { background: var(--cc-primary-dark); }
.btn.ghost {
  background: transparent;
  color: var(--cc-primary);
  border-color: var(--cc-border);
}
.btn.ghost:hover     { background: var(--cc-primary-light); border-color: var(--cc-primary-light); }
.btn.danger {
  background: var(--cc-danger);
  color: #fff;
}
.btn.danger:hover    { background: #b91c1c; }
.btn.success {
  background: var(--cc-success);
  color: #fff;
}
.btn.success:hover   { background: #15803d; }
.btn[disabled], .btn:disabled {
  opacity: .55; cursor: not-allowed; transform: none !important;
}
.btn:focus-visible {
  outline: 2px solid var(--cc-primary);
  outline-offset: 2px;
}

/* --- Cards: align base .card with design tokens --- */
.card {
  border-radius: var(--cc-radius-lg);
  transition: box-shadow var(--cc-trans-fast), transform var(--cc-trans-fast);
}
.card:hover:not(.skeleton-card) {
  box-shadow: var(--cc-shadow-md);
}

/* --- Forms: cleaner inputs --- */
input, select, textarea {
  border-radius: var(--cc-radius-md) !important;
  transition: border-color var(--cc-trans-fast), box-shadow var(--cc-trans-fast);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cc-primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
label {
  color: var(--cc-text-muted);
  font-weight: 500;
}

/* --- Modals: stable isolated layer --- */
.modal-overlay, .modal-backdrop {
  background: rgba(15,23,42,.62) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overscroll-behavior: contain;
  isolation: isolate;
}
.modal {
  border-radius: var(--cc-radius-xl);
  box-shadow: var(--cc-shadow-lg);
  background: #fff !important;
  opacity: 1 !important;
  pointer-events: auto;
  touch-action: pan-y;
}
.modal-header {
  border-bottom: 1px solid var(--cc-border);
  padding-bottom: var(--cc-space-2);
}
.modal-header h3 {
  color: var(--cc-text);
  letter-spacing: -0.01em;
}
.modal-body {
  scrollbar-width: thin;
}
.modal-body label {
  display: block;
  margin: 0 0 6px;
}
.modal-body input + label,
.modal-body select + label,
.modal-body textarea + label {
  margin-top: var(--cc-space-3);
}
#appointmentModal .modal,
#addCustomerModal .modal,
#startTreatmentModal .modal,
#paymentMethodModal .modal,
#cashPaymentModal .modal,
#creditPaymentModal .modal {
  overflow: hidden;
}
#appointmentModal .modal-footer,
#addCustomerModal .modal-footer,
#paymentMethodModal .modal-footer,
#cashPaymentModal .modal-footer,
#creditPaymentModal .modal-footer {
  background: var(--cc-surface-2);
}
#appointmentModal input,
#appointmentModal select,
#appointmentModal textarea,
#addCustomerModal input,
#startTreatmentModal input {
  min-height: 44px;
}
@media (max-width: 640px) {
  .modal-backdrop.show,
  .modal-overlay.show {
    align-items: flex-end;
  }
  .modal-backdrop.show > .modal,
  .modal-overlay.show > .modal {
    width: 100%;
    max-width: 100%;
    max-height: min(88vh, 760px);
    margin: 0;
    border-radius: 22px 22px 0 0;
  }
  .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--cc-surface);
  }
  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }
  #paymentMethodModal.show > .modal,
  #paymentMethodModal.show > .modal,
  #cashPaymentModal.show > .modal,
  #zcreditPaymentModal.show > .modal,
  #checkPaymentModal.show > .modal,
  #creditNoteModal.show > .modal {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
  }
  #paymentMethodModal .modal-body,
  #paymentMethodModal .modal-body,
  #cashPaymentModal .modal-body,
  #zcreditPaymentModal .modal-body,
  #checkPaymentModal .modal-body,
  #creditNoteModal .modal-body {
    flex: 1;
  }
}

/* --- Calendar blocks: cleaner, modern colors --- */
.appt-block, .appointment-block {
  border-radius: var(--cc-radius-md) !important;
  transition: transform var(--cc-trans-fast), box-shadow var(--cc-trans-fast), filter var(--cc-trans-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.appt-block:hover, .appointment-block:hover {
  transform: translateY(-1px);
  box-shadow: var(--cc-shadow-md);
  filter: brightness(1.03);
}
.appt-block:active, .appointment-block:active {
  transform: translateY(0);
}

/* --- Week-header "today" emphasis --- */
.week-header.today {
  background: var(--cc-primary-light) !important;
  color: var(--cc-primary-dark) !important;
  font-weight: 700;
}

/* --- Top bar: clear edge alignment --- */
.appbar {
  gap: 22px !important;
}
.appbar > .icon-circle {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
}
.brand {
  gap: 14px !important;
}
.brand .logo {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
}
#topStatus {
  color: var(--cc-text-muted);
  font-weight: 500;
}
.top-status-action {
  border-radius: var(--cc-radius-full);
  font-weight: 600;
}

/* --- Customer screen enhancements --- */
.cc-customer-header {
  background: var(--cc-gradient-primary);
  color: #fff;
  border-radius: var(--cc-radius-xl);
  padding: var(--cc-space-4) var(--cc-space-3);
  margin-bottom: var(--cc-space-3);
  box-shadow: var(--cc-shadow-md);
}
.cc-customer-header .name {
  font-size: 20px; font-weight: 800; margin: 0;
}
.cc-customer-header .meta {
  font-size: 13px; opacity: .92; margin-top: 4px;
}
.cc-stat-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--cc-space-2);
  margin-top: var(--cc-space-3);
}
.cc-stat-row .cc-stat {
  background: rgba(255,255,255,.14);
  border-radius: var(--cc-radius-md);
  padding: 10px;
  text-align: center;
}
.cc-stat .num { font-size: 18px; font-weight: 800; }
.cc-stat .lbl { font-size: 11px; opacity: .9; }

/* --- Section headers throughout app --- */
h2.cc-h, h3.cc-h, .cc-section-title {
  color: var(--cc-text);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: var(--cc-space-3) 0 var(--cc-space-2);
  display: flex; align-items: center; gap: 6px;
}

/* --- Lists: consistent spacing --- */
.list-container > .card + .card,
#customerList > .card + .card,
#appointmentList > .card + .card,
#receiptsList > .card + .card {
  margin-top: var(--cc-space-2);
}

/* --- Accessibility: reduced-motion respects --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Dashboard cleanup: keep the smart summary dominant, and make older tiles a compact action area. */
.cc-dashboard-actions-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 8px;
}
.cc-dashboard-actions-title h3 { margin: 0; font-size: 15px; }
.cc-dashboard-actions-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.cc-brief-action {
  appearance: none;
  width: 100%;
  text-align: right;
  cursor: pointer;
  font-family: inherit;
}
.cc-brief-action:hover {
  transform: translateY(-1px);
  border-color: rgba(79, 70, 229, .28);
}
#dashboard #dashboardTiles.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#dashboard #dashboardTiles .tile {
  min-height: 86px;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  border: 1px solid rgba(15, 23, 42, .08);
}
#dashboard #dashboardTiles .tile .icon { font-size: 20px; margin-bottom: 5px; }
#dashboard #dashboardTiles .tile h3 { font-size: 14px; margin: 0 0 2px; }
#dashboard #dashboardTiles .tile p { font-size: 11px; line-height: 1.25; margin: 0; }

/* Payment flow */
.cc-payment-modal { max-width: 460px; }
.cc-payment-total {
  background: #101827;
  color: #fff;
  padding: 18px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.cc-payment-total div { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.cc-payment-total span { font-size: 12px; opacity: .75; }
.cc-payment-total strong { font-size: 34px; line-height: 1; }
.cc-payment-total small { display: block; margin-top: 8px; font-size: 11px; opacity: .7; }
.cc-payment-total-light { background: #f8fafc; color: #0f172a; border: 1px solid rgba(15, 23, 42, .08); }
.cc-payment-bottom-footer {
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  background: #fff !important;
  display: grid !important;
  gap: 8px;
}
.cc-payment-bottom-total {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: #101827;
  color: #fff;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  align-items: center;
  text-align: right;
  cursor: pointer;
}
.cc-payment-bottom-total span,
.cc-payment-bottom-total small {
  color: rgba(255,255,255,.72);
  font-size: 12px;
}
.cc-payment-bottom-total strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 28px;
  line-height: 1;
}
.cc-payment-choice-sheet {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.cc-payment-panel {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.cc-payment-panel-title { color: #334155; font-size: 12px; font-weight: 800; margin-bottom: 8px; }
.cc-payment-inline-actions, .cc-payment-methods { display: grid; gap: 8px; }
.cc-payment-inline-actions { grid-template-columns: 1fr 1fr; }
.cc-payment-discount-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.cc-payment-discount-row input { min-height: 44px; height: 44px; }
.cc-payment-toggle {
  display: grid;
  grid-template-columns: 42px 42px;
  height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}
.cc-payment-toggle button { border: 0; background: #fff; font-weight: 800; cursor: pointer; height: 44px; }
.cc-payment-discount-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.cc-payment-discount-actions > div { display: flex; gap: 6px; }
.cc-payment-methods { padding-top: 4px; }
.cc-payment-methods .btn {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: right;
  gap: 3px;
  border-radius: 8px;
}
.cc-payment-methods .btn span { font-size: 11px; opacity: .75; font-weight: 500; }
.cc-payment-result { margin-top: 12px; padding: 14px; border-radius: 8px; color: #fff; text-align: center; }
.cc-payment-result span { display: block; font-size: 12px; opacity: .85; }
.cc-payment-result strong { display: block; font-size: 24px; margin-top: 3px; }
.cc-payment-result-ok { background: #047857; }
.cc-payment-result-bad { background: #b91c1c; }
.cc-payment-note {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  margin-top: 12px;
}

/* Thermal receipt preview */
.cc-thermal-preview {
  width: min(100%, 76mm);
  margin: 0 auto;
  padding: 10px 8px;
  background: #fff;
  color: #111;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: "Courier New", monospace;
  font-size: 11.5px;
  line-height: 1.38;
  direction: rtl;
}
.cc-thermal-preview img { max-width: 120px; max-height: 48px; object-fit: contain; }
.cc-thermal-center { text-align: center; }
.cc-thermal-business { font-size: 16px; font-weight: 900; }
.cc-thermal-title { font-size: 16px; font-weight: 900; margin: 6px 0; }
.cc-thermal-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin: 3px 0; }
.cc-thermal-row span,
.cc-thermal-row b {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cc-thermal-line { border-top: 1px dashed #111; margin: 8px 0; }
.cc-thermal-line-strong { border-top-style: solid; border-top-width: 2px; }
.cc-thermal-item { margin: 7px 0; }
.cc-thermal-total { font-size: 17px; font-weight: 900; }
.cc-thermal-alert { margin-top: 8px; padding: 6px; border: 2px solid #111; text-align: center; font-weight: 900; }
.cc-thermal-footer { margin-top: 10px; }
.cc-thermal-small { color: #555; font-size: 10px; margin-top: 12px; }

#receiptViewModal .modal {
  max-width: 390px;
}
#receiptViewBody {
  background: #f8fafc;
}
#packageSelectionModal .modal {
  z-index: 10020;
}
#packageSelectionModal.show,
#productSelectionModal.show {
  z-index: 10080 !important;
}
#packageSelectionModal.show .modal,
#productSelectionModal.show .modal {
  z-index: 10081 !important;
}
#packageSelectionList .btn,
#productSelectionList .btn {
  border-color: #dbe4f0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: #fff !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
#packageSelectionList .btn:focus,
#packageSelectionList .btn:focus-visible,
#packageSelectionList .btn:active,
#productSelectionList .btn:focus,
#productSelectionList .btn:focus-visible,
#productSelectionList .btn:active {
  border-color: var(--cc-primary) !important;
  box-shadow: 0 0 0 2px rgba(79,70,229,.12) !important;
  outline: none !important;
}

#dashboardInfoRow {
  display: none !important;
}

/* --- Final product polish: compact chrome, pricebook tiles, scroll/focus fixes --- */
header {
  padding-top: calc(8px + env(safe-area-inset-top)) !important;
  padding-bottom: 7px !important;
}
.appbar {
  min-height: 42px !important;
  gap: 4px !important;
}
.appbar > .icon-circle {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
}
#headerLogo {
  display: none !important;
}
.brand {
  gap: 0 !important;
}
.brand h1 {
  font-size: 17px !important;
}
main {
  padding-top: calc(76px + env(safe-area-inset-top)) !important;
}
.screen {
  padding-bottom: calc(128px + env(safe-area-inset-bottom)) !important;
  min-height: auto !important;
}
.screen > .card:first-child,
.screen > .cc-dashboard-brief:first-child {
  margin-top: 4px;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(37,99,235,.45) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,.10) !important;
}
.cc-price-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.cc-price-tile {
  position: relative;
  min-height: 128px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  background: var(--tile-bg, #fff);
  color: #0f172a;
  padding: 12px 12px 12px 17px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 5px 16px rgba(15,23,42,.06);
  overflow: hidden;
  cursor: pointer;
}
.cc-price-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--tile-color, #2563eb);
}
.cc-price-tile-color {
  display: none;
}
/* Color picker input in modals */
input.cc-color-input {
  width: 100%;
  height: 44px;
  padding: 4px 6px;
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  cursor: pointer;
  background: none;
}
.cc-price-tile b {
  font-size: 15px;
  line-height: 1.2;
}
.cc-price-tile small {
  color: #64748b;
  font-size: 12px;
}
.cc-price-tile strong {
  margin-top: auto;
  font-size: 19px;
  color: var(--tile-color, #2563eb);
}
.cc-price-tile em,
.cc-price-tile-edit {
  display: inline-flex;
  width: fit-content;
  font-style: normal;
  font-size: 11px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px 8px;
}
.cc-pricebook-category-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.cc-color-input {
  min-height: 42px;
  padding: 4px;
}
.cc-wide-modal {
  max-width: 620px !important;
}
.cc-purchase-section {
  margin-bottom: 16px;
}
.cc-purchase-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
}
#settingsCalendar .card,
#adminPanel .card {
  max-width: 100%;
  overflow-x: hidden;
}
#settingsCalendar .btn-row,
#settingsCalendar [style*="display:grid"],
#adminPanel [style*="display:grid"] {
  max-width: 100%;
}
.week-header,
.month-day-header {
  font-size: 10px !important;
  line-height: 1.15 !important;
  white-space: nowrap;
  padding-inline: 2px !important;
}
.new-week-grid {
  background: #fff;
}
.week-header {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: normal !important;
  text-align: center;
  overflow: hidden;
}
.week-header-day {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}
.week-header-greg {
  font-size: 10px;
  opacity: .75;
  line-height: 1.1;
}
.week-header-heb {
  font-size: 9px;
  opacity: .68;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.week-time-label,
.week-time-cell {
  font-size: 11px !important;
  color: #475569;
  background: #f8fafc;
}
@media (max-width: 520px) {
  .cc-price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cc-price-tile {
    min-height: 118px;
    padding: 10px 10px 10px 15px;
  }
}
.cc-add-brief-card {
  border-style: dashed;
  color: var(--cc-primary);
  background: #f8faff;
  cursor: pointer;
}
.cc-dashboard-brief {
  grid-auto-rows: 112px;
  align-items: stretch;
}
.cc-dashboard-brief .cc-arrange-wrap,
.cc-dashboard-brief .cc-brief-card {
  min-height: 0;
  height: 100%;
}
.cc-dashboard-brief .cc-brief-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-add-tile-list {
  display: grid;
  gap: 10px;
}
.cc-add-tile-option {
  width: 100%;
  text-align: right;
  cursor: pointer;
  border: 1px solid var(--cc-border);
  box-shadow: none;
}
.cc-add-tile-option span {
  display: block;
  margin-top: 4px;
  color: var(--cc-text-muted);
  font-size: 12px;
}

.cc-receipt-rules {
  display: grid;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-right: 4px solid #0f766e;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0 12px;
  color: #334155;
  font-size: 12px;
}

.cc-receipt-rules b {
  color: #0f172a;
  font-size: 13px;
}

/* Calendar visual refresh, logic remains in app-calendar-views.js. */
.cc-calendar-hero {
  background: transparent;
  color: var(--cc-text);
  border-radius: 0;
  padding: 0;
  margin-bottom: 10px;
}

.cc-calendar-hero .sub {
  color: var(--cc-text-muted);
}

.cc-calendar-hero .icon-circle {
  background: var(--cc-surface);
  color: var(--cc-text);
  border: 1px solid var(--cc-border);
}

.cc-calendar-statusbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 2px 12px;
  margin-bottom: 2px;
}

.cc-calendar-statusbar span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 11px;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 10px;
}

.cc-calendar-statusbar b {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: #4f46e5;
}

.cc-calendar-statusbar .is-phone { background: #0891b2; }
.cc-calendar-statusbar .is-blocked { background: #475569; }
.cc-calendar-statusbar .is-cancelled { background: #991b1b; }

.cc-calendar-viewbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 2px 0 10px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 6px;
}

.cc-calendar-viewbar .btn {
  border-radius: 7px !important;
  min-height: 38px;
}

#calendar .section-title { align-items: flex-start; }
#calendar .card {
  border-radius: 8px;
  box-shadow: none;
  border: 1px solid rgba(15, 23, 42, .08);
}
.new-day-grid, .new-week-grid, .new-month-grid {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.day-time-label, .week-time-label {
  color: #64748b;
  background: #f8fafc;
  border-color: #e2e8f0 !important;
}
.day-time-cell, .week-time-cell {
  background: #fff;
  border-color: #e2e8f0 !important;
}
.cal-appointment-block {
  border-radius: 8px !important;
  padding: 7px 8px !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .14) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  overflow: hidden;
}
.cal-appointment-block.blocked,
.cal-appointment-block.day-closed {
  background: repeating-linear-gradient(135deg, #475569 0 8px, #334155 8px 16px) !important;
}
.cal-appointment-block.phone-cancelled {
  background: #991b1b !important;
  opacity: .82;
}
.cal-day-closed-overlay,
.cal-week-day-closed {
  border-radius: 8px;
  background: rgba(15, 23, 42, .82) !important;
  backdrop-filter: blur(1px);
}
.month-day-cell {
  border-radius: 8px;
  border-color: #e2e8f0 !important;
  background: #fff;
}
.month-day-cell.month-status-closed {
  background: #f1f5f9 !important;
  border-color: #64748b !important;
}
.month-day-cell.month-status-urgent {
  background: #fff7ed !important;
  border-color: #fb923c !important;
}
/* System check */
.cc-system-list {
  display: grid;
  gap: 10px;
}
.cc-system-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}
.cc-system-row b {
  display: block;
  font-size: 14px;
  color: #111827;
}
.cc-system-row span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #6b7280;
}
.cc-system-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.cc-system-row.ok .cc-system-icon {
  background: #dcfce7;
  color: #166534;
}
.cc-system-row.bad .cc-system-icon {
  background: #fee2e2;
  color: #991b1b;
}

/* Scroll/focus safety for modal and side menus */
.modal-backdrop.show,
.modal.show {
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.modal .modal-body {
  max-height: calc(100dvh - 168px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#topBarMenu {
  max-height: min(72dvh, 520px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.top-menu-open {
  overflow: hidden;
  overscroll-behavior: contain;
}
#profileModal label,
#settingsScreen label,
#adminScreen label {
  text-align: right;
}
.cc-purchase-group {
  margin-top: 10px;
}
.cc-purchase-group h5 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 13px;
  color: #334155;
}
.cc-purchase-group h5 span {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
}

/* Z-Credit payment flow */
.cc-payment-flow-modal {
  max-width: 460px;
}
.cc-payment-status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
  margin-bottom: 12px;
}
.cc-payment-status-card b,
.cc-payment-status-card span {
  display: block;
}
.cc-payment-status-card span {
  color: #64748b;
  font-size: 13px;
  margin-top: 3px;
}
.cc-payment-status-card.ok {
  background: #ecfdf5;
  border-color: #86efac;
}
.cc-payment-status-card.bad {
  background: #fef2f2;
  border-color: #fecaca;
}
.cc-payment-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #dbeafe;
  border-top-color: #2563eb;
  border-radius: 999px;
  animation: cc-spin .85s linear infinite;
  display: none;
}
@keyframes cc-spin {
  to { transform: rotate(360deg); }
}
.cc-payment-flow-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 12px;
}
.cc-payment-flow-summary strong {
  font-size: 22px;
  color: #2563eb;
}
.cc-terminal-amount {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cc-terminal-amount span {
  color: #64748b;
  font-size: 13px;
}
.cc-terminal-amount strong {
  color: #0f172a;
  font-size: 32px;
}
.cc-terminal-instruction {
  display: grid;
  gap: 10px;
}
.cc-terminal-card {
  border: 2px solid #2563eb;
  border-radius: 14px;
  background: #eff6ff;
  color: #0f172a;
  min-height: 132px;
  padding: 18px;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
}
.cc-terminal-card b {
  font-size: 19px;
}
.cc-terminal-card span {
  color: #475569;
  font-size: 13px;
}
.cc-payment-flow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cc-payment-flow-grid .btn {
  min-height: 74px;
  align-items: flex-start;
  text-align: right;
}
.cc-payment-flow-grid .btn span {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 5px;
}
.cc-payment-approved {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #166534;
  font-weight: 800;
  text-align: center;
}
.cc-payment-approved small {
  display: block;
  margin-top: 4px;
  font-weight: 600;
}

/* Terminal settings */
.cc-terminal-settings-card {
  padding: 14px;
}
.cc-terminal-note {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1e3a8a;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 12px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-grid .full {
  grid-column: 1 / -1;
}
.form-grid label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: #475569;
  font-weight: 700;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
}
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  #paymentMethodModal.show .modal-body,
  #paymentMethodModal.show .modal-body,
  #cashPaymentModal.show .modal-body,
  #zcreditPaymentModal.show .modal-body,
  #checkPaymentModal.show .modal-body,
  #creditNoteModal.show .modal-body {
    max-height: none !important;
    flex: 1 1 auto;
  }
}

/* Clinic UI refresh 2026: CSS-only visual layer.
   This block intentionally avoids changing data flow, sync, schema, or markup. */
html {
  background: #eef3f8;
}

body {
  color: var(--cc-text);
  background:
    radial-gradient(circle at 12% -8%, rgba(37, 99, 235, .13), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, var(--cc-bg) 42%, #eef3f8 100%);
  font-family: "Heebo", "Rubik", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 132px;
  background: linear-gradient(135deg, rgba(30, 58, 138, .08), rgba(15, 118, 110, .07));
  pointer-events: none;
  z-index: -1;
}

.appbar {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(148, 163, 184, .2);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .09);
  backdrop-filter: blur(18px);
}

.appbar,
.appbar * {
  pointer-events: auto;
}

.appbar .brand {
  pointer-events: none;
}

.appbar svg,
.appbar svg *,
.icon-circle svg,
.icon-circle svg *,
.cc-fab svg,
.cc-fab svg *,
.cc-search-fab svg,
.cc-search-fab svg *,
.topbar-menu-icon svg,
.topbar-menu-icon svg * {
  pointer-events: none;
}

header {
  background: rgba(248, 251, 255, .88) !important;
  border-bottom: 1px solid rgba(203, 213, 225, .64) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
}

#headerLogo {
  display: none !important;
}

.top-status-row {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.appbar h1,
.brand,
.brand-title {
  color: var(--cc-text);
  font-weight: 900;
  letter-spacing: 0;
}

.appbar small,
.brand-subtitle,
.muted {
  color: var(--cc-muted) !important;
}

.icon-circle,
.logo,
.brand-logo {
  background: var(--cc-grad-primary) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .26);
}

.screen {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.section-title {
  color: var(--cc-text);
  margin-bottom: 14px;
}

.section-title h2,
.section-title h3,
.screen > h2,
.screen > h3 {
  color: var(--cc-text);
  font-weight: 900;
  letter-spacing: 0;
}

.card,
.tile,
.settings-item,
.lock-card,
.loading-card {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(203, 213, 225, .72) !important;
  border-radius: var(--cc-radius-lg) !important;
  box-shadow: var(--cc-shadow-sm);
}

.card:hover,
.tile:hover,
.settings-item:hover {
  border-color: rgba(37, 99, 235, .24) !important;
  box-shadow: var(--cc-shadow-md);
}

.tile {
  min-height: 104px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tile:active,
.btn:active,
.cc-bottom-nav button:active {
  transform: translateY(1px) scale(.99);
}

.btn,
button.btn {
  border: 1px solid transparent;
  border-radius: 12px !important;
  min-height: 44px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.btn:hover {
  box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
}

.btn:focus-visible,
button:focus-visible,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: var(--cc-shadow-glow) !important;
  border-color: var(--cc-primary) !important;
}

.btn.primary,
.btn:not(.ghost):not(.danger):not(.success):not(.warning):not(.purple) {
  background: var(--cc-grad-primary) !important;
  color: #fff !important;
  border-color: rgba(37, 99, 235, .22) !important;
}

.btn.ghost {
  background: #fff !important;
  color: #1e3a8a !important;
  border-color: rgba(148, 163, 184, .45) !important;
}

.btn.success,
.tile.green {
  background: var(--cc-grad-success) !important;
  color: #fff !important;
  border-color: rgba(15, 118, 110, .28) !important;
}

.btn.warning {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important;
  color: #fff !important;
}

.btn.danger,
.tile.red {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
  color: #fff !important;
}

.btn.purple {
  background: linear-gradient(135deg, #334155 0%, #2563eb 100%) !important;
  color: #fff !important;
}

input,
select,
textarea {
  background: #fff !important;
  border: 1px solid rgba(148, 163, 184, .58) !important;
  border-radius: 12px !important;
  color: var(--cc-text);
  min-height: 42px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

textarea {
  min-height: 88px;
}

label,
.form-grid label {
  color: #334155;
  font-weight: 800;
}

.modal-backdrop,
.modal-overlay {
  background: rgba(15, 23, 42, .42) !important;
  backdrop-filter: blur(8px);
}

.modal {
  background: #fff !important;
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 18px !important;
  box-shadow: 0 30px 70px rgba(15, 23, 42, .28);
}

.modal-header {
  border-bottom: 1px solid rgba(226, 232, 240, .92) !important;
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.modal-header h3,
.modal-header h2 {
  color: var(--cc-text);
  font-weight: 900;
}

.modal-body {
  color: var(--cc-text);
}

.modal-footer {
  border-top: 1px solid rgba(226, 232, 240, .92) !important;
  background: #f8fafc;
}

.cc-bottom-nav {
  right: max(12px, env(safe-area-inset-right, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  width: auto;
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
  backdrop-filter: blur(18px);
}

.cc-bottom-nav button {
  color: #64748b;
  border-radius: 14px;
  min-height: 56px;
}

.cc-bottom-nav button.active,
.cc-bottom-nav button[aria-current="page"] {
  background: #eff6ff;
  color: #1d4ed8;
}

.cc-bottom-nav button.active .cc-bottom-icon,
.cc-bottom-nav button[aria-current="page"] .cc-bottom-icon {
  color: #0f766e;
}

.cc-svg-icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}

.cc-icon-upgraded {
  font-size: 0 !important;
  line-height: 0;
}

.icon-circle.cc-icon-upgraded,
.cc-bottom-icon.cc-icon-upgraded,
.tile .icon.cc-icon-upgraded,
.topbar-menu-icon.cc-icon-upgraded {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.icon-circle .cc-svg-icon {
  width: 18px;
  height: 18px;
}

.tile .icon {
  color: #1d4ed8;
}

.tile.green .icon,
.tile.red .icon {
  color: currentColor;
}

.tile .icon .cc-svg-icon {
  width: 28px;
  height: 28px;
  stroke-width: 1.9;
}

.cc-bottom-icon .cc-svg-icon {
  width: 21px;
  height: 21px;
  stroke-width: 2.2;
}

.topbar-menu-icon .cc-svg-icon {
  width: 19px;
  height: 19px;
  stroke-width: 2.15;
}

.cc-has-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.cc-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.cc-btn-icon .cc-svg-icon {
  width: 16px;
  height: 16px;
}

.cc-fab,
.cc-search-fab {
  background: var(--cc-grad-primary) !important;
  box-shadow: 0 18px 38px rgba(37, 99, 235, .28);
  color: #fff !important;
}

.cc-fab *,
.cc-search-fab * {
  color: #fff !important;
  stroke: currentColor;
}

.cc-search-fab .cc-svg-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.35;
}

.customer-card,
.customer-row,
.appointment-list-item,
.receipt-row,
.history-item {
  background: #fff;
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.cc-customer-overview {
  gap: 12px;
}

.cc-customer-detail-card,
.cc-customer-stats,
.cc-customer-commandbar {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 16px;
  box-shadow: var(--cc-shadow-sm);
}

.cc-section-h h3 {
  color: var(--cc-text);
  font-weight: 900;
}

.cc-link-btn {
  color: #1d4ed8 !important;
  font-weight: 800;
}

.cc-calendar-hero {
  background: linear-gradient(135deg, rgba(30, 58, 138, .08), rgba(15, 118, 110, .08));
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  padding: 14px;
}

.cc-calendar-viewbar {
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 16px;
  padding: 8px;
  box-shadow: var(--cc-shadow-sm);
}

.calendar-scroll-container {
  border-radius: 14px;
  background: #f8fafc;
}

.time-slot,
.cal-time-slot,
.day-slot {
  border-color: rgba(226, 232, 240, .94) !important;
}

.appointment-block,
.cal-appointment,
.appt-block {
  border-radius: 10px !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .16);
  border: 1px solid rgba(37, 99, 235, .22) !important;
}

.appointment-block.blocked,
.cal-appointment.blocked,
.appt-block.blocked {
  background: repeating-linear-gradient(135deg, #f1f5f9, #f1f5f9 8px, #e2e8f0 8px, #e2e8f0 16px) !important;
  color: #475569 !important;
  border-color: rgba(100, 116, 139, .28) !important;
}

.appointment-block.phone,
.cal-appointment.phone,
.appt-block.phone {
  background: linear-gradient(135deg, #ecfeff, #dbeafe) !important;
  color: #0f172a !important;
  border-color: rgba(8, 145, 178, .32) !important;
}

.month-day,
.calendar-day,
.cal-month-day {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, .9) !important;
  border-radius: 12px;
}

.month-day.today,
.calendar-day.today,
.cal-month-day.today {
  border-color: rgba(37, 99, 235, .55) !important;
  background: #eff6ff;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  color: #334155;
  font-weight: 900;
  background: #f8fafc;
}

td,
th {
  border-color: rgba(226, 232, 240, .9) !important;
}

@media (max-width: 640px) {
  body {
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f8 100%);
  }

  .appbar {
    border-radius: 0 0 18px 18px;
  }

  .screen {
    padding-inline: 12px;
  }

  .card,
  .tile,
  .modal {
    border-radius: 14px !important;
  }

  .btn,
  button.btn,
  input,
  select {
    min-height: 48px;
  }

  .modal {
    width: min(100% - 18px, 560px);
  }

  .cc-bottom-nav {
    gap: 4px;
    padding: 6px;
  }

  .cc-bottom-nav button {
    min-height: 58px;
    font-size: 11px;
  }
}

/* Top chrome refinement: soft background, floating rounded header, reliable icon taps. */
body {
  background:
    linear-gradient(160deg, rgba(219, 234, 254, .72) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(24deg, rgba(204, 251, 241, .5) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, #fbfdff 0%, #f4f7fb 48%, #eef4f8 100%) !important;
}

body::before {
  display: none;
}

header {
  padding: calc(8px + env(safe-area-inset-top)) 12px 7px !important;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.appbar {
  min-height: 46px !important;
  max-width: min(920px, calc(100vw - 24px));
  margin: 0 auto !important;
  padding: 5px 7px !important;
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid rgba(203, 213, 225, .55) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .09) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.appbar > .icon-circle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 13px !important;
  z-index: 5 !important;
}

.appbar .brand,
.appbar .brand * {
  pointer-events: none !important;
}

.appbar > .icon-circle,
.appbar > .icon-circle *,
#topMenuButton,
#topBackButton {
  pointer-events: auto;
}

.appbar > .icon-circle svg,
.appbar > .icon-circle svg * {
  pointer-events: none !important;
}

main {
  padding-top: calc(76px + env(safe-area-inset-top)) !important;
}

@media (max-width: 640px) {
  header {
    padding-inline: 10px !important;
  }

  .appbar {
    max-width: calc(100vw - 20px);
    border-radius: 16px !important;
  }
}

/* Android/WebView guard: keep primary navigation visible after login. */
body.app-authenticated #bottomNav {
  display: grid !important;
  position: fixed !important;
  z-index: 10040 !important;
  right: 0 !important;
  left: 0 !important;
  bottom: env(safe-area-inset-bottom, 0px) !important;
  width: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

body.app-authenticated.keyboard-open #bottomNav {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Polish pass: align bottom navigation with the top chrome and remove leftover legacy frames. */
body.app-authenticated #bottomNav,
.cc-bottom-nav {
  width: calc(100vw - 24px) !important;
  max-width: calc(100vw - 24px) !important;
  right: 0 !important;
  left: 0 !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

@media (max-width: 640px) {
  body.app-authenticated #bottomNav,
  .cc-bottom-nav {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}

#customer .cc-customer-overview {
  gap: 14px;
}

#customer .cc-customer-stats,
#customer .cc-customer-commandbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#customer .cc-customer-detail-card {
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid rgba(203, 213, 225, .72) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06) !important;
  border-radius: 16px !important;
  padding: 12px !important;
}

#customer .cc-customer-stat {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(203, 213, 225, .68) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}

#paymentMethodModal .cc-payment-modal,
#cashPaymentModal .cc-payment-modal,
.cc-payment-flow-modal {
  background: #fff !important;
}

#paymentMethodModal .cc-payment-panel,
#paymentMethodModal #cartItemsList,
#paymentMethodModal .cc-payment-choice-sheet {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#paymentMethodModal .cc-payment-panel + .cc-payment-panel,
#paymentMethodModal #cartItemsList + .cc-payment-panel {
  margin-top: 14px;
}

#paymentMethodModal .cc-payment-panel-title {
  color: #334155;
  font-size: 12px;
  margin-bottom: 8px;
}

#paymentMethodModal .cc-payment-inline-actions {
  grid-template-columns: 1fr 1fr;
}

#paymentMethodModal .cc-payment-discount {
  background: rgba(248, 250, 252, .72) !important;
  border: 1px solid rgba(203, 213, 225, .72) !important;
  border-radius: 12px !important;
  padding: 10px !important;
}

#paymentMethodModal .cc-payment-methods {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

#paymentMethodModal .cc-payment-methods .btn {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 54px;
  border-radius: 12px !important;
  box-shadow: none;
}

#paymentMethodModal .cc-payment-inline-actions .btn,
#paymentMethodModal .cc-payment-methods .btn {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid rgba(203, 213, 225, .82) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .05) !important;
}

#paymentMethodModal .cc-payment-inline-actions .btn:active,
#paymentMethodModal .cc-payment-methods .btn:active {
  transform: translateY(1px) !important;
}

#paymentMethodModal .cc-payment-methods .btn span {
  color: #64748b !important;
  opacity: 1 !important;
}

#paymentMethodModal .cc-payment-bottom-footer {
  background: #fff !important;
  border-top: 1px solid rgba(226, 232, 240, .9) !important;
}

#paymentMethodModal .cc-payment-bottom-total {
  background: linear-gradient(180deg, #fff, #f8fafc) !important;
  color: #0f172a !important;
  border: 1px solid rgba(203, 213, 225, .82) !important;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

#paymentMethodModal .cc-payment-bottom-total span,
#paymentMethodModal .cc-payment-bottom-total small {
  color: #64748b !important;
  opacity: 1 !important;
}

#paymentMethodModal .cc-payment-bottom-total strong {
  color: #2563eb !important;
}

#cashPaymentModal .cc-payment-total,
.cc-terminal-amount {
  background: linear-gradient(135deg, #f8fafc, #eef6ff) !important;
  color: #0f172a !important;
  border: 1px solid rgba(203, 213, 225, .72);
  box-shadow: none;
}

#endTreatmentModal .modal {
  overflow: hidden;
}

#endTreatmentModal .modal-body {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

#endTreatmentModal .cc-end-treatment-summary {
  background: linear-gradient(135deg, #2563eb 0%, #14b8a6 100%) !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .18);
}

#endTreatmentModal .cc-end-treatment-actions {
  position: static !important;
  display: flex;
  flex-direction: column;
  gap: 10px !important;
}

#endTreatmentModal .cc-end-treatment-actions .btn {
  position: static !important;
  width: 100%;
  min-height: 52px;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
  margin: 0 !important;
}

#endTreatmentModal .cc-end-treatment-actions .btn:not(.primary):not(.ghost) {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid rgba(203, 213, 225, .82) !important;
}

#endTreatmentModal .cc-end-treatment-actions .btn.ghost {
  background: #f8fafc !important;
}

body.cc-pay-open {
  overflow: hidden;
}

.cc-pay-screen {
  position: fixed;
  top: var(--cc-topbar-offset);
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(100dvh - var(--cc-topbar-offset));
  z-index: var(--z-payment);
  direction: rtl;
  background: rgba(15, 23, 42, .34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

body.is-webview .cc-pay-screen,
body.is-android .cc-pay-screen {
  top: var(--cc-topbar-offset) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc(var(--app-height) - var(--cc-topbar-offset)) !important;
  min-height: -webkit-fill-available;
  padding: 0 !important;
  background: var(--cc-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  align-items: stretch !important;
  z-index: var(--z-payment) !important;
}

#zcreditPaymentModal.modal-backdrop,
#pendingPaymentRecoveryModal.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--z-credit) !important;
  pointer-events: auto;
}

#zcreditPaymentModal.show > .modal,
#pendingPaymentRecoveryModal.show > .modal {
  position: relative;
  z-index: calc(var(--z-credit) + 1) !important;
}

.cc-pay-screen.hidden,
.cc-credit-modal.hidden,
.cc-pay-stage.hidden,
.cc-pay-catalog.hidden,
.cc-pay-amount-panel.hidden,
.cc-credit-manual.hidden,
.cc-pay-success.hidden,
.cc-pay-main.hidden {
  display: none !important;
}

.cc-pay-shell {
  width: min(920px, calc(100vw - 24px));
  height: min(820px, calc(100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  background: #f8fafc;
  color: #0f172a;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
  animation: ccPayIn .18s ease-out;
}

body.is-webview .cc-pay-shell,
body.is-android .cc-pay-shell {
  width: 100% !important;
  height: calc(var(--app-height) - var(--cc-topbar-offset) - min(var(--app-keyboard-inset), 180px)) !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

body.is-webview .cc-pay-header,
body.is-android .cc-pay-header {
  display: none !important;
}

body.is-webview .cc-pay-main,
body.is-android .cc-pay-main {
  padding-top: 14px !important;
}

@keyframes ccPayIn {
  from { transform: translateY(14px); opacity: .8; }
  to { transform: translateY(0); opacity: 1; }
}

.cc-pay-header,
.cc-pay-summary-bar {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(203, 213, 225, .78);
  padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.cc-pay-header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
}

.cc-pay-header p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 13px;
}

.cc-pay-icon-btn,
.cc-pay-line button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-size: 22px;
  display: grid;
  place-items: center;
}

.cc-pay-main {
  min-height: 0;
  overflow: auto;
  padding: 16px 18px 132px;
}

.cc-pay-customer-card {
  background: #fff;
  border: 1px solid rgba(203, 213, 225, .82);
  border-radius: 16px;
  padding: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.cc-pay-avatar {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 21px;
}

.cc-pay-customer-main {
  min-width: 0;
}

.cc-pay-customer-name-btn {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-pay-customer-name-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .22);
  outline-offset: 3px;
  border-radius: 8px;
}

.cc-pay-customer-main strong,
.cc-pay-product-card b,
.cc-pay-line b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-pay-customer-main span,
.cc-pay-line small,
.cc-pay-product-card small,
.cc-pay-product-card span,
.cc-pay-success-grid span,
.cc-pay-method-summary span,
.cc-pay-summary-metrics span {
  color: #64748b;
  font-size: 12px;
}

.cc-pay-customer-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 8px;
}

.cc-pay-customer-stats div,
.cc-pay-method-summary div,
.cc-pay-success-grid div {
  background: #f8fafc;
  border: 1px solid rgba(226, 232, 240, .96);
  border-radius: 12px;
  padding: 10px;
}

.cc-pay-customer-stats span,
.cc-pay-customer-stats b,
.cc-pay-method-summary span,
.cc-pay-method-summary b,
.cc-pay-success-grid span,
.cc-pay-success-grid b {
  display: block;
}

.cc-pay-workspace {
  margin-top: 16px;
}

.cc-pay-customer-picker {
  margin-top: 12px;
  background: #fff;
  border: 1px solid rgba(203, 213, 225, .86);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

.cc-pay-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cc-pay-customer-search {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 12px;
  padding: 0 12px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 16px;
  box-sizing: border-box;
}

.cc-pay-customer-search:focus {
  outline: 3px solid rgba(37, 99, 235, .18);
  border-color: rgba(37, 99, 235, .62);
  background: #fff;
}

.cc-pay-customer-results {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-top: 10px;
  -webkit-overflow-scrolling: touch;
}

.cc-pay-customer-results button {
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  text-align: right;
}

.cc-pay-customer-results button b,
.cc-pay-customer-results button span {
  display: block;
}

.cc-pay-customer-results button span {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
}

.cc-pay-customer-results button.is-selected {
  border-color: rgba(37, 99, 235, .72);
  background: #eff6ff;
}

.cc-pay-toolbar,
.cc-pay-action-row,
.cc-pay-summary-actions,
.cc-pay-discount-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.cc-pay-add-btn,
.cc-pay-ghost-btn,
.cc-pay-method-grid button,
.cc-pay-product-card,
.cc-pay-category-row button {
  border: 1px solid rgba(203, 213, 225, .88);
  border-radius: 14px;
  min-height: 52px;
  padding: 12px 16px;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.cc-pay-add-btn:disabled,
.cc-pay-ghost-btn:disabled,
.cc-pay-method-grid button:disabled,
.cc-pay-product-card:disabled,
.cc-pay-category-row button:disabled {
  opacity: .52;
  cursor: not-allowed;
  transform: none !important;
}

.cc-pay-add-btn:focus-visible,
.cc-pay-ghost-btn:focus-visible,
.cc-pay-icon-btn:focus-visible,
.cc-pay-line button:focus-visible,
.cc-pay-method-grid button:focus-visible,
.cc-pay-product-card:focus-visible,
.cc-pay-category-row button:focus-visible,
.cc-credit-methods button:focus-visible,
.cc-credit-manual input:focus-visible,
.cc-pay-discount-controls input:focus-visible,
.cc-pay-amount-panel input:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .34);
  outline-offset: 2px;
}

.cc-pay-add-btn {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .16);
}

.cc-pay-ghost-btn,
.cc-pay-category-row button,
.cc-pay-method-grid button,
.cc-pay-product-card {
  background: #fff;
  color: #0f172a;
}

.cc-pay-add-btn:active,
.cc-pay-ghost-btn:active,
.cc-pay-method-grid button:active,
.cc-pay-product-card:active,
.cc-pay-category-row button:active {
  transform: translateY(1px);
}

.cc-pay-catalog,
.cc-pay-discount-box,
.cc-pay-cart-list,
.cc-pay-method-summary,
.cc-pay-amount-panel,
.cc-pay-payments-list {
  margin-top: 14px;
}

.cc-pay-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cc-pay-picker-head b,
.cc-pay-discount-controls > b {
  font-size: 15px;
  color: #0f172a;
}

.cc-pay-category-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.cc-pay-category-row button {
  min-height: 58px;
  padding: 10px;
  border-inline-start: 5px solid var(--cat, #2563eb);
}

.cc-pay-category-row button.active,
.cc-pay-segment button.active {
  border-color: #0f172a;
  background: #e2e8f0;
}

.cc-pay-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
}

.cc-pay-product-card {
  position: relative;
  text-align: right;
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: 7px;
  overflow: hidden;
}

.cc-pay-product-card:before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--cat, #2563eb);
}

.cc-pay-product-card strong {
  color: var(--cat, #2563eb);
  font-size: 20px;
}

.cc-pay-product-card em {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  font-style: normal;
  font-size: 11px;
  color: #075985;
  background: #e0f2fe;
  border-radius: 999px;
  padding: 4px 8px;
}

.cc-pay-discount-box {
  background: #fff;
  border: 1px solid rgba(203, 213, 225, .82);
  border-radius: 16px;
  padding: 12px;
}

.cc-pay-discount-controls {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) minmax(112px, auto) auto auto;
  flex-wrap: nowrap;
}

.cc-pay-field-title {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 8px;
}

.cc-pay-segment {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid rgba(203, 213, 225, .86);
  border-radius: 12px;
  overflow: hidden;
  background: #f8fafc;
}

.cc-pay-segment button {
  border: 0;
  min-width: 58px;
  min-height: 44px;
  background: transparent;
  font-weight: 800;
}

.cc-pay-discount-controls input,
.cc-pay-amount-panel input {
  height: 52px;
  border: 1px solid rgba(203, 213, 225, .86);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 18px;
  min-width: 140px;
  background: #fff;
}

.cc-pay-discount-controls input {
  min-width: 0;
  width: 100%;
}

.cc-pay-cart-list {
  display: grid;
  gap: 10px;
}

.cc-pay-line {
  background: #fff;
  border: 1px solid rgba(203, 213, 225, .82);
  border-radius: 14px;
  padding: 10px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
}

.cc-pay-line-color {
  width: 8px;
  height: 42px;
  border-radius: 999px;
  background: var(--cat, #2563eb);
}

.cc-pay-line strong {
  font-size: 17px;
  color: #0f172a;
}

.cc-pay-line-discount strong {
  color: #dc2626;
}

.cc-pay-method-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cc-pay-method-summary b {
  font-size: 24px;
}

.cc-pay-method-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cc-pay-method-grid button {
  min-height: 112px;
  display: grid;
  align-content: center;
  text-align: right;
  gap: 6px;
}

.cc-pay-method-grid b {
  font-size: 18px;
}

.cc-pay-method-grid span {
  color: #64748b;
  font-size: 12px;
}

.cc-pay-payments-list {
  display: grid;
  gap: 8px;
}

.cc-pay-payments-list div {
  background: #fff;
  border: 1px solid rgba(203, 213, 225, .82);
  border-radius: 12px;
  padding: 11px 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.cc-pay-empty {
  color: #64748b;
  background: rgba(255, 255, 255, .74);
  border: 1px dashed rgba(148, 163, 184, .72);
  border-radius: 14px;
  padding: 16px;
}

.cc-pay-summary-bar {
  position: sticky;
  bottom: 0;
  border-top: 1px solid rgba(203, 213, 225, .84);
  border-bottom: 0;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  justify-content: space-between;
  gap: 12px;
}

.cc-pay-summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  gap: 10px;
  align-items: center;
}

.cc-pay-summary-metrics span {
  display: grid;
  gap: 3px;
  min-width: 96px;
}

.cc-pay-summary-metrics b {
  color: #0f172a;
  font-size: 16px;
}

.cc-pay-success {
  padding: 26px 18px;
  overflow: auto;
  text-align: center;
}

.cc-pay-success-mark {
  width: 72px;
  height: 72px;
  margin: 10px auto;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: #dcfce7;
  color: #15803d;
  font-size: 44px;
  font-weight: 900;
}

.cc-pay-success h2 {
  margin: 8px 0 18px;
}

.cc-pay-success-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  text-align: right;
  margin-bottom: 16px;
}

.cc-pay-success .cc-pay-action-row {
  justify-content: center;
}

.cc-credit-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-credit);
  display: grid;
  place-items: center;
  direction: rtl;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px;
  box-sizing: border-box;
}

.cc-credit-shell {
  width: min(500px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 32px));
  background: #fff;
  box-sizing: border-box;
  border: 1px solid rgba(203, 213, 225, .82);
  border-radius: 22px;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .28);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  animation: ccCreditIn .16s ease-out;
}

@keyframes ccCreditIn {
  from { transform: translateY(12px) scale(.98); opacity: .75; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.cc-credit-header,
.cc-credit-footer {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, .94);
}

.cc-credit-header h3 {
  margin: 0;
  font-size: 20px;
}

.cc-credit-header p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 13px;
}

.cc-credit-body {
  overflow: auto;
  padding: 18px 16px;
  display: grid;
  gap: 14px;
}

.cc-credit-animation {
  position: relative;
  height: 190px;
  border-radius: 20px;
  background: radial-gradient(circle at 24% 24%, #dbeafe 0, transparent 34%), linear-gradient(135deg, #f8fafc, #eef6ff);
  border: 1px solid rgba(203, 213, 225, .82);
  overflow: hidden;
}

.cc-credit-terminal {
  position: absolute;
  left: 34px;
  top: 30px;
  width: 130px;
  height: 142px;
  border-radius: 22px;
  background: #0f172a;
  box-shadow: 0 18px 36px rgba(15, 23, 42, .22);
}

.cc-credit-terminal span {
  position: absolute;
  inset: 18px 18px auto;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e0f2fe, #99f6e4);
}

.cc-credit-terminal i {
  position: absolute;
  right: 22px;
  left: 22px;
  top: 78px;
  height: 10px;
  border-radius: 999px;
  background: #334155;
}

.cc-credit-terminal b {
  position: absolute;
  right: 22px;
  bottom: 20px;
  width: 52px;
  height: 18px;
  border-radius: 999px;
  background: #22c55e;
}

.cc-credit-card {
  position: absolute;
  right: 42px;
  top: 70px;
  width: 138px;
  height: 86px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  box-shadow: 0 18px 36px rgba(37, 99, 235, .28);
  animation: ccCreditTap 1.65s ease-in-out infinite;
}

.cc-credit-card span {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 30px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .72);
}

.cc-credit-card b,
.cc-credit-card i {
  position: absolute;
  right: 18px;
  left: 18px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
}

.cc-credit-card b { bottom: 24px; }
.cc-credit-card i { bottom: 14px; left: 58px; }

.cc-credit-wave {
  position: absolute;
  left: 170px;
  top: 76px;
  width: 54px;
  height: 54px;
  border: 3px solid rgba(37, 99, 235, .28);
  border-radius: 50%;
  opacity: 0;
  animation: ccCreditWave 1.65s ease-out infinite;
}

.cc-credit-wave-two {
  animation-delay: .35s;
}

.cc-credit-mode-insert .cc-credit-card {
  animation-name: ccCreditInsert;
}

.cc-credit-mode-swipe .cc-credit-card {
  animation-name: ccCreditSwipe;
}

.cc-credit-mode-manual .cc-credit-card {
  animation: none;
  transform: translate(-26px, -4px);
}

@keyframes ccCreditTap {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); }
  50% { transform: translate(-34px, -8px) rotate(0deg); }
}

@keyframes ccCreditInsert {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(-78px, 30px) rotate(0deg); }
}

@keyframes ccCreditSwipe {
  0% { transform: translate(38px, 8px) rotate(-6deg); }
  50% { transform: translate(-92px, 8px) rotate(-6deg); }
  100% { transform: translate(38px, 8px) rotate(-6deg); }
}

@keyframes ccCreditWave {
  0% { transform: scale(.62); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

.cc-credit-amount {
  font-size: 42px;
  line-height: 1;
  color: #0f172a;
  text-align: center;
}

.cc-credit-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cc-credit-methods button {
  min-height: 82px;
  border: 1px solid rgba(203, 213, 225, .88);
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  text-align: right;
  padding: 12px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cc-credit-methods b,
.cc-credit-methods span,
.cc-credit-manual label {
  display: block;
}

.cc-credit-methods span,
.cc-credit-manual label {
  color: #64748b;
  font-size: 12px;
  margin-top: 4px;
}

.cc-credit-manual {
  display: grid;
  gap: 10px;
}

.cc-credit-manual input {
  height: 48px;
  border: 1px solid rgba(203, 213, 225, .88);
  border-radius: 12px;
  padding: 0 12px;
  font-size: 16px;
}

.cc-credit-manual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cc-credit-footer {
  border-top: 1px solid rgba(226, 232, 240, .94);
  border-bottom: 0;
}

@media (max-width: 760px) {
  .cc-pay-screen {
    background: rgba(15, 23, 42, .2);
    padding: calc(76px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .cc-pay-shell {
    width: calc(100vw - 20px);
    height: calc(100dvh - 92px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 18px;
  }

  .cc-pay-main {
    padding: 12px 12px 170px;
  }

  .cc-pay-customer-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cc-pay-customer-stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-pay-category-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-pay-grid,
  .cc-pay-method-grid,
  .cc-pay-success-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cc-pay-line {
    grid-template-columns: 7px minmax(0, 1fr) auto;
  }

  .cc-pay-line button {
    width: 38px;
    height: 38px;
  }

  .cc-pay-line button:first-of-type {
    grid-column: 2;
  }

  .cc-pay-summary-bar {
    display: grid;
  }

  .cc-pay-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-pay-summary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cc-pay-summary-actions .cc-pay-add-btn:only-child {
    grid-column: 1 / -1;
  }

  .cc-credit-shell {
    width: calc(100vw - 20px);
  }
}

@media (max-width: 420px) {
  .cc-pay-grid,
  .cc-pay-method-grid,
  .cc-pay-success-grid,
  .cc-credit-methods {
    grid-template-columns: 1fr;
  }

  .cc-pay-toolbar,
  .cc-pay-discount-controls,
  .cc-pay-action-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cc-pay-discount-controls input,
  .cc-pay-amount-panel input {
    width: 100%;
  }
}

@media (max-width: 560px) {
  #packageManager .cc-price-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #packageManager .cc-price-hero .btn {
    width: 100%;
  }

  #packageManager .cc-category-head {
    align-items: center;
    flex-wrap: wrap;
  }

  #packageManager .cc-category-head .btn {
    min-width: 0;
    width: auto;
  }

  #packageManager .cc-minute-price-card {
    flex-direction: column;
    align-items: stretch;
  }

  #packageManager .cc-minute-price-card .btn {
    width: 100%;
  }
}

/* ============================================================
   POS terminal / small-screen payment optimisations
   Targets phones & POS handhelds ≤ 480 px wide.
   Does NOT override desktop or tablet layout.
   ============================================================ */
@media (max-width: 480px) {

  /* --- Modal-based flow: paymentMethodModal / cashPaymentModal / zcreditPaymentModal --- */

  /* Shrink the total amount text so the header stays single-line */
  .cc-payment-total strong { font-size: 28px; }

  /* More compact panels – less wasted white-space */
  .cc-payment-panel { padding: 10px; margin-bottom: 8px; }
  .cc-payment-panel-title { margin-bottom: 6px; }

  /* Status card in zcredit flow: trim vertical padding */
  .cc-payment-status-card { padding: 8px 10px; margin-bottom: 8px; gap: 10px; }
  .cc-payment-status-card span { font-size: 12px; }

  /* Terminal amount row: smaller font so it stays on one line */
  .cc-terminal-amount { padding: 10px 12px; margin-bottom: 8px; }
  .cc-terminal-amount strong { font-size: 26px; }
  .cc-terminal-amount span { font-size: 12px; }

  /* "Tap / Insert / Swipe" big button: shorter, still finger-friendly */
  .cc-terminal-card {
    min-height: 88px;
    padding: 12px 14px;
    border-radius: 12px;
  }
  .cc-terminal-card b { font-size: 16px; }
  .cc-terminal-card span { font-size: 12px; }

  /* Payment-method buttons in the choice sheet */
  .cc-payment-methods .btn { min-height: 62px; padding: 10px 12px; }

  /* Discount input/toggle row: ensure full-width input on narrow screens */
  .cc-payment-discount-row { grid-template-columns: 1fr 88px; }
  .cc-payment-discount-row input { min-height: 48px; height: 48px; font-size: 16px; }
  .cc-payment-toggle { grid-template-columns: 44px 44px; height: 48px; }
  .cc-payment-toggle button { height: 48px; }

  /* --- Cash payment modal: large tap-friendly UI for POS --- */

  /* Amount display: prominent and easy to read */
  #cashPaymentModal .cc-payment-total { padding: 14px; }
  #cashPaymentModal .cc-payment-total strong { font-size: 36px; }
  #cashPaymentModal .cc-payment-total span { font-size: 13px; }

  /* Cash-given input: big digits, centred, easy to read at arm's length */
  #cashGiven {
    min-height: 60px;
    font-size: 24px;
    text-align: center;
    border-radius: 12px;
    letter-spacing: 0.04em;
  }

  /* "שולם בדיוק" button: full width, generous height */
  #cashPaymentModal .btn.ghost.mt {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
    border-radius: 12px;
    margin-top: 8px;
  }

  /* Change / short display: larger font so cashier can read fast */
  .cc-payment-result { padding: 12px; margin-top: 10px; }
  .cc-payment-result strong { font-size: 28px; }
  .cc-payment-result span { font-size: 13px; }

  /* Footer buttons in all payment modals: min 52 px tap target */
  #cashPaymentModal .modal-footer .btn,
  #paymentMethodModal .modal-footer .btn,
  #checkPaymentModal .modal-footer .btn,
  #zcreditPaymentModal .modal-footer .btn {
    min-height: 52px;
    font-size: 15px;
    border-radius: 12px;
  }

  /* Bottom total button in paymentMethodModal footer */
  .cc-payment-bottom-total { padding: 13px 14px; }
  .cc-payment-bottom-total strong { font-size: 24px; }
  .cc-payment-bottom-total span,
  .cc-payment-bottom-total small { font-size: 11px; }

  /* Manual credit-card form: larger inputs for POS keyboard */
  #zcreditManualForm input { min-height: 50px; font-size: 16px; }
  #zcreditManualForm .btn.primary.mt { min-height: 52px; font-size: 16px; }

  /* --- Shrink the credit-card animation to ~115 px tall --- */
  .cc-credit-animation { height: 115px; border-radius: 14px; }

  .cc-credit-terminal {
    left: 20px;
    top: 14px;
    width: 88px;
    height: 92px;
    border-radius: 16px;
  }
  .cc-credit-terminal span {
    inset: 11px 11px auto;
    height: 26px;
    border-radius: 7px;
  }
  .cc-credit-terminal i {
    right: 14px;
    left: 14px;
    top: 50px;
    height: 7px;
  }
  .cc-credit-terminal b {
    right: 14px;
    bottom: 12px;
    width: 34px;
    height: 11px;
  }

  .cc-credit-card {
    right: 26px;
    top: 42px;
    width: 92px;
    height: 56px;
    border-radius: 11px;
  }
  .cc-credit-card span {
    right: 9px;
    top: 9px;
    width: 18px;
    height: 13px;
  }
  .cc-credit-card b { bottom: 14px; }
  .cc-credit-card i { bottom: 8px; left: 36px; }

  .cc-credit-wave {
    left: 110px;
    top: 46px;
    width: 34px;
    height: 34px;
  }

  /* --- New cc-pay-screen components --- */

  /* cc-pay-shell: remove rounded corners so it fills edge-to-edge */
  .cc-pay-shell {
    border-radius: 14px;
  }

  /* Credit amount in zcredit shell: slightly smaller */
  .cc-credit-amount { font-size: 34px; }

  /* cc-credit-methods: stack vertically on very small screens */
  .cc-credit-methods { grid-template-columns: 1fr; }
  .cc-credit-methods button { min-height: 66px; }

  /* cc-pay-method-grid: ensure 2 columns still at 480 (already 2 at 760) */
  .cc-pay-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-pay-method-grid button { min-height: 96px; }
  .cc-pay-method-grid b { font-size: 15px; }

  /* Summary bar: tighter padding */
  .cc-pay-summary-bar {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   Very small POS screens  ≤ 380 px  (Sunmi V1s, etc.)
   ============================================================ */
@media (max-width: 380px) {

  .cc-credit-animation { height: 96px; border-radius: 12px; }

  /* Bigger cash display since vertical space opens up */
  #cashGiven { min-height: 64px; font-size: 28px; }
  #cashPaymentModal .cc-payment-total strong { font-size: 40px; }
  .cc-payment-result strong { font-size: 32px; }

  /* Make payment-method choice buttons fill the full width */
  .cc-payment-methods { grid-template-columns: 1fr; }
  .cc-payment-methods .btn { min-height: 66px; }

  /* Tighter padding in panels so content fits without scrolling */
  .cc-payment-panel { padding: 8px 10px; margin-bottom: 6px; }

  /* cc-pay-method-grid: single column on very small screens */
  .cc-pay-method-grid { grid-template-columns: 1fr; }
  .cc-pay-method-grid button { min-height: 80px; }
}

/* Final local overrides for the current cleanup pass. Kept at EOF so older
   inline-era rules above cannot win accidentally. */
#settingsDisplayEntry {
  display: none !important;
}

body:not(.is-webview):not(.is-android) #dashboard #dashboardTiles .tile {
  min-height: 132px !important;
  padding: 18px 16px !important;
}

body:not(.is-webview):not(.is-android) #dashboard #dashboardTiles {
  gap: 12px !important;
}

.calendar-scroll-container.week-scroll {
  position: relative;
  isolation: isolate;
  overflow: auto !important;
}

.new-day-grid {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.new-week-grid {
  overflow: clip !important;
}

.week-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
}

.week-time-label {
  position: sticky !important;
  right: 0 !important;
  z-index: 85 !important;
}

.new-week-grid > .week-header:first-child {
  position: sticky !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
}

.day-time-label {
  position: sticky !important;
  inset-inline-start: 0 !important;
  z-index: 85 !important;
}

.day-time-cell,
.week-time-cell {
  overflow: visible !important;
}

.cal-appointment-block {
  z-index: 20 !important;
  max-width: calc(100% - 12px);
  contain: paint;
}

.cal-appointment-block.blocked,
.cal-appointment-block.day-closed,
.cal-day-closed-overlay,
.cal-week-day-closed {
  background: linear-gradient(135deg, rgba(245, 158, 11, .95), rgba(217, 119, 6, .98)) !important;
  border-color: rgba(255,255,255,.55) !important;
}