/* ===== complaints_log_html (HTML form, scoped) =====
   The Complaints Log screen, linked from anvil.yaml native_deps.head_html.

   SCOPE. .cl-page is the form's root. Rules that paint the screen are wrapped
   :where(.cl-page), which adds no specificity. Three shapes name the root
   itself and stay bare: the .cl-page rule, its two @media overrides, and
   [data-theme="dark"] .cl-page (the attribute sits on <html>). The colour
   variables also go on .cl-modal-scope, bare, for the portaled dialogs.

   The detail and log dialogs render into #px-modal-portal, outside .cl-page,
   so everything they paint stays bare: .cl-detail-*, .cl-btn-resolve*,
   .cl-log-form and its descendants, .cl-select-search, .cl-multi-hint,
   .cl-multi-count, .cl-cascade-section and the dark arm of the multi-select
   option rules.

   .cs-loading is the dependency comments panel's class, and that panel also
   mounts on other screens. This sheet is in the document on every page, so
   the hide is scoped to .cl-comments-mount, which complaints_log_html puts on
   the panel's root before it mounts it.

   The root is a flex item of main's scrolling content slot, so it carries no
   height or overflow. width, padding, position: relative, isolation and
   z-index: 0 stay: pxShowLoading pins #cl-loading against this element, and
   the stacking context holds that overlay under the dependency's modals.

   This file declares no .px-* name, so it ties with no dependency rule. */

/* Custom properties inherit down the DOM only. Each modal this screen
   builds is portaled to #px-modal-portal, a sibling of the screen slot,
   so vars declared on .cl-page alone are unset inside it. .cl-modal-scope
   goes on each modal's root node, never on the shared portal, or this
   screen's purple leaks into every other screen's dialogs. It reaches
   the modal BODY only; the title badge is painted inline instead
   (see _status_badge_html). */
.cl-page,
.cl-modal-scope {
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-subtle: rgba(124, 58, 237, 0.10);
  --px-loading-accent: #7c3aed;
  --cl-open: #f59e0b;
  --cl-open-bg: rgba(245, 158, 11, 0.12);
  --cl-resolved: #10b981;
  --cl-resolved-bg: rgba(16, 185, 129, 0.12);
  --cl-overdue: #ef4444;
  --cl-overdue-bg: rgba(239, 68, 68, 0.12);
}

.cl-page {
  width: 100%;
  font-family: var(--px-font);
  background: var(--px-bg-deep);
  padding: 24px 32px;
  color: var(--px-text-primary);
  position: relative;
  isolation: isolate;
  z-index: 0;
}

[data-theme="dark"] .cl-page,
[data-theme="dark"] .cl-modal-scope {
  --accent: #a78bfa;
  --accent-hover: #8b5cf6;
  --accent-subtle: rgba(167, 139, 250, 0.18);
  --cl-open-bg: rgba(245, 158, 11, 0.20);
  --cl-resolved-bg: rgba(16, 185, 129, 0.18);
  --cl-overdue-bg: rgba(239, 68, 68, 0.18);
}

/* --- Header --- */
:where(.cl-page) .cl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

:where(.cl-page) .cl-title-block { display: flex; flex-direction: column; }

:where(.cl-page) .cl-btn-log {
  font-family: var(--px-font);
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: var(--px-radius-sm);
  padding: 10px 20px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--accent);
  color: #fff;
}

:where(.cl-page) .cl-btn-log:hover { background: var(--accent-hover); }
:where(.cl-page) .cl-btn-log:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Filters --- */
:where(.cl-page) .cl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  align-items: flex-end;
}

:where(.cl-page) .cl-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:where(.cl-page) .cl-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--px-text-muted);
}

:where(.cl-page) .cl-filter-input,
:where(.cl-page) .cl-filter-select {
  font-family: var(--px-font);
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  background: var(--px-bg-elevated);
  color: var(--px-text-primary);
  min-width: 140px;
  outline: none;
  transition: border-color 0.15s;
}

:where(.cl-page) .cl-filter-input:focus,
:where(.cl-page) .cl-filter-select:focus {
  border-color: var(--accent);
}

:where(.cl-page) .cl-filter-input::placeholder {
  color: var(--px-text-muted);
}

:where(.cl-page) .cl-search-box { min-width: 220px; }

/* --- Table --- */
:where(.cl-page) .cl-table-wrap {
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  overflow: hidden;
  background: var(--px-bg-elevated);
}

:where(.cl-page) .cl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

:where(.cl-page) .cl-table thead th {
  background: var(--px-bg-surface);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--px-text-muted);
  border-bottom: 1px solid var(--px-border);
  white-space: nowrap;
}

:where(.cl-page) .cl-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}

:where(.cl-page) .cl-table tbody tr:hover {
  background: var(--accent-subtle);
}

:where(.cl-page) .cl-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--px-border);
  vertical-align: top;
}

:where(.cl-page) .cl-table tbody tr:last-child td {
  border-bottom: none;
}

