/* ***********************************************************
Author  : ACASTILLO186
Filename: mtsacstyle.css
Date    : 02042026
Updated : 04072026
Use     : Custom styles used in the Class Search.
04072026 updates: @media max-width
************************************************************ */

/*-- ========================================================
   01)   Styles for: chips, pill box, badges, drawers, tags.
   (minified)
     ======================================================== 
--*/    
.dropdown-container-relative{position: relative}.dropdown-list{max-height: 250px;overflow-y: auto;z-index: 10}.custom-rounded{border-top-left-radius: 0.75rem;border-top-right-radius: 0.75rem;border-bottom-right-radius: 0.75rem;border-bottom-left-radius: 0.75rem}.small-pill-button{padding: 0.5rem 1rem;font-size: 0.875rem}.acchip{display: inline-block;padding: 0.5rem 1rem;border-top-right-radius: 1.5rem;border-bottom-right-radius: 1.5rem;background-color: #632d43;color: #fce7f3;font-family: 'Inter', sans-serif;font-weight: 700;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);margin-bottom: 0.5rem;line-height: normal;text-transform: uppercase}.dropdown-options-wrapper{max-height: 200px;overflow-y: auto;scrollbar-width: thin;scrollbar-color: #5e0f1c #f3f4f6}[data-ref="optionsWrapper"]::-webkit-scrollbar{width: 6px !important;display: block !important}[data-ref="optionsWrapper"]::-webkit-scrollbar-track{background: #f3f4f6 !important;border-radius: 10px !important}[data-ref="optionsWrapper"]::-webkit-scrollbar-thumb{background-color: #5e0f1c !important;border-radius: 10px !important;border: 1px solid #f3f4f6 !important}[data-ref="optionsWrapper"]::-webkit-scrollbar-thumb:hover{background-color: #4a0c16 !important}[data-ref="optionsWrapper"]{scrollbar-width: thin !important;scrollbar-color: #5e0f1c #f3f4f6 !important}@keyframes spin{from{transform: rotate(0deg)}to{transform: rotate(360deg)}}.animate-spin-fast{animation: spin 0.7s linear infinite}.drawer-open #scheduleDrawer{transform: translateX(0)}.drawer-open #drawerBackdrop{display: block;opacity: 1}#drawerBackdrop{transition: opacity 0.3s;display: none}html.drawer-open, body.drawer-open{overflow: hidden !important;height: 100% !important;position: relative !important}.search-tag{background-color: #4e2436;color: white;padding: 0.25rem 0.75rem;border-radius: 9999px;font-size: 0.875rem;display: inline-flex;align-items: center;cursor: default;flex-shrink: 0}.search-tag-remove{margin-left: 0.5rem;cursor: pointer;transition: opacity 0.1s}.search-tag-remove:hover{opacity: 0.8}.class-type-pill{display: inline-flex;align-items: center;padding: 0.25rem 0.75rem;border-radius: 9999px;font-size: 0.75rem;font-weight: 600;text-transform: uppercase;box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);transition: all 0.2s ease}.class-type-pill.CR{font-weight: bold;color: #16663c;background-color: #e5f6e8;border: 1px solid #16663c}.class-type-pill.NC{font-weight: bold;color: #4f242b;background-color: #fcebeb;border: 1px solid #4f242b}.contact-chip{display: inline-flex;align-items: center;padding: 0.25rem 0.6rem 0.25rem 0.25rem;border-radius: 9999px;background-color: #f3f4f6;color: #401018;font-size: 0.875rem;font-weight: 500;box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);max-width: 100%}.contact-chip-avatar{flex-shrink: 0;height: 1.75rem;width: 1.75rem;color: #3e4196;margin-right: 0.3rem}

/*-- ========================================================
   02)   Styles for: collapsibles
   (minified)
     ========================================================
--*/

@import url(https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap);.font-caveat{font-family:Caveat,cursive}.before\:h-full{content:'';display:block}.collapsible-content{transition:max-height .5s ease-in-out}
/* Optional: Add a smooth transition for content visibility */
[x-cloak] { display: none !important; }
.ac186-fixed-top{width: 100%;margin-top: 1px;margin-left: 3px;margin-right: 3px;;top: 0 !important;will-change: top, position;left: 0;right: 0;z-index: 100;position: fixed !important;-webkit-backface-visibility: hidden;backface-visibility: hidden;transform: translate3d(0, 0, 0)}.small-pill-button{padding: 0.5rem 1rem;font-size: 0.875rem}@media (max-width: 1023px){.ac186-fixed-top{display: none !important}}

/*-- ========================================================
   03)   Styles for: back to top(s)
   (minified)
     ========================================================
--*/
#backToTopContainer{position:fixed;bottom:20px;right:20px;display:none;z-index:1000}#backToTopButton{padding:10px 15px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:16px;transition:background-color .3s}#backToTopButton:hover{background-color:#0056b3}
    
/*-- ========================================================
   04)   Styles for: mobile, hamburger
     ========================================================
--*/
html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background-color:#6366f1;border-radius:4px}::-webkit-scrollbar-track{background-color:#f3f4f6}

/*-- ========================================================
   05)   Styles for: loading spinner
   (minified)
   ========================================================
--*/
.spinner-container{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:rgba(255,255,255,.8);z-index:9999}.spinner{width:50px;height:50px;border-radius:50%;border:5px solid #f3f3f3;border-top:5px solid #3498db;animation:1s linear infinite spin;margin-bottom:10px}.loading-text{font-family:Arial,sans-serif;font-size:1.2em;font-weight:700;color:#3498db;animation:1.5s infinite alternate pulse}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes pulse{0%{opacity:.5}100%{opacity:1}}     

/*-- ========================================================
   06)   Styles for: hidden input file button
     ========================================================
--*/
.file-input-hidden{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}

/*-- ========================================================
   07)   Styles for: banner header text
    ========================================================
--*/
#banner-text{display:flex;justify-content:space-between}#banner-text span:first-child{padding-left:36px}    

/*-- ========================================================
   08)   Styles for: tooltips,icons,sidebar
   (minified)
    ========================================================
--*/
.fixed-wide-tooltip
{
    width: 256px; /* FIXED WIDTH GUARANTEED */
    white-space: normal !important;
    word-break: break-word; 
}

/* ARROW STYLING: Pointing LEFT */
.tooltip-arrow::before
{
    content: "";
    position: absolute;
    right: 100%; 
    top: 50%;
    margin-top: -6px;
    left: auto; 
    border-width: 6px;
    border-style: solid;
    border-color: transparent #60a5fa transparent transparent; 
}
.group
{
    position: relative;
    display: inline-block; 
    cursor: pointer; 
}
 
/*
TOOLTIP TEXT POSITIONING: RIGHT-ALIGNED */
.tooltip-text
{    
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    
    position: absolute;
    top: 50%;    
    left: 100%;  
    transform: translateY(-50%); 
    
    z-index: 10;
    margin-left: 10px;         
    text-align: left; 
}
.group:hover
.tooltip-text {
    visibility: visible;
    opacity: 1;
}
.icon-image {
    
    height: 24px; 
    width: 24px;  
    border-radius: 0.5rem; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); 
    object-fit: cover; 
    display: inline-flex; 
    vertical-align: middle;
}

/* ---
Removed all :first-child and :last-child overrides --- */

#sidebar {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #6e5149 transparent; /* For Firefox */
    /* 04092026 Prevents the sidebar from "ghosting" over content when w-0 */
    visibility: inherit;
}

