/* ============================================================
   Net Professional — Front-end Management App
   Mobile-first, sidebar on ≥ 900 px
   ============================================================ */

:root {
	--np-sidebar-w: 220px;
	--np-primary:   #3b82f6;
	--np-primary-d: #2563eb;
	--np-danger:    #ef4444;
	--np-success:   #10b981;
	--np-warning:   #f59e0b;
	--np-purple:    #8b5cf6;
	--np-bg:        #f3f4f6;
	--np-card:      #ffffff;
	--np-border:    #e5e7eb;
	--np-text:      #111827;
	--np-muted:     #6b7280;
	--np-radius:    10px;
	--np-shadow:    0 1px 4px rgba(0,0,0,.08);
}

/* ── GATE (not logged in) ─────────────────────────────── */
.np-app-gate {
	padding: 32px;
	text-align: center;
	color: var(--np-muted);
	font-size: 1em;
}

/* ── APP SHELL ────────────────────────────────────────── */
.np-app {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	background: var(--np-bg);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 15px;
	color: var(--np-text);
	position: relative;
}

@media (min-width: 900px) {
	.np-app {
		flex-direction: row;
	}
}

/* ── NAV / SIDEBAR ────────────────────────────────────── */
.np-app-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0;
	background: #1e293b;
	color: #e2e8f0;
	padding: 0 8px;
	height: 56px;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.np-app-nav::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
	.np-app-nav {
		flex-direction: column;
		align-items: stretch;
		width: var(--np-sidebar-w);
		min-width: var(--np-sidebar-w);
		height: 100svh;
		padding: 0;
		position: sticky;
		top: 0;
		overflow-x: hidden;
		overflow-y: auto;
	}
}

.np-app-nav__logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 1.1em;
	color: #fff;
	padding: 0 12px 0 4px;
	white-space: nowrap;
	flex-shrink: 0;
}

@media (min-width: 900px) {
	.np-app-nav__logo {
		padding: 20px 16px;
		border-bottom: 1px solid rgba(255,255,255,.08);
	}
}

.np-app-nav__logo-icon { font-size: 1.4em; }

.np-app-nav__items {
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2px;
	flex: 1;
}

@media (min-width: 900px) {
	.np-app-nav__items {
		flex-direction: column;
		padding: 12px 8px;
		gap: 2px;
		flex: 1;
	}
}

.np-app-nav__item { display: flex; }

.np-app-nav__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: none;
	background: transparent;
	color: #94a3b8;
	cursor: pointer;
	border-radius: 8px;
	font-size: 0.85em;
	font-weight: 500;
	white-space: nowrap;
	transition: background .15s, color .15s;
	width: 100%;
	text-align: left;
}
.np-app-nav__btn:hover,
.np-app-nav__btn.active {
	background: rgba(255,255,255,.1);
	color: #fff;
}
.np-app-nav__btn.active { background: var(--np-primary); color: #fff; }

.np-app-nav__icon { font-size: 1.2em; flex-shrink: 0; }

.np-app-nav__label { display: none; }
@media (min-width: 900px) {
	.np-app-nav__label { display: inline; }
}

.np-app-nav__user {
	display: none;
}
@media (min-width: 900px) {
	.np-app-nav__user {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 14px 16px;
		border-top: 1px solid rgba(255,255,255,.08);
		color: #94a3b8;
		font-size: 0.83em;
	}
}

.np-app-nav__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--np-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85em;
	flex-shrink: 0;
}

/* ── MAIN CONTENT ─────────────────────────────────────── */
.np-app-main {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
	position: relative;
}

/* ── SECTIONS ─────────────────────────────────────────── */
.np-app-section {
	display: none;
	padding: 20px 16px;
	animation: npFadeIn .2s ease;
}
.np-app-section.active { display: block; }

@media (min-width: 640px) {
	.np-app-section { padding: 24px; }
}

@keyframes npFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.np-app-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.np-app-section__header h2 {
	margin: 0;
	font-size: 1.3em;
	font-weight: 700;
}
.np-app-section__date {
	color: var(--np-muted);
	font-size: 0.85em;
}

