/** * portal-styles.css * Modern visual layer for the Interject Customer Portal (Report Subscriptions). * Load after portal.css. Opt in per page with class "portal-modern" on . * * TABLE OF CONTENTS * ----------------- * 1. Design tokens * 2. Global layout * 3. Sidebar (icon rail) * 4. Page title row & toolbar controls * - Search inputs (pill) * - Report filter dropdown (My Reports / All Reports) * - Refresh button * - Show paused subscriptions toggle * 5. Subscriptions list table * - Grid columns & headers * - Row cells (name, schedule, dates, result, status, email) * - Status badges & two-line datetime * 6. Row action buttons & More menu * 7. Paging * 8. Report Subscription detail page * - Summary status bar * - Validation messages * - Two-column config (Details & Schedule) * - Form fields & schedule pickers * - Report Parameters table * - Activity log (hidden) * 9. Modals (confirm delete, edit parameter) * 10. Responsive */ /* ================================================================== */ /* 1. Design tokens */ /* ================================================================== */ body.portal-modern { --portal-navy: #1e2b4d; --portal-navy-light: #2a3f6b; --portal-sidebar-active: #3d6a99; --portal-workspace-bg: #f4f5f7; --portal-surface: #ffffff; --portal-table-header-bg: #f8f7f7; --portal-border: #e8ecef; --portal-border-input: #d8dee4; --portal-text: #333333; --portal-text-heading: #0d2338; --portal-text-body: #4a5568; --portal-text-muted: #777777; --portal-text-subtle: #9b9b9b; --portal-link: #337ab7; --portal-link-hover: #2a6496; --portal-teal: #35c8b5; --portal-teal-dark: #2db3a1; --portal-success: #2ecc71; --portal-success-bg: #27ae60; --portal-danger: #e74c3c; --portal-danger-bg: #c0392b; --portal-btn-secondary-border: #b8d4e8; --portal-btn-secondary-text: #358ed7; --portal-btn-more-bg: #5a6268; --portal-btn-more-hover: #4a5158; --portal-radius-sm: 4px; --portal-radius-md: 8px; --portal-radius-pill: 999px; --portal-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06); --portal-font: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ================================================================== */ /* 2. Global layout */ /* ================================================================== */ body.portal-modern { font-family: var(--portal-font); background-color: var(--portal-workspace-bg); } body.portal-modern #page-wrapper { background-color: var(--portal-workspace-bg); } body.portal-modern .page-content { padding: 16px 20px 24px; color: var(--portal-text); font-family: var(--portal-font); max-height: none; min-height: auto; overflow: visible; } body.portal-modern .portal-card { background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: var(--portal-radius-md); box-shadow: var(--portal-shadow-card); overflow: visible; } body.portal-modern .portal-card__body { padding: 0 0 16px; overflow: visible; } body.portal-modern .page-list-header { height: auto; margin: 4px 0 0; padding-left: 0; color: var(--portal-text-muted); font-size: 12px; font-weight: 400; } body.portal-modern .portal-card > .portal-card__header { padding: 22px 24px 18px; border-bottom: 1px solid var(--portal-border); background: var(--portal-surface); border-radius: var(--portal-radius-md) var(--portal-radius-md) 0 0; box-shadow: none !important; } body.portal-modern .portal-card > .portal-card__header .portal-card-controls { padding-right: 0; } body.portal-modern .portal-card > .portal-card__header.page-title-row { border-bottom: 1px solid var(--portal-border); } /* ================================================================== */ /* 3. Sidebar (icon rail) */ /* ================================================================== */ body.portal-modern.left-side-collapsed #sidebar, body.portal-modern.left-side-collapsed .navbar-static-side, body.portal-modern.left-side-collapsed .navbar-static-side ul li { background: var(--portal-navy) !important; } body.portal-modern.left-side-collapsed .navbar-static-side { width: 70px !important; } body.portal-modern.left-side-collapsed #page-wrapper { margin-left: 70px !important; } body.portal-modern.left-side-collapsed .navbar-static-side ul#side-menu li a { padding: 16px 0 !important; text-align: center; border-left: none !important; color: rgba(255, 255, 255, 0.72); } body.portal-modern.left-side-collapsed .navbar-static-side ul#side-menu li a i.fa { font-size: 20px !important; line-height: 1; margin: 0; float: none; display: inline-block; } body.portal-modern.left-side-collapsed .navbar-static-side ul#side-menu li a span.menu-title, body.portal-modern.left-side-collapsed .navbar-static-side ul#side-menu li a span { display: none !important; } body.portal-modern.left-side-collapsed ul.sub-menu, body.portal-modern.left-side-collapsed .navbar-static-side ul#side-menu li ul.nav-second-level { display: none !important; } body.portal-modern.left-side-collapsed .navbar-static-side ul#side-menu li.active a, body.portal-modern.left-side-collapsed .navbar-static-side ul#side-menu li.active a:hover { background-color: var(--portal-sidebar-active) !important; color: #ffffff !important; border-radius: 0; margin: 0; } body.portal-modern.left-side-collapsed .navbar-static-side ul#side-menu li a:hover, body.portal-modern.left-side-collapsed .navbar-static-side ul#side-menu li a:focus { background-color: var(--portal-navy-light) !important; color: #ffffff !important; } body.portal-modern #versions { display: none; } /* ================================================================== */ /* 4. Page title row & toolbar controls */ /* ================================================================== */ body.portal-modern .page-header-left { display: flex; flex-direction: row; align-items: center; gap: 14px; } body.portal-modern .page-title-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #111827; line-height: 1; } body.portal-modern .page-title-icon__svg { display: block; width: 34px; height: 34px; } body.portal-modern .page-title-row .page-title { font-size: 22px; font-weight: 700; color: #111827 !important; margin: 0; height: auto; line-height: 1.25; display: block; } body.portal-modern .page-title-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; } body.portal-modern .page-title-row .page-subtitle, body.portal-modern .portal-card__header .page-subtitle { color: var(--portal-text-muted); font-size: 13px; font-weight: 400; margin: 0; line-height: 1.4; } /* --- Search inputs (pill) --- */ body.portal-modern .search-input-group--pill { position: relative; display: block; width: 100%; margin-top: 6px; margin-bottom: 6px; } body.portal-modern .search-input-group--pill .search-input-group__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 14px; line-height: 1; pointer-events: none; z-index: 2; } body.portal-modern .search-input-group--pill .search-input-group__icon--clickable { pointer-events: auto; cursor: pointer; transition: color 0.15s ease; } body.portal-modern .search-input-group--pill .search-input-group__icon--clickable:hover { color: #000000; } body.portal-modern .search-input-group--pill .form-control { width: 100%; height: 38px; padding: 8px 16px 8px 40px; border: 1px solid #c5cdd6; border-radius: 999px !important; background-color: #ffffff; box-shadow: none; color: var(--portal-text); font-family: var(--portal-font); font-size: 14px; font-weight: 400; line-height: 1.4; } body.portal-modern .search-input-group--pill .form-control:focus { border-color: #9ca3af; box-shadow: none; outline: none; } body.portal-modern .search-input-group--pill .form-control::placeholder { color: #9ca3af; opacity: 1; } body.portal-modern .search-input-group select.form-control { border-radius: var(--portal-radius-sm) !important; border: 1px solid var(--portal-border-input); height: 36px; } body.portal-modern .portal-card-search { flex: 1 1 0; min-width: 120px; max-width: 280px; margin-left: 0; margin-top: 0; margin-bottom: 0; } body.portal-modern .portal-card-search-group { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; } body.portal-modern .portal-card-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 0; margin-bottom: 0; } body.portal-modern .portal-card-controls .portal-toggle-label { flex-shrink: 0; } body.portal-modern .portal-card-controls .portal-report-filter { flex-shrink: 0; } body.portal-modern .portal-card-controls .portal-toggle-label { margin-top: 0; } /* --- Report filter dropdown (My Reports / All Reports) --- */ body.portal-modern .portal-report-filter { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; } body.portal-modern .btn-portal-filter { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid #c5cdd6; border-radius: var(--portal-radius-sm); background-color: var(--portal-surface); color: var(--portal-navy); font-family: var(--portal-font); font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } body.portal-modern .btn-portal-filter:hover { border-color: #9ca3af; background-color: #f9fafb; } body.portal-modern .btn-portal-filter:focus, body.portal-modern .portal-report-filter.open .btn-portal-filter { border-color: var(--portal-btn-secondary-text); box-shadow: 0 0 0 2px rgba(53, 142, 215, 0.12); outline: none; } body.portal-modern .btn-portal-filter__icon { font-size: 14px; color: #9ca3af; } body.portal-modern .btn-portal-filter__text { flex: 1 1 auto; } body.portal-modern .btn-portal-filter__caret { font-size: 12px; color: #6b7280; margin-left: 2px; } body.portal-modern .btn-portal-filter:hover .btn-portal-filter__icon, body.portal-modern .portal-report-filter.open .btn-portal-filter__icon { color: var(--portal-navy); } /* --- Filter dropdown menu (reuses portal-more-menu) --- */ body.portal-modern .portal-report-filter__menu.dropdown-menu { left: auto; right: 0; min-width: 180px; } body.portal-modern .portal-report-filter__menu .portal-more-menu__icon { color: var(--portal-btn-secondary-text); } body.portal-modern .portal-report-filter__menu .portal-more-menu__check { flex-shrink: 0; margin-left: 8px; color: var(--portal-btn-secondary-text); font-size: 13px; } body.portal-modern .portal-report-filter__menu .portal-more-menu__link.is-active { color: var(--portal-navy) !important; font-weight: 600; } body.portal-modern .portal-report-filter__menu .portal-more-menu__link.is-active .portal-more-menu__icon { color: var(--portal-navy); } body.portal-modern .portal-card-controls .search-input-group--pill { margin-top: 0; margin-bottom: 0; } body.portal-modern .portal-card-controls .btn-portal-refresh { margin-top: 0; margin-bottom: 0; } /* --- Refresh button --- */ body.portal-modern .btn-portal-refresh { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 38px; padding: 0 12px; margin-top: 0; flex-shrink: 0; border: 1px solid #c5cdd6; border-radius: var(--portal-radius-md); background: var(--portal-surface); color: #4b5563; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } body.portal-modern .btn-portal-refresh .fa { font-size: 13px; color: #6b7280; } body.portal-modern .btn-portal-refresh__label { color: inherit; } body.portal-modern .btn-portal-refresh:hover, body.portal-modern .btn-portal-refresh:focus { border-color: #9ca3af; color: #4b5563; background-color: #f9fafb; outline: none; } body.portal-modern .btn-portal-refresh:hover .fa, body.portal-modern .btn-portal-refresh:focus .fa { color: #4b5563; } body.portal-modern .btn-portal-refresh:disabled { opacity: 0.55; cursor: not-allowed; } /* --- Refresh icon-only button (round, borderless) --- */ body.portal-modern .btn-portal-refresh--icon { width: 38px; height: 38px; padding: 0; gap: 0; flex-shrink: 0; border: none; border-radius: 50%; background: transparent; color: #6b7280; } body.portal-modern .btn-portal-refresh--icon .fa { font-size: 16px; color: #6b7280; margin: 0; } body.portal-modern .btn-portal-refresh--icon:hover, body.portal-modern .btn-portal-refresh--icon:focus { border: none; background: #f1f3f5; color: var(--portal-navy); } body.portal-modern .btn-portal-refresh--icon:hover .fa, body.portal-modern .btn-portal-refresh--icon:focus .fa { color: var(--portal-navy); } /* --- Show paused subscriptions toggle --- */ body.portal-modern .portal-toggle-label { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--portal-text); font-weight: 400; white-space: nowrap; } body.portal-modern .toggle { width: 44px; height: 24px; flex-shrink: 0; } body.portal-modern .toggle .slider { background-color: #c5cdd6; border-radius: var(--portal-radius-pill); } body.portal-modern .toggle .slider:before { height: 18px; width: 18px; left: 3px; bottom: 3px; } body.portal-modern .toggle input:checked + .slider { background-color: var(--portal-success-bg); } body.portal-modern .toggle input:checked + .slider:before { transform: translateX(20px); } /* ================================================================== */ /* 5. Subscriptions list table */ /* ================================================================== */ body.portal-modern .portal-subscriptions { /* Mockup widths (no Created By): Name 36% | middle ~9% | Actions 20% */ --portal-sub-grid: minmax(220px, 36fr) minmax(64px, 9fr) minmax(70px, 9fr) minmax(48px, 7fr) minmax(72px, 10fr) minmax(64px, 9fr) minmax(180px, 20fr); display: block; padding: 0 24px; font-family: var(--portal-font); } body.portal-modern .portal-card-search-group .portal-card-search { flex: 0 1 220px; width: auto; max-width: 220px; min-width: 130px; } body.portal-modern .portal-subscriptions--with-email { /* Mockup widths: Name 30% | middle ~8% | Created By 14% | Actions 17% */ --portal-sub-grid: minmax(220px, 30fr) minmax(64px, 8fr) minmax(70px, 8fr) minmax(48px, 6fr) minmax(72px, 9fr) minmax(64px, 8fr) minmax(120px, 14fr) minmax(180px, 17fr); } body.portal-modern .portal-subscriptions__body { display: block; background: var(--portal-surface); } body.portal-modern .portal-subscriptions__head, body.portal-modern .portal-subscriptions__row { display: grid; grid-template-columns: var(--portal-sub-grid); align-items: center; column-gap: 12px; } body.portal-modern .portal-subscriptions__head { margin: 0 -24px; padding: 0 24px; background-color: var(--portal-table-header-bg); border-bottom: 1px solid var(--portal-border); } body.portal-modern .portal-subscriptions__row { border-bottom: 1px solid var(--portal-border); } body.portal-modern .portal-subscriptions__body .portal-subscriptions__row:last-child { border-bottom: none; } body.portal-modern .portal-subscriptions__th { display: flex; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0; padding: 11px 0; background-color: transparent; color: var(--portal-text-heading); font-size: 12px; font-weight: 600; text-align: left; user-select: none; } body.portal-modern .portal-subscriptions__th--sortable { cursor: pointer; } body.portal-modern .portal-subscriptions__th--actions { justify-content: center; text-align: center; } body.portal-modern .portal-subscriptions__th--result, body.portal-modern .portal-subscriptions__th--next-due, body.portal-modern .portal-subscriptions__th--last-run, body.portal-modern .portal-subscriptions__th--email { justify-self: stretch; } /* --- Centered column headers (Last Run, Next Due) --- */ body.portal-modern .portal-subscriptions__th--last-run, body.portal-modern .portal-subscriptions__th--next-due { justify-content: center; text-align: center; } /* Created By header — left aligned to match cell content */ body.portal-modern .portal-subscriptions__th--email { justify-content: flex-start; text-align: left; } body.portal-modern .portal-subscriptions__th--result { justify-content: center; text-align: center; color: var(--portal-navy); font-weight: 600; font-size: 12px; } body.portal-modern .portal-subscriptions__th--status { justify-self: stretch; justify-content: center; text-align: center; } body.portal-modern .portal-subscriptions__th-label { color: var(--portal-navy); font-weight: 600; font-size: 12px; } body.portal-modern .portal-subscriptions__th-label.is-active-sort { color: var(--portal-navy-light); } body.portal-modern .portal-subscriptions__head .sort-icons { position: relative; width: 14px; height: 14px; flex-shrink: 0; margin: 0; } body.portal-modern .portal-subscriptions__head .sort-icons .icon-link { color: #b0b8c1; position: static; margin: 0; padding: 0; font-size: 12px; } body.portal-modern .portal-subscriptions__head .sort-icons .icon-overlay { color: var(--portal-link); position: absolute; top: 0; left: 0; font-size: 12px; } body.portal-modern .portal-subscriptions__cell { min-width: 0; overflow: hidden; padding: 11px 0; color: #1a1a1a; font-size: 14px; text-align: left; } body.portal-modern .portal-subscriptions__row:hover { background-color: #f9fafb; } body.portal-modern .portal-subscriptions__row.is-paused .subscription-name, body.portal-modern .portal-subscriptions__row.is-paused .subscription-name:hover, body.portal-modern .portal-subscriptions__row.is-paused .list-description, body.portal-modern .portal-subscriptions__row.is-paused .subscription-schedule, body.portal-modern .portal-subscriptions__row.is-paused .subscription-schedule:hover, body.portal-modern .portal-subscriptions__row.is-paused .datetime-two-line, body.portal-modern .portal-subscriptions__row.is-paused .datetime-two-line__date, body.portal-modern .portal-subscriptions__row.is-paused .datetime-two-line__time, body.portal-modern .portal-subscriptions__row.is-paused .portal-subscriptions__cell--email, body.portal-modern .portal-subscriptions__row.is-paused .portal-subscriptions__cell--result { color: #9ca3af; } body.portal-modern .portal-subscriptions__row.is-paused .portal-subscriptions__cell--result .result-icon--success { background-color: #c5cdd6; } body.portal-modern .portal-subscriptions__row.is-paused .portal-subscriptions__cell--result .result-icon--error { background-color: #c4a4a4; } body.portal-modern .portal-subscriptions__cell--name { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } body.portal-modern .portal-subscriptions__cell--schedule { display: flex; justify-content: flex-start; align-items: center; text-align: left; text-decoration: none; } body.portal-modern .portal-subscriptions__cell--last-run, body.portal-modern .portal-subscriptions__cell--next-due { display: flex; justify-content: center; align-items: center; text-align: center; } body.portal-modern .portal-subscriptions__cell--email { display: flex; justify-content: flex-start; align-items: center; text-align: left; } body.portal-modern .created-by-two-line { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; width: 100%; } body.portal-modern .created-by-two-line__name { color: #1a1a1a; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } body.portal-modern .created-by-two-line__user { color: #1a1a1a; font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } body.portal-modern .portal-subscriptions__cell--last-run .datetime-two-line, body.portal-modern .portal-subscriptions__cell--next-due .datetime-two-line { align-items: center; text-align: center; width: 100%; } body.portal-modern .portal-subscriptions__cell--status { display: flex; align-items: center; justify-content: center; width: 100%; } body.portal-modern .portal-subscriptions__cell--actions { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; } body.portal-modern .portal-action-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 6px; width: 100%; max-width: 100%; padding: 0; } body.portal-modern .portal-action-menu .btn-portal-action, body.portal-modern .portal-action-menu .portal-action-more { width: 100%; min-width: 0; } body.portal-modern .portal-action-menu .portal-action-more { display: flex; position: relative; } body.portal-modern .portal-action-menu .dropdown.portal-action-more { display: flex; } body.portal-modern .portal-subscriptions__cell--result { display: flex; align-items: center; justify-content: center; width: 100%; } body.portal-modern .result-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body.portal-modern .result-icon--success { width: 20px; height: 20px; border-radius: 50%; background-color: #34c759; color: #ffffff; font-size: 10px; } body.portal-modern .result-icon--success .fa { font-size: 10px; color: #ffffff; } body.portal-modern .result-icon--error { position: relative; width: 22px; height: 22px; background: transparent; color: #ffffff; font-size: 10px; cursor: pointer; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background-color: #e74c3c; } body.portal-modern .result-icon--error .fa { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; font-weight: 700; color: #ffffff; line-height: 1; pointer-events: none; } body.portal-modern .subscription-name { color: var(--portal-link); font-weight: 600; font-size: 14px; line-height: 1.35; text-decoration: none; } body.portal-modern .subscription-name:hover, body.portal-modern .subscription-name:focus { color: var(--portal-link-hover); text-decoration: underline; } body.portal-modern .list-description { font-size: 12px; font-weight: 400; margin: 0; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.portal-modern .list-description--primary { color: #1a1a1a; } body.portal-modern .list-description--secondary { color: #1a1a1a; } /* --- Repeated column --- */ body.portal-modern .subscription-schedule { color: #1a1a1a; font-weight: 400; font-size: 13px; text-decoration: none; } body.portal-modern .subscription-schedule:hover, body.portal-modern .subscription-schedule:focus { color: #1a1a1a; text-decoration: none; } /* --- Last Run / Next Due (two-line datetime) --- */ body.portal-modern .datetime-two-line { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; color: #1a1a1a; font-size: 13px; font-weight: 400; line-height: 1.3; text-align: left; } body.portal-modern .datetime-two-line__date { display: block; font-size: 13px; color: #1a1a1a; } body.portal-modern .datetime-two-line__time { display: block; font-size: 12px; color: #1a1a1a; } body.portal-modern .last-run-cell { display: flex; align-items: flex-start; gap: 6px; } body.portal-modern .last-run-error { color: var(--portal-danger); font-size: 16px; cursor: pointer; flex-shrink: 0; margin-top: 2px; } /* --- Status badges --- */ body.portal-modern .subscription-status { display: inline-block; min-width: 58px; padding: 3px 12px; border-radius: var(--portal-radius-pill); font-size: 11px; font-weight: 600; line-height: 1.35; text-align: center; white-space: nowrap; color: #ffffff; } body.portal-modern .subscription-status.is-active { background-color: #6ecfc8; } body.portal-modern .subscription-status.is-paused { background-color: #5f6b7a; } /* ================================================================== */ /* 6. Row action buttons & More menu */ /* ================================================================== */ body.portal-modern .portal-action-more { display: flex; position: relative; min-width: 0; } /* --- Disable legacy hover-open on action menu --- */ body.portal-modern .portal-action-menu:hover .dropdown-menu { display: none !important; } body.portal-modern .portal-action-more.open > .dropdown-menu { display: block; } body.portal-modern .portal-action-more.open { z-index: 2; } /* --- More menu overlay (appended to body while open) --- */ body.portal-modern .portal-more-menu.portal-more-menu--overlay { position: absolute; display: block; z-index: 2000; margin: 0; } /* --- More dropdown panel --- */ body.portal-modern .portal-more-menu.dropdown-menu { min-width: 168px; margin-top: 6px; padding: 6px 0; border: 1px solid var(--portal-border); border-radius: 8px; background: var(--portal-surface); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 12px 28px -4px rgba(0, 0, 0, 0.12); } body.portal-modern .portal-more-menu.dropdown-menu::before, body.portal-modern .portal-more-menu.dropdown-menu::after { display: none !important; } body.portal-modern .portal-more-menu > li { margin: 0 !important; border: 0 !important; float: none !important; } body.portal-modern .portal-more-menu__link { display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 16px 8px 18px !important; color: var(--portal-text-muted) !important; font-family: var(--portal-font); font-size: 13px; font-weight: 400; line-height: 1.3; text-decoration: none !important; text-transform: none; letter-spacing: normal; background: transparent !important; box-sizing: border-box; transition: background-color 0.15s ease, color 0.15s ease; } body.portal-modern .portal-more-menu__link:hover, body.portal-modern .portal-more-menu__link:focus { background: #f4f5f7 !important; color: var(--portal-text) !important; text-decoration: none !important; outline: none; } body.portal-modern .portal-more-menu__icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; flex-shrink: 0; color: #9aa0a6; font-size: 14px; line-height: 1; } body.portal-modern .portal-more-menu__link:hover .portal-more-menu__icon, body.portal-modern .portal-more-menu__link:focus .portal-more-menu__icon { color: #5f6368; } body.portal-modern .portal-more-menu__text { flex: 1 1 auto; min-width: 0; } body.portal-modern .portal-more-menu__link--danger { color: #c0392b !important; } body.portal-modern .portal-more-menu__link--danger .portal-more-menu__icon { color: #e74c3c; } body.portal-modern .portal-more-menu__link--danger:hover, body.portal-modern .portal-more-menu__link--danger:focus { background: #fef2f2 !important; color: #b91c1c !important; } body.portal-modern .portal-more-menu__link--danger:hover .portal-more-menu__icon, body.portal-modern .portal-more-menu__link--danger:focus .portal-more-menu__icon { color: #dc2626; } /* --- Legacy grayscale-background override inside More menu --- */ body.portal-modern .portal-more-menu .grayscale-background { color: inherit !important; font-weight: inherit !important; background: transparent !important; } body.portal-modern .portal-more-menu .grayscale-background:hover, body.portal-modern .portal-more-menu .grayscale-background:focus { color: inherit !important; background: inherit !important; border-color: transparent !important; } /* --- Run & Edit (outline ghost buttons) --- */ body.portal-modern .portal-action-menu .btn-portal-action { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 32px; padding: 0 8px; box-sizing: border-box; border: 1px solid #bdd3e8; border-radius: 6px; background-color: #ffffff; color: #3b8fd9; font-family: var(--portal-font); font-size: 13px; font-weight: 400; line-height: 1; text-decoration: none; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; vertical-align: middle; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } body.portal-modern .portal-action-menu button.btn-portal-action { appearance: none; -webkit-appearance: none; } body.portal-modern .portal-action-menu .btn-portal-action:hover, body.portal-modern .portal-action-menu .btn-portal-action:focus { background-color: #f3f9fd; border-color: #9fc5e8; color: #2f7fc4; text-decoration: none; outline: none; } body.portal-modern .portal-action-menu .btn-portal-action .fa { font-size: 13px; color: inherit; margin: 0; line-height: 1; } body.portal-modern .portal-action-menu .btn-portal-action .fa-play { font-size: 12px; transform: translateX(1px); } /* --- More trigger (dark dropdown button) --- */ body.portal-modern .portal-action-menu .btn-portal-more { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 32px; padding: 0 8px; box-sizing: border-box; border: none; border-radius: var(--portal-radius-sm); background-color: #5a6268; color: #ffffff; font-family: var(--portal-font); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 0.15s ease; white-space: nowrap; } body.portal-modern .btn-portal-more:hover, body.portal-modern .btn-portal-more:focus { background-color: #4a5158; color: #ffffff; outline: none; } body.portal-modern .btn-portal-more .fa { font-size: 11px; color: #ffffff; margin-left: 2px; } /* ================================================================== */ /* 7. Paging */ /* ================================================================== */ body.portal-modern .portal-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 28px 24px 16px; padding: 0; } body.portal-modern .portal-pager__size { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; } body.portal-modern .portal-pager__size-label { font-family: var(--portal-font); font-size: 13px; font-weight: 400; line-height: 1; color: var(--portal-text-body); white-space: nowrap; } body.portal-modern .portal-pager__nav { grid-column: 2; justify-self: center; } body.portal-modern #page-nav.compact-theme.simple-pagination { display: block; overflow: visible; float: none; padding: 0; margin: 0; } body.portal-modern #page-nav.compact-theme.simple-pagination > ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } body.portal-modern #page-nav.compact-theme.simple-pagination > ul > li { float: none; padding: 0; margin: 0; } body.portal-modern #page-nav.compact-theme a, body.portal-modern #page-nav.compact-theme span, body.portal-modern #page-nav.compact-theme .current { float: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d1d5db; border-radius: var(--portal-radius-sm); background: #ffffff; color: #4b5563; box-shadow: none; font-size: 13px; line-height: 28px; min-width: 36px; height: 32px; padding: 0 12px; margin: 0 2px; } body.portal-modern #page-nav.compact-theme a:hover { background: #f3f4f6; color: #374151; border-color: #c5cdd6; } body.portal-modern #page-nav.compact-theme .current { background: #5a6268; border-color: #5a6268; color: #ffffff; } body.portal-modern #page-nav.compact-theme .ellipse span { background: transparent; border: none; color: #6b7280; box-shadow: none; } body.portal-modern .portal-pager .paging-size { border: 1px solid var(--portal-border-input); border-radius: var(--portal-radius-sm); padding: 0 6px; width: 48px; height: 32px; text-align: center; font-family: var(--portal-font); font-size: 13px; font-weight: 500; color: var(--portal-text-body); background: var(--portal-surface); margin: 0; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.portal-modern .portal-pager .paging-size:focus { outline: none; border-color: var(--portal-btn-secondary-text); box-shadow: 0 0 0 2px rgba(53, 142, 215, 0.15); } /* ================================================================== */ /* 8. Report Subscription detail page */ /* ================================================================== */ /* --- Busy overlay (blocks UI while saving) --- */ body.portal-modern .portal-busy-overlay { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.35); cursor: progress; } body.portal-modern .portal-busy-overlay__box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 30px; border-radius: var(--portal-radius-md); background: var(--portal-surface); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22); } body.portal-modern .portal-busy-overlay__spinner { font-size: 28px; color: var(--portal-btn-secondary-text); } body.portal-modern .portal-busy-overlay__text { font-size: 14px; font-weight: 500; color: var(--portal-navy); } body.portal-modern .portal-subscription-detail.portal-card { background: transparent; border: none; box-shadow: none; overflow: visible; } body.portal-modern .portal-subscription-detail > .portal-card__header { margin-bottom: 18px; border-radius: var(--portal-radius-md); box-shadow: var(--portal-shadow-card); } body.portal-modern .portal-subscription-detail > .portal-card__body { padding: 0; background: transparent; } body.portal-modern .portal-subscription-detail__content { display: flex; flex-direction: column; gap: 0; } body.portal-modern .portal-subscription-detail__header-actions { justify-content: flex-end; gap: 10px; margin-top: 0; } body.portal-modern .portal-subscription-detail__header-actions .btn-portal-icon--labeled { box-sizing: border-box; width: 120px; min-width: 120px; max-width: 120px; padding-left: 14px; padding-right: 14px; justify-content: center; } body.portal-modern .btn-portal-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 8px; border: 1px solid transparent; font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none; background-image: none; -webkit-appearance: none; appearance: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } body.portal-modern .btn-portal-icon--labeled { width: auto; min-width: 38px; height: auto; min-height: 40px; padding: 10px 24px; gap: 10px; } body.portal-modern .btn-portal-icon__label { font-family: var(--portal-font); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; } body.portal-modern .btn-portal-icon--save { background-color: #c7c7c7; border: 1px solid #c7c7c7; color: #8a8a8a; cursor: not-allowed; } body.portal-modern .btn-portal-icon--save .fa { color: #8a8a8a; font-size: 15px; font-weight: 400; } body.portal-modern .btn-portal-icon--save .btn-portal-icon__label { color: #8a8a8a; } body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty { background-color: #35b653; border-color: #35b653; color: #ffffff; cursor: pointer; } body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty .fa, body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty .btn-portal-icon__label { color: #ffffff; } body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty:hover, body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty:focus { background-color: #2ea349; border-color: #2ea349; color: #ffffff; outline: none; box-shadow: none; } body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty:hover .fa, body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty:focus .fa, body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty:hover .btn-portal-icon__label, body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty:focus .btn-portal-icon__label { color: #ffffff; } body.portal-modern .btn-portal-icon--save:disabled, body.portal-modern .btn-portal-icon--save[disabled] { opacity: 1; cursor: not-allowed; pointer-events: none; } body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty:disabled, body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty[disabled] { background-color: #35b653; border-color: #35b653; color: #ffffff; opacity: 0.75; } body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty:disabled .fa, body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty[disabled] .fa, body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty:disabled .btn-portal-icon__label, body.portal-modern .btn-portal-icon--save.btn-portal-icon--save-dirty[disabled] .btn-portal-icon__label { color: #ffffff; } body.portal-modern .btn-portal-icon--close { background-color: #c7c7c7; border: 1px solid #9e9e9e; color: #333333; cursor: pointer; } body.portal-modern .btn-portal-icon--close .fa { color: #333333; font-size: 15px; font-weight: 400; } body.portal-modern .btn-portal-icon--close .btn-portal-icon__label { color: #333333; } body.portal-modern .btn-portal-icon--close:hover, body.portal-modern .btn-portal-icon--close:focus { background-color: #bdbdbd; border-color: #8a8a8a; color: #222222; outline: none; box-shadow: none; } body.portal-modern .btn-portal-icon--close:hover .fa, body.portal-modern .btn-portal-icon--close:focus .fa, body.portal-modern .btn-portal-icon--close:hover .btn-portal-icon__label, body.portal-modern .btn-portal-icon--close:focus .btn-portal-icon__label { color: #222222; } body.portal-modern .btn-portal-icon--close.btn-portal-icon--cancel { background-color: #ffffff; border: 1px solid #358ed7; color: #358ed7; } body.portal-modern .btn-portal-icon--close.btn-portal-icon--cancel .fa { color: #358ed7; font-size: 15px; } body.portal-modern .btn-portal-icon--close.btn-portal-icon--cancel .btn-portal-icon__label { color: #358ed7; } body.portal-modern .btn-portal-icon--close.btn-portal-icon--cancel:hover, body.portal-modern .btn-portal-icon--close.btn-portal-icon--cancel:focus { background-color: #f0f7fd; border-color: #2f7fc4; color: #2f7fc4; outline: none; box-shadow: none; } body.portal-modern .btn-portal-icon--close.btn-portal-icon--cancel:hover .fa, body.portal-modern .btn-portal-icon--close.btn-portal-icon--cancel:focus .fa, body.portal-modern .btn-portal-icon--close.btn-portal-icon--cancel:hover .btn-portal-icon__label, body.portal-modern .btn-portal-icon--close.btn-portal-icon--cancel:focus .btn-portal-icon__label { color: #2f7fc4; } /* --- Summary status bar --- */ body.portal-modern .portal-subscription-summary { display: flex; align-items: stretch; margin: 0 0 18px; padding: 0; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-md); background: var(--portal-surface); overflow: hidden; } body.portal-modern .portal-subscription-summary__card { position: relative; display: flex; align-items: center; flex: 1 1 0; gap: 14px; min-width: 0; padding: 18px 22px; border: none; border-radius: 0; background: transparent; } body.portal-modern .portal-subscription-summary__card:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 56%; background: var(--portal-border); } body.portal-modern .portal-subscription-summary__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; font-size: 17px; line-height: 1; } body.portal-modern .portal-subscription-summary__icon--next { background: #e3f5f2; color: #1f9a8a; } body.portal-modern .portal-subscription-summary__icon--success { background: #e5f6ec; color: #27ae60; } body.portal-modern .portal-subscription-summary__icon--frequency { background: #f0edf8; color: #6b5b95; } body.portal-modern .portal-subscription-summary__icon--recipient { background: #eaf2fb; color: #358ed7; } body.portal-modern .portal-subscription-summary__content { display: flex; flex-direction: column; gap: 3px; min-width: 0; } body.portal-modern .portal-subscription-summary__label { font-size: 13px; font-weight: 700; color: var(--portal-navy); line-height: 1.3; } body.portal-modern .portal-subscription-summary__value { font-size: 13px; font-weight: 400; color: var(--portal-navy); line-height: 1.4; word-break: break-word; } body.portal-modern .portal-subscription-summary__card:nth-child(3) .portal-subscription-summary__value { font-weight: 700; } body.portal-modern .portal-subscription-summary__value--email { font-weight: 400; } body.portal-modern .portal-subscription-summary__meta { font-size: 12px; font-weight: 400; color: #8b93a7; line-height: 1.35; } /* --- Frequency subtext (hidden until binding is added) --- */ body.portal-modern .portal-subscription-summary__card:nth-child(3) .portal-subscription-summary__meta { display: none; } body.portal-modern .portal-subscription-summary__badge { display: block; align-self: flex-start; margin-top: 1px; padding: 0; border-radius: 0; font-size: 12px; font-weight: 500; line-height: 1.35; } body.portal-modern .portal-subscription-summary__badge--success { background: transparent; color: var(--portal-success-bg); } body.portal-modern .portal-subscription-summary__badge--error { background: transparent; color: var(--portal-danger-bg); } /* --- Inline field-level error (under a specific input) --- */ body.portal-modern .portal-field-error { margin-top: 4px; color: var(--portal-danger); font-size: 12px; line-height: 1.35; } /* --- Validation messages --- */ body.portal-modern .portal-subscription-detail__validation { padding: 0 0 18px; } body.portal-modern .portal-subscription-detail__validation:empty { display: none; padding: 0; } body.portal-modern .portal-subscription-detail__validation-item { color: var(--portal-danger); font-size: 13px; line-height: 1.4; margin-bottom: 4px; } /* --- Two-column config (Details & Schedule) --- */ body.portal-modern .portal-subscription-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0 0 18px; } body.portal-modern .portal-subscription-config > .portal-subscription-section { padding: 22px 24px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-md); background: var(--portal-surface); box-shadow: var(--portal-shadow-card); } body.portal-modern .portal-subscription-config .portal-subscription-section__icon:not(.portal-subscription-section__icon--outline) { background: #eaf2fb; color: var(--portal-btn-secondary-text); } body.portal-modern .portal-subscription-section { min-width: 0; } body.portal-modern .portal-subscription-section--schedule { container-type: inline-size; container-name: subscription-schedule; } body.portal-modern .portal-subscription-section__header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; } body.portal-modern .portal-subscription-section__header--split { align-items: center; justify-content: space-between; gap: 16px; } body.portal-modern .portal-subscription-section__header-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } body.portal-modern .portal-subscription-section__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--portal-radius-sm); background: #eef2f7; color: #4b5563; font-size: 15px; line-height: 1; } body.portal-modern .portal-subscription-section__titles { min-width: 0; } body.portal-modern .portal-subscription-section__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--portal-text-heading); line-height: 1.3; } body.portal-modern .portal-subscription-section__subtitle { margin: 4px 0 0; font-size: 13px; font-weight: 400; color: var(--portal-text-muted); line-height: 1.4; } body.portal-modern .portal-subscription-section__body { display: flex; flex-direction: column; gap: 14px; } /* --- Form fields --- */ body.portal-modern .portal-form-field { display: flex; flex-direction: column; gap: 6px; } body.portal-modern .portal-form-label { margin: 0; font-size: 13px; font-weight: 500; color: var(--portal-text-body); line-height: 1.3; } body.portal-modern .portal-form-label__required { color: var(--portal-danger); font-weight: 600; } body.portal-modern .portal-form-label__optional { font-weight: 400; color: var(--portal-text-muted); } body.portal-modern .portal-form-control { height: 38px; padding: 8px 12px; border: 1px solid var(--portal-border-input); border-radius: var(--portal-radius-sm); background: var(--portal-surface); color: var(--portal-text); font-family: var(--portal-font); font-size: 14px; font-weight: 400; line-height: 1.4; box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.portal-modern textarea.portal-form-control { height: auto; min-height: 84px; resize: vertical; } body.portal-modern select.portal-form-control { appearance: auto; } body.portal-modern .portal-form-control:focus { outline: none; border-color: var(--portal-btn-secondary-text); box-shadow: 0 0 0 2px rgba(53, 142, 215, 0.12); } body.portal-modern .portal-form-control:disabled { background-color: #f9fafb; color: var(--portal-text-muted); cursor: not-allowed; opacity: 1; } body.portal-modern .portal-form-control::placeholder { color: #9ca3af; opacity: 1; } /* --- Subscription Details & Schedule (shared form styles) --- */ body.portal-modern .portal-subscription-section--details .portal-subscription-section__header, body.portal-modern .portal-subscription-section--schedule .portal-subscription-section__header { align-items: center; gap: 12px; margin-bottom: 20px; } body.portal-modern .portal-subscription-section--details .portal-subscription-section__icon--outline, body.portal-modern .portal-subscription-section--schedule .portal-subscription-section__icon--outline { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: auto; height: auto; padding: 0; border-radius: 0; background: transparent; color: #358ed7; } body.portal-modern .portal-subscription-section--details .portal-section-icon__svg, body.portal-modern .portal-subscription-section--schedule .portal-section-icon__svg { display: block; width: 26px; height: 26px; } body.portal-modern .portal-subscription-section--details .portal-subscription-section__title, body.portal-modern .portal-subscription-section--schedule .portal-subscription-section__title { font-size: 16px; font-weight: 700; color: var(--portal-navy); line-height: 1.25; } body.portal-modern .portal-subscription-section--details .portal-subscription-section__subtitle, body.portal-modern .portal-subscription-section--schedule .portal-subscription-section__subtitle { margin-top: 2px; font-size: 13px; font-weight: 400; color: #8b93a7; line-height: 1.35; } body.portal-modern .portal-subscription-section--details .portal-subscription-section__body, body.portal-modern .portal-subscription-section--schedule .portal-subscription-section__body { gap: 18px; } body.portal-modern .portal-subscription-section--details .portal-form-field, body.portal-modern .portal-subscription-section--schedule .portal-form-field { gap: 8px; } body.portal-modern .portal-subscription-section--details .portal-form-label, body.portal-modern .portal-subscription-section--schedule .portal-form-label { font-size: 13px; font-weight: 600; color: var(--portal-navy); } body.portal-modern .portal-subscription-section--details .portal-form-label__required, body.portal-modern .portal-subscription-section--schedule .portal-form-label__required { color: #e74c3c; font-weight: 600; } body.portal-modern .portal-subscription-section--details .portal-form-label__optional, body.portal-modern .portal-subscription-section--schedule .portal-form-label__optional { font-size: 12px; font-weight: 400; color: #9ca3af; } body.portal-modern .portal-subscription-section--details .portal-form-control, body.portal-modern .portal-subscription-section--schedule .portal-form-control { height: 40px; padding: 9px 12px; border: 1px solid #dce1e8; border-radius: 6px; background: #ffffff; color: var(--portal-text); font-size: 14px; box-shadow: none !important; } body.portal-modern .portal-subscription-section--details textarea.portal-form-control { min-height: 88px; padding-top: 10px; line-height: 1.45; resize: vertical; } body.portal-modern .portal-subscription-section--details .portal-form-control:focus, body.portal-modern .portal-subscription-section--schedule .portal-form-control:focus { border-color: #b8c9dc; box-shadow: 0 0 0 2px rgba(53, 142, 215, 0.1) !important; } body.portal-modern .portal-subscription-section--details .portal-form-control:disabled, body.portal-modern .portal-subscription-section--schedule .portal-form-control:disabled { background-color: #f0f2f5; border-color: #e4e8ee; color: #9ca3af; opacity: 1; cursor: not-allowed; -webkit-text-fill-color: #9ca3af; } body.portal-modern .portal-subscription-section--schedule select.portal-form-control { appearance: auto; padding-right: 28px; width: 45%; max-width: 100%; } body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__datetime { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 16px; width: 100%; max-width: 100%; } /* "No End Date" checkbox sits inline with the date inputs (no top label). */ body.portal-modern .portal-subscription-section--schedule .portal-form-field--inline-check { flex-direction: row; align-items: center; height: 40px; white-space: nowrap; } /* Keep the End Date inline error out of the grid flow so it doesn't push the "No End Date" checkbox down or change the row height. */ body.portal-modern .portal-subscription-schedule__datetime .portal-form-field { position: relative; } body.portal-modern .portal-subscription-schedule__datetime .portal-field-error { position: absolute; top: 100%; left: 0; margin-top: 4px; } /* Repeat Period row: dropdown on the left, mode radios on the right. */ body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__repeat { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px 28px; } body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__repeat > .portal-form-field { flex: 0 1 auto; min-width: 200px; } body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__repeat select.portal-form-control { width: 100%; } body.portal-modern .portal-schedule-mode { display: flex; align-items: center; gap: 24px; height: 40px; } /* Radio + checkbox controls */ body.portal-modern .portal-radio, body.portal-modern .portal-checkbox { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; color: var(--portal-navy); cursor: pointer; user-select: none; } body.portal-modern .portal-radio input[type="radio"], body.portal-modern .portal-checkbox input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--portal-link); cursor: pointer; } body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__pickers { gap: 18px; } body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__pickers > .portal-form-field:first-child:not(:only-child) > .portal-schedule-pills { max-width: 68%; } body.portal-modern .portal-subscription-section--schedule .portal-schedule-pills--days { width: 48%; max-width: 100%; } body.portal-modern .portal-subscription-section--schedule .portal-schedule-pill { min-height: 34px; padding: 7px 14px; border: 1px solid #e4e8ee; border-radius: 6px; background: #f0f2f5; color: #4a5568; font-size: 13px; font-weight: 500; } body.portal-modern .portal-subscription-section--schedule .portal-schedule-pill--day { min-width: 38px; width: 38px; height: 38px; min-height: 38px; padding: 0; font-size: 14px; font-weight: 600; } body.portal-modern .portal-subscription-section--schedule .portal-schedule-pill--day-num { width: 100%; height: 36px; min-width: 0; min-height: 36px; padding: 0; font-size: 13px; font-weight: 600; } body.portal-modern .portal-subscription-section--schedule .portal-schedule-pill:hover { border-color: #d5dbe3; background: #e8ebf0; color: #4a5568; } body.portal-modern .portal-subscription-section--schedule .portal-schedule-pill.is-selected, body.portal-modern .portal-subscription-section--schedule .portal-schedule-pill.is-selected:hover { background: #358ed7; border-color: #358ed7; color: #ffffff; } body.portal-modern .portal-subscription-section--schedule .portal-schedule-pills { gap: 8px; } body.portal-modern .portal-subscription-section--schedule .portal-schedule-pills--days { gap: 8px; } body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__pickers--custom { display: grid; grid-template-columns: 1fr; gap: 24px; width: 100%; max-width: 100%; margin-top: 6px; } @container subscription-schedule (min-width: 540px) { body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__pickers--custom { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; } } body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__custom-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__custom-col > button.portal-schedule-pill { align-self: flex-start; } /* --- Custom schedule: month rows (4-column grid) --- */ body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__custom-col:first-child > div { display: flex; flex-direction: column; gap: 6px; } body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__custom-col:first-child .portal-schedule-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__custom-col:first-child .portal-schedule-pill { width: 100%; min-width: 0; padding: 8px 6px; } /* --- Custom schedule: day rows (7-column grid) --- */ body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__custom-col:last-child > div { display: flex; flex-direction: column; gap: 8px; } body.portal-modern .portal-subscription-section--schedule .portal-schedule-pills--days-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 100%; margin-bottom: 8px; } /* --- Schedule date/time inputs --- */ body.portal-modern .portal-subscription-schedule__datetime { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } body.portal-modern .portal-subscription-schedule__pickers { display: flex; flex-direction: column; gap: 18px; } body.portal-modern .portal-subscription-schedule__pickers--custom { display: grid; grid-template-columns: 1fr; gap: 24px; } body.portal-modern .portal-subscription-schedule__custom-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } body.portal-modern .portal-schedule-pills { display: flex; flex-wrap: wrap; gap: 8px; } body.portal-modern .portal-schedule-pills--days { gap: 6px; } body.portal-modern .portal-schedule-pills--days-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } body.portal-modern .portal-schedule-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--portal-border-input); border-radius: var(--portal-radius-sm); background: #f3f4f6; color: var(--portal-text-body); font-family: var(--portal-font); font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } body.portal-modern .portal-schedule-pill--day { min-width: 40px; padding: 6px 0; } body.portal-modern .portal-schedule-pill--day-num { min-width: 34px; min-height: 34px; padding: 4px 0; } body.portal-modern .portal-schedule-pill:hover { border-color: #c5cdd6; background: #ebedf0; } body.portal-modern .portal-schedule-pill.is-selected, body.portal-modern .portal-schedule-pill.is-selected:hover { background: var(--portal-btn-secondary-text); border-color: var(--portal-btn-secondary-text); color: #ffffff; } /* --- Full-width sections below config --- */ body.portal-modern .portal-subscription-detail .portal-report-params, body.portal-modern .portal-subscription-detail .portal-activity-log { margin-bottom: 18px; padding: 22px 24px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-md); background: var(--portal-surface); box-shadow: var(--portal-shadow-card); } body.portal-modern .portal-subscription-detail .portal-activity-log { margin-bottom: 0; display: none; /* TODO: show when Activity Log is implemented */ } body.portal-modern .portal-subscription-detail .portal-activity-log .portal-subscription-section__icon { background: #eaf2fb; color: var(--portal-btn-secondary-text); } /* --- Report Parameters section header --- */ body.portal-modern .portal-report-params .portal-subscription-section__header { align-items: center; gap: 12px; margin-bottom: 0; padding-bottom: 18px; border-bottom: 1px solid var(--portal-border); } body.portal-modern .portal-report-params .portal-subscription-section__header-main { align-items: center; } body.portal-modern .portal-report-params .portal-subscription-section__icon--outline { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: auto; height: auto; padding: 0; border-radius: 0; background: transparent; color: #358ed7; } body.portal-modern .portal-report-params .portal-section-icon__svg { display: block; width: 26px; height: 26px; } body.portal-modern .portal-report-params .portal-subscription-section__title { font-size: 16px; font-weight: 700; color: var(--portal-navy); line-height: 1.25; } body.portal-modern .portal-report-params .portal-subscription-section__subtitle { margin-top: 2px; font-size: 13px; font-weight: 400; color: #8b93a7; line-height: 1.35; } body.portal-modern .portal-report-params .btn-portal-add { height: 36px; padding: 0 16px; border-color: #c5d9f0; font-size: 14px; } body.portal-modern .btn-portal-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; height: 34px; padding: 0 14px; border: 1px solid var(--portal-btn-secondary-border); border-radius: var(--portal-radius-sm); background: var(--portal-surface); color: var(--portal-btn-secondary-text); font-family: var(--portal-font); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } body.portal-modern .btn-portal-add:hover, body.portal-modern .btn-portal-add:focus { background: #f0f7fd; border-color: var(--portal-btn-secondary-text); outline: none; } body.portal-modern .btn-portal-refresh--link { height: auto; padding: 4px 8px; border: none; background: transparent; color: var(--portal-btn-secondary-text); font-weight: 500; } body.portal-modern .btn-portal-refresh--link .fa { color: var(--portal-btn-secondary-text); } body.portal-modern .btn-portal-refresh--link:hover, body.portal-modern .btn-portal-refresh--link:focus { background: transparent; border-color: transparent; color: var(--portal-link-hover); } body.portal-modern .btn-portal-refresh--link:hover .fa, body.portal-modern .btn-portal-refresh--link:focus .fa { color: var(--portal-link-hover); } /* --- Report Parameters table --- */ body.portal-modern .portal-report-params__table { --portal-params-grid: 44px minmax(110px, 1.2fr) minmax(100px, 1fr) minmax(72px, 0.75fr) minmax(130px, 1.5fr) minmax(88px, auto); margin-top: 0; padding: 0; } body.portal-modern .portal-report-params__head, body.portal-modern .portal-report-params__row { display: grid; grid-template-columns: var(--portal-params-grid); align-items: center; column-gap: 16px; } body.portal-modern .portal-report-params__head { margin: 0 -24px; padding: 0 24px; background-color: var(--portal-table-header-bg); border-bottom: 1px solid var(--portal-border); } body.portal-modern .portal-report-params__th { padding: 12px 0; font-size: 12px; font-weight: 600; color: var(--portal-navy); line-height: 1.3; text-align: left; } body.portal-modern .portal-report-params__th--num { text-align: left; } body.portal-modern .portal-report-params__th--actions { justify-self: end; text-align: right; } body.portal-modern .portal-report-params__row { border-bottom: 1px solid var(--portal-border); } body.portal-modern .portal-report-params__body .portal-report-params__row:last-child { border-bottom: none; } body.portal-modern .portal-report-params__cell { min-width: 0; padding: 14px 0; font-size: 14px; color: var(--portal-text-body); line-height: 1.4; word-break: break-word; } body.portal-modern .portal-report-params__cell--num { text-align: left; color: var(--portal-text-body); font-size: 14px; font-weight: 400; } body.portal-modern .portal-report-params__cell--actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } body.portal-modern .portal-report-params__action { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 6px; background: transparent; font-size: 15px; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } body.portal-modern .portal-report-params__action--edit { color: var(--portal-btn-secondary-text); } body.portal-modern .portal-report-params__action--edit:hover, body.portal-modern .portal-report-params__action--edit:focus { background: #eef5fc; color: var(--portal-link-hover); outline: none; } body.portal-modern .portal-report-params__action--delete { color: var(--portal-danger); } body.portal-modern .portal-report-params__action--delete:hover, body.portal-modern .portal-report-params__action--delete:focus { background: #fdf0ee; color: var(--portal-danger-bg); outline: none; } /* ================================================================== */ /* 9. Modals */ /* ================================================================== */ /* --- Confirm delete (#modalConfirm in HeaderPartial) --- */ body.portal-modern #modalConfirm.portal-modal-confirm .modal-dialog { width: calc(100% - 32px); max-width: 420px; margin: 12vh auto 1.75rem; } body.portal-modern #modalConfirm .portal-modal-confirm__content { border: 1px solid var(--portal-border); border-radius: var(--portal-radius-md); background: var(--portal-surface); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); overflow: hidden; } body.portal-modern #modalConfirm .portal-modal-confirm__header { padding: 20px 24px 14px; border-bottom: 1px solid var(--portal-border); background: var(--portal-surface); } body.portal-modern #modalConfirm .portal-modal-confirm__close { margin-top: 2px; font-size: 24px; font-weight: 400; line-height: 1; color: #9ca3af; opacity: 1; text-shadow: none; } body.portal-modern #modalConfirm .portal-modal-confirm__close:hover, body.portal-modern #modalConfirm .portal-modal-confirm__close:focus { color: #6b7280; outline: none; } body.portal-modern #modalConfirm .portal-modal-confirm__title { margin: 0; padding-right: 24px; font-family: var(--portal-font); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--portal-navy); } body.portal-modern #modalConfirm .portal-modal-confirm__body { padding: 16px 24px 20px; background: var(--portal-surface); } body.portal-modern #modalConfirm .portal-modal-confirm__message { margin: 0; font-family: var(--portal-font); font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--portal-text-body); } body.portal-modern #modalConfirm .portal-modal-confirm__footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 24px 20px; border-top: none; background: var(--portal-surface); text-align: right; } body.portal-modern #modalConfirm .portal-modal-confirm__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; height: 38px; margin: 0; padding: 0 18px; border-radius: 6px; font-family: var(--portal-font); font-size: 14px; font-weight: 600; line-height: 1; box-shadow: none !important; background-image: none !important; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } body.portal-modern #modalConfirm .portal-modal-confirm__btn--confirm { background: var(--portal-danger); border: 1px solid var(--portal-danger); color: #ffffff; } body.portal-modern #modalConfirm .portal-modal-confirm__btn--confirm:hover, body.portal-modern #modalConfirm .portal-modal-confirm__btn--confirm:focus { background: var(--portal-danger-bg); border-color: var(--portal-danger-bg); color: #ffffff; outline: none; } body.portal-modern #modalConfirm .portal-modal-confirm__btn--cancel { background: #ffffff; border: 1px solid #dce1e8; color: var(--portal-text-body); } body.portal-modern #modalConfirm .portal-modal-confirm__btn--cancel:hover, body.portal-modern #modalConfirm .portal-modal-confirm__btn--cancel:focus { background: #f8f9fb; border-color: #cfd5de; color: var(--portal-text); outline: none; } body.portal-modern .modal-backdrop.in { opacity: 0.35; } /* --- Edit parameter (#modalEditReportParameter) --- */ body.portal-modern #modalEditReportParameter .modal-dialog { width: calc(100% - 32px); max-width: 400px; margin: 12vh auto 1.75rem; } body.portal-modern #modalEditReportParameter .modal-content { border: 1px solid var(--portal-border); border-radius: var(--portal-radius-md); background: var(--portal-surface); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); overflow: hidden; } body.portal-modern #modalEditReportParameter .modal-header { padding: 20px 24px 14px; border-bottom: 1px solid var(--portal-border); background: var(--portal-surface); } body.portal-modern #modalEditReportParameter .modal-header .close { margin-top: 2px; font-size: 24px; font-weight: 400; color: #9ca3af; opacity: 1; text-shadow: none; } body.portal-modern #modalEditReportParameter .modal-title { font-family: var(--portal-font); font-size: 16px; font-weight: 700; color: var(--portal-navy); } body.portal-modern #modalEditReportParameter .modal-body { padding: 18px 24px 8px; } body.portal-modern #modalEditReportParameter .modal-body label { font-size: 13px; font-weight: 600; color: var(--portal-navy); } body.portal-modern #modalEditReportParameter .modal-body .form-control { height: 40px; border: 1px solid #dce1e8; border-radius: 6px; box-shadow: none; font-size: 14px; } body.portal-modern #modalEditReportParameter .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 24px 20px; border-top: none; background: var(--portal-surface); text-align: right; } body.portal-modern #modalEditReportParameter .modal-footer .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; height: 38px; margin: 0; padding: 0 18px; border-radius: 6px; font-family: var(--portal-font); font-size: 14px; font-weight: 600; line-height: 1; box-shadow: none !important; background-image: none !important; } body.portal-modern #modalEditReportParameter .modal-footer .bold-background-inverse { background: #35b653; border: 1px solid #35b653; color: #ffffff; } body.portal-modern #modalEditReportParameter .modal-footer .bold-background-inverse:hover, body.portal-modern #modalEditReportParameter .modal-footer .bold-background-inverse:focus { background: #2ea349; border-color: #2ea349; color: #ffffff; outline: none; } body.portal-modern #modalEditReportParameter .modal-footer .light-background { background: #ffffff; border: 1px solid #dce1e8; color: var(--portal-text-body); } body.portal-modern #modalEditReportParameter .modal-footer .light-background:hover, body.portal-modern #modalEditReportParameter .modal-footer .light-background:focus { background: #f8f9fb; border-color: #cfd5de; color: var(--portal-text); outline: none; } /* --- Discard unsaved changes (#modalDiscardChanges) --- */ body.portal-modern #modalDiscardChanges .modal-dialog { width: calc(100% - 32px); max-width: 460px; margin: 12vh auto 1.75rem; } body.portal-modern #modalDiscardChanges .portal-discard-modal { border: 1px solid var(--portal-border); border-radius: var(--portal-radius-md); background: var(--portal-surface); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); overflow: hidden; } body.portal-modern #modalDiscardChanges .portal-discard-modal__header { padding: 20px 24px 14px; border-bottom: 1px solid var(--portal-border); background: #f3f4f6; } body.portal-modern #modalDiscardChanges .portal-discard-modal__close { margin-top: 2px; font-size: 24px; font-weight: 400; line-height: 1; color: #9ca3af; opacity: 1; text-shadow: none; } body.portal-modern #modalDiscardChanges .portal-discard-modal__close:hover, body.portal-modern #modalDiscardChanges .portal-discard-modal__close:focus { color: #6b7280; outline: none; } body.portal-modern #modalDiscardChanges .portal-discard-modal__title { margin: 0; padding-right: 24px; font-family: var(--portal-font); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--portal-navy); } body.portal-modern #modalDiscardChanges .portal-discard-modal__body { padding: 18px 24px 20px; background: var(--portal-surface); } body.portal-modern #modalDiscardChanges .portal-discard-modal__content { display: flex; align-items: flex-start; gap: 14px; } body.portal-modern #modalDiscardChanges .portal-discard-modal__icon { flex-shrink: 0; font-size: 28px; line-height: 1; color: #f0ad4e; } body.portal-modern #modalDiscardChanges .portal-discard-modal__message { margin: 2px 0 0; font-family: var(--portal-font); font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--portal-text-body); } body.portal-modern #modalDiscardChanges .portal-discard-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 24px 18px; border-top: 1px solid var(--portal-border); background: #f3f4f6; text-align: right; } body.portal-modern #modalDiscardChanges .portal-discard-modal__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; height: 38px; margin: 0; padding: 0 18px; border-radius: 6px; font-family: var(--portal-font); font-size: 14px; font-weight: 600; line-height: 1; box-shadow: none !important; background-image: none !important; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } body.portal-modern #modalDiscardChanges .portal-discard-modal__btn--yes { background: #ffffff; border: 1px solid #358ed7; color: #358ed7; } body.portal-modern #modalDiscardChanges .portal-discard-modal__btn--yes:hover, body.portal-modern #modalDiscardChanges .portal-discard-modal__btn--yes:focus { background: #f0f7fd; border-color: #2f7fc4; color: #2f7fc4; outline: none; } body.portal-modern #modalDiscardChanges .portal-discard-modal__btn--no { background: #ffffff; border: 1px solid #dce1e8; color: var(--portal-text-body); } body.portal-modern #modalDiscardChanges .portal-discard-modal__btn--no:hover, body.portal-modern #modalDiscardChanges .portal-discard-modal__btn--no:focus { background: #f8f9fb; border-color: #cfd5de; color: var(--portal-text); outline: none; } /* --- Save result (#modalSaveResult) --- */ body.portal-modern #modalSaveResult .modal-dialog { width: calc(100% - 32px); max-width: 400px; margin: 14vh auto 1.75rem; } body.portal-modern #modalSaveResult .modal-content { border: none; border-radius: var(--portal-radius-md); background: var(--portal-surface); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); overflow: hidden; } body.portal-modern #modalSaveResult .modal-header { padding: 18px 22px 12px; border-bottom: 1px solid var(--portal-border); } body.portal-modern #modalSaveResult .modal-title { font-size: 16px; font-weight: 600; color: var(--portal-navy); } body.portal-modern #modalSaveResult .modal-header .close { margin-top: 2px; font-size: 24px; font-weight: 400; color: #9ca3af; opacity: 1; text-shadow: none; } body.portal-modern #modalSaveResult .portal-result-modal__body { display: flex; align-items: flex-start; gap: 12px; padding: 6px 2px; } body.portal-modern #modalSaveResult .portal-result-modal__icon { flex-shrink: 0; font-size: 22px; line-height: 1.3; } body.portal-modern .portal-result-modal--success .portal-result-modal__icon { color: var(--portal-success); } body.portal-modern .portal-result-modal--error .portal-result-modal__icon { color: var(--portal-danger); } body.portal-modern #modalSaveResult .portal-result-modal__message { margin: 0; color: var(--portal-text-body); font-size: 14px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; } body.portal-modern #modalSaveResult .modal-footer { padding: 12px 22px 18px; border-top: 1px solid var(--portal-border); } /* --- Activity log (hidden until implemented) --- */ body.portal-modern .portal-activity-log__body { min-height: 48px; padding: 16px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-md); background: #fafbfc; } body.portal-modern .portal-activity-log__placeholder { margin: 0; font-size: 13px; color: var(--portal-text-muted); line-height: 1.4; } /* ================================================================== */ /* 10. Responsive */ /* ================================================================== */ /* Controls stack under the title below md — align them left */ @media (max-width: 991px) { body.portal-modern .portal-card-controls { justify-content: flex-start; margin-top: 12px; } } @media (max-width: 767px) { body.portal-modern .page-title-row { padding: 12px 12px 8px; } body.portal-modern .page-content { padding: 8px 12px 16px; } body.portal-modern .portal-card-search-group { flex: 1 1 100%; } body.portal-modern .portal-card-search-group .portal-card-search { flex: 1 1 auto; max-width: none; } body.portal-modern .portal-subscriptions { display: block; } body.portal-modern .portal-subscriptions__head { display: none; } body.portal-modern .portal-subscriptions__row { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--portal-border); } body.portal-modern .portal-subscriptions__cell { padding: 0; } body.portal-modern .portal-subscriptions__cell--actions { justify-content: flex-start; } body.portal-modern .portal-pager { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 24px 16px 16px; } body.portal-modern .portal-pager__size { justify-self: auto; } body.portal-modern .portal-pager__nav { display: flex; justify-content: center; } body.portal-modern .portal-subscription-summary { flex-direction: column; margin: 0 0 18px; } body.portal-modern .portal-subscription-summary__card { padding: 16px 18px; } body.portal-modern .portal-subscription-summary__card:not(:last-child)::after { top: auto; bottom: 0; right: 18px; left: 18px; transform: none; width: auto; height: 1px; } body.portal-modern .portal-subscription-config { grid-template-columns: 1fr; gap: 18px; padding: 0 0 18px; } body.portal-modern .portal-subscription-config > .portal-subscription-section { padding: 18px 16px; } body.portal-modern .portal-subscription-schedule__datetime { grid-template-columns: 1fr; } body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__datetime { width: 100%; } body.portal-modern .portal-subscription-section--schedule select.portal-form-control { width: 100%; } body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__pickers > .portal-form-field:first-child:not(:only-child) > .portal-schedule-pills, body.portal-modern .portal-subscription-section--schedule .portal-schedule-pills--days, body.portal-modern .portal-subscription-section--schedule .portal-subscription-schedule__pickers--custom { width: 100%; max-width: 100%; } body.portal-modern .portal-subscription-schedule__pickers--custom { grid-template-columns: 1fr; } body.portal-modern .portal-subscription-detail .portal-report-params, body.portal-modern .portal-subscription-detail .portal-activity-log { padding: 18px 16px; margin-bottom: 18px; } body.portal-modern .portal-report-params .portal-subscription-section__header { padding-bottom: 16px; } body.portal-modern .portal-report-params__head { margin: 0 -16px; padding: 0 16px; display: none; } body.portal-modern .portal-report-params__row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 0; } body.portal-modern .portal-report-params__cell--actions { justify-content: flex-start; } body.portal-modern .portal-subscription-detail__header-actions { justify-content: flex-start; margin-top: 12px; } body.portal-modern .portal-subscription-section__header--split { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { body.portal-modern .portal-subscription-summary__card { padding: 14px 16px; } }