/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo+Play:wght@200..1000&display=swap');

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    transition: all 1s ease;
    user-select: none;
    z-index: 10;
}

/* Variables */
:root {
    --mff: "Cairo Play";
    --sff: "Rubik";
    /* Traditional Colors */
    --Green: rgb(0, 128, 0);
    --Gold: rgb(255, 215, 0);
    --Black: #000;
    --White: rgb(255, 255, 255);
    /* Modern Colors */
    --Navy-Blue: rgb(0, 0, 128);
    --Soft-Gray: rgb(128, 128, 128);
    --HarshGrayBackground: #2c3e50;
    --HarshGrayBorder: #34495e;
    --Cream: rgb(255, 240, 200);


    --header-height: 70px;
    --sidebar-width: 200px;
}

/* Dark Mode */
body.dark-mode {
    --Green: rgb(0, 64, 0);
    --Gold: rgb(255, 180, 0);
    --Black: rgb(255, 255, 255);
    --White: #000;
    --Navy-Blue: rgb(0, 0, 150);
    --Soft-Gray: rgb(96, 96, 96);
    --Cream: rgb(255, 240, 200);
}

/* HTML and Body */
html {
    /* width: 100vw; */
    /* <-- This was the likely cause of overflow */
    width: 100%;
    /* <-- Changed to 100% to respect scrollbar */
    height: 100vh;
    /* width: 100dvw; */
    /* <-- Removed redundant width */
    height: 100dvh;
    font-size: 16px;
    font-family: var(--sff);
    scrollbar-gutter: force;
    overflow-y: scroll;
    overflow-x: hidden;
}

body {
    width: 100%;
    background: var(--White);
    font-size: 1rem;
    height: 100dvh;
    overflow: hidden;
}

/* Scrollbar */
::-webkit-scrollbar {
    background: var(--Navy-Blue);
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--Gold);
    border-radius: 5px;
}

::-webkit-scrollbar-track {
    background: var(--Navy-Blue);
}

.preloader-dialog {
    box-shadow: none;
    border: none;
    border-radius: 0;
    width: 100dvw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    z-index: 999999;
    backdrop-filter: blur(30px);
    transition-duration: 1s;
}

.preloader-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Base Element Styles */
a {
    text-decoration: none;
    color: black;
}

img,
svg,
video {
    user-select: none;
    pointer-events: none;
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

textarea {
    resize: none;
    font-family: var(--mff);
}

/* Side Bar (Mobile) */
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    height: 100dvh;
    width: 100dvw;
    z-index: 1000;
}

.sidebar[aria-opened="false"] {
    right: -120%;
}

.sidebar[aria-opened="true"] {
    right: 0;
}

.sidebarwrapper {
    overflow: auto;
    border-radius: 20px 0 0 20px;
    padding: 20px;
    height: 100%;
    width: max-content;
    background: var(--Black);
    transition: all 0.3s ease-in-out;
}

.sidebarheader {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
    color: var(--White);
}

.sidebarclose {
    border-radius: 10px;
    background: var(--Cream);
    padding: 10px;
}

.sidebarcontent {
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
}

.sidebarcontent ul {
    overflow: auto;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: max-content;
    gap: 15px;
}

.sidebarcontent ul li button {
    height: 50px;
    width: 300px;
    color: var(--Black);
    background: var(--White);
    font-size: 25px;
    border-radius: 10px;
    font-family: var(--sff);
    font-weight: 700;
    transition: 0.4s ease-in-out;
}

.sidebarcontent ul li button:hover {
    background: var(--Gold);
}

.screen_condition {
    color: var(--Black)
}

/* Header */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    height: var(--header-height);
    border-bottom: 3px solid var(--Gold);
    flex-shrink: 0;
    /* Prevent header from shrinking */
}

.rightdevsection {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--Black);
}

.rightdevsection>img {
    border-radius: 20px;
}

