* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	color: #333;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding: 20px;
	background-image: url(./.images/lo2.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	min-height: 100vh;
}

h1 {
	text-align: center;
	padding: 15px 0;
	margin: 0;
	font-size: 3em;
	color: #f8703a;
	font-weight: 700;
	text-shadow: 0 6px 8px rgba(0, 0, 0, 2.5);
}

h2 {
	font-size: 16px;
	text-align: center;
	padding: 0 0 12px 0; 
}

#container {
	max-width: 1400px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	padding: 40px;
}

/* View Toggle Buttons */
.view-toggle {
	text-align: center;
	margin-bottom: 20px;
	display: flex;
	gap: 5px;
	justify-content: center;
}

.view-toggle button {
	padding: 12px 30px;
	background: linear-gradient(135deg, #FE4902 0%, #ff6b35 100%);
	color: white;
	border: none;
	border-radius: 25px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(254, 73, 2, 0.3);
}

.view-toggle button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(254, 73, 2, 0.4);
}

.view-toggle button.active {
	background: linear-gradient(135deg, #7e22ce 0%, #a855f7 100%);
	box-shadow: 0 4px 15px rgba(126, 34, 206, 0.3);
}

/* Category Filter Buttons */
.category-filter {
	text-align: center;
	margin-bottom: 30px;
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0 20px;
}

.category-btn {
	padding: 10px 24px;
	background: rgba(255, 255, 255, 0.9);
	color: #333;
	border: 2px solid #e0e0e0;
	border-radius: 20px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.category-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	border-color: #FE4902;
	background: white;
}

.category-btn.active {
	background: linear-gradient(135deg, #FE4902 0%, #ff6b35 100%);
	color: white;
	border-color: #FE4902;
	box-shadow: 0 4px 15px rgba(254, 73, 2, 0.3);
}

/* Category Headers in Grid */
.category-header {
	grid-column: 1 / -1;
	margin: 20px 0 10px 0;
	padding-bottom: 5px;
	border-bottom: 3px solid #f8703a;
}

.category-header:first-child {
	margin-top: 0;
}

.category-header h2 {
	font-size: 28px;
	color: #f8703a;
	font-weight: 700;
	margin: 0;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 0 6px 8px rgba(0, 0, 0, 2.5);
}

.category-grid {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 20px;
	margin-bottom: 10px;
}

/* Grid View Styles */
.file-grid {
	display: block;
	padding: 20px 0;
}

.file-item {
	background: #fafafa;
	border-radius: 10px;
	padding: 15px;
	text-align: center;
	transition: all 0.2s ease;
	border: 2px solid #e0e0e0;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	position: relative;
	display: block;
	min-height: 200px;
	overflow: visible;
}

.file-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	border-color: #FE4902;
	background: white;
}

.file-item.selected {
	border-color: #FE4902;
	background: #fff5f0;
	z-index: 10;
}

.file-icon-link {
	text-decoration: none;
	display: block;
	margin-bottom: 10px;
}

.file-icon {
	width: 70px;
	height: 70px;
	margin: 0 auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15));
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	transition: transform 0.2s ease;
}

.file-icon-link:hover .file-icon {
	transform: scale(1.1);
}

