/* ═══════════════════════════════════════════════════════════════════════════
   DATUM — Calendar event modal, Google-Calendar layout (public/css/appt-modal.css)

   Rebuilds #appt-modal to look and work like Google Calendar's "new event" window
   in the Datum theme (no Google colours): an inline title, an "Event details" /
   "Find a time" tab bar, an icon-row left rail, and a Guests panel on the right —
   plus every Datum-specific field kept as its own icon row.

   Loaded LAST (after premium.css). EVERYTHING here is scoped under #appt-modal, so
   no other screen can drift. Uses brand tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The card: a flex column with its own scrolling body (override the base .modal). */
#appt-modal .modal.am-modal{
  width:min(760px,96vw); max-width:760px;
  padding:0; overflow:hidden;
  display:flex; flex-direction:column; max-height:92vh;
}

/* ── Header: eyebrow + big inline title, actions top-right (GCal) ── */
#appt-modal .am-head{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 20px 10px; border-bottom:1px solid var(--border);
}
#appt-modal .am-head-titlewrap{ flex:1 1 auto; min-width:0; }
#appt-modal .am-eyebrow{
  display:block; font-size:11px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--text3); margin-bottom:2px;
}
#appt-modal .am-title{
  width:100%; border:0; border-bottom:1.5px solid var(--border);
  background:transparent; font-size:20px; font-weight:600; color:var(--text);
  padding:4px 0 6px; outline:none;
}
#appt-modal .am-title::placeholder{ color:var(--text3); font-weight:500; }
#appt-modal .am-title:focus{ border-bottom-color:var(--brand-ink); border-bottom-width:2px; }
#appt-modal .am-head-actions{ display:flex; gap:8px; flex:0 0 auto; padding-top:14px; }

/* ── Tab bar ── */
#appt-modal .am-tabs{
  display:flex; gap:4px; padding:6px 16px 0; border-bottom:1px solid var(--border);
}
#appt-modal .am-tab{
  appearance:none; background:transparent; border:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--text2);
  padding:9px 14px; border-bottom:2.5px solid transparent; margin-bottom:-1px;
  border-radius:6px 6px 0 0;
}
#appt-modal .am-tab:hover{ background:var(--surface2); }
#appt-modal .am-tab.am-tab-on{ color:var(--brand-ink); border-bottom-color:var(--brand-ink); }

/* ── Body: two columns (details | guests) ── */
#appt-modal .am-body{ overflow-y:auto; overflow-x:hidden; flex:1 1 auto; }
#appt-modal .am-cols{ display:grid; grid-template-columns:1fr 250px; gap:0; }
#appt-modal .am-left{ padding:8px 18px 16px; min-width:0; }
#appt-modal .am-right{ border-left:1px solid var(--border); padding:14px 16px 16px; background:var(--surface2); }

/* ── Icon rows (the left rail) ── */
#appt-modal .am-row{
  display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start;
  padding:8px 0; border-radius:8px;
}
#appt-modal .am-row + .am-row{ border-top:1px solid var(--border); }
#appt-modal .am-ic{ font-size:19px; color:var(--text3); text-align:center; padding-top:7px; line-height:1; }
#appt-modal .am-ctl{ min-width:0; display:flex; flex-direction:column; gap:6px; }

/* A global `.modal input{width:100%}` would blow checkboxes/radios out to full width
   and shove their labels off the row — pin them to a real size, and stop the global
   label styling from upper-casing our sentence-case labels. */
#appt-modal input[type="checkbox"],
#appt-modal input[type="radio"]{
  width:16px !important; height:16px; flex:0 0 auto; margin:0; accent-color:var(--brand-ink); cursor:pointer;
}
#appt-modal .am-allday,
#appt-modal .am-chk,
#appt-modal .am-scope label{ text-transform:none; letter-spacing:normal; font-weight:500; }

/* Inputs / selects / textarea inside a control cell */
#appt-modal .am-ctl input[type="text"],
#appt-modal .am-ctl input[type="date"],
#appt-modal .am-ctl input[type="time"],
#appt-modal .am-ctl select,
#appt-modal .am-ctl textarea,
#appt-modal .am-guests-input{
  width:100%; box-sizing:border-box; font:inherit; font-size:14px; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xs,8px);
  padding:8px 10px; outline:none;
}
#appt-modal .am-ctl select{ cursor:pointer; }
#appt-modal .am-ctl textarea{ resize:vertical; min-height:40px; }
#appt-modal .am-ctl input:focus,
#appt-modal .am-ctl select:focus,
#appt-modal .am-ctl textarea:focus,
#appt-modal .am-guests-input:focus{ border-color:var(--brand-ink); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-ink) 18%,transparent); }

/* Date+time row inside the clock control */
#appt-modal .am-when-line{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#appt-modal .am-when-line input[type="date"]{ width:auto; flex:0 0 auto; }
#appt-modal .am-when-line .appt-time-field{ display:inline-flex; align-items:center; }
#appt-modal .am-when-line .appt-time-field input[type="time"]{ width:auto; }
#appt-modal .am-when-line .am-dash{ color:var(--text3); }
#appt-modal .am-allday{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--text2); cursor:pointer; }
#appt-modal .am-allday input{ accent-color:var(--brand-ink); }

