@charset "utf-8";
/**
 * Admin CSS - Notion Dark Theme
 * Form & Component Styles
 */

/* ------------------------------------------------------------ Base */
html { height: 100%; }
body {
	height: 100%;
	min-width: 950px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-primary);
	background: var(--bg-primary);
}

.hide { display: none; }
.red { color: var(--accent-danger); }

/* ------------------------------------------------------------ Buttons */
a.submit_btn:link,
a.submit_btn:visited,
a.submit_btn:hover {
	color: #fff;
	text-decoration: none;
}

input[type="submit"],
a.submit_btn {
	cursor: pointer;
	text-align: center;
	display: inline-block;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	border: none;
	border-radius: var(--radius-sm);
	text-decoration: none;
	padding: 8px 16px;
	background: var(--accent-primary);
	transition: all var(--transition-fast);
}

input[type="submit"]:hover,
a.submit_btn:hover {
	background: var(--accent-hover);
}

input[type="submit"].del,
input[type="button"] {
	cursor: pointer;
	text-align: center;
	display: inline-block;
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 500;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	text-decoration: none;
	padding: 7px 16px;
	background: var(--bg-secondary);
	transition: all var(--transition-fast);
}

input[type="button"]:hover {
	background: var(--bg-hover);
	border-color: var(--border-focus);
}

/* ------------------------------------------------------------ Alerts & Messages */
.alert {
	color: var(--badge-red-text);
	padding: 12px 16px;
	text-align: center;
	background: var(--badge-red-bg);
	border-radius: var(--radius-sm);
	margin-bottom: 20px;
	font-weight: 500;
}

.complete {
	padding: 12px 16px;
	line-height: 1.7;
	text-align: center;
	color: var(--badge-green-text);
	background: var(--badge-green-bg);
	border-radius: var(--radius-sm);
	font-weight: 500;
}

.submit {
	text-align: center;
	padding: 20px 0;
}

/* ------------------------------------------------------------ Make Button */
#make a {
	width: 400px;
	text-align: center;
	margin: 20px auto;
	display: block;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	border: none;
	border-radius: var(--radius-sm);
	padding: 12px 32px;
	background: var(--accent-primary);
	transition: all var(--transition-fast);
}

#make a:hover {
	background: var(--accent-hover);
}

/* ------------------------------------------------------------ Tables */
table {
	border-radius: var(--radius-md);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
}

table tr td {
	background: transparent;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-light);
	color: var(--text-primary);
	font-size: 15px;
	transition: background var(--transition-fast);
}

table tr:hover td {
	background: var(--bg-hover);
}

table tr:last-child td {
	border-bottom: none;
}

table tr th {
	background: var(--bg-secondary);
	padding: 10px 16px;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	border-bottom: 1px solid var(--border-color);
}

table tr th a:link,
table tr th a:visited,
table tr th a:hover {
	color: var(--text-muted);
}

caption {
	background: var(--bg-secondary);
	font-weight: 600;
	padding: 14px 16px;
	text-align: left;
	font-size: 15px;
	color: var(--text-primary);
	border-bottom: 1px solid var(--border-color);
}

table tr th.id_box { width: 50px; }

table tr th span.red {
	display: inline-block;
	color: var(--accent-danger);
}

/* Input Table */
table#input {
	width: 100%;
	margin: 0 auto 24px;
	background: transparent;
	border: none;
}

table#input tr td,
table#input tr th {
	background: transparent;
}

table#input tr:hover td {
	background: transparent;
}

table#input input[type="text"] {
	width: 400px;
	background: var(--bg-input);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	transition: all var(--transition-fast);
}

table#input input[type="text"]:focus {
	border-color: var(--accent-primary);
	background: var(--bg-active);
	outline: none;
}

table#input textarea {
	width: 100%;
	background: var(--bg-input);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	transition: all var(--transition-fast);
	min-height: 120px;
	resize: vertical;
}

table#input textarea:focus {
	border-color: var(--accent-primary);
	background: var(--bg-active);
	outline: none;
}

table#input th {
	width: 140px;
	min-width: 140px;
	vertical-align: top;
	padding-top: 12px;
	font-size: 13px;
	color: var(--text-secondary);
	border: none;
}

