/* ========================================
   APP.CSS - GurmeClickPos
   Minimal Blazor-specific styles
   Most styling is handled by Tailwind CSS + Flowbite
   ======================================== */

/* ========================================
   1. BLAZOR ERROR UI
   ======================================== */

#blazor-error-ui {
    background: #ffb5b5;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #721c24;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    border: 1px solid #721c24;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #721c24;
}

#blazor-error-ui .reload {
    color: #721c24;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Bir hata oluştu."
}

/* ========================================
   2. LOADING SCREEN
   ======================================== */

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-color: #f5f5f5;
}

.loading-message {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: #4a6da7;
    font-weight: 500;
}

/* Responsive loading message */
@media (max-width: 575.98px) {
    .loading-message {
        font-size: 0.875rem;
    }
}

/* ========================================
   3. FORM VALIDATION
   ======================================== */

.validation-message {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ========================================
   4. UTILITY CLASSES (Minimal)
   ======================================== */

/* Visibility helpers */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #ef4444;
}

/* ========================================
   5. TOGGLE SWITCH - Flowbite Style
   Custom CSS for reliable toggle switch behavior
   ======================================== */

/* Toggle switch knob translation when checked */
/* Standard size (md): w-11 h-6, knob w-5 h-5 */
.peer:checked ~ .toggle-switch-md::after {
    transform: translateX(18px);
}

/* Small size (sm): w-9 h-5, knob w-4 h-4 */
.peer:checked ~ .toggle-switch-sm::after {
    transform: translateX(16px);
}

/* Large size (lg): w-14 h-7, knob w-6 h-6 */
.peer:checked ~ .toggle-switch-lg::after {
    transform: translateX(24px);
}

/* Toggle switch background color when checked */
.peer:checked ~ .toggle-switch-md,
.peer:checked ~ .toggle-switch-sm,
.peer:checked ~ .toggle-switch-lg {
    background-color: rgb(59 130 246); /* blue-500 */
}

/* Toggle knob border color when checked */
.peer:checked ~ .toggle-switch-md::after,
.peer:checked ~ .toggle-switch-sm::after,
.peer:checked ~ .toggle-switch-lg::after {
    border-color: white;
}

/* RTL Support */
[dir="rtl"] .peer:checked ~ .toggle-switch-md::after,
.peer:checked ~ .toggle-switch-md.rtl::after {
    transform: translateX(-18px);
}

[dir="rtl"] .peer:checked ~ .toggle-switch-sm::after,
.peer:checked ~ .toggle-switch-sm.rtl::after {
    transform: translateX(-16px);
}

[dir="rtl"] .peer:checked ~ .toggle-switch-lg::after,
.peer:checked ~ .toggle-switch-lg.rtl::after {
    transform: translateX(-24px);
}

/* ========================================
   6. TOGGLE LABEL - Theme-aware Hover
   Fixes hover background in dark mode
   ======================================== */

.toggle-label {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.toggle-label:hover {
    background-color: rgb(243 244 246); /* gray-100 - Light mode */
    border-color: rgb(229 231 235); /* gray-200 */
}

.dark .toggle-label:hover {
    background-color: rgb(55 65 81 / 0.5); /* gray-700/50 - Dark mode */
    border-color: rgb(75 85 99); /* gray-600 */
}

/* ========================================
   7. ROLE CHIP - Theme-aware Hover
   Fixes hover background in dark mode for role selection buttons
   ======================================== */

.role-chip {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.role-chip:hover {
    background-color: rgb(243 244 246); /* gray-100 - Light mode */
    border-color: rgb(209 213 219); /* gray-300 */
}

.dark .role-chip:hover {
    background-color: rgb(55 65 81); /* gray-700 - Dark mode */
    border-color: rgb(75 85 99); /* gray-600 */
}

/* ========================================
   8. DARK MODE SCROLLBAR
   Custom scrollbar styling for dark mode
   ======================================== */

/* Firefox */
.dark-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.dark .dark-scrollbar {
    scrollbar-color: rgba(107, 114, 128, 0.7) transparent;
}

/* Webkit (Chrome, Safari, Edge) */
.dark-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

.dark-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 4px;
}

.dark-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.7);
}

/* Dark mode webkit scrollbar */
.dark .dark-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(107, 114, 128, 0.7);
}

.dark .dark-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.9);
}

/* ========================================
   9. NAVMENU SIDEBAR
   NavMenu now uses Flowbite/Tailwind classes
   Dark mode is handled via Tailwind dark: variants
   ======================================== */

/* ========================================
   10. TAB ACTIVE INDICATOR
   Ensures tab border is visible in light mode
   ======================================== */

.tab-active {
    border-bottom: 3px solid #4f46e5 !important; /* indigo-600 */
    color: #4f46e5 !important;
}

.dark .tab-active {
    border-bottom: 3px solid #818cf8 !important; /* indigo-400 */
    color: #818cf8 !important;
}

/* ========================================
   11. DARK MODE ICON BACKGROUNDS
   For summary cards with colored icon containers
   ======================================== */

