/* ============ PAGE LAYOUT ============ */
.vs-page {
    padding: 0 8px;
}

/* --- Header --- */
.vs-header {
    padding: 28px 0 20px;
    border-bottom: 1px solid #eef1f5;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.vs-title,
.sd-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vs-title i {
    color: #0275ae;
    font-size: 22px;
}

.vs-subtitle {
    margin: 6px 0 0;
    font-size: 14px;
    color: #777;
    padding-left: 46px;
}

.vs-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============ BUTTONS ============ */
.vs-btn {
    height: 38px;
    border: none;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.vs-btn-new,
.sp-btn-new {
    height: 38px;
    background: #0275ae;
    color: #fff;
    border: none;
    padding: 0 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vs-btn-primary:hover,
.vs-btn-new:hover,
.vs-btn-search:hover,
.vs-btn-add-rule:hover,
.sp-btn-new:hover,
.ds-search-btn:hover,
.nac-btn-save:hover,
.ngh-btn-save:hover,
.nsp-btn-save:hover,
.usd-btn-save:hover,
.ncr-btn-save:hover,
.nlo-btn-save:hover,
.ninv-btn-save:hover,
.nv-btn-save:hover,
.ilo-btn-save:hover,
.nge-btn-save:hover,
.nd-btn-save:hover,
.nev-btn-save:hover,
.nc-btn-save:hover,
.evd-btn-close:hover,
.pkd-btn-close:hover,
.tvd-btn-close:hover,
.exd-btn-export:hover,
.ige-btn-save:hover,
.corp-btn-save:hover,
.nv-btn-capture:hover,
.sdp-btn-close:hover,
.sp-btn-new-project:hover,
.ae-btn-search:hover,
.ae-btn-create:hover {
    background: #025f8e;
}

.vs-btn:disabled,
.nge-btn-save:disabled,
.nd-btn-save:disabled,
.nev-btn-save:disabled,
.nc-btn-save:disabled,
.nac-btn-save:disabled,
.ngh-btn-save:disabled,
.nsp-btn-save:disabled,
.usd-btn-save:disabled,
.ncr-btn-save:disabled,
.nlo-btn-save:disabled,
.ninv-btn-save:disabled,
.nv-btn-save:disabled,
.ilo-btn-save:disabled,
.co-btn-action:disabled,
.ige-btn-cancel:disabled,
.ige-btn-save:disabled,
.ae-btn-create:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vs-btn-excel {
    height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: #16a34a;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}


.vs-btn-excel:hover {
    background: #138a3e;
}

.vs-btn-import,
.vs-btn-ghost {
    background: #f0f2f5;
    color: #555;
}

.vs-btn-import:hover,
.vs-btn-ghost:hover {
    background: #e4e7eb;
}


/* ============ VIEW TOGGLE ============ */
.vs-view-toggle,
.sp-view-toggle {
    display: flex;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    overflow: hidden;
}

.vs-view-btn,
.sp-view-btn {
    width: 38px;
    height: 38px;
    border: none;
    background: #fff;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.vs-view-btn:not(:last-child),
.sp-view-btn:not(:last-child) {
    border-right: 1px solid #dde1e6;
}

.vs-view-btn:hover,
.sp-view-btn:hover {
    color: #0275ae;
    background: #f0f8ff;
}

.vs-view-active,
.sp-view-active {
    background: #0275ae !important;
    color: #fff !important;
}


/* ============ FILTERS ============ */
.vs-filters,
.sp-filters {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.vs-filter-group,
.sp-filter-group {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
}

.vs-filter-label,
.sp-filter-label {
    margin: 0px;
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.vs-filter-select,
.vs-filter-input,
.sp-filter-select,
.sp-filter-input {
    height: 40px;
    width: 100%;
    border: 1.5px solid #dde1e6;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    color: #333;
    background: #fafbfc;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.vs-filter-select:focus,
.vs-filter-input:focus,
.sp-filter-select:focus,
.sp-filter-input:focus {
    border-color: #0275ae;
    background: #fff;
}

.vs-filter-input::placeholder,
.sp-filter-input::placeholder {
    color: #bbb;
}

.vs-filter-buttons,
.sp-filter-buttons {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.vs-btn-search,
.vs-btn-clear {
    height: 40px;
    padding: 0 20px;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.vs-btn-search {
    background: #0275ae;
    color: #fff;
    transition: background 0.2s;
}

.vs-btn-clear {
    background: #fff;
    color: #555;
    transition: all 0.2s;
}

.vs-btn-clear:hover {
    border-color: #bbb;
    background: #f5f5f5;
}


/* ============ LOADING & EMPTY STATES ============ */
.vs-loading,
.sp-loading,
.sd-loading {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 15px;
}

.vs-loading i,
.sp-loading i,
.sd-loading i {
    color: #0275ae;
    margin-right: 6px;
}

.vs-empty,
.sp-empty,
.sd-empty {
    text-align: center;
    padding: 60px 20px;
    color: #aaa;
}

.vs-empty i,
.sp-empty i,
.sd-empty i {
    font-size: 40px;
    margin-bottom: 12px;
    display: block;
}

.vs-empty p,
.sp-empty p,
.sd-empty p {
    font-size: 15px;
    margin: 0;
}


/* ============ TABLE ============ */
.vs-table-wrap,
.sp-table-wrap {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}

.vs-table-scroll,
.sp-table-scroll {
    overflow-x: auto;
    min-width: 100%;
}

.vs-table-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    min-width: 1050px;
    background: #f5f7fa;
    border-bottom: 2px solid #e8ecf0;
}

.vs-th,
.sp-th {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 6px;
    flex: 1;
}

.vs-table-row {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    min-width: 1050px;
    border-bottom: 1px solid #f0f2f5;
    transition: background 0.15s;
}

.vs-table-row:last-child {
    border-bottom: none;
}

.vs-table-row:hover {
    background: #f8fbff;
}

.vs-td,
.sp-td {
    font-size: 14px;
    color: #1a1a2e;
    padding: 0 6px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-td-name {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vs-td-actions,
.sp-td-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}


/* ============ CHIPS & BADGES ============ */
.vs-chip,
.sp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.vs-chip-app,
.vs-chip-company,
.vs-chip-location,
.vs-badge-blue,
.kpi-blue,
.sp-chip {
    background: #e3f2fd;
    color: #0275ae;
}

.vs-chip-web,
.vs-chip-range,
.vs-chip-pending,
.vs-chip-manual,
.vs-badge-pending,
.vs-badge-in,
.vs-status-partial {
    background: #fff3e0;
    color: #e65100;
}

.vs-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.vs-badge-success,
.vs-badge-out,
.vs-chip-single,
.vs-chip-qr,
.vs-chip-delivered,
.vs-chip-validated,
.vs-badge-validated,
.vs-badge-delivered,
.vs-status-new,
.kpi-green,
.sp-badge-success {
    background: #e8f5e9;
    color: #2e7d32;
}

.vs-badge-danger,
.vs-status-pending,
.kpi-red,
.sp-badge-danger {
    background: #ffebee;
    color: #c62828;
}

/* ============ ACTION BUTTONS (row/card) ============ */
.vs-act-btn,
.sp-act-btn {
    border: none;
    background: none;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.vs-act-edit,
.vs-act-resend,
.vs-act-detail,
.vs-act-guests,
.sp-act-edit {
    color: #0275ae;
}

.vs-act-edit:hover,
.vs-act-resend:hover,
.vs-act-detail:hover,
.vs-act-guests:hover,
.sp-act-edit:hover {
    background: #e3f2fd;
}

.vs-act-reset,
.vs-act-inactive,
.vs-act-checkout {
    color: #e65100;
}

.vs-act-reset:hover,
.vs-act-inactive:hover,
.vs-act-checkout:hover {
    background: #fff3e0;
}

.vs-act-delete,
.vs-act-pdf,
.sp-act-delete {
    color: #c62828;
}

.vs-act-delete:hover,
.vs-act-pdf:hover,
.sp-act-delete:hover {
    background: #ffebee;
}

.vs-act-print,
.vs-act-copy {
    color: #6a1b9a;
}

.vs-act-print:hover,
.vs-act-copy:hover {
    background: #f3e5f5;
}


/* ============ GRID VIEW ============ */
.vs-grid,
.sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.vs-card {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.03);
    padding: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.vs-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.vs-card-badge {
    display: flex;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-items: center;
    gap: 6px;
    background: #e3f2fd;
    color: #0275ae;
}

.vs-card-banner {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vs-card-body,
.sp-card-body {
    padding: 20px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vs-card-icon,
.sp-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #f0f8ff;
    color: #0275ae;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-card-name,
.sp-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 4px;
    word-break: break-word;
}

.vs-card-email {
    font-size: 13px;
    color: #0275ae;
    margin: 0 0 8px;
    word-break: break-all;
}

.vs-card-detail {
    font-size: 12.5px;
    color: #666;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vs-card-detail i {
    color: #bbb;
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.vs-card-badges,
.sp-card-badges {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.vs-card-badges .vs-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vs-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-top: auto;
    padding-top: 14px;
}


/* ============ PAGINATION ============ */
.vs-pagination,
.sp-pagination {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

.vs-pag-section,
.sp-pag-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vs-pag-label,
.sp-pag-label {
    font-size: 13px;
    color: #777;
    font-weight: 600;
    margin: 0;
}

.vs-pag-select,
.sp-pag-select {
    height: 34px;
    border: 1px solid #dde1e6;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    background: #fafbfc;
    outline: none;
    cursor: pointer;
}

.vs-pag-input,
.sp-pag-input {
    height: 34px;
    width: 60px;
    border: 1px solid #dde1e6;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
    background: #fafbfc;
    outline: none;
    text-align: center;
}

.vs-pag-select:focus,
.vs-pag-input:focus,
.sp-pag-select:focus,
.sp-pag-input:focus {
    border-color: #0275ae;
}

.vs-pag-go,
.sp-pag-go {
    height: 34px;
    width: 34px;
    border: 1px solid #dde1e6;
    border-radius: 8px;
    background: #fff;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.vs-pag-go:hover:not(:disabled),
.sp-pag-go:hover:not(:disabled) {
    border-color: #0275ae;
    color: #0275ae;
    background: #f0f8ff;
}

.vs-pag-go:disabled,
.sp-pag-go:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.vs-pag-btn {
    width: 36px;
    height: 36px;
    border: 1.5px solid #e4e7eb;
    border-radius: 8px;
    background: #fff;
    color: #555;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-pag-btn:hover:not(:disabled) {
    border-color: #0275ae;
    color: #0275ae;
}

.vs-pag-btn:disabled {
    color: #ccc;
    cursor: default;
}

.vs-pag-nav,
.sp-pag-nav {
    border: none;
    background: none;
    color: #0275ae;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.vs-pag-nav:hover:not(:disabled),
.sp-pag-nav:hover:not(:disabled) {
    background: #e3f2fd;
}

.vs-pag-nav:disabled,
.sp-pag-nav:disabled {
    color: #ccc;
    cursor: not-allowed;
}

.vs-pag-indicator {
    font-size: 13px;
    color: #555;
    padding: 0 8px;
}


/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {

    .vs-header,
    .sp-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .vs-actions {
        flex-wrap: wrap;
    }

    .vs-filters,
    .sp-filters {
        flex-direction: column;
    }

    .vs-filter-buttons,
    .sp-filter-buttons {
        width: 100%;
    }

    .vs-grid,
    .sp-grid {
        grid-template-columns: 1fr;
    }

    .vs-pagination {
        flex-direction: column;
        align-items: flex-start;
    }

    .sp-pagination {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ============ ADDITIONAL BUTTONS ============ */
.vs-btn-primary {
    background: #0275ae;
    color: #fff;
}

.vs-btn-pdf {
    height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: #dc2626;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vs-btn-pdf:hover,
.vs-btn-delete:hover {
    background: #b91c1c;
}


/* ============ FILTERS (multi-row variant) ============ */
.vs-filters-row {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.vs-search-wrap {
    position: relative;
}

.vs-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    font-size: 13px;
}

.vs-search-input {
    padding-left: 34px;
}


/* ============ LIST VIEW (flex columns) ============ */
.vs-list-container {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    margin-bottom: 16px;
}

.vs-list-scroll {
    overflow-x: auto;
    min-width: 100%;
}

.vs-list-header,
.vs-list-row {
    display: flex;
    align-items: center;
    padding: 12px 20px;
}

.vs-list-scroll .vs-list-header,
.vs-list-scroll .vs-list-row {
    min-width: 1100px;
}

.vs-list-header {
    background: #f7f8fa;
    border-bottom: 2px solid #eef0f3;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vs-list-row {
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    color: #333;
    transition: background 0.15s;
}

.vs-list-row:hover {
    background: #f8fbff;
}

.vs-list-row:last-child {
    border-bottom: none;
}

.vs-list-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}

/* --- Column sizing --- */
.vs-col {
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-col-num {
    flex: 0 0 44px;
    text-align: center;
    color: #aaa;
    font-weight: 600;
}

.vs-col-dept {
    flex: 1.2;
}

.vs-col-name {
    flex: 1.4;
    font-weight: 600;
    color: #1a1a2e;
}

.vs-col-company {
    flex: 1.2;
}

.vs-col-subject {
    flex: 1.2;
}

.vs-col-host {
    flex: 1.3;
}

.vs-col-date {
    flex: 1.1;
    font-size: 12px;
}

.vs-col-access {
    flex: 0.9;
}

.vs-col-type {
    flex: 0 0 50px;
    text-align: center;
}

.vs-col-actions {
    flex: 0 0 60px;
    text-align: center;
}


/* ============ ADDITIONAL CHIPS & BADGES ============ */
.vs-chip-danger {
    background: #fef2f2;
    color: #dc2626;
}

.vs-badge-active {
    background: #fef2f2;
    color: #ea0c0c;
}

.vs-badge-done {
    background: #f0fdf4;
    color: #16a34a;
}


/* ============ ACTION BUTTON (icon with bg) ============ */
.vs-action-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 9px;
    background: #f0f7fc;
    color: #0275ae;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.vs-action-btn:hover {
    background: #0275ae;
    color: #fff;
}


/* ============ CARD EXTENSIONS ============ */
.vs-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.vs-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.vs-card-status.active {
    background: #e8f5e9;
    color: #2e7d32;
}

.vs-card-status.inactive {
    background: #ffebee;
    color: #c62828;
}

.vs-card-status:hover {
    opacity: 0.8;
}

.vs-card-status i {
    font-size: 10px;
}

.vs-card-divider {
    height: 1px;
    background: #f0f2f5;
    margin: 8px 0;
}

.vs-card-section-label {
    font-size: 10px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}

.vs-card-type {
    color: #bbb;
    font-size: 16px;
}

.vs-card-visitor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.vs-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f0f7fc;
    color: #0275ae;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vs-card-company {
    font-size: 12px;
    color: #888;
    margin: 2px 0 0;
}

.vs-card-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.vs-card-footer .vs-action-btn {
    width: auto;
    padding: 0 14px;
    height: 34px;
    font-size: 12px;
    font-weight: 600;
}


/* ============ PAGINATION EXTENSIONS ============ */
.vs-pag-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============ RELOAD BUTTON ============ */
.vs-btn-reload {
    height: 42px;
    width: 42px;
    background: #fff;
    color: #555;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-btn-reload:hover,
.sp-btn-reload:hover {
    border-color: #0275ae;
    color: #0275ae;
    background: #f0f8ff;
}


/* ============ LIST COLUMN HEADERS (event) ============ */
.vs-lh-name {
    flex: 1;
}

.vs-lh-date,
.vs-lh-policy {
    width: 180px;
}

.vs-lh-loc {
    width: 140px;
}

.vs-lh-guests {
    width: 100px;
    text-align: center;
}

.vs-lh-actions {
    width: 130px;
    text-align: right;
}


/* ============ LIST COLUMN CELLS (event) ============ */
.vs-lr-name {
    flex: 1;
    font-size: 14px;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-lr-date {
    width: 240px;
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vs-lr-policy {
    width: 240px;
    font-size: 13px;
}

.vs-lr-loc {
    width: 140px;
    font-size: 13px;
    color: #555;
}

.vs-lr-guests {
    width: 100px;
    display: flex;
    justify-content: center;
}

.vs-lr-actions {
    width: 130px;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}


/* ============ AVATAR ============ */
.vs-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e3f2fd;
    color: #0275ae;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* ============ POLICY & GUEST CHIPS ============ */
.vs-policy-chip {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.vs-policy-none {
    color: #bbb;
    font-size: 13px;
}

.vs-guest-count,
.vs-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f8ff;
    color: #0275ae;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.vs-guest-count i,
.vs-count-chip i {
    font-size: 12px;
}


/* ============ PAST EVENTS ============ */
.vs-row-past {
    background: #fafafa;
}

.vs-row-past:hover {
    background: #f5f5f5;
}

.vs-row-past .vs-lr-name,
.vs-row-past .vs-lr-date,
.vs-row-past .vs-lr-policy,
.vs-row-past .vs-lr-loc {
    opacity: 0.65;
}

.vs-row-past .vs-avatar {
    background: #e8e8e8;
    color: #bbb;
}

.vs-row-past .vs-policy-chip {
    background: #eee;
    color: #aaa;
}

.vs-row-past .vs-guest-count {
    background: #f0f0f0;
    color: #999;
}

.vs-past-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff3e0;
    color: #e65100;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 6px;
    opacity: 1 !important;
}

.vs-past-separator {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #f8f9fb;
    border-top: 2px solid #e0e0e0;
    border-bottom: 1px solid #eef1f5;
}

.vs-past-separator-line {
    flex: 1;
    height: 1px;
    background: #d0d4da;
}

.vs-past-separator-label {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #dde1e6;
}

.vs-past-separator-label i {
    font-size: 13px;
    color: #e65100;
}


/* ============ RESPONSIVE EXTENSIONS ============ */
@media (max-width: 768px) {
    .vs-filters-row {
        flex-direction: column;
    }

    .vs-filter-group {
        min-width: 100%;
    }

    .vs-list-header {
        display: none;
    }

    .vs-list-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .vs-lr-date,
    .vs-lr-policy,
    .vs-lr-loc,
    .vs-lr-actions {
        width: auto;
    }
}

/* ============ TABLE CELL VARIANTS ============ */
.vs-td-bold,
.sp-td-bold {
    font-weight: 600;
}

.vs-td-sub {
    font-size: 12px;
    color: #999;
    display: block;
}

/* ============ ACTION BUTTON VARIANTS ============ */
.vs-act-active {
    color: #2e7d32;
}

.vs-act-active:hover {
    background: #e8f5e9;
}


/* ============ CARD STRIPE (color top bar) ============ */
.vs-card-stripe {
    height: 5px;
    width: 100%;
}


/* ============ CARD VARIANTS (with overflow for stripe) ============ */
.vs-card--bordered {
    border: 1px solid #e8ecf0;
    overflow: hidden;
    padding: 0;
}

.vs-card--bordered .vs-card-body {
    padding: 18px 20px;
}

.vs-card--bordered .vs-card-footer {
    border-top: 1px solid #f0f2f5;
    padding: 10px 20px;
}


/* ============ CARD INFO LAYOUT ============ */
.vs-card-info {
    flex: 1;
    min-width: 0;
}

.vs-card-color-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
}

.vs-card-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.vs-card-color-text {
    font-size: 12px;
    color: #999;
    font-family: monospace;
}


/* ============ CARD STAT ============ */
.vs-card-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fafbfc;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    padding: 10px 14px;
}

.vs-card-stat-label {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}


/* ============ LIST COLUMN HEADERS (department) ============ */
.vs-lh-color {
    width: 40px;
    flex-shrink: 0;
}

.vs-lh-count,
.vs-lh-hex {
    width: 100px;
    text-align: center;
}

.vs-lh-actions {
    width: 110px;
    text-align: right;
}


/* ============ LIST COLUMN CELLS (department) ============ */
.vs-lr-color {
    width: 40px;
    flex-shrink: 0;
}

.vs-lr-swatch {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.vs-lr-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vs-lr-name i {
    font-size: 13px;
}

.vs-lr-count {
    width: 100px;
    text-align: center;
}

.vs-lr-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.vs-lr-hex {
    width: 100px;
    text-align: center;
    font-size: 12px;
    color: #999;
    font-family: monospace;
}

.vs-lr-actions {
    width: 110px;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}


/* ============ DISABLE NG-ANIMATE ON VIEW TOGGLE ============ */
.vs-grid.ng-hide-add,
.vs-grid.ng-hide-remove,
.vs-list-container.ng-hide-add,
.vs-list-container.ng-hide-remove {
    transition: none !important;
    animation: none !important;
}

.vs-grid.ng-hide,
.vs-list-container.ng-hide {
    display: none !important;
}


/* ============ RESPONSIVE (department list) ============ */
@media (max-width: 768px) {
    .vs-lr-color {
        width: auto;
    }

    .vs-lr-name {
        min-width: 100%;
    }

    .vs-lr-count,
    .vs-lr-hex {
        width: auto;
    }

    .vs-lr-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ============ GUARDHOUSE — List columns (type) ============ */
.vs-lh-type,
.vs-lr-type {
    width: 120px;
    text-align: center;
}

.vs-lr-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* ============ RESPONSIVE (guardhouse list) ============ */
@media (max-width: 768px) {

    .vs-lr-type,
    .vs-lr-actions {
        width: auto;
    }
}

/* ============ ACCESS — Policy List ============ */
.vs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.vs-policy {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s;
}

.vs-policy-expanded {
    border-color: #0275ae;
    box-shadow: 0 4px 16px rgba(2, 117, 174, 0.1);
}

.vs-policy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.15s;
}

.vs-policy-row:hover {
    background: #f8fbff;
}

.vs-policy-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.vs-expand-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
    transition: transform 0.2s;
}

.vs-policy-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f0f8ff;
    color: #0275ae;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vs-policy-info {
    min-width: 0;
}

.vs-policy-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vs-policy-count {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
    display: block;
}

.vs-policy-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ============ ACCESS — Rules Panel ============ */
.vs-rules-panel {
    border-top: 1px solid #eef1f5;
    background: #fafbfc;
    padding: 0 20px 16px 20px;
}

.vs-rules-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.vs-rules-label {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vs-rules-label i {
    color: #0275ae;
}

.vs-btn-add-rule {
    height: 34px;
    background: #0275ae;
    color: #fff;
    border: none;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vs-rules-loading {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 13px;
}

.vs-rules-loading i {
    color: #0275ae;
    margin-right: 4px;
}

.vs-rules-empty {
    text-align: center;
    padding: 24px 16px;
    color: #bbb;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.vs-rules-empty i {
    font-size: 24px;
}

/* ============ ACCESS — Rule Items ============ */
.vs-rules-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vs-rule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    transition: all 0.15s;
    gap: 10px;
}

.vs-rule-item:hover {
    border-color: #c5d5e4;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.vs-rule-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.vs-rule-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e3f2fd;
    color: #0275ae;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.vs-rule-content {
    min-width: 0;
}

.vs-rule-text {
    font-size: 14px;
    color: #1a1a2e;
    font-weight: 500;
    word-break: break-word;
}

.vs-rule-file {
    margin-top: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.vs-rule-file i {
    color: #999;
}

.vs-rule-file a {
    color: #0275ae;
    text-decoration: none;
}

.vs-rule-file a:hover {
    text-decoration: underline;
}

/* ============ RESPONSIVE (access policies) ============ */
@media (max-width: 768px) {
    .vs-policy-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .vs-policy-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .vs-rules-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============ INVITATION — Delete button ============ */
.vs-btn-delete {
    height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: #dc2626;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vs-btn-delete:disabled {
    background: #f0a0a0;
    cursor: not-allowed;
}

/* ============ INVITATION — Checkbox ============ */
.vs-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0275ae;
}

/* ============ INVITATION — Table date/time ============ */
.vs-td-date {
    display: block;
    font-size: 13px;
    color: #333;
    line-height: 1.3;
}

.vs-td-time {
    display: block;
    font-size: 12px;
    color: #999;
}

/* ============ INVITATION — Action buttons ============ */
.vs-act-whatsapp {
    color: #25d366;
}

.vs-act-whatsapp:hover {
    background: #e8f8ee;
}

/* ============ PACKAGE — Chip variants ============ */
.vs-chip-recipient {
    background: #f3e5f5;
    color: #6a1b9a;
}

/* ============ EXIT VOUCHER — Variants ============ */
.vs-chip-location {
    background: #e3f2fd;
    color: #0275ae;
}

.vs-card-desc {
    font-size: 13px;
    color: #777;
    margin: 0px;
    line-height: 1.4;
    word-break: break-word;
}

/* ============ TOOL VOUCHER — List generic cells ============ */
.vs-lh {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 6px;
}

.vs-lr {
    font-size: 14px;
    color: #1a1a2e;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-lr-bold {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ============ TOOL VOUCHER — Count chip ============ */
.vs-count-chip i {
    font-size: 11px;
}

/* ============ TOOL VOUCHER — Status chips ============ */
.vs-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.vs-status-done {
    background: #f5f5f5;
    color: #757575;
}

/* ============ GRAPH — Filter item ============ */
.vs-filter-item {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.vs-filter-wide {
    min-width: 220px;
}

/* ============ GRAPH — KPIs ============ */
.vs-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.vs-kpi {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vs-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.vs-kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.vs-kpi-info {
    display: flex;
    flex-direction: column;
}

.vs-kpi-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vs-kpi-value {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.2;
    margin-top: 2px;
}

/* ============ GRAPH — Chart Cards ============ */
.vs-charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.vs-chart-card {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 16px;
}

.vs-chart-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.vs-chart-full {
    grid-column: 1 / -1;
}

.vs-chart-head {
    padding: 16px 22px 12px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vs-chart-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vs-chart-title i {
    color: #0275ae;
    font-size: 14px;
}

.vs-chart-badge {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
}

.vs-chart-body {
    position: relative;
    height: 300px;
    width: 100%;
}

.vs-chart-tall {
    height: 500px;
}

.vs-chart-note {
    font-size: 16px;
    color: #888;
    padding: 0;
    margin: 0;
}

/* ============ RESPONSIVE (graph) ============ */
@media (max-width: 768px) {
    .vs-charts-row {
        grid-template-columns: 1fr;
    }

    .vs-kpis {
        grid-template-columns: 1fr;
    }

    .vs-filter-item {
        width: 100%;
    }
}

/* ============ ADMIN — Profile Cards ============ */
.vs-profiles {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.vs-profile {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8ecf0;
    flex: 1;
    min-width: 280px;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vs-profile:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.vs-profile-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #0275ae;
}

.vs-profile-head.master {
    color: #e6a817;
}

.vs-profile-head i {
    font-size: 14px;
}

.vs-profile-body {
    padding: 12px 18px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.vs-profile-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.vs-profile-info-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #444;
}

.vs-profile-info-item i {
    color: #999;
    font-size: 12px;
    width: 14px;
    text-align: center;
}

.vs-profile-actions {
    display: flex;
    gap: 6px;
}

.vs-profile-act {
    border: none;
    background: transparent;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #777;
    transition: all 0.2s;
}

.vs-profile-act.act-edit:hover {
    background: #e3f2fd;
    color: #0275ae;
}

.vs-profile-act.act-password:hover {
    background: #fff3e0;
    color: #e65100;
}

/* ============ ADMIN — Cards Grid ============ */
.vs-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.vs-card.is-me {
    border-color: #0275ae;
    border-width: 2px;
}

.vs-card-me-badge {
    font-size: 9px;
    font-weight: 700;
    background: #0275ae;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vs-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
}

.vs-card-row i {
    width: 14px;
    text-align: center;
    color: #999;
    font-size: 12px;
    flex-shrink: 0;
}

.vs-card-row span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vs-card-num {
    font-size: 11px;
    color: #aaa;
    margin-top: 6px;
}

/* ============ ADMIN — Card actions ============ */
.vs-card-action {
    border: none;
    background: transparent;
    border-radius: 6px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    color: #777;
}

.vs-card-action.a-edit:hover {
    background: #e3f2fd;
    color: #0275ae;
}

.vs-card-action.a-password:hover {
    background: #fff3e0;
    color: #e65100;
}

.vs-card-action.a-delete:hover {
    background: #ffebee;
    color: #c62828;
}

/* ============ DASHBOARD — Banner ============ */
.vs-banner {
    background: linear-gradient(135deg, #0275ae 0%, #025f8e 60%, #01486d 100%);
    border-radius: 16px;
    padding: 28px 30px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.vs-banner::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -5%;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    animation: vs-float-slow 8s ease-in-out infinite;
    will-change: transform;
}

.vs-banner::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: 10%;
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    animation: vs-float-slow 11s ease-in-out infinite reverse;
    will-change: transform;
}

@keyframes vs-float-slow {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(-18px) translateX(12px);
    }
}

.vs-banner-content {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.vs-banner-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
}

.vs-banner-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.vs-banner-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 2px 0 0;
    line-height: 1.2;
}

/* ============ DASHBOARD — Site Select ============ */
.vs-site-select {
    position: relative;
    display: block;
    margin-top: 8px;
    z-index: 1;
}

.vs-select {
    height: 40px;
    min-width: 260px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 0 36px 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s, background 0.2s;
}

.vs-select option {
    color: #333;
    background: #fff;
}

.vs-select:focus {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.18);
}

.vs-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    pointer-events: none;
}

/* ============ DASHBOARD — Chart Header ============ */
.vs-chart-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0f2f5;
}

.vs-chart-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0275ae, #0295d6);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vs-chart-subtitle {
    font-size: 12px;
    color: #999;
    margin: 1px 0 0;
    font-weight: 500;
}

/* ============ DASHBOARD — Section Divider ============ */
.vs-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.vs-section-bar {
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, #0275ae, #0295d6);
}

.vs-section-label {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ============ DASHBOARD — Card Info / Go ============ */
.vs-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.vs-card-go {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f4f6f8;
    color: #bbb;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s;
}

.vs-card:hover .vs-card-go {
    background: #0275ae;
    color: #fff;
}

/* ============ DASHBOARD — Icon color variants ============ */
.vs-icon-blue {
    background: #e8f4fc;
    color: #0275ae;
}

.vs-icon-indigo {
    background: #eee8fb;
    color: #5c4db1;
}

.vs-icon-teal {
    background: #e4f7f4;
    color: #0d9488;
}

.vs-icon-cyan {
    background: #e4f5fa;
    color: #0891b2;
}

.vs-icon-slate {
    background: #eef0f4;
    color: #475569;
}

.vs-icon-violet {
    background: #f0e8fb;
    color: #7c3aed;
}

.vs-icon-emerald {
    background: #e4f8ed;
    color: #059669;
}

.vs-icon-amber {
    background: #fef5e4;
    color: #d97706;
}

.vs-icon-orange {
    background: #fff0e4;
    color: #ea580c;
}

.vs-icon-red {
    background: #fde8e8;
    color: #dc2626;
}

/* ============ RESPONSIVE (dashboard) ============ */
@media (max-width: 768px) {
    .vs-banner {
        padding: 22px 20px;
        border-radius: 12px;
    }

    .vs-banner-title {
        font-size: 20px;
    }
}

/* ============ DASHBOARD — Nav Card (horizontal row) ============ */
.vs-card--nav {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
}

.vs-card--nav:hover {
    box-shadow: 0 8px 24px rgba(2, 117, 174, 0.12), 0 0 0 1px rgba(2, 117, 174, 0.1);
    text-decoration: none;
    color: inherit;
}

.vs-card--nav:active {
    transform: translateY(-1px);
}

/* ============ COMPARATIVE — Dropdown ============ */
.vs-dropdown-btn {
    height: 42px;
    width: 100%;
    border: 1px solid #dde1e6;
    border-radius: 8px;
    font-size: 14px;
    background: #fafbfc;
    padding: 0 14px;
    color: #333;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.vs-dropdown-btn:hover,
.vs-dropdown-btn:focus {
    border-color: #0275ae;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(2, 117, 174, 0.1);
    outline: none;
}

.vs-dropdown-btn i {
    color: #0275ae;
}

.vs-dropdown-btn .caret {
    margin-left: auto;
}

.vs-dropdown-menu {
    border-radius: 10px;
    border: 1px solid #e8ecf0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    max-height: 300px;
    overflow-y: auto;
    min-width: 280px;
}

.vs-check-item {
    padding: 4px 16px;
}

.vs-check-item label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    margin: 0;
    padding: 6px 0;
    white-space: nowrap;
}

.vs-check-item:hover {
    background: #f0f8ff;
}

.vs-check-all {
    background: #fafbfc;
}

/* ============ COMPARATIVE — Selected bar ============ */
.vs-selected {
    background: #f0f8ff;
    border: 1px solid #bbdefb;
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.vs-selected-label {
    font-size: 12px;
    font-weight: 700;
    color: #0275ae;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}

/* ============ REPORT — Card head ============ */
.vs-card-head {
    padding: 16px 22px 12px;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* ============ REPORT — Info Box ============ */
.vs-info-box {
    background: #f0f8ff;
    border: 1px solid #bbdefb;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.vs-info-title {
    font-size: 14px;
    font-weight: 700;
    color: #0275ae;
    margin-bottom: 6px;
}

.vs-info-text {
    margin: 0;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

.vs-code {
    background: #e3f2fd;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #0275ae;
}

.vs-note {
    color: #777;
    font-size: 13px;
    margin-bottom: 14px;
}

.vs-note i {
    color: #0275ae;
    margin-right: 4px;
}

/* ============ REPORT — Table ============ */
.vs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.vs-table thead th {
    background: #f5f7fa;
    color: #555;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 12px 14px;
    border-bottom: 2px solid #e8ecf0;
    white-space: nowrap;
}

.vs-th-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.vs-th-sortable:hover {
    color: #0275ae;
}

.vs-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f2f5;
    color: #333;
}

.vs-table tbody tr:hover {
    background: #f8fbff;
}

.vs-tfoot-row {
    background: #f0f8ff;
}

.vs-tfoot-row td {
    padding: 12px 14px;
    border-top: 2px solid #e8ecf0;
    color: #0275ae;
    font-weight: 600;
}

/* ============ REPORT — Trend ============ */
.vs-trend-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.vs-trend-value {
    min-width: 55px;
    font-weight: 600;
}

/* ============ DAILY VISIT ============ */

/* --- Search bar --- */
.vs-search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

@media (max-width: 768px) {
    .vs-search-bar {
        flex-direction: column;
    }
}


/* ============ BACK ROW & SECONDARY BUTTON ============ */
.vs-back-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vs-btn-back {
    width: 36px;
    height: 36px;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    background: #fff;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.vs-btn-back:hover {
    border-color: #0275ae;
    color: #0275ae;
    background: #f0f8ff;
}

.vs-btn-secondary {
    height: 42px;
    background: #fff;
    color: #0275ae;
    border: 1px solid #0275ae;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vs-btn-secondary:hover {
    background: #f0f8ff;
}


/* ============ STAT BAR ============ */
.vs-stat-bar {
    margin-bottom: 20px;
}

.vs-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f0f8ff;
    color: #0275ae;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.vs-stat-chip i {
    font-size: 15px;
}


/* ============ LIST COLUMNS (generic) ============ */
.vs-lh-num,
.vs-lr-num {
    width: 50px;
    text-align: center;
}

.vs-lr-num {
    font-size: 13px;
    color: #999;
    font-weight: 600;
}

.vs-lh-email,
.vs-lr-email {
    flex: 1;
}

.vs-lr-email {
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============ RESPONSIVE (event list) ============ */
@media (max-width: 768px) {
    .vs-lr-num {
        display: none;
    }

    .vs-lr-name {
        min-width: 100%;
    }

    .vs-lr-email {
        min-width: 100%;
    }
}


/* ============ USER PAGE — Breadcrumb ============ */
.back-link {
    color: #0275ae;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
}

.back-link:hover {
    color: #015a8a;
    text-decoration: none;
}

.breadcrumb-sep {
    margin: 0 8px;
    color: #ccc;
}


/* ============ USER PAGE — Type Selector ============ */
.type-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 20px 0 40px;
    max-width: 1200px;
}

.type-selector-card {
    background: #fff;
    border-radius: 16px;
    border: 2px solid #eef1f5;
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.type-selector-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #ddd;
    transition: background 0.3s;
}

.type-selector-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.type-selector-card.type-anfitrion::before {
    background: linear-gradient(135deg, #0275ae, #03a9f4);
}

.type-selector-card.type-admin::before {
    background: linear-gradient(135deg, #7b1fa2, #ab47bc);
}

.type-selector-card.type-invitado::before {
    background: linear-gradient(135deg, #00838f, #26c6da);
}

.type-selector-card.type-guardhouse::before {
    background: linear-gradient(135deg, #2e7d32, #66bb6a);
}

.type-selector-card.type-corporate::before {
    background: linear-gradient(135deg, #e65100, #ff9800);
}

.type-selector-card.type-invalid::before {
    background: linear-gradient(135deg, #757575, #bdbdbd);
}

.type-selector-card.type-anfitrion:hover {
    border-color: #0275ae;
}

.type-selector-card.type-admin:hover {
    border-color: #7b1fa2;
}

.type-selector-card.type-invitado:hover {
    border-color: #00838f;
}

.type-selector-card.type-guardhouse:hover {
    border-color: #2e7d32;
}

.type-selector-card.type-corporate:hover {
    border-color: #e65100;
}

.type-selector-card.type-invalid:hover {
    border-color: #757575;
}

.type-selector-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
    color: #555;
    transition: all 0.3s;
}

.type-selector-card.type-anfitrion .type-selector-icon {
    color: #0275ae;
    background: #e3f2fd;
}

.type-selector-card.type-admin .type-selector-icon {
    color: #7b1fa2;
    background: #f3e5f5;
}

.type-selector-card.type-invitado .type-selector-icon {
    color: #00838f;
    background: #e0f7fa;
}

.type-selector-card.type-guardhouse .type-selector-icon {
    color: #2e7d32;
    background: #e8f5e9;
}

.type-selector-card.type-corporate .type-selector-icon {
    color: #e65100;
    background: #fff3e0;
}

.type-selector-card.type-invalid .type-selector-icon {
    color: #757575;
    background: #f5f5f5;
}

.type-selector-label {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 6px;
}

.type-selector-desc {
    font-size: 13px;
    color: #999;
    margin: 0;
    line-height: 1.4;
}


/* ============ USER PAGE — Search Bar ============ */
.vs-user-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e0e4e8;
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.vs-user-search-field {
    flex: 0 0 auto;
}

.vs-user-search-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: #f0f4f8;
    border-radius: 8px;
    padding: 8px 28px 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.vs-user-search-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.vs-user-search-icon {
    position: absolute;
    left: 10px;
    color: #aaa;
    font-size: 14px;
}

.vs-user-search-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 12px 8px 32px;
    font-size: 14px;
    color: #333;
    outline: none;
}

.vs-user-search-input::placeholder {
    color: #bbb;
}

.vs-user-btn-search {
    border: none;
    background: #0275ae;
    color: #fff;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.vs-user-btn-search:hover {
    background: #015a8a;
}

.vs-user-btn-search:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.vs-user-btn-clear {
    border: none;
    background: #f0f0f0;
    color: #888;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.vs-user-btn-clear:hover {
    background: #e0e0e0;
    color: #555;
}


/* ============ USER PAGE — Type Badges ============ */
.vs-type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vs-type-badge.type-anfitrion {
    background: #e3f2fd;
    color: #0275ae;
}

.vs-type-badge.type-admin {
    background: #f3e5f5;
    color: #7b1fa2;
}

.vs-type-badge.type-invitado {
    background: #e0f7fa;
    color: #00838f;
}

.vs-type-badge.type-guardhouse {
    background: #e8f5e9;
    color: #2e7d32;
}

.vs-type-badge.type-corporate {
    background: #fff3e0;
    color: #e65100;
}

.vs-type-badge.type-invalid {
    background: #f5f5f5;
    color: #757575;
}


/* ============ USER PAGE — Card type hover borders ============ */
.vs-card.type-anfitrion:hover {
    border-color: #0275ae;
}

.vs-card.type-admin:hover {
    border-color: #7b1fa2;
}

.vs-card.type-invitado:hover {
    border-color: #00838f;
}

.vs-card.type-guardhouse:hover {
    border-color: #2e7d32;
}

.vs-card.type-corporate:hover {
    border-color: #e65100;
}

.vs-card.type-invalid:hover {
    border-color: #757575;
}


/* ============ USER PAGE — Detail Link ============ */
.vs-detail-link {
    font-size: 12px;
    font-weight: 600;
    color: #0275ae;
    transition: color 0.2s;
}

.vs-card:hover .vs-detail-link {
    color: #015a8a;
}


/* ============ USER PAGE — Detail Modal ============ */
.user-detail-modal .modal-header {
    border-bottom: none;
    padding: 0;
}

.user-detail-modal-header {
    position: relative;
    padding: 24px 24px 16px !important;
    border-bottom: none !important;
}

.user-detail-modal-header .close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 24px;
    opacity: 0.6;
    transition: opacity 0.2s;
    z-index: 2;
}

.user-detail-modal-header .close:hover {
    opacity: 1;
}

.user-detail-modal-type-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.user-detail-modal-type-badge.type-anfitrion {
    background: #e3f2fd;
    color: #0275ae;
}

.user-detail-modal-type-badge.type-admin {
    background: #f3e5f5;
    color: #7b1fa2;
}

.user-detail-modal-type-badge.type-invitado {
    background: #e0f7fa;
    color: #00838f;
}

.user-detail-modal-type-badge.type-guardhouse {
    background: #e8f5e9;
    color: #2e7d32;
}

.user-detail-modal-type-badge.type-corporate {
    background: #fff3e0;
    color: #e65100;
}

.user-detail-modal-type-badge.type-invalid {
    background: #f5f5f5;
    color: #757575;
}

.user-detail-modal-body {
    padding: 0 24px 24px;
}

.user-detail-section {
    margin-bottom: 24px;
}

.user-detail-section:last-child {
    margin-bottom: 0;
}

.user-detail-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f2f5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-detail-section-title i {
    color: #0275ae;
    font-size: 14px;
}

.user-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.user-detail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-detail-field label {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.user-detail-field span {
    font-size: 14px;
    color: #333;
    word-break: break-all;
}

.user-detail-type-inline {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.user-detail-type-inline.type-anfitrion {
    background: #e3f2fd;
    color: #0275ae;
}

.user-detail-type-inline.type-admin {
    background: #f3e5f5;
    color: #7b1fa2;
}

.user-detail-type-inline.type-invitado {
    background: #e0f7fa;
    color: #00838f;
}

.user-detail-type-inline.type-guardhouse {
    background: #e8f5e9;
    color: #2e7d32;
}

.user-detail-type-inline.type-corporate {
    background: #fff3e0;
    color: #e65100;
}

.user-detail-type-inline.type-invalid {
    background: #f5f5f5;
    color: #757575;
}

.user-detail-loading {
    text-align: center;
    padding: 16px 0;
    color: #888;
    font-size: 13px;
}

.user-detail-empty {
    text-align: center;
    padding: 16px 0;
    color: #bbb;
    font-size: 13px;
}

.user-detail-location-card {
    background: #f9fbfc;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.user-detail-location-card:last-child {
    margin-bottom: 0;
}

.user-detail-loc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 13px;
}

.user-detail-loc-row:last-child {
    margin-bottom: 0;
}

.user-detail-loc-row label {
    font-weight: 600;
    color: #777;
    margin: 0;
    min-width: 100px;
    font-size: 12px;
}

.user-detail-loc-row span {
    color: #333;
}

.user-detail-modal-footer {
    border-top: 1px solid #f0f2f5;
    padding: 14px 24px;
    text-align: right;
}

.user-detail-close-btn {
    background: #f0f4f8;
    color: #555;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.user-detail-close-btn:hover {
    background: #e0e4e8;
    color: #333;
}

.user-detail-sub-list {
    padding: 6px 0 4px 16px;
}

.user-detail-sub-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #333;
    padding: 5px 0;
    border-bottom: 1px solid #f0f2f5;
}

.user-detail-sub-item:last-child {
    border-bottom: none;
}

.user-detail-sub-item i {
    color: #0275ae;
    font-size: 12px;
    flex-shrink: 0;
}

/* ============ LOGIN PAGE BG & CARD ============ */
.lg-page-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    background: radial-gradient(circle at center, #eef2f6 0%, #d8e3ee 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding: 40px 20px;
    box-sizing: border-box;
}

.lg-card-box {
    display: flex;
    width: 100%;
    max-width: 1000px;
    min-height: 650px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(2, 117, 174, 0.15);
    overflow: hidden;
    position: relative;
}

/* ===================== LEFT PANEL ===================== */
.lg-left {
    width: 45%;
    position: relative;
    background: linear-gradient(145deg, #0988c4 0%, #0275ae 50%, #015a8a 100%);
    /* Visita Segura Blue */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    box-sizing: border-box;
    z-index: 1;
    overflow: hidden;
    /* Prevent bubbles bleeding into the right side and covering text */
}

/* Bubbles implementation */
.bubble {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(8px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.05), inset 2px 2px 5px rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.bubble-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
}

.bubble-2 {
    width: 250px;
    height: 250px;
    bottom: -50px;
    left: -80px;
}

.bubble-3 {
    width: 150px;
    height: 150px;
    bottom: 70px;
    right: -30px;
}

.lg-left-content {
    position: relative;
    z-index: 2;
    text-align: left;
    width: 100%;
    max-width: 320px;
}

.lg-brand-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.lg-brand-name {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 5px 0 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.1;
}

.lg-brand-divider {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
    margin-bottom: 25px;
}

.lg-brand-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
}

.lg-brand-icon {
    width: 130px;
    height: 130px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lg-brand-logo {
    height: 100px;
    width: auto;
}

/* Left footer */
.lg-left-footer {
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
    z-index: 2;
    text-align: center;
}

.lg-left-footer p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.lg-left-footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 600;
}

.lg-left-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ===================== RIGHT PANEL ===================== */
.lg-right {
    flex: 1;
    background: #fdfdfd;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.bubble-4 {
    position: absolute;
    width: 180px;
    height: 180px;
    bottom: -60px;
    right: -60px;
    border-radius: 50%;
    background: rgba(2, 117, 174, 0.05);
    /* very subtle blue */
    z-index: 0;
}

.lg-right-scroll {
    width: 100%;
    max-width: 440px;
    max-height: 100vh;
    overflow-y: auto;
    padding: 4px;
    position: relative;
    z-index: 3;
}

/* --- Sections --- */
.lg-section {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.lg-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.lg-section-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.lg-icon-admin {
    background: linear-gradient(135deg, #0275ae, #025f8e);
    color: #fff;
}

.lg-icon-user {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
}

.lg-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.3;
}

.lg-section-subtitle {
    font-size: 13px;
    color: #888;
    margin: 3px 0 0;
}

/* --- Form --- */
.lg-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lg-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lg-field-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

.lg-input-relative {
    position: relative;
    display: flex;
    align-items: center;
}

.lg-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #bbb;
    z-index: 1;
    pointer-events: none;
}

.lg-input {
    width: 100%;
    height: 48px;
    border: 1.5px solid #dde1e6;
    border-radius: 10px;
    padding: 0 44px 0 40px;
    font-size: 14px;
    color: #1a1a2e;
    background: #fafbfc;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.lg-input::placeholder {
    color: #bbb;
}

.lg-input:focus {
    border-color: #0275ae;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(2, 117, 174, 0.08);
}

.lg-eye-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 15px;
    color: #bbb;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.lg-eye-btn:hover {
    color: #0275ae;
}

/* --- Phone Input --- */
.lg-phone-wrap {
    width: 100%;
}

.lg-phone-wrap .intl-tel-input {
    width: 100%;
}

.lg-phone-wrap input.lg-phone-input,
.lg-phone-wrap input[type="tel"] {
    width: 100% !important;
    height: 48px !important;
    border: 1.5px solid #dde1e6 !important;
    border-radius: 10px !important;
    padding: 0 14px 0 52px !important;
    font-size: 14px !important;
    color: #1a1a2e !important;
    background: #fafbfc !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.lg-phone-wrap input:focus {
    border-color: #0275ae !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(2, 117, 174, 0.08) !important;
}

.lg-phone-wrap .intl-tel-input .flag-container {
    left: 0;
}

.lg-phone-wrap .intl-tel-input .selected-flag {
    border-radius: 10px 0 0 10px;
    height: 100%;
    padding: 0 8px 0 12px;
}

.lg-phone-wrap .intl-tel-input .country-list {
    border-radius: 10px;
    border: 1px solid #e8ecf0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    max-height: 200px;
}

/* Phone confirmed chip */
.lg-phone-confirmed {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #e3f2fd;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0275ae;
}

.lg-phone-confirmed i:first-child {
    font-size: 14px;
}

.lg-phone-confirmed span {
    flex: 1;
}

.lg-change-phone {
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: #0275ae;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}

.lg-change-phone:hover {
    background: rgba(2, 117, 174, 0.1);
}

/* --- Error --- */
.lg-error {
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #dc2626;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lg-error i {
    flex-shrink: 0;
}

/* --- Buttons --- */
.lg-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.2px;
}

.lg-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.lg-btn-primary {
    background: linear-gradient(135deg, #0275ae, #025f8e);
    color: #fff;
}

.lg-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #025f8e, #024a70);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 117, 174, 0.3);
}

.lg-btn-secondary {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
}

.lg-btn-secondary:hover:not(:disabled) {
    background: linear-gradient(135deg, #15803d, #166534);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

/* --- Divider --- */
.lg-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
}

.lg-divider::before,
.lg-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #dde1e6;
}

.lg-divider span {
    font-size: 13px;
    font-weight: 700;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Mobile footer --- */
.lg-mobile-footer {
    display: none;
    text-align: center;
    padding-top: 24px;
}

.lg-mobile-footer p {
    font-size: 12px;
    color: #999;
    margin: 0;
}

.lg-mobile-footer a {
    color: #0275ae;
    text-decoration: none;
    font-weight: 600;
}

.lg-mobile-footer a:hover {
    text-decoration: underline;
}

.lg-heart {
    color: #dc2626;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
    .lg-page-bg {
        padding: 20px 10px;
    }

    .lg-card-box {
        flex-direction: column;
        min-height: auto;
    }

    .lg-left {
        width: 100%;
        min-height: auto;
        padding: 48px 24px 40px;
        overflow: hidden;
        text-align: center;
    }

    .lg-left-content {
        align-items: center;
        text-align: center;
    }

    .lg-brand-divider {
        margin-left: auto;
        margin-right: auto;
    }

    .bubble-1 {
        width: 300px;
        height: 300px;
        top: -50px;
        right: -50px;
    }

    .bubble-3 {
        bottom: -50px;
        right: 20px;
    }

    .lg-brand-name {
        font-size: 28px;
    }

    .lg-brand-icon {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        margin-bottom: 20px;
    }

    .lg-brand-logo {
        height: 48px;
    }

    .lg-left-footer {
        display: none;
    }

    .lg-right {
        width: 100%;
        padding: 30px 20px;
        min-height: auto;
    }

    .bubble-4 {
        width: 140px;
        height: 140px;
        bottom: -40px;
        right: -40px;
    }

    .lg-right-scroll {
        max-height: none;
    }

    .lg-mobile-footer {
        display: block;
    }
}

@media (max-width: 480px) {
    .lg-left {
        padding: 36px 20px 30px;
    }

    .lg-brand-title {
        font-size: 14px;
    }

    .lg-brand-name {
        font-size: 24px;
    }

    .lg-brand-desc {
        font-size: 13px;
    }

    .lg-section {
        padding: 20px 18px;
        border-radius: 14px;
    }

    .lg-section-header {
        flex-direction: column;
        text-align: center;
    }

    .lg-section-icon {
        margin: 0 auto;
    }

    .lg-section-title {
        text-align: center;
        font-size: 15px;
    }

    .lg-section-subtitle {
        text-align: center;
    }
}


/* =====================================================
   SHARED MODAL STYLES — Consolidated base classes
   ===================================================== */

/* --- Modal Shell (font-family) --- */
.nac-modal,
.ngh-modal,
.nsp-modal,
.usd-modal,
.ncr-modal,
.nlo-modal,
.ninv-modal,
.nv-modal,
.co-modal,
.ilo-modal {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Type A: Header (24px padding) --- */
.nac-header,
.ngh-header,
.nsp-header,
.usd-header,
.ncr-header,
.nlo-header,
.ninv-header,
.nv-header,
.co-header,
.ilo-header,
.evd-header,
.exd-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid #eef1f5;
}

/* --- Type A: Header Icon (44px, blue gradient) --- */
.nac-header-icon,
.ngh-header-icon,
.nsp-header-icon,
.usd-header-icon,
.ncr-header-icon,
.nlo-header-icon,
.ninv-header-icon,
.nv-header-icon,
.ilo-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0275ae 0%, #025f8e 100%);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Header Title (18px) --- */
.nac-header-title,
.ngh-header-title,
.nsp-header-title,
.usd-header-title,
.ncr-header-title,
.nlo-header-title,
.ninv-header-title,
.nv-header-title,
.co-header-title,
.ilo-header-title,
.evd-header-title,
.exd-header-title,
.vd-header-title,
.pkd-header-title,
.tvd-header-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

/* --- Type A: Body (24px padding, 65vh) --- */
.ngh-body,
.nsp-body,
.ncr-body,
.nlo-body,
.ninv-body,
.ilo-body,
.co-body {
    padding: 20px 24px;
    max-height: 65vh;
    overflow-y: auto;
}

/* --- Type A: Footer --- */
.co-footer,
.nac-footer,
.ngh-footer,
.nsp-footer,
.usd-footer,
.ncr-footer,
.nlo-footer,
.ninv-footer,
.nv-footer,
.ilo-footer {
    padding: 16px 24px;
    border-top: 1px solid #eef1f5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* --- Type A: Button Cancel --- */
.co-btn-cancel,
.nac-btn-cancel,
.ngh-btn-cancel,
.nsp-btn-cancel,
.usd-btn-cancel,
.ncr-btn-cancel,
.nlo-btn-cancel,
.ninv-btn-cancel,
.nv-btn-cancel,
.ilo-btn-cancel {
    height: 40px;
    padding: 0 20px;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    background: #fff;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.nac-btn-cancel:hover,
.ngh-btn-cancel:hover,
.nsp-btn-cancel:hover,
.usd-btn-cancel:hover,
.ncr-btn-cancel:hover,
.nlo-btn-cancel:hover,
.ninv-btn-cancel:hover,
.nv-btn-cancel:hover,
.ilo-btn-cancel:hover,
.co-btn-cancel:hover {
    border-color: #bbb;
    background: #f5f5f5;
}

/* --- Type A: Button Save --- */
.nac-btn-save,
.ngh-btn-save,
.nsp-btn-save,
.usd-btn-save,
.ncr-btn-save,
.nlo-btn-save,
.ninv-btn-save,
.nv-btn-save,
.ilo-btn-save {
    height: 40px;
    padding: 0 24px;
    border: none;
    border-radius: 10px;
    background: #0275ae;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Type A: Input (42px, 1.5px border) --- */
.ngh-input,
.nsp-input,
.usd-input,
.ncr-input,
.nlo-input,
.ninv-input,
.nv-input {
    width: 100%;
    height: 42px;
    border: 1.5px solid #dde1e6;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    color: #333;
    background: #fafbfc;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.ngh-input:focus,
.nsp-input:focus,
.usd-input:focus,
.ncr-input:focus,
.nlo-input:focus,
.ninv-input:focus,
.nv-input:focus {
    border-color: #0275ae;
    box-shadow: 0 0 0 3px rgba(2, 117, 174, 0.1);
    background: #fff;
}

.ngh-input::placeholder,
.nsp-input::placeholder,
.usd-input::placeholder,
.ncr-input::placeholder,
.nlo-input::placeholder,
.ninv-input::placeholder,
.nv-input::placeholder {
    color: #bbb;
}

.ngh-input:disabled,
.ncr-input:disabled,
.nlo-input:disabled,
.nv-input:disabled,
.ngh-select:disabled,
.ncr-select:disabled,
.nlo-select:disabled,
.nv-select:disabled {
    background: #f0f2f5;
    color: #999;
    cursor: not-allowed;
}

/* --- Type A: Section (margin-bottom 22px) --- */
.ngh-section,
.nsp-section,
.ncr-section,
.nlo-section,
.ninv-section {
    margin-bottom: 22px;
}

.ngh-section:last-child,
.nsp-section:last-child,
.ncr-section:last-child,
.nlo-section:last-child,
.ninv-section:last-child {
    margin-bottom: 0;
}

/* --- Section Header (icon + label) --- */
.ngh-section-header,
.ncr-section-header,
.nlo-section-header,
.ninv-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ngh-section-icon,
.ncr-section-icon,
.nlo-section-icon,
.ninv-section-icon {
    color: #0275ae;
    font-size: 15px;
}

/* --- Section Label --- */
.ngh-section-label,
.nsp-section-label,
.usd-section-label,
.ncr-section-label,
.nlo-section-label,
.ninv-section-label {
    font-size: 13px;
    font-weight: 700;
    color: #444;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
}

.ngh-section-header .ngh-section-label,
.ncr-section-header .ncr-section-label,
.nlo-section-header .nlo-section-label,
.ninv-section-header .ninv-section-label {
    margin-bottom: 0;
}

/* --- Required marker --- */
.ngh-required,
.nsp-required,
.usd-required,
.ncr-required,
.nlo-required,
.ninv-required,
.nv-required {
    color: #e53935;
    font-weight: 700;
}

/* --- Row (flex, gap 14px) --- */
.nsp-row,
.ncr-row,
.nlo-row,
.ninv-row {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
}

/* --- Row Top --- */
.ncr-row-top,
.ninv-row-top {
    align-items: flex-start;
}

/* --- Field (flex: 1) --- */
.nsp-field,
.ncr-field,
.nlo-field,
.ninv-field {
    flex: 1;
}

/* --- Select --- */
.nsp-select,
.ncr-select,
.nlo-select,
.ninv-select {
    cursor: pointer;
    appearance: auto;
}

/* --- Radio Pills --- */
.ngh-radio-group,
.ncr-radio-group,
.nlo-radio-group,
.ninv-radio-group {
    display: flex;
    gap: 10px;
}

/* ncr/ninv radio-group margin-bottom overrides */
.ncr-radio-group {
    margin-bottom: 14px;
}

.ninv-radio-group {
    margin-bottom: 10px;
}

.ngh-radio-pill,
.ncr-radio-pill,
.nlo-radio-pill,
.ninv-radio-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid #dde1e6;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    background: #fafbfc;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.ngh-radio-pill input[type="radio"],
.ncr-radio-pill input[type="radio"],
.nlo-radio-pill input[type="radio"],
.ninv-radio-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ngh-radio-pill:hover,
.ncr-radio-pill:hover,
.nlo-radio-pill:hover,
.ninv-radio-pill:hover {
    border-color: #0275ae;
    color: #0275ae;
    background: #f0f8ff;
}

.ngh-radio-active,
.ncr-radio-active,
.nlo-radio-active,
.ninv-radio-active {
    border-color: #0275ae !important;
    background: #e3f2fd !important;
    color: #0275ae !important;
}

/* --- Options Grid / Checkboxes --- */
.ngh-options-grid,
.ncr-options-grid,
.nlo-options-grid,
.ninv-options-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ngh-option-row,
.ncr-option-row,
.nlo-option-row,
.ninv-option-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #fafbfc;
    border-radius: 10px;
    border: 1px solid #eef1f5;
    transition: all 0.15s;
}

.ngh-option-row:hover,
.ncr-option-row:hover,
.nlo-option-row:hover,
.ninv-option-row:hover {
    background: #f0f8ff;
    border-color: #d0e8f5;
}

/* ngh-option-row needs extra justify-content */
.ngh-option-row {
    justify-content: space-between;
}

.ngh-check-label,
.ncr-check-label,
.nlo-check-label,
.ninv-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    position: relative;
    margin: 0;
    font-weight: 500;
}

.ngh-check,
.ncr-check,
.nlo-check,
.ninv-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ngh-check-custom,
.ncr-check-custom,
.nlo-check-custom,
.ninv-check-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    background: #fff;
}

.ngh-check:checked+.ngh-check-custom,
.ncr-check:checked+.ncr-check-custom,
.nlo-check:checked+.nlo-check-custom,
.ninv-check:checked+.ninv-check-custom {
    background: #0275ae;
    border-color: #0275ae;
}

.ngh-check:checked+.ngh-check-custom::after,
.ncr-check:checked+.ncr-check-custom::after,
.nlo-check:checked+.nlo-check-custom::after,
.ninv-check:checked+.ninv-check-custom::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 11px;
    color: #fff;
}

/* --- Day Chips (shared base) --- */
.ncr-days-grid,
.ninv-days-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ncr-day-chip input[type="checkbox"],
.ninv-day-chip input[type="checkbox"] {
    display: none;
}

.ncr-day-chip:hover,
.ninv-day-chip:hover {
    border-color: #0275ae;
    color: #0275ae;
    background: #f0f8ff;
}

/* --- Type B: Header (28px padding) --- */
.nge-modal-header,
.nd-modal-header,
.nev-modal-header,
.nc-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px 18px;
    border-bottom: 1px solid #f0f2f5;
}

/* --- Type B: Header Icon (48px) --- */
.nge-header-icon,
.nd-header-icon,
.nev-header-icon,
.nc-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0275ae, #0288d1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

/* --- Type B: Header Title (20px) --- */
.nge-header-title,
.nd-header-title,
.nev-header-title,
.nc-header-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
}

/* --- Type B: Header Subtitle --- */
.nge-header-sub,
.nd-header-sub,
.nev-header-sub,
.nc-header-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: #888;
}

/* --- Type B: Body --- */
.nge-modal-body,
.nd-modal-body,
.nev-modal-body,
.nc-modal-body {
    padding: 20px 28px 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* --- Type B: Section --- */
.nge-section,
.nd-section,
.nev-section,
.nc-section {
    background: #fafbfc;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 20px;
}

/* --- Type B: Field Group --- */
.nge-field-group,
.nd-field-group,
.nev-field-group,
.nc-field-group {
    margin-bottom: 14px;
}

.nge-field-group:last-child,
.nd-field-group:last-child,
.nev-field-group:last-child,
.nc-field-group:last-child {
    margin-bottom: 0;
}

/* --- Type B: Label --- */
.nge-label,
.nd-label,
.nev-label,
.nc-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

/* --- Type B: Required --- */
.nge-req,
.nd-req,
.nev-req {
    color: #c62828;
    font-weight: 700;
}

/* --- Type B: Input --- */
.nge-input,
.nd-input,
.nev-input,
.nc-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #dde1e6;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    box-sizing: border-box;
}

.nge-input:focus,
.nd-input:focus,
.nev-input:focus,
.nc-input:focus {
    border-color: #0275ae;
    box-shadow: 0 0 0 3px rgba(2, 117, 174, 0.1);
}

.nge-input::placeholder,
.nd-input::placeholder,
.nev-input::placeholder,
.nc-input::placeholder {
    color: #bbb;
}

/* --- Type B: Footer --- */
.nge-modal-footer,
.nd-modal-footer,
.nev-modal-footer,
.nc-modal-footer {
    padding: 16px 28px;
    border-top: 1px solid #f0f2f5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* --- Type B: Button Cancel --- */
.nge-btn-cancel,
.nd-btn-cancel,
.nev-btn-cancel,
.nc-btn-cancel {
    border: 1px solid #ddd;
    background: #fff;
    color: #555;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.nge-btn-cancel:hover,
.nd-btn-cancel:hover,
.nev-btn-cancel:hover,
.nc-btn-cancel:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

/* --- Type B: Button Save --- */
.nge-btn-save,
.nd-btn-save,
.nev-btn-save,
.nc-btn-save {
    border: none;
    background: #0275ae;
    color: #fff;
    border-radius: 10px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Detail Modal Shell (flex column, 85vh) --- */
.evd-modal,
.exd-modal,
.pkd-modal,
.tvd-modal {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

/* --- Detail Header Icon (44px, gradient) --- */
.evd-header-icon,
.exd-header-icon,
.pkd-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0275ae, #025f8e);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Detail Body (flex: 1) --- */
.evd-body,
.exd-body,
.pkd-body,
.tvd-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

/* --- Detail Info Grid --- */
.evd-info-grid,
.pkd-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.evd-info-item,
.pkd-info-item,
.tvd-info-item {
    background: #fafbfc;
    border: 1px solid #e8ecf0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.evd-info-label,
.pkd-info-label,
.tvd-info-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.evd-info-label i,
.pkd-info-label i,
.tvd-info-label i {
    color: #0275ae;
    font-size: 12px;
}

.evd-info-value,
.pkd-info-value,
.tvd-info-value {
    font-size: 14px;
    color: #1a1a2e;
    font-weight: 500;
}

.evd-info-bold,
.pkd-info-bold,
.tvd-info-bold {
    font-weight: 700;
}

/* --- Detail Section Title --- */
.evd-section-title,
.pkd-section-title,
.tvd-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1f5;
}

.evd-section-title i,
.pkd-section-title i,
.tvd-section-title i {
    color: #0275ae;
}

/* --- Detail Photos Grid --- */
.evd-photos-grid,
.pkd-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.evd-photo-card,
.pkd-photo-card {
    border: 1px solid #e8ecf0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.evd-photo-card:hover,
.pkd-photo-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.evd-photo-label,
.pkd-photo-label {
    display: block;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #f5f7fa;
    border-bottom: 1px solid #e8ecf0;
}

.evd-photo-img,
.pkd-photo-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: opacity 0.2s;
}

.evd-photo-img:hover,
.pkd-photo-img:hover {
    opacity: 0.85;
}

/* --- Detail No Photos --- */
.evd-no-photos,
.pkd-no-photos {
    text-align: center;
    padding: 40px 20px;
    color: #aaa;
}

.evd-no-photos i,
.pkd-no-photos i {
    font-size: 36px;
    margin-bottom: 10px;
    display: block;
}

.evd-no-photos p,
.pkd-no-photos p {
    font-size: 14px;
    margin: 0;
}

/* --- Detail Footer (close button) --- */
.evd-footer,
.pkd-footer,
.tvd-footer {
    padding: 16px 24px;
    border-top: 1px solid #eef1f5;
    display: flex;
    justify-content: flex-end;
}

.evd-btn-close,
.pkd-btn-close,
.tvd-btn-close {
    height: 42px;
    padding: 0 28px;
    border: none;
    border-radius: 10px;
    background: #0275ae;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}



/* --- Detail Loading --- */
.evd-loading,
.tvd-loading {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}

.evd-loading i,
.tvd-loading i {
    color: #0275ae;
    margin-right: 6px;
}

/* --- Responsive: Type A rows/radio --- */
@media (max-width: 600px) {

    .nsp-row,
    .ncr-row,
    .nlo-row,
    .ninv-row {
        flex-direction: column;
    }

    .ngh-radio-group,
    .ncr-radio-group,
    .nlo-radio-group,
    .ninv-radio-group {
        flex-direction: column;
    }
}

@media (max-width: 500px) {
    .ngh-creds-row {
        flex-direction: column;
    }
}


.co-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.co-icon-out {
    background: linear-gradient(135deg, #e65100 0%, #bf360c 100%);
    color: #fff;
}

.co-icon-done {
    background: linear-gradient(135deg, #0275ae 0%, #025f8e 100%);
    color: #fff;
}


/* --- Photos Grid --- */
.co-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.co-photo-card {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.co-photo-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.co-photo-label {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.co-photo-label i {
    color: #0275ae;
    font-size: 13px;
}

.co-photo-card img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

/* --- Info Card --- */
.co-info-card {
    background: #f9fafb;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    padding: 20px;
    overflow: hidden;
}

.co-info-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef1f5;
}

.co-info-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f0f8ff;
    color: #0275ae;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.co-info-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.co-info-name {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 2px 0 0;
}

.co-info-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.co-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #555;
}

.co-detail i {
    color: #0275ae;
    width: 16px;
    text-align: center;
    font-size: 13px;
}

.co-detail b {
    color: #333;
    margin-right: 4px;
}

.co-chip-danger {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: #ffebee;
    color: #c62828;
}


.co-btn-action {
    height: 40px;
    padding: 0 24px;
    border: none;
    border-radius: 10px;
    background: #e65100;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.co-btn-action:hover {
    background: #bf360c;
}

@media (max-width: 500px) {
    .co-photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============ EXIT VOUCHER DETAIL MODAL ============ */


/* Info Grid */


/* Chips */
.evd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.evd-chip-location {
    background: #e3f2fd;
    color: #0275ae;
}

/* Loading */


/* No Photos */


/* Photos Section */


@media (max-width: 768px) {
    .evd-info-grid {
        grid-template-columns: 1fr;
    }

    .evd-info-item[style*="grid-column"] {
        grid-column: span 1 !important;
    }

    .evd-photos-grid {
        grid-template-columns: 1fr;
    }
}

/* ============ EXPORT DATA MODAL ============ */


/* Loading & Empty */
.exd-loading {
    text-align: center;
    padding: 50px 20px;
    color: #999;
    font-size: 15px;
}

.exd-loading i {
    color: #0275ae;
    margin-right: 6px;
}

.exd-empty {
    text-align: center;
    padding: 50px 20px;
    color: #aaa;
}

.exd-empty i {
    font-size: 40px;
    margin-bottom: 12px;
    display: block;
}

.exd-empty p {
    font-size: 15px;
    margin: 0;
}

/* Count */
.exd-count {
    font-size: 13px;
    color: #777;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.exd-count i {
    color: #0275ae;
}

/* Table */
.exd-table-wrap {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    overflow: hidden;
}

.exd-table-scroll {
    overflow-x: auto;
    min-width: 100%;
}

.exd-table-header {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    min-width: 1100px;
    background: #f5f7fa;
    border-bottom: 2px solid #e8ecf0;
}

.exd-th {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 6px;
}

.exd-table-row {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    min-width: 1100px;
    border-bottom: 1px solid #f0f2f5;
    transition: background 0.15s;
}

.exd-table-row:last-child {
    border-bottom: none;
}

.exd-table-row:hover {
    background: #f8fbff;
}

.exd-td {
    font-size: 13px;
    color: #1a1a2e;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exd-td-bold {
    font-weight: 600;
}

.exd-td-date {
    font-size: 12px;
    color: #333;
}

/* Chips */
.exd-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.exd-chip-company {
    background: #e3f2fd;
    color: #0275ae;
}

.exd-chip-yes {
    background: #e8f5e9;
    color: #2e7d32;
}

.exd-chip-no {
    background: #f5f5f5;
    color: #999;
}

/* --- Footer --- */
.exd-footer {
    padding: 16px 24px;
    border-top: 1px solid #eef1f5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.exd-btn-cancel {
    height: 42px;
    padding: 0 22px;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    background: #fff;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.exd-btn-cancel:hover {
    border-color: #bbb;
    background: #f5f5f5;
}

.exd-btn-export {
    height: 42px;
    padding: 0 24px;
    border: none;
    border-radius: 10px;
    background: #0275ae;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exd-btn-export:disabled {
    background: #b0d4ec;
    cursor: not-allowed;
}

/* ============ IMPORT GUESTS MODAL ============ */

/* --- Header --- */
.ige-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px 18px;
    border-bottom: 1px solid #f0f2f5;
}

.ige-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0275ae, #0288d1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

.ige-header-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
}

.ige-header-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: #888;
}

/* --- Body --- */
.ige-modal-body {
    padding: 20px 28px 10px;
}

.ige-section {
    background: #fafbfc;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.ige-section:last-child {
    margin-bottom: 0;
}

.ige-description {
    font-size: 13px;
    color: #666;
    margin: 0 0 16px;
    line-height: 1.5;
}

/* --- Processing --- */
.ige-processing {
    text-align: center;
    padding: 50px 20px;
}

.ige-processing i {
    font-size: 36px;
    color: #0275ae;
}

.ige-processing p {
    margin: 16px 0 0;
    color: #666;
    font-size: 14px;
}

/* --- File Drop --- */
.ige-file-hidden {
    display: none !important;
}

.ige-file-drop {
    border: 2px dashed #d0d7de;
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ige-file-drop:hover {
    border-color: #0275ae;
    background: #f0f8ff;
}

.ige-file-drop i {
    font-size: 28px;
    color: #0275ae;
}

.ige-file-drop span {
    font-size: 14px;
    font-weight: 500;
    color: #555;
}

.ige-file-drop small {
    font-size: 12px;
    color: #aaa;
}

.ige-template-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 13px;
    color: #0275ae;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.ige-template-link:hover {
    color: #025f8e;
    text-decoration: underline;
}

.ige-template-link i {
    color: #2e7d32;
}

/* --- Table Section --- */
.ige-table-section {
    padding: 0;
    overflow: hidden;
}

.ige-table-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #eef1f5;
}

.ige-table-label {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ige-table-label i {
    color: #0275ae;
}

.ige-table-count {
    font-size: 12px;
    font-weight: 600;
    color: #0275ae;
    background: #e3f2fd;
    padding: 4px 12px;
    border-radius: 20px;
}

.ige-list-wrap {
    max-height: 280px;
    overflow-y: auto;
}

.ige-list-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: #f5f7fa;
    border-bottom: 2px solid #e8ecf0;
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ige-lh-name {
    flex: 1;
}

.ige-lh-email {
    flex: 1;
}

.ige-lh-actions {
    width: 60px;
    text-align: right;
}

.ige-list-empty {
    text-align: center;
    padding: 30px 20px;
    color: #bbb;
}

.ige-list-empty i {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

.ige-list-empty p {
    font-size: 13px;
    margin: 0;
}

.ige-list-row {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #f0f2f5;
    transition: background 0.15s;
}

.ige-list-row:last-child {
    border-bottom: none;
}

.ige-list-row:hover {
    background: #f8fbff;
}

.ige-lr-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ige-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e3f2fd;
    color: #0275ae;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ige-lr-email {
    flex: 1;
    font-size: 13px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ige-lr-actions {
    width: 60px;
    display: flex;
    justify-content: flex-end;
}

.ige-action-btn {
    border: none;
    background: none;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #c62828;
    cursor: pointer;
    transition: all 0.2s;
}

.ige-action-btn:hover {
    background: #ffebee;
}

/* --- Footer --- */
.ige-modal-footer {
    padding: 16px 28px;
    border-top: 1px solid #f0f2f5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ige-btn-cancel {
    border: 1px solid #ddd;
    background: #fff;
    color: #555;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ige-btn-cancel:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.ige-btn-save {
    border: none;
    background: #0275ae;
    color: #fff;
    border-radius: 10px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}



/* ============ IMPORT LOCATIONS MODAL ============ */


/* --- Upload Section --- */
.ilo-upload-section {
    margin-bottom: 22px;
}

.ilo-desc {
    font-size: 14px;
    color: #555;
    margin: 0 0 14px;
    line-height: 1.6;
}

.ilo-desc b {
    color: #333;
}

.ilo-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    border: 2px dashed #cdd5de;
    border-radius: 14px;
    background: #fafbfc;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.ilo-dropzone:hover {
    border-color: #0275ae;
    background: #f0f8ff;
}

.ilo-file-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.ilo-dropzone-icon {
    font-size: 32px;
    color: #0275ae;
    margin-bottom: 10px;
}

.ilo-dropzone-text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.ilo-dropzone-hint {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.ilo-template-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #16a34a;
    text-decoration: none;
    transition: color 0.2s;
}

.ilo-template-link:hover {
    color: #138a3e;
    text-decoration: underline;
}

.ilo-template-link i {
    font-size: 15px;
}

/* --- Progress --- */
.ilo-progress {
    text-align: center;
    padding: 30px 0;
}

.ilo-progress-spinner {
    font-size: 32px;
    color: #0275ae;
}

.ilo-progress-text {
    font-size: 15px;
    color: #555;
    margin: 12px 0 4px;
}

.ilo-progress-count {
    font-size: 13px;
    color: #999;
    margin: 0 0 12px;
}

.ilo-progress-bar {
    width: 60%;
    margin: 0 auto;
    background: #eef1f5;
    border-radius: 8px;
    height: 8px;
    overflow: hidden;
}

.ilo-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0275ae, #0295d6);
    border-radius: 8px;
    transition: width 0.3s;
}

/* --- Table Section --- */
.ilo-table-section {
    margin-bottom: 20px;
}

.ilo-section-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ilo-section-success {
    color: #2e7d32;
}

.ilo-section-warning {
    color: #e65100;
}

.ilo-table-wrap {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 12px;
    overflow: hidden;
}

.ilo-table-warning {
    border-left: 3px solid #e65100;
}

.ilo-table-scroll {
    overflow-x: auto;
}

.ilo-table-header {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: #f5f7fa;
    border-bottom: 2px solid #e8ecf0;
    min-width: 800px;
}

.ilo-header-warning {
    background: #fff8f0;
}

.ilo-th {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 6px;
    flex: 1;
}

.ilo-table-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f2f5;
    transition: background 0.15s;
    min-width: 800px;
}

.ilo-table-row:last-child {
    border-bottom: none;
}

.ilo-table-row:hover {
    background: #f8fbff;
}

.ilo-td {
    font-size: 13px;
    color: #1a1a2e;
    padding: 0 6px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chips */
.ilo-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.ilo-chip-app {
    background: #e3f2fd;
    color: #0275ae;
}

.ilo-chip-web {
    background: #fff3e0;
    color: #e65100;
}

/* Delete button */
.ilo-act-delete {
    border: none;
    background: none;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px;
    color: #c62828;
    cursor: pointer;
    transition: all 0.2s;
}

.ilo-act-delete:hover {
    background: #ffebee;
}

/* Country code bar */
.ilo-country-code-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: #f0f8ff;
    border: 1px solid #d0e3f1;
    border-radius: 10px;
}

.ilo-cc-label {
    font-size: 13px;
    font-weight: 600;
    color: #0275ae;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    margin: 0;
}

.ilo-cc-hint {
    font-size: 12px;
    color: #888;
    font-style: italic;
}

/* Country code input */
.ilo-code-input {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    text-align: center;
    background: #fff;
    transition: border-color 0.2s;
}

.ilo-code-input:focus {
    border-color: #0275ae;
    outline: none;
}

.ilo-code-input:disabled {
    background: #f5f5f5;
    color: #bbb;
    border-color: #e8ecf0;
}

/* --- Empty --- */
.ilo-empty {
    text-align: center;
    padding: 40px 20px;
    color: #aaa;
}

.ilo-empty i {
    font-size: 36px;
    margin-bottom: 10px;
    display: block;
}

.ilo-empty p {
    font-size: 14px;
    margin: 0;
}


@media (max-width: 500px) {
    .ilo-dropzone {
        padding: 24px 16px;
    }

    .ilo-progress-bar {
        width: 80%;
    }
}

/* =============================================
   NEW ACCESS POLICY MODAL  (nac-*)
   ============================================= */


/* --- Body --- */
.nac-body {
    padding: 24px;
}

.nac-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nac-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

.nac-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.nac-input:focus {
    outline: none;
    border-color: #0275ae;
    box-shadow: 0 0 0 3px rgba(2, 117, 174, 0.12);
}


/* =====================================================
   newGuestEvent MODAL
   ===================================================== */

/* =====================================================
   newDepartment MODAL
   ===================================================== */

/* =====================================================
   newEvent MODAL
   ===================================================== */

/* =====================================================
   newCompany MODAL
   ===================================================== */

/* =====================================================
   newCorpUser MODAL
   ===================================================== */

/* =====================================================
   visitDetail MODAL
   ===================================================== */

/* =====================================================
   packageDetail MODAL
   ===================================================== */

/* =====================================================
   toolVoucherDetail MODAL
   ===================================================== */

/* =====================================================
   newGuestEvent MODAL
   ===================================================== */
/* ============ NEW GUEST EVENT MODAL ============ */


/* =====================================================
   newDepartment MODAL
   ===================================================== */
/* ============ NEW DEPARTMENT MODAL ============ */


.nd-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.nd-col {
    flex: 1;
    min-width: 180px;
}

.nd-col-color {
    max-width: 200px;
}


/* --- Color Picker --- */
.nd-color-picker-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #dde1e6;
    border-radius: 8px;
    padding: 6px 14px 6px 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.nd-color-picker-wrap:hover {
    border-color: #0275ae;
}

.nd-color-input {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    background: none;
}

.nd-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.nd-color-input::-webkit-color-swatch {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.nd-color-label {
    font-size: 13px;
    color: #777;
    font-family: monospace;
}

/* --- Preview --- */
.nd-preview {
    margin-top: 8px;
}

.nd-preview-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}

.nd-preview-card {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.nd-preview-stripe {
    width: 6px;
    flex-shrink: 0;
}

.nd-preview-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 12px;
}

.nd-preview-swatch {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.nd-preview-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
}


/* =====================================================
   newEvent MODAL
   ===================================================== */
/* ============ NEW EVENT MODAL ============ */


.nev-section:last-child {
    margin-bottom: 0;
}

.nev-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nev-section-title i {
    color: #0275ae;
    font-size: 14px;
}

.nev-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.nev-col {
    flex: 1;
    min-width: 140px;
}

.nev-col-toggle {
    display: flex;
    align-items: flex-end;
    min-width: 140px;
}


.nev-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #dde1e6;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.nev-select:focus {
    border-color: #0275ae;
    box-shadow: 0 0 0 3px rgba(2, 117, 174, 0.1);
}

/* --- Multi-day toggle --- */
.nev-multiday-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
}

.nev-multiday-toggle input[type="checkbox"] {
    display: none;
}

.nev-switch {
    position: relative;
    width: 40px;
    height: 22px;
    background: #ccc;
    border-radius: 12px;
    transition: background 0.25s;
    flex-shrink: 0;
}

.nev-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.nev-multiday-toggle input:checked+.nev-switch {
    background: #0275ae;
}

.nev-multiday-toggle input:checked+.nev-switch::after {
    transform: translateX(18px);
}

.nev-toggle-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

/* --- Radio list --- */
.nev-radio-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nev-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: #333;
}

.nev-radio-item:hover {
    border-color: #0275ae;
    background: #f0f8ff;
}

.nev-radio-item input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #0275ae;
    cursor: pointer;
    margin: 0;
}

.nev-radio-mark {
    display: none;
}

.nev-radio-text {
    font-weight: 500;
}

/* --- Checkbox list --- */
.nev-check-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nev-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: #333;
}

.nev-check-item:hover {
    border-color: #0275ae;
    background: #f0f8ff;
}

.nev-check-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #0275ae;
    cursor: pointer;
    margin: 0;
}

.nev-check-mark {
    display: none;
}

.nev-check-text {
    font-weight: 500;
}

/* --- Inline states --- */
.nev-loading-inline {
    font-size: 13px;
    color: #999;
    padding: 8px 0;
}

.nev-loading-inline i {
    color: #0275ae;
    margin-right: 4px;
}

.nev-empty-inline {
    font-size: 13px;
    color: #aaa;
    padding: 8px 0;
}


/* =====================================================
   newCompany MODAL
   ===================================================== */
/* ============ NEW COMPANY MODAL ============ */


/* --- Validation Banner --- */
.nc-validation-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 13px;
    color: #e65100;
}

.nc-validation-banner i {
    margin-top: 2px;
    font-size: 16px;
    flex-shrink: 0;
}


.nc-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #0275ae;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nc-section-title i {
    font-size: 15px;
}

/* --- Rows & Cols --- */
.nc-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.nc-row .nc-col {
    flex: 1;
    min-width: 200px;
}

.nc-row-3 .nc-col {
    flex: 1;
    min-width: 140px;
}


.nc-label i {
    color: #0275ae;
    margin-right: 4px;
}

.nc-req {
    color: #c62828;
}


.nc-select {
    appearance: auto;
    cursor: pointer;
}

.nc-error {
    display: block;
    font-size: 11px;
    color: #c62828;
    margin-top: 4px;
}

.nc-hint {
    display: block;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* --- Image Preview --- */
.nc-img-preview {
    max-height: 180px;
    border-radius: 10px;
    display: block;
    margin: 0 auto 12px;
}

/* --- File Upload --- */
.nc-file-upload {
    position: relative;
    border: 2px dashed #d0d5dd;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: #fff;
}

.nc-file-upload:hover {
    border-color: #0275ae;
    background: #f0f8ff;
}

.nc-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.nc-upload-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #888;
}

.nc-upload-visual i {
    font-size: 26px;
    color: #0275ae;
    margin-bottom: 4px;
}

.nc-upload-visual span {
    font-size: 13px;
    font-weight: 600;
}

.nc-upload-visual small {
    font-size: 11px;
    color: #aaa;
}

/* --- Options (toggles) --- */
.nc-options-group-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.nc-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fafbfc;
    border-radius: 10px;
    border: 1px solid #eef1f5;
    transition: all 0.15s;
    cursor: pointer;
    margin-bottom: 6px;
}

.nc-option-row:hover {
    background: #f0f8ff;
    border-color: #d0e8f5;
}

.nc-option-active {
    background: #e3f2fd !important;
    border-color: #64b5f6 !important;
}

.nc-option-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nc-check-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    background: #fff;
}

.nc-option-check:checked+.nc-check-custom {
    background: #0275ae;
    border-color: #0275ae;
}

.nc-option-check:checked+.nc-check-custom::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 11px;
    color: #fff;
}

.nc-option-label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    flex: 1;
}

.nc-option-help {
    color: #bbb;
    font-size: 14px;
    cursor: help;
    flex-shrink: 0;
    transition: color 0.2s;
}

.nc-option-help:hover {
    color: #0275ae;
}

/* --- Custom Tooltip --- */
.nc-tooltip {
    position: relative;
}

.nc-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 50%;
    transform: translateX(50%);
    background: #1a1a2e;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: normal;
    width: 220px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nc-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    right: 50%;
    transform: translateX(50%);
    border: 6px solid transparent;
    border-top-color: #1a1a2e;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: 100;
}

.nc-tooltip:hover::after,
.nc-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* --- Emails Box --- */
.nc-emails-box {
    margin-top: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 10px;
}

/* --- Timezone --- */
.nc-btn-tz {
    border: 1px solid #90caf9;
    background: #fff;
    color: #0275ae;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nc-btn-tz:hover {
    background: #e3f2fd;
}

.nc-tz-results {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    background: #fff;
    border: 1px solid #dde1e6;
    border-radius: 8px;
    max-height: 180px;
    overflow-y: auto;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 20;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.nc-tz-results li {
    padding: 9px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.nc-tz-results li:hover {
    background: #e3f2fd;
}

.nc-tz-empty {
    color: #999;
    cursor: default !important;
}


/* =====================================================
   newCorpUser MODAL
   ===================================================== */
/* ============ CORP USER MODAL ============ */
.corp-modal .modal-header,
.corp-modal .modal-body,
.corp-modal .modal-footer {
    border: none;
}

.corp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px !important;
    border-bottom: none !important;
}

.corp-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.corp-modal-title i {
    color: #0275ae;
    font-size: 18px;
}

.corp-modal-close {
    border: none;
    background: #f0f0f0;
    color: #888;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.corp-modal-close:hover {
    background: #e0e0e0;
    color: #555;
}

.corp-modal-body {
    padding: 8px 24px 20px !important;
}

/* --- Sections --- */
.corp-form-section {
    margin-bottom: 24px;
}

.corp-form-section:last-child {
    margin-bottom: 0;
}

.corp-form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #444;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f2f5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.corp-form-section-title i {
    color: #0275ae;
    font-size: 13px;
}

/* --- Form Grid --- */
.corp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.corp-form-grid:last-child {
    margin-bottom: 0;
}

.corp-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.corp-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
}

.corp-required {
    color: #e53935;
}

.corp-input {
    width: 100%;
    border: 1px solid #dde2e6;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    background: #f9fbfc;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    box-sizing: border-box;
}

.corp-input:focus {
    border-color: #0275ae;
    box-shadow: 0 0 0 3px rgba(2, 117, 174, 0.08);
    background: #fff;
}

.corp-input::placeholder {
    color: #bbb;
}

.corp-input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.corp-input-icon {
    position: absolute;
    left: 12px;
    color: #aaa;
    font-size: 13px;
    pointer-events: none;
}

.corp-input-with-icon {
    padding-left: 36px;
}

/* --- Dropdown --- */
.corp-dropdown-btn {
    width: 100%;
    border: 1px solid #dde2e6;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: #555;
    background: #f9fbfc;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.2s;
}

.corp-dropdown-btn:hover {
    border-color: #ccc;
}

.corp-dropdown-arrow {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 11px;
    color: #aaa;
}

.corp-dropdown-count {
    background: #0275ae;
    color: #fff;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}

.corp-dropdown-menu {
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid #e0e4e8;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
}

.corp-dropdown-item {
    padding: 0 !important;
    list-style: none !important;
}

.corp-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 14px !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #333 !important;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.corp-checkbox-label:hover {
    background: #f5f7fa;
}

.corp-checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #0275ae;
    cursor: pointer;
    margin: 0 !important;
}

.corp-checkbox-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Selected Area --- */
.corp-selected-area {
    margin-top: 14px;
    background: #f0f8ff;
    border: 1px solid #bbdefb;
    border-radius: 10px;
    padding: 14px 16px;
}

.corp-selected-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #0275ae;
    margin-bottom: 10px;
}

.corp-selected-header i {
    font-size: 14px;
}

.corp-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.corp-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #bbdefb;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #025f8e;
}

.corp-tag i {
    font-size: 11px;
    color: #0275ae;
}

/* --- Footer --- */
.corp-modal-footer {
    padding: 14px 24px !important;
    border-top: 1px solid #f0f2f5 !important;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.corp-btn-cancel {
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.corp-btn-cancel:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.corp-btn-save {
    border: none;
    background: #0275ae;
    color: #fff;
    border-radius: 8px;
    padding: 9px 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.corp-btn-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 576px) {
    .corp-form-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   visitDetail MODAL
   ===================================================== */
.vd-modal {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Header --- */
.vd-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid #eef1f5;
}

.vd-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0275ae 0%, #025f8e 100%);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* --- Body --- */
.vd-body {
    padding: 20px 24px;
    max-height: 65vh;
    overflow-y: auto;
}

/* --- Photos Grid --- */
.vd-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.vd-photo-card {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.vd-photo-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.vd-photo-label {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vd-photo-label i {
    color: #0275ae;
    font-size: 13px;
}

.vd-photo-card img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

.vd-photo-card a {
    display: block;
}

/* --- Info Card --- */
.vd-info-card {
    background: #f9fafb;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    padding: 20px;
    overflow: hidden;
}

.vd-info-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef1f5;
}

.vd-info-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f0f8ff;
    color: #0275ae;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vd-info-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vd-info-name {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 2px 0 0;
}

.vd-info-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vd-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #555;
}

.vd-detail i {
    color: #0275ae;
    width: 16px;
    text-align: center;
    font-size: 13px;
}

.vd-detail b {
    color: #333;
    margin-right: 4px;
}

.vd-chip-danger {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: #ffebee;
    color: #c62828;
}

/* --- Footer --- */
.vd-footer {
    padding: 16px 24px;
    border-top: 1px solid #eef1f5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.vd-btn-close {
    height: 40px;
    padding: 0 20px;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    background: #fff;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.vd-btn-close:hover {
    border-color: #bbb;
    background: #f5f5f5;
}

@media (max-width: 500px) {
    .vd-photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   packageDetail MODAL
   ===================================================== */
/* ============ PACKAGE DETAIL MODAL ============ */

/* --- Header --- */
.pkd-header {
    padding: 20px 24px;
    border-bottom: 1px solid #eef1f5;
    display: flex;
    align-items: center;
    gap: 14px;
}


/* Info Grid */


/* Chips */
.pkd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.pkd-chip-company {
    background: #e3f2fd;
    color: #0275ae;
}

.pkd-chip-recipient {
    background: #f3e5f5;
    color: #6a1b9a;
}

.pkd-chip-pending {
    background: #fff3e0;
    color: #e65100;
}

.pkd-chip-delivered {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Photos Section */


@media (max-width: 768px) {
    .pkd-info-grid {
        grid-template-columns: 1fr;
    }

    .pkd-photos-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   toolVoucherDetail MODAL
   ===================================================== */
/* ============ TOOL VOUCHER DETAIL MODAL ============ */

/* --- Header --- */
.tvd-header {
    padding: 20px 24px;
    border-bottom: 1px solid #eef1f5;
    display: flex;
    align-items: center;
    gap: 14px;
}

.tvd-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0275ae, #025f8e);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


.tvd-header-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: #888;
}


/* Info Grid */
.tvd-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}


.tvd-inv-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0275ae;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 8px;
    background: #f0f8ff;
    transition: all 0.2s;
}

.tvd-inv-link:hover {
    background: #e3f2fd;
    color: #025f8e;
}

.tvd-inv-link i {
    font-size: 11px;
}

/* Section Title */


.tvd-detail-count {
    background: #f0f8ff;
    color: #0275ae;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    margin-left: 4px;
}

/* Signatures */
.tvd-signatures {
    margin-bottom: 20px;
}

.tvd-sig-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.tvd-sig-card {
    border: 1px solid #e8ecf0;
    border-radius: 12px;
    overflow: hidden;
}

.tvd-sig-label {
    display: block;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #f5f7fa;
    border-bottom: 1px solid #e8ecf0;
}

.tvd-sig-img {
    width: 100%;
    height: 160px;
    object-fit: contain;
    display: block;
    background: #fff;
    padding: 8px;
}

/* Status Chips */
.tvd-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.tvd-status-pending {
    background: #ffebee;
    color: #c62828;
}

.tvd-status-new {
    background: #e8f5e9;
    color: #2e7d32;
}

.tvd-status-partial {
    background: #fff3e0;
    color: #e65100;
}

.tvd-status-done {
    background: #f5f5f5;
    color: #757575;
}

/* Loading & Empty */


.tvd-empty-details {
    text-align: center;
    padding: 40px 20px;
    color: #aaa;
}

.tvd-empty-details i {
    font-size: 36px;
    margin-bottom: 10px;
    display: block;
}

.tvd-empty-details p {
    font-size: 14px;
    margin: 0;
}

/* Tool Detail List */
.tvd-tool-list {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 12px;
    overflow: hidden;
}

.tvd-tool-row {
    padding: 0;
    border-bottom: 1px solid #f0f2f5;
    transition: background 0.15s;
}

.tvd-tool-row:last-child {
    border-bottom: none;
}

.tvd-tool-row:hover {
    background: #f8fbff;
}

.tvd-tool-main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 10px;
}

.tvd-tool-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f0f8ff;
    color: #0275ae;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tvd-tool-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tvd-tool-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tvd-tool-meta {
    font-size: 12px;
    color: #888;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.tvd-tool-meta i {
    font-size: 10px;
    margin-right: 3px;
    color: #aaa;
}

.tvd-tool-dates {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.tvd-tool-date {
    font-size: 12px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.tvd-tool-date i {
    font-size: 11px;
    color: #aaa;
}

.tvd-tool-status {
    flex-shrink: 0;
}

/* Tool Signatures */
.tvd-tool-signs {
    display: flex;
    gap: 14px;
    padding: 0 16px 14px 66px;
    flex-wrap: wrap;
}

.tvd-sign-item {
    flex: 1;
    min-width: 160px;
    max-width: 240px;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    overflow: hidden;
    background: #fafbfc;
}

.tvd-sign-label {
    display: block;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #f5f7fa;
    border-bottom: 1px solid #e8ecf0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tvd-sign-label i {
    color: #0275ae;
    font-size: 10px;
}

.tvd-sign-img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    display: block;
    padding: 6px;
    background: #fff;
}


@media (max-width: 768px) {
    .tvd-info-grid {
        grid-template-columns: 1fr;
    }

    .tvd-sig-grid {
        grid-template-columns: 1fr;
    }

    .tvd-tool-row {
        flex-wrap: wrap;
    }

    .tvd-tool-dates {
        width: 100%;
        flex-direction: row;
        gap: 12px;
    }
}

/* =====================================================
   newGuardhouse MODAL
   ===================================================== */
/* ============ NEW GUARDHOUSE MODAL ============ */


.ngh-section-desc {
    font-size: 13px;
    color: #888;
    margin: 4px 0 12px;
}

.ngh-sub-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin: 0 0 4px;
    display: block;
}


/* --- Web Credentials --- */
.ngh-web-creds {
    background: #fafbfc;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 22px;
}

.ngh-web-creds .ngh-section-label {
    margin-bottom: 12px;
}

.ngh-creds-row {
    display: flex;
    gap: 12px;
}

.ngh-cred-field {
    flex: 1;
}


.ngh-mandatory {
    font-size: 12px;
    color: #e65100;
    font-weight: 600;
}


.ngh-check-mandatory {
    border-color: #e65100;
}

.ngh-check:checked+.ngh-check-mandatory {
    background: #e65100;
    border-color: #e65100;
}


@media (max-width: 500px) {
    .ngh-creds-row {
        flex-direction: column;
    }

    .ngh-radio-group {
        flex-direction: column;
    }
}

/* =====================================================
   newSupplier MODAL
   ===================================================== */
/* ============ NEW SUPPLIER MODAL ============ */


.nsp-error {
    color: #e53935;
    font-size: 11px;
    font-weight: 600;
    display: block;
    margin-top: 4px;
}


.nsp-textarea {
    height: auto;
    padding: 10px 14px;
    resize: vertical;
    min-height: 70px;
}


.nsp-intl-wrap {
    position: relative;
}


@media (max-width: 500px) {
    .nsp-row {
        flex-direction: column;
    }
}

/* =====================================================
   uploadSupplierDoc MODAL
   ===================================================== */


.usd-header-subtitle {
    font-size: 13px;
    color: #777;
    margin: 4px 0 0;
}

/* --- Body --- */
.usd-body {
    padding: 20px 24px;
}

.usd-note {
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #e65100;
    font-weight: 500;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.usd-note i {
    font-size: 15px;
}

.usd-section {
    margin-bottom: 20px;
}

.usd-section:last-child {
    margin-bottom: 0;
}


/* --- File Drop --- */
.usd-file-drop {
    position: relative;
    border: 2px dashed #dde1e6;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafbfc;
}

.usd-file-drop:hover {
    border-color: #0275ae;
    background: #f0f8ff;
}

.usd-file-drop-active {
    border-color: #2e7d32 !important;
    border-style: solid !important;
    background: #f1f8e9 !important;
}

.usd-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.usd-file-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 14px;
    font-weight: 500;
}

.usd-file-visual i {
    font-size: 32px;
    color: #0275ae;
    margin-bottom: 4px;
}

.usd-file-hint {
    font-size: 11px;
    color: #bbb;
}

.usd-file-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #2e7d32;
    font-size: 14px;
    font-weight: 600;
}

.usd-file-selected i {
    font-size: 18px;
}


/* =====================================================
   newCredential MODAL
   ===================================================== */
/* ============ NEW CREDENTIAL MODAL ============ */


/* --- Time Row --- */
.ncr-time-row {
    display: flex;
    gap: 14px;
}


.ncr-day-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 2px solid #dde1e6;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    background: #fafbfc;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}


.ncr-day-active {
    border-color: #0275ae !important;
    background: #e3f2fd !important;
    color: #0275ae !important;
}


/* --- File Upload --- */
.ncr-file-zone {
    border: 2px dashed #dde1e6;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #999;
    font-size: 14px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.ncr-file-zone:hover {
    border-color: #0275ae;
    background: #f0f8ff;
    color: #0275ae;
}

.ncr-file-zone i {
    font-size: 20px;
}

.ncr-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* --- Photo Preview --- */
.ncr-photo-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: #fafbfc;
    border: 1px solid #eef1f5;
    border-radius: 10px;
}

.ncr-photo-img {
    max-height: 180px;
    max-width: 100%;
    border-radius: 8px;
    object-fit: contain;
    display: block;
}

.ncr-photo-remove {
    border: none;
    background: #ffebee;
    color: #c62828;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ncr-photo-remove:hover {
    background: #ffcdd2;
}


@media (max-width: 600px) {
    .ncr-row {
        flex-direction: column;
    }

    .ncr-radio-group {
        flex-direction: column;
    }

    .ncr-time-row {
        flex-direction: column;
    }

    .ncr-days-grid {
        gap: 6px;
    }
}

/* =====================================================
   newLocation MODAL
   ===================================================== */
/* ============ NEW LOCATION MODAL ============ */


.nlo-error {
    color: #e53935;
    font-size: 11px;
    font-weight: 600;
}


@media (max-width: 500px) {
    .nlo-row {
        flex-direction: column;
    }

    .nlo-radio-group {
        flex-direction: column;
    }
}

/* =====================================================
   newInvitation MODAL
   ===================================================== */
/* ============ NEW INVITATION MODAL ============ */


.ninv-intl-wrap {
    position: relative;
}


.ninv-radio-group-sm .ninv-radio-pill {
    padding: 8px 14px;
    font-size: 13px;
}


/* --- Switch --- */
.ninv-switch-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}

.ninv-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.ninv-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ninv-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #dde1e6;
    border-radius: 24px;
    transition: all 0.3s;
}

.ninv-switch-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s;
}

.ninv-switch input:checked+.ninv-switch-slider {
    background: #0275ae;
}

.ninv-switch input:checked+.ninv-switch-slider::before {
    transform: translateX(20px);
}

.ninv-switch-label {
    font-size: 14px;
    color: #555;
    font-weight: 500;
}


.ninv-day-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid #dde1e6;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #666;
    background: #fafbfc;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}


.ninv-day-active {
    border-color: #0275ae !important;
    background: #0275ae !important;
    color: #fff !important;
}

/* --- Divider --- */
.ninv-divider {
    height: 1px;
    background: #eef1f5;
    margin: 8px 0 22px;
}

/* --- Policies --- */
.ninv-policy-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ninv-policy-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fafbfc;
    border-radius: 10px;
    border: 1px solid #eef1f5;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin: 0;
}

