/* =========================================================
   1. ROOT VARIABLES / THEME SETTINGS (Reduced Scale)
   ========================================================= */
:root{
	--primary:#16a34a;
	--accent:#f4c95d;
	--bg:#061611;
	--panel:#0c251c;
	--panel2:#123427;
	--text:#f4fff8;
	--muted:#a9c5b7;
	--border:#ffffff1c;
	--header:#081d16ee;
	--input:#ffffff0b;
	--notice-bg:#4b350f;
	--notice-text:#fff3c4;
	--scale:0.88;
	--marquee:24s;
}

/* =========================================================
   2. GLOBAL RESET & BASE ELEMENTS
   ========================================================= */
*{
	box-sizing:border-box;
}

html,
body{
	margin:0;
	/* -- min-height:100%; */
	font-family:Segoe UI,Arial,sans-serif;
}

body{
	background:radial-gradient(circle at 75% 0,#16a34a22,transparent 32%),var(--bg);
	color:var(--text);
	font-size:calc(13px * var(--scale));
	transition:.25s;
}

button,
input,
select,
textarea{
	font:inherit;
}

.hidden{
	display:none !important;
}

/* =========================================================
   3. HEADER SECTION
   ========================================================= */
.header{
	position:sticky;
	top:0;
	z-index:30;
	background:var(--header);
	backdrop-filter:blur(16px);
	border-bottom:1px solid var(--border);
}

.top{
	display:flex;
	align-items:center;
	gap:12px;
	max-width:1800px;
	margin:auto;
	padding:6px 16px;      /* Reduced from 12px 22px */
}

.logo{
	width:110px;           /* Reduced from 150px */
	height:42px;           /* Reduced from 58px */
	object-fit:contain;
	background:#fff;
	border-radius:8px;
	padding:3px;
}

.identity{
	flex:1;
	min-width:0;
}

.identity h1{
	margin:0;
	color:var(--primary);
	font-size:clamp(14px, 1.6vw, 22px); /* Scaled down */
}

.identity p{
	margin:2px 0 0;
	color:var(--muted);
	font-size:.65rem;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.actions{
	display:flex;
	gap:6px;
}

/* =========================================================
   4. BUTTONS & ICONS
   ========================================================= */
.icon{
	height:40px;
	min-width:40px;
	border-radius:11px;
	border:1px solid var(--border);
	background:#ffffff0d;
	color:var(--text);
	cursor:pointer;
}

.icon:hover,
.nav button:hover{
	background:#ffffff1c;
}

.btn{
	border:0;
	border-radius:11px;
	background:var(--primary);
	color:#fff;
	font-weight:800;
	padding:11px 16px;
	cursor:pointer;
}

.btn.secondary{
	background:#ffffff12;
	color:var(--text);
	border:1px solid var(--border);
}

.btn.danger{
	background:#dc2626;
}

/* =========================================================
   5. TOP NAVIGATION
   ========================================================= */
.nav{
	max-width:1800px;
	margin:auto;
	padding:0 16px 4px;    /* Reduced padding */
	display:flex;
	gap:6px;
	overflow:auto;
	height:38px;           /* Reduced from 50px */
	align-items:center;
}

.nav button{
	border:0;
	border-radius:8px;
	padding:6px 10px;      /* Reduced from 9px 13px */
	background:transparent;
	color:var(--text);
	font-weight:700;
	font-size:0.82rem;
	white-space:nowrap;
	cursor:pointer;
}

.nav button.active{
	background:var(--primary);
	color:#fff;
}

/* =========================================================
   6. PAGE LAYOUT
   ========================================================= */
.wrap{
	max-width:1800px;
	margin:auto;
	/* Top/Sides:8px, Bottom:46px clearance for bottom bar */
	padding:8px 16px 46px; 
}

.main-grid{
	/* Header (~90px) + Bottom Bar (40px) + Padding (~20px) = ~150px total offset */
	height:calc(100vh - 150px + 94px); 
	display:grid;
	grid-template-columns:28% 72%;
	gap:6px;
	overflow:hidden;
}

.side{
	display:flex;
	flex-direction:column;
	align-content:space-between;
	gap:6px;
	height:95%;
}

.page-title{
	margin:2px 0 20px;
}

.page-title h2{
	font-size:2rem;
	margin:0;
}

.grid{
	display:grid;
	gap:8px;
}

.grid4{
	grid-template-columns:repeat(4,1fr);
}

.grid2{
	grid-template-columns:repeat(2,1fr);
}

.form-row{
	display:grid;
	grid-template-columns:1fr auto;
	gap:10px;
}
/* =========================================================
   7. CARD COMPONENTS
   ========================================================= */
.card{
	background:linear-gradient(145deg,var(--panel),var(--panel2));
	border:1px solid var(--border);
	border-radius:12px;   /* Reduced from 18px */
	box-shadow:0 8px 20px #0003;
}

.tile{
	padding:20px;
}

.tile strong{
	font-size:1.6rem;
	color:var(--primary);
}

/* =========================================================
   8. CLOCK / PRAYER TIME PANEL
   ========================================================= */
.clock{
	text-align:center;
	padding:8px 12px;     /* Reduced from 20px */
}

.time{
	font-size:clamp(24px, 2.8vw, 38px); /* Reduced from 54px */
	font-weight:900;
	letter-spacing:-1px;
	line-height:1.1;
}

.prayer{
	display:flex;
	justify-content:space-between;
	padding:3px 8px;      /* Reduced from 8px 11px */
	margin:3px 0;
	border-radius:6px;
	font-size:0.82rem;
	background:#ffffff08;
}

.prayer.current{
	background:var(--primary);
	color:#fff;
}

.prayer.next{
	outline:1px solid var(--accent);
}

.count{
	padding:4px;          /* Reduced from 10px */
	text-align:center;
	border:1px solid #f4c95d66;
	border-radius:8px;
	color:var(--accent);
	font-weight:800;
	font-size:0.85rem;
}

.event{
	display:flex;
	justify-content:space-between;
	padding:4px 8px;      /* Reduced from 10px */
	background:#ffffff08;
	border-radius:8px;
	margin-top:2px;
	font-size:0.8rem;
}

/* =========================================================
   9. MEDIA SLIDER / TV DISPLAY
   ========================================================= */
.media{
	min-height:0;         /* Allows container to flex/shrink inside grid */
	height:100%;
	display:grid;
	place-items:center;
	overflow:hidden;
	position:relative;
}

.media img,
.media video{
	width:100%;
	height:100%;
	max-height:100%;
	object-fit:contain;
}

.caption{
	position:relative; 
	left:18px;
	right:18px;
	bottom:18px;
	padding:2px 8px;
	border-radius:10px;
}

.media-form{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
}

.media-thumb{
	width:90px;
	height:60px;
	object-fit:cover;
	border-radius:8px;
	background:#000;
}

.crop-canvas{
	display:block;
	width:min(100%,480px);
	aspect-ratio:1;
	margin:10px auto;
	border-radius:12px;
	background:#111;
	touch-action:none;
	cursor:move;
}

/* =========================================================
   10. MEMBERSHIP CARD
   ========================================================= */
.membership{
	max-width:900px;
	margin:20px auto;
	border-radius:24px;
	overflow:hidden;
	background:linear-gradient(145deg,#073b2b,#0d6b4a);
	color:#fff;
	box-shadow:0 22px 55px #0005;
}

.membership-head{
	display:flex;
	justify-content:space-between;
	padding:25px;
	background:linear-gradient(90deg,#0b7a53,#059669);
}

.membership-head h2{
	margin:4px 0;
}

.badge{
	background:var(--accent);
	color:#16281e;
	padding:8px 13px;
	border-radius:999px;
	height:max-content;
	font-weight:900;
}

.membership-body{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1px;
	background:#ffffff20;
}

.membership-body div{
	background:#073b2b;
	padding:16px;
}

.membership-body small{
	display:block;
	color:#cce9dd;
	margin-bottom:4px;
}

.membership footer{
	padding:13px 25px;
	color:#cce9dd;
	font-size:.75rem;
}

.membership-brand{
	display:flex;
	align-items:center;
	gap:14px;
}

.membership-logo{
	width:68px;
	height:68px;
	object-fit:contain;
	background:#fff;
	border-radius:10px;
	padding:4px;
}

.membership-logo.kariah{
	background:#fff;
}

.membership-logo.khairat{
	background:#fff;
}

/* =========================================================
   11. ORGANISATION CHART
   ========================================================= */
.org{
	grid-template-columns:repeat(4,1fr);
}

.person{
	text-align:center;
	padding:18px;
}

.person img,
.avatar{
	width:88px;
	height:88px;
	border-radius:50%;
	object-fit:cover;
	margin:auto;
	border:4px solid var(--primary);
}

.avatar{
	display:grid;
	place-items:center;
	background:var(--primary);
	font-weight:900;
	font-size:1.5rem;
}

.person h4{
	color:var(--accent);
	margin:10px 0 3px;
}

/* =========================================================
   12. ADMIN PANEL
   ========================================================= */
.tabs{
	display:flex;
	gap:6px;
	flex-wrap:wrap;
	margin-bottom:18px; 
}

.tabs button{
	padding:9px 12px;
	border-radius:9px;
	border:1px solid var(--border);
	background:#ffffff0b;
	color:var(--text);
	font-weight:700;
}

.tabs button.on{
	background:var(--primary);
}

.admin-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
}

.field{
	display:flex;
	flex-direction:column;
	gap:5px;
}

.full{
	grid-column:1/-1;
}

.list{
	display:grid;
	gap:8px;
	margin-top:12px;
}

.list-item{
	display:flex;
	gap:10px;
	align-items:center;
	justify-content:space-between;
	padding:10px;
	background:#ffffff09;
	border-radius:10px;
}

.notice{
	padding:12px;
	border-radius:10px;
	background:var(--notice-bg);
	border:1px solid #f59e0b99;
	color:var(--notice-text);
}

select.input option{
	background:var(--panel);
	color:var(--text);
}

.admin-subtabs{
	display:flex;
	gap:6px;
	flex-wrap:wrap;
	margin:10px 0;
}

.data-table{
	width:100%;
	border-collapse:collapse;
	min-width:900px;
}

.data-table th,
.data-table td{
	padding:9px;
	border-bottom:1px solid var(--border);
	text-align:left;
	vertical-align:top;
}

.member-results{
	overflow:auto;
	max-height:55vh;
}

.order-controls{
	display:flex;
	gap:5px;
}

.rich-editor{
	min-height:140px;
	padding:12px;
	border:1px solid var(--border);
	border-radius:10px;
	background:var(--input);
	color:var(--text); 
}

/* =========================================================
   13. MODAL WINDOWS
   ========================================================= */
.modal{
	position:fixed;
	inset:0;
	background:#000c;
	z-index:50;
	padding:18px;
	overflow:auto;
}

.modal-box{
	max-width:1100px;
	margin:10px auto;
	background:var(--panel);
	border:1px solid var(--border);
	border-radius:20px;
}

.modal-head{
	position:sticky;
	top:0;
	z-index:2;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:16px 20px;
	background:var(--panel);
	border-bottom:1px solid var(--border);
	border-radius:20px 20px 0 0;
}

.modal-body{
	padding:20px;
}

/* =========================================================
   14. PDF VIEWER
   ========================================================= */
.pdf-modal{
	position:fixed;
	top: 0%; 
	left: 50%; 
	transform: translate(-50%, 0%); 
	z-index:99;
	background:rgba(0,0,0,.65); 
	padding:0vh 20vw; 
	display:flex;
	align-items:center;
	justify-content:center;
}

.pdf-modal.hidden{
	display:none !important;
}

.pdf-box{
	width:min(1400px,96vw);
	height:100vh;
	background:var(--panel);
	border:1px solid var(--border);
	border-radius:18px;
	overflow:hidden;
	display:grid;
	grid-template-rows:auto 1fr;
}

.pdf-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:15px;
	padding:12px 16px;
	border-bottom:1px solid var(--border);
	background:var(--panel);
}

.pdf-head h2{
	margin:0;
	font-size:1.1rem;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.pdf-frame{
	width:100%;
	height:100%;
	border:0;
	background:#525659;
}

.pdf-loading{
	position:absolute;
	inset:70px 0 0;
	display:grid;
	place-items:center;
	background:var(--panel);
	color:var(--muted);
	z-index:1;
}

.pdf-actions{
	display:flex;
	gap:7px;
	flex-shrink:0;
}

/* =========================================================
   15. ACTIVITY GALLERY
   ========================================================= */
.activity-grid{
	grid-template-columns:repeat(3,1fr);
}

.activity-gallery{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:6px;
	margin-top:12px; 
}

.activity-gallery img{
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	border-radius:9px;
}

.activity-year{
	margin:28px 0 10px;
}

.activity-month{
	margin:18px 0 10px;
	color:var(--accent);
}

.activity-card{
	padding:16px;
}

.activity-cover{
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	border-radius:12px;
}

.progress{
	height:10px;
	background:var(--input);
	border-radius:99px;
	overflow:hidden;
}

.progress span{
	display:block;
	height:100%;
	background:var(--primary);
}

/* =========================================================
   16. DONATION SECTION
   ========================================================= */
.donation-grid{
	grid-template-columns:repeat(3,1fr);
}

.donation-card{
	padding:18px;
	text-align:center;
}

.donation-qr{
	width:min(220px,80%);
	aspect-ratio:1;
	object-fit:contain;
	background:#fff;
	border-radius:12px;
	padding:8px; 
	margin:8px auto;
}

.donation-card dl{
	text-align:left;
	margin:12px 0;
}

.donation-card dt{
	color:var(--muted);
	font-size:.78rem;
	margin-top:8px;
}

.donation-card dd{
	margin:2px 0;
	font-weight:800;
	word-break:break-word;
}

/* =========================================================
   17. MARQUEE & BOTTOM BAR
   ========================================================= */
.marquee{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	height:38px; 
	z-index:25;
	background:var(--primary);
	display:flex;
	align-items:center;
	overflow:hidden;
}

.marquee b{
	height:100%;
	display:flex;
	align-items:center;
	padding:0 12px;
	font-size:0.8rem;
	background:var(--accent);
	color:#17271f;
	z-index:2;
	white-space:nowrap;
}

.marquee span{
	display:inline-block;
	white-space:nowrap;
	font-size:0.85rem;
	padding-left:100%;
	animation:mq var(--marquee) linear infinite;
}

@keyframes mq{
	to{
		transform:translateX(-100%);
	}
}

.bottom-bar{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	height:38px; 
	z-index:25;
	display:grid;
	grid-template-columns:1fr auto;
}

.bottom-bar .marquee{
	position:relative;
	inset:auto;
	height:38px;
	z-index:auto;
}

.facebook-box{
	height:38px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 20px;
	background:#1877f2;
	color:#fff;
	text-decoration:none;
	border-left:2px solid #fff3;
	font-weight:900;
	white-space:nowrap;
}

.facebook-box:hover{
	background:#0f64d8;
}

/* =========================================================
   18. PRINT STYLING
   ========================================================= */
.print-header{
	display:flex;
	align-items:center;
	gap:14px;
	margin-bottom:18px;
	padding-bottom:12px;
	border-bottom:2px solid var(--primary);
}

.print-header img{
	width:70px;
	max-width:70px;
	height:70px;
	object-fit:contain;
}

.print-header h1{
	margin:0;
	font-size:1.5rem;
}

.print-header p{
	margin:4px 0 0;
}

/* =========================================================
   19. RESPONSIVE - TABLET
   ========================================================= */
@media (max-width:1000px){
	.activity-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:800px){
	.activity-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1000px) and (orientation:portrait){
	.main-grid{grid-template-columns:300px 1fr; height:calc(100vh - 140px)}
	.media{min-height:65vh}
	.side{grid-template-columns:1fr 1fr 1fr;grid-template-rows:100% 100% 100%;}
	.grid4,
	.org{grid-template-columns:repeat(2,1fr)}
}

@media (orientation:landscape){
	.main-grid{grid-template-columns:minmax(300px,28%) 1fr}
	.media{min-height:calc(100vh - 180px)
	.nav{visibility:hidden}}
}

@media (orientation: landscape) and (min-height: 720px) {
	.top{gap:16px; padding:12px 22px}
	.logo{width:150px; height:58px; border-radius:12px; padding:5px}
	.identity h1{font-size:clamp(13px,2vw,30px)}
	.identity p{margin:4px 0 0; font-size:.70rem}
	.wrap{padding:18px 22px 72px}
	.side{gap:12px}
	.bottom-bar, .marquee, .bottom-bar .marquee, .facebook-box {height: 38px}
	.marquee b {padding: 0 12px; font-size: 0.82rem}
	.marquee span {font-size: 0.85rem}	
}

/* =========================================================
   20. RESPONSIVE - MOBILE
   ========================================================= */
@media (orientation:portrait){
	.main-grid{grid-template-columns:1fr}
}

@media (max-width:650px){
	.activity-grid{grid-template-columns:1fr}
	.activity-gallery{grid-template-columns:1fr 1fr}
}

@media (max-width:650px){
	.pdf-modal{padding:0}
	.pdf-box{width:95vw;height:90vh;border-radius:0}
	.pdf-head{padding:10px}
	.pdf-head h2{font-size:.92rem}
	.pdf-actions .label{display:none}
}

@media (max-width:650px){
	.top{flex-wrap:wrap}
	.identity{order:2;flex-basis:100%}
	.actions{position:absolute;right:14px;top:18px}
	.logo{width:120px}
	.side,
	.grid2,
	.grid4,
	.org,
	.admin-grid,
	.membership-body{grid-template-columns:1fr}
	.form-row{grid-template-columns:1fr}
	.membership-head{display:block}
	.badge{display:inline-block;margin-top:8px}
	.wrap{padding-left:12px;padding-right:12px}
}

/* =========================================================
   21. PRINT MODE
   ========================================================= */
@media print{
	.header,
	.bottom-bar,
	.marquee,
	.facebook-box,
	.no-print,
	.modal{display:none !important}
	.print-header{display:flex !important}
	.print-header img{width:70px !important;max-width:70px !important}

	body{
		background:#fff !important;
		color:#000 !important;
	}

	.wrap{
		max-width:none;
		padding:0;
	}

	.print-area,
	.print-area *{visibility:visible !important}

	.print-area{
		position:absolute;
		inset:0;
		width:100%;
		color:#000;
	}

	.print-area .card{
		background:#fff !important;
		color:#000 !important;
		box-shadow:none;
	}

	.print-area .muted{
		color:#444 !important;
	}

	.membership,
	.membership *{visibility:visible}

	.membership{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		box-shadow:none;
	}

	table{font-size:10pt}
}

/* =========================================================
   22. GENERAL UTILITIES & CONTENT COMPONENTS
   ========================================================= */
.muted{color:var(--muted)}
.gold{color:var(--accent)}
.section{padding:15px}
.section h3{margin:0 0 10px}

.search-box{
	max-width:900px;
	margin:auto;
	padding:20px;
}

.input{
	width:100%;
	border:1px solid var(--border);
	border-radius:11px;
	background:var(--input);
	color:var(--text);
	padding:12px;
}

.empty{
	text-align:center;
	padding:50px;
	color:var(--muted);
}

.statusline{
	position:fixed;
	right:14px;
	bottom:68px;
	padding:8px 12px;
	background:#111;
	color:#fff;
	border-radius:10px;
	z-index:80;
	display:none;
}

.statusline.show{display:block}
/* BKKMAN embedded membership portal */
.khairat-info{padding:18px 20px;line-height:1.8;margin-bottom:12px}
.khairat-info h2{margin:0 0 4px}
.khairat-info a{color:var(--accent);font-weight:800}
.khairat-frame-card{padding:8px;overflow:hidden}
.khairat-frame{display:block;width:100%;height:calc(100vh - 230px);min-height:720px;border:0;border-radius:10px;background:#fff}
@media(max-width:650px){.khairat-info{padding:14px}.khairat-frame{height:78vh;min-height:620px}.khairat-frame-card{padding:4px}}