/* File: Defines global backend and public UI styling for Getly. */
/* ==========================================================================
   GETLY UI SYSTEM
   --------------------------------------------------------------------------
   Alle globalen Designwerte stehen hier: Farben, Typografie, Radien,
   Schatten, Abstaende und Bewegungen. Komponenten verwenden nur diese Tokens.
   ========================================================================== */

:root {
    /* Colors: brand */
    --color-brand: #00305d;
    --color-brand-bright: #1F6994;
    --color-brand-blue: #2897c4;
    --color-brand-blue-light: #63b9e6;
    --color-accent: #FF9900;
    --color-accent-strong: #FF6600;
    --color-accent-soft: color-mix(in srgb, var(--color-accent) 12%, white);

    /* Colors: neutrals */
    --color-page: #f5f7fa;
    --color-white: #ffffff;
    --color-surface: #ffffff;
    --color-surface-muted: #f7f9fb;
    --color-border: #dfe5eb;

    /* Colors: text */
    --color-text-strong: var(--color-brand);
    --color-text: color-mix(in srgb, var(--color-brand) 85%, white);
    --color-text-muted: color-mix(in srgb, var(--color-brand) 65%, white);
    --color-text-inverse: #ffffff;

    /* Colors: states */
    --color-success: #1d7a45;
    --color-success-soft: #eaf7ef;
    --color-info: #0b5f9f;
    --color-info-soft: #e8f3fb;
    --color-warning: #f59e0b;
    --color-warning-soft: #fff7e6;
    --color-danger: #9f2f3d;
    --color-danger-soft: #fff0f2;
    --color-neutral: #687586;
    --color-neutral-soft: #f1f3f5;

    /* Colors: interactive */
    --color-focus-border: var(--color-brand);
    --color-focus-ring: rgba(0, 48, 93, 0.14);
    --color-overlay-light: rgba(255, 255, 255, 0.96);
    --color-overlay-surface: rgba(255, 255, 255, 0.94);
    --color-overlay-surface-strong: rgba(255, 255, 255, 0.98);
    --color-overlay-asset: rgba(255, 255, 255, 0.88);
    --color-overlay-drag: rgba(248, 247, 245, 0.94);
    --color-shadow-soft: rgba(15, 23, 42, 0.04);
    --color-shadow: rgba(15, 23, 42, 0.08);
    --color-shadow-strong: rgba(15, 23, 42, 0.12);
    --color-shadow-inset: rgba(24, 38, 55, 0.14);
    --color-accent-shadow: rgba(244, 124, 0, 0.22);
    --color-overlay-dark: rgba(15, 23, 42, 0.52);

    /* Gradients */
    --gradient-accent: linear-gradient(90deg, var(--color-accent), var(--color-accent-strong));
    --gradient-accent-reverse: linear-gradient(90deg, var(--color-accent-strong), var(--color-accent));
    --gradient-brand-horizontal: linear-gradient(90deg, var(--color-brand), var(--color-brand-bright));

    /* Typography */
    --font-family-base: "Open Sans", Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-size-xs: 0.78rem;
    --font-size-sm: 0.88rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.35rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 2.8rem;
    --line-height-base: 1.5;
    --font-weight-regular: 400;
    --font-weight-medium: 600;
    --font-weight-semibold: 700;
    --font-weight-bold: 800;
    --letter-spacing-label: 0.08em;

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 4px;
    --radius-md: 5px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px var(--color-shadow-soft);
    --shadow-md: 0 10px 26px var(--color-shadow);
    --shadow-lg: 0 18px 42px var(--color-shadow-strong);
    --shadow-sidebar: 10px 0 32px var(--color-shadow);
    --shadow-dropdown-dark: 0 12px 24px rgba(0, 0, 0, 0.18);
    --shadow-inset-soft: inset 0 1px 2px var(--color-shadow-inset);
    --shadow-inset-focus: inset 0 0 0 3px var(--color-shadow-soft);
    --shadow-accent: 0 10px 22px var(--color-accent-shadow);

    /* Spacing and sizing */
    --container-max: 1440px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --control-height-sm: 32px;
    --control-height: 36px;
    --control-height-lg: 40px;
    --table-cell-padding-x: 0.94rem;
    --table-head-padding-y: var(--space-2);
    --table-cell-padding-y: var(--space-3);
    --table-row-min-height: 3.5rem;
    --table-icon-column-width: 3.5rem;
    --table-indicator-column-width: 3.25rem;
    --table-actions-column-width: 4.75rem;
    --table-jump-column-width: 2.75rem;
    --table-count-column-width: 7.25rem;
    --table-date-column-width: 9.75rem;
    --table-compact-date-column-width: 8.75rem;
    --table-badge-width-3-5: 3.5rem;
    --table-badge-width-4: 4rem;
    --table-badge-width-4-5: 4.5rem;
    --table-badge-width-5: 5rem;
    --table-badge-width-5-5: 5.5rem;
    --table-badge-width-6: 6rem;
    --table-badge-width-6-5: 6.5rem;
    --table-badge-width-7: 7rem;
    --table-badge-width-7-5: 7.5rem;
    --table-badge-width-8: 8rem;
    --table-badge-width-8-5: 8.5rem;
    --table-badge-width-9: 9rem;
    --table-badge-width-9-5: 9.5rem;
    --table-badge-width-10: 10rem;
    --table-badge-width-10-5: 10.5rem;
    --table-badge-width-11: 11rem;
    --table-badge-width-11-5: 11.5rem;
    --table-badge-width-14: 14rem;
    --table-badge-width-14-5: 14.5rem;
    --table-badge-width-16: 16rem;
    --table-badge-width-17: 17rem;
    --table-badge-width-18: 18rem;
    --table-status-badge-width: var(--table-badge-width-8-5);
    --table-type-badge-width: var(--table-badge-width-6);
    --nav-height: 72px;
    --z-statusbar: 1030;
    --z-sidebar: 1050;
    --z-dropdown: 1050;
    --z-dropdown-raised: 1060;
    --z-dropdown-overlay: 3000;
    --z-dropdown-parent: 2500;
    --z-toast: 1080;
    --z-sticky-toolbar: 1020;
    --z-mobile-backdrop: 3990;
    --z-mobile-sidebar: 4000;

    /* Motion */
    --transition-fast: 0.16s ease;

    /*
     * Breakpoints are fixed project-wide and must not be replaced by
     * component-specific viewport values:
     * phone <480, mobile >=480, tablet >=768, compact >=1024, notebook >=1366,
     * desktop >=1536, wide >=1920, ultra >=2560, cinema >=3840.
     */

    /* Public page fallback colors */
    --web-fallback-background-from: #FFFFFF;
    --web-fallback-background-to: #F3F4F6;
    --web-fallback-title: #111827;
    --web-fallback-body: #374151;
    --web-fallback-tile-border: #E5E7EB;
    --web-fallback-button: #4F46E5;
    --web-fallback-footer: #9CA3AF;
    --web-fallback-footer-link: #6B7280;
    --web-fallback-badge: #025C42;
}

/* ==========================================================================
   BASE
   ========================================================================== */

html,
body {
    min-height: 100%;
}

body.app-body {
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-main {
    flex: 1 0 auto;
    padding-top: 3rem !important;
}

.app-backend-body:has(.app-backend-shell) {
    overflow-x: hidden;
}

.app-backend-body:has(.app-backend-shell) .app-legacy-footer {
    display: none;
}

.app-has-backend-shell .app-legacy-footer {
    display: none;
}

.app-container {
    max-width: var(--container-max);
}

.text-secondary {
    color: var(--color-text-muted) !important;
}

.fw-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

/* ==========================================================================
   BACKEND REDESIGN SHELL
   ========================================================================== */

.app-backend-shell {
    --sidebar-width: 280px;
    --statusbar-height: 72px;
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    background: var(--color-page);
}

.app-sidebar {
    --sidebar-text: rgba(255, 255, 255, 0.76);
    --sidebar-text-strong: rgba(255, 255, 255, 0.84);
    --sidebar-text-soft: rgba(255, 255, 255, 0.78);
    --sidebar-text-muted: rgba(255, 255, 255, 0.58);
    --sidebar-text-faint: rgba(255, 255, 255, 0.34);
    --sidebar-control-border: rgba(255, 255, 255, 0.18);
    --sidebar-dropdown-border: rgba(255, 255, 255, 0.14);
    --sidebar-control-bg: rgba(255, 255, 255, 0.06);
    --sidebar-control-bg-hover: rgba(255, 255, 255, 0.1);
    --sidebar-hover-bg: rgba(99, 185, 230, 0.14);
    --sidebar-object-bg: rgba(99, 185, 230, 0.2);
    --sidebar-object-bg-hover: rgba(99, 185, 230, 0.28);
    --sidebar-line: rgba(255, 255, 255, 0.11);
    --sidebar-search-cancel-bg: rgba(255, 255, 255, 0.82);
    --sidebar-client-list-bg: rgba(0, 48, 93, 0.92);
    position: sticky;
    top: 0;
    z-index: var(--z-sidebar);
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 2.2rem 1rem 1.35rem;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--color-brand) 0%, var(--color-brand-bright) 100%);
    color: var(--sidebar-text);
    font-family: var(--font-family-base);
    box-shadow: var(--shadow-sidebar);
}

.app-backend-shell.is-platform-mode .app-sidebar {
    background: linear-gradient(180deg, var(--color-brand) 0%, var(--color-brand-bright) 100%);
}

.app-sidebar-head {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.app-sidebar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.app-sidebar-logo {
    width: 142px;
    max-width: 100%;
    height: auto;
    display: block;
}

.app-sidebar-close,
.app-mobile-menu-button,
.app-mobile-search-button,
.app-notification-button,
.app-user-button {
    border: 0;
    background: transparent;
}

.app-sidebar-close {
    display: none;
    position: absolute;
    right: 1rem;
    width: 40px;
    height: 40px;
    color: var(--sidebar-text-strong);
    font-size: var(--font-size-xl);
    line-height: 1;
}

.app-sidebar-nav,
.app-sidebar-mode-switch,
.app-sidebar-tenant-jump,
.app-sidebar-support {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.app-sidebar-mode-switch,
.app-sidebar-tenant-jump,
.app-sidebar-support {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sidebar-line);
}

.app-sidebar-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-lg);
    color: var(--sidebar-text-soft);
    text-decoration: none;
    font-weight: var(--font-weight-regular);
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.app-sidebar-link:hover,
.app-sidebar-link:focus,
.app-sidebar-link.is-active {
    color: var(--color-text-inverse);
    background: var(--sidebar-hover-bg);
}

.app-sidebar-link.is-active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-brand-blue) 32%, transparent), color-mix(in srgb, var(--color-brand-blue-light) 18%, transparent));
    box-shadow: inset 2px 0 0 var(--color-brand-blue-light);
}

.app-sidebar-link-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    flex: 0 0 auto;
    color: currentColor;
}

.app-sidebar-link-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-sidebar-link-title,
.app-sidebar-link-subtitle {
    display: block;
}

.app-sidebar-link-subtitle {
    margin-top: 0.1rem;
    color: var(--sidebar-text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.35;
}

.app-sidebar-link:hover .app-sidebar-link-subtitle,
.app-sidebar-link:focus .app-sidebar-link-subtitle {
    color: var(--sidebar-text-soft);
}

.app-sidebar-subnav {
    display: flex;
    flex-direction: column;
    gap: 0.24rem;
    margin: 0.3rem 0 0.6rem;
    padding-left: 2rem;
}

.app-sidebar-object-link,
.app-sidebar-subnav-link {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0.42rem 0.7rem;
    border-radius: var(--radius-md);
    color: var(--sidebar-text-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    text-decoration: none;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.app-sidebar-object-link {
    margin-bottom: 0.2rem;
    color: var(--color-text-inverse);
    background: var(--sidebar-object-bg);
    box-shadow: inset 2px 0 0 var(--color-brand-blue);
}

.app-sidebar-object-link:hover,
.app-sidebar-object-link:focus,
.app-sidebar-object-link.is-active {
    color: var(--color-text-inverse);
    background: var(--sidebar-object-bg-hover);
}

.app-sidebar-subnav-link {
    color: var(--sidebar-text);
    margin-left: 0.9rem;
}

.app-sidebar-subnav-link:hover,
.app-sidebar-subnav-link:focus,
.app-sidebar-subnav-link.is-active {
    color: var(--color-brand-blue-light);
}

.app-sidebar-subnav-link.is-disabled {
    cursor: default;
    color: var(--sidebar-text-faint);
}

.app-sidebar-spacer {
    flex: 1 1 auto;
    min-height: 2rem;
}

.app-sidebar-small-label {
    margin-bottom: 0.55rem;
    color: var(--sidebar-text-strong);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    text-transform: none;
}

.app-sidebar-client-combobox {
    position: relative;
}

.app-sidebar-client-search {
    width: 100%;
    min-height: 42px;
    padding: 0 0.75rem;
    border: 1px solid var(--sidebar-control-border);
    border-radius: var(--radius-lg);
    background: var(--sidebar-control-bg);
    color: var(--color-text-inverse);
    outline: none;
}

.app-sidebar-client-search::placeholder {
    color: var(--sidebar-text-muted);
}

.app-sidebar-client-search:focus {
    border-color: color-mix(in srgb, var(--color-brand-blue-light) 58%, transparent);
    background: var(--sidebar-control-bg-hover);
}

.app-sidebar-client-list {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
    left: 0;
    z-index: 3;
    width: 100%;
    max-height: min(320px, 48vh);
    overflow-y: auto;
    border: 1px solid var(--sidebar-dropdown-border);
    border-radius: var(--radius-lg);
    background: var(--sidebar-client-list-bg);
    box-shadow: var(--shadow-dropdown-dark);
}

.app-sidebar-client-search::-webkit-search-cancel-button {
    width: 18px;
    height: 18px;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--sidebar-search-cancel-bg);
    cursor: pointer;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.2 5.2 14.8 14.8M14.8 5.2 5.2 14.8' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.2 5.2 14.8 14.8M14.8 5.2 5.2 14.8' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.app-sidebar-client-search::-webkit-search-cancel-button:hover {
    background-color: var(--color-text-inverse);
}

.app-sidebar-tenant-jump.is-open .app-sidebar-client-list {
    display: block;
}

.app-sidebar-client-option {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 0;
    background: transparent;
    color: var(--sidebar-text-soft);
    font: inherit;
    text-align: left;
}

.app-sidebar-client-option:hover,
.app-sidebar-client-option:focus {
    background: var(--sidebar-hover-bg);
    color: var(--color-text-inverse);
}

.app-sidebar-client-option svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.app-sidebar-client-empty {
    display: none;
    padding: 0.75rem;
    color: var(--sidebar-text-muted);
    font-size: var(--font-size-sm);
}

.app-sidebar-tenant-jump.is-empty .app-sidebar-client-empty {
    display: block;
}

.app-sidebar-footer {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sidebar-line);
    color: var(--sidebar-text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

.app-sidebar-version {
    margin-bottom: 0.65rem;
}

.app-sidebar-footer-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.6rem;
}

.app-sidebar-footer a {
    color: inherit;
    text-decoration: none;
}

.app-sidebar-footer a:hover {
    color: var(--color-text-inverse);
}

.app-backend-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-statusbar {
    position: sticky;
    top: 0;
    z-index: var(--z-statusbar);
    min-height: var(--statusbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 2rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-overlay-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.app-statusbar-left,
.app-statusbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.app-statusbar-actions {
    margin-left: auto;
}

@media (min-width: 1024px) {
    .app-statusbar-actions {
        gap: var(--space-5);
    }
}

.app-viewport-debug {
    flex: 0 0 auto;
    padding: 0.32rem 0.58rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-brand);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.app-mobile-menu-button {
    width: 42px;
    height: 42px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--color-brand);
}

.app-mobile-menu-button span {
    width: 20px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.app-mobile-search-button {
    width: 42px;
    height: 42px;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
    text-decoration: none;
}

.app-mobile-search-button svg {
    width: 23px;
    height: 23px;
}

.app-client-switcher,
.app-client-context {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-weight: var(--font-weight-regular);
}

.app-client-context-switcher {
    width: min(260px, 34vw);
    padding: 0;
}

.app-client-switcher select {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: none;
}

.app-client-switcher-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    color: var(--color-brand);
}

.app-client-favicon {
    width: 22px;
    height: 22px;
    display: block;
    flex: 0 0 auto;
    border-radius: var(--radius-xs);
    object-fit: cover;
}

.app-client-switcher-icon svg {
    width: 100%;
    height: 100%;
}

.app-client-context-trigger,
.app-client-context-search-wrap {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.8rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

.app-client-context-search-toggle {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.app-client-context-trigger {
    cursor: pointer;
}

.app-client-context-trigger:hover,
.app-client-context-trigger:focus {
    color: var(--color-text-strong);
}

.app-client-context-current {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-client-context-search-wrap {
    display: none;
}

.app-client-context-switcher.is-open .app-client-context-trigger {
    display: none;
}

.app-client-context-switcher.is-open .app-client-context-search-wrap {
    display: flex;
}

.app-client-context-search {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-strong);
    font: inherit;
    outline: none;
}

.app-client-context-search::placeholder {
    color: var(--color-brand);
}

.app-client-context-search::-webkit-search-cancel-button {
    width: 16px;
    height: 16px;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-text-muted);
    cursor: pointer;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.2 5.2 14.8 14.8M14.8 5.2 5.2 14.8' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.2 5.2 14.8 14.8M14.8 5.2 5.2 14.8' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}

.app-client-context-search::-webkit-search-cancel-button:hover {
    background-color: var(--color-text);
}

.app-client-context-list {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: var(--z-dropdown-raised);
    width: min(320px, 80vw);
    max-height: min(360px, 62vh);
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.app-client-context-switcher.is-open .app-client-context-list {
    display: block;
}

.app-client-context-option {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
}

.app-client-context-option:hover,
.app-client-context-option:focus,
.app-client-context-option.is-current {
    background: var(--color-surface-muted);
    color: var(--color-text-strong);
}

.app-client-context-option-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-brand-blue);
}

.app-client-context-option-icon svg {
    width: 100%;
    height: 100%;
}

.app-client-context-empty {
    display: none;
    padding: 0.7rem 0.65rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.app-client-context-switcher.is-empty .app-client-context-empty {
    display: block;
}

.app-client-context-chevron {
    width: 18px;
    height: 18px;
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

.app-client-context-chevron svg {
    width: 100%;
    height: 100%;
}

.app-global-search {
    width: clamp(10rem, 28vw, 320px);
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.app-global-search span {
    width: 20px;
    height: 20px;
    display: inline-flex;
}

.app-global-search svg {
    width: 100%;
    height: 100%;
}

.app-global-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--color-text);
    outline: none;
}

.app-notification-button {
    position: relative;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
}

.app-notification-center {
    position: relative;
}

.app-notification-count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-surface);
    border-radius: 999px;
    background: var(--color-brand-blue);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    line-height: 1;
}

.app-notification-button svg {
    width: 24px;
    height: 24px;
}

.app-notification-popover {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown-overlay);
    width: min(360px, calc(100vw - var(--space-6)));
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.app-statusbar:has(.app-notification-popover:not([hidden])) {
    z-index: var(--z-dropdown-overlay);
}

.app-notification-popover-header {
    padding: var(--space-2) var(--space-2) var(--space-4);
    color: var(--color-text-strong);
}

.app-notification-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.app-notification-item {
    --notification-item-color: var(--color-info);
    --notification-item-bg: var(--color-info-soft);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
    padding: var(--space-3);
    border-left: 4px solid var(--notification-item-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--notification-item-bg) 38%, var(--color-surface));
    color: var(--color-text);
}

.app-notification-item--success {
    --notification-item-color: var(--color-success);
    --notification-item-bg: var(--color-success-soft);
}

.app-notification-item--info {
    --notification-item-color: var(--color-info);
    --notification-item-bg: var(--color-info-soft);
}

.app-notification-item--warning {
    --notification-item-color: var(--color-warning);
    --notification-item-bg: var(--color-warning-soft);
}

.app-notification-item--error {
    --notification-item-color: var(--color-danger);
    --notification-item-bg: var(--color-danger-soft);
}

.app-notification-item > div:first-child {
    min-width: 0;
}

.app-notification-item:hover {
    background: color-mix(in srgb, var(--notification-item-bg) 72%, var(--color-surface));
}

.app-notification-item-title {
    display: block;
    color: var(--color-text-strong);
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
}

.app-notification-item-body {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
}

.app-notification-item-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    margin-top: var(--space-2);
    color: var(--notification-item-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.app-notification-item-link:hover {
    color: var(--notification-item-color);
}

.app-notification-item-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-notification-item-link svg {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
}

.app-notification-item-actions {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-1);
}

.app-notification-link,
.app-notification-archive {
    width: 30px;
    height: 30px;
}

.app-notification-detail-preview {
    max-width: 360px;
}

.app-notification-detail-preview .app-notification-item {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--notification-item-color);
    background: color-mix(in srgb, var(--notification-item-bg) 38%, var(--color-surface));
}

.app-notification-detail-preview .app-notification-archive:disabled {
    opacity: 1;
}

.app-notification-empty {
    padding: var(--space-4) var(--space-2);
    color: var(--color-text-muted);
}

.app-user-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.35rem 0 0.6rem;
    border-radius: var(--radius-lg);
    color: var(--color-text-strong);
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.app-user-button:hover,
.app-user-button:focus {
    background: var(--color-surface-muted);
    outline: 0;
    box-shadow: none;
}

.app-user-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.app-user-name {
    font-weight: var(--font-weight-medium);
}

.app-user-role {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.app-user-mobile-icon {
    width: 22px;
    height: 22px;
    display: none;
    color: var(--color-brand);
}

.app-user-mobile-icon svg {
    width: 100%;
    height: 100%;
}

.app-user-chevron {
    width: 18px;
    height: 18px;
    display: inline-flex;
    color: var(--color-text-muted);
}

.app-user-chevron svg {
    width: 100%;
    height: 100%;
}

.app-toast-stack {
    position: fixed;
    top: calc(var(--statusbar-height) + 1rem);
    right: 1.5rem;
    z-index: var(--z-toast);
    width: min(360px, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.app-toast-stack:empty {
    display: none;
}

.app-toast {
    --toast-color: var(--color-brand-blue);
    position: relative;
    min-height: 72px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 28px;
    gap: 0.75rem;
    align-items: start;
    padding: 0.95rem 0.95rem 0.85rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-overlay-surface-strong);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

.app-toast.is-hiding {
    opacity: 0;
    transform: translateY(-0.4rem);
}

.app-toast-success {
    --toast-color: var(--color-success);
}

.app-toast-info {
    --toast-color: var(--color-info);
}

.app-toast-warning {
    --toast-color: var(--color-warning);
}

.app-toast-error {
    --toast-color: var(--color-danger);
}

.app-toast-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--toast-color) 14%, transparent);
    color: var(--toast-color);
}

.app-toast-icon svg {
    width: 21px;
    height: 21px;
}

.app-toast-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.app-toast-copy strong {
    color: var(--color-text-strong);
    font-weight: var(--font-weight-semibold);
}

.app-toast-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
}

.app-toast-close:hover,
.app-toast-close:focus {
    background: var(--color-surface-muted);
    color: var(--color-text-strong);
}

.app-toast-close svg {
    width: 18px;
    height: 18px;
}

.app-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--toast-color);
    transform-origin: left center;
    animation: app-toast-progress 4.8s linear forwards;
}

@keyframes app-toast-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

.app-content {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    padding: 2rem !important;
}

.app-page-title-row {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.app-page-title-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    border-radius: var(--radius-lg);
    background: var(--gradient-brand-horizontal);
    color: var(--color-text-inverse);
}

.app-page-title-icon svg {
    width: 23px;
    height: 23px;
}

