/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/*
 *= require rails_admin/rails_admin
*/
/*
 *= require custom
 */

/* --- Simple navbar and flash styles (responsive, minimal) --- */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #0f172a; /* slate-800 */
	color: #fff;
	z-index: 1000;
	box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.navbar-inner {
	max-width: 980px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
}
.brand-link { color: #fff; font-weight: 600; text-decoration: none; font-size: 18px; }
.nav-toggle { background: transparent; border: none; color: #fff; font-size: 20px; display: none; }
.nav-links { display: flex; gap: 12px; align-items: center; }
.nav-link { color: #fff; text-decoration: none; padding: 6px 8px; }
.nav-right { display: flex; gap: 8px; align-items: center; }
.nav-user { color: #cbd5e1; font-size: 14px; }
.logout-form { display: inline-block; margin-left: 8px; }

/* Dropdown menu styles */
.nav-dropdown {
	position: relative;
	display: inline-block;
}
.nav-dropdown-toggle {
	background: transparent;
	border: none;
	color: #fff;
	padding: 6px 12px;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 4px;
}
.nav-dropdown-toggle:hover {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
}
.nav-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #1e293b;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	margin-top: 4px;
	z-index: 1000;
	overflow: hidden;
}
.nav-dropdown.open .nav-dropdown-menu {
	display: block;
}
.nav-dropdown-item {
	display: block;
	padding: 10px 16px;
	color: #e2e8f0;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: background 0.2s;
}
.nav-dropdown-item:last-child {
	border-bottom: none;
}
.nav-dropdown-item:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}
.nav-dropdown-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
	margin: 8px 0;
}

/* Mobile: collapse nav into hidden panel */
@media (max-width: 768px) {
	.nav-toggle { display: inline-block; }
	.nav-links { display: none; position: absolute; top: 56px; left: 0; right: 0; background: #0b1220; flex-direction: column; padding: 8px 16px; }
	.nav-links.open { display: flex; }
}

/* main content padding to avoid being overlapped by fixed header */
.main-content { padding-top: 64px; max-width: 980px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

@media (max-width: 768px) {
	.main-content { padding-top: 56px; padding-left: 12px; padding-right: 12px; }
}

/* flash messages */
.flash { max-width: 980px; margin: 12px auto; padding: 0; border-radius: 6px; }
.flash-inner { padding: 10px; border-radius: 6px; }
.flash-notice .flash-inner { background: #ecfdf5; border: 1px solid #bbf7d0; color: #065f46; }
.flash-alert .flash-inner { background: #fff1f2; border: 1px solid #fecaca; color: #7f1d1d; }

/* Flash positioning & spacing (ensure visible below fixed header) */
.flash-container { margin: 12px auto; max-width: 960px; padding: 0 12px; }
.flash { padding: 10px 12px; border-radius: 6px; margin-bottom: 8px; }
.flash.notice { background: #ecfdf5; border: 1px solid #10b981; color:#065f46; }
.flash.alert  { background: #fef2f2; border: 1px solid #ef4444; color:#7f1d1d; }

/* --- Simple utility styles for admin imports and calc UI --- */
.card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 14px; margin: 8px 0; }
.muted { color: #6b7280; font-size: 0.9em; }
.help-box { border: 1px solid #e5e7eb; background: #fafafa; padding: 10px; border-radius: 8px; }
.btn { display:inline-block; padding: 6px 10px; border-radius:6px; border:1px solid transparent; background:#f3f4f6; color:#111827; cursor:pointer; }
.btn-primary { background:#0f172a; color:#fff; border-color:transparent; }
.btn-danger { background:#dc2626; color:#fff; }
.btn-ghost { background:transparent; border:1px solid #e5e7eb; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:0.85em; }
.badge--on { background:#10b981; color:#fff; }
.badge--off { background:#9ca3af; color:#fff; }

/* Alert / notice banners used by calculator */
.notice-banner { background: #ecfdf5; border: 1px solid #bbf7d0; color:#065f46; padding: 10px; border-radius:6px; }
.alert-banner { background: #fee2e2; border: 1px solid #fecaca; color:#b91c1c; padding: 10px; border-radius:6px; }

.kbd { background:#111827; color:#fff; padding:2px 6px; border-radius:4px; font-size:0.85em; }

/* レスポンシブ対応 */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

table {
	font-size: clamp(0.8em, 2.5vw, 1em);
}

/* ボタンのタップ領域を確保 */
button, .btn, a {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* フォーム要素のレスポンシブ対応 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
	font-size: 16px; /* iOSのズーム防止 */
	max-width: 100%;
}

@media (max-width: 768px) {
	body {
		font-size: 14px;
	}
	
	h1 {
		font-size: 1.5em;
	}
	
	h2 {
		font-size: 1.3em;
	}
	
	h3 {
		font-size: 1.1em;
	}
	
	/* テーブルのスクロールヒント */
	.table-wrapper {
		position: relative;
	}
	
	.table-wrapper::after {
		content: '→';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 8px;
		border-radius: 4px 0 0 4px;
		opacity: 0.7;
		pointer-events: none;
	}

	/* 座席定員グリッド: モバイルで1列に */
	.seat-capacity-grid {
		grid-template-columns: 1fr !important;
	}

	/* ダッシュボード: サマリーカードをモバイルで縦並びに */
	.summary-cards {
		flex-direction: column !important;
	}
	.summary-cards .card {
		min-width: unset !important;
	}
}