* { user-select: none; }

:root {
	/* Light mode colors (default) */
	--bg-light: #f7f7f7;
	--bg-dark: #f0f0f0;
	--border-color: #333;
	--text-color: #333;
	--ascii-border: '┌─┐│└┘';

	/* Additional light mode variables */
	--body-text-color: #222;
	--body-bg-color: #ffffff;
	--input-border-color: #000;
	--input-focus-border: #ccc;
	--input-focus-bg: #fff;
	--input-focus-text: #000;
	--scrollbar-bg: #dfdfdf;
	--scrollbar-shadow-dark: #0a0a0a;
	--scrollbar-shadow-light: #fff;
	--scrollbar-shadow-grey: grey;
	--util-red: #c53d3d;
	--util-green: #6fc53d;
	--util-blue: #5252ff;
	--util-gray: #4b4b4b;
	--selected-border: #000;
	--placeholder-color: #666; /* Changed from black to darker gray for better contrast */
	--container-bg: #f9f9f9;
	--container-text: #333;
	--container-bg-alt: #fff;
	--container-border: #dfdfdf;
	--line-bg: #fff;
	--line-border: #dfdfdf;
	--link-border: #c8c8c8;
	--link-color: #4b4b4b;
	--img-border: #eee;
	--icon-bg: #f4f4f4;
	--icon-border: #000;
	--desktop-icon-bg-hover: rgba(0,0,128,0.3);
	--desktop-icon-bg-selected: rgba(0,0,128,0.5);
	--desktop-icon-text: #000; /* Changed from white to black */
	--desktop-icon-text-shadow: rgba(255,255,255,0.8); /* Inverted shadow for light background */
	--desktop-icon-span-color: #333;
	--taskbar-bg-start: rgba(255, 255, 255, 0.95);
	--taskbar-bg-end: rgba(255, 255, 255, 0.9);
	--taskbar-border-top: rgba(0, 0, 0, 0.1);
	--taskbar-border-outset: rgba(255, 255, 255, 0.8);
	--taskbar-button-bg: rgba(255, 255, 255, 0.8);
	--taskbar-shadow: rgba(0, 0, 0, 0.08);
	--start-menu-bg: rgba(255, 255, 255, 0.95);
	--start-menu-header-start: #667eea;
	--start-menu-header-end: #764ba2;
	--start-menu-header-text: #ffffff;
	--start-menu-hover-bg: rgba(59, 130, 246, 0.08);
	--start-menu-hover-text: #333;
	--folder-hover-bg: #e0e0e0;
	--context-menu-bg: #c0c0c0;
	--context-menu-border: #000;
	--context-menu-hover-bg: #000080;
	--context-menu-hover-text: #fff;
	--context-menu-disabled: #808080;
	--context-menu-separator-top: #808080;
	--context-menu-separator-bottom: #fff;
	--background-color: #ffffff;
	--primary-color: #fdd835;
	--secondary-color: #0000ff; /* Changed from 'blue' to hex for consistency */
	--tag-border: #7d7d7d;
	--tag-color: #666;
	--line-text-color: #333;
}

/* Dark mode colors */
/*
[data-theme="dark"] {
	--bg-light: #1a1a1a;
	--bg-dark: #0f0f0f;
	--border-color: #ccc;
	--text-color: #e0e0e0;
	--body-text-color: #e0e0e0;
	--body-bg-color: #121212;
	--input-border-color: #666;
	--input-focus-border: #555;
	--input-focus-bg: #2a2a2a;
	--input-focus-text: #fff;
	--scrollbar-bg: #2a2a2a;
	--scrollbar-shadow-dark: #000;
	--scrollbar-shadow-light: #444;
	--scrollbar-shadow-grey: #333;
	--util-red: #ff6b6b;
	--util-green: #90ee90;
	--util-blue: #7a7aff;
	--util-gray: #b4b4b4;
	--selected-border: #666;
	--placeholder-color: #999;
	--container-bg: #1e1e1e;
	--container-text: #ffffff;
	--container-bg-alt: #252525;
	--container-border: #404040;
	--line-bg: #252525;
	--line-border: #404040;
	--link-border: #505050;
	--link-color: #b4b4b4;
	--img-border: #444;
	--icon-bg: #2a2a2a;
	--icon-border: #666;
	--desktop-icon-bg-hover: rgba(255,255,255,0.1);
	--desktop-icon-bg-selected: rgba(255,255,255,0.2);
	--desktop-icon-text: #ffffff;
	--desktop-icon-text-shadow: rgba(0,0,0,0.9);
	--desktop-icon-span-color: #e0e0e0;
	--taskbar-bg-start: #2a2a2a;
	--taskbar-bg-end: #1a1a1a;
	--taskbar-border-top: #444;
	--taskbar-border-outset: #2a2a2a;
	--taskbar-button-bg: #2a2a2a;
	--taskbar-shadow: rgba(0,0,0,0.6);
	--start-menu-bg: #2a2a2a;
	--start-menu-header-start: #1a4d80;
	--start-menu-header-end: #2666cc;
	--start-menu-header-text: #ffffff;
	--start-menu-hover-bg: #2666cc;
	--start-menu-hover-text: #ffffff;
	--folder-hover-bg: #3a3a3a;
	--context-menu-bg: #2a2a2a;
	--context-menu-border: #666;
	--context-menu-hover-bg: #2666cc;
	--context-menu-hover-text: #fff;
	--context-menu-disabled: #666;
	--context-menu-separator-top: #444;
	--context-menu-separator-bottom: #555;
	--background-color: #121212;
	--primary-color: #fdd835;
	--secondary-color: #ff4444;
	--tag-border: #666;
	--tag-color: #999;
	--line-text-color: #e0e0e0;
}
*/

