/* ============================================================
   PropertyDesk — Maintenance Detail Block
   Prefix: .pdmnt-
   Depends on: node-detail.css (shared .pdnd-* styles)
   ============================================================ */

/* ---- Priority badges ---- */
.pdmnt-pr {
  display: inline-flex; align-items: center;
  padding: .2rem .65rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.pdmnt-pr-emergency { background: #fee2e2; color: #991b1b; }
.pdmnt-pr-high      { background: #ffedd5; color: #9a3412; }
.pdmnt-pr-medium    { background: #fef3c7; color: #92400e; }
.pdmnt-pr-low       { background: #f3f4f6; color: #6b7280; }

/* ---- Two-column body ---- */
.pdmnt-body {
  display: grid; grid-template-columns: 1fr 290px;
  background: #fff; border: 1px solid #e5e7eb; border-top: none;
}
.pdmnt-main {
  padding: 1.1rem 1.25rem;
  border-right: 1px solid #e5e7eb;
}
.pdmnt-side { padding: .9rem 1rem; }
.pdmnt-section-lbl {
  font-size: .67rem; font-weight: 700; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .55rem;
}
.pdmnt-desc {
  font-size: .88rem; color: #374151; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
}
.pdmnt-desc p { margin: 0 0 .4rem; }

/* ---- Sidebar metadata rows ---- */
.pdmnt-meta-row {
  display: flex; gap: .4rem; align-items: flex-start;
  padding: .38rem 0; border-bottom: 1px solid #f3f4f6;
  font-size: .83rem;
}
.pdmnt-meta-row:last-child { border-bottom: none; }
.pdmnt-meta-lbl { flex: 0 0 84px; color: #6b7280; font-size: .73rem; font-weight: 700; }
.pdmnt-meta-val { flex: 1; color: #111827; }
.pdmnt-cost-val { font-weight: 700; color: #2e8b57; }

/* ---- Status workflow buttons ---- */
.pdmnt-workflow {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin-top: .5rem;
}
.pdmnt-status-btn {
  padding: .42rem 1.05rem; border-radius: 6px; font-size: .82rem;
  font-weight: 600; cursor: pointer; border: 1.5px solid; transition: all .15s;
  line-height: 1.2;
}

/* Primary — filled green, the "expected next step" in the workflow */
.pdmnt-status-btn--primary {
  background: #1a5c38; color: #fff !important; border-color: #1a5c38;
  box-shadow: 0 1px 3px rgba(26,92,56,.18);
}
.pdmnt-status-btn--primary:hover {
  background: #155030; border-color: #155030;
  box-shadow: 0 2px 6px rgba(26,92,56,.28);
  transform: translateY(-1px);
}

/* Secondary — outlined, the alternate/escape transition */
.pdmnt-status-btn--secondary {
  background: #fff; color: #475569; border-color: #cbd5e1;
}
.pdmnt-status-btn--secondary:hover {
  background: #f1f5f9; color: #1e293b; border-color: #94a3b8;
}

/* Mark-action color hints (only apply when NOT primary/secondary
   — kept for backwards compatibility / future use) */
.pdmnt-status-btn:not(.pdmnt-status-btn--primary):not(.pdmnt-status-btn--secondary).mark-progress { color: #92400e; border-color: #92400e; background: #fff; }
.pdmnt-status-btn:not(.pdmnt-status-btn--primary):not(.pdmnt-status-btn--secondary).mark-progress:hover { background: #92400e; color: #fff; }
.pdmnt-status-btn:not(.pdmnt-status-btn--primary):not(.pdmnt-status-btn--secondary).mark-closed   { color: #166534; border-color: #166534; background: #fff; }
.pdmnt-status-btn:not(.pdmnt-status-btn--primary):not(.pdmnt-status-btn--secondary).mark-closed:hover { background: #166534; color: #fff; }
.pdmnt-status-btn:not(.pdmnt-status-btn--primary):not(.pdmnt-status-btn--secondary).mark-reopen   { color: #1e40af; border-color: #1e40af; background: #fff; }
.pdmnt-status-btn:not(.pdmnt-status-btn--primary):not(.pdmnt-status-btn--secondary).mark-reopen:hover { background: #1e40af; color: #fff; }

.pdmnt-status-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.pdmnt-sw-msg     { font-size: .78rem; font-weight: 600; }
.pdmnt-sw-msg.ok  { color: #166534; }
.pdmnt-sw-msg.err { color: #991b1b; }

/* ---- Activity timeline ---- */
.pdmnt-activity {
  background: #fff; border: 1px solid #e5e7eb; border-top: none;
  padding: 1.1rem 1.25rem;
}
.pdmnt-comment {
  display: flex; gap: .75rem; margin-bottom: .9rem;
}
.pdmnt-comment-dot {
  flex: 0 0 9px; height: 9px; width: 9px; border-radius: 50%;
  background: #2e8b57; margin-top: .45rem; flex-shrink: 0;
}
.pdmnt-comment-dot.sys { background: #d1d5db; }
.pdmnt-comment-body { flex: 1; }
.pdmnt-comment-meta {
  font-size: .73rem; color: #6b7280; margin-bottom: .3rem;
}
.pdmnt-comment-meta strong { color: #374151; }
.pdmnt-comment-text {
  font-size: .86rem; color: #111827; line-height: 1.55;
  background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 6px; padding: .5rem .8rem;
}
.pdmnt-comment-text p { margin: 0 0 .3rem; }
.pdmnt-comment-text p:last-child { margin: 0; }
.pdmnt-no-comments { font-size: .83rem; color: #9ca3af; font-style: italic; }

/* ---- Add comment form ---- */
.pdmnt-add-comment {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb;
}
.pdmnt-add-lbl {
  font-size: .73rem; font-weight: 700; color: #374151;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem;
}
.pdmnt-comment-ta {
  width: 100%; min-height: 85px; padding: .6rem .8rem;
  border: 1px solid #d1d5db; border-radius: 6px;
  font-size: .85rem; font-family: inherit; resize: vertical;
  box-sizing: border-box; transition: border-color .15s;
}
.pdmnt-comment-ta:focus {
  outline: none; border-color: #2e8b57;
  box-shadow: 0 0 0 3px rgba(46,139,87,.1);
}
.pdmnt-comment-actions {
  display: flex; justify-content: flex-end; margin-top: .45rem;
}
.pdmnt-comment-btn {
  padding: .38rem 1rem; background: #2e8b57; color: #fff;
  border: none; border-radius: 6px;
  font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.pdmnt-comment-btn:hover    { background: #166534; }
.pdmnt-comment-btn:disabled { background: #9ca3af; cursor: not-allowed; }

/* ============================================================
   Phase 5 polish additions
   ============================================================ */

/* Hide Drupal's default View/Edit/Delete local-task tabs on the
   maintenance ticket node view page. The MaintenanceDetailBlock
   header already provides Edit and Delete buttons; the local tabs
   are duplicates and read as platform leakage. */
nav.tabs,
ul.tabs.primary,
ul.tabs--primary,
.tabs--primary,
.block-local-tasks-block,
.local-tasks-block {
  display: none !important;
}

/* ---- Status + Priority pills (canonical — match /maintenance) ---- */
/* These are duplicated from maintenance-page.css so they work on the
   node detail page too (different CSS load context). */
.pd-mp-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600;
  text-transform: capitalize; white-space: nowrap;
}
.pd-mp-pill__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pd-mp-pill--new         { background: #ccfbf1; color: #115e59; }
.pd-mp-pill--new         .pd-mp-pill__dot { background: #14b8a6; }
.pd-mp-pill--assigned    { background: #dcfce7; color: #166534; }
.pd-mp-pill--assigned    .pd-mp-pill__dot { background: #22c55e; }
.pd-mp-pill--in_progress { background: #fef3c7; color: #92400e; }
.pd-mp-pill--in_progress .pd-mp-pill__dot { background: #f59e0b; }
.pd-mp-pill--done        { background: #dbeafe; color: #1e40af; }
.pd-mp-pill--done        .pd-mp-pill__dot { background: #3b82f6; }
.pd-mp-pill--closed      { background: #f3f4f6; color: #6b7280; }
.pd-mp-pill--closed      .pd-mp-pill__dot { background: #9ca3af; }

.pd-mp-pri {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600;
  text-transform: capitalize; white-space: nowrap;
}
.pd-mp-pri__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pd-mp-pri--emergency { background: #fee2e2; color: #991b1b; }
.pd-mp-pri--emergency .pd-mp-pri__dot { background: #ef4444; }
.pd-mp-pri--high      { background: #ffedd5; color: #9a3412; }
.pd-mp-pri--high      .pd-mp-pri__dot { background: #f97316; }
.pd-mp-pri--normal    { background: #e0e7ff; color: #3730a3; }
.pd-mp-pri--normal    .pd-mp-pri__dot { background: #6366f1; }
.pd-mp-pri--low       { background: #f3f4f6; color: #6b7280; }
.pd-mp-pri--low       .pd-mp-pri__dot { background: #9ca3af; }

/* ---- Header days-open badge ---- */
.pdmnt-days-badge {
  display: inline-flex; align-items: center;
  padding: .2rem .65rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  margin-left: .25rem;
}
.pdmnt-days-cold { background: #f3f4f6; color: #6b7280; }
.pdmnt-days-warm { background: #fef3c7; color: #92400e; }
.pdmnt-days-hot  { background: #fee2e2; color: #991b1b; }

/* ---- Muted spans in sidebar ---- */
.pdmnt-muted { color: #9ca3af; font-style: italic; font-size: .85rem; }

/* ---- Linked accounting journal block ---- */
.pdmnt-jrn-link {
  display: inline-flex; align-items: center; gap: .35rem;
  flex-wrap: wrap;
  text-decoration: none !important;
  color: #0f6e56;
  font-size: .82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
}
.pdmnt-jrn-link:hover { color: #1d9e75; text-decoration: underline !important; }
.pdmnt-jrn-status {
  display: inline-block; padding: 1px 7px;
  border-radius: 3px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  flex-shrink: 0;
}
.pdmnt-jrn-draft  { background: #fef3c7; color: #92400e; }
.pdmnt-jrn-posted { background: #dcfce7; color: #166534; }

/* ---- Media panels (Photos + Attachments) ---- */
.pdmnt-media-panel {
  background: #fff; border: 1px solid #e5e7eb; border-top: none;
  padding: 1.1rem 1.25rem;
}
.pdmnt-media-count {
  font-weight: 500; color: #94a3b8; font-size: .68rem;
}

/* ---- Photos thumbnail strip ---- */
.pdmnt-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .6rem;
}
.pdmnt-photo-thumb {
  display: block; aspect-ratio: 1 / 1;
  border-radius: 6px; overflow: hidden;
  border: 1px solid #e5e7eb;
  transition: transform .12s, box-shadow .15s, border-color .15s;
  cursor: zoom-in;
}
.pdmnt-photo-thumb:hover {
  border-color: #1d9e75;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.pdmnt-photo-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---- Attachments list ---- */
.pdmnt-attachments {
  display: flex; flex-direction: column; gap: .3rem;
}
.pdmnt-attach-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center; gap: .55rem;
  padding: .5rem .75rem;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 6px;
  text-decoration: none !important;
  color: #374151;
  font-size: .85rem;
  transition: background .12s, border-color .12s;
}
.pdmnt-attach-row:hover {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.pdmnt-attach-icon { font-size: 1.1rem; line-height: 1; }
.pdmnt-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdmnt-attach-size { color: #94a3b8; font-size: .75rem; font-variant-numeric: tabular-nums; }

/* ============================================================
   Phase 8 — SLA badges + State History timeline
   ============================================================ */

/* ---- SLA badge in header ---- */
.pdmnt-sla {
  display: inline-flex; align-items: center;
  padding: .2rem .65rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  margin-left: .25rem;
}
.pdmnt-sla--ok       { background: #dcfce7; color: #166534; }
.pdmnt-sla--warn     { background: #fef3c7; color: #92400e; }
.pdmnt-sla--breach   { background: #fee2e2; color: #991b1b; }
.pdmnt-sla--resolved { background: #dbeafe; color: #1e40af; }

/* ---- State History list ---- */
.pdmnt-history {
  background: #fff; border: 1px solid #e5e7eb; border-top: none;
  padding: 1rem 1.25rem;
}
.pdmnt-history-list {
  display: flex; flex-direction: column; gap: .6rem;
}
.pdmnt-hist-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: .75rem;
  align-items: flex-start;
  padding: .4rem 0;
}
.pdmnt-hist-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #2e8b57;
  margin-top: .35rem;
  box-shadow: 0 0 0 3px #f0fdf4;
}
.pdmnt-hist-dot--new          { background: #14b8a6; box-shadow: 0 0 0 3px #ccfbf1; }
.pdmnt-hist-dot--assigned     { background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
.pdmnt-hist-dot--in_progress  { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
.pdmnt-hist-dot--done         { background: #3b82f6; box-shadow: 0 0 0 3px #dbeafe; }
.pdmnt-hist-dot--closed       { background: #9ca3af; box-shadow: 0 0 0 3px #f3f4f6; }

.pdmnt-hist-body { min-width: 0; }
.pdmnt-hist-arrow {
  font-size: .86rem; font-weight: 600; color: #111827;
  line-height: 1.3;
}
.pdmnt-hist-meta {
  font-size: .74rem; color: #94a3b8;
  margin-top: .12rem;
}

/* ============================================================
   Phase 7 — Costs panel
   ============================================================ */
.pdmnt-costs-panel {
  background: #fff; border: 1px solid #e5e7eb; border-top: none;
  padding: 1rem 1.25rem;
}
.pdmnt-costs-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  font-size: .67rem; font-weight: 700; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .85rem;
  flex-wrap: wrap;
}
.pdmnt-bp {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; text-transform: none; letter-spacing: 0;
  padding: .2rem .65rem; border-radius: 999px;
  font-weight: 600;
}
.pdmnt-bp__lbl { color: #94a3b8; font-weight: 500; }
.pdmnt-bp--landlord { background: #dcfce7; color: #166534; }
.pdmnt-bp--tenant   { background: #dbeafe; color: #1e40af; }
.pdmnt-bp--split    { background: #fef3c7; color: #92400e; }

.pdmnt-costs-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: .65rem;
}
.pdmnt-cost-cell {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  padding: .65rem .85rem;
}
.pdmnt-cost-cell--final {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.pdmnt-cost-cell__lbl {
  font-size: .68rem; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .25rem;
}
.pdmnt-cost-cell__val {
  font-size: 1rem; font-weight: 700; color: #111827;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.pdmnt-cost-cell--final .pdmnt-cost-cell__val { color: #166534; }
.pdmnt-cost-cell__var {
  margin-top: .35rem;
}
.pdmnt-cost-var {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: .1rem .45rem; border-radius: 3px;
  letter-spacing: 0; text-transform: none;
}
.pdmnt-cost-var--over  { background: #fee2e2; color: #991b1b; }
.pdmnt-cost-var--under { background: #dcfce7; color: #166534; }
.pdmnt-cost-var--on    { background: #e0e7ff; color: #3730a3; }

@media (max-width: 640px) {
  .pdmnt-costs-grid { grid-template-columns: 1fr; }
}

/* ---- Activity panel polish — comment form now on top ---- */
.pdmnt-activity .pdmnt-add-comment {
  margin: 0 0 1rem 0;
  padding: 0 0 .9rem 0;
  border-top: none;
  border-bottom: 1px solid #e5e7eb;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .pdmnt-body { grid-template-columns: 1fr; }
  .pdmnt-main { border-right: none; border-bottom: 1px solid #e5e7eb; }
  .pdmnt-photos { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .pdmnt-days-badge { font-size: .68rem; }
}