/* =============================================================
   Hop la rentrée — brand stylesheet
   Shared across admin (employee + social_worker + volunteer)
   Palette: hoplarentree.org
   ============================================================= */

:root {
    --hop-purple: #28104c;
    --hop-purple-light: #3d2170;
    --hop-yellow: #ffd100;
    --hop-yellow-dark: #e6bd00;
    --hop-teal: #00c5ce;
    --hop-teal-dark: #00a3aa;
    --hop-coral: #ff7448;
    --hop-ink: #302d29;
    --hop-muted: #758696;
    --hop-bg: #fafafa;
    --hop-card-border: #eee;
    --hop-card-shadow: 0 1px 3px rgba(40, 16, 76, 0.04);
    --hop-card-shadow-hover: 0 6px 20px rgba(40, 16, 76, 0.10);
    --hop-hero-shadow: 0 6px 24px rgba(40, 16, 76, 0.15);
}

/* ========== Navbar ========== */
.navbar.hop-navbar {
    background: linear-gradient(90deg, var(--hop-purple) 0%, var(--hop-purple-light) 100%) !important;
    box-shadow: 0 2px 14px rgba(40, 16, 76, 0.18);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
.hop-navbar .navbar-brand {
    padding: 4px 14px;
    border-radius: 10px;
    background: #fff;
    margin-right: 22px;
    transition: transform 0.15s ease;
}
.hop-navbar .navbar-brand:hover { transform: scale(1.03); }
.hop-navbar .navbar-nav { font-size: 15px; }
.hop-navbar .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
    padding: 0.5rem 0.9rem !important;
    border-radius: 8px;
    margin: 0 2px;
    transition: background 0.15s ease, color 0.15s ease;
}
.hop-navbar .nav-link:hover,
.hop-navbar .nav-link:focus {
    color: var(--hop-yellow) !important;
    background: rgba(255, 255, 255, 0.08);
}
.hop-navbar .nav-item.show > .nav-link,
.hop-navbar .nav-link.active {
    color: var(--hop-yellow) !important;
    background: rgba(255, 255, 255, 0.12);
}
.hop-navbar .dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(40, 16, 76, 0.18);
    padding: 8px;
    margin-top: 6px;
}
.hop-navbar .dropdown-item {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--hop-purple);
}
.hop-navbar .dropdown-item:hover,
.hop-navbar .dropdown-item:focus {
    background: var(--hop-yellow);
    color: var(--hop-purple);
}
.hop-navbar .dropdown-divider { margin: 6px 4px; }
.hop-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.4); }

/* ------------------------------------------------------------------
   Adaptive navbar — staged collapse.
   As the viewport shrinks the bar sheds its content in two steps so it
   never wraps onto several rows and grows tall:
     >= 1200px (xl)        : everything inline, no toggler.
     992px – 1199px (lg)   : left menu stays inline, the right cluster
                             (zones, scanner, notifications, profile…)
                             folds behind the ☰ toggler.
     < 992px               : the left menu folds behind the ☰ too.
   Hidden groups are never removed — they drop below the bar when the
   toggler is opened, so everything stays reachable.
   ------------------------------------------------------------------ */
.hop-navbar-adaptive .hop-nav-content { flex-grow: 1; }
.hop-navbar-adaptive .hop-nav-left { flex-grow: 1; }
.hop-navbar-adaptive .hop-nav-left,
.hop-navbar-adaptive .hop-nav-right { display: flex; align-items: center; }
.hop-navbar-adaptive .hop-nav-left > ul,
.hop-navbar-adaptive .hop-nav-right > ul { margin-bottom: 0; }
/* We dropped Bootstrap's navbar-expand-* class (its single breakpoint can't do
   a two-stage collapse), so re-declare the two things it gave us for free:
   lay the menu items out in a row, and let dropdowns float over the page. */
.hop-navbar-adaptive .navbar-nav { flex-direction: row; align-items: center; }
.hop-navbar-adaptive .navbar-nav .dropdown-menu { position: absolute; }

/* < 992px : both groups fold behind the toggler */
@media (max-width: 991.98px) {
    .hop-navbar-adaptive .hop-nav-content {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        flex-basis: 100%;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
    }
    .hop-navbar-adaptive .hop-nav-content.open { display: flex; }
    .hop-navbar-adaptive .hop-nav-left,
    .hop-navbar-adaptive .hop-nav-right { align-items: flex-start; width: 100%; }
    .hop-navbar-adaptive .hop-nav-right { margin-top: 6px; }
    /* stacked, mobile-style menu inside the ☰ panel */
    .hop-navbar-adaptive .hop-nav-content .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .hop-navbar-adaptive .navbar-nav .dropdown-menu {
        position: static;
        float: none;
    }
}

/* 992px – 1199px : left menu inline, right cluster behind the toggler */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hop-navbar-adaptive .hop-nav-content {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        flex-basis: auto;
    }
    .hop-navbar-adaptive .hop-nav-right {
        display: none;
        flex-basis: 100%;
        margin-top: 6px;
    }
    .hop-navbar-adaptive .hop-nav-content.open .hop-nav-right { display: flex; }
}

/* >= 1200px : everything inline, toggler hidden */
@media (min-width: 1200px) {
    .hop-navbar-adaptive .navbar-toggler { display: none; }
    .hop-navbar-adaptive .hop-nav-content {
        display: flex !important;
        flex-flow: row nowrap;
        align-items: center;
        flex-basis: auto;
    }
    .hop-navbar-adaptive .hop-nav-right { display: flex; }
}
.hop-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.hop-navbar .badge {
    background: var(--hop-yellow);
    color: var(--hop-purple);
    font-weight: 600;
}

