@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

@import url(theme.css);
@import url(base.css);
@import url(animation.css);

/* App-wide: 2px corner radius anywhere Bootstrap tokens or var(--bs-border-radius*) apply */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
	--bs-border-radius: 2px;
	--bs-border-radius-sm: 2px;
	--bs-border-radius-lg: 2px;
	--bs-border-radius-xl: 2px;
	--bs-border-radius-xxl: 2px;
	--bs-border-radius-2xl: 2px;
	--bs-border-radius-pill: 2px;
	--bs-card-border-radius: 2px;
}

/* ── Report utility classes ── */
:root,
[data-bs-theme="light"] {
	--report-bold-color: #333;
	--report-error-color: #800020;
	--report-kpi-cost-start: #bf4c59;
	--report-kpi-cost-end: #a8434e;
	--report-kpi-retail-start: #4c76c9;
	--report-kpi-retail-end: #3d6abf;
	--report-kpi-entries-start: #48a989;
	--report-kpi-entries-end: #3d9277;
	--report-chart-card-bg: #fff;
	--report-chart-card-border: rgba(0, 0, 0, .1);
	--report-chart-card-shadow: rgba(0, 0, 0, .08);
}
[data-bs-theme="dark"] {
	--report-bold-color: #e0e0e0;
	--report-error-color: #f08080;
	--report-kpi-cost-start: #a8434e;
	--report-kpi-cost-end: #8c3640;
	--report-kpi-retail-start: #3d6abf;
	--report-kpi-retail-end: #2f5aa8;
	--report-kpi-entries-start: #3d9277;
	--report-kpi-entries-end: #337a63;
	--report-chart-card-bg: #1e1e1e;
	--report-chart-card-border: rgba(255, 255, 255, .12);
	--report-chart-card-shadow: rgba(0, 0, 0, .24);
}

.report-bold { color: var(--report-bold-color); font-weight: 700; }
.report-error-text { color: var(--report-error-color); }
.report-table-top { margin-top: 15px !important; }
.report-kpi-cost { background: linear-gradient(135deg, var(--report-kpi-cost-start), var(--report-kpi-cost-end)); }
.report-kpi-retail { background: linear-gradient(135deg, var(--report-kpi-retail-start), var(--report-kpi-retail-end)); }
.report-kpi-entries { background: linear-gradient(135deg, var(--report-kpi-entries-start), var(--report-kpi-entries-end)); }
.report-chart-card {
	background: var(--report-chart-card-bg);
	border-radius: 2px;
	padding: 1rem;
	border: 1px solid var(--report-chart-card-border);
	box-shadow: 0 8px 24px var(--report-chart-card-shadow);
}

/* Body */
body {
    line-height: 22px;
    font-family: 'Raleway', sans-serif;
}

/* Global <small>: single scale app-wide (em = % of parent font size) */
small {
    font-size: 0.7em;
}

body.font-raleway {
    font-family: 'Raleway', sans-serif;
}

body.font-opensans {
    font-family: "Open Sans", sans-serif;
}

body.font-dosis {
    font-family: "Dosis", sans-serif;
}

body.font-jost {
    font-family: "Jost", sans-serif;
}

/* Toasts should sit above the mobile action bar. */
.app-toast-container { z-index: 8005 !important; }
@media (max-width: 991.98px) {
    .app-toast-container {
        bottom: calc(var(--mobile-bottom-reserved, 4.75rem) + 0.25rem) !important;
    }
}

/* Payroll: period range on mobile */
@media (max-width: 767.98px) {
	.payroll-range,
	.payroll-range * {
		line-height: 1.4 !important;
	}
}

/* Payroll: table line-height */
.payroll-table td,
.payroll-table td > div {
	line-height: 1.4 !important;
}

/* Mobile utility: render wide tables as labelled cards (requires data-mobile-label on cells). */
@media (max-width: 767.98px) {
	.mobile-table-cards.table-responsive,
	.mobile-table-cards { overflow-x: hidden !important; overflow-y: visible !important; max-width: 100% !important; width: 100% !important; border: none !important; background: transparent !important; }

	.mobile-table-cards table { width: 100% !important; max-width: 100% !important; table-layout: fixed !important; margin-bottom: 0 !important; }
	.mobile-table-cards table thead { display: none !important; }

	.mobile-table-cards table,
	.mobile-table-cards table tbody,
	.mobile-table-cards table tfoot { display: block !important; width: 100% !important; }

	.mobile-table-cards table tbody tr,
	.mobile-table-cards table tfoot tr {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 0.65rem;
		row-gap: 0.45rem;
		align-items: start !important;
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
		margin-bottom: 0.65rem;
		padding: 0.5rem 0.6rem !important;
		border: 1px solid var(--border-subtle) !important;
		border-radius: 2px !important;
		background-color: var(--table-card-bg);
		box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
	}
	.mobile-table-cards table tbody tr:last-child { margin-bottom: 0; }

	/* Totals card row: subtle alternate background */
	.mobile-table-cards table tfoot tr {
		border-color: var(--table-foot-border) !important;
		background: var(--table-foot-bg) !important;
		margin-top: 0.75rem;
	}

	/* Footer totals: hide spacer cells to avoid blank gaps. */
	.mobile-table-cards table tfoot th.payroll-foot-skip-mobile { display: none !important; }

	.mobile-table-cards table tbody td,
	.mobile-table-cards table tfoot th {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.2rem;
		width: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
		white-space: normal !important;
		border: none !important;
		padding: 0.3rem 0.1rem !important;
		background: transparent !important;
		box-shadow: none !important;
		font-size: 0.875rem;
	}

	/* Footer totals: make label/value stack consistently and align cleanly. */
	.mobile-table-cards table tfoot th { justify-content: flex-start !important; }
	.mobile-table-cards table tfoot th[data-mobile-label] { gap: 0.15rem !important; }
	.mobile-table-cards table tfoot th[data-mobile-label]::before { margin-bottom: 0 !important; }

	.mobile-table-cards table tbody td::before,
	.mobile-table-cards table tfoot th[data-mobile-label]::before {
		content: attr(data-mobile-label);
		font-size: 0.62rem;
		font-weight: 600;
		letter-spacing: 0.045em;
		text-transform: uppercase;
		color: var(--table-card-label-color);
		text-align: left;
		align-self: flex-start;
		width: 100%;
	}

	/* Card layout: left-align everything */
	.mobile-table-cards table tbody td.text-end,
	.mobile-table-cards table tbody td.text-end *,
	.mobile-table-cards table tbody td.text-center,
	.mobile-table-cards table tbody td.text-center * {
		text-align: left !important;
	}
	.mobile-table-cards table tbody td.text-end,
	.mobile-table-cards table tbody td.text-center { align-items: flex-start !important; }

	/* When used with Bootstrap `.table-hover`, avoid per-cell hover highlight; highlight the whole card instead. */
	.mobile-table-cards .table-hover { --bs-table-hover-bg: transparent; --bs-table-hover-color: inherit; }
	.mobile-table-cards .table-hover > tbody > tr > * { background-color: transparent !important; }
	.mobile-table-cards .table-hover > tbody > tr:hover > * { background-color: transparent !important; }
	.mobile-table-cards .table-hover > tbody > tr:hover { background-color: var(--table-card-hover-bg) !important; border-color: var(--table-card-hover-border) !important; }

	/* Optional: hide label for action cell (mark the cell itself with this class) */
	.mobile-table-cards .mobile-table-cards-no-label::before { display: none !important; content: none !important; }

	/* Totals cards: keep title full width when present */
	.mobile-table-cards .mobile-table-cards-foot-title { grid-column: 1 / -1; font-weight: 700 !important; font-size: 0.95rem !important; }
	.mobile-table-cards .mobile-table-cards-foot-title {
		border-bottom: 2px solid rgba(15, 23, 42, 0.12) !important;
		margin-bottom: 0.15rem;
		padding-bottom: 0.5rem !important;
	}
}

.choose-skin li div {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
}
.choose-skin li:hover{
    cursor: pointer;
}
.choose-skin li.active div:after{
    content: '';
    position: absolute;
    z-index: 99;
    width: 10px;
    height: 10px;
    background: var(--bs-white);
    border-radius: 2px;
}

body.radius-0 .rounded,
body.radius-0 .rounded-1,
body.radius-0 .rounded-2,
body.radius-0 .rounded-3,
body.radius-0 .rounded-4,
body.radius-0 .btn,
body.radius-0 .form-control {
    border-radius: 0 !important;
}

/* Tab Card Headers */
.tab-header.nav-tabs .nav-link {
    border: 0;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-black-50);
}

.tab-header.nav-tabs .nav-item.show .nav-link,
.tab-header.nav-tabs .nav-link.active {
    color: var(--bs-light-text-emphasis);
    background-color: transparent;
}

/* Tab Card Headers */

/* Header */
.header {
    background-color: var(--bs-body-bg);
    z-index: 2000 !important;
}

/* Keep modals above the fixed header. */
.modal-backdrop {
    z-index: 2100 !important;
}

.modal {
    z-index: 2110 !important;
}

/* SweetAlert2 above Bootstrap modals, mobile chrome (~7000), and Quill toolbars/pickers (~9000) */
.swal2-container {
    z-index: 20000 !important;
}

/* Quill Snow: expanded size/header/color pickers above adjacent editors; keep below SweetAlert2 */
.ql-toolbar.ql-snow .ql-picker.ql-expanded {
    z-index: 9000;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    z-index: 9001;
}

.ql-toolbar.ql-snow {
    position: relative;
    z-index: 1;
}

.ql-container {
    min-height: 150px;
}

.header .logo {
	width: 190px;
	border-right: 1px solid var(--bs-border-color);
	padding-right: 10px;
}

.header .dropdown-toggle {
    padding: 0;
    border: none;
}

.header .dropdown-toggle::after {
    display: none;
}

