/* static/admin/css/custom-admin.css */

/* Theme CSS Variables (Light Mode Defaults) */
:root {
    /* Brand */
    --fixit-primary: #3B82F6;
    --fixit-secondary: #10B981;
    --fixit-accent: #F59E0B;
    --fixit-danger: #EF4444;
    --fixit-primary-rgb: 59,130,246;
    --fixit-secondary-rgb: 16,185,129;
    --fixit-accent-rgb: 245,158,11;
    --fixit-danger-rgb: 239,68,68;
    /* Surfaces */
    --app-bg: radial-gradient(circle at 30% 20%, #ffffff 0%, #f8fafc 45%, #eef2f7 85%);
    --bg-glass: rgba(255,255,255,0.92);
    --bg-glass-alt: linear-gradient(165deg,rgba(255,255,255,0.88),rgba(248,250,252,0.75));
    --bg-glass-overlay: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0.25));
    --bg-glass-overlay-alt: linear-gradient(135deg, rgba(255,255,255,0.50), rgba(255,255,255,0.14));
    --border-glass: rgba(203,213,225,0.55);
    --border-glass-strong: rgba(148,163,184,0.60);
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
    --shadow-lg: 0 16px 32px -4px rgba(0,0,0,0.10);
    /* Text */
    --text-primary: #1e293b;
    --text-secondary: #374151;
    --text-muted: #64748b;
    --text-muted-alt: #94a3b8;
    --text-gradient: linear-gradient(to right, #1e293b, #64748b);
    --text-link: #1d4ed8;
    /* Tables */
    --table-head-bg: linear-gradient(to right, rgba(248,250,252,0.96), rgba(241,245,249,0.92));
    --table-row-bg: rgba(255,255,255,0.70);
    --table-row-hover-bg: rgba(255,255,255,0.90);
    /* Chart grid */
    --chart-grid-start: #e2e8f0;
    --chart-grid-end: #e5e7eb;
    /* Status backgrounds */
    --status-pending-bg: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(244,63,94,0.04));
    --status-in-progress-bg: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(6,182,212,0.04));
    --status-fixed-bg: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(34,197,94,0.04));
    --status-escalated-bg: linear-gradient(135deg, rgba(30,41,59,0.10), rgba(15,23,42,0.04));
    --status-verified-fixes-bg: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(124,58,237,0.05));
    --status-default-bg: linear-gradient(135deg, rgba(100,116,139,0.12), rgba(71,85,105,0.05));
    --status-pending-color: #dc2626;
    --status-in-progress-color: #1d4ed8;
    --status-fixed-color: #047857;
    --status-escalated-color: var(--text-primary);
    --status-verified-fixes-color: #4338ca;
    --status-default-color: var(--text-muted);
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #6366f1 55%, #4f46e5 100%);
    --gradient-success: linear-gradient(135deg, #10b981, #059669);
    --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);
    --gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
    --gradient-info: linear-gradient(135deg, #3b82f6, #06b6d4);
    --gradient-neutral: linear-gradient(135deg, #94a3b8, #64748b);
    /* Elevations */
    --elevate-sm: 0 2px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --elevate-md: 0 4px 8px -2px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.04);
    --elevate-lg: 0 12px 24px -4px rgba(0,0,0,.12), 0 4px 12px -2px rgba(0,0,0,.06);
    /* Radii */
    --radius-xs: 0.25rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    /* Animation */
    --transition-fast: 120ms cubic-bezier(.4,0,.2,1);
    --transition-base: 200ms cubic-bezier(.4,0,.2,1);
    /* Panel overlays */
    --panel-overlay-light: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
    --panel-overlay-dark: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
    --panel-overlay: var(--panel-overlay-light);
}


/* Utility / Structural Classes */
.glass-header { backdrop-filter: blur(20px); background: var(--bg-glass); border-bottom: 1px solid var(--border-glass); box-shadow: var(--shadow-sm); }
.glass-panel { position: relative; overflow: hidden; backdrop-filter: blur(20px); background: var(--bg-glass-alt); border: 1px solid var(--border-glass); box-shadow: var(--shadow-lg); border-radius: 1.5rem; transition: box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base); }
.glass-panel:hover { border-color: rgba(var(--fixit-primary-rgb),0.25); box-shadow:0 12px 28px -6px rgba(0,0,0,0.12),0 6px 12px -4px rgba(0,0,0,0.08); }
.glass-panel-overlay { position: absolute; inset:0; background: var(--panel-overlay); }
.glass-overlay-alt { position:absolute; inset:0; background: var(--bg-glass-overlay-alt); }

/* Status Cards */
.status-card { position: relative; overflow:hidden; border-radius:1rem; backdrop-filter:blur(8px); border:1px solid var(--border-glass); box-shadow: var(--shadow-md); transition:all .3s; cursor:pointer; transform:translateY(0); }
.status-card:hover { transform:translateY(-4px) scale(1.05); box-shadow:0 20px 40px rgba(0,0,0,0.18); border-color:rgba(var(--fixit-primary-rgb),0.35); }
.status-card-pending { background: var(--status-pending-bg); }
.status-card-in-progress { background: var(--status-in-progress-bg); }
.status-card-fixed { background: var(--status-fixed-bg); }
.status-card-escalated { background: var(--status-escalated-bg); }
.status-card-verified-fixes, .status-card-verified { background: var(--status-verified-fixes-bg); }
.status-card-default { background: var(--status-default-bg); }

