/*!
 * OPLIVO Workspace - Design System & Application Styles
 * ---------------------------------------------------------------------
 * NOTE ON BRAND SOURCE: these tokens are taken directly from the real
 * oplivo.co.uk marketing theme (theme.json — "Ink Navy", "Operator
 * Blue", "Check Coral", "Pass Green", "Paper"), supplied after initial
 * build. Per that theme's own README, the marketing site intentionally
 * loads a distinctive display typeface (Space Grotesk) while the
 * *application* is meant to stay on a plain system-font stack — so this
 * file adopts the real brand colours, radii and button shape below, but
 * deliberately keeps typography on the system stack rather than pulling
 * in the marketing site's Google Fonts. Every colour, radius and
 * spacing value remains a CSS custom property in one place (:root) so
 * any future brand refresh is still a find-and-replace, not a redesign.
 * ---------------------------------------------------------------------
 */

:root {
	/* Brand — Operator Blue, from the real oplivo.co.uk palette */
	--op-brand-50:  #EAF0FF;
	--op-brand-100: #D2DFFF;
	--op-brand-300: #85A2FF;
	--op-brand-500: #2145FF;   /* primary — "Operator Blue" */
	--op-brand-600: #1A37CC;
	--op-brand-700: #142A99;
	--op-brand-900: #0A1329;   /* "Deep Navy", used for sidebar/header */

	/* Accent — "Check Coral", reserved for the single most important
	   action on a screen (mirrors the marketing site's own button-style
	   convention: coral for the one thing, blue for everything else). */
	--op-accent: #FF5A3C;
	--op-accent-hover: #E64A2E;

	/* Neutrals */
	--op-ink:       #14213D;   /* "Text" */
	--op-ink-soft:  #3B4560;
	--op-muted:     #5B6472;   /* "Muted Text" */
	--op-line:      #E2E5EB;   /* "Border" */
	--op-line-soft: #EEF0F4;
	--op-surface:   #FFFFFF;
	--op-bg:        #F6F7FB;   /* "Paper" */
	--op-bg-tint:   #EEF0F6;

	/* Semantic */
	--op-success: #1C9E6E;     /* "Pass Green" */
	--op-success-bg: #EAFAF3;
	--op-warning: #D98C00;
	--op-warning-bg: #FFF7E6;
	--op-danger:  #D92B2B;
	--op-danger-bg: #FEECEB;
	--op-info:    #2145FF;
	--op-info-bg: #EAF0FF;

	/* Priority accents */
	--op-priority-urgent: #D92B2B;
	--op-priority-high:   #D98C00;
	--op-priority-normal: #2145FF;
	--op-priority-low:    #5B6472;

	/* Typography — system stack by design; see brand-source note above */
	--op-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
	--op-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Radius + shadow — matches the real brand's radius scale (10/16/24/pill) */
	--op-radius-sm: 10px;
	--op-radius: 14px;
	--op-radius-lg: 20px;
	--op-radius-pill: 999px;
	--op-shadow-sm: 0 1px 2px rgba(10, 19, 41, 0.06);
	--op-shadow: 0 2px 8px rgba(10, 19, 41, 0.08);
	--op-shadow-lg: 0 8px 24px rgba(10, 19, 41, 0.14);

	/* Layout */
	--op-sidebar-width: 240px;
	--op-sidebar-collapsed: 64px;
	--op-topbar-height: 56px;
	--op-content-max: 1180px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--op-ink:       #EDF0F8;
		--op-ink-soft:  #C6CDE0;
		--op-muted:     #8D96B0;
		--op-line:      #232C4A;
		--op-line-soft: #1B2440;
		--op-surface:   #101B36;
		--op-bg:        #0A1329;
		--op-bg-tint:   #0E1930;
	}
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--op-bg);
	color: var(--op-ink);
	font-family: var(--op-font);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	/* Safety net: nothing in this design system should ever cause the
	   whole page to scroll sideways on a narrow screen - any content
	   that's genuinely wider than the viewport (a tab bar, a table)
	   scrolls within its own container instead (see .op-tabs, .op-table
	   below), never the page itself. */
	overflow-x: hidden;
}

a { color: var(--op-brand-500); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 650; letter-spacing: -0.01em; color: var(--op-ink); }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 12px; color: var(--op-ink-soft); }

/* The "O" mark: a flat Operator-Blue square carrying the wordmark's
   initial, matching the real oplivo.co.uk logo mark exactly. Sized here
   for auth/standalone pages; .op-sidebar-brand and .op-public-header
   override the dimensions for their own contexts. */
.op-logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--op-radius-sm);
	background: var(--op-brand-500);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	flex-shrink: 0;
}

