/* ==========================================================================
   TENANT BRAND THEMING
   ==========================================================================
   Set dynamically at login (index.html's completeLogin, from response.theme/themeDark) — these
   2 defaults are only ever visible pre-login (the login screen, or a brief flash before a
   session resolves) and match this app's own historical hardcoded brand color
   (Materialize's teal.lighten-1 / teal.darken-2).

   Materialize is CDN-loaded (index.html:4), not vendored — every one of its color-utility
   classes (.teal, .green, .red, etc.) ships with `!important`, so overriding them needs
   `!important` too; cascade order alone won't win. Several of Materialize's own UN-CLASSED
   component defaults (plain .btn, focused inputs, checkboxes, pickers, etc.) are hardcoded to
   this same teal WITHOUT `!important` and without any .teal class at all — invisible to a grep
   for "teal" but very visible on screen — those get overridden below too.

   Scope: only .teal/.teal-text (this app's actual brand-color utility, confirmed by direct
   Materialize CDN inspection) and the un-classed defaults above are touched. .green/.red/.orange
   stay completely fixed — they mean success/danger/warning throughout this app, unrelated to
   tenant branding, and must not shift hue per tenant. The superadmin ops panel
   (#admin-app-section, admin.js, .admin-* classes) is a separate cross-tenant tool, not a single
   tenant's dashboard, and is deliberately NOT touched by any of this. Per-stylist calendar
   colors and workflow-group colors (calendar-grid.js) are a second, deliberately independent
   color system and also untouched. */
:root {
  --primary-color: #26a69a;
  --primary-dark: #00796b;
}

/* Replaces the old body.style.backgroundColor = theme + "1A" JS hack (a crude hex-alpha
   trick) — same faint tenant-color page tint, computed properly via color-mix() instead. */
body {
  background-color: color-mix(in oklch, var(--primary-color) 6%, white);
}

/* --- .teal / .teal-text utility classes (Materialize ships these !important) --- */
.teal, .teal.lighten-1 { background-color: var(--primary-color) !important; }
.teal.darken-1 { background-color: color-mix(in oklch, var(--primary-color), black 12%) !important; }
.teal.darken-2 { background-color: var(--primary-dark) !important; }
.teal.darken-3 { background-color: color-mix(in oklch, var(--primary-dark), black 10%) !important; }
.teal.darken-4 { background-color: color-mix(in oklch, var(--primary-dark), black 24%) !important; }
.teal.lighten-2 { background-color: color-mix(in oklch, var(--primary-color) 85%, white) !important; }
.teal.lighten-3 { background-color: color-mix(in oklch, var(--primary-color) 70%, white) !important; }
.teal.lighten-4 { background-color: color-mix(in oklch, var(--primary-color) 40%, white) !important; }
.teal.lighten-5 { background-color: color-mix(in oklch, var(--primary-color) 12%, white) !important; }

.teal-text { color: var(--primary-color) !important; }
.teal-text.text-lighten-3 { color: color-mix(in oklch, var(--primary-color) 55%, white) !important; }
.teal-text.text-lighten-5 { color: color-mix(in oklch, var(--primary-color) 20%, white) !important; }
.teal-text.text-darken-1 { color: color-mix(in oklch, var(--primary-color), black 12%) !important; }
.teal-text.text-darken-2 { color: var(--primary-dark) !important; }
.teal-text.text-darken-3 { color: color-mix(in oklch, var(--primary-dark), black 10%) !important; }
.teal-text.text-darken-4 { color: color-mix(in oklch, var(--primary-dark), black 24%) !important; }

.waves-teal .waves-ripple { background-color: color-mix(in oklch, var(--primary-color) 70%, transparent) !important; }