/* ========== Footer ========== */
.footer.hop-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 64px;
    background: linear-gradient(90deg, var(--hop-purple) 0%, var(--hop-purple-light) 100%);
    color: rgba(255, 255, 255, 0.85);
    padding: 18px 0;
    font-size: 14px;
    box-shadow: 0 -2px 14px rgba(40, 16, 76, 0.10);
}
.hop-footer .hop-footer__top {
    border-top: 3px solid var(--hop-yellow);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.hop-footer a {
    color: var(--hop-yellow);
    font-weight: 500;
    text-decoration: none;
}
.hop-footer a:hover {
    color: #fff;
    text-decoration: underline;
}
.hop-footer .hop-footer__brand {
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

/* ========== Hero ========== */
.hop-hero {
    background: linear-gradient(135deg, var(--hop-purple) 0%, var(--hop-purple-light) 100%);
    color: #fff;
    border-radius: 16px;
    padding: 26px 30px;
    margin-bottom: 24px;
    box-shadow: var(--hop-hero-shadow);
    position: relative;
    overflow: hidden;
}
.hop-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    background: var(--hop-yellow);
    opacity: 0.12;
    border-radius: 50%;
}
.hop-hero h1 {
    font-weight: 700;
    margin: 0;
    font-size: 1.7rem;
    border: none;
    padding: 0;
    color: #fff;
}
.hop-hero__subtitle {
    color: var(--hop-yellow);
    font-weight: 500;
    font-size: 0.95rem;
    margin-top: 4px;
    letter-spacing: 0.3px;
}
.hop-hero--split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.hop-hero--with-icon {
    display: flex;
    align-items: center;
    gap: 18px;
}
.hop-hero__cta { position: relative; z-index: 1; }
.hop-hero__icon,
.hop-hero__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--hop-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.hop-hero__icon svg { width: 30px; height: 30px; }
.hop-hero__avatar { font-size: 1.6rem; font-weight: 700; }

/* ========== Section / cards ========== */
.hop-section {
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px 12px;
    margin-bottom: 20px;
    border: 1px solid var(--hop-card-border);
    box-shadow: var(--hop-card-shadow);
}
.hop-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hop-purple);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 18px;
}
.hop-section__title::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 22px;
    background: var(--hop-yellow);
    border-radius: 3px;
}

.hop-form-card,
.hop-table-card,
.hop-list-card {
    background: #fff;
    border: 1px solid var(--hop-card-border);
    border-radius: 14px;
    padding: 18px 18px 12px;
    box-shadow: var(--hop-card-shadow);
}
.hop-form-card { padding: 28px 30px; margin-bottom: 20px; }

.hop-form-card .form-control,
.hop-form-card .form-select,
.hop-form-card .select2-selection {
    border-radius: 8px !important;
    border-color: #e6e0ee !important;
}
.hop-form-card .form-control:focus {
    border-color: var(--hop-purple) !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 16, 76, 0.12) !important;
}
.hop-form-card label {
    color: var(--hop-purple);
    font-weight: 600;
    font-size: 0.88rem;
}
.hop-form-card legend {
    color: var(--hop-purple);
    font-weight: 700;
    font-size: 0.95rem;
    width: auto;
    padding: 2px 12px;
    margin-bottom: 12px;
    background: var(--hop-yellow);
    border-radius: 6px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.hop-form-card fieldset.border {
    border: 1px solid #ece5f3 !important;
    border-radius: 10px;
    padding: 8px 14px !important;
    margin-top: 18px;
    background: #fdfcfe;
}
.hop-form-card .form-text {
    font-size: 0.8rem;
    color: var(--hop-muted);
}
/* Dynamic formsets (e.g. school grades / groups on /ecoles/edit) */
.hop-form-card .dynamic-form {
    background: #fafafe;
    border: 1px solid #ece5f3;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    position: relative;
}
.hop-form-card .dynamic-form .delete-row,
.hop-form-card .dynamic-form .remove-row {
    color: var(--hop-coral) !important;
    font-weight: 600;
    text-decoration: none;
}
.hop-form-card .dynamic-form .delete-row:hover,
.hop-form-card .dynamic-form .remove-row:hover {
    color: #c0392b !important;
    text-decoration: underline;
}
.hop-form-card .add-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hop-purple);
    font-weight: 600;
    font-size: 0.88rem;
    background: transparent;
    border: 1px dashed var(--hop-purple);
    border-radius: 999px;
    padding: 6px 16px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.hop-form-card .add-row:hover {
    background: #f3edfb;
    text-decoration: none;
}

.hop-form-card .intro-text {
    color: var(--hop-ink);
    font-size: 0.95rem;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #f7f4fb;
    border-left: 4px solid var(--hop-yellow);
    border-radius: 8px;
}

/* ========== Buttons ========== */
.btn-hop-yellow {
    background: var(--hop-yellow);
    color: var(--hop-purple) !important;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    padding: 11px 24px;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(255, 209, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
}
.btn-hop-yellow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 209, 0, 0.5);
    color: var(--hop-purple);
    text-decoration: none;
}

.btn-hop-purple {
    background: var(--hop-purple);
    color: #fff !important;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.12s ease;
}
.btn-hop-purple:hover {
    background: var(--hop-purple-light);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-hop-ghost {
    background: transparent;
    color: var(--hop-purple) !important;
    font-weight: 500;
    border: 1px solid #e0d8ea;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-hop-ghost:hover {
    background: #f7f4fb;
    color: var(--hop-purple);
    text-decoration: none;
}

.hop-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ========== Alerts ========== */
.hop-alert-warning {
    background: #fff8d4;
    border: 1px solid var(--hop-yellow);
    border-left: 5px solid var(--hop-yellow);
    color: var(--hop-purple);
    border-radius: 10px;
    padding: 14px 18px;
    font-weight: 500;
    margin-bottom: 20px;
}
.errornote {
    background: #fff1ee;
    border-left: 4px solid var(--hop-coral);
    color: #b9381a;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 500;
    margin-bottom: 16px;
}

/* ========== Metric cards (employee dashboard) ========== */
.hop-metric-card {
    display: block;
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 18px 18px 12px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    min-height: 130px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 2px 6px rgba(40, 16, 76, 0.08);
}
.hop-metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(40, 16, 76, 0.18);
    text-decoration: none;
    color: #fff;
}
.hop-metric-card__icon {
    position: absolute;
    right: 14px;
    top: 14px;
    font-size: 2.6rem;
    opacity: 0.22;
    line-height: 1;
}
.hop-metric-card__value { font-size: 2.1rem; font-weight: 700; line-height: 1.1; }
.hop-metric-card__title { font-size: 0.92rem; font-weight: 500; opacity: 0.95; margin-top: 4px; }
.hop-metric-card__subtitle { font-size: 0.78rem; opacity: 0.8; margin-top: 2px; }
.hop-metric-card__footer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 20px;
}
.hop-metric-card:hover .hop-metric-card__footer { background: rgba(255, 255, 255, 0.28); }

