/*******************************************************
 * SHARED USERCP, PORTAL, & MODCP STYLES
 * Refactored for clarity, performance, and Flexbox logic
 *******************************************************/

/* =========================================
   1. TYPOGRAPHY & HELPERS
   ========================================= */

/* Form Explanations ("Fine Print" under checkboxes) */
.smalltext.note {
    display: block;
    margin-top: 2px;
    margin-bottom: var(--spacing-medium);
    font-family: var(--font1); /* Lora */
    font-size: 0.8rem;
    font-style: italic;
}

/* User Title Display ("Rank" in Edit Profile) */
.usertitle {
    display: block;
    margin-bottom: var(--spacing-small); /* Fixed invalid syntax from original */
    font-family: var(--font2); /* Cormorant/Ink */
    font-weight: 700;
    font-size: 1.2rem;
}

/* =========================================
   2. MAIN LAYOUT & CONTAINERS
   ========================================= */

/* Main Flex Wrapper for Control Panels */
.user-dashboard,
.profile-edit-container,
.usercp-content,
.user-info-section {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-small);
}

/* The Main Content Area (Right Side) */
.usercp-content {
    flex: 3; /* Takes up 3/4 of space */
    align-items: stretch;
    padding: var(--spacing-small);
    max-width: 100%;
}

/* The Sidebar/Navigation Area (Left Side) */
.user-navigation {
    flex: 1; /* Takes up 1/4 of space */
    min-width: 250px;
}

/* Full Width Elements within Flex Containers */
.usercp-content .page-title,
.usercp-content .header,
.user-notepad {
    flex-basis: 100%;
    width: 100%;
}

.usercp-content .page-title:first-child {
    margin-top: 0;
}

/* Standard Card Styling */
.user-navigation.card,
.usercp_container {
    display: flex;
    flex-direction: column;
    border: var(--border-color);
    padding: var(--spacing-small);
    margin: var(--spacing-small);
}

.account-summary.card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* =========================================
   3. AVATAR & HEADER STATS
   ========================================= */

#cpavatar {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 50%;
    max-width: 300px;
    padding: var(--spacing-medium);
    margin: var(--spacing-small);
}

#cpusername {
    font-size: var(--font-size-lg);
    padding: var(--spacing-small);
}

#usercp-stats {
    flex: 1;
}

/* =========================================
   4. NAVIGATION MENU
   ========================================= */

.nav-section {
    margin-bottom: var(--spacing-small);
}

.nav-title {
    font-weight: 700;
    font-family: var(--font3);
    cursor: pointer;
    padding: var(--spacing-small) var(--spacing-medium);
    color: rgb(var(--color1));
    border-bottom: var(--border-double);
}

/* Navigation Items & Links */
.nav-content,
.usercp_nav_item,
.modcp_nav_item,
.portal-nav-item {
    padding: var(--spacing-small);
}

.nav-content {
    max-height: 0;
    overflow: hidden;
    transition: var(--transition);
}

.usercp_nav_item,
.modcp_nav_item {
    display: block;
    text-decoration: none;
}

.usercp_nav_item:hover,
.modcp_nav_item:hover {
    background-color: rgba(var(--color2light));
}

/* Indentation for Sub-items */
.usercp_nav_sub_pmfolder,
.usercp_nav_username,
.usercp_nav_password,
.usercp_nav_editsig,
.usercp_nav_email,
.usercp_nav_avatar {
    margin-left: var(--spacing-small);
}

/* =========================================
   5. NOTEPAD & INFO BOTTOM
   ========================================= */

.user-info-bottom {
    font-size: var(--font-size-sm);
    border-top: var(--border);
    padding: .5rem;
}

.usercp_notepad {
    width: 99%;
}

/* =========================================
   6. PRIVATE MESSAGING (PM) SYSTEM
   ========================================= */

/* PM Layout Wrapper */
.usercp-content.messages {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

/* Form Inputs */
.compose-to,
.compose-bcc,
.compose-subject,
.compose-message {
    width: 100%;
    margin-bottom: 1rem;
}

/* Fix for Select2 (User search dropdown) */
.select2-container {
    min-height: 2.5rem; /* Larger touch area */
}

/* Message List & Controls Spacing */
.message-controls,
.search-container,
.folder-title,
.messages-list,
.action-bar,
.pagination-and-folder {
    margin-bottom: 1rem;
}

/* Layout for Controls */
.search-container {
    display: flex;
    flex-direction: column;
}

.action-bar,
.pagination-and-folder {
    text-align: right;
}

.new_pm {
    font-weight: 700;
    color: rgb(var(--color3light));
    text-shadow: 0 0 10px rgba(var(--color3light), .55);
}