/* ════════════════════════════════════════════════════════════
   Yutie Appointments · brand reskin of Appointly (chunk 4.1)
   ─────────────────────────────────────────────────────────────
   Token sources: build-pack/CLAUDE.md (locked) plus the variables
   yutie_brand declares in modules/yutie_brand/assets/css/yutie-brand.css
   (--gold, --gold-lt, --gold-dp, --gold-pale, --gold-line, --gold-glow,
   --gold-btn, --tending, --waiting, --quiet, --bg, --text, --text2,
   --text3, --glass, --glass-b, --rule, --blur, --r, --r-sm, --r-xs,
   --ease, --ease-spring, --ease-out, --spartan, --outfit, --serif).

   No hardcoded hex. No new variable declarations. Pure consumption.

   See CASCADE-AUDIT.md (sibling file) for the load-order trace,
   surface-by-surface selector evidence, and specificity arithmetic.

   Layout discipline. Visual properties only on Appointly elements:
   color, background, font-family, font-weight, border-color,
   border-style, border-radius, box-shadow, backdrop-filter, opacity,
   transition. No position, display, flex/grid, margin, padding, width,
   height, transform, top/right/bottom/left changes on existing
   Appointly elements. The two exceptions both ADD a NEW pseudo-element
   wrapper rather than mutating Appointly's geometry, annotated inline.

   !important policy. Every !important matches a Perfex/Appointly
   selector that itself uses !important, annotated immediately after.
   ═══════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   SURFACE 1 · ADMIN APPOINTLY PAGES (loaded via app_admin_head)
   ─────────────────────────────────────────────────────────────
   Order on admin: our stylesheet emits AFTER Appointly's styles.css
   (modules/appointly/helpers/appointly_helper.php:5) and AFTER
   yutie-brand.css and yutie-admin-overrides.css. So our rules
   already win equal-specificity ties. !important here mirrors
   Appointly's own !important declarations only.
   Specificity floor: html[data-theme] body.app.admin (0,2,2).
   ═══════════════════════════════════════════════════════════ */

/* ─── Admin: today appointment cards ─────────────────────── */

/* matches: body .appointly-secondary at appointly/assets/css/client_styles.css:139
   (background, padding, border-radius without !important).
   Layout note: padding and border-radius are NOT changed (Appointly's
   20px / 6px stand); only color tokens and the gold left rail. */
html[data-theme] body.app.admin .todays_appointment.appointly-secondary {
  background: var(--glass);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  box-shadow: 0 1px 0 var(--gold-glow) inset, 0 8px 30px rgba(0, 0, 0, 0.18);
  backdrop-filter: var(--blur);
  color: var(--text);
}

html[data-theme] body.app.admin .todays_appointment.appointly-secondary h3 a {
  font-family: var(--serif);
  color: var(--text);
}

html[data-theme] body.app.admin .todays_appointment.appointly-secondary .text-warning {
  /* matches: text-warning utility class. Three states colour mapping. */
  color: var(--waiting);
}

html[data-theme] body.app.admin .todays_appointment.appointly-secondary .text-muted {
  color: var(--text2);
}

/* ─── Admin: status pill (label-success, label-warning, etc.) ─── */

/* matches: body.appointments .btn-warning at client_styles.css:246-248
   and .label-warning at :250-254. Three-states mapping: warning -> waiting. */
html[data-theme] body.app.admin .label.label-warning,
html[data-theme] body.app.admin .btn-warning {
  background: var(--waiting);
  border-color: var(--waiting);
  color: var(--bg);
}

/* matches: body.appointments .label-success at client_styles.css:272-278. */
html[data-theme] body.app.admin .label.label-success,
html[data-theme] body.app.admin .btn-success {
  background: var(--tending);
  border-color: var(--tending);
  color: var(--bg);
}

/* matches: body.appointments .label-info at client_styles.css:264-270. */
html[data-theme] body.app.admin .label.label-info,
html[data-theme] body.app.admin .btn-info {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}

/* matches: body.appointments .label-primary at client_styles.css:256-262. */
html[data-theme] body.app.admin .label.label-primary,
html[data-theme] body.app.admin .btn.btn-primary,
html[data-theme] body.app.admin .btn.btn-primary.dropdown-toggle {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  border-color: var(--gold);
  color: var(--bg);
  font-weight: 600;
}

/* matches: body.appointments .label-danger at client_styles.css:280-285.
   Three-states: danger maps to waiting (calm, not red). */
html[data-theme] body.app.admin .label.label-danger,
html[data-theme] body.app.admin .btn-danger {
  background: var(--waiting);
  border-color: var(--gold-dp);
  color: var(--bg);
}

