/************************************************************/
/************* ODCO ACADEMY CUSTOM STYLES *******************/
/************************************************************/

/*
 * Add Custom Styles
 *
 * @author Bari
 * @date 02/10/2025
 * @version 21/05/2026
 */

:root {
    /* --- Core Palette --- */
    --green-light: #91CA3D;
    --green-dark: #5A7D26;
    --blue-dark: #225977;
    --blue-light: #318EAD;
    --blue-lighter: #85CCEC;
    --gray-dark: #212529;
    --gray-light: #8898AA;
    --megenta: #9E005D;
    --orange: #F15A24;
    --biege: #FFD49C;
    
    /* --- Brand & Layout Bindings --- */
    --primary-color: var(--green-light);
    --secondary-color: var(--blue-dark);
    --disabled-color: var(--gray-light);
    --text-color: var(--gray-dark);

    --login-logo-width: 10rem;
    --login-panel-width: 33%;
    
    /* --- Tokenized Optimization Colors --- */
    --color-brand-primary: #6EC0E5;
    --color-brand-primary-hover: #449ECA;
    --color-brand-focus-shadow: rgba(110, 192, 229, 0.25);
    --color-bg-input-base: #F5FCFF;
    --color-bg-input-focus: #ffffff;
    --color-card-overlay-bg: rgba(255, 255, 255, 0.94);
    --color-card-overlay-border: rgba(255, 255, 255, 0.25);
    --color-card-shadow-smooth: rgba(0, 0, 0, 0.15);
    
    /* --- Global Elements & Alerts --- */
    --fancybox-bg: rgba(0, 0, 0, 0.35);
    --color-alert-danger-bg: #FFF0F2;
    --color-alert-danger-border: #FFAEB9;
    --color-alert-danger-text: #D61C38;
    --color-border-generic-light: #d8d8d8;
    --color-border-outline-grey: lightgrey;
    --color-border-divider-gray: #e9ecef;
    --color-bg-badge-gray: #f7fafc;
    --color-quiz-formulation-border: #607D8B;
    --color-quiz-formulation-bg: rgba(73, 195, 253, 0.15);
    --color-icon-light-grey: #DDD;
}


/*----------------- GLOBAL -----------------*/

.btn-primary {
    background: var(--primary-color);
    color: var(--text-color);
}


/*----------------- LOGIN -----------------*/

#page-login-index {
	/* Overrides Moodle core body background settings */
    background-size: cover !important;         
    background-position: center center !important; 
    background-attachment: fixed !important;  

	& .login-container {
    
    /* Login Panel Container */
    & {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    & .card-block {
        margin: auto 2rem;
			  padding: 1.5rem 1rem; 
        background: var(--color-card-overlay-bg) !important; /* Preserves translucent layer filter */
        backdrop-filter: blur(8px);                        
        -webkit-backdrop-filter: blur(8px);
        outline: 1px solid var(--color-card-overlay-border) !important;
        /* Enhanced smooth multi-layered drop shadow for beautiful depth */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                    0 10px 25px -5px rgba(0, 0, 0, 0.15), 
                    0 20px 40px -10px var(--color-card-shadow-smooth) !important;
        border-radius: 1rem;
        transition: all 0.3s ease;
    }
    
    & .login-card,
    & .card-header {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    & .card-header {
        padding: 0;
			
        /* Set Logo */
        & img {
            max-width: var(--login-logo-width);
        }
    }
    
    /* Set Login & Password Inputs */
    & .input-username-wrapper,
    & .input-password-wrapper {
        position: relative;
/* 			Ensures proper tracking for absolute icons */
        
        /* Background & Border Layout */
        & input {
            border: 1.5px solid var(--blue-lighter) !important; /* Overrides deep form border states */
            border-radius: 0.5rem !important; 
            padding: 10px 12px 10px 38px !important; /* 38px left padding prevents text/placeholder from collapsing into the icon */
            background-color: var(--color-bg-input-base) !important; /* Forces background over browser autocomplete yellow */
            font-size: 0.95rem;
            height: auto !important;
            transition: all 0.2s ease-in-out;
        }

        /* Dynamic Focus State */
        & input:focus {
            border-color: var(--color-brand-primary) !important;
            background-color: var(--color-bg-input-focus) !important;
            box-shadow: 0 0 0 3px var(--color-brand-focus-shadow) !important;
            outline: none;
        }
        
        /* Fixed Icon Alignment */
        &::before {
            color: var(--blue-dark);
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);            /* Perfectly centers the icon vertically */
            z-index: 2;
            pointer-events: none;                   /* Allows clicks to pass through to the input */
        }
    }
    
    & #loginbtn {
        background: var(--color-brand-primary); 
        border-color: var(--color-brand-primary);
        border-radius: 0.5rem;
        padding: 10px;                   
			/* Slightly balanced padding to match input scale */
        color: var(--blue-dark);
        font-weight: 600;
        letter-spacing: 0.5px;
        transition: all 0.3s ease-in-out;
    }

    & #loginbtn:hover,
    & #loginbtn:focus {
			color: white;
        background-color: var(--color-brand-primary-hover) !important; 
        border-color: var(--color-brand-primary-hover) !important;
/*         transform: scale(1.03);  */
        box-shadow: 0 4px 12px var(--color-brand-focus-shadow) !important;
    }

    & #loginbtn:active {
