/**
 * Charte graphique Ubiflow 2026 — Espace Développeur (#114259)
 * https://redmine.ubiflow.net/issues/114259
 */

:root {
    /* Palette principale (constantes) */
    --ubiflow-emerald: #00CC73;
    --ubiflow-tiber: #03323A;
    --ubiflow-fluffy-white: #FBFCF7;
    --ubiflow-dark-teal: #0C505B;

    /* Palette secondaire */
    --ubiflow-spring-bud: #CFF46B;
    --ubiflow-perfume: #CCBCFB;

    /* Couleurs fonctionnelles */
    --ubiflow-error: #D64545;
    --ubiflow-warning-text: #B58900;

    /* Fonds de blocs alternés */
    --ubiflow-block-pale-green: #B8FFDD;
    --ubiflow-block-lavender: #F3F0FF;
    --ubiflow-block-pale-yellow: #F4FDD6;

    /* Typographie */
    --font-primary: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
    --font-secondary: Arial, "Helvetica Neue", Helvetica, sans-serif;

    --bs-primary: var(--ubiflow-emerald);
    --bs-primary-rgb: 0, 204, 115;
    --bs-secondary: var(--ubiflow-dark-teal);
    --bs-secondary-rgb: 12, 80, 91;
    --bs-success: var(--ubiflow-emerald);
    --bs-success-rgb: 0, 204, 115;
    --bs-info: var(--ubiflow-dark-teal);
    --bs-info-rgb: 12, 80, 91;
    --bs-danger: var(--ubiflow-error);
    --bs-danger-rgb: 214, 69, 69;
    --bs-font-sans-serif: var(--font-secondary);
    --bs-heading-font-family: var(--font-primary);
}

/* Thème sombre (défaut) */
html[data-theme="dark"],
html:not([data-theme]) {
    --theme-body-bg: var(--ubiflow-tiber);
    --theme-body-color: var(--ubiflow-fluffy-white);
    --theme-surface-bg: var(--ubiflow-dark-teal);
    --theme-surface-border: rgba(251, 252, 247, 0.18);
    --theme-text-secondary: #9eb0b3;
    --theme-navbar-bg: var(--ubiflow-tiber);
    --theme-input-bg: #022a31;
    --theme-input-border: rgba(251, 252, 247, 0.22);
    --theme-dropdown-bg: #0a434c;
    --theme-dropdown-hover: rgba(0, 204, 115, 0.18);
    --theme-table-striped: rgba(251, 252, 247, 0.05);
    --theme-table-hover: rgba(0, 204, 115, 0.12);
    --theme-table-head-bg: #0a434c;
    --theme-card-header-bg: #0a434c;
    --theme-shadow: rgba(0, 0, 0, 0.25);
    --theme-link-color: var(--ubiflow-emerald);
    --theme-link-hover: var(--ubiflow-fluffy-white);
    --bs-link-color-rgb: 0, 204, 115;
    --bs-link-hover-color-rgb: 251, 252, 247;
    --theme-nav-hover: var(--ubiflow-spring-bud);
    --theme-alert-danger-bg: rgba(214, 69, 69, 0.18);
    --theme-alert-warning-bg: rgba(207, 244, 107, 0.12);
    --theme-alert-success-bg: rgba(0, 204, 115, 0.15);
    --theme-alert-info-color: var(--ubiflow-fluffy-white);
    --theme-alert-info-bg: #0a434c;

    --bs-body-color: var(--theme-body-color);
    --bs-body-bg: var(--theme-body-bg);
    --bs-border-color: var(--theme-surface-border);
    --bs-link-color: var(--theme-link-color);
    --bs-link-hover-color: var(--theme-link-hover);
}

/* Thème clair */
html[data-theme="light"] {
    --theme-body-bg: var(--ubiflow-fluffy-white);
    --theme-body-color: var(--ubiflow-tiber);
    --theme-surface-bg: var(--ubiflow-fluffy-white);
    --theme-surface-border: #E6EAE3;
    --theme-text-secondary: #5A6B6E;
    --theme-navbar-bg: var(--ubiflow-dark-teal);
    --theme-input-bg: var(--ubiflow-fluffy-white);
    --theme-input-border: #E6EAE3;
    --theme-dropdown-bg: var(--ubiflow-fluffy-white);
    --theme-dropdown-hover: var(--ubiflow-block-pale-green);
    --theme-table-striped: var(--ubiflow-block-lavender);
    --theme-table-hover: var(--ubiflow-block-pale-green);
    --theme-table-head-bg: var(--ubiflow-block-pale-green);
    --theme-card-header-bg: var(--ubiflow-block-lavender);
    --theme-shadow: rgba(3, 50, 58, 0.06);
    --theme-link-color: var(--ubiflow-dark-teal);
    --theme-link-hover: var(--ubiflow-tiber);
    --bs-link-color-rgb: 12, 80, 91;
    --bs-link-hover-color-rgb: 3, 50, 58;
    --theme-nav-hover: var(--ubiflow-spring-bud);
    --theme-alert-danger-bg: #fde8e8;
    --theme-alert-warning-bg: var(--ubiflow-block-pale-yellow);
    --theme-alert-success-bg: var(--ubiflow-block-pale-green);
    --theme-alert-info-color: var(--ubiflow-fluffy-white);
    --theme-alert-info-bg: var(--ubiflow-dark-teal);

    --bs-body-color: var(--theme-body-color);
    --bs-body-bg: var(--theme-body-bg);
    --bs-border-color: var(--theme-surface-border);
    --bs-link-color: var(--theme-link-color);
    --bs-link-hover-color: var(--theme-link-hover);
}

body {
    font-family: var(--font-secondary);
    color: var(--theme-body-color);
    background-color: var(--theme-body-bg);
    transition: background-color 0.2s ease, color 0.2s ease;
}