.status-value { font-size:3rem; font-weight:800; margin-bottom:.75rem; line-height:1; }
.status-text-pending { color: var(--status-pending-color); }
.status-text-in-progress { color: var(--status-in-progress-color); }
.status-text-fixed { color: var(--status-fixed-color); }
.status-text-escalated { color: var(--status-escalated-color); }
.status-text-verified-fixes, .status-text-verified { color: var(--status-verified-fixes-color); }
.status-text-default { color: var(--status-default-color); }

.trend-up { color: var(--status-fixed-color); }
.trend-down { color: var(--status-pending-color); }
.trend-neutral { color: var(--text-muted); }

/* Role badge */
.role-badge { padding:0.375rem 0.75rem; border-radius:9999px; font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; backdrop-filter:blur(8px); border:1px solid var(--border-glass-strong); display:inline-flex; align-items:center; gap:.25rem; }
.role-level-0 { background: rgba(239,68,68,0.1); color:#b91c1c; border-color: rgba(239,68,68,0.3); }
.role-level-1 { background: rgba(59,130,246,0.1); color:#1d4ed8; border-color: rgba(59,130,246,0.3); }
.role-level-2 { background: rgba(79,70,229,0.1); color:#4338ca; border-color: rgba(79,70,229,0.3); }
.role-level-3 { background: rgba(16,185,129,0.1); color:#059669; border-color: rgba(16,185,129,0.3); }
.role-level-4 { background: rgba(245,158,11,0.1); color:#d97706; border-color: rgba(245,158,11,0.3); }
.role-level-other { background: rgba(100,116,139,0.1); color:#475569; border-color: rgba(100,116,139,0.3); }

/* Table status badges */
.status-badge-fixed { background: linear-gradient(to right,#10b981,#059669); color:#fff; box-shadow: var(--shadow-sm); }
.status-badge-in-progress { background: linear-gradient(to right,#3b82f6,#06b6d4); color:#fff; box-shadow: var(--shadow-sm); }
.status-badge-pending { background: linear-gradient(to right,#ef4444,#f43f5e); color:#fff; box-shadow: var(--shadow-sm); }
.status-badge-verified, .status-badge-verified-fixes { background: linear-gradient(to right,#4f46e5,#7c3aed); color:#fff; box-shadow: var(--shadow-sm); }
.status-badge-escalated { background: linear-gradient(to right,#1e293b,#0f172a); color:#fff; box-shadow: var(--shadow-sm); }
.status-badge-default { background: linear-gradient(to right,#94a3b8,#64748b); color:#fff; box-shadow: var(--shadow-sm); }

/* Link button */
.btn-minimal { padding:0.375rem 0.75rem; background: var(--bg-glass-alt); backdrop-filter:blur(8px); border:1px solid var(--border-glass-strong); border-radius:0.5rem; font-size:0.75rem; font-weight:500; color: var(--text-secondary); text-decoration:none; transition:all .2s; box-shadow: var(--shadow-sm); display:inline-flex; align-items:center; gap:.35rem; }
.btn-minimal:hover { background: var(--bg-glass); }

/* Primary button */
.btn-primary { position:relative; display:inline-flex; align-items:center; gap:.5rem; background: var(--gradient-primary); color:#fff; font-weight:600; padding:.65rem 1.1rem; font-size:.875rem; line-height:1; border:none; border-radius: var(--radius-lg); text-decoration:none; box-shadow: var(--elevate-sm); transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-fast); }
.btn-primary:hover { transform:translateY(-2px); box-shadow: var(--elevate-lg); filter:brightness(1.05); }
.btn-primary:active { transform:translateY(0); box-shadow: var(--elevate-md); filter:brightness(.95); }
.btn-primary:focus-visible { outline:2px solid rgba(var(--fixit-primary-rgb),.6); outline-offset:3px; }

/* Legend chip (chart) */
.legend-chip { display:flex; align-items:center; gap:.4rem; padding:.35rem .65rem; border-radius: var(--radius-full); font-size:.65rem; font-weight:600; letter-spacing:.05em; background: rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.3); backdrop-filter:blur(8px); color: var(--text-secondary); box-shadow: var(--shadow-sm); }
@media (prefers-color-scheme: dark) { .legend-chip { background: rgba(55,65,81,0.55); border-color: rgba(148,163,184,0.25); color: var(--text-primary); } }
.legend-chip-dot { width:.6rem; height:.6rem; border-radius: var(--radius-full); box-shadow:0 0 0 1px rgba(255,255,255,0.6), inset 0 0 0 1px rgba(0,0,0,0.15); }
@media (prefers-color-scheme: dark) { .legend-chip-dot { box-shadow:0 0 0 1px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.05); } }

/* Gradient border utility */
.gradient-border { position:relative; }
.gradient-border:before { content:''; position:absolute; inset:0; padding:1px; border-radius:inherit; background:linear-gradient(135deg, var(--fixit-primary), var(--fixit-secondary), var(--fixit-accent)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }

/* Elevation / hover */
.elevate-hover { transition: box-shadow var(--transition-base), transform var(--transition-base); }
.elevate-hover:hover { box-shadow: var(--elevate-lg); transform:translateY(-2px); }
.elevate-hover:active { transform:translateY(0); box-shadow: var(--elevate-md); }

/* Focus ring utility */
.focus-ring:focus-visible { outline:2px solid rgba(var(--fixit-primary-rgb),0.65); outline-offset:3px; }

/* Table refinements */
table thead th { position:relative; }
table thead th:after { content:''; position:absolute; left:0; bottom:0; height:1px; width:100%; background:linear-gradient(to right, rgba(var(--fixit-primary-rgb),.35), rgba(var(--fixit-primary-rgb),0)); }
tbody tr { transition: background var(--transition-fast), transform var(--transition-fast); }
tbody tr:hover { transform:translateX(4px); }

/* Card subtle sheen */
.status-card:before { content:''; position:absolute; inset:0; background:linear-gradient(165deg, rgba(255,255,255,.25), rgba(255,255,255,0) 40%); mix-blend-mode:overlay; pointer-events:none; }
@media (prefers-color-scheme: dark) { .status-card:before { background:linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,0) 45%); } }

/* Smooth color transitions for theme switch */
body, .glass-panel, .glass-header, .status-card, .role-badge, .btn-minimal, .btn-primary { transition: background-color var(--transition-base), background var(--transition-base), color var(--transition-base), border-color var(--transition-base); }
body { background: var(--app-bg); background-attachment: fixed; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { 
    * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}

/* Gradient text helper */
.gradient-text { background: var(--text-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Logo styling */
.unfold-logo {
    max-height: 40px;
    width: auto;
}

/* static/admin/css/custom-admin.css */
/* Filter button */
.bg-blue-500 {
    background-color: #3B82F6; /* Use your desired color */
    color: white;
  }
  
  .hover\:bg-blue-700:hover {
    background-color: #2563EB; /* Use your desired hover color */
  }

/* Clear Filters button */
.bg-gray-200 {
    background-color: #6B7280; /* Use your desired color */
    color: white;
  }
  .hover\:bg-gray-300:hover {
    background-color: #4B5563; /* Use your desired hover color */
  }

/* Dashboard cards hover effect */
.dashboard-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 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.05em;
}

.status-pending {
    background-color: #FEF3C7;
    color: #92400E;
}

.status-under-review {
    background-color: #DBEAFE;
    color: #1E40AF;
}

.status-in-progress {
    background-color: #E0E7FF;
    color: #3730A3;
}

.status-escalated {
    background-color: #FEE2E2;
    color: #991B1B;
}

.status-fixed {
    background-color: #D1FAE5;
    color: #065F46;
}

.status-verified {
    background-color: #F3E8FF;
    color: #5B21B6;
}

/* Dark mode overrides for legacy status badges */
@media (prefers-color-scheme: dark) { 
    .status-pending { background-color: rgba(245,158,11,0.15); color:#fbbf24; }
    .status-under-review { background-color: rgba(59,130,246,0.15); color:#60a5fa; }
    .status-in-progress { background-color: rgba(99,102,241,0.18); color:#818cf8; }
    .status-escalated { background-color: rgba(239,68,68,0.15); color:#f87171; }
    .status-fixed { background-color: rgba(16,185,129,0.18); color:#34d399; }
    .status-verified { background-color: rgba(124,58,237,0.15); color:#a78bfa; }
}

/* Priority indicators */
.priority-high {
    color: var(--fixit-danger);
    font-weight: 600;
}

.priority-low {
    color: #6B7280;
}

/* Admin sidebar customization */
.unfold-sidebar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Form improvements */
.unfold-form-field {
    margin-bottom: 1rem;
}

.unfold-form-field label {
    font-weight: 600;
    color: #374151;
}

/* Table improvements */
.unfold-table tr:hover {
    background-color: #F9FAFB;
}

/* Action buttons */
.unfold-action-btn {
    transition: all 0.2s ease-in-out;
}

.unfold-action-btn:hover {
    transform: scale(1.05);
}

/* Custom loading spinner */
.fixit-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--fixit-primary);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* (Legacy dark mode adjustments retained if any component still references old classes) */

/* Responsive adjustments */
@media (max-width: 768px) {
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
    
    .dashboard-charts {
        grid-template-columns: 1fr;
    }
}

/* Animation for new notifications */
@keyframes pulse-notification {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.notification-pulse {
    animation: pulse-notification 2s infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--fixit-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2563EB;
}

@media (prefers-color-scheme: dark) { 
    ::-webkit-scrollbar-track { background:#1f2937; }
    ::-webkit-scrollbar-thumb { background: linear-gradient(var(--fixit-primary), #6366f1); }
    ::-webkit-scrollbar-thumb:hover { background: linear-gradient(#2563EB, #4338ca); }
}