.app-platform-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.app-overview-stat-card {
    position: relative;
    min-height: 9.5rem;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 24px;
    grid-template-rows: 42px auto auto;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-items: start;
    padding: var(--space-5);
    color: inherit;
    text-decoration: none;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.app-overview-stat-card:hover,
.app-overview-stat-card:focus {
    border-color: color-mix(in srgb, var(--color-brand-blue) 42%, var(--color-border));
    color: inherit;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.app-overview-stat-card.is-disabled {
    cursor: default;
    opacity: 0.55;
}

.app-overview-stat-card.is-disabled:hover,
.app-overview-stat-card.is-disabled:focus {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
    transform: none;
}

.app-overview-stat-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    grid-row: 1;
    grid-column: 1;
}

.app-overview-stat-icon svg {
    width: 24px;
    height: 24px;
}

.app-overview-stat-label,
.app-overview-stat-meta {
    color: var(--color-text-muted);
}

.app-overview-stat-label {
    grid-column: 2;
    align-self: center;
    color: var(--color-text-strong);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.app-overview-stat-value {
    grid-column: 2 / 4;
    color: var(--color-text-strong);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
}

.app-overview-stat-meta {
    grid-column: 2 / 4;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

.app-overview-stat-badges {
    grid-column: 2 / 4;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.app-overview-stat-badges .app-badge {
    min-width: 0;
    padding-right: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
}

.app-overview-stat-badges .app-badge-label {
    flex: 0 0 auto;
    margin-right: 0;
    overflow: visible;
}

.app-overview-stat-action {
    grid-column: 2 / 4;
    justify-self: end;
    margin-top: var(--space-4);
}

.app-overview-stat-arrow {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    color: var(--color-brand);
    line-height: 1;
}

.app-overview-stat-arrow svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Shared gradient icon base for dashboard, detail and process modules. */
.app-overview-stat-icon,
.app-dashboard-stat-icon,
.app-process-title-icon,
.app-process-card-icon,
.app-detail-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--gradient-brand-horizontal);
    color: var(--color-text-inverse);
}

.app-color-swatch-inline {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--swatch-color);
    vertical-align: middle;
}

.app-client-overview-grid {
    margin-top: var(--space-5);
}

.app-client-overview-grid .app-overview-stat-card {
    min-height: 8rem;
    grid-template-rows: 42px auto;
}

.app-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.app-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height-lg);
    padding: 0 var(--space-1) var(--space-3);
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

.app-tab:hover,
.app-tab:focus {
    color: var(--color-brand);
    text-decoration: none;
}

.app-tab.is-active {
    color: var(--color-brand);
}

.app-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--color-brand);
}

/* ==========================================================================
   DETAIL CARDS
   ========================================================================== */

.app-detail-card {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: visible;
}

.app-detail-card:has(.app-detail-card-actions .dropdown-menu.show) {
    z-index: var(--z-dropdown-raised);
}

.app-detail-card-section {
    position: relative;
    padding: var(--space-6);
}

.app-detail-card-section + .app-detail-card-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--space-6);
    right: var(--space-6);
    height: 1px;
    background: var(--color-border);
}

.app-detail-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.app-detail-card-identity {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.app-detail-card-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

.app-detail-card-icon svg {
    width: 23px;
    height: 23px;
    display: block;
}

.app-detail-card-title-wrap {
    min-width: 0;
    padding-top: 0;
}

.app-detail-card-title {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

.app-detail-card-subtitle {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    line-height: 1.35;
}

.app-detail-card-status {
    flex: 0 0 auto;
    align-self: center;
    padding-top: 0;
}

.app-detail-tabs {
    min-width: 0;
}

.app-detail-accordion-list {
    display: none;
    margin-bottom: var(--space-4);
}

.app-detail-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: var(--space-2);
}

.app-detail-tab-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-detail-tab-panel {
    display: none;
}

.app-detail-tab-panel.is-active {
    display: block;
}

.app-detail-accordion-list > .app-detail-tab-panel.is-active {
    display: block;
    padding: var(--space-4) 0 var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.app-detail-accordion-toggle {
    width: 100%;
    min-height: var(--control-height-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    padding: var(--space-4) 0;
    font: inherit;
    text-align: left;
}

.app-detail-accordion-toggle.is-active {
    color: var(--color-text-strong);
    font-weight: var(--font-weight-medium);
    border-bottom-color: transparent;
}

.app-detail-accordion-toggle:hover,
.app-detail-accordion-toggle:focus-visible {
    background: var(--color-surface-muted);
    outline: 0;
}

.app-text-link {
    color: var(--color-text-strong);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.app-text-link:hover,
.app-text-link:focus {
    color: var(--color-brand-blue);
    text-decoration: none;
}

.app-inline-alert .app-text-link,
.app-inline-alert .app-text-link:hover,
.app-inline-alert .app-text-link:focus {
    color: var(--inline-alert-color);
}

.app-detail-accordion-label,
.app-detail-accordion-icon {
    display: inline-flex;
    align-items: center;
}

.app-detail-accordion-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    transition: transform var(--transition-fast);
}

.app-detail-accordion-toggle.is-active .app-detail-accordion-icon {
    transform: rotate(180deg);
}

.app-detail-accordion-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-detail-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-5) var(--space-6);
}

.app-detail-field {
    min-width: 0;
}

.app-detail-field--wide {
    grid-column: 1 / -1;
}

.app-detail-field-label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.app-detail-field-label-with-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.app-source-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: 0.08rem var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: 1;
    white-space: nowrap;
}

.app-detail-field-value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--color-text-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    overflow-wrap: anywhere;
}

.app-system-check-section + .app-system-check-section {
    margin-top: var(--space-8);
}

.app-system-check-card .app-detail-card-content::before {
    display: none;
}

.app-system-check-section-title {
    margin: 0 0 var(--space-4);
    color: var(--color-text-strong);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.app-system-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5) var(--space-6);
}

.app-system-check-field {
    min-width: 0;
}

.app-system-check-field--wide {
    grid-column: 1 / -1;
}

.app-system-check-text,
.app-system-check-meta {
    white-space: pre-line;
}

.app-text-preline {
    white-space: pre-line;
}

.app-system-check-value-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 1.5rem;
    padding: 0.12rem var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.app-system-check-value-badge--ok {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.app-system-check-value-badge--warning {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.app-system-check-value-badge--error {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.app-system-check-value-badge--neutral {
    background: var(--color-neutral-soft);
    color: var(--color-neutral);
}

.app-system-check-result-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 1.5rem;
    margin-top: var(--space-2);
    padding: 0.12rem var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.1;
}

.app-system-check-result-badge--button {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.app-system-check-result-badge--button:hover,
.app-system-check-result-badge--button:focus-visible {
    filter: brightness(0.96);
}

.app-system-check-inline-action {
    margin-top: var(--space-2);
}

.app-system-check-footer-action {
    margin-top: var(--space-8);
}

.app-prose > *:last-child {
    margin-bottom: 0;
}

.app-prose h2 {
    margin: var(--space-6) 0 var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.app-prose ul {
    margin-bottom: var(--space-4);
    padding-left: 1.25rem;
}

.app-prose li + li {
    margin-top: var(--space-1);
}

.app-inline-action-button {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.12rem var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-info-soft);
    color: var(--color-info);
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.1;
    text-decoration: none;
}

.app-inline-action-button:hover,
.app-inline-action-button:focus-visible {
    background: color-mix(in srgb, var(--color-info-soft) 82%, var(--color-info));
    color: var(--color-info);
}

.app-detail-field-value-icon {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
}

.app-detail-field-value-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-detail-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.app-detail-card-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    min-width: 0;
}

.app-detail-date-item {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
}

.app-detail-date-item strong {
    color: var(--color-text);
    font-weight: var(--font-weight-regular);
}

.app-detail-date-icon {
    display: inline-flex;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.app-detail-date-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-detail-date-copy,
.app-detail-date-primary,
.app-detail-date-user {
    display: block;
}

.app-detail-date-user {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.app-detail-cover-image {
    display: block;
    max-width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.app-qr-code-layout {
    display: grid;
    gap: var(--space-6);
}

.app-qr-code-url {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.app-qr-code-url .app-detail-field-value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-qr-code-url-value .app-text-link {
    min-width: 0;
}

.app-qr-code-copy-action {
    flex: 0 0 auto;
}

.app-qr-code-controls {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--space-4);
    min-width: 0;
}

.app-qr-code-controls .app-form-field,
.app-qr-code-controls .app-form-actions {
    width: min(100%, 24rem);
}

.app-qr-code-controls .app-form-actions {
    justify-content: flex-start;
}

.app-qr-code-warning {
    width: min(100%, 24rem);
}

.app-qr-code-preview {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.app-qr-code-preview img {
    display: block;
    width: min(100%, 24rem);
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 1024px) {
    .app-qr-code-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .app-qr-code-url {
        grid-column: 1 / -1;
    }

    .app-qr-code-controls {
        justify-self: center;
    }

    .app-qr-code-preview {
        justify-content: center;
    }
}

.app-detail-card-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-left: auto;
}

.app-detail-more-menu {
    min-width: 13rem;
}

.app-detail-more-menu .dropdown-item {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height-md);
}

.app-detail-card-actions .dropdown {
    position: relative;
}

.app-detail-card-actions .dropdown-menu {
    inset: calc(100% + var(--space-2)) 0 auto auto !important;
    transform: none !important;
    z-index: var(--z-dropdown-overlay);
}

.app-dropdown-item-icon {
    display: flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
}

.app-dropdown-item-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-detail-more-menu .dropdown-item {
    line-height: 1.2;
}

@media (max-width: 767.98px) {
    .app-detail-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
    }

    .app-detail-card-status {
        display: flex;
        justify-content: flex-start;
        align-self: stretch;
        width: 100%;
        padding-top: 0;
        margin-top: 0;
        border-top: 0;
    }

    .app-detail-card-status > *,
    .app-detail-card-status .app-status-dropdown,
    .app-detail-card-status .app-badge {
        width: 100%;
        max-width: none;
    }

    .app-detail-card-status .app-badge {
        justify-content: flex-start;
    }

    .app-detail-tab-list {
        display: none;
    }

    .app-detail-card-content {
        padding-top: 0;
        padding-bottom: 0;
    }

    .app-detail-card-content::before,
    .app-detail-card-content + .app-detail-card-footer::before {
        display: none;
    }

    .app-detail-accordion-list {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        border-top: 1px solid var(--color-border);
    }

    .app-detail-field-grid {
        grid-template-columns: 1fr;
    }

    .app-detail-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .app-detail-card-dates {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .app-detail-card-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: none;
        margin-left: 0;
    }

    .app-detail-card-actions .btn,
    .app-detail-card-actions .dropdown,
    .app-detail-card-actions .dropdown > .btn {
        width: 100%;
        max-width: none;
    }

}

@media (max-width: 479.98px) {
    .app-detail-card-section {
        padding: var(--space-5);
    }

    .app-detail-card-section + .app-detail-card-section::before {
        left: var(--space-5);
        right: var(--space-5);
    }

    .app-detail-card-icon {
        display: none;
    }

    .app-detail-card-title {
        font-size: var(--font-size-lg);
    }

    .app-detail-field-grid {
        grid-template-columns: 1fr;
    }
}

.app-clients-list-panel {
    padding-top: var(--space-5);
}

.app-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.app-filter-badge,
.app-filter-reset-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.app-filter-badge {
    border: 1px solid var(--color-border);
    background: var(--color-neutral-soft);
    color: var(--color-text);
}

.app-filter-badge:hover,
.app-filter-badge:focus {
    border-color: var(--color-text-muted);
    color: var(--color-text-strong);
}

.app-filter-reset-link {
    color: var(--color-text-muted);
}

.app-filter-reset-link:hover,
.app-filter-reset-link:focus {
    color: var(--color-brand);
}

.app-client-row-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.app-client-row-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-brand) 7%, var(--color-surface));
    color: var(--color-brand);
}

.app-client-row-icon svg {
    width: 20px;
    height: 20px;
}

.app-client-row-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.app-client-row-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.app-backdrop {
    display: none;
}

