/* Stage 14 — responsive map workspace, admin dashboard and PWA safe-area handling. */
:root { --jnaf-safe-top: env(safe-area-inset-top, 0px); --jnaf-safe-right: env(safe-area-inset-right, 0px); --jnaf-safe-bottom: env(safe-area-inset-bottom, 0px); --jnaf-safe-left: env(safe-area-inset-left, 0px); }
html { width:100%; min-width:0; min-height:100%; overscroll-behavior:none; -webkit-text-size-adjust:100%; }
body:not(.admin-page) { width:100%; height:100vh; height:100dvh; min-height:100vh; min-height:100dvh; padding:0; overscroll-behavior:none; }
#root { min-width:0 !important; width:100% !important; height:100vh !important; height:100dvh !important; min-height:0 !important; overflow:hidden !important; }
#root > div[style*="width: 100vw"] { width:100vw !important; height:100vh !important; height:100dvh !important; min-height:0 !important; max-height:100dvh !important; overflow:hidden !important; }
#root button, #root input, #root select, #root textarea { touch-action:manipulation; }
#root button { -webkit-user-select:none; user-select:none; }
#root input, #root select, #root textarea { font-size:16px !important; }
#root .leaflet-container { -webkit-tap-highlight-color:transparent; touch-action:pan-x pan-y; }
#root .leaflet-control-container { -webkit-user-select:none; user-select:none; }
#root .leaflet-popup-content { max-width:calc(100vw - 72px); overflow-wrap:anywhere; }
#root [role="dialog"], #root div[style*="z-index: 1000002"], #root div[style*="z-index: 1000003"] { overscroll-behavior:contain; }
#root div[style*="z-index: 1000003"] > div { overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:calc(100dvh - 32px - var(--jnaf-safe-top) - var(--jnaf-safe-bottom)) !important; }

