/* Look professional pages: keep content crisp while only decorative layers grow. */
:is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog) {
  --pro-blue: var(--look-blue, #2375c5);
  --pro-blue-deep: var(--look-blue-deep, #14549a);
  --pro-blue-soft: var(--look-blue-soft, #e7f2ff);
  --pro-text: var(--look-text, #344b64);
  --pro-line: var(--look-line, #dce6f0);
  --pro-gold: var(--look-gold-edge, linear-gradient(125deg, #b07a25, #e8bd56 28%, #f8e29a 43%, #bb8529 65%, #dfb351));
  color: var(--pro-text);
}

#barber-shell {
  background: #fcfcfe;
}
#barber-shell .barber-agenda-profile,
#barber-shell .barber-brand-signature {
  border-color: #d5ac52;
}
#barber-shell .barber-agenda-label strong,
#barber-shell .barber-welcome :is(h2, p:first-child),
#barber-shell .barber-summary > p,
#barber-shell .barber-summary-section h2 {
  color: var(--pro-blue-deep);
}
#barber-shell .barber-agenda-label span,
#barber-shell .barber-empty-note,
#barber-shell .barber-welcome p {
  color: var(--pro-text);
}
#barber-shell .barber-shop-avatar:not(.iamlook-avatar) {
  border-color: #d5ac52;
  background: linear-gradient(145deg, #2375c5, #14549a);
}
/* Existing active, delayed and insertion cards retain their status colors. */
#barber-shell .barber-order-card {
  border-radius: 14px;
}
#barber-shell .barber-order-card:not(.barber-order-active):not(.barber-order-delayed):not(.barber-insertion-card) {
  border-color: transparent;
  border-left-color: var(--barber-color);
  background: linear-gradient(#fff, #fff) padding-box, var(--pro-gold) border-box;
  box-shadow: 0 3px 12px #17466e0b;
}
#barber-shell .barber-order-card .barber-client-name {
  color: var(--pro-blue-deep);
}
#barber-shell .barber-order-card:not(.barber-order-active) .barber-order-time {
  color: var(--pro-text);
}
#barber-shell .barber-order-items p {
  color: var(--pro-text);
}
#barber-shell .barber-client-name button:not(:disabled):hover {
  color: var(--pro-blue);
  text-decoration-color: currentColor;
}

/* Only these controls have an unused ::before available for the decorative frame. */
:is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
:is(.barber-tab, .barber-action:not(.occurrence), .barber-brand-button,
    .barber-summary-shortcuts button, .barber-summary-period > button,
    .barber-payment-methods > button, .client-profile-tabs > button,
    .client-edit-cancel, .client-observation-readonly button, .client-photo-readonly button,
    menu button:not(.occurrence)) {
  --pro-control-surface: #fff;
  --pro-control-edge: var(--pro-gold);
  --pro-control-shadow: 0 1px 3px #76501a0a;
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  color: var(--pro-text);
  cursor: pointer;
  transition: color .18s ease;
}
:is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
:is(.barber-tab, .barber-action:not(.occurrence), .barber-brand-button,
    .barber-summary-shortcuts button, .barber-summary-period > button,
    .barber-payment-methods > button, .client-profile-tabs > button,
    .client-edit-cancel, .client-observation-readonly button, .client-photo-readonly button,
    menu button:not(.occurrence))::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: inherit;
  background: linear-gradient(var(--pro-control-surface), var(--pro-control-surface)) padding-box,
    var(--pro-control-edge) border-box;
  box-shadow: var(--pro-control-shadow);
  pointer-events: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
:is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
:is(.barber-tab, .barber-action:not(.occurrence), .barber-brand-button,
    .barber-summary-shortcuts button, .barber-summary-period > button,
    .barber-payment-methods > button, .client-profile-tabs > button,
    .client-edit-cancel, .client-observation-readonly button, .client-photo-readonly button,
    menu button:not(.occurrence)):not(:disabled):not([aria-disabled="true"]):not(.primary, .selected, .has-pending-vale):hover {
  --pro-control-surface: #edf5ff;
  --pro-control-shadow: 0 3px 10px #2375c51c;
  color: var(--pro-blue-deep);
}
:is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
:is(.barber-tab.selected, .barber-action.primary, .barber-payment-methods > button.selected, .client-profile-tabs > button.selected):not(:disabled):not(.has-pending-vale) {
  --pro-control-surface: var(--pro-blue);
  --pro-control-shadow: 0 2px 7px #2375c51c;
  color: #fff;
}
:is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
:is(.barber-tab.selected, .barber-action.primary, .barber-payment-methods > button.selected, .client-profile-tabs > button.selected):not(:disabled):not(.has-pending-vale):hover {
  --pro-control-surface: var(--pro-blue-deep);
  --pro-control-shadow: 0 3px 10px #2375c52e;
  color: #fff;
}
#barber-shell .barber-summary-period > button span { color: inherit; }

