@charset "utf-8";
/* responsive.css — Common responsive rules for all admin/member pages */

/* ===== Hamburger Button (hidden by default, shown at 768px) ===== */
.sidebar-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 8px;
	margin-right: 8px;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	flex-shrink: 0;
}

/* ===== Sidebar Overlay ===== */
.sidebar-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.4);
	z-index: 999;
}
body.sidebar-open .sidebar-overlay {
	display: block;
}

/* ============================================================
   BREAKPOINT: 1024px — Sidebar shrink
   ============================================================ */
@media (max-width: 1024px) {
	.left_div {
		width: 180px !important;
	}
	.right_div_2,
	.right_div {
		margin-left: 180px !important;
		width: auto !important;
	}
	.site-header-inner {
		padding: 0 12px;
		gap: 12px;
	}
	.hdr-nav-item a {
		padding: 0 10px;
		font-size: 12px;
	}
	.page-wrapper {
		padding: 20px 16px 40px;
	}
	/* site-admin home stat cards */
	.stat-card {
		min-width: 100px;
		padding: 14px 12px;
	}
	.stat-value {
		font-size: 20px;
	}
}

/* ============================================================
   BREAKPOINT: 768px — Tablet: sidebar drawer, table scroll
   ============================================================ */
@media (max-width: 768px) {
	/* --- Header --- */
	.site-header-inner {
		height: auto;
		min-height: 48px;
		flex-wrap: wrap;
		padding: 6px 12px;
		gap: 6px;
	}
	.site-header-logo img {
		height: 28px;
	}
	.site-header-nav {
		order: 3;
		width: 100%;
		height: auto;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 0;
		border-top: 1px solid #e2e8f0;
		padding-top: 2px;
	}
	.hdr-nav-item {
		height: 36px;
		flex-shrink: 0;
	}
	.hdr-nav-item a {
		height: 36px;
		line-height: 36px;
		padding: 0 10px;
		font-size: 12px;
	}
	.hdr-user-email,
	.hdr-divider {
		display: none;
	}
	.site-header-user {
		gap: 6px;
	}
	.hdr-btn {
		padding: 4px 8px;
		font-size: 11px;
	}
	.hdr-lang-select {
		padding: 4px 22px 4px 8px;
		font-size: 11px;
	}

	/* --- Sidebar: off-canvas drawer --- */
	.sidebar-toggle {
		display: inline-block;
	}
	.left_div {
		position: fixed !important;
		top: 0 !important;
		left: -260px !important;
		width: 250px !important;
		height: 100vh !important;
		float: none !important;
		z-index: 1000;
		background-color: #f9f9fa !important;
		box-shadow: 2px 0 12px rgba(0,0,0,0.15);
		transition: left 0.25s ease;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	body.sidebar-open .left_div {
		left: 0 !important;
	}
	.right_div_2,
	.right_div {
		margin-left: 0 !important;
		width: 100% !important;
	}

	/* --- Breadcrumb (head_bottom) --- */
	.head_bottom {
		height: auto !important;
		min-height: 32px;
		line-height: 1.6 !important;
		padding: 6px 10px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 4px;
		text-indent: 0 !important;
	}

	/* --- Tables: horizontal scroll --- */
	.card-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.card-table-wrap table {
		min-width: 600px;
	}
	.right_content table {
		width: 100%;
	}

	/* --- Forms: vertical stack --- */
	.form_table dt {
		float: none !important;
		width: 100% !important;
		text-align: left !important;
		padding: 8px 10px 2px !important;
		height: auto !important;
	}
	.form_table dd {
		float: none !important;
		width: 100% !important;
		padding: 4px 10px 8px !important;
		height: auto !important;
	}
	.form_table .input {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.form_table .textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* --- Toolbar --- */
	.toolbar {
		flex-direction: column;
		align-items: flex-start;
	}
	.toolbar > div {
		width: 100%;
	}
	.filter-tabs {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		padding-bottom: 4px;
	}

	/* --- Order History: site-table → card layout --- */
	.site-table-head {
		display: none;
	}
	.order_list ul {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 8px;
		position: relative;
		padding: 16px !important;
		border-bottom: 4px solid #f0f2f5 !important;
	}
	.site_state,
	.site_url,
	.site_admin,
	.site_type {
		width: 100% !important;
		flex-shrink: 1;
		padding: 0 !important;
	}
	.site_state {
		position: absolute;
		right: 16px;
		top: 16px;
		width: auto !important;
	}
	.order_list ul li.site_admin {
		flex-wrap: wrap;
		gap: 6px;
	}

	/* --- Site Admin Home --- */
	.site-info-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.stat-row {
		flex-direction: column;
	}
	.stat-card {
		min-width: 0;
		width: 100%;
	}
	.quick-grid {
		flex-direction: column;
	}
	.quick-card {
		flex: 1 1 100%;
	}
	.site-btn-group {
		width: 100%;
		flex-wrap: wrap;
	}

	/* --- Footer --- */
	.lp-footer {
		padding: 16px 12px;
	}
	.footer-info .sep {
		display: none;
	}
	.footer-info {
		line-height: 2.2;
	}

	/* --- Page wrapper padding --- */
	.page-wrapper {
		padding: 16px 12px 40px;
	}

	/* --- General: images, CKEditor --- */
	img {
		max-width: 100%;
		height: auto;
	}
	.cke {
		max-width: 100% !important;
	}

	/* --- AI Modal --- */
	.ai-modal-card {
		max-width: calc(100vw - 32px);
		padding: 20px;
		margin: 16px;
	}

	/* --- Buttons: smaller fixed-height buttons --- */
	.btn_blue, .btn_red, .btn_yellow, .btn_gray, .btn_green, .btn_block {
		width: auto;
		min-width: 80px;
		padding: 0 10px;
		font-size: 12px;
	}
	.btns_blue, .btns_red, .btns_lightblue, .btns_yllow, .btns_gray, .btns_green, .btns_block {
		width: auto;
		min-width: 60px;
		padding: 0 8px;
		font-size: 11px;
	}

	/* --- Storage alert --- */
	#storage-alert {
		font-size: 12px;
		padding: 8px 12px;
	}
}

/* ============================================================
   BREAKPOINT: 480px — Mobile: compact
   ============================================================ */
@media (max-width: 480px) {
	/* --- Header: tighter --- */
	.site-header-inner {
		padding: 4px 8px;
	}
	.site-header-logo img {
		height: 24px;
	}
	.hdr-nav-item a {
		padding: 0 8px;
		font-size: 11px;
	}
	.hdr-btn {
		padding: 3px 6px;
		font-size: 10px;
	}
	.hdr-balance {
		padding: 2px 8px;
		font-size: 11px;
	}

	/* --- Pagination: smaller --- */
	.pagination li a,
	.pagination li span {
		min-width: 30px;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		padding: 0 4px;
	}

	/* --- Order History: compact --- */
	.admin-btn {
		font-size: 11px !important;
		padding: 4px 8px !important;
	}
	.btn_create_site_off,
	.btn_create_site_on,
	.btn_custom_order,
	.btn_ai_create {
		font-size: 12px;
		padding: 0 12px;
		height: 36px;
		line-height: 36px;
	}
	.toolbar-title {
		font-size: 16px;
	}
	.filter-tab {
		padding: 5px 10px;
		font-size: 12px;
	}

	/* --- Expiry info: wrap --- */
	.expiry-history-line {
		max-width: 200px;
	}
	.site_type {
		font-size: 12px;
	}

	/* --- Breadcrumb compact --- */
	.breadcrumb {
		font-size: 12px;
	}

	/* --- Form buttons --- */
	input.btn, input.btn1 {
		height: 36px;
		line-height: 36px;
		font-size: 13px;
		padding: 0 14px;
	}

	/* --- Page wrapper --- */
	.page-wrapper {
		padding: 12px 8px 32px;
	}

	/* --- Footer compact --- */
	.lp-footer {
		padding: 12px 8px;
	}
	.footer-copy {
		font-size: 11px;
	}
	.footer-info {
		font-size: 10px;
	}
}