/* --- Materialize's own un-classed component defaults (no .teal class involved at all) --- */
.btn, .btn-large, .btn-small, .btn-floating { background-color: var(--primary-color) !important; }
.btn:hover, .btn-large:hover, .btn-small:hover, .btn-floating:hover {
  background-color: color-mix(in oklch, var(--primary-color), black 8%) !important;
}
.input-field input:focus:not([readonly]),
.input-field textarea:focus:not([readonly]),
.select-wrapper input.select-dropdown:focus {
  border-bottom: 1px solid var(--primary-color) !important;
  box-shadow: 0 1px 0 0 var(--primary-color) !important;
}
.input-field input:focus:not([readonly]) + label,
.input-field textarea:focus:not([readonly]) + label {
  color: var(--primary-color) !important;
}
[type="checkbox"]:checked + .lever:after { background-color: var(--primary-color) !important; }
.collection .collection-item.active { background-color: var(--primary-color) !important; }
.progress .determinate, .progress .indeterminate { background-color: var(--primary-color) !important; }
span.badge.new { background-color: var(--primary-color) !important; }
.datepicker-date-display,
.timepicker-digital-display,
.datepicker-table td.is-selected {
  background-color: var(--primary-color) !important;
}

/* Full-screen loading overlay — fires constantly after login (every save/delete/PIN
   check/calendar load, see home.js's showGlobalLoader call sites), not just a pre-login
   splash, so it's a real brand element. display/opacity/pointer-events stay inline (JS in
   home.js sets those directly; inline styles always win over these class defaults regardless,
   so this doesn't change that toggling behavior at all). */
