/* =============================================================================
   Main CSS v2 - Optimized with CSS Variables and Best Practices
   ============================================================================= */

:root {
    /* =========================================================================
       Color Palette
       ========================================================================= */

    /* Primary Colors */
    --color-primary: #B8D8D8;        /* Bluelight */
    --color-success: #77be32;        /* Vert principal */
    --color-warning: #FF8F5E;        /* Orange/Warning */
    --color-danger: #dc3545;         /* Red */
    --color-secondary: #D6C1AB;      /* Brownlight */

    /* Extended Colors */
    --color-greenlight: #77be32;     /* Alias harmonisé → vert principal */
    --color-bluelight: #B8D8D8;
    --color-warninglight: #FF8F5E;
    --color-brownlight: #D6C1AB;
    --color-purple: purple;
    --color-green: green;
    --color-orange: orange;
    --color-red: red;

    /* Success States — 2 tons uniquement */
    --color-success-dark: #659928;
    --color-success-base: #77be32;
    --color-success-bg: #edf5e4;

    /* Neutral Colors */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-dark: #444444;
    --color-gray: #939393;
    --color-gray-light: #cccccc;
    --color-gray-lighter: #eeeeee;
    --color-gray-lightest: #f5f5f5;
    --color-text: #5a5a5a;
    --color-border: #cacaca;
    --color-border-light: #dee2e6;

    /* Portail — entêtes de tableau DataTables */
    --portal-teal: #005961;
    --portal-teal-dark: #004a52;

    /* Background Colors */
    --bg-body: rgb(244, 243, 239);
    --bg-active-row: #feffca;
    --bg-calendar: #E3E3E3;
    --bg-holiday: #cccccc;
    --bg-past-event: #eeeeee;
    --bg-console: #444444;
    --bg-process-info: #222222;

    /* =========================================================================
       Typography
       ========================================================================= */

    --ui-font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --ui-font-size-base: 12px;
    --ui-font-weight-base: 400;
    --ui-line-height: 1.5;

    --font-size-base: 12px;
    --font-size-small: 11px;
    --font-size-tiny: 10px;
    --font-size-h4: 16px;
    --font-size-h3: 18px;
    --font-size-th: 13px;

    /* =========================================================================
       Spacing
       ========================================================================= */

    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;

    /* =========================================================================
       Borders & Radius
       ========================================================================= */

    --border-radius-sm: 4px;
    --border-radius: 5px;
    --ui-card-border-radius: 10px;
    --border-radius-pill: 21px;
    --border-radius-circle: 50px;

    /* Buttons */
    --btn-border-radius: 20px;
    --btn-padding-y: 6px;
    --btn-padding-x: 14px;
    --btn-font-size: 13px;

    /* Boutons compacts (DataTables, tableaux, btn-sm) */
    --table-btn-font-size: 11px;
    --table-btn-padding-y: 4px;
    --table-btn-padding-x: 10px;
    --table-btn-icon-size: 22px;

    /* Boîtes de confirmation (SweetAlert2) */
    --confirm-icon-size: 5.5em;
    --confirm-icon-border: 0.4em;
    --confirm-icon-mark-size: 4.25em;
    --confirm-icon-weight: 900;
    --confirm-btn-font-size: 14px;
    --confirm-btn-padding-y: 10px;
    --confirm-btn-padding-x: 32px;
    --confirm-btn-min-width: 6.5rem;

    /* =========================================================================
       Transitions
       ========================================================================= */

    --transition-base: all 0.3s ease;
    --transition-fast: all 0.2s linear;

    /* =========================================================================
       Z-index Layers
       ========================================================================= */

    --z-overlay: 9998;
    --z-modal: 9999;
}


/* =============================================================================
   Global & Reset
   ============================================================================= */

body,
body .main-panel,
body .sidebar,
body .card,
body .navbar,
body .form-control,
body .btn,
body .dropdown-menu,
body .table,
body .nav-tabs .nav-link {
    font-family: var(--ui-font-family);
}

body {
    font-size: var(--ui-font-size-base);
    font-weight: var(--ui-font-weight-base);
    line-height: var(--ui-line-height);
}

body:not(.login-page) {
    background-color: var(--bg-body);
}

body:not(.login-page) .content {
    margin-top: 80px;
    padding: 0 18px 0 15px !important;
}

.section-image::after {
    background-color: rgba(0, 0, 0, 0.3) !important;
}


/* =============================================================================
   Typography
   ============================================================================= */

h4.header {
    color: var(--color-gray-dark);
}

td {
    font-size: var(--table-body-font-size, var(--font-size-base));
    font-weight: var(--table-body-font-weight, inherit);
}

th {
    color: var(--color-black);
    font-size: var(--table-header-font-size, var(--font-size-th)) !important;
    font-weight: var(--table-header-font-weight, normal) !important;
}


/* =============================================================================
   Links
   ============================================================================= */

a {
    color: var(--color-warning);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-base);
}

a:hover {
    color: var(--color-secondary);
    text-decoration: none;
}

a[disabled="disabled"] {
    pointer-events: none;
    color: var(--color-gray-light) !important;
}


/* =============================================================================
   Color Utilities
   ============================================================================= */

/* Text Colors */
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-purple { color: var(--color-purple); }
.text-bluelight { color: var(--color-bluelight); }
.text-greenlight { color: var(--color-success) !important; }
.text-warninglight { color: var(--color-warninglight); }
.text-brownlight { color: var(--color-brownlight); }
.text-green { color: var(--color-green) !important; }
.text-orange { color: var(--color-orange) !important; }
.text-red { color: var(--color-red) !important; }
.text-gray { color: var(--color-gray) !important; }

/* Background Colors */
.bg-bluelight { background-color: var(--color-bluelight); }


/* =============================================================================
   Badges
   ============================================================================= */

.badge {
    font-weight: 600;
    border: none;
    text-transform: none;
    letter-spacing: 0;
}

.badge-pill {
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    min-width: 1.65em;
    padding: 0.22em 0.55em;
    text-align: center;
}

.badge-success {
    background-color: var(--color-success-dark) !important;
    color: var(--color-white) !important;
}

.badge.badge-success,
.badge.badge-pill.badge-success {
    color: var(--color-white) !important;
}

/* Compteur lisible sur fond coloré (pill / onglet actif) */
.nav-pills .nav-link.active .badge-success,
.nav-pills .show > .nav-link .badge-success {
    background-color: var(--color-white) !important;
    color: var(--color-success-dark) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.nav-pills .nav-link.active .badge-primary,
.nav-pills .nav-link.active .badge-bluelight,
.nav-pills .show > .nav-link .badge-primary,
.nav-pills .show > .nav-link .badge-bluelight {
    background-color: var(--color-white) !important;
    color: var(--color-gray-dark) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Compteurs dans les titres et onglets horizontaux */
.page-tabs-title .badge-pill,
.card-category > .badge-pill,
.card-category .badge-pill.shadow-sm {
    font-size: 12px !important;
    font-weight: 700;
    vertical-align: middle;
}

.nav-tabs .nav-link .badge-pill {
    font-size: 12px !important;
    font-weight: 700;
    vertical-align: middle;
}

.badge-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-white) !important;
}

.badge-danger {
    background-color: var(--color-danger) !important;
    color: var(--color-white);
}

.badge-danger.pending-actions-count {
    font-size: 11px;
    font-weight: 700;
    min-width: 1.4em;
    padding: 0.2em 0.45em;
    line-height: 1.2;
}

.badge-secondary {
    background-color: var(--color-secondary) !important;
    color: var(--color-black);
}

.badge-primary,
.badge-bluelight {
    background-color: var(--color-primary) !important;
    color: var(--color-gray-dark) !important;
    font-weight: 700;
}

.badge-card {
    border: 1px solid var(--color-border);
    margin: var(--spacing-xs);
}

/* Badges d'état portes — contraste renforcé */
#doorsTable .door-state-badge,
#dashboardDoorsTable .door-state-badge,
#doorsTable .area-count-badge,
#doorGroupsTable .area-count-badge,
#areasTable .area-count-badge,
#accessProfilesTable .area-count-badge,
#accessProfileGroupsTable .area-count-badge,
#deviceArmingGroupsTable .area-count-badge,
#elevatorProfilesTable .area-count-badge,
#automationProfilesTable .area-count-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    line-height: 1.25;
    text-transform: none;
    white-space: nowrap;
    border-radius: var(--border-radius-sm, 4px);
}

#doorsTable .door-state-badge.badge-secondary,
#dashboardDoorsTable .door-state-badge.badge-secondary,
#doorsTable .area-count-badge.badge-secondary,
#doorGroupsTable .area-count-badge.badge-secondary,
#areasTable .area-count-badge.badge-secondary,
#accessProfilesTable .area-count-badge.badge-secondary,
#accessProfileGroupsTable .area-count-badge.badge-secondary,
#deviceArmingGroupsTable .area-count-badge.badge-secondary,
#elevatorProfilesTable .area-count-badge.badge-secondary,
#automationProfilesTable .area-count-badge.badge-secondary {
    background-color: var(--color-gray-dark) !important;
    color: var(--color-white) !important;
}

#doorsTable .door-state-badge.badge-success,
#dashboardDoorsTable .door-state-badge.badge-success,
#doorsTable .area-count-badge.badge-success,
#doorGroupsTable .area-count-badge.badge-success,
#areasTable .area-count-badge.badge-success,
#accessProfilesTable .area-count-badge.badge-success,
#accessProfileGroupsTable .area-count-badge.badge-success,
#deviceArmingGroupsTable .area-count-badge.badge-success,
#elevatorProfilesTable .area-count-badge.badge-success,
#automationProfilesTable .area-count-badge.badge-success {
    background-color: var(--ui-portal-theme-color, #005961) !important;
    color: var(--color-white) !important;
    border: 1px solid var(--ui-portal-theme-color-dark, #004a52);
}

#doorsTable .door-state-badge.badge-warning,
#dashboardDoorsTable .door-state-badge.badge-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-white) !important;
}

#doorsTable .door-state-badge.badge-danger,
#dashboardDoorsTable .door-state-badge.badge-danger {
    background-color: var(--color-danger) !important;
    color: var(--color-white) !important;
}

/* Actions porte : état périmé — hint visuel sans désactiver */
#doorsTable .actions-row.door-actions-stale .btn-action,
#dashboardDoorsTable .actions-row.door-actions-stale .btn-action {
    opacity: 0.72;
}

.btn-view-popup {
    padding: var(--table-btn-padding-y) var(--table-btn-padding-x) !important;
    font-size: var(--table-btn-font-size) !important;
}

#areasTable .area-count-cell,
#accessProfilesTable .area-count-cell,
#accessProfileGroupsTable .area-count-cell,
#doorsTable .area-count-cell,
#doorGroupsTable .area-count-cell,
#deviceArmingGroupsTable .area-count-cell,
#elevatorProfilesTable .area-count-cell,
#automationProfilesTable .area-count-cell {
    text-align: center;
}

#areasTable .area-count-link,
#accessProfilesTable .area-count-link,
#accessProfileGroupsTable .area-count-link,
#doorsTable .area-count-link,
#doorGroupsTable .area-count-link {
    line-height: 1;
    text-decoration: none;
    vertical-align: baseline;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
    border-radius: 0 !important;
}