.header .nav-link {
    font-size: 18px;
    line-height: 21px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.header .nav-link:hover {
    color: var(--bs-primary);
}

.header .nav-link:hover svg path {
    stroke: var(--bs-primary);
    stroke-width: 2px;
    transition: var(--transition-3s);
}

.header .nav-link:hover {
    color: var(--bs-primary);
}

.header .dropdown-menu.notifications,
.header .dropdown-menu.notifications a {
    width: 360px;
    font-size: 16px;
    line-height: 22px;
    color: var(--bs-body-color);
    text-decoration: none;
}


.header .dropdown-menu.notifications .list-group {
    height: 300px;
    overflow-y: auto;
}

.header .dropdown-menu.notifications .list-group-item {
    border-style: dashed;
}

.header .dropdown-menu.notifications .list-group-item:hover a {
    color: var(--bs-primary);
}

.page-search .icon-search {
    left: 24px;
    z-index: 10;
}

.page-search .icon-cmd {
    right: 24px;
    z-index: 10;
}

.page-search .form-control {
    padding-left: 62px !important;
    padding-right: 115px !important;
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-card-bg);
}

.page-search .form-control:focus {
    box-shadow: 0 0 0 .25rem rgba(108, 80, 191, .25);
    border-color: var(--bs-primary);
}

.search-result {
    transition: var(--transition-3s);
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
    height: 100%;
}

.search-result.active {
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0);
    transition: var(--transition-3s);
    height: 0;
}

.search-result .card{
    border-bottom-width: 5px;
}

[data-bs-theme=light] .search-result .card{ 
    background: #f8f9fa;
}

/* Header */

/* Page Modules */
.page-modules .row {
    margin-left: -20px;
    margin-right: -20px;
}

.page-modules .module-item .module-box {
    padding: 24px;
    height: 122px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(136.25deg, var(--bs-card-bg) 2.1%, var(--bs-card-bg) 100%);
    color: var(--bs-body-color);
    transition: var(--transition-3s)
}

.page-modules .module-item {
    width: 190px;
}

.page-modules .module-item > a {
    display: block;
}

.page-modules .module-item .module-box--danger {
    background: linear-gradient(136.25deg, #FBBBBB 2.1%, #FAA0A0 100%);
}

.page-modules .module-item .module-box--back {
    background: linear-gradient(136.25deg, #bbd0fb 2.1%, #a0bafa 100%);
}

.page-modules .module-item:focus .module-box,
.page-modules .module-item:hover .module-box {
    background: linear-gradient(136.25deg, var(--bs-primary) 2.1%, #322559 100%) !important;
    color: var(--bs-white);
    transition: var(--transition-3s)
}

.page-modules .module-item:focus .module-box svg path,
.page-modules .module-item:hover .module-box svg path {
    stroke-width: 2px;
}

.page-modules .module-item .module-title {
    font-size: 18px;
    line-height: 1.35rem;
    padding-bottom: 0.1rem;
    font-weight: 400;
    color: var(--bs-body-color);
    transition: var(--transition-3s);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-modules .module-item:hover .module-title {
    color: var(--bs-primary);
    text-shadow: none;
}

.modal .page-modules .module-item .module-title {
    font-size: 16px;
}

/* Page Modules */

/* Content Wrapper */
.content-wrapper {
    width: 100%;
    min-height: calc(100vh - 200px);
    transition: var(--transition-3s);
}

.content-wrapper.content-wrapper-radius {
    background-color: var(--bs-card-bg);
}

.content-wrapper.content-wrapper-radius .left-sidebar {
    border-radius: 0 2px 0 0;
}

.content-wrapper.content-wrapper-radius .content-area {
    background-color: var(--bs-body-bg);
}

/* Stock-style layouts: content-area is a flex child of .content-wrapper; center capped .container
   (theme.css max-width on .content-area > div) so pages like stock movement are not visually edge-to-edge */
.content-wrapper.content-wrapper-radius.d-flex > .content-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

/* Match custom stock period dropdown trigger to standard inputs */
#period_switch > .btn {
    background-color: var(--content-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

#period_switch > .btn:hover,
#period_switch > .btn:focus,
#period_switch > .btn:active {
    background-color: var(--content-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
    box-shadow: none !important;
}

.content-wrapper.content-wrapper-radius.d-flex > .content-area > .container-fluid {
    align-self: stretch;
    /* Avoid height:100% here: it stretched the column below the last .row and showed empty gap */
    height: auto;
}

/* Reusable dark section title bar — @include('partials.section_head_bar', ['label' => '…']) */
.section-head-bar {
    padding: 0.5rem 0.85rem;
    background-color: var(--section-head-bg);
    color: var(--modal-header-color);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    margin-bottom: 10px;
}
@media (max-width: 767.98px) {
    .section-head-bar {
        padding: 0.45rem 0.6rem !important;
    }
}

/* Content Wrapper */

/* Left Sidebar */
.left-sidebar {
    width: 245px;
    min-width: 245px;
    /* max-height: 100vh; */
    background-color: var(--bs-body-bg);
    overflow-y: auto;
    transition: var(--transition-3s);
    padding: 24px 20px;
    position: relative;
	display: none;
}


.layout-fullwidth .left-sidebar {
    width: 0;
    min-width: 0;
    padding: 24px 0;
    transition: var(--transition-3s);
    left: -250px;
}

.left-sidebar .nav-sidebar {
    width: 204px;
}

.nav-sidebar>ul>li {
    margin-bottom: 30px;
}

.nav-sidebar>ul>li:last-child {
    margin-bottom: 0;
}

.nav-sidebar .nav {
    position: relative;
    padding-top: 14px;
}

.nav-sidebar .nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 2px;
    height: calc(100% - 23px);
    z-index: 1;
    background-color: var(--bs-border-color);
    transition: var(--transition-3s);
}

.nav-sidebar .nav-title {
    display: block;
    color: var(--bs-body-color);
}

.nav-sidebar ul li a[aria-expanded="false"] svg {
    transform: rotate(0deg);
    transition: var(--transition-3s);
}

.nav-sidebar ul li a[aria-expanded="true"] svg {
    transform: rotate(135deg);
    transition: var(--transition-3s);
}

.nav-sidebar .nav .nav-item {
    padding: 4px 0 4px 24px;
    position: relative;
}

.nav-sidebar .nav .nav-item::before {
    content: "";
    border-left: 2px solid var(--bs-border-color);
    border-bottom: 2px solid var(--bs-border-color);
    width: 12px;
    height: 12px;
    position: absolute;
    left: 5px;
    top: 4px;
    border-radius: 0 2px 0 2px;
}

.nav-sidebar .nav .nav-link {
    padding: 0;
    line-height: 22px;
    color: var(--bs-body-color);
}

.nav-sidebar .nav .nav-link:focus,
.nav-sidebar .nav .nav-link.active,
.nav-sidebar .nav .nav-link:hover {
    color: var(--bs-primary);
    font-weight: 500;
    transition: var(--transition-3s);
}

/* Sidebar Overlay */
.sidebar-overlay {
    display: none;
}

/* Body Scroll */
body.no-scroll {
    position: fixed;
    width: 100%;
}

/* Left Sidebar */

/* Content Wrapper */
.content-area {
    min-width: 100%;
    transition: var(--transition-3s);
    padding-top: 1rem;
}

.content-area>.container-fluid {
    height: 100%;
}

.layout-fullwidth .content-area {
    min-width: 100%;
}

/* Content Wrapper */

.sub-layout .content-wrapper {
    background-color: var(--bs-card-bg);
}

.sub-layout .left-sidebar {
    border-radius: 0 2px 0 0;
    background-color: var(--bs-body-bg);
}

.sub-layout .body-area {
    border-radius: 2px 0 0 0;
    background-color: var(--bs-body-bg);
    width: calc(100% - 245px);
    height: calc(100vh - 138px);
}

.sub-layout .body-area .message-list {
    height: calc(100% - 125px);
}

.sub-layout .body-area .ai-image-card {
    width: 75%;
}

#chat-file-input {
    display: none;
}

.send-image {
    height: 100px;
    width: 100px;
}

.typing-dots::after {
    content: '';
    display: inline-block;
    width: 1em;
    text-align: left;
    animation: dots 1.2s steps(3, end) infinite;
}

@keyframes dots {
    0% {
        content: '';
    }

    33% {
        content: '.';
    }

    66% {
        content: '..';
    }

    100% {
        content: '...';
    }
}

#PageSearchInput {
    width: 0;
    opacity: 0;
    transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    overflow: hidden;
    right: -10px;
    top: -6px;
}

#PageSearchInput.active {
    width: 240px;
    opacity: 1;
}

:root {
    --page-action-btn-default-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] {
    --page-action-btn-default-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}


.breadcrumbs-primary .page-breadcrumbs .page-name{
    color: var(--bs-white);
}
.breadcrumbs-primary .page-breadcrumbs .back-btn{
    border-color: #eeeeee36;
}
.breadcrumbs-primary .page-breadcrumbs,
.breadcrumbs-primary .content-wrapper.content-wrapper-radius,
.breadcrumbs-primary .inner-layout .left-bar{
    background-color: var(--bs-primary);
}
.breadcrumbs-primary .back-btn span{
    color: var(--bs-white) !important;
}
.breadcrumbs-primary .page-breadcrumbs .hover-svg svg path{
    stroke: var(--bs-white)
}
.breadcrumbs-primary .page-breadcrumbs .hover-svg:hover svg path{
    stroke: var(--bs-white)
}

/* Global breadcrumb back arrow color */
.page-breadcrumbs .back-btn .hover-svg svg path {
    stroke: #fff !important;
    stroke-width: 2.2px !important;
}

.page-breadcrumbs .back-btn {
    width: 40px;
    min-width: 40px;
    min-height: 56px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-right: 10px;
    align-self: stretch;
    border-right: 1px solid var(--bs-border-color);
}

.page-breadcrumbs .back-btn .hover-svg {
    width: 40px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-breadcrumbs .back-btn .hover-svg svg {
    width: 24px;
    height: 24px;
}

.page-breadcrumbs .right-breadcrumb {
    min-height: 56px;
}

.page-breadcrumbs .page-name {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600 !important;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important;
    line-height: 1.2 !important;
}

.page-breadcrumbs .page-name small {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
}

/* Page subtitle moved into .page-card-lead on each main card; keep rule for any legacy markup */
.page-breadcrumbs .page-subtitle {
    max-width: 90ch;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--modal-header-color) !important;
}

/* Dark strip under breadcrumb bar — matches .page-breadcrumbs background */
.page-card-lead {
    background-color: var(--section-head-bg);
    color: var(--modal-header-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.breadcrumbs-primary .page-card-lead {
    background-color: var(--bs-primary);
}

.page-card-lead__inner {
    max-width: 90ch;
    padding: 0.75rem 1rem;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--modal-header-color);
    letter-spacing: 0.01em;
}

.card > .page-card-lead:first-child {
    border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0;
}

/* Fixed padding everywhere (replaces Bootstrap padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x)) */
.card-body {
    padding: 1.25rem;
}

/* Nested cards inside a card body use the light grey background (e.g. Holidays/My cards). */
.card-body .card {
    background-color: var(--nested-card-bg);
}

.page-card-lead--standalone {
    border-radius: var(--bs-border-radius-xl);
    margin-bottom: 0.75rem;
}

.page-card-lead--standalone .page-card-lead__inner {
    padding: 0.85rem 1.15rem;
    font-size: 1.375rem;
    color: var(--modal-header-color);
}

.page-breadcrumbs .breadcrumb-status-badge {
    font-size: 0.92rem;
    padding: 0.45rem 0.7rem;
    line-height: 1.1;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    margin-top: 4px !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
}

#breadcrumb-badge-slot .badge,
#mobile-breadcrumb-badge-slot .badge {
    font-size: 0.92rem;
    padding: 0.45rem 0.7rem;
    line-height: 1.1;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
}

/* Desktop breadcrumb bar (Bootstrap lg+): larger status badges */
@media (min-width: 992px) {
    #breadcrumb-badge-slot .badge,
    .page-breadcrumbs .breadcrumb-status-badge {
        font-size: 1.125rem;
        padding: 0.55rem 0.95rem;
        line-height: 1.2;
        min-height: 2.45rem;
    }
}

.mobile-page-title-row .breadcrumb-status-badge {
    font-size: 0.92rem;
    padding: 0.45rem 0.7rem;
    line-height: 1.1;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    margin-top: 2px !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
}

/* §7.E — Block/card tables (payroll period detail + list): dense vertical rhythm for labelled grid cells */
body:not(.is-png-export) #payroll-scroll.payroll-show-table-wrap .payroll-table tbody td,
body:not(.is-png-export) #payroll-scroll.payroll-show-table-wrap .payroll-table tbody td::before,
body:not(.is-png-export) #payroll-scroll.payroll-show-table-wrap .payroll-table tfoot th:not(.payroll-foot-skip-mobile),
body:not(.is-png-export) #payroll-scroll.payroll-show-table-wrap .payroll-table tfoot th[data-mobile-label]::before,
body:not(.is-png-export) #payroll-scroll.payroll-show-table-wrap .payroll-table tfoot th.payroll-foot-title {
    line-height: 0.8;
}

