/* ==================================================================================== */
/*  CSS Size Variables These are tied to the device's veiwport size so nominal sizes    */
/*  set here will automatically expand or contract to fit the device's size. This has   */
/*  the advantage of not having to have responsive styles set for every size of device	*/
/* ==================================================================================== */
:root {
    /* Spacing */
    --spacing-xxxs: 0.2rem;  				/* 5px */
    --spacing-xxs: 0.3125rem; 			/* 5px */
    --spacing-xs: 0.5rem;     			/* 8px */
    --spacing-s: 0.75rem;  	  			/* 12px */
    --spacing-base: 1rem;     			/* 16px This is the fixed viewport standard */
		--spacing-l: 1.2rem;						/* 19px */
		--spacing-xl: 1.5rem;						/* 24px */
		--spacing-xxl: 2.0rem;					/* 32px */
		--spacing-xxxl: 2.5rem;

    /* Font Sizes */
    --font-size-s: 0.5rem;
    --font-size-m: 0.8rem;
    --font-size-base: 1rem;    			/* 16px This is the fixed viewport standard */
    --font-size-l: 1.1rem;
    --font-size-xl: 1.2rem;
    --font-size-xxl: 1.4rem;
    --font-size-xxxl: 2rem;
    --font-size-xxxxl: 4rem;                      

    /* Icon Sizes */
   
    --icon-size-s: 1.875rem; 					/* 30px */
    --icon-size-m: 2.1875rem; 				/* 35px */
    --icon-size-l: 2.8rem;    				/* 40px */

    /* Seek Bar Heights */
    --seek-bar-height-s: 0.25rem;   	/* 4px */
    --seek-bar-height-m: 0.3125rem;  	/* 5px */
    --seek-bar-height-l: 0.375rem;		/* 6px */
    --seek-bar-height-xl: 0.4375rem;	/* 7px */

    /* Breakpoints - used for responsive declaration */
/*    --breakpoint-s: 128rem; */    	/* 768px */
/*    --breakpoint-m: 63.9375rem; */ 	/* 1023px */
 /*   --breakpoint-l: 64rem;   */   	/* 1024px */
/*    --breakpoint-xl: 120rem;  */   /* 1920px */
}

/* =================================================================================== */
/*                      Global Reset & Base setup                                      */
/* =================================================================================== */

/* Resetting default margins, paddings, and box-sizing globally */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set base font size and prevent horizontal scrolling */
html, body {
    height: 100%;
    font-size: 16px; /* 1rem = 16px */
}

body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
    font-family: Arial, sans-serif;
    font-size: var(--font-size-base); /* HERE IS WHERE WE SET THE BASE VIEWPORT SIZE 16px */
}

/* ===================================================================================== */
/*                         Main Content Wrapper                                          */
/* ===================================================================================== */

/* Main content wrapper to structure the layout */
.content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 100%; /* Prevents exceeding viewport */
    overflow-x: hidden; /* Hide horizontal overflow */
}

/* ===================================================================================== */
/*                     Header  AKA Top Title and Logo container                          */
/* ===================================================================================== */
/* Header Container styling */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xxs);
    background-color: #D5F5E3; /* #D5F5E3 */
/*    padding: var(--spacing-xxs); */ /* 10px */
    text-align: center;
    flex-shrink: 0;
}

/* Logo styling */
.logo {
    height: var(--font-size-xxxl); /* Maintains height with the title text */
    width: calc(var(--font-size-xxxl) * 1.6); /* Adjust width for correct aspect ratio */
}

/* Title styling */
.title {
    color: #ff0000;
/*    background-color: #D5F5E3; */
    font-size: var(--font-size-xxxl); /* 2rem */
    white-space: nowrap;
    margin: 0;
}

/* ============================================================================= */
/*                            File List                                          */
/* ============================================================================= */

/* File List Title Styling */
#fileListTitle {
    font-size: var(--font-size-l); /* 1.5rem */
    font-weight: bold;
    padding: var(--spacing-xs) 0; /* 8px 0 */
    text-align: center;
    color: #ff0000;
    background-color: #D5F5E3;
    flex-shrink: 0;
}

/* Container for the file list to manage its scrolling and sizing */
.file-list-container {
    flex-grow: 1;   /* Allows the file list to take up remaining space */
    flex-shrink: 1; /* Allows the file list to shrink when needed */
    overflow-y: auto; /* Enables scrolling if content overflows */
}

/* File List Styling */
#fileList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xxs) var(--spacing-xxxs); /* 5px 10px */
    border-bottom: 0.0625rem solid #ddd; /* 1px */
    cursor: pointer;
    font-size: var(--font-size-l); 
    flex-shrink: 1;
    min-width: 0; /* Allows the item to shrink below content size */
}

.file-item:hover {
    background-color: #f0f0f0;
}

.file-item.active {
    background-color: #e0e0e0; /* #D5F5E3; */
}

.title-container {
    flex: 1 1 auto; /* Allows the title to grow and shrink as needed */
    overflow: hidden;
}

.show-name {
		font-size: var(--font-size-base);
    word-break: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: 100%; /* Ensures it wraps within the container */
}

.date {
		font-size: var(--font-size-base);
    flex: 0 0 auto; /* Prevents the date from growing */
    text-align: right;
    white-space: normal; /* Allow wrapping */
    margin-left: var(--spacing-xxxs); /* 10px */
    max-width: 50%; /* Limits the width to 40% of the container */
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Removed overflow and text-overflow to allow wrapping */
}

