/* =========================================================================
   Task Modal — Variation A (Conservative polish)
   Source: design_handoff_oceanbuilders/02_task_modal/

   Right-side slide-over (480px) replacing the centered modal that was the
   default in app.css. Scoped to #task-modal so the other centered modals
   (avatar crop, report editor, picker, gcal modal) keep their existing
   layout.

   Header: eyebrow + inline title input + close X.
   Description: always visible directly under the header.
   Tabs: Details | Schedule. Tab panes are sibling field-row blocks
   tagged with data-tab="details|schedule"; CSS hides the inactive tab.
   Footer: Archive · Snooze (left) · Cancel · Complete · Save (right).

   Loaded AFTER sc-redesign.css and app.css so its rules win the cascade.
   ========================================================================= */

/* ── Overlay → slide-over ────────────────────────────────────────── */

#task-modal.sc-modal-overlay {
  /* The full-screen overlay still acts as the backdrop, but the inner
     .sc-modal is anchored to the right edge instead of centered. */
  background: rgba(15, 23, 42, 0.18) !important;
  backdrop-filter: blur(2px);
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

#task-modal .sc-modal {
  width: var(--ob-sheet-w, 480px) !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  height: 100vh !important;
  border-radius: 0 !important;
  box-shadow: -16px 0 40px rgba(0,0,0,0.10), -2px 0 0 rgba(0,0,0,0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff;
  font-family: var(--font-sans);
  color: var(--fg-1);
  /* Animate the slide-in. The .sc-modal-overlay toggles display flex
     when opened; transform slides the sheet in from the right. */
  animation: sc-task-slide-in var(--dur-3, 220ms) var(--ease-out) both;
}
@keyframes sc-task-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ── Header (inline title input) ─────────────────────────────────── */

#task-modal .sc-modal-header {
  padding: 16px 18px 14px 22px !important;
  border-bottom: 1px solid var(--border-1) !important;
  flex-shrink: 0;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
#task-modal .sc-modal-header-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#task-modal .sc-modal-eyebrow {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--ob-blue-700) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
}

/* Inline title — the existing element is a contenteditable span. We
   restyle it to look like a borderless input with hover/focus
   affordances, matching the design's tm-sheet-title-input. */
#task-modal .sc-modal-editable-title {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 4px 8px;
  margin: 0 0 0 -8px;
  font-family: var(--ob-font-display, var(--font-sans));
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--fg-1);
  letter-spacing: -0.01em;
  line-height: 1.25;
  border-radius: 5px;
  transition: background var(--dur-1, 120ms) var(--ease-out, ease-out),
              box-shadow var(--dur-1, 120ms) var(--ease-out, ease-out);
  display: block;
}
#task-modal .sc-modal-editable-title:hover { background: var(--neutral-50); }
#task-modal .sc-modal-editable-title:focus {
  background: #fff;
  box-shadow: 0 0 0 2px var(--ob-blue-200);
}
#task-modal .sc-modal-editable-title:empty::before {
  content: attr(data-placeholder);
  color: var(--fg-4);
  font-weight: 500;
}

/* Close X — standalone icon button on the right. The existing
   .sc-modal-close already exists for some modals; we restyle the
   one inside #task-modal specifically. */
#task-modal .sc-modal-close,
#task-modal .sc-task-close {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--fg-3);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  align-self: flex-start;
  transition: background var(--dur-1, 120ms) var(--ease-out, ease-out),
              color var(--dur-1, 120ms) var(--ease-out, ease-out);
}
#task-modal .sc-modal-close:hover,
#task-modal .sc-task-close:hover {
  background: var(--neutral-100);
  color: var(--fg-1);
}

/* Header lock row keeps its position but reads as part of the title
   block. Smaller padding so it doesn't push the title out of line. */
#task-modal #task-lock-row {
  margin-top: 6px;
}

/* ── Always-visible description region ───────────────────────────── */

#task-modal .sc-task-desc-wrap {
  padding: 14px 22px 0;
  flex-shrink: 0;
  background: #fff;
}
#task-modal .sc-task-desc-wrap .sc-field { margin-bottom: 10px; }
#task-modal .sc-task-desc-wrap .sc-field:last-child { margin-bottom: 0; }

/* ── Tabs row ────────────────────────────────────────────────────── */

#task-modal .sc-task-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-1);
  padding: 0 18px;
  flex-shrink: 0;
  background: #fff;
  margin-top: 14px;
}
#task-modal .sc-task-tab {
  height: 38px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-3);
  cursor: pointer;
  position: relative;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-1, 120ms) var(--ease-out, ease-out),
              border-color var(--dur-1, 120ms) var(--ease-out, ease-out);
}
#task-modal .sc-task-tab:hover { color: var(--fg-1); }
#task-modal .sc-task-tab.is-active {
  color: var(--ob-blue-700);
  border-bottom-color: var(--ob-blue);
  font-weight: 600;
}
#task-modal .sc-task-tab-badge {
  display: inline-block;
  margin-left: 6px;
  background: var(--neutral-100);
  color: var(--fg-3);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
#task-modal .sc-task-tab.is-active .sc-task-tab-badge {
  background: var(--ob-blue-100);
  color: var(--ob-blue-700);
}

/* ── Body / tab panes ────────────────────────────────────────────── */

#task-modal .sc-modal-body {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 18px 22px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #fff;
}

/* Tab panes — any direct field/section in #task-fields that's tagged
   with data-tab="details|schedule" only displays when that tab is
   the active one (driven by data-active-tab on #task-fields).
   Untagged blocks (description, comments, subtasks, hidden inputs,
   appointment-fields) always show. */