#areasTable .area-count-link:hover,
#areasTable .area-count-link:focus,
#areasTable .area-count-link:active,
#areasTable .area-count-link:focus-visible,
#accessProfilesTable .area-count-link:hover,
#accessProfilesTable .area-count-link:focus,
#accessProfilesTable .area-count-link:active,
#accessProfilesTable .area-count-link:focus-visible,
#accessProfileGroupsTable .area-count-link:hover,
#accessProfileGroupsTable .area-count-link:focus,
#accessProfileGroupsTable .area-count-link:active,
#accessProfileGroupsTable .area-count-link:focus-visible,
#doorsTable .area-count-link:hover,
#doorsTable .area-count-link:focus,
#doorsTable .area-count-link:active,
#doorsTable .area-count-link:focus-visible,
#doorGroupsTable .area-count-link:hover,
#doorGroupsTable .area-count-link:focus,
#doorGroupsTable .area-count-link:active,
#doorGroupsTable .area-count-link:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
}

#areasTable .area-count-link:hover .area-count-badge,
#accessProfilesTable .area-count-link:hover .area-count-badge,
#accessProfileGroupsTable .area-count-link:hover .area-count-badge,
#doorsTable .area-count-link:hover .area-count-badge,
#doorGroupsTable .area-count-link:hover .area-count-badge {
    background-color: var(--ui-portal-theme-color-dark, #004a52) !important;
    filter: none;
}


/* =============================================================================
   Alerts
   ============================================================================= */

.alert-bluelight {
    background-color: var(--color-bluelight);
    color: var(--color-black);
}

.alert-danger {
    background-color: var(--color-danger);
    color: var(--color-white);
}


/* =============================================================================
   Buttons
   ============================================================================= */

.btn {
    transition: var(--transition-base);
}

.btn:not(.btn-action):not(.btn-link):not(.btn-simple):not(.close):not(.swal2-styled):not(.swal2-confirm):not(.swal2-cancel),
.navbar .navbar-nav > a.btn:not(.btn-magnify):not(.nav-link) {
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
    font-size: var(--btn-font-size, 13px) !important;
    font-weight: var(--btn-font-weight, 600) !important;
    line-height: 1.35 !important;
    border-radius: var(--btn-border-radius, 20px) !important;
    margin: 4px 2px !important;
    text-transform: var(--btn-text-transform, uppercase) !important;
    letter-spacing: var(--btn-letter-spacing, 0.02em);
}

.btn-success:not(.btn-simple):not(.btn-link) i,
.btn-warning:not(.btn-simple):not(.btn-link) i,
.btn-danger:not(.btn-simple):not(.btn-link) i,
.btn-info:not(.btn-simple):not(.btn-link) i {
    color: #ffffff !important;
}

.btn-sm:not(.btn-action):not(.table-name-edit-link),
div.dt-buttons .btn,
.dataTables_wrapper .btn-sm,
.dataTables_wrapper .btn-go-to-page {
    padding: var(--table-btn-padding-y) var(--table-btn-padding-x) !important;
    font-size: var(--table-btn-font-size) !important;
    border-radius: var(--btn-border-radius) !important;
}

.btn-sm.btn-action,
.dataTables_wrapper .btn-action.btn-sm {
    padding: var(--table-btn-padding-y) var(--table-btn-padding-x) !important;
}

.btn-sm.btn-action .fa-2x,
.btn-sm.btn-action i.fas,
.btn-sm.btn-action i.far,
.btn-sm.btn-action i.fa,
.dataTables_wrapper .btn-action i.fa-2x {
    font-size: var(--table-btn-icon-size) !important;
    line-height: 1;
    vertical-align: middle;
}

.bootstrap-duallistbox-container .btn-group .btn {
    border-radius: 0 !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
}

.btn:disabled {
    color: var(--color-gray);
    border-color: var(--color-gray) !important;
}

a.btn {
    -webkit-appearance: inherit !important;
}

.btn-primary {
    color: var(--color-black);
    font-weight: normal;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-success:focus,
.btn-group .btn-success:focus {
    background: var(--color-success-dark) !important;
}

.btn-success,
.btn-success.disabled,
.btn-success:disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success:active:focus,
.btn-success:active:hover,
.btn-success.active:focus,
.btn-success.active:hover,
.show > .btn-success.dropdown-toggle,
.show > .btn-success.dropdown-toggle:focus,
.show > .btn-success.dropdown-toggle:hover {
    background-color: var(--color-success-dark) !important;
    border-color: var(--color-success-dark) !important;
}

.btn-success.btn-simple {
    color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

.btn-success.btn-link {
    color: var(--color-success) !important;
}

.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background-color: #e67a45 !important;
    border-color: #e67a45 !important;
    color: #ffffff !important;
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    background-color: var(--color-red) !important;
    border-color: var(--color-red) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Bouton pleine largeur (login, formulaires) — même typo que les .btn */
.btn-login {
    display: block;
    width: 100%;
    border: none;
    border-radius: var(--btn-border-radius);
    background-color: var(--color-success) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: var(--btn-font-size) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    margin-bottom: 1rem;
    cursor: pointer;
    line-height: 1.35;
    transition: var(--transition-base);
}

.btn-login:hover,
.btn-login:focus,
.btn-login:active {
    background-color: var(--color-success-dark) !important;
    color: #ffffff !important;
}

/* Button Action (Transparent) */
.btn-action,
.btn-action:focus,
.btn-action:hover,
.btn-action.focus,
.btn-action:active,
.btn-action.active,
.btn-action:active:focus,
.btn-action.active:focus,
.btn-action:active:hover,
.btn-action.active:hover {
    background-color: transparent !important;
    border-color: transparent !important;
}

.btn-action:disabled,
.btn-action.disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.btn-action:hover:not(:disabled):not(.disabled),
.btn-action:focus:not(:disabled):not(.disabled),
.btn-action:active:not(:disabled):not(.disabled),
.btn-action:active:focus:not(:disabled):not(.disabled),
.btn-action.active:focus:not(:disabled):not(.disabled),
.btn-action:active:hover:not(:disabled):not(.disabled),
.btn-action.active:hover:not(:disabled):not(.disabled) {
    color: var(--color-secondary) !important;
}

/* Button Outline Success — priorité sur Paper Dashboard (#6bd098) */
.btn-outline-success {
    color: var(--color-success) !important;
    background: transparent linear-gradient(0deg, transparent 0%, transparent 100%) !important;
    border-color: var(--color-success) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active,
.btn-outline-success:active:focus {
    color: var(--color-white) !important;
    background: var(--color-success) linear-gradient(0deg, var(--color-success) 0%, var(--color-success) 100%) !important;
    border-color: var(--color-success) !important;
}

.btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--color-white) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--color-success-dark) !important;
    border-color: var(--color-success-dark) !important;
    color: var(--color-white) !important;
}

/* Upload Button */
.btn-upload {
    position: relative;
    overflow: hidden;
}

.btn-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}


/* =============================================================================
   Forms & Inputs
   ============================================================================= */

.form-control,
input.form-control,
select.form-control {
    font-size: var(--font-size-base);
}

select.form-control:not([size]):not([multiple]) {
    height: calc(1.6rem + 2px);
}

.form-group .form-control,
.input-group .form-control,
.custom-file-input,
.form-inline .form-control {
    padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) !important;
    font-size: var(--font-size-base);
}

select.disabled {
    pointer-events: none;
    color: var(--color-gray-light) !important;
}

/* Checkboxes & Radios — style natif Opentry (sans form-check-sign Paper Dashboard) */
.form-check:not(:has(.form-check-sign)) input[type="checkbox"],
.form-check-radio:not(:has(.form-check-sign)) input[type="radio"] {
    opacity: 1;
    position: relative;
    visibility: visible;
    margin-top: 0;
    vertical-align: middle;
    margin-left: 0;
}

.form-check:not(:has(.form-check-sign)) .form-check-label {
    padding-left: var(--spacing-xs);
}

.form-check-flex {
    padding-left: 0;
    margin-bottom: -0.5rem;
    display: flex;
    align-items: center;
}

.form-check-inline .form-check-input {
    position: static;
    margin-top: 0;
    margin-right: .3125rem;
    margin-left: 0;
    width: 15px;
    height: 15px;
}


/* =============================================================================
   Cards
   ============================================================================= */

.card {
    border-radius: var(--ui-card-border-radius, var(--border-radius));
}

.card label:not(.custom-control-label),
.card-category {
    color: var(--color-black);
}

.card label:not(.custom-control-label) {
    font-size: 0.9em;
}

.card-category {
    font-size: 1rem;
}

.card-user-modal {
    height: 470px;
}

.card-stats .card-body .card-category {
    color: var(--color-text);
    font-size: var(--font-size-h4);
    line-height: 1.4em;
}

.dashboard-widget-pending {
    opacity: 0;
}

.card .numbers {
    color: var(--color-text);
    font-size: 1.4rem !important;
    line-height: 1.4em;
}


/* =============================================================================
   Tables & DataTables
   ============================================================================= */

.table > tbody > tr > td {
    padding: var(--spacing-xs) 7px;
}

.table > thead > tr > th {
    text-transform: none;
    font-weight: lighter;
    font-size: 0.950rem;
}

table tbody tr.active,
table.table-striped tbody tr.active,
table.dataTable tbody tr.active {
    background: var(--bg-active-row) !important;
}

table tbody tr.active > td,
table.table-striped tbody tr.active > td,
table.dataTable.table-striped tbody tr.active > td,
table.dataTable.display tbody tr.active > td,
table.dataTable.display tbody tr.odd.active > td,
table.dataTable.display tbody tr.even.active > td {
    background-color: var(--bg-active-row) !important;
}

/* Tableaux : fond uni + survol (remplace le zébrage Bootstrap) */
table.table-striped tbody td {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(60, 72, 88, 0.07);
}

table.table-striped tbody tr,
table.table-striped tbody tr:nth-of-type(odd),
table.table-striped tbody tr:nth-of-type(even),
table.dataTable.table-striped tbody tr.odd,
table.dataTable.table-striped tbody tr.even,
table.table-striped tbody tr.odd,
table.table-striped tbody tr.even {
    background-color: #fff !important;
}

table.table-striped tbody tr:hover:not(.active),
table.dataTable.table-striped tbody tr.odd:hover:not(.active),
table.dataTable.table-striped tbody tr.even:hover:not(.active),
table.table-striped tbody tr.odd:hover:not(.active),
table.table-striped tbody tr.even:hover:not(.active) {
    background-color: #f5f7fa !important;
}

