/* ==========================================================================
   Finalytics UI Kit  (fy_kit.css)
   --------------------------------------------------------------------------
   Single source of truth for Finalytics UI: design tokens + reusable
   components. Native-first (pure CSS + tiny JS), injected into the desk and
   website via finalytics_ui.hooks.app_include_css. No build step, no library.

   Conventions
   -----------
   * Tokens: --fy-* on :root (colors, spacing, radius, elevation, type, z).
   * Components: .fy-* classes. Never hardcode a hex or a px gap in a page —
     use a token or a component class.
   * Naming modelled on the best of MUI (tokens, elevation, variants) and
     Element Plus (table/form/feedback ergonomics).
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
	/* brand */
	--fy-primary: #1976d2;
	--fy-primary-dark: #1565c0;
	--fy-primary-light: #42a5f5;
	--fy-primary-bg: rgba(25, 118, 210, 0.10);
	--fy-accent: #FFA00A;
	--fy-accent-bg: rgba(255, 160, 10, 0.14);

	/* semantic */
	--fy-success: #16A34A;
	--fy-success-bg: #E7F6EC;
	--fy-warning: #D97706;
	--fy-warning-bg: #FDF1E0;
	--fy-danger: #DC2626;
	--fy-danger-bg: #FDEAEA;
	--fy-info: #0891B2;
	--fy-info-bg: #E4F6F9;

	/* ink / surfaces */
	--fy-ink: #1F272E;
	--fy-ink-2: #36414C;
	--fy-ink-3: #5A6672;
	--fy-muted: #8D99A6;
	--fy-surface: #FFFFFF;
	--fy-surface-2: #F7F8FA;
	--fy-surface-3: #EEF1F4;
	--fy-border: #E4E7EA;
	--fy-border-strong: #D3D8DD;

	/* spacing scale (4px base, 8px rhythm) */
	--fy-space-1: 4px;
	--fy-space-2: 8px;
	--fy-space-3: 12px;
	--fy-space-4: 16px;
	--fy-space-5: 24px;
	--fy-space-6: 32px;
	--fy-space-7: 40px;
	--fy-space-8: 48px;

	/* radius */
	--fy-radius-sm: 8px;
	--fy-radius: 12px;
	--fy-radius-lg: 14px;
	--fy-radius-pill: 999px;

	/* elevation (MUI-style scale) */
	--fy-shadow-0: none;
	--fy-shadow-1: 0 1px 2px rgba(20, 40, 80, 0.06);
	--fy-shadow-2: 0 2px 10px rgba(20, 40, 80, 0.07);
	--fy-shadow-3: 0 8px 24px rgba(20, 40, 80, 0.12);
	--fy-shadow-4: 0 16px 40px rgba(20, 40, 80, 0.16);

	/* typography */
	--fy-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fy-fs-1: 11px;
	--fy-fs-2: 12px;
	--fy-fs-3: 13px;
	--fy-fs-4: 14px;
	--fy-fs-5: 16px;
	--fy-fs-6: 19px;
	--fy-fs-7: 23px;
	--fy-fs-8: 28px;

	/* layers + motion */
	--fy-z-sticky: 10;
	--fy-z-drawer: 1000;
	--fy-z-modal: 1050;
	--fy-z-toast: 1100;
	--fy-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--fy-dur: 0.18s;
}

/* --------------------------------------------------------------- layout -- */
/* Keep a permanent vertical scrollbar gutter. Workspaces mount async card
   widgets that grow the page; without a reserved gutter the desktop viewport
   width changes when the scrollbar appears, which resizes (and breaks the
   redraw of) any frappe Dashboard Chart on the page. */
html { overflow-y: scroll; }

/* Workspace custom-HTML card widgets fetch their block doc asynchronously.
   They deliberately reserve NO fixed height: each card sizes to its content so
   it does not waste vertical space. Any post-mount reflow on a workspace that
   also carries a frappe Dashboard Chart is absorbed by the ResizeObserver guard
   installed by js/finalytics_ui.js. */

.fy-kit,
.fy-page {
	font-family: var(--fy-font);
	color: var(--fy-ink);
	font-variant-numeric: tabular-nums;
}
.fy-page { background: var(--fy-surface-2); min-height: 100vh; }