.ninv-policy-item:hover {
    background: #f0f8ff;
    border-color: #d0e8f5;
}

.ninv-policy-active {
    background: #e3f2fd !important;
    border-color: #0275ae !important;
}

.ninv-policy-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ninv-policy-radio {
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s;
    position: relative;
}

.ninv-policy-active .ninv-policy-radio {
    border-color: #0275ae;
}

.ninv-policy-active .ninv-policy-radio::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #0275ae;
    border-radius: 50%;
    top: 2px;
    left: 2px;
}

/* Checkboxes */

.ninv-check-label:hover {
    background: #f0f8ff;
    border-color: #d0e8f5;
}


.ninv-policy-loading {
    padding: 12px 14px;
    color: #999;
    font-size: 13px;
}

.ninv-policy-loading i {
    color: #0275ae;
    margin-right: 6px;
}

.ninv-policy-empty {
    padding: 12px 14px;
    color: #aaa;
    font-size: 13px;
    font-style: italic;
    background: #fafbfc;
    border-radius: 10px;
    border: 1px dashed #dde1e6;
}


@media (max-width: 600px) {
    .ninv-row {
        flex-direction: column;
    }

    .ninv-radio-group {
        flex-direction: column;
    }
}

/* =====================================================
   newVisit MODAL
   ===================================================== */


