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

body {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:#f4f7fa;
    color:#333;

    display:flex;
    flex-direction:column;

    min-height:100vh;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* =====================
HEADER
===================== */
header{
    background:#2c3e50;
    color:white;
    padding:15px 20px;
    position:relative;
}

.header-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.hamburger-btn{
    background:none;
    border:none;
    color:white;
    font-size:22px;
    cursor:pointer;
}

/* =====================
MENU
===================== */
.nav-menu {
    display: none;
    position: absolute;
    right: 10px;
    top: 60px;

    background: #2c3e50;
    padding: 15px;
    border-radius: 10px;

    min-width: 180px;     /* ✅ FIX WIDTH */
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);

    z-index: 1000;
}

.nav-menu.active{
    display:block;
}

.nav-menu ul {
    padding: 0;
    margin: 0;
}

.nav-menu li {
    list-style: none;
    margin: 10px 0;
    color: white;
    text-align: center;
}

.nav-menu button {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: none;
    cursor: pointer;

    background: #e74c3c;
    color: white;
    font-weight: 600;
}

.nav-menu button:hover {
    background: #c0392b;
}

.nav-menu li:first-child {
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 8px;
}
.filter-controls select,
.filter-controls input,
.filter-controls button {
    height: 38px;              /* ✅ same height */
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
    box-sizing: border-box;
}
.filter-controls {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    align-items: end;   /* 🔥 aligns all controls */
}
.filter-controls button {
    background: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.filter-controls button:hover {
    background: #2980b9;
}
.filter-controls select {
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    height: 38px;
    padding: 6px 35px 6px 10px; /* space for arrow */

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}
.filter-controls label {
    margin-bottom: 5px;
    font-size: 13px;
    color: #555;
}
/* =====================
MAIN
===================== */
main {
    flex: 1;
    padding: 30px 40px;
    width: 100%;
    /*height: 100%;*/
}

footer {
    background:#34495e;
    color:white;
    text-align:center;
    padding:10px;
}

#chart-container {
    transition: all 0.3s ease;
}

/* animation classes */
.chart-fade-out {
    opacity: 0;
    transform: translateX(-20px);
}

.chart-fade-in {
    opacity: 1;
    transform: translateX(0);
}

.dashboard-container {
    width: 100%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

/* right side controls */
.chart-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* buttons styling (optional polish) */
.chart-controls button {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
}

.chart-controls button:hover {
    background: #f0f0f0;
}

/* week label */
#week-label {
    font-weight: 600;
    color: #555;
}

.auth-page{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:40px;
    gap:60px;
}

/* LEFT SIDE TEXT (facebook vibe) */
.auth-page::before{
    white-space:pre-line;
    font-size:42px;
    font-weight:700;
    color:#1877f2;
    max-width:400px;
    line-height:1.2;
}

/* small tagline */
.auth-page::after{
    position:absolute;
    left:40px;
    top:60%;
    font-size:18px;
    color:#444;
}

/* LOGIN CONTAINER CARD */
.auth-page .login-container{
    background:white;
    padding:25px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    width:100%;
    max-width:380px;
}

/* TITLE */
.auth-page h2{
    text-align:center;
    border:none;
    margin-bottom:10px;
}

/* INPUT FIELDS */
.auth-page input{
    width:100%;
    padding:12px;
    margin-bottom:12px;
    border-radius:8px;
    border:1px solid #ddd;
    transition:0.2s;
}

.auth-page input:focus{
    border-color:#1877f2;
    outline:none;
    box-shadow:0 0 0 2px rgba(24,119,242,0.2);
}

/* LOGIN BUTTON */
.auth-page .btn-primary{
    width:100%;
    padding:12px;
    font-size:16px;
    font-weight:600;
    background:#1877f2;
}

.auth-page .btn-primary:hover{
    background:#166fe5;
}

/* EXTRA BUTTON (if exists) */
.auth-page button:not(.btn-primary){
    width:100%;
    padding:12px;
    border-radius:8px;
    background:#42b72a;
    color:white;
    border:none;
    margin-top:10px;
    font-weight:600;
}

.auth-page button:not(.btn-primary):hover{
    background:#36a420;
}

.auth-page{
    height:calc(100vh - 120px); /* adjust if header/footer size changes */
    min-height:unset; /* remove previous 100vh */
    padding:20px;
    overflow:hidden; /* 🚫 no scroll */
}

/* remove extra spacing causing overflow */
main.auth-page{
    padding:20px;
}

/* make login box fit nicely */
.auth-page .login-container{
    max-height:100%;
    overflow:auto; /* if form grows, only inside scroll */
}

/* =====================
registration
===================== */
/* main layout (same feel as login) */
body{
    height:100vh;
}

/* MAIN LAYOUT */
main:has(.register-container){
    display:flex;
    justify-content:center;
    align-items:center;
    height:calc(100vh - 120px); /* header + footer space */
    padding:5px 15px;   /* 🔻 reduced gap */
    gap:10px;           /* 🔻 reduced spacing */
    position:relative;
    overflow:hidden;    /* 🚫 no scroll */
}

/* LEFT TEXT */
main:has(.register-container)::before{
    white-space:pre-line;
    font-size:38px;
    font-weight:700;
    color:#1877f2;
    max-width:350px;
    line-height:1.2;
}

/* TAGLINE */
main:has(.register-container)::after{
    position:absolute;
    left:20px;
    top:60%;
    font-size:16px;
    color:#444;
}

/* REGISTER CARD */
.register-container{
    background:white;
    padding:18px; /* 🔻 tighter */
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    width:100%;
    max-width:360px;
    max-height:100%;
    overflow:auto; /* scroll only inside if needed */
}