table .table-name-edit-link,
table .btn.table-name-edit-link,
table .btn-link.table-name-edit-link {
    color: var(--table-edit-link-color, #66615b) !important;
    font-weight: var(--table-edit-link-font-weight, 500);
    font-size: inherit !important;
    line-height: inherit;
    letter-spacing: normal;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.12rem 0.35rem !important;
    border-radius: var(--btn-border-radius, 20px);
    transition: background-color 0.15s ease, color 0.15s ease;
    vertical-align: baseline;
}

table .table-name-edit-link .fa-edit {
    opacity: 0.85;
}

/* Inversion au survol — comme lien utilisateur du tableau de bord */
table .table-name-edit-link:hover,
table .table-name-edit-link:focus,
table .table-name-edit-link:focus-visible,
table .btn.table-name-edit-link:hover,
table .btn.table-name-edit-link:focus,
table .btn.table-name-edit-link:focus-visible,
table .btn-link.table-name-edit-link:hover,
table .btn-link.table-name-edit-link:focus,
table .btn-link.table-name-edit-link:focus-visible {
    color: #fff !important;
    text-decoration: none !important;
    background-color: var(--table-edit-link-hover-bg, #403d39) !important;
    border: none !important;
    box-shadow: none !important;
}

table .table-name-edit-link:hover .fa-edit,
table .table-name-edit-link:focus .fa-edit,
table .table-name-edit-link:focus-visible .fa-edit,
table .btn.table-name-edit-link:hover .fa-edit,
table .btn.table-name-edit-link:focus .fa-edit,
table .btn.table-name-edit-link:focus-visible .fa-edit,
table .btn-link.table-name-edit-link:hover .fa-edit,
table .btn-link.table-name-edit-link:focus .fa-edit,
table .btn-link.table-name-edit-link:focus-visible .fa-edit {
    opacity: 1;
    color: #fff;
}

.opentry-dashboard-widget table.dataTable {
    font-size: var(--ui-font-size-base);
}

.dashboard-users-row-text .table-name-edit-link {
    white-space: normal;
}

tr.group-header {
    background-color: var(--color-gray-lightest);
    border-top: 2px solid var(--color-border-light);
    font-weight: bold;
    padding: var(--spacing-sm);
}

/* DataTables */
.dataTables_filter {
    clear: none;
}

.dataTables_info {
    float: left;
    font-size: var(--font-size-th);
}

.dataTables_paginate {
    margin-top: 12px !important;
}

/* DataTables Buttons */
.dt-button-collection {
    border: 1px solid darkgrey;
}

div.dt-buttons.btn-group {
    float: left;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-success-bg);
    color: var(--color-gray-dark);
    border-bottom: 1px solid darkgrey;
}

.dt-button.dropdown-item:hover {
    background-color: var(--color-white);
    color: var(--color-black) !important;
}


/* =============================================================================
   Pagination
   ============================================================================= */

.pagination .page-link {
    font-size: var(--font-size-base) !important;
    padding: 0 var(--spacing-xs) !important;
}

.pagination .page-item.active > .page-link,
.pagination .page-item.active > .page-link:focus,
.pagination .page-item.active > .page-link:hover {
    background-color: var(--ui-portal-theme-color, #005961);
    border-color: var(--ui-portal-theme-color, #005961);
    color: var(--color-white);
}

.pagination .page-item.active > .page-link:hover {
    background-color: var(--ui-portal-theme-color-dark, #004a52);
    border-color: var(--ui-portal-theme-color-dark, #004a52);
    color: var(--color-white);
}

.dataTables_paginate .page-link {
    color: var(--ui-portal-theme-color, #005961);
}

.go-to-page {
    margin-left: var(--spacing-sm);
    margin-top: -2px;
    text-transform: uppercase;
    font-size: var(--font-size-base);
    color: var(--color-gray);
}

.go-to-page-number {
    width: 40px;
    height: 18px;
    margin-left: var(--spacing-xs);
    margin-right: var(--spacing-xs);
    text-align: center;
    display: inline-block;
}


/* =============================================================================
   Navigation
   ============================================================================= */

/* Nav Tabs */
.nav-tabs-navigation {
    border-bottom: 1px solid var(--color-success);
}

.nav-tabs .nav-item .nav-link.active {
    color: var(--color-success);
}

.nav-tabs .nav-item .nav-link.active:before,
.nav-tabs .nav-item .nav-link.active:hover:before,
.nav-tabs .nav-item .nav-link.active:focus:before {
    border-bottom: 11px solid var(--color-success);
    bottom: 6px;
}

.nav-tabs .nav-item .nav-link.active:after,
.nav-tabs .nav-item .nav-link.active:hover:after,
.nav-tabs .nav-item .nav-link.active:focus:after {
    border-bottom: 11px solid #fff;
    bottom: 5px;
}

/* Nav Pills */
.nav-pills:not(.access-rights-schedules-nav) .nav-link.active,
.nav-pills:not(.access-rights-schedules-nav) .show > .nav-link {
    color: var(--color-white);
    background-color: var(--color-success);
}

/* Menus verticaux avec compteurs (Horaires, édition appareil, etc.) */
.nav.flex-column.nav-pills:not(.access-rights-schedules-nav) .nav-link,
.nav-pills.flex-column:not(.access-rights-schedules-nav) .nav-link {
    color: var(--color-gray-dark);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    border-radius: 4px;
    margin-bottom: 4px;
    padding: 10px 14px;
}

.nav.flex-column.nav-pills:not(.access-rights-schedules-nav) .nav-link:not(.active):hover,
.nav.flex-column.nav-pills:not(.access-rights-schedules-nav) .nav-link:not(.active):focus,
.nav-pills.flex-column:not(.access-rights-schedules-nav) .nav-link:not(.active):hover,
.nav-pills.flex-column:not(.access-rights-schedules-nav) .nav-link:not(.active):focus {
    background-color: var(--color-success-bg);
    color: var(--color-gray-dark);
}

.nav.flex-column.nav-pills:not(.access-rights-schedules-nav) .nav-link.active,
.nav-pills.flex-column:not(.access-rights-schedules-nav) .nav-link.active {
    color: var(--color-white) !important;
    background-color: var(--color-success) !important;
}

.nav.flex-column.nav-pills .nav-link .badge,
.nav-pills.flex-column .nav-link .badge {
    flex-shrink: 0;
    margin-left: 8px;
}

.nav-link.logout {
    font-size: .8em !important;
    margin-top: 3px !important;
}

.v-pills-horhebdo,
.v-pills-horquot,
.v-pills-perferiee {
    border-left: 1px solid #eae8e8;
}

/* Navbar */

:root {
    --opentry-topbar-height: 53px;
}

#top_navbar {
  padding: 0;
  min-height: var(--opentry-topbar-height);
  box-sizing: border-box;
}

.navbar-absolute,
.navbar-absolute > .container-fluid {
    background-color: var(--bg-body) !important;
}

.navbar-expand-lg {
    margin-top: -1px !important;
    padding: 0 !important;
}

.nav-link.logout {
    border: 0;
    background: none !important;
    cursor: pointer;
}
.nav-link.logout i {
    font-size: 1.4em;
}

.nav-item-server-datetime:before {
    content: "|";
}

#top_navbar .commissioning-nav-link {
    position: relative;
    white-space: nowrap;
}

#top_navbar .commissioning-nav-link i {
    font-size: 1.15em;
}

#top_navbar .commissioning-nav-label {
    font-size: 12px;
    margin-left: 0.2rem;
    text-transform: none;
    letter-spacing: 0;
}

#top_navbar .commissioning-nav-badge {
    position: absolute;
    top: 0.1rem;
    right: 0;
    font-size: 0.55rem;
    padding: 0.12rem 0.32rem;
}

@media (min-width: 1200px) {
    #top_navbar .commissioning-nav-label {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .navbar .navbar-toggler-bar {
        display: block;
        position: relative;
        width: 22px;
        height: 1px;
        border-radius: 1px;
        background: var(--color-gray-dark);
        margin-top: 3px !important;
    }
    #top_navbar .nav-link {
        text-align: left;
    }
    #top_navbar .nav-link i {
        width: 42px;
    }
    #top_navbar .nav-link > span.d-xl-none,
    #top_navbar .nav-link + span.d-xl-none {
        font-size: 14px;
        text-transform: uppercase;
    }
    #top_navbar .nav-link.logout i {
        font-size: 1.4em;
        width: 39px;
    }
}


/* =============================================================================
   Sidebar
   ============================================================================= */

.sidebar,
.off-canvas-sidebar {
    background-color: #000;
}

.sidebar::before,
.sidebar::after,
.off-canvas-sidebar::before,
.off-canvas-sidebar::after {
    background: #000 !important;
}

.sidebar-wrapper {
    overflow-x: hidden !important;
    padding-bottom: var(--spacing-sm) !important;
}

.sidebar-wrapper > ul > li > a {
    padding-top: 4px !important;
}

