/*
 * Custom Styles for Student Revision Platform Admin Panel
 */

/* Transparent Sidebar Scrollbar Styling (Dark Background) */

/* For WebKit browsers (Chrome, Safari, Edge) */
.sidebar-wrapper::-webkit-scrollbar {
  width: 8px;
}
.sidebar-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent WHITE handle */
  border-radius: 10px;
  background-clip: content-box;
  border: 2px solid transparent;
}
.sidebar-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

/* For Firefox */
.sidebar-wrapper {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}


/* Transparent Main Page Scrollbar Styling (Light Background) */

/* For WebKit browsers (Chrome, Safari, Edge) */
body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background: #f1f1f1; /* A very light grey for the track */
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent DARK handle */
  border-radius: 10px;
  border: 2px solid #f1f1f1; /* Padding around the handle */
}
body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

/* For Firefox */
body {
    scrollbar-width: auto; /* or "thin" */
    scrollbar-color: rgba(0, 0, 0, 0.4) #f1f1f1;
}

/* =========================================================
   CUSTOM GREEN THEME OVERRIDES
   ========================================================= */

/* For Login & Register Page Headers */
.login-page .card-header,
.register-page .card-header {
  background: linear-gradient(60deg, #26a69a, #00897b) !important;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2), 0 13px 24px -11px rgba(0, 137, 123, 0.6) !important;
}

/* For Card Headers inside the main application */
.main-panel .card .card-header-primary {
  background: linear-gradient(60deg, #26a69a, #00897b) !important;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2), 0 13px 24px -11px rgba(0, 137, 123, 0.6) !important;
}


/* --- Your other green styles (buttons, inputs) remain below --- */

.btn.btn-primary {
  color: #fff;
  background-color: #26a69a;
  border-color: #26a69a;
  box-shadow: 0 2px 2px 0 rgba(0, 137, 123, 0.14), 0 3px 1px -2px rgba(0, 137, 123, 0.2), 0 1px 5px 0 rgba(0, 137, 123, 0.12);
}

.form-group.bmd-form-group .form-control:focus ~ .bmd-label-floating,
.form-group.bmd-form-group .form-control:focus ~ label {
  color: #26a69a;
}
/* =========================================================
   SIDEBAR GREEN THEME
   ========================================================= */

/* This styles the background of the active navigation link */
.sidebar[data-color="green"] li.active > a {
  background-color: #26a69a;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 172, 142, 0.4);
}

/* This styles the text and icon color for all links in the green sidebar */
.sidebar[data-color="green"] .nav li a,
.sidebar[data-color="green"] .nav li .material-icons {
  color: #fff;
}

/* =========================================================
   GREEN THEME FINAL TOUCHES
   ========================================================= */

/* 1. Sidebar Link & Icon Color (for non-active items) */
.sidebar .nav a {
  color: #fff !important; /* Forces text and icons to be white */
}

/* 2. Primary Button Hover State */
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background-color: #00897b !important; /* Darker green on hover */
  border-color: #00897b !important;
}
/* =========================================================
   GREEN THEME - LINKS & PAGINATION FIX
   ========================================================= */

/* 1. Generic Link Color */
/* This targets all links inside the main content panel */
.main-panel a {
  color: #26a69a; /* Teal Green */
}

/* 2. DataTables Pagination Active Number */
/* This targets the active page number in the table's pagination */
.pagination .page-item.active > .page-link,
.pagination .page-item.active > .page-link:focus,
.pagination .page-item.active > .page-link:hover {
  background-color: #26a69a !important; /* Teal Green */
  border-color: #26a69a !important;
}

/* =========================================================
   GREEN THEME - ACTION BUTTON FIX
   ========================================================= */

/* 1. Targets the icon buttons with the primary color */
.btn.btn-primary.btn-link {
  color: #26a69a !important; /* Teal Green */
}

/* 2. Targets the hover state for these specific buttons */
.btn.btn-primary.btn-link:hover,
.btn.btn-primary.btn-link:focus {
  background-color: transparent !important;
  color: #00897b !important; /* Darker green on hover */
}

/* =========================================================
   GREEN THEME - DROPDOWN MENU FIX
   ========================================================= */

/* This targets the hover state for items in the user profile dropdown */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: #26a69a !important; /* Teal Green */
  color: #fff !important;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 172, 142, 0.4) !important;
}