/* --- Body --- */
.nv-body {
    padding: 20px 24px;
    max-height: 70vh;
    overflow-y: auto;
}

/* --- Main Layout --- */
.nv-main-layout {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
}

.nv-form-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nv-camera-col {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

.nv-camera-wrap {
    width: 100%;
    background: #1a1a2e;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nv-camera-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Fields --- */
.nv-field {
    display: flex;
    flex-direction: column;
}

.nv-label {
    font-size: 13px;
    font-weight: 700;
    color: #444;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}


.nv-input,
.nv-select {
    width: 100%;
    height: 42px;
    border: 1.5px solid #dde1e6;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    color: #333;
    background: #fafbfc;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.nv-input:focus,
.nv-select:focus {
    border-color: #0275ae;
    box-shadow: 0 0 0 3px rgba(2, 117, 174, 0.1);
    background: #fff;
}


.nv-select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.nv-input:disabled,
.nv-select:disabled {
    background: #f0f2f5;
    color: #999;
    cursor: not-allowed;
}

/* --- Photos Section --- */
.nv-photos-section {
    background: #f9fafb;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.nv-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.nv-section-title i {
    color: #0275ae;
}

.nv-section-hint {
    font-size: 13px;
    color: #888;
    margin: 0 0 12px;
}

.nv-photos-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.nv-photo-item {
    width: calc(25% - 9px);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e8ecf0;
    background: #fff;
}

.nv-photo-item img,
.nv-photo-item .camera-photo {
    width: 100%;
    display: block;
}

/* --- Capture Buttons --- */
.nv-capture-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.nv-btn-capture {
    height: 40px;
    background: #0275ae;
    color: #fff;
    border: none;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Preview Card --- */
.nv-preview-card {
    display: flex;
    gap: 20px;
    background: #f9fafb;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 16px;
    align-items: flex-start;
}

.nv-preview-photo {
    width: 120px;
    flex-shrink: 0;
}

.nv-preview-photo img {
    width: 100%;
    border-radius: 10px;
    display: block;
}

.nv-preview-info {
    flex: 1;
}

.nv-preview-label {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    margin: 0 0 2px;
}

.nv-preview-name {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 12px;
}

.nv-preview-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nv-prev-row {
    font-size: 13px;
    color: #555;
}

.nv-prev-row b {
    color: #333;
}


@media (max-width: 768px) {
    .nv-main-layout {
        flex-direction: column;
    }

    .nv-camera-col {
        width: 100%;
    }

    .nv-photo-item {
        width: calc(50% - 6px);
    }
}

/* =====================================================
   newPolicyRule MODAL
   ===================================================== */
.pr-policy-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e3f2fd;
    color: #0275ae;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.pr-file-hidden {
    display: none !important;
}

.pr-file-drop {
    border: 2px dashed #d0d7de;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafbfc;
}

.pr-file-drop:hover {
    border-color: #0275ae;
    background: #f0f8ff;
}

.pr-file-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #999;
}

.pr-file-content i {
    font-size: 28px;
    color: #0275ae;
}

.pr-file-content span {
    font-size: 14px;
    font-weight: 500;
    color: #555;
}

.pr-file-content small {
    font-size: 12px;
    color: #aaa;
}

.pr-file-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pr-file-selected i {
    font-size: 20px;
    color: #0275ae;
}

.pr-file-selected span {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    word-break: break-all;
}

.pr-file-remove {
    border: none;
    background: #ffebee;
    color: #c62828;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.pr-file-remove:hover {
    background: #c62828;
    color: #fff;
}

/* =====================================================
   newAdmin MODAL (nadm-*)
   Reuses: nac-modal, nac-header, nac-header-icon,
   nac-header-title, nac-body, nac-footer, nac-btn-cancel, nac-btn-save
   ===================================================== */
.nadm-row {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}

.nadm-row:last-child {
    margin-bottom: 0;
}

.nadm-field {
    flex: 1;
}

.nadm-label {
    font-size: 13px;
    font-weight: 700;
    color: #444;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
}

.nadm-required {
    color: #e53935;
    font-weight: 700;
}

.nadm-input {
    width: 100%;
    height: 44px;
    border: 1.5px solid #dde1e6;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    color: #333;
    background: #fafbfc;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.nadm-input:focus {
    border-color: #0275ae;
    box-shadow: 0 0 0 3px rgba(2, 117, 174, 0.1);
    background: #fff;
}

.nadm-input::placeholder {
    color: #bbb;
}

@media (max-width: 500px) {
    .nadm-row {
        flex-direction: column;
        gap: 12px;
    }
}

/* =====================================================
   SUPPLIER PAGE — sp-* unique styles
   ===================================================== */

/* --- Badge (inline-flex variant, vs-badge uses inline-block) --- */
.sp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

/* --- Table (min-width: 960px, vs uses 1050px) --- */
.sp-table-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    min-width: 960px;
    background: #f5f7fa;
    border-bottom: 2px solid #e8ecf0;
}

.sp-table-row {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    min-width: 960px;
    border-bottom: 1px solid #f0f2f5;
    transition: background 0.15s;
}

.sp-table-row:last-child {
    border-bottom: none;
}

.sp-table-row:hover {
    background: #f8fbff;
}

/* --- Card (border variant, vs-card uses box-shadow) --- */
.sp-card {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.sp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.sp-card-badge {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e3f2fd;
    color: #0275ae;
}

.sp-card-company {
    font-size: 13px;
    color: #0275ae;
    margin: 0 0 8px;
    font-weight: 600;
}

.sp-card-detail {
    font-size: 13px;
    color: #777;
    margin: 2px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-card-detail i {
    color: #0275ae;
    font-size: 12px;
    width: 14px;
    text-align: center;
}

.sp-card-footer {
    border-top: 1px solid #f0f2f5;
    padding: 10px 16px;
    display: flex;
    gap: 4px;
    justify-content: center;
}


/* =====================================================
   SUPPLIER DOCUMENT PAGE — sd-* unique styles
   ===================================================== */

/* --- Header (align-items: center, vs-header uses flex-end) --- */
.sd-header {
    padding: 28px 0 20px;
    border-bottom: 1px solid #eef1f5;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.sd-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sd-btn-back {
    width: 40px;
    height: 40px;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    background: #fff;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 16px;
}

.sd-btn-back:hover {
    border-color: #0275ae;
    color: #0275ae;
    background: #f0f8ff;
}

/* --- Chip (smaller than vs-chip: 3px 10px / 11px) --- */
.sd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: #e3f2fd;
    color: #0275ae;
}

/* --- Two-Column Layout --- */
.vs-layout,
.sd-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.vs-layout-left,
.sd-layout-left {
    width: 360px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
}

.vs-layout-right,
.sd-layout-right {
    flex: 1;
    min-width: 0;
}

/* --- Detail Card (left sidebar) --- */
.vs-detail-card,
.sd-detail-card {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    overflow: hidden;
}

.vs-detail-header,
.sd-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 20px;
    border-bottom: 1px solid #eef1f5;
}

.vs-detail-icon,
.sd-detail-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0275ae 0%, #025f8e 100%);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vs-detail-name,
.sd-detail-name {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 6px;
}

.vs-detail-body,
.sd-detail-body {
    padding: 20px;
}

.vs-detail-list,
.sd-detail-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sd-detail-item,
.vs-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-detail-label,
.vs-detail-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sd-detail-label i,
.vs-detail-label i {
    color: #0275ae;
    font-size: 12px;
}

.sd-detail-value,
.vs-detail-value {
    font-size: 14px;
    color: #1a1a2e;
    font-weight: 500;
    word-break: break-word;
}

/* --- Documents Card (right) --- */
.vs-docs-card,
.sd-docs-card {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    overflow: hidden;
}

.vs-docs-card-header,
.sd-docs-card-header {
    padding: 18px 22px;
    border-bottom: 1px solid #eef1f5;
}

.sd-docs-title,
.vs-docs-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sd-docs-title i,
.vs-docs-title i {
    color: #0275ae;
    font-size: 17px;
}

/* --- Document List (compact) --- */
.sd-docs-list,
.vs-docs-list {
    padding: 0;
}

.vs-doc-row,
.sd-doc-row {
    display: grid;
    grid-template-columns: 3px 32px 1fr auto;
    align-items: center;
    gap: 0 12px;
    padding: 10px 16px 10px 0;
    border-bottom: 1px solid #f0f2f5;
    transition: background 0.12s;
    position: relative;
}

.vs-doc-row:last-child,
.sd-doc-row:last-child {
    border-bottom: none;
}

.sd-doc-row:hover,
.vs-doc-row:hover {
    background: #f8fafc;
}

.vs-doc-row-uploaded,
.sd-doc-row-uploaded {
    background: #fcfefc;
}

.vs-doc-row-uploaded:hover,
.sd-doc-row-uploaded:hover {
    background: #f5faf5;
}

.vs-doc-row-expired,
.sd-doc-row-expired {
    background: #fff9f9;
}

.vs-doc-row-expired:hover,
.sd-doc-row-expired:hover {
    background: #fff5f5;
}

.vs-doc-status-indicator,
.sd-doc-status-indicator {
    width: 3px;
    align-self: stretch;
    border-radius: 0;
    position: static;
}

.sd-indicator-pending,
.vs-indicator-pending {
    background: #f57c00;
}

.sd-indicator-done,
.vs-indicator-done {
    background: #2e7d32;
}

.sd-indicator-expired,
.vs-indicator-expired {
    background: #c62828;
}

/* --- Doc Icon (compact) --- */
.sd-doc-icon-wrap,
.vs-doc-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.sd-doc-icon-pending,
.vs-doc-icon-pending {
    background: #fef9e7;
    color: #f1c40f;
}

.sd-doc-icon-done,
.vs-doc-icon-done {
    background: #e8f8f0;
    color: #27ae60;
}

.sd-doc-icon-expired,
.vs-doc-icon-expired {
    background: #f4ecf7;
    color: #8e44ad;
}

.sd-doc-icon-rejected,
.vs-doc-icon-rejected {
    background: #fdedec;
    color: #e74c3c;
}

.sd-doc-icon-expiring,
.vs-doc-icon-expiring {
    background: #fdf2e9;
    color: #e67e22;
}

.sd-doc-icon-none,
.vs-doc-icon-none {
    background: #f2f3f4;
    color: #bdc3c7;
}

/* --- Doc Info (compact) --- */
.sd-doc-info,
.vs-doc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sd-doc-name,
.vs-doc-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.sd-doc-note,
.vs-doc-note {
    font-size: 10px;
    color: #999;
    font-weight: 500;
}

.sd-mandatory-badge,
.vs-mandatory-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
    background: #fff0f0;
    color: #e74c3c;
    margin-left: 6px;
    vertical-align: middle;
}

.sd-optional-badge,
.vs-optional-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
    background: #f0f8ff;
    color: #0275ae;
    margin-left: 6px;
    vertical-align: middle;
}