html[data-theme="light"] body {
    background-image: linear-gradient(
        90deg,
        color-mix(in srgb, var(--ubiflow-block-pale-green) 34%, var(--ubiflow-fluffy-white)) 0%,
        var(--ubiflow-fluffy-white) 46%,
        color-mix(in srgb, var(--ubiflow-block-pale-yellow) 78%, var(--ubiflow-fluffy-white)) 100%
    );
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.modal-title,
.card-title {
    font-family: var(--font-primary);
    color: var(--theme-body-color);
}

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

/* Navbar */
.ubiflow-navbar {
    background-color: var(--theme-navbar-bg) !important;
}

.ubiflow-navbar .navbar-brand,
.ubiflow-navbar .nav-link,
.ubiflow-navbar .navbar-text {
    color: var(--ubiflow-fluffy-white) !important;
}

.ubiflow-navbar .nav-link:hover,
.ubiflow-navbar .nav-link:focus,
.ubiflow-navbar .navbar-brand:hover {
    color: var(--theme-nav-hover) !important;
}

.ubiflow-navbar .nav-item.active .nav-link {
    border-bottom: 2px solid var(--ubiflow-emerald);
}

.ubiflow-navbar .navbar-brand img {
    height: 28px;
    width: auto;
}

/* Bascule thème */
.ubiflow-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0 !important;
    border: 1px solid rgba(251, 252, 247, 0.25);
    border-radius: 50%;
    background: transparent;
    color: var(--ubiflow-fluffy-white) !important;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.ubiflow-theme-toggle:hover,
.ubiflow-theme-toggle:focus {
    background-color: rgba(251, 252, 247, 0.1);
    border-color: var(--ubiflow-emerald);
    color: var(--ubiflow-spring-bud) !important;
}

.ubiflow-theme-toggle:active {
    transform: scale(0.95);
}

.ubiflow-theme-icon {
    font-size: 1.1rem;
    display: inline-flex;
}

.ubiflow-theme-icon svg,
.portal-i {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

html[data-theme="dark"] .ubiflow-theme-icon--light,
html:not([data-theme]) .ubiflow-theme-icon--light {
    display: inline;
}

html[data-theme="dark"] .ubiflow-theme-icon--dark,
html:not([data-theme]) .ubiflow-theme-icon--dark {
    display: none;
}

html[data-theme="light"] .ubiflow-theme-icon--light {
    display: none;
}

html[data-theme="light"] .ubiflow-theme-icon--dark {
    display: inline;
}

/* Boutons primaires — texte Tiber sur fond Emerald (WCAG AA) */
.btn-primary {
    --bs-btn-color: var(--ubiflow-tiber);
    --bs-btn-bg: var(--ubiflow-emerald);
    --bs-btn-border-color: var(--ubiflow-emerald);
    --bs-btn-hover-color: var(--ubiflow-tiber);
    --bs-btn-hover-bg: #00b868;
    --bs-btn-hover-border-color: #00b868;
    --bs-btn-active-color: var(--ubiflow-tiber);
    --bs-btn-active-bg: #00a35c;
    --bs-btn-active-border-color: #00a35c;
    --bs-btn-disabled-color: var(--ubiflow-tiber);
    --bs-btn-disabled-bg: var(--ubiflow-emerald);
    --bs-btn-disabled-border-color: var(--ubiflow-emerald);
    --bs-btn-focus-shadow-rgb: 3, 50, 58;
    font-family: var(--font-primary);
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
}

.btn-secondary {
    --bs-btn-color: var(--ubiflow-fluffy-white);
    --bs-btn-bg: var(--ubiflow-dark-teal);
    --bs-btn-border-color: var(--ubiflow-dark-teal);
    --bs-btn-hover-color: var(--ubiflow-fluffy-white);
    --bs-btn-hover-bg: var(--ubiflow-tiber);
    --bs-btn-hover-border-color: var(--ubiflow-tiber);
    font-family: var(--font-primary);
    font-weight: 600;
}

/* Dark : Tiber (plus foncé) pour contraster sur surfaces dark-teal (modales, cartes) */
html[data-theme="dark"] .btn-secondary,
html:not([data-theme]) .btn-secondary {
    --bs-btn-bg: var(--ubiflow-tiber);
    --bs-btn-border-color: var(--ubiflow-tiber);
    --bs-btn-hover-bg: #02252c;
    --bs-btn-hover-border-color: #02252c;
}

.btn-outline-secondary {
    --bs-btn-color: var(--theme-body-color);
    --bs-btn-border-color: var(--theme-surface-border);
    --bs-btn-hover-color: var(--ubiflow-tiber);
    --bs-btn-hover-bg: var(--ubiflow-emerald);
    --bs-btn-hover-border-color: var(--ubiflow-emerald);
    font-family: var(--font-primary);
    font-weight: 600;
}

.text-primary {
    color: var(--ubiflow-emerald) !important;
}

html[data-theme="light"] .text-primary {
    color: var(--ubiflow-dark-teal) !important;
}

.badge.bg-primary {
    background-color: var(--ubiflow-emerald) !important;
    color: var(--ubiflow-tiber) !important;
}

.badge.bg-secondary {
    background-color: var(--ubiflow-perfume) !important;
    color: var(--ubiflow-tiber) !important;
}

/* Contenu principal */
.ubiflow-main-card {
    background-color: var(--theme-surface-bg);
    border: 1px solid var(--theme-surface-border);
    box-shadow: 0 2px 8px var(--theme-shadow);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Cadre des pages classiques : même offset vertical que les sections Accueil/Admin */
.ubiflow-page-content {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.page-title {
    text-align: center;
    margin-bottom: 2.5rem;
    font-family: var(--font-primary);
}

/* Liens de contenu (hors navigation, boutons, pagination DataTables, tuiles) */
main a:not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.btn):not(.page-link):not(.ubiflow-tile):not(.portal-chip):not(.portal-crumb-link):not(.login-forgot) {
    color: var(--theme-link-color);
    text-decoration: underline;
    transition: color 0.15s ease;
}

main a:not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.btn):not(.page-link):not(.ubiflow-tile):not(.portal-chip):not(.portal-crumb-link):not(.login-forgot):hover,
main a:not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.btn):not(.page-link):not(.ubiflow-tile):not(.portal-chip):not(.portal-crumb-link):not(.login-forgot):focus {
    color: var(--theme-link-hover);
}

main .btn a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.ubiflow-theme-toggle:focus-visible {
    outline: 2px solid var(--ubiflow-emerald);
    outline-offset: 2px;
}

.form-control,
.form-select {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-input-border);
    color: var(--theme-body-color);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--theme-input-bg);
    color: var(--theme-body-color);
    border-color: var(--ubiflow-emerald);
    box-shadow: 0 0 0 0.2rem rgba(0, 204, 115, 0.25);
}

.form-control::placeholder {
    color: var(--theme-text-secondary);
}

.form-check-label,
.form-label,
legend.form-label {
    color: var(--theme-body-color);
}

/* Checkbox / radio — vert charte (Bootstrap hardcode #0d6efd sinon) */
html[data-theme="dark"],
html:not([data-theme]) {
    --theme-form-check-checked: var(--ubiflow-emerald);
    --theme-form-check-focus-rgb: 0, 204, 115;
}

html[data-theme="light"] {
    --theme-form-check-checked: var(--ubiflow-dark-teal);
    --theme-form-check-focus-rgb: 12, 80, 91;
}

html[data-theme="light"] .form-check-input {
    border-color: var(--ubiflow-dark-teal);
    border-width: 2px;
    background-color: var(--ubiflow-fluffy-white);
}

.form-check-input {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-input-border);
    accent-color: var(--theme-form-check-checked);
}

.form-check-input:checked {
    background-color: var(--theme-form-check-checked) !important;
    border-color: var(--theme-form-check-checked) !important;
}

.form-check-input:focus {
    border-color: var(--theme-form-check-checked);
    box-shadow: 0 0 0 0.2rem rgba(var(--theme-form-check-focus-rgb), 0.25);
}

.form-check-input:disabled {
    opacity: 0.65;
}

/* Input fichier */
input[type="file"].form-control {
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
}

