/* =========================================================
	01. Google Font
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');


/* =========================================================
	02. Theme Variables
========================================================= */
:root
{
	--primary:#f97316;
	--primary-dark:#ea580c;
	--bg:#f8fafc;
	--text:#1f2937;
}


/* =========================================================
	03. Reset / Base
========================================================= */
*
{
	box-sizing:border-box;

	-webkit-user-select:none;
	user-select:none;

	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:transparent;
}

body
{
	margin:0;
	font-family:'Sarabun', sans-serif;
	background:var(--bg);
	color:var(--text);
}


/* =========================================================
	04. Layout
========================================================= */
.page-content
{
	padding-top:60px;
	padding-bottom:30px;
}

.page-container
{
	padding:16px;
}


/* =========================================================
	05. Header
========================================================= */
.header
{
	position:fixed;
	top:0;
	left:0;
	width:100%;

	display:flex;
	align-items:center;

	padding:14px 16px;

	background:white;
	border-bottom:1px solid #eee;

	z-index:900;

	box-shadow:0 2px 10px rgba(0,0,0,0.04);
}

.logo
{
	height:32px;
	margin-right:10px;
}


/* =========================================================
	06. Hero
========================================================= */
.hero
{
	position:relative;
	overflow:hidden;

	background:
		linear-gradient(
			135deg, var(--primary), var(--primary-dark)
		);

	color:white;

	padding:24px 24px;

	border-bottom-left-radius:18px;
	border-bottom-right-radius:18px;

	box-shadow:
		0 8px 24px rgba(249,115,22,0.25),
		inset 0 1px 0 rgba(255,255,255,0.15);
}

/* ลำแสงพุ่งเฉียง */
.hero::before
{
	content:'';

	position:absolute;

	top:-120px;
	right:-120px;

	width:340px;
	height:340px;

	background:radial-gradient(
		circle,
		rgba(255,255,255,0.28) 0%,
		rgba(255,255,255,0.10) 30%,
		transparent 70%
	);

	transform:rotate(-18deg);

	pointer-events:none;
}

.hero h2
{
	margin:0;
	font-size:28px;
	font-weight:700;
}

.hero p
{
	margin-top:8px;
	opacity:.92;
	font-size:15px;
}


/* =========================================================
	07. Card
========================================================= */
.card
{
	background:white;
	border-radius:14px;
	padding:16px;
	margin-bottom:12px;

	box-shadow:0 4px 10px rgba(0,0,0,0.05);
}


/* =========================================================
	08. Button
========================================================= */
.btn
{
	padding:12px;

	border-radius:10px;

	text-align:center;
	font-weight:600;

	cursor:pointer;
}

.btn-primary
{
	background:var(--primary);
	color:white;
}


/* =========================================================
	09. Bottom Bar
========================================================= */
.bottom-bar
{
	position:fixed;
	bottom:0;

	width:100%;

	display:flex;

	background:white;
	border-top:1px solid #eee;
}

.bottom-bar div
{
	flex:1;

	text-align:center;

	padding:10px;
}


/* =========================================================
	10. Sidebar
========================================================= */
.sidebar
{
	position:fixed;
	top:0;
	left:0;

	width:280px;
	height:100%;

	background:white;

	transform:translateX(-100%);
	transition:transform .3s ease;

	z-index:1000;

	box-shadow:4px 0 25px rgba(0,0,0,0.12);

	display:flex;
	flex-direction:column;

	overflow:hidden;
	
	border-top-right-radius:18px;
	border-bottom-right-radius:18px;
}

.sidebar.active
{
	transform:translateX(0);
}

.sidebar-overlay
{
	position:fixed;
	top:0;
	left:0;

	width:100%;
	height:100%;

	background:rgba(0,0,0,0.35);

	opacity:0;
	visibility:hidden;

	transition:.3s;

	z-index:999;
}

.sidebar-overlay.active
{
	opacity:1;
	visibility:visible;
}

.sidebar-header
{
	display:flex;
	align-items:center;
	justify-content:space-between;

	padding:18px 20px;

	background:linear-gradient(
		135deg,
		var(--primary),
		var(--primary-dark)
	);

	color:white;
}

.sidebar-title
{
	font-size:20px;
	font-weight:700;
}

.sidebar-close
{
	font-size:20px;
	cursor:pointer;
	opacity:.9;
}

.sidebar-menu
{
	padding:12px;
	flex:1;
	overflow:auto;
}

.sidebar-link
{
	text-decoration:none;
	color:inherit;
	display:block;
}

.sidebar-item
{
	display:flex;
	align-items:center;
	
	cursor:pointer;
	user-select:none;

	padding:10px 14px;

	border-radius:14px;

	margin-bottom:8px;

	cursor:pointer;

	transition:.2s;
}

.sidebar-item:hover
{
	background:#fff7ed;
	transform:translateX(4px);
}

.sidebar-item.active
{
	background:#ffedd5;
	color:var(--primary-dark);
	font-weight:600;
}

.sidebar-icon
{
	width:36px;
	font-size:20px;
	text-align:center;
}

.sidebar-text
{
	font-size:15px;
}

.sidebar-menu hr
{
	border:none;

	height:1px;

	margin:18px 16px;

	background:linear-gradient(
		to right,
		transparent 0%,
		rgba(0,0,0,0.08) 15%,
		rgba(0,0,0,0.14) 50%,
		rgba(0,0,0,0.08) 85%,
		transparent 100%
	);
}

