/**====ADMIN SubNav= SAME USER Subnav============*/


/* ==========ADMIN LogViews wanderer_logs.php =====> this calls debug.log file=========*/
   
.admin_log_content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header/Controls Section */
.logview_controls {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    background: #fff;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0; 
    border: 1px solid #ddd;
    border-bottom: none; 
}

.logview_controls h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

.log_viewer {
    background: #1e1e1e;
    color: #dcdcdc;
    padding: 20px;
    border-radius: 0 0 8px 8px; 
    height: 70vh; 
    overflow-y: auto; /* Scrollbar if log is long */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid #333;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.log_viewer pre {
    margin: 0;
    white-space: pre-wrap; 
    word-wrap: break-word;
}

.btn_clear_log {
    background: #dc3545;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.btn_clear_log:hover {
    background: #c82333;
}


/*** //ADMIN  manage_users_view.php ///****/

/**Admin dropdown() */
.filter-section {
        background: #f4f4f4;
        padding: 5px;
        border-radius: 8px;
        margin-bottom: 20px;
        border: 1px solid #ddd;
    }
    .filter-form select {
        padding: 8px;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 14px;
    }

/*** USERS /

.role-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    text-transform: uppercase;
}
.role-badge.admin { background: #d1ecf1; color: #0c5460; }
.role-badge.user { background: #e2e3e5; color: #383d41; }
*/


/* highlight ROLE*/
.badge { background: #d1ecf1; color: #0c5460; padding: 1px 4px; }


.user-row {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    background: #fff;
}
.user-row >div{
    min-width: 19%;
    text-align: left;
}
.header { font-weight: bold; background: #f4f4f4; }

/* The Role Dropdown Styling */
select[name="new_role"] {
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    background-color: #f9f9f9;
}
/* NOT in USED */
.role-admin {
    background-color: #ffe8e8 !important; /* Light red for Admin */
    color: #d9534f;
    border-color: #d9534f !important;
}
/* NOT in USED */
.role-user {
    background-color: #e8f4ff !important; /* Light blue for User */
    color: #0275d8;
    border-color: #0275d8 !important;
}

/* Mobile View */
@media (max-width: 600px) {
    .header { display: none; } /* Hide headers on phone */
    .user-row {
        flex-direction: column; /* Stack vertically */
        margin-bottom: 10px;
        border: 1px solid #ccc;
    }
    .user-row div[data-label]::before {
        content: attr(data-label); /* Show label like "Email:" */
        font-weight: bold;
        margin-right: 10px;
    }
}
.short-id{
    width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
    cursor: pointer; 
}
.btn-icon {
    background: none;       /* Removes the grey button background */
    border: none;           /* Removes the border */
    padding: 0;             /* Removes extra space */
    font-size: 1.2rem;      /* Makes the emoji bigger */
    cursor: pointer;        /* Shows the hand icon on hover */
    transition: transform 0.2s;
}

.btn-icon:hover {
    transform: scale(1.2);  /* Makes it "pop" when you hover */
}