.sidebar-mini-icon {
    font-size: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.sidebar-normal {
    font-size: var(--font-size-small) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

.sidebar .logo {
    height: var(--opentry-topbar-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.sidebar .logo a.logo-mini {
    float: none;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar .sidebar-wrapper {
    height: calc(100vh - var(--opentry-topbar-height)) !important;
}

.sidebar[data-active-color="success"] .sidebar-wrapper > .nav > li.active > a:not(.text-danger),
.sidebar[data-active-color="success"] .sidebar-wrapper > .nav > li.active > a:not(.text-danger) > i {
    color: var(--color-success) !important;
    opacity: 1;
}

.sidebar[data-active-color="success"] .sidebar-wrapper > .nav > li.active > a:not(.text-danger) > p {
    color: var(--color-success) !important;
}

.sidebar .sidebar-wrapper > .nav > li:not(.active) > a > i {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.sidebar .sidebar-wrapper > .nav > li.active > a.text-danger,
.sidebar .sidebar-wrapper > .nav > li.active > a.text-danger > i {
    color: #dc3545 !important;
    opacity: 1;
}

.sidebar .sidebar-wrapper > .nav > li.active > a.text-danger > p {
    color: #dc3545 !important;
}

@media (min-width: 992px) {
    .sidebar-mini .sidebar:not(:hover) .sidebar-wrapper > .nav > li > a > p {
        opacity: 0 !important;
        transform: translate3d(-25px, 0, 0) !important;
    }
}

a.logo-normal {
    margin-left: -15px !important;
    margin-top: -10px !important;
    padding-top: 0 !important;
}

@media (min-width: 990px) {
    .sidebar-mini .sidebar:hover .logo a.logo-mini {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .sidebar-mini .sidebar:hover .logo a.logo-normal {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
}


/* =============================================================================
   Bootstrap Dual Listbox
   ============================================================================= */

.bootstrap-duallistbox-container .buttons {
    width: 100%;
    margin-bottom: -1px;
}

.bootstrap-duallistbox-container label {
    display: block;
}

.bootstrap-duallistbox-container .box1 > label,
.bootstrap-duallistbox-container .box2 > label {
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--color-gray-dark);
    margin-bottom: 0.35rem;
}

.dual-listbox-row {
    margin-top: 1.25rem;
}

.dual-listbox-field > label[for] {
    display: none !important;
}

.bootstrap-duallistbox-container .info {
    display: inline-block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-small);
}

.bootstrap-duallistbox-container .clear1,
.bootstrap-duallistbox-container .clear2 {
    display: none;
    font-size: var(--font-size-tiny);
}

.bootstrap-duallistbox-container .box1.filtered .clear1,
.bootstrap-duallistbox-container .box2.filtered .clear2 {
    display: inline-block;
}

.bootstrap-duallistbox-container .move,
.bootstrap-duallistbox-container .remove {
    width: 50%;
    box-sizing: content-box;
}

.bootstrap-duallistbox-container .btn-group .btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.bootstrap-duallistbox-container:not(.moveonselect) select {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.bootstrap-duallistbox-container .moveall,
.bootstrap-duallistbox-container .removeall {
    width: 100%;
    box-sizing: content-box;
}

.bootstrap-duallistbox-container .moveall,
.bootstrap-duallistbox-container .move,
.bootstrap-duallistbox-container .remove,
.bootstrap-duallistbox-container .removeall {
    background-color: var(--color-white);
    color: var(--ui-portal-theme-color, #005961);
    border: 1px solid var(--ui-portal-theme-color, #005961);
    transition: var(--transition-base);
}

.bootstrap-duallistbox-container .moveall:hover,
.bootstrap-duallistbox-container .moveall:focus,
.bootstrap-duallistbox-container .move:hover,
.bootstrap-duallistbox-container .move:focus,
.bootstrap-duallistbox-container .remove:hover,
.bootstrap-duallistbox-container .remove:focus,
.bootstrap-duallistbox-container .removeall:focus,
.bootstrap-duallistbox-container .removeall:hover {
    background-color: var(--ui-portal-theme-color, #005961) !important;
    color: var(--color-white);
}

.bootstrap-duallistbox-container .info-container {
    display: none !important;
}

.bootstrap-duallistbox-container.bs2compatible .btn-group > .btn + .btn {
    margin-left: 0;
}

.bootstrap-duallistbox-container select {
    width: 100%;
    height: 300px;
    padding: 4px;
    color-scheme: light only;
}

.bootstrap-duallistbox-container .filter {
    display: inline-block;
    width: 100%;
    height: 31px;
    margin: 0 0 var(--spacing-xs) 0;
    box-sizing: border-box;
}

.bootstrap-duallistbox-container .filter.placeholder {
    color: #aaa;
}

.bootstrap-duallistbox-container.moveonselect .move,
.bootstrap-duallistbox-container.moveonselect .remove {
    display: none;
}

.bootstrap-duallistbox-container.moveonselect .moveall,
.bootstrap-duallistbox-container.moveonselect .removeall {
    width: 100%;
}

.bootstrap-duallistbox-container select option {
    padding: 8px 10px;
    margin-bottom: 2px;
    font-size: 14px;
    line-height: 1.4;
    background: #f0f0f0;
    color: var(--color-gray-dark);
}

.bootstrap-duallistbox-container .box1 select option:focus,
.bootstrap-duallistbox-container .box1 select option:active,
.bootstrap-duallistbox-container .box1 select option:checked,
.bootstrap-duallistbox-container .box1 select option[selected] {
    background: var(--ui-portal-theme-color, #005961) linear-gradient(0deg, var(--ui-portal-theme-color, #005961) 0%, var(--ui-portal-theme-color, #005961) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 500;
}

.bootstrap-duallistbox-container .box2 select option {
    background: var(--ui-portal-theme-color, #005961);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 500;
}

.bootstrap-duallistbox-container .box2 select option:focus,
.bootstrap-duallistbox-container .box2 select option:active,
.bootstrap-duallistbox-container .box2 select option:checked,
.bootstrap-duallistbox-container .box2 select option[selected] {
    background: var(--ui-portal-theme-color, #005961) linear-gradient(0deg, var(--ui-portal-theme-color, #005961) 0%, var(--ui-portal-theme-color, #005961) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 500;
}


/* =============================================================================
   Bootstrap Switch
   ============================================================================= */

.bootstrap-switch .bootstrap-switch-label {
    height: 18px;
}

.bootstrap-switch .bootstrap-switch-handle-on i,
.bootstrap-switch .bootstrap-switch-handle-off i,
.bootstrap-switch .bootstrap-switch-label i {
    line-height: 10px;
}


/* =============================================================================
   FullCalendar
   ============================================================================= */

#external-events {
    margin-top: 42px;
    width: 100%;
    padding: 0 var(--spacing-sm);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius);
    background: var(--color-white);
    text-align: left;
}

#external-events h4 {
    font-size: var(--font-size-h4);
    margin-top: 50px;
    padding-top: 1em;
}

#external-events .resource-item {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-lg) var(--spacing-xs);
    text-align: center;
    cursor: pointer;
    background-color: var(--color-bluelight) !important;
    border-color: var(--color-bluelight);
    color: var(--color-black);
    transition: var(--transition-base);
}

#external-events .resource-item.active {
    background-color: var(--color-success) !important;
}

.fc-toolbar h2 {
    font-size: 1.5em;
}

.fc-event {
    padding: 4px;
    background: var(--color-success) !important;
}

.fc-event.single {
    left: -2px !important;
}

.fc-event.uneditable {
    cursor: not-allowed;
}

.fc-event.bg-warning,
.fc-event.bg-warning:hover {
    background: var(--color-warning) !important;
}

.fc-event.bg-disabled,
.fc-event.bg-disabled:hover {
    background: #aaa !important;
}

.fc-agendaWeek-view tr {
    min-height: 25px;
    height: 25px;
}

.fc-agendaDay-view tr {
    height: 25px;
}

.fc-unthemed .fc-disabled-day {
    opacity: 0 !important;
}

.fc-bg {
    background: var(--bg-calendar);
    opacity: 0.2;
}

.fc-today,
.fc-available-hours {
    background: var(--color-success) !important;
    opacity: 0.2 !important;
}

.fc-highlight {
    background: var(--color-success) !important;
    opacity: 0.8 !important;
}

.fc-holiday {
    background: var(--bg-holiday) !important;
    border-color: var(--bg-holiday) !important;
    cursor: not-allowed !important;
}

.past-event {
    background: var(--bg-past-event) !important;
    cursor: not-allowed !important;
}

.fc-today {
    color: var(--color-black) !important;
    font-weight: bold !important;
    opacity: 1 !important;
}

.longSlotDuration .fc-time-grid .fc-slats td {
    height: 4em !important;
}

.veryLongSlotDuration .fc-time-grid .fc-slats td {
    height: 8em !important;
}


/* =============================================================================
   Select2 Plugin
   ============================================================================= */

.select2-container {
    font-size: var(--font-size-base);
    width: 100% !important;
}

.select2-container,
.select2-dropdown,
.select2-search,
.select2-results {
    transition: none !important;
}

/* Invalid state for Select2 */
select.is-invalid + .select2-container .select2-selection,
select.is-invalid + .select2-container .select2-selection--single,
select.is-invalid + .select2-container .select2-selection--multiple {
    border-color: var(--color-danger) !important;
}

select.is-invalid + .select2-container .select2-selection:focus,
select.is-invalid + .select2-container .select2-selection--single:focus,
select.is-invalid + .select2-container .select2-selection--multiple:focus {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}


/* =============================================================================
   Sweet Alert Overrides
   ============================================================================= */

.swal2-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    padding: 0 1rem !important;
}

.swal2-content {
    font-size: 14px !important;
}

.opentry-idle-timer {
    margin: 0.5rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--portal-text, #333);
}

.opentry-idle-timer-value {
    display: inline-block;
    min-width: 2ch;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--portal-text, #222);
}

/* Icône warning — réglable via Interface (--confirm-icon-*) */
.swal2-icon.swal2-warning {
    width: var(--confirm-icon-size);
    height: var(--confirm-icon-size);
    border-width: var(--confirm-icon-border);
    border-color: var(--color-warning);
    color: var(--color-warning);
    margin: 1.25em auto 1.5em;
}

.swal2-icon.swal2-warning .swal2-icon-content {
    font-size: var(--confirm-icon-mark-size);
    font-weight: var(--confirm-icon-weight);
    line-height: 1;
}

/* Boutons de confirmation — plus grands, typo Opentry */
.swal2-actions {
    margin-top: 0.5em;
    padding: 0 0.5em 0.25em;
}

/* buttonsStyling:false → pas de .swal2-styled, seulement .swal2-confirm / .swal2-cancel + .btn */
.swal2-popup .swal2-actions button.swal2-confirm,
.swal2-popup .swal2-actions button.swal2-cancel {
    margin: 0.35em 0.6em !important;
    padding: var(--confirm-btn-padding-y) var(--confirm-btn-padding-x) !important;
    font-size: var(--confirm-btn-font-size) !important;
    min-width: var(--confirm-btn-min-width) !important;
    line-height: 1.35 !important;
    font-weight: var(--btn-font-weight, 600) !important;
    text-transform: var(--btn-text-transform, uppercase) !important;
    letter-spacing: var(--btn-letter-spacing, 0.02em);
    border-radius: var(--btn-border-radius, 20px) !important;
    box-shadow: none !important;
    border-width: 1px;
    border-style: solid;
}

.swal2-popup .swal2-actions button.swal2-confirm {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #fff !important;
}

.swal2-popup .swal2-actions button.swal2-cancel {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: #fff !important;
}


/* =============================================================================
   Page Interface — réglages utilisateur
   ============================================================================= */

.ui-settings-page .ui-settings-section {
    padding: 1.25rem 0 0.5rem;
}

.ui-settings-page .ui-settings-section-title {
    margin: 0 0 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--color-success);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9a9a9a;
}

.ui-settings-page .ui-settings-subsection-title {
    margin: 0 0 1rem;
    padding-top: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #b0b0b0;
}

.ui-settings-page hr.ui-settings-separator {
    margin: 1.25rem 0;
    border: 0;
    border-top: 1px solid #e3e3e3;
}

.ui-settings-page hr.ui-settings-subseparator {
    margin: 1rem 0 1.25rem;
    border: 0;
    border-top: 1px dashed #e8e8e8;
}

.ui-settings-page .ui-settings-actions {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-success);
}

@media (min-width: 768px) {
    .ui-settings-page .ui-settings-columns > [class*="col-"]:not(:last-child) {
        border-right: 1px solid #e8e8e8;
    }

    .ui-settings-page .ui-settings-columns > [class*="col-"] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .ui-settings-page .ui-settings-columns > [class*="col-"]:first-child {
        padding-left: 15px;
    }

    .ui-settings-page .ui-settings-columns > [class*="col-"]:last-child {
        padding-right: 15px;
    }
}

/* =============================================================================
   Contrôleurs — onglet Paramètres de communication (réutilise users_split.css)
   ============================================================================= */

.devices-page .devices-communication-form {
    max-width: none;
}


/* =============================================================================
   Utilities
   ============================================================================= */

.fit {
    width: 1%;
    white-space: nowrap !important;
}

.nowrap {
    white-space: nowrap !important;
}

.actions-row {
    white-space: nowrap !important;
    padding: 0 var(--spacing-xs);
}

.flex-fill {
    flex: 1 !important;
}

.scrollBox {
    width: 100%;
    max-height: 750px;
    overflow: auto;
}

.copyright {
    font-size: 0.9em;
}

.copyright .copyright-ixoff-link {
    color: inherit;
    text-decoration: none;
}

.copyright .copyright-ixoff-link:hover,
.copyright .copyright-ixoff-link:focus {
    color: var(--portal-teal, #005961);
    text-decoration: underline;
}


/* =============================================================================
   Dark Mode Switcher
   ============================================================================= */

.dm-checkbox {
    opacity: 0;
    position: absolute;
}

.dm-switcher {
    transform: scale(0.55);
    margin-top: 8px;
}

.dm-label {
    background-color: var(--color-gray-lighter);
    border-radius: var(--border-radius-circle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xs);
    position: relative;
    height: 26px;
    width: 50px;
    transform: scale(1.5);
}

.dm-label .dm-ball {
    background-color: var(--color-white);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    height: 22px;
    width: 22px;
    transform: translateX(0px);
    transition: var(--transition-fast);
}

.dm-checkbox:checked + .dm-label .dm-ball {
    transform: translateX(24px);
}

.dm-moon {
    color: #f1c40f;
}

.dm-sun {
    color: #f39c12;
}


/* =============================================================================
   Loader Animation
   ============================================================================= */

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    animation-fill-mode: both;
    animation: load7 1.8s infinite ease-in-out;
}

.loader {
    color: var(--color-warning);
    font-size: var(--font-size-tiny);
    text-indent: -9999em;
    transform: translateZ(0);
    animation-delay: -0.16s;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, 0);
}

.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}

.loader:before {
    left: -3.5em;
    animation-delay: -0.32s;
}

.loader:after {
    left: 3.5em;
}

@keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}


/* =============================================================================
   File Upload
   ============================================================================= */

.file-upload-picture {
    position: relative;
}

.file-upload-picture input[type="file"] {
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0 !important;
    position: absolute;
    top: 0;
    width: 100%;
}


/* =============================================================================
   Device Logs
   ============================================================================= */

#device_logs .device-log-block > span {
    display: block;
    min-height: 15px;
    font-family: "Lucida Console", Monaco, monospace;
}

#device_logs .device-log-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 0;
    padding: 0.1rem 0.4rem;
    line-height: 1.15;
    font-weight: 600;
    font-family: "Lucida Console", Monaco, monospace;
    background: var(--color-bluelight, #b8d8d8);
    color: var(--portal-teal-dark, #004a52);
}

#device_logs .device-log-header__time,
#device_logs .device-log-header__device {
    color: inherit;
}

#device_logs .device-log-header__time {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#device_logs .device-log-header__device {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
}

