:root {
    --oh-primary: #0f4c3a;
    --oh-primary-dark: #0a3529;
    --oh-primary-soft: #e8f3ef;
    --oh-accent: #c79a3b;
    --oh-accent-soft: #faf3e3;
    --oh-ink: #19324a;
    --oh-muted: #6b7b8c;
    --oh-border: #e3e9ee;
    --oh-bg: #f5f7f9;
    --oh-surface: #ffffff;
    --oh-danger: #b42318;
    --oh-radius: 16px;
    --oh-shadow: 0 8px 26px rgba(28, 48, 68, .07);
}

html, body {
    background: var(--oh-bg) !important;
    color: var(--oh-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body { min-height: 100vh; }

/* Structure générale */
.main-content { background: transparent !important; }
.content-inner { padding-bottom: 2rem; }
.iq-navbar {
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--oh-border);
    box-shadow: 0 2px 12px rgba(28,48,68,.04);
    backdrop-filter: blur(10px);
}
.sidebar {
    background: var(--oh-surface) !important;
    border-right: 1px solid var(--oh-border);
    box-shadow: 6px 0 24px rgba(28,48,68,.04);
}
.sidebar .sidebar-header {
    min-height: 78px;
    border-bottom: 1px solid var(--oh-border);
}
.sidebar .nav-link {
    margin: 4px 10px;
    border-radius: 12px;
    color: #40566b;
    font-weight: 600;
    transition: .18s ease;
}
.sidebar .nav-link:hover {
    background: var(--oh-primary-soft);
    color: var(--oh-primary);
}
.sidebar .nav-link.active,
.sidebar .nav-link[aria-expanded="true"] {
    background: var(--oh-primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(15,76,58,.18);
}
.sidebar .sub-nav .nav-link.active {
    background: var(--oh-primary-soft) !important;
    color: var(--oh-primary) !important;
    box-shadow: none;
}

.oh-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.oh-brand-mark {
    width:42px; height:42px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(145deg, var(--oh-primary), var(--oh-primary-dark));
    color:#fff; font-weight:800; letter-spacing:.04em;
    box-shadow:0 6px 16px rgba(15,76,58,.2);
    flex:0 0 auto;
}
.oh-brand-mark img { max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; }
.oh-brand-copy { line-height:1.1; min-width:0; }
.oh-brand-copy strong { display:block; font-size:.92rem; color:var(--oh-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oh-brand-copy small { display:block; margin-top:4px; color:var(--oh-muted); font-size:.68rem; }

/* Cartes et tableaux */
.card {
    border: 1px solid var(--oh-border) !important;
    border-radius: var(--oh-radius) !important;
    box-shadow: var(--oh-shadow) !important;
    background: var(--oh-surface);
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid #edf1f4 !important;
    padding: 1rem 1.2rem !important;
}
.card-title { color: var(--oh-ink); font-weight: 700; }
.card-header small, .text-muted { color: var(--oh-muted) !important; }
.table { color: #31485d; }
.table thead th {
    background: #f8fafb !important;
    color: #536779 !important;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .035em;
    border-bottom: 1px solid var(--oh-border) !important;
    vertical-align: middle;
}
.table tbody td { vertical-align: middle; border-color:#edf1f4 !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: #fbfcfd; }

/* Formulaires */
.form-control, .form-select, .select2-selection {
    border: 1px solid #d8e0e7 !important;
    border-radius: 10px !important;
    min-height: 42px;
    box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--oh-primary) !important;
    box-shadow: 0 0 0 3px rgba(15,76,58,.09) !important;
}
label, .form-label { color:#40566b; font-weight:600; font-size:.86rem; }

/* Boutons */
.btn { border-radius: 10px !important; font-weight: 650; }
.btn-primary, .btn-success {
    background: var(--oh-primary) !important;
    border-color: var(--oh-primary) !important;
}
.btn-primary:hover, .btn-success:hover {
    background: var(--oh-primary-dark) !important;
    border-color: var(--oh-primary-dark) !important;
}
.btn-outline-primary, .btn-outline-success {
    color: var(--oh-primary) !important;
    border-color: rgba(15,76,58,.4) !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover {
    background: var(--oh-primary) !important;
    border-color: var(--oh-primary) !important;
    color:#fff !important;
}
.badge.bg-primary, .bg-primary { background-color: var(--oh-primary) !important; }
.bg-soft-primary, .bg-soft-success { background: var(--oh-primary-soft) !important; }
.bg-soft-warning { background: var(--oh-accent-soft) !important; }
.text-primary, .text-success { color: var(--oh-primary) !important; }

/* Modales */
.modal-content { border:0 !important; border-radius:18px !important; box-shadow:0 20px 60px rgba(17,38,59,.22) !important; }
.modal-header { border-bottom:1px solid var(--oh-border); }
.modal-footer { border-top:1px solid var(--oh-border); }

/* Tableau de bord */
.oh-page-heading {
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
    padding:1.1rem 1.25rem; margin-bottom:1rem;
    background:linear-gradient(135deg, var(--oh-primary), #17664f);
    color:#fff; border-radius:var(--oh-radius); box-shadow:0 10px 24px rgba(15,76,58,.16);
}
.oh-page-heading h1, .oh-page-heading h2, .oh-page-heading h3, .oh-page-heading h4 { color:#fff; margin:0; }
.oh-page-heading small { color:rgba(255,255,255,.78); }

/* Authentification */
.oh-login-page { min-height:100vh; background:var(--oh-bg); }
.oh-login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(360px, 520px) 1fr; }
.oh-login-panel { background:#fff; display:flex; align-items:center; justify-content:center; padding:3rem; }
.oh-login-card { width:100%; max-width:390px; }
.oh-login-card h1 { font-size:1.8rem; color:var(--oh-ink); font-weight:800; }
.oh-login-card .oh-login-subtitle { color:var(--oh-muted); margin-bottom:2rem; }
.oh-login-visual {
    position:relative; overflow:hidden; display:flex; align-items:flex-end;
    padding:4rem;
    background:
      radial-gradient(circle at 72% 18%, rgba(199,154,59,.24), transparent 20%),
      radial-gradient(circle at 18% 80%, rgba(255,255,255,.10), transparent 22%),
      linear-gradient(145deg, #0a3529, #0f4c3a 58%, #17664f);
    color:#fff;
}
.oh-login-visual::before {
    content:""; position:absolute; inset:-20%; opacity:.13;
    background-image:linear-gradient(45deg, transparent 47%, #fff 48%, #fff 50%, transparent 51%);
    background-size:56px 56px; transform:rotate(-8deg);
}
.oh-login-message { position:relative; z-index:1; max-width:620px; }
.oh-login-message h2 { color:#fff; font-size:2.45rem; line-height:1.12; font-weight:800; }
.oh-login-message p { color:rgba(255,255,255,.78); font-size:1.05rem; }
.oh-login-pill { display:inline-flex; align-items:center; padding:.45rem .75rem; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.08); font-size:.78rem; margin-bottom:1.4rem; }

/* Accessibilité et responsive */
:focus-visible { outline:3px solid rgba(199,154,59,.55); outline-offset:2px; }
@media (max-width: 991.98px) {
    .oh-login-shell { grid-template-columns:1fr; }
    .oh-login-visual { display:none; }
    .oh-login-panel { padding:2rem 1.25rem; }
}
@media (max-width: 767.98px) {
    .content-inner { padding-left:.35rem; padding-right:.35rem; }
    .card { border-radius:13px !important; }
    .oh-page-heading { align-items:flex-start; flex-direction:column; }
}
.sidebar .navbar-brand { padding: 0 10px; overflow: hidden; }
.sidebar.sidebar-mini .oh-brand-copy { max-width: 155px; transition: opacity .18s ease, max-width .18s ease; }
.dashboard-shell { border:0 !important; box-shadow:none !important; background:transparent !important; }
.dashboard-shell > .card-header { border:0 !important; }
.dashboard-shell > .card-body { padding:0 !important; }
.dashboard-shell .oh-page-heading .btn { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.42) !important; color:#fff !important; }
.dashboard-shell .oh-page-heading .btn:hover { background:#fff !important; color:var(--oh-primary) !important; }

/* ========================================================================== */
/* v11.2 — Navigation et tableau de bord                                     */
/* ========================================================================== */

body.oumra-hajj-app,
.oumra-hajj-app button,
.oumra-hajj-app input,
.oumra-hajj-app select,
.oumra-hajj-app textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.oumra-hajj-app h1,
.oumra-hajj-app h2,
.oumra-hajj-app h3,
.oumra-hajj-app h4,
.oumra-hajj-app h5,
.oumra-hajj-app h6,
.oumra-hajj-app .card-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    letter-spacing: -.02em;
}

.oh-main-shell {
    min-width: 0;
    background: var(--oh-bg) !important;
}

.oh-content {
    display: block;
    padding: 0;
    background: var(--oh-bg);
}

.oh-content .content-inner {
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    padding: 24px 28px 32px;
}

/* Navigation latérale stable : aucun recouvrement du contenu sur desktop. */
.oh-sidebar {
    overflow: hidden;
}

.oh-sidebar .sidebar-header {
    padding: 0 16px !important;
}

.oh-sidebar .sidebar-header .navbar-brand {
    width: 100%;
    margin: 0;
    padding: 0 !important;
    transform: none !important;
}

.oh-sidebar-section-label {
    padding: 20px 22px 8px;
    color: #95a2ad;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.oh-sidebar .sidebar-body {
    padding: 4px 12px 80px !important;
}

.oh-sidebar .iq-main-menu {
    gap: 3px;
}

.oh-sidebar .navbar-nav .nav-item {
    width: 100%;
}

.oh-sidebar .nav-link {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    color: #526477 !important;
    font-size: .88rem;
    font-weight: 650;
    text-transform: none !important;
    box-shadow: none !important;
}

.oh-sidebar .nav-link .item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none !important;
}

.oh-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    min-width: 26px;
    height: 26px;
    color: #7d8b98;
    font-size: 1.08rem;
}

.oh-sidebar .nav-link:hover {
    background: #f1f6f4 !important;
    color: var(--oh-primary) !important;
}

.oh-sidebar .nav-link:hover .oh-menu-icon,
.oh-sidebar .nav-link.active .oh-menu-icon {
    color: var(--oh-primary);
}

.oh-sidebar .nav-link.active,
.oh-sidebar .nav-link[aria-expanded="true"] {
    background: var(--oh-primary-soft) !important;
    color: var(--oh-primary) !important;
    box-shadow: inset 3px 0 0 var(--oh-primary) !important;
}

.oh-sidebar .right-icon {
    margin-left: auto;
    font-size: .9rem;
    transition: transform .18s ease;
}

.oh-sidebar .nav-link[aria-expanded="true"] .right-icon {
    transform: rotate(90deg);
}

.oh-sidebar .sub-nav {
    margin: 3px 0 7px 38px;
    padding: 2px 0 2px 10px;
    border-left: 1px solid #dfe8e4;
}

.oh-sidebar .sub-nav .nav-link {
    min-height: 38px;
    padding: 7px 10px !important;
    font-size: .82rem;
    font-weight: 600;
}

.oh-sidebar .sub-nav .nav-link.active {
    background: #f5f9f7 !important;
    box-shadow: none !important;
}

.oh-submenu-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #b7c4bd;
}

.oh-sidebar .sub-nav .nav-link.active .oh-submenu-dot {
    background: var(--oh-primary);
}

.oh-sidebar .sidebar-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 54px;
    padding: 10px 16px;
    background: rgba(255,255,255,.96);
    border-top: 1px solid var(--oh-border);
}

.oh-sidebar-footer-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--oh-muted);
    font-size: .72rem;
    white-space: nowrap;
}

.oh-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27ae60;
    box-shadow: 0 0 0 4px rgba(39,174,96,.12);
}

/* Barre supérieure */
.oh-topbar {
    position: sticky !important;
    top: 0;
    z-index: 890;
    min-height: 74px;
    padding: 0 !important;
}

.oh-sidebar-toggle,
.oh-icon-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border: 1px solid var(--oh-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #526477 !important;
    cursor: pointer;
    transition: .18s ease;
}

.oh-sidebar-toggle:hover,
.oh-icon-button:hover {
    border-color: #c8d8d1 !important;
    background: var(--oh-primary-soft) !important;
    color: var(--oh-primary) !important;
}

.oh-topbar-context {
    line-height: 1.15;
}

.oh-topbar-context strong {
    display: block;
    color: var(--oh-ink);
    font-size: .85rem;
    font-weight: 750;
}

.oh-topbar-context small {
    display: block;
    margin-top: 3px;
    color: var(--oh-muted);
    font-size: .69rem;
}

.oh-user-menu {
    padding: 5px 8px !important;
    border-radius: 12px;
    transition: .18s ease;
}

.oh-user-menu:hover {
    background: #f6f8f9;
}

.oh-user-menu .caption-title {
    max-width: 220px;
    overflow: hidden;
    color: var(--oh-ink);
    font-size: .82rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oh-user-menu .caption-sub-title {
    display: block;
    max-width: 220px;
    overflow: hidden;
    color: var(--oh-muted);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-42 {
    width: 42px !important;
    height: 42px !important;
}

.oh-notification-menu {
    width: min(380px, calc(100vw - 24px));
}

.oh-profile-dropdown {
    min-width: 230px;
    padding: 7px;
    border: 1px solid var(--oh-border);
    border-radius: 12px;
    box-shadow: var(--oh-shadow);
}

.oh-profile-dropdown .dropdown-item {
    border-radius: 8px;
    padding: 9px 10px;
    font-size: .82rem;
}

/* Tableau de bord */
.oh-dashboard {
    color: var(--oh-ink);
}

.oh-dashboard-heading {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 146px;
    margin-bottom: 18px;
    padding: 28px 30px;
    border-radius: 18px;
    background: linear-gradient(125deg, #0a3529 0%, #0f4c3a 58%, #1a6652 100%);
    box-shadow: 0 12px 30px rgba(15,76,58,.16);
    color: #fff;
}

.oh-dashboard-heading::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -90px;
    top: -160px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(255,255,255,.035), 0 0 0 96px rgba(255,255,255,.025);
}

.oh-dashboard-heading > * {
    position: relative;
    z-index: 1;
}

.oh-dashboard-heading h1 {
    margin: 3px 0 5px;
    color: #fff !important;
    font-size: clamp(1.65rem, 2.2vw, 2.15rem);
    font-weight: 800;
}

.oh-dashboard-heading p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: .9rem;
}

.oh-eyebrow {
    color: #e7c879;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.oh-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.oh-dashboard-actions .btn {
    min-height: 38px;
    padding: 8px 13px;
}

.oh-dashboard-actions .btn-outline-light {
    border-color: rgba(255,255,255,.44) !important;
    color: #fff !important;
}

.oh-dashboard-actions .btn-outline-light:hover {
    background: #fff !important;
    color: var(--oh-primary) !important;
}

.oh-kpi-grid {
    margin-bottom: 2px;
}

.oh-kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 126px;
    padding: 18px;
    border: 1px solid var(--oh-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(28,48,68,.055);
}

.oh-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 13px;
    background: var(--oh-primary-soft);
    color: var(--oh-primary);
    font-size: 1.05rem;
}

.oh-kpi-primary .oh-kpi-icon {
    background: var(--oh-primary);
    color: #fff;
}

.oh-kpi-accent .oh-kpi-icon {
    background: var(--oh-accent-soft);
    color: #9b711d;
}

.oh-kpi-content {
    min-width: 0;
}

.oh-kpi-content .oh-kpi-label {
    display: block;
    margin-bottom: 3px;
    color: var(--oh-muted);
    font-size: .74rem;
    font-weight: 700;
}

.oh-kpi-content strong {
    display: block;
    overflow: hidden;
    color: var(--oh-ink);
    font-size: clamp(1.25rem, 1.75vw, 1.62rem);
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oh-kpi-content small {
    display: block;
    margin-top: 5px;
    color: #8996a2;
    font-size: .67rem;
}

.oh-dashboard-card {
    overflow: hidden;
    border-radius: 16px !important;
}

.oh-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 74px;
    padding: 16px 20px !important;
}

.oh-card-heading h3,
.oh-card-heading h4 {
    margin: 0 0 3px;
    color: var(--oh-ink);
    font-size: 1rem;
    font-weight: 800;
}

.oh-card-heading small {
    color: var(--oh-muted);
    font-size: .72rem;
}

.oh-card-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--oh-primary-soft);
    color: var(--oh-primary);
    font-size: .65rem;
    font-weight: 800;
}

.oh-card-chip-gold {
    background: var(--oh-accent-soft);
    color: #8b651a;
}

.oh-dashboard-chart {
    min-height: 270px;
}

.oh-card-heading-wrap {
    flex-wrap: wrap;
}

.oh-month-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.oh-month-filter label {
    margin: 0;
    color: var(--oh-muted);
    font-size: .72rem;
    white-space: nowrap;
}

.oh-month-filter .form-control {
    min-width: 180px;
    min-height: 38px;
}

.oh-finance-card {
    position: relative;
    overflow: hidden;
    min-height: 100px;
    padding: 18px;
    border: 1px solid var(--oh-border);
    border-radius: 14px;
    background: #f9fbfb;
}

.oh-finance-card::before {
    content: "";
    position: absolute;
    width: 5px;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--oh-primary);
}

.oh-finance-out::before { background: #c15b51; }
.oh-finance-balance::before { background: var(--oh-accent); }

.oh-finance-card span {
    display: block;
    color: var(--oh-muted);
    font-size: .72rem;
    font-weight: 700;
}

.oh-finance-card strong {
    display: block;
    margin-top: 8px;
    color: var(--oh-ink);
    font-size: 1.2rem;
    font-weight: 800;
}

.oh-table-section {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--oh-border);
}

.oh-section-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.oh-section-title h4 {
    margin: 0 0 3px;
    color: var(--oh-ink);
    font-size: .88rem;
    font-weight: 800;
}

.oh-section-title small {
    color: var(--oh-muted);
    font-size: .7rem;
}

.oh-alert-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border: 1px solid #ead9ab;
    border-radius: 14px;
    background: #fff9ea;
    color: #654b13;
}

.oh-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: #f8e6b7;
    color: #98701d;
}

.oh-alert-banner strong {
    display: block;
    margin-bottom: 2px;
    font-size: .82rem;
}