/* =========================================================
   LOGO PLACEHOLDER STYLES
   ========================================================= */
.logo .logo-placeholder {
  display: block;
  padding: 10px 0;
  text-align: center;
}
.logo .logo-placeholder .logo-svg {
  height: 40px; /* Adjust height as needed */
  width: auto;
}
.logo .logo-placeholder .logo-svg text {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 700; /* Bold */
  font-size: 30px; /* Adjust font size as needed */
  fill: #ffffff; /* White text */
}

/* =========================================================
   INSTITUTION LOGO STYLES (LOGIN PAGE)
   ========================================================= */
.institution-logo-container {
  text-align: center;
  margin-top: 30px; /* Adds space above the logo */
  color: #fff; /* Sets text color to white for contrast */
}

.institution-logo-container img {
  max-height: 60px; /* Controls the size of the logo */
  width: auto;
  margin-top: 10px;
}
/*
 * =========================================================
 * v3: MAXIMUM PRIORITY FIXES FOR BROWSER COMPATIBILITY
 * =========================================================
 */

/* 1. Universal Browser Compatibility Rules */
html {
  -ms-text-size-adjust: 100% !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

body, html {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* 2. High-Performance Animations */
body .off-canvas-sidebar .navbar-collapse, 
body .sidebar {
  /* Use transform for smooth movement */
  transition: transform 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1) !important;
}

body .dropdown-menu {
    /* Use transform for smooth fading */
    transition: opacity 0.3s, transform 0.3s !important;
}

/* 3. Fix for Firefox Column Break */
.card-columns {
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* 4. Restores original login page background opacity */
body.login-page:after {
  opacity: 0.55 !important;
  background-color: #000 !important;
}
/*
 * =========================================================
 * SIGNUP FORM STYLES
 * =========================================================
 */

/* Adds more horizontal padding to the signup card body for better spacing. */
.card-body-signup {
  padding: 0.9375rem 30px !important; /* Increased left/right padding */
}

/* On smaller screens, remove all margins from the card to ensure it is centered. */
@media (max-width: 767px) {
  .card-login {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/*
 * =========================================================
 * FIX FOR SELECTPICKER DROPDOWN ON MOBILE
 * =========================================================
 */

/*
 * This media query targets mobile devices.
 * It ensures the dropdown menu generated by the selectpicker
 * does not exceed the screen width.
*/
@media (max-width: 767px) {
  .dropdown-menu.show {
    width: 95% !important; /* Force the dropdown to be slightly less than the screen width */
    max-width: 400px; /* Prevent it from being too wide on larger mobile screens */
  }
}
/*
 * =========================================================
 * FINAL FORM VALIDATION STYLES (Red Border on All Fields)
 * =========================================================
 */

/* --- TEXT INPUTS (Username, Email, Password) --- */

/*
 * This rule adds a 1px solid red border around the entire form group
 * when the input inside it is invalid. This makes the field stand out.
*/
.bmd-form-group .form-control.is-invalid {
  border: 1px solid #f44336 !important;
  border-radius: 4px; /* Optional: Adds slightly rounded corners */
  padding: 10px;      /* Adds some internal spacing */
}

/*
 * This rule ensures the floating label for the invalid input
 * turns red, making the error even clearer.
*/
.b-form-group .form-control.is-invalid ~ .bmd-label-floating,
.bmd-form-group.is-focused .form-control.is-invalid ~ .bmd-label-floating {
  color: #f44336 !important;
}


/* --- SELECT DROPDOWNS (College, Programme) --- */

/*
 * This existing rule works perfectly and applies the same
 * red border logic to the select dropdowns.
*/
.bmd-form-group.is-invalid .bootstrap-select .btn {
  border: 1px solid #f44336 !important;
}
/*
 * =========================================================
 * DEFINITIVE FORM VALIDATION HIGHLIGHTING STYLES
 * =========================================================
 */

/*
 * Rule for standard text inputs (e.g., Quiz Title, Options A-D).
 * This creates the red underline and turns the floating label red.
*/
.bmd-form-group.is-invalid .form-control,
.form-group.bmd-form-group.is-invalid .form-control {
  border-bottom: 1px solid #f44336 !important;
  background-image: linear-gradient(to top, #f44336 2px, rgba(244, 67, 54, 0) 1px),
                    linear-gradient(to top, #d2d2d2 1px, rgba(210, 210, 210, 0) 1px);
}
.bmd-form-group.is-invalid label,
.form-group.bmd-form-group.is-invalid label {
  color: #f44336 !important;
}

/*
 * Rule for Bootstrap Select and Select2 dropdowns.
 * This adds a red border around the entire component.
*/
.form-group.is-invalid .bootstrap-select .btn,
.form-group.is-invalid .select2-container--default .select2-selection--single {
  border: 1px solid #f44336 !important;
}

/*
 * Rule for CKEditor instances.
 * This adds a red border around the entire editor.
*/
.form-group.is-invalid .cke {
  border: 1px solid #f44336 !important;
}

/*
 * =========================================================
 * JASNY FILE INPUT FALLBACK STYLES (FINAL)
 * =========================================================
 * Provides a file icon for non-image previews and corrects layout.
 */

/*
 * **THE FIX**: This selector now only targets the preview container
 * AFTER a file has been selected (.fileinput-exists), keeping it hidden on page load.
 */
.fileinput.fileinput-exists .fileinput-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 10px;
}

/* Add a file icon using the Material Icons font */
.fileinput.fileinput-exists .fileinput-preview:not(:has(img))::before {
    font-family: 'Material Icons';
    content: "description"; /* This is the name of the file icon */
    font-size: 48px;
    color: #888;
    display: block;
    margin-bottom: 10px;
}

/* Style the filename text */
.fileinput.fileinput-exists .fileinput-preview .fileinput-filename {
    font-size: 14px;
    color: #333;
    word-wrap: break-word;
}

/*
 * =========================================================
 * BOOTSTRAP SELECTPICKER SCROLL FIX (FINAL)
 * =========================================================
 * Prevents the main page from scrolling when hovering over a dropdown menu
 * by creating an independent scroll context.
 */

.bootstrap-select .dropdown-menu {
    max-height: 250px;   /* Sets a maximum height */
    overflow-y: auto;    /* Creates a scrollbar if needed */
    overscroll-behavior: contain; /* **THE FIX**: Traps the scroll inside */
}

/*
 * Final Fix for DataTables responsive (+) icon.
 * This implements the user's suggestion of placing the icon
 * on its own line, above the cell text, to prevent any overlap.
 */

/* Target the first cell in a responsive, collapsed table */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
    position: relative;
    padding-left: 10px !important; /* Reset left padding */
}

/* Style the icon itself */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
    display: block;         /* This is the key: forces the text to a new line */
    position: static;       /* We no longer need absolute positioning */
    transform: none;        /* Reset previous transforms */

    /* Styling to make it look like a clean button */
    content: '+';
    font-weight: bold;
    height: 20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    color: white;
    background-color: #009688; /* Green to match your theme */
    border-radius: 50%;
    margin-bottom: 8px;     /* Add space between the icon and the text below it */
}

/* Style for the 'minus' icon when the row is expanded */
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > td.dtr-control::before {
    content: '-';
    background-color: #f44336; /* Red to indicate "close" */
}