/* Design System and Redesign Tokens */
:root {
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --text-primary: #f8fafc;
    --text-muted: #94a3b8;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base resets & fonts */
body {
    font-family: 'Inter', sans-serif !important;
}

/* Glassmorphism Styles for Login */
.glass-container {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 20px;
    padding: 2.5rem;
    transition: var(--transition-smooth);
}

.glass-container:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 40px 0 rgba(99, 102, 241, 0.25);
}

.app-blank {
    background: var(--bg-gradient) !important;
    min-height: 100vh;
}

/* Premium Card Design */
.card.redesign-card {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    transition: var(--transition-smooth);
}

.card.redesign-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="dark"] .card.redesign-card {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(30, 41, 59, 0.7) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .card.redesign-card:hover {
    box-shadow: 0 10px 30px 0 rgba(99, 102, 241, 0.15) !important;
}

/* Beautiful Inputs styling */
.form-control.bg-transparent {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 0.8rem 1.2rem !important;
    transition: var(--transition-smooth) !important;
}

.form-control.bg-transparent:focus {
    border-color: #6366f1 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2) !important;
}

.form-control.bg-transparent::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.8;
}

.auth-input {
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    border-radius: 12px !important;
    padding: 0.8rem 1.2rem !important;
    transition: var(--transition-smooth) !important;
}

.auth-input:focus {
    border-color: #6366f1 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
}

.auth-input::placeholder {
    color: #94a3b8 !important;
}

.auth-link {
    color: var(--primary-color) !important;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.auth-link:hover {
    color: var(--primary-hover) !important;
    text-decoration: underline;
}

/* Buttons and Micro-animations */
.btn-primary.btn-redesign {
    background: var(--primary-gradient) !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    padding: 0.8rem 1.5rem !important;
    color: #ffffff !important;
    transition: var(--transition-smooth) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

.btn-primary.btn-redesign:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5) !important;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
}

.btn-primary.btn-redesign:active {
    transform: translateY(0);
}

/* Smooth Table Styling */
.table-redesign {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    width: 100% !important;
}

.table-redesign tr {
    background: #ffffff !important;
    transition: var(--transition-smooth) !important;
}

.table-redesign tr:hover {
    background: #f8fafc !important;
}

.table-redesign th {
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #475569 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 12px 16px !important;
}

.table-redesign td {
    padding: 14px 16px !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

.table-redesign tr td:first-child {
    border-left: 1px solid #e2e8f0 !important;
    border-radius: 12px 0 0 12px !important;
}

.table-redesign tr td:last-child {
    border-right: 1px solid #e2e8f0 !important;
    border-radius: 0 12px 12px 0 !important;
}

/* Dark mode overrides for Table Redesign */
[data-theme="dark"] .table-redesign tr {
    background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .table-redesign tr:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .table-redesign th {
    color: #94a3b8 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .table-redesign td {
    color: #f8fafc !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .table-redesign tr td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .table-redesign tr td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Custom Micro-animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animated Waves Background */
.app-blank {
    position: relative;
    background: var(--bg-gradient) !important;
    overflow: hidden;
}

.waves-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15vh;
    min-height: 100px;
    max-height: 150px;
    z-index: 1;
    pointer-events: none;
}

.waves {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: -7px; /* Fix for chrome gap */
}

/* Animation */
.parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

.auth-link {
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: var(--transition-smooth);
    text-decoration: none;
}

.auth-link:hover {
    color: #6366f1;
    text-decoration: underline;
}

/* Dashboard Cards */
.card-metric {
    position: relative;
    border-radius: 16px !important;
    overflow: hidden;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    transition: var(--transition-smooth);
}

.card-metric:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.25), 0 10px 10px -5px rgba(99, 102, 241, 0.15) !important;
}

.card-metric-1 {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important; /* Indigo */
}

.card-metric-2 {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%) !important; /* Blue */
}

.card-metric-3 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; /* Emerald */
}

.card-metric-4 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; /* Amber */
}

.metric-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    opacity: 0.9;
    color: #ffffff !important;
}

.metric-value {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.metric-icon-wrapper {
    background: rgba(255, 255, 255, 0.15);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Notification Drawer styling */
#kt_notification_drawer {
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    background: #ffffff !important;
}

[data-theme="dark"] #kt_notification_drawer {
    background: #1e1b4b !important; /* Sleek indigo/dark */
    color: #f8fafc !important;
}

