/* Mobile Responsive Styles */

/* Tablets and smaller */
@media (max-width: 991px) {
    .container {
        padding: 15px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    textarea.form-control {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    /* Stack form columns vertically */
    .col-lg-2, .col-md-2, .col-sm-2,
    .col-lg-3, .col-md-4, .col-sm-6,
    .col-lg-5, .col-md-5, .col-sm-5 {
        width: 100%;
        margin-bottom: 15px;
    }

    /* Larger touch targets for checkboxes */
    .form-check {
        margin-bottom: 15px;
    }

    .form-check-input {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    .form-check-label {
        font-size: 16px;
        padding-left: 5px;
    }

    /* Full width buttons on mobile */
    .btn {
        width: 100%;
        margin-bottom: 10px;
        padding: 12px 20px;
        font-size: 16px;
    }

    .btn-sm {
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Sticky action buttons */
    .sticky-actions {
        position: sticky;
        bottom: 0;
        background: var(--bg-color);
        padding: 15px;
        box-shadow: 0 -2px 10px var(--shadow);
        z-index: 100;
        margin: 0 -15px;
    }

    .sticky-actions .btn {
        margin-bottom: 5px;
    }

    /* Page header */
    .page-header h1 {
        font-size: 24px;
    }

    /* Tables - make them scrollable */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        font-size: 14px;
    }

    .table td, .table th {
        padding: 8px;
        white-space: nowrap;
    }

    /* Textareas */
    textarea.form-control {
        min-height: 120px;
    }

    /* Word counter */
    #word-count-container {
        padding: 10px;
        margin: 10px 0;
        background: var(--bg-secondary);
        border-radius: 5px;
        text-align: center;
    }

    #word-count {
        font-size: 24px;
        font-weight: bold;
        color: var(--btn-primary-bg);
    }
}

/* Small mobile devices */
@media (max-width: 576px) {
    .page-header h1 {
        font-size: 20px;
    }

    .mb-3 {
        margin-bottom: 15px !important;
    }

    /* Smaller padding for containers */
    .container {
        padding: 10px;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    textarea.form-control {
        min-height: 80px;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Larger clickable areas */
    a, button, .btn, .form-check-label {
        min-height: 22px;
        display: inline-flex;
        align-items: center;
    }

    /* Remove hover effects on touch devices */
    .btn:hover, a:hover {
        transform: none;
    }

    /* Prevent double-tap zoom */
    * {
        touch-action: manipulation;
    }
}