@media (max-width: 767.98px) {
    .payroll-periods-table-wrap #payroll-periods-table tbody td {
        line-height: 0.8;
    }
}

.page-action-sidebar {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-height: none;
    height: 100%;
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 0;
}

/* Mobile / tablet: off-canvas drawer on the left
   Top clears sticky header (base breadcrumbs top 78px / responsive 61px are minimums; real header can be taller).
   z-index above .header (2000) so the drawer is not painted under the navbar. */
@media (max-width: 991.98px) {
    .page-action-sidebar {
        position: fixed !important;
        top: 94px !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: min(88vw, 320px) !important;
        max-width: min(88vw, 320px) !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 1px solid var(--sidebar-border) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
        padding-top: 0 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.2s ease-in-out !important;
        z-index: 2060 !important;
    }

    body.has-elevation-banner .page-action-sidebar {
        top: calc(94px + 3.25rem) !important;
    }

    .page-action-sidebar-backdrop {
        z-index: 2040 !important;
    }

    .page-actions-fab {
        display: inline-flex !important;
    }

    body.page-action-sidebar-open .page-action-sidebar {
        transform: translateX(0) !important;
    }

    body.page-action-sidebar-open .page-action-sidebar-backdrop {
        display: block;
    }
}

@media (max-width: 767.98px) {
    .page-action-sidebar {
        top: 76px !important;
        width: min(92vw, 340px) !important;
        max-width: min(92vw, 340px) !important;
    }

    body.has-elevation-banner .page-action-sidebar {
        top: calc(76px + 3.25rem) !important;
    }
}

.page-action-sidebar-body {
    /* Shared placeholder icon (2×2 tile grid) for all page-action buttons */
    --page-action-btn-default-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
    overflow-y: auto;
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1 1 auto;
}

@media (min-width: 992px) {
    /* Sticky breadcrumb bar can overlap the first controls; keep them below the bar */
    .page-action-sidebar-body {
        padding-top: 1rem;
    }
}

