@charset "utf-8";
/**
 * Hybrid Design Tokens — Windows 11 Pro Fluent + One UI 8.5 / Android 16.
 * Mica/Acrylic materials · Squircle sheets · Cobalt accent · Spring motion.
 */

:root {
	/* Z-index — above Leaflet panes (400–1000) */
	--ou-z-map: 10;
	--ou-z-side: 40;
	--ou-z-bottom: 40;
	--ou-z-top: 5000;
	--ou-z-map-chrome: 5100;
	--ou-z-fab: 5200;
	--ou-z-overlay: 9000;
	--ou-z-modal: 9500;
	--ou-z-menu: 9600;
	--ou-z-tooltip: 9700;
	--ou-z-loading: 99999;

	/* Geometry hierarchy — panels 12–16 / sheets 24–32 / controls 6–8 */
	--ou-r-xs: 4px;
	--ou-r-s: 6px;
	--ou-r-md: 8px;
	--ou-r-m: 12px;
	--ou-r-panel: 16px;
	--ou-r-l: 20px;
	--ou-r-xl: 24px;
	--ou-r-2xl: 28px;
	--ou-r-3xl: 32px;
	--ou-r-pill: 9999px;
	--ou-control-radius: 6px;

	/* Window size bounds */
	--ou-sidebar-w: 360px;
	--ou-modal-max-h: 85vh;
	--ou-modal-sm: 28rem;
	--ou-modal-md: 42rem;
	--ou-modal-lg: 64rem;
	--ou-toolbar-h: 48px;

	/* Float inset (One UI reachability) */
	--ou-float: 12px;
	--ou-float-lg: 16px;

	/* Controls */
	--ou-control-h: 32px;
	--ou-control-h-lg: 36px;
	--ou-control-border: rgba(0, 0, 0, 0.1);
	--ou-control-bg: #ffffff;
	--ou-control-text: #1a1a1a;
	--ou-control-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75L6 6.25L10.5 1.75' stroke='%23606060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	/* Materials — Win11 Acrylic */
	--ou-blur: 20px;
	--ou-blur-strong: 30px;
	--ou-acrylic-saturate: 1.25;
	--ou-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.06);
	--ou-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.12);
	--ou-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.16);
	--ou-shadow-fab: 0 6px 20px rgba(0, 103, 192, 0.32);
	--ou-flyout-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 0 1px rgba(0, 0, 0, 0.08);

	/* Motion — Android 16 spring */
	--ou-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ou-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ou-dur-fast: 100ms;
	--ou-dur: 150ms;
	--ou-dur-slow: 280ms;
	--ou-press-scale: 0.95;

	/* Typography */
	--ou-font-display: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ou-font-body: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ou-fs-xs: 11px;
	--ou-fs-s: 12px;
	--ou-fs-m: 13px;
	--ou-fs-l: 14px;
	--ou-fs-xl: 18px;
	--ou-fs-2xl: 24px;
	--ou-fw-regular: 400;
	--ou-fw-semibold: 600;

	/* Android 16 status chips */
	--ou-ok: #1b7f3a;
	--ou-ok-tint: rgba(27, 127, 58, 0.12);
	--ou-warn: #c47a00;
	--ou-warn-tint: rgba(196, 122, 0, 0.14);
	--ou-crit: #d13438;
	--ou-crit-tint: rgba(209, 52, 56, 0.12);
	--ou-info: #0067c0;

	/* Win11 Cobalt accent */
	--win-accent: #0067c0;
	--win-accent-hover: #1875d0;
	--win-accent-active: #005a9e;
	--win-accent-alt: #0f6cbd;
	--win-accent-tint: rgba(0, 103, 192, 0.1);
	--ou-accent: var(--win-accent);
	--ou-accent-hover: var(--win-accent-hover);
	--ou-accent-active: var(--win-accent-active);
	--ou-accent-2: var(--win-accent-active);
	--ou-accent-soft: var(--win-accent-tint);
	--ou-accent-glow: rgba(0, 103, 192, 0.22);

	/* Light mica */
	--ou-bg-0: #f3f3f3;
	--ou-bg-1: #f9f9f9;
	--ou-bg-2: #ffffff;
	--ou-surface: rgba(255, 255, 255, 0.75);
	--ou-surface-strong: rgba(255, 255, 255, 0.82);
	--ou-surface-soft: rgba(255, 255, 255, 0.65);
	--ou-surface-solid: #ffffff;
	--ou-stroke: rgba(0, 0, 0, 0.08);
	--ou-stroke-strong: rgba(0, 0, 0, 0.12);
	--ou-stroke-glass: rgba(255, 255, 255, 0.35);
	--ou-hover-layer: rgba(0, 0, 0, 0.04);
	--ou-text-1: #1a1a1a;
	--ou-text-2: #5d5d5d;
	--ou-text-3: #8a8a8a;
	--ou-scrim: rgba(0, 0, 0, 0.35);
	--ou-input-bg: #ffffff;
	--ou-map-chrome: rgba(255, 255, 255, 0.82);
	--ou-icon-filter: none;
	--ou-top-h: 48px;
	--ou-top-offset: 12px;
	--ou-chrome-top: calc(var(--ou-top-offset) + var(--ou-top-h) + 10px);
	--ou-scrollbar-thumb: rgba(0, 0, 0, 0.2);
	--ou-scrollbar-thumb-hover: rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
	:root {
		--ou-bg-0: #1c1c1c;
		--ou-bg-1: #252525;
		--ou-bg-2: #2d2d2d;
		--ou-surface: rgba(32, 32, 32, 0.75);
		--ou-surface-strong: rgba(40, 40, 40, 0.85);
		--ou-surface-soft: rgba(32, 32, 32, 0.65);
		--ou-surface-solid: #2d2d2d;
		--ou-stroke: rgba(255, 255, 255, 0.08);
		--ou-stroke-strong: rgba(255, 255, 255, 0.14);
		--ou-stroke-glass: rgba(255, 255, 255, 0.12);
		--ou-hover-layer: rgba(255, 255, 255, 0.08);
		--ou-text-1: #ffffff;
		--ou-text-2: #c5c5c5;
		--ou-text-3: #9a9a9a;
		--win-accent: #60cdff;
		--win-accent-hover: #6cd3ff;
		--win-accent-active: #4cc2ff;
		--win-accent-alt: #60cdff;
		--win-accent-tint: rgba(96, 205, 255, 0.14);
		--ou-accent: var(--win-accent);
		--ou-accent-hover: var(--win-accent-hover);
		--ou-accent-active: var(--win-accent-active);
		--ou-accent-2: var(--win-accent-active);
		--ou-accent-soft: var(--win-accent-tint);
		--ou-accent-glow: rgba(96, 205, 255, 0.28);
		--ou-ok: #3dd68c;
		--ou-ok-tint: rgba(61, 214, 140, 0.16);
		--ou-warn: #f5a623;
		--ou-warn-tint: rgba(245, 166, 35, 0.16);
		--ou-crit: #ff6b6b;
		--ou-crit-tint: rgba(255, 107, 107, 0.16);
		--ou-scrim: rgba(0, 0, 0, 0.55);
		--ou-input-bg: #1e1e1e;
		--ou-map-chrome: rgba(45, 45, 45, 0.85);
		--ou-control-bg: #2d2d2d;
		--ou-control-text: #ffffff;
		--ou-control-border: rgba(255, 255, 255, 0.1);
		--ou-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
		--ou-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4);
		--ou-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.5);
		--ou-flyout-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
		--ou-icon-filter: invert(1) brightness(1.1);
		--ou-scrollbar-thumb: rgba(255, 255, 255, 0.2);
		--ou-scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
		--ou-control-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75L6 6.25L10.5 1.75' stroke='%23c5c5c5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
}

