/* ==========================================================================
   1. CORE CONTAINER & GENERAL DIRECTORY STYLES
   ========================================================================== */
.um-list-wrap { 
    max-width: 1200px; 
    margin: 20px auto; 
    padding: 0 16px; 
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; 
    color: #0b2540; 
    box-sizing: border-box;
}

.wp-block-preformatted {
    box-sizing: border-box;
    white-space: normal !important;
}

/* ==========================================================================
   2. THEME FRIENDLY SEARCH & FILTER BAR
   ========================================================================== */

.user-search-form{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;

    margin-bottom:24px;

    background:var(--wp--preset--color--base,#fff);
    padding:16px;

    border-radius:12px;
    border:1px solid rgba(0,0,0,.06);

    box-shadow:
        0 2px 10px rgba(0,0,0,.03);

    box-sizing:border-box;
}


/* Search input */
.user-search-form .um-search-input{

    flex:2;
    min-width:220px;

    height:48px;

    padding:0 16px;

    border-radius:8px;
    border:1px solid #d9dee5;

    background:#fff;

    font-size:15px;

    transition:.2s;
}


/* Ward + Gender filters */
.user-search-form .um-ward-select,
.user-search-form .um-gender-select{

    flex:1;
    min-width:160px;

    height:48px;

    padding:0 14px;

    border-radius:8px;
    border:1px solid #d9dee5;

    background:#fff;

    font-size:14px;

    appearance:none;

    transition:.2s;
}



/* Focus */
.user-search-form input:focus,
.user-search-form select:focus{

    outline:none;

    border-color:#2271b1;

    box-shadow:
        0 0 0 3px rgba(
            34,
            113,
            177,
            .12
        );
}



/* Search button */
.user-search-form .um-btn-filter{

    height:48px;

    padding:
        0 28px;

    border:none;

    border-radius:8px;

    background:#2271b1;

    color:#fff;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:
        background .2s,
        transform .1s;
}


.user-search-form .um-btn-filter:hover{

    background:#135e96;

}


.user-search-form .um-btn-filter:active{

    transform:scale(.98);

}



/* Equal alignment */
.user-search-form
.um-search-input,
.user-search-form
.um-ward-select,
.user-search-form
.um-gender-select,
.user-search-form
.um-btn-filter{

    box-sizing:border-box;

}



/* Mobile */
@media(max-width:768px){

.user-search-form{

    flex-direction:column;

    align-items:stretch;

    padding:14px;

}


.user-search-form
.um-search-input,

.user-search-form
.um-ward-select,

.user-search-form
.um-gender-select,

.user-search-form
.um-btn-filter{

    width:100%;

    min-width:100%;

}

}

/* ==========================================================================
   3. RESPONSIVE CARDS GRID & PROFILE VIEWER
   ========================================================================== */
.um-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Strict 2-column format on desktop */
    gap: 16px !important;
    margin-top: 20px;
    width: 100% !important;
    box-sizing: border-box;
}

/* Base User Card Styling (Desktop Side-by-Side View) */
.um-user-card {
    display: flex !important;
    flex-direction: row; /* Layout left column photo, right column information */
    background: #ffffff;
    border: 1px solid #eef3f8;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 4px 15px rgba(12,30,50,0.03);
    align-items: center;
    gap: 20px;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.um-user-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(12,30,50,0.07);
}

/* Photo Container Customizer */
.um-card-photo-box {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Uniform circular photography specifications */
.um-single-photo {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%; /* Uniform circle mask layout rendering */
    border: 3px solid #e2e8f0;
    background: #f8fafc;
    display: block;
}

/* Initials placeholder frame fallback layout */
.um-photo-placeholder {
    background: #f1f5f9;
    color: #475569;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 0px #fff;
}

/* Details Panel Grid Alignment module */
.um-card-info-box {
    flex-grow: 1;
    min-width: 0; /* Prevents overflow strings breaking containers */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.um-card-meta {
    margin: 0;
    font-size: 13px;
    color: #4a5568;
    line-height: 1.45;
    word-wrap: break-word;
}

.um-card-meta b {
    color: #0b2540;
    font-weight: 600;
}

/* Highlights the combined name label header */
.um-card-meta:first-child {
    font-size: 16px;
    margin-bottom: 2px;
}

/* ==========================================================================
   4. SHORTCODE INTERACTIVE PAGINATION PANEL
   ========================================================================== */
.um-pagination { 
    margin-top: 24px; 
    display: flex; 
    gap: 6px; 
    align-items: center; 
    flex-wrap: wrap; 
    justify-content: center;
}

.um-page-link { 
    padding: 6px 12px; 
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px; 
    border: 1px solid #cfe3f8; 
    color: #0b6fb8; 
    background: #ffffff;
    text-decoration: none; 
    transition: background-color 0.15s, color 0.15s;
}

.um-page-link.active, 
.um-page-link:hover { 
    background: #0b6fb8; 
    color: #fff; 
    border-color: transparent; 
    cursor: pointer;
}

.um-no-records { 
    padding: 20px; 
    color: #6b7280; 
    font-size: 14px; 
    text-align: center;
    grid-column: span 2;
}

/* ==========================================================================
   5. MODERN ROBOTO REGISTRATION FORM
   ========================================================================== */

#um-registration-form{

    font-family:
        "Roboto",
        sans-serif;

    background:#fff;

    max-width:1100px;

    margin:24px auto;

    padding:30px;

    border-radius:16px;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:
        0 4px 20px rgba(0,0,0,.04);

    box-sizing:border-box;

}



/* Grid layout */
#um-registration-form.um-form-grid{

    display:grid;

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

    gap:20px;

}