[data-bs-theme="dark"] .page-action-sidebar-body {
    --page-action-btn-default-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

.page-action-sidebar-body .btn {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: rgba(79, 88, 102, 0.22);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-tertiary-bg);
    --bs-btn-active-border-color: rgba(79, 88, 102, 0.28);
    --bs-btn-active-color: var(--bs-body-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem 0.55rem 0.55rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
    white-space: normal;
    border-radius: 2px;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.page-action-sidebar-body .btn:not(.dg-save-pending) {
    background: var(--bs-body-bg) !important;
    box-shadow: none !important;
}

.page-action-sidebar-body .btn::before {
    content: "";
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 2px;
    background-color: rgba(var(--bs-secondary-rgb), 0.12);
    background-image: var(--page-action-btn-icon, var(--page-action-btn-default-icon));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem 1.2rem;
    filter: none;
    opacity: 1;
}

.page-action-sidebar-body .btn:not(.dg-save-pending):hover,
.page-action-sidebar-body .btn:not(.dg-save-pending):focus-visible {
    background: var(--bs-secondary-bg) !important;
    border-color: rgba(79, 88, 102, 0.25) !important;
    color: var(--bs-body-color) !important;
}

.page-action-sidebar-body .btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}

.page-action-sidebar-body .btn:not(.dg-save-pending):active {
    background: var(--bs-tertiary-bg) !important;
}

/* Flatten Bootstrap variants + inline colours inside the sidebar */
.page-action-sidebar-body .btn.btn-primary:not(.dg-save-pending),
.page-action-sidebar-body .btn.btn-secondary:not(.dg-save-pending),
.page-action-sidebar-body .btn.btn-success:not(.dg-save-pending),
.page-action-sidebar-body .btn.btn-danger:not(.dg-save-pending),
.page-action-sidebar-body .btn.btn-warning:not(.dg-save-pending),
.page-action-sidebar-body .btn.btn-info:not(.dg-save-pending),
.page-action-sidebar-body .btn.btn-outline-primary:not(.dg-save-pending),
.page-action-sidebar-body .btn.btn-outline-secondary:not(.dg-save-pending),
.page-action-sidebar-body .btn.btn-outline-success:not(.dg-save-pending),
.page-action-sidebar-body .btn.btn-outline-danger:not(.dg-save-pending) {
    background: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

.page-action-sidebar-body .btn.text-white:not(.dg-save-pending) {
    color: var(--bs-body-color) !important;
}

.page-action-sidebar-body .btn[style*="background"]:not(.dg-save-pending),
.page-action-sidebar-body .btn[style*="border-color"]:not(.dg-save-pending) {
    background: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

/* After flatten rules: desktop-only grey hover (higher specificity than .btn.btn-primary, etc.) */
@media (min-width: 992px) {
    .page-action-sidebar-body .btn:not(.dg-save-pending):is(:hover, :focus-visible),
    .page-action-sidebar-body .btn.btn-primary:not(.dg-save-pending):is(:hover, :focus-visible),
    .page-action-sidebar-body .btn.btn-secondary:not(.dg-save-pending):is(:hover, :focus-visible),
    .page-action-sidebar-body .btn.btn-success:not(.dg-save-pending):is(:hover, :focus-visible),
    .page-action-sidebar-body .btn.btn-danger:not(.dg-save-pending):is(:hover, :focus-visible),
    .page-action-sidebar-body .btn.btn-warning:not(.dg-save-pending):is(:hover, :focus-visible),
    .page-action-sidebar-body .btn.btn-info:not(.dg-save-pending):is(:hover, :focus-visible),
    .page-action-sidebar-body .btn.btn-outline-primary:not(.dg-save-pending):is(:hover, :focus-visible),
    .page-action-sidebar-body .btn.btn-outline-secondary:not(.dg-save-pending):is(:hover, :focus-visible),
    .page-action-sidebar-body .btn.btn-outline-success:not(.dg-save-pending):is(:hover, :focus-visible),
    .page-action-sidebar-body .btn.btn-outline-danger:not(.dg-save-pending):is(:hover, :focus-visible),
    .page-action-sidebar-body .btn[style*="background"]:not(.dg-save-pending):is(:hover, :focus-visible),
    .page-action-sidebar-body .btn[style*="border-color"]:not(.dg-save-pending):is(:hover, :focus-visible) {
        background: #e9ecef !important;
        border-color: rgba(79, 88, 102, 0.22) !important;
        color: var(--bs-body-color) !important;
    }

    .page-action-sidebar-body .btn:not(.dg-save-pending):active,
    .page-action-sidebar-body .btn.btn-primary:not(.dg-save-pending):active,
    .page-action-sidebar-body .btn.btn-secondary:not(.dg-save-pending):active,
    .page-action-sidebar-body .btn.btn-success:not(.dg-save-pending):active,
    .page-action-sidebar-body .btn.btn-danger:not(.dg-save-pending):active,
    .page-action-sidebar-body .btn.btn-warning:not(.dg-save-pending):active,
    .page-action-sidebar-body .btn.btn-info:not(.dg-save-pending):active,
    .page-action-sidebar-body .btn.btn-outline-primary:not(.dg-save-pending):active,
    .page-action-sidebar-body .btn.btn-outline-secondary:not(.dg-save-pending):active,
    .page-action-sidebar-body .btn.btn-outline-success:not(.dg-save-pending):active,
    .page-action-sidebar-body .btn.btn-outline-danger:not(.dg-save-pending):active,
    .page-action-sidebar-body .btn[style*="background"]:not(.dg-save-pending):active,
    .page-action-sidebar-body .btn[style*="border-color"]:not(.dg-save-pending):active {
        background: #dee2e6 !important;
        border-color: rgba(79, 88, 102, 0.28) !important;
    }

    [data-bs-theme="dark"] .page-action-sidebar-body .btn:not(.dg-save-pending):is(:hover, :focus-visible),
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-primary:not(.dg-save-pending):is(:hover, :focus-visible),
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-secondary:not(.dg-save-pending):is(:hover, :focus-visible),
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-success:not(.dg-save-pending):is(:hover, :focus-visible),
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-danger:not(.dg-save-pending):is(:hover, :focus-visible),
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-warning:not(.dg-save-pending):is(:hover, :focus-visible),
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-info:not(.dg-save-pending):is(:hover, :focus-visible),
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-outline-primary:not(.dg-save-pending):is(:hover, :focus-visible),
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-outline-secondary:not(.dg-save-pending):is(:hover, :focus-visible),
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-outline-success:not(.dg-save-pending):is(:hover, :focus-visible),
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-outline-danger:not(.dg-save-pending):is(:hover, :focus-visible),
    [data-bs-theme="dark"] .page-action-sidebar-body .btn[style*="background"]:not(.dg-save-pending):is(:hover, :focus-visible),
    [data-bs-theme="dark"] .page-action-sidebar-body .btn[style*="border-color"]:not(.dg-save-pending):is(:hover, :focus-visible) {
        background: rgba(255, 255, 255, 0.09) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    [data-bs-theme="dark"] .page-action-sidebar-body .btn:not(.dg-save-pending):active,
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-primary:not(.dg-save-pending):active,
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-secondary:not(.dg-save-pending):active,
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-success:not(.dg-save-pending):active,
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-danger:not(.dg-save-pending):active,
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-warning:not(.dg-save-pending):active,
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-info:not(.dg-save-pending):active,
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-outline-primary:not(.dg-save-pending):active,
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-outline-secondary:not(.dg-save-pending):active,
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-outline-success:not(.dg-save-pending):active,
    [data-bs-theme="dark"] .page-action-sidebar-body .btn.btn-outline-danger:not(.dg-save-pending):active,
    [data-bs-theme="dark"] .page-action-sidebar-body .btn[style*="background"]:not(.dg-save-pending):active,
    [data-bs-theme="dark"] .page-action-sidebar-body .btn[style*="border-color"]:not(.dg-save-pending):active {
        background: rgba(255, 255, 255, 0.14) !important;
    }
}

.page-action-sidebar-body .btn:disabled,
.page-action-sidebar-body .btn.disabled {
    opacity: 0.55;
    pointer-events: none;
}

.page-action-sidebar-body .btn.position-relative .page-action-pending-badge {
    top: 0.35rem;
    right: 0.45rem;
    font-size: 0.68rem;
    min-width: 1.25rem;
    padding: 0.2em 0.45em;
    z-index: 2;
}

.page-actions-fab {
    position: fixed;
    left: 14px;
    bottom: 16px;
    width: 64px;
    height: 64px;
    border-radius: 2px;
    z-index: 6000;
    box-shadow: 0 12px 28px rgba(13, 110, 253, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.page-actions-fab:hover {
    box-shadow: 0 14px 32px rgba(13, 110, 253, 0.55);
    transform: scale(1.04);
}

.page-actions-fab:active {
    transform: scale(0.96);
}

.page-actions-fab-icon {
    position: relative;
    display: block;
    width: 36px;
    height: 28px;
}

.page-actions-fab-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    background: currentColor;
    transition:
        transform 0.38s cubic-bezier(0.68, -0.15, 0.32, 1.25),
        top 0.38s cubic-bezier(0.68, -0.15, 0.32, 1.25),
        bottom 0.38s cubic-bezier(0.68, -0.15, 0.32, 1.25),
        opacity 0.22s ease;
}

.page-actions-fab-bar:nth-child(1) {
    top: 0;
}

.page-actions-fab-bar:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.page-actions-fab-bar:nth-child(3) {
    bottom: 0;
}

body.page-action-sidebar-open .page-actions-fab-bar:nth-child(1) {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) rotate(45deg);
}

body.page-action-sidebar-open .page-actions-fab-bar:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.15);
}

body.page-action-sidebar-open .page-actions-fab-bar:nth-child(3) {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .page-actions-fab,
    .page-actions-fab-bar {
        transition-duration: 0.01ms !important;
    }

    .page-actions-fab:hover,
    .page-actions-fab:active {
        transform: none;
    }
}

.page-action-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1035;
    display: none;
}

@media (min-width: 992px) {
    .page-breadcrumbs .back-btn .hover-svg {
        margin-right: 15px;
    }

    body.has-page-actions-sidebar .page-body-shell {
        display: flex;
        align-items: stretch;
        gap: 0.9rem;
        width: 100%;
        min-height: calc(100vh - 220px);
    }

    /* Sidebar column: full height white strip (stretches with main). Buttons stay pinned via sticky inner wrapper. */
    body.has-page-actions-sidebar .page-body-shell > .page-action-sidebar {
        position: relative;
        left: auto;
        z-index: 1025;
        align-self: stretch;
        height: auto;
        min-height: 0;
        overflow: visible;
        width: 240px;
        min-width: 240px;
        max-width: 240px;
    }

    body.has-page-actions-sidebar .page-body-shell > .page-action-sidebar > .page-action-sidebar-body {
        position: sticky;
        top: var(--page-action-sidebar-sticky-top, 4.5rem);
        max-height: calc(100vh - var(--page-action-sidebar-sticky-top, 4.5rem) - 1rem);
        min-height: 0;
        align-self: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    body.has-page-actions-sidebar .page-body-shell > :not(.page-action-sidebar) {
        flex: 1 1 auto;
        min-width: 0;
    }

    .page-main-column {
        margin-top: 1rem;
    }
}

@media (max-width: 991.98px) {
    /* Mobile fixed shell (Inertia pages): header + bottom bar are fixed regions; only middle scrolls. */
    html {
        --app-shell-height: calc(var(--app-vh, 1dvh) * 100);
        --safe-bottom: max(env(safe-area-inset-bottom, 0px), 0.12rem);
        --bottom-bar-height: calc(1px + 68px);
        --mobile-bottom-reserved: calc(var(--bottom-bar-height) + var(--safe-bottom));
        /* Backward-compatible alias while remaining selectors are migrated. */
        --mobile-bottom-bar-offset: var(--mobile-bottom-reserved);
        /* Fallback until layout.js measures #header; used for modal vertical inset */
        --mobile-sticky-header-offset: 118px;
    }

    body.inertia-app-layout,
    body.inertia-app-layout #app {
        height: 100dvh;
        height: var(--app-shell-height);
        max-height: var(--app-shell-height);
        min-height: 0;
        overflow: hidden !important;
    }

    body.inertia-app-layout #app {
        display: block;
    }

    body.inertia-app-layout {
        height: 100dvh;
        height: var(--app-shell-height);
        max-height: var(--app-shell-height);
        padding-bottom: 0 !important;
    }

    body.inertia-app-layout .app-shell {
        height: 100dvh;
        height: var(--app-shell-height);
        max-height: var(--app-shell-height);
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    body.inertia-app-layout .app-shell-top {
        flex: 0 0 auto;
    }

    body.inertia-app-layout .app-shell-main {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body.inertia-app-layout .page-body-shell {
        height: 100%;
        min-height: 0;
        overflow: visible;
    }

    /* Mobile: allow page cards to grow naturally across all Inertia pages.
       This keeps fixed bottom actions stable and avoids over-constraining tall content sections. */
    body.inertia-app-layout .content-wrapper {
        min-height: 0;
        height: auto;
    }

    body.inertia-app-layout .content-wrapper.content-wrapper-radius.d-flex > .content-area {
        min-height: 0;
    }

    body.inertia-app-layout .content-wrapper.content-wrapper-radius.d-flex > .content-area > .container-fluid {
        min-height: 0;
        display: block;
    }

/* Mobile page header + mobile bottom action bar */
.mobile-page-title-row {
    background-color: var(--section-head-bg);
    color: var(--modal-header-color);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-page-title-row .container-fluid {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-width: 0;
    overflow: hidden;
}

.mobile-page-title {
    font-size: 1.13rem;
    line-height: 1.22;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.mobile-page-title small {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
}

.mobile-page-subtitle {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    line-height: 1.28;
    color: rgba(255, 255, 255, 0.88);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.mobile-page-actions {
    /* In the mobile shell, the bar is a real layout region (not an overlay). */
    position: relative !important;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    bottom: auto;
    z-index: 7000;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--section-head-bg);
    padding-bottom: var(--safe-bottom, max(env(safe-area-inset-bottom, 0), 0.12rem));
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Fixed-height icon row + single-line label (ellipsis if still too narrow) */
.mobile-page-actions > .mobile-page-action-btn {
    display: grid;
    grid-template-rows: 2.05rem 1.15em;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    align-content: start;
    row-gap: 0.48rem;
    padding-top: calc(0.34rem + 3px);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-page-action-btn,
.mobile-page-actions-more-item {
    --mobile-action-icon: var(--page-action-btn-default-icon);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.92);
    border: 0;
    border-radius: 0;
    background: transparent;
    min-height: 68px;
    padding: 0.34rem 0.15rem 0.24rem;
    font-size: 0.68rem;
    line-height: 1.1;
}

.mobile-page-action-btn::before,
.mobile-page-actions-more-item::before {
    content: "";
    flex-shrink: 0;
    width: 1.55rem;
    height: 1.55rem;
    margin-bottom: 0.25rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--mobile-action-icon);
}

/* Bottom bar only: larger glyphs, white @ 0.8 opacity (dark strip background) */
.mobile-page-actions > .mobile-page-action-btn::before {
    grid-row: 1;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0;
    justify-self: center;
    align-self: center;
    opacity: 0.8;
    filter: brightness(0) invert(1);
}

.mobile-page-actions-more-item::before {
    margin-bottom: 0;
    width: 2rem;
    height: 2rem;
}

.mobile-page-action-label {
    width: 100%;
    display: block;
    text-align: center;
}

/* Bottom bar labels: one line, ellipsis on overflow */
.mobile-page-actions > .mobile-page-action-btn .mobile-page-action-label {
    grid-row: 2;
    align-self: center;
    justify-self: stretch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}

/* Bottom bar slots only (matches More-menu interaction treatment below) */
.mobile-page-actions > .mobile-page-action-btn:not(.dg-save-pending):hover,
.mobile-page-actions > .mobile-page-action-btn:not(.dg-save-pending):focus-visible,
.mobile-page-actions > .mobile-page-action-btn:not(.dg-save-pending):active {
    color: var(--modal-header-color);
    background: rgba(255, 255, 255, 0.12);
}

.mobile-page-actions-more-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 6995;
}

.mobile-page-actions-more-menu {
    display: none;
    position: fixed;
    left: 0.6rem;
    right: 0.6rem;
    bottom: calc(var(--mobile-bottom-reserved, var(--mobile-bottom-bar-offset)) + 10px);
    z-index: 7010;
    background: var(--section-head-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    padding: 0.2rem;
}

.mobile-page-actions-more-item {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100% !important;
    box-sizing: border-box;
    min-height: 52px;
    border-radius: 2px;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    line-height: 1.35;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* More menu: match bottom bar; override Bootstrap .btn colours from page_actions */
.mobile-page-actions-more-menu .mobile-page-actions-more-item,
.mobile-page-actions-more-menu .mobile-page-actions-more-item.btn {
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.mobile-page-actions-more-menu .mobile-page-actions-more-item.btn-primary,
.mobile-page-actions-more-menu .mobile-page-actions-more-item.btn-secondary,
.mobile-page-actions-more-menu .mobile-page-actions-more-item.btn-success,
.mobile-page-actions-more-menu .mobile-page-actions-more-item.btn-danger,
.mobile-page-actions-more-menu .mobile-page-actions-more-item.btn-warning,
.mobile-page-actions-more-menu .mobile-page-actions-more-item.btn-info,
.mobile-page-actions-more-menu .mobile-page-actions-more-item.btn-light,
.mobile-page-actions-more-menu .mobile-page-actions-more-item.btn-outline-primary,
.mobile-page-actions-more-menu .mobile-page-actions-more-item.btn-outline-secondary {
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
    border: 0 !important;
}

.mobile-page-actions-more-menu .mobile-page-actions-more-item[style*="background"],
.mobile-page-actions-more-menu .mobile-page-actions-more-item[style*="border-color"] {
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
    border: 0 !important;
}

/* Match bottom-bar highlight; override Bootstrap .btn:hover on overflow items */
.mobile-page-actions-more-menu .mobile-page-actions-more-item:is(:hover, :focus, :focus-visible, :active) {
    color: var(--modal-header-color) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.mobile-page-actions-more-menu .mobile-page-actions-more-item::before {
    width: 2rem;
    height: 2rem;
    opacity: 0.8;
    filter: brightness(0) invert(1);
}

.mobile-page-actions-more-item .mobile-page-action-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    margin-left: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dashboard mobile: search sheet above bottom bar (no backdrop) */
.mobile-module-search-panel {
    display: none;
    position: fixed;
    left: 0.6rem;
    right: 0.6rem;
    bottom: var(--mobile-bottom-reserved, var(--mobile-bottom-bar-offset));
    z-index: 6998;
    background: var(--section-head-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    padding: 0.55rem 0.65rem;
}

.mobile-module-search-panel .mobile-module-search-input {
    border: 0;
    box-shadow: none;
}

body.mobile-module-search-open .mobile-module-search-panel {
    display: block;
}

body.mobile-module-search-open #mobile-module-search-toggle {
    background: rgba(255, 255, 255, 0.14);
}

/* Bookings mobile: search + results sheet above bottom bar (same chrome as module search / More menu) */
.mobile-bookings-search-panel {
    display: none;
    flex-direction: column;
    position: fixed;
    left: 0.6rem;
    right: 0.6rem;
    bottom: var(--mobile-bottom-reserved, var(--mobile-bottom-bar-offset));
    z-index: 6998;
    max-height: min(58vh, 440px);
    background: var(--section-head-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    padding: 0.55rem 0.65rem;
    overflow: hidden;
}

.mobile-bookings-search-input-row .form-control {
    border: 0;
    box-shadow: none;
}

.mobile-bookings-search-input-row #bookings-search-mobile-submit {
    flex-shrink: 0;
    min-width: 3.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mobile-bookings-search-results-wrap {
    margin-top: 0.4rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border-radius: 2px;
    background: var(--content-bg);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-bookings-search-results-table {
    margin-bottom: 0;
}

body.mobile-bookings-search-open .mobile-bookings-search-panel {
    display: flex;
}

body.mobile-bookings-search-open #mobile-bookings-search-toggle {
    background: rgba(255, 255, 255, 0.14);
}

.mobile-page-action-pending-badge {
    position: absolute;
    top: 0.22rem;
    right: 0.28rem;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.12rem 0.38rem;
    line-height: 1.1;
    z-index: 2;
    pointer-events: none;
}

.mobile-page-actions-more-item .mobile-page-action-pending-badge {
    top: 0.35rem;
    right: 0.5rem;
}

body.mobile-page-actions-more-open .mobile-page-actions-more-menu,
body.mobile-page-actions-more-open .mobile-page-actions-more-backdrop {
    display: block;
}

/* Inertia/Vue layout renders the More menu/backdrop only when open (v-if),
   so it won't have the body class toggle used by legacy Blade pages. */
body.inertia-app-layout .mobile-page-actions-more-menu,
body.inertia-app-layout .mobile-page-actions-more-backdrop {
    display: block;
}

/* Bookings: alternate mobile bar while a modal is open */
#mobile-page-actions-bookings-modal {
    z-index: 7060;
}

/* Rota: alternate mobile bar while shift / till / copy-week modal is open */
#mobile-page-actions-rota-modal {
    z-index: 7060;
}

.shift-modal-subtitle {
    color: var(--modal-header-color);
}

.mobile-page-action-slot-filler {
    min-height: 68px;
    visibility: hidden;
    pointer-events: none;
}

.bookings-mobile-modal-overflow-menu {
    display: none;
    position: fixed;
    left: 0.6rem;
    right: 0.6rem;
    bottom: calc(var(--mobile-bottom-reserved, var(--mobile-bottom-bar-offset)) + 10px);
    z-index: 7058;
    background: var(--section-head-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    padding: 0.2rem;
    max-height: min(50vh, 380px);
    overflow-y: auto;
}

body.bookings-mobile-modal-overflow-open .bookings-mobile-modal-overflow-menu {
    display: block;
}

.bookings-mobile-modal-overflow-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 7054;
}

body.bookings-mobile-modal-overflow-open .bookings-mobile-modal-overflow-backdrop {
    display: block;
}

/* Bookings modal overflow: same chrome as layout More menu (white icons @ 0.8, spacing) */
.bookings-mobile-modal-overflow-menu .mobile-page-actions-more-item,
.bookings-mobile-modal-overflow-menu .mobile-page-actions-more-item.btn {
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.bookings-mobile-modal-overflow-menu .mobile-page-actions-more-item:is(:hover, :focus, :focus-visible, :active) {
    color: var(--modal-header-color) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.bookings-mobile-modal-overflow-menu .mobile-page-actions-more-item::before {
    width: 2rem;
    height: 2rem;
    opacity: 0.8;
    filter: brightness(0) invert(1);
}

.bookings-mobile-modal-overflow-menu .mobile-page-actions-more-item .mobile-page-action-label {
    margin-left: 0.75rem;
}

/* Mobile collapsible timeline: same horizontal rhythm as other modal columns (no negative margins) */
#new_booking .bookings-timeline-mobile-collapse,
#edit_booking .bookings-timeline-mobile-collapse {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Deposit row: input + Create Deposit / Create Refund stay on one row (including narrow phones) */
.bookings-deposit-input-group {
    flex-wrap: nowrap;
    max-width: 100%;
}

.bookings-deposit-input-group .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

.bookings-deposit-input-group > .btn {
    flex-shrink: 0;
}
}

/* Booking modals: Quill snow (toolbar + editor) — spacing at all breakpoints; toolbar height is not known until JS runs */
#new_booking .bookings-quill-editor-host,
#edit_booking .bookings-quill-editor-host {
    display: block;
    margin-bottom: 1rem;
}

/* Booking modals (Vue): ensure Quill participates in normal layout (no 0-height parents). */
.bookings-edit-booking-modal .ql-container.ql-snow,
.bookings-new-booking-modal .ql-container.ql-snow {
    height: auto;
    min-height: 7.75rem;
}

.bookings-edit-booking-modal .ql-editor,
.bookings-new-booking-modal .ql-editor {
    min-height: 7.75rem;
}

.bookings-new-event-modal .ql-container.ql-snow,
.bookings-edit-event-modal .ql-container.ql-snow {
    height: auto;
    min-height: 7.75rem;
}

.bookings-new-event-modal .ql-editor,
.bookings-edit-event-modal .ql-editor {
    min-height: 7.75rem;
}

#new_booking .bookings-quill-editor-host .ql-container.ql-snow,
#edit_booking .bookings-quill-editor-host .ql-container.ql-snow {
    height: auto;
}

/* Reserve space under the General Notes stack (padding avoids flex/margin-collapse eating the gap vs Pre-order) */
#new_booking .bookings-quill-notes-col,
#edit_booking .bookings-quill-notes-col {
    padding-bottom: 1.5rem;
}

#new_booking #general_notes.bookings-quill-editor-host,
#edit_booking #edit_general_notes.bookings-quill-editor-host {
    margin-bottom: 0;
    position: relative;
    z-index: 0;
}

/* Pre-order editor: bottom spacing comes from .bookings-quill-follow padding */
#new_booking #food_preorder.bookings-quill-editor-host,
#edit_booking #edit_food_preorder.bookings-quill-editor-host {
    margin-bottom: 0;
}

#new_booking .bookings-quill-editor-host .ql-toolbar.ql-snow,
#edit_booking .bookings-quill-editor-host .ql-toolbar.ql-snow {
    flex-wrap: wrap;
    row-gap: 0.2rem;
    padding: 0.4rem 0.35rem;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

#new_booking .bookings-quill-editor-host .ql-container.ql-snow,
#edit_booking .bookings-quill-editor-host .ql-container.ql-snow {
    min-height: 7.75rem;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

#new_booking .bookings-quill-follow,
#edit_booking .bookings-quill-follow {
    display: flow-root;
    clear: both;
    /* Padding (not margin-top) keeps “Pre-order” below the General Notes Quill box in flex rows */
    margin-top: 0;
    padding-top: 2.25rem;
    /* Generous padding: margin collapse won’t steal space before the next heading */
    padding-bottom: 4.5rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

#new_booking .bookings-quill-follow-label,
#edit_booking .bookings-quill-follow-label {
    margin-top: 0 !important;
    margin-bottom: 0.35rem;
    display: block;
}

@media (max-width: 991.98px) {
    #new_booking .bookings-quill-follow-label,
    #edit_booking .bookings-quill-follow-label {
        margin-top: 60px !important;
    }
}

#new_booking h4.bookings-event-specific-heading,
#edit_booking h4.bookings-event-specific-heading {
    margin-top: 80px !important;
    clear: both;
}

