/* ROOT BARU */
:root {
	
	/* =========================================================
	   PRIMARY
	   ========================================================= */
	--color-primary-vibrant : hsl(215.77deg 55.91% 36.47%);

	--color-primary-default : #1e457b;

	--color-primary-light: #396db9;

	--color-primary-surface-strong: hsl(215deg 20.77% 40.59%);

	--color-primary-strong: #1d3454;


	
	/* primary tint surfaces used for restrained brand emphasis */
	--color-primary-soft: #edf2f8;
	--color-primary-softer: #f6f8fb;

	/* =========================================================
	   RGB CHANNELS
	   ========================================================= */

	/* channels mirror ROOT BARU colors and are only for alpha composition */
	--rgb-primary-default: 35, 78, 139;
	--rgb-primary-light: 46, 91, 156;
	--rgb-primary-vibrant: 41, 83, 145;
	--rgb-primary-strong: 29, 52, 84;
	--rgb-shadow-neutral: 0, 0, 0;

	/* categorical channels used by relation / priority tables */
	--rgb-accent-purple: 142, 67, 237;
	--rgb-accent-success: 68, 164, 33;
	--rgb-accent-orange: 244, 119, 54;
	--rgb-accent-info: 47, 137, 207;
	--rgb-accent-indigo: 82, 88, 173;
	--rgb-accent-pink: 229, 144, 197;
	--rgb-accent-warning: 236, 178, 23;
	--rgb-neutral-muted: 143, 143, 143;
	
	/* =========================================================
	   TRANSLUCENT
	   ========================================================= */
	--color-tcWhite1: rgb(255 255 255 / 3%);
	--color-tcWhite2: rgb(255 255 255 / 7%);
	--color-tcWhite3: rgb(255 255 255 / 11%);
	--color-tcWhite4: rgb(255 255 255 / 16%);
	--color-tcWhite5: rgb(255 255 255 / 27%);
	--color-tcWhite6: rgb(255 255 255 / 48%);
	--color-tcWhite7: rgb(255 255 255 / 62%);
	--color-tcWhite8: rgb(255 255 255 / 72%);
	--color-tcWhite9: rgb(255 255 255 / 82%);
		
	
	--color-tcCyan1: rgba(var(--rgb-primary-default), 0.03);
	--color-tcCyan2: rgba(var(--rgb-primary-default), 0.07);
	--color-tcCyan3: rgba(var(--rgb-primary-default), 0.11);
	--color-tcCyan4: rgba(var(--rgb-primary-default), 0.16);
	--color-tcCyan5: rgba(var(--rgb-primary-default), 0.27);
	--color-tcCyan6: rgba(var(--rgb-primary-default), 0.48);
	--color-tcCyan7: rgba(var(--rgb-primary-default), 0.62);
	--color-tcCyan8: rgba(var(--rgb-primary-default), 0.72);
	--color-tcCyan9: rgba(var(--rgb-primary-default), 0.82);

	
	--color-tcBlack1: rgb(0 0 0 / 3%);
	--color-tcBlack2: rgb(0 0 0 / 7%);
	--color-tcBlack3: rgb(0 0 0 / 11%);
	--color-tcBlack4: rgb(0 0 0 / 16%);
	--color-tcBlack5: rgb(0 0 0 / 34%);
	--color-tcBlack6: rgb(0 0 0 / 48%);
	--color-tcBlack7: rgb(0 0 0 / 62%);
	--color-tcBlack8: rgb(0 0 0 / 72%);
	--color-tcBlack9: rgb(0 0 0 / 82%);

	/* =========================================================
	   NEUTRAL / GRAYSCALE
	   ========================================================= */
	--color-neutral-000: #ffffff;
	/* hampir putih */
	--color-neutral-025: #fefefe;
	--color-neutral-050: #fafafa;

	/* surface abu sangat lembut */
	--color-neutral-075: #f8f8f8;
	--color-neutral-100: #f6f6f6;
	--color-neutral-125: #f5f5f5;
	--color-neutral-150: #f3f3f3;

	/* background terluar screenshot */
	--color-neutral-200: #f0f0f0;

	/* separator / border */
	--color-neutral-250: #eeeeee;
	--color-neutral-300: #eaeaea;
	--color-neutral-350: #e4e4e4;
	--color-neutral-400: #dedede;

	/* disabled / placeholder / icon */
	--color-neutral-450: #c7c7c7;
	--color-neutral-500: #adadad;
	--color-neutral-550: #999999;
	--color-neutral-600: #8f8f8f;
	--color-neutral-650: #808080;
	--color-neutral-700: #707070;

	/* body text pada desain lama */
	--color-neutral-800: #404040;
	--color-neutral-825: #3e3e3e;

	/* heading / text kuat */
	--color-neutral-900: #161616;
	--color-neutral-950: #000000;








	/* =========================================================
	   TEXT
	   ========================================================= */

	/* versi desain terbaru */
	--color-text-primary: #000000;
	--color-text-secondary: #404040;
	--color-text-tertiary: #707070;
	--color-text-muted: #8f8f8f;
	--color-text-subtle: #adadad;
	--color-text-disabled: #c7c7c7;

	--color-text-inverse: #ffffff;

	/* heading/text pada tiga screenshot awal */
	--color-text-primary-soft: #3e3e3e;
	--color-text-secondary-soft: #6c6c6c;
	--color-text-muted-soft: #999999;

	/* =========================================================
	   BACKGROUND
	   ========================================================= */

	/* area di luar aplikasi/browser mockup */
	--color-background-canvas: #f0f0f0;

	/* background dashboard versi awal */
	--color-background-app-soft: #f6f6f6;

	/* dashboard versi baru */
	--color-background-app: #ffffff;

	/* background alternatif */
	--color-background-subtle: #fafafa;
	--color-background-muted: #f6f6f6;


	/* =========================================================
	   SURFACE
	   ========================================================= */

	--color-surface-primary: #ffffff;
	--color-surface-secondary: #fafafa;
	--color-surface-tertiary: #f6f6f6;

	/* row/table/interactive hover */
	--color-surface-hover: #fafafa;
	--color-surface-active: #f6f6f6;

	/* icon button seperti tombol gear */
	--color-surface-control: #fafafa;

	/* surface transparan yang muncul di atas gradient */
	--color-surface-glass: rgb(255 255 255 / 92%);
	--color-surface-glass-soft: rgb(255 255 255 / 78%);


	/* =========================================================
	   BORDER / DIVIDER
	   ========================================================= */

	--color-border-subtle: #f0f0f0;
	--color-border-default: #eaeaea;
	--color-border-strong: #dedede;

	--color-divider: #c6c6c654;

	/* border pada pill/button putih */
	--color-border-control: #e4e4e4;

	/* brand/status borders: softer than fills, stronger than dividers */
	--color-primary-border: #d6e0ec;
	--color-primary-border-strong: #c3cfde;
	--color-success-border: #cce3cf;
	--color-warning-border: #edd9a4;
	--color-danger-border: #efc8c2;
	--color-info-border: #cfdfef;
	--color-orange-border: #f1d3c2;
	--color-purple-border: #ddcef2;
	--color-pink-border: #efcddd;


	/* =========================================================
	   ICON
	   ========================================================= */

	--color-icon-primary: #404040;
	--color-icon-secondary: #707070;
	--color-icon-muted: #8f8f8f;
	--color-icon-disabled: #c7c7c7;
	--color-icon-inverse: #ffffff;


	/* =========================================================
	   GREEN / SUCCESS
	   ========================================================= */

	/* hijau kuat pada order progress versi baru */
	--color-success-strong: #44a421;

	/* hijau grafik / dashboard lama */
	--color-success-default: #5c8b5f;

	/* variasi hijau terang */
	--color-success-bright: #3e9618;

	/* text/icon success */
	--color-success-text: #539b37;

	/* chip seperti Virtual Address / Bookkeeping */
	--color-success-soft: #e4f3e6;

	/* success sangat lembut */
	--color-success-softer: #eff9f0;

	/* tint kartu hijau */
	--color-success-surface: #f3fff3;

	/* gradient kartu hijau bagian bawah */
	--color-success-surface-strong: #b2e5b0;


	/* =========================================================
	   WARNING / AMBER
	   ========================================================= */
	
	/* warning kuat / progress / status penting */
	
	--color-warning-strong: #ecb217;
	
	/* variasi warning lebih terang */
	--color-warning-bright: #ffc837;
	
	/* text/icon warning */
	--color-warning-text: #ae7f07;
	
	/* background badge / chip warning */
	--color-warning-soft: #fff3d6;
	
	/* warning sangat lembut */
	--color-warning-softer: #fff9eb;
	
	/* tint kartu warning */
	--color-warning-surface: #fffaf0;
	
	/* gradient kartu warning bagian bawah */
	--color-warning-surface-strong: #f6d98b;
	
	/* =========================================================
	   RED / ERROR / REQUIRED
	   ========================================================= */

	/* progress/error versi baru */
	--color-danger-strong: #d12821;

	/* orange-red pada dashboard lama */
	--color-danger-default: #ce4630;

	--color-danger-medium: #d76e5c;

	/* text error */
	--color-danger-text: #c43a32;

	/* background badge:
	   "Confirm Required Information" */
	--color-danger-soft: #feeeed;

	--color-danger-softer: #fff6f5;

	--color-danger-surface: #fff3f1;
	--color-danger-surface-strong: #f3b5ad;
	/* =========================================================
	   BLUE / INFORMATION
	   ========================================================= */

	--color-info-strong: #387ac4;
	--color-info-default: #2f89cf;
	--color-info-soft: #eaf5ff;

	/* background kartu State Filing biru */
	--color-info-surface: #f1f9ff;

	/* bagian bawah gradient kartu */
	--color-info-surface-strong: #d2efff;


	/* =========================================================
	   ORANGE
	   ========================================================= */

	/* Change Company Address */
	--color-orange-default: #f47736;
	--color-orange-soft: #fff1e8;
	--color-orange-text: #b65d2f;

	/* orange/red yang digunakan status lama */
	--color-orange-red: #d24a33;


	/* =========================================================
	   YELLOW / GOLD
	   ========================================================= */

	/* Change Company Name */
	--color-gold-default: #e2b158;
	--color-gold-soft: #fff8e9;


	/* =========================================================
	   PURPLE
	   ========================================================= */

	/* titik unread, hero dan decorative gradient */
	--color-purple-strong: #783cf9;
	--color-purple-default: #8e43ed;
	--color-purple-medium: #a850e8;
	--color-purple-light: #c488ed;
	--color-purple-soft: #ede0fe;
	--color-purple-softer: #fcf9ff;


	/* =========================================================
	   PINK
	   ========================================================= */

	--color-pink-strong: #e590c5;
	--color-pink-default: #eea1be;
	--color-pink-medium: #f7c5e2;
	--color-pink-soft: #ffe4f4;
	--color-pink-softer: #fdf6fa;
	--color-pink-text: #9f507a;

	/* bagian bawah kartu pink */
	--color-pink-surface-strong: #ffd2e4;


	/* =========================================================
	   PEACH / CORAL
	   ========================================================= */

	--color-peach-strong: #f9b7a6;
	--color-peach-default: #fac8ac;
	--color-peach-light: #ffd3ab;
	--color-peach-soft: #f8e0d5;
	--color-peach-softer: #fff4ef;


	/* =========================================================
	   LILAC
	   ========================================================= */

	--color-lilac-default: #ede0fe;
	--color-lilac-light: #f5efff;
	--color-lilac-soft: #fcf9ff;


	/* =========================================================
	   COMPONENT COLORS
	   ========================================================= */

	/* primary black CTA:
	   Entity Profile */
	--color-button-primary-bg: #000000;
	--color-button-primary-text: #ffffff;
	--color-button-primary-hover: #161616;

	/* secondary white buttons */
	--color-button-secondary-bg: #ffffff;
	--color-button-secondary-text: #000000;
	--color-button-secondary-border: #e4e4e4;

	/* tags / pills */
	--color-chip-neutral-bg: #ffffff;
	--color-chip-neutral-text: #707070;
	--color-chip-neutral-border: #e4e4e4;

	--color-chip-success-bg: #e4f3e6;
	--color-chip-success-text: #539b5a;

	--color-chip-danger-bg: #feeeed;
	--color-chip-danger-text: #c43a32;


	/* =========================================================
	   TABLES / LISTS
	   ========================================================= */

	--color-table-bg: #ffffff;
	--color-table-header-bg: #000000;
	--color-table-header-border:#40659a;
	--color-table-row-bg: #ffffff;
	--color-table-row-hover: #fafafa;

	--color-table-border: #eeeeee;
	
	--color-table-header-text: hsl(0deg 0% 100% / 87%);
	--color-table-body-text: #161616;


	/* =========================================================
	   PROGRESS
	   ========================================================= */

	--color-progress-track: #eeeeee;

	--color-progress-danger: #d12821;
	--color-progress-success: #44a421;
	--color-progress-info: #2f89cf;


	/* =========================================================
	   CHARTS
	   ========================================================= */

	--color-chart-positive: #5c8b5f;
	--color-chart-positive-fill: rgb(92 139 95 / 10%);

	--color-chart-negative: #ce4630;
	--color-chart-negative-fill: rgb(206 70 48 / 10%);


	/* =========================================================
	   SHADOW
	   ========================================================= */

	--color-shadow-subtle: rgb(0 0 0 / 3%);
	--color-shadow-default: rgb(0 0 0 / 6%);
	--color-shadow-medium: rgb(0 0 0 / 10%);

	--shadow-card:
		0 1px 2px rgb(0 0 0 / 4%),
		0 4px 14px rgb(0 0 0 / 2%);

	--shadow-floating:
		0 8px 30px rgb(0 0 0 / 8%);
	
	--shadow-floating-bold :
		8px 8px 14px rgb(0 0 0 / 11%);
	
	/* compact controls */
	--shadow-control-subtle:
		0 1px 2px rgb(0 0 0 / 4%);

	--shadow-control:
		0 2px 8px rgb(0 0 0 / 5%);

	/* cards / overlays */
	--shadow-card-medium:
		0 8px 24px rgb(0 0 0 / 7%);

	--shadow-elevated:
		0 18px 46px rgb(0 0 0 / 12%);

	--shadow-dialog:
		0 24px 58px rgb(0 0 0 / 14%);

	/* brand emphasis is kept subtle; general elevation stays neutral */
	--shadow-brand:
		0 12px 28px rgba(var(--rgb-primary-default), 0.12);

	--shadow-focus-primary:
		inset 0 -2px 0 var(--color-primary-default),
		0 0 0 3px rgba(var(--rgb-primary-default), 0.12);

	--shadow-focus-flash:
		0 0 0 4px rgba(var(--rgb-primary-default), 0.10),
		0 16px 34px rgba(var(--rgb-primary-default), 0.12);

	
	--text-shadow-default: 0 1px 2px rgb(0 0 0 / 18%);
	--outline-focus-primary: 2px solid rgba(var(--rgb-primary-default), 0.32);


	/* =========================================================
	   GRADIENT PRIMARY / STRUCTURAL
	   ========================================================= */

	--gradient-primary-brand:
		linear-gradient(
			105deg,
			var(--color-primary-default) 0%,
			var(--color-primary-light) 58%,
			var(--color-primary-vibrant) 100%
		);

	--gradient-primary-brand-hover:
		linear-gradient(
			105deg,
			var(--color-primary-light) 0%,
			var(--color-primary-default) 58%,
			var(--color-primary-strong) 100%
		);

	--gradient-primary-brand-active:
		linear-gradient(
			105deg,
			var(--color-primary-default) 0%,
			var(--color-primary-strong) 100%
		);

	--gradient-primary-emphasis:
		linear-gradient(
			135deg,
			var(--color-primary-light) 0%,
			var(--color-primary-default) 55%,
			var(--color-primary-strong) 100%
		);

	--gradient-primary-subtle:
		linear-gradient(
			135deg,
			var(--color-primary-softer) 0%,
			var(--color-primary-soft) 100%
		);

	--gradient-page-head-surface:
		linear-gradient(
			135deg,
			var(--color-primary-softer) 0%,
			var(--color-surface-primary) 54%,
			var(--color-peach-softer) 100%
		);
	
	--gradient-page-surface:
		radial-gradient(
			circle at 92% 0%,
			rgb(249 183 166 / 8%) 0%,
			rgb(249 183 166 / 0%) 32%
		),
		linear-gradient(
			180deg,
			var(--color-background-app) 0%,
			var(--color-background-subtle) 52%,
			var(--color-background-app-soft) 100%
		);


	/* =========================================================
	   GRADIENT HERO
	   ========================================================= */

	--gradient-header-soft:
		radial-gradient(
			circle at 82% 10%,
			rgb(249 187 167 / 95%) 0%,
			rgb(249 209 191 / 72%) 30%,
			rgb(249 209 191 / 0%) 62%
		),
		radial-gradient(
			circle at 55% 0%,
			rgb(243 224 214 / 92%) 0%,
			rgb(243 224 214 / 0%) 58%
		),
		linear-gradient(
			180deg,
			#f5f5f5 0%,
			#f8ece8 45%,
			#f6f6f6 100%
		);
	--gradient-login-hero:
        radial-gradient(circle at 16% 12%,rgba(255,255,255,.22),transparent 0 18%,transparent 19%),
        linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary-default) 58%,var(--color-primary-vibrant) 100%);

	/* =========================================================
	   GRADIENT HERO BARU
	   peach purple
	   ========================================================= */

	--gradient-hero:
		radial-gradient(
			ellipse at 20% 78%,
			#783cf9 0%,
			#a850e8 27%,
			rgb(168 80 232 / 0%) 57%
		),
		radial-gradient(
			ellipse at 92% 12%,
			#8e43ed 0%,
			#c488ed 34%,
			rgb(196 136 237 / 0%) 62%
		),
		linear-gradient(
			125deg,
			#ffd3ab 0%,
			#fac8ac 28%,
			#eea1be 56%,
			#c488ed 78%,
			#8e43ed 100%
		);


	/* =========================================================
	   GRADIENT MAILROOM BACKGROUND
	   ========================================================= */

	--gradient-mailroom:
		radial-gradient(
			ellipse at 48% 0%,
			rgb(247 197 226 / 88%) 0%,
			rgb(247 197 226 / 35%) 34%,
			rgb(247 197 226 / 0%) 68%
		),
		radial-gradient(
			ellipse at 100% 20%,
			rgb(237 223 254 / 90%) 0%,
			rgb(237 223 254 / 0%) 60%
		),
		linear-gradient(
			180deg,
			#ffffff 0%,
			#fef9ff 48%,
			#ffffff 100%
		);


	/* =========================================================
	   GRADIENT STATE FILING CARDS
	   ========================================================= */

	--gradient-card-blue:
		linear-gradient(
			145deg,
			#f1f9ff 0%,
			#f1f9ff 55%,
			#d2efff 100%
		);

	--gradient-card-lilac:
		linear-gradient(
			145deg,
			#fcf9ff 0%,
			#f5efff 50%,
			#ede0fe 100%
		);

	--gradient-card-pink:
		linear-gradient(
			145deg,
			#fdf6fa 0%,
			#ffe4f4 52%,
			#ffd2e4 100%
		);

	--gradient-card-green:
		linear-gradient(
			145deg,
			#f3fff3 0%,
			#f3fff3 52%,
			#b2e5b0 100%
		);


	/* =========================================================
	   GRADIENT CHART FILLS
	   ========================================================= */

	--gradient-chart-info:
		linear-gradient(
			180deg,
			#3b77c329 0%,
			rgb(92 139 95 / 0%) 100%
		);
	
	--gradient-chart-success:
		linear-gradient(
			180deg,
			rgb(92 139 95 / 16%) 0%,
			rgb(92 139 95 / 0%) 100%
		);

	--gradient-chart-warning:
		linear-gradient(
			180deg,
			rgb(206 70 48 / 16%) 0%,
			rgb(206 70 48 / 0%) 100%
		);


	/* =========================================================
	   OVERLAYS
	   ========================================================= */

	--color-overlay-white-95: rgb(255 255 255 / 95%);
	--color-overlay-white-85: rgb(255 255 255 / 85%);
	--color-overlay-white-70: rgb(255 255 255 / 70%);

	--color-overlay-black-03: rgb(0 0 0 / 3%);
	--color-overlay-black-05: rgb(0 0 0 / 5%);
	--color-overlay-black-08: rgb(0 0 0 / 8%);



