/* ============================================================================
   NXDPRO Client Portal — portal-only styles. Builds on cdn.nxdpro.com/nx-core.css
   (the shared PUBLIC design system); reuses its tokens (--nxc-*). Prefix: pf-.
   ============================================================================ */

.pf-main{min-height:60vh;padding-block:clamp(1.5rem,4vw,2.5rem)}

/* Header extras */
.nxc-nav a.is-active{color:var(--nxc-brand-700);background:var(--nxc-brand-50)}
.nxc-nav-acct{display:inline-flex;align-items:center;margin-right:.35rem}
.pf-avatar{width:34px;height:34px;border-radius:9999px;display:grid;place-items:center;
  font-weight:700;font-size:14px;color:#fff;background:var(--nxc-grad)}

/* Flash banners */
.pf-flash{border-radius:var(--nxc-r-sm);padding:.8rem 1rem;margin-bottom:1.3rem;font-size:.92rem;font-weight:500;border:1px solid}
.pf-flash-ok{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.pf-flash-err{background:#fef2f2;border-color:#fecaca;color:#b91c1c}

/* Page head */
.pf-head{margin-bottom:1.4rem}
.pf-head h1{font-family:var(--nxc-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.025em;margin:0;color:var(--nxc-heading)}
.pf-head p{color:var(--nxc-ink-500);font-size:.95rem;margin:.35rem 0 0}

/* Auth card (login / access / set / messages) */
.pf-auth{max-width:25rem;margin:clamp(1rem,5vw,3rem) auto}
.pf-auth .nxc-panel{padding:2rem}
.pf-auth h1{font-family:var(--nxc-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:0 0 .35rem;color:var(--nxc-heading)}
.pf-auth .sub{color:var(--nxc-ink-500);font-size:.92rem;margin:0 0 1.4rem}
.pf-auth .nxc-btn{width:100%}
.pf-auth-foot{text-align:center;margin-top:1.2rem;font-size:.88rem;color:var(--nxc-ink-500)}
.pf-auth-foot a{color:var(--nxc-brand-600);font-weight:600}
.pf-auth-ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:color-mix(in srgb,var(--nxc-brand-500) 12%,#fff);border:1px solid color-mix(in srgb,var(--nxc-brand-500) 20%,transparent);color:var(--nxc-brand-600)}
.pf-auth-ico.err{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.pf-auth-ico svg{width:26px;height:26px}

/* Stat cards */
.pf-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:1.6rem}
@media (min-width:760px){.pf-stats{grid-template-columns:repeat(4,1fr)}}
.pf-stat{background:#fff;border:1px solid var(--nxc-line);border-radius:var(--nxc-r);padding:1.1rem 1.2rem;box-shadow:var(--nxc-shadow-card)}
.pf-stat .k{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nxc-ink-400)}
.pf-stat .v{font-family:var(--nxc-display);font-weight:800;font-size:1.5rem;color:var(--nxc-heading);margin-top:.3rem;letter-spacing:-.02em}
.pf-stat .v.warn{color:var(--nxc-warn)}
.pf-stat .s{font-size:.78rem;color:var(--nxc-ink-400);margin-top:.15rem}

/* Section wrapper */
.pf-section{margin-bottom:1.8rem}
.pf-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:.8rem}
.pf-section-head h2{font-family:var(--nxc-display);font-size:1.15rem;font-weight:700;margin:0;color:var(--nxc-heading)}
.pf-section-head a{color:var(--nxc-brand-600);font-weight:600;font-size:.85rem}

/* Tables (scroll sideways on small screens, never drop columns) */
.pf-tablecard{background:#fff;border:1px solid var(--nxc-line);border-radius:var(--nxc-r);box-shadow:var(--nxc-shadow-card);overflow:hidden}
.pf-tablewrap{overflow-x:auto}
.pf-table{width:100%;border-collapse:collapse;min-width:560px}
.pf-table th{text-align:left;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nxc-ink-400);
  padding:.85rem 1.1rem;border-bottom:1px solid var(--nxc-line);background:var(--nxc-ink-50);white-space:nowrap}
.pf-table td{padding:.9rem 1.1rem;border-bottom:1px solid var(--nxc-line);font-size:.9rem;color:var(--nxc-ink-700);vertical-align:middle}
.pf-table tr:last-child td{border-bottom:none}
.pf-table tr.row-link{cursor:pointer;transition:background .12s}
.pf-table tr.row-link:hover{background:var(--nxc-ink-50)}
.pf-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-table .mono{font-family:ui-monospace,Menlo,monospace;font-weight:600;color:var(--nxc-heading)}
.pf-table a.celllink{color:inherit;display:block}

/* Status badges */
.pf-badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:.22rem .6rem;border-radius:9999px;border:1px solid;white-space:nowrap}
.pf-badge.paid,.pf-badge.active{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.pf-badge.sent,.pf-badge.quote{background:var(--nxc-brand-50);border-color:#bae6fd;color:#0369a1}
.pf-badge.overdue{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.pf-badge.paused,.pf-badge.cancelled,.pf-badge.muted{background:var(--nxc-ink-50);border-color:var(--nxc-line);color:var(--nxc-ink-500)}
.pf-badge.warn{background:#fffbeb;border-color:#fde68a;color:#b45309}

/* Empty states */
.pf-empty{background:#fff;border:1px dashed var(--nxc-line-2);border-radius:var(--nxc-r);padding:2.4rem 1.5rem;text-align:center;color:var(--nxc-ink-500)}
.pf-empty .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin:0 auto .8rem;background:var(--nxc-ink-50);color:var(--nxc-ink-400)}
.pf-empty .ico svg{width:24px;height:24px}
.pf-empty h3{margin:0 0 .25rem;color:var(--nxc-heading);font-size:1rem}

/* Document (invoice) detail */
.pf-doc{background:#fff;border:1px solid var(--nxc-line);border-radius:var(--nxc-r-lg);box-shadow:var(--nxc-shadow-card);overflow:hidden}
.pf-doc-head{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;padding:1.7rem 1.8rem;border-bottom:1px solid var(--nxc-line);background:linear-gradient(180deg,var(--nxc-ink-50),#fff)}
.pf-doc-head .num{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:1.25rem;color:var(--nxc-heading)}
.pf-doc-head .meta{color:var(--nxc-ink-500);font-size:.85rem;margin-top:.35rem;line-height:1.7}
.pf-doc-amount{text-align:right}
.pf-doc-amount .lbl{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nxc-ink-400)}
.pf-doc-amount .amt{font-family:var(--nxc-display);font-weight:800;font-size:1.9rem;color:var(--nxc-heading);letter-spacing:-.02em}
.pf-doc-body{padding:1.5rem 1.8rem}
.pf-pay{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:1.4rem 1.8rem;padding:1.1rem 1.3rem;border-radius:var(--nxc-r);
  background:linear-gradient(135deg,color-mix(in srgb,var(--nxc-brand-500) 10%,#fff),color-mix(in srgb,var(--nxc-accent-600) 8%,#fff));
  border:1px solid color-mix(in srgb,var(--nxc-brand-500) 22%,transparent)}
.pf-pay p{margin:0;color:var(--nxc-ink-600);font-size:.9rem}
.pf-pay strong{color:var(--nxc-heading)}
.pf-totals{margin-top:1.2rem;margin-left:auto;max-width:20rem}
.pf-totals .row{display:flex;justify-content:space-between;padding:.4rem 0;font-size:.92rem;color:var(--nxc-ink-600)}
.pf-totals .row.grand{border-top:2px solid var(--nxc-line);margin-top:.4rem;padding-top:.7rem;font-weight:800;font-size:1.1rem;color:var(--nxc-heading)}
.pf-backlink{display:inline-flex;align-items:center;gap:.4rem;color:var(--nxc-ink-500);font-weight:600;font-size:.86rem;margin-bottom:1rem}
.pf-backlink:hover{color:var(--nxc-brand-600)}
.pf-backlink svg{width:16px;height:16px}
.pf-toolbar{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}

@media print{
  .nxc-header,.nxc-footer,.pf-toolbar,.pf-pay,.pf-backlink,.pf-flash{display:none!important}
  body{background:#fff}
  .pf-doc{border:none;box-shadow:none}
}

/* ============================================================================
   Support tickets (Client Portal v2 — INC1). Prefix: pf- / tk-.
   ============================================================================ */

/* Head row with an action button on the right */
.pf-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pf-head-row .pf-head,.pf-head-row>div:first-child{margin-bottom:0}

/* Ticket status badges (extend .pf-badge) */
.pf-badge.open{background:var(--nxc-brand-50);border-color:#bae6fd;color:#0369a1}
.pf-badge.pending{background:#fffbeb;border-color:#fde68a;color:#b45309}
.pf-badge.answered{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.pf-badge.closed{background:var(--nxc-ink-50);border-color:var(--nxc-line);color:var(--nxc-ink-500)}
.tk-subject{font-weight:600;color:var(--nxc-heading)}

/* Ticket detail header */
.pf-ticket-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.pf-ticket-head h1{font-family:var(--nxc-display);font-size:clamp(1.35rem,2.5vw,1.7rem);font-weight:800;letter-spacing:-.02em;margin:0;color:var(--nxc-heading)}
.pf-ticket-meta{color:var(--nxc-ink-500);font-size:.86rem;margin:.35rem 0 0}

/* Conversation thread */
.pf-thread{display:flex;flex-direction:column;gap:.9rem}
.pf-msg{max-width:84%;padding:.85rem 1.05rem;border-radius:14px;border:1px solid var(--nxc-line);background:#fff;box-shadow:var(--nxc-shadow-card)}
.pf-msg .who{font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--nxc-ink-400);margin-bottom:.35rem}
.pf-msg .body{font-size:.93rem;line-height:1.6;color:var(--nxc-ink-700);word-break:break-word}
.pf-msg .ts{font-size:.72rem;color:var(--nxc-ink-400);margin-top:.45rem}
.pf-msg.mine{align-self:flex-end;background:linear-gradient(135deg,color-mix(in srgb,var(--nxc-brand-500) 10%,#fff),color-mix(in srgb,var(--nxc-accent-600) 8%,#fff));border-color:color-mix(in srgb,var(--nxc-brand-500) 22%,transparent)}
.pf-msg.staff{align-self:flex-start}

/* Forms (new ticket / reply) */
.pf-form .pf-field{margin-bottom:1rem}
.pf-form label{display:block;font-size:.8rem;font-weight:700;color:var(--nxc-ink-600);margin-bottom:.4rem}
.pf-input{width:100%;font:inherit;color:var(--nxc-ink-700);background:#fff;border:1px solid var(--nxc-line-2);border-radius:var(--nxc-r-sm);padding:.7rem .85rem;transition:border-color .12s,box-shadow .12s}
.pf-input:focus{outline:none;border-color:var(--nxc-brand-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--nxc-brand-500) 22%,transparent)}
textarea.pf-input{resize:vertical;min-height:6rem}
.pf-reply-note{margin:0 0 1rem;font-size:.86rem;color:var(--nxc-ink-500);background:var(--nxc-ink-50);border:1px dashed var(--nxc-line-2);border-radius:var(--nxc-r-sm);padding:.6rem .8rem}

/* Dashboard support card */
.pf-support{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 1.8rem;padding:1.1rem 1.3rem;
  background:#fff;border:1px solid var(--nxc-line);border-radius:var(--nxc-r);box-shadow:var(--nxc-shadow-card)}
.pf-support-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 42px;
  background:color-mix(in srgb,var(--nxc-brand-500) 12%,#fff);border:1px solid color-mix(in srgb,var(--nxc-brand-500) 20%,transparent);color:var(--nxc-brand-600)}
.pf-support-ico svg{width:22px;height:22px}
.pf-support-txt{flex:1 1 14rem;min-width:0}
.pf-support-txt h3{margin:0 0 .15rem;font-size:1rem;color:var(--nxc-heading)}
.pf-support-txt p{margin:0;font-size:.9rem;color:var(--nxc-ink-500)}
.pf-support-act{display:flex;gap:.5rem;flex-wrap:wrap}

/* Ticket attachments (INC2) */
.pf-att{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.pf-att-item{display:inline-flex;align-items:center;gap:.4rem;max-width:100%;text-decoration:none;
  font-size:.8rem;color:var(--nxc-ink-700);background:#fff;border:1px solid var(--nxc-line-2);
  border-radius:999px;padding:.32rem .7rem;transition:border-color .12s,background .12s}
.pf-att-item:hover{border-color:var(--nxc-brand-500);background:var(--nxc-brand-50)}
.pf-att-item svg{width:14px;height:14px;flex:0 0 14px;color:var(--nxc-ink-400)}
.pf-att-item .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16rem}
.pf-att-item .s{color:var(--nxc-ink-400);font-size:.72rem;flex:0 0 auto}
.pf-msg.mine .pf-att-item{background:rgba(255,255,255,.7)}

/* File inputs on ticket forms */
.pf-opt{font-weight:500;color:var(--nxc-ink-400)}
.pf-file{display:block;width:100%;font:inherit;font-size:.86rem;color:var(--nxc-ink-600);
  background:#fff;border:1px dashed var(--nxc-line-2);border-radius:var(--nxc-r-sm);padding:.55rem .7rem;cursor:pointer}
.pf-file::file-selector-button{font:inherit;font-size:.8rem;font-weight:600;margin-right:.7rem;cursor:pointer;
  color:var(--nxc-brand-700);background:var(--nxc-brand-50);border:1px solid var(--nxc-line-2);
  border-radius:999px;padding:.3rem .8rem}
.pf-file-hint{display:block;margin-top:.35rem;font-size:.74rem;color:var(--nxc-ink-400)}
.pf-reply-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pf-file-inline{flex:1 1 16rem;min-width:0}
.pf-file-inline input[type=file]{display:block;max-width:100%;font:inherit;font-size:.82rem;color:var(--nxc-ink-600)}
.pf-file-inline input[type=file]::file-selector-button{font:inherit;font-size:.78rem;font-weight:600;margin-right:.6rem;cursor:pointer;
  color:var(--nxc-brand-700);background:var(--nxc-brand-50);border:1px solid var(--nxc-line-2);border-radius:999px;padding:.28rem .7rem}
.pf-reply-foot .nxc-btn{flex:0 0 auto}