html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: 'Poppins', sans-serif; /* softer, cleaner font */
}

.wrapper {
    flex: 1;
    display: flex;
    min-height: 100vh; /* ensures wrapper always fills screen */
}

/* --- Sidebar --- */
.sidebar {
    background: #718355;
    width: 240px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    box-shadow: 2px 0 8px rgba(255, 105, 180, 0.15);
    position: sticky;
    top: 0;
}

.blinky-logo {
    max-width: 120px;
    margin-bottom: 30px;
}


/* Logout button pinned at bottom */
.logout-form {
    margin-top: auto;
    width: 100%;
    text-align: center;
}

.logout {
    width: 80%;
    padding: 10px;
    border-radius: 25px;
    border: none;
    background-color: #fff;
    color: #718355;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

    .logout:hover {
        background-color: #87986a;
        color: #fff;
    }

/* --- Main Content --- */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    min-height: 100vh;
    overflow-x: hidden;
}

main {
    flex: 1;
    padding: 1rem;
    overflow: auto;
}

/* Footer */
footer {
    background-color: #ffffff;
    padding: 0.75rem 1rem;
    font-weight: bold;
    color: black;
    text-align: center;
}

/* --- Tabs --- */
.tab-button {
    background-color: transparent;
    border: none;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 15px 15px 0 0;
    margin-right: 10px;
    font-size: 0.95rem;
    transition: background-color 0.3s ease;
}

    .tab-button.active {
        background-color: #fdf3d2;
        color: black;
    }

/* --- Card --- */
.card-entry {
    background-color: #b8e3f6;
    padding: 15px;
    border-radius: 20px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Search */
.search-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

    .search-wrapper input {
        border-radius: 10px;
        padding: 5px 10px;
        border: 1px solid #ccc;
    }

/* Background section */
.bg-section {
    background-color: #d4efff;
    padding: 20px;
    border-radius: 0 0 20px 20px;
}

/* --- History --- */
.history {
    background-color: #cfe1b9;
    border-radius: 20px;
    padding: 20px;
    height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px #718355;
    scrollbar-width: thin;
    scrollbar-color: #718355 #cfe1b9;
}

    .history::-webkit-scrollbar {
        width: 8px;
    }

    .history::-webkit-scrollbar-track {
        background: #cfe1b9;
        border-radius: 10px;
    }

    .history::-webkit-scrollbar-thumb {
        background-color: #718355;
        border-radius: 10px;
    }

        .history::-webkit-scrollbar-thumb:hover {
            background-color: #001d00;
        }

/* Table */
.tablehis {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
}

    .tablehis th,
    .tablehis td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #718355;
    }

    .tablehis th {
        background-color: #87986a;
        color: #fff;
        font-weight: bold;
    }

    .tablehis tr:last-child td {
        border-bottom: none;
    }

/* Parent container for both sort blocks */
.sort-wrapper {
    display: flex;
    gap: 40px; /* space between Action and Category */
    flex-wrap: wrap; /* auto stack on small screens */
    align-items: flex-end;
    margin-bottom: 20px;
}

/* Each sort block */
.sorthis {
    display: flex;
    flex-direction: column; /* label on top of select */
    font-family: 'Cooper', sans-serif;
}

    /* Labels */
    .sorthis label {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px;
        color: #001d00;
    }

    /* Dropdowns */
    .sorthis select {
        padding: 8px 12px;
        border: 2px solid #001d00;
        border-radius: 25px;
        background-color: #97a97c;
        color: white;
        font-weight: bold;
        font-size: 14px;
        outline: none;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 5px rgba #e9f5db;
    }

        .sorthis select:hover,
        .sorthis select:focus {
            background-color: #e9f5db;
            color: black;
            border-color: #001d00;
        }



    /*sidebars*/
