/*
 * Freiham365 Theme CSS Variables
 * Matches the Compose Multiplatform Material Design 3 theme from Color.kt
 */
:root {
    /* Primary colors */
    --color-primary: #1565C0;          /* MunichBlue */
    --color-on-primary: #FFFFFF;
    --color-primary-container: #D6E3FF;

    /* Secondary colors */
    --color-secondary: #4CAF50;        /* CommunityGreen */
    --color-on-secondary: #FFFFFF;

    /* Tertiary colors */
    --color-tertiary: #FF8A65;         /* FreihamOrange */

    /* Surface colors - warm neutrals for "digital town square" feel */
    --color-background: #F8F9FC;       /* Warm neutral */
    --color-background-page: #F8F9FC;  /* Page/screen background */
    --color-surface: #FFFFFF;
    --color-surface-container: #E8E8E8;
    --color-surface-variant: #E0E2EC;

    /* Simplified accent system - only 2 accents + status green */
    --color-accent: #F5A623;              /* Warm amber - deals/CTAs */
    --color-accent-hover: #E69516;
    --color-accent-bg: #FFFBF0;

    /* Legacy aliases */
    --color-deals-accent: var(--color-accent);
    --color-deals-accent-hover: var(--color-accent-hover);
    --color-deals-accent-bg: var(--color-accent-bg);

    /* Status colors */
    --color-status-open: var(--color-secondary);
    --color-status-closed: #9E9E9E;

    /* Card backgrounds */
    --color-card-primary: #FFFFFF;
    --color-card-secondary: #F8F9FA;
    --color-hero-bg: #E8F0FE;             /* Brand hero section */

    /* Text colors */
    --color-on-surface: #1B1B1F;
    --color-on-surface-variant: #44474E;
    --color-outline: #74777F;

    /* Error colors */
    --color-error: #D32F2F;
}

/* ========================================================================
   DARK MODE
   ======================================================================== */
.dark {
    /* Primary colors - lighter for dark background */
    --color-primary: #ABC7FF;
    --color-on-primary: #002F65;
    --color-primary-container: #0A3F7C;

    /* Secondary colors */
    --color-secondary: #81C784;
    --color-on-secondary: #1B5E20;

    /* Tertiary colors */
    --color-tertiary: #FFAB91;

    /* Surface colors - dark neutrals */
    --color-background: #121316;
    --color-background-page: #1A1C1E;
    --color-surface: #1E2022;
    --color-surface-container: #2A2C2E;
    --color-surface-variant: #44474E;

    /* Accent colors */
    --color-accent: #FFB84D;
    --color-accent-hover: #FFC166;
    --color-accent-bg: #3D3020;

    /* Card backgrounds */
    --color-card-primary: #1E2022;
    --color-card-secondary: #252729;
    --color-hero-bg: #1A2534;

    /* Text colors - light text on dark */
    --color-on-surface: #E3E2E6;
    --color-on-surface-variant: #C4C6CF;
    --color-outline: #8E9099;

    /* Error colors */
    --color-error: #FFB4AB;
}

/* Dark mode overrides for hardcoded colors in Tailwind classes */
.dark {
    background-color: var(--color-background);
    color: var(--color-on-surface);
}

.dark .bg-white {
    background-color: var(--color-surface) !important;
}

.dark .bg-gray-50,
.dark .bg-gray-100 {
    background-color: var(--color-surface-container) !important;
}

.dark .text-\\[\\#1B1B1F\\] {
    color: var(--color-on-surface) !important;
}

.dark .text-\\[\\#44474E\\] {
    color: var(--color-on-surface-variant) !important;
}

.dark .text-\\[\\#74777F\\] {
    color: var(--color-outline) !important;
}

.dark .border-gray-200 {
    border-color: var(--color-surface-variant) !important;
}

.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3) !important;
}

.dark .hover\\:bg-gray-100:hover {
    background-color: var(--color-surface-variant) !important;
}

/* ========================================================================
   DARK MODE - COMPREHENSIVE OVERRIDES
   ======================================================================== */

