/*
 * KeFlash merchant profile visual refinement.
 * Purely presentational overrides scoped to the current Profile Negozio form.
 * No application logic is changed here.
 */

/* Scope: the settings form is the only merchant form with the rose-tinted main-data section. */
.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) {
  --kf-bordeaux: #7a2943;
  --kf-bordeaux-dark: #5b2035;
  --kf-yellow: #ffde17;
  --kf-green: #20a84a;
  --kf-green-dark: #16843a;
}

/* Make the main profile canvas a little wider on desktop, closer to the approved mockup. */
@media (min-width: 1024px) {
  .max-w-4xl.mx-auto:has(form.space-y-4 > section[class*="border-rose-200"]) {
    max-width: 1180px !important;
  }

  .max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
    gap: 16px;
    align-items: start;
  }

  /* Main shop data stay full-width. */
  .max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > section {
    grid-column: 1 / -1;
  }

  /* Logo and opening hours side-by-side, as in the approved mockup. */
  .max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(1) {
    grid-column: 1;
  }

  .max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) {
    grid-column: 2;
  }

  /* Showcase and save action span the whole width. */
  .max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(3),
  .max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > button[type="submit"] {
    grid-column: 1 / -1;
  }
}

/* Compact logo card. */
.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(1) {
  padding: 16px !important;
}

.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(1) > .grid {
  gap: 12px !important;
}

/* Opening-hours card: denser and closer to a schedule table. */
.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) {
  padding: 16px !important;
}

.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) > .space-y-3.pt-2 {
  display: flex;
  flex-direction: column;
  gap: 7px !important;
  padding-top: 4px !important;
}

.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) > .space-y-3.pt-2 > div {
  padding: 7px 9px !important;
  gap: 6px !important;
  border-color: #dbe8f2 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Header row within each day. */
.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) > .space-y-3.pt-2 > div > .grid {
  gap: 6px !important;
}

.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) > .space-y-3.pt-2 > div > .grid > div:first-child {
  min-width: 0;
}

.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) > .space-y-3.pt-2 > div > .grid > div:first-child > span {
  font-size: 13px !important;
}

/* Keep "Copia orari in" useful but visually secondary. */
.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) div[class*="bg-sky-50"] {
  background: #f7fafc !important;
  padding: 4px 6px !important;
  gap: 6px !important;
}

.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) select {
  min-height: 31px;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Time slots become slim rows instead of large nested blocks. */
.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) .space-y-2\.5.pt-1 {
  padding-top: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px !important;
}

.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) .space-y-2\.5.pt-1 > div {
  flex: 1 1 280px;
  padding: 5px 7px !important;
  gap: 6px !important;
  background: #fbfcfd !important;
  box-shadow: none !important;
}

.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) input[type="time"] {
  padding: 5px 7px !important;
  border-width: 1px !important;
  min-height: 30px;
}

/* Add-slot action becomes compact and subordinate. */
.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) .space-y-2\.5.pt-1 > button {
  width: auto !important;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 10px !important;
  border-color: #d7b9c4 !important;
  background: #fff !important;
}

/* On wider desktop screens put day/status, copy and hours on one compact row. */
@media (min-width: 1280px) {
  .max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) > .space-y-3.pt-2 > div {
    display: grid !important;
    grid-template-columns: 170px 160px minmax(0, 1fr);
    align-items: center;
  }

  .max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) > .space-y-3.pt-2 > div > .grid {
    display: contents !important;
  }

  .max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) .space-y-2\.5.pt-1,
  .max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) > .space-y-3.pt-2 > div > div:last-child:not(.grid) {
    margin: 0 !important;
  }
}

/* Showcase CTA = KeFlash yellow, not bordeaux. */
.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(3) > div:first-child button {
  background: var(--kf-yellow) !important;
  color: #111827 !important;
  border-color: #e8c900 !important;
  box-shadow: 0 2px 8px rgba(140, 116, 0, 0.12);
}

.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(3) > div:first-child button:hover {
  background: #f4d313 !important;
}

.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(3) > div:first-child button svg {
  color: #111827 !important;
}

/* Empty showcase state: clean, neutral, no yellow dashed-border feel. */
.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(3) .border-dashed {
  border-style: solid !important;
  border-color: #dfe5ec !important;
  background: #ffffff !important;
  color: #334155 !important;
}

/* Save = positive action: green. */
.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > button[type="submit"] {
  background: var(--kf-green) !important;
  color: #ffffff !important;
  margin-top: 4px !important;
  box-shadow: 0 5px 14px rgba(32, 168, 74, 0.18) !important;
}

.max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > button[type="submit"]:hover {
  background: var(--kf-green-dark) !important;
}

/* Keep mobile straightforward and stacked. */
@media (max-width: 1023px) {
  .max-w-4xl.mx-auto form.space-y-4:has(> section[class*="border-rose-200"]) > div:nth-of-type(2) .space-y-2\.5.pt-1 > button {
    width: 100% !important;
  }
}