input[type="file"].form-control::file-selector-button,
input[type="file"].form-control::-webkit-file-upload-button {
    background-color: var(--ubiflow-emerald);
    color: var(--ubiflow-tiber);
    border: 1px solid var(--ubiflow-emerald);
    border-radius: 0.375rem;
    padding: 0.375rem 0.875rem;
    margin-right: 0.875rem;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

input[type="file"].form-control:hover::file-selector-button,
input[type="file"].form-control:hover::-webkit-file-upload-button {
    background-color: #00b868;
    border-color: #00b868;
}

input[type="file"].form-control:focus::file-selector-button,
input[type="file"].form-control:focus::-webkit-file-upload-button {
    outline: 2px solid var(--ubiflow-emerald);
    outline-offset: 2px;
}

/* Alertes */
.alert-success {
    --bs-alert-color: var(--theme-body-color);
    --bs-alert-bg: var(--theme-alert-success-bg);
    --bs-alert-border-color: var(--ubiflow-emerald);
}

.alert-info {
    --bs-alert-color: var(--theme-alert-info-color);
    --bs-alert-bg: var(--theme-alert-info-bg);
    --bs-alert-border-color: var(--ubiflow-dark-teal);
}

.alert-warning {
    --bs-alert-color: var(--ubiflow-warning-text);
    --bs-alert-bg: var(--theme-alert-warning-bg);
    --bs-alert-border-color: var(--ubiflow-spring-bud);
}

.alert-danger {
    --bs-alert-color: var(--ubiflow-error);
    --bs-alert-bg: var(--theme-alert-danger-bg);
    --bs-alert-border-color: var(--ubiflow-error);
}

/* Tables */
.table {
    --bs-table-bg: var(--theme-surface-bg);
    --bs-table-color: var(--theme-body-color);
    --bs-table-striped-bg: var(--theme-table-striped);
    --bs-table-hover-bg: var(--theme-table-hover);
    --bs-table-border-color: var(--theme-surface-border);
}

.thead-light th,
.table thead th {
    background-color: var(--theme-table-head-bg);
    color: var(--theme-body-color);
    font-family: var(--font-primary);
    font-weight: 600;
}

/* DataTables — fond uniforme, sans alternance */
.ubiflow-data-table {
    --bs-table-striped-bg: var(--theme-surface-bg);
}

.ubiflow-data-table > :not(caption) > * > * {
    background-color: var(--theme-surface-bg);
    color: var(--theme-body-color);
    border-color: var(--theme-surface-border);
}

table.ubiflow-data-table.dataTable tbody tr,
table.ubiflow-data-table.dataTable tbody tr.odd,
table.ubiflow-data-table.dataTable tbody tr.even {
    background-color: var(--theme-surface-bg);
}

table.ubiflow-data-table.dataTable tbody tr:hover > * {
    background-color: var(--theme-table-hover) !important;
    color: var(--theme-body-color);
}

/* Cartes */
.card {
    background-color: var(--theme-surface-bg);
    border-color: var(--theme-surface-border);
    color: var(--theme-body-color);
}

.card-header.bg-light {
    background-color: var(--theme-card-header-bg) !important;
    color: var(--theme-body-color);
    border-color: var(--theme-surface-border);
}

/* Modales */
.modal-content {
    background-color: var(--theme-surface-bg);
    border-color: var(--theme-surface-border);
    color: var(--theme-body-color);
}

.modal-header {
    border-color: var(--theme-surface-border);
}

.modal-footer {
    border-color: var(--theme-surface-border);
}

.btn-close {
    filter: none;
}

html[data-theme="dark"] .btn-close,
html:not([data-theme]) .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Force mot de passe */
.password-strength-container {
    margin-top: 10px;
}

.password-strength-bar {
    height: 8px;
    background-color: var(--theme-surface-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.password-strength-progress {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.strength-weak {
    background: linear-gradient(90deg, var(--ubiflow-error), #e85d5d);
    width: 33%;
}

.strength-fair {
    background: linear-gradient(90deg, var(--ubiflow-warning-text), var(--ubiflow-spring-bud));
    width: 60%;
}

.strength-good {
    background: linear-gradient(90deg, var(--ubiflow-dark-teal), #1a6b78);
    width: 80%;
}

.strength-strong {
    background: linear-gradient(90deg, var(--ubiflow-emerald), #00e082);
    width: 100%;
}

.password-strength-text {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 8px;
    font-family: var(--font-primary);
}

.password-input-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-text-secondary);
    font-size: 1.2rem;
    padding: 0;
    z-index: 10;
}

.toggle-password:hover {
    color: var(--theme-body-color);
}

/* Dropdown */
.dropdown-menu {
    background-color: var(--theme-dropdown-bg);
    border-color: var(--theme-surface-border);
}

.dropdown-item {
    color: var(--theme-body-color);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--theme-dropdown-hover);
    color: var(--theme-body-color);
}

.dropdown-item:active {
    background-color: var(--ubiflow-emerald);
    color: var(--ubiflow-tiber);
}

.dropdown-divider {
    border-color: var(--theme-surface-border);
}

/* Formulaires centrés (login, inscription) */
.auth-form {
    max-width: 330px;
    margin: 0 auto;
}

.auth-form-narrow {
    max-width: 300px;
    margin: 0 auto;
}

/* DataTables — contrôles (pagination, recherche, longueur, info) */
.dt-container {
    --dt-html-background: transparent;
    color: var(--theme-body-color);
}

.dt-container .pagination {
    --bs-pagination-color: var(--theme-body-color);
    --bs-pagination-bg: var(--theme-input-bg);
    --bs-pagination-border-color: var(--theme-surface-border);
    --bs-pagination-hover-color: var(--ubiflow-tiber);
    --bs-pagination-hover-bg: var(--ubiflow-emerald);
    --bs-pagination-hover-border-color: var(--ubiflow-emerald);
    --bs-pagination-focus-color: var(--ubiflow-tiber);
    --bs-pagination-focus-bg: var(--ubiflow-emerald);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(0, 204, 115, 0.25);
    --bs-pagination-active-color: var(--ubiflow-tiber);
    --bs-pagination-active-bg: var(--ubiflow-emerald);
    --bs-pagination-active-border-color: var(--ubiflow-emerald);
    --bs-pagination-disabled-color: var(--theme-text-secondary);
    --bs-pagination-disabled-bg: var(--theme-surface-bg);
    --bs-pagination-disabled-border-color: var(--theme-surface-border);
}

.dt-container .page-item.active .page-link,
.dt-container .page-link.active {
    font-weight: 600;
}

.dt-container .page-link {
    font-family: var(--font-primary);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.dt-container div.dt-length label,
.dt-container div.dt-search label,
.dt-container div.dt-info {
    color: var(--theme-body-color);
}

.dt-container div.dt-length select,
.dt-container div.dt-search input {
    background-color: var(--theme-input-bg);
    border: 1px solid var(--theme-input-border);
    color: var(--theme-body-color);
    border-radius: 0.375rem;
}

.dt-container div.dt-length select:focus,
.dt-container div.dt-search input:focus {
    background-color: var(--theme-input-bg);
    border-color: var(--ubiflow-emerald);
    color: var(--theme-body-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 204, 115, 0.25);
    outline: 0;
}

/* Pages d'erreur */
.error-page {
    text-align: center;
    padding: 2rem 1rem;
}

.error-page h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.error-page h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Dashboard — tuiles */
.ubiflow-dashboard-page {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Zone titre : même hauteur Accueil/Admin (titre + sous-titre) pour aligner les cadres */
.ubiflow-page-intro {
    min-height: 5.5rem;
    margin-bottom: 1.5rem;
}

.ubiflow-page-intro .h3,
.ubiflow-page-intro h1 {
    margin-bottom: 0.5rem;
}

.ubiflow-page-intro .text-muted {
    margin-bottom: 0;
}

.ubiflow-dashboard-section .ubiflow-dashboard-grid {
    margin: 0;
}

.ubiflow-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.ubiflow-tile {
    --tile: var(--ubiflow-emerald);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 120px;
    padding: 16px;
    border: 1px solid var(--theme-surface-border);
    border-left: 4px solid var(--tile);
    border-radius: 14px;
    background: var(--theme-surface-bg);
    color: var(--theme-body-color);
    text-align: left;
    text-decoration: none;
    box-shadow: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    font: inherit;
    width: 100%;
}

.ubiflow-tile--brand { --tile: var(--ubiflow-emerald); }
.ubiflow-tile--lav { --tile: var(--ubiflow-perfume); }
.ubiflow-tile--lime { --tile: var(--ubiflow-spring-bud); }

.ubiflow-tile-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--tile);
    display: grid;
    place-items: center;
    color: var(--ubiflow-tiber);
    margin-bottom: 4px;
}

.ubiflow-tile-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

a.ubiflow-tile,
button.ubiflow-tile {
    color: var(--theme-body-color);
    text-decoration: none;
}

.ubiflow-tile:hover,
.ubiflow-tile:focus {
    transform: translateY(-2px);
    border-color: var(--ubiflow-emerald);
    border-left-color: var(--tile);
    box-shadow: 0 8px 24px rgba(3, 50, 58, 0.12);
    color: var(--theme-body-color);
    text-decoration: none;
    outline: none;
}

.ubiflow-tile:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(0, 204, 115, 0.35);
}

.ubiflow-tile-label {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.ubiflow-tile-hint {
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
    line-height: 1.4;
    margin-top: auto;
}

.home-doc {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.home-pillars-head {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.home-pillars-head h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-family: var(--font-primary);
}

.home-pillars-head p {
    margin: 0;
    max-width: 42rem;
    color: var(--theme-text-secondary);
    line-height: 1.5;
}

.home-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-pillar {
    --pillar: var(--ubiflow-emerald);
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--theme-surface-border);
    border-top: 3px solid var(--pillar);
    border-radius: 14px;
    background: var(--theme-surface-bg);
}

.home-pillar--diffuse {
    --pillar: var(--ubiflow-spring-bud);
}

.home-pillar--contacts {
    --pillar: var(--ubiflow-perfume);
}

.home-pillar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.home-pillar-top--title {
    justify-content: flex-start;
}

.home-pillar-top--title h3 {
    margin: 0;
}

.home-pillar-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
}

.home-pillar-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--pillar);
    color: var(--ubiflow-tiber);
}

.home-pillar-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-pillar h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-family: var(--font-primary);
}

