/* Responsive overrides for mobile devices (Galaxy S24 / 360px viewport) */

@media (max-width: 768px) {
    /* Global Typography */
    h1, .h1 { font-size: 1.5rem !important; }
    h2, .h2 { font-size: 1.3rem !important; }
    h3, .h3 { font-size: 1.1rem !important; }

    /* Fix Horizontal Scroll on Tables */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Hide less important columns in Admin and Client tables on very small screens */
    @media (max-width: 576px) {
        .table thead th:nth-child(1), .table tbody td:nth-child(1), /* ID */
        .table thead th:nth-child(2), .table tbody td:nth-child(2)  /* Datum */
        {
            display: none !important;
        }

        .table {
            font-size: 0.85rem;
        }

        .table td, .table th {
            padding: 0.5rem 0.25rem !important;
        }
    }

    /* Fix Horizontal Overflow in Forms (e.g. client.php quick submit) */
    .row.mb-3.g-2 {
        flex-direction: column !important;
    }

    .row.mb-3.g-2 > div {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }

    /* Chat / Poruke Improvements */
    .chat-container {
        height: calc(100vh - 250px) !important;
        min-height: 400px;
    }

    .ticket-description-scroll {
        max-height: 80px !important;
    }

    .message-bubble {
        max-width: 85% !important;
        padding: 8px 12px !important;
    }

    .message-meta {
        font-size: 0.7rem !important;
    }

    /* UI Components */
    .btn {
        min-height: 44px; /* Touch target size */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .card-body {
        padding: 0.75rem !important;
    }

    /* Navigation */
    .navbar-brand {
        font-size: 1rem !important;
    }

    /* Login Page refinements */
    body:has(.login-logo) .card {
        padding: 1.5rem 1rem !important;
        margin: 10px;
    }

    /* Poruke Page refinements */
    .mb-2 > a.text-decoration-none.text-muted.small {
        display: inline-block;
        padding: 8px 0;
        min-height: 44px;
        font-size: 0.9rem !important;
    }

    #message-input, #author-name-input {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    .chat-footer input.form-control,
    .chat-footer .btn {
        min-height: 38px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}