/* ft.css — shared styles for file transfer app */

/* ---- layout ---- */
body {
	font-family: sans-serif;
	margin: 0;
	padding: 2em;
	background: #000030;
}

#ft_frame {
	background: #e8e8e8;
	border: 1px solid #999;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.2);
	width: 500px;
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

#ft_header {
	background: #000033;
	color: #fff;
	padding: 14px 24px;
	font-size: 1.4em;
	font-weight: bold;
	letter-spacing: 1px;
}

#ft_header .logout {
	float: right;
	color: #aaa;
	font-size: 0.6em;
	font-weight: normal;
	text-decoration: none;
	margin-top: 6px;
}

#ft_body {
	padding: 8px 24px 24px;
}

/* ---- form elements ---- */
label {
	display: block;
	margin-top: 1em;
	font-weight: bold;
	color: #333;
}

input[type="text"], input[type="password"], textarea {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #aaa;
	border-radius: 3px;
	box-sizing: border-box;
	font-family: sans-serif;
	font-size: 0.95em;
}

#se_message {
	width: 100%;
	padding: 4px;
}

/* ---- buttons ---- */
.ft_btn {
	margin-top: 1.5em;
	padding: 10px 28px;
	cursor: pointer;
	background: #000033;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1em;
	font-weight: bold;
}
.ft_btn:hover { background: #000066; }
.ft_btn:disabled { background: #888; cursor: default; }

.ft_btn_submit {
	margin-top: 1.5em;
	padding: 10px 28px;
	cursor: pointer;
	background: #000033;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1em;
	font-weight: bold;
}
.ft_btn_submit:hover { background: #000066; }
.ft_btn_submit:disabled { background: #888; cursor: default; }

.ft_btn_cancel {
	margin-top: 1.5em;
	margin-left: 1em;
	padding: 10px 28px;
	cursor: pointer;
	background: #880000;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1em;
	font-weight: bold;
}
.ft_btn_cancel:hover { background: #aa0000; }

.ft_btn_accept {
	margin-left: 8px;
	background: #006600;
}
.ft_btn_accept:hover { background: #008800; }

/* ---- links ---- */
.ft_link {
	display: inline-block;
	margin-top: 1em;
	color: #000066;
	cursor: pointer;
	font-size: 0.9em;
	text-decoration: underline;
}
.ft_link:hover { color: #0000cc; }
.ft_sep { margin-top: 0.5em; }

/* ---- login steps ---- */
.step { display: none; }
.step.active { display: block; }

#pwd_input {
	display: inline-block;
	width: 80%;
}

.pwd_eye {
	cursor: pointer;
	font-size: 1.2em;
	color: #666;
	user-select: none;
	margin-left: 8px;
	vertical-align: middle;
}

#pwd_display {
	font-size: 1.4em;
	font-weight: bold;
	color: #000066;
	background: #fff;
	border: 2px solid #000066;
	border-radius: 6px;
	padding: 12px 16px;
	text-align: center;
	margin: 1em 0;
	letter-spacing: 1px;
}

#pwd_note {
	font-size: 0.85em;
	color: #555;
	text-align: center;
	margin-bottom: 1em;
}

/* ---- drag-drop zone ---- */
#filedrag {
	font-weight: bold;
	text-align: center;
	padding: 2em 1em;
	margin: 1em 0;
	color: #555;
	border: 2px dashed #888;
	border-radius: 7px;
	cursor: default;
	background: #ddd;
}
#filedrag.hover {
	color: #000066;
	border-color: #000066;
	border-style: solid;
	background: #ccd;
	box-shadow: inset 0 3px 4px #999;
}

#fileselect { display: none; }
#file_info { margin: 0.5em 0; color: #333; font-size: 0.9em; }

/* ---- upload queue ---- */
#upload_wrap {
	display: none;
	margin-top: 1em;
	background: #f8f4e8;
	border: 2px solid #e8d8a0;
	border-radius: 6px;
	padding: 12px 14px;
}
#upload_wrap .uw_banner {
	font-weight: bold;
	font-size: 0.9em;
	color: #665500;
	text-align: center;
	margin-bottom: 10px;
}

/* progress cards */
.uq_card {
	background: #e8d8a0;
	border: 1px solid #a0a000;
	border-radius: 5px;
	padding: 10px 14px;
	margin-bottom: 8px;
}
.uq_card .uq_name { font-weight: bold; font-size: 0.95em; color: #333; margin-bottom: 6px; }
.uq_card .uq_track {
	height: 18px;
	background: #ccc;
	border-radius: 3px;
	overflow: hidden;
}
.uq_card .uq_bar {
	height: 18px;
	background: #00f080;
	width: 0;
	border-radius: 3px;
	transition: width 0.2s;
}
.uq_card .uq_text { margin-top: 4px; font-size: 0.85em; color: #333; }
.uq_card .uq_status { margin-top: 4px; font-weight: bold; font-size: 0.9em; }
.uq_card.uq_done .uq_bar { background: #004400; }
.uq_card.uq_error .uq_bar { background: #880000; }
.uq_card .uq_cancel {
	float: right;
	background: #880000;
	color: #fff;
	border: none;
	border-radius: 3px;
	padding: 2px 8px;
	cursor: pointer;
	font-size: 0.8em;
	font-weight: bold;
}
.uq_card .uq_cancel:hover { background: #aa0000; }

/* ---- responsive ---- */
@media (max-width: 600px) {
	#ft_frame { width: 100%; }
	#filedrag { display: none; }
	#fileselect { display: block; margin: 1em 0; }
}