/* =====================================================================
   RESPONSIVE LAYER (presentation only - no logic, no markup changes)
   Goal: the page must never show a horizontal (screen-width) scrollbar.
   Wide tables scroll inside their own container instead of the page.
   Loaded after Style.css. Screen only, so printing is unaffected.
   ===================================================================== */
@media screen {

	*, *::before, *::after { box-sizing: border-box; }

	/* ---- Never allow a page-level horizontal scrollbar ---- */
	html {
		max-width: 100%;
		overflow-x: hidden;
		-webkit-text-size-adjust: 100%;
	}
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: clip;          /* clip (not hidden) keeps position:sticky navbar working */
	}
	body.swal2-shown, body.swal2-height-auto, body.modal-open { max-width: 100%; overflow-x: hidden; }

	/* ---- Main areas may shrink instead of pushing the page wide ---- */
	main, .content-area, .container, .container-fluid, .card, .card-body,
	.row > *, .form-group, .input-group, .page-header, .custom-form, .table-container {
		min-width: 0;
		max-width: 100%;
	}
	.container, .container-fluid { width: 100%; }

	/* ---- Media & form controls ---- */
	img, svg, video, canvas, iframe, embed, object { max-width: 100%; }
	img, video { height: auto; }
	input, select, textarea, .form-control, .form-select { max-width: 100%; }
	pre, code { white-space: pre-wrap; word-break: break-word; }
	td, th, .card-title, .modal-title, label { overflow-wrap: anywhere; }

	/* ---- Tables: scroll inside their container, never the page ---- */
	.table-responsive, .table-container, .dataTables_wrapper {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.dataTables_wrapper .dataTables_scroll,
	.dataTables_wrapper .dataTables_scrollHead,
	.dataTables_wrapper .dataTables_scrollBody { max-width: 100%; }
	.dataTables_wrapper .dataTables_filter input { max-width: 100%; width: auto; }

	/* ---- Header / navbar ---- */
	.top-navbar { max-width: 100%; min-width: 0; gap: 8px; }
	.top-navbar > * { min-width: 0; }
	.logo { min-width: 0; flex-shrink: 1; }
	.brand-name { max-width: 100%; }
	.user-profile { min-width: 0; flex-shrink: 0; }
	.user-display-name, .user-role, .branch-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }

	/* ---- Footer ---- */
	.site-footer { max-width: 100%; overflow-wrap: anywhere; }

	/* ---- Popups / pickers / select2 ---- */
	.select2-container { max-width: 100% !important; }
	.select2-dropdown { max-width: 100vw; }
	.swal2-popup { max-width: calc(100vw - 16px) !important; }
	.daterangepicker { max-width: calc(100vw - 16px); }
}

/* ---------------- Tablets and below ---------------- */
@media screen and (max-width: 992px) {
	.nav-menu { max-width: 85vw; }
	.nav-menu > li > .dropdown-menu,
	.dropdown-menu {
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100%;
	}
	.dropdown-menu li a { white-space: normal !important; }
	.dropdown-menu .dropstart > .dropdown-menu,
	.dropdown-submenu .dropdown-menu {
		position: static !important;
		right: auto; left: auto;
		margin: 0;
		min-width: 0;
		width: 100%;
	}
	.submenu { position: static; min-width: 0; width: 100%; }
	.user-profile .user-dropdown { max-width: calc(100vw - 16px); right: 0; left: auto; }
	.modal-dialog { margin: .5rem auto; }
	.page-header { flex-wrap: wrap; gap: 10px; }
	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter { float: none; text-align: left; }
	.dataTables_wrapper .dt-buttons { flex-wrap: wrap; }
}

/* ---------------- Phones ---------------- */
@media screen and (max-width: 576px) {
	/* Bare (non-breakpoint) narrow columns stack on phones instead of squeezing */
	.modal-dialog { max-width: calc(100vw - 1rem); }
	.row > .col-1, .row > .col-2, .row > .col-3,
	.row > .col-4, .row > .col-5 {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
	.btn-group, .d-flex.flex-nowrap { flex-wrap: wrap; }
	.input-group { flex-wrap: wrap; }
	.btn, .form-control, .form-select { max-width: 100%; }
	h1, .h1 { font-size: 1.6rem; }
	h2, .h2 { font-size: 1.4rem; }
	.user-display-name, .user-role, .branch-label { max-width: 110px; }
	.site-footer { padding: 8px 10px; font-size: 11px; }
	.daterangepicker { left: 8px !important; right: 8px !important; width: auto; }
	.daterangepicker .drp-calendar { max-width: 100%; float: none; }
}

/* Corrected duplicate of the phone rule in Style.css (which was written as "@@media" and never applied) */
@media screen and (max-width: 576px) {
	.page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
	.donor-type-section { flex-direction: column; align-items: flex-start; }
	.summary-card { width: 100%; }
}

/* =====================================================================
   BUTTON SPACING (global)
   Keeps a visible gap between neighbouring buttons on every page,
   including SweetAlert dialogs. Only spacing is touched - sizes, colours
   and the layout of everything else stay as they were.
   ===================================================================== */

/* 1) SweetAlert2: confirm / deny / cancel (styled or custom-class buttons) */
.swal2-container .swal2-actions { gap: .5rem .75rem; }
.swal2-container .swal2-actions > .swal2-styled { margin-left: 0; margin-right: 0; }

/* 2) Bootstrap button groups: separate the buttons instead of fusing them
      (also covers the DataTables export buttons, which use .btn-group) */
.btn-group:not(.btn-group-vertical) { gap: .5rem; }
.btn-group:not(.btn-group-vertical) > .btn + .btn,
.btn-group:not(.btn-group-vertical) > .btn-group + .btn-group { margin-left: 0; }
/* give back the rounded corners Bootstrap flattens on joined buttons */
.btn-group:not(.btn-group-vertical) > .btn:not(:last-child):not(.dropdown-toggle) {
	border-top-right-radius: .25rem;
	border-bottom-right-radius: .25rem;
}
.btn-group:not(.btn-group-vertical) > .btn:not(:first-child) {
	border-top-left-radius: .25rem;
	border-bottom-left-radius: .25rem;
}

/* 3) Neighbouring buttons that would otherwise touch (Edit | Delete, Save | Cancel ...) */
.btn + .btn:where(:not([class^="ms-"], [class*=" ms-"], [class^="mx-"], [class*=" mx-"], [class~="w-100"], [class~="d-block"])) {
	margin-left: .5rem;
}
/* ...unless spacing is already provided (me-*, mx-*, flex gap, stacked or joined layouts) */
.btn[class^="me-"] + .btn, .btn[class*=" me-"] + .btn,
.btn[class^="mx-"] + .btn, .btn[class*=" mx-"] + .btn,
[class^="gap-"] > .btn + .btn, [class*=" gap-"] > .btn + .btn,
.actions > .btn + .btn, .card-actions > .btn + .btn,
.committee-list-actions > .btn + .btn, .donation-list-actions > .btn + .btn,
.donation-form-actions > .btn + .btn, .side-actions > .btn + .btn,
.radio-group-container > .btn + .btn, .page-header > .d-flex > .btn + .btn,
.swal2-actions > .btn + .btn, .modal-footer > .btn + .btn,
.input-group > .btn + .btn, .d-grid > .btn + .btn,
.flex-column > .btn + .btn, .btn-group-vertical > .btn + .btn { margin-left: 0; }