.fy-container { width: 100%; max-width: 100%; padding: var(--fy-space-5) var(--fy-space-6) var(--fy-space-7); }
.fy-section { margin-bottom: var(--fy-space-6); }
.fy-section > .fy-section-title { margin: 0 0 var(--fy-space-3); }

.fy-stack { display: flex; flex-direction: column; gap: var(--fy-space-4); }
.fy-row { display: flex; align-items: center; gap: var(--fy-space-3); flex-wrap: wrap; }
.fy-spacer { flex: 1; }

.fy-grid { display: grid; gap: var(--fy-space-4); }
.fy-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fy-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fy-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fy-grid.auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 1000px) {
	.fy-grid.cols-2, .fy-grid.cols-3, .fy-grid.cols-4 { grid-template-columns: 1fr; }
}

.fy-divider { height: 1px; background: var(--fy-border); border: 0; margin: var(--fy-space-4) 0; }

/* spacing utilities */
.fy-mt-2 { margin-top: var(--fy-space-2); } .fy-mt-3 { margin-top: var(--fy-space-3); }
.fy-mt-4 { margin-top: var(--fy-space-4); } .fy-mt-5 { margin-top: var(--fy-space-5); }
.fy-mb-2 { margin-bottom: var(--fy-space-2); } .fy-mb-3 { margin-bottom: var(--fy-space-3); }
.fy-mb-4 { margin-bottom: var(--fy-space-4); } .fy-mb-5 { margin-bottom: var(--fy-space-5); }
.fy-p-3 { padding: var(--fy-space-3); } .fy-p-4 { padding: var(--fy-space-4); }
.fy-p-5 { padding: var(--fy-space-5); }

/* ------------------------------------------------------------ typography -- */
.fy-h1, .fy-h2, .fy-h3, .fy-h4 { margin: 0; color: var(--fy-ink); font-weight: 800; line-height: 1.25; }
.fy-h1 { font-size: var(--fy-fs-8); }
.fy-h2 { font-size: var(--fy-fs-7); }
.fy-h3 { font-size: var(--fy-fs-6); }
.fy-h4 { font-size: var(--fy-fs-5); font-weight: 700; }
.fy-body { font-size: var(--fy-fs-4); color: var(--fy-ink-2); }
.fy-caption { font-size: var(--fy-fs-2); color: var(--fy-muted); }
.fy-overline { font-size: var(--fy-fs-1); font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--fy-muted); }
.fy-num { font-variant-numeric: tabular-nums; }
.fy-text-primary { color: var(--fy-primary); }
.fy-text-success { color: var(--fy-success); }
.fy-text-danger { color: var(--fy-danger); }
.fy-text-muted { color: var(--fy-muted); }

/* --------------------------------------------------------------- surfaces -- */
.fy-card {
	background: var(--fy-surface);
	border: 1px solid var(--fy-border);
	border-radius: var(--fy-radius-lg);
	box-shadow: var(--fy-shadow-2);
	overflow: hidden;
}
.fy-card.elevated { box-shadow: var(--fy-shadow-3); }
.fy-card.flat { box-shadow: none; }
.fy-card.accent { position: relative; }
.fy-card.accent::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: linear-gradient(90deg, var(--fy-primary), var(--fy-primary-light));
}
.fy-card-head {
	display: flex; align-items: center; gap: var(--fy-space-3);
	padding: var(--fy-space-3) var(--fy-space-4);
	border-bottom: 1px solid var(--fy-border);
}
.fy-card-title { font-size: var(--fy-fs-4); font-weight: 700; color: var(--fy-ink); }
.fy-card-sub { font-size: var(--fy-fs-2); color: var(--fy-muted); }
.fy-card-body { padding: var(--fy-space-4); }
.fy-card-foot { padding: var(--fy-space-3) var(--fy-space-4); border-top: 1px solid var(--fy-border); background: var(--fy-surface-2); }

/* ------------------------------------------------------------------- KPI -- */
.fy-kpi {
	background: var(--fy-surface); border: 1px solid var(--fy-border);
	border-radius: var(--fy-radius-lg); box-shadow: var(--fy-shadow-2);
	padding: var(--fy-space-4); display: flex; flex-direction: column; gap: var(--fy-space-2);
}
.fy-kpi .lbl { font-size: var(--fy-fs-1); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--fy-muted); }
.fy-kpi .val { font-size: var(--fy-fs-7); font-weight: 800; color: var(--fy-ink); line-height: 1.1; }
.fy-kpi .sub { font-size: var(--fy-fs-2); color: var(--fy-muted); }
.fy-kpi .delta { font-size: var(--fy-fs-2); font-weight: 700; }
.fy-kpi .delta.up { color: var(--fy-success); }
.fy-kpi .delta.down { color: var(--fy-danger); }