#kt_notification_drawer .card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] #kt_notification_drawer .card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.notification-item {
    transition: var(--transition-smooth);
    border-left: 4px solid transparent;
}

.notification-item:hover {
    background: rgba(99, 102, 241, 0.05) !important;
    transform: translateX(4px);
}

.notification-item.unread {
    background: rgba(99, 102, 241, 0.02);
}

.notification-item.primary {
    border-left-color: #6366f1;
}

.notification-item.warning {
    border-left-color: #f59e0b;
}

.notification-item.success {
    border-left-color: #10b981;
}

.notification-item.danger {
    border-left-color: #ef4444;
}

/* Dashboard Input & Select Redesign */
.form-control-redesign {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    border-radius: 10px !important;
    padding: 0.6rem 1rem !important;
    transition: var(--transition-smooth) !important;
}

.form-control-redesign:focus {
    border-color: #6366f1 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

[data-theme="dark"] .form-control-redesign {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

/* Tab Redesign styling */
.nav-line-tabs .nav-link {
    border-bottom: 3px solid transparent !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    padding: 1rem 1.5rem !important;
    transition: var(--transition-smooth) !important;
}

.nav-line-tabs .nav-link.active,
.nav-line-tabs .nav-link:hover {
    color: #4f46e5 !important;
    border-bottom-color: #4f46e5 !important;
}

[data-theme="dark"] .nav-line-tabs .nav-link.active {
    color: #6366f1 !important;
    border-bottom-color: #6366f1 !important;
}

/* Custom Scrollbar for Responsive Tables */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.table-responsive::-webkit-scrollbar {
    height: 6px !important;
}

.table-responsive::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03) !important;
    border-radius: 10px !important;
}

[data-theme="dark"] .table-responsive::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02) !important;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2) !important;
    border-radius: 10px !important;
    transition: var(--transition-smooth);
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.5) !important;
}

/* Plain and Regular Table overrides for Tracker List & other listing pages */
#tracking_list,
#clientsListDetails,
#partnersListDetails,
#recruitersListDetails,
#jobDescriptionsListDetails,
#interviewSchedulesListDetails,
#resubmitProfilesListDetails,
#duplicateRecordsListDetails,
#miniTrackerListDetails {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

#tracking_list tr,
#clientsListDetails tr,
#partnersListDetails tr,
#recruitersListDetails tr,
#jobDescriptionsListDetails tr,
#interviewSchedulesListDetails tr,
#resubmitProfilesListDetails tr,
#duplicateRecordsListDetails tr,
#miniTrackerListDetails tr {
    background: transparent !important;
    border-bottom: 1px solid #e2e8f0 !important;
    transition: none !important;
    transform: none !important;
}

#tracking_list tr:hover,
#clientsListDetails tr:hover,
#partnersListDetails tr:hover,
#recruitersListDetails tr:hover,
#jobDescriptionsListDetails tr:hover,
#interviewSchedulesListDetails tr:hover,
#resubmitProfilesListDetails tr:hover,
#duplicateRecordsListDetails tr:hover,
#miniTrackerListDetails tr:hover {
    background: #f8fafc !important;
    transform: none !important;
}

#tracking_list th,
#clientsListDetails th,
#partnersListDetails th,
#recruitersListDetails th,
#jobDescriptionsListDetails th,
#interviewSchedulesListDetails th,
#resubmitProfilesListDetails th,
#duplicateRecordsListDetails th,
#miniTrackerListDetails th {
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    padding: 8px 10px !important;
    vertical-align: middle !important;
}

#tracking_list td,
#clientsListDetails td,
#partnersListDetails td,
#recruitersListDetails td,
#jobDescriptionsListDetails td,
#interviewSchedulesListDetails td,
#resubmitProfilesListDetails td,
#duplicateRecordsListDetails td,
#miniTrackerListDetails td {
    padding: 8px 10px !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    vertical-align: middle !important;
}

