/* Unified Design System v2 - design_v2.css */
.design-v2-page {
    --admin-text: #111820;
    --admin-muted: #7c858d;
    --admin-border: #e4e9ed;
    --admin-gold: #d9a65a;
    --admin-gold-hover: #c99342;
    --admin-soft: #f4f5f7;
    --admin-green: #0f5b56;
    --admin-green-soft: #e7f7ee;
    --admin-shadow: 0 8px 18px rgba(17, 24, 32, 0.035);
    background: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
}

/* Page title & header layout */
.design-v2-page > .d-flex.justify-content-between,
.design-v2-page .trip-toolbar {
    align-items: center !important;
    margin: 22px 0 20px !important;
}

.design-v2-page h5.text-primary,
.design-v2-page h5.trip-page-title {
    color: var(--admin-text) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.design-v2-page .hr-card {
    display: none;
}

/* Primary actions buttons */
.design-v2-page .main-button {
    min-height: 44px !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    background: var(--admin-gold) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    border: none !important;
    font-size: 13px !important;
}

.design-v2-page .main-button:hover,
.design-v2-page .main-button:focus {
    background: var(--admin-gold-hover) !important;
    color: #ffffff !important;
}

/* Outline action buttons */
.design-v2-page .outline-button,
.design-v2-page .view.border-0 {
    min-height: 44px !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--admin-text) !important;
    border: 1px solid var(--admin-border) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    font-size: 13px !important;
}

.design-v2-page .outline-button:hover,
.design-v2-page .view.border-0:hover {
    background: #f4f5f7 !important;
    color: var(--admin-text) !important;
}

/* Filter triggers styling */
.design-v2-page .btn-filter,
.design-v2-page .trip-filter-button {
    width: 48px !important;
    height: 48px !important;
    margin-right: 0 !important;
    margin-bottom: 16px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid var(--admin-border) !important;
    box-shadow: var(--admin-shadow) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer;
    outline: none !important;
}

/* Trips specific filter alignment needs margin override */
.design-v2-page .trip-filter-button {
    margin-bottom: 0 !important;
}

.design-v2-page .btn-filter:hover,
.design-v2-page .btn-filter.active,
.design-v2-page .trip-filter-button:hover,
.design-v2-page .trip-filter-button.active,
.design-v2-page .trip-filter-button.is-active {
    background: var(--admin-gold) !important;
    border-color: var(--admin-gold) !important;
}

.design-v2-page .btn-filter:hover svg path,
.design-v2-page .btn-filter.active svg path,
.design-v2-page .trip-filter-button:hover svg path,
.design-v2-page .trip-filter-button.active svg path,
.design-v2-page .trip-filter-button.is-active svg path {
    stroke: #ffffff !important;
}

/* Dropdown card filters */
.design-v2-page .form-filter.card-details,
.design-v2-page .form-filter.trip-filter-panel {
    position: relative;
    z-index: 99 !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    background: #ffffff !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 22px !important;
    padding: 20px !important;
    box-shadow: var(--admin-shadow) !important;
}

.design-v2-page .form-filter .form-control,
.design-v2-page .form-filter .form-select {
    height: 48px !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 16px !important;
    background-color: #ffffff !important;
    color: var(--admin-text) !important;
    box-shadow: 0 2px 6px rgba(17, 24, 32, 0.04) !important;
    font-size: 14px !important;
}

.design-v2-page .form-filter label {
    color: var(--admin-text) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
}

/* Scroll wrapper for responsive tables */
.design-v2-page .scroll {
    overflow-x: auto !important;
    padding: 4px 4px !important;
}

/* DataTables structure */
.design-v2-page table.dataTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    margin: 0 0 22px !important;
}

.design-v2-page table.dataTable thead td,
.design-v2-page table.dataTable thead th {
    padding: 15px 18px !important;
    background: #ffffff !important;
    color: #626b73 !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
}

.design-v2-page table.dataTable thead td:first-child,
.design-v2-page table.dataTable thead th:first-child {
    border-radius: 0 16px 16px 0 !important;
}

.design-v2-page table.dataTable thead td:last-child,
.design-v2-page table.dataTable thead th:last-child {
    border-radius: 16px 0 0 16px !important;
}

.design-v2-page table.dataTable tbody tr {
    background: transparent !important;
    border: 0 !important;
    box-shadow: var(--admin-shadow) !important;
}

.design-v2-page table.dataTable tbody td {
    padding: 16px 18px !important;
    background: #ffffff !important;
    color: var(--admin-text) !important;
    border: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
    text-align: center !important;
}

.design-v2-page table.dataTable tbody td:first-child {
    border-radius: 0 16px 16px 0 !important;
}