/* ============================================================================================================================================= */
/* ============================================================================================================================================= */




	--space-tn: 6px;
	
	--space-xs: 8px;
	
	--space-sm: 12px;
	
	--space-md: 16px;
	
	--space-lg: 20px;
	
	--space-xl: 28px;
	
	--radius-sm: 4px;
	
	--radius-md: 8px;
	
	--radius-lg: 10px;
	
	--radius-xl: 14px;
	
	--radius-xxl: 24px;
	
	--radius-full: 999px;
	
	--grid-min-xs: clamp(140px,16vw,180px);
	
	--grid-min-sm: clamp(170px,20vw,230px);
	
	--grid-min-md: clamp(220px,24vw,300px);
	
	--grid-min-lg: clamp(320px,32vw,440px);
	
	--grid-min-xl: clamp(320px,36vw,480px);
	
	--fontsz-sm: 12px;
	
	--fontsz-md: 14px;
	
	--fontsz-lg: 15px;
	
	--fontsz-xl1: 18px;
	
	--fontsz-xl2: 24px;

	--fontsz-xl3: 32px;

	--fontsz-xl4: 38px;
	
	/* standardized explicit font-weight scale */
	--fontWeight-1: 500;
	
	--fontWeight-2: 600;
	
	--fontWeight-3: 700;
	
	--fontWeight-4: 750;
	
	--fontWeight-5: 900;
	
	--motion-fast: 160ms cubic-bezier(.22,.61,.36,1);
	
	--motion-medium: 240ms cubic-bezier(.22,.61,.36,1);
	
	--transition-ui: background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast),opacity var(--motion-fast),filter var(--motion-fast);
	
	--dialog-width: min(760px,calc(100dvw - 48px));
	
	--dialog-width-wide: min(1180px,calc(100dvw - 48px));
	
	--dialog-max-height: min(88dvh,840px);
	
	--dialog-body-pad: clamp(16px,2.2vw,24px);
	
	--topbar--primary-height: 74px;
	
	--topbar--secondary-height: 54px;
	
	--sidebar-width: 300px;
	
	--sidebar-width-mini: 92px;
	
	--sidebar-padding: 18px 14px 18px 18px;
	
	--sidebar-mini-padding: 14px 10px 14px 12px;
	
	--nav-icon-size: 34px;
	
	--nav-icon-mini-size: 34px;
	
	--nav-item-min-height: 58px;
	
	--nav-subitem-min-height: 46px;
	
	--nav-subitem-mini-height: 34px;
	
	--nav-subicon-mini-size: 28px;
	
	--layout-sidebar-open: var(--sidebar-width);
	
	--layout-sidebar-mini: var(--sidebar-width-mini);
	
	--layout-sidebar-current: var(--layout-sidebar-open);
	
	--layout-shell-gap: var(--space-sm);

	--layout-top-offset: calc(var(--topbar--secondary-height) + var(--layout-shell-gap));
}

/* ========================================================================== 
   Foundation / Reset / Utilities
   ========================================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-neutral-400);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-450);
}


div,
table,
input,
textarea{
	min-width:0;
	max-width:100%;
	box-sizing: border-box;
}
div::before,
div:after{
	box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Segoe UI Variable","Segoe UI",Arial,sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:var(--color-neutral-350);
	color: var(--color-text-primary);
}


img,
svg,
video {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
    
}

button,
input,
select,
textarea {
    font: inherit;
}

:focus {
    outline: none;
}

:focus-visible {
    outline: var(--outline-focus-primary);
    outline-offset: 2px;
}

.textarea,
textarea {
    min-height: 120px;
    resize: vertical;
}

button,
summary{
	user-select:none;
}

.footer {
    padding: 28px 0;
    text-align: center;
    font-size: var(--fontsz-sm);
    color: var(--color-text-secondary);
}

/* ========================================================================== 
   Topbar / Brand / Search / Utility
   ========================================================================== */

.container {
    margin: 0 auto;
    padding: 0 22px;
}

.topbar {
	
}

.topbar-primary {
	z-index: 100;
    position: relative;
    justify-content: space-between;
	gap:var(--space-sm);
	padding:6px var(--layout-shell-gap);
    height: var(--topbar--primary-height);
    border-bottom: 1px solid var(--color-tcWhite3);
    box-shadow: 0 -6px 12px var(--color-tcBlack4) inset;
    background-color:var(--color-primary-default);
}

.topbar-primary .brand-text{
	color: var(--color-tcWhite9);
}
.topbar-primary .brand-subtext {
    color: var(--color-tcWhite8);
}

.topbar-secondary {
	gap:var(--space-md);
    position: sticky;
    top: 0;
    z-index: 95;
	width:100%;
    min-height: var(--topbar--secondary-height);
    padding:6px var(--layout-shell-gap);
    border-top: 0;
    background-color:var(--color-primary-default);
    border-bottom: 1px solid var(--color-tcWhite4);
	box-shadow: 0 7px 7px var(--color-tcBlack4);
}

.topbar-primary,
.topbar-secondary{
    display: flex;
	flex-direction:row;
	flex-wrap:nowrap;
    align-items: center;
    min-width: 0;
	max-width:100%;
	max-height:100%;
}

.topbar-actions {
    margin-left: auto;
}


.brand {
	overflow:hidden;
	min-width:0;
	max-width:100%;
	max-height:100%;
    color: var(--color-primary-default);
}

.topbar-primary .brand {
    color: var(--color-text-inverse);
}


.brand-mark {
    position: relative;
    width: 50px;
    height: 50px;
    background-image: url("assets/logo_50x50.png");
    background-position: center;
    background-size: contain;
	background-repeat:no-repeat;
}

.brand-text {
    flex-direction: column;
    line-height: 1.1;
}
body.layout-mobile-compact .topbar-primary .brand-text{
	display:none;
}

.brand-text strong {
    font-size: 18px;
    font-weight: var(--fontWeight-5);
}


.brand-subtext {
    font-size: 9px;
    color: var(--color-primary-default);
    font-weight: var(--fontWeight-2);
    margin-top: 5px;
    line-height: 1.2;
}



.topbar-search-wrap {
    flex: 1;
    min-width: 260px;
    max-width: 740px;
}

.search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 15px;
    border-radius: var(--radius-full);
    background: var(--color-tcWhite9);
    border: 1px solid var(--color-tcWhite6);
    box-shadow: inset 0 1px 2px var(--color-tcBlack1);
    transition: var(--transition-ui);
}

.search::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-primary-default);
    border-radius: var(--radius-full);
    box-shadow: 6px 6px 0 -4px var(--color-primary-default);
    transform: rotate(45deg);
    flex: 0 0 auto;
}

.search:focus-within {
    border-color: var(--color-primary-default);
    box-shadow: 0 0 0 4px rgba(var(--rgb-primary-default),.14),0 8px 20px rgba(var(--rgb-shadow-neutral),.10);
}

.search input {
    width: 100%;
    padding: 0!important;
    border: 0!important;
    background: transparent!important;
    box-shadow: none!important;
    flex: 1;
    font-size: var(--fontsz-md);
    font-weight: var(--fontWeight-2);
    color: var(--color-text-primary-soft);
}

.search-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--radius-lg);
    background: var(--color-tcCyan3);
    border: 1px solid var(--color-tcCyan3);
    font-size: 11px;
    font-weight: var(--fontWeight-5);
    color: var(--color-primary-default);
}

.utility-label {
    font-size: 11px;
    font-weight: var(--fontWeight-5);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.topbar-toggle-btn{
    height: 40px;
    white-space: nowrap;
}

.topbar-toggle-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    font-size: var(--fontsz-md);
    line-height: 1;
}

.topbar-toggle-text {
    white-space: nowrap;
}

.topbar-divider {
    width: 1px;
    height: 34px;
    background: var(--color-divider);
    flex: 0 0 auto;
}

.topbar-notify {
    font-size: 16px;
    line-height: 1;
}





.topbar-cluster {
	position: relative;
	display: inline-block;
}

.topbar-cluster-trigger {
    display: none;
}

.topbar-cluster-trigger::-webkit-details-marker {
    display: none;
}

.topbar-cluster-body {
    display: flex;
    align-items: center;
    flex-direction: row;
	overflow:hidden;
}

body.layout-mobile .topbar-cluster-trigger {
	display: block;
}

body.layout-mobile-compact .topbar-cluster-trigger .topbar-toggle-text{
	display:none;
}

body.layout-mobile .topbar-cluster-body {
	position: absolute;
	z-index: 120;
	flex-direction: column;
	align-items: flex-start;
	top: calc(100% + var(--space-xs));
	right: 0;
	min-width: 220px;
	padding: var(--space-xs);
	border-radius: var(--radius-md);
	background:var(--color-primary-default);
	border:1px solid var(--color-tcWhite4);
	box-shadow: var(--shadow-floating-bold);
}





.dropdown.topbar-context {
    position: relative;
	width:100%;
	min-width:88px;
	max-width:620px;
}

.dropdown.topbar-context > .dropdown-summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    max-width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg,var(--color-neutral-000) 0%,var(--color-surface-tertiary) 100%);
    color: var(--color-text-primary-soft);
}

.topbar-context > .dropdown-summary:hover{
	outline: 2px solid var(--color-primary-vibrant);
}
.topbar-context[open] > .dropdown-summary {
    outline: 2px solid var(--color-primary-light);
}

.topbar-context > .dropdown-summary.needs-attention{
	outline-width:3px;
	outline-style:dashed;
	outline-color:transparent;
	outline-offset:2px;
	animation: topbarContextAttention 2s 5 forwards;
}
.topbar-notes.is-notes-attention > .dropdown-summary{
	animation: dataFocusCellFlash .5s cubic-bezier(.16,1,.3,1) both;
}

.topbar-context-icon {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--color-primary-default);
}

.topbar-context-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
	overflow:hidden;
}

.topbar-context-kicker {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: var(--fontWeight-5);
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}
body.layout-mobile-compact .topbar-context-kicker{
	display:none;	
}

.topbar-context-info,
.topbar-context-info .topbar-meta-context,
.topbar-context-info .context-pill {
    min-width: 0;
    max-width: 100%;
}

.topbar-context-info {
    flex: 1 1 auto;
    overflow: hidden;
}

.topbar-context-info .topbar-meta-context {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.topbar-context-info .context-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.topbar-context-info .context-pill-label {
    flex: 0 0 auto;
}

.topbar-context-info .context-pill-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-context-info .topbar-meta-context.sm .context-pill-label {
    font-size: 9px;
}

.topbar-context-info .topbar-meta-context.sm .context-pill-value {
    font-size: 11px;
}

.topbar-context > .dropdown-summary .dropdown-caret {
    flex: 0 0 auto;
    font-size: 19px;
    color: var(--color-info-strong);
}

.topbar-context-menu.dropdown-menu {
    width: min(780px,calc(100vw - 44px));
    max-height: min(72vh,calc(100dvh - var(--layout-top-offset) - 24px));
    padding: 0;
    overflow: auto;
}
body.layout-mobile-compact .topbar-context-menu.dropdown-menu{
	position:fixed;
	left:var(--layout-shell-gap);
	top: calc( var(--topbar--secondary-height) + var(--topbar--primary-height) );
	width:calc(100vw - var(--layout-shell-gap)*2);
}

.topbar-context-menu .workspace-context-shell {
    gap: 0;
    border: 0;
    border-radius: 0;
    background: var(--color-primary-soft);
    box-shadow: none;
}

.topbar-context-menu .workspace-context-shell .page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 14px;
}

.topbar-context-menu .workspace-context-shell .page-title {
    font-size: 20px;
}

.topbar-context-menu .workspace-context-shell .page-subtitle {
    font-size: var(--fontsz-sm);
    line-height: 1.55;
}

.topbar-context-menu .context-body {
    padding: 16px 18px 18px;
}

.dropdown.topbar-notes {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
}

.dropdown.topbar-notes > .dropdown-summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 11px;
    border: 1px solid rgba(var(--rgb-primary-default),.18);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg,var(--color-neutral-000) 0%,var(--color-surface-tertiary) 100%);
    color: var(--color-text-primary-soft);
    box-shadow: var(--shadow-control);
}
body.layout-mobile-compact .dropdown.topbar-notes > .dropdown-summary{
	gap:0;
}

.dropdown.topbar-notes.has-notes > .dropdown-summary {
    background: var(--color-danger-surface);
}


.topbar-notes-icon {
    font-size: 20px;
    color: var(--color-primary-default);
}

.topbar-notes.has-notes .topbar-notes-icon {
    color: var(--color-danger-text);
}

.topbar-notes-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.topbar-notes-kicker {
    font-size: 10px;
    font-weight: var(--fontWeight-5);
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}
body.layout-mobile-compact .topbar-notes-kicker{
	display:none;
}

.topbar-notes-info {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: var(--fontWeight-3);
    color: var(--color-text-primary);
}
body.layout-mobile-compact .topbar-notes-info{
	display:none;
}

.topbar-notes > .dropdown-summary .dropdown-caret {
    font-size: 18px;
    color: var(--color-info-strong);
}

.topbar-notes-menu.dropdown-menu {
    min-width: min(430px, calc(100vw - 44px));
    max-height: min(68vh,calc(100dvh - var(--layout-top-offset) - 24px));
    padding: 0;
    overflow: auto;
}

.topbar-notes-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--color-border-subtle);
    background: linear-gradient(180deg,var(--color-surface-primary) 0%,var(--color-primary-softer) 100%);
}

.topbar-notes-title {
    font-size: 15px;
    font-weight: var(--fontWeight-4);
    color: var(--color-text-primary-soft);
}

.topbar-notes-subtitle {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-secondary-soft);
}

.topbar-notes-list {
    padding: 12px;
}

.topbar-note-item {
	display:block;
    padding: 10px 11px;
    border: 1px solid var(--color-border-subtle);
    border-left: 4px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-000);
	margin-bottom:8px;
}

.topbar-note-item.warning {
    border-left-color: var(--color-warning-strong);
	background:var(--color-warning-surface);
}

.topbar-note-item.danger {
    border-left-color: var(--color-danger-strong);
	background:var(--color-danger-surface);
}

.topbar-note-item.success {
    border-left-color: var(--color-success-strong);
	background:var(--color-success-surface);
}

.topbar-note-title {
    font-size: 13px;
    font-weight: var(--fontWeight-4);
    line-height: 1.35;
    color: var(--color-text-primary);
}

.topbar-note-text,
.topbar-note-action {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.topbar-note-action {
    color: var(--color-text-secondary);
}




/* ========================================================================== 
   App Layout / Rails / Pages
   ========================================================================== */
.app-shell {
    min-height: 100vh;
    isolation: isolate;
}

.app-main {
    width: 100%;
    max-width: none!important;
    padding: var(--layout-shell-gap);
}

.shell {
   /*  transition: grid-template-columns .22s ease,gap .22s ease; */
	transition: grid-template-columns 550ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
    display: grid;
    grid-template-columns: var(--layout-sidebar-current) minmax(0,1fr);
    gap: var(--layout-shell-gap);
    align-items: start;
}

.main,
.main.main-shell {
    min-width: 0;
    width: 100%;
    display: grid;
    gap: var(--space-lg);
}

.sidebar{
    position: sticky;
    align-self: start;
    min-width: 0;
    top: calc(var(--layout-top-offset) + var(--layout-shell-gap));
    height: calc(100dvh - var(--layout-top-offset) - (var(--layout-shell-gap) * 2));
}

.sidebar-panel {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: var(--sidebar-padding);
    border-radius: var(--radius-xl);
    color: var(--color-primary-strong);
	background: var(--color-neutral-150);
	border:1px solid var(--color-border-default);
}

.sidebar-head {
    border-bottom: 1px solid var(--color-tcCyan3);
    padding: 16px;
    margin-bottom: 14px;
}

.sidebar-kicker {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: var(--fontWeight-5);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-primary-default);
}

.sidebar-title {
    margin: 0;
    font-weight: var(--fontWeight-5);
    line-height: 1.1;
    font-size: var(--fontsz-xl2);
    color: var(--color-primary-vibrant);
}

.sidebar-desc {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--color-text-secondary);
}

.sidebar-foot-card {
    padding: var(--space-sm);
    font-size:var(--fontsz-md);
    font-style:italic;
    color:var(--color-text-secondary-soft);
}

.sidebar-foot-card .foot-label {
    color: var(--color-primary-default);
}

.sidebar-foot-card .foot-value {
    color: var(--color-text-secondary);
}

body.layout-sidebar-mini {
    --layout-sidebar-current: var(--layout-sidebar-mini);
}

.nav {
    display: grid;
    gap: var(--space-md);
}

.nav-divider {
    margin: 15px 0;
    display: block;
    width: 100%;
    height: 1px;
    background: var(--color-tcCyan3);
}

.nav-section {
    padding: var(--space-xs);
    margin-top: 0;
    border-radius: var(--radius-lg);
}

.nav-section-label {
    font-weight: var(--fontWeight-5);
    text-transform: uppercase;
    padding: 0 4px 10px;
    color: var(--color-text-tertiary);
	color:var(--color-text-tertiary);
    font-size: 10px;
}
.nav-link{
    --nav-icon-bg: var(--color-neutral-000);
    --nav-icon-fg: var(--color-primary-light);
    --nav-icon-border: var(--color-tcBlack2);
    --nav-icon-shadow: none;
}
.nav-link {
    position: relative;
    display: grid;
    grid-template-columns: var(--nav-icon-size) minmax(0,1fr) auto;
    align-items: flex-start;
    column-gap: 12px;
    max-width: 100%;
    min-width: 0;
    min-height: var(--nav-item-min-height);
    padding: 13px 14px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border: 1px solid transparent;
    color: var(--color-primary-default);
    font-weight: var(--fontWeight-4);
    font-size: var(--fontsz-md);
    text-decoration: none;
    transition: var(--transition-ui);
    -webkit-tap-highlight-color: transparent;
}

.nav-link > .icon {
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--nav-icon-bg);
    border: 1px solid var(--nav-icon-border);
    color: var(--nav-icon-fg);
    box-shadow: var(--nav-icon-shadow);
    font-size: 13px;
    font-weight: var(--fontWeight-5);
    flex: 0 0 auto;
}

.nav-link:hover {
    box-shadow:2px 0 0 var(--color-tcBlack4) inset;
}

.nav-link:active {
    transform: translateY(1px);
}

.nav-link.active,
.nav-group.parent-active > .nav-parent {
    --nav-icon-bg: var(--color-primary-light);
	--nav-icon-bg: var(--gradient-primary-brand);
    --nav-icon-fg: var(--color-neutral-000);
    --nav-icon-border: var(--color-tcBlack1);
    --nav-icon-shadow: none;
}

.nav-link.active{
    background: var(--color-tcCyan3);
    border-color: var(--color-tcCyan3);
    box-shadow: inset 4px 0 0 var(--color-primary-default),0 10px 24px var(--color-tcCyan1);
    transform: none;
}



.nav-group.parent-active > .nav-parent  .nav-desc,
.nav-link.active .nav-desc{
    color: var(--color-text-primary-soft);
}

.nav-group {
    display: grid;
    border-radius: var(--radius-lg);
}

.nav-parent {
    margin: 0;
    cursor: pointer;
}


.nav-group.is-open > .nav-parent {
    background: rgb(255 255 255 / 68%);
    border-color: var(--color-border-subtle);
}

.nav-submenu {
    display: grid;
    gap: 6px;
    max-height: 0;
    max-width: calc(100% - 18px);
    width: auto;
    overflow: hidden;
    opacity: 0;
    margin: 0 0 0 18px;
    padding: 0 0 0 10px;
    border-left: 1px solid transparent;
    transition:
        max-height .22s ease,
        opacity .18s ease,
        padding .18s ease,
        margin .18s ease,
        border-color .18s ease;
}

.nav-group.open > .nav-submenu,
.nav-group.is-open > .nav-submenu,
body .sidebar .nav-group.open > .nav-submenu,
body .sidebar .nav-group.is-open > .nav-submenu {
    max-height: 1200px;
    opacity: 1;
    margin-top: 6px;
    margin-bottom: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-left-color: var(--color-tcCyan3);
}

.nav-section .nav-link + .nav-link {
    margin-top: 6px;
}

.nav-subitem {
    grid-template-columns: 28px minmax(0,1fr);
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: var(--nav-subitem-min-height);
    padding: 10px 12px;
    
    background: var(--color-tcWhite5);
    border-color: var(--color-tcBlack1);
    overflow: hidden;
}

.nav-subitem:hover {

}

.nav-group.parent-active > .nav-parent,
.nav-subitem.active{
    background: var(--color-surface-primary);
    box-shadow: inset 2px 0 0 var(--color-primary-light);
}

