@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap");

/* IRANSAR WEB 12.8.0 — unified Dadyar/Vazirmatn typography system.
   This layer is loaded after page-specific styles so public pages and the user portal
   share one readable hierarchy without changing application structure. */
:root {
  --iransar-font: "Vazirmatn", "Noto Sans Arabic", Tahoma, "Segoe UI", Arial, sans-serif;
  --iransar-font-latin: "Vazirmatn", Inter, "Segoe UI", Arial, sans-serif;
  --iransar-type-caption: clamp(.76rem, .08vw + .74rem, .81rem);
  --iransar-type-small: clamp(.82rem, .10vw + .79rem, .88rem);
  --iransar-type-body: clamp(.94rem, .13vw + .90rem, 1rem);
  --iransar-type-lead: clamp(1rem, .18vw + .96rem, 1.12rem);
  --iransar-type-h4: clamp(1rem, .22vw + .95rem, 1.16rem);
  --iransar-type-h3: clamp(1.08rem, .35vw + 1rem, 1.34rem);
  --iransar-type-h2: clamp(1.30rem, .72vw + 1.08rem, 1.86rem);
  --iransar-type-h1: clamp(1.70rem, 1.35vw + 1.25rem, 2.72rem);
  --iransar-leading-body: 1.86;
  --iransar-leading-title: 1.42;
  --app-font: var(--iransar-font);
  --font: var(--iransar-font);
}

