.ManualBtn {
    position: relative;
    display: inline-block;
}

.dropdown-menu-manual {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ManualBtn:hover .dropdown-menu-manual,
.dropdown-menu-manual:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Beginner fix: force-hide the dropdown right after a click, even
   while the mouse is technically still over it. The JS clears this
   class again once the mouse actually leaves the Manual button area,
   so hovering it fresh will show the list normally. */
.dropdown-menu-manual.Manualclosed {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
}

.dropdown-menu-manual li {
    padding: 0;
}

.dropdown-menu-manual li a {
    display: block;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dropdown-menu-manual li a:hover {
    background-color: #28a745;
    color: white;
}

#formContainer {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

#formContainer h4 {
    margin-bottom: 15px;
    color: #28a745;
}

#formContainer label {
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

#formContainer input:not([type="hidden"]) {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

#formContainer .sex-options {
    height: auto;
    overflow: visible;
}

#formContainer input:not([type="radio"]):not([type="hidden"]) {
    display: block;
}

#formContainer > label {
    display: block;
}

.sex-options {
    border: 0;
    padding: 0;
    margin: 8px 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sex-options > [id="sexOptionsTitle"] {
    flex-basis: 100%;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.sex-options > hr {
    flex-basis: 100%;
    width: 100%;
    margin: 0 0 2px;
}

.sex-options label {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.sex-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.sex-options span {
    display: block;
    padding: 9px 14px;
    border: 1px solid #b8cdbd;
    border-radius: 20px;
    background: #fff;
    color: #245c35;
    font-weight: 500;
    transition: .2s ease;
}

.sex-options label:hover span,
.sex-options input:checked + span {
    color: #fff;
    background: #28a745;
    border-color: #28a745;
    box-shadow: 0 3px 8px rgba(40, 167, 69, .2);
}

.sex-options input:focus-visible + span {
    outline: 2px solid #155d2d;
    outline-offset: 2px;
}

#formContainer input:focus {
    border-color: #28a745;
    outline: none;
    box-shadow: 0 0 4px rgba(40,167,69,0.3);
}

#formContainer button {
    display: inline-block;
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

#formContainer button[type="submit"] {
    /* Keep the submit action visible below the radio options. */
    position: relative;
    z-index: 1;
}

#formContainer button:hover {
    background-color: #218838;
}

#formContainer button:disabled {
    opacity: .65;
    cursor: wait;
}

.attendance-success-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(25, 55, 35, .45);
}

.attendance-success-card {
    position: relative;
    width: min(420px, 100%);
    padding: 1.25rem;
    border-top: 5px solid #28a745;
    border-radius: 14px;
    background: #fff;
    text-align: center;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .2);
}

.attendance-success-card h4 {
    color: #28a745;
    margin: 0 0 10px;
}

.attendance-success-card p {
    margin: 0;
    color: #555;
}

.attendance-modal-close {
    position: absolute;
    top: 7px;
    right: 12px;
    border: 0;
    background: transparent;
    color: #555;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.error-message {
    color: #dc3545;
    font-size: 13px;
    margin-top: -8px;
    margin-bottom: 10px;
    display: none;
}

.success-message {
    color: #28a745;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

#AutoBtn {
    margin-left: 8px;
}

.rfid-guide-container {
    display: block;                    
    padding: 30px 20px 25px 20px;   
    background: linear-gradient(135deg, #ffffff 0%, #f0faf3 100%);
    border: 2px solid #28a745;   
    border-radius: 16px;            
    box-shadow: none;
    text-align: center;             
    max-width: 420px;             
}

.rfid-image-wrapper {
    position: relative;               
    width: 200px;                    
    height: 200px;                  
    margin: 0 auto 16px auto;         
    overflow: hidden;                
    border-radius: 12px;              
    background: rgba(40, 167, 69, 0.05); 
    margin-bottom: 20px;
}

.rfid-image {
    position: absolute;              
    top: 0;
    left: 0;
    width: 100%;                     
    height: 100%;                     
    object-fit: contain;             
    border-radius: 8px;        
}

#holdImage {
    animation: rfidHoldCycle 6.4s ease-in-out infinite;
}

#scanImage {
    animation: rfidScanCycle 6.4s ease-in-out infinite;
}

@keyframes rfidHoldCycle {
    0%, 25%, 100% { opacity: 1; }
    50%, 75% { opacity: 0; }
}