.nav-subitem > .icon {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.nav-subitem .nav-label {
    font-size: 12px;
}

.nav-subitem .nav-desc {
    font-size: 10px;
}

.nav-copy {
    display: grid;
    gap: 3px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.nav-label {
    display: block;
    max-width: 100%;
    min-width: 0;
    font-size: 13px;
    font-weight: var(--fontWeight-5);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.nav-desc {
    display: block;
    max-width: 100%;
    min-width: 0;
	max-height:31px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.nav-caret {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-left: auto;
    color: var(--color-text-secondary);
    flex: 0 0 auto;
}

.nav-caret::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px,-1px);
    transition: transform .16s ease;
}

.nav-group.open > .nav-parent .nav-caret::before,
.nav-group.is-open > .nav-parent .nav-caret::before {
    transform: rotate(-135deg) translate(-1px,-1px);
}

body.layout-sidebar-mini .sidebar :is(
    .sidebar-head,
    .sidebar-foot,
    .nav-section-label,
    .nav-desc
) {
    display: none!important;
}

body.layout-sidebar-mini .sidebar .sidebar-panel {
    overflow: auto;
    overflow-x: hidden;
    padding: var(--sidebar-mini-padding);
}

body.layout-sidebar-mini .sidebar .nav-section {
    position: relative;
    padding: 8px 0;
    background: transparent;
    border-color: transparent;
}

body.layout-sidebar-mini .sidebar .nav-link {
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    justify-items: center;
    min-height: 54px;
    padding: 8px 6px;
    border-radius: var(--radius-md);
}
body.layout-sidebar-mini .sidebar .nav-link.active{
	border:none;
	box-shadow:none;
}
body.layout-sidebar-mini .sidebar .nav-link > .icon {
    width: var(--nav-icon-mini-size);
    height: var(--nav-icon-mini-size);
    margin: 0;
}

body.layout-sidebar-mini .sidebar .nav-group {
    position: relative;
	gap:var(--space-xs);
}

body.layout-sidebar-mini .sidebar .nav-submenu {
    position: static;
    display: grid!important;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: max-height var(--motion-medium), opacity var(--motion-fast), padding var(--motion-fast), margin var(--motion-fast), visibility var(--motion-fast);
}

body.layout-sidebar-mini .sidebar :is(
    .nav-copy,
    .nav-caret
) {
    display: none!important;
}


body.layout-sidebar-mini .sidebar .nav-group.open > .nav-submenu,
body.layout-sidebar-mini .sidebar .nav-group.is-open > .nav-submenu {
    max-height: 520px;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 3px 0 3px 8px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
	border-left:1px solid var(--color-tcCyan5);
}

body.layout-sidebar-mini .sidebar .nav-subitem {
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    justify-items: center;
    min-height: var(--nav-subitem-mini-height);
    padding: 4px 2px;
    border-radius: var(--radius-sm);
    background: transparent;
}

body.layout-sidebar-mini .sidebar .nav-subitem > .icon {
    width: var(--nav-subicon-mini-size);
    height: var(--nav-subicon-mini-size);
    font-size: 10px;
    border-radius: var(--radius-md);
}

body.layout-sidebar-mini .sidebar .nav-submenu .nav-copy {
    display: none!important;
}


body #btn_toggleMainSidebar{
    background: var(--color-surface-active);
    border-color: var(--color-border-control);
    color: var(--color-info-default);
}
body.layout-sidebar-mini #btn_toggleMainSidebar{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.08);
    color: var(--color-neutral-000);
}

.topbar .context-pill,
.topbar-secondary .context-pill {
    background: var(--color-peach-softer);
    border-color: var(--color-peach-light);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}

.topbar .context-pill-label,
.topbar-secondary .context-pill-label,
.topbar-meta-item .utility-label {
    color: var(--color-text-tertiary);
}

.topbar .context-pill-value,
.topbar-secondary .context-pill-value,
.topbar-meta-item,
.topbar-meta-context {
    color: var(--color-text-primary-soft);
}

.page {
    overflow: hidden;
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-control);
	border-radius:var(--radius-xl);
    transition: var(--transition-ui);
}

.page-context {
    display: grid;
    gap: var(--layout-shell-gap);
    background: var(--gradient-primary-subtle);
    border-color: rgba(var(--rgb-primary-default),.14);
    box-shadow: var(--shadow-card);
}

.page-workspace {
	background-color:var(--color-surface-tertiary);
    background-image:

    radial-gradient(
      circle 55vh at 100% 0%,
      #e3ebf7 calc(100% - 2px), /* f9b7a6 */
      transparent 100%
    ),

    radial-gradient(
      circle 57vh at 100% 0%,
      #0000005e 80%,
      transparent 100%
    ),

    radial-gradient(
      circle 72vh at 100% 0%,
      #aabbd6 calc(91% - 2px), /* 95bdff */
      transparent 91%
    );
}

.page-head {
    padding: 24px 28px 20px;
	background-color:var(--color-tcWhite8);
	backdrop-filter:blur(16px);
    border-bottom: 1px solid var(--color-tcWhite4);
}

.page-body {
    padding: 26px;
}

.page-copy {
    min-width: 0;
}

.page-eyebrow {
    font-size: 11px;
    font-weight: var(--fontWeight-5);
    text-transform: uppercase;
    color: var(--color-primary-default);
    margin-bottom: 10px;
}

.page-title {
    margin: 0;
    line-height: 1.15;
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
    font-size: var(--fontsz-xl3);
}

.page-subtitle {
    margin: 10px 0 0;
    color: var(--color-text-tertiary);
    font-size: var(--fontsz-md);
    line-height: 1.65;
    max-width: 900px;
}

.workspace-head {
    background-image: var(--gradient-chart-info);
}

.workspace-head-side {
    margin-left: auto;
	flex-shrink:0;
}

.workspace-body {
    padding: 26px 28px 30px;
}

.workspace-context-shell {
    border-radius: var(--radius-md);
}

.context-body {
    padding: 22px 28px 26px;
    background: var(--color-surface-glass);
}

/* ========================================================================== 
   Hero / Context / Summary
   ========================================================================== */
:where(
    .context-cockpit,
    .hero-banner,
    .page-hero,
    .toolbar,
    .visual-panel,
    .card
) {
    position: relative;
}

.context-cockpit {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--gradient-page-head-surface);
    border: 1px solid var(--color-border-default);
}

.context-cockpit .form {
    gap: 18px;
}

.context-cockpit .u-row {
    gap: 16px;
}

.context-cockpit .field {
    min-width: 180px;
}

.context-intro {
    display: grid;
	grid-template-columns: minmax(0,300px) minmax(0,300px);
    gap: var(--space-md);
}

.context-pill {
    padding: 4px 8px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-tertiary);
    box-shadow: none;
}

.context-pill-label {
    font-size: 11px;
    font-weight: var(--fontWeight-2);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.context-pill-value {
    font-size: 13px;
    font-weight: var(--fontWeight-3);
    color: var(--color-text-primary-soft);
}

.context-copy h3 {
    margin: 0;
    font-size: 26px;
    color: var(--color-text-primary);
}

.context-copy p {
    margin: 10px 0 0;
    font-size: var(--fontsz-md);
    line-height: 1.7;
    color: var(--color-text-tertiary);
    max-width: 760px;
}

.context-preview {
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-softer);
    color: var(--color-text-primary);
    border: 1px solid var(--color-primary-border);
    box-shadow: none;
}

.context-preview .label {
    font-size: 11px;
    font-weight: var(--fontWeight-5);
    text-transform: uppercase;
    color: var(--color-primary-default);
    margin-bottom: 8px;
}

.context-preview .value {
    font-size: 15px;
    font-weight: var(--fontWeight-5);
    line-height: 1.6;
    color: var(--color-text-primary);
}

.topbar-meta-context.sm .context-pill-label {
    font-size: 8px;
}

.topbar-meta-context.sm .context-pill-value {
    font-size: 10px;
}

.hero-banner {
    display: grid;
    grid-template-columns: minmax(0,1.42fr) minmax(min(100%,var(--grid-min-xl)),.92fr);
    gap: var(--space-lg);
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--gradient-primary-subtle);
	border: 1px solid var(--color-tcCyan3);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.hero-banner-copy,
.hero-banner-side {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
}

.hero-banner-kicker,
.login-kicker {
    display: inline-flex;
    width: max-content;
    padding: 8px 12px;
    border-radius: var(--radius-full);
    background: var(--color-tcCyan3);
    border: 1px solid var(--color-tcCyan3);
    font-size: 11px;
    font-weight: var(--fontWeight-5);
    text-transform: uppercase;
    color: var(--color-primary-default);
}

.hero-banner-title {
    margin: 0;
    font-size: 42px;
    line-height: 1.02;
	font-size: var(--fontsz-xl4);
    color: var(--color-text-primary);
}

.hero-banner-desc {
    margin: 0;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text-secondary);
}

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: var(--radius-md);
	background-color:var(--color-tcWhite8);
	backdrop-filter:blur(16px);
    border: 1px solid var(--color-tcBlack2);
}

.page-hero-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: start;
}

.page-hero-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.12;
    font-weight: var(--fontWeight-4);
    color: var(--color-text-primary);
}

.page-hero-desc {
    margin: 10px 0 0;
    font-size: var(--fontsz-sm);
    line-height: 1.68;
    color: var(--color-text-secondary);
    max-width: 820px;
    padding-bottom: 8px;
}

.page-hero-main {
    min-width: 0;
}

.page-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.btn.page-hero-action {
    min-height: 40px;
    padding-inline: 14px;
}

.page-hero-side {
    min-width: 240px;
}

.page-hero .status-card {
	background: var(--color-primary-default);
}

.page-hero .status-card .label{
	color:var(--color-tcWhite8);
}


.page-hero .status-control-card .value {
    font-size: var(--fontsz-sm);
    font-weight: var(--fontWeight-3);
}

.status-select {
    width: 100%;
    min-height: 42px;
    padding: 0 40px 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--rgb-primary-default), .22);
    background: var(--color-neutral-000);
    color: var(--color-text-primary);
    font: inherit;
    font-weight: var(--fontWeight-4);
    outline: none;
}

.status-select:focus {
    border-color: var(--color-primary-default);
    box-shadow: 0 0 0 3px rgba(49, 184, 232, .18);
}

.status-select:disabled {
    color: var(--color-text-tertiary);
    background: var(--color-surface-tertiary);
    cursor: not-allowed;
}

.copilot-orb {
    width: 132px;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    background: var(--gradient-primary-brand);
    box-shadow: 0 18px 34px rgba(var(--rgb-primary-default),.24);
}

/* ========================================================================== 
   Generic Components / Cards / Buttons / Forms
   ========================================================================== */
.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.u-truncate {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-hidden {
    display: none!important;
}

.u-flex {
    display: flex;
    min-width: 0;
}

.u-inline-flex {
    display: inline-flex;
    min-width: 0;
}

.u-flex-center {
    display: flex;
    align-items: center;
    min-width: 0;
}

.u-inline-flex-center {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.u-inline-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.u-flex-start {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.u-flex-end {
    display: flex;
    align-items: flex-end;
    min-width: 0;
}

.u-flex-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.u-flex-column-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.u-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.u-flex-start-between {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
}

.u-grid {
    display: grid;
    min-width: 0;
}

.u-place-center {
    display: grid;
    place-items: center;
}

.u-min-0 {
    min-width: 0;
}

.u-muted {
    color: var(--color-text-tertiary)!important;
}

.u-center {
    display: grid;
    place-items: center;
}

.u-right {
    margin-left: auto;
}

.u-grow {
    flex: 1;
}

.u-grow-2 {
    flex: 2;
}

.u-w-100 {
    width: 100%;
}

.u-wrap {
    flex-wrap: wrap;
}

.u-no-wrap {
    flex-wrap: nowrap;
}

.u-wrap-visible {
    flex-wrap: wrap!important;
    overflow-x: visible!important;
}

.u-scroll {
    overflow: auto;
}

.u-divider {
    border-top: 1px solid var(--color-border-default);
}

.u-stack {
    display: grid;
    gap: var(--space-md);
    min-width: 0;
}

.u-stack-sm {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.u-row {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    min-width: 0;
}
.u-align-center {
    align-items: center!important;
}

.u-gap-4 {
    gap: 4px;
}

.u-gap-5 {
    gap: 5px;
}

.u-gap-6 {
    gap: 6px;
}

.u-gap-7 {
    gap: 7px;
}

.u-gap-8 {
    gap: 8px;
}

.u-gap-10 {
    gap: 10px;
}

.u-gap-12 {
    gap: 12px;
}

.u-gap-14 {
    gap: 14px;
}

.u-gap-16 {
    gap: 16px;
}

.u-gap-18 {
    gap: 18px;
}

.u-mt-4 {
    margin-top: 4px;
}

.u-mt-6 {
    margin-top: 6px;
}

.u-mt-10 {
    margin-top: 10px;
}

.u-mb-8 {
    margin-bottom: 8px;
}

.u-mb-12 {
    margin-bottom: 12px;
}

.u-mb-14 {
    margin-bottom: 14px;
}

.u-mb-16 {
    margin-bottom: 16px;
}

.u-fw-700 {
    font-weight: var(--fontWeight-3);
}

.u-fw-500 {
    font-weight: var(--fontWeight-1);
}

.u-lh-145 {
    line-height: 1.45;
}

.u-lh-155 {
    line-height: 1.55;
}

.u-lh-160 {
    line-height: 1.6;
}

.u-text-left {
    text-align: left;
}

.u-text-center {
    text-align: center;
}

.u-text-right {
    text-align: right;
}

.u-justify-start {
    justify-content: flex-start;
}

.u-justify-center {
    justify-content: center;
}

.u-justify-end {
    justify-content: flex-end;
}

.u-minw-120 {
    min-width: 120px;
}

.u-minw-150 {
    min-width: 150px;
}

.u-minw-240 {
    min-width: min(240px, 100%);
}

.u-minw-260 {
    min-width: 260px;
}

.u-break {
    overflow-wrap: anywhere;
    word-break: normal;
}

.u-text-sm {
    font-size: var(--fontsz-sm);
}

.u-text-md {
    font-size: var(--fontsz-lg);
}

.u-text-lg {
    font-size: var(--fontsz-xl1);
}

.u-text-xl {
    font-size: var(--fontsz-xl2);
}

.u-soft {
    background: var(--color-surface-tertiary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

.u-card {
    background: var(--color-neutral-000);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-control);
}

.u-pad {
    padding: var(--space-lg);
}

.u-pad-sm {
    padding: var(--space-sm);
}

.u-pad-lg {
    padding: var(--space-xl);
}

.chip,
.u-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: var(--radius-full);
    font-size: var(--fontsz-sm);
    font-weight: var(--fontWeight-1);
    border: 1px solid var(--color-primary-border);
    background: var(--color-tcWhite9);
    color: var(--color-primary-default);
}


.u-badge.sm {
    padding: 5px 9px;
    font-size: 11px;
}

.u-badge.muted {
    background: var(--color-tcWhite9);
    border-color: var(--color-primary-border);
    color: var(--color-primary-surface-strong);
}

.u-badge.primary {
    background: var(--color-primary-softer);
    border-color: var(--color-primary-border);
    color: var(--color-primary-default);
}

.u-badge.success {
    background: var(--color-success-surface);
    border-color: var(--color-success-surface-strong);
    color: var(--color-success-strong);
}

.u-badge.warning {
    background: var(--color-warning-soft);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

.u-badge.danger {
    background: var(--color-danger-soft);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}

.u-badge.tone-blue {
    background: var(--color-info-soft);
    border-color: var(--color-info-border);
    color: var(--color-info-strong);
}

.u-badge.tone-purple {
    background: var(--color-purple-softer);
    border-color: var(--color-purple-border);
    color: var(--color-purple-strong);
}

.u-badge.tone-orange {
    background: var(--color-orange-soft);
    border-color: var(--color-orange-border);
    color: var(--color-orange-text);
}

.u-badge.tone-green {
    background: var(--color-success-softer);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

.u-badge.tone-pink {
    background: var(--color-pink-softer);
    border-color: var(--color-pink-border);
    color: var(--color-pink-text);
}

.u-badge.tone-cyan {
    background: var(--color-info-surface);
    border-color: var(--color-info-border);
    color: var(--color-info-strong);
}

.u-badge.tone-indigo {
    background: var(--color-primary-softer);
    border-color: var(--color-primary-border);
    color: var(--color-primary-vibrant);
}

.learn-more-link {
    max-width: 100%;
    font-size: inherit;
    font-weight: var(--fontWeight-2);
    text-decoration: underline;
    white-space: nowrap;
}

.learn-more-link:hover {
    color: var(--color-primary-strong);
}

.learn-more-link:focus-visible {
    outline: var(--outline-focus-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.score-badge-button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.score-badge-button:hover .u-badge,
.score-badge-button:focus-visible .u-badge {
    box-shadow: 0 0 0 2px rgba(var(--rgb-primary-default),.20);
    filter: brightness(.98);
}

.score-badge-button:focus-visible {
    outline: 2px solid var(--color-primary-default);
    outline-offset: 2px;
    border-radius: var(--radius-full);
}

.wrapper {
    width: 100%;
}

.wrapper > .label {
    margin: 0;
}

.meta-label,
.foot-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    font-weight: var(--fontWeight-5);
}

.meta-value {
    font-size: 13px;
    font-weight: var(--fontWeight-4);
    color: var(--color-text-primary-soft);
}

.foot-label {
    margin-bottom: 8px;
}

.foot-value {
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-tertiary);
    font-weight: var(--fontWeight-2);
}

.card {
    background: var(--color-surface-primary);
	border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
	overflow:hidden;
}

.card-header {
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:14px;
	background:var(--gradient-page-head-surface);
	border-bottom:1px solid var(--color-border-strong);
	padding:18px 22px;
}

.card-title {
    margin: 0;
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
    font-size: 17px;
}

.card-subtitle {
    display: block;
    margin-top: 4px;
    color: var(--color-text-tertiary);
    font-size: var(--fontsz-sm);
    font-weight: var(--fontWeight-1);
    line-height: 1.45;
}

.card-body {
    padding: 22px;
}
.card-body>div+div{
    margin-top: var(--space-lg);
}

.card-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--color-border-default);
    background: var(--color-surface-tertiary);
}

.info-card,
.status-card{
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--color-info-surface);
    border: 1px solid var(--color-info-surface-strong);
    box-shadow: 0 10px 24px rgba(var(--rgb-shadow-neutral),.07);
}

.info-card-label,
.status-card .label,
.context-chip .label {
    font-size: 11px;
    font-weight: var(--fontWeight-5);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: 8px;
}

.info-card-value,
.status-card .value {
    font-size: 18px;
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
}

.context-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    min-width: 122px;
	padding: 16px 18px;
	border-radius:var(--radius-sm);
	border-left:2px solid var(--color-chip-neutral-border);
	color:var(--color-chip-neutral-text);
	background:var(--color-chip-neutral-bg);
}

.context-chip .value {
    font-size: 13px;
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
}

.quick-grid,
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--grid-min-sm)),1fr));
    gap: var(--space-md);
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--grid-min-md)),1fr));
    gap: var(--space-md);
    align-items: stretch;
}

.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--grid-min-sm)),1fr));
    gap: var(--space-sm);
}

:where(
    .quick-grid,
    .stat-grid,
    .stat-strip,
    .grid-auto,
    .kv-grid,
    .visual-grid,
    .flow-grid,
    .chart-grid,
    .component-grid,
    .color-grid,
    .kanban,
    .organ-service-grid,
    .organ-info-grid,
    .organ-two-column
) {
    min-width: 0;
}

:where(
    .quick-grid,
    .stat-grid,
    .stat-strip,
    .grid-auto,
    .kv-grid,
    .visual-grid,
    .flow-grid,
    .chart-grid,
    .component-grid,
    .color-grid,
    .kanban,
    .organ-service-grid,
    .organ-info-grid,
    .organ-two-column
) > * {
    min-width: 0;
}

.stat-card {
    display: grid;
    gap: 8px;
    padding: 20px;
    border-radius: var(--radius-md);
    background: var(--color-chip-neutral-bg);
    border: 1px solid var(--color-chip-neutral-border);
    transition: var(--transition-ui);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px var(--color-tcBlack3);
}

.stat-card.primary {
    background: var(--color-info-surface);
    border-color: var(--color-info-surface-strong);
}

.stat-card.success {
    background: var(--color-success-surface);
    border-color: var(--color-success-surface-strong);
}

.stat-card.warning{
    background: var(--color-warning-surface);
    border-color: var(--color-warning-surface-strong);
}

.stat-card.danger {
    background: var(--color-danger-surface);
    border-color: var(--color-danger-surface-strong);
}

.stat-label {
    font-size: 11px;
    font-weight: var(--fontWeight-5);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: 12px;
}

.stat-value {
    font-size: 30px;
    font-weight: var(--fontWeight-5);
    line-height: 1;
    color: var(--color-text-primary);
}

.stat-note {
    margin-top: 10px;
    font-size: 13px;
    font-weight: var(--fontWeight-2);
    color: var(--color-text-tertiary);
    line-height: 1.55;
}

.summary-line {
    font-size: 14px;
    color: var(--color-text-primary-soft);
    line-height: 1.55;
}

.summary-line-label {
    color: var(--color-text-tertiary);
}

.summary-line-value {
    color: var(--color-text-primary);
}

.dropdown {
    position: relative;
    display: inline-block;
    min-width: 0;
}

.dropdown > .dropdown-summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dropdown > .dropdown-summary::-webkit-details-marker {
    display: none;
}

.dropdown[open] .dropdown-caret,
.dropdown.open .dropdown-caret {
    transform: rotate(180deg);
}

.dropdown-caret {
    font-size: var(--fontsz-sm);
    line-height: 1;
    transition: transform .16s ease;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 230px;
    padding: 8px;
    background: var(--color-surface-primary);
    backdrop-filter: blur(18px);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-floating-bold);
    z-index: 200;
    display: none;
    gap: 4px;
}

.dropdown.open .dropdown-menu,
.dropdown[open] > .dropdown-menu {
    display: grid;
    animation: dropdownIn 200ms ease;
}

.dropdown-menu-right {
    left: auto;
    right: 0;
}

.dropdown-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--color-divider);
}

.dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 11px 12px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-lg);
    text-align: left;
    text-decoration: none;
    font-size: var(--fontsz-md);
    color: var(--color-text-primary-soft);
    cursor: pointer;
}

.dropdown-item .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 20px;
}

.dropdown-item:hover {
    background: var(--color-surface-hover);
}

.dropdown-item.danger {
    color: var(--color-danger-text);
    font-weight: var(--fontWeight-4);
}

.dropdown-item.danger:hover {
    background: var(--color-danger-soft);
}

.dropdown.account-menu {
    flex: 0 0 auto;
}

