/* =====================================================
   GANESH PUJA - KARYA BANTAN ADMIN
===================================================== */

* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f5f7fb;

    color: #222;
}


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

.admin-header {

    width: 100%;

    min-height: 75px;

    background:
        linear-gradient(
            135deg,
            #0b7a35,
            #1565c0
        );

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 25px;

    gap: 15px;
}


.admin-logo {

    display: flex;

    align-items: center;

    gap: 12px;
}


.admin-logo img {

    width: 55px;

    height: 55px;

    object-fit: contain;

    border-radius: 50%;

    background: #fff;

    padding: 3px;
}


.admin-logo h2 {

    margin: 0;

    font-size: 20px;
}


.admin-logo p {

    margin: 3px 0 0;

    font-size: 13px;

    opacity: .9;
}


.back-btn {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 9px 14px;

    background: #fff;

    color: #0b7a35;

    border-radius: 7px;

    text-decoration: none;

    font-weight: 700;

    font-size: 14px;
}


.back-btn:hover {

    background: #eeeeee;
}


/* =====================================================
   PAGE TITLE
===================================================== */

.page-title {

    text-align: center;

    padding: 25px 15px 15px;
}


.page-title h1 {

    margin: 0;

    color: #0b7a35;

    font-size: 28px;
}


.page-title p {

    margin: 7px 0 0;

    color: #666;

    font-size: 14px;
}


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

.karya-container {

    width: min(
        1200px,
        94%
    );

    margin: 0 auto 40px;

    display: grid;

    grid-template-columns:
        minmax(320px, 420px)
        minmax(0, 1fr);

    gap: 22px;

    align-items: start;
}


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

.karya-card {

    background: #fff;

    border-radius: 12px;

    padding: 20px;

    box-shadow:
        0 4px 18px
        rgba(
            0,
            0,
            0,
            .08
        );

    border: 1px solid #e5e7eb;
}


.karya-card h2 {

    margin: 0 0 18px;

    color: #0b7a35;

    font-size: 20px;
}


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

.karya-card label {

    display: block;

    margin: 12px 0 6px;

    font-weight: 700;

    color: #333;

    font-size: 14px;
}


.karya-card input,
.karya-card select,
.karya-card textarea {

    width: 100%;

    padding: 11px 12px;

    border:
        1px solid #d1d5db;

    border-radius: 7px;

    background: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    outline: none;
}


.karya-card input:focus,
.karya-card select:focus,
.karya-card textarea:focus {

    border-color: #0b7a35;

    box-shadow:
        0 0 0 3px
        rgba(
            11,
            122,
            53,
            .10
        );
}


.karya-card textarea {

    resize: vertical;
}


/* =====================================================
   TIME
===================================================== */

.time-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}


/* =====================================================
   MEMBER LIST
===================================================== */

.member-list {

    width: 100%;

    max-height: 240px;

    overflow-y: auto;

    border:
        1px solid #d1d5db;

    border-radius: 8px;

    background: #fafafa;

    padding: 5px;
}


.member-option {

    display: flex !important;

    align-items: center;

    gap: 9px;

    margin: 0 !important;

    padding: 9px 8px;

    border-radius: 6px;

    cursor: pointer;

    font-weight: normal !important;
}


.member-option:hover {

    background: #eaf6ee;
}


.member-option input {

    width: auto;

    margin: 0;

    cursor: pointer;
}


.member-option span {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.member-option strong {

    font-size: 13px;

    color: #222;
}


.member-option small {

    font-size: 11px;

    color: #777;
}


/* =====================================================
   MESSAGES
===================================================== */

.loading-text,
.empty-text,
.error-text {

    margin: 15px;

    text-align: center;

    color: #777;

    font-size: 14px;
}


.error-text {

    color: #d32f2f;
}


/* =====================================================
   LEADER
===================================================== */

#leaderSelect {

    border-color: #f0a000;
}


.leader-help {

    margin: 5px 0 0;

    color: #777;

    font-size: 11px;
}


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

.form-buttons {

    display: flex;

    gap: 10px;

    margin-top: 20px;
}


.form-buttons button {

    border: none;

    border-radius: 7px;

    padding: 11px 16px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;
}


