/**
 * PawSuite Custom Styles
 * Additional styles beyond Tailwind CSS
 */

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Form Styles */
input:focus, select:focus, textarea:focus {
    outline: none;
}

/* Card Styles */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
}

.card-body {
    @apply p-6;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50;
}

/* Table Styles */
.table {
    @apply w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider bg-gray-50 dark:bg-gray-900/50;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100;
}

.table tbody tr {
    @apply hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors;
}

/* Button Styles */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-gray-800 dark:bg-gray-600 text-white hover:bg-gray-900 dark:hover:bg-gray-500 focus:ring-gray-500;
}

.btn-secondary {
    @apply bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 focus:ring-gray-500;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-outline {
    @apply border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700;
}

.btn-icon {
    @apply p-2;
}

.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

/* Form Input Styles - subtle inset look in dark mode */
/* Global dark mode for all native inputs - blends with card, has depth */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.dark select,
.dark textarea {
    background-color: #1f1f1f !important;
    border-color: #333333 !important;
    color: #e5e5e5 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #737373 !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: #525252 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(82, 82, 82, 0.3) !important;
}

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-500 focus:ring-2 focus:ring-gray-400 focus:border-transparent;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200 focus:ring-2 focus:ring-gray-400 focus:border-transparent;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-500 focus:ring-2 focus:ring-gray-400 focus:border-transparent resize-y;
}

.form-checkbox {
    @apply w-4 h-4 text-gray-600 border-gray-300 rounded focus:ring-gray-500;
}

.form-radio {
    @apply w-4 h-4 text-gray-600 border-gray-300 focus:ring-gray-500;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}

.form-error {
    @apply text-sm text-red-600 dark:text-red-400 mt-1;
}

.form-help {
    @apply text-sm text-gray-500 dark:text-gray-400 mt-1;
}

.form-group {
    @apply mb-4;
}

/* Badge Styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

/* Avatar Styles */
.avatar {
    @apply inline-flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700;
}

.avatar-sm {
    @apply w-8 h-8 text-xs;
}

.avatar-md {
    @apply w-10 h-10 text-sm;
}

.avatar-lg {
    @apply w-12 h-12 text-base;
}

.avatar-xl {
    @apply w-16 h-16 text-lg;
}

/* Modal Styles */
.modal-backdrop {
    @apply fixed inset-0 bg-gray-900/50 backdrop-blur-sm z-40;
}

.modal {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden;
}

.modal-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between;
}

.modal-body {
    @apply p-6 overflow-y-auto;
}

.modal-footer {
    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end space-x-3;
}

/* Dropdown Styles */
.dropdown {
    @apply relative inline-block;
}

.dropdown-menu {
    @apply absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50;
}

.dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700;
}

/* Tab Styles */
.tabs {
    @apply flex border-b border-gray-200 dark:border-gray-700;
}

.tab {
    @apply px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 border-b-2 border-transparent hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 -mb-px;
}

.tab.active {
    @apply text-gray-900 dark:text-white border-gray-800 dark:border-gray-400;
}

/* Calendar Styles */
.fc {
    @apply bg-white dark:bg-gray-800 rounded-lg;
}

.fc .fc-toolbar-title {
    @apply text-lg font-semibold text-gray-900 dark:text-white;
}

.fc .fc-button {
    @apply bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600;
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    @apply bg-gray-700 border-gray-700 text-white;
}

.fc .fc-col-header-cell {
    @apply bg-gray-50 dark:bg-gray-900/50 text-gray-500 dark:text-gray-400;
}

.fc .fc-daygrid-day {
    @apply bg-white dark:bg-gray-800;
}

.fc .fc-daygrid-day:hover {
    @apply bg-gray-50 dark:bg-gray-700;
}

.fc .fc-event {
    @apply rounded px-1 text-xs cursor-pointer;
}

/* Stat Card Styles */
.stat-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6;
}

.stat-card-value {
    @apply text-3xl font-bold text-gray-900 dark:text-white;
}

.stat-card-label {
    @apply text-sm text-gray-500 dark:text-gray-400;
}

.stat-card-change {
    @apply text-sm;
}

.stat-card-change.positive {
    @apply text-green-600 dark:text-green-400;
}

.stat-card-change.negative {
    @apply text-red-600 dark:text-red-400;
}

