/* Paths match the files' own case (fonts/Vazirmatn/Vazirmatn-*.woff2): IIS forgives a lowercase
   path, a Linux or container host answers it with 404 and the app falls back to Tahoma. */
@font-face {
    font-family: 'vazirmatn[wght]';
    src: url('fonts/Vazirmatn/Vazirmatn[wght].woff2') format('woff2');
}
@font-face {
    font-family: 'vazirmatn-black';
    src: url('fonts/Vazirmatn/Vazirmatn-Black.woff2') format('woff2');
}
@font-face {
    font-family: 'vazirmatn-bold';
    src: url('fonts/Vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'vazirmatn-extrabold';
    src: url('fonts/Vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');
}
@font-face {
    font-family: 'vazirmatn-regular';
    src: url('fonts/Vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'vazirmatn-semibold';
    src: url('fonts/Vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
}

:root {
    --pp-green-950: #073f3a;
    --pp-green-900: #0a4c46;
    --pp-green-700: #0b6b69;
    --pp-green-100: #e6f2f1;
    --pp-gold: #d69b2d;
    --pp-gold-soft: #f3d48a;
    --pp-ink: #19343a;
    --pp-muted: #566b70; /* WCAG AA >= 5.6:1 on white */
    --pp-line: #dfe9ea;
    --pp-bg: #f3f7f6;
    --pp-card: rgba(255, 255, 255, .9);
}

html, body {
    font-family: "vazirmatn-regular", Tahoma, sans-serif;
    direction: rtl;
    background: var(--pp-bg);
    color: var(--pp-ink);
}

body { margin: 0; }

.app-bar {
    border-bottom: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(90deg, rgba(7,63,58,.98), rgba(11,107,105,.95)) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 38px rgba(7, 63, 58, .18) !important;
}
.app-bar .mud-toolbar { min-width:0; }
.brand-block { display:flex; align-items:center; gap:.8rem; margin-right:.5rem; min-width:0; }
.brand-logo { width:48px; height:48px; object-fit:cover; border-radius:14px; box-shadow:0 10px 22px rgba(0,0,0,.18); background:#083f46; }
.brand-copy { min-width:0; }
.brand-title { line-height:1.1 !important; font-weight:800 !important; letter-spacing:0 !important; }
.brand-subtitle { opacity:.78; }
.profile-button { max-width:280px; }
.profile-button .mud-button-label { display:flex; gap:.6rem; min-width:0; }
.profile-avatar { background: rgba(214,155,45,.18) !important; color:#fff !important; border:1px solid rgba(255,255,255,.28); }
.profile-copy { display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.profile-copy small { opacity:.68; font-size:.68rem; }
.notification-item { display:flex; flex-direction:column; min-width:240px; max-width:340px; white-space:normal; line-height:1.7; }
.notification-item strong { font-weight:800; color:var(--pp-ink); }
.notification-item small { color:var(--pp-muted); }
.global-search-box { position:relative; width:min(520px, 34vw); margin-inline:1rem; flex:0 1 520px; }
.global-search-input .mud-input-control-input-container { background:rgba(255,255,255,.12); border-radius:8px; }
.global-search-input .mud-input-root, .global-search-input input { color:#fff !important; }
.global-search-input input::placeholder { color:rgba(255,255,255,.76); opacity:1; }
.global-search-panel {
    position:absolute;
    top:calc(100% + .45rem);
    right:0;
    left:0;
    z-index:1600;
    max-height:min(72vh, 560px);
    overflow:auto;
    padding:.75rem;
    border:1px solid rgba(11,107,105,.16);
    border-radius:8px !important;
}
.global-search-state { display:flex; align-items:center; justify-content:center; gap:.75rem; min-height:96px; color:var(--pp-muted); text-align:center; }
.global-search-group { padding:.35rem 0; }
.global-search-group + .global-search-group { border-top:1px solid var(--pp-line); }
.global-search-group-title { display:block; color:var(--pp-green-700); font-weight:800 !important; padding:.35rem .25rem .5rem; }
.global-search-result {
    width:100%;
    display:grid;
    grid-template-columns:28px minmax(0,1fr) auto;
    align-items:center;
    gap:.75rem;
    border:0;
    background:transparent;
    color:inherit;
    text-align:right;
    padding:.6rem .45rem;
    border-radius:8px;
    cursor:pointer;
}
.global-search-result:hover, .global-search-result:focus-visible { background:#f3f8f8; outline:0; }
.global-search-result-main { display:flex; flex-direction:column; min-width:0; line-height:1.55; }
.global-search-result-main strong, .global-search-result-main span, .global-search-result-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-search-result-main strong { color:var(--pp-green-700); font-weight:800; direction:ltr; text-align:right; }
.global-search-result-main small { color:var(--pp-muted); }
.global-search-result-meta { display:flex; align-items:center; gap:.5rem; color:var(--pp-muted); white-space:nowrap; }

.app-drawer { border-left:1px solid #e4eaec; background:rgba(255,255,255,.94) !important; backdrop-filter:blur(14px); }
.drawer-header { padding:1.25rem 1rem 1rem; border-bottom:1px solid #edf1f2; }
.drawer-brand { display:flex; align-items:center; gap:.8rem; }
.drawer-logo { width:62px; height:62px; object-fit:cover; border-radius:18px; box-shadow:0 12px 28px rgba(7,63,58,.16); }
.drawer-header .mud-typography-overline { color:#83969a; }
.department-badge { margin-top:.35rem; max-width:100%; }
.nav-menu { padding:.75rem .75rem 0; }
.nav-menu .mud-nav-link { border-radius:10px; margin:.15rem 0; transition: background .2s ease, color .2s ease, transform .2s ease; }
.nav-menu .mud-nav-link:hover { transform:translateX(-2px); background:#f4faf9; }
.nav-menu .mud-nav-link.active { background:linear-gradient(90deg, #e6f2f1, #fff8e8); color:var(--pp-green-700); font-weight:700; }
.nav-section-title { display:block; padding:1rem .8rem .35rem; color:#8a9a9e; }
/* The drawer is one scrolling column: header, menu, then the guide card at the very end. It used to
   be absolutely positioned at the bottom of the drawer box, which floated it over whichever menu
   items happened to be at the bottom of the viewport. */
.app-drawer .mud-drawer-content { display:flex; flex-direction:column; min-height:100%; }
.nav-menu { flex:1 0 auto; }
.drawer-footer { margin-top:auto; padding:1rem; display:flex; justify-content:flex-end; }
.support-link { text-decoration:none; color:inherit; display:inline-flex; }
.support-link:hover .support-card { border-color:var(--pp-green-700); box-shadow:0 8px 20px rgba(7,63,58,.12); }
.support-card { display:inline-flex; width:auto; align-items:center; gap:.7rem; padding:.75rem; background:rgba(255,255,255,.86) !important; }
.support-card div { display:flex; flex-direction:column; }
.support-card small { color:#849599; }

.main-content {
    position:relative;
    background:
        linear-gradient(135deg, rgba(243,247,246,.96), rgba(248,250,249,.94)),
        radial-gradient(circle at 12% 12%, rgba(214,155,45,.12), transparent 30%),
        radial-gradient(circle at 85% 14%, rgba(11,107,105,.1), transparent 34%);
    min-height:100vh;
    padding-top:64px;
    overflow:hidden;
}
.content-container { position:relative; z-index:1; padding:0 2rem 3rem !important; }
.ambient-background { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ambient-grid { position:absolute; inset:0; opacity:.18; background-image: linear-gradient(rgba(11,107,105,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(11,107,105,.14) 1px, transparent 1px); background-size:44px 44px; animation:gridDrift 24s linear infinite; }
.ambient-line { position:absolute; width:58vw; height:2px; border-radius:999px; background:linear-gradient(90deg, transparent, rgba(214,155,45,.5), rgba(11,107,105,.28), transparent); transform:rotate(-18deg); filter:blur(.2px); }
.ambient-line-one { top:18%; right:-18%; animation:lineFlow 14s ease-in-out infinite; }
.ambient-line-two { bottom:20%; left:-20%; animation:lineFlowReverse 18s ease-in-out infinite; }
.breadcrumb-bar { min-height:52px; display:flex; align-items:center; border-bottom:1px solid #e3e9eb; margin-bottom:1.5rem; overflow-x:auto; white-space:nowrap; }

.page-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.page-breadcrumbs { padding:0 0 .35rem 0 !important; font-size:.82rem; }
.page-title { font-weight:800 !important; color:#173d43; }
.page-actions, .form-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

.home-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:1.5rem; align-items:center; margin-bottom:1.5rem; padding:2rem; overflow:hidden; color:#fff; background:linear-gradient(135deg, rgba(7,63,58,.97), rgba(11,107,105,.94)) !important; border-color:rgba(255,255,255,.18) !important; }
.home-hero::before { content:""; position:absolute; inset:-1px; background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.12) 42%, transparent 62%); transform:translateX(80%); animation:softSweep 7s ease-in-out infinite; }
.home-hero-copy, .home-hero-brand { position:relative; z-index:1; }
.hero-eyebrow { color:var(--pp-gold-soft) !important; font-weight:800 !important; }
.hero-title { font-family:vazirmatn-extrabold, Tahoma, sans-serif !important; font-weight:800 !important; margin:.3rem 0 .7rem !important; }
.hero-text { max-width:720px; color:rgba(255,255,255,.78) !important; line-height:2 !important; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.4rem; }
.home-hero-brand { display:grid; place-items:center; }
.home-hero-brand img { width:210px; height:210px; object-fit:cover; border-radius:36px; box-shadow:0 28px 70px rgba(0,0,0,.24); animation:brandFloat 7s ease-in-out infinite; }

.animated-card { position:relative; overflow:hidden; border:1px solid rgba(11,107,105,.12) !important; border-radius:16px !important; box-shadow:0 18px 46px rgba(25,52,58,.07) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.animated-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.38) 45%, transparent 62%); transform:translateX(120%); opacity:0; transition:opacity .2s ease; }
.animated-card:hover { transform:translateY(-3px); border-color:rgba(214,155,45,.38) !important; box-shadow:0 22px 58px rgba(25,52,58,.12) !important; }
.animated-card:hover::after { opacity:1; animation:cardSheen 1.2s ease; }
.metric-card { display:flex; align-items:center; gap:1rem; padding:1.25rem; height:100%; background:var(--pp-card) !important; backdrop-filter:blur(10px); }
.metric-icon { width:52px; height:52px; border-radius:15px; background:linear-gradient(135deg, #e5f2f1, #fff5dd); color:var(--pp-green-700); display:grid; place-items:center; }
.metric-card .mud-typography-h4 { font-weight:800; margin:.15rem 0; }
.dashboard-panel { border:1px solid #e3eaeb; padding:1.25rem; height:100%; background:var(--pp-card) !important; backdrop-filter:blur(10px); }
.enterprise-dashboard { width:100%; }
.dashboard-kpi-card, .dashboard-widget {
    border: 1px solid var(--pp-border);
    border-radius: 8px;
    background: var(--pp-card) !important;
    padding: 1rem;
    height: 100%;
}
.dashboard-kpi-card .mud-typography-h4 { line-height:1.2; }
.dashboard-status-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.55rem 0;
    border-bottom:1px solid var(--pp-border);
}
.dashboard-status-row:last-child { border-bottom:0; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:1rem; }
.task-row { display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:.75rem; padding:1rem 0; border-bottom:1px solid #edf1f2; transition:background .2s ease, padding .2s ease; }
.task-row:hover { background:#f8fbfb; padding-right:.5rem; }
.task-row:last-child { border-bottom:0; }
.task-row div:nth-child(2) { display:flex; flex-direction:column; }
.task-row small { color:#7d9195; margin-top:.2rem; }
.task-dot { width:8px; height:8px; border-radius:50%; background:var(--pp-gold); box-shadow:0 0 0 6px rgba(214,155,45,.13); animation:statusPulse 2.4s ease-in-out infinite; }

.empty-state { text-align:center; padding:3rem; border:1px dashed #cbd7d9; }
.empty-state > * { margin:.35rem 0; }
.help-tooltip { margin-inline-start:.15rem; vertical-align:middle; }
.field-help-text { display:flex; align-items:center; gap:.35rem; margin-top:.35rem; line-height:1.7; }
.field-help-icon { opacity:.8; }
.page-guide-card { display:flex; align-items:flex-start; gap:.85rem; padding:1rem; margin-bottom:1rem; background:rgba(11,107,105,.05) !important; border-color:rgba(11,107,105,.2) !important; border-radius:12px; }
.page-guide-icon { margin-top:.1rem; flex:0 0 auto; }
.page-guide-content { flex:1; min-width:0; }
.page-guide-body { margin-top:.5rem; }
.guided-empty-tips { display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; margin-top:.75rem; }
.loading-overlay { position:fixed; inset:0; z-index:1500; background:rgba(244,247,248,.78); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; }
.filter-panel, .data-panel, .form-panel { border:1px solid #e1e8ea; padding:1.25rem; margin-bottom:1.25rem; background:var(--pp-card) !important; border-radius:16px; box-shadow:0 14px 34px rgba(25,52,58,.05); }
.section-title { margin-bottom:1.25rem !important; }
.form-actions { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; margin-top:1.5rem; }
.mud-table-container { overflow-x:auto; }
.mesc-results { max-height:360px; overflow:auto; margin-top:.75rem; }
.mesc-option { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.8rem .25rem; border-bottom:1px solid #edf1f2; }
.mesc-option > div { display:flex; flex-direction:column; min-width:0; }
.mesc-option small { color:var(--pp-green-700); margin:.15rem 0; }
.mesc-option span { color:#6f8488; font-size:.8rem; }
.detail-tab-panel { padding:1.5rem 0; background:transparent !important; }
.summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1.25rem; }
.summary-item { display:flex; flex-direction:column; padding:.8rem; border-radius:10px; background:#f6f9f9; }
.summary-item span { color:#71878b; font-size:.75rem; margin-bottom:.25rem; }
.item-group { border:1px solid #e1e8ea; margin-bottom:1rem; overflow:hidden; border-radius:14px; background:#fff; }
.group-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; background:#edf6f5; border-bottom:1px solid #dce8e8; }
.group-header > div { display:flex; flex-direction:column; }
.group-header span { color:#617a7e; font-size:.8rem; margin-top:.2rem; }
.timeline-row { display:grid; grid-template-columns:14px 1fr; gap:.75rem; padding:1rem; border-right:2px solid #dce8e8; }
.timeline-row > div:last-child { display:flex; flex-direction:column; }
.timeline-row small { color:#71878b; margin-top:.25rem; }
.timeline-marker { width:10px; height:10px; border-radius:50%; background:var(--pp-green-700); margin-right:-7px; margin-top:.35rem; }
.activity-timeline-shell { padding:1rem; border:1px solid var(--pp-line); border-radius:8px !important; background:var(--pp-card) !important; }
.activity-timeline-list { display:grid; gap:.85rem; }
.activity-timeline-item { display:grid; grid-template-columns:34px minmax(0,1fr); gap:.75rem; position:relative; }
.activity-timeline-item::before { content:""; position:absolute; top:34px; bottom:-.85rem; right:16px; width:2px; background:var(--pp-line); }
.activity-timeline-item:last-child::before { display:none; }
.activity-timeline-marker { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--pp-green-700); background:#e8f4f3; border:1px solid #d4e7e5; z-index:1; }
.activity-timeline-card { padding:.85rem 1rem; border:1px solid var(--pp-line); border-radius:8px !important; background:rgba(255,255,255,.78) !important; }
.activity-timeline-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:.55rem; }
.activity-timeline-badges, .activity-timeline-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.activity-timeline-meta { margin-top:.65rem; color:var(--pp-muted); font-size:.78rem; }
.activity-timeline-meta span:not(:last-child)::after { content:""; margin-right:.5rem; }
.report-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.report-preview { margin-top:1.25rem; height:680px; border:1px solid #dce5e7; border-radius:8px; overflow:hidden; background:#fff; }
.report-preview iframe { width:100%; height:100%; border:0; }
.ai-result-card { border:1px solid #dce6e8; padding:1.25rem; margin-bottom:1rem; }
.ai-recommendation { display:flex; gap:.75rem; padding:.75rem; background:#fff8e6; border-radius:8px; margin-top:.5rem; }
.ai-recommendation > div { display:flex; flex-direction:column; }
.ai-recommendation span { color:#6c7f83; font-size:.82rem; margin-top:.2rem; }

.auth-shell { min-height:100vh; background:#f4f7f8; overflow:hidden; }
.login-page { position:relative; min-height:100vh; display:grid; place-items:center; padding:2rem; background:linear-gradient(135deg, #eef6f6 0%, #f7faf9 48%, #edf3f4 100%); }
.login-motion { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.motion-track { position:absolute; width:70vw; height:2px; border-radius:999px; background:linear-gradient(90deg, transparent, rgba(214,155,45,.72), rgba(11,107,105,.38), transparent); transform:rotate(-22deg); }
.motion-track-one { top:22%; right:-20%; animation:lineFlow 13s ease-in-out infinite; }
.motion-track-two { bottom:18%; left:-26%; animation:lineFlowReverse 17s ease-in-out infinite; }
.motion-node { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--pp-gold); box-shadow:0 0 0 8px rgba(214,155,45,.16); }
.motion-node-one { top:23%; right:18%; animation:nodeTravel 8s ease-in-out infinite; }
.motion-node-two { bottom:22%; left:18%; animation:nodeTravelReverse 10s ease-in-out infinite; }
.login-shell { position:relative; z-index:1; width:min(1100px, 100%); min-height:640px; display:grid; grid-template-columns:1.05fr .95fr; border:1px solid rgba(11,107,105,.12); border-radius:30px; overflow:hidden; background:rgba(255,255,255,.88); box-shadow:0 30px 86px rgba(25,52,58,.17); backdrop-filter:blur(18px); }
.login-hero { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:3rem; color:#fff; background:linear-gradient(145deg, rgba(7,63,58,.98), rgba(11,107,105,.94)); overflow:hidden; }
.login-hero::before { content:""; position:absolute; inset:-20%; background:linear-gradient(120deg, transparent 12%, rgba(255,255,255,.12) 42%, transparent 58%); transform:translateX(70%); animation:softSweep 8s ease-in-out infinite; }
.login-brand { display:flex; align-items:center; gap:1rem; position:relative; z-index:1; }
.login-brand-logo { width:128px; height:128px; object-fit:cover; border-radius:28px; box-shadow:0 20px 44px rgba(0,0,0,.22); background:#073f3a; }
.login-brand-title { font-weight:800 !important; line-height:1.1 !important; }
.login-brand-subtitle { color:rgba(255,255,255,.75) !important; margin-top:.25rem !important; line-height:1.8 !important; }
.login-hero-copy { position:relative; z-index:1; max-width:520px; }
.login-hero-title { font-family:vazirmatn-extrabold, Tahoma, sans-serif !important; font-weight:800 !important; line-height:1.35 !important; margin-bottom:1rem !important; }
.login-hero-text { color:rgba(255,255,255,.78) !important; line-height:2 !important; }
.login-feature-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.login-feature { min-height:92px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.55rem; padding:1rem; border:1px solid rgba(255,255,255,.16) !important; border-radius:18px !important; background:rgba(255,255,255,.09) !important; color:#fff; box-shadow:none !important; }
.login-feature .mud-icon-root { color:#f1c36f; }
.login-feature span { font-size:.85rem; line-height:1.7; }
.login-card { display:flex; flex-direction:column; justify-content:center; padding:3rem 3.2rem; background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)) !important; }
.login-card-heading { margin-bottom:2rem; }
.login-card-heading .mud-typography-h5 { color:#173d43; font-weight:800; margin-bottom:.35rem; }
.login-card-heading .mud-typography-body2 { color:#71878b; line-height:1.8; }
.login-card .mud-input-control { margin-bottom:.25rem; }
.login-card .mud-input-outlined-border { border-color:#dbe6e8 !important; }
.login-card .mud-input-root:focus-within .mud-input-outlined-border { border-color:var(--pp-green-700) !important; }
.login-submit { margin-top:1.5rem !important; height:48px; border-radius:12px !important; background:var(--pp-green-700) !important; box-shadow:0 10px 24px rgba(11,107,105,.24) !important; }
.login-footer-note { display:flex; align-items:center; gap:.5rem; margin-top:1.35rem; padding:.85rem 1rem; border-radius:14px; background:#edf6f5; color:#536c71; font-size:.82rem; line-height:1.8; }
.login-footer-note .mud-icon-root { color:var(--pp-green-700); }

#blazor-error-ui { display:none; position:fixed; bottom:0; width:100%; background:#b32121; color:white; padding:1rem; z-index:2000; }

@keyframes gridDrift { from { transform:translate3d(0,0,0); } to { transform:translate3d(44px,44px,0); } }
@keyframes lineFlow { 0%,100% { transform:translateX(0) rotate(-18deg); opacity:.45; } 50% { transform:translateX(-18vw) rotate(-18deg); opacity:.82; } }
@keyframes lineFlowReverse { 0%,100% { transform:translateX(0) rotate(-18deg); opacity:.35; } 50% { transform:translateX(18vw) rotate(-18deg); opacity:.72; } }
@keyframes softSweep { 0%, 55% { transform:translateX(82%); } 100% { transform:translateX(-82%); } }
@keyframes cardSheen { from { transform:translateX(120%); } to { transform:translateX(-120%); } }
@keyframes statusPulse { 0%,100% { box-shadow:0 0 0 5px rgba(214,155,45,.12); } 50% { box-shadow:0 0 0 9px rgba(214,155,45,.22); } }
@keyframes brandFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes nodeTravel { 0%,100% { transform:translate(0,0); opacity:.7; } 50% { transform:translate(-34vw, 10vw); opacity:1; } }
@keyframes nodeTravelReverse { 0%,100% { transform:translate(0,0); opacity:.6; } 50% { transform:translate(30vw, -9vw); opacity:1; } }

/* ============================================================
   Motion & interaction polish (buttons, menus, cards, nav)
   ============================================================ */
.mud-button-root {
    transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background-color .2s ease, filter .2s ease;
    will-change: transform;
}
.mud-button-root:hover { transform: translateY(-1px); }
.mud-button-root:active { transform: translateY(0) scale(.97); }
.mud-button-filled:hover { box-shadow: 0 10px 24px rgba(11,107,105,.24); filter: saturate(1.05); }
.mud-button-filled-secondary:hover { box-shadow: 0 10px 24px rgba(214,155,45,.26); }

.mud-icon-button {
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), background-color .2s ease;
}
.mud-icon-button:hover { transform: translateY(-1px) rotate(-4deg); }
.mud-icon-button:active { transform: scale(.9); }
.theme-toggle .mud-icon-root { transition: transform .4s ease; }
.theme-toggle:hover .mud-icon-root { transform: rotate(20deg) scale(1.08); }

/* Menus / popovers: soft fade + slide entrance */
.mud-popover.mud-popover-open,
.pp-menu-pop.mud-popover-open { animation: popIn .18s ease both; transform-origin: top center; }
.mud-list-item, .mud-menu-item, .mud-nav-link { transition: background-color .2s ease, color .2s ease, transform .18s ease, padding .2s ease; }
.mud-menu-item:hover { transform: translateX(-3px); }

/* Submit / hero buttons get a gentle attention pulse on hover */
.login-submit:hover { box-shadow: 0 14px 30px rgba(11,107,105,.34) !important; }

/* Card entrance (one-shot) + richer hover already defined on .animated-card */
.metric-card, .dashboard-panel, .filter-panel, .data-panel, .form-panel, .item-group, .ai-result-card {
    animation: cardRise .42s ease both;
}
.nav-menu .mud-nav-link.active { box-shadow: inset 3px 0 0 var(--pp-gold); }

@keyframes popIn { from { opacity:0; transform: translateY(-6px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes cardRise { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

/* ============================================================
   Designer / author footer
   ============================================================ */
.app-footer {
    margin-top: 2.5rem;
    padding: 1.5rem 1rem 2rem;
    border-top: 1px solid var(--pp-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    text-align: center;
}
.app-footer-credit { display: flex; align-items: center; gap: .65rem; opacity: .9; transition: opacity .2s ease, transform .2s ease; }
.app-footer-credit:hover { opacity: 1; transform: translateY(-2px); }
.app-footer-label { font-size: .8rem; color: var(--pp-muted); }
.app-footer-logo { height: 40px; width: auto; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(25,52,58,.18)); animation: brandFloat 7s ease-in-out infinite; }
.app-footer-meta { font-size: .72rem; color: var(--pp-muted); opacity: .8; }

.login-designer { display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:1.1rem; color:#7c9094; }
.login-designer span { font-size:.78rem; }
.login-designer img { height:34px; width:auto; object-fit:contain; opacity:.92; transition:transform .25s ease, opacity .2s ease; filter:drop-shadow(0 6px 14px rgba(25,52,58,.18)); }
.login-designer:hover img { transform:translateY(-2px) scale(1.04); opacity:1; }

/* ============================================================
   Responsive / scrollable tables
   ============================================================ */
.mud-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.mud-table-container::-webkit-scrollbar { height: 8px; }
.mud-table-container::-webkit-scrollbar-thumb { background: rgba(11,107,105,.28); border-radius: 999px; }
.mud-table-root thead th { position: sticky; top: 0; z-index: 2; background: var(--pp-card); backdrop-filter: blur(6px); }
.mud-table-root tbody tr { transition: background-color .18s ease; }

@media (max-width: 700px) {
    .mud-table-container { border: 1px solid var(--pp-line); border-radius: 12px; box-shadow: inset -14px 0 12px -12px rgba(25,52,58,.18); }
    .mud-table-root { min-width: 560px; }
}

/* ============================================================
   Dark mode overrides for custom surfaces
   ============================================================ */
body.pp-dark {
    --pp-green-100: #10302e;
    --pp-ink: #e7f0f0;
    --pp-muted: #9fb3b6;
    --pp-line: #243a3d;
    --pp-bg: #0c1b1d;
    --pp-card: rgba(20, 36, 38, .92);
    background: var(--pp-bg);
    color: var(--pp-ink);
}
body.pp-dark .main-content {
    background:
        linear-gradient(135deg, rgba(12,27,29,.97), rgba(16,32,34,.95)),
        radial-gradient(circle at 12% 12%, rgba(214,155,45,.10), transparent 30%),
        radial-gradient(circle at 85% 14%, rgba(63,182,176,.10), transparent 34%);
}
body.pp-dark .ambient-grid { opacity: .10; background-image: linear-gradient(rgba(63,182,176,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(63,182,176,.16) 1px, transparent 1px); }
body.pp-dark .app-drawer { background: rgba(17,32,31,.94) !important; border-left-color: #1d2f30; }
body.pp-dark .drawer-header { border-bottom-color: #1d2f30; }
body.pp-dark .nav-menu .mud-nav-link:hover { background: #15302e; }
body.pp-dark .nav-menu .mud-nav-link.active { background: linear-gradient(90deg, #123330, #2a2415); color: #6fded7; }
body.pp-dark .support-card { background: rgba(22,40,41,.86) !important; }
body.pp-dark .breadcrumb-bar { border-bottom-color: #1f3335; }
body.pp-dark .metric-icon { background: linear-gradient(135deg, #123330, #2c2614); color: #6fded7; }
body.pp-dark .summary-item { background: #142425; }
body.pp-dark .item-group { background: #122021; border-color: #1f3335; }
body.pp-dark .group-header { background: #15302e; border-bottom-color: #1f3335; }
body.pp-dark .task-row { border-bottom-color: #1f3335; }
body.pp-dark .task-row:hover { background: #15282a; }
body.pp-dark .mud-table-root thead th { background: #142425; }
body.pp-dark .ai-recommendation { background: #2a2614; }
body.pp-dark .login-footer-note { background: #142425; color: #9fb3b6; }
body.pp-dark .empty-state { border-color: #2a3c3f; }
body.pp-dark .page-guide-card { background:rgba(63,182,176,.08) !important; border-color:rgba(63,182,176,.24) !important; }
body.pp-dark .app-footer-logo { filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
body.pp-dark .global-search-panel { background:#122021 !important; border-color:#1f3335; }
body.pp-dark .global-search-group + .global-search-group { border-top-color:#1f3335; }
body.pp-dark .global-search-result:hover,
body.pp-dark .global-search-result:focus-visible { background:#15282a; }

/* ============================================================
   Documents tab: explorer view, themed file icons, uploader
   ============================================================ */
.doc-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.doc-view-toggle { display:inline-flex; background:#eef5f4; border:1px solid var(--pp-line); border-radius:12px; padding:3px; gap:2px; }
.doc-view-toggle .mud-button-root { min-width:0; border-radius:9px !important; padding:.32rem .9rem; color:var(--pp-muted); font-weight:600; font-size:.82rem; }
.doc-view-toggle .mud-button-root:hover { transform:none; background:rgba(255,255,255,.6); }
.doc-view-toggle .mud-button-root.active { background:#fff; color:var(--pp-green-700); box-shadow:0 4px 12px rgba(25,52,58,.1); }

/* Styled "choose file" uploader (replaces the default browser input) */
.doc-uploader { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%; cursor:pointer; padding:.62rem 1.1rem; border-radius:12px; border:1px dashed rgba(11,107,105,.45); background:linear-gradient(135deg,#eef6f5,#fff7e6); color:var(--pp-green-700); font-weight:700; font-size:.88rem; transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
.doc-uploader:hover { transform:translateY(-1px); border-color:var(--pp-gold); box-shadow:0 10px 22px rgba(11,107,105,.16); }
.doc-uploader:active { transform:translateY(0) scale(.98); }
.doc-uploader input[type=file] { display:none; }
.doc-uploader-busy { opacity:.6; pointer-events:none; }

/* Explorer grid */
.doc-explorer { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:1rem; }
.doc-card { position:relative; display:flex; flex-direction:column; gap:.75rem; padding:1rem; border:1px solid var(--pp-line); border-radius:16px; background:var(--pp-card); box-shadow:0 10px 26px rgba(25,52,58,.06); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; animation:cardRise .4s ease both; }
.doc-card:hover { transform:translateY(-3px); border-color:rgba(214,155,45,.4); box-shadow:0 18px 40px rgba(25,52,58,.12); }
.doc-card-body { display:flex; flex-direction:column; gap:.18rem; min-width:0; }
.doc-name { font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-meta { font-size:.72rem; color:var(--pp-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-card-actions { display:flex; align-items:center; gap:.1rem; margin-top:auto; padding-top:.4rem; border-top:1px solid var(--pp-line); }
.doc-version-btn { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; cursor:pointer; color:var(--pp-muted); transition:background-color .2s ease, color .2s ease; }
.doc-version-btn:hover { background:var(--pp-green-100); color:var(--pp-green-700); }

/* Themed file-type icon tiles (harmonised with the green/gold brand) */
.doc-icon { position:relative; width:62px; height:62px; border-radius:16px; display:grid; place-items:center; color:#fff; box-shadow:0 8px 18px rgba(25,52,58,.18); transition:transform .25s ease; }
.doc-card:hover .doc-icon { transform:translateY(-2px) rotate(-3deg); }
.doc-icon .mud-icon-root { font-size:1.9rem; }
.doc-ext { position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); background:#fff; color:var(--pp-ink); font-size:.58rem; font-weight:800; letter-spacing:.4px; padding:1px 7px; border-radius:999px; box-shadow:0 3px 8px rgba(25,52,58,.2); }
/* small icon used inside the table name column */
.doc-row-name { display:inline-flex; align-items:center; gap:.55rem; }
.doc-row-icon { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; color:#fff; }
.doc-row-icon .mud-icon-root { font-size:1.1rem; }

.doc-icon-pdf { background:linear-gradient(135deg,#b5432f,#d46a4f); }
.doc-icon-word { background:linear-gradient(135deg,#0b6b69,#16a39c); }
.doc-icon-excel { background:linear-gradient(135deg,#1d7a4e,#34a86a); }
.doc-icon-ppt { background:linear-gradient(135deg,#c2841f,#e3aa3d); }
.doc-icon-image { background:linear-gradient(135deg,#8d6b2e,#c19a3f); }
.doc-icon-archive { background:linear-gradient(135deg,#6f6238,#a98f3f); }
.doc-icon-text { background:linear-gradient(135deg,#566f74,#7c969b); }
.doc-icon-cad { background:linear-gradient(135deg,#073f3a,#0b6b69); }
.doc-icon-generic { background:linear-gradient(135deg,#5d7378,#88a0a5); }

/* Dark mode for the documents tab */
body.pp-dark .doc-view-toggle { background:#15282a; }
body.pp-dark .doc-view-toggle .mud-button-root.active { background:#0f1f20; color:#6fded7; }
body.pp-dark .doc-uploader { background:linear-gradient(135deg,#15302e,#2a2614); color:#6fded7; border-color:rgba(63,182,176,.4); }
body.pp-dark .doc-card { background:#122021; border-color:#1f3335; }
body.pp-dark .doc-card-actions { border-top-color:#1f3335; }
body.pp-dark .doc-ext { background:#1f3335; color:#e7f0f0; }
body.pp-dark .doc-version-btn:hover { background:#15302e; color:#6fded7; }
body.pp-dark .activity-timeline-shell,
body.pp-dark .activity-timeline-card { background:#122021 !important; border-color:#1f3335; }
body.pp-dark .activity-timeline-item::before { background:#1f3335; }
body.pp-dark .activity-timeline-marker { background:#15302e; border-color:#1f3335; color:#6fded7; }

.purchase-workspace-hero { display:flex; justify-content:space-between; gap:1rem; padding:1.25rem; margin-bottom:1rem; border:1px solid var(--pp-line); border-radius:18px; background:var(--pp-card); box-shadow:0 10px 24px rgba(25,52,58,.06); }
.purchase-workspace-hero-main { display:grid; gap:.75rem; min-width:0; }
.purchase-workspace-meta, .purchase-workspace-actions, .purchase-workspace-related { display:flex; flex-wrap:wrap; gap:.5rem .75rem; align-items:center; }
.purchase-workspace-meta span { color:var(--pp-muted); font-size:.875rem; }
.purchase-workspace-kpis { margin-bottom:1rem; }
.purchase-workspace-tabs .mud-tabs-panels { padding-top:1rem; }

@media (max-width: 600px) {
    .doc-explorer { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

@media (max-width: 1100px) {
    .home-hero { grid-template-columns:1fr; }
    .home-hero-brand { display:none; }
    .login-shell { grid-template-columns:1fr; max-width:580px; min-height:auto; }
    .login-hero { padding:2rem; gap:2.5rem; }
    .login-hero-copy { display:none; }
    .login-feature-grid { grid-template-columns:1fr; }
    .login-card { padding:2.25rem; }
}
@media (max-width: 960px) {
    .brand-subtitle, .profile-copy { display:none; }
    .global-search-box { width:38vw; margin-inline:.5rem; }
    .content-container { padding:0 1rem 2rem !important; }
    .page-header { align-items:flex-start; flex-direction:column; }
    .summary-grid { grid-template-columns:1fr; }
    .purchase-workspace-hero { flex-direction:column; }
}
@media (max-width: 600px) {
    .login-page { padding:1rem; place-items:stretch; }
    .login-shell { border-radius:22px; min-height:calc(100vh - 2rem); }
    .login-hero { padding:1.35rem; }
    .login-brand { align-items:flex-start; }
    .login-brand-logo { width:86px; height:86px; border-radius:20px; }
    .login-feature-grid { display:none; }
    .login-card { padding:1.5rem; justify-content:flex-start; }
    .login-card-heading { margin-bottom:1.35rem; }
    .brand-logo { width:40px; height:40px; border-radius:12px; }
    .brand-title { font-size:.9rem !important; }
    .global-search-box { order:2; flex-basis:100%; width:100%; margin:.35rem 0 0; }
    .app-bar .mud-toolbar { flex-wrap:wrap; min-height:96px; align-content:center; }
    .main-content { padding-top:96px; }
    .page-title { font-size:1.35rem !important; }
    .home-hero { padding:1.25rem; }
    .hero-title { font-size:1.75rem !important; }
    .hero-actions .mud-button-root { width:100%; }
    .metric-card, .filter-panel, .data-panel, .form-panel, .dashboard-panel { padding:.9rem; }
    .report-actions .mud-button-root, .form-actions .mud-button-root { width:100%; }
    .empty-state { padding:2rem 1rem; }
}

/* Ranked bars: a named list where a pie chart would have nowhere to put the name. */
.ranked-bars { display: flex; flex-direction: column; gap: .75rem; }
.ranked-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .25rem; }
.ranked-bar-label { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranked-bar-value { font-size: .8rem; opacity: .75; white-space: nowrap; }

/* ============================================================
   System guide (راهنمای سامانه)
   ============================================================ */
.help-index { position:sticky; top:88px; }
.help-nav .mud-nav-link { border-radius:10px; margin:.1rem 0; font-size:.9rem; }
.help-nav .mud-nav-link.active { background:linear-gradient(90deg,#e6f2f1,#fff8e8); color:var(--pp-green-700); font-weight:700; }
.help-card { display:flex; flex-direction:column; gap:.6rem; height:100%; }
.help-card-head { display:flex; align-items:center; gap:.5rem; }
.help-card-summary { flex:1 1 auto; color:#60777c; }
.help-pager { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.help-body { line-height:2; }

/* Markdown rendered by MarkdownText — the guide and the assistant's answers share this. */
.md-body h4 { margin:1.6rem 0 .6rem; font-size:1.25rem; font-weight:700; }
.md-body h5 { margin:1.4rem 0 .5rem; font-size:1.08rem; font-weight:700; color:var(--pp-green-700); }
.md-body h6 { margin:1.2rem 0 .4rem; font-size:1rem; font-weight:700; }
.md-body p { margin:.7rem 0; }
.md-body ul, .md-body ol { margin:.5rem 0 .9rem; padding-inline-start:1.4rem; }
.md-body li { margin:.3rem 0; }
.md-body blockquote { margin:.8rem 0; padding:.6rem 1rem; border-inline-start:3px solid var(--pp-gold); background:#faf7ef; border-radius:8px; }
.md-body code { background:#f1f5f4; padding:.1rem .35rem; border-radius:6px; font-size:.9em; }
.md-body pre { background:#f1f5f4; padding:.8rem 1rem; border-radius:10px; overflow-x:auto; }
.md-table-scroll { overflow-x:auto; margin:.8rem 0; }
.md-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.md-table th, .md-table td { border:1px solid var(--pp-line); padding:.45rem .7rem; text-align:start; }
.md-table th { background:#f3f7f6; font-weight:700; }

body.pp-dark .help-nav .mud-nav-link.active { background:linear-gradient(90deg,#123330,#2a2415); color:#6fded7; }
body.pp-dark .help-card-summary { color:#9fb3b6; }
body.pp-dark .md-body blockquote { background:#1d2519; }
body.pp-dark .md-body code, body.pp-dark .md-body pre { background:#142425; }
body.pp-dark .md-table th { background:#142425; }

/* ============================================================
   Assistant bubble — fixed to the left, clear of the RTL drawer
   ============================================================ */
.ai-bubble-root {
    /* Below MudBlazor's drawer (1100), popovers (1200), dialogs (1400) and snackbars (1500), so a
       dropdown or dialog opening near the corner covers the bubble rather than hiding behind it. */
    position:fixed; left:24px; bottom:24px; z-index:1090;
    display:flex; flex-direction:column; align-items:flex-start; gap:.75rem;
}
.ai-bubble-launcher { border-radius:999px !important; box-shadow:0 12px 28px rgba(7,63,58,.28); padding:.55rem 1.1rem; }
.ai-bubble-panel {
    width:min(380px, calc(100vw - 48px));
    height:min(560px, calc(100vh - 160px));
    display:flex; flex-direction:column; overflow:hidden; border-radius:18px;
}
.ai-bubble-head {
    display:flex; align-items:center; gap:.6rem; padding:.75rem .9rem;
    border-bottom:1px solid var(--pp-line); background:#f7fbfa;
}
.ai-bubble-title { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.ai-bubble-title small { color:#849599; }
.ai-bubble-body { flex:1 1 auto; overflow-y:auto; padding:.9rem; display:flex; flex-direction:column; gap:.6rem; }
.ai-bubble-hint { margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.75rem; padding:1rem; }
.ai-bubble-message { padding:.55rem .8rem; border-radius:14px; max-width:92%; font-size:.9rem; }
.ai-bubble-message.from-user { align-self:flex-start; background:#e6f2f1; }
.ai-bubble-message.from-assistant { align-self:flex-end; background:#f6f7f5; border:1px solid var(--pp-line); }
.ai-bubble-message .md-body p:first-child { margin-top:0; }
.ai-bubble-message .md-body p:last-child { margin-bottom:0; }
.ai-bubble-foot { display:flex; align-items:flex-end; gap:.5rem; padding:.6rem .9rem 0; }
.ai-bubble-foot .mud-input-control { flex:1 1 auto; }
.ai-bubble-note { margin:.35rem .9rem .8rem; font-size:.72rem; color:#849599; }

@media (max-width:600px) { .ai-bubble-root { left:12px; bottom:12px; } }

body.pp-dark .ai-bubble-head { background:#142425; border-bottom-color:#1f3335; }
body.pp-dark .ai-bubble-message.from-user { background:#123330; }
body.pp-dark .ai-bubble-message.from-assistant { background:#15282a; border-color:#1f3335; }
.ai-bubble-status { display:flex; align-items:center; gap:.5rem; color:#60777c; font-size:.82rem; }

/* Destinations the assistant offers. A suggestion, not a jump: each one is a button. */
.ai-bubble-targets { display:flex; flex-direction:column; gap:.4rem; margin-top:.3rem; }
.ai-bubble-targets-head { font-size:.72rem; color:#849599; }
.ai-bubble-target { justify-content:space-between !important; text-align:start; padding:.5rem .7rem !important; }
.ai-bubble-target-body { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.ai-bubble-target-body strong { font-size:.85rem; }
.ai-bubble-target-body small { font-size:.72rem; opacity:.75; white-space:normal; text-align:start; }
.ai-bubble-autonav { display:flex; align-items:center; gap:.3rem; padding:.35rem .9rem 0; }
.ai-bubble-autonav .mud-switch { margin:0; }
.ai-bubble-autonav .mud-typography { font-size:.78rem; }
.ai-bubble-proposals { display:flex; flex-direction:column; gap:.5rem; margin-top:.3rem; }
.ai-bubble-proposal { border:1px solid var(--mud-palette-lines-default); border-radius:.5rem; padding:.6rem .7rem; display:flex; flex-direction:column; gap:.25rem; }
.ai-bubble-proposal strong { font-size:.85rem; }
.ai-bubble-proposal small { font-size:.75rem; opacity:.8; }
.ai-bubble-proposal-actions { display:flex; gap:.4rem; margin-top:.3rem; }
.ai-bubble-history { display:flex; flex-direction:column; gap:.2rem; padding:.4rem .9rem .2rem; max-height:11rem; overflow-y:auto; }
.ai-bubble-history-item { justify-content:flex-start !important; padding:.35rem .5rem !important; }