/*         transform: scale(1.03);  */
    }
    
    & .forgetpass a {
        font-size: 0.85rem;
        color: var(--blue-dark);
        font-weight: 500;
        text-decoration: none !important;
    }

    & .forgetpass a:hover {
        color: var(--blue-light);
        text-decoration: underline !important;
    }

    /* Moodle Error/Alert Notification Box layout adaptation */
    & .alert-danger {
        background-color: var(--color-alert-danger-bg) !important;
        border: 1px solid var(--color-alert-danger-border) !important;
        color: var(--color-alert-danger-text) !important;
        border-radius: 0.5rem !important;
        font-size: 0.88rem;
        font-weight: 500;
        margin-bottom: 1rem;
    }
  }
}

/* RTL Adjustment to ensure icon fix switches correctly for Arabic viewports */
html[dir='rtl'] #page-login-index {
    & .login-container {
        text-align: right !important; 
    }
    
    & .input-username-wrapper,
    & .input-password-wrapper {
        & input {
            padding: 10px 38px 10px 12px !important; 
					/* Inverts text padding fields for proper reading layout */
        }
        &::before {
          left: auto;
					right: 14px;                            
					/* Flips absolute layout of the icon container */
        }
    }
    
    & .dropdown-menu {
        right: 0 !important;
    }
}


#page-user-policy {
    
    & iframe {
        border: none;
        outline: 1px solid var(--color-border-outline-grey);
        min-height: 120vh;
    }
    
    & .btn-secondary {
        background: var(--gray-light);
        border-color: var(--gray-light);
        color: var(--text-color);
    }
}


/*----------------- BREADCRUMB -----------------*/

/* Hide My Courses Link */
.breadcrumb .breadcrumb-item:has(a[href$='my/courses.php']) {
    display: none;
}


/*----------------- DRAWERS -----------------*/

.drawer-toggles .drawer-toggler .btn {
    background: var(--primary-color);
    color: var(--text-color);
}


/*----------------- COLLAPSE ICONS FIX -----------------*/
.collapsible-actions {
    text-align: left;
}

.collapsemenu .collapseall,
.collapsemenu.collapsed .expandall {
    padding: 0.125rem 0.25rem;
}

.collapsible-actions .collapseexpand::before {
    font-weight: 600;
    content: "";
    transform: rotateX(180deg);
}

.collapsible-actions .collapsed::before {
    transform: none;
}

fieldset.collapsible legend a.fheader::after {
    font-weight: 600;
}


/*----------------- TEXT EDITOR FIX -----------------*/

/* Set Min Height of Text Editor */
html {
    & .editor_atto_content, & .tox-tinymce {
        min-height: 350px !important; /* Overrides direct plugin inline style specifications */
    }
}