.sd-doc-meta,
.vs-doc-meta {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1px;
}

.sd-doc-badge,
.vs-doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
}

.sd-doc-badge-uploaded,
.vs-doc-badge-uploaded {
    background: #e8f5e9;
    color: #2e7d32;
}

.sd-doc-badge-verified,
.vs-doc-badge-verified {
    background: #e3f2fd;
    color: #0275ae;
}

.sd-doc-badge-pending,
.vs-doc-badge-pending {
    background: #fff3e0;
    color: #f57c00;
}

.sd-doc-badge-expired,
.vs-doc-badge-expired {
    background: #ffebee;
    color: #c62828;
}

.sd-doc-badge-date,
.vs-doc-badge-date {
    background: #f3f4f6;
    color: #555;
}

.sd-doc-badge-date-expired,
.vs-doc-badge-date-expired {
    background: #ffebee;
    color: #c62828;
}

/* --- Doc Rejection (compact) --- */
.sd-doc-rejection,
.vs-doc-rejection {
    margin-top: 1px;
}

/* --- Doc Actions (compact) --- */
.sd-doc-actions,
.vs-doc-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.sd-doc-act-btn,
.vs-doc-act-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    text-decoration: none;
}

.sd-doc-act-view,
.vs-doc-act-view {
    color: #0275ae;
}

