/* ============== CSS VARIABLES ================== */

/* colors */
:root {--color-primary: #6f6af8;
    --color-primary-light: hsl(242, 91%, 69%, 18%);
    --color-primary-variant: #5854c7;
    --color-red: #da0f3f;
    --color-red-light: hsl(346, 87%, 46%, 15%);
    --color-green: #00c476;
    --color-green-light: hsl(156, 100%, 38%, 15%);
    --color-gray-900: #1e1e66;
    --color-gray-700: #2d2b7c;
    --color-gray-300: rgba(242, 242, 254, 0.3);
    --color-gray-200: rgba(242, 242, 254, 0.7);
    --color-white: #f2f2fe;
    --color-bg: #0f0f3e;

    --transition: all 300ms ease;

    --container-width-lg: 89%;
    --container-width-md: 88%;
    --form-width: 40%;

    --card-border-radius-1: 0.3rem;
    --card-border-radius-2: 0.5rem;
    --card-border-radius-3: 0.8rem;
    --card-border-radius-4: 2rem;
    --card-border-radius-5: 5rem;
}
/* ============== CSS VARIABLES END ==================== */

/* ..................................................... */

/* ================ GENERAL STYLING ==================== */

* {
    margin: 0; 
    padding: 0; 
    outline: 0;
    border: 0;
    appearance: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
} 

/* Body */
 .admin-page {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: rgb(255, 255, 255); /* chnaged */
    overflow-x: hidden;
    background-color: rgb(19, 18, 18); /* chnaged */
    font-size: 0.9rem;
}
 

/* H Ones */
h1, h2, h3, h4, h5 {
    color: rgb(245, 239, 239); /* chnaged */
    line-height: 1.3;
}

h1{
    font-size: 3rem;
    margin: 1rem 0;
} 
h2 {
    font-size: 1.7rem;
    margin: 1rem 0;
}
h3 {
    font-size: 1.1;
    margin: 0.8rem 0 0.5rem;
}
h4 {
    font-size: 1rem;
}

/*Links */
a {
    color: black; /* chnaged */
    transition: var(--transition);   
}
/* Img */
img {
    display: block;
    width: 100%;
    object-fit: cover;
}

/* ================ GENERAL STYLING REND==================== */

/* ......................................................... */


/* ======================================= THE GENERAL FORM ======================================= */
.page-wrapper {
 margin-top: 7rem;
 margin-bottom: 16rem;
}
.form-section{
    display: grid;
    place-items: center;
    height: 100vh;
}

.form-section-container {
    width: var(--form-width);
}  

.alert-message {
    padding: 0.8rem;
    margin-bottom: 1rem;
    border-radius: var(--card-border-radius-2);
}
.alert-message.error {
    background: var(--color-red-light);
    color: var(--color-red);
}
.alert-message.success {
    background: var(--color-green-light);
    color: var(--color-green);
}
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-control {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;  
}
.form-control.inline {
    flex-direction: row;
    align-items: center;
} 
input, textarea, select {
    padding: 0.8rem 1.4rem;
    background-color: rgb(65, 64, 64);
    border-radius: var(--card-border-radius-2);
    resize: none;
    color: var(--color-white);
}
.form-section small {
    margin-top: 1rem;
    display: block;
}
.form-section small a {
    color: rgb(6, 112, 233);
}
/* ======================================= THE GENERAL FORM ======================================= */

/* ................................................................................................ */

/* ========================================= BUTTON SECTION  ======================================*/
.btn {
    display: inline-block;
    width: fit-content;
    padding: 0.6rem 1.2rem;
    background-color: rgb(6, 112, 233);
    border-radius: var(--card-border-radius-2);
    cursor: pointer;
    transition: var(--transition);
    color: var(--color-white);
}

.btn.sm {
    background: rgb(201, 98, 3);
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
}

.btn.danger {
    background: var(--color-red);
}

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

