/* =========================================================================
   Aayum Attendance - Admin Panel Theme
   Subtle / muted orange palette, minimal & professional.
   ========================================================================= */

:root {
	--brand-primary: #F59E0B;      /* soft amber */
	--brand-primary-dark: #D97C09; /* hover state */
	--brand-secondary: #FDBA74;    /* light apricot */
	--brand-bg: #FFF8F1;           /* page background */
	--brand-card: #FFFFFF;
	--brand-text: #3F3226;
	--brand-muted: #8A7A68;
	--brand-border: #F1E4D4;
	--brand-success: #4C9A6A;
	--brand-danger: #D9534F;
	--brand-info: #4C8FB0;
}

body {
	background-color: var(--brand-bg);
	color: var(--brand-text);
	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.925rem;
}

a { color: var(--brand-primary-dark); }
a:hover { color: var(--brand-primary); }

/* ---------------------------------------------------------------- Layout */

.app-wrapper {
	display: flex;
	min-height: 100vh;
}

.sidebar {
	width: 250px;
	flex-shrink: 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #FFF3E4 100%);
	border-right: 1px solid var(--brand-border);
	min-height: 100vh;
	position: sticky;
	top: 0;
	align-self: flex-start;
	max-height: 100vh;
	overflow-y: auto;
}

.sidebar .brand {
	padding: 1.25rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-bottom: 1px solid var(--brand-border);
}

.sidebar .brand .icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--brand-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}

.sidebar .brand .name {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--brand-text);
	line-height: 1.1;
}

.sidebar .brand .name small {
	display: block;
	font-weight: 400;
	font-size: 0.7rem;
	color: var(--brand-muted);
}

.sidebar-nav {
	list-style: none;
	margin: 0;
	padding: 0.75rem;
}

.sidebar-nav li { margin-bottom: 0.2rem; }

.sidebar-nav a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0.9rem;
	border-radius: 10px;
	color: var(--brand-text);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	transition: background-color .15s ease, color .15s ease;
}

.sidebar-nav a i { font-size: 1.05rem; width: 20px; text-align: center; color: var(--brand-muted); }

.sidebar-nav a:hover {
	background-color: #FFEFD9;
	color: var(--brand-primary-dark);
}

.sidebar-nav a:hover i { color: var(--brand-primary-dark); }

.sidebar-nav a.active {
	background-color: var(--brand-primary);
	color: #fff;
	box-shadow: 0 2px 6px rgba(245, 158, 11, .35);
}

.sidebar-nav a.active i { color: #fff; }

.main-content {
	flex-grow: 1;
	min-width: 0;
}

.topbar {
	background: var(--brand-card);
	border-bottom: 1px solid var(--brand-border);
	padding: 0.85rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 10;
}

.topbar .page-title {
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0;
}

.content-area {
	padding: 1.5rem;
}

footer.app-footer {
	padding: 1rem 1.5rem;
	color: var(--brand-muted);
	font-size: 0.8rem;
	text-align: center;
}

/* ---------------------------------------------------------------- Cards */

.card {
	background: var(--brand-card);
	border: 1px solid var(--brand-border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(120, 90, 40, 0.06);
}

.card-header {
	background: transparent;
	border-bottom: 1px solid var(--brand-border);
	font-weight: 600;
	border-top-left-radius: 14px !important;
	border-top-right-radius: 14px !important;
}

.stat-card {
	border-radius: 16px;
	padding: 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 100%;
}

.stat-card .stat-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: #fff;
	background: var(--brand-primary);
	flex-shrink: 0;
}

.stat-card .stat-value {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--brand-text);
}

.stat-card .stat-label {
	color: var(--brand-muted);
	font-size: 0.8rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.stat-card.icon-blue .stat-icon { background: var(--brand-info); }
.stat-card.icon-green .stat-icon { background: var(--brand-success); }
.stat-card.icon-red .stat-icon { background: var(--brand-danger); }
.stat-card.icon-orange .stat-icon { background: var(--brand-primary); }

/* -------------------------------------------------------------- Buttons */

.btn {
	border-radius: 10px;
	font-weight: 500;
}

.btn-primary {
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
	color: #fff;
}

.btn-primary:hover, .btn-primary:focus {
	background-color: var(--brand-primary-dark);
	border-color: var(--brand-primary-dark);
}

.btn-outline-primary {
	color: var(--brand-primary-dark);
	border-color: var(--brand-secondary);
}

.btn-outline-primary:hover {
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
}

.btn-soft {
	background-color: #FFF1DC;
	color: var(--brand-primary-dark);
	border: 1px solid var(--brand-secondary);
}

.btn-soft:hover { background-color: var(--brand-secondary); color: #6b4300; }

/* --------------------------------------------------------------- Tables */

.table-responsive { border-radius: 12px; }

table.table {
	margin-bottom: 0;
}

.table thead th {
	background-color: #FFF3E4;
	color: var(--brand-text);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-weight: 700;
	border-bottom: none;
	white-space: nowrap;
}

.table tbody tr:hover { background-color: #FFFBF5; }

.table td, .table th { vertical-align: middle; padding: 0.75rem 0.9rem; }

/* --------------------------------------------------------------- Badges */

.badge-status {
	font-weight: 600;
	font-size: 0.72rem;
	padding: 0.4em 0.7em;
	border-radius: 20px;
}

.badge-active { background-color: #E4F3E9; color: #2F7A4C; }
.badge-inactive { background-color: #F5E6E6; color: #B23A3A; }
.badge-public { background-color: #FDE9D0; color: #B5680A; }
.badge-optional { background-color: #E7EEF6; color: #37628A; }

/* --------------------------------------------------------------- Forms */

.form-label { font-weight: 600; font-size: 0.85rem; }

.form-control, .form-select {
	border-radius: 10px;
	border-color: var(--brand-border);
}

.form-control:focus, .form-select:focus {
	border-color: var(--brand-primary);
	box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.15);
}

.input-group-text {
	background-color: #FFF3E4;
	border-color: var(--brand-border);
	color: var(--brand-primary-dark);
}

/* ------------------------------------------------------------ Breadcrumb */

.breadcrumb { margin-bottom: 0; background: transparent; padding: 0; font-size: 0.82rem; }
.breadcrumb-item.active { color: var(--brand-muted); }

/* ----------------------------------------------------------- Pagination */

.pagination .page-link {
	color: var(--brand-primary-dark);
	border-radius: 8px;
	margin: 0 2px;
	border-color: var(--brand-border);
}

.pagination .page-item.active .page-link {
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
}

/* ------------------------------------------------------------- Misc/util */

.text-brand { color: var(--brand-primary-dark) !important; }
.bg-brand-soft { background-color: #FFF3E4 !important; }
.rounded-14 { border-radius: 14px !important; }

.login-required-note { color: var(--brand-muted); font-size: 0.8rem; }

@media (max-width: 991.98px) {
	.sidebar {
		position: fixed;
		left: -260px;
		z-index: 1040;
		transition: left .2s ease;
		box-shadow: 0 0 20px rgba(0,0,0,.15);
	}
	.sidebar.show { left: 0; }
	.main-content { width: 100%; }
}

/* ------------------------------------------------------------ Print CSS */

@media print {
	.sidebar, .topbar, .no-print, footer.app-footer { display: none !important; }
	.main-content { width: 100% !important; }
	.content-area { padding: 0 !important; }
	.card { border: none; box-shadow: none; }
	body { background: #fff; }
}