@media (max-width: 1365.98px) {
    .app-backend-shell {
        display: block;
    }

    .app-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: var(--z-mobile-sidebar);
        width: min(88vw, 380px);
        transform: translateX(-105%);
        transition: transform var(--transition-fast);
    }

    .app-backend-shell.is-menu-open .app-sidebar {
        transform: translateX(0);
    }

    .app-backend-shell.is-menu-open + .app-legacy-footer {
        display: none;
    }

    .app-backdrop {
        position: fixed;
        inset: 0;
        z-index: var(--z-mobile-backdrop);
        display: block;
        background: var(--color-overlay-dark);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-fast);
    }

    body:has(.app-backend-shell.is-menu-open) .app-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .app-sidebar-close,
    .app-mobile-menu-button {
        display: inline-flex;
    }

    .app-statusbar {
        padding: 0 1rem;
    }

    .app-platform-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-toast-stack {
        top: calc(var(--statusbar-height) + 0.75rem);
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .app-global-search {
        width: clamp(9.5rem, 36vw, 16rem);
    }

    .app-user-copy {
        display: none;
    }

    .app-user-mobile-icon {
        display: inline-flex;
    }

    .app-content {
        padding: 1.25rem !important;
    }

    .app-client-switcher,
    .app-client-context {
        max-width: 52vw;
    }

    .app-client-switcher select,
    .app-client-context span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 479.98px) {
    .app-global-search {
        display: none;
    }

    .app-mobile-search-button {
        display: inline-flex;
    }

    .app-client-switcher,
    .app-client-context {
        max-width: 42vw;
    }

    .app-notification-center {
        position: static;
    }

    .app-notification-popover {
        position: fixed;
        top: calc(var(--statusbar-height) + var(--space-2));
        right: var(--space-3);
        left: var(--space-3);
        width: auto;
        max-height: calc(100vh - var(--statusbar-height) - var(--space-5));
        overflow-y: auto;
    }
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.app-navbar,
.app-navbar-linked {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--color-overlay-light);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.app-navbar-inner {
    min-height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-brand {
    color: var(--color-brand) !important;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.app-logo {
    height: 48px;
    width: auto;
    display: block;
}

.app-nav-item {
    min-width: auto;
    min-height: var(--nav-height);
    padding: var(--space-2) var(--space-4);
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    position: relative;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

.app-nav-item:hover,
.app-nav-item.is-active {
    color: var(--color-text-strong);
    background: var(--color-surface-muted);
}

.app-nav-item:focus,
.app-nav-item:focus-visible {
    outline: none;
    box-shadow: none;
}

.app-nav-item.is-active {
    color: var(--color-brand);
    font-weight: var(--font-weight-semibold);
}

.app-nav-item.is-active .app-nav-label {
    color: var(--color-brand);
    -webkit-text-fill-color: currentColor;
}

.app-nav-label {
    white-space: nowrap;
}

/* ==========================================================================
   PAGE STRUCTURE
   ========================================================================== */

.app-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.app-page-title {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.app-page-subtitle {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

.app-panel,
.app-form-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.app-panel {
    padding: var(--space-5);
}

.app-form-panel {
    padding: var(--space-8);
}

/* ==========================================================================
   HELP
   ========================================================================== */

.app-help-welcome {
    display: grid;
    gap: var(--space-6);
    margin-bottom: var(--space-5);
    padding-block: calc(var(--space-8) * 2) var(--space-8);
}

.app-help-welcome-copy {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    text-align: center;
}

.app-help-welcome h2 {
    margin: 0 0 var(--space-2);
    color: var(--color-text-strong);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.app-help-welcome p {
    max-width: 860px;
    margin: 0;
    color: var(--color-text);
    line-height: var(--line-height-base);
}

.app-help-search-form {
    width: min(100%, 48rem);
    max-width: 48rem;
    margin: 0 auto;
}

.app-help-search-field {
    max-width: none;
}

.app-help-search-field .app-search-input {
    border-radius: var(--radius-pill);
}

.app-help-search-results {
    display: grid;
    gap: var(--space-4);
    width: min(100%, 58rem);
    margin: 0 auto;
    text-align: left;
}

.app-help-group + .app-help-group {
    margin-top: var(--space-5);
}

.app-help-group-title {
    margin: 0 0 var(--space-4);
    color: var(--color-text-strong);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.app-help-accordion-list {
    display: grid;
    gap: var(--space-3);
}

.app-help-accordion-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
    scroll-margin-top: calc(var(--nav-height) + var(--space-5));
}

.app-help-accordion-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--control-height-lg);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-strong);
    cursor: pointer;
    list-style: none;
}

.app-help-accordion-item summary::-webkit-details-marker {
    display: none;
}

.app-help-accordion-item summary:hover,
.app-help-accordion-item summary:focus-visible {
    background: var(--color-surface-muted);
    outline: 0;
}

.app-help-accordion-main {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.app-help-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-brand);
}

.app-help-item-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.app-help-accordion-chevron {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.app-help-accordion-chevron svg {
    width: 100%;
    height: 100%;
}

.app-help-accordion-item[open] .app-help-accordion-chevron {
    transform: rotate(180deg);
}

.app-help-group--faqs .app-help-accordion-item summary {
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3);
}

.app-help-group--faqs .app-help-item-icon {
    display: none;
}

.app-help-group--faqs .app-help-accordion-body {
    padding: var(--space-3);
}

.app-help-accordion-body {
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
}

.app-help-accordion-body p:last-child {
    margin-bottom: 0;
}

.app-help-meta {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

.app-help-meta strong {
    color: var(--color-text-strong);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.app-help-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.app-help-step-heading {
    margin: var(--space-5) 0 var(--space-3);
    color: var(--color-text-strong);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.app-help-step-list {
    counter-reset: help-step;
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding-left: 0;
    list-style: none;
}

.app-help-step-list li {
    counter-increment: help-step;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-height-lg);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.app-help-step-list li::before {
    content: counter(help-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-pill);
    background: var(--gradient-brand-horizontal);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.app-help-step-action {
    color: var(--color-brand);
}

.app-guide-step-form-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.app-guide-step-form-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-pill);
    background: var(--gradient-brand-horizontal);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.app-guide-step-form-fields {
    display: grid;
    gap: var(--space-2);
}

.app-guide-step-form-actions {
    display: grid;
    gap: var(--space-1);
    justify-items: center;
}

.app-guide-step-form-actions .app-icon-action {
    width: var(--control-height-xs);
    min-height: var(--control-height-xs);
}

@media (max-width: 479.98px) {
    .app-guide-step-form-row {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .app-guide-step-form-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, auto);
        justify-content: end;
    }
}

.app-help-faq-answer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
}

.app-help-faq-answer-row p {
    margin: 0;
}

.app-help-guide-badge {
    display: inline-flex;
    width: fit-content;
    margin-top: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
    text-decoration: none;
}

.app-help-guide-badge:hover,
.app-help-guide-badge:focus-visible {
    background: var(--color-surface-muted);
    color: var(--color-text-strong);
    outline: 0;
}

.app-help-empty {
    color: var(--color-text-muted);
}

@media (min-width: 1024px) {
    .app-help-accordion-list--faqs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

@media (min-width: 1920px) {
    .app-help-guides-group .app-help-accordion-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .app-help-accordion-list--faqs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 2560px) {
    .app-help-accordion-list--faqs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.app-form-body {
    width: min(100%, 1280px);
    margin: 0 auto;
}

.app-form-section {
    display: grid;
    gap: var(--space-5);
}

.app-form-body > .app-form-section:first-child {
    padding-top: var(--space-5);
}

.app-form-section + .app-form-section {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.app-form-section__title {
    margin: 0;
}

.app-form-grid-separated {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.app-form-section-divider {
    margin: var(--space-6) 0;
    border-top: 1px solid var(--color-border);
}

.app-input-addon-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    max-width: 420px;
}

.app-input-addon-row .app-form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.app-input-addon-text {
    display: flex;
    align-items: center;
    min-height: var(--control-height-lg);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 0;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ==========================================================================
   BUTTONS AND ACTIONS
   ========================================================================== */

.app-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.app-table-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
}

.app-table-entity {
    display: inline-grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    max-width: 100%;
}

.app-table-entity-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-brand);
}

.app-table--standard .app-table-entity-icon {
    width: 2rem;
    height: 2rem;
}

.app-table-entity-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

.app-table-action-toggle svg {
    width: 18px;
    height: 18px;
}

.app-table-action-menu {
    min-width: 11rem;
    max-height: min(22rem, calc(100vh - var(--space-8)));
    overflow-y: auto;
    z-index: var(--z-dropdown-overlay);
}

.app-table-actions:has(.app-table-action-menu.show) .app-table-action-toggle,
.app-table-action-toggle:focus,
.app-table-action-toggle:focus-visible,
.app-table-action-toggle:active {
    border-color: transparent;
    background: var(--color-surface-muted);
    color: var(--color-brand);
    outline: none;
    box-shadow: none;
}

.app-table-action-menu form {
    margin: 0;
}

.app-table-col-actions {
    width: var(--table-actions-column-width);
    max-width: var(--table-actions-column-width);
    text-align: center;
    white-space: nowrap;
}

.app-table-col-count {
    text-align: right;
}

.app-btn-gradient,
.app-btn-light,
.app-btn-danger,
.app-icon-action {
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.app-btn-gradient {
    --bs-btn-color: var(--color-text-inverse);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--color-text-inverse);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 244, 124, 0;
    --bs-btn-active-color: var(--color-text-inverse);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--color-text-inverse);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    padding-inline: var(--space-6);
    border: 0;
    background: var(--gradient-accent);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-sm);
}

.app-btn-icon {
    width: 18px;
    height: 18px;
    margin-right: var(--space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-btn-icon-end {
    margin-right: 0;
    margin-left: var(--space-1);
}

.app-btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-btn-gradient:hover,
.app-btn-gradient:focus,
.app-btn-gradient:focus-visible,
.app-btn-gradient:active,
.app-btn-gradient.btn:active,
.app-btn-gradient.btn:first-child:active,
:not(.btn-check) + .app-btn-gradient.btn:active,
.app-btn-gradient.active,
.app-btn-gradient.show {
    background: var(--gradient-accent-reverse);
    color: var(--color-text-inverse);
    transform: none;
}

.app-btn-gradient:active,
.app-btn-gradient.btn:active,
.app-btn-gradient.btn:first-child:active,
:not(.btn-check) + .app-btn-gradient.btn:active,
.app-btn-gradient.active,
.app-btn-gradient.show {
    box-shadow: var(--shadow-inset-soft);
}

.app-btn-gradient:disabled,
.app-btn-gradient.disabled {
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

.app-btn-light {
    padding-inline: var(--space-5);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-strong);
}

.app-btn-light:hover,
.app-btn-light:focus,
.app-btn-light:focus-visible,
.app-btn-light:active {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-strong);
}

.app-btn-danger {
    padding-inline: var(--space-5);
    border: 1px solid var(--color-danger-soft);
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.app-btn-danger:hover,
.app-btn-danger:focus,
.app-btn-danger:focus-visible,
.app-btn-danger:active {
    border-color: color-mix(in srgb, var(--color-danger-soft) 55%, var(--color-danger) 45%);
    background: color-mix(in srgb, var(--color-danger-soft) 82%, var(--color-danger) 18%);
    color: var(--color-danger);
}

.app-icon-action {
    width: var(--control-height-sm);
    min-height: var(--control-height-sm);
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text);
    text-decoration: none;
}

.app-icon-action:hover {
    border-color: transparent;
    background: transparent;
    color: var(--color-brand);
}

.app-table-action-toggle.show,
.app-table-action-toggle:focus,
.app-table-action-toggle:focus-visible,
.app-table-action-toggle:active,
.app-table-actions:has(.app-table-action-menu.show) .app-table-action-toggle,
.app-table-actions:has(.app-table-action-menu.show) .app-table-action-toggle:hover {
    border-color: transparent;
    background: var(--color-surface-muted);
    color: var(--color-brand);
    outline: none;
    box-shadow: none;
}

.app-icon-action-danger:hover,
.app-icon-action-danger:focus {
    color: var(--color-danger);
}

.app-icon-action.is-disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 1;
}

.app-icon-action.is-disabled:hover {
    color: var(--color-text-muted);
}

.app-icon-action svg {
    width: 20px;
    height: 20px;
    display: block;
}

.btn.disabled,
.btn:disabled,
.app-btn-light.disabled,
.app-btn-light:disabled,
.app-btn-danger.disabled,
.app-btn-danger:disabled {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

/* ==========================================================================
   DROPDOWNS
   ========================================================================== */

.app-dropdown-menu,
.app-filter-menu,
.app-backend-shell .dropdown-menu {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.app-dropdown-menu,
.app-backend-shell .dropdown-menu {
    --bs-dropdown-spacer: -5px;
    width: max-content;
    min-width: 0;
    padding: var(--space-1) 0;
    margin-top: 0;
}

.app-dropdown-menu .dropdown-item,
.app-backend-shell .dropdown-menu .dropdown-item {
    display: block;
    border-radius: 0;
    padding: 0.4rem var(--space-5);
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
}

.app-dropdown-menu.app-detail-more-menu .dropdown-item {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
}

.app-dropdown-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
}

.app-dropdown-item-icon svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}

.app-dropdown-menu .dropdown-item:hover,
.app-dropdown-menu .dropdown-item:active,
.app-dropdown-menu .dropdown-item:focus,
.app-backend-shell .dropdown-menu .dropdown-item:hover,
.app-backend-shell .dropdown-menu .dropdown-item:active,
.app-backend-shell .dropdown-menu .dropdown-item:focus {
    background: var(--color-surface-muted);
    color: var(--color-text);
    outline: none;
    box-shadow: none;
}

.app-dropdown-menu .dropdown-item.active,
.app-backend-shell .dropdown-menu .dropdown-item.active {
    background: transparent;
    color: inherit;
    font-weight: var(--font-weight-regular);
}

.app-dropdown-menu .dropdown-item.disabled,
.app-dropdown-disabled,
.app-backend-shell .dropdown-menu .dropdown-item.disabled {
    color: var(--color-text-muted);
    opacity: 0.48;
    pointer-events: auto;
    cursor: not-allowed;
}

.app-dropdown-menu .dropdown-item.disabled:hover,
.app-dropdown-menu .dropdown-item.disabled:focus,
.app-backend-shell .dropdown-menu .dropdown-item.disabled:hover,
.app-backend-shell .dropdown-menu .dropdown-item.disabled:focus,
.app-dropdown-disabled:hover,
.app-dropdown-disabled:focus {
    background: transparent;
    color: var(--color-text-muted);
}

.app-dropdown-menu .dropdown-item:hover .app-dropdown-title,
.app-dropdown-menu .dropdown-item:focus .app-dropdown-title,
.app-dropdown-menu .dropdown-item.active:hover .app-dropdown-title,
.app-dropdown-menu .dropdown-item.active:focus .app-dropdown-title {
    color: inherit;
}

.app-dropdown-title {
    display: block;
    color: inherit;
    font-weight: inherit;
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.app-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 0;
    vertical-align: middle;
    border: 0;
    border-radius: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-sm);
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.table-responsive:has(> .app-table--standard) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.table-responsive:has(> .app-table--standard) > .app-table--standard {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.app-table--standard {
    table-layout: fixed;
}

.app-table-col-count,
.app-table-col-updated {
    display: none;
}

.app-table-col-icon {
    width: var(--table-icon-column-width);
    max-width: var(--table-icon-column-width);
    text-align: center;
}

@media (min-width: 768px) {
    .app-table-col-updated {
        display: table-cell;
    }
}

@media (min-width: 1536px) {
    .app-table-col-count {
        display: table-cell;
    }
}

.app-table thead th {
    padding: var(--table-head-padding-y) var(--table-cell-padding-x);
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}

.app-table thead th.text-end,
.app-table thead th.app-table-col-actions {
    text-align: center !important;
}

.app-table thead th.app-table-col-actions,
.app-table tbody td.app-table-col-actions {
    padding-right: 0;
    padding-left: 0;
}

.app-table thead th.app-table-col-version,
.app-table tbody td.app-table-col-version {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
}

.app-table tbody td {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    height: var(--table-row-min-height);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    vertical-align: middle;
}

.app-table tbody td:has(.app-table-actions),
.app-table tbody td.app-table-col-actions {
    text-align: center;
}

.app-table-col-main,
.app-table-col-text,
.app-table-col-meta,
.app-table-col-date {
    text-align: left;
}

.app-table-col-icon,
.app-table-col-indicator {
    text-align: center;
}

.app-table-col-count {
    text-align: right;
}

.app-table-col-badge,
.app-table-col-status,
.app-table-col-actions {
    text-align: center;
}

.app-table-col-jump {
    text-align: right;
}

.app-table-col-main .app-table-sort,
.app-table-col-text .app-table-sort,
.app-table-col-meta .app-table-sort,
.app-table-col-date .app-table-sort {
    justify-content: flex-start;
}

.app-table-col-icon .app-table-sort,
.app-table-col-indicator .app-table-sort,
.app-table-col-badge .app-table-sort,
.app-table-col-status .app-table-sort,
.app-table-col-actions .app-table-sort {
    justify-content: center;
}

.app-table-col-count .app-table-sort,
.app-table-col-jump .app-table-sort {
    justify-content: flex-end;
}

.app-table tbody tr:last-child td {
    border-bottom: 0;
}

.app-table tbody td.fw-semibold,
.app-table tbody td .fw-semibold {
    color: var(--color-text);
    font-weight: var(--font-weight-regular) !important;
}

.app-table-truncate {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.app-table-cell-truncate {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-table--standard .app-table-entity {
    display: grid;
    width: 100%;
    max-width: 100%;
}

.app-table--standard .app-table-entity > * {
    min-width: 0;
}

.app-table--standard .app-table-entity:not(:has(.app-table-entity-icon)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-width: 0;
}

.app-table--standard .app-table-entity:has(.app-table-entity-icon) {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    min-width: 0;
}

.app-table--standard .app-table-entity-main {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.app-table--standard .app-table-entity-main .app-table-mobile-meta {
    margin-top: 0;
}

.app-table-entity-icon-from-tablet .app-table-entity:has(.app-table-entity-icon) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.app-table-entity-icon-from-tablet .app-table-entity-icon {
    display: none;
}

.app-table--standard :is(.app-table-truncate, .app-table-cell-truncate) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-table--standard .app-type-pill {
    justify-content: center;
    padding: 0;
    background: transparent;
}

.app-table--standard .app-type-icon {
    display: none;
}

.app-table--standard .app-type-label {
    display: inline;
}

@media (min-width: 768px) {
    .app-table--standard .app-type-pill {
        gap: var(--space-2);
    }

    .app-table--standard .app-type-icon {
        display: inline-flex;
    }

    .app-table-entity-icon-from-tablet .app-table-entity:has(.app-table-entity-icon) {
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-3);
    }

    .app-table-entity-icon-from-tablet .app-table-entity-icon {
        display: inline-flex;
    }
}

.app-table--standard .app-access-request-badge {
    width: min(10.25rem, 100%);
    min-width: 0;
}

.app-table--standard .app-access-request-badge .app-badge-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-table--standard .app-table-col-position {
    white-space: nowrap;
}

.app-table--standard .app-table-error-text {
    display: block;
    overflow-wrap: anywhere;
    white-space: normal;
}

.app-table-mobile-meta {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
}

.app-page-alerts {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.app-page-alerts .app-inline-alert {
    margin: 0;
}

.app-table-color-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    max-width: 100%;
    min-width: 0;
}

.app-table-color-value .app-color-swatch-inline {
    flex: 0 0 0.75rem;
    margin-left: 0;
}

.app-table-name-link {
    color: var(--color-text);
    text-decoration: none;
}

.app-table--standard tbody td a:not(.dropdown-item):not(.app-table-action-item):not(.btn):not(.app-badge) {
    color: var(--color-text);
    display: inline-block;
    width: auto;
    max-width: 100%;
    justify-self: start;
    margin: calc(var(--space-1) * -1);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    text-decoration: none;
    vertical-align: bottom;
}

.app-table-name-link:hover,
.app-table-name-link:focus,
.app-table--standard tbody td a:not(.dropdown-item):not(.app-table-action-item):not(.btn):not(.app-badge):hover,
.app-table--standard tbody td a:not(.dropdown-item):not(.app-table-action-item):not(.btn):not(.app-badge):focus {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-brand-blue-light) 8%, white);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.app-table-row-current {
    background: var(--color-surface-muted);
}

.app-table-row-latest td {
    color: var(--color-text-strong);
    font-weight: var(--font-weight-regular);
}

.app-table .dropdown-toggle::after {
    margin-left: var(--space-2);
    vertical-align: middle;
}

.app-table-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.app-table-sort:hover,
.app-table-sort.is-active {
    color: var(--color-brand);
    text-decoration: none;
}

.app-table-sort-icons {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    line-height: 1;
}

.app-table-sort-up,
.app-table-sort-down {
    color: var(--color-text-muted);
    width: 14px;
    height: 8px;
    opacity: 0.42;
}

.app-table-sort-up svg,
.app-table-sort-down svg {
    display: none;
}

.app-table-sort-up::before,
.app-table-sort-down::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-inline: auto;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.app-table-sort-up::before {
    border-bottom: 6px solid currentColor;
}

.app-table-sort-down::before {
    border-top: 6px solid currentColor;
}

.app-table-sort-up.is-active,
.app-table-sort-down.is-active {
    color: var(--color-brand);
    opacity: 1;
}

.app-table .dropdown-menu {
    min-width: 140px;
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.app-status-dropdown {
    position: relative;
    z-index: var(--z-dropdown);
}

.app-status-dropdown.show,
.app-status-dropdown:has(.app-status-dropdown-menu.show) {
    z-index: var(--z-dropdown-overlay);
}

.app-backend-shell .app-status-dropdown-menu {
    min-width: max-content;
    padding: var(--space-1);
    z-index: var(--z-dropdown-overlay);
}

.app-table-action-menu.show {
    z-index: var(--z-dropdown-overlay);
}

.app-status-dropdown-menu.show {
    z-index: var(--z-dropdown-overlay);
}

.table-responsive:has(.app-status-dropdown.show),
.table-responsive:has(.app-status-dropdown-menu.show),
.table-responsive:has(.app-table-action-menu.show),
.app-panel:has(.app-status-dropdown.show),
.app-panel:has(.app-status-dropdown-menu.show),
.app-panel:has(.app-table-action-menu.show) {
    overflow: visible;
}

.app-table tr:has(.app-status-dropdown.show),
.app-table tr:has(.app-status-dropdown-menu.show),
.app-table tr:has(.app-table-action-menu.show),
.app-table td:has(.app-status-dropdown.show),
.app-table td:has(.app-status-dropdown-menu.show),
.app-table td:has(.app-table-action-menu.show) {
    position: relative;
    z-index: var(--z-dropdown-parent);
}

.app-table .dropdown-item {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.36rem var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.app-backend-shell .app-status-dropdown .dropdown-item,
.app-backend-shell .app-status-dropdown-menu .dropdown-item {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.32rem var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.app-backend-shell .app-table-action-menu .dropdown-item {
    color: var(--color-text);
    padding: 0.32rem var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.app-backend-shell .app-table-action-menu .app-table-action-item {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
}

.app-detail-actions-dropdown .app-table-action-menu .dropdown-item {
    font-size: inherit;
}

.app-table-action-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
}

.app-table-action-item-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-table .dropdown-item:hover,
.app-table .dropdown-item:active {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.app-table .dropdown-item.app-status-action-active:hover,
.app-table .dropdown-item.app-status-action-active:active {
    color: var(--color-success);
}

.app-table .dropdown-item.app-status-action-inactive:hover,
.app-table .dropdown-item.app-status-action-inactive:active {
    color: var(--color-neutral);
}

.app-table .dropdown-item.app-status-action-preparing:hover,
.app-table .dropdown-item.app-status-action-preparing:active {
    color: var(--color-info);
}

.app-table .dropdown-item.app-status-action-deleted:hover,
.app-table .dropdown-item.app-status-action-deleted:active {
    color: var(--color-danger);
}

.app-status-action-icon {
    width: 15px;
    height: 15px;
    display: inline-flex;
    flex: 0 0 auto;
    color: currentColor;
}

.app-status-action-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-status-action-active {
    color: var(--color-success);
}

.app-backend-shell .dropdown-menu .dropdown-item.app-status-action-active,
.app-backend-shell .dropdown-menu .dropdown-item.app-status-action-active:hover,
.app-backend-shell .dropdown-menu .dropdown-item.app-status-action-active:focus,
.app-status-action-active:hover,
.app-status-action-active:active {
    color: var(--color-success);
}

.app-status-action-inactive {
    color: var(--color-neutral);
}

.app-status-action-preparing {
    color: var(--color-info);
}

.app-backend-shell .dropdown-menu .dropdown-item.app-status-action-preparing,
.app-backend-shell .dropdown-menu .dropdown-item.app-status-action-preparing:hover,
.app-backend-shell .dropdown-menu .dropdown-item.app-status-action-preparing:focus,
.app-status-action-preparing:hover,
.app-status-action-preparing:active {
    color: var(--color-info);
}

.app-backend-shell .dropdown-menu .dropdown-item.app-status-action-inactive,
.app-backend-shell .dropdown-menu .dropdown-item.app-status-action-inactive:hover,
.app-backend-shell .dropdown-menu .dropdown-item.app-status-action-inactive:focus,
.app-status-action-inactive:hover,
.app-status-action-inactive:active {
    color: var(--color-neutral);
}

.app-status-action-deleted {
    color: var(--color-danger);
}

.app-backend-shell .dropdown-menu .dropdown-item.app-status-action-deleted,
.app-backend-shell .dropdown-menu .dropdown-item.app-status-action-deleted:hover,
.app-backend-shell .dropdown-menu .dropdown-item.app-status-action-deleted:focus,
.app-status-action-deleted:hover,
.app-status-action-deleted:active {
    color: var(--color-danger);
}

.app-table-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.app-table-meta .pagination {
    margin-bottom: 0;
}

.app-type-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-weight: inherit;
    white-space: nowrap;
}

.app-type-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    color: var(--color-text-muted);
}

.app-type-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-role-pill {
    justify-content: flex-start;
    min-width: 0;
}

.app-role-pill .app-type-icon {
    flex: 0 0 22px;
}

.app-role-pill .app-type-label {
    min-width: 0;
    white-space: nowrap;
}

/* ==========================================================================
   BADGES AND STATUS
   ========================================================================== */

.app-badge {
    --badge-segment-bg: currentColor;
    box-sizing: border-box;
    min-height: 26px;
    min-width: 112px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    padding: 0.35rem 0 0.35rem 0.35rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: inherit;
    line-height: 1;
    white-space: nowrap;
}

.app-badge.dropdown-toggle::after {
    align-self: stretch;
    width: 24px;
    margin: -0.35rem 0 -0.35rem auto;
    border: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: var(--badge-segment-bg);
    background-image:
        linear-gradient(45deg, transparent 48%, var(--color-text-inverse) 49%, var(--color-text-inverse) 58%, transparent 59%),
        linear-gradient(135deg, transparent 48%, var(--color-text-inverse) 49%, var(--color-text-inverse) 58%, transparent 59%);
    background-position:
        calc(50% - 3px) 50%,
        calc(50% + 3px) 50%;
    background-size: 7px 7px;
    background-repeat: no-repeat;
    opacity: 1;
}

.app-table .app-badge,
.app-table .app-table-status-badge {
    min-height: 26px;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.app-table .app-table-status-phone-badge {
    display: none;
}

.app-table .app-table-col-status {
    width: var(--table-status-badge-width);
    min-width: var(--table-status-badge-width);
    max-width: var(--table-status-badge-width);
    text-align: center;
}

.app-table tbody td.app-table-col-status:not(:has(.app-access-request-badge)) {
    padding-right: 0;
    padding-left: 0;
}

.app-table .app-table-col-status > .dropdown,
.app-table .app-table-col-status > .app-status-dropdown {
    width: var(--table-status-badge-width);
    min-width: var(--table-status-badge-width);
    max-width: var(--table-status-badge-width);
    margin-right: auto;
    margin-left: auto;
}

.app-table .app-table-col-status .app-table-sort {
    justify-content: center;
}

.app-table .app-table-col-status .app-status-dropdown,
.app-table .app-table-col-status .app-badge,
.app-table .app-table-col-status .app-table-status-badge {
    margin-right: auto;
    margin-left: auto;
}

.app-table .app-table-col-status .app-badge:not(.app-access-request-badge),
.app-table .app-table-col-status .app-table-status-badge {
    width: var(--table-status-badge-width);
    min-width: var(--table-status-badge-width);
    max-width: var(--table-status-badge-width);
}

.app-table .app-table-col-status .app-badge-label {
    flex: 0 1 auto;
    margin-right: 0.125rem;
}

.app-table .app-table-col-badge .app-badge,
.app-table .app-table-col-type .app-badge,
.app-table .app-table-col-priority .app-badge,
.app-table .app-table-col-role .app-badge {
    width: var(--table-type-badge-width);
    min-width: var(--table-type-badge-width);
    max-width: var(--table-type-badge-width);
    margin-right: auto;
    margin-left: auto;
}

.app-table .app-notification-type-badge {
    width: var(--table-type-badge-width);
    min-width: var(--table-type-badge-width);
    max-width: var(--table-type-badge-width);
    margin-right: auto;
    margin-left: auto;
}

.app-help-feedback-detail-card .app-badge-label {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
}

.app-table .app-table-col-status:has(.app-access-request-badge) {
    width: auto;
    min-width: 0;
    max-width: none;
}

.app-table .app-badge.dropdown-toggle::after,
.app-table .app-table-status-badge.dropdown-toggle::after {
    width: 22px;
}

.app-badge-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    color: currentColor;
}

.app-badge-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-badge-label {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: var(--space-1);
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-badge-active {
    --badge-segment-bg: color-mix(in srgb, var(--color-success-soft) 38%, var(--color-success) 62%);
    background: var(--color-success-soft);
    border-color: var(--color-success-soft);
    color: var(--color-success);
}

.app-badge-draft {
    --badge-segment-bg: color-mix(in srgb, var(--color-warning-soft) 38%, var(--color-warning) 62%);
    background: var(--color-warning-soft);
    border-color: var(--color-warning-soft);
    color: var(--color-warning);
}

.app-badge-preparing {
    --badge-segment-bg: color-mix(in srgb, var(--color-info-soft) 38%, var(--color-info) 62%);
    background: var(--color-info-soft);
    border-color: var(--color-info-soft);
    color: var(--color-info);
}

.app-badge-inactive {
    --badge-segment-bg: color-mix(in srgb, var(--color-neutral-soft) 38%, var(--color-neutral) 62%);
    background: var(--color-neutral-soft);
    border-color: var(--color-neutral-soft);
    color: var(--color-neutral);
}

.app-badge-deleted {
    --badge-segment-bg: color-mix(in srgb, var(--color-danger-soft) 38%, var(--color-danger) 62%);
    background: var(--color-danger-soft);
    border-color: var(--color-danger-soft);
    color: var(--color-danger);
}

.app-consent-badge {
    min-width: 128px;
}

.app-badge-confirmed {
    --badge-segment-bg: color-mix(in srgb, var(--color-success-soft) 38%, var(--color-success) 62%);
    background: var(--color-success-soft);
    border-color: var(--color-success-soft);
    color: var(--color-success);
}

.app-badge-pending {
    --badge-segment-bg: color-mix(in srgb, var(--color-warning-soft) 38%, var(--color-warning) 62%);
    background: var(--color-warning-soft);
    border-color: var(--color-warning-soft);
    color: var(--color-warning);
}

.app-badge-unknown {
    --badge-segment-bg: color-mix(in srgb, var(--color-neutral-soft) 38%, var(--color-neutral) 62%);
    background: var(--color-neutral-soft);
    border-color: var(--color-neutral-soft);
    color: var(--color-neutral);
}

.app-badge-revoked {
    --badge-segment-bg: color-mix(in srgb, var(--color-danger-soft) 38%, var(--color-danger) 62%);
    background: var(--color-danger-soft);
    border-color: var(--color-danger-soft);
    color: var(--color-danger);
}

.app-access-request-badge {
    width: 12rem;
    min-width: 12rem;
    justify-content: flex-start;
    padding-right: var(--space-4);
}

.app-access-request-badge .app-badge-label {
    margin-right: var(--space-2);
}

.app-access-request-badge--detail {
    width: auto;
    min-width: 13rem;
    min-height: var(--control-height-md);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-md);
}

.app-access-request-badge--detail .app-badge-icon {
    width: 1rem;
    height: 1rem;
}

.app-badge-access-requested,
.app-badge-consent-request-created,
.app-badge-consent-email-sent,
.app-badge-delivery-queued {
    --badge-segment-bg: color-mix(in srgb, var(--color-neutral-soft) 38%, var(--color-neutral) 62%);
    background: var(--color-neutral-soft);
    border-color: var(--color-neutral-soft);
    color: var(--color-neutral);
}

.app-badge-delivered {
    --badge-segment-bg: color-mix(in srgb, var(--color-success-soft) 38%, var(--color-success) 62%);
    background: var(--color-success-soft);
    border-color: var(--color-success-soft);
    color: var(--color-success);
}

.app-badge-failed {
    --badge-segment-bg: color-mix(in srgb, var(--color-danger-soft) 38%, var(--color-danger) 62%);
    background: var(--color-danger-soft);
    border-color: var(--color-danger-soft);
    color: var(--color-danger);
}

.app-live-dot {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: var(--radius-pill);
    vertical-align: middle;
}

.app-live-dot-live {
    background: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.app-live-dot-offline {
    background: var(--color-neutral);
    opacity: 0.55;
}

/* ==========================================================================
   SEARCH AND FILTERS
   ========================================================================== */

.app-list-toolbar {
    position: relative;
    z-index: var(--z-sticky-toolbar);
    padding-bottom: var(--space-8);
}

.app-list-result-count {
    margin-top: var(--space-2);
    margin-bottom: var(--space-5);
    padding-left: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.app-list-toolbar-row,
.app-search-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.app-list-toolbar-row .app-search-form {
    flex: 1 1 auto;
    min-width: 0;
}

.app-list-toolbar-row .app-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

.app-list-toolbar-row .app-actions .app-btn-gradient {
    min-height: var(--control-height-lg);
    padding-inline: var(--space-5);
}

.app-search-form,
.app-search-field {
    width: 100%;
}

.app-search-field {
    position: relative;
    max-width: 640px;
}

.app-search-input {
    width: 100%;
    height: var(--control-height-lg);
    padding: 0 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: var(--font-size-base);
    box-shadow: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-search-input:focus,
.app-form-control:focus,
.app-form-select:focus,
.app-custom-select-trigger:focus {
    outline: none;
    border-color: var(--color-focus-border);
    box-shadow: none;
}

.app-search-input::placeholder {
    color: var(--color-text-muted);
}

.app-search-icon-button,
.app-search-clear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.app-search-icon-button {
    left: var(--space-4);
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.app-search-clear {
    right: var(--space-4);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-base);
    line-height: 1;
    text-decoration: none;
}

.app-search-icon-button:hover,
.app-search-clear:hover {
    color: var(--color-text-strong);
}

.app-search-clear:hover {
    background: transparent;
    color: var(--color-brand);
}

.app-filter-button {
    width: var(--control-height-lg);
    height: var(--control-height-lg);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.app-filter-button:hover,
.app-filter-button:focus,
.app-filter-button:focus-visible,
.app-filter-button:active,
.app-filter-button.show,
.app-filter-button.is-active {
    outline: none;
    border-color: transparent;
    background: transparent;
    color: var(--color-brand);
    box-shadow: none;
}

.app-backend-shell .app-filter-menu {
    grid-template-columns: repeat(2, minmax(7rem, max-content));
    column-gap: var(--space-3);
    min-width: max-content;
    z-index: var(--z-dropdown-raised);
    background: var(--color-white);
    padding: var(--space-4) var(--space-3) var(--space-3) var(--space-4);
}

.app-backend-shell .app-filter-menu.show {
    display: grid;
}

.app-filter-group {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
}

.app-filter-group + .app-filter-group {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.app-filter-group-title {
    grid-column: 1 / -1;
    padding-inline: var(--space-1);
    margin-bottom: var(--space-2);
    color: var(--color-brand);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    text-transform: none;
}

.app-filter-option-grid {
    display: contents;
}

.app-filter-option-list > .app-filter-option,
.app-filter-combobox {
    grid-column: 1 / -1;
}

.app-filter-option-grid-roles {
    display: contents;
}

.app-filter-option {
    min-height: 28px;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.42rem;
    padding: 0.32rem var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    text-decoration: none;
}

.app-filter-option:hover {
    background: var(--color-surface-muted);
}

.app-filter-option.is-active {
    border-color: transparent;
    background: var(--color-surface-muted);
    font-weight: var(--font-weight-regular);
}

.app-filter-option-icon {
    width: 15px;
    height: 15px;
    display: inline-flex;
    flex: 0 0 auto;
    color: currentColor;
}

.app-filter-option-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-filter-option small {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.3;
}

.app-filter-option-active {
    color: var(--color-success);
}

.app-filter-option-active.is-active {
    border-color: transparent;
    background: var(--color-success-soft);
    color: var(--color-success);
}

.app-filter-option-draft {
    color: var(--color-warning);
}

.app-filter-option-draft.is-active {
    border-color: transparent;
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.app-filter-option-preparing {
    color: var(--color-info);
}

.app-filter-option-preparing.is-active {
    border-color: transparent;
    background: var(--color-info-soft);
    color: var(--color-info);
}

.app-filter-option-inactive {
    color: var(--color-neutral);
}

.app-filter-option-inactive.is-active {
    border-color: transparent;
    background: var(--color-neutral-soft);
    color: var(--color-neutral);
}

.app-filter-option-deleted {
    color: var(--color-danger);
}

.app-filter-option-deleted.is-active {
    border-color: transparent;
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.app-filter-option-confirmed {
    color: var(--color-success);
}

.app-filter-option-confirmed.is-active {
    border-color: transparent;
    background: var(--color-success-soft);
    color: var(--color-success);
}

.app-filter-option-pending {
    color: var(--color-warning);
}

.app-filter-option-pending.is-active {
    border-color: transparent;
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.app-filter-option-unknown {
    color: var(--color-neutral);
}

.app-filter-option-unknown.is-active {
    border-color: transparent;
    background: var(--color-neutral-soft);
    color: var(--color-neutral);
}

.app-filter-option-revoked {
    color: var(--color-danger);
}

.app-filter-option-revoked.is-active {
    border-color: transparent;
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.app-filter-option-getly_requested,
.app-filter-option-getly_initial_request,
.app-filter-option-getly_followup_request {
    color: var(--color-neutral);
}

.app-filter-option-getly_requested.is-active,
.app-filter-option-getly_initial_request.is-active,
.app-filter-option-getly_followup_request.is-active {
    border-color: transparent;
    background: var(--color-neutral-soft);
    color: var(--color-neutral);
}

.app-filter-option-consent_email_sent,
.app-filter-option-getly_delivery_queued {
    color: var(--color-neutral);
}

.app-filter-option-consent_email_sent.is-active,
.app-filter-option-getly_delivery_queued.is-active {
    border-color: transparent;
    background: var(--color-neutral-soft);
    color: var(--color-neutral);
}

.app-filter-option-consent_confirmed,
.app-filter-option-getly_delivered {
    color: var(--color-success);
}

.app-filter-option-consent_confirmed.is-active,
.app-filter-option-getly_delivered.is-active {
    border-color: transparent;
    background: var(--color-success-soft);
    color: var(--color-success);
}

.app-filter-option-consent_email_failed,
.app-filter-option-consent_invalidated_by_crm,
.app-filter-option-consent_email_unsubscribe,
.app-filter-option-consent_admin_unsubscribe,
.app-filter-option-getly_process_error,
.app-filter-option-getly_delivery_failed {
    color: var(--color-danger);
}

.app-filter-option-consent_email_failed.is-active,
.app-filter-option-consent_invalidated_by_crm.is-active,
.app-filter-option-consent_email_unsubscribe.is-active,
.app-filter-option-consent_admin_unsubscribe.is-active,
.app-filter-option-getly_process_error.is-active,
.app-filter-option-getly_delivery_failed.is-active {
    border-color: transparent;
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.app-filter-option-type {
    color: var(--color-text);
}

.app-filter-option-type.is-active {
    background: var(--color-surface-muted);
}

.app-filter-option-role {
    color: var(--color-text);
    white-space: nowrap;
}

.app-filter-option-role.is-active {
    background: var(--color-surface-muted);
}

.app-filter-option-plain {
    justify-content: flex-start;
}

.app-filter-combobox {
    min-width: 18rem;
    position: relative;
    z-index: var(--z-dropdown-overlay);
    background: var(--color-white);
}

.app-filter-menu:has(.app-filter-combobox) {
    overflow: visible;
    z-index: var(--z-dropdown-overlay);
    background: var(--color-white);
}

.app-filter-combobox-field {
    position: relative;
    margin-bottom: var(--space-2);
}

.app-filter-combobox-field .app-search-icon {
    position: absolute;
    left: var(--space-2);
    top: 50%;
    display: flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.app-filter-combobox-input {
    width: 100%;
    min-height: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    padding: 0 var(--space-3) 0 2.25rem;
}

.app-filter-combobox-input:focus {
    border-color: var(--color-brand);
    outline: 0;
    box-shadow: none;
}

.app-filter-combobox-options {
    position: static;
    z-index: var(--z-dropdown-overlay);
    display: flex;
    max-height: min(18rem, 45vh);
    flex-direction: column;
    gap: var(--space-1);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    opacity: 1;
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
}

.app-filter-combobox-options[hidden] {
    display: none;
}

.app-filter-combobox-empty {
    position: static;
    z-index: var(--z-dropdown-overlay);
    display: none;
    margin-top: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    opacity: 1;
    box-shadow: var(--shadow-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding: var(--space-3);
}

.app-filter-combobox-empty.is-visible {
    display: block;
}

.app-filter-reset {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.app-filter-reset a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.app-filter-reset a:hover {
    color: var(--color-text-strong);
}

.app-empty-state {
    min-height: 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    text-align: center;
}

.app-empty-state p {
    margin: 0;
}

.app-empty-state::before {
    content: "";
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-text-muted);
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='15.5' fill='none' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M17.5 20.5h.01M30.5 20.5h.01' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M17 33c2-3 4.5-4.5 7-4.5s5 1.5 7 4.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='15.5' fill='none' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M17.5 20.5h.01M30.5 20.5h.01' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M17 33c2-3 4.5-4.5 7-4.5s5 1.5 7 4.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 2rem 2rem;
    mask-size: 2rem 2rem;
}

.app-search-page {
    display: grid;
    gap: var(--space-4);
}

.app-search-page-inner {
    display: grid;
    gap: var(--space-4);
    width: min(100%, 58rem);
    margin-inline: auto;
}

.app-search-page-form {
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
}

.app-search-result-summary {
    margin-top: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.app-search-result-groups {
    display: grid;
    gap: var(--space-8);
}

.app-search-result-group {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.app-search-result-title {
    margin: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0;
    border-bottom: 0;
    color: var(--color-text-strong);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    list-style: none;
}

.app-search-result-title::-webkit-details-marker {
    display: none;
}

.app-search-result-title-main {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.app-search-result-title-icon {
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-info-soft);
    color: var(--color-brand);
}

.app-search-result-title-icon svg {
    width: 1rem;
    height: 1rem;
}

.app-search-result-title-count {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.app-search-result-title-chevron {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.app-search-result-title-chevron svg {
    width: 100%;
    height: 100%;
}

.app-search-result-group:not([open]) .app-search-result-title {
    border-bottom: 0;
}

.app-search-result-group:not([open]) .app-search-result-title-chevron {
    transform: rotate(-90deg);
}

.app-search-result-list {
    display: grid;
    gap: var(--space-4);
    padding-top: var(--space-3);
}

.app-search-result-item {
    min-height: 42px;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    border-bottom: 0;
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    padding: var(--space-2);
}

.app-search-result-item:last-child {
    border-bottom: 0;
}

.app-search-result-item:hover {
    background: var(--color-info-soft);
    color: var(--color-text-strong);
}

.app-search-result-item:hover .app-search-result-name,
.app-search-result-item:focus-visible .app-search-result-name {
    color: var(--color-brand);
}

.app-search-result-item:focus-visible {
    outline: 0;
}

.app-search-result-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-info-soft);
    color: var(--color-brand);
}

.app-search-result-icon svg,
.app-search-result-arrow svg {
    width: 0.92rem;
    height: 0.92rem;
}

.app-search-result-copy {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: var(--space-3);
}

.app-search-result-name,
.app-search-result-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-search-result-name {
    color: var(--color-text-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.app-search-result-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.app-search-result-match-label {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.app-search-result-meta mark {
    padding: 0 0.12em;
    border-radius: var(--radius-xs);
    background: var(--color-info-soft);
    color: var(--color-brand);
}

.app-search-result-arrow {
    color: var(--color-text-muted);
}

.app-search-result-status {
    justify-self: end;
}

@media (min-width: 768px) {
    .app-search-result-group {
        --search-result-indent: calc(1.65rem + var(--space-3));
    }

    .app-search-result-item {
        padding-left: var(--search-result-indent);
    }
}

@media (max-width: 767.98px) {
    .app-search-result-item {
        min-height: 48px;
    }

    .app-search-result-copy {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .app-search-result-status {
        display: none;
    }
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.app-form-grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 768px) {
    .app-form-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-form-grid-wide,
    .app-form-field--wide {
        grid-column: 1 / -1;
    }

    .app-form-field--compact {
        max-width: 420px;
    }
}

.app-form-compact-rows {
    display: grid;
    gap: var(--space-5);
}

.app-form-compact-row {
    display: grid;
    align-items: end;
    gap: var(--space-4);
}

.app-form-compact-row--pages {
    grid-template-columns: repeat(3, max-content);
}

.app-form-compact-row--placement {
    grid-template-columns: repeat(3, max-content);
}

.app-form-compact-field {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.app-form-compact-field--page {
    width: 7.5rem;
}

.app-form-compact-field--coordinate {
    width: 8rem;
}

.app-form-compact-field--select {
    width: 10rem;
}

.app-form-compact-field .app-form-control,
.app-form-compact-field .app-form-select {
    width: 100%;
}

@media (max-width: 767.98px) {
    .app-form-compact-row--pages,
    .app-form-compact-row--placement {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-form-compact-field,
    .app-form-compact-field--page,
    .app-form-compact-field--coordinate,
    .app-form-compact-field--select {
        width: auto;
    }
}

@media (max-width: 479.98px) {
    .app-form-compact-row--pages,
    .app-form-compact-row--placement {
        grid-template-columns: 1fr;
    }
}

.app-form-label {
    display: inline-block;
    margin-bottom: var(--space-2);
    color: var(--color-text-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.app-form-required-mark {
    margin-left: var(--space-1);
    color: var(--color-brand-blue);
    font-weight: var(--font-weight-semibold);
}

.app-form-checkbox-label {
    display: inline-grid;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
    color: var(--color-text-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}

.app-form-checkbox-label input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.08rem 0 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    accent-color: var(--color-brand);
}

.app-form-checkbox-label input[type="checkbox"]:focus,
.app-form-checkbox-label input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.app-form-control,
.app-form-select,
select.app-form-control {
    width: 100%;
    height: var(--control-height-lg);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-form-textarea {
    height: auto;
    min-height: 132px;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    resize: vertical;
}

.app-notification-copy-field {
    max-width: 36rem;
}

.app-notification-body-input {
    min-height: calc((var(--font-size-sm) * 1.5 * 5) + (var(--space-4) * 2));
    max-height: calc((var(--font-size-sm) * 1.5 * 5) + (var(--space-4) * 2));
    resize: none;
}

.app-form-select,
select.app-form-control {
    padding-right: 3rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
        linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 22px) calc(50% - 3px),
        calc(100% - 16px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.app-form-select--auto {
    width: auto;
}

.app-form-select.is-custom-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.app-custom-select {
    position: relative;
    display: block;
    width: 100%;
}

.app-custom-select--auto {
    display: inline-block;
    width: auto;
    min-width: 8rem;
}

.app-custom-select-trigger {
    width: 100%;
    min-height: var(--control-height-lg);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.25rem;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.app-custom-select-trigger:hover {
    border-color: color-mix(in srgb, var(--color-focus-border) 58%, var(--color-border));
}

.app-custom-select.is-open .app-custom-select-trigger {
    border-color: var(--color-focus-border);
}

.app-custom-select-trigger:disabled {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.app-custom-select-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.app-custom-select-label-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-custom-select-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
    pointer-events: none;
}

.app-custom-select-icon::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
}

.app-custom-select-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-custom-select.is-open .app-custom-select-icon {
    transform: rotate(180deg);
}

.app-custom-select-menu {
    position: absolute;
    z-index: var(--z-dropdown-raised);
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    max-height: min(18rem, 50vh);
    overflow-y: auto;
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-dropdown);
}

.app-custom-select:has(.app-custom-select-search) .app-custom-select-menu {
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.app-custom-select-menu[hidden] {
    display: none;
}

.app-custom-select-search {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.app-custom-select-search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.app-custom-select-search-icon::before,
.app-custom-select-search-icon::after {
    content: "";
    position: absolute;
    display: block;
}

.app-custom-select-search-icon::before {
    width: 0.78rem;
    height: 0.78rem;
    left: 0.1rem;
    top: 0.1rem;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.app-custom-select-search-icon::after {
    width: 0.48rem;
    height: 2px;
    left: 0.75rem;
    top: 0.82rem;
    background: currentColor;
    border-radius: var(--radius-pill);
    transform: rotate(45deg);
}

.app-custom-select-search-input {
    width: 100%;
    min-height: var(--control-height-lg);
    padding: 0 var(--space-4) 0 2.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
}

.app-custom-select-search-input:focus {
    outline: 0;
    background: var(--color-surface-muted);
    box-shadow: none;
}

.app-custom-select-empty {
    display: none;
    padding: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.app-custom-select-empty.is-visible {
    display: block;
}

.app-custom-select:has(.app-custom-select-search) .app-custom-select-option {
    margin: var(--space-1) var(--space-1) 0;
    width: calc(100% - (2 * var(--space-1)));
}

.app-custom-select:has(.app-custom-select-search) .app-custom-select-option:last-child {
    margin-bottom: var(--space-1);
}

.app-custom-select-option {
    width: 100%;
    min-height: var(--control-height-md);
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
}

.app-custom-select-option:not(.is-selected):hover,
.app-custom-select-option:not(.is-selected):focus {
    outline: 0;
    background: var(--color-surface-muted);
    color: inherit;
    box-shadow: none;
}

.app-custom-select-option.is-selected {
    background: transparent;
    color: inherit;
    font-weight: var(--font-weight-regular);
}

.app-custom-select-option.is-selected:hover,
.app-custom-select-option.is-selected:focus {
    outline: 0;
    background: var(--color-surface-muted);
    color: inherit;
    box-shadow: none;
}

.app-custom-select-option:disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.app-custom-select-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: var(--color-brand);
}

.app-custom-select-option-check::before {
    content: "";
    width: 0.55rem;
    height: 0.32rem;
    border-left: 2px solid var(--color-brand);
    border-bottom: 2px solid var(--color-brand);
    transform: rotate(-45deg);
}

.app-custom-select-option:not(.is-selected) .app-custom-select-option-check {
    visibility: hidden;
}

.app-custom-select-option-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.app-custom-select-color-swatch {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--swatch-color);
}

.app-custom-select-font-icon {
    flex: 0 0 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.app-form-static {
    min-height: var(--control-height-lg);
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text-strong);
}

.app-form-help,
.app-form-error {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
}

.app-form-help {
    color: var(--color-text-muted);
}

.app-form-error {
    color: var(--color-danger);
    font-weight: var(--font-weight-semibold);
}

.app-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.app-form-actions-final {
    padding-top: var(--space-4);
}

.app-form-panel > .app-form-actions:last-child,
.app-form-panel form > .app-form-actions:last-child {
    margin-bottom: 0;
}

.app-form-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.app-form-panel-head-copy {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .app-form-panel-head {
        align-items: flex-start;
        justify-content: space-between;
    }

    .app-form-actions-final {
        justify-content: flex-end;
    }

    .app-form-panel-head .btn,
    .app-form-actions-final .btn {
        width: auto;
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   AUTH
   ========================================================================== */

.auth-shell {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem var(--space-4);
}

.auth-card {
    width: 100%;
    max-width: 560px;
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.auth-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-5);
}

.auth-logo {
    width: 152px;
    height: auto;
}

.auth-title {
    margin-bottom: var(--space-2);
    color: var(--color-text-strong);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.auth-subtitle {
    margin-bottom: var(--space-6);
    color: var(--color-text-muted);
    text-align: center;
}

.auth-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.auth-link {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.auth-link:hover {
    color: var(--color-brand);
}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.app-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
}

.app-section {
    display: grid;
    gap: var(--space-4);
}

.app-section-separated {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.app-section-title {
    color: var(--color-text-strong);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.app-section-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.app-section-subtitle {
    color: var(--color-text-muted);
}

.app-section-divider {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.app-section-divider-compact {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
}

.app-dashboard-getly-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.app-dashboard-card {
    display: block;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: inherit;
    transition: none;
}

.app-dashboard-card-link {
    text-decoration: none;
}

.app-dashboard-card-link:hover,
.app-dashboard-card-link:focus {
    color: inherit;
}

.app-dashboard-card-link:focus-visible {
    outline: 3px solid var(--color-focus-border);
    outline-offset: 3px;
}

.app-dashboard-card-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    min-height: 13.5rem;
}

.app-dashboard-card-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.app-dashboard-card-type {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
    text-transform: none;
}

.app-dashboard-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--color-brand);
}

.app-dashboard-card-arrow svg {
    width: 18px;
    height: 18px;
}

.app-dashboard-card-title {
    margin: 0 0 var(--space-3);
    color: var(--color-text-strong);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

.app-dashboard-card-text {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: var(--space-5);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.app-dashboard-card-text-muted {
    color: var(--color-text-muted);
}

.app-dashboard-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
}

.app-dashboard-card-count {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

@media (min-width: 768px) {
    .app-dashboard-getly-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1536px) {
    .app-dashboard-getly-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1920px) {
    .app-dashboard-getly-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 2560px) {
    .app-dashboard-getly-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 3840px) {
    .app-dashboard-getly-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.app-dashboard-stat-card {
    container-type: inline-size;
    height: 100%;
    min-height: 17rem;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 1536px) {
    .app-dashboard-stat-col {
        flex: 0 0 auto;
        width: 33.333333%;
    }
}

.app-dashboard-stat-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.app-dashboard-stat-title-link {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    color: var(--color-text-strong);
    text-decoration: none;
}

.app-dashboard-stat-title-link:hover,
.app-dashboard-stat-title-link:focus {
    color: var(--color-text-strong);
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
}

.app-dashboard-stat-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.app-dashboard-stat-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.app-dashboard-stat-title {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

.app-dashboard-stat-switch {
    display: flex;
    align-self: flex-start;
    margin-bottom: var(--space-4);
}

.app-dashboard-stat-switch.app-tabs {
    align-self: stretch;
    gap: var(--space-4);
    padding: 0;
    background: transparent;
}

.app-dashboard-stat-switch button {
    white-space: nowrap;
}

.app-dashboard-stat-select {
    position: relative;
    display: none;
    width: max-content;
    min-width: min(12rem, 100%);
    max-width: 100%;
    justify-self: end;
}

.app-dashboard-stat-select-trigger,
.app-process-range-trigger {
    min-height: var(--control-height-lg);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.app-dashboard-stat-select-trigger:hover,
.app-dashboard-stat-select-trigger:focus,
.app-process-range-trigger:hover,
.app-process-range-trigger:focus {
    border-color: var(--color-focus-border);
    box-shadow: none;
}

.app-dashboard-stat-select-trigger svg,
.app-dashboard-stat-select-menu svg,
.app-process-range-trigger svg,
.app-process-range-menu svg {
    color: var(--color-brand);
    flex: 0 0 auto;
}

.app-dashboard-stat-select-menu,
.app-process-range-menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.app-dashboard-stat-select-menu button,
.app-process-range-menu button {
    min-height: var(--control-height-sm);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-strong);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.app-dashboard-stat-select-menu button:hover,
.app-dashboard-stat-select-menu button:focus,
.app-dashboard-stat-select-menu button.is-active,
.app-process-range-menu button:hover,
.app-process-range-menu button:focus,
.app-process-range-menu button.is-active {
    background: var(--color-surface-muted);
    color: inherit;
    outline: 0;
    box-shadow: none;
}

.app-dashboard-stat-select-menu button.is-active,
.app-process-range-menu button.is-active {
    font-weight: var(--font-weight-regular);
}

.app-dashboard-stat-select-trigger {
    width: 100%;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
}

.app-dashboard-stat-select-trigger svg {
    width: 1rem;
    height: 1rem;
}

.app-dashboard-stat-select-menu {
    z-index: var(--z-dropdown-raised);
    width: max-content;
    min-width: 100%;
    max-width: min(18rem, calc(100vw - var(--space-6)));
}

.app-dashboard-stat-select-menu[hidden] {
    display: none;
}

.app-dashboard-stat-select-menu button {
    padding-inline: var(--space-4);
}

@container (max-width: 28rem) {
    .app-dashboard-stat-switch {
        display: none;
    }

    .app-dashboard-stat-select {
        display: block;
    }
}

@media (min-width: 1920px) {
    .app-dashboard-stat-switch {
        display: flex;
    }

    .app-dashboard-stat-select {
        display: none;
    }
}

.app-dashboard-stat-panel[hidden] {
    display: none;
}

.app-dashboard-ranking {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-dashboard-ranking-link {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height-sm);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
}

.app-dashboard-ranking-link-no-marker {
    grid-template-columns: minmax(0, 1fr) auto;
}

.app-dashboard-ranking-link:hover,
.app-dashboard-ranking-link:focus {
    color: var(--color-text-strong);
    background: var(--color-surface-muted);
}

.app-dashboard-ranking-link.is-disabled,
.app-dashboard-ranking-link.is-disabled:hover,
.app-dashboard-ranking-link.is-disabled:focus {
    cursor: default;
    color: var(--color-text-muted);
    background: transparent;
}

.app-dashboard-ranking-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.app-dashboard-ranking-position svg {
    width: 1rem;
    height: 1rem;
}

.app-dashboard-ranking-name {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: var(--font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-dashboard-ranking-value {
    color: var(--color-text-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.app-dashboard-ranking-empty {
    min-height: var(--control-height-sm);
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.app-process-panel {
    overflow: visible;
    margin-bottom: var(--space-5);
    padding: 0;
}

.app-detail-card + .app-process-panel {
    margin-top: var(--space-5);
}

.app-process-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
}

.app-process-header::after {
    position: absolute;
    right: var(--space-5);
    bottom: 0;
    left: var(--space-5);
    height: 1px;
    background: var(--color-border);
    content: "";
}

.app-process-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.app-process-title-icon {
    width: 40px;
    height: 40px;
}

.app-process-title-icon svg {
    width: 23px;
    height: 23px;
}

.app-process-title {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

.app-process-range {
    position: relative;
    justify-self: end;
    z-index: var(--z-dropdown);
}

.app-process-range-trigger {
    list-style: none;
    white-space: nowrap;
}

.app-process-range-trigger::-webkit-details-marker {
    display: none;
}

.app-process-range-trigger svg,
.app-process-range-menu svg {
    width: 18px;
    height: 18px;
}

.app-process-range-menu {
    width: min(22rem, calc(100vw - var(--space-8)));
}

.app-process-range-menu button {
    padding: var(--space-2) var(--space-3);
}

.app-process-range-menu button,
.app-process-range-custom label,
.app-process-range-custom input {
    color: var(--color-text-strong);
    -webkit-text-fill-color: var(--color-text-strong);
}

.app-process-range-custom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.app-process-range-custom label {
    display: grid;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
}

.app-process-range-custom input {
    width: 100%;
    min-height: var(--control-height-sm);
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color-scheme: light;
    font: inherit;
    font-size: var(--font-size-sm);
}

.app-process-range-custom input::-webkit-datetime-edit,
.app-process-range-custom input::-webkit-datetime-edit-fields-wrapper,
.app-process-range-custom input::-webkit-datetime-edit-text,
.app-process-range-custom input::-webkit-datetime-edit-day-field,
.app-process-range-custom input::-webkit-datetime-edit-month-field,
.app-process-range-custom input::-webkit-datetime-edit-year-field {
    color: var(--color-text-strong);
}

.app-process-range-custom button {
    grid-column: 1 / -1;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    text-align: center;
}

.app-process-range-custom button:hover,
.app-process-range-custom button:focus {
    background: var(--color-brand-bright);
    color: var(--color-text-inverse);
}

.app-process-body {
    padding: var(--space-6) var(--space-5);
}

.app-process-flow {
    position: relative;
    --process-card-width: clamp(8.05rem, 9.8vw, 12.75rem);
    --process-gap-width: clamp(3.6rem, 5vw, 7.8rem);
    --process-card-height: 6.8rem;
    --process-step-width: calc(var(--process-card-width) + var(--process-gap-width));
    --process-line-size: 2px;
    --process-line-half: 1px;
    --process-arrow-size: 1.18rem;
    --process-arrow-length: calc(var(--process-arrow-size) * 0.9);
    --process-arrow-half: calc(var(--process-arrow-size) * 0.5);
    --process-arrow-clearance: var(--process-arrow-length);
    --process-branch-top: calc(var(--process-card-height) * 0.5);
    --process-branch-middle: calc(var(--process-card-height) * 1.25);
    --process-branch-bottom: calc(var(--process-card-height) * 2);
    --process-views-right: var(--process-card-width);
    --process-requests-left: var(--process-step-width);
    --process-requests-center: calc(var(--process-step-width) + (var(--process-card-width) * 0.5));
    --process-followups-left: calc(var(--process-step-width) * 2.5);
    --process-followups-right: calc((var(--process-step-width) * 2.5) + var(--process-card-width));
    --process-initial-left: calc(var(--process-step-width) * 2);
    --process-initial-right: calc((var(--process-step-width) * 2) + var(--process-card-width));
    --process-consents-left: calc(var(--process-step-width) * 3);
    --process-consents-right: calc((var(--process-step-width) * 3) + var(--process-card-width));
    --process-delivered-left: calc(var(--process-step-width) * 4);
    --process-delivered-center: calc((var(--process-step-width) * 4) + (var(--process-card-width) * 0.5));
    --process-delivered-top: calc(var(--process-card-height) * 0.75);
    --process-delivered-bottom: calc(var(--process-card-height) * 1.75);
    width: min(
        100%,
        calc((var(--process-card-width) * 5) + (var(--process-gap-width) * 4))
    );
    min-height: calc(var(--process-card-height) * 2.5);
    margin: 0 auto;
}

.app-process-connectors {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.app-process-line {
    position: absolute;
    color: var(--color-text-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.app-process-line-label {
    position: absolute;
    z-index: 2;
    padding: 0 var(--space-1);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.app-process-line::before,
.app-process-line::after {
    position: absolute;
    border: 0;
    content: "";
    background: currentColor;
}

.app-process-line-views-requests::after,
.app-process-line-initial-consents::after,
.app-process-line-requests-followups::after,
.app-process-line-requests-initial::after {
    width: var(--process-arrow-length);
    height: var(--process-arrow-size);
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.app-process-line-followups-delivered::after {
    width: var(--process-arrow-size);
    height: var(--process-arrow-length);
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.app-process-line-consents-delivered::after {
    width: var(--process-arrow-size);
    height: var(--process-arrow-length);
    background: currentColor;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.app-process-line-views-requests,
.app-process-line-initial-consents {
    height: var(--process-line-size);
    border-top: 0;
}

.app-process-line-views-requests {
    left: var(--process-views-right);
    top: var(--process-branch-middle);
    width: var(--process-gap-width);
}

.app-process-line-initial-consents {
    left: var(--process-initial-right);
    top: var(--process-branch-bottom);
    width: var(--process-gap-width);
}

.app-process-line-views-requests::after,
.app-process-line-initial-consents::after {
    right: 0;
    top: calc((var(--process-arrow-half) * -1) + var(--process-line-half));
}

.app-process-line-views-requests::before,
.app-process-line-initial-consents::before {
    left: 0;
    top: 0;
    width: calc(100% - var(--process-arrow-clearance));
    height: var(--process-line-size);
}

.app-process-line-requests-followups,
.app-process-line-requests-initial {
    left: var(--process-requests-center);
    width: calc(var(--process-followups-left) - var(--process-requests-center));
    height: var(--process-line-size);
    border-top: 0;
    background:
        linear-gradient(currentColor, currentColor)
        left top / calc(100% - var(--process-arrow-clearance)) var(--process-line-size)
        no-repeat;
}

.app-process-line-requests-followups {
    top: var(--process-branch-top);
    border-top-left-radius: var(--radius-lg);
}

.app-process-line-requests-initial {
    top: var(--process-branch-bottom);
    width: calc(var(--process-initial-left) - var(--process-requests-center));
    border-bottom-left-radius: var(--radius-lg);
}

.app-process-line-requests-followups::before {
    left: 0;
    top: 0;
    height: calc(var(--process-branch-middle) - var(--process-branch-top));
    width: var(--process-line-size);
}

.app-process-line-requests-initial::before {
    left: 0;
    bottom: 0;
    height: calc(var(--process-branch-bottom) - var(--process-branch-middle));
    width: var(--process-line-size);
}

.app-process-line-requests-followups::after,
.app-process-line-requests-initial::after {
    right: 0;
    top: calc((var(--process-arrow-half) * -1) + var(--process-line-half));
}

.app-process-line-followups-delivered,
.app-process-line-consents-delivered {
    height: var(--process-line-size);
    border-top: 0;
    background:
        linear-gradient(currentColor, currentColor)
        left top / 100% var(--process-line-size)
        no-repeat;
}

.app-process-line-followups-delivered {
    left: var(--process-followups-right);
    top: var(--process-branch-top);
    width: calc(var(--process-delivered-center) - var(--process-followups-right));
}

.app-process-line-consents-delivered {
    left: var(--process-consents-right);
    top: var(--process-branch-bottom);
    width: calc(var(--process-delivered-center) - var(--process-consents-right));
}

.app-process-line-followups-delivered::before {
    right: 0;
    top: 0;
    height: calc(var(--process-delivered-top) - var(--process-branch-top) - var(--process-arrow-clearance));
    width: var(--process-line-size);
}

.app-process-line-consents-delivered::before {
    right: 0;
    bottom: 0;
    height: calc(var(--process-branch-bottom) - var(--process-delivered-bottom) - var(--process-arrow-clearance));
    width: var(--process-line-size);
}

.app-process-line-followups-delivered::after {
    right: calc((var(--process-arrow-half) * -1) + var(--process-line-half));
    top: calc(var(--process-delivered-top) - var(--process-branch-top) - var(--process-arrow-length));
}

.app-process-line-consents-delivered::after {
    right: calc((var(--process-arrow-half) * -1) + var(--process-line-half));
    bottom: calc(var(--process-branch-bottom) - var(--process-delivered-bottom) - var(--process-arrow-length));
}

.app-process-line-views-requests .app-process-line-label {
    left: 50%;
    top: calc((var(--font-size-sm) + var(--space-2)) * -1);
    transform: translateX(-50%);
}

.app-process-line-initial-consents .app-process-line-label {
    left: 50%;
    top: var(--space-2);
    transform: translateX(-50%);
}

.app-process-line-requests-followups .app-process-line-label,
.app-process-line-followups-delivered .app-process-line-label {
    left: 50%;
    top: calc((var(--font-size-sm) + var(--space-2)) * -1);
    transform: translateX(-50%);
}

.app-process-line-requests-initial .app-process-line-label,
.app-process-line-consents-delivered .app-process-line-label {
    left: 50%;
    top: var(--space-2);
    transform: translateX(-50%);
}

.app-process-card {
    position: absolute;
    z-index: 1;
    width: var(--process-card-width);
    min-width: 0;
    min-height: var(--process-card-height);
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.app-process-card-button {
    appearance: none;
    cursor: default;
    font: inherit;
    text-align: inherit;
}

.app-process-card[href]:hover,
.app-process-card[href]:focus {
    color: inherit;
    border-color: color-mix(in srgb, var(--color-brand-blue) 38%, var(--color-border));
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.app-process-card-icon {
    width: 30px;
    height: 30px;
    grid-column: 1;
    grid-row: 1;
}

.app-process-card-icon svg {
    width: 18px;
    height: 18px;
}

.app-process-card-arrow {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    color: var(--color-text-muted);
}

.app-process-card-arrow svg {
    width: 26px;
    height: 26px;
}

.app-process-card-value {
    grid-column: 1 / 4;
    grid-row: 2;
    align-self: end;
    color: var(--color-text-strong);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-align: center;
}

@media (min-width: 1536px) {
    .app-process-flow {
        --process-card-width: clamp(9rem, 10.5vw, 14rem);
        --process-gap-width: clamp(3.75rem, 5.6vw, 9rem);
        --process-card-height: 7.1rem;
    }

    .app-process-line {
        font-size: var(--font-size-base);
    }

    .app-process-card-value {
        font-size: var(--font-size-xl);
    }
}

@media (min-width: 1920px) {
    .app-process-flow {
        --process-card-width: clamp(10rem, 9.6vw, 15.5rem);
        --process-gap-width: clamp(5rem, 6vw, 10.5rem);
    }
}

.app-process-card-label {
    grid-column: 1 / 4;
    grid-row: 3;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    text-align: center;
}

.app-process-card-views {
    left: 0;
    top: calc(var(--process-card-height) * 0.75);
}

.app-process-card-requests {
    left: calc(var(--process-card-width) + var(--process-gap-width));
    top: calc(var(--process-card-height) * 0.75);
}

.app-process-card-followups {
    left: calc((var(--process-card-width) + var(--process-gap-width)) * 2.5);
    top: 0;
}

.app-process-card-initial {
    left: calc((var(--process-card-width) + var(--process-gap-width)) * 2);
    top: calc(var(--process-card-height) * 1.5);
}

.app-process-card-consents {
    left: calc((var(--process-card-width) + var(--process-gap-width)) * 3);
    top: calc(var(--process-card-height) * 1.5);
}

.app-process-card-delivered {
    left: calc((var(--process-card-width) + var(--process-gap-width)) * 4);
    top: calc(var(--process-card-height) * 0.75);
}

@media (max-width: 1023.98px) {
    .app-process-flow {
        width: min(100%, 32rem);
        --process-mobile-card-width: 11.8rem;
        --process-mobile-card-half: calc(var(--process-mobile-card-width) * 0.5);
        --process-mobile-branch-width: calc((32rem - var(--process-mobile-card-width)) * 0.5);
        --process-mobile-card-height: 6.55rem;
        --process-mobile-gap-height: 3.25rem;
        --process-mobile-step-height: calc(var(--process-mobile-card-height) + var(--process-mobile-gap-height));
        --process-mobile-center: 50%;
        --process-mobile-left-center: var(--process-mobile-card-half);
        --process-mobile-right-center: calc(100% - var(--process-mobile-card-half));
        --process-mobile-delivered-arm-width: max(calc(var(--process-arrow-clearance) + 0.5rem), calc(var(--process-mobile-branch-width) - var(--process-mobile-card-half)));
        --process-mobile-views-top: 2rem;
        --process-mobile-requests-top: calc(var(--process-mobile-views-top) + var(--process-mobile-step-height));
        --process-mobile-initial-top: calc(var(--process-mobile-views-top) + (var(--process-mobile-step-height) * 2));
        --process-mobile-followups-top: calc(var(--process-mobile-initial-top) + (var(--process-mobile-step-height) * 0.5));
        --process-mobile-consents-top: calc(var(--process-mobile-views-top) + (var(--process-mobile-step-height) * 3));
        --process-mobile-delivered-top: calc(var(--process-mobile-views-top) + (var(--process-mobile-step-height) * 4));
        --process-mobile-views-bottom: calc(var(--process-mobile-views-top) + var(--process-mobile-card-height));
        --process-mobile-requests-center-y: calc(var(--process-mobile-requests-top) + (var(--process-mobile-card-height) * 0.5));
        --process-mobile-initial-bottom: calc(var(--process-mobile-initial-top) + var(--process-mobile-card-height));
        --process-mobile-followups-bottom: calc(var(--process-mobile-followups-top) + var(--process-mobile-card-height));
        --process-mobile-consents-bottom: calc(var(--process-mobile-consents-top) + var(--process-mobile-card-height));
        --process-mobile-delivered-center-y: calc(var(--process-mobile-delivered-top) + (var(--process-mobile-card-height) * 0.5));
        min-height: calc(var(--process-mobile-delivered-top) + var(--process-mobile-card-height) + var(--space-4));
    }

    .app-process-card {
        width: var(--process-mobile-card-width);
        min-height: var(--process-mobile-card-height);
    }

    .app-process-card-value {
        transform: translateY(-0.12rem);
    }

    .app-process-line-label {
        background: var(--color-surface);
    }

    .app-process-line-views-requests {
        left: var(--process-mobile-center);
        top: var(--process-mobile-views-bottom);
        width: var(--process-line-size);
        height: calc(var(--process-mobile-requests-top) - var(--process-mobile-views-bottom));
        border-top: 0;
        border-left: 0;
    }

    .app-process-line-views-requests::before {
        left: 0;
        top: 0;
        width: var(--process-line-size);
        height: calc(100% - var(--process-arrow-clearance));
        background: currentColor;
    }

    .app-process-line-views-requests::after {
        left: calc((var(--process-arrow-half) * -1) + var(--process-line-half));
        right: auto;
        top: auto;
        bottom: 0;
        width: var(--process-arrow-size);
        height: var(--process-arrow-length);
        background: currentColor;
        border: 0;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    .app-process-line-views-requests .app-process-line-label {
        left: calc(var(--space-5) * -1);
        top: 50%;
        transform: translate(-100%, -50%);
    }

    .app-process-line-requests-followups,
    .app-process-line-requests-initial,
    .app-process-line-followups-delivered,
    .app-process-line-consents-delivered {
        border-top: 0;
        width: var(--process-line-size);
    }

    .app-process-line-requests-followups {
        left: var(--process-mobile-right-center);
        top: var(--process-mobile-requests-center-y);
        height: calc(var(--process-mobile-followups-top) - var(--process-mobile-requests-center-y));
        border-left: 0;
        background:
            linear-gradient(currentColor, currentColor)
            left top / var(--process-line-size) calc(100% - var(--process-arrow-clearance))
            no-repeat;
    }

    .app-process-line-requests-followups::before {
        left: auto;
        right: 0;
        top: 0;
        width: var(--process-mobile-branch-width);
        height: var(--process-line-size);
        background: currentColor;
        border-top: 0;
        border-left: 0;
    }

    .app-process-line-requests-followups::after {
        left: calc((var(--process-arrow-half) * -1) + var(--process-line-half));
        right: auto;
        top: auto;
        bottom: 0;
        width: var(--process-arrow-size);
        height: var(--process-arrow-length);
        background: currentColor;
        border: 0;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    .app-process-line-requests-followups .app-process-line-label {
        left: var(--space-5);
        top: 50%;
        transform: translateY(-50%);
    }

    .app-process-line-requests-initial {
        left: var(--process-mobile-left-center);
        top: var(--process-mobile-requests-center-y);
        height: calc(var(--process-mobile-initial-top) - var(--process-mobile-requests-center-y));
        border-left: 0;
        background:
            linear-gradient(currentColor, currentColor)
            left top / var(--process-line-size) calc(100% - var(--process-arrow-clearance))
            no-repeat;
    }

    .app-process-line-requests-initial::before {
        right: auto;
        left: 0;
        top: 0;
        width: var(--process-mobile-branch-width);
        height: var(--process-line-size);
        background: currentColor;
        border-top: 0;
        border-left: 0;
    }

    .app-process-line-requests-initial::after {
        left: calc((var(--process-arrow-half) * -1) + var(--process-line-half));
        right: auto;
        top: auto;
        bottom: 0;
        width: var(--process-arrow-size);
        height: var(--process-arrow-length);
        background: currentColor;
        border: 0;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    .app-process-line-requests-initial .app-process-line-label {
        left: calc(var(--space-5) * -1);
        top: 50%;
        transform: translate(-100%, -50%);
    }

    .app-process-line-initial-consents {
        left: var(--process-mobile-left-center);
        top: var(--process-mobile-initial-bottom);
        width: var(--process-line-size);
        height: calc(var(--process-mobile-consents-top) - var(--process-mobile-initial-bottom));
        border-top: 0;
        border-left: 0;
    }

    .app-process-line-initial-consents::before {
        left: 0;
        top: 0;
        width: var(--process-line-size);
        height: calc(100% - var(--process-arrow-clearance));
        background: currentColor;
    }

    .app-process-line-initial-consents::after {
        left: calc((var(--process-arrow-half) * -1) + var(--process-line-half));
        right: auto;
        top: auto;
        bottom: 0;
        width: var(--process-arrow-size);
        height: var(--process-arrow-length);
        background: currentColor;
        border: 0;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    .app-process-line-initial-consents .app-process-line-label {
        left: calc(var(--space-5) * -1);
        top: 50%;
        transform: translate(-100%, -50%);
    }

    .app-process-line-followups-delivered {
        left: var(--process-mobile-right-center);
        top: var(--process-mobile-followups-bottom);
        height: calc(var(--process-mobile-delivered-center-y) - var(--process-mobile-followups-bottom));
        border-left: 0;
        background:
            linear-gradient(currentColor, currentColor)
            left top / var(--process-line-size) 100%
            no-repeat;
    }

    .app-process-line-followups-delivered::before {
        left: auto;
        right: 0;
        top: auto;
        bottom: 0;
        width: calc(var(--process-mobile-delivered-arm-width) - var(--process-arrow-clearance));
        height: var(--process-line-size);
        background: currentColor;
        border-top: 0;
        border-left: 0;
    }

    .app-process-line-followups-delivered::after {
        display: none;
    }

    .app-process-line-followups-delivered .app-process-line-label {
        left: var(--space-5);
        top: 50%;
        transform: translateY(-50%);
    }

    .app-process-line-consents-delivered {
        left: var(--process-mobile-left-center);
        top: var(--process-mobile-consents-bottom);
        height: calc(var(--process-mobile-delivered-center-y) - var(--process-mobile-consents-bottom));
        border-left: 0;
        background:
            linear-gradient(currentColor, currentColor)
            left top / var(--process-line-size) 100%
            no-repeat;
    }

    .app-process-line-consents-delivered::before {
        right: auto;
        left: 0;
        top: auto;
        bottom: 0;
        width: calc(var(--process-mobile-delivered-arm-width) - var(--process-arrow-clearance));
        height: var(--process-line-size);
        background: currentColor;
        border-top: 0;
        border-left: 0;
    }

    .app-process-line-consents-delivered::after {
        display: none;
    }

    .app-process-line-consents-delivered .app-process-line-label {
        left: calc(var(--space-5) * -1);
        top: 50%;
        transform: translate(-100%, -50%);
    }

    .app-process-card-views {
        left: calc(50% - var(--process-mobile-card-half));
        top: var(--process-mobile-views-top);
    }

    .app-process-card-requests {
        left: calc(50% - var(--process-mobile-card-half));
        top: var(--process-mobile-requests-top);
    }

    .app-process-card-followups {
        left: auto;
        right: 0;
        top: var(--process-mobile-followups-top);
    }

    .app-process-card-initial {
        left: 0;
        right: auto;
        top: var(--process-mobile-initial-top);
    }

    .app-process-card-consents {
        left: 0;
        right: auto;
        top: var(--process-mobile-consents-top);
    }

    .app-process-card-delivered {
        left: calc(50% - var(--process-mobile-card-half));
        right: auto;
        top: var(--process-mobile-delivered-top);
    }

    .app-process-card-delivered::before,
    .app-process-card-delivered::after {
        position: absolute;
        top: calc(50% - var(--process-arrow-half));
        z-index: 2;
        width: var(--process-arrow-length);
        height: var(--process-arrow-size);
        background: var(--color-text-strong);
        content: "";
    }

    .app-process-card-delivered::before {
        left: calc(var(--process-arrow-length) * -1);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
    }

    .app-process-card-delivered::after {
        left: 100%;
        clip-path: polygon(100% 0, 0 50%, 100% 100%);
    }
}

@media (max-width: 767.98px) {
    .app-process-panel {
        padding: 0;
    }

    .app-process-header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-5);
    }

    .app-process-header::after {
        right: var(--space-5);
        left: var(--space-5);
    }

    .app-process-title-wrap {
        align-items: center;
    }

    .app-process-range-trigger {
        min-height: var(--control-height-lg);
        justify-content: space-between;
        padding: 0 var(--space-4);
    }

    .app-process-range-trigger span {
        display: inline;
    }

    .app-process-body {
        padding: var(--space-6) var(--space-5);
    }

    .app-process-flow {
        width: min(100%, 32rem);
    }

    .app-process-card {
        width: var(--process-mobile-card-width);
    }

    .app-process-card-views,
    .app-process-card-requests,
    .app-process-card-delivered {
        left: calc(50% - var(--process-mobile-card-half));
    }

    .app-process-card-initial,
    .app-process-card-consents {
        left: 0;
        right: auto;
    }

    .app-process-card-followups {
        left: auto;
        right: 0;
    }

    .app-process-range-menu {
        left: auto;
        right: 0;
        width: min(22rem, calc(100vw - var(--space-8)));
    }
}

@media (max-width: 479.98px) {
    .app-process-panel {
        padding: 0;
    }

    .app-process-header {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: var(--space-4);
    }

    .app-process-title-wrap {
        width: 100%;
    }

    .app-process-range {
        width: 100%;
        justify-self: stretch;
    }

    .app-process-range-trigger {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
        padding: 0 var(--space-3);
    }

    .app-process-range-menu {
        right: 0;
        left: 0;
        width: 100%;
        max-width: none;
    }

    .app-process-body {
        padding: var(--space-4) var(--space-3) var(--space-2);
    }

    .app-process-flow {
        --process-mobile-card-width: min(9.7rem, calc(50vw - var(--space-4)));
        --process-mobile-card-half: calc(var(--process-mobile-card-width) * 0.5);
        --process-mobile-card-height: 4.85rem;
        --process-mobile-gap-height: 2rem;
        --process-mobile-step-height: calc(var(--process-mobile-card-height) + var(--process-mobile-gap-height));
        --process-mobile-views-top: 1rem;
        --process-mobile-requests-top: calc(var(--process-mobile-views-top) + var(--process-mobile-step-height));
        --process-mobile-initial-top: calc(var(--process-mobile-views-top) + (var(--process-mobile-step-height) * 2));
        --process-mobile-followups-top: calc(var(--process-mobile-views-top) + (var(--process-mobile-step-height) * 3));
        --process-mobile-consents-top: calc(var(--process-mobile-views-top) + (var(--process-mobile-step-height) * 4));
        --process-mobile-delivered-top: calc(var(--process-mobile-views-top) + (var(--process-mobile-step-height) * 5));
        --process-mobile-views-bottom: calc(var(--process-mobile-views-top) + var(--process-mobile-card-height));
        --process-mobile-requests-bottom: calc(var(--process-mobile-requests-top) + var(--process-mobile-card-height));
        --process-mobile-initial-bottom: calc(var(--process-mobile-initial-top) + var(--process-mobile-card-height));
        --process-mobile-followups-bottom: calc(var(--process-mobile-followups-top) + var(--process-mobile-card-height));
        --process-mobile-consents-bottom: calc(var(--process-mobile-consents-top) + var(--process-mobile-card-height));
        --process-mobile-delivered-center-y: var(--process-mobile-delivered-top);
        --process-phone-left-x: calc(50% - var(--process-mobile-card-half) + var(--space-4));
        --process-phone-right-x: calc(50% + var(--process-mobile-card-half) - var(--space-4));
        --process-mobile-left-center: var(--process-phone-left-x);
        --process-mobile-right-center: var(--process-phone-right-x);
        min-height: calc(var(--process-mobile-delivered-top) + var(--process-mobile-card-height) + var(--space-1));
    }

    .app-process-card {
        min-height: var(--process-mobile-card-height);
        grid-template-rows: 1fr auto;
        padding: var(--space-2);
    }

    .app-process-card-icon {
        position: absolute;
        left: var(--space-2);
        top: var(--space-2);
    }

    .app-process-card-arrow {
        position: absolute;
        right: var(--space-2);
        top: var(--space-2);
    }

    .app-process-card-icon {
        width: 28px;
        height: 28px;
    }

    .app-process-card-icon svg {
        width: 17px;
        height: 17px;
    }

    .app-process-card-arrow svg {
        width: 21px;
        height: 21px;
    }

    .app-process-card-value {
        grid-column: 1 / 4;
        grid-row: 1;
        align-self: center;
        font-size: var(--font-size-lg);
        text-align: center;
        transform: translateY(0.26rem);
    }

    .app-process-card-label {
        grid-column: 1 / 4;
        grid-row: 2;
    }

    .app-process-card-views,
    .app-process-card-requests,
    .app-process-card-delivered {
        left: calc(50% - var(--process-mobile-card-half));
    }

    .app-process-card-initial,
    .app-process-card-consents {
        left: 0;
    }

    .app-process-card-followups {
        right: 0;
    }

    .app-process-line-requests-initial {
        left: var(--process-phone-left-x);
        top: var(--process-mobile-requests-bottom);
        height: calc(var(--process-mobile-initial-top) - var(--process-mobile-requests-bottom));
    }

    .app-process-line-requests-followups {
        left: var(--process-phone-right-x);
        top: var(--process-mobile-requests-bottom);
        height: calc(var(--process-mobile-followups-top) - var(--process-mobile-requests-bottom));
    }

    .app-process-line-requests-initial::before,
    .app-process-line-requests-followups::before {
        display: none;
    }

    .app-process-line-followups-delivered {
        left: var(--process-phone-right-x);
        top: var(--process-mobile-followups-bottom);
        height: calc(var(--process-mobile-delivered-center-y) - var(--process-mobile-followups-bottom));
    }

    .app-process-line-consents-delivered {
        left: var(--process-phone-left-x);
        top: var(--process-mobile-consents-bottom);
        height: calc(var(--process-mobile-delivered-center-y) - var(--process-mobile-consents-bottom));
    }

    .app-process-line-followups-delivered,
    .app-process-line-consents-delivered {
        background:
            linear-gradient(currentColor, currentColor)
            left top / var(--process-line-size) calc(100% - var(--process-arrow-clearance))
            no-repeat;
    }

    .app-process-line-followups-delivered::before,
    .app-process-line-consents-delivered::before,
    .app-process-card-delivered::before,
    .app-process-card-delivered::after {
        content: none !important;
        display: none;
    }

    .app-process-line-followups-delivered::after,
    .app-process-line-consents-delivered::after {
        display: block !important;
        left: calc((var(--process-arrow-half) * -1) + var(--process-line-half));
        right: auto;
        top: auto;
        bottom: 0;
        width: var(--process-arrow-size);
        height: var(--process-arrow-length);
        background: currentColor;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
}

/* ==========================================================================
   GETLY FILES AND META
   ========================================================================== */

/* ==========================================================================
   ASSET UPLOAD COMPONENT (4-state: empty / filled / dragover / mobile)
   ========================================================================== */

.app-asset-upload {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.app-asset-upload--cover .app-asset-upload__body {
    height: 200px;
}

.app-asset-upload--cover .app-asset-upload__preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.app-asset-upload--empty {
    border: 1.5px dashed var(--color-border);
    cursor: pointer;
}

.app-asset-upload--empty:hover {
    border-color: var(--color-text-muted);
    background: var(--color-surface-muted);
}

.app-asset-upload--filled {
    border: 1.5px solid var(--color-border);
}

[data-edit-mode-form]:not(.is-editing) .app-asset-upload {
    pointer-events: none;
}

[data-edit-mode-form]:not(.is-editing) .app-asset-upload__empty-content {
    pointer-events: none;
}

[data-edit-mode-form]:not(.is-editing) .app-asset-upload__overlay,
[data-edit-mode-form]:not(.is-editing) .app-asset-upload__mobile-actions {
    display: none;
}

.app-asset-upload--dragover {
    border-style: dashed !important;
    border-color: var(--color-brand) !important;
    box-shadow: var(--shadow-inset-focus);
}

.app-asset-upload--dragover .app-asset-upload__preview {
    opacity: 0.25;
}

.app-asset-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.app-asset-upload__body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: var(--space-4);
}

.app-asset-upload__empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: auto;
}

.app-asset-upload__icon {
    display: block;
    width: 24px;
    height: 24px;
    color: var(--color-text-muted);
}

.app-asset-upload__icon--read,
.app-asset-upload__empty-label--read {
    display: none;
}

[data-edit-mode-form]:not(.is-editing) .app-asset-upload--empty .app-asset-upload__icon--read,
[data-edit-mode-form]:not(.is-editing) .app-asset-upload--empty .app-asset-upload__empty-label--read {
    display: block;
}

[data-edit-mode-form]:not(.is-editing) .app-asset-upload--empty .app-asset-upload__icon--edit,
[data-edit-mode-form]:not(.is-editing) .app-asset-upload--empty .app-asset-upload__empty-label--edit {
    display: none;
}

.app-asset-upload__empty-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.app-asset-upload__empty-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding: 7px 14px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-brand);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    pointer-events: auto;
    transition: opacity var(--transition-fast);
}

.app-asset-upload__empty-action:hover,
.app-asset-upload__empty-action:focus-visible {
    opacity: 0.88;
}

.app-asset-upload__preview {
    max-width: 70%;
    max-height: 72px;
    object-fit: contain;
    display: block;
    transition: opacity 0.15s;
}

.app-asset-upload__file-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
}

.app-asset-upload__file-icon {
    display: block;
    width: 28px;
    height: 28px;
    color: var(--color-text-muted);
}

.app-asset-upload__file-name {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    text-align: center;
    word-break: break-all;
    max-width: 260px;
}

.app-asset-upload__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--color-overlay-asset);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.app-asset-upload--filled:hover .app-asset-upload__overlay {
    opacity: 1;
    pointer-events: auto;
}

.app-asset-upload--dragover .app-asset-upload__overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

.app-asset-upload__overlay-buttons {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

.app-asset-upload__btn-replace,
.app-asset-upload__btn-generate {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 7px 14px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-brand);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.app-asset-upload__btn-replace:hover,
.app-asset-upload__btn-generate:hover {
    opacity: 0.88;
}

.app-asset-upload__btn-generate:disabled,
.app-asset-upload__empty-action:disabled,
.app-asset-upload__mobile-btn:disabled {
    cursor: wait;
    opacity: 0.7;
}

.app-asset-upload__btn-delete {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 7px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.app-asset-upload__btn-delete:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

.app-asset-upload__btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.app-asset-upload__btn-icon svg,
.app-asset-upload__icon svg,
.app-asset-upload__drag-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.app-asset-upload__drag-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--color-overlay-drag);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.app-asset-upload--dragover .app-asset-upload__drag-overlay {
    opacity: 1;
}

.app-asset-upload__drag-icon {
    display: block;
    width: 24px;
    height: 24px;
    color: var(--color-text);
}

.app-asset-upload__drag-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.app-asset-upload__mobile-actions {
    display: none;
}

@media (min-width: 1024px) {
    .app-platform-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1536px) {
    .app-platform-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1920px) {
    .app-platform-overview-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 2560px) {
    .app-platform-overview-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.app-form-hint {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

@media (max-width: 767.98px) {
    .app-platform-overview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-asset-upload--filled .app-asset-upload__body {
        height: 110px;
    }

    .app-asset-upload--filled .app-asset-upload__overlay {
        display: none;
    }

    .app-asset-upload__mobile-actions {
        display: flex;
        border-top: 1px solid var(--color-border);
    }

    .app-asset-upload__mobile-btn {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
        padding: 11px 0;
        border: none;
        background: transparent;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text);
        cursor: pointer;
        transition: background var(--transition-fast);
    }

    .app-asset-upload__mobile-btn:hover,
    .app-asset-upload__mobile-btn:active {
        background: var(--color-surface-muted);
    }

    .app-asset-upload__mobile-btn + .app-asset-upload__mobile-btn {
        border-left: 1px solid var(--color-border);
    }

    .app-asset-upload__mobile-btn--delete {
        color: var(--color-danger);
    }

    .app-asset-upload__mobile-btn--delete:hover,
    .app-asset-upload__mobile-btn--delete:active {
        background: var(--color-danger-soft);
    }
}

/* ── LP Design page ── */
.app-design-head,
.app-design-row {
    display: grid;
    grid-template-columns: 160px 1fr 1fr;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-2) 0;
}

.app-design-head {
    padding-bottom: var(--space-1);
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-1);
}

.app-design-panel-web .app-design-head {
    display: none;
}

.app-design-panel-web .app-design-row {
    grid-template-columns: minmax(8.75rem, 11rem) minmax(14rem, 24rem) minmax(14rem, 24rem);
    justify-content: start;
}

.app-lp-editor-tabs {
    margin-bottom: 0;
    justify-content: center;
    padding-top: var(--space-4);
}

.app-lp-editor-tabs .app-tab {
    gap: var(--space-2);
}

.app-lp-editor-tabs .app-detail-tab-icon {
    margin-right: 0;
}

.app-lp-editor-alerts {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.app-lp-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.app-lp-preview-controls,
.app-lp-preview-dimensions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.app-lp-preview-controls {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.app-lp-preview-preset-select,
.app-lp-preview-preset-select + .app-custom-select {
    min-width: 15rem;
}

.app-lp-preview-preset-select + .app-custom-select .app-custom-select-trigger,
.app-lp-preview-dimension-input {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.app-lp-preview-preset-select + .app-custom-select .app-custom-select-trigger:hover,
.app-lp-preview-preset-select + .app-custom-select.is-open .app-custom-select-trigger,
.app-lp-preview-stepper:hover .app-lp-preview-dimension-input {
    border-color: transparent;
    background: var(--color-surface-muted);
}

.app-lp-preview-preset-select + .app-custom-select .app-custom-select-trigger:focus,
.app-lp-preview-dimension-input:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    outline: 0;
}

.app-lp-preview-stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.app-lp-preview-dimension-input {
    width: 4.2rem;
    min-height: var(--control-height-md);
    padding-inline: var(--space-1);
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.app-lp-preview-dimension-input::-webkit-inner-spin-button,
.app-lp-preview-dimension-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.app-lp-preview-stepper-buttons {
    display: inline-grid;
    gap: 0.125rem;
}

.app-lp-preview-stepper-button {
    width: 1.05rem;
    height: 0.9rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.app-lp-preview-stepper-button::before {
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: translateY(0.12rem) rotate(45deg);
}

.app-lp-preview-stepper-button--down::before {
    transform: translateY(-0.12rem) rotate(225deg);
}

.app-lp-preview-stepper-button:hover,
.app-lp-preview-stepper-button:focus-visible {
    color: var(--color-brand);
    outline: 0;
}

.app-lp-preview-stage {
    width: max-content;
    max-width: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-inline: auto;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
}

.app-pdf-preview-image-wrap {
    display: grid;
    place-items: center;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
}

.app-pdf-preview-image {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.app-debug-details {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.app-debug-details code {
    display: block;
    margin-top: var(--space-2);
    white-space: pre-wrap;
    word-break: break-word;
}

.app-lp-preview-frame {
    display: block;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.app-lp-editor-panel {
    padding-top: calc(var(--space-8) + var(--space-4));
}

.app-lp-editor-panel[data-lp-edit-panel="preview"] {
    width: 100%;
    overflow-x: auto;
    padding-bottom: var(--space-2);
}

.app-lp-preview-scroll {
    overflow-x: auto;
    padding-bottom: var(--space-2);
}

.app-lp-editor-panel > .app-form-section:first-child {
    padding-top: 0;
}

.app-design-col-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

/* ── LP Type Selector ── */
.app-lp-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}

.app-lp-type-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.app-lp-type-card:hover {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 4%, transparent);
}

.app-lp-type-card.is-selected {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 6%, transparent);
}

.app-lp-type-radio { display: none; }

.app-lp-type-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.app-lp-type-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.app-design-element-label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}


.app-design-color-control {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.app-design-color-control .app-custom-select {
    flex: 1;
    min-width: 0;
}

.app-design-swatch {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.app-color-swatch {
    width: 28px;
    height: 28px;
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-surface) 65%, transparent);
    vertical-align: middle;
}

.app-color-input-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.app-color-input-group .app-form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.app-color-picker {
    flex: 0 0 var(--control-height-lg);
    width: var(--control-height-lg);
    height: var(--control-height-lg);
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
}

.app-color-picker.is-empty {
    background:
        linear-gradient(135deg, transparent calc(50% - 1px), color-mix(in srgb, var(--color-border) 75%, transparent) 50%, transparent calc(50% + 1px)),
        var(--color-surface);
}

.app-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.app-color-picker::-webkit-color-swatch {
    border: 0;
    border-radius: var(--radius-xs);
}

.app-color-picker.is-empty::-webkit-color-swatch {
    background: transparent !important;
}

.app-color-picker::-moz-color-swatch {
    border: 0;
    border-radius: var(--radius-xs);
}

.app-color-picker.is-empty::-moz-color-swatch {
    background: transparent !important;
}

.app-design-font-control {
    display: flex;
    align-items: center;
}

.app-design-font-control .app-custom-select {
    width: 100%;
    min-width: 0;
}

.app-design-panel-web .app-design-color-control .app-custom-select,
.app-design-panel-web .app-design-font-control .app-custom-select {
    max-width: 24rem;
}

.app-design-edit-block {
    display: none;
}

[data-edit-mode-form].is-editing .app-design-edit-block {
    display: block;
}

[data-edit-mode-form].is-editing .app-form-grid.app-design-edit-block {
    display: grid;
}

[data-edit-mode-form].is-editing .app-design-readonly-block {
    display: none;
}

[data-edit-mode-form].is-editing [data-edit-start-actions] {
    display: none;
}

.app-design-font-na,
.app-design-font-hint,
.app-design-no-colors {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.app-design-readonly-line,
.app-design-readonly-stack,
.app-design-text-icon,
.app-detail-list {
    min-width: 0;
}

.app-design-readonly-stack {
    display: grid;
    gap: var(--space-1);
}

.app-design-readonly-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.app-design-readonly-line {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-strong);
    font-weight: var(--font-weight-semibold);
}

.app-design-readonly-secondary {
    color: var(--color-text-strong);
}

.app-design-readonly-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-design-readonly-image {
    display: grid;
    min-height: 16rem;
    place-items: center;
}

.app-design-readonly-image img {
    display: block;
    width: min(100%, 44rem);
    max-height: 28rem;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.app-design-readonly-empty {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.app-design-readonly-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-muted);
}

.app-design-readonly-empty-icon svg {
    width: 100%;
    height: 100%;
}

.app-design-text-icon {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--color-brand);
}

.app-design-text-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-detail-list {
    display: grid;
    gap: var(--space-1);
}

@media (max-width: 767.98px) {
    .app-design-head {
        display: none;
    }

    .app-design-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        padding: var(--space-3) 0;
    }

    .app-design-panel-web .app-design-row {
        grid-template-columns: 1fr;
    }

    .app-design-element-label {
        font-weight: var(--font-weight-medium);
    }

    .app-design-panel-web .app-design-color-control .app-custom-select,
    .app-design-panel-web .app-design-font-control .app-custom-select {
        max-width: none;
    }
}

.app-meta-bar {
    position: relative;
    display: block;
    margin-bottom: var(--space-6);
    min-height: 0;
    padding-right: 0;
}

.app-meta-bar > .dropdown,
.app-meta-bar > .app-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.app-meta-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
}

.app-meta-item {
    min-width: 0;
}

.app-meta-label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    text-transform: none;
}

.app-meta-value {
    display: block;
    color: var(--color-text-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    overflow-wrap: anywhere;
}

.app-client-detail-status {
    min-height: var(--control-height);
    min-width: 8.75rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
}

.app-client-detail-status.dropdown-toggle::after {
    width: 30px;
}

.app-detail-more-actions .dropdown-toggle::after {
    display: none;
}

@media (min-width: 1536px) {
    .app-meta-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1365.98px) {
    .app-meta-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .app-meta-bar {
        padding-right: 0;
    }

    .app-meta-bar > .dropdown,
    .app-meta-bar > .app-badge {
        display: inline-flex;
    }

    .app-meta-list {
        grid-template-columns: 1fr;
    }
}

.app-meta-actions {
    position: absolute;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 2;
    margin: 0;
}

.app-code-block {
    max-height: 520px;
    overflow: auto;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text-strong);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    line-height: 1.55;
    white-space: pre-wrap;
}

.app-timeline-table {
    table-layout: fixed;
    margin-bottom: var(--space-6);
}

.app-timeline-table .app-table-col-time {
    width: 11.25rem;
    max-width: 11.25rem;
}

.app-timeline-table .app-table-col-event {
    width: 13.75rem;
    max-width: 13.75rem;
}

.app-timeline-table .app-table-col-source {
    width: 8rem;
    max-width: 8rem;
}

.app-timeline-table .app-table-col-ip {
    width: 8.75rem;
    max-width: 8.75rem;
}

.app-timeline-table .app-table-col-note {
    width: auto;
}

.app-timeline-time {
    white-space: nowrap;
}

.app-timeline-time-content {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.app-timeline-time-icon {
    display: inline-flex;
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

.app-timeline-table .app-access-request-badge {
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    padding-right: var(--space-3);
}

.app-timeline-table .app-access-request-badge .app-badge-label {
    flex: 0 1 auto;
}

.app-timeline-note {
    overflow-wrap: anywhere;
}

@media (max-width: 1023.98px) {
    .app-timeline-table-wrap {
        overflow: visible;
    }

    .app-timeline-table,
    .app-timeline-table thead,
    .app-timeline-table tbody,
    .app-timeline-table tr,
    .app-timeline-table th,
    .app-timeline-table td {
        display: block;
        width: 100%;
        max-width: none;
    }

    .app-timeline-table {
        margin-bottom: var(--space-4);
    }

    .app-timeline-table thead {
        display: none;
    }

    .app-timeline-table tbody tr:hover {
        background: transparent;
    }

    .app-timeline-table tbody tr {
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-border);
        background: transparent;
    }

    .app-timeline-table tbody tr:last-child {
        border-bottom: 0;
    }

    .app-timeline-table tbody td {
        padding: var(--space-1) 0;
        border: 0;
        background: transparent;
        text-align: left;
    }

    .app-timeline-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.1rem;
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
    }

    .app-timeline-table .app-table-col-event .app-access-request-badge {
        width: fit-content;
        min-width: min(100%, 10.5rem);
        max-width: 100%;
    }

    .app-timeline-time-icon {
        display: none;
    }
}

@media (max-width: 479.98px) {
    .app-timeline-table tbody tr {
        padding-right: 0;
        padding-left: 0;
    }

    .app-timeline-table tbody td {
        padding-right: 0;
        padding-left: 0;
    }
}

/* ==========================================================================
   ALERTS, PAGINATION, FOOTER, LEGAL
   ========================================================================== */

.app-alert {
    border-color: var(--color-success-soft);
    border-radius: var(--radius-md);
}

.app-alert-success {
    border: 1px solid var(--color-success-soft);
    background: var(--color-success-soft);
    color: var(--color-success);
}

.app-alert-warning {
    border: 1px solid var(--color-warning-soft);
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.app-alert-info {
    border: 1px solid var(--color-info-soft);
    background: var(--color-info-soft);
    color: var(--color-info);
}

.app-alert-error {
    border: 1px solid var(--color-danger-soft);
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.app-inline-alert {
    --inline-alert-color: var(--color-info);
    --inline-alert-bg: var(--color-info-soft);
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--inline-alert-color) 32%, var(--color-border));
    border-radius: var(--radius-lg);
    background: var(--inline-alert-bg);
    color: var(--color-text);
}

.app-inline-alert-success {
    --inline-alert-color: var(--color-success);
    --inline-alert-bg: var(--color-success-soft);
}

.app-inline-alert-info {
    --inline-alert-color: var(--color-info);
    --inline-alert-bg: var(--color-info-soft);
}

.app-inline-alert-warning {
    --inline-alert-color: var(--color-warning);
    --inline-alert-bg: var(--color-warning-soft);
}

.app-inline-alert-error {
    --inline-alert-color: var(--color-danger);
    --inline-alert-bg: var(--color-danger-soft);
}

.app-inline-alert-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--inline-alert-color);
}

.app-inline-alert-icon svg {
    width: 20px;
    height: 20px;
}

.app-inline-alert-copy {
    min-width: 0;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.app-inline-alert-copy strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-strong);
    font-weight: var(--font-weight-medium);
}

.app-inline-alert-action {
    justify-self: end;
    white-space: nowrap;
    border-color: color-mix(in srgb, var(--inline-alert-color) 34%, var(--color-border));
    background: color-mix(in srgb, var(--inline-alert-color) 10%, white);
    color: var(--color-text-strong);
}

.app-inline-alert-action:hover,
.app-inline-alert-action:focus,
.app-inline-alert-action:active {
    border-color: color-mix(in srgb, var(--inline-alert-color) 46%, var(--color-border));
    background: color-mix(in srgb, var(--inline-alert-color) 16%, white);
    color: var(--color-text-strong);
}

.app-inline-alert-action .app-btn-icon {
    color: var(--inline-alert-color);
}

@media (max-width: 767.98px) {
    .app-inline-alert {
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: start;
    }

    .app-inline-alert-icon {
        height: 20px;
        align-items: flex-start;
        margin-top: 0.1rem;
    }

    .app-inline-alert-icon svg {
        transform: translateY(-1px);
    }

    .app-inline-alert-action {
        grid-column: 2;
        justify-self: start;
    }
}

.app-confirm-modal .modal-content {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.app-edit-guard-modal .modal-content {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.app-edit-guard-modal .modal-body {
    padding: var(--space-6);
}

.app-edit-guard-modal .modal-footer {
    justify-content: flex-end;
    padding: 0 var(--space-6) var(--space-6);
    border-top: 0;
}

.app-edit-guard-content {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.app-edit-guard-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.app-edit-guard-icon svg {
    width: 24px;
    height: 24px;
}

.app-edit-guard-title {
    margin: 0 0 var(--space-2);
    color: var(--color-text-strong);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

.app-edit-guard-text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.app-confirm-modal .modal-header,
.app-confirm-modal .modal-footer {
    border-color: var(--color-border);
}

.app-confirm-modal .modal-title {
    color: var(--color-text-strong);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.app-confirm-modal .modal-body {
    color: var(--color-text);
}

.app-confirm-modal .btn-close:focus {
    box-shadow: none;
}

.app-notification-preview {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.app-notification-preview-type {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.app-notification-preview-title {
    color: var(--color-text-strong);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

.app-notification-preview-body {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.app-notification-preview-link {
    margin-top: var(--space-1);
    color: var(--color-brand);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.pagination {
    --bs-pagination-color: var(--color-text-strong);
    --bs-pagination-bg: var(--color-surface);
    --bs-pagination-border-color: var(--color-border);
    --bs-pagination-hover-color: var(--color-text-strong);
    --bs-pagination-hover-bg: var(--color-surface-muted);
    --bs-pagination-hover-border-color: var(--color-focus-border);
    --bs-pagination-focus-color: var(--color-text-strong);
    --bs-pagination-focus-bg: var(--color-surface-muted);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: var(--color-text-inverse);
    --bs-pagination-active-bg: var(--color-brand);
    --bs-pagination-active-border-color: var(--color-brand);
    --bs-pagination-disabled-color: var(--color-text-muted);
    --bs-pagination-disabled-bg: var(--color-neutral-soft);
    --bs-pagination-disabled-border-color: var(--color-border);
}

.pagination .page-link {
    border-radius: var(--radius-sm) !important;
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
}

.app-table-meta nav > div:first-child {
    display: none !important;
}

.app-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-5);
}

.app-pagination-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-pagination-control,
.app-pagination-page,
.app-pagination-ellipsis {
    min-width: var(--control-height);
    height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: 1;
    text-decoration: none;
}

.app-pagination-control {
    min-width: auto;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    background: transparent;
    border-color: transparent;
    color: var(--color-text);
    box-shadow: none;
}

.app-pagination-control:hover {
    color: var(--color-brand);
}

.app-pagination-page:hover {
    color: var(--color-brand);
}

.app-pagination-page.is-active {
    color: var(--color-brand);
    font-weight: var(--font-weight-semibold);
}

.app-pagination-ellipsis {
    min-width: var(--control-height-sm);
    color: var(--color-text-muted);
}

.app-pagination-arrow {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-pagination-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-footer {
    margin-top: auto;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.app-footer a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.app-footer a:hover {
    color: var(--color-text-strong);
}

.app-version {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   PUBLIC LANDING PAGES
   ========================================================================== */

.public-main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    padding: var(--space-8) var(--space-4);
}

.public-landing-wrap {
    width: min(100%, 980px);
    margin: 0 auto;
}

.public-landing-brand {
    margin-bottom: var(--space-5);
    text-align: center;
}

.public-landing-logo {
    height: 52px;
    width: auto;
}

.public-landing-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: var(--space-8);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.public-landing-content {
    min-width: 0;
}

.public-landing-meta {
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.public-landing-title {
    margin: 0 0 var(--space-4);
    color: var(--color-text-strong);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.public-landing-intro {
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: 1.7;
}

.public-landing-form {
    display: grid;
    gap: var(--space-4);
}

.public-landing-submit {
    width: 100%;
    min-height: var(--control-height-lg);
    margin-top: var(--space-2);
}

.legal-content h2,
.legal-content h3 {
    color: var(--color-text-strong);
    font-weight: var(--font-weight-bold);
}

.legal-content h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-lg);
}

.legal-content h3 {
    margin: var(--space-6) 0 var(--space-3);
    font-size: var(--font-size-base);
}

.legal-content p,
.legal-content li {
    color: var(--color-text);
    line-height: 1.65;
}

.legal-content p {
    margin-bottom: var(--space-4);
}

.legal-content p + h2 {
    margin-top: var(--space-8);
}

.legal-content ul {
    margin-bottom: var(--space-4);
    padding-left: var(--space-5);
}

.legal-content li {
    margin-bottom: var(--space-3);
}

/* ==========================================================================
   ERROR PAGES
   ========================================================================== */

.app-error-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-error-shell {
    flex: 1 0 auto;
    display: grid;
    place-items: center;
    padding: var(--space-8) var(--space-4);
}

.app-error-panel {
    width: min(100%, 520px);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.app-error-brand {
    display: inline-flex;
    margin-bottom: var(--space-6);
}

.app-error-brand img {
    height: 48px;
    width: auto;
    display: block;
}

.app-error-code {
    margin: 0 0 var(--space-2);
    color: var(--color-accent-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
}

.app-error-panel h1 {
    margin: 0 0 var(--space-3);
    color: var(--color-text-strong);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.app-error-message {
    margin: 0;
    color: var(--color-text-muted);
}

.app-error-actions {
    margin-top: var(--space-6);
}

.app-error-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.app-error-footer a {
    color: inherit;
    text-decoration: none;
}

.app-error-footer a:hover {
    color: var(--color-text-strong);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1365.98px) {
    .app-logo {
        height: 34px;
    }

    .app-navbar-inner {
        min-height: var(--nav-height);
    }

    .app-nav-item {
        min-width: auto;
        min-height: var(--nav-height);
        padding: var(--space-2) var(--space-3);
    }

    .app-nav-label {
        display: inline;
        font-size: var(--font-size-sm);
    }

    .app-dropdown-menu .dropdown-item {
        font-size: var(--font-size-sm);
    }

    .app-list-toolbar-row {
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
    }

    .app-list-toolbar-row .app-actions {
        justify-content: flex-start;
        margin-left: 0;
    }

    .app-list-toolbar-row .app-actions .app-btn-gradient {
        padding-inline: var(--space-3);
        white-space: nowrap;
    }

    .app-search-row {
        gap: var(--space-2);
        min-width: 0;
    }

    .app-table-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-search-field {
        max-width: none;
        min-width: 0;
    }

}

@media (max-width: 767.98px) {
    .app-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .app-actions {
        justify-content: flex-start;
    }

    .app-panel,
    .app-form-panel,
    .auth-card {
        padding: var(--space-5);
    }

    .public-main {
        align-items: flex-start;
        padding: var(--space-6) var(--space-4);
    }

    .public-landing-panel {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: var(--space-5);
    }

    .public-landing-title {
        font-size: var(--font-size-lg);
    }

    .app-client-detail-status {
        min-width: 7.55rem;
        gap: 0.18rem;
    }

    .app-client-detail-status .app-badge-label {
        display: inline;
    }

    .app-help-feedback-detail-card .app-client-detail-status {
        min-width: var(--table-badge-width-8-5);
        gap: 0.2rem;
    }

    .app-help-feedback-detail-card .app-badge-label {
        display: inline-flex;
        flex: 0 0 auto;
        min-width: max-content;
        white-space: nowrap;
    }

    .app-backend-shell .app-filter-menu {
        max-width: calc(100vw - 2rem);
    }

    .app-pagination-list {
        gap: var(--space-1);
    }

    .app-pagination-label {
        display: none;
    }

    .app-pagination-control {
        min-width: var(--control-height);
        padding: 0;
    }

}

/* Central table standardization layer.
   Table-specific profiles define visibility and width; alignment and compact
   badge behavior stay here so list tables do not drift apart again. */
.app-table-cols-getlys,
.app-table-cols-landing-pages,
.app-table-cols-contacts,
.app-table-cols-clients,
.app-table-cols-users,
.app-table-cols-help-guides,
.app-table-cols-help-guide-faqs,
.app-table-cols-help-faqs,
.app-table-cols-help-bug-reports,
.app-table-cols-help-feature-requests,
.app-table-cols-notifications,
.app-table-cols-notification-recipients,
.app-table-cols-release-notes,
.app-table-cols-getly-file-versions,
.app-table-cols-getly-pdf-versions,
.app-table-cols-landing-page-versions,
.app-table-cols-ai-versions,
.app-table-cols-pdf-usages,
.app-table-cols-contact-getlys,
.app-table-cols-access-requests,
.app-table-cols-failed-jobs,
.app-table-cols-queues,
.app-table-cols-queue-jobs,
.app-table-cols-client-colors,
.app-table-cols-client-fonts,
.app-table-cols-crm-integrations,
.app-table-cols-crm-outbox,
.app-table-cols-crm-logs,
.app-table-cols-system-check,
.app-table-cols-system-tasks,
.app-table-cols-system-task-runs {
    table-layout: fixed;
}

.app-table-cols-clients,
.app-table-cols-users,
.app-table-cols-getlys,
.app-table-cols-landing-pages,
.app-table-cols-help-guides,
.app-table-cols-help-guide-faqs,
.app-table-cols-help-faqs,
.app-table-cols-help-bug-reports,
.app-table-cols-help-feature-requests,
.app-table-cols-pdf-usages {
    --table-status-badge-width: var(--table-badge-width-8-5);
}

.app-table-cols-notification-recipients {
    --table-status-badge-width: var(--table-badge-width-7-5);
}

.app-table-status-lifecycle {
    --table-status-badge-width: var(--table-badge-width-7-5);
}

.app-table-cols-notifications {
    --table-status-badge-width: var(--table-badge-width-7-5);
    --table-type-column-width: var(--table-badge-width-8-5);
    --table-type-badge-width: var(--table-badge-width-6-5);
}

.app-table-cols-users {
    --table-type-badge-width: var(--table-badge-width-10);
}

.app-table-cols-users .app-table-col-email,
.app-table-cols-users .app-table-col-icon,
.app-table-cols-users .app-table-col-role,
.app-table-cols-users .app-table-col-updated {
    display: none;
}

.app-table-cols-users .app-table-col-status {
    width: var(--table-status-badge-width);
    max-width: var(--table-status-badge-width);
}

.app-table-cols-release-notes .app-table-col-version {
    width: var(--table-badge-width-5);
    max-width: var(--table-badge-width-5);
}

.app-table-cols-release-notes .app-table-col-created {
    display: none;
}

@media (min-width: 768px) {
    .app-table-cols-users .app-table-col-role {
        display: table-cell;
        width: var(--table-badge-width-10);
        max-width: var(--table-badge-width-10);
    }

    .app-table-cols-users .app-table-col-icon {
        display: table-cell;
        width: var(--table-icon-column-width);
        max-width: var(--table-icon-column-width);
    }

    .app-table-cols-release-notes .app-table-col-created {
        display: table-cell;
        width: var(--table-badge-width-7);
        max-width: var(--table-badge-width-7);
    }
}

@media (min-width: 1024px) {
    .app-table-cols-users .app-table-col-email {
        display: table-cell;
        width: 18rem;
        max-width: 18rem;
    }
}

@media (min-width: 1536px) {
    .app-table-cols-users .app-table-col-updated {
        display: table-cell;
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
    }
}

.app-table-cols-client-fonts .app-table-col-icon,
.app-table-cols-client-colors .app-table-col-slug,
.app-table-cols-client-colors .app-table-col-rgb {
    display: none;
}

.app-table-cols-client-colors .app-table-col-swatch {
    display: table-cell;
    width: var(--table-indicator-column-width);
    max-width: var(--table-indicator-column-width);
}

.app-table-cols-client-colors .app-table-col-name,
.app-table-cols-client-fonts .app-table-col-name {
    width: auto;
    max-width: none;
}

.app-table-cols-client-fonts .app-table-col-category {
    display: none;
}

@media (min-width: 480px) {
    .app-table-cols-client-colors .app-table-col-slug {
        display: table-cell;
        width: 7rem;
        max-width: 7rem;
    }
}

@media (min-width: 768px) {
    .app-table-cols-client-fonts .app-table-col-icon {
        display: table-cell;
        width: var(--table-icon-column-width);
        max-width: var(--table-icon-column-width);
    }

    .app-table-cols-client-fonts .app-table-col-category {
        display: table-cell;
        width: var(--table-badge-width-18);
        max-width: var(--table-badge-width-18);
    }
}

@media (min-width: 1536px) {
    .app-table-cols-client-colors .app-table-col-rgb {
        display: table-cell;
        width: 9rem;
        max-width: 9rem;
    }
}

.app-table-cols-crm-integrations,
.app-table-cols-crm-outbox,
.app-table-cols-crm-logs,
.app-table-cols-system-tasks,
.app-table-cols-system-task-runs {
    --table-status-badge-width: var(--table-badge-width-7-5);
}

.app-table-cols-crm-integrations .app-table-col-client,
.app-table-cols-crm-integrations .app-table-col-created,
.app-table-cols-crm-integrations .app-table-col-updated,
.app-table-cols-crm-outbox .app-table-col-source,
.app-table-cols-crm-outbox .app-table-col-category,
.app-table-cols-crm-outbox .app-table-col-created,
.app-table-cols-crm-outbox .app-table-col-output,
.app-table-cols-crm-logs .app-table-col-source,
.app-table-cols-crm-logs .app-table-col-category,
.app-table-cols-crm-logs .app-table-col-client,
.app-table-cols-crm-logs .app-table-col-created,
.app-table-cols-crm-logs .app-table-col-output {
    display: none;
}

.app-table-cols-crm-integrations .app-table-col-status,
.app-table-cols-crm-outbox .app-table-col-status,
.app-table-cols-crm-logs .app-table-col-status {
    width: var(--table-status-badge-width);
    max-width: var(--table-status-badge-width);
}

.app-table-cols-system-check .app-table-col-size {
    display: none;
}

.app-table-cols-system-check .app-table-col-rows {
    display: table-cell;
    width: var(--table-count-column-width);
    max-width: var(--table-count-column-width);
}

.app-table-cols-system-tasks .app-table-col-icon,
.app-table-cols-system-tasks .app-table-col-updated,
.app-table-cols-system-tasks .app-table-col-success,
.app-table-cols-system-tasks .app-table-col-failure,
.app-table-cols-system-tasks .app-table-col-duration,
.app-table-cols-system-task-runs .app-table-col-trigger,
.app-table-cols-system-task-runs .app-table-col-duration,
.app-table-cols-system-task-runs .app-table-col-output {
    display: none;
}

.app-table-cols-system-tasks .app-table-col-status,
.app-table-cols-system-task-runs .app-table-col-status {
    width: var(--table-status-badge-width);
    max-width: var(--table-status-badge-width);
}

.app-table-cols-system-tasks .app-table-col-frequency {
    width: var(--table-badge-width-7);
    max-width: var(--table-badge-width-7);
}

.app-table-cols-system-task-runs .app-table-col-started {
    display: table-cell;
    width: var(--table-date-column-width);
    max-width: var(--table-date-column-width);
}

.app-table-cols-queues .app-table-col-count,
.app-table-cols-queues .app-table-col-updated {
    display: none;
}

@media (min-width: 768px) {
    .app-table-cols-system-check .app-table-col-size {
        display: table-cell;
    }

    .app-table-cols-system-tasks .app-table-col-icon,
    .app-table-cols-system-tasks .app-table-col-updated,
    .app-table-cols-system-task-runs .app-table-col-trigger,
    .app-table-cols-system-task-runs .app-table-col-duration {
        display: table-cell;
    }

    .app-table-cols-system-tasks .app-table-col-icon {
        width: var(--table-icon-column-width);
        max-width: var(--table-icon-column-width);
    }

    .app-table-cols-system-tasks .app-table-col-updated,
    .app-table-cols-system-task-runs .app-table-col-started {
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
    }

    .app-table-cols-system-task-runs .app-table-col-trigger {
        width: var(--table-badge-width-8);
        max-width: var(--table-badge-width-8);
    }

    .app-table-cols-system-tasks .app-table-col-duration,
    .app-table-cols-system-task-runs .app-table-col-duration {
        width: var(--table-badge-width-6);
        max-width: var(--table-badge-width-6);
    }

    .app-table-cols-crm-integrations .app-table-col-client,
    .app-table-cols-crm-outbox .app-table-col-source,
    .app-table-cols-crm-logs .app-table-col-source {
        display: table-cell;
        width: var(--table-badge-width-10);
        max-width: var(--table-badge-width-10);
    }

    .app-table-cols-crm-outbox .app-table-col-category,
    .app-table-cols-crm-logs .app-table-col-category {
        display: table-cell;
        width: var(--table-badge-width-11);
        max-width: var(--table-badge-width-11);
    }
}

@media (min-width: 1536px) {
    .app-table-cols-queues .app-table-col-count {
        display: table-cell;
        width: var(--table-count-column-width);
        max-width: var(--table-count-column-width);
    }

    .app-table-cols-system-tasks .app-table-col-success,
    .app-table-cols-system-tasks .app-table-col-failure,
    .app-table-cols-system-task-runs .app-table-col-output {
        display: table-cell;
    }

    .app-table-cols-system-tasks .app-table-col-success,
    .app-table-cols-system-tasks .app-table-col-failure {
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
    }

    .app-table-cols-system-task-runs .app-table-col-output {
        width: var(--table-badge-width-18);
        max-width: var(--table-badge-width-18);
    }

    .app-table-cols-crm-integrations .app-table-col-created,
    .app-table-cols-crm-outbox .app-table-col-created,
    .app-table-cols-crm-logs .app-table-col-created {
        display: table-cell;
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
    }

    .app-table-cols-crm-logs .app-table-col-client {
        display: table-cell;
        width: var(--table-badge-width-10);
        max-width: var(--table-badge-width-10);
    }
}

@media (min-width: 1920px) {
    .app-table-cols-crm-integrations .app-table-col-updated,
    .app-table-cols-crm-outbox .app-table-col-output,
    .app-table-cols-crm-logs .app-table-col-output {
        display: table-cell;
    }

    .app-table-cols-crm-integrations .app-table-col-updated {
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
    }

    .app-table-cols-crm-outbox .app-table-col-output,
    .app-table-cols-crm-logs .app-table-col-output {
        width: var(--table-badge-width-16);
        max-width: var(--table-badge-width-16);
    }
}

.app-table--standard .app-table-col-icon {
    width: var(--table-icon-column-width);
    max-width: var(--table-icon-column-width);
    text-align: center;
}

.app-table--standard .app-table-col-indicator {
    text-align: center;
}

.app-table--standard :is(.app-table-col-main, .app-table-col-text, .app-table-col-meta, .app-table-col-date) {
    text-align: left;
}

.app-table--standard :is(.app-table-col-main, .app-table-col-text, .app-table-col-meta, .app-table-col-date) .app-table-sort {
    justify-content: flex-start;
}

.app-table--standard .app-table-col-role {
    text-align: left;
}

.app-table--standard .app-table-col-role .app-table-sort {
    justify-content: flex-start;
}

.app-table--standard .app-table-col-role .app-role-pill {
    justify-content: flex-start;
    margin-right: auto;
    margin-left: 0;
}

.app-table--standard .app-table-col-count {
    text-align: right;
}

.app-table--standard .app-table-col-version {
    text-align: right;
}

.app-table--standard :is(.app-table-col-count, .app-table-col-version) .app-table-sort {
    justify-content: flex-end;
}

.app-table--standard :is(.app-table-col-badge, .app-table-col-status, .app-table-col-actions) {
    text-align: center;
}

.app-table--standard :is(.app-table-col-badge, .app-table-col-status, .app-table-col-actions) .app-table-sort {
    justify-content: center;
}

.app-table--standard .app-table-col-status > .dropdown,
.app-table--standard .app-table-col-status > .app-status-dropdown,
.app-table--standard .app-table-col-status .app-status-dropdown,
.app-table--standard .app-table-col-status .app-badge:not(.app-access-request-badge),
.app-table--standard .app-table-col-status .app-table-status-badge {
    margin-right: auto;
    margin-left: auto;
}

.app-table--standard .app-table-col-badge .app-badge {
    width: var(--table-type-badge-width);
    min-width: var(--table-type-badge-width);
    max-width: var(--table-type-badge-width);
    margin-right: auto;
    margin-left: auto;
}

.app-table--standard .app-table-col-jump {
    padding-right: 0;
    padding-left: 0;
    text-align: center;
}

.app-table--standard .app-table-col-jump .app-icon-action {
    margin-right: auto;
    margin-left: auto;
}

.app-table--standard .app-table-col-fluid {
    width: auto;
    max-width: none;
    min-width: 0;
    overflow: hidden;
}

.app-table--standard .app-table-col-fluid .app-table-cell-truncate,
.app-table--standard .app-table-col-fluid .app-table-truncate {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Active standardized table profiles. Legacy table blocks below are disabled. */
.app-table-cols-clients .app-table-col-name,
.app-table-cols-getlys .app-table-col-name,
.app-table-cols-landing-pages .app-table-col-name,
.app-table-cols-contacts .app-table-col-name,
.app-table-cols-help-guides .app-table-col-title,
.app-table-cols-help-guide-faqs .app-table-col-title,
.app-table-cols-help-faqs .app-table-col-title,
.app-table-cols-help-bug-reports .app-table-col-topic,
.app-table-cols-help-feature-requests .app-table-col-topic,
.app-table-cols-notifications .app-table-col-title,
.app-table-cols-notification-recipients .app-table-col-title,
.app-table-cols-release-notes .app-table-col-title,
.app-table-cols-pdf-usages .app-table-col-name,
.app-table-cols-contact-getlys .app-table-col-getly,
.app-table-cols-access-requests .app-table-col-contact,
.app-table-cols-failed-jobs .app-table-col-job,
.app-table-cols-queues .app-table-col-name,
.app-table-cols-queue-jobs .app-table-col-job,
.app-table-cols-client-colors .app-table-col-name,
.app-table-cols-client-fonts .app-table-col-name,
.app-table-cols-crm-integrations .app-table-col-name,
.app-table-cols-crm-outbox .app-table-col-name,
.app-table-cols-crm-logs .app-table-col-name,
.app-table-cols-system-check .app-table-col-name,
.app-table-cols-system-tasks .app-table-col-task,
.app-table-cols-system-task-runs .app-table-col-task {
    width: auto;
    max-width: none;
}

.app-table-cols-clients .app-table-col-status,
.app-table-cols-getlys .app-table-col-status,
.app-table-cols-landing-pages .app-table-col-status,
.app-table-cols-contacts .app-table-col-status,
.app-table-cols-help-guides .app-table-col-status,
.app-table-cols-help-guide-faqs .app-table-col-status,
.app-table-cols-help-bug-reports .app-table-col-status,
.app-table-cols-help-feature-requests .app-table-col-status,
.app-table-cols-help-faqs .app-table-col-status,
.app-table-cols-pdf-usages .app-table-col-status,
.app-table-cols-notification-recipients .app-table-col-status,
.app-table-cols-queue-jobs .app-table-col-status {
    width: var(--table-status-badge-width);
    max-width: var(--table-status-badge-width);
}

.app-table-cols-clients .app-table-col-count {
    width: var(--table-count-column-width);
    max-width: var(--table-count-column-width);
}

.app-table-cols-clients .app-table-col-updated {
    width: var(--table-date-column-width);
    max-width: var(--table-date-column-width);
}

.app-table-cols-getlys .app-table-col-icon,
.app-table-cols-getlys .app-table-col-slug,
.app-table-cols-getlys .app-table-col-created,
.app-table-cols-getlys .app-table-col-updated,
.app-table-cols-clients .app-table-col-icon,
.app-table-cols-landing-pages .app-table-col-icon,
.app-table-cols-landing-pages .app-table-col-getly,
.app-table-cols-landing-pages .app-table-col-slug,
.app-table-cols-landing-pages .app-table-col-layout,
.app-table-cols-landing-pages .app-table-col-created,
.app-table-cols-landing-pages .app-table-col-updated,
.app-table-cols-contacts .app-table-col-icon,
.app-table-cols-contacts .app-table-col-email,
.app-table-cols-contacts .app-table-col-source,
.app-table-cols-contacts .app-table-col-count,
.app-table-cols-contacts .app-table-col-created,
.app-table-cols-contacts .app-table-col-updated,
.app-table-cols-clients .app-table-col-count,
.app-table-cols-clients .app-table-col-updated,
.app-table-cols-help-guides .app-table-col-icon,
.app-table-cols-help-guides .app-table-col-area,
.app-table-cols-help-guides .app-table-col-role,
.app-table-cols-help-guides .app-table-col-count,
.app-table-cols-help-guides .app-table-col-status,
.app-table-cols-help-guides .app-table-col-updated,
.app-table-cols-help-guide-faqs .app-table-col-icon,
.app-table-cols-help-guide-faqs .app-table-col-area,
.app-table-cols-help-guide-faqs .app-table-col-status,
.app-table-cols-help-faqs .app-table-col-icon,
.app-table-cols-help-faqs .app-table-col-area,
.app-table-cols-help-faqs .app-table-col-role,
.app-table-cols-help-faqs .app-table-col-status,
.app-table-cols-help-faqs .app-table-col-updated,
.app-table-cols-help-bug-reports .app-table-col-icon,
.app-table-cols-help-bug-reports .app-table-col-client,
.app-table-cols-help-bug-reports .app-table-col-user,
.app-table-cols-help-bug-reports .app-table-col-created,
.app-table-cols-help-bug-reports .app-table-col-updated,
.app-table-cols-help-feature-requests .app-table-col-icon,
.app-table-cols-help-feature-requests .app-table-col-client,
.app-table-cols-help-feature-requests .app-table-col-user,
.app-table-cols-help-feature-requests .app-table-col-created,
.app-table-cols-help-feature-requests .app-table-col-updated,
.app-table-cols-notifications .app-table-col-icon,
.app-table-cols-notifications .app-table-col-priority,
.app-table-cols-notifications .app-table-col-category,
.app-table-cols-notifications .app-table-col-audience,
.app-table-cols-notifications .app-table-col-count,
.app-table-cols-notifications .app-table-col-updated,
.app-table-cols-notification-recipients .app-table-col-icon,
.app-table-cols-notification-recipients .app-table-col-email,
.app-table-cols-release-notes .app-table-col-icon {
    display: none;
}

.app-table-cols-getlys .app-table-col-type {
    width: var(--table-badge-width-4-5);
    max-width: var(--table-badge-width-4-5);
}

.app-table-cols-landing-pages .app-table-col-live {
    width: var(--table-indicator-column-width);
    max-width: var(--table-indicator-column-width);
}

.app-table-cols-notifications .app-table-col-audience {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-table-cols-contact-getlys .app-table-col-requested,
.app-table-cols-contact-getlys .app-table-col-delivered,
.app-table-cols-notification-recipients .app-table-col-read,
.app-table-cols-notification-recipients .app-table-col-archived,
.app-table-cols-queue-jobs .app-table-col-status,
.app-table-cols-queue-jobs .app-table-col-created,
.app-table-cols-queue-jobs .app-table-col-updated,
.app-table-cols-getly-file-versions .app-table-col-icon,
.app-table-cols-getly-file-versions .app-table-col-original,
.app-table-cols-getly-file-versions .app-table-col-type,
.app-table-cols-getly-file-versions .app-table-col-size,
.app-table-cols-getly-file-versions .app-table-col-created,
.app-table-cols-getly-pdf-versions .app-table-col-icon,
.app-table-cols-getly-pdf-versions .app-table-col-original,
.app-table-cols-getly-pdf-versions .app-table-col-pages,
.app-table-cols-getly-pdf-versions .app-table-col-size,
.app-table-cols-getly-pdf-versions .app-table-col-created,
.app-table-cols-landing-page-versions .app-table-col-icon,
.app-table-cols-landing-page-versions .app-table-col-original,
.app-table-cols-landing-page-versions .app-table-col-created,
.app-table-cols-landing-page-versions .app-table-col-user,
.app-table-cols-ai-versions .app-table-col-icon,
.app-table-cols-ai-versions .app-table-col-created,
.app-table-cols-ai-versions .app-table-col-user,
.app-table-cols-pdf-usages .app-table-col-icon,
.app-table-cols-pdf-usages .app-table-col-pages,
.app-table-cols-pdf-usages .app-table-col-position,
.app-table-cols-pdf-usages .app-table-col-font,
.app-table-cols-pdf-usages .app-table-col-font-color,
.app-table-cols-pdf-usages .app-table-col-created,
.app-table-cols-pdf-usages .app-table-col-updated {
    display: none;
}

.app-table-cols-contact-getlys .app-table-col-status {
    display: none;
    width: var(--table-badge-width-11-5);
    max-width: var(--table-badge-width-11-5);
}

@media (min-width: 480px) {
    .app-table-cols-contact-getlys .app-table-col-status {
        display: table-cell;
    }
}

.app-table-cols-contact-getlys .app-table-col-jump {
    width: var(--table-jump-column-width);
    max-width: var(--table-jump-column-width);
}

.app-table-cols-getly-file-versions .app-table-col-version,
.app-table-cols-getly-pdf-versions .app-table-col-version,
.app-table-cols-landing-page-versions .app-table-col-version,
.app-table-cols-ai-versions .app-table-col-version {
    width: var(--table-badge-width-3-5);
    max-width: var(--table-badge-width-3-5);
}

.app-table-cols-getly-pdf-versions .app-table-col-pages {
    text-align: right;
}

.app-table-cols-pdf-usages .app-table-col-name {
    min-width: 0;
    overflow: hidden;
}

.app-table-cols-getly-file-versions .app-table-col-actions,
.app-table-cols-getly-pdf-versions .app-table-col-actions,
.app-table-cols-landing-page-versions .app-table-col-actions,
.app-table-cols-ai-versions .app-table-col-actions,
.app-table-cols-pdf-usages .app-table-col-actions {
    display: table-cell;
    width: var(--table-actions-column-width);
    max-width: var(--table-actions-column-width);
}

.app-table-cols-access-requests .app-table-col-icon,
.app-table-cols-access-requests .app-table-col-contact,
.app-table-cols-access-requests .app-table-col-getly,
.app-table-cols-access-requests .app-table-col-source,
.app-table-cols-access-requests .app-table-col-status,
.app-table-cols-access-requests .app-table-col-updated,
.app-table-cols-queues .app-table-col-icon,
.app-table-cols-queue-jobs .app-table-col-icon,
.app-table-cols-failed-jobs .app-table-col-icon,
.app-table-cols-failed-jobs .app-table-col-error,
.app-table-cols-failed-jobs .app-table-col-failed-at {
    display: none;
}

.app-table-cols-access-requests .app-table-col-request {
    width: var(--table-badge-width-6);
    max-width: var(--table-badge-width-6);
    text-align: right;
}

.app-table-cols-access-requests .app-table-col-request .app-table-sort {
    justify-content: flex-end;
}

.app-table-cols-access-requests .app-table-col-created {
    display: table-cell;
    width: auto;
    max-width: none;
    min-width: 0;
    overflow: hidden;
}

@media (max-width: 479.98px) {
    .app-table-cols-getlys .app-table-col-type,
    .app-table-cols-getlys .app-table-col-status,
    .app-table-cols-landing-pages .app-table-col-live,
    .app-table-cols-landing-pages .app-table-col-status,
    .app-table-cols-contacts .app-table-col-status {
        display: none;
    }

    .app-table-cols-access-requests .app-table-col-created {
        width: auto;
        max-width: none;
    }

    .app-table-cols-notifications {
        --table-status-badge-width: var(--table-badge-width-5-5);
    }
}

@media (min-width: 768px) {
    .app-table-cols-getlys .app-table-col-icon,
    .app-table-cols-clients .app-table-col-icon,
    .app-table-cols-landing-pages .app-table-col-icon,
    .app-table-cols-contacts .app-table-col-icon,
    .app-table-cols-help-guides .app-table-col-icon,
    .app-table-cols-help-guides .app-table-col-status,
    .app-table-cols-help-guide-faqs .app-table-col-icon,
    .app-table-cols-help-guide-faqs .app-table-col-status,
    .app-table-cols-help-faqs .app-table-col-icon,
    .app-table-cols-help-faqs .app-table-col-status,
    .app-table-cols-help-bug-reports .app-table-col-icon,
    .app-table-cols-help-bug-reports .app-table-col-created,
    .app-table-cols-help-feature-requests .app-table-col-icon,
    .app-table-cols-help-feature-requests .app-table-col-created,
    .app-table-cols-notifications .app-table-col-icon,
    .app-table-cols-notification-recipients .app-table-col-icon,
    .app-table-cols-release-notes .app-table-col-icon,
    .app-table-cols-access-requests .app-table-col-icon,
    .app-table-cols-access-requests .app-table-col-contact,
    .app-table-cols-queues .app-table-col-icon,
    .app-table-cols-queue-jobs .app-table-col-icon,
    .app-table-cols-queue-jobs .app-table-col-status,
    .app-table-cols-failed-jobs .app-table-col-icon,
    .app-table-cols-getly-file-versions .app-table-col-icon,
    .app-table-cols-getly-file-versions .app-table-col-type,
    .app-table-cols-getly-pdf-versions .app-table-col-icon,
    .app-table-cols-getly-pdf-versions .app-table-col-pages,
    .app-table-cols-landing-page-versions .app-table-col-icon,
    .app-table-cols-landing-page-versions .app-table-col-created,
    .app-table-cols-ai-versions .app-table-col-icon,
    .app-table-cols-pdf-usages .app-table-col-icon,
    .app-table-cols-pdf-usages .app-table-col-pages,
    .app-table-cols-contact-getlys .app-table-col-requested,
    .app-table-cols-contact-getlys .app-table-col-delivered {
        display: table-cell;
    }

    .app-table-cols-getlys .app-table-col-icon,
    .app-table-cols-clients .app-table-col-icon,
    .app-table-cols-landing-pages .app-table-col-icon,
    .app-table-cols-contacts .app-table-col-icon,
    .app-table-cols-help-guides .app-table-col-icon,
    .app-table-cols-help-guide-faqs .app-table-col-icon,
    .app-table-cols-help-faqs .app-table-col-icon,
    .app-table-cols-help-bug-reports .app-table-col-icon,
    .app-table-cols-help-feature-requests .app-table-col-icon,
    .app-table-cols-notifications .app-table-col-icon,
    .app-table-cols-notification-recipients .app-table-col-icon,
    .app-table-cols-release-notes .app-table-col-icon,
    .app-table-cols-access-requests .app-table-col-icon,
    .app-table-cols-queues .app-table-col-icon,
    .app-table-cols-queue-jobs .app-table-col-icon,
    .app-table-cols-failed-jobs .app-table-col-icon,
    .app-table-cols-getly-file-versions .app-table-col-icon,
    .app-table-cols-getly-pdf-versions .app-table-col-icon,
    .app-table-cols-landing-page-versions .app-table-col-icon,
    .app-table-cols-ai-versions .app-table-col-icon,
    .app-table-cols-pdf-usages .app-table-col-icon {
        width: var(--table-icon-column-width);
        max-width: var(--table-icon-column-width);
    }

    .app-table-cols-getlys .app-table-col-type {
        width: var(--table-badge-width-8-5);
        max-width: var(--table-badge-width-8-5);
    }

    .app-table-cols-landing-pages .app-table-col-layout {
        display: table-cell;
        width: var(--table-badge-width-10);
        max-width: var(--table-badge-width-10);
    }

    .app-table-cols-contact-getlys .app-table-col-requested,
    .app-table-cols-contact-getlys .app-table-col-delivered {
        width: var(--table-compact-date-column-width);
        max-width: var(--table-compact-date-column-width);
    }

    .app-table-mobile-meta {
        display: none;
    }

    .app-table-cols-access-requests .app-table-col-status {
        display: table-cell;
        width: 12.75rem;
        max-width: 12.75rem;
    }

    .app-table-cols-access-requests .app-table-col-request {
        width: var(--table-badge-width-6);
        max-width: var(--table-badge-width-6);
        overflow: visible;
    }

    .app-table-cols-access-requests .app-table-col-created {
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
        overflow: visible;
    }

    .app-table-cols-getly-file-versions .app-table-col-type {
        width: var(--table-badge-width-7);
        max-width: var(--table-badge-width-7);
    }

    .app-table-cols-help-bug-reports .app-table-col-created,
    .app-table-cols-help-feature-requests .app-table-col-created {
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
    }

    .app-table-cols-getly-pdf-versions .app-table-col-pages {
        width: var(--table-badge-width-7);
        max-width: var(--table-badge-width-7);
    }

    .app-table-cols-landing-page-versions .app-table-col-created {
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
    }

    .app-table-cols-queue-jobs .app-table-col-status {
        width: var(--table-badge-width-8);
        max-width: var(--table-badge-width-8);
    }

    .app-table-cols-help-faqs .app-table-col-status {
        width: var(--table-status-badge-width);
        max-width: var(--table-status-badge-width);
    }

    .app-table-cols-pdf-usages .app-table-col-pages {
        width: 11rem;
        max-width: 11rem;
    }
}

@media (min-width: 1024px) {
    .app-table-cols-getlys .app-table-col-updated,
    .app-table-cols-landing-pages .app-table-col-getly,
    .app-table-cols-contacts .app-table-col-source,
    .app-table-cols-contacts .app-table-col-count,
    .app-table-cols-contacts .app-table-col-updated,
    .app-table-cols-clients .app-table-col-count,
    .app-table-cols-help-guides .app-table-col-area,
    .app-table-cols-help-guides .app-table-col-role,
    .app-table-cols-help-guide-faqs .app-table-col-area,
    .app-table-cols-help-faqs .app-table-col-area,
    .app-table-cols-notifications .app-table-col-priority,
    .app-table-cols-notifications .app-table-col-category,
    .app-table-cols-notification-recipients .app-table-col-email,
    .app-table-cols-notification-recipients .app-table-col-read,
    .app-table-cols-queues .app-table-col-updated,
    .app-table-cols-queue-jobs .app-table-col-updated,
    .app-table-cols-failed-jobs .app-table-col-failed-at,
    .app-table-cols-getly-file-versions .app-table-col-size,
    .app-table-cols-getly-file-versions .app-table-col-created,
    .app-table-cols-getly-pdf-versions .app-table-col-size,
    .app-table-cols-getly-pdf-versions .app-table-col-created,
    .app-table-cols-ai-versions .app-table-col-created,
    .app-table-cols-pdf-usages .app-table-col-position {
        display: table-cell;
    }

    .app-table-cols-getlys .app-table-col-updated,
    .app-table-cols-contacts .app-table-col-updated,
    .app-table-cols-getly-file-versions .app-table-col-size,
    .app-table-cols-getly-file-versions .app-table-col-created,
    .app-table-cols-getly-pdf-versions .app-table-col-size,
    .app-table-cols-getly-pdf-versions .app-table-col-created,
    .app-table-cols-ai-versions .app-table-col-created,
    .app-table-cols-notification-recipients .app-table-col-read,
    .app-table-cols-queues .app-table-col-updated,
    .app-table-cols-queue-jobs .app-table-col-updated,
    .app-table-cols-failed-jobs .app-table-col-failed-at {
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
    }

    .app-table-cols-landing-pages .app-table-col-getly {
        width: 12rem;
        max-width: 12rem;
    }

    .app-table-cols-contacts .app-table-col-source {
        width: var(--table-badge-width-8);
        max-width: var(--table-badge-width-8);
    }

    .app-table-cols-contacts .app-table-col-deliveries {
        width: var(--table-badge-width-10);
        max-width: var(--table-badge-width-10);
    }

    .app-table-cols-clients .app-table-col-count {
        width: var(--table-count-column-width);
        max-width: var(--table-count-column-width);
    }

    .app-table-cols-help-guides .app-table-col-area,
    .app-table-cols-help-guide-faqs .app-table-col-area,
    .app-table-cols-help-faqs .app-table-col-area {
        width: 9rem;
        max-width: 9rem;
    }

    .app-table-cols-help-guides .app-table-col-role {
        width: var(--table-badge-width-10);
        max-width: var(--table-badge-width-10);
    }

    .app-table-cols-notifications .app-table-col-priority {
        width: var(--table-type-column-width);
        max-width: var(--table-type-column-width);
    }

    .app-table-cols-notifications .app-table-col-category {
        width: var(--table-badge-width-9);
        max-width: var(--table-badge-width-9);
    }

    .app-table-cols-notification-recipients .app-table-col-email {
        width: 18rem;
        max-width: 18rem;
    }

    .app-table-cols-pdf-usages .app-table-col-position {
        width: 13rem;
        max-width: 13rem;
    }
}

@media (min-width: 1536px) {
    .app-table-cols-clients .app-table-col-updated,
    .app-table-cols-help-guides .app-table-col-count,
    .app-table-cols-help-faqs .app-table-col-role,
    .app-table-cols-help-faqs .app-table-col-updated,
    .app-table-cols-help-bug-reports .app-table-col-created,
    .app-table-cols-help-feature-requests .app-table-col-created,
    .app-table-cols-notifications .app-table-col-count,
    .app-table-cols-notifications .app-table-col-updated,
    .app-table-cols-notification-recipients .app-table-col-archived,
    .app-table-cols-queue-jobs .app-table-col-created,
    .app-table-cols-failed-jobs .app-table-col-error,
    .app-table-cols-pdf-usages .app-table-col-font,
    .app-table-cols-pdf-usages .app-table-col-font-color {
        display: table-cell;
    }

    .app-table-cols-help-guides .app-table-col-count {
        width: var(--table-badge-width-6);
        max-width: var(--table-badge-width-6);
    }

    .app-table-cols-help-bug-reports .app-table-col-created,
    .app-table-cols-help-feature-requests .app-table-col-created,
    .app-table-cols-clients .app-table-col-updated,
    .app-table-cols-help-faqs .app-table-col-updated,
    .app-table-cols-notifications .app-table-col-updated,
    .app-table-cols-notification-recipients .app-table-col-archived,
    .app-table-cols-queue-jobs .app-table-col-created {
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
    }

    .app-table-cols-notifications .app-table-col-count {
        width: var(--table-count-column-width);
        max-width: var(--table-count-column-width);
    }

    .app-table-cols-help-faqs .app-table-col-role {
        width: var(--table-badge-width-10);
        max-width: var(--table-badge-width-10);
    }

    .app-table-cols-failed-jobs .app-table-col-job {
        width: 22rem;
        max-width: 22rem;
    }

    .app-table-cols-pdf-usages .app-table-col-font {
        width: 13rem;
        max-width: 13rem;
    }

    .app-table-cols-pdf-usages .app-table-col-font-color {
        width: var(--table-badge-width-10);
        max-width: var(--table-badge-width-10);
    }
}

@media (min-width: 1920px) {
    .app-table-cols-getlys .app-table-col-slug,
    .app-table-cols-getlys .app-table-col-created,
    .app-table-cols-landing-pages .app-table-col-slug,
    .app-table-cols-landing-pages .app-table-col-created,
    .app-table-cols-landing-pages .app-table-col-updated,
    .app-table-cols-contacts .app-table-col-email,
    .app-table-cols-contacts .app-table-col-created,
    .app-table-cols-help-guides .app-table-col-updated,
    .app-table-cols-help-bug-reports .app-table-col-client,
    .app-table-cols-help-bug-reports .app-table-col-user,
    .app-table-cols-help-bug-reports .app-table-col-updated,
    .app-table-cols-help-feature-requests .app-table-col-client,
    .app-table-cols-help-feature-requests .app-table-col-user,
    .app-table-cols-help-feature-requests .app-table-col-updated,
    .app-table-cols-access-requests .app-table-col-getly,
    .app-table-cols-access-requests .app-table-col-source,
    .app-table-cols-access-requests .app-table-col-updated,
    .app-table-cols-notifications .app-table-col-audience,
    .app-table-cols-getly-file-versions .app-table-col-original,
    .app-table-cols-getly-pdf-versions .app-table-col-original,
    .app-table-cols-landing-page-versions .app-table-col-original,
    .app-table-cols-landing-page-versions .app-table-col-user,
    .app-table-cols-ai-versions .app-table-col-user,
    .app-table-cols-pdf-usages .app-table-col-created,
    .app-table-cols-pdf-usages .app-table-col-updated {
        display: table-cell;
    }

    .app-table-cols-getlys .app-table-col-slug,
    .app-table-cols-landing-pages .app-table-col-slug,
    .app-table-cols-landing-pages .app-table-col-getly {
        width: 12rem;
        max-width: 12rem;
    }

    .app-table-cols-getlys .app-table-col-created,
    .app-table-cols-landing-pages .app-table-col-created,
    .app-table-cols-landing-pages .app-table-col-updated,
    .app-table-cols-contacts .app-table-col-created,
    .app-table-cols-access-requests .app-table-col-updated,
    .app-table-cols-pdf-usages .app-table-col-created,
    .app-table-cols-pdf-usages .app-table-col-updated {
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
    }

    .app-table-cols-contacts .app-table-col-email {
        width: 18rem;
        max-width: 18rem;
    }

    .app-table-cols-help-guides .app-table-col-updated {
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
    }

    .app-table-cols-help-bug-reports .app-table-col-client,
    .app-table-cols-help-feature-requests .app-table-col-client {
        width: 14rem;
        max-width: 14rem;
    }

    .app-table-cols-help-bug-reports .app-table-col-user,
    .app-table-cols-help-feature-requests .app-table-col-user {
        width: 13rem;
        max-width: 13rem;
    }

    .app-table-cols-help-bug-reports .app-table-col-updated,
    .app-table-cols-help-feature-requests .app-table-col-updated {
        width: var(--table-date-column-width);
        max-width: var(--table-date-column-width);
    }

    .app-table-cols-access-requests .app-table-col-getly,
    .app-table-cols-access-requests .app-table-col-source {
        width: 13rem;
        max-width: 13rem;
    }

    .app-table-cols-notifications .app-table-col-audience {
        width: var(--table-badge-width-14-5);
        max-width: var(--table-badge-width-14-5);
    }

    .app-table-cols-getly-file-versions .app-table-col-original,
    .app-table-cols-getly-pdf-versions .app-table-col-original,
    .app-table-cols-landing-page-versions .app-table-col-original,
    .app-table-cols-landing-page-versions .app-table-col-user,
    .app-table-cols-ai-versions .app-table-col-user {
        width: 14rem;
        max-width: 14rem;
    }
}

.app-table--standard tbody td a:not(.dropdown-item):not(.app-table-action-item):not(.btn):not(.app-badge) {
    display: inline-block;
    width: auto;
    max-width: 100%;
    justify-self: start;
    margin: calc(var(--space-1) * -1);
    padding: var(--space-1);
    vertical-align: bottom;
}

/* ==========================================================================
   CLIENT-BRANDED PUBLIC PAGES (Phase 7)
   ========================================================================== */

.web-page {
    flex: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, var(--web-color-background-from, var(--web-fallback-background-from)), var(--web-color-background-to, var(--web-fallback-background-to)));
}

.web-brand {
    padding: var(--space-6) var(--space-4) 0;
    text-align: left;
}

.web-logo {
    max-width: 200px;
    max-height: 60px;
    object-fit: contain;
}

.web-brand-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--web-color-title, var(--web-fallback-title));
}

.web-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8) var(--space-4);
    gap: var(--space-6);
    width: min(100%, 560px);
    margin: 0 auto;
}

.web-tile {
    width: 100%;
    padding: var(--space-8);
    background: var(--web-color-tile-background, var(--color-surface));
    border: 1px solid var(--web-color-tile-border, var(--web-fallback-tile-border));
    border-radius: var(--web-border-radius, 8px);
}

.web-title {
    margin: 0 0 var(--space-4);
    color: var(--web-color-title, var(--web-fallback-title));
    font-family: var(--web-font-title, inherit);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.web-body {
    color: var(--web-color-body, var(--web-fallback-body));
    font-family: var(--web-font-body, inherit);
    font-size: var(--font-size-base);
    line-height: 1.7;
    margin: 0;
}

.web-btn {
    display: block;
    width: 100%;
    margin-top: var(--space-6);
    padding: var(--space-3) var(--space-6);
    background: var(--web-color-button-from, var(--web-fallback-button));
    color: var(--web-color-button-text, var(--color-text-inverse));
    font-family: var(--web-font-button-text, inherit);
    border: none;
    border-radius: var(--web-border-radius, 8px);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    min-height: var(--control-height-lg);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.web-btn:hover {
    opacity: 0.9;
    color: var(--web-color-button-text, var(--color-text-inverse));
    text-decoration: none;
}

.web-footer {
    text-align: center;
    padding: var(--space-4) var(--space-4) var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--web-color-footer, var(--web-fallback-footer));
    font-family: var(--web-font-footer, inherit);
}

.web-footer a {
    color: var(--web-color-footer-link, var(--web-fallback-footer-link));
    font-family: var(--web-font-footer-link, inherit);
    text-decoration: none;
}

.web-footer a:hover {
    text-decoration: underline;
}

/* Thank-you page */

.web-content--thank-you {
    width: min(100%, 860px);
    justify-content: center;
}

.web-thankyou-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.web-thankyou-card--tiled {
    background: var(--web-color-tile-background, var(--color-surface));
    border: 1px solid var(--web-color-tile-border, var(--web-fallback-tile-border));
    border-radius: var(--web-border-radius, 8px);
    overflow: hidden;
}

.web-thankyou-card--has-image {
    flex-direction: row;
    align-items: stretch;
    text-align: left;
}

.web-thankyou-image {
    flex: none;
    padding: 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.web-thankyou-image img {
    max-width: 100%;
    max-height: 280px;
    width: auto;
    height: auto;
    display: block;
    border-radius: var(--web-border-radius, 8px);
}

.web-thankyou-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8);
}

.web-thankyou-card--has-image .web-thankyou-text {
    flex: 1;
    min-width: 0;
}

.web-thankyou-card:not(.web-thankyou-card--has-image):not(.web-thankyou-card--tiled) .web-thankyou-text {
    padding: 0;
}

.web-thankyou-heading {
    margin: 0;
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    color: var(--web-color-title, var(--web-fallback-title));
    font-family: var(--web-font-title, inherit);
}

.web-thankyou-badge-wrap {
    margin-bottom: 2rem;
}

.web-thankyou-badge {
    display: inline-block;
    padding: 0.3rem var(--space-4);
    background: var(--web-color-badge-background, var(--web-fallback-badge));
    color: var(--web-color-badge-text, var(--color-text-inverse));
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--web-font-badge-text, inherit);
    letter-spacing: 0.01em;
}

@media (max-width: 767.98px) {
    .web-content--thank-you {
        width: 100%;
    }
    .web-thankyou-card--has-image {
        flex-direction: column;
        text-align: center;
    }
    .web-thankyou-card--has-image .web-thankyou-image {
        flex: none;
        width: 100%;
        padding: 5% 8% 0;
    }
    .web-thankyou-card--has-image .web-thankyou-image img {
        max-height: 180px;
        margin: 0 auto;
    }
    .web-thankyou-card--has-image .web-thankyou-text {
        flex: none;
    }
}

@media (max-width: 479.98px) {
    .app-table thead th,
    .app-table tbody td {
        padding-right: var(--space-2);
        padding-left: var(--space-2);
    }

    .app-table thead th:first-child,
    .app-table tbody td:first-child {
        padding-left: 0;
    }

    .app-table thead th:last-child,
    .app-table tbody td:last-child {
        padding-right: 0;
    }

    .app-table .app-table-col-main {
        padding-left: 0;
    }

    .app-table thead th:last-child,
    .app-table tbody td:last-child,
    .app-table .app-table-col-status,
    .app-table .app-table-col-actions {
        padding-right: 0;
    }

    .app-table .app-table-col-actions {
        width: 4.25rem;
        max-width: 4.25rem;
    }

    .app-table thead th.app-table-col-actions {
        text-align: center !important;
    }

    .app-table thead th.app-table-col-status,
    .app-table tbody td.app-table-col-status {
        text-align: center !important;
    }

    .app-table-badge-iconless-phone .app-badge-icon {
        display: none;
    }

    .app-table-badge-iconless-phone .app-badge-label {
        margin-right: 0;
    }

    .app-table-phone-status-width-5 {
        --table-status-badge-width: var(--table-badge-width-5);
    }

    .app-table-phone-status-width-5-5 {
        --table-status-badge-width: var(--table-badge-width-5-5);
    }

    .app-table-phone-status-width-6 {
        --table-status-badge-width: var(--table-badge-width-6);
    }

    .app-table-phone-status-width-6-5 {
        --table-status-badge-width: var(--table-badge-width-6-5);
    }

    .app-table-status-readonly-phone .app-table-col-status .app-status-dropdown {
        pointer-events: none;
    }

    .app-table-status-readonly-phone .app-table-col-status .dropdown-toggle::after {
        display: none;
    }

    .app-table thead th.app-table-col-version,
    .app-table tbody td.app-table-col-version {
        padding-left: 0;
    }

    .app-table .app-table-col-status .app-status-dropdown,
    .app-table .app-table-col-status .app-badge,
    .app-table .app-table-col-status .app-table-status-badge {
        margin-right: auto;
        margin-left: auto;
    }

    .app-table tbody td.app-table-col-actions {
        text-align: center !important;
    }

    .app-table .app-table-actions {
        width: min(100%, 4.25rem);
        margin-left: auto;
        justify-content: center;
    }

    .app-process-panel.app-panel {
        padding: 0;
    }

    .app-process-header {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: var(--space-4);
        padding: var(--space-5);
    }

    .app-process-header::after {
        right: var(--space-5);
        left: var(--space-5);
    }

    .app-process-title-wrap,
    .app-process-range {
        width: 100%;
    }

    .app-process-range {
        justify-self: stretch;
    }

    .app-process-range-trigger {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
    }
}

@media (min-width: 480px) and (max-width: 767.98px) {
    .app-process-panel.app-panel {
        padding: 0;
    }

    .app-process-header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-5);
    }

    .app-process-header::after {
        right: var(--space-5);
        left: var(--space-5);
    }

    .app-process-title-wrap {
        width: auto;
        align-items: center;
    }

    .app-process-range {
        width: auto;
        justify-self: end;
    }
}