/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 19-Mar-2026, 5:12:11 PM
    Author     : rahul98
*/

@import url('https://fonts.googleapis.com/css2?family=OpenDyslexic&display=swap');

/* Dyslexia Font Class */
.dyslexia-mode {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* Big Cursor */
.big-cursor-enabled,
.big-cursor-enabled a,
.big-cursor-enabled button {
    cursor: url('data:image/svg+xml;utf8,\
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">\
        <polygon points="0,0 0,28 8,20 14,30 18,28 12,18 24,18" fill="black"/>\
        </svg>') 0 0, auto !important;
}

body.invert-colors-enabled.big-cursor-enabled,
body.invert-colors-enabled.big-cursor-enabled a,
body.invert-colors-enabled.big-cursor-enabled button {
    cursor: url('data:image/svg+xml;utf8,\
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" style="filter: invert(1);">\
        <polygon points="0,0 0,28 8,20 14,30 18,28 12,18 24,18" fill="black"/>\
        </svg>') 0 0, auto !important;
}

/* Highlight Links */
.highlight-links-enabled a {
    background-color: yellow !important;
    color: black !important;
    border: 2px solid black !important;
    padding: 2px;
}

/* Hide Images */
.hide-images-enabled img {
    display: none !important;
}
.hide-images-enabled .header-banner {
    background-image: none !important;
}
/* Invert Colors */
body.invert-colors-enabled {
    background-color: #000;
}
#accessibility-root.invert-colors-enabled #main-content,
#accessibility-root.invert-colors-enabled .navbar,
#accessibility-root.invert-colors-enabled .accessibility-panel,
#accessibility-root.invert-colors-enabled .accessibility-btn {
    filter: invert(100%);
}

#accessibility-root.grayscale-enabled #main-content,
#accessibility-root.grayscale-enabled .navbar,
#accessibility-root.grayscale-enabled .accessibility-panel,
#accessibility-root.grayscale-enabled .accessibility-btn {
    filter: grayscale(100%);
}

/* Grayscale */
#accessibility-root.grayscale-enabled #main-content {
    filter: grayscale(100%);
}

/* Floating Button */
.accessibility-btn {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    border: none;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background-color 0.3s;
}

.accessibility-btn:hover {
    background-color: #0056b3;
}

/* Panel */
.accessibility-panel {
    position: fixed;
    top: 0;
    right: -350px; /* Start off-screen */
    width: 320px;
    height: 100%;
    background-color: #fff;
    box-shadow: -4px 0 15px rgba(0,0,0,0.2);
    z-index: 1060;
    transition: right 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ddd;
}

.accessibility-panel.open {
    right: 0; /* Slide in */
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

.panel-header h5 {
    font-weight: 500;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
}

.panel-body {
    padding: 1rem;
    overflow-y: auto;
    flex-grow: 1;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.setting-item label {
    margin-bottom: 0;
}

.level-indicator {
    min-width: 20px;
    text-align: center;
    font-weight: bold;
}

.panel-footer {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    background-color: #f8f9fa;
}
.accessibility-panel,
.accessibility-btn {
    position: fixed;
    z-index: 99999;
}

header, .navbar {
    position: relative;
    z-index: 9999;
}
.navbar, header {
    transform: translateZ(0);
}
.navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
}


/* Fix panel layout issue */
.accessibility-panel {
    position: fixed;
    top: 0;
/*    right: 0;*/
    height: 100vh; /* CHANGE THIS */
    overflow: hidden; /* ADD THIS */
}

/* Panel body scroll fix */
.panel-body {
    overflow-y: auto;
    max-height: calc(100vh - 120px); /* HEADER + FOOTER adjust */
}

/* Footer ko fix karo */
.panel-footer {
    position: sticky;
    bottom: 0;
}