/* ==========================
   Global
========================== */

* {
    box-sizing: border-box;
}

body {

    margin: 0;
    min-height: 100vh;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #e0f2fe,
            #f8fafc
        );

    color: #1e293b;
}


/* ==========================
   Main Container
========================== */

.container {

    width: 100%;
    padding: 30px 15px;

    display: flex;
    justify-content: center;

}


/* ==========================
   Main Card
========================== */

.card {

    width: 100%;
    max-width: 750px;

    background: white;

    border-radius: 24px;

    padding: 35px;

    box-shadow:
        0 20px 40px rgba(0,0,0,0.08);

}


/* ==========================
   Header
========================== */

h1 {

    text-align: center;

    margin-top: 0;

    color: #2563eb;

    font-size: 32px;

}


.subtitle {

    text-align: center;

    color: #64748b;

    margin-bottom: 30px;

}


h2 {

    margin-top: 25px;

    font-size: 20px;

    color: #334155;

}


hr {

    border: none;

    height: 1px;

    background: #e2e8f0;

    margin: 25px 0;

}


/* ==========================
   Subject Selector
========================== */


.subject-row {

    display: flex;

    gap: 10px;

    margin-bottom: 12px;

}


.subject-row select {

    flex: 1;

}


select {

    width:100%;

    padding: 13px;

    border-radius: 12px;

    border:1px solid #cbd5e1;

    background:white;

    font-size:16px;

    cursor:pointer;

}


select:focus {

    outline:none;

    border-color:#2563eb;

}



/* ==========================
   Buttons
========================== */


button {

    width:100%;

    padding:14px;

    border:none;

    border-radius:14px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    margin-top:12px;

    transition:
        transform .2s,
        opacity .2s;

}


button:hover {

    transform:translateY(-2px);

    opacity:.9;

}



#addSubject {

    background:#64748b;

    color:white;

}


#generate {

    background:#2563eb;

    color:white;

}


#download {

    background:#16a34a;

    color:white;

}


/* ==========================
   Remove Button
========================== */


.remove-btn {

    width:auto;

    padding:0 15px;

    margin:0;

    background:#ef4444;

    color:white;

    border-radius:12px;

}


/* ==========================
   Checkboxes
========================== */


.check {

    display:flex;

    align-items:center;

    gap:10px;

    margin:15px 0;

    font-size:17px;

}


.check input {

    width:18px;

    height:18px;

    cursor:pointer;

}



/* ==========================
   Timetable Result
========================== */


#result {

    margin-top:30px;

}


.timetable-card {


    background:#f8fafc;

    border-radius:18px;

    padding:20px;

    margin-bottom:18px;

    border-left:

    5px solid #2563eb;

}


.timetable-card h3 {

    margin-top:0;

    color:#2563eb;

}


.paper {

    background:white;

    border-radius:12px;

    padding:12px;

    margin-top:10px;

    box-shadow:
    0 3px 10px rgba(0,0,0,.05);

    page-break-inside: avoid;

    break-inside: avoid;

}


/* ==========================
   Mobile
========================== */


@media(max-width:600px){

    .card {

        padding:22px;
        border-radius:18px;

    }


    h1 {

        font-size:25px;

    }


    .subject-row {

        flex-direction:row;
        align-items:center;
        gap:8px;

    }


    .subject-row select,
    .subject-row .ts-wrapper {

        flex:1;
        min-width:0;

    }


    .remove-btn {

        width:auto;
        height:52px;
        padding:0 16px;
        flex-shrink:0;

    }

}



/* Keep searchable subject box same as original */

.ts-wrapper {

    width:100%;

}


.ts-control {

    min-height:52px !important;

    height:52px !important;

    padding:13px !important;

    border-radius:12px !important;

    border:1px solid #cbd5e1 !important;

    background:white !important;

    font-size:16px !important;

}


.ts-control input {

    font-size:16px !important;

}


.ts-dropdown {

    width:100% !important;

    border-radius:12px !important;

}


.ts-wrapper.single .ts-control:after {

    margin-top:-3px;

}

.notice {

    margin-top:15px;

    padding:15px;

    background:#fef3c7;

    color:#92400e;

    border-left:5px solid #f59e0b;

    border-radius:12px;

    font-size:14px;

    line-height:1.5;

}