/* ==========================================================================
   Neumorphism (Soft UI) Design System for ZKT.AttendanceBridge
   Base Background: #e6ecf4 | Light Shadow: #ffffff | Dark Shadow: #c1cddb
   ========================================================================== */

* {
    box-sizing: border-box;
}

body, html {
    background-color: #e6ecf4;
    color: #2d3748;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

h1:focus, h2:focus, h3:focus, [tabindex="-1"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* --- Neumorphic Surfaces --- */
.nm-flat {
    background: #e6ecf4;
    box-shadow: 8px 8px 18px #c1cddb, -8px -8px 18px #ffffff;
}

.nm-flat-sm {
    background: #e6ecf4;
    box-shadow: 4px 4px 10px #c1cddb, -4px -4px 10px #ffffff;
}

.nm-flat-lg {
    background: #e6ecf4;
    box-shadow: 14px 14px 28px #bac6d6, -14px -14px 28px #ffffff;
}

.nm-inset {
    background: #e6ecf4;
    box-shadow: inset 5px 5px 10px #c1cddb, inset -5px -5px 10px #ffffff;
}

.nm-inset-sm {
    background: #e6ecf4;
    box-shadow: inset 3px 3px 6px #c1cddb, inset -3px -3px 6px #ffffff;
}

/* --- Interactive Neumorphic Buttons --- */
.nm-btn {
    background: #e6ecf4;
    color: #374151;
    border: none;
    outline: none;
    cursor: pointer;
    box-shadow: 6px 6px 12px #c1cddb, -6px -6px 12px #ffffff;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.nm-btn:hover {
    color: #1f2937;
    box-shadow: 8px 8px 16px #bac7d6, -8px -8px 16px #ffffff;
    transform: translateY(-1px);
}

.nm-btn:active, .nm-btn.active {
    box-shadow: inset 4px 4px 8px #c1cddb, inset -4px -4px 8px #ffffff;
    transform: translateY(0);
}

/* Primary Accent Button - Enhanced Gradient */
.nm-btn-primary {
    border-radius: 9999px;
    background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 30%, #2563eb 70%, #1d4ed8 100%);
    background-size: 200% 200%;
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4), 5px 5px 12px #b0c0d4, -5px -5px 12px #ffffff;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nm-btn-primary:hover {
    background-position: right center;
    color: #ffffff;
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.6), 7px 7px 16px #a8b8cc, -7px -7px 16px #ffffff;
    transform: translateY(-1px) scale(1.02);
}

.nm-btn-primary:active {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.35), inset -3px -3px 6px rgba(255, 255, 255, 0.2);
    transform: translateY(0) scale(0.99);
}

/* Success Accent Button */
.nm-btn-success {
    border-radius: 9999px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    box-shadow: 6px 6px 14px #b0c0d4, -6px -6px 14px #ffffff;
}

.nm-btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    color: #ffffff;
    box-shadow: 8px 8px 18px #a8b8cc, -8px -8px 18px #ffffff;
}

.nm-btn-success:active {
    background: linear-gradient(135deg, #047857, #059669);
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.2);
}

/* --- Neumorphic Form Controls --- */
.nm-input {
    background: #e6ecf4;
    border: none;
    outline: none;
    color: #1f2937;
    box-shadow: inset 4px 4px 8px #c1cddb, inset -4px -4px 8px #ffffff;
    transition: all 0.2s ease;
}

.nm-input:focus {
    box-shadow: inset 5px 5px 10px #b8c5d6, inset -5px -5px 10px #ffffff, 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* --- Global Neumorphic Date & Time Pickers --- */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
.nm-date-picker {
    background-color: #e6ecf4 !important;
    color: #1e293b !important;
    font-family: inherit;
    font-weight: 500;
    border: 1px solid rgba(212, 222, 234, 0.75);
    outline: none;
    box-shadow: inset 4px 4px 8px #c1cddb, inset -4px -4px 8px #ffffff !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    color-scheme: light !important;
}

input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
.nm-date-picker:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: inset 5px 5px 10px #bac7d6, inset -5px -5px 10px #ffffff !important;
}

input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
.nm-date-picker:focus {
    border-color: #2563eb;
    box-shadow: inset 4px 4px 8px #b8c5d6, inset -4px -4px 8px #ffffff, 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

/* Calendar & Clock Picker Indicator Icon */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 0.5rem;
    padding: 3px 5px;
    margin-left: 6px;
    background-color: transparent;
    filter: invert(33%) sepia(85%) saturate(2200%) hue-rotate(208deg) brightness(97%) contrast(96%); /* Royal Blue #2563eb */
    transition: all 0.2s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(37, 99, 235, 0.12);
    transform: scale(1.15);
}

/* Date/Time Text Field Formatting */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
    padding: 0 4px;
}

input[type="date"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-text {
    color: #64748b;
    padding: 0 2px;
}

input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus {
    background-color: #2563eb;
    color: #ffffff;
    border-radius: 4px;
}

/* --- Status Indicators & Glows --- */
.nm-glow-green {
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.6);
}

.nm-glow-red {
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
}

.nm-glow-blue {
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.5);
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #e6ecf4;
    box-shadow: inset 2px 2px 4px #c1cddb, inset -2px -2px 4px #ffffff;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
    background: #b4c2d2;
    border-radius: 9999px;
    box-shadow: 2px 2px 4px #a0b0c2;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* --- Blazor Reconnect & Error UI --- */
#blazor-error-ui {
    background: #fee2e2;
    color: #b91c1c;
    bottom: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    left: 0;
    padding: 0.8rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}