.ss-loading-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 9999; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.3s ease;
}
.ss-loading-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ss-loading-spinner-wrap { position: relative; width: 80px; height: 80px; margin-bottom: 20px; }
.ss-loading-spinner-ring {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%;
  border: 6px solid color-mix(in oklch, var(--primary-color) 20%, white);
  border-top-color: var(--primary-dark);
  animation: ss-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.ss-loading-spinner-pulse {
  position: absolute; top: 15px; left: 15px; width: 50px; height: 50px; border-radius: 50%;
  background: var(--primary-dark); opacity: 0.15; animation: ss-pulse 2s ease-in-out infinite;
}
.ss-loading-title {
  margin: 0 0 8px 0; font-weight: 700; font-family: 'Poppins', sans-serif; font-size: 1.6rem;
  letter-spacing: 0.5px; color: color-mix(in oklch, var(--primary-dark), black 15%);
}
.ss-loading-title-accent { color: var(--primary-dark); }
.ss-loading-status-text { margin: 0; color: #5d4037; font-size: 0.95rem; font-weight: 500; font-family: 'Poppins', sans-serif; }

  .form-row{
    margin-bottom:15px;
  }
  
  cstP{
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  
  }
  
  /* increase the width and height of modals! */
  .modal { 
  width: 80% !important ; 
  max-height: 90% !important;
  max-height: 90dvh !important; }


.dropdown-content {

    min-width: 20vw;
}

/* Here is defined the style of the text of the text area of the cashier window. */
textarea.cashier{

  font-size:0.9vw;
  width: 100%;
  height: 20vw;
  resize: none;
  outline: none;
  border: none;
  font-family: 'Space Mono', monospace;
}

/* Here is defined the style of the text of the text area of the table recepy content. */
td.recepyTable{

  font-family: 'Space Mono', monospace;
}

/* Keep the dye-history table header pinned while scrolling the (now scrollable) history.
   The container #historyScrollContainer scrolls; sticky th stays at its top edge. */
#historyScrollContainer thead th.hist-sticky-th {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: #ffffff;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
}
/* Spacer rows that stand in for off-window entries must add no visual weight. */
#historyScrollContainer tr.hist-spacer,
#historyScrollContainer tr.hist-spacer td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

div.tabs-content.carousel.carousel-slider {
  min-height:800px; height:auto !important;
}

.tabs .tab a{
  color:#b0bec5;
} /*Color to the text*/

.tabs .tab a:hover {
  background-color: color-mix(in oklch, var(--primary-color) 12%, white);
  color: var(--primary-color);
} /*Text color on hover*/

.tabs .tab a.active {
  background-color:#ffffff;
  color: var(--primary-color);
} /*Background and text color when a tab is active*/

.tabs .tab.disabled a,.tabs .tab.disabled a:hover{
  color:#ffffff;
} /*Text color when a tab is disabled*/

.tabs .indicator {
  background-color: var(--primary-color);
} /*Color of underline*/

/* Smart scrolling for autocomplete content to show about 10 items max, scrollable beyond */
ul.autocomplete-content.dropdown-content {
  max-height: 400px !important;
  overflow-y: auto !important;
}

/* Materialize's own default styling for this list is easy to lose to the browser/OS forcing a
   dark theme onto anything without an explicit background — happens on every M.Autocomplete.init
   field in the app (client name search, warehouse fields, service pickers, etc.). Pin it
   explicitly to the site's actual light palette so it can't render as an unreadable black box. */
ul.autocomplete-content.dropdown-content,
ul.autocomplete-content.dropdown-content li {
  background-color: #ffffff;
  color: #37474f;
}
ul.autocomplete-content.dropdown-content li > span {
  color: #37474f;
}
ul.autocomplete-content.dropdown-content li:hover,
ul.autocomplete-content.dropdown-content li.active {
  background-color: color-mix(in oklch, var(--primary-color) 12%, white);
}

/* Custom Collapsible styles for service admin checkboxes */
details.svc-collapse {
  margin-bottom: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
details.svc-collapse summary {
  font-weight: 600;
  color: #00796b;
  font-size: 0.9rem;
  padding: 12px 18px;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fcfcfc;
  list-style: none;
  user-select: none;
}
details.svc-collapse summary::-webkit-details-marker {
  display: none;
}
details.svc-collapse summary i {
  font-size: 1.3rem;
  color: #757575;
  transition: transform 0.2s ease;
}
details.svc-collapse[open] summary {
  border-bottom: 1px solid #e0e0e0;
  background: #f5fdfb;
}
details.svc-collapse[open] summary i {
  transform: rotate(180deg);
  color: #00796b;
}

/* Visual indicator for categories containing checked/active services */
details.svc-collapse.has-selections {
  border: 1px solid #c8e6c9; /* green lighten-4 */
  box-shadow: 0 1px 4px rgba(76, 175, 80, 0.08);
}
details.svc-collapse.has-selections summary {
  background: #e8f5e9; /* green lighten-5 */
  color: #2e7d32; /* green darken-3 */
  border-left: 4px solid #4caf50; /* green margin line */
}
details.svc-collapse.has-selections summary i {
  color: #2e7d32;
}
}
details.svc-collapse.has-selections[open] summary {
  border-bottom: 1px solid #c8e6c9;
  background: #e8f5e9;
}

/* Calendar styling updates */
.selected-cal-tab {
  background-color: #00796b !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 121, 107, 0.15);
}

/* Custom Grid Calendar Style Fallback */
.calendar-grid-header {
  font-weight: bold;
  color: #004d40;
  text-align: center;
  padding: 12px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
}
.calendar-grid-time-cell {
  background: #fafafa;
  font-weight: 600;
  text-align: center;
  border: 1px solid #e0e0e0;
  padding: 10px;
  color: #546e7a;
}
.calendar-grid-slot-cell {
  border: 1px solid #e8e8e8;
  padding: 8px;
  min-height: 50px;
  background: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.calendar-grid-slot-cell:hover {
  background-color: #f1fbf9;
}
.calendar-event-block {
  border-radius: 6px;
  padding: 6px 10px;
  margin: 2px 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.15s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-event-block:hover {
  transform: scale(1.02);
}

/* Animations for highlighting new items silently loaded in background */
@keyframes highlight-fade-green {
  0% { background-color: #c8e6c9; } /* green lighten-4 */
  100% { background-color: transparent; }
}
.new-entry-highlight td, .new-entry-highlight {
  animation: highlight-fade-green 5s ease-out forwards;
}

@keyframes highlight-fade-card {
  0% {
    box-shadow: 0 0 0 3px #00e676, 0 4px 12px rgba(0,230,118,0.4);
  }
  100% {
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  }
}
.new-booking-highlight {
  animation: highlight-fade-card 5s ease-out forwards;
}

@keyframes admn-scan-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.3); }
}
.admn-scan-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e53935;
  margin-right: 6px;
  vertical-align: middle;
  animation: admn-scan-pulse 1.1s ease-in-out infinite;
}