/* ── STATS GRID ───────────────────────────────────────── */
.np-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}
@media (min-width: 640px) {
	.np-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.np-stat-card {
	background: var(--np-card);
	border-radius: var(--np-radius);
	padding: 16px;
	box-shadow: var(--np-shadow);
	border-left: 4px solid transparent;
}
.np-stat-card--blue   { border-left-color: var(--np-primary); }
.np-stat-card--red    { border-left-color: var(--np-danger); }
.np-stat-card--green  { border-left-color: var(--np-success); }
.np-stat-card--purple { border-left-color: var(--np-purple); }

.np-stat-card__value {
	font-size: 1.9em;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 4px;
}
.np-stat-card--blue   .np-stat-card__value { color: var(--np-primary); }
.np-stat-card--red    .np-stat-card__value { color: var(--np-danger); }
.np-stat-card--green  .np-stat-card__value { color: var(--np-success); }
.np-stat-card--purple .np-stat-card__value { color: var(--np-purple); }

.np-stat-card__label {
	font-size: 0.78em;
	color: var(--np-muted);
	font-weight: 500;
}

/* ── TWO-COL LAYOUT ───────────────────────────────────── */
.np-app-two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 780px) {
	.np-app-two-col { grid-template-columns: 1fr 1fr; }
}

/* ── CARDS ────────────────────────────────────────────── */
.np-app-card {
	background: var(--np-card);
	border-radius: var(--np-radius);
	box-shadow: var(--np-shadow);
	margin-bottom: 16px;
	overflow: hidden;
}
.np-app-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	font-weight: 600;
	font-size: 0.9em;
	border-bottom: 1px solid var(--np-border);
	background: #f9fafb;
}
.np-app-card__body {
	padding: 12px 16px;
}

/* ── TASK / SCHEDULE ITEMS ────────────────────────────── */
.np-app-task-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--np-border);
}
.np-app-task-item:last-child { border-bottom: none; }

.np-app-task-item__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-top: 5px;
	flex-shrink: 0;
	background: var(--np-primary);
}
.np-app-task-item__dot--overdue  { background: var(--np-danger); }
.np-app-task-item__dot--done     { background: var(--np-success); }
.np-app-task-item__dot--progress { background: var(--np-warning); }

