/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

:root {
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --secondary-color: #ec4899;
    --background-dark: #0f172a;
    --surface-dark: #1e293b;
    --text-light: #f8fafc;
    --text-muted: #94a3b8;
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --gradient-bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);

    /* Dimensions */
    --sidebar-width: 260px;
    --header-height: 70px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background: var(--gradient-bg);
    color: var(--text-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Glassmorphism Utilities */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    /* More rounded */
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Specific Smaller Container for Auth/Register Pages */
.container-small {
    max-width: 550px;
    /* Compact form */
    margin: 40px auto;
}

/* Header */
header {
    text-align: center;
    margin-bottom: 30px;
    animation: fadeInDown 0.8s ease-out;
}

header img {
    height: auto;
    /* Maintain aspect ratio */
    width: 100%;
    /* Fill container width */
    max-width: 100%;
    object-fit: cover;
    /* content cover to fill if needed, or contain */
    border-radius: 12px;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(to right, #818cf8, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

p.subtitle {
    color: var(--text-muted);
    font-size: 1rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
    filter: brightness(1.1);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    margin-left: 5px;
}

/* Input Group for Icons */
.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 15px;
    color: var(--text-muted);
    z-index: 10;
    transition: color 0.3s;
    pointer-events: none;
}

.form-control {
    width: 100%;
    padding: 14px 16px;
    padding-left: 45px;
    /* Space for icon */
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
    transition: all 0.3s;
}

/* Make standard inputs check for icon presence via adjacent sibling or parent class if complex, 
   but for simplicity we'll assume most inputs in this new style have icons. 
   If no icon, inline style or class modification needed. Here we default to with-icon style. */

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
    background: rgba(15, 23, 42, 0.8);
}

.form-control:focus+.input-icon,
.input-group:focus-within .input-icon {
    color: var(--primary-color);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

/* Sidebar & Admin Layout */
.admin-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background: rgba(15, 23, 42, 0.95);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding: 20px;
    border-right: 1px solid var(--glass-border);
    z-index: 1000;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
}

.sidebar-header {
    margin-bottom: 40px;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--glass-border);
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 8px;
    border-radius: 10px;
    transition: 0.2s;
    font-weight: 500;
}

.nav-link i {
    width: 24px;
    margin-right: 10px;
    text-align: center;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(99, 102, 241, 0.1);
    color: var(--text-light);
}

.nav-link.active {
    background: var(--primary-color);
    color: white;
}

.main-content {
    margin-left: var(--sidebar-width);
    padding: 30px;
    /* width: 100%; Removed to fix overflow */
    transition: margin-left 0.3s ease;
}

/* Stats Grid */
.grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

.stat-card i {
    font-size: 2.5rem;
    margin-bottom: 15px;
    opacity: 0.9;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tables */
.table-responsive {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(15, 23, 42, 0.4);
}

th,
td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
    white-space: nowrap;
}

th {
    background: rgba(30, 41, 59, 0.8);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.5);
    cursor: pointer;
    border: none;
    color: white;
    font-size: 1.2rem;
}

/* Alerts */
.alert {
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid transparent;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: #1e293b;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 30px;
    width: 90%;
    max-width: 500px;
    /* Increased slightly for better fit */
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    max-height: 90vh;
    /* Limit height */
    overflow-y: auto;
    /* Enable scrolling */
    display: flex;
    flex-direction: column;

    /* Hide scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.modal-content::-webkit-scrollbar {
    display: none;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.modal-text {
    color: var(--text-muted);
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .modal-content {
        max-height: 85vh;
        /* Limit height on mobile */
        overflow-y: auto;
        /* Enable vertical scrolling */
        margin-top: 10px;
        /* Slight top margin */
    }
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.modal-btn {
    padding: 10px 25px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.modal-btn-confirm {
    background: var(--primary-color);
    color: white;
}

.modal-btn-confirm:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

.modal-btn-cancel {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
}

.modal-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}


/* Responsive Media Queries */
@media (max-width: 768px) {

    /* Sidebar Mobile */
    .sidebar {
        transform: translateX(-100%);
        width: 100%;
        max-width: 300px;
    }

    .sidebar.active {
        transform: translateX(0);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
    }

    .main-content {
        margin-left: 0;
        padding: 20px 15px;
    }

    .mobile-toggle {
        display: flex;
    }

    /* Container */
    .container,
    .container-small {
        padding: 15px;
        width: 100%;
        max-width: 100%;
    }

    h1 {
        font-size: 1.8rem;
    }

    /* Grid */
    .grid-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-card i {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }

    .stat-label {
        font-size: 0.8rem;
    }

    .row {
        flex-direction: column;
        gap: 15px !important;
    }

    .row .form-group {
        width: 100%;
        min-width: 100% !important;
        flex: none !important;
    }

    /* Ensure images in forms don't overflow */
    .form-group img {
        max-width: 100%;
        height: auto;
    }

    /* Force reduce padding on glass panels with inline styles */
    .glass-panel {
        padding: 15px !important;
    }

    /* Header Image Mobile */
    header img {
        height: auto;
        max-height: none;
        width: 100%;
    }
}