/* Shared "standalone page" layout - every auth page, the platform
   admin login, and the public booking pages all use these classes.
   Defined here (not in public.css) because app.css is the one
   stylesheet guaranteed to load on all of them, so the page is
   correctly centred and padded even where public.css isn't loaded. */
body.op-public {
	background: var(--op-bg);
	min-height: 100vh;
}
.op-public-wrap {
	max-width: 480px;
	width: 100%;
	margin: 0 auto;
	padding: 40px 18px 80px;
	box-sizing: border-box;
}
.op-public-header {
	text-align: center;
	margin-bottom: 24px;
}
.op-public-header .op-logo-mark {
	width: 40px; height: 40px; border-radius: var(--op-radius-sm); margin: 0 auto 12px;
	background: var(--op-brand-500);
	font-size: 18px;
}

::selection { background: var(--op-brand-100); }

/* Focus visibility - accessibility requirement (brief section 70) */
:focus-visible {
	outline: 2px solid var(--op-brand-500);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * App shell layout
 * ------------------------------------------------------------------ */

.op-app {
	display: flex;
	min-height: 100vh;
}

.op-sidebar {
	width: var(--op-sidebar-width);
	flex-shrink: 0;
	background: var(--op-brand-900);
	color: #E4E8F5;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	transition: width 0.15s ease;
}
.op-sidebar.is-collapsed { width: var(--op-sidebar-collapsed); }

.op-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	font-weight: 700;
	font-size: 15px;
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	white-space: nowrap;
	overflow: hidden;
}
.op-sidebar-brand .op-logo-mark {
	width: 26px; height: 26px; border-radius: var(--op-radius-sm);
	background: var(--op-brand-500);
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; color: #fff;
}

.op-workspace-switcher {
	margin: 10px 12px;
	padding: 8px 10px;
	background: rgba(255,255,255,0.06);
	border-radius: var(--op-radius);
	cursor: pointer;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
}
.op-workspace-switcher:hover { background: rgba(255,255,255,0.1); }
.op-workspace-switcher .op-ws-name { overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: #fff; }
.op-workspace-switcher .op-ws-role { font-size: 11px; color: #8D9BC4; text-transform: capitalize; }

.op-nav { flex: 1; overflow-y: auto; padding: 8px 10px; }
.op-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--op-radius-sm);
	color: #B7C1DE;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	margin-bottom: 2px;
}
.op-nav-item .op-nav-icon { width: 18px; text-align: center; flex-shrink: 0; opacity: 0.9; }
.op-nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.op-nav-item.is-active { background: rgba(255,255,255,0.12); color: #fff; }
.op-nav-item .op-badge-count {
	margin-left: auto;
	background: rgba(255,255,255,0.15);
	color: #fff;
	font-size: 11px;
	padding: 1px 6px;
	border-radius: 999px;
}

.op-sidebar-footer { padding: 10px; border-top: 1px solid rgba(255,255,255,0.08); }

.op-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.op-topbar {
	height: var(--op-topbar-height);
	border-bottom: 1px solid var(--op-line);
	background: var(--op-surface);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 20px;
	position: sticky;
	top: 0;
	z-index: 10;
}
.op-topbar-search {
	flex: 1;
	max-width: 420px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--op-bg-tint);
	border: 1px solid var(--op-line);
	border-radius: var(--op-radius);
	padding: 6px 10px;
	color: var(--op-muted);
	font-size: 13px;
	cursor: pointer;
}
.op-topbar-search kbd {
	background: var(--op-surface);
	border: 1px solid var(--op-line);
	border-radius: 4px;
	padding: 1px 5px;
	font-size: 11px;
	font-family: var(--op-font-mono);
	margin-left: auto;
}

.op-content {
	flex: 1;
	padding: 24px 28px 60px;
	max-width: var(--op-content-max);
	width: 100%;
	margin: 0 auto;
}

.op-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.op-page-header .op-eyebrow { color: var(--op-muted); font-size: 12.5px; margin-bottom: 2px; }

/* ------------------------------------------------------------------ *
 * Primitives: buttons, inputs, cards, badges, tables
 * ------------------------------------------------------------------ */

