is a sibling of , not of ). The label is clickable from anywhere in the viewport — the body class is what gives the visual feedback. */ .sidebar-toggle-input:checked ~ main::before{ content:"";position:fixed;inset:0;background:rgba(0,0,0,0.4); z-index:90;cursor:pointer; } /* Reset the desktop's fixed 220px content offset — on mobile the sidebar is overlay, not a column. */ main .shell{margin-left:0 !important} /* 2026-08-17: v1.3.19.2 (B120) — reset the breadcrumb's desktop margin-left:220px to 0 on mobile (the breadcrumb fills the viewport on mobile, the sidebar is a drawer). The .admin-breadcrumb rule below adds padding-left:60px to clear the 40px hamburger (B107) — both rules together give us: left=0 (no column), padding-left=60px (hamburger clearance), width=100% (full viewport). The base rule already has padding-left:40px, so 60px overrides it. */ main .admin-breadcrumb{margin-left:0 !important;width:100% !important} header{margin-left:0 !important} /* 2026-08-13: if the user previously toggled the sidebar to collapsed (e.g. on a tablet and then resized to mobile), the `collapsed` class persists in the DOM via JS classList.toggle (no auto-reset on resize). The mobile drawer pattern wants the sidebar at full 280px when open (drawer style) and off-screen via transform when closed. Force-clear the collapsed class on mobile so a stuck state doesn't make the sidebar 52px wide inside a 280px drawer. The `width:280px !important` above would still apply, but the spec is ambiguous and the !important is fragile. This explicit clear removes the ambiguity. */ .sidebar.collapsed{width:280px} /* Sections: always open on mobile (operator shouldn't have to tap 6 times to find a page). The caret is removed for visual cleanliness. */ .sidebar-section[open]>summary::before{transform:none} .sidebar-section>summary{cursor:default} /* 2026-08-12: v1.1.0 (TD-3) — touch-friendly tap targets. Apple's HIG / Material both recommend 44x44 px min for primary interactive elements. Sidebar nav links + buttons get 12px vertical padding (was 8px on desktop) so thumb taps are reliable on a phone. */ .sidebar nav a{padding:12px 14px;font-size:14px;min-height:44px} .sidebar .toggle{width:44px;height:44px} .sidebar .shead{padding:14px 16px} .sidebar-user .sidebar-actions button{padding:12px 14px;min-width:44px;min-height:44px} .sidebar nav a i{font-size:15px;width:20px} .theme-picker-sb summary{padding:10px 12px;min-height:44px} /* v0.33.1.7: header + main shell compaction (kept from the pre-v1.1.0 760px breakpoint; breakpoint renamed to 768px so it matches the iPad-portrait width). */ header .shell{flex-wrap:wrap;height:auto;padding:8px 14px;gap:8px;padding-left:60px} header h1{font-size:14px} header .user-area{flex-basis:100%;justify-content:space-between;padding-bottom:6px} main{padding:20px 0 48px} .shell{padding:0 14px} .card{padding:16px} .metric-grid{grid-template-columns:repeat(2,1fr);gap:8px} .title-row h2{font-size:18px} /* 2026-08-13: page title offset. The .sidebar-toggle hamburger is fixed at top:12px,left:12px and 40×40px — it sits on top of the page title (h2 in .title-row) on narrow viewports because the .title-row also starts at 12px from the left edge. The pre-fix CSS had a comment claiming "16px left padding so the hamburger doesn't overlap" but never actually applied it. The fix: add padding-left:60px to .title-row on mobile (matching the header .shell's existing padding-left:60px). The 60px gives the 40px hamburger + 8px breathing room + 12px existing edge gap. The right-side controls (.title-row's justify-content:space-between) still work because padding doesn't break flexbox — the h2 just gets a left margin. */ .title-row{padding-left:60px} /* 2026-08-13: breadcrumb offset. The .admin-breadcrumb nav (renders the "Админ › Устройства и узлы › Все устройства" path on every admin page) is rendered at the top of the main area, BELOW the header. On mobile the .sidebar-toggle hamburger is fixed at top:12px,left:12px,40×40px — it visually overlaps the start of the breadcrumb because the breadcrumb's first icon (fa-house crumb-home) sits at x=24 (left padding 24px). The 2026-08-13 v1.3.9 fix added padding-left:60px to .title-row (the page h2) but the breadcrumb is a SIBLING nav, not a child of .title-row — it didn't get the same offset. The operator-reported symptom: "Админ" is half-hidden behind the hamburger on /admin/devices (and any admin page with a breadcrumb). The fix: add the same 60px left padding to .admin-breadcrumb so the breadcrumb starts AT the same x as the page title (both clear the 40px hamburger + 8px gap + 12px edge). */ .admin-breadcrumb{padding-left:60px} /* Tables: force the existing .table-wrap (B50) to scroll horizontally rather than squishing columns. */ .table-wrap{margin:0 -14px;padding:0 14px} /* Form buttons: bigger hit target on mobile. */ .btn{padding:10px 16px;font-size:14px;min-height:40px} .btn-sm{padding:6px 12px;min-height:32px} /* 2026-08-13: hide the in-sidebar .toggle button on mobile. MUST come AFTER the earlier `.sidebar .toggle{width:44px;height:44px}` rule (the v1.1.0 touch-target rule, line ~488) so the later `display:none` wins the cascade. The two rules have equal specificity (0,0,2,0); cascade resolves by source order. If this rule is placed BEFORE the touch-target rule, the .toggle button remains visible (just at 44x44 — the wrong behavior on mobile). The in-sidebar .toggle is the desktop "compact mode" button (220px ↔ 52px); on mobile the sidebar is a drawer controlled by the .sidebar-toggle-input checkbox + .sidebar-toggle hamburger label at top:12px,left:12px, so the in-sidebar .toggle is irrelevant and just confuses the user when they tap it (no visible effect because the `width:280px !important` on .sidebar overrides the `width:52px` from .collapsed). */ .sidebar .toggle{display:none} } /* Align username/password fields in the create-user form on /admin/users. */ .user-form-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; } .ufg-field { display: flex; flex-direction: column; min-width: 0; /* prevent grid blowout on long placeholders */ } .ufg-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; } .ufg-input, .ufg-input-sm { width: 100%; height: 36px; padding: 0 10px; border-radius: 4px; background: var(--bg); color: var(--text); border: 1px solid var(--border); font-family: inherit; font-size: 14px; box-sizing: border-box; } .ufg-input-sm { height: 30px; font-size: 13px; } .ufg-btn { height: 36px; align-self: end; } /* Per-row action menu in the users table. */ .user-actions { position: relative; } .user-actions summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; height: 28px; border-radius: 4px; background: var(--bg); color: var(--text); border: 1px solid var(--border); } .user-actions summary::-webkit-details-marker { display: none; } .user-actions[open] summary { background: var(--border); } .user-actions-menu { position: absolute; right: 0; top: 32px; z-index: 50; background: var(--card-bg, var(--bg)); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 10px; min-width: 220px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); display: flex; flex-direction: column; gap: 8px; } .user-reset-form { display: flex; gap: 6px; align-items: center; }