ul.sidebarmenu {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

    ul.sidebarmenu .menu {
        margin-bottom: 16px;
    }

    ul.sidebarmenu .menu1 {
        display: block;
        padding: 12px 20px;
        border-radius: 25px;
        font-weight: 600;
        font-size: 1rem;
        color: #fff;
        text-decoration: none;
        text-align: center;
        transition: all 0.3s ease;
    }

        ul.sidebarmenu .menu1:hover {
            background-color: #e9f5db;
            color: #718355;
        }

        ul.sidebarmenu .menu1.active {
            background-color: #e9f5db;
            color: #718355;
        }

/*ADMIN ACCOUNT*/
.accounts {
    background-color: #cfe1b9;
    border-radius: 20px;
    padding: 20px;
    height: 80vh;
    width: 100%; /* responsive instead of fixed vh */
    max-width: 100%;
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* avoid double scrollbars */
    scrollbar-width: thin;
    scrollbar-color: #ffb6c1 #ffe4ec;
}

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

.search-bar {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ccc;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 2px 5px #718355;
}

    .search-bar input {
        border: none;
        padding: 8px 12px;
        outline: none;
        font-size: 14px;
    }

    .search-bar button {
        background: none;
        border: none;
        font-size: 16px;
        padding: 8px 12px;
        cursor: pointer;
    }

.table-container {
    flex: 1;
    overflow-x: auto; /* horizontal scrolling */
    overflow-y: auto; /* vertical scrolling */
    border-radius: 15px;
    background: white;
    box-shadow: 0px 2px 8px #718355;
}

    .table-container table {
        min-width: 800px; /* triggers horizontal scroll if too many columns */
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }

    .table-container thead tr:first-child {
        background-color: #87986a;
    }

    .table-container thead tr:nth-child(2) {
        background-color: #87986a;
    }

    .table-container th,
    .table-container td {
        padding: 12px;
        border: 1px solid #718355;
        font-size: 14px;
    }

    .table-container tbody td {
        height: 50px;
        background-color: #e9f5db;
    }

    /* Sticky header */
    .table-container thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }
/* eye trivia*/



.eyetrivia {
    background-color: #cfe1b9; /* soft pink bubble */
    border-radius: 20px;
    padding: 20px;
    height: 80vh; /* fixed height for the bubble */
    overflow-y: auto; /* internal scroll */
    box-shadow: 0 4px 12px #718355;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #718355 #cfe1b9;
}

    .eyetrivia::-webkit-scrollbar-track {
        background: #cfe1b9;
        border-radius: 10px;
    }

    .eyetrivia::-webkit-scrollbar-thumb {
        background-color: #cfe1b9;
        border-radius: 10px;
    }

        .eyetrivia::-webkit-scrollbar-thumb:hover {
            background-color: #cfe1b9;
        }

/* Header section (Add + Search) */
.eyetrivia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

/* Add trivia button */
.addtriv {
    background-color: #87986A;
    color: #fff;
    padding: 8px 15px;
    border-radius: 15px;
    border: #cfe1b9;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
}

    .addtriv:hover {
        background-color: #718355;
    }


.form-triv {
    display: flex;
    flex-direction: column; /* stack label + input vertically */
    align-items: flex-start; /* left-align contents */
    margin-bottom: 15px;
    width: 100%;
}

    .form-triv label {
        font-weight: bold;
        color: #718355;
        margin-bottom: 5px;
        width: 100%;
        text-align: left; /* ensure label text is left-aligned */
    }

    .form-triv input,
    .form-triv textarea,
    .form-triv .form-control {
        border-radius: 10px;
        border: 1px solid #718355;
        padding: 12px 10px; /* taller padding */
        font-size: 14px;
        width: 310%; /* fill container */
        box-sizing: border-box;
        min-height: 45px; /* taller boxes */
    }

    .form-triv textarea {
        min-height: 120px; /* taller textarea */
        resize: vertical;
    }

/* Container for the buttons */
.form-triv-buttons {
    display: flex;
    gap: 10px; /* space between buttons */
    margin-top: 10px; /* spacing from inputs */
    width: 100%;
}

#triviaForm button {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

.addedtriv, .canceltriv {
    background-color: #87986a;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
    margin-bottom: 20px;
}

.canceltriv {
    background-color: #3a452b;
}

    .addedtriv:hover {
        background-color: #001d00;
        color: white;
        box-shadow: 0 4px 8px rgba(244, 173, 198, 0.4);
        transform: scale(1.05);
    }

    .canceltriv:hover {
        background-color: #001d00;
        color: white;
        box-shadow: 0 4px 8px rgba(244, 173, 198, 0.4);
        transform: scale(1.05);
    }



