/* The support pages — ticket lookup and the ticket's own page
   (templates/support/) and the staff support desk (staff_panel/support/) —
   on the Portexa IQ tokens (components/_iq_theme.html). `pp-*` is their
   vocabulary: KPI strip, tiles, the forms and the ticket thread.
   About, Services and Contact moved to the public design system's
   content-page layer (portexa-design-system.css, docs/PORTEXA_UI_SYSTEM.md);
   their hero, steps, values, CTA and contact-list rules were retired here. */

.pp { font-size: .9rem; line-height: 1.65; color: var(--tm-text-2); }
.pp-wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }

/* Buttons */
.pp-btn { display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 1.05rem; border-radius: 11px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 0; font-family: inherit; }
.pp-btn.accent { color: #fff; background: var(--tm-accent); } .pp-btn.accent:hover { filter: brightness(1.08); }
.pp-btn.line { color: var(--tm-text-2); background: var(--tm-bg); border: 1px solid var(--tm-line); } .pp-btn.line:hover { color: var(--tm-accent); border-color: var(--tm-accent); }

/* KPI strip */
.pp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 768px) { .pp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pp-kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .pp-kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pp-kpi { padding: .75rem .9rem; border-radius: 14px; border: 1px solid var(--tm-line); border-top: 3px solid var(--tm-accent); background: var(--tm-bg); box-shadow: var(--tm-shadow); }
.pp-kpi span { display: block; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-muted); }
.pp-kpi b { display: block; margin-top: .15rem; font-size: 1.35rem; font-weight: 900; color: var(--tm-text); line-height: 1.1; }
.pp-kpi small { display: block; margin-top: .15rem; font-size: .66rem; color: var(--tm-muted); }
.pp-kpi.up { border-top-color: var(--tm-up); } .pp-kpi.info { border-top-color: var(--tm-info); } .pp-kpi.warn { border-top-color: var(--tm-warn); } .pp-kpi.down { border-top-color: var(--tm-down); }

/* Sections and tiles */
.pp-section > .tm-head h3 { font-size: .95rem; }
.pp-body { padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.pp-body > p { margin: 0; max-width: 52rem; }
.pp-body strong { color: var(--tm-text); }
.pp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.pp-cols.main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1023px) { .pp-cols.main { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .pp-cols { grid-template-columns: 1fr; } }
.pp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
@media (min-width: 1024px) { .pp-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pp-tiles { grid-template-columns: 1fr; } }
.pp-tile { display: flex; flex-direction: column; gap: .4rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--tm-line); background: var(--tm-bg-soft); text-decoration: none; color: inherit; min-width: 0; }
a.pp-tile:hover { border-color: var(--tm-accent); background: var(--tm-bg); }
.pp-tile > i { width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: .9rem; color: var(--tm-accent); background: var(--tm-accent-bg); }
.pp-tile.up > i { color: var(--tm-up); background: var(--tm-up-bg); } .pp-tile.info > i { color: var(--tm-info); background: var(--tm-info-bg); } .pp-tile.warn > i { color: var(--tm-warn); background: var(--tm-warn-bg); } .pp-tile.down > i { color: var(--tm-down); background: var(--tm-down-bg); }
.pp-tile b { font-size: .84rem; font-weight: 800; color: var(--tm-text); }
.pp-tile p { margin: 0; font-size: .74rem; line-height: 1.55; color: var(--tm-muted); }
.pp-tile ul { margin: .2rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: var(--tm-text-2); }
.pp-tile ul li::before { content: "✓"; margin-right: .4rem; color: var(--tm-up); font-weight: 800; }
.pp-tile .tag { align-self: flex-start; }