/* TITLE */
.register-container h2{
    text-align:center;
    border:none;
    margin-bottom:10px;
}

/* INPUTS */
.register-container input{
    width:100%;
    padding:10px;
    margin-bottom:10px;
    border-radius:8px;
    border:1px solid #ddd;
    transition:0.2s;
}

.register-container input:focus{
    border-color:#1877f2;
    outline:none;
    box-shadow:0 0 0 2px rgba(24,119,242,0.2);
}

/* PRIMARY BUTTON */
.register-container .btn-primary{
    width:100%;
    padding:10px;
    font-size:15px;
    font-weight:600;
    background:#1877f2;
}

.register-container .btn-primary:hover{
    background:#166fe5;
}

/* SECONDARY BUTTON */
.register-container button:not(.btn-primary){
    width:100%;
    padding:10px;
    border-radius:8px;
    background:#42b72a;
    color:white;
    border:none;
    margin-top:8px;
    font-weight:600;
}

.register-container button:not(.btn-primary):hover{
    background:#36a420;
}

/* =====================
TYPOGRAPHY
===================== */
h2{
    font-size:1.8rem;
    margin-bottom:15px;
    border-bottom:2px solid #3498db;
    padding-bottom:5px;
}

h3{
    margin-bottom:15px;
}

/* =====================
BUTTONS
===================== */
.btn-primary{
    background:#3498db;
    color:white;
    border:none;
    padding:10px 16px;
    border-radius:6px;
    cursor:pointer;
    transition:0.2s;
}

.btn-primary:hover{
    background:#2980b9;
}

.btn-danger {
    background: #e74c3c;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.btn-danger:hover {
    background: #c0392b;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-danger:active {
    transform: scale(0.95);
}

/* =====================
STATS (FIXED)
===================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 4px;
}
.stat-card{
    flex:1;
    background:white;
    padding:20px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.stat-card h4{
    color:#666;
    margin-bottom:10px;
}

.stat-card p{
    font-size:26px;
    color:#3498db;
    font-weight:600;
}

/* =====================
BUTTON SPACING
===================== */
#add-task-btn{
    margin-bottom:15px;
    margin-top:6px;
}

/* =====================
CARDS (IMPROVED)
===================== */
.cards-wrapper {
    display: grid;
    grid-template-columns: minmax(400px, 490px) 1fr;
    gap: 20px;
}

.card {
    background:white;
    padding:20px;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
    width: 100%;

    display:flex;
    flex-direction:column;

    overflow: hidden;   /* ✅ prevents overflow */
}

.card canvas {
    width: 100% !important;
    max-width: 100%;
    height: 250px !important;
}

/* =====================
TABLE
===================== */
.table-responsive {
    width: 100%;
    overflow-x: auto;   /* ✅ enables scroll instead of breaking layout */
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    min-width: 700px;   /* ✅ allows scroll instead of squeezing */
}

th, td{
    padding:10px;
    border-bottom:1px solid #eee;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

th{
    background:#3498db;
    color:white;
}

/* column widths */
th:nth-child(1), td:nth-child(1){ width:120px; }
th:nth-child(2), td:nth-child(2){ width:80px; text-align:center; }
th:nth-child(3), td:nth-child(3){ width:120px; }
th:nth-child(4), td:nth-child(4){ width:140px; }
th:nth-child(5), td:nth-child(5){ width:auto; }
th:nth-child(6), td:nth-child(6){ width:120px; }
th:nth-child(7), td:nth-child(7){ width:100px; }

tbody tr{
    transition:0.2s;
}

tbody tr:hover{
    background:#f1f6fb;
}

/* =====================
FORM
===================== */
main form{
    background:white;
    padding:20px;
    border-radius:8px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

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

.form-group{
    flex:1;
    margin-bottom:15px;
}

label{
    display:block;
    margin-bottom:5px;
    font-weight:600;
}

input, textarea{
    width:100%;
    padding:8px;
    border:1px solid #ddd;
    border-radius:4px;
}

textarea{
    resize:vertical;
}

/* =====================
MODAL
===================== */
.modal{
    display:none;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
}

.modal-content{
    background:white;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    padding:20px;
    border-radius:10px;
    width:90%;
    max-width:600px;
}

.close{
    float:right;
    font-size:24px;
    cursor:pointer;
}

/* remove double card */
.modal-content form{
    background:none;
    box-shadow:none;
    padding:0;
}

/* =====================
PAGINATION
===================== */
#pagination{
    display:flex;
    justify-content:center;
    margin-top:15px;
    gap:5px;
}

#pagination button{
    padding:6px 10px;
    border:none;
    border-radius:4px;
    cursor:pointer;
    background:#ddd;
}

#pagination button.active{
    background:#3498db;
    color:white;
}

/* =====================
RESPONSIVE
===================== */
@media(max-width:900px){
    .auth-page{
        flex-direction:column;
        text-align:center;
    }

    .auth-page::before,
    .auth-page::after{
        position:static;
        font-size:22px;
        margin-bottom:20px;
    }
}

@media(max-width:600px){

    th, td{
        font-size:12px;
        padding:6px;
    }

    .form-row{
        flex-direction:column;
    }
}
/* =====================
FULL RESPONSIVE FIX
===================== */

/* Tablets */
@media (max-width: 1024px) {

    main {
        padding: 20px;
    }

    .cards-wrapper {
        grid-template-columns: 1fr; /* stack */
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {

    main {
        padding: 15px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .cards-wrapper {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 15px;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    #add-task-btn {
        width: 100%;
    }
}

/* Small Mobile */
@media (max-width: 480px) {

    main {
        padding: 10px;
    }

    .stat-card p {
        font-size: 20px;
    }

    th, td {
        font-size: 11px;
    }
}