/* ====================================== BUTTON SECTION  END =======================================*/

/* ................................................................................................ */

/* ===================================== THE ADMIN SECTION STYLE =================================== */

/* Aside Bar Styling */

.dashboard {
    margin-top: 7rem;
}
.sidebar-toggle {
    display: none;
}
.dashboard-container {
    display: grid;
    grid-template-columns: 14rem auto;
    color: white;
    gap: 1rem;
    background:black;
    padding: 2rem;
    margin-bottom: 5rem;
}

.dashboard aside a {
    background-color: gray;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.6rem;
}
.dashboard aside ul li:not(:last-child) a {
    border-bottom: 1px solid black;
}
.dashboard aside a:hover {
    background: rgb(63, 62, 62);
}
.dashboard aside a.active {
    background-color: rgb(63, 62, 62);
}

/* Main Styling */
.dashboard main {
    margin-left: 1.5rem;
}

.dashboard main h2 {
    margin: 0 0 2rem 0;
    line-height: 1;
}
.dashboard main table {
    width: 100%;
    text-align: left;
}
.dashboard main table th {
    background: gray;
    padding:0.8rem;
    color: var(--color-white);  
}

.dashboard main table td {
    padding: 0.8rem;
    border-bottom: 1px solid var(--color-gray-200); 
}

.dashboard main table tr:hover td {
    background-color: rgb(34, 34, 34);
    color: var(--color-white);
    cursor: default;
    transition: var(--transition);
}
/* =================== ADMIN SECTION END ========================== */


/* ................................................................ */


/* ======================================= THE RESPONSIVE DESIGN ================================== */

/* MEDIUM DEVICES ..................................*/

@media screen and (max-width: 1024px) {

       /* GENERAL FORM */
       .page-wrapper {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
    .form-section-container {
        padding: 0;
        width: 80%;
        margin: 0;
    }

    /* ..................... */
    /* === ADMIN SECTION === */
    .dashboard {
        margin-top: 6rem;
    }
    .sidebar-toggle {
        display: none;
    }
    .dashboard-container {
        grid-template-columns: 4.3rem auto;
        padding: 0;
        background: transparent;
    }

    .dashboard aside h5 {
        display: none;
    }
    .dashboard main table thead {
        display: none;
    }
    .dashboard main table tr {
        display: flex;
        flex-direction: column;
    }
    .dashboard main table tr:nth-child(even) {
        background: rgb(54, 54, 54);
    }
    .dashboard main table tr:hover td {
        background: transparent;
    }
}
/* MEDIUM DEVICES END ==================================*/

/* ....................................................*/

/* SMALL DEVICES ======================================*/

@media screen and (max-width: 600px) {
   
   /* GENERAL FORM */
.page-wrapper {
    margin-top: 4rem;
    margin-bottom: 4rem;
}
.form-section-container {
    padding: 0;
    width: 90%;
    margin: 0;
}

/* ..................... */
/* === ADMIN SECTION === */
.dashboard {
    margin-top: 5rem;
}
.dashboard-container {
    grid-template-columns: 1fr;
    gap: 0;
}
.dashboard main {
    margin: 0;
}
.dashboard main h2 {
    margin-top: 1rem;
} 
.dashboard aside {
    position: fixed;
    box-shadow: 2rem 0 4rem rgba(0, 0, 0, 0.4);
    left: -100%;
    height: 100vh;
    transition: var(--transition);
    background: gray;
    z-index: 50;
}
.dashboard .sidebar-toggle {
    display: inline-block;
    background: gray;
    color: var(--color-white);
    position: fixed;
    right: 0;
    bottom: 4rem;
    z-index: 1;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50% 0 0 50%;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: -1rem 0 2rem rgba(0, 0, 0, 0.4);   
}
.dashboard aside a h5 {
    display: inline-block;
}

#hide-sidebar-btn {
    display: none;
}
}