html {
  font-size: 16px;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea,
option,
table,
.leaflet-container,
.leaflet-control,
.maplibregl-map,
.mapboxgl-map {
  font-family: var(--iransar-font) !important;
}

html[dir="ltr"] body,
html[dir="ltr"] button,
html[dir="ltr"] input,
html[dir="ltr"] select,
html[dir="ltr"] textarea,
html[dir="ltr"] option,
html[dir="ltr"] table {
  font-family: var(--iransar-font-latin) !important;
}

body {
  font-size: var(--iransar-type-body);
  font-weight: 400;
  line-height: var(--iransar-leading-body);
  letter-spacing: 0;
}

html[dir="ltr"] body { line-height: 1.68; }

h1, h2, h3, h4, h5, h6,
.page-title,
.section-title,
.card-title,
.panel-title {
  margin-block-start: 0;
  font-family: var(--iransar-font) !important;
  color: inherit;
  text-wrap: balance;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

h1 { font-size: var(--iransar-type-h1); line-height: 1.34; font-weight: 900; }
h2 { font-size: var(--iransar-type-h2); line-height: 1.42; font-weight: 800; }
h3 { font-size: var(--iransar-type-h3); line-height: 1.52; font-weight: 800; }
h4 { font-size: var(--iransar-type-h4); line-height: 1.58; font-weight: 700; }
h5, h6 { line-height: 1.62; font-weight: 700; }

p, li, dd, blockquote, figcaption { overflow-wrap: anywhere; }
p { line-height: var(--iransar-leading-body); }
strong, b { font-weight: 700; }
small, .small, .caption, .helper, .hint, .meta, .date-dual {
  font-size: var(--iransar-type-caption);
  line-height: 1.72;
}

button,
.btn,
.primary,
.secondary,
.ghost,
.iconbtn,
[role="button"] {
  font-size: var(--iransar-type-small);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}

input,
select,
textarea {
  font-size: var(--iransar-type-small);
  font-weight: 400;
  line-height: 1.65;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
button:not(.iconbtn) {
  min-height: 42px;
}

label,
.form-label,
th,
legend,
summary {
  font-weight: 700;
}

code, pre, kbd, samp,
.monospace,
.tech-id,
.hash,
[dir="ltr"].numeric,
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
  font-variant-numeric: tabular-nums;
}

/* Public website hierarchy */
.hero h1 { font-size: clamp(2rem, 3vw, 3.35rem); line-height: 1.34; font-weight: 900; }
.hero p, .lead { font-size: var(--iransar-type-lead); line-height: 1.92; }
.nav a, .navbar a { font-size: .95rem; font-weight: 600; }
.brand { font-weight: 900; }
.slogan { font-size: 1.05rem; font-weight: 700; line-height: 1.75; }
.section-title h2 { font-size: clamp(1.45rem, 1.15vw, 2rem); line-height: 1.48; }
.section-title p { font-size: .97rem; line-height: 1.84; }
.card h3, .feature h3, .service-card h3, .package-card h3, .sector-card h3 {
  font-size: clamp(1rem, .25vw + .96rem, 1.18rem);
  line-height: 1.58;
  font-weight: 800;
}
.card p, .feature p, .service-card p, .package-card p, .sector-card p {
  font-size: .94rem;
  line-height: 1.84;
}

/* User portal and administrative workspace hierarchy */
.portal, .auth-layout { font-size: .95rem; }
.auth-official-title strong { font-size: 1rem; font-weight: 800; line-height: 1.55; }
.auth-official-title span { font-size: .82rem; line-height: 1.65; }
.auth-brand-title > span { font-size: .86rem; font-weight: 700; }
.auth-brand-title h1 { font-size: clamp(3.2rem, 6vw, 5.8rem); line-height: 1; font-weight: 900; }
.auth-brand-title small { font-size: .92rem; font-weight: 600; }
.auth-brand > p { font-size: 1rem; line-height: 2; }
.auth-card-head b, .form-heading h2 { font-weight: 800; }
.form-heading h2 { font-size: 1.28rem; }
.form-heading p { font-size: .86rem; line-height: 1.75; }

.portal-brand b { font-size: 1.06rem; font-weight: 900; letter-spacing: .025em; }
.portal-brand small { font-size: .75rem; line-height: 1.55; }
.sidebar-primary-action { font-size: .91rem; font-weight: 800; line-height: 1.5; }
.nav-group > h2, .sidebar-nav .nav-group > h2 {
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}
.sidebar-nav a, .sidebar-nav button {
  font-size: .90rem;
  font-weight: 600;
  line-height: 1.58;
}
.user-mini { font-size: .85rem; line-height: 1.7; }

.page-head h1, .view .page-head h1 {
  font-size: clamp(1.38rem, .8vw + 1.15rem, 1.95rem);
  line-height: 1.45;
  font-weight: 900;
}
.page-head p { font-size: .94rem; line-height: 1.82; }
.panel h2, .workspace-card h2, .dashboard-card h2, .section-head h2 {
  font-size: clamp(1.14rem, .32vw + 1.05rem, 1.38rem);
  line-height: 1.52;
  font-weight: 800;
}
.panel h3, .workspace-card h3, .dashboard-card h3, .item-card h3,
.catalog-output-card h3, .planner-service-card h3 {
  font-size: clamp(1rem, .18vw + .96rem, 1.14rem) !important;
  line-height: 1.62 !important;
  font-weight: 800;
}
.panel p, .workspace-card p, .dashboard-card p, .item-card p,
.catalog-output-card p, .planner-service-card p {
  line-height: 1.84;
}

.form-grid label, .auth-form label, form label, .field-label {
  font-size: .84rem;
  line-height: 1.65;
  font-weight: 700;
}

.table-wrap table, .data-table, table {
  font-size: .84rem;
  line-height: 1.72;
}
th { font-size: .80rem; font-weight: 800; }
td { font-weight: 400; }
.badge, .status, .chip, .tag, .pill, .auth-security-chip {
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.45;
}
.toast { font-size: .90rem; line-height: 1.82; }

/* Map labels and environmental-watch controls remain compact but readable. */
.toolbar label, .watch-control-group label, .layer-tools label { font-size: .80rem; font-weight: 700; }
.fire-list table { font-size: .80rem; }
.leaflet-control, .leaflet-popup-content { font-size: .82rem; line-height: 1.65; }

/* Prevent compact UI text from becoming unreadably small. */
.portal small:not(.icon),
.portal .muted,
.portal .meta,
.portal .hint,
.portal .helper,
.portal .date-dual { font-size: max(.76rem, 12px); }

@media (max-width: 760px) {
  :root {
    --iransar-type-body: .94rem;
    --iransar-type-h1: clamp(1.48rem, 6vw, 2rem);
    --iransar-type-h2: clamp(1.20rem, 4.5vw, 1.52rem);
  }
  body { line-height: 1.82; }
  .hero h1 { font-size: clamp(1.75rem, 8vw, 2.35rem); }
  .auth-brand-title h1 { font-size: clamp(2.9rem, 16vw, 4.4rem); }
  .sidebar-nav a { font-size: .92rem; }
  button, .btn, .primary, .secondary { font-size: .86rem; }
}

@media print {
  body { font-family: var(--iransar-font) !important; font-size: 10.5pt; line-height: 1.7; }
  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 12pt; }
}