/* =====================================================
   ADMIN DASHBOARD BANNER
===================================================== */

.dashboard-banner {

    position: relative;

    overflow: hidden;

    background: linear-gradient(
        135deg,
        #0f172a,
        #1e3a8a
    );

}

.dashboard-banner::before {

    content: "";

    position: absolute;

    top: -80px;

    right: -80px;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    background: rgba(255,255,255,.05);

}

.dashboard-banner::after {

    content: "";

    position: absolute;

    bottom: -120px;

    left: -120px;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: rgba(255,255,255,.04);

}

/* =====================================================
   ADMIN ACTION CARDS
===================================================== */

.dashboard-card {

    position: relative;

    overflow: hidden;

}

.dashboard-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(
        90deg,
        var(--primary-color),
        var(--success-color)
    );

}

.dashboard-card:hover {

    transform: translateY(-10px);

}

.dashboard-card:hover i {

    transform: scale(1.15);

    transition: var(--transition);

}

/* =====================================================
   STATISTICS
===================================================== */

.stat-card {

    position: relative;

}

.stat-card::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: var(--primary-color);

    border-radius: 0 0 var(--border-radius) var(--border-radius);

}

/* =====================================================
   SEARCH & FILTER BAR
===================================================== */

.filter-bar {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    margin-bottom: 30px;

}

.filter-bar input,

.filter-bar select {

    flex: 1;

    min-width: 220px;

    padding: 14px 18px;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    outline: none;

    font-family: "Poppins", sans-serif;

}

.filter-bar input:focus,

.filter-bar select:focus {

    border-color: var(--primary-color);

}

/* =====================================================
   TABLE
===================================================== */

.table-container {

    background: rgba(255,255,255,.75);

    backdrop-filter: blur(18px);

    border-radius: var(--border-radius);

    overflow-x: auto;

    box-shadow: var(--shadow-md);

}

table {

    width: 100%;

    border-collapse: collapse;

}

thead {

    background: var(--primary-color);

    color: white;

}

thead th {

    padding: 18px;

    text-align: left;

}

tbody td {

    padding: 18px;

    border-bottom: 1px solid #e5e7eb;

}

tbody tr {

    transition: var(--transition);

}

tbody tr:hover {

    background: rgba(37,99,235,.05);

}

/* =====================================================
   STATUS BADGES
===================================================== */

.badge {

    display: inline-block;

    padding: 7px 15px;

    border-radius: 30px;

    font-size: .8rem;

    font-weight: 600;

    color: white;

}

.pending {

    background: var(--warning-color);

}

.assigned {

    background: #3b82f6;

}

.progress {

    background: var(--primary-color);

}

.resolved {

    background: var(--success-color);

}

.closed {

    background: #64748b;

}

/* =====================================================
   PRIORITY BADGES
===================================================== */

.priority-high {

    background: var(--danger-color);

}

.priority-medium {

    background: var(--warning-color);

}

.priority-low {

    background: var(--success-color);

}

/* =====================================================
   ACTION BUTTONS
===================================================== */

.action-buttons {

    display: flex;

    gap: 10px;

}

.action-btn {

    padding: 10px 16px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    color: white;

    font-size: .85rem;

    transition: var(--transition);

}

.view-btn {

    background: var(--primary-color);

}

.edit-btn {

    background: var(--warning-color);

}

.delete-btn {

    background: var(--danger-color);

}

.action-btn:hover {

    transform: translateY(-2px);

}

/* =====================================================
   RECENT COMPLAINTS
===================================================== */

.complaint-card {

    border-left: 6px solid var(--primary-color);

}

/* =====================================================
   EMPTY STATE
===================================================== */

.empty-state {

    text-align: center;

    padding: 50px;

}

.empty-state i {

    font-size: 3rem;

    color: var(--primary-color);

    margin-bottom: 20px;

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:992px) {

    .filter-bar {

        flex-direction: column;

    }

}

@media (max-width:768px) {

    .action-buttons {

        flex-direction: column;

    }

    table {

        min-width: 800px;

    }

}

@media (max-width:480px) {

    .dashboard-banner h1 {

        font-size: 2rem;

    }

    .stat-card {

        padding: 25px;

    }

}
/* =====================================================
   ADMIN LOGIN PAGE
===================================================== */

.login-section {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #f3f4f6;

    padding: 30px;

}

/* =====================================================
   LOGIN CARD
===================================================== */

.login-card {

    width: 100%;

    max-width: 900px;

    background: transparent;

    animation: fadeUp .6s ease;

}

.login-card h1 {

    text-align: center;

    font-size: 3rem;

    font-weight: 800;

    color: #111827;

    margin-bottom: 60px;

}

/* =====================================================
   LOGIN FORM
===================================================== */

.login-card form {

    display: flex;

    flex-direction: column;

    gap: 28px;

}

.input-group {

    display: flex;

    flex-direction: column;

}

.input-group label {

    font-size: 1.15rem;

    font-weight: 600;

    color: #111827;

    margin-bottom: 10px;

}

.input-group input {

    width: 100%;

    height: 60px;

    padding: 0 20px;

    font-size: 1.05rem;

    font-family: "Plus Jakarta Sans", sans-serif;

    background: #ffffff;

    border: 1px solid #d1d5db;

    border-radius: 8px;

    transition: all .3s ease;

}

.input-group input:focus {

    outline: none;

    border-color: #2563EB;

    box-shadow: 0 0 0 4px rgba(37,99,235,.15);

}

/* =====================================================
   LOGIN BUTTON
===================================================== */

.login-btn {

    width: 100%;

    height: 64px;

    margin-top: 15px;

    border: none;

    border-radius: 40px;

    background: #243858;

    color: white;

    font-size: 1.1rem;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}

.login-btn:hover {

    background: #1E40AF;

    transform: translateY(-2px);

}

/* =====================================================
   ERROR MESSAGE
===================================================== */

#login-error {

    text-align: center;

    margin-top: 20px;

    color: #dc2626;

    font-weight: 600;

    min-height: 24px;

}

/* =====================================================
   OPTIONAL LOGO
===================================================== */

.login-logo {

    display: flex;

    justify-content: center;

    margin-bottom: 25px;

}

.login-logo img {

    width: 90px;

    height: 90px;

    object-fit: contain;

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 768px) {

    .login-card {

        max-width: 100%;

    }

    .login-card h1 {

        font-size: 2.3rem;

        margin-bottom: 40px;

    }

    .input-group input {

        height: 55px;

    }

    .login-btn {

        height: 58px;

    }

}

@media (max-width: 480px) {

    .login-section {

        padding: 20px;

    }

    .login-card h1 {

        font-size: 2rem;

    }

}