/* GUP Split · online atlas, phone / tablet layout. Loaded AFTER viewer-claude.css.
   mobile.js puts .atlas-mobile on <html> and <body> while matchMedia('(max-width: 980px)') matches; every rule here is scoped
   to that class, so the desktop layout above 980 px is untouched. Map-first: compact header with the request link,
   PDF / Katastar / ISPU row with a collapsible KČ search, and Slojevi / Postavke / Izvoz bottom sheets. */
body:not(.atlas-mobile) .atlas-m-only{display:none!important}

html.atlas-mobile{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.atlas-mobile{--m-nav:56px;--m-tap:44px;--m-safe-b:env(safe-area-inset-bottom,0px);--m-nav-total:calc(var(--m-nav) + var(--m-safe-b));height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent}

/* Compact header: brand + request link (save / load move to Postavke → Projekt) */
body.atlas-mobile .topbar{flex:none;height:48px;flex-wrap:nowrap;gap:8px;padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));position:relative;z-index:5}
body.atlas-mobile .brand{gap:8px;font-size:15px;min-width:0;min-height:var(--m-tap)}
body.atlas-mobile .brand-mark{width:30px;height:30px;font-size:18px;flex:none}
body.atlas-mobile .brand-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.atlas-mobile .brand-text small,body.atlas-mobile .proposal-tag,body.atlas-mobile .top-sep{display:none}
body.atlas-mobile .top-actions{width:auto;margin:0 0 0 auto;flex:none;flex-wrap:nowrap}
body.atlas-mobile #portal-request{display:inline-flex;align-items:center;min-height:var(--m-tap);padding:0 12px;font-size:13px;font-weight:600;color:var(--accent);background:var(--white);border-color:var(--line2)}
@media(max-width:379px){body.atlas-mobile .brand-text{display:none}}

/* Map fills everything between header and bottom bar */
body.atlas-mobile .layout{display:block;flex:1 1 auto;height:auto;min-height:0;position:relative}
body.atlas-mobile .map-column{height:100%;min-height:0;position:relative}
body.atlas-mobile .map-foot{display:none}

