/* ==========================================================================
   Dr.GOLF 予約システム - 管理画面スタイル
   カラーパレット: フェアウェイグリーン & サンドゴールド
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&family=Shippori+Mincho:wght@500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root {
	--green-900: #1b4332;
	--green-800: #2d6a4f;
	--green-700: #356e55;
	--green-600: #40916c;
	--green-400: #74c69d;
	--green-100: #d8f3dc;
	--gold:      #e9c46a;
	--gold-dark: #c9963b;
	--sand:      #f4e8c1;
	--ink:       #1a1a1a;
	--ink-2:     #4a4a4a;
	--muted:     #8a8a8a;
	--border:    #e2e5ea;
	--surface:   #ffffff;
	--bg:        #f5f8f6;
	--danger:    #c0392b;
	--warn:      #d97706;
	--info:      #2563eb;
	--shadow-sm: 0 2px 6px rgba(27, 67, 50, .08);
	--shadow-md: 0 6px 18px rgba(27, 67, 50, .12);
	--shadow-lg: 0 12px 32px rgba(27, 67, 50, .18);
	--radius:    10px;
	--radius-lg: 14px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: 'Inter', 'Noto Sans JP', 'Yu Gothic UI', sans-serif;
	color: var(--ink);
	background: #fafaf7;
	overflow-x: hidden;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "palt" 1;
}

body { padding-top: 64px; }

h1, h2, h3, h4 {
	color: var(--green-900);
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 0 0 .6em;
}

h1 { font-size: 28px; }
h2 {
	font-size: 22px;
	font-family: 'Cormorant Garamond', 'Shippori Mincho', 'Yu Mincho', serif;
	font-weight: 600;
	letter-spacing: .01em;
}
h3 { font-size: 16px; padding-bottom: 0; border-bottom: 0; margin-top: 1.5em; }
h4 { font-size: 14px; }

p { margin: .4em 0; }
a { color: var(--green-800); text-decoration: none; }
a:hover { color: var(--green-600); }

hr {
	border: 0;
	border-top: 1px dashed var(--green-400);
	margin: 1.2em 0;
}

/* ==========================================================================
   Main container
   ========================================================================== */

.topm {
	width: min(95%, 1180px);
	margin: 32px auto;
	padding: 32px 36px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(27, 67, 50, .04), 0 8px 24px rgba(27, 67, 50, .06);
	border: 1px solid rgba(27, 67, 50, .06);
	font-size: 14px;
}

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select, textarea,
.text1, .text2 {
	width: 100%;
	max-width: 100%;
	padding: 9px 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--ink);
	background: #fbfcfb;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	outline: 0;
	transition: border-color .15s, box-shadow .15s, background .15s;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

input[type="text"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, input[type="date"]:focus,
select:focus, textarea:focus,
.text1:focus, .text2:focus {
	border-color: var(--green-600);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(64, 145, 108, .15);
}

label {
	font-weight: 500;
	color: var(--ink-2);
	display: inline-block;
}

input[type="radio"],
input[type="checkbox"] {
	accent-color: var(--green-600);
	width: auto;
}

/* ==========================================================================
   Buttons (unified across admin)
   ========================================================================== */

.bt_sbmt,
button[type="submit"],
input[type="submit"],
input[type="button"],
.button0 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 22px;
	font-size: 13px;
	font-family: inherit;
	font-weight: 500;
	letter-spacing: .03em;
	color: #fff;
	background: #1b4332;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(27, 67, 50, .15);
	transition: background .15s, transform .1s;
	-webkit-appearance: none;
	appearance: none;
	margin: 3px 2px;
	text-decoration: none;
}

.bt_sbmt:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button0:hover {
	background: #2d6a4f;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(27, 67, 50, .18);
}

.bt_sbmt:active,
button[type="submit"]:active,
input[type="submit"]:active,
input[type="button"]:active {
	transform: translateY(1px);
}

/* dashboard large buttons on kanri_top */
.dash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin: 12px 0 24px;
}
.dash-grid input[type="button"] {
	width: 100%;
	padding: 18px 20px;
	font-size: 16px !important;
	text-align: left;
	justify-content: flex-start;
}