@keyframes rfidScanCycle {
    0%, 25%, 100% { opacity: 0; }
    50%, 75% { opacity: 1; }
}
.rfid-guide-text {
    margin: 0;                      
    color: #28a745;                 
    font-size: 1.35rem;               
    font-weight: 600;                 
    letter-spacing: 0.5px;            
    text-shadow: 0 0 8px rgba(40, 167, 69, 0.2); 

    animation: rfidPulse 2s ease-in-out infinite;
}
#attendanceResult {
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.services-workflow-page .attendance-result-divider {
    width: 80%;
    margin: .5rem auto;
    border: 0;
    border-top: 2px dotted #28a745;
    opacity: 1;
}

.attendance-result-details {
    color: #28a745;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .5px;
    text-shadow: 0 0 8px rgba(40, 167, 69, .2);
    overflow-wrap: anywhere;
    animation: rfidPulse 2s ease-in-out infinite;
}

.attendance-detected-label,
.attendance-detail-line {
    margin: 0;
    line-height: inherit;
    letter-spacing: inherit;
    text-shadow: inherit;
}

.attendance-result-message {
    display: none;
}

.attendance-result-error .attendance-result-divider,
.attendance-result-error #attendanceDetails {
    display: none;
}

.attendance-result-error .attendance-result-message {
    display: block;
    color: #dc3545;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

.attendance-result-error #attendanceDetails {
    color: #dc3545;
    font-size: .9rem;
    text-align: center;
}

.attendance-result-success #attendanceDetails {
    display: block;
}

/* Keep controls and confirmation dialogs consistent across service workflows. */
.services-workflow-page .btn:not(.btn-close) {
    min-height: 42px;
    padding: .6rem 1rem;
    border-radius: .5rem;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.services-workflow-page .btn:not(.btn-close):hover,
.services-workflow-page .btn:not(.btn-close):focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 .35rem .8rem rgba(25, 55, 35, .16);
}

.services-workflow-page hr {
    border-color: #198754;
    border-width: 2px;
    margin: 1rem 0 1.25rem;
    opacity: .25;
}

.services-workflow-page .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(20, 45, 30, .2);
}

.services-workflow-page .modal {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
}

.services-workflow-page .modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

.services-workflow-page .modal-body,
.services-workflow-page .modal-body p,
.services-workflow-page .modal-body dt,
.services-workflow-page .modal-body dd,
.services-workflow-page .modal-body li,
.services-workflow-page .modal-footer .btn {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.services-workflow-page .modal-header {
    padding: 1rem 1.25rem;
    border: 0;
    background-color: #198754;
    color: #fff;
}

.services-workflow-page .modal-body {
    padding: 1.25rem;
}

.services-workflow-page .modal-footer {
    gap: .5rem;
    padding: 0 1.25rem 1.25rem;
    border: 0;
}

.services-workflow-page .attendance-success-card {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
}

.services-workflow-page .attendance-success-card h4 {
    font-size: 1.25rem;
    line-height: 1.35;
}

.services-workflow-page .attendance-success-card p {
    font-size: inherit;
    line-height: inherit;
}

.services-workflow-page .attendance-confirm-actions {
    justify-content: flex-start;
}

/* Keep circulation confirmation details aligned like the attendance review. */
.services-workflow-page .service-modal-details {
    line-height: 1.5;
}

.services-workflow-page .service-modal-details dt {
    font-weight: 600;
}

.services-workflow-page .service-modal-details dd {
    margin-bottom: .65rem;
}

#Borrowmodalfooter,
#Returnmodalfooter {
    justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce) {
    .services-workflow-page .btn:not(.btn-close) {
        transition: none;
    }

    .services-workflow-page .btn:not(.btn-close):hover,
    .services-workflow-page .btn:not(.btn-close):focus-visible {
        transform: none;
    }
}

/* Beginner fix: don't lock the Attendance page's box to a fixed
   550px anymore - that "overflow: hidden" above is what was clipping
   the bottom of longer forms (like Student). Letting it grow means
   the WHOLE PAGE just scrolls normally, instead of part of it being
   fixed/hidden. Scoped to #attendanceBox only so borrowing.php /
   returning.php / book_catalog.php keep their fixed-size look. */
#attendanceBox {
    height: auto;
    min-height: 550px;
    overflow: visible;
}

@keyframes rfidPulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 8px rgba(40, 167, 69, 0.2);
    }
    50% {
        transform: scale(1.06);
        text-shadow: 0 0 18px rgba(40, 167, 69, 0.45);
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 8px rgba(40, 167, 69, 0.2);
    }
}