.dropdown.account-menu > .dropdown-summary {
    min-height: 46px;
    max-width: min(360px,42vw);
    padding: 2px 10px 2px 6px;
    border-radius: var(--radius-full);
    border-style:solid;
    border-width:1px;
    border-color: rgba(var(--rgb-primary-default),.20);
    background: var(--color-surface-primary);
    color: var(--color-text-primary-soft);
    transition: var(--transition-ui);
}

.dropdown.account-menu > .dropdown-summary:hover,
.dropdown.account-menu[open] > .dropdown-summary {
    background: var(--color-surface-hover);
    border-color: var(--color-primary-border);
    box-shadow: 0 14px 28px rgba(var(--rgb-primary-default),.12);
}

.account-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    flex: 0 0 auto;
    color: var(--color-neutral-000);
    background: var(--gradient-primary-brand);
    box-shadow: 0 8px 18px rgba(var(--rgb-primary-default),.18);
    display: grid;
    place-items: center;
}

.account-avatar .material-symbols-outlined {
    font-size: 20px;
}

.account-menu-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    line-height: 1.1;
    text-align: left;
}
.layout-mobile-compact .topbar-primary .account-menu-copy{
	display:none;
}

.account-menu-copy strong,
.account-menu-copy small {
    display: block;
    max-width: 180px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-copy strong {
    font-size: 13px;
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
}

.account-menu-copy small {
    font-size: 11px;
    font-weight: var(--fontWeight-4);
    color: var(--color-primary-default);
}

.topbar-primary .account-menu-copy strong {
    color: var(--color-text-primary);
}

.topbar-primary .account-menu-copy small {
    color: var(--color-primary-default);
}

.dropdown.account-menu > .dropdown-summary .dropdown-caret {
    color: var(--color-primary-default);
    font-size: 20px;
    transition: transform var(--motion-fast);
}

.topbar-primary .dropdown.account-menu > .dropdown-summary .dropdown-caret {
    color: var(--color-primary-default);
}

.account-menu-panel {
    min-width: 292px;
    padding: 10px;
    border-radius: var(--radius-xl);
    border-color: rgba(var(--rgb-primary-light),.16);
    box-shadow: 0 20px 46px rgba(var(--rgb-shadow-neutral),.16);
}

.account-menu-profile {
    display: grid;
    gap: 5px;
    padding: 13px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(var(--rgb-primary-default),.14);
    background:
        radial-gradient(circle at 0% 0%,rgba(var(--rgb-primary-default),.12),transparent 42%),
        linear-gradient(180deg,var(--color-neutral-000),var(--color-surface-tertiary));
}

.account-menu-name {
    font-size: 14px;
    font-weight: var(--fontWeight-5);
    line-height: 1.25;
    color: var(--color-text-primary);
}

.account-menu-meta {
    font-size: 12px;
    font-weight: var(--fontWeight-4);
    color: var(--color-text-tertiary);
    overflow-wrap: anywhere;
}

.account-menu-role {
    justify-self: start;
    margin-top: 3px;
    padding: 5px 9px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-tcCyan3);
    background: var(--color-primary-softer);
    color: var(--color-primary-default);
    font-size: 11px;
    font-weight: var(--fontWeight-5);
}

.account-menu-panel .dropdown-item {
    min-height: 38px;
    font-weight: var(--fontWeight-4);
}

.account-menu-panel .dropdown-item .material-symbols-outlined {
    color: var(--color-primary-default);
    font-size: 20px;
}

.account-menu-panel .dropdown-item.danger .material-symbols-outlined {
    color: var(--color-danger-text);
}



	
.btn {
    appearance: none;
    border: 1px solid var(--color-button-secondary-border);
    background: var(--color-button-secondary-bg);
    color: var(--color-button-secondary-text);
    border-radius: var(--radius-full);
    padding: 0 14px;
    font-size: 13px;
    font-weight: var(--fontWeight-4);
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-ui);
    box-shadow: none;
    min-height: 34px;
}



.btn.sm {
    padding: 0 10px;
    font-size: var(--fontsz-sm);
    min-height: 28px;
}

.btn.lg {
    padding: 0 18px;
    font-size: var(--fontsz-md);
    min-height: 40px;
}

.btn.compact {
    min-width: 36px;
    padding: 0 10px;
}

.btn.icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    gap: 0;
}

.btn.tool {
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
}

.btn.tile {
    flex-direction: column;
    padding: 12px 10px;
    min-width: 92px;
    min-height: 92px;
    justify-content: center;
    text-align: center;
}

.btn.tab {
    height: 34px;
    padding: 0 14px;
}

.btn.ghost{
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--color-primary-default);
}
.btn.ghost.inverse{
	color:var(--color-tcWhite8);
}
.btn.ghost:hover,
.btn.ghost.active {
    background: var(--color-surface-hover);
    border-color: transparent;
    color: var(--color-primary-default);
    box-shadow: none;
}

.btn.primary.lg {
    min-height: 40px;
    padding: 0 20px;
}

.btn.primary,
.btn.tab.active{
    background: var(--color-primary-default);
    border-color: var(--color-tcBlack3);
    color: var(--color-neutral-000);
    box-shadow: var(--shadow-control);
}


.btn:focus-visible {
    outline: 2px solid var(--color-info-strong);
    outline-offset: 2px;
}

.btn.soft{
    background: var(--color-neutral-000);
    border-color: var(--color-info-strong);
    color: var(--color-info-default);
}



.btn.success {
    background: var(--color-success-strong);
    border-color: var(--color-tcBlack2);
    color: var(--color-neutral-000);
}

.btn.warning {
    background: var(--color-warning-strong);
    border-color:var(--color-tcBlack2);
    color: var(--color-neutral-000);
}

.btn.danger {
    background: var(--color-danger-strong);
    border-color:var(--color-tcBlack2);
    color: var(--color-neutral-000);
}



.btn.is-complete{
    background: var(--color-success-surface) !important;
    border-color: var(--color-success-surface-strong) !important;
    color: var(--color-success-strong) !important;
}

.btn.tiny {
    padding: 0 8px;
    font-weight: var(--fontWeight-2);
    white-space: break-spaces;
    word-wrap: break-word;
    font-size: 12px;
    min-height: 26px;
}

.btn.tiny:hover {
    transform: none;
}

.btn.tiny .material-symbols-outlined{
    font-size:12px;
}


.btn:not(.is-complete):hover{
    filter:brightness(1.1);
}

.btn:active {
    filter:brightness(.8);
}


.btn:is(
    :disabled,
    [disabled],
    [aria-disabled="true"],
    .is-disabled
),
.btn:is(
    .primary,
    .success,
    .warning,
    .danger,
    .soft,
    .ghost,
    .active
):is(
    :disabled,
    [disabled],
    [aria-disabled="true"],
    .is-disabled
) {
    background: var(--color-background-muted);
    border-color: var(--color-border-default);
    color: var(--color-text-muted);
    box-shadow: none;
    filter: none;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}


	
.toolbar {
    padding: 12px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, var(--color-surface-glass), var(--color-primary-softer)),
        var(--color-surface-primary);
    border: 1px solid rgba(var(--rgb-primary-default), .14);
    box-shadow: var(--shadow-card);
}

.toolbar > :not(.toolbar-actions):not(.toolbar-group):first-child {
    flex: 1 1 360px;
    min-width: min(100%,260px);
}

.toolbar-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    max-width: 100%;
    margin-left: auto;
}

.toolbar-actions > .btn,
.toolbar > .btn {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
}

.toolbar-group {
    flex: 1 1 220px;
    min-width: 190px;
    padding: 10px;
    border-radius: var(--radius-md);
    background: var(--color-surface-glass-soft);
    border: 1px solid rgba(var(--rgb-primary-default), .12);
    box-shadow: var(--shadow-control);
}

.toolbar-group-title {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(var(--rgb-primary-default), .1);
    font-weight: var(--fontWeight-3);
    text-transform: uppercase;
    text-align: center;
    font-size: 10px;
    letter-spacing: .04em;
    color: var(--color-primary-default);
}

.tool-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tool-inline-label {
    font-size: 11px;
    font-weight: var(--fontWeight-4);
    color: var(--color-text-tertiary);
}

.tool-icon {
    line-height: 1;
    font-size: 18px;
    min-width: 18px;
}

.tool-label {
    text-align: center;
    line-height: 1.25;
}

.form {
    display: grid;
    gap: 16px;
}

.renja-structure-entry-guide {
    margin: 0;
    color: var(--color-text-primary-soft);
    line-height: 1.5;
}

.renja-structure-entry-step {
    min-width: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-neutral-000);
    overflow: hidden;
}

.renja-structure-entry-step > summary {
    cursor: pointer;
    padding: 13px 16px;
    font-weight: 600;
    color: var(--color-primary-strong);
    background: var(--color-primary-softer);
}

.renja-structure-entry-step > summary:focus-visible {
    outline: 2px solid var(--color-primary-default);
    outline-offset: -3px;
}

.renja-structure-entry-step[open] > summary {
    border-bottom: 1px solid var(--color-border-default);
}

.renja-structure-entry-number {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin: 0 9px 0 4px;
    border-radius: 50%;
    color: var(--color-neutral-000);
    background: var(--color-primary-default);
    font-size: var(--fontsz-sm);
}

.renja-structure-entry-step-content {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.renja-structure-entry-note,
.renja-structure-entry-provenance {
    margin: 0;
    line-height: 1.5;
    color: var(--color-text-primary-soft);
}

.renja-structure-entry-provenance {
    padding: 10px 12px;
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-lg);
    background: var(--color-info-surface);
}

.field {
    display: grid;
    gap: 8px;
}

.field.inline {
    grid-template-columns: 180px 1fr;
    align-items: start;
}

.label {
    font-size: var(--fontsz-sm);
    font-weight: var(--fontWeight-5);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.hint {
    font-size: var(--fontsz-sm);
    color: var(--color-text-tertiary);
}

.error {
    font-size: var(--fontsz-sm);
    color: var(--color-danger-text);
    font-weight: var(--fontWeight-4);
}

.input,
.select,
.textarea,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
select,
textarea,
.form-static-value {
    width: 100%;
    min-height: 34px;
    padding: 7px 12px;
    font-size: var(--fontsz-md);
    color: var(--color-text-primary-soft);
    background: var(--color-neutral-000);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    transition: border-color .14s ease,box-shadow .14s ease,background .14s ease;
    box-shadow: none;
}
.textarea{
    min-height: 120px;
}

.input:hover,
.select:hover,
.textarea:hover,
input:hover,
select:hover,
textarea:hover {
    background: var(--color-neutral-000);
}

.checkrow {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox,
.radio {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary-default);
}

.input.sm,
.select.sm {
    min-height: 30px;
    padding: 5px 10px;
    font-size: var(--fontsz-sm);
}

.input-group {
    display: flex;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-neutral-000);
    box-shadow: none;
}

.input-group input {
    border: 0;
    border-radius: 0;
    flex: 1;
    background: transparent;
    box-shadow: none!important;
}

.input-group .addon {
    padding: 0 12px;
    display: grid;
    place-items: center;
    color: var(--color-text-tertiary);
    background: var(--color-surface-tertiary);
    border-right: 1px solid var(--color-border-default);
    font-weight: var(--fontWeight-4);
}

.input-group button.addon {
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    cursor: pointer;
    min-width: 46px;
    font: inherit;
}

.input-group button.addon:hover {
    color: var(--color-primary-default);
    background: var(--color-primary-softer);
}

.input-group button.addon:focus-visible {
    outline: 2px solid rgba(var(--rgb-primary-default),.38);
    outline-offset: -2px;
}

.input-group button.addon .material-symbols-outlined {
    font-size: 21px;
    line-height: 1;
}

.input-group:focus-within {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-focus-primary);
}

:is(
    .input,
    .select,
    .textarea,
	.input-group,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="password"],
    select,
    textarea
):is(
    :disabled,
    [disabled],
    [aria-disabled="true"],
    .is-disabled
) {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.5;
}


.form-static-value {
    background: var(--color-background-muted);
    border-color: var(--color-border-default);
	color:var(--color-text-muted);
    box-shadow: none;
}

.form-divider {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-border-subtle);
}

.form-actions {
    gap: var(--space-md);
    justify-content: flex-end;
}

/* ========================================================================== 
   Tables / Lists / Alerts / Data Builder
   ========================================================================== */
.table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-inline-size: 100%;
    max-height: min(72vh,760px);
    overflow:auto;
    overscroll-behavior: contain;
	border-radius:var(--radius-lg);
	border:1px solid var(--color-table-border);
	background-color:var(--color-table-bg);
	background-color:var(--color-primary-softer);
}

.table-searchbar {
    display: flex;
	flex-wrap:wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid rgba(var(--rgb-primary-default),.14);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg,var(--color-surface-primary) 0%,var(--color-primary-softer) 100%);
    box-shadow: var(--shadow-control);
}

.table-search-control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 420px;
    width:100%;
    padding: 7px 10px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-000);
    color: var(--color-text-primary-soft);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.table-search-control:focus-within {
    border-color: var(--color-primary-border-strong);
    box-shadow: 0 0 0 3px rgba(var(--rgb-primary-default),.12);
}

.table-search-icon {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--color-primary-default);
}

.table-search-input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text-primary-soft);
    font: inherit;
    font-size: var(--fontsz-sm);
}

.table-search-input::placeholder {
    color: var(--color-text-tertiary);
}

.table-search-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    max-width: 100%;
}

.table-search-status {
    color: var(--color-text-tertiary);
    font-size: var(--fontsz-sm);
    font-weight: var(--fontWeight-3);
    white-space: nowrap;
}

.table-search-nav[hidden],
.table-search-clear[hidden] {
    display: none;
}

.table-search-nav {
    min-width: 34px;
    min-height: 32px;
    padding-inline: 8px;
}

.table-search-nav:disabled {
    cursor: not-allowed;
    opacity: .48;
}


.table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: var(--fontsz-sm);
    table-layout: auto;
    width: 100%;
    min-width: var(--table-preferred-width, 100%);
    inline-size: 100%;
    max-width: none;
    box-shadow: var(--shadow-card);
    background:var(--color-neutral-000);
}

.table thead {
    position: sticky;
    top: 0;
    z-index: 2;
	background-color:var(--color-primary-default);
}
.table thead th {
    border-style:solid;
    border-width:0 1px;
	border-color: var(--color-table-header-border);
	color:var(--color-table-header-text);
	background-color:var(--color-primary-default);
    font-size: var(--fontsz-sm);
    text-transform: uppercase;
    font-weight: var(--fontWeight-3);
    padding: 10px 12px;
    min-width: 10px;
	text-align: left;
    vertical-align: middle;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-overflow: clip;
}

.table tbody td {
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: top;
    color: var(--color-text-primary-soft);
    background: var(--color-table-row-bg);
    padding: 8px 12px;
    font-size: var(--fontsz-sm);
    min-width: 10px;
	border-color:var(--color-tcCyan4);
	border-color:var(--color-table-border);
}
.table tbody td .table-cell-content{
    display: block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: pre-wrap;
}

.table-action-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
	overflow:hidden;
}
.table-action-wrap > .btn{
	flex-shrink:0;
}
td.u-text-left .table-action-wrap{
    justify-content:flex-start;
}
td.u-text-center .table-action-wrap{
    justify-content:center;
}
td.u-text-right .table-action-wrap{
    justify-content:flex-end;
}
div +.table-action-wrap {
    margin-top: 6px;
}



.table-action-cell > .table-action-wrap > .btn {
    white-space:normal;
    max-width: 120px;
    border-radius: var(--radius-xl);
}

.table-action-wrap > .btn:last-child {
    margin-bottom: 0;
}

.table th {

}

.table tbody tr:hover td {
    background: var(--color-surface-hover);
}

.table tbody tr.is-table-search-focused td {
    background: var(--color-primary-softer);
}

.table-search-mark {
    background: var(--color-warning-soft);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 -1px 0 rgba(168,112,0,.28);
    color: inherit;
    padding: 0 .08em;
}

.table-search-mark.is-current {
    background: rgb(var(--rgb-primary-default));
    box-shadow: 0 0 0 2px rgba(var(--rgb-primary-default),.18);
    color: var(--color-text-inverse);
}

.data-focus-target {
    scroll-margin: 104px;
}

.table tbody tr.is-focus-flash td {
    animation: dataFocusCellFlash .5s cubic-bezier(.16,1,.3,1) both;
}

.data-focus-target.is-focus-flash:not(tr) {
    animation: dataFocusBlockFlash .5s cubic-bezier(.16,1,.3,1) both;
    border-radius: var(--radius-sm);
}


.table-sort-trigger {
    cursor: pointer;
    user-select: none;
}

.table-sort-trigger:hover {
    color: var(--color-neutral-000);
}

.table-path-ellipsis {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-state-note {
    color: var(--color-text-tertiary);
    line-height: 1.55;
}

.alert,
.form-error{
	position:relative;
	border-width:2px;
	border-style:dashed;
    border-color: var(--color-info-surface-strong);
    background: var(--color-info-surface);
    padding: 14px 16px;
    border-radius: var(--radius-md);
	font-size:var(--fontsz-lg);
}

.alert:before{
	content:"";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
	float:left;
	margin-top:5px;
	margin-right:15px;
	background: var(--color-primary-vibrant);
}

.alert.success {
    background: var(--color-success-surface);
    border-color: var(--color-success-surface-strong);
}

.alert.success:before{
    background: var(--color-success-strong);
}

.alert.warning {
    background: var(--color-warning-soft);
    border-color: var(--color-warning-border);
}

.alert.warning:before{
    background: var(--color-warning-strong);
}

.alert.danger,
.form-error{
    background: var(--color-danger-soft);
    border-color: var(--color-danger-border);
}

.alert.danger:before{
    background: var(--color-danger-strong);
}


.form-error:not(.is-visible){
	display:none;
}

.list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-neutral-000);
}

div+.list{
    margin-top:var(--space-md);
}

.list li {
    padding: 13px 15px;
    border-bottom: 1px solid var(--color-border-default);
    display: flex;
    align-items: center;
    gap: 12px;
}

.list li:hover {
    background: var(--color-surface-hover);
}

.list li:last-child {
    border-bottom: 0;
}

.list.text {
    padding: 11px 0;
    border-color: var(--color-border-default);
}

.list.text > div {
    display: flex;
    flex-direction: row;
    gap: 9px;
    padding: 4px 13px;
}

[data-plug-busy="1"] {
    opacity: .72;
    cursor: wait!important;
}

[data-plug-busy-scope="1"] {
    position: relative;
    pointer-events: none!important;
    opacity: .76;
    user-select: none;
}

[data-plug-busy-scope="1"] * {
    cursor: wait!important;
}



.notes{
    padding: 15px 17px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-info-surface);
    font-size: var(--fontsz-sm);
}

.data-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 13px;
    box-shadow: var(--shadow-control);
    border-width: 1px;
    position: relative;
    overflow: hidden;
	font-size:var(--fontsz-sm);
	color:var(--color-tcBlack9);
}

.data-stat::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full);
    background: currentColor;
    box-shadow: 0 0 0 5px color-mix(in srgb,currentColor 12%,transparent);
    margin-right: 2px;
    flex: 0 0 auto;
}

.reddot{
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-danger-strong);
    box-shadow: 0 0 0 2px var(--color-neutral-000);
	font-size:11px;
	text-align:center;
	line-height:20px;
	color:var(--color-text-inverse);
}
.reddot:not(:empty){
    min-width: 20px;
    min-height: 20px;
}

.version-history-layout {
    align-items: stretch;
}

.version-history-sidebar {
    flex: 0 0 320px;
    max-height: 520px;
    overflow: auto;
}

.version-history-main {
    flex: 1 1 420px;
}

.version-history-card {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
    white-space: normal;
}

.version-history-spacer,
.version-history-section-title {
    margin-top: 12px;
}

.dialog-section-subtitle {
    margin-top: 4px;
}

.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--grid-min-sm)),1fr));
    gap: var(--space-sm);
}

.kv-item-label {
    margin-bottom: 6px;
}

.kv-item-value {
    font-weight: var(--fontWeight-4);
    white-space: pre-wrap;
    word-break: break-word;
}

.hierarchy-tree {
    display: grid;
    gap: 10px;
}

.hierarchy-chart {
    gap: 12px;
}

.hierarchy-item {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.hierarchy-node {
    display: grid;
    gap: 6px;
    min-width: 0;
    width: min(100%, 980px);
    padding: 10px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg,var(--color-neutral-000) 0%,var(--color-surface-tertiary) 100%);
    box-shadow: var(--shadow-control-subtle);
}

.hierarchy-node[data-level="0"] {
    border-color: var(--color-primary-border-strong);
    background: linear-gradient(135deg,var(--color-primary-softer) 0%,var(--color-neutral-000) 100%);
}

.hierarchy-node-title {
    min-width: 0;
    color: var(--color-text-primary);
    font-size: var(--fontsz-md);
    font-weight: var(--fontWeight-4);
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.hierarchy-node-meta {
    min-width: 0;
    color: var(--color-text-tertiary);
    font-size: var(--fontsz-sm);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.hierarchy-branch {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin-left: clamp(12px,2vw,24px);
    padding-left: clamp(10px,1.4vw,16px);
    border-left: 1px solid var(--color-primary-border);
}

.org-chart-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 18px 4px 8px;
}

.org-chart {
    --org-chart-line: var(--color-primary-strong);
    display: inline-block;
    min-width: 100%;
    padding: 8px 18px 18px;
    text-align: center;
}

.org-chart-level {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(18px,2.2vw,34px);
    min-width: max-content;
    margin: 0;
    padding: 32px 0 0;
    list-style: none;
}

.org-chart > .org-chart-level {
    padding-top: 0;
}

.org-chart-item {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 32px 8px 0;
}

.org-chart > .org-chart-level > .org-chart-item {
    padding-top: 0;
}

.org-chart-item::before,
.org-chart-item::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 32px;
    border-top: 2px solid var(--org-chart-line);
}

