/* JDS Connect - Professional UI Enhancement */

/* ── Sidebar ── */
.sidebar {
    background: var(--theme-primary) !important;
    box-shadow: 4px 0 15px rgba(0,0,0,0.15) !important;
}
.sidebar .sidebar-inner a {
    color: rgba(255,255,255,0.80) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}
.sidebar .sidebar-inner a span,
.sidebar .sidebar-inner a i {
    color: rgba(255,255,255,0.80) !important;
}
.sidebar .sidebar-inner a:hover,
.sidebar .sidebar-inner a.active {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
.sidebar .sidebar-inner a:hover span,
.sidebar .sidebar-inner a:hover i,
.sidebar .sidebar-inner a.active span,
.sidebar .sidebar-inner a.active i {
    color: #fff !important;
}
.sidebar .sidebar-inner a.active:before,
.sidebar .sidebar-inner a:hover:before {
    background: var(--theme-secondary) !important;
}

/* ── Table Header ── */
.table thead th {
    background: var(--theme-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 14px !important;
    border: none !important;
    white-space: nowrap !important;
}
.table tbody tr:hover { background: #f0f6ff !important; }
.table tbody td {
    padding: 10px 14px !important;
    vertical-align: middle !important;
    font-size: 13.5px !important;
}
.table-striped tbody tr:nth-of-type(odd) { background: #f8fafd !important; }
.table-bordered td, .table-bordered th { border: 1px solid #e2e8f0 !important; }

/* ── Cards ── */
.card {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
    background: #fff !important;
    transition: box-shadow 0.2s ease !important;
}
.card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important; }
.card-header {
    background: linear-gradient(135deg, var(--theme-primary), #3a5a8a) !important;
    color: #fff !important;
    border-radius: 12px 12px 0 0 !important;
    font-weight: 700 !important;
    padding: 12px 18px !important;
    border-bottom: none !important;
}
.card-header * { color: #fff !important; }

/* ── Dashboard Service Cards ── */
.ds-service-section .card,
.service-card {
    border-radius: 14px !important;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08) !important;
    transition: all 0.25s ease !important;
}
.ds-service-section .card:hover,
.service-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}
.ds-section-title {
    color: var(--theme-primary) !important;
    font-weight: 700 !important;
    border-left: 4px solid var(--theme-secondary) !important;
    padding-left: 10px !important;
}

/* ── Buttons ── */
.btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    transition: all 0.2s ease !important;
}
.btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; }
.btn-theme {
    background: var(--theme-primary) !important;
    border-color: var(--theme-btn-border) !important;
    color: #fff !important;
}
.btn-theme:hover { background: #1a3050 !important; }
.btn-success { background: #28a745 !important; border-color: #218838 !important; color: #fff !important; }
.btn-danger  { background: #dc3545 !important; border-color: #c82333 !important; color: #fff !important; }
.btn-warning { background: var(--theme-secondary) !important; border-color: #e0821a !important; color: #fff !important; }
.btn-sm { padding: 5px 12px !important; font-size: 12.5px !important; }

/* ── Badges ── */
.badge { border-radius: 6px !important; font-size: 11px !important; padding: 4px 8px !important; font-weight: 600 !important; }
.badge-success { background: #d4edda !important; color: #155724 !important; }
.badge-danger  { background: #f8d7da !important; color: #721c24 !important; }
.badge-warning { background: #fff3cd !important; color: #856404 !important; }
.badge-info    { background: #d1ecf1 !important; color: #0c5460 !important; }
.badge-secondary { background: #e2e8f0 !important; color: #4a5568 !important; }

/* ── Forms ── */
.form-control {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 9px 13px !important;
    font-size: 13.5px !important;
    transition: border 0.2s ease !important;
}
.form-control:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(41,66,97,0.12) !important;
}
label {
    font-weight: 600 !important;
    font-size: 12.5px !important;
    color: #4a5568 !important;
}

/* ── Page Title ── */
.page-title, h6.page-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--theme-primary) !important;
}
.title-heading {
    background: #fff !important;
    padding: 14px 20px !important;
    border-radius: 10px !important;
    margin-bottom: 18px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
}

/* ── Modal ── */
.modal-header {
    background: var(--theme-primary) !important;
    color: #fff !important;
    border-radius: 12px 12px 0 0 !important;
}
.modal-header * { color: #fff !important; }
.modal-header .close { opacity: 0.8 !important; }
.modal-content {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
}

/* ── Nav Tabs ── */
.nav-tabs .nav-link.active {
    color: var(--theme-primary) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--theme-primary) !important;
}

/* ── Pagination ── */
.pagination .page-item.active .page-link {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #fff !important;
}
.pagination .page-item .page-link { color: var(--theme-primary) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0f4f8; }
::-webkit-scrollbar-thumb { background: var(--theme-primary); border-radius: 3px; }