/* ==========================================================================
   Kisan Portal — Government of J&K
   Visual language follows the reference portals (mkisan.gov.in,
   dakshkisan.jk.gov.in): deep institutional green, saffron accent, high
   contrast, generous tap targets for low-end rural devices.

   Written logical-property-first (inline-start/end, margin-inline) so the
   Urdu RTL layout is a single dir="rtl" attribute, not a second stylesheet.
   ========================================================================== */

:root {
  --green-900: #14431f;
  --green-800: #1b5e20;
  --green-700: #24713a;
  --green-100: #e6f2e8;
  --green-050: #f3f9f4;

  --saffron:     #ff9933;
  --saffron-600: #e07b1a;
  --saffron-050: #fff6ec;

  --navy:      #17324d;
  --ink:       #1f2933;
  --ink-muted: #5b6773;
  --line:      #d9e0e5;
  --bg:        #f5f7f6;
  --surface:   #ffffff;

  --danger: #b3261e;
  --ok:     #1b5e20;

  --radius: 6px;
  --shadow-sm: 0 1px 2px rgba(23, 50, 77, .08);
  --shadow-md: 0 2px 10px rgba(23, 50, 77, .10);

  --wrap: 1180px;
}

/* --------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

/* Devanagari and Nastaliq need more vertical room than Latin to stay legible. */
html[lang="hi"] body { font-family: "Noto Sans Devanagari", "Noto Sans", sans-serif; line-height: 1.7; }
html[lang="ur"] body { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; line-height: 2.1; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-800); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 16px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: 8px; top: -48px;
  background: var(--navy); color: #fff; padding: 10px 16px;
  z-index: 100; transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* Single visible focus treatment everywhere — keyboard users on a govt form
   need to always know where they are. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- header */