.leftdevsection {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.leftdevsection ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.leftdevsection ul button {
    font-size: 25px;
    background: none;
    font-family: var(--sff);
    font-weight: 700;
    transition: 1s;
    position: relative;
    display: inline-block;
    color: var(--Black);
}

.darkmode {
    background: none;
    color: var(--Black)
}

.darkmode span:last-child {
    display: none;
}

body.dark-mode .darkmode>span:first-child {
    display: none;
}

body.dark-mode .darkmode>span:last-child {
    display: inline;
}

.leftdevsection ul li button::before {
    content: "";
    position: absolute;
    bottom: -8px;
    background: var(--Green);
    height: 3px;
    width: 0%;
    transition: 0.3s ease-in-out;
}

.leftdevsection ul li button:hover::before {
    width: 100%;
}

.hidden,
.screen_tabs {
    display: none;
}

.hidden {
    gap: 10px;
}

.screen_condition {
    background: none;
}

/* --- [START] Modified Sidebar/Content Layout --- */

/* This container holds the sidebar (.tab) and the content (main) */
.main-layout-container {
    display: flex;
    flex-direction: row;
    /* Sidebar and main content side-by-side */
    align-items: flex-start;
    height: calc(100dvh - var(--header-height));
    /* Fill remaining screen height */
}

/* Navigation Container (.tab) */
.tab {
    /* MODIFIED: Removed position:fixed */
    position: relative;
    /* Relative for positioning the resize handle */
    flex-shrink: 0;
    /* Prevent sidebar from shrinking */
    height: 100%;
    /* Fill parent's height */
    z-index: 15;
    /* We still need display: flex for the JS to toggle */
    display: flex;
}

/* Large Screen Sidebar (.LargeScreen) */
.LargeScreen {
    height: 100%;
    /* ATTRACTIVE DESIGN: Gradient background */
    background: linear-gradient(180deg, var(--Navy-Blue) 0%, #0a0a50 50%, var(--Black) 100%);

    /* RESIZABLE: Width is controlled by CSS variable */
    width: var(--sidebar-width);
    min-width: 180px;
    /* Resizing limit */
    max-width: 250px;
    /* Resizing limit */

    display: flex;
    flex-direction: column;
    list-style: none;
    border-left: 3px solid var(--Green);
    /* ATTRACTIVE DESIGN: Floating effect shadow */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    /* Prevents resize flicker/transition */
    transition: none;
}

/* NEW: Resize Handle Styling */
.resize-handle {
    position: absolute;
    left: 0;
    /* Positioned on the left edge of the .tab container (since sidebar is on right) */
    top: 0;
    height: 100%;
    width: 8px;
    background: var(--Green);
    cursor: ew-resize;
    /* Horizontal resize cursor */
    z-index: 16;
    opacity: 0.7;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.resize-handle:hover,
.resize-handle.resizing {
    /* Add class when actively resizing */
    background: var(--Gold);
    opacity: 1;
}

/* Sidebar List Items */
.LargeScreen li {
    padding: 0;
    /* Remove padding to let button fill space */
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-grow: 1;
    /* Make list items share space */
    border-bottom: 1px solid var(--HarshGrayBorder);
    /* Separator */
    transition: none;
}

.LargeScreen li:last-child {
    border-bottom: none;
}

/* Sidebar Buttons (Enhanced Design) */
.LargeScreen button {
    background: transparent;
    /* Make buttons transparent */
    font-size: 25px;
    font-weight: 700;
    font-family: var(--sff);
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--White);
    /* Text color on dark bg */
    padding: 20px 10px;
    /* Add some padding */
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.3;
    text-align: center;
}

.LargeScreen button:hover {
    background-color: rgba(255, 215, 0, 0.2);
    /* var(--Gold) with alpha */
    color: var(--Gold);
    /* Highlight text */
}

/* Style for the active tab button */
.LargeScreen button.active {
    background-color: var(--Gold);
    color: var(--Navy-Blue);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Main Content Area */
main {
    flex-grow: 1;
    /* Take up all remaining space */
    height: 100%;
    /* Fill the container height */
    overflow-y: auto;
    /* Make ONLY main content scrollable */
    padding: 0.625rem;
}

/* --- [END] Modified Sidebar/Content Layout --- */


.tabs button {
    font-family: var(--sff);
    font-weight: 700;
    font-size: 25px;
}

/* This is the old hover effect, we can remove or keep. 
   I'll keep it for the .NavScreen buttons */
.tabs button:hover {
    color: var(--Navy-Blue);
    background-color: var(--Gold);
}

/* Re-apply hover for .LargeScreen to override the one above */
.LargeScreen button:hover {
    background-color: rgba(255, 215, 0, 0.2);
    color: var(--Gold);
}

.LargeScreen button.active:hover {
    background-color: var(--Gold);
    color: var(--Navy-Blue);
}


/* NavScreen Styles (Mobile Dropdown) */
.NavScreen {
    display: none;
    /* JS will manage this */
    position: relative;
    max-width: 600px;
    margin: 15px auto;
    border: 2px solid var(--Black);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    height: auto;
    overflow: hidden;
    transition: all 0.4s ease;
    z-index: 999;
    background: var(--White);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: calc(100dvh - 200px);
}

.NavScreen summary {
    list-style-type: none;
    padding: 15px 20px;
    width: 100%;
    cursor: pointer;
    font-size: 24px;
    color: var(--Black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    background: var(--White);
}

.NavScreen .arrow {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-right: 3px solid var(--Black);
    border-bottom: 3px solid var(--Black);
    transform: rotate(45deg);
    transition: transform 0.4s ease;
    margin-left: 10px;
}

.NavScreen.open .arrow {
    transform: rotate(-135deg);
}

.NavScreen ul {
    background: var(--White);
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.NavScreen.open ul {
    max-height: 400px;
    padding: 0 20px 10px;
    overflow-y: auto;
}

.NavScreen li {
    width: 100%;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.NavScreen.open li {
    opacity: 1;
    transform: translateY(0);
}

.NavScreen button {
    width: 100%;
    height: 50px;
    border-radius: 15px;
    background: var(--Black);
    padding: 10px;
    color: var(--White);
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* This hover is fine for NavScreen */
.NavScreen button:hover {
    background: var(--Gold);
    color: var(--Black);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.NavScreen button:active {
    transform: translateY(0);
}

/* Scrollbar styling for the menu */
.NavScreen ul::-webkit-scrollbar {
    width: 6px;
}

.NavScreen ul::-webkit-scrollbar-thumb {
    background-color: var(--Gold);
    border-radius: 3px;
}

.NavScreen ul::-webkit-scrollbar-track {
    background: var(--Soft-Gray);
    border-radius: 3px;
}

/* Section Display */
section.active {
    animation: fade 1s ease 1 alternate;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

section:not(.active) {
    display: none;
}

/* Headers for the sections */
.header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    color: var(--Black);
}

/* More Section */
.other button {
    font-size: 15px;
    font-family: var(--sff);
    padding: 10px;
    border-radius: 5px;
    border: 2px solid var(--Gold);
    background: none;
    color: var(--Black);
    transition-duration: 0.4s;
}

.other button * {
    color: inherit
}

.other button:hover,
.other button:active {
    box-shadow: 0 0 .7rem var(--Black);
    transform: translateY(-.6rem);
}

.OtherItems {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    color: var(--Black)
}

.other fieldset {
    width: 100%;
    padding: 1.2rem;
    border: 2px solid var(--Green);
    border-radius: 10px;
}

.other legend {
    padding: 0 .5rem;
    font-size: 2rem;
    font-weight: 600;
    color: var(--Black);
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.other legend * {
    font-size: inherit;
}

.AI {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.setting1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.setting1>div {
    display: flex;
    gap: 1rem;
    color: var(--Black);
}

.CurrentName {
    border-top: 2px solid var(--Soft-Gray);
    margin-top: 1rem;
    color: var(--Black);
}

.CurrentName>span {
    color: var(--Gold);
    text-shadow: 0 0 .5rem var(--Black);
}

.counter>div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.CounterControls {
    display: flex;
    gap: 1rem;
    color: var(--Black);
}

#counter_azkar {
    color: var(--Navy-Blue);
    font-weight: 700;
    font-family: var(--sff);
}

#saved_azkar {
    font-family: var(--sff);
    font-weight: 700;
    border-top: 2px solid var(--Soft-Gray);
    margin-top: 1rem;
}

.timeshow {
    font-family: var(--mff);
    color: var(--Black);
}

/* Dark mode support */
body.dark-mode .audioListen,
body.darkmode .OtherVideo {
    filter: invert(1);
}

/* Scroll Up Button */
.scrollup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: var(--Gold);
    background: var(--Navy-Blue);
    border-radius: 20%;
    padding: 10px;
    width: 45px;
    height: 45px;
    z-index: 9999;
    display: none;
    box-shadow: 0 0 20px var(--Black);
    transition: all 0.5s ease;
    opacity: 0;
}

.scrollup:hover {
    opacity: 1 !important;
    transform: translateY(-5px);
}

/* --- [START] Responsive Media Query --- */
/* This is the new rule to hide the sidebar on small screens */

@media (max-width: 700px) {

    /* Hide the large screen sidebar and its resize handle */
    .LargeScreen,
    .resize-handle {
        display: none !important;
        /* Use !important to override JS inline styles */
    }

    /* Adjust main layout for mobile */
    .main-layout-container {
        flex-direction: column;
        /* Stack .tab and main */
        height: auto;
        /* Allow content to flow */
    }

    .tab {
        width: 100%;
        height: auto;
        /* Auto height for NavScreen */
        position: relative;
        /* Ensure it's not absolute or fixed */
        bottom: auto;
    }

    main {
        width: 100%;
        height: auto;
        /* Allow main content to define its height */
        overflow-y: visible;
        /* Remove internal scroll */
    }

    body {
        overflow: auto;
        /* Allow body to scroll again on mobile */
    }

    /* This is handled by the handleResponsiveNav JS, but good to have */
    .NavScreen {
        display: block;
    }
}

/* --- [END] Responsive Media Query --- */