.home-pillar p {
    margin: 0;
    color: var(--theme-text-secondary);
    line-height: 1.45;
    font-size: 14px;
}

.home-pillar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.home-pillar-tags a {
    display: inline-flex;
    padding: 2px 8px;
    border: 1px solid var(--theme-surface-border);
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--theme-body-color);
}

.home-note {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--theme-surface-border);
    background: color-mix(in srgb, var(--ubiflow-emerald) 10%, transparent);
}

.home-note h2 {
    margin: 0 0 4px;
    font-size: 15px;
}

.home-note p {
    margin: 0;
}

.home-api {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-api-access {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--theme-surface-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ubiflow-spring-bud) 22%, var(--theme-surface-bg));
}

.home-api-access p {
    margin: 0;
    flex: 1 1 220px;
    color: var(--theme-body-color);
}

.home-api-access strong {
    display: block;
    margin-bottom: 2px;
}

.home-channels {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.home-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.home-card-head h2,
.home-bar h2 {
    margin: 0;
    font-size: 16px;
}

.home-card-flush {
    padding: 0;
    overflow: hidden;
}

.home-card-flush .home-card-head,
.home-card-flush .home-card-foot {
    padding: 14px 16px;
}

.home-card-foot .home-links,
.home-card-foot .home-note {
    margin: 0;
}

.home-card-foot .home-note + .home-links,
.home-card-foot .home-links + .home-note {
    margin-top: 10px;
}

.home-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 12px 0 0;
}

.home-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--theme-surface-border);
    border-radius: 12px;
    background: var(--theme-surface-bg);
}

.home-card-flush .home-table-wrap {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.home-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 14px;
}

.home-table th,
.home-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--theme-surface-border);
}

.home-table thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
}

.home-table tbody th {
    font-weight: 700;
}

.home-table tbody tr:last-child th,
.home-table tbody tr:last-child td {
    border-bottom: 0;
}

.home-sec {
    margin: 8px 0 4px;
    font-size: 18px;
}

.home-sec-lead {
    margin: 0 0 8px;
    color: var(--theme-text-secondary);
    font-size: 13px;
}

.home-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.home-bar p {
    margin: 4px 0 0;
    color: var(--theme-text-secondary);
}

.home-muted {
    font-size: 13px;
}

#xml-formats > p {
    margin: 8px 0 0;
    color: var(--theme-text-secondary);
    line-height: 1.5;
}

@media (max-width: 800px) {
    .home-channels,
    .home-pillar-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Onboarding — wizard public */
.onboarding-shell {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 2rem;
}

.onboarding-hero {
    text-align: center;
    margin-bottom: 1.75rem;
}

.onboarding-hero h1 {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: clamp(1.65rem, 2.5vw, 2.15rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.onboarding-hero p {
    color: var(--theme-text-secondary);
    margin: 0 auto;
    max-width: 34rem;
    line-height: 1.5;
}

.onboarding-stepper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    counter-reset: onboarding-step;
}

.onboarding-stepper__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    position: relative;
    text-align: center;
    color: var(--theme-text-secondary);
    counter-increment: onboarding-step;
}

.onboarding-stepper__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.1rem;
    left: calc(50% + 1.2rem);
    width: calc(100% - 2.4rem);
    height: 2px;
    background: var(--theme-surface-border);
}

.onboarding-stepper__item.is-complete:not(:last-child)::after {
    background: var(--ubiflow-emerald);
}

.onboarding-stepper__index {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 2px solid var(--theme-surface-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.9rem;
    background: var(--theme-surface-bg);
    color: var(--theme-text-secondary);
    z-index: 1;
}

.onboarding-stepper__item.is-current .onboarding-stepper__index,
.onboarding-stepper__item.is-complete .onboarding-stepper__index {
    background: var(--ubiflow-emerald);
    border-color: var(--ubiflow-emerald);
    color: var(--ubiflow-tiber);
}

.onboarding-stepper__item.is-complete .onboarding-stepper__index {
    font-size: 0;
}

.onboarding-stepper__item.is-complete .onboarding-stepper__index::after {
    content: "";
    width: 0.62rem;
    height: 0.32rem;
    border-left: 2px solid var(--ubiflow-tiber);
    border-bottom: 2px solid var(--ubiflow-tiber);
    transform: rotate(-45deg) translateY(-1px);
}

.onboarding-stepper__label {
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
}

.onboarding-stepper__item.is-current {
    color: var(--theme-body-color);
}

.onboarding-card {
    background: var(--theme-surface-bg);
    border: 1px solid var(--theme-surface-border);
    border-radius: 1rem;
    box-shadow: 0 8px 28px var(--theme-shadow);
    padding: 1.5rem 1.35rem 1.35rem;
}

@media (min-width: 768px) {
    .onboarding-card {
        padding: 2rem 2.1rem 1.6rem;
    }
}

.onboarding-step-header {
    margin-bottom: 1.4rem;
}

.onboarding-step-header h2 {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.onboarding-step-header p {
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: 0.9375rem;
}

.onboarding-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.15rem 1.15rem;
}

.onboarding-fields .onboarding-field,
.onboarding-fields .mb-3 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0;
    min-width: 0;
    grid-column: 1 / -1;
}

@media (min-width: 576px) {
    .onboarding-fields {
        grid-template-columns: repeat(6, 1fr);
    }

    .onboarding-fields .onboarding-field--half {
        grid-column: span 3;
    }

    .onboarding-fields .onboarding-field--third {
        grid-column: span 2;
    }
}

.onboarding-field .form-label,
.onboarding-field legend,
.onboarding-fields .form-label,
.onboarding-fields legend {
    display: block;
    float: none;
    width: 100%;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.4rem;
    color: var(--theme-body-color);
}

.onboarding-field .form-control,
.onboarding-field .form-select,
.onboarding-fields .form-control,
.onboarding-fields .form-select {
    min-height: 2.85rem;
    border-radius: 0.65rem;
    padding: 0.65rem 0.9rem;
}

.onboarding-fields textarea.form-control {
    min-height: 7rem;
    resize: vertical;
}

.onboarding-other:not(.is-visible) {
    display: none;
}

.onboarding-segmented > div,
.onboarding-choices > div {
    display: grid;
    gap: 0.75rem;
}

.onboarding-segmented > div {
    grid-template-columns: 1fr 1fr;
}

.onboarding-segmented .form-check,
.onboarding-choices .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0;
    padding: 0.95rem 1rem;
    border: 1px solid var(--theme-surface-border);
    border-radius: 0.75rem;
    background: var(--theme-input-bg);
    min-height: 3.1rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.onboarding-segmented .form-check {
    align-items: center;
    justify-content: center;
}

.onboarding-segmented .form-check-input,
.onboarding-choices .form-check-input {
    margin: 0.15rem 0 0;
    flex-shrink: 0;
}

.onboarding-segmented .form-check-input {
    margin-top: 0;
}

.onboarding-segmented .form-check-label,
.onboarding-choices .form-check-label {
    margin: 0;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 600;
}

.onboarding-segmented .form-check-label {
    font-size: 0.95rem;
}

.onboarding-choices .form-check-label {
    font-weight: 500;
    line-height: 1.4;
}

.onboarding-segmented .form-check:has(.form-check-input:checked),
.onboarding-choices .form-check:has(.form-check-input:checked) {
    border-color: var(--ubiflow-emerald);
    background: var(--ubiflow-block-pale-green);
    box-shadow: 0 0 0 1px var(--ubiflow-emerald);
}

html[data-theme="dark"] .onboarding-segmented .form-check:has(.form-check-input:checked),
html[data-theme="dark"] .onboarding-choices .form-check:has(.form-check-input:checked),
html:not([data-theme]) .onboarding-segmented .form-check:has(.form-check-input:checked),
html:not([data-theme]) .onboarding-choices .form-check:has(.form-check-input:checked) {
    background: rgba(0, 204, 115, 0.16);
}

.onboarding-segmented .form-check:focus-within,
.onboarding-choices .form-check:focus-within {
    box-shadow: 0 0 0 0.2rem rgba(0, 204, 115, 0.25);
}

.onboarding-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.6rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--theme-surface-border);
}