/* PNG/screenshot export views (e.g. rota.export.view): keep mobile chrome out of captures */
body.is-png-export .mobile-page-title-row,
body.is-png-export .mobile-page-actions,
body.is-png-export .mobile-page-actions-more-menu,
body.is-png-export .mobile-page-actions-more-backdrop,
body.is-png-export .mobile-module-search-panel,
body.is-png-export .mobile-bookings-search-panel,
body.is-png-export #mobile-page-actions-bookings-modal,
body.is-png-export #mobile-page-actions-rota-modal,
body.is-png-export .bookings-mobile-modal-overflow-menu,
body.is-png-export .bookings-mobile-modal-overflow-backdrop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.is-png-export.mobile-page-actions-more-open .mobile-page-actions-more-menu,
body.is-png-export.mobile-page-actions-more-open .mobile-page-actions-more-backdrop {
    display: none !important;
}

@media (max-width: 991.98px) {
    html,
    body {
        overflow-x: clip;
    }

    .page-breadcrumbs {
        display: none;
    }

    .page-card-lead {
        display: none !important;
    }

    /* Opt-in: repeat breadcrumbSubtitle in the card lead on small screens (see usePageMeta.suppressMobileSubtitle). */
    .page-card-lead.page-card-lead--show-mobile {
        display: block !important;
    }

    .page-site-footer {
        display: none !important;
    }

    .page-action-sidebar {
        display: none !important;
    }

    .page-actions-fab,
    .page-action-sidebar-backdrop {
        display: none !important;
    }

    body.has-page-actions-sidebar .page-body-shell {
        display: block;
        min-height: 0;
    }

    /* Non-Inertia / legacy pages still rely on the fixed bottom bar overlay. */
    body:not(.inertia-app-layout) {
        padding-bottom: var(--mobile-bottom-reserved, var(--mobile-bottom-bar-offset));
    }

    body.is-png-export {
        padding-bottom: 0 !important;
    }
}

