:root {
    /* Colors for buttons */
    --c-button: #D5DCE1;
    --c-danger: var(--c-red);
    --c-confirm: #48bb78;
    --c-confirm-hover: #38a169;
    --c-button-hover: #B6C9D5;
    --c-button-text: var(--c-navy);
    --c-disabled: #cbd5e0;
    --c-disabled-text: var(--c-lightgrey);
}

/* Default button */
.btn, .btn-s, .btn-round {
    background: color-mix(in srgb, var(--c-mediumgrey) 10%, transparent);
    border: none;
    border-radius: var(--border-radius-sm);
    color: var(--c-darkgrey);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn {
    font-size: 1rem;
    font-weight: bold;
    padding: 0.75rem;
}

.btn img {
    height: 1.25rem;
    width: auto;
    vertical-align: middle;
}

.btn svg {
    height: 1.25rem;
    width: auto;
    vertical-align: middle;
}

.btn-s {
    font-size: 0.85rem;
    font-weight: bold;
    padding: 0.6rem;
    white-space: nowrap;
}

.btn-s img {
    height: 1rem;
    width: auto;
    vertical-align: middle;
}

.btn-s svg {
    height: 1rem;
    width: auto;
    vertical-align: middle;
}

.btn:hover:not(:disabled), .btn-s:hover:not(:disabled), .btn-round:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-mediumgrey) 30%, transparent);
}
.btn:disabled, .btn-s:disabled, .btn-round:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Round button */
.btn-round {
    border-radius: 50%;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 0;
    flex-shrink: 0;
}

.btn-round img {
    width: 1rem;
    height: 1rem;
    display: block;
}

.btn-round svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.btn-tick {
    background: var(--c-confirm);
}
.btn-tick:hover:not(:disabled) {
    background: var(--c-confirm-hover);
}

.btn-x {
    background: color-mix(in srgb, var(--c-mediumgrey) 30%, transparent);
}
.btn-x:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-mediumgrey) 50%, transparent);
}

/* Styling for cancel and confirmation buttons */
.btn-cancel {}
.btn-cancel:hover {}

.btn-confirm {
    background: var(--c-confirm);
    color: var(--c-white);
}

.btn-confirm:hover:not(:disabled) {
    background: var(--c-confirm-hover)
}

/* Transparent button, e.g. for cancellation and logging out */
.btn-red {
    background: color-mix(in srgb, var(--c-red) 10%, transparent);
    color: var(--c-red);
}

/* Transparent green button, e.g. for passing */
.btn-green {
    background: color-mix(in srgb, var(--c-green) 20%, transparent);
    color: var(--c-green);
}

.btn-red:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-red) 30%, transparent);
}

.btn-green:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-green) 40%, transparent);
}

/* Danger button, for deletions that require confirmation */
.btn-danger {
    background: var(--c-red);
    color: var(--c-white);
    border: none;
}

.btn-danger:hover:not(:disabled) {
    background: #c53030;
}

/* Edit button */
.btn-edit {
    /*padding: 8px 18px;*/
    background: var(--c-button);
    color: var(--c-navy);
    /*border-radius: 8px;*/
    /*font-size: 0.9rem;*/
    /*font-weight: 600;*/
    /*cursor: pointer;*/
    /*margin: 0;*/
    /*transition: background 0.15s, color 0.15s;*/
}

.btn-edit:hover:not(:disabled) {
    background: var(--c-button-hover);
}

/* ─── Profile button (in student table) ─────────────────────────────── */
.btn-profile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-profile:hover:not(:disabled) {
    outline: 1.5px solid var(--c-white);
}

#btn-student-profile {
    background: var(--student-gradient);
    color: var(--c-white);
}

#btn-teacher-profile {
    background: var(--teacher-gradient);
    color: var(--c-white);
}


.action-card-btn:hover:not(:disabled) {
    background: var(--c-confirm-hover);
}

.action-card-btn:disabled {
    color: rgba(255, 255, 255, 0.7) !important;
}

.action-card-btn:disabled img,
.action-card-btn:disabled svg {
    opacity: 0.5;
}

.action-card-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}


/* Unenroll button inside subject tags */
.btn-unenroll {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    color: var(--c-red);
    transition: color 0.15s;
}

.btn-unenroll:hover {
   color: var(--c-purple);
}

/* ── Pagination ─────────────────────────────────────────────────── */

.pagination-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.pagination-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.pagination-info {
    font-size: 0.85rem;
    color: #718096;
    margin-right: 8px;
}

.pagination-dots {
    padding: 0 4px;
    color: #a0aec0;
    font-size: 0.9rem;
}

.pagination-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--c-mediumgrey);
    border-radius: 6px;
    background: #fff;
    color: var(--c-mediumgrey);
    font-size: 0.875rem;
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.pagination-btn svg {
    width: 14px;
    height: 14px;
}

.pagination-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-mediumgrey) 20%, transparent);
    border-color: var(--c-navy);
}

.pagination-btn:disabled {
    color: color-mix(in srgb, var(--c-lightgrey) 50%, transparent);
    border-color: color-mix(in srgb, var(--c-lightgrey) 50%, transparent);
}

.pagination-btn.active {
    background: color-mix(in srgb, var(--c-mediumgrey) 20%, transparent);
}

/* Old code */
/*.btn-danger-sm {*/
/*    padding: 8px 18px;*/
/*    background: var(--c-red);*/
/*    color: #fff;*/
/*    border: none;*/
/*    border-radius: 8px;*/
/*    font-size: 0.9rem;*/
/*    font-weight: 600;*/
/*    cursor: pointer;*/
/*    margin: 0;*/
/*    transition: background 0.15s;*/
/*}*/

/*.btn-danger-sm:hover {*/
/*    background: #c53030;*/
/*}*/


/*button {*/
/*    margin: 5px 5px 10px 0;*/
/*    padding: 6px 12px;*/
/*    border: none;*/
/*    background-color: #007bff;*/
/*    color: white;*/
/*    border-radius: 4px;*/
/*    cursor: pointer;*/
/*}*/

/*button:disabled {*/
/*    background: var(--c-disabled) !important;*/
/*    color: var(--c-disabled-text) !important;*/
/*    border: none !important;*/
/*    box-shadow: none !important;*/
/*    cursor: not-allowed;*/
/*    opacity: 1;*/
/*}*/

/*button.active-request {*/
/*    background-color: #ffc107;*/
/*    color: #222;*/
/*}*/

@media (max-width: 700px) {
    .btn-label { display: none; }

    .pagination-btns {
        gap: 2px;
    }

    .pagination-info {
        font-size: 0.75rem;
        margin-right: 4px;
        white-space: nowrap;
    }

    .pagination-btn {
        min-width: 26px;
        height: 26px;
        padding: 0 4px;
        font-size: 0.8rem;
    }
}