/*
 * Fallback defaults for the 4-color scheme (matching KCRM_Colors::defaults()).
 * KCRM_Front::enqueue_assets() adds an inline style overriding these with
 * whatever's saved on the Appearance settings screen, so this block is only
 * ever seen before that loads (or if colors have never been customized).
 */
:root {
	--kcrm-color-primary: #1e3a5f;
	--kcrm-color-secondary: #1f2937;
	--kcrm-color-accent: #b45309;
	--kcrm-color-highlight: #fff6b3;
	/*
	 * WCAG 2.1 AA (4.5:1) pairings computed from the colors above by
	 * KCRM_Colors::inline_css() -- see that method's docblock. These
	 * fallback values match what it computes for the defaults above, so
	 * there's no flash of different contrast before the inline style loads.
	 */
	--kcrm-color-primary-text: #ffffff;
	--kcrm-color-secondary-text: #ffffff;
	--kcrm-color-highlight-text: #000000;
	--kcrm-color-primary-readable: #1e3a5f;
	--kcrm-color-accent-readable: #b45309;
}

.kcrm-front {
	max-width: 1200px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.5;
}

/* Use more of the viewport on large screens -- the list tables are wide. */
@media (min-width: 1600px) {
	.kcrm-front {
		max-width: 1440px;
	}
}

@media (min-width: 1920px) {
	.kcrm-front {
		max-width: 1680px;
	}
}

.kcrm-front-nav {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 0px;
	border-bottom: 1px solid #dcdcde;
}

.kcrm-front-nav a {
	display: inline-block;
	font-size: 1.1rem;
	padding: 10px 1.25em;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	color: #50575e;
}

.kcrm-front-nav .dashicons {
	vertical-align: middle;
	margin-right: 4px;
	margin-top: -2px;
}

.kcrm-front-nav a.is-active {
	border-bottom-color: var(--kcrm-color-primary);
	color: var(--kcrm-color-primary-readable);
	font-weight: 600;
}

.kcrm-front-nav a:hover,.kcrm-front-nav a:focus {
	border-color: var(--kcrm-color-primary);
}

.kcrm-front-nav-logout {
	margin-left: auto;
	color: #a94442;
}

.kcrm-front-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 10px 1em;
	cursor: pointer;
	color: #50575e;
}

