/* ========================================= */
/* Responsive Design & Mobile Optimization */
/* ========================================= */

/* ===== BREAKPOINTS ===== */
/* Mobile: < 768px (Phones) */
/* Tablet: 768px - 1024px (iPads) */
/* Desktop: > 1024px */

/* ========================================= */
/* 1. GLOBAL ELEMENTS & TOUCH OPTIMIZATION */
/* ========================================= */

@media (max-width: 768px) {
    /* Typography Scaling */
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.3rem !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
    
    .header-title {
        font-size: 1.2rem !important;
    }
    
    /* Container Padding Reduction */
    .container {
        padding: 0 16px 24px !important;
    }
    
    .main-container {
        padding: 16px 12px !important;
    }
    
    .container-fluid {
        padding: 0 12px !important;
    }
    
    /* Touch Targets - Minimum 44px height for accessibility */
    button,
    .btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    .dropdown-item,
    .page-link {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Button Size Adjustments */
    .btn {
        padding: 8px 12px !important;
        font-size: 0.95em !important;
    }
    
    .btn-sm {
        padding: 6px 10px !important;
        font-size: 0.85em !important;
    }
    
    /* Button Stacking for Action Groups */
    .action-buttons,
    .action-buttons-left,
    .action-buttons-right,
    .buttons-wrapper,
    .list-controls {
        flex-direction: column !important;
        width: 100%;
        gap: 10px !important;
    }
    
    .action-buttons .btn,
    .buttons-wrapper .btn,
    .list-controls .btn {
        width: 100%;
    }
    
    /* Action Buttons Container */
    .action-buttons-container {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .action-buttons-left,
    .action-buttons-right {
        width: 100%;
    }
}

/* Very Small Screens (< 600px) */
@media (max-width: 600px) {
    .action-buttons,
    .buttons-wrapper,
    .list-controls {
        gap: 8px !important;
    }
    
    .btn {
        padding: 10px 16px !important;
        font-size: 0.9em !important;
    }
}

/* ========================================= */
/* 2. HEADER LAYOUT */
/* ========================================= */

@media (max-width: 768px) {
    .global-header .header-container {
        flex-wrap: nowrap;
        gap: 8px !important;
        padding: 0 12px !important;
        flex-direction: row;
    }
    
    .header-left {
        min-width: auto !important;
        flex: 0 0 auto;
    }
    
    .header-center {
        width: 100%;
        flex: 1 1 100%;
        margin-top: 8px;
        text-align: center;
    }
    
    .header-right {
        min-width: auto !important;
        flex: 0 0 auto;
    }
    
    /* User Menu - Ensure touch-friendly */
    .user-button {
        min-width: 44px !important;
        padding: 8px 10px !important;
    }
    
    .user-button i.fa-user-circle {
        font-size: 22px !important;
    }
    
    /* User Dropdown Positioning */
    .user-dropdown {
        right: -140px;
        min-width: 200px;
        max-width: calc(100vw - 24px);
    }
    
    /* Hide username text on very small screens, keep icon */
    @media (max-width: 480px) {
        .user-name {
            display: none !important;
        }
        
        .user-button {
            padding: 8px !important;
            min-width: 44px !important;
        }
    }
}

/* ========================================= */
/* 3. FORMS, INPUTS & SEARCH */
/* ========================================= */

@media (max-width: 768px) {
    /* Grid Stacking - Force Single Column */
    .dashboard-grid,
    .client-layout-grid,
    .form-grid,
    .data-field-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Form Groups */
    .form-group {
        width: 100%;
    }
    
    /* Input Fields - Full Width & Touch-Friendly */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    select,
    textarea {
        width: 100% !important;
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Search Bars - Fluid Width */
    .search-bar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .search-bar-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .search-form {
        width: 100% !important;
    }
    
    /* Form Sections */
    .form-section-card {
        padding: 16px !important;
    }
    
    /* Step Navigation */
    .step-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .step-actions .btn {
        width: 100%;
    }
}

/* ========================================= */
/* 4. MOBILE TABLE STRATEGY - CARD VIEW */
/* ========================================= */

/* Mobile Card View for Tables (< 768px) */
@media (max-width: 767px) {
    /* Hide table headers on mobile - Target ALL table variants */
    table thead,
    .installations-table thead,
    .dangot-service-calls-table thead,
    .results-table thead,
    .incoming-calls-table thead {
        display: none;
    }
    
    /* Transform table rows into cards - Target ALL table variants */
    table tbody tr,
    .installations-table tbody tr,
    .dangot-service-calls-table tbody tr,
    .results-table tbody tr,
    .incoming-calls-table tbody tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
        border: 1px solid var(--border-color, #dee2e6);
        border-radius: var(--border-radius, 8px);
        box-shadow: var(--box-shadow, 0 2px 8px rgba(0,0,0,0.12));
        background-color: var(--card-bg-color, #ffffff);
        padding: 12px;
        direction: rtl;
    }
    
    /* Transform table cells into label-value pairs - Target ALL table variants */
    table tbody td,
    .installations-table tbody td,
    .dangot-service-calls-table tbody td,
    .results-table tbody td,
    .incoming-calls-table tbody td {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 8px 0;
        border: none;
        text-align: right;
        direction: rtl;
        border-bottom: 1px solid var(--border-color, #f0f0f0);
        width: 100% !important;
    }
    
    /* Ensure cell content (not ::before) is visible and takes remaining space */
    table tbody td > div,
    table tbody td > span,
    table tbody td > a,
    .installations-table tbody td > div,
    .installations-table tbody td > span,
    .installations-table tbody td > a,
    .dangot-service-calls-table tbody td > div,
    .dangot-service-calls-table tbody td > span,
    .dangot-service-calls-table tbody td > a,
    .results-table tbody td > div,
    .results-table tbody td > span,
    .results-table tbody td > a,
    .incoming-calls-table tbody td > div,
    .incoming-calls-table tbody td > span,
    .incoming-calls-table tbody td > a {
        flex: 1;
        overflow-wrap: break-word;
        word-wrap: break-word;
        min-width: 0;
    }
    
    /* Action buttons cell - position at footer - Target ALL table variants */
    table tbody td.has-action-buttons,
    table tbody td:last-child.has-action-buttons,
    .installations-table tbody td.has-action-buttons,
    .installations-table tbody td:last-child.has-action-buttons,
    .dangot-service-calls-table tbody td.has-action-buttons,
    .dangot-service-calls-table tbody td:last-child.has-action-buttons,
    .results-table tbody td.has-action-buttons,
    .results-table tbody td:last-child.has-action-buttons,
    .incoming-calls-table tbody td.has-action-buttons,
    .incoming-calls-table tbody td:last-child.has-action-buttons {
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid var(--border-color, #dee2e6);
        justify-content: center;
        gap: 12px;
        order: 999;
    }
    

    .truncate-text-wrapper {
        overflow: visible;
    }
    
    /* Add column header as label using ::before pseudo-element - Target ALL table variants */
    table tbody td::before,
    .installations-table tbody td::before,
    .dangot-service-calls-table tbody td::before,
    .results-table tbody td::before,
    .incoming-calls-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--secondary-color, #5a6a7b);
        margin-left: 12px;
        flex-shrink: 0;
        min-width: 100px;
        text-align: right;
    }
    
    /* If no data-label attribute, try to get from header */
    /* This requires JavaScript to add data-label attributes, but we provide fallback */
    table tbody td:not([data-label])::before,
    .installations-table tbody td:not([data-label])::before,
    .dangot-service-calls-table tbody td:not([data-label])::before,
    .results-table tbody td:not([data-label])::before,
    .incoming-calls-table tbody td:not([data-label])::before {
        content: '';
        display: none;
        min-width: 0;
    }
    
    /* Hide empty cells */
    table tbody td:empty,
    .installations-table tbody td:empty,
    .dangot-service-calls-table tbody td:empty,
    .results-table tbody td:empty,
    .incoming-calls-table tbody td:empty {
        display: none;
    }
    
    /* Hide label for action button cells */
    table tbody td.has-action-buttons::before,
    table tbody td:last-child.has-action-buttons::before,
    .installations-table tbody td.has-action-buttons::before,
    .installations-table tbody td:last-child.has-action-buttons::before,
    .dangot-service-calls-table tbody td.has-action-buttons::before,
    .dangot-service-calls-table tbody td:last-child.has-action-buttons::before,
    .results-table tbody td.has-action-buttons::before,
    .results-table tbody td:last-child.has-action-buttons::before,
    .incoming-calls-table tbody td.has-action-buttons::before,
    .incoming-calls-table tbody td:last-child.has-action-buttons::before {
        display: none;
    }
    
    /* Handle progress bar rows - hide on mobile or style differently */
    table tbody tr.progress-row,
    .installations-table tbody tr.progress-row {
        display: none !important;
    }
    
    /* Handle special status rows - ensure they display as cards */
    table tbody tr.row-ready,
    .installations-table tbody tr.row-ready {
        background-color: rgba(40, 167, 69, 0.15) !important;
    }
    
    /* Center-aligned cells should remain centered in mobile view */
    table tbody td.cell-center,
    .installations-table tbody td.cell-center,
    .dangot-service-calls-table tbody td.cell-center,
    .results-table tbody td.cell-center,
    .incoming-calls-table tbody td.cell-center {
        justify-content: center;
    }
    
    /* Action buttons group styling */
    .action-buttons-group {
        display: flex;
        gap: 8px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    
    /* RTL-specific adjustments for client cells and complex content */
    .client-cell,
    .client-link {
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        text-align: right;
        direction: rtl;
    }
    
    /* Phone number display in mobile cards */
    .phone-number {
        display: block;
        margin-top: 4px;
        font-size: 0.9em;
        color: var(--text-color-light);
    }
    
    /* Status text in mobile cards */
    .status-text-in-progress,
    .status-text-completed {
        display: block;
        margin-top: 4px;
        font-size: 0.85em;
    }
    
    /* Installation type labels in mobile */
    .installation-type-label {
        text-align: center;
        display: block;
    }
    
    /* Primary tasks list in mobile cards */
    .primary-tasks-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 4px 0;
    }
    
    .primary-task-item {
        display: flex;
        align-items: center;
        gap: 8px;
        direction: rtl;
        text-align: right;
    }
    
    /* Notes cell - allow wrapping */
    .notes-cell {
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Handle incoming call rows specifically */
    .incoming-call-row {
        display: flex;
        flex-direction: column;
    }
    
    /* Device service table specific adjustments */
    .dangot-service-calls-table tbody tr {
        cursor: default; /* Remove pointer cursor on mobile */
    }
    
    /* Edit icon buttons in mobile cards */
    .edit-icon-btn-table {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Equipment modal button in mobile */
    .btn-modal {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
    }
    
    /* Mark as completed button in mobile */
    .mark-as-completed-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Service expiry status rows */
    .row-expiry-ok,
    .row-expiry-nearing,
    .row-expiry-passed,
    .row-expiry-null {
        /* Status colors are preserved from desktop styles */
    }
    
    /* Table wrapper - ensure proper scrolling on mobile if needed */
    .table-wrapper,
    .table-container {
        overflow-x: visible;
        border-radius: var(--border-radius, 8px);
    }
    
    /* Remove table borders on mobile since we're using cards */
    .table-container {
        border: none;
        box-shadow: none;
        background-color: transparent;
    }
    
    /* List controls mobile adjustments */
    .list-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    /* Mobile ordering: Form button -> Search bar -> Advanced search */
    .list-controls .buttons-wrapper {
        order: 1;
        width: 100%;
        flex-direction: column;
    }
    
    .list-controls .buttons-wrapper .btn {
        width: 100%;
    }
    
    .list-controls .search-bar-group {
        order: 2;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .list-controls .search-bar {
        order: 1;
        width: 100%;
        max-width: 100%;
    }
    
    .list-controls .btn-advanced-search {
        order: 2;
        width: 100%;
    }
}

/* ========================================= */
/* 12. ACTION BUTTONS IN CARDS - FOOTER POSITIONING */
/* ========================================= */

/* For screens under 1024px, move action buttons to card footer */
@media (max-width: 1023px) {
    /* Ensure cards are flex containers */
    .data-card,
    .client-note {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Dynamic header font size */
    .header-title {
        font-size: clamp(1.2rem, 3vw, 1.8rem) !important; /* Dynamic sizing based on viewport */
        white-space: normal !important; /* Allow wrapping for long text */
        overflow: visible !important;
        line-height: 1.2;
        text-align: center;
        width: 100%;
    }
    
    /* Action buttons container - move to footer */
    .note-buttons {
        margin-top: auto !important;
        padding-top: 16px !important;
        border-top: 1px solid var(--border-color, #dee2e6) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    /* Table cells with action buttons - position at footer (for tablet view) */
    table tbody td.has-action-buttons,
    table tbody td:last-child.has-action-buttons {
        margin-top: auto !important;
        padding-top: 16px !important;
        border-top: 1px solid var(--border-color, #dee2e6) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    /* Hide label for action button cells in tablet view */
    table tbody td.has-action-buttons::before,
    table tbody td:last-child.has-action-buttons::before {
        display: none !important;
    }
    
    /* Make action buttons perfectly circular */
    .action-button-edit,
    .action-button-delete {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: var(--card-bg-color, #ffffff) !important;
        border: 2px solid var(--border-color, #dee2e6) !important;
        transition: all 0.2s ease !important;
        margin: 0 !important;
    }
    
    /* Edit button styling */
    .action-button-edit {
        color: var(--primary-color, #005b96) !important;
        border-color: var(--primary-color, #005b96) !important;
    }
    
    .action-button-edit:hover {
        background-color: var(--primary-color, #005b96) !important;
        color: white !important;
        border-color: var(--primary-color, #005b96) !important;
        opacity: 1 !important;
        transform: scale(1.05) !important;
    }
    
    /* Delete button styling */
    .action-button-delete {
        color: #dc3545 !important;
        border-color: #dc3545 !important;
    }
    
    .action-button-delete:hover {
        background-color: #dc3545 !important;
        color: white !important;
        border-color: #dc3545 !important;
        opacity: 1 !important;
        transform: scale(1.05) !important;
    }
    
    /* Icon sizing inside circular buttons */
    .action-button-edit svg,
    .action-button-delete svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Remove default padding/margin from buttons in cards */
    .data-card .action-button-edit,
    .data-card .action-button-delete,
    .client-note .action-button-edit,
    .client-note .action-button-delete {
        margin: 0 !important;
    }
    
    /* Ensure note-buttons are always visible on mobile (not just on hover) */
    .client-note .note-buttons {
        opacity: 1 !important;
    }
    
    /* For card view tables (mobile), ensure action buttons are in footer */
    @media (max-width: 767px) {
        /* Table rows are already flex containers in card view */
        table tbody td.has-action-buttons,
        table tbody td:last-child.has-action-buttons {
            order: 999 !important;
            margin-top: auto !important;
            padding-top: 12px !important;
            border-top: 1px solid var(--border-color, #dee2e6) !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 12px !important;
        }
        
        /* Hide the label for action button cells */
        table tbody td.has-action-buttons::before,
        table tbody td:last-child.has-action-buttons::before {
            display: none !important;
        }
    }
    
    /* Row number column - hide on mobile or make it part of card header */
    table tbody td.row-number {
        display: none;
    }
    
    /* Compact table specific adjustments */
    .compact-table tbody tr {
        padding: 10px;
    }
    
    .compact-table tbody td {
        padding: 6px 0;
        font-size: 0.9em;
    }
}

/* iPad/Tablet (768px - 1024px) - Optional horizontal scroll or keep card view */
@media (min-width: 768px) and (max-width: 1024px) {
    /* For complex tables, allow horizontal scroll */
    .table-wrapper,
    .table-responsive,
    .table-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Or keep card view for better readability - uncomment to use */
    /*
    table thead {
        display: none;
    }
    
    table tbody tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        padding: 12px;
    }
    
    table tbody td {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--secondary-color);
        margin-left: 12px;
        min-width: 100px;
    }
    */
}

/* ========================================= */
/* 5. MODALS & OVERLAYS */
/* ========================================= */

@media (max-width: 768px) {
    /* Modal Content - Responsive Width */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
    }
    
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
    
    .modal-lg,
    .modal-xl {
        max-width: calc(100% - 20px) !important;
    }
    
    /* Modal Body - Scrollable */
    .modal-body {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem !important;
    }
    
    /* Modal Header & Footer */
    .modal-header,
    .modal-footer {
        padding: 0.75rem 1rem !important;
    }
    
    /* Modal Title */
    .modal-title {
        font-size: 1.1rem !important;
    }
    
    /* Form in Modals */
    .modal-content .form-group {
        margin-bottom: 0.75rem;
    }
    
    .modal-content .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Modal Buttons */
    .modal-footer .btn {
        width: 100%;
        margin: 4px 0;
    }
    
    .modal-footer {
        flex-direction: column;
    }
}

/* Landscape Mobile - Extra height for modals */
@media (max-width: 768px) and (orientation: landscape) {
    .modal-body {
        max-height: calc(100vh - 150px);
    }
}

/* ========================================= */
/* 6. PAGINATION */
/* ========================================= */

@media (max-width: 768px) {
    .pagination-container {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px 12px !important;
    }
    
    .pagination-info {
        order: 2;
        text-align: center;
        font-size: 0.85em;
    }
    
    .pagination {
        order: 1;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px !important;
    }
    
    .pagination-page-size {
        order: 3;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 6px;
    }
    
    .pagination-page-size__select {
        width: 100% !important;
    }
}

/* Very Small Screens - Simplify Pagination */
@media (max-width: 480px) {
    /* Hide intermediate page numbers, show only prev/next and current */
    .page-link:not([aria-label="עמוד קודם"]):not([aria-label="עמוד הבא"]):not(.active) {
        display: none;
    }
    
    /* Show ellipsis or current page */
    .page-item.active .page-link {
        display: flex;
    }
    
    /* Ensure prev/next are always visible */
    .page-link[aria-label="עמוד קודם"],
    .page-link[aria-label="עמוד הבא"] {
        display: flex !important;
    }
    
    .pagination {
        gap: 8px !important;
    }
    
    .page-link {
        min-width: 40px;
        min-height: 40px;
    }
}

/* ========================================= */
/* 7. CLIENT DETAILS SPECIFIC */
/* ========================================= */

@media (max-width: 768px) {
    /* Client Layout Grid - Stack Vertically */
    .client-layout-grid {
        gap: 16px !important;
    }
    
    .left-column,
    .right-column {
        width: 100%;
    }
    
    /* Data Cards */
    .data-card {
        padding: 16px !important;
    }
    
    .data-card-title {
        font-size: 1.1rem !important;
        margin-bottom: 16px !important;
    }
    
    /* Data Field Grid */
    .data-field-grid {
        gap: 12px 16px !important;
    }
    
    .data-field {
        width: 100%;
    }
    
    /* Action Buttons in Client Details */
    .action-buttons-container {
        flex-direction: column;
    }
    
    .action-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Table Scroll Wrapper */
    .table-scroll-wrapper {
        max-height: 300px;
    }
}

/* ========================================= */
/* 8. SERVICE CALL CREATION */
/* ========================================= */

@media (max-width: 768px) {
    /* Form Grid - Single Column */
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Step Navigation - Sticky at Bottom */
    .step-actions {
        position: sticky;
        bottom: 0;
        background-color: var(--card-bg-color, #ffffff);
        padding: 12px;
        border-top: 1px solid var(--border-color, #dee2e6);
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
        z-index: 100;
    }
    
    /* Form Sections */
    .form-section-card {
        margin-bottom: 16px;
    }
}

/* ========================================= */
/* 9. SEARCH RESULTS & CARDS */
/* ========================================= */

@media (max-width: 768px) {
    /* Results Grid - Single Column */
    .results-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .result-card {
        padding: 16px !important;
    }

    .results-table tbody td {
        width: auto !important;
    }

    .results-table td:nth-child(6) {
        gap: 12px
    }
}

/* ========================================= */
/* 10. UTILITY CLASSES */
/* ========================================= */

@media (max-width: 768px) {
    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }
    
    /* Show only on mobile */
    .show-mobile {
        display: block !important;
    }
    
    /* Full width on mobile */
    .full-width-mobile {
        width: 100% !important;
    }
}

/* ========================================= */
/* 11. ACCESSIBILITY & TOUCH IMPROVEMENTS */
/* ========================================= */

@media (max-width: 768px) {
    /* Ensure all clickable elements are touch-friendly */
    a,
    button,
    input[type="button"],
    input[type="submit"],
    .clickable {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Increase tap target for icons */
    .action-button-edit,
    .action-button-delete,
    .edit-icon,
    .copy-icon {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Prevent text selection on buttons during tap */
    .btn,
    button {
        -webkit-tap-highlight-color: rgba(0, 91, 150, 0.2);
        user-select: none;
    }
}