/* Rows */
#um-registration-form .um-row{

    display:flex;

    flex-direction:column;

    gap:8px;

    min-width:0;

}



/* Full width rows */
#um-registration-form .um-row-full,
#um-registration-form .um-submit-row{

    grid-column:1/-1;

}



/* Labels */
#um-registration-form .um-label{

    font-family:
        "Roboto",
        sans-serif;

    font-size:14px;

    font-weight:500;

    color:#1e293b;

}



/* Inputs */
#um-registration-form input[type="text"],
#um-registration-form input[type="number"],
#um-registration-form input[type="date"],
#um-registration-form input[type="email"],
#um-registration-form input[type="tel"],
#um-registration-form textarea,
#um-registration-form select{

    width:100%;

    min-height:50px;

    padding:
        12px
        14px;

    font-family:
        "Roboto",
        sans-serif;

    font-size:14px;

    font-weight:400;

    color:#334155;

    background:#fff;

    border:
        1px solid
        #d9dee5;

    border-radius:10px;

    transition:
        border-color .2s,
        box-shadow .2s;

    box-sizing:border-box;

}



/* Placeholder */
#um-registration-form input::placeholder,
#um-registration-form textarea::placeholder{

    color:#94a3b8;

    font-family:
        "Roboto",
        sans-serif;

}



/* Focus */
#um-registration-form input:focus,
#um-registration-form textarea:focus,
#um-registration-form select:focus{

    outline:none;

    border-color:#2271b1;

    box-shadow:
        0 0 0 3px rgba(
            34,
            113,
            177,
            .12
        );

}



/* Textarea */
#um-registration-form textarea{

    min-height:120px;

    resize:vertical;

}



/* Radio / checkbox groups */
#um-registration-form .um-inline-field{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    align-items:center;

    min-height:50px;

}



#um-registration-form .um-inline-field label{

    display:flex;

    align-items:center;

    gap:8px;

    font-family:
        "Roboto",
        sans-serif;

    font-size:14px;

    font-weight:400;

    color:#334155;

    cursor:pointer;

}



/* File Upload */
#um-registration-form input[type="file"]{

    width:100%;

    padding:12px;

    border:
        1px dashed
        #cbd5e1;

    border-radius:10px;

    background:#f8fafc;

    cursor:pointer;

    font-family:
        "Roboto",
        sans-serif;

    transition:.2s;

}



#um-registration-form input[type="file"]:hover{

    background:#f1f5f9;

}



/* Help text */
#um-registration-form .um-help{

    font-family:
        "Roboto",
        sans-serif;

    font-size:12px;

    color:#64748b;

    line-height:1.5;

}



/* Submit row */
#um-registration-form .um-submit-row{

    display:flex;

    justify-content:flex-end;

    margin-top:10px;

    padding-top:20px;

    border-top:
        1px solid
        #eef2f7;

}



/* Submit button */
#um-registration-form .um-submit-button{

    min-height:50px;

    padding:
        0
        36px;

    border:none;

    border-radius:10px;

    background:#2271b1;

    color:#fff;

    font-family:
        "Roboto",
        sans-serif;

    font-size:15px;

    font-weight:500;

    cursor:pointer;

    transition:
        background .2s,
        transform .1s;

}



#um-registration-form .um-submit-button:hover{

    background:#135e96;

}



#um-registration-form .um-submit-button:active{

    transform:
        scale(.98);

}



/* Mobile */
@media(max-width:768px){

#um-registration-form.um-form-grid{

    grid-template-columns:
        1fr;

}


#um-registration-form{

    padding:20px;

}


#um-registration-form .um-submit-row{

    justify-content:
        stretch;

}


#um-registration-form .um-submit-button{

    width:100%;

}

}

/* ==========================================================================
   6. RESPONSIVE BREAKPOINT VIEWPANELS (MEDIA QUERIES)
   ========================================================================== */

/* Tablet Optimization Breakpoint */
@media screen and (max-width: 960px) {
    .um-cards-grid {
        grid-template-columns: 1fr !important; /* Cascade into single columns for tablet clarity */
        gap: 14px !important;
    }
    .um-no-records {
        grid-column: span 1;
    }
}

/* Mobile Search and Form Consolidation Breakpoint */
@media screen and (max-width: 640px) {
    .user-search-form {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }
    .user-search-form .um-search-input,
    .user-search-form .um-ward-select,
    .user-search-form .um-btn-filter {
        flex: 1 1 auto;
        width: 100%;
    }

    #um-registration-form.um-form-grid {
        grid-template-columns: 1fr; /* Form becomes single column on phone viewports */
        row-gap: 12px;
    }
    #um-registration-form .um-row:has(textarea),
    #um-registration-form .um-row:has(input[type="file"]),
    #um-registration-form .um-row:has([name="marital_status"]),
    #um-registration-form .um-row:has([name="avms_has"]),
    #um-registration-form .um-submit-row {
        grid-column: span 1;
    }
    #um-registration-form .um-submit-row,
    #um-registration-form .um-submit-button {
        width: 100%;
    }
}

/* Tiny Mobile Profile Card Compression */
@media screen and (max-width: 480px) {
    .um-user-card {
        flex-direction: column; /* Stacks image above text on small screens */
        text-align: center;
        padding: 16px;
        gap: 14px;
    }
    .um-single-photo {
        width: 110px;
        height: 110px; /* Adapts circle bounding size dynamically */
    }
    #um-registration-form {
        padding: 16px 20px;
    }
}