/* ----------------------------------------------------------------- chips -- */
.fy-chip {
	display: inline-flex; align-items: center; gap: var(--fy-space-1);
	padding: 3px 10px; border-radius: var(--fy-radius-pill);
	font-size: var(--fy-fs-1); font-weight: 700;
	background: var(--fy-surface-3); border: 1px solid var(--fy-border); color: var(--fy-ink-3);
}
.fy-chip b { font-weight: 800; color: var(--fy-ink); }
.fy-chip.primary { background: var(--fy-primary-bg); border-color: transparent; color: var(--fy-primary-dark); }
.fy-chip.success { background: var(--fy-success-bg); border-color: transparent; color: var(--fy-success); }
.fy-chip.warning { background: var(--fy-warning-bg); border-color: transparent; color: var(--fy-warning); }
.fy-chip.danger  { background: var(--fy-danger-bg);  border-color: transparent; color: var(--fy-danger); }
.fy-chip.info    { background: var(--fy-info-bg);    border-color: transparent; color: var(--fy-info); }
.fy-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.fy-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--fy-radius-pill);
	font-size: var(--fy-fs-1); font-weight: 800; background: var(--fy-primary); color: #fff;
}
.fy-badge.muted { background: var(--fy-surface-3); color: var(--fy-ink-3); }
.fy-badge.danger { background: var(--fy-danger); }

.fy-avatar {
	width: 36px; height: 36px; border-radius: var(--fy-radius-pill);
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--fy-primary-bg); color: var(--fy-primary-dark); font-weight: 800; font-size: var(--fy-fs-3);
}

/* ----------------------------------------------------------------- table -- */
.fy-table { width: 100%; border: 1px solid var(--fy-border); border-radius: var(--fy-radius); overflow: hidden; background: var(--fy-surface); }
.fy-table .hd, .fy-table .tr { display: grid; align-items: center; gap: var(--fy-space-3); padding: var(--fy-space-3) var(--fy-space-4); }
.fy-table .hd {
	background: var(--fy-surface-2); border-bottom: 1px solid var(--fy-border);
	font-size: var(--fy-fs-1); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--fy-muted);
}
.fy-table .tr { border-bottom: 1px solid var(--fy-border); font-size: var(--fy-fs-3); }
.fy-table .tr:last-child { border-bottom: none; }
.fy-table .tr:hover { background: var(--fy-primary-bg); }
.fy-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fy-table .strong { font-weight: 700; color: var(--fy-ink); }
.fy-table.cols-3 { }
.fy-table .c3 { grid-template-columns: 2fr 1fr 1fr; }

/* ------------------------------------------------------------------ list -- */
.fy-list { background: var(--fy-surface); border: 1px solid var(--fy-border); border-radius: var(--fy-radius); overflow: hidden; }
.fy-list .item { display: flex; align-items: center; gap: var(--fy-space-3); padding: var(--fy-space-3) var(--fy-space-4); border-bottom: 1px solid var(--fy-border); }
.fy-list .item:last-child { border-bottom: none; }
.fy-list .item:hover { background: var(--fy-surface-2); }
.fy-list .item .who { font-weight: 700; font-size: var(--fy-fs-3); color: var(--fy-ink); }
.fy-list .item .meta { font-size: var(--fy-fs-1); color: var(--fy-muted); }