input, textarea, [contenteditable], [contenteditable="true"] { user-select: auto !important; z-index: 2; }

body {
	font-family: 'MS Sans Serif', 'apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif, monospace, serif !important;
	font-size: 1.15em;
	color: var(--body-text-color);
	width: 100%;
	margin: 0 auto;
	z-index: 100 !important;
	background-color: var(--body-bg-color);
	background-image: url("/background-2.jpeg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow-x: hidden !important;
	height: 100vh;
	overflow: hidden;
	cursor: default;
	display: none;
}

input {
	border: none;
	border-bottom: 1px dashed var(--input-border-color);
	width: 90%;
}

input:focus, input:active {
	outline: none;
	box-shadow: none;
	transition: none;
	font-size: inherit;
}


.add_button {
	font-size: 1em;
	color: #000;
}

/*
 *
input:focus, input:active {
	outline: none;
	box-shadow: none;
	border: 1px solid var(--input-focus-border);
	background-color: var(--input-focus-bg);
	color: var(--input-focus-text);
	transition: none;
	font-size: 1em;
	border: 1px dashed var(--input-border-color);
}

*/

code,code *{ font-family:monospace }
summary:focus{ outline:1px dotted var(--icon-border) }

::-webkit-scrollbar{ width:16px }
::-webkit-scrollbar:horizontal{ height:17px }
::-webkit-scrollbar-corner{ background: var(--scrollbar-bg) }
::-webkit-scrollbar-thumb{
	background-color: var(--scrollbar-bg);
	box-shadow:inset -1px -1px var(--scrollbar-shadow-dark),inset 1px 1px var(--scrollbar-shadow-light),inset -2px -2px var(--scrollbar-shadow-grey),inset 2px 2px var(--scrollbar-bg)
}
::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement{ display:block }
::-webkit-scrollbar-button:vertical:start{ height:17px }
::-webkit-scrollbar-button:vertical:end{ height:17px }
::-webkit-scrollbar-button:horizontal:start{ width:16px }
::-webkit-scrollbar-button:horizontal:end{ width:16px }

/* ------------------- UTILITIES ------------------- */
.hidden { display: none; }
.no_outline { outline: none !important; }
.text_align_center { text-align: center; }
.cursor-pointer { cursor: pointer; }
.overflow_y_auto { overflow-y: auto }
.display_flex { display: flex; }
.display_block { display: block; }
.center_block { display: block; margin: 0 auto !important;}
.justify_content_space_between { justify-content: space-between; }
.justify_content_space_around { justify-content: space-around; }
.justify_content_space_evenly { justify-content: space-evenly; }
.z_index_0 { z-index: 0 }
.z_index_1 { z-index: 1 }
.z_index_2 { z-index: 2 }
.width_100 { width: 100%; }
.height_100 { height: 100%; }
.display_none { display: none !important; }
.no_border { border: none !important; }
.no_boxshadow { box-shadow: none; }
.bold { font-weight: 800 !important; }
.italic { font-style: italic; }
.color_red { color: var(--util-red); }
.color_green { color: var(--util-green); }
.color_blue { color: var(--util-blue); }
.color_gray { color: var(--util-gray); }
.float_right { float: right; }
.float_left { float: left; }
.align_left { text-align: left;; }
.text_decoration_none { text-decoration: none !important; }
.display_inline { display: inline; }
.selected { border: 1px dashed var(--selected-border); }
.margin_left_10px { margin-left: 10px; }
.margin_left_20px { margin-left: 20px; }
.margin_top_0 { margin-top: 0px; }
.border_sizing_border_box { box-sizing: border-box; }
.overflow_auto { overflow: auto; }
.overflow_hidden { overflow: hidden; }
.selectable { user-select: auto !important; }
.no_content { content: '' !important; }
.placeholder_text_black::placeholder { color: var(--placeholder-color); }
.no_underline { text-decoration: none !important; }
.iphone_radius { border-radius: calc(width * 2/9); }
.is_mobile { display: none; }
.hide_desktop { display: none !important; }
desktop { display: inherit; }
comment { display: none; }
mobile { display: none !important; }
grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(10, 100px); gap: 20px; padding: 20px; justify-content: start; align-content: start; }
grid-item { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; height: 100px; cursor: pointer; }
/*TODO: separate structural classes than styled ones?*/
/* ------------------- UTILITIES ------------------- */