.sd-doc-act-view:hover,
.vs-doc-act-view:hover {
    background: #e3f2fd;
}

.sd-doc-act-upload,
.vs-doc-act-upload {
    color: #f57c00;
}

.sd-doc-act-upload:hover,
.vs-doc-act-upload:hover {
    background: #fff3e0;
}

.sd-doc-act-delete,
.vs-doc-act-delete {
    color: #c62828;
}

.sd-doc-act-delete:hover,
.vs-doc-act-delete:hover {
    background: #ffebee;
}

.sd-doc-act-verify,
.vs-doc-act-verify {
    color: #999;
}

.sd-doc-act-verify:hover,
.vs-doc-act-verify:hover {
    background: #e8f5e9;
    color: #2e7d32;
}

.sd-doc-act-verified,
.vs-doc-act-verified {
    color: #2e7d32;
}

.sd-doc-act-verified:hover,
.vs-doc-act-verified:hover {
    background: #fff3e0;
    color: #f57c00;
}

.sd-doc-act-disabled,
.vs-doc-act-disabled {
    color: #ccc;
    cursor: not-allowed;
}

/* --- Responsive (supplier document) --- */
@media (max-width: 900px) {
    .sd-layout {
        flex-direction: column;
    }

    .sd-layout-left {
        width: 100%;
        position: static;
    }

    .sd-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Projects link card --- */
.sd-projects-link-card {
    transition: background 0.15s;
}

.sd-projects-link-card:hover {
    background: #f0f8ff;
}

.sd-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-project-desc {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================
   SUPPLIER DOCUMENT PREVIEW MODAL — sdp-* styles
   ===================================================== */

.sdp-modal {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.sdp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eef1f5;
}

.sdp-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sdp-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0275ae 0%, #025f8e 100%);
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sdp-header-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sdp-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.sdp-close:hover {
    background: #f0f2f5;
    color: #555;
}

.sdp-body {
    padding: 0;
    min-height: 400px;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fb;
    position: relative;
}

.sdp-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #999;
    font-size: 13px;
    position: absolute;
}

.sdp-loading i {
    font-size: 22px;
    color: #0275ae;
}

.sdp-iframe {
    width: 100%;
    height: 70vh;
    border: none;
    display: block;
}

.sdp-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.sdp-unsupported {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    color: #999;
}

.sdp-unsupported i {
    font-size: 36px;
    color: #ccc;
}

.sdp-unsupported p {
    margin: 0;
    font-size: 14px;
}

.sdp-download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: #0275ae;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.sdp-download-link:hover {
    background: #025f8e;
    color: #fff;
    text-decoration: none;
}