@media (min-width: 992px) {
    .mobile-page-title-row,
    .mobile-page-actions,
    .mobile-page-actions-more-menu,
    .mobile-page-actions-more-backdrop,
    .mobile-module-search-panel,
    .mobile-bookings-search-panel,
    #mobile-page-actions-bookings-modal,
    #mobile-page-actions-rota-modal,
    .bookings-mobile-modal-overflow-menu,
    .bookings-mobile-modal-overflow-backdrop {
        display: none !important;
    }
}

/* FullCalendar: larger month/year title; prev/next hidden (touch swipe + view buttons only) */
.fc .fc-header-toolbar .fc-toolbar-title {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
}

@media (min-width: 768px) {
    .fc .fc-header-toolbar .fc-toolbar-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 767.98px) {
    .fc .fc-prev-button,
    .fc .fc-next-button {
        display: none !important;
    }

    /* Checklist log book (opening/closing): keep month prev/next; toolbar has no “today” (see Checklist/LogBook.vue). */
    .log-book-calendar-wrap .fc .fc-prev-button,
    .log-book-calendar-wrap .fc .fc-next-button {
        display: inline-block !important;
    }

    /* Bookings calendar (#calendar): keep month prev/next arrows on mobile. */
    #calendar .fc .fc-prev-button,
    #calendar .fc .fc-next-button {
        display: inline-block !important;
    }

    .fc .fc-daygrid-day-number {
        width: 20px !important;
        height: 20px !important;
        line-height: 9pt !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Subtle hint under FullCalendar when prev/next are hidden (mobile) */
.fc-calendar-swipe-hint {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--bs-secondary-color);
}

/* Bookings + holidays pages (#calendar): shorter day-grid rows for holiday / public-holiday events */
#calendar .fc-daygrid-event.fc-calendar-holiday {
    font-size: var(--fc-small-font-size);
    line-height: 22px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 2px;
    min-height: 0;
}

#calendar .fc-daygrid-event.fc-calendar-holiday .fc-event-main {
    padding: 0 2px;
}

#calendar tr.fc-list-event.fc-calendar-holiday > td {
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
}

@media (max-width: 767.98px) {
    #calendar .fc-daygrid-event.fc-calendar-holiday {
        font-size: 0.64rem;
        line-height: 1.02;
        margin-bottom: 1px;
    }
}

.breadcrumbs-primary.sub-layout .content-wrapper{
    background-color: var(--bs-primary);
}
.breadcrumbs-primary .inner-layout .left-bar .list-group-item.active,
.breadcrumbs-primary .inner-layout .left-bar .list-group-item:hover{
    background: rgb(0 0 0 / 10%);
    color: var(--bs-white);
}

.card.shadow-active{
    box-shadow: var(--bs-box-shadow-sm)!important
}

.gemini-ai{

}
.gemini-text{
    background: linear-gradient(to right, #4285f4, #9b72cb, #d96570);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: gradient 5s linear infinite;
}
@keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}

thead th {
	background-color: var(--section-head-bg) !important;
	color: var(--modal-header-color) !important;
	border-bottom: 1px solid var(--border-subtle) !important;
	font-weight: 700;
}

.checklist_item {
	display: flex;
	justify-content: center;
}

.checklist_item > input {
    width: 50px;
    height: 50px;
    display: flex;
    margin: auto;
    justify-content: center;
	background-color: #ebe6fa;
}

.checklist_item > .form-input {
	width: 100px;
	text-align: center;
	font-size: 16pt;
	border: none;
	border-radius: 2px;
}

/* Whole-row tap toggles checkbox (see partials/checklist_row_toggle) */
.content-area table:has(.checklist_input) tbody tr:has(input.checklist_input[type="checkbox"]:not([disabled])) {
	cursor: pointer;
}

/* Checklist tables: section name in first thead cell (replaces duplicate h3 + “Details”) */
.checklist-section-th {
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.25;
	vertical-align: middle;
}

thead .checklist-section-th {
	color: var(--modal-header-color);
}

.checklist-section-th-spacer {
	padding-left: 0.35rem !important;
	padding-right: 0.35rem !important;
}

.checklist-mobile-table thead th {
	border-bottom: none !important;
}

/* Last checklist section table: space before date/signed row (desktop + mobile) */
.content-area .card-body > .row > .col-12:has(.checklist-mobile-table):has(+ .col-12.checklist-signoff-col) .checklist-mobile-table {
	margin-bottom: 1.5rem; /* mb-4 */
}

input, select, textarea, .choices, .choices__inner {
    background-color: var(--content-bg) !important;
}

.card-header {
    background: var(--section-head-bg);
    color: var(--modal-header-color);
    padding: 15px 20px;
}

/* Data tables: light grey field + border so blocks read clearly on white card bodies */
.table-responsive {
    border: 1px solid var(--table-wrap-border);
    border-radius: 0;
    background: var(--table-wrap-bg);
    margin-top: 0 !important;
    overflow: hidden;
}

.dataTables_wrapper {
    border: 1px solid var(--table-wrap-border);
    border-radius: 0.375rem;
    background: var(--table-wrap-bg);
    margin-top: 0 !important;
    overflow: hidden;
}

.table-responsive > .table {
    --bs-table-bg: var(--table-wrap-bg);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.035);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.055);
    background-color: var(--table-wrap-bg);
}

.dataTables_wrapper .dataTable {
    --bs-table-bg: var(--table-wrap-bg);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.035);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.055);
    background-color: var(--table-wrap-bg);
}

/* Edit Event modal: linked bookings — same chrome as .table-responsive but no clip / no min-width scroll */
.event-linked-bookings-wrap {
    border: 1px solid var(--table-wrap-border);
    border-radius: 0.375rem;
    background: var(--table-wrap-bg);
    margin-top: 0 !important;
    overflow: visible;
}

@media (max-width: 767.98px) {
    .event-linked-bookings-wrap {
        border-radius: 0;
    }
}

/* Edit Event modal: linked bookings — stacked cards (all viewports) */
.event-linked-bookings-list-view {
    padding: 0.5rem;
    background-color: var(--linked-card-bg);
}

.event-linked-booking-card {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--table-border-color);
    background-color: var(--linked-card-item-bg);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.event-linked-booking-card:hover {
    background-color: var(--table-row-odd-bg);
}

.event-linked-booking-card:last-child {
    border-bottom: 0;
}