table#input td {
	border: none;
}

table#input select {
	background: var(--bg-input);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	cursor: pointer;
}

/* ------------------------------------------------------------ Images & Media */
#up_image { text-align: center; padding: 20px 0; }

.images {
	border: 1px solid var(--border-color);
	padding: 16px;
	margin: 8px;
	float: left;
	border-radius: var(--radius-md);
	background: var(--bg-card);
}

.images form { padding: 12px 0; }

.movies {
	border: 1px solid var(--border-color);
	width: 300px;
	padding: 16px;
	margin: 8px;
	float: left;
	border-radius: var(--radius-md);
	background: var(--bg-card);
}

.movies form { text-align: center; padding: 12px 0 0; }

.w150 { width: 150px; }
.w80 { width: 80px; }
.h150 { height: 150px; }

/* ------------------------------------------------------------ Albums */
#albums { width: 920px; margin: 0 auto; }
#inner-albums { padding: 20px 0; }

#inner-albums .photos {
	width: 210px;
	padding: 16px;
	float: left;
}

#inner-albums .photos img { cursor: pointer; border-radius: var(--radius-sm); }
#inner-albums .photos form { text-align: center; padding: 12px 0 0; }

/* ------------------------------------------------------------ Headers */
h1 { display: inline; font-size: 16px; font-weight: 600; }
.h1 { width: 1000px; margin: 0 auto; color: var(--text-primary); font-size: 16px; }
.h1 p { display: inline; }

/* ------------------------------------------------------------ Timelog */
.timelog { padding: 0 0 24px; }
.timelog form { text-align: center; padding: 24px 0 0; }

.timelog table {
	border-top: 1px solid var(--border-color);
	width: 100%;
	margin: 0 0 20px;
}

.timelog table th {
	background: var(--bg-secondary);
}

/* ------------------------------------------------------------ Tags */
#tagarea { padding: 0 0 20px; }
#tagarea .tags { margin: 0 6px 0 0; }

a.tags,
.tags {
	display: inline-block;
	border-radius: var(--radius-xs);
	color: #fff !important;
	text-align: center;
	min-width: 60px;
	padding: 4px 10px;
	text-decoration: none !important;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 500;
}

input[type="submit"],
.w0,.w1,.w2,.w3,.w4,.w5,.w6,.w7 { font-weight: 500; }

input[type="submit"].w0, .w0 { background: var(--badge-blue-text); }
input[type="submit"].w1, .w1 { background: var(--badge-green-text); }
input[type="submit"].w2, .w2 { background: var(--badge-yellow-text); }
input[type="submit"].w3, .w3 { background: var(--badge-orange-text); }
input[type="submit"].w4, .w4 { background: var(--accent-danger); }
input[type="submit"].w5, .w5 { background: var(--text-muted); }
input[type="submit"].w6, .w6 { background: var(--text-secondary); }
.w7 { background: var(--badge-purple-text); }

/* ------------------------------------------------------------ Login */
#wrap-login {
	background: var(--bg-primary);
	height: 100%;
}

#login {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(ellipse at 15% 80%, rgba(53, 160, 244, 0.12) 0%, transparent 50%),
		radial-gradient(ellipse at 85% 20%, rgba(77, 171, 154, 0.10) 0%, transparent 50%),
		linear-gradient(160deg, #111318 0%, #191919 40%, #1a1a2e 100%);
	position: relative;
	overflow: hidden;
}

#login::before,
#login::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}

#login::before {
	width: 400px;
	height: 400px;
	background: rgba(53, 160, 244, 0.08);
	top: -100px;
	right: -80px;
}

#login::after {
	width: 350px;
	height: 350px;
	background: rgba(77, 171, 154, 0.06);
	bottom: -80px;
	left: -60px;
}

#login input[type="text"],
#login input[type="password"] {
	display: block;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--text-primary);
	transition: border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal);
}

#login input[type="text"]:focus,
#login input[type="password"]:focus {
	border-color: rgba(53, 160, 244, 0.5);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 3px rgba(53, 160, 244, 0.1);
	outline: none;
}