.save-btn {

    flex: 1;

    background:
        linear-gradient(
            135deg,
            #0b7a35,
            #16a34a
        );

    color: #fff;
}


.clear-btn {

    background: #eeeeee;

    color: #333;
}


.save-btn:hover {

    opacity: .9;
}


.clear-btn:hover {

    background: #ddd;
}


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

.list-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}


.list-header h2 {

    margin-bottom: 3px;
}


.list-header p {

    margin: 0;

    color: #777;

    font-size: 12px;
}


/* =====================================================
   PDF BUTTON
===================================================== */

.pdf-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    white-space: nowrap;

    border: none;

    border-radius: 8px;

    padding: 12px 17px;

    background:
        linear-gradient(
            135deg,
            #c62828,
            #e53935
        );

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 3px 8px
        rgba(
            0,
            0,
            0,
            .15
        );
}


.pdf-btn:hover {

    opacity: .9;
}


/* =====================================================
   TASK CARD
===================================================== */

.task-card {

    background: #fafafa;

    border:
        1px solid #e1e5ea;

    border-left:
        5px solid #0b7a35;

    border-radius: 9px;

    padding: 15px;

    margin-bottom: 13px;
}


.task-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 10px;
}


.task-number {

    display: inline-block;

    font-size: 11px;

    color: #1565c0;

    font-weight: 700;

    margin-bottom: 3px;
}


.task-card h3 {

    margin: 0;

    font-size: 17px;

    color: #222;
}


.delete-task-btn {

    border: none;

    background: #ffebee;

    color: #c62828;

    border-radius: 6px;

    padding: 7px 10px;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


.delete-task-btn:hover {

    background: #ffcdd2;
}


/* =====================================================
   TASK INFO
===================================================== */

.task-info {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 5px 15px;

    margin-top: 12px;

    padding: 10px;

    background: #fff;

    border-radius: 7px;
}


.task-info p {

    margin: 0;

    font-size: 12px;

    color: #555;
}


.task-info strong {

    color: #333;
}


/* =====================================================
   LEADER BOX
===================================================== */

.leader-box {

    margin-top: 10px;

    padding: 9px 11px;

    background: #fff8e1;

    border:
        1px solid #ffe082;

    border-radius: 7px;

    color: #6d4c00;

    font-size: 13px;
}


/* =====================================================
   ASSIGNED MEMBERS
===================================================== */

.assigned-box {

    margin-top: 10px;

    font-size: 13px;
}


.assigned-members {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 7px;
}


.assigned-member {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 6px 8px;

    background: #e8f5e9;

    color: #155724;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 700;
}


.assigned-member small {

    font-size: 9px;

    opacity: .75;
}


.leader-member {

    background: #fff3cd;

    color: #7a5700;

    border:
        1px solid #ffe08a;
}


.other-member {

    background: #e3f2fd;

    color: #0d47a1;
}


/* =====================================================
   NOTE
===================================================== */

.task-note {

    margin-top: 10px;

    padding: 9px 11px;

    background: #f1f5f9;

    border-radius: 7px;

    font-size: 12px;

    color: #555;
}


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

@media (max-width: 850px) {

    .karya-container {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {

    .admin-header {

        padding:
            10px 12px;

    }


    .admin-logo img {

        width: 45px;

        height: 45px;

    }


    .admin-logo h2 {

        font-size: 15px;

    }


    .admin-logo p {

        font-size: 11px;

    }


    .back-btn {

        padding:
            7px 9px;

        font-size: 11px;

    }


    .page-title {

        padding-top: 18px;

    }


    .page-title h1 {

        font-size: 23px;

    }


    .karya-container {

        width: 94%;

        gap: 15px;

    }


    .karya-card {

        padding: 15px;

    }


    .time-row {

        grid-template-columns: 1fr;

    }


    .list-header {

        flex-direction: column;

        align-items: stretch;

    }


    .pdf-btn {

        width: 100%;

    }


    .task-info {

        grid-template-columns: 1fr;

    }


    .task-top {

        flex-direction: column;

    }


    .delete-task-btn {

        width: 100%;

    }

}