/* Legacy blocks (flux Pusher / anciennes sessions) */
#device_logs span.bg-bluelight {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 0;
    padding: 0.1rem 0.4rem;
    line-height: 1.15;
    font-weight: 600;
    font-family: "Lucida Console", Monaco, monospace;
    background: var(--color-bluelight, #b8d8d8);
    color: var(--portal-teal-dark, #004a52);
}

#device_logs span.bg-bluelight .pull-right {
    display: inline !important;
    float: none !important;
    flex: 0 0 auto;
    min-height: 0;
    margin: 0 0 0 0.5rem;
    padding: 0;
    line-height: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    white-space: nowrap;
}

#device_logs span.device-log-timeout,
#device_logs .device-log-block span.device-log-timeout {
    color: var(--color-danger) !important;
    font-weight: 700;
}

#device_logs span.text-danger {
    color: var(--color-danger) !important;
    font-weight: 600;
}

#device_logs {
    font-size: var(--font-size-tiny);
    width: 100%;
    height: 230px;
    overflow-x: hidden;
    overflow-y: auto;
}

.devices-page .devices-panels-row {
    align-items: stretch;
}

/* Table contrôleurs — nom éditable (couleur via .table-name-edit-link) */
.devices-page #devicesTable .devices-name-edit-link {
    white-space: normal;
    text-align: left;
    line-height: 1.3;
}

.devices-page #devicesTable .devices-name-edit-link .fa-edit {
    opacity: 0.85;
}

/* Table contrôleurs — armement = largeur du libellé, actions compactes */
.devices-page #devicesTable th[data-data="arming_state"],
.devices-page #devicesTable td.dt-col-arming {
    width: 5.75rem;
    min-width: 5.75rem;
    max-width: 5.75rem;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.devices-page #devicesTable th.devices-table-actions-col,
.devices-page #devicesTable td.devices-table-actions-col {
    min-width: 10rem;
    width: 10rem;
    white-space: nowrap;
    text-align: center;
}

/* Firmware + icône upload centrés dans la cellule */
.devices-page #devicesTable th[data-data="firmware_version"],
.devices-page #devicesTable td.dt-col-firmware {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.devices-page #devicesTable .devices-firmware-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    line-height: 1.2;
    vertical-align: middle;
}

.devices-page #devicesTable .devices-firmware-version {
    line-height: 1.2;
}

.devices-page #devicesTable .devices-firmware-upload {
    display: inline-flex;
    align-items: center;
    margin: 0;
    float: none;
}

.devices-page #devicesTable .devices-firmware-upload .btn-upload,
.devices-page #devicesTable .devices-firmware-upload .devices-firmware-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    min-height: 0;
    vertical-align: middle;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--portal-muted, #6c757d);
}

.devices-page #devicesTable .devices-firmware-upload .devices-firmware-icon-btn:hover,
.devices-page #devicesTable .devices-firmware-upload .devices-firmware-icon-btn:focus {
    color: #5a6268;
    background: transparent;
    border: none;
    box-shadow: none;
    text-decoration: none;
}

/* Icône firmware : fa-microchip (gris muted, sans pastille). */
.devices-page #devicesTable .devices-firmware-upload .devices-firmware-icon {
    font-size: 1.15rem;
    line-height: 1;
    color: inherit;
}

.devices-page #devicesTable td.devices-table-actions-col .actions-row {
    flex-wrap: nowrap;
    justify-content: center;
}

.devices-page .devices-panels-row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.devices-page .devices-panel-card-wrap {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
}

.devices-page .devices-panel-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

.devices-page .devices-panel-card > .card-body,
.devices-page .devices-panel-card > #pingDeviceFormContainer {
    flex: 1 1 auto;
}

.devices-page .devices-panel-card > #deviceLogsContainer {
    flex: 0 0 auto;
}

.devices-page .devices-panel-card > .card-footer {
    margin-top: auto;
    flex: 0 0 auto;
}

.devices-page .devices-panel-card #device_logs {
    height: 230px;
    max-height: 230px;
    overflow: auto;
}

.devices-page .devices-panel-card .btn-collapse {
    padding: 0 !important;
    min-width: 2rem;
    line-height: 1;
}

.devices-page .devices-panel-card .btn-collapse,
.devices-page .devices-panel-card .btn-collapse:hover,
.devices-page .devices-panel-card .btn-collapse:focus,
.devices-page .devices-panel-card .btn-collapse:active,
.devices-page .devices-panel-card .btn-collapse.active {
    color: #3c4858 !important;
}

/* Contrôleurs — formulaire ping (typographie alignée libellés dual-listbox Profils) */
.devices-page #pingDeviceForm .devices-ping-label {
    display: inline-block;
    margin-bottom: 0.35rem;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-dark);
}

.devices-page #pingDeviceForm .devices-ping-select {
    height: auto;
    min-height: calc(1.8125rem + 2px);
    padding: 0.35rem 0.5rem !important;
    font-size: 12px !important;
    line-height: 1.5;
    font-weight: 400;
    box-sizing: border-box !important;
}

.devices-page #pingDeviceForm #id_discovered_device {
    min-width: 100%;
}

.devices-page .devices-duplicate-alert {
    border: 1px solid #ffda6a;
    background-color: #fff3cd;
    color: #664d03;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.devices-page .devices-duplicate-alert .devices-duplicate-alert-content {
    display: flex;
    align-items: flex-start;
}

.devices-page .devices-duplicate-alert i {
    color: #664d03;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.devices-page #availableDevices .devices-duplicate-device-row > td {
    background-color: #fffbf0;
    border-color: #ffda6a;
}

.devices-page #availableDevices .devices-duplicate-subrow > td {
    padding: 0.35rem 0.5rem 0.5rem;
    vertical-align: middle;
    background-color: #fffbf0;
    border-color: #ffda6a;
    border-top: none;
}

.devices-page #availableDevices .devices-duplicate-subrow .devices-duplicate-alert {
    margin: 0;
}

.devices-page .devices-panel-card .btn-collapse i.fa {
    font-size: 1.75rem !important;
    color: #3c4858 !important;
    line-height: 1;
    vertical-align: middle;
}

/* Edition contrôleur — cartes portes / alarmes alignées en bas */
#deviceForm .device-edit-cards-row {
    align-items: stretch;
}

#deviceForm .device-edit-cards-row.device-edit-cards-row--expanded {
    align-items: flex-start;
}

#deviceForm .device-edit-cards-row.device-edit-cards-row--expanded .device-edit-card {
    flex: 0 1 auto;
}

#deviceForm .device-edit-cards-row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

#deviceForm .device-edit-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

#deviceForm .device-edit-card > .card-body {
    flex: 1 1 auto;
}

#device_logs.new-window {
    height: calc(100vh - 100px);
}

/* Popup fenêtre dédiée (/devices/logs/) */
body.device-logs-popup {
    overflow: hidden;
}

body.device-logs-popup .wrapper {
    height: 100vh;
    overflow: hidden;
}

.device-logs-popup-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #fafafa;
}

.device-logs-popup-page .device-logs-header {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 10px 16px;
    background: #fafafa;
    border-bottom: 1px solid #e3e3e3;
    z-index: 1;
    box-sizing: border-box;
}

.device-logs-popup-page .device-logs-header .card-category {
    margin: 0;
    line-height: 1.2;
}

.device-logs-popup-page .device-logs-header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 12px;
}

.device-logs-popup-page .device-logs-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.device-logs-popup-page #device_logs.new-window {
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 8px 12px;
    box-sizing: border-box;
    overflow: auto;
    background: #fff;
}
.events-popup-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #fff;
}

body.opentry-events-popup-embed {
    overflow: hidden;
    height: 100vh;
}

body.opentry-events-popup-embed .wrapper,
body.opentry-events-popup-embed .main-panel,
body.opentry-events-popup-embed .content {
    height: 100%;
    max-height: 100vh;
    min-height: 0;
    overflow: hidden;
}

body.opentry-events-popup-embed .events-popup-page {
    height: 100%;
    max-height: 100vh;
    min-height: 0;
    overflow: hidden;
}

.events-popup-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #e3e3e3;
    background: #fafafa;
}

.events-popup-header-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.events-popup-header-icon {
    color: #51cbce;
    font-size: 1.25rem;
}

.events-popup-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.events-popup-header-actions {
    flex: 0 0 auto;
}

.events-popup-toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #ececec;
    background: #fff;
}

.events-popup-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 14px 14px;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.events-popup-body .events-page-table-wrap,
.events-popup-body .dataTables_wrapper {
    margin-top: 0;
}

.events-popup-body .events-page-table {
    margin-bottom: 0;
}

.device-logs-header {
    position: fixed;
    width: 100%;
    background: #fafafa;
    z-index: 1;
}

.device-logs-body {
    padding-top: 80px;
}


/* =============================================================================
   Console & Process Info
   ============================================================================= */

.console {
    background: var(--bg-console);
    color: var(--color-white) !important;
    font-size: var(--font-size-base);
    width: 100%;
    max-height: 230px;
    overflow: auto;
    padding: var(--spacing-sm);
}

.console pre {
    color: var(--color-white) !important;
}

#process_info {
    display: none;
    text-align: left;
    background: var(--bg-process-info);
    color: var(--color-white);
    font-size: var(--font-size-small);
    font-family: 'Monospace';
    height: 250px;
    overflow: scroll;
}

#toggle_process_info {
    color: var(--bg-process-info);
}


/* =============================================================================
   Webhook Logs
   ============================================================================= */

.webhook-log-detail h3 {
    font-size: var(--font-size-h3);
    background: var(--color-success);
    padding: var(--spacing-xs);
}