.hop-metric-card--bg-warning {
    background: linear-gradient(135deg, #ffb800 0%, var(--hop-yellow) 100%);
    color: var(--hop-purple);
}
.hop-metric-card--bg-warning:hover { color: var(--hop-purple); }
.hop-metric-card--bg-warning .hop-metric-card__footer {
    background: rgba(40, 16, 76, 0.12);
    color: var(--hop-purple);
}
.hop-metric-card--bg-info {
    background: linear-gradient(135deg, var(--hop-teal) 0%, var(--hop-teal-dark) 100%);
}
.hop-metric-card--bg-success {
    background: linear-gradient(135deg, #2bc48a 0%, #149e6a 100%);
}
.hop-metric-card--bg-primary {
    background: linear-gradient(135deg, var(--hop-purple-light) 0%, var(--hop-purple) 100%);
}
.hop-metric-card--bg-secondary {
    background: linear-gradient(135deg, #6d6478 0%, #4a4253 100%);
}
.hop-metric-card--bg-light {
    background: linear-gradient(135deg, #f4f4f4 0%, #e2e2e2 100%);
    color: var(--hop-ink);
}
.hop-metric-card--bg-light:hover { color: var(--hop-ink); }
.hop-metric-card--bg-light .hop-metric-card__footer {
    background: rgba(40, 16, 76, 0.08);
    color: var(--hop-ink);
}
.hop-metric-card--bg-light .hop-metric-card__icon { color: var(--hop-purple); }

/* ========== Document card ========== */
.doc-card {
    background: #fff;
    border: 1px solid var(--hop-card-border);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 22px;
    box-shadow: var(--hop-card-shadow);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.doc-card:hover {
    box-shadow: var(--hop-card-shadow-hover);
    transform: translateY(-2px);
}
.doc-card__icon {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--hop-yellow) 0%, #ffba00 100%);
    color: var(--hop-purple);
}
.doc-card__icon svg { width: 36px; height: 36px; }
.doc-card__icon--teal {
    background: linear-gradient(135deg, var(--hop-teal) 0%, var(--hop-teal-dark) 100%);
    color: #fff;
}
.doc-card__body { flex-grow: 1; min-width: 0; }
.doc-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--hop-purple);
    margin: 0 0 4px 0;
    word-break: break-word;
}
.doc-card__desc {
    color: var(--hop-ink);
    margin: 0 0 12px 0;
    font-size: 0.92rem;
}
.doc-card__meta {
    font-size: 0.82rem;
    color: var(--hop-muted);
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ========== Empty state ========== */
.hop-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px dashed #e0d8ea;
    border-radius: 14px;
    color: var(--hop-muted);
}
.hop-empty__icon {
    width: 56px;
    height: 56px;
    opacity: 0.4;
    color: var(--hop-purple);
    margin-bottom: 10px;
}

/* ========== Pagination ========== */
.pagination .page-link {
    color: var(--hop-purple);
    border-radius: 8px;
    margin: 0 3px;
    border: 1px solid var(--hop-card-border);
}
.pagination .page-item.active .page-link {
    background: var(--hop-purple);
    border-color: var(--hop-purple);
    color: #fff;
}
.pagination .page-link:hover {
    background: #f7f4fb;
    color: var(--hop-purple);
}

/* ========== SW view-request modal ========== */
.hop-view-modal .modal-header {
    background: linear-gradient(135deg, var(--hop-purple) 0%, var(--hop-purple-light) 100%);
    color: #fff;
    border-bottom: 3px solid var(--hop-yellow);
    border-radius: 0;
    padding: 18px 24px;
}
.hop-view-modal .modal-header .modal-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hop-view-modal .modal-header .close {
    color: #fff;
    opacity: 0.85;
    text-shadow: none;
    font-size: 1.6rem;
}
.hop-view-modal .modal-header .close:hover {
    opacity: 1;
    color: var(--hop-yellow);
}
.hop-view-modal .modal-body {
    background: #fafafa;
    padding: 22px 24px;
}
.hop-view-modal .nav-tabs {
    border-bottom: 2px solid #ece5f3;
    margin-bottom: 18px;
}
.hop-view-modal .nav-tabs .nav-link {
    border: none;
    color: var(--hop-muted);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 18px;
    border-radius: 8px 8px 0 0;
    margin-bottom: -2px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.hop-view-modal .nav-tabs .nav-link:hover {
    color: var(--hop-purple);
    background: #f7f4fb;
}
.hop-view-modal .nav-tabs .nav-link.active {
    color: var(--hop-purple);
    background: transparent;
    border-bottom: 3px solid var(--hop-yellow);
}
.hop-view-modal .nav-tabs .badge {
    background: var(--hop-yellow);
    color: var(--hop-purple);
    margin-left: 4px;
    font-weight: 700;
}

.hop-view-modal fieldset.border {
    background: #fff;
    border: 1px solid #ece5f3 !important;
    border-radius: 12px;
    padding: 16px 18px !important;
    margin-bottom: 14px;
    margin-top: 0 !important;
    box-shadow: var(--hop-card-shadow);
}
.hop-view-modal fieldset legend {
    width: auto;
    padding: 3px 12px;
    margin-bottom: 14px;
    background: var(--hop-yellow);
    color: var(--hop-purple);
    border-radius: 6px;
    display: inline-block;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hop-view-modal .form-group {
    margin-bottom: 8px;
}
.hop-view-modal .label-value {
    color: var(--hop-purple);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
    display: block;
}
.hop-view-modal .value-format {
    color: var(--hop-ink);
    font-size: 0.95rem;
    font-weight: 500;
}
.hop-view-modal .value-format a {
    color: var(--hop-purple);
    font-weight: 600;
    text-decoration: none;
}
.hop-view-modal .value-format a:hover {
    color: var(--hop-purple-light);
    text-decoration: underline;
}

.hop-view-modal .hop-status-badge {
    display: inline-block;
    background: var(--hop-yellow);
    color: var(--hop-purple);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
}

.hop-view-modal .modal-footer {
    background: #fff;
    border-top: 1px solid #ece5f3;
    padding: 14px 24px;
    gap: 10px;
}

/* Legend with inline action link (Modifier / Assigner / etc.) */
.hop-view-modal fieldset legend .legend-action {
    margin-left: 10px;
    font-size: 0.7rem;
    background: #fff;
    color: var(--hop-purple);
    padding: 2px 10px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border: 1px solid var(--hop-purple);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}
.hop-view-modal fieldset legend .legend-action:hover {
    background: var(--hop-purple);
    color: #fff;
    text-decoration: none;
}

/* Alerts inside the modal */
.hop-view-modal .hop-alert {
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-left: 4px solid;
}
.hop-view-modal .hop-alert--warning {
    background: #fff8d4;
    border-left-color: var(--hop-coral);
    color: var(--hop-ink);
}
.hop-view-modal .hop-alert--warning strong {
    color: var(--hop-coral);
}
.hop-view-modal .hop-alert a {
    color: var(--hop-purple);
    font-weight: 600;
    text-decoration: none;
}
.hop-view-modal .hop-alert a:hover {
    text-decoration: underline;
}

/* Dropzones (drawing + supplies) */
.hop-view-modal .dropzone {
    border: 2px dashed #d6cde3 !important;
    border-radius: 10px;
    background: #fafafe !important;
    cursor: pointer;
    padding: 18px 14px !important;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-height: auto !important;
}
.hop-view-modal .dropzone:hover {
    border-color: var(--hop-purple) !important;
    background: #f3edfb !important;
}
.hop-view-modal .dropzone .dz-message {
    color: var(--hop-purple) !important;
    font-weight: 600;
    font-size: 0.82rem !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 !important;
}
.hop-view-modal .dropzone .dz-message svg {
    fill: var(--hop-purple);
    margin: 0 auto 6px;
}

/* History table */
.hop-view-modal .history-table {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #ece5f3;
    box-shadow: var(--hop-card-shadow);
    margin: 14px 0;
    border-collapse: collapse;
}
.hop-view-modal .history-table thead th {
    background: #f7f4fb;
    color: var(--hop-purple);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 2px solid var(--hop-yellow);
    text-align: left;
}
.hop-view-modal .history-table tbody td {
    padding: 10px 12px;
    border-top: 1px solid #f0ecf3;
    font-size: 0.88rem;
    color: var(--hop-ink);
    vertical-align: top;
}
.hop-view-modal .history-table tbody tr:hover {
    background: #fafafe;
}

/* Inline contact card revealed by collapse */
.hop-view-modal .contact-card {
    background: #f7f4fb;
    border: 1px solid #ece5f3;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--hop-ink);
}
.hop-view-modal .contact-card a {
    color: var(--hop-purple);
}

/* "Contact ..." inline disclosure trigger */
.hop-view-modal .contact-toggle {
    color: var(--hop-purple);
    font-weight: 600;
    text-decoration: underline dotted;
    text-decoration-color: var(--hop-yellow);
    text-underline-offset: 3px;
    font-size: 0.85rem;
    cursor: pointer;
}
.hop-view-modal .contact-toggle:hover { color: var(--hop-purple-light); }

/* PDF link share row */
.hop-view-modal .pdf-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fafafe;
    border: 1px solid #ece5f3;
    border-radius: 8px;
    padding: 8px 12px;
}
.hop-view-modal .pdf-link-row input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--hop-ink);
    font-size: 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 0;
}
.hop-view-modal .pdf-link-row input:focus {
    outline: none;
}
.hop-view-modal .pdf-link-row .copy-btn {
    background: var(--hop-yellow);
    color: var(--hop-purple);
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hop-view-modal .pdf-link-row .copy-btn:hover {
    background: var(--hop-yellow-dark);
}

/* Tab warning icon (Demande spéciale) */
.hop-view-modal .nav-tabs .nav-link .tab-warn {
    color: var(--hop-coral);
    margin-left: 4px;
}

/* "Pas encore assignée" empty-ish state inside Assignation fieldset */
.hop-view-modal .assign-empty {
    background: #fff8e8;
    border: 1px dashed var(--hop-yellow);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--hop-ink);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Volunteer modal — info box (assembly / pickup address) */
.hop-view-modal .hop-info-box {
    background: #f7f4fb;
    border: 1px solid #ece5f3;
    border-left: 4px solid var(--hop-yellow);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 10px 0;
    color: var(--hop-ink);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Volunteer modal — urgent countdown ("Temps restant" < 10 days) */
.hop-view-modal .value-format--urgent {
    color: var(--hop-coral) !important;
    font-weight: 700;
}

/* Volunteer modal — drop point cards */
.hop-view-modal .drop-points-row {
    margin-top: 6px;
}
.hop-view-modal .drop-point-card {
    background: #fff;
    border: 1px solid #ece5f3;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 0.88rem;
    color: var(--hop-ink);
    height: 100%;
    box-shadow: var(--hop-card-shadow);
}
.hop-view-modal .drop-point-card a {
    color: var(--hop-purple);
    font-weight: 600;
}

/* Volunteer modal — PDF download centered card */
.hop-view-modal .pdf-download-section {
    text-align: center;
    padding: 20px 16px;
}
.hop-view-modal .pdf-download-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--hop-yellow) 0%, #ffba00 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hop-purple);
}
.hop-view-modal .pdf-download-icon svg {
    width: 32px;
    height: 32px;
}
.hop-view-modal .pdf-download-text {
    color: var(--hop-ink);
    margin: 0 0 16px 0;
    font-size: 0.95rem;
}

/* Destructive button (used in view-modals + standalone cancel modals) */
.btn-hop-danger {
    background: transparent;
    color: var(--hop-coral) !important;
    border: 1px solid var(--hop-coral);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.btn-hop-danger:hover {
    background: var(--hop-coral);
    color: #fff !important;
    text-decoration: none;
}
.hop-view-modal .btn-hop-danger {
    margin-top: 8px;
    padding: 6px 14px;
    font-size: 0.82rem;
}
.hop-view-modal .modal-footer .btn-hop-yellow,
.hop-view-modal .modal-footer .btn-hop-purple,
.hop-view-modal .modal-footer .btn-hop-ghost,
.hop-view-modal .modal-footer .btn-hop-outline-yellow {
    margin: 0;
}
.btn-hop-outline-yellow {
    background: transparent;
    color: var(--hop-purple) !important;
    font-weight: 600;
    border: 1.5px solid var(--hop-yellow);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.12s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-hop-outline-yellow:hover {
    background: var(--hop-yellow);
    color: var(--hop-purple);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ========== SW view-modal: comments tab ========== */
.hop-view-modal #comments-container {
    max-height: 480px !important;
    overflow-y: auto;
    padding: 4px 4px 8px;
    margin: 0 -4px;
    scrollbar-width: thin;
    scrollbar-color: #d6cde3 transparent;
}
.hop-view-modal #comments-container::-webkit-scrollbar { width: 8px; }
.hop-view-modal #comments-container::-webkit-scrollbar-thumb {
    background: #d6cde3;
    border-radius: 8px;
}

.hop-view-modal #comments-container > .col-12 {
    margin: 0 0 12px 0 !important;
    padding: 0;
}

.hop-view-modal .card-comment {
    border: 1px solid #ece5f3;
    border-radius: 12px;
    border-left: 4px solid var(--hop-purple);
    background: #fff;
    box-shadow: var(--hop-card-shadow);
    transition: box-shadow 0.15s ease;
}
.hop-view-modal .card-comment:hover {
    box-shadow: var(--hop-card-shadow-hover);
}
.hop-view-modal .card-comment .card-header {
    background: #f7f4fb;
    border-bottom: 1px solid #ece5f3;
    border-radius: 12px 12px 0 0;
    padding: 10px 14px;
}
.hop-view-modal .card-comment .card-header h5 {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--hop-purple);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.hop-view-modal .card-comment .card-header h5::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--hop-yellow);
    flex-shrink: 0;
    margin-right: 4px;
}
.hop-view-modal .card-comment .card-header small {
    color: var(--hop-muted) !important;
    font-weight: 500;
    font-size: 0.75rem;
}
.hop-view-modal .card-comment .card-header small i {
    color: var(--hop-coral);
    font-style: normal;
    font-weight: 600;
}
.hop-view-modal .card-comment .card-header .btn-danger {
    background: transparent !important;
    color: var(--hop-coral) !important;
    border: none !important;
    padding: 4px 8px !important;
    border-radius: 6px;
    box-shadow: none;
}
.hop-view-modal .card-comment .card-header .btn-danger:hover {
    background: #ffeae3 !important;
}
.hop-view-modal .card-comment .card-body {
    padding: 12px 14px;
}
.hop-view-modal .card-comment .card-text {
    color: var(--hop-ink);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.5;
}

