/* Admin Panel Styles */
:root {
  --gradient-start: #667eea;
  --gradient-end: #764ba2;
  --sidebar-width: 250px;
  --transition-fast: 150ms;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 16px -4px rgba(0,0,0,0.15);
}

html, body {
  height: 100%;
}

body.app-body {
  background: #f4f6f9;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Sidebar */
.sidebar {
  min-height: 100vh;
  width: var(--sidebar-width);
  background: linear-gradient(160deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  color: #fff;
  box-shadow: var(--shadow);
}
.sidebar .nav-link {
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.sidebar .nav-link:hover {
  background: rgba(255,255,255,0.12);
  transform: translateX(4px);
}
.sidebar .nav-link.active {
  background: rgba(0,0,0,0.18) linear-gradient(120deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05));
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
.sidebar h4 { font-weight: 600; }

/* Main Content */
.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin var(--transition-fast);
}

@media (max-width: 992px) {
  .main-content { margin-left: 0; }
  .sidebar { display: none; }
}

/* Cards */
.card {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow); }
.card-header { background: #fff; font-weight: 600; }

/* Stat Cards */
.stat-card { 
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%); 
  color: #fff; 
  border-radius: var(--radius-lg); 
  position: relative; 
  overflow: hidden; 
}
.stat-card:before {
  content: "";
  position: absolute;
  top: -40%;
  right: -40%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.25), transparent 60%);
  opacity: 0.3;
  transform: rotate(25deg);
}
.stat-card .card-title { text-transform: uppercase; font-size: .7rem; letter-spacing: 1px; opacity: .85; }
.stat-card h2 { font-weight: 600; }

/* Tables */
.table-hover tbody tr:hover { background: #f3f7ff; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; }

.file-thumbnail { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.file-actions .btn { margin: 2px; }

/* Badges */
.badge { font-weight: 500; letter-spacing: .5px; }

/* Toasts */
.toast-container { position: fixed; top: 16px; right: 16px; z-index: 2000; }
.toast { backdrop-filter: blur(6px); }
.toast-header { font-weight: 600; }

/* Utility */
.bg-opacity-10 { background-color: rgba(0,0,0,0.05)!important; }
.opacity-50 { opacity: .5; }

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.card, .table, .stat-card { animation: fadeIn .35s ease; }

/* Forms */
.form-control, .form-select { border-radius: var(--radius-md); }
.btn { border-radius: var(--radius-md); }
.btn-primary { background: var(--gradient-start); border: none; }
.btn-primary:hover { background: #556adf; }
.btn-outline-primary { border-color: var(--gradient-start); color: var(--gradient-start); }
.btn-outline-primary:hover { background: var(--gradient-start); color: #fff; }

/* Pagination */
.pagination .page-link { border: none; margin: 0 2px; border-radius: var(--radius-sm); }
.pagination .page-item.active .page-link { background: var(--gradient-start); box-shadow: var(--shadow-sm); }

/* Upload preview */
#previewContent .d-flex { border-radius: var(--radius-md); }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gradient-start), var(--gradient-end)); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }

/* Dark mode (future) placeholder */
body.dark .sidebar { background: linear-gradient(160deg,#2d3748,#1a202c); }
body.dark .card { background: #1f2330; color: #e9edf5; }