/*----------------- MENU -----------------*/

/* Hide Top Menu Buttons */
.primary-navigation .nav-item[data-key='home']
,.primary-navigation .nav-item[data-key='mycourses'] {
    display: none;
}

/* Hide Top Menu User Profile Preferences Item */
.usermenu {
    & a[href*="calendar/view.php"],
    & a[href*="profile.php"] + .dropdown-divider,
    & a[href$="preferences.php"],
    & a[href$="preferences.php"] + .dropdown-divider {
        display: none;
    }
}

/* Hide User Profile Page Widgets ONLY for Non-Admins */
html:not(.admin) #page-user-profile {
    
    & .node_category:has(a[href*="mod/customcert"]),
    & .node_category:has(a[href*="report/usersessions"]),
    & .node_category:has(a[href*="https://download.moodle.org/mobile"]) {
        display: none !important;
    }
    
    /* Hide User Profile Page Menu Items ONLY for Non-Admins */
    & .menubar .dropdown-item:has(a[href*="user/contentbank.php"]),
    & .menubar .dropdown-item:has(a[href*="message/edit.php"]),
    & .menubar .dropdown-item:has(a[href*="message/notificationpreferences.php"]) {
        display: none;
    }
}

/* Hide User Preferences Page Links ONLY for Non-Admins */
html:not(.admin) #page-user-preferences {
    & .card .card-text a[href*="user/contentbank.php"],
    & .card .card-text a[href*="message/edit.php"],
    & .card .card-text a[href*="message/notificationpreferences.php"] {
        display: none;
    }
}

/* Hide Notifications Setting */
html:not(.admin) #page-message-notificationpreferences {
    & .preferences-container th[data-processor-name="email"] i {
        display: none;
    }
    
    & .preferences-container th[data-processor-name="email"] a {
        pointer-events: none;
    }
}


/*----------------- SLIDER DASHBOARD -----------------*/
ul.uk-slideshow-items {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}


/*----------------- COURSE OVERVIEW DASHBOARD -----------------*/

/* Add Hover Effect on Course Card Hover */
.block_myoverview .card.dashboard-card:hover {
    box-shadow: 0 0 5px 1px var(--gray-light);
    transition: 0.2s all;
}

/* Show Category like Badge */
.block .block-cards span.categoryname {
    font-size: small;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--color-border-divider-gray);
    border-radius: 0.25rem;
    background-color: var(--color-bg-badge-gray);
    text-transform: uppercase;
}

/* Hide Course Filter  */
.block_myoverview [data-region="filter"] {
    display: none !important;
}

/* Hide Sort List & Force Sorting by Course Shortname */
#sortingdropdown {
    display: none;
}

/* Category DIV */
.category {
    min-width: 97%;
    margin: 0 auto 1rem;
    font-size: large;
    font-weight: bold;
    padding: 0.5rem 0 0.25rem 0;
    border-bottom: 1px solid var(--color-border-divider-gray);
    border-radius: 0.25rem;
    text-transform: uppercase;
}


/*----------------- UPCOMING EVENTS BLOCK DASHBOARD -----------------*/
.block_calendar_upcoming .event {
    padding: 0 !important;
    border-bottom: none !important;
}


/*----------------- COURSE CONTACT BLOCK -----------------*/

/* Limit Select Width to prevent Overflow */
.block_course_contacts .custom-select {
    width: 20rem !important;
}

/* Fix Contact Icons Layout */
.block_course_contacts {
    
    /* Hide Group Select For Tutor/Student */
    & .groupselector:not(:has(form)) {
        display: none !important;
    }
    
    & .ccard {
        width: 100%;
        display: inline-flex;
        padding: 0.25rem 0;
        
        & .userpicture, & .userinitials {
            min-width: 50px;
            min-height: 50px;
            margin-right: 0.5rem;
        }
        
        & .info {
            width: 100%;
            
            & .status {
                margin-top: 0.25rem;
            }
            
            & hr {
                display: none;
            }
            
            & .comms {
                margin: 0;
            }
        }
    }
}