.org-chart-item::before {
    right: 50%;
    border-right: 2px solid var(--org-chart-line);
}

.org-chart-item::after {
    left: 50%;
    border-left: 2px solid var(--org-chart-line);
}

.org-chart > .org-chart-level > .org-chart-item::before,
.org-chart > .org-chart-level > .org-chart-item::after,
.org-chart-item:only-child::before,
.org-chart-item:only-child::after {
    display: none;
}

.org-chart-item:first-child::before,
.org-chart-item:last-child::after {
    border: 0;
}

.org-chart-item:first-child::after {
    border-radius: var(--radius-md) 0 0 0;
}

.org-chart-item:last-child::before {
    border-radius: 0 var(--radius-md) 0 0;
}

.org-chart-item > .org-chart-level::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 32px;
    border-left: 2px solid var(--org-chart-line);
    transform: translateX(-1px);
}

.org-chart-node {
    display: grid;
    place-items: center;
    width: clamp(150px,13vw,220px);
    min-height: 58px;
    padding: 9px 12px;
    border: 2px solid var(--color-primary-strong);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-000);
    color: var(--color-text-primary);
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.org-chart-node[data-level="0"] {
    width: clamp(210px,18vw,300px);
    min-height: 48px;
    border-width: 3px;
}

.org-chart-node-title {
    max-width: 100%;
    font-size: var(--fontsz-sm);
    font-weight: var(--fontWeight-5);
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.org-chart-node-meta {
    max-width: 100%;
    margin-top: 5px;
    color: var(--color-text-tertiary);
    font-size: var(--fontsz-sm);
    font-weight: var(--fontWeight-2);
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
}

.canvas-chart-card,
.canvas-chart-card .card-body {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.canvas-chart-card {
    overflow: hidden;
}

.canvas-chart-scroll {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable both-edges;
    padding: 16px 4px 8px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-neutral-000);
    contain: inline-size layout paint;
}

.hierarchy-row-top {
    gap: 8px;
}

.hierarchy-row-title {
    font-weight: var(--fontWeight-5);
}

.hierarchy-row-meta {
    margin-top: 6px;
}

.dialogbox-wide {
    width: var(--dialog-width-wide);
    max-width: calc(100dvw - 48px);
}

.dialog-title-lg {
    font-weight: var(--fontWeight-5);
    font-size: 18px;
    line-height: 1.3;
    color: var(--color-text-primary-soft);
}

.dialog-body-stack {
    display: grid;
	grid-auto-rows: max-content;
	align-content: start;
    gap: 10px;
}

.dialogbox-info-body {
	scrollbar-gutter: stable;
}

.dialogbox-info-body > .card {
	min-height: max-content;
}

/* ========================================================================== 
   Visual Panels / Charts / Flow
   ========================================================================== */
.visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--grid-min-xl)),1fr));
    gap: var(--space-md);
    align-items: stretch;
}

.visual-grid .visual-panel-wide {
    grid-column: 1/-1;
}

.visual-panel {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-neutral-000);
    box-shadow: var(--shadow-card);
}

.visual-panel-title {
    margin: 0;
    font-size: 16px;
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.visual-panel-subtitle {
    margin: 5px 0 0;
    color: var(--color-text-tertiary);
    font-size: 13px;
    line-height: 1.55;
}

.visual-health-layout {
    display: grid;
    grid-template-columns: minmax(150px,168px) minmax(0,1fr);
    gap: var(--space-lg);
    align-items: center;
}

.progress-ring,
.donut-chart {
    --value: 0;
    --ring-color: var(--color-primary-default);
    width: min(168px,100%);
    max-width: 168px;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    background: conic-gradient(var(--ring-color) calc(var(--value) * 1%),var(--color-surface-tertiary) 0),linear-gradient(180deg,var(--color-neutral-000),var(--color-primary-softer));
    box-shadow: inset 0 0 0 1px var(--color-border-subtle),var(--shadow-control-subtle);
    position: relative;
}

.progress-ring::after,
.donut-chart::after {
    content: "";
    position: absolute;
    inset: 15px;
    border-radius: inherit;
    background: var(--color-neutral-000);
    box-shadow: inset 0 0 0 1px var(--color-border-subtle);
}

.progress-ring-center {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px;
}

.progress-ring-value {
    font-size: 30px;
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
    line-height: 1.15;
}

.progress-ring-label {
    font-size: 12px;
    font-weight: var(--fontWeight-4);
    color: var(--color-text-tertiary);
    line-height: 1.35;
}

.progress-ring.success {
    --ring-color: var(--color-success-strong);
}

.progress-ring.warning {
    --ring-color: var(--color-warning-strong);
}

.progress-ring.danger {
    --ring-color: var(--color-danger-strong);
}

.progress-ring.is-clickable,
.mini-bar-row.is-clickable,
.chart-value-point.is-clickable,
.chart-value-label.is-clickable,
.chart-value-chip.is-clickable {
    cursor: pointer;
}

.progress-ring.is-clickable:hover,
.progress-ring.is-clickable:focus-visible {
    box-shadow: inset 0 0 0 1px var(--color-primary-border),0 0 0 4px rgba(var(--rgb-primary-default),.14),var(--shadow-control-subtle);
}

.progress-ring.is-clickable:focus-visible,
.mini-bar-row.is-clickable:focus-visible,
.chart-value-label.is-clickable:focus-visible,
.chart-value-chip.is-clickable:focus-visible {
    outline: 2px solid var(--color-primary-default);
    outline-offset: 3px;
}

.visual-legend-item.success .visual-legend-dot {
    background: var(--color-success-strong);
}

.visual-legend-item.warning .visual-legend-dot {
    background: var(--color-warning-strong);
}

.visual-legend-item.danger .visual-legend-dot {
    background: var(--color-danger-strong);
}

.visual-legend {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.visual-legend-item {
    display: grid;
    grid-template-columns: 12px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-neutral-000);
}

.visual-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-primary-default);
}

.visual-legend-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--color-text-primary-soft);
    font-weight: var(--fontWeight-4);
}

.visual-legend-value {
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
}

.mini-bar-chart {
    display: grid;
    gap: 11px;
    min-width: 0;
}

.mini-bar-row {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(88px,.72fr) minmax(52px,max-content);
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.mini-bar-row.is-clickable {
    border-radius: var(--radius-lg);
}

.mini-bar-row.is-clickable:hover {
    background: rgba(var(--rgb-primary-default),.05);
}

.mini-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-primary-soft);
    font-weight: var(--fontWeight-4);
    font-size: 13px;
}

.mini-bar-track {
    min-width: 0;
    height: 11px;
    border-radius: var(--radius-full);
    background: var(--color-surface-tertiary);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--color-border-subtle);
}

.mini-bar-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,var(--color-primary-default),var(--color-primary-strong));
}

.mini-bar-row.success .mini-bar-fill {
    background: linear-gradient(90deg,var(--color-success-strong),#35c99a);
}

.mini-bar-row.warning .mini-bar-fill {
    background: linear-gradient(90deg,var(--color-warning-strong),#f2ad45);
}

.mini-bar-row.danger .mini-bar-fill {
    background: linear-gradient(90deg,var(--color-danger-strong),#fb7185);
}

.mini-bar-value {
    min-width: 52px;
    text-align: right;
    color: var(--color-text-primary);
    font-weight: var(--fontWeight-5);
    font-size: 13px;
}

.flow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--grid-min-xs)),1fr));
    gap: var(--space-sm);
}

.flow-step {
    position: relative;
    display: grid;
    gap: 7px;
    min-height: 120px;
    padding: 15px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-neutral-000);
    overflow: hidden;
}

.flow-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--gradient-primary-brand);
}

.flow-step.success::before {
    background: var(--color-success-strong);
}

.flow-step.warning::before {
    background: var(--color-warning-strong);
}

.flow-step.danger::before {
    background: var(--color-danger-strong);
}

.flow-step-label {
    font-size: 12px;
    font-weight: var(--fontWeight-5);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
}

.flow-step-value {
    font-size: 26px;
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
    line-height: 1;
}

.flow-step-note {
    color: var(--color-text-tertiary);
    font-size: 12px;
    line-height: 1.45;
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--grid-min-lg)),1fr));
    gap: var(--space-md);
    align-items: start;
}

.chart-card {
    container-type: inline-size;
    padding: 18px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-000);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-control-subtle);
}

.chart-card-wide {
    grid-column: 1 / -1;
}

.chart-card-ranking .mini-bar-chart {
    grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
    column-gap: var(--space-lg);
    row-gap: 10px;
    align-items: start;
}

.chart-title {
    font-size: 15px;
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
    margin: 0 0 4px;
}

.chart-subtitle {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin: 0 0 16px;
}

.bar-chart {
    height: 220px;
    display: flex;
    align-items: end;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--color-surface-tertiary);
    border: 1px solid var(--color-border-subtle);
}

.bar-chart .bar {
    position: relative;
    flex: 1;
    min-width: 22px;
    height: var(--h,50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding: 9px 5px 8px;
    border-radius: var(--radius-full) var(--radius-full) var(--radius-lg) var(--radius-lg);
    background: var(--gradient-primary-brand);
    color: var(--color-neutral-000);
    text-align: center;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(var(--rgb-primary-default),.16);
}

.line-chart,
.area-chart {
    width: 100%;
    min-height: 250px;
    display: grid;
    grid-template-rows: minmax(164px,1fr) auto;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--color-surface-tertiary);
    border: 1px solid var(--color-border-subtle);
    overflow: hidden;
}

.chart-plot {
    position: relative;
    min-height: 164px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-000);
    overflow: hidden;
}

.line-chart svg,
.area-chart svg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.chart-value-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.chart-value-layer.has-clickable-values {
    pointer-events: auto;
}

.chart-value-point {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-primary-default);
    border: 2px solid var(--color-neutral-000);
    box-shadow: 0 0 0 3px rgba(var(--rgb-primary-default),.18);
    transform: translate(-50%,-50%);
}

.chart-value-point.is-clickable:hover,
.chart-value-point.is-clickable:focus-visible {
    box-shadow: 0 0 0 5px rgba(var(--rgb-primary-default),.22);
    outline: none;
}

.chart-value-label {
    position: absolute;
    max-width: 96px;
    padding: 4px 7px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-000);
    border: 1px solid var(--color-primary-border);
    box-shadow: var(--shadow-control-subtle);
    color: var(--color-text-primary);
    font-size: 11px;
    line-height: 1.15;
    font-weight: var(--fontWeight-5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translate(-50%,calc(-100% - 8px));
}

.chart-value-label.is-below {
    transform: translate(-50%,8px);
}

.chart-value-list {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,72px),1fr));
    gap: 6px;
    min-width: 0;
}

.chart-value-chip {
    min-width: 0;
    padding: 6px 7px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-neutral-000);
}

.chart-value-chip.is-clickable:hover,
.chart-value-chip.is-clickable:focus-visible {
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-control-subtle);
}

.chart-value-chip-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    color: var(--color-text-tertiary);
    font-size: 10px;
    line-height: 1.15;
    font-weight: var(--fontWeight-5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-value-chip-value {
    display: block;
    margin-top: 3px;
    color: var(--color-text-primary);
    font-size: 12px;
    line-height: 1.15;
    font-weight: var(--fontWeight-5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-stacked {
    display: grid;
    gap: 12px;
}

.stacked-track {
    display: flex;
    overflow: hidden;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-surface-tertiary);
    box-shadow: inset 0 0 0 1px var(--color-border-subtle);
}

.stacked-seg {
    width: var(--w);
    min-width: 0;
    display: grid;
    place-items: center;
    background: var(--color-primary-default);
    color: var(--color-neutral-000);
    font-size: 11px;
    font-weight: var(--fontWeight-5);
    line-height: 1;
}

.stacked-seg.success {
    background: var(--color-success-strong);
}

.stacked-seg.warning {
    background: var(--color-warning-strong);
}

.stacked-seg.danger {
    background: var(--color-danger-strong);
}

.sparkline {
    height: 50px;
    width: 100%;
}

.sparkline svg {
    width: 100%;
    height: 100%;
}

/* ========================================================================== 
   Extra UI Kit Components for ui.html Demo
   ========================================================================== */
.demo-banner {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 18px;
    align-items: center;
    margin: 22px;
    padding: 30px;
    border-radius: var(--radius-lg);
    background: var(--gradient-primary-brand);
    color: var(--color-neutral-000);
    box-shadow: 0 36px 76px rgba(12,26,51,.24);
    overflow: hidden;
    position: relative;
}

.demo-banner h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: clamp(36px,7vw,76px);
    line-height: .96;
    font-weight: var(--fontWeight-5);
}

.demo-banner p {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    max-width: 760px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,.86);
}

.demo-banner .copilot-orb {
    position: relative;
    z-index: 1;
    width: 170px;
}

.demo-section {
    display: grid;
    gap: 18px;
}

.demo-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
}

.demo-section-title {
    margin: 0;
    font-size: 26px;
    line-height: 1.1;
    color: var(--color-text-primary);
    font-weight: var(--fontWeight-5);
}

.demo-section-desc {
    margin: 8px 0 0;
    color: var(--color-text-tertiary);
    line-height: 1.65;
    max-width: 820px;
}

.component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--grid-min-md)),1fr));
    gap: var(--space-md);
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--grid-min-xs)),1fr));
    gap: var(--space-sm);
}

.color-swatch {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-xl);
    background: var(--color-neutral-000);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-control-subtle);
}

.swatch-chip {
    height: 72px;
    border-radius: var(--radius-xl);
    background: var(--swatch,var(--color-primary-default));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

.swatch-name {
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
}

.swatch-value {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px;
    border-radius: var(--radius-xl);
    background: rgba(234,244,255,.74);
    border: 1px solid var(--color-border-subtle);
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    background: var(--gradient-primary-brand);
    color: var(--color-neutral-000);
    font-weight: var(--fontWeight-5);
    border: 2px solid var(--color-neutral-000);
    box-shadow: var(--shadow-control-subtle);
}

.avatar-stack {
    display: flex;
}

.avatar-stack .avatar {
    margin-left: -10px;
}

.avatar-stack .avatar:first-child {
    margin-left: 0;
}

.timeline {
    display: grid;
    gap: 14px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
}

.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary-brand);
    box-shadow: 0 0 0 6px rgba(var(--rgb-primary-default),.12);
    margin-top: 4px;
}

.timeline-card {
    padding: 14px;
    border-radius: var(--radius-xl);
    background: var(--color-neutral-000);
    border: 1px solid var(--color-border-subtle);
}

.kanban {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
    gap: var(--space-sm);
}

.kanban-column {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-xl);
    background: rgba(244,248,255,.78);
    border: 1px solid var(--color-border-subtle);
}

.kanban-title {
    font-size: 12px;
    font-weight: var(--fontWeight-5);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.kanban-card {
    padding: 13px;
    border-radius: var(--radius-xl);
    background: var(--color-neutral-000);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-control-subtle);
}

.command-palette {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: var(--radius-xxl);
    background: var(--color-primary-strong);
    color: var(--color-neutral-000);
    box-shadow: var(--shadow-elevated);
}

.command-input {
    height: 48px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    padding: 0 14px;
    color: var(--color-neutral-000);
}

.command-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: var(--radius-xl);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
}

.empty-state {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 12px;
    padding: 38px;
    border: 1px dashed var(--color-primary-border-strong);
    border-radius: var(--radius-md);
    background: var(--gradient-primary-subtle);
}

.modal-demo {
    max-width: 520px;
    margin: auto;
    border-radius: var(--radius-xxl);
    background: var(--color-neutral-000);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-dialog);
    overflow: hidden;
}

.toast-demo {
    display: grid;
    gap: 12px;
}

.toast {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: var(--radius-xl);
    background: var(--color-neutral-000);
    border: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-card-medium);
}

.toast-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--color-tcCyan3);
    color: var(--color-primary-default);
    font-weight: var(--fontWeight-5);
}

.callout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: var(--radius-xl);
    background: var(--gradient-primary-subtle);
    border: 1px solid var(--color-primary-border);
}

.callout-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-xl);
    display: grid;
    place-items: center;
    background: var(--gradient-primary-brand);
    color: var(--color-neutral-000);
    font-weight: var(--fontWeight-5);
}

/* ========================================================================== 
   Login UI
   ========================================================================== */
.login-dialog .dialogbox-body{
    padding:0;
}

.login-shell {
    display: grid;
    grid-template-columns: minmax(min(100%,320px),1.05fr) minmax(min(100%,360px),.95fr);
    min-height: 560px;
    background: var(--color-neutral-000);
}

.login-shell-hero {
    position: relative;
    padding: 30px;
    background:var(--gradient-login-hero);
    color: var(--color-neutral-000);
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
}

.login-hero-overlay {
    position: absolute;
    inset: auto -18% -28% -16%;
    width: 136%;
    height: 46%;
    border-radius: 50% 50% 0 0 / 76% 76% 0 0;
    background: rgba(255,255,255,.16);
    filter: none;
}

.login-hero-head {
    position: relative;
    z-index: 1;
}

.login-hero-brandtext {
    line-height: 1.12;
}

.login-hero-brandtext small {
    margin-top: 5px;
    font-size: var(--fontsz-sm);
    color: rgba(255,255,255,.74);
    font-weight: var(--fontWeight-2);
}

.login-hero-brandtext strong {
    font-size: 22px;
    font-weight: var(--fontWeight-5);
}

.login-hero-copy {
    position: relative;
    z-index: 1;
    margin-top: auto;
}

.login-hero-copy p {
    margin: 14px 0 0;
    font-size: var(--fontsz-md);
    line-height: 1.7;
    color: rgba(255,255,255,.80);
    max-width: 520px;
}

.login-hero-copy h2 {
    margin: 0;
    font-size: 36px;
    line-height: 1.06;
    font-weight: var(--fontWeight-5);
    color: var(--color-neutral-000);
}

.login-shell-hero .login-kicker {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.18);
    color: var(--color-neutral-000);
}

.login-hero-points {
    position: relative;
    z-index: 1;
    margin-top: 8px;
}

.login-hero-point {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,.82);
}

.login-hero-point .dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-000);
    margin-top: 6px;
    flex: 0 0 auto;
}

.login-shell-form {
    padding: 36px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg,var(--color-neutral-000) 0%,var(--color-surface-tertiary) 100%);
}

.login-form-head {
    margin-bottom: 22px;
}

.login-form-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
}

.login-form-subtitle {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-tertiary);
}

.login-form {
    gap: 18px;
}

.login-actions {
    padding-top: 6px;
}

.login-actions .btn.primary {
    min-width: 190px;
    justify-content: center;
}

/* ========================================================================== 
   Animations / Responsive
   ========================================================================== */
@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes topbarContextAttention {
    0% {
		outline-color:transparent;
    }
   50% {
	   	outline-color:var(--color-warning-strong);
    }
    100% {
		outline-color:transparent;
    }
}

@keyframes dataFocusCellFlash {
    0% {
        background: var(--color-tcCyan3);
        box-shadow: inset 4px 0 0 var(--color-tcCyan6), inset 0 0 0 999px var(--color-tcCyan3);
    }

    55% {
        background: var(--color-tcCyan2);
        box-shadow: inset 4px 0 0 rgba(var(--rgb-primary-light),.28), inset 0 0 0 999px var(--color-tcCyan2);
    }

    100% {
        background: var(--color-neutral-000);
        box-shadow: inset 0 0 0 rgba(var(--rgb-primary-default),0), inset 0 0 0 999px rgba(var(--rgb-primary-default),0);
    }
}

@keyframes dataFocusBlockFlash {
    0% {
        background: var(--color-tcCyan3);
        box-shadow: var(--shadow-focus-flash);
    }

    55% {
        background: var(--color-tcCyan2);
        box-shadow: 0 0 0 3px rgba(var(--rgb-primary-light),.10), 0 10px 24px rgba(var(--rgb-primary-default),.10);
    }

    100% {
        background: transparent;
        box-shadow: 0 0 0 0 rgba(var(--rgb-primary-default),0), 0 0 0 0 rgba(var(--rgb-primary-default),0);
    }
}

@keyframes loadingBar {
    from {
        transform: translateX(-12%);
    }

    to {
        transform: translateX(118%);
    }
}


/* ==========================================================================
   Chart Tone Modifiers / Value Labels
   ========================================================================== */
.bar-chart .bar.primary {
    background: var(--color-primary-default);
}

.bar-chart .bar.success {
    background: var(--color-success-strong);
}

.bar-chart .bar.warning {
    background: var(--color-warning-strong);
}

.bar-chart .bar.danger {
    background: var(--color-danger-strong);
}