/* "Internal-only" comments — visible to volunteers only */
.hop-view-modal .card-comment:has(.card-header small i) {
    border-left-color: var(--hop-coral);
    background: #fffaf7;
}
.hop-view-modal .card-comment:has(.card-header small i) .card-header {
    background: #ffeee5;
}

.hop-view-modal #new-comment {
    background: #f7f4fb;
    border: 1px solid #ece5f3;
    border-radius: 12px;
    padding: 16px !important;
    margin-top: 10px;
}
.hop-view-modal #new-comment textarea,
.hop-view-modal #new-comment .form-control {
    border-radius: 8px !important;
    border-color: #e6e0ee !important;
    font-size: 0.92rem;
}
.hop-view-modal #new-comment .form-control:focus {
    border-color: var(--hop-purple) !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 16, 76, 0.12) !important;
}
.hop-view-modal #new-comment label {
    color: var(--hop-purple);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Trigger button "Ajouter un commentaire" + submit "Ajouter" */
.hop-view-modal [data-target="#new-comment"],
.hop-view-modal #btn-add-comment {
    background: var(--hop-yellow) !important;
    color: var(--hop-purple) !important;
    font-weight: 600;
    border: none !important;
    border-radius: 999px !important;
    padding: 9px 20px !important;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(255, 209, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hop-view-modal [data-target="#new-comment"]:hover,
.hop-view-modal #btn-add-comment:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 209, 0, 0.45);
    color: var(--hop-purple) !important;
}
.hop-view-modal #btn-add-comment[disabled] {
    opacity: 0.6;
    transform: none;
}

