/** * Adaptive styles (viewport width 320px–1920px). * Loaded after app.css and page-specific stylesheets. * CSS Grid is not used in this file. */ /* ========================================================================== Login page ========================================================================== */ /* Collapse empty guest navbar on the sign-in screen */ body.page-login .navbar { padding: 0; min-height: 0; border-bottom: none; } body.page-login .main { padding-left: 16px; padding-right: 16px; } .login-container .login-session-error { margin-top: 10px; } /* Phones and narrow viewports (320px–479px) */ @media (max-width: 479px) { body.page-login .main { padding-left: 12px; padding-right: 12px; } .login-container { margin: 24px auto; padding: 20px 16px; border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); } .login-container h2 { margin-bottom: 16px; font-size: 20px; } .login-container label { margin-bottom: 4px; font-size: 14px; } .login-container input[type="email"], .login-container input[type="password"] { padding: 8px 10px; margin-bottom: 14px; font-size: 16px; /* prevents iOS zoom on focus */ border-radius: 4px; } .login-container .g-recaptcha { margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .login-container .error { margin-bottom: 8px; font-size: 13px; } .login-container .login-session-error { margin-top: 8px; } .login-button-container { margin-top: 4px; } .login-container .login-btn, .login-container button.login-btn { padding: 9px 12px; font-size: 15px; border-radius: 4px; } .login-button-container .btn { min-height: 40px; } } /* Small tablets and large phones (480px–767px) */ @media (min-width: 480px) and (max-width: 767px) { .login-container { margin: 32px auto; padding: 28px 24px; } .login-container h2 { margin-bottom: 18px; font-size: 22px; } .login-container input[type="email"], .login-container input[type="password"] { padding: 9px 10px; margin-bottom: 16px; } .login-container .g-recaptcha { margin-bottom: 16px; } .login-container .login-btn, .login-container button.login-btn { font-size: 15px; } } /* Tablets in portrait and small laptops (768px–1023px) */ @media (min-width: 768px) and (max-width: 1023px) { .login-container { margin: 40px auto; padding: 32px; } .login-container h2 { font-size: 23px; } } /* ========================================================================== Global adaptive guard ========================================================================== Two-layer safety net so wide content (long select2 dropdowns, wide tables, etc.) cannot stretch / past the viewport on adaptive widths. Without this any descendant with width: 100% inherits the inflated body width and stops being a real overflow boundary. ========================================================================== */ @media (max-width: 1400px) { html { overflow-x: hidden; width: 100%; } body { position: relative; /* clip (not hidden) prevents horizontal overflow without turning into a scroll container, which would break position: sticky for descendants (e.g. the sticky time-reports filter bar). */ overflow-x: clip; width: 100%; min-width: 0; margin: 0; } } /* ========================================================================== Utilities ========================================================================== */ .adaptive-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== App header (navbar) — all authenticated pages ========================================================================== */ .navbar-toggle { display: none; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; margin: 0; padding: 0; border: 1px solid #dee2e6; border-radius: 6px; background-color: #fff; color: #343a40; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .navbar-toggle:hover, .navbar-toggle:focus-visible { background-color: #f1f3f5; border-color: #ced4da; outline: none; } .navbar-toggle-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; pointer-events: none; } .navbar-toggle-icon--close { display: none; } .navbar.navbar--menu-open .navbar-toggle .navbar-toggle-icon--menu { display: none; } .navbar.navbar--menu-open .navbar-toggle .navbar-toggle-icon--close { display: flex; } .navbar-nav-panel { display: block; } .navbar-nav-backdrop { position: fixed; inset: 0; z-index: 1090; background-color: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .navbar.navbar--menu-open ~ .navbar-nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; } body.navbar-menu-open { overflow: hidden; } /* Drawer-only blocks (toolbar account/settings stay in header above 850px) */ .navbar-drawer-header, .navbar-drawer-account { display: none; } /* Compact header with side drawer (≤1180px) */ @media (max-width: 1180px) { .navbar { position: relative; flex-wrap: nowrap; align-items: center; gap: 10px 12px; padding: 10px 16px 10px 12px; font-size: 15px; } .navbar-toggle { display: inline-flex; order: 1; flex: 0 0 40px; } /* Out of flex flow so gap does not appear before the menu button */ .navbar-side-left { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; flex: none; } .navbar-drawer-header { display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid #e9ecef; } .navbar-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid #dee2e6; border-radius: 6px; background-color: #fff; color: #343a40; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .navbar-drawer-close:hover, .navbar-drawer-close:focus-visible { background-color: #f1f3f5; border-color: #ced4da; outline: none; } .navbar-nav-panel { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1100; width: min(300px, calc(100vw - 48px)); padding: 16px; padding-top: max(16px, env(safe-area-inset-top, 0px)); background-color: #fff; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.14); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s ease; } .navbar.navbar--menu-open .navbar-nav-panel { transform: translateX(0); visibility: visible; } .navbar-drawer-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .nav-links { display: flex; flex-direction: column; gap: 0; width: 100%; } .navbar-drawer-body .nav-links a, .navbar-drawer-body .nav-drawer-link, .navbar-drawer-user-toggle { display: block; margin-right: 0; padding: 12px 14px; border-radius: 0; border-bottom: 1px solid #e9ecef; font-size: 16px; line-height: 1.3; color: #343a40; text-decoration: none; text-align: left; box-sizing: border-box; } .navbar-drawer-body .nav-links a:hover, .navbar-drawer-body .nav-links a.active, .navbar-drawer-body .nav-drawer-link:hover, .navbar-drawer-body .nav-drawer-link.active { background-color: #eef2f6; } .nav-drawer-settings { font-weight: normal; } .navbar-side-right { order: 3; flex: 1 1 auto; justify-content: flex-end; margin-left: auto; min-width: 0; } .navbar .user-info span { max-width: min(280px, 42vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navbar-side-center { order: 2; flex: 1 1 auto; min-width: 0; width: auto; max-width: none; justify-content: flex-start; } .nav-jira-block { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 470px; gap: 10px; flex-wrap: nowrap; } .nav-jira-label { flex: 0 0 auto; } .nav-jira-select { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; } .nav-jira-select .select2-container { min-width: 0 !important; } .nav-jira-select .select2-selection__rendered { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-reports-btn-slot { flex: 0 0 auto; width: auto; min-width: 0; } .navbar .dropdown-menu { right: 16px; top: 100%; margin-top: 4px; } } /* Account block in drawer; toolbar gear/user hidden (≤849px) */ @media (max-width: 849px) { .navbar-drawer-account { display: block; } .navbar-side-right--toolbar { display: none; } .nav-faq--drawer { display: block; } .navbar .dropdown-menu#userMenu { display: none !important; } .navbar-drawer-user { display: block; } .navbar-drawer-user-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 12px 14px; border: none; border-bottom: 1px solid #e9ecef; border-radius: 0; background: transparent; color: #343a40; font-size: 16px; line-height: 1.3; cursor: pointer; text-align: left; } .navbar-drawer-user-toggle:hover, .navbar-drawer-user-toggle:focus-visible { background-color: #eef2f6; outline: none; } .navbar-drawer-user-email { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; } .navbar-drawer-user-toggle .fa-caret-down { flex: 0 0 auto; font-size: 12px; transition: transform 0.2s ease; } .navbar-drawer-user--open .navbar-drawer-user-toggle .fa-caret-down { transform: rotate(180deg); } .navbar-drawer-user-menu { display: none; flex-direction: column; background-color: #f8f9fa; border-bottom: 1px solid #e9ecef; } .navbar-drawer-user-menu:not([hidden]) { display: flex; } .navbar-drawer-user-menu a { display: block; padding: 10px 14px 10px 28px; border-bottom: 1px solid #e9ecef; color: #007bff; font-size: 15px; line-height: 1.3; text-decoration: none; } .navbar-drawer-user-menu a:last-child { border-bottom: none; } .navbar-drawer-user-menu a:hover { background-color: #eef2f6; } .navbar-drawer-logout { color: #343a40; } } /* Phones (≤767px) */ @media (max-width: 767px) { .navbar { gap: 8px; padding: 8px 12px 8px 8px; font-size: 14px; } .navbar-toggle { flex: 0 0 36px; width: 36px; height: 36px; font-size: 16px; } .nav-right { gap: 12px; } .navbar .user-info span { max-width: 42vw; font-size: 14px; } .nav-settings { font-size: 17px; } .navbar-nav-panel { width: min(280px, calc(100vw - 32px)); padding: 14px 12px 20px; } .navbar-drawer-body .nav-links a, .navbar-drawer-body .nav-drawer-link, .navbar-drawer-user-toggle { padding: 10px 12px; font-size: 15px; } .navbar-drawer-user-menu a { padding: 10px 12px 10px 24px; font-size: 14px; } .nav-jira-block { gap: 6px; max-width: none; } .nav-jira-label { font-size: 13px; } .nav-reports-btn-slot { min-width: 0; } .nav-reports-btn { font-size: 13px; padding: 0 8px; line-height: 27px; } .navbar .dropdown-menu { right: 12px; left: 12px; width: auto; top: 100%; margin-top: 6px; } .navbar .dropdown-menu a { padding: 12px 16px; font-size: 15px; } } /* Very narrow phones (≤479px) */ @media (max-width: 479px) { .navbar { gap: 6px; padding: 8px 10px 8px 6px; } .navbar .user-info span { max-width: 36vw; font-size: 13px; } .nav-jira-block { gap: 4px; } .nav-jira-label { font-size: 12px; } .nav-reports-btn { font-size: 12px; padding: 0 6px; } } /* ========================================================================== Home page ========================================================================== */ body.page-home .main { padding-left: 16px; padding-right: 16px; } body.page-home .home-toolbar { flex-wrap: nowrap; align-items: center; gap: 16px; } body.page-home .home-jiras-actions { flex: 0 0 auto; margin-bottom: 0; } body.page-home .home-jiras-actions .btn { width: auto; height: 29px; min-height: 29px; padding: 0 12px; font-size: 14px; line-height: 27px; } body.page-home .home-jira-filter.nav-jira-block { flex: 1 1 auto; min-width: 0; width: auto; max-width: 470px; flex-wrap: nowrap; gap: 10px; } body.page-home .home-jira-filter .nav-jira-label { flex: 0 0 auto; } body.page-home .home-jira-filter .nav-jira-select { flex: 1 1 auto; min-width: 0; width: auto; max-width: none; } body.page-home .home-jira-filter .nav-jira-select .select2-container { min-width: 0 !important; } body.page-home .home-jira-filter .nav-jira-select .select2-selection__rendered { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1023px) { body.page-home .jiras-list { margin-left: 0; margin-right: 0; } body.page-home .home-toolbar { margin-top: 20px; gap: 12px; } } @media (max-width: 767px) { body.page-home .main { padding-left: 12px; padding-right: 12px; } body.page-home .home-toolbar { gap: 8px; margin-top: 16px; } body.page-home .home-jiras-actions .btn { height: 27px; min-height: 27px; padding: 0 10px; font-size: 13px; line-height: 25px; } body.page-home .home-jira-filter.nav-jira-block { gap: 6px; max-width: none; } body.page-home .home-jira-filter .nav-jira-label { font-size: 13px; } body.page-home .jiras-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; } body.page-home .jiras-table-home { font-size: 13px; min-width: 480px; } body.page-home .jiras-table-home th, body.page-home .jiras-table-home td { padding: 6px 8px; } body.page-home .jiras-table-home td:last-child { word-break: break-all; } } @media (max-width: 479px) { body.page-home .main { padding-left: 10px; padding-right: 10px; } body.page-home .home-toolbar { margin-top: 12px; gap: 6px; } body.page-home .home-jiras-actions .btn { padding: 0 8px; font-size: 12px; } body.page-home .home-jira-filter .nav-jira-label { font-size: 12px; } body.page-home .jiras-table-scroll { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; } body.page-home .jiras-table-home { font-size: 12px; min-width: 360px; } body.page-home .header-jiras-checkbox, body.page-home .cell-jiras-checkbox { width: 36px; } } /* ========================================================================== Time reports page (adaptive only ≤1400px; desktop >1400px unchanged) ========================================================================== */ /* Desktop layout: filter action wrapper is transparent to the original flex row */ @media (min-width: 1401px) { body.page-timereports .timereports-filter-actions { display: contents; } body.page-timereports .timereports-results-header { display: none; } body.page-timereports .timereports-download--results { display: none; } } @media (max-width: 1400px) { body.page-timereports .main { padding-left: 16px; padding-right: 16px; /* clip (not hidden) keeps horizontal overflow contained without creating a scroll container that would break position: sticky */ overflow-x: clip; } body.page-timereports .timereports_content { margin-left: 0; margin-right: 0; padding-bottom: 32px; } body.page-timereports .timereports_header { flex-direction: column; align-items: stretch; gap: 12px; overflow: visible; /* Не даём scroll anchoring подстраивать позицию при схлопывании карточек */ overflow-anchor: none; } /* Компенсирует потерю высоты шапки при авто-сворачивании (сохраняет поток документа) */ body.page-timereports .tr-header-flow-spacer { display: block; width: 100%; height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; overflow-anchor: none; } body.page-timereports .timereports_header #filter-form { order: 2; width: 100%; box-sizing: border-box; margin-top: 0; background-color: #fff; border: 1px solid #e3e7eb; border-radius: 8px; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); padding: 14px 16px 16px; overflow: visible; } body.page-timereports .timereports_header #filter-form::before { content: "Report filters"; display: block; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #e9ecef; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; color: #6c757d; } body.page-timereports .timereports_filters { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin-top: 0; margin-bottom: 0; width: 100%; } body.page-timereports .timereports-filter-field { width: 100%; max-width: 100%; margin-right: 0; flex-basis: auto; } body.page-timereports .timereports-filter-label { margin-bottom: 6px; } body.page-timereports .timereports_filters > .select2-container, body.page-timereports #filter-form .select2-container, body.page-timereports .timereports-filter-field .select2-container { display: block; width: 100% !important; max-width: 100%; min-width: 0; box-sizing: border-box; } body.page-timereports #filter-form .select2-container--default .select2-selection--multiple, body.page-timereports #filter-form .select2-container--default .select2-selection--single { width: 100%; max-width: 100%; margin-right: 0; box-sizing: border-box; } body.page-timereports #filter-form .select2-selection__rendered { max-width: 100%; box-sizing: border-box; } body.page-timereports #filter-form select.select-2-init:not(.select2-hidden-accessible) { width: 100%; max-width: 100%; } body.page-timereports #date_from, body.page-timereports #date_to { width: 100%; max-width: 100%; margin-right: 0; box-sizing: border-box; } body.page-timereports .timereports-filter-actions { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; width: 100%; margin-top: 4px; padding-top: 12px; border-top: 1px solid #e9ecef; box-sizing: border-box; } body.page-timereports .timereports-filter-actions #apply-filters, body.page-timereports .timereports-filter-actions #save-filters, body.page-timereports .timereports-filter-actions #update-filter { flex: 1 1 0; min-width: 0; width: auto; margin-top: 0; margin-right: 0; text-align: center; } body.page-timereports .timereports-filter-actions .loader { flex: 0 0 auto; align-self: center; margin-left: 0; padding-top: 0; } body.page-timereports .timereports_filters_right { order: 1; position: relative; flex-direction: column; align-items: stretch; width: 100%; gap: 0; margin-top: 12px; margin-bottom: 0; box-sizing: border-box; background-color: #fff; border: 1px solid #e3e7eb; border-radius: 8px; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); padding: 14px 16px 16px; overflow: visible; } body.page-timereports .timereports_filters_right.is-select2-open, body.page-timereports .timereports_filters_right:has(.select2-container--open) { z-index: 20; } body.page-timereports .timereports_filters_right::before { content: "Saved filter"; display: block; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #e9ecef; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; color: #6c757d; } body.page-timereports .timereports-download--sidebar { display: none; } /* Collapsible sticky filter cards (mobile) ----------------------------- */ /* When the JS toggle is present, replace the CSS ::before title strip with a real, focusable button so the collapsed bar is clickable. */ body.page-timereports .timereports_header #filter-form.tr-has-toggle::before, body.page-timereports .timereports_filters_right.tr-has-toggle::before { content: none; display: none; } body.page-timereports .tr-card-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0 0 12px; padding: 0 0 10px; border: 0; border-bottom: 1px solid #e9ecef; background: transparent; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; color: #6c757d; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; } body.page-timereports .tr-card-toggle:focus-visible { outline: 2px solid #1e79f2; outline-offset: 2px; border-radius: 2px; } body.page-timereports .tr-card-toggle__icon { flex: 0 0 auto; width: 8px; height: 8px; margin-bottom: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; } /* Collapsed state: hide the card body visually, keep only the clickable title bar. Bodies are taken out of flow so the sticky bar stays compact; document height is preserved separately by .tr-header-flow-spacer (see JS). */ body.page-timereports #filter-form.is-collapsed, body.page-timereports .timereports_filters_right.is-collapsed { position: relative; padding-bottom: 14px; } body.page-timereports #filter-form.is-collapsed .tr-card-toggle, body.page-timereports .timereports_filters_right.is-collapsed .tr-card-toggle { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } body.page-timereports #filter-form.is-collapsed .tr-card-toggle__icon, body.page-timereports .timereports_filters_right.is-collapsed .tr-card-toggle__icon { transform: rotate(-135deg); margin-bottom: 0; margin-top: 3px; } body.page-timereports #filter-form.is-collapsed .timereports_filters, body.page-timereports .timereports_filters_right.is-collapsed .filter_select_container { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; pointer-events: none; visibility: hidden; } body.page-timereports .filter_select_container { width: 100%; max-width: 100%; margin-top: 0 !important; margin-bottom: 12px !important; margin-right: 0; overflow: visible; } body.page-timereports .timereports_filters_right #download_csv { width: 100%; margin-left: 0; align-self: stretch; } body.page-timereports .filter_select_container .select2-container { width: 100% !important; max-width: 100%; } body.page-timereports .timereports_filters_right .select2-dropdown, body.page-timereports .timereports_filters_right .select2-container.select2-filters-container { position: absolute !important; left: 0 !important; right: auto !important; width: 100% !important; max-width: 100% !important; z-index: 1105; box-sizing: border-box; } body.page-timereports .reports { box-sizing: border-box; margin-top: 12px; background-color: #fff; border: 1px solid #e3e7eb; border-radius: 8px; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); padding: 14px 16px 16px; } body.page-timereports .timereports-results-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #e9ecef; } body.page-timereports .timereports-results-title { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; color: #6c757d; } body.page-timereports .timereports-download--results { flex: 0 0 auto; height: 27px; min-height: 27px; margin: 0; padding: 0 12px; font-size: 14px; white-space: nowrap; border-radius: 4px; } body.page-timereports .reports .time-reports { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; } body.page-timereports .time-reports table { min-width: 880px; font-size: 13px; } /* Save filter modals */ body.page-timereports #filterModal, body.page-timereports #filterModalSuccess, body.page-timereports #filterModalWarning, body.page-timereports #filterModalDateRangeWarning { align-items: center; justify-content: center; padding: 16px; overflow-y: auto; z-index: 1200; } body.page-timereports #filterModal .modal-content, body.page-timereports #filterModalSuccess .modal-content, body.page-timereports #filterModalWarning .modal-content, body.page-timereports #filterModalDateRangeWarning .modal-content { width: calc(100vw - 32px); max-width: 560px; max-height: calc(100vh - 32px); margin: auto; padding: 16px; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left; flex-shrink: 0; } body.page-timereports #filterModal .modal-header h3, body.page-timereports #filterModalSuccess .modal-header h3, body.page-timereports #filterModalWarning .modal-header h3, body.page-timereports #filterModalDateRangeWarning .modal-header h3 { font-size: 18px; line-height: 1.3; text-align: left; } body.page-timereports #filterModal .modal-body, body.page-timereports #filterModalWarning .modal-body, body.page-timereports #filterModalDateRangeWarning .modal-body { margin-top: 12px; max-height: calc(100vh - 240px); overflow-y: auto; -webkit-overflow-scrolling: touch; } body.page-timereports #filterModal .filter-modal-input-group { margin-bottom: 12px; } body.page-timereports #filterModal .filter-modal-input-group label { display: block; width: auto; margin-bottom: 6px; font-size: 14px; } body.page-timereports #filterModal input#filter-name, body.page-timereports #filterModal input#filter-alias { width: 100%; max-width: 100%; box-sizing: border-box; } body.page-timereports #filterModal .modal-body h4 { margin: 16px 0 8px; font-size: 15px; font-weight: 600; color: #495057; } body.page-timereports #filterModal #selected-filters { margin: 0; padding: 0; list-style: none; background-color: #f8f9fa; border: 1px solid #e3e7eb; border-radius: 6px; overflow: hidden; } body.page-timereports #filterModal #selected-filters li { margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.45; word-break: break-word; border-bottom: 1px solid #e9ecef; border-left: 3px solid #6aa5e2; background-color: #fff; } body.page-timereports #filterModal #selected-filters li:last-child { border-bottom: none; } body.page-timereports #filterModal #selected-filters li strong { display: inline-block; min-width: 5.5em; margin-right: 6px; color: #343a40; font-weight: 600; } body.page-timereports #filterModal .modal-footer, body.page-timereports #filterModalWarning .modal-footer, body.page-timereports #filterModalDateRangeWarning .modal-footer { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; } body.page-timereports #filterModalSuccess .modal-footer { flex-direction: row; justify-content: center; margin-top: 16px; } body.page-timereports #filterModal .modal-btns-container, body.page-timereports #filterModalWarning .modal-btns-container, body.page-timereports #filterModalDateRangeWarning .modal-btns-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; width: auto; max-width: 100%; } body.page-timereports #filterModal .modal-btns-container { position: relative; width: 100%; max-width: 100%; overflow: visible; } body.page-timereports #filterModal .modal-footer button, body.page-timereports #filterModalSuccess .modal-footer button, body.page-timereports #filterModalWarning .modal-footer button, body.page-timereports #filterModalDateRangeWarning .modal-footer button { flex: 1 1 0; min-width: 120px; max-width: 180px; width: auto; height: 29px; margin-right: 0; padding: 0 14px; font-size: 14px; line-height: 27px; } body.page-timereports #filterModalSuccess .modal-footer button { flex: 0 0 auto; min-width: 100px; } body.page-timereports #filterModal .modal-footer .btn-danger, body.page-timereports #filterModalWarning .modal-footer .btn-danger, body.page-timereports #filterModalDateRangeWarning .modal-footer .btn-danger { margin-right: 0; } body.page-timereports #filterModal .loader-modal { position: static; flex: 0 0 100%; order: -1; display: flex; justify-content: center; align-items: center; width: 100%; height: 28px; margin: 0 0 8px; line-height: 0; } body.page-timereports #filterModal .loader-modal .loader-image { width: 22px; height: 22px; } body.page-timereports #filterModalWarning .loader-modal, body.page-timereports #filterModalDateRangeWarning .loader-modal { position: static; flex: 0 0 100%; order: -1; display: flex; justify-content: center; align-items: center; width: 100%; height: 28px; margin: 0 0 8px; line-height: 0; } body.page-timereports #filterModalWarning .loader-modal .loader-image, body.page-timereports #filterModalDateRangeWarning .loader-modal .loader-image { width: 22px; height: 22px; } } @media (max-width: 767px) { body.page-timereports .main { padding-left: 12px; padding-right: 12px; } body.page-timereports .timereports_content { padding-bottom: 28px; } body.page-timereports #filterModal, body.page-timereports #filterModalSuccess, body.page-timereports #filterModalWarning, body.page-timereports #filterModalDateRangeWarning { padding: 12px; } body.page-timereports #filterModal .modal-content, body.page-timereports #filterModalSuccess .modal-content, body.page-timereports #filterModalWarning .modal-content, body.page-timereports #filterModalDateRangeWarning .modal-content { width: calc(100vw - 24px); padding: 14px; } body.page-timereports .timereports_header #filter-form, body.page-timereports .timereports_filters_right, body.page-timereports .reports { padding: 12px 14px 14px; } body.page-timereports .time-reports table { font-size: 12px; min-width: 760px; } } @media (max-width: 479px) { body.page-timereports .main { padding-left: 10px; padding-right: 10px; } body.page-timereports .timereports_content { padding-bottom: 24px; } body.page-timereports #filterModal .modal-content, body.page-timereports #filterModalSuccess .modal-content, body.page-timereports #filterModalWarning .modal-content, body.page-timereports #filterModalDateRangeWarning .modal-content { width: calc(100vw - 20px); padding: 12px; } body.page-timereports .timereports_header #filter-form, body.page-timereports .timereports_filters_right, body.page-timereports .reports { padding: 10px 12px 12px; } } /* ========================================================================== Filters page (adaptive only ≤1400px; desktop >1400px unchanged) ========================================================================== */ @media (max-width: 1400px) { body.page-filters .main { position: relative; padding-left: 16px; padding-right: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } body.page-filters .filters-list { margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } body.page-filters .filters-toolbar { margin-top: 20px; margin-bottom: 8px; } /* * Bullet-proof horizontal scroll: * - wrapper width is pinned to the viewport (100vw - .main paddings), * so it cannot inherit an inflated parent width and remains a real * overflow boundary regardless of what happens upstream; * - the table itself is sized by min-width, so the scroll lives * inside the wrapper only. */ body.page-filters .filters-table-wrap { display: block; width: calc(100vw - 32px); max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; /*border: 1px solid #e3e7eb;*/ /*border-radius: 6px;*/ background-color: #fff; } body.page-filters .filters-table { width: 100%; min-width: 940px; max-width: none; margin: 0; table-layout: auto; font-size: 14px; } /* Reset desktop fixed widths so min-widths drive column sizing */ body.page-filters .header-filters-name, body.page-filters .header-filters-alias, body.page-filters .header-filters-jiras, body.page-filters .header-filters-projects, body.page-filters .header-filters-users, body.page-filters .header-filters-labels, body.page-filters .header-filters-date_range, body.page-filters .header-filters-edit, body.page-filters .header-filters-delete { width: auto; } body.page-filters .filters-table th { white-space: nowrap; vertical-align: top; } body.page-filters .filters-table tbody td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } body.page-filters .filters-meta-cell-inner { flex-wrap: wrap; } body.page-filters .filters-meta-edit-btn, body.page-filters .filters-meta-save-btn { width: 28px; height: 28px; } body.page-filters .filters-table .edit-cell, body.page-filters .filters-table .delete-cell { max-width: none; text-align: center; padding-left: 4px; padding-right: 4px; white-space: nowrap; vertical-align: middle; } /* Compact icon-only actions so the column stays narrow */ body.page-filters .filters-edit-btn, body.page-filters .filters-delete-btn { width: 32px; min-width: 0; height: 27px; max-height: 27px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; } } /* Tablet refinements */ @media (max-width: 1023px) { body.page-filters .filters-toolbar { margin-top: 16px; } body.page-filters .filters-table { font-size: 13px; } body.page-filters .filters-table th, body.page-filters .filters-table td { padding: 6px 8px; } } /* Phones — keep horizontal-scroll table, just compact spacing */ @media (max-width: 767px) { body.page-filters .main { padding-left: 12px; padding-right: 12px; } body.page-filters .filters-toolbar { margin-top: 14px; margin-bottom: 8px; } body.page-filters .filters-table-wrap { width: calc(100vw - 24px); } body.page-filters .filters-table { min-width: 780px; } } @media (max-width: 479px) { body.page-filters .main { padding-left: 10px; padding-right: 10px; } body.page-filters .filters-toolbar { margin-top: 12px; } body.page-filters .filters-table-wrap { width: calc(100vw - 20px); } body.page-filters .filters-table { min-width: 720px; font-size: 12px; } body.page-filters .filters-table th, body.page-filters .filters-table td { padding: 5px 6px; } } /* ========================================================================== Filters page — stacked-cards layout (DISABLED) Kept for future use. To enable, comment out the horizontal-scroll table rules in the section above and uncomment this block. ========================================================================== @media (max-width: 767px) { body.page-filters .filters-table, body.page-filters .filters-table tbody, body.page-filters .filters-table tr, body.page-filters .filters-table td { display: block; width: 100%; max-width: 100%; } body.page-filters .filters-table { border-collapse: separate; border-spacing: 0; font-size: 13px; } body.page-filters .filters-table thead { display: none; } body.page-filters .filters-table tr { position: relative; margin-bottom: 12px; padding: 12px 14px; background-color: #fff; border: 1px solid #e3e7eb; border-radius: 8px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); } body.page-filters .filters-table tr:nth-child(even), body.page-filters .filters-table tr:hover { background-color: #fff; } body.page-filters .filters-table td { position: relative; padding: 6px 0 6px 110px; border: none; min-height: 24px; overflow-wrap: anywhere; word-break: break-word; } body.page-filters .filters-table td + td { border-top: 1px dashed #eef0f3; padding-top: 8px; margin-top: 2px; } body.page-filters .filters-table td::before { content: attr(data-label); position: absolute; top: 6px; left: 0; width: 100px; padding-right: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; line-height: 1.4; box-sizing: border-box; } body.page-filters .filters-table td.edit-cell, body.page-filters .filters-table td.delete-cell { padding: 12px 0 0; margin-top: 10px; text-align: left; border-top: 1px solid #e9ecef; } body.page-filters .filters-table td.edit-cell::before, body.page-filters .filters-table td.delete-cell::before { display: none; } body.page-filters .filters-edit-btn, body.page-filters .filters-delete-btn { width: 32px; min-width: 32px; height: 32px; max-height: 32px; padding: 0; font-size: 13px; } } @media (max-width: 479px) { body.page-filters .filters-table td { padding-left: 96px; } body.page-filters .filters-table td::before { width: 88px; font-size: 10px; } } ========================================================================== */ /* Send CSV modals (legacy markup on filters page) */ @media (max-width: 1400px) { body.page-filters #sendModal .modal-content, body.page-filters #sendPending .modal-content { width: min(700px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; text-align: left; } body.page-filters #sendModal .modal-header, body.page-filters #sendPending .modal-header { align-items: flex-start; gap: 12px; } body.page-filters #sendModal .modal-header h3, body.page-filters #sendPending .modal-header h3 { flex: 1 1 auto; min-width: 0; font-size: 18px; line-height: 1.3; text-align: left; } body.page-filters #sendModal .modal-body, body.page-filters #sendPending .modal-body { margin-top: 16px; } body.page-filters #sendModal .filters-container label { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; line-height: 1.4; } body.page-filters #sendModal .filters-container label input[type="checkbox"] { flex: 0 0 auto; margin-top: 3px; } body.page-filters #sendModal .modal-btns-container, body.page-filters #sendPending .modal-btns-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; } body.page-filters #sendModal .modal-footer button, body.page-filters #sendPending .modal-footer button { width: auto; min-width: 120px; flex: 1 1 140px; max-width: 100%; } } @media (max-width: 767px) { body.page-filters #sendModal .modal-content, body.page-filters #sendPending .modal-content { width: calc(100vw - 24px); padding: 16px; } body.page-filters #sendModal .modal-footer button, body.page-filters #sendPending .modal-footer button { flex: 1 1 100%; min-width: 0; } } @media (max-width: 479px) { body.page-filters #sendModal .modal-content, body.page-filters #sendPending .modal-content { width: calc(100vw - 20px); padding: 12px; } } /* ========================================================================== My reports page (Sending) — listing only Desktop (>1400px) unchanged. Tablets get a horizontal-scroll table; phones get a card layout for better readability of the multi-column dataset and four per-row action buttons. ========================================================================== */ /* * Hide the new icon halves of Send/Test buttons and the new text halves of * Edit/Delete buttons on desktop so the existing visuals stay byte-identical * to what was shipped (Send/Test = text, Edit/Delete = icon). */ body.page-my-reports .cell-report-action--send .reports-action-btn-icon, body.page-my-reports .cell-report-action--test .reports-action-btn-icon { display: none; } body.page-my-reports .cell-report-action--edit .reports-action-btn-text, body.page-my-reports .cell-report-action--delete .reports-action-btn-text { display: none; } /* * Card-toggle button (in the name cell) is invisible on desktop — looks and * behaves like the plain report name. Its visual styling and click affordance * appear only inside the mobile card layout (≤767px). */ body.page-my-reports .report-card-toggle { display: inline; width: auto; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: text; pointer-events: none; } body.page-my-reports .report-card-toggle-chevron { display: none; } @media (max-width: 1400px) { body.page-my-reports .main { position: relative; padding-left: 16px; padding-right: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } body.page-my-reports .reports-list { margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } /* Toolbar: keep "Add report" + "Send log" on one row, sized to content, wrapping if the viewport is impossibly narrow. */ body.page-my-reports .reports-toolbar { flex-wrap: wrap; gap: 8px 12px; margin-top: 20px; margin-bottom: 8px; } body.page-my-reports .reports-toolbar .add-report-button { margin-bottom: 0; } /* Horizontal-scroll wrapper (tablet-sized viewports). Wrapper width is pinned to the viewport so it cannot inherit an inflated parent and remains a real overflow boundary, same trick as the filters page. */ body.page-my-reports .reports-table-wrap { display: block; width: calc(100vw - 32px); max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background-color: #fff; } body.page-my-reports .reports-table { width: 100%; min-width: 1100px; max-width: none; margin: 0; table-layout: auto; font-size: 14px; } /* Drop the fixed desktop column widths so min-widths drive sizing. */ body.page-my-reports .header-report-name, body.page-my-reports .header-report-jira, body.page-my-reports .header-report-filters-list, body.page-my-reports .header-reports-recipients, body.page-my-reports .header-report-schedules, body.page-my-reports .header-reports-send, body.page-my-reports .header-reports-test-send, body.page-my-reports .header-reports-edit, body.page-my-reports .header-reports-delete { width: auto; } body.page-my-reports .reports-table th { white-space: nowrap; vertical-align: top; } body.page-my-reports .reports-table tbody td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } body.page-my-reports .reports-table .cell-report-action { white-space: nowrap; text-align: center; padding-left: 4px; padding-right: 4px; } body.page-my-reports .reports-table .cell-report-action .btn { margin: 0; } } /* Tablet refinements */ @media (max-width: 1023px) { body.page-my-reports .reports-toolbar { margin-top: 16px; } body.page-my-reports .reports-table { font-size: 13px; } body.page-my-reports .reports-table th, body.page-my-reports .reports-table td { padding: 6px 8px; } } /* Phones — switch to card-per-row layout for clarity */ @media (max-width: 767px) { body.page-my-reports .main { padding-left: 12px; padding-right: 12px; } body.page-my-reports .reports-toolbar { margin-top: 14px; margin-bottom: 10px; gap: 8px; } body.page-my-reports .reports-toolbar .btn { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 13px; } body.page-my-reports .reports-toolbar .add-report-button { flex: 1 1 0; display: flex; } body.page-my-reports .reports-toolbar .add-report-button .btn { width: 100%; } /* Wrapper drops the scroll container styling — cards flow vertically. */ body.page-my-reports .reports-table-wrap { width: auto; max-width: 100%; overflow: visible; background-color: transparent; } /* Convert the table into a stack of cards. */ body.page-my-reports .reports-table, body.page-my-reports .reports-table tbody, body.page-my-reports .reports-table tr, body.page-my-reports .reports-table td { display: block; width: 100%; max-width: 100%; } body.page-my-reports .reports-table { border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 0; } body.page-my-reports .reports-table thead { display: none; } body.page-my-reports .reports-table tbody tr, body.page-my-reports .reports-table tr:nth-child(even), body.page-my-reports .reports-table tr:hover { background-color: #fff; } body.page-my-reports .reports-table tr { position: relative; margin-bottom: 14px; padding: 14px 14px 12px; background-color: #fff; border: 1px solid #e3e7eb; border-radius: 8px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); } body.page-my-reports .reports-table td { position: relative; padding: 6px 0; border: none; min-height: 24px; overflow-wrap: anywhere; word-break: break-word; } /* Name cell is the card title — slightly larger, no label. In card mode the title is also the click target that expands the card, so it stretches across the full card width and hosts the chevron on the right. */ body.page-my-reports .reports-table td.cell-report-name { padding: 0; margin-bottom: 0; border-bottom: none; color: #1f2937; } body.page-my-reports .report-card-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 2px 0; margin: 0; border: 0; background: transparent; color: inherit; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; } body.page-my-reports .report-card-toggle:focus-visible { outline: 2px solid #1e79f2; outline-offset: 2px; border-radius: 4px; } body.page-my-reports .report-card-toggle-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } body.page-my-reports .report-card-toggle-chevron { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; margin-right: -4px; color: #6c757d; font-size: 14px; line-height: 1; transition: transform 0.2s ease; } body.page-my-reports .reports-table tr.is-card-expanded .report-card-toggle-chevron { transform: rotate(180deg); } /* Collapsed state (default): only the name/toggle row is visible. Hide every other data cell, every action cell and the action-row separator pseudo-element. */ body.page-my-reports .reports-table tr > td:not(.cell-report-name) { display: none; } body.page-my-reports .reports-table tr::before { display: none; } /* Expanded state: re-show the data + actions + separator. */ body.page-my-reports .reports-table tr.is-card-expanded > td { display: block; } body.page-my-reports .reports-table tr.is-card-expanded::before { display: block; } body.page-my-reports .reports-table tr.is-card-expanded > td.cell-report-name { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid #eef0f3; } /* Data rows show a small uppercase label above the value. */ body.page-my-reports .reports-table td.cell-report-jira, body.page-my-reports .reports-table td.cell-report-filters, body.page-my-reports .reports-table td.cell-report-recipients, body.page-my-reports .reports-table td.cell-report-schedules { padding: 8px 0 4px; } body.page-my-reports .reports-table td.cell-report-jira::before, body.page-my-reports .reports-table td.cell-report-filters::before, body.page-my-reports .reports-table td.cell-report-recipients::before, body.page-my-reports .reports-table td.cell-report-schedules::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6c757d; line-height: 1.3; } body.page-my-reports .reports-table td.cell-report-filters ul, body.page-my-reports .reports-table td.cell-report-recipients ul, body.page-my-reports .reports-table td.cell-report-schedules ul { margin: 0; padding-left: 18px; } /* * Action cells: all four buttons live on a single row at the bottom of * the card. The row is implemented by turning the into a flex * container — data cells take the full row width (flex: 0 0 100%) * forcing each onto its own line; action cells share the final line * with column-gap between them. A single full-width separator above the * action row is rendered by a `tr::before` pseudo-element placed between * data cells (order 0) and action cells (order 10) via flex order. */ body.page-my-reports .reports-table tr { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 6px; } body.page-my-reports .reports-table tr > td:not(.cell-report-action) { flex: 0 0 100%; width: 100%; max-width: 100%; } body.page-my-reports .reports-table tr::before { content: ''; order: 9; flex: 0 0 100%; height: 0; margin-top: 12px; border-top: 1px solid #e9ecef; } body.page-my-reports .reports-table td.cell-report-action { order: 10; flex: 1 1 0; width: auto; min-width: 0; max-width: none; padding: 12px 0 0; margin: 0; text-align: left; } body.page-my-reports .reports-table td.cell-report-action .delete-form { display: block; width: 100%; padding: 0; margin: 0; } body.page-my-reports .reports-table td.cell-report-action .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; min-height: 36px; padding: 0 8px; margin: 0; font-size: 13px; line-height: 1; white-space: nowrap; } /* Show icon + label on every action button in card mode. */ body.page-my-reports .cell-report-action--send .reports-action-btn-icon, body.page-my-reports .cell-report-action--test .reports-action-btn-icon, body.page-my-reports .cell-report-action--edit .reports-action-btn-text, body.page-my-reports .cell-report-action--delete .reports-action-btn-text { display: inline-flex; align-items: center; } } /* Very narrow phones — drop button labels so all four icons fit in one row. Accessible names stay available via title/aria-label on each button. */ @media (max-width: 479px) { body.page-my-reports .main { padding-left: 10px; padding-right: 10px; } body.page-my-reports .reports-toolbar { margin-top: 12px; } body.page-my-reports .reports-toolbar .btn { font-size: 12px; padding: 0 8px; } body.page-my-reports .reports-table tr { padding: 12px 12px 10px; column-gap: 4px; } body.page-my-reports .reports-table tr::before { margin-top: 10px; } body.page-my-reports .report-card-toggle { font-size: 15px; } body.page-my-reports .report-card-toggle-chevron { width: 26px; height: 26px; margin-right: -2px; } body.page-my-reports .cell-report-action--edit .reports-action-btn-icon, body.page-my-reports .cell-report-action--delete .reports-action-btn-icon { display: inline-flex; align-items: center; } body.page-my-reports .reports-table td.cell-report-action { padding-top: 10px; } body.page-my-reports .reports-table td.cell-report-action .btn { height: 27px; min-height: 27px; padding: 0 6px; font-size: 13px; } } @media (max-width: 350px) { /* Switch action buttons to icon-only so all four fit in one row. */ body.page-my-reports .cell-report-action--send .reports-action-btn-text, body.page-my-reports .cell-report-action--test .reports-action-btn-text, body.page-my-reports .cell-report-action--edit .reports-action-btn-text, body.page-my-reports .cell-report-action--delete .reports-action-btn-text { display: none; } } /* ----- My reports modals (delete / send / test / test-pending) ----- */ @media (max-width: 1400px) { body.page-my-reports #deleteModal, body.page-my-reports #sendReportModal, body.page-my-reports #testSendModal, body.page-my-reports #testSendPendingModal { align-items: center; justify-content: center; padding: 16px; overflow-y: auto; z-index: 1200; } body.page-my-reports #deleteModal .modal-content, body.page-my-reports #sendReportModal .modal-content, body.page-my-reports #testSendModal .modal-content, body.page-my-reports #testSendPendingModal .modal-content { width: calc(100vw - 32px); max-width: 560px; max-height: calc(100vh - 32px); margin: auto; padding: 16px; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left; flex-shrink: 0; } body.page-my-reports #deleteModal .modal-header h3, body.page-my-reports #sendReportModal .modal-header h3, body.page-my-reports #testSendModal .modal-header h3, body.page-my-reports #testSendPendingModal .modal-header h3 { font-size: 18px; line-height: 1.3; text-align: left; } body.page-my-reports #deleteModal .modal-body, body.page-my-reports #sendReportModal .modal-body, body.page-my-reports #testSendModal .modal-body, body.page-my-reports #testSendPendingModal .modal-body { margin-top: 12px; max-height: calc(100vh - 240px); overflow-y: auto; -webkit-overflow-scrolling: touch; } body.page-my-reports #testSendModal .form-group { margin-bottom: 10px; } body.page-my-reports #testSendModal .form-group label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; } body.page-my-reports #testSendModal #test_send_email { width: 100%; max-width: 100%; height: 34px; padding: 0 10px; box-sizing: border-box; border-radius: 4px; } body.page-my-reports #deleteModal .modal-footer, body.page-my-reports #sendReportModal .modal-footer, body.page-my-reports #testSendModal .modal-footer, body.page-my-reports #testSendPendingModal .modal-footer { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; } body.page-my-reports #deleteModal .modal-btns-container, body.page-my-reports #sendReportModal .modal-btns-container, body.page-my-reports #testSendModal .modal-btns-container, body.page-my-reports #testSendPendingModal .modal-btns-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; width: 100%; max-width: 100%; } body.page-my-reports #deleteModal .modal-footer button, body.page-my-reports #sendReportModal .modal-footer button, body.page-my-reports #testSendModal .modal-footer button, body.page-my-reports #testSendPendingModal .modal-footer button { flex: 1 1 0; min-width: 120px; max-width: 180px; width: auto; height: 29px; margin-right: 0; padding: 0 14px; font-size: 14px; line-height: 27px; } body.page-my-reports #deleteModal .modal-footer .btn-danger { margin-right: 0; } } @media (max-width: 767px) { body.page-my-reports #deleteModal, body.page-my-reports #sendReportModal, body.page-my-reports #testSendModal, body.page-my-reports #testSendPendingModal { padding: 12px; } body.page-my-reports #deleteModal .modal-content, body.page-my-reports #sendReportModal .modal-content, body.page-my-reports #testSendModal .modal-content, body.page-my-reports #testSendPendingModal .modal-content { width: calc(100vw - 24px); padding: 14px; } body.page-my-reports #deleteModal .modal-footer button, body.page-my-reports #sendReportModal .modal-footer button, body.page-my-reports #testSendModal .modal-footer button, body.page-my-reports #testSendPendingModal .modal-footer button { flex: 1 1 100%; min-width: 0; max-width: 100%; } } @media (max-width: 479px) { body.page-my-reports #deleteModal .modal-content, body.page-my-reports #sendReportModal .modal-content, body.page-my-reports #testSendModal .modal-content, body.page-my-reports #testSendPendingModal .modal-content { width: calc(100vw - 20px); padding: 12px; } } /* ========================================================================== My report form page (Sending — create / edit) Desktop (>1400px) is untouched. Adaptive widths get fluid form fields, stacked filter/schedule rows and tightened modals so the form remains usable from 1400px all the way down to 320px. ========================================================================== */ @media (max-width: 1400px) { body.page-my-report-form .main { position: relative; padding-left: 16px; padding-right: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } /* Layout container becomes fluid; its desktop max-width still caps it at 1000px on wide tablets so the look stays consistent. */ body.page-my-report-form .report-create-edit-layout { margin: 24px auto; width: 100%; max-width: 1000px; box-sizing: border-box; } body.page-my-report-form .report-create-edit-columns { display: block; width: 100%; } body.page-my-report-form .report-create-edit-layout .form-container, body.page-my-report-form .form-container.form-wide { width: 100%; max-width: 100%; box-sizing: border-box; } body.page-my-report-form .report-create-edit-layout .report-email-preview { width: 100%; max-width: 100%; box-sizing: border-box; } /* Toolbar stays a horizontal row but is allowed to wrap when buttons no longer fit on a single line (e.g. narrow tablets in portrait). */ body.page-my-report-form .report-form-toolbar { flex-wrap: wrap; gap: 8px; } body.page-my-report-form .report-form-toolbar .btn { flex: 0 0 auto; } /* Recipient input was pinned to 907px on desktop; here it must grow and shrink with the row so the trash button never gets pushed outside the form card. */ body.page-my-report-form .email-input-group { gap: 8px; flex-wrap: nowrap; align-items: center; } body.page-my-report-form .email-input-group input { flex: 1 1 auto; width: auto; min-width: 0; max-width: 100%; box-sizing: border-box; } body.page-my-report-form .email-input-group .remove-email.inline-row-btn { flex: 0 0 auto; } /* Email autocomplete dropdown from jQuery UI is positioned at fixed coordinates; cap its width to the viewport so it cannot stretch past the right edge on narrow widths. */ body.page-my-report-form .ui-autocomplete { max-width: calc(100vw - 24px); box-sizing: border-box; overflow-x: hidden; } body.page-my-report-form .ui-autocomplete .ui-menu-item { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* Filters group: keep the label + range selector inline on tablets, but make the range selector shrink with the row instead of holding its 420px max-width. */ body.page-my-report-form .report-filters-label-row { flex-wrap: wrap; gap: 8px 12px; } body.page-my-report-form .report-filters-range-group { flex: 1 1 260px; min-width: 0; max-width: 100%; } body.page-my-report-form .report-filters-range-group .select2-container { flex: 1 1 auto; min-width: 0; max-width: 100%; width: auto !important; } body.page-my-report-form .report-filters-toolbar { flex-wrap: nowrap; gap: 6px; } body.page-my-report-form .report-filters-select-wrap { flex: 1 1 auto; min-width: 0; } body.page-my-report-form .report-filters-select-wrap .select2-container { width: 100% !important; max-width: 100%; } body.page-my-report-form .report-filters-actions { flex: 0 0 auto; } body.page-my-report-form .report-filters-range-hint { width: 100%; } /* Email preview: keep card visuals; just allow its body to break long URLs/words and let the file list wrap if needed. */ body.page-my-report-form .report-email-preview { padding: 14px 16px; } body.page-my-report-form .report-preview-body { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } body.page-my-report-form .report-preview-files { overflow-wrap: anywhere; word-break: break-word; } /* Send-confirm modal: cap the dialog at the viewport with safe margins, allow it to scroll vertically and let the inline preview inside stay scrollable. */ body.page-my-report-form #sendConfirmModal, body.page-my-report-form #sendPendingModal { align-items: center; justify-content: center; padding: 16px; overflow-y: auto; z-index: 1200; } body.page-my-report-form #sendConfirmModal .modal-content, body.page-my-report-form #sendPendingModal .modal-content { width: calc(100vw - 32px); max-width: 720px; max-height: calc(100vh - 32px); margin: auto; padding: 16px; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left; flex-shrink: 0; } body.page-my-report-form #sendConfirmModal .modal-header h3, body.page-my-report-form #sendPendingModal .modal-header h3, body.page-my-reports #sendConfirmModal .modal-header h3, body.page-my-reports #sendPendingModal .modal-header h3 { font-size: 18px; line-height: 1.3; text-align: left; } body.page-my-report-form #sendConfirmModal .modal-body, body.page-my-reports #sendConfirmModal .modal-body { margin-top: 12px; max-height: none; } body.page-my-report-form #sendConfirmModal .report-send-modal-preview, body.page-my-reports #sendConfirmModal .report-send-modal-preview { max-height: min(40vh, 320px); } body.page-my-report-form #sendConfirmModal .modal-footer, body.page-my-report-form #sendPendingModal .modal-footer, body.page-my-reports #sendConfirmModal .modal-footer, body.page-my-reports #sendPendingModal .modal-footer { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; } body.page-my-report-form #sendConfirmModal .modal-btns-container, body.page-my-report-form #sendPendingModal .modal-btns-container, body.page-my-reports #sendConfirmModal .modal-btns-container, body.page-my-reports #sendPendingModal .modal-btns-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; width: 100%; max-width: 100%; } body.page-my-report-form #sendConfirmModal .modal-footer button, body.page-my-report-form #sendPendingModal .modal-footer button, body.page-my-reports #sendConfirmModal .modal-footer button, body.page-my-reports #sendPendingModal .modal-footer button { flex: 1 1 0; min-width: 120px; max-width: 180px; width: auto; height: 29px; margin-right: 0; padding: 0 14px; font-size: 14px; line-height: 27px; } } /* Tablet refinements: stack the filter label row + tighten the timing rows so each schedule field gets a comfortable amount of space. */ @media (max-width: 1023px) { body.page-my-report-form .report-create-edit-layout { margin: 20px auto; } body.page-my-report-form .report-filters-label-row { flex-direction: column; align-items: stretch; gap: 8px; } body.page-my-report-form .report-filters-range-group { flex: 1 1 auto; width: 100%; max-width: 100%; margin-left: 0; justify-content: flex-start; } body.page-my-report-form .report-filters-range-label { flex: 0 0 auto; } /* Timing rows: drop the wide 220px/200px minimums so two fields can comfortably sit next to each other on portrait tablets. */ body.page-my-report-form .schedule-input-group { gap: 8px 10px; } body.page-my-report-form .schedule-field { min-width: 140px; } body.page-my-report-form .schedule-field-frequency { flex: 1 1 180px; } body.page-my-report-form .schedule-field-day-of-month { flex: 1 1 140px; } body.page-my-report-form .schedule-field-day-of-week { flex: 1 1 160px; } body.page-my-report-form .schedule-field-time { flex: 0 0 120px; } body.page-my-report-form .schedule-field-actions { flex: 0 0 44px; } } /* Phones: form card spans the viewport with tight padding; schedule fields and recipients stack vertically for one-handed editing. */ @media (max-width: 767px) { body.page-my-report-form .main { padding-left: 12px; padding-right: 12px; } body.page-my-report-form .report-create-edit-layout { margin: 16px auto; } body.page-my-report-form .form-container.form-wide { padding: 16px 14px; } body.page-my-report-form .report-form-toolbar { gap: 6px; } body.page-my-report-form .report-form-toolbar .btn { height: 29px; padding: 0 12px; font-size: 13px; } body.page-my-report-form .form-group label { font-size: 14px; } body.page-my-report-form .report-name-macros-hint { font-size: 11px; line-height: 1.45; } body.page-my-report-form .email-input-group { gap: 6px; } body.page-my-report-form .email-input-group .remove-email.inline-row-btn { width: 36px; min-width: 36px; padding: 0; } body.page-my-report-form .plus-minus-btn { margin-top: 8px; } body.page-my-report-form .plus-minus-btn .btn { min-width: 36px; padding: 0 10px; } /* Timing section: each schedule/reminder row becomes a vertical stack of fields so labels and select2 dropdowns have full width and no field gets squeezed below a usable size. */ body.page-my-report-form .report-timing-section-head { gap: 8px 10px; } body.page-my-report-form .report-timing-section-head .add-schedule, body.page-my-report-form .report-timing-section-head .add-reminder { height: 29px; padding: 0 12px; font-size: 13px; } body.page-my-report-form .schedule-input-group { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 12px; } body.page-my-report-form .schedule-input-group .schedule-field { flex: 0 0 auto; width: 100%; min-width: 0; max-width: 100%; } body.page-my-report-form .schedule-input-group .schedule-field-time { flex: 0 0 auto; } body.page-my-report-form .schedule-input-group .schedule-field-actions { flex: 0 0 auto; align-items: stretch; } body.page-my-report-form .schedule-field-actions .schedule-field-label { display: none; } body.page-my-report-form .schedule-field-actions .btn.remove-schedule { width: 100%; height: 29px; gap: 8px; } /* Email preview tighter on phones — still legible. */ body.page-my-report-form .report-email-preview { padding: 12px 14px; } body.page-my-report-form .report-email-preview-title { font-size: 15px; } body.page-my-report-form .report-email-preview-header { margin-bottom: 10px; gap: 8px; } body.page-my-report-form .report-preview-body { font-size: 13px; padding: 8px 10px; } body.page-my-report-form .validation-errors, body.page-my-report-form .validation-success { font-size: 13px; } /* Send modals: shrink padding but keep the footer buttons (Send / Cancel) sharing a single row even on phones. */ body.page-my-report-form #sendConfirmModal, body.page-my-report-form #sendPendingModal { padding: 12px; } body.page-my-report-form #sendConfirmModal .modal-content, body.page-my-report-form #sendPendingModal .modal-content { width: calc(100vw - 24px); padding: 14px; } body.page-my-report-form #sendConfirmModal .modal-footer button, body.page-my-report-form #sendPendingModal .modal-footer button { flex: 1 1 0; min-width: 0; max-width: none; } } /* Very narrow phones (≤479px): drop another step of padding/font-size and let the toolbar buttons share the row equally. */ @media (max-width: 479px) { body.page-my-report-form .main { padding-left: 10px; padding-right: 10px; } body.page-my-report-form .report-create-edit-layout { margin: 12px auto; } body.page-my-report-form .form-container.form-wide { padding: 14px 12px; border-radius: 6px; } body.page-my-report-form .report-form-toolbar { gap: 6px; } body.page-my-report-form .report-form-toolbar .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 13px; } body.page-my-report-form .report-form-toolbar .report-preview-loader { flex: 0 0 auto; } body.page-my-report-form .form-group { margin-bottom: 12px; } body.page-my-report-form .form-group input, body.page-my-report-form .form-group select { padding: 6px 8px; } body.page-my-report-form .email-input-group .remove-email.inline-row-btn { width: 34px; min-width: 34px; font-size: 12px; } body.page-my-report-form .plus-minus-btn .btn { min-width: 34px; padding: 0 8px; } body.page-my-report-form .schedule-input-group { padding: 10px; gap: 6px; } body.page-my-report-form .report-email-preview { padding: 10px 12px; } body.page-my-report-form #sendConfirmModal .modal-content, body.page-my-report-form #sendPendingModal .modal-content { width: calc(100vw - 20px); padding: 12px; } body.page-my-report-form #sendConfirmModal .modal-footer, body.page-my-report-form #sendPendingModal .modal-footer { gap: 8px; } body.page-my-report-form #sendConfirmModal .modal-btns-container, body.page-my-report-form #sendPendingModal .modal-btns-container { gap: 8px; flex-wrap: nowrap; } body.page-my-report-form #sendConfirmModal .modal-footer button, body.page-my-report-form #sendPendingModal .modal-footer button { padding: 0 10px; font-size: 13px; } body.page-my-report-form .report-send-modal-preview { max-height: 220px; } .report-create-edit input[type='time'] { max-width: 100%; } } @media (min-width: 1400px) { body.page-my-report-form .report-create-edit-layout { max-width: 1400px; } body.page-my-report-form .report-create-edit-columns { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 24px; align-items: start; } body.page-my-report-form .report-create-edit-layout .report-email-preview { margin-top: 0; } body.page-my-report-form .email-input-group input.email-autocomplete { flex: 1 1 220px; width: auto; min-width: 0; max-width: 100%; } body.page-my-report-form .recipient-dedicated-label { flex: 0 0 auto; } } /* Extreme widths (≤350px): keep all labels readable and never let a horizontal scrollbar appear inside the form card. */ @media (max-width: 350px) { body.page-my-report-form .report-form-toolbar .btn { font-size: 12px; padding: 0 6px; } body.page-my-report-form .report-name-macros-hint { font-size: 10.5px; } } /* ========================================================================== Send log page (report sending logs) Desktop (>1400px) unchanged. ≤1400px: horizontal-scroll table only. ========================================================================== */ @media (max-width: 1400px) { body.page-report-sending-logs .main { position: relative; padding-left: 16px; padding-right: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } body.page-report-sending-logs .report-sending-logs-list { margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } body.page-report-sending-logs .report-sending-logs-list h1 { margin-top: 20px; margin-bottom: 8px; } /* * Horizontal scroll: wrapper width is pinned to the viewport so it stays * a real overflow boundary; the table min-width drives the scroll width. */ body.page-report-sending-logs .report-sending-logs-table-wrap { display: block; width: calc(100vw - 32px); max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background-color: #fff; } body.page-report-sending-logs .report-sending-logs-table { width: 100%; min-width: 1000px; max-width: none; margin: 0; table-layout: auto; font-size: 14px; } /* Drop fixed desktop column widths so min-width drives sizing */ body.page-report-sending-logs .header-logs-date, body.page-report-sending-logs .header-logs-jiras, body.page-report-sending-logs .header-logs-filters, body.page-report-sending-logs .header-logs-reports { width: auto; } body.page-report-sending-logs .report-sending-logs-table th { white-space: nowrap; vertical-align: top; } body.page-report-sending-logs .report-sending-logs-table tbody td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } } @media (max-width: 1023px) { body.page-report-sending-logs .report-sending-logs-list h1 { margin-top: 16px; } body.page-report-sending-logs .report-sending-logs-table { font-size: 13px; } body.page-report-sending-logs .report-sending-logs-table th, body.page-report-sending-logs .report-sending-logs-table td { padding: 6px 8px; } } @media (max-width: 767px) { body.page-report-sending-logs .main { padding-left: 12px; padding-right: 12px; } body.page-report-sending-logs .report-sending-logs-list h1 { margin-top: 14px; margin-bottom: 8px; font-size: 22px; } body.page-report-sending-logs .report-sending-logs-table-wrap { width: calc(100vw - 24px); } body.page-report-sending-logs .report-sending-logs-table { min-width: 1000px; } } @media (max-width: 479px) { body.page-report-sending-logs .main { padding-left: 10px; padding-right: 10px; } body.page-report-sending-logs .report-sending-logs-list h1 { margin-top: 12px; font-size: 20px; } body.page-report-sending-logs .report-sending-logs-table-wrap { width: calc(100vw - 20px); } body.page-report-sending-logs .report-sending-logs-table { min-width: 1000px; font-size: 12px; } body.page-report-sending-logs .report-sending-logs-table th, body.page-report-sending-logs .report-sending-logs-table td { padding: 5px 6px; } } /* ========================================================================== Manage Jiras page (jiras index) Desktop (>1400px) unchanged. ≤1400px: horizontal-scroll table + modal. ========================================================================== */ /* Icon halves hidden on desktop so buttons look unchanged at >1400px. */ body.page-jiras .jiras-action-btn-icon { display: none; } @media (max-width: 1400px) { body.page-jiras .main { position: relative; padding-left: 16px; padding-right: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } body.page-jiras .jiras-list { margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } body.page-jiras .jiras-list h1 { margin-top: 20px; margin-bottom: 8px; } body.page-jiras .jiras-toolbar { margin-top: 0; margin-bottom: 8px; } body.page-jiras .jiras-toolbar .add-jira-button { margin-bottom: 0; } body.page-jiras .jiras-table-wrap { display: block; width: calc(100vw - 32px); max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background-color: #fff; } body.page-jiras .jiras-table-manage { width: 100%; min-width: 640px; max-width: none; margin: 0; table-layout: auto; font-size: 14px; } body.page-jiras .header-jiras-edit, body.page-jiras .header-jiras-delete { width: auto; } body.page-jiras .jiras-table-manage th { white-space: nowrap; vertical-align: top; } body.page-jiras .jiras-table-manage tbody td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } body.page-jiras .jiras-table-manage .delete-cell { max-width: none; text-align: center; white-space: nowrap; } body.page-jiras .jiras-table-manage .delete-cell .btn, body.page-jiras .jiras-table-manage td .btn.btn-primary { white-space: nowrap; } /* Delete confirmation modal */ body.page-jiras #deleteModal { align-items: center; justify-content: center; padding: 16px; overflow-y: auto; z-index: 1200; } body.page-jiras #deleteModal .modal-content { width: calc(100vw - 32px); max-width: 560px; max-height: calc(100vh - 32px); margin: auto; padding: 16px; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left; flex-shrink: 0; } body.page-jiras #deleteModal .modal-header h3 { font-size: 18px; line-height: 1.3; text-align: left; } body.page-jiras #deleteModal .modal-body { margin-top: 12px; max-height: calc(100vh - 240px); overflow-y: auto; -webkit-overflow-scrolling: touch; } body.page-jiras #deleteModal .modal-footer { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; } body.page-jiras #deleteModal .modal-btns-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; width: 100%; max-width: 100%; } body.page-jiras #deleteModal .modal-footer button { flex: 1 1 0; min-width: 120px; max-width: 180px; width: auto; height: 29px; margin-right: 0; padding: 0 14px; font-size: 14px; line-height: 27px; } body.page-jiras #deleteModal .modal-footer .btn-danger { margin-right: 0; } } @media (max-width: 1023px) { body.page-jiras .jiras-list h1 { margin-top: 16px; } body.page-jiras .jiras-table-manage { font-size: 13px; } body.page-jiras .jiras-table-manage th, body.page-jiras .jiras-table-manage td { padding: 6px 8px; } } @media (max-width: 767px) { body.page-jiras .main { padding-left: 12px; padding-right: 12px; } body.page-jiras .jiras-list h1 { margin-top: 14px; font-size: 22px; } body.page-jiras .jiras-table-wrap { width: calc(100vw - 24px); } body.page-jiras .jiras-table-manage { min-width: 380px; } /* Icon-only Edit / Delete so action columns stay narrow */ body.page-jiras .cell-jiras-edit, body.page-jiras .cell-jiras-delete { padding-left: 4px; padding-right: 4px; text-align: center; } body.page-jiras .jiras-edit-btn, body.page-jiras .jiras-delete-btn { width: 32px; min-width: 32px; height: 27px; max-height: 27px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; } body.page-jiras .jiras-action-btn-text { display: none; } body.page-jiras .jiras-action-btn-icon { display: inline-flex; align-items: center; justify-content: center; } body.page-jiras #deleteModal { padding: 12px; } body.page-jiras #deleteModal .modal-content { width: calc(100vw - 24px); padding: 14px; } body.page-jiras #deleteModal .modal-footer button { flex: 1 1 100%; min-width: 0; max-width: 100%; } } @media (max-width: 479px) { body.page-jiras .main { padding-left: 10px; padding-right: 10px; } body.page-jiras .jiras-list h1 { margin-top: 12px; font-size: 20px; } body.page-jiras .jiras-table-wrap { width: calc(100vw - 20px); } body.page-jiras .jiras-table-manage { min-width: 400px; font-size: 12px; } body.page-jiras .jiras-table-manage th, body.page-jiras .jiras-table-manage td { padding: 5px 6px; } body.page-jiras .jiras-edit-btn, body.page-jiras .jiras-delete-btn { width: 30px; min-width: 30px; } body.page-jiras #deleteModal .modal-content { width: calc(100vw - 20px); padding: 12px; } } /* ========================================================================== Manage Jiras — create / edit form Desktop (>1400px) unchanged. ========================================================================== */ @media (max-width: 1400px) { body.page-jiras-form .main { padding-left: 16px; padding-right: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } body.page-jiras-form .form-container { width: 100%; max-width: 500px; margin: 24px auto; padding: 20px 16px; box-sizing: border-box; } body.page-jiras-form .form-container h1 { margin-top: 0; margin-bottom: 16px; font-size: 24px; line-height: 1.25; } body.page-jiras-form .form-group input, body.page-jiras-form .form-group select { font-size: 16px; /* prevents iOS zoom on focus */ } body.page-jiras-form .form-container .btn.btn-primary { width: 100%; max-width: 100%; height: 34px; font-size: 15px; } body.page-jiras-form .validation-errors { margin-top: 12px; font-size: 13px; } } @media (max-width: 767px) { body.page-jiras-form .main { padding-left: 12px; padding-right: 12px; } body.page-jiras-form .form-container { margin: 20px auto; padding: 18px 14px; } body.page-jiras-form .form-container h1 { font-size: 22px; } } @media (max-width: 479px) { body.page-jiras-form .main { padding-left: 10px; padding-right: 10px; } body.page-jiras-form .form-container { margin: 16px auto; padding: 16px 12px; border-radius: 6px; } body.page-jiras-form .form-container h1 { font-size: 20px; margin-bottom: 14px; } body.page-jiras-form .form-group { margin-bottom: 12px; } body.page-jiras-form .form-group label { font-size: 14px; } } /* ========================================================================== Admin zone Desktop (>1400px): original header and page layout are preserved. All compact-header and table tweaks apply only at max-width: 1400px. ========================================================================== */ /* Mobile-only header pieces are not in the document flow on desktop */ body.body-admin .admin-navbar-toggle, body.body-admin .admin-navbar-mobile, body.body-admin .admin-navbar-backdrop, body.body-admin .admin-nav-user-slot { display: none; } /* Lock desktop admin header to the pre-adaptive layout above 1400px */ @media (min-width: 1401px) { body.body-admin .admin-navbar-toggle, body.body-admin .admin-navbar-mobile, body.body-admin .admin-navbar-backdrop, body.body-admin .admin-nav-user-slot { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; pointer-events: none !important; } body.body-admin .admin-nav-links--desktop { display: flex; flex: 0 0 auto; } body.body-admin .admin-nav-user--desktop { display: flex !important; margin-left: auto; } body.body-admin.navbar-menu-open { overflow: visible; } body.body-admin .navbar.navbar--menu-open ~ .admin-navbar-backdrop { opacity: 0; visibility: hidden; pointer-events: none; } } @media (max-width: 1400px) { /* Hide desktop header row; show compact burger + drawer + user slot */ body.body-admin .admin-nav-links--desktop, body.body-admin .admin-nav-user--desktop { display: none !important; } body.body-admin .admin-navbar-toggle { display: inline-flex; order: 1; flex: 0 0 40px; } body.body-admin .admin-navbar-mobile { display: block; } body.body-admin .navbar { position: relative; flex-wrap: nowrap; align-items: center; gap: 10px 12px; padding: 10px 16px 10px 12px; font-size: 15px; } body.body-admin .admin-navbar-mobile .navbar-side-left { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; flex: none; } body.body-admin .admin-navbar-mobile .navbar-drawer-header { display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid #e9ecef; } body.body-admin .admin-navbar-mobile .navbar-nav-panel { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1100; width: min(300px, calc(100vw - 48px)); padding: 16px; padding-top: max(16px, env(safe-area-inset-top, 0px)); background-color: #fff; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.14); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s ease; } body.body-admin .navbar.navbar--menu-open .admin-navbar-mobile .navbar-nav-panel { transform: translateX(0); visibility: visible; } body.body-admin .admin-navbar-mobile .navbar-drawer-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } body.body-admin .admin-navbar-mobile .admin-nav-links--drawer { display: flex; flex-direction: column; gap: 0; width: 100%; } body.body-admin .admin-navbar-mobile .admin-nav-links--drawer a, body.body-admin .admin-navbar-mobile .nav-drawer-link, body.body-admin .admin-navbar-mobile .navbar-drawer-user-toggle { display: block; margin-right: 0; padding: 12px 14px; border-radius: 0; border-bottom: 1px solid #e9ecef; font-size: 16px; line-height: 1.3; color: #343a40; text-decoration: none; text-align: left; box-sizing: border-box; } body.body-admin .admin-navbar-mobile .admin-nav-links--drawer a:hover, body.body-admin .admin-navbar-mobile .admin-nav-links--drawer a.active, body.body-admin .admin-navbar-mobile .nav-drawer-link:hover, body.body-admin .admin-navbar-mobile .navbar-drawer-user-toggle:hover { background-color: #eef2f6; } /* User block in the header center (instead of Jira select on the main app) */ body.body-admin .admin-nav-user-slot { display: flex; order: 2; flex: 1 1 auto; justify-content: flex-end; align-items: center; min-width: 0; margin-left: auto; } body.body-admin .admin-nav-user-slot .admin-nav-user--compact { display: flex; align-items: center; cursor: pointer; margin-left: 0; } body.body-admin .admin-nav-user-slot .admin-nav-user--compact span { max-width: min(280px, 42vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; font-size: 16px; color: #343a40; } body.body-admin .navbar .dropdown-menu { right: 16px; top: 100%; margin-top: 4px; } body.body-admin .admin-navbar-mobile .navbar-drawer-account { display: none; } } /* Drawer account block at ≤849px (user moves from header into drawer) */ @media (max-width: 849px) { body.body-admin .admin-navbar-mobile .navbar-drawer-account { display: block; } body.body-admin .admin-nav-user-slot { display: none !important; } body.body-admin .navbar .dropdown-menu#userMenu { display: none !important; } body.body-admin .admin-navbar-mobile .navbar-drawer-user { display: block; } body.body-admin .admin-navbar-mobile .navbar-drawer-user-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 12px 14px; border: none; border-bottom: 1px solid #e9ecef; border-radius: 0; background: transparent; color: #343a40; font-size: 16px; line-height: 1.3; cursor: pointer; text-align: left; } body.body-admin .admin-navbar-mobile .navbar-drawer-user-email { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; } body.body-admin .admin-navbar-mobile .navbar-drawer-user-menu { display: none; flex-direction: column; background-color: #f8f9fa; border-bottom: 1px solid #e9ecef; } body.body-admin .admin-navbar-mobile .navbar-drawer-user-menu:not([hidden]) { display: flex; } body.body-admin .admin-navbar-mobile .navbar-drawer-user-menu a { display: block; padding: 10px 14px 10px 28px; border-bottom: 1px solid #e9ecef; color: #007bff; font-size: 15px; line-height: 1.3; text-decoration: none; } } @media (max-width: 767px) { body.body-admin .navbar { gap: 8px; padding: 8px 12px 8px 8px; font-size: 14px; } body.body-admin .admin-navbar-toggle { flex: 0 0 36px; width: 36px; height: 36px; font-size: 16px; } body.body-admin .admin-nav-user-slot .admin-nav-user--compact span { max-width: 42vw; font-size: 14px; } } /* ========================================================================== Admin — Users page (listing only; desktop table unchanged above 1401px) ========================================================================== */ body.page-admin-users .users-action-btn-icon { display: none; } /* * Admin user form: app.css sets .form-group input { width: 100% } — radios must * stay auto-width so labels sit beside them (especially on iOS). */ body.page-admin-users-form .form-group input[type="radio"] { width: auto; min-width: 0; max-width: none; padding: 0; margin-top: 0; margin-right: 6px; margin-left: 0; flex: 0 0 auto; } body.page-admin-users-form .radio-group { display: flex; flex-wrap: wrap; align-items: center; margin-top: 10px; margin-bottom: 25px; } body.page-admin-users-form .radio-block { display: inline-flex; align-items: center; margin-right: 18px; } body.page-admin-users-form .radio-block label { display: inline; margin-bottom: 0; font-weight: normal; cursor: pointer; } @media (max-width: 1400px) { body.page-admin-users .main { position: relative; padding-left: 16px; padding-right: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } body.page-admin-users .users-list { margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } body.page-admin-users .users-list h1 { margin-top: 20px; margin-bottom: 8px; } body.page-admin-users .users-toolbar { margin-top: 0; margin-bottom: 8px; } body.page-admin-users .users-table-wrap { display: block; width: calc(100vw - 32px); max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background-color: #fff; } body.page-admin-users .users-table { width: 100%; min-width: 1100px; max-width: none; margin: 0; table-layout: auto; font-size: 14px; } body.page-admin-users .header-users-name, body.page-admin-users .header-users-email, body.page-admin-users .header-users-admin, body.page-admin-users .header-users-status, body.page-admin-users .header-users-logs, body.page-admin-users .header-users-edit, body.page-admin-users .header-users-delete { width: auto; } body.page-admin-users .users-table th { white-space: nowrap; vertical-align: middle; } body.page-admin-users .users-table tbody td { vertical-align: middle; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } body.page-admin-users .users-table .text-align-center, body.page-admin-users .users-table .delete-cell { max-width: none; text-align: center; white-space: nowrap; } } @media (max-width: 1023px) { body.page-admin-users .users-list h1 { margin-top: 16px; } body.page-admin-users .users-table { font-size: 13px; } body.page-admin-users .users-table th, body.page-admin-users .users-table td { padding: 6px 8px; } } @media (max-width: 767px) { body.page-admin-users .main { padding-left: 12px; padding-right: 12px; } body.page-admin-users .users-list h1 { margin-top: 14px; font-size: 22px; } body.page-admin-users .users-table-wrap { width: calc(100vw - 24px); } body.page-admin-users .users-table { min-width: 620px; } body.page-admin-users .cell-users-logs, body.page-admin-users .cell-users-edit, body.page-admin-users .cell-users-delete { padding-left: 4px; padding-right: 4px; } body.page-admin-users .users-view-log-btn, body.page-admin-users .users-edit-btn, body.page-admin-users .users-delete-btn { width: 32px; min-width: 32px; height: 27px; max-height: 27px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; } body.page-admin-users .users-action-btn-text { display: none; } body.page-admin-users .users-action-btn-icon { display: inline-flex; align-items: center; justify-content: center; } } @media (max-width: 479px) { body.page-admin-users .main { padding-left: 10px; padding-right: 10px; } body.page-admin-users .users-list h1 { margin-top: 12px; font-size: 20px; } body.page-admin-users .users-table-wrap { width: calc(100vw - 20px); } body.page-admin-users .users-table { min-width: 560px; font-size: 12px; } body.page-admin-users .users-table th, body.page-admin-users .users-table td { padding: 5px 6px; } body.page-admin-users .users-view-log-btn, body.page-admin-users .users-edit-btn, body.page-admin-users .users-delete-btn { width: 30px; min-width: 30px; } } @media (max-width: 1400px) { body.page-admin-users-form .main { padding-left: 16px; padding-right: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } body.page-admin-users-form .form-container { width: 100%; max-width: 500px; margin: 24px auto; padding: 20px 16px; box-sizing: border-box; } body.page-admin-users-form .form-container h1 { margin-top: 0; margin-bottom: 16px; font-size: 24px; line-height: 1.25; } body.page-admin-users-form .form-group input:not([type="radio"]), body.page-admin-users-form .form-group select { font-size: 16px; } body.page-admin-users-form .form-container .btn.btn-primary { width: 100%; max-width: 100%; height: 34px; font-size: 15px; } } @media (max-width: 767px) { body.page-admin-users-form .main { padding-left: 12px; padding-right: 12px; } body.page-admin-users-form .form-container { margin: 20px auto; padding: 18px 14px; } body.page-admin-users-form .form-container h1 { font-size: 22px; } } @media (max-width: 479px) { body.page-admin-users-form .main { padding-left: 10px; padding-right: 10px; } body.page-admin-users-form .form-container { margin: 16px auto; padding: 16px 12px; } body.page-admin-users-form .form-container h1 { font-size: 20px; } } /* ========================================================================== Admin — User / sign-in logs tables Desktop (>1400px) unchanged. ≤1400px: horizontal-scroll table. ========================================================================== */ @media (max-width: 1400px) { body.page-admin-logs .main { position: relative; padding-left: 16px; padding-right: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } body.page-admin-logs .users-logs-list { margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } body.page-admin-logs .users-logs-list h1 { margin-top: 20px; margin-bottom: 8px; } body.page-admin-logs .users-logs-table-wrap { display: block; width: calc(100vw - 32px); max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background-color: #fff; } body.page-admin-logs .users-logs-table { width: 100%; min-width: 920px; max-width: none; margin: 0; table-layout: auto; font-size: 14px; } body.page-admin-logs .header-logs-geolocation { width: auto; } body.page-admin-logs .users-logs-table th { white-space: nowrap; vertical-align: middle; } body.page-admin-logs .users-logs-table tbody td { vertical-align: middle; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } } @media (max-width: 1023px) { body.page-admin-logs .users-logs-list h1 { margin-top: 16px; } body.page-admin-logs .users-logs-table { font-size: 13px; } body.page-admin-logs .users-logs-table th, body.page-admin-logs .users-logs-table td { padding: 6px 8px; } } @media (max-width: 767px) { body.page-admin-logs .main { padding-left: 12px; padding-right: 12px; } body.page-admin-logs .users-logs-list h1 { margin-top: 14px; font-size: 22px; } body.page-admin-logs .users-logs-table-wrap { width: calc(100vw - 24px); } body.page-admin-logs .users-logs-table { min-width: 800px; table-layout: fixed; } /* Mobile column proportions: narrower Action, wider User and IP */ body.page-admin-logs .users-logs-table .header-logs-user, body.page-admin-logs .users-logs-table tbody td:nth-child(1) { width: 22%; min-width: 128px; } body.page-admin-logs .users-logs-table .header-logs-action, body.page-admin-logs .users-logs-table tbody td:nth-child(2) { width: 20%; min-width: 62px; max-width: 78px; } body.page-admin-logs .users-logs-table .header-logs-ip, body.page-admin-logs .users-logs-table tbody td:nth-child(3) { width: 15%; min-width: 118px; } body.page-admin-logs .users-logs-table .header-logs-geolocation, body.page-admin-logs .users-logs-table tbody td:nth-child(4) { width: 25%; min-width: 200px; } body.page-admin-logs .users-logs-table .header-logs-datetime, body.page-admin-logs .users-logs-table tbody td:nth-child(5) { width: 17%; min-width: 132px; } body.page-admin-logs .users-logs-table tbody td:nth-child(2) { font-size: 12px; line-height: 1.25; } } @media (max-width: 479px) { body.page-admin-logs .main { padding-left: 10px; padding-right: 10px; } body.page-admin-logs .users-logs-list h1 { margin-top: 12px; font-size: 20px; } body.page-admin-logs .users-logs-table-wrap { width: calc(100vw - 20px); } body.page-admin-logs .users-logs-table { min-width: 720px; font-size: 12px; } body.page-admin-logs .users-logs-table .header-logs-user, body.page-admin-logs .users-logs-table tbody td:nth-child(1) { min-width: 118px; } body.page-admin-logs .users-logs-table .header-logs-action, body.page-admin-logs .users-logs-table tbody td:nth-child(2) { min-width: 56px; max-width: 68px; } body.page-admin-logs .users-logs-table .header-logs-ip, body.page-admin-logs .users-logs-table tbody td:nth-child(3) { min-width: 108px; } body.page-admin-logs .users-logs-table tbody td:nth-child(2) { font-size: 11px; } body.page-admin-logs .users-logs-table th, body.page-admin-logs .users-logs-table td { padding: 5px 6px; } } /* ========================================================================== Admin — SMTP settings (two-column form) Desktop (>1400px) unchanged. ≤1400px: stacked cards, fluid fields. ========================================================================== */ @media (max-width: 1400px) { body.page-admin-smtp .main { padding-left: 16px; padding-right: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } body.page-admin-smtp .form-two-cols { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } body.page-admin-smtp .form-two-cols .form-left, body.page-admin-smtp .form-two-cols .form-right { width: 100%; max-width: 500px; } body.page-admin-smtp .form-two-cols .form-container { width: 100%; max-width: 500px; margin: 0 auto; padding: 20px 16px; box-sizing: border-box; } body.page-admin-smtp .form-two-cols .form-container.form-left { margin-right: auto; height: auto; margin-top: 20px; } body.page-admin-smtp .form-two-cols .form-container.form-right { margin-left: auto; height: auto; } body.page-admin-smtp .form-two-cols h2 { margin-top: 0; margin-bottom: 16px; font-size: 22px; line-height: 1.25; } body.page-admin-smtp .form-two-cols .msg-success, body.page-admin-smtp .form-two-cols .msg-error { overflow-wrap: anywhere; word-break: break-word; } body.page-admin-smtp .form-two-cols .form-group input, body.page-admin-smtp .form-two-cols .form-group select { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 16px; } body.page-admin-smtp .form-two-cols .btn.btn-primary { width: 100%; max-width: 100%; height: 29px; font-size: 15px; } } @media (max-width: 767px) { body.page-admin-smtp .main { padding-left: 12px; padding-right: 12px; } body.page-admin-smtp .form-two-cols { gap: 16px; } body.page-admin-smtp .form-two-cols .form-container { padding: 18px 14px; } body.page-admin-smtp .form-two-cols h2 { font-size: 20px; margin-bottom: 14px; } } @media (max-width: 479px) { body.page-admin-smtp .main { padding-left: 10px; padding-right: 10px; } body.page-admin-smtp .form-two-cols .form-container { padding: 16px 12px; border-radius: 6px; } body.page-admin-smtp .form-two-cols h2 { font-size: 18px; } body.page-admin-smtp .form-two-cols .form-group { margin-bottom: 12px; } body.page-admin-smtp .form-two-cols .form-group label { font-size: 14px; } } /* ========================================================================== Admin — Captcha settings (single form card) Desktop (>1400px) unchanged. ≤1400px: fluid form card. ========================================================================== */ @media (max-width: 1400px) { body.page-admin-captcha .main { padding-left: 16px; padding-right: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } body.page-admin-captcha .form-container { width: 100%; max-width: 500px; margin: 24px auto; padding: 20px 16px; box-sizing: border-box; } body.page-admin-captcha .form-container h1 { margin-top: 0; margin-bottom: 16px; font-size: 24px; line-height: 1.25; } body.page-admin-captcha .form-container .msg-success, body.page-admin-captcha .form-container .msg-error { overflow-wrap: anywhere; word-break: break-word; } body.page-admin-captcha .form-group input, body.page-admin-captcha .form-group select { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 16px; } body.page-admin-captcha .form-container .btn.btn-primary { width: 100%; max-width: 100%; height: 34px; font-size: 15px; } } @media (max-width: 767px) { body.page-admin-captcha .main { padding-left: 12px; padding-right: 12px; } body.page-admin-captcha .form-container { margin: 20px auto; padding: 18px 14px; } body.page-admin-captcha .form-container h1 { font-size: 22px; } } @media (max-width: 479px) { body.page-admin-captcha .main { padding-left: 10px; padding-right: 10px; } body.page-admin-captcha .form-container { margin: 16px auto; padding: 16px 12px; border-radius: 6px; } body.page-admin-captcha .form-container h1 { font-size: 20px; margin-bottom: 14px; } body.page-admin-captcha .form-group { margin-bottom: 12px; } body.page-admin-captcha .form-group label { font-size: 14px; } } @media (max-width: 1400px) { #filter-form #date_from, #filter-form #date_to { max-width: 100%; } }