.block_course_contacts .comms {

	& a {
		margin-right: 5px;
	    width: 32px;
	    height: 32px;
	    border: 1px solid #e9ecef;
	    border-radius: 50%;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    background-color: #f6f9fc;
	    transition: all 0.2s;

		&:hover {
			background-color: #e9ecef;
		}

		&:last-child {
			margin-right: 0;
		}

		&::before {
			font-family: "Font Awesome 6 Free";
			font-weight: 900; /* Required for Solid icons */
		}

    	/* Mail Icon */
		&[href^="mailto:"]::before {
			content: "\f0e0";
		}
		
    	/* Telephone Icon */
		&[href^="tel:"]::before {
			content: "\f095";
		}
		
    	/* Message Icon */
		&[href*="message/index.php"]::before {
			content: "\f27a";
		}
    
		& img {
			display: none;
		}
	}
}


/*----------------- COURSE INTRO -----------------*/

.block_purity_course_intro.style2 {
    
    /* Change Course Info Color & Set Width */
    & .course-intro-info {
        color: var(--text-color);
        width: 60%;
        top: 0;
        padding-top: 1rem;
    }
    
    /* Decrease Opacity of Image Overlay */
    & .course-intro-media .course-intro-media-overlay::after {
        opacity: 0.3;
    }
    
    /* Change Course Title Color */
    & .course-intro-info .course-intro-name {
        color: var(--primary-color);
        text-align: center;
    }
    
    /* Disable Autolink Activity */
    & a.autolink {
        pointer-events: none;
        color: inherit;
    }
    
    /* Set Course Summary */
    & .course-intro-summary {
        font-size: 9px;
    }
}

/* Force LTR Layout on Arabic Language  */
html[dir='rtl'] .block_purity_course_intro.style2 .course-intro-info {
    direction: ltr;
    text-align: left;
    left: 0;
}

/* Set Course 8 Spacing to Show Category Badge */
body.course-8 .block_purity_course_intro.style2 {
    & .course-intro-summary {
        margin-top: 0.25rem;
    }
    
    & .course-intro-category,
    & .course-intro-details {
        margin-top: auto;
    }
}


/*----------------- COURSE CONTENT -----------------*/

/* Hide Course Content Card Title: 'Course Content' */
.course-content-title {
    display: none;
}

/* Hide Course Reports Logs Sources Menu */
select#menuorigin {
    display: none;
}


/*----------------- COURSE SECTIONS -----------------*/

/* Disable Course Section Links  */
.course-content .section .sectionname a:not(.quickeditlink) {
    pointer-events: none;
}


/*----------------- ACTIVITY ICONS + TITLES -----------------*/

/* Show Border on Top of Activity */
.format-designer ul.designer .card.card-list {
    border-top: 1px solid var(--color-border-generic-light);
}

/* Change File Activity Icon for PDF & Others */
.activity.modtype_resource .activityiconcontainer .activityicon {
    content: url('/theme/purity/pix_plugins/mod/resource/monologo.png');
}

/* Set Activities Icons Bigger */
.activity img.activityicon {
    min-width: 1.5em;
    min-height: 1.5em;
    object-fit: contain;
    vertical-align: middle;
}

/* Remove Activity Icon Filter */
.activityiconcontainer .activityicon,
.activityiconcontainer .icon {
    filter: none !important;
}

/* Remove Activity Type Text */
.course-content .activity .activitytitle .text-uppercase.small {
    display: none;
}

/* Set Activities Titles Bigger & Underline */
.course-content .activity .activitytitle .activityname a.aalink {
    color: var(--blue-dark) !important;
}

/* Set Activities Titles Hover Color */
.course-content .activity .activitytitle .activityname a.aalink:hover {
    color: var(--green-light) !important;
}


/*----------------- ACTIVITY NAVIGATION -----------------*/

.activity-navigation {
    margin: 0;
}