.hop-view-modal #comments-container:empty::before,
.hop-view-modal #comments-container > .empty-state {
    content: "Aucun commentaire pour cette demande";
    display: block;
    text-align: center;
    color: var(--hop-muted);
    font-style: italic;
    padding: 30px 16px;
}

/* ========== Datatable (admin lists) ========== */
/* The `.fix-header-placeholder`/`.fixedHeader-floating` selectors target the
   cloned "docked" header (a class-only copy of the table, without the
   #table-data id). They must receive the exact same padding/border as the
   real header, otherwise the cloned columns drift out of alignment. */
#table-data.model-list thead th,
.fix-header-placeholder table.model-list thead th,
table.fixedHeader-floating.model-list thead th {
    background: #f7f4fb;
    color: var(--hop-purple);
    border-bottom: 2px solid var(--hop-yellow) !important;
    border-top: none !important;
    font-weight: 600;
    font-size: 0.85rem;
}
#table-data.model-list tbody tr:not(.selected):hover,
#table-data.model-list tbody tr:not(.selected):hover > td {
    background-color: #f0eaf7 !important;
    color: var(--hop-ink) !important;
}
#table-data.model-list tbody tr.selected,
#table-data.model-list tbody tr.selected > td {
    background-color: var(--hop-purple) !important;
    color: #fff !important;
}
#table-data.model-list tbody tr.selected:hover,
#table-data.model-list tbody tr.selected:hover > td {
    background-color: var(--hop-purple-light) !important;
    color: #fff !important;
}
.header-button-row .btn-add {
    background: var(--hop-yellow) !important;
    border-color: var(--hop-yellow) !important;
    color: var(--hop-purple) !important;
    font-weight: 600;
}
.header-button-row .btn-add:hover {
    background: var(--hop-yellow-dark) !important;
    border-color: var(--hop-yellow-dark) !important;
}
.header-button-row .btn-edit {
    background-color: var(--hop-teal) !important;
    border-color: var(--hop-teal) !important;
}

/* ========== Shared AJAX modal form (utils/base_modal_form.html) ========== */
/* Stacked modals wrap our content in an outer .modal-content.ajax-modal-content.
   Make that outer wrapper match our radius so the corners aren't white. */
.modal-content.ajax-modal-content:has(.hop-modal-form) {
    border: none !important;
    border-radius: 14px !important;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 20px 60px rgba(40, 16, 76, 0.3);
}

.hop-modal-form {
    border: none !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: none;
    background: #fff;
}
.hop-modal-form .modal-header {
    background: linear-gradient(135deg, var(--hop-purple) 0%, var(--hop-purple-light) 100%);
    color: #fff;
    border-bottom: 3px solid var(--hop-yellow);
    padding: 16px 22px;
    border-radius: 0;
}
.hop-modal-form .modal-header .modal-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.2px;
}
.hop-modal-form .modal-header .close {
    color: #fff;
    opacity: 0.85;
    text-shadow: none;
    font-size: 1.5rem;
}
.hop-modal-form .modal-header .close:hover {
    opacity: 1;
    color: var(--hop-yellow);
}

.hop-modal-form .modal-body {
    background: #fafafa;
    padding: 22px 24px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

/* Fieldsets in shared form modals (overrides the legacy inline groove border) */
.hop-modal-form fieldset {
    background: #fff !important;
    border: 1px solid #ece5f3 !important;
    border-radius: 12px !important;
    padding: 14px 18px 8px !important;
    margin: 0 0 14px 0 !important;
    box-shadow: var(--hop-card-shadow) !important;
}
.hop-modal-form legend {
    width: auto !important;
    padding: 3px 12px !important;
    margin-bottom: 12px !important;
    background: var(--hop-yellow) !important;
    color: var(--hop-purple) !important;
    border-radius: 6px !important;
    display: inline-block !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: none !important;
}

/* Labels & inputs */
.hop-modal-form label,
.hop-modal-form .col-form-label {
    color: var(--hop-purple);
    font-weight: 600;
    font-size: 0.85rem;
}
.hop-modal-form .form-control,
.hop-modal-form .select2-selection,
.hop-modal-form input[type="text"],
.hop-modal-form input[type="email"],
.hop-modal-form input[type="number"],
.hop-modal-form input[type="password"],
.hop-modal-form textarea,
.hop-modal-form select {
    border-radius: 8px !important;
    border: 1px solid #e0d8ea !important;
    font-size: 0.92rem;
}
.hop-modal-form .form-control:focus,
.hop-modal-form input:focus,
.hop-modal-form textarea:focus,
.hop-modal-form select:focus,
.hop-modal-form .select2-container--focus .select2-selection {
    border-color: var(--hop-purple) !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 16, 76, 0.12) !important;
}