@media (min-width: 768px) {
    .event-linked-bookings-list-view {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .event-linked-booking-card {
        border: 1px solid var(--table-border-color);
        border-radius: 2px;
        padding: 0.65rem 1rem;
    }

    .event-linked-booking-card:last-child {
        border-bottom: 1px solid var(--table-border-color);
    }
}

.event-linked-booking-card__name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

@media (min-width: 768px) {
    .event-linked-booking-card__name {
        font-size: 1rem;
    }
}

.event-linked-booking-card__lines {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--text-body);
}

.event-linked-booking-card__label {
    display: inline-block;
    min-width: 3.5rem;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.event-linked-booking-card__value {
    word-break: break-word;
}

.event-linked-booking-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.event-linked-booking-card__actions .badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.28em 0.5em;
}

/* Edit booking modal: deposits — desktop table; mobile = labeled card rows */
.bookings-deposits-wrap {
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    background: var(--table-card-bg);
    overflow: hidden;
}

.bookings-deposits-wrap .table {
    margin-bottom: 0;
}

.bookings-deposits-wrap table.bookings-deposits-responsive {
    width: 100%;
    table-layout: fixed;
}

.bookings-deposits-wrap table.bookings-deposits-responsive th,
.bookings-deposits-wrap table.bookings-deposits-responsive td {
    word-break: break-word;
    hyphens: auto;
}

.bookings-deposits-wrap table.bookings-deposits-responsive td.bookings-deposit-cell--actions .btn,
.bookings-deposits-wrap table.bookings-deposits-responsive td.text-end .btn {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .bookings-deposit-method-select {
        max-width: 100px;
    }

    .bookings-deposit-tid-input {
        max-width: 140px;
    }
}

@media (max-width: 767.98px) {
    .bookings-deposits-wrap table.bookings-deposits-responsive thead {
        display: none;
    }

    .bookings-deposits-wrap table.bookings-deposits-responsive tbody tr {
        display: block;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--table-border-color);
    }

    .bookings-deposits-wrap table.bookings-deposits-responsive tbody tr:last-child {
        border-bottom: 0;
    }

    .bookings-deposits-wrap table.bookings-deposits-responsive tbody td {
        display: grid;
        grid-template-columns: minmax(4.75rem, 32%) 1fr;
        gap: 0.1rem 0.5rem;
        align-items: start;
        padding: 0.25rem 0;
        border: 0;
        font-size: 0.875rem;
        line-height: 1.3;
    }

    .bookings-deposits-wrap table.bookings-deposits-responsive tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--text-muted);
        padding-top: 0.15rem;
    }

    .bookings-deposits-wrap table.bookings-deposits-responsive tbody td.bookings-deposit-cell--actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-top: 0.35rem;
        padding-top: 0.35rem;
        border-top: 1px solid var(--linked-card-bg);
    }

    .bookings-deposits-wrap table.bookings-deposits-responsive tbody td.bookings-deposit-cell--actions::before {
        content: attr(data-label);
        flex-basis: 100%;
        margin-bottom: 0.1rem;
        font-weight: 600;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--text-muted);
    }

    .bookings-deposit-method-select,
    .bookings-deposit-tid-input {
        width: 100%;
        max-width: none;
    }

    .bookings-deposits-wrap table.bookings-deposits-responsive tbody td .badge {
        justify-self: start;
        width: fit-content;
        max-width: 100%;
    }
}

.dataTables_wrapper table, .d-footer {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.table {
    margin-bottom: 0;
    border-color: var(--table-border-color);
}

.table > :not(caption) > * > * {
    padding: 0.75rem 0.9rem;
    vertical-align: middle;
}

.table tbody tr:nth-of-type(odd) {
    background-color: var(--table-row-odd-bg);
}

.table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
}

.table tbody tr:hover > * {
    background-color: var(--table-row-hover-bg) !important;
}

table.dataTable tbody tr:hover > * {
    background-color: var(--table-row-hover-bg) !important;
}

.form-check-input:checked {
    background-color: var(--bs-primary) !important;
}

#pagination-empty, #pagination-loader {
    margin-top: 15px;
}

#pagination,
#history-pagination {
    margin-top: 15px;
    justify-content: center;
}

/* Shared compact pagination style for table listings */
#pagination li,
#pagination .page-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#history-pagination li,
#history-pagination .page-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#pagination .pagination-link,
#pagination li > a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0.32rem 0.72rem !important;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 2px !important;
    border: 1px solid var(--pagination-border) !important;
    background: var(--pagination-bg) !important;
    color: var(--section-head-bg) !important;
    text-decoration: none;
    box-shadow: none !important;
    transition: all .15s ease-in-out;
}

#history-pagination .pagination-link,
#history-pagination li > a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0.32rem 0.72rem !important;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 2px !important;
    border: 1px solid var(--pagination-border) !important;
    background: var(--pagination-bg) !important;
    color: var(--section-head-bg) !important;
    text-decoration: none;
    box-shadow: none !important;
    transition: all .15s ease-in-out;
}

#pagination .pagination-link:hover,
#pagination li > a.btn:hover {
    background: var(--pagination-hover-bg) !important;
    border-color: var(--pagination-hover-border) !important;
    color: var(--pagination-hover-color) !important;
}

#history-pagination .pagination-link:hover,
#history-pagination li > a.btn:hover {
    background: var(--pagination-hover-bg) !important;
    border-color: var(--pagination-hover-border) !important;
    color: var(--pagination-hover-color) !important;
}

/* Previous/Next: match page-number styling (but wider) */
#pagination #pagination-previous > a.btn,
#pagination #pagination-next > a.btn,
#history-pagination #history-pagination-previous > a.btn,
#history-pagination #history-pagination-next > a.btn {
    min-width: 4.75rem;
    height: 2.25rem;
    padding: 0.32rem 0.72rem !important;
    font-weight: 600;
    border-color: var(--pagination-border) !important;
    background: var(--pagination-bg) !important;
    color: var(--section-head-bg) !important;
}

#pagination #pagination-previous > a.btn:hover,
#pagination #pagination-next > a.btn:hover,
#history-pagination #history-pagination-previous > a.btn:hover,
#history-pagination #history-pagination-next > a.btn:hover {
    border-color: var(--pagination-hover-border) !important;
    background: var(--pagination-hover-bg) !important;
    color: var(--pagination-hover-color) !important;
}

#pagination .pagination-link.active {
    background: var(--section-head-bg) !important;
    border-color: var(--section-head-bg) !important;
    color: var(--modal-header-color) !important;
}

#history-pagination .pagination-link.active {
    background: var(--section-head-bg) !important;
    border-color: var(--section-head-bg) !important;
    color: var(--modal-header-color) !important;
}

#pagination li > a.disabled,
#pagination li.disabled > a {
    background: var(--pagination-disabled-bg) !important;
    border-color: var(--pagination-border) !important;
    color: var(--pagination-disabled-color) !important;
    pointer-events: none;
}

#history-pagination li > a.disabled,
#history-pagination li.disabled > a {
    background: var(--pagination-disabled-bg) !important;
    border-color: var(--pagination-border) !important;
    color: var(--pagination-disabled-color) !important;
    pointer-events: none;
}

#pagination #pagination-previous > a.disabled,
#pagination #pagination-next > a.disabled,
#history-pagination #history-pagination-previous > a.disabled,
#history-pagination #history-pagination-next > a.disabled,
#pagination #pagination-previous.disabled > a,
#pagination #pagination-next.disabled > a,
#history-pagination #history-pagination-previous.disabled > a,
#history-pagination #history-pagination-next.disabled > a {
    background: var(--pagination-disabled-bg) !important;
    border-color: var(--pagination-border) !important;
    color: var(--pagination-disabled-color) !important;
}

.twitter-typeahead {
	width: calc(100% - 70px) !important;
}

.tt-menu {
	z-index: 1040 !important;
	max-height: 225px;
	height: fit-content;
	box-shadow: 0 0 30px rgb(0 0 0 / 3%);
	border-radius: 2px;
	color: #607080;
	background-clip: padding-box;
	background-color: var(--table-card-bg);
	font-size: 1rem;
	min-width: 35rem;
	padding: 0.2rem 0;
	overflow-y: scroll;
	width: 100%;
}
.tt-suggestion {
	background-color: transparent;
	border: 0;
	clear: both;
	color: #212529;
	display: block;
	font-weight: 400;
	padding: 0.45rem 1.5rem;
	text-align: inherit;
	text-decoration: none;
	white-space: nowrap;
	width: 100%;
	transition: all .25s;
	font-size: 1rem;
	cursor: pointer;
	margin-bottom: 0;
	border-bottom: 1px solid #ddd;
	width: 100%;
}
.tt-suggestion:active, .tt-suggestion:focus, .tt-suggestion:hover {
	background-color: #435ebe;
	color: #fff;
	text-decoration: none;
}
.tt-dataset p {
	margin-bottom: 0 !important;
}

/* Stock products list: single connected search bar (icon + field + scope + buttons) */
.stock-products-search-bar-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.stock-products-search-bar {
	min-width: min(100%, 22rem);
}
@media (min-width: 576px) {
	.stock-products-search-bar {
		min-width: 28rem;
	}
}
@media (min-width: 992px) {
	.stock-products-search-bar {
		min-width: 0;
		width: 100%;
	}
}

/* Bootstrap 5 table badges: legacy theme CSS can reset .badge so bg-* has no visible fill */
.content-area .table .badge {
	display: inline-block;
	padding: 0.35em 0.65em;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: var(--bs-border-radius, 2px);
}

.content-area .table .badge.bg-primary {
	background-color: rgba(var(--bs-primary-rgb), 1) !important;
	color: #fff !important;
}

.content-area .table .badge.bg-danger {
	background-color: rgba(var(--bs-danger-rgb), 1) !important;
	color: #fff !important;
}

.content-area .table .badge.bg-success {
	background-color: rgba(var(--bs-success-rgb), 1) !important;
	color: #fff !important;
}

.content-area .table .badge.bg-warning.text-dark {
	background-color: rgba(var(--bs-warning-rgb), 1) !important;
	color: #212529 !important;
}

/* Not in default Bootstrap utility bundle; used on stock reports “Misc” row */
.content-area .table .badge.bg-pink {
	background-color: var(--bs-pink) !important;
	color: #fff !important;
}

