/* PortalX — shared styles for rich text display and the inline editor.
   Served from the plugin public/ directory (no auth), so both the intake form
   and the ticket detail page can share one source of truth. */

/* ---- Rendered ticket / follow-up content -------------------------------- */
/* Tailwind's preflight resets these, which would otherwise flatten rich
   content coming from the editor or from inbound email. */
.portalx-rich { overflow-wrap: anywhere; }
.portalx-rich p { margin: 0 0 .75rem; }
.portalx-rich ul, .portalx-rich ol { margin: 0 0 .75rem 1.25rem; list-style: revert; }
.portalx-rich b, .portalx-rich strong { font-weight: 700; }
.portalx-rich i, .portalx-rich em { font-style: italic; }
.portalx-rich u { text-decoration: underline; }
.portalx-rich a { color: #0f766e; text-decoration: underline; }
.portalx-rich img { max-width: 100%; height: auto; }
.portalx-rich table { border-collapse: collapse; max-width: 100%; }
.portalx-rich td, .portalx-rich th { border: 1px solid #cbd5e1; padding: .25rem .5rem; }
.portalx-rich blockquote { border-left: 3px solid #cbd5e1; padding-left: .75rem;
                           margin: 0 0 .75rem; color: #64748b; }
.portalx-rich h1, .portalx-rich h2, .portalx-rich h3 { font-weight: 700; margin: .5rem 0; }

.portalx-attachment { display: inline-block; padding: .15rem .5rem; border: 1px dashed #cbd5e1;
                      border-radius: .375rem; background: #f8fafc; color: #64748b;
                      font-size: .75rem; font-style: italic; }

/* ---- Ticket list -------------------------------------------------------- */
/* Long subjects: a table cell ignores max-width unless the table is fixed, so
   the clamp lives on an inner block element instead. */
.portalx-subject { display: block; max-width: 32rem; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }

/* Long agency names ("Kementerian Ekonomi Jabatan Perangkaan Malaysia (DOSM)")
   otherwise wrap to four lines and triple the height of every row. */
.portalx-agency { display: block; max-width: 11rem; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }

/* Below sm, the table reflows into cards. Table semantics are preserved for
   screen readers; only the visual layout changes. */
@media (max-width: 640px) {
    .portalx-table thead { display: none; }
    .portalx-table, .portalx-table tbody { display: block; }
    .portalx-table tr { display: block; border: 1px solid #e2e8f0; border-radius: .5rem;
                        padding: .5rem .25rem; margin: 0 .75rem .75rem; background: #fff; }
    .portalx-table td { display: flex; align-items: center; justify-content: space-between;
                        gap: 1rem; padding: .4rem .75rem !important; text-align: left !important; }
    .portalx-table td::before { content: attr(data-label); flex: none; font-size: .65rem;
                                font-weight: 700; text-transform: uppercase;
                                letter-spacing: .05em; color: #94a3b8; }
    .portalx-subject, .portalx-agency { max-width: 60vw; text-align: right; }
}

/* ---- Inline editor ------------------------------------------------------ */
.portalx-editor { border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff;
                  overflow: hidden; }
.portalx-editor:focus-within { border-color: #23a38f; box-shadow: 0 0 0 1px #23a38f; }
.portalx-editor--error { border-color: #ef4444; }

.portalx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
                   padding: .5rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }

/* 30px is fine for a mouse but is a small touch target, so grow it on
   touch/coarse pointers (see the media query below). */
.portalx-tool { min-width: 1.85rem; height: 1.85rem; padding: 0 .4rem; border-radius: .25rem;
                border: 1px solid transparent; background: transparent; color: #475569;
                font-size: .8rem; line-height: 1; cursor: pointer; }
.portalx-tool { display: inline-flex; align-items: center; justify-content: center; }
.portalx-tool:hover { background: #e2e8f0; color: #1e293b; }
.portalx-tool[aria-pressed="true"] { background: #e2e8f0; border-color: #cbd5e1; color: #0f766e; }
.portalx-tool svg { width: .95rem; height: .95rem; display: block; }

/* Divider between the text-style group and the list group. */
.portalx-sep { width: 1px; height: 1.1rem; margin: 0 .3rem; background: #cbd5e1; }

.portalx-surface { min-height: 8rem; max-height: 22rem; overflow-y: auto; padding: .75rem;
                   font-size: .875rem; line-height: 1.6; color: #334155; outline: none; }
.portalx-surface:empty::before { content: attr(data-placeholder); color: #94a3b8; }

.portalx-editor-error { margin-top: .35rem; font-size: .75rem; font-weight: 600; color: #dc2626; }

@media (pointer: coarse) {
    .portalx-tool { min-width: 2.75rem; height: 2.75rem; font-size: .95rem; }
}