/* ================================================================
   UI/UX review — proposal stylesheet, loaded after app.css.
   Each change set owns the section between its own markers, so a set can
   be reverted on its own without touching the others. app.css is unchanged.
   ================================================================ */

/* ===== U1 · bugs & broken layouts — start ===== */

/* Phone lists. Below its breakpoint MudTable turns each row into a stacked card, but app.css still
   held the table at 560px, so in RTL every card's content sat off-screen to the left and each list
   on a phone read as a column of empty boxes. A stacked table fits its container. */
@media (max-width: 599.98px) {
    .mud-xs-table .mud-table-root { min-width: 0; }
    .mud-xs-table .mud-table-container { box-shadow: none; border: 0; }
}
@media (max-width: 959.98px) {
    .mud-sm-table .mud-table-root { min-width: 0; }
    .mud-sm-table .mud-table-container { box-shadow: none; border: 0; }
}

/* Phone app bar. Its items wrapped into three rows inside a bar held at 96px, so the first row, the
   menu button among them, was cut off at the top and the search row slid over the page. The bar now
   grows with two rows: actions on top, search below. Help and theme stay reachable from the drawer
   and the profile menu. */
@media (max-width: 600px) {
    .app-bar, .app-bar .mud-toolbar { height: auto !important; }
    .app-bar .mud-toolbar { min-height: 0; padding: .35rem .5rem .6rem; align-content: flex-start; row-gap: .35rem; column-gap: 0; }
    .brand-copy, .panel-switch-text, .appbar-optional { display: none !important; }
    .panel-switch { min-width: 0 !important; }
    .main-content { padding-top: 124px; }
}

/* Codes keep their shape. PF-2026-900007 broke at each hyphen into two or three lines, and inside an
   RTL cell its parts could reorder. */
.pp-code { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.pp-nowrap { white-space: nowrap; }
.mud-table-root thead th { white-space: nowrap; }

/* Row actions sit in one line instead of stacking three icons into a 150px-tall row, and stay in
   view: when a wide table scrolls sideways, the actions cell (the far left in RTL) sticks to the
   edge instead of scrolling out of sight. */
.row-actions { display: inline-flex; align-items: center; gap: .1rem; flex-wrap: nowrap; }
.mud-table-root td:has(> .row-actions) { position: sticky; left: 0; z-index: 1; background: var(--mud-palette-surface); box-shadow: 6px 0 8px -6px rgba(25, 52, 58, .18); }
.mud-table-hover .mud-table-row:hover > td:has(> .row-actions) { background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover)); }
.mud-table-root:has(.row-actions) thead th:last-child { position: sticky; left: 0; z-index: 3; }

/* A secondary line under a link in a table cell starts on its own line instead of running on after
   the link and wrapping the cell into six lines. */
.mud-table-cell > .mud-link + .mud-typography { display: block; }

/* The assistant launcher is fixed to the bottom-left corner, the same side as an RTL row's actions.
   Room under the page lets the last rows and the pager scroll clear of it. */
.content-container { padding-bottom: 6rem !important; }

/* ===== U1 · bugs & broken layouts — end ===== */

/* ===== U2 · readability, contrast & localisation — start ===== */

/* Muted text. Captions, subtitles, hints and guide text were drawn in the brand gold (MudText with
   Color.Secondary) at 2.45:1 on white, under the 4.5:1 WCAG AA floor for text this size. Every one
   of the 40 uses means "secondary text", which the theme already defines. Icons and buttons keep
   the gold. */
.mud-typography.mud-secondary-text { color: var(--mud-palette-text-secondary) !important; }

/* Status badges: a soft tint with coloured text instead of a saturated pill carrying a white disc
   that read as a radio button. */
.pp-status-chip.mud-chip { font-weight: 600; }
.pp-status-chip .mud-chip-icon { font-size: .5rem !important; width: .5rem; height: .5rem; margin-inline: .1rem .4rem !important; }

/* App bar labels stay on one line («واحد / خرید» used to wrap under its icon), and the brand keeps
   its width so the search box gives way instead of sliding under it. */