/* Amber occurrences, red insertion actions and payment feedback stay semantic. */
:is(#barber-shell, dialog[id^="barber-"]) .barber-action.occurrence {
  border-radius: 11px;
  color: #8c500f;
  background: #fff8ee;
  border-color: #d4ad69;
}
:is(#barber-shell, dialog[id^="barber-"]) .barber-action.occurrence:not(:disabled):hover {
  background: #fff0d9;
  box-shadow: 0 3px 10px #a35a1017;
}
#barber-shell .barber-insert-button:not(.agenda-insertion-action):not(:disabled) {
  border: 1px solid #be6c63;
  border-radius: 11px;
  background: #b12727;
  color: #fff;
}
#barber-shell .barber-insert-button:not(.agenda-insertion-action):not(:disabled):hover {
  background: #982020;
  box-shadow: 0 3px 10px #b1272726;
}

#barber-shell .barber-summary {
  border-color: transparent;
  border-radius: 14px;
  background: linear-gradient(#f4f8fd, #f4f8fd) padding-box, var(--pro-gold) border-box;
}
#barber-shell .barber-summary article:not(.barber-summary-total),
#barber-shell .barber-summary-section li {
  border-color: var(--pro-line);
  border-radius: 11px;
  background: #fff;
}
#barber-shell .barber-summary-section { border-color: var(--pro-line); }
#barber-shell .barber-summary-cards .barber-summary-total {
  border-color: #d5ac52;
  border-radius: 11px;
  background: #fff8e7;
}
#barber-shell .barber-summary-date-menu {
  border-color: #d5ac52;
  border-radius: 12px;
  box-shadow: 0 12px 28px #17466e22;
}
#barber-shell .calendar-header button,
#barber-shell .calendar-actions button {
  background: #eaf2fb;
  color: var(--pro-blue-deep);
  border-radius: 9px;
}
#barber-shell .calendar-day:not(.today):not(.range-edge):not(.in-range):hover {
  background: var(--pro-blue-soft);
  color: var(--pro-blue-deep);
}
#barber-shell .calendar-day.in-range {
  background: var(--pro-blue-soft);
  color: var(--pro-blue-deep);
}
#barber-shell .calendar-day.today,
#barber-shell .calendar-day.range-edge,
#barber-shell #apply-barber-summary-date {
  background: var(--pro-blue);
  color: #fff;
}
#barber-shell :is(.barber-tab, .barber-summary-shortcuts button).has-pending-vale {
  --pro-control-surface: #fff2c9;
  --pro-control-edge: linear-gradient(#dca119, #dca119);
  color: #6f5100;
  animation: look-professional-vale-pulse 1s ease-in-out infinite;
}
#barber-shell :is(.barber-tab, .barber-summary-shortcuts button).has-pending-vale:hover {
  --pro-control-surface: #ffebad;
  color: #6f5100;
}
@keyframes look-professional-vale-pulse {
  50% { box-shadow: 0 0 0 4px #f4c55044; }
}

:is(dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog) {
  border: 1px solid transparent;
  border-radius: 17px;
  background: linear-gradient(#fcfcfe, #fcfcfe) padding-box, var(--pro-gold) border-box;
  box-shadow: 0 20px 50px #17395438;
}
:is(dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)::backdrop {
  background: #19334e80;
}
:is(dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog) h2 {
  color: var(--pro-blue-deep);
}
:is(dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
:is(.eyebrow, .barber-dialog-note) { color: var(--pro-text); }
:is(dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
  border: 1px solid #bacde0;
  border-radius: 10px;
  background: #fff;
  color: var(--pro-text);
}
:is(dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
:is(input, textarea)::placeholder { color: #657a8f; }
:is(dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
:is(.barber-catalog-options, .client-reference-photos, .client-observation-readonly, .client-photo-readonly) {
  border-color: var(--pro-line);
  border-radius: 12px;
  background: #f4f8fd;
}
:is(dialog[id^="barber-"], #client-profile-dialog) :is(.barber-catalog-options button, .barber-insertion-options button, .client-photo-add) {
  border-color: #d5ac52;
  border-radius: 10px;
  color: var(--pro-text);
}
:is(dialog[id^="barber-"], #client-profile-dialog) :is(.barber-catalog-options button, .barber-insertion-options button:not(.selected), .client-photo-add):not(:disabled):hover {
  background: var(--pro-blue-soft);
  box-shadow: 0 3px 10px #2375c51c;
}
:is(dialog[id^="barber-"], #client-profile-dialog) .barber-payment-total {
  background: var(--pro-blue-soft);
  color: var(--pro-blue-deep);
}
#client-profile-dialog .client-history-entry { border-color: var(--pro-line); }
#client-profile-dialog .client-profile-empty { background: #f1f6fc; color: var(--pro-text); }
:is(#client-profile-dialog, #client-camera-dialog) .client-profile-close-top {
  background: #eaf2fb;
  color: var(--pro-blue-deep);
}
:is(#client-profile-dialog, #client-camera-dialog) .client-profile-close-top:hover { background: #daeafd; }
#client-profile-dialog .client-save-feedback { background: var(--pro-blue-deep); }

/* Cursor and keyboard focus apply without resizing text, icons or controls. */
:is(dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog) menu:not(.client-profile-footer):not(.client-camera-actions) {
  justify-content: space-between !important;
}
:is(dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog) menu:has(> button:only-child) {
  justify-content: center !important;
}
:is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
:is(button, a[href], select, label.client-photo-add, input[type="checkbox"], input[type="radio"]):not(:disabled):not([aria-disabled="true"]) {
  cursor: pointer;
}
:is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
:is(button, a[href], input, select, textarea):focus-visible {
  outline: 2px solid var(--pro-blue);
  outline-offset: 3px;
}
:is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
button:disabled {
  --pro-control-surface: #e9edf2;
  --pro-control-edge: linear-gradient(#d5dee6, #d5dee6);
  --pro-control-shadow: none;
  color: #65778a;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
  :is(.barber-tab, .barber-action:not(.occurrence), .barber-brand-button, .barber-summary-shortcuts button,
      .client-profile-tabs > button, .client-edit-cancel, .client-observation-readonly button,
      .client-photo-readonly button, menu button:not(.occurrence)):not(:disabled):not([aria-disabled="true"]):hover::before {
    transform: scale(1.02);
  }
  :is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
  :is(.barber-tab, .barber-action:not(.occurrence), .barber-brand-button, .barber-summary-shortcuts button,
      .client-profile-tabs > button, .client-edit-cancel, .client-observation-readonly button,
      .client-photo-readonly button, menu button:not(.occurrence)):not(:disabled):active::before {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
  :is(button, a[href], .client-save-feedback),
  :is(#barber-shell, dialog[id^="barber-"], #client-profile-dialog, #client-camera-dialog, #client-feedback-dialog)
  :is(button, a[href])::before { transition: none; }
  #barber-shell :is(.has-pending-vale, .barber-order-delayed) { animation: none; }
}
/* Shared agenda heading: action on the left, title centered in both panels. */
:is(#app-shell, #barber-shell) .agenda-action-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0 0 8px;
}
:is(#app-shell, #barber-shell) .agenda-action-heading .agenda-section-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  color: var(--look-blue-deep);
}
:is(#app-shell, #barber-shell) .agenda-action-heading .agenda-insertion-action {
  grid-column: 1;
  justify-self: start;
  order: 0;
  border: 1px solid #bd8c30;
  border-radius: 12px;
  background: linear-gradient(#fff, #fffaf0);
  color: var(--look-blue-deep);
  padding: 9px 12px;
  font: 700 13px "Segoe UI", sans-serif;
  white-space: nowrap;
  box-shadow: 0 2px 5px #bd8c301c;
  cursor: pointer;
}
:is(#app-shell, #barber-shell) .agenda-action-heading .agenda-insertion-action:hover:not(:disabled) {
  background: #e7f2ff;
  border-color: #b07a25;
}
:is(#app-shell, #barber-shell) .agenda-action-heading :is(#owner-booking-button,#barber-booking-button){grid-column:3;grid-row:1;justify-self:end}
.owner-client-dialog [data-slots]{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;max-height:200px;overflow:auto}
.owner-client-dialog [data-slots] button[aria-pressed=true]{background:#edf9f1;color:#126337;border-color:#168347}
.owner-client-dialog [data-services] label{display:flex;align-items:center;gap:8px}
.owner-client-dialog [data-services] input{width:auto}
@media(max-width:420px){:is(#app-shell,#barber-shell) .agenda-action-heading{gap:4px}:is(#app-shell,#barber-shell) .agenda-action-heading .agenda-insertion-action{font-size:11px;padding:9px 6px}:is(#app-shell,#barber-shell) .agenda-action-heading .agenda-section-title{font-size:19px}}
:is(#app-shell, #barber-shell) .agenda-action-heading .agenda-insertion-action:disabled {
  opacity: .5;
  cursor: not-allowed;
}
:is(#app-shell, #barber-shell) .agenda-action-heading .agenda-insertion-action:focus-visible {
  outline: 2px solid var(--look-blue);
  outline-offset: 3px;
}