/**
 * application.css — Staff Application Module
 * Add to control/head_load.php:
 *   <link rel="stylesheet" href="css/application.css<?php echo $bbfv; ?>">
 */

/* =============================================
   SHARED
   ============================================= */
#application_wrap { max-width: 760px; margin: 0 auto; }
.req_star         { color: #e74c3c; font-weight: bold; }
.field_optional   { font-size: 11px; opacity: 0.5; font-weight: normal; }
.field_note       { font-size: 12px; opacity: 0.6; margin-top: 4px; }
.app_intro p      { line-height: 1.7; opacity: 0.8; margin-bottom: 20px; }
.full_textarea    { width: 100%; min-height: 110px; resize: vertical; }

/* =============================================
   PUBLIC FORM — POSITION SECTIONS
   ============================================= */
.app_form_section { margin-top: 10px; }

.app_section_title {
	font-size: 16px;
	font-weight: 700;
	padding: 12px 0 10px;
	margin-bottom: 16px;
	border-bottom: 2px solid var(--bm_color);
	color: var(--bm_color);
}

/* =============================================
   PUBLIC FORM — CLOSED SCREEN
   ============================================= */
.app_closed_screen {
	max-width: 500px;
	margin: 50px auto;
	text-align: center;
	padding: 50px 30px 40px;
	background: var(--bm_bg2);
	border: 1px solid var(--bm_border);
	border-radius: 16px;
}
.app_closed_icon_ring {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e74c3c22, #c0392b33);
	border: 2px solid #e74c3c55;
	font-size: 34px;
	color: #e74c3c;
	margin-bottom: 22px;
	animation: acp_pulse 2.8s ease-in-out infinite;
}
@keyframes acp_pulse {
	0%,100% { box-shadow: 0 0 0 0 #e74c3c22; }
	50%      { box-shadow: 0 0 0 14px #e74c3c00; }
}
.app_closed_title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 12px;
}
.app_closed_msg {
	font-size: 14px;
	line-height: 1.75;
	opacity: 0.72;
	margin-bottom: 24px;
}
.app_closed_divider {
	width: 50px;
	height: 2px;
	background: var(--bm_border);
	margin: 0 auto 20px;
	border-radius: 2px;
}
.app_closed_tip {
	font-size: 13px;
	opacity: 0.55;
}

/* =============================================
   ADMIN — OPEN/CLOSED TOGGLE BANNER
   ============================================= */
.app_toggle_banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 20px;
	border-radius: 10px;
	border: 1px solid transparent;
	transition: background 0.3s, border-color 0.3s;
	flex-wrap: wrap;
}
.atb_open   { background: linear-gradient(135deg,#27ae6014,#2ecc7110); border-color: #27ae6040; }
.atb_closed { background: linear-gradient(135deg,#e74c3c12,#c0392b0e); border-color: #e74c3c40; }

.atb_left {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
}

.atb_dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	flex-shrink: 0;
}
.atb_open  .atb_dot { background:#27ae60; box-shadow:0 0 0 3px #27ae6033; animation: atb_pulse_g 2.2s ease-in-out infinite; }
.atb_closed .atb_dot { background:#e74c3c; box-shadow:0 0 0 3px #e74c3c33; }
@keyframes atb_pulse_g {
	0%,100% { box-shadow:0 0 0 3px #27ae6033; }
	50%     { box-shadow:0 0 0 7px #27ae6008; }
}

.atb_text { display:flex; flex-direction:column; gap:3px; }
.atb_label { font-size:14px; font-weight:600; }
.atb_sub   { font-size:12px; opacity:0.6; }

.atb_right { flex-shrink:0; }

.atb_select {
	padding: 7px 12px;
	border-radius: 8px;
	border: 1px solid var(--bm_border);
	background: var(--bm_bg);
	color: var(--bm_text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	min-width: 90px;
}

/* =============================================
   ADMIN — TAB COUNT BADGES
   ============================================= */
.app_count_badge {
	display: inline-block;
	background: var(--bm_color);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 10px;
	padding: 1px 7px;
	margin-left: 4px;
	vertical-align: middle;
}
.acb_green { background: #27ae60; }
.acb_red   { background: #e74c3c; }

/* =============================================
   ADMIN — APPLICATION CARDS
   ============================================= */
.app_list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 0;
}

.app_card {
	border: 1px solid var(--bm_border);
	border-left: 4px solid var(--bm_border);
	border-radius: 8px;
	background: var(--bm_bg2);
	overflow: hidden;
}
.app_card_pending  { border-left-color: #f39c12; }
.app_card_approved { border-left-color: #27ae60; }
.app_card_denied   { border-left-color: #e74c3c; }

.app_card_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 14px;
	background: var(--bm_bg);
	gap: 8px;
	flex-wrap: wrap;
}
.app_head_left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.app_head_right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.app_badge {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 10px;
}
.app_badge_mod  { background: var(--bm_color); color: #fff; }
.app_badge_room { background: #8e44ad; color: #fff; }

.app_uname       { font-weight: 600; font-size: 13px; }
.app_date_label  { font-size: 12px; opacity: 0.55; }

.app_status_pill {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 10px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.app_pill_pending  { background:#f39c1233; color:#f39c12; }
.app_pill_approved { background:#27ae6033; color:#27ae60; }
.app_pill_denied   { background:#e74c3c33; color:#e74c3c; }

.app_expand_btn {
	background: var(--bm_btn);
	border: none;
	border-radius: 6px;
	padding: 5px 11px;
	font-size: 12px;
	cursor: pointer;
	color: var(--bm_text);
}
.app_expand_btn:hover { opacity: 0.7; }

.app_card_body {
	padding: 14px 16px 16px;
	border-top: 1px solid var(--bm_border);
}

.app_details_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding: 10px;
	background: var(--bm_bg);
	border-radius: 6px;
	margin-bottom: 12px;
}
.app_drow  { font-size: 13px; }
.app_dlabel { font-weight: 600; opacity: 0.65; }

.app_block {
	margin-top: 12px;
	padding: 11px;
	background: var(--bm_bg);
	border-radius: 6px;
}
.app_block_title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.55;
	margin-bottom: 6px;
}
.app_block_body {
	font-size: 13px;
	line-height: 1.65;
}

.app_reviewed_row {
	margin-top: 10px;
	font-size: 13px;
	color: #27ae60;
}
.app_admin_note_view {
	font-size: 12px;
	opacity: 0.65;
	margin-top: 3px;
	font-style: italic;
}

.app_note_row { margin-top: 12px; }
.app_note_row input { width: 100%; }

.app_action_row {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}
.app_approve_btn { background:#27ae60 !important; color:#fff !important; border:none !important; }
.app_deny_btn    { background:#e74c3c !important; color:#fff !important; border:none !important; }

.app_empty {
	text-align: center;
	padding: 50px 20px;
	opacity: 0.45;
}
.app_empty i { display:block; margin-bottom:10px; }