:where(.cl-page) .cl-summary-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Status badges --- */
:where(.cl-page) .cl-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

:where(.cl-page) .cl-status-open {
  background: var(--cl-open-bg);
  color: var(--cl-open);
}

:where(.cl-page) .cl-status-resolved {
  background: var(--cl-resolved-bg);
  color: var(--cl-resolved);
}

:where(.cl-page) .cl-status-overdue {
  background: var(--cl-overdue-bg);
  color: var(--cl-overdue);
}

:where(.cl-page) .cl-reply-count {
  font-size: 11px;
  color: var(--px-text-muted);
  margin-left: 4px;
}

/* --- Empty state --- */
:where(.cl-page) .cl-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--px-text-muted);
  font-size: 14px;
}

/* --- Detail modal styles --- */
.cl-detail-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px 12px 0 12px;
  font-size: 13px;
}

.cl-detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cl-detail-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--px-text-muted);
}

.cl-detail-value {
  color: var(--px-text-primary);
}

.cl-detail-description {
  padding: 16px;
  margin: 0 12px 16px 12px;
  background: var(--px-bg-surface);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.6;
}

.cl-detail-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding: 0 12px 8px 12px;
}

.cl-btn-resolve {
  font-family: var(--px-font);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border: none;
  border-radius: var(--px-radius-sm);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.cl-btn-resolve-open {
  background: var(--cl-resolved-bg);
  color: var(--cl-resolved);
}

.cl-btn-resolve-open:hover {
  background: var(--cl-resolved);
  color: #fff;
}

.cl-btn-resolve-undo {
  background: var(--cl-open-bg);
  color: var(--cl-open);
}

.cl-btn-resolve-undo:hover {
  background: var(--cl-open);
  color: #fff;
}

/* --- Count bar --- */
:where(.cl-page) .cl-count-bar {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--px-text-muted);
  margin-bottom: 12px;
}

:where(.cl-page) .cl-count-bar span { font-weight: 600; }

/* Hide the comments "Loading comments..." flash in modals */
.cl-comments-mount .cs-loading { display: none; }

/* Log complaint form */
.cl-log-form { display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; }
.cl-log-form label { font-size: 12px; font-weight: 600; color: var(--px-text-primary); display: flex; flex-direction: column; gap: 4px; }
.cl-log-form input, .cl-log-form select, .cl-log-form textarea {
  font-family: var(--px-font);
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  background: var(--px-bg-elevated);
  color: var(--px-text-primary);
  outline: none;
}
.cl-log-form input:focus, .cl-log-form select:focus, .cl-log-form textarea:focus { border-color: var(--accent); }
.cl-log-form textarea { min-height: 120px; resize: vertical; }
.cl-log-form .cl-required::after { content: ' *'; color: var(--cl-overdue); }

/* Multi-select dropdowns for link fields */
.cl-select-search {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 1px dashed var(--px-border) !important;
  margin-bottom: 0 !important;
  font-size: 12px !important;
  padding: 8px 10px !important;
}
.cl-select-search::placeholder { font-style: italic; }
.cl-log-form select[multiple] {
  padding: 4px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.cl-log-form select[multiple] option {
  padding: 6px 10px;
  border-radius: 4px;
  margin: 1px 0;
  cursor: pointer;
}
.cl-log-form select[multiple] option:checked, .cl-log-form select[multiple] option.cl-selected {
  background: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 600;
}
[data-theme="dark"] .cl-log-form select[multiple] option:checked, [data-theme="dark"] .cl-log-form select[multiple] option.cl-selected {
  background: rgba(124, 58, 237, 0.35) !important;
  color: #c4b5fd !important;
}
.cl-multi-hint {
  font-size: 11px;
  color: var(--px-text-muted);
  font-weight: 400;
  margin-top: 2px;
}
.cl-multi-count {
  font-size: 11px;
  color: var(--px-text-secondary);
  font-weight: 400;
  margin-top: 2px;
}
.cl-cascade-section {
  transition: opacity 0.15s;
}
.cl-cascade-section.cl-disabled {
  opacity: 0.4;
  pointer-events: none;
}

@media (max-width: 900px) {
  .cl-page { padding: 16px; }
  :where(.cl-page) .cl-header { flex-direction: column; align-items: flex-start; }
  :where(.cl-page) .cl-filters { flex-direction: column; }
  :where(.cl-page) .cl-filter-input,
  :where(.cl-page) .cl-filter-select { width: 100%; min-width: unset; }
  .cl-detail-header { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .cl-page { padding: 12px 8px; }
  :where(.cl-page) .cl-table { font-size: 12px; }
  :where(.cl-page) .cl-table thead th,
  :where(.cl-page) .cl-table tbody td { padding: 8px 10px; }
  :where(.cl-page) .cl-summary-cell { max-width: 160px; }
  :where(.cl-page) .cl-th-reporter,
  :where(.cl-page) .cl-td-reporter,
  :where(.cl-page) .cl-th-logged-by,
  :where(.cl-page) .cl-td-logged-by { display: none; }
}