/* Table styling */
.eyetriv {
    width: 100%;
    border-collapse: collapse;
    border-radius: 15px;
    background: #fff;
    overflow: hidden;
    border: 1px solid #f8c6d8;
}

    .eyetriv th,
    .eyetriv td {
        padding: 10px;
        text-align: left;
    }

    .eyetriv th {
        text-align: center;
        background-color: #87986a;
        color: #fff;
    }

    .eyetriv td {
        padding: 10px;
        border-bottom: 1px solid #718355;
    }


/* Action buttons */
.edittriv, .deletetriv {
    border: none;
    padding: 6px 10px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    margin: 0 3px;
    transition: background-color 0.2s;
}

.edittriv {
    background-color: #97a97c;
    color: white;
}

    .edittriv:hover {
        background-color: #001d00;
    }

.deletetriv {
    background-color: #718355;
    color: white;
}

    .deletetriv:hover {
        background-color: #001d00;
    }

.viewtriv {
    color: #001d00;
    text-decoration: none;
    font-weight: bold;
}

    .viewtriv:hover {
        color: #97a97c;
    }



.form-triv label {
    font-weight: bold;
    color: #718355;
}

/* Eye tips Page */

/* Container */
.eyetipss {
    background-color: #cfe1b9;
    border-radius: 20px;
    padding: 20px;
    height: 80vh; /* fixed height for the bubble */
    overflow-y: auto; /* internal scroll */
    box-shadow: 0 4px 12px #718355;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #718355 #cfe1b9;
}

/* Search Form */
.search-tips-form {
    display: flex;
    justify-content: flex-end;
}


/* Add Tip Button */
.addtip {
    background-color: #87986a;
    border: none;
    color: #fff;
    padding: 8px 15px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
}

    .addtip:hover {
        background-color: #718355;
    }




/* Table */
.tiptable {
    margin-top: 20px;
}

.tabletip {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 2px 8px #cfe1b9;
}

    .tabletip th {
        background-color: #87986a;
        color: white;
        padding: 10px;
        text-align: left;
        font-size: 14px;
        border-bottom: 1px solid #718355;
    }

    .tabletip td {
        padding: 10px;
        font-size: 14px;
        border-bottom: 1px solid #718355;
    }

/* Edit & Delete Buttons */
.edittip, .deletetip {
    border: none;
    padding: 6px 10px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    margin: 0 3px;
    transition: background-color 0.2s;
}

.edittip {
    background-color: #97a97c;
    color: white;
}

    .edittip:hover {
        background-color: #001d00;
    }

.deletetip {
    background-color: #718355;
    color: white;
}

    .deletetip:hover {
        background-color: #001d00;
    }
.form-tip {
    display: flex;
    flex-direction: column; /* stack label + input vertically */
    align-items: flex-start; /* left-align contents */
    margin-bottom: 15px;
    width: 100%;
}

    .form-tip label {
        font-weight: bold;
        color: #718355;
        margin-bottom: 5px;
        width: 100%;
        text-align: left; /* ensure label text is left-aligned */
    }

    .form-tip input,
    .form-tip textarea,
    .form-tip .form-control {
        border-radius: 10px;
        border: 1px solid #718355;
        padding: 12px 10px; /* taller padding */
        font-size: 14px;
        width: 310%; /* like your form-triv style */
        box-sizing: border-box;
        min-height: 45px; /* taller boxes */
    }

    .form-tip textarea {
        min-height: 120px; /* taller textarea */
        resize: vertical;
    }

/* Container for the buttons */
.form-tip-buttons {
    display: flex;
    gap: 10px; /* space between buttons */
    margin-top: 10px; /* spacing from inputs */
    width: 100%; /* align with inputs */

}

.addedtip, .canceltip {
    background-color: #87986a;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
    margin-bottom: 20px;
}

.canceltip {
    background-color: #3a452b;
}

.addedtip:hover {
    background-color: #001d00;
    color: white;
    box-shadow: 0 4px 8px rgba(244, 173, 198, 0.4);
    transform: scale(1.05);
}