/* Touch-action and scroll performance optimizations for Apple/iOS devices */
button, a, .btn, .btn-small, .btn-large, .btn-flat, .tab a, .gender-segment-btn {
  touch-action: manipulation;
}

#historyScrollContainer {
  -webkit-overflow-scrolling: touch;
}

#calendarScrollableArea {
  -webkit-overflow-scrolling: touch;
}

#bookingDetailModal.open {
  display: flex !important;
  flex-direction: column;
}

/* ===== Admin tenant form: domains section =====
   Grouped into one card, distinct from the plain fields above/below, since 3 inputs + a fairly
   long instructions block previously blended into an undifferentiated wall of text — labels,
   values, helper text, and reference material all read at roughly the same visual weight. */
.admin-form-card {
  background: #f7fafa;
  border: 1px solid #dde5e5;
  border-radius: 10px;
  padding: 18px 20px 8px;
  margin: 12px 0 24px;
}

.admin-form-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #00695c;
  margin-bottom: 8px;
}

.admin-form-card-title .material-icons {
  font-size: 1.15rem;
}

/* Materialize's own .prefix icon pattern — handles icon/input/label alignment for us, no
   custom flex layout needed. */
.admin-form-field .prefix {
  color: #4d8f89;
  top: 0.5rem;
}

.admin-form-field .helper-text {
  font-size: 0.74rem;
  color: #869796;
  line-height: 1.4;
}

.admin-form-card-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.76rem;
  color: #607d78;
  background: #eaf2f1;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 10px 0 16px;
}

.admin-form-card-note .material-icons {
  font-size: 1rem;
  margin-top: 1px;
  color: #4d8f89;
  flex-shrink: 0;
}

.admin-domain-instructions {
  background: #ffffff;
  border: 1px solid #dde5e5;
  border-left: 4px solid #00897b;
  border-radius: 6px;
  padding: 4px 16px;
  font-size: 0.85rem;
  color: #455a64;
  margin-bottom: 4px;
}

.admin-domain-instructions summary {
  cursor: pointer;
  font-weight: 700;
  color: #00695c;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  list-style: none;
}

.admin-domain-instructions summary::-webkit-details-marker {
  display: none;
}

.admin-domain-instructions summary .material-icons:first-child {
  font-size: 1.15rem;
}

.admin-domain-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.admin-domain-instructions[open] .admin-domain-chevron {
  transform: rotate(180deg);
}

.admin-domain-instructions-body {
  padding-bottom: 12px;
}

.admin-domain-instructions-body p {
  margin: 0 0 10px;
}

.admin-domain-instructions-body ol {
  margin: 0 0 14px;
  padding-left: 20px;
}

.admin-domain-instructions-body ol li {
  margin-bottom: 4px;
}

.admin-domain-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #00695c;
  margin-bottom: 6px;
}

.admin-domain-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00897b;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.admin-domain-table {
  width: 100%;
  font-size: 0.8rem;
  border-collapse: collapse;
  margin: 4px 0 16px;
}

.admin-domain-table th {
  text-align: left;
  padding: 6px 10px;
  background: #e0f2f1;
  color: #00695c;
  font-weight: 700;
  border-bottom: 2px solid #b2dfdb;
}

.admin-domain-table th:first-child,
.admin-domain-table td:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.admin-domain-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #eceff1;
}