.sdp-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #eef1f5;
}

.sdp-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #dde1e6;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
}

.sdp-btn-download:hover {
    border-color: #0275ae;
    color: #0275ae;
    background: #f0f8ff;
    text-decoration: none;
}

.sdp-btn-close {
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    background: #0275ae;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

/* =======================================
   PROJECTS SECTION (sp-)
   ======================================= */

.sp-btn-new-project {
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: #0275ae;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.sp-empty {
    padding: 30px 20px;
    text-align: center;
    color: #aaa;
    font-size: 14px;
}

.sp-empty i {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}

.vs-project-list,
.sp-project-list {
    padding: 0 16px 16px;
}

.vs-project-card,
.sp-project-card {
    border: 1.5px solid #eef1f5;
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sp-project-card-selected,
.vs-project-card-selected {
    border-color: #0275ae;
    box-shadow: 0 2px 12px rgba(2, 117, 174, 0.1);
}

.sp-project-header,
.vs-project-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.sp-project-header:hover,
.vs-project-header:hover {
    background: #f8f9fc;
}

.sp-project-icon,
.vs-project-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e8f4fd;
    color: #0275ae;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vs-project-info,
.sp-project-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sp-project-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-project-dates {
    font-size: 12px;
    color: #999;
}

.sp-project-dates i {
    margin-right: 4px;
}

.sp-project-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.sp-project-chevron {
    color: #bbb;
    font-size: 12px;
    margin-left: 4px;
    transition: transform 0.2s;
}

/* Expanded panel */
.sp-project-panel {
    border-top: 1px solid #eef1f5;
    background: #fafbfc;
}

/* Tabs */
.sp-tabs {
    display: flex;
    border-bottom: 1px solid #eef1f5;
    padding: 0 12px;
}

.sp-tab {
    flex: 1;
    height: 42px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.sp-tab:hover {
    color: #555;
}

.sp-tab-active {
    color: #0275ae;
    border-bottom-color: #0275ae;
}

.sp-tab-count {
    background: #0275ae;
    color: #fff;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 700;
}

.sp-tab-content {
    padding: 0;
}

/* Employee toolbar */
.sp-emp-toolbar {
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
}

.sp-btn-assign {
    height: 34px;
    padding: 0 14px;
    border: 1.5px dashed #0275ae;
    border-radius: 10px;
    background: #f0f8ff;
    color: #0275ae;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.sp-btn-assign:hover {
    background: #e3f2fd;
}

.sp-emp-empty {
    padding: 20px;
    text-align: center;
    color: #bbb;
    font-size: 13px;
}

.sp-emp-empty i {
    margin-right: 6px;
}

.sp-emp-list {
    padding: 16px 12px;
    max-height: 300px;
    overflow-y: auto;
}

.sp-emp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    margin-bottom: 6px;
    transition: border-color 0.15s;
}

.sp-emp-row:hover {
    border-color: #ddd;
}

.sp-emp-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #e8f4fd;
    color: #0275ae;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-emp-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sp-emp-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
}

.sp-emp-job {
    font-size: 12px;
    color: #999;
}

/* =======================================
   ASSIGN EMPLOYEE MODAL (ae-)
   ======================================= */

.ae-modal {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ae-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid #eef1f5;
}

.ae-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0275ae 0%, #025f8e 100%);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ae-header-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.ae-body {
    padding: 20px 24px;
    max-height: 55vh;
    overflow-y: auto;
}