.onboarding-actions .btn {
    min-width: 8.25rem;
    border-radius: 0.65rem;
    padding: 0.65rem 1.15rem;
}

.onboarding-actions__next {
    margin-left: auto;
}

.onboarding-success {
    text-align: center;
    padding: 1.5rem 0.5rem 0.5rem;
}

.onboarding-success__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ubiflow-emerald);
    color: var(--ubiflow-tiber);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.onboarding-success h1 {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.onboarding-success p {
    color: var(--theme-text-secondary);
    margin-bottom: 0.65rem;
}

.onboarding-success .btn {
    margin-top: 1.1rem;
    border-radius: 0.65rem;
    min-width: 10rem;
}

@media (max-width: 575.98px) {
    .onboarding-stepper__label {
        font-size: 0.75rem;
    }

    .onboarding-segmented > div {
        grid-template-columns: 1fr;
    }

    .onboarding-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .onboarding-actions__next {
        width: 100%;
        margin-left: 0;
    }

    .onboarding-actions__next .btn {
        width: 100%;
    }
}

/* Coque portail — maquette espace développeur */
.portal-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.portal-app {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

.portal-side {
    background: linear-gradient(180deg, #041f24 0%, #063a44 28%, #0C505B 70%, #0C505B 100%);
    color: #b9d2d0;
    padding: 18px 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: visible;
    z-index: 40;
}

.portal-logo {
    padding: 14px 8px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
}

.portal-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.portal-logo small,
.portal-nav-label {
    color: #b9d2d0;
    opacity: 0.7;
    font-size: 11px;
    letter-spacing: 0.04em;
}

.portal-logo small {
    text-align: right;
}

.portal-nav-label {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 12px 10px 4px;
    margin: 0;
    font-family: var(--font-primary);
    font-weight: 600;
}

.portal-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.portal-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    color: #b9d2d0;
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 500;
}

.portal-nav-link:hover,
.portal-nav-link:focus {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    text-decoration: none;
}

.portal-nav-link.is-on {
    background: rgba(0, 204, 115, 0.16);
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--ubiflow-emerald);
}

button.portal-nav-link {
    border: 0;
    background: transparent;
    font: inherit;
    color: #b9d2d0;
    text-align: left;
    cursor: pointer;
}

.portal-nav-caret,
.portal-menu-caret {
    margin-left: auto;
    opacity: 0.75;
    transition: transform 0.15s ease;
}

.portal-nav-group.is-open .portal-nav-caret {
    transform: rotate(90deg);
}

.portal-nav-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 6px 22px;
    padding-left: 10px;
    border-left: 1px solid rgba(185, 210, 208, 0.35);
}

.portal-nav-sub[hidden] {
    display: none !important;
}

.portal-nav-sub .portal-nav-link {
    padding: 7px 10px;
    font-size: 14px;
}

.portal-account {
    position: relative;
    margin-top: 8px;
}

.portal-me {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 12px;
    color: #fff;
    font-family: var(--font-primary);
}

.portal-me:hover,
.portal-me:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

.portal-me-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.portal-me-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-me small {
    opacity: 0.6;
}

.portal-chevron {
    transition: transform 0.15s ease;
}

.portal-me[aria-expanded="true"] .portal-chevron {
    transform: rotate(180deg);
}

.portal-avatar {
    border-radius: 50%;
    background: var(--ubiflow-emerald);
    color: var(--ubiflow-tiber);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-family: var(--font-primary);
    flex: none;
}

.portal-avatar--sm {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.portal-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    background: var(--theme-surface-bg);
    color: var(--theme-body-color);
    border: 1px solid var(--theme-surface-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px var(--theme-shadow);
    padding: 8px 0;
    z-index: 50;
}

.portal-menu-email {
    margin: 0;
    padding: 8px 14px 10px;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--theme-surface-border);
}

.portal-menu-label {
    margin: 10px 0 4px;
    padding: 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
}

.portal-menu-langs {
    display: flex;
    flex-direction: column;
    padding: 0 6px 4px;
}

.portal-lang-choice,
.portal-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--theme-body-color);
    font: inherit;
    font-family: var(--font-primary);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.portal-lang-choice:hover,
.portal-lang-choice:focus,
.portal-menu-item:hover,
.portal-menu-item:focus {
    background: var(--theme-dropdown-hover);
    color: var(--theme-body-color);
    text-decoration: none;
}

.portal-lang-choice.is-current {
    box-shadow: inset 0 0 0 1px var(--ubiflow-emerald);
}

.portal-lang-choice img {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

.portal-menu-item--logout {
    margin-top: 4px;
    border-top: 1px solid var(--theme-surface-border);
    border-radius: 0;
    padding-top: 12px;
}

.portal-menu-item .ubiflow-theme-icon svg {
    width: 18px;
    height: 18px;
}

.portal-menu-item.is-on {
    background: rgba(0, 204, 115, 0.16);
    box-shadow: inset 0 0 0 1px var(--ubiflow-emerald);
}

.portal-menu-flyout {
    position: relative;
}

.portal-menu-flyout.is-open .portal-menu-caret,
.portal-menu-flyout:hover .portal-menu-caret,
.portal-menu-flyout:focus-within .portal-menu-caret {
    transform: rotate(90deg);
}

.portal-menu-sub {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% - 4px);
    min-width: 230px;
    padding: 6px;
    background: var(--theme-surface-bg);
    color: var(--theme-body-color);
    border: 1px solid var(--theme-surface-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px var(--theme-shadow);
    z-index: 3;
}

.portal-menu-sub::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 12px;
}

.portal-menu-flyout.is-open > .portal-menu-sub,
.portal-menu-flyout:focus-within > .portal-menu-sub {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .portal-menu-flyout:hover > .portal-menu-sub {
        display: block;
    }
}

.portal-main-col {
    min-width: 0;
}

.portal-main {
    min-width: 0;
    width: 100%;
}

.portal-top {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 12px clamp(16px, 3vw, 40px);
    background: var(--theme-body-bg);
    border-bottom: 1px solid var(--theme-surface-border);
}

html[data-theme="light"] .portal-top {
    background: color-mix(in srgb, var(--ubiflow-fluffy-white) 84%, transparent);
    backdrop-filter: blur(12px);
}

.portal-top-title {
    min-width: 0;
}

.portal-crumb {
    font-size: 12px;
    color: var(--theme-text-secondary);
    font-family: var(--font-primary);
}

.portal-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-crumb li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.portal-crumb li + li::before {
    content: "/";
    margin: 0 6px;
    opacity: 0.55;
}

.portal-crumb a {
    color: var(--theme-text-secondary);
    text-decoration: none;
    border-radius: 6px;
}

.portal-crumb a:hover,
.portal-crumb a:focus-visible {
    color: var(--ubiflow-emerald);
    text-decoration: none;
}

.portal-heading {
    margin: 0;
    font-size: clamp(18px, 3vw, 26px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-top-spacer {
    flex: 1;
}

.portal-top .ubiflow-theme-toggle,
.portal-burger {
    color: var(--theme-body-color) !important;
    border-color: var(--theme-surface-border);
    background: transparent;
}

.portal-top .ubiflow-theme-toggle:hover,
.portal-top .ubiflow-theme-toggle:focus,
.portal-burger:hover,
.portal-burger:focus {
    background: rgba(0, 204, 115, 0.12);
    border-color: var(--ubiflow-emerald);
    color: var(--theme-body-color) !important;
}

.portal-burger {
    width: 44px;
    height: 44px;
    padding: 0;
}

.portal-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--theme-body-color);
    padding: 4px 8px;
    border-radius: 999px;
}

