@charset "utf-8";
/* =========================================================================
   admin.css  —  作業者向け管理画面 共通スタイル
   ========================================================================= */

body {
	font-family: var(--ff-jp);
	color: var(--c-text);
	background: var(--c-bg);
}

#container {
	padding-top: var(--header-h);
}

/* ============================================================
   ヘッダー
   ============================================================ */
#header {
	height: var(--header-h);
	box-shadow: 0 1px 0 var(--c-border), 0 4px 14px rgba(15,76,92,0.05);
	padding: 0 var(--s-4);
}

#header .logo a {
	color: var(--c-primary);
}
#header .logo svg {
	fill: var(--c-primary);
}
#header .logo a:hover {
	color: var(--c-primary-hover);
}

#header .user-info {
	color: var(--c-text-soft);
	background: var(--c-primary-pale);
	color: var(--c-primary);
	border-radius: var(--r-pill);
}
#header .user-info svg {
	fill: var(--c-primary);
}

/* ============================================================
   ハンバーガーボタン & グローバルナビ
   ============================================================ */
#gNavBtn > span,
#gNavBtn > span::before,
#gNavBtn > span::after {
	background-color: var(--c-primary);
}
#gNavCheck:checked + #header #gNavBtn > span {background-color:rgba(255,255,255,0);}

#gNav {
	background: linear-gradient(180deg, #ffffff 0%, var(--c-surface-alt) 100%);
}

#gNav > ul {
	padding: calc(var(--header-h) + var(--s-3)) 0 var(--s-6) 0;
}
#gNav > ul > li {
	border-bottom: 1px solid var(--c-border);
	transition: background-color var(--t-fast) var(--ease);
}
#gNav > ul > li:hover { background-color: rgba(15,76,92,0.03); }
#gNav > ul > li > a,
#gNav > ul > li > button {
	color: var(--c-text);
	padding: var(--s-4) var(--s-5);
	transition: color var(--t-fast) var(--ease);
}
#gNav > ul > li > a:hover {
	color: var(--c-primary);
}
#gNav > ul > li li {
	border-top: 1px dotted var(--c-border);
	background: rgba(245,243,236,0.5);
}
#gNav > ul > li li a {
	color: var(--c-text-soft);
}
#gNav > ul > li li a:hover {
	color: var(--c-primary);
	background-color: var(--c-primary-pale);
}
#gNav > ul > li.sub > a::before {
	color: var(--c-text-mute);
	transition: transform var(--t-base) var(--ease);
}
#gNav > ul > li.logout {
	background: var(--c-surface-alt);
	padding: var(--s-4);
}
#gNav > ul > li.logout button {
	color: var(--c-danger);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	transition: all var(--t-fast) var(--ease);
}
#gNav > ul > li.logout button:hover {
	background: var(--c-danger-pale);
	border-color: var(--c-danger);
}

/* ============================================================
   ボタン体系
   ============================================================ */