.webhook-log-detail h4 {
    font-size: var(--font-size-h4);
    margin: var(--spacing-md) 0;
}


/* =============================================================================
   Session Security
   ============================================================================= */

.session_security_overlay {
    z-index: var(--z-overlay) !important;
}

.session_security_modal {
    z-index: var(--z-modal) !important;
}


/* =============================================================================
   Pending Alarms (bandeau global — aligné .main-panel, pas sur la sidebar)
   ============================================================================= */

:root {
    --alarms-pending-banner-height: 0px;
    --sidebar-width-expanded: 260px;
    --sidebar-width-mini: 80px;
}

#pending_alarms_container {
    position: relative;
    z-index: 1031; /* > navbar (1029), < sidebar surélevée */
    width: 100%;
    box-sizing: border-box;
}

/* Bandeau fixe : même colonne que .main-panel (jamais sur le logo / sidebar). */
body.has-pending-alarms #pending_alarms_container {
    position: fixed;
    top: 0;
    left: var(--sidebar-width-expanded);
    right: 0;
    width: auto;
    z-index: 1031;
}

body.sidebar-mini.has-pending-alarms #pending_alarms_container {
    left: var(--sidebar-width-mini);
}

/* Mobile : sidebar en overlay — bandeau pleine largeur du contenu. */
@media (max-width: 991px) {
    body.has-pending-alarms #pending_alarms_container {
        left: 0;
    }
}

/* Sous le bandeau hijack (plein écran) quand les deux sont actifs. */
body.hijacked.has-pending-alarms #pending_alarms_container {
    top: 38px;
}

/* Sidebar au-dessus du bandeau (logo visible si mini + survol / expansion). */
body.has-pending-alarms .sidebar {
    z-index: 1040;
}

/* Réserve la hauteur du bandeau fixe dans le flux du panneau. */
body.has-pending-alarms .main-panel::before {
    content: "";
    display: block;
    height: var(--alarms-pending-banner-height);
    width: 100%;
    pointer-events: none;
}

body.has-pending-alarms .navbar.navbar-absolute.fixed-top {
    top: var(--alarms-pending-banner-height);
}

body.hijacked.has-pending-alarms .navbar.navbar-absolute.fixed-top {
    top: calc(38px + var(--alarms-pending-banner-height));
}

#pending_alarms {
    z-index: auto;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    border-radius: 0;
    box-sizing: border-box;
    /* Bord bas aligné sur .sidebar .logo:after (séparateur sous le logo). */
    height: var(--opentry-topbar-height);
    min-height: var(--opentry-topbar-height);
    max-height: var(--opentry-topbar-height);
    /* Annule padding-top/bottom .alert Paper (.9rem) ; réserve droite pour le bouton. */
    padding: 0 11.5rem 0 1rem !important;
}

#pending_alarms p {
    font-weight: bold;
    font-size: 20px;
    margin: 0;
    padding: 0;
    line-height: 1.25;
}

#pending_alarms a.btn {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    /* !important : le .btn global impose margin: 4px 2px et décale le centrage. */
    margin: 0 !important;
    line-height: 1.25;
}


/* =============================================================================
   Bootstrap Notify
   ============================================================================= */

[data-notify="container"] {
    font-weight: var(--notify-font-weight, 600) !important;
    text-transform: var(--notify-text-transform, uppercase) !important;
    letter-spacing: var(--btn-letter-spacing, 0.02em);
    color: #ffffff !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

[data-notify="container"] [data-notify="message"],
[data-notify="container"] [data-notify="title"] {
    color: #ffffff !important;
}

[data-notify="container"].alert-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

[data-notify="container"].alert-warning {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
}

[data-notify="container"].alert-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}

[data-notify="container"].alert-info {
    background-color: #51bcda !important;
    border-color: #51bcda !important;
}

[data-notify="progressbar"] {
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--spacing-xs);
}

[data-notify="container"].full-reload-notify {
    position: relative;
}

[data-notify="container"].full-reload-notify .full-reload-notify-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding-right: 1.25rem;
}

[data-notify="container"].full-reload-notify [data-notify="message"] {
    flex: 1 1 auto;
    min-width: 0;
}

[data-notify="container"].full-reload-notify .full-reload-cancel-link {
    flex: 0 0 auto;
    margin-left: auto;
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: underline;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    opacity: 0.95;
}

[data-notify="container"].full-reload-notify .full-reload-cancel-link:hover,
[data-notify="container"].full-reload-notify .full-reload-cancel-link:focus {
    color: #ffffff !important;
    opacity: 1;
    text-decoration: underline;
}

[data-notify="container"].full-reload-notify .full-reload-cancel-pending {
    flex: 0 0 auto;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}


/* =============================================================================
   Two-Factor Authentication
   ============================================================================= */

.enabled-2fa {
    padding-top: 8vh !important;
}

.help-2fa p {
    font-size: 1.2em;
    line-height: 1em;
}

.help-2fa p a {
    color: var(--color-white);
    text-decoration: underline;
}


/* =============================================================================
   Page-Specific Styles
   ============================================================================= */

/* Dashboard */
#dashboardWidgets #eventsTable_length,
#dashboardWidgets #usersTable_length,
#dashboardWidgets .pull-right .dropdown {
    display: none;
}

#dashboardWidgets #eventsContainer .events-buttons,
#dashboardWidgets #usersContainer .users-buttons {
    margin-top: -50px;
}

.main-panel > .content {
    min-height: calc(100vh - 140px);
}

.card-user .author2 {
    text-align: center;
    text-transform: none;
}

.databaseBackupsBox {
    margin-top: 0;
}

#userPropertiesTab .table-responsive {
    overflow: visible;
}

/* Paper Dashboard : overflow:scroll affiche une barre grise permanente sous les DataTables */
.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 0;
}

/* DataTables : ne pas mettre la pagination dans une zone scrollable */
.table-responsive:has(.dataTables_wrapper) {
    overflow: visible;
}

.table-responsive:has(.dataTables_wrapper) .dataTables_wrapper .dataTables_scroll,
.table-responsive:has(.dataTables_wrapper) .dataTables_wrapper > .row:last-child {
    overflow: visible;
}

/* Settings Page */
.settings-container > div,
#translationsPage > .d-flex {
    height: 100%;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.settings-container > .d-xl-flex > .flex-fill > .card,
#translationsPage > .d-flex > .flex-fill > .card {
    min-height: 100%;
    padding-bottom: 0;
}

#translationsPage .text-right .btn {
    display: inline-block;
    width: auto;
}

.settings-container .settings-module {
    flex: 1;
}

.settings-container .settings-row {
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.settings-container .settings-row > .settings-module {
    min-width: 0;
}

.settings-container .card-body .nav-tabs-navigation {
    border-bottom: 1px solid var(--color-success);
    margin-bottom: 1rem;
}

.settings-container .card-body .nav-tabs {
    border-bottom: 0 none;
}

#settings_page .settings-network-tabs-nav {
    text-align: center;
}

#settings_page .settings-network-tabs .nav-item {
    position: relative;
}

#settings_page .settings-network-tabs .nav-link {
    color: var(--color-gray);
    font-weight: 500;
    border: 0 none;
    background: transparent;
}

#settings_page .settings-network-tabs .nav-link.active {
    color: var(--color-success);
    background: transparent;
    border: 0 none;
}

#settings_page .settings-network-grid .form-group {
    margin-bottom: 0.85rem;
}

#settings_page .settings-network-grid label,
#settings_page .network-settings-grid label {
    margin-bottom: 0.25rem;
}

#settings_page .settings-datetime-form label {
    margin-bottom: 0.25rem;
}

#settings_page .settings-datetime-form .form-group {
    margin-bottom: 0.85rem;
}

#settings_page .settings-datetime-form .bootstrap-select {
    width: 100% !important;
}

#settings_page .settings-session-form .form-group {
    margin-bottom: 0.85rem;
}

#settings_page .settings-session-form label {
    margin-bottom: 0.25rem;
}

#settings_page .settings-backups-section-title {
    color: var(--portal-teal, var(--ui-portal-theme-color, #005961)) !important;
    font-size: var(--settings-section-title-font-size, 0.9375rem);
    font-weight: var(--settings-section-title-font-weight, 700);
    line-height: 1.4;
    margin-bottom: 0.65rem;
    margin-top: 0;
    text-transform: none;
    letter-spacing: 0.01em;
}

#settings_page .settings-backups-sep {
    margin: 0.85rem 0;
}

#settings_page .settings-backups-form .form-group {
    margin-bottom: 0.85rem;
}

#settings_page .settings-backups-form label {
    margin-bottom: 0.25rem;
}

#settings_page .settings-backups-tabs-nav {
    margin-bottom: 0.75rem;
}

#settings_page .settings-backups-remote[disabled],
#settings_page .settings-backups-remote .disabled {
    opacity: 0.65;
}

#settings_page .network-readonly {
    background-color: #e9ecef !important;
    cursor: default;
}

#settings_page {
    margin-top: 0;
}

#settings_page .card-category {
    color: var(--color-warning) !important;
}

#settings_page .bootstrap-duallistbox-container .btn {
    padding: 4px 12px;
}

#settings_page .bootstrap-duallistbox-container input.filter {
    height: auto;
}

#settings_page .bootstrap-duallistbox-container option {
    padding: 3px 6px;
}

#settings_page #id_users__delete_after {
    display: inline-block;
    width: 70px;
}

#settings_page input[type="file"] {
    opacity: 1;
    position: relative;
    top: inherit;
    right: inherit;
    bottom: inherit;
    left: inherit;
    width: inherit;
    height: inherit;
    z-index: inherit;
}

#id_email__text_signature {
    height: 210px;
    max-height: inherit !important;
}

/* En-tête de page — aligné .173 (titre | onglets | actions) */
.page-tabs-header,
.operators-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--page-tab-active-color, var(--color-success));
    margin-bottom: 30px;
}

.page-tabs-title,
.operators-page-title {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin: 0;
    padding-bottom: 12px;
    font-size: 1rem;
    white-space: nowrap;
}

.page-tabs-header .page-tabs-nav-wrap,
.operators-page-header .operators-page-tabs {
    flex: 1 1 auto;
    border-bottom: none;
    margin-bottom: 0;
    text-align: center;
}

.page-tabs-header .page-tabs-nav-wrap .nav-tabs,
.operators-page-header .operators-page-tabs .nav-tabs {
    justify-content: center;
    border-bottom: none;
}

.page-tabs-header .page-tabs-nav-wrap .nav-tabs .nav-item .nav-link,
.operators-page-header .operators-page-tabs .nav-tabs .nav-item .nav-link {
    font-size: var(--page-tab-font-size, var(--font-size-base, 12px));
}

.page-tabs-header .page-tabs-nav-wrap .nav-tabs .nav-item .nav-link.active,
.page-tabs-header .page-tabs-nav-wrap .nav-tabs .nav-item .nav-link.active:hover,
.page-tabs-header .page-tabs-nav-wrap .nav-tabs .nav-item .nav-link.active:focus,
.operators-page-header .operators-page-tabs .nav-tabs .nav-item .nav-link.active,
.operators-page-header .operators-page-tabs .nav-tabs .nav-item .nav-link.active:hover,
.operators-page-header .operators-page-tabs .nav-tabs .nav-item .nav-link.active:focus {
    color: var(--page-tab-active-color, var(--color-success));
}

