/**
 * CCUK Entra ID Page Lock - Frontend Styles
 * ============================================================================
 * 
 * This stylesheet provides styling for the public-facing elements of the
 * CCUK Entra ID Page Lock plugin.
 * 
 * COMPONENTS STYLED:
 * 
 * 1. ACCESS DENIED MESSAGES
 *    - .entra-login-required        : Container for "login required" message
 *    - .entra-not-authorized        : Modifier for "not authorized" state
 *    - .entra-logged-in-as          : Shows current user's email
 * 
 * 2. LOGIN BUTTON (used in shortcode and messages)
 *    - .entra-login-button          : Microsoft-styled login button
 *    - .entra-logged-in             : Status shown when already logged in
 * 
 * 3. OPTIONAL OVERLAY STYLES
 *    - .entra-login-overlay         : Full-page overlay (not currently used)
 *    - .entra-login-box             : Centered login box (not currently used)
 * 
 * COLOR SCHEME:
 * - Microsoft Blue: #0078d4 (primary button)
 * - Success Green: #e8f5e9, #2e7d32 (logged in status)
 * - Warning Yellow: #fff3cd, #ffc107 (not authorized)
 * - Neutral Gray: #f8f9fa, #495057 (containers)
 * 
 * CUSTOMIZATION:
 * To override these styles, add custom CSS to your theme with higher specificity
 * or use !important declarations. The plugin uses standard class names that
 * won't conflict with most themes.
 * 
 * @package CCUK_Entra_ID_Page_Lock
 * @since 1.0.0
 */

/* =============================================================================
   ACCESS DENIED MESSAGE CONTAINER
   
   This is the main container shown when a user cannot access a protected page.
   Two states:
   - Default (gray): User needs to log in
   - .entra-not-authorized (yellow): User is logged in but not permitted
   ============================================================================= */

.entra-login-required {
    max-width: 500px;
    margin: 40px auto;
    padding: 30px;
    text-align: center;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.entra-login-required p {
    margin-bottom: 20px;
    color: #495057;
    font-size: 16px;
}

.entra-login-required.entra-not-authorized {
    background: #fff3cd;
    border-color: #ffc107;
}

.entra-login-required.entra-not-authorized p {
    color: #856404;
}

.entra-logged-in-as {
    font-size: 14px;
    color: #6c757d !important;
    font-style: italic;
}

/* =============================================================================
   LOGIN BUTTON
   
   Styled to match Microsoft's branding guidelines.
   Includes the Windows/Microsoft logo as a pseudo-element.
   Used in:
   - [entra_login_button] shortcode
   - Access denied message "Sign in with Microsoft" link
   ============================================================================= */

.entra-login-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #0078d4;
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: background 0.2s ease;
}

.entra-login-button:hover {
    background: #106ebe;
    color: #fff;
}

/* Microsoft logo as inline SVG data URI
   This avoids needing an external image file.
   The four colored squares represent the Windows logo. */
.entra-login-button::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Cpath fill='%23f25022' d='M1 1h10v10H1z'/%3E%3Cpath fill='%2300a4ef' d='M1 12h10v10H1z'/%3E%3Cpath fill='%237fba00' d='M12 1h10v10H12z'/%3E%3Cpath fill='%23ffb900' d='M12 12h10v10H12z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* =============================================================================
   LOGGED IN STATUS
   
   Shown by the shortcode when user is already authenticated.
   Displays "Signed in as [Name] | Sign out" in a green badge.
   ============================================================================= */

.entra-logged-in {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #e8f5e9;
    border-radius: 4px;
    color: #2e7d32;
    font-size: 14px;
}

.entra-logged-in a {
    color: #1565c0;
    text-decoration: underline;
}

/* =============================================================================
   OPTIONAL: FULL-PAGE OVERLAY STYLES
   
   These styles are NOT currently used by the plugin but are provided for
   developers who want to implement a full-page login overlay instead of
   the inline message box.
   
   Example usage in a custom theme:
   
   <div class="entra-login-overlay">
       <div class="entra-login-box">
           <h2>Sign In Required</h2>
           <p>Please sign in to continue.</p>
           <a href="/entra-login" class="entra-login-button">Sign in with Microsoft</a>
       </div>
   </div>
   ============================================================================= */

/* Full-page semi-transparent overlay */
.entra-login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Centered card for login prompt */
.entra-login-box {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
    max-width: 400px;
}

.entra-login-box h2 {
    margin-bottom: 20px;
    color: #333;
}

/* =============================================================================
   END OF STYLES
   
   To add custom styles, create a separate CSS file in your theme or use
   the WordPress Customizer's Additional CSS section.
   ============================================================================= */