/* -------------------------------------------------------------- buttons -- */
.fy-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--fy-space-2);
	height: 34px; padding: 0 var(--fy-space-4); border-radius: var(--fy-radius-sm);
	font-size: var(--fy-fs-3); font-weight: 600; cursor: pointer;
	border: 1px solid transparent; background: var(--fy-surface-3); color: var(--fy-ink-2);
	transition: background var(--fy-dur) var(--fy-ease), box-shadow var(--fy-dur) var(--fy-ease), transform var(--fy-dur) var(--fy-ease);
	text-decoration: none; white-space: nowrap;
}
.fy-btn:hover { transform: translateY(-1px); box-shadow: var(--fy-shadow-1); }
.fy-btn.primary { background: var(--fy-primary); color: #fff; }
.fy-btn.primary:hover { background: var(--fy-primary-dark); }
.fy-btn.outline { background: transparent; border-color: var(--fy-border-strong); color: var(--fy-ink-2); }
.fy-btn.ghost { background: transparent; color: var(--fy-primary-dark); }
.fy-btn.danger { background: var(--fy-danger); color: #fff; }
.fy-btn.sm { height: 28px; padding: 0 var(--fy-space-3); font-size: var(--fy-fs-2); }
.fy-btn.lg { height: 42px; padding: 0 var(--fy-space-5); font-size: var(--fy-fs-4); }
.fy-btn.block { width: 100%; }
.fy-btn[disabled], .fy-btn.disabled { opacity: 0.5; pointer-events: none; }
.fy-icon-btn {
	width: 34px; height: 34px; padding: 0; border-radius: var(--fy-radius-pill);
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--fy-border); background: var(--fy-surface); color: var(--fy-ink-3); cursor: pointer;
}
.fy-icon-btn:hover { background: var(--fy-primary-bg); color: var(--fy-primary-dark); }

/* ----------------------------------------------------------- forms/fields -- */
.fy-field { display: flex; flex-direction: column; gap: 6px; }
.fy-label { font-size: var(--fy-fs-2); font-weight: 600; color: var(--fy-ink-2); }
.fy-label .req { color: var(--fy-danger); margin-left: 2px; }
.fy-input, .fy-select, .fy-textarea {
	height: 36px; padding: 0 var(--fy-space-3); border: 1px solid var(--fy-border-strong);
	border-radius: var(--fy-radius-sm); background: var(--fy-surface); color: var(--fy-ink);
	font-size: var(--fy-fs-3); font-family: var(--fy-font); width: 100%;
	transition: border-color var(--fy-dur) var(--fy-ease), box-shadow var(--fy-dur) var(--fy-ease);
}
.fy-textarea { height: auto; min-height: 76px; padding: var(--fy-space-2) var(--fy-space-3); resize: vertical; }
.fy-input:focus, .fy-select:focus, .fy-textarea:focus {
	outline: none; border-color: var(--fy-primary); box-shadow: 0 0 0 3px var(--fy-primary-bg);
}
.fy-input.error, .fy-select.error { border-color: var(--fy-danger); }
.fy-input.error:focus { box-shadow: 0 0 0 3px var(--fy-danger-bg); }
.fy-help { font-size: var(--fy-fs-1); color: var(--fy-muted); }
.fy-help.error { color: var(--fy-danger); }
.fy-check { display: inline-flex; align-items: center; gap: var(--fy-space-2); font-size: var(--fy-fs-3); color: var(--fy-ink-2); cursor: pointer; }
.fy-check input { width: 16px; height: 16px; accent-color: var(--fy-primary); }
.fy-switch { position: relative; display: inline-flex; align-items: center; gap: var(--fy-space-2); cursor: pointer; font-size: var(--fy-fs-3); color: var(--fy-ink-2); }
.fy-switch input { position: absolute; opacity: 0; }
.fy-switch .track { width: 38px; height: 22px; border-radius: var(--fy-radius-pill); background: var(--fy-border-strong); transition: background var(--fy-dur) var(--fy-ease); position: relative; }
.fy-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--fy-shadow-1); transition: transform var(--fy-dur) var(--fy-ease); }
.fy-switch input:checked + .track { background: var(--fy-primary); }
.fy-switch input:checked + .track::after { transform: translateX(16px); }

/* ---------------------------------------------------------------- tabs --- */
.fy-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--fy-surface-3); border-radius: var(--fy-radius-pill); }
.fy-tabs .tab { padding: 6px 14px; border-radius: var(--fy-radius-pill); font-size: var(--fy-fs-3); font-weight: 600; color: var(--fy-ink-3); cursor: pointer; border: none; background: transparent; }
.fy-tabs .tab.active { background: var(--fy-surface); color: var(--fy-primary-dark); box-shadow: var(--fy-shadow-1); }
.fy-tabline { display: flex; gap: var(--fy-space-5); border-bottom: 1px solid var(--fy-border); }
.fy-tabline .tab { padding: var(--fy-space-3) 0; font-size: var(--fy-fs-3); font-weight: 600; color: var(--fy-muted); cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent; }
.fy-tabline .tab.active { color: var(--fy-primary-dark); border-bottom-color: var(--fy-primary); }