/* ------------------- THEMED ------------------- */
/*light mode*/
/* System dark mode preference */
@media (prefers-color-scheme: light) {
	:root {
	--background-color: #ffffff;
	--text-color: #000000;
	--primary-color: #fdd835;
	--secondary-color: blue;
}
p { color: var(--text-color); }
}

/* System dark mode preference */
@media (prefers-color-scheme: dark) {
	:root {
		--background-color: #121212;
		--text-color: #ffffff;
		--primary-color: #fdd835;
		--secondary-color: red;
	}
	p { color: var(--text-color); }
}

/*TODO: remove un-used styles*/
/*TODO: set every color as a variale*/
.highlight { background-color: var(--primary-color); }
.selected { border-bottom: 1px dashed var(--selected-border) !important; }
.tag {
	display: inline-block;
	font-weight: bold;
	border-bottom: 1px dashed var(--tag-border);
	color: var(--tag-color);
	color: var(--secondary);
	cursor: pointer;
	margin: 2px 2px;
	padding: 3px 5px;
	text-align: center;
}
.container {
	font-family: apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif, 'mono', monospace;
	outline: none;
	font-size: 16px;
	max-width: 60%;
	margin: 0 auto;
	background-color: var(--container-bg);
	color: var(--container-text);
	/*line-height: 1.6;*/
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	background: var(--container-bg-alt);
	border: 1px dashed var(--container-text) !important;
	overflow: hidden;
    margin-bottom: 40px;
}
.link {
	margin: 10px;
	cursor: pointer;
	text-decoration: none;
	border-bottom: 1px dashed var(--link-border);
	max-height: 25px;
	color: var(--link-color);
}
img { border: 1px dashed var(--img-border); border-radius: 10px; max-width: 90%; width: 300px; }
.icon { width: 15px; height: 15px; background: var( --primary-color ); border-radius: 3px; background: var(  --primary-color ); margin-right: 5px; position: relative; top: 2px; border: 1px dotted var(--icon-border); }

/* ------------------- THEMED.DESKTOP ------------------- */
/*
.desktop {
height: calc(100vh - 30px); position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 1px 1px; padding: 10px;
}
.desktop-icon { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; }
.desktop-icon {
	position: absolute;
	width: 70px;
	height: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	padding: 5px;
	border-radius: 2px;
	color: var(--desktop-icon-text);
	text-shadow: 1px 1px 2px var(--desktop-icon-text-shadow);
	border: none;
	background: var( --bg-color );
}
.desktop-icon:hover { background: var(--desktop-icon-bg-hover); }
.desktop-icon.selected { background: var(--desktop-icon-bg-selected); }
.desktop-icon img { width: 79px; height: 80px; object-fit: contain; }
.desktop-icon span { text-align: center; font-size: 10px; line-height: 12px; font-size: 14px; color: var(--desktop-icon-span-color); width: 100%; line-break: anywhere;  }
.desktop-icon-text { background: #fff; padding: 2px; color: #000; }
*/

desktop-container {
	height: calc(100vh - 30px);
	position: relative;
	padding: 10px;
	overflow: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, 90px);
	grid-auto-rows: 100px;
	gap: 10px;
	align-content: start;
}

