/* ====================================
   TICOM CUSTOM DARK THEME
   Modern black and gray theme design
   Self-contained theme for ticom_theme app
   ==================================== */

/* ONLY apply to ticom theme - no interference with other themes */
[data-theme="ticom"] {
	/* Base Colors */
	--neutral: var(--neutral-black);
	--invert-neutral: var(--neutral-white);
	
	/* Custom Ticom Modern Dark Theme Colors */
	--ticom-primary: #6366f1;        /* Modern purple-blue accent */
	--ticom-secondary: #8b5cf6;      /* Purple accent */
	--ticom-accent: #ec4899;         /* Pink accent */
	--ticom-sidebar: #0f0f0f;        /* Very dark gray/black */
	--ticom-navbar: #1a1a1a;         /* Dark gray navbar */
	--ticom-card-bg: #262626;        /* Medium dark gray */
	--ticom-hover: #404040;          /* Hover gray */
	--ticom-light: #f5f5f5;          /* Light gray */
	--ticom-dark: #171717;           /* Very dark gray */
	
	/* Modern Gray Scale for Ticom Theme */
	--gray-700: #404040;  /* Medium gray */
	--gray-800: #262626;  /* Dark gray */
	--gray-850: #1a1a1a;  /* Darker gray */
	--gray-900: #171717;  /* Very dark gray */
	--gray-950: #0f0f0f;  /* Almost black */

	/* Type Colors */
	--text-neutral: #e8eaed;
	--text-dark: var(--gray-900);
	--text-muted: #9aa0a6;
	--text-light: #bdc1c6;
	--text-color: #e8eaed;
	--heading-color: #f8f9fa;

	/* SVG Colors */
	--icon-fill: transparent;
	--icon-stroke: #bdc1c6;

	/* Error colors */
	--error-bg: #5f2120;
	--error-border: #f28b82;

	/* Layout Colors */
	--bg-color: var(--gray-950);
	--fg-color: var(--ticom-card-bg);
	--subtle-accent: var(--gray-700);
	--subtle-fg: var(--gray-800);
	--navbar-bg: var(--ticom-navbar);
	--fg-hover-color: var(--ticom-hover);
	--card-bg: var(--ticom-card-bg);
	--disabled-text-color: #5f6368;
	--disabled-control-bg: var(--gray-800);
	--control-bg: var(--gray-800);
	--control-bg-on-gray: var(--gray-800);
	--awesomebar-focus-bg: var(--control-bg);
	--awesomplete-hover-bg: var(--ticom-hover);
	--modal-bg: var(--ticom-card-bg);
	--toast-bg: var(--modal-bg);
	--popover-bg: var(--ticom-card-bg);

	/* Button Colors */
	--btn-default-bg: var(--gray-800);
	--btn-default-hover-bg: var(--ticom-hover);
	--btn-primary: var(--ticom-primary);
	--primary: var(--ticom-primary);

	/* Border Colors */
	--border-primary: #dadce0;
	--border-color: var(--gray-700);
	--dark-border-color: var(--gray-600);
	--table-border-color: var(--border-color);

	/* Background Text Color Pairs with Ticom colors */
	--bg-blue: var(--ticom-primary);
	--bg-light-blue: var(--ticom-primary);
	--bg-dark-blue: #1557b0;
	--bg-green: var(--ticom-secondary);
	--bg-yellow: #fdd663;
	--bg-orange: #ff8a65;
	--bg-red: var(--ticom-accent);
	--bg-gray: #5f6368;
	--bg-grey: #5f6368;
	--bg-darkgrey: #3c4043;
	--bg-dark-gray: #3c4043;
	--bg-light-gray: var(--gray-700);
	--bg-purple: #ab47bc;
	--bg-pink: #ec407a;
	--bg-cyan: #26c6da;

	/* Text on colored backgrounds */
	--text-on-blue: #ffffff;
	--text-on-light-blue: #ffffff;
	--text-on-dark-blue: #ffffff;
	--text-on-green: #ffffff;
	--text-on-yellow: #1f1f1f;
	--text-on-orange: #ffffff;
	--text-on-red: #ffffff;
	--text-on-gray: #ffffff;
	--text-on-grey: #ffffff;
	--text-on-darkgrey: #ffffff;
	--text-on-dark-gray: #ffffff;
	--text-on-light-gray: #ffffff;
	--text-on-purple: #ffffff;
	--text-on-pink: #ffffff;
	--text-on-cyan: #ffffff;

	/* Alert colors */
	--alert-text-danger: #f28b82;
	--alert-text-warning: #fdd663;
	--alert-text-info: #8ab4f8;
	--alert-text-success: #81c995;
	--alert-bg-danger: #5f2120;
	--alert-bg-warning: #3d2f00;
	--alert-bg-info: #1e3a8a;
	--alert-bg-success: #0d5016;

	/* Sidebar */
	--sidebar-select-color: var(--ticom-sidebar);

	/* Scrollbar */
	--scrollbar-thumb-color: #5f6368;
	--scrollbar-track-color: var(--gray-700);

	/* Timeline */
	--timeline-badge-color: #5f6368;
	--timeline-badge-bg: var(--ticom-card-bg);

	/* Shadows and highlights */
	--shadow-inset: var(--fg-color);
	--highlight-color: var(--ticom-hover);
	--yellow-highlight-color: #3d2f00;

	/* Button group */
	--btn-group-border-color: var(--gray-700);

	/* Placeholder */
	--placeholder-color: #5f6368;

	/* Focus and selection */
	--highlight-shadow: 1px 1px 10px rgba(26, 115, 232, 0.3), 0px 0px 4px rgba(26, 115, 232, 0.5);
	--shadow-base: 0px 4px 8px rgba(26, 115, 232, 0.1), 0px 0px 4px rgba(26, 115, 232, 0.15);

	/* Diff colors */
	--diff-added: #0d5016;
	--diff-removed: #5f2120;

	/* Input */
	--input-disabled-bg: none;

	/* Checkbox */
	--checkbox-color: var(--neutral-white);
	--checkbox-gradient: linear-gradient(
		180deg,
		var(--ticom-primary) -124.51%,
		var(--ticom-primary) 100%
	);
	--checkbox-disabled-gradient: linear-gradient(
		180deg,
		#5f6368 -124.51%,
		#5f6368 100%
	);
	--checkbox-focus-shadow: 0 0 0 2px rgba(26, 115, 232, 0.3);

	/* Switch */
	--switch-bg: #5f6368;

	/* Date picker */
	--date-active-text: #ffffff;
	--date-active-bg: var(--ticom-primary);
	--date-range-bg: var(--subtle-fg);

	/* Rating */
	--star-fill: #5f6368;

	/* Skeleton */
	--skeleton-bg: var(--gray-800);

	/* Navigation arrows */
	--right-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	--left-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'></path></svg>");

	/* Set color scheme */
	color-scheme: dark;

	/* Custom Ticom Enhancements */
	.page-title .sidebar-toggle-btn {
		--icon-stroke: #bdc1c6;
	}

	/* Enhanced checkbox styling */
	input[type="checkbox"] {
		&:checked {
			background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"), var(--checkbox-gradient);
		}
		&.disabled-selected,
		&:disabled:checked {
			background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"), var(--checkbox-disabled-gradient);
		}
		&.disabled-deselected {
			border: none;
			background-color: #5f6368;
		}
	}

	/* Enhanced grid styling */
	.grid-body .editable-row {
		--control-bg: var(--ticom-card-bg);
		--input-disabled-bg: var(--gray-800);
	}

	/* Enhanced card styling */
	.frappe-card {
		background-color: var(--ticom-card-bg);
		border: 1px solid var(--border-color);
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		
		.btn-default {
			background-color: var(--control-bg);
			border: 1px solid var(--border-color);
			color: var(--text-color);

			&:hover {
				background-color: var(--fg-hover-color);
				border-color: var(--ticom-primary);
			}
		}
	}
	
	/* Ensure theme switcher modal remains unaffected */
	.modal.theme-switcher {
		background-color: inherit !important;
		color: inherit !important;
	}
	
	.modal.theme-switcher .modal-content {
		background-color: inherit !important;
		color: inherit !important;
		border: inherit !important;
	}
	
	.modal.theme-switcher * {
		background-color: inherit !important;
		color: inherit !important;
	}
	
	/* Special handling for theme switcher modal backdrop */
	.modal.theme-switcher + .modal-backdrop {
		background-color: rgba(0, 0, 0, 0.4) !important;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Enhanced navbar */
	.navbar {
		background-color: var(--ticom-navbar) !important;
		border-bottom: 1px solid var(--border-color);
	}

	/* Enhanced sidebar */
	.layout-side-section {
		background-color: var(--ticom-sidebar);
		border-right: 1px solid var(--border-color);
	}

	/* Print format */
	.print-format {
		--text-color: var(--gray-900);
		--border-color: var(--gray-100);
	}

	/* Text editor */
	.ql-editor {
		color: var(--text-color);
		&.read-mode {
			span:not(.mention),
			p,
			u,
			strong {
				background-color: inherit !important;
				color: inherit !important;
			}
		}
	}
	
	.comment-input-wrapper .ql-editor.ql-blank::before {
		color: var(--text-muted);
	}

	/* Charts styling */
	.chart-container {
		--charts-label-color: #bdc1c6;
		--charts-axis-line-color: var(--subtle-fg);
		--charts-stroke-width: 5px;
		--charts-dataset-circle-stroke: #ffffff;
		--charts-dataset-circle-stroke-width: var(--charts-stroke-width);
		--charts-tooltip-title: var(--charts-label-color);
		--charts-tooltip-label: var(--charts-label-color);
		--charts-tooltip-value: white;
		--charts-tooltip-bg: var(--ticom-card-bg);
		--charts-legend-label: var(--charts-label-color);
	}

	/* Heatmap fix */
	.heatmap-chart {
		g > rect[fill="#ebedf0"] {
			fill: var(--gray-700);
		}
	}

	/* Rating styling */
	.rating {
		--star-fill: #5f6368;
		.star-hover {
			--star-fill: var(--ticom-primary);
		}
	}

	/* Selection styling */
	::selection {
		color: var(--text-color);
		background: rgba(26, 115, 232, 0.3);
	}

	/* Indicators */
	$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple, light-blue;
	@each $color in $indicator-colors {
		.indicator {
			--indicator-dot-#{"" + $color}: var(--bg-#{$color});
		}
	}

	/* Custom Ticom specific styles */
	.ticom-highlight {
		background-color: rgba(26, 115, 232, 0.15);
		border-left: 3px solid var(--ticom-primary);
		padding: 0.5rem;
	}

	.ticom-success {
		background-color: rgba(52, 168, 83, 0.15);
		color: var(--ticom-secondary);
	}

	.ticom-warning {
		background-color: rgba(251, 188, 5, 0.15);
		color: #fdd663;
	}

	.ticom-danger {
		background-color: rgba(234, 67, 53, 0.15);
		color: var(--ticom-accent);
	}

	/* Enhanced buttons */
	.btn-primary {
		background-color: var(--ticom-primary);
		border-color: var(--ticom-primary);
		color: white;
		
		&:hover {
			background-color: #1557b0;
			border-color: #1557b0;
		}
	}

	.btn-success {
		background-color: var(--ticom-secondary);
		border-color: var(--ticom-secondary);
		
		&:hover {
			background-color: #2d7d32;
			border-color: #2d7d32;
		}
	}

	.btn-danger {
		background-color: var(--ticom-accent);
		border-color: var(--ticom-accent);
		
		&:hover {
			background-color: #d93025;
			border-color: #d93025;
		}
	}
}