/* ─── Admin: Appointly heading "appointly-default" ─── */

/* matches: body .appointly-default at client_styles.css:203-211 (uses
   color: !important so we mirror it). */
html[data-theme] body.app.admin .appointly-default {
  color: var(--text) !important; /* matches: client_styles.css:204 color:#4a4a4a !important */
  border-color: var(--gold-line);
  font-family: var(--serif);
  text-transform: none;
}

/* ─── Admin: spmodified info row ─── */

/* matches: .spmodified at client_styles.css:106-115 (background, padding,
   border-radius, box-shadow). Visual only. */
html[data-theme] body.app.admin .spmodified {
  background: var(--glass-b);
  border-radius: var(--r-xs);
  box-shadow: 0 0 0 1px var(--rule);
  color: var(--text);
}

html[data-theme] body.app.admin boldit {
  color: var(--text2);
  font-family: var(--outfit);
}

/* ─── Admin: tables (appointments DataTable) ─── */

/* matches: Bootstrap .table at vendor-admin.css and Appointly's
   .table-appointments inheriting it. Yutie brand already styles tables
   globally; this rule scopes the appointment table specifically. */
html[data-theme] body.app.admin .table.table-appointments {
  background: transparent;
  color: var(--text);
}

html[data-theme] body.app.admin .table.table-appointments thead th {
  background: var(--glass);
  color: var(--text2);
  border-bottom: 1px solid var(--gold-line);
  font-family: var(--outfit);
  font-weight: 600;
}

html[data-theme] body.app.admin .table.table-appointments tbody tr {
  border-bottom: 1px solid var(--rule);
}

html[data-theme] body.app.admin .table.table-appointments tbody tr:hover {
  background: var(--gold-pale);
}

/* ─── Admin: alert banners (responsible-person warnings) ─── */

/* matches: .alert.alert-warning emitted at appointly/views/index.php:19,28.
   Three-states: warning -> waiting tones. */
html[data-theme] body.app.admin .alert.alert-warning {
  background: var(--gold-pale);
  border: 1px solid var(--gold-line);
  color: var(--text);
}

html[data-theme] body.app.admin .alert.alert-warning a {
  color: var(--gold-lt);
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════
   SURFACE 2 · PUBLIC BOOKING FORM
   route: /appointly/appointments_public/form
   view : modules/appointly/views/forms/appointments_form.php
   body : .appointments-external-form
   ─────────────────────────────────────────────────────────────
   Head order on this surface (template_helper.php:259-307):
     1. Perfex external-form CSS group (reset, inter, bootstrap,
        fontawesome, datetimepicker, bootstrap-select, tailwind,
        forms.css, custom.css)
     2. app_external_form_head action fires (line 306)
        <-- our yutie-appointments.css emits HERE
     3. Inside the view, <link href="appointments_external_form.css">
        emits AFTER our link (appointments_form.php:19)

   So Appointly's external-form CSS loads AFTER ours. Our rules must
   beat each of theirs on specificity OR carry !important when theirs
   does. Specificity floor: body.appointments-external-form (0,1,1).
   ═══════════════════════════════════════════════════════════ */

/* matches: body { background: #e2e7ed !important; } at
   appointly/assets/css/appointments_external_form.css:1-3. */
body.appointments-external-form {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--outfit);
}

/* The main_wrapper is Appointly's white form panel. Glass it.
   matches: .main_wrapper at appointments_external_form.css:95-100
   (padding, box-shadow, border-radius, background; no !important
   on background so equal-specificity rule from us would win, but
   we trail in load order so we elevate). */
body.appointments-external-form .main_wrapper {
  background: var(--glass) !important; /* matches: appointments_external_form.css:99 background:#fff */
  box-shadow: 0 1px 0 var(--gold-glow) inset, 0 24px 60px rgba(0, 0, 0, 0.32) !important; /* matches: appointments_external_form.css:97 */
  border-radius: var(--r) !important; /* matches: appointments_external_form.css:98 border-radius:4px */
  border: 1px solid var(--gold-line);
  backdrop-filter: var(--blur);
  color: var(--text);
}