.btn-01,
.btn-02,
.btn-03,
.search-btn,
.gmap-btn {
	height: 42px;
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	border: none;
	border-radius: var(--r-md);
	box-shadow: var(--shadow-sm);
	transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
	cursor: pointer;
}
.btn-01 {
	background: var(--c-primary);
	color: var(--c-text-on-dark);
	min-width: 200px;
	padding: 0 var(--s-5);
}
.btn-01:hover {
	background: var(--c-primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
	color: var(--c-text-on-dark);
}
.btn-02 {
	background: var(--c-text-soft);
	color: var(--c-text-on-dark);
	padding: 0 var(--s-5);
}
.btn-02:hover {
	background: var(--c-text);
	color: var(--c-text-on-dark);
}
.btn-03 {
	height: auto;
	padding: 8px 18px;
	background: var(--c-surface);
	color: var(--c-text);
	border: 1px solid var(--c-border);
	font-size: 1.3rem;
	box-shadow: var(--shadow-xs);
}
.btn-03:hover {
	background: var(--c-surface-alt);
	color: var(--c-text);
}

/* ボタンのバリエーション */
.btn-accent {
	background: var(--c-accent);
	color: var(--c-text-on-dark);
}
.btn-accent:hover {
	background: var(--c-accent-hover);
	color: var(--c-text-on-dark);
}
.btn-danger {
	background: var(--c-danger);
	color: var(--c-text-on-dark);
}
.btn-danger:hover {
	background: #C24957;
	color: var(--c-text-on-dark);
}

.fix-btn {
	background: rgba(255,255,255,0.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 -4px 16px rgba(15,76,92,0.08);
	padding: var(--s-3);
	border-top: 1px solid var(--c-border);
}
.fix-btn button[type=submit] {
	background: var(--c-primary);
	min-width: 200px;
}
.fix-btn .btn-svg svg {
	fill: var(--c-primary);
}
.fix-btn .btn-svg.off {
	pointer-events: none;
}

/* ============================================================
   コンテンツ
   ============================================================ */
#contents {
	padding: var(--s-5) var(--s-4) calc(var(--s-7) + 60px) var(--s-4);
}

@media screen and (max-width:767px) {
	#contents { padding: var(--s-4) var(--s-3) calc(var(--s-7) + 60px) var(--s-3); }
}

h1, h2, h3, h4 { color: var(--c-text); }

hr {
	margin: var(--s-5) 0;
	padding: 0;
	border-top: 1px solid var(--c-border);
}

/* ============================================================
   フォーム
   ============================================================ */
.input-form input[type=text],
.input-form input[type=password],
.input-form input[type=number],
.input-form input[type=tel],
.input-form input[type=email],
.input-form input[type=url],
.input-form textarea,
.input-form select {
	font-family: var(--ff-jp);
	color: var(--c-text);
	background: var(--c-surface);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-md);
	padding: 10px 12px;
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input-form input[type=text]:focus,
.input-form input[type=password]:focus,
.input-form input[type=number]:focus,
.input-form input[type=tel]:focus,
.input-form input[type=email]:focus,
.input-form input[type=url]:focus,
.input-form textarea:focus,
.input-form select:focus {
	border-color: var(--c-primary-soft);
	box-shadow: 0 0 0 3px rgba(45,122,140,0.15);
	outline: none;
}
.input-form input[type=text]:disabled,
.input-form input[type=text].readonly,
.input-form textarea:disabled,
.input-form select.readonly {
	background: var(--c-surface-mute);
	color: var(--c-text-soft);
	border-color: var(--c-border);
}
.input-form input.error,
.input-form select.error,
.input-form textarea.error {
	background-color: var(--c-danger-pale);
	border-color: var(--c-danger);
}

.input-form > dl {
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--c-border);
	gap: var(--s-4);
}
.input-form > dl > dt {
	font-weight: 600;
	color: var(--c-text-soft);
	font-size: 1.3rem;
	width: 7em;
}
.clone-sec .add a {background: var(--c-primary); border-radius: var(--r-md); transition:transform var(--t-fast) var(--ease);}
.clone-sec .btn-set > li a {transition:transform var(--t-fast) var(--ease);}
.clone-sec .btn-set svg {fill: var(--c-primary);}
.flow-list > div::before {border-left-color: var(--c-primary);}
.flow-list label {background-color: var(--c-primary); border-radius: var(--r-md); transition:transform var(--t-fast) var(--ease);}
.flow-list span {color: var(--c-primary);}
.label-ttl {background-color: var(--c-primary);}


/* ============================================================
   リスト系（一覧画面）
   ============================================================ */
.list-sec {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-xs);
}
.list-sec > li {
	border-bottom: 1px solid var(--c-border);
	transition: background-color var(--t-fast) var(--ease);
}
.list-sec > li:last-child { border-bottom: none; }
.list-sec > li:hover { background: var(--c-surface-alt); }
.list-sec > li .clm {
	display: flex;
	align-items: center;
	padding: var(--s-3) var(--s-4);
	gap: var(--s-3);
}
.list-sec > li .ctx {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	text-align: left;
}
.list-sec > li .ctx a {
	color: var(--c-primary);
	font-weight: 600;
	text-decoration: none;
}
.list-sec > li .ctx a:hover { text-decoration: underline; }
.list-sec > li .btns {
	display: flex;
	gap: var(--s-2);
	flex-shrink: 0;
}
.list-sec > li .btns a {
	font-size: 1.2rem;
	color: var(--c-text-soft);
	background: var(--c-surface-alt);
	padding: 6px 12px;
	border-radius: var(--r-sm);
	text-decoration: none;
	border: 1px solid var(--c-border);
	transition: all var(--t-fast) var(--ease);
}
.list-sec > li .btns a:hover {
	background: var(--c-primary-pale);
	color: var(--c-primary);
	border-color: var(--c-primary-soft);
}

/* ============================================================
   ソート/絞り込みナビ
   ============================================================ */