body.oneui-theme.oneui-light {
	--ou-bg-0: #f3f3f3;
	--ou-bg-1: #f9f9f9;
	--ou-bg-2: #ffffff;
	--ou-surface: rgba(255, 255, 255, 0.75);
	--ou-surface-strong: rgba(255, 255, 255, 0.82);
	--ou-surface-soft: rgba(255, 255, 255, 0.65);
	--ou-surface-solid: #ffffff;
	--ou-stroke: rgba(0, 0, 0, 0.08);
	--ou-stroke-strong: rgba(0, 0, 0, 0.12);
	--ou-stroke-glass: rgba(255, 255, 255, 0.35);
	--ou-hover-layer: rgba(0, 0, 0, 0.04);
	--ou-text-1: #1a1a1a;
	--ou-text-2: #5d5d5d;
	--ou-text-3: #8a8a8a;
	--win-accent: #0067c0;
	--win-accent-hover: #1875d0;
	--win-accent-active: #005a9e;
	--win-accent-tint: rgba(0, 103, 192, 0.1);
	--ou-accent: var(--win-accent);
	--ou-accent-hover: var(--win-accent-hover);
	--ou-accent-active: var(--win-accent-active);
	--ou-accent-soft: var(--win-accent-tint);
	--ou-control-bg: #ffffff;
	--ou-control-text: #1a1a1a;
	--ou-control-border: rgba(0, 0, 0, 0.1);
	--ou-icon-filter: none;
}