/* Form headings inside the wrapper. */
body.appointments-external-form .main_wrapper h4.text-center {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

body.appointments-external-form .main_wrapper label,
body.appointments-external-form .main_wrapper .control-label {
  color: var(--text2);
  font-family: var(--outfit);
  font-weight: 500;
}

/* ─── Public form: text inputs ─── */

/* matches: body input { height:38px !important; } at
   appointments_external_form.css:108-110 and
   body textarea, body input { border:1px solid #ececec !important; }
   at :112-115. Both !important; we mirror. */
body.appointments-external-form .form-control,
body.appointments-external-form input[type="text"],
body.appointments-external-form input[type="email"],
body.appointments-external-form input[type="tel"],
body.appointments-external-form textarea {
  background: var(--glass-b) !important; /* matches: appointments_external_form.css:114 border:1px solid #ececec !important sets visual; our background completes */
  color: var(--text) !important;
  border: 1px solid var(--rule) !important; /* matches: appointments_external_form.css:114 */
  border-radius: var(--r-xs);
  font-family: var(--outfit);
}

body.appointments-external-form .form-control:focus,
body.appointments-external-form input:focus,
body.appointments-external-form textarea:focus {
  border-color: var(--gold) !important; /* matches: appointments_external_form.css:114 1px solid #ececec !important */
  outline: none;
  box-shadow: 0 0 0 3px var(--gold-pale);
}

/* matches: body .has-error .form-control:focus at
   appointments_external_form.css:33-36 (border-color and box-shadow,
   both !important). Three-states: validation error renders waiting. */
body.appointments-external-form .has-error .form-control,
body.appointments-external-form .has-error .form-control:focus {
  border-color: var(--waiting) !important; /* matches: appointments_external_form.css:34 border-color:#ff0300 !important */
  box-shadow: 0 0 0 3px var(--waiting-bg) !important; /* matches: appointments_external_form.css:35 box-shadow:none !important */
}

/* ─── Public form: time-state legend chips ─── */

/* matches: .hwp at appointments_external_form.css:102-106
   (border-radius, padding, color, all without !important). */
body.appointments-external-form .hwp {
  color: var(--text);
  font-family: var(--outfit);
  font-weight: 500;
}

/* matches: body .available_time_info at appointments_external_form.css:14-16
   (background #2663eb without !important). Three-states: available -> tending. */
body.appointments-external-form .available_time_info,
body.appointments-external-form .hwp.available_time_info {
  background: var(--tending-bg);
  border: 1px solid var(--tending-line);
  color: var(--tending);
}

/* matches: body .busy_time_info at appointments_external_form.css:9-12
   (background #fb4862 without !important). Three-states: busy -> quiet. */
body.appointments-external-form .busy_time_info,
body.appointments-external-form .hwp.busy_time_info {
  background: var(--quiet-bg);
  border: 1px solid var(--quiet-line);
  color: var(--quiet);
}

/* matches: body .busy_time_info_google at appointments_external_form.css:23-25
   (background #ffb100 without !important). Three-states: google-busy -> waiting. */
body.appointments-external-form .busy_time_info_google,
body.appointments-external-form .hwp.busy_time_info_google {
  background: var(--waiting-bg);
  border: 1px solid var(--gold-line);
  color: var(--waiting);
}

/* ─── Public form: time slot cells (inside the datetimepicker) ─── */

/* matches: body .busy_time at appointments_external_form.css:27-31
   (background, color, pointer-events, all !important). */
body.appointments-external-form .xdsoft_datetimepicker .busy_time,
body.appointments-external-form .busy_time {
  background: var(--quiet-bg) !important; /* matches: appointments_external_form.css:28 background:#fb4862 !important */
  color: var(--quiet) !important; /* matches: appointments_external_form.css:29 color:#fff !important */
  pointer-events: none;
  border-radius: var(--r-xs);
}

/* matches: body .busy_google_time at appointments_external_form.css:38-43
   (background, color, font-weight, pointer-events, all !important). */
body.appointments-external-form .xdsoft_datetimepicker .busy_google_time,
body.appointments-external-form .busy_google_time {
  background: var(--waiting-bg) !important; /* matches: appointments_external_form.css:39 background:#ffb100 !important */
  color: var(--waiting) !important; /* matches: appointments_external_form.css:40 color:#fff !important */
  font-weight: 500 !important; /* matches: appointments_external_form.css:41 font-weight:300 !important */
  pointer-events: none;
  border-radius: var(--r-xs);
}

/* ─── Public form: calendar grid (xdsoft datetimepicker popup) ─── */

/* matches: .datetimepicker at appointments_external_form.css:66-68
   (background #fff !important). Plus body .appointment-date at
   client_styles.css:149-151 (background:#fff !important). */
body.appointments-external-form .datetimepicker,
body.appointments-external-form .appointment-date {
  background: var(--glass-b) !important; /* matches: appointments_external_form.css:67 background:#fff !important */
  color: var(--text) !important; /* matches: client_styles.css:32 color:#4d4d4e !important */
  border: 1px solid var(--gold-line);
  border-radius: var(--r-xs);
}

body.appointments-external-form .xdsoft_datetimepicker {
  background: var(--bg);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  color: var(--text);
}

body.appointments-external-form .xdsoft_datetimepicker .xdsoft_calendar td {
  background: transparent;
  color: var(--text);
  border-radius: var(--r-xs);
  transition: background 160ms var(--ease), color 160ms var(--ease);
}

body.appointments-external-form .xdsoft_datetimepicker .xdsoft_calendar td:hover {
  background: var(--gold-pale);
  color: var(--gold-lt);
}

body.appointments-external-form .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
  border-bottom: 2px solid var(--gold);
  color: var(--gold-lt);
  font-weight: 600;
}