.sort-nav {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: var(--s-3);
	margin-bottom: var(--s-4);
	box-shadow: var(--shadow-xs);
}
.sort-nav form {
	gap: var(--s-3);
}
.sort-nav input,
.sort-nav select {
	background: var(--c-surface-alt);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-md);
	padding: 8px 10px;
	transition: all var(--t-fast) var(--ease);
}
.sort-nav input:focus,
.sort-nav select:focus {
	background: var(--c-surface);
	border-color: var(--c-primary-soft);
	box-shadow: 0 0 0 3px rgba(45,122,140,0.15);
	outline: none;
}
.sort-nav #search-word {
	height: 38px;
	border-right: none;
	border-radius: var(--r-md) 0 0 var(--r-md);
}
.sort-nav #search-btn {
	width: 40px;
	height: 38px;
	background: var(--c-primary);
	border: 1px solid var(--c-primary);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	cursor: pointer;
	transition: background-color var(--t-fast) var(--ease);
}
.sort-nav #search-btn:hover { background: var(--c-primary-hover); }
.sort-nav #search-btn svg { fill: #fff; }

/* ============================================================
   ページネーション
   ============================================================ */
.page-nav { padding: var(--s-5) 0; }
.page-nav a,
.page-nav span {
	width: 36px;
	height: 36px;
	font-size: 1.3rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-md);
	transition: all var(--t-fast) var(--ease);
}
.page-nav a {
	color: var(--c-text-soft);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
}
.page-nav a:hover {
	color: var(--c-primary);
	background: var(--c-primary-pale);
	border-color: var(--c-primary-soft);
	text-decoration: none;
}
.page-nav span {
	color: var(--c-text-on-dark);
	background: var(--c-primary);
	border: 1px solid var(--c-primary);
}

/* ============================================================
   ログイン画面
   ============================================================ */
body.login {
	background: linear-gradient(135deg, var(--c-primary) 0%, #0A3641 100%);
}
.login-sec {
	padding: var(--s-4);
}
.login-sec > div {
	background: var(--c-surface);
	border-radius: var(--r-xl);
	padding: var(--s-7) var(--s-6);
}
.login-sec .box {
	margin: 0 0 var(--s-4) 0;
}
.login-sec .box dl {
	padding: 0 0 var(--s-3) 0;
}
.login-sec .box dl > dt {
	color: var(--c-text-soft);
}
.login-sec .box dl > dd input {
	background: var(--c-surface-alt);
	border: 1.5px solid var(--c-border-strong);
	border-radius: var(--r-md);
	transition: all var(--t-fast) var(--ease);
}
.login-sec .box dl > dd input:focus {
	background: var(--c-surface);
	border-color: var(--c-primary-soft);
	box-shadow: 0 0 0 3px rgba(45,122,140,0.15);
	outline: none;
}
.login-sec button[type=submit] {
	border-radius: var(--r-md);
	background: var(--c-primary);
	color: var(--c-text-on-dark);
	transition: all var(--t-fast) var(--ease);
	box-shadow: var(--shadow-md);
}
.login-sec button[type=submit]:hover {
	background: var(--c-primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-lg);
}
.login-sec .error {
	color: var(--c-danger);
	margin: var(--s-3) 0 0 0;
}
.login-sec .brand {
	color: var(--c-primary);
	margin-bottom: var(--s-5);
}
.login-sec .brand svg {
	fill: var(--c-primary);
}

/* ============================================================
   フッター
   ============================================================ */
#footer {
	padding: var(--s-5) 0 calc(var(--s-7) + 60px) 0;
}
#footer .copy {
	color: var(--c-text-faint);
}

/* ============================================================
   インフォメッセージ（操作後トースト）
   ============================================================ */
.info-txt {
	background: rgba(255,255,255,0.96);
	backdrop-filter: blur(8px);
}
.info-txt span {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--c-primary);
	background: var(--c-surface);
	padding: 14px 28px;
	border-radius: var(--r-pill);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--c-border);
}
.info-txt.error span {
	color: var(--c-danger);
	border-color: var(--c-danger);
}

/* ============================================================
   テーブル
   ============================================================ */
.table {
	border: none;
	background: var(--c-surface);
	border-radius: var(--r-md);
	overflow: hidden;
}
.table th,
.table td {
	border: 1px solid var(--c-border);
	padding: 10px 8px;
}
.table thead th {
	background: var(--c-primary-pale);
	color: var(--c-primary);
	font-weight: 700;
}
.table tbody th { background: var(--c-surface-alt); }

/* ============================================================
   ローディング
   ============================================================ */
#loading-layer { background-color: rgba(255,255,255,0.85); backdrop-filter: blur(4px); }
#loading-layer svg { fill: var(--c-primary); }