body.oneui-theme.oneui-dark {
	--ou-bg-0: #1c1c1c;
	--ou-bg-1: #252525;
	--ou-bg-2: #2d2d2d;
	--ou-surface: rgba(32, 32, 32, 0.75);
	--ou-surface-strong: rgba(40, 40, 40, 0.85);
	--ou-surface-soft: rgba(32, 32, 32, 0.65);
	--ou-surface-solid: #2d2d2d;
	--ou-stroke: rgba(255, 255, 255, 0.08);
	--ou-stroke-strong: rgba(255, 255, 255, 0.14);
	--ou-stroke-glass: rgba(255, 255, 255, 0.12);
	--ou-hover-layer: rgba(255, 255, 255, 0.08);
	--ou-text-1: #ffffff;
	--ou-text-2: #c5c5c5;
	--ou-text-3: #9a9a9a;
	--win-accent: #60cdff;
	--win-accent-hover: #6cd3ff;
	--win-accent-active: #4cc2ff;
	--win-accent-tint: rgba(96, 205, 255, 0.14);
	--ou-accent: var(--win-accent);
	--ou-accent-hover: var(--win-accent-hover);
	--ou-accent-active: var(--win-accent-active);
	--ou-accent-soft: var(--win-accent-tint);
	--ou-control-bg: #2d2d2d;
	--ou-control-text: #ffffff;
	--ou-control-border: rgba(255, 255, 255, 0.1);
	--ou-icon-filter: invert(1) brightness(1.1);
}

/* Acrylic / glass utilities */
.ou-glass,
.ou-acrylic {
	background: var(--ou-surface) !important;
	backdrop-filter: blur(var(--ou-blur)) saturate(var(--ou-acrylic-saturate));
	-webkit-backdrop-filter: blur(var(--ou-blur)) saturate(var(--ou-acrylic-saturate));
	border: 1px solid var(--ou-stroke);
	box-shadow: var(--ou-shadow-2);
	border-radius: var(--ou-r-xl);
}

.ou-squircle {
	border-radius: var(--ou-r-xl);
}

.ou-pill {
	border-radius: var(--ou-r-pill);
}

/* Status chips — Android 16 expressive */
.ou-chip,
body.oneui-theme .ou-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: var(--ou-r-pill);
	font-size: 11px;
	font-weight: var(--ou-fw-semibold);
	line-height: 1.4;
	white-space: nowrap;
}

.ou-chip-ok { background: var(--ou-ok-tint); color: var(--ou-ok); }
.ou-chip-warn { background: var(--ou-warn-tint); color: var(--ou-warn); }
.ou-chip-crit { background: var(--ou-crit-tint); color: var(--ou-crit); }
.ou-chip-info { background: var(--win-accent-tint); color: var(--win-accent); }

/* Scrollbars */
body.oneui-theme {
	scrollbar-width: thin;
	scrollbar-color: var(--ou-scrollbar-thumb) transparent;
}

body.oneui-theme *::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

body.oneui-theme *::-webkit-scrollbar-track {
	background: transparent;
}

body.oneui-theme *::-webkit-scrollbar-thumb {
	background: var(--ou-scrollbar-thumb);
	border-radius: 3px;
}

body.oneui-theme *::-webkit-scrollbar-thumb:hover {
	background: var(--ou-scrollbar-thumb-hover);
}

body.oneui-theme .ou-truncate,
body.oneui-theme .ui-jqgrid tr.jqgrow td,
body.oneui-theme #top_panel .user-btn span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}