.op-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: var(--op-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	background: var(--op-surface);
	color: var(--op-ink);
	border-color: var(--op-line);
	line-height: 1.3;
}
.op-btn:hover { background: var(--op-bg-tint); }
.op-btn-primary { background: var(--op-brand-500); border-color: var(--op-brand-500); color: #fff; }
.op-btn-primary:hover { background: var(--op-brand-600); }
.op-btn-danger { background: var(--op-danger); border-color: var(--op-danger); color: #fff; }
.op-btn-danger:hover { background: #A62F29; }
.op-btn-ghost { background: transparent; border-color: transparent; }
.op-btn-ghost:hover { background: var(--op-bg-tint); }
.op-btn-sm { padding: 5px 12px; font-size: 12.5px; }
.op-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.op-btn-icon { width: 32px; height: 32px; padding: 0; border-radius: 50%; }

.op-input, .op-select, .op-textarea {
	width: 100%;
	padding: 8px 10px;
	font-size: 13.5px;
	border: 1px solid var(--op-line);
	border-radius: var(--op-radius-sm);
	background: var(--op-surface);
	color: var(--op-ink);
	font-family: inherit;
}
.op-input:focus, .op-select:focus, .op-textarea:focus {
	outline: none;
	border-color: var(--op-brand-500);
	box-shadow: 0 0 0 3px var(--op-brand-100);
}
.op-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--op-ink-soft); margin-bottom: 5px; }
.op-field { margin-bottom: 14px; }
.op-help { font-size: 12px; color: var(--op-muted); margin-top: 4px; }
.op-error-text { font-size: 12px; color: var(--op-danger); margin-top: 4px; }

.op-card {
	background: var(--op-surface);
	border: 1px solid var(--op-line);
	border-radius: var(--op-radius-lg);
	padding: 18px;
}
.op-card + .op-card { margin-top: 14px; }
.op-card-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--op-muted); margin-bottom: 10px; }

.op-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 20px; }
.op-stat { background: var(--op-surface); border: 1px solid var(--op-line); border-radius: var(--op-radius-lg); padding: 16px; }
.op-stat .op-stat-value { font-size: 24px; font-weight: 700; color: var(--op-ink); }
.op-stat .op-stat-label { font-size: 12.5px; color: var(--op-muted); margin-top: 2px; }

.op-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	background: var(--op-bg-tint);
	color: var(--op-ink-soft);
	white-space: nowrap;
}
.op-badge-success { background: var(--op-success-bg); color: var(--op-success); }
.op-badge-warning { background: var(--op-warning-bg); color: var(--op-warning); }
.op-badge-danger  { background: var(--op-danger-bg); color: var(--op-danger); }
.op-badge-info    { background: var(--op-info-bg); color: var(--op-info); }

.op-priority-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.op-priority-urgent .op-priority-dot { background: var(--op-priority-urgent); }
.op-priority-high .op-priority-dot { background: var(--op-priority-high); }
.op-priority-normal .op-priority-dot { background: var(--op-priority-normal); }
.op-priority-low .op-priority-dot { background: var(--op-priority-low); }

.op-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.op-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--op-muted); padding: 8px 10px; border-bottom: 1px solid var(--op-line); }
.op-table td { padding: 10px; border-bottom: 1px solid var(--op-line-soft); vertical-align: middle; }
.op-table tr:hover td { background: var(--op-bg-tint); }

.op-list-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--op-radius);
	border: 1px solid transparent;
	cursor: pointer;
}
.op-list-row:hover { background: var(--op-bg-tint); border-color: var(--op-line); }
.op-checkbox { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--op-line); flex-shrink: 0; cursor: pointer; }
.op-checkbox.is-checked { background: var(--op-brand-500); border-color: var(--op-brand-500); }

.op-empty-state {
	text-align: center;
	padding: 48px 24px;
	color: var(--op-muted);
	border: 1px dashed var(--op-line);
	border-radius: var(--op-radius-lg);
	background: var(--op-surface);
}
.op-empty-state h3 { color: var(--op-ink); margin-bottom: 6px; }
.op-empty-state p { max-width: 380px; margin: 0 auto 16px; }

.op-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--op-brand-100); color: var(--op-brand-700); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }

.op-modal-backdrop { position: fixed; inset: 0; background: rgba(10,19,41,0.5); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 100; overflow-y: auto; }
.op-modal { background: var(--op-surface); border-radius: var(--op-radius-lg); box-shadow: var(--op-shadow-lg); width: 100%; max-width: 520px; padding: 22px; }
.op-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

.op-toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.op-toast { background: var(--op-ink); color: #fff; padding: 10px 16px; border-radius: var(--op-radius); font-size: 13px; box-shadow: var(--op-shadow-lg); }
.op-toast.is-error { background: var(--op-danger); }
.op-toast.is-success { background: var(--op-success); }

.op-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--op-line); margin-bottom: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.op-tabs::-webkit-scrollbar { display: none; }
.op-tab { padding: 8px 4px; margin-right: 16px; font-size: 13.5px; font-weight: 600; color: var(--op-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
.op-tab.is-active { color: var(--op-brand-600); border-color: var(--op-brand-500); }

.op-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--op-radius); font-size: 13px; margin-bottom: 18px; }
.op-banner-trial { background: var(--op-info-bg); color: var(--op-info); }
.op-banner-warning { background: var(--op-warning-bg); color: var(--op-warning); }
.op-banner-danger { background: var(--op-danger-bg); color: var(--op-danger); }

