/*
 * ClientAssist Product UI v1
 *
 * This file is the canonical visual contract for product pages. It is loaded
 * after the historical stylesheet so pages can migrate without a big-bang
 * rewrite. New UI should use these tokens and semantic component rules.
 */

:root {
  /* Colour roles */
  --ca-color-text: #161616;
  --ca-color-text-muted: #64748b;
  --ca-color-canvas: #f6f8fb;
  --ca-color-surface: #ffffff;
  --ca-color-surface-subtle: #f8fafc;
  --ca-color-border: #dde5f0;
  --ca-color-border-strong: #aeb8c6;
  --ca-color-primary: #2563eb;
  --ca-color-primary-hover: #1d4ed8;
  --ca-color-danger: #ff002c;
  --ca-color-danger-hover: #dc0026;
  --ca-color-success: #0f766e;
  --ca-color-focus: #3a86ff;

  /* 2 / 4 / 8 based spacing scale */
  --ca-space-1: 2px;
  --ca-space-2: 4px;
  --ca-space-3: 8px;
  --ca-space-4: 12px;
  --ca-space-5: 16px;
  --ca-space-6: 24px;
  --ca-space-7: 32px;

  /* Shape and dimensions */
  --ca-shell-width: 424px;
  --ca-control-height: 48px;
  --ca-control-height-compact: 40px;
  --ca-action-height: 44px;
  --ca-radius-control: 10px;
  --ca-radius-card: 14px;
  --ca-radius-panel: 18px;
  --ca-radius-shell: 24px;
  --ca-radius-pill: 999px;
  --ca-focus-ring: 0 0 0 2px rgba(58, 134, 255, 0.18);
  --ca-shadow-shell: 0 12px 30px rgba(15, 23, 42, 0.12);
  --ca-shadow-overlay: 0 12px 28px rgba(15, 23, 42, 0.14);

  /* Compatibility aliases for the existing stylesheet. */
  --black: var(--ca-color-text);
  --gray-400: var(--ca-color-border-strong);
  --gray-200: var(--ca-color-border);
  --gray-100: var(--ca-color-surface-subtle);
  --blue: var(--ca-color-primary);
  --red: var(--ca-color-danger);
  --white: var(--ca-color-surface);
}

body {
  background: var(--ca-color-canvas);
  color: var(--ca-color-text);
}

.page-root {
  padding: var(--ca-space-6) var(--ca-space-4) 48px;
}

.phone:is(
  .auth-page,
  .register-page,
  .account-page,
  .appointment-page,
  .partner-page,
  .main-page,
  .success-page
) {
  width: var(--ca-shell-width);
  border-radius: var(--ca-radius-shell);
  box-shadow: var(--ca-shadow-shell);
}

.phone:is(
  .auth-page,
  .register-page,
  .account-page,
  .appointment-page,
  .partner-page,
  .main-page,
  .success-page
) .section {
  padding-left: var(--ca-space-6);
  padding-right: var(--ca-space-6);
}

.phone .title,
.partner-page .partner-page-title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.form-label,
.field-label-text {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}

.field-label-row {
  gap: var(--ca-space-3);
}

.field-label-icon {
  width: 20px;
  height: 20px;
  opacity: 0.58;
}

.form-note,
.field-note {
  font-size: 12px;
  line-height: 17px;
  color: var(--ca-color-text-muted);
}