/* Responsive landscape/portrait GIS touch targets. */
@media (max-width: 900px) {
  #root button[title="منوی ابزارها و مدیریت لایه‌ها"], #root button[title="نوار ابزار ویرایش و ترسیم"] { min-width:44px !important; min-height:44px !important; width:44px !important; height:44px !important; border-radius:14px !important; }
  #root button[title="اعتبارسنجی بلوک"] { font-size:11px !important; min-height:42px !important; }
  #root .leaflet-bar a { width:42px !important; height:42px !important; line-height:42px !important; font-size:20px !important; }
  #root .leaflet-control-zoom, #root .leaflet-control-layers, #root .leaflet-control-scale { border-radius:12px !important; }
  #root #jnaf-tools-layers-drawer-stage13 { -webkit-overflow-scrolling:touch; }
  #root #jnaf-tools-layers-drawer-stage13 > div:last-child { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
}
@media (min-width:701px) and (max-width:1100px) {
  /* Keep the centered editor palette clear of the manager shortcut and right-side map toggles. */
  #root div[style*="z-index: 10003"][style*="width: 100%"] {
    top:calc(10px + var(--jnaf-safe-top)) !important; left:220px !important; right:124px !important;
    width:auto !important; max-width:calc(100vw - 344px) !important; max-height:min(32dvh,235px) !important;
  }
}
@media (max-width: 700px) {
  /* Browser viewport shrinks when its own bars are present; installed PWA uses fullscreen/standalone. */
  #root > div[style*="width: 100vw"] { inset:0 !important; }
  body > a[aria-label="ورود به داشبورد مدیر و گزارش آماری پلیگون‌ها"] { max-width:min(190px,calc(100vw - 126px)) !important; min-height:40px !important; top:calc(8px + var(--jnaf-safe-top)) !important; left:calc(8px + var(--jnaf-safe-left)) !important; padding:7px 9px !important; font-size:10px !important; }
  #root button[title="منوی ابزارها و مدیریت لایه‌ها"] { top:calc(8px + var(--jnaf-safe-top)) !important; right:calc(8px + var(--jnaf-safe-right)) !important; }
  #root button[title="نوار ابزار ویرایش و ترسیم"] { top:calc(8px + var(--jnaf-safe-top)) !important; right:calc(60px + var(--jnaf-safe-right)) !important; }
  /* Keep the command palette compact and scrollable instead of letting buttons overlap. */
  #root #jnaf-editing-toolbar-stage13, #root div[style*="z-index: 10003"][style*="width: 100%"] {
    top:calc(60px + var(--jnaf-safe-top)) !important; left:calc(7px + var(--jnaf-safe-left)) !important; right:calc(7px + var(--jnaf-safe-right)) !important;
    bottom:auto !important; width:auto !important; max-width:none !important; max-height:min(34dvh,300px) !important;
    overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain !important;
    padding:6px !important; border-radius:15px !important;
  }
  #root #jnaf-editing-toolbar-stage13 > div, #root div[style*="z-index: 10003"][style*="width: 100%"] > div {
    display:flex !important; flex-wrap:wrap !important; gap:6px !important; align-items:stretch !important; padding:3px !important;
  }
  #root #jnaf-editing-toolbar-stage13 button, #root div[style*="z-index: 10003"][style*="width: 100%"] button {
    min-width:40px !important; min-height:40px !important; padding:7px 9px !important; font-size:11px !important; line-height:1.35 !important;
    flex:0 0 auto !important; max-width:100% !important; white-space:normal !important; overflow-wrap:anywhere !important;
  }
  #root #jnaf-editor-split-toolbar-button-stage13 { min-height:40px !important; width:auto !important; min-width:44px !important; padding:7px 10px !important; }
  #root #jnaf-editor-split-toolbar-button-stage13 .jnaf-split-label-stage13 { display:inline !important; }
  #root #jnaf-tools-layers-drawer-stage13 { 
    top:calc(60px + var(--jnaf-safe-top)) !important; right:calc(6px + var(--jnaf-safe-right)) !important; left:calc(6px + var(--jnaf-safe-left)) !important;
    width:auto !important; max-width:none !important; height:calc(100dvh - 72px - var(--jnaf-safe-top) - var(--jnaf-safe-bottom)) !important;
    max-height:none !important; bottom:calc(6px + var(--jnaf-safe-bottom)) !important; border-radius:17px !important;
  }
  #root #jnaf-tools-layers-drawer-stage13[data-stage13-open="true"] { width:auto !important; }
  #root #jnaf-tools-layers-drawer-stage13 > div:first-child { min-height:76px !important; padding:12px 56px 10px 10px !important; }
  #root #jnaf-tools-layers-drawer-stage13 > div:first-child h2 { font-size:19px !important; }
  #root button#jnaf-layers-drawer-collapse-stage13 { width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important; top:10px !important; left:10px !important; }
  #root div[style*="bottom: 90px"][style*="flex-direction: column"][style*="z-index: 10001"] { bottom:calc(10px + var(--jnaf-safe-bottom)) !important; left:calc(8px + var(--jnaf-safe-left)) !important; gap:6px !important; padding:5px !important; }
  #root button[title="نقشه پایه"], #root button[title="نمایش موقعیت من"] { width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; }
  #root button[title="اعتبارسنجی بلوک"] { bottom:calc(10px + var(--jnaf-safe-bottom)) !important; left:calc(68px + var(--jnaf-safe-left)) !important; right:auto !important; max-width:calc(100vw - 132px) !important; height:42px !important; }
  #root div[style*="z-index: 1000003"] { padding:calc(8px + var(--jnaf-safe-top)) 8px calc(8px + var(--jnaf-safe-bottom)) !important; }
  #root div[style*="z-index: 1000003"] > div, #root div[style*="max-height: 80vh"][style*="box-shadow"] { width:100% !important; max-width:none !important; max-height:calc(100dvh - 24px - var(--jnaf-safe-top) - var(--jnaf-safe-bottom)) !important; padding:14px !important; border-radius:18px !important; }
  #root input:not([type="checkbox"]):not([type="radio"]), #root select, #root textarea { padding:11px 12px !important; min-height:44px !important; }
  #root .leaflet-control-attribution { max-width:64vw; font-size:9px !important; }
}
@media (max-width:380px) {
  body > a[aria-label="ورود به داشبورد مدیر و گزارش آماری پلیگون‌ها"] { max-width:calc(100vw - 124px) !important; font-size:9px !important; }
  #root #jnaf-editor-split-toolbar-button-stage13 .jnaf-split-label-stage13 { display:none !important; }
  #root #jnaf-editor-split-toolbar-button-stage13 { width:42px !important; min-width:42px !important; padding:7px !important; }
  #root #jnaf-editing-toolbar-stage13 button, #root div[style*="z-index: 10003"][style*="width: 100%"] button { min-width:38px !important; min-height:40px !important; padding:6px !important; }
  #root #jnaf-tools-layers-drawer-stage13 > div:first-child h2 { font-size:17px !important; }
}
@media (max-height:520px) and (orientation:landscape) {
  #root #jnaf-editing-toolbar-stage13, #root div[style*="z-index: 10003"][style*="width: 100%"] { max-height:30dvh !important; }
  #root #jnaf-tools-layers-drawer-stage13 { height:calc(100dvh - 68px - var(--jnaf-safe-top) - var(--jnaf-safe-bottom)) !important; }
  #root button[title="اعتبارسنجی بلوک"] { bottom:calc(7px + var(--jnaf-safe-bottom)) !important; }
}

