/* | AsthronAI protected app UI layer | Purpose: premium SaaS visual upgrade on top of Vona without breaking layout mechanics. | Scope: admin + client protected areas that use . */ :root { --asth-font-body: var(--ins-body-font-family, "Geist", sans-serif); --asth-font-display: var(--asth-font-body); --asth-font-mono: var(--ins-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace); --asth-font-size-xs: .72rem; --asth-font-size-sm: .82rem; --asth-font-size-md: .94rem; --asth-font-size-lg: 1.05rem; --asth-font-size-xl: 1.35rem; --asth-font-weight-body: 400; --asth-font-weight-ui: 500; --asth-font-weight-title: 600; --asth-font-weight-heading: 650; --asth-font-weight-strong: 700; --asth-font-weight-label: 650; --asth-letter-label: .055em; --asth-bg-base: #07111f; --asth-bg-accent: #0b1728; --asth-surface: rgba(10, 20, 36, 0.88); --asth-surface-strong: rgba(11, 24, 42, 0.96); --asth-surface-elevated: rgba(14, 28, 48, 0.98); --asth-surface-hover: rgba(255, 255, 255, 0.055); --asth-surface-subtle: rgba(255, 255, 255, 0.035); --asth-text-strong: #f7fbff; --asth-text: #eaf2ff; --asth-text-soft: #a8b6cf; --asth-text-muted: #7d8ca7; --asth-text-inverse: #ffffff; --asth-border: rgba(132, 151, 182, 0.16); --asth-border-subtle: rgba(132, 151, 182, 0.12); --asth-border-strong: rgba(132, 151, 182, 0.24); --asth-border-hover: rgba(132, 151, 182, 0.34); --asth-divider-soft: rgba(128, 128, 128, .15); --asth-overlay-ink-xs: rgba(0, 0, 0, .03); --asth-overlay-ink-sm: rgba(0, 0, 0, .08); --asth-overlay-ink-md: rgba(0, 0, 0, .28); --asth-overlay-ink-lg: rgba(0, 0, 0, .35); --asth-overlay-paper-xs: rgba(255, 255, 255, .08); --asth-overlay-paper-soft: rgba(255, 255, 255, .72); --asth-popover-bg: #0f172a; --asth-popover-text: #ffffff; --asth-popover-border: rgba(255, 255, 255, .08); --asth-backdrop-bg: rgba(9, 14, 27, .56); --asth-brand: #6d7cff; --asth-brand-strong: #2563eb; --asth-brand-subtle: rgba(109, 124, 255, .24); --asth-brand-muted: rgba(109, 124, 255, .14); --asth-primary: #4fe1ff; --asth-primary-strong: #0891b2; --asth-primary-muted: rgba(79, 225, 255, .32); --asth-primary-subtle: rgba(79, 225, 255, .12); --asth-primary-glow: rgba(34, 211, 238, .18); --asth-accent-teal: #14b8a6; --asth-info: #60a5fa; --asth-info-subtle: rgba(96, 165, 250, .14); --asth-success: #3dd598; --asth-success-strong: #059669; --asth-success-subtle: rgba(52, 211, 153, .14); --asth-warn: #f6c760; --asth-warn-subtle: rgba(217, 119, 6, .13); --asth-danger: #ff7a90; --asth-danger-strong: #dc2626; --asth-danger-subtle: rgba(220, 38, 38, .12); --asth-shadow-sm: 0 6px 18px rgba(15, 23, 42, .05); --asth-shadow-md: 0 16px 38px rgba(0, 0, 0, .2); --asth-shadow-lg: 0 24px 60px rgba(0, 0, 0, .28); --asth-radius-sm: .75rem; --asth-radius-md: 1rem; --asth-radius-lg: 18px; --asth-radius-xl: 24px; --asth-scrollbar-track: transparent; --asth-scrollbar-thumb: rgba(148, 163, 184, .28); --asth-scrollbar-thumb-hover: rgba(148, 163, 184, .48); --asth-panel: var(--asth-surface); --asth-accent: var(--asth-primary); --asth-shadow-soft: var(--asth-shadow-md); --asth-card-bg: var(--asth-surface); --asth-card-border: var(--asth-border); --asth-table-hover-bg: rgba(109, 124, 255, .06); --asth-alert-info-bg: rgba(8, 145, 178, .12); --asth-alert-success-bg: rgba(22, 163, 74, .12); --asth-alert-warning-bg: var(--asth-warn-subtle); --asth-alert-danger-bg: var(--asth-danger-subtle); --asth-tab-active-bg: radial-gradient(circle at top left, rgba(79, 225, 255, .16), transparent 45%), linear-gradient(135deg, rgba(37, 99, 235, .26), rgba(79, 225, 255, .11)); --asth-tab-active-border: rgba(79, 225, 255, .28); --asth-list-active-border: rgba(79, 225, 255, .82); --asth-list-active-bg: radial-gradient(circle at 0% 20%, rgba(79, 225, 255, .22), transparent 48%), linear-gradient(135deg, rgba(37, 99, 235, .24), rgba(79, 225, 255, .1) 62%, rgba(34, 211, 238, .13)), rgba(8, 145, 178, .12); --asth-list-active-title: #67e8f9; --asth-list-active-text: var(--ins-body-color); --asth-chat-visitor-bg: rgba(15, 23, 42, .72); --asth-chat-visitor-border: rgba(148, 163, 184, .22); --asth-chat-contrast: var(--asth-text-inverse); --asth-chat-contrast-muted: var(--asth-overlay-paper-soft); --asth-chat-assistant-bg: radial-gradient(circle at top left, rgba(79, 225, 255, .22), transparent 45%), linear-gradient(135deg, rgba(37, 99, 235, .86), rgba(8, 145, 178, .78)); --asth-chat-human-bg: radial-gradient(circle at top left, rgba(52, 211, 153, .22), transparent 45%), linear-gradient(135deg, rgba(5, 150, 105, .88), rgba(20, 184, 166, .72)); --asth-chat-human-border: rgba(52, 211, 153, .34); --asth-chat-system-bg: rgba(148, 163, 184, .08); --asth-chat-system-border: rgba(148, 163, 184, .28); --asth-media-preview-bg: var(--asth-overlay-ink-xs); --asth-billing-summary-bg: radial-gradient(circle at top left, var(--asth-primary-subtle), transparent 40%), linear-gradient(180deg, rgba(13, 23, 39, 0.98) 0%, rgba(10, 18, 31, 0.98) 100%); --asth-billing-summary-border: var(--asth-border); --asth-billing-summary-text: var(--asth-text); --asth-billing-summary-soft: var(--asth-text-soft); --asth-billing-summary-muted: var(--asth-text-muted); --asth-billing-summary-card: rgba(255, 255, 255, 0.04); --asth-billing-summary-card-border: var(--asth-border); --asth-billing-summary-card-shadow: 0 30px 80px rgba(7, 15, 27, 0.28); --asth-billing-back-bg: rgba(255, 255, 255, 0.08); --asth-billing-back-text: var(--asth-text); --asth-billing-back-shadow: 0 14px 30px rgba(23, 37, 53, 0.12); --asth-billing-eyebrow-bg: rgba(79, 225, 255, 0.08); --asth-billing-eyebrow-text: #86efff; --asth-billing-renewal-ring: rgba(50, 182, 122, 0.12); --asth-billing-compare-next-bg: linear-gradient(180deg, rgba(79, 225, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%); --asth-billing-checkout-bg: radial-gradient(circle at top right, rgba(79, 225, 255, 0.12), transparent 36%), linear-gradient(180deg, rgba(13, 23, 39, 0.98) 0%, rgba(10, 18, 31, 0.98) 100%); --asth-billing-checkout-border: var(--asth-border); --asth-billing-checkout-stat: rgba(255, 255, 255, 0.035); --asth-billing-checkout-element: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%), var(--asth-surface); --asth-billing-checkout-element-border: var(--asth-border); --asth-billing-modal-primary: #1d1f24; } /* ========================================================= Public auth experience Shared styling for login, invite, forgot password, and reset password pages. ========================================================= */ .douglas-shell { font-family: var(--asth-font-body); font-weight: var(--asth-font-weight-body); } .douglas-shell h1, .douglas-shell h2, .douglas-shell h3, .douglas-shell h4, .douglas-shell h5, .douglas-shell h6, .douglas-shell .card-title, .douglas-shell .page-title { font-family: var(--asth-font-display); letter-spacing: -.018em; } .douglas-shell h1, .douglas-shell h2, .douglas-shell .display-1, .douglas-shell .display-2, .douglas-shell .dashboard-hero h1, .douglas-shell .dashboard-hero h2 { font-weight: var(--asth-font-weight-heading); line-height: 1.08; } .douglas-shell h3, .douglas-shell h4, .douglas-shell h5, .douglas-shell h6, .douglas-shell .card-title, .douglas-shell .page-title, .douglas-shell .widget-title, .douglas-shell .modal-title, .douglas-shell .offcanvas-title { font-weight: var(--asth-font-weight-title); line-height: 1.18; } .douglas-shell p, .douglas-shell li, .douglas-shell small, .douglas-shell .small, .douglas-shell .text-muted, .douglas-shell .table td, .douglas-shell .dropdown-item { font-weight: var(--asth-font-weight-body); letter-spacing: 0; } .douglas-shell .form-label, .douglas-shell .dashboard-muted-label { font-size: var(--asth-font-size-xs); font-weight: var(--asth-font-weight-label); letter-spacing: var(--asth-letter-label); text-transform: uppercase; } /* ========================================================= Protected shell baseline Shared layout chrome for admin and client workspaces. ========================================================= */ .douglas-shell .content-page { min-height: 100vh; display: flex; flex-direction: column; } .douglas-shell .content { flex: 1 0 auto; padding: 46px 0 28px; } .douglas-shell .sidenav-menu { border-right: 1px solid var(--asth-divider-soft); } .douglas-shell .topbar-link.active, .douglas-shell .side-nav-link.active { color: var(--ins-primary) !important; } .douglas-shell .side-nav-link.active { background: rgba(var(--ins-primary-rgb), .12); } .douglas-shell .side-nav-title { letter-spacing: .08em; font-size: .7rem; text-transform: uppercase; } @media (max-width: 991.98px) { html[data-sidenav-size="hidden"] .sidenav-menu { transform: translateX(-100%); } } /* ========================================================= Shared page modules Small reusable styles formerly duplicated inline on list, notification, usage, booking, and SweetAlert-backed admin pages. ========================================================= */ .douglas-shell .lead-directory-card .card-header { background: linear-gradient(180deg, rgba(var(--ins-info-rgb), .08), transparent); } .douglas-shell .client-directory-card .card-header { background: linear-gradient(180deg, rgba(var(--ins-primary-rgb), .06), transparent); } .douglas-shell .dashboard-section-card .card-header { background: linear-gradient(180deg, rgba(var(--ins-primary-rgb), .05), transparent); } .douglas-shell .lead-directory-card .table thead th, .douglas-shell .client-directory-card .table thead th, .douglas-shell .staff-directory-card .table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ins-secondary-color); } .douglas-shell .lead-directory-card .table tbody td, .douglas-shell .client-directory-card .table tbody td, .douglas-shell .staff-directory-card .table tbody td { vertical-align: top; } .douglas-shell #staff-directory { scroll-margin-top: calc(var(--ins-topbar-height, 76px) + 1rem); } .douglas-shell .content > .container-fluid :is( [role="tabpanel"], .admin-tab-panel, .tab-pane, [data-admin-panel], [data-admin-users-panel], [data-billing-panel], [data-platform-billing-panel], [data-staff-panel], [data-usage-panel], [data-website-edit-panel], .manual-guide-anchor, #knowledge-sources, #media-library ) { scroll-margin-top: calc(var(--ins-topbar-height, 76px) + 1rem); } .douglas-shell .client-table .client-meta { font-size: .82rem; color: var(--ins-secondary-color); } .douglas-shell .lead-directory-filter-form .form-label { margin-bottom: .35rem; font-size: .82rem; font-weight: 600; } .douglas-shell .lead-directory-filter-form .form-control, .douglas-shell .lead-directory-filter-form .form-select, .douglas-shell .client-directory-card .form-control, .douglas-shell .client-directory-card .form-select, .douglas-shell .lead-filter-bar .form-select, .douglas-shell .lead-filter-bar .form-control { border-radius: .8rem; } .douglas-shell .client-directory-card .form-control, .douglas-shell .client-directory-card .form-select { border-radius: .85rem; } .douglas-shell .lead-queue-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .85rem; } .douglas-shell .lead-queue-controls .lead-filter-form { flex: 1 1 560px; min-width: min(100%, 560px); } .douglas-shell .lead-queue-controls .lead-filter-form > div { flex: 1 1 150px; } .douglas-shell .lead-queue-controls .lead-filter-search { flex-basis: 240px; } .douglas-shell .lead-queue-controls .lead-filter-form > div:last-child { flex: 0 0 auto; } .douglas-shell .client-table .client-name { font-weight: var(--asth-font-weight-title); } .douglas-shell .client-inline-badge { display: inline-flex; align-items: center; padding: .3rem .65rem; border-radius: 999px; background: rgba(var(--ins-secondary-rgb), .12); font-size: .8rem; } .douglas-shell .table-metric { display: inline-flex; min-width: 2.25rem; justify-content: center; padding: .2rem .55rem; border-radius: .75rem; background: rgba(var(--ins-primary-rgb), .10); font-weight: var(--asth-font-weight-title); } .douglas-shell .client-action-stack .btn { border-radius: .75rem; } .douglas-shell .staff-action-group .btn { border-radius: .7rem; } .douglas-shell .client-directory-empty { max-width: 420px; margin: 0 auto; } .douglas-shell .staff-tip-card { background: linear-gradient(180deg, rgba(var(--ins-primary-rgb), .04), transparent); } .douglas-shell .invite-link-box { word-break: break-all; } .douglas-shell .usage-overview-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .85rem; } .douglas-shell .usage-overview-meta-value { font-weight: var(--asth-font-weight-title); margin-top: .15rem; } .douglas-shell .booking-help-label { display: inline-flex; align-items: center; gap: .45rem; } .douglas-shell .booking-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; color: var(--asth-text-muted); cursor: help; transition: color .2s ease; } .douglas-shell .booking-help-icon:hover, .douglas-shell .booking-help-icon:focus { color: var(--asth-primary); outline: none; } .douglas-shell .booking-help-icon i { font-size: 1rem; line-height: 1; } .douglas-shell .swal2-client-create-popup, .douglas-shell .asthron-swal-form-popup { border-radius: 18px; } .douglas-shell .swal2-client-create-popup .swal2-title, .douglas-shell .asthron-swal-form-popup .swal2-title { font-size: 1.5rem; font-weight: var(--asth-font-weight-heading); padding-bottom: .25rem; } .douglas-shell .swal2-client-create-popup .swal2-html-container, .douglas-shell .asthron-swal-form-popup .swal2-html-container { text-align: left; padding-top: .5rem; padding-bottom: .5rem; } .douglas-shell .swal2-client-create-popup .swal2-input, .douglas-shell .swal2-client-create-popup .swal2-select, .douglas-shell .asthron-swal-form-popup .swal2-input, .douglas-shell .asthron-swal-form-popup .swal2-select { height: 48px; width: 100%; max-width: 100%; margin: .25rem 0 0; border-radius: 12px; box-sizing: border-box; font-size: .95rem; } .douglas-shell .asthron-swal-form-popup .swal2-textarea { width: 100%; max-width: 100%; margin: .25rem 0 0; border-radius: 12px; box-sizing: border-box; font-size: .95rem; } .douglas-shell .swal2-client-create-popup .form-label, .douglas-shell .asthron-swal-form-popup .form-label { font-size: .85rem; } .douglas-shell .swal2-client-create-popup .swal2-actions, .douglas-shell .asthron-swal-form-popup .swal2-actions { gap: .5rem; } .douglas-shell .swal2-client-create-popup .swal2-confirm, .douglas-shell .swal2-client-create-popup .swal2-cancel, .douglas-shell .asthron-swal-form-popup .swal2-confirm, .douglas-shell .asthron-swal-form-popup .swal2-cancel { border-radius: 10px; padding: .7rem 1.25rem; } .douglas-shell .notification-center-card { border: 1px solid var(--asth-border); border-radius: 22px; overflow: hidden; } .douglas-shell .notification-center-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; border: 1px solid var(--asth-border-subtle); border-radius: 18px; padding: 1rem; background: var(--asth-surface-subtle); } .douglas-shell .notification-center-item.is-unread { border-color: var(--asth-primary-muted); background: var(--asth-primary-subtle); } .douglas-shell .notification-center-dot { width: .8rem; height: .8rem; border-radius: 999px; margin-top: .35rem; background: var(--asth-info); box-shadow: 0 0 0 5px var(--asth-info-subtle); } .douglas-shell .notification-center-dot.success { background: var(--asth-success); box-shadow: 0 0 0 5px var(--asth-success-subtle); } .douglas-shell .notification-center-dot.warning { background: var(--asth-warn); box-shadow: 0 0 0 5px var(--asth-warn-subtle); } .douglas-shell .notification-center-dot.danger { background: var(--asth-danger); box-shadow: 0 0 0 5px var(--asth-danger-subtle); } .douglas-shell .manual-guide-card { border: 1px solid var(--asth-border); border-radius: 24px; overflow: hidden; } .douglas-shell .manual-guide-anchor { scroll-margin-top: 110px; } .douglas-shell .manual-guide-section { border: 1px solid var(--asth-border-subtle); border-radius: 18px; padding: 1rem; height: 100%; background: var(--asth-surface-subtle); } .douglas-shell .manual-guide-list { padding-left: 1.15rem; } .douglas-shell .manual-guide-list li { margin-bottom: .55rem; } .douglas-shell .manual-guide-list li:last-child { margin-bottom: 0; } .douglas-shell .manual-guide-index { position: sticky; top: 92px; } .douglas-shell .manual-guide-hero-row .dashboard-section-card, .douglas-shell .manual-guide-layout-row .dashboard-section-card, .douglas-shell .manual-guide-card { overflow: hidden; } .douglas-shell .manual-guide-role-card .manual-guide-list { columns: 2 18rem; column-gap: 1.4rem; } .douglas-shell .manual-guide-role-card .manual-guide-list li { break-inside: avoid; } .douglas-shell .manual-guide-workflow-card .manual-guide-list, .douglas-shell .manual-guide-section .manual-guide-list { display: grid; gap: .55rem; } .douglas-shell .manual-guide-card .asthron-lock-grid.row { align-items: stretch; } .douglas-shell .manual-guide-card .asthron-lock-grid.row > * { display: flex; } .douglas-shell .manual-guide-card .manual-guide-section { width: 100%; } .douglas-shell .conversation-message-card { --ins-card-spacer-y: 0.5375rem; --ins-card-spacer-x: 1.0625rem; --ins-card-title-spacer-y: 0; --ins-card-border-width: var(--ins-theme-card-border-width); --ins-card-border-color: var(--ins-theme-card-border-color); --ins-card-border-radius: var(--ins-border-radius-xl); --ins-card-box-shadow: var(--ins-theme-card-box-shadow); --ins-card-inner-border-radius: calc(var(--ins-border-radius-xl) - var(--ins-theme-card-border-width)); --ins-card-cap-padding-y: 0.703125rem; --ins-card-cap-padding-x: 1.0625rem; --ins-card-cap-bg: transparent; --ins-card-bg: var(--ins-secondary-bg); --ins-card-img-overlay-padding: 1.25rem; --ins-card-group-margin: 0.625rem; } body.public-auth-page { min-height: 100vh; background: radial-gradient(circle at top left, rgba(79, 225, 255, 0.08), transparent 28%), radial-gradient(circle at top right, rgba(109, 124, 255, 0.16), transparent 32%), linear-gradient(180deg, #091321 0%, #060d19 100%) !important; color: var(--asth-text); } .public-auth-page .admin-auth-shell, .public-auth-page .client-auth-shell, .public-auth-page .invite-auth-shell, .public-auth-page .auth-shell { min-height: 100vh; display: flex; align-items: center; padding: clamp(1rem, 3vw, 2.5rem) 0; } .public-auth-page .admin-auth-card, .public-auth-page .client-auth-card, .public-auth-page .invite-auth-card, .public-auth-page .auth-card { border: 1px solid rgba(132, 151, 182, 0.16) !important; border-radius: 24px !important; overflow: hidden; background: rgba(10, 20, 36, 0.9) !important; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34) !important; } .public-auth-page .admin-auth-side, .public-auth-page .client-auth-side, .public-auth-page .invite-auth-side { position: relative; height: 100%; background: radial-gradient(circle at top right, rgba(79, 225, 255, 0.12), transparent 36%), linear-gradient(135deg, rgba(17, 31, 52, 0.96), rgba(8, 17, 31, 0.98)) !important; border-right: 1px solid rgba(132, 151, 182, 0.14) !important; } .public-auth-page .admin-auth-side::before, .public-auth-page .client-auth-side::before, .public-auth-page .invite-auth-side::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.44), transparent 76%); } .public-auth-page .admin-auth-side > *, .public-auth-page .client-auth-side > *, .public-auth-page .invite-auth-side > * { position: relative; } .public-auth-page .admin-auth-form-panel, .public-auth-page .client-auth-form-panel, .public-auth-page .invite-auth-form-panel, .public-auth-page .auth-card .card-body { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), rgba(10, 20, 36, 0.88) !important; } .public-auth-page .admin-auth-badge, .public-auth-page .client-auth-badge, .public-auth-page .invite-auth-badge, .public-auth-page .badge.bg-primary-subtle { display: inline-flex; align-items: center; gap: .48rem; padding: .5rem .78rem; border: 1px solid rgba(79, 225, 255, 0.2) !important; border-radius: 999px; background: rgba(79, 225, 255, 0.08) !important; color: #a8f3ff !important; font-size: .74rem; font-weight: var(--asth-font-weight-label); letter-spacing: .05em; text-transform: uppercase; } .public-auth-page .admin-auth-feature, .public-auth-page .client-auth-feature, .public-auth-page .invite-auth-feature, .public-auth-page .invite-summary-box, .public-auth-page .public-auth-note { border: 1px solid rgba(132, 151, 182, 0.14) !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.035) !important; } .public-auth-page .admin-auth-feature, .public-auth-page .client-auth-feature, .public-auth-page .invite-auth-feature { padding: .9rem !important; } .public-auth-page .invite-summary-box { padding: 1rem 1.1rem !important; } .public-auth-page .form-label { color: #eaf2ff !important; font-size: .78rem; font-weight: var(--asth-font-weight-label); letter-spacing: .045em; text-transform: uppercase; } .public-auth-page .form-control { min-height: 46px; border-radius: 14px !important; border-color: rgba(132, 151, 182, 0.22) !important; background: rgba(7, 17, 31, 0.7) !important; color: #eaf2ff !important; } .public-auth-page .form-control::placeholder { color: rgba(168, 182, 207, 0.68); } .public-auth-page .form-control:focus { border-color: rgba(79, 225, 255, 0.54) !important; box-shadow: 0 0 0 .24rem rgba(79, 225, 255, 0.12) !important; } .public-auth-page .form-text, .public-auth-page .text-body-secondary, .public-auth-page .text-muted { color: var(--asth-text-soft) !important; } .public-auth-page .alert { border-radius: 16px; border-width: 1px; } .public-auth-page a:not(.btn) { color: #8eeaff; } .public-auth-page .btn-primary, .public-auth-page .btn-premium-primary { border: 0 !important; border-radius: 14px !important; background: linear-gradient(135deg, #4f46e5, #2563eb) !important; color: #fff !important; box-shadow: 0 14px 34px rgba(37, 99, 235, 0.28); } .public-auth-page .btn-outline-light, .public-auth-page .btn-outline-success { border-radius: 14px; } .public-auth-page .public-auth-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; } .public-auth-page .public-auth-rule-list { display: grid; gap: .45rem; margin: .85rem 0 0; padding: 0; list-style: none; color: var(--asth-text-soft); font-size: .86rem; } .public-auth-page .public-auth-rule-list li { display: flex; gap: .45rem; align-items: flex-start; } .public-auth-page .public-auth-rule-list li::before { content: ""; flex: 0 0 .42rem; width: .42rem; height: .42rem; margin-top: .48rem; border-radius: 999px; background: var(--asth-accent); } .public-auth-page .admin-auth-logo .asthronai-wordmark, .public-auth-page .client-auth-logo .asthronai-wordmark { letter-spacing: .01em; } html[data-bs-theme="light"] body.public-auth-page { background: radial-gradient(circle at top left, rgba(125, 140, 255, 0.18), transparent 28%), radial-gradient(circle at top right, rgba(82, 210, 255, 0.16), transparent 30%), linear-gradient(180deg, #f8fbff 0%, #dee4ff 48%, #f7f9ff 100%) !important; color: #2c3766; } html[data-bs-theme="light"] .public-auth-page .admin-auth-card, html[data-bs-theme="light"] .public-auth-page .client-auth-card, html[data-bs-theme="light"] .public-auth-page .invite-auth-card, html[data-bs-theme="light"] .public-auth-page .auth-card { border-color: rgba(86, 104, 255, 0.18) !important; background: radial-gradient(circle at top left, rgba(125, 140, 255, 0.12), transparent 42%), rgba(255, 255, 255, 0.9) !important; box-shadow: 0 28px 70px rgba(44, 55, 102, 0.16) !important; } html[data-bs-theme="light"] .public-auth-page .admin-auth-side, html[data-bs-theme="light"] .public-auth-page .client-auth-side, html[data-bs-theme="light"] .public-auth-page .invite-auth-side { background: radial-gradient(circle at top right, rgba(82, 210, 255, 0.22), transparent 34%), radial-gradient(circle at bottom left, rgba(173, 115, 255, 0.18), transparent 38%), linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(238, 243, 255, 0.92)) !important; border-right-color: rgba(86, 104, 255, 0.14) !important; } html[data-bs-theme="light"] .public-auth-page .admin-auth-side::before, html[data-bs-theme="light"] .public-auth-page .client-auth-side::before, html[data-bs-theme="light"] .public-auth-page .invite-auth-side::before { background: linear-gradient(90deg, rgba(86, 104, 255, 0.08) 1px, transparent 1px), linear-gradient(180deg, rgba(82, 210, 255, 0.08) 1px, transparent 1px); } html[data-bs-theme="light"] .public-auth-page .admin-auth-form-panel, html[data-bs-theme="light"] .public-auth-page .client-auth-form-panel, html[data-bs-theme="light"] .public-auth-page .invite-auth-form-panel, html[data-bs-theme="light"] .public-auth-page .auth-card .card-body { background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(248, 251, 255, 0.92)), rgba(255, 255, 255, 0.86) !important; } html[data-bs-theme="light"] .public-auth-page .admin-auth-badge, html[data-bs-theme="light"] .public-auth-page .client-auth-badge, html[data-bs-theme="light"] .public-auth-page .invite-auth-badge, html[data-bs-theme="light"] .public-auth-page .badge.bg-primary-subtle { border-color: rgba(85, 104, 255, 0.24) !important; background: rgba(85, 104, 255, 0.10) !important; color: #2c3766 !important; } html[data-bs-theme="light"] .public-auth-page .admin-auth-feature, html[data-bs-theme="light"] .public-auth-page .client-auth-feature, html[data-bs-theme="light"] .public-auth-page .invite-auth-feature, html[data-bs-theme="light"] .public-auth-page .invite-summary-box, html[data-bs-theme="light"] .public-auth-page .public-auth-note { border-color: rgba(86, 104, 255, 0.14) !important; background: rgba(255, 255, 255, 0.58) !important; } html[data-bs-theme="light"] .public-auth-page h1, html[data-bs-theme="light"] .public-auth-page h2, html[data-bs-theme="light"] .public-auth-page h3, html[data-bs-theme="light"] .public-auth-page h4, html[data-bs-theme="light"] .public-auth-page h5, html[data-bs-theme="light"] .public-auth-page h6, html[data-bs-theme="light"] .public-auth-page .text-white, html[data-bs-theme="light"] .public-auth-page .form-label, html[data-bs-theme="light"] .public-auth-page .admin-auth-feature .fw-semibold, html[data-bs-theme="light"] .public-auth-page .client-auth-feature .fw-semibold, html[data-bs-theme="light"] .public-auth-page .invite-auth-feature .fw-semibold, html[data-bs-theme="light"] .public-auth-page .invite-summary-box .fw-semibold, html[data-bs-theme="light"] .public-auth-page .public-auth-note .fw-semibold { color: #2c3766 !important; } html[data-bs-theme="light"] .public-auth-page p, html[data-bs-theme="light"] .public-auth-page .small, html[data-bs-theme="light"] .public-auth-page small, html[data-bs-theme="light"] .public-auth-page .text-white-50, html[data-bs-theme="light"] .public-auth-page .text-body-secondary, html[data-bs-theme="light"] .public-auth-page .text-muted, html[data-bs-theme="light"] .public-auth-page .form-text, html[data-bs-theme="light"] .public-auth-page .public-auth-rule-list { color: #5f6c9f !important; } html[data-bs-theme="light"] .public-auth-page .form-control { border-color: rgba(86, 104, 255, 0.22) !important; background: rgba(255, 255, 255, 0.82) !important; color: #2c3766 !important; } html[data-bs-theme="light"] .public-auth-page .form-control::placeholder { color: rgba(44, 55, 102, 0.48); } html[data-bs-theme="light"] .public-auth-page .form-control:focus { border-color: rgba(85, 104, 255, 0.56) !important; box-shadow: 0 0 0 .24rem rgba(85, 104, 255, 0.14) !important; } html[data-bs-theme="light"] .public-auth-page a:not(.btn) { color: #5568ff; } html[data-bs-theme="light"] .public-auth-page .btn-outline-light, html[data-bs-theme="light"] .public-auth-page .btn-outline-success { border-color: rgba(44, 55, 102, 0.26) !important; color: #2c3766 !important; } html[data-bs-theme="light"] .public-auth-page .btn-outline-light:hover, html[data-bs-theme="light"] .public-auth-page .btn-outline-success:hover { background: rgba(85, 104, 255, 0.10) !important; border-color: rgba(85, 104, 255, 0.46) !important; color: #2c3766 !important; } @media (max-width: 991.98px) { .public-auth-page .admin-auth-shell, .public-auth-page .client-auth-shell { padding: 1rem 0; } .public-auth-page .admin-auth-card, .public-auth-page .client-auth-card { border-radius: 1.25rem !important; } .public-auth-page .admin-auth-card .row.g-0, .public-auth-page .client-auth-card .row.g-0 { display: flex; flex-wrap: wrap; } .public-auth-page .admin-auth-card .row.g-0 > [class*="col-"], .public-auth-page .client-auth-card .row.g-0 > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; } .public-auth-page .admin-auth-card .row.g-0 > [class*="col-"]:first-child, .public-auth-page .client-auth-card .row.g-0 > [class*="col-"]:first-child { order: 2; } .public-auth-page .admin-auth-card .row.g-0 > [class*="col-"]:last-child, .public-auth-page .client-auth-card .row.g-0 > [class*="col-"]:last-child { order: 1; } .public-auth-page .admin-auth-side, .public-auth-page .client-auth-side, .public-auth-page .invite-auth-side { border-right: 0 !important; border-top: 1px solid rgba(132, 151, 182, 0.14) !important; } .public-auth-page .admin-auth-side, .public-auth-page .client-auth-side, .public-auth-page .admin-auth-form-panel, .public-auth-page .client-auth-form-panel { padding: 1.35rem !important; } .public-auth-page .invite-auth-side { border-top: 0 !important; border-bottom: 1px solid rgba(132, 151, 182, 0.14) !important; } .public-auth-page .admin-auth-logo, .public-auth-page .client-auth-logo { margin-bottom: 1rem !important; } .public-auth-page .admin-auth-logo .asthronai-wordmark, .public-auth-page .client-auth-logo .asthronai-wordmark { width: 196px; height: 46px; } .public-auth-page .admin-auth-badge, .public-auth-page .client-auth-badge { padding: .48rem .8rem; font-size: .74rem; margin-bottom: .85rem !important; } .public-auth-page .admin-auth-side h1, .public-auth-page .client-auth-side h1 { font-size: 1.5rem !important; line-height: 1.35; margin-bottom: .9rem !important; } .public-auth-page .admin-auth-side p, .public-auth-page .client-auth-side p, .public-auth-page .admin-auth-form-panel p, .public-auth-page .client-auth-form-panel p { font-size: .9rem; line-height: 1.6; } .public-auth-page .admin-auth-feature, .public-auth-page .client-auth-feature, .public-auth-page .invite-auth-feature { border-radius: .85rem !important; padding: .78rem !important; } .public-auth-page .admin-auth-feature .fw-semibold, .public-auth-page .client-auth-feature .fw-semibold { font-size: .98rem; margin-bottom: .25rem !important; } .public-auth-page .admin-auth-feature .small, .public-auth-page .client-auth-feature .small { font-size: .8rem !important; line-height: 1.45; } .public-auth-page .admin-auth-form-panel h3, .public-auth-page .client-auth-form-panel h3 { font-size: 1.85rem; margin-bottom: .45rem !important; } .public-auth-page .admin-auth-form-panel .mb-4, .public-auth-page .client-auth-form-panel .mb-4 { margin-bottom: 1rem !important; } .public-auth-page .admin-auth-form-panel .mb-3, .public-auth-page .client-auth-form-panel .mb-3 { margin-bottom: .85rem !important; } .public-auth-page .admin-auth-form-panel .form-label, .public-auth-page .client-auth-form-panel .form-label { font-size: .88rem; margin-bottom: .38rem; } .public-auth-page .admin-auth-form-panel .form-control, .public-auth-page .client-auth-form-panel .form-control { min-height: 44px; padding: .6rem .9rem; font-size: .92rem; } .public-auth-page .admin-auth-form-panel .btn, .public-auth-page .client-auth-form-panel .btn { min-height: 44px; font-size: .95rem; } .public-auth-page .admin-auth-form-panel .small, .public-auth-page .client-auth-form-panel .small, .public-auth-page .admin-auth-side .small, .public-auth-page .client-auth-side .small { font-size: .82rem !important; line-height: 1.55; } } @media (max-width: 640px) { .public-auth-page .admin-auth-shell, .public-auth-page .client-auth-shell { padding: .75rem 0; } .public-auth-page .admin-auth-card, .public-auth-page .client-auth-card, .public-auth-page .invite-auth-card, .public-auth-page .auth-card { border-radius: 1rem !important; } .public-auth-page .admin-auth-side, .public-auth-page .client-auth-side, .public-auth-page .admin-auth-form-panel, .public-auth-page .client-auth-form-panel { padding: 1rem !important; } .public-auth-page .admin-auth-logo .asthronai-wordmark, .public-auth-page .client-auth-logo .asthronai-wordmark { width: 176px; height: 42px; } .public-auth-page .admin-auth-side h1, .public-auth-page .client-auth-side h1 { font-size: 1.3rem !important; line-height: 1.35; } .public-auth-page .admin-auth-side p, .public-auth-page .client-auth-side p, .public-auth-page .admin-auth-form-panel p, .public-auth-page .client-auth-form-panel p { font-size: .84rem; line-height: 1.55; } .public-auth-page .admin-auth-feature, .public-auth-page .client-auth-feature { padding: .68rem !important; } .public-auth-page .admin-auth-feature .fw-semibold, .public-auth-page .client-auth-feature .fw-semibold { font-size: .9rem; } .public-auth-page .admin-auth-feature .small, .public-auth-page .client-auth-feature .small { font-size: .76rem !important; } .public-auth-page .admin-auth-form-panel h3, .public-auth-page .client-auth-form-panel h3 { font-size: 1.55rem; } .public-auth-page .admin-auth-form-panel .form-label, .public-auth-page .client-auth-form-panel .form-label { font-size: .82rem; } .public-auth-page .admin-auth-form-panel .form-control, .public-auth-page .client-auth-form-panel .form-control { min-height: 42px; font-size: .88rem; padding: .56rem .82rem; } .public-auth-page .admin-auth-form-panel .btn, .public-auth-page .client-auth-form-panel .btn { min-height: 42px; font-size: .9rem; } .public-auth-page .admin-auth-form-panel .small, .public-auth-page .client-auth-form-panel .small, .public-auth-page .admin-auth-side .small, .public-auth-page .client-auth-side .small { font-size: .76rem !important; } .public-auth-page .public-auth-actions { align-items: stretch; flex-direction: column; } .public-auth-page .public-auth-actions .btn, .public-auth-page .public-auth-actions a { width: 100%; text-align: center; } } body.douglas-shell { position: relative; isolation: isolate; overflow-x: hidden; overflow-x: clip; } body.douglas-shell::before, body.douglas-shell::after { content: ""; position: fixed; pointer-events: none; } body.douglas-shell::before { inset: -18% -12%; z-index: -2; } body.douglas-shell::after { inset: 0; z-index: -1; } html[data-bs-theme="dark"] body.douglas-shell { --asth-bg-base: #050b16; --asth-bg-accent: #08111f; --asth-surface: rgba(11, 19, 34, 0.90); --asth-surface-strong: rgba(8, 15, 28, 0.96); --asth-text-strong: #f7f9fd; --asth-text: #f7f9fd; --asth-text-soft: #a6b4c9; --asth-text-muted: #7f92af; background: #050b16; color: var(--asth-text); } html[data-bs-theme="dark"] body.douglas-shell::before { opacity: 0.92; background: radial-gradient(circle at 16% 18%, rgba(125, 140, 255, 0.28), transparent 28%), radial-gradient(circle at 78% 16%, rgba(82, 210, 255, 0.16), transparent 28%), radial-gradient(circle at 48% 74%, rgba(173, 115, 255, 0.18), transparent 34%), radial-gradient(circle at 88% 84%, rgba(33, 211, 155, 0.08), transparent 26%), linear-gradient(180deg, #060d19 0%, #08111f 32%, #050b16 100%); } html[data-bs-theme="dark"] body.douglas-shell::after { opacity: 0.42; background: linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px), radial-gradient(circle at 50% 6%, rgba(125, 140, 255, 0.12), transparent 30%), radial-gradient(circle at 52% 18%, rgba(173, 115, 255, 0.08), transparent 28%); background-size: 56px 56px, 56px 56px, 100% 100%, 100% 100%; mask-image: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,0.12) 72%, rgba(0,0,0,0.04)); } .douglas-shell .wrapper, .douglas-shell .content-page, .douglas-shell .content, .douglas-shell .container-fluid { position: relative; } .douglas-shell .content-page { min-height: 100vh; background: transparent !important; } .douglas-shell .content { padding: 42px 0 32px; } .douglas-shell .container-fluid { max-width: 100%; } .douglas-shell a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .douglas-shell .app-topbar { background: radial-gradient(circle at 18% 0%, rgba(125, 140, 255, 0.12), transparent 30%), rgba(6, 13, 25, 0.72); border-bottom: 1px solid rgba(146, 173, 225, 0.12); padding-left: 0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } .douglas-shell .topbar-menu { min-height: 76px; padding-top: .7rem; padding-bottom: .7rem; } .douglas-shell .button-collapse-toggle, .douglas-shell .topbar-link { border-radius: 14px; } .douglas-shell .button-collapse-toggle, .douglas-shell .topbar-link, .douglas-shell .topbar-link.btn { background: rgba(255, 255, 255, 0.02); border: 1px solid transparent; color: var(--asth-text-soft); } .douglas-shell .button-collapse-toggle:hover, .douglas-shell .topbar-link:hover, .douglas-shell .topbar-link.btn:hover { color: var(--asth-text); border-color: rgba(132, 151, 182, 0.14); background: rgba(255, 255, 255, 0.05); } .douglas-shell .topbar-link.disabled, .douglas-shell .topbar-link:disabled { opacity: 1; border-color: rgba(132, 151, 182, 0.1); background: rgba(255, 255, 255, 0.02); } .douglas-shell .topbar-link .fw-semibold, .douglas-shell .topbar-link .fw-bold, .douglas-shell .topbar-link .text-dark { color: var(--asth-text) !important; } .douglas-shell .topbar-link .small, .douglas-shell .topbar-link .text-muted { color: var(--asth-text-soft) !important; } .douglas-shell .sidenav-menu { top: 0; z-index: 1002; background: radial-gradient(circle at 16% 8%, rgba(125, 140, 255, 0.18), transparent 32%), radial-gradient(circle at 90% 28%, rgba(82, 210, 255, 0.08), transparent 32%), linear-gradient(180deg, rgba(6, 13, 25, 0.96) 0%, rgba(5, 11, 22, 0.98) 100%); border-right: 1px solid rgba(146, 173, 225, 0.14); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02); } .douglas-shell .sidenav-menu [data-simplebar] { height: 100%; } .douglas-shell .simplebar-mask { direction: inherit; position: absolute; overflow: hidden; padding: 0; margin: 0; left: 0; top: 0; bottom: 0; right: 0; width: auto !important; height: auto !important; z-index: 0; } .douglas-shell .sidenav-brand { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem .85rem .55rem; } .douglas-shell .sidenav-brand-link { display: block; min-width: 0; overflow: hidden; } .douglas-shell .sidenav-brand-subtitle { display: block; margin-top: .1rem; color: var(--asth-text-soft); font-size: .86rem; line-height: 1.25; } @media (min-width: 1200px) { .douglas-shell .app-topbar { margin-left: var(--ins-sidenav-width); width: calc(100% - var(--ins-sidenav-width)); } html[data-sidenav-size="collapse"] .douglas-shell .app-topbar, html[data-menu-size="collapse"] .douglas-shell .app-topbar { margin-left: var(--ins-sidenav-width-sm); width: calc(100% - var(--ins-sidenav-width-sm)); } html[data-sidenav-size="hidden"] .douglas-shell .app-topbar { margin-left: 0; width: 100%; } } .douglas-shell .sidenav-user { padding: 1rem 1rem 1.1rem; margin: .6rem .85rem; border: 1px solid rgba(132, 151, 182, 0.16) !important; border-radius: 20px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%), linear-gradient(135deg, rgba(109, 124, 255, 0.14) 0%, rgba(79, 225, 255, 0.07) 100%); box-shadow: var(--asth-shadow-soft); } .douglas-shell .sidenav-user h5, .douglas-shell .sidenav-user h6, .douglas-shell .sidenav-user .small, .douglas-shell .sidenav-user-name, .douglas-shell .sidenav-user a { color: var(--asth-text); } .douglas-shell .sidenav-user h6, .douglas-shell .sidenav-user .text-muted, .douglas-shell .sidenav-user .small { color: var(--asth-text-soft) !important; } .douglas-shell .avatar.text-bg-primary, .douglas-shell .avatar.badge-default { background: linear-gradient(135deg, var(--asth-brand) 0%, var(--asth-accent) 100%) !important; color: #06101d !important; border: 0 !important; box-shadow: 0 8px 18px rgba(79, 225, 255, 0.22); } .douglas-shell .avatar.badge-default.asthronai-logo-avatar { background: transparent !important; box-shadow: none !important; padding: 0 !important; overflow: hidden; } .douglas-shell .asthronai-logo-avatar .avatar-title { width: 100%; height: 100%; background: transparent !important; color: inherit !important; } .douglas-shell .asthronai-brand-logo-img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; } .douglas-shell .asthronai-wordmark { display: block; width: 196px; height: 46px; background: url("/assets/images/text-logo-dark.png") left center / contain no-repeat; flex: 0 0 auto; } .douglas-shell .asthronai-wordmark--sm { width: 172px; height: 40px; } .douglas-shell .asthronai-wordmark--lg { width: 236px; height: 56px; } html[data-bs-theme="light"] .douglas-shell .asthronai-wordmark.asthronai-wordmark--theme { background-image: url("/assets/images/text-logo-light.png"); } .douglas-shell .side-nav { padding: 0 .65rem 1.4rem; } .douglas-shell .side-nav-title { padding-left: .8rem; margin-top: 1rem; letter-spacing: .12em; font-size: .68rem; text-transform: uppercase; color: var(--asth-text-muted); } .douglas-shell .side-nav-item { margin-bottom: .1rem; } .douglas-shell .side-nav-link { display: flex; align-items: center; gap: .7rem; min-height: 40px; padding: .48rem .95rem; border: 1px solid transparent; border-radius: 14px; color: var(--asth-text-soft) !important; } .douglas-shell .side-nav-link > i, .douglas-shell .side-nav-link > svg { width: 1.15rem; height: 1.15rem; flex: 0 0 1.15rem; color: var(--asth-text-soft); stroke-width: 2.15; } .douglas-shell .side-nav-link .menu-text { font-weight: var(--asth-font-weight-ui); letter-spacing: .01em; } .douglas-shell .side-nav-link:hover { background: rgba(255, 255, 255, 0.03); border-color: rgba(132, 151, 182, 0.14); color: var(--asth-text) !important; transform: translateX(1px); } .douglas-shell .side-nav-link:hover > i, .douglas-shell .side-nav-link:hover > svg { color: var(--asth-text); } .douglas-shell .topbar-link.active, .douglas-shell .side-nav-link.active { color: var(--asth-text) !important; } .douglas-shell .side-nav-link.active { background: linear-gradient(135deg, rgba(109, 124, 255, 0.2) 0%, rgba(79, 225, 255, 0.08) 100%); border-color: rgba(109, 124, 255, 0.34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); } .douglas-shell .side-nav-link.active .menu-text { font-weight: var(--asth-font-weight-title); } .douglas-shell .side-nav-link.active > i, .douglas-shell .side-nav-link.active > svg { color: #fff; } .douglas-shell .card, .douglas-shell .modal-content, .douglas-shell .dropdown-menu, .douglas-shell .offcanvas, .douglas-shell .accordion-item, .douglas-shell .list-group-item, .douglas-shell .page-shell-header { background: var(--asth-panel); border: 1px solid var(--asth-border); box-shadow: var(--asth-shadow-soft); } .douglas-shell .alert, .douglas-shell .auth-shell .alert, .douglas-shell .invite-auth-shell .alert { background: var(--asth-panel); border: 1px solid var(--asth-border); box-shadow: var(--asth-shadow-soft); border-color: #3b82f6c7; border-radius: var(--asth-radius-lg); } .douglas-shell .alert.alert-success, .douglas-shell .auth-shell .alert.alert-success, .douglas-shell .invite-auth-shell .alert.alert-success { border-color: rgba(61, 213, 152, 0.42); background: linear-gradient(180deg, rgba(61, 213, 152, 0.12) 0%, rgba(10, 20, 36, 0.92) 100%); color: var(--asth-text); } .douglas-shell .alert.alert-danger, .douglas-shell .auth-shell .alert.alert-danger, .douglas-shell .invite-auth-shell .alert.alert-danger { border-color: rgba(255, 122, 144, 0.42); background: linear-gradient(180deg, rgba(255, 122, 144, 0.12) 0%, rgba(10, 20, 36, 0.92) 100%); color: var(--asth-text); } .douglas-shell .alert.alert-warning, .douglas-shell .auth-shell .alert.alert-warning, .douglas-shell .invite-auth-shell .alert.alert-warning { border-color: rgba(246, 199, 96, 0.42); background: linear-gradient(180deg, rgba(246, 199, 96, 0.12) 0%, rgba(10, 20, 36, 0.92) 100%); color: var(--asth-text); } .douglas-shell .alert.alert-info, .douglas-shell .auth-shell .alert.alert-info, .douglas-shell .invite-auth-shell .alert.alert-info { border-color: rgba(79, 225, 255, 0.36); background: linear-gradient(180deg, rgba(79, 225, 255, 0.11) 0%, rgba(10, 20, 36, 0.92) 100%); color: var(--asth-text); } .douglas-shell .card, .douglas-shell .modal-content, .douglas-shell .dropdown-menu, .douglas-shell .page-shell-header { border-radius: var(--asth-radius-lg); } .douglas-shell .card-header, .douglas-shell .card-footer, .douglas-shell .modal-header, .douglas-shell .modal-footer, .douglas-shell .dropdown-divider, .douglas-shell .accordion-button, .douglas-shell .list-group-item, .douglas-shell .table > :not(caption) > * > * { border-color: rgba(132, 151, 182, 0.12); } .douglas-shell .card-header, .douglas-shell .card-footer, .douglas-shell .modal-header, .douglas-shell .modal-footer { background: rgba(255, 255, 255, 0.015); } .douglas-shell .modal-dialog-scrollable .modal-content > form:not(.modal-content) { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; max-height: 100%; } .douglas-shell .modal-dialog-scrollable .modal-content > form:not(.modal-content) > .modal-body { min-height: 0; overflow-y: auto; } .douglas-shell .card-title, .douglas-shell .card h1, .douglas-shell .card h2, .douglas-shell .card h3, .douglas-shell .card h4, .douglas-shell .card h5, .douglas-shell .card h6, .douglas-shell .page-title, .douglas-shell .page-shell-header h1, .douglas-shell .page-shell-header h2, .douglas-shell .page-shell-header h3, .douglas-shell .page-shell-header h4 { color: var(--asth-text); } .douglas-shell p, .douglas-shell .text-muted, .douglas-shell .form-text, .douglas-shell .small, .douglas-shell small, .douglas-shell .table-light, .douglas-shell .text-body-secondary { color: var(--asth-text-soft) !important; } .douglas-shell .bg-light, .douglas-shell .bg-body, .douglas-shell .bg-body-tertiary, .douglas-shell .bg-body-secondary { background: rgba(255, 255, 255, 0.03) !important; } .douglas-shell .border, .douglas-shell .border-top, .douglas-shell .border-bottom, .douglas-shell .border-start, .douglas-shell .border-end, .douglas-shell .hr, .douglas-shell hr { border-color: rgba(132, 151, 182, 0.14) !important; } .douglas-shell .page-shell-header { padding: 1.1rem 1.25rem; margin-bottom: 1.4rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .douglas-shell .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 0; min-height: 2.35rem; border-radius: 14px; font-weight: var(--asth-font-weight-title); letter-spacing: .01em; line-height: 1.15; text-align: center; vertical-align: middle; white-space: nowrap; overflow-wrap: normal; word-break: normal; } .douglas-shell .btn > i, .douglas-shell .btn > svg { flex: 0 0 auto; line-height: 1; } .douglas-shell .btn-sm { min-height: 2rem; padding-top: .38rem; padding-bottom: .38rem; line-height: 1.15; } .douglas-shell .btn-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0; min-height: 2.35rem; line-height: 1.15; text-align: center; white-space: nowrap; overflow-wrap: normal; word-break: normal; } .douglas-shell .btn-primary, .douglas-shell .bg-primary { background: linear-gradient(135deg, #6677ff 0%, #4fe1ff 100%) !important; border-color: transparent !important; color: #07111f !important; box-shadow: 0 12px 30px rgba(79, 225, 255, 0.18); } .douglas-shell .btn-primary.btn-sm { min-height: 2rem; } .douglas-shell .btn-primary > i, .douglas-shell .btn-primary > svg { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; margin-top: 0 !important; margin-bottom: 0 !important; } .douglas-shell .btn-primary:hover, .douglas-shell .btn-primary:focus, .douglas-shell .btn-primary:active { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(79, 225, 255, 0.24); } .douglas-shell .btn-outline-primary { color: #dce4ff; border-color: rgba(109, 124, 255, 0.4); background: rgba(109, 124, 255, 0.08); } .douglas-shell .btn-outline-primary:hover, .douglas-shell .btn-outline-primary:focus, .douglas-shell .btn-outline-primary:active { color: #fff; border-color: rgba(79, 225, 255, 0.45); background: rgba(109, 124, 255, 0.18); } .douglas-shell .btn-light, .douglas-shell .btn-outline-secondary, .douglas-shell .btn-secondary { background: rgba(255, 255, 255, 0.04); border-color: rgba(132, 151, 182, 0.16); color: var(--asth-text); } .douglas-shell .btn-light:hover, .douglas-shell .btn-outline-secondary:hover, .douglas-shell .btn-secondary:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(132, 151, 182, 0.24); color: #fff; } .douglas-shell .form-control, .douglas-shell .form-select, .douglas-shell .input-group-text, .douglas-shell textarea, .douglas-shell select { min-height: 46px; background: rgba(255, 255, 255, 0.035) !important; border-color: rgba(132, 151, 182, 0.14) !important; color: var(--asth-text) !important; border-radius: 14px; box-shadow: none !important; } .douglas-shell textarea.form-control, .douglas-shell textarea { min-height: 110px; } .douglas-shell textarea.form-control.lead-update-notes { min-height: 42px; height: 42px; max-height: 72px; resize: vertical; } .douglas-shell .lead-update-form { row-gap: .2rem !important; } .douglas-shell .lead-update-form .form-label { line-height: 1.1; } .douglas-shell .form-control::placeholder, .douglas-shell textarea::placeholder { color: #7e8ca7; } .douglas-shell .form-control:focus, .douglas-shell .form-select:focus, .douglas-shell textarea:focus, .douglas-shell .input-group:focus-within .input-group-text { border-color: rgba(79, 225, 255, 0.42) !important; background: rgba(255, 255, 255, 0.05) !important; box-shadow: 0 0 0 .24rem rgba(79, 225, 255, 0.09) !important; } .douglas-shell label, .douglas-shell .form-label { color: #d8e2f3; font-weight: var(--asth-font-weight-label); } .douglas-shell .table { --ins-table-color: var(--asth-text); --ins-table-bg: transparent; --ins-table-border-color: var(--asth-border-subtle); --ins-table-striped-bg: rgba(255, 255, 255, 0.02); --ins-table-hover-bg: var(--asth-table-hover-bg); color: var(--asth-text); } .douglas-shell .table thead th, .douglas-shell table.dataTable thead th { color: var(--asth-text-soft); text-transform: uppercase; font-size: .74rem; letter-spacing: .08em; font-weight: var(--asth-font-weight-label); background: rgba(255, 255, 255, 0.015); } .douglas-shell .table tbody td, .douglas-shell .table tbody th { vertical-align: middle; } .douglas-shell .table-responsive, .douglas-shell .dataTables_wrapper, .douglas-shell .dt-container { border-radius: 18px; } .douglas-shell .badge, .douglas-shell .auth-shell .badge, .douglas-shell .invite-auth-shell .badge { display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 999px; padding: .28rem .58rem; font-weight: var(--asth-font-weight-title); letter-spacing: .01em; line-height: 1.15; text-align: center; white-space: nowrap; vertical-align: middle; } .douglas-shell .badge.py-1 { padding-top: .3rem !important; padding-bottom: .28rem !important; } .douglas-shell .badge.asthron-badge-wrap, .douglas-shell .summary-tile .badge { text-align: left; white-space: normal; } .douglas-shell .badge.bg-primary-subtle, .douglas-shell .auth-shell .badge.bg-primary-subtle, .douglas-shell .invite-auth-shell .badge.bg-primary-subtle { background: rgba(109, 124, 255, 0.16) !important; border: 1px solid rgba(109, 124, 255, 0.24); color: #dbe5ff !important; } .douglas-shell .badge-outline-primary, .douglas-shell .text-bg-primary { background: rgba(59, 130, 246, .16) !important; border-color: rgba(96, 165, 250, .5) !important; color: #93c5fd !important; } .douglas-shell .badge-outline-info, .douglas-shell .text-bg-info { background: rgba(6, 182, 212, .16) !important; border-color: rgba(103, 232, 249, .46) !important; color: #67e8f9 !important; } .douglas-shell .badge-outline-success, .douglas-shell .text-bg-success { background: rgba(16, 185, 129, .16) !important; border-color: rgba(110, 231, 183, .46) !important; color: #6ee7b7 !important; } .douglas-shell .badge-outline-warning, .douglas-shell .text-bg-warning { background: rgba(245, 158, 11, .16) !important; border-color: rgba(252, 211, 77, .48) !important; color: #fcd34d !important; } .douglas-shell .badge-outline-danger, .douglas-shell .text-bg-danger { background: rgba(244, 63, 94, .16) !important; border-color: rgba(251, 113, 133, .48) !important; color: #fb7185 !important; } .douglas-shell .badge-outline-secondary, .douglas-shell .badge-outline-slate, .douglas-shell .badge-outline-dark, .douglas-shell .badge-outline-light, .douglas-shell .text-bg-secondary, .douglas-shell .text-bg-dark, .douglas-shell .text-bg-light { background: rgba(148, 163, 184, .14) !important; border-color: rgba(148, 163, 184, .45) !important; color: #cbd5e1 !important; } .douglas-shell .badge-outline-primary[href]:hover, .douglas-shell .badge-outline-primary[href]:focus, .douglas-shell .badge-outline-info[href]:hover, .douglas-shell .badge-outline-info[href]:focus, .douglas-shell .badge-outline-success[href]:hover, .douglas-shell .badge-outline-success[href]:focus, .douglas-shell .badge-outline-warning[href]:hover, .douglas-shell .badge-outline-warning[href]:focus, .douglas-shell .badge-outline-danger[href]:hover, .douglas-shell .badge-outline-danger[href]:focus, .douglas-shell .badge-outline-secondary[href]:hover, .douglas-shell .badge-outline-secondary[href]:focus, .douglas-shell .badge-outline-slate[href]:hover, .douglas-shell .badge-outline-slate[href]:focus, .douglas-shell .badge-outline-dark[href]:hover, .douglas-shell .badge-outline-dark[href]:focus, .douglas-shell .badge-outline-light[href]:hover, .douglas-shell .badge-outline-light[href]:focus { filter: brightness(1.08); text-decoration: none; } .douglas-shell .progress, .douglas-shell .progress-stacked { background: rgba(255, 255, 255, 0.06); border-radius: 999px; overflow: hidden; } .douglas-shell .usage-progress-shell { position: relative; padding-top: 1rem; } .douglas-shell .usage-progress-markers { position: absolute; inset: 0 0 auto 0; height: 1rem; pointer-events: none; } .douglas-shell .usage-progress-marker { position: absolute; top: 0; transform: translateX(-50%); font-size: .64rem; font-weight: var(--asth-font-weight-label); line-height: 1; color: var(--asth-text-muted); letter-spacing: .04em; } .douglas-shell .usage-progress-marker::after { content: ""; display: block; width: 1px; height: .5rem; margin: .18rem auto 0; background: rgba(132, 151, 182, 0.34); } .douglas-shell .usage-progress-shell .progress { margin-bottom: 0; } .douglas-shell .usage-progress-meta { display: flex; justify-content: space-between; align-items: center; gap: .85rem; flex-wrap: wrap; margin-top: .7rem; } .douglas-shell .usage-progress-copy { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .douglas-shell .usage-overflow-pill { display: inline-flex; align-items: center; justify-content: center; padding: .3rem .65rem; border-radius: 999px; border: 1px solid rgba(79, 225, 255, 0.2); background: rgba(79, 225, 255, 0.08); color: var(--asth-text); font-size: .74rem; font-weight: var(--asth-font-weight-title); letter-spacing: .02em; } .douglas-shell .usage-state-copy { color: var(--asth-text-soft); line-height: 1.6; } .douglas-shell .dropdown-menu { padding: .65rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .douglas-shell .dropdown-item { border-radius: 12px; color: var(--asth-text-soft); font-weight: 500; } .douglas-shell .dropdown-item:hover, .douglas-shell .dropdown-item:focus { background: rgba(109, 124, 255, 0.12); color: #fff; } .douglas-shell .nav-tabs, .douglas-shell .nav-pills { gap: .35rem; border-color: rgba(132, 151, 182, 0.12); } .douglas-shell .nav-tabs .nav-link, .douglas-shell .nav-pills .nav-link { border-radius: 12px; color: var(--asth-text-soft); } .douglas-shell .nav-tabs .nav-link.active, .douglas-shell .nav-pills .nav-link.active { background: rgba(109, 124, 255, 0.14); border-color: rgba(109, 124, 255, 0.2); color: #fff; } @media (max-width: 1199.98px) { .douglas-shell .topbar-menu { min-height: 72px; } } @media (max-width: 991.98px) { .douglas-shell .sidenav-menu { box-shadow: 20px 0 44px rgba(0, 0, 0, 0.42); } html[data-sidenav-size="hidden"] .sidenav-menu { transform: translateX(-100%); } } @media (max-width: 767.98px) { .douglas-shell .page-shell-header, .douglas-shell .card { border-radius: 16px; } .douglas-shell .side-nav-link { min-height: 36px; padding: .38rem .72rem; } } /* ========================================================= Asthron UI CSS Light Mode Upgrade ========================================================= */ .douglas-shell .button-collapse-toggle { width: 2.5rem; height: 2.5rem; min-width: 2.5rem; min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-shadow: var(--asth-shadow-soft); } .douglas-shell .button-collapse-toggle svg, .douglas-shell .button-collapse-toggle i { width: 1.25rem; height: 1.25rem; font-size: 1.25rem; } html[data-sidenav-size="collapse"] .douglas-shell .button-collapse-toggle svg, html[data-sidenav-size="collapse"] .douglas-shell .button-collapse-toggle i, html[data-menu-size="collapse"] .douglas-shell .button-collapse-toggle svg, html[data-menu-size="collapse"] .douglas-shell .button-collapse-toggle i { transform: rotate(180deg); } html[data-sidenav-size="collapse"] .douglas-shell .sidenav-menu:not(:hover), html[data-menu-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } html[data-sidenav-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .side-nav, html[data-menu-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .side-nav { padding-left: .45rem; padding-right: .45rem; padding-top: .55rem; } html[data-sidenav-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .side-nav-link, html[data-menu-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .side-nav-link { justify-content: center; padding-left: .55rem; padding-right: .55rem; border-radius: 18px; } html[data-sidenav-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .side-nav-link > i, html[data-sidenav-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .side-nav-link > svg, html[data-menu-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .side-nav-link > i, html[data-menu-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .side-nav-link > svg { margin: 0; width: 1.45rem; height: 1.45rem; flex-basis: 1.45rem; } html[data-sidenav-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .side-nav-item, html[data-menu-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .side-nav-item { margin-bottom: .65rem; } html[data-sidenav-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .side-nav-link.active, html[data-menu-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .side-nav-link.active { box-shadow: 0 12px 24px rgba(79, 225, 255, 0.12); } html[data-sidenav-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .sidenav-brand, html[data-menu-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .sidenav-brand { justify-content: center; padding: .75rem .45rem .6rem; } html[data-sidenav-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .sidenav-brand-link, html[data-menu-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .sidenav-brand-link { display: none !important; } html[data-sidenav-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .sidenav-brand .button-collapse-toggle, html[data-menu-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .sidenav-brand .button-collapse-toggle { display: inline-flex !important; } /* collapsed user card: hide entire box */ html[data-sidenav-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .sidenav-user, html[data-menu-size="collapse"] .douglas-shell .sidenav-menu:not(:hover) .sidenav-user { display: none !important; } html[data-bs-theme="light"] { --ins-body-color: #2c3766; --ins-body-color-rgb: 44, 55, 102; --ins-emphasis-color: rgba(44, 55, 102, 0.82); --ins-emphasis-color-rgb: 44, 55, 102; --ins-secondary-color: #5f6c9f; --ins-secondary-color-rgb: 95, 108, 159; --ins-heading-color: #2c3766; --ins-link-color: #2c3766; --ins-link-color-rgb: 44, 55, 102; --ins-link-hover-color: #5568ff; --ins-link-hover-color-rgb: 85, 104, 255; --ins-highlight-color: #2c3766; --asth-bg-base: #f7f9fd; --asth-bg-accent: #edf2f9; --asth-surface: rgb(227 234 254); --asth-surface-strong: rgba(255, 255, 255, 0.98); --asth-surface-elevated: #ffffff; --asth-surface-hover: rgba(15, 23, 42, 0.045); --asth-surface-subtle: rgba(15, 23, 42, 0.028); --asth-text: #2c3766; --asth-text-strong: #2c3766; --asth-text-soft: #5f6c9f; --asth-text-muted: #7884aa; --asth-text-inverse: #ffffff; --asth-border: rgba(148, 163, 184, 0.22); --asth-border-subtle: rgba(148, 163, 184, 0.16); --asth-border-strong: rgba(100, 116, 139, 0.28); --asth-border-hover: rgba(100, 116, 139, 0.36); --asth-divider-soft: rgba(15, 23, 42, .1); --asth-overlay-ink-xs: rgba(0, 0, 0, .03); --asth-overlay-ink-sm: rgba(0, 0, 0, .08); --asth-overlay-ink-md: rgba(0, 0, 0, .28); --asth-overlay-ink-lg: rgba(0, 0, 0, .35); --asth-overlay-paper-xs: rgba(255, 255, 255, .08); --asth-overlay-paper-soft: rgba(255, 255, 255, .72); --asth-popover-bg: #ffffff; --asth-popover-text: #2c3766; --asth-popover-border: rgba(0, 0, 0, .08); --asth-backdrop-bg: rgba(9, 14, 27, .56); --asth-brand: #4f46e5; --asth-brand-strong: #2563eb; --asth-brand-subtle: rgba(79, 70, 229, .16); --asth-brand-muted: rgba(79, 70, 229, .08); --asth-primary: #0891b2; --asth-primary-strong: #075985; --asth-primary-muted: rgba(8, 145, 178, .28); --asth-primary-subtle: rgba(14, 165, 233, .12); --asth-primary-glow: rgba(15, 23, 42, .08); --asth-accent: #0891b2; --asth-info: #2563eb; --asth-info-subtle: rgba(37, 99, 235, .11); --asth-success: #059669; --asth-success-strong: #047857; --asth-success-subtle: rgba(16, 185, 129, .13); --asth-warn: #d97706; --asth-warn-subtle: rgba(245, 158, 11, .11); --asth-danger: #dc2626; --asth-danger-strong: #991b1b; --asth-danger-subtle: rgba(239, 68, 68, .09); --asth-shadow-sm: 0 10px 24px rgba(15, 23, 42, .06); --asth-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.06); --asth-shadow-md: var(--asth-shadow-soft); --asth-shadow-lg: 0 20px 48px rgba(15, 23, 42, .08); --asth-scrollbar-thumb: rgba(148, 163, 184, .28); --asth-scrollbar-thumb-hover: rgba(148, 163, 184, .48); --asth-panel: var(--asth-surface); --asth-card-bg: var(--asth-surface); --asth-card-border: var(--asth-border); --asth-table-hover-bg: rgba(79, 70, 229, .05); --asth-alert-info-bg: rgba(14, 165, 233, .09); --asth-alert-success-bg: rgba(34, 197, 94, .09); --asth-alert-warning-bg: rgba(245, 158, 11, .11); --asth-alert-danger-bg: rgba(239, 68, 68, .09); --asth-tab-active-bg: radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 45%), linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(14, 165, 233, .09)); --asth-tab-active-border: rgba(37, 99, 235, .18); --asth-list-active-border: rgba(8, 145, 178, .58); --asth-list-active-bg: radial-gradient(circle at 0% 20%, rgba(14, 165, 233, .16), transparent 50%), linear-gradient(135deg, rgba(236, 253, 255, .98), rgba(239, 246, 255, .96) 58%, rgba(255, 255, 255, .98)), #ffffff; --asth-list-active-title: var(--asth-primary-strong); --asth-list-active-text: #2c3766; --asth-chat-visitor-bg: #ffffff; --asth-chat-visitor-border: rgba(15, 23, 42, .12); --asth-chat-contrast: var(--asth-text-inverse); --asth-chat-contrast-muted: var(--asth-overlay-paper-soft); --asth-chat-assistant-bg: radial-gradient(circle at top left, rgba(14, 165, 233, .2), transparent 45%), linear-gradient(135deg, #2563eb, #0891b2); --asth-chat-human-bg: radial-gradient(circle at top left, rgba(16, 185, 129, .2), transparent 45%), linear-gradient(135deg, #059669, #0f766e); --asth-chat-human-border: rgba(52, 211, 153, .34); --asth-chat-system-bg: rgba(15, 23, 42, .045); --asth-chat-system-border: rgba(15, 23, 42, .14); --asth-media-preview-bg: var(--asth-overlay-ink-xs); --asth-billing-summary-bg: radial-gradient(circle at top right, rgba(79, 70, 229, 0.08), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 252, 0.98) 100%); --asth-billing-summary-border: var(--asth-border); --asth-billing-summary-text: #2c3766; --asth-billing-summary-soft: rgba(44, 55, 102, 0.72); --asth-billing-summary-muted: rgba(44, 55, 102, 0.58); --asth-billing-summary-card: rgba(255, 255, 255, 0.9); --asth-billing-summary-card-border: var(--asth-border-subtle); --asth-billing-summary-card-shadow: 0 26px 54px rgba(148, 163, 184, 0.18); --asth-billing-back-bg: rgba(255, 255, 255, 0.94); --asth-billing-back-text: #2c3766; --asth-billing-back-shadow: 0 16px 34px rgba(148, 163, 184, 0.14); --asth-billing-eyebrow-bg: rgba(79, 70, 229, 0.08); --asth-billing-eyebrow-text: #4c57d6; --asth-billing-renewal-ring: rgba(5, 150, 105, 0.14); --asth-billing-compare-next-bg: linear-gradient(180deg, rgba(79, 70, 229, 0.07) 0%, rgba(255, 255, 255, 0.92) 100%); --asth-billing-checkout-bg: radial-gradient(circle at top right, rgba(79, 70, 229, 0.08), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 252, 0.98) 100%); --asth-billing-checkout-border: var(--asth-border); --asth-billing-checkout-stat: rgba(79, 70, 229, 0.05); --asth-billing-checkout-element: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 253, 0.96) 100%); --asth-billing-checkout-element-border: var(--asth-border); --asth-billing-modal-primary: #2c3766; } html[data-bs-theme="light"] body.douglas-shell { --asth-bg-base: #f7f9ff; --asth-bg-accent: #edf3ff; --asth-text-strong: #2c3766; --asth-text: #2c3766; --asth-text-soft: #52608f; --asth-text-muted: #7380aa; background: linear-gradient(180deg, #f8fbff 0%, #dee4ff 42%, #6e7cff 100%); color: var(--asth-text); } html[data-bs-theme="light"] body.douglas-shell::before { opacity: 0.94; background: radial-gradient(circle at 16% 18%, rgba(125, 140, 255, 0.38), transparent 28%), radial-gradient(circle at 78% 16%, rgba(82, 210, 255, 0.36), transparent 28%), radial-gradient(circle at 48% 74%, rgba(173, 115, 255, 0.30), transparent 34%), radial-gradient(circle at 88% 84%, rgba(33, 211, 155, 0.28), transparent 26%), linear-gradient(180deg, #f8fbff 0%, #dee4ff 42%, #6e7cff 100%); } html[data-bs-theme="light"] body.douglas-shell::after { opacity: 0.36; background: linear-gradient(rgba(22, 40, 72, 0.052) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 40, 72, 0.044) 1px, transparent 1px), radial-gradient(circle at 50% 6%, rgba(125, 140, 255, 0.12), transparent 30%), radial-gradient(circle at 52% 18%, rgba(82, 210, 255, 0.08), transparent 28%); background-size: 56px 56px, 56px 56px, 100% 100%, 100% 100%; mask-image: linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,0.12) 72%, rgba(0,0,0,0.04)); } html[data-bs-theme="light"] .douglas-shell .app-topbar { background: radial-gradient(circle at 18% 0%, rgba(125, 140, 255, 0.16), transparent 30%), rgba(248, 251, 255, 0.76); border-bottom-color: rgba(29, 53, 95, 0.10); box-shadow: 0 18px 50px rgba(29, 53, 95, 0.08); } html[data-bs-theme="light"] .douglas-shell .button-collapse-toggle, html[data-bs-theme="light"] .douglas-shell .topbar-link, html[data-bs-theme="light"] .douglas-shell .topbar-link.btn { background: rgba(255, 255, 255, 0.78); border-color: rgba(148, 163, 184, 0.16); color: var(--asth-text-soft); } html[data-bs-theme="light"] .douglas-shell .button-collapse-toggle:hover, html[data-bs-theme="light"] .douglas-shell .topbar-link:hover, html[data-bs-theme="light"] .douglas-shell .topbar-link.btn:hover { background: rgba(255, 255, 255, 0.96); border-color: rgba(79, 70, 229, 0.18); color: var(--asth-text); box-shadow: 0 14px 32px rgba(79, 70, 229, 0.10); } html[data-bs-theme="light"] .douglas-shell .topbar-link .fw-semibold, html[data-bs-theme="light"] .douglas-shell .topbar-link .fw-bold, html[data-bs-theme="light"] .douglas-shell .topbar-link .text-dark { color: var(--asth-text) !important; } html[data-bs-theme="light"] .douglas-shell .topbar-link .small, html[data-bs-theme="light"] .douglas-shell .topbar-link .text-muted { color: var(--asth-text-soft) !important; } html[data-bs-theme="light"] .douglas-shell .sidenav-menu { background: radial-gradient(circle at 16% 8%, rgba(125, 140, 255, 0.24), transparent 32%), radial-gradient(circle at 90% 28%, rgba(82, 210, 255, 0.16), transparent 32%), linear-gradient(180deg, rgba(248, 251, 255, 0.88) 0%, rgba(238, 244, 255, 0.94) 100%); border-right-color: rgba(29, 53, 95, 0.12); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.58), 18px 0 40px rgba(29, 53, 95, 0.08); } html[data-bs-theme="light"] .douglas-shell .sidenav-user { border-color: rgba(148, 163, 184, 0.16) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.96) 100%), linear-gradient(135deg, rgba(79, 70, 229, 0.10) 0%, rgba(8, 145, 178, 0.05) 100%); box-shadow: 0 18px 34px rgba(148, 163, 184, 0.12); } html[data-bs-theme="light"] .douglas-shell .sidenav-user h5, html[data-bs-theme="light"] .douglas-shell .sidenav-user h6, html[data-bs-theme="light"] .douglas-shell .sidenav-user .small, html[data-bs-theme="light"] .douglas-shell .sidenav-user-name, html[data-bs-theme="light"] .douglas-shell .sidenav-user a, html[data-bs-theme="light"] .douglas-shell .side-nav-link, html[data-bs-theme="light"] .douglas-shell .side-nav-link > i, html[data-bs-theme="light"] .douglas-shell .side-nav-link > svg, html[data-bs-theme="light"] .douglas-shell .card-title, html[data-bs-theme="light"] .douglas-shell .page-title, html[data-bs-theme="light"] .douglas-shell .page-shell-header h1, html[data-bs-theme="light"] .douglas-shell .page-shell-header h2, html[data-bs-theme="light"] .douglas-shell .page-shell-header h3, html[data-bs-theme="light"] .douglas-shell .page-shell-header h4, html[data-bs-theme="light"] .douglas-shell .table, html[data-bs-theme="light"] .douglas-shell .table thead th, html[data-bs-theme="light"] .douglas-shell .dropdown-item, html[data-bs-theme="light"] .douglas-shell label, html[data-bs-theme="light"] .douglas-shell .form-label, html[data-bs-theme="light"] .douglas-shell .nav-tabs .nav-link, html[data-bs-theme="light"] .douglas-shell .nav-pills .nav-link { color: var(--asth-text) !important; } html[data-bs-theme="light"] .douglas-shell .sidenav-user .text-muted, html[data-bs-theme="light"] .douglas-shell .sidenav-user .small, html[data-bs-theme="light"] .douglas-shell p, html[data-bs-theme="light"] .douglas-shell .text-muted, html[data-bs-theme="light"] .douglas-shell .form-text, html[data-bs-theme="light"] .douglas-shell .small, html[data-bs-theme="light"] .douglas-shell small, html[data-bs-theme="light"] .douglas-shell .table-light, html[data-bs-theme="light"] .douglas-shell .text-body-secondary, html[data-bs-theme="light"] .douglas-shell .side-nav-title { color: var(--asth-text-soft) !important; } html[data-bs-theme="light"] .douglas-shell .side-nav-link { border-color: transparent; } html[data-bs-theme="light"] .douglas-shell .side-nav-link:hover { background: rgba(79, 70, 229, 0.06); border-color: rgba(79, 70, 229, 0.14); color: var(--asth-text) !important; } html[data-bs-theme="light"] .douglas-shell .side-nav-link:hover > i, html[data-bs-theme="light"] .douglas-shell .side-nav-link:hover > svg { color: var(--asth-brand); } html[data-bs-theme="light"] .douglas-shell .side-nav-link.active { background: linear-gradient(135deg, rgba(79, 70, 229, 0.12) 0%, rgba(8, 145, 178, 0.08) 100%); border-color: rgba(79, 70, 229, 0.18); box-shadow: 0 16px 26px rgba(79, 70, 229, 0.10); } html[data-bs-theme="light"] .douglas-shell .side-nav-link.active > i, html[data-bs-theme="light"] .douglas-shell .side-nav-link.active > svg { color: var(--asth-brand); } html[data-bs-theme="light"] .douglas-shell .card, html[data-bs-theme="light"] .douglas-shell .modal-content, html[data-bs-theme="light"] .douglas-shell .dropdown-menu, html[data-bs-theme="light"] .douglas-shell .offcanvas, html[data-bs-theme="light"] .douglas-shell .accordion-item, html[data-bs-theme="light"] .douglas-shell .list-group-item, html[data-bs-theme="light"] .douglas-shell .page-shell-header { background: var(--asth-panel); border-color: var(--asth-border); box-shadow: var(--asth-shadow-soft); } html[data-bs-theme="light"] .douglas-shell .alert, .douglas-shell .auth-shell .alert, .douglas-shell .invite-auth-shell .alert { background: var(--asth-panel); border: 1px solid var(--asth-border); box-shadow: var(--asth-shadow-soft); border-color: #3b82f6c7; border-radius: var(--asth-radius-lg); } .douglas-shell .alert.alert-success, .douglas-shell .auth-shell .alert.alert-success, .douglas-shell .invite-auth-shell .alert.alert-success { border-color: rgba(61, 213, 152, 0.42); background: linear-gradient(180deg, rgba(61, 213, 152, 0.12) 0%, rgba(10, 20, 36, 0.92) 100%); color: var(--asth-text); } .douglas-shell .alert.alert-danger, .douglas-shell .auth-shell .alert.alert-danger, .douglas-shell .invite-auth-shell .alert.alert-danger { border-color: rgba(255, 122, 144, 0.42); background: linear-gradient(180deg, rgba(255, 122, 144, 0.12) 0%, rgba(10, 20, 36, 0.92) 100%); color: var(--asth-text); } .douglas-shell .alert.alert-warning, .douglas-shell .auth-shell .alert.alert-warning, .douglas-shell .invite-auth-shell .alert.alert-warning { border-color: rgba(246, 199, 96, 0.42); background: linear-gradient(180deg, rgba(246, 199, 96, 0.12) 0%, rgba(10, 20, 36, 0.92) 100%); color: var(--asth-text); } .douglas-shell .alert.alert-info, .douglas-shell .auth-shell .alert.alert-info, .douglas-shell .invite-auth-shell .alert.alert-info { border-color: rgba(79, 225, 255, 0.36); background: linear-gradient(180deg, rgba(79, 225, 255, 0.11) 0%, rgba(10, 20, 36, 0.92) 100%); color: var(--asth-text); } html[data-bs-theme="light"] .douglas-shell .card-header, html[data-bs-theme="light"] .douglas-shell .card-footer, html[data-bs-theme="light"] .douglas-shell .modal-header, html[data-bs-theme="light"] .douglas-shell .modal-footer { background: rgba(248, 250, 252, 0.72); } html[data-bs-theme="light"] .douglas-shell .bg-light, html[data-bs-theme="light"] .douglas-shell .bg-body, html[data-bs-theme="light"] .douglas-shell .bg-body-tertiary, html[data-bs-theme="light"] .douglas-shell .bg-body-secondary { background: rgba(248, 250, 252, 0.82) !important; } html[data-bs-theme="light"] .douglas-shell .border, html[data-bs-theme="light"] .douglas-shell .border-top, html[data-bs-theme="light"] .douglas-shell .border-bottom, html[data-bs-theme="light"] .douglas-shell .border-start, html[data-bs-theme="light"] .douglas-shell .border-end, html[data-bs-theme="light"] .douglas-shell .hr, html[data-bs-theme="light"] .douglas-shell hr, html[data-bs-theme="light"] .douglas-shell .card-header, html[data-bs-theme="light"] .douglas-shell .card-footer, html[data-bs-theme="light"] .douglas-shell .modal-header, html[data-bs-theme="light"] .douglas-shell .modal-footer, html[data-bs-theme="light"] .douglas-shell .dropdown-divider, html[data-bs-theme="light"] .douglas-shell .accordion-button, html[data-bs-theme="light"] .douglas-shell .list-group-item, html[data-bs-theme="light"] .douglas-shell .table > :not(caption) > * > * { border-color: rgba(148, 163, 184, 0.16) !important; } html[data-bs-theme="light"] .douglas-shell .btn-primary, html[data-bs-theme="light"] .douglas-shell .bg-primary { color: #ffffff !important; box-shadow: 0 14px 32px rgba(79, 70, 229, 0.20); } html[data-bs-theme="light"] .douglas-shell .btn-outline-primary { color: var(--asth-brand); border-color: rgba(79, 70, 229, 0.22); background: rgba(79, 70, 229, 0.06); } html[data-bs-theme="light"] .douglas-shell .btn-outline-primary:hover, html[data-bs-theme="light"] .douglas-shell .btn-outline-primary:focus, html[data-bs-theme="light"] .douglas-shell .btn-outline-primary:active { color: #ffffff; background: linear-gradient(135deg, #6677ff 0%, #4fe1ff 100%); border-color: transparent; } html[data-bs-theme="light"] .douglas-shell .btn-light, html[data-bs-theme="light"] .douglas-shell .btn-outline-secondary, html[data-bs-theme="light"] .douglas-shell .btn-secondary { background: rgba(255, 255, 255, 0.86); border-color: rgba(148, 163, 184, 0.18); color: var(--asth-text); } html[data-bs-theme="light"] .douglas-shell .btn-light:hover, html[data-bs-theme="light"] .douglas-shell .btn-outline-secondary:hover, html[data-bs-theme="light"] .douglas-shell .btn-secondary:hover { background: #ffffff; border-color: rgba(79, 70, 229, 0.16); color: var(--asth-text); } html[data-bs-theme="light"] .douglas-shell .form-control, html[data-bs-theme="light"] .douglas-shell .form-select, html[data-bs-theme="light"] .douglas-shell .input-group-text, html[data-bs-theme="light"] .douglas-shell textarea, html[data-bs-theme="light"] .douglas-shell select { background: rgba(255, 255, 255, 0.96) !important; border-color: rgba(148, 163, 184, 0.20) !important; color: var(--asth-text) !important; } html[data-bs-theme="light"] .douglas-shell .form-control::placeholder, html[data-bs-theme="light"] .douglas-shell textarea::placeholder { color: #94a3b8; } html[data-bs-theme="light"] .douglas-shell .form-control:focus, html[data-bs-theme="light"] .douglas-shell .form-select:focus, html[data-bs-theme="light"] .douglas-shell textarea:focus, html[data-bs-theme="light"] .douglas-shell .input-group:focus-within .input-group-text { border-color: rgba(79, 70, 229, 0.28) !important; background: #ffffff !important; box-shadow: 0 0 0 .24rem rgba(79, 70, 229, 0.10) !important; } html[data-bs-theme="light"] .douglas-shell .table { --ins-table-color: var(--asth-text); --ins-table-bg: transparent; --ins-table-border-color: var(--asth-border-subtle); --ins-table-striped-bg: rgba(248, 250, 252, 0.9); --ins-table-hover-bg: var(--asth-table-hover-bg); color: var(--asth-text); } html[data-bs-theme="light"] .douglas-shell .table thead th, html[data-bs-theme="light"] .douglas-shell table.dataTable thead th { color: var(--asth-text) !important; background: rgba(248, 250, 252, 0.82); } html[data-bs-theme="light"] .douglas-shell .badge-outline-primary, html[data-bs-theme="light"] .douglas-shell .badge.bg-primary-subtle, html[data-bs-theme="light"] .douglas-shell .text-bg-primary { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; } html[data-bs-theme="light"] .douglas-shell .badge.bg-primary-subtle.text-primary, html[data-bs-theme="light"] .douglas-shell .asthron-addon-ribbon.bg-primary-subtle.text-primary { background: rgba(85, 104, 255, 0.12) !important; border-color: rgba(85, 104, 255, 0.28) !important; color: #2c3766 !important; } html[data-bs-theme="light"] .douglas-shell .badge-outline-info, html[data-bs-theme="light"] .douglas-shell .text-bg-info { background: #ecfeff !important; border-color: #a5f3fc !important; color: #0e7490 !important; } html[data-bs-theme="light"] .douglas-shell .badge-outline-success, html[data-bs-theme="light"] .douglas-shell .text-bg-success { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #047857 !important; } html[data-bs-theme="light"] .douglas-shell .badge-outline-warning, html[data-bs-theme="light"] .douglas-shell .text-bg-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #b45309 !important; } html[data-bs-theme="light"] .douglas-shell .badge-outline-danger, html[data-bs-theme="light"] .douglas-shell .text-bg-danger { background: #fff1f2 !important; border-color: #fecdd3 !important; color: #be123c !important; } html[data-bs-theme="light"] .douglas-shell .badge-outline-secondary, html[data-bs-theme="light"] .douglas-shell .badge-outline-slate, html[data-bs-theme="light"] .douglas-shell .badge-outline-dark, html[data-bs-theme="light"] .douglas-shell .badge-outline-light, html[data-bs-theme="light"] .douglas-shell .text-bg-secondary, html[data-bs-theme="light"] .douglas-shell .text-bg-dark, html[data-bs-theme="light"] .douglas-shell .text-bg-light { background: #f8fafc !important; border-color: #cbd5e1 !important; color: var(--asth-text) !important; } html[data-bs-theme="light"] .douglas-shell .progress, html[data-bs-theme="light"] .douglas-shell .progress-stacked { background: rgba(148, 163, 184, 0.14); } html[data-bs-theme="light"] .douglas-shell .dropdown-menu { background: rgba(255, 255, 255, 0.95); } html[data-bs-theme="light"] .douglas-shell .dropdown-item:hover, html[data-bs-theme="light"] .douglas-shell .dropdown-item:focus { background: rgba(79, 70, 229, 0.08); color: var(--asth-brand) !important; } html[data-bs-theme="light"] .douglas-shell .nav-tabs, html[data-bs-theme="light"] .douglas-shell .nav-pills { border-color: rgba(148, 163, 184, 0.16); } html[data-bs-theme="light"] .douglas-shell .nav-tabs .nav-link.active, html[data-bs-theme="light"] .douglas-shell .nav-pills .nav-link.active { background: rgba(79, 70, 229, 0.10); border-color: rgba(79, 70, 229, 0.14); color: var(--asth-brand) !important; } @media (max-width: 1199.98px) { .douglas-shell .button-collapse-toggle { width: 4rem; height: 4rem; min-width: 4rem; min-height: 4rem; } } /* ========================================================= AsthronAI protected app responsive precision pass ========================================================= */ @media (max-width: 991.98px) { .douglas-shell .app-topbar, .douglas-shell .content-page { margin-left: 0 !important; width: 100% !important; } .douglas-shell .content-page { padding-left: 0 !important; padding-right: 0 !important; } .douglas-shell .topbar-menu { min-height: 72px; padding-top: .45rem; padding-bottom: .45rem; gap: .5rem; } .douglas-shell .topbar-menu > .d-flex { min-width: 0; } .douglas-shell .topbar-menu .topbar-item.d-none.d-md-flex { display: none !important; } .douglas-shell .topbar-menu .topbar-link.dropdown-toggle { padding-left: .3rem !important; padding-right: .3rem !important; } .douglas-shell .button-collapse-toggle { width: 3.4rem; height: 3.4rem; min-width: 3.4rem; min-height: 3.4rem; border-radius: 16px; } .douglas-shell .button-collapse-toggle svg, .douglas-shell .button-collapse-toggle i { width: 1.3rem; height: 1.3rem; font-size: 1.3rem; } .douglas-shell .sidenav-menu { width: min(78vw, 280px) !important; max-width: 280px; box-shadow: 18px 0 42px rgba(0, 0, 0, 0.34); } .douglas-shell .sidenav-menu .sidenav-brand { gap: .7rem; padding: .68rem .72rem .42rem; } .douglas-shell .sidenav-menu .asthronai-wordmark--sm { width: 146px; height: 34px; } .douglas-shell .sidenav-menu .sidenav-brand-subtitle { margin-top: .05rem; font-size: .74rem; line-height: 1.15; } .douglas-shell .sidenav-menu .button-collapse-toggle { width: 2.35rem; height: 2.35rem; min-width: 2.35rem; min-height: 2.35rem; border-radius: 10px; } .douglas-shell .sidenav-menu .button-collapse-toggle svg, .douglas-shell .sidenav-menu .button-collapse-toggle i { width: 1.05rem; height: 1.05rem; font-size: 1.05rem; } .douglas-shell .sidenav-menu .side-nav { padding: 0 .5rem 1rem; } .douglas-shell .sidenav-menu .side-nav-title { padding-left: .62rem; margin-top: .68rem; margin-bottom: .24rem; font-size: .56rem !important; letter-spacing: .085em; } .douglas-shell .sidenav-menu .side-nav-item { margin-bottom: .02rem; } .douglas-shell .sidenav-menu .side-nav-item + .side-nav-title { padding-top: .26rem; } .douglas-shell .sidenav-menu .side-nav-link { gap: .55rem; min-height: 36px; padding: .38rem .72rem; border-radius: 12px; } .douglas-shell .sidenav-menu .side-nav-link > i, .douglas-shell .sidenav-menu .side-nav-link > svg { width: 1rem; height: 1rem; flex-basis: 1rem; } .douglas-shell .sidenav-menu .side-nav-link .menu-text { font-size: .72rem; line-height: 1.15; } .douglas-shell .row { --ins-gutter-x: 1rem; } .douglas-shell .card-body, .douglas-shell .card-header, .douglas-shell .card-footer, .douglas-shell .page-shell-header { padding-left: 1rem; padding-right: 1rem; } .douglas-shell .dashboard-hero .card-body { padding: 1.1rem !important; } .douglas-shell .dashboard-hero h2, .douglas-shell .dashboard-hero .h2 { font-size: clamp(1.7rem, 7vw, 2.25rem); line-height: 1.06; } .douglas-shell .hero-stat, .douglas-shell .summary-tile { padding: 1rem; border-radius: 16px; } .douglas-shell .btn, .douglas-shell .btn-group { max-width: 100%; } .douglas-shell .table-responsive { margin-left: -0.1rem; margin-right: -0.1rem; padding-bottom: .35rem; -webkit-overflow-scrolling: touch; } } @media (max-width: 767.98px) { .douglas-shell .app-topbar { padding-left: .55rem; padding-right: .55rem; } .douglas-shell .page-shell-header, .douglas-shell .card { border-radius: 16px; } .douglas-shell .dashboard-hero h6, .douglas-shell .dashboard-hero .text-muted { line-height: 1.55; } .douglas-shell .row > [class*="col-"] { min-width: 0; } .douglas-shell .d-flex.flex-wrap.align-items-center.gap-2.mb-2 { align-items: flex-start !important; } .douglas-shell .btn-toolbar, .douglas-shell .input-group, .douglas-shell .d-flex.gap-2, .douglas-shell .d-flex.gap-3, .douglas-shell .d-flex.align-items-center.gap-2, .douglas-shell .d-flex.align-items-center.gap-3 { flex-wrap: wrap; } } html[data-bs-theme="dark"] body.douglas-shell select, html[data-bs-theme="dark"] body.douglas-shell .form-select, html[data-bs-theme="dark"] body.douglas-shell input[type="date"], html[data-bs-theme="dark"] body.douglas-shell input[type="datetime-local"], html[data-bs-theme="dark"] body.douglas-shell input[type="month"], html[data-bs-theme="dark"] body.douglas-shell input[type="time"] { background-color: rgba(12, 24, 41, 0.96) !important; color: var(--asth-text) !important; border-color: rgba(132, 151, 182, 0.24) !important; color-scheme: dark; } html[data-bs-theme="dark"] body.douglas-shell select option, html[data-bs-theme="dark"] body.douglas-shell .form-select option, html[data-bs-theme="dark"] body.douglas-shell select optgroup, html[data-bs-theme="dark"] body.douglas-shell .form-select optgroup { background-color: #0b1728 !important; color: #eaf2ff !important; } html[data-bs-theme="dark"] body.douglas-shell input[type="date"]::-webkit-calendar-picker-indicator, html[data-bs-theme="dark"] body.douglas-shell input[type="datetime-local"]::-webkit-calendar-picker-indicator, html[data-bs-theme="dark"] body.douglas-shell input[type="month"]::-webkit-calendar-picker-indicator, html[data-bs-theme="dark"] body.douglas-shell input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.1); cursor: pointer; } /* ========================================================= Billing payment experience ========================================================= */ .douglas-shell .billing-payment-shell { max-width: 1320px; margin: 0 auto; } .douglas-shell .billing-payment-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); gap: 1.5rem; align-items: stretch; } .douglas-shell .billing-payment-summary-pane, .douglas-shell .billing-payment-card { border-radius: 28px; overflow: hidden; border: 1px solid var(--asth-billing-summary-border); box-shadow: var(--asth-billing-summary-card-shadow); } .douglas-shell .billing-payment-summary-pane { position: relative; padding: 1.6rem; background: var(--asth-billing-summary-bg); color: var(--asth-billing-summary-text); display: flex; flex-direction: column; gap: 1.15rem; } .douglas-shell .billing-payment-summary-pane::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 14rem; height: 14rem; background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 72%); pointer-events: none; } .douglas-shell .billing-payment-summary-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .douglas-shell .billing-payment-back-button { width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(132, 151, 182, 0.18); background: var(--asth-billing-back-bg); color: var(--asth-billing-back-text); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--asth-billing-back-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; text-decoration: none; flex: 0 0 auto; } .douglas-shell .billing-payment-back-button:hover, .douglas-shell .billing-payment-back-button:focus { transform: translateY(-1px); box-shadow: 0 20px 40px rgba(23, 37, 53, 0.16); color: var(--asth-billing-back-text); border-color: rgba(79, 70, 229, 0.18); } .douglas-shell .billing-payment-back-arrow { font-size: 1.2rem; line-height: 1; } .douglas-shell .billing-payment-brand { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 0.55rem 0.9rem; min-height: 3.25rem; border-radius: 999px; background: var(--asth-billing-summary-card); box-shadow: inset 0 0 0 1px rgba(132, 151, 182, 0.12); } .douglas-shell .billing-payment-wordmark { width: 208px; height: 48px; margin: 0 auto; background-position: center center; } .douglas-shell .billing-payment-story { position: relative; z-index: 1; margin-bottom: 0.1rem; max-width: 40rem; } .douglas-shell .billing-payment-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: 999px; background: var(--asth-billing-eyebrow-bg); color: var(--asth-billing-eyebrow-text); font-size: 0.82rem; font-weight: var(--asth-font-weight-label); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1rem; } .douglas-shell .billing-payment-story-title { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.02; letter-spacing: 0; margin-bottom: 0.8rem; color: var(--asth-billing-summary-text); } .douglas-shell .billing-payment-story-copy { margin: 0; font-size: 1rem; line-height: 1.68; color: var(--asth-billing-summary-soft); max-width: 34rem; } .douglas-shell .billing-payment-recurring-card, .douglas-shell .billing-payment-summary-card { position: relative; z-index: 1; background: var(--asth-billing-summary-card); border: 1px solid var(--asth-billing-summary-card-border); border-radius: 24px; padding: 1.25rem; backdrop-filter: blur(12px); } .douglas-shell .billing-payment-recurring-label, .douglas-shell .billing-payment-summary-card-title { font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: var(--asth-font-weight-label); color: var(--asth-billing-summary-muted); margin-bottom: 0.65rem; } .douglas-shell .billing-payment-recurring-value { font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height: 1.05; font-weight: var(--asth-font-weight-strong); letter-spacing: 0; color: var(--asth-billing-summary-text); display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; } .douglas-shell .billing-payment-recurring-value span { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; color: var(--asth-billing-summary-soft); } .douglas-shell .billing-payment-renewal-row { display: flex; align-items: flex-start; gap: 0.8rem; margin-top: 1.05rem; } .douglas-shell .billing-payment-renewal-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--asth-success); margin-top: 0.35rem; box-shadow: 0 0 0 6px var(--asth-billing-renewal-ring); } .douglas-shell .billing-payment-renewal-date { font-size: 1.02rem; font-weight: var(--asth-font-weight-title); color: var(--asth-billing-summary-text); } .douglas-shell .billing-payment-renewal-copy, .douglas-shell .billing-payment-note-copy { color: var(--asth-billing-summary-soft); line-height: 1.6; } .douglas-shell .billing-payment-detail-list { display: grid; gap: 0.85rem; } .douglas-shell .billing-payment-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--asth-billing-summary-card-border); } .douglas-shell .billing-payment-detail-row:last-child { padding-bottom: 0; border-bottom: 0; } .douglas-shell .billing-payment-detail-label { color: var(--asth-billing-summary-soft); } .douglas-shell .billing-payment-detail-value { color: var(--asth-billing-summary-text); font-weight: 600; text-align: right; } .douglas-shell .billing-payment-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } .douglas-shell .billing-payment-compare-item { border-radius: 20px; padding: 1rem; background: var(--asth-billing-summary-card); border: 1px solid var(--asth-billing-summary-card-border); } .douglas-shell .billing-payment-compare-item.is-next { border-color: rgba(34, 103, 125, 0.24); background: var(--asth-billing-compare-next-bg); } .douglas-shell .billing-payment-compare-label { display: block; margin-bottom: 0.45rem; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--asth-billing-summary-muted); } .douglas-shell .billing-payment-checkout-pane { display: flex; min-width: 0; } .douglas-shell .billing-payment-card { width: 100%; background: var(--asth-billing-checkout-bg); border-color: var(--asth-billing-checkout-border); color: var(--asth-text); } .douglas-shell .billing-payment-card-body { padding: 1.5rem; } .douglas-shell .billing-payment-checkout-head { margin-bottom: 1.25rem; } .douglas-shell .billing-payment-head-badge { display: inline-flex; align-items: center; margin-bottom: 1rem; padding: 0.48rem 0.85rem; border-radius: 999px; background: rgba(79, 70, 229, 0.14); border: 1px solid rgba(79, 70, 229, 0.18); color: var(--asth-brand) !important; font-weight: var(--asth-font-weight-label); letter-spacing: 0.04em; } .douglas-shell .billing-payment-checkout-title { font-size: clamp(1.55rem, 2vw, 2rem); line-height: 1.15; letter-spacing: 0; margin-bottom: 0.6rem; } .douglas-shell .billing-payment-checkout-copy { margin: 0; color: var(--asth-text-soft); line-height: 1.65; } .douglas-shell .billing-payment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; } .douglas-shell .billing-payment-stat { padding: 1rem 1.05rem; border-radius: 20px; border: 1px solid var(--asth-billing-checkout-border); background: var(--asth-billing-checkout-stat); } .douglas-shell .billing-payment-stat-label { color: var(--asth-text-soft); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; } .douglas-shell .billing-payment-stat-value { color: var(--asth-text); font-size: 1.08rem; font-weight: var(--asth-font-weight-title); margin-top: 0.35rem; } .douglas-shell .billing-payment-element-wrap { padding: 1rem; border-radius: 24px; border: 1px solid var(--asth-billing-checkout-element-border); background: var(--asth-billing-checkout-element); } .douglas-shell .billing-payment-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; } .douglas-shell .billing-payment-actions .btn-primary { min-width: 180px; } .douglas-shell .billing-payment-message { display: none; } .douglas-shell .billing-payment-message.is-visible { display: block; } .douglas-shell .billing-payment-refresh, .douglas-shell .billing-payment-footnote { color: var(--asth-text-soft); font-size: 0.92rem; } .douglas-shell .billing-payment-footnote { margin-top: 1rem; line-height: 1.55; } .swal2-popup.billing-payment-exit-modal { border-radius: 28px; padding: 2rem 1.8rem 1.45rem; } .swal2-popup.billing-payment-exit-modal .swal2-image { margin: 0 auto 1rem; } .swal2-popup.billing-payment-exit-modal .swal2-title { font-size: 1.9rem; line-height: 1.15; letter-spacing: 0; } .swal2-popup.billing-payment-exit-modal .swal2-html-container { font-size: 1rem; line-height: 1.55; margin-top: 0.85rem; } .swal2-popup.billing-payment-exit-modal .swal2-actions { flex-direction: column; width: 100%; margin-top: 1.35rem; } .swal2-popup.billing-payment-exit-modal .swal2-confirm, .swal2-popup.billing-payment-exit-modal .swal2-deny { margin: 0; width: 100%; border-radius: 16px; font-weight: var(--asth-font-weight-title); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .swal2-popup.billing-payment-exit-modal .swal2-confirm { background: var(--asth-billing-modal-primary) !important; color: #22c55e !important; border: 2px solid; border-color: #22c55e4d; padding: 0.9rem 1rem; } .swal2-popup.billing-payment-exit-modal .swal2-deny { background: rgba(255, 255, 255, 0.08) !important; color: #ef4444 !important; border: 2px solid; border-color: #ef444440; padding: 0.85rem 1rem; margin-top: 0.7rem; } .swal2-popup.billing-payment-exit-modal .swal2-confirm:hover, .swal2-popup.billing-payment-exit-modal .swal2-confirm:focus { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2), 0 0 22px rgba(34, 197, 94, 0.24) !important; } .swal2-popup.billing-payment-exit-modal .swal2-deny:hover, .swal2-popup.billing-payment-exit-modal .swal2-deny:focus { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.18), 0 0 22px rgba(239, 68, 68, 0.22) !important; } html[data-bs-theme="light"] .douglas-shell .billing-payment-card { color: var(--asth-text); } html[data-bs-theme="light"] .douglas-shell .billing-payment-summary-pane::before { background: radial-gradient(circle, rgba(255, 255, 255, 0.46), transparent 72%); } html[data-bs-theme="light"] .douglas-shell .billing-payment-brand { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36); } html[data-bs-theme="light"] .douglas-shell .billing-payment-head-badge { background: rgba(79, 70, 229, 0.08); } html[data-bs-theme="light"] .douglas-shell .billing-payment-message.alert-info { background: rgba(59, 130, 246, 0.08); } html[data-bs-theme="light"] .douglas-shell .billing-payment-message.alert-warning { background: rgba(217, 119, 6, 0.08); } html[data-bs-theme="light"] .douglas-shell .billing-payment-message.alert-danger { background: rgba(220, 38, 38, 0.08); } @media (max-width: 1199.98px) { .douglas-shell .billing-payment-layout { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .douglas-shell .billing-payment-summary-pane, .douglas-shell .billing-payment-card-body { padding: 1.1rem; } .douglas-shell .billing-payment-summary-top { align-items: flex-start; } .douglas-shell .billing-payment-brand { width: 100%; justify-content: flex-start; } .douglas-shell .billing-payment-compare-grid { grid-template-columns: 1fr; } .douglas-shell .billing-payment-actions { justify-content: stretch; } .douglas-shell .billing-payment-actions > * { width: 100%; } .douglas-shell .billing-payment-detail-row { align-items: flex-start; flex-direction: column; gap: 0.25rem; } .douglas-shell .billing-payment-detail-value { text-align: left; } } /* ========================================================= Super Admin Batch 1 UX cleanup Scope: overview-heavy admin pages. Presentation only. ========================================================= */ .douglas-shell .admin-ux-page { --admin-ux-card-padding: 1.1rem; } .douglas-shell .admin-ux-page .dashboard-hero { overflow: hidden; background: radial-gradient(circle at top right, rgba(79, 225, 255, 0.10), transparent 34%), linear-gradient(180deg, rgba(15, 29, 50, 0.94) 0%, rgba(10, 20, 36, 0.90) 100%); } .douglas-shell .admin-ux-page .dashboard-hero .card-body { padding: clamp(1.25rem, 2vw, 2rem) !important; } .douglas-shell .admin-ux-page .dashboard-hero h2 { letter-spacing: -0.035em; line-height: 1.05; } .douglas-shell .admin-ux-page .badge-default { border: 1px solid rgba(132, 151, 182, 0.18); background: rgba(255, 255, 255, 0.055); } .douglas-shell .admin-ux-page .hero-stat, .douglas-shell .admin-ux-page .summary-tile { padding: var(--admin-ux-card-padding); border-radius: 18px; border: 1px solid rgba(132, 151, 182, 0.13); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 100%); box-shadow: none; } .douglas-shell .admin-ux-page .hero-stat h2, .douglas-shell .admin-ux-page .hero-stat h3, .douglas-shell .admin-ux-page .hero-stat h4, .douglas-shell .admin-ux-page .summary-tile h2, .douglas-shell .admin-ux-page .summary-tile h3, .douglas-shell .admin-ux-page .summary-tile h4 { letter-spacing: -0.03em; } .douglas-shell .admin-ux-page .dashboard-section-card, .douglas-shell .admin-ux-page .dashboard-metric-card, .douglas-shell .admin-ux-page .quick-link-card { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16); } .douglas-shell .admin-ux-page .dashboard-section-card > .card-header, .douglas-shell .admin-ux-page .dashboard-metric-card > .card-header, .douglas-shell .admin-ux-page .card.border-2 > .card-header { padding: 1rem 1.15rem; background: rgba(255, 255, 255, 0.018); } .douglas-shell .admin-ux-page .dashboard-section-card > .card-body, .douglas-shell .admin-ux-page .dashboard-metric-card > .card-body, .douglas-shell .admin-ux-page .card.border-2 > .card-body { padding: 1.1rem !important; } .douglas-shell .admin-ux-page .dashboard-metric-card .metric-icon, .douglas-shell .admin-ux-page .quick-link-card .metric-icon { width: 2.5rem; height: 2.5rem; min-width: 2.5rem; min-height: 2.5rem; } .douglas-shell .admin-ux-page .card-title { letter-spacing: -0.015em; } .douglas-shell .admin-ux-page .table-responsive { border: 1px solid rgba(132, 151, 182, 0.12); background: rgba(255, 255, 255, 0.012); } .douglas-shell .admin-ux-page .table thead th { white-space: nowrap; } .douglas-shell .admin-ux-page .table tbody td { padding-top: 0.82rem; padding-bottom: 0.82rem; } .douglas-shell .admin-ux-page .client-action-stack { gap: 0.45rem !important; } .douglas-shell .admin-ux-page .client-action-stack .btn { border-radius: 999px; } .douglas-shell .admin-dashboard-overview .dashboard-metric-card .card-body { min-height: 132px; } .douglas-shell .admin-dashboard-overview .row-cols-1.row-cols-md-2.row-cols-xxl-4 { --ins-gutter-x: 0.9rem; --ins-gutter-y: 0.9rem; } .douglas-shell .admin-clients-directory .client-directory-card .card-header { padding: 1rem 1.15rem; } .douglas-shell .admin-clients-directory .client-table .client-name { font-size: 0.98rem; letter-spacing: -0.01em; } .douglas-shell .admin-clients-directory .client-table .client-meta { line-height: 1.45; } .douglas-shell .admin-clients-directory .table-metric { min-width: 2rem; background: rgba(79, 225, 255, 0.08); border: 1px solid rgba(79, 225, 255, 0.12); } .douglas-shell .admin-client-profile .dashboard-hero .d-flex.flex-wrap.gap-2.mt-3 { max-width: 980px; } .douglas-shell .admin-client-profile .dashboard-hero .d-flex.flex-wrap.gap-2.mt-3 .btn { padding: 0.55rem 0.85rem; } .douglas-shell .admin-client-profile .quick-link-card { transition: border-color .2s ease, transform .2s ease, background-color .2s ease; } .douglas-shell .admin-client-profile .client-profile-quick-grid .quick-link-card > .card-body { min-height: 0; padding: 0.85rem 1rem !important; } .douglas-shell .admin-client-profile .client-profile-quick-grid .quick-link-card .metric-icon { width: 2.05rem; height: 2.05rem; min-width: 2.05rem; min-height: 2.05rem; } .douglas-shell .admin-client-profile .client-profile-quick-grid .client-profile-quick-metric { display: flex; align-items: flex-start; gap: 0.8rem; } .douglas-shell .admin-client-profile .client-profile-quick-grid .client-profile-quick-copy { flex: 1 1 auto; min-width: 0; } .douglas-shell .admin-client-profile .client-profile-quick-grid .quick-link-card h3 { font-size: 1.35rem; line-height: 1.05; } .douglas-shell .admin-client-profile .client-profile-quick-grid .quick-link-card p { line-height: 1.32; font-size: .84rem; } .douglas-shell .admin-client-profile a:hover .quick-link-card { transform: translateY(-2px); border-color: rgba(79, 225, 255, 0.28); background: rgba(79, 225, 255, 0.035); } .douglas-shell .admin-client-profile .card .text-uppercase, .douglas-shell .admin-clients-directory .card .text-uppercase { letter-spacing: .08em; font-size: .72rem; } @media (max-width: 767.98px) { .douglas-shell .admin-ux-page .dashboard-hero .card-body, .douglas-shell .admin-ux-page .dashboard-section-card > .card-body, .douglas-shell .admin-ux-page .dashboard-metric-card > .card-body, .douglas-shell .admin-ux-page .card.border-2 > .card-body { padding: 1rem !important; } .douglas-shell .admin-client-profile .dashboard-hero .d-flex.flex-wrap.gap-2.mt-3 .btn { width: 100%; } } /* ========================================================= Super Admin Batch 2-4 UX cleanup Scope: all authenticated admin pages. Presentation only. ========================================================= */ .douglas-shell .admin-shell-workspace { --admin-ux-radius: 18px; --admin-ux-radius-sm: 14px; --admin-ux-line: rgba(132, 151, 182, 0.14); --admin-ux-softer: rgba(255, 255, 255, 0.018); padding-bottom: 1.5rem; } .douglas-shell .admin-shell-workspace > .row, .douglas-shell .admin-shell-workspace > .card, .douglas-shell .admin-shell-workspace > form, .douglas-shell .admin-shell-workspace > .alert { animation: adminUxFadeUp .24s ease both; } @keyframes adminUxFadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .douglas-shell .admin-shell-workspace .card { border-color: var(--admin-ux-line); } .douglas-shell .admin-shell-workspace .card:not(.dashboard-hero):not(.billing-payment-card) { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.13); } .douglas-shell .admin-shell-workspace .card-header { border-color: var(--admin-ux-line); } .douglas-shell .admin-shell-workspace .card-header.bg-transparent, .douglas-shell .admin-shell-workspace .card-header.border-dashed { background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.006)) !important; } .douglas-shell .admin-shell-workspace .card-title { font-weight: 650; } .douglas-shell .admin-shell-workspace .text-muted { line-height: 1.5; } .douglas-shell .admin-shell-workspace .alert { border-radius: var(--admin-ux-radius-sm); border-width: 1px; } .douglas-shell .admin-shell-workspace .form-label { margin-bottom: 0.38rem; font-size: 0.78rem; font-weight: 650; letter-spacing: .055em; text-transform: uppercase; } .douglas-shell .admin-shell-workspace .form-control, .douglas-shell .admin-shell-workspace .form-select { border-radius: 14px; border-color: rgba(132, 151, 182, 0.18); } .douglas-shell .admin-shell-workspace textarea.form-control { min-height: 6.5rem; } .douglas-shell .admin-shell-workspace .input-group .form-control:first-child, .douglas-shell .admin-shell-workspace .input-group .form-select:first-child { border-top-left-radius: 14px; border-bottom-left-radius: 14px; } .douglas-shell .admin-shell-workspace .input-group .btn:last-child { border-top-right-radius: 14px; border-bottom-right-radius: 14px; } .douglas-shell .admin-shell-workspace .btn:not(.btn-link) { border-radius: 999px; font-weight: 600; } .douglas-shell .admin-shell-workspace .btn-sm:not(.btn-link) { padding-inline: 0.78rem; } .douglas-shell .admin-shell-workspace .table-responsive { border-radius: var(--admin-ux-radius); overflow: auto; } .douglas-shell .admin-shell-workspace .table { --ins-table-bg: transparent; margin-bottom: 0; } .douglas-shell .admin-shell-workspace .table thead th { border-bottom-color: var(--admin-ux-line); color: var(--ins-secondary-color); font-size: 0.72rem; letter-spacing: .07em; text-transform: uppercase; } .douglas-shell .admin-shell-workspace .table tbody tr { transition: background-color .16s ease; } .douglas-shell .admin-shell-workspace .table tbody tr:hover { background-color: rgba(79, 225, 255, 0.035); } .douglas-shell .admin-shell-workspace .table td, .douglas-shell .admin-shell-workspace .table th { vertical-align: middle; } .douglas-shell .admin-shell-workspace .badge { letter-spacing: .025em; } .douglas-shell .admin-shell-workspace .list-group-item, .douglas-shell .admin-shell-workspace .border.rounded-3, .douglas-shell .admin-shell-workspace .p-3.rounded-3.border { border-color: var(--admin-ux-line) !important; background-color: var(--admin-ux-softer); } .douglas-shell .admin-shell-workspace .dashboard-muted-label { letter-spacing: .065em; } .douglas-shell .admin-shell-workspace .progress { height: 0.55rem; border-radius: 999px; background-color: rgba(132, 151, 182, 0.15); } .douglas-shell .admin-shell-workspace .nav-pills { gap: 0.45rem; } .douglas-shell .admin-shell-workspace .nav-pills .nav-link { border-radius: 999px; } .douglas-shell .admin-shell-workspace .modal-content { border-radius: 22px; border-color: var(--admin-ux-line); } .douglas-shell .admin-shell-workspace .modal-header, .douglas-shell .admin-shell-workspace .modal-footer { border-color: var(--admin-ux-line); } .douglas-shell .admin-shell-workspace .pagination .page-link { border-radius: 999px; margin-inline: 0.12rem; } .douglas-shell .admin-shell-workspace .admin-layout-card > .card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem; } .douglas-shell .admin-shell-workspace .admin-layout-card > .card-header nav[role="tablist"] { display: flex; flex-wrap: wrap; gap: 0.5rem; } .douglas-shell .admin-shell-workspace .admin-tab-panel[hidden] { display: none !important; } .douglas-shell .admin-shell-workspace .admin-directory-filter-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.65rem; } .douglas-shell .admin-shell-workspace .admin-directory-filter-form > * { flex: 1 1 160px; } .douglas-shell .admin-shell-workspace .admin-directory-filter-form .admin-filter-actions { flex: 0 0 auto; } .douglas-shell .admin-shell-workspace .conversation-detail-section { border: 1px solid var(--ins-border-color); border-radius: var(--asth-radius-md); padding: .85rem; margin-bottom: 0.625rem; background: rgba(var(--ins-body-bg-rgb), .6); } .douglas-shell .admin-shell-workspace .conversation-detail-section:last-child { margin-bottom: 0; } /* ========================================================= Shared low-noise page tabs Accessible tab-shaped links for filter shortcuts across admin/client pages. ========================================================= */ .douglas-shell .asthron-tab { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.35rem; padding: .58rem .85rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--asth-text-soft); cursor: pointer; font-family: inherit; font-size: .84rem; font-weight: var(--asth-font-weight-strong); line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; } .douglas-shell .asthron-tab:hover, .douglas-shell .asthron-tab:focus { color: var(--asth-text); background: rgba(255, 255, 255, 0.05); border-color: rgba(132, 151, 182, 0.18); transform: translateY(-1px); } .douglas-shell .asthron-tab.active, .douglas-shell .asthron-tab[aria-selected="true"] { color: var(--asth-text); background: radial-gradient(circle at top left, rgba(79, 225, 255, 0.16), transparent 45%), linear-gradient(135deg, rgba(37, 99, 235, 0.26), rgba(79, 225, 255, 0.11)); border-color: rgba(79, 225, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .douglas-shell .asthron-compact-card { border-color: rgba(132, 151, 182, 0.14) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01)); } .douglas-shell [data-asthron-ajax-region] { transition: opacity .16s ease, filter .16s ease; } .douglas-shell [data-asthron-ajax-region].is-loading { opacity: .62; filter: saturate(.82); pointer-events: none; } html[data-bs-theme="light"] .douglas-shell .asthron-tab { color: var(--asth-text-soft); } html[data-bs-theme="light"] .douglas-shell .asthron-tab:hover, html[data-bs-theme="light"] .douglas-shell .asthron-tab:focus { color: var(--asth-text); background: rgba(15, 23, 42, 0.045); } html[data-bs-theme="light"] .douglas-shell .asthron-tab.active, html[data-bs-theme="light"] .douglas-shell .asthron-tab[aria-selected="true"] { color: var(--asth-text); background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 45%), linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.09)); border-color: rgba(37, 99, 235, 0.18); } @media (max-width: 575.98px) { .douglas-shell .asthron-tab { flex: 1 1 calc(50% - .5rem); } } html[data-bs-theme="light"] .douglas-shell .admin-shell-workspace { --admin-ux-line: rgba(15, 23, 42, 0.10); --admin-ux-softer: rgba(15, 23, 42, 0.018); } html[data-bs-theme="light"] .douglas-shell .admin-shell-workspace .dashboard-hero { background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 248, 252, 0.96) 100%); } html[data-bs-theme="light"] .douglas-shell .admin-shell-workspace .dashboard-hero .text-muted, html[data-bs-theme="light"] .douglas-shell .admin-shell-workspace .dashboard-hero h6.text-muted { color: rgba(71, 85, 105, 0.86) !important; } @media (max-width: 991.98px) { .douglas-shell .admin-shell-workspace .card-header.d-flex, .douglas-shell .admin-shell-workspace .card-body > .d-flex.justify-content-between { align-items: flex-start !important; } .douglas-shell .admin-shell-workspace .table-responsive { border-radius: 14px; } } @media (max-width: 575.98px) { .douglas-shell .admin-shell-workspace .dashboard-hero h2 { font-size: 1.45rem; } .douglas-shell .admin-shell-workspace .card-header, .douglas-shell .admin-shell-workspace .card-body, .douglas-shell .admin-shell-workspace .card-footer { padding-left: 0.95rem !important; padding-right: 0.95rem !important; } .douglas-shell .admin-shell-workspace .btn:not(.btn-link) { white-space: normal; } } /* ========================================================= Super Admin targeted refinement pass Pages: Website Settings, Admin Users, Product Catalog, Billing. ========================================================= */ .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] .row.g-4 { --ins-gutter-y: 1rem; } .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] .col-12 > .border.rounded-3.p-3 { border-left: 3px solid rgba(79, 225, 255, 0.36) !important; background: linear-gradient(90deg, rgba(79, 225, 255, 0.07), rgba(255, 255, 255, 0.018)); } .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] textarea.form-control { min-height: 5.2rem; } .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] textarea[name="business_description"], .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] textarea[name="services_text"], .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] textarea[name="pricing_text"], .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] textarea[name="faq_text"] { min-height: 6.4rem; } .douglas-shell .admin-shell-workspace #knowledge-sources, .douglas-shell .admin-shell-workspace #channel-connections { scroll-margin-top: 7rem; } .douglas-shell .admin-shell-workspace #knowledge-sources .card-body { display: flex; flex-direction: column; gap: 0.95rem; } .douglas-shell .admin-shell-workspace #knowledge-sources .card-body > .border { margin-bottom: 0 !important; } .douglas-shell .admin-shell-workspace #knowledge-sources form { gap: 0.7rem !important; } .douglas-shell .admin-shell-workspace #knowledge-sources .d-flex.flex-wrap.gap-2 { gap: 0.4rem !important; } .douglas-shell .admin-shell-workspace [data-tour="admin.users.table"] .table td:last-child, .douglas-shell .admin-shell-workspace [data-tour="admin.product.list"] .table td:last-child, .douglas-shell .admin-shell-workspace .product-toggle-form { white-space: nowrap; } .douglas-shell .admin-shell-workspace [data-tour="admin.users.table"] .table td:last-child .d-flex, .douglas-shell .admin-shell-workspace [data-tour="admin.product.list"] .table td:last-child .d-flex { gap: 0.38rem !important; } .douglas-shell .admin-shell-workspace [data-tour="admin.users.table"] .table .form-select-sm { min-height: 2.1rem; } .douglas-shell .admin-shell-workspace [data-tour="admin.users.table"] .collapse .border.rounded-3 { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); } .douglas-shell .admin-shell-workspace #btn-open-admin-invite { box-shadow: 0 12px 24px rgba(13, 110, 253, 0.16); } .douglas-shell .admin-shell-workspace .admin-product-card .card-body, .douglas-shell .admin-shell-workspace [data-tour="admin.product.list"] .card-body { padding: 1.15rem !important; } .douglas-shell .admin-shell-workspace .admin-product-card code, .douglas-shell .admin-shell-workspace [data-tour="admin.product.list"] code { padding: 0.12rem 0.34rem; border-radius: 999px; background: rgba(132, 151, 182, 0.12); color: inherit; } .douglas-shell .admin-shell-workspace .admin-product-card .table td, .douglas-shell .admin-shell-workspace [data-tour="admin.product.list"] .table td { max-width: 280px; } .douglas-shell .admin-shell-workspace .admin-product-card .table td:nth-child(6), .douglas-shell .admin-shell-workspace [data-tour="admin.product.list"] .table td:nth-child(6) { min-width: 220px; } .douglas-shell .admin-shell-workspace [data-tour="admin.billing.plan-card"] .card-body { padding: clamp(1.15rem, 2vw, 1.8rem) !important; } .douglas-shell .admin-shell-workspace [data-tour="admin.billing.plan-card"] .border.rounded-4, .douglas-shell .admin-shell-workspace [data-tour="admin.billing.usage-card"] .border.rounded-4, .douglas-shell .admin-shell-workspace [data-tour="admin.billing.controls"] .border.rounded-4 { border-color: rgba(79, 225, 255, 0.13) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.014)); } .douglas-shell .admin-shell-workspace [data-tour="admin.billing.plan-card"] hr { opacity: 0.12; } .douglas-shell .admin-shell-workspace [data-tour="admin.billing.plan-card"] .d-flex.flex-wrap.gap-2, .douglas-shell .admin-shell-workspace [data-tour="admin.billing.controls"] .d-flex.flex-wrap.gap-2 { gap: 0.45rem !important; } .douglas-shell .admin-shell-workspace [data-tour="admin.billing.usage-card"] .fs-3 { letter-spacing: -0.035em; } .douglas-shell .admin-shell-workspace [data-tour="admin.billing.controls"] .card-body > .border.rounded-4 { margin-bottom: 1rem !important; } html[data-bs-theme="light"] .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] .col-12 > .border.rounded-3.p-3 { background: linear-gradient(90deg, rgba(37, 99, 235, 0.06), rgba(15, 23, 42, 0.014)); } html[data-bs-theme="light"] .douglas-shell .admin-shell-workspace [data-tour="admin.billing.plan-card"] .border.rounded-4, html[data-bs-theme="light"] .douglas-shell .admin-shell-workspace [data-tour="admin.billing.usage-card"] .border.rounded-4, html[data-bs-theme="light"] .douglas-shell .admin-shell-workspace [data-tour="admin.billing.controls"] .border.rounded-4 { background: linear-gradient(180deg, rgba(15, 23, 42, 0.026), rgba(15, 23, 42, 0.01)); } @media (min-width: 1200px) { .douglas-shell .admin-shell-workspace #knowledge-sources { position: relative; } } @media (max-width: 1199.98px) { .douglas-shell .admin-shell-workspace [data-tour="admin.users.table"] .table td:last-child, .douglas-shell .admin-shell-workspace [data-tour="admin.product.list"] .table td:last-child { min-width: 260px; } .douglas-shell .admin-shell-workspace [data-tour="admin.billing.usage-card"] .card-body > .d-flex { flex-direction: column; } } @media (max-width: 767.98px) { .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] textarea.form-control, .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] textarea[name="business_description"], .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] textarea[name="services_text"], .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] textarea[name="pricing_text"], .douglas-shell .admin-shell-workspace form[action*="/admin/websites/website-edit.php"] textarea[name="faq_text"] { min-height: 7rem; } .douglas-shell .admin-shell-workspace [data-tour="admin.billing.plan-card"] .d-flex.flex-wrap.gap-2 > *, .douglas-shell .admin-shell-workspace [data-tour="admin.billing.controls"] .d-flex.flex-wrap.gap-2 > * { flex: 1 1 100%; } .douglas-shell .admin-shell-workspace [data-tour="admin.billing.plan-card"] .d-flex.flex-wrap.gap-2 .btn, .douglas-shell .admin-shell-workspace [data-tour="admin.billing.controls"] .d-flex.flex-wrap.gap-2 .btn { width: 100%; } } /* ========================================================= Super Admin final role-wide polish Navigation, empty states, operational tables, timelines. ========================================================= */ .douglas-shell .side-nav-title { margin-top: 0.85rem; margin-bottom: 0.35rem; color: rgba(148, 163, 184, 0.88); font-size: 0.66rem; letter-spacing: .095em; } .douglas-shell .side-nav-item + .side-nav-title { padding-top: 0.35rem; border-top: 1px solid rgba(132, 151, 182, 0.09); } .douglas-shell .side-nav-link { border-radius: 14px; } .douglas-shell .side-nav-link .menu-text { font-weight: 560; } .douglas-shell .side-nav-link.active { box-shadow: inset 3px 0 0 rgba(79, 225, 255, 0.7); } .douglas-shell .admin-shell-workspace .text-center.py-4, .douglas-shell .admin-shell-workspace .text-center.py-5, .douglas-shell .admin-shell-workspace td.text-center.py-4, .douglas-shell .admin-shell-workspace td.text-center.py-5 { border-radius: 18px; } .douglas-shell .admin-shell-workspace .card-body > .text-center.py-4, .douglas-shell .admin-shell-workspace .card-body > .text-center.py-5, .douglas-shell .admin-shell-workspace .card-body > .border.rounded-3.text-muted, .douglas-shell .admin-shell-workspace .card-body > .border.rounded-3.p-3.text-muted { background: radial-gradient(circle at top, rgba(79, 225, 255, 0.055), transparent 52%), rgba(255, 255, 255, 0.015); border: 1px dashed rgba(132, 151, 182, 0.18) !important; } .douglas-shell .admin-shell-workspace .table td .btn, .douglas-shell .admin-shell-workspace .table td form .btn { box-shadow: none; } .douglas-shell .admin-shell-workspace .table td .btn-outline-danger, .douglas-shell .admin-shell-workspace .table td .btn-outline-warning, .douglas-shell .admin-shell-workspace form .btn-outline-danger, .douglas-shell .admin-shell-workspace form .btn-outline-warning { border-style: dashed; } .douglas-shell .admin-shell-workspace .lead-directory-card .card-header, .douglas-shell .admin-shell-workspace .client-directory-card .card-header { gap: 1rem !important; } .douglas-shell .admin-shell-workspace .lead-table td:nth-child(8) { line-height: 1.45; } .douglas-shell .admin-shell-workspace .lead-table td:last-child { min-width: 300px; } .douglas-shell .admin-shell-workspace .conversation-message-card { border-radius: 18px; } .douglas-shell .admin-shell-workspace .admin-conversation-chatbox-scroll { max-height: clamp(440px, 64vh, 720px); overflow-y: auto; overscroll-behavior: contain; padding: 0.15rem 0.45rem 0.15rem 0; scrollbar-gutter: stable; } .douglas-shell .admin-shell-workspace .admin-conversation-chatbox-scroll::-webkit-scrollbar { width: 8px; } .douglas-shell .admin-shell-workspace .admin-conversation-chatbox-scroll::-webkit-scrollbar-track { background: rgba(132, 151, 182, 0.08); border-radius: 999px; } .douglas-shell .admin-shell-workspace .admin-conversation-chatbox-scroll::-webkit-scrollbar-thumb { background: rgba(132, 151, 182, 0.34); border-radius: 999px; } .douglas-shell .admin-shell-workspace .conversation-message-card .card-body { padding: 0.95rem 1.05rem !important; } .douglas-shell .admin-shell-workspace .conversation-message-card .lh-lg { font-size: 15px !important; line-height: 1.62 !important; } .douglas-shell .admin-shell-workspace .conversation-message-card[style*="92%"] { max-width: min(92%, 760px) !important; } .douglas-shell .admin-shell-workspace .conversation-message-card[style*="78%"] { max-width: min(78%, 820px) !important; } .douglas-shell .admin-shell-workspace [data-tour="admin.project-costs.hero"] form { padding: 1rem; border: 1px solid rgba(132, 151, 182, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.025); } .douglas-shell .admin-shell-workspace [data-tour="admin.project-costs.hero"] .form-label { color: var(--ins-secondary-color); } .douglas-shell .admin-shell-workspace [data-tour="admin.project-costs.hero"] + .row .dashboard-metric-card .card-body, .douglas-shell .admin-shell-workspace .dashboard-section-card .dashboard-metric-card .card-body { min-height: 126px; } .douglas-shell .admin-shell-workspace .dashboard-section-card .table td { max-width: 340px; } .douglas-shell .admin-shell-workspace .dashboard-section-card .table td:first-child { min-width: 220px; } .douglas-shell .admin-shell-workspace .dashboard-section-card .table td:last-child { white-space: nowrap; } html[data-bs-theme="light"] .douglas-shell .side-nav-link.active { box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.72); } html[data-bs-theme="light"] .douglas-shell .admin-shell-workspace .card-body > .text-center.py-4, html[data-bs-theme="light"] .douglas-shell .admin-shell-workspace .card-body > .text-center.py-5, html[data-bs-theme="light"] .douglas-shell .admin-shell-workspace .card-body > .border.rounded-3.text-muted, html[data-bs-theme="light"] .douglas-shell .admin-shell-workspace .card-body > .border.rounded-3.p-3.text-muted { background: radial-gradient(circle at top, rgba(37, 99, 235, 0.055), transparent 52%), rgba(15, 23, 42, 0.012); } @media (max-width: 1199.98px) { .douglas-shell .admin-shell-workspace .conversation-message-card[style*="78%"], .douglas-shell .admin-shell-workspace .conversation-message-card[style*="92%"] { max-width: 100% !important; } .douglas-shell .admin-shell-workspace .lead-table td:last-child, .douglas-shell .admin-shell-workspace .dashboard-section-card .table td:last-child { min-width: 240px; } } @media (max-width: 767.98px) { .douglas-shell .admin-shell-workspace [data-tour="admin.project-costs.hero"] form { padding: 0.85rem; } } /* ========================================================= Admin role portfolio polish Keeps normal Admin focused on owned clients and daily actions. ========================================================= */ .douglas-shell .admin-role-agency .dashboard-hero { overflow: hidden; border-color: rgba(79, 225, 255, 0.16) !important; background: radial-gradient(circle at top right, rgba(79, 225, 255, 0.09), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)); } .douglas-shell .admin-role-agency .dashboard-hero .card-body { padding-top: clamp(1.25rem, 2vw, 2rem) !important; padding-bottom: clamp(1.25rem, 2vw, 2rem) !important; } .douglas-shell .admin-role-agency .dashboard-hero h2 { letter-spacing: -0.025em; } .douglas-shell .admin-role-agency .hero-stat, .douglas-shell .admin-role-agency .summary-tile { border: 1px solid rgba(132, 151, 182, 0.13); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)); } .douglas-shell .admin-role-agency .dashboard-metric-card, .douglas-shell .admin-role-agency .dashboard-section-card, .douglas-shell .admin-role-agency .card.border-2.shadow-sm { border-color: rgba(132, 151, 182, 0.13) !important; } .douglas-shell .admin-role-agency .dashboard-section-card > .card-header, .douglas-shell .admin-role-agency .card.border-2.shadow-sm > .card-header { padding-top: 1rem; padding-bottom: 0.9rem; border-bottom-style: dashed; } .douglas-shell .admin-role-agency .dashboard-section-card .card-title, .douglas-shell .admin-role-agency .card.border-2.shadow-sm .card-title { letter-spacing: -0.012em; } .douglas-shell .admin-role-agency .table { --ins-table-hover-bg: rgba(79, 225, 255, 0.045); font-size: 0.925rem; } .douglas-shell .admin-role-agency .table thead th { color: var(--ins-secondary-color); font-size: 0.72rem; letter-spacing: .065em; text-transform: uppercase; } .douglas-shell .admin-role-agency .table tbody td { line-height: 1.45; } .douglas-shell .admin-role-agency .table td:last-child .btn, .douglas-shell .admin-role-agency .table td:last-child form .btn { border-radius: 999px; } .douglas-shell .admin-role-agency .client-table td:last-child, .douglas-shell .admin-role-agency [data-tour="admin.websites.list"] table td:last-child, .douglas-shell .admin-role-agency [data-tour="admin.trials.table"] table td:last-child { min-width: 240px; } .douglas-shell .admin-role-agency [data-tour="admin.allocation.client-picker"], .douglas-shell .admin-role-agency [data-tour="admin.usage.hero"] form, .douglas-shell .admin-role-agency [data-tour="admin.channels.hero"] + .row .card-body > form, .douglas-shell .admin-role-agency .admin-trial-action-form { padding: 1rem; border: 1px solid rgba(132, 151, 182, 0.13); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)); } .douglas-shell .admin-role-agency [data-tour="admin.allocation.form"], .douglas-shell .admin-role-agency [data-tour="admin.billing.controls"], .douglas-shell .admin-role-agency [data-tour="admin.usage.metrics"], .douglas-shell .admin-role-agency .admin-trial-action-form { box-shadow: inset 3px 0 0 rgba(79, 225, 255, 0.22); } .douglas-shell .admin-role-agency form[action*="/admin/websites/website-edit.php"] .card-header h4::before, .douglas-shell .admin-role-agency [data-tour="admin.allocation.form"] .card-title::before, .douglas-shell .admin-role-agency [data-tour="admin.trials.hero"] h2::before, .douglas-shell .admin-role-agency [data-tour="admin.trials.hero"] h3::before { content: "Guide"; display: inline-flex; align-items: center; margin-right: 0.55rem; padding: 0.18rem 0.48rem; border-radius: 999px; color: #7dd3fc; background: rgba(79, 225, 255, 0.1); font-size: 0.65rem; font-weight: var(--asth-font-weight-label); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; } .douglas-shell .admin-role-agency .btn-outline-danger, .douglas-shell .admin-role-agency .btn-outline-warning { background: rgba(255, 255, 255, 0.012); } .douglas-shell .admin-role-agency .alert { border-radius: 16px; } .douglas-shell .admin-role-agency .form-label { color: var(--ins-secondary-color); font-size: 0.76rem; letter-spacing: .045em; text-transform: uppercase; } .douglas-shell .admin-role-agency .form-control, .douglas-shell .admin-role-agency .form-select { border-radius: 13px; } html[data-bs-theme="light"] .douglas-shell .admin-role-agency .dashboard-hero { border-color: rgba(37, 99, 235, 0.14) !important; background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.075), transparent 34%), linear-gradient(135deg, rgba(15, 23, 42, 0.025), rgba(15, 23, 42, 0.008)); } html[data-bs-theme="light"] .douglas-shell .admin-role-agency .hero-stat, html[data-bs-theme="light"] .douglas-shell .admin-role-agency .summary-tile, html[data-bs-theme="light"] .douglas-shell .admin-role-agency [data-tour="admin.allocation.client-picker"], html[data-bs-theme="light"] .douglas-shell .admin-role-agency [data-tour="admin.usage.hero"] form, html[data-bs-theme="light"] .douglas-shell .admin-role-agency [data-tour="admin.channels.hero"] + .row .card-body > form, html[data-bs-theme="light"] .douglas-shell .admin-role-agency .admin-trial-action-form { background: linear-gradient(180deg, rgba(15, 23, 42, 0.024), rgba(15, 23, 42, 0.006)); } html[data-bs-theme="light"] .douglas-shell .admin-role-agency [data-tour="admin.allocation.form"], html[data-bs-theme="light"] .douglas-shell .admin-role-agency [data-tour="admin.billing.controls"], html[data-bs-theme="light"] .douglas-shell .admin-role-agency [data-tour="admin.usage.metrics"], html[data-bs-theme="light"] .douglas-shell .admin-role-agency .admin-trial-action-form { box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.2); } html[data-bs-theme="light"] .douglas-shell .admin-role-agency form[action*="/admin/websites/website-edit.php"] .card-header h4::before, html[data-bs-theme="light"] .douglas-shell .admin-role-agency [data-tour="admin.allocation.form"] .card-title::before, html[data-bs-theme="light"] .douglas-shell .admin-role-agency [data-tour="admin.trials.hero"] h2::before, html[data-bs-theme="light"] .douglas-shell .admin-role-agency [data-tour="admin.trials.hero"] h3::before { color: #1d4ed8; background: rgba(37, 99, 235, 0.08); } @media (max-width: 991.98px) { .douglas-shell .admin-role-agency .dashboard-hero .row.g-3, .douglas-shell .admin-role-agency .dashboard-hero [style*="max-width"] { max-width: none !important; } } @media (max-width: 767.98px) { .douglas-shell .admin-role-agency .table { font-size: 0.875rem; } .douglas-shell .admin-role-agency [data-tour="admin.allocation.client-picker"], .douglas-shell .admin-role-agency [data-tour="admin.usage.hero"] form { padding: 0.85rem; } } .douglas-shell .dashboard-hero-copy { max-width: min(100%, 980px); } .douglas-shell .dashboard-hero-copy > :last-child { margin-bottom: 0 !important; } /* ========================================================= Client Owner workspace polish Reduces visual noise without changing page behavior. ========================================================= */ .douglas-shell .client-role-owner .dashboard-hero { overflow: hidden; border-color: rgba(58, 199, 255, 0.16) !important; background: radial-gradient(circle at top right, rgba(58, 199, 255, 0.09), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)); } .douglas-shell .client-role-owner .dashboard-hero h2 { letter-spacing: -0.025em; } .douglas-shell .client-role-owner .dashboard-section-card, .douglas-shell .client-role-owner .card.border-2.shadow-sm { border-color: rgba(132, 151, 182, 0.13) !important; } .douglas-shell .client-role-owner .dashboard-section-card > .card-header, .douglas-shell .client-role-owner .card.border-2.shadow-sm > .card-header { padding-top: 1rem; padding-bottom: 0.9rem; border-bottom-style: dashed; } .douglas-shell .client-role-owner .dashboard-section-card .card-title, .douglas-shell .client-role-owner .card.border-2.shadow-sm .card-title { letter-spacing: -0.012em; } .douglas-shell .client-role-owner .hero-stat, .douglas-shell .client-role-owner .summary-tile, .douglas-shell .client-role-owner .dashboard-section-card .border.rounded-3 { border-color: rgba(132, 151, 182, 0.13) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)); } .douglas-shell .client-role-owner .table { --ins-table-hover-bg: rgba(58, 199, 255, 0.045); font-size: 0.925rem; } .douglas-shell .client-role-owner .table thead th { color: var(--ins-secondary-color); font-size: 0.72rem; letter-spacing: .065em; text-transform: uppercase; } .douglas-shell .client-role-owner .table tbody td { line-height: 1.45; } .douglas-shell .client-role-owner .table td:last-child .btn, .douglas-shell .client-role-owner .table td:last-child form .btn { border-radius: 999px; } .douglas-shell .client-role-owner .lead-filter-bar, .douglas-shell .client-role-owner [data-tour="client.conversations.filters"] form, .douglas-shell .client-role-owner [data-tour="client.channels.setup"] form, .douglas-shell .client-role-owner [data-tour="client.bookings.filters"] form { padding: 1rem; border: 1px solid rgba(132, 151, 182, 0.13); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)); } .douglas-shell .client-role-owner .form-label { color: var(--ins-secondary-color); font-size: 0.76rem; letter-spacing: .045em; text-transform: uppercase; } .douglas-shell .client-role-owner .form-control, .douglas-shell .client-role-owner .form-select { border-radius: 13px; } .douglas-shell .client-role-owner .conversation-message-card .lh-lg { font-size: 15px !important; line-height: 1.62 !important; } .douglas-shell .client-role-owner .conversation-message-card[style*="92%"] { max-width: min(92%, 760px) !important; } .douglas-shell .client-role-owner .conversation-message-card[style*="78%"] { max-width: min(78%, 820px) !important; } .douglas-shell .website-summary-card { overflow: hidden; } .douglas-shell .website-summary-stack { display: grid; gap: .9rem; } .douglas-shell .website-summary-identity { position: relative; overflow: hidden; padding: 1rem; border: 1px solid rgba(79, 225, 255, .16); border-radius: 18px; background: radial-gradient(circle at top right, rgba(79, 225, 255, .13), transparent 42%), linear-gradient(135deg, rgba(37, 99, 235, .11), rgba(255, 255, 255, .018)); } .douglas-shell .website-summary-identity h5 { color: var(--ins-body-color); font-size: 1rem; letter-spacing: -.02em; } .douglas-shell .website-summary-domain { color: var(--ins-secondary-color); font-size: .8rem; line-height: 1.35; } .douglas-shell .website-summary-identity .badge { padding: .34rem .62rem !important; font-size: .7rem !important; line-height: 1; } .douglas-shell .website-summary-list { overflow: hidden; border: 1px solid rgba(132, 151, 182, .13); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); } .douglas-shell .website-summary-row { display: grid; grid-template-columns: minmax(0, 5.7rem) minmax(0, 1fr); gap: .75rem; align-items: start; padding: .85rem .95rem; border-bottom: 1px solid rgba(132, 151, 182, .11); } .douglas-shell .website-summary-row:last-child { border-bottom: 0; } .douglas-shell .website-summary-row > span { color: var(--ins-secondary-color); font-size: .66rem; font-weight: var(--asth-font-weight-label); letter-spacing: .06em; line-height: 1.15; text-transform: uppercase; } .douglas-shell .website-summary-row > strong { min-width: 0; color: var(--ins-body-color); font-size: .86rem; font-weight: var(--asth-font-weight-title); line-height: 1.35; text-align: right; overflow-wrap: anywhere; } .douglas-shell .website-summary-row-block { grid-template-columns: 1fr; gap: .4rem; } .douglas-shell .website-summary-row-block > strong { text-align: left; } .douglas-shell .website-summary-row code { display: block; width: 100%; padding: .55rem .65rem; border: 1px solid rgba(132, 151, 182, .14); border-radius: 12px; background: rgba(0, 0, 0, .12); color: var(--ins-body-color); font-size: .74rem; line-height: 1.35; white-space: normal; word-break: break-all; } .douglas-shell #website-intelligence-panel .tab-pane:focus { outline: none; } .douglas-shell #conversion-snapshot > .row.g-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .85rem; margin: 0; } .douglas-shell #conversion-snapshot > .row.g-3 > [class*="col-"] { width: auto; max-width: 100%; margin: 0; padding: 0; } .douglas-shell #conversion-snapshot .summary-tile { display: flex; min-height: 7.25rem; flex-direction: column; justify-content: space-between; gap: .45rem; padding: .95rem !important; overflow: hidden; } .douglas-shell #conversion-snapshot .summary-tile .dashboard-muted-label { min-height: 1.45rem; font-size: .66rem; line-height: 1.12; letter-spacing: .065em; text-transform: uppercase; } .douglas-shell #conversion-snapshot .summary-tile h4 { margin-bottom: 0 !important; font-size: clamp(1.35rem, 1.45vw, 1.75rem); line-height: 1; } .douglas-shell #conversion-snapshot .summary-tile .text-muted, .douglas-shell #conversion-snapshot .summary-tile .badge { font-size: .74rem; line-height: 1.2; } .douglas-shell #conversion-snapshot .summary-tile .badge { width: fit-content; max-width: 100%; padding: .32rem .55rem !important; white-space: normal; text-align: left; } .douglas-shell .client-role-owner .client-form-step { box-shadow: inset 3px 0 0 rgba(var(--ins-primary-rgb), 0.45); } html[data-bs-theme="light"] .douglas-shell .client-role-owner .dashboard-hero { border-color: rgba(37, 99, 235, 0.14) !important; background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.075), transparent 34%), linear-gradient(135deg, rgba(15, 23, 42, 0.025), rgba(15, 23, 42, 0.008)); } html[data-bs-theme="light"] .douglas-shell .client-role-owner .hero-stat, html[data-bs-theme="light"] .douglas-shell .client-role-owner .summary-tile, html[data-bs-theme="light"] .douglas-shell .client-role-owner .dashboard-section-card .border.rounded-3, html[data-bs-theme="light"] .douglas-shell .client-role-owner .lead-filter-bar, html[data-bs-theme="light"] .douglas-shell .client-role-owner [data-tour="client.conversations.filters"] form, html[data-bs-theme="light"] .douglas-shell .client-role-owner [data-tour="client.channels.setup"] form, html[data-bs-theme="light"] .douglas-shell .client-role-owner [data-tour="client.bookings.filters"] form { background: linear-gradient(180deg, rgba(15, 23, 42, 0.024), rgba(15, 23, 42, 0.006)); } @media (max-width: 1199.98px) { .douglas-shell .client-role-owner .conversation-message-card[style*="78%"], .douglas-shell .client-role-owner .conversation-message-card[style*="92%"] { max-width: 100% !important; } } @media (max-width: 767.98px) { .douglas-shell .client-role-owner .table { font-size: 0.875rem; } .douglas-shell .client-role-owner .lead-filter-bar, .douglas-shell .client-role-owner [data-tour="client.conversations.filters"] form, .douglas-shell .client-role-owner [data-tour="client.channels.setup"] form { padding: 0.85rem; } } /* ========================================================= Client Staff workspace polish Keeps staff pages task-focused and visually quieter. ========================================================= */ .douglas-shell .client-role-staff .dashboard-hero { overflow: hidden; border-color: rgba(45, 212, 191, 0.16) !important; background: radial-gradient(circle at top right, rgba(45, 212, 191, 0.09), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); } .douglas-shell .client-role-staff .dashboard-hero h2 { letter-spacing: -0.025em; } .douglas-shell .client-role-staff .dashboard-section-card, .douglas-shell .client-role-staff .card.border-2.shadow-sm { border-color: rgba(132, 151, 182, 0.13) !important; } .douglas-shell .client-role-staff .dashboard-section-card > .card-header, .douglas-shell .client-role-staff .card.border-2.shadow-sm > .card-header { padding-top: 0.95rem; padding-bottom: 0.85rem; border-bottom-style: dashed; } .douglas-shell .client-role-staff .dashboard-section-card .card-title, .douglas-shell .client-role-staff .card.border-2.shadow-sm .card-title { letter-spacing: -0.012em; } .douglas-shell .client-role-staff .hero-stat, .douglas-shell .client-role-staff .summary-tile, .douglas-shell .client-role-staff .dashboard-section-card .border.rounded-3, .douglas-shell .client-role-staff .card.border-2.shadow-sm .border.rounded-3 { border-color: rgba(132, 151, 182, 0.13) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); } .douglas-shell .client-role-staff .table { --ins-table-hover-bg: rgba(45, 212, 191, 0.045); font-size: 0.915rem; } .douglas-shell .client-role-staff .table thead th { color: var(--ins-secondary-color); font-size: 0.72rem; letter-spacing: .065em; text-transform: uppercase; } .douglas-shell .client-role-staff .table tbody td { line-height: 1.45; } .douglas-shell .client-role-staff .lead-filter-bar, .douglas-shell .client-role-staff [data-tour="client.conversations.filters"] form, .douglas-shell .client-role-staff [data-tour="client.channels.setup"] form, .douglas-shell .client-role-staff [data-tour="client.bookings.filters"] form, .douglas-shell .client-role-staff #booking-filters form, .douglas-shell .client-role-staff #calendar-range form, .douglas-shell .client-role-staff #usage-range-filter form { padding: 0.95rem; border: 1px solid rgba(132, 151, 182, 0.13); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); } .douglas-shell .client-role-staff .form-label { color: var(--ins-secondary-color); font-size: 0.75rem; letter-spacing: .045em; text-transform: uppercase; } .douglas-shell .client-role-staff .form-control, .douglas-shell .client-role-staff .form-select { border-radius: 13px; } .douglas-shell .client-role-staff .conversation-message-card .lh-lg { font-size: 15px !important; line-height: 1.62 !important; } .douglas-shell .client-role-staff .conversation-message-card[style*="92%"] { max-width: min(92%, 760px) !important; } .douglas-shell .client-role-staff .conversation-message-card[style*="78%"] { max-width: min(78%, 820px) !important; } .douglas-shell .client-role-staff .dashboard-section-card[id], .douglas-shell .client-role-staff .card[id], .douglas-shell .client-role-staff #website-list, .douglas-shell .client-role-staff #website-portfolio, .douglas-shell .client-role-staff #calendar-board, .douglas-shell .client-role-staff #lead-opportunities, .douglas-shell .client-role-staff #booking-requests { scroll-margin-top: 118px; } html[data-bs-theme="light"] .douglas-shell .client-role-staff .dashboard-hero { border-color: rgba(13, 148, 136, 0.16) !important; background: radial-gradient(circle at top right, rgba(13, 148, 136, 0.07), transparent 34%), linear-gradient(135deg, rgba(15, 23, 42, 0.024), rgba(15, 23, 42, 0.006)); } html[data-bs-theme="light"] .douglas-shell .client-role-staff .hero-stat, html[data-bs-theme="light"] .douglas-shell .client-role-staff .summary-tile, html[data-bs-theme="light"] .douglas-shell .client-role-staff .dashboard-section-card .border.rounded-3, html[data-bs-theme="light"] .douglas-shell .client-role-staff .card.border-2.shadow-sm .border.rounded-3, html[data-bs-theme="light"] .douglas-shell .client-role-staff .lead-filter-bar, html[data-bs-theme="light"] .douglas-shell .client-role-staff [data-tour="client.conversations.filters"] form, html[data-bs-theme="light"] .douglas-shell .client-role-staff [data-tour="client.channels.setup"] form, html[data-bs-theme="light"] .douglas-shell .client-role-staff [data-tour="client.bookings.filters"] form, html[data-bs-theme="light"] .douglas-shell .client-role-staff #booking-filters form, html[data-bs-theme="light"] .douglas-shell .client-role-staff #calendar-range form, html[data-bs-theme="light"] .douglas-shell .client-role-staff #usage-range-filter form { background: linear-gradient(180deg, rgba(15, 23, 42, 0.024), rgba(15, 23, 42, 0.006)); } @media (max-width: 1199.98px) { .douglas-shell .client-role-staff .conversation-message-card[style*="78%"], .douglas-shell .client-role-staff .conversation-message-card[style*="92%"] { max-width: 100% !important; } } @media (max-width: 767.98px) { .douglas-shell .client-role-staff .table { font-size: 0.875rem; } .douglas-shell .client-role-staff .lead-filter-bar, .douglas-shell .client-role-staff [data-tour="client.conversations.filters"] form, .douglas-shell .client-role-staff [data-tour="client.channels.setup"] form, .douglas-shell .client-role-staff #booking-filters form, .douglas-shell .client-role-staff #calendar-range form, .douglas-shell .client-role-staff #usage-range-filter form { padding: 0.85rem; } .douglas-shell .client-role-staff .dashboard-section-card[id], .douglas-shell .client-role-staff .card[id], .douglas-shell .client-role-staff #website-list, .douglas-shell .client-role-staff #website-portfolio, .douglas-shell .client-role-staff #calendar-board, .douglas-shell .client-role-staff #lead-opportunities, .douglas-shell .client-role-staff #booking-requests { scroll-margin-top: 18px; } } /* Alert system */ .alert { border-width: 1px !important; border-radius: 16px; box-shadow: none !important; padding: 0.85rem 1rem; line-height: 1.5; } .alert.mb-0 { margin-bottom: 0 !important; } .alert-info { --ins-alert-color: #67e8f9; --ins-alert-bg: var(--asth-alert-info-bg); --ins-alert-border-color: rgba(34, 211, 238, 0.22); } .alert-success { --ins-alert-color: #86efac; --ins-alert-bg: var(--asth-alert-success-bg); --ins-alert-border-color: rgba(74, 222, 128, 0.24); } .alert-warning { --ins-alert-color: #fde68a; --ins-alert-bg: var(--asth-alert-warning-bg); --ins-alert-border-color: rgba(251, 191, 36, 0.25); } .alert-danger { --ins-alert-color: #fca5a5; --ins-alert-bg: var(--asth-alert-danger-bg); --ins-alert-border-color: rgba(248, 113, 113, 0.25); } .alert-secondary, .alert-light { --ins-alert-color: var(--ins-secondary-color); --ins-alert-bg: rgba(148, 163, 184, 0.08); --ins-alert-border-color: rgba(148, 163, 184, 0.18); } .asthron-note { border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 16px; padding: 0.85rem 1rem; background: rgba(148, 163, 184, 0.06); color: var(--ins-body-color); line-height: 1.5; } .asthron-note-info { border-color: rgba(34, 211, 238, 0.2); background: rgba(8, 145, 178, 0.1); } .asthron-note-success { border-color: rgba(74, 222, 128, 0.2); background: rgba(22, 163, 74, 0.1); } .asthron-note-warning { border-color: rgba(251, 191, 36, 0.22); background: rgba(217, 119, 6, 0.11); } .asthron-note-danger { border-color: rgba(248, 113, 113, 0.22); background: rgba(220, 38, 38, 0.11); } .asthron-note-muted, .asthron-note-light { color: var(--ins-secondary-color); border-color: rgba(148, 163, 184, 0.14); background: rgba(148, 163, 184, 0.055); } .asthron-empty-state { border: 1px dashed rgba(148, 163, 184, 0.22); border-radius: 18px; padding: 1.1rem 1rem; background: rgba(148, 163, 184, 0.045); color: var(--ins-secondary-color); text-align: center; line-height: 1.5; } .min-w-0 { min-width: 0 !important; } .douglas-shell .website-edit-section-tabs { width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.34) transparent; scroll-margin-top: 1rem; } .douglas-shell .website-edit-section-tabs::-webkit-scrollbar { width: 4px; height: 4px; } .douglas-shell .website-edit-section-tabs::-webkit-scrollbar-button { width: 0; height: 0; display: none; } .douglas-shell .website-edit-section-tabs::-webkit-scrollbar-track { background: transparent; margin-inline: .45rem; } .douglas-shell .website-edit-section-tabs::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.28); border-radius: 999px; } .douglas-shell .website-edit-section-tabs::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.48); } .douglas-shell .website-edit-section-tabs .asthron-tab { flex: 0 0 auto; } .douglas-shell [data-website-edit-panel][hidden] { display: none !important; } .douglas-shell .website-edit-tab-layout.website-edit-content-only > .website-edit-side-column { flex: 0 0 100%; max-width: 100%; } .douglas-shell .website-edit-tab-layout.website-edit-content-only > .website-edit-side-column > [data-website-edit-panel]:not([hidden]) { margin-top: 0 !important; } .douglas-shell #website-profile-settings, .douglas-shell #knowledge-sources, .douglas-shell #media-library { scroll-margin-top: calc(var(--asth-topbar-height, 76px) + 5.25rem); } .douglas-shell .website-edit-action-menu { min-width: 220px; padding: .45rem !important; } .douglas-shell .asthron-action-menu { min-width: 240px; } .douglas-shell .asthron-action-menu-wide { min-width: 270px; } .douglas-shell .website-edit-action-menu form { margin: 0; } .douglas-shell .website-edit-action-menu .dropdown-item { display: flex; width: 100%; align-items: center; justify-content: flex-start; border-radius: 10px; text-align: left; } .douglas-shell .website-edit-action-menu .dropdown-divider { margin: .35rem 0; } .douglas-shell .asthron-media-asset-preview { width: 132px; height: 132px; max-width: 100%; } .douglas-shell .asthron-media-asset-preview-document { background: rgba(220, 53, 69, .08); border-color: rgba(220, 53, 69, .2) !important; } .douglas-shell .asthron-media-asset-preview-image { display: block; } .douglas-shell .conversation-media-preview { display: block; width: 100%; max-width: 100%; } .douglas-shell .conversation-media-preview-document { background: rgba(220, 53, 69, .08); border-color: rgba(220, 53, 69, .2) !important; } .douglas-shell .conversation-media-preview-image { max-height: 320px; object-fit: contain; background: rgba(0, 0, 0, .03); } .douglas-shell .website-list-action-menu { min-width: 240px; padding: .45rem !important; } .douglas-shell .website-list-action-menu .dropdown-item { display: flex; align-items: center; gap: .55rem; min-height: 38px; padding: .55rem .75rem; border-radius: 10px; font-weight: 600; line-height: 1.2; } .douglas-shell .website-list-action-menu .dropdown-item:hover, .douglas-shell .website-list-action-menu .dropdown-item:focus { transform: translateX(2px); } .douglas-shell .website-list-action-menu .dropdown-divider { margin: .35rem .15rem; } @media (max-width: 767.98px) { .douglas-shell .website-edit-section-tabs { position: static; width: 100%; border-radius: 20px; } .douglas-shell .website-edit-section-tabs .asthron-tab { flex: 1 1 100%; } } html[data-bs-theme="light"] .alert-info { --ins-alert-color: #155e75; --ins-alert-bg: var(--asth-alert-info-bg); --ins-alert-border-color: rgba(14, 165, 233, 0.2); } html[data-bs-theme="light"] .alert-success { --ins-alert-color: #166534; --ins-alert-bg: var(--asth-alert-success-bg); --ins-alert-border-color: rgba(34, 197, 94, 0.2); } html[data-bs-theme="light"] .alert-warning { --ins-alert-color: #92400e; --ins-alert-bg: var(--asth-alert-warning-bg); --ins-alert-border-color: rgba(245, 158, 11, 0.22); } html[data-bs-theme="light"] .alert-danger { --ins-alert-color: #991b1b; --ins-alert-bg: var(--asth-alert-danger-bg); --ins-alert-border-color: rgba(239, 68, 68, 0.2); } html[data-bs-theme="light"] .asthron-note-info { border-color: rgba(14, 165, 233, 0.18); background: rgba(14, 165, 233, 0.075); } html[data-bs-theme="light"] .asthron-note-success { border-color: rgba(34, 197, 94, 0.18); background: rgba(34, 197, 94, 0.075); } html[data-bs-theme="light"] .asthron-note-warning { border-color: rgba(245, 158, 11, 0.2); background: rgba(245, 158, 11, 0.08); } html[data-bs-theme="light"] .asthron-note, html[data-bs-theme="light"] .asthron-note-muted, html[data-bs-theme="light"] .asthron-note-light, html[data-bs-theme="light"] .asthron-empty-state { border-color: rgba(100, 116, 139, 0.16); background: rgba(248, 250, 252, 0.86); } html[data-bs-theme="light"] .asthron-note-info { border-color: rgba(14, 165, 233, 0.18); background: rgba(14, 165, 233, 0.075); } html[data-bs-theme="light"] .asthron-note-success { border-color: rgba(34, 197, 94, 0.18); background: rgba(34, 197, 94, 0.075); } html[data-bs-theme="light"] .asthron-note-warning { border-color: rgba(245, 158, 11, 0.2); background: rgba(245, 158, 11, 0.08); } html[data-bs-theme="light"] .asthron-note-danger { border-color: rgba(239, 68, 68, 0.2); background: rgba(239, 68, 68, 0.08); } .swal2-popup.asthron-swal-popup { border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 22px; background: var(--ins-body-bg); color: var(--ins-body-color); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); } .swal2-title.asthron-swal-title { color: var(--ins-body-color); font-size: 1.12rem; letter-spacing: -0.02em; } .swal2-html-container.asthron-swal-body { color: var(--asth-text); font-size: 0.94rem; } .swal2-popup .text-muted, .douglas-shell .modal .text-muted { color: var(--asth-text-soft) !important; } .swal2-toast.asthron-swal-popup { width: min(380px, calc(100vw - 1.5rem)); padding: 0.85rem 1rem; border-radius: 16px; } .swal2-actions .btn { margin: 0 0.25rem; } .asthron-toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1085; display: flex; flex-direction: column; gap: 0.65rem; width: min(380px, calc(100vw - 2rem)); pointer-events: none; } .asthron-toast { padding: 0.85rem 1rem; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 16px; background: var(--ins-body-bg); color: var(--ins-body-color); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22); opacity: 0; transform: translateY(-8px); transition: opacity 160ms ease, transform 160ms ease; pointer-events: auto; cursor: pointer; } .asthron-toast.is-visible { opacity: 1; transform: translateY(0); } .asthron-toast-title { font-weight: var(--asth-font-weight-title); } .asthron-toast-body { margin-top: 0.18rem; color: var(--ins-secondary-color); font-size: 0.9rem; } .asthron-toast-success { border-color: rgba(34, 197, 94, 0.26); } .asthron-toast-error { border-color: rgba(239, 68, 68, 0.3); } .asthron-toast-warning { border-color: rgba(245, 158, 11, 0.3); } /* Keep high-value card strips readable on mobile and consistent on wider viewports. */ .douglas-shell .asthron-lock-grid { max-width: 100%; overflow-y: visible; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.34) transparent; } .douglas-shell .asthron-lock-grid { overflow-x: visible; padding-bottom: 0; } .douglas-shell .asthron-lock-grid::-webkit-scrollbar { width: 4px; height: 4px; } .douglas-shell .asthron-lock-grid::-webkit-scrollbar-button { width: 0; height: 0; display: none; } .douglas-shell .asthron-lock-grid::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.28); border-radius: 999px; } .douglas-shell .asthron-lock-grid::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.48); } .douglas-shell .asthron-lock-grid::-webkit-scrollbar-track { background: transparent; margin-inline: .45rem; } .douglas-shell .asthron-lock-grid.row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-right: 0; margin-left: 0; } .douglas-shell .asthron-lock-grid.row > * { width: auto !important; max-width: 100%; margin-bottom: 0 !important; padding-right: 0; padding-left: 0; } .douglas-shell .asthron-grid-lock-2-compact { gap: 1rem; } .douglas-shell .asthron-grid-lock-3 { gap: 1.5rem; } .douglas-shell .asthron-grid-lock-3-compact { gap: 1rem; } .douglas-shell .asthron-grid-lock-3-compact .summary-tile { display: flex; min-height: 8.25rem; flex-direction: column; justify-content: space-between; gap: .65rem; padding: 1rem !important; overflow: hidden; } .douglas-shell .asthron-grid-lock-3-compact .summary-tile .dashboard-muted-label { min-height: 1.55rem; font-size: .68rem; line-height: 1.15; letter-spacing: .065em; text-transform: uppercase; } .douglas-shell .asthron-grid-lock-3-compact .summary-tile h4 { margin-bottom: 0 !important; font-size: clamp(1.35rem, 1.6vw, 1.8rem); line-height: 1; } .douglas-shell .asthron-grid-lock-3-compact .summary-tile .text-muted { font-size: .78rem; line-height: 1.35; } .douglas-shell .asthron-grid-lock-3-compact .summary-tile .badge { width: fit-content; max-width: 100%; white-space: normal; text-align: left; line-height: 1.2; } .douglas-shell .asthron-grid-lock-4 { gap: 1.5rem; } .douglas-shell .asthron-grid-lock-5 { gap: 1rem; } .douglas-shell .asthron-grid-lock-6 { gap: 1rem; } .douglas-shell .asthron-lock-grid.row > .col-12 { grid-column: 1 / -1; } @media (min-width: 768px) { .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-2-compact { grid-template-columns: repeat(2, minmax(220px, 1fr)); } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-3, .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-3-compact { grid-template-columns: repeat(2, minmax(220px, 1fr)); } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-4 { grid-template-columns: repeat(2, minmax(180px, 1fr)); } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-5 { grid-template-columns: repeat(2, minmax(160px, 1fr)); } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-6 { grid-template-columns: repeat(3, minmax(150px, 1fr)); } } @media (min-width: 992px) { .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-3-compact { grid-template-columns: repeat(3, minmax(170px, 1fr)); } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-5 { grid-template-columns: repeat(3, minmax(160px, 1fr)); } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-6 { grid-template-columns: repeat(3, minmax(150px, 1fr)); } } @media (min-width: 1200px) { .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-3 { grid-template-columns: repeat(3, minmax(280px, 1fr)); } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-4 { grid-template-columns: repeat(3, minmax(240px, 1fr)); } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-5 { grid-template-columns: repeat(4, minmax(180px, 1fr)); } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-6 { grid-template-columns: repeat(6, minmax(130px, 1fr)); } } @media (min-width: 1400px) { .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-4 { grid-template-columns: repeat(4, minmax(240px, 1fr)); } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-5 { grid-template-columns: repeat(5, minmax(180px, 1fr)); } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-6 { grid-template-columns: repeat(6, minmax(150px, 1fr)); } } @media (max-width: 575.98px) { .douglas-shell .asthron-lock-grid .card-body.p-5 { padding: 1.25rem !important; } .douglas-shell .asthron-lock-grid .card-footer.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .douglas-shell .asthron-lock-grid .display-6 { font-size: clamp(2rem, 11vw, 2.65rem); } } .douglas-shell .asthron-lock-grid.row[data-tour="client.addons.catalog"], .douglas-shell .asthron-lock-grid.row[data-tour="admin.addons.catalog"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 320px)); justify-content: center; align-items: stretch; } .douglas-shell .asthron-lock-grid.row[data-tour="client.pricing.catalog"], .douglas-shell .asthron-lock-grid.row[data-tour="admin.pricing.catalog"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 382px)); justify-content: center; align-items: stretch; } .douglas-shell .asthron-lock-grid.row[data-tour="client.addons.catalog"] > *, .douglas-shell .asthron-lock-grid.row[data-tour="admin.addons.catalog"] > * { display: flex; justify-content: center; width: 320px !important; max-width: 320px !important; min-width: 320px !important; } .douglas-shell .asthron-lock-grid.row[data-tour="client.pricing.catalog"] > *, .douglas-shell .asthron-lock-grid.row[data-tour="admin.pricing.catalog"] > * { display: flex; justify-content: center; width: 382px !important; max-width: 382px !important; min-width: 382px !important; } .douglas-shell .asthron-lock-grid.row[data-tour="client.pricing.catalog"] > * > .card, .douglas-shell .asthron-lock-grid.row[data-tour="admin.pricing.catalog"] > * > .card { width: 100%; } .douglas-shell .asthron-addon-card { width: 100%; max-width: 320px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; border-color: var(--asth-border, var(--ins-border-color)) !important; background: radial-gradient(circle at top left, rgba(79, 225, 255, 0.07), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .douglas-shell .asthron-addon-card:hover { transform: translateY(-2px); border-color: rgba(79, 225, 255, 0.24) !important; box-shadow: 0 22px 56px rgba(15, 23, 42, 0.12); } .douglas-shell .asthron-addon-card.is-owned { border-color: rgba(79, 225, 255, 0.32) !important; box-shadow: 0 20px 58px rgba(79, 225, 255, 0.12); } .douglas-shell .asthron-addon-card.has-ribbon .card-body { padding-top: 3.35rem !important; } .douglas-shell .asthron-addon-card .card-body { flex: 1 1 auto; display: flex; flex-direction: column; } .douglas-shell .asthron-addon-icon { width: 3.1rem; height: 3.1rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(79, 225, 255, 0.2); border-radius: 1.15rem; color: var(--asth-brand, var(--ins-primary)); background: radial-gradient(circle at top left, rgba(79, 225, 255, 0.18), transparent 48%), rgba(79, 225, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .douglas-shell .asthron-addon-icon i { font-size: 1.45rem; line-height: 1; } .douglas-shell .asthron-addon-card-head { min-height: 5.8rem; } .douglas-shell .asthron-addon-card-head h3 { font-size: 1.12rem; line-height: 1.18; } .douglas-shell .broadcast-file-picker { display: flex; align-items: center; gap: .65rem; min-height: 2.65rem; padding: .35rem; border: 1px solid rgba(148, 163, 184, .35); border-radius: .85rem; background: rgba(15, 23, 42, .18); } .douglas-shell .broadcast-file-picker .btn { flex: 0 0 auto; padding: .62rem .9rem; border: 0; border-radius: 999px; background: linear-gradient(135deg, rgba(37, 99, 235, .95), rgba(20, 184, 166, .9)); color: #fff; font-size: .78rem; font-weight: 700; line-height: 1; transition: transform .16s ease, box-shadow .16s ease; } .douglas-shell .broadcast-file-picker .btn:hover, .douglas-shell .broadcast-file-picker .btn:focus-visible { box-shadow: 0 .5rem 1.2rem rgba(37, 99, 235, .24); color: #fff; transform: translateY(-1px); } .douglas-shell .broadcast-file-picker [data-broadcast-file-name] { color: var(--bs-secondary-color); flex: 1 1 auto; font-size: .84rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .douglas-shell .broadcast-audience-summary { align-items: center; } .douglas-shell .broadcast-audience-count { display: inline-flex; min-height: 2rem; align-items: center; justify-content: center; padding: .35rem .7rem; border: 1px solid rgba(132, 151, 182, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.035); color: var(--asth-text-soft, var(--ins-body-color)); font-size: .76rem; font-weight: var(--asth-font-weight-label); letter-spacing: 0; line-height: 1.1; text-transform: none; } .douglas-shell .broadcast-audience-count.is-selected-count { border-color: rgba(79, 225, 255, 0.35); background: rgba(79, 225, 255, 0.08); color: #8eeaff; } .douglas-shell .broadcast-audience-count.is-unique-count { border-color: rgba(61, 213, 152, 0.34); background: rgba(61, 213, 152, 0.08); color: var(--asth-success, #3dd598); } .douglas-shell .broadcast-audience-count.is-duplicate-count { border-color: rgba(246, 199, 96, 0.42); background: rgba(246, 199, 96, 0.1); color: var(--asth-warn, #f6c760); } .douglas-shell .broadcast-audience-groups { display: grid; max-height: 18rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; overflow: auto; padding: .15rem; } .douglas-shell .broadcast-audience-group { min-width: 0; } .douglas-shell .broadcast-audience-list { display: flex; flex-direction: column; gap: .5rem; } .douglas-shell .broadcast-audience-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid rgba(132, 151, 182, 0.18); border-radius: .95rem; background: radial-gradient(circle at top left, rgba(79, 225, 255, 0.07), transparent 46%), rgba(255, 255, 255, 0.025); cursor: pointer; transition: border-color .18s ease, background .18s ease, opacity .18s ease, transform .18s ease; } .douglas-shell .broadcast-audience-option:hover { border-color: rgba(79, 225, 255, 0.38); background: radial-gradient(circle at top left, rgba(79, 225, 255, 0.14), transparent 48%), rgba(255, 255, 255, 0.04); transform: translateY(-1px); } .douglas-shell .broadcast-audience-option.is-selected { border-color: rgba(79, 225, 255, 0.68); background: linear-gradient(135deg, rgba(48, 128, 255, 0.24), rgba(19, 184, 255, 0.12)), rgba(255, 255, 255, 0.04); box-shadow: 0 14px 32px rgba(11, 122, 255, 0.14); } .douglas-shell .broadcast-audience-option.is-duplicate { border-style: dashed; opacity: .72; } .douglas-shell .broadcast-audience-option .form-check-input { margin: 0; } .douglas-shell .broadcast-audience-copy { display: block; min-width: 0; } .douglas-shell .broadcast-audience-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .douglas-shell .broadcast-audience-copy > .text-muted { display: none; } .douglas-shell .broadcast-recipient-select { min-height: 11rem; padding: .45rem; border-color: rgba(132, 151, 182, 0.2); border-radius: 1rem; background: radial-gradient(circle at top left, rgba(79, 225, 255, 0.08), transparent 42%), rgba(255, 255, 255, 0.025); } .douglas-shell .broadcast-recipient-select option { margin-bottom: .22rem; padding: .45rem .55rem; border-radius: .6rem; color: var(--asth-text, var(--ins-body-color)); background: transparent; } .douglas-shell .broadcast-recipient-select option:checked, .douglas-shell .broadcast-recipient-select option:checked:hover, .douglas-shell .broadcast-recipient-select option:checked:focus { color: #ffffff; font-weight: 700; background: linear-gradient(90deg, rgba(48, 128, 255, 0.95), rgba(16, 185, 255, 0.78)) !important; box-shadow: 0 0 0 999px rgba(48, 128, 255, 0.88) inset; } .douglas-shell .broadcast-recipient-select option:hover { background: rgba(79, 225, 255, 0.1); } @media (max-width: 1199.98px) { .douglas-shell .broadcast-audience-groups { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .douglas-shell .broadcast-audience-option { grid-template-columns: auto minmax(0, 1fr); } .douglas-shell .broadcast-audience-option > .badge { grid-column: 2; justify-self: flex-start; } } .douglas-shell .broadcast-preview-card { position: sticky; top: 1rem; overflow: hidden; padding: 0; border: 1px solid rgba(132, 151, 182, 0.18); border-radius: .5rem; background: #ffffff; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16); } .douglas-shell .broadcast-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid rgba(15, 23, 42, 0.08); color: #2c3766; background: #ffffff; } .douglas-shell .broadcast-phone-preview { overflow: hidden; background: radial-gradient(circle at 14px 14px, rgba(80, 80, 80, .05) 0 2px, transparent 2px), radial-gradient(circle at 38px 42px, rgba(80, 80, 80, .045) 0 2px, transparent 2px), linear-gradient(135deg, rgba(236, 229, 221, .92), rgba(242, 238, 232, .92)); background-size: 52px 52px, 58px 58px, auto; } .douglas-shell .broadcast-message-preview { min-height: 25rem; padding: 1.7rem 1.5rem; } .douglas-shell .broadcast-preview-empty { color: #2c3766; } .douglas-shell .broadcast-preview-empty { display: grid; min-height: 18rem; place-items: center; padding: 1.5rem; text-align: center; } .douglas-shell [data-broadcast-preview-message] { overflow: hidden; max-width: 86%; margin: 0 auto; border-radius: .55rem; background: #ffffff; color: #2c3766; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14); } .douglas-shell .broadcast-preview-header { overflow: hidden; font-weight: 700; white-space: pre-wrap; } .douglas-shell .broadcast-preview-header.is-text-header { padding: .75rem .72rem 0; } .douglas-shell .broadcast-preview-header img { display: block; width: 100%; max-height: 12.6rem; object-fit: cover; } .douglas-shell .broadcast-preview-copy { padding: .75rem .72rem .5rem; } .douglas-shell .broadcast-preview-body { color: #2c3766; font-size: .92rem; line-height: 1.38; white-space: pre-wrap; } .douglas-shell .broadcast-preview-footer { margin-top: .55rem; color: #94a3b8; font-size: .8rem; white-space: pre-wrap; } .douglas-shell .broadcast-preview-buttons { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(15, 23, 42, 0.10); } .douglas-shell .broadcast-preview-button { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.7rem; padding: .55rem .8rem; border-bottom: 1px solid rgba(15, 23, 42, 0.10); background: #ffffff; color: #008069; font-size: .88rem; font-weight: 500; text-align: center; } .douglas-shell .broadcast-preview-button:last-child { border-bottom: 0; } .douglas-shell .broadcast-preview-button-icon { color: #008069; font-size: .92rem; line-height: 1; } .douglas-shell .broadcast-preview-time { margin-top: .35rem; color: #94a3b8; font-size: .7rem; text-align: right; } .douglas-shell .broadcast-preview-media-tile { display: grid; min-height: 10rem; place-items: center; padding: 1rem; border: 1px dashed rgba(15, 23, 42, 0.18); background: radial-gradient(circle at top left, rgba(0, 128, 105, 0.08), transparent 42%), #f8fafc; text-align: center; } .douglas-shell .broadcast-preview-media-meta { border-color: rgba(0, 128, 105, 0.28); } .douglas-shell .broadcast-preview-media-required { border-color: rgba(217, 119, 6, 0.42); } .douglas-shell .broadcast-preview-note { margin: 0 1rem 1rem; padding: .75rem; border: 1px solid rgba(132, 151, 182, 0.14); border-radius: .65rem; color: #475569; font-size: .8rem; background: #f8fafc; } .douglas-shell .content > .container-fluid .broadcast-preview-card { position: sticky; top: 1rem; } .douglas-shell .email-preview-column { align-self: flex-start; height: fit-content; } .douglas-shell .email-preview-card { position: sticky; top: 1.25rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1rem; background: linear-gradient(180deg, rgba(59, 130, 246, .08), rgba(15, 23, 42, .02)); } .douglas-shell .content > .container-fluid #admin-email-campaigns, .douglas-shell .content > .container-fluid #client-email-campaigns, .douglas-shell .content > .container-fluid #admin-email-campaigns > .card-body, .douglas-shell .content > .container-fluid #client-email-campaigns > .card-body, .douglas-shell .content > .container-fluid #admin-email-campaigns form, .douglas-shell .content > .container-fluid #client-email-campaigns form, .douglas-shell .content > .container-fluid #admin-email-campaigns form > .row, .douglas-shell .content > .container-fluid #client-email-campaigns form > .row { overflow: visible !important; } .douglas-shell .email-bounce-action-cell { min-width: 16rem; } .douglas-shell .email-bounce-action-form { justify-content: flex-end; min-width: 15.5rem; white-space: nowrap; } .douglas-shell .email-bounce-action-form .form-select { min-width: 10rem; } .douglas-shell .email-bounce-action-btn { flex: 0 0 auto; min-width: 7.25rem; white-space: nowrap; } .douglas-shell .content > .container-fluid .email-preview-column { position: sticky; top: 1.25rem; z-index: 3; } .douglas-shell .email-preview-shell { overflow: hidden; border: 1px solid rgba(148, 163, 184, .35); border-radius: .9rem; background: #ffffff; color: #111111; box-shadow: 0 18px 45px rgba(15, 23, 42, .12); } .douglas-shell .email-preview-top { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border-bottom: 1px solid #e2e8f0; background: #f8fafc; } .douglas-shell .email-preview-avatar { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-weight: 700; } .douglas-shell .email-preview-from { font-weight: 700; line-height: 1.25; } .douglas-shell .email-preview-subject { padding: 1rem 1rem .35rem; font-size: 1rem; font-weight: 700; } .douglas-shell .email-preview-preheader { padding: 0 1rem .85rem; border-bottom: 1px solid #e2e8f0; } .douglas-shell .email-preview-body { min-height: 210px; padding: 1rem; line-height: 1.55; } .douglas-shell .email-preview-footer { padding: 1rem; border-top: 1px solid #e2e8f0; background: #f8fafc; font-size: .875rem; } .douglas-shell .email-preview-time { padding: .75rem 1rem; font-size: .8rem; text-align: right; } html[data-bs-theme="light"] .douglas-shell .broadcast-preview-card { background: #ffffff; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08); } /* Recipient preview surfaces Broadcast and email previews intentionally stay light in both themes because they represent what recipients see, not the dashboard shell itself. */ .douglas-shell .broadcast-preview-card, .douglas-shell .email-preview-shell { background: #ffffff !important; color: #111111 !important; } .douglas-shell .broadcast-preview-toolbar, .douglas-shell .email-preview-top, .douglas-shell .email-preview-footer { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #111111 !important; } .douglas-shell .broadcast-preview-empty, .douglas-shell [data-broadcast-preview-message], .douglas-shell .broadcast-preview-body, .douglas-shell .email-preview-from, .douglas-shell .email-preview-subject, .douglas-shell .email-preview-body { color: #111111 !important; } .douglas-shell [data-broadcast-preview-message], .douglas-shell .broadcast-preview-button { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.10) !important; } .douglas-shell .broadcast-preview-note { border-color: rgba(15, 23, 42, 0.10) !important; background: #f8fafc !important; color: #475569 !important; } .douglas-shell .broadcast-preview-footer, .douglas-shell .broadcast-preview-time, .douglas-shell .email-preview-to, .douglas-shell .email-preview-preheader, .douglas-shell .email-preview-footer, .douglas-shell .email-preview-time { color: #111111 !important; } .douglas-shell .email-preview-body, .douglas-shell .email-preview-body * { color: #111111 !important; } .douglas-shell .email-preview-body a[style*="background"] { color: #ffffff !important; } .douglas-shell .broadcast-preview-media-tile { border-color: rgba(15, 23, 42, 0.18) !important; background: radial-gradient(circle at top left, rgba(0, 128, 105, 0.08), transparent 42%), #f8fafc !important; color: #2c3766 !important; } .douglas-shell .email-preview-shell { border-color: rgba(148, 163, 184, 0.35) !important; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12) !important; } .douglas-shell .asthron-addon-price { padding: 1rem; border: 1px solid rgba(132, 151, 182, 0.14); border-radius: 1.25rem; background: rgba(255, 255, 255, 0.035); } .douglas-shell .asthron-addon-price .display-6 { font-size: clamp(1.85rem, 4vw, 2.35rem); letter-spacing: -0.03em; } .douglas-shell .asthron-addon-features { flex: 1 1 auto; color: var(--asth-text, var(--ins-body-color)); } .douglas-shell .asthron-addon-features li { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.45; } .douglas-shell .asthron-addon-features li i { flex: 0 0 auto; margin-top: .15rem; } .douglas-shell .asthron-addon-card .card-footer { border-top: 1px solid rgba(132, 151, 182, 0.14); } .douglas-shell .asthron-addon-action { min-height: 2.65rem; } .douglas-shell .asthron-addon-ribbon { z-index: 2; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12); } html[data-bs-theme="light"] .douglas-shell .asthron-addon-ribbon { background: rgba(85, 104, 255, 0.12) !important; border-color: rgba(85, 104, 255, 0.28) !important; color: #2c3766 !important; } html[data-bs-theme="light"] .douglas-shell .asthron-addon-card { background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.07), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)); } html[data-bs-theme="light"] .douglas-shell .asthron-addon-price { background: rgba(15, 23, 42, 0.025); } @media (max-width: 575.98px) { .douglas-shell .asthron-lock-grid.row[data-tour="client.addons.catalog"], .douglas-shell .asthron-lock-grid.row[data-tour="admin.addons.catalog"], .douglas-shell .asthron-lock-grid.row[data-tour="client.pricing.catalog"] { grid-template-columns: minmax(0, 1fr); } .douglas-shell .asthron-addon-card { max-width: 100%; } .douglas-shell .asthron-addon-card-head { min-height: 0; } } .douglas-shell .billing-overview-card, .douglas-shell .billing-addon-panel, .douglas-shell .billing-capacity-item, .douglas-shell .billing-limit-row, .douglas-shell .billing-mini-stat { overflow: hidden; isolation: isolate; } .douglas-shell .billing-price-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .55rem; } .douglas-shell .billing-price-line span { color: var(--asth-text); font-size: clamp(1.8rem, 3vw, 2.45rem); font-weight: var(--asth-font-weight-heading); line-height: 1; letter-spacing: -.035em; } .douglas-shell .billing-price-line small { margin-bottom: .18rem; color: var(--asth-text-soft); font-size: var(--asth-font-size-sm); } .douglas-shell .billing-detail-list, .douglas-shell .billing-capacity-grid, .douglas-shell .billing-limit-list, .douglas-shell .billing-addon-list { display: grid; gap: .85rem; } .douglas-shell .billing-detail-row, .douglas-shell .billing-capacity-item, .douglas-shell .billing-limit-row, .douglas-shell .billing-mini-stat, .douglas-shell .billing-addon-panel { border: 1px solid var(--asth-border); border-radius: var(--asth-radius-lg); background: radial-gradient(circle at top left, rgba(79, 225, 255, .055), transparent 38%), var(--asth-surface-subtle); } .douglas-shell .billing-detail-row { display: flex; justify-content: space-between; gap: 1rem; padding: .78rem .9rem; } .douglas-shell .billing-detail-row span { color: var(--asth-text-soft); } .douglas-shell .billing-detail-row strong { color: var(--asth-text); font-weight: var(--asth-font-weight-title); text-align: right; } .douglas-shell .billing-capacity-item, .douglas-shell .billing-limit-row, .douglas-shell .billing-mini-stat, .douglas-shell .billing-addon-panel { padding: 1rem; } .douglas-shell .billing-capacity-item span, .douglas-shell .billing-mini-stat span { display: block; color: var(--asth-text-soft); font-size: var(--asth-font-size-xs); font-weight: var(--asth-font-weight-label); letter-spacing: var(--asth-letter-label); text-transform: uppercase; } .douglas-shell .billing-capacity-item strong, .douglas-shell .billing-mini-stat strong { display: block; margin-top: .28rem; color: var(--asth-text); font-weight: var(--asth-font-weight-heading); line-height: 1.1; } .douglas-shell .billing-capacity-item strong { font-size: 1.35rem; } .douglas-shell .billing-mini-stat strong { font-size: clamp(1.55rem, 3vw, 2rem); } .douglas-shell .billing-capacity-item small { display: block; margin-top: .32rem; color: var(--asth-primary); font-size: var(--asth-font-size-sm); } .douglas-shell .billing-limit-row-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .78rem; } .douglas-shell .billing-limit-row-top strong { display: block; color: var(--asth-text); font-weight: var(--asth-font-weight-title); } .douglas-shell .billing-limit-row-top span:not(.badge) { display: block; margin-top: .15rem; color: var(--asth-text-soft); } .douglas-shell .billing-limit-row .progress { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, .16); } .douglas-shell .billing-mini-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .9rem; } .douglas-shell .billing-addon-list > .col-lg-6 { flex: 0 1 auto; width: 100%; max-width: 100%; padding: 0; } html[data-bs-theme="light"] .douglas-shell .billing-detail-row, html[data-bs-theme="light"] .douglas-shell .billing-capacity-item, html[data-bs-theme="light"] .douglas-shell .billing-limit-row, html[data-bs-theme="light"] .douglas-shell .billing-mini-stat, html[data-bs-theme="light"] .douglas-shell .billing-addon-panel { background: radial-gradient(circle at top left, rgba(37, 99, 235, .04), transparent 38%), rgba(15, 23, 42, .018); } @media (max-width: 767.98px) { .douglas-shell .billing-detail-row, .douglas-shell .billing-limit-row-top { flex-direction: column; } .douglas-shell .billing-detail-row strong { text-align: left; } } .douglas-shell .asthron-mobile-action-panel { min-width: 320px; max-width: 360px; width: 100%; } .douglas-shell .audit-table-pagination { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .douglas-shell .admin-shell-workspace .dashboard-section-card .table td:first-child { min-width: 40px; } .douglas-shell .dashboard-tab-shell { overflow: hidden; } .douglas-shell .dashboard-tab-shell > .card-header { margin-bottom: 0; } .douglas-shell .dashboard-tab-shell > .card-body { padding: 1.15rem !important; } .douglas-shell .dashboard-tab-shell .dashboard-section-card { border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; } .douglas-shell .dashboard-tab-shell .dashboard-section-card > .card-header { padding: 0 0 .85rem !important; border-bottom: 0 !important; background: transparent !important; } .douglas-shell .dashboard-tab-shell .dashboard-section-card > .card-body { padding: 0 !important; } .douglas-shell .dashboard-tab-shell .dashboard-section-card > .card-footer { padding: .9rem 0 0 !important; border-top: 0 !important; background: transparent !important; } .douglas-shell .dashboard-tab-shell .dashboard-section-card:hover { transform: none !important; box-shadow: none !important; } .douglas-shell .dashboard-tab-shell .card-title { margin-bottom: 0; } .douglas-shell #admin-dashboard-insights #admin-dashboard-portfolio-panel > .row > .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; } .douglas-shell #admin-dashboard-insights #admin-dashboard-portfolio-panel > .row > .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; } .douglas-shell #admin-dashboard-insights .summary-tile.hero-stat { min-height: 7rem; display: flex; flex-direction: column; justify-content: center; gap: .35rem; } .douglas-shell #admin-dashboard-insights .summary-tile.hero-stat .dashboard-muted-label { min-height: 0; } .douglas-shell #admin-dashboard-insights .summary-tile.hero-stat h3, .douglas-shell #admin-dashboard-insights .summary-tile.hero-stat h4 { line-height: 1; } .douglas-shell .wishlist-filter-form { background: radial-gradient(circle at top left, rgba(79, 225, 255, .055), transparent 36%), rgba(255, 255, 255, .018); } .douglas-shell .wishlist-table-frame { border: 1px solid var(--asth-border); border-radius: 16px; overflow: hidden; } @media (max-width: 767.98px) { .douglas-shell .asthron-mobile-action-panel { min-width: 0; max-width: 100%; flex: 1 1 100%; } .douglas-shell .asthron-mobile-stack-form { min-width: 0 !important; width: 100%; } .douglas-shell .table-responsive td[style*="min-width"], .douglas-shell .table-responsive th[style*="min-width"] { min-width: 0 !important; } .douglas-shell .content > .container-fluid .asthron-mobile-card-table { display: table !important; width: 100% !important; min-width: 0; } .douglas-shell .admin-shell-workspace .asthron-mobile-card-table, .douglas-shell .client-shell-workspace .asthron-mobile-card-table { display: table !important; width: 100% !important; min-width: 0; } .douglas-shell .content > .container-fluid .asthron-mobile-card-table thead, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table thead, .douglas-shell .client-shell-workspace .asthron-mobile-card-table thead { display: table-header-group !important; } .douglas-shell .content > .container-fluid .asthron-mobile-card-table tbody, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table tbody, .douglas-shell .client-shell-workspace .asthron-mobile-card-table tbody { display: table-row-group !important; padding: 0 !important; } .douglas-shell .content > .container-fluid .asthron-mobile-card-table tr, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table tr, .douglas-shell .client-shell-workspace .asthron-mobile-card-table tr { display: table-row !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } .douglas-shell .content > .container-fluid .asthron-mobile-card-table td, .douglas-shell .content > .container-fluid .asthron-mobile-card-table th, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table td, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table th, .douglas-shell .client-shell-workspace .asthron-mobile-card-table td, .douglas-shell .client-shell-workspace .asthron-mobile-card-table th { display: table-cell !important; border-bottom: var(--ins-border-width) var(--ins-border-style) var(--ins-border-color); padding: .85rem .95rem; vertical-align: middle; white-space: normal; max-width: none !important; } .douglas-shell .content > .container-fluid .asthron-mobile-card-table td::before, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table td::before, .douglas-shell .client-shell-workspace .asthron-mobile-card-table td::before { content: none !important; display: none !important; } .douglas-shell .content > .container-fluid .asthron-mobile-card-table .btn, .douglas-shell .content > .container-fluid .asthron-mobile-card-table .asthron-card-actions form, .douglas-shell .content > .container-fluid .asthron-mobile-card-table .asthron-card-actions .d-flex, .douglas-shell .content > .container-fluid .asthron-mobile-card-table .asthron-card-actions .d-inline-flex, .douglas-shell .content > .container-fluid .asthron-mobile-card-table .staff-action-group, .douglas-shell .content > .container-fluid .asthron-mobile-card-table .staff-action-group form, .douglas-shell .content > .container-fluid .asthron-mobile-card-table .client-action-stack, .douglas-shell .content > .container-fluid .asthron-mobile-card-table .client-action-stack form, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table .btn, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table .asthron-card-actions form, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table .asthron-card-actions .d-flex, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table .asthron-card-actions .d-inline-flex, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table .staff-action-group, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table .staff-action-group form, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table .client-action-stack, .douglas-shell .admin-shell-workspace .asthron-mobile-card-table .client-action-stack form, .douglas-shell .client-shell-workspace .asthron-mobile-card-table .btn, .douglas-shell .client-shell-workspace .asthron-mobile-card-table .asthron-card-actions form, .douglas-shell .client-shell-workspace .asthron-mobile-card-table .asthron-card-actions .d-flex, .douglas-shell .client-shell-workspace .asthron-mobile-card-table .asthron-card-actions .d-inline-flex, .douglas-shell .client-shell-workspace .asthron-mobile-card-table .staff-action-group, .douglas-shell .client-shell-workspace .asthron-mobile-card-table .staff-action-group form, .douglas-shell .client-shell-workspace .asthron-mobile-card-table .client-action-stack, .douglas-shell .client-shell-workspace .asthron-mobile-card-table .client-action-stack form { width: auto; } } @media (max-width: 575.98px) { .douglas-shell .conversation-message-card { max-width: 100% !important; } .douglas-shell .dashboard-hero .hero-stat { min-width: 0 !important; width: 100%; } .douglas-shell form.d-flex.flex-wrap .form-control[style*="min-width"], .douglas-shell form.d-flex.flex-wrap .form-select[style*="min-width"] { min-width: 0 !important; width: 100%; } } @media (max-width: 991.98px) { .douglas-shell .modal, .swal2-container { position: fixed !important; inset: 0 !important; transform: none !important; } .douglas-shell .modal { z-index: 1060 !important; padding: .5rem !important; } .douglas-shell .modal-backdrop { z-index: 1055 !important; } .asthron-toast-stack { position: fixed; top: .75rem; right: .75rem; left: .75rem; z-index: 1085; width: auto; max-width: none; pointer-events: none; } .asthron-toast { width: 100%; pointer-events: auto; } .douglas-shell .modal-dialog { width: min(760px, calc(100vw - 1rem)) !important; max-width: calc(100vw - 1rem) !important; min-height: calc(100dvh - 1rem); margin: .5rem auto !important; display: flex; align-items: center; } .douglas-shell .modal-dialog.modal-xl { width: min(980px, calc(100vw - 1rem)) !important; } .douglas-shell .modal-content { max-height: calc(100dvh - 1rem); display: flex; flex-direction: column; overflow: hidden; } .douglas-shell .modal-body { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .douglas-shell .modal-footer { flex-shrink: 0; gap: .5rem; } .swal2-container { z-index: 1095 !important; padding: .5rem !important; } .swal2-container.swal2-center { display: flex !important; align-items: center !important; justify-content: center !important; } .swal2-container.swal2-top, .swal2-container.swal2-top-start, .swal2-container.swal2-top-end { display: flex !important; align-items: flex-start !important; padding-top: .75rem !important; } .swal2-container.swal2-top { justify-content: center !important; } .swal2-container.swal2-top-start { justify-content: flex-start !important; } .swal2-container.swal2-top-end { justify-content: flex-end !important; } .swal2-popup:not(.swal2-toast) { width: min(720px, calc(100vw - 1rem)) !important; max-width: calc(100vw - 1rem) !important; max-height: calc(100dvh - 1rem); margin: auto !important; overflow: hidden; transform: none !important; } .swal2-toast { width: min(380px, calc(100vw - 1rem)) !important; max-width: calc(100vw - 1rem) !important; margin: 0 !important; transform: none !important; } .swal2-popup.asthron-swal-popup:not(.swal2-toast), .swal2-popup.asthron-swal-form-popup:not(.swal2-toast), .swal2-popup.swal2-client-create-popup:not(.swal2-toast) { width: min(760px, calc(100vw - 1rem)) !important; max-width: calc(100vw - 1rem) !important; max-height: calc(100dvh - 1rem); overflow: hidden; } .swal2-html-container.asthron-swal-body, .swal2-popup.asthron-swal-form-popup .swal2-html-container, .swal2-popup.swal2-client-create-popup .swal2-html-container { max-height: calc(100dvh - 12rem); overflow-y: auto; -webkit-overflow-scrolling: touch; color: var(--asth-text) !important; } .asthron-swal-scroll { max-height: calc(100dvh - 14rem); overflow-y: auto; padding-right: .15rem; -webkit-overflow-scrolling: touch; } .swal2-actions { gap: .5rem !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap; } .swal2-actions .btn, .douglas-shell .modal-footer .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 2.35rem; line-height: 1.1 !important; white-space: nowrap; } .swal2-popup .badge, .douglas-shell .modal .badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; line-height: 1 !important; } } .email-builder-shell { border: 1px solid var(--bs-border-color); border-radius: 1rem; background: linear-gradient(180deg, rgba(148, 163, 184, .08), rgba(15, 23, 42, .02)); padding: 1rem; } .email-builder-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; } .email-builder-list { display: grid; gap: .85rem; margin-top: 1rem; } .email-builder-block { border: 1px solid var(--bs-border-color); border-radius: .95rem; background: var(--bs-body-bg); padding: .9rem; } .email-builder-block-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; } .email-builder-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; } .email-builder-fields .form-label { font-size: .72rem; letter-spacing: .05em; margin-bottom: .35rem; } .email-builder-file-picker { align-items: center; background: rgba(15, 23, 42, .18); border: 1px solid rgba(148, 163, 184, .35); border-radius: .85rem; display: flex; gap: .65rem; min-height: 2.65rem; padding: .35rem; } .email-builder-file-input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; } .email-builder-file-button { background: linear-gradient(135deg, rgba(37, 99, 235, .95), rgba(20, 184, 166, .9)); border: 0; border-radius: 999px; color: #fff; cursor: pointer; flex: 0 0 auto; font-size: .78rem; font-weight: 700; line-height: 1; margin: 0; padding: .62rem .9rem; transition: transform .16s ease, box-shadow .16s ease; } .email-builder-file-button:hover, .email-builder-file-input:focus-visible + .email-builder-file-button { box-shadow: 0 .5rem 1.2rem rgba(37, 99, 235, .24); transform: translateY(-1px); } .email-builder-file-name { color: var(--bs-secondary-color); flex: 1 1 auto; font-size: .84rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-bs-theme="light"] .email-builder-file-picker { background: rgba(248, 250, 252, .92); } html[data-bs-theme="light"] .douglas-shell .broadcast-file-picker { background: rgba(248, 250, 252, .92); } .douglas-shell .form-control[type="file"] { min-height: 2.65rem; padding: .35rem; border-color: rgba(148, 163, 184, .35); border-radius: .85rem; background: rgba(15, 23, 42, .18); color: var(--bs-secondary-color); font-size: .84rem; } .douglas-shell .form-control[type="file"]::file-selector-button { margin: 0 .65rem 0 0; padding: .62rem .9rem; border: 0; border-radius: 999px; background: linear-gradient(135deg, rgba(37, 99, 235, .95), rgba(20, 184, 166, .9)); color: #fff; font-size: .78rem; font-weight: 700; line-height: 1; transition: transform .16s ease, box-shadow .16s ease; } .douglas-shell .form-control[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button, .douglas-shell .form-control[type="file"]:focus-visible::file-selector-button { box-shadow: 0 .5rem 1.2rem rgba(37, 99, 235, .24); color: #fff; } html[data-bs-theme="light"] .douglas-shell .form-control[type="file"] { background: rgba(248, 250, 252, .92); } .email-builder-empty-media { border: 1px dashed rgba(148, 163, 184, .45); border-radius: .75rem; color: var(--bs-secondary-color); font-size: .85rem; padding: .7rem .8rem; } .email-builder-warnings { display: grid; gap: .4rem; margin-top: .85rem; } .email-builder-warnings > div { border: 1px solid rgba(251, 191, 36, .5); border-radius: .75rem; background: rgba(245, 158, 11, .16); color: #fde68a; font-size: .85rem; font-weight: 600; padding: .55rem .7rem; } html[data-bs-theme="light"] .email-builder-warnings > div { border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .1); color: #92400e; } .email-campaign-html-snapshot { background: #ffffff; border: 1px solid rgba(148, 163, 184, .35); border-radius: .95rem; color: #111111; padding: 1rem; } .email-campaign-html-snapshot, .email-campaign-html-snapshot * { color: #111111 !important; } .douglas-shell .email-campaign-html-snapshot, .douglas-shell .email-campaign-html-snapshot :is(p, h1, h2, h3, h4, h5, h6, div, span, td, th, li, small, strong, em) { color: #111111 !important; } .email-campaign-html-snapshot a[style*="background"] { color: #ffffff !important; } @media (max-width: 575.98px) { .douglas-shell .content > .container-fluid .email-builder-block-header { align-items: center; flex-direction: row; } .douglas-shell .content > .container-fluid .email-builder-actions { width: auto; justify-content: flex-end; } .douglas-shell .content > .container-fluid .email-builder-actions .btn, .douglas-shell .content > .container-fluid .email-builder-toolbar .btn { width: auto; flex: 0 0 auto; } } /* ========================================================= Protected mobile desktop-canvas contract Admin/client authenticated pages keep desktop composition on mobile by scaling one fixed-width canvas. Component-level mobile stacking must be opt-in, not global. ========================================================= */ @media (max-width: 991.98px) { .douglas-shell { --asth-mobile-canvas-width: 1440px; --asth-mobile-canvas-scale: .3; } .douglas-shell .container-fluid { padding-left: calc(var(--ins-gutter-x, 1.25rem) * .5) !important; padding-right: calc(var(--ins-gutter-x, 1.25rem) * .5) !important; } .douglas-shell .content { padding-top: 10px !important; padding-left: 10px !important; padding-right: 10px !important; overflow-x: hidden; overflow-x: clip; overflow-y: visible; } .douglas-shell .content > .container-fluid { width: var(--asth-mobile-canvas-width, 1440px) !important; max-width: none !important; min-width: var(--asth-mobile-canvas-width, 1440px) !important; transform-origin: top left; transform: scale(var(--asth-mobile-canvas-scale, .3)); height: var(--asth-mobile-canvas-layout-height, auto) !important; min-height: var(--asth-mobile-canvas-layout-height, auto) !important; overflow: visible !important; will-change: transform; zoom: 1; } .douglas-shell .content > .container-fluid #staff-directory { margin-top: 1.25rem; } .douglas-shell .content > .container-fluid .email-preview-column, .douglas-shell .content > .container-fluid .broadcast-preview-card { position: sticky !important; top: var(--asth-mobile-sticky-top, 4rem) !important; align-self: flex-start !important; z-index: 4; } .douglas-shell .content > .container-fluid .email-preview-column .email-preview-card { position: relative !important; top: auto !important; max-height: var(--asth-mobile-preview-max-height, calc(100vh - 2.5rem)); } .public-auth-page .container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .public-auth-page .admin-auth-shell, .public-auth-page .client-auth-shell, .public-auth-page .invite-auth-shell, .public-auth-page .auth-shell { width: 100% !important; max-width: 100% !important; } .public-auth-page .admin-auth-card, .public-auth-page .client-auth-card, .public-auth-page .invite-auth-card, .public-auth-page .auth-card { width: 100% !important; max-width: 100% !important; } .public-auth-page .admin-auth-shell > .container, .public-auth-page .client-auth-shell > .container { width: var(--asth-mobile-canvas-width, 1440px) !important; max-width: none !important; min-width: var(--asth-mobile-canvas-width, 1440px) !important; transform-origin: top left; transform: scale(var(--asth-mobile-canvas-scale, .3)); height: var(--asth-mobile-canvas-layout-height, auto) !important; min-height: var(--asth-mobile-canvas-layout-height, auto) !important; overflow: visible !important; will-change: transform; zoom: 1; } .public-auth-page .admin-auth-shell .col-12.col-xl-10, .public-auth-page .client-auth-shell .col-12.col-xl-10 { flex: 0 0 auto !important; width: 83.33333333% !important; max-width: 83.33333333% !important; } .public-auth-page .admin-auth-card .row.g-0, .public-auth-page .client-auth-card .row.g-0 { display: flex !important; flex-wrap: nowrap !important; } .public-auth-page .admin-auth-card .row.g-0 > [class*="col-"], .public-auth-page .client-auth-card .row.g-0 > [class*="col-"] { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; order: initial !important; } .public-auth-page .admin-auth-side, .public-auth-page .client-auth-side { border-top: 0 !important; border-right: 1px solid rgba(132, 151, 182, 0.14) !important; } .public-auth-page .admin-auth-side, .public-auth-page .client-auth-side, .public-auth-page .admin-auth-form-panel, .public-auth-page .client-auth-form-panel { min-height: 610px; padding: 2rem !important; } } @media (max-width: 767.98px) { .douglas-shell .container-fluid { padding-left: calc(var(--ins-gutter-x, 1.25rem) * .5) !important; padding-right: calc(var(--ins-gutter-x, 1.25rem) * .5) !important; } .douglas-shell .content > .container-fluid { width: var(--asth-mobile-canvas-width, 1440px) !important; max-width: none !important; min-width: var(--asth-mobile-canvas-width, 1440px) !important; } .douglas-shell .button-collapse-toggle { width: 2.4rem; height: 2.4rem; min-width: 2.4rem; min-height: 2.4rem; border-radius: 8px; } } @media (max-width: 575.98px) { .douglas-shell .app-topbar .dropdown { position: static; } .douglas-shell .app-topbar .dropdown .dropdown-menu { left: 0.5rem !important; right: 0.5rem !important; width: calc(100vw - 1rem) !important; max-width: calc(100vw - 1rem) !important; min-width: 0 !important; } .douglas-shell .app-topbar .dropdown .dropdown-menu.show { position: fixed !important; top: calc(var(--ins-topbar-height, 60px) + 0.75rem) !important; transform: none !important; } .douglas-shell .profile-dropdown .dropdown-header .min-w-0 { max-width: calc(100vw - 6rem); } .douglas-shell .asthron-notification-dropdown { max-height: calc(100dvh - 5.5rem); overflow: hidden; } .douglas-shell .asthron-action-menu, .douglas-shell .asthron-action-menu-wide, .douglas-shell .website-edit-action-menu, .douglas-shell .website-list-action-menu { width: 100%; min-width: 0; max-width: 100%; } .douglas-shell .asthron-media-asset-preview { width: 100%; height: auto; min-height: 132px; aspect-ratio: 1 / 1; } } /* ========================================================= Mobile scaled desktop column policy Preserve desktop dashboard composition inside the scaled mobile canvas. ========================================================= */ @media (max-width: 991.98px) { .douglas-shell .content > .container-fluid .d-flex.flex-column.flex-xl-row, .douglas-shell .content > .container-fluid .d-flex.flex-column.flex-lg-row, .douglas-shell .content > .container-fluid .d-flex.flex-column.flex-md-row, .douglas-shell .content > .container-fluid .d-flex.flex-column.flex-sm-row { flex-direction: row !important; flex-wrap: wrap; } .douglas-shell .content > .container-fluid .card { width: 100%; min-width: 0; } .douglas-shell .content > .container-fluid .summary-tile, .douglas-shell .content > .container-fluid .hero-stat, .douglas-shell .content > .container-fluid .dashboard-section-card { min-width: 0; } .douglas-shell .content > .container-fluid .admin-directory-filter-form, .douglas-shell .content > .container-fluid .lead-filter-bar, .douglas-shell .content > .container-fluid .conversation-filter-bar { min-width: 0; } .douglas-shell .content > .container-fluid .row > .col-sm-1, .douglas-shell .content > .container-fluid .row > .col-md-1, .douglas-shell .content > .container-fluid .row > .col-lg-1, .douglas-shell .content > .container-fluid .row > .col-xl-1, .douglas-shell .content > .container-fluid .row > .col-xxl-1 { flex: 0 0 auto !important; width: 8.33333333% !important; max-width: 8.33333333% !important; } .douglas-shell .content > .container-fluid .row > .col-sm-2, .douglas-shell .content > .container-fluid .row > .col-md-2, .douglas-shell .content > .container-fluid .row > .col-lg-2, .douglas-shell .content > .container-fluid .row > .col-xl-2, .douglas-shell .content > .container-fluid .row > .col-xxl-2 { flex: 0 0 auto !important; width: 16.66666667% !important; max-width: 16.66666667% !important; } .douglas-shell .content > .container-fluid .row > .col-sm-3, .douglas-shell .content > .container-fluid .row > .col-md-3, .douglas-shell .content > .container-fluid .row > .col-lg-3, .douglas-shell .content > .container-fluid .row > .col-xl-3, .douglas-shell .content > .container-fluid .row > .col-xxl-3 { flex: 0 0 auto !important; width: 25% !important; max-width: 25% !important; } .douglas-shell .content > .container-fluid .row > .col-sm-4, .douglas-shell .content > .container-fluid .row > .col-md-4, .douglas-shell .content > .container-fluid .row > .col-lg-4, .douglas-shell .content > .container-fluid .row > .col-xl-4, .douglas-shell .content > .container-fluid .row > .col-xxl-4 { flex: 0 0 auto !important; width: 33.33333333% !important; max-width: 33.33333333% !important; } .douglas-shell .content > .container-fluid .row > .col-sm-5, .douglas-shell .content > .container-fluid .row > .col-md-5, .douglas-shell .content > .container-fluid .row > .col-lg-5, .douglas-shell .content > .container-fluid .row > .col-xl-5, .douglas-shell .content > .container-fluid .row > .col-xxl-5 { flex: 0 0 auto !important; width: 41.66666667% !important; max-width: 41.66666667% !important; } .douglas-shell .content > .container-fluid .row > .col-sm-6, .douglas-shell .content > .container-fluid .row > .col-md-6, .douglas-shell .content > .container-fluid .row > .col-lg-6, .douglas-shell .content > .container-fluid .row > .col-xl-6, .douglas-shell .content > .container-fluid .row > .col-xxl-6 { flex: 0 0 auto !important; width: 50% !important; max-width: 50% !important; } .douglas-shell .content > .container-fluid .row > .col-sm-7, .douglas-shell .content > .container-fluid .row > .col-md-7, .douglas-shell .content > .container-fluid .row > .col-lg-7, .douglas-shell .content > .container-fluid .row > .col-xl-7, .douglas-shell .content > .container-fluid .row > .col-xxl-7 { flex: 0 0 auto !important; width: 58.33333333% !important; max-width: 58.33333333% !important; } .douglas-shell .content > .container-fluid .row > .col-sm-8, .douglas-shell .content > .container-fluid .row > .col-md-8, .douglas-shell .content > .container-fluid .row > .col-lg-8, .douglas-shell .content > .container-fluid .row > .col-xl-8, .douglas-shell .content > .container-fluid .row > .col-xxl-8 { flex: 0 0 auto !important; width: 66.66666667% !important; max-width: 66.66666667% !important; } .douglas-shell .content > .container-fluid .row > .col-sm-9, .douglas-shell .content > .container-fluid .row > .col-md-9, .douglas-shell .content > .container-fluid .row > .col-lg-9, .douglas-shell .content > .container-fluid .row > .col-xl-9, .douglas-shell .content > .container-fluid .row > .col-xxl-9 { flex: 0 0 auto !important; width: 75% !important; max-width: 75% !important; } .douglas-shell .content > .container-fluid .row > .col-sm-10, .douglas-shell .content > .container-fluid .row > .col-md-10, .douglas-shell .content > .container-fluid .row > .col-lg-10, .douglas-shell .content > .container-fluid .row > .col-xl-10, .douglas-shell .content > .container-fluid .row > .col-xxl-10 { flex: 0 0 auto !important; width: 83.33333333% !important; max-width: 83.33333333% !important; } .douglas-shell .content > .container-fluid .row > .col-sm-11, .douglas-shell .content > .container-fluid .row > .col-md-11, .douglas-shell .content > .container-fluid .row > .col-lg-11, .douglas-shell .content > .container-fluid .row > .col-xl-11, .douglas-shell .content > .container-fluid .row > .col-xxl-11 { flex: 0 0 auto !important; width: 91.66666667% !important; max-width: 91.66666667% !important; } .douglas-shell .content > .container-fluid .row > .col-sm-12, .douglas-shell .content > .container-fluid .row > .col-md-12, .douglas-shell .content > .container-fluid .row > .col-lg-12, .douglas-shell .content > .container-fluid .row > .col-xl-12, .douglas-shell .content > .container-fluid .row > .col-xxl-12 { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .douglas-shell .content > .container-fluid .row > .col-sm, .douglas-shell .content > .container-fluid .row > .col-md, .douglas-shell .content > .container-fluid .row > .col-lg, .douglas-shell .content > .container-fluid .row > .col-xl, .douglas-shell .content > .container-fluid .row > .col-xxl { flex: 1 0 0% !important; width: auto !important; max-width: none !important; } .douglas-shell .content > .container-fluid nav[role="tablist"], .douglas-shell .content > .container-fluid .nav-tabs, .douglas-shell .content > .container-fluid .nav-pills { display: flex !important; flex-wrap: nowrap !important; overflow-x: visible; } .douglas-shell #admin-dashboard-insights #admin-dashboard-portfolio-panel .asthron-grid-lock-3-compact { grid-template-columns: repeat(3, minmax(12rem, 1fr)) !important; } .douglas-shell #admin-dashboard-insights #admin-dashboard-portfolio-panel .asthron-grid-lock-2-compact { grid-template-columns: repeat(2, minmax(11rem, 1fr)) !important; } .douglas-shell #admin-dashboard-insights .summary-tile.hero-stat { min-height: 6.4rem; padding: .95rem !important; } .douglas-shell #admin-dashboard-insights .summary-tile.hero-stat h3 { font-size: 1.55rem !important; } .douglas-shell #admin-dashboard-insights .summary-tile.hero-stat h4 { font-size: 1.25rem !important; } .douglas-shell #admin-dashboard-insights .summary-tile.hero-stat h6, .douglas-shell #admin-dashboard-insights .summary-tile.hero-stat .text-muted { font-size: .72rem !important; line-height: 1.24; } .douglas-shell .manual-guide-hero-row .dashboard-section-card > .card-body, .douglas-shell .manual-guide-card > .card-body, .douglas-shell .manual-guide-index > .card-body { padding: .9rem !important; } .douglas-shell .manual-guide-card > .card-header { padding: .8rem .9rem !important; } .douglas-shell .manual-guide-section { padding: .75rem; border-radius: 14px; } .douglas-shell .manual-guide-section h5, .douglas-shell .manual-guide-section h6 { margin-bottom: .4rem !important; } .douglas-shell .manual-guide-index .card-body { max-height: calc(100vh - 11rem); overflow-y: auto; } .douglas-shell .manual-guide-index .btn { min-height: 1.85rem; justify-content: flex-start; padding: .28rem .58rem; } .douglas-shell .wishlist-filter-form > .row { display: grid !important; grid-template-columns: minmax(180px, 1.45fr) repeat(6, minmax(116px, 1fr)) auto; gap: .65rem !important; align-items: end; margin-right: 0 !important; margin-left: 0 !important; } .douglas-shell .wishlist-filter-form > .row > * { width: auto !important; max-width: none !important; min-width: 0 !important; padding-right: 0 !important; padding-left: 0 !important; } .douglas-shell .wishlist-filter-form .d-flex { flex-wrap: nowrap !important; } .douglas-shell .wishlist-filter-form .btn { min-width: 4.25rem; } } /* ========================================================= Mobile compact typography policy Squeeze protected admin/client pages toward a desktop-dashboard density. ========================================================= */ @media (max-width: 991.98px) { .douglas-shell { font-size: .88rem; --asth-font-size-xs: .66rem; --asth-font-size-sm: .76rem; --asth-font-size-md: .88rem; --asth-font-size-lg: .98rem; --asth-font-size-xl: 1.2rem; } .douglas-shell h1, .douglas-shell .h1, .douglas-shell .display-6 { font-size: 1.45rem !important; line-height: 1.08; } .douglas-shell h2, .douglas-shell .h2 { font-size: 1.25rem !important; line-height: 1.1; } .douglas-shell h3, .douglas-shell .h3 { font-size: 1.08rem !important; line-height: 1.12; } .douglas-shell h4, .douglas-shell h5, .douglas-shell h6, .douglas-shell .h4, .douglas-shell .h5, .douglas-shell .h6, .douglas-shell .card-title { font-size: .95rem !important; line-height: 1.16; } .douglas-shell .page-title { font-size: 1.2rem !important; line-height: 1.12; } .douglas-shell p, .douglas-shell li, .douglas-shell .text-muted, .douglas-shell .small, .douglas-shell small, .douglas-shell .form-text, .douglas-shell .table td, .douglas-shell .table th, .douglas-shell .dropdown-item { font-size: .78rem !important; line-height: 1.35; } .douglas-shell .form-label, .douglas-shell .dashboard-muted-label, .douglas-shell .side-nav-title { font-size: .66rem !important; line-height: 1.15; } .douglas-shell .badge, .douglas-shell .fs-xxs { font-size: .64rem !important; line-height: 1.15; } .douglas-shell .btn { font-size: .76rem !important; line-height: 1.15; min-height: 2.05rem; } .douglas-shell .btn-sm { font-size: .7rem !important; min-height: 1.8rem; } .douglas-shell .btn-primary { align-items: center !important; justify-content: center !important; min-height: 2.05rem; line-height: 1.15; } .douglas-shell .btn-primary.btn-sm { min-height: 1.8rem; } .douglas-shell .form-control, .douglas-shell .form-select { font-size: .82rem !important; } } @media (max-width: 767.98px) { .douglas-shell { font-size: .84rem; --asth-font-size-xs: .62rem; --asth-font-size-sm: .72rem; --asth-font-size-md: .84rem; --asth-font-size-lg: .92rem; --asth-font-size-xl: 1.05rem; } .douglas-shell h1, .douglas-shell .h1, .douglas-shell .display-6 { font-size: 1.22rem !important; } .douglas-shell h2, .douglas-shell .h2 { font-size: 1.08rem !important; } .douglas-shell h3, .douglas-shell .h3 { font-size: .98rem !important; } .douglas-shell h4, .douglas-shell h5, .douglas-shell h6, .douglas-shell .h4, .douglas-shell .h5, .douglas-shell .h6, .douglas-shell .card-title { font-size: .9rem !important; } .douglas-shell .page-title { font-size: 1.05rem !important; } .douglas-shell p, .douglas-shell li, .douglas-shell .text-muted, .douglas-shell .small, .douglas-shell small, .douglas-shell .form-text, .douglas-shell .table td, .douglas-shell .table th, .douglas-shell .dropdown-item { font-size: .74rem !important; line-height: 1.3; } .douglas-shell .form-label, .douglas-shell .dashboard-muted-label, .douglas-shell .side-nav-title { font-size: .62rem !important; } .douglas-shell .badge, .douglas-shell .fs-xxs { font-size: .6rem !important; } .douglas-shell .badge { padding: .22rem .48rem; line-height: 1.15; } .douglas-shell .btn { font-size: .72rem !important; min-height: 1.95rem; } .douglas-shell .btn-sm { font-size: .66rem !important; min-height: 1.72rem; } .douglas-shell .btn-primary { min-height: 1.95rem; } .douglas-shell .btn-primary.btn-sm { min-height: 1.72rem; } .douglas-shell .form-control, .douglas-shell .form-select { font-size: .78rem !important; } } @media (max-width: 575.98px) { .douglas-shell p, .douglas-shell li, .douglas-shell .text-muted, .douglas-shell .small, .douglas-shell small, .douglas-shell .form-text, .douglas-shell .table td, .douglas-shell .table th, .douglas-shell .dropdown-item { font-size: .7rem !important; } .douglas-shell .form-label, .douglas-shell .dashboard-muted-label, .douglas-shell .side-nav-title { font-size: .58rem !important; } .douglas-shell .badge, .douglas-shell .fs-xxs { font-size: .58rem !important; } .douglas-shell .badge { padding: .2rem .44rem; line-height: 1.15; } .douglas-shell .asthron-tab, .douglas-shell .nav-tabs .nav-link, .douglas-shell .nav-pills .nav-link { font-size: .68rem !important; } .douglas-shell .topbar-link, .douglas-shell .side-nav-link { font-size: .72rem !important; } .douglas-shell .form-control, .douglas-shell .form-select { font-size: .78rem !important; } } /* ========================================================= Mobile responsive grid policy Keep metric/card groups visible inside the viewport with controlled wrapping. ========================================================= */ @media (max-width: 767.98px) { .douglas-shell .dashboard-section-card > .card-body { overflow-x: visible; overflow-y: visible; } .douglas-shell .asthron-lock-grid.row { display: grid !important; gap: .65rem !important; width: 100% !important; max-width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; align-items: stretch; justify-items: stretch; overflow-x: visible !important; overflow-y: visible; padding-bottom: 0; } .douglas-shell .asthron-lock-grid.row > * { display: flex; align-items: stretch; width: auto !important; max-width: none !important; min-width: 0 !important; flex: initial !important; padding-right: 0 !important; padding-left: 0 !important; } .douglas-shell .content > .container-fluid .asthron-lock-grid.row > [class*="col-"] { display: flex !important; align-items: stretch !important; justify-self: stretch !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: initial !important; padding-right: 0 !important; padding-left: 0 !important; } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-2-compact { grid-template-columns: repeat(2, minmax(10rem, 1fr)) !important; } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-3, .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-3-compact { grid-template-columns: repeat(3, minmax(9.5rem, 1fr)) !important; } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-4 { grid-template-columns: repeat(4, minmax(10rem, 1fr)) !important; } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-5 { grid-template-columns: repeat(5, minmax(9rem, 1fr)) !important; } .douglas-shell .asthron-lock-grid.row.asthron-grid-lock-6 { grid-template-columns: repeat(6, minmax(8.5rem, 1fr)) !important; } .douglas-shell .asthron-lock-grid .hero-stat, .douglas-shell .asthron-lock-grid .summary-tile { flex: 1 1 auto; width: 100% !important; height: 100%; min-width: 0 !important; padding: .85rem !important; border-radius: 14px; } .douglas-shell .asthron-lock-grid .dashboard-muted-label { font-size: .62rem; line-height: 1.1; letter-spacing: .045em; } .douglas-shell .asthron-lock-grid h2, .douglas-shell .asthron-lock-grid h3, .douglas-shell .asthron-lock-grid h4 { font-size: clamp(.95rem, 4vw, 1.25rem) !important; line-height: 1.05; } .douglas-shell .asthron-lock-grid p, .douglas-shell .asthron-lock-grid .text-muted { font-size: .68rem !important; line-height: 1.25; } .douglas-shell .asthron-lock-grid :is(h2, h3, h4, p, .text-muted, .dashboard-muted-label) { word-break: normal !important; overflow-wrap: normal !important; hyphens: none; } .douglas-shell .asthron-lock-grid.row[data-tour="client.addons.catalog"], .douglas-shell .asthron-lock-grid.row[data-tour="admin.addons.catalog"] { grid-template-columns: repeat(auto-fit, minmax(270px, 320px)) !important; justify-content: center !important; justify-items: center; } .douglas-shell .asthron-lock-grid.row[data-tour="client.pricing.catalog"], .douglas-shell .asthron-lock-grid.row[data-tour="admin.pricing.catalog"] { grid-template-columns: repeat(auto-fit, minmax(320px, 382px)) !important; justify-content: center !important; justify-items: center; } .douglas-shell #admin-dashboard-insights #admin-dashboard-portfolio-panel .asthron-grid-lock-3-compact { grid-template-columns: repeat(3, minmax(12rem, 1fr)) !important; } .douglas-shell #admin-dashboard-insights #admin-dashboard-portfolio-panel > .row > .col-xl-7, .douglas-shell #admin-dashboard-insights #admin-dashboard-portfolio-panel > .row > .col-xl-5 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } .douglas-shell #admin-dashboard-insights #admin-dashboard-portfolio-panel .asthron-grid-lock-3-compact .summary-tile.hero-stat { align-items: flex-start; justify-content: center; min-height: 6.4rem; padding: .9rem 1rem !important; text-align: left; } .douglas-shell #admin-dashboard-insights #admin-dashboard-portfolio-panel .asthron-grid-lock-2-compact { grid-template-columns: repeat(2, minmax(11rem, 1fr)) !important; } } @media (max-width: 575.98px) { .douglas-shell nav[role="tablist"], .douglas-shell .nav-tabs, .douglas-shell .nav-pills { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: .45rem; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .douglas-shell .asthron-tab, .douglas-shell .nav-tabs .nav-link, .douglas-shell .nav-pills .nav-link { flex: 0 0 auto !important; min-width: 0; padding-right: .75rem; padding-left: .75rem; } .douglas-shell .asthron-lock-grid.row { gap: .55rem !important; } }