/* Checkbox / radio cards — each row becomes a clickable card with the native
   checkbox kept in Bootstrap's default position (no transform tricks). */
.hop-modal-form .custom-control.custom-checkbox,
.hop-modal-form .custom-control.custom-radio,
.hop-modal-form .form-check {
    padding: 10px 14px 10px 42px;
    background: #fff;
    border: 1px solid #ece5f3;
    border-radius: 10px;
    margin-bottom: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
    min-height: auto;
}
.hop-modal-form .custom-control.custom-checkbox:hover,
.hop-modal-form .form-check:hover {
    background: #f7f4fb;
    border-color: #d6cde3;
}

/* Move Bootstrap's ::before / ::after checkbox graphics from
   left:-1.5rem (relative to label) so they sit ~14px from the card's left edge. */
.hop-modal-form .custom-control.custom-checkbox .custom-control-label::before,
.hop-modal-form .custom-control.custom-checkbox .custom-control-label::after {
    left: -28px !important;
    top: 0.15rem !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
}

.hop-modal-form .custom-control.custom-checkbox .custom-control-label,
.hop-modal-form .form-check-label {
    font-weight: 500 !important;
    font-size: 0.92rem !important;
    color: var(--hop-ink) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    display: block;
    width: 100%;
    line-height: 1.3;
    margin: 0;
}
.hop-modal-form .form-check-input {
    margin-left: -28px;
    margin-top: 0.2rem;
}
.hop-modal-form .custom-control.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.hop-modal-form .form-check-input:checked {
    background-color: var(--hop-purple) !important;
    border-color: var(--hop-purple) !important;
}
.hop-modal-form .custom-control.custom-checkbox .custom-control-input:checked ~ .custom-control-label,
.hop-modal-form .form-check-input:checked + .form-check-label {
    font-weight: 600 !important;
    color: var(--hop-purple) !important;
}
.hop-modal-form .custom-control.custom-checkbox:has(.custom-control-input:checked),
.hop-modal-form .form-check:has(.form-check-input:checked) {
    background: #f3edfb;
    border-color: var(--hop-purple);
}

/* (Zone modal is now rendered manually — no crispy col override needed.) */

/* Helper hint above the zone list */
.hop-modal-form .zone-helper {
    color: var(--hop-muted);
    font-size: 0.82rem;
    margin: 4px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* "Toutes les zones" banner (manually rendered) */
.hop-modal-form .zone-all-banner {
    background: linear-gradient(135deg, #fff8d4 0%, #fff1a8 100%);
    border: 1.5px solid var(--hop-yellow);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(255, 209, 0, 0.18);
}
.hop-modal-form .zone-all-banner__label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    font-weight: 700;
    color: var(--hop-purple);
    font-size: 1rem;
}
.hop-modal-form .zone-all-banner__input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--hop-purple);
    cursor: pointer;
    flex-shrink: 0;
}

/* Zone modal: intro block & bulk-action helpers */
.hop-modal-form .zone-modal-intro {
    background: #f7f4fb;
    border-left: 4px solid var(--hop-purple);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 14px;
}
.hop-modal-form .zone-modal-intro__title {
    color: var(--hop-purple);
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 4px 0;
}
.hop-modal-form .zone-modal-intro__desc {
    color: var(--hop-ink);
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.4;
}
.hop-modal-form .zone-modal-intro__desc strong {
    color: var(--hop-purple);
}

.hop-modal-form .zone-modal-actions {
    display: flex;
    gap: 8px;
    margin: 8px 0 4px;
    flex-wrap: wrap;
}
.hop-modal-form .zone-bulk-action {
    background: transparent;
    color: var(--hop-purple);
    border: 1px solid #e0d8ea;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.hop-modal-form .zone-bulk-action:hover {
    background: var(--hop-yellow);
    border-color: var(--hop-yellow);
}

/* Zone grid — 2-column responsive grid, full modal width */
.hop-modal-form .zone-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}
@media (max-width: 575.98px) {
    .hop-modal-form .zone-grid {
        grid-template-columns: 1fr;
    }
}
.hop-modal-form .zone-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #ece5f3;
    border-radius: 10px;
    margin: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.hop-modal-form .zone-card:hover {
    background: #f7f4fb;
    border-color: #d6cde3;
}
.hop-modal-form .zone-card__input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--hop-purple);
    cursor: pointer;
    flex-shrink: 0;
}
.hop-modal-form .zone-card__label {
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--hop-ink);
    line-height: 1.3;
}
.hop-modal-form .zone-card--selected {
    background: #f3edfb;
    border-color: var(--hop-purple);
}
.hop-modal-form .zone-card--selected .zone-card__label {
    font-weight: 600;
    color: var(--hop-purple);
}
.hop-modal-form .zone-card--disabled {
    opacity: 0.5;
    pointer-events: none;
}
.hop-modal-form .zone-error {
    color: #b9381a;
    font-size: 0.85rem;
    margin-top: 8px;
}

.hop-modal-form .modal-footer {
    background: #fff;
    border-top: 1px solid #ece5f3;
    padding: 14px 22px;
    gap: 10px;
}

/* ========== DataTables Editor modal (shared across all admin lists) ========== */
div.DTE.modal-dialog .modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(40, 16, 76, 0.3);
}
div.DTE .modal-header,
div.DTE .DTE_Header {
    background: linear-gradient(135deg, var(--hop-purple) 0%, var(--hop-purple-light) 100%);
    color: #fff;
    border-bottom: 3px solid var(--hop-yellow);
    padding: 16px 22px;
    border-radius: 0;
}
div.DTE .modal-header .modal-title,
div.DTE .DTE_Header_Content {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.2px;
}
div.DTE .modal-header .close {
    color: #fff;
    opacity: 0.85;
    text-shadow: none;
    font-size: 1.5rem;
    transition: opacity 0.15s ease, color 0.15s ease;
}
div.DTE .modal-header .close:hover {
    opacity: 1;
    color: var(--hop-yellow);
}

div.DTE .modal-body,
div.DTE .DTE_Body {
    background: #fafafa;
    padding: 20px 24px;
}

