/* ===========================
   SKYDAGGER ADMIN - CLEAN DASHBOARD THEME
   v4 - Fixed form inputs, status badges, modern buttons
   =========================== */

/* === FORM INPUT FIX FOR DARK MODE === */
/* Ensure all form inputs are visible in dark mode */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="url"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="tel"],
.dark input[type="search"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="time"],
.dark textarea,
.dark select {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="url"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="search"]:focus,
.dark input[type="date"]:focus,
.dark input[type="datetime-local"]:focus,
.dark input[type="time"]:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

/* Placeholder text in dark mode */
.dark input::placeholder,
.dark textarea::placeholder {
    color: #6b7280 !important;
}

/* Trix editor fix for dark mode */
.dark trix-editor {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}

/* Select2 fix for dark mode */
.dark .select2-container--default .select2-selection--single,
.dark .select2-container--default .select2-selection--multiple {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f3f4f6 !important;
}

.dark .select2-dropdown {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .select2-results__option {
    color: #f3f4f6 !important;
}

.dark .select2-results__option--highlighted {
    background-color: #374151 !important;
}

/* Table cells in dark mode */
.dark table td,
.dark table th {
    border-color: #374151 !important;
}

/* === INLINE FORM STYLES - Minimal Dark Mode Fix === */

/* Dark mode background for inline containers */
.dark .inline-related,
.dark .tabular.inline-related {
    background-color: #1f2937;
}

.dark .inline-related h3 {
    background-color: #374151;
    color: #f3f4f6;
}

/* Dark mode for inline inputs - only colors, no layout changes */
.dark .inline-related input[type="text"],
.dark .inline-related input[type="number"],
.dark .inline-related input[type="url"],
.dark .inline-related input[type="email"],
.dark .inline-related input[type="tel"],
.dark .inline-related textarea,
.dark .inline-related select {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

/* Dark mode for table rows */
.dark .tabular.inline-related tbody tr {
    border-color: #374151;
}

/* Dark mode for add row */
.dark .inline-group .add-row,
.dark .inline-related .add-row {
    background-color: #1f2937;
    border-color: #374151;
}

.dark .inline-group .add-row a,
.dark .inline-related .add-row a {
    color: #818cf8;
}

/* === ORDERED MODEL MOVE BUTTONS === */
/* Fix: Keep TD as table-cell to preserve borders and alignment */
td.field-move_up_down_links {
    display: table-cell !important;
    vertical-align: middle !important;
}

/* Reset any old styles on links inside move column */
td.field-move_up_down_links a {
    all: unset !important;
}

td.field-move_up_down_links a::before {
    content: none !important;
    display: none !important;
}

/* Hide any leftover <img> from old templates */
td.field-move_up_down_links img {
    display: none !important;
}

/* === NEW DESIGN: Soft Colorful Pills === */
.order-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Increased gap for better touch/click area */
    padding: 0;
    background: transparent;
    border: none;
    height: auto;
}

/* Force pointer cursor for all elements inside move controls */
.order-controls *,
.order-btn,
.order-btn span,
.order-btn .material-symbols-outlined {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    /* Slightly larger */
    height: 32px;
    border-radius: 8px;
    /* Softer rounding */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer !important;
    /* Force pointer */
    text-decoration: none !important;
    border: 1px solid transparent;
}

.order-btn .material-symbols-outlined {
    font-size: 20px;
    font-weight: 500;
}

/* Default Colors - Soft Pastels (Light Mode) */
/* Top/Bottom - Violet flavor */
.order-btn--top,
.order-btn--bottom {
    background-color: #f5f3ff;
    /* violet-50 */
    color: #7c3aed;
    /* violet-600 */
    border-color: #ede9fe;
    /* violet-100 */
}

/* Up/Down - Blue flavor */
.order-btn--up,
.order-btn--down {
    background-color: #eff6ff;
    /* blue-50 */
    color: #2563eb;
    /* blue-600 */
    border-color: #dbeafe;
    /* blue-100 */
}

/* Hover States (Light Mode) */
.order-btn--top:hover,
.order-btn--bottom:hover {
    background-color: #ede9fe;
    /* violet-100 */
    border-color: #ddd6fe;
    /* violet-200 */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(124, 58, 237, 0.1);
}

.order-btn--up:hover,
.order-btn--down:hover {
    background-color: #dbeafe;
    /* blue-100 */
    border-color: #bfdbfe;
    /* blue-200 */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
}

/* Dark Mode Overrides */
.dark .order-btn--top,
.dark .order-btn--bottom {
    background-color: rgba(124, 58, 237, 0.15);
    /* violet transparent */
    color: #a78bfa;
    /* violet-400 */
    border-color: rgba(124, 58, 237, 0.2);
}

.dark .order-btn--up,
.dark .order-btn--down {
    background-color: rgba(37, 99, 235, 0.15);
    /* blue transparent */
    color: #60a5fa;
    /* blue-400 */
    border-color: rgba(37, 99, 235, 0.2);
}

.dark .order-btn--top:hover,
.dark .order-btn--bottom:hover {
    background-color: rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.4);
    color: #c4b5fd;
}