/* Make Activity Navigation Links as Button */
.activity-navigation #prev-activity-link,
.activity-navigation #next-activity-link {
    white-space: pre-wrap;
    color: var(--text-color);
    background-color: var(--primary-color);
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
  
    &:hover {
        color: var(--blue-lighter);
        background-color: var(--secondary-color);
    }
}

/* Add Icon to Close Button */
#page-mod-scorm-player div[role=main] .btn-secondary::before {
    font-family: "Font Awesome 6 Free";
    content: "\f057";
}


/*----------------- SCORM PAGE -----------------*/

#page-mod-scorm-player {
    & h2, & #scormtop {
        display: none;
    }

    & #scorm_layout {
        margin: 0;
    }
}


/*----------------- QUESTIONNAIRE ACTIVITY -----------------*/

/* Hide Group Chart & Group Table Column */
#page .mod_questionnaire_reportpage {
    & canvas#cvs {
        display: flex;
        margin: 0 auto 3rem;
    }
    
    & canvas#cvs2 {
        display: none;
    }
    
    table.generaltable {
        & .header.c2,
        & .cell.c2 {
            display: none;
        }
    }
}

/* Enlarge Question Emoticons Size */
.mod_questionnaire_completepage .qn-container td.smalltext {
    font-size: x-large;
}

/* Hide Badge of Completion Condition */
.path-mod-questionnaire .activity-information:has( .completion-info .automatic-completion-conditions .alert-success ) {
    display: none;
}

/* Quiz Admin Review */
#page-mod-quiz-review {
    
    /* Hide Right Answer Div for MultiChoice Question */
    & .multichoice .outcome:has(.rightanswer) {
        display: none;
    }
    
    /* Hide Response History  */
    & .que .history {
        display: none;
    }
}

/* Fix Questionnaire Extra-Large buttons */
#page-mod-questionnaire-questions .qn-container input[type=image] {
    max-width: 0.75rem;
    margin: 0 0.25rem;
}


/*----------------- ATTENDANCE ACTIVITY -----------------*/

/* Hide Second Tabs: Show All Courses */
#page-mod-attendance-view #page-content ul.nav li:nth-child(2) {
    display: none;
}

/* Hide 3rd Collapse Panel: Student Recording settings */
#page-mod-attendance-sessions [aria-controls='id_headerstudentmarkingcontainer'] {
    display: none;
}

/* Hide Checkbox for Create calendar event for session */
#page-mod-attendance-sessions #id_general div.fitem:has(#id_calendarevent) {
    visibility: hidden;
}

/* Hide Session Export Users List */
#page-mod-attendance-export {
    & #fitem_id_selectedusers, & #fitem_id_users {
        display: none;
    }
}


/*----------------- QUIZ ACTIVITY -----------------*/
#page-mod-quiz-attempt .que .formulation {
    
    /* Change Quiz Question Bg Color */
    border-color: var(--color-quiz-formulation-border);
    background-color: var(--color-quiz-formulation-bg);
    
    /* Hide Check button */
    & .im-controls button.submit {
        display: none;
    }
}


/*----------------- TILES FORMAT -----------------*/

/* Fix Activity Tiles Spacing */
.format-tiles {
    & ul.format-tiles-cm-list {
        padding: 2rem 0 0 2rem !important; /* Preserves explicit template wrapper offset alignment */
        
        & li {
            margin-bottom: 1.5rem;
            background: none !important;
            
            & .activity-icon {
                padding: 0;
                width: auto;
                max-width: 100%;
            }
        }
    }
}


/*----------------- DESIGNER FORMAT -----------------*/

/* Hide Course Info Block */
.format-designer .course-info-block {
    display: none;
}

.format-designer .course-content ul.designer {
    margin: 0;
    padding: 0;
}

/* Show Hand Cursor for Section Arrow Collapse Icon */
.format-designer .course-content .designer li.section .section-header-content span.section-collapse-icon::before,
.format-designer .course-content .course-type-collapsible.designer li.section .section-header-content span.section-collapse-icon::before {
    vertical-align: middle;
    cursor: pointer;
}

/* Decrease Gap between Activity Rows */
.format-designer .designer .section .content .section.list-layout li.activity {
    margin: 0;
}

