.hidden { display: none !important; }
    .login-card { max-width: 400px; margin: 100px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); font-family: sans-serif; }
    input { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
    .btn-blue { background: #007bff; color: white; border: none; width: 100%; padding: 12px; cursor: pointer; border-radius: 4px; }
    .btn-link { background: none; color: #007bff; border: none; cursor: pointer; text-decoration: underline; font-size: 0.8em; margin-top: 10px; }


        
/* ********************************

            User Role and Permissions management screen layout

*****/

 /* Scoped styles to prevent sidebar interference */
        .user-mgt-container { 
            display: flex; 
            flex-direction: column; 
            gap: 25px; 
            padding: 20px; 
            max-width: 700px; 
            margin: 0; /* Align left to accommodate your existing sidebar */
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
        }

        .user-mgt-container .section-card { 
            border: 1px solid #e2e8f0; 
            padding: 24px; 
            border-radius: 10px; 
            background: #ffffff; 
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .user-mgt-container h2 { 
            margin: 0 0 20px 0;
            color: #1a202c;
            font-size: 1.25rem;
            border-bottom: 2px solid #edf2f7;
            padding-bottom: 12px;
        }

        .user-mgt-container .form-group { margin-bottom: 16px; }
        
        .user-mgt-container label { 
            display: block;
            font-weight: 600; 
            font-size: 0.875rem; 
            margin-bottom: 6px;
            color: #4a5568;
        }

        .user-mgt-container input, 
        .user-mgt-container select, 
        .user-mgt-container button { 
            width: 100%; 
            padding: 10px 12px; 
            box-sizing: border-box; 
            border: 1px solid #cbd5e0;
            border-radius: 6px;
            font-size: 0.95rem;
        }

        .user-mgt-container button { 
            background-color: #3182ce; 
            color: white; 
            border: none; 
            font-weight: 600;
            cursor: pointer; 
            transition: all 0.2s ease;
            margin-top: 8px;
        }

        .user-mgt-container button:hover { background-color: #2b6cb0; transform: translateY(-1px); }
        .user-mgt-container button:active { transform: translateY(0); }

        /* Specific Button Accents */
        .user-mgt-container .btn-assign-role { background-color: #38a169; }
        .user-mgt-container .btn-assign-role:hover { background-color: #2f855a; }

        .user-mgt-container .btn-assign-perm { background-color: #805ad5; }
        .user-mgt-container .btn-assign-perm:hover { background-color: #6b46c1; }


        .required::after {
            content: " *";
            color: red;
            font-weight: bold;
        }