/* ==========================================================================
   Main Stylesheet: sw_asset/css/style.css
   ========================================================================== */

:root{
    /* Fonts */
    --font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

    /* Global Colors */
    --color-text: #4f6b72;
    --color-link: #c75f3e;
    --color-link-hover: #a04a2f;
    --color-bg-body: #f1ebfd;

    /* sButton Variables */
    --button-border-radius: 6px;
    --button-small-border-radius: 3px;

    /* Button Colors */
    --sbutton-blue: #007dc1;
    --sbutton-blue-dark: #0061a7;
    --sbutton-red: #d0451b;
    --sbutton-red-dark: #bc3315;
    --sbutton-cyan: #33bdef;
    --sbutton-cyan-dark: #019ad2;

    /* Button Borders */
    --sbutton-blue-border: #124d77;
    --sbutton-red-border: #942911;
    --sbutton-cyan-border: #057fd0;

    /* Button Shadows */
    --sbutton-blue-shadow: #54a3f7;
    --sbutton-red-shadow: #cf866c;
    --sbutton-cyan-shadow: #f0f7fa;

    /* Text Shadows */
    --sbutton-blue-textshadow: #154682;
    --sbutton-red-textshadow: #854629;
    --sbutton-cyan-textshadow: #5b6178;

    /* Lists Grid Colors */
    --list-color-1: #e74c3c;
    --list-color-2: #f39c12;
    --list-color-3: #9b59b6;
    --list-color-4: #27ae60;
    --list-color-5: #3498db;
    --list-color-6: #e67e22;
    --list-color-7: #1abc9c;
    --list-color-8: #34495e;
    --list-color-9: #f1c40f;
    --list-color-10: #e91e63;
    /* Consolidated gradients */
    --gradient-bluish: linear-gradient(135deg, #CCCDEC 0%, #b8b9e0 100%);
    --gradient-white-grey: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --gradient-light-grey: linear-gradient(135deg, #f5f5f5 0%, #e9ecef 100%);
    --gradient-purple-light: linear-gradient(135deg, #f1ebfd 0%, #e8dff8 100%);
    --gradient-danger: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    --gradient-primary: linear-gradient(135deg, #6c5ce7 0%, #5a4fcf 100%);
}

/* ==========================================================================
   Base Element Styles & Global Resets
   ========================================================================== */

*{
    box-sizing: border-box;
}

body{
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: normal;
    color: var(--color-text);
    margin: 0;
    padding: 0;
}

body.bluish{
    background: var(--color-bg-body) !important;
}

th{
    font-family: var(--font-family);
    font-weight: bold;
    font-size: 11px;
    color: var(--color-text);
    border: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 6px 6px 12px;
}

td{
    font-family: var(--font-family);
    font-weight: normal;
    font-size: 12px;
    border: 0;
    padding: 6px 6px 6px 12px;
    color: var(--color-text);
}

caption{
    padding: 0 0 5px 0;
    width: 700px;
    font-family: var(--font-family);
    font-style: italic;
    font-size: 11px;
    text-align: right;
}

code{
    background: #f8f9fa;
    color: #e83e8c;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

.centered-and-cropped{
    object-fit: cover;
}

/* ==========================================================================
   Table & Grid Layouts
   ========================================================================== */

/* Main tables structure */
table.defaultTable, table.whiteHeader, table.whiteHeaderNoCenter, table.greyBody, table.bluishHeader, table.bluishAdminFill{
    margin-left: auto;
    margin-right: auto;
    border: 0;
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: visible;
    transition: box-shadow 0.3s ease;
}

table.whiteHeader:hover, table.greyBody:hover, table.bluishHeader:hover, table.bluishAdminFill:hover{
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Text alignment variants */
table.defaultTable, table.whiteHeader, table.bluishHeader{
    text-align: center;
}

/* Background color variants for tables */
table.whiteHeader, table.whiteHeaderNoCenter{
    background: var(--gradient-white-grey);
}

table.greyBody{
    background: var(--gradient-light-grey);
}

table.bluishHeader{
    background: var(--gradient-bluish);
}

table.bluishAdminFill{
    background: linear-gradient(135deg, #D2FFF9 0%, #c0f7ed 100%);
}

/* Table row styles */
tr.greyHeaderCenter, tr.whiteHeaderCenter, tr.whiteHeaderCenterUnderline, tr.bluishHeaderCenter{
    text-align: center;
    transition: all 0.2s ease;
}

/* Row backgrounds */
tr.greyHeaderCenter{
    background: var(--gradient-light-grey);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

tr.whiteHeaderCenter, tr.whiteHeaderCenterUnderline, tr.whiteHeaderNoCenter{
    background: var(--gradient-white-grey);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

tr.bluishHeaderCenter{
    background: var(--gradient-bluish);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

tr.whiteHeaderCenterUnderline{
    text-decoration: underline;
    text-decoration-color: rgba(79, 107, 114, 0.3);
    text-underline-offset: 3px;
}

tr.bluishHover:hover{
    background: linear-gradient(135deg, #DCF5F7 0%, #c9eff2 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Cell backgrounds */
td.bluishBack{
    background: var(--gradient-bluish) !important;
    border-radius: 4px;
    position: relative;
}

td.bluishBack::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    pointer-events: none;
}

/* Widget tables */
table.bluishWidget{
    background: var(--gradient-purple-light) !important;
    border-radius: 16px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    width: 100%;
    margin: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

table.bluishWidget::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    pointer-events: none;
}

table.bluishWidget:hover{
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 255, 255, 0.9);
}

@keyframes subtleFloat {

    0%, 100%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-1px);
    }
}

table.bluishWidget.animate{
    animation: subtleFloat 6s ease-in-out infinite;
}

/* ==========================================================================
   Links & Navigation
   ========================================================================== */

a{
    color: var(--color-link);
}

a.nav:link, a.nav:visited{
    color: var(--color-text);
}





/* Navigation & Info Links */




.a_blue_nodeco{
    text-decoration: none;
    color: #0066CC;
}

.a_blue_nodeco:hover{
    text-decoration: underline;
    color: #0066CC;
}





/* Back, Close, Other Button Links (Consolidated shared styles) */
.a_new_close_button_link, .a_new_other_button_link, .a_new_back_button_link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 20px;
    color: #fff !important;
    text-decoration: none;
    font-family: var(--font-family);
    font-weight: bold;
    font-size: 12px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.a_new_close_button_link:hover, .a_new_other_button_link:hover, .a_new_back_button_link:hover{
    transform: translateY(-1px);
    box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.2);
    color: #fff !important;
}

.a_new_close_button_link{
    background: linear-gradient(135deg, #c0392b 0%, #922b21 100%);
}

.a_new_close_button_link:hover{
    background: linear-gradient(135deg, #922b21 0%, #6e1f16 100%);
}

.a_new_other_button_link{
    background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
}

.a_new_other_button_link:hover{
    background: linear-gradient(135deg, #0d47a1 0%, #0a2e6e 100%);
}

.a_new_back_button_link{
    background: linear-gradient(135deg, #616A6B 0%, #4a5354 100%);
}

.a_new_back_button_link:hover{
    background: linear-gradient(135deg, #4a5354 0%, #333a3b 100%);
}

/* ==========================================================================
   Form Components & Input Fields
   ========================================================================== */

/* Base styles for all buttons */
.form-grey-button, .form-grey-button-noshadow, .form-red-button-noshadow, .form-orange-button-noshadow{
    color: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    text-shadow: none;
}

/* Shadow variants */
.form-grey-button, .form-grey-button:hover{
    box-shadow: 5px 5px 5px #eee;
}

/* Individual button color overrides */








.form-grey-button, .form-grey-button-noshadow{
    background: #616A6B;
}

.form-grey-button:hover{
    background: #CCD1D1;
}

.form-red-button-noshadow{
    background: red;
}

.form-orange-button-noshadow{
    background: orange;
}

/* Text Input styles */
.roundInputText{
    border-radius: 25px;
    border: 0;
    padding: 20px;
    width: 600px;
    height: 15px;
    outline: none;
}



.roundInputTextLong{
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
}

/* Unstyled Button utility */


/* Search form on Homepage */








/* sButtons Definitions */
.sButtonRed{
    box-shadow: inset 0 1px 0 0 var(--sbutton-blue-shadow);
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding: 6px 24px;
    text-decoration: none;
}

.sButtonRedSmall{
    box-shadow: inset 0 1px 0 0 var(--sbutton-red-shadow);
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    padding: 4px 16px;
    text-decoration: none;
    text-shadow: 0 1px 0 var(--sbutton-red-textshadow);
}



.sButtonRed, .sButtonRedSmall{
    background: linear-gradient(to bottom, var(--sbutton-red) 5%, var(--sbutton-red-dark) 100%);
    background-color: var(--sbutton-red);
    border: 1px solid var(--sbutton-red-border);
}

.sButtonRed{
    font-size: 13px;
    padding: 6px 24px;
    text-shadow: 0 1px 0 var(--sbutton-red-textshadow);
}



.sButtonRed:hover, .sButtonRedSmall:hover{
    background: linear-gradient(to bottom, var(--sbutton-red-dark) 5%, var(--sbutton-red) 100%);
    background-color: var(--sbutton-red-dark);
}

.sButtonRed:active, .sButtonRedSmall:active{
    position: relative;
    top: 1px;
}

/* ==========================================================================
   Navigation Dropdowns
   ========================================================================== */

#globalMenuContainer {
    display: none;
    position: fixed;
    z-index: 99999;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    padding: 5px 0;
}

#globalMenuContainer a{
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
}

#globalMenuContainer a:hover{
    background-color: #f1f1f1;
}

#globalMenuContainer a img{
    margin-right: 8px;
    vertical-align: middle;
}

.dropbtn2{
    box-shadow: 0px 1px 0px 0px #f0f7fa;
    background: linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
    background-color: #33bdef;
    border-radius: 3px;
    border: 1px solid #057fd0;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: bold;
    padding: 4px 16px;
    text-decoration: none;
    text-shadow: 0px -1px 0px #5b6178;
}

.dropbtn2:hover, .dropbtn2:focus{
    background: linear-gradient(to bottom, lightgrey 5%, black 100%);
    border: 1px solid black;
    background-color: lightgrey;
}

.dropbtn2.active{
    background: #019ad2 !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

.dropdown2-content{
    display: none !important;
}

/* ==========================================================================
   Footer Layout
   ========================================================================== */

.footer{
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 9999;
    background: linear-gradient(135deg, #333 0%, #2c2c2c 50%, #1a1a1a 100%);
    color: #e8e8e8;
    text-align: left;
    padding: 8px 10px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    font-family: var(--font-family);
    font-size: 13px;
    line-height: 1.5;
    backdrop-filter: blur(10px);
    position: fixed;
}

.footer::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    pointer-events: none;
}

/* Debug info container enhanced */
.footer .debug-info{
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 10px 12px;
    margin: 8px -10px 0 -10px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    color: #b8b8b8;
    text-align: left;
    overflow-x: auto;
    white-space: normal;
    width: calc(100% + 20px);
    box-sizing: border-box;
    word-break: break-word;
    line-height: 1.4;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}







/* Debug toggle button */






/* Footer content wrapper */


.footer .footer-main{
    font-weight: 500;
    color: #f3f4f6;
}



/* Links in footer */
.footer a{
    color: #60a5fa;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover{
    color: #93c5fd;
    text-decoration: underline;
}

/* Responsive design */


/* Animation for debug info reveal */
.footer .debug-info.hidden{
    display: none;
}

.footer .debug-info.visible{
    display: block;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from{
        opacity: 0;
        transform: translateY(-10px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* Status indicators */
.footer .status-indicator{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    animation: pulse 2s infinite;
}

/* Debug Console Enhancements */
.footer .status-indicator.success{
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    margin-right: 8px;
    animation: pulse 2s infinite;
}

.footer .status-indicator.warning{
    background: #f59e0b;
}

.footer .status-indicator.error{
    background: #ef4444;
}

@keyframes pulse {

    0%, 100%{
        opacity: 1;
        transform: scale(1);
    }

    50%{
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* Smooth scrollbar for debug info */
.footer .debug-info::-webkit-scrollbar{
    height: 6px;
}

.footer .debug-info::-webkit-scrollbar-track{
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.footer .debug-info::-webkit-scrollbar-thumb{
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.footer .debug-info::-webkit-scrollbar-thumb:hover{
    background: rgba(255, 255, 255, 0.5);
}

/* Mobile responsive adjustments */


/* ==========================================================================
   Multimedia & Video Containers
   ========================================================================== */

.video-container{
    position: relative;
    width: 60vw;
    /* 60% of the viewport width */
    max-width: 100%;
    /* Ensures it doesn't exceed the screen width */
    padding-bottom: 0;
    /* Reset padding-bottom */
    aspect-ratio: 16 / 9;
    /* Use aspect-ratio for modern browsers */
    margin: 0 auto;
    /* Center the video on larger screens */
    height: auto;
    /* Adjust height automatically */
}

.video-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-containerSmaller{
    position: relative;
    width: 250px;
    max-width: 100%;
    /* Ensures it doesn't exceed the screen width */
    padding-bottom: 0;
    /* Reset padding-bottom */
    aspect-ratio: 16 / 9;
    /* Use aspect-ratio for modern browsers */
    margin: 0 auto;
    /* Center the video on larger screens */
    height: auto;
    /* Adjust height automatically */
}

.video-containerSmaller iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   mainneo Application Components (Login, Forms, Grids, Badges)
   ========================================================================== */

/* Defaults */
.mainneo-default-input-design{
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

/* Login styling */
.mainneo-main-login-centered{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.mainneo-login-short{
    min-height: calc(100vh - 240px);
}

.mainneo-login-status{
    text-align: center;
    font-size: 12px;
}

.mainneo-login-link-container{
    text-align: center;
    margin: 20px 0;
    font-size: 14px;
}

.mainneo-login-feedback-container{
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}

.mainneo-main-div-centered{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.mainneo-logo-container img{
    max-width: 250px;
    height: auto;
    margin-bottom: 20px;
}

.mainneo-header-text{
    text-align: center;
    margin-bottom: 10px;
}

.mainneo-container, .mainset-container{
    background-color: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 500px;
    text-align: center;
}

#sw-modal-overlay .mainneo-container {
    width: 90% !important;
    max-width: 400px !important;
    margin: auto !important;
    text-align: center;
}

.mainset-container{
    font-size: 18px;
}

.mainneo-view-below{
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.mainneo-view-below-link{
    color: #1a73e8;
    text-decoration: none;
    font-size: 14px;
}

.mainneo-view-below-link:hover{
    text-decoration: underline;
}

/* Form groups */
.mainneo-group{
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.mainneo-group label{
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.mainneo-group-acknowledgement{
    font-size: 14px;
    background: #CCCDEC;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: left;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
}

.mainneo-group input,
.mainneo-group select,
.mainneo-group textarea{
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.mainneo-group input:focus{
    border-color: #1a73e8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.mainneo-btn-group{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

.mainneo-submit-btn, .mainneo-cancel-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    flex: none;
    max-width: 250px;
    /* Limit maximum width */
    padding: 12px;
    font-size: 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
    /* Prevent text wrapping */
}

.mainneo-submit-btn, .mainneo-submit-btn:link, .mainneo-submit-btn:visited{
    background-color: #1a73e8;
    color: #ffffff;
}

.mainneo-cancel-btn, .mainneo-cancel-btn:link, .mainneo-cancel-btn:visited{
    background-color: #e0e0e0;
    color: #333333;
}

.mainneo-submit-btn:hover{
    background-color: #1558b0;
    color: #ffffff;
}

.mainneo-cancel-btn:hover{
    background-color: #cacaca;
    color: #333333;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Specific elements */
.mainneo-group textarea{
    font-family: inherit;
}

.mainneo-group textarea:focus, .mainneo-group select:focus{
    border-color: #1a73e8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.mainneo-group input[readonly]{
    background-color: #f5f5f5;
    color: #666;
    cursor: not-allowed;
}

.mainneo-group input[type="file"]{
    padding: 10px;
    border: 2px dashed #ddd;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mainneo-group input[type="file"]:hover{
    border-color: #1a73e8;
    background: #f0f7ff;
}

.mainneo-group input[type="file"]:focus{
    border-color: #1a73e8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

/* Requirements section */
.file-requirements{
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.file-requirements h4{
    color: #495057;
    margin: 0 0 15px 0;
    font-size: 16px;
}

.file-requirements ul{
    margin: 0;
    padding-left: 20px;
}

.file-requirements li{
    margin-bottom: 8px;
    color: #6c757d;
    line-height: 1.5;
}

.file-requirements strong{
    color: #495057;
}

/* CSV example section */
.csv-example{
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.csv-example h4{
    color: #856404;
    margin: 0 0 15px 0;
    font-size: 16px;
}





.mainneo-submit-btn i, .mainneo-cancel-btn i{
    margin-right: 8px;
}

.mainneo-group small{
    background: #e3f2fd;
    border-radius: 4px;
    padding: 8px 12px;
    border-left: 3px solid #2196f3;
}

.mainneo-container code{
    background: #f8f9fa;
    color: #e83e8c;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

/* Warnings and custom behaviors */

input[type="checkbox"]{
    transform: scale(1.2);
    margin-right: 10px;
}

input[style*="monospace"]{
    background: #f8f9fa;
    border: 2px solid #dee2e6;
}

input[style*="monospace"]:focus{
    background: white;
    border-color: #007bff;
}

.mainneo-submit-btn[style*="background-color: #dc3545"]:hover{
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

input[type="date"]{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#result, #result2{
    transition: all 0.3s ease;
}

#result:hover, #result2:hover{
    border-color: #007bff;
}

/* Password validations */
.mainneo-group input[type="password"]{
    position: relative;
}

.mainneo-group input[type="password"]:focus{
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.mainneo-group input[type="password"]:valid{
    border-color: #28a745;
}

.mainneo-group input[type="password"]:invalid{
    border-color: #dc3545;
}

/* Browser navigation bar widget */
.mainneo-browser-bar{
    margin: 20px auto;
    max-width: 800px;
    padding: 0 20px;
}

.mainneo-browser-container{
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mainneo-browser-container:hover{
    transform: translateY(-2px);
}

.mainneo-browser-header{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #4f6b72;
    font-weight: 600;
    font-size: 16px;
    gap: 8px;
}

.mainneo-browser-header i{
    color: #6c5ce7;
    font-size: 18px;
}

.mainneo-browser-links{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mainneo-browser-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--gradient-bluish);
    color: #4f6b72;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(79, 107, 114, 0.1);
    position: relative;
    overflow: hidden;
}

.mainneo-browser-link::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mainneo-browser-link:hover{
    background: var(--gradient-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(108, 92, 231, 0.3);
    text-decoration: none;
}

.mainneo-browser-link:hover::before{
    opacity: 1;
}

.mainneo-browser-link i{
    font-size: 16px;
    transition: transform 0.3s ease;
}

.mainneo-browser-link:hover i{
    transform: scale(1.1);
}

/* Mobile responsive — icon only on small screens */




/* Submissions table container */
.mainneo-tableneo-container{
    background-color: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    width: 95%;
    max-width: 1400px;
    /* Extra wide for submissions table */
    text-align: left;
    margin: 0 auto;
    overflow-x: auto;
    /* Allow horizontal scroll if needed */
}

/* Mobile responsive adjustments for submissions container */




/* mainneo Submissions Table Styling */
.mainneo-tableneo-wrapper{
    border-radius: 6px;
    overflow: hidden;
}

.mainneo-tableneo-table{
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.mainneo-tableneo-table .whiteHeaderCenterUnderline th{
    background: linear-gradient(135deg, #4f6b72 0%, #5a7a82 100%);
    color: white;
    padding: 16px 12px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    border: none;
}

.mainneo-table-row{
    transition: all 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.mainneo-table-row:hover{
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    transform: scale(1.001);
}

.mainneo-cell-number{
    text-align: center;
    vertical-align: middle;
    padding: 16px 12px;
    width: 35px;
}

.mainneo-row-number{
    background: var(--gradient-bluish);
    color: #4f6b72;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    min-width: 32px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mainneo-cell-main{
    text-align: left;
    padding: 16px 12px;
    min-width: 250px;
}

.mainneo-item-title{
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.4;
    font-size: 15px;
}

.mainneo-item-subtitle{
    color: #28a745;
    font-size: 14px;
    margin-bottom: 6px;
    font-style: italic;
    font-weight: 500;
}

.mainneo-item-meta{
    color: #6c757d;
    font-size: 12px;
    font-style: italic;
}

.mainneo-cell-publisher, .mainneo-cell-docs{
    vertical-align: middle;
    padding: 16px 12px;
    text-align: center;
}

.mainneo-doc-link{
    background: var(--gradient-bluish);
    color: #4f6b72;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    border: 1px solid rgba(79, 107, 114, 0.2);
}

.mainneo-doc-link:hover{
    background: var(--gradient-primary);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
}

.mainneo-na-text{
    color: #999;
    font-style: italic;
    font-size: 13px;
}

.mainneo-archived-text{
    color: #6c757d;
    font-style: italic;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mainneo-cell-status{
    vertical-align: top;
    padding: 16px 12px;
    text-align: center;
}



.mainneo-status-badge{
    background: var(--gradient-purple-light);
    color: #6c5ce7;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    border: 1px solid rgba(108, 92, 231, 0.2);
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(108, 92, 231, 0.1);
}



.mainneo-cert-link{
    color: #28a745;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.mainneo-cert-link:hover{
    color: #1e7e34;
    text-decoration: none;
}

.mainneo-cell-actions{
    vertical-align: middle;
    padding: 16px 12px;
    text-align: center;
}

.mainneo-action-buttons{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.mainneo-edit-btn, .mainneo-delete-btn{
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
    min-width: 70px;
    justify-content: center;
}

.mainneo-edit-btn{
    background: var(--gradient-primary);
    color: white;
    border: 1px solid rgba(108, 92, 231, 0.3);
}

.mainneo-edit-btn:hover{
    background: linear-gradient(135deg, #5a4fcf 0%, #4840b7 100%);
    transform: translateY(-1px);
    text-decoration: none;
    color: white;
    box-shadow: 0 4px 8px rgba(108, 92, 231, 0.3);
}

.mainneo-delete-btn{
    background: var(--gradient-danger);
    color: white;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.mainneo-delete-btn:hover{
    background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
    transform: translateY(-1px);
    text-decoration: none;
    color: white;
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.mainneo-approved-status{
    color: #28a745;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.mainneo-approved-status i{
    font-size: 24px;
}



.mainneo-bookmark-link{
    color: #6c5ce7;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.mainneo-bookmark-link:hover{
    color: #5a4fcf;
    text-decoration: underline;
}

.mainneo-deleted-item{
    color: #dc3545 !important;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mainneo-deleted-item i{
    color: #ffc107;
}

.mainneo-date-badge{
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1565c0;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 4px;
    border: 1px solid rgba(21, 101, 192, 0.2);
}

.mainneo-time-meta{
    color: #757575;
    font-size: 11px;
    font-style: italic;
    text-align: center;
}

.mainneo-unbookmarked-status{
    color: #28a745;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.mainneo-unbookmarked-status i{
    font-size: 20px;
    margin-bottom: 4px;
}

.mainneo-unbookmarked-text{
    font-weight: 600;
    color: #333;
}

.mainneo-unbookmarked-date{
    font-size: 11px;
    color: #666;
    font-style: italic;
    text-align: center;
}



/* Filter Section */
.mainneo-filter-section{
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid rgba(204, 205, 236, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mainneo-filter-row{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin-bottom: 16px;
}

.mainneo-filter-group{
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 150px;
}

.mainneo-filter-group label{
    font-weight: 600;
    color: #4f6b72;
    font-size: 14px;
    margin-bottom: 4px;
}

.mainneo-filter-group select{
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    color: #4f6b72;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mainneo-filter-group select:focus{
    border-color: #6c5ce7;
    outline: none;
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2);
}

.mainneo-filter-group select:hover{
    border-color: #6c5ce7;
}

.mainneo-status-display{
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid rgba(21, 101, 192, 0.2);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    color: #1565c0;
    font-size: 14px;
    line-height: 1.5;
}

.mainneo-status-display span{
    font-weight: 600;
}

.mainneo-status-display a{
    color: #6c5ce7;
    text-decoration: none;
    font-weight: 500;
}

.mainneo-status-display a:hover{
    color: #5a4fcf;
    text-decoration: underline;
}





.mainneo-warning-box{
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 15px 0;
    color: #856404;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mainneo-warning-box i{
    color: #f39c12;
}

/* Tabs container for config_user */
.mainneo-tab-container{
    background: var(--gradient-white-grey);
    border-radius: 12px;
    padding: 20px;
    margin: 20px auto;
    max-width: 1200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(204, 205, 236, 0.3);
}

.mainneo-tab-header{
    text-align: center;
    margin-bottom: 20px;
    color: #4f6b72;
    font-weight: 600;
    font-size: 16px;
}

.mainneo-tab-nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.mainneo-tab-link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--gradient-bluish);
    color: #4f6b72;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(79, 107, 114, 0.1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.mainneo-tab-link::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mainneo-tab-link:hover{
    background: var(--gradient-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(108, 92, 231, 0.3);
    text-decoration: none;
}

.mainneo-tab-link:hover::before{
    opacity: 1;
}

.mainneo-tab-link.active{
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.mainneo-tab-link i{
    font-size: 14px;
    transition: transform 0.3s ease;
}

.mainneo-tab-link:hover i{
    transform: scale(1.1);
}

.mainneo-tab-text{
    display: inline;
}

.mainneo-tab-warning{
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 15px;
    color: #856404;
    font-size: 13px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mainneo-tab-warning i{
    color: #f39c12;
}





/* Grid for prepare lists and other grids */
.mainneo-lists-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.mainneo-list-card{
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 25px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.3s ease;
    border: 1px solid #e1e8ed;
}

.mainneo-list-card:hover{
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.mainneo-list-icon{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

/* List index-based colors */
.mainneo-list-card[data-color-index="0"] .mainneo-list-icon, .mainneo-list-card[data-color-index="10"] .mainneo-list-icon{
    background: var(--list-color-1);
}

.mainneo-list-card[data-color-index="1"] .mainneo-list-icon, .mainneo-list-card[data-color-index="11"] .mainneo-list-icon{
    background: var(--list-color-2);
}

.mainneo-list-card[data-color-index="2"] .mainneo-list-icon, .mainneo-list-card[data-color-index="12"] .mainneo-list-icon{
    background: var(--list-color-3);
}

.mainneo-list-card[data-color-index="3"] .mainneo-list-icon, .mainneo-list-card[data-color-index="13"] .mainneo-list-icon{
    background: var(--list-color-4);
}

.mainneo-list-card[data-color-index="4"] .mainneo-list-icon, .mainneo-list-card[data-color-index="14"] .mainneo-list-icon{
    background: var(--list-color-5);
}

.mainneo-list-card[data-color-index="5"] .mainneo-list-icon, .mainneo-list-card[data-color-index="15"] .mainneo-list-icon{
    background: var(--list-color-6);
}

.mainneo-list-card[data-color-index="6"] .mainneo-list-icon, .mainneo-list-card[data-color-index="16"] .mainneo-list-icon{
    background: var(--list-color-7);
}

.mainneo-list-card[data-color-index="7"] .mainneo-list-icon, .mainneo-list-card[data-color-index="17"] .mainneo-list-icon{
    background: var(--list-color-8);
}

.mainneo-list-card[data-color-index="8"] .mainneo-list-icon, .mainneo-list-card[data-color-index="18"] .mainneo-list-icon{
    background: var(--list-color-9);
}

.mainneo-list-card[data-color-index="9"] .mainneo-list-icon, .mainneo-list-card[data-color-index="19"] .mainneo-list-icon{
    background: var(--list-color-10);
}

.mainneo-list-content{
    flex: 1;
}

.mainneo-list-content h3{
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
}

.mainneo-list-content h3 a{
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mainneo-list-content h3 a:hover{
    color: #3498db;
}

.mainneo-list-content p{
    margin: 0;
    color: #7f8c8d;
    font-size: 14px;
    line-height: 1.5;
}



/* Modern Search Results styling */
.mainneo-results-list{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

.mainneo-result-item{
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e8ed;
    transition: all 0.3s ease;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.mainneo-result-item:hover{
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.mainneo-result-number{
    flex-shrink: 0;
}

.mainneo-result-content{
    flex: 1;
    min-width: 0;
}

.mainneo-result-title{
    margin-bottom: 12px;
}

.mainneo-title-link{
    color: #2c3e50;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.mainneo-title-link:hover{
    color: #3498db;
    text-decoration: none;
}

.mainneo-result-author{
    margin-bottom: 12px;
}

.mainneo-author-link{
    color: #27ae60;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.mainneo-author-link:hover{
    color: #229954;
    text-decoration: underline;
}

.mainneo-publication{
    color: #6c757d;
    font-style: italic;
}

.mainneo-unknown{
    color: #999;
    font-style: italic;
}

.mainneo-result-abstract{
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 4px solid #28a745;
}

.mainneo-abstract-badge{
    background: #28a745;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 8px;
}

.mainneo-abstract-content{
    color: #495057;
    line-height: 1.5;
    font-size: 14px;
}

.mainneo-result-indicators{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.mainneo-indicator{
    background: var(--gradient-bluish);
    color: #4f6b72;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(79, 107, 114, 0.2);
    line-height: 1.3;
}

.mainneo-indicator.mainneo-pdf{
    background: var(--gradient-danger);
    color: white;
}

.mainneo-indicator.mainneo-youtube{
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    color: white;
}

.mainneo-result-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: #6c757d;
    font-size: 13px;
}

.mainneo-meta-type, .mainneo-meta-year, .mainneo-meta-hits, .mainneo-meta-status{
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Sidebar Widget */
.mainneo-sidebar{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mainneo-sidebar-widget{
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e8ed;
    overflow: hidden;
}

.mainneo-widget-header{
    background: linear-gradient(135deg, #4f6b72 0%, #5a7a82 100%);
    color: white;
    padding: 16px 20px;
}

.mainneo-widget-header h3{
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mainneo-beta{
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.mainneo-widget-content{
    padding: 20px;
}

.mainneo-loading{
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 20px;
}

.mainneo-loading i{
    margin-right: 8px;
    color: #3498db;
}

/* Photo Gallery Grid styling */
.mainneo-photo-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.mainneo-photo-card{
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e8ed;
    transition: all 0.3s ease;
}

.mainneo-photo-card:hover{
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.mainneo-photo-link{
    display: block;
    position: relative;
    overflow: hidden;
}

.mainneo-photo-image{
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mainneo-photo-card:hover .mainneo-photo-image{
    transform: scale(1.05);
}

.mainneo-photo-placeholder{
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 48px;
}

.mainneo-photo-info{
    padding: 20px;
}

.mainneo-photo-title{
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
}

.mainneo-photo-author{
    margin: 0 0 8px 0;
    color: #27ae60;
    font-weight: 500;
}

.mainneo-photo-count{
    margin: 0;
    color: #6c757d;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mainneo-pagination-wrapper{
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e1e8ed;
}





/* Inline search forms */
.mainneo-search-inline{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.mainneo-search-inline .mainneo-group, .mainneo-search-inline .mainneo-filter-group{
    margin-bottom: 0;
    flex: 1;
    min-width: 200px;
}



/* Custom list indents */
ul.custom-indent{
    list-style-position: outside;
    padding-left: 1.5em;
}

ul.custom-indent li{
    padding-left: 0;
    text-indent: 0;
}

/* ==========================================================================
   Print and Utilities
   ========================================================================== */







/* ==========================================================================
   Pagination Component
   ========================================================================== */

.pagination-container{
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination-controls{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--gradient-white-grey);
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(204, 205, 236, 0.3);
    width: 100%;
    max-width: 600px;
}

.pagination-nav-group{
    display: flex;
    gap: 8px;
}

.pagination-btn{
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    white-space: nowrap;
}

.pagination-btn.pagination-nav{
    background: var(--gradient-bluish);
    color: #4f6b72;
    border: 1px solid rgba(79, 107, 114, 0.2);
}

.pagination-btn.pagination-nav:hover{
    background: linear-gradient(135deg, #DCF5F7 0%, #c9eff2 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    color: #4f6b72;
}

.pagination-btn.pagination-first, .pagination-btn.pagination-last{
    background: var(--gradient-purple-light);
    color: #6c5ce7;
    border: 1px solid rgba(108, 92, 231, 0.2);
}

.pagination-btn.pagination-first:hover, .pagination-btn.pagination-last:hover{
    background: var(--gradient-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 92, 231, 0.3);
}

.pagination-btn.pagination-disabled{
    background: var(--gradient-light-grey);
    color: #999;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination-info{
    color: #4f6b72;
    font-size: 14px;
    font-weight: 500;
    padding: 0 16px;
    white-space: nowrap;
}

.pagination-info strong{
    color: #6c5ce7;
    font-weight: 600;
}







/* ==========================================================================
   Form Grid Components
   ========================================================================== */

.mainneo-form-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.mainneo-form-grid-fullwidth{
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}







/* ==========================================================================
   Utility Classes (Extracted from Inline Styles)
   ========================================================================== */

.u-align-left-top{
    text-align: left;
    vertical-align: top;
}

.u-align-right-top{
    text-align: right;
    vertical-align: top;
}

.u-text-break{
    word-break: break-all;
    overflow-wrap: break-word;
}

.u-align-center-top{
    text-align: center;
    vertical-align: top;
}

.u-align-left{
    text-align: left;
}

.u-align-right{
    text-align: right;
}

.u-align-center{
    text-align: center;
}

.u-valign-top{
    vertical-align: top;
}

.u-bg-lightgrey-right-top{
    background-color: rgb(186, 237, 186);
    text-align: right;
    vertical-align: top;
}

.u-bg-lightgrey-top{
    background-color: lightgrey;
    vertical-align: top;
}

.u-text-red{
    color: #dc3545;
}

.u-text-orange{
    color: #fd7e14;
}

.u-text-orange-8pt{
    color: #fd7e14;
    font-size: 8pt;
}

/* Standardized red */
.u-text-blue{
    color: #0066cc;
}

/* Standardized blue */
.u-text-green{
    color: #28a745;
}

/* Standardized green */
.u-text-cyan{
    color: #60a5fa;
}

.u-text-error-small{
    font-size: 10px;
    color: #dc3545;
}

.u-mt-5{
    margin-top: 5px;
}

.u-mt-10{
    margin-top: 10px;
}

.u-mt-16{
    margin-top: 16px;
}

.u-my-10{
    margin-top: 10px;
    margin-bottom: 10px;
}

.u-mb-15{
    margin-bottom: 15px;
}

.u-text-purple{
    color: #6c5ce7;
}

.u-fs-8pt{
    font-size: 8pt;
}

.u-width-100{
    width: 100%;
}

.u-width-80{
    width: 80%;
}

.u-overflow-x-auto{
    overflow-x: auto;
}

/* Form Component Styles */
.mainneo-input-styled{
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f8f9fa;
    font-size: 16px;
    min-height: 42px;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
}

.mainneo-input-full{
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: white;
}

.mainneo-form-help-text{
    color: #666;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

/* Helper and Utility overrides */
.u-text-center{
    text-align: center;
}

.u-text-lightgrey{
    color: lightgrey;
}

/* Front Page Components */
.mainneo-logo-front{
    min-width: 350px;
    max-width: 550px;
    margin-bottom: 30px;
}

.mainneo-search-form{
    margin: auto;
    max-width: 100%;
    margin-top: 20px;
}

.mainneo-search-input{
    font-size: 14px;
}

/* Database Log Clearer specific action form styles */
.mainneo-logclear-btn-group{
    align-items: flex-end;
    gap: 10px;
}

.mainneo-logclear-select-wrapper{
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.mainneo-logclear-label{
    font-weight: 600;
    margin: 0;
}

.mainneo-logclear-select{
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 15px;
}

.mainneo-logclear-submit{
    background-color: #6c757d;
    border-color: #6c757d;
    white-space: nowrap;
}



/* Log Clearer Alert and Info Card Components */
.mainneo-alert-danger{
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.mainneo-alert-danger-title{
    color: #721c24;
    margin: 0 0 15px 0;
}

.mainneo-alert-danger-text{
    margin: 0;
    color: #721c24;
}

.mainneo-card-secondary{
    background: #e2e3e5;
    border: 1px solid #d6d8db;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.mainneo-card-secondary-title{
    color: #383d41;
    margin: 0 0 15px 0;
}

.mainneo-card-secondary-item{
    margin: 5px 0;
    color: #383d41;
}

/* Keymaker Alert and Info Card Components */
.mainneo-alert-info{
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.mainneo-alert-info-title{
    color: #0c5460;
    margin: 0 0 15px 0;
}

.mainneo-alert-info-list{
    margin: 0;
    padding-left: 20px;
    color: #0c5460;
    text-align: left;
}

.mainneo-alert-warning{
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.mainneo-alert-warning-title{
    color: #856404;
    margin: 0 0 15px 0;
}

.mainneo-alert-warning-list{
    margin: 0;
    padding-left: 20px;
    color: #856404;
    text-align: left;
}

/* Keymaker button layout and result output styling */
.mainneo-keymaker-btn-group{
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: center;
}

.mainneo-keymaker-generate-btn{
    flex: 0 0 auto;
    min-width: 220px;
}

.mainneo-keymaker-copy-btn{
    flex: 0 0 auto;
}

.mainneo-keymaker-result{
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    font-family: monospace;
    font-size: 14px;
    word-break: break-all;
    min-height: 50px;
    display: flex;
    align-items: center;
    color: #495057;
}



/* General Utility Helpers */
.u-font-monospace{
    font-family: monospace;
}

.u-font-weight-bold{
    font-weight: bold;
}

.u-mt-20{
    margin-top: 20px;
}

/* Danger alert inner box styles */
.mainneo-alert-danger-lead{
    margin: 0 0 15px 0;
    color: #721c24;
}

.mainneo-alert-danger-inner{
    background: #f1b0b7;
    border-radius: 6px;
    padding: 15px;
    border-left: 4px solid #dc3545;
}

.mainneo-alert-danger-inner-title{
    color: #491217;
}

.mainneo-alert-danger-inner-list{
    margin: 10px 0 0 20px;
    color: #491217;
    text-align: left;
}

/* Convert page submit button custom styles */
.mainneo-submit-btn-danger{
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.mainneo-submit-btn-danger:hover{
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

.mainneo-convert-submit-btn{
    min-width: 200px;
}

/* General Utility Helpers */
.u-text-left{
    text-align: left;
}

/* Admigration Page Alert and Card Components */
.mainneo-alert-info-text{
    margin: 0;
    color: #0c5460;
}

.mainneo-card-secondary-text{
    margin: 0 0 15px 0;
    color: #383d41;
}

.mainneo-example-box{
    background: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    border-left: 4px solid #007bff;
    margin-bottom: 15px;
}

.mainneo-example-box-title{
    color: #004085;
}

.mainneo-example-box-text{
    margin: 5px 0;
    color: #004085;
}

.mainneo-tip-box{
    background: #cff4fc;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 15px;
    color: #055160;
}

.mainneo-submit-btn.mainneo-migration-btn{
    width: 100%;
    max-width: 300px;
}

.mainneo-alert-success{
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.mainneo-alert-success-title{
    color: #155724;
    margin: 0 0 15px 0;
}

.mainneo-alert-success-text{
    color: #155724;
    margin: 0;
}

.mainneo-alert-success-text-sub{
    color: #155724;
    margin: 5px 0 0 0;
}

/* Textarea Layout Modifiers */
.mainneo-textarea{
    resize: vertical;
}

/* List Generator (listgen.php) Styles */
.mainneo-listgen-header-title-cell{
    height: 29px;
}

.mainneo-listgen-title{
    font-size: 16pt;
}

.mainneo-listgen-header-icon-cell{
    width: 10px;
    font-size: 24px;
}

.mainneo-listgen-index-cell{
    width: 50px;
}

.mainneo-listgen-type-cell{
    font-size: 10px;
    width: 28px;
}

/* Color Utility Helpers */
.u-text-pink{
    color: pink;
}

.u-text-yellow{
    color: yellow;
}

/* Inline search form controls inside index2.php */
.mainneo-search-inline input{
    width: 100%;
    font-size: 14px;
}

.mainneo-search-inline select{
    font-size: 14px;
}

/* Browser wrapper component styling */
.mainneo-browser-wrapper{
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(204, 205, 236, 0.2);
}

/* Commercial status indicator */
.mainneo-indicator.mainneo-commercial{
    background: #28a745;
    color: white;
}

/* Utility Helpers */
.u-fs-12{
    font-size: 12px;
}

.u-fs-10{
    font-size: 10px;
}

.u-mt-2{
    margin-top: 2px;
}

/* User search page layout elements */
.mainneo-search-actions{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* Responsive Tables support via .thisRtable */


/* Color Utility Helpers */
.u-text-indigo{
    color: #667eea;
}

.u-text-orange-dark{
    color: #e67e22;
}

/* Margin and Cursor Utility Helpers */
.u-mb-0{
    margin-bottom: 0 !important;
}

.u-fs-14{
    font-size: 14px;
}

.u-cursor-pointer{
    cursor: pointer;
}

/* Indicator Background Overrides & Modern Pill Styling */
.mainneo-indicator-wrapper {
    margin-top: 12px;
}

.mainneo-indicator-summary-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    padding: 4px 0;
}

.mainneo-indicator-toggle-btn {
    background: #ffffff;
    border: 1px solid #cbd5e0;
    color: #4a5568;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.mainneo-indicator-toggle-btn:hover {
    background: #f7fafc;
    border-color: #a0aec0;
    color: #1a202c;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.mainneo-mainbar-indicators {
    margin-top: 10px;
    justify-content: center;
    gap: 6px;
}

.mainneo-mainbar-indicators .mainneo-indicator {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 14px;
    margin-bottom: 0;
}

.mainneo-indicator.u-bg-green {
    background: #e6f4ea;
    color: #137333;
    border: 1px solid #ceead6;
}

.mainneo-indicator.u-bg-grey {
    background: #f1f3f4;
    color: #5f6368;
    border: 1px solid #dadce0;
}

.mainneo-indicator.u-bg-orange {
    background: #fef7e0;
    color: #b06000;
    border: 1px solid #feefc3;
}

.mainneo-indicator.u-bg-red {
    background: #fce8e6;
    color: #c5221f;
    border: 1px solid #fad2cf;
}

.mainneo-indicator.u-cursor-pointer:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.mainneo-banner-demo{
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(253, 126, 20, 0.12);
    border-left: 4px solid #fd7e14;
    border-radius: 6px;
    color: #c0530a;
    font-weight: 600;
}

.mainneo-banner-maintenance{
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(220, 53, 69, 0.1);
    border-left: 4px solid #dc3545;
    border-radius: 6px;
    color: #a71d2a;
    font-weight: 600;
}

/* Config user page styling elements */
.mainneo-static-value-green{
    color: green;
    font-weight: 500;
    padding: 10px;
    background: #f0f9ff;
    border-radius: 6px;
    border: 1px solid #e0f2fe;
}

.mainneo-static-value-orange{
    color: orange;
    font-weight: 500;
    padding: 10px;
    background: #fff3cd;
    border-radius: 6px;
    border: 1px solid #ffeaa7;
}

.mainneo-default-val-box{
    background: #f0f9ff;
    border-radius: 4px;
    padding: 8px 12px;
    border-left: 3px solid #2196f3;
}

/* Extra alignment and font utilities */
.u-text-grey{
    color: grey;
}

.u-text-darkgrey{
    color: darkgrey;
}

.u-text-magenta{
    color: magenta;
}

.u-fs-8pt{
    font-size: 8pt;
}

.u-italic{
    font-style: italic;
}

.u-normal{
    font-style: normal;
}

.u-overflow-x-auto{
    overflow-x: auto !important;
}

/* Sidebar drag and drop grip icons */
.mainneo-sidebar-grip{
    cursor: grab;
    margin-right: 8px;
    color: #aaaaaa;
}

/* Margin Utility Helpers */
.u-ml-8{
    margin-left: 8px;
}

/* Details layout components */
.mainneo-details-container{
    border: 0px solid lightgrey;
    max-width: 100%;
    overflow-x: auto;
    margin-left: auto;
    margin-right: auto;
}

.mainneo-details-container-bordered{
    border: 1px solid lightgrey;
    max-width: 100%;
    overflow-x: auto;
    margin-left: auto;
    margin-right: auto;
}

.mainneo-details-flex-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 40px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 10px;
}

.mainneo-details-column{
    flex: 0 1 480px;
    width: 100%;
    max-width: 480px;
    padding: 5px;
    vertical-align: top;
    box-sizing: border-box;
}

.mainneo-details-row{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;
}

.mainneo-details-subcolumn{
    flex: 1;
    min-width: 300px;
    max-width: 50%;
}

.mainneo-details-metadata-table{
    border: 0px solid lightgrey;
    width: 100%;
    table-layout: fixed;
}

.mainneo-details-metadata-table td:first-child:not([colspan]){
    text-align: right;
    vertical-align: top;
    width: 180px;
    padding-right: 8px;
    box-sizing: border-box;
}

.mainneo-details-metadata-table td[colspan="2"]{
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.mainneo-details-label{
    text-align: right;
    vertical-align: top;
    width: 150px;
}

.mainneo-details-reference-box{
    width: 100%;
    height: 180px;
    overflow-y: scroll;
}

.mainneo-details-feedback-textarea{
    width: 50%;
    height: 150px;
}

.mainneo-details-video-table{
    background-color: black;
    width: 100%;
}

.mainneo-details-list{
    padding-left: 15px;
    margin-top: 0px;
}

.mainneo-details-rdm-table{
    width: 350px;
    border-radius: 8px;
    overflow: hidden;
    margin-left: 0;
    margin-right: auto;
}

.mainneo-details-author-card{
    font-size: 8pt;
    display: inline-block;
    padding: 5px;
    width: 150px;
}

.mainneo-details-not-avail{
    padding-top: 10px;
    font-size: 18px;
}

/* Extra utility helpers */
.u-align-right-top{
    text-align: right;
    vertical-align: top;
}

.u-table-layout-fixed{
    table-layout: fixed;
}

.u-width-100px{
    width: 100px;
}

.u-width-15{
    width: 15%;
}

.u-width-30{
    width: 30%;
}

.u-fs-10pt{
    font-size: 10pt;
}

.u-no-underline{
    text-decoration: none !important;
}

.u-text-underline{
    text-decoration: underline;
}

.u-text-teal{
    color: #1b90ad;
}

.u-bg-lightblue{
    background-color: lightblue;
}

.u-p-10{
    padding: 10px !important;
}

/* Extra utility helpers for form layouts */
.u-width-60{
    width: 60%;
}

.u-width-5ch{
    width: 5ch;
}

.u-resize-none{
    resize: none;
}

.u-border-lightgrey{
    border: 1px solid lightgrey;
}

.u-width-50{
    width: 50%;
}

.u-width-28{
    width: 28%;
}

/* JQuery UI Dialog Customizations */
.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close{
    display: none !important;
}

.u-dialog-alert-icon{
    float: left;
    margin: 0 7px 20px 0;
}

.u-display-none{
    display: none !important;
}

/* Guest Navigation Components */
.mainneo-ack-item{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    text-align: left;
}

.mainneo-ack-item i{
    margin-top: 3px;
    flex-shrink: 0;
}

.mainneo-ack-disclaimer{
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(79, 107, 114, 0.2);
    font-style: italic;
    color: #6c757d;
    text-align: center;
}

.mainneo-guest-title{
    color: #000000;
    font-size: 16px;
}

.mainneo-guest-links{
    font-size: 14px;
    margin-top: 12px;
}

/* Popular Keywords Styles */
.mainneo-table-auto{
    width: 100%;
    table-layout: auto;
    word-wrap: break-word;
}

.u-text-maroon{
    color: maroon;
}

.mainneo-keyword-link{
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
}

/* Search Form Centered Modifier */
.mainneo-search-form-centered{
    margin: 20px auto;
    max-width: 85%;
    text-align: center;
}

.mainneo-filter-group select{
    font-size: 14px;
}

/* Flexbox and Text utilities */
.u-justify-center{
    justify-content: center;
}

.u-text-decoration-none{
    text-decoration: none;
}

/* Selector Components */
.selector-title{
    margin: 0 0 20px 0;
    color: #4f6b72;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.selector-subtitle{
    color: #6c757d;
    margin-bottom: 0;
}

.selector-list-container{
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    background: #f8f9fa;
    overflow: hidden;
}

.selector-table{
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100%;
}

.selector-th-id{
    width: 80px;
}

.selector-row-clickable{
    cursor: pointer;
}

.selector-cell-id{
    text-align: center;
    font-weight: 600;
    color: #6c5ce7;
}

.selector-cell-name{
    text-align: left;
    padding: 12px !important;
}

.selector-link{
    text-decoration: none;
    color: #4f6b72;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.selector-link i{
    color: #28a745;
    font-size: 12px;
}

.selector-no-data{
    padding: 20px !important;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.u-text-info{
    color: #17a2b8;
}

.u-mr-8{
    margin-right: 8px;
}

.u-text-gray{
    color: #666;
}

.mainneo-indicator.mainneo-locked{
    background: #dc3545;
    color: white;
}

.mainneo-indicator.mainneo-undiscoverable{
    background: #6c757d;
    color: white;
}

/* Requirements warning alerts */
.mainneo-requirements-box{
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.mainneo-requirements-box h4{
    color: #856404;
    margin: 0 0 15px 0;
}

.mainneo-requirements-box ul{
    margin: 0;
    padding-left: 20px;
    color: #856404;
    text-align: left;
}

/* Utilities */
.u-min-width-220{
    min-width: 220px;
}

/* Browser Layout components */
.mainneo-grid-browser{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.mainneo-card-browser{
    margin-bottom: 0 !important;
    padding: 16px !important;
    border-radius: 12px !important;
}

.browser-card-icon{
    color: #6c5ce7;
    font-size: 18px;
}

.browser-footer-info{
    margin-top: 30px !important;
    text-align: center !important;
    padding: 16px !important;
}

.browser-footer-time{
    font-size: 14px !important;
    color: #4f6b72 !important;
}

.browser-no-data{
    text-align: center !important;
    padding: 20px !important;
}

.browser-no-data-icon{
    color: #999 !important;
    font-size: 48px !important;
    margin-bottom: 16px !important;
    display: block !important;
}

.contributor-letter-header{
    grid-column: 1 / -1;
    background: #6c5ce7;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Utilities */
.u-flex-align-center-gap-12{
    display: flex;
    align-items: center;
    gap: 12px;
}

.u-flex-center-gap-8{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.u-flex-1{
    flex: 1;
}

.u-mt-8{
    margin-top: 8px;
}

.mainneo-date-badge-inline{
    margin-top: 8px !important;
    display: inline-block !important;
}

/* Composer components */
.mainneo-composer-wrapper{
    width: 95%;
    max-width: none;
    margin: 20px auto;
}

.mainneo-composer-card{
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e5e9;
}

.mainneo-composer-textarea{
    width: 100%;
    height: 450px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    font-family: monospace;
    resize: vertical;
}

/* Warning / Requirements components */
.mainneo-requirements-box p{
    margin: 0 0 15px 0;
    color: #856404;
}

.mainneo-warning-callout{
    background: #fef7e0;
    border-radius: 6px;
    padding: 15px;
    border-left: 4px solid #ffc107;
}

.mainneo-warning-callout strong{
    color: #856404;
}

.mainneo-warning-callout ul{
    margin: 10px 0 0 20px;
    color: #856404;
    text-align: left;
}

/* Info Card components */
.mainneo-alert-info p{
    margin: 0 0 15px 0;
    color: #0c5460;
}

.mainneo-info-callout{
    background: #cff4fc;
    border-radius: 6px;
    padding: 15px;
    border-left: 4px solid #0dcaf0;
}

.mainneo-info-callout strong{
    color: #055160;
}

.mainneo-info-callout ul{
    text-align: left;
    margin: 10px 0 0 20px;
    color: #055160;
}


/* Checkbox & Radio Selection Group components */
.mainneo-checkbox-group, .mainneo-radio-group{
    margin-top: 10px;
    text-align: left;
}

.mainneo-checkbox-item, .mainneo-radio-item{
    margin-bottom: 15px;
}

.mainneo-radio-item{
    margin-bottom: 10px;
}

.mainneo-checkbox-item:last-child, .mainneo-radio-item:last-child{
    margin-bottom: 0;
}

.mainneo-checkbox-item label, .mainneo-radio-item label{
    margin-left: 8px !important;
    font-weight: normal !important;
}


@media (max-width: 768px) {

    .roundInputText{
        width: 350px;
    }
.footer{
        padding: 8px 10px;
        font-size: 12px;
    }

    .footer .debug-info{
        font-size: 10px;
        padding: 8px 10px;
        width: calc(100% + 20px);
        max-width: none;
        margin: 8px -10px 0 -10px;
        border-radius: 0;
        box-sizing: border-box;
    }

    .footer .footer-main{
        font-size: 12px;
    }

    .footer .debug-toggle-link{
        margin-left: 6px;
    }

    .footer .status-indicator.success{
        width: 5px;
        height: 5px;
        margin-right: 6px;
    }
.mainneo-browser-bar{
        padding: 0 16px;
        margin: 16px auto;
    }

    .mainneo-browser-container{
        padding: 16px;
    }

    .mainneo-browser-links{
        gap: 8px;
    }

    .mainneo-browser-link{
        overflow: visible;
        padding: 10px 14px;
        font-size: 13px;
    }

    .mainneo-browser-link span{
        display: none;
    }

    .mainneo-browser-link i{
        font-size: 18px;
    }

    /* CSS tooltip shown on hover (icon-only mode) */
    .mainneo-browser-link::after{
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: rgba(30, 30, 30, 0.88);
        color: #fff;
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 100;
    }

    .mainneo-browser-link:hover::after{
        opacity: 1;
    }

    .mainneo-browser-header{
        font-size: 15px;
        margin-bottom: 12px;
    }
.mainneo-tableneo-container{
        width: 98%;
        padding: 15px;
        max-width: none;
    }
.mainneo-action-buttons{
        gap: 6px;
    }

    .mainneo-edit-btn, .mainneo-delete-btn{
        width: 100%;
        padding: 8px 12px;
    }

    .mainneo-cell-main{
        min-width: auto;
    }

    .mainneo-tableneo-table td{
        padding: 12px 8px;
    }
.mainneo-date-badge{
        font-size: 12px;
        padding: 4px 8px;
    }

    .mainneo-time-meta{
        font-size: 10px;
        text-align: left;
    }

    .mainneo-unbookmarked-status{
        font-size: 11px;
    }

    .mainneo-unbookmarked-date{
        font-size: 10px;
    }
.mainneo-filter-row{
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .mainneo-filter-group{
        min-width: auto;
        width: 100%;
    }

    .mainneo-filter-section{
        padding: 16px;
        margin: 16px 0;
    }

    .mainneo-status-display{
        font-size: 13px;
        padding: 12px;
    }
.mainneo-tab-container{
        margin: 16px;
        padding: 16px;
        border-radius: 8px;
    }

    .mainneo-tab-nav{
        gap: 6px;
    }

    .mainneo-tab-link{
        padding: 10px;
        gap: 0;
        min-width: 40px;
        justify-content: center;
    }

    .mainneo-tab-text{
        display: none;
    }

    .mainneo-tab-link i{
        font-size: 16px;
    }

    .mainneo-tab-header{
        font-size: 15px;
        margin-bottom: 16px;
    }

    .mainneo-tab-warning{
        font-size: 12px;
        padding: 10px 12px;
    }
.mainneo-lists-grid{
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mainneo-list-card{
        padding: 20px;
        gap: 15px;
    }

    .mainneo-list-icon{
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .mainneo-list-content h3{
        font-size: 16px;
    }
.container{
        flex-direction: column;
    }

    .first-div, .second-div{
        width: 100% !important;
    }

    .mainneo-result-item{
        flex-direction: column;
        gap: 15px;
        padding: 16px;
    }

    .mainneo-result-meta{
        flex-direction: column;
        gap: 8px;
    }

    .mainneo-photo-grid{
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
        padding: 15px;
    }

    .mainneo-widget-content{
        padding: 16px;
    }

    .mainneo-widget-header{
        padding: 12px 16px;
    }

    .mainneo-widget-header h3{
        font-size: 15px;
    }
.mainneo-search-inline{
        flex-direction: column;
        gap: 15px;
    }

    .mainneo-search-inline .mainneo-group, .mainneo-search-inline .mainneo-filter-group{
        width: 100%;
    }
.pagination-controls{
        flex-direction: column;
        gap: 16px;
        padding: 16px 12px;
    }

    .pagination-nav-group{
        justify-content: center;
        gap: 6px;
    }

    .pagination-btn{
        font-size: 13px;
        padding: 8px 12px;
    }

    .pagination-info{
        order: -1;
        /* Move page info to top on mobile */
        font-size: 14px;
        text-align: center;
    }
table.thisRtable, table.thisRtable thead, table.thisRtable tbody, table.thisRtable th, table.thisRtable td, table.thisRtable tr{
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hide standard headers on mobile screens */
    table.thisRtable tr.thisHrow, table.thisRtable tr.whiteHeaderCenterUnderline, table.thisRtable tr.bluishHeaderCenter, table.thisRtable tr:first-child{
        display: none !important;
    }

    /* Style rows as individual cards */
    table.thisRtable tr.thisRrow, table.thisRtable tr.mainneo-table-row{
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 10px !important;
        margin-bottom: 12px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
    }

    /* Style cells as label-value pairs */
    table.thisRtable td.thisRdata{
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        position: relative !important;
        padding: 8px 10px 8px 45% !important;
        text-align: right !important;
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }

    table.thisRtable td.thisRdata:last-child{
        border-bottom: 0 !important;
    }

    /* Generate headers dynamically using data-label attributes */
    table.thisRtable td.thisRdata::before{
        content: attr(data-label);
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        width: 40%;
        font-weight: 600;
        text-align: left;
        color: #4a5568;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Stack child items inside main and status cells vertically on mobile */
    table.thisRtable td.mainneo-cell-main,
    table.thisRtable td.mainneo-cell-status{
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        text-align: right !important;
        gap: 4px !important;
    }

    table.thisRtable td.mainneo-cell-main::before{
        top: 12px !important;
        transform: none !important;
    }

    table.thisRtable td.mainneo-cell-main > *{
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        word-break: break-word;
    }

}

@media (max-width: 480px) {

    .mainneo-browser-links{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .mainneo-browser-link{
        width: auto;
        padding: 10px 14px;
    }
.mainneo-tableneo-container{
        width: 100%;
        padding: 10px;
        border-radius: 8px;
    }
.mainneo-filter-group select{
        font-size: 16px;
        /* Prevent zoom on mobile */
        padding: 12px;
    }

    .mainneo-status-display{
        font-size: 12px;
        padding: 10px;
        line-height: 1.4;
    }
.mainneo-tab-nav{
        gap: 4px;
    }

    .mainneo-tab-link{
        padding: 8px;
        min-width: 36px;
    }

    .mainneo-tab-link i{
        font-size: 14px;
    }

    .mainneo-tab-container{
        margin: 12px;
        padding: 12px;
    }
    .mainneo-result-indicators{
        gap: 4px;
    }

    .mainneo-indicator{
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 3px;
    }

    .mainneo-photo-grid{
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .mainneo-photo-image, .mainneo-photo-placeholder{
        height: 200px;
    }
.pagination-btn .btn-text{
        display: none;
    }

    .pagination-btn{
        min-width: 40px;
        padding: 8px;
    }

    .pagination-info{
        font-size: 13px;
    }

    .pagination-controls{
        gap: 12px;
        padding: 12px 8px;
    }

}

@media print {

    a[href]::after{
        content: none !important;
    }

    
}

@media (max-width: 500px) {

    .mainneo-btn-group{
        flex-direction: column;
        gap: 10px;
    }

    .mainneo-btn-group .mainneo-submit-btn, .mainneo-btn-group .mainneo-cancel-btn{
        max-width: none;
        width: 100%;
    }
.mainneo-logclear-btn-group{
        flex-direction: column;
        align-items: stretch;
    }

    .mainneo-logclear-select-wrapper{
        flex: none;
        width: 100%;
    }

    .mainneo-logclear-submit{
        max-width: none;
        width: 100%;
    }
.mainneo-keymaker-btn-group{
        flex-direction: column;
        align-items: stretch;
    }

    .mainneo-keymaker-btn-group .mainneo-submit-btn, .mainneo-keymaker-btn-group .mainneo-cancel-btn{
        max-width: none;
        width: 100%;
    }

}

@media screen and (max-width: 950px) {

    .video-container{
        width: 100%;
    }

}

@media (max-width: 375px) {

    .pagination-controls{
        padding: 12px 8px;
        gap: 8px;
    }

    .pagination-nav-group{
        gap: 4px;
    }

    .pagination-btn{
        min-width: 36px;
        padding: 6px 8px;
        font-size: 12px;
    }

    .pagination-info{
        font-size: 12px;
    }

}

@media (max-width: 900px) {

    .mainneo-form-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .mainneo-form-grid{
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

}

@media (hover: none) and (pointer: coarse) {

    .pagination-btn{
        min-height: 44px;
        /* iOS/Android touch target minimum */
        padding: 12px 16px;
    }

}

/* Admin Item Registration Form Styles (sw_admin/reg.php) */
.admin-reg-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background: #ffffff;
    padding: 24px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    text-align: left;
    overflow: hidden;
}
.admin-reg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .admin-reg-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .admin-reg-container {
        padding: 16px 12px;
    }
}
.admin-reg-grid .depo-form-section-header {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    width: 100%;
    box-sizing: border-box;
}
.admin-reg-grid .depo-form-section-header.is-spaced {
    margin-top: 24px;
}
.admin-reg-grid .mainneo-group {
    margin-bottom: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.admin-reg-grid .mainneo-group label {
    display: block;
    font-weight: 600;
    color: #1e293b;
    font-size: 13.5px;
    margin-bottom: 6px;
    word-break: break-word;
}
.admin-reg-grid .mainneo-group input[type="text"],
.admin-reg-grid .mainneo-group input[type="date"],
.admin-reg-grid .mainneo-group select,
.admin-reg-grid .mainneo-group textarea {
    width: 100%;
    max-width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #ffffff;
    box-sizing: border-box;
}
.admin-reg-grid .mainneo-group input[type="text"]:focus,
.admin-reg-grid .mainneo-group input[type="date"]:focus,
.admin-reg-grid .mainneo-group select:focus,
.admin-reg-grid .mainneo-group textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}
.admin-reg-grid .mainneo-group input[readonly] {
    background-color: #f1f5f9;
    color: #475569;
}
.admin-reg-flex-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}
.admin-reg-flex-group input[type="text"] {
    flex: 1 1 180px;
    min-width: 0;
}
.admin-reg-flex-group button {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ==========================================================================
   Modern Details Page Styling (detailsg.php)
   ========================================================================== */

.details-wrapper {
    width: 95%;
    max-width: 1400px;
    margin: 20px auto 40px auto;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Hero Header Card */
.details-hero-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.details-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.details-hero-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
    margin: 0 0 12px 0;
    word-break: break-word;
}

.details-hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 10px;
}

/* Badge System */
.details-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.details-badge-available {
    background-color: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.details-badge-embargo {
    background-color: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.details-badge-limited {
    background-color: #ffedd5;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.details-badge-type {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.details-badge-acc {
    background-color: #f3e8ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}

.details-badge-hits {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* Hero Action Toolbar */
.details-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.details-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    color: #334155;
}

.details-btn-action:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.details-btn-primary {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.details-btn-primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.details-btn-bookmark {
    background-color: #fff7ed;
    color: #c2410c;
    border-color: #ffedd5;
}

.details-btn-bookmark:hover {
    background-color: #ffedd5;
    color: #9a3412;
}

/* Main Grid Layout */
.details-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 24px;
    margin-bottom: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* Details Cards */
.details-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
}

.details-card-header {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.details-card-header i {
    color: #2563eb;
    font-size: 18px;
}

/* Meta Key-Value Rows */
.details-meta-row {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px dashed #f1f5f9;
    align-items: flex-start;
}

.details-meta-row:last-child {
    border-bottom: none;
}

.details-meta-label {
    flex: 0 0 150px;
    font-weight: 600;
    color: #64748b;
    font-size: 13.5px;
    padding-right: 12px;
    box-sizing: border-box;
}

.details-meta-value {
    flex: 1 1 200px;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

/* Tag Chips */
.details-tag-chip {
    display: inline-block;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 12.5px;
    font-weight: 500;
    margin: 2px 4px 2px 0;
}

/* Resource Access Panel */
.details-resource-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.details-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 340px));
    gap: 16px;
    margin-top: 16px;
}

.details-resource-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 340px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.details-resource-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.details-resource-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.details-resource-icon {
    font-size: 28px;
    color: #2563eb;
    flex-shrink: 0;
}

.details-resource-icon.pdf {
    color: #dc2626;
}

.details-resource-icon.iso {
    color: #0284c7;
}

.details-resource-icon.image {
    color: #16a34a;
}

.details-resource-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 4px;
}

.details-resource-desc {
    font-size: 12.5px;
    color: #64748b;
}

/* Abstract & Section Cards */
.details-section-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #2563eb;
    border-radius: 8px 12px 12px 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.details-section-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.details-section-content {
    font-size: 14.5px;
    line-height: 1.7;
    color: #334155;
    word-break: break-word;
}

.details-references-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    max-height: 220px;
    overflow-y: auto;
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
}

/* Feedback Styling */
.details-feedback-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}

.details-feedback-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 12.5px;
    color: #64748b;
    flex-wrap: wrap;
    gap: 8px;
}

.details-feedback-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.details-vote-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}

.details-vote-chip.up {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.details-vote-chip.up:hover {
    background: #dbeafe;
}

.details-vote-chip.down {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.details-vote-chip.down:hover {
    background: #fee2e2;
}

/* QR Code Modal / Box */
.details-qrcode-box {
    display: none;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.details-qrcode-box img, .details-qrcode-box canvas {
    margin: 0 auto;
}

    @media (max-width: 768px) {
    .details-hero-card {
        padding: 18px 20px;
    }
    .details-hero-title {
        font-size: 19px;
    }
    .details-grid-container {
        grid-template-columns: 1fr;
    }
    .details-meta-label {
        flex: 0 0 100%;
        margin-bottom: 4px;
    }
    .details-meta-value {
        flex: 0 0 100%;
    }
}

/* Admin Details Specific Styling (sw_admin/details.php) */
.details-admin-card {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.details-admin-card-header {
    font-size: 16px;
    font-weight: 700;
    color: #92400e;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid #fef3c7;
    display: flex;
    align-items: center;
    gap: 10px;
}

.details-admin-card-header i {
    color: #d97706;
    font-size: 18px;
}

.details-audit-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: #78350f;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #fde68a;
}

.details-audit-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #fef3c7;
    font-weight: 500;
}

.details-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.details-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.details-admin-btn:hover {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #78350f;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.details-admin-btn.danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.details-admin-btn.danger:hover {
    background: #fee2e2;
    border-color: #f87171;
    color: #991b1b;
}

.details-admin-btn.success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #16a34a;
}

.details-admin-btn.success:hover {
    background: #dcfce7;
    border-color: #4ade80;
    color: #15803d;
}

/* RDM Metadata Display Card */
.details-rdm-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #0284c7;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.details-rdm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px 24px;
    margin-top: 14px;
}

/* Related Files Component Grid & Card Styling */
.details-related-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
    gap: 12px;
    margin-top: 12px;
}

.details-related-file-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.details-related-file-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.details-related-file-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.details-related-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: #eff6ff;
    color: #2563eb;
}

.details-related-icon-box.pdf { background: #fef2f2; color: #dc2626; }
.details-related-icon-box.word { background: #eff6ff; color: #1d4ed8; }
.details-related-icon-box.excel { background: #f0fdf4; color: #16a34a; }
.details-related-icon-box.archive { background: #fff7ed; color: #ea580c; }
.details-related-icon-box.media { background: #faf5ff; color: #9333ea; }
.details-related-icon-box.image { background: #f0fdf4; color: #15803d; }

.details-related-file-info {
    min-width: 0;
    flex: 1;
}

.details-related-file-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.details-related-file-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.details-related-ext-pill {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    background: #f1f5f9;
    color: #475569;
    padding: 1px 6px;
    border-radius: 4px;
}

.details-related-access-pill {
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
}

.details-related-access-pill.openaccess {
    background: #dcfce7;
    color: #15803d;
}

.details-related-access-pill.restricted {
    background: #fef2f2;
    color: #dc2626;
}

.details-related-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.details-related-btn:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

@media (max-width: 768px) {
    .details-wrapper {
        width: 98%;
    }
}

@media (max-width: 480px) {
    .details-wrapper {
        width: 100%;
    }
}

/* Meta Widget Styles */
.meta-container {
    text-align: center;
    font-size: 8pt;
    margin-bottom: 30px;
    margin-top: -30px;
}

.meta-button {
    display: inline-block;
    padding: 3px 8px;
    background: linear-gradient(to bottom, #7b96c9, #556b9e);
    color: white;
    text-decoration: none;
    border-radius: 3px;
    font-size: 8pt;
    font-weight: 500;
    margin: 0 4px;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.meta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    background: linear-gradient(to bottom, #8ba3d3, #6277ad);
}

/* ==========================================================================
   Jisc Open Policy Finder (Sherpa Romeo) Policy Card Styles
   ========================================================================== */
.opf-container {
    grid-column: 1 / -1;
    margin: 8px 0 16px 0;
    font-family: var(--font-family);
}

.opf-card {
    background: #ffffff;
    border: 1px solid #dcd7f5;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.08);
    transition: all 0.25s ease;
}

.opf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #ebe7fa;
    padding-bottom: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.opf-title-group h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: #2d3748;
}

.opf-title-group .opf-publisher {
    font-size: 11px;
    color: #6c757d;
}

.opf-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.opf-link-btn, .opf-refresh-btn, .opf-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    color: #475569;
    transition: all 0.2s ease;
}

.opf-link-btn:hover, .opf-refresh-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.opf-close-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    padding: 4px 6px;
}

.opf-close-btn:hover {
    color: #e11d48;
}

.opf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.opf-pill {
    padding: 12px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.2s ease;
}

.opf-pill:hover {
    transform: translateY(-2px);
}

.opf-pill-allowed {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #10b981;
}

.opf-pill-embargo {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
}

.opf-pill-prohibited {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
}

.opf-pill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 12px;
}

.opf-pill-allowed .opf-pill-header { color: #065f46; }
.opf-pill-embargo .opf-pill-header { color: #92400e; }
.opf-pill-prohibited .opf-pill-header { color: #991b1b; }

.opf-pill-status {
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}

.opf-pill-allowed .opf-pill-status { color: #047857; }
.opf-pill-embargo .opf-pill-status { color: #b45309; }
.opf-pill-prohibited .opf-pill-status { color: #b91c1c; }

.opf-pill-meta {
    font-size: 10px;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.4;
}

.opf-details-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 10px;
    font-size: 11px;
}

.opf-statement-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    padding: 8px 10px;
    margin-top: 6px;
    gap: 8px;
}

.opf-statement-text {
    font-size: 11px;
    color: #334155;
    font-style: italic;
    flex-grow: 1;
}

.opf-copy-btn {
    background: #6366f1;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.opf-copy-btn:hover {
    background: #4f46e5;
}

.opf-loading-state, .opf-alert-state {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.opf-loading-state {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.opf-alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.opf-alert-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.opf-alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}