/* Blue icon background */
.icon-bg-blue {
    background-color: rgb(219 234 254); /* blue-100 */
}
.dark .icon-bg-blue {
    background-color: rgb(30 58 138 / 0.5); /* blue-900/50 */
}

/* Purple icon background */
.icon-bg-purple {
    background-color: rgb(243 232 255); /* purple-100 */
}
.dark .icon-bg-purple {
    background-color: rgb(88 28 135 / 0.5); /* purple-900/50 */
}

/* Green icon background */
.icon-bg-green {
    background-color: rgb(220 252 231); /* green-100 */
}
.dark .icon-bg-green {
    background-color: rgb(20 83 45 / 0.5); /* green-900/50 */
}

/* Amber icon background */
.icon-bg-amber {
    background-color: rgb(254 243 199); /* amber-100 */
}
.dark .icon-bg-amber {
    background-color: rgb(120 53 15 / 0.5); /* amber-900/50 */
}

/* Red icon background */
.icon-bg-red {
    background-color: rgb(254 226 226); /* red-100 */
}
.dark .icon-bg-red {
    background-color: rgb(127 29 29 / 0.5); /* red-900/50 */
}

/* Icon text colors */
.icon-text-blue {
    color: rgb(37 99 235); /* blue-600 */
}
.dark .icon-text-blue {
    color: rgb(96 165 250); /* blue-400 */
}

.icon-text-purple {
    color: rgb(147 51 234); /* purple-600 */
}
.dark .icon-text-purple {
    color: rgb(192 132 252); /* purple-400 */
}

.icon-text-green {
    color: rgb(22 163 74); /* green-600 */
}
.dark .icon-text-green {
    color: rgb(74 222 128); /* green-400 */
}

.icon-text-amber {
    color: rgb(217 119 6); /* amber-600 */
}
.dark .icon-text-amber {
    color: rgb(251 191 36); /* amber-400 */
}

.icon-text-red {
    color: rgb(220 38 38); /* red-600 */
}
.dark .icon-text-red {
    color: rgb(248 113 113); /* red-400 */
}

/* ========================================
   12. DARK MODE BADGE STYLES
   For growth indicators and status badges
   ======================================== */

/* Success/Positive badge */
.badge-success {
    background-color: rgb(220 252 231); /* green-100 */
    color: rgb(21 128 61); /* green-700 */
}
.dark .badge-success {
    background-color: rgb(20 83 45 / 0.5); /* green-900/50 */
    color: rgb(74 222 128); /* green-400 */
}

/* Danger/Negative badge */
.badge-danger {
    background-color: rgb(254 226 226); /* red-100 */
    color: rgb(185 28 28); /* red-700 */
}
.dark .badge-danger {
    background-color: rgb(127 29 29 / 0.5); /* red-900/50 */
    color: rgb(248 113 113); /* red-400 */
}

/* Info badge */
.badge-info {
    background-color: rgb(219 234 254); /* blue-100 */
    color: rgb(29 78 216); /* blue-700 */
}
.dark .badge-info {
    background-color: rgb(30 58 138 / 0.5); /* blue-900/50 */
    color: rgb(96 165 250); /* blue-400 */
}

/* ========================================
   13. DARK MODE TREND INDICATOR
   For trend boxes with left border
   ======================================== */

/* Success trend box */
.trend-box-success {
    background-color: rgb(240 253 244); /* green-50 */
    border-left: 4px solid rgb(34 197 94); /* green-500 */
}
.dark .trend-box-success {
    background-color: rgb(20 83 45 / 0.3); /* green-900/30 */
    border-left-color: rgb(74 222 128); /* green-400 */
}

/* Danger trend box */
.trend-box-danger {
    background-color: rgb(254 242 242); /* red-50 */
    border-left: 4px solid rgb(239 68 68); /* red-500 */
}
.dark .trend-box-danger {
    background-color: rgb(127 29 29 / 0.3); /* red-900/30 */
    border-left-color: rgb(248 113 113); /* red-400 */
}

/* Trend text colors */
.trend-text-success {
    color: rgb(21 128 61); /* green-700 */
}
.dark .trend-text-success {
    color: rgb(74 222 128); /* green-400 */
}

.trend-text-danger {
    color: rgb(185 28 28); /* red-700 */
}
.dark .trend-text-danger {
    color: rgb(248 113 113); /* red-400 */
}

/* ========================================
   14. DARK MODE DATE/MONTH INPUT
   For native browser date/month/time pickers
   ======================================== */

/* Base date input styling */
input[type="date"],
input[type="month"],
input[type="datetime-local"],
input[type="time"] {
    background-color: rgb(255 255 255); /* white */
    color: rgb(17 24 39); /* gray-900 */
    border-color: rgb(209 213 219); /* gray-300 */
}

.dark input[type="date"],
.dark input[type="month"],
.dark input[type="datetime-local"],
.dark input[type="time"] {
    background-color: rgb(55 65 81); /* gray-700 */
    color: rgb(243 244 246); /* gray-100 */
    border-color: rgb(75 85 99); /* gray-600 */
    color-scheme: dark;
}

/* Calendar icon color in dark mode */
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="month"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}