/* Contact form and details */
.pp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem .8rem; }
@media (max-width: 639px) { .pp-form { grid-template-columns: 1fr; } }
.pp-form .full { grid-column: 1 / -1; }
.pp-field label { display: block; margin-bottom: .28rem; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-muted); }
.pp-field label .req { color: var(--tm-down); margin-left: .15rem; }
.pp-input { width: 100%; padding: .58rem .75rem; font-size: .84rem; color: var(--tm-text); background: var(--tm-bg); border: 1px solid var(--tm-line); border-radius: 11px; font-family: inherit; }
.pp-input:focus { outline: 2px solid var(--tm-accent-bg); border-color: var(--tm-accent); }
textarea.pp-input { min-height: 7rem; resize: vertical; }
.pp-field small { display: block; margin-top: .22rem; font-size: .64rem; color: var(--tm-muted); }
.pp-field .err { display: block; margin-top: .22rem; font-size: .66rem; font-weight: 700; color: var(--tm-down); }
.pp-field.has-error .pp-input { border-color: var(--tm-down); }
.pp-alert { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .9rem; border-radius: 12px; font-size: .78rem; font-weight: 600; line-height: 1.5; }
.pp-alert.success { color: var(--tm-up); background: var(--tm-up-bg); } .pp-alert.error { color: var(--tm-down); background: var(--tm-down-bg); } .pp-alert.warning { color: var(--tm-warn); background: var(--tm-warn-bg); } .pp-alert.info { color: var(--tm-info); background: var(--tm-info-bg); }
.pp-alert i { margin-top: .15rem; }

/* Ticket: status pills, timeline, thread */
.pp-status { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pp-status.open { color: var(--tm-info); background: var(--tm-info-bg); } .pp-status.in_progress { color: var(--tm-accent); background: var(--tm-accent-bg); } .pp-status.waiting { color: var(--tm-warn); background: var(--tm-warn-bg); } .pp-status.closed { color: var(--tm-up); background: var(--tm-up-bg); }
.pp-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
@media (max-width: 767px) { .pp-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-tstep { position: relative; padding: .6rem .7rem; border-radius: 12px; border: 1px solid var(--tm-line); background: var(--tm-bg-soft); border-top: 3px solid var(--tm-faint); }
.pp-tstep.done { border-top-color: var(--tm-up); }
.pp-tstep i { font-size: .72rem; color: var(--tm-faint); } .pp-tstep.done i { color: var(--tm-up); }
.pp-tstep b { display: block; margin-top: .25rem; font-size: .74rem; font-weight: 800; color: var(--tm-text); }
.pp-tstep small { display: block; font-size: .64rem; line-height: 1.4; color: var(--tm-muted); }
.pp-thread { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; }
.pp-msg { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .65rem; }
.pp-msg .avatar { width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .72rem; font-weight: 900; color: #fff; background: var(--tm-muted); }
.pp-msg.staff .avatar { background: var(--tm-accent); } .pp-msg.customer .avatar { background: var(--tm-info); } .pp-msg.note .avatar { background: var(--tm-warn); } .pp-msg.system .avatar { background: var(--tm-faint); }
.pp-msg .bubble { padding: .65rem .85rem; border-radius: 12px; border: 1px solid var(--tm-line); background: var(--tm-bg); }
.pp-msg.staff .bubble { background: var(--tm-accent-bg); border-color: transparent; } .pp-msg.note .bubble { background: var(--tm-warn-bg); border-style: dashed; } .pp-msg.system .bubble { background: transparent; border: 0; padding: .15rem 0; }
.pp-msg .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin-bottom: .25rem; font-size: .68rem; color: var(--tm-muted); }
.pp-msg .who b { color: var(--tm-text); font-size: .74rem; }
.pp-msg .text { font-size: .82rem; line-height: 1.6; color: var(--tm-text-2); white-space: pre-wrap; word-break: break-word; }
.pp-msg.system .text { font-size: .68rem; color: var(--tm-muted); font-style: italic; }
.pp-meta { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .35rem .8rem; font-size: .76rem; }
.pp-meta dt { font-weight: 800; color: var(--tm-text); } .pp-meta dd { margin: 0; color: var(--tm-text-2); word-break: break-word; }
@media (max-width: 639px) { .pp-meta { grid-template-columns: 1fr; gap: .1rem; } .pp-meta dd { margin-bottom: .35rem; } }
.pp-num { font-family: var(--font-mono); font-weight: 800; letter-spacing: .04em; color: var(--tm-text); }

/* Phones */
@media (max-width: 639px) {
  .pp-body { padding: .8rem; }
  .pp-kpi b { font-size: 1.1rem; }
  .pp-section > .tm-head { flex-wrap: wrap; gap: .4rem; }
}