/**
 * Frontend Time Log Dashboard: floating button and shortcode styles.
 * Uses theme colors from site settings (Customizer / block presets) when available.
 *
 * @package Employee_Time_Log
 */

/* Theme colors from site settings - uses block preset or Customizer vars when available */
:root {
	--etl-primary: var(--wp--preset--color--primary, var(--wp--custom--color--primary, var(--color-primary, #2271b1)));
	--etl-primary-foreground: var(--wp--preset--color--contrast, var(--color-primary-contrast, #fff));
	--etl-primary-hover: var(--wp--preset--color--primary-hover, var(--color-primary-hover, #135e96));
}

/* ── Sidebar layout (pmf-app wrapper) ── */
.pmf-app { --sidebar-w: 260px; display: flex; min-height: 100vh; background: #f4f6f9 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; }
.pmf-app *, .pmf-app *::before, .pmf-app *::after { box-sizing: border-box; }
.pmf-app .pmf-sidebar { width: var(--sidebar-w); background: #1e293b !important; color: #cbd5e1 !important; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; overflow-y: auto; }
.pmf-app .pmf-sidebar a { text-decoration: none !important; }
.pmf-app .pmf-sidebar-header { padding: 20px 20px 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pmf-app .pmf-logo { font-size: 16px; font-weight: 700; color: #f1f5f9 !important; display: flex; align-items: center; gap: 8px; }
.pmf-app .pmf-logo .dashicons { color: var(--etl-primary, #2271b1) !important; font-size: 22px; width: 22px; height: 22px; }
.pmf-app .pmf-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pmf-app .pmf-avatar img { width: 40px; height: 40px; border-radius: 50%; }
.pmf-app .pmf-user-name { font-size: 13px; font-weight: 600; color: #f1f5f9 !important; }
.pmf-app .pmf-user-role { font-size: 11px; color: #94a3b8 !important; }
.pmf-app .pmf-nav { list-style: none; padding: 10px 0; margin: 0; flex: 1; }
.pmf-app .pmf-nav-item a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: #94a3b8 !important; font-size: 13px; font-weight: 500; border-left: 3px solid transparent; text-decoration: none !important; transition: all .15s; }
.pmf-app .pmf-nav-item a:hover { background: rgba(255,255,255,.05) !important; color: #e2e8f0 !important; }
.pmf-app .pmf-nav-item.active a { background: rgba(34,113,177,.2) !important; color: #72aee6 !important; border-left-color: var(--etl-primary, #2271b1); }
.pmf-app .pmf-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.pmf-app .pmf-nav-icon.dashicons { font-size: 18px; width: 18px; height: 18px; }
.pmf-app .pmf-nav-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 20px; background: none !important; border: none; color: #94a3b8 !important; font-size: 13px; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: .5px; }
.pmf-app .pmf-nav-group-toggle:hover { color: #e2e8f0 !important; }
.pmf-app .pmf-nav-chevron { font-size: 11px; transition: transform .2s; }
.pmf-app .pmf-nav-group.expanded .pmf-nav-chevron { transform: rotate(90deg); }
.pmf-app .pmf-nav-subitems { list-style: none; padding: 0; margin: 0; display: none; }
.pmf-app .pmf-nav-group.expanded .pmf-nav-subitems { display: block; }
.pmf-app .pmf-nav-subitem a { padding-left: 36px !important; }
.pmf-app .pmf-sidebar-footer { padding: 12px 20px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 4px; }
.pmf-app .pmf-footer-link { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: #94a3b8 !important; font-size: 12px; text-decoration: none !important; }
.pmf-app .pmf-footer-link:hover { color: #e2e8f0 !important; }
.pmf-app .pmf-footer-link .dashicons { font-size: 16px; width: 16px; height: 16px; }
.pmf-app .pmf-sidebar-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 200; background: #1e293b !important; color: #fff !important; border: none; border-radius: 6px; padding: 8px 12px; font-size: 18px; cursor: pointer; line-height: 1; }
.pmf-app .pmf-main { flex: 1; margin-left: var(--sidebar-w); padding: 30px; max-width: 1200px; min-width: 0; }
@media screen and (max-width: 782px) {
	.pmf-app .pmf-sidebar { transform: translateX(-100%); }
	.pmf-app .pmf-sidebar.open { transform: translateX(0); }
	.pmf-app .pmf-sidebar-toggle { display: block; }
	.pmf-app .pmf-main { margin-left: 0 !important; padding: 15px; padding-top: 50px; }
}

/* Links in ETL areas use theme primary when set */
.etl-dashboard-wrap a:not(.etl-dash-ct-btn):not(.etl-mtl-ct-btn),
.etl-mytimelogs-wrap a:not(.etl-dash-ct-btn):not(.etl-mtl-ct-btn) {
	color: var(--etl-primary);
}
.etl-dashboard-wrap a:not(.etl-dash-ct-btn):not(.etl-mtl-ct-btn):hover,
.etl-mytimelogs-wrap a:not(.etl-dash-ct-btn):not(.etl-mtl-ct-btn):hover {
	color: var(--etl-primary-hover);
}

/* Hide header image box on Time Log Dashboard and My Time Logs pages */
body.etl-no-header-image .wp-custom-header,
body.etl-no-header-image .custom-header,
body.etl-no-header-image .site-header-image,
body.etl-no-header-image [class*="header-image"],
body.etl-no-header-image .header-image,
body.etl-no-header-image #masthead .header-image,
body.etl-no-header-image .site-header .header-image {
	display: none !important;
}

/* Dashboard shortcode */
.etl-dashboard-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5em 0;
}

/* Two-column layout: Add Time Entry (left), week entries (right) — right column height matches left */
.etl-dashboard-two-col {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 1.5em;
	align-items: stretch;
}

.etl-dashboard-col {
	min-width: 0;
}

.etl-dashboard-col--left .etl-dashboard-add-widget {
	margin-bottom: 0;
}

.etl-dashboard-col--right {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.etl-dashboard-col--right .etl-dashboard-recent {
	margin-top: 0;
	padding-top: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

@media (max-width: 782px) {
	.etl-dashboard-two-col {
		grid-template-columns: 1fr;
	}

	.etl-dashboard-col--left .etl-dashboard-add-widget {
		margin-bottom: 2em;
	}
}

.etl-dashboard-title {
	margin: 0 0 1em;
	font-size: 1.5em;
}

/* Team Portal — Modern theme aligned with JSX reference */
.etl-team-portal-wrap {
	max-width: 720px;
}
/* Legacy title/desc/link — hidden when modern-dashboard class is present */
.etl-modern-dashboard .etl-team-portal-title,
.etl-modern-dashboard .etl-team-portal-desc,
.etl-modern-dashboard .etl-team-portal-dashboard-link { display: none; }
.etl-team-portal-title {
	margin: 0 0 0.5em;
	font-size: 1.25rem;
	font-weight: 700;
	color: #1E293B;
}
.etl-team-portal-desc {
	margin: 0 0 0.75em;
	color: #94A3B8;
	font-size: .875rem;
}
.etl-team-portal-dashboard-link {
	margin: 0 0 1.5em;
}
.etl-team-portal-dashboard-link-a {
	display: inline-block;
}
.etl-team-portal-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: 10px;
}
.etl-team-portal-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.25em 1.5em;
	background: #fff;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.etl-team-portal-card:hover,
.etl-team-portal-card:focus {
	background: #fff;
	border-color: #2563EB;
	box-shadow: 0 2px 8px rgba(37,99,235,0.08);
	color: inherit;
}
.etl-team-portal-card-title {
	font-size: .875rem;
	font-weight: 600;
	margin-bottom: 0.35em;
	color: #1E293B;
	white-space: nowrap;
}
.etl-team-portal-card:hover .etl-team-portal-card-title,
.etl-team-portal-card:focus .etl-team-portal-card-title {
	color: #2563EB;
}
.etl-team-portal-card-desc {
	font-size: .75rem;
	color: #94A3B8;
	line-height: 1.4;
	margin: 0;
}

/* Actions: Add Time Entry + All Time Logs */
.etl-dashboard-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 1.5em;
}

.etl-dashboard-actions .etl-dashboard-btn {
	border: none;
	cursor: pointer;
	font-size: 1em;
}

/* Add Time Entry widget on dashboard */
.etl-dashboard-add-widget {
	margin-bottom: 2em;
	padding: 1.5em;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.etl-dashboard-add-widget .etl-dashboard-subtitle {
	margin-top: 0;
}

.etl-dashboard-add-form .etl-dash-message {
	margin: 0 0 1em;
	padding: 0.75em 1em;
	border-radius: 4px;
	font-size: 0.95em;
}

.etl-dash-message--success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.etl-dash-message--error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.etl-dashboard-add-form .etl-dash-field {
	margin-bottom: 1em;
}

.etl-dashboard-add-form .etl-dash-field label,
.etl-dashboard-add-form .etl-dash-label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 500;
	font-size: 0.95em;
}

.etl-dashboard-add-form .etl-dash-field--row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.etl-dashboard-add-form .etl-dash-field--row > span {
	flex: 1;
	min-width: 120px;
}

.etl-dashboard-add-form input[type="date"],
.etl-dashboard-add-form input[type="time"],
.etl-dashboard-add-form select,
.etl-dashboard-add-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 8px 10px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 1em;
	box-sizing: border-box;
}

.etl-dash-ct-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 0.35em;
}

.etl-dash-ct-btn {
	padding: 8px 14px;
	border: 1px solid #8c8f94;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9em;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.etl-dash-ct-btn:hover {
	background: #f0f0f1;
	border-color: #646970;
}

.etl-dash-ct-btn--active {
	background: #f0f0f1;
	border-color: #646970;
}
.etl-dash-ct-btn--active:hover {
	background: #e8e8e9;
	border-color: #646970;
}

.etl-dash-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin-bottom: 1em;
	padding: 0.75em 0;
	border-bottom: 1px solid #dcdcde;
	font-size: 0.95em;
}

.etl-dash-summary-total,
.etl-dash-summary-break,
.etl-dash-summary-billable {
	margin-right: 0.5em;
}

.etl-dash-summary strong {
	color: var(--etl-primary);
}

.etl-dash-description {
	margin: 0.35em 0 0;
	font-size: 0.85em;
	color: #646970;
}

.etl-dashboard-add-form .etl-dash-actions {
	margin: 1.25em 0 0;
}

.etl-dashboard-add-form .etl-dash-actions .etl-dashboard-btn {
	border: none;
	cursor: pointer;
}

/* Missing break confirmation overlay (dashboard add + my-time-logs) */
.etl-dash-missing-break-overlay,
.etl-mtl-missing-break-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.etl-dash-missing-break-overlay--visible,
.etl-mtl-missing-break-overlay--visible {
	opacity: 1;
	visibility: visible;
}

.etl-dash-missing-break-dialog,
.etl-mtl-missing-break-dialog {
	background: #fff;
	padding: 1.5em;
	border-radius: 6px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	max-width: 420px;
	width: 90%;
}

.etl-dash-missing-break-msg,
.etl-mtl-missing-break-msg {
	margin: 0 0 1em;
	font-size: 1em;
	line-height: 1.4;
}

.etl-dash-missing-break-actions,
.etl-mtl-missing-break-actions {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.etl-dash-missing-break-actions .button,
.etl-mtl-missing-break-actions .button {
	margin: 0;
}

.etl-dashboard-btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 4px;
	background: #f0f0f1;
	color: #1d2327;
	text-decoration: none;
	font-weight: 500;
	transition: background 0.2s ease, color 0.2s ease;
}

.etl-dashboard-btn:hover {
	background: #dcdcde;
	color: #1d2327;
}

.etl-dashboard-btn-primary {
	background: var(--etl-primary);
	color: var(--etl-primary-foreground);
}

.etl-dashboard-btn-primary:hover {
	background: var(--etl-primary-hover);
	color: var(--etl-primary-foreground);
}

.etl-dashboard-btn-danger {
	background: #b32d2e;
	color: #fff;
}

.etl-dashboard-btn-danger:hover {
	background: #8a2424;
	color: #fff;
}

.etl-dashboard-subtitle {
	margin: 0 0 0.75em;
	font-size: 1.1em;
}

.etl-dashboard-recent {
	margin-top: 0;
}

/* Current week: days stacked vertically (Sunday first); entries stack per day; height shared equally to match left column */
.etl-dashboard-week {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 0;
	flex: 1;
	min-height: 0;
}

.etl-dashboard-day {
	padding: 0.5em 0.75em;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	min-height: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.etl-dashboard-day:hover {
	background: #f6f7f7;
}

.etl-dashboard-day--today {
	border-color: var(--etl-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--etl-primary) 25%, transparent);
}

.etl-dashboard-day-header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em 0.5em;
	margin-bottom: 0.4em;
	padding-bottom: 0.35em;
	border-bottom: 1px solid #f0f0f1;
	flex-shrink: 0;
}

.etl-dashboard-day-name {
	font-weight: 600;
	font-size: 0.85em;
	color: #1d2327;
}

.etl-dashboard-day-date {
	font-size: 0.75em;
	color: #646970;
	white-space: nowrap;
}

/* Day timeline: entries stacked (no time-slot positioning) */
.etl-dashboard-day-timeline {
	width: 100%;
	background: #f8f9fa;
	border-radius: 4px;
	margin-top: 0.25em;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 3px 0;
	overflow-y: auto;
}

.etl-dashboard-day-timeline .etl-dashboard-day-empty {
	display: block;
	margin: 0.5em 0;
	font-size: 0.8em;
	color: #a7aaad;
	text-align: center;
}

.etl-dashboard-day-block {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	padding: 2px 6px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	font-size: 0.75em;
	line-height: 1.25;
	min-height: 22px;
	flex-shrink: 0;
	gap: 0.35em;
}

.etl-dashboard-day-block-customer {
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

.etl-dashboard-day-block-hours {
	font-weight: 600;
	flex-shrink: 0;
}

/* Block backgrounds match status label colors */
.etl-dashboard-day-block--pending {
	background: #fcf3cf;
	color: #856404;
	border-color: #f5e6a3;
}

.etl-dashboard-day-block--approved {
	background: #d4edda;
	color: #155724;
	border-color: #c3e6cb;
}

.etl-dashboard-day-block--rejected {
	background: #f8d7da;
	color: #721c24;
	border-color: #f5c6cb;
}

.etl-dashboard-day-block--invoiced {
	background: #cce5ff;
	color: #004085;
	border-color: #b8daff;
}

.etl-dashboard-empty {
	margin: 0;
	color: #646970;
}

.etl-dashboard-more {
	margin: 1em 0 0;
	font-size: 0.95em;
}

.etl-dashboard-more--top {
	margin: 0 0 1em;
}

.etl-dashboard-login-required {
	margin: 0;
	padding: 1em;
	background: #fcf0f1;
	border-left: 4px solid #d63638;
}

/* Entry detail / edit modal */
.etl-entry-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	box-sizing: border-box;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.2s, opacity 0.2s;
}

.etl-entry-modal--open {
	visibility: visible;
	opacity: 1;
}

.etl-entry-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	cursor: pointer;
}

.etl-entry-modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15);
	max-width: 520px;
	width: 100%;
	max-height: 90vh;
	overflow: hidden;
}

.etl-entry-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em 1.25em;
	border-bottom: 1px solid #F1F5F9;
}

.etl-entry-modal-title {
	margin: 0;
	font-size: 1.1em;
	font-weight: 600;
	color: #0F172A;
}

.etl-entry-modal-close {
	background: none;
	border: none;
	font-size: 1.5em;
	line-height: 1;
	color: #646970;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}

.etl-entry-modal-close:hover {
	background: #f0f0f1;
	color: #1d2327;
}

.etl-entry-modal-body {
	position: relative;
	padding: 1.25em;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.etl-entry-edit-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	background: rgba(255, 255, 255, 0.95);
	z-index: 10;
}

.etl-entry-edit-loading[hidden] {
	display: none;
}

.etl-entry-edit-loading-spinner {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 3px solid #f0f0f1;
	border-top-color: var(--etl-primary, #2271b1);
	border-radius: 50%;
	animation: etl-spin 0.8s linear infinite;
}

.etl-entry-edit-loading-text {
	color: #50575e;
	font-size: 0.95em;
}

.etl-entry-detail-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35em 1.5em;
	margin: 0 0 1em;
	font-size: 0.95em;
}

.etl-entry-detail-list dt {
	font-weight: 600;
	color: #50575e;
}

.etl-entry-detail-list dd {
	margin: 0;
	color: #1d2327;
}

.etl-entry-detail-task,
.etl-entry-detail-notes {
	white-space: pre-wrap;
	word-break: break-word;
}

.etl-entry-modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid #f0f0f1;
}

.etl-entry-detail-actions {
	justify-content: flex-start;
}

.etl-entry-detail-actions--loading {
	visibility: hidden;
}

.etl-entry-detail-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	padding: 1.25em;
	margin-top: 1em;
	border-top: 1px solid #f0f0f1;
}

.etl-entry-detail-loading[hidden] {
	display: none;
}

.etl-entry-detail-loading-spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 3px solid #f0f0f1;
	border-top-color: var(--etl-primary, #2271b1);
	border-radius: 50%;
	animation: etl-spin 0.8s linear infinite;
}

.etl-entry-detail-loading-text {
	color: #50575e;
	font-size: 0.95em;
}

@keyframes etl-spin {
	to {
		transform: rotate(360deg);
	}
}

.etl-entry-edit-form .etl-entry-edit-field {
	margin-bottom: 1em;
}

.etl-entry-edit-form .etl-entry-edit-field--no-edit {
	display: none;
}

.etl-entry-edit-form .etl-entry-edit-field--readonly .etl-entry-edit-readonly-value {
	margin: 0;
	padding: 0.5em 0.6em;
	background: #f0f0f1;
	border: 1px solid #c3c4c7;
	border-radius: 2px;
	font-weight: 500;
	color: #1d2327;
}

.etl-entry-edit-form .etl-entry-edit-field label {
	display: block;
	margin-bottom: 0.25em;
	font-weight: 500;
	color: #1d2327;
}

.etl-entry-edit-form .etl-entry-edit-field select,
.etl-entry-edit-form .etl-entry-edit-field input[type="date"],
.etl-entry-edit-form .etl-entry-edit-field input[type="time"],
.etl-entry-edit-form .etl-entry-edit-field textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.etl-entry-edit-field--row {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}

.etl-entry-edit-field--row > span {
	flex: 1;
	min-width: 120px;
}

.etl-entry-edit-message {
	margin: 0 0 1em;
	padding: 0.5em 0.75em;
	border-radius: 4px;
	font-size: 0.9em;
}

.etl-entry-edit-message--error {
	background: #fcf0f1;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.etl-request-edit-wrap {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid #e0e0e0;
}
.etl-request-edit-wrap label {
	display: block;
	margin-bottom: 0.25em;
	font-weight: 500;
}
.etl-request-edit-wrap textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-bottom: 0.5em;
}
.etl-request-edit-message {
	margin: 0 0 0.5em;
	font-size: 0.9em;
}
.etl-request-edit-message--error {
	color: #b32d2e;
}

.etl-field-note.etl-task-note,
.etl-task-note {
	margin: 0 0 0.35em;
	font-size: 0.85em;
	color: #646970;
}

.etl-entry-loading {
	margin: 0 0 1em;
	color: #646970;
}

.etl-entry-block {
	cursor: pointer;
}

/* My Time Logs page */
.etl-mytimelogs-wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 0 1.5em;
}

.etl-mytimelogs-back {
	margin: 0 0 1.5em;
}

.etl-mytimelogs-back .etl-dashboard-btn {
	text-decoration: none;
	border: none;
	cursor: pointer;
}

/* Last 3 months: three separate boxes (current month first), aligned with calendar below */
.etl-mytimelogs-months {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em;
	margin-bottom: 2em;
}

@media (max-width: 700px) {
	.etl-mytimelogs-months {
		grid-template-columns: 1fr;
	}
}

.etl-mytimelogs-month-box {
	padding: 1.25em;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}

.etl-mytimelogs-month-title {
	margin: 0 0 0.75em;
	font-size: 1.1em;
	font-weight: 600;
	color: #1d2327;
	border-bottom: 1px solid #dcdcde;
	padding-bottom: 0.5em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.etl-mytimelogs-month-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.etl-mytimelogs-month-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5em;
	padding: 0.35em 0;
	font-size: 0.95em;
}

.etl-mytimelogs-month-label {
	font-weight: 500;
	color: #1d2327;
}

.etl-mytimelogs-month-hrs {
	font-weight: 600;
	color: var(--etl-primary);
}

/* Calendar section: same horizontal extent as month boxes above */
.etl-mytimelogs-calendar-section {
	margin-top: 2em;
	width: 100%;
	box-sizing: border-box;
}

.etl-mytimelogs-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 1em;
}

.etl-mytimelogs-cal-nav-btn {
	flex: 0 0 auto;
	display: inline-block;
	padding: 0.5em 1em;
	background: #f0f0f1;
	color: #1d2327;
	text-decoration: none;
	border-radius: 4px;
	font-size: 0.95em;
}

.etl-mytimelogs-cal-nav-btn:hover {
	background: #dcdcde;
	color: #1d2327;
}

.etl-mytimelogs-cal-month {
	flex: 0 0 auto;
	font-size: 1.25em;
	font-weight: 600;
	color: #1d2327;
	text-align: center;
}

.etl-mytimelogs-calendar {
	display: block;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	overflow: hidden;
}

.etl-mytimelogs-cal-head {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background: #f6f7f7;
	border-bottom: 1px solid #dcdcde;
}

.etl-mytimelogs-cal-head-cell {
	padding: 0.5em;
	text-align: center;
	font-weight: 600;
	font-size: 0.85em;
	color: #646970;
}

.etl-mytimelogs-cal-body {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0;
}

.etl-mytimelogs-cal-cell {
	min-height: 96px;
	padding: 0.35em;
	border-right: 1px solid #f0f0f1;
	border-bottom: 1px solid #f0f0f1;
	font-size: 0.9em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.etl-mytimelogs-cal-cell:nth-child(7n) {
	border-right: none;
}

.etl-mytimelogs-cal-cell--empty {
	background: #f9f9f9;
}

.etl-mytimelogs-cal-cell--today {
	background: #e7f3ff;
	border-color: var(--etl-primary);
}

.etl-mytimelogs-cal-cell--clickable {
	cursor: pointer;
}

.etl-mytimelogs-cal-cell--clickable:hover {
	background: #f0f6fc;
}

.etl-mytimelogs-cal-day-num {
	font-weight: 600;
	color: #1d2327;
	flex-shrink: 0;
}

.etl-mytimelogs-cal-day-timeline {
	width: 100%;
	margin-top: 0.25em;
	background: #f8f9fa;
	border-radius: 3px;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 2px 0;
	overflow-y: auto;
}

.etl-mytimelogs-cal-day-block {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	padding: 2px 4px;
	border-radius: 2px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	font-size: 0.65em;
	line-height: 1.2;
	min-height: 18px;
	flex-shrink: 0;
	gap: 0.25em;
}

.etl-mytimelogs-cal-day-block-customer {
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

.etl-mytimelogs-cal-day-block-hours {
	font-weight: 600;
	flex-shrink: 0;
}

.etl-mytimelogs-cal-day-block--pending {
	background: #fcf3cf;
	color: #856404;
	border-color: #f5e6a3;
}

.etl-mytimelogs-cal-day-block--approved {
	background: #d4edda;
	color: #155724;
	border-color: #c3e6cb;
}

.etl-mytimelogs-cal-day-block--rejected {
	background: #f8d7da;
	color: #721c24;
	border-color: #f5c6cb;
}

.etl-mytimelogs-cal-day-block--invoiced {
	background: #cce5ff;
	color: #004085;
	border-color: #b8daff;
}

.etl-mytimelogs-cal-day-count {
	display: inline-block;
	margin-top: 0.25em;
	padding: 0.15em 0.4em;
	background: var(--etl-primary);
	color: var(--etl-primary-foreground);
	border-radius: 4px;
	font-size: 0.8em;
	font-weight: 600;
}

.etl-mytimelogs-cal-hint {
	margin: 0.75em 0 0;
	font-size: 0.9em;
	color: #646970;
}

/* Add-entry modal (My Time Logs) */
.etl-mtl-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999998;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.etl-mtl-modal-overlay--visible {
	opacity: 1;
	visibility: visible;
}

.etl-mtl-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.95);
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	z-index: 999999;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.etl-mtl-modal--open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

.etl-mtl-modal-inner {
	padding: 1.5em;
}

.etl-mtl-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.25em;
	padding-bottom: 1em;
	border-bottom: 1px solid #dcdcde;
}

.etl-mtl-modal-header h3 {
	margin: 0;
	font-size: 1.25em;
}

.etl-mtl-modal-close {
	background: none;
	border: none;
	font-size: 1.5em;
	line-height: 1;
	color: #646970;
	cursor: pointer;
	padding: 0.25em;
}

.etl-mtl-modal-close:hover {
	color: #1d2327;
}

.etl-mtl-add-form .etl-mtl-message {
	margin: 0 0 1em;
	padding: 0.75em 1em;
	border-radius: 4px;
	font-size: 0.95em;
}

.etl-mtl-message--success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.etl-mtl-message--error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.etl-mtl-add-form .etl-mtl-field {
	margin-bottom: 1em;
}

.etl-mtl-add-form .etl-mtl-field label,
.etl-mtl-add-form .etl-mtl-label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 500;
	font-size: 0.95em;
}

.etl-mtl-add-form .etl-mtl-field--row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.etl-mtl-add-form .etl-mtl-field--row > span {
	flex: 1;
	min-width: 100px;
}

.etl-mtl-add-form input[type="date"],
.etl-mtl-add-form input[type="time"],
.etl-mtl-add-form select,
.etl-mtl-add-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 8px 10px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 1em;
	box-sizing: border-box;
}

.etl-mtl-ct-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 0.35em;
}

.etl-mtl-ct-btn {
	padding: 8px 14px;
	border: 1px solid #8c8f94;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9em;
}

.etl-mtl-ct-btn--active {
	background: #f0f0f1;
	border-color: #646970;
}
.etl-mtl-ct-btn--active:hover {
	background: #e8e8e9;
	border-color: #646970;
}

.etl-mtl-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin-bottom: 1em;
	padding: 0.5em 0;
	font-size: 0.9em;
}

.etl-mtl-summary strong {
	color: var(--etl-primary);
}

.etl-mtl-add-form .etl-mtl-actions {
	margin: 1.25em 0 0;
	display: flex;
	gap: 0.75em;
}

.etl-mtl-add-form .etl-mtl-actions .etl-dashboard-btn {
	border: none;
	cursor: pointer;
}