/**
 * IUG Login Page Customizations
 *
 * @package    local_iug_customization
 * @copyright  2026 Islamic University of Gaza
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 *
 * ============================================================================
 * CUSTOMIZATION POINTS:
 * ============================================================================
 *
 * 1. FONTS (line ~10):
 *    - Import Google Fonts using @import url()
 *    - Change 'Tajawal' to any font you want
 *
 * 2. COLORS:
 *    - Instruction Panel: #426791 (solid dark blue) - search for "Instruction Panel"
 *    - Login Button: #0f6fc5 (blue) - search for "Login button"
 *    - SSO/Danger Button: #ca3120 (red) - search for "SSO/Danger buttons"
 *    - Background: #f1f1f1 (light gray) - search for "background enhancement"
 *
 * 3. RTL LAYOUT (line ~26):
 *    - flex-direction: row-reverse; makes instruction panel appear on LEFT
 *
 * 4. BACKGROUND IMAGE:
 *    - The background image is set in the Moove theme at:
 *      docker/moodle/data/sources/public/theme/moove/pix/login_bg.png
 *    - Or via the Moove theme SCSS at:
 *      docker/moodle/data/sources/public/theme/moove/scss/moove/_login.scss
 *
 * ============================================================================
 */

/* ========== FONT IMPORT ========== */
/* Import Tajawal font for Arabic text */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

/* ========== GLOBAL FONT APPLICATION ========== */
/* Apply Tajawal font globally on login page */
body.pagelayout-login,
body.pagelayout-login * {
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ========== RTL DIRECTION SUPPORT ========== */
/* Ensure proper RTL support for Arabic */
html[dir="rtl"] body.pagelayout-login,
body.pagelayout-login[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

/* RTL: Reverse the column order so instruction panel is on LEFT */
html[dir="rtl"] body.pagelayout-login .loginform.row,
body.pagelayout-login .loginform.row {
    flex-direction: row-reverse;
}

/* ========== TYPOGRAPHY ========== */
/* Heading styles with Tajawal */
body.pagelayout-login h1,
body.pagelayout-login h2,
body.pagelayout-login h3,
body.pagelayout-login h4,
body.pagelayout-login h5,
body.pagelayout-login h6 {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 700;
}

/* Button and form label styles */
body.pagelayout-login .btn,
body.pagelayout-login button,
body.pagelayout-login input[type="button"],
body.pagelayout-login input[type="submit"],
body.pagelayout-login label,
body.pagelayout-login .form-label {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 500;
}

/* ========== LOGIN BUTTON ========== */
/* Login button - match reference color rgb(15, 111, 197) = #0f6fc5 */
body.pagelayout-login #loginbtn,
body.pagelayout-login .btn-primary {
    background-color: #0f6fc5 !important;
    border-color: #0f6fc5 !important;
}

body.pagelayout-login #loginbtn:hover,
body.pagelayout-login .btn-primary:hover {
    background-color: #0d5ea6 !important;
    border-color: #0d5ea6 !important;
}

/* ========== SSO/DANGER BUTTONS ========== */
/* SSO/Danger buttons - match reference color rgb(202, 49, 32) = #ca3120 */
body.pagelayout-login .btn-danger {
    background-color: #ca3120 !important;
    border-color: #ca3120 !important;
}

body.pagelayout-login .btn-danger:hover {
    background-color: #a8291b !important;
    border-color: #a8291b !important;
}

/* ========== PAGE BACKGROUND ========== */
/* Login background enhancement */
body.pagelayout-login #page {
    background-color: #f1f1f1;
    /* Use local plugin image, overriding theme default */
    background-image: url('../pix/login_bg_custom.png') !important;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

/* ========== INSTRUCTION PANEL ========== */
/* IUG Instructions panel - match reference solid color rgb(66, 103, 145) = #426791 */
body.pagelayout-login .right-column,
body.pagelayout-login .iug-instructions-column {
    background: #426791 !important;
    background-image: none !important;
    color: white;
    padding: 2rem;
    border-radius: 0.5rem;
}

/* Ensure panel headings are visible */
body.pagelayout-login .right-column h2,
body.pagelayout-login .right-column h3,
body.pagelayout-login .right-column h6,
body.pagelayout-login .iug-instructions h2 {
    color: white !important;
}

body.pagelayout-login .right-column .text-warning,
body.pagelayout-login .iug-instructions .text-warning {
    color: #ffc107 !important;
}

/* Instructions panel inner styling */
.login-instructions-panel {
    background-color: #426791;
    color: #fff;
    padding: 2rem;
    border-radius: 0.5rem;
    line-height: 1.8;
}

.login-instructions-panel h6 {
    color: #ffc107;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.login-instructions-panel p {
    color: #fff;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.login-instructions-panel hr {
    border-color: rgba(255, 255, 255, 0.3);
    margin: 1.5rem 0;
}

/* Support text styling */
.login-instructions-panel .support-item {
    margin: 0.5rem 0;
    padding-left: 1rem;
    border-left: 2px solid #ffc107;
}

.login-instructions-panel .support-icon {
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

/* ========== LOGIN FORM CARD ========== */
/* Make the login form card have proper styling */
body.pagelayout-login .loginform {
    background-color: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width: 768px) {
    body.pagelayout-login .loginform.row {
        flex-direction: column-reverse;
    }

    body.pagelayout-login .right-column {
        margin-bottom: 1rem;
        border-radius: 0.5rem 0.5rem 0 0;
    }
}

/* ========== FOOTER CUSTOMIZATION ========== */
/* Hide copyright and made by text */
#page-footer .copyright .madeby {
    display: none !important;
}

/* ========== DARK MODE SUPPORT ========== */
[data-bs-theme="dark"] body.pagelayout-login #page {
    background-color: #121212;
    background-image: none !important;
}

[data-bs-theme="dark"] body.pagelayout-login .loginform {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

[data-bs-theme="dark"] body.pagelayout-login .login-heading {
    color: #fff;
}

[data-bs-theme="dark"] body.pagelayout-login .form-control {
    background-color: #2d2d2d;
    border-color: #444;
    color: #fff;
}

[data-bs-theme="dark"] body.pagelayout-login .form-control:focus {
    background-color: #333;
    color: #fff;
}

[data-bs-theme="dark"] body.pagelayout-login .btn-secondary {
    background-color: #444;
    border-color: #555;
    color: #fff;
}

/* ========== GLOBAL NAVIGATION BAR FIXES ========== */
/* Fix transparent navbar in Moove theme */
nav.navbar,
.secondary-navigation {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ========== GLOBAL DARK MODE FIXES ========== */
/* Fix global page background in dark mode */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] #page-wrapper,
[data-bs-theme="dark"] #page {
    background-color: #121212;
    color: #e0e0e0;
}

/* Specific overrides for Dark Mode Navigation */
[data-bs-theme="dark"] nav.navbar,
[data-bs-theme="dark"] .secondary-navigation {
    background-color: #1d2125 !important;
    border-bottom: 1px solid #2d3135;
    color: #fff !important;
}

[data-bs-theme="dark"] nav.navbar .nav-link,
[data-bs-theme="dark"] .secondary-navigation .nav-link {
    color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: #2d3135;
    border-color: #444;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .dropdown-item {
    color: #e0e0e0;
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: #3d4145;
}