/**
 * Gampil POS — Default Theme Stylesheet (Phase 3).
 * Defines semantic design tokens, color mode values (Dark/Light), legacy alias bridges,
 * and theme-specific visual decisions for the Default theme.
 * Scoped under #ada-pos-app[data-pos-theme="default"].
 */

/* 1. DEFAULT THEME TOKENS — Dark baseline */
#ada-pos-app[data-pos-theme="default"] {
	/* Surfaces */
	--pos-bg: #090d16;
	--pos-bg-gradient: radial-gradient(circle at 50% 0%, #1e293b 0%, #090d16 75%);
	--pos-surface: rgba(15, 23, 42, 0.85);
	--pos-surface-muted: rgba(30, 41, 59, 0.7);
	--pos-surface-header: rgba(15, 23, 42, 0.75);
	--pos-control-bg: #1e293b;
	--pos-control-bg-hover: #334155;
	--pos-input-bg: #0f172a;
	--pos-surface-elevated: #0f172a;
	--pos-surface-section: rgba(30, 41, 59, 0.5);
	
	/* Typography colors */
	--pos-text-primary: #f8fafc;
	--pos-text-secondary: #cbd5e1;
	--pos-text-muted: #94a3b8;
	--pos-text-control: #ffffff;
	
	/* Borders and elevation */
	--pos-border: #334155;
	--pos-border-subtle: rgba(255, 255, 255, 0.08);
	--pos-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
	--pos-shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.7);
	--pos-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
	
	/* Actions and semantic states */
	--pos-primary: #10b981;
	--pos-primary-hover: #059669;
	--pos-text-on-primary: #ffffff;
	--pos-warning: #f59e0b;
	--pos-warning-active: #d97706;
	--pos-info: #3b82f6;
	--pos-demographic-pink: #ec4899;
	--pos-demographic-purple: #8b5cf6;
	--pos-danger: #ef4444;
	
	/* Controls and focus */
	--pos-control-height: 52px;
	--pos-control-radius: 14px;
	--pos-success: #10b981;
	--pos-success-emphasis: #34d399;
	--pos-text-inverse: #ffffff;
	--pos-control-border: var(--pos-border);
	--pos-control-focus: #3b82f6;
	--pos-focus-ring: #60a5fa;

	/* Shape */
	--pos-radius-xs: 4px;
	--pos-radius-sm: 8px;
	--pos-radius-md: 12px;
	--pos-radius-lg: 16px;
	--pos-radius-xl: 20px;
	--pos-radius-modal: 24px;
	--pos-radius-image: 10px;
	--pos-radius-label: 6px;

	/* Spacing */
	--pos-space-1: 2px;
	--pos-space-2: 4px;
	--pos-space-3: 6px;
	--pos-space-4: 8px;
	--pos-space-5: 12px;
	--pos-space-6: 16px;

	/* Typography */
	--pos-font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pos-font-size-xs: 10px;
	--pos-font-size-sm: 11px;
	--pos-font-size-md: 12px;
	--pos-font-size-lg: 13px;
	--pos-font-size-xl: 14px;
	--pos-font-size-title: 16px;

	/* Motion */
	--pos-transition-fast: 0.15s;
	--pos-transition-normal: 0.2s;
	--pos-transition-slow: 0.3s;

	/* Static presentation variables */
	--pos-admin-shortcut-bg: #2563eb;
	--pos-history-message-text: #64748b;
}

/* 2. DEFAULT THEME TOKENS — Light mode overrides */
#ada-pos-app[data-pos-theme="default"][data-pos-color-mode="light"] {
	--pos-bg: #f8fafc;
	--pos-bg-gradient: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
	--pos-surface: #ffffff;
	--pos-surface-muted: #f8fafc;
	--pos-surface-header: rgba(255, 255, 255, 0.95);
	--pos-control-bg: #ffffff;
	--pos-control-bg-hover: #f1f5f9;
	--pos-input-bg: #ffffff;
	--pos-surface-elevated: #ffffff;
	--pos-surface-section: #f1f5f9;
	
	--pos-text-primary: #0f172a;
	--pos-text-secondary: #334155;
	--pos-text-muted: #64748b;
	--pos-text-control: #0f172a;
	
	--pos-border: #cbd5e1;
	--pos-border-subtle: rgba(0, 0, 0, 0.08);
	--pos-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
	--pos-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
	
	--pos-primary: #10b981;
	--pos-primary-hover: #059669;
	--pos-text-on-primary: #ffffff;
}