/* ================================================================== */
/*                           Audio Player                             */
/* ================================================================== */

/* Audio Player Styling */
.audio-player-container {
    flex-shrink: 0; /* Prevents shrinking */
    text-align: center;
    background-color: #D5F5E3; /*     background-color: #e0e0e0; */
    padding: var(--spacing-xxxs); /* 5px */
    border-top: 0.0625rem solid #ccc; /* 1px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Push the audio player to the bottom */
    margin-top: auto;
    
    /* Optional: Prevent excessive height */
    max-height: 50vh; /* Adjust as needed */
    overflow-y: auto; /* Enable scrolling within the audio player if content exceeds max-height */
}

.scrubber-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xxxs); 
    flex-wrap: wrap;
}

.time-display {
    font-size: 1em; /* Relative to parent font size */
    white-space: nowrap;
}

.seek-bar {
    flex-grow: 1;
    width: 90%;
    max-width: 37.5rem; /* 600px */
    height: var(--seek-bar-height-s); /* 4px */
    background: linear-gradient(to right, #F0FFFF 0%, gray var(--seek-bar-progress), #F0FFFF var(--seek-bar-progress), #F0FFFF 100%);
    border-radius: 0.25rem; /* 4px */
    outline: none;
    appearance: none;
    box-sizing: border-box; /* Ensure padding/borders are included */
		margin-top: var(--spacing-xxxs);
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 1rem;            /* Width of the thumb */
    height: 1rem;           /* Height of the thumb */
    background-color: darkgray;  /* Color of the thumb */
    border-radius: 50%;     /* Round thumb shape */
    cursor: pointer;        /* Change cursor to pointer */
    border: 2px solid red; /* Optional border */
}

input[type="range"]::-moz-range-thumb {
    appearance: none;
    width: 1rem;            /* Width of the thumb */
    height: 1rem;           /* Height of the thumb */
    background-color: garkgray;  /* Color of the thumb */
    border-radius: 50%;     /* Round thumb shape */
    cursor: pointer;        /* Change cursor to pointer */
    border: 2px solid red; /* Optional border */
}


/* Audio Controls */
.audio-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xxxs); /* 10px */
 		margin-top: var(--spacing-xxxs);
 		flex-wrap: wrap;
}

.audio-controls button {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    padding: var(--spacing-xxs); 
    width: var(--icon-size-l); 
    height: var(--icon-size-l);
}

.audio-controls button .icon {
    fill: gray;
    width: 100%;
    height: 100%;
    transition: fill 0.2s;
}

.audio-controls button:hover .icon {
    fill: darkgreen;
}

.audio-controls .time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    color: red;
    font-weight: bold;
    pointer-events: none;
}

#currentPlaying {
    text-align: center;
    margin-bottom: var(--spacing-xxxs); /* 10px */
    font-size: var(--font-size-base); /* 2rem */
    color: red;
    font-weight: bold;
}

/*********************************************************************************/
/*             R E S P O N S I V E  M E D I A ************************************/
/*********************************************************************************/
@media (max-width: 400px) and (orientation: portrait) {
/*body{
background-color: lightblue;
} */
	.show-name, .date {
		font-size: var(--font-size-base);
	 	}
 
 }

/******************Small Upgrades in font sized for bigger displays ***************/
@media (min-width: 601px) and (max-width: 1049px) and (orientation: portrait) {
/*body{
background-color: lightgreen;
} */
	.show-name, .date {
		font-size: var(--font-size-xl);
	 	}
 }

/******************Small Upgrades in font sized for bigger displays ***************/
 @media (min-width: 1050px) and (max-width: 1920px) and (orientation: portrait) {
/*body{
background-color: lightyellow;
} */
	.show-name, .date {
		font-size: var(--font-size-xxl);
	 	}
	/* Increase font sizes for better readability */
	.title {
  	font-size: 2rem; /* Larger font size */
   }

 }
/********************* Landscape Orientation for Tablets *************************/
@media (min-width: 1100px) and (max-width: 2560px) and (orientation: landscape)  {
 
 /* Increase font sizes for better readability */
  .title {
  	font-size: var(--font-size-xxxxl); /* Larger font size */
   }
   /* Logo styling */
.logo {
    height: var(--font-size-xxxxl); /* Maintains height with the title text */
    width: calc(var(--font-size-xxxxl) * 1.6); /* Adjust width for correct aspect ratio */
}

	#fileListTitle {
		font-size: 1.5rem; /* Larger font size */
    }
    
	.show-name, .date {
		font-size: var(--font-size-xxl);
 }
 
 .time-display {
    font-size: var(--font-size-xxxl); /* Relative to parent font size */
    white-space: nowrap;
}

    #currentPlaying {
        font-size: var(--font-size-xxxl);
    }

    /* Optional: Adjust spacing if necessary */
    .audio-controls {
        margin-top: var(--spacing-base); /* 16px */
    }

    /* Optional: Adjust other elements if needed */
    .scrubber-container {
        gap: var(--spacing-base); /* 16px */
    }

    /* Optional: Adjust spacing if necessary */
    .audio-controls {
        margin-top: var(--spacing-base); /* 16px */
    }

    /* Optional: Adjust other elements if needed */
    .scrubber-container {
        gap: var(--spacing-base); /* 16px */
    }
    .seek-bar {
     max-width: 50.5rem;
    height: var(--seek-bar-height-xl);

	}
}