.ae-section {
    margin-bottom: 16px;
}

.ae-section-label {
    font-size: 13px;
    font-weight: 700;
    color: #444;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
}

.ae-required {
    color: #e53935;
    font-weight: 700;
}

.ae-input {
    width: 100%;
    height: 42px;
    border: 1.5px solid #dde1e6;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    color: #333;
    background: #fafbfc;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ae-input:focus {
    border-color: #0275ae;
    background: #fff;
}

.ae-search-row {
    display: flex;
    gap: 8px;
}

.ae-search-row .ae-input {
    flex: 1;
}

.ae-btn-search {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: #0275ae;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.ae-results {
    margin-bottom: 16px;
}

.ae-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 6px;
}

.ae-result-item:hover {
    border-color: #0275ae;
    background: #f0f8ff;
}

.ae-result-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.ae-result-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #e3f2fd;
    color: #0275ae;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ae-result-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ae-result-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
}

.ae-result-detail {
    font-size: 12px;
    color: #999;
}

.ae-result-add {
    color: #0275ae;
    font-size: 18px;
}

.ae-no-results {
    padding: 16px;
    text-align: center;
    color: #aaa;
    font-size: 13px;
    background: #fafbfc;
    border-radius: 10px;
    border: 1px dashed #dde1e6;
}