desktop-container desktop-icon {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 80px;
	height: 90px;
	margin: 0;
	cursor: pointer;
	padding: 5px;
	border-radius: 3px;
	color: var(--desktop-icon-text, #fff);
	text-shadow: 1px 1px 2px var(--desktop-icon-text-shadow, rgba(0, 0, 0, 0.8));
	border: none !important;
	/*border: 1px solid transparent;*/
	background: var(--bg-color, transparent);
	transition: background-color 0.15s ease, border-color 0.15s ease;
	user-select: none;
}

.desktop-icon:hover {
	background: var(--desktop-icon-bg-hover, rgba(255, 255, 255, 0.1));
	border-color: var(--desktop-icon-border-hover, rgba(255, 255, 255, 0.2));
}

.desktop-icon.selected {
	background:   var(--desktop-icon-bg-selected, rgba(255, 255, 255, 0.2));
	border-color: var(--desktop-icon-border-selected, rgba(255, 255, 255, 0.4));
	border: 1px dashed #000;
}

.desktop-icon:focus-visible {
	outline: 2px solid var(--focus-color, #0078d4);
	outline-offset: 2px;
}

.desktop-icon img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	pointer-events: none;
	flex-shrink: 0;
	margin-bottom: 4px;
	margin-left: 20px;
	display:  block;
	margin: 0 auto;
	background: var(--icon-bg);
	border: 1px solid var(--icon-border);
	padding: 3px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.desktop-icon span {
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	min-width: 80px;
	display: inline-block;
	width: 80%;
	margin:  0 auto;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	display: block;
	margin-top: 4px;
	padding: 0 2px;
	white-space: normal;
	height: auto;
}

.desktop-icon-text {
	background: rgba(255, 255, 255, 0.95);
	padding: 2px 4px;
	color: #000;
	border-radius: 2px;
	display: inline-block;
	text-align: center;
	max-width: 100px;
}

.desktop-icon-text.selected {
	background: var(--desktop-icon-text-bg-selected, #0078d4);
	color: var(--desktop-icon-text-color-selected, #fff);
}

/*
.desktop { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: minmax(100px, auto); gap: 1px; padding: 10px; }
.desktop-icon { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; }
.desktop-icon img { width: 79px; height: 80px; object-fit: contain; }
.desktop-icon span { font-size: 14px; color: var(--desktop-icon-span-color); width: 100%; line-break: anywhere;  }
.desktop-icon-text { background: #fff; padding: 2px; color: #000; }
*/

/*
.desktop { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: minmax(100px, auto); gap: 1px 1px; padding: 10px; }
*/
/* ------------------- THEMED.DESKTOP ------------------- */

/* ------------------- THEMED.TASKBAR ------------------- */
/* Taskbar styles moved to inline in desktop__component.html */
/* ------------------- THEMED.TASKBAR ------------------- */

/* ------------------- THEMED.FOLDERS ------------------- */
.folder-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	padding: 5px;
	border-radius: 2px;
}
.folder-item:hover { background: var(--folder-hover-bg); }
.folder-item img { width: 32px; height: 32px; margin-bottom: 5px; }
.folder-item span { font-size: 10px; text-align: center; }
/* ------------------- THEMED.FOLDERS ------------------- */

/* ------------------- THEMED.CONTEXTMENU ------------------- */
/* Context menu styles moved to inline in desktop__component.html */
/* ------------------- THEMED.CONTEXTMENU ------------------- */

/* ------------------- THEMED.COMMAND_PALLET ------------------- */
/*
#command-input { padding: 0; font-size: 1em; }
#command-input::placeholder { color: #86868b; transition: opacity 0.3s ease; }
#command-input:focus { border-color: #007aff; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1), 0 8px 30px rgba(0, 122, 255, 0.15); background: rgba(255, 255, 255, 0.95); opacity:  1; }
#command-input:focus::placeholder { opacity: 0.6; }
*/
/* ------------------- THEMED.COMMAND_PALLET ------------------- */

/* ------------------- THEMED ------------------- */

/*if: mobile*/
@media screen and (max-width: 1000px) {
	#ui { width: 98%; margin: 0 auto; }
	#apps { display: block; width: 97%; }

	mobile { display: inherit !important; }
	desktop { display: none !important; }
	.is_mobile { display: none; }
	.hide_mobile { display: none !important; }

    .container {
        font-size: 16px;
        max-width: 100%;
    }

}