.dark .order-btn--up:hover,
.dark .order-btn--down:hover {
    background-color: rgba(37, 99, 235, 0.25);
    border-color: rgba(37, 99, 235, 0.4);
    color: #93c5fd;
}

/* === CRITICAL FIX: Tabular Inline Input Visibility === */
/* Force borders and backgrounds on all inputs within tabular inlines */
.tabular.inline-related tbody td input[type="text"],
.tabular.inline-related tbody td input[type="number"],
.tabular.inline-related tbody td input[type="email"],
.tabular.inline-related tbody td input[type="url"],
.tabular.inline-related tbody td textarea,
.tabular.inline-related tbody td select {
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    padding: 6px 8px !important;
    min-width: 150px !important;
    /* Ensure minimum width so it doesn't collapse */
    border-radius: 4px !important;
    height: auto !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tabular.inline-related tbody td textarea {
    min-height: 38px !important;
    height: 38px !important;
    resize: vertical;
}

/* Dark mode overrides for the above */
.dark .tabular.inline-related tbody td input[type="text"],
.dark .tabular.inline-related tbody td input[type="number"],
.dark .tabular.inline-related tbody td input[type="email"],
.dark .tabular.inline-related tbody td input[type="url"],
.dark .tabular.inline-related tbody td textarea,
.dark .tabular.inline-related tbody td select {
    border: 1px solid #4b5563 !important;
    background-color: #374151 !important;
    color: #f3f4f6 !important;
}

/* Focus states */
.tabular.inline-related tbody td input:focus,
.tabular.inline-related tbody td textarea:focus,
.tabular.inline-related tbody td select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    outline: none !important;
}

/* === JOB APPLICATION STATUS BADGES === */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-badge--new {
    background-color: #dbeafe;
    color: #1e40af;
}