.kcrm-front-nav-toggle .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.kcrm-front .notice {
	padding: 10px 14px;
	margin: 0 0 2.5em;
	border-left: 4px solid #dcdcde;
	background: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

.kcrm-front .notice-success { border-left-color: #1a7a3a; }
.kcrm-front .notice-error { border-left-color: #b32d2e; }

.kcrm-company-header {
	background: linear-gradient(180deg, #f3f3f3 0%, #ffffff 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 0 3.5em;
	padding: 2.5em 1.25em;
}

.kcrm-front .kcrm-company-switcher {
	margin: 0;
}

.kcrm-front .kcrm-company-switcher select {
	min-width: 220px;
}

.kcrm-current-company-logo {
	margin: 0;
}

.kcrm-current-company-logo img {
	max-width: 200px;
	max-height: 100px;
	height: auto;
	object-fit: contain;
}

.kcrm-front-screen a, .kcrm-front-screen button{
	text-underline-offset: 6px;
}

.kcrm-front-screen a:link, .kcrm-front-screen a:visited, .kcrm-front-screen button:link, .kcrm-front-screen button:visited {
	text-decoration-color: var(--kcrm-color-accent);
	text-decoration-thickness: 1px;
}

.kcrm-front-screen a:hover, .kcrm-front-screen a:focus, .kcrm-front-screen button:hover, .kcrm-front-screen button:focus {
	text-decoration-color: var(--kcrm-color-secondary);
	text-decoration-thickness: 2px !important;
	text-decoration: underline;
}

a.kcrm-button .dashicons:link, a .dashicons:link, .kcrm-card a:link, a.kcrm-button .dashicons:visited, a .dashicons:visited, .kcrm-card a:visited, .kcrm-front-screen button:hover .dashicons, .kcrm-front-screen button:focus .dashicons, a .dashicons, .kcrm-profile-tablist a {
	text-decoration: none;
}

a.kcrm-button:hover .dashicons, a:hover .dashicons, .kcrm-card a:hover, .kcrm-profile-tablist a:hover, .kcrm-profile-tablist a:focus {
	text-decoration: none;
}

.kcrm-front-screen h2 {
	margin-bottom: 1.5em;
}

.kcrm-front h3 {
	border-top: 1px solid var(--kcrm-color-accent);
	margin-top: 3.5em;
	padding-top: 1.5em;
}

/* An h3 immediately under an h2 is that section's own subheading, not the
   start of a new section below it -- the spacing/divider above is only
   wanted between one section's content and the next section's heading. */
.kcrm-front h2 + h3 {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

.kcrm-profile-tabs {
	border: 1px solid #dcdcde;
	border-radius: 4px;
	margin: 0 0 3.5em;
}

.kcrm-profile-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 0 8px;
	background: #f6f7f7;
	border-bottom: 1px solid #dcdcde;
	border-radius: 4px 4px 0 0;
}

.kcrm-profile-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 18px 12px;
	font-weight: 600;
	font-size: 14px;
	color: #646970;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

.kcrm-profile-tab:hover,
.kcrm-profile-tab:focus {
	color: var(--kcrm-color-primary-readable);
	border-color: var(--kcrm-color-primary);
	text-decoration: none;
}

.kcrm-profile-tab.is-active {
	color: var(--kcrm-color-primary-readable);
	border-bottom-color: var(--kcrm-color-primary);
}

.kcrm-profile-tab-badge {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 10px;
	background: var(--kcrm-color-highlight);
	color: var(--kcrm-color-highlight-text);
	font-size: 11px;
	font-weight: 700;
}

.kcrm-profile-tab-panel {
	padding: 1.75em 1.75em 2em;
}

/* A tab panel's own first heading shouldn't repeat the section-divider styling meant for stacked sections -- it's already inside the tab's own bordered box. */
.kcrm-profile-tab-panel > h3:first-child {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

.kcrm-front-table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 3.5em;
}

.kcrm-front-table th,
.kcrm-front-table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid #eee;
}

.kcrm-front-table th {
	background: var(--kcrm-color-secondary);
	font-size: 11px;
	text-transform: uppercase;
	color: var(--kcrm-color-secondary-text);
}

/*
 * Sortable column headers (e.g. Status) wrap their label in an <a>. Links
 * don't inherit `color` from an ancestor by default, so without this the
 * anchor falls back to the page's default link color instead of the
 * WCAG-paired --kcrm-color-secondary-text used for the rest of the header --
 * on a dark header background that can drop well below 4.5:1.
 */
.kcrm-front-table th a:link,
.kcrm-front-table th a:visited {
	color: inherit;
}

.kcrm-front-table tr:hover {
	background: var(--kcrm-color-highlight);
	color: var(--kcrm-color-highlight-text);
}

/* Row-action links in a list table's Actions column. Inline, divided by a thin
   rule, on desktop; stacked one-per-line on tablet portrait and smaller (see
   the max-width: 1024px block). The divider is a left border rather than a "|"
   pseudo-element so it isn't part of any link (not clickable, not underlined). */
.kcrm-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
}

.kcrm-actions > a:not(:first-child) {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid #c3c4c7;
}

.kcrm-pagination {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 2.5em;
}

.kcrm-pagination-status {
	color: #646970;
	font-size: 13px;
}

.kcrm-date-range-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 1em;
}

.kcrm-date-range-filter label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.kcrm-date-range-custom {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 12px;
}

.kcrm-date-range-custom label {
	font-weight: normal;
}

.kcrm-status-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 1em;
}