:is(
  .auth-page,
  .register-page,
  .account-page,
  .appointment-page,
  .partner-page
) .form-input {
  min-height: var(--ca-control-height);
  height: var(--ca-control-height);
  padding: 0 14px;
  border: 1px solid var(--ca-color-border-strong);
  border-radius: var(--ca-radius-control);
  background: var(--ca-color-surface);
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

:is(
  .auth-page,
  .register-page,
  .account-page,
  .appointment-page,
  .partner-page
) .form-input:focus-within,
:is(
  .auth-page,
  .register-page,
  .account-page,
  .appointment-page,
  .partner-page
) :is(input, select, textarea):focus-visible {
  border-color: var(--ca-color-focus);
  box-shadow: var(--ca-focus-ring);
  outline: none;
}

.btn {
  min-height: var(--ca-action-height);
  border-radius: var(--ca-radius-control);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}

:is(.auth-page, .register-page, .account-page, .partner-page) .btn-primary {
  color: #fff;
  border-color: var(--ca-color-primary);
  background: var(--ca-color-primary);
}

:is(.auth-page, .register-page, .account-page, .partner-page) .btn-primary:hover,
:is(.auth-page, .register-page, .account-page, .partner-page) .btn-primary:focus-visible {
  border-color: var(--ca-color-primary-hover);
  background: var(--ca-color-primary-hover);
}

.btn-danger {
  color: #fff;
  border-color: var(--ca-color-danger);
  background: var(--ca-color-danger);
}

.btn-danger:hover,
.btn-danger:focus-visible {
  border-color: var(--ca-color-danger-hover);
  background: var(--ca-color-danger-hover);
}

.chip {
  min-height: var(--ca-control-height-compact);
  border-radius: var(--ca-radius-control);
  font-size: 13px;
}

/* Registration: same foundations, quieter containers. */
.register-page .section,
.register-page .register-form,
.register-partner-fields {
  gap: var(--ca-space-5);
}

.register-page :is(
  .register-role-block,
  .register-service-card,
  .register-specialist-card,
  .register-helper-note
) {
  padding: var(--ca-space-5);
  border: 1px solid var(--ca-color-border);
  border-radius: var(--ca-radius-panel);
  background: var(--ca-color-surface);
  box-shadow: none;
}

.register-page :is(.register-service-card, .register-specialist-card) {
  gap: var(--ca-space-4);
}

.register-page .register-schedule-time-input {
  min-height: var(--ca-control-height);
  border-color: var(--ca-color-border-strong);
  border-radius: var(--ca-radius-control);
}

/* Partner cabinet: top-level surfaces and nested entity editors. */
.partner-page .section {
  gap: var(--ca-space-5);
  padding-top: 18px;
  padding-bottom: var(--ca-space-7);
}

.partner-page :is(.partner-page-intro, .partner-panel, .partner-toolbar-panel) {
  width: 100%;
  margin: 0;
  padding: var(--ca-space-5);
  border: 1px solid var(--ca-color-border);
  border-radius: var(--ca-radius-panel);
  background: var(--ca-color-surface);
  box-shadow: none;
}

.partner-page .partner-panel-title {
  font-size: 18px;
  line-height: 23px;
  font-weight: 500;
}

.partner-page :is(.partner-specialist-shell, .partner-service-item) {
  border-color: var(--ca-color-border);
  background: var(--ca-color-surface-subtle);
  box-shadow: none;
}

.partner-page :is(.partner-info-editor, .partner-service-editor) {
  padding: var(--ca-space-4);
  border: 1px solid var(--ca-color-border);
  border-radius: var(--ca-radius-card);
  background: var(--ca-color-surface-subtle);
  box-shadow: none;
}

.partner-page :is(.partner-info-editor, .partner-service-editor) .field-label-row {
  gap: 6px;
}

.partner-page :is(.partner-info-editor, .partner-service-editor) .field-label-icon {
  width: 16px;
  height: 16px;
}

.partner-page :is(.partner-info-editor, .partner-service-editor) .partner-service-field-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.partner-page :is(.partner-info-editor, .partner-service-editor) .form-input {
  min-height: var(--ca-control-height-compact);
  height: var(--ca-control-height-compact);
  padding: 0 11px;
}

.partner-page :is(.partner-info-editor, .partner-service-editor) :is(
  .partner-info-textarea,
  .partner-service-description
) {
  min-height: 76px;
  padding: 10px 11px;
  border: 1px solid var(--ca-color-border-strong);
  border-radius: var(--ca-radius-control);
  background: var(--ca-color-surface);
}

.partner-page :is(.partner-info-editor, .partner-service-editor) .btn {
  min-height: var(--ca-control-height-compact);
  font-size: 13px;
}

.partner-page .partner-availability-state {
  color: var(--ca-color-success);
}

/* Visits: retain scanability while using the same density and shape rules. */
.phone-visits .partner-filter-row {
  gap: var(--ca-space-3);
  margin-top: var(--ca-space-5);
}

.phone-visits .partner-filter-row .chip {
  min-height: var(--ca-control-height-compact);
  padding: 0 var(--ca-space-4);
}

.phone-visits .partner-toolbar-panel {
  display: grid;
  gap: var(--ca-space-4);
  padding: var(--ca-space-4);
  border-radius: var(--ca-radius-card);
}

.phone-visits #visitsList {
  display: grid;
  gap: var(--ca-space-4);
  margin-top: var(--ca-space-4);
}

.phone-visits .partner-visit-card {
  gap: 10px;
  padding: var(--ca-space-4);
  border: 1px solid var(--ca-color-border);
  border-radius: var(--ca-radius-card);
  background: var(--ca-color-surface);
  box-shadow: none;
}

.phone-visits .partner-visit-client-name {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
}

.phone-visits .partner-visit-period {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}

.phone-visits :is(.partner-visit-badge, .partner-visit-price) {
  min-height: 28px;
  padding: 4px var(--ca-space-3);
  font-size: 12px;
}

.phone-visits .partner-visit-details {
  font-size: 12px;
  line-height: 17px;
  color: var(--ca-color-text-muted);
}

.phone-visits .partner-visit-actions {
  gap: var(--ca-space-3);
}

.phone-visits .partner-visit-action-button {
  min-height: var(--ca-control-height-compact);
  padding: 0 var(--ca-space-4);
  border-radius: var(--ca-radius-control);
  font-size: 13px;
}

@media (max-width: 424px) {
  .page-root {
    padding: 0;
  }

  .phone:is(
    .auth-page,
    .register-page,
    .account-page,
    .appointment-page,
    .partner-page,
    .main-page,
    .success-page
  ) {
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 360px) {
  .phone:is(
    .auth-page,
    .register-page,
    .account-page,
    .appointment-page,
    .partner-page,
    .main-page,
    .success-page
  ) .section {
    padding-left: 20px;
    padding-right: 20px;
  }
}