.utility-bar {
  background: var(--navy);
  color: #dfe7ee;
  font-size: 13px;
}
.utility-bar .wrap {
  display: flex; align-items: center; gap: 18px;
  min-height: 38px; flex-wrap: wrap;
}
.utility-bar a { color: #dfe7ee; text-decoration: none; }
.utility-bar a:hover { text-decoration: underline; }
.utility-bar .spacer { margin-inline-start: auto; }

.lang-switch { display: flex; align-items: center; gap: 4px; }
.lang-switch a {
  padding: 3px 9px; border-radius: 3px; line-height: 1.4;
}
.lang-switch a[aria-current="true"] {
  background: var(--saffron); color: var(--navy); font-weight: 600;
}

.btn-login {
  background: var(--saffron); color: var(--navy) !important;
  padding: 5px 14px; border-radius: 3px;
  font-weight: 600; text-decoration: none !important;
}

.masthead { background: var(--surface); border-bottom: 3px solid var(--green-800); }
.masthead .wrap {
  display: flex; align-items: center; gap: 16px;
  padding-block: 14px; flex-wrap: wrap;
}
.emblem {
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center;
  border: 2px solid var(--green-800); border-radius: 50%;
  background: var(--green-050);
  font-weight: 700; color: var(--green-800); font-size: 11px;
  text-align: center; line-height: 1.15;
}
.masthead-text h1 {
  margin: 0; font-size: 21px; color: var(--green-900); letter-spacing: .1px;
}
.masthead-text p { margin: 1px 0 0; font-size: 13px; color: var(--ink-muted); }

.helpline {
  margin-inline-start: auto; text-align: end;
  font-size: 13px; color: var(--ink-muted);
}
.helpline strong { display: block; font-size: 19px; color: var(--green-800); }

/* Main nav */
.mainnav { background: var(--green-800); }
.mainnav ul {
  display: flex; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.mainnav a {
  display: block; padding: 12px 18px;
  color: #fff; text-decoration: none; font-weight: 500; font-size: 15px;
}
.mainnav a:hover { background: var(--green-900); }
.mainnav a[aria-current="page"] { background: var(--green-900); box-shadow: inset 0 -3px 0 var(--saffron); }

/* --------------------------------------------------------------- banner */

.banner {
  position: relative; background: var(--green-900);
  /* Height is set directly rather than derived from aspect-ratio. An
     aspect-ratio combined with max-height makes Chrome shrink the WIDTH to
     preserve the ratio, which stopped the banner dead at 1216px
     (340 x 1180/330) instead of spanning the viewport. */
  height: clamp(240px, 26vw, 360px);
  overflow: hidden;
}
.banner-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; transition: opacity .7s ease;
}
/* Stretch the inner wrap so the heading lines up with the page gutter and the
   cards below it. Without this the auto inline margin makes the flex item
   shrink to fit-content and drift to the centre. */
.banner-slide .wrap { width: 100%; }
.banner-slide.is-active { opacity: 1; }
.banner-slide h2 {
  margin: 0 0 8px; color: #fff;
  font-size: clamp(20px, 3.2vw, 34px); max-width: 20ch;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.banner-slide p {
  margin: 0; color: #eaf3ec; max-width: 46ch;
  font-size: clamp(13px, 1.5vw, 16px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
/* Slide backdrops are gradients rather than photographs so the demo carries no
   image weight and stays sharp on any screen. Swap for real field photography
   when the department supplies assets. */
.banner-slide.b1 { background: linear-gradient(115deg, #14431f 0%, #24713a 55%, #3f8f52 100%); }
.banner-slide.b2 { background: linear-gradient(115deg, #17324d 0%, #1b5e20 60%, #2f7d3c 100%); }
.banner-slide.b3 { background: linear-gradient(115deg, #8a4a0f 0%, #b56a17 45%, #1b5e20 100%); }

.banner-dots {
  position: absolute; inset-block-end: 12px; inset-inline-end: 20px;
  display: flex; gap: 8px;
}
.banner-dots button {
  width: 11px; height: 11px; padding: 0; border-radius: 50%;
  border: 2px solid #fff; background: transparent; cursor: pointer;
}
.banner-dots button[aria-selected="true"] { background: var(--saffron); border-color: var(--saffron); }

/* Respect users who asked the OS to stop motion — the carousel stops advancing. */
@media (prefers-reduced-motion: reduce) {
  .banner-slide { transition: none; }
}

/* --------------------------------------------------------------- layout */

.section { padding-block: 34px; }
.section-head { margin-bottom: 18px; }
.section-head h2 {
  margin: 0; font-size: 22px; color: var(--green-900);
  display: flex; align-items: center; gap: 10px;
}
.section-head h2::after {
  content: ""; flex: 1; height: 2px; background: var(--line);
}
.section-head p { margin: 4px 0 0; color: var(--ink-muted); font-size: 14px; }

.split {
  display: grid; gap: 22px;
  grid-template-columns: 1.35fr 1fr;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-head {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--green-050);
  font-weight: 600; color: var(--green-900);
}
.card-body { padding: 16px; }

/* ------------------------------------------------- map + quick statistics */

/* Map on top, figures beneath. Twenty districts need the full card width to
   stay legible, so this no longer sits beside the stats. */
.map-panel { display: block; }

.map-holder { position: relative; }
.jk-map { width: 100%; height: auto; display: block; }

.jk-map { max-height: 460px; }

.jk-map .region {
  fill: #a9d0b4; stroke: var(--green-900); stroke-width: 1.6;
  stroke-linejoin: round; transition: fill .15s; cursor: pointer;
}
.jk-map .region:hover,
.jk-map .region:focus,
.jk-map .region.is-active { fill: var(--saffron); outline: none; }

/* Districts carrying no records yet: clearly part of the map, clearly empty. */
.jk-map .region.is-empty { fill: #e4eae6; }

/* Territory the portal holds no administrative data for. Drawn so the
   boundary stays complete, but not interactive. */
.jk-map .region-nodata {
  fill: #eceef0; stroke: #9aa5ac; stroke-width: 1.2;
  stroke-dasharray: 5 4; cursor: default;
}
.jk-map .region-nodata:hover { fill: #eceef0; }

.map-tip {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 170px; max-width: 250px;
  background: var(--navy); color: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 9px 12px; font-size: 13px; line-height: 1.45;
}
.map-tip strong {
  display: block; font-size: 15px; margin-bottom: 5px; color: var(--saffron);
}
.map-tip dl {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0;
}
.map-tip dt { color: #b9c9d6; }
.map-tip dd { margin: 0; text-align: end; font-weight: 600; }
.map-tip .none { color: #b9c9d6; font-style: italic; }

.map-hint {
  margin: 10px 0 0; font-size: 12px;
  color: var(--ink-muted); text-align: center;
}

.stat-list {
  display: grid; gap: 10px; margin-top: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 520px) { .stat-list { grid-template-columns: 1fr; } }
.stat {
  border-inline-start: 4px solid var(--saffron);
  background: var(--saffron-050);
  padding: 9px 12px; border-radius: 0 var(--radius) var(--radius) 0;
}
.stat .value { font-size: 22px; font-weight: 700; color: var(--green-900); }
.stat .label { font-size: 12px; color: var(--ink-muted); }

/* ------------------------------------------------------- farmer corner */

.farmer-corner .card-head { background: var(--green-800); color: #fff; border-bottom: none; }
.corner-action {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line);
}
.corner-action:last-child { border-bottom: none; }
.corner-action:hover { background: var(--green-050); }
.corner-action .ico {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-100); color: var(--green-800);
}
.corner-action strong { display: block; color: var(--green-900); }
.corner-action span { font-size: 13px; color: var(--ink-muted); }

/* ------------------------------------------------- kisan suvidha tiles */

.tiles {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 940px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tiles { grid-template-columns: 1fr; } }

.tile {
  display: block; padding: 18px 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  border-block-start: 3px solid var(--green-700);
  transition: transform .15s, box-shadow .15s;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md); border-block-start-color: var(--saffron);
}
.tile .ico {
  width: 42px; height: 42px; margin-bottom: 10px;
  display: grid; place-items: center; border-radius: var(--radius);
  background: var(--green-100); color: var(--green-800);
}
.tile strong { display: block; color: var(--green-900); font-size: 15px; }
.tile span { font-size: 13px; color: var(--ink-muted); }

/* --------------------------------------------------------------- forms */

.form-section {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 18px; overflow: hidden;
}
.form-section > legend, .form-section > .legend {
  width: 100%; margin: 0; padding: 11px 16px;
  background: var(--green-050); border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--green-900); font-size: 15px;
}
.form-grid {
  display: grid; gap: 14px 18px; padding: 16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .col-2 { grid-column: span 2; }
@media (max-width: 560px) { .form-grid .col-2 { grid-column: span 1; } }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 14px; font-weight: 600; color: var(--navy); }
.field .req { color: var(--danger); }
.field .hint { font-size: 12px; color: var(--ink-muted); }
.field .err { font-size: 12px; color: var(--danger); font-weight: 600; }

input[type="text"], input[type="tel"], input[type="number"],
input[type="date"], select, textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid #b9c4cc; border-radius: 4px;
  font: inherit; color: var(--ink); background: #fff;
}
input:disabled, select:disabled { background: #eef1f3; color: var(--ink-muted); }
.field.has-error input, .field.has-error select { border-color: var(--danger); background: #fdf3f2; }

/* Kanal + marla sit side by side as one logical measurement. */
.unit-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.unit-pair .unit { position: relative; }
.unit-pair .unit small {
  position: absolute; inset-block-start: 50%; inset-inline-end: 10px;
  transform: translateY(-50%); color: var(--ink-muted); font-size: 12px;
  pointer-events: none;
}
.unit-pair input { padding-inline-end: 48px; }

/* Repeating date-wise operation rows */
.op-row {
  display: grid; gap: 10px; align-items: end;
  grid-template-columns: 1fr 1fr 2fr auto;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
@media (max-width: 700px) { .op-row { grid-template-columns: 1fr 1fr; } }
.op-row:last-of-type { border-bottom: none; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 4px; border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--green-800); color: #fff; }
.btn-primary:hover { background: var(--green-900); }
.btn-secondary { background: #fff; color: var(--navy); border-color: #b9c4cc; }
.btn-secondary:hover { background: #eef1f3; }
.btn-ghost {
  background: transparent; color: var(--danger);
  border-color: transparent; padding: 8px 10px;
}
.form-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding-block: 8px 28px;
}

.alert {
  padding: 12px 16px; border-radius: var(--radius);
  margin-bottom: 18px; border-inline-start: 4px solid;
}
.alert-ok    { background: var(--green-050); border-color: var(--ok); color: var(--green-900); }
.alert-error { background: #fdf3f2; border-color: var(--danger); color: #7d1a15; }

/* --------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td {
  padding: 10px 13px; text-align: start;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data thead th {
  background: var(--green-800); color: #fff;
  font-weight: 600; position: sticky; top: 0;
}
table.data tbody tr:nth-child(even) { background: var(--green-050); }
table.data tbody tr:hover { background: var(--saffron-050); }
.empty-state { padding: 40px 16px; text-align: center; color: var(--ink-muted); }

.filter-bar {
  display: flex; gap: 12px; align-items: end; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.filter-bar .field { min-width: 190px; }

/* --------------------------------------------------------------- footer */

.site-footer { background: var(--green-900); color: #cfe0d4; margin-top: 40px; }
.footer-grid {
  display: grid; gap: 26px; padding-block: 30px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h3 { margin: 0 0 10px; font-size: 15px; color: #fff; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 6px; }
.footer-grid a { color: #cfe0d4; text-decoration: none; font-size: 14px; }
.footer-grid a:hover { color: var(--saffron); text-decoration: underline; }
.footer-bar {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-block: 14px; font-size: 13px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* The demo banner keeps a client review from mistaking this for a live
   government service. Remove when the portal actually goes live. */
.demo-flag {
  background: var(--saffron); color: var(--navy);
  text-align: center; font-size: 13px; font-weight: 600; padding: 6px 16px;
}

/* --------------------------------------------------------------- print */

@media print {
  .utility-bar, .mainnav, .banner, .site-footer, .form-actions, .demo-flag { display: none; }
  body { background: #fff; font-size: 12px; }
  .card, .form-section, .table-wrap { border-color: #999; box-shadow: none; }
}