.oh-alert-banner span {
    display: block;
    color: #8a733d;
    font-size: .72rem;
}

.oh-subsection-heading {
    margin-bottom: 12px;
    color: var(--oh-ink);
    font-size: .82rem;
    font-weight: 800;
}

.oh-empty-state,
.oh-incident-item {
    padding: 12px;
    border: 1px solid var(--oh-border);
    border-radius: 10px;
    background: #fafcfc;
}

.oh-incident-item + .oh-incident-item {
    margin-top: 8px;
}

.oh-dashboard .table thead th {
    padding-top: 11px;
    padding-bottom: 11px;
    background: #f7f9fa !important;
    font-size: .67rem;
}

.oh-dashboard .table tbody td {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: .78rem;
}

.oh-dashboard .dataTables_filter label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: var(--oh-muted);
    font-size: .72rem;
}

.oh-dashboard .dataTables_filter input {
    min-height: 36px !important;
    border: 1px solid #d8e0e7 !important;
    border-radius: 9px !important;
    padding: 5px 9px !important;
}

.footer {
    background: transparent !important;
    border-top: 1px solid var(--oh-border);
}

@media (min-width: 992px) {
    .oh-sidebar {
        width: 268px !important;
        max-width: 268px !important;
        transform: translateX(0) !important;
    }

    .oh-sidebar + .oh-main-shell {
        width: calc(100% - 268px) !important;
        margin-left: 268px !important;
        transition: margin-left .22s ease, width .22s ease !important;
    }

    .oh-sidebar.sidebar-mini {
        width: 84px !important;
        max-width: 84px !important;
        transform: translateX(0) !important;
    }

    .oh-sidebar.sidebar-mini + .oh-main-shell {
        width: calc(100% - 84px) !important;
        margin-left: 84px !important;
    }

    .oh-sidebar.sidebar-mini .sidebar-header {
        padding: 0 17px !important;
    }

    .oh-sidebar.sidebar-mini .sidebar-header a.navbar-brand {
        transform: none !important;
    }

    .oh-sidebar.sidebar-mini .oh-brand-copy,
    .oh-sidebar.sidebar-mini .oh-sidebar-section-label,
    .oh-sidebar.sidebar-mini .item-name,
    .oh-sidebar.sidebar-mini .right-icon,
    .oh-sidebar.sidebar-mini .oh-sidebar-footer-copy .item-name {
        display: none !important;
    }

    .oh-sidebar.sidebar-mini .sidebar-body {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .oh-sidebar.sidebar-mini .nav-link {
        justify-content: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .oh-sidebar.sidebar-mini .nav-link.active {
        box-shadow: none !important;
    }

    .oh-sidebar.sidebar-mini .sub-nav {
        display: none !important;
    }

    .oh-sidebar.sidebar-mini .sidebar-footer {
        display: flex;
        justify-content: center;
    }

    .oh-sidebar.sidebar-mini .oh-sidebar-footer-copy {
        justify-content: center;
    }
}

@media (max-width: 1199.98px) {
    .oh-content .content-inner {
        padding: 20px 20px 28px;
    }
}

@media (max-width: 991.98px) {
    .oh-main-shell,
    .oh-sidebar + .oh-main-shell,
    .oh-sidebar.sidebar-mini + .oh-main-shell {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .oh-sidebar {
        width: 280px !important;
        max-width: 280px !important;
    }

    .oh-topbar {
        min-height: 66px;
    }

    .oh-content .content-inner {
        padding: 18px 16px 26px;
    }

    .oh-dashboard-heading {
        min-height: 132px;
        padding: 24px;
    }
}

@media (max-width: 767.98px) {
    .oh-dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .oh-dashboard-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .oh-kpi-card {
        min-height: 112px;
    }

    .oh-card-heading {
        align-items: flex-start;
    }

    .oh-card-heading-wrap {
        flex-direction: column;
    }

    .oh-month-filter {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .oh-month-filter .form-control {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .oh-content .content-inner {
        padding: 14px 12px 24px;
    }

    .oh-dashboard-heading {
        border-radius: 14px;
        padding: 20px;
    }

    .oh-dashboard-heading p {
        font-size: .8rem;
    }

    .oh-card-heading {
        padding: 14px 15px !important;
    }

    .oh-dashboard-card .card-body {
        padding: 15px !important;
    }
}

@media (min-width: 992px) {
    .oh-sidebar.sidebar-mini .oh-menu-icon {
        display: inline-flex !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========================================================================== */
/* Cockpit UX — environnement permanent                                      */
/* ========================================================================== */

:root {
    --oh-sidebar-width: 248px;
    --oh-sidebar-mini-width: 76px;
    --oh-panel: #ffffff;
    --oh-panel-subtle: #f7faf8;
    --oh-line: #e4ebe7;
}

@media (min-width: 992px) {
    .oh-sidebar {
        width: var(--oh-sidebar-width) !important;
        max-width: var(--oh-sidebar-width) !important;
        border-right: 1px solid var(--oh-line) !important;
        box-shadow: 8px 0 28px rgba(23, 54, 42, .035) !important;
    }

    .oh-sidebar + .oh-main-shell {
        width: calc(100% - var(--oh-sidebar-width)) !important;
        margin-left: var(--oh-sidebar-width) !important;
    }

    .oh-sidebar.sidebar-mini {
        width: var(--oh-sidebar-mini-width) !important;
        max-width: var(--oh-sidebar-mini-width) !important;
    }

    .oh-sidebar.sidebar-mini + .oh-main-shell {
        width: calc(100% - var(--oh-sidebar-mini-width)) !important;
        margin-left: var(--oh-sidebar-mini-width) !important;
    }
}

.oh-sidebar .sidebar-header {
    min-height: 72px !important;
    border-bottom: 1px solid var(--oh-line);
}

.oh-sidebar-section-label {
    padding-top: 16px;
    color: #84938c;
}

.oh-sidebar .sidebar-body {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.oh-sidebar .nav-link {
    min-height: 43px;
    gap: 10px;
    padding: 9px 11px !important;
    border-radius: 9px !important;
    font-size: .84rem;
}

.oh-sidebar .nav-link.active,
.oh-sidebar .nav-link[aria-expanded="true"] {
    background: #edf5f1 !important;
    box-shadow: inset 3px 0 0 var(--oh-primary) !important;
}

.oh-sidebar .sub-nav {
    margin-left: 34px;
}

.oh-topbar {
    min-height: 66px !important;
    border-bottom: 1px solid var(--oh-line) !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(10px);
}

.oh-topbar-context strong {
    font-size: .82rem;
}

.oh-topbar-context small {
    font-size: .66rem;
}

.oh-content .content-inner {
    max-width: 1560px;
    padding-top: 20px;
}

.oh-dashboard-heading-compact {
    min-height: 118px;
    margin-bottom: 14px;
    padding: 22px 24px;
    border-radius: 16px;
}

.oh-dashboard-heading-copy {
    min-width: 0;
}

.oh-dashboard-heading-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.oh-dashboard-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.9);
    font-size: .72rem;
    font-weight: 650;
    white-space: nowrap;
}

.oh-quick-actions {
    display: grid;
    grid-template-columns: minmax(170px, 220px) 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
    padding: 13px 14px;
    border: 1px solid var(--oh-line);
    border-radius: 14px;
    background: var(--oh-panel);
    box-shadow: 0 5px 16px rgba(28,48,68,.035);
}

.oh-quick-actions-title span,
.oh-quick-actions-title small {
    display: block;
}

.oh-quick-actions-title span {
    color: var(--oh-ink);
    font-size: .78rem;
    font-weight: 800;
}

.oh-quick-actions-title small {
    margin-top: 2px;
    color: var(--oh-muted);
    font-size: .65rem;
}

.oh-quick-actions-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.oh-quick-action {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--oh-panel-subtle);
    color: var(--oh-ink) !important;
    text-decoration: none !important;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.oh-quick-action:hover {
    transform: translateY(-1px);
    border-color: #d5e4dc;
    background: #eef6f2;
}

.oh-quick-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    background: #e6f1ec;
    color: var(--oh-primary);
    font-size: .84rem;
}

.oh-quick-action > span:last-child {
    min-width: 0;
}

.oh-quick-action strong,
.oh-quick-action small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oh-quick-action strong {
    font-size: .71rem;
    font-weight: 800;
}

.oh-quick-action small {
    margin-top: 1px;
    color: var(--oh-muted);
    font-size: .58rem;
}

.oh-kpi-grid {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}

.oh-kpi-card {
    position: relative;
    min-height: 112px;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(28,48,68,.04);
}

.oh-kpi-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 16px;
    left: 16px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: #d9e8e1;
}

.oh-kpi-primary::after { background: var(--oh-primary); }
.oh-kpi-accent::after { background: var(--oh-accent); }

.oh-kpi-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 11px;
}

.oh-kpi-content strong {
    font-size: clamp(1.2rem, 1.45vw, 1.5rem);
}

.oh-dashboard-card {
    border: 1px solid var(--oh-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 18px rgba(28,48,68,.04) !important;
}

.oh-card-heading {
    min-height: 66px;
    padding: 14px 17px !important;
    border-bottom: 1px solid var(--oh-line) !important;
}

.oh-dashboard-chart {
    min-height: 250px;
}

.oh-finance-card {
    min-height: 88px;
    padding: 15px 16px;
}

.oh-finance-card strong {
    margin-top: 6px;
    font-size: 1.1rem;
}

.oh-alert-banner {
    padding: 13px 15px;
}

.oh-dashboard .table tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (max-width: 1399.98px) {
    .oh-quick-actions {
        grid-template-columns: 1fr;
    }

    .oh-quick-actions-title {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .oh-quick-actions-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .oh-dashboard-heading-side {
        width: 100%;
        justify-content: flex-start;
    }

    .oh-quick-actions-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479.98px) {
    .oh-quick-actions-list {
        grid-template-columns: 1fr;
    }
}


/* UX refinement v2 — menu lisible et cockpit compact */
:root {
    --oh-sidebar-width: 276px;
}

@media (min-width: 992px) {
    .oh-sidebar .nav-link {
        justify-content: flex-start !important;
        height: auto !important;
    }

    .oh-sidebar .nav-link .item-name {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        line-height: 1.18 !important;
    }

    .oh-sidebar .right-icon {
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }

    .oh-menu-icon {
        margin: 0 !important;
        flex: 0 0 26px !important;
    }

    .oh-topbar-context {
        display: none !important;
    }
}

.oh-dashboard-chart {
    min-height: 225px !important;
}

/* Etat vide des graphiques du cockpit */
.oh-chart-empty {
    min-height: 225px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #718096;
    text-align: center;
}

.oh-chart-empty-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #edf6f2;
    color: #145b49;
    font-size: 20px;
}

.oh-chart-empty strong {
    color: #30475e;
    font-size: 14px;
    font-weight: 700;
}

.oh-chart-empty span {
    font-size: 12px;
}

/* Cockpit plus compact */
.oh-dashboard-hero {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
}

.oh-dashboard-hero h1 {
    margin-bottom: 8px !important;
}

.oh-dashboard-hero p {
    margin-bottom: 0 !important;
}

/* Navigation active plus nette */
.oh-sidebar .nav-link.active {
    background: #eaf4f0 !important;
    color: #0e5948 !important;
    border-left: 3px solid #0e5948 !important;
    font-weight: 700 !important;
}

.oh-sidebar .nav-link:not(.active):hover {
    background: #f5f8f7 !important;
    color: #123f36 !important;
}


/* ==========================================================
   NAVIGATION BOOTSTRAP INSPIRED V1
   Hiérarchie parent / sous-menu / page active
   ========================================================== */

.oh-sidebar .iq-main-menu > .nav-item {
    margin-bottom: 2px;
}

/* Parent contenant un sous-menu */
.oh-sidebar .oh-nav-parent {
    position: relative;
    display: flex !important;
    align-items: center !important;
    min-height: 44px;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    border-left: 3px solid transparent !important;
    transition:
        background-color .18s ease,
        color .18s ease;
}

/* Parent ouvert : volontairement moins fort que l'enfant actif */
.oh-sidebar .oh-nav-parent.parent-active {
    background: #f1f7f4 !important;
    color: #145b49 !important;
    border-left-color: transparent !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Chevron Bootstrap */
.oh-menu-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 12px;
    opacity: .72;
    transition: transform .2s ease;
}

.oh-nav-parent[aria-expanded="true"] .oh-menu-chevron {
    transform: rotate(180deg);
}

/* Conteneur du sous-menu */
.oh-sidebar .oh-submenu {
    margin: 4px 10px 8px 52px !important;
    padding: 3px 0 3px 15px !important;
    border-left: 1px solid #dfe9e5;
    list-style: none;
}

/* On neutralise les règles anciennes de sub-nav */
.oh-sidebar .oh-submenu .nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* Lien enfant */
.oh-sidebar .oh-submenu .oh-submenu-link {
    position: relative;
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 35px !important;

    margin: 1px 0 !important;
    padding: 7px 11px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;
    color: #596c7d !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    box-shadow: none !important;

    transition:
        background-color .16s ease,
        color .16s ease;
}

/* Plus aucun ovale/icône artificielle pour les enfants */
.oh-sidebar .oh-submenu .oh-submenu-link .item-name {
    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

/* Survol discret façon Bootstrap */
.oh-sidebar .oh-submenu .oh-submenu-link:hover {
    background: #f5f8f7 !important;
    color: #174f42 !important;
}

/* Page réellement active */
.oh-sidebar .oh-submenu .oh-submenu-link.active {
    background: #eaf4f0 !important;
    color: #0d5b48 !important;

    border: 0 !important;
    border-left: 0 !important;

    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Uniquement la page active reçoit un marqueur */
.oh-sidebar .oh-submenu .oh-submenu-link.active::before {
    content: "";

    position: absolute;
    left: -19px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #0d5b48;

    box-shadow: 0 0 0 4px #edf6f2;

    transform: translateY(-50%);
}

/* Focus clavier Bootstrap-like */
.oh-sidebar .oh-nav-parent:focus-visible,
.oh-sidebar .oh-submenu .oh-submenu-link:focus-visible {
    outline: 2px solid rgba(13, 91, 72, .28);
    outline-offset: 2px;
}

/* Petit écran */
@media (max-width: 991.98px) {
    .oh-sidebar .oh-submenu {
        margin-left: 46px !important;
    }
}


/* ==========================================================
   SIDEBAR ARCHITECTURE BOOTSTRAP V2
   OUMRA-HAJJ APP
   ========================================================== */

.oh-sidebar-navigation {
    padding: 0 12px 20px;
}

.oh-sidebar .oh-sidebar-section-label {
    margin: 18px 10px 7px !important;
    padding: 0 !important;

    color: #8a9a96 !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .11em !important;
    line-height: 1.2 !important;

    text-transform: uppercase;
}

.oh-sidebar .oh-sidebar-section-label:first-child {
    margin-top: 10px !important;
}

.oh-sidebar .oh-nav-list {
    gap: 2px;
    margin: 0;
    padding: 0;
}


/* ----------------------------------------------------------
   LIENS PRINCIPAUX
---------------------------------------------------------- */

.oh-sidebar .oh-primary-link,
.oh-sidebar .oh-nav-parent {

    position: relative;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 8px 12px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: transparent !important;
    color: #536779 !important;

    text-align: left;

    font-size: 13.5px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;

    box-shadow: none !important;

    transition:
        background-color .16s ease,
        color .16s ease,
        box-shadow .16s ease;
}


.oh-sidebar .oh-primary-link .oh-menu-icon,
.oh-sidebar .oh-nav-parent .oh-menu-icon {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 28px !important;

    width: 28px !important;
    height: 28px !important;

    margin-right: 10px !important;

    color: #7d8f9d;

    font-size: 14px;
}


.oh-sidebar .oh-primary-link .item-name,
.oh-sidebar .oh-nav-parent .item-name {

    flex: 1 1 auto;

    width: auto !important;
    max-width: none !important;

    overflow: visible !important;

    white-space: normal !important;
    text-overflow: clip !important;
}


/* Survol */

.oh-sidebar .oh-primary-link:hover,
.oh-sidebar .oh-nav-parent:hover {

    background: #f4f8f6 !important;
    color: #164f42 !important;
}


.oh-sidebar .oh-primary-link:hover .oh-menu-icon,
.oh-sidebar .oh-nav-parent:hover .oh-menu-icon {

    color: #175c4b !important;
}


/* ----------------------------------------------------------
   PAGE PRINCIPALE ACTIVE
---------------------------------------------------------- */

.oh-sidebar .oh-primary-link.active {

    background: #eaf4f0 !important;
    color: #0e5948 !important;

    font-weight: 750 !important;

    box-shadow: inset 3px 0 0 #0e5948 !important;
}


.oh-sidebar .oh-primary-link.active .oh-menu-icon {

    color: #0e5948 !important;
}


/* ----------------------------------------------------------
   PARENT COLLAPSE
---------------------------------------------------------- */

.oh-sidebar .oh-nav-parent.parent-active {

    background: #f0f7f4 !important;
    color: #145847 !important;

    font-weight: 750 !important;

    box-shadow: none !important;
}


.oh-sidebar .oh-nav-parent.parent-active .oh-menu-icon {

    color: #145847 !important;
}


/* Chevron */

.oh-menu-chevron {

    flex: 0 0 auto;

    margin-left: auto;

    color: #758981;

    font-size: 11px;

    transition: transform .20s ease;
}


.oh-nav-parent[aria-expanded="true"] .oh-menu-chevron {

    transform: rotate(180deg);
}


/* ----------------------------------------------------------
   SOUS-MENUS
---------------------------------------------------------- */

.oh-sidebar .oh-submenu {

    position: relative;

    margin: 4px 4px 7px 45px !important;
    padding: 3px 0 3px 15px !important;

    border-left: 1px solid #dce7e3;

    list-style: none;
}


.oh-sidebar .oh-submenu .nav-item {

    margin: 0 !important;
    padding: 0 !important;
}


.oh-sidebar .oh-submenu .oh-submenu-link {

    position: relative;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 35px !important;

    margin: 1px 0 !important;
    padding: 7px 10px !important;

    border: 0 !important;
    border-radius: 7px !important;

    background: transparent !important;
    color: #5a6d7b !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    box-shadow: none !important;
}


.oh-sidebar .oh-submenu .oh-submenu-link .item-name {

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    overflow: visible !important;

    white-space: normal !important;
    text-overflow: clip !important;
}


/* Sous-menu survol */

.oh-sidebar .oh-submenu .oh-submenu-link:hover {

    background: #f5f8f7 !important;
    color: #164f42 !important;
}


/* Sous-menu actif */

.oh-sidebar .oh-submenu .oh-submenu-link.active {

    background: #eaf4f0 !important;
    color: #0d5b48 !important;

    font-weight: 750 !important;

    box-shadow: none !important;
}


/* Point uniquement sur la page active */

.oh-sidebar .oh-submenu .oh-submenu-link.active::before {

    content: "";

    position: absolute;

    left: -19px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #0d5b48;

    box-shadow: 0 0 0 4px #edf6f2;

    transform: translateY(-50%);
}


/* ----------------------------------------------------------
   INFORMATIONS
---------------------------------------------------------- */

.oh-information-nav {

    margin-top: 8px !important;
    padding-top: 8px !important;

    border-top: 1px solid #edf1ef;
}


/* ----------------------------------------------------------
   ACCESSIBILITÉ
---------------------------------------------------------- */

.oh-sidebar .oh-primary-link:focus-visible,
.oh-sidebar .oh-nav-parent:focus-visible,
.oh-sidebar .oh-submenu-link:focus-visible {

    outline: 2px solid rgba(14, 89, 72, .28);
    outline-offset: 2px;
}


/* ----------------------------------------------------------
   MINI SIDEBAR
---------------------------------------------------------- */

@media (min-width: 992px) {

    .oh-sidebar.sidebar-mini .oh-sidebar-section-label,
    .oh-sidebar.sidebar-mini .oh-submenu,
    .oh-sidebar.sidebar-mini .oh-menu-chevron {

        display: none !important;
    }


    .oh-sidebar.sidebar-mini .oh-sidebar-navigation {

        padding-left: 10px;
        padding-right: 10px;
    }


    .oh-sidebar.sidebar-mini .oh-primary-link,
    .oh-sidebar.sidebar-mini .oh-nav-parent {

        justify-content: center !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    .oh-sidebar.sidebar-mini .oh-primary-link .oh-menu-icon,
    .oh-sidebar.sidebar-mini .oh-nav-parent .oh-menu-icon {

        margin-right: 0 !important;
    }

}


/* ----------------------------------------------------------
   TABLETTE / MOBILE
---------------------------------------------------------- */

@media (max-width: 991.98px) {

    .oh-sidebar-navigation {

        padding-left: 10px;
        padding-right: 10px;
    }


    .oh-sidebar .oh-submenu {

        margin-left: 44px !important;
    }

}


/* ==========================================================
   SIDEBAR FINAL POLISH V3
   ========================================================== */

/* Titres de sections légèrement plus structurants */
.oh-sidebar .oh-sidebar-section-label {
    margin-top: 20px !important;
    margin-bottom: 8px !important;
    color: #879a94 !important;
}

/* Référentiels : parent ouvert discret */
.oh-sidebar .oh-nav-parent.parent-active {
    background: #edf5f2 !important;
}

/* Sous-menu légèrement plus compact */
.oh-sidebar .oh-submenu {
    margin-top: 3px !important;
    margin-bottom: 9px !important;
}

/* Le marqueur actif reste le seul élément fortement coloré */
.oh-sidebar .oh-submenu .oh-submenu-link.active::before {
    width: 6px;
    height: 6px;
    left: -18px;
}

/* Suppression de l'ancien traitement spécifique d'Informations */
.oh-sidebar .oh-information-nav {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

/* Les liens Administration utilisent exactement la même grille */
.oh-sidebar .oh-primary-link {
    border-radius: 8px !important;
}

/* Réduction de la sensation de vide entre les groupes */
.oh-sidebar .oh-nav-list + .oh-sidebar-section-label {
    margin-top: 18px !important;
}


/* ==========================================================
   MOBILE OFFCANVAS OUMRA-HAJJ V1
   Sidebar desktop -> panneau offcanvas sous 992 px
   ========================================================== */

.oh-mobile-sidebar-backdrop {
    display: none;
}

.oh-sidebar-mobile-close {
    display: none;
}


/* ----------------------------------------------------------
   MOBILE / TABLETTE
---------------------------------------------------------- */

@media (max-width: 991.98px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }


    /*
     * Le contenu reste toujours à 100 %.
     * Le menu vient par-dessus : il ne pousse jamais la page.
     */
    .oh-main-shell,
    .oh-sidebar + .oh-main-shell,
    .oh-sidebar.sidebar-mini + .oh-main-shell {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }


    /*
     * Sidebar ouverte.
     * 320 px sur un iPhone 12 Pro de 390 px :
     * il reste une zone visible pour le backdrop.
     */
    .oh-sidebar {
        position: fixed !important;

        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: min(84vw, 320px) !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;

        display: flex !important;
        flex-direction: column !important;

        background: #ffffff !important;

        transform: translate3d(0, 0, 0) !important;

        z-index: 1060 !important;

        overflow: hidden !important;

        box-shadow:
            12px 0 36px rgba(22, 45, 38, .18) !important;

        transition:
            transform .24s ease,
            box-shadow .24s ease !important;

        will-change: transform;
    }


    /*
     * Sur mobile sidebar-mini signifie :
     * menu complètement fermé.
     * Il ne s'agit plus d'un mini-menu de 76 px.
     */
    .oh-sidebar.sidebar-mini {
        width: min(84vw, 320px) !important;
        max-width: 320px !important;

        transform: translate3d(calc(-100% - 16px), 0, 0) !important;

        box-shadow: none !important;
    }


    /* En-tête de l'offcanvas */
    .oh-sidebar .sidebar-header {
        position: relative;

        flex: 0 0 auto;

        min-height: 72px !important;

        padding:
            max(10px, env(safe-area-inset-top))
            12px
            10px
            14px !important;

        border-bottom: 1px solid #edf1ef;

        background: #ffffff !important;

        overflow: visible !important;
    }


    .oh-sidebar .sidebar-header .oh-brand {
        min-width: 0;
        flex: 1 1 auto;
    }


    .oh-sidebar .sidebar-header .oh-brand-copy {
        min-width: 0;
    }


    .oh-sidebar .sidebar-header .oh-brand-copy strong {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /*
     * Fermeture explicite.
     */
    .oh-sidebar-mobile-close {
        flex: 0 0 36px;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        width: 36px;
        height: 36px;

        margin-left: 6px;

        padding: 0;

        border: 1px solid #e1e9e5;
        border-radius: 10px;

        background: #ffffff;

        color: #546b63;

        font-size: 16px;

        transition:
            background-color .16s ease,
            color .16s ease;
    }


    .oh-sidebar-mobile-close:hover,
    .oh-sidebar-mobile-close:focus {
        background: #edf5f2;
        color: #0e5948;
    }


    /*
     * Zone centrale du menu :
     * elle peut défiler indépendamment de la page.
     */
    .oh-sidebar .sidebar-body {
        flex: 1 1 auto;

        min-height: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;

        padding-bottom: 18px !important;
    }


    .oh-sidebar .sidebar-footer {
        flex: 0 0 auto;

        padding-bottom:
            max(12px, env(safe-area-inset-bottom)) !important;

        background: #ffffff !important;
    }


    /*
     * Backdrop façon Bootstrap Offcanvas.
     */
    .oh-mobile-sidebar-backdrop {
        position: fixed;

        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;

        border: 0;

        background: rgba(15, 31, 27, .46);

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        z-index: 1050;

        transition:
            opacity .22s ease,
            visibility .22s ease;

        -webkit-tap-highlight-color: transparent;
    }


    .oh-mobile-sidebar-backdrop.show {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;
    }


    /*
     * Quand le menu est ouvert, la page arrière ne défile plus.
     */
    body.oh-mobile-menu-open {
        overflow: hidden !important;
        touch-action: none;
    }


    /*
     * Barre supérieure :
     * reste sur toute la largeur quand le menu est fermé.
     */
    .oh-topbar {
        position: sticky !important;
        top: 0;

        width: 100% !important;

        z-index: 1020 !important;

        min-height: 64px !important;
    }


    /*
     * Le contenu ne doit jamais dépasser les 390 px
     * du viewport de l'iPhone.
     */
    .oh-content {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }


    .oh-content .content-inner {
        width: 100% !important;
        max-width: 100% !important;

        padding:
            14px
            12px
            24px !important;
    }

}


/* ----------------------------------------------------------
   TÉLÉPHONES ÉTROITS
---------------------------------------------------------- */

@media (max-width: 575.98px) {

    .oh-sidebar {
        width: min(86vw, 310px) !important;
        max-width: 310px !important;
    }


    .oh-sidebar.sidebar-mini {
        width: min(86vw, 310px) !important;
        max-width: 310px !important;
    }


    .oh-sidebar-navigation {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .oh-sidebar .oh-sidebar-section-label {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }


    .oh-sidebar .oh-primary-link,
    .oh-sidebar .oh-nav-parent {
        min-height: 42px !important;
    }

}


/* ==========================================================
   RESPONSIVE SIDEBAR FINAL V2
   Desktop >= 1200
   Tablet  768 - 1199
   Mobile  < 768
   ========================================================== */

:root {
    --oh-sidebar-desktop: 272px;
    --oh-sidebar-mini: 76px;
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 1200px) {

    /*
     * Sidebar permanente.
     */
    .oh-sidebar {
        width: var(--oh-sidebar-desktop) !important;
        max-width: var(--oh-sidebar-desktop) !important;

        transform: none !important;
    }


    /*
     * Le contenu NE PASSE PLUS sous la sidebar.
     */
    .oh-main-shell {
        margin-left: var(--oh-sidebar-desktop) !important;

        width: calc(
            100% - var(--oh-sidebar-desktop)
        ) !important;

        max-width: calc(
            100% - var(--oh-sidebar-desktop)
        ) !important;

        min-width: 0 !important;
    }


    /*
     * Mode mini desktop.
     */
    body:has(.oh-sidebar.sidebar-mini) .oh-main-shell {
        margin-left: var(--oh-sidebar-mini) !important;

        width: calc(
            100% - var(--oh-sidebar-mini)
        ) !important;

        max-width: calc(
            100% - var(--oh-sidebar-mini)
        ) !important;
    }


    .oh-sidebar-mobile-close,
    .oh-mobile-sidebar-backdrop {
        display: none !important;
    }


    body {
        overflow-y: auto !important;
    }

}


/* ==========================================================
   TABLETTE + MOBILE : BASE OFFCANVAS
   ========================================================== */

@media (max-width: 1199.98px) {

    html,
    body {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }


    /*
     * Le contenu reprend toute la largeur.
     */
    .oh-main-shell {
        margin-left: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
    }


    /*
     * Le menu n'utilise plus sidebar-mini pour son état.
     * Il est fermé par défaut.
     */
    .oh-sidebar,
    .oh-sidebar.sidebar-mini {

        position: fixed !important;

        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;

        background: #ffffff !important;

        transform:
            translate3d(-105%, 0, 0) !important;

        transition:
            transform .23s ease,
            box-shadow .23s ease !important;

        overflow: hidden !important;

        z-index: 1090 !important;

        box-shadow: none !important;

        will-change: transform;
    }


    /*
     * État réellement ouvert.
     */
    body.oh-sidebar-open .oh-sidebar,
    body.oh-sidebar-open .oh-sidebar.sidebar-mini {

        transform:
            translate3d(0, 0, 0) !important;

        box-shadow:
            14px 0 38px rgba(20, 42, 35, .20) !important;
    }


    /*
     * Header fixe dans le panneau.
     */
    .oh-sidebar .sidebar-header {

        flex: 0 0 auto !important;

        min-height: 68px !important;

        padding:
            max(9px, env(safe-area-inset-top))
            12px
            9px
            14px !important;

        background: #ffffff !important;

        border-bottom:
            1px solid #e9efec !important;

        overflow: visible !important;
    }


    /*
     * Partie centrale réellement scrollable.
     * Corrige Paramètres / Informations masqués.
     */
    .oh-sidebar .sidebar-body {

        flex: 1 1 auto !important;

        min-height: 0 !important;

        height: auto !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;
    }


    .oh-sidebar-navigation {
        min-height: min-content;

        padding-bottom: 24px !important;
    }


    /*
     * Footer ne recouvre jamais le menu.
     */
    .oh-sidebar .sidebar-footer {

        position: relative !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        flex: 0 0 auto !important;

        width: 100% !important;

        background: #ffffff !important;

        border-top:
            1px solid #e8eeeb !important;
    }


    /*
     * Croix de fermeture.
     */
    .oh-sidebar-mobile-close {

        display: inline-flex !important;

        align-items: center;
        justify-content: center;

        flex: 0 0 38px;

        width: 38px;
        height: 38px;

        padding: 0;

        margin-left: auto;

        border:
            1px solid #dfe8e4;

        border-radius: 10px;

        background: #eef6f3;

        color: #0e5948;

        font-size: 16px;
    }


    /*
     * Backdrop.
     */
    .oh-mobile-sidebar-backdrop {

        position: fixed !important;

        inset: 0 !important;

        display: block !important;

        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;

        background:
            rgba(13, 31, 26, .48) !important;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        z-index: 1080 !important;

        transition:
            opacity .20s ease,
            visibility .20s ease;
    }


    .oh-mobile-sidebar-backdrop.show {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /*
     * Blocage de la page arrière.
     */
    body.oh-sidebar-open {

        overflow: hidden !important;
    }


    /*
     * Topbar toujours dans le contenu principal.
     */
    .oh-main-shell .oh-topbar,
    .oh-main-shell .iq-navbar {

        width: 100% !important;

        margin-left: 0 !important;

        left: 0 !important;
    }

}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media
    (min-width: 768px)
    and (max-width: 1199.98px) {

    .oh-sidebar,
    .oh-sidebar.sidebar-mini {

        width: min(72vw, 360px) !important;
        max-width: 360px !important;
    }


    .oh-sidebar .sidebar-footer {
        display: block !important;
    }


    .oh-sidebar .oh-primary-link,
    .oh-sidebar .oh-nav-parent {

        min-height: 42px !important;

        font-size: 13.5px !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .oh-sidebar,
    .oh-sidebar.sidebar-mini {

        width: min(88vw, 340px) !important;
        max-width: 340px !important;
    }


    /*
     * Plus d'espace vertical pour les liens.
     */
    .oh-sidebar .sidebar-footer {

        display: none !important;
    }


    .oh-sidebar-navigation {

        padding:
            8px
            10px
            max(24px, env(safe-area-inset-bottom))
            !important;
    }


    .oh-sidebar .oh-sidebar-section-label {

        margin:
            17px
            8px
            6px !important;

        font-size: 9.5px !important;
    }


    .oh-sidebar .oh-primary-link,
    .oh-sidebar .oh-nav-parent {

        min-height: 42px !important;

        padding:
            7px
            10px !important;

        font-size: 13.5px !important;
    }


    .oh-sidebar .oh-primary-link .oh-menu-icon,
    .oh-sidebar .oh-nav-parent .oh-menu-icon {

        flex-basis: 27px !important;

        width: 27px !important;
        height: 27px !important;

        margin-right: 9px !important;
    }


    .oh-sidebar .oh-submenu {

        margin-left: 42px !important;

        padding-left: 14px !important;
    }


    .oh-sidebar .oh-submenu .oh-submenu-link {

        min-height: 34px !important;

        padding:
            6px
            9px !important;

        font-size: 13px !important;
    }


    /*
     * Marque plus compacte.
     */
    .oh-sidebar .oh-brand-copy strong {

        font-size: 14.5px !important;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .oh-sidebar .oh-brand-copy small {

        font-size: 10.5px !important;
    }

}


/* ==========================================================
   TRÈS PETITS MOBILES
   ========================================================== */

@media (max-width: 374.98px) {

    .oh-sidebar,
    .oh-sidebar.sidebar-mini {

        width: 90vw !important;
        max-width: 320px !important;
    }


    .oh-sidebar .oh-primary-link,
    .oh-sidebar .oh-nav-parent {

        font-size: 13px !important;
    }

}


/* ==========================================================
   APP GLOBAL MODAL STACKING FIX V1
   OUMRA-HAJJ APP
   ========================================================== */

/*
 * IMPORTANT
 *
 * .oh-content utilisait auparavant un z-index explicite.
 * Cela creait un contexte d'empilement qui emprisonnait
 * les modales de toutes les pages sous le backdrop Bootstrap.
 *
 * Le contenu conserve sa position relative mais ne doit
 * jamais creer de contexte d'empilement global.
 */

.oumra-hajj-app .oh-content {
    position: relative !important;
    z-index: auto !important;
}


/*
 * Hierarchie globale de l'interface :
 *
 * contenu                 < 1050
 * topbar / sidebar        ~ 1050 / 1090
 * backdrop modal            1980
 * modal principale          1990
 * second backdrop            2000
 * sous-modale                2010
 * Select2 ouvert             2050
 * SweetAlert                 3000
 */

.modal-backdrop {
    z-index: 1980 !important;
}


/*
 * Toutes les variantes de modales sont couvertes :
 * modal-full, modal-lg, modal-md et modales historiques.
 */

.oumra-hajj-app .modal {
    z-index: 1990 !important;
}


/*
 * La classe moderne utilisee notamment par modal-full.
 */

.oumra-hajj-app .oh-app-modal {
    z-index: 1990 !important;
}


/*
 * Gestion des sous-modales.
 * Le deuxieme backdrop doit etre situe au-dessus de
 * la premiere modale mais sous la sous-modale.
 */

.modal-backdrop + .modal-backdrop {
    z-index: 2000 !important;
}

.oumra-hajj-app #SubModal {
    z-index: 2010 !important;
}


/*
 * Select2 peut etre attache au body sur certains anciens
 * formulaires. Il doit rester exploitable depuis une modale.
 */

.select2-container--open {
    z-index: 2050 !important;
}


/*
 * Les confirmations SweetAlert lancees depuis une modale
 * doivent impérativement rester au-dessus de celle-ci.
 */

.swal2-container {
    z-index: 3000 !important;
}


/* ==========================================================
   APP MODAL + FORM DESIGN SYSTEM V2
   OUMRA-HAJJ APP
   Reference visuelle unique pour tous les formulaires
   ========================================================== */

.oumra-hajj-app {
    --oh-modal-max: 1180px;
    --oh-modal-radius: 18px;
    --oh-surface-radius: 15px;
    --oh-field-radius: 10px;

    --oh-green: #0d5d49;
    --oh-green-hover: #0a4d3d;
    --oh-green-soft: #edf6f3;

    --oh-text: #19364c;
    --oh-text-soft: #526b7c;
    --oh-muted: #82919c;

    --oh-line: #dce5ea;
    --oh-line-soft: #e8edf0;

    --oh-page-soft: #f6f8f9;
    --oh-disabled: #f0f3f5;

    --oh-danger: #c94b4b;
}


/* ----------------------------------------------------------
   FENETRES
   ---------------------------------------------------------- */

.oumra-hajj-app .oh-modal-dialog-full {
    width: calc(100vw - 48px) !important;
    max-width: var(--oh-modal-max) !important;
    margin: 24px auto !important;
}

.oumra-hajj-app .oh-modal-dialog-lg {
    width: calc(100vw - 48px) !important;
    max-width: 980px !important;
    margin: 24px auto !important;
}

.oumra-hajj-app .oh-modal-dialog-md {
    width: calc(100vw - 48px) !important;
    max-width: 760px !important;
    margin: 24px auto !important;
}

.oumra-hajj-app .oh-modal-content {
    overflow: hidden !important;

    border:
        1px solid
        rgba(214, 224, 230, .95) !important;

    border-radius:
        var(--oh-modal-radius) !important;

    background:
        #ffffff !important;

    box-shadow:
        0 30px 80px rgba(15, 35, 30, .22),
        0 8px 24px rgba(15, 35, 30, .08) !important;
}


/* ----------------------------------------------------------
   EN-TETE UNIQUE
   ---------------------------------------------------------- */

.oumra-hajj-app .oh-modal-header {
    min-height: 72px !important;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        16px
        24px !important;

    border-bottom:
        1px solid
        var(--oh-line-soft) !important;

    background:
        #ffffff !important;
}

.oumra-hajj-app .oh-modal-title {
    margin: 0 !important;

    color:
        var(--oh-text) !important;

    font-family:
        inherit !important;

    font-size:
        20px !important;

    font-weight:
        800 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -.025em;
}

.oumra-hajj-app .oh-modal-close {
    width: 42px !important;
    height: 42px !important;

    flex:
        0 0 42px;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        1px solid
        var(--oh-line) !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;

    color:
        #34556a !important;

    box-shadow:
        none !important;
}

.oumra-hajj-app .oh-modal-close:hover {
    background:
        #f3f6f7 !important;

    border-color:
        #c6d2d9 !important;

    color:
        var(--oh-text) !important;
}


/* ----------------------------------------------------------
   CORPS DES MODALES
   ---------------------------------------------------------- */

.oumra-hajj-app .oh-modal-body {
    padding:
        22px !important;

    background:
        var(--oh-page-soft) !important;
}


/* ----------------------------------------------------------
   SURFACE DE FORMULAIRE UNIQUE
   ---------------------------------------------------------- */

.oumra-hajj-app .oh-modal-form-shell {
    width:
        100%;

    margin:
        0;

    padding:
        22px;

    border:
        1px solid
        var(--oh-line) !important;

    border-radius:
        var(--oh-surface-radius) !important;

    background:
        #ffffff !important;

    box-shadow:
        0 8px 24px rgba(31, 55, 69, .035);
}

.oumra-hajj-app .oh-modal-form-shell-body {
    padding:
        0 !important;
}

.oumra-hajj-app .oh-modal-form-shell > :first-child {
    margin-top:
        0 !important;
}

.oumra-hajj-app .oh-modal-form-shell > :last-child {
    margin-bottom:
        0 !important;
}


/* Les anciennes cartes ne doivent plus creer
   un deuxieme design system a l'interieur. */

.oumra-hajj-app
.oh-modal-form-shell
.card {
    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}

.oumra-hajj-app
.oh-modal-form-shell
.card-body {
    padding:
        0 !important;
}


/* ----------------------------------------------------------
   SECTIONS METIER
   ---------------------------------------------------------- */

.oumra-hajj-app .oh-form-section,
.oumra-hajj-app
.oh-modal-form-shell
.form-card {
    padding:
        18px;

    border:
        1px solid
        var(--oh-line) !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        none !important;
}

.oumra-hajj-app
.oh-form-section
+ .oh-form-section {
    margin-top:
        18px;
}


/* ----------------------------------------------------------
   GRILLE ET RYTHME
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-modal-form-shell
.row {
    --bs-gutter-x:
        20px;

    --bs-gutter-y:
        4px;
}

.oumra-hajj-app
.oh-modal-form-shell
.form-group {
    margin-bottom:
        16px !important;
}


/* ----------------------------------------------------------
   LIBELLES
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-modal-form-shell
label,
.oumra-hajj-app
.oh-modal-form-shell
.form-label {
    display:
        block;

    margin-bottom:
        7px !important;

    color:
        #36556a !important;

    font-family:
        inherit !important;

    font-size:
        14px !important;

    font-weight:
        750 !important;

    line-height:
        1.35 !important;
}


/* ----------------------------------------------------------
   CHAMPS
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-modal-form-shell
.form-control,
.oumra-hajj-app
.oh-modal-form-shell
.form-select,
.oumra-hajj-app
.oh-modal-form-shell
select.form-control {
    min-height:
        48px !important;

    padding:
        9px
        14px !important;

    border:
        1px solid
        #d5e0e6 !important;

    border-radius:
        var(--oh-field-radius) !important;

    background:
        #ffffff !important;

    color:
        #233f52 !important;

    font-family:
        inherit !important;

    font-size:
        15px !important;

    line-height:
        1.4 !important;

    box-shadow:
        none !important;
}

.oumra-hajj-app
.oh-modal-form-shell
textarea.form-control {
    min-height:
        112px !important;

    resize:
        vertical;
}

.oumra-hajj-app
.oh-modal-form-shell
.form-control::placeholder {
    color:
        #98a6b0 !important;

    opacity:
        1;
}


/* ----------------------------------------------------------
   FOCUS
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-modal-form-shell
.form-control:focus,
.oumra-hajj-app
.oh-modal-form-shell
.form-select:focus,
.oumra-hajj-app
.oh-modal-form-shell
select.form-control:focus {
    border-color:
        #438b76 !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 3px
        rgba(13, 93, 73, .10) !important;

    outline:
        none !important;
}


/* ----------------------------------------------------------
   LECTURE SEULE / DESACTIVE
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-modal-form-shell
.form-control:disabled,
.oumra-hajj-app
.oh-modal-form-shell
.form-control[readonly],
.oumra-hajj-app
.oh-modal-form-shell
.form-select:disabled,
.oumra-hajj-app
.oh-modal-form-shell
select.form-control:disabled {
    border-color:
        #d7e0e5 !important;

    background:
        var(--oh-disabled) !important;

    color:
        #657783 !important;

    opacity:
        1 !important;

    cursor:
        not-allowed;
}


/* ----------------------------------------------------------
   SELECT2 = MEME TAILLE QUE LES AUTRES CHAMPS
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-modal-form-shell
.select2-container {
    width:
        100% !important;
}

.oumra-hajj-app
.oh-modal-form-shell
.select2-container--default
.select2-selection--single {
    height:
        48px !important;

    border:
        1px solid
        #d5e0e6 !important;

    border-radius:
        var(--oh-field-radius) !important;

    background:
        #ffffff !important;
}

.oumra-hajj-app
.oh-modal-form-shell
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
    height:
        46px !important;

    padding:
        0 40px 0 14px !important;

    color:
        #233f52 !important;

    font-family:
        inherit !important;

    font-size:
        15px !important;

    line-height:
        46px !important;
}

.oumra-hajj-app
.oh-modal-form-shell
.select2-container--default
.select2-selection--single
.select2-selection__arrow {
    width:
        34px !important;

    height:
        46px !important;
}

.oumra-hajj-app
.oh-modal-form-shell
.select2-container--default
.select2-selection--single
.select2-selection__placeholder {
    color:
        #98a6b0 !important;
}


/* Select2 des champs desactives */

.oumra-hajj-app
.oh-modal-form-shell
select:disabled
+ .select2-container
.select2-selection--single,
.oumra-hajj-app
.oh-modal-form-shell
.select2-container--disabled
.select2-selection--single {
    background:
        var(--oh-disabled) !important;

    color:
        #657783 !important;
}


/* ----------------------------------------------------------
   DATES
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-modal-form-shell
input[type="date"].form-control {
    min-height:
        48px !important;
}


/* ----------------------------------------------------------
   FICHIERS / DROPIFY
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-modal-form-shell
.dropify-wrapper {
    min-height:
        175px;

    border:
        1px solid
        #d7e0e5 !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;

    box-shadow:
        none !important;
}


/* ----------------------------------------------------------
   ALERTES
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-modal-form-shell
.alert-info,
.oumra-hajj-app
.oh-modal-form-shell
.alert-primary {
    border:
        1px solid
        #cfe4dc !important;

    border-radius:
        12px !important;

    background:
        var(--oh-green-soft) !important;

    color:
        #275b4b !important;

    box-shadow:
        none !important;
}


/* ----------------------------------------------------------
   ASSISTANT UTILISATEUR
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-user-form-shell
#top-tab-list {
    margin:
        0 0 20px !important;

    padding:
        6px !important;

    border:
        1px solid
        var(--oh-line) !important;

    border-radius:
        14px !important;

    background:
        #f5f7f8 !important;
}

.oumra-hajj-app
.oh-user-form-shell
#top-tab-list
li {
    margin-bottom:
        0 !important;
}

.oumra-hajj-app
.oh-user-form-shell
#top-tab-list
li > a {
    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    padding:
        10px 14px;

    border-radius:
        10px;

    color:
        #5c7080;
}

.oumra-hajj-app
.oh-user-form-shell
#top-tab-list
li.active > a {
    background:
        var(--oh-green) !important;

    color:
        #ffffff !important;
}


/* ----------------------------------------------------------
   COMMISSIONS
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-commission-shell
.h5,
.oumra-hajj-app
.oh-commission-shell
.h6,
.oumra-hajj-app
.oh-commission-shell
h5,
.oumra-hajj-app
.oh-commission-shell
h6 {
    font-family:
        inherit !important;

    color:
        var(--oh-text);

    font-weight:
        800;
}

.oumra-hajj-app
.oh-commission-shell
.border.rounded-3 {
    border-color:
        var(--oh-line) !important;

    border-radius:
        14px !important;

    box-shadow:
        none !important;
}


/* ----------------------------------------------------------
   ACTIONS DE FORMULAIRE
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-modal-form-shell
.btn {
    min-height:
        42px;

    padding:
        8px 16px;

    border-radius:
        10px;

    font-family:
        inherit;

    font-weight:
        750;

    box-shadow:
        none;
}


/* Action principale */

.oumra-hajj-app
.oh-modal-form-shell
.btn-primary,
.oumra-hajj-app
.oh-modal-form-shell
.btn-success,
.oumra-hajj-app
.oh-modal-form-shell
.btn-outline-success {
    border-color:
        var(--oh-green) !important;

    background:
        var(--oh-green) !important;

    color:
        #ffffff !important;
}

.oumra-hajj-app
.oh-modal-form-shell
.btn-primary:hover,
.oumra-hajj-app
.oh-modal-form-shell
.btn-success:hover,
.oumra-hajj-app
.oh-modal-form-shell
.btn-outline-success:hover {
    border-color:
        var(--oh-green-hover) !important;

    background:
        var(--oh-green-hover) !important;
}


/* Action secondaire / annulation historique */

.oumra-hajj-app
.oh-modal-form-shell
.btn-outline-warning {
    border-color:
        #c9d4da !important;

    background:
        #ffffff !important;

    color:
        #536976 !important;
}


/* Dans les fiches legacy, "Modifier" est l'action principale. */

.oumra-hajj-app
.oh-modal-form-shell
#isShown
.btn-outline-warning {
    border-color:
        var(--oh-green) !important;

    background:
        var(--oh-green) !important;

    color:
        #ffffff !important;
}


/* ----------------------------------------------------------
   BARRE D'ACTIONS DES FICHES LEGACY
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-modal-form-shell
> .float-end,
.oumra-hajj-app
.oh-modal-form-shell
> #isHide,
.oumra-hajj-app
.oh-modal-form-shell
> #isShown {
    float:
        none !important;

    width:
        100%;

    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        4px;

    padding-top:
        18px;

    border-top:
        1px solid
        var(--oh-line-soft);
}


/* ----------------------------------------------------------
   UNIFORMISATION TYPOGRAPHIQUE
   ---------------------------------------------------------- */

.oumra-hajj-app
.modal,
.oumra-hajj-app
.modal button,
.oumra-hajj-app
.modal input,
.oumra-hajj-app
.modal select,
.oumra-hajj-app
.modal textarea {
    font-family:
        inherit !important;
}


/* ----------------------------------------------------------
   MOBILE / TABLETTE
   ---------------------------------------------------------- */

@media (max-width: 767.98px) {

    .oumra-hajj-app
    .oh-modal-dialog-full,
    .oumra-hajj-app
    .oh-modal-dialog-lg,
    .oumra-hajj-app
    .oh-modal-dialog-md {
        width:
            calc(100vw - 16px) !important;

        max-width:
            calc(100vw - 16px) !important;

        margin:
            8px auto !important;
    }

    .oumra-hajj-app
    .oh-modal-header {
        min-height:
            64px !important;

        padding:
            12px 14px !important;
    }

    .oumra-hajj-app
    .oh-modal-title {
        font-size:
            17px !important;
    }

    .oumra-hajj-app
    .oh-modal-body {
        padding:
            10px !important;
    }

    .oumra-hajj-app
    .oh-modal-form-shell {
        padding:
            14px;

        border-radius:
            13px !important;
    }

    .oumra-hajj-app
    .oh-form-section {
        padding:
            14px;
    }
}


/* ==========================================================
   PAYMENT RESOURCE CARDS V2
   Vraie liste responsive - aucun tableau / aucun scrollX
   ========================================================== */


/* ----------------------------------------------------------
   PAGE SANS FRAME GLOBALE
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-payment-page
> .row
> [class*="col-"]
> .card {
    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}

.oumra-hajj-app
.oh-payment-page
.oh-page-body {
    padding:
        22px 0 0 !important;

    border:
        0 !important;

    background:
        transparent !important;
}


/* ----------------------------------------------------------
   OVERVIEW
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-payment-page
.oh-payment-overview {
    margin-top:
        22px;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}

.oumra-hajj-app
.oh-payment-page
.oh-payment-kpi {
    border:
        1px solid
        var(--oh-line, #dce5ea) !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        none !important;
}


/* ----------------------------------------------------------
   BARRE RECHERCHE
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-payment-list-toolbar {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        16px;
}

.oumra-hajj-app
.oh-payment-list-heading {
    min-width:
        0;
}

.oumra-hajj-app
.oh-payment-list-title {
    color:
        var(--oh-text, #19364c);

    font-size:
        18px;

    font-weight:
        800;

    line-height:
        1.3;
}

.oumra-hajj-app
.oh-payment-list-info {
    margin-top:
        4px;

    color:
        #778995;

    font-size:
        13px;

    line-height:
        1.4;
}

.oumra-hajj-app
.oh-payment-search {
    width:
        min(330px, 42vw);

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        0;

    padding:
        0 13px;

    border:
        1px solid
        #d5e0e6;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #82919c;
}

.oumra-hajj-app
.oh-payment-search:focus-within {
    border-color:
        #438b76;

    box-shadow:
        0 0 0 3px
        rgba(13, 93, 73, .09);
}

.oumra-hajj-app
.oh-payment-search
input {
    width:
        100%;

    min-width:
        0;

    height:
        42px;

    padding:
        0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        #233f52;

    font-size:
        14px;
}

.oumra-hajj-app
.oh-payment-search
input::placeholder {
    color:
        #96a4ae;
}


/* ----------------------------------------------------------
   LISTE
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-payment-resource-list {
    display:
        grid;

    gap:
        12px;

    width:
        100%;

    min-width:
        0;
}


/* ----------------------------------------------------------
   CARTE TRANSACTION
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-payment-card {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        54px
        minmax(0, 1fr);

    width:
        100%;

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid
        var(--oh-line, #dce5ea);

    border-radius:
        14px;

    background:
        #ffffff;

    box-shadow:
        0 4px 16px
        rgba(31, 55, 69, .035);

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.oumra-hajj-app
.oh-payment-card:hover {
    border-color:
        #c5d7d1;

    box-shadow:
        0 8px 24px
        rgba(31, 55, 69, .065);

    transform:
        translateY(-1px);
}

.oumra-hajj-app
.oh-payment-card-index {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        16px 8px;

    border-right:
        1px solid
        var(--oh-line-soft, #e8edf0);

    background:
        #fafcfc;

    color:
        var(--oh-green, #0d5d49);

    font-size:
        16px;

    font-weight:
        800;
}

.oumra-hajj-app
.oh-payment-card-content {
    min-width:
        0;

    padding:
        16px 18px;
}


/* ----------------------------------------------------------
   TETE CARTE
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-payment-card-head {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;
}

.oumra-hajj-app
.oh-payment-card-identity {
    min-width:
        0;
}

.oumra-hajj-app
.oh-payment-card-name {
    overflow:
        hidden;

    color:
        var(--oh-text, #19364c);

    font-size:
        16px;

    font-weight:
        800;

    line-height:
        1.35;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.oumra-hajj-app
.oh-payment-card-date {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    margin-top:
        5px;

    color:
        #718591;

    font-size:
        12px;

    font-weight:
        600;
}

.oumra-hajj-app
.oh-payment-card-finance {
    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;
}

.oumra-hajj-app
.oh-payment-card-amount {
    color:
        var(--oh-text, #19364c);

    font-size:
        17px;

    font-weight:
        850;

    line-height:
        1.25;

    white-space:
        nowrap;
}

.oumra-hajj-app
.oh-payment-card-amount.is-in {
    color:
        #0d6a50;
}

.oumra-hajj-app
.oh-payment-card-amount.is-out {
    color:
        #bd4141;
}

.oumra-hajj-app
.oh-payment-card-amount.is-void {
    color:
        #8b969d;

    text-decoration:
        line-through;
}


/* ----------------------------------------------------------
   BADGE TYPE
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-payment-type {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        28px;

    padding:
        4px 10px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1;
}

.oumra-hajj-app
.oh-payment-type.is-in {
    background:
        #e8f6ef;

    color:
        #147052;
}

.oumra-hajj-app
.oh-payment-type.is-out {
    background:
        #fff0ef;

    color:
        #b84343;
}

.oumra-hajj-app
.oh-payment-type.is-void {
    background:
        #eef1f3;

    color:
        #687983;
}


/* ----------------------------------------------------------
   DETAILS
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-payment-card-details {
    display:
        grid;

    grid-template-columns:
        minmax(180px, .8fr)
        minmax(220px, 1.2fr);

    gap:
        14px 24px;

    margin-top:
        15px;

    padding-top:
        14px;

    border-top:
        1px solid
        var(--oh-line-soft, #e8edf0);
}

.oumra-hajj-app
.oh-payment-card-field {
    min-width:
        0;
}

.oumra-hajj-app
.oh-payment-card-label {
    margin-bottom:
        4px;

    color:
        #84939d;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .06em;

    line-height:
        1.2;

    text-transform:
        uppercase;
}

.oumra-hajj-app
.oh-payment-card-value {
    color:
        #415d70;

    font-size:
        13px;

    font-weight:
        650;

    line-height:
        1.45;

    overflow-wrap:
        anywhere;
}


/* ----------------------------------------------------------
   TRANSACTION ANNULEE
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-payment-card-void {
    margin-top:
        12px;

    padding:
        9px 11px;

    border-radius:
        9px;

    background:
        #f3f5f6;

    color:
        #72828c;

    font-size:
        12px;
}


/* ----------------------------------------------------------
   ACTIONS
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-payment-card-actions {
    display:
        flex;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        14px;
}

.oumra-hajj-app
.oh-payment-card-action {
    min-height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        6px 12px;

    border-radius:
        9px !important;

    font-size:
        12px;

    font-weight:
        750;
}


/* ----------------------------------------------------------
   LOADING / VIDE
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-payment-loading,
.oumra-hajj-app
.oh-payment-empty {
    min-height:
        120px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        24px;

    border:
        1px dashed
        #d6e0e5;

    border-radius:
        14px;

    background:
        #ffffff;

    color:
        #718591;

    text-align:
        center;
}

.oumra-hajj-app
.oh-payment-empty {
    flex-direction:
        column;
}

.oumra-hajj-app
.oh-payment-empty-icon {
    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        var(--oh-green-soft, #edf6f3);

    color:
        var(--oh-green, #0d5d49);

    font-size:
        17px;
}

.oumra-hajj-app
.oh-payment-empty-title {
    color:
        var(--oh-text, #19364c);

    font-size:
        15px;

    font-weight:
        800;
}

.oumra-hajj-app
.oh-payment-empty-text {
    max-width:
        520px;

    color:
        #7b8c97;

    font-size:
        13px;
}


/* ----------------------------------------------------------
   PAGINATION
   ---------------------------------------------------------- */

.oumra-hajj-app
.oh-payment-pagination {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-top:
        16px;
}

.oumra-hajj-app
.oh-payment-page-btn,
.oumra-hajj-app
.oh-payment-page-number {
    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        6px 11px;

    border:
        1px solid
        #d8e1e6;

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        #526a79;

    font-size:
        12px;

    font-weight:
        700;
}

.oumra-hajj-app
.oh-payment-page-number {
    min-width:
        38px;
}

.oumra-hajj-app
.oh-payment-page-number.is-active {
    border-color:
        var(--oh-green, #0d5d49);

    background:
        var(--oh-green, #0d5d49);

    color:
        #ffffff;
}

.oumra-hajj-app
.oh-payment-page-btn:disabled {
    opacity:
        .45;

    cursor:
        not-allowed;
}


/* ----------------------------------------------------------
   TABLETTE
   ---------------------------------------------------------- */

@media (max-width: 991.98px) {

    .oumra-hajj-app
    .oh-payment-list-toolbar {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .oumra-hajj-app
    .oh-payment-search {
        width:
            100%;
    }

    .oumra-hajj-app
    .oh-payment-card-head {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .oumra-hajj-app
    .oh-payment-card-finance {
        width:
            100%;

        justify-content:
            space-between;
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 639.98px) {

    .oumra-hajj-app
    .oh-payment-card {
        grid-template-columns:
            1fr;
    }

    .oumra-hajj-app
    .oh-payment-card-index {
        display:
            none;
    }

    .oumra-hajj-app
    .oh-payment-card-content {
        padding:
            15px;
    }

    .oumra-hajj-app
    .oh-payment-card-name {
        white-space:
            normal;
    }

    .oumra-hajj-app
    .oh-payment-card-details {
        grid-template-columns:
            1fr;
    }

    .oumra-hajj-app
    .oh-payment-card-finance {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .oumra-hajj-app
    .oh-payment-card-actions {
        justify-content:
            stretch;
    }

    .oumra-hajj-app
    .oh-payment-card-action {
        flex:
            1 1 auto;
    }

    .oumra-hajj-app
    .oh-payment-pagination {
        justify-content:
            center;
    }
}


/* ==========================================================
   REFUND FORM CARDS V1
   Remboursements sans DataTables
   ========================================================== */

.oumra-hajj-app
.oh-refund-form {
    padding:
        20px !important;
}


.oumra-hajj-app
.oh-refund-intro {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    margin-bottom:
        20px;

    padding:
        14px 16px;

    border:
        1px solid
        #d6e8e1;

    border-radius:
        13px;

    background:
        #f1f8f5;
}


.oumra-hajj-app
.oh-refund-intro-icon {
    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        var(--oh-green, #0d5d49);

    font-size:
        16px;
}


.oumra-hajj-app
.oh-refund-intro-title {
    color:
        var(--oh-text, #19364c);

    font-size:
        15px;

    font-weight:
        800;
}


.oumra-hajj-app
.oh-refund-intro-text {
    margin-top:
        3px;

    color:
        #607786;

    font-size:
        12px;

    line-height:
        1.5;
}


.oumra-hajj-app
.oh-refund-layout {
    display:
        grid;

    grid-template-columns:
        minmax(300px, .85fr)
        minmax(360px, 1.15fr);

    gap:
        18px;
}


.oumra-hajj-app
.oh-refund-panel {
    min-width:
        0;

    padding:
        18px;

    border:
        1px solid
        var(--oh-line, #dce5ea);

    border-radius:
        14px;

    background:
        #ffffff;
}


.oumra-hajj-app
.oh-refund-panel-title {
    color:
        var(--oh-text, #19364c);

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1.35;
}


.oumra-hajj-app
.oh-refund-panel-subtitle {
    margin-top:
        3px;

    color:
        #7a8b96;

    font-size:
        11px;
}


.oumra-hajj-app
.oh-refund-balance {
    margin:
        4px 0 16px;

    padding:
        13px 14px;

    border-radius:
        12px;

    background:
        #f4f8f7;
}


.oumra-hajj-app
.oh-refund-balance-label {
    color:
        #6c808d;

    font-size:
        11px;

    font-weight:
        700;
}


.oumra-hajj-app
.oh-refund-balance-value {
    margin-top:
        4px;

    color:
        var(--oh-green, #0d5d49);

    font-size:
        20px;

    font-weight:
        850;
}


.oumra-hajj-app
.oh-refund-money-field {
    position:
        relative;
}


.oumra-hajj-app
.oh-refund-money-field
.form-control {
    padding-right:
        72px !important;
}


.oumra-hajj-app
.oh-refund-money-suffix {
    position:
        absolute;

    top:
        50%;

    right:
        13px;

    transform:
        translateY(-50%);

    color:
        #758893;

    font-size:
        11px;

    font-weight:
        800;

    pointer-events:
        none;
}


.oumra-hajj-app
.oh-refund-field-help {
    min-height:
        18px;

    margin-top:
        5px;

    color:
        #778b97;

    font-size:
        11px;
}


.oumra-hajj-app
.oh-refund-history-head {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        14px;
}


.oumra-hajj-app
.oh-refund-history-count {
    flex:
        0 0 auto;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        #f1f5f6;

    color:
        #657b88;

    font-size:
        10px;

    font-weight:
        800;
}


.oumra-hajj-app
.oh-refund-history-list {
    display:
        grid;

    gap:
        9px;

    max-height:
        390px;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    padding-right:
        3px;
}


.oumra-hajj-app
.oh-refund-history-card {
    padding:
        13px;

    border:
        1px solid
        #e0e7eb;

    border-radius:
        11px;

    background:
        #fbfcfc;
}


.oumra-hajj-app
.oh-refund-history-card-head {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        14px;
}


.oumra-hajj-app
.oh-refund-history-date {
    color:
        #778a96;

    font-size:
        10px;

    font-weight:
        700;
}


.oumra-hajj-app
.oh-refund-history-package {
    margin-top:
        3px;

    color:
        #29495c;

    font-size:
        12px;

    font-weight:
        750;
}


.oumra-hajj-app
.oh-refund-history-finance {
    flex:
        0 0 auto;

    text-align:
        right;
}


.oumra-hajj-app
.oh-refund-history-amount {
    font-size:
        13px;

    font-weight:
        850;

    white-space:
        nowrap;
}


.oumra-hajj-app
.oh-refund-history-amount.is-payment {
    color:
        #0e6a50;
}


.oumra-hajj-app
.oh-refund-history-amount.is-refund {
    color:
        #b94646;
}


.oumra-hajj-app
.oh-refund-history-amount.is-void {
    color:
        #8a989f;

    text-decoration:
        line-through;
}


.oumra-hajj-app
.oh-refund-history-type {
    display:
        inline-flex;

    margin-top:
        4px;

    padding:
        3px 7px;

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        800;
}


.oumra-hajj-app
.oh-refund-history-type.is-payment {
    background:
        #e7f5ee;

    color:
        #116f51;
}


.oumra-hajj-app
.oh-refund-history-type.is-refund {
    background:
        #fff0ef;

    color:
        #b94444;
}


.oumra-hajj-app
.oh-refund-history-type.is-void {
    background:
        #eef1f3;

    color:
        #71818a;
}


.oumra-hajj-app
.oh-refund-history-remark {
    margin-top:
        9px;

    padding-top:
        8px;

    border-top:
        1px solid
        #e8edef;

    color:
        #586f7e;

    font-size:
        11px;

    line-height:
        1.45;
}


.oumra-hajj-app
.oh-refund-history-remark
span {
    margin-right:
        6px;

    color:
        #87959e;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;
}


.oumra-hajj-app
.oh-refund-history-empty,
.oumra-hajj-app
.oh-refund-history-loading {
    min-height:
        110px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        18px;

    border:
        1px dashed
        #d8e1e5;

    border-radius:
        11px;

    color:
        #82919a;

    font-size:
        12px;

    text-align:
        center;
}


.oumra-hajj-app
.oh-refund-history-empty.is-error {
    border-color:
        #efd3d3;

    background:
        #fff8f8;

    color:
        #a34b4b;
}


.oumra-hajj-app
.oh-refund-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    margin-top:
        18px;

    padding-top:
        16px;

    border-top:
        1px solid
        var(--oh-line-soft, #e8edf0);
}


.oumra-hajj-app
.oh-refund-actions
.btn {
    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border-radius:
        10px !important;
}


@media (max-width: 899.98px) {

    .oumra-hajj-app
    .oh-refund-layout {
        grid-template-columns:
            1fr;
    }


    .oumra-hajj-app
    .oh-refund-history-list {
        max-height:
            320px;
    }
}


@media (max-width: 575.98px) {

    .oumra-hajj-app
    .oh-refund-form {
        padding:
            14px !important;
    }


    .oumra-hajj-app
    .oh-refund-panel {
        padding:
            14px;
    }


    .oumra-hajj-app
    .oh-refund-history-card-head {
        flex-direction:
            column;
    }


    .oumra-hajj-app
    .oh-refund-history-finance {
        text-align:
            left;
    }


    .oumra-hajj-app
    .oh-refund-actions {
        align-items:
            stretch;

        flex-direction:
            column-reverse;
    }


    .oumra-hajj-app
    .oh-refund-actions
    .btn {
        width:
            100%;
    }
}


/* ==========================================================
   SETTING RESOURCE CARDS V1
   Parametres generaux sans tableau
   ========================================================== */

.oumra-hajj-app
.oh-setting-page {
    padding-top:
        18px !important;
}


.oumra-hajj-app
.oh-setting-page-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        24px;

    padding:
        22px 24px;

    border-radius:
        16px;

    background:
        var(--oh-green, #0d5d49);

    color:
        #ffffff;

    box-shadow:
        0 12px 28px
        rgba(20, 69, 55, .10);
}


.oumra-hajj-app
.oh-setting-page-header
.card-title {
    color:
        #ffffff !important;

    font-size:
        22px;

    font-weight:
        800;
}


.oumra-hajj-app
.oh-setting-page-header
.oh-page-subtitle {
    color:
        rgba(255, 255, 255, .78);
}


.oumra-hajj-app
.oh-setting-search {
    width:
        min(360px, 100%);
}


.oumra-hajj-app
.oh-setting-search-field {
    position:
        relative;
}


.oumra-hajj-app
.oh-setting-search-field
.fa-search {
    position:
        absolute;

    top:
        50%;

    left:
        15px;

    z-index:
        2;

    transform:
        translateY(-50%);

    color:
        #718792;

    pointer-events:
        none;
}


.oumra-hajj-app
.oh-setting-search-field
.form-control {
    min-height:
        46px;

    padding-left:
        42px !important;

    border:
        1px solid
        rgba(255,255,255,.28) !important;

    border-radius:
        11px !important;

    background:
        #ffffff !important;
}


.oumra-hajj-app
.oh-setting-overview {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        18px;
}


.oumra-hajj-app
.oh-setting-overview-title {
    color:
        var(--oh-text, #18364b);

    font-size:
        17px;

    font-weight:
        800;
}


.oumra-hajj-app
.oh-setting-overview-text {
    margin-top:
        3px;

    color:
        #718591;

    font-size:
        12px;
}


.oumra-hajj-app
.oh-setting-result-info {
    flex:
        0 0 auto;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        #edf4f1;

    color:
        var(--oh-green, #0d5d49);

    font-size:
        11px;

    font-weight:
        800;
}


.oumra-hajj-app
.oh-setting-resource-list {
    display:
        grid;

    gap:
        12px;

    padding-bottom:
        28px;
}


.oumra-hajj-app
.oh-setting-card {
    display:
        grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        16px;

    min-width:
        0;

    padding:
        18px;

    border:
        1px solid
        var(--oh-line, #dce5e9);

    border-radius:
        14px;

    background:
        #ffffff;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


.oumra-hajj-app
.oh-setting-card:hover {
    border-color:
        #c9dad4;

    box-shadow:
        0 8px 24px
        rgba(26, 55, 72, .055);
}


.oumra-hajj-app
.oh-setting-card-icon {
    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        #edf6f2;

    color:
        var(--oh-green, #0d5d49);

    font-size:
        17px;
}


.oumra-hajj-app
.oh-setting-card-main {
    min-width:
        0;
}


.oumra-hajj-app
.oh-setting-card-heading {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;
}


.oumra-hajj-app
.oh-setting-title {
    color:
        var(--oh-text, #18364b);

    font-size:
        14px;

    font-weight:
        800;
}


.oumra-hajj-app
.oh-setting-description {
    margin-top:
        2px;

    color:
        #7a8d98;

    font-size:
        11px;
}


.oumra-hajj-app
.oh-setting-meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.oumra-hajj-app
.oh-setting-type,
.oumra-hajj-app
.oh-setting-key {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        24px;

    padding:
        3px 8px;

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        800;
}


.oumra-hajj-app
.oh-setting-type {
    background:
        #eef5f2;

    color:
        #416e60;
}


.oumra-hajj-app
.oh-setting-key {
    background:
        #f3f5f6;

    color:
        #7c8b93;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}


.oumra-hajj-app
.oh-setting-value-zone {
    margin-top:
        12px;
}


.oumra-hajj-app
.oh-setting-current-value {
    color:
        #25465a;

    font-size:
        14px;

    font-weight:
        700;

    overflow-wrap:
        anywhere;
}


.oumra-hajj-app
.oh-setting-current-value.is-empty {
    color:
        #98a5ac;

    font-style:
        italic;

    font-weight:
        500;
}


.oumra-hajj-app
.oh-setting-value-unit {
    display:
        inline-flex;

    margin-left:
        7px;

    padding:
        2px 7px;

    border-radius:
        999px;

    background:
        #eef4f1;

    color:
        #637d73;

    font-size:
        9px;

    font-weight:
        800;
}


.oumra-hajj-app
.oh-setting-editor {
    max-width:
        640px;
}


.oumra-hajj-app
.oh-setting-editor
.form-control {
    min-height:
        43px;

    border-radius:
        10px !important;
}


.oumra-hajj-app
.oh-setting-file-preview {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.oumra-hajj-app
.oh-setting-file-preview
img {
    width:
        58px;

    height:
        58px;

    display:
        block;

    object-fit:
        contain;

    padding:
        5px;

    border:
        1px solid
        #e1e7ea;

    border-radius:
        11px;

    background:
        #ffffff;
}


.oumra-hajj-app
.oh-setting-file-state {
    color:
        #7c8d96;

    font-size:
        10px;

    font-weight:
        700;
}


.oumra-hajj-app
.oh-setting-file-name {
    margin-top:
        3px;

    color:
        #2b4a5d;

    font-size:
        11px;

    font-weight:
        700;

    overflow-wrap:
        anywhere;
}


.oumra-hajj-app
.oh-setting-file-placeholder {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #8a9aa2;

    font-size:
        12px;
}


.oumra-hajj-app
.oh-setting-file-input {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    min-height:
        48px;

    padding:
        10px 12px;

    border:
        1px dashed
        #bdcec7;

    border-radius:
        10px;

    background:
        #f8fbfa;

    color:
        var(--oh-green, #0d5d49);

    cursor:
        pointer;
}


.oumra-hajj-app
.oh-setting-file-input
span {
    font-size:
        12px;

    font-weight:
        750;
}


.oumra-hajj-app
.oh-setting-file-input
small {
    width:
        100%;

    color:
        #84949c;

    font-size:
        9px;
}


.oumra-hajj-app
.oh-setting-selected-file {
    margin-top:
        5px;

    color:
        #516c7a;

    font-size:
        10px;
}


.oumra-hajj-app
.oh-setting-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.oumra-hajj-app
.oh-setting-action {
    min-height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    padding:
        7px 12px !important;

    border-radius:
        9px !important;

    white-space:
        nowrap;

    font-size:
        11px;

    font-weight:
        750;
}


.oumra-hajj-app
.oh-setting-empty {
    min-height:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        24px;

    border:
        1px dashed
        #d4dee3;

    border-radius:
        14px;

    color:
        #7e9099;

    text-align:
        center;
}


.oumra-hajj-app
.oh-setting-empty
strong,
.oumra-hajj-app
.oh-setting-empty
span {
    display:
        block;
}


.oumra-hajj-app
.oh-setting-empty
strong {
    color:
        #425f70;

    font-size:
        13px;
}


.oumra-hajj-app
.oh-setting-empty
span {
    margin-top:
        3px;

    font-size:
        11px;
}


.oumra-hajj-app
.oh-setting-empty.is-error {
    border-color:
        #ebcece;

    background:
        #fff8f8;

    color:
        #a34a4a;
}


@media (max-width: 899.98px) {

    .oumra-hajj-app
    .oh-setting-page-header {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .oumra-hajj-app
    .oh-setting-search {
        width:
            100%;
    }


    .oumra-hajj-app
    .oh-setting-card {
        grid-template-columns:
            44px
            minmax(0, 1fr);
    }


    .oumra-hajj-app
    .oh-setting-actions {
        grid-column:
            1 / -1;

        justify-content:
            flex-end;
    }
}


@media (max-width: 575.98px) {

    .oumra-hajj-app
    .oh-setting-page-header {
        padding:
            18px;
    }


    .oumra-hajj-app
    .oh-setting-overview {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .oumra-hajj-app
    .oh-setting-card {
        grid-template-columns:
            1fr;

        padding:
            15px;
    }


    .oumra-hajj-app
    .oh-setting-card-icon {
        width:
            42px;

        height:
            42px;
    }


    .oumra-hajj-app
    .oh-setting-card-heading {
        flex-direction:
            column;
    }


    .oumra-hajj-app
    .oh-setting-meta {
        justify-content:
            flex-start;
    }


    .oumra-hajj-app
    .oh-setting-actions {
        grid-column:
            auto;

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .oumra-hajj-app
    .oh-setting-action {
        width:
            100%;
    }
}

/* ==========================================================
   SETTING RESOURCE CARDS V1.1
   Harmonisation visuelle finale
   ========================================================== */

/*
 * Le bandeau vert doit être constitué d'une seule surface.
 * On neutralise les éventuels fonds hérités du composant
 * oh-page-heading.
 */
.oumra-hajj-app
.oh-setting-page-header
.oh-page-heading {
    flex: 1 1 auto;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
}


/*
 * Le titre reprend exactement la logique des autres
 * bandeaux métier.
 */
.oumra-hajj-app
.oh-setting-page-header
.card-title {
    margin: 0 0 4px !important;

    font-size: 21px !important;
    line-height: 1.25;

    font-weight: 800 !important;
}


/*
 * Les identifiants techniques ne doivent pas concurrencer
 * l'information métier.
 */
.oumra-hajj-app
.oh-setting-key {
    opacity: .55;

    font-size: 8px;
}


/*
 * La nature du champ reste visible mais discrète.
 */
.oumra-hajj-app
.oh-setting-type {
    font-size: 8px;

    letter-spacing: .02em;
}


/*
 * Un peu plus d'air entre la description et la valeur.
 */
.oumra-hajj-app
.oh-setting-value-zone {
    margin-top: 10px;
}


/*
 * Les cartes restent sobres et homogènes avec les autres
 * ressources de l'application.
 */
.oumra-hajj-app
.oh-setting-card {
    min-height: 112px;

    box-shadow: none;
}


/*
 * Le bouton Modifier doit avoir le même poids visuel que
 * les actions secondaires des autres modules.
 */
.oumra-hajj-app
.oh-setting-action.btn-outline-primary {
    color: var(--oh-green, #0d5d49) !important;

    border-color: #9bb9ae !important;

    background: #ffffff !important;
}


.oumra-hajj-app
.oh-setting-action.btn-outline-primary:hover {
    color: #ffffff !important;

    border-color: var(--oh-green, #0d5d49) !important;

    background: var(--oh-green, #0d5d49) !important;
}


/*
 * Desktop : le champ recherche reste aligné au centre du
 * bandeau et ne concurrence pas le titre.
 */
@media (min-width: 900px) {
    .oumra-hajj-app
    .oh-setting-page-header
    .oh-setting-search {
        flex: 0 0 min(360px, 32vw);
    }
}

/* ==========================================================
   FINANCIAL MODAL CARDS V1
   Encaissements + frais supplémentaires
   ========================================================== */

.oh-payment-entry-form,
.oh-extra-charge-form {
    width: 100%;
}

.oh-payment-entry-layout {
    display: grid;
    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);
    gap: 22px;
    align-items: start;
}

.oh-finance-form-panel,
.oh-finance-summary-panel {
    min-width: 0;
    padding: 22px;
    border: 1px solid #dfe8e4;
    border-radius: 16px;
    background: #fff;
}

.oh-finance-summary-panel {
    background: #f8fbfa;
}

.oh-finance-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.oh-finance-section-kicker {
    margin-bottom: 4px;
    color: #668074;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.oh-finance-section-title {
    margin: 0;
    color: #17354a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

.oh-finance-section-text {
    margin: 5px 0 0;
    color: #6d8090;
    font-size: 13px;
    line-height: 1.55;
}

.oh-finance-form-panel .form-group {
    margin-bottom: 18px;
}

.oh-finance-form-panel label {
    display: block;
    margin-bottom: 7px;
    color: #36556a;
    font-size: 13px;
    font-weight: 700;
}

.oh-finance-form-panel .form-control,
.oh-finance-form-panel .select2-container .select2-selection {
    min-height: 48px;
    border-color: #d7e2e8;
    border-radius: 11px !important;
}

.oh-money-input {
    position: relative;
}

.oh-money-input .form-control {
    padding-right: 72px;
}

.oh-money-input-suffix {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #728694;
    font-size: 12px;
    font-weight: 800;
    pointer-events: none;
}

.oh-finance-package-summary {
    padding: 16px 17px;
    margin-bottom: 14px;
    border: 1px solid #dfe8e4;
    border-radius: 13px;
    background: #fff;
}

.oh-finance-summary-label,
.oh-finance-metric-label,
.oh-extra-charge-label {
    color: #718695;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.oh-finance-package-value {
    margin-top: 7px;
    color: #17354a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.oh-finance-metrics {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.oh-finance-metric {
    min-width: 0;
    padding: 16px;
    border: 1px solid #dfe8e4;
    border-radius: 13px;
    background: #fff;
}

.oh-finance-metric.is-primary {
    border-color: #b8d8ca;
    background: #f0f8f4;
}

.oh-finance-metric-value {
    margin-top: 6px;
    color: #17354a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

.oh-finance-metric.is-primary
.oh-finance-metric-value {
    color: #0c6549;
}

.oh-finance-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e5ece9;
}

.oh-finance-form-actions .btn {
    min-height: 42px;
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 700;
}

.oh-finance-form-actions .btn i {
    margin-right: 6px;
}

/* Frais supplémentaires */

.oh-extra-charge-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.oh-extra-charge-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.oh-extra-charge-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 150px;
}

.oh-extra-charge-total span {
    color: #718695;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.oh-extra-charge-total strong {
    margin-top: 3px;
    color: #0c6549;
    font-size: 17px;
    font-weight: 800;
}

.oh-extra-charge-editor {
    display: grid;
    grid-template-columns:
        minmax(180px, .65fr)
        minmax(0, 1.35fr);
    gap: 16px;
    align-items: start;
}

.oh-extra-charge-list {
    display: grid;
    gap: 12px;
}

.oh-extra-charge-card {
    display: grid;
    grid-template-columns:
        44px
        minmax(0, 1fr)
        minmax(150px, auto)
        auto;
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 16px;
    border: 1px solid #dfe8e4;
    border-radius: 14px;
    background: #fff;
}

.oh-extra-charge-number {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eaf5f0;
    color: #0c6549;
    font-size: 13px;
    font-weight: 800;
}

.oh-extra-charge-content {
    min-width: 0;
}

.oh-extra-charge-remark {
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: #17354a;
    font-size: 14px;
    font-weight: 700;
}

.oh-extra-charge-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.oh-extra-charge-amount span {
    color: #718695;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.oh-extra-charge-amount strong {
    margin-top: 3px;
    color: #17354a;
    font-size: 15px;
    font-weight: 800;
}

.oh-extra-charge-actions .btn {
    min-height: 38px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
}

.oh-extra-charge-locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #87949d;
    font-size: 12px;
    font-weight: 700;
}

.oh-finance-empty-state {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 100px;
    padding: 20px;
    border: 1px dashed #cedbd5;
    border-radius: 14px;
    background: #f8fbfa;
    color: #637985;
}

.oh-finance-empty-state strong {
    display: block;
    margin-bottom: 3px;
    color: #36556a;
}

.oh-finance-empty-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e8f4ef;
    color: #0c6549;
}

@media (max-width: 991.98px) {
    .oh-payment-entry-layout {
        grid-template-columns: 1fr;
    }

    .oh-extra-charge-head {
        flex-direction: column;
    }

    .oh-extra-charge-head-actions {
        width: 100%;
        justify-content: space-between;
    }

    .oh-extra-charge-card {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            auto;
    }

    .oh-extra-charge-actions {
        grid-column: 2 / -1;
        display: flex;
        justify-content: flex-end;
    }
}

@media (max-width: 767.98px) {
    .oh-finance-form-panel,
    .oh-finance-summary-panel {
        padding: 16px;
        border-radius: 13px;
    }

    .oh-finance-metrics,
    .oh-extra-charge-editor {
        grid-template-columns: 1fr;
    }

    .oh-finance-form-actions {
        flex-direction: column-reverse;
    }

    .oh-finance-form-actions .btn {
        width: 100%;
    }

    .oh-extra-charge-head-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .oh-extra-charge-total {
        align-items: flex-start;
    }

    .oh-extra-charge-head-actions .btn {
        width: 100%;
    }

    .oh-extra-charge-card {
        grid-template-columns:
            36px
            minmax(0, 1fr);
        gap: 12px;
    }

    .oh-extra-charge-amount {
        grid-column: 2;
        align-items: flex-start;
    }

    .oh-extra-charge-actions {
        grid-column: 2;
        justify-content: flex-start;
    }
}

/* ==========================================================
   DOCUMENT TYPE RESOURCE CARDS V1
   ========================================================== */
/* ==========================================================
   DOCUMENT TYPE RESOURCE CARDS V1
   ========================================================== */

.oh-setting-documents-page .oh-page-body {
    padding-top: 26px;
}

.oh-document-search {
    position: relative;
    width: min(360px, 100%);
}

.oh-document-search > i {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #718598;
    pointer-events: none;
}

.oh-document-search .form-control {
    min-height: 48px;
    padding-left: 44px;
    border-radius: 12px;
}

.oh-document-info {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 26px;
    padding: 15px 17px;
    border: 1px solid #d9e7e2;
    border-radius: 14px;
    background: #f6faf8;
    color: #496174;
    line-height: 1.5;
}

.oh-document-info strong {
    display: block;
    margin-bottom: 2px;
    color: #17354b;
}

.oh-document-info-icon {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    background: #e8f4ef;
    color: #12614d;
    font-size: 17px;
}

.oh-document-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 17px;
}

.oh-document-section-head h5 {
    color: #16344b;
    font-size: 1.17rem;
    font-weight: 750;
}

.oh-document-section-subtitle {
    color: #718598;
    font-size: .9rem;
}

.oh-document-count {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eaf5f0;
    color: #116249;
    font-size: .82rem;
    font-weight: 700;
}

.oh-document-list {
    display: grid;
    gap: 15px;
}

.oh-document-card {
    padding: 20px;
    border: 1px solid #dce5ea;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(28, 51, 69, .035);
}

.oh-document-card.is-inactive {
    background: #fbfcfc;
}

.oh-document-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 19px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e7edf0;
}

.oh-document-card-identity {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 13px;
}

.oh-document-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #eaf5f0;
    color: #116149;
    font-size: 18px;
}

.oh-document-card-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}

.oh-document-code,
.oh-document-trip-tag,
.oh-document-status-tag {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.oh-document-code {
    background: #f0f3f5;
    color: #52697c;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.oh-document-trip-tag {
    background: #eef4f7;
    color: #3f5d70;
}

.oh-document-status-tag.is-on {
    background: #e6f5ee;
    color: #0e6a4d;
}

.oh-document-status-tag.is-off {
    background: #f2f3f4;
    color: #74818b;
}

.oh-document-card-title {
    margin: 0;
    color: #17354b;
    font-size: 1.03rem;
    font-weight: 750;
}

.oh-document-save {
    flex: 0 0 auto;
    min-height: 40px;
    padding-inline: 15px;
    border-radius: 10px;
    font-weight: 700;
}

.oh-document-save.is-saving {
    min-width: 155px;
}

.oh-document-card-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(180px, .65fr);
    gap: 15px;
}

.oh-document-field {
    min-width: 0;
}

.oh-document-field-wide {
    grid-column: span 1;
}

.oh-document-label {
    display: block;
    margin-bottom: 7px;
    color: #36536a;
    font-size: .83rem;
    font-weight: 700;
}

.oh-document-card .form-control {
    min-height: 46px;
    border-color: #d4e0e6;
    border-radius: 11px;
    background-color: #fff;
}

.oh-document-card .form-control:focus {
    border-color: #80aa9b;
    box-shadow: 0 0 0 3px rgba(22, 104, 77, .08);
}

.oh-document-switches {
    display: grid;
    grid-column: span 3;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 12px;
}

.oh-document-switch {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid #dde6ea;
    border-radius: 12px;
    background: #f9fbfb;
    cursor: pointer;
}

.oh-document-switch input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #12634b;
}

.oh-document-switch-content {
    display: grid;
    gap: 2px;
}

.oh-document-switch-content strong {
    color: #28485e;
    font-size: .86rem;
}

.oh-document-switch-content small {
    color: #7a8c9a;
    line-height: 1.35;
}

.oh-document-loading,
.oh-document-empty {
    display: flex;
    min-height: 120px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    border: 1px dashed #d7e1e6;
    border-radius: 15px;
    background: #fafcfc;
    color: #738695;
}

.oh-document-empty {
    flex-direction: column;
    text-align: center;
}

.oh-document-empty > i {
    color: #8ba09a;
    font-size: 24px;
}

.oh-document-empty strong {
    color: #36546a;
}

@media (max-width: 991.98px) {

    .oh-document-card-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .oh-document-switches {
        grid-column: span 2;
    }

}

@media (max-width: 767.98px) {

    .oh-document-section-head,
    .oh-document-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .oh-document-count {
        align-self: flex-start;
    }

    .oh-document-save {
        width: 100%;
    }

    .oh-document-card-grid,
    .oh-document-switches {
        grid-template-columns: 1fr;
    }

    .oh-document-switches {
        grid-column: span 1;
    }

}

@media (max-width: 575.98px) {

    .oh-document-card {
        padding: 16px;
        border-radius: 14px;
    }

    .oh-document-card-identity {
        gap: 10px;
    }

    .oh-document-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

}

/* ==========================================================
   COST RESOURCE CARDS V1
   ========================================================== */
/* ==========================================================
   COST RESOURCE CARDS V1
   ========================================================== */

.oh-costs-page .oh-page-body {
    display: grid;
    gap: 30px;
}

.oh-cost-overview {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.oh-cost-kpi {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 92px;
    padding: 17px;
    border: 1px solid #dde6ea;
    border-radius: 15px;
    background: #fff;
}

.oh-cost-kpi-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #eaf5f0;
    color: #12614b;
    font-size: 18px;
}

.oh-cost-kpi-icon.is-warning {
    background: #fff5df;
    color: #b27600;
}

.oh-cost-kpi-label {
    margin-bottom: 4px;
    color: #708596;
    font-size: .79rem;
    font-weight: 700;
}

.oh-cost-kpi-value {
    color: #17364c;
    font-size: 1.23rem;
    font-weight: 800;
}

.oh-cost-section {
    display: grid;
    gap: 18px;
}

.oh-cost-section + .oh-cost-section {
    padding-top: 27px;
    border-top: 1px solid #e4eaed;
}

.oh-cost-section-head,
.oh-cost-list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.oh-cost-section-head h5,
.oh-cost-list-head h5,
.oh-cost-list-head h6 {
    margin: 0 0 4px;
    color: #17364c;
    font-weight: 800;
}

.oh-cost-section-head p,
.oh-cost-list-head span {
    margin: 0;
    color: #738797;
    font-size: .87rem;
}

.oh-cost-form-shell {
    padding: 21px;
    border: 1px solid #dbe5e8;
    border-radius: 17px;
    background: #fbfcfc;
}

.oh-cost-form-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 21px;
}

.oh-cost-form-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #728697;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.oh-cost-form-heading h6 {
    margin: 0;
    color: #17364c;
    font-size: 1.06rem;
    font-weight: 800;
}

.oh-cost-reset-btn {
    border-radius: 10px;
}

.oh-cost-form-group {
    padding: 17px 0;
    border-top: 1px solid #e5ebee;
}

.oh-cost-form-group:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.oh-cost-form-group-title {
    margin-bottom: 12px;
    color: #496377;
    font-size: .79rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.oh-cost-form-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.oh-cost-field {
    min-width: 0;
}

.oh-cost-field.is-wide {
    grid-column: span 2;
}

.oh-cost-field label {
    display: block;
    margin-bottom: 7px;
    color: #35536a;
    font-size: .82rem;
    font-weight: 700;
}

.oh-cost-field .form-control {
    min-height: 45px;
    border-color: #d4dfe5;
    border-radius: 10px;
    background: #fff;
}

.oh-cost-field textarea.form-control {
    min-height: 92px;
    resize: vertical;
}

.oh-cost-field .form-control:focus {
    border-color: #86ab9d;
    box-shadow:
        0 0 0 3px
        rgba(19, 99, 75, .075);
}

.oh-cost-input-suffix {
    position: relative;
}

.oh-cost-input-suffix .form-control {
    padding-right: 54px;
}

.oh-cost-input-suffix > span {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    color: #81919d;
    font-size: .77rem;
    pointer-events: none;
}

.oh-cost-status-switch {
    display: flex !important;
    align-items: flex-start;
    gap: 11px;
    min-height: 92px;
    margin: 0 !important;
    padding: 14px;
    border: 1px solid #dbe5e8;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.oh-cost-status-switch input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #12614b;
}

.oh-cost-status-switch > span {
    display: grid;
    gap: 3px;
}

.oh-cost-status-switch strong {
    color: #294a61;
    font-size: .86rem;
}

.oh-cost-status-switch small {
    color: #7d8e9b;
    line-height: 1.4;
}

.oh-cost-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 18px;
    border-top: 1px solid #e3eaed;
}

.oh-cost-form-actions .btn {
    min-height: 42px;
    padding-inline: 17px;
    border-radius: 10px;
    font-weight: 700;
}

.oh-cost-search {
    position: relative;
    width: min(350px, 100%);
}

.oh-cost-search > i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #75899a;
    pointer-events: none;
}

.oh-cost-search .form-control {
    min-height: 44px;
    padding-left: 42px;
    border-radius: 11px;
}

.oh-cost-resource-list {
    display: grid;
    gap: 14px;
}

.oh-cost-supplier-card,
.oh-cost-group-card {
    padding: 19px;
    border: 1px solid #dce5e9;
    border-radius: 16px;
    background: #fff;
    box-shadow:
        0 3px 12px
        rgba(27, 51, 69, .025);
}

.oh-cost-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.oh-cost-card-identity {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 12px;
}

.oh-cost-card-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #eaf5f0;
    color: #12614b;
    font-size: 18px;
}

.oh-cost-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.oh-cost-code,
.oh-cost-type-tag,
.oh-cost-state-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
}

.oh-cost-code {
    background: #eef2f4;
    color: #526a7c;
}

.oh-cost-type-tag {
    background: #edf5f7;
    color: #456375;
}

.oh-cost-state-tag.is-active {
    background: #e7f6ee;
    color: #11694e;
}

.oh-cost-state-tag.is-inactive {
    background: #f1f2f3;
    color: #77848d;
}

.oh-cost-card-title {
    margin: 0;
    color: #17364c;
    font-size: 1.02rem;
    font-weight: 800;
}

.oh-cost-card-subtitle {
    margin-top: 3px;
    color: #718698;
    font-size: .84rem;
}

.oh-cost-card-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
}

.oh-cost-card-actions .btn {
    min-height: 39px;
    border-radius: 10px;
    font-weight: 700;
}

.oh-cost-icon-btn {
    width: 40px;
    padding: 0 !important;
}

.oh-cost-card-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.oh-cost-card-panel {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #e2e8eb;
    border-radius: 12px;
    background: #fafcfc;
}

.oh-cost-panel-label {
    margin-bottom: 6px;
    color: #718594;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.oh-cost-panel-value {
    color: #294a61;
    font-size: .9rem;
    font-weight: 750;
}

.oh-cost-panel-meta {
    margin-top: 3px;
    color: #728697;
    font-size: .8rem;
    line-height: 1.4;
}

.oh-cost-performance-row {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.oh-cost-performance-row > div {
    display: grid;
    gap: 2px;
}

.oh-cost-performance-value {
    color: #284960;
    font-size: 1rem;
    font-weight: 800;
}

.oh-cost-performance-row small {
    color: #7b8d9a;
}

.oh-cost-margin-box {
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
    min-width: 200px;
    gap: 2px;
}

.oh-cost-margin-box > span {
    color: #718595;
    font-size: .72rem;
    font-weight: 750;
    text-transform: uppercase;
}

.oh-cost-margin-box > strong {
    font-size: 1.16rem;
    font-weight: 850;
}

.oh-cost-margin-box > small {
    color: #738797;
}

.oh-cost-financial-grid {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.oh-cost-financial-item {
    display: grid;
    align-content: center;
    min-height: 75px;
    padding: 12px 13px;
    border: 1px solid #e2e8eb;
    border-radius: 11px;
    background: #fafcfc;
}

.oh-cost-financial-item > span {
    margin-bottom: 5px;
    color: #718595;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.oh-cost-financial-item > strong {
    color: #294a61;
    font-size: .84rem;
    font-weight: 800;
}

.oh-cost-financial-item.is-action {
    padding: 0;
    border: 0;
    background: transparent;
}

.oh-cost-financial-item.is-action .btn {
    display: inline-flex;
    width: 100%;
    height: 100%;
    min-height: 75px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 11px;
    font-weight: 750;
}

.oh-cost-empty {
    padding: 26px;
    border: 1px dashed #d7e1e5;
    border-radius: 14px;
    background: #fafcfc;
    color: #778997;
    text-align: center;
}

@media (max-width: 1199.98px) {

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

    .oh-cost-form-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .oh-cost-financial-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 991.98px) {

    .oh-cost-card-grid {
        grid-template-columns: 1fr;
    }

    .oh-cost-card-head {
        flex-direction: column;
    }

    .oh-cost-margin-box {
        width: 100%;
        min-width: 0;
        justify-items: start;
    }

}

@media (max-width: 767.98px) {

    .oh-cost-section-head,
    .oh-cost-list-head,
    .oh-cost-form-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .oh-cost-search {
        width: 100%;
    }

    .oh-cost-card-actions {
        width: 100%;
    }

    .oh-cost-card-actions .btn:first-child {
        flex: 1 1 auto;
    }

    .oh-cost-financial-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 575.98px) {

    .oh-cost-overview,
    .oh-cost-form-grid,
    .oh-cost-financial-grid {
        grid-template-columns: 1fr;
    }

    .oh-cost-field.is-wide {
        grid-column: span 1;
    }

    .oh-cost-form-shell {
        padding: 16px;
    }

    .oh-cost-supplier-card,
    .oh-cost-group-card {
        padding: 15px;
    }

    .oh-cost-form-actions {
        flex-direction: column-reverse;
    }

    .oh-cost-form-actions .btn {
        width: 100%;
    }

}

/* GROUP OPERATIONS RESOURCE CARDS V1 - START */

/* ==========================================================
   GROUPE DE VOYAGE
   PROGRAMME + INCIDENTS + POINTAGE
   ========================================================== */

.oh-group-program-panel,
.oh-group-incident-panel {
    width: 100%;
}

.oh-group-program-panel *,
.oh-group-incident-panel * {
    box-sizing: border-box;
}


/* KPI */

.oh-group-program-panel .oh-ops-kpi-card,
.oh-group-incident-panel .oh-ops-kpi-card {
    height: 100%;

    min-height: 112px;

    padding: 18px 20px;

    border: 1px solid #e1e8e5;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 4px 18px rgba(25, 55, 47, .035);
}

.oh-group-program-panel .oh-ops-kpi-card .ops-label,
.oh-group-incident-panel .oh-ops-kpi-card .ops-label {
    margin-bottom: 8px;

    color: #738494;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .035em;
    text-transform: uppercase;
}

.oh-group-program-panel .oh-ops-kpi-card .ops-value,
.oh-group-incident-panel .oh-ops-kpi-card .ops-value {
    margin-bottom: 5px;

    color: #13334b;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.18;
}

.oh-group-program-panel .oh-next-activity-value {
    font-size: 17px !important;
}


/* FORMULAIRE COMMUN */

.oh-group-program-panel .oh-ops-section-form,
.oh-group-incident-panel .oh-ops-section-form {
    padding: 24px;

    border: 1px solid #dfe7e4;
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfc 100%
        );

    box-shadow:
        0 6px 24px rgba(24, 52, 45, .035);
}

.oh-ops-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
    padding-bottom: 18px;

    border-bottom: 1px solid #e8edeb;
}

.oh-ops-section-eyebrow {
    margin-bottom: 5px;

    color: #0c674f;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .075em;
    text-transform: uppercase;
}

.oh-ops-section-title {
    margin: 0;

    color: #102d43;

    font-size: 19px;
    font-weight: 800;
}

.oh-ops-section-subtitle {
    max-width: 720px;

    margin: 6px 0 0;

    color: #738494;

    font-size: 13px;
    line-height: 1.55;
}

.oh-ops-section-badge,
.oh-ops-count,
.oh-program-day-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 6px 12px;

    border-radius: 999px;

    background: #edf7f3;

    color: #0d674f;

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;
}

.oh-group-program-panel .oh-ops-section-form label,
.oh-group-incident-panel .oh-ops-section-form label {
    display: block;

    margin-bottom: 7px;

    color: #344f64;

    font-size: 13px;
    font-weight: 700;
}

.oh-group-program-panel .oh-ops-section-form .form-control,
.oh-group-incident-panel .oh-ops-section-form .form-control {
    min-height: 46px;

    border: 1px solid #d6e0e5;
    border-radius: 11px;

    background-color: #ffffff;

    color: #17364d;

    box-shadow: none;
}

.oh-group-program-panel .oh-ops-section-form textarea.form-control,
.oh-group-incident-panel .oh-ops-section-form textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.oh-group-program-panel .oh-ops-section-form .form-control:focus,
.oh-group-incident-panel .oh-ops-section-form .form-control:focus {
    border-color: #6eaa98;

    box-shadow:
        0 0 0 3px rgba(25, 111, 84, .09);
}

.oh-ops-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    padding-top: 5px;
}

.oh-ops-form-actions .btn {
    min-height: 42px;

    padding-inline: 18px;

    border-radius: 10px;

    font-weight: 700;
}

.oh-ops-checkbox-field {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 46px;

    padding: 0 14px;

    border: 1px solid #d6e0e5;
    border-radius: 11px;

    background: #ffffff;
}

.oh-ops-checkbox-field label {
    margin: 0 !important;
}


/* TITRES DE LISTES */

.oh-ops-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin: 12px 0 16px;
}

.oh-ops-list-heading h5 {
    margin: 0;

    color: #15334a;

    font-size: 19px;
    font-weight: 800;
}

.oh-ops-list-heading p {
    margin: 4px 0 0;

    color: #758696;

    font-size: 13px;
}


/* INCIDENTS */

.oh-incident-list {
    display: grid;

    gap: 16px;
}

.oh-incident-card {
    padding: 20px;

    border: 1px solid #dfe6e4;
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 4px 18px rgba(24, 52, 45, .03);
}

.oh-incident-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 14px;
}

.oh-incident-date {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 6px;

    color: #7a8b99;

    font-size: 12px;
    font-weight: 700;
}

.oh-incident-title {
    margin: 0;

    color: #123148;

    font-size: 18px;
    font-weight: 800;
}

.oh-incident-category {
    margin-top: 4px;

    color: #5f7484;

    font-size: 13px;
    font-weight: 600;
}

.oh-incident-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 7px;
}

.oh-incident-badges .badge {
    padding: 7px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}

.oh-incident-description {
    margin-bottom: 16px;

    padding: 13px 15px;

    border-radius: 11px;

    background: #f7f9fa;

    color: #455e70;

    font-size: 13px;
    line-height: 1.6;
}

.oh-incident-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.oh-incident-info,
.oh-itinerary-info {
    min-width: 0;

    padding: 13px 14px;

    border: 1px solid #e6ebea;
    border-radius: 12px;

    background: #fbfcfc;
}

.oh-incident-info-label,
.oh-itinerary-info-label {
    margin-bottom: 5px;

    color: #81909c;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .07em;
    text-transform: uppercase;
}

.oh-incident-info-value,
.oh-itinerary-info-value {
    color: #29475d;

    font-size: 13px;
    font-weight: 700;
}

.oh-incident-info-sub,
.oh-itinerary-info-sub {
    margin-top: 4px;

    color: #7a8b98;

    font-size: 12px;
    line-height: 1.45;
}

.oh-incident-action-taken {
    margin-top: 12px;

    padding: 13px 14px;

    border-left: 3px solid #0f7258;
    border-radius: 8px;

    background: #f2f9f6;

    color: #405f55;

    font-size: 13px;
    line-height: 1.55;
}

.oh-incident-card-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 16px;
}

.oh-incident-card-actions .btn {
    border-radius: 9px;

    font-weight: 700;
}


/* PROGRAMME */

.oh-program-day {
    margin-top: 24px;
}

.oh-program-day:first-of-type {
    margin-top: 8px;
}

.oh-program-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 12px;
}

.oh-program-day-date {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #193a50;

    font-size: 16px;
    font-weight: 800;

    text-transform: capitalize;
}

.oh-program-day-date i {
    color: #0f7056;
}

.oh-itinerary-list {
    display: grid;

    gap: 14px;
}

.oh-itinerary-card {
    padding: 0 !important;

    overflow: hidden;

    border: 1px solid #dfe6e4 !important;
    border-radius: 17px !important;

    background: #ffffff !important;

    box-shadow:
        0 4px 18px rgba(24, 52, 45, .03) !important;
}

.oh-itinerary-card-head {
    display: grid;
    grid-template-columns:
        120px minmax(0, 1fr) auto;

    align-items: center;

    gap: 18px;

    padding: 18px 20px;

    border-bottom: 1px solid #e8edeb;
}

.oh-itinerary-time {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.oh-itinerary-hour {
    color: #0d674f;

    font-size: 18px;
    font-weight: 800;
}

.oh-itinerary-category {
    color: #7a8a97;

    font-size: 11px;
    font-weight: 700;
}

.oh-itinerary-main {
    min-width: 0;
}

.oh-itinerary-main h5 {
    margin: 0;

    color: #16354b;

    font-size: 18px;
    font-weight: 800;
}

.oh-itinerary-location {
    margin-top: 5px;

    color: #718493;

    font-size: 12px;
}

.oh-itinerary-badges {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 6px;
}

.oh-itinerary-badges .badge {
    padding: 7px 9px;

    border-radius: 999px;
}

.oh-itinerary-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    padding: 16px 20px;
}

.oh-itinerary-info .form-control {
    min-height: 40px;

    margin-top: 2px;

    border-radius: 9px;
}

.oh-attendance-summary {
    color: #29475d;

    font-size: 13px;
}

.oh-attendance-summary strong {
    color: #0f6b52;

    font-size: 17px;
}

.oh-attendance-progress {
    width: 100%;
    height: 5px;

    margin-top: 9px;

    overflow: hidden;

    border-radius: 999px;

    background: #e2e8e6;
}

.oh-attendance-progress span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: #147157;
}

.oh-itinerary-instructions {
    display: flex;

    gap: 10px;

    margin: 0 20px 15px;
    padding: 12px 14px;

    border-radius: 10px;

    background: #f5f8f7;

    color: #536b79;

    font-size: 12px;
    line-height: 1.5;
}

.oh-itinerary-instructions strong {
    flex: 0 0 auto;

    color: #284a5f;
}

.oh-itinerary-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 8px;

    padding: 0 20px 18px;
}

.oh-itinerary-actions .btn {
    border-radius: 9px;

    font-weight: 700;
}


/* POINTAGE */

.oh-attendance-collapse {
    border-top: 1px solid #e7ecea;
}

.oh-attendance-panel {
    padding: 20px;

    background: #f8faf9;
}

.oh-attendance-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 16px;
}

.oh-attendance-panel-head h6 {
    margin: 0;

    color: #15354a;

    font-size: 16px;
    font-weight: 800;
}

.oh-attendance-panel-head p {
    margin: 4px 0 0;

    color: #788996;

    font-size: 12px;
}

.oh-attendance-bulk-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.oh-attendance-bulk-actions .btn {
    border-radius: 9px;

    font-weight: 700;
}

.oh-attendance-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.oh-attendance-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(150px, 190px);

    align-items: center;

    gap: 14px;

    padding: 13px 14px;

    border: 1px solid #e0e7e4;
    border-radius: 12px;

    background: #ffffff;
}

.oh-attendance-member {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}

.oh-attendance-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 11px;

    background: #edf7f3;

    color: #0f6d53;
}

.oh-attendance-member strong {
    display: block;

    overflow: hidden;

    color: #29475b;

    font-size: 13px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.oh-attendance-member span {
    display: block;

    margin-top: 2px;

    color: #81909c;

    font-size: 11px;
}

.oh-attendance-control label {
    display: block;

    margin-bottom: 4px;

    color: #7c8c98;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .06em;
    text-transform: uppercase;
}

.oh-attendance-control .form-control {
    min-height: 40px;

    border-radius: 9px;
}


/* ETAT VIDE */

.oh-ops-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 160px;

    padding: 28px;

    border: 1px dashed #d6dfdc;
    border-radius: 16px;

    background: #fafcfb;

    color: #768793;

    text-align: center;
}

.oh-ops-empty-state i {
    margin-bottom: 5px;

    color: #2a8368;

    font-size: 27px;
}

.oh-ops-empty-state strong {
    color: #29475a;

    font-size: 15px;
}

.oh-ops-empty-state span {
    max-width: 500px;

    font-size: 12px;
    line-height: 1.5;
}


/* TABLETTE */

@media (max-width: 991.98px) {

    .oh-incident-grid,
    .oh-itinerary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .oh-itinerary-card-head {
        grid-template-columns:
            100px minmax(0, 1fr);
    }

    .oh-itinerary-badges {
        grid-column: 1 / -1;

        justify-content: flex-start;
    }

    .oh-attendance-grid {
        grid-template-columns: 1fr;
    }
}


/* MOBILE */

@media (max-width: 767.98px) {

    .oh-group-program-panel .oh-ops-section-form,
    .oh-group-incident-panel .oh-ops-section-form {
        padding: 18px;
    }

    .oh-ops-section-head,
    .oh-ops-list-heading,
    .oh-program-day-head,
    .oh-incident-card-head,
    .oh-attendance-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .oh-ops-section-badge,
    .oh-ops-count,
    .oh-program-day-count {
        align-self: flex-start;
    }

    .oh-incident-grid,
    .oh-itinerary-grid {
        grid-template-columns: 1fr;
    }

    .oh-itinerary-card-head {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .oh-itinerary-badges {
        grid-column: auto;

        justify-content: flex-start;
    }

    .oh-itinerary-grid {
        padding:
            14px 16px;
    }

    .oh-itinerary-card-head {
        padding:
            16px;
    }

    .oh-itinerary-actions {
        justify-content: stretch;

        padding:
            0 16px 16px;
    }

    .oh-itinerary-actions .btn {
        flex: 1 1 100%;
    }

    .oh-incident-card-actions {
        justify-content: stretch;
    }

    .oh-incident-card-actions .btn {
        flex: 1 1 100%;
    }

    .oh-attendance-panel {
        padding: 16px;
    }

    .oh-attendance-bulk-actions {
        width: 100%;
    }

    .oh-attendance-bulk-actions .btn {
        flex: 1 1 100%;
    }

    .oh-attendance-card {
        grid-template-columns: 1fr;
    }

    .oh-ops-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .oh-ops-form-actions .btn {
        width: 100%;
    }
}

/* GROUP OPERATIONS RESOURCE CARDS V1 - END */

/* APP SELECT DESIGN SYSTEM V2 - START */

/* ==========================================================
   OUMRA-HAJJ APP
   SELECT DESIGN SYSTEM V2

   - Select natif Chrome customizable
   - Select natif fallback
   - Select2
   - Filtres
   - Formulaires
   - Modales
   - Mobile
   ========================================================== */

.oumra-hajj-app {
    --oh-select-height: 46px;
    --oh-select-radius: 12px;

    --oh-select-border: #d5e0e5;
    --oh-select-border-hover: #afc6bd;
    --oh-select-border-focus: #5f9f89;

    --oh-select-text: #17364d;
    --oh-select-muted: #84939e;

    --oh-select-green: #0c654d;
    --oh-select-green-dark: #075941;

    --oh-select-selected: #dff1e9;
    --oh-select-hover: #f0f7f4;

    --oh-select-shadow:
        0 16px 40px
        rgba(20, 52, 43, .14);
}


/* ==========================================================
   1. CHAMP SELECT FERME
   ========================================================== */

.oumra-hajj-app select.form-control:not([multiple]),
.oumra-hajj-app select.form-select:not([multiple]),
.oumra-hajj-app .oh-resource-page select:not([multiple]),
.oumra-hajj-app .oh-admin-page select.form-control:not([multiple]) {
    width: 100% !important;

    min-width: 0 !important;

    height:
        var(--oh-select-height) !important;

    min-height:
        var(--oh-select-height) !important;

    padding:
        0
        42px
        0
        14px !important;

    border:
        1px solid
        var(--oh-select-border) !important;

    border-radius:
        var(--oh-select-radius) !important;

    outline:
        0 !important;

    outline-offset:
        0 !important;

    background-color:
        #ffffff !important;

    color:
        var(--oh-select-text) !important;

    font-family:
        inherit !important;

    font-size:
        14px !important;

    font-weight:
        500 !important;

    line-height:
        1.25 !important;

    box-shadow:
        none !important;

    cursor:
        pointer;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}


.oumra-hajj-app select.form-control:not([multiple]):hover,
.oumra-hajj-app select.form-select:not([multiple]):hover,
.oumra-hajj-app .oh-resource-page select:not([multiple]):hover {
    border-color:
        var(--oh-select-border-hover) !important;
}


.oumra-hajj-app select.form-control:not([multiple]):focus,
.oumra-hajj-app select.form-select:not([multiple]):focus,
.oumra-hajj-app .oh-resource-page select:not([multiple]):focus,

.oumra-hajj-app select.form-control:not([multiple]):focus-visible,
.oumra-hajj-app select.form-select:not([multiple]):focus-visible {
    border-color:
        var(--oh-select-border-focus) !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 3px
        rgba(16, 105, 79, .09) !important;
}


/* Supprime les anciens halos dorés éventuels */

.oumra-hajj-app
.oh-resource-field:has(select:focus),

.oumra-hajj-app
.oh-filter-field:has(select:focus) {
    outline:
        0 !important;

    box-shadow:
        none !important;
}


/* Désactivé */

.oumra-hajj-app select.form-control:disabled,
.oumra-hajj-app select.form-select:disabled {
    border-color:
        #e1e7ea !important;

    background:
        #f5f7f8 !important;

    color:
        #8a98a3 !important;

    opacity:
        1 !important;

    cursor:
        not-allowed;
}


/* Petit format */

.oumra-hajj-app select.form-control.form-control-sm,
.oumra-hajj-app select.form-select.form-select-sm {
    height:
        38px !important;

    min-height:
        38px !important;

    padding-left:
        11px !important;

    border-radius:
        9px !important;

    font-size:
        13px !important;
}


/* ==========================================================
   2. OPTIONS NATIVES - FALLBACK
   ========================================================== */

.oumra-hajj-app select option,
.oumra-hajj-app select optgroup {
    background:
        #ffffff;

    color:
        var(--oh-select-text);

    font-family:
        inherit !important;

    font-size:
        14px !important;

    font-weight:
        500;

    line-height:
        1.35;
}


.oumra-hajj-app select option {
    min-height:
        40px;

    padding:
        8px 12px;
}


/* ==========================================================
   3. CUSTOMIZABLE SELECT
      Chrome / Chromium récent
   ========================================================== */

@supports (appearance: base-select) {

    .oumra-hajj-app select.form-control:not([multiple]),
    .oumra-hajj-app select.form-select:not([multiple]),
    .oumra-hajj-app .oh-resource-page select:not([multiple]) {
        appearance:
            base-select !important;

        -webkit-appearance:
            base-select !important;

        background-image:
            none !important;
    }


    /* Menu déroulant */

    .oumra-hajj-app
    select.form-control:not([multiple])::picker(select),

    .oumra-hajj-app
    select.form-select:not([multiple])::picker(select),

    .oumra-hajj-app
    .oh-resource-page
    select:not([multiple])::picker(select) {
        appearance:
            base-select;

        max-block-size:
            min(340px, 52vh);

        margin-block-start:
            6px;

        padding:
            6px;

        overflow-y:
            auto;

        overflow-x:
            hidden;

        border:
            1px solid
            #d5e2dd;

        border-radius:
            14px;

        background:
            #ffffff;

        box-shadow:
            var(--oh-select-shadow);

        color:
            var(--oh-select-text);
    }


    /* Force le popup à suivre la largeur du select */

    @supports (width: anchor-size(width)) {

        .oumra-hajj-app
        select.form-control:not([multiple])::picker(select),

        .oumra-hajj-app
        select.form-select:not([multiple])::picker(select),

        .oumra-hajj-app
        .oh-resource-page
        select:not([multiple])::picker(select) {
            inline-size:
                anchor-size(width);

            min-inline-size:
                anchor-size(width);

            max-inline-size:
                anchor-size(width);
        }

    }


    /* Options */

    .oumra-hajj-app
    select.form-control:not([multiple]) option,

    .oumra-hajj-app
    select.form-select:not([multiple]) option,

    .oumra-hajj-app
    .oh-resource-page
    select:not([multiple]) option {
        display:
            flex;

        align-items:
            center;

        gap:
            9px;

        min-height:
            40px;

        margin:
            1px 0;

        padding:
            8px 11px;

        border:
            0;

        border-radius:
            9px;

        background:
            #ffffff;

        color:
            var(--oh-select-text);

        font-size:
            14px !important;

        font-weight:
            500;

        line-height:
            1.3;

        white-space:
            normal;

        overflow-wrap:
            anywhere;
    }


    .oumra-hajj-app
    select.form-control:not([multiple]) option:hover,

    .oumra-hajj-app
    select.form-select:not([multiple]) option:hover,

    .oumra-hajj-app
    .oh-resource-page
    select:not([multiple]) option:hover {
        background:
            var(--oh-select-hover);

        color:
            var(--oh-select-green);
    }


    /* Option sélectionnée */

    .oumra-hajj-app
    select.form-control:not([multiple]) option:checked,

    .oumra-hajj-app
    select.form-select:not([multiple]) option:checked,

    .oumra-hajj-app
    .oh-resource-page
    select:not([multiple]) option:checked {
        background:
            var(--oh-select-selected);

        color:
            var(--oh-select-green-dark);

        font-weight:
            750;
    }


    /* ✓ uniforme */

    .oumra-hajj-app select option::checkmark {
        color:
            var(--oh-select-green);

        font-size:
            14px;

        font-weight:
            900;
    }


    /* Flèche */

    .oumra-hajj-app
    select.form-control:not([multiple])::picker-icon,

    .oumra-hajj-app
    select.form-select:not([multiple])::picker-icon,

    .oumra-hajj-app
    .oh-resource-page
    select:not([multiple])::picker-icon {
        color:
            #748793;

        transition:
            transform .15s ease,
            color .15s ease;
    }


    .oumra-hajj-app
    select.form-control:not([multiple]):open,

    .oumra-hajj-app
    select.form-select:not([multiple]):open,

    .oumra-hajj-app
    .oh-resource-page
    select:not([multiple]):open {
        border-color:
            var(--oh-select-border-focus) !important;

        box-shadow:
            0 0 0 3px
            rgba(16, 105, 79, .09) !important;
    }


    .oumra-hajj-app
    select.form-control:not([multiple]):open::picker-icon,

    .oumra-hajj-app
    select.form-select:not([multiple]):open::picker-icon,

    .oumra-hajj-app
    .oh-resource-page
    select:not([multiple]):open::picker-icon {
        color:
            var(--oh-select-green);

        transform:
            rotate(180deg);
    }

}


/* ==========================================================
   4. SELECT2 - CHAMP FERME
   ========================================================== */

.oumra-hajj-app .select2-container {
    width:
        100% !important;

    max-width:
        100% !important;

    color:
        var(--oh-select-text);

    font-family:
        inherit !important;

    font-size:
        14px !important;
}


.oumra-hajj-app
.select2-container--default
.select2-selection--single {
    width:
        100% !important;

    height:
        var(--oh-select-height) !important;

    min-height:
        var(--oh-select-height) !important;

    border:
        1px solid
        var(--oh-select-border) !important;

    border-radius:
        var(--oh-select-radius) !important;

    background:
        #ffffff !important;

    box-shadow:
        none !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.oumra-hajj-app
.select2-container--default
.select2-selection--single:hover {
    border-color:
        var(--oh-select-border-hover) !important;
}


.oumra-hajj-app
.select2-container--default.select2-container--focus
.select2-selection--single,

.oumra-hajj-app
.select2-container--default.select2-container--open
.select2-selection--single {
    border-color:
        var(--oh-select-border-focus) !important;

    box-shadow:
        0 0 0 3px
        rgba(16, 105, 79, .09) !important;
}


/* Valeur */

.oumra-hajj-app
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
    height:
        44px !important;

    padding:
        0
        42px
        0
        14px !important;

    color:
        var(--oh-select-text) !important;

    font-size:
        14px !important;

    font-weight:
        500 !important;

    line-height:
        44px !important;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.oumra-hajj-app
.select2-container--default
.select2-selection--single
.select2-selection__placeholder {
    color:
        var(--oh-select-muted) !important;

    font-weight:
        400 !important;
}


/* Flèche Select2 */

.oumra-hajj-app
.select2-container--default
.select2-selection--single
.select2-selection__arrow {
    top:
        0 !important;

    right:
        8px !important;

    width:
        30px !important;

    height:
        44px !important;
}


.oumra-hajj-app
.select2-container--default
.select2-selection--single
.select2-selection__arrow b {
    margin-top:
        -2px !important;

    border-color:
        #748793
        transparent
        transparent
        transparent !important;

    border-width:
        5px 4px 0 4px !important;
}


.oumra-hajj-app
.select2-container--default.select2-container--open
.select2-selection--single
.select2-selection__arrow b {
    border-color:
        transparent
        transparent
        var(--oh-select-green)
        transparent !important;

    border-width:
        0 4px 5px 4px !important;
}


/* ==========================================================
   5. SELECT2 - POPUP
   ========================================================== */

.oumra-hajj-app .select2-dropdown {
    overflow:
        hidden !important;

    border:
        1px solid
        #d5e2dd !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        var(--oh-select-shadow) !important;

    color:
        var(--oh-select-text) !important;

    font-family:
        inherit !important;

    font-size:
        14px !important;
}


.oumra-hajj-app
.select2-container--open
.select2-dropdown--below {
    margin-top:
        6px;

    border-top:
        1px solid
        #d5e2dd !important;

    border-radius:
        14px !important;
}


.oumra-hajj-app
.select2-container--open
.select2-dropdown--above {
    margin-top:
        -6px;

    border-bottom:
        1px solid
        #d5e2dd !important;

    border-radius:
        14px !important;
}


/* Recherche Select2 */

.oumra-hajj-app
.select2-container--default
.select2-search--dropdown {
    padding:
        8px !important;

    border-bottom:
        1px solid
        #edf1ef;

    background:
        #fbfcfc;
}


.oumra-hajj-app
.select2-container--default
.select2-search--dropdown
.select2-search__field {
    width:
        100% !important;

    height:
        40px !important;

    min-height:
        40px !important;

    padding:
        7px 11px !important;

    border:
        1px solid
        var(--oh-select-border) !important;

    border-radius:
        9px !important;

    outline:
        0 !important;

    background:
        #ffffff !important;

    color:
        var(--oh-select-text) !important;

    font-family:
        inherit !important;

    font-size:
        14px !important;

    font-weight:
        500;

    line-height:
        1.3 !important;

    box-shadow:
        none !important;
}


.oumra-hajj-app
.select2-container--default
.select2-search--dropdown
.select2-search__field:focus {
    border-color:
        var(--oh-select-border-focus) !important;

    box-shadow:
        0 0 0 3px
        rgba(16, 105, 79, .08) !important;
}


/* Résultats */

.oumra-hajj-app
.select2-container--default
.select2-results__options {
    max-height:
        min(340px, 52vh) !important;

    padding:
        6px !important;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;
}


.oumra-hajj-app
.select2-container--default
.select2-results__option {
    position:
        relative;

    min-height:
        40px;

    margin:
        1px 0;

    padding:
        8px 11px !important;

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        var(--oh-select-text);

    font-family:
        inherit !important;

    font-size:
        14px !important;

    font-weight:
        500;

    line-height:
        1.35 !important;

    white-space:
        normal;

    overflow-wrap:
        anywhere;
}


/* Hover */

.oumra-hajj-app
.select2-container--default
.select2-results__option--highlighted[aria-selected] {
    background:
        var(--oh-select-hover) !important;

    color:
        var(--oh-select-green) !important;
}


/* Sélection */

.oumra-hajj-app
.select2-container--default
.select2-results__option[aria-selected="true"] {
    padding-left:
        34px !important;

    background:
        var(--oh-select-selected) !important;

    color:
        var(--oh-select-green-dark) !important;

    font-weight:
        750 !important;
}


.oumra-hajj-app
.select2-container--default
.select2-results__option[aria-selected="true"]::before {
    position:
        absolute;

    top:
        50%;

    left:
        12px;

    content:
        "✓";

    transform:
        translateY(-50%);

    color:
        var(--oh-select-green);

    font-size:
        15px;

    font-weight:
        900;
}


/* Placeholder Select2 :
   on ne répète pas inutilement "Sélectionner..." dans la liste */

.oumra-hajj-app
.select2-results__options
>
.select2-results__option[aria-disabled="true"]:first-child {
    display:
        none !important;
}


/* Autres options désactivées */

.oumra-hajj-app
.select2-container--default
.select2-results__option[aria-disabled="true"] {
    color:
        #a4afb6 !important;
}


/* Aucun résultat */

.oumra-hajj-app
.select2-container--default
.select2-results__message {
    padding:
        13px !important;

    color:
        #768895 !important;

    font-size:
        13px !important;

    text-align:
        center;
}


/* ==========================================================
   6. SELECT2 MULTIPLE
   ========================================================== */

.oumra-hajj-app
.select2-container--default
.select2-selection--multiple {
    min-height:
        var(--oh-select-height) !important;

    padding:
        4px 8px !important;

    border:
        1px solid
        var(--oh-select-border) !important;

    border-radius:
        var(--oh-select-radius) !important;

    background:
        #ffffff !important;
}


.oumra-hajj-app
.select2-container--default
.select2-selection--multiple
.select2-selection__choice {
    margin:
        3px 5px 3px 0 !important;

    padding:
        5px 9px !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    background:
        var(--oh-select-selected) !important;

    color:
        var(--oh-select-green) !important;

    font-size:
        12px !important;

    font-weight:
        700;
}


/* ==========================================================
   7. Z-INDEX MODALES
   ========================================================== */

.oumra-hajj-app
.oh-app-modal
.select2-container--open,

.oumra-hajj-app
.oh-app-modal
.select2-dropdown,

.oumra-hajj-app
.select2-container--open
.select2-dropdown {
    z-index:
        2105 !important;
}


/* ==========================================================
   8. SCROLLBAR DES MENUS
   ========================================================== */

.oumra-hajj-app
.select2-results__options::-webkit-scrollbar {
    width:
        7px;
}


.oumra-hajj-app
.select2-results__options::-webkit-scrollbar-track {
    background:
        transparent;
}


.oumra-hajj-app
.select2-results__options::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        #cbd8d3;
}


/* ==========================================================
   9. MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .oumra-hajj-app {
        --oh-select-height:
            48px;
    }


    .oumra-hajj-app select.form-control:not([multiple]),
    .oumra-hajj-app select.form-select:not([multiple]),
    .oumra-hajj-app .oh-resource-page select:not([multiple]) {
        font-size:
            16px !important;
    }


    @supports (appearance: base-select) {

        .oumra-hajj-app
        select.form-control:not([multiple]) option,

        .oumra-hajj-app
        select.form-select:not([multiple]) option,

        .oumra-hajj-app
        .oh-resource-page
        select:not([multiple]) option {
            min-height:
                42px;

            padding:
                9px 11px;

            font-size:
                15px !important;
        }

    }


    .oumra-hajj-app
    .select2-container--default
    .select2-selection--single {
        height:
            48px !important;

        min-height:
            48px !important;
    }


    .oumra-hajj-app
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
        height:
            46px !important;

        font-size:
            16px !important;

        line-height:
            46px !important;
    }


    .oumra-hajj-app
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
        height:
            46px !important;
    }


    .oumra-hajj-app
    .select2-container--default
    .select2-search--dropdown
    .select2-search__field {
        font-size:
            16px !important;
    }


    .oumra-hajj-app
    .select2-container--default
    .select2-results__option {
        min-height:
            42px;

        padding:
            9px 11px !important;

        font-size:
            15px !important;
    }


    .oumra-hajj-app
    .select2-container--default
    .select2-results__option[aria-selected="true"] {
        padding-left:
            34px !important;
    }

}

/* APP SELECT DESIGN SYSTEM V2 - END */