/* ==========================================================================
   Pet Tour — shared UI layer (popups, toasts, tables, date picker)
   Loaded on both the public site and the admin console. Everything here is an
   enhancement over markup that already works without it, so the styles only
   ever have to make an existing control look and behave better — never carry
   the behaviour on their own.

   Colours come from the tokens already defined in style.css / admin.css, with
   local fallbacks so a page that loads this file alone still renders sanely.
   ========================================================================== */

.pui{
  --pui-surface:var(--a-surface,var(--surface,#fff));
  --pui-bg:var(--a-bg,var(--bg,#f5f9fc));
  --pui-line:var(--a-line,var(--line,#dce7ef));
  --pui-line-soft:var(--a-line-soft,var(--line,#eaf1f7));
  --pui-ink:var(--a-ink,var(--navy,#10243f));
  --pui-muted:var(--a-muted,var(--muted,#66788c));
  --pui-accent:var(--a-accent,var(--navy-2,#17395c));
  --pui-green:var(--green,#1f8a5b);
  --pui-orange:var(--orange,#c77920);
  --pui-red:var(--red,#c94141);
  --pui-radius:var(--a-radius,var(--radius,18px));
  --pui-radius-sm:var(--a-radius-sm,var(--radius-sm,12px));
  --pui-shadow:var(--a-shadow-lg,var(--shadow,0 24px 60px rgba(16,36,63,.18)));
}

/* ---- Modal dialogs ------------------------------------------------------- */
dialog.pui-modal{
  padding:0;border:0;background:transparent;color:var(--pui-ink);
  max-width:min(460px,calc(100vw - 32px));width:100%;
}
dialog.pui-modal::backdrop{background:rgba(6,15,27,.62);backdrop-filter:blur(3px)}
.pui-modal-card{
  background:var(--pui-surface);border:1px solid var(--pui-line);border-radius:var(--pui-radius);
  box-shadow:var(--pui-shadow);overflow:hidden;text-align:start;
  font-family:var(--font-sans,system-ui,-apple-system,'Segoe UI',sans-serif);
}
.pui-modal-head{display:flex;gap:13px;align-items:flex-start;padding:20px 22px 0}
.pui-modal-mark{
  flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--pui-accent) 14%,transparent);color:var(--pui-accent);
}
.pui-modal-mark svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pui-modal[data-tone="danger"] .pui-modal-mark{background:color-mix(in srgb,var(--pui-red) 15%,transparent);color:var(--pui-red)}
.pui-modal[data-tone="warn"] .pui-modal-mark{background:color-mix(in srgb,var(--pui-orange) 17%,transparent);color:var(--pui-orange)}
.pui-modal[data-tone="ok"] .pui-modal-mark{background:color-mix(in srgb,var(--pui-green) 15%,transparent);color:var(--pui-green)}
.pui-modal-head h2{margin:0;font-size:17px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.pui-modal-body{padding:9px 22px 4px;margin-inline-start:51px;color:var(--pui-muted);font-size:14px;line-height:1.55}
.pui-modal-body :last-child{margin-bottom:0}
.pui-modal-body dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:12px 0 0;font-size:13px}
.pui-modal-body dt{color:var(--pui-muted);font-weight:600}
.pui-modal-body dd{margin:0;color:var(--pui-ink);font-weight:700}
.pui-modal-foot{display:flex;gap:9px;justify-content:flex-end;padding:18px 22px 20px;flex-wrap:wrap}
.pui-btn{
  appearance:none;border:1px solid transparent;border-radius:11px;padding:9px 17px;
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;line-height:1.35;
  background:var(--pui-accent);color:var(--pui-surface);transition:filter .16s,transform .16s;
}
.pui-btn:hover{filter:brightness(1.09)}
.pui-btn:active{transform:translateY(1px)}
.pui-btn:focus-visible{outline:2px solid var(--pui-accent);outline-offset:2px}
.pui-btn.alt{background:transparent;border-color:var(--pui-line);color:var(--pui-ink)}
.pui-btn.alt:hover{background:var(--pui-bg);filter:none}
.pui-modal[data-tone="danger"] .pui-btn:not(.alt){background:var(--pui-red);color:#fff}
.pui-modal[data-tone="warn"] .pui-btn:not(.alt){background:var(--pui-orange);color:#fff}
html[data-theme="dark"] .pui-btn:not(.alt){color:#08182a}

/* A wide dialog, for the master calendar's day sheet. */
dialog.pui-modal.wide{max-width:min(680px,calc(100vw - 28px))}
.pui-modal.wide .pui-modal-body{margin-inline-start:0;padding:14px 22px 4px;max-height:min(62vh,520px);overflow:auto}

/* ---- Toasts -------------------------------------------------------------- */
.pui-toasts{
  position:fixed;z-index:9999;inset-block-end:18px;inset-inline-end:18px;
  display:flex;flex-direction:column;gap:9px;align-items:flex-end;
  pointer-events:none;max-width:min(370px,calc(100vw - 28px));
}
.pui-toast{
  pointer-events:auto;display:flex;gap:10px;align-items:flex-start;
  background:var(--pui-surface);color:var(--pui-ink);
  border:1px solid var(--pui-line);border-inline-start:3px solid var(--pui-accent);
  border-radius:var(--pui-radius-sm);box-shadow:var(--pui-shadow);
  padding:12px 14px;font-size:13.5px;font-weight:600;line-height:1.45;
  font-family:var(--font-sans,system-ui,-apple-system,'Segoe UI',sans-serif);
  animation:pui-toast-in .26s cubic-bezier(.22,1,.36,1);
}
.pui-toast[data-tone="ok"]{border-inline-start-color:var(--pui-green)}
.pui-toast[data-tone="warn"]{border-inline-start-color:var(--pui-orange)}
.pui-toast[data-tone="danger"]{border-inline-start-color:var(--pui-red)}
.pui-toast.is-out{animation:pui-toast-out .2s ease forwards}
.pui-toast svg{flex:none;width:17px;height:17px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pui-toast[data-tone="ok"] svg{color:var(--pui-green)}
.pui-toast[data-tone="warn"] svg{color:var(--pui-orange)}
.pui-toast[data-tone="danger"] svg{color:var(--pui-red)}
.pui-toast-x{
  margin-inline-start:auto;background:none;border:0;padding:0 2px;cursor:pointer;
  color:var(--pui-muted);font-size:17px;line-height:1;flex:none;
}
@keyframes pui-toast-in{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pui-toast-out{to{opacity:0;transform:translateY(6px) scale(.98)}}

/* ---- Enhanced tables ----------------------------------------------------- */
.pui-table-wrap{
  --pui-th:color-mix(in srgb,var(--pui-ink) 5%,var(--pui-surface));
  display:grid;gap:11px;
}
html[data-theme="dark"] .pui-table-wrap{--pui-th:color-mix(in srgb,#fff 5%,var(--pui-surface))}
.pui-table-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pui-search{position:relative;flex:1 1 210px;min-width:0;max-width:330px}
.pui-search svg{
  position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;fill:none;stroke:var(--pui-muted);stroke-width:2;pointer-events:none;
}
.pui-search input{
  width:100%;padding:9px 12px 9px 34px;border:1px solid var(--pui-line);border-radius:10px;
  background:var(--pui-surface);color:var(--pui-ink);font:inherit;font-size:13.5px;
}
.pui-search input:focus{outline:none;border-color:var(--pui-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--pui-accent) 18%,transparent)}
.pui-table-count{font-size:12.5px;color:var(--pui-muted);font-weight:700;margin-inline-start:auto}
.pui-scroll{overflow-x:auto;border:1px solid var(--pui-line);border-radius:var(--pui-radius-sm);background:var(--pui-surface)}
.pui-scroll>table{margin:0;border:0;border-radius:0;min-width:100%}
table[data-table]{width:100%;border-collapse:collapse;font-size:13.5px}
table[data-table] th,table[data-table] td{padding:10px 13px;text-align:start;border-bottom:1px solid var(--pui-line-soft);white-space:nowrap}
table[data-table] thead th{
  position:sticky;top:0;z-index:2;background:var(--pui-th);
  font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--pui-muted);
  border-bottom:1px solid var(--pui-line);
}
table[data-table] tbody tr:last-child td{border-bottom:0}
table[data-table] tbody tr:hover{background:color-mix(in srgb,var(--pui-accent) 5%,transparent)}
table[data-table] tfoot td{font-weight:800;background:var(--pui-th);border-top:1px solid var(--pui-line)}
table[data-table] td.num,table[data-table] th.num{text-align:end;font-variant-numeric:tabular-nums}

th.pui-sortable{cursor:pointer;user-select:none;position:sticky}
th.pui-sortable:hover{color:var(--pui-ink)}
th.pui-sortable::after{
  content:"";display:inline-block;width:0;height:0;margin-inline-start:6px;vertical-align:middle;
  border:4px solid transparent;border-top-color:currentColor;opacity:.28;
}
th.pui-sortable[aria-sort="ascending"]::after{border-top-color:transparent;border-bottom-color:currentColor;opacity:1}
th.pui-sortable[aria-sort="descending"]::after{opacity:1}
tr.pui-hidden{display:none}
.pui-table-empty{padding:26px 16px;text-align:center;color:var(--pui-muted);font-size:13.5px;font-weight:600}

/* Below the phone breakpoint a wide table stops being a table and becomes one
   card per row, each cell labelled with its column heading. */
@media (max-width:720px){
  .pui-table-wrap[data-stack="1"] .pui-scroll{border:0;background:transparent;overflow:visible}
  .pui-table-wrap[data-stack="1"] table[data-table]{display:block}
  .pui-table-wrap[data-stack="1"] thead{display:none}
  .pui-table-wrap[data-stack="1"] tbody,
  .pui-table-wrap[data-stack="1"] tfoot{display:block}
  .pui-table-wrap[data-stack="1"] tbody tr,
  .pui-table-wrap[data-stack="1"] tfoot tr{
    display:grid;gap:2px;margin-bottom:9px;padding:12px 14px;
    background:var(--pui-surface);border:1px solid var(--pui-line);border-radius:var(--pui-radius-sm);
  }
  .pui-table-wrap[data-stack="1"] td{
    display:flex;gap:14px;justify-content:space-between;align-items:baseline;
    border:0;padding:3px 0;white-space:normal;text-align:end;
  }
  .pui-table-wrap[data-stack="1"] td::before{
    content:attr(data-label);flex:none;text-align:start;
    font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--pui-muted);
  }
  .pui-table-wrap[data-stack="1"] td:empty{display:none}
}

/* ---- Date picker --------------------------------------------------------- */
.pui-date{position:relative;display:block}
/* The real input stays in the form, focusable and validatable, so `required`
   and the browser's own error bubble still work — it is only made invisible
   and click-through, with the trigger sitting on top of it. */
.pui-date>input[type="date"],.pui-date>input.pui-native{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;
  border:0;padding:0;margin:0;
}
.pui-date-trigger{
  position:relative;z-index:1;display:flex;width:100%;gap:10px;align-items:center;
  padding:12px 14px;border:1px solid var(--pui-line);border-radius:var(--pui-radius-sm);
  background:var(--pui-surface);color:var(--pui-ink);
  font:inherit;font-size:14.5px;font-weight:600;text-align:start;cursor:pointer;
}
.pui-date-trigger:hover{border-color:var(--pui-accent)}
.pui-date-trigger:focus-visible{outline:2px solid var(--pui-accent);outline-offset:1px}
.pui-date-trigger svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;color:var(--pui-muted)}
.pui-date-trigger .pui-date-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pui-date-trigger.is-empty .pui-date-text{color:var(--pui-muted);font-weight:500}
.pui-date.is-open .pui-date-trigger{border-color:var(--pui-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--pui-accent) 18%,transparent)}
/* An invalid required date shows the same ring the rest of the form uses. */
.pui-date>input:user-invalid~.pui-date-trigger{border-color:var(--pui-red)}

.pui-cal{
  position:absolute;z-index:80;inset-inline-start:0;top:calc(100% + 7px);width:min(310px,calc(100vw - 30px));
  background:var(--pui-surface);border:1px solid var(--pui-line);border-radius:var(--pui-radius);
  box-shadow:var(--pui-shadow);padding:13px;
  font-family:var(--font-sans,system-ui,-apple-system,'Segoe UI',sans-serif);
}
.pui-cal[hidden]{display:none}
.pui-cal.drop-up{top:auto;bottom:calc(100% + 7px)}
.pui-cal-head{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.pui-cal-title{flex:1;text-align:center;font-size:14px;font-weight:800;color:var(--pui-ink)}
.pui-cal-nav{
  flex:none;width:30px;height:30px;border:1px solid var(--pui-line);border-radius:9px;
  background:transparent;color:var(--pui-ink);cursor:pointer;display:grid;place-items:center;font-size:15px;line-height:1;
}
.pui-cal-nav:hover:not(:disabled){background:var(--pui-bg);border-color:var(--pui-accent)}
.pui-cal-nav:disabled{opacity:.3;cursor:not-allowed}
.pui-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.pui-cal-dow{
  text-align:center;font-size:10px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
  color:var(--pui-muted);padding-bottom:5px;
}
.pui-cal-day{
  aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:transparent;
  color:var(--pui-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  display:grid;place-items:center;position:relative;padding:0;
}
.pui-cal-day:hover:not(:disabled){background:color-mix(in srgb,var(--pui-accent) 13%,transparent)}
.pui-cal-day.is-today{border-color:var(--pui-accent);font-weight:900}
.pui-cal-day.is-selected{background:var(--pui-accent);color:var(--pui-surface);font-weight:900}
html[data-theme="dark"] .pui-cal-day.is-selected{color:#08182a}
.pui-cal-day:disabled{opacity:.26;cursor:not-allowed;text-decoration:line-through}
.pui-cal-day.is-blank{visibility:hidden}
/* A dot under the number: how busy that day already is. */
.pui-cal-day .pui-dot{
  position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--pui-green);
}
.pui-cal-day .pui-dot[data-load="busy"]{background:var(--pui-orange)}
.pui-cal-day .pui-dot[data-load="full"]{background:var(--pui-red)}
.pui-cal-day.is-selected .pui-dot{background:currentColor}
.pui-cal-foot{
  display:flex;gap:8px;align-items:center;justify-content:space-between;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--pui-line-soft);
}
.pui-cal-hint{font-size:11.5px;color:var(--pui-muted);font-weight:600}
.pui-cal-today{
  background:none;border:0;padding:2px 4px;color:var(--pui-accent);
  font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;text-decoration:underline;
}

@media (prefers-reduced-motion:reduce){
  .pui-toast,.pui-toast.is-out{animation:none}
  .pui-btn{transition:none}
}

/* Keep stacked records contained even when a cell holds many tags or actions. */
.pui-table-wrap,.pui-scroll,.pui-date{min-width:0;max-width:100%}
.pui-cal.pui{position:fixed;inset:auto;margin:0;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:760px){
  .pui-date-trigger,.pui-search input{font-size:16px;min-height:46px}
  .pui-cal-nav{width:44px;height:44px}
  .pui-cal-day{min-height:36px;aspect-ratio:auto}
  .pui-cal-today,.pui-btn,.pui-toast-x{min-height:44px;min-width:44px}
  dialog.pui-modal{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
  .pui-modal-head{padding:18px 16px 0}
  .pui-modal-body,.pui-modal.wide .pui-modal-body{margin-inline-start:0;padding:12px 16px;overflow-wrap:anywhere}
  .pui-modal-body dl{grid-template-columns:minmax(0,1fr)}
  .pui-modal-body dd{margin-bottom:10px}
  .pui-modal-foot{padding:12px 16px max(16px,env(safe-area-inset-bottom))}
  .pui-modal-foot .pui-btn{flex:1 1 120px}
  .pui-toasts{inset-inline:12px;width:auto;max-width:none;inset-block-end:max(12px,env(safe-area-inset-bottom))}
}
@media(max-width:720px){
  .pui-table-wrap[data-stack="1"] td{display:block;text-align:start!important;padding:7px 0;overflow-wrap:anywhere;min-width:0}
  .pui-table-wrap[data-stack="1"] td::before{display:block;margin-bottom:4px;white-space:normal}
  .pui-table-wrap[data-stack="1"] td>*{max-width:100%}
  .pui-table-wrap[data-stack="1"] td .badge{white-space:normal;margin-block:2px}
  .pui-table-wrap[data-stack="1"] tbody tr.pui-hidden{display:none}
  .pui-table-wrap[data-stack="1"] tfoot td{border:0}
}