#login input[type="text"]::placeholder,
#login input[type="password"]::placeholder {
	color: var(--text-placeholder);
}

#login input[type="submit"] {
	background: var(--accent-primary);
	padding: 13px 48px;
	font-size: 14px;
	width: 100%;
	border-radius: var(--radius-md);
	font-weight: 600;
	letter-spacing: 0.5px;
	transition: background var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
	box-shadow: 0 2px 12px rgba(53, 160, 244, 0.25);
}

#login input[type="submit"]:hover {
	background: var(--accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 20px rgba(53, 160, 244, 0.35);
}

#login input[type="submit"]:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(53, 160, 244, 0.2);
}

#form {
	padding: 0;
	position: relative;
	z-index: 1;
	text-align: center;
}

#login h3 {
	text-align: center;
	color: var(--text-primary);
	margin-bottom: 32px;
}

#login h3 img.login-logo {
	width: 200px;
	height: auto;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

#login h3 span {
	display: block;
	padding: 10px 0 0;
	font-size: 11px;
	color: var(--text-muted);
	letter-spacing: 4px;
	text-transform: uppercase;
}

#login form {
	text-align: center;
	margin: 0 auto;
	padding: 36px 40px 40px;
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	min-width: 340px;
	max-width: 380px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#login form dl { width: 100%; margin: 0 auto; }

#login form dl input {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--radius-md);
	font-size: 14px;
}

#login form dl dt {
	margin-bottom: 16px;
}

#login form dl dt:last-child {
	margin-bottom: 0;
}

#login form .txC {
	margin-top: 28px;
}

#login form .alert {
	color: var(--badge-red-text);
	background: var(--badge-red-bg);
	padding: 10px 14px;
	border-radius: var(--radius-md);
	margin-bottom: 16px;
	font-size: 13px;
	border: 1px solid rgba(235, 87, 87, 0.15);
}

/* Workers Login - グリーン/ティール系の背景 */
#login.login-workers {
	background:
		radial-gradient(ellipse at 20% 75%, rgba(77, 171, 154, 0.12) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 25%, rgba(53, 160, 244, 0.08) 0%, transparent 50%),
		linear-gradient(160deg, #111816 0%, #191919 40%, #162022 100%);
}

#login.login-workers::before {
	background: rgba(77, 171, 154, 0.08);
}

#login.login-workers::after {
	background: rgba(53, 160, 244, 0.05);
}

#login.login-workers input[type="submit"] {
	background: var(--accent-secondary);
	box-shadow: 0 2px 12px rgba(77, 171, 154, 0.25);
}

#login.login-workers input[type="submit"]:hover {
	background: #5dbdac;
	box-shadow: 0 4px 20px rgba(77, 171, 154, 0.35);
}

#login.login-workers input[type="submit"]:active {
	box-shadow: 0 2px 8px rgba(77, 171, 154, 0.2);
}

#login.login-workers input[type="text"]:focus,
#login.login-workers input[type="password"]:focus {
	border-color: rgba(77, 171, 154, 0.5);
	box-shadow: 0 0 0 3px rgba(77, 171, 154, 0.1);
}

#input input[type="text"].short { width: 200px; }

/* ------------------------------------------------------------ Analyze */
#analyze #table th { min-width: 30px; padding: 8px; }
#analyze #table { background: var(--bg-card); }

/* ------------------------------------------------------------ Print */
#print {
	background: var(--bg-card);
	width: 750px;
	margin: 20px auto;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
}

#print .photo td { width: 50%; text-align: center; }
#print td { word-break: break-all; color: var(--text-primary); }
.btn_print { padding: 16px 0; text-align: center; }

/* ------------------------------------------------------------ Timestamp */
#timestamp {
	text-align: center;
	width: 340px;
	border: 1px solid var(--border-color);
	padding: 40px;
	margin: 0 auto;
	background: var(--bg-card);
	border-radius: var(--radius-lg);
}

#timestamp #time {
	font-size: 32px;
	font-weight: 600;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Aside Header */
/* Styles moved to tmp.css for Notion-like layout */