a.btn-gradient, a.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .03em;
	color: var(--green-900);
	background: #fff;
	border: 1px solid rgba(27, 67, 50, .2);
	border-radius: 8px;
	text-decoration: none;
	transition: background .15s, border-color .15s, transform .1s;
}
a.btn-gradient:hover, a.btn:hover {
	background: var(--green-900);
	border-color: var(--green-900);
	color: #fff;
	transform: translateY(-1px);
}

.btn_cent {
	text-align: center;
	margin: 20px 0;
}

/* ==========================================================================
   Tables
   ========================================================================== */

table {
	border-collapse: collapse;
	width: 100%;
	background: var(--surface);
	border-radius: var(--radius);
	overflow: hidden;
	margin: 12px 0;
	font-size: 14px;
}

.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius);
}

thead th {
	background: #f5f8f6;
	color: var(--green-900);
	padding: 11px 10px;
	font-weight: 600;
	text-align: center;
	letter-spacing: .05em;
	font-size: 11px;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(27, 67, 50, .1);
}

tbody td {
	padding: 10px;
	border-bottom: 1px solid rgba(27, 67, 50, .06);
	font-size: 13px;
}

tbody tr:hover {
	background: rgba(116, 198, 157, .04);
}

/* Calendar table */
table.calender_column {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border);
}

table.calender_column th,
table.calender_column td {
	padding: 8px 6px;
	text-align: center;
	border: 1px solid var(--border);
	vertical-align: middle;
}

table.calender_column thead tr,
table.calender_column tr.week_hd {
	background: var(--green-800);
	color: #fff;
	font-weight: 600;
}