.op-loading { color: var(--op-muted); padding: 40px; text-align: center; }

.op-fab {
	/* Deliberately the one place the app uses the "Check Coral" accent
	   rather than Operator Blue — reserved for the single action most
	   deserving of attention on any given screen, matching the same
	   convention used on oplivo.co.uk (blue for everyday actions, coral
	   for the one thing). */
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--op-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: var(--op-shadow-lg);
	cursor: pointer;
	border: none;
	z-index: 50;
}
.op-fab:hover { background: var(--op-accent-hover); }

/* Calendar grid */
.op-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--op-line); border-radius: var(--op-radius-lg); overflow: hidden; }
.op-cal-cell { min-height: 100px; border-right: 1px solid var(--op-line-soft); border-bottom: 1px solid var(--op-line-soft); padding: 6px; background: var(--op-surface); }
.op-cal-cell.is-today { background: var(--op-brand-50); }
.op-cal-cell .op-cal-date { font-size: 12px; color: var(--op-muted); margin-bottom: 4px; }
.op-cal-event { font-size: 11.5px; padding: 2px 6px; border-radius: 4px; background: var(--op-brand-100); color: var(--op-brand-700); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mobile navigation (brief section 38/68) */
.op-mobile-topbar { display: none; }
.op-mobile-nav { display: none; }
.op-sidebar-backdrop { display: none; }

@media (max-width: 880px) {
	/* .op-app is a flex ROW (sidebar | main) on desktop. .op-sidebar
	   leaving the row via position:fixed below is fine, but
	   .op-mobile-topbar and .op-main were still two flex items sitting
	   side by side in that same row - .op-mobile-topbar shrank to fit
	   its own content (hamburger + workspace name + bell) instead of
	   spanning full width, and .op-main's flex:1 then greedily filled
	   the leftover sliver beside it, squeezing the whole page (greeting,
	   nav, everything) into a narrow right-hand column. Stacking the
	   row into a column fixes that: topbar full-width on top, content
	   full-width below, with the off-canvas sidebar still overlaying via
	   position:fixed regardless of this axis change.
	 */
	.op-app { flex-direction: column; }
	.op-sidebar {
		position: fixed; left: -280px; top: 0; z-index: 90; height: 100vh;
		transition: left 0.2s ease; box-shadow: var(--op-shadow-lg);
	}
	.op-sidebar.is-open { left: 0; }
	/* A tap outside the open drawer (or the toggle button again) closes
	   it - without this it's easy to lose track of an open mobile menu,
	   which is what made it feel like it "disappeared" unpredictably. */
	.op-sidebar-backdrop {
		display: block; position: fixed; inset: 0; background: rgba(10,19,41,0.5);
		z-index: 85; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
	}
	.op-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
	.op-mobile-topbar {
		display: flex; align-items: center; justify-content: space-between;
		height: 52px; padding: 0 14px; background: var(--op-brand-900); color: #fff; position: sticky; top: 0; z-index: 60;
	}
	.op-mobile-nav {
		display: flex; justify-content: space-around; align-items: center;
		position: fixed; bottom: 0; left: 0; right: 0; height: 58px;
		background: var(--op-surface); border-top: 1px solid var(--op-line); z-index: 60;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.op-mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--op-muted); flex: 1; padding: 6px 0; }
	.op-mobile-nav-item.is-active { color: var(--op-brand-500); }
	.op-content { padding: 16px 14px 80px; }
	.op-stat-grid { grid-template-columns: repeat(2, 1fr); }
	.op-today-cols { grid-template-columns: 1fr !important; }
	.op-cal-grid { grid-template-columns: 1fr; }
	.op-topbar { display: none; }
	.op-fab { bottom: 74px; }
}

/* Utility */
.op-flex { display: flex; }
.op-flex-col { display: flex; flex-direction: column; }
.op-gap-8 { gap: 8px; } .op-gap-12 { gap: 12px; } .op-gap-16 { gap: 16px; }
.op-items-center { align-items: center; }
.op-justify-between { justify-content: space-between; }
.op-muted { color: var(--op-muted); }
.op-mt-0 { margin-top: 0; } .op-mb-0 { margin-bottom: 0; }
.op-w-full { width: 100%; }
.op-text-sm { font-size: 12.5px; }
.op-hidden { display: none !important; }