.kcrm-status-filter fieldset {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	border: none;
	padding: 0;
	margin: 0;
}

.kcrm-status-filter legend {
	font-weight: 600;
	padding: 0;
}

.kcrm-status-filter label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: normal;
}

.kcrm-list-search {
	margin: 0 0 1em;
}

.kcrm-list-search input[type="search"] {
	width: 100%;
	max-width: 320px;
	padding: 8px;
	border: 1px solid #8c8f94;
	border-radius: 3px;
}

.kcrm-job-row {
	background: #f6f7f7;
}

.kcrm-job-row td:first-child {
	padding-left: 24px;
	color: #50575e;
	white-space: nowrap;
}

.kcrm-invoice-group-header td {
	background: #eef0f2;
	font-weight: 600;
	padding-top: 10px;
	padding-bottom: 10px;
}

.kcrm-invoice-group-toggle {
	text-decoration: none;
	color: inherit;
}

.kcrm-invoice-group-toggle .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
}

.kcrm-front-form p {
	margin: 0 0 14px;
}

.kcrm-front-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.kcrm-front-form input[type=text],
.kcrm-front-form input[type=email],
.kcrm-front-form input[type=number],
.kcrm-front-form input[type=date],
.kcrm-front-form input[type=month],
.kcrm-front-form select,
.kcrm-front-form textarea {
	width: 100%;
	max-width: 480px;
	padding: 8px;
	border: 1px solid #8c8f94;
	border-radius: 3px;
}

/*
 * wp_login_form()'s own markup (#loginform, .login-username/-password/
 * -remember/-submit, input.input) -- not something this plugin renders
 * itself, so these rules are scoped under the .kcrm-front-login wrapper
 * around it rather than reusing .kcrm-front-form's selectors directly.
 */
.kcrm-front-login {
	max-width: 380px;
	margin: 48px auto;
	padding: 32px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.kcrm-front-login form p {
	margin: 0 0 16px;
}

.kcrm-front-login label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.kcrm-front-login input.input {
	width: 100%;
	padding: 8px;
	border: 1px solid #8c8f94;
	border-radius: 3px;
	font-size: 15px;
	box-sizing: border-box;
}

.kcrm-front-login .login-remember label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: normal;
	margin-bottom: 0;
}

.kcrm-front-login .login-remember input[type="checkbox"] {
	width: auto;
	margin: 0;
}

.kcrm-front-login .login-submit {
	margin: 24px 0 0;
}

.kcrm-front-login .button.button-primary {
	display: inline-block;
	padding: 8px 2.5em;
	border: 1px solid var(--kcrm-color-primary);
	border-radius: 3px;
	background: var(--kcrm-color-primary);
	color: var(--kcrm-color-primary-text);
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	cursor: pointer;
}

.kcrm-front-login .button.button-primary:hover,
.kcrm-front-login .button.button-primary:focus {
	opacity: 0.9;
}

.kcrm-button-group {
	margin: 2.5em 0;
}

.kcrm-button {
	display: inline-block;
	margin: 4px 4px 4px 0;
	padding: 8px 2.5em;
	border: 1px solid var(--kcrm-color-primary);
	border-radius: 3px;
	background: #f6f7f7;
	color: var(--kcrm-color-primary-readable);
	text-decoration: none;
	cursor: pointer;
	font: inherit;
	line-height: 1.5;
	vertical-align: middle;
}

.kcrm-button-primary {
	background: var(--kcrm-color-primary);
	color: var(--kcrm-color-primary-text);
}

a.kcrm-button-primary:link, a.kcrm-button-primary:visited {
	text-decoration-color: transparent;
	text-underline-offset: 6px;
	text-decoration-thickness: 0px !important;
	text-decoration: underline;
}

a.kcrm-button-primary:hover, a.kcrm-button-primary:focus {
	text-decoration-color: var(--kcrm-color-highlight);
	text-decoration-thickness: 2px !important;
}