/* --- Backgrounds --- */
.dark .bg-\\[\\#F7F9FC\\],
.dark .bg-\\[\\#FAFAFA\\],
.dark .bg-\\[\\#F5F5F5\\],
.dark .bg-\\[\\#EEEEEE\\] {
    background-color: var(--color-background) !important;
}

/* AppShell main container - specific override for min-h-screen flex container */
.dark .min-h-screen.flex.flex-col.bg-\\[\\#F7F9FC\\] {
    background-color: var(--color-background) !important;
}

.dark .bg-\\[\\#F0EDE8\\],
.dark [style*="linear-gradient"] {
    background: var(--color-surface) !important;
}

/* Cards and surfaces */
.dark .bg-\\[\\#FFFFFF\\],
.dark .rounded-lg.bg-white,
.dark .rounded-xl.bg-white,
.dark .rounded-2xl.bg-white,
.dark div[class*="rounded"][class*="bg-white"],
.dark div[class*="shadow"][class*="bg-white"] {
    background-color: var(--color-surface) !important;
}

/* Input fields */
.dark input,
.dark textarea,
.dark select {
    background-color: var(--color-surface-container) !important;
    color: var(--color-on-surface) !important;
    border-color: var(--color-surface-variant) !important;
}

/* Transparent inputs (inside search containers) should stay transparent */
.dark input.bg-transparent,
.dark textarea.bg-transparent {
    background-color: transparent !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--color-outline) !important;
}

/* --- Text Colors --- */
/* Dark text that needs to become light */
.dark .text-\\[\\#1B1B1F\\],
.dark .text-\\[\\#1D1B20\\],
.dark .text-\\[\\#212121\\],
.dark .text-\\[\\#333333\\],
.dark .text-black,
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700 {
    color: var(--color-on-surface) !important;
}

/* Medium text colors */
.dark .text-\\[\\#44474E\\],
.dark .text-\\[\\#49454F\\],
.dark .text-\\[\\#555555\\],
.dark .text-\\[\\#666666\\],
.dark .text-gray-600,
.dark .text-gray-500 {
    color: var(--color-on-surface-variant) !important;
}

/* Light/muted text */
.dark .text-\\[\\#74777F\\],
.dark .text-\\[\\#79747E\\],
.dark .text-\\[\\#888888\\],
.dark .text-\\[\\#999999\\],
.dark .text-gray-400 {
    color: var(--color-outline) !important;
}

/* --- Borders --- */
.dark .border-\\[\\#E0E0E0\\],
.dark .border-\\[\\#EEEEEE\\],
.dark .border-\\[\\#F0F0F0\\],
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300,
.dark [class*="border"][class*="gray"] {
    border-color: var(--color-surface-variant) !important;
}

/* Dividers */
.dark hr,
.dark .divide-gray-200 > * + *,
.dark .divide-gray-100 > * + * {
    border-color: var(--color-surface-variant) !important;
}

/* --- Shadows --- */
.dark .shadow,
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4) !important;
}

/* --- Hover States --- */
.dark .hover\\:bg-gray-50:hover,
.dark .hover\\:bg-gray-100:hover {
    background-color: var(--color-surface-variant) !important;
}

.dark .hover\\:bg-\\[\\#F5F5F5\\]:hover,
.dark .hover\\:bg-\\[\\#EEEEEE\\]:hover {
    background-color: var(--color-surface-variant) !important;
}

/* --- Specific Components --- */

/* NOTE: Removed blanket nav background override - it was breaking sidebar item colors */

/* Bottom navigation */
.dark .fixed.bottom-0 {
    background-color: var(--color-surface) !important;
}

/* Header/toolbar */
.dark .fixed.top-0,
.dark .sticky.top-0 {
    background-color: var(--color-surface) !important;
}

/* Footer */
.dark footer {
    background-color: transparent !important;
}

.dark footer .border-gray-300,
.dark footer .border-t {
    border-color: var(--color-surface-variant) !important;
}

/* Footer text colors - high contrast for readability */
.dark footer h4 {
    color: #FFFFFF !important;
}

.dark footer .font-semibold {
    color: #FFFFFF !important;
}

.dark footer h4.font-semibold {
    color: #FFFFFF !important;
}

.dark footer h4.font-semibold.text-\\[\\#1B1B1F\\] {
    color: #FFFFFF !important;
}

.dark footer p,
.dark footer a.text-sm,
.dark footer .text-\\[\\#44474E\\],
.dark footer .text-sm {
    color: var(--color-on-surface-variant) !important;
}

/* Footer brand link */
.dark footer a.text-\\[\\#1565C0\\] {
    color: var(--color-primary) !important;
}

.dark footer a:hover {
    color: #90CAF9 !important;
}

/* Footer social icon buttons */
.dark footer .bg-white {
    background-color: var(--color-surface-container) !important;
}

.dark footer .hover\\:bg-\\[\\#D6E3FF\\]:hover {
    background-color: #1E3A5F !important;
}

/* Footer social icon text/icons */
.dark footer .bg-white span,
.dark footer .rounded-full span {
    color: var(--color-primary) !important;
}

/* Copyright text specifically */
.dark footer .text-xs {
    color: var(--color-outline) !important;
}

/* Chips/tags */
.dark .bg-\\[\\#E7E0EC\\],
.dark .bg-\\[\\#E8E0E5\\],
.dark [class*="rounded-full"][class*="bg-"] {
    background-color: var(--color-surface-container) !important;
}

/* Selected/active states */
.dark .bg-\\[\\#D6E3FF\\] {
    background-color: #1E3A5F !important;
}

.dark .hover\\:bg-\\[\\#D6E3FF\\]:hover {
    background-color: #1E3A5F !important;
}

/* Primary button backgrounds remain colorful */
.dark .bg-\\[\\#1565C0\\] {
    background-color: #1976D2 !important;
}

/* Primary text/links in dark mode - use lighter blue */
.dark .text-\\[\\#1565C0\\] {
    color: var(--color-primary) !important;
}

.dark .hover\\:text-\\[\\#1565C0\\]:hover {
    color: var(--color-primary) !important;
}

.dark .hover\\:text-\\[\\#1976D2\\]:hover {
    color: #90CAF9 !important;
}

/* Accent/deals color */
.dark .bg-\\[\\#F5A623\\] {
    background-color: #E69516 !important;
}

/* --- Icons --- */
.dark .material-icons {
    color: inherit;
}

/* Ensure icons in dark text areas are visible */
.dark span.material-icons.text-\\[\\#44474E\\],
.dark span.material-icons.text-\\[\\#74777F\\] {
    color: var(--color-on-surface-variant) !important;
}

/* --- Scrollbars --- */
/* Light mode scrollbar - subtle gray styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    background: #C4C4C4;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #A0A0A0;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: var(--color-surface);
}

.dark ::-webkit-scrollbar-thumb {
    background: var(--color-surface-variant);
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--color-outline);
}

/* Enable color-scheme switching globally */
html {
    color-scheme: light dark;
}

.dark {
    color-scheme: dark;
}

/* Make native datetime picker icon transparent but expand to full input area
   This keeps the native picker functional while showing our custom overlay icon */
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    background: transparent;
    color: transparent;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    z-index: 10;
}

/* Base styles for Kilua DOM rendering */
html, body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Disable text selection on touch devices to prevent accidental selection */
@media (pointer: coarse) {
    html, body {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Reset heading margins (FHeading renders <h1>-<h6> elements) */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

/* Root container should fill minimum viewport height */
#root {
    width: 100%;
    min-height: 100vh;
}

/* Main content area - clean warm neutral background (removed heavy gradient) */
#root > div:first-child {
    background-color: var(--color-background);
    min-height: 100vh;
}

/* Page background utility class */
.bg-page {
    background-color: var(--color-background-page);
}

/* ========================================================================
   SIDE NAVIGATION - Dark Mode Support
   ======================================================================== */

/* Side nav item states - use classes instead of inline styles for dark mode */

/* Selected state: left accent bar instead of fill background */
.side-nav-item-selected {
    position: relative;
}
.side-nav-item-selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background-color: #1565C0;
    border-radius: 1.5px;
}
.dark .side-nav-item-selected::before {
    background-color: var(--color-primary);
}

.side-nav-item-prominent {
    background-color: #F5A623 !important;
}
.dark .side-nav-item-prominent {
    background-color: #D4850F !important;
}

/* Fix sidebar icon container backgrounds in dark mode */
.dark nav .rounded-xl {
    /* Remove any default backgrounds that might interfere */
}

/* Ensure sidebar icon backgrounds have proper rounded corners */
.side-nav-item-prominent {
    border-radius: 12px;
}

/* Ensure icons inside sidebar items have no extra background */
.side-nav-item-prominent .material-icons,
.side-nav-item-prominent span {
    background: transparent !important;
    background-color: transparent !important;
}

.dark .side-nav-item-prominent {
    background-color: #D4850F !important;
    background: #D4850F !important;
}

/* Side nav icon/text colors */
.side-nav-icon-default {
    color: #44474E;
}
.dark .side-nav-icon-default {
    color: var(--color-on-surface-variant);
}

.side-nav-icon-selected {
    color: #1565C0;
}
.dark .side-nav-icon-selected {
    color: var(--color-primary);
}

.side-nav-icon-prominent {
    color: #FFFFFF;
}
/* Prominent stays white in both modes */

.side-nav-text-default {
    color: #44474E;
}
.dark .side-nav-text-default {
    color: var(--color-on-surface-variant);
}

.side-nav-text-selected {
    color: #1565C0;
}
.dark .side-nav-text-selected {
    color: var(--color-primary);
}

.side-nav-text-prominent {
    color: #FFFFFF;
}

/* WhatsApp Community sidebar item - light green background */
.side-nav-item-whatsapp {
    background-color: #E8F5E9 !important;
    border-radius: 12px;
}
.side-nav-item-whatsapp.sidebar-nav-hover:hover {
    background-color: #C8E6C9 !important;  /* darker green on hover */
}
.side-nav-item-whatsapp.sidebar-nav-hover:hover .material-icons,
.side-nav-item-whatsapp.sidebar-nav-hover:hover span {
    color: #1B5E20 !important;  /* dark green text/icon on hover */
}

.dark .side-nav-item-whatsapp {
    background-color: #1B3D2F !important;
}
.dark .side-nav-item-whatsapp.sidebar-nav-hover:hover {
    background-color: #2E5D4A !important;  /* lighter green on hover in dark mode */
}
.dark .side-nav-item-whatsapp.sidebar-nav-hover:hover .material-icons,
.dark .side-nav-item-whatsapp.sidebar-nav-hover:hover span {
    color: #A5D6A7 !important;  /* light green text/icon on hover in dark mode */
}

/* WhatsApp icon color - WhatsApp green */
.side-nav-icon-whatsapp {
    color: #25D366 !important;
}

/* ========================================================================
   OFFERS SCREEN - Responsive content padding (vmax-based)
   ======================================================================== */

@media (min-width: 640px) and (max-width: 840px) {
    .offers-content-padding {
        padding-left: 12vmax !important;
        padding-right: 12vmax !important;
    }
}
@media (min-width: 841px) {
    .offers-content-padding {
        padding-left: 6vmax !important;
        padding-right: 6vmax !important;
    }
}

/* Social media buttons in footer */
.dark .social-icon-btn {
    background-color: var(--color-surface-container) !important;
}
.dark .social-icon-btn:hover {
    background-color: #1E3A5F !important;
}

/* ========================================================================
   SIDEBAR NAV HOVER - Custom class to avoid Tailwind CDN conflicts
   ======================================================================== */

/* Light mode sidebar hover */
.sidebar-nav-hover:hover {
    background-color: rgba(21, 101, 192, 0.08) !important;  /* subtle blue tint */
}

/* Light mode - icon shifts to primary blue on hover */
.sidebar-nav-hover:hover .material-icons {
    color: #1565C0 !important;
}

/* Light mode - text darkens on hover */
.sidebar-nav-hover:hover span:not(.material-icons) {
    color: #1B1B1F !important;
}

/* Dark mode sidebar hover */
.dark .sidebar-nav-hover:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;  /* subtle white overlay */
}

/* Dark mode - icon shifts to primary blue on hover */
.dark .sidebar-nav-hover:hover .material-icons {
    color: #ABC7FF !important;
}

/* Dark mode - text lightens on hover */
.dark .sidebar-nav-hover:hover span:not(.material-icons) {
    color: #E1E3E8 !important;
}

/* Legacy support for header buttons that still use hover:bg-gray-100 */
nav .hover\\:bg-gray-100:hover {
    background-color: #E5E7EB !important;
}

.dark nav .hover\\:bg-gray-100:hover {
    background-color: #4A4D55 !important;
}

/* ========================================================================
   SEARCH INPUTS - Theme Support
   ======================================================================== */

/* Light mode - explicit rules to override any stale dark mode styles */
html:not(.dark) .bg-gray-50 {
    background-color: #F9FAFB !important;  /* Tailwind gray-50 */
}

html:not(.dark) .bg-gray-100 {
    background-color: #F3F4F6 !important;  /* Tailwind gray-100 */
}

html:not(.dark) .bg-white {
    background-color: #FFFFFF !important;
}

html:not(.dark) .border-gray-200 {
    border-color: #E5E7EB !important;  /* Tailwind gray-200 */
}

html:not(.dark) input {
    background-color: transparent;
    color: #1B1B1F;
}

/* Dark mode search bar container */
.dark .bg-gray-50 {
    background-color: var(--color-surface-container) !important;
}

.dark .bg-gray-100 {
    background-color: var(--color-surface-container) !important;
}

/* Search input focus states */
.dark .focus-within\\:border-\\[\\#1565C0\\]:focus-within {
    border-color: var(--color-primary) !important;
}

.dark .focus-within\\:bg-white:focus-within {
    background-color: var(--color-surface) !important;
}

/* Search placeholder text */
.dark input::placeholder {
    color: var(--color-outline) !important;
}

/* Mobile search overlay */
.dark .search-overlay {
    background-color: var(--color-surface) !important;
}

/* ========================================================================
   DIVIDERS & BORDERS - Dark Mode Support
   ======================================================================== */

/* Light divider/border colors */
.dark .bg-\\[\\#E0E2EC\\] {
    background-color: var(--color-surface-variant) !important;
}

.dark .border-\\[\\#E0E2EC\\] {
    border-color: var(--color-surface-variant) !important;
}

/* Surface variant backgrounds */
.dark .bg-\\[\\#E7E0EC\\] {
    background-color: var(--color-surface-container) !important;
}

/* ========================================================================
   SHIMMER LOADING - Dark Mode Support
   ======================================================================== */

/* Shimmer effect in dark mode uses darker colors */
.dark [id^="shimmer-"] {
    background-color: var(--color-surface-container) !important;
}

.dark [id^="shimmer-"]::after {
    background: linear-gradient(90deg, transparent 0%, var(--color-surface-variant) 50%, transparent 100%) !important;
}

/* ========================================================================
   FORM INPUTS - Dark Mode Support
   ======================================================================== */

/* Form field labels - override dark text for dark mode */
.dark .form-field-label {
    color: var(--color-on-surface) !important;
}

/* Required star in dark mode */
.dark .form-required-star {
    color: #FFB4AB !important;
}

/* Error state backgrounds */
.dark .bg-\\[\\#FFEBEE\\] {
    background-color: #3D2020 !important;
}

/* Error text colors */
.dark .text-\\[\\#BA1A1A\\] {
    color: #FFB4AB !important;
}

/* ========================================================================
   DATETIME PICKER - Dark Mode Support
   ======================================================================== */

/* Datetime picker field container */
.dark .datetime-field {
    background-color: var(--color-surface-container) !important;
}

/* Datetime picker input text */
.dark .datetime-input {
    color: var(--color-on-surface) !important;
}

/* CRITICAL: Tell browser to use dark color scheme for native picker popup */
.dark input[type="datetime-local"],
.dark input[type="date"],
.dark input[type="time"] {
    color-scheme: dark;
}

/* Native datetime picker icon styling removed - using custom icon overlay instead
   See FDateTimeField in Primitives.web.kt for the implementation */

/* Style the inline edit fields (WebKit) */
.dark input[type="datetime-local"]::-webkit-datetime-edit,
.dark input[type="date"]::-webkit-datetime-edit,
.dark input[type="time"]::-webkit-datetime-edit {
    color: var(--color-on-surface);
}

.dark input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
.dark input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.dark input[type="time"]::-webkit-datetime-edit-fields-wrapper {
    color: var(--color-on-surface);
}

.dark input[type="datetime-local"]::-webkit-datetime-edit-text,
.dark input[type="date"]::-webkit-datetime-edit-text,
.dark input[type="time"]::-webkit-datetime-edit-text {
    color: var(--color-outline);
}

.dark input[type="datetime-local"]::-webkit-datetime-edit-month-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-day-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-year-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-ampm-field,
.dark input[type="date"]::-webkit-datetime-edit-month-field,
.dark input[type="date"]::-webkit-datetime-edit-day-field,
.dark input[type="date"]::-webkit-datetime-edit-year-field,
.dark input[type="time"]::-webkit-datetime-edit-hour-field,
.dark input[type="time"]::-webkit-datetime-edit-minute-field,
.dark input[type="time"]::-webkit-datetime-edit-ampm-field {
    color: var(--color-on-surface);
}

/* Datetime picker placeholder text */
.dark input[type="datetime-local"]::placeholder,
.dark input[type="date"]::placeholder,
.dark input[type="time"]::placeholder {
    color: var(--color-outline) !important;
}

/* Datetime picker value text when empty (shows placeholder-like state) */
.dark input[type="datetime-local"]:invalid,
.dark input[type="date"]:invalid,
.dark input[type="time"]:invalid {
    color: var(--color-outline) !important;
}

/* Sidebar gradient - used in AppShell nav */
.sidebar-gradient {
    background: linear-gradient(135deg, #F0EDE8 0%, #E2E8F0 100%);
}

.dark .sidebar-gradient {
    background: linear-gradient(135deg, var(--color-surface) 0%, #252729 100%) !important;
}

/* Hide scrollbar for horizontal scroll containers */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
}

/* Drag scroll cursor styles */
.cursor-grab {
    cursor: grab;
}
.cursor-grabbing {
    cursor: grabbing !important;
}

/* Utility: Prevent text selection on interactive elements (mobile Chrome fix) */
.no-select {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Re-enable text selection on content areas (detail screens) */
.selectable {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* ========================================================================
   MICRO-INTERACTIONS (UI Polish)
   ======================================================================== */

/* Card hover effect - subtle lift and shadow increase */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Button hover - color shift without jump */
.btn-hover {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Navigation item hover */
.nav-item-hover {
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.nav-item-hover:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Icon hover scale */
.icon-hover {
    transition: transform 0.2s ease;
}
.icon-hover:hover {
    transform: scale(1.1);
}

/* Clickable list items */
.list-item-hover {
    transition: background-color 0.15s ease;
}
.list-item-hover:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Focus visible ring for accessibility */
.focus-ring:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ========================================================================
   SURFACE SHADOWS (Cards, containers, sections)
   ======================================================================== */

/* Base surface with subtle shadow - use for cards, widgets, containers */
.surface {
    background-color: var(--color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Elevated surface - more prominent shadow for modals, dropdowns */
.surface-elevated {
    background-color: var(--color-surface);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Widget/card default shadow - visible but not heavy */
.widget-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ========================================================================
   SEARCH OVERLAY (Mobile expandable search)
   ======================================================================== */

/* Base overlay styling */
.search-overlay {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hidden state - slide up and fade out */
.search-overlay-hidden {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

/* Visible state - slide down and fade in */
.search-overlay-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ========================================================================
   RESPONSIVE CARD WIDTH (Narrow screens < 390px)
   ======================================================================== */
/* On 360px screens, shrink service widget cards to show "peek" of next card */

@media (max-width: 389px) {
    .service-widget-card {
        width: min(320px, calc(100vw - 70px)) !important;
        min-width: min(320px, calc(100vw - 70px)) !important;
    }
}

/* ========================================================================
   WHATSAPP GLASSY BUTTON
   ======================================================================== */

/* Glassy button with gradient background - targets the specific bg color */
.glassy-btn-gradient {
    background: linear-gradient(209deg, var(--color-surface) 0%, #c8cdd2 100%) !important;
}

.dark .glassy-btn-gradient {
    background: linear-gradient(209deg, var(--color-surface) 0%, #3d454c 100%) !important;
}

/* ========================================================================
   AVATAR BUTTON - AppShell profile icon (dark mode support)
   ======================================================================== */

/* Light mode: soft blue container */
.avatar-btn-bg {
    background-color: #D6E3FF !important;
}
.avatar-btn-icon {
    color: #1565C0 !important;
}

/* Dark mode: dark navy container with light blue icon */
.dark .avatar-btn-bg {
    background-color: #1E3A5F !important;
}
.dark .avatar-btn-icon {
    color: #ABC7FF !important;
}

/* ========================================================================
   HEADER ICON BUTTONS - search, bell, login (dark mode support)
   ======================================================================== */

/* Light mode: subtle gray hover, transparent active */
.header-icon-btn {
    background: transparent !important;
}
.header-icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.06) !important;
}
.header-icon-btn:active, .header-icon-btn:focus {
    background-color: rgba(0, 0, 0, 0.10) !important;
    outline: none !important;
}
.header-icon-btn .material-icons {
    color: #44474E;
}

/* Dark mode: light hover on dark background */
.dark .header-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
}
.dark .header-icon-btn:active, .dark .header-icon-btn:focus {
    background-color: rgba(255, 255, 255, 0.16) !important;
}
.dark .header-icon-btn .material-icons {
    color: #C4C6CF;
}

/* ========================================================================
   APP SHELL SKELETON - Loading shimmer animation
   ======================================================================== */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer-block {
    background: linear-gradient(
        90deg,
        var(--color-surface-container) 25%,
        var(--color-surface-variant) 50%,
        var(--color-surface-container) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}