#task-modal #task-fields[data-active-tab="details"] [data-tab="schedule"],
#task-modal #task-fields[data-active-tab="schedule"] [data-tab="details"] {
  display: none !important;
}

/* ── Footer ──────────────────────────────────────────────────────── */

#task-modal .sc-modal-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px !important;
  border-top: 1px solid var(--border-1) !important;
  background: var(--neutral-50);
  flex-shrink: 0;
  gap: 10px;
}
#task-modal .sc-task-footer-left,
#task-modal .sc-task-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
#task-modal .sc-task-footer-right {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Footer ghost buttons (Archive, Snooze) — quieter than the existing
   sc-btn-secondary; meant to feel like text-buttons. We re-style the
   existing buttons in place by adding the tm-btn-ghost class via JS. */
#task-modal .sc-task-footer .sc-btn-ghost,
#task-modal .sc-task-footer-left .sc-btn-secondary {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--dur-1, 120ms) var(--ease-out, ease-out),
              color var(--dur-1, 120ms) var(--ease-out, ease-out);
}
#task-modal .sc-task-footer .sc-btn-ghost:hover,
#task-modal .sc-task-footer-left .sc-btn-secondary:hover {
  background: var(--neutral-100);
  color: var(--fg-1);
}
/* Block-only Delete keeps a red tint to signal it's destructive. */
#task-modal .sc-task-footer #btn-delete-block {
  color: #b91c1c !important;
  background: transparent !important;
  border: 0 !important;
}
#task-modal .sc-task-footer #btn-delete-block:hover {
  background: #FEF2F2 !important;
}

/* Right side — keep solid Save and Cancel; soften Complete to a
   green ghost-tinted button matching the design's tm-btn-success. */
#task-modal .sc-task-footer-right .sc-btn-primary {
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: var(--ob-blue);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-1, 120ms) var(--ease-out, ease-out);
}
#task-modal .sc-task-footer-right .sc-btn-primary:hover {
  background: var(--ob-blue-600);
}
#task-modal .sc-task-footer-right .sc-btn-secondary {
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--dur-1, 120ms) var(--ease-out, ease-out),
              border-color var(--dur-1, 120ms) var(--ease-out, ease-out);
}
#task-modal .sc-task-footer-right .sc-btn-secondary:hover {
  background: var(--neutral-50);
  color: var(--fg-1);
  border-color: var(--border-3);
}
#task-modal .sc-task-footer-right .sc-btn-complete {
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: var(--pri-low, #2E8A5A);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: filter var(--dur-1, 120ms) var(--ease-out, ease-out);
}
#task-modal .sc-task-footer-right .sc-btn-complete:hover { filter: brightness(1.05); }

/* The ⌘S keyboard hint that briefly shipped here was removed
   per user feedback — it threw off the balance of the right-side
   footer button cluster. The shortcut behavior was reverted too;
   only ⌘+Enter (legacy) saves the modal now. CSS class kept
   removed so any stray references just inherit no styles. */

/* ── Responsive: phone width — full-screen sheet ─────────────────── */

@media (max-width: 768px) {
  #task-modal .sc-modal {
    width: 100vw !important;
    /* Two viewport fixes for iOS Safari:
       1. 100dvh — dynamic viewport, shrinks when the URL bar is
          visible at the bottom (vs 100vh which doesn't shrink, so
          the footer ends up behind the URL bar).
       2. Browsers without dvh fall back to 100vh via the desktop rule. */
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  /* Header padding accounts for the iPhone status-bar / Dynamic
     Island via safe-area-inset-top (the page extends behind the
     status bar because of viewport-fit=cover, so position:fixed
     content starts under the clock/battery icons unless we pad it). */
  #task-modal .sc-modal-header {
    padding: calc(env(safe-area-inset-top, 0) + 14px) 16px 14px !important;
  }
  #task-modal .sc-modal-body {
    padding: 14px 16px 18px !important;
  }
  /* Footer pads for the iOS home indicator + URL bar so Save /
     Cancel / Delete buttons always sit clear of the browser chrome. */
  #task-modal .sc-modal-footer {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0)) !important;
    flex-wrap: wrap;
  }
  #task-modal .sc-task-tabs {
    padding: 0 12px;
  }
  /* iOS Safari auto-zooms when an input/textarea/select with computed
     font-size < 16px is focused, then doesn't zoom back out — the
     user ends up looking at a horizontally-clipped page. Override
     the desktop 13px to 16px on inputs across the task modal so the
     focus stays at the same scale. Same fix applies inside subtasks /
     comments / contenteditable description. */
  #task-modal input[type=text],
  #task-modal input[type=email],
  #task-modal input[type=date],
  #task-modal input[type=time],
  #task-modal input[type=number],
  #task-modal select,
  #task-modal textarea,
  #task-modal .sc-notes-editable,
  #task-modal [contenteditable="true"] {
    font-size: 16px !important;
  }
  /* Date row inside the Schedule tab is a 3-column grid on desktop
     (Start / End / Deadline). On phone width, 33% per column squashes
     each date input to ~110px and the picker icon clips off-screen.
     Stack vertically. */
  #task-modal .sc-field-row {
    grid-template-columns: 1fr !important;
  }
  #task-modal .sc-field-row > .sc-field > label {
    min-height: 0 !important;
  }
  /* Snooze popover anchored from a small button stays put. */
}