/* Extra emphasis for a screen's single payoff action (e.g. the invoice Update/Create submit), layered on top of .kcrm-button-primary rather than changing it everywhere. */
.kcrm-button-emphasized {
	margin-top: 1.5em;
	padding: 13px 2.6em;
	font-size: 1.05rem;
	font-weight: 600;
	border-radius: 5px;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .12), 0 6px 16px rgba(0, 0, 0, .18);
}

.kcrm-button-emphasized .dashicons {
	vertical-align: middle;
	margin-top: -2px;
}

.kcrm-overview-columns {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 2.5em 0 24px;
}

.kcrm-overview-cards-col,
.kcrm-overview-actions-col {
	flex: 1;
}

.kcrm-overview-cards-col .kcrm-button-group {
	margin-top: 0;
}

.kcrm-dashboard-cards {
	display: flex;
	gap: 2.5em;
	margin: 2.5em 0;
	flex-wrap: wrap;
}

.kcrm-card {
	display: block;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 2.5em 24px;
	min-width: 160px;
	text-decoration: none;
	color: inherit;
}

a.kcrm-card:hover,
a.kcrm-card:focus {
	border-color: var(--kcrm-color-primary);
	text-decoration: none;
}

/* Overrides the generic .kcrm-front h3 (a full-width section-heading divider) -- a card's own h3 is just a small title above its icon/number, not a page section. */
.kcrm-card h3 {
	border-top: none;
	margin: 0 0 8px;
	padding-top: 0;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #50575e;
}

.kcrm-card-icon {
	display: block;
	font-size: 32px;
	width: 32px;
	height: 32px;
	margin-bottom: 10px;
	color: var(--kcrm-color-accent-readable);
}

.kcrm-card-number {
	display: block;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--kcrm-color-accent-readable);
}

.kcrm-card-label {
	display: block;
	color: #646970;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.kcrm-card-arrow {
	display: inline-block;
	font-size: 14px;
	width: 14px;
	height: 14px;
	vertical-align: middle;
	color: var(--kcrm-color-primary-readable);
	transition: transform .15s ease;
}

a.kcrm-card:hover .kcrm-card-arrow,
a.kcrm-card:focus .kcrm-card-arrow {
	transform: translateX(3px);
}

.kcrm-bar-chart {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 180px;
	margin: 1em 0 2.5em;
	border-bottom: 1px solid #dcdcde;
}

.kcrm-bar-chart-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}

.kcrm-bar-chart-bar {
	width: 100%;
	max-width: 36px;
	background: var(--kcrm-color-accent);
	border-radius: 2px 2px 0 0;
	min-height: 2px;
}

.kcrm-bar-chart-label {
	margin-top: 6px;
	font-size: 11px;
	color: #646970;
	white-space: nowrap;
}

.kcrm-bar-chart-value {
	margin-top: 2px;
	font-size: 11px;
	font-weight: 600;
	color: var(--kcrm-color-primary-readable);
	white-space: nowrap;
}

.kcrm-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	background: #f0f0f1;
	font-size: 12px;
}