.canceltip:hover {
    background-color: #001d00;
    color: white;
    box-shadow: 0 4px 8px rgba(244, 173, 198, 0.4);
    transform: scale(1.05);
}
.viewtips {
    color: #001D00;
    text-decoration: none;
    font-weight: bold;
}

    .viewtips:hover {
        color: #97A97C;
    }

/* Container */
.eyeissue {
    background-color: #cfe1b9;
    border-radius: 20px;
    padding: 20px;
    height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px #718355;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #718355 #cfe1b9;
}

.eyeissue::-webkit-scrollbar-track {
    background: #cfe1b9;
    border-radius: 10px;
}

.eyeissue::-webkit-scrollbar-thumb {
    background-color: #cfe1b9;
    border-radius: 10px;
}

    .eyeissue::-webkit-scrollbar-thumb:hover {
        background-color: #cfe1b9;
    }

/* Add Issue Button */
.addissue {
    background-color: #87986a;
    color: #fff;
    padding: 8px 15px;
    border-radius: 15px;
    border: none;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
}

    .addissue:hover {
        background-color: #718355;
    }


/* Form Section */
/* Eye Issue Form Fields */
.form-issue {
    display: flex;
    flex-direction: column; /* stack label + input vertically */
    align-items: flex-start; /* left-align contents */
    margin-bottom: 15px;
    width: 100%;
}

    .form-issue label {
        font-weight: bold;
        color: #718355;
        margin-bottom: 5px;
        width: 100%;
        text-align: left;
    }

    .form-issue input,
    .form-issue textarea,
    .form-issue .form-control {
        border-radius: 10px;
        border: 1px solid #718355;
        padding: 12px 10px; /* taller padding */
        font-size: 14px;
        width: 310%; /* like your form-triv style */
        box-sizing: border-box;
        min-height: 45px; /* taller boxes */
    }

    .form-issue textarea {
        min-height: 120px; /* taller textarea */
        resize: vertical;
    }

/* Buttons container - side by side */
.issuebuttons {
    display: flex;
    gap: 10px; /* space between buttons */
    margin-top: 10px; /* spacing from inputs */
    width: 100%; /* align with inputs */
}

.saveissue,
.cancelissue {
    background-color: #87986a;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
    margin-bottom: 20px;
}

.cancelissue {
    background-color: #3a452b;
}

    .saveissue:hover,
    .cancelissue:hover {
        background-color: #001d00;
        color: white;
        box-shadow: 0 4px 8px rgba(244, 173, 198, 0.4);
        transform: scale(1.05);
    }


/* Table */
.tableissue {
    margin-top: 20px;
    overflow-x: auto;
}

.issuetable {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(255, 105, 180, 0.15);
}

    .issuetable th {
        background-color: #87986A;
        color: white;
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #718355;
    }

    .issuetable td {
        padding: 10px;
        border-bottom: 1px solid #718355;
    }

.editi, .deletei {
    border: none;
    padding: 6px 10px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    margin: 0 3px;
    transition: background-color 0.2s;
}

.editi {
    background-color: #97a97c;
    color: white;
}

    .editi:hover {
        background-color: #001d00;
    }

.deletei {
    background-color: #718355;
    color: white;
}

    .deletei:hover {
        background-color: #001d00;
    }

.viewi {
    color: #001d00;
    text-decoration: none;
    font-weight: bold;
}

    .viewi:hover {
        color: #97a97c;
    }