/* If both drawers are open on a phone, the layer drawer is measured and placed below the toolbar by stage14 JS. */
@media (max-width:700px) {
  #root #jnaf-tools-layers-drawer-stage13[data-stage14-toolbar-open="true"] { top:var(--jnaf-stage14-drawer-top, calc(60px + var(--jnaf-safe-top))) !important; height:var(--jnaf-stage14-drawer-height, calc(100dvh - 72px)) !important; }
}
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse) {
  #root #jnaf-tools-layers-drawer-stage13[data-stage14-toolbar-open="true"] { top:var(--jnaf-stage14-drawer-top, calc(60px + var(--jnaf-safe-top))) !important; height:var(--jnaf-stage14-drawer-height, calc(100dvh - 72px)) !important; }
}
@media (max-width:1100px) and (pointer:coarse) {
  #root #jnaf-tools-layers-drawer-stage13[data-stage14-toolbar-open="true"] { top:var(--jnaf-stage14-drawer-top, calc(60px + var(--jnaf-safe-top))) !important; height:var(--jnaf-stage14-drawer-height, calc(100dvh - 72px)) !important; }
}

/* Admin dashboard: large touch targets, visible responsive layout, horizontally scrollable data grids. */
body.admin-page { width:100%; min-height:100dvh; height:auto; overflow-x:hidden; overflow-y:auto; padding-bottom:var(--jnaf-safe-bottom); }
body.admin-page #jnaf-pwa-install-button { display:none !important; }
body.admin-page .top { padding-top:calc(18px + var(--jnaf-safe-top)); padding-right:max(12px,calc((100vw - 1440px)/2)); padding-bottom:18px; padding-left:max(12px,calc((100vw - 1440px)/2)); }
body.admin-page .wrap { width:100%; max-width:1440px; }
body.admin-page .tablewrap { max-width:100%; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:thin; }
body.admin-page .tablewrap table { width:max-content; min-width:850px; }
body.admin-page .btn, body.admin-page .top a { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:7px; touch-action:manipulation; }
body.admin-page input, body.admin-page select { min-height:44px; font-size:16px; }
body.admin-page .actions { align-items:center; flex-wrap:wrap; }
body.admin-page .toast { bottom:calc(12px + var(--jnaf-safe-bottom)); left:calc(10px + var(--jnaf-safe-left)); right:calc(10px + var(--jnaf-safe-right)); max-width:none; }
@media(max-width:900px) {
  body.admin-page .wrap { margin:12px auto; }
  body.admin-page .top { align-items:flex-start; }
  body.admin-page .top > div { min-width:0; flex:1 1 100%; }
  body.admin-page .top a { width:100%; }
  body.admin-page .panel { overflow:hidden; }
  body.admin-page .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.admin-page .formgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.admin-page .filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
  body.admin-page .filters .field { min-width:0; }
  body.admin-page .filters > button { width:100%; grid-column:1/-1; }
}
@media(max-width:560px) {
  body.admin-page .top { padding-right:calc(12px + var(--jnaf-safe-right)); padding-left:calc(12px + var(--jnaf-safe-left)); gap:10px; }
  body.admin-page .top h1 { font-size:17px; line-height:1.65; }
  body.admin-page .sub { line-height:1.8; }
  body.admin-page .wrap { padding-right:calc(9px + var(--jnaf-safe-right)); padding-left:calc(9px + var(--jnaf-safe-left)); padding-bottom:calc(24px + var(--jnaf-safe-bottom)); }
  body.admin-page .grid { gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.admin-page .metric { min-width:0; padding:12px; overflow-wrap:anywhere; }
  body.admin-page .metric .value { font-size:20px; overflow-wrap:anywhere; }
  body.admin-page .metric .label { line-height:1.6; }
  body.admin-page .panel { margin-bottom:10px; padding:12px; border-radius:14px; }
  body.admin-page .panel h2 { font-size:16px; line-height:1.7; }
  body.admin-page .formgrid { grid-template-columns:minmax(0,1fr); }
  body.admin-page .form-actions { align-items:stretch; }
  body.admin-page .form-actions .btn, body.admin-page form .btn { width:100%; }
  body.admin-page .filters { grid-template-columns:minmax(0,1fr); }
  body.admin-page .filters > button { grid-column:auto; }
  body.admin-page .tablewrap { border-radius:9px; max-width:calc(100vw - 43px); }
  body.admin-page .tablewrap table { min-width:820px; }
  body.admin-page .tablewrap::after { content:"برای دیدن ستون‌های دیگر، جدول را افقی بکشید ←"; display:block; position:sticky; right:0; padding:7px 10px; font-size:11px; color:#64748b; background:#f8fafc; border-top:1px solid #e2e8f0; }
  body.admin-page .details .tablewrap { max-width:calc(100vw - 68px); }
  body.admin-page .details .tablewrap table { min-width:650px; }
  body.admin-page .actions { min-width:170px; }
  body.admin-page .btn.small { min-height:40px; padding:8px 10px; font-size:12px; }
  body.admin-page .notice, body.admin-page .panel p.help { font-size:12px; line-height:1.95; }
}
@media(prefers-reduced-motion:reduce) { #root *, body.admin-page *, #jnaf-pwa-install-button { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }

/* install prompt is shown only on devices/browser contexts eligible for installation */
#jnaf-pwa-install-button { position:fixed; display:none; z-index:2147483001; top:auto; left:auto; right:calc(10px + var(--jnaf-safe-right)); bottom:calc(34px + var(--jnaf-safe-bottom)); max-width:min(180px,calc(100vw - 24px)); min-height:40px; padding:8px 12px; gap:7px; align-items:center; justify-content:center; border:1px solid #9bd8d0; border-radius:13px; background:linear-gradient(135deg,#e2fbf5,#cbf5ed); color:#075e59; box-shadow:0 8px 22px #0f766e20; font:800 11px/1.4 Tahoma,Arial,sans-serif; touch-action:manipulation; }
#jnaf-pwa-install-button[hidden] { display:none !important; }
#jnaf-pwa-install-button:not([hidden]) { display:inline-flex !important; }
#jnaf-pwa-install-button svg { width:17px; height:17px; flex:0 0 17px; }
#jnaf-pwa-install-button:focus-visible { outline:3px solid #60a5fa; outline-offset:3px; }
@media(max-width:700px) { #jnaf-pwa-install-button { right:calc(10px + var(--jnaf-safe-right)); bottom:calc(36px + var(--jnaf-safe-bottom)); } }