/* Shared phone layout. Every rule is screen-only; desktop and printed documents retain their layout. */
@media screen and (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }
  body, #root { min-width: 0; }
  .ddd-app { width: 100%; min-width: 0; height: var(--ddd-mobile-height, 100dvh); min-height: 0; }
  .ddd-main { min-width: 0; width: 100%; max-width: 100%; min-height: 0; height: 100%; max-height: 100%; }
  .ddd-header { flex: 0 0 auto; padding: 8px 10px; z-index: 20; }
  .ddd-headerBar { min-width: 0; min-height: 44px; gap: 8px; }
  .ddd-headerLeft { flex: 1 1 0; min-width: 0; gap: 8px; }
  .ddd-headerTitleStack { min-width: 0; gap: 3px; }
  .ddd-title { max-width: 100%; font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
  .ddd-headerRoleBadge { font-size: 9px; padding: 3px 6px; line-height: 1; }
  .ddd-headerRight { flex: 0 0 auto; gap: 4px; }
  .ddd-iconbtn, .ddd-sidebarToggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px; padding: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
  .ddd-header .ddd-iconbtn > svg, .ddd-sidebarToggle > svg { flex: 0 0 20px; width: 20px; height: 20px; }
  .ddd-headerCenter { display: none; }
  .ddd-headerCenter.is-mobileOpen { display: block; order: 3; flex: 1 0 100%; min-width: 0; width: 100%; }
  .ddd-headerBar:has(.ddd-headerCenter.is-mobileOpen) { flex-wrap: wrap; }
  .ddd-mobileSearchToggle, .ddd-mobileMenuWrap { display: inline-flex; }
  .ddd-languageControl, .ddd-desktopLogout { display: none !important; }
  .ddd-mobileMenuPanel { position: fixed; top: 62px; right: 10px; max-width: calc(100vw - 20px); z-index: 110; }
  .ddd-mobileMenuAction { min-height: 44px; }
  .ddd-search { min-height: 44px; padding-block: 0; }
  .ddd-searchInput { min-width: 0; min-height: 44px; font-size: 16px; }
  .ddd-searchClear { width: 44px; height: 44px; }
  .ddd-searchResults { position: fixed; left: 10px; right: 10px; top: 112px; width: auto; max-height: calc(var(--ddd-mobile-height, 100dvh) - 124px); overflow: auto; }
  .ddd-searchResult { min-height: 52px; padding: 12px; white-space: normal; overflow-wrap: anywhere; }
  .ddd-searchResultTop { flex-wrap: wrap; }
  .ddd-sidebar { min-width: 0; width: min(320px, calc(100vw - 44px)); max-width: calc(100vw - 44px); height: var(--ddd-mobile-height, 100dvh); overscroll-behavior: contain; }
  .ddd-sidebar .ddd-navItem { min-height: 46px; padding-block: 0; }
  .ddd-sidebar .ddd-navLink, .ddd-sidebar .ddd-navSubItem { min-height: 44px; }
  .ddd-sidebar .ddd-navStar { width: 44px; height: 44px; flex: 0 0 44px; }
  .ddd-sidebar .ddd-navItem svg { flex-shrink: 0; }
  .ddd-desktopTabs:has(.ddd-desktopTabsTrack > .ddd-desktopTab:only-child) { display: none; }
  .ddd-desktopTabs { min-width: 0; flex-shrink: 0; padding: 4px 10px; }
  .ddd-desktopTabsTrack { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .ddd-desktopTabMain, .ddd-desktopTabClose, .ddd-desktopTabAdd { min-height: 40px; }
  .ddd-desktopTab { height: 44px; min-height: 44px; }
  .ddd-desktopTabClose { width: 44px; min-width: 44px; }
  .ddd-footer { display: none; }
  .ddd-content { min-width: 0; min-height: 0; padding: 10px 10px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .ddd-pageViewport, .ddd-pageShell, .ddd-pageContent, .ddd-panel { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .ddd-pageViewport { padding-bottom: 68px; }
  html[data-ddd-page="messenger"] .ddd-pageViewport { padding-bottom: 0; }
  .ddd-pageShell { gap: 12px; }
  .ddd-pageHead { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .ddd-pageHead > * { min-width: 0; max-width: 100%; }
  .ddd-pageTitle { font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; }
  .ddd-pageSubtitle { font-size: 13px; line-height: 1.45; }
  .ddd-pageIntro h1, .ddd-pageIntro h2, .ddd-pageShell h1, .ddd-pageShell h2 { font-size: 22px; line-height: 1.2; }
  .ddd-pageIntro p { font-size: 13px; line-height: 1.45; }
  html[data-ddd-page="planer"] .ddd-pagePanel > .ddd-pageIntro > .ddd-pageIntroAside { display: none; }
  .ddd-pageShell > .ddd-panel > .ddd-panelHead { padding: 0 0 10px; }
  .ddd-pageActions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .ddd-pageActions > .ddd-btn { flex: 1 1 140px; }
  .ddd-pageContent { padding: 12px; }
  .ddd-panel { padding: 12px; }
  .ddd-pageViewport input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .ddd-pageViewport select, .ddd-pageViewport textarea,
  .ddd-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .ddd-modal select, .ddd-modal textarea {
    min-height: 44px; font-size: 16px; box-sizing: border-box; min-width: 0; max-width: 100%; scroll-margin-block: 80px;
  }
  .ddd-pageViewport textarea, .ddd-modal textarea { min-height: 96px; line-height: 1.5; }
  .ddd-pageViewport .ddd-btn, .ddd-modal .ddd-btn { min-height: 44px; max-width: 100%; white-space: normal; line-height: 1.3; padding: 9px 12px; }
  .ddd-pageViewport .ddd-btn > svg, .ddd-modal .ddd-btn > svg { flex-shrink: 0; }
  .ddd-pageViewport label, .ddd-modal label { overflow-wrap: anywhere; }
  .ddd-pageViewport input[type="checkbox"], .ddd-pageViewport input[type="radio"], .ddd-modal input[type="checkbox"], .ddd-modal input[type="radio"] { min-width: 20px; min-height: 20px; flex: 0 0 auto; accent-color: #0aa344; }
  .ddd-pageViewport img, .ddd-modal img { max-width: 100%; }
  .ddd-alert { min-width: 0; overflow-wrap: anywhere; }
  .ddd-tabs { min-width: 0; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; gap: 6px; padding-bottom: 5px; }
  .ddd-tabs > button { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
  [data-mobile-scroll="true"] { min-width: 0 !important; max-width: 100%; overflow-x: auto !important; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  table[data-mobile-table="true"] { display: block; min-width: 0 !important; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  [data-mobile-overflow="true"] { background-image: linear-gradient(to left, rgba(13,90,69,.11), transparent 16px); background-repeat: no-repeat; background-position: right top; }
  [data-mobile-scroll="true"]::before { display: block; position: sticky; left: 0; content: "Povuci lijevo / desno za sve kolone →"; color: #53677a; font-size: 12px; line-height: 1.4; padding: 6px 0 8px; white-space: normal; }
  [data-mobile-scroll="true"][data-mobile-overflow="false"]::before { display: none; }
  .ddd-tableWrap { min-width: 0; max-width: 100%; scrollbar-width: thin; }
  .ddd-backdrop { padding: 8px !important; align-items: center; }
  .ddd-modal:not(.ddd-modal--minimized) { padding: 8px; height: var(--ddd-mobile-height, 100dvh); box-sizing: border-box; }
  .ddd-modal:not(.ddd-modal--minimized) > .ddd-modalCard {
    width: 100% !important; min-width: 0 !important; max-width: calc(100vw - 16px) !important;
    max-height: calc(var(--ddd-mobile-height, 100dvh) - 16px) !important; margin: 0; box-sizing: border-box;
  }
  .ddd-modalHead, .ddd-modalFoot { flex: 0 0 auto; padding: 12px; gap: 8px; }
  .ddd-modalHead { align-items: flex-start; }
  .ddd-modalHead > :first-child { min-width: 0; overflow-wrap: anywhere; }
  .ddd-modalHead .ddd-iconbtn { flex-shrink: 0; }
  .ddd-modalBody { min-height: 0; min-width: 0; max-width: 100%; padding: 12px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 16px; }
  .ddd-modalFoot { flex-wrap: wrap; border-top: 1px solid #e2e8f0; background: #fff; }
  .ddd-modalFoot > .ddd-btn { flex: 1 1 110px; }
  body:has(.ddd-backdrop.is-open, [role="dialog"][aria-modal="true"]) .ddd-messengerFab { visibility: hidden; }
  .ddd-messengerFab { bottom: max(16px, env(safe-area-inset-bottom)); right: 14px; }
}
@media screen and (max-width: 359px) {
  .ddd-header { padding-inline: 6px; }
  .ddd-headerBar, .ddd-headerLeft { gap: 4px; }
  .ddd-headerRight { gap: 2px; }
  .ddd-title { font-size: 14px; }
  .ddd-content { padding-inline: 8px; }
}