.np-app-task-item__info { flex: 1; min-width: 0; }
.np-app-task-item__company { font-weight: 600; font-size: 0.93em; }
.np-app-task-item__meta {
	color: var(--np-muted);
	font-size: 0.78em;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.np-app-task-item__actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

/* ── TABLE ────────────────────────────────────────────── */
.np-app-table-wrap {
	overflow-x: auto;
	border-radius: var(--np-radius);
	box-shadow: var(--np-shadow);
}
.np-app-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--np-card);
	font-size: 0.88em;
}
.np-app-table th {
	text-align: left;
	padding: 10px 14px;
	background: #f9fafb;
	font-weight: 600;
	font-size: 0.8em;
	letter-spacing: .01em;
	color: var(--np-muted);
	border-bottom: 1px solid var(--np-border);
	white-space: nowrap;
}
.np-app-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--np-border);
	vertical-align: middle;
}
.np-app-table tr:last-child td { border-bottom: none; }
.np-app-table tr:hover td { background: #f9fafb; }

/* ── STATUS BADGES ────────────────────────────────────── */
.np-status-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 20px;
	font-size: 0.75em;
	font-weight: 600;
	white-space: nowrap;
}
.np-status-badge--scheduled   { background: #dbeafe; color: #1d4ed8; }
.np-status-badge--in_progress { background: #fef3c7; color: #92400e; }
.np-status-badge--completed   { background: #d1fae5; color: #065f46; }
.np-status-badge--overdue     { background: #fee2e2; color: #991b1b; }
.np-status-badge--missed      { background: #f3f4f6; color: #374151; }
.np-status-badge--cancelled   { background: #f3f4f6; color: #6b7280; }

/* ── PRIORITY BADGES ──────────────────────────────────── */
.np-priority-badge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 4px;
	font-size: 0.72em;
	font-weight: 600;
}
.np-priority-badge--urgent { background: #fee2e2; color: #991b1b; }
.np-priority-badge--high   { background: #fef3c7; color: #92400e; }
.np-priority-badge--normal { background: #dbeafe; color: #1d4ed8; }
.np-priority-badge--low    { background: #f3f4f6; color: #6b7280; }

/* ── FILTERS ──────────────────────────────────────────── */
.np-app-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

/* ── FORM CONTROLS ────────────────────────────────────── */
.np-app-input,
.np-app-select,
.np-app-textarea {
	border: 1px solid var(--np-border);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 0.9em;
	color: var(--np-text);
	background: #fff;
	outline: none;
	transition: border-color .15s;
	box-sizing: border-box;
}
.np-app-input:focus,
.np-app-select:focus,
.np-app-textarea:focus {
	border-color: var(--np-primary);
	box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.np-app-textarea {
	resize: vertical;
	width: 100%;
	min-height: 80px;
}

/* ── BUTTONS ──────────────────────────────────────────── */
.np-app-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--np-border);
	border-radius: 8px;
	background: #fff;
	color: var(--np-text);
	font-size: 0.88em;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s, border-color .15s;
	text-decoration: none;
	white-space: nowrap;
}
.np-app-btn:hover { background: #f9fafb; }

.np-app-btn--primary {
	background: var(--np-primary);
	border-color: var(--np-primary);
	color: #fff;
}
.np-app-btn--primary:hover { background: var(--np-primary-d); border-color: var(--np-primary-d); }

.np-app-btn--danger {
	background: var(--np-danger);
	border-color: var(--np-danger);
	color: #fff;
}
.np-app-btn--danger:hover { background: #dc2626; border-color: #dc2626; }
.np-app-btn--success {
	background: var(--np-success);
	border-color: var(--np-success);
	color: #fff;
}
.np-app-btn--sm { padding: 5px 10px; font-size: 0.78em; }
.np-app-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── SLIDE-OVER PANEL ─────────────────────────────────── */
.np-app-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 540px;
	overflow: hidden;
	background: var(--np-card);
	box-shadow: -4px 0 24px rgba(0,0,0,.15);
	z-index: 500;
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4,0,.2,1);
	display: flex;
	flex-direction: column;
}
.np-app-panel.open {
	transform: translateX(0);
}

.np-app-panel__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--np-border);
	background: #f9fafb;
	flex-shrink: 0;
}
.np-app-panel__close {
	width: 32px;
	height: 32px;
	border: none;
	background: #e5e7eb;
	border-radius: 50%;
	cursor: pointer;
	font-size: 0.9em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .15s;
}
.np-app-panel__close:hover { background: #d1d5db; }
.np-app-panel__title {
	margin: 0;
	font-size: 1em;
	font-weight: 700;
}
.np-app-panel__body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px;
	box-sizing: border-box;
}

.np-app-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.4);
	z-index: 499;
}
.np-app-overlay.visible { display: block; }

/* ── MODAL ────────────────────────────────────────────── */
.np-app-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow: hidden;
}
.np-app-modal__box {
	background: var(--np-card);
	border-radius: 14px;
	padding: 28px 24px;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	box-shadow: 0 20px 60px rgba(0,0,0,.2);
	text-align: center;
	animation: npModalIn .2s ease;
}
@keyframes npModalIn {
	from { opacity: 0; transform: scale(.95); }
	to   { opacity: 1; transform: scale(1); }
}
.np-app-modal__icon { font-size: 2.5em; margin-bottom: 8px; }
.np-app-modal__title {
	margin: 0 0 4px;
	font-size: 1.1em;
	font-weight: 700;
}
.np-app-modal__service {
	font-weight: 600;
	font-size: 0.95em;
	margin: 0 0 2px;
}
.np-app-modal__interval {
	color: var(--np-muted);
	font-size: 0.82em;
	margin: 0 0 16px;
}
.np-app-modal__field {
	text-align: left;
	margin-bottom: 16px;
	width: 100%;
	box-sizing: border-box;
}
.np-app-modal__field input,
.np-app-modal__field textarea,
.np-app-modal__field select {
	width: 100%;
	box-sizing: border-box;
	max-width: 100%;
}
.np-app-modal__field label {
	display: block;
	font-weight: 500;
	font-size: 0.88em;
	margin-bottom: 6px;
}
.np-app-modal__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

/* ── FORM IN PANEL ────────────────────────────────────── */
.np-panel-form { display: flex; flex-direction: column; gap: 14px; }
.np-panel-form__group { display: flex; flex-direction: column; gap: 4px; }
.np-panel-form__group label { font-size: 0.85em; font-weight: 600; color: var(--np-muted); }
.np-panel-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.np-panel-form__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	padding-top: 8px;
	border-top: 1px solid var(--np-border);
}

/* ── CUSTOMER DETAIL ──────────────────────────────────── */
.np-cust-detail-header {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 20px;
}
.np-cust-detail-avatar {
	width: 48px;
	height: 48px;
	background: var(--np-primary);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4em;
	font-weight: 700;
	flex-shrink: 0;
}
.np-cust-detail-name { font-size: 1.15em; font-weight: 700; margin: 0; }
.np-cust-detail-sub  { color: var(--np-muted); font-size: 0.85em; margin: 2px 0 0; }
.np-cust-detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 0.85em; }
.np-cust-detail-meta__label { color: var(--np-muted); font-size: 0.88em; }
.np-cust-detail-meta__value { font-weight: 500; }

/* ── EMPLOYEES LIST ───────────────────────────────────── */
.np-employee-card {
	background: var(--np-card);
	border-radius: var(--np-radius);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: var(--np-shadow);
	margin-bottom: 10px;
}
.np-employee-card__avatar {
	width: 40px;
	height: 40px;
	background: var(--np-primary);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1em;
	flex-shrink: 0;
}
.np-employee-card__name { font-weight: 600; font-size: 0.93em; }
.np-employee-card__role { color: var(--np-muted); font-size: 0.78em; }
.np-employee-card__stats {
	margin-left: auto;
	display: flex;
	gap: 16px;
	font-size: 0.78em;
	color: var(--np-muted);
	text-align: center;
}
.np-employee-card__stats strong { display: block; font-size: 1.1em; color: var(--np-text); }

/* ── BADGE ────────────────────────────────────────────── */
.np-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1;
}
.np-badge--red { background: var(--np-danger); color: #fff; }
.np-badge--blue { background: var(--np-primary); color: #fff; }

/* ── PLACEHOLDER / EMPTY ──────────────────────────────── */
.np-app-placeholder {
	padding: 32px 16px;
	text-align: center;
	color: var(--np-muted);
	font-size: 0.9em;
}

/* ── TOAST ────────────────────────────────────────────── */
.np-app-toast-container {
	position: fixed;
	bottom: 80px;
	right: 16px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
}
@media (min-width: 900px) {
	.np-app-toast-container { bottom: 24px; }
}
.np-app-toast {
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 0.88em;
	font-weight: 500;
	color: #fff;
	box-shadow: 0 4px 16px rgba(0,0,0,.18);
	animation: npToastIn .25s ease;
}
.np-app-toast--success { background: var(--np-success); }
.np-app-toast--error   { background: var(--np-danger); }
.np-app-toast--info    { background: var(--np-primary); }
@keyframes npToastIn {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── LOADING ──────────────────────────────────────────── */
.np-app-loading {
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 50;
}
.np-app-loading__spinner {
	width: 36px;
	height: 36px;
	border: 3px solid var(--np-border);
	border-top-color: var(--np-primary);
	border-radius: 50%;
	animation: npSpin .7s linear infinite;
}
@keyframes npSpin { to { transform: rotate(360deg); } }

/* ── CALENDAR WRAPPER ─────────────────────────────────── */
#np-app-calendar {
	padding: 12px;
	font-size: 0.88em;
}

/* ── AUTOCOMPLETE ─────────────────────────────────────── */
.np-autocomplete-wrap {
	position: relative;
}
.np-autocomplete-list {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	background: var(--np-card);
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius);
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	z-index: 200;
	max-height: 220px;
	overflow-y: auto;
}
.np-autocomplete-item {
	padding: 10px 14px;
	cursor: pointer;
	font-size: 0.9em;
	border-bottom: 1px solid var(--np-border);
	transition: background .12s;
}
.np-autocomplete-item:last-child { border-bottom: none; }
.np-autocomplete-item:hover { background: #f0f7ff; }
.np-autocomplete-item strong { color: var(--np-text); }
.np-autocomplete-item span { color: var(--np-muted); font-size: .85em; }
.np-autocomplete-item--muted {
	cursor: default;
	color: var(--np-muted);
	font-style: italic;
}
.np-autocomplete-item--muted:hover { background: transparent; }

/* ── PAGINATION ───────────────────────────────────────── */
.np-app-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	font-size: 0.85em;
	color: var(--np-muted);
}
.np-app-pagination__nav { display: flex; gap: 6px; }

/* ── VIEWPORT FIT ─────────────────────────────────────── */
/* When the [np_app] shortcode page has body.np-app-page   */
@media (min-width: 900px) {
	body.np-app-page .np-app {
		height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
		min-height: unset;
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		overflow: hidden;
	}
	/* Main area scrolls internally */
	body.np-app-page .np-app-main {
		height: 100%;
		overflow-y: auto;
	}
	/* Sidebar already has height:100svh — clamp it too */
	body.np-app-page .np-app-nav {
		height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	}
}

/* ── HIDE PAGE TITLE ──────────────────────────────────── */
body.np-app-page .entry-title,
body.np-app-page .page-title,
body.np-app-page h1.wp-block-post-title,
body.np-app-page .wp-block-post-title,
body.np-app-page .entry-header,
body.np-app-page .page-header {
	display: none !important;
}
body.np-app-page .entry-content,
body.np-app-page .page-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* ── SIDEBAR TOGGLE BUTTON ────────────────────────────── */
.np-nav-toggle-btn {
	display: none;
}

@media (min-width: 900px) {
	.np-nav-toggle-btn {
		display: block;
		background: transparent;
		border: none;
		border-top: 1px solid rgba(255,255,255,.08);
		color: #94a3b8;
		cursor: pointer;
		padding: 10px 0;
		width: 100%;
		text-align: center;
		font-size: 1em;
		line-height: 1;
		flex-shrink: 0;
		transition: color .2s, background .2s;
	}
	.np-nav-toggle-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
}

/* Collapsed state */
.np-app--nav-collapsed .np-app-nav { width: 52px; overflow: hidden; }
.np-app--nav-collapsed .np-app-nav__label,
.np-app--nav-collapsed .np-app-nav__user-info { display: none; }
.np-app--nav-collapsed .np-app-nav__btn { justify-content: center; padding: 10px 0; }
.np-app--nav-collapsed .np-app-main { margin-left: 0; }

/* ── TOAST NOTIFICATIONS ──────────────────────────────── */
.np-app-toast-container,
.np-toast-container {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
}
.np-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 0.88em;
	font-weight: 500;
	color: #fff;
	box-shadow: 0 4px 16px rgba(0,0,0,.18);
	pointer-events: auto;
	animation: np-toast-in .22s ease;
	max-width: 340px;
	line-height: 1.4;
}
.np-toast--success { background: #16a34a; }
.np-toast--error   { background: #dc2626; }
.np-toast--info    { background: #2563eb; }
.np-toast.np-toast--out { animation: np-toast-out .22s ease forwards; }
@keyframes np-toast-in  { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0);} }
@keyframes np-toast-out { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(10px);} }