/* For Chrome, Edge, and Safari */
#sidebar::-webkit-scrollbar {
    width: 6px;
}

#sidebar::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar::-webkit-scrollbar-thumb {
    background-color: #e5e7eb;
    border-radius: 20px;
}

/* 04092026 Updates below */
#sidebar.w-0 {
    visibility: hidden;
    pointer-events: none;
}

#sidebar.w-0 #toggleCollapseBtn {
    /* Ensure button stays visible even when parent is hidden */
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 1023px) {
    #sidebar {
        width: 14rem !important; 
        padding: 1.5rem !important; 
        visibility: visible !important;
    }
    
    #sidebar .hidden {
        display: block !important; /* Forces content to show in mobile drawer */
    }
}
/*-- ========================================================
   09)   Styles for: special class type popup and listing
     ========================================================
--*/
.wdsp-header-container{display:flex;justify-content:center;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.05)}.wdsp-header-badge{background:rgba(37,99,235,.1);color:#2563eb;padding:4px 12px;border-radius:50px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border:1px solid rgba(37,99,235,.2);box-shadow:0 2px 4px rgba(0,0,0,.05);white-space:nowrap}.wdsp-header{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#475569;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.05);font-weight:500}.wdsp-header b{color:#2563eb;font-weight:700}.wdsp-badge{background:linear-gradient(135deg,#6e8efb,#a777e3)!important;color:#fff!important;padding:4px 12px!important;border-radius:50px!important;cursor:help!important;font-weight:600!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.5px!important;border:none!important;display:inline-flex!important;align-items:center!important;line-height:1!important;text-decoration:none!important;white-space:nowrap!important;box-shadow:0 2px 5px rgba(110,142,251,.3);transition:.2s ease-in-out;margin-top:4px;box-shadow:0 4px 10px rgba(110,142,251,.4)}.wdsp-badge:hover{transform:translateY(-1px);box-shadow:0 6px 15px rgba(110,142,251,.6)}#wdsp-global-tooltip{display:none;position:absolute;z-index:2147483647;width:max-content;max-width:320px;background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.4);border-radius:12px;padding:12px 14px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 20px 25px -5px rgba(0,0,0,.1);font-family:system-ui,-apple-system,sans-serif;pointer-events:auto !important;animation:.15s ease-out wdspFadeIn}@keyframes wdspFadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.wdsp-list{list-style:none;padding:0;margin:0}.wdsp-item{display:flex;align-items:flex-start;padding:8px 10px;margin-bottom:6px;background:rgba(248,250,252,.8);border:1px solid #e2e8f0;font-size:12px;color:#1e293b;border-radius:8px;line-height:1.4}.wdsp-item:last-child{margin-bottom:0}.wdsp-pill{font-weight:800;color:#2563eb;margin-right:10px;background:#eff6ff;padding:0 4px;border-radius:3px;font-size:10px}

/*-- ========================================================
   10)   Styles for: subject multiselect in-place tooltips
     ========================================================
--*/
.custom-tooltip{display:none;margin-top:4px;padding:6px 10px;font-size:.7rem;line-height:1.2;color:#3b82f6;background-color:#f8fafc;border-radius:6px;box-shadow:inset -1px -1px 2px #fff,inset 1px 1px 2px rgba(30,64,175,.15);border:1px solid rgba(59,130,246,.1)}.group:hover .custom-tooltip{display:block;animation:.2s ease-out slideDown}@keyframes slideDown{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

/*-- ========================================================
   11)   Styles for: Search Label Pulse
     ========================================================
--*/
@keyframes subtleFade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.animate-subtle-fade{animation:.8s ease-out forwards subtleFade}

/*-- ========================================================
   12)   Styles for: Banner image shimmer effect
     ========================================================
--*/
body{padding-top: 90px;}.header-wrapper{position: fixed;top: 0;z-index: 1000;left: 0;right: 0;width: 100%;z-index: 9;backface-visibility: hidden}#svg-flame{position:absolute;top:-46px;left:-33px;z-index:1001;pointer-events:none}#main-banner{position:relative;overflow:hidden;min-height:80px}.banner-bg-image{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('../images/ncsbanner_bgnd.jpg');background-size:cover;background-position:center;z-index:1}.banner-tint{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#801326;mix-blend-mode:multiply;transition:opacity 0.8s ease;z-index:2}.banner-content-wrapper{position:relative;z-index:10;width:100%;display:flex;align-items:center;pointer-events:none}.banner-content-wrapper a,.banner-content-wrapper span{pointer-events:auto}#main-banner:hover .banner-tint{opacity:0}.banner-content-wrapper a,.banner-content-wrapper span[id="mtsacaddress"]{pointer-events:auto !important;cursor:pointer;position:relative;z-index:20}
@keyframes glass-shimmer{0%{transform:translateX(-150%) skewX(-25deg)}40%{transform:translateX(150%) skewX(-25deg)}100%{transform:translateX(150%) skewX(-25deg)}}.liquid-pill-ghost{position:relative;display:inline-block;padding:1px 10px;background:rgba(255,255,255,0.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50px;border:1px solid rgba(255,255,255,0.15);box-shadow:inset 0 1px 1px rgba(255,255,255,0.2);overflow:hidden;vertical-align:middle}.liquid-pill-ghost::after{content:"";position:absolute;top:0;left:0;width:30%;height:100%;background:linear-gradient( to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100% );animation:glass-shimmer 6s infinite ease-in-out}
@media (max-width:1023px){.header-wrapper{display:none !important}}

/*-- ========================================================
   13)   Styles for: Row refresh shake on error
     ========================================================
--*/
.refresh-success{animation: success-glow 1s ease-out;ring: 3px}@keyframes success-glow{0%{box-shadow: 0 0 0 0px rgba(59, 130, 246, 0.7)}100%{box-shadow: 0 0 0 10px rgba(59, 130, 246, 0)}}@keyframes shake{0%, 100%{transform: translateX(0)}20%{transform: translateX(-4px)}40%{transform: translateX(4px)}60%{transform: translateX(-4px)}80%{transform: translateX(4px)}}.animate-shake{animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;backface-visibility: hidden;perspective: 1000px;color: #dc2626 !important}.sync-time{font-size: 0.65rem;color: #94a3b8;font-style: italic;display: block;margin-top: 2px}.text-flash-blue{color: #3b82f6;font-weight: bold;transition: color 1s ease}

/*-- ========================================================
   14)   Styles for: Master Schedule Live Refresh Patch
     ========================================================
--*/
#reftoast{visibility: hidden;position: fixed;right: 30px;min-width: 320px;color: #fff;padding: 16px;border-radius: 8px;font-family: 'Segoe UI', sans-serif;box-shadow: 0 10px 30px rgba(0,0,0,0.5);z-index: 1000;display: flex;align-items: center;top: 100%}#reftoast.success{background-color: #323232}#reftoast.error{background-color: #d93025}.launch{visibility: visible !important;animation: slideUpLifeCycle 6s forwards ease-in-out}@keyframes slideUpLifeCycle{0%{top: 100%;opacity: 0}15%{top: 30px;opacity: 1}85%{top: 116px;opacity: 1}100%{top: -100px;opacity: 0}}.icon{margin-right: 15px;font-size: 24px}.lightning{animation: flash 0.8s infinite alternate;color: #f1c40f}@keyframes flash{from{transform: scale(1);filter: drop-shadow(0 0 2px #f1c40f)}to{transform: scale(1.2);filter: drop-shadow(0 0 10px #fff)}}@media screen and (max-width: 1023px){#reftoast{right: 10px;left: 10px;min-width: 0;justify-content: center}}.reftoast-message{font-size: 15px;font-weight: 500}

/*-- ========================================================
   15)   Styles for: Search Filters Collapsible Container
     ========================================================
--*/
.search-container-root.is-open{overflow: visible !important}#collapsible-search-content{position: relative;z-index: 3}.search-container-root.is-open{overflow: visible !important}.collapsible-wrapper{max-height: 0;overflow: hidden;transition: max-height 0.5s ease-in-out}.collapsible-wrapper.is-open{max-height: 3099px !important;overflow: visible !important;padding-bottom: 36px !important}@media (max-width: 1023px){.collapsible-wrapper.is-open{max-height: 3506px !important;padding-bottom: 36px !important}}.allow-overflow{overflow: visible !important}#filter-chevron{transform: rotate(0deg);transition: transform 0.3s ease-in-out;display: inline-block}.chevron-closed{transform: rotate(180deg) !important}

/*-- ========================================================
   16)   Styles for: Sidebar expand/collapse btn tooltip
     ========================================================
--*/
.navbtn-tooltip{position: relative}.navbtn-tooltip::after{content: "Click to view or hide navigation sidebar";position: absolute;top: 50%;left: 110%;transform: translateY(-50%) scale(0.9);background-color: #333;color: #fff;padding: 8px 14px;border-radius: 6px;font-size: 13px;font-weight: 500;white-space: nowrap;opacity: 0;visibility: hidden;transition: all 0.2s ease-in-out;box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);z-index: 110;pointer-events: none}.navbtn-tooltip::before{content: "";position: absolute;top: 50%;left: 100%;transform: translateY(-50%);border-width: 6px;border-style: solid;border-color: transparent #333 transparent transparent;opacity: 0;visibility: hidden;transition: all 0.2s ease-in-out;z-index: 110}.navbtn-tooltip:hover::after{opacity: 1;visibility: visible;transform: translateY(-50%) scale(1)}.navbtn-tooltip:hover::before{opacity: 1;visibility: visible}

/*-- ========================================================
   17)   Styles for: CRN Popup Important Dates
     ========================================================
--*/
.glass-bubble{position: fixed;z-index: 999999;width: 369px;background: rgba(255, 255, 255, 0.98);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border-radius: 18px;box-shadow: 0 10px 40px rgba(0,0,0,0.2);border: 1px solid rgba(255,255,255,0.4);pointer-events: none;visibility: hidden;opacity: 0;transition: opacity 0.2s ease}.glass-bubble.pos-right .bubble-arrow{position: absolute;top: 50%;right: 100%;transform: translateY(-50%);border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid white}.glass-bubble.pos-left .bubble-arrow{position: absolute;top: 50%;left: 100%;transform: translateY(-50%);border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid white}.bubble-header{background: linear-gradient(135deg, #45242e, #5c444b);padding: 10px;border-radius: 17px 17px 0 0;color: white;text-align: center}.bubble-header h4{margin: 0;font-size: 0.7rem;text-transform: uppercase}.bubble-body{padding: 12px 15px;color: #333}.data-row{display: flex;justify-content: space-between;padding: 6px 0;border-bottom: 1px solid rgba(0,0,0,0.06);font-size: 0.8rem}.data-row:last-child{border-bottom: none}.label{color: #666}.value{font-weight: 700}.highlight{background: rgba(98, 0, 238, 0.05);margin: 8px -18px -12px -18px;padding: 12px 18px;border-radius: 0 0 17px 17px;border-top: 1px solid rgba(98, 0, 238, 0.1)}