.page-tabs-header .page-tabs-nav-wrap .nav-tabs .nav-item .nav-link.active:before,
.page-tabs-header .page-tabs-nav-wrap .nav-tabs .nav-item .nav-link.active:hover:before,
.page-tabs-header .page-tabs-nav-wrap .nav-tabs .nav-item .nav-link.active:focus:before,
.operators-page-header .operators-page-tabs .nav-tabs .nav-item .nav-link.active:before,
.operators-page-header .operators-page-tabs .nav-tabs .nav-item .nav-link.active:hover:before,
.operators-page-header .operators-page-tabs .nav-tabs .nav-item .nav-link.active:focus:before {
    border-bottom-color: var(--page-tab-active-color, var(--color-success));
}

.page-tabs-header--no-tabs .page-tabs-title {
    flex: 1 1 auto;
}

.page-tabs-header--standalone {
    margin-bottom: 0;
}

.page-tabs-actions,
.operators-page-actions {
    flex: 0 0 auto;
    padding-bottom: 12px;
    white-space: nowrap;
}

.page-tabs-actions .btn-page-action,
.operators-page-actions .btn-add-operator {
    text-decoration: none;
}

.page-tabs-actions .btn-page-action .text-secondary,
.operators-page-actions .btn-add-operator .text-secondary {
    text-transform: none;
    font-weight: 400;
}

.devices-page .page-tabs-header .nav-tabs .nav-item .nav-link:not(.active) {
    color: #66615b;
    opacity: 1;
}

.devices-page .page-tabs-header .nav-tabs .nav-item .nav-link:not(.active):hover {
    color: var(--color-success);
}

#operatorsTab {
    position: relative;
    padding-top: 0;
}

#operatorsTab > .table-responsive {
    margin-top: 1rem;
}

.operators-export-toolbar {
    margin-bottom: 0.5rem;
}

/* DataTables — flèches de tri (Paper Dashboard cible Font Awesome 4) */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* Operators Page */
#operatorsPage .perm-block {
    flex-basis: 30% !important;
}

/* Access Rights — Profils & Zones : dual-listbox (contraste onglet Horaires) */
#access_rights_page #profiles .bootstrap-duallistbox-container select,
#access_rights_page #areas .bootstrap-duallistbox-container select {
    padding: 0;
}

#access_rights_page #profiles .bootstrap-duallistbox-container .info,
#access_rights_page #areas .bootstrap-duallistbox-container .info {
    display: inline-block;
    margin-bottom: 5px;
    font-size: 11px;
}

#access_rights_page #profiles .bootstrap-duallistbox-container .filter,
#access_rights_page #areas .bootstrap-duallistbox-container .filter {
    height: 31px;
    margin: 0 0 5px 0;
}

#access_rights_page #profiles .bootstrap-duallistbox-container .info-container {
    display: none;
}

#access_rights_page #profiles .access-profile-zones-schedules-panel {
    margin-top: 0.5rem;
}

#access_rights_page #profiles .access-profile-zones-schedules-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

#access_rights_page #profiles .access-profile-zones-col,
#access_rights_page #profiles .access-profile-schedules-col {
    min-width: 0;
}

#access_rights_page #profiles .access-profile-zones-col .operators-form-panel-title,
#access_rights_page #profiles .access-profile-schedules-col .operators-form-panel-title {
    margin-bottom: 0.75rem;
}

#access_rights_page #profiles .access-profile-zones-col .access-profiles-form-listbox-wrap {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

#access_rights_page #profiles .profile-schedules-controls {
    margin-bottom: 0;
}

#access_rights_page #profiles .profile-schedules-controls .opentry-form-toggle {
    margin-bottom: 0;
}

#access_rights_page #profiles #accessProfileForm .bootstrap-duallistbox-container .box2 > label {
    display: none;
}

#access_rights_page #areaSchedules {
    margin-top: 0;
}

#access_rights_page #profiles .bootstrap-duallistbox-container select option,
#access_rights_page #areas .bootstrap-duallistbox-container select option {
    padding: 7px 8px;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 17px;
    font-weight: 600;
}

#access_rights_page #areaSchedules select.profile-schedule-select {
    display: block;
    width: 100%;
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
    margin: 0 0 2px !important;
    padding: 0 1.75rem 0 8px !important;
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 600;
    box-sizing: border-box !important;
    border-radius: 0.25rem;
}

#access_rights_page #areas .form-check-inline {
    margin-top: 6px;
}

/* Users Page */
#users_page #userForm .nav-link {
    white-space: nowrap;
}

#users_page #userForm ul.dropdown-menu {
    padding: var(--spacing-sm);
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    margin-top: 0;
}

#users_page #userForm ul.dropdown-menu li {
    margin-bottom: var(--spacing-xs);
}

#users_page #userForm ul.dropdown-menu input[type="checkbox"] {
    vertical-align: middle;
    margin-right: 3px;
}

#users_page #userAvatar {
    height: 230px;
}

#users_page .cr-slider-wrap {
    margin: 0 auto !important;
}

#users_page .btn-upload {
    color: var(--color-white) !important;
}

#users_page div.badge-list {
    max-height: 425px;
    padding: 0 var(--spacing-lg);
}

#users_page .badge-number {
    display: inline;
}

/* Door Groups */
#door_group_actions_form .form-group {
    display: inline-block;
    margin-right: var(--spacing-md);
}

/* Server DateTime */
#server_datetime {
    display: inline-block;
}

/* Booking Dashboard */
body.booking-dashboard .main-panel {
    width: 100%;
}

body.booking-dashboard .main-panel .navbar {
    padding: 0 !important;
    background: #333 !important;
    color: var(--color-white) !important;
    position: relative;
}

body.booking-dashboard .dashboard-content {
    margin-top: var(--spacing-lg);
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

body.booking-dashboard .main-panel .navbar a {
    color: var(--color-white) !important;
    cursor: default;
}

body.booking-dashboard #swal2-content .btn {
    padding: 2px;
    margin: 0;
}

/* Login Page */
.login-page .card-header h4 {
    font-size: 1.5em !important;
}

.login-page .login-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    background: #f8fafb;
    color: #4a5568;
    font-size: 0.92rem;
    line-height: 1.45;
}

.login-page .login-notice__icon {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    font-size: 1rem;
    color: #6c757d;
}

.login-page .login-notice__text {
    flex: 1 1 auto;
}

.login-page .login-notice--danger,
.login-page .login-notice--error {
    border-color: #f3d5c8;
    border-left: 4px solid #e85a2b;
    background: #fffaf7;
    color: #5a4034;
}

.login-page .login-notice--danger .login-notice__icon,
.login-page .login-notice--error .login-notice__icon {
    color: #e85a2b;
}

.login-page .login-notice--info {
    border-color: #cfeef5;
    border-left: 4px solid #51bcda;
    background: #f3fbfd;
    color: #2f5863;
}

.login-page .login-notice--info .login-notice__icon {
    color: #51bcda;
}

.login-page .login-notice--success {
    border-color: #d4edda;
    border-left: 4px solid #6bd098;
    background: #f6fcf8;
    color: #2f5a40;
}

.login-page .login-notice--success .login-notice__icon {
    color: #6bd098;
}

.login-page .login-notice--warning {
    border-color: #f5e6c8;
    border-left: 4px solid #fbc658;
    background: #fffdf7;
    color: #6a5420;
}

.login-page .login-notice--warning .login-notice__icon {
    color: #d4a017;
}

body.dark-mode.login-page .login-notice {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

body.dark-mode.login-page .login-notice--danger,
body.dark-mode.login-page .login-notice--error {
    border-color: rgba(232, 90, 43, 0.35);
    background: rgba(232, 90, 43, 0.12);
    color: #ffd8c8;
}

body.dark-mode.login-page .login-notice--info {
    border-color: rgba(81, 188, 218, 0.35);
    background: rgba(81, 188, 218, 0.12);
    color: #c8eef8;
}

.login-page .login-credentials-actions {
    margin-top: 1.25rem;
    padding-bottom: 0.5rem;
    text-align: center;
}

.login-page .login-credentials-actions .btn-login {
    margin-bottom: 0.85rem;
}

.login-page .login-forgot-wrap {
    margin: 0;
}

.login-page .login-forgot-link {
    color: #f96332;
    font-size: 0.92rem;
    text-decoration: none;
}

.login-page .login-forgot-link:hover,
.login-page .login-forgot-link:focus {
    color: #e85a2b;
    text-decoration: none;
}

.login-page .login-secondary-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
    padding-bottom: 0.35rem;
}

.login-page .login-secondary-actions .btn-link {
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.login-page .login-secondary-cancel {
    color: #6c757d;
}

.login-page .login-secondary-cancel:hover,
.login-page .login-secondary-cancel:focus {
    color: #495057;
    text-decoration: none;
}

body.dark-mode.login-page .login-secondary-cancel {
    color: #adb5bd;
}

body.dark-mode.login-page .login-secondary-cancel:hover,
body.dark-mode.login-page .login-secondary-cancel:focus {
    color: #dee2e6;
}

/* Hijack */
.hijack-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    background: #d9534f;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    font-size: 0.9rem;
}

.hijack-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 38px;
    padding: 4px 14px;
    max-width: 100%;
    box-sizing: border-box;
}

.hijack-banner-icon {
    font-size: 1rem;
    opacity: 0.95;
}

.hijack-banner-text {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hijack-banner-form {
    margin: 0;
    flex: 0 0 auto;
}

.hijack-banner-release-btn {
    font-weight: 600;
    color: #d9534f;
    border: 0;
}

.hijack-banner-release-btn:hover,
.hijack-banner-release-btn:focus {
    color: #b52b27;
    background: #fff;
}

.hijack-banner-release-btn.is-busy,
.hijack-banner-release-btn.is-busy:hover,
.hijack-banner-release-btn.is-busy:focus {
    opacity: 0.92;
    cursor: wait;
    color: #d9534f;
    background: #fff;
}

/* Décaler la barre de navigation et le panneau sous le bandeau fixe. */
body.hijacked .main-panel {
    margin-top: 38px;
}

body.hijacked .sidebar {
    top: 38px;
    height: calc(100vh - 38px);
    background-color: #000;
}

.hijack-dropdown-menu {
    max-height: 90vh;
    overflow-y: auto;
}
.hijack-acquire-form {
    margin: 0;
}
.hijack-acquire-item {
    cursor: pointer;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    color: inherit;
}
.hijack-acquire-item:hover,
.hijack-acquire-item:focus {
    color: #fff;
    background: #51cbce;
    text-decoration: none;
}
.hijack-release-form {
    display: inline-flex;
}
.hijack-release-btn {
    cursor: pointer;
    background: none;
    border: 0;
}

/* Date Range */
#dateRangeSearch {
    margin-bottom: -30px;
}


/* =============================================================================
   Media Queries - Responsive
   ============================================================================= */

/* Large Screens */
@media (min-width: 1200px) {
    #users_page #userForm .user-infos {
        text-align: left !important;
    }

    #users_page #userForm #userSideBar {
        padding-bottom: var(--spacing-lg);
    }

    #users_page #userForm .card-user {
        min-height: 100%;
        height: 100%;
    }
}