.ae-divider {
    height: 1px;
    background: #eef1f5;
    margin: 16px 0;
}

.ae-btn-toggle {
    width: 100%;
    height: 40px;
    border: 1.5px dashed #0275ae;
    border-radius: 10px;
    background: #f0f8ff;
    color: #0275ae;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.ae-btn-toggle:hover {
    background: #e3f2fd;
}

.ae-new-form {
    margin-top: 16px;
}

.ae-row {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
}

.ae-field {
    flex: 1;
}

.ae-btn-create {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: #0275ae;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
    margin-top: 8px;
}

.ae-footer {
    padding: 16px 24px;
    border-top: 1px solid #eef1f5;
    display: flex;
    justify-content: flex-end;
}

.ae-btn-cancel {
    height: 40px;
    padding: 0 20px;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    background: #fff;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ae-btn-cancel:hover {
    border-color: #bbb;
    background: #f5f5f5;
}

@media (max-width: 500px) {
    .ae-row {
        flex-direction: column;
    }
}

/* =======================================
   DASHBOARD SUPPLIER (ds-)
   ======================================= */

/* --- Search bar --- */
.ds-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 0 4px;
}

.ds-search-input {
    flex: 1;
    height: 42px;
    border: 1.5px solid #dde1e6;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    color: #333;
    background: #fafbfc;
    outline: none;
    transition: border-color 0.2s;
}

.ds-search-input:focus {
    border-color: #0275ae;
    background: #fff;
}

.ds-search-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: #0275ae;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.ds-clear-btn {
    width: 42px;
    height: 42px;
    border: 1.5px solid #dde1e6;
    border-radius: 10px;
    background: #fff;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.ds-clear-btn:hover {
    border-color: #bbb;
    color: #555;
}

/* --- Supplier grid --- */
.ds-supplier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    padding: 0 4px;
}

.ds-supplier-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1.5px solid #eef1f5;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.ds-supplier-card:hover {
    border-color: #0275ae;
    box-shadow: 0 2px 12px rgba(2, 117, 174, 0.08);
}

.ds-supplier-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #e8f4fd;
    color: #0275ae;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ds-supplier-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ds-supplier-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-supplier-card-rfc {
    font-size: 12px;
    color: #888;
    font-family: monospace;
}

.ds-supplier-card-arrow {
    color: #ccc;
    font-size: 14px;
    flex-shrink: 0;
}

.ds-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.ds-chip-moral {
    background: #e8f4fd;
    color: #0275ae;
}

.ds-chip-fisica {
    background: #fdf2e8;
    color: #e67e22;
}

/* --- Document sections --- */
.ds-doc-section {
    background: #fff;
    border: 1.5px solid #eef1f5;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.ds-doc-section-header {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    border-bottom: 1px solid #eef1f5;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ds-doc-section-header i {
    color: #0275ae;
}

.ds-doc-list {
    padding: 8px 0;
}

/* --- Document rows --- */
.ds-doc-row {
    display: flex;
    align-items: flex-start;
    padding: 14px 20px 14px 0;
    border-bottom: 1px solid #f5f6fa;
    transition: background 0.1s;
}

.ds-doc-row:last-child {
    border-bottom: none;
}

.ds-doc-row:hover {
    background: #fafbfc;
}

/* Status bar (left colored strip) */
.ds-doc-bar {
    width: 4px;
    min-height: 48px;
    align-self: stretch;
    border-radius: 0 4px 4px 0;
    margin-right: 16px;
    flex-shrink: 0;
}

.vs-bar-none {
    background: #bdc3c7;
}

.vs-bar-pending {
    background: #f1c40f;
}

.vs-bar-approved {
    background: #27ae60;
}

.vs-bar-rejected {
    background: #e74c3c;
}

.vs-bar-expired {
    background: #8e44ad;
}

.vs-bar-expiring {
    background: #e67e22;
}

/* Doc body */
.ds-doc-body {
    flex: 1;
    min-width: 0;
}

.ds-doc-top {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.ds-doc-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
}

.ds-doc-note {
    font-size: 12px;
    color: #999;
    font-style: italic;
}

/* Status row */
.ds-doc-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Status badges */
.ds-doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.vs-badge-none {
    background: #ecf0f1;
    color: #7f8c8d;
}

.vs-badge-pending {
    background: #fef9e7;
    color: #b7950b;
}

.vs-badge-approved {
    background: #eafaf1;
    color: #1e8449;
}

.vs-badge-rejected {
    background: #fdedec;
    color: #c0392b;
}

.vs-badge-expired {
    background: #f4ecf7;
    color: #7d3c98;
}

.vs-badge-expiring {
    background: #fef5e7;
    color: #ca6f1e;
}

/* Expiration date */
.ds-doc-exp {
    font-size: 12px;
    color: #888;
}

.ds-doc-exp i {
    margin-right: 3px;
}

/* Rejection reason */
.ds-doc-rejection {
    margin-top: 6px;
    padding: 8px 12px;
    background: #fdedec;
    border-radius: 8px;
    font-size: 12px;
    color: #c0392b;
    border-left: 3px solid #e74c3c;
}

.ds-doc-rejection i {
    margin-right: 6px;
}

/* --- Action buttons --- */
.ds-doc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 12px;
    padding-top: 2px;
}

.ds-act-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    text-decoration: none;
}

.ds-act-view {
    background: #e8f4fd;
    color: #0275ae;
}

.ds-act-view:hover {
    background: #d0e9f9;
    color: #025f8e;
}

.ds-act-approve {
    background: #eafaf1;
    color: #27ae60;
}

.ds-act-approve:hover {
    background: #d5f5e3;
    color: #1e8449;
}

.ds-act-reject {
    background: #fdedec;
    color: #e74c3c;
}

.ds-act-reject:hover {
    background: #fadbd8;
    color: #c0392b;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .ds-supplier-grid {
        grid-template-columns: 1fr;
    }

    .ds-doc-row {
        flex-direction: column;
        gap: 10px;
    }

    .ds-doc-bar {
        width: 100%;
        min-height: 3px;
        height: 3px;
        border-radius: 4px 4px 0 0;
        margin-right: 0;
        margin-bottom: 0;
    }

    .ds-doc-actions {
        margin-left: 0;
        align-self: flex-end;
    }
}

/* --- Approve Supplier Bar --- */
.ds-approve-supplier-bar {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0 8px;
}

.ds-approve-supplier-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: #27ae60;
    color: #fff;
    transition: background 0.2s, opacity 0.2s;
}

.ds-approve-supplier-btn:hover:not(:disabled) {
    background: #219a52;
}

.ds-approve-supplier-btn:disabled {
    background: #bdc3c7;
    color: #fff;
    cursor: not-allowed;
    opacity: 0.8;
}

.ds-supplier-approved-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: #e8f8f0;
    color: #27ae60;
    border: 2px solid #27ae60;
}

/* ============ SUPPLIER SHE - TWO COLUMN LAYOUT ============ */

.ss-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.ss-left {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
}

.ss-right {
    flex: 1;
    min-width: 0;
}

/* ============ DOCUMENTS SHE - DRAG & DROP CONFIG ============ */

/* --- Layout --- */
.dc-layout {
    display: flex;
    gap: 24px;
    min-height: 500px;
}

.dc-panel-left {
    width: 400px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dc-panel-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Left Panel Header --- */
.dc-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eef1f5;
    background: #fafbfc;
}

.dc-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dc-panel-title i {
    color: #0275ae;
    font-size: 14px;
}

.dc-btn-add {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: #0275ae;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.dc-btn-add:hover {
    background: #025f8e;
}

/* --- Catalog List --- */
.dc-catalog-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* --- Section Headers (grouped by entity) --- */
.dc-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 6px;
    font-size: 12px;
    font-weight: 700;
    color: #0275ae;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-top: 1px solid #eef1f5;
    margin-top: 4px;
    background: #fafbfc;
}

.dc-section-header:first-child {
    border-top: none;
    margin-top: 0;
}

.dc-section-header i {
    font-size: 12px;
}

.dc-section-count {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    background: #e8f4fd;
    color: #0275ae;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.dc-catalog-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 10px;
    cursor: default;
    transition: background 0.15s;
    border-bottom: 1px solid #f5f5f5;
}

.dc-catalog-item:last-child {
    border-bottom: none;
}

.dc-catalog-item:hover {
    background: #f0f8ff;
}

.dc-catalog-item.dc-dragging {
    opacity: 0.4;
    background: #e8f4fd;
}

.dc-catalog-grip {
    color: #ccc;
    font-size: 12px;
    flex-shrink: 0;
}

.dc-catalog-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dc-catalog-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-doc-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: #e8f4fd;
    color: #0275ae;
    white-space: nowrap;
    flex-shrink: 0;
}

.dc-btn-delete-sm {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #ccc;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.dc-btn-delete-sm:hover {
    background: #fee;
    color: #e74c3c;
}

.dc-btn-add-sm {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #0275ae;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.dc-btn-add-sm:hover {
    background: #e8f4fd;
    color: #025f8e;
}

.dc-catalog-empty {
    padding: 40px 20px;
    text-align: center;
    color: #bbb;
}

.dc-catalog-empty i {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

.dc-catalog-empty p {
    font-size: 13px;
    margin: 0;
}

/* --- Drop Zone Cards --- */
.dc-dropzone-card {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.dc-dropzone-card.dc-dragover {
    border-color: #0275ae;
    box-shadow: 0 0 0 3px rgba(2, 117, 174, 0.12);
    background: #f0f8ff;
}

.dc-dropzone-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #fafbfc;
    border-bottom: 1px solid #eef1f5;
}

.dc-dropzone-header i {
    font-size: 16px;
    color: #0275ae;
}

.dc-dropzone-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    flex: 1;
}

.dc-dropzone-count {
    font-size: 12px;
    font-weight: 700;
    background: #0275ae;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-dropzone-body {
    padding: 12px 16px;
    min-height: 60px;
    flex: 1;
}

/* --- Assigned Items --- */
.dc-assigned-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #eef1f5;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: background 0.15s;
}

.dc-assigned-item:last-child {
    margin-bottom: 0;
}

.dc-assigned-item:hover {
    background: #eef5fb;
}

.dc-assigned-icon {
    color: #0275ae;
    font-size: 13px;
    flex-shrink: 0;
}

.dc-assigned-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-btn-remove {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #ccc;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.dc-btn-remove:hover {
    background: #fee;
    color: #e74c3c;
}

/* --- Drop Placeholder --- */
.dc-drop-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #bbb;
    gap: 6px;
}

.dc-drop-placeholder i {
    font-size: 20px;
}

.dc-drop-placeholder span {
    font-size: 13px;
    font-weight: 500;
}

/* --- Mandatory Toggle (small) --- */
.dc-switch-sm {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

.dc-switch-sm input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dc-slider-sm {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 18px;
    transition: background 0.25s;
}

.dc-slider-sm:before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
}

.dc-switch-sm input:checked+.dc-slider-sm {
    background: #0275ae;
}

.dc-switch-sm input:checked+.dc-slider-sm:before {
    transform: translateX(16px);
}

.dc-mandatory-label {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    min-width: 65px;
    flex-shrink: 0;
}

.dc-mandatory-label.dc-is-mandatory {
    color: #0275ae;
}

/* --- Person Type Toggle Group --- */
.dc-person-type-group {
    display: flex;
    border: 1px solid #dde1e6;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.dc-person-type-btn {
    width: 50px;
    height: 24px;
    border: none;
    background: #fff;
    color: #999;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    border-right: 1px solid #eef1f5;
    padding: 0;
}

.dc-person-type-btn:last-child {
    border-right: none;
}

.dc-person-type-btn:hover {
    background: #f0f8ff;
    color: #0275ae;
}

.dc-person-type-btn.dc-pt-active {
    background: #0275ae;
    color: #fff;
}





/* From Uiverse.io by mrpumps31232 */
.loading-wave {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-bar {
    width: 22px;
    height: 30px;
    margin: 0 6px;
    background-color: #3498db;
    border-radius: 5px;
    animation: loading-wave-animation 1s ease-in-out infinite;
}

.loading-bar:nth-child(2) {
    animation-delay: 0.1s;
}

.loading-bar:nth-child(3) {
    animation-delay: 0.2s;
}

.loading-bar:nth-child(4) {
    animation-delay: 0.3s;
}

@keyframes loading-wave-animation {
    0% {
        height: 30px;
    }

    50% {
        height: 130px;
    }

    100% {
        height: 30px;
    }
}