#module-search {
    background-color: var(--table-card-bg) !important;
    border-color: var(--pagination-border);
}

.module-item > span.position-absolute {
    top: -6px !important;
    right: -6px !important;
}

.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.card-header .mobile-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

/* System-wide: no minimum width on tables (fit viewport; scroll only when cell content requires it). */
table,
.table {
    min-width: 0 !important;
}

.mobile-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--table-card-bg);
    border-top: 1px solid var(--border-subtle);
    padding: 0.75rem;
}

.report-filter-row {
    row-gap: 0.25rem;
}

@media (max-width: 767.98px) {
    .mobile-supplier-flow {
        flex-wrap: wrap;
    }

    .mobile-supplier-flow > .form-control,
    .mobile-supplier-flow > .input-group-text,
    .mobile-supplier-flow > .btn {
        width: 100%;
        border-radius: var(--bs-border-radius) !important;
    }
}

@media (max-width: 991.98px) {
    #pagination #pagination-previous > a.btn,
    #pagination #pagination-next > a.btn,
    #history-pagination #history-pagination-previous > a.btn,
    #history-pagination #history-pagination-next > a.btn {
        min-width: 6.2rem;
    }

    .twitter-typeahead {
        width: 100% !important;
    }

    .tt-menu {
        min-width: 100%;
    }

    .mobile-stack > .btn {
        width: 100%;
    }

    .report-filter-row {
        background: #f7f9fc;
        border-radius: 2px;
        padding: 0.25rem;
    }
}

/* DirtyGuard: pending save — sidebar (pale mint), modal/footer (same greens as mobile bar) */
@keyframes dg-save-pulse-bg-sidebar {
    0%, 100% {
        background-color: #b4edaf;
    }
    50% {
        background-color: #9fe39a;
    }
}

@keyframes dg-save-pulse-bg-modal {
    0%, 100% {
        background-color: #20751b;
    }
    50% {
        background-color: #2a8f24;
    }
}

.btn.dg-save-pending,
button.dg-save-pending:not(.mobile-page-action-btn) {
    animation: dg-save-pulse-bg-modal 1s ease-in-out infinite;
    transition: none;
}

.page-action-sidebar-body .btn.dg-save-pending {
    animation: dg-save-pulse-bg-sidebar 1s ease-in-out infinite;
}

.btn.dg-save-pending:hover,
.btn.dg-save-pending:focus-visible,
.btn.dg-save-pending:active,
button.dg-save-pending:not(.mobile-page-action-btn):hover,
button.dg-save-pending:not(.mobile-page-action-btn):focus-visible,
button.dg-save-pending:not(.mobile-page-action-btn):active {
    animation: dg-save-pulse-bg-modal 1s ease-in-out infinite;
}

.page-action-sidebar-body .btn.dg-save-pending:hover,
.page-action-sidebar-body .btn.dg-save-pending:focus-visible,
.page-action-sidebar-body .btn.dg-save-pending:active {
    animation: dg-save-pulse-bg-sidebar 1s ease-in-out infinite;
}

.page-action-sidebar-body .btn.dg-save-pending:focus-visible {
    outline: 0;
    box-shadow: none;
    animation: dg-save-pulse-bg-sidebar 1s ease-in-out infinite;
}

[data-bs-theme="dark"] .btn.dg-save-pending,
[data-bs-theme="dark"] button.dg-save-pending:not(.mobile-page-action-btn) {
    animation: dg-save-pulse-bg-modal 1s ease-in-out infinite;
}

[data-bs-theme="dark"] .page-action-sidebar-body .btn.dg-save-pending {
    animation: dg-save-pulse-bg-sidebar 1s ease-in-out infinite;
}

[data-bs-theme="dark"] .btn.dg-save-pending:hover,
[data-bs-theme="dark"] .btn.dg-save-pending:focus-visible,
[data-bs-theme="dark"] .btn.dg-save-pending:active,
[data-bs-theme="dark"] button.dg-save-pending:not(.mobile-page-action-btn):hover,
[data-bs-theme="dark"] button.dg-save-pending:not(.mobile-page-action-btn):focus-visible,
[data-bs-theme="dark"] button.dg-save-pending:not(.mobile-page-action-btn):active {
    animation: dg-save-pulse-bg-modal 1s ease-in-out infinite;
}

[data-bs-theme="dark"] .page-action-sidebar-body .btn.dg-save-pending:hover,
[data-bs-theme="dark"] .page-action-sidebar-body .btn.dg-save-pending:focus-visible,
[data-bs-theme="dark"] .page-action-sidebar-body .btn.dg-save-pending:active {
    animation: dg-save-pulse-bg-sidebar 1s ease-in-out infinite;
}

[data-bs-theme="dark"] .page-action-sidebar-body .btn.dg-save-pending:focus-visible {
    animation: dg-save-pulse-bg-sidebar 1s ease-in-out infinite;
}

/* Mobile bottom bar (< lg): same modal greens — higher specificity than generic button rule */
@media (max-width: 991.98px) {
    button.mobile-page-action-btn.dg-save-pending,
    button.mobile-page-actions-more-item.dg-save-pending,
    .mobile-page-action-btn.dg-save-pending,
    .mobile-page-actions-more-item.dg-save-pending {
        animation: dg-save-pulse-bg-modal 1s ease-in-out infinite;
        transition: none;
    }

    button.mobile-page-action-btn.dg-save-pending:hover,
    button.mobile-page-action-btn.dg-save-pending:focus-visible,
    button.mobile-page-action-btn.dg-save-pending:active,
    button.mobile-page-actions-more-item.dg-save-pending:hover,
    button.mobile-page-actions-more-item.dg-save-pending:focus-visible,
    button.mobile-page-actions-more-item.dg-save-pending:active,
    .mobile-page-action-btn.dg-save-pending:hover,
    .mobile-page-action-btn.dg-save-pending:focus-visible,
    .mobile-page-action-btn.dg-save-pending:active,
    .mobile-page-actions-more-item.dg-save-pending:hover,
    .mobile-page-actions-more-item.dg-save-pending:focus-visible,
    .mobile-page-actions-more-item.dg-save-pending:active {
        animation: dg-save-pulse-bg-modal 1s ease-in-out infinite;
    }

    [data-bs-theme="dark"] button.mobile-page-action-btn.dg-save-pending,
    [data-bs-theme="dark"] button.mobile-page-actions-more-item.dg-save-pending,
    [data-bs-theme="dark"] .mobile-page-action-btn.dg-save-pending,
    [data-bs-theme="dark"] .mobile-page-actions-more-item.dg-save-pending,
    [data-bs-theme="dark"] button.mobile-page-action-btn.dg-save-pending:hover,
    [data-bs-theme="dark"] button.mobile-page-action-btn.dg-save-pending:focus-visible,
    [data-bs-theme="dark"] button.mobile-page-action-btn.dg-save-pending:active,
    [data-bs-theme="dark"] button.mobile-page-actions-more-item.dg-save-pending:hover,
    [data-bs-theme="dark"] button.mobile-page-actions-more-item.dg-save-pending:focus-visible,
    [data-bs-theme="dark"] button.mobile-page-actions-more-item.dg-save-pending:active {
        animation: dg-save-pulse-bg-modal 1s ease-in-out infinite;
    }
}

/* Server-sorted data tables: active column — dark bar + green bottom accent — see 19cloud.mdc §11 */
.sortable-th {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

thead.table-light .sortable-th.is-sorted,
.sortable-th.is-sorted {
    background-color: var(--section-head-bg) !important;
    box-shadow: inset 0 -3px 0 var(--bs-success);
    color: var(--modal-header-color);
}

a.sortable-th-link {
    color: inherit;
    text-decoration: none;
}

a.sortable-th-link:hover {
    color: inherit;
    text-decoration: underline;
}

th.sortable-th a.sortable-th-link {
    display: inline;
}

/* Drag-to-scroll helper for wide tables (enabled when hint is shown). */
.drag-scroll {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.drag-scroll.dragging {
    cursor: grabbing;
}
.drag-scroll.dragging,
.drag-scroll.dragging * {
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* ── Cash Management: stat cards ── */
.cm-stat-card { border: 1px solid var(--bs-border-color); }
.cm-stat-header-success { background: var(--cm-stat-success-bg); color: var(--cm-stat-success-color); }
.cm-stat-header-danger  { background: var(--cm-stat-danger-bg);  color: var(--cm-stat-danger-color); }
.cm-stat-value-success  { font-size: 1.85rem; font-weight: 800; color: var(--cm-stat-success-value); }
.cm-stat-value-danger   { font-size: 1.85rem; font-weight: 800; color: var(--cm-stat-danger-value); }
.cm-stat-subtitle       { opacity: .9; }

/* ── Cash Management: bill receipt table ── */
.cm-bill-thead    { background: linear-gradient(160deg, var(--cm-bill-thead-start) 0%, var(--cm-bill-thead-end) 100%); }
.cm-bill-th       { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--cm-bill-th-color); border: none; padding: .55rem .65rem; }
.cm-bill-td       { padding: .5rem .65rem; }
.cm-bill-td-time  { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cm-bill-cell-muted); font-weight: 600; }
.cm-bill-td-pos   { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cm-bill-cell-muted); font-weight: 600; text-align: center; }
.cm-bill-td-staff { white-space: nowrap; max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; color: var(--cm-bill-cell-staff); font-weight: 600; }
.cm-bill-td-detail { font-weight: 600; color: var(--cm-bill-cell-detail); word-break: break-word; }
.cm-bill-td-amount { font-variant-numeric: tabular-nums; }
.cm-bill-total-label { text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; font-weight: 800; color: var(--cm-bill-cell-muted); }
.cm-bill-total-value { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.1rem; color: var(--cm-bill-total-value); }

/* ── Stock Movements: row indicator borders ── */
.movement-row-incomplete { border-left: 4px solid var(--bs-danger); padding-left: 10px; }
.movement-row-complete   { border-left: 4px solid var(--bs-success); padding-left: 10px; }