.file-name {
	color: #333;
	font-size: 13px;
	font-weight: 600;
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: break-word;
	margin-bottom: 5px;
	line-height: 1.3;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.file-info-preview {
	font-size: 11px;
	color: #888;
	margin-bottom: 8px;
}

.info-toggle {
	background: none;
	border: none;
	color: #FE4902;
	cursor: pointer;
	font-size: 11px;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 5px auto 0;
	font-weight: 600;
	transition: all 0.2s ease;
}

.info-toggle:hover {
	color: #d63d00;
}

.info-toggle .arrow {
	display: inline-block;
	transition: transform 0.2s ease;
	font-size: 10px;
}

.file-item.selected .info-toggle .arrow {
	transform: rotate(180deg);
}

/* Dropdown Info Panel */
.file-details {
	position: absolute;
	top: 100%;
	left: -2px;
	right: -2px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease, border 0.3s ease;
	background: #fff5f0;
	border-radius: 0 0 8px 8px;
	padding: 0 15px;
	border: 0px solid transparent;
	box-sizing: border-box;
	box-shadow: 0 0 0 rgba(0,0,0,0);
}

.file-item.selected .file-details {
	max-height: 200px;
	padding: 15px;
	border: 2px solid #FE4902;
	border-top: 2px solid #FE4902;
	background: #fff9f7;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.file-details-row {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	font-size: 12px;
	color: #555;
}

.file-details-row strong {
	color: #333;
	font-weight: 600;
}

/* Table View Styles (Legacy) */
table {
	background-color: #fff;
	border-collapse: collapse;
	width: 100%;
	margin: 15px 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	display: none;
}

table.active {
	display: table;
}

th {
	background: linear-gradient(135deg, #FE4902 0%, #ff6b35 100%);
	color: #FFF;
	cursor: pointer;
	padding: 15px 20px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.5px;
}

th small {
	font-size: 9px; 
}

td, th {
	text-align: left;
}

a {
	text-decoration: none;
}

td a {
	color: #333;
	display: block;
	padding: 15px 20px;
	transition: all 0.2s ease;
}

th a {
	padding-left: 0;
	color: white;
}

td:first-of-type a {
	background: url(./.images/file.png) no-repeat 20px 50%;
	background-size: 24px;
	padding-left: 55px;
	font-weight: 600;
}

th:first-of-type {
	padding-left: 55px;
}

td:not(:first-of-type) a {
	background-image: none !important;
} 

tr:nth-of-type(odd) {
	background-color: #f8f9fa;
}

tr:hover td {
	background: linear-gradient(90deg, rgba(254, 73, 2, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%);
}

tr:hover td a {
	color: #FE4902;
}





/* icons for file types (icons by famfamfam) */

/* Grid View Icons */
.file-icon.default {
	background-image: url(./.images/file.png);
}

.file-icon.image {
	background-image: url(./.images/image.png);
}

.file-icon.zip {
	background-image: url(./.images/zip.png);
}

.file-icon.rar {
	background-image: url(./.images/rar.png);
}

.file-icon.iso {
	background-image: url(./.images/iso.png);
}

.file-icon.css {
	background-image: url(./.images/css.png);
}

.file-icon.office {
	background-image: url(./.images/office.png);
}

.file-icon.video {
	background-image: url(./.images/video.png);
}

.file-icon.audio {
	background-image: url(./.images/audio.png);
}

.file-icon.web {
	background-image: url(./.images/xml.png);
}

.file-icon.php {
	background-image: url(./.images/php.png);
}

.file-icon.js {
	background-image: url(./.images/script.png);
}

.file-icon.folder {
	background-image: url(./.images/folder.png);
}

.file-icon.exe {
	background-image: url(./.images/exe.png);
}

.file-icon.apk {
	background-image: url(./.images/apk.png);
}

.file-icon.bat {
	background-image: url(./.images/bat.png);
}

.file-icon.ps1 {
	background-image: url(./.images/ps1.png);
}

.file-icon.msi {
	background-image: url(./.images/msi.png);
}

/* Table View Icons */
/* images */
table tr td:first-of-type a[href$=".jpg"], 
table tr td:first-of-type a[href$=".png"], 
table tr td:first-of-type a[href$=".gif"], 
table tr td:first-of-type a[href$=".svg"], 
table tr td:first-of-type a[href$=".jpeg"]
{background-image: url(./.images/image.png);}

/* zips */
table tr td:first-of-type a[href$=".zip"] 
{background-image: url(./.images/zip.png);}

/* rars */
table tr td:first-of-type a[href$=".rar"] 
{background-image: url(./.images/rar.png);}

/* isos */
table tr td:first-of-type a[href$=".iso"]
{background-image: url(./.images/iso.png);}

/* powershell scripts */
table tr td:first-of-type a[href$=".ps1"]
{background-image: url(./.images/ps1.png);}

/* css */
table tr td:first-of-type a[href$=".css"] 
{background-image: url(./.images/css.png);}

/* docs */
table tr td:first-of-type a[href$=".doc"],
table tr td:first-of-type a[href$=".docx"],
table tr td:first-of-type a[href$=".ppt"],
table tr td:first-of-type a[href$=".pptx"],
table tr td:first-of-type a[href$=".pps"],
table tr td:first-of-type a[href$=".ppsx"],
table tr td:first-of-type a[href$=".xls"],
table tr td:first-of-type a[href$=".xlsx"]
{background-image: url(./.images/office.png)}

/* videos */
table tr td:first-of-type a[href$=".avi"], 
table tr td:first-of-type a[href$=".wmv"], 
table tr td:first-of-type a[href$=".mp4"], 
table tr td:first-of-type a[href$=".mov"], 
table tr td:first-of-type a[href$=".m4a"]
{background-image: url(./.images/video.png);}

/* audio */
table tr td:first-of-type a[href$=".mp3"], 
table tr td:first-of-type a[href$=".ogg"], 
table tr td:first-of-type a[href$=".aac"], 
table tr td:first-of-type a[href$=".wma"] 
{background-image: url(./.images/audio.png);}

/* web pages */
table tr td:first-of-type a[href$=".html"],
table tr td:first-of-type a[href$=".htm"],
table tr td:first-of-type a[href$=".xml"]
{background-image: url(./.images/xml.png);}

table tr td:first-of-type a[href$=".php"] 
{background-image: url(./.images/php.png);}

table tr td:first-of-type a[href$=".js"] 
{background-image: url(./.images/script.png);}

/* directories */
table tr.dir td:first-of-type a
{background-image: url(./.images/folder.png);}

/* executables */
table tr td:first-of-type a[href$=".exe"]
{background-image: url(./.images/exe.png);}

/* msi */
table tr td:first-of-type a[href$=".msi"]
{background-image: url(./.images/msi.png);}

/* android */
table tr td:first-of-type a[href$=".apk"]
{background-image: url(./.images/apk.png);}

/* batch files */
table tr td:first-of-type a[href$=".bat"],
table tr td:first-of-type a[href$=".cmd"]
{background-image: url(./.images/bat.png);}

/* Responsive Design */
@media (max-width: 768px) {
	.file-grid {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 15px;
	}
	
	.file-icon {
		width: 60px;
		height: 60px;
	}
	
	h1 {
		font-size: 2em;
	}
}