.dark .status-badge--new {
    background-color: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.status-badge--reviewed {
    background-color: #fef3c7;
    color: #92400e;
}

.dark .status-badge--reviewed {
    background-color: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.status-badge--accepted {
    background-color: #d1fae5;
    color: #065f46;
}

.dark .status-badge--accepted {
    background-color: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.status-badge--rejected {
    background-color: #fee2e2;
    color: #991b1b;
}

.dark .status-badge--rejected {
    background-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* === DASHBOARD CONTAINER === */
.dashboard-container {
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
}

.dark .dashboard-container {
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
}

/* === KPI CARDS === */
.kpi-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.15), 0 4px 10px -4px rgba(0, 0, 0, 0.08);
}

.dark .kpi-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dark .kpi-card:hover {
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4);
}

/* KPI Card Colors - Applications (Indigo) */
.kpi-card--applications {
    background-color: #fff;
    border-color: #e0e7ff;
}

.kpi-card--applications .kpi-card__label {
    color: #4338ca;
}

.kpi-card--applications .kpi-card__value {
    color: #111827;
}

.kpi-card--applications .kpi-card__footer {
    color: #6b7280;
}

.kpi-card--applications .kpi-card__icon {
    color: #4338ca;
}

.dark .kpi-card--applications {
    background-color: #1f2937;
    border-color: rgba(99, 102, 241, 0.3);
}

.dark .kpi-card--applications .kpi-card__label {
    color: #a5b4fc;
}

.dark .kpi-card--applications .kpi-card__value {
    color: #fff;
}

.dark .kpi-card--applications .kpi-card__footer {
    color: #9ca3af;
}

.dark .kpi-card--applications .kpi-card__icon {
    color: #a5b4fc;
}

/* KPI Card Colors - Messages (Rose) */
.kpi-card--messages {
    background-color: #fff;
    border-color: #ffe4e6;
}

.kpi-card--messages .kpi-card__label {
    color: #be123c;
}

.kpi-card--messages .kpi-card__value {
    color: #111827;
}

.kpi-card--messages .kpi-card__footer {
    color: #6b7280;
}

.kpi-card--messages .kpi-card__icon {
    color: #be123c;
}

.dark .kpi-card--messages {
    background-color: #1f2937;
    border-color: rgba(244, 63, 94, 0.3);
}

.dark .kpi-card--messages .kpi-card__label {
    color: #fda4af;
}

.dark .kpi-card--messages .kpi-card__value {
    color: #fff;
}

.dark .kpi-card--messages .kpi-card__footer {
    color: #9ca3af;
}

.dark .kpi-card--messages .kpi-card__icon {
    color: #fda4af;
}

/* KPI Card Colors - Products (Emerald) */
.kpi-card--products {
    background-color: #fff;
    border-color: #d1fae5;
}

.kpi-card--products .kpi-card__label {
    color: #047857;
}

.kpi-card--products .kpi-card__value {
    color: #111827;
}

.kpi-card--products .kpi-card__footer {
    color: #6b7280;
}

.kpi-card--products .kpi-card__icon {
    color: #047857;
}

.dark .kpi-card--products {
    background-color: #1f2937;
    border-color: rgba(16, 185, 129, 0.3);
}

.dark .kpi-card--products .kpi-card__label {
    color: #6ee7b7;
}

.dark .kpi-card--products .kpi-card__value {
    color: #fff;
}

.dark .kpi-card--products .kpi-card__footer {
    color: #9ca3af;
}

.dark .kpi-card--products .kpi-card__icon {
    color: #6ee7b7;
}

/* KPI Card Colors - News (Amber) */
.kpi-card--news {
    background-color: #fff;
    border-color: #fef3c7;
}

.kpi-card--news .kpi-card__label {
    color: #b45309;
}

.kpi-card--news .kpi-card__value {
    color: #111827;
}

.kpi-card--news .kpi-card__footer {
    color: #6b7280;
}

.kpi-card--news .kpi-card__icon {
    color: #b45309;
}

.dark .kpi-card--news {
    background-color: #1f2937;
    border-color: rgba(245, 158, 11, 0.3);
}

.dark .kpi-card--news .kpi-card__label {
    color: #fcd34d;
}

.dark .kpi-card--news .kpi-card__value {
    color: #fff;
}

.dark .kpi-card--news .kpi-card__footer {
    color: #9ca3af;
}

.dark .kpi-card--news .kpi-card__icon {
    color: #fcd34d;
}

/* KPI Card Colors - Media (Sky Blue) */
.kpi-card--media {
    background-color: #fff;
    border-color: #bae6fd;
}

.kpi-card--media .kpi-card__label {
    color: #0369a1;
}

.kpi-card--media .kpi-card__value {
    color: #111827;
}

.kpi-card--media .kpi-card__footer {
    color: #6b7280;
}

.kpi-card--media .kpi-card__icon {
    color: #0369a1;
}

.dark .kpi-card--media {
    background-color: #1f2937;
    border-color: rgba(56, 189, 248, 0.3);
}

.dark .kpi-card--media .kpi-card__label {
    color: #7dd3fc;
}

.dark .kpi-card--media .kpi-card__value {
    color: #fff;
}

.dark .kpi-card--media .kpi-card__footer {
    color: #9ca3af;
}

.dark .kpi-card--media .kpi-card__icon {
    color: #7dd3fc;
}

/* === QUICK ACCESS CARDS === */
.quick-access-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.quick-access-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Quick Access Buttons - Modern Rounded Pill Style */
.quick-access-card__btn {
    border-radius: 9999px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.quick-access-card__btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Quick Access: Products (Indigo) */
.quick-access-card--products {
    background-color: #eef2ff;
    border-color: #c7d2fe;
}

.quick-access-card--products .quick-access-card__header {
    background: linear-gradient(to right, #e0e7ff, #eef2ff);
}

.quick-access-card--products .quick-access-card__title {
    color: #3730a3;
}

.quick-access-card--products .quick-access-card__icon-wrap {
    background-color: #c7d2fe;
    color: #4338ca;
}

.quick-access-card--products .quick-access-card__link {
    color: #374151;
}

.quick-access-card--products .quick-access-card__btn {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
}

.quick-access-card--products .quick-access-card__btn:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
}

.dark .quick-access-card--products {
    background-color: rgba(30, 27, 75, 0.5);
    border-color: rgba(99, 102, 241, 0.3);
}

.dark .quick-access-card--products .quick-access-card__header {
    background: linear-gradient(to right, rgba(67, 56, 202, 0.3), rgba(49, 46, 129, 0.2));
}

.dark .quick-access-card--products .quick-access-card__title {
    color: #c7d2fe;
}

.dark .quick-access-card--products .quick-access-card__icon-wrap {
    background-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

.dark .quick-access-card--products .quick-access-card__link {
    color: #e5e7eb;
}

/* Quick Access: HR (Rose) */
.quick-access-card--hr {
    background-color: #fff1f2;
    border-color: #fecdd3;
}

.quick-access-card--hr .quick-access-card__header {
    background: linear-gradient(to right, #ffe4e6, #fff1f2);
}

.quick-access-card--hr .quick-access-card__title {
    color: #9f1239;
}

.quick-access-card--hr .quick-access-card__icon-wrap {
    background-color: #fecdd3;
    color: #be123c;
}

.quick-access-card--hr .quick-access-card__link {
    color: #374151;
}

.quick-access-card--hr .quick-access-card__btn {
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    color: #fff !important;
}

.quick-access-card--hr .quick-access-card__btn:hover {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
}

.dark .quick-access-card--hr {
    background-color: rgba(76, 5, 25, 0.4);
    border-color: rgba(244, 63, 94, 0.3);
}

.dark .quick-access-card--hr .quick-access-card__header {
    background: linear-gradient(to right, rgba(190, 18, 60, 0.3), rgba(136, 19, 55, 0.2));
}

.dark .quick-access-card--hr .quick-access-card__title {
    color: #fda4af;
}

.dark .quick-access-card--hr .quick-access-card__icon-wrap {
    background-color: rgba(244, 63, 94, 0.4);
    color: #fda4af;
}

.dark .quick-access-card--hr .quick-access-card__link {
    color: #e5e7eb;
}

/* Quick Access: Content (Emerald) */
.quick-access-card--content {
    background-color: #ecfdf5;
    border-color: #a7f3d0;
}

.quick-access-card--content .quick-access-card__header {
    background: linear-gradient(to right, #d1fae5, #ecfdf5);
}

.quick-access-card--content .quick-access-card__title {
    color: #065f46;
}

.quick-access-card--content .quick-access-card__icon-wrap {
    background-color: #a7f3d0;
    color: #047857;
}

.quick-access-card--content .quick-access-card__link {
    color: #374151;
}

.quick-access-card--content .quick-access-card__btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
}

.quick-access-card--content .quick-access-card__btn:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
}

.dark .quick-access-card--content {
    background-color: rgba(6, 95, 70, 0.3);
    border-color: rgba(16, 185, 129, 0.3);
}

.dark .quick-access-card--content .quick-access-card__header {
    background: linear-gradient(to right, rgba(6, 95, 70, 0.3), rgba(4, 120, 87, 0.2));
}

.dark .quick-access-card--content .quick-access-card__title {
    color: #6ee7b7;
}

.dark .quick-access-card--content .quick-access-card__icon-wrap {
    background-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

.dark .quick-access-card--content .quick-access-card__link {
    color: #e5e7eb;
}

/* Quick Access: System (Slate) */
.quick-access-card--system {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

.quick-access-card--system .quick-access-card__header {
    background: linear-gradient(to right, #f1f5f9, #f8fafc);
}

.quick-access-card--system .quick-access-card__title {
    color: #334155;
}

.quick-access-card--system .quick-access-card__icon-wrap {
    background-color: #e2e8f0;
    color: #475569;
}

.quick-access-card--system .quick-access-card__link {
    color: #374151;
}

.quick-access-card--system .quick-access-card__btn {
    background: linear-gradient(135deg, #64748b, #475569) !important;
    color: #fff !important;
}

.quick-access-card--system .quick-access-card__btn:hover {
    background: linear-gradient(135deg, #475569, #334155) !important;
}

.dark .quick-access-card--system {
    background-color: rgba(30, 41, 59, 0.5);
    border-color: rgba(71, 85, 105, 0.4);
}

.dark .quick-access-card--system .quick-access-card__header {
    background: linear-gradient(to right, rgba(51, 65, 85, 0.4), rgba(30, 41, 59, 0.3));
}

.dark .quick-access-card--system .quick-access-card__title {
    color: #cbd5e1;
}

.dark .quick-access-card--system .quick-access-card__icon-wrap {
    background-color: rgba(71, 85, 105, 0.5);
    color: #94a3b8;
}

.dark .quick-access-card--system .quick-access-card__link {
    color: #e5e7eb;
}

/* === CHART CARDS === */
.chart-card {
    transition: box-shadow 0.2s;
}

.chart-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Ensure chart canvas is visible */
.chart-card canvas {
    display: block !important;
    max-width: 100% !important;
}

/* === SIDEBAR CARDS === */
.activity-card,
.message-card,
.application-card {
    transition: box-shadow 0.2s;
}

/* === LANGUAGE SWITCHER === */
.lang-switcher__btn {
    text-decoration: none;
}

/* === LOGO === */
aside a[href="/"] img,
img[src*="logo.png"] {
    height: 64px !important;
    width: auto !important;
    max-height: 80px !important;
    object-fit: contain;
    margin: 10px 0;
}

html:not(.dark) aside a[href="/"] img,
html:not(.dark) img[src*="logo.png"] {
    filter: invert(1) brightness(0);
}

/* === CUSTOM SCROLLBAR (dashboard only) === */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #4b5563;
}

/* === DASHBOARD DARK MODE FIXES === */
/* Force backgrounds for cards that appear white in dark mode */

.dark .chart-card,
.dark .activity-card,
.dark .message-card,
.dark .application-card {
    background-color: #1f2937 !important;
    /* gray-800 */
    border-color: #374151 !important;
    /* gray-700 */
}

/* Force header backgrounds */
.dark .activity-card>div:first-child,
.dark .message-card>div:first-child,
.dark .application-card>div:first-child,
.dark .chart-card>div:first-child {
    background-color: #374151 !important;
    /* gray-700 */
    border-bottom-color: #4b5563 !important;
    /* gray-600 */
}

/* Force dark mode colors for specific cards headers to override light bg classes */
/* Recent Actions: violet-50 in light -> gray-700 in dark */
.dark .activity-card>div:first-child {
    background-color: #374151 !important;
}

/* Recent Messages: rose-50 in light -> gray-700 in dark */
.dark .message-card>div:first-child {
    background-color: #374151 !important;
}

/* Recent Applications: indigo-50 in light -> gray-700 in dark */
.dark .application-card>div:first-child {
    background-color: #374151 !important;
}

/* Fix text colors in headers */
.dark .activity-card h3,
.dark .message-card h3,
.dark .application-card h3,
.dark .chart-card h3 {
    color: #f3f4f6 !important;
    /* gray-100 */
}

.dark .activity-card p,
.dark .message-card p,
.dark .application-card p,
.dark .chart-card p {
    color: #9ca3af !important;
    /* gray-400 */
}

/* Ensure list items hover correctly in dark mode */
.dark .activity-card .truncate,
.dark .message-card .truncate,
.dark .application-card .truncate {
    color: #e5e7eb !important;
    /* gray-200 */
}

.dark .activity-card .text-gray-500,
.dark .activity-card .text-gray-600,
.dark .message-card .text-gray-400,
.dark .message-card .text-gray-600,
.dark .application-card .text-gray-400,
.dark .application-card .text-gray-600 {
    color: #9ca3af !important;
    /* gray-400 */
}

/* Fix hover states for list items */
.dark .activity-card .hover\:bg-gray-50:hover,
.dark .message-card .hover\:bg-gray-50:hover,
.dark .application-card .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

/* Border separators */
.dark .divide-gray-100> :not([hidden])~ :not([hidden]) {
    border-color: #374151 !important;
}

/* ===================================================================
   DJANGO-MODELTRANSLATION TABS — UNFOLD COMPATIBILITY
   Override jQuery UI tab styles to match Unfold's Tailwind design.
   =================================================================== */

/* Tabular inline tab container — modeltranslation injects plain <td>
   elements without Unfold's Tailwind classes. Give them proper sizing. */
td>.ui-tabs {
    padding: 0 !important;
    margin: 0 !important;
}

/* Tab navigation bar — hidden; the global DİL SEÇİMİ bar handles switching */
.ui-tabs .ui-tabs-nav {
    display: none !important;
}

.dark .ui-tabs .ui-tabs-nav {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* Individual tab items */
.ui-tabs .ui-tabs-nav li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    float: none !important;
}

/* Tab links */
.ui-tabs .ui-tabs-nav li a {
    display: block !important;
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    text-decoration: none !important;
    border-radius: 7px !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.dark .ui-tabs .ui-tabs-nav li a {
    color: #94a3b8 !important;
}

/* Hover state */
.ui-tabs .ui-tabs-nav li a:hover {
    color: #334155 !important;
    background: #e2e8f0 !important;
}

.dark .ui-tabs .ui-tabs-nav li a:hover {
    color: #e2e8f0 !important;
    background: #334155 !important;
}

/* Active tab */
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-active a {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3) !important;
}

.dark .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.dark .ui-tabs .ui-tabs-nav li.ui-state-active a {
    color: #ffffff !important;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%) !important;
    box-shadow: 0 1px 3px rgba(129, 140, 248, 0.3) !important;
}

/* Remove default jQuery UI tab panel borders */
.ui-tabs .ui-tabs-panel {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Hide jQuery UI tab corner classes */
.ui-tabs .ui-corner-all,
.ui-tabs .ui-corner-top,
.ui-tabs .ui-corner-bottom {
    border-radius: 0 !important;
}

/* Override any jQuery UI widget header styles */
.ui-tabs .ui-widget-header {
    background: none !important;
    border: none !important;
}



/* === THEME TOGGLE SWITCH === */
.theme-toggle {
    display: flex;
    align-items: center;
}

.theme-toggle__track {
    position: relative;
    display: flex;
    align-items: center;
    width: 56px;
    height: 28px;
    border-radius: 9999px;
    padding: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: none;
    outline: none;
}

.theme-toggle__track--light {
    background-color: #e0e7ff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.theme-toggle__track--dark {
    background-color: #312e81;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.theme-toggle__thumb {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.theme-toggle__thumb--light {
    transform: translateX(1px);
    background-color: #fff;
}

.theme-toggle__thumb--dark {
    transform: translateX(27px);
    background-color: #818cf8;
}

.theme-toggle__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    z-index: 2;
    pointer-events: none;
}

/* --- Custom theme icon image styles --- */
.theme-toggle__img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Light mode: track is light → icons BLACK, sun hidden under thumb */
.theme-toggle__img--sun {
    filter: brightness(0);
    opacity: 0.35;
}
.theme-toggle__img--moon {
    filter: brightness(0);
    opacity: 0.9;
}

/* Dark mode: track is dark → icons WHITE, moon hidden under thumb */
.theme-toggle__track--dark .theme-toggle__img--sun {
    filter: none;
    opacity: 0.9;
}
.theme-toggle__track--dark .theme-toggle__img--moon {
    filter: none;
    opacity: 0.35;
}

.theme-toggle__track:hover {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.theme-toggle__track--dark:hover {
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25);
}

/* === LANGUAGE TOGGLE SWITCH === */
.lang-toggle {
    display: flex;
    align-items: center;
}

.lang-toggle__track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60px;
    height: 28px;
    border-radius: 9999px;
    padding: 3px 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: none;
    outline: none;
}

.lang-toggle__track--en {
    background-color: #dbeafe;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.lang-toggle__track--tr {
    background-color: #fee2e2;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dark .lang-toggle__track--en {
    background-color: #1e3a5f;
}

.dark .lang-toggle__track--tr {
    background-color: #5c1a1a;
}

.lang-toggle__thumb {
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-top: -11px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.lang-toggle__thumb--en {
    transform: translateX(3px);
    background-color: #3b82f6;
}

.lang-toggle__thumb--tr {
    transform: translateX(35px);
    background-color: #ef4444;
}

.lang-toggle__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    z-index: 2;
    pointer-events: none;
    transition: color 0.3s ease, opacity 0.3s ease;
    line-height: 1;
    width: 20px;
    text-align: center;
}

.lang-toggle__label--active {
    color: #1f2937;
    opacity: 1;
}

.lang-toggle__label--inactive {
    color: #9ca3af;
    opacity: 0.6;
}

.dark .lang-toggle__label--active {
    color: #f3f4f6;
}

.dark .lang-toggle__label--inactive {
    color: #6b7280;
}

.lang-toggle__track:hover {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.lang-toggle__track--tr:hover {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.dark .lang-toggle__track:hover {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.dark .lang-toggle__track--tr:hover {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* === HEADER ICONS ALIGNMENT === */
/* Normalize all top-right header elements to consistent 28px height */
.flex.flex-row.gap-2.items-center.ml-auto {
    gap: 8px !important;
    align-items: center !important;
}

/* Geçmiş (History) link — match toggle height */
.flex.flex-row.gap-2.items-center.ml-auto .historylink,
.flex.flex-row.gap-2.items-center.ml-auto a[href*="history"] {
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.flex.flex-row.gap-2.items-center.ml-auto .historylink:hover,
.flex.flex-row.gap-2.items-center.ml-auto a[href*="history"]:hover {
    background-color: #e5e7eb !important;
    color: #1f2937 !important;
}

.dark .flex.flex-row.gap-2.items-center.ml-auto .historylink,
.dark .flex.flex-row.gap-2.items-center.ml-auto a[href*="history"] {
    background-color: #374151 !important;
    color: #d1d5db !important;
}

.dark .flex.flex-row.gap-2.items-center.ml-auto .historylink:hover,
.dark .flex.flex-row.gap-2.items-center.ml-auto a[href*="history"]:hover {
    background-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

/* User dropdown button — match toggle height */
.flex.flex-row.gap-2.items-center.ml-auto>div.relative>button {
    height: 28px !important;
    padding: 0 8px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.flex.flex-row.gap-2.items-center.ml-auto>div.relative>button .material-symbols-outlined {
    font-size: 18px !important;
}

/* === LOGO VISIBILITY FIX === */
/* Invert white logo to black in light mode */
.logo-invert {
    filter: invert(1) brightness(0);
}

/* Keep white in dark mode */
.dark .logo-invert {
    filter: none;
}