.portal-lang-toggle img {
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

.ubiflow-navbar .portal-lang-toggle {
    color: var(--ubiflow-fluffy-white);
}

.portal-lang .dropdown-item img {
    margin-right: 6px;
    vertical-align: middle;
}

.portal-view {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px clamp(16px, 3vw, 40px) 48px;
    width: 100%;
}

.portal-scrim {
    display: none;
}

.has-portal .ubiflow-page-content,
.has-portal .ubiflow-dashboard-page {
    margin-top: 0;
}

.has-portal .ubiflow-page-intro {
    min-height: 0;
    margin-bottom: 1rem;
}

.has-portal .ubiflow-page-intro > h1,
.has-portal .ubiflow-page-intro > .h3,
.has-portal h1.page-title {
    display: none;
}

.portal-hero,
.portal-profile-head {
    background: linear-gradient(120deg, rgba(0, 204, 115, 0.16), rgba(207, 244, 107, 0.3));
    border: 1px solid rgba(0, 204, 115, 0.35);
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

html[data-theme="light"] .portal-hero,
html[data-theme="light"] .portal-profile-head {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--ubiflow-block-pale-green) 62%, var(--ubiflow-fluffy-white)) 0%,
        color-mix(in srgb, var(--ubiflow-block-pale-yellow) 88%, var(--ubiflow-fluffy-white)) 100%
    );
    border-color: color-mix(in srgb, var(--ubiflow-emerald) 18%, var(--theme-surface-border));
}

.portal-hero {
    margin-bottom: 8px;
}

.portal-hero h2,
.portal-profile-head strong {
    margin: 0 0 4px;
    font-size: 18px;
    font-family: var(--font-primary);
}

.portal-hero p,
.portal-profile-head small {
    margin: 0;
    color: var(--theme-text-secondary);
}

.portal-hero > div:first-child,
.portal-profile-meta {
    flex: 1;
    min-width: 0;
}

.portal-hero .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.portal-sec {
    margin: 26px 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
    font-family: var(--font-primary);
}

.portal-profile-head {
    margin-bottom: 18px;
}

.portal-profile-head .portal-avatar {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    min-width: 56px;
    max-width: 56px;
    aspect-ratio: 1;
    font-size: 22px;
}

.portal-profile-head strong {
    display: block;
    overflow-wrap: anywhere;
}

.portal-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.portal-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    color: #4a3a8c;
    background: rgba(204, 188, 251, 0.35);
    border: 1px solid rgba(150, 128, 230, 0.55);
}

.portal-role::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}

.portal-role--admin {
    color: #087a47;
    background: rgba(0, 204, 115, 0.14);
    border-color: rgba(0, 204, 115, 0.5);
}

html[data-theme="dark"] .portal-role,
html:not([data-theme]) .portal-role {
    color: #dcd2ff;
    background: rgba(204, 188, 251, 0.16);
    border-color: rgba(204, 188, 251, 0.4);
}

html[data-theme="dark"] .portal-role--admin,
html:not([data-theme]) .portal-role--admin {
    color: #7dffc4;
    background: rgba(0, 204, 115, 0.2);
    border-color: rgba(0, 204, 115, 0.55);
}

.portal-card {
    background: var(--theme-surface-bg);
    border: 1px solid var(--theme-surface-border);
    border-radius: 16px;
    padding: 18px;
}

.portal-card-head {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.portal-card .portal-card-head h2 {
    margin: 0;
    font-size: 16px;
}

.portal-card-head p {
    margin: 2px 0 0;
}

.portal-nav-link:focus-visible,
.portal-me:focus-visible,
.portal-lang-choice:focus-visible,
.portal-menu-item:focus-visible,
.portal-lang-toggle:focus-visible,
.portal-burger:focus-visible,
.portal-crumb a:focus-visible {
    outline: 2px solid var(--ubiflow-emerald);
    outline-offset: 2px;
}

@media (max-width: 1000px) {
    .portal-app {
        grid-template-columns: minmax(0, 1fr);
    }

    .portal-side {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(300px, 85vw);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.25s, visibility 0.25s;
        padding-top: 18px;
    }

    body.portal-nav-open {
        overflow: hidden;
    }

    body.portal-nav-open .portal-side {
        transform: none;
        visibility: visible;
    }

    body.portal-nav-open .portal-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(3, 50, 58, 0.5);
        z-index: 30;
    }

    .portal-nav-link {
        padding: 12px;
    }

    .portal-menu-sub {
        position: static;
        min-width: 0;
        margin: 0 8px 4px 28px;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .portal-menu-sub::before {
        display: none;
    }
}

@media (min-width: 1001px) {
    body.portal-nav-min .portal-app {
        grid-template-columns: minmax(0, 1fr);
    }

    body.portal-nav-min .portal-side {
        display: none;
    }
}

@media (max-width: 480px) {
    .portal-view {
        padding-left: 14px;
        padding-right: 14px;
    }

    .portal-top {
        padding-left: 14px;
        padding-right: 14px;
    }

    .portal-hero,
    .portal-card,
    .portal-profile-head {
        padding: 16px;
    }

    .portal-hero .btn {
        width: 100%;
    }
}

.portal-card--narrow {
    max-width: 640px;
}

.portal-card h2 {
    margin: 0 0 14px;
    font-size: 16px;
}

.portal-sub {
    margin: 0 0 14px;
    color: var(--theme-text-secondary);
    font-size: 13px;
}

.portal-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
}

.portal-row .form-control,
.portal-row input {
    flex: 1 1 200px;
    min-width: 0;
}

.portal-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}

.portal-search {
    width: 100%;
    max-width: 320px;
    background: var(--theme-surface-bg);
    color: var(--theme-body-color);
    border: 1px solid var(--theme-surface-border);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
}

.portal-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.portal-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--theme-surface-border);
    border-radius: 14px;
    background: var(--theme-surface-bg);
}

.portal-rt {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
    margin: 0;
}

.portal-rt th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary);
    padding: 12px;
    border-bottom: 1px solid var(--theme-surface-border);
    background: transparent;
    font-weight: 600;
}

.portal-rt td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--theme-surface-border);
    vertical-align: top;
    overflow-wrap: break-word;
}

.portal-rt tbody tr:last-child td {
    border-bottom: 0;
}

.portal-rt tbody tr:hover {
    background: var(--theme-table-hover);
}

.portal-rt caption {
    caption-side: top;
}

.portal-code {
    all: unset;
    cursor: pointer;
    font: 600 13px ui-monospace, Menlo, monospace;
    color: #0a8a52;
    white-space: nowrap;
}

html[data-theme="dark"] .portal-code,
html:not([data-theme]) .portal-code {
    color: var(--ubiflow-emerald);
}

.portal-code:hover,
.portal-code:focus-visible {
    text-decoration: underline;
}

.portal-muted {
    color: var(--theme-text-secondary);
}

.portal-count {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--theme-text-secondary);
}

.portal-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ubiflow-perfume);
    color: #2b1f5c;
    margin: 0 4px 4px 0;
    border: 0;
    line-height: 1.4;
}

html[data-theme="dark"] .portal-chip,
html:not([data-theme]) .portal-chip {
    color: #dcd2ff;
    background: rgba(204, 188, 251, 0.16);
}

.portal-chip--filter {
    cursor: pointer;
    margin: 0;
    padding: 5px 12px;
    background: var(--theme-surface-bg);
    color: var(--theme-body-color);
    border: 1px solid var(--theme-surface-border);
}

html[data-theme="dark"] a.portal-chip--filter,
html:not([data-theme]) a.portal-chip--filter,
html[data-theme="dark"] .portal-chip--filter,
html:not([data-theme]) .portal-chip--filter {
    background: transparent;
    color: var(--ubiflow-emerald);
    border-color: var(--ubiflow-emerald);
    text-decoration: none;
}

html[data-theme="dark"] .portal-chip--filter.is-on,
html:not([data-theme]) .portal-chip--filter.is-on,
html[data-theme="light"] .portal-chip--filter.is-on,
html[data-theme="dark"] main a.portal-chip--filter.is-on,
html:not([data-theme]) main a.portal-chip--filter.is-on,
html[data-theme="light"] main a.portal-chip--filter.is-on,
main a.portal-chip--filter.is-on,
main a.portal-chip--filter.is-on:hover {
    background: var(--ubiflow-emerald);
    color: var(--ubiflow-tiber);
    border-color: var(--ubiflow-emerald);
}

.portal-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ubiflow-spring-bud);
    color: #3b4a00;
}

.portal-tag--ok {
    background: rgba(0, 204, 115, 0.18);
    color: #087a47;
}