/* ------------------------------------------------------------- feedback -- */
.fy-alert { display: flex; gap: var(--fy-space-3); padding: var(--fy-space-3) var(--fy-space-4); border-radius: var(--fy-radius); font-size: var(--fy-fs-3); border: 1px solid transparent; }
.fy-alert.info { background: var(--fy-info-bg); color: #075985; }
.fy-alert.success { background: var(--fy-success-bg); color: #14532d; }
.fy-alert.warning { background: var(--fy-warning-bg); color: #7c2d12; }
.fy-alert.danger { background: var(--fy-danger-bg); color: #7f1d1d; }

.fy-progress { height: 8px; border-radius: var(--fy-radius-pill); background: var(--fy-surface-3); overflow: hidden; }
.fy-progress > span { display: block; height: 100%; background: var(--fy-primary); border-radius: inherit; }
.fy-progress.success > span { background: var(--fy-success); }
.fy-progress.warning > span { background: var(--fy-warning); }
.fy-progress.danger > span { background: var(--fy-danger); }

.fy-skeleton { background: linear-gradient(90deg, var(--fy-surface-3) 25%, #e9edf1 37%, var(--fy-surface-3) 63%); background-size: 400% 100%; animation: fy-shimmer 1.4s ease infinite; border-radius: var(--fy-radius-sm); height: 14px; }
@keyframes fy-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.fy-empty { padding: var(--fy-space-6); text-align: center; color: var(--fy-muted); font-size: var(--fy-fs-3); }
.fy-empty .ic { font-size: 26px; opacity: 0.5; margin-bottom: var(--fy-space-2); }

/* --------------------------------------------------------- descriptions -- */
.fy-desc { display: grid; grid-template-columns: 180px 1fr; border: 1px solid var(--fy-border); border-radius: var(--fy-radius); overflow: hidden; }
.fy-desc .k, .fy-desc .v { padding: var(--fy-space-3) var(--fy-space-4); font-size: var(--fy-fs-3); border-bottom: 1px solid var(--fy-border); }
.fy-desc .k { background: var(--fy-surface-2); font-weight: 600; color: var(--fy-ink-3); }
.fy-desc .v { color: var(--fy-ink); }

/* ------------------------------------------------------------- timeline -- */
.fy-timeline { position: relative; padding-left: var(--fy-space-5); }
.fy-timeline::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--fy-border); }
.fy-timeline .ev { position: relative; padding-bottom: var(--fy-space-4); }
.fy-timeline .ev::before { content: ""; position: absolute; left: -21px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--fy-primary); border: 2px solid var(--fy-surface); box-shadow: 0 0 0 2px var(--fy-primary-bg); }
.fy-timeline .ev .t { font-size: var(--fy-fs-3); font-weight: 700; color: var(--fy-ink); }
.fy-timeline .ev .d { font-size: var(--fy-fs-1); color: var(--fy-muted); }

/* ---------------------------------------------------------------- chart -- */
.fy-chart-card { background: var(--fy-surface); border: 1px solid var(--fy-border); border-radius: var(--fy-radius-lg); box-shadow: var(--fy-shadow-2); overflow: hidden; }
.fy-chart-card .hd { display: flex; align-items: center; gap: var(--fy-space-3); padding: var(--fy-space-3) var(--fy-space-4); border-bottom: 1px solid var(--fy-border); }
.fy-chart-card .hd .t { font-size: var(--fy-fs-4); font-weight: 700; color: var(--fy-ink); }
.fy-chart-card .hd .s { font-size: var(--fy-fs-2); color: var(--fy-muted); }
.fy-chart { padding: var(--fy-space-3) var(--fy-space-4) var(--fy-space-4); }

/* ------------------------------------------------------------ swatches --- */
.fy-swatch { border: 1px solid var(--fy-border); border-radius: var(--fy-radius-sm); overflow: hidden; }
.fy-swatch .chip { height: 54px; }
.fy-swatch .lbl { padding: 6px 8px; font-size: var(--fy-fs-1); color: var(--fy-muted); background: var(--fy-surface); }