/* One compact row: view tabs · KČ toggle · approximate-map warning */
body.atlas-mobile .viewbar{flex:none;flex-wrap:nowrap;gap:6px;padding:4px max(6px,env(safe-area-inset-right)) 4px max(6px,env(safe-area-inset-left));align-items:center}
body.atlas-mobile .view-switch{flex:1 1 auto;display:flex;min-width:0}
body.atlas-mobile .view-tabs{flex:1 1 auto;min-width:0;padding:2px;gap:2px}
body.atlas-mobile .view-tab{flex:1 1 0;justify-content:center;min-width:0;min-height:var(--m-tap);padding:0 4px;font-size:12px;gap:5px}
@media(max-width:420px){body.atlas-mobile .view-tab .vt-dot{display:none}}
body.atlas-mobile .atlas-parcel-toggle{flex:0 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:var(--m-tap);max-width:124px;min-height:var(--m-tap);padding:0 8px;font-size:12px;font-weight:650}
body.atlas-mobile .atlas-parcel-label{overflow:hidden;text-overflow:ellipsis}
body.atlas-mobile .atlas-parcel-chevron{flex:none;font-size:14px;line-height:1;transition:transform .15s}
body.atlas-mobile .atlas-parcel-toggle[aria-expanded=true]{background:var(--accent-l);color:var(--accent);border-color:var(--accent)}
body.atlas-mobile .atlas-parcel-toggle[aria-expanded=true] .atlas-parcel-chevron{transform:rotate(180deg)}
body.atlas-mobile .atlas-parcel-toggle.picking{background:var(--cad);border-color:var(--cad);color:#fff}
body.atlas-mobile .atlas-parcel-toggle[data-kind=error]{border-color:var(--err);box-shadow:inset 0 -3px 0 var(--err)}
body.atlas-mobile .atlas-parcel-toggle[data-kind=busy]{box-shadow:inset 0 -3px 0 var(--pdf)}
body.atlas-mobile .trust{margin-left:0;flex:none}
body.atlas-mobile .trust>summary{min-height:var(--m-tap);display:flex;align-items:center;padding:0 10px;font-size:12px}
body.atlas-mobile .trust-pop{width:min(330px,calc(100vw - 16px));max-height:min(60dvh,420px);overflow:auto;font-size:14px}
body.atlas-mobile .trust-pop p:last-child{font-size:13px}
@media(max-width:520px){
  /* Narrow phones: the pill shrinks to "≈"; the full wording stays the accessible name and opens on tap. */
  body.atlas-mobile .trust>summary{width:var(--m-tap);padding:0;justify-content:center;font-size:0;border-radius:10px}
  body.atlas-mobile .trust>summary:before{content:'≈';content:'≈' / '';font-size:20px;line-height:1}
}

/* KČ search: drops over the top of the map only when opened, so the map is not resized */
body.atlas-mobile .parcelbar{position:absolute;left:0;right:0;top:var(--atlas-viewbar-h,57px);z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:center;padding:8px max(8px,env(safe-area-inset-right)) 10px max(8px,env(safe-area-inset-left));box-shadow:0 8px 18px #1e2b291f}
body.atlas-mobile .parcelbar .kc-ko,body.atlas-mobile .parcelbar .kc-info{grid-column:1/-1}
body.atlas-mobile .kc-ko strong{font-size:13px}
body.atlas-mobile .kc-ko input{width:96px}
body.atlas-mobile .kc-search{min-width:0}
body.atlas-mobile .kc-combo{flex:1 1 auto;min-width:0}
body.atlas-mobile .kc-combo input{width:100%}
body.atlas-mobile .kc-search .primary.small{min-height:var(--m-tap);padding:0 14px;font-size:14px}
body.atlas-mobile .kc-pick{min-height:var(--m-tap);min-width:var(--m-tap);justify-content:center;padding:0 12px;font-size:13px}
body.atlas-mobile .kc-pick svg{width:20px;height:20px}
@media(max-width:520px){body.atlas-mobile .kc-pick{font-size:0;gap:0;padding:0}} /* icon only; the text stays the accessible name */
body.atlas-mobile .kc-selection{font-size:13px;white-space:normal}
body.atlas-mobile .kc-status{font-size:13px}
body.atlas-mobile .kc-status:empty{display:none}
body.atlas-mobile .kc-suggest-box{left:0;right:0;min-width:0;max-height:max(120px,min(300px,calc(var(--atlas-vvh,100dvh) - 240px)))}
body.atlas-mobile .kc-suggest-box li{min-height:var(--m-tap);align-items:center;font-size:15px}
body.atlas-mobile .kc-suggest-note{font-size:13px}

/* Map */
body.atlas-mobile .stage{min-height:0;z-index:1;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Clean map: two toolbars along the top edge (tools left; zoom and whole sheet right); no layer label, no scale. */
body.atlas-mobile .tool-rail{left:max(8px,env(safe-area-inset-left));top:8px;padding:3px;gap:0;flex-direction:row;flex-wrap:wrap;max-width:calc(100% - 76px)}
body.atlas-mobile .tool-rail button{width:var(--m-tap);height:var(--m-tap);min-height:0}
body.atlas-mobile .tool-rail svg{width:22px;height:22px}
body.atlas-mobile .rail-sep{width:1px;height:auto;margin:4px 2px}
body.atlas-mobile .map-hud{display:none}
/* Overlay chips leave the map: Slojevi → Preklopi holds them (with the opacity), so Opcije → Katastar is not repeated. */
body.atlas-mobile .view-overlays,body.atlas-mobile #cd-overlay-options{display:none!important}
body.atlas-mobile .overlay-list{display:block;padding:4px 8px 0}
body.atlas-mobile .group-label{font-size:11px}
body.atlas-mobile .row-opacity{font-size:12px}
body.atlas-mobile .overlay-note{font-size:13px}
/* "Odaberi na karti" (moved onto the map by mobile.js): bottom left, in thumb reach, in the cadastre colour. */
body.atlas-mobile .stage>.kc-pick{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:8px;z-index:4;min-height:48px;gap:8px;padding:0 16px;border:0;border-radius:24px;background:var(--cad);color:#fff;font-size:14px;font-weight:700;box-shadow:0 3px 12px #6f3f1466}
body.atlas-mobile .stage>.kc-pick svg{width:20px;height:20px}
body.atlas-mobile .stage>.kc-pick.active{background:#6f3f14;box-shadow:0 0 0 4px #e9c9a3,0 3px 12px #6f3f1466;animation:atlas-pick 1.6s ease-in-out infinite}
@keyframes atlas-pick{50%{box-shadow:0 0 0 7px #e9c9a399,0 3px 12px #6f3f1466}}
@media(prefers-reduced-motion:reduce){body.atlas-mobile .stage>.kc-pick.active{animation:none}}
@media(max-width:379px){body.atlas-mobile .stage>.kc-pick{padding:0 12px;font-size:13px;gap:6px}}
/* Only "Cijeli list" sits level with the tools (zoom is a two-finger pinch), styled like the tool rail. It shows an
   icon; its text stays the accessible name. */
/* "Zatraži informaciju" (moved onto the map by mobile.js): bottom right, opposite Odaberi na karti. */
body.atlas-mobile .stage>.request-info{position:absolute;right:max(8px,env(safe-area-inset-right));bottom:8px;z-index:4;min-height:48px;gap:8px;padding:0 16px;border:0;border-radius:24px;font-size:14px;font-weight:700;box-shadow:0 3px 12px #1e2b2955}
body.atlas-mobile .stage>.request-info svg{width:19px;height:19px}
@media(max-width:379px){body.atlas-mobile .stage>.request-info{padding:0 12px;font-size:13px;gap:6px}}
body.atlas-mobile .request-dialog .packages b{font-size:14px}body.atlas-mobile .request-dialog .packages label{min-height:64px}
body.atlas-mobile .request-dialog .row.two>button{min-height:var(--m-tap);font-size:15px}
body.atlas-mobile .zoom-dock{top:8px;bottom:auto;right:max(8px,env(safe-area-inset-right));padding:3px;gap:3px;border-radius:9px}
body.atlas-mobile #zoom-in,body.atlas-mobile #zoom-out{display:none}
body.atlas-mobile .zoom-dock button{width:var(--m-tap);height:var(--m-tap);min-width:0;min-height:0;padding:0;border-radius:6px;font-size:20px;display:grid;place-items:center}
body.atlas-mobile .zoom-dock button+button{border-left:0}
body.atlas-mobile .zoom-dock button:hover{background:#efede6}
body.atlas-mobile .zoom-dock #fit{font-size:0}
body.atlas-mobile .zoom-dock #fit:before{content:'';width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center/contain no-repeat}
/* Status line only for errors; routine progress shows as the thin loading bar on top of the map. */
body.atlas-mobile .status{left:8px;bottom:calc(var(--m-tap) + 22px);max-width:calc(100% - 16px);font-size:12px}
body.atlas-mobile .status:not(.error){display:none}
body.atlas-mobile .measure-panel{left:8px}
body.atlas-mobile .empty p{font-size:14px}

/* Bottom bar */
body.atlas-mobile .atlas-bottom-nav{flex:none;display:flex;height:var(--m-nav-total);padding:0 env(safe-area-inset-right) var(--m-safe-b) env(safe-area-inset-left);background:var(--white);border-top:1px solid var(--line2);position:relative;z-index:40}
body.atlas-mobile .atlas-bottom-nav button{flex:1 1 0;min-height:var(--m-nav);border:0;border-radius:0;background:transparent;font-size:13px;font-weight:650;color:var(--muted);white-space:normal;line-height:1.2;padding:4px 6px}
body.atlas-mobile .atlas-bottom-nav button[aria-expanded=true]{color:var(--accent);background:var(--accent-l);box-shadow:inset 0 3px 0 var(--accent)}
body.atlas-mobile .atlas-nav-count{font-weight:500}
body.atlas-mobile .atlas-scrim{position:fixed;left:0;right:0;top:0;bottom:var(--m-nav-total);background:#1e2b2933;z-index:25}

/* Bottom sheets: layer list (.sidebar), settings and export (.inspector). They sit above the on-screen keyboard (--atlas-kb). */
body.atlas-mobile .sidebar,body.atlas-mobile .inspector{position:fixed;left:0;right:0;top:auto;bottom:max(var(--m-nav-total),var(--atlas-kb,0px));width:auto;height:auto;min-height:0;max-height:min(76dvh,680px,calc(var(--atlas-vvh,100dvh) - 8px - max(0px,var(--m-nav-total) - var(--atlas-kb,0px))));display:none;flex-direction:column;background:var(--paper);border:0;border-top:1px solid var(--line2);border-radius:16px 16px 0 0;box-shadow:0 -10px 30px #1e2b2938;z-index:30;outline:none;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
body.atlas-mobile[data-sheet=layers] .sidebar,body.atlas-mobile[data-sheet=settings] .inspector,body.atlas-mobile[data-sheet=export] .inspector{display:flex;animation:atlas-sheet-in .18s ease-out}
@keyframes atlas-sheet-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){body.atlas-mobile .sidebar,body.atlas-mobile .inspector{animation:none!important}}
body.atlas-mobile[data-sheet=settings] .export-dock{display:none}
body.atlas-mobile[data-sheet=export] .inspector-scroll{display:none}
body.atlas-mobile[data-sheet=export] .export-dock>h2{display:none} /* the sheet title already says it */
body.atlas-mobile .inspector-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 12px 16px}
body.atlas-mobile .export-dock{flex:1 1 auto;max-height:none;min-height:0;overflow:auto;overscroll-behavior:contain;background:var(--paper);border-top:0;box-shadow:none;padding:4px 14px 16px}
body.atlas-mobile .side-head{padding:2px 12px 8px}
body.atlas-mobile .side-filters{padding:0 12px 10px}
body.atlas-mobile .layer-list{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 8px}
body.atlas-mobile .atlas-sheet-bar{flex:none;display:flex;align-items:center;gap:8px;min-height:calc(var(--m-tap) + 10px);padding:10px 6px 0 14px;position:relative}
body.atlas-mobile .atlas-sheet-grip{position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line2)}
body.atlas-mobile .atlas-sheet-title{margin:0;font-size:15px;font-weight:650;color:var(--ink);letter-spacing:0}
body.atlas-mobile .atlas-sheet-close{margin-left:auto;min-height:var(--m-tap);padding:0 14px;border:0;background:transparent;color:var(--accent);font-size:15px;font-weight:600}
@media(min-width:700px){body.atlas-mobile .sidebar,body.atlas-mobile .inspector{left:auto;right:12px;width:440px;border-radius:14px 14px 0 0;border:1px solid var(--line2);border-bottom:0}}

/* Postavke → Projekt (save / load moved here from the header) */
body.atlas-mobile .atlas-project .panel-body{padding:12px 13px}
body.atlas-mobile .atlas-project h3{font-size:14px}
body.atlas-mobile .atlas-project-actions>*{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;white-space:normal;text-align:center;background:var(--white);border-color:var(--line2)}

/* Touch targets and readable type; 16 px fields keep iOS from zooming on focus */
body.atlas-mobile button,body.atlas-mobile .button{min-height:var(--m-tap);font-size:15px}
body.atlas-mobile label.button{display:inline-flex;align-items:center;justify-content:center}
body.atlas-mobile input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]),body.atlas-mobile select,body.atlas-mobile textarea{min-height:var(--m-tap);font-size:16px}
body.atlas-mobile .small{font-size:14px;padding:0 12px}
body.atlas-mobile input[type=checkbox]{width:24px;height:24px;min-height:0}
body.atlas-mobile input[type=range]{min-height:var(--m-tap)}
body.atlas-mobile .check{min-height:var(--m-tap);font-size:15px;gap:10px}
body.atlas-mobile .hint,body.atlas-mobile .alignment-status,body.atlas-mobile .crop-line{font-size:13px}
body.atlas-mobile .field-label,body.atlas-mobile .transform-grid label,body.atlas-mobile .slider-label,body.atlas-mobile .page-row label.inline,body.atlas-mobile #page-total{font-size:13px}
body.atlas-mobile .panel>summary{min-height:var(--m-tap);font-size:15px}
body.atlas-mobile .disclosure>summary{min-height:var(--m-tap);font-size:14px;align-items:center}
body.atlas-mobile .side-head h1{font-size:15px}
body.atlas-mobile .layer-tools{flex-wrap:wrap}
body.atlas-mobile .layer-row{grid-template-columns:28px minmax(0,1fr) auto;gap:8px;padding:8px 4px 8px 8px}
body.atlas-mobile .layer-name{min-height:var(--m-tap);font-size:14px}
body.atlas-mobile .layer-meta{font-size:12px}
body.atlas-mobile .badge{font-size:11px}
body.atlas-mobile .order-buttons{opacity:1;flex-direction:row}
body.atlas-mobile .order-buttons button{width:40px;font-size:14px}
body.atlas-mobile .sidebar-foot{font-size:12px}
body.atlas-mobile .list-note{font-size:13px}
body.atlas-mobile .row{flex-wrap:wrap}
body.atlas-mobile .page-row input{width:76px}
body.atlas-mobile .links a,body.atlas-mobile .cadastre-source,body.atlas-mobile .link-button{min-height:40px;display:inline-flex;align-items:center;font-size:13px}
body.atlas-mobile .export-dock .wide{min-height:48px}

/* Landscape phones: less chrome, tools in a row */
@media(orientation:landscape) and (max-height:520px){
  body.atlas-mobile{--m-nav:48px}
  body.atlas-mobile .topbar{height:46px}
  body.atlas-mobile .viewbar{padding-top:1px;padding-bottom:1px}
  body.atlas-mobile .measure-panel{left:auto}
  body.atlas-mobile .sidebar,body.atlas-mobile .inspector{max-height:min(92dvh,calc(var(--atlas-vvh,100dvh) - 8px - max(0px,var(--m-nav-total) - var(--atlas-kb,0px))))}
}

@media print{body.atlas-mobile .atlas-m-only{display:none!important}html.atlas-mobile,body.atlas-mobile{height:auto;overflow:visible}}
/* Phone: the logo letter and the city switch; the name is the switch. */
body.atlas-mobile .topbar:has(.city-switch) .brand-text{display:none}
/* Vlasništvo detail container: a bottom sheet over the map on phones and in the app (owners.js). */
body.atlas-mobile .owner-detail{position:fixed;left:0;right:0;top:auto;bottom:var(--m-nav-total);width:auto;max-height:min(72dvh,620px);border-radius:16px 16px 0 0;border:0;border-top:1px solid var(--line2);box-shadow:0 -10px 30px #1e2b2938;z-index:31;padding:0 calc(14px + env(safe-area-inset-right)) 14px calc(14px + env(safe-area-inset-left));font-size:14px}
body.atlas-mobile .owner-detail header button{min-height:var(--m-tap);min-width:var(--m-tap)}
body.atlas-mobile .owner-open{min-height:var(--m-tap)}
@media(min-width:700px){body.atlas-mobile .owner-detail{left:auto;right:12px;width:440px;border-radius:14px 14px 0 0;border:1px solid var(--line2);border-bottom:0}}
body.atlas-mobile .kc-owners{font-size:13px;padding:6px 0}body.atlas-mobile .kc-line{flex-wrap:wrap}
body.atlas-mobile .owner-detail{resize:none;min-width:0}
body.atlas-mobile .owner-detail header{cursor:ns-resize;padding-top:16px}
body.atlas-mobile .owner-detail header:before{content:'';position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line2)}
body.atlas-mobile .stage>.map-request{display:none}
body.atlas-mobile .parcelbar>.bar-request{display:none}
body.atlas-mobile .ar-choice{grid-template-columns:1fr}body.atlas-mobile .ar-panel .field-label>input,body.atlas-mobile #login-dialog input:not([type=checkbox]){font-size:16px;min-height:var(--m-tap)}