.design-v2-page table.dataTable tbody td:last-child {
    border-radius: 16px 0 0 16px !important;
}

/* User & list table helper classes */
.design-v2-page .image-table {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 10px;
    border: 3px solid #f1f3f5;
}

.design-v2-page .name-table {
    color: var(--admin-text) !important;
    font-weight: 800;
}

/* Switches layout */
.design-v2-page .form-check.form-switch {
    justify-content: center;
    gap: 8px;
    display: inline-flex;
    align-items: center;
}

.design-v2-page .form-switch .form-check-label,
.design-v2-page .area-status-toggle {
    min-width: 56px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--admin-green-soft) !important;
    color: var(--admin-green) !important;
    font-size: 12px;
    font-weight: 800;
    border: 0 !important;
}

.design-v2-page .form-switch .form-check-input,
.design-v2-page .area-status-toggle .form-check-input {
    width: 38px;
    height: 22px;
    margin: 0 !important;
    order: 3;
    border: 0;
    background-color: #d8dde0;
    cursor: pointer;
}

.design-v2-page .form-switch .form-check-input:checked,
.design-v2-page .area-status-toggle .form-check-input:checked {
    background-color: var(--admin-green) !important;
}

.design-v2-page .form-switch:has(.form-check-input:not(:checked)) .form-check-label,
.design-v2-page .area-status-toggle.inactive {
    background: #eef1f3 !important;
    color: #758089 !important;
}

/* Action button/view detail in list */
.design-v2-page td .view,
.design-v2-page .table-info .dropdown-item,
.design-v2-page td .survey-icon-action {
    min-width: 88px !important;
    width: auto !important;
    min-height: 44px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 22px !important;
    margin: 0 4px !important;
    border-radius: 999px !important;
    border: 1px solid #dbe3e8 !important;
    background: #ffffff !important;
    color: var(--admin-text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.design-v2-page td .view:hover,
.design-v2-page .table-info .dropdown-item:hover,
.design-v2-page td .survey-icon-action:hover {
    background: #ffffff !important;
    border-color: var(--admin-gold) !important;
}

.design-v2-page td .view img,
.design-v2-page td .view i,
.design-v2-page .table-info .dropdown-item img,
.design-v2-page .table-info .dropdown-item i,
.design-v2-page .table-info .dropdown-item svg,
.design-v2-page td .survey-icon-action img,
.design-v2-page td .survey-icon-action i {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
    color: var(--admin-text) !important;
    font-size: 16px !important;
}

/* Survey specific table elements styling */
.design-v2-page .survey-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--admin-green-soft) !important;
    color: var(--admin-green) !important;
    font-size: 12px;
    font-weight: 800;
}

.design-v2-page .survey-title-cell {
    color: var(--admin-text) !important;
    font-weight: 800;
}

/* DataTables pagination footer layout */
.design-v2-page div.dt-container .dt-layout-row:last-child,
.design-v2-page .trip-figma-footer {
    min-height: 64px !important;
    align-items: center !important;
    padding: 10px 16px !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    box-shadow: var(--admin-shadow) !important;
    margin-top: 20px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
}

.design-v2-page div.dt-container .dt-paging,
.design-v2-page .trip-figma-footer .dataTables_paginate {
    margin: 0 !important;
}

.design-v2-page div.dt-container .dt-paging .dt-paging-button,
.design-v2-page .pagination .page-item .page-link {
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid var(--admin-border) !important;
    color: var(--admin-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 5px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer;
}

.design-v2-page div.dt-container .dt-paging .dt-paging-button.current,
.design-v2-page .pagination .page-item.active .page-link {
    background: var(--admin-gold) !important;
    border-color: var(--admin-gold) !important;
    color: #ffffff !important;
}

.design-v2-page .dt-info,
.design-v2-page .trip-figma-footer .dataTables_info {
    color: var(--admin-muted) !important;
    font-size: 13px !important;
    margin: 0 !important;
}

/* Quick Search controls */
.design-v2-page div.dt-container div.dt-search,
.design-v2-page .trip-search-shell {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
}

.design-v2-page div.dt-container div.dt-search label {
    display: none !important;
}

.design-v2-page div.dt-container div.dt-search input,
.design-v2-page .trip-search-shell input {
    min-width: 260px !important;
    min-height: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: #ffffff !important;
    background-image: url("/web/image/search 1.svg");
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 18px !important;
    box-shadow: var(--admin-shadow) !important;
    font-size: 13px !important;
    padding: 0 44px 0 20px !important;
    outline: none !important;
}

.design-v2-page .trip-search-shell button {
    display: none !important; /* Hide native icon button as we use background-image */
}