.bar-value {
    font-size: 11px;
    font-weight: var(--fontWeight-5);
    line-height: 1.05;
    text-shadow: var(--text-shadow-default);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-label {
    font-size: 10px;
    font-weight: var(--fontWeight-5);
    line-height: 1.05;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .94;
}

.stacked-summary {
    font-size: 12px;
    font-weight: var(--fontWeight-5);
    color: var(--color-text-primary);
}

.stacked-seg.primary {
    background: var(--color-primary-default);
}

.stacked-seg-label {
    padding: 0 5px;
    white-space: nowrap;
    text-shadow: var(--text-shadow-default);
}

.stacked-seg.is-small .stacked-seg-label {
    display: none;
}

.visual-legend-item.primary .visual-legend-dot {
    background: var(--color-primary-default);
}

/* ==========================================================================
   Operational Layout Stability / Cross Component Contracts
   ========================================================================== */

.idx-app-shell,
.pub-app-shell {
    background: var(--color-surface-tertiary);
}

.idx-copilot-orb,
.copilot-orb {
    background: var(--gradient-primary-brand);
}

.idx-copilot-orb {
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg,var(--color-neutral-000) 0%,var(--color-primary-softer) 100%);
}

.idx-copilot-orb strong {
    border-radius: var(--radius-md);
}

.btn:hover,
.stat-card:hover {
    transform: none;
}

.table tbody td > div:not(.table-action-wrap) {
    max-width: 100%;
    overflow-wrap: break-word;
}

.table tbody tr {
    contain: layout paint;
}

:where(
    .bar-chart,
    .line-chart,
    .area-chart
) {
    min-height: 190px;
}

@container (max-width: 430px) {
    .visual-health-layout {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: var(--space-sm);
    }

    .progress-ring,
    .donut-chart {
        width: min(150px,100%);
    }

    .mini-bar-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mini-bar-track {
        width: 100%;
    }

    .mini-bar-value {
        text-align: left;
    }

    .chart-value-list {
        grid-template-columns: repeat(auto-fit,minmax(min(100%,68px),1fr));
    }

    .chart-card-ranking .mini-bar-chart {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Shared Content Pages / Knowledge Base
   ========================================================================== */
.content-page {
    min-height: 100%;
    color: var(--color-text-primary-soft);
    background: var(--gradient-page-surface);
    line-height: 1.62;
}

.content-page a {
    color: var(--color-primary-strong);
}

.content-page a:hover {
    text-decoration: underline;
}

.skip-link {
    position: absolute;
    top: 10px;
    left: -999px;
    z-index: 9999;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-strong);
    color: var(--color-neutral-000);
    font-weight: var(--fontWeight-4);
}

.skip-link:focus {
    left: 10px;
}

.content-header {
    position: relative;
    min-height: 170px;
    padding: 28px clamp(18px,4vw,52px);
    color: var(--color-neutral-000);
    background:
        linear-gradient(135deg,rgba(53,179,230,.94) 0%,rgba(var(--rgb-primary-default),.96) 58%,rgba(var(--rgb-primary-strong),.92) 100%),
        radial-gradient(circle at 88% 8%,rgba(255,255,255,.32),transparent 18rem);
    border-bottom: 1px solid rgba(255,255,255,.24);
}

.content-header-inner {
    max-width: 1320px;
    margin: 0 auto;
}

.content-brand-mark {
    inline-size: 46px;
    block-size: 46px;
    flex: 0 0 auto;
    border-radius: var(--radius-xl);
    font-weight: var(--fontWeight-5);
    color: var(--color-neutral-000);
    background: var(--gradient-primary-brand);
    box-shadow: var(--shadow-card-medium);
}

.content-title {
    font-size: clamp(1.45rem,2vw,2rem);
    line-height: 1.1;
    font-weight: var(--fontWeight-5);
}

.content-subtitle,
.content-header p {
    color: var(--color-tcWhite9);
}

.content-header p {
    max-width: 880px;
    margin: 0;
}

.content-layout {
    width: min(1320px,calc(100% - 32px));
    margin: 16px auto 56px;
    display: grid;
    grid-template-columns: 292px minmax(0,1fr);
    gap: 22px;
    align-items: start;
}

.content-sidebar,
.content-panel,
.content-card,
.content-hero,
.toc-panel {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    background: var(--color-tcWhite9);
    box-shadow: var(--shadow-card);
}

.content-sidebar {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 16px;
    backdrop-filter: blur(18px);
}

.side-nav-title {
    margin: 0 0 10px;
    font-size: var(--fontsz-sm);
    letter-spacing: .08em;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    font-weight: var(--fontWeight-5);
}

.side-nav-list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.side-nav-list a {
    display: block;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary-soft);
    font-weight: var(--fontWeight-2);
}

.side-nav-list a:hover{
    background: linear-gradient(135deg,rgba(var(--rgb-primary-default),.10),rgba(var(--rgb-primary-light),.10));
    color: var(--color-primary-strong);
    text-decoration: none;
}

.content-main {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.content-hero {
    padding: clamp(24px,4vw,40px);
    background: var(--gradient-page-head-surface);
}

.content-eyebrow {
    margin: 0 0 8px;
    color: var(--color-primary-strong);
    font-weight: var(--fontWeight-5);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: var(--fontsz-sm);
}

.prose h1,
.prose h2,
.prose h3 {
    line-height: 1.18;
    letter-spacing: 0;
}

.prose h1 {
    margin: 0 0 12px;
    font-size: clamp(2rem,4vw,3.4rem);
}

.prose h2 {
    margin: 0 0 10px;
    font-size: clamp(1.32rem,2.2vw,1.8rem);
}

.prose h3 {
    margin: 0 0 8px;
    font-size: 1.08rem;
}

.prose p {
    margin: 0 0 12px;
}

.content-hero p,
.section-lead,
.content-meta {
    color: var(--color-text-tertiary);
}

.responsive-grid {
    display: grid;
    gap: 14px;
}

.responsive-grid.cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.responsive-grid.cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.responsive-grid.auto {
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
}

.workbench-grid {
    display: grid;
    grid-template-columns: minmax(220px,280px) minmax(0,1fr);
    gap: 14px;
    align-items: start;
}

.workbench-grid.is-collapsed {
    grid-template-columns: minmax(0,1fr);
}

.workbench-grid.is-collapsed > .workbench-rail {
    display: none;
}

.workbench-rail {
    position: sticky;
    top: calc(var(--layout-top-offset) + var(--layout-shell-gap));
    max-height: calc(100dvh - var(--layout-top-offset) - (var(--layout-shell-gap) * 2));
    overflow: auto;
    scrollbar-gutter: stable;
    align-self: start;
}

.workbench-main {
    min-width: 0;
    overflow: hidden;
}

.content-card {
    padding: 18px;
}

.topic-card {
    display: grid;
    gap: 10px;
}

.topic-card a.stretch {
    font-size: 1.05rem;
    font-weight: var(--fontWeight-5);
}

.toc-panel {
    padding: 16px 18px;
}

.toc-panel strong {
    display: block;
    margin-bottom: 8px;
}

.toc-panel ul {
    columns: 2;
    margin: 0;
    padding-left: 18px;
}

.content-panel {
    overflow: hidden;
}

.content-section {
    scroll-margin-top: 20px;
    padding: clamp(20px,3vw,30px);
}

.content-section :target,
.table tr:target {
    scroll-margin-top: 24px;
    outline: 2px solid rgba(var(--rgb-primary-default),.28);
    outline-offset: 2px;
    background: rgba(var(--rgb-primary-default),.06);
}

.content-section + .content-section {
    border-top: 1px solid var(--color-border-default);
}

.callout.warning {
    background: var(--color-warning-soft);
    border-color: rgba(180,95,6,.24);
}

.callout.success {
    background: var(--color-success-surface);
    border-color: rgba(16,124,65,.22);
}

.steps,
.checklist {
    margin: 0;
    padding-left: 22px;
}

.steps li,
.checklist li {
    margin: 8px 0;
}

.search-field {
    width: min(620px,100%);
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-000);
    color: var(--color-text-primary-soft);
    font: inherit;
}

.table.compact {
    min-width: 680px;
    font-size: var(--fontsz-sm);
}

.table.compact thead th,
.table.compact tbody td {
    padding: 11px 12px;
}

.prose code {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-softer);
    color: var(--color-primary-strong);
    font-family: Consolas,"Courier New",monospace;
}

.breadcrumb-line {
    color: var(--color-text-tertiary);
    font-size: var(--fontsz-sm);
}

.site-footer {
    color: var(--color-text-tertiary);
    text-align: center;
    padding: 22px;
}

/* ==========================================================================
   Shared Workspace Pages
   ========================================================================== */
body.admin-workspace,
body.report-workspace {
    background: var(--gradient-page-surface);
}

body.admin-workspace .app-main,
body.report-workspace .app-main {
    padding: 24px 0 48px;
}

body.admin-workspace .shell {
    gap: 22px;
}

body.admin-workspace .main-shell {
    gap: 20px;
    padding-right: 22px;
}

body.admin-workspace .sidebar,
body.admin-workspace .workbench-rail,
body.report-workspace .content-layout > aside {
    top: calc(var(--topbar--primary-height) + 24px);
}

body.admin-workspace .sidebar {
    height: calc(100dvh - var(--topbar--primary-height) - 48px);
}

body.admin-workspace .workbench-grid {
    grid-template-columns: minmax(208px,250px) minmax(0,1fr);
    gap: 18px;
}

body.admin-workspace .workbench-main {
    overflow: visible;
}

body.admin-workspace .workbench-rail.card,
body.admin-workspace .workbench-main.card,
body.report-workspace .content-layout > .card {
    border-color: rgba(var(--rgb-primary-light),.16);
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow-card);
}

body.admin-workspace .workbench-rail.card {
    padding: 16px;
}

body.admin-workspace .workbench-main.card,
body.report-workspace .content-layout > section.card {
    padding: 22px;
}

body.admin-workspace .table-wrap,
body.report-workspace .table-wrap {
    max-height: min(70vh,720px);
}

body.report-workspace .content-layout {
    width: min(1320px,calc(100% - 44px));
    margin-top: 24px;
    grid-template-columns: minmax(260px,330px) minmax(0,1fr);
    gap: 24px;
}

body.report-workspace .content-layout > aside {
    position: sticky;
    max-height: calc(100dvh - var(--topbar--primary-height) - 48px);
    overflow: auto;
}

body.report-workspace .content-layout > aside .page-title {
    font-size: 28px;
}

body.report-workspace .content-layout > section.card {
    min-width: 0;
}

/* ==========================================================================
   Shared Public Landing Pages
   ========================================================================== */
body.public-landing {
    min-height: 100vh;
    background: var(--color-neutral-000);
    color: var(--color-text-primary-soft);
    font-family: "Roboto","Segoe UI Variable","Segoe UI",Arial,sans-serif;
}

body.public-landing::before {
    display: none;
}

.public-landing .site-main {
    width: 100%;
    overflow: hidden;
}

.public-landing .container {
    width: min(100% - 88px,1320px);
    padding-left: 0;
    padding-right: 0;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid rgba(var(--rgb-shadow-neutral),.12);
    box-shadow: 0 8px 28px rgba(var(--rgb-shadow-neutral),.06);
    backdrop-filter: blur(14px);
}

.site-header-inner {
    min-height: 100px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
    color: var(--color-primary-default);
}

.site-brand-mark {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.site-brand-copy {
    display: grid;
    line-height: 1.05;
}

.site-brand-copy strong {
    font-size: 36px;
    font-weight: var(--fontWeight-5);
    letter-spacing: 0;
}

.site-brand-copy small {
    font-size: 17px;
    color: var(--color-primary-default);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px,3vw,42px);
    flex: 1;
    min-width: 0;
}

.site-nav-link {
    color: var(--color-text-primary-soft);
    font-size: 15px;
    font-weight: var(--fontWeight-4);
    white-space: nowrap;
    transition: color .18s ease;
}

.site-nav-link:hover{
    color: var(--color-primary-default);
}

.gradient-button,
.white-button,
.text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border-radius: var(--radius-full);
    font-weight: var(--fontWeight-4);
    line-height: 1.2;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space: nowrap;
}

.gradient-button {
    padding: 0 22px;
    color: var(--color-neutral-000);
    background: linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary-vibrant) 100%);
    box-shadow: 0 12px 28px rgba(var(--rgb-primary-default),.22);
}

.gradient-button:hover,
.white-button:hover,
.text-button:hover {
    transform: translateY(-1px);
}

.site-header-cta {
    margin-left: auto;
}

.white-button {
    min-height: 46px;
    padding: 0 22px;
    color: var(--color-neutral-000);
    border: 1px solid rgba(255,255,255,.82);
    background: rgba(255,255,255,.10);
    box-shadow: 0 12px 28px rgba(var(--rgb-primary-default),.12);
}

.white-button.is-muted {
    color: var(--color-primary-strong);
    border-color: rgba(39,81,168,.20);
    background: rgba(255,255,255,.88);
}

.text-button {
    min-height: auto;
    color: var(--color-primary-light);
    padding: 0;
}

.landing-hero {
    position: relative;
    min-height: 780px;
    isolation: isolate;
    overflow: hidden;
    background: var(--color-neutral-000);
}

.landing-hero::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -170px;
    top: -130px;
    width: min(76vw,980px);
    height: 920px;
    background:
        radial-gradient(circle at 18% 25%,rgba(255,255,255,.16),transparent 0 38px,transparent 39px),
        linear-gradient(135deg,var(--color-primary-default) 0%,var(--color-primary-light) 100%);
    border-radius: 0 0 56% 0 / 0 0 42% 0;
    transform: rotate(-3deg);
}

.landing-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 80px;
    top: -210px;
    width: 760px;
    height: 360px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-000);
    box-shadow: 0 710px 0 80px rgba(255,255,255,.92);
}

.landing-hero-inner {
    min-height: 720px;
    display: grid;
    grid-template-columns: minmax(0,0.88fr) minmax(420px,0.9fr);
    align-items: center;
    gap: clamp(36px,6vw,96px);
    padding-top: 44px;
    padding-bottom: 76px;
}

.landing-hero-copy {
    max-width: 620px;
    padding-left: clamp(0px,4vw,72px);
}

.section-kicker {
    display: inline-flex;
    color: var(--color-primary-light);
    font-size: 12px;
    font-weight: var(--fontWeight-5);
    text-transform: uppercase;
    line-height: 1.3;
}

.landing-hero-copy .section-kicker {
    color: var(--color-primary-strong);
}

.landing-hero-copy h1 {
    margin: 24px 0 0;
    max-width: 520px;
    color: var(--color-text-primary);
    font-size: clamp(42px,5.1vw,66px);
    line-height: 1.18;
    font-weight: var(--fontWeight-5);
}

.landing-hero-copy p {
    margin: 30px 0 0;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 2;
}

.landing-hero-actions {
    margin-top: 42px;
}

.summary-strip {
    margin-top: 28px;
}

.summary-pill {
    display: grid;
    gap: 2px;
    min-width: 118px;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: var(--radius-xl);
    background: rgba(255,255,255,.18);
    box-shadow: 0 14px 34px rgba(28,87,178,.10);
}

.summary-pill .label {
    color: rgba(27,46,95,.72);
    font-size: 11px;
    font-weight: var(--fontWeight-5);
    text-transform: uppercase;
}

.summary-pill .value {
    color: var(--color-text-primary);
    font-size: 22px;
    font-weight: var(--fontWeight-5);
}

.landing-hero-art {
    display: grid;
    place-items: center;
}

.landing-hero-art img {
    width: min(100%,620px);
    filter: none;
}

.landing-hero-actions .white-button:not(.is-muted) {
    border-color: transparent;
    background: linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary-vibrant) 100%);
    box-shadow: 0 14px 30px rgba(var(--rgb-primary-default),.24);
}

.section-block {
    padding: clamp(72px,8vw,118px) 0;
    background: var(--color-neutral-000);
}

.section-block.is-soft {
    background:
        radial-gradient(circle at 12% 0%,rgba(236,244,255,.74),transparent 32%),
        linear-gradient(180deg,var(--color-neutral-000) 0%,var(--color-surface-tertiary) 100%);
}

.section-heading {
    max-width: 900px;
    margin: 0 auto 44px;
    text-align: center;
}

.section-heading.align-left {
    margin-left: 0;
    text-align: left;
}

.section-heading-title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: clamp(28px,3vw,36px);
    line-height: 1.18;
    font-weight: var(--fontWeight-5);
}

.section-heading-accent {
    color: var(--color-primary-default);
}

.section-heading-line {
    display: block;
    width: 48px;
    height: 2px;
    margin: 22px auto 0;
    background: linear-gradient(90deg,var(--color-primary-light) 0 42%,transparent 42% 58%,var(--color-primary-light) 58% 100%);
}

.section-heading.align-left .section-heading-line {
    margin-left: 0;
}

.section-heading-desc,
.section-copy {
    color: var(--color-text-tertiary);
    font-size: 16px;
    line-height: 1.95;
}

.section-heading-desc {
    margin: 24px auto 0;
    max-width: 780px;
}

.section-heading.align-left .section-heading-desc {
    margin-left: 0;
}

.section-copy {
    margin: 0 0 20px;
}

.feature-split {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px,.72fr);
    align-items: center;
    gap: clamp(42px,7vw,96px);
}

.law-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
    margin-top: 28px;
}

.law-card,
.pricing-card,
.feature-tab-item,
.feature-tab-detail,
.filter-strip,
.public-landing .empty-state,
.feature-illustration {
    border: 1px solid var(--color-border-default);
    background: var(--color-neutral-000);
    box-shadow: var(--shadow-card);
}

.law-card {
    min-height: 116px;
    padding: 20px;
    border-radius: var(--radius-xl);
}

.law-card h3,
.pricing-card h3,
.feature-tab-detail h3,
.footer-widget h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 18px;
    line-height: 1.35;
    font-weight: var(--fontWeight-5);
}

.law-card p,
.pricing-card p,
.feature-tab-detail p,
.footer-widget p {
    margin: 12px 0 0;
    color: var(--color-text-tertiary);
    line-height: 1.75;
}

.feature-illustration {
    position: relative;
    min-height: 420px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 16px;
    padding: 42px;
    border-radius: var(--radius-xxl);
    overflow: hidden;
    text-align: center;
}

.feature-illustration::before {
    content: "";
    position: absolute;
    inset: 54px 28px auto auto;
    width: 220px;
    aspect-ratio: 1;
    border-radius: var(--radius-xxl);
    background: linear-gradient(135deg,rgba(var(--rgb-primary-default),.16),rgba(var(--rgb-primary-light),.18));
    transform: rotate(18deg);
}

.feature-illustration .material-symbols-outlined {
    position: relative;
    z-index: 1;
    color: var(--color-primary-default);
    font-size: 92px;
}

.feature-illustration strong,
.feature-illustration p {
    position: relative;
    z-index: 1;
}

.feature-tabs {
    display: grid;
    grid-template-columns: minmax(0,1.24fr) minmax(320px,.76fr);
    gap: 38px;
    align-items: center;
}

.feature-tab-menu {
    display: grid;
    gap: 16px;
}

.feature-tab-item {
    appearance: none;
    font: inherit;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: var(--radius-xxl);
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.feature-tab-item:hover{
    transform: translateY(-1px);
    border-color: rgba(var(--rgb-primary-default),.42);
    box-shadow: 0 18px 40px rgba(var(--rgb-primary-default),.14);
}

.feature-tab-item strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
}

.feature-tab-item span {
    color: var(--color-primary-default);
    font-weight: var(--fontWeight-5);
}

.feature-tab-detail {
    min-height: 390px;
    display: grid;
    align-content: center;
    gap: 16px;
    padding: 38px;
    border-radius: var(--radius-xxl);
}

.feature-tab-detail .material-symbols-outlined {
    color: var(--color-primary-light);
    font-size: 54px;
}

.filter-strip {
    display: grid;
    grid-template-columns: minmax(240px,.54fr) minmax(0,1fr);
    gap: 28px;
    align-items: start;
    padding: 28px;
    border-radius: var(--radius-xxl);
    margin-bottom: 32px;
}

.filter-strip-copy h3 {
    margin: 8px 0 0;
    color: var(--color-text-primary);
    font-size: 24px;
    font-weight: var(--fontWeight-5);
}

.filter-strip-copy p {
    margin: 12px 0 0;
    color: var(--color-text-tertiary);
    line-height: 1.7;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 28px;
}

.pricing-card {
    position: relative;
    min-height: 260px;
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 34px 28px;
    border-radius: var(--radius-xxl);
    overflow: hidden;
}

.pricing-card::before {
    content: "";
    position: absolute;
    right: -58px;
    top: -72px;
    width: 150px;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg,rgba(var(--rgb-primary-light),.18),rgba(var(--rgb-primary-strong),.16));
}

.pricing-card > * {
    position: relative;
    z-index: 1;
}

.mini-stat-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}

.mini-stat-grid .stat-card {
    min-height: 78px;
    border-radius: var(--radius-xl);
    box-shadow: none;
}

.landing-card-actions {
    margin-top: 6px;
}

.landing-subtitle {
    margin: 48px 0 18px;
    font-size: 24px;
    font-weight: var(--fontWeight-5);
}

.public-landing .empty-state {
    padding: 28px;
    border-radius: var(--radius-xxl);
    color: var(--color-text-tertiary);
    text-align: center;
}

.landing-contact {
    padding: clamp(72px,8vw,112px) 0 60px;
    color: var(--color-neutral-000);
    background:
        radial-gradient(circle at 12% 0%,rgba(255,255,255,.20),transparent 28%),
        linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary-vibrant) 72%);
}