/* =========================================================
	11. Page Header
========================================================= */
.page-header
{
	margin-bottom:18px;
}

.page-title
{
	font-size:22px;
	font-weight:700;
}

.page-subtitle
{
	margin-top:6px;

	color:#6b7280;

	font-size:14px;
}


/* =========================================================
	12. Request Card / Detail Row
========================================================= */
.request-card
{
	padding:0;
	overflow:hidden;
}

.request-row
{
	display:flex;
	align-items:center;
	justify-content:space-between;

	padding:16px 18px;

	border-bottom:1px solid #f1f5f9;
}

.request-row:last-child
{
	border-bottom:none;
}

.request-label
{
	color:#64748b;

	font-size:14px;
}

.request-value
{
	font-weight:600;

	color:#0f172a;
}


/* =========================================================
	13. Status Badge
========================================================= */
.request-status
{
	padding:6px 12px;

	border-radius:999px;

	font-size:13px;
	font-weight:600;
}

.status-pending
{
	background:#fff7ed;
	color:#ea580c;
}

.status-success
{
	background:#dcfce7;
	color:#15803d;
}

.status-reject
{
	background:#fee2e2;
	color:#dc2626;
}


/* =========================================================
	14. Form Standard
========================================================= */
.form-section
{
	margin-top:20px;
}

.form-group
{
	margin-bottom:16px;
}

.form-label
{
	display:block;

	margin-bottom:8px;

	font-size:14px;
	font-weight:700;

	color:#334155;
}

.form-control
{
	width:100%;
	min-height:50px;

	padding:12px 14px;

	border:1px solid #e2e8f0;
	border-radius:14px;

	background:white;

	font-family:'Sarabun', sans-serif;
	font-size:16px;

	color:#0f172a;

	box-shadow:0 2px 8px rgba(15,23,42,0.03);

	transition:.2s;

	outline:none;
}

.form-control:focus
{
	border-color:#fb923c;

	box-shadow:0 0 0 4px rgba(249,115,22,0.12);
}

.form-control[readonly],
.form-display
{
	width:100%;
	min-height:50px;

	padding:12px 14px;

	border:1px solid #fed7aa;
	border-radius:14px;

	background:#fff7ed;

	font-size:16px;
	font-weight:600;

	color:#9a3412;

	display:flex;
	align-items:center;
}

.form-textarea
{
	min-height:96px;
	resize:vertical;
}

.form-hint
{
	margin-top:6px;

	font-size:13px;

	color:#64748b;
}

/* =========================================================
	15. Alert
========================================================= */

.alert
{
	padding:14px;
	border-radius:16px;
	margin-top:16px;
	margin-bottom:16px;
	display:none;
}

.alert-success
{
	background:#dcfce7;
	color:#166534;
}

.alert-warning
{
	background:#fff7ed;
	color:#9a3412;
}

.alert-danger
{
	background:#fee2e2;
	color:#991b1b;
}


/* =========================================================
	16. Consent Card
========================================================= */

.consent-card
{
	margin-top:20px;
	padding:16px;
	border-radius:18px;
	background:#fff7ed;
	border:1px solid #fed7aa;
}

.consent-title
{
	font-weight:700;
}

.consent-text
{
	margin-top:10px;
	line-height:1.7;
	font-size:14px;
}

.consent-check
{
	display:flex;
	align-items:flex-start;
	margin-top:16px;
}

.consent-check input
{
	margin-top:4px;
	margin-right:12px;
}


/* =========================================================
	17. Dialog / Modal
========================================================= */

.dialog-overlay
{
	display:none;
	position:fixed;
	top:0;
	left:0;

	width:100%;
	height:100%;

	background:rgba(0,0,0,0.45);

	z-index:2000;

	align-items:center;
	justify-content:center;

	padding:20px;
}

.dialog-overlay.active
{
	display:flex;
}

.dialog-box
{
	background:white;
	border-radius:24px;
	padding:24px;

	width:100%;
	max-width:360px;

	box-shadow:0 20px 40px rgba(0,0,0,0.18);
}

.dialog-title
{
	font-size:22px;
	font-weight:700;
	text-align:center;
}

.dialog-text
{
	margin-top:14px;
	text-align:center;
	line-height:1.7;
	color:#64748b;
}

.dialog-actions
{
	display:flex;
	gap:10px;
	margin-top:24px;
}

.dialog-actions .btn
{
	flex:1;
}

/* =========================================================
	18. Button Secondary
========================================================= */

.btn-secondary
{
	background:white;
	border:1px solid #e2e8f0;
	color:#0f172a;
}


/* =========================================================
	19. Stack Layout
========================================================= */

.stack-group
{
	margin-top:24px;

	display:flex;
	flex-direction:column;

	gap:12px;
}


/* =========================================================
	20. Spacing Utility
========================================================= */

.mt-20
{
	margin-top:20px;
}


/* =========================================================
	21. Dialog Icon
========================================================= */

.dialog-icon
{
	width:72px;
	height:72px;

	margin:auto;

	border-radius:22px;

	background:linear-gradient(
		135deg,
		var(--primary),
		var(--primary-dark)
	);

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:34px;

	color:white;

	box-shadow:
		0 10px 20px rgba(249,115,22,0.22);
}