/* Empty State */
.empty-state {
    @apply flex flex-col items-center justify-center py-12 text-center;
}

.empty-state-icon {
    @apply w-16 h-16 text-gray-300 dark:text-gray-600 mb-4;
}

.empty-state-title {
    @apply text-lg font-medium text-gray-900 dark:text-white mb-2;
}

.empty-state-description {
    @apply text-gray-500 dark:text-gray-400 max-w-sm;
}

/* Loading Spinner */
.spinner {
    @apply animate-spin rounded-full border-2 border-gray-200 dark:border-gray-700 border-t-gray-600;
}

.spinner-sm {
    @apply w-4 h-4;
}

.spinner-md {
    @apply w-6 h-6;
}

.spinner-lg {
    @apply w-8 h-8;
}

/* Skeleton Loading */
.skeleton {
    @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    /* Touch-friendly controls */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .btn-sm {
        min-height: 36px;
        min-width: 36px;
    }

    /* Better tap targets */
    .tap-target {
        @apply min-h-[44px] min-w-[44px] flex items-center justify-center;
    }

    /* Mobile table scroll */
    .table-responsive {
        @apply overflow-x-auto -mx-4 px-4;
    }

    .table th, .table td {
        @apply px-3 py-2;
    }

    /* Mobile card padding */
    .card-header, .card-body, .card-footer {
        @apply px-4 py-3;
    }

    /* Stack horizontally on mobile */
    .mobile-stack {
        @apply flex flex-col space-y-2 !important;
    }

    .mobile-stack > * {
        @apply w-full !important;
    }

    /* Hide on mobile */
    .mobile-hide {
        display: none !important;
    }

    /* Full width on mobile */
    .mobile-full {
        @apply w-full !important;
    }

    /* Stat card value size on mobile */
    .stat-card-value {
        @apply text-2xl;
    }

    /* Modal full screen on mobile */
    .modal-content {
        @apply max-h-screen h-screen max-w-full rounded-none;
    }
}

/* Small mobile devices */
@media (max-width: 380px) {
    .stat-card {
        @apply p-4;
    }

    .stat-card-value {
        @apply text-xl;
    }

    .stat-card-label {
        @apply text-xs;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .hover-effect:hover {
        background-color: inherit !important;
    }

    /* Larger touch targets */
    .dropdown-item {
        @apply py-3;
    }

    .tab {
        @apply py-3;
    }

    /* Remove animations on touch devices for performance */
    .transition-colors {
        transition: none !important;
    }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .safe-top {
        padding-top: env(safe-area-inset-top);
    }
}

/* PWA-specific styles */
@media (display-mode: standalone) {
    /* PWA app bar */
    .pwa-header {
        padding-top: env(safe-area-inset-top);
    }
}

/* Ghost button style */
.btn-ghost {
    @apply bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-400;
}

/* Input styles - size variations */
.input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200 placeholder-gray-500 focus:ring-2 focus:ring-gray-400 focus:border-transparent;
}

.input-sm {
    @apply px-2 py-1.5 text-sm rounded;
}

.input-lg {
    @apply px-4 py-3 text-base;
}

/* Pull to refresh indicator */
.pull-indicator {
    @apply flex items-center justify-center h-12 text-gray-400;
}

/* Bottom navigation for mobile */
.bottom-nav {
    @apply fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 flex justify-around items-center z-40;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-item {
    @apply flex flex-col items-center justify-center py-2 px-3 text-gray-500 dark:text-gray-400 min-h-[56px] min-w-[64px];
}

.bottom-nav-item.active {
    @apply text-gray-900 dark:text-white;
}

/* Swipe actions */
.swipe-action {
    @apply flex items-center justify-center min-w-[80px] min-h-full;
}

.swipe-action-delete {
    @apply bg-red-500 text-white;
}

.swipe-action-edit {
    @apply bg-blue-500 text-white;
}

/* Floating action button */
.fab {
    @apply fixed bottom-20 right-4 w-14 h-14 bg-gray-800 dark:bg-gray-600 text-white rounded-full shadow-lg flex items-center justify-center z-30 hover:bg-gray-900 dark:hover:bg-gray-500;
}

@media (min-width: 1024px) {
    .fab {
        bottom: 2rem;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white !important;
    }

    .card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #e5e7eb;
    }

    .modal, .modal-backdrop, .fab, .bottom-nav {
        display: none !important;
    }
}