/* ============================================================
   REUSABLE UI COMPONENTS (PUPR THEME - COMPONENTS.CSS)
   ============================================================ */

/* ============================================================
   1. CARD SYSTEM
   ============================================================ */
.card {
    background: var(--bg-card, #ffffff);
    border-radius: var(--radius, 16px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
    border: 1px solid rgba(0, 40, 85, 0.06);
    overflow: hidden;
    transition: var(--transition, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

.card:hover {
    box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 40, 85, 0.08));
}

.card-header {
    padding: 18px 24px;
    border-bottom: 1px solid rgba(0, 40, 85, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary, #002855);
}

.card-header .card-action {
    font-size: 13px;
    color: var(--primary, #002855);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    text-decoration: none;
}

.card-header .card-action:hover {
    color: var(--secondary, #FFB800);
}

.card-body {
    padding: 20px 24px;
}

/* ============================================================
   2. BADGE STATUS SYSTEM
   ============================================================ */
.badge-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}

.badge-status.selesai {
    background: #d4edda;
    color: #155724;
}

.badge-status.proses {
    background: #fff3cd;
    color: #856404;
}

.badge-status.menunggu {
    background: #cce5ff;
    color: #004085;
}

.badge-status.batal {
    background: #f8d7da;
    color: #721c24;
}

.badge-status.survei {
    background: #d1ecf1;
    color: #0c5460;
}

.badge-status.pupr {
    background: var(--secondary, #FFB800);
    color: var(--primary-dark, #001737);
}

/* ============================================================
   3. CUSTOM DROPDOWN SYSTEM (SELECT CUSTOM)
   ============================================================ */
.custom-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-dropdown .dropdown-toggle {
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-card, #ffffff);
    border: 1px solid rgba(0, 40, 85, 0.16);
    border-radius: var(--radius-sm, 10px);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #0A192F);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: var(--transition, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

.custom-dropdown .dropdown-toggle:hover,
.custom-dropdown .dropdown-toggle:focus {
    border-color: var(--primary, #002855);
    box-shadow: 0 0 0 3px rgba(0, 40, 85, 0.10);
    outline: none;
}

.custom-dropdown .dropdown-toggle i {
    font-size: 12px;
    color: var(--text-muted, #64748B);
    transition: transform 0.3s ease;
}

.custom-dropdown.open .dropdown-toggle i {
    transform: rotate(180deg);
}

.custom-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-card, #ffffff);
    border-radius: var(--radius-sm, 10px);
    box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 40, 85, 0.12));
    border: 1px solid rgba(0, 40, 85, 0.08);
    padding: 6px;
    z-index: 500;
    display: none;
    max-height: 240px;
    overflow-y: auto;
}

.custom-dropdown.open .dropdown-menu {
    display: block;
    animation: dropdownFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-dropdown .dropdown-item {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #0A192F);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s ease;
}

.custom-dropdown .dropdown-item:hover {
    background: rgba(0, 40, 85, 0.06);
    color: var(--primary, #002855);
}

.custom-dropdown .dropdown-item.active {
    background: rgba(255, 184, 0, 0.2);
    color: var(--primary-dark, #001737);
    font-weight: 700;
}

.custom-dropdown .dropdown-divider {
    height: 1px;
    background: rgba(0, 40, 85, 0.06);
    margin: 4px 0;
}

/* ============================================================
   4. DARK MODE OVERRIDES & COMPONENT CONTRAST FIXES
   ============================================================ */
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .pipeline-step,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .filter-section,
html[data-theme="dark"] .settings-sidebar,
html[data-theme="dark"] .settings-content,
html[data-theme="dark"] .settings-panel,
html[data-theme="dark"] .map-filter-bar,
html[data-theme="dark"] .map-wrapper-card,
html[data-theme="dark"] .stats-bap .stat-item,
html[data-theme="dark"] .stats-petugas .stat-item,
html[data-theme="dark"] .stats-mini .stat-mini,
html[data-theme="dark"] .map-sidebar .card,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .theme-option-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="dark"] .theme-option-card.active {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: #38BDF8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3) !important;
}

html[data-theme="dark"] .theme-option-card .theme-name {
    color: #F8FAFC !important;
}

html[data-theme="dark"] .navbar-right .user-profile .avatar,
html[data-theme="dark"] .petugas-avatar,
html[data-theme="dark"] .avatar-large,
html[data-theme="dark"] .admin-avatar,
html[data-theme="dark"] .team-avatar,
html[data-theme="dark"] .avatar {
    background: var(--primary) !important;
    color: #0F172A !important;
    font-weight: 900 !important;
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .table-card .table-header,
html[data-theme="dark"] .table-footer,
html[data-theme="dark"] .panel-header,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .map-header,
html[data-theme="dark"] .task-item,
html[data-theme="dark"] .brief-item,
html[data-theme="dark"] .activity-item,
html[data-theme="dark"] .report-status-item,
html[data-theme="dark"] .team-mini-item {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .card-header h3,
html[data-theme="dark"] .card-header .card-action,
html[data-theme="dark"] .greeting h1,
html[data-theme="dark"] .pipeline-section .section-header h3,
html[data-theme="dark"] .stat-card .stat-info .stat-value,
html[data-theme="dark"] .stat-card .stat-info .stat-label,
html[data-theme="dark"] .pipeline-step .step-count,
html[data-theme="dark"] .pipeline-step .step-label,
html[data-theme="dark"] .task-item .task-info .task-title,
html[data-theme="dark"] .brief-item .brief-info .brief-title,
html[data-theme="dark"] .team-mini-item .team-info .team-name,
html[data-theme="dark"] .report-status-item .report-user,
html[data-theme="dark"] table thead th,
html[data-theme="dark"] table tbody td,
html[data-theme="dark"] .stats-bap .stat-item .info .value,
html[data-theme="dark"] .stats-petugas .stat-item .info .value,
html[data-theme="dark"] .stats-mini .stat-mini .info .value,
html[data-theme="dark"] .modal-box .modal-header h3,
html[data-theme="dark"] .marker-item .marker-info .name,
html[data-theme="dark"] .settings-sidebar .nav-item,
html[data-theme="dark"] .dropdown-toggle,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .log-item .log-content .log-text {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .activity-item .activity-content .activity-text {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .activity-item .activity-content .activity-text strong,
html[data-theme="dark"] .log-item .log-content .log-text strong {
    color: var(--secondary) !important;
}

html[data-theme="dark"] .hot-issue-banner {
    background: linear-gradient(135deg, #152238 0%, #0F172A 100%) !important;
    border: 1px solid rgba(255, 184, 0, 0.4) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] table thead {
    background: rgba(11, 19, 41, 0.8) !important;
}

html[data-theme="dark"] table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: rgba(11, 19, 41, 0.9) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .badge-status.proses {
    background: rgba(255, 184, 0, 0.2);
    color: #FFB800;
}

html[data-theme="dark"] .badge-status.selesai {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

html[data-theme="dark"] .badge-status.menunggu {
    background: rgba(56, 189, 248, 0.2);
    color: #7DD3FC;
}

html[data-theme="dark"] .badge-status.batal {
    background: rgba(239, 68, 68, 0.2);
    color: #FCA5A5;
}

html[data-theme="dark"] .badge-status.survei {
    background: rgba(168, 85, 247, 0.2);
    color: #C084FC;
}

/* ============================================================
   5. PUPR INTEGRATED SEARCH GROUP
   ============================================================ */
.pupr-search-group {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    border: 1px solid rgba(0, 40, 85, 0.15);
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 40, 85, 0.04);
    max-width: 100%;
}

.pupr-search-group:focus-within {
    border-color: var(--primary, #002855);
    box-shadow: 0 0 0 3px rgba(0, 40, 85, 0.12);
}

.pupr-search-input {
    padding: 8px 16px;
    border: none !important;
    outline: none !important;
    font-family: inherit;
    font-size: 13px;
    background: var(--bg-body, #f8fafc);
    color: var(--text-primary, #0A192F);
    flex: 1;
    min-width: 0;
    width: 100%;
}

.pupr-search-btn {
    background: var(--primary, #002855) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.pupr-search-btn:hover {
    background: var(--primary-light, #003E75) !important;
}

html[data-theme="dark"] .pupr-search-group {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .pupr-search-input {
    background: rgba(11, 19, 41, 0.9) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .pupr-search-input::placeholder {
    color: var(--text-muted) !important;
}