/* Protocol Registry - Custom Admin Panel Styles */

/* Contact Information Field Styling */
.contact-info-field {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin-bottom: 1rem;
}

/* Dark mode support for contact fields */
[data-bs-theme="dark"] .contact-info-field {
    background: #2b2b2b;
    border-color: #4a4a4a;
}

/* Ensure proper spacing for contact field groups */
.contact-info-field .form-group {
    margin-bottom: 0;
}

/* Contact info alert styling */
.contact-info-alert {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

/* ============================================
   MOBILE RESPONSIVE STYLES FOR SHOW OPERATION
   ============================================ */

/* On mobile, stack the label and value vertically */
@media (max-width: 767.98px) {
    /* Main show operation table */
    .card.no-padding table.table {
        display: block;
        width: 100%;
    }
    
    .card.no-padding table.table tbody {
        display: block;
        width: 100%;
    }
    
    .card.no-padding table.table tr {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #dee2e6;
        padding: 12px 0;
    }
    
    .card.no-padding table.table > tbody > tr > td {
        display: block;
        width: 100% !important;
        border: none !important;
        padding: 4px 15px !important;
    }
    
    /* Label cell - first td */
    .card.no-padding table.table > tbody > tr > td:first-child {
        background-color: transparent;
        font-size: 11px;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding-bottom: 2px !important;
    }
    
    /* Value cell - second td */
    .card.no-padding table.table > tbody > tr > td:last-child {
        background-color: transparent;
        padding-top: 2px !important;
        padding-bottom: 8px !important;
        font-size: 14px;
    }
    
    /* Make strong tag in label lighter since we have uppercase */
    .card.no-padding table.table > tbody > tr > td:first-child strong {
        font-weight: 500;
    }
}

/* ============================================
   NESTED DATA TABLES (Transportation, Work Periods)
   ============================================ */

/* Make nested tables scrollable on tablets */
@media (max-width: 991.98px) {
    td > table.table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    td > table.table th,
    td > table.table td {
        white-space: nowrap;
        padding: 8px 12px !important;
        font-size: 13px;
    }
}

/* Mobile: Transform nested tables into card-like layout */
@media (max-width: 575.98px) {
    td > table.table {
        border: none !important;
    }
    
    td > table.table thead {
        display: none !important;
    }
    
    td > table.table tbody {
        display: block;
    }
    
    td > table.table tbody tr {
        display: block;
        background: #f8f9fa;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 10px;
        border: 1px solid #e9ecef;
    }
    
    td > table.table tbody td {
        display: block !important;
        width: 100% !important;
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: 1px solid #e9ecef !important;
        white-space: normal !important;
        text-align: left !important;
    }
    
    td > table.table tbody td:last-child {
        border-bottom: none !important;
    }
}

/* Dark mode support for mobile nested tables */
[data-bs-theme="dark"] td > table.table tbody tr {
    background: #2b2b2b;
    border-color: #4a4a4a;
}

[data-bs-theme="dark"] td > table.table tbody td {
    border-color: #4a4a4a !important;
}

/* ============================================
   HEADER AND NAVIGATION - MOBILE
   ============================================ */

@media (max-width: 767.98px) {
    /* Page header */
    .header-operation h1 {
        font-size: 1.25rem;
    }
    
    .header-operation p {
        font-size: 0.85rem;
    }
    
    /* Breadcrumbs */
    .breadcrumb {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 4px;
    }
}

/* ============================================
   ATTACHMENTS SECTION - MOBILE
   ============================================ */

@media (max-width: 767.98px) {
    .service-protocol-attachments-section {
        width: 100%;
        overflow: hidden;
    }
    
    .attachments-grid {
        width: 100%;
    }
    
    .attachment-card-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .attachment-card {
        margin: 0;
    }
}

/* ============================================
   GENERAL MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 767.98px) {
    /* Cards */
    .card {
        margin-bottom: 1rem;
        border-radius: 8px;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Buttons */
    .btn-sm {
        font-size: 0.8rem;
    }
    
    /* Badges */
    .badge {
        font-size: 0.7rem;
        padding: 0.35em 0.65em;
    }
    
    /* Images */
    .card-body img {
        max-width: 100%;
        height: auto;
    }
    
    /* Signature images - make them smaller on mobile */
    a[href^="data:image"] img {
        max-width: 180px;
        height: auto;
    }
}

/* ============================================
   ATTACHMENT BUTTONS - REMOVE UNDERLINE ON HOVER
   Override Tabler's global a:hover { text-decoration: underline; }
   ============================================ */

.attachment-btn,
.attachment-btn:hover,
.attachment-btn:focus,
.attachment-btn:active {
    text-decoration: none !important;
}

/* More specific selector to ensure override */
.service-protocol-attachments-section a.attachment-btn:hover {
    text-decoration: none !important;
}