.landing-contact .section-heading-title,
.landing-contact .section-heading-desc,
.landing-contact .learn-more-link {
    color: var(--color-neutral-000);
}

.landing-contact .section-heading-line {
    background: linear-gradient(90deg,var(--color-neutral-000) 0 42%,transparent 42% 58%,var(--color-neutral-000) 58% 100%);
}

.footer-widget-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 28px;
}

.footer-widget {
    padding: 28px;
    border-radius: var(--radius-xxl);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
}

.footer-widget .material-symbols-outlined {
    color: var(--color-neutral-000);
    font-size: 38px;
}

.footer-widget h3,
.footer-widget p {
    color: var(--color-neutral-000);
}

.public-landing .site-footer {
    padding: 24px 20px;
    color: rgba(255,255,255,.86);
    background: var(--color-primary-strong);
    text-align: center;
}

.loading-panel {
    padding: 70px 22px;
}



/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */



#mainSidebar_info{
	min-width:0;
	max-width:360px;
	overflow:hidden;
	text-overflow:ellipsis;
	font-weight: var(--fontWeight-2);
}

#workspace0_main:empty::before,
#workspace1_main:empty::before{
	display:block;
	border:1px dashed var(--color-primary-border);
	border-radius:var(--radius-md);
	color:var(--color-text-tertiary);
	font-weight:var(--fontWeight-2);
}

#workspace0_main:empty::before{
	background:linear-gradient(180deg, var(--color-surface-tertiary) 0%, var(--color-primary-softer) 100%);
	box-shadow:var(--shadow-control-subtle);
}

#workspace0_main:empty::before{
	content:"Pilih konteks periode, tahun, bulan, dan perangkat daerah untuk memulai workspace.";
	padding:18px 20px;
	font-size:var(--fontsz-md);
}

#workspace1_main:empty::before{
	content:"Pilih modul pada menu kiri untuk membuka area kerja utama.";
	padding:34px 24px;
	background:linear-gradient(135deg, rgba(255,255,255,.94) 0%, var(--color-primary-softer) 48%, var(--color-neutral-000) 100%);
	box-shadow:var(--shadow-control);
	font-size:15px;
	font-weight:var(--fontWeight-3);
	text-align:center;
}

#workspace1_headside .btn{
	white-space:nowrap;
}

#workspace1_contentNavItems:empty::before{
	content:"Belum ada pintasan.";
	display:block;
	padding:8px 12px;
	font-size:var(--fontsz-sm);
	text-align:center;
}

/* ==========================================================================
   SINERGI workspace bindings used by sinergi.js
   ========================================================================== */
body.auth-checking .app-shell,
body.auth-required .app-shell{
	visibility:hidden;
	pointer-events:none;
	user-select:none;
}

.auth-login-dialog .dialogbox-box,
.auth-required-dialog .dialogbox-box{
	width:min(980px, calc(100vw - 44px));
	border-radius:var(--radius-xl);
}

.topbar .brand-text{
	color:var(--color-text-inverse);
}
.topbar .brand-text .brand-subtext{
	color:var(--color-neutral-250);
}

.rpj-workflow-notice{
	display:grid;
	gap:10px;
}

.ringkasan-item{
	display:grid;
	align-content:center;
	gap:8px;
	text-align:center;
}

body.auth-ready .app-shell{
	visibility:visible;
}




#btn_toggleMainSidebar {

}

#btn_toggleMainSidebar > span {
  transition: transform 220ms ease;
  transform-origin: center;
  will-change: transform;
}

/* State sidebar penuh: icon panah ke kiri */
body #btn_toggleMainSidebar > span {
  transform: rotate(0deg);
}

/* State sidebar mini: icon diputar jadi panah ke kanan */
body.layout-sidebar-mini #btn_toggleMainSidebar > span {
  transform: rotate(180deg);
}

/* Icon di dalam span */
#btn_toggleMainSidebar > span > * {
  display: inline-block;
  transition: transform 160ms ease;
}

/* Hover: panah bergerak menunjuk ke arahnya */
#btn_toggleMainSidebar:hover > span > * {
  animation: toggleMainSidebarArrowPoint 520ms ease-in-out infinite;
}

@keyframes toggleMainSidebarArrowPoint {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-4px);
  }
}


.table tbody tr.table-group-row td{
	background:var(--color-info-surface);
	color:var(--color-text-primary);
	font-weight:var(--fontWeight-3);
	text-transform:none;
	border-top:1px solid rgba(var(--rgb-primary-default),.22);
	border-bottom:1px solid rgba(var(--rgb-primary-default),.16);
}

.table th[data-col-id="program-prioritas"],
.table th[data-col-id="tagline-program"],
.table th[data-col-id="urusan-terkait"],
.table th[data-col-id="urusan-bidang-urusan"],
.table th[data-col-id="urusan"],
.table th[data-col-id="catatan"]{
	min-width:160px;
}

.table th[data-col-id="bidang-urusan-program"],
.table th[data-col-id="misi"],
.table th[data-col-id="visi-misi"],
.table th[data-col-id="tujuan"],
.table th[data-col-id="sasaran"],
.table th[data-col-id="sasaran-utama-pembangunan-kabupaten"],
.table th[data-col-id="strategi"],
.table th[data-col-id="arah-kebijakan"],
.table th[data-col-id="outcome"],
.table th[data-col-id="outcome-strategis"],
.table th[data-col-id="program-pd-pelaksana"],
.table th[data-col-id="indikator-outcome"],
.table th[data-col-id="indikator-didukung"],
.table th[data-col-id="indikator"]{
	min-width:180px;
}

.table[data-table-id="rpjmd-tabel-4-1"] .rpjmd-outcome-contribution-list{
	margin-top:8px;
	padding-top:8px;
	border-top:1px solid rgba(var(--rgb-primary-default),.14);
}

.table[data-table-id="rpjmd-tabel-4-1"] .rpjmd-outcome-contribution-list > .table-cell-content{
	margin-top:6px;
	padding:6px 8px;
	border-left:2px solid rgba(var(--rgb-accent-success),.45);
	background:rgba(var(--rgb-accent-success),.035);
}

.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-tone-1{--rpjmd-rel-rgb:var(--rgb-primary-default);}
.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-tone-2{ --rpjmd-rel-rgb:var(--rgb-accent-purple); }
.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-tone-3{ --rpjmd-rel-rgb:var(--rgb-accent-success); }
.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-tone-4{ --rpjmd-rel-rgb:var(--rgb-accent-orange); }
.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-tone-5{ --rpjmd-rel-rgb:var(--rgb-primary-light); }
.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-tone-6{ --rpjmd-rel-rgb:var(--rgb-accent-indigo); }
.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-tone-7{ --rpjmd-rel-rgb:var(--rgb-accent-pink); }

.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-doc-marker,
.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-misi,
.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-misi-global{
	background:linear-gradient(180deg, rgba(var(--rpjmd-rel-rgb), .16), rgba(var(--rpjmd-rel-rgb), .07));
	box-shadow:inset 2px 0 0 rgba(var(--rpjmd-rel-rgb), .75);
}

.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-doc-marker,
.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-misi-global{
	vertical-align:top;
}

.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-doc-marker{
	min-width:72px;
	text-align:center;
}

.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-misi-global{
	min-width:280px;
	width:320px;
}

.table[data-table-id="rpjmd-tabel-3-2"] .rpjmd-global-misi-list,
.table[data-table-id="rpjmd-tabel-3-15"] .rpjmd-global-misi-list,
.table[data-table-id="rpjmd-tabel-3-16"] .rpjmd-global-misi-list{
	display:grid;
	gap:10px;
	min-width:0;
}

.table[data-table-id="rpjmd-tabel-3-2"] .rpjmd-global-misi-item,
.table[data-table-id="rpjmd-tabel-3-15"] .rpjmd-global-misi-item,
.table[data-table-id="rpjmd-tabel-3-16"] .rpjmd-global-misi-item{
	min-width:0;
	padding:0 0 10px;
	border-bottom:1px solid rgba(var(--rgb-primary-default),.14);
}

.table[data-table-id="rpjmd-tabel-3-2"] .rpjmd-global-misi-item:last-child,
.table[data-table-id="rpjmd-tabel-3-15"] .rpjmd-global-misi-item:last-child,
.table[data-table-id="rpjmd-tabel-3-16"] .rpjmd-global-misi-item:last-child{
	padding-bottom:0;
	border-bottom:0;
}

.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-tujuan,
.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-sasaran,
.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-indikator{
	min-width:220px;
	vertical-align:top;
}

.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-vision{
	background:linear-gradient(90deg, rgba(var(--rgb-primary-default),.12), rgba(var(--rgb-primary-light),.05));
	box-shadow:inset 2px 0 0 rgba(var(--rgb-primary-default),.75);
}

.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-tujuan{
	background:rgba(var(--rpjmd-rel-rgb), .075);
}

.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-sasaran{
	background:rgba(var(--rpjmd-rel-rgb), .045);
}

.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-indikator-makro,
.table[data-table-id="rpjmd-tabel-3-2"] tr.is-rpjmd-indicator-makro td.rpjmd-rel-baseline,
.table[data-table-id="rpjmd-tabel-3-2"] tr.is-rpjmd-indicator-makro td.rpjmd-rel-target{
	background:linear-gradient(180deg, rgba(var(--rgb-primary-default),.14), rgba(var(--rgb-primary-default),.07));
	
}

.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-rel-indikator-mikro{
	background:rgba(var(--rgb-accent-success),.045);
}

.table[data-table-id="rpjmd-tabel-3-2"] tr.is-rpjmd-iku-selected td,
.table[data-table-id="rpjmd-tabel-4-2"] tr.is-rpjmd-iku-selected td{
	background:linear-gradient(180deg, rgba(var(--rgb-accent-success),.14), rgba(var(--rgb-accent-warning),.08));
}

.table[data-table-id="rpjmd-tabel-3-2"] td.rpjmd-iku-indicator-cell,
.table[data-table-id="rpjmd-tabel-4-2"] td.rpjmd-iku-indicator-cell,
.table[data-table-id="rpjmd-tabel-4-2"] tr.is-rpjmd-iku-selected td[data-col-id="indikator"]{
	box-shadow:inset 2px 0 0 rgba(var(--rgb-accent-success),.9);
}

.table[data-table-id="rpjmd-tabel-3-2"] .rpjmd-iku-badge,
.table[data-table-id="rpjmd-tabel-4-2"] .rpjmd-iku-badge{
	display:inline-flex;
	margin:0 0 6px;
}

.table[data-table-id="rpjmd-tabel-3-2"] .rpjmd-relation-node{
	display:block;
}

.table[data-table-id="rpjmd-tabel-3-2"] .rpjmd-relation-tag,
.table[data-table-id="rpjmd-tabel-3-2"] .rpjmd-polarity-tag{
	display:block;
	width:auto;
	max-width:100%;
	margin:0 0 4px;
	padding:0;
	border:0;
	border-radius:0;
	background:transparent;
	color:var(--color-text-tertiary);
	font-size:var(--fontsz-sm);
	font-weight:var(--fontWeight-1);
	line-height:1.35;
	letter-spacing:0;
}

.rpjmd-duplicate-candidates{
	display:grid;
	gap:10px;
	min-width:0;
	padding-top:4px;
}

.rpjmd-duplicate-candidates.u-hidden{
	display:none;
}

.rpjmd-duplicate-candidate{
	display:grid;
	gap:6px;
	min-width:0;
	padding:10px;
	border:1px solid rgba(var(--rgb-primary-default),.18);
	border-radius:var(--radius-sm);
	background:var(--color-neutral-000);
}

.rpjmd-duplicate-candidate .table-action-wrap{
	margin-top:2px;
}

.rpjmd-reconcile-dialog{
	gap:14px;
}

.rpjmd-reconcile-controls{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:12px;
}

.rpjmd-reconcile-preview{
	display:grid;
	gap:12px;
	min-width:0;
}

.rpjmd-reconcile-section-title{
	margin:4px 0 0;
	font-size:var(--fontsz-lg);
	line-height:1.35;
	letter-spacing:0;
}

.rpjmd-reconcile-profiles,
.rpjmd-reconcile-conflicts{
	display:grid;
	gap:8px;
}

.rpjmd-reconcile-profile,
.rpjmd-reconcile-conflict{
	display:grid;
	gap:6px;
	min-width:0;
	padding:10px 12px;
	border:1px solid var(--color-border-default);
	border-radius:var(--radius-sm);
	background:var(--color-neutral-000);
}

.rpjmd-reconcile-profile.is-selected{
	border-color:rgba(var(--rgb-primary-default),.5);
	box-shadow:inset 3px 0 0 rgba(var(--rgb-primary-default),.9);
}

.rpjmd-reconcile-conflict.is-unresolved{
	border-color:color-mix(in srgb, var(--color-danger-strong) 40%, var(--color-border-default));
	box-shadow:inset 3px 0 0 var(--color-danger-strong);
}

.rpjmd-reconcile-stats{
	display:grid;
	grid-template-columns:repeat(5,minmax(112px,1fr));
	gap:8px;
}

.rpjmd-reconcile-stat{
	display:grid;
	gap:2px;
	min-width:0;
	padding:9px 10px;
	border:1px solid var(--color-border-default);
	border-radius:var(--radius-sm);
	background:var(--color-surface-secondary);
}

.rpjmd-reconcile-stat strong{
	font-size:var(--fontsz-lg);
	line-height:1.2;
}

.rpjmd-reconcile-stat span,
.rpjmd-reconcile-token{
	overflow-wrap:anywhere;
}

.rpjmd-reconcile-action-table{
	max-height:360px;
	overflow:auto;
}

.rpjmd-reconcile-action-table .table{
	min-width:820px;
}

body.layout-mobile .rpjmd-reconcile-controls{
	grid-template-columns:minmax(0,1fr);
}
body.layout-mobile .rpjmd-reconcile-stats{
	grid-template-columns:repeat(2,minmax(0,1fr));
}

.table[data-table-id="rpjmd-program-prioritas-master"] td{
	vertical-align:top;
}

.table[data-table-id="rpjmd-program-prioritas-master"] td.rpjmd-priority-master-no{
	min-width:72px;
	text-align:center;
	font-weight:var(--fontWeight-3);
	background: rgb(0 95 184 / 5%);
	color:var(--color-text-primary);
}

.table[data-table-id="rpjmd-program-prioritas-master"] td.rpjmd-priority-master-tagline{
	min-width:260px;
	background:linear-gradient(180deg, rgba(var(--rgb-accent-warning),.10), rgba(var(--rgb-accent-warning),.035));
	box-shadow:inset 2px 0 0 rgba(var(--rgb-accent-warning),.6);
}

.table[data-table-id="rpjmd-program-prioritas-master"] td.rpjmd-priority-master-program{
	min-width:280px;
	background:rgba(var(--rgb-primary-default),.035);
}

.table[data-table-id="rpjmd-program-prioritas-master"] td.rpjmd-priority-master-code{
	min-width:96px;
	font-weight:var(--fontWeight-2);
	color:var(--color-text-primary);
}

.table[data-table-id="rpjmd-program-prioritas-master"] td.rpjmd-priority-master-relation{
	min-width:240px;
	background:rgba(var(--rgb-accent-success),.035);
}

.table[data-table-id="rpjmd-program-prioritas-master"] td.rpjmd-priority-master-status{
	min-width:220px;
	background:rgba(var(--rgb-accent-purple),.035);
}

.table[data-table-id="rpjmd-program-prioritas-master"] tr.is-empty td{
	background:rgba(var(--rgb-neutral-muted),.045);
}

.table[data-table-id="rpjmd-tabel-3-16"] td{
	vertical-align:top;
}

.table[data-table-id="rpjmd-tabel-3-16"] td.rpjmd-priority-no{
	min-width:84px;
	text-align:center;
	font-weight:var(--fontWeight-3);
	color:var(--color-text-primary);
	background:rgba(var(--rgb-primary-default),.05);
}

.table[data-table-id="rpjmd-tabel-3-16"] td.rpjmd-priority-misi,
.table[data-table-id="rpjmd-tabel-3-16"] td.rpjmd-priority-tujuan,
.table[data-table-id="rpjmd-tabel-3-16"] td.rpjmd-priority-sasaran{
	background:linear-gradient(180deg, rgba(var(--rgb-primary-default),.08), rgba(var(--rgb-primary-default),.025));
	box-shadow:inset 2px 0 0 rgba(var(--rgb-primary-default),.55);
}

.table[data-table-id="rpjmd-tabel-3-16"] td.rpjmd-priority-outcome{
	min-width:220px;
	background:rgba(var(--rgb-primary-light),.045);
	box-shadow:inset 2px 0 0 rgba(var(--rgb-primary-light),.55);
}

.table[data-table-id="rpjmd-tabel-3-16"] td.rpjmd-priority-empty{
	background:var(--color-neutral-000);
	box-shadow:none;
}

.table[data-table-id="rpjmd-tabel-3-16"] td.rpjmd-priority-indikator{
	min-width:220px;
	background:rgba(var(--rgb-accent-success),.035);
}

.table[data-table-id="rpjmd-tabel-3-16"] td.rpjmd-priority-urusan{
	min-width:200px;
	background:rgba(var(--rgb-accent-purple),.035);
}

.table[data-table-id="rpjmd-tabel-3-16"] td.rpjmd-priority-tagline{
	min-width:260px;
	background:rgba(var(--rgb-accent-warning),.045);
	box-shadow:inset 2px 0 0 rgba(var(--rgb-accent-warning),.55);
}

.table[data-table-id="rpjmd-tabel-3-16"] tr.rpjmd-priority-vision-row td{
	background:linear-gradient(90deg, rgba(var(--rgb-primary-default),.13), rgba(var(--rgb-primary-light),.06));
	border-top:1px solid rgba(var(--rgb-primary-default),.22);
	border-bottom:1px solid rgba(var(--rgb-primary-default),.16);
}

.table[data-table-id="rpjmd-tabel-3-16"] td.rpjmd-priority-vision{
	font-weight:var(--fontWeight-3);
	color:var(--color-text-primary);
}




.table [data-col-id="aksi"]{
	position:sticky;
	top:0;
	right:0;
	width:120px;
}
.table td[data-cell-role="action"],
.table td[data-col-id="aksi"]{

	border-color:var(--color-primary-border-strong) !important;
}


.table .rpjmd-policy-year-cell{
	outline:10px solid transparent;
	outline-offset:-100px;
}
.table .rpjmd-policy-year-cell.inactive{
	outline-color:var(--color-tcCyan3);
}
.table .rpjmd-policy-year-cell.active{
	outline-color:var(--color-tcCyan7);
}























@media (min-width: 1600px) {
    :root {
        --grid-min-xs: clamp(150px, 12vw, 190px);
        --grid-min-sm: clamp(190px, 14vw, 250px);
        --grid-min-md: clamp(250px, 18vw, 320px);
        --grid-min-lg: clamp(360px, 24vw, 460px);
        --grid-min-xl: clamp(380px, 28vw, 520px);
        --space-md: 18px;
        --space-lg: 24px;
    }
}



@media (max-width: 1360px) {
    :root {
        --layout-sidebar-open: 274px;
        --grid-min-lg: clamp(320px,36vw,420px);
        --grid-min-xl: clamp(300px,40vw,440px);
    }

    .hero-banner,
    .context-intro,
    .page-hero-top {
        grid-template-columns: 1fr;
    }

    .page-hero-top {
        display: grid;
    }

    .demo-banner {
        grid-template-columns: 1fr;
    }

    .demo-banner .copilot-orb {
        width: 132px;
    }
}





@media (max-width: 1180px) {
    .site-header-inner {
        min-height: 86px;
        gap: 20px;
    }

    .site-brand {
        min-width: 188px;
    }

    .site-brand-mark {
        width: 58px;
        height: 58px;
    }

    .site-brand-copy strong {
        font-size: 28px;
    }

    .site-brand-copy small {
        font-size: 14px;
    }

    .site-nav {
        gap: 18px;
    }

    .landing-hero-inner,
    .feature-split,
    .feature-tabs,
    .filter-strip {
        grid-template-columns: 1fr;
    }

    .landing-hero::before {
        width: 92vw;
    }

    .landing-hero-copy {
        padding-left: 0;
    }

    .landing-hero-art {
        max-width: 620px;
        margin: 0 auto;
    }

    .pricing-grid,
    .footer-widget-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}








@media (max-width: 680px) {

	body.layout-mobile-compact {
		--layout-sidebar-current: 0px;
	}

	body.layout-mobile-compact .shell {
		grid-template-columns: minmax(0,1fr);
		gap: 0;
	}

	body.layout-mobile-compact .sidebar {
		position: fixed;
		z-index: 420;
		top: calc(var(--layout-top-offset) + var(--layout-shell-gap));
		left: var(--layout-shell-gap);
		width: min(300px, calc(100vw - (var(--layout-shell-gap) * 2)));
		height: calc(100dvh - var(--layout-top-offset) - (var(--layout-shell-gap) * 2));
		transform: translateX(0);
		transition: transform var(--motion-medium), visibility var(--motion-fast), opacity var(--motion-fast);
		opacity: 1;
		visibility: visible;
		box-shadow:var(--shadow-floating-bold);
	}

	body.layout-mobile-compact.layout-sidebar-mini .sidebar {
		transform: translateX(calc(-100% - var(--layout-shell-gap)));
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	body.layout-mobile-compact .main,
	body.layout-mobile-compact .main.main-shell,
	body.layout-mobile-compact .workspace-main-shell {
		min-width: 0;
		width: 100%;
	}
}











/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ========================================================================== 
   US Plugin Layer
   ========================================================================== */

#PLUG_notify{
	display:inline-block;
	position:fixed;
	z-index:9999999999;
	bottom:0;
	right:0;
	padding:var(--layout-shell-gap);
	width:360px;
	overflow:hidden;
}
body.layout-mobile #PLUG_notify{
	width:240px;
}
body.layout-mobile-compact #PLUG_notify{
	width:100%;
}