/* Remove Activity Row 3rd Column & Extra Row */
.format-designer .show-on-hover,
.format-designer .designer .section .content .section li.activity .mod-content {
    display: none;
}

/* Show Activity Name as Link with underline */
.format-designer  li.activity .activityinstance .aalink .instancename {
    text-decoration: underline;
}

/* Set Activity Completion Badges */
.format-designer ul.designer .badge.badge-completion {
    font-weight: normal;
}


/*----------------- POPUP ACTIVITY FORMAT -----------------*/

/* Remove Extra Padding on left of Sections */
.popups.purity-collapsible[data-for=course_sectionlist] {
    padding-left: 0;
}

/* Increase Popup Size */
.modal.show .modal-dialog {
    min-width: 80%;
    min-height: 45%;
    height: auto;
}

/* SCORM Activity */
iframe#format_popups_scorm_iframe {
    height: 70vh;
    border: none;
}

#page-mod-scorm-player #scormpage #scorm_object {
    width: 100%;
}


/*----------------- TILES FORMAT -----------------*/

.format-tiles .course-content { 
    
    & ul li.section.main.moveablesection {
        padding: 1rem 2rem 2rem 1rem;
    }
    
    & .sectiontitle h2 {
        left: 0;
        margin: 0;
        padding: 0.5rem;
        border: none;
    }

    & .pagesechead .col:has(.sectionbuttons) {
        padding: 0.5em 0;
        display: flex;
        align-items: end;
        justify-content: end;
    }

    & .sectionbuttons {
        top: 0.75rem;
        right: 0;
    
        & .sectionbutton {
            border-radius: 0.25rem;
            background: var(--secondary-color);
            width: 2.5rem;
            height: 2.5rem;

            &::before {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                width: 100%;
                color: var(--color-icon-light-grey);
                font-family: "Font Awesome 6 Free";
                font-weight: bold;
                font-size: x-large;
            }

            & img {
                display: none;    
            }
        }
        
        & button::before {
            content: "\f00d";
        }
        
        & a::before {
            content: "\f044";
        }
    }

    & .completioncheckbox.completion-auto {
        margin: 0.25rem;
        border-radius: 0.25rem;
    }
}


/* Set Activity Cards Layout */ 
.format-tiles li.activity.subtile .activityname {
    min-height: 90px;
}

.format-tiles .subtiles {
    justify-content: space-around;
    row-gap: 3rem;
    margin-top: 1rem;
}

.format-tiles li.activity .tileiconcontainer {
    margin-top: 0.5rem;
    background: none !important;
    border: none !important;
}

.format-tiles li.activity.subtile .activityname h5 {
    font-size: 14px;
    line-height: normal;
}

.format-tiles li.subtile .availabilityinfo {
    bottom: 90px;
    
    & .badge {
        padding: 0.25rem 0.5rem;
    }
}


/*----------------- FOOTER -----------------*/

/* Hide Footer Home, Login info Links */
.usertour,
.logininfo,
.homelink,
.mobilelink,
.tool_usertours-resettourcontainer {
    display: none !important; /* Preserves explicit framework block hiding rules */
}


/*----------------- FANCYBOX -----------------*/
.fancybox__content {
    border-radius: 0.5rem !important;
}

.fancybox__backdrop {
    background: rgba(22,33,44,0.45) !important;
}

/* For compact mode */
.fancybox__container.is-compact .fancybox__slide.has-iframe .fancybox__content {
    width: 100%;
    height: 100%;
}

/* For all other cases */
.fancybox__slide.has-iframe .fancybox__content {
    width: 50vw;
    height: 55vh;
}

button.f-button.is-close-btn {
    color: #333;
    /* background: lightgray; */
    top: 0.5rem !important;
    right: 0.5rem !important;
    border-radius: 50%;
    
    &:hover {
        color: #0f3e68;
        background: darkgray;
    }
}

.glossyBlurCardDark,
.fancybox__backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12); /* Subtle rim highlight */
    padding: 24px;
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.3);
}