/**
 * Media ITLive Admin – production CSS (geen Tailwind CDN)
 */

/* Login page */
.admin-login {
    min-height: 100vh;
    background: linear-gradient(135deg, #312e81 0%, #6b21a8 50%, #312e81 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.admin-login .admin-card {
    width: 100%;
    max-width: 28rem;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    padding: 2rem;
}
.admin-login .admin-login-header { text-align: center; margin-bottom: 1.5rem; }
.admin-login .admin-card h1 { font-size: 1.5rem; font-weight: 700; color: #1f2937; margin-bottom: 0.25rem; }
.admin-login .admin-card .sub { color: #4b5563; font-size: 0.875rem; margin-bottom: 0; }
.admin-login .admin-login-form { margin-top: 1.25rem; }
.admin-login .admin-icon {
    width: 4rem; height: 4rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px; background: #4f46e5; color: #fff;
    font-size: 1.5rem; margin-bottom: 1rem;
}
.admin-login label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.5rem; }
.admin-login input[type="password"] {
    width: 100%; padding: 0.75rem 1rem;
    border: 1px solid #d1d5db; border-radius: 0.5rem;
    font-size: 1rem;
}
.admin-login input[type="password"]:focus {
    outline: none; border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
}
.admin-login .admin-btn {
    margin-top: 1rem; width: 100%; padding: 0.75rem 1rem;
    background: #4f46e5; color: #fff; font-weight: 600;
    border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1rem;
}
.admin-login .admin-btn:hover { background: #4338ca; }
.admin-login .admin-footer { margin-top: 1.5rem; text-align: center; font-size: 0.75rem; color: #6b7280; }
.admin-login .admin-footer a { color: #4f46e5; text-decoration: none; }
.admin-login .admin-footer a:hover { text-decoration: underline; }
.admin-login .admin-error { margin-bottom: 1rem; padding: 0.75rem; background: #fee2e2; color: #b91c1c; border-radius: 0.5rem; font-size: 0.875rem; }

/* Dashboard */
.admin-dash { background: #f3f4f6; min-height: 100vh; }
.admin-dash header {
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-bottom: 1px solid #e5e7eb;
}
.admin-dash .header-inner {
    max-width: 80rem; margin: 0 auto; padding: 1rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
}
.admin-dash .header-logo {
    width: 2.5rem; height: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.75rem; background: #4f46e5; color: #fff;
}
.admin-dash .header-title { font-size: 1.25rem; font-weight: 700; color: #1f2937; }
.admin-dash .header-sub { font-size: 0.75rem; color: #6b7280; }
.admin-dash .logout { color: #6b7280; font-size: 0.875rem; text-decoration: none; }
.admin-dash .logout:hover { color: #4f46e5; }

.admin-dash .container { max-width: 80rem; margin: 0 auto; padding: 1rem 1.5rem; }
.admin-dash nav {
    display: flex; gap: 1.5rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1.5rem;
    overflow-x: auto; padding-bottom: 0;
}
.admin-dash .nav-tab {
    padding: 0.75rem 0.25rem; font-weight: 500; color: #4b5563; white-space: nowrap;
    border: none; background: none; cursor: pointer; font-size: 1rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-dash .nav-tab:hover { color: #4f46e5; }
.admin-dash .nav-tab.active { border-color: #4f46e5; color: #4f46e5; }

.admin-dash .tab-content { display: none; }
.admin-dash .tab-content.active { display: block; }
.admin-dash .card {
    background: rgba(255,255,255,0.98); border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 1.5rem; margin-bottom: 1.5rem;
}
.admin-dash .card h2 { font-size: 1.125rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; }
.admin-dash .card h2 i { color: #4f46e5; margin-right: 0.5rem; }
.admin-dash .card p { font-size: 0.875rem; color: #4b5563; margin-bottom: 1rem; }
.admin-dash .flex-wrap { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.admin-dash input[type="text"], .admin-dash select {
    padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 1rem;
}
.admin-dash input:focus, .admin-dash select:focus {
    outline: none; border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
}
.admin-dash .btn-primary {
    padding: 0.5rem 1rem; background: #4f46e5; color: #fff; border: none;
    border-radius: 0.5rem; cursor: pointer; font-size: 1rem;
}
.admin-dash .btn-primary:hover { background: #4338ca; }
.admin-dash .image-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-top: 1rem;
}
.admin-dash .image-grid img { width: 100%; height: 140px; object-fit: cover; border-radius: 0.5rem; }
.admin-dash .status { margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280; }
.admin-dash .min-w-200 { min-width: 200px; }
.admin-dash .flex-1 { flex: 1; }
.admin-dash .grid-3 { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; }
@media (min-width: 768px) { .admin-dash .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.admin-dash .space-y-4 > * + * { margin-top: 1rem; }

/* Dynamic content: grid items and stats */
.admin-dash .image-grid > div {
    border-radius: 0.5rem; overflow: hidden; border: 1px solid #e5e7eb; background: #f9fafb;
}
.admin-dash .image-grid > div img { width: 100%; height: 8rem; object-fit: cover; display: block; }
.admin-dash .image-grid > div > div { padding: 0.5rem; font-size: 0.75rem; color: #4b5563; }
.admin-dash .image-grid > div > div:last-of-type { color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-dash #stats-box .card { padding: 1rem; }
.admin-dash #stats-box .card div:first-child { font-size: 1.5rem; font-weight: 700; color: #4f46e5; }
.admin-dash #stats-box .card div:last-child { font-size: 0.875rem; color: #4b5563; }
.admin-dash #categories-box h3 { font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; }
.admin-dash #categories-box .flex-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-dash #categories-box span { padding: 0.25rem 0.75rem; background: #f3f4f6; border-radius: 9999px; font-size: 0.875rem; }