.admin-domain-table tr:last-child td {
  border-bottom: none;
}

.admin-domain-table-note {
  color: #869796;
  font-size: 0.76rem;
}

/* Business Info card: nested 2-col field grid + logo picker */
.admin-form-nested-row {
  margin-bottom: 0;
}

/* Theme Color + Logo sit on one line — the color input-field is compact/fixed-width so the
   logo preview+button group has room beside it rather than below it. */
.admin-inline-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid #e3e9e9;
}

.admin-theme-color-field {
  width: 160px;
  flex-shrink: 0;
}

.admin-theme-colors-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-theme-workflow {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 260px;
}

.admin-theme-hue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 220px;
}

.admin-theme-hue-icon {
  color: #4d8f89;
  position: static;
}

/* A rainbow track at this workflow's own fixed S/L (45%, 42%) — what you see on the slider is
   what the resulting primary color will actually look like at that hue, not a generic rainbow. */
.admin-hue-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 22px;
  border-radius: 11px;
  background: linear-gradient(to right,
    hsl(0, 45%, 42%), hsl(60, 45%, 42%), hsl(120, 45%, 42%), hsl(180, 45%, 42%),
    hsl(240, 45%, 42%), hsl(300, 45%, 42%), hsl(360, 45%, 42%));
  outline: none;
  cursor: pointer;
}

.admin-hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #37474f;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.admin-hue-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #37474f;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.admin-hue-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: #455a64;
  width: 44px;
  flex-shrink: 0;
}

.admin-theme-mode-toggle {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Live preview of the actual 3 shades the customer-facing site renders — see
   handlers/customerContent.js's darkenHexColor and customer app/web/styles.css's color-mix()
   tokens. Computed client-side with the same color-mix() formula so this stays a true preview,
   not a guess. */
.admin-palette-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e3e9e9;
  flex-basis: 100%;
}

.admin-palette-swatch-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-palette-swatch {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #d8dfdf;
  flex-shrink: 0;
}

.admin-palette-swatch-label {
  font-size: 0.78rem;
  color: #607d78;
}

.admin-palette-preview-note {
  font-size: 0.76rem;
  color: #99a5a4;
  font-style: italic;
  margin-left: auto;
}

.admin-logo-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-logo-preview {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid #dde5e5;
  flex-shrink: 0;
}

.admin-logo-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #00695c;
  background: #e0f2f1;
  border-radius: 20px;
  padding: 7px 14px;
  cursor: pointer;
}

.admin-logo-upload-btn:hover {
  background: #b2dfdb;
}

.admin-logo-upload-btn .material-icons {
  font-size: 1.1rem;
}

.admin-logo-remove-link {
  font-size: 0.8rem;
  margin-left: 10px;
}

/* Website activation card + the tenant list's own status column — shared badge look so both
   read as the same concept. */
.admin-site-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.admin-site-badge {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.admin-site-badge-active {
  background: #e0f2f1;
  color: #00695c;
}

/* "Paused" — a real site exists (SITE_DISABLE release) but isn't reachable. Amber, distinct from
   both the green of a live site and the grey of one that was never created / got erased. */
.admin-site-badge-inactive {
  background: #fff3e0;
  color: #e65100;
}

/* "Δεν υπάρχει" — no Hosting site at all (never activated, or erased). */
.admin-site-badge-none {
  background: #eceff1;
  color: #607d8b;
}

.admin-site-url {
  font-size: 0.85rem;
  color: #00695c;
}

/* Recent-activity card (login history) */
.admin-activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eceff1;
  font-size: 0.85rem;
  color: #455a64;
}

.admin-activity-row:last-child {
  border-bottom: none;
}

.admin-activity-row .material-icons {
  font-size: 1.1rem;
  color: #4d8f89;
}

.admin-activity-method {
  color: #869796;
  font-size: 0.78rem;
}

.admin-activity-empty {
  font-size: 0.85rem;
  color: #869796;
  padding: 6px 0;
}