#PLUG_notify:empty{
	display:none;
}
#PLUG_notify .notify{
	position:relative;
	display:block;
	padding:10px 10px;
	border-radius:var(--radius-lg);
	background:var(--color-neutral-000);
	border:1px solid var(--color-tcBlack4);
	box-shadow: var(--shadow-floating-bold);
}
#PLUG_notify .notify+.notify{
	border:1px solid var(--color-border-default);
}
#PLUG_notify .notify>.head{
	padding:0 var(--space-sm);
}
#PLUG_notify .notify>.head>.title{
	text-align:left;
	max-width:calc(100% - 20px);
	text-transform:capitalize;
	white-space:nowrap;
	font-size:var(--fontsz-md);
	font-weight: var(--fontWeight-4);
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	color:var(--color-primary-default);
}
#PLUG_notify .notify>.head>.title:empty{
	padding-bottom:10px;
}
#PLUG_notify .notify>.head>.action{
	position:absolute;
	top:1px;
	right:4px;
}
#PLUG_notify .notify>.head>.action>button{
	background:none;
	color:var(--color-text-primary);
	border:none;
	cursor:pointer;
	opacity:0.62;
	font-size:18px;
}
#PLUG_notify .notify>.head>.action>button:hover{
	opacity:1;
}
#PLUG_notify .notify>.body{
	font-size:14px;
	padding:var(--space-sm);
	max-height:400px;
	overflow:auto;
}
#PLUG_notify .notify>.body>.content{
	color:var(--color-text-primary-soft);
	white-space:pre-line;
}

#PLUG_notify .notify>.body .loaderbar{
	min-width:200px;
	margin-bottom:10px;
}
#PLUG_notify .notify>.body .loaderbar>.text{
	color:var(--color-text-secondary);
}
#PLUG_notify .hide{
	display:none !important;
}

/*
_________________________________________________
animation 
_________________________________________________
*/

.anim_onloading{
	opacity:0.62;
	/* animation: fadeloading_ 1s infinite linear alternate; */
}
.anim_onloading>div,
.anim_onloading>img{
	opacity:0 !important;
}

@keyframes fadeloading_{
    0%  {opacity:0.2;}
    100%{opacity:0.8;}
}



.loader{
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: inline-block;
  border-top: 3px solid var(--color-tcWhite4);
  border-right: 3px solid transparent;
  box-sizing: border-box;
  animation: spin_ 1s linear infinite;
}

@keyframes spin_ {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loaderbar{
	
}
.loaderbar>.bar{
	position:relative;
	display:block;
	height:22px;
	background:var(--color-primary-default);
	color:var(--color-text-inverse);
	font-size:12px;
	border-radius:var(--radius-sm);
	overflow:hidden;
}
.loaderbar>.bar>.value{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	display:inline-block;
	height:100%;
	background:var(--color-tcWhite2);
	transition: width 0.3s ease-in-out;
}
.loaderbar>.bar>.label{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
	display:block;
	text-align:center;
	padding:2px;
	color:var(--color-overlay-white-95);
}
.loaderbar>.text{
	
}



/*
_________________________________________________
dialogbox 
_________________________________________________
*/
body.dialogbox-isactive{
	overflow:hidden;
}

.dialogbox-overlay{
	position:fixed;
	inset:0;
	z-index:1300;
	display:grid;
	place-items:center;
	padding:clamp(12px, 3dvw, 28px);
	background:var(--color-tcBlack6, rgba(32,31,30,.54));
	backdrop-filter:blur(4px);
	animation:plugOverlayIn var(--motion-fast);
}




/* =========================================================
   LOGIN BACKGROUND
   Pearl / Soft / Luxury
   ========================================================= */

.auth-required-dialog.dialogbox-overlay {
	isolation: isolate;
	background:#ffffff;
}


/* =========================================================
   SOFT GLASS SHAPE
   ========================================================= */

.auth-required-dialog.dialogbox-overlay::before {
	content: "";
	position: fixed;
	z-index: -1;

	width: max(68vw, 820px);
	aspect-ratio: 1;

	top: min(-32vw, -260px);
	right: min(-22vw, -190px);

	border-radius:
		42% 58% 67% 33%
		/
		38% 43% 57% 62%;

	background:

		/* soft glass highlight */
		radial-gradient(
			ellipse 42% 34% at 31% 28%,
			rgba(255, 255, 255, 0.88) 0%,
			rgba(255, 255, 255, 0.38) 34%,
			transparent 68%
		),

		/* dusty blue reflection */
		radial-gradient(
			ellipse 50% 48% at 43% 46%,
			#2f5d9f 50%,
			#2759a1 120%,
			#00000000 76%
		),

		/* soft lavender shadow */
		radial-gradient(
			ellipse 46% 44% at 70% 72%,
			rgba(175, 168, 203, 0.28) 0%,
			#c2bed61f 48%,
			transparent 74%
		),

		/* pearl body */
		linear-gradient(
			145deg,
			rgba(236, 243, 250, 0.94) 0%,
			rgba(194, 211, 229, 0.76) 36%,
			rgba(170, 191, 215, 0.62) 60%,
			rgba(191, 188, 211, 0.52) 100%
		);

	box-shadow:
		-40px 55px 100px rgba(79, 101, 129, 0.10),
		-90px 120px 220px rgba(67, 84, 108, 0.08),
		inset 20px 20px 55px rgba(255, 255, 255, 0.34);

	transform: rotate(-13deg);
}


/* =========================================================
   LUXURY CURVES / FINE DETAILS
   ========================================================= */

.auth-required-dialog.dialogbox-overlay::after {
	content: "";
	position: fixed;
	z-index: -1;
	inset: 0;

	pointer-events: none;

	background:

		/* large elegant arc */
		radial-gradient(
			circle at 82% 18%,
			transparent 0 15vw,
			#ffffffb3 calc(15vw + 1px),
			#ffffffb3 calc(15vw + 2px),
			transparent calc(15vw + 3px)
		),

		/* secondary blue arc */
		radial-gradient(
			circle at 82% 18%,
			transparent 0 23vw,
			#7591b129 calc(23vw + 1px),
			#7591b129 calc(23vw + 2px),
			transparent calc(23vw + 3px)
		),

		/* distant champagne arc */
		radial-gradient(
			circle at 82% 18%,
			transparent 0 32vw,
			#bc9e7d1a calc(32vw + 1px),
			#bc9e7d1a calc(32vw + 2px),
			transparent calc(32vw + 3px)
		),

		/* bottom-left curved detail */
		radial-gradient(
			circle at 7% 94%,
			transparent 0 14vw,
			rgba(136, 145, 173, 0.12) calc(14vw + 1px),
			rgba(136, 145, 173, 0.12) calc(14vw + 2px),
			transparent calc(14vw + 3px)
		),

		/* soft diagonal silk streak */
		linear-gradient(
			128deg,
			transparent 0%,
			transparent 39%,

			rgba(255, 255, 255, 0.00) 39.1%,
			rgba(255, 255, 255, 0.42) 39.22%,
			rgba(255, 255, 255, 0.00) 39.36%,

			transparent 39.5%,
			transparent 100%
		),

		/* very subtle warm streak */
		linear-gradient(
			128deg,
			transparent 0%,
			transparent 72%,

			rgba(207, 181, 151, 0.00) 72.1%,
			rgba(207, 181, 151, 0.12) 72.22%,
			rgba(207, 181, 151, 0.00) 72.36%,

			transparent 72.5%,
			transparent 100%
		);
}



.dialogbox-box{
	position:relative;
	display:grid;
	grid-template-rows:auto minmax(0, 1fr) auto;
	width:var(--dialog-width, min(760px, calc(100dvw - 48px)));
	max-width:calc(100dvw - 32px);
	max-height:var(--dialog-max-height, min(88dvh, 840px));
	min-width:min(100%, 320px);
	border:1px solid var(--color-border-default);
	border-radius:var(--radius-xl);
	background:var(--color-surface-primary);
	box-shadow:var(--shadow-elevated, 0 18px 46px rgba(0,0,0,.16));
	overflow:hidden;
	animation:plugDialogIn var(--motion-medium);
	container-type:inline-size;
}

.dialogbox-wide .dialogbox-box,
.dialogbox-box.dialogbox-wide{
	width:var(--dialog-width-wide, min(1180px, calc(100dvw - 48px)));
}

.dialogbox-box.dialogbox-builder{
	width:var(--dialog-width-wide, min(1180px, calc(100dvw - 48px)));
}

@supports selector(.dialogbox-box:has(.table-wrap)){
	.dialogbox-box:has(.table-wrap),
	.dialogbox-box:has(.visual-grid),
	.dialogbox-box:has(.chart-grid),
	.dialogbox-box:has(.grid-auto),
	.dialogbox-box:has(.login-shell){
		width:var(--dialog-width-wide, min(1180px, calc(100dvw - 48px)));
	}
}

.dialogbox-head{
	min-width:0;
	padding:16px var(--dialog-body-pad, 24px);
	border-bottom:1px solid var(--color-divider);
	font-size:var(--fontsz-xl1);
	font-weight:var(--fontWeight-5);
}

.sortable-item{
	transition:background-color var(--motion-fast, .16s ease), opacity var(--motion-fast, .16s ease), box-shadow var(--motion-fast, .16s ease);
}

.sortable-handle{
	cursor:grab;
	user-select:none;
	touch-action:none;
}

.sortable-handle:active{
	cursor:grabbing;
}

.sortable-dragging{
	opacity:.5;
	background:var(--color-surface-secondary);
	box-shadow:var(--shadow-elevated, 0 18px 46px rgba(0,0,0,.16));
}

.dialogbox-body{
	min-height:0;
	min-width:0;
	padding:var(--dialog-body-pad, 24px);
	overflow:auto;
	overscroll-behavior:contain;
	font-size:var(--fontsz-md);
	line-height:1.6;
	color:var(--color-text-primary-soft);
	background:linear-gradient(180deg,var(--color-surface-primary) 0%,var(--color-surface-secondary) 100%);
}

.dialogbox-body > *{
	max-width:100%;
	min-width:0;
}

.dialogbox-body .table-wrap,
.dialogbox-body .visual-grid,
.dialogbox-body .chart-grid,
.dialogbox-body .grid-auto,
.dialogbox-body .card{
	width:100%;
	max-width:100%;
}

.dialogbox-body .table{
	min-width:min(920px, calc(100dvw - 96px));
}

.relation-dialog-detach-list{
	display:grid;
	gap:8px;
	margin-top:10px;
}

.relation-dialog-detach-item{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:8px 10px;
	border:1px solid var(--color-border-default);
	border-radius:var(--radius-md);
	background:var(--color-surface-primary);
}

.relation-dialog-detach-item > span{
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.relation-dialog-detach-item > .btn{
	flex:0 0 auto;
}

.dialogbox-buttons{
	display:flex;
	justify-content:flex-end;
	gap:10px;
	padding:14px var(--dialog-body-pad, 24px);
	border-top:1px solid var(--color-border-default);
	background:var(--color-surface-secondary);
}

.dialogbox-btn-exit{
	position:absolute;
	z-index:9999;
	top:12px;
	right:12px;
}


.dialogbox-busy-layer{
	position:absolute;
	inset:0;
	display:none;
	place-items:center;
	padding:22px;
	background:var(--color-surface-glass-soft);
	backdrop-filter:blur(3px);
	z-index:2;
}

.dialogbox-box.is-busy .dialogbox-busy-layer{
	display:grid;
}

.dialogbox-busy-text{
	padding:12px 16px;
	border:1px solid var(--color-border-default);
	border-radius:var(--radius-full);
	background:var(--color-surface-primary);
	box-shadow:var(--shadow-card-medium);
	font-weight:var(--fontWeight-5);
	color:var(--color-text-primary-soft);
}

.autocomplete-items{
	position:absolute;
	z-index:1200;
	left:0;
	right:0;
	margin-top:4px;
	max-height:260px;
	overflow:auto;
	border:1px solid var(--color-tcBlack3);
	border-radius:var(--radius-md);
	background:var(--color-neutral-000);
	box-shadow:var(--shadow-card-medium);
}

.autocomplete-items > div{
	padding:9px 11px;
	border-bottom:1px solid var(--color-border-subtle);
	font-size:var(--fontsz-sm);
	cursor:pointer;
}

.autocomplete-items > div:last-child{
	border-bottom:0;
}

.autocomplete-items > div:hover,
.autocomplete-items .autocomplete-active{
	background:var(--color-primary-softer);
	color:var(--color-primary-default);
}

.TOOLS_progressBar{
	--progress-value:0%;
	position:relative;
	height:26px;
	border-radius:var(--radius-full);
	background:var(--color-primary-softer);
	overflow:hidden;
	font-size:11px;
	font-weight:var(--fontWeight-5);
	line-height:26px;
	text-align:center;
	color:var(--color-text-primary);
}

.TOOLS_progressBar::before{
	content:"";
	position:absolute;
	inset:0 auto 0 0;
	width:var(--progress-value);
	background:var(--color-primary-default);
	opacity:.28;
}

.mapping-tail{
	position:relative;
	width:100%;
	min-height:240px;
	border:1px solid var(--color-tcBlack3);
	border-radius:var(--radius-md);
	background:var(--color-primary-softer);
	overflow:auto;
}

.mapping-tail-multi{
	--mt-column-gap:24px;
	--mt-column-min-width:220px;
}

.mt-svg{
	position:absolute;
	inset:0;
	pointer-events:none;
	overflow:visible;
	z-index:1;
}

.mt-body{
	position:relative;
	z-index:2;
	display:flex;
	gap:var(--mt-column-gap, 24px);
	padding:16px;
	min-width:max-content;
}

.mt-body-multi{
	align-items:flex-start;
}

.mt-col{
	display:grid;
	gap:8px;
	min-width:var(--mt-column-min-width, 220px);
	max-width:320px;
}

.mt-group-title{
	font-size:11px;
	font-weight:var(--fontWeight-5);
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--color-text-tertiary);
	padding:0 4px 3px;
}

.mt-empty{
	padding:10px;
	border:1px dashed var(--color-border-subtle);
	border-radius:var(--radius-md);
	color:var(--color-text-tertiary);
	font-size:var(--fontsz-sm);
	font-weight:var(--fontWeight-3);
	text-align:center;
}

.mt-row{
	display:grid;
	grid-template-columns:18px minmax(0, 1fr) 18px;
	align-items:center;
	gap:8px;
	min-height:38px;
	padding:7px 8px;
	border:1px solid var(--color-tcBlack3);
	border-radius:var(--radius-md);
	background:var(--color-neutral-000);
	box-shadow:var(--shadow-control);
	transition:var(--transition-ui);
}

.mt-row.is-click-toggle{
	cursor:pointer;
}

.mt-row:hover,
.mt-row.is-hover-linked,
.mt-row.is-hover-target{
	border-color:var(--color-primary-border-strong);
	background:var(--color-primary-softer);
}

.mt-row.is-linked{
	border-color:var(--color-primary-default);
	background:var(--color-primary-softer);
}

.mt-row.is-source{
	box-shadow:0 0 0 3px rgba(59,130,246,.12);
}

.mt-label{
	min-width:0;
	font-size:var(--fontsz-sm);
	font-weight:var(--fontWeight-4);
	line-height:1.35;
	color:var(--color-text-primary);
	overflow-wrap:anywhere;
}

.mt-handle{
	appearance:none;
	width:14px;
	height:14px;
	border-radius:var(--radius-full);
	border:2px solid var(--color-primary-default);
	background:var(--color-neutral-000);
	padding:0;
	cursor:grab;
}

.mt-handle:active{
	cursor:grabbing;
}

.mt-line-shadow{
	fill:none;
	stroke:rgba(15,23,42,.14);
	stroke-width:6;
	stroke-linecap:round;
}

.mt-line{
	fill:none;
	stroke:var(--color-primary-default);
	stroke-width:2.25;
	stroke-linecap:round;
}

.mt-line-hit{
	fill:none;
	stroke:transparent;
	stroke-width:14;
	stroke-linecap:round;
	pointer-events:stroke;
}

.mt-link.is-hover .mt-line{
	stroke-width:3.25;
}

.mt-line-preview{
	fill:none;
	stroke:var(--color-warning-strong);
	stroke-width:2;
	stroke-dasharray:6 5;
	stroke-linecap:round;
}

.mapping-tail.is-dragging .mt-row.is-target .mt-handle,
.mt-row.is-source .mt-handle{
	background:var(--color-primary-default);
}

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

@keyframes plugOverlayIn{
	from{ opacity:0; }
	to{ opacity:1; }
}

@keyframes plugDialogIn{
	from{ opacity:0; transform:translateY(8px) scale(.98); }
	to{ opacity:1; transform:translateY(0) scale(1); }
}

@media (max-width:640px){
	.dialogbox-overlay{
		padding:14px;
	}
	.dialogbox-box,
	.dialogbox-wide .dialogbox-box,
	.dialogbox-box.dialogbox-wide{
		width:calc(100dvw - 28px);
		max-height:calc(100dvh - 28px);
		border-radius:var(--radius-md);
	}
	.dialogbox-body{
		padding:16px;
	}
	.dialogbox-head,
	.dialogbox-buttons{
		padding-left:16px;
		padding-right:16px;
	}
	.dialogbox-buttons{
		flex-wrap:wrap;
	}
	.dialogbox-buttons > button{
		flex:1 1 140px;
	}
}

/* ==========================================================================
   Plugin visual bindings used by us.js
   ========================================================================== */
.autocomplete-items.is-closing{
	opacity:.72;
	pointer-events:none;
}

.mt-svg.is-passive{
	pointer-events:none!important;
}

.mt-handle-left,
.mt-handle-right{
	flex:0 0 auto;
}

.renstra-source-details{
	min-width:0;
	max-width:100%;
	border:1px solid var(--color-border-default);
	border-radius:var(--radius-sm);
	margin-block:12px;
	background:var(--color-surface-primary);
}

.renstra-source-details > summary{
	cursor:pointer;
	padding:14px 16px;
	font-weight:var(--fontWeight-3);
}

.renstra-source-details[open] > summary{
	border-bottom:1px solid var(--color-border-default);
}

.renstra-source-details > .card{
	margin:12px;
}

.dashboard-context-bar{
	display:grid;
	grid-template-columns:repeat(6,minmax(0,1fr));
	margin:0 0 14px;
	border-block:1px solid var(--color-border-default);
	background:var(--color-neutral-000);
}

.dashboard-context-item{
	display:grid;
	gap:3px;
	min-width:0;
	padding:9px 12px;
}

.dashboard-context-item + .dashboard-context-item{
	border-left:1px solid var(--color-border-default);
}

.dashboard-context-item span{
	color:var(--color-text-tertiary);
	font-size:11px;
	font-weight:var(--fontWeight-4);
	text-transform:uppercase;
}

.dashboard-context-item strong{
	min-width:0;
	overflow-wrap:anywhere;
	color:var(--color-text-primary);
	font-size:13px;
	line-height:1.35;
}

.dashboard-kpi-board .stat-strip{
	grid-template-columns:repeat(3,minmax(0,1fr));
}

.dashboard-kpi-board .stat-card{
	min-height:154px;
}

.dashboard-kpi-board .stat-note{
	overflow-wrap:anywhere;
}

@media (max-width:1180px){
	.dashboard-context-bar{grid-template-columns:repeat(3,minmax(0,1fr));}
	.dashboard-context-item:nth-child(4){border-left:0;}
	.dashboard-context-item:nth-child(n+4){border-top:1px solid var(--color-border-default);}
}

@media (max-width:680px){
	.dashboard-context-bar{grid-template-columns:1fr 1fr;}
	.dashboard-context-item:nth-child(odd){border-left:0;}
	.dashboard-context-item:nth-child(n+3){border-top:1px solid var(--color-border-default);}
	.dashboard-kpi-board .stat-strip{grid-template-columns:1fr;}
	.dashboard-kpi-board .stat-card{min-height:0;}
}


.audit-issue-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 4px;
	padding: 10px 12px;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	background: var(--color-surface-primary);
	color: var(--color-text-secondary);
	font-size: 13px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.audit-issue-copy {
	min-width: 0;
	overflow-wrap: anywhere;
}

.database-audit-context {
	max-height: 240px;
	margin: 0;
	padding: 12px;
	overflow: auto;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	background: var(--color-background-muted);
	font-size: 12px;
	white-space: pre-wrap;
}

.database-audit-filters > input,
.database-audit-filters > select {
	min-width: 160px;
	flex: 1 1 180px;
}

.audit-issue-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.database-datahub-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.database-audit-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.database-maintenance-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-border-default);
}

.database-maintenance-panel {
	min-width: 0;
}

.database-maintenance-panel[hidden] {
	display: none;
}

.database-maintenance-panel > .table-wrap,
.database-maintenance-panel > div > .table-wrap {
	max-width: 100%;
}