/* ===================================================================================================== Rajganga Admin Studio — brand + Apple-style design layer (loaded after rg-admin.css). Visual only: forms, fields, routes and page logic are untouched. Behaviour lives in rg-studio.js. ===================================================================================================== */ :root, html[data-bs-theme="light"] { --rg-brand: #d4430f; --rg-brand-strong: #a8320b; --rg-brand-soft: #fff1ea; --rg-grad: linear-gradient(135deg, #f7773a 0%, #e0541b 42%, #c23a0c 100%); --rg-grad-soft: linear-gradient(135deg, #fff4ee 0%, #ffe6d8 100%); --rg-hero: radial-gradient(120% 140% at 0% 0%, #ff8a4c 0%, #e0541b 38%, #b4330b 72%, #7d2208 100%); --rg-ink: #1c1c1e; --rg-text: #1d1d1f; --rg-muted: #636366; --rg-line: rgba(60, 60, 67, .13); --rg-bg: #f2f2f7; --rg-surface: #ffffff; --rg-surface-2: #f6f6f9; --rg-fill: #eeeef3; --rg-nav: #10161f; --rg-blue: #0a66d8; --rg-green: #1f8f4e; --rg-amber: #b25e00; --rg-red: #d1283b; --rg-radius: 22px; --rg-radius-sm: 13px; --rg-shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 8px 24px rgba(28, 28, 30, .06); --rg-shadow-lg: 0 30px 80px rgba(16, 22, 31, .28); --rg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Noto Sans Devanagari", "Mukta", sans-serif; --rg-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Noto Sans Devanagari", sans-serif; } html[data-bs-theme="dark"] { --rg-brand: #ff8a50; --rg-brand-strong: #ffb48f; --rg-brand-soft: rgba(255, 138, 80, .14); --rg-grad: linear-gradient(135deg, #ff9a5c 0%, #f06a2a 50%, #d4430f 100%); --rg-grad-soft: linear-gradient(135deg, rgba(255, 138, 80, .16), rgba(255, 138, 80, .06)); --rg-ink: #f5f5f7; --rg-text: #ececf1; --rg-muted: #a1a1aa; --rg-line: rgba(235, 235, 245, .12); --rg-bg: #000000; --rg-surface: #1c1c1e; --rg-surface-2: #242427; --rg-fill: #2c2c2e; --rg-nav: #0b0b0d; --rg-blue: #4aa3ff; --rg-green: #40c97a; --rg-amber: #ffb340; --rg-red: #ff6370; } body { font-family: var(--rg-font); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, .h4 { font-family: var(--rg-font-display); letter-spacing: -.02em; } /* ---------- Sidebar: deep glass with a brand pill for the current page ---------- */ .sidenav-menu { background: linear-gradient(180deg, #151d2b 0%, #10161f 60%, #0c1118 100%) !important; box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06); } html[data-bs-theme="dark"] .sidenav-menu { background: linear-gradient(180deg, #121214 0%, #0b0b0d 100%) !important; } .sidenav-menu .logo { padding-top: 6px; } .sidenav-menu .side-nav-title { color: #7c8698 !important; font: 700 11px/1 var(--rg-font) !important; letter-spacing: .09em !important; text-transform: uppercase; padding: 18px 22px 8px !important; } .sidenav-menu .side-nav-link { gap: 12px; margin: 1px 12px !important; border-radius: 12px !important; color: #c7cfdc !important; font-weight: 500; } .sidenav-menu .side-nav-link .menu-icon { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 !important; border-radius: 9px; background: rgba(255, 255, 255, .06); color: #dfe5ee; flex: 0 0 auto; } .sidenav-menu .side-nav-link .menu-icon svg { width: 18px; height: 18px; } .sidenav-menu .side-nav-link:hover .menu-icon { background: rgba(255, 255, 255, .12); } .sidenav-menu .side-nav-link.active, .sidenav-menu .side-nav-item.menuitem-active > .side-nav-link { background: rgba(255, 255, 255, .08) !important; box-shadow: none !important; color: #fff !important; } .sidenav-menu .side-nav-link.active .menu-icon { background: var(--rg-grad); color: #fff; box-shadow: 0 6px 16px rgba(224, 84, 27, .45); } .sidenav-menu .menu-arrow { display: none; } /* ---------- Topbar: translucent ---------- */ .app-topbar { background: color-mix(in srgb, var(--rg-surface) 78%, transparent) !important; -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid var(--rg-line) !important; } .rg-avatar { background: var(--rg-grad) !important; box-shadow: 0 4px 12px rgba(224, 84, 27, .35); color: #fff !important; } .rg-install-btn { border-width: 1px !important; background: var(--rg-brand-soft) !important; } /* ---------- Page header ---------- */ .page-content > .page-container { padding-top: 20px; } .page-content .page-title-box { margin-bottom: 18px !important; } .page-content .page-title-box h4, .page-content .page-title-box h1 { font: 800 30px/1.15 var(--rg-font-display) !important; letter-spacing: -.03em !important; } .rg-page-lead { margin-top: 6px !important; color: var(--rg-muted); font-size: 15px; max-width: 760px; } .rg-page-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } @media (max-width: 575.98px) { .page-content .page-title-box h4, .page-content .page-title-box h1 { font-size: 26px !important; } .rg-page-actions { width: 100%; } .rg-page-actions .btn { flex: 1 1 0; } } /* ---------- Surfaces ---------- */ .page-content .card { border: 0 !important; border-radius: var(--rg-radius) !important; box-shadow: var(--rg-shadow) !important; background: var(--rg-surface) !important; } html[data-bs-theme="dark"] .page-content .card { box-shadow: 0 0 0 1px var(--rg-line) !important; } .page-content .card > .card-header { padding: 18px 22px !important; border-bottom: 1px solid var(--rg-line) !important; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; } .page-content .card > .card-header h5, .page-content .card > .card-header .header-title { font: 700 18px/1.25 var(--rg-font-display) !important; } .page-content .card-body { padding: 20px 22px; } .page-content .card .card { box-shadow: none !important; background: var(--rg-surface-2) !important; border-radius: 16px !important; } /* ---------- Buttons: gradient primary, tinted secondary, pill shapes ---------- */ .btn { border-radius: 999px !important; padding-left: 18px; padding-right: 18px; font-weight: 600; letter-spacing: -.01em; transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease; } .btn:active { transform: scale(.97); } .btn-primary, .btn-success, .btn-warning:not(td .btn-warning), .btn-info:not(td .btn-info) { background: var(--rg-grad) !important; border: 0 !important; color: #fff !important; box-shadow: 0 8px 20px rgba(224, 84, 27, .32); } .btn-primary:hover, .btn-success:hover { filter: brightness(1.06) saturate(1.05); box-shadow: 0 10px 26px rgba(224, 84, 27, .4); } html[data-bs-theme="dark"] .btn-primary, html[data-bs-theme="dark"] .btn-success { color: #1b0c05 !important; } .btn-secondary, .btn-light, .btn-outline-secondary { background: var(--rg-fill) !important; border: 0 !important; color: var(--rg-text) !important; box-shadow: none !important; } .btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover { background: color-mix(in srgb, var(--rg-fill) 80%, #000 6%) !important; } .btn-outline-danger, .btn-danger { background: color-mix(in srgb, var(--rg-red) 12%, transparent) !important; border: 0 !important; color: var(--rg-red) !important; } .btn-outline-primary { background: var(--rg-brand-soft) !important; border: 0 !important; color: var(--rg-brand) !important; } .btn-sm { padding: 6px 14px !important; font-size: 13.5px; } .rg-btn-icon svg { width: 18px; height: 18px; } /* Table action buttons (view / edit / delete / gallery / tags): tinted squircles with clear colours instead of loud blocks */ td .btn.btn-sm, td a.btn.btn-sm, td button.btn.btn-sm, td .btn[style] { border-radius: 12px !important; width: 40px; height: 40px; padding: 0 !important; box-shadow: none !important; border: 0 !important; display: inline-grid !important; place-items: center; } td .btn:has(.fa-eye), td .btn:has(.mdi-eye) { background: color-mix(in srgb, var(--rg-blue) 13%, transparent) !important; color: var(--rg-blue) !important; } td .btn:has(.fa-edit), td .btn:has(.fa-pen), td .btn:has(.fa-pencil-alt), td .btn:has(.mdi-pencil) { background: color-mix(in srgb, var(--rg-amber) 15%, transparent) !important; color: var(--rg-amber) !important; } td .btn:has(.fa-trash), td .btn:has(.fa-trash-alt), td .btn:has(.mdi-delete), td .btn-danger { background: color-mix(in srgb, var(--rg-red) 12%, transparent) !important; color: var(--rg-red) !important; } td .btn:has(.fa-image), td .btn:has(.fa-images), td .btn:has(.fa-hashtag), td .btn:has(.fa-link), td .btn:has(.fa-toggle-on), td .btn:has(.fa-toggle-off), td .btn:has(.fa-power-off) { background: var(--rg-brand-soft) !important; color: var(--rg-brand) !important; } td .btn i, td .btn .fas { color: inherit !important; font-size: 15px; } td .btn:hover { filter: brightness(.95); } /* ---------- Fields: filled, iOS-like ---------- */ .form-control, .form-select { background-color: var(--rg-fill) !important; border: 1.5px solid transparent !important; border-radius: 13px !important; min-height: 48px; padding-left: 14px; color: var(--rg-ink) !important; } .form-control:hover, .form-select:hover { background-color: color-mix(in srgb, var(--rg-fill) 85%, #000 4%) !important; } .form-control:focus, .form-select:focus { background-color: var(--rg-surface) !important; border-color: var(--rg-brand) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rg-brand) 18%, transparent) !important; } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--rg-red) !important; background-color: color-mix(in srgb, var(--rg-red) 6%, var(--rg-surface)) !important; } .form-control[type="file"] { padding: 10px 12px; } .form-control[type="file"]::file-selector-button { border: 0; border-radius: 999px; padding: 6px 14px; margin-right: 12px; background: var(--rg-brand-soft); color: var(--rg-brand); font-weight: 700; } .form-label, .col-form-label { font-weight: 650; font-size: 14px; color: var(--rg-ink); } .form-check-input:checked { background-color: var(--rg-brand); border-color: var(--rg-brand); } .form-switch .form-check-input { height: 1.5em; width: 2.6em; } .ql-toolbar.ql-snow { border-radius: 13px 13px 0 0; border-color: var(--rg-line) !important; background: var(--rg-surface-2); } .ql-container.ql-snow { border-radius: 0 0 13px 13px; border-color: var(--rg-line) !important; font-size: 16px; } /* ---------- Lists ---------- */ .page-content .table > thead th { background: transparent !important; border-bottom: 1px solid var(--rg-line) !important; font: 650 12px/1.3 var(--rg-font) !important; letter-spacing: .03em; color: var(--rg-muted) !important; } .page-content .table > tbody > tr > td { border-color: var(--rg-line) !important; padding-top: 14px; padding-bottom: 14px; } .page-content .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent !important; } .page-content .table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0 !important; } .page-content table.table { border: 0 !important; } .page-content .table tbody tr:hover > td { background: color-mix(in srgb, var(--rg-brand) 4%, transparent) !important; } .dt-container .dt-search input { border-radius: 999px !important; background: var(--rg-fill) !important; border: 0 !important; padding-left: 16px; min-width: 220px; } .dt-container .dt-paging .page-link { border: 0 !important; background: transparent; color: var(--rg-text); } .dt-container .dt-paging .page-item.active .page-link { background: var(--rg-grad) !important; color: #fff !important; } @media (max-width: 767.98px) { table.rg-cards > tbody > tr { border: 0 !important; border-radius: 18px !important; box-shadow: var(--rg-shadow) !important; padding: 8px 16px !important; } html[data-bs-theme="dark"] table.rg-cards > tbody > tr { box-shadow: 0 0 0 1px var(--rg-line) !important; } } /* ---------- Badges / chips ---------- */ .badge { border-radius: 999px !important; padding: .42em .8em; font-weight: 650; } .badge.bg-success, .badge.bg-soft-success { background: color-mix(in srgb, var(--rg-green) 14%, transparent) !important; color: var(--rg-green) !important; } .badge.bg-danger, .badge.bg-soft-danger { background: color-mix(in srgb, var(--rg-red) 13%, transparent) !important; color: var(--rg-red) !important; } .badge.bg-warning, .badge.bg-soft-warning { background: color-mix(in srgb, var(--rg-amber) 16%, transparent) !important; color: var(--rg-amber) !important; } .rg-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--rg-brand-soft); color: var(--rg-brand); font: 650 12.5px/1.2 var(--rg-font); } .rg-chip--muted { background: var(--rg-fill); color: var(--rg-muted); } /* ---------- Dashboard ---------- */ .rg-hero { position: relative; overflow: hidden; margin: 0 0 18px; padding: 26px 26px 24px; border-radius: 26px; background: var(--rg-hero); color: #fff; box-shadow: 0 18px 44px rgba(196, 58, 12, .32); } .rg-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 65%); pointer-events: none; } .rg-hero h1 { margin: 0 0 6px; font: 800 30px/1.15 var(--rg-font-display); letter-spacing: -.03em; color: #fff; } .rg-hero p { margin: 0 0 18px; color: rgba(255, 255, 255, .86); font-size: 15px; max-width: 620px; } .rg-hero .btn { background: rgba(255, 255, 255, .95) !important; color: #b4330b !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .18) !important; } .rg-hero .btn.rg-hero__ghost { background: rgba(255, 255, 255, .16) !important; color: #fff !important; box-shadow: none !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .rg-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg { border-radius: 14px !important; background-image: var(--rg-grad) !important; box-shadow: 0 8px 18px rgba(224, 84, 27, .28); } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-success { background-image: linear-gradient(135deg, #34c76f, #1f8f4e) !important; box-shadow: 0 8px 18px rgba(31, 143, 78, .28); } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-warning { background-image: linear-gradient(135deg, #ffc247, #e08a00) !important; box-shadow: 0 8px 18px rgba(224, 138, 0, .28); } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-danger { background-image: linear-gradient(135deg, #ff6b7a, #d1283b) !important; box-shadow: 0 8px 18px rgba(209, 40, 59, .28); } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-info { background-image: linear-gradient(135deg, #4fc3ff, #0a66d8) !important; box-shadow: 0 8px 18px rgba(10, 102, 216, .28); } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-secondary, .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-dark { background-image: linear-gradient(135deg, #8e8e93, #48484a) !important; box-shadow: 0 8px 18px rgba(72, 72, 74, .25); } .page-content .row.g-3 .h3 { font: 800 30px/1.1 var(--rg-font-display) !important; letter-spacing: -.03em; } /* ---------- Form sheet (create / upload forms open over the list) ---------- */ html.rg-sheet-open { overflow: hidden; } .rg-fsheet { position: fixed; inset: 0; z-index: 1060; display: flex; justify-content: flex-end; background: rgba(10, 14, 22, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s ease; } .rg-fsheet[hidden] { display: none; } .rg-fsheet.is-open { opacity: 1; } .rg-fsheet__panel { position: relative; display: flex; flex-direction: column; width: min(760px, 100%); height: 100%; background: var(--rg-bg); box-shadow: var(--rg-shadow-lg); transform: translateX(28px); transition: transform .28s cubic-bezier(.2, .8, .2, 1); } .rg-fsheet.is-open .rg-fsheet__panel { transform: none; } .rg-fsheet__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; padding-top: calc(16px + env(safe-area-inset-top)); background: color-mix(in srgb, var(--rg-surface) 82%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--rg-line); } .rg-fsheet__title { flex: 1; min-width: 0; margin: 0; font: 750 19px/1.2 var(--rg-font-display); letter-spacing: -.02em; color: var(--rg-ink); } .rg-fsheet__close { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--rg-fill); color: var(--rg-text); font-size: 20px; line-height: 1; cursor: pointer; flex: 0 0 auto; } .rg-fsheet__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 18px 20px calc(110px + env(safe-area-inset-bottom)); } .rg-fsheet__body > .card, .rg-fsheet__body .card.shadow, .rg-fsheet__body > div > .card { box-shadow: none !important; margin-bottom: 0; } .rg-fsheet__body .card > .card-header:first-child:has(h5) { display: none; } .rg-fsheet__body .row > [class*="col-sm-3"] { width: 100%; } .rg-fsheet__body .row > [class*="col-sm-9"] { width: 100%; } .rg-fsheet__body .row > .offset-sm-3 { margin-left: 0; } .rg-fsheet__body .col-lg-8.mx-auto, .rg-fsheet__body .col-lg-10.mx-auto, .rg-fsheet__body .col-lg-6.mx-auto { width: 100%; } .rg-fsheet__body .col-form-label { padding-top: 0; padding-bottom: 6px; } .rg-fsheet__body hr { display: none; } /* the form's own submit row becomes a sticky bar at the bottom of the sheet */ .rg-fsheet__body form [type="submit"] { min-height: 52px; font-size: 16px; } .rg-fsheet__submitbar { position: sticky; bottom: calc(-110px - env(safe-area-inset-bottom)); margin: 22px -20px 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--rg-surface) 86%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--rg-line); display: flex; gap: 10px; justify-content: flex-end; z-index: 3; } .rg-fsheet__submitbar .btn { min-width: 160px; } @media (max-width: 767.98px) { .rg-fsheet { align-items: flex-end; } .rg-fsheet__panel { width: 100%; height: calc(100% - 10px - env(safe-area-inset-top)); border-radius: 22px 22px 0 0; overflow: hidden; transform: translateY(40px); } .rg-fsheet__head { padding-top: 14px; } .rg-fsheet__head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--rg-line); } .rg-fsheet__body { padding: 14px 14px calc(110px + env(safe-area-inset-bottom)); } .rg-fsheet__submitbar { margin: 18px -14px 0; padding-left: 14px; padding-right: 14px; } .rg-fsheet__submitbar .btn { flex: 1 1 0; min-width: 0; } } /* "New ..." button + count in the page header */ .rg-new-btn svg { width: 18px; height: 18px; } /* ---------- News composer (steps + live preview) ---------- */ .rg-steps { position: sticky; top: -18px; z-index: 4; display: flex; gap: 4px; margin: -18px -20px 16px; padding: 12px 20px; background: color-mix(in srgb, var(--rg-bg) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .rg-steps__seg { display: flex; flex: 1; padding: 3px; border-radius: 13px; background: var(--rg-fill); } .rg-steps button { flex: 1 1 0; min-height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--rg-muted); font: 650 13.5px/1.2 var(--rg-font); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .rg-steps button[aria-selected="true"] { background: var(--rg-surface); color: var(--rg-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .1); } .rg-steps button .rg-step-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; background: var(--rg-line); color: var(--rg-text); } .rg-steps button[aria-selected="true"] .rg-step-dot { background: var(--rg-grad); color: #fff; } .rg-steps button.has-error .rg-step-dot { background: var(--rg-red); color: #fff; } @media (max-width: 767.98px) { .rg-steps { margin: -14px -14px 14px; padding: 10px 14px; } .rg-steps button .rg-step-label { font-size: 12.5px; } } .rg-step-panel[hidden] { display: none !important; } .rg-step-panel > .row, .rg-step-panel > .mb-3, .rg-step-panel > .card { background: var(--rg-surface); border-radius: 18px; padding: 16px 16px 6px; margin: 0 0 12px !important; box-shadow: var(--rg-shadow); } html[data-bs-theme="dark"] .rg-step-panel > .row, html[data-bs-theme="dark"] .rg-step-panel > .mb-3 { box-shadow: 0 0 0 1px var(--rg-line); } .rg-step-panel > .card { padding: 0; } .rg-step-nav { display: flex; gap: 10px; margin-top: 6px; } .rg-step-nav .btn { flex: 1 1 0; } .rg-compose-preview { margin: 0 0 14px; border-radius: 18px; overflow: hidden; background: var(--rg-surface); box-shadow: var(--rg-shadow); } .rg-compose-preview__img { aspect-ratio: 16 / 9; background: var(--rg-grad-soft) center / cover no-repeat; display: grid; place-items: center; color: var(--rg-brand); font-weight: 650; font-size: 14px; } .rg-compose-preview__img.has-img span { display: none; } .rg-compose-preview__body { padding: 12px 16px 14px; } .rg-compose-preview__cat { font: 700 12px/1 var(--rg-font); color: var(--rg-brand); text-transform: uppercase; letter-spacing: .05em; } .rg-compose-preview__title { margin: 6px 0 4px; font: 750 19px/1.3 "Mukta", var(--rg-font-display); color: var(--rg-ink); } .rg-compose-preview__title:empty::before { content: "Your headline appears here"; color: var(--rg-muted); font-weight: 500; } .rg-compose-preview__sub { margin: 0; color: var(--rg-muted); font-size: 14.5px; } .rg-counter { float: right; font-size: 12px; color: var(--rg-muted); font-weight: 500; } .rg-counter.is-over { color: var(--rg-red); font-weight: 700; } /* ---------- Celebration (success) + problem pop-ups ---------- */ .rg-pop { position: fixed; inset: 0; z-index: 1120; display: grid; place-items: center; padding: 20px; background: rgba(10, 14, 22, .36); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: rg-fade .2s ease; } .rg-pop[hidden] { display: none; } .rg-pop__card { position: relative; width: min(380px, 100%); padding: 30px 26px 22px; border-radius: 28px; background: var(--rg-surface); text-align: center; box-shadow: var(--rg-shadow-lg); animation: rg-popin .42s cubic-bezier(.2, 1.4, .3, 1); overflow: hidden; } .rg-pop__icon { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #3ad17d, #1f8f4e); color: #fff; box-shadow: 0 14px 30px rgba(31, 143, 78, .35); } .rg-pop__icon svg { width: 40px; height: 40px; } .rg-pop__icon svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: rg-draw .45s .18s ease forwards; } .rg-pop--error .rg-pop__icon { background: linear-gradient(135deg, #ff7a86, #d1283b); box-shadow: 0 14px 30px rgba(209, 40, 59, .35); } .rg-pop__card h2 { margin: 0 0 6px; font: 800 23px/1.2 var(--rg-font-display); letter-spacing: -.02em; color: var(--rg-ink); } .rg-pop__card p { margin: 0 0 18px; color: var(--rg-muted); font-size: 15.5px; line-height: 1.5; } .rg-pop__card ul { margin: -6px 0 18px; padding: 0; list-style: none; text-align: left; } .rg-pop__card li { position: relative; padding: 9px 12px 9px 34px; margin-bottom: 6px; border-radius: 12px; background: color-mix(in srgb, var(--rg-red) 8%, transparent); color: var(--rg-text); font-size: 14.5px; } .rg-pop__card li::before { content: "!"; position: absolute; left: 10px; top: 9px; width: 17px; height: 17px; border-radius: 50%; background: var(--rg-red); color: #fff; font: 800 11px/17px var(--rg-font); text-align: center; } .rg-pop__card .btn { width: 100%; min-height: 50px; font-size: 16px; } .rg-pop__actions { display: flex; gap: 10px; } .rg-pop__actions .btn { flex: 1 1 0; } .rg-confetti { position: absolute; inset: 0; pointer-events: none; } .rg-confetti i { position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: rg-fall 1.4s ease-out forwards; } @keyframes rg-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes rg-popin { from { opacity: 0; transform: scale(.86) translateY(10px); } to { opacity: 1; transform: none; } } @keyframes rg-draw { to { stroke-dashoffset: 0; } } @keyframes rg-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(300px) rotate(540deg); } } /* Confirm sheet (replaces the browser's grey confirm box) */ .rg-pop--confirm .rg-pop__icon { background: linear-gradient(135deg, #ff7a86, #d1283b); } /* ---------- Bottom bar: raised post button ---------- */ @media (max-width: 991.98px) { .rg-bottom-nav { grid-template-columns: repeat(5, 1fr) !important; } .rg-bottom-nav a, .rg-bottom-nav button { font-weight: 600 !important; } .rg-bottom-nav [aria-current="page"] { background: transparent !important; color: var(--rg-brand) !important; } .rg-bottom-nav__post { color: var(--rg-ink) !important; } .rg-bottom-nav__plus { display: grid; place-items: center; width: 46px; height: 34px; margin-top: -2px; border-radius: 12px; background: var(--rg-grad); color: #fff; box-shadow: 0 8px 18px rgba(224, 84, 27, .4); } .rg-bottom-nav__plus svg { width: 22px; height: 22px; stroke-width: 2.4; } } /* ---------- Ad templates ---------- */ .rg-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } .rg-tpl { display: flex; flex-direction: column; border-radius: var(--rg-radius); background: var(--rg-surface); box-shadow: var(--rg-shadow); overflow: hidden; } html[data-bs-theme="dark"] .rg-tpl { box-shadow: 0 0 0 1px var(--rg-line); } .rg-tpl__stage { display: grid; place-items: center; height: 190px; padding: 18px; background: var(--rg-grad-soft); } .rg-tpl__frame { max-width: 100%; max-height: 100%; height: 100%; display: grid; place-items: center; border-radius: 10px; border: 2px dashed color-mix(in srgb, var(--rg-brand) 55%, transparent); background: color-mix(in srgb, var(--rg-surface) 70%, transparent); color: var(--rg-brand); font: 750 14px/1 var(--rg-font); } .rg-tpl__frame[style*="aspect-ratio: 1500"], .rg-tpl__frame[style*="aspect-ratio: 1080 / 1350"] { height: auto; width: 100%; } .rg-tpl__frame[style*="aspect-ratio: 1080 / 1350"] { width: auto; height: 100%; } .rg-tpl__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; } .rg-tpl__body h2 { margin: 0 0 8px; font: 750 17px/1.3 var(--rg-font-display); color: var(--rg-ink); } .rg-tpl__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .rg-tpl__rules { margin: 0 0 14px; padding-left: 18px; color: var(--rg-muted); font-size: 13.5px; } .rg-tpl__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .rg-tpl__actions .btn { flex: 1 1 0; padding-left: 10px; padding-right: 10px; } /* ---------- Export button in list headers ---------- */ .rg-export-btn svg { width: 17px; height: 17px; } .rg-export-btn { background: color-mix(in srgb, var(--rg-green) 12%, transparent) !important; color: var(--rg-green) !important; border: 0 !important; } /* ---------- Login page ---------- */ body.authentication-bg { background: var(--rg-hero) !important; } body.authentication-bg .card { border: 0; border-radius: 28px; box-shadow: var(--rg-shadow-lg); } body.authentication-bg .btn-primary { width: 100%; min-height: 52px; font-size: 16px; } @media (prefers-reduced-motion: reduce) { .rg-fsheet, .rg-fsheet__panel, .rg-pop, .rg-pop__card, .rg-confetti i { transition: none !important; animation: none !important; } .rg-pop__icon svg path { stroke-dashoffset: 0; } } /* Fields show focus with the brand ring (one clear ring instead of a yellow outline on top of it) */ .form-control:focus-visible, .form-select:focus-visible { outline: none !important; } /* Clean rows: no zebra stripes */ .page-content .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent !important; --bs-table-accent-bg: transparent !important; box-shadow: none !important; } .page-content .card.page-title-box { box-shadow: none !important; background: transparent !important; } .page-content .row.g-3 .h3, .page-content .row.g-3 .h3 span { color: var(--rg-ink) !important; } /* ---------- News "View": related images, tag links, hashtags ---------- */ .rg-view-section { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--rg-line); } .rg-view-section__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 750 16px/1.3 var(--rg-font-display); color: var(--rg-ink); } .rg-view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .rg-view-img { margin: 0; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--rg-surface-2); box-shadow: 0 0 0 1px var(--rg-line); } .rg-view-img__pic { display: block; aspect-ratio: 4 / 3; background: var(--rg-fill); } .rg-view-img__pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .rg-view-img figcaption { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 2px; } .rg-view-img figcaption strong { font-size: 14.5px; color: var(--rg-ink); line-height: 1.35; } .rg-view-img figcaption span { font-size: 13px; color: var(--rg-muted); line-height: 1.45; } .rg-view-actions { display: flex; gap: 6px; padding: 8px 12px 12px; margin-top: auto; } .rg-view-actions .btn { width: 38px; height: 38px; padding: 0 !important; border-radius: 11px !important; display: inline-grid !important; place-items: center; box-shadow: none !important; border: 0 !important; } .rg-view-actions .btn:has(.fa-eye) { background: color-mix(in srgb, var(--rg-blue) 13%, transparent) !important; color: var(--rg-blue) !important; } .rg-view-actions .btn:has(.fa-edit) { background: color-mix(in srgb, var(--rg-amber) 15%, transparent) !important; color: var(--rg-amber) !important; } .rg-view-actions .btn:has(.fa-trash) { background: color-mix(in srgb, var(--rg-red) 12%, transparent) !important; color: var(--rg-red) !important; } .rg-view-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rg-view-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--rg-surface-2); box-shadow: 0 0 0 1px var(--rg-line); } .rg-view-list__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rg-view-list__text strong { color: var(--rg-ink); font-size: 14.5px; } .rg-view-list__text small { color: var(--rg-muted); overflow-wrap: anywhere; } .rg-view-list .rg-view-actions { padding: 0; margin: 0; } /* The theme shows the panel at 65% (app.min.css: body { zoom: 65% }) — the desktop density the team uses. Phones / tablets and the sign-in page use real size, so taps are 44 px and fields 16 px (no iOS zoom on focus). */ @media (max-width: 991.98px) { body { zoom: 1 !important; } } body.rg-login { zoom: 1 !important; } @media (max-width: 575.98px) { .rg-install-btn > span { display: none; } .rg-install-btn { width: 40px; padding: 0 !important; } .app-topbar .topbar-menu { gap: 4px; } .rg-topbar-title { max-width: 40vw; font-size: 16px; } } @media (max-width: 575.98px) { .rg-topbar-title { display: none !important; } } /* ===================================================================================================== v3 — bigger panel, designer icons (Phosphor duotone), fresher gradients ===================================================================================================== */ :root, html[data-bs-theme="light"], html[data-bs-theme="dark"] { --bs-sidenav-width: 280px; /* saffron -> flame -> coral: bright and clean, no muddy browns */ --rg-grad: linear-gradient(135deg, #ffad4a 0%, #ff7a2f 38%, #f2522a 72%, #e63950 100%); --rg-glow: 0 10px 24px rgba(242, 82, 42, .34); --rg-hero: radial-gradient(60% 90% at 0% 0%, #ffc56b 0%, transparent 60%), radial-gradient(55% 80% at 100% 0%, #ff5a7a 0%, transparent 60%), radial-gradient(70% 90% at 60% 120%, #ff6a2b 0%, transparent 65%), linear-gradient(135deg, #ff8a3d 0%, #f4512c 55%, #e23a4e 100%); --rg-side: radial-gradient(120% 50% at 0% 0%, rgba(255, 122, 47, .22) 0%, transparent 60%), linear-gradient(180deg, #1c1c22 0%, #141418 55%, #0f0f13 100%); } /* Desktop: a little larger than the theme's 65% */ @media (min-width: 992px) { body { zoom: 80% !important; } } /* ---------- Sidebar ---------- */ .sidenav-menu { background: var(--rg-side) !important; } .sidenav-menu .logo { height: auto !important; padding: 22px 26px 14px !important; display: block; } .sidenav-menu .logo img { height: 34px !important; width: auto; max-width: 100%; } .sidenav-menu .side-nav-title { padding: 20px 26px 8px !important; font-size: 11.5px !important; color: #8b8b95 !important; } .sidenav-menu .side-nav-link { min-height: 50px !important; margin: 2px 14px !important; padding: 8px 12px !important; gap: 14px !important; border-radius: 14px !important; font-size: 16px !important; font-weight: 550 !important; color: #d6d6dc !important; transition: background .15s ease, color .15s ease; } .sidenav-menu .side-nav-link .menu-icon { width: 36px !important; height: 36px !important; border-radius: 11px !important; background: rgba(255, 255, 255, .06) !important; color: #ffb27a !important; } .sidenav-menu .side-nav-link .menu-icon .rg-ico { width: 22px; height: 22px; } .sidenav-menu .side-nav-link:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; } .sidenav-menu .side-nav-link.active { background: rgba(255, 255, 255, .09) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important; } .sidenav-menu .side-nav-link.active .menu-icon { background: var(--rg-grad) !important; color: #fff !important; box-shadow: var(--rg-glow) !important; } .sidenav-menu .side-nav-link.active::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #ff9a52; box-shadow: 0 0 10px #ff9a52; } /* phone / tablet drawer: wider, bigger rows */ @media (max-width: 991.98px) { :root, html[data-bs-theme] { --bs-sidenav-width: min(320px, 86vw); } .sidenav-menu { width: min(320px, 86vw) !important; box-shadow: 24px 0 60px rgba(0, 0, 0, .35) !important; } .sidenav-menu .side-nav-link { min-height: 54px !important; font-size: 17px !important; } .sidenav-menu .side-nav-link .menu-icon { width: 40px !important; height: 40px !important; } .sidenav-menu .side-nav-link .menu-icon .rg-ico { width: 24px; height: 24px; } .sidenav-menu .logo img { height: 38px !important; } } /* ---------- Topbar / page ---------- */ .app-topbar { min-height: 68px; } .app-topbar .topbar-menu { min-height: 68px; } .page-content .page-title-box h4, .page-content .page-title-box h1 { font-size: 34px !important; } .btn { min-height: 46px; font-size: 15.5px; } .btn-primary, .btn-success, .rg-avatar { background-image: var(--rg-grad) !important; box-shadow: var(--rg-glow) !important; } .sidenav-menu .side-nav-link .menu-icon, .rg-bottom-nav .rg-ico { flex: 0 0 auto; } /* ---------- Hero + stat tiles ---------- */ .rg-hero { background: var(--rg-hero) !important; box-shadow: 0 22px 50px rgba(242, 82, 42, .3) !important; padding: 30px 30px 28px !important; } .rg-hero h1 { font-size: 34px !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg { background-image: var(--rg-grad) !important; box-shadow: var(--rg-glow) !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-success { background-image: linear-gradient(135deg, #5ee08f 0%, #22b363 55%, #138a4a 100%) !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-warning { background-image: linear-gradient(135deg, #ffd66b 0%, #ffad2f 55%, #f08a00 100%) !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-danger { background-image: linear-gradient(135deg, #ff8fa0 0%, #ff4d6a 55%, #e2264a 100%) !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-info { background-image: linear-gradient(135deg, #7fd8ff 0%, #3aa8ff 55%, #1f6fe0 100%) !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-secondary, .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-dark { background-image: linear-gradient(135deg, #a7a7b4 0%, #6e6e7c 55%, #4a4a56 100%) !important; } /* ---------- Bottom bar (phones) ---------- */ @media (max-width: 991.98px) { :root { --rg-bottom-nav: calc(72px + env(safe-area-inset-bottom)); } .rg-bottom-nav a, .rg-bottom-nav button { font-size: 12px !important; gap: 4px !important; } .rg-bottom-nav .rg-ico { width: 26px; height: 26px; } .rg-bottom-nav__plus { width: 52px !important; height: 38px !important; border-radius: 14px !important; background: var(--rg-grad) !important; box-shadow: var(--rg-glow) !important; } .rg-bottom-nav__plus .rg-ico { width: 24px; height: 24px; } } /* icons inside buttons */ .btn .rg-ico { width: 20px; height: 20px; } .rg-pop__icon .rg-ico { width: 40px; height: 40px; } .rg-pop__icon { background: linear-gradient(135deg, #5ee08f, #138a4a) !important; } .rg-pop--error .rg-pop__icon, .rg-pop--confirm .rg-pop__icon { background: linear-gradient(135deg, #ff8fa0, #e2264a) !important; } .rg-hero .btn { color: #e2402c !important; } body.authentication-bg, body.rg-login { background: var(--rg-hero) !important; } .sidenav-menu .side-nav .side-nav-item .side-nav-link .menu-icon .rg-ico { width: 23px !important; height: 23px !important; font-size: inherit !important; } @media (max-width: 991.98px) { .sidenav-menu .side-nav .side-nav-item .side-nav-link .menu-icon .rg-ico { width: 25px !important; height: 25px !important; } } .rg-new-btn .badge { background: rgba(255, 255, 255, .28) !important; color: #fff !important; font-weight: 700; } /* ===================================================================================================== v4 — refined & professional: calmer surfaces, solid brand accents, one consistent full-screen workspace for every "New", "View" and "Edit" (same header, centred content, fixed footer). ===================================================================================================== */ :root, html[data-bs-theme="light"] { --rg-brand: #d9481a; --rg-brand-strong: #b83a12; --rg-brand-soft: #fdf0ea; --rg-grad: linear-gradient(180deg, #e4572a 0%, #d9481a 100%); --rg-glow: 0 1px 2px rgba(16, 24, 40, .12); --rg-shadow: 0 1px 2px rgba(16, 24, 40, .05); --rg-shadow-lg: 0 20px 48px rgba(16, 24, 40, .18); --rg-line: #e6e8ec; --rg-bg: #f5f6f8; --rg-fill: #f1f2f5; --rg-radius: 14px; --rg-radius-sm: 10px; --rg-side: #16181d; } html[data-bs-theme="dark"] { --rg-brand: #ff7a45; --rg-brand-soft: rgba(255, 122, 69, .12); --rg-grad: linear-gradient(180deg, #ff7f4c 0%, #f06a35 100%); --rg-glow: none; --rg-shadow: none; --rg-side: #111214; } /* Surfaces: thin border, no heavy shadow */ .page-content .card { border: 1px solid var(--rg-line) !important; box-shadow: var(--rg-shadow) !important; border-radius: var(--rg-radius) !important; } .page-content .card.page-title-box { border: 0 !important; } .page-content .card > .card-header { padding: 16px 20px !important; } .page-content .card > .card-header h5, .page-content .card > .card-header .header-title { font-size: 16px !important; font-weight: 650 !important; } .page-content .page-title-box h4, .page-content .page-title-box h1 { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.02em !important; } /* Buttons: solid brand, 10px corners (an admin tool, not a toy) */ .btn { border-radius: 10px !important; min-height: 42px; font-size: 14.5px; font-weight: 600; padding-left: 16px; padding-right: 16px; } .btn-sm { min-height: 34px; border-radius: 8px !important; } .btn-primary, .btn-success, .btn-warning:not(td .btn-warning), .btn-info:not(td .btn-info) { background: var(--rg-brand) !important; background-image: none !important; box-shadow: var(--rg-glow) !important; color: #fff !important; } .btn-primary:hover, .btn-success:hover { background: var(--rg-brand-strong) !important; filter: none; box-shadow: var(--rg-glow) !important; } .btn:active { transform: none; } .rg-export-btn { background: #fff !important; color: #1f7a45 !important; box-shadow: inset 0 0 0 1px var(--rg-line) !important; } html[data-bs-theme="dark"] .rg-export-btn { background: transparent !important; color: #5ad08a !important; } .rg-avatar { background: var(--rg-brand) !important; background-image: none !important; box-shadow: none !important; } td .btn.btn-sm, td a.btn.btn-sm, td button.btn.btn-sm, td .btn[style] { border-radius: 9px !important; width: 36px; height: 36px; } /* Fields: white with a clear border (classic form look) */ .form-control, .form-select { background-color: var(--rg-surface) !important; border: 1px solid #d5d9e0 !important; border-radius: 10px !important; min-height: 44px; } html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select { border-color: #3a3d44 !important; } .form-control:hover, .form-select:hover { background-color: var(--rg-surface) !important; border-color: #b9bfca !important; } .form-control:focus, .form-select:focus { border-color: var(--rg-brand) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg-brand) 16%, transparent) !important; } .form-control[type="file"]::file-selector-button { border-radius: 7px; background: var(--rg-fill); color: var(--rg-text); } .dt-container .dt-search input { border-radius: 10px !important; border: 1px solid var(--rg-line) !important; background: var(--rg-surface) !important; } .dt-container .dt-paging .page-item.active .page-link { background: var(--rg-brand) !important; background-image: none !important; } /* Sidebar: quiet dark, brand only on the current item */ .sidenav-menu { background: var(--rg-side) !important; box-shadow: inset -1px 0 0 rgba(255, 255, 255, .05) !important; } .sidenav-menu .side-nav-title { color: #7e8390 !important; font-weight: 600 !important; letter-spacing: .08em !important; } .sidenav-menu .side-nav-link { min-height: 44px !important; margin: 1px 12px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 500 !important; color: #c3c7cf !important; } .sidenav-menu .side-nav-link .menu-icon { width: 30px !important; height: 30px !important; border-radius: 8px !important; background: transparent !important; color: #9aa0ab !important; } .sidenav-menu .side-nav .side-nav-item .side-nav-link .menu-icon .rg-ico { width: 22px !important; height: 22px !important; } .sidenav-menu .side-nav-link:hover { background: rgba(255, 255, 255, .05) !important; } .sidenav-menu .side-nav-link:hover .menu-icon { color: #e3e5ea !important; } .sidenav-menu .side-nav-link.active { background: rgba(255, 255, 255, .07) !important; box-shadow: inset 3px 0 0 var(--rg-brand) !important; color: #fff !important; } .sidenav-menu .side-nav-link.active .menu-icon { background: transparent !important; color: #ff8b5c !important; box-shadow: none !important; } .sidenav-menu .side-nav-link.active::after { display: none; } @media (max-width: 991.98px) { .sidenav-menu .side-nav-link { min-height: 50px !important; font-size: 16px !important; } .sidenav-menu .side-nav-link .menu-icon { width: 34px !important; height: 34px !important; } } /* Dashboard: calm header card instead of a loud banner; tinted icons instead of gradient blobs */ .rg-hero { background: var(--rg-surface) !important; color: var(--rg-ink) !important; box-shadow: var(--rg-shadow) !important; border: 1px solid var(--rg-line); border-left: 4px solid var(--rg-brand); border-radius: var(--rg-radius) !important; padding: 22px 24px !important; } .rg-hero::after { display: none; } .rg-hero h1 { color: var(--rg-ink) !important; font-size: 26px !important; font-weight: 700 !important; } .rg-hero p { color: var(--rg-muted) !important; margin-bottom: 14px !important; } .rg-hero .btn { background: var(--rg-brand) !important; color: #fff !important; box-shadow: none !important; } .rg-hero .btn.rg-hero__ghost { background: var(--rg-surface) !important; color: #1f7a45 !important; box-shadow: inset 0 0 0 1px var(--rg-line) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg { background-image: none !important; box-shadow: none !important; border-radius: 12px !important; background-color: var(--rg-brand-soft) !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg i { color: var(--rg-brand) !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-success { background-color: #e7f6ee !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-success i { color: #1f8f4e !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-warning { background-color: #fff4e0 !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-warning i { color: #b26a00 !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-danger { background-color: #fdebee !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-danger i { color: #c62a45 !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-info { background-color: #e8f1fe !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-info i { color: #1f63c7 !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-secondary, .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-dark { background-color: #eef0f3 !important; } .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-secondary i, .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg.bg-dark i { color: #4a5160 !important; } html[data-bs-theme="dark"] .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg { background-color: rgba(255, 255, 255, .06) !important; } .page-content .row.g-3 .h3 { font-size: 26px !important; font-weight: 700 !important; } /* Bottom bar */ @media (max-width: 991.98px) { .rg-bottom-nav__plus { background: var(--rg-brand) !important; background-image: none !important; box-shadow: none !important; border-radius: 12px !important; } .rg-bottom-nav { box-shadow: none !important; } } /* Pop-ups: clean, no confetti */ .rg-confetti { display: none !important; } .rg-pop__card { border-radius: 18px; padding: 28px 24px 20px; } .rg-pop__icon { width: 64px; height: 64px; box-shadow: none !important; background: #e7f6ee !important; color: #1f8f4e !important; } .rg-pop--error .rg-pop__icon, .rg-pop--confirm .rg-pop__icon { background: #fdebee !important; color: #c62a45 !important; } .rg-pop__icon .rg-ico { width: 34px; height: 34px; } .rg-pop__card h2 { font-size: 20px; font-weight: 700; } /* ---------- News section: one full-screen workspace for New / View / Edit (other sections use .rg-fsheet--dialog / .rg-modal--dialog below) ---------- */ .rg-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 6px; border: 0; border-radius: 10px; background: transparent; color: var(--rg-brand); font: 600 15px/1 var(--rg-font); cursor: pointer; flex: 0 0 auto; } .rg-back:hover { background: var(--rg-brand-soft); } .rg-back svg { width: 20px; height: 20px; } /* "New ..." workspace (create / upload forms) */ .rg-fsheet--full { background: var(--rg-bg); -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: stretch; align-items: stretch; transition: opacity .18s ease; } .rg-fsheet--full .rg-fsheet__panel, .rg-fsheet--full.is-open .rg-fsheet__panel { width: 100% !important; height: 100% !important; max-width: none; border-radius: 0 !important; box-shadow: none !important; transform: none !important; background: var(--rg-bg); } .rg-fsheet--full .rg-fsheet__panel { animation: rg-ws-in .22s ease both; } @keyframes rg-ws-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .rg-fsheet--full .rg-fsheet__head { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 20px !important; padding-top: calc(10px + env(safe-area-inset-top)) !important; background: var(--rg-surface) !important; border-bottom: 1px solid var(--rg-line); -webkit-backdrop-filter: none; backdrop-filter: none; } .rg-fsheet--full .rg-fsheet__head::before { display: none !important; } .rg-fsheet--full .rg-fsheet__titles { display: flex; flex-direction: column; min-width: 0; padding-left: 10px; border-left: 1px solid var(--rg-line); } .rg-fsheet--full .rg-fsheet__kicker { font: 500 12.5px/1.2 var(--rg-font); color: var(--rg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rg-fsheet--full .rg-fsheet__title { font-size: 18px !important; font-weight: 700 !important; } .rg-fsheet--full .rg-fsheet__body { padding: 24px 20px calc(110px + env(safe-area-inset-bottom)) !important; } .rg-fsheet--full .rg-fsheet__inner { width: 100%; max-width: 880px; margin: 0 auto; } .rg-fsheet--full .rg-fsheet__inner > .card { border: 1px solid var(--rg-line) !important; border-radius: var(--rg-radius) !important; background: var(--rg-surface) !important; } .rg-fsheet--full .rg-fsheet__inner > .card > .card-body { padding: 24px 26px; } .rg-fsheet--full .rg-fsheet__submitbar { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 !important; padding: 12px max(20px, calc((100% - 880px) / 2)) calc(12px + env(safe-area-inset-bottom)) !important; background: var(--rg-surface) !important; border-top: 1px solid var(--rg-line); -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: flex-end; } .rg-fsheet--full .rg-fsheet__submitbar .btn { min-width: 150px; } @media (min-width: 1200px) { .rg-fsheet__inner.rg-compose ~ .rg-fsheet__submitbar, .rg-compose .rg-fsheet__submitbar { padding-left: max(20px, calc((100% - 1200px) / 2)) !important; padding-right: max(20px, calc((100% - 1200px) / 2)) !important; } } @media (max-width: 767.98px) { .rg-fsheet--full .rg-fsheet__head { min-height: 56px; padding: 8px 10px !important; } .rg-fsheet--full .rg-fsheet__head .rg-back span { display: none; } .rg-fsheet--full .rg-fsheet__body { padding: 14px 12px calc(96px + env(safe-area-inset-bottom)) !important; } .rg-fsheet--full .rg-fsheet__inner > .card > .card-body { padding: 16px; } .rg-fsheet--full .rg-fsheet__submitbar { padding-left: 12px !important; padding-right: 12px !important; } .rg-fsheet--full .rg-fsheet__submitbar .btn { flex: 1 1 0; min-width: 0; } } /* News composer: form + live preview side by side on wide screens */ @media (min-width: 1200px) { .rg-fsheet--full .rg-fsheet__inner.rg-compose { max-width: 1200px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; } .rg-compose-aside { position: sticky; top: 0; } .rg-compose-aside__label { margin: 0 0 8px; font: 600 12.5px/1 var(--rg-font); letter-spacing: .06em; text-transform: uppercase; color: var(--rg-muted); } } @media (max-width: 1199.98px) { .rg-compose-aside { display: none; } } .rg-steps { background: var(--rg-surface) !important; border-bottom: 1px solid var(--rg-line); -webkit-backdrop-filter: none; backdrop-filter: none; margin: -24px -26px 18px !important; padding: 12px 26px !important; border-radius: var(--rg-radius) var(--rg-radius) 0 0; top: -24px; } @media (max-width: 767.98px) { .rg-steps { margin: -16px -16px 14px !important; padding: 10px 16px !important; } } .rg-steps button[aria-selected="true"] .rg-step-dot { background: var(--rg-brand) !important; background-image: none !important; } .rg-step-panel > .row, .rg-step-panel > .mb-3, .rg-step-panel > .card { box-shadow: none !important; border: 1px solid var(--rg-line); border-radius: 12px; } .rg-compose-preview { box-shadow: none !important; border: 1px solid var(--rg-line); border-radius: 12px; } .rg-compose-preview__img { background-color: var(--rg-fill) !important; background-image: none; color: var(--rg-muted) !important; } .rg-compose-preview__img.has-img { background-size: cover !important; background-position: center !important; } /* View / Edit windows: the same full-screen workspace */ .modal.rg-modal--full .modal-dialog { width: 100%; max-width: none !important; height: 100%; margin: 0 !important; display: flex; align-items: stretch; } .modal.rg-modal--full .modal-content { width: 100%; height: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: var(--rg-bg); display: flex; flex-direction: column; overflow: hidden; } .modal.rg-modal--full .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .modal.rg-modal--full .modal-header { flex: 0 0 auto; min-height: 64px; padding: 10px 20px !important; padding-top: calc(10px + env(safe-area-inset-top)) !important; background: var(--rg-surface) !important; color: var(--rg-ink) !important; border-bottom: 1px solid var(--rg-line) !important; justify-content: flex-start; gap: 10px; border-radius: 0 !important; } .modal.rg-modal--full .modal-header.bg-info, .modal.rg-modal--full .modal-header.bg-warning, .modal.rg-modal--full .modal-header.bg-primary, .modal.rg-modal--full .modal-header.bg-danger, .modal.rg-modal--full .modal-header.bg-success { background: var(--rg-surface) !important; color: var(--rg-ink) !important; } .modal.rg-modal--full .modal-header .btn-close { display: none; } .rg-modal-titles { display: flex; flex-direction: column; min-width: 0; padding-left: 10px; border-left: 1px solid var(--rg-line); } .rg-modal-kicker { font: 500 12.5px/1.2 var(--rg-font); color: var(--rg-muted); } .modal.rg-modal--full .modal-title { font-size: 18px !important; font-weight: 700 !important; color: var(--rg-ink) !important; margin: 0; } .modal.rg-modal--full .modal-title i { display: none; } .modal.rg-modal--full .modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px max(20px, calc((100% - 880px) / 2)) 28px !important; } .modal.rg-modal--full .modal-footer { flex: 0 0 auto; background: var(--rg-surface); border-top: 1px solid var(--rg-line) !important; padding: 12px max(20px, calc((100% - 880px) / 2)) calc(12px + env(safe-area-inset-bottom)) !important; justify-content: flex-end; gap: 10px; } .modal.rg-modal--full .modal-footer .btn { min-width: 140px; margin: 0; } .modal.rg-modal--full.fade .modal-dialog { transform: translateY(14px); transition: transform .22s ease; } .modal.rg-modal--full.show .modal-dialog { transform: none; } @media (max-width: 767.98px) { .modal.rg-modal--full .modal-header { min-height: 56px; padding: 8px 10px !important; } .modal.rg-modal--full .modal-header .rg-back span { display: none; } .modal.rg-modal--full .modal-body { padding: 14px 12px 20px !important; } .modal.rg-modal--full .modal-footer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; } .modal.rg-modal--full .modal-footer > .btn, .modal.rg-modal--full .modal-footer > form { flex: 1 1 0; min-width: 0; } } /* the read-only "label : value" rows in View windows: one tidy column */ .modal.rg-modal--full .modal-body .row.mb-3 { margin-bottom: 0 !important; padding: 12px 0; border-bottom: 1px solid var(--rg-line); } .modal.rg-modal--full .modal-body .form-control-plaintext { padding: 0; color: var(--rg-ink); } .modal.rg-modal--full .modal-body .col-form-label.fw-bold { color: var(--rg-muted); font-weight: 600 !important; font-size: 13.5px; } /* ---------- Every other section: one consistent window ---------- Desktop: centred, 720 px wide (560 px for short forms), title + close at the top, content scrolls, buttons fixed at the bottom. Phone: the same window as a bottom sheet (full width, up to 92% of the screen). Used for New / View / Edit alike. */ .rg-fsheet--dialog { align-items: center; justify-content: center; padding: 24px; background: rgba(16, 20, 28, .45); -webkit-backdrop-filter: none; backdrop-filter: none; } .rg-fsheet--dialog .rg-fsheet__panel, .rg-fsheet--dialog.is-open .rg-fsheet__panel { width: min(720px, 100%) !important; height: auto !important; max-height: calc(100dvh - 48px); border-radius: 16px !important; overflow: hidden; background: var(--rg-surface); box-shadow: var(--rg-shadow-lg) !important; transform: none !important; animation: rg-dlg-in .2s ease both; } .rg-fsheet--dialog.is-short .rg-fsheet__panel { width: min(560px, 100%) !important; } @keyframes rg-dlg-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } .rg-fsheet--dialog .rg-fsheet__head { flex: 0 0 auto; min-height: 60px; padding: 12px 14px 12px 22px !important; background: var(--rg-surface) !important; border-bottom: 1px solid var(--rg-line); -webkit-backdrop-filter: none; backdrop-filter: none; } .rg-fsheet--dialog .rg-fsheet__head::before { display: none !important; } .rg-fsheet--dialog .rg-fsheet__titles { flex: 1; min-width: 0; order: 1; } .rg-fsheet--dialog .rg-fsheet__kicker { display: none; } .rg-fsheet--dialog .rg-fsheet__title { font-size: 18px !important; font-weight: 700 !important; } .rg-fsheet--dialog .rg-back { order: 2; width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 10px; background: var(--rg-fill); color: var(--rg-text); } .rg-fsheet--dialog .rg-back span, .rg-fsheet--dialog .rg-back svg { display: none; } .rg-fsheet--dialog .rg-back::before { content: "\00d7"; font-size: 24px; line-height: 1; font-weight: 400; } .rg-fsheet--dialog .rg-fsheet__body { flex: 1 1 auto; padding: 0 !important; background: var(--rg-surface); } .rg-fsheet--dialog .rg-fsheet__inner > .card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0; } .rg-fsheet--dialog .rg-fsheet__inner > .card > .card-body { padding: 22px 22px 0; } .rg-fsheet--dialog .rg-fsheet__submitbar { position: sticky; bottom: 0; margin: 22px -22px 0 !important; padding: 14px 22px !important; background: var(--rg-surface) !important; border-top: 1px solid var(--rg-line); -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: flex-end; } .rg-fsheet--dialog .rg-fsheet__submitbar .btn { min-width: 130px; } .rg-fsheet--dialog .card .card { background: var(--rg-surface-2) !important; } @media (max-width: 767.98px) { .rg-fsheet--dialog { align-items: flex-end; padding: 0; } .rg-fsheet--dialog .rg-fsheet__panel, .rg-fsheet--dialog.is-open .rg-fsheet__panel, .rg-fsheet--dialog.is-short .rg-fsheet__panel { width: 100% !important; max-height: 92dvh; border-radius: 16px 16px 0 0 !important; animation-name: rg-sheet-up; } .rg-fsheet--dialog .rg-fsheet__head { padding: 10px 10px 10px 16px !important; } .rg-fsheet--dialog .rg-fsheet__inner > .card > .card-body { padding: 16px 16px 0; } .rg-fsheet--dialog .rg-fsheet__submitbar { margin: 18px -16px 0 !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; } .rg-fsheet--dialog .rg-fsheet__submitbar .btn { flex: 1 1 0; min-width: 0; } } @keyframes rg-sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } } /* View / Edit windows outside News: the same window */ .modal.rg-modal--dialog .modal-dialog { max-width: 720px !important; margin: 24px auto !important; min-height: calc(100% - 48px); display: flex; align-items: center; } .modal.rg-modal--dialog .modal-dialog.modal-sm { max-width: 560px !important; } .modal.rg-modal--dialog .modal-content { width: 100%; max-height: calc(100dvh - 48px); border: 0 !important; border-radius: 16px !important; box-shadow: var(--rg-shadow-lg) !important; background: var(--rg-surface); display: flex; flex-direction: column; overflow: hidden; } .modal.rg-modal--dialog .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .modal.rg-modal--dialog .modal-header { flex: 0 0 auto; min-height: 60px; padding: 12px 14px 12px 22px !important; background: var(--rg-surface) !important; color: var(--rg-ink) !important; border-bottom: 1px solid var(--rg-line) !important; border-radius: 0 !important; } .modal.rg-modal--dialog .modal-header.bg-info, .modal.rg-modal--dialog .modal-header.bg-warning, .modal.rg-modal--dialog .modal-header.bg-primary, .modal.rg-modal--dialog .modal-header.bg-danger, .modal.rg-modal--dialog .modal-header.bg-success { background: var(--rg-surface) !important; color: var(--rg-ink) !important; } .modal.rg-modal--dialog .modal-title { font-size: 18px !important; font-weight: 700 !important; color: var(--rg-ink) !important; } .modal.rg-modal--dialog .modal-title i { display: none; } .modal.rg-modal--dialog .modal-header .btn-close { width: 38px; height: 38px; margin: 0 0 0 auto; padding: 0; border-radius: 10px; background-color: var(--rg-fill); background-size: 12px; opacity: .8; filter: none !important; } .modal.rg-modal--dialog .modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px !important; } .modal.rg-modal--dialog .modal-footer { flex: 0 0 auto; background: var(--rg-surface); border-top: 1px solid var(--rg-line) !important; padding: 14px 22px !important; gap: 10px; } .modal.rg-modal--dialog .modal-footer .btn { min-width: 120px; margin: 0; } .modal.rg-modal--dialog .modal-body .row.mb-3 { margin-bottom: 0 !important; padding: 11px 0; border-bottom: 1px solid var(--rg-line); } .modal.rg-modal--dialog .modal-body .row.mb-3:last-child { border-bottom: 0; } .modal.rg-modal--dialog .modal-body .form-control-plaintext { padding: 0; color: var(--rg-ink); } .modal.rg-modal--dialog .modal-body .col-form-label.fw-bold { color: var(--rg-muted); font-weight: 600 !important; font-size: 13.5px; } @media (max-width: 767.98px) { .modal.rg-modal--dialog .modal-dialog, .modal.rg-modal--dialog .modal-dialog.modal-sm { max-width: none !important; width: 100%; margin: 0 !important; min-height: 100%; align-items: flex-end; } .modal.rg-modal--dialog .modal-content { max-height: 92dvh; border-radius: 16px 16px 0 0 !important; } .modal.rg-modal--dialog .modal-header { padding: 10px 10px 10px 16px !important; } .modal.rg-modal--dialog .modal-body { padding: 16px !important; } .modal.rg-modal--dialog .modal-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; } .modal.rg-modal--dialog .modal-footer > .btn, .modal.rg-modal--dialog .modal-footer > form { flex: 1 1 0; min-width: 0; } .modal.rg-modal--dialog.fade .modal-dialog { transform: translateY(40px); } .modal.rg-modal--dialog.show .modal-dialog { transform: none; } } /* Dashboard tiles: tinted icons for every colour (overrides the older gradient tiles) */ .page-content .row.g-3 > [class*="col-"] > .card .avatar-lg[class*="bg-"] { background-image: none !important; box-shadow: none !important; } /* One window size for every New / View / Edit outside News */ .rg-fsheet--dialog .rg-fsheet__panel, .rg-fsheet--dialog.is-open .rg-fsheet__panel, .rg-fsheet--dialog.is-short .rg-fsheet__panel { width: min(640px, 100%) !important; } .modal.rg-modal--dialog .modal-dialog, .modal.rg-modal--dialog .modal-dialog.modal-sm, .modal.rg-modal--dialog .modal-dialog.modal-lg, .modal.rg-modal--dialog .modal-dialog.modal-xl { max-width: 640px !important; } /* News View / Edit on phones: the whole screen (an older rule capped windows at 94%) */ .modal.rg-modal--full .modal-dialog .modal-content { max-height: none !important; height: 100% !important; border-radius: 0 !important; } .modal.rg-modal--full .modal-dialog { min-height: 100% !important; } @media (max-width: 767.98px) { .rg-fsheet--dialog .rg-fsheet__panel, .rg-fsheet--dialog.is-open .rg-fsheet__panel, .rg-fsheet--dialog.is-short .rg-fsheet__panel { width: 100% !important; } .modal.rg-modal--dialog .modal-dialog, .modal.rg-modal--dialog .modal-dialog.modal-sm, .modal.rg-modal--dialog .modal-dialog.modal-lg, .modal.rg-modal--dialog .modal-dialog.modal-xl { max-width: none !important; } } /* ===================================================================================================== v6 — News composer: full width, two fields per row on desktop, no side preview; image "Preview" button. Tablet / phone: one clear column with comfortable sizes. ===================================================================================================== */ .rg-compose-aside { display: none !important; } .rg-fsheet--full .rg-fsheet__inner, .rg-fsheet--full .rg-fsheet__inner.rg-compose { max-width: 1320px; display: block; } .rg-fsheet--full .rg-fsheet__submitbar { padding-left: max(20px, calc((100% - 1320px) / 2)) !important; padding-right: max(20px, calc((100% - 1320px) / 2)) !important; } /* Each field block inside a step: one tidy card */ .rg-step-panel > .row, .rg-step-panel > .mb-3, .rg-step-panel > .mb-4, .rg-step-panel > div:not(.rg-step-nav):not(.card) { margin: 0 0 14px !important; padding: 16px 18px 14px !important; background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: 12px; box-shadow: none !important; } .rg-step-panel > .row > [class*="col-"] { padding-left: 0; padding-right: 0; } .rg-step-panel > .card { margin: 0 0 14px !important; border: 1px solid var(--rg-line) !important; border-radius: 12px !important; box-shadow: none !important; background: var(--rg-surface) !important; } .rg-step-panel .col-form-label, .rg-step-panel .form-label { display: block; padding: 0 0 8px; margin: 0; font-size: 14px; font-weight: 650; } .rg-step-panel .form-text, .rg-step-panel small.text-muted { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; } .rg-step-nav { margin-top: 4px !important; justify-content: space-between; } .rg-step-nav .btn { flex: 0 0 auto !important; min-width: 140px; } .rg-step-nav .btn:only-child { margin-left: auto; } @media (min-width: 992px) { .rg-step-panel:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; align-items: stretch; } .rg-step-panel > * { min-width: 0; } .rg-step-panel > .rg-span-2 { grid-column: 1 / -1; } .rg-fsheet--full .rg-fsheet__inner > .card > .card-body { padding: 24px 28px 8px; } .rg-steps { margin: -24px -28px 20px !important; padding: 14px 28px !important; } .rg-steps__seg { max-width: 560px; } } /* Image picker + Preview button on one line */ .rg-file-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; } .rg-file-row > input[type="file"] { flex: 1 1 220px; min-width: 0; } .rg-file-row > .rg-file-preview { flex: 0 0 auto; min-height: 44px; padding: 0 16px !important; gap: 6px; } .rg-file-row > .rg-file-preview:disabled { opacity: .5; } .rg-file-row > .rg-file-meta { flex: 1 0 100%; order: 3; margin-top: 0; } /* Image viewer */ .rg-imgview { position: fixed; inset: 0; z-index: 1130; display: grid; place-items: center; padding: 24px; background: rgba(10, 12, 16, .82); animation: rg-fade .15s ease; } .rg-imgview figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; } .rg-imgview img { max-width: 100%; max-height: calc(100dvh - 120px); border-radius: 10px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); object-fit: contain; } .rg-imgview figcaption { color: #e6e8ec; font-size: 14px; text-align: center; overflow-wrap: anywhere; } .rg-imgview__close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; } .rg-imgview__close:hover { background: rgba(255, 255, 255, .24); } /* Tablet (768–991): one column, roomy */ @media (min-width: 768px) and (max-width: 991.98px) { .rg-fsheet--full .rg-fsheet__body { padding: 20px 24px calc(100px + env(safe-area-inset-bottom)) !important; } .rg-fsheet--full .rg-fsheet__inner { max-width: 760px; } .rg-fsheet--full .rg-fsheet__inner > .card > .card-body { padding: 20px 22px 6px; } .rg-steps { margin: -20px -22px 16px !important; padding: 12px 22px !important; } } /* Phone: compact but comfortable */ @media (max-width: 767.98px) { .rg-step-panel > .row, .rg-step-panel > .mb-3, .rg-step-panel > .mb-4, .rg-step-panel > div:not(.rg-step-nav):not(.card) { padding: 14px 14px 12px !important; margin-bottom: 12px !important; } .rg-step-nav .btn { flex: 1 1 0 !important; min-width: 0; } .rg-steps button .rg-step-label { font-size: 13px; } .rg-file-row > .rg-file-preview span { display: none; } .rg-file-row > .rg-file-preview { width: 48px; padding: 0 !important; justify-content: center; } } /* Drop-downs: same height, clear chevron, never wider than the screen */ .form-select { padding-right: 40px !important; background-position: right 14px center !important; background-size: 14px 10px !important; text-overflow: ellipsis; max-width: 100%; } .form-select:disabled { background-color: var(--rg-fill) !important; color: var(--rg-muted) !important; } @media (max-width: 767.98px) { .form-select, .form-control { min-height: 48px; } } .dropdown-menu { max-width: calc(100vw - 24px); } .rg-step-panel > .row { align-content: flex-start; align-items: flex-start; } /* ===================================================================================================== v7 — drop-downs: ~6 rows visible, the rest scrolls (rg-select.js). The native