/* Customer portal page layout (docs/CUSTOMER_PORTAL.md). Components (hero,
   KPI cards, forms, inbox, upload, accordion, notes, tabs, master-detail list,
   detail facts) are the panel design-system ones served from /portal/ds; this
   file only arranges the page and puts sections on token-based surfaces. */
body.portal{min-height:100vh;margin:0;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:var(--font-family,'Vazirmatn',sans-serif)}
html:not([data-portal-ready="true"]) .portal__header,html:not([data-portal-ready="true"]) .portal__footer{visibility:hidden}
.portal__skip{position:absolute;inset-inline-start:-9999px}
.portal__skip:focus{inset-inline-start:16px;top:8px;z-index:10;padding:8px 12px;border-radius:10px;background:var(--surface)}

/* ---- header: brand · pages and sections · account ---- */
.portal__header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px 20px;padding:10px max(16px,calc((100vw - 1200px) / 2));border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px)}
.portal__brand{display:flex;align-items:center;gap:10px;min-width:0;color:var(--text);text-decoration:none}
.portal__brand img{max-height:36px;width:auto}
.portal__brand strong{font-size:1rem;white-space:nowrap}
.portal__brand .ds-pattern-avatar{flex:0 0 auto}
.portal__brand [hidden]{display:none}
.portal__nav{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.portal__nav::-webkit-scrollbar{display:none}
.portal__nav a{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:8px 12px;border-radius:999px;color:var(--text-muted);text-decoration:none;font-size:.88rem;font-weight:600;white-space:nowrap}
.portal__nav a [data-ds-icon]{display:inline-flex;width:18px;height:18px}
.portal__nav a:hover,.portal__nav a:focus-visible{color:var(--brand-700);background:var(--brand-50)}
.portal__nav a[aria-current="page"]{color:var(--brand-700);background:var(--brand-50)}
.portal__nav-sep{flex:0 0 1px;align-self:stretch;margin:6px 4px;background:var(--border)}
.portal__account{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.portal__user{display:inline-flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border:1px solid var(--border);border-radius:999px;color:var(--text);text-decoration:none;font-size:.86rem;font-weight:700;white-space:nowrap}
.portal__user:hover,.portal__user:focus-visible,.portal__user[aria-current="page"]{border-color:var(--brand-300);background:var(--brand-50)}

/* ---- page frame ---- */
.portal__main{flex:1;width:min(1440px,100%);box-sizing:border-box;margin:0 auto;padding:24px clamp(16px,2.5vw,36px) 48px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-content:start;outline:0}
.portal__footer{padding:18px 16px;border-top:1px solid var(--border);color:var(--text-muted);font-size:.8rem;text-align:center;background:var(--surface)}
.portal__page{display:grid;gap:18px}
.portal__page-title{margin:0;font-size:1.35rem}
.portal__notice[hidden]{display:none}
.portal__hero .ds-page-hero__visual{display:grid;place-items:center}
.portal__hero-image{max-width:100%;max-height:260px;border-radius:16px;object-fit:cover}

/* One surface for every section of a portal page. */
.portal__panel{display:grid;gap:14px;align-content:start;min-width:0;padding:20px;border:1px solid var(--border);border-radius:var(--radius-lg,20px);background:var(--surface);box-shadow:var(--shadow-xs)}
.portal__panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.portal__panel-head h2{margin:0;font-size:1.05rem}
.portal__panel-head p{margin:4px 0 0;color:var(--text-muted);font-size:.86rem;line-height:1.8}
.portal__panel>.ds-pattern-detail-facts{margin:0}

/* Main column + side column (ticket, new ticket, profile). */
.portal__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);align-items:start;gap:18px}
.portal__aside{display:grid;gap:18px;align-content:start;position:sticky;top:86px}
.portal__aside .ds-pattern-detail-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.portal__tips{margin:0;padding-inline-start:18px;display:grid;gap:8px;color:var(--text-muted);font-size:.88rem;line-height:1.8}

