/**
 * Custom Styles for VoteHub Voting System
 * Mobile-first responsive design
 */

/* Base font */
* {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Smooth transitions */
*, *::before, *::after {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Mobile-first base styles */
html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Form inputs - larger touch targets on mobile */
input, select, textarea, button {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* Candidate selection animation */
.candidate-option input:checked + div {
    transform: scale(1.01);
}

/* Button hover effects - only on non-touch devices */
@media (hover: hover) {
    button:hover:not(:disabled),
    a[class*="bg-"]:hover {
        transform: translateY(-2px);
    }
}

/* Disabled button state */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Progress bar animation */
[class*="bg-"][class*="h-2"],
[class*="bg-"][class*="h-3"] {
    transition: width 0.5s ease-out;
}

/* Countdown pulse animation */
#countdown {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Flash message animation */
.flash-message {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Success checkmark animation */
.success-icon svg {
    animation: checkmark 0.5s ease-out;
}

@keyframes checkmark {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Extra small devices (phones, less than 640px) */
@media (max-width: 639px) {
    /* Reduce padding on mobile */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Smaller headings on mobile */
    h1 {
        font-size: 1.75rem !important;
        line-height: 2rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }

    /* Stack stats grid on mobile */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .stats-grid > div {
        display: flex !important;
        align-items: center !important;
        text-align: left !important;
        padding: 1rem !important;
    }

    .stats-grid > div > div:first-child {
        margin: 0 !important;
        margin-right: 1rem !important;
        width: 3rem !important;
        height: 3rem !important;
    }

    .stats-grid > div > p:first-of-type {
        font-size: 1.5rem !important;
    }

    /* Full width cards on mobile */
    .election-card {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0 !important;
    }

    /* Smaller countdown on mobile */
    #countdown {
        font-size: 2rem !important;
    }

    /* Adjust card padding */
    .card-content {
        padding: 1.25rem !important;
    }

    /* Stack navigation */
    nav .container > div {
        flex-wrap: wrap;
    }

    /* Smaller nav padding */
    nav {
        padding: 0.75rem 0 !important;
    }

    /* Footer adjustments */
    footer {
        padding: 1.5rem 0 !important;
    }

    footer .container > div {
        flex-direction: column !important;
        text-align: center;
    }

    /* Table scroll on mobile */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Voting form adjustments */
    .vote-form input,
    .vote-form select,
    .vote-form button {
        padding: 1rem !important;
    }

    /* Candidate cards - single column */
    .candidate-grid {
        grid-template-columns: 1fr !important;
    }

    /* Results cards padding */
    .result-card {
        padding: 1rem !important;
    }
}

/* Small devices (landscape phones, 640px and up) */
@media (min-width: 640px) and (max-width: 767px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .candidate-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 1023px) {
    .candidate-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Touch device optimizations */
@media (pointer: coarse) {
    /* Larger touch targets */
    button,
    a[class*="bg-"],
    .candidate-option {
        min-height: 48px;
    }

    /* Remove hover effects on touch */
    button:hover,
    a:hover {
        transform: none;
    }

    /* Active state for touch feedback */
    button:active,
    a[class*="bg-"]:active,
    .candidate-option:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* Safe area insets for notched phones */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    footer {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
}

/* Dark mode support (optional - follows system preference) */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode
    body {
        background: linear-gradient(to bottom right, #1e293b, #0f172a);
        color: #e2e8f0;
    }
    */
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #countdown {
        animation: none;
    }
}

/* Print styles */
@media print {
    nav, footer, .no-print, button, a[class*="bg-"] {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .shadow, .shadow-lg, .shadow-xl {
        box-shadow: none !important;
    }

    * {
        border-color: #ccc !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    button, a[class*="bg-"] {
        border: 2px solid currentColor;
    }
}