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

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

body{
    background:#EFEBE9;
    font-family:Arial, sans-serif;
    color:#333;
    overflow-x:hidden;
}

/* =====================================
SCROLLBAR
===================================== */

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-thumb{
    background:#8D6E63;
    border-radius:10px;
}

::-webkit-scrollbar-track{
    background:#EFEBE9;
}

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

.login-box{
    width:380px;
    max-width:95%;
    background:white;
    margin:80px auto;
    padding:35px;
    border-radius:12px;
    box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.login-box h2{
    text-align:center;
    color:#4E342E;
    margin-bottom:25px;
    font-size:28px;
}

.login-box input{
    width:100%;
    padding:14px;
    margin-top:12px;
    border:1px solid #D7CCC8;
    border-radius:6px;
    font-size:16px;
    transition:0.3s;
}

.login-box input:focus{
    border-color:#6D4C41;
    outline:none;
    box-shadow:0 0 5px rgba(109,76,65,0.3);
}

.login-box button{
    width:100%;
    padding:14px;
    margin-top:18px;
    border:none;
    background:#6D4C41;
    color:white;
    border-radius:6px;
    cursor:pointer;
    font-size:16px;
    transition:0.3s;
}

.login-box button:hover{
    background:#4E342E;
}

/* =====================================
ALERTS
===================================== */

.error{
    background:#FFEBEE;
    color:#C62828;
    padding:12px;
    border-radius:6px;
    margin-bottom:15px;
    border-left:5px solid #C62828;
}

.success{
    background:#E8F5E9;
    color:#2E7D32;
    padding:12px;
    border-radius:6px;
    margin-bottom:15px;
    border-left:5px solid #2E7D32;
}

/* =====================================
SIDEBAR
===================================== */

.sidebar{
    width:250px;
    height:100vh;
    background:#4E342E;
    position:fixed;
    left:0;
    top:0;
    overflow-y:auto;
    z-index:1000;
}

.sidebar h2{
    color:white;
    text-align:center;
    padding:20px;
    margin:0;
    font-size:28px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.sidebar a{
    display:block;
    color:white;
    text-decoration:none;
    padding:15px 20px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    transition:0.3s;
    font-size:15px;
}

.sidebar a:hover{
    background:#6D4C41;
    padding-left:28px;
    color:white;
}

/* =====================================
MAIN CONTENT
===================================== */

.main-content{
    margin-left:250px;
    width:calc(100% - 250px);
    min-height:100vh;
    padding:20px;
}

/* =====================================
HEADER
===================================== */

.header{
    background:#6D4C41;
    color:white;
    padding:18px 22px;
    border-radius:10px;
    font-size:24px;
    font-weight:bold;
    margin-bottom:20px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

/* =====================================
CONTAINER
===================================== */

.container{
    width:100%;
}

/* =====================================
CARDS
===================================== */

.card{
    background:white;
    padding:20px;
    border-radius:10px;
    margin-bottom:20px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    width:100%;
    overflow:hidden;
}

.card h2,
.card h3{
    color:#4E342E;
    margin-bottom:20px;
}

/* =====================================
DASHBOARD
===================================== */

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:20px;
}

.stat-card{
    text-align:center;
    transition:0.3s;
}

.stat-card:hover{
    transform:translateY(-5px);
}

.stat-card h3{
    font-size:42px;
    color:#4E342E;
    margin-bottom:10px;
}

.stat-card p{
    color:#666;
    font-size:15px;
}

/* =====================================
FORMS
===================================== */

form{
    width:100%;
}

.row{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.col-md-3,
.col-md-4,
.col-md-6,
.col-md-12{
    flex:1;
    min-width:220px;
}

label{
    display:block;
    margin-bottom:6px;
    font-weight:bold;
    color:#4E342E;
}

.form-control,
input,
select,
textarea{
    width:100%;
    padding:12px;
    border:1px solid #D7CCC8;
    border-radius:6px;
    font-size:15px;
    background:white;
    transition:0.3s;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus{
    border-color:#6D4C41;
    outline:none;
    box-shadow:0 0 5px rgba(109,76,65,0.3);
}

/* =====================================
TABLES
===================================== */

.table-responsive{
    width:100%;
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
    min-width:700px;
}

table th,
table td{
    border:1px solid #ddd;
    padding:12px;
    text-align:left;
}

table th{
    background:#6D4C41;
    color:white;
}

table tr:nth-child(even){
    background:#FAFAFA;
}

table tr:hover{
    background:#F5F5F5;
}

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

.btn,
button{
    padding:12px 18px;
    background:#6D4C41;
    color:white;
    border:none;
    border-radius:6px;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    transition:0.3s;
    font-size:15px;
}

.btn:hover,
button:hover{
    background:#4E342E;
    color:white;
}

.btn-brown{
    background:#6D4C41;
    color:white;
}

.btn-brown:hover{
    background:#4E342E;
}

/* =====================================
QUICK LINKS
===================================== */

.quick-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

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

.badge{
    padding:8px 12px;
    border-radius:20px;
    color:white;
    font-size:12px;
    font-weight:bold;
}

.bg-success{
    background:#2E7D32;
}

.bg-danger{
    background:#C62828;
}

.bg-warning{
    background:#F9A825;
}

.bg-primary{
    background:#1565C0;
}

/* =====================================
UTILITIES
===================================== */

.mt-1{
    margin-top:10px;
}

.mt-2{
    margin-top:20px;
}

.mt-3{
    margin-top:30px;
}

.mb-1{
    margin-bottom:10px;
}

.mb-2{
    margin-bottom:20px;
}

.mb-3{
    margin-bottom:30px;
}

.text-center{
    text-align:center;
}

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

@media(max-width:768px){

    body{
        overflow-x:hidden;
    }

    /* SIDEBAR */
    .sidebar{
        width:100%;
        height:auto;
        position:relative;
    }

    .sidebar h2{
        font-size:24px;
        padding:18px;
    }

    .sidebar a{
        padding:14px;
        font-size:14px;
    }

    /* MAIN CONTENT */
    .main-content{
        margin-left:0;
        width:100%;
        padding:12px;
    }

    /* HEADER */
    .header{
        font-size:20px;
        padding:15px;
        text-align:center;
    }

    /* DASHBOARD */
    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .quick-links{
        flex-direction:column;
    }

    /* BUTTONS */
    .btn,
    button{
        width:100%;
        text-align:center;
    }

    /* CARDS */
    .card{
        padding:15px;
        border-radius:8px;
    }

    .card h2,
    .card h3{
        font-size:20px;
    }

    /* FORMS */
    .row{
        flex-direction:column;
    }

    .col-md-3,
    .col-md-4,
    .col-md-6,
    .col-md-12{
        width:100%;
        min-width:100%;
    }

    input,
    select,
    textarea{
        font-size:14px;
    }

    /* TABLES */
    .table-responsive{
        overflow-x:auto;
    }

    table{
        min-width:600px;
    }

    table th,
    table td{
        font-size:13px;
        padding:8px;
    }

    /* LOGIN */
    .login-box{
        margin-top:40px;
        padding:22px;
    }

    .login-box h2{
        font-size:24px;
    }

    /* STATS */
    .stat-card h3{
        font-size:32px;
    }
}