.portal-tag--ko {
    background: #fde6e3;
    color: #c0392b;
}

html[data-theme="dark"] .portal-tag--ok,
html:not([data-theme]) .portal-tag--ok {
    color: #5ff0b0;
    background: rgba(0, 204, 115, 0.22);
}

html[data-theme="dark"] .portal-tag--ko,
html:not([data-theme]) .portal-tag--ko {
    color: #ffb3aa;
    background: rgba(224, 86, 70, 0.28);
}

.portal-tabs {
    display: flex;
    gap: 4px;
    box-shadow: inset 0 -1px 0 var(--theme-surface-border);
    margin-bottom: 18px;
    overflow-x: auto;
}

.portal-tab {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    padding: 12px 16px;
    min-height: 44px;
    font-weight: 600;
    color: var(--theme-text-secondary);
    display: inline-flex;
    gap: 8px;
    align-items: center;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.portal-tab:hover,
.portal-tab.is-on {
    color: var(--theme-body-color);
}

.portal-tab.is-on {
    border-bottom-color: var(--ubiflow-emerald);
}

.portal-tab:focus-visible,
.portal-chip--filter:focus-visible,
.portal-code:focus-visible {
    outline: 2px solid var(--ubiflow-emerald);
    outline-offset: 2px;
}

.portal-tab-count {
    position: relative;
    font-size: 12px;
    background: var(--theme-surface-bg);
    border: 1px solid var(--theme-surface-border);
    border-radius: 99px;
    padding: 0 8px;
}

.portal-tab-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ubiflow-error);
    box-shadow: 0 0 0 2px var(--theme-body-bg);
}

.portal-tab.is-on .portal-tab-count {
    background: var(--ubiflow-emerald);
    border-color: var(--ubiflow-emerald);
    color: var(--ubiflow-tiber);
}

.gateway-journey-toggle {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 0;
    border-radius: 50%;
    border: 1px solid var(--ubiflow-emerald);
    color: var(--ubiflow-emerald);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
}

.gateway-journey-toggle:hover,
.gateway-journey-toggle[aria-expanded="true"] {
    background: var(--ubiflow-emerald);
    color: var(--ubiflow-tiber);
}

.gateway-journey-toggle:focus-visible {
    outline: 2px solid var(--ubiflow-emerald);
    outline-offset: 2px;
}

.gateway-journey {
    margin: 0 0 16px;
    padding: 16px 18px 8px;
    border: 1px solid var(--theme-surface-border);
    border-radius: 12px;
    background: rgba(0, 204, 115, 0.08);
}

.gateway-journey__lead {
    margin: 0 0 18px;
    color: var(--theme-text-secondary);
}

.gateway-journey__track {
    --gateway-gap: 16px;
    --gateway-dot: 26px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--gateway-gap);
    margin: 0;
    padding: 0 0 8px;
    position: relative;
}

.gateway-journey__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-align: center;
}

.gateway-journey__step:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc((var(--gateway-dot) - 2px) / 2);
    left: 50%;
    width: 0;
    height: 2px;
    border-radius: 99px;
    background: var(--ubiflow-emerald);
    animation: gateway-journey-line 0.55s ease forwards;
    animation-delay: calc((var(--step, 1) - 1) * 0.55s);
}

.gateway-journey__step:nth-child(1) { --step: 1; }
.gateway-journey__step:nth-child(2) { --step: 2; }
.gateway-journey__step:nth-child(3) { --step: 3; }
.gateway-journey__step:nth-child(4) { --step: 4; }
.gateway-journey__step:nth-child(5) { --step: 5; }

.gateway-journey__dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gateway-dot);
    height: var(--gateway-dot);
    border-radius: 50%;
    border: 2px solid var(--ubiflow-emerald);
    background: var(--theme-surface-bg);
    color: var(--ubiflow-emerald);
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.35;
    animation: gateway-journey-dot 0.45s ease forwards;
    animation-delay: calc((var(--step, 1) - 1) * 0.55s);
}

.gateway-journey__title {
    font-weight: 700;
}

.gateway-journey__text {
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
}


@keyframes gateway-journey-line {
    to { width: calc(100% + var(--gateway-gap)); }
}

@keyframes gateway-journey-dot {
    to {
        opacity: 1;
        background: var(--ubiflow-emerald);
        color: var(--ubiflow-tiber);
        box-shadow: 0 0 0 4px rgba(0, 204, 115, 0.28);
    }
}

@media (max-width: 767px) {
    .gateway-journey__track {
        grid-template-columns: 1fr;
        padding-left: 4px;
    }

    .gateway-journey__step:not(:last-child)::before {
        top: var(--gateway-dot);
        left: calc((var(--gateway-dot) - 2px) / 2);
        width: 2px;
        height: 0;
        animation-name: gateway-journey-line-v;
    }

    .gateway-journey__step {
        align-items: flex-start;
        padding-left: 36px;
        text-align: left;
    }

    .gateway-journey__dot {
        position: absolute;
        left: 0;
        top: 0;
    }
}

@keyframes gateway-journey-line-v {
    to { height: calc(100% - var(--gateway-dot) + var(--gateway-gap)); }
}

@media (prefers-reduced-motion: reduce) {
    .gateway-journey__step:not(:last-child)::before,
    .gateway-journey__dot {
        animation: none;
    }

    .gateway-journey__step:not(:last-child)::before {
        width: calc(100% + var(--gateway-gap));
    }

    .gateway-journey__dot {
        opacity: 1;
        background: var(--ubiflow-emerald);
        color: var(--ubiflow-tiber);
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .gateway-journey__step:not(:last-child)::before {
        width: 2px;
        height: calc(100% - var(--gateway-dot) + var(--gateway-gap));
    }
}

.gateway-journey__step.is-done .gateway-journey__dot,
.gateway-journey__step.is-current .gateway-journey__dot {
    animation: none;
    opacity: 1;
    background: var(--ubiflow-emerald);
    color: var(--ubiflow-tiber);
    border-color: var(--ubiflow-emerald);
}

.gateway-journey__step.is-current .gateway-journey__dot {
    box-shadow: 0 0 0 4px rgba(0, 204, 115, 0.28);
}

.gateway-journey__step.is-todo .gateway-journey__dot {
    animation: none;
    opacity: 1;
    background: var(--theme-surface-bg);
    color: var(--theme-text-secondary);
    border-color: var(--theme-surface-border);
    box-shadow: none;
}

.gateway-journey__step.is-todo .gateway-journey__title,
.gateway-journey__step.is-todo .gateway-journey__text {
    opacity: 0.62;
}

.gateway-journey[data-current-step] .gateway-journey__step:not(:last-child)::before {
    animation: none;
    background: var(--theme-surface-border);
}

.gateway-journey[data-current-step] .gateway-journey__step.is-done:not(:last-child)::before {
    background: var(--ubiflow-emerald);
}

@media (min-width: 768px) {
    .gateway-journey[data-current-step] .gateway-journey__step:not(:last-child)::before {
        width: calc(100% + var(--gateway-gap));
        height: 2px;
    }
}

@media (max-width: 767px) {
    .gateway-journey[data-current-step] .gateway-journey__step:not(:last-child)::before {
        width: 2px;
        height: calc(100% - var(--gateway-dot) + var(--gateway-gap));
    }
}

.portal-info {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
    padding: 16px 18px;
    border: 1px solid var(--theme-surface-border);
    border-radius: 12px;
    background: rgba(0, 204, 115, 0.08);
}

.portal-info p {
    margin: 0;
    color: var(--theme-text-secondary);
}

.portal-info .portal-warning,
.gateway-journey .portal-warning {
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--ubiflow-spring-bud);
    border-radius: 8px;
    background: var(--theme-alert-warning-bg);
    color: var(--ubiflow-tiber);
    font-size: 0.875rem;
    line-height: 1.45;
}

html[data-theme="dark"] .portal-info .portal-warning,
html[data-theme="dark"] .gateway-journey .portal-warning,
html:not([data-theme]) .portal-info .portal-warning,
html:not([data-theme]) .gateway-journey .portal-warning {
    color: var(--ubiflow-fluffy-white);
    background: rgba(207, 244, 107, 0.16);
}