/* Location cell: input + "Job" button share a row; suggestions dropdown sits under it */
#appt-modal .am-loc{ flex-direction:row; align-items:flex-start; gap:8px; }
#appt-modal .am-loc .db7nvv6{ position:relative; flex:1 1 auto; min-width:0; }
#appt-modal .am-loc .pac-custom{
  position:absolute; z-index:50; left:0; right:0; top:calc(100% + 2px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xs,8px);
  box-shadow:0 8px 24px rgba(0,0,0,.14); max-height:220px; overflow:auto;
}

/* Repeat "until" inline chip */
#appt-modal .am-repeat{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; }
#appt-modal .am-repeat select{ width:auto; flex:1 1 160px; }
#appt-modal #appt-recur-until-row{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text2); }
#appt-modal #appt-recur-until-row input{ width:auto; }

/* Checkbox-style rows (Meet, Create-cal) */
#appt-modal .am-chk{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--text); cursor:pointer; line-height:1.35; }
#appt-modal .am-chk input[type="checkbox"]{ accent-color:var(--brand-ink); margin-top:1px; flex:0 0 auto; }
#appt-modal .am-hint{ color:var(--text3); }

/* Repeating-scope + Google note blocks */
#appt-modal .am-scope{ margin:10px 0 2px; padding:10px 12px; background:var(--surface2); border-radius:var(--r-xs,8px); }
#appt-modal .am-scope .d1nwaory{ font-size:12.5px; font-weight:600; color:var(--text2); margin-bottom:6px; }
#appt-modal .am-scope label{ display:inline-flex; align-items:center; gap:6px; margin-right:16px; font-size:13px; }
#appt-modal .am-scope input{ accent-color:var(--brand-ink); }
#appt-modal .am-gnote{
  align-items:center; gap:8px; margin:10px 0 2px; padding:10px 12px;
  background:color-mix(in srgb,var(--blue) 8%,transparent); border-radius:var(--r-xs,8px);
  font-size:12px; color:var(--blue);
}

/* ── Guests panel (right column) ── */
#appt-modal .am-guests-hd{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text2); margin-bottom:10px; }
#appt-modal .am-guests-hd i{ font-size:18px; color:var(--text3); }
#appt-modal #appt-client-hint{ width:100%; justify-content:center; }
#appt-modal .am-gp{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
#appt-modal .am-gp-hd{ font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--text3); margin-bottom:8px; }
#appt-modal .am-gp .am-chk{ padding:5px 0; font-size:13px; }

/* ── Find a time tab ── */
#appt-modal #appt-pane-findtime{ padding:4px 2px; }
#appt-modal .am-ft-note{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text3); margin-bottom:10px; }
#appt-modal .am-ft-note i{ font-size:15px; }
#appt-modal .am-ft-allday{ font-size:12.5px; color:var(--text2); background:var(--surface2); border-radius:var(--r-xs,8px); padding:8px 10px; margin-bottom:10px; }
#appt-modal .am-ft-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
#appt-modal .am-ft-slot{ display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--r-xs,8px); font-size:13px; text-align:left; }
#appt-modal .am-ft-time{ font-weight:700; color:var(--text2); flex:0 0 46px; }
#appt-modal .am-ft-ev{ color:var(--text3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#appt-modal button.am-ft-free{ appearance:none; background:var(--surface); cursor:pointer; font:inherit; width:100%; }
#appt-modal button.am-ft-free .am-ft-ev{ color:var(--green); }
#appt-modal button.am-ft-free:hover{ border-color:var(--brand-ink); background:color-mix(in srgb,var(--brand-ink) 8%,transparent); }
#appt-modal .am-ft-busy{ background:var(--surface2); }
#appt-modal .am-ft-busy .am-ft-time{ color:var(--text3); }
#appt-modal .am-ft-sel{ border-color:var(--brand-ink); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-ink) 20%,transparent); }
#appt-modal .am-ft-loading{ color:var(--text3); font-size:13px; padding:14px 2px; }

/* ── Footer (Delete / View Job — edit mode only) ── */
#appt-modal .am-foot{ display:flex; gap:8px; padding:12px 20px; border-top:1px solid var(--border); }

/* ── Mobile: stack the two columns, full-height sheet ── */
@media (max-width:768px){
  #appt-modal .modal.am-modal{ width:100vw; max-width:100vw; max-height:100vh; height:100vh; border-radius:0; }
  #appt-modal .am-cols{ grid-template-columns:1fr; }
  #appt-modal .am-right{ border-left:0; border-top:1px solid var(--border); }
  #appt-modal .am-ft-grid{ grid-template-columns:1fr; }
  #appt-modal .am-head-actions .btn{ padding-left:14px; padding-right:14px; }
}