@import 'tailwindcss' source('../');
@import '@angular/cdk/overlay-prebuilt.css';
/* Legacy toast system (deprecated) + Sonner relies on component classes */
@import './assets/styles/toast.css';

@plugin "@midudev/tailwind-animations";
@plugin "@tailwindcss/typography";
@plugin "daisyui" {
	exclude: rootscrollgutter, rootscrolllock, scrollbar;
	themes: false;
}

@plugin "daisyui/theme" {
	name: 'sixbell_telco__light';
	default: true;
	prefersdark: false;
	color-scheme: light;

	/* Daisy UI Colors */
	--color-base-100: oklch(96.65% 0.0045 258.32);
	--color-base-200: oklch(100% 0 0);
	--color-base-300: oklch(92.88% 0.0126 255.51);
	--color-base-content: oklch(13.49% 0.0024 286.07);
	--color-primary: oklch(65.64% 0.1155 219.3);
	--color-primary-content: oklch(100% 0 0);
	--color-secondary: oklch(86.57% 0.0064 255.48);
	--color-secondary-content: oklch(13.49% 0.0024 286.07);
	--color-accent: oklch(70.45% 0.1926 39.23);
	--color-accent-content: oklch(13.49% 0.0024 286.07);
	--color-neutral: oklch(92.08% 0.0063 255.48);
	--color-neutral-content: oklch(13.49% 0.0024 286.07);
	--color-info: oklch(55.86% 0.1907 256);
	--color-info-content: oklch(100% 0 0);
	--color-success: oklch(73.79% 0.2409 140.89);
	--color-success-content: oklch(36.22% 0.1147 140.02);
	--color-warning: oklch(85.44% 0.1839 108.37);
	--color-warning-content: oklch(46.41% 0.0998 109);
	--color-error: oklch(65.92% 0.2275 29.05);
	--color-error-content: oklch(25.91% 0.0904 29.25);

	/* Daisy UI  Properties */
	/* border radius */
	--radius-selector: 0.5rem; /* For small sized components like checkbox, toggle, badge, etc. */
	--radius-field: 0.25rem; /* For medium sized components like button, input, select, tab, etc. */
	--radius-box: 0.5rem; /* For large sized components like card, modal, alert, etc. */

	/* base sizes */
	--size-selector: 0.25rem;
	--size-field: 0.25rem;

	/* border size */
	--border: 1px;

	/* effects */
	--depth: 0;
	--noise: 0;

	/* Custom Colors */
	--color-base-50: color-mix(in oklab, var(--color-base-content) 10%, transparent);
	--color-primary-light: color-mix(in oklch, var(--color-primary) 75%, #fff);
	--color-primary-gradient: color-mix(in oklch, var(--color-primary) 60%, #121212);
	--color-primary-gradient-content: oklch(100% 0 0);
	--color-secondary-gradient: color-mix(in oklch, var(--color-secondary) 60%, #121212);
	--color-secondary-gradient-content: oklch(13.49% 0.0024 286.07);
	--color-tertiary-gradient: color-mix(in oklch, var(--color-tertiary) 60%, #121212);
	--color-tertiary-gradient-content: oklch(13.49% 0.0024 286.07);
	--color-accent-gradient: color-mix(in oklch, var(--color-accent) 60%, #121212);
	--color-accent-gradient-content: oklch(100% 0 0);
	--color-tertiary: oklch(72.52% 0 0);
	--color-tertiary-content: oklch(13.49% 0.0024 286.07);
	--color-neutral-secondary: oklch(73.97% 0.0115 280.4);
	--color-neutral-secondary-content: oklch(100% 0 0);
	--color-neutral-tertiary: oklch(100% 0 0);
	--color-neutral-tertiary-content: oklch(73.97% 0.0115 280.4);
	--color-base-placeholder: oklch(51.6% 0.0073 255.51);
	--color-backdrop: oklch(0% 0 0/ 0.4);

	/* Shadow color tokens */
	--color-shadow-primary: oklch(0.8975 0 0);
	--color-shadow-backdrop: oklch(0% 0 0/ 0.25);

	--color-metrics-increase: oklch(74.59% 0.1812 152.33);
	--color-metrics-decrease: oklch(63.07% 0.194 29.44);
	--color-metrics-neutral: oklch(62.99% 0.0152 202.37);

	--color-metrics-intensity-highest: oklch(65.64% 0.1155 219.3);
	--color-metrics-intensity-high: oklch(68.62% 0.0925 226.08);
	--color-metrics-intensity-medium: oklch(68.62% 0.0925 226.08);
	--color-metrics-intensity-low: oklch(76.18% 0.0656 213.66);
	--color-metrics-intensity-lowest: oklch(78% 0.0473 211.88);

	--color-scroll-thumb: oklch(75% 0 0);
}

@plugin "daisyui/theme" {
	name: 'sixbell_telco__dark';
	default: false;
	prefersdark: true;
	color-scheme: dark;

	/* Daisy UI Colors */
	--color-base-100: oklch(18.22% 0 0);
	--color-base-200: oklch(23.5% 0 0);
	--color-base-300: oklch(28.5% 0 0);
	--color-base-content: oklch(100% 0 0);
	--color-primary: oklch(65.64% 0.1155 219.3);
	--color-primary-content: oklch(100% 0 0);
	--color-secondary: oklch(48.72% 0.0161 276.78);
	--color-secondary-content: oklch(100% 0 0);
	--color-accent: oklch(70.45% 0.1926 39.23);
	--color-accent-content: oklch(23.5% 0 0);
	--color-neutral: oklch(49.26% 0 0);
	--color-neutral-content: oklch(100% 0 0);
	--color-info: oklch(55.86% 0.1907 256);
	--color-info-content: oklch(100% 0 0);
	--color-success: oklch(73.79% 0.2409 140.89);
	--color-success-content: oklch(36.22% 0.1147 140.02);
	--color-warning: oklch(85.44% 0.1839 108.37);
	--color-warning-content: oklch(46.41% 0.0998 109);
	--color-error: oklch(65.92% 0.2275 29.05);
	--color-error-content: oklch(25.91% 0.0904 29.25);

	/* border radius */
	--radius-selector: 0.5rem;
	--radius-field: 0.25rem;
	--radius-box: 0.5rem;

	/* base sizes */
	--size-selector: 0.25rem;
	--size-field: 0.25rem;

	/* border size */
	--border: 1px;

	/* effects */
	--depth: 0;
	--noise: 0;

	/* Custom Colors */
	--color-base-50: color-mix(in oklab, var(--color-base-content) 10%, transparent);
	--color-primary-light: color-mix(in oklch, var(--color-primary) 75%, #000);
	--color-primary-gradient: color-mix(in oklch, var(--color-primary) 60%, #121212);
	--color-primary-gradient-content: oklch(100% 0 0);
	--color-secondary-gradient: color-mix(in oklch, var(--color-secondary) 60%, #121212);
	--color-secondary-gradient-content: oklch(100% 0 0);
	--color-tertiary-gradient: color-mix(in oklch, var(--color-tertiary) 60%, #121212);
	--color-tertiary-gradient-content: oklch(100% 0 0);
	--color-accent-gradient: color-mix(in oklch, var(--color-accent) 60%, #121212);
	--color-accent-gradient-content: oklch(100% 0 0);
	--color-tertiary: oklch(72.52% 0 0);
	--color-tertiary-content: oklch(13.49% 0.0024 286.07);
	--color-neutral-secondary: oklch(73.97% 0.0115 280.4);
	--color-neutral-secondary-content: oklch(100% 0 0);
	--color-neutral-tertiary: oklch(100% 0 0);
	--color-neutral-tertiary-content: oklch(73.97% 0.0115 280.4);
	--color-base-placeholder: oklch(51.6% 0.0073 255.51);
	--color-backdrop: oklch(0% 0 0/ 0.4);

	/* Shadow color tokens */
	--color-shadow-primary: oklch(0 0 0);
	--color-shadow-backdrop: oklch(0% 0 0/ 0.25);

	--color-metrics-increase: oklch(74.59% 0.1812 152.33);
	--color-metrics-decrease: oklch(63.07% 0.194 29.44);
	--color-metrics-neutral: oklch(62.99% 0.0152 202.37);

	--color-metrics-intensity-highest: oklch(65.64% 0.1155 219.3);
	--color-metrics-intensity-high: oklch(68.62% 0.0925 226.08);
	--color-metrics-intensity-medium: oklch(68.62% 0.0925 226.08);
	--color-metrics-intensity-low: oklch(76.18% 0.0656 213.66);
	--color-metrics-intensity-lowest: oklch(78% 0.0473 211.88);

	--color-scroll-thumb: oklch(35% 0 0);
}

@theme {
	/* Color tokens registered for Tailwind utilities; values provided in theme plugin blocks */
	--color-base-50: color-mix(in oklab, var(--color-base-content) 10%, transparent);
	--color-primary-light: color-mix(in oklch, var(--color-primary) 75%, #fff);
	--color-primary-gradient: color-mix(in oklch, var(--color-primary) 60%, #121212);
	--color-primary-gradient-content: oklch(100% 0 0);
	--color-secondary-gradient: color-mix(in oklch, var(--color-secondary) 60%, #121212);
	--color-secondary-gradient-content: oklch(13.49% 0.0024 286.07);
	--color-tertiary-gradient: color-mix(in oklch, var(--color-tertiary) 60%, #121212);
	--color-tertiary-gradient-content: oklch(13.49% 0.0024 286.07);
	--color-accent-gradient: color-mix(in oklch, var(--color-accent) 60%, #121212);
	--color-accent-gradient-content: oklch(100% 0 0);
	--color-tertiary: oklch(72.52% 0 0);
	--color-tertiary-content: oklch(13.49% 0.0024 286.07);
	--color-neutral-secondary: oklch(73.97% 0.0115 280.4);
	--color-neutral-secondary-content: oklch(100% 0 0);
	--color-neutral-tertiary: oklch(100% 0 0);
	--color-neutral-tertiary-content: oklch(73.97% 0.0115 280.4);
	--color-base-placeholder: oklch(51.6% 0.0073 255.51);
	--color-backdrop: oklch(0% 0 0/ 0.4);
	--color-metrics-increase: oklch(74.59% 0.1812 152.33);
	--color-metrics-decrease: oklch(63.07% 0.194 29.44);
	--color-metrics-neutral: oklch(62.99% 0.0152 202.37);
	--color-metrics-intensity-highest: oklch(65.64% 0.1155 219.3);
	--color-metrics-intensity-high: oklch(68.62% 0.0925 226.08);
	--color-metrics-intensity-medium: oklch(68.62% 0.0925 226.08);
	--color-metrics-intensity-low: oklch(76.18% 0.0656 213.66);
	--color-metrics-intensity-lowest: oklch(78% 0.0473 211.88);
	--color-scroll-thumb: oklch(75% 0 0);
	--color-shadow-primary: oklch(0.8975 0 0);
	--color-shadow-backdrop: oklch(0% 0 0/ 0.25);

	/* Non-color design tokens (kept for convenience) */
	--font-poppins: Poppins, sans-serif;
	--font-heading: Poppins, sans-serif;
	--font-body: Poppins, sans-serif;
	--shadow-main:
		var(--color-shadow-primary) 0px 0px 0px 0px, var(--color-shadow-primary) 0px 0px 0px 0px, var(--color-shadow-primary) 0px 0px 0px 0px,
		var(--color-shadow-primary) 0px 0px 0px 0px, var(--color-shadow-primary) 0px 4px 6px -1px, var(--color-shadow-primary) 0px 2px 4px -2px;
	--shadow-main-lg: 0 4px 12px var(--color-shadow-primary);
	--shadow-backdrop: 0px 25px 50px -12px var(--color-shadow-backdrop);
	--font-weight-inherit: inherit;
	--ease-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-ease-in-and-out-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);
	--animate-slide-in: slideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	--animate-slide-out: slideOut 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	--animate-toast-slide-out: toastSlideOut 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	--animate-fade-in: fadeIn 1s;
	--animate-fade-out: fadeOut 1s;
	--animate-wave: wave 1s linear infinite;
	--animate-enter: enter 0.15s ease 0s 1 normal none;
	--animate-exit: exit 0.15s ease 0s 1 normal none;
	--animate-morph-in: morphIn 0.2s ease-out;
	--animate-morph-out: morphOut 0.2s ease-in;
	--text-xxs: 0.625rem;
	--text-xxs--line-height: 0.625rem;

	@keyframes wave {
		0%,
		100% {
			transform: scaleY(0);
		}
		50% {
			transform: scaleY(1);
		}
	}

	@keyframes enter {
		0% {
			opacity: 0;
			transform: scale(0.95);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes exit {
		0% {
			opacity: 1;
			transform: scale(1);
		}
		100% {
			opacity: 0;
			transform: scale(0.95);
		}
	}
}

@layer base {
	html {
		scrollbar-color: var(--color-scroll-thumb);
	}
	*,
	*::before,
	*::after {
		/* Firefox */
		scrollbar-width: thin;
		scrollbar-color: var(--color-scroll-thumb);
	}

	/* Chrome / Safari / Edge */
	*::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}
	*::-webkit-scrollbar-track {
		background: transparent;
	}
	*::-webkit-scrollbar-thumb {
		background-color: var(--color-scroll-thumb);
		border: 0;
		border-radius: 6px;
		background-clip: padding-box;
	}
	*::-webkit-scrollbar-corner {
		background: transparent;
	}

	body {
		font-size: 14px;
	}

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

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

	input[type='time']::-webkit-calendar-picker-indicator {
		background: none;
	}

	@media (prefers-reduced-motion: reduce) {
		* {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition: none;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}

	@keyframes slideIn {
		0% {
			transform: translateY(400px);
			animation-timing-function: ease-out;
		}
		60% {
			transform: translateY(-30px);
			animation-timing-function: ease-in;
		}
		80% {
			transform: translateY(10px);
			animation-timing-function: ease-out;
		}
		100% {
			transform: translateY(0px);
			animation-timing-function: ease-in;
		}
	}

	@keyframes slideOut {
		0% {
			transform: translateY(0px);
			animation-timing-function: ease-in;
			opacity: 1;
		}
		60% {
			transform: translateY(10px);
			animation-timing-function: ease-out;
			opacity: 0.4;
		}
		100% {
			transform: translateY(400px);
			animation-timing-function: ease-in;
			opacity: 0;
		}
	}

	@keyframes toastSlideOut {
		0% {
			position: absolute;
			scale: 1;
			z-index: 13;
			margin: 0;
			opacity: 1;
		}
		50% {
			position: absolute;
			scale: 1;
			z-index: 11;
			margin: 0;
			opacity: 0.8;
		}
		80% {
			position: absolute;
			scale: 1;
			z-index: 11;
			margin: 0;
			opacity: 0.4;
		}
		100% {
			bottom: 0;
			position: absolute;
			scale: 1;
			z-index: 11;
			margin: 0;
			opacity: 0;
		}
	}

	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	/* Morphing animations for dropdown view transitions */
	@keyframes morphIn {
		0% {
			opacity: 0;
			transform: scale(0.95);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes morphOut {
		0% {
			opacity: 1;
			transform: scale(1);
		}
		100% {
			opacity: 0;
			transform: scale(0.95);
		}
	}

	.animate-wave {
		animation-delay: calc(1s - var(--i));
	}

	calendar-range {
		svg {
			height: 16px;
			width: 16px;
			fill: none;
			stroke: currentColor;
			stroke-width: 1.5;
		}

		path {
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		&::part(previous) {
			@apply btn btn-ghost btn-sm btn-square;
		}

		&::part(next) {
			@apply btn btn-ghost btn-sm btn-square;
		}
	}

	calendar-month {
		--color-accent: var(--color-primary);
		--color-text-on-accent: var(--color-primary-content);

		@apply font-body;
		&::part(button) {
			@apply rounded-selector transition-colors duration-150 ease-linear;
		}

		&::part(range-inner) {
			@apply bg-primary-light text-primary-content rounded-none;
		}

		&::part(range-start) {
			@apply rounded-tr-none rounded-br-none;
		}

		&::part(range-end) {
			@apply rounded-tl-none rounded-bl-none;
		}

		&::part(range-start range-end) {
			@apply rounded-selector;
		}

		&::part(today) {
			color: var(--color-primary);
		}

		&::part(today selected),
		&::part(today):focus-visible {
			@apply text-primary-content;
		}

		/* Hover outline only for non-selected day buttons; selected part overrides this */
		&::part(button):hover {
			@apply bg-base-50 text-base-content;
		}
		&::part(button selected):hover {
			@apply bg-primary text-primary-content;
		}
	}

	calendar-date {
		&::part(previous) {
			@apply btn btn-ghost btn-sm btn-square;
		}

		&::part(next) {
			@apply btn btn-ghost btn-sm btn-square;
		}
	}
}

@layer components {
	.btn-tertiary {
		--btn-color: var(--color-tertiary);
		--btn-fg: var(--color-tertiary-content);
	}

	.badge-tertiary {
		--badge-color: var(--color-tertiary);
		--badge-fg: var(--color-tertiary-content);
	}

	.btn-soft:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) {
		--btn-shadow: '';
		--btn-fg: var(--btn-color, var(--color-base-content));
		--btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 12%, var(--color-base-100));
		--btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 14%, var(--color-base-100));
		--btn-noise: none;
	}

	.badge.badge-soft {
		color: var(--badge-color, var(--color-base-content));
		background-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 12%, var(--color-base-100));
		border-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 14%, var(--color-base-100));
		background-image: none;
		box-shadow: none;
	}

	.checkbox-tertiary {
		@apply text-tertiary-content;
		--input-color: var(--color-tertiary);
	}

	.radio-tertiary {
		--input-color: var(--color-tertiary);
	}

	.input-tertiary {
		&,
		&:focus,
		&:focus-within {
			--input-color: var(--color-tertiary);
		}
	}

	.textarea-tertiary {
		&,
		&:focus,
		&:focus-within {
			--input-color: var(--color-tertiary);
		}
	}

	.select-tertiary {
		&,
		&:focus,
		&:focus-within {
			--input-color: var(--color-tertiary);
		}
	}

	.link-tertiary {
		@apply text-tertiary;

		@media (hover: hover) {
			&:hover {
				color: color-mix(in oklab, var(--color-tertiary) 80%, #000);
			}
		}
	}

	.tooltip-tertiary {
		--tt-bg: var(--color-tertiary);

		> .tooltip-content,
		&[data-tip]:before {
			@apply text-tertiary-content;
		}
	}

	.range-tertiary {
		@apply text-tertiary;
		--range-thumb: var(--color-tertiary-content);
	}

	.toggle-tertiary {
		&:checked,
		&[aria-checked='true'] {
			--input-color: var(--color-tertiary);
		}
	}

	st-icon {
		@apply inline-flex items-center justify-center align-top;
	}

	st-input-content {
		@apply inline-flex items-center align-top;
	}
}

@layer utilities {
	.input {
		&:has(> input[disabled]),
		&:is(:disabled, [disabled]) {
			@apply border-base-300 bg-base-300 placeholder-base-content text-base-content/40 cursor-not-allowed;
			box-shadow: none;
		}
	}

	.select {
		&:has(> select[disabled]),
		&:is(:disabled, [disabled]) {
			@apply border-base-300 bg-base-300 placeholder-base-content text-base-content/40 cursor-not-allowed;
		}
	}

	.hide-x-scrollbar {
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE 10+ */
	}
	.hide-x-scrollbar::-webkit-scrollbar {
		height: 0 !important; /* Chrome/Safari */
	}

	/* Auto-hide/show scrollbars on hover (overlay-like, no reserved gutter) */
	.scrollbar-x-auto-hide {
		overflow-x: auto;
		scrollbar-gutter: auto; /* don't reserve space */
		-ms-overflow-style: none; /* IE/Edge */
		scrollbar-width: thin; /* Firefox: keep thickness constant */
		scrollbar-color: transparent transparent; /* invisible by default */
	}
	/* WebKit: keep thickness constant; toggle visibility via color */
	.scrollbar-x-auto-hide::-webkit-scrollbar {
		height: 8px;
		background: transparent;
	}
	.scrollbar-x-auto-hide::-webkit-scrollbar-thumb {
		background-color: transparent;
		border-radius: 4px;
	}
	.scrollbar-x-auto-hide:hover {
		scrollbar-color: var(--color-scroll-thumb) transparent;
	}
	.scrollbar-x-auto-hide:hover::-webkit-scrollbar-thumb {
		background-color: var(--color-scroll-thumb);
	}

	.scrollbar-y-auto-hide {
		overflow-y: auto;
		scrollbar-gutter: auto; /* don't reserve space */
		-ms-overflow-style: none; /* IE/Edge */
		scrollbar-width: thin; /* Firefox */
		scrollbar-color: transparent transparent; /* invisible by default */
	}
	.scrollbar-y-auto-hide::-webkit-scrollbar {
		width: 8px;
		background: transparent;
	}
	.scrollbar-y-auto-hide::-webkit-scrollbar-thumb {
		background-color: transparent;
		border-radius: 4px;
	}
	.scrollbar-y-auto-hide:hover {
		scrollbar-color: var(--color-scroll-thumb) transparent;
	}
	.scrollbar-y-auto-hide:hover::-webkit-scrollbar-thumb {
		background-color: var(--color-scroll-thumb);
	}

	/* Both axes */
	.scrollbar-auto-hide {
		overflow: auto;
		scrollbar-gutter: auto;
		-ms-overflow-style: none;
		scrollbar-width: thin; /* Firefox */
		scrollbar-color: transparent transparent; /* invisible by default */
	}
	.scrollbar-auto-hide::-webkit-scrollbar {
		width: 8px;
		height: 8px;
		background: transparent;
	}
	.scrollbar-auto-hide::-webkit-scrollbar-thumb {
		background-color: transparent;
		border-radius: 4px;
	}
	.scrollbar-auto-hide:hover {
		scrollbar-color: var(--color-scroll-thumb) transparent;
	}
	.scrollbar-auto-hide:hover::-webkit-scrollbar-thumb {
		background-color: var(--color-scroll-thumb);
	}
}