.portal-stack {
    display: grid;
    gap: 14px;
}

.portal-fields {
    display: grid;
    gap: 14px 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.gateway-pending-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.gateway-pending-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--theme-surface-border);
    border-radius: 12px;
}

#advertiser-modal .modal-footer {
    flex-wrap: wrap;
}

.advertiser-submit-progress {
    flex: 1 0 100%;
    height: 3px;
    margin-top: 4px;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(0, 204, 115, 0.22);
}

.advertiser-submit-progress__bar {
    display: block;
    height: 100%;
    width: 35%;
    border-radius: inherit;
    background: var(--ubiflow-emerald);
    animation: advertiser-submit-progress 1.1s ease-in-out infinite;
}

@keyframes advertiser-submit-progress {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
    .advertiser-submit-progress__bar {
        width: 100%;
        animation: none;
        opacity: 0.85;
    }
}

.portal-field {
    min-width: 0;
}

.portal-field > div {
    overflow-wrap: anywhere;
}

.portal-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
    margin-bottom: 3px;
}

.portal-rt .portal-roles {
    flex-wrap: wrap;
    white-space: normal;
}

.portal-rt code {
    font: 600 13px ui-monospace, Menlo, monospace;
    color: #0a8a52;
}

html[data-theme="dark"] .portal-rt code,
html:not([data-theme]) .portal-rt code {
    color: var(--ubiflow-emerald);
}

.portal-filter-groups {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}

.portal-filter-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.portal-filter-group .portal-field-label {
    margin: 0;
    min-width: 7rem;
}

main a.portal-chip {
    text-decoration: none;
    color: var(--theme-body-color);
}

main a.portal-chip.is-on,
main a.portal-chip.is-on:hover {
    color: var(--ubiflow-tiber);
}

.portal-card .form-label,
.portal-card label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
}

.portal-card .portal-tag {
    margin: 0 0 8px;
}

@media (max-width: 760px) {
    .portal-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-search {
        max-width: none;
    }

    .portal-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .portal-table-wrap {
        border: 0;
        background: none;
        overflow: visible;
    }

    .portal-rt,
    .portal-rt tbody {
        display: block;
        width: 100%;
    }

    .portal-rt thead {
        display: none;
    }

    .portal-rt tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
        background: var(--theme-surface-bg);
        border: 1px solid var(--theme-surface-border);
        border-radius: 14px;
        padding: 10px 14px;
        margin-bottom: 10px;
    }

    .portal-rt td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
    }

    .portal-rt td::before {
        content: attr(data-l);
        display: block;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--theme-text-secondary);
        margin-bottom: 1px;
    }

    .portal-rt td[data-l="#"] {
        display: none;
    }

    .portal-rt td[data-l="Balise"]::before,
    .portal-rt td[data-l="Infos"]::before,
    .portal-rt td[data-l="Email"]::before,
    .portal-rt td[data-l="Tag"]::before,
    .portal-rt td[data-l="Etiqueta"]::before {
        display: none;
    }

    .portal-code {
        white-space: normal;
    }
}

/* Page de connexion — encart email puis mot de passe */
body.is-login,
html[data-theme="light"] body.is-login,
html[data-theme="dark"] body.is-login {
    background-color: #12474f;
    background-image: none;
    min-height: 100vh;
}

.login-shell {
    position: relative;
    min-height: 100vh;
    display: grid;
    align-items: safe center;
    justify-items: center;
    padding: 4.5rem 1.5rem 2.75rem;
    box-sizing: border-box;
}

.login-frame {
    width: min(960px, 100%);
    max-width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.login-locale {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    z-index: 2;
}

.login-locale .portal-lang-toggle {
    background: rgba(251, 252, 247, 0.12);
    color: var(--ubiflow-fluffy-white);
}

.login-locale .portal-lang-toggle:hover,
.login-locale .portal-lang-toggle:focus-visible {
    background: rgba(251, 252, 247, 0.22);
}

.login-card {
    display: grid;
    grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1fr);
    min-height: 520px;
    border-radius: 28px;
    overflow: hidden;
    background: var(--ubiflow-fluffy-white);
    box-shadow:
        0 2px 6px rgba(0, 16, 20, 0.18),
        0 18px 40px rgba(0, 16, 20, 0.32),
        0 36px 72px rgba(0, 12, 16, 0.28);
}

.login-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 2.25rem 2.4rem 2.6rem;
    background: linear-gradient(165deg, #071c24 0%, #0a2b34 46%, #0e3c48 100%);
    color: var(--ubiflow-fluffy-white);
}

.login-logo {
    display: block;
    height: 32px;
    width: auto;
    max-width: 180px;
}

.login-aside-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.login-eyebrow {
    margin: 0;
    color: var(--ubiflow-spring-bud);
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.login-headline {
    margin: 0;
    color: var(--ubiflow-fluffy-white);
    font-family: var(--font-primary);
    font-size: clamp(1.7rem, 2.5vw, 2.05rem);
    font-weight: 700;
    line-height: 1.15;
}

.login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 3.15rem;
    background: var(--ubiflow-fluffy-white);
    color: var(--ubiflow-tiber);
}

.login-panel h1 {
    margin: 0 0 0.7rem;
    color: var(--ubiflow-tiber);
    font-size: clamp(1.7rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
}

.login-intro {
    margin: 0 0 1.6rem;
    max-width: 28rem;
    color: #5a6b6e;
    font-size: 1rem;
    line-height: 1.5;
}

.login-alert {
    margin: -0.4rem 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--ubiflow-error);
    border-radius: 10px;
    background: #fde8e8;
    color: var(--ubiflow-tiber);
}

.login-form {
    display: flex;
    flex-direction: column;
}

.login-input {
    width: 100%;
    height: 48px;
    padding: 0 1rem;
    border: 1px solid #e3e5e2;
    border-radius: 10px;
    background: #fff;
    color: var(--ubiflow-tiber);
    font-family: var(--font-secondary);
    font-size: 1rem;
}

.login-input::placeholder {
    color: #8a9698;
}

.login-input:focus {
    outline: none;
    border-color: var(--ubiflow-emerald);
    box-shadow: 0 0 0 3px rgba(0, 204, 115, 0.28);
}

.login-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 0.85rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 1rem;
}

[data-login-continue] {
    display: none;
}

html.login-enhanced [data-login-continue] {
    display: flex;
}

html.login-enhanced .login-step:not(.is-active) {
    display: none;
}

.login-password {
    position: relative;
}

.login-password .login-input {
    padding-right: 3rem;
}

.login-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5a6b6e;
    transform: translateY(-50%);
    cursor: pointer;
}

.login-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.login-toggle:hover,
.login-toggle:focus-visible {
    color: var(--ubiflow-tiber);
}

.login-email-recap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    color: #5a6b6e;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.login-email-recap button {
    display: none;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ubiflow-dark-teal);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

html.login-enhanced .login-email-recap button {
    display: inline;
}

.login-email-recap button:hover,
.login-email-recap button:focus-visible {
    color: var(--ubiflow-tiber);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    color: var(--ubiflow-tiber);
    font-size: 0.95rem;
}

.login-remember input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--ubiflow-emerald);
}

.login-forgot {
    display: block;
    margin-top: 1rem;
    color: var(--ubiflow-dark-teal);
    font-size: 0.95rem;
    text-align: center;
    text-decoration: underline;
}

.login-forgot:hover,
.login-forgot:focus-visible {
    color: var(--ubiflow-tiber);
}

@media (max-width: 800px) {
    .login-shell {
        padding: 4.25rem 1rem 1.5rem;
    }

    .login-card {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 24px;
    }

    .login-aside {
        justify-content: flex-start;
        gap: 2.75rem;
        padding: 1.5rem 1.35rem 1.4rem;
    }

    .login-panel {
        padding: 1.75rem 1.35rem 1.6rem;
    }

    .login-intro {
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 380px) {
    .login-shell {
        padding-inline: 0.75rem;
    }

    .login-headline {
        font-size: 1.65rem;
    }

    .login-panel h1 {
        font-size: 1.55rem;
    }
}