/* Fieldset groups inside the editor form */
div.DTE fieldset.border,
div.DTE .editor-fieldset-container {
    margin-top: 0 !important;
}
div.DTE fieldset.border {
    background: #fff;
    border: 1px solid #ece5f3 !important;
    border-radius: 12px;
    padding: 14px 18px 8px !important;
    margin-bottom: 14px;
    box-shadow: var(--hop-card-shadow);
}
div.DTE fieldset.border legend {
    width: auto;
    padding: 3px 12px;
    margin-bottom: 12px;
    background: var(--hop-yellow);
    color: var(--hop-purple);
    border-radius: 6px;
    display: inline-block;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Fields */
div.DTE .DTE_Field {
    padding: 6px 4px;
}
div.DTE label.col-form-label,
div.DTE .DTE_Label {
    color: var(--hop-purple);
    font-weight: 600 !important;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
div.DTE .DTE_Field_InputControl input[type="text"],
div.DTE .DTE_Field_InputControl input[type="email"],
div.DTE .DTE_Field_InputControl input[type="number"],
div.DTE .DTE_Field_InputControl input[type="password"],
div.DTE .DTE_Field_InputControl textarea,
div.DTE .DTE_Field_InputControl select,
div.DTE .form-control,
div.DTE .select2-selection {
    border-radius: 8px !important;
    border: 1px solid #e0d8ea !important;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-size: 0.92rem;
}
div.DTE .form-control:focus,
div.DTE .DTE_Field_InputControl input:focus,
div.DTE .DTE_Field_InputControl textarea:focus,
div.DTE .DTE_Field_InputControl select:focus,
div.DTE .select2-container--focus .select2-selection {
    border-color: var(--hop-purple) !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 16, 76, 0.12) !important;
    outline: none !important;
}
div.DTE .select2-container--bootstrap4 .select2-selection--single,
div.DTE .select2-container--bootstrap4 .select2-selection--multiple {
    min-height: 38px;
}
div.DTE .DTE_Field_Type_checkbox,
div.DTE .DTE_Field_Type_radio {
    padding-top: 6px;
}
div.DTE .DTE_Field_Type_checkbox label,
div.DTE .DTE_Field_Type_radio label {
    text-transform: none;
    font-weight: 500 !important;
    font-size: 0.92rem;
    letter-spacing: 0;
    color: var(--hop-ink);
    margin-right: 12px;
}

/* Field-level error */
div.DTE .DTE_Field_StateError input,
div.DTE .DTE_Field_StateError textarea,
div.DTE .DTE_Field_StateError select {
    border-color: var(--hop-coral) !important;
    box-shadow: 0 0 0 0.15rem rgba(255, 116, 72, 0.2) !important;
}
div.DTE .DTE_Field_Error,
div.DTE div.DTE_Form_Error {
    background: #fff1ee;
    color: #b9381a;
    border-left: 4px solid var(--hop-coral);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Footer buttons */
div.DTE .modal-footer,
div.DTE .DTE_Form_Buttons {
    background: #fff;
    border-top: 1px solid #ece5f3;
    padding: 14px 22px;
    gap: 10px;
}
div.DTE .DTE_Form_Buttons button,
div.DTE .modal-footer button,
div.DTE button.btn.btn-primary {
    border: none !important;
    border-radius: 999px !important;
    padding: 9px 22px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Primary action (Create / Modify / Confirm Remove) */
div.DTE .DTE_Form_Buttons button:first-of-type,
div.DTE button.btn.btn-primary {
    background: var(--hop-yellow) !important;
    color: var(--hop-purple) !important;
    box-shadow: 0 4px 12px rgba(255, 209, 0, 0.32);
}
div.DTE .DTE_Form_Buttons button:first-of-type:hover,
div.DTE button.btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 209, 0, 0.5);
    color: var(--hop-purple) !important;
}
/* Cancel / secondary */
div.DTE .DTE_Form_Buttons button.btn-default,
div.DTE .DTE_Form_Buttons button.btn-secondary,
div.DTE button.btn.btn-secondary {
    background: transparent !important;
    color: var(--hop-purple) !important;
    border: 1px solid #e0d8ea !important;
}
div.DTE .DTE_Form_Buttons button.btn-default:hover,
div.DTE button.btn.btn-secondary:hover {
    background: #f7f4fb !important;
}
/* Destructive action (Remove confirmation) */
div.DTE.DTE_Action_Remove .DTE_Form_Buttons button:first-of-type,
div.DTE .DTE_Form_Buttons button.btn-danger {
    background: var(--hop-coral) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(255, 116, 72, 0.32);
}
div.DTE.DTE_Action_Remove .DTE_Form_Buttons button:first-of-type:hover {
    background: #ff5c2a !important;
}

/* Remove confirmation body */
div.DTE.DTE_Action_Remove .DTE_Body_Content,
div.DTE .DTE_Body_Content > .row {
    padding: 8px 4px;
}
div.DTE.DTE_Action_Remove .DTE_Body_Content {
    text-align: center;
    color: var(--hop-ink);
    font-size: 1rem;
    padding: 30px 16px;
}
div.DTE.DTE_Action_Remove .DTE_Body_Content::before {
    content: "⚠";
    display: block;
    font-size: 2.5rem;
    color: var(--hop-coral);
    margin-bottom: 10px;
}

/* Processing indicator */
div.DTE div.DTE_Processing_Indicator {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
}
div.DTE div.DTE_Processing_Indicator > span {
    border-color: var(--hop-purple) transparent var(--hop-purple) transparent;
}

/* ========== SW home: branded datatable on /sw ========== */
/* Same header styling is mirrored onto the cloned docked header so the
   floating columns keep the exact same width as the real ones. */
#table-data thead th,
.fix-header-placeholder table thead th,
table.fixedHeader-floating thead th {
    background: #f7f4fb;
    color: var(--hop-purple);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.6px;
    border-bottom: 2px solid var(--hop-yellow);
    border-top: none;
    padding: 12px 10px;
    font-weight: 600;
}
.col-actions a,
.col-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f4f0f9;
    color: var(--hop-purple);
    margin-left: 6px;
    transition: background 0.15s ease, transform 0.12s ease;
    border: none;
    padding: 0;
}
.col-actions a:hover,
.col-actions button:hover {
    background: var(--hop-yellow);
    transform: translateY(-1px);
    text-decoration: none;
}
.col-actions a svg,
.col-actions button svg {
    width: 15px;
    height: 15px;
}
.row-btn-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.btn-confirmed { background: #d6f5e3 !important; }
.btn-confirmed:hover { background: #b9efce !important; }

/* DataTables Responsive: spacing for the expand "+" control on mobile */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
    padding-left: 36px !important;
    position: relative;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    top: 50% !important;
    left: 8px !important;
    margin-top: -9px !important;
    background-color: var(--hop-purple) !important;
    border-color: var(--hop-purple) !important;
    box-shadow: 0 2px 4px rgba(40, 16, 76, 0.2) !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before {
    background-color: var(--hop-coral) !important;
    border-color: var(--hop-coral) !important;
}

/* Responsive child row (when columns collapse) — render actions list cleanly */
table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom: 1px solid #f0ecf3;
    padding: 8px 0;
}
table.dataTable > tbody > tr.child .dtr-title {
    color: var(--hop-purple);
    font-weight: 600;
    min-width: 110px;
}
table.dataTable > tbody > tr.child .col-actions .row-btn-actions {
    justify-content: flex-start;
}
table.dataTable > tbody > tr.child .col-actions a,
table.dataTable > tbody > tr.child .col-actions button {
    margin-left: 0;
    margin-right: 6px;
}

/* ========== Responsive tweaks ========== */
@media (max-width: 767.98px) {
    .hop-hero { padding: 20px; }
    .hop-hero h1 { font-size: 1.4rem; }
    .hop-metric-card { min-height: 110px; padding: 14px; }
    .hop-metric-card__icon { font-size: 2rem; opacity: 0.18; }
    .hop-metric-card__value { font-size: 1.6rem; }
    .row-btn-actions { justify-content: space-between; width: 100%; }
}
@media (max-width: 576px) {
    .doc-card { flex-direction: column; align-items: flex-start; }
    .doc-card__icon { width: 56px; height: 56px; }
    .hop-form-card { padding: 20px; }
    .hop-actions .btn-hop-yellow,
    .hop-actions .btn-hop-ghost { width: 100%; justify-content: center; }
}

/* ========== Drop-off location picker (volunteer + employee) ========== */
.dropoff-picker { margin-top: .5rem; }
.dropoff-picker__search {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fafafa;
    padding-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.dropoff-picker__search-input {
    flex: 1;
    border: 2px solid #e5e1ec;
    border-radius: 999px;
    padding: .55rem 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dropoff-picker__search-input:focus {
    outline: none;
    border-color: var(--hop-purple, #28104c);
    box-shadow: 0 0 0 3px rgba(255, 209, 0, .35);
}
.dropoff-picker__count {
    font-size: .85rem;
    color: #6c6573;
    white-space: nowrap;
}
.dropoff-picker__selection-info {
    font-size: .85rem;
    color: var(--hop-purple, #28104c);
    font-weight: 600;
    margin: .25rem 0 .5rem;
}
.dropoff-picker__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .75rem;
    margin-top: .75rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: .25rem;
}
.dropoff-card {
    display: flex;
    gap: .65rem;
    background: #ffffff;
    border: 2px solid #e5e1ec;
    border-radius: 12px;
    padding: .85rem 1rem;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
    margin: 0;
    position: relative;
}
.dropoff-card:hover {
    border-color: var(--hop-yellow, #ffd100);
    box-shadow: 0 4px 12px rgba(40, 16, 76, .08);
}
.dropoff-card.is-selected {
    border-color: var(--hop-purple, #28104c);
    background: #f7f3ff;
    box-shadow: 0 4px 14px rgba(40, 16, 76, .12);
}
.dropoff-card.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.dropoff-card__radio,
.dropoff-card__check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.dropoff-card__check {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #c7bfd4;
    margin-top: 2px;
    background: #fff;
    position: relative;
    transition: border-color .15s ease, background .15s ease;
}
.dropoff-card__check--multi { border-radius: 5px; }
.dropoff-card.is-selected .dropoff-card__check {
    border-color: var(--hop-purple, #28104c);
    background: var(--hop-purple, #28104c);
}
.dropoff-card.is-selected .dropoff-card__check::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--hop-yellow, #ffd100);
    border-radius: 50%;
}
.dropoff-card.is-selected .dropoff-card__check--multi::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    border-radius: 0;
    width: 6px;
    height: 11px;
    left: 5px;
    top: 1px;
    border: solid var(--hop-yellow, #ffd100);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.dropoff-card__body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .9rem;
    color: var(--hop-ink, #302d29);
    flex: 1;
    min-width: 0;
}
.dropoff-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}
.dropoff-card__name {
    font-weight: 700;
    color: var(--hop-purple, #28104c);
    font-size: .98rem;
}
.dropoff-card__zone {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--hop-purple, #28104c);
    background: var(--hop-yellow, #ffd100);
    padding: .1rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.dropoff-card__address { color: #4a4550; line-height: 1.35; }
.dropoff-card__notes {
    font-size: .82rem;
    color: #6c6573;
    font-style: italic;
    background: #fffaf2;
    border-left: 3px solid var(--hop-yellow, #ffd100);
    padding: .35rem .55rem;
    border-radius: 4px;
    margin-top: .25rem;
    white-space: pre-wrap;
}
.dropoff-card__map {
    font-size: .82rem;
    font-weight: 600;
    color: var(--hop-purple, #28104c);
    text-decoration: underline;
    margin-top: .15rem;
}
.dropoff-card__map:hover { color: var(--hop-purple-light, #3d2170); }
.dropoff-picker__empty {
    padding: 1rem;
    text-align: center;
    color: #6c6573;
    font-style: italic;
}
@media (max-width: 575px) {
    .dropoff-picker__list { grid-template-columns: 1fr; max-height: none; }
    .dropoff-picker__search { flex-direction: column; align-items: stretch; }
}

/* Drop-off picker map */
.dropoff-picker__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0;
}
.dropoff-picker__map-status {
    font-size: .82rem;
    color: #6c6573;
    font-style: italic;
}
.dropoff-picker__map {
    height: 360px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: .75rem;
    border: 2px solid #e5e1ec;
}
.dropoff-card__distance {
    align-self: flex-start;
    font-size: .8rem;
    font-weight: 700;
    color: var(--hop-purple, #28104c);
    background: #fff6cf;
    padding: .1rem .55rem;
    border-radius: 999px;
}
.dropoff-card__distance:empty { display: none; }

/* Make picker map status more prominent */
.dropoff-picker__map-status {
    font-size: .9rem;
    font-weight: 600;
    color: var(--hop-purple, #28104c);
    background: #fff6cf;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--hop-yellow, #ffd100);
}
.dropoff-picker__map-status:empty {
    display: none;
}
.dropoff-picker__map-status.is-error {
    background: #ffeae0;
    border-color: var(--hop-coral, #ff7448);
    color: var(--hop-coral, #ff7448);
}