.kcrm-status-paid { background: #d4f4dd; color: #1a7a3a; }
.kcrm-status-partial { background: #fff3cd; color: #8a6100; }
.kcrm-status-open { background: #fde8d2; color: #9a5b12; }
.kcrm-status-void { background: #f0f0f1; color: #787c82; text-decoration: line-through; }
.kcrm-status-draft { background: #f0f0f1; color: #50575e; }
.kcrm-status-active { background: #d4f4dd; color: #1a7a3a; }
.kcrm-status-inactive { background: #f0f0f1; color: #787c82; }

.kcrm-recent-actions {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.kcrm-recent-actions li {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 1.6;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f1;
}

.kcrm-recent-actions li:last-child {
	border-bottom: none;
}

.kcrm-recent-actions .dashicons {
	color: #646970;
	flex-shrink: 0;
}

.kcrm-recent-actions-time {
	margin-left: auto;
	color: #646970;
	font-size: 12px;
	white-space: nowrap;
}

.kcrm-recent-actions .kcrm-recent-actions-extra {
	display: none;
}

.kcrm-recent-actions-toggle .dashicons {
	vertical-align: middle;
}

.kcrm-front #kcrm-line-items .kcrm-item-amount {
	text-align: right;
	font-weight: 600;
}

.kcrm-front #kcrm-line-items select,
.kcrm-front #kcrm-line-items input {
	width: 100%;
}

.kcrm-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .6);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.kcrm-modal {
	background: #fff;
	border-radius: 6px;
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 24px;
	box-sizing: border-box;
}

.kcrm-modal .kcrm-front-form textarea {
	max-width: 100%;
	font-family: Consolas, Monaco, monospace;
	font-size: 13px;
}

@media (max-width: 768px) {
	.kcrm-front-login {
		margin: 24px auto;
		padding: 20px;
	}

	.kcrm-company-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.kcrm-modal-overlay {
		padding: 0;
		align-items: flex-end;
	}

	.kcrm-modal {
		max-width: none;
		width: 100%;
		max-height: 95vh;
		border-radius: 12px 12px 0 0;
	}

	.kcrm-front-nav-toggle {
		display: flex;
	}

	.kcrm-front-nav {
		display: none;
		flex-direction: column;
		gap: 0;
	}

	.kcrm-front-nav.is-open {
		display: flex;
	}

	.kcrm-front-nav-logout {
		margin-left: 0;
	}

	.kcrm-front-nav a {
		padding: 8px 1em;
		font-size: 14px;
	}

	.kcrm-profile-tablist {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.kcrm-profile-tab {
		white-space: nowrap;
		padding: 12px 14px 10px;
	}

	.kcrm-profile-tab-panel {
		padding: 1.25em 1em 1.5em;
	}

	.kcrm-front-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.kcrm-front-table th,
	.kcrm-front-table td {
		white-space: nowrap;
	}

	.kcrm-front .kcrm-company-switcher select {
		width: 100%;
		min-width: 0;
	}

	.kcrm-dashboard-cards {
		gap: 12px;
	}

	.kcrm-card {
		min-width: 0;
		flex: 1 1 calc(50% - 12px);
		padding: 16px;
	}

	.kcrm-button {
		padding: 8px 16px;
		margin: 4px 4px 4px 0;
	}

	.kcrm-bar-chart {
		gap: 4px;
		height: 140px;
	}

	.kcrm-bar-chart-label {
		font-size: 9px;
	}

	.kcrm-bar-chart-value {
		font-size: 9px;
	}
}

/*
 * Compact list layout for tablet portrait and smaller. Kept separate from the
 * 768px block above (which also does phone-only nav/modal/dashboard changes we
 * don't want on a ~1024px iPad) -- this block is only the browse-list tables
 * plus their stacked Actions column.
 */
@media (max-width: 1024px) {
	/*
	 * Priority columns: drop the lower-value columns on the three main browse
	 * lists so the essentials fit without horizontal scrolling. Nothing is
	 * lost -- every hidden field is still on the record's own edit screen.
	 */

	/* Invoices -- hide Issue Date (3) and Total (5). The flat list and the
	   "Customers with Multiple Jobs" grouped table share render_invoice_row(),
	   so both need the same columns hidden; the group-header <td colspan> is
	   :nth-child(1) and is left untouched. */
	#kcrm-front-invoices-table th:nth-child(3),
	#kcrm-front-invoices-table td:nth-child(3),
	#kcrm-front-invoices-table th:nth-child(5),
	#kcrm-front-invoices-table td:nth-child(5),
	#kcrm-front-invoice-groups-table th:nth-child(3),
	#kcrm-front-invoice-groups-table td:nth-child(3),
	#kcrm-front-invoice-groups-table th:nth-child(5),
	#kcrm-front-invoice-groups-table td:nth-child(5) {
		display: none;
	}

	/* Customers -- hide Contact Person (2) and Email (3). Inline job sub-rows
	   use the same 6-cell shape and stay aligned. */
	#kcrm-front-customers-table th:nth-child(2),
	#kcrm-front-customers-table td:nth-child(2),
	#kcrm-front-customers-table th:nth-child(3),
	#kcrm-front-customers-table td:nth-child(3) {
		display: none;
	}

	/* Services -- hide Type (2) and Taxable (4). */
	#kcrm-front-services-table th:nth-child(2),
	#kcrm-front-services-table td:nth-child(2),
	#kcrm-front-services-table th:nth-child(4),
	#kcrm-front-services-table td:nth-child(4) {
		display: none;
	}

	/* With fewer columns, let the kept ones wrap and tighten. */
	#kcrm-front-invoices-table th,
	#kcrm-front-invoices-table td,
	#kcrm-front-invoice-groups-table th,
	#kcrm-front-invoice-groups-table td,
	#kcrm-front-customers-table th,
	#kcrm-front-customers-table td,
	#kcrm-front-services-table th,
	#kcrm-front-services-table td {
		white-space: normal;
		padding: 6px;
	}

	/* Stack row actions one-per-line with real tap targets; drop the dividers. */
	.kcrm-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.kcrm-actions > a {
		display: block;
		width: 100%;
		padding: 8px 0;
	}

	.kcrm-actions > a:not(:first-child) {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}
}

/*
 * The Invoices list carries 8 columns -- two more than Customers/Services -- so
 * it stays cramped on ordinary laptop widths. Hide Issue Date (Due Date is the
 * actionable one) up to 1600px; the <=1024px block above additionally hides
 * Total. Both the flat list and the grouped table share render_invoice_row().
 * The Actions column is also stacked one-per-line in this range (scoped to
 * these two table ids, not the bare .kcrm-actions class) since "Edit | PDF |
 * Record Payment" no longer fits inline once Issue Date's width is gone.
 */
@media (max-width: 1600px) {
	#kcrm-front-invoices-table th:nth-child(3),
	#kcrm-front-invoices-table td:nth-child(3),
	#kcrm-front-invoice-groups-table th:nth-child(3),
	#kcrm-front-invoice-groups-table td:nth-child(3) {
		display: none;
	}

	#kcrm-front-invoices-table .kcrm-actions,
	#kcrm-front-invoice-groups-table .kcrm-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	#kcrm-front-invoices-table .kcrm-actions > a,
	#kcrm-front-invoice-groups-table .kcrm-actions > a {
		display: block;
		width: 100%;
		padding: 8px 0;
	}

	#kcrm-front-invoices-table .kcrm-actions > a:not(:first-child),
	#kcrm-front-invoice-groups-table .kcrm-actions > a:not(:first-child) {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}
}

@media (min-width: 769px) and (max-width: 1100px) {
	.kcrm-front-nav {
		gap: 2px;
	}

	.kcrm-front-nav a {
		font-size: 0.95rem;
		padding: 8px 0.85em;
	}
}

@media (min-width: 960px) {
	.kcrm-overview-columns {
		flex-direction: row;
		align-items: flex-start;
	}

	.kcrm-overview-cards-col {
		flex: 2;
	}

	.kcrm-overview-actions-col {
		flex: 1;
		min-width: 300px;
	}

	.kcrm-overview-actions-col h3 {
		border-top: none;
		margin-top: 0;
		padding-top: 0;
	}

	.kcrm-dashboard-cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5em;
	}

	.kcrm-card {
		padding: 2em 1.75em;
	}

	.kcrm-card-icon {
		font-size: 40px;
		width: 40px;
		height: 40px;
	}

	.kcrm-card-number {
		font-size: 34px;
	}
}