/* Library Management System - Base Styles */

/* CSS Variables */
:root{
	--bg:#0f172a;
	--panel:#111827;
	--muted:#374151;
	--text:#e5e7eb;
	/* Slightly brighter dim text for better readability across all pages */
	--text-dim:#cbd5e1;
	--brand:#6366f1;
	--ok:#22c55e;
	--warn:#f59e0b;
	--err:#ef4444;
	--gray:#6b7280;
	--chip:#1f2937;
	--color-available:#0b1a12;
	--color-confirmed:#2b0f13;
	--color-tentative:#241a05;
	--color-available-border:#14532d;
	--color-confirmed-border:#7f1d1d;
	--color-tentative-border:#854d0e;
}

/* Base Styles */
*{box-sizing:border-box}
html{
	height: 100%;
	overflow-y: scroll; /* Always show vertical scrollbar to prevent layout shift */
}
body{
	margin:0;
	background:linear-gradient(180deg, #0b1220, #0a1020);
	color:var(--text);
	font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
	overflow-x: hidden; /* Prevent horizontal scrollbar on body */
	min-height: 100%; /* Allow body to grow beyond viewport for scrolling */
	width: 100%;
	max-width: 100vw;
	box-sizing: border-box;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}

/* Layout */
.container{
	display:grid;
	grid-template-rows:auto 1fr;
	min-height:100vh;
}

header{
	background:rgba(17,24,39,.9);
	backdrop-filter:saturate(150%) blur(6px);
	border-bottom:1px solid #1f2937;
	padding:10px 16px;
	display:flex;
	align-items:center;
	gap:12px;
	justify-content:space-between;
	position:relative;
	overflow: visible !important; /* Ensure all header children are visible */
	min-width: 0; /* Allow flex items to shrink if needed */
	width: 100%;
	max-width: 100vw;
	box-sizing: border-box;
	z-index: 1000; /* Ensure header is above content */
}

/* Ensure header children align properly */
header > * {
	display: flex;
	align-items: center;
}

.brand{display:flex;align-items:center;gap:10px}
.logo{
	width:28px;height:28px;border-radius:8px;
	background:conic-gradient(from 210deg at 50% 50%, #6366f1, #22c55e, #f59e0b, #ef4444, #6366f1);
	box-shadow:0 0 14px rgba(99,102,241,.35) inset, 0 0 32px rgba(99,102,241,.12);
}
.brand h1{font-size:16px;margin:0;font-weight:650;letter-spacing:.2px}

nav{
	display:flex;
	gap:8px;
	align-items:center;
	flex-wrap:wrap;
	min-width:0;
	flex-shrink:1;
	overflow:visible !important;
	max-width:100%;
	position:relative;
	z-index:100;
}
nav .tab{
	padding:8px 12px;border-radius:8px;background:transparent;border:1px solid #273244;color:var(--text-dim);
	font-size:14px;
	line-height:1.4;
	display:flex;
	align-items:center;
	justify-content:center;
}
nav .tab.active{background:#1b2435;color:var(--text);border-color:#334155}
nav .tab:hover{border-color:#3b82f6;color:#e2e8f0}

/* Notification bell button - matches nav tab styling */
.notification-bell {
	padding: 8px 12px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid #273244;
	color: var(--text-dim);
	font-size: 14px;
	line-height: 1.4;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.notification-bell:hover {
	border-color: #3b82f6;
	color: #e2e8f0;
}

.role-chip{background:var(--chip);padding:6px 10px;border-radius:999px;border:1px solid #273244;color:var(--text-dim);font-size:13px;line-height:1.4;display:flex;align-items:center}

/* Logout button - now inside nav, aligned with role badge */
nav .btn-logout,
header .btn-logout,
.btn-logout,
nav a.btn-logout,
header a.btn-logout,
a.btn-logout,
#logoutBtn,
a#logoutBtn {
	padding: 8px 12px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid #273244;
	color: var(--text-dim);
	font-size: 14px;
	line-height: 1.4;
	display: flex !important; /* Ensure it's always visible */
	align-items: center;
	justify-content: center;
	margin-left: -2px;
	flex-shrink: 0 !important; /* Never shrink */
	visibility: visible !important; /* Ensure visibility */
	opacity: 1 !important; /* Ensure opacity */
	position: relative !important; /* Ensure positioning */
	z-index: 100 !important; /* Ensure it's above other elements */
	text-decoration: none; /* Remove underline for <a> tags */
}

.btn-logout:hover {
	border-color: #3b82f6;
	color: #e2e8f0;
}

/* Desktop: show text, hide icon */
.btn-logout::before {
	content: none;
}

/* Mobile: icon only (handled in responsive.css) */

main{padding:16px;display:grid;grid-template-columns:240px 1fr;gap:16px}
.sidebar{
	background:var(--panel);border:1px solid #1f2937;border-radius:12px;padding:12px;position:sticky;top:12px;height:fit-content
}
.sidebar h3{margin:6px 8px 12px;font-size:13px;color:var(--text-dim);font-weight:600;letter-spacing:.3px}
.sidebar .menu{display:grid;gap:6px}
.sidebar .menu button{
	text-align:left;background:#0f172a;border:1px solid #1f2937;color:#cbd5e1;padding:10px;border-radius:10px;cursor:pointer
}
.sidebar .menu button.active{border-color:#3b82f6;color:#e2e8f0;background:#0b1324}

.content{
	background:var(--panel);border:1px solid #1f2937;border-radius:12px;padding:14px;min-height:70vh;overflow:visible
}

/* Components */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
.toolbar input, .toolbar select{
	background:#0b1220;border:1px solid #1f2937;border-radius:8px;padding:8px 10px;color:#e5e7eb;min-width:140px
}

.btn{
	background:linear-gradient(180deg,#334155,#1f2937);color:#e5e7eb;border:1px solid #334155;border-radius:8px;
	padding:8px 12px;cursor:pointer;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	line-height:1.4;
	font-size:14px;
	vertical-align:baseline;
}
/* Override .btn defaults for logout button to match nav tabs exactly */
header .btn-logout.btn,
header .btn-logout,
header a.btn-logout,
nav .btn-logout,
nav a.btn-logout {
	display: flex !important;
	vertical-align: baseline;
	/* Remove any button-specific margins/padding that might affect alignment */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	/* Match nav tab height calculation */
	height: auto;
	min-height: auto;
	visibility: visible !important;
	opacity: 1 !important;
}
.btn.primary{background:linear-gradient(180deg,#4f46e5,#4338ca);border-color:#6366f1}
.btn.warn{background:linear-gradient(180deg,#f59e0b,#b45309);border-color:#f59e0b}
.btn.ghost{background:transparent;border-color:#334155}
/* Override ghost border color for logout button to match nav tabs */
header .btn-logout.ghost,
header a.btn-logout.ghost,
nav .btn-logout.ghost,
nav a.btn-logout.ghost,
#logoutBtn.ghost,
a#logoutBtn.ghost {
	border-color: #273244;
}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* Seat Grid - Use CSS variables for dynamic color configuration */
.cell{min-width:80px;cursor:pointer}
.cell.available{
	background:var(--color-available, #0b1a12);
	border-color:var(--color-available-border, #064e3b);
}
.cell.confirmed{
	background:var(--color-confirmed, #2b0f13);
	border-color:var(--color-confirmed-border, #7f1d1d);
	color:#fee2e2;
}
.cell.tentative{
	background:var(--color-tentative, #241a05);
	border-color:var(--color-tentative-border, #854d0e);
	color:#fde68a;
}
.cell.gray{background:#111827;color:#6b7280}

/* Legend */
.legend{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
.legend .item{display:flex;align-items:center;gap:6px;color:#cbd5e1}
.legend .sw{width:14px;height:14px;border-radius:4px;border:1px solid #1f2937}
.sw.avail{background:#0b1a12;border-color:#14532d}
.sw.conf{background:#2b0f13;border-color:#7f1d1d}
.sw.ten{background:#241a05;border-color:#854d0e}
.sw.gray{background:#111827;border-color:#374151}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:20px}
.card{background:#0b1220;border:1px solid #1f2937;border-radius:12px;padding:16px;min-height:200px}
.card h4{margin:0 0 12px 0;color:#e2e8f0;font-size:16px;font-weight:600}
.card table{width:100%;margin-top:16px;border-collapse:collapse;table-layout:auto}
.card table th,
.card table td{padding:8px 12px;text-align:left;border-bottom:1px solid #1f2937;white-space:normal;word-wrap:break-word}
.card table th{background:#0d1629;color:#cbd5e1;font-weight:600;position:sticky;top:0;white-space:normal}
.badge{padding:4px 8px;border-radius:999px;background:#0f172a;border:1px solid #1f2937;color:#cbd5e1}

/* Modal Styles */
.modal-backdrop{
	position:fixed;inset:0;background:rgba(2,6,23,.7);backdrop-filter:blur(4px);
	display:flex;align-items:center;justify-content:center;z-index:1000;
	animation:fadeIn 0.2s ease;
}
.modal-backdrop.hidden{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal{
	position:relative;z-index:1001;
	background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	border:1px solid #334155;border-radius:16px;
	box-shadow:0 25px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
	max-width:90vw;max-height:90vh;overflow:hidden;min-width:500px;
	display:flex;flex-direction:column;
	animation:slideUp 0.3s ease;
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

.modal header{
	padding:20px 24px;border-bottom:1px solid #334155;
	background:linear-gradient(135deg, #1e293b, #334155);
	border-radius:16px 16px 0 0;
	display:flex;justify-content:space-between;align-items:center;
	position:relative;
}
.modal header strong{
	color:#e2e8f0;font-size:20px;font-weight:600;
	letter-spacing:-0.02em;
}

.modal-close-btn{
	background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);
	color:#ef4444;width:32px;height:32px;border-radius:8px;
	font-size:24px;line-height:1;cursor:pointer;display:flex;
	align-items:center;justify-content:center;transition:all 0.2s ease;
	padding:0;margin:0;
}
.modal-close-btn:hover{
	background:rgba(239,68,68,0.2);border-color:rgba(239,68,68,0.5);
	transform:scale(1.1);
}
.modal-close-btn:active{transform:scale(0.95)}

.modal .body{
	padding:24px;display:grid;gap:16px;
	overflow-y:auto;flex:1;
	background:#0f172a;
}

.grid-form{
	display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
.grid-form .full{grid-column:1/-1}

.field{
	display:grid;gap:8px;
	align-content: start; /* Align grid items to start to prevent stretching */
}
.field label{
	color:#cbd5e1;font-size:13px;font-weight:500;
	text-transform:uppercase;letter-spacing:0.5px;
}
.field input,.field select,.field textarea{
	background:#1e293b;border:1px solid #475569;border-radius:10px;
	color:#e5e7eb;padding:12px 16px;font-size:14px;
	transition:all 0.2s ease;width:100%;box-sizing:border-box;
	height:44px; /* Ensure consistent height for all inputs */
	line-height:1.5;
}
.field input[type="date"]{
	height:44px; /* Match other inputs */
	padding:12px 16px; /* Ensure consistent padding */
	font-size:14px; /* Match other inputs */
	appearance:none; /* Remove browser-specific styling */
	-webkit-appearance:none;
	-moz-appearance:none;
}
.field input:focus,.field select:focus,.field textarea:focus{
	outline:none;border-color:#3b82f6;
	box-shadow:0 0 0 3px rgba(59,130,246,0.1);
	background:#1e293b;
}
.field input:hover,.field select:hover,.field textarea:hover{
	border-color:#64748b;
}

/* Field Error Styling */
.field.error input,
.field.error select,
.field.error textarea {
	border-color: #ef4444 !important;
	background: rgba(239, 68, 68, 0.05) !important;
	color: #e5e7eb !important;
}

/* Ensure select dropdown options have dark background when field has error */
.field.error select option {
	background: #1e293b !important;
	color: #e5e7eb !important;
}

/* Style select dropdown when open (for error state) */
.field.error select:focus {
	background: rgba(239, 68, 68, 0.05) !important;
	border-color: #ef4444 !important;
}

/* Ensure select dropdown maintains dark theme when error is active */
.field.error select {
	background-color: rgba(239, 68, 68, 0.05) !important;
}

.field-error {
	color: #ef4444;
	font-size: 12px;
	margin-top: 4px;
	display: flex;
	align-items: flex-start;
	gap: 4px;
	animation: slideDown 0.2s ease;
	line-height: 1.4;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
}

.field-error::before {
	content: "⚠";
	font-size: 14px;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.modal footer{
	display:flex;gap:12px;justify-content:flex-end;
	padding:16px 24px;border-top:1px solid #334155;
	background:linear-gradient(135deg, #0f172a, #1e293b);
	border-radius:0 0 16px 16px;
}

/* Login Page */
.login-container{
	min-height:100vh;
	background:linear-gradient(135deg, #0b1220 0%, #1e293b 100%);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
}
.login-container.hidden { display: none !important; }
.login{
	width:100%;
	max-width:420px;
	background:#0b1220;
	border:1px solid #1f2937;
	border-radius:16px;
	padding:32px;
	box-shadow:0 25px 50px rgba(0,0,0,.5);
}
.login h2{ margin:0 0 24px; font-size:28px; font-weight:700; text-align:center; color:#e2e8f0; }
.login .brand-logo{
	width:64px;height:64px;margin:0 auto 24px;border-radius:16px;
	background:conic-gradient(from 210deg at 50% 50%, #6366f1, #22c55e, #f59e0b, #ef4444, #6366f1);
	box-shadow:0 0 32px rgba(99,102,241,.4);
}
.small{font-size:14px;color:#9ca3af;text-align:center;margin:16px 0}
.login .field{margin-bottom:20px}
.login .field label{display:block;margin-bottom:8px;font-weight:600;color:#cbd5e1}
.login .field input, .login .field select{
	width:100%; padding:12px 16px; font-size:16px; border-radius:8px; border:2px solid #1f2937;
	background:#0f172a; color:#e5e7eb; transition:all 0.2s;
}
.login .field input:focus, .login .field select:focus{
	outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.1);
}
.login .btn.primary{ width:100%; padding:14px; font-size:16px; font-weight:600; margin-top:8px; }

/* Section Visibility Fix */
#students.hidden, #userManagement.hidden, #permissions.hidden, #users.hidden, #ratePlans.hidden,
#studentSubscriptions.hidden, #paymentHistory.hidden, #dueFeeTracking.hidden, #dashboard.hidden,
#seatViewer.hidden, #seatAvailability.hidden, #seatConfiguration.hidden, #reports.hidden { display: none !important; }
.hidden { display: none !important; }

/* Enhanced Dashboard & Reports UI/UX Improvements */
#dashboard { padding:24px; background:linear-gradient(135deg,#0f172a 0%, #1e293b 100%); border-radius:12px; margin:16px; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
#dashboard .toolbar { background:rgba(15,23,42,0.8); backdrop-filter:blur(10px); border:1px solid #334155; border-radius:12px; padding:16px 20px; margin-bottom:24px; display:flex; gap:12px; align-items:center; box-shadow:0 4px 16px rgba(0,0,0,0.2); }
#dashboard .toolbar .btn { padding:12px 24px; font-weight:600; border-radius:8px; transition:all 0.3s ease; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
#dashboard .toolbar .btn:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.25); }

/* Dashboard Cards */
#dashCards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-bottom:32px; }
#dashCards .card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#3b82f6,#8b5cf6,#06b6d4); border-radius:16px 16px 0 0; }
#dashCards .card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.3); border-color:#64748b; }
#dashCards .card h4 { color:#cbd5e1; font-size:14px; font-weight:500; margin-bottom:12px; text-transform:uppercase; letter-spacing:.5px; }
#dashCards .card > div[style*="font-size:22px"] { font-size:32px!important; font-weight:700!important; color:#f1f5f9!important; background:linear-gradient(135deg,#3b82f6,#8b5cf6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Recent Activity */
#dashboard > h3 { color:#f1f5f9; font-size:20px; font-weight:600; margin-bottom:16px; padding-left:16px; border-left:4px solid #3b82f6; background:rgba(59,130,246,0.1); padding:12px 16px; border-radius:8px; }
#activityTable { background:rgba(30,41,59,0.8); backdrop-filter:blur(10px); border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.2); }
#activityTable th { background:linear-gradient(135deg,#1e293b,#334155); color:#e2e8f0; font-weight:600; padding:16px; border-bottom:2px solid #475569; }
#activityTable td { padding:14px 16px; border-bottom:1px solid #374151; color:#cbd5e1; transition:background-color .2s ease; }
#activityTable tr:hover td { background:rgba(59,130,246,.1); }

/* Reports Section */
/* Reports section - only apply special styling when NOT showing submenu-content */
#reports .submenu-content { padding: 40px 20px; }
#reports:not(:has(.submenu-content)) { padding:24px; background:linear-gradient(135deg,#0f172a 0%, #1e293b 100%); border-radius:12px; margin:16px; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
#reports .toolbar { background:rgba(15,23,42,0.9); backdrop-filter:blur(15px); border:1px solid #334155; border-radius:12px; padding:20px; margin-bottom:24px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; box-shadow:0 6px 20px rgba(0,0,0,0.25); }
#reports .toolbar select, #reports .toolbar input { background:rgba(30,41,59,0.8); border:1px solid #475569; border-radius:8px; padding:10px 14px; color:#e2e8f0; font-size:14px; transition:all 0.3s ease; }
#reports .toolbar select:focus, #reports .toolbar input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.1); outline:none; }
#reports .toolbar .btn { padding:10px 20px; font-weight:600; border-radius:8px; transition:all 0.3s ease; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
#reports .toolbar .btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.2); }

/* Report Cards - Match Dashboard Styling */
#reportCards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:32px; }
#reportCards .card { background:#1f2937; padding:8px; border-radius:8px; text-align:center; position:relative; overflow:hidden; border:2px solid transparent; transition:all 0.3s ease; min-height:60px; }
#reportCards .card::before { content:''; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; background:linear-gradient(45deg,#60a5fa,#34d399,#fbbf24,#f87171,#60a5fa); background-size:400% 400%; border-radius:10px; z-index:-1; animation:movingBorder 3s ease-in-out infinite; opacity:0; transition:opacity 0.3s ease; }
#reportCards .card:hover::before { opacity:1; }
@keyframes movingBorder { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
#reportCards .card h4 { margin:0 0 4px 0; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; color:#cbd5e1; }
#reportCards .card .value { font-size:18px; font-weight:bold; color:#e5e7eb; margin:0; line-height:1.2; }
#reportCards .card:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.2); }

#reports h4 { color:#f1f5f9; font-size:18px; font-weight:600; margin:24px 0 16px; padding-left:16px; border-left:4px solid #10b981; background:rgba(16,185,129,0.1); padding:12px 16px; border-radius:8px; }

/* Loading & Scrollbars */
.loading-shimmer { background:linear-gradient(90deg,#1e293b 25%,#334155 50%,#1e293b 75%); background-size:200% 100%; animation:shimmer 2s infinite; }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
#dashboard::-webkit-scrollbar, #reports::-webkit-scrollbar { width:8px; }
#dashboard::-webkit-scrollbar-track, #reports::-webkit-scrollbar-track { background:rgba(30,41,59,0.5); }
#dashboard::-webkit-scrollbar-thumb, #reports::-webkit-scrollbar-thumb { background:rgba(100,116,139,0.8); border-radius:4px; }
#dashboard::-webkit-scrollbar-thumb:hover, #reports::-webkit-scrollbar-thumb:hover { background:rgba(100,116,139,1); }

/* Chips */
.chips{display:flex;gap:6px;flex-wrap:wrap}