/*EYE LIBRARY*/
/* Tabs container */
.eyelibrary {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Each tab item */
.eyelib {
    margin: 0 5px;
}

/* Tab link */
.eyelibra {
    margin-bottom: -39px;
    margin-left: -5px;
    display: block;
    padding: 10px 20px;
    padding-bottom: 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    text-decoration: none;
    font-weight: bold;
    color: #001D00; 
    transition: all 0.3s ease;
}

    /* Active tab */
    .eyelibra.active {
        background-color: #cfe1b9;
        color: #001D00;
        border-bottom: 2px solid #cfe1b9; /* blend with background so it looks raised */
    }

    /* Hover effect */
    .eyelibra:hover {
        background-color: #cfe1b9;
        color: #5e2c4c;
    }


/*achievements css*/

.achievements {
    background-color: #cfe1b9;
    border-radius: 20px;
    padding: 20px;
    height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px #718355;
    display: flex;
    flex-direction: column;
    
}
    /* Scrollable section */
    .achievements .content {
        flex: 1;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #718355 #cfe1b9;
        padding-right: 5px;
    }


/* Add Achievement Button */
.addach {
    background-color: #87986a;
    border: none;
    color: #fff;
    padding: 8px 15px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
}

    .addach:hover {
        background-color: #718355;
    }



/* Table */
.tableach {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 2px 8px rgba(255, 182, 193, 0.3);
}

    .tableach th {
        background-color: #87986a;
        color: white;
        padding: 10px;
        text-align: left;
        font-size: 14px;
        border-bottom: 1px solid #718355;
    }

    .tableach td {
        padding: 10px;
        font-size: 14px;
        border-bottom: 1px solid #718355;
    }

/* Edit & Delete Buttons */
.editach, .deleteach {
    border: none;
    padding: 6px 10px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    margin: 0 3px;
    transition: background-color 0.2s;
}

.editach {
    background-color: #97a97c;
    color: white;
}

    .editach:hover {
        background-color: #001d00;
    }

.deleteach {
    background-color: #718355;
    color: white;
}

    .deleteach:hover {
        background-color: #001d00;
    }

/* Achievement Form Fields */
.form-ach {
    display: flex;
    flex-direction: column; /* stack label + input vertically */
    align-items: flex-start; /* left-align contents */
    margin-bottom: 15px;
    width: 100%;
}

    .form-ach label {
        font-weight: bold;
        color: #718355;
        margin-bottom: 5px;
        width: 100%;
        text-align: left;
    }

    .form-ach input,
    .form-ach textarea,
    .form-ach .form-control {
        border-radius: 10px;
        border: 1px solid #718355;
        padding: 12px 10px; 
        font-size: 14px;
        width: 310%; 
        box-sizing: border-box;
        min-height: 45px; 
    }

    .form-ach textarea {
        min-height: 120px; 
        resize: vertical;
    }

/*buttons*/
.achbut {
    display: flex;
    gap: 10px; 
    margin-top: 10px; 
    width: 100%; 
}

.addedach,
.cancelach {
    background-color: #87986a;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
    margin-bottom: 20px;
}

.cancelach {
    background-color: #3a452b;
}

    .addedach:hover,
    .cancelach:hover {
        background-color: #001d00;
        color: white;
        box-shadow: 0 4px 8px rgba(244, 173, 198, 0.4);
        transform: scale(1.05);
    }


::-webkit-scrollbar {
    width: 10px; /* thickness */
}

::-webkit-scrollbar-track {
    background: #001d00; /* light pink track */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #cfe1b9; /* soft pink thumb */
    border-radius: 10px;
    border: 2px solid #ffe4ec; /* gives it some spacing */
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #87986a; /* darker pink on hover */
    }

/*wardrobe css*/

.wardrobe{
    background-color: #cfe1b9;
    border-radius: 20px;
    padding: 20px;
    height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px #718355;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #718355 #cfe1b9;
}

.wardrobe::-webkit-scrollbar-track {
    background: #cfe1b9;
    border-radius: 10px;
}

.wardrobe::-webkit-scrollbar-thumb {
    background-color: #cfe1b9;
    border-radius: 10px;
}

    .wardrobe::-webkit-scrollbar-thumb:hover {
        background-color: #cfe1b9;
    }


/* Header section (Add Item + Search) */
.wardrobe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

/* Add item button */
.addward {
    background-color: #87986a;
    color: #fff;
    padding: 8px 15px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
}

    .addward:hover {
        background-color: #97a97c;
        color: white;
    }

.clear-btn {
    background: none;
    border: none;
    cursor: pointer;
}

/* Table styling */
.wardrobe-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(255, 105, 180, 0.15);
}