/* ---- content blocks ---- */
.portal__image{display:block;max-width:100%;height:auto;border-radius:14px}
.portal__figure{margin:0}
.portal__figure figcaption{margin-top:8px;color:var(--text-muted);font-size:.85rem}
.portal__media-text{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
.portal__media-text--end>img{order:2}
.portal__text p,.portal__media-text p{margin:0;line-height:1.9}
.portal__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.portal__cta h2{margin:0;font-size:1.1rem}
.portal__cta p{margin:6px 0 0;color:var(--text-muted)}
.portal__features{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.portal__features .kpi-label{color:var(--text);font-size:.95rem;font-weight:800}
.portal__features .kpi-delta{display:block;margin-top:6px;color:var(--text-muted);font-size:.85rem;line-height:1.8;font-weight:500}
.portal__contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.portal__contact>.ds-pattern-detail-note{margin:0}
.portal__contact strong{display:flex;align-items:center;gap:6px}
.portal__contact strong .ds-ico{width:18px;height:18px;color:var(--brand-700)}
/* Icon inside a catalog avatar (ticket rows, sign-in head): sized like the avatar's letters. */
.portal .ds-pattern-avatar .ds-ico{width:20px;height:20px}
.portal .ds-pattern-avatar--lg .ds-ico{width:26px;height:26px}

/* ---- sign-in ---- */
.portal__auth{width:min(480px,100%);margin:12px auto 0;box-sizing:border-box;padding:28px}
.portal__auth-head{display:grid;justify-items:center;gap:10px;text-align:center}
.portal__auth-head h1{margin:0;font-size:1.25rem}
.portal__auth-head p{margin:0;color:var(--text-muted);font-size:.9rem;line-height:1.8}
.portal__auth .ds-form-actions{justify-content:space-between}
.portal__auth-foot{margin:0;padding-top:14px;border-top:1px solid var(--border);color:var(--text-muted);font-size:.82rem;line-height:1.8;text-align:center}

/* ---- tickets ---- */
/* The list is used on its own (no detail pane beside it), so it drops the split divider. */
.portal__ticket-list{display:grid;gap:6px;padding:0;border:0}
.portal__ticket-list a{text-decoration:none;color:inherit}
.portal__ticket-list .ds-pattern-master-detail__item{border-color:var(--border);background:var(--surface)}
.portal__ticket-list .ds-pattern-master-detail__item>span:nth-child(2){min-width:0}
.portal__ticket-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.portal__amount{white-space:nowrap;font-weight:800}
.portal__conversation{grid-template-columns:1fr;min-width:0;min-height:420px;box-shadow:none}
.portal__conversation .ds-pattern-inbox__conversation{height:min(640px,calc(100vh - 230px));min-height:460px}
.portal__conversation .ds-pattern-inbox__messages{min-height:0;overflow-y:auto}
.portal__ticket-files{display:grid;gap:8px}.portal__ticket-files .ds-pattern-inbox__file{margin:0}
.portal__reply-field{display:flex;min-width:0;margin:0}
.portal__reply-field textarea{box-sizing:border-box;width:100%;min-height:44px;max-height:92px;padding:10px 12px;resize:none;overflow-y:hidden;border:0;border-radius:12px;outline:0;color:var(--text);background:var(--surface);font:inherit;font-size:16px;line-height:1.5}
.portal__reply-field>.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---- company users ---- */
.portal__users{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.portal__user-card{display:grid;gap:10px;align-content:start;padding:14px;border:1px solid var(--border);border-radius:var(--radius,14px);background:var(--surface-2)}
.portal__user-card>header{display:flex;align-items:center;gap:10px}
.portal__user-card>header>span:nth-child(2){display:grid;flex:1;min-width:0}
.portal__user-card>header small{color:var(--text-muted);font-size:.8rem}
.portal__user-card .ds-inline-row{flex-wrap:wrap}

@media(max-width:1000px){
  .portal__split{grid-template-columns:1fr}
  .portal__aside{position:static}
}
@media(max-width:800px){
  .portal__header{flex-wrap:wrap;padding:10px 16px}
  .portal__brand{flex:1}
  .portal__nav{order:3;flex-basis:100%}
  .portal__media-text{grid-template-columns:1fr}
  .portal__media-text--end>img{order:0}
  .portal__user-name{display:none}
  .portal__user{padding:4px}
  .portal__panel{padding:16px}
  .portal__ticket-list .ds-pattern-master-detail__item{grid-template-columns:auto minmax(0,1fr)}
  .portal__ticket-end{grid-column:2;justify-content:flex-start}
}
/* Fields in one row align to the top even when only some have a hint. */
.portal .ds-auto-grid{align-items:start}
/* A section closed with [hidden] stays closed even though .portal__panel is a grid. */
.portal [hidden]{display:none!important}
/* Form buttons keep their natural width instead of stretching across the card. */
.portal .ds-form-actions{flex-wrap:wrap;justify-content:flex-start}
.portal .ds-form-actions .btn{flex:0 0 auto;min-inline-size:132px}
.portal__search-row{display:flex;gap:8px;min-width:0}
.portal__search-row>.ds-field__input{flex:1;min-width:0}
.portal__search-row>.btn{flex:0 0 auto}
/* Profile: account card and password card side by side, at a readable width. */
.portal__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.portal__access-chips{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:860px){.portal__pair{grid-template-columns:1fr}}
@media(max-width:520px){.portal .ds-form-actions .btn{flex:1 1 100%}}
/* Sale document detail (/finance/:id) and its print view: only the document
   itself is printed, never the portal header, navigation or actions. */
.portal__document{display:grid;gap:18px;min-width:0}
.portal__document .ds-pattern-detail-facts{margin:0}
.portal__document .rui-table-wrap{overflow-x:auto}
.portal__document .rui-table{min-width:680px}
.portal__document .rui-table .ds-num{white-space:nowrap}
.portal__doc-sub{display:block;margin-top:2px;color:var(--text-muted);font-size:.8rem}
.portal__document-totals{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
@media print{
  .portal__skip,.portal__header,.portal__footer,.portal__no-print,.portal__notice{display:none!important}
  body.portal{display:block;min-height:0;background:none}
  .portal__main{width:100%;padding:0}
  .portal__document .portal__panel,.portal__document .ds-page-hero{box-shadow:none}
  .portal__document .rui-table-wrap{overflow:visible}
  .portal__document tr,.portal__document .ds-pattern-detail-facts>div{break-inside:avoid}
  .portal__document *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}