/* 3. LEGACY COMPATIBILITY TOKEN BRIDGE */
#ada-pos-app[data-pos-theme="default"] {
	--bg-app: var(--pos-bg);
	--bg-body-radial: var(--pos-bg-gradient);
	--bg-card: var(--pos-surface);
	--bg-step: var(--pos-surface-muted);
	--bg-header: var(--pos-surface-header);
	--bg-btn: var(--pos-control-bg);
	--bg-btn-hover: var(--pos-control-bg-hover);
	--bg-input: var(--pos-input-bg);
	--bg-modal: var(--pos-surface-elevated);
	--bg-modal-section: var(--pos-surface-section);
	--text-primary: var(--pos-text-primary);
	--text-secondary: var(--pos-text-secondary);
	--text-muted: var(--pos-text-muted);
	--text-btn: var(--pos-text-control);
	--border-color: var(--pos-border);
	--border-light: var(--pos-border-subtle);
	--box-shadow-card: var(--pos-shadow-md);
	--box-shadow-modal: var(--pos-shadow-lg);
	--accent-primary: var(--pos-primary);
	--accent-primary-hover: var(--pos-primary-hover);
	--accent-text: var(--pos-text-on-primary);
	--accent-variant: var(--pos-warning);
	--accent-variant-active: var(--pos-warning-active);
	--accent-blue: var(--pos-info);
	--accent-pink: var(--pos-demographic-pink);
	--accent-purple: var(--pos-demographic-purple);
	--accent-danger: var(--pos-danger);
	--btn-height: var(--pos-control-height);
	--btn-radius: var(--pos-control-radius);
}

/* 4. DEFAULT THEME VISUAL OVERRIDES & LIGHT MODE HIGHLIGHTS */
#ada-pos-app[data-pos-color-mode="light"] .btn-variant .sku-price,
#ada-pos-app[data-pos-color-mode="light"] .total-amount,
#ada-pos-app[data-pos-color-mode="light"] .setoran-amount {
	color: #047857;
}

#ada-pos-app[data-pos-color-mode="light"] .site-title-badge,
#ada-pos-app[data-pos-color-mode="light"] .input-cash,
#ada-pos-app[data-pos-color-mode="light"] .exp-subtotal,
#ada-pos-app[data-pos-color-mode="light"] .pos-total-summary strong {
	color: #0369a1;
}

#ada-pos-app[data-pos-color-mode="light"] .timezone-badge {
	color: #6d28d9;
	background: rgba(109, 40, 217, 0.1);
	border-color: rgba(109, 40, 217, 0.25);
}

#ada-pos-app[data-pos-color-mode="light"] .badge-synced {
	background-color: rgba(4, 120, 87, 0.1);
	color: #047857;
	border-color: rgba(4, 120, 87, 0.3);
}

#ada-pos-app[data-pos-color-mode="light"] .buyer-reminder {
	background: linear-gradient(90deg, rgba(3, 105, 161, 0.1) 0%, rgba(109, 40, 217, 0.1) 100%);
	border-color: rgba(3, 105, 161, 0.3);
	color: #0369a1;
}

#ada-pos-app[data-pos-color-mode="light"] .btn-header-end-shift {
	background: rgba(239, 68, 68, 0.1);
	color: #dc2626;
	border-color: rgba(220, 38, 38, 0.4);
}

#ada-pos-app[data-pos-color-mode="light"] .btn-numpad-action {
	color: #d97706;
}

#ada-pos-app[data-pos-color-mode="light"] .btn-numpad-quick {
	background: rgba(4, 120, 87, 0.1);
	border-color: rgba(4, 120, 87, 0.3);
	color: #047857;
}

#ada-pos-app[data-pos-color-mode="light"] .modal-select {
	color-scheme: light;
}

#ada-pos-app[data-pos-color-mode="light"] .modal-select option {
	background-color: #ffffff !important;
	color: #0f172a !important;
}

#ada-pos-app .adapos-admin-shortcut {
	background: var(--pos-admin-shortcut-bg);
	color: var(--pos-text-inverse);
	text-decoration: none;
	font-weight: 700;
}

#ada-pos-app .adapos-header-action {
	background: var(--pos-control-bg);
	border: 1px solid var(--pos-control-border);
	color: var(--pos-text-primary);
	cursor: pointer;
}

#ada-pos-app #btn-add-stock-header {
	padding: var(--pos-space-2) 10px;
	height: auto;
	min-height: unset;
	font-size: var(--pos-font-size-sm);
	flex-direction: row;
	gap: var(--pos-space-2);
}

#ada-pos-app .adapos-stock-label {
	font-size: var(--pos-font-size-xs);
}

#ada-pos-app .adapos-history-message {
	text-align: center;
	padding: 20px;
	color: var(--pos-history-message-text);
}

#ada-pos-app .adapos-history-message-error {
	color: var(--pos-danger);
}

@media (max-width: 479px) {
	#ada-pos-app[data-pos-theme="default"] {
		--pos-control-height: 50px;
		--pos-control-radius: 12px;
	}
}