table.calender_column tr.week0 { background-color: #fff1f1; }
table.calender_column tr.week0 td:first-child { color: #d94f4f; font-weight: 600; }
table.calender_column tr.week6 { background-color: #eef5ff; }
table.calender_column tr.week6 td:first-child { color: #3a7bd5; font-weight: 600; }

.yoyaku {
	color: var(--ink);
	border: 1px solid var(--border);
	padding: 8px 10px;
	font-size: 14px;
	background: linear-gradient(180deg, #fff 0%, #fafbf9 100%);
}

/* Auto-style inline form */
.auto-style1 {
	border: 2px solid var(--green-600) !important;
	background: var(--green-100) !important;
	text-align: center;
	padding: 10px;
	border-radius: 8px;
}
.auto-style2 {
	border: 1px solid var(--border) !important;
	text-align: left;
	padding: 8px 12px;
}
.auto-style3 {
	border: 1px solid var(--border) !important;
	background: #f5f8f6 !important;
	text-align: right;
	padding: 8px 12px;
	font-weight: 500;
	color: var(--ink-2);
}

/* ==========================================================================
   Waku (time slot) color tags — preserved for admin recognition
   Softened slightly to fit the green-theme palette
   ========================================================================== */

.w1  { padding: 2px; margin: 1px; font-size: 14px; color: #a0522d; }
.w2  { padding: 2px; margin: 1px; font-size: 14px; color: #3b5ab5; }
.w3  { padding: 2px; margin: 1px; font-size: 14px; color: var(--green-800); }
.w4  { padding: 2px; margin: 1px; font-size: 14px; color: #c2185b; }
.w5  { padding: 2px; margin: 1px; font-size: 14px; color: #7c3aed; }
.w6  { padding: 2px; margin: 1px; font-size: 14px; color: #0891b2; }
.w7  { padding: 2px; margin: 1px; font-size: 14px; color: #b45309; }
.w8  { padding: 2px; margin: 1px; font-size: 14px; color: #4d4d4d; }
.w9  { padding: 2px; margin: 1px; font-size: 14px; color: #a0522d; }
.w10 { padding: 2px; margin: 1px; font-size: 14px; color: #3b5ab5; }
.w11 { padding: 2px; margin: 1px; font-size: 14px; color: var(--green-800); }
.w12 { padding: 2px; margin: 1px; font-size: 14px; color: #c2185b; }
.w13 { padding: 2px; margin: 1px; font-size: 14px; color: #7c3aed; }
.w14 { padding: 2px; margin: 1px; font-size: 14px; color: #0891b2; }
.w15 { padding: 2px; margin: 1px; font-size: 14px; color: #b45309; }
.w16 { padding: 2px; margin: 1px; font-size: 14px; color: #4d4d4d; }
.w17 { padding: 2px; margin: 1px; font-size: 14px; color: #a0522d; }
.w18 { padding: 2px; margin: 1px; font-size: 14px; color: #3b5ab5; }
.w19 { padding: 2px; margin: 1px; font-size: 14px; color: var(--green-800); }
.w20 { padding: 2px; margin: 1px; font-size: 14px; color: #c2185b; }
.w21 { padding: 2px; margin: 1px; font-size: 14px; color: #7c3aed; }
.w22 { padding: 2px; margin: 1px; font-size: 14px; color: #0891b2; }
.w23 { padding: 2px; margin: 1px; font-size: 14px; color: #b45309; }
.w24 { padding: 2px; margin: 1px; font-size: 14px; color: #4d4d4d; }
.w25 { padding: 2px; margin: 1px; font-size: 14px; color: #a0522d; }
.w26 { padding: 2px; margin: 1px; font-size: 14px; color: #3b5ab5; }
.w27 { padding: 2px; margin: 1px; font-size: 14px; color: var(--green-800); }
.w28 { padding: 2px; margin: 1px; font-size: 14px; color: #c2185b; }
.w29 { padding: 2px; margin: 1px; font-size: 14px; color: #7c3aed; }
.w30 { padding: 2px; margin: 1px; font-size: 14px; color: #0891b2; }

/* Reservation status flags */
.flg1 { background: var(--green-100); }
.flg2 { background: #fef3c7; }
.flg3 { background: #fee2e2; }
.flg4 { background: #e0e7ff; }

.first-child, .last-child, .new_dy, .wls {
	padding: 4px 8px;
	font-size: 13px;
}

/* ==========================================================================
   Radio buttons (style kept for legacy but modernized)
   ========================================================================== */
.radio01, .radio02 {
	position: relative;
	display: inline-block;
	padding: 2px 6px 2px 26px;
	cursor: pointer;
}

/* ==========================================================================
   Misc
   ========================================================================== */
img { max-width: 100%; height: auto; vertical-align: middle; }

.is-hide { display: none; }

.fadeout-bg, .fadeout-loader {
	transition: opacity .8s ease .9s;
	opacity: 0;
	pointer-events: none;
}
#loader-bg {
	background: #fff; height: 100%; left: 0;
	position: fixed; top: 0; width: 100%; z-index: 100;
}
#loader {
	height: 120px; left: 50%; margin-left: -60px;
	margin-top: -60px; position: fixed; top: 50%; width: 120px;
}
#loader p { color: #454545; font-size: 10px; line-height: 1.4; text-align: center; }

#PageTopBtn {
	position: fixed;
	bottom: 20px; right: 20px;
	z-index: 9999;
	font-size: 13px;
}
#PageTopBtn a {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	text-decoration: none;
	color: #fff;
	background: var(--green-600);
	border-radius: 50%;
	box-shadow: var(--shadow-md);
	transition: background .15s, transform .15s;
}
#PageTopBtn a:hover {
	background: var(--green-800);
	transform: translateY(-2px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 900px) {
	body { padding-top: 55px; }
	.topm {
		width: 96%;
		margin: 10px auto;
		padding: 16px 14px;
		font-size: 14px;
	}
	h1 { font-size: 22px; }
	h2 { font-size: 19px; }
	h3 { font-size: 16px; }
	.yoyaku { padding: 4px 6px; font-size: 13px; }
	thead th { padding: 7px 4px; font-size: 13px; }
	tbody td { padding: 6px 4px; font-size: 13px; }
	.dash-grid { grid-template-columns: 1fr; gap: 10px; }
	.dash-grid input[type="button"] { padding: 14px 16px; font-size: 14px !important; }
	.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,
	.w11,.w12,.w13,.w14,.w15,.w16,.w17,.w18,.w19,.w20,
	.w21,.w22,.w23,.w24,.w25,.w26,.w27,.w28,.w29,.w30 {
		font-size: 12px;
	}
}