.wardrobe-table th {
    background-color: #87986A;
    color: white;
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #718355;
}

    .wardrobe-table td {
        padding: 10px;
        border-bottom: 1px solid #718355;
    }

  .editward, .deleteward {
    display: inline-flex; /* ✅ para magkatabi */
    align-items: center;
    justify-content: center;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    margin: 0 3px;
    transition: background-color 0.2s, transform 0.2s;
    vertical-align: middle; /* para pantay sila */
}

.editward {
    background-color: #97a97c;
    color: white;
    text-decoration: none;
}

    .editward:hover {
        background-color: #001d00;
        color: white;
        transform: scale(1.1);
    }

.deleteward {
    background-color: #718355;
    color: white;
}

    .deleteward:hover {
        background-color: #001d00;
        transform: scale(1.1);
    }

/* Wardrobe Form Fields */

.wardrobe-form-container {
    background-color: #cfe1b9; /* base background */
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 12px #718355;
    position: relative;
    overflow: hidden; /* ensure bubbles stay inside */
}

    /* Bubble Effect */
    .wardrobe-form-container::before {
        content: "";
        position: absolute;
        top: -50px;
        left: -50px;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 10%, transparent 10%) repeat;
        background-size: 100px 100px; /* size of bubbles */
        z-index: 0; /* behind the form */
        pointer-events: none;
    }

    /* Ensure the form content is above the bubbles */
    .wardrobe-form-container .wardrobe-form {
        position: relative;
        z-index: 1;
    }

.wardrobe-form .form-group {

    display: flex;
    flex-direction: column; /* stack label + input vertically */
    align-items: flex-start; /* left-align contents */
    margin-bottom: 15px;
    width: 100%;
}

.wardrobe-form .form-label {
    font-weight: bold;
    color: #718355;
    margin-bottom: 5px;
    width: 100%;
    text-align: left;
}

.wardrobe-form .wardrobe-input {
    border-radius: 10px;
    border: 1px solid #718355;
    padding: 12px 10px; /* taller padding */
    font-size: 14px;
    width: 310%; /* consistent with other forms */
    box-sizing: border-box;
    min-height: 45px; /* taller boxes */
}

.wardrobe-form textarea.wardrobe-input {
    min-height: 120px; /* taller textarea */
    resize: vertical;
}

.wardrobe-form select.wardrobe-input {
    min-height: 45px;
}

/* Buttons container - side by side */
.form-buttons {
    display: flex;
    gap: 10px; /* space between buttons */
    margin-top: 10px;
    width: 100%; /* align with inputs */
}

.addedward,
.cancelward {
    background-color: #87986a;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
    margin-bottom: 20px;
    text-decoration: none; /* for anchor cancelward */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cancelward {
    background-color: #3a452b;
}

    .addedward:hover,
    .cancelward:hover {
        background-color: #001d00;
        color: white;
        box-shadow: 0 4px 8px rgba(244, 173, 198, 0.4);
        transform: scale(1.05);
    }

/* Feedback Header */
.feedback-header {
    display: flex;
    justify-content: space-between; /* title on left, search on right */
    align-items: center;
    margin-bottom: 20px;
}

/* Search Form */
.search-form {
    display: flex;
}

/* Search container */
.search-container {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 25px;
    padding: 5px 12px;
    box-shadow: 0 2px 5px #718355;
    margin-right: -150px;
}

/* Search icon */
.search-icon {
    font-size: 16px;
    color: #718355;
}

/* Search input */
.search-container input[type="text"] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    width: 200px; /* adjust as needed */
}

    /* Optional: input focus effect */
    .search-container input[type="text"]:focus {
        outline: none;
    }

/* Feedback Bubble Container */
.feedback-bubble-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    min-height: 300px; /* space for centering if empty */
    position: relative;
}

/* Bubble Style */
.feedback-bubble {
    background: #f1f1f1;
    border-radius: 20px;
    padding: 15px 20px;
    max-width: 500px;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

    /* Little bubble tail */
    .feedback-bubble::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 20px;
        border-width: 10px;
        border-style: solid;
        border-color: #f1f1f1 transparent transparent transparent;
    }

/* Feedback date */
.feedback-date {
    font-size: 0.8rem;
    color: #888;
    display: block;
    margin-bottom: 8px;
}

