/* app/static/css/custom.css */

/* Twitter Blue Color Scheme Utilities */
.btn-primary {
    @apply bg-twitter-blue text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors;
}

.btn-secondary {
    @apply bg-twitter-gray text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors;
}

.btn-danger {
    @apply bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition-colors;
}

.card {
    @apply bg-white rounded-lg shadow-md p-6;
}

.input-field {
    @apply w-full px-3 py-2 border border-twitter-light rounded-lg focus:outline-none focus:ring-2 focus:ring-twitter-blue;
}

.table-header {
    @apply bg-twitter-bg text-twitter-dark font-semibold;
}

/* Enhanced Table Styling - matches report table styling */
.table-polished {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table-polished thead {
    background-color: #E1E8ED; /* twitter-bg - matches reports */
}

.table-polished thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    color: #657786; /* twitter-gray */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table-polished tbody {
    background-color: white;
}

.table-polished tbody tr {
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #E1E8ED; /* twitter-bg */
}

.table-polished tbody tr:hover {
    background-color: #E1E8ED; /* twitter-bg - matches reports */
}

.table-polished tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid #E1E8ED; /* twitter-bg divider */
}

/* Table container with shadow and rounded corners */
.table-container {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    overflow: hidden;
}

.status-ok {
    @apply text-green-600;
}

.status-warning {
    @apply text-yellow-600;
}

.status-critical {
    @apply text-red-600;
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    /* Larger touch targets for mobile */
    .btn-primary,
    .btn-secondary,
    .btn-danger {
        @apply py-3 min-h-[44px];
    }

    /* Better table cell padding on mobile */
    table td,
    table th {
        @apply px-3 py-2;
    }

    /* Stack filter form elements on mobile */
    .filter-form {
        @apply flex-col;
    }

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

    /* Reduce card padding on mobile */
    .card {
        @apply p-4;
    }

    /* Smaller text for status badges on mobile */
    .status-badge {
        @apply text-xs px-1.5;
    }
}

/* Ensure tables scroll horizontally on small screens */
.table-responsive {
    @apply overflow-x-auto -mx-4 px-4;
}

/* Sortable table header styling - clean, minimal sort icons */
.sortable-header {
    position: relative;
}

.sortable-header .sort-icon {
    margin-left: 0.25rem;
    display: inline-block;
    width: 0.75rem;
    font-size: 0.75rem;
    color: #AAB8C2; /* twitter-light */
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sortable-header:hover .sort-icon {
    opacity: 0.6;
}

/* Active sort state - always visible */
.sortable-header .sort-icon.active {
    opacity: 1;
    color: #1DA1F2; /* twitter-blue */
}

/* Print styles */
@media print {
    nav,
    aside,
    footer,
    .no-print {
        display: none !important;
    }

    main {
        padding: 0 !important;
        margin: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    /* Hide horizontal scrollbars and show full content */
    .overflow-x-auto,
    .table-responsive {
        overflow: visible !important;
    }

    /* Hide scrollbar appearance */
    *::-webkit-scrollbar {
        display: none !important;
    }

    /* Table container should not clip */
    .table-container {
        overflow: visible !important;
    }
}