.panel-switch, .brand-title, .brand-subtitle, .profile-copy strong, .profile-copy small { white-space: nowrap; }
.brand-block { flex-shrink: 0; }

/* Real weights. Every weight came from the one regular face, so bold headings and figures were
   synthesised by smearing it. The variable face already in wwwroot carries 100–900. */
@font-face {
    font-family: "Vazirmatn PP";
    src: url("../fonts/Vazirmatn/Vazirmatn%5Bwght%5D.woff2") format("woff2-variations"),
         url("../fonts/Vazirmatn/Vazirmatn%5Bwght%5D.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
html, body { font-family: "Vazirmatn PP", "vazirmatn-regular", Tahoma, sans-serif; }

/* ===== U2 · readability, contrast & localisation — end ===== */

/* ===== U3 · visual refresh — start ===== */

/* app.css draws the KPI and widget borders with --pp-border, which was never defined, so those
   declarations were dropped and the cards had no edge at all. */
:root { --pp-border: var(--pp-line); }

/* One card language, after the Ynex dashboards: surface fill, hairline edge, soft shadow, 14px
   corners. */
.dashboard-kpi-card, .dashboard-widget, .filter-panel, .data-panel, .form-panel, .dashboard-panel, .item-group {
    border: 1px solid var(--pp-line) !important;
    border-radius: 14px !important;
    background: var(--mud-palette-surface) !important;
    box-shadow: 0 1px 2px rgba(16, 40, 44, .04), 0 4px 14px rgba(16, 40, 44, .05) !important;
    backdrop-filter: none !important;
}
.dashboard-widget { padding: 1.1rem 1.25rem; }

/* Card titles carry a short accent bar at their reading start, the Ynex card-title mark. */
.pp-card-title { position: relative; padding-inline-start: .8rem; font-weight: 700 !important; }
.pp-card-title::before {
    content: ""; position: absolute; inset-inline-start: 0; top: .3em; bottom: .3em; width: 3px;
    border-radius: 3px; background: linear-gradient(180deg, var(--mud-palette-primary), var(--pp-gold));
}

/* KPI tiles: the figure in real bold, a muted label, and a tinted icon badge whose tone says what
   kind of count it is (overdue reads as danger, waiting as warning, new as info). */
.pp-kpi { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 108px; }
.pp-kpi-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pp-kpi-label { font-size: .82rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
.pp-kpi-value { font-size: 1.85rem; font-weight: 700; line-height: 1.15; color: var(--mud-palette-text-primary); }
.pp-kpi-unit { font-size: .85rem; font-weight: 500; color: var(--mud-palette-text-secondary); margin-inline-start: .3rem; }
.pp-kpi-hint { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.pp-kpi-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--pp-kpi-soft); color: var(--pp-kpi-ink); }
.pp-kpi-primary { --pp-kpi-soft: #e3f1f0; --pp-kpi-ink: #0b6b69; }
.pp-kpi-info    { --pp-kpi-soft: #e5eefb; --pp-kpi-ink: #1565c0; }
.pp-kpi-warning { --pp-kpi-soft: #fcf0dc; --pp-kpi-ink: #b45309; }
.pp-kpi-danger  { --pp-kpi-soft: #fbe6e4; --pp-kpi-ink: #c62828; }
.pp-kpi-success { --pp-kpi-soft: #e3f3e8; --pp-kpi-ink: #15803d; }
body.pp-dark .pp-kpi-primary { --pp-kpi-soft: rgba(63, 182, 176, .14); --pp-kpi-ink: #6fded7; }
body.pp-dark .pp-kpi-info    { --pp-kpi-soft: rgba(79, 130, 216, .16); --pp-kpi-ink: #8fb4f0; }
body.pp-dark .pp-kpi-warning { --pp-kpi-soft: rgba(226, 179, 90, .15); --pp-kpi-ink: #e8b867; }
body.pp-dark .pp-kpi-danger  { --pp-kpi-soft: rgba(216, 90, 85, .16); --pp-kpi-ink: #f08f8a; }
body.pp-dark .pp-kpi-success { --pp-kpi-soft: rgba(79, 159, 64, .16); --pp-kpi-ink: #8ccf7e; }

/* A compact welcome band instead of a 275px hero with a 210px logo, so the day's figures start
   above the fold. The primary action turns white so it stands off the dark band. */
.home-hero.pp-hero-compact { grid-template-columns: minmax(0, 1fr) auto; padding: 1.35rem 1.75rem; margin-bottom: 1.25rem; }
.pp-hero-compact .hero-title { font-size: 1.6rem !important; margin: .1rem 0 .3rem !important; }
.pp-hero-compact .hero-text { line-height: 1.8 !important; }
.pp-hero-compact .hero-actions { margin-top: 0; justify-content: flex-end; position: relative; z-index: 1; }
.pp-hero-compact .mud-button-filled-primary { background: #fff !important; color: var(--pp-green-900) !important; }
.pp-hero-compact.animated-card:hover { transform: none; }
.pp-hero-compact.animated-card::after, .pp-hero-compact::before { display: none; }
@media (max-width: 960px) {
    .home-hero.pp-hero-compact { grid-template-columns: 1fr; padding: 1.1rem 1.25rem; }
    .pp-hero-compact .hero-actions { justify-content: flex-start; margin-top: .6rem; }
}

/* The drawer's active item keeps its green-to-cream gradient and gold bar, now on the reading-start
   (right) edge with the gradient running from it; in RTL both sat on the far side. */
.nav-menu .mud-nav-link.active { background: linear-gradient(270deg, #e6f2f1, #fff8e8) !important; box-shadow: inset -3px 0 0 var(--pp-gold) !important; }
body.pp-dark .nav-menu .mud-nav-link.active { background: linear-gradient(270deg, #123330, #2a2415) !important; }

/* Table headers: a quiet band in the muted ink, so the rows carry the weight. */
.mud-table-root thead th { background: #f6f9f9; }
.mud-table-root thead th.mud-table-cell { color: var(--mud-palette-text-secondary); font-weight: 600; font-size: .8rem; }
body.pp-dark .mud-table-root thead th { background: #172b2d; }

/* The assistant launcher shrinks to its icon below desktop widths, where the pill covered a row's
   actions; its aria-label still names it. */
@media (max-width: 960px) {
    .ai-bubble-launcher { min-width: 0 !important; width: 52px; height: 52px; padding: 0 !important; border-radius: 50% !important; }
    .ai-bubble-launcher .mud-button-label { font-size: 0; }
    .ai-bubble-launcher .mud-button-icon-start { margin: 0 !important; }
    .ai-bubble-launcher .mud-button-icon-start .mud-icon-root { font-size: 1.5rem; }
}

/* ===== U3 · visual refresh — end ===== */

/* ===== U4 · charts — start ===== */

/* Chart hosts (wwwroot/js/pp-charts.js draws into them with ApexCharts). ApexCharts lays out
   left-to-right and misplaces its tooltip inside an RTL parent, so the plot runs LTR while its
   legend and tooltip text stay RTL. */
.pp-chart { direction: ltr; width: 100%; }
.pp-chart .apexcharts-legend { direction: rtl; }
.pp-chart .apexcharts-tooltip, .pp-chart .apexcharts-legend-text { direction: rtl; font-family: "Vazirmatn PP", vazirmatn-regular, Tahoma, sans-serif !important; }
.pp-chart .apexcharts-tooltip { border-radius: 10px !important; border: 1px solid var(--pp-line) !important; box-shadow: 0 8px 24px rgba(16, 40, 44, .14) !important; }
.pp-chart .apexcharts-tooltip-title { font-family: inherit !important; }
.pp-chart-title { font-size: .9rem; font-weight: 600; color: var(--mud-palette-text-primary); margin-bottom: .35rem; }
.pp-chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; color: var(--mud-palette-text-secondary); font-size: .85rem; border: 1px dashed var(--pp-line); border-radius: 12px; padding: 1rem; }
.pp-chart-empty .mud-icon-root { opacity: .6; }

/* The table twin under each chart: every value without the hover. */
.pp-chart-table-toggle { margin-top: .25rem; border: 0; background: transparent; color: var(--mud-palette-primary); font: inherit; font-size: .78rem; cursor: pointer; padding: .25rem .1rem; }
.pp-chart-table-toggle:hover, .pp-chart-table-toggle:focus-visible { text-decoration: underline; outline: none; }
.pp-chart-table { margin-top: .35rem; max-height: 280px; overflow: auto; }
.pp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== U4 · charts — end ===== */

/* ===== R · approved follow-ups — start ===== */

/* R3: the drawer's section captions, the active-panel overline and the guide card's second line were
   fixed light greys (2.9–3.1:1); they take the theme's secondary text colour. */
.nav-section-title, .drawer-header .mud-typography-overline, .support-card small { color: var(--mud-palette-text-secondary) !important; }

/* R7: the purchase file's progress ring beside its title, and the stage timeline's tooltip. */
.purchase-workspace-progress { flex: 0 0 170px; display: grid; place-items: center; }
.pp-tip { direction: rtl; display: grid; gap: .1rem; padding: .45rem .7rem; font-size: .78rem; }
.pp-tip b { font-weight: 700; }
@media (max-width: 960px) { .purchase-workspace-progress { flex-basis: auto; } }

/* ===== R · approved follow-ups — end ===== */

/* ===== RC-03 · Setad document review dialog — start ===== */

/* OCR review contains document metadata, announcement fields and a five-column editable offer
   table.  Give it the visual hierarchy and horizontal room needed for a deliberate human review. */
.setad-preview-dialog { max-height: 92vh; }
.setad-preview-dialog .mud-dialog-content { padding-top: 1rem; }
.setad-preview-shell { min-width: 0; }
.setad-preview-intro { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.setad-preview-section { border-color: var(--pp-line) !important; border-radius: 12px !important; }
.setad-preview-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
}
.setad-preview-document-card { height: 100%; border-color: var(--pp-line) !important; border-radius: 10px !important; }
.setad-preview-filename { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.setad-preview-warning-summary .mud-alert-message { width: 100%; }
.setad-preview-warning-summary ul { margin: .35rem 0 0; padding-inline-start: 1.25rem; }
.setad-preview-warning-summary li + li { margin-top: .25rem; }

/* Name and amount are the primary review values and jointly receive 60% of the desktop table.
   The minimum table width preserves usable edit controls; the container supplies horizontal scroll
   on narrower intermediate widths and MudTable switches to cards on phones. */
.setad-preview-table .mud-table-root { min-width: 1120px; table-layout: fixed; }
.setad-preview-table .mud-table-cell { vertical-align: top; padding: .75rem; }
.setad-preview-table th:nth-child(1), .setad-preview-table td:nth-child(1) { width: 34%; }
.setad-preview-table th:nth-child(2), .setad-preview-table td:nth-child(2) { width: 26%; }
.setad-preview-table th:nth-child(3), .setad-preview-table td:nth-child(3) { width: 18%; }
.setad-preview-table th:nth-child(4), .setad-preview-table td:nth-child(4) { width: 17%; }
.setad-preview-table th:nth-child(5), .setad-preview-table td:nth-child(5) { width: 5%; }
.setad-preview-table .mud-input-control { width: 100%; }
.setad-preview-amount-field input {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.setad-preview-evidence { overflow-wrap: anywhere; line-height: 1.7; }

@media (max-width: 599.98px) {
    .setad-preview-table .mud-table-container { height: auto !important; max-height: none !important; }
    .setad-preview-table .mud-table-root { min-width: 0; table-layout: auto; }
    .setad-preview-table .mud-table-cell { width: auto !important; padding: .55rem .75rem; }
}

@media (max-width: 599.98px) {
    .setad-preview-dialog {
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .setad-preview-dialog .mud-dialog-content { padding: .75rem; }
    .setad-preview-section { padding: .75rem !important; }
    .setad-preview-offers-header { align-items: stretch; }
    .setad-preview-offers-header > .mud-button-root { width: 100%; }
}

/* ===== RC-03 · Setad document review dialog — end ===== */