/* Feedback message */
.feedback-message {
    margin: 0;
    font-size: 1rem;
    color: #333;
}

/* Center the 'no feedback' message */
.no-feedback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: bold;
    color: #aaa;
    text-align: center;
}




/* General page style */
body {
    margin: 0;
    font-family: 'Comic Sans MS', 'Poppins', sans-serif;
    background: url('/images/adminbg.png') no-repeat center center fixed;
    background-size: cover;
}

/* Container for left (cat) + right (form) */
.login-container {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 40px;
}

/* Left side: Cat image */
.login-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-image {
    width: 500px;
    max-width: 100%;
}

/* Right side: Titles + form */
.login-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #4b4b00;
    padding: 20px;
}

    .login-right h1 {
        font-size: 36px;
        font-weight: bold;
        margin: 0 0 10px 0;
        color: #001D00;
    }

    .login-right h2 {
        font-size: 24px;
        font-weight: bold;
        margin: 10px 0 30px 0;
        color: #718355;
    }

/* Form */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
    gap: 15px;
}

/* Input wrapper for admin code */
.password-wrapper {
    position: relative;
    width: 100%;
}

    .password-wrapper input.admin-input {
        width: 100%;
        padding: 12px 45px 12px 12px;
        border-radius: 20px;
        border: none;
        text-align: center;
        color: #354222;
        font-weight: bold;
        font-family: 'Comic Sans MS', 'Poppins', sans-serif;
        box-sizing: border-box;
        outline: none;
    }

/* Toggle eye icon */
.toggle-visibility {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #354222;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Login button */
.login-btn {
    background-color: #718355;
    color: #e9f5db;
    font-weight: bold;
    border: none;
    padding: 10px 25px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    min-width: 150px; /* smaller than input */
    text-align: center;
}

    .login-btn:hover {
        background-color: #001d00;
        color:white;
    }

/* Error message */
.error {
    color: red;
    margin-top: 10px;
    font-size: 14px;
}

.hamburger {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: #ff69b4;
    background: none;
    border: none;
    margin-left: auto; /* push to right */
    margin-top: 10px;
}

@media screen and (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: -250px;
        height: 100%;
        width: 250px;
        background: #ffb6c1;
        transition: left 0.3s ease;
        flex-direction: column;
        justify-content: flex-start;
        z-index: 1200;
        box-shadow: 2px 0 8px rgba(0,0,0,0.2); 
    }

        .sidebar.active {
            left: 0;
        }

    /* hamburger visible sa mobile */
    .hamburger {
        display: block;
        position: fixed;
        top: 15px;
        left: 15px;
        font-size: 1.5rem;
        z-index: 1300;
        background: none;
        border: none;
        cursor: pointer;
    }

    ul.sidebarmenu {
        flex-direction: column;
        gap: 15px;
    }

    .greeting {
        font-size: 15px;
        margin-left: 25px;
    }
    .addtriv {
        background-color: #ffb6c1;
        color: #fff;
        padding: 5px 10px;
        border-radius: 15px;
        border: none;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.2s;
        font-size: 15px;
        margin-left: 25px;
    }

    .addtip {
        background-color: #ffb6c1;
        border: none;
        color: #fff;
        border-radius: 15px;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.2s;
        padding: 5px 10px;
        font-size: 15px;
        margin-left: 25px;
    }

    .addissue {
        background-color: #ffb6c1;
        color: #fff;
        border-radius: 15px;
        border: none;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.2s;
        padding: 5px 10px;
        font-size: 15px;
        margin-left: 25px;
    }

    .addach {
        background-color: #ffb6c1;
        border: none;
        color: #fff;
        border-radius: 15px;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.2s;
        padding: 5px 10px;
        font-size: 15px;
        margin-left: 25px;
    }

    .addward {
        background-color: #ffb6c1;
        color: #fff;
        border-radius: 15px;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.2s;
        padding: 5px 10px;
        font-size: 15px;
        margin-left: 25px;
    }

    .form-tip input,
    .form-tip textarea,
    .form-control {
        font-size: 13px;
        padding: 6px;
        max-width: 100%; /* fill container on small screens */
    }
}