/* =========================================================
   TeďTo RC12.12 · Pilot Ready
   Final non-destructive UI layer for mobile QA, dark mode,
   empty states, forms and safe-area behaviour.
   ========================================================= */

:root{
  --tt-pilot-radius:22px;
  --tt-pilot-control:48px;
  --tt-keyboard-offset:0px;
}

html,body{max-width:100%;overflow-x:clip}
body.ui-refresh-v2 .site-shell,
body.ui-refresh-v2 .phone-stage,
body.ui-refresh-v2 .phone-frame,
body.ui-refresh-v2 .screen,
body.ui-refresh-v2 .screen>*{min-width:0}
body.ui-refresh-v2 :is(img,video,canvas,svg){max-width:100%}
body.ui-refresh-v2 :is(input,select,textarea,button){font-family:inherit}
body.ui-refresh-v2 :is(input,select,textarea){max-width:100%}
body.ui-refresh-v2 :focus-visible{outline:3px solid color-mix(in srgb,var(--tedto-purple,#6b43f4) 42%,transparent);outline-offset:2px}

/* A single clear pattern for empty and first-use states. */
.pilot-empty-state{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  width:100%;
  padding:24px;
  border:1px solid var(--tedto-line,#e2e6ef);
  border-radius:var(--tt-pilot-radius);
  background:linear-gradient(135deg,var(--tedto-surface,#fff),var(--tedto-surface-2,#f7f8fc));
  color:var(--tedto-text,#111729);
  box-shadow:0 16px 42px rgba(36,43,72,.06);
}
.pilot-empty-state.is-compact{grid-template-columns:48px minmax(0,1fr) auto;padding:17px 18px;border-radius:18px;gap:13px}
.pilot-empty-icon{
  width:64px;height:64px;border-radius:20px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tedto-purple,#6b43f4) 12%,var(--tedto-surface,#fff));
  color:var(--tedto-purple,#6b43f4);font-size:27px;font-weight:900;
}
.is-compact>.pilot-empty-icon{width:48px;height:48px;border-radius:15px;font-size:21px}
.pilot-empty-copy small{display:block;margin-bottom:5px;color:var(--tedto-purple,#6b43f4);font-size:11px;font-weight:900;letter-spacing:.075em;text-transform:uppercase}
.pilot-empty-copy h2{margin:0;color:inherit;font-size:clamp(19px,2.1vw,27px);line-height:1.15}
.pilot-empty-copy p{max-width:700px;margin:8px 0 0;color:var(--tedto-muted,#6f7890);font-size:14px;line-height:1.55}
.pilot-empty-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.pilot-empty-action{min-height:44px;padding:0 15px;border:1px solid var(--tedto-line,#e2e6ef);border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--tedto-surface,#fff);color:var(--tedto-text,#111729);font-size:13px;font-weight:850;text-decoration:none;white-space:nowrap}
.pilot-empty-action.primary{border-color:transparent;background:linear-gradient(135deg,var(--tedto-purple,#6b43f4),var(--tedto-purple-2,#8a62ff));color:#fff;box-shadow:0 10px 24px rgba(107,67,244,.22)}
.pilot-empty-action:hover{transform:translateY(-1px)}

/* Existing empty states get the same spacing even before their PHP is migrated. */
body.ui-refresh-v2 :is(.inbox-empty,.services-empty,.service-market-empty-v2,.booking-empty,.circle-empty,.radar-empty-state,.dating-v12-empty-state,.availability-smart-empty,.soft-empty){
  max-width:100%;
}

/* Consistent controls and useful touch targets. */
body.ui-refresh-v2 .screen :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){
  min-height:46px;
  border-radius:13px;
}
body.ui-refresh-v2 .screen textarea{min-height:92px;resize:vertical}
body.ui-refresh-v2 .screen :is(button,.primary-btn,a.primary-btn){min-height:42px}
body.ui-refresh-v2 .screen form[aria-busy="true"]{opacity:.82}
body.ui-refresh-v2 .screen form[aria-busy="true"] :is(button[type="submit"],input[type="submit"]){cursor:wait}

/* Keep sticky actions above the navigation and the virtual keyboard. */
body.ui-refresh-v2 .sticky-submit,
body.ui-refresh-v2 .create-submit-bar,
body.ui-refresh-v2 .chat-composer,
body.ui-refresh-v2 .social-chat-composer{
  scroll-margin-bottom:calc(112px + var(--tt-keyboard-offset));
}
body.ui-refresh-v2.is-keyboard-open .pilot-feedback-fab{display:none!important}

/* Sheets and dialogs must always fit on small phones. */
body.ui-refresh-v2 [role="dialog"]{max-width:calc(100vw - 24px)}
body.ui-refresh-v2 :is(.account-quick-menu,.quick-launcher-sheet,.smart-match-sheet,.cookie-settings-sheet) > section{
  max-height:min(88dvh,820px);
  overflow:auto;
  overscroll-behavior:contain;
}

/* Complete dark surfaces: inputs and previously pale empty states. */
html[data-theme="dark"] body.ui-refresh-v2 .pilot-empty-state{
  background:linear-gradient(135deg,#0f1724,#111b2a);
  border-color:#273247;
  color:#f3f6fc;
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}
html[data-theme="dark"] body.ui-refresh-v2 .pilot-empty-icon{background:rgba(118,80,255,.16);color:#a992ff}
html[data-theme="dark"] body.ui-refresh-v2 .pilot-empty-action{background:#151e2d;border-color:#2b374b;color:#f3f6fc}
html[data-theme="dark"] body.ui-refresh-v2 .screen :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){
  background:#111a29!important;
  border-color:#2a364a!important;
  color:#f3f6fc!important;
  box-shadow:none!important;
}
html[data-theme="dark"] body.ui-refresh-v2 .screen :is(input,textarea)::placeholder{color:#778399!important;opacity:1}
html[data-theme="dark"] body.ui-refresh-v2 .screen :is(.inbox-empty,.services-empty,.service-market-empty-v2,.booking-empty,.soft-empty,.notification-list>.empty-card){
  background:#0f1724!important;
  border-color:#273247!important;
  color:#f3f6fc!important;
}
html[data-theme="dark"] body.ui-refresh-v2 .screen :is(.inbox-empty,.services-empty,.service-market-empty-v2,.booking-empty,.soft-empty) p{color:#99a5b9!important}
html[data-theme="dark"] body.ui-refresh-v2 .global-app-footer{border-color:#202b3c!important;color:#8793a8!important}

/* Desktop rhythm: prevent content from looking scattered on ultrawide displays. */
@media(min-width:1000px){
  body.ui-refresh-v2 .screen.route-service_market,
  body.ui-refresh-v2 .screen.route-activities,
  body.ui-refresh-v2 .screen.route-bookings,
  body.ui-refresh-v2 .screen.route-inbox,
  body.ui-refresh-v2 .screen.route-matches,
  body.ui-refresh-v2 .screen.route-radar{
    padding-left:clamp(18px,2vw,28px);
    padding-right:clamp(18px,2vw,28px);
  }
  body.ui-refresh-v2 [data-pilot-grid]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}

/* 320–430 px pilot baseline. */
@media(max-width:640px){
  :root{--tt-pilot-radius:18px;--tt-pilot-control:46px}
  body.ui-refresh-v2 .screen{max-width:100%;overflow:visible}
  body.ui-refresh-v2 .screen :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){font-size:16px!important}
  body.ui-refresh-v2 .screen input:is([type="date"],[type="time"],[type="datetime-local"],[type="month"],[type="week"]){min-width:0;width:100%;padding:0!important}
  body.ui-refresh-v2 :is(.form-grid,.service-form-grid,.create-time-grid,.create-details-grid,.create-location-grid){grid-template-columns:minmax(0,1fr)!important}
  body.ui-refresh-v2 :is(.sticky-submit,.create-submit-bar){bottom:calc(78px + env(safe-area-inset-bottom) + var(--tt-keyboard-offset))!important}
  .pilot-empty-state,.pilot-empty-state.is-compact{grid-template-columns:48px minmax(0,1fr);padding:17px 15px;gap:12px}
  .pilot-empty-icon,.is-compact>.pilot-empty-icon{width:48px;height:48px;border-radius:15px;font-size:21px}
  .pilot-empty-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .pilot-empty-action{width:100%;white-space:normal;text-align:center}
  .pilot-empty-copy h2{font-size:20px}
  .pilot-empty-copy p{font-size:13px}
  body.ui-refresh-v2 [role="dialog"]{max-width:calc(100vw - 16px)}
}

@media(max-width:360px){
  body.ui-refresh-v2 .screen{padding-left:8px!important;padding-right:8px!important}
  body.ui-refresh-v2 .app-header{padding-left:10px!important;padding-right:10px!important}
  body.ui-refresh-v2 .header-title strong{font-size:20px!important}
  body.ui-refresh-v2 .bottom-nav small{font-size:11px!important}
  body.ui-refresh-v2 .bottom-nav .nav-create{width:58px!important;height:58px!important}
  .pilot-empty-state,.pilot-empty-state.is-compact{padding:15px 12px}
}

@media(prefers-reduced-motion:reduce){
  body.ui-refresh-v2 *,body.ui-refresh-v2 *::before,body.ui-refresh-v2 *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

body.ui-refresh-v2 form[aria-busy="true"] .is-submitting{pointer-events:none;filter:saturate(.75);cursor:wait}