@font-face {
  font-family: "Vazirmatn";
  src: url("/vazirmatn.woff2") format("woff2");
  font-display: swap;
}

:root {
  --navy: #0a3157;
  --blue: #1677ff;
  --ink: #102a43;
  --muted: #6b7f93;
  --line: #dbe6f1;
  --surface: #ffffff;
  --canvas: #f2f7fc;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); }
body, button, input, textarea { font-family: "Vazirmatn", Tahoma, sans-serif; }
button { cursor: pointer; }
.view[hidden] { display: none !important; }

.app-shell { min-height: 100vh; display: flex; background: var(--canvas); }
.sidebar { position: fixed; inset: 0 0 0 auto; z-index: 20; width: 245px; padding: 26px 18px; color: #fff; background: linear-gradient(180deg, #0c3c68, #072742); display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(8, 45, 79, .12); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; border-bottom: 1px solid rgba(255,255,255,.13); }
.brand > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg, #2a91ff, #0963d8); font: 800 21px Arial; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.brand div { display: grid; gap: 2px; }
.brand strong { font-size: 14px; }
.brand small { color: #aac4da; font-size: 11px; }
.sidebar nav { display: grid; gap: 9px; margin-top: 26px; }
.sidebar nav button { border: 0; border-radius: 12px; padding: 13px 14px; color: #dceaf6; background: transparent; display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 700; text-align: right; transition: .2s ease; }
.sidebar nav button span { width: 25px; text-align: center; font: 700 19px Arial; }
.sidebar nav button:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar nav button.active { color: #fff; background: linear-gradient(100deg, #1684ff, #126fe4); box-shadow: 0 10px 24px rgba(0, 91, 207, .28); }
.sidebar-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.13); padding: 19px 8px 0; display: flex; align-items: center; gap: 10px; }
.sidebar-foot > span { color: #4be1a2; font-size: 16px; }
.sidebar-foot div { display: grid; }
.sidebar-foot strong { font-size: 12px; }
.sidebar-foot small { color: #aac4da; font-size: 10px; }

.main-area { width: calc(100% - 245px); margin-right: 245px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 76px; padding: 0 clamp(24px, 4vw, 58px); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.topbar > div { display: grid; gap: 3px; }
.topbar strong { font: 800 15px Arial, sans-serif; letter-spacing: .2px; }
.topbar small { color: var(--muted); font-size: 11px; }
.demo-badge, .limited-chip { padding: 7px 12px; border: 1px solid #bfdbff; border-radius: 999px; color: #075ec9; background: #eaf4ff; font-size: 11px; font-weight: 800; }
.content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 46px 0 38px; flex: 1; }
.view-stack { display: grid; gap: 22px; animation: appear .25s ease-out; }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } }
.page-heading { text-align: right; }
.eyebrow { color: var(--blue); font-size: 11px; font-weight: 800; }
.page-heading h1 { margin: 5px 0 4px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.6px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-grid article { min-height: 126px; padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); display: flex; align-items: center; gap: 15px; box-shadow: 0 8px 22px rgba(30,76,120,.05); }
.metric-icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font: 700 21px Arial; }
.metric-icon.blue { color: #1477ed; background: #e8f2ff; }
.metric-icon.cyan { color: #009c9c; background: #e4f7f5; }
.metric-icon.amber { color: #dd8700; background: #fff3dc; }
.metric-icon.purple { color: #7d3fd5; background: #f1e8ff; }
.metric-grid article div { display: grid; gap: 2px; }
.metric-grid small { color: var(--muted); font-size: 11px; }
.metric-grid strong { font-size: 26px; }
.metric-grid strong b { font-size: 11px; }
.metric-grid em { color: #8ba0b5; font-size: 10px; font-style: normal; }

.panel, .flow-card, .paper-wrap { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 12px 30px rgba(30,76,120,.06); overflow: hidden; }
.panel-head { min-height: 65px; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.panel-head > div { display: grid; grid-template-columns: 30px auto; align-items: center; column-gap: 8px; }
.panel-icon { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #1976ed; background: #e9f3ff; }
.panel-head strong { font-size: 13px; }
.panel-head small { color: var(--muted); font-size: 10px; }
.panel-head button { border: 0; color: var(--blue); background: transparent; font-size: 11px; font-weight: 800; }
.program-row { margin: 14px; padding: 15px; border: 1px solid #deebf6; border-radius: 13px; background: #f9fcff; display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; gap: 14px; align-items: center; }
.program-row > div { display: grid; gap: 3px; }
.program-row small { color: var(--muted); font-size: 10px; }
.program-row strong { font-size: 12px; }
.program-number { grid-template-columns: 33px 1fr !important; }
.program-number > span { grid-row: 1 / 3; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: #176dda; background: #e8f2ff; font-size: 10px; font-weight: 800; }
.program-number strong { direction: ltr; text-align: right; }
.status { min-width: 92px; padding: 7px 10px; border-radius: 999px; text-align: center; font-size: 10px; font-weight: 800; }
.status.approved { color: #06775d; background: #ddf5ed; }
.status.waiting { color: #a65c00; background: #fff0d3; }
.demo-note { padding: 16px 18px; border: 1px solid #c6e0ff; border-radius: 14px; color: #195a9e; background: #edf6ff; display: flex; align-items: center; gap: 12px; }
.demo-note > span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #1677ed; font: 700 15px Georgia; }
.demo-note strong { font-size: 12px; }
.demo-note p { margin: 2px 0 0; font-size: 10px; color: #5681ac; }

.planning-panel { padding: 18px; }
.readonly-banner { margin: -18px -18px 18px; padding: 12px 18px; color: #226b56; background: #e7f8f1; font-size: 11px; font-weight: 700; }
.readonly-banner span { margin-left: 6px; padding: 3px 8px; border-radius: 6px; color: #fff; background: #14946f; }
.fields-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; }
.fields-grid label, .description { display: grid; gap: 6px; }
.fields-grid label > span, .description > span { font-size: 11px; font-weight: 800; }
.fields-grid input, .description textarea, .shift-row { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #cfdeeb; border-radius: 10px; color: #123653; background: #fafdff; outline: none; font-size: 12px; }
.fields-grid input { direction: rtl; }
.shift-row { display: flex; align-items: center; gap: 8px; padding: 5px; }
.shift-row b { flex: 1; padding: 7px; border-radius: 7px; color: #087963; background: #e4f7f0; text-align: center; font-size: 10px; }
.shift-row b.off { color: #8c9baa; background: #f1f5f8; }
.items-head { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; }
.items-head > div { display: grid; }
.items-head strong { font-size: 13px; }
.items-head small { color: var(--muted); font-size: 10px; }
.items-head > span { padding: 5px 10px; border-radius: 8px; color: #176dda; background: #e9f3ff; font-size: 10px; font-weight: 800; }
.items-table { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.table-head, .table-row { display: grid; grid-template-columns: 70px 2.4fr 1.5fr 1fr 1fr; align-items: center; min-width: 700px; }
.table-head { min-height: 38px; color: #526d86; background: #edf4fb; font-size: 10px; font-weight: 800; }
.table-row { min-height: 54px; border-top: 1px solid var(--line); font-size: 11px; }
.table-head span, .table-row > * { padding: 8px 12px; }
.table-row code { direction: ltr; text-align: right; font: 700 11px Arial; color: #28506e; }
.inventory { color: #087963; }
.description { margin-top: 17px; }
.description textarea { min-height: 76px; padding-top: 12px; resize: none; }
.actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 9px; }
.actions button { min-height: 41px; padding: 0 18px; border-radius: 9px; font-size: 11px; font-weight: 800; }
.actions .ghost { color: #176dda; border: 1px solid #bcd8f7; background: #fff; }
.actions .primary { color: #fff; border: 1px solid #1677ed; background: #1677ed; box-shadow: 0 7px 16px rgba(22,119,237,.22); }

.flow-card { padding: 20px; }
.flow-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.flow-summary > div { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #f8fbfe; display: grid; gap: 3px; }
.flow-summary small { color: var(--muted); font-size: 10px; }
.flow-summary strong { font-size: 12px; }
.flow-summary strong:first-of-type { direction: ltr; text-align: right; }
.orange-text { color: #c67200; }
.timeline { margin: 26px 5px 20px; display: grid; grid-template-columns: repeat(5, 1fr); direction: rtl; }
.timeline article { position: relative; display: grid; justify-items: center; text-align: center; }
.step-marker { position: relative; width: 100%; display: grid; place-items: center; }
.step-marker span { z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #8aa0b4; border: 2px solid #cbd9e5; background: #fff; font-size: 12px; font-weight: 900; }
.step-marker i { position: absolute; top: 18px; left: -50%; width: 100%; height: 2px; background: #d9e5ef; }
.timeline article.done .step-marker span { color: #fff; border-color: #12a17c; background: #12a17c; }
.timeline article.done .step-marker i { background: #65cdb2; }
.timeline article.active .step-marker span { color: #fff; border-color: #f3a31f; background: #f3a31f; box-shadow: 0 0 0 6px #fff1d9; }
.timeline article > div:last-child { margin-top: 9px; }
.timeline article strong { font-size: 12px; }
.timeline article p { margin: 3px 0; color: var(--muted); font-size: 9px; }
.timeline article small { color: #9aabb9; font-size: 9px; }
.timeline article.done small { color: #08866a; }
.timeline article.active small { color: #bc6d00; font-weight: 800; }
.history { border-top: 1px solid var(--line); padding-top: 16px; }
.history h3 { margin: 0 0 10px; font-size: 13px; }
.history > div { display: grid; grid-template-columns: 55px 1fr; column-gap: 10px; padding: 9px 0; border-top: 1px dashed #e3ebf2; }
.history span { grid-row: 1 / 3; direction: ltr; color: #6f8497; font: 11px Arial; }
.history strong { font-size: 11px; }
.history small { color: var(--muted); font-size: 9px; }

.paper-toolbar { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; }
.paper-toolbar > span:first-child { display: flex; align-items: center; gap: 7px; }
.paper-toolbar i { width: 8px; height: 8px; border-radius: 50%; background: #13a078; box-shadow: 0 0 0 4px #dff5ed; }
.paper-form { width: min(1000px, calc(100% - 32px)); margin: 16px auto 22px; color: #111; border: 2px solid #1d2935; background: #fff; box-shadow: 0 8px 25px rgba(31,55,78,.08); }
.paper-header { min-height: 118px; display: grid; grid-template-columns: 220px 1fr 180px; border-bottom: 2px solid #1d2935; }
.doc-meta { display: grid; border-left: 2px solid #1d2935; }
.doc-meta span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #1d2935; font-size: 10px; }
.doc-meta span:last-child { border-bottom: 0; }
.paper-header h2 { display: grid; place-items: center; margin: 0; padding: 15px; font-size: 22px; text-align: center; }
.paper-logo { border-right: 2px solid #1d2935; display: grid; place-items: center; align-content: center; color: #1677ed; font: 900 48px Arial; }
.paper-logo small { color: #607386; font: 9px Arial; letter-spacing: .7px; }
.paper-info { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #9bafc1; background: #f7fbff; }
.paper-info > span { min-height: 54px; padding: 8px 10px; border-left: 1px solid #9bafc1; display: grid; align-content: center; gap: 3px; }
.paper-info > span:last-child { border-left: 0; }
.paper-info small { color: #607386; font-size: 9px; }
.paper-info b { font-size: 10px; }
.paper-row { display: grid; grid-template-columns: .55fr 1.25fr 2.2fr 1fr 1fr .8fr 1.7fr; min-width: 760px; }
.paper-row > span { min-height: 47px; padding: 7px; display: grid; place-items: center; border-left: 1px solid #b8c8d6; border-bottom: 1px solid #b8c8d6; text-align: center; font-size: 10px; }
.paper-row > span:last-child { border-left: 0; }
.paper-row.header span { min-height: 39px; color: #17324a; background: #e8f2fc; font-weight: 800; }
.paper-row.empty span { min-height: 38px; }
.operator-cell { background: #fff9e8; }
.form-foot { min-height: 48px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.form-foot span { color: #6d7f8d; font-size: 9px; }
.form-foot strong { color: #08765d; font-size: 11px; }

footer { min-height: 66px; padding: 16px clamp(24px, 4vw, 58px); border-top: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
footer span { color: var(--muted); font-size: 10px; }
footer strong { color: #0a65ce; font-size: 11px; }
.mobile-nav { display: none; }

@media (max-width: 980px) {
  .sidebar { width: 205px; }
  .main-area { width: calc(100% - 205px); margin-right: 205px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .fields-grid { grid-template-columns: 1fr 1fr; }
  .fields-grid .wide { grid-column: 1 / -1; }
  .program-row { grid-template-columns: 2fr 1fr 1fr; }
  .status { min-width: 0; }
  .paper-header { grid-template-columns: 190px 1fr 145px; }
  .paper-wrap { overflow-x: auto; }
}

@media (max-width: 720px) {
  .app-shell { padding-bottom: 67px; }
  .sidebar { display: none; }
  .main-area { width: 100%; margin: 0; }
  .topbar { height: auto; min-height: 70px; padding: 13px 16px; }
  .topbar strong { font-size: 12px; }
  .topbar small { display: none; }
  .demo-badge { padding: 6px 8px; font-size: 9px; }
  .content { width: calc(100% - 24px); padding: 26px 0; }
  .page-heading h1 { font-size: 24px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-grid article { min-height: 112px; padding: 14px; gap: 10px; }
  .metric-icon { flex-basis: 38px; width: 38px; height: 38px; }
  .metric-grid strong { font-size: 21px; }
  .program-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .program-number { grid-column: 1 / -1; }
  .fields-grid { grid-template-columns: 1fr; }
  .fields-grid .wide { grid-column: auto; }
  .items-table { overflow-x: auto; }
  .actions { flex-direction: column-reverse; }
  .actions button { width: 100%; }
  .flow-summary { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 0; margin-right: 6px; }
  .timeline article { grid-template-columns: 50px 1fr; justify-items: start; text-align: right; min-height: 82px; }
  .step-marker { width: 50px; align-self: stretch; align-items: start; padding-top: 1px; }
  .step-marker i { top: 38px; left: auto; right: 24px; width: 2px; height: calc(100% - 30px); }
  .timeline article > div:last-child { margin: 2px 0 0; }
  .paper-wrap { margin: 0 -2px; }
  .paper-form { width: 920px; margin-right: 14px; }
  .paper-toolbar { position: sticky; right: 0; width: calc(100vw - 28px); }
  footer { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
  .mobile-nav { position: fixed; inset: auto 0 0; z-index: 30; height: 67px; padding: 7px 8px 5px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; border-top: 1px solid #d5e2ee; background: rgba(255,255,255,.96); box-shadow: 0 -5px 18px rgba(16,42,67,.1); backdrop-filter: blur(12px); }
  .mobile-nav button { border: 0; border-radius: 9px; color: #6f8294; background: transparent; display: grid; place-items: center; align-content: center; gap: 2px; }
  .mobile-nav button span { font: 700 18px Arial; }
  .mobile-nav button small { font-size: 9px; font-weight: 800; }
  .mobile-nav button.active { color: #096bdd; background: #e9f3ff; }
}

@media (max-width: 430px) {
  .metric-grid { grid-template-columns: 1fr; }
  .panel-head { align-items: flex-start; gap: 8px; }
  .panel-head button { max-width: 110px; }
  .program-row { grid-template-columns: 1fr; }
  .program-number { grid-column: auto; }
}