/* ── SERVICE ROWS (inside customer detail panel) ──────── */
.np-services-list { display: flex; flex-direction: column; gap: 6px; }

.np-service-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--np-surface, #f8fafc);
	border: 1px solid var(--np-border, #e5e7eb);
}
.np-service-row--inactive { opacity: 0.5; }

.np-service-row__info { flex: 1; min-width: 0; }
.np-service-row__name {
	font-size: 0.88em;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.np-service-row__meta {
	font-size: 0.78em;
	color: var(--np-muted, #6b7280);
	margin-top: 2px;
}
.np-service-row__actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── DATE / DAYS TOGGLE (New Schedule form) ───────────── */
.np-date-toggle {
	display: flex;
	gap: 0;
	margin-bottom: 8px;
	border: 1px solid var(--np-border, #e5e7eb);
	border-radius: 6px;
	overflow: hidden;
	width: fit-content;
}
.np-date-toggle__btn {
	background: transparent;
	border: none;
	padding: 5px 12px;
	font-size: 0.8em;
	font-weight: 500;
	color: var(--np-muted, #6b7280);
	cursor: pointer;
	transition: background .15s, color .15s;
	white-space: nowrap;
}
.np-date-toggle__btn + .np-date-toggle__btn {
	border-left: 1px solid var(--np-border, #e5e7eb);
}
.np-date-toggle__btn.active {
	background: var(--np-primary, #2563eb);
	color: #fff;
}
.np-date-toggle__btn:not(.active):hover {
	background: var(--np-surface, #f8fafc);
}

/* ============================================================
   MOBILE OVERHAUL — ≤ 639 px
   - Bottom navigation bar
   - Card-style table rows (no horizontal scroll)
   - Bigger, easier-to-tap buttons
   ============================================================ */

/* ── BOTTOM NAV on mobile ─────────────────────────────────── */
@media (max-width: 899px) {
	/* Stick nav to bottom */
	.np-app-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: auto;
		height: auto;
		padding: 0 4px calc(env(safe-area-inset-bottom, 0px));
		flex-direction: row;
		align-items: stretch;
		overflow-x: hidden;
		z-index: 200;
		box-shadow: 0 -2px 12px rgba(0,0,0,.18);
	}

	/* Hide logo on mobile nav (saves space) */
	.np-app-nav__logo { display: none; }

	/* Nav items fill the bar evenly */
	.np-app-nav__items {
		flex: 1;
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding: 0;
	}
	.np-app-nav__item { flex: 1; }

	/* Each nav button: tall tap target, icon on top + label below */
	.np-app-nav__btn {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 8px 4px;
		width: 100%;
		font-size: 0.65em;
		border-radius: 0;
		white-space: normal;
		text-align: center;
		min-height: 56px;
	}
	/* Show labels on mobile (column layout makes them fit) */
	.np-app-nav__label { display: inline; font-size: 0.9em; }
	.np-app-nav__icon  { font-size: 1.4em; }

	/* Push main content up so bottom nav doesn't cover it */
	.np-app-main {
		padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
	}

	/* Full-height app: remove sticky/overflow constraints on mobile */
	body.np-app-page .np-app {
		height: auto;
		min-height: 100svh;
		overflow: visible;
		position: static;
	}
	body.np-app-page .np-app-main {
		height: auto;
		overflow-y: visible;
	}
}

/* ── TABLE → CARD ROWS on mobile ─────────────────────────── */
@media (max-width: 639px) {

	/* Hide the table header row */
	.np-app-table thead { display: none; }

	/* Table fills container, no horizontal overflow */
	.np-app-table-wrap { overflow-x: hidden; }
	.np-app-table,
	.np-app-table tbody { display: block; width: 100%; }

	/* Each row becomes a card */
	.np-app-table tbody tr {
		display: block;
		background: var(--np-card);
		border-radius: var(--np-radius);
		box-shadow: var(--np-shadow);
		margin-bottom: 10px;
		padding: 12px 14px;
		border: 1px solid var(--np-border);
	}
	.np-app-table tbody tr:hover td { background: transparent; }

	/* Each cell: flex row with label on left, value on right */
	.np-app-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 6px 0;
		border-bottom: 1px solid #f3f4f6;
		font-size: 0.9em;
		text-align: right;
	}
	.np-app-table td:last-child { border-bottom: none; padding-bottom: 0; }
	.np-app-table td:first-child { padding-top: 0; }

	/* Show the data-label as the left side */
	.np-app-table td::before {
		content: attr(data-label);
		font-weight: 600;
		font-size: 0.8em;
		color: var(--np-muted);
		text-transform: uppercase;
		letter-spacing: .03em;
		flex-shrink: 0;
		text-align: left;
	}
	/* Cells with no label (action buttons): no before, full width */
	.np-app-table td[data-label=""] {
		justify-content: flex-end;
		border-bottom: none;
		padding-top: 10px;
	}
	.np-app-table td[data-label=""]::before { display: none; }

	/* Action buttons in table cells: wrap, full-width look */
	.np-col-actions {
		display: flex !important;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: flex-end;
	}

	/* Hide less critical columns on very small screens */
	.np-col-employee,
	.np-col-priority { display: none; }
}

/* ── BIGGER BUTTONS everywhere on mobile ─────────────────── */
@media (max-width: 639px) {

	/* Base button: taller, easier to read */
	.np-app-btn {
		padding: 11px 18px;
		font-size: 0.92em;
		min-height: 44px;
	}

	/* Small button variant: still larger than desktop */
	.np-app-btn--sm {
		padding: 9px 14px;
		font-size: 0.85em;
		min-height: 40px;
	}

	/* Section header action button: full width */
	.np-app-section__header .np-app-btn {
		padding: 12px 20px;
		font-size: 0.95em;
	}

	/* Filter bar: each input/button full row */
	.np-app-filters {
		flex-direction: column;
		gap: 8px;
	}
	.np-app-filters .np-app-input,
	.np-app-filters .np-app-select,
	.np-app-filters .np-app-btn {
		width: 100%;
		box-sizing: border-box;
	}

	/* Modal actions: stack buttons vertically */
	.np-app-modal__actions {
		flex-direction: column-reverse;
		gap: 8px;
	}
	.np-app-modal__actions .np-app-btn {
		width: 100%;
		justify-content: center;
		min-height: 48px;
		font-size: 1em;
	}

	/* Stack billing fields vertically on mobile */
	#np-complete-billing-row > div {
		flex-direction: column;
	}
	#np-complete-billing-row > div > div {
		min-width: 100% !important;
	}

	/* Modal padding tighter on mobile */
	.np-app-modal__box {
		padding: 20px 16px;
		border-radius: 10px;
	}

	/* Panel header close button: bigger tap target */
	.np-app-panel__close {
		width: 40px;
		height: 40px;
		font-size: 1.1em;
	}

	/* Panel body: slightly less padding */
	.np-app-panel__body { padding: 16px; }

	/* Panel form row: stack on mobile */
	.np-panel-form__row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	/* Panel form actions: full-width stacked buttons */
	.np-panel-form__actions {
		flex-direction: column-reverse;
		gap: 8px;
	}
	.np-panel-form__actions .np-app-btn {
		width: 100%;
		justify-content: center;
		min-height: 48px;
		font-size: 1em;
	}

	/* Customer detail action buttons: wrap & full-width */
	#np-detail-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	#np-detail-actions .np-app-btn {
		flex: 1 1 calc(50% - 4px);
		justify-content: center;
		min-height: 44px;
	}

	/* Section padding: tighter on phone */
	.np-app-section { padding: 12px; }

	/* Stats grid: 2 columns already, reduce gap */
	.np-stats-grid { gap: 8px; }
	.np-stat-card  { padding: 12px; }
	.np-stat-card__value { font-size: 1.6em; }

	/* Task items in dashboard: bigger action buttons */
	.np-app-task-item__actions .np-app-btn--sm {
		min-height: 38px;
		padding: 8px 12px;
	}

	/* Pagination: stack on mobile */
	.np-app-pagination {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.np-app-pagination__nav { width: 100%; justify-content: flex-end; }
	.np-app-pagination__nav .np-app-btn { min-height: 40px; padding: 8px 16px; }
}

/* ── SLIDE-OVER PANEL: full screen on mobile ─────────────── */
@media (max-width: 639px) {
	.np-app-panel {
		max-width: 100%;
		width: 100%;
		top: 0;
		bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	}
}

/* ── TOAST: full width on mobile ─────────────────────────── */
@media (max-width: 639px) {
	.np-app-toast-container,
	.np-toast-container {
		left: 12px;
		right: 12px;
		bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}
	.np-toast { max-width: 100%; font-size: 0.92em; }
}

/* ── FIX: WordPress emoji <img> tags block button clicks ── */
.np-app img.emoji {
	pointer-events: none;
	display: inline;
	width: 1.2em;
	height: 1.2em;
	vertical-align: -0.2em;
}

/* ── CALENDAR: minimal margins so cells are as large as possible ── */
#np-section-calendar { padding: 8px 4px; }
#np-app-calendar { padding: 0; font-size: 0.85em; }

@media (max-width: 899px) {
	#np-section-calendar { padding: 4px 0; }
	#np-app-calendar .fc .fc-toolbar { padding: 0 4px; flex-wrap: wrap; gap: 6px; }
	#np-app-calendar .fc .fc-toolbar-title { font-size: 1em; }
	#np-app-calendar .fc .fc-button { padding: 4px 8px; font-size: 0.78em; }
	#np-app-calendar .fc-daygrid-day-number { font-size: 0.78em; padding: 2px; }
	#np-app-calendar .fc-col-header-cell { font-size: 0.78em; padding: 3px 0; }
	/* Remove internal FullCalendar border-radius to reclaim space */
	#np-app-calendar .fc-daygrid-body { border-radius: 0; }
}

/* ── MOBILE: additional targeted fixes ─────────────────── */
@media (max-width: 639px) {

	/* Prevent filter inputs from forcing page width */
	.np-app-filters .np-app-input,
	.np-app-filters .np-app-select {
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
	}
	/* Date pair: side by side to save vertical space */
	.np-app-filters input[type="date"] {
		width: calc(50% - 4px);
		flex: 0 0 calc(50% - 4px);
	}

	/* Employee card: wrap on mobile */
	.np-employee-card {
		flex-wrap: wrap;
		gap: 10px;
	}
	.np-employee-card__info { flex: 1 1 calc(100% - 60px); }
	.np-employee-card__stats {
		width: 100%;
		justify-content: flex-start;
		gap: 20px;
		padding-top: 6px;
		border-top: 1px solid var(--np-border);
	}

	/* Section header: title + button on same row, button right-aligned */
	.np-app-section__header {
		align-items: center;
	}
	.np-app-section__header h2 { font-size: 1.1em; }

	/* Tasks section tab buttons */
	.np-tasks-tabs {
		display: flex;
		gap: 6px;
		flex-wrap: wrap;
	}
	.np-tasks-tabs .np-app-btn {
		flex: 1;
		justify-content: center;
		min-height: 40px;
	}

	/* Customer detail meta: single column on very small screens */
	.np-cust-detail-meta { grid-template-columns: 1fr; }

	/* Service rows: stack info and actions */
	.np-service-row { flex-wrap: wrap; }
	.np-service-row__info { width: 100%; }
	.np-service-row__actions { width: 100%; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════
   CSS-ONLY NAV ICONS  (immune to WP emoji conversion)
   ═══════════════════════════════════════════════════════════ */
.np-nav-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	text-align: center;
	pointer-events: none;
	flex-shrink: 0;
}
.np-nav-icon::before {
	display: block;
	pointer-events: none;
}
.np-icon-logo::before    { content: "\1F4CB"; }  /* clipboard */
.np-icon-dashboard::before { content: "\1F3E0"; }  /* house */
.np-icon-tasks::before   { content: "\2705"; }  /* check mark */
.np-icon-calendar::before { content: "\1F4C5"; }  /* calendar */
.np-icon-more::before    { content: "\2022\2022\2022"; font-size:10px; letter-spacing:2px; line-height:2.4; }
.np-icon-schedules::before { content: "\1F4CB"; }  /* notepad */
.np-icon-customers::before { content: "\1F3E2"; }  /* office */
.np-icon-employees::before { content: "\1F465"; }  /* people */
.np-icon-reports::before  { content: "\1F4CA"; }  /* bar chart */

/* Bigger nav buttons on all screens */
.np-app-nav__btn {
	min-height: 52px;
	font-size: 0.95rem;
	padding: 10px 14px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: More / secondary nav items
   ═══════════════════════════════════════════════════════════ */

/* Desktop: hide the More toggle and popup — secondary items always visible */
@media (min-width: 900px) {
	.np-more-toggle-item {
		display: none !important;
	}
	#np-more-popup {
		display: none !important;
	}
}

@media (max-width: 899px) {
	/* Secondary items hidden by default on mobile */
	.np-secondary-nav-item {
		display: none !important;
	}

	/* Popup panel that holds all secondary items — created by JS */
	#np-more-popup {
		display: none;
		position: fixed;
		right: 8px;
		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
		background: var(--np-surface, #fff);
		border: 1px solid var(--np-border, #e2e8f0);
		border-radius: 14px;
		box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
		z-index: 260;
		overflow: hidden;
		min-width: 170px;
	}
	#np-more-popup.open {
		display: block;
	}
	#np-more-popup .np-popup-btn {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 14px 18px;
		background: none;
		border: none;
		border-bottom: 1px solid var(--np-border, #e2e8f0);
		font-size: 0.95rem;
		font-weight: 500;
		color: var(--np-text, #1e293b);
		cursor: pointer;
		text-align: left;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}
	#np-more-popup .np-popup-btn:last-child {
		border-bottom: none;
	}
	#np-more-popup .np-popup-btn:active,
	#np-more-popup .np-popup-btn.active {
		background: var(--np-primary-light, #eef2ff);
		color: var(--np-primary, #4f46e5);
	}
	#np-more-popup .np-popup-icon {
		font-size: 20px;
		width: 24px;
		text-align: center;
	}

	/* More toggle active state */
	.np-more-toggle-btn.np-more-open-btn {
		color: var(--np-primary, #4f46e5);
	}

	/* Bigger bottom nav buttons on mobile */
	.np-app-nav .np-app-nav__btn {
		min-height: 56px;
		padding: 8px
/* Version badge */
.np-version-badge {
	display: inline-block;
	font-size: 0.62em;
	font-weight: 600;
	color: #6b7280;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 20px;
	padding: 1px 8px;
	vertical-align: middle;
	letter-spacing: 0.02em;
	margin-left: 6px;
}