/* Medium Screens */
@media screen and (min-width: 996px) {
    .events-table {
        flex-grow: 1;
    }

    .photo-on-event {
        min-width: 32.8%;
        max-width: 32.8%;
        min-height: 100%;
        margin-bottom: var(--spacing-lg);
    }

    .photo-on-event > .card {
        min-height: 100%;
    }
}

/* Small & Medium Screens */
@media screen and (max-width: 996px) {

    #operatorsPage .perm-block {
        flex-basis: 100% !important;
    }

    /* Events Page */
    #events_page #dateRangeSearch {
        margin-bottom: var(--spacing-lg) !important;
    }

    #events_page .card-category {
        font-size: small !important;
    }

    /* Access Rights Page */
    #access_rights_page .card-category {
        font-size: small !important;
    }

    /* Users Page */
    #users_page #dateRangeSearch {
        margin-bottom: var(--spacing-lg) !important;
    }

    #users_page .card-category {
        font-size: small !important;
    }

    .badge-pill {
        font-size: 11px !important;
    }

    #users_page .badge-number {
        width: 100px;
    }
}

@media screen and (max-width: 1650px) {
    #users_page .badge-number {
        width: 150px;
    }
}

/* Small Screens */
@media screen and (max-width: 1280px) {

    td {
        font-size: 0.6rem;
    }

    th {
        font-size: 0.6rem;
    }

    table.dataTable thead > tr > th.sorting,
    table.dataTable thead > tr > th.sorting_asc,
    table.dataTable thead > tr > th.sorting_desc,
    .table > thead > tr > th {
        padding-right: var(--spacing-xs);
        font-size: 0.6rem;
    }

    table.dataTable thead > tr > th.sorting,
    table.dataTable thead > tr > th.sorting_asc,
    table.dataTable thead > tr > th.sorting_desc {
        padding-right: 30px;
    }

    .content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .card-text span {
        font-size: var(--font-size-base);
    }

    .card-stats .card-body .numbers .card-category {
        font-size: 0.9rem;
    }

    .card-title {
        font-size: 1.2rem;
    }

    p.card-category {
        font-size: small;
    }

    .pagination .page-item .page-link {
        font-size: var(--font-size-small);
    }

    /* Calendar */
    #external-events {
        margin-top: var(--spacing-sm) !important;
        margin-bottom: var(--spacing-lg);
    }

    .fc-toolbar h2 {
        font-size: 1.2em;
    }

    .fc th {
        font-size: var(--font-size-tiny) !important;
    }

    #external-events h4 {
        font-size: 14px;
    }

    .fc-event {
        padding: 2px;
        font-size: var(--font-size-base);
        width: 50%;
    }
}

@media screen and (max-width: 730px) {
    /* Events Page */
    #events_page .card-category {
        display: none;
    }

    #events_page #dateRangeSearch {
        margin-bottom: var(--spacing-lg) !important;
    }

    /* Access Rights Page */
    #access_rights_page .card-category {
        display: none;
    }

    /* Users Page */
    #users_page .card-category {
        display: none;
    }

    #users_page #dateRangeSearch {
        margin-bottom: var(--spacing-lg) !important;
    }

    #users_page i {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    #usersTable_info {
        font-size: var(--font-size-tiny);
    }

    #users_page .badge-number {
        width: 80px;
    }
}

/* Global responsive fixes */


@media screen and (max-width: 1680px) {

    .events-table .dataTables_info {
        float: none !important;
    }
}

@media screen and (max-width: 1280px) {
    .tab-pane .card-category {
        position: relative !important;
        display: block !important;
        top: none;
        right: none;
        left: none;
        margin-bottom: 15px;
    }

    .page-tabs-header,
    .operators-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .page-tabs-title,
    .operators-page-title,
    .page-tabs-actions,
    .operators-page-actions {
        padding-bottom: 0;
    }

    .page-tabs-header .page-tabs-nav-wrap .nav-tabs,
    .operators-page-header .operators-page-tabs .nav-tabs {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 990px) {

    .dataTables_paginate .pagination {
        justify-content: center !important;
    }
    .dataTables_length,
    .page-item.first,
    .page-item.previous,
    .page-item.next,
    .page-item.last,
    .go-to-page {
        display: none !important;
    }
    .events-buttons {
        margin-top: 0 !important;
    }
    .btn-reset-daterange {
        height: 25px !important;
    }
    .btn-sm {
        font-size: 0.450rem;
    }
    #statsTab .btn-group .btn {
        padding: 5px 8px;
        font-size: .8em;
    }
}

/* modal-xl (Bootstrap 4 backport)
   ============================================================================= */

.modal-xl {
    max-width: 1140px;
}

@media (max-width: 1199px) {
    .modal-xl {
        max-width: calc(100% - 1rem);
    }
}

/* ============================================================================= */

#top_navbar.navbar .navbar-brand .navbar-edition-badge {
    background-color: var(--portal-teal, var(--ui-portal-theme-color, #005961)) !important;
    background: var(--portal-teal, var(--ui-portal-theme-color, #005961)) !important;
    color: #fff !important;
    border: 1px solid var(--portal-teal-dark, var(--ui-portal-theme-color-dark, #004a52));
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    vertical-align: middle;
    margin-left: 0.35rem;
    margin-right: 0.15rem;
    padding: 0.3em 0.65em;
    line-height: 1.2;
    box-shadow: none;
}

#top_navbar.navbar .navbar-brand .navbar-edition-badge.text-uppercase {
    text-transform: uppercase;
}

body.dark-mode #top_navbar.navbar .navbar-brand .navbar-edition-badge {
    background-color: var(--portal-teal, var(--ui-portal-theme-color, #005961)) !important;
    color: #fff !important;
    border-color: var(--portal-teal-dark, var(--ui-portal-theme-color-dark, #004a52));
}

@media screen and (max-width: 400px) {
    .navbar-brand span#ibox_text {
        display: none !important;
    }
}

/* =============================================================================
   Harmonisation verte globale — toute l'UI Opentry
   Palette : --color-success, --color-success-dark, --color-success-bg
   ============================================================================= */

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-success {
    background: var(--color-success) !important;
    color: var(--color-white) !important;
}

.slider.slider-success .noUi-connect,
.slider.slider-success.noUi-connect,
.slider.slider-success .noUi-handle {
    background-color: var(--color-success) !important;
}

.alert-success {
    background-color: var(--color-success-bg) !important;
    border-color: var(--color-success) !important;
    color: var(--color-gray-dark) !important;
}

/* Toggle switches activés — teal des entêtes de tableau portail */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--portal-teal) !important;
    border-color: var(--portal-teal-dark) !important;
}

.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.15rem rgba(0, 89, 97, 0.25);
}

.bg-success,
.table-success,
.list-group-item-success {
    background-color: var(--color-success) !important;
    color: var(--color-white) !important;
}

.progress-bar-success,
.progress-bar.bg-success {
    background-color: var(--color-success) !important;
}

.nav-pills-success .nav-item .nav-link {
    border-color: var(--color-success) !important;
    color: var(--color-success) !important;
}

.nav-pills-success .nav-item .nav-link.active,
.nav-pills-success .nav-item .nav-link.active:focus,
.nav-pills-success .nav-item .nav-link.active:hover,
.nav-pills-success .nav-item .nav-link:hover,
.nav-pills-success .nav-item .nav-link:focus {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--color-white) !important;
}

.fc-highlight,
.fc-bgevent {
    background: var(--color-success-bg) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--color-success) !important;
    color: var(--color-white) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--color-success) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-success-dark) !important;
    border-color: var(--color-success-dark) !important;
    color: var(--color-white) !important;
}

.swal2-icon.swal2-success {
    border-color: var(--color-success) !important;
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--color-success) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(119, 190, 50, 0.35) !important;
}

.badge-greenlight {
    background-color: var(--color-success-dark) !important;
    color: var(--color-white) !important;
}

.plan-door,
.plan-door-default,
.plans-door-marker {
    background-color: var(--color-success-dark) !important;
}

/* =============================================================================
   Notice modal Paper Dashboard (Opentry.showPaperNoticeModal)
   ============================================================================= */

.opentry-paper-notice-modal .modal-dialog.modal-notice {
    max-width: 560px;
}

.opentry-paper-notice-modal--wide .modal-dialog {
    max-width: min(96%, 960px);
}

.opentry-paper-notice-modal--video .modal-dialog {
    max-width: 1140px;
}

.opentry-paper-notice-modal--video .modal-body {
    position: relative;
    width: 100%;
    height: 640px;
    min-height: 640px;
    max-height: none;
    overflow: hidden;
    padding: 0;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}

.opentry-paper-notice-modal--video .modal-body video,
.opentry-paper-notice-modal--video .modal-body iframe {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    border: 0;
}

.opentry-paper-notice-modal--video .camera-live-modal__state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ddd;
}

.opentry-paper-notice-modal--video .camera-live-modal__player-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

.opentry-paper-notice-modal--video-compact .modal-dialog {
    max-width: 480px;
}

.opentry-paper-notice-modal--video-compact .modal-body {
    height: 270px;
    min-height: 270px;
    flex-direction: column;
}

.opentry-paper-notice-modal--video-compact .camera-live-modal__player-wrap {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.opentry-paper-notice-modal--video-compact .camera-live-modal__picker {
    flex: 0 0 auto;
}

.opentry-paper-notice-modal--draggable .modal-dialog {
    position: fixed;
    margin: 0;
    transform: none !important;
    min-height: 0;
}

.opentry-paper-notice-modal--draggable .modal-header.opentry-paper-notice-modal__header {
    cursor: move;
}

.opentry-paper-notice-modal--draggable.is-dragging {
    user-select: none;
}

.opentry-paper-notice-modal--draggable.is-dragging .modal-header.opentry-paper-notice-modal__header {
    cursor: grabbing;
}

.opentry-paper-notice-modal--draggable .modal-header .close {
    cursor: pointer;
}

.opentry-paper-notice-modal .modal-body .operator-perm-modal,
.opentry-paper-notice-modal .modal-body.operator-perm-modal {
    overflow-x: visible;
}

.opentry-paper-notice-modal .modal-header.opentry-paper-notice-modal__header {
    display: block;
    position: relative;
    text-align: left;
    padding: 1.25rem 3rem 1rem 1.25rem;
}

.opentry-paper-notice-modal .opentry-paper-notice-modal__heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.opentry-paper-notice-modal .opentry-paper-notice-modal__logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.opentry-paper-notice-modal .opentry-paper-notice-modal__title {
    margin: 0;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

.opentry-paper-notice-modal .modal-body {
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

.opentry-paper-notice-modal--operator-perm .modal-body,
.opentry-paper-notice-modal--operator-perm .modal-body.operator-perm-modal {
    max-height: none;
    overflow: visible;
    overflow-x: visible;
}

.opentry-paper-notice-modal--operator-perm .modal-dialog.modal-notice {
    max-width: min(96vw, 1180px);
    width: auto;
}

.opentry-paper-notice-modal .opentry-paper-notice-modal__pre {
    max-height: min(55vh, 400px);
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.opentry-paper-notice-modal .opentry-paper-notice-modal__list li {
    margin-bottom: 0.35rem;
    line-height: 1.35;
}

.opentry-paper-notice-modal .modal-footer .btn-info.btn-round {
    min-width: 8rem;
}