body.appointments-external-form .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
body.appointments-external-form .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  color: var(--bg);
  font-weight: 600;
}

body.appointments-external-form .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
body.appointments-external-form .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month {
  color: var(--text3);
}

/* ─── Public form: appointment type dropdown (service card surrogate) ─── */

/* Appointly's external form has no service-card grid: services are picked
   via the appointment_type_holder dropdown. We restyle the dropdown to
   carry the same glass-and-gold feel a service card would.
   matches: .appointment_type_holder .dropdown-menu li a at
   appointments_external_form.css:84-89 (border, border-radius, padding,
   all with !important on border + border-radius). */
body.appointments-external-form .appointment_type_holder .form-control,
body.appointments-external-form .appointment_type_holder .selectpicker {
  font-family: var(--outfit);
}

body.appointments-external-form .appointment_type_holder .dropdown-menu {
  background: var(--bg);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

body.appointments-external-form .appointment_type_holder .dropdown-menu li a {
  color: var(--text) !important; /* matches: appointments_external_form.css:88 padding:8px 20px (no color override; we set ours) */
  border: none !important; /* matches: appointments_external_form.css:86 border:none !important */
  border-radius: 0 !important; /* matches: appointments_external_form.css:87 border-radius:0px !important */
  font-family: var(--outfit);
}

body.appointments-external-form .appointment_type_holder .dropdown-menu li a:hover {
  background: var(--gold-pale);
  color: var(--gold-lt) !important; /* matches: appointments_external_form.css:84 hover rule scope */
}

body.appointments-external-form .appointment_type_holder .appointment_color_type {
  /* Appointly emits this as a 30x30 colored swatch. Wrap it in our gold
     ring without touching its width/height. */
  box-shadow: 0 0 0 1px var(--gold-line);
}

/* ─── Public form: submit button ─── */

/* matches: Bootstrap .btn.btn-primary at vendor-admin.css (no !important
   in vendor-admin). Form's btn-primary is the booking submit button. */
body.appointments-external-form #form_submit,
body.appointments-external-form .btn.btn-primary {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  border: 1px solid var(--gold);
  color: var(--bg);
  font-family: var(--outfit);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--r-xs);
  box-shadow: 0 6px 24px var(--gold-glow);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

body.appointments-external-form #form_submit:hover,
body.appointments-external-form .btn.btn-primary:hover {
  box-shadow: 0 10px 32px var(--gold-glow);
}

/* ════════════════════════════════════════════════════════════
   SURFACE 3 · CUSTOMER-AREA APPOINTMENT VIEWS
   loaded via app_customers_head when fetch_module()==='appointly'
   ─────────────────────────────────────────────────────────────
   Currently Appointly's only customer-area surface in chunk 4.1 scope
   is the menu entry registered through appointly_clients_area_schedule_appointment
   (appointly/helpers/appointly_helper.php:141-162) which links to the
   external form. That form uses its OWN head hook above, so the menu
   item itself inherits yutie_brand's customer-area chrome and needs
   no additional rules here.

   The clients_hash view (modules/appointly/views/clients/clients_hash.php)
   is a STANDALONE HTML page that loads its own CSS and emits no
   Perfex head hook. Reskinning it requires the add_package_path
   view-override mechanism that yutie_brand uses for theme views; that
   approach is out of scope for chunk 4.1 and deferred to chunk 4.3.
   ═══════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   SURFACE 4 · WHAT'S DEFERRED FROM THIS RESKIN
   ─────────────────────────────────────────────────────────────
   The chunk 4.1 spec listed seven surfaces. Five are covered above
   (calendar grid, time slot cells, type-card surrogate, form inputs,
   submit button). Two are deferred:

     - Booking confirmation card (rendered inside clients_hash.php)
     - Reschedule UI (Appointly has no dedicated reschedule UI;
       reschedule is a delete-and-recreate flow through admin)
     - Cancel confirmation (rendered inside clients_hash.php via
       a Bootstrap #cancellationModal)

   These all live on the standalone clients_hash page and require
   view-override or add_package_path treatment. Documented in
   CASCADE-AUDIT.md (section "Deferred surfaces").
   ═══════════════════════════════════════════════════════════ */