#tracking_list tr td:first-child,
#tracking_list tr td:last-child,
#clientsListDetails tr td:first-child,
#clientsListDetails tr td:last-child,
#partnersListDetails tr td:first-child,
#partnersListDetails tr td:last-child,
#recruitersListDetails tr td:first-child,
#recruitersListDetails tr td:last-child,
#jobDescriptionsListDetails tr td:first-child,
#jobDescriptionsListDetails tr td:last-child,
#interviewSchedulesListDetails tr td:first-child,
#interviewSchedulesListDetails tr td:last-child,
#resubmitProfilesListDetails tr td:first-child,
#resubmitProfilesListDetails tr td:last-child,
#duplicateRecordsListDetails tr td:first-child,
#duplicateRecordsListDetails tr td:last-child,
#miniTrackerListDetails tr td:first-child,
#miniTrackerListDetails tr td:last-child {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
}

/* Dark mode overrides for Plain tables */
[data-theme="dark"] #tracking_list tr,
[data-theme="dark"] #clientsListDetails tr,
[data-theme="dark"] #partnersListDetails tr,
[data-theme="dark"] #recruitersListDetails tr,
[data-theme="dark"] #jobDescriptionsListDetails tr,
[data-theme="dark"] #interviewSchedulesListDetails tr,
[data-theme="dark"] #resubmitProfilesListDetails tr,
[data-theme="dark"] #duplicateRecordsListDetails tr,
[data-theme="dark"] #miniTrackerListDetails tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #tracking_list tr:hover,
[data-theme="dark"] #clientsListDetails tr:hover,
[data-theme="dark"] #partnersListDetails tr:hover,
[data-theme="dark"] #recruitersListDetails tr:hover,
[data-theme="dark"] #jobDescriptionsListDetails tr:hover,
[data-theme="dark"] #interviewSchedulesListDetails tr:hover,
[data-theme="dark"] #resubmitProfilesListDetails tr:hover,
[data-theme="dark"] #duplicateRecordsListDetails tr:hover,
[data-theme="dark"] #miniTrackerListDetails tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] #tracking_list th,
[data-theme="dark"] #clientsListDetails th,
[data-theme="dark"] #partnersListDetails th,
[data-theme="dark"] #recruitersListDetails th,
[data-theme="dark"] #jobDescriptionsListDetails th,
[data-theme="dark"] #interviewSchedulesListDetails th,
[data-theme="dark"] #resubmitProfilesListDetails th,
[data-theme="dark"] #duplicateRecordsListDetails th,
[data-theme="dark"] #miniTrackerListDetails th {
    color: #94a3b8 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] #tracking_list td,
[data-theme="dark"] #clientsListDetails td,
[data-theme="dark"] #partnersListDetails td,
[data-theme="dark"] #recruitersListDetails td,
[data-theme="dark"] #jobDescriptionsListDetails td,
[data-theme="dark"] #interviewSchedulesListDetails td,
[data-theme="dark"] #resubmitProfilesListDetails td,
[data-theme="dark"] #duplicateRecordsListDetails td,
[data-theme="dark"] #miniTrackerListDetails td {
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #tracking_list tr td:first-child,
[data-theme="dark"] #tracking_list tr td:last-child,
[data-theme="dark"] #clientsListDetails tr td:first-child,
[data-theme="dark"] #clientsListDetails tr td:last-child,
[data-theme="dark"] #partnersListDetails tr td:first-child,
[data-theme="dark"] #partnersListDetails tr td:last-child,
[data-theme="dark"] #recruitersListDetails tr td:first-child,
[data-theme="dark"] #recruitersListDetails tr td:last-child,
[data-theme="dark"] #jobDescriptionsListDetails tr td:first-child,
[data-theme="dark"] #jobDescriptionsListDetails tr td:last-child,
[data-theme="dark"] #interviewSchedulesListDetails tr td:first-child,
[data-theme="dark"] #interviewSchedulesListDetails tr td:last-child,
[data-theme="dark"] #resubmitProfilesListDetails tr td:first-child,
[data-theme="dark"] #resubmitProfilesListDetails tr td:last-child,
[data-theme="dark"] #duplicateRecordsListDetails tr td:first-child,
[data-theme="dark"] #duplicateRecordsListDetails tr td:last-child,
[data-theme="dark"] #miniTrackerListDetails tr td:first-child,
[data-theme="dark"] #miniTrackerListDetails tr td:last-child {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Margin on right of select option and select2 elements */
#tracking_list td select,
#tracking_list td .select2-container {
    margin-right: 0 !important;
    width: 100% !important;
    min-width: 160px !important;
}