/* ========== Enhanced Professional Details Page Styles ========== */

/* ========== CSS Variables ========== */
:root {
    /* Colors */
    --primary-red: #dc3545;
    --dark-red: #c82333;
    --primary-blue: #0d6efd;
    --dark-blue: #0a58ca;
    --success-green: #28a745;
    --dark-green: #218838;
    --warning-orange: #ffc107;
    --info-blue: #17a2b8;
    --danger-red: #dc3545;
    --text-dark: #2c3e50;
    --text-gray: #6c757d;
    --text-light: #95a5a6;
    --border-color: #dee2e6;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.2);
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    /* Transitions */
    --transition-fast: all 0.2s ease;
    --transition: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
}

/* ========== Permit Theme Colors ========== */
.permit-hot {
    --primary-color: #dc3545;
    --dark-color: #c82333;
    --light-color: #f8d7da;
}

.permit-cold {
    --primary-color: #0d6efd;
    --dark-color: #0a58ca;
    --light-color: #cfe2ff;
}

/* ========== Global Styles ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    padding: 20px 0;
}

.container {
    max-width: 1400px !important;
    padding: 0 20px;
    margin: 0 auto;
}

/* ========== Desktop Details Card ========== */
.details-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* ========== Header Section ========== */
.details-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);
    padding: 40px;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

    .details-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 400px;
        height: 400px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        z-index: 0;
    }

.header-content {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.header-icon {
    font-size: 4rem;
    opacity: 0.9;
    animation: fadeInLeft 0.6s ease;
}

.header-text {
    flex: 1;
    animation: fadeInRight 0.6s ease;
}

.header-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.header-subtitle {
    font-size: 1.1rem;
    opacity: 0.95;
    margin: 8px 0 0 0;
    font-weight: 500;
}

/* ========== Body Section ========== */
.details-body {
    padding: 40px;
    background: var(--bg-light);
}

/* ========== Info Section ========== */
.info-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 30px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    animation: fadeInUp 0.5s ease;
}

    .info-section:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
    }

.section-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--primary-color);
}

.permit-hot .section-title {
    border-bottom-color: #dc3545;
}

.permit-cold .section-title {
    border-bottom-color: #0d6efd;
}

.section-title i {
    font-size: 1.8rem;
    color: var(--primary-color);
    animation: pulse 2s infinite;
}

.permit-hot .section-title i {
    color: #dc3545;
}

.permit-cold .section-title i {
    color: #0d6efd;
}

.section-title span {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.section-title small {
    font-size: 0.9rem;
    color: var(--text-gray);
    font-weight: 600;
    margin-right: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========== Info Grid ========== */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

    .info-item::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 4px;
        height: 100%;
        background: var(--primary-color);
        opacity: 0;
        transition: var(--transition);
    }

.permit-hot .info-item::before {
    background: #dc3545;
}

.permit-cold .info-item::before {
    background: #0d6efd;
}

.info-item:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    transform: translateX(-2px);
}

.permit-hot .info-item:hover {
    border-color: #dc3545;
}

.permit-cold .info-item:hover {
    border-color: #0d6efd;
}

.info-item:hover::before {
    opacity: 1;
}

.info-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-label-en {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 600;
    font-style: italic;
}

.info-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
}

.info-full {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-item-full {
    padding: 20px;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border-radius: var(--radius-md);
    border-right: 4px solid var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.permit-hot .info-item-full {
    border-right-color: #dc3545;
}

.permit-cold .info-item-full {
    border-right-color: #0d6efd;
}

.info-value-text {
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1.8;
    margin: 10px 0 0 0;
}

/* ========== Badge Styles ========== */
.badge-permit {
    display: inline-block;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
    color: var(--white);
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.permit-hot .badge-permit {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.permit-cold .badge-permit {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
}

/* ========== Isolation Section ========== */
.isolation-section {
    margin-top: 24px;
    padding: 24px;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border-radius: var(--radius-lg);
    border: 2px solid #e9ecef;
    box-shadow: var(--shadow-sm);
}

.isolation-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .isolation-title::before {
        content: '';
        width: 4px;
        height: 24px;
        background: var(--primary-color);
        border-radius: 2px;
    }

.permit-hot .isolation-title::before {
    background: #dc3545;
}

.permit-cold .isolation-title::before {
    background: #0d6efd;
}

.badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.badge-isolation {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #e9ecef;
    color: #6c757d;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 700;
    transition: var(--transition);
    border: 2px solid transparent;
}

    .badge-isolation.active {
        background: linear-gradient(135deg, #28a745, #218838);
        color: var(--white);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
        border-color: #28a745;
        transform: scale(1.05);
    }

    .badge-isolation i {
        font-size: 1.4rem;
    }

/* ========== Signature Box ========== */
.signature-box {
    margin-top: 24px;
    padding: 24px;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border-radius: var(--radius-lg);
    border: 2px solid #e9ecef;
    box-shadow: var(--shadow-sm);
}

.signature-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .signature-title::before {
        content: '✍';
        font-size: 1.5rem;
    }

.signature-display {
    background: var(--white);
    border: 3px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    display: inline-block;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.signature-img {
    max-width: 300px;
    max-height: 150px;
    display: block;
}

/* ========== Certificates Grid ========== */
.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.cert-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border-radius: var(--radius-md);
    border: 2px solid #e9ecef;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

    .cert-item::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 100%;
        background: rgba(40, 167, 69, 0.1);
        transition: var(--transition);
    }

    .cert-item:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

        .cert-item:hover::before {
            width: 100%;
        }

.cert-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 800;
    text-align: center;
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

    .cert-badge.required {
        background: linear-gradient(135deg, #28a745, #218838);
        color: var(--white);
        box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
    }

    .cert-badge.not-required {
        background: #e9ecef;
        color: #6c757d;
    }

.cert-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    position: relative;
    z-index: 1;
}

.cert-name-en {
    font-size: 0.85rem;
    color: var(--text-gray);
    font-style: italic;
    position: relative;
    z-index: 1;
}

.cert-no {
    font-size: 0.9rem;
    color: var(--text-gray);
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.other-cert {
    margin-top: 24px;
    padding: 24px;
    background: linear-gradient(145deg, #d4edda, #ffffff);
    border-radius: var(--radius-lg);
    border: 3px solid #28a745;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-md);
}

.cert-detail {
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 600;
}

/* ========== Hazards Section ========== */
.hazards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.hazards-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hazards-subtitle {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
    font-weight: 800;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .hazards-subtitle.danger {
        background: linear-gradient(135deg, #f8d7da, #f5c6cb);
        color: #721c24;
        border: 3px solid #f5c6cb;
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2);
    }

    .hazards-subtitle.success {
        background: linear-gradient(135deg, #d4edda, #c3e6cb);
        color: #155724;
        border: 3px solid #c3e6cb;
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
    }

    .hazards-subtitle.info {
        background: linear-gradient(135deg, #d1ecf1, #bee5eb);
        color: #0c5460;
        border: 3px solid #bee5eb;
        box-shadow: 0 4px 15px rgba(23, 162, 184, 0.2);
    }

    .hazards-subtitle.warning {
        background: linear-gradient(135deg, #fff3cd, #ffeeba);
        color: #856404;
        border: 3px solid #ffeeba;
        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
    }

    .hazards-subtitle i {
        font-size: 1.5rem;
    }

.hazards-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hazard-badge {
    display: inline-block;
    padding: 10px 18px;
    background: #e9ecef;
    color: #6c757d;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    transition: var(--transition);
    border: 2px solid transparent;
}

    .hazard-badge.active-danger {
        background: linear-gradient(135deg, #dc3545, #c82333);
        color: var(--white);
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
        border-color: #dc3545;
        transform: scale(1.05);
    }

    .hazard-badge.active-success {
        background: linear-gradient(135deg, #28a745, #218838);
        color: var(--white);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
        border-color: #28a745;
        transform: scale(1.05);
    }

    .hazard-badge.active-info {
        background: linear-gradient(135deg, #17a2b8, #138496);
        color: var(--white);
        box-shadow: 0 4px 15px rgba(23, 162, 184, 0.4);
        border-color: #17a2b8;
        transform: scale(1.05);
    }

    .hazard-badge.active-warning {
        background: linear-gradient(135deg, #ffc107, #e0a800);
        color: #212529;
        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
        border-color: #ffc107;
        transform: scale(1.05);
        font-weight: 800;
    }

.additional-info {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(145deg, #e7f3ff, #cfe2ff);
    border-radius: var(--radius-md);
    border-right: 4px solid #0d6efd;
    color: var(--text-dark);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* ========== Gas Test Cards ========== */
.gas-test-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 2px solid #e9ecef;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

    .gas-test-card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
    }

.gas-test-header {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: var(--white);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 800;
    font-size: 1.2rem;
}

    .gas-test-header i {
        font-size: 1.5rem;
    }

.gas-test-body {
    padding: 24px;
}

.gas-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.gas-info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: var(--radius-sm);
}

.gas-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-gray);
    text-transform: uppercase;
}

.gas-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.gas-readings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.gas-reading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-radius: var(--radius-md);
    transition: var(--transition);
    border: 3px solid;
}

    .gas-reading.safe {
        background: linear-gradient(145deg, #d4edda, #c3e6cb);
        border-color: #28a745;
    }

    .gas-reading.danger {
        background: linear-gradient(145deg, #f8d7da, #f5c6cb);
        border-color: #dc3545;
    }

    .gas-reading:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

.reading-label {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-dark);
    text-transform: uppercase;
}

.reading-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-dark);
}

.reading-status {
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.9;
}

.other-gas-info {
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(145deg, #e7f3ff, #cfe2ff);
    border-radius: var(--radius-md);
    border-right: 4px solid #0d6efd;
    box-shadow: var(--shadow-sm);
}

.badge-info {
    display: inline-block;
    padding: 6px 16px;
    background: #17a2b8;
    color: var(--white);
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-right: 8px;
}

.gas-signature {
    margin-top: 24px;
    padding: 20px;
    background: var(--white);
    border-radius: var(--radius-md);
    border: 2px solid #e9ecef;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-sm);
}

.signature-img-small {
    max-width: 200px;
    max-height: 100px;
}

/* ========== Personnel Section ========== */
.personnel-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
    color: var(--white);
    border-radius: var(--radius-md);
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}

.permit-hot .personnel-badge {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.permit-cold .personnel-badge {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
}

.personnel-badge:hover {
    transform: translateX(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.personnel-badge i {
    font-size: 1.4rem;
}

.personnel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* ========== Authorities Section ========== */
.authorities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.authority-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid #e9ecef;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
}

    .authority-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-xl);
    }

.authority-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.authority-card.issuing .authority-header {
    background: linear-gradient(135deg, #28a745, #218838);
    color: var(--white);
}

.authority-card.request .authority-header {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: var(--white);
}

.authority-card.performing .authority-header {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #212529;
}

.authority-header i {
    font-size: 2rem;
}

.authority-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .authority-title span {
        font-size: 1.2rem;
        font-weight: 800;
    }

    .authority-title small {
        font-size: 0.9rem;
        opacity: 0.95;
        font-weight: 600;
    }

.authority-body {
    padding: 24px;
}

.authority-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.authority-name-empty {
    font-size: 1rem;
    font-style: italic;
    color: var(--text-gray);
    margin-bottom: 16px;
}

.authority-signature {
    background: #f8f9fa;
    border: 3px solid #dee2e6;
    border-radius: var(--radius-md);
    padding: 16px;
    display: inline-block;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

    .authority-signature img {
        max-width: 200px;
        max-height: 100px;
        display: block;
    }

.no-signature {
    font-size: 1rem;
    color: var(--text-gray);
    font-style: italic;
    font-weight: 600;
}

/* ========== No Data Alert ========== */
.no-data-alert {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(145deg, #e7f3ff, #cfe2ff);
    border: 3px solid #0d6efd;
    border-radius: var(--radius-lg);
    color: #084298;
    box-shadow: var(--shadow-sm);
}

    .no-data-alert i {
        font-size: 2rem;
    }

    .no-data-alert span {
        font-weight: 700;
        font-size: 1.1rem;
    }

    .no-data-alert small {
        font-size: 0.9rem;
        opacity: 0.85;
        display: block;
        margin-top: 4px;
    }

    .no-data-alert.warning {
        background: linear-gradient(145deg, #fff3cd, #ffeeba);
        border-color: #ffc107;
        color: #856404;
    }

    .no-data-alert.secondary {
        background: linear-gradient(145deg, #e9ecef, #dee2e6);
        border-color: #6c757d;
        color: #495057;
    }

/* ========== Footer Section ========== */
.details-footer {
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    padding: 24px 40px;
    border-top: 3px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

.footer-actions {
    display: flex;
    gap: 16px;
}

.btn-back,
.btn-edit,
.btn-print {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-back {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

    .btn-back:hover {
        background: linear-gradient(135deg, #5a6268, #545b62);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
        color: var(--white);
    }

.btn-edit {
    background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
    color: var(--white);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.permit-hot .btn-edit {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.permit-cold .btn-edit {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
}

.btn-edit:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: var(--white);
}

.btn-print {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
}

    .btn-print:hover {
        background: linear-gradient(135deg, #138496, #117a8b);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
        color: var(--white);
    }

/* ========== Alert Styles ========== */
.alert {
    padding: 18px 24px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    font-weight: 700;
    animation: slideDown 0.4s ease;
    border: 2px solid;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-danger {
    background: linear-gradient(145deg, #f8d7da, #f5c6cb);
    border-color: #f5c6cb;
    color: #721c24;
    box-shadow: var(--shadow-sm);
}

    .alert-danger i {
        margin-left: 10px;
        font-size: 1.2rem;
    }

/* ========== Animations ========== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* ========== Mobile Responsive Styles ========== */
@media (max-width: 767.98px) {
    body {
        padding: 10px 0;
        background: var(--bg-light);
    }

    .container {
        padding: 0 10px;
    }

    .mobile-details-card {
        background: var(--white);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        margin-bottom: 20px;
    }

    .mobile-details-header {
        background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
        padding: 24px 16px;
        color: var(--white);
        text-align: center;
    }

    .permit-hot .mobile-details-header {
        background: linear-gradient(135deg, #dc3545, #c82333);
    }

    .permit-cold .mobile-details-header {
        background: linear-gradient(135deg, #0d6efd, #0a58ca);
    }

    .mobile-details-header i {
        font-size: 3rem;
        margin-bottom: 12px;
        display: block;
        animation: pulse 2s infinite;
    }

    .mobile-details-header h1 {
        font-size: 1.5rem;
        font-weight: 800;
        margin: 0 0 8px 0;
        line-height: 1.3;
    }

    .mobile-details-header p {
        font-size: 1rem;
        opacity: 0.95;
        margin: 0;
        font-weight: 600;
    }

    .mobile-details-body {
        padding: 16px;
    }

    .mobile-section {
        background: #f8f9fa;
        border-radius: var(--radius-md);
        padding: 16px;
        margin-bottom: 16px;
        box-shadow: var(--shadow-sm);
    }

    .mobile-section-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 3px solid var(--primary-color);
    }

    .permit-hot .mobile-section-title {
        border-bottom-color: #dc3545;
    }

    .permit-cold .mobile-section-title {
        border-bottom-color: #0d6efd;
    }

    .mobile-section-title i {
        font-size: 1.5rem;
        color: var(--primary-color);
    }

    .permit-hot .mobile-section-title i {
        color: #dc3545;
    }

    .permit-cold .mobile-section-title i {
        color: #0d6efd;
    }

    .mobile-info-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-info-item,
    .mobile-info-item-full {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px;
        background: var(--white);
        border-radius: var(--radius-sm);
        border-right: 3px solid var(--primary-color);
        box-shadow: var(--shadow-sm);
    }

    .permit-hot .mobile-info-item,
    .permit-hot .mobile-info-item-full {
        border-right-color: #dc3545;
    }

    .permit-cold .mobile-info-item,
    .permit-cold .mobile-info-item-full {
        border-right-color: #0d6efd;
    }

    .mobile-label {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text-gray);
        text-transform: uppercase;
    }

    .mobile-value {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text-dark);
    }

    .mobile-value-text {
        font-size: 1rem;
        color: var(--text-dark);
        line-height: 1.6;
        margin: 6px 0 0 0;
    }

    .mobile-badge-permit {
        display: inline-block;
        padding: 8px 16px;
        background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
        color: var(--white);
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 700;
        align-self: flex-start;
    }

    .permit-hot .mobile-badge-permit {
        background: linear-gradient(135deg, #dc3545, #c82333);
    }

    .permit-cold .mobile-badge-permit {
        background: linear-gradient(135deg, #0d6efd, #0a58ca);
    }

    .mobile-isolation {
        margin-top: 16px;
        padding: 16px;
        background: var(--white);
        border-radius: var(--radius-sm);
        border: 2px solid #e9ecef;
    }

        .mobile-isolation h6 {
            font-size: 1rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 12px;
        }

    .mobile-badges {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-badge-isolation {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: #e9ecef;
        color: #6c757d;
        border-radius: var(--radius-sm);
        font-size: 0.95rem;
        font-weight: 700;
    }

        .mobile-badge-isolation.active {
            background: linear-gradient(135deg, #28a745, #218838);
            color: var(--white);
            box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
        }

        .mobile-badge-isolation i {
            font-size: 1.3rem;
        }

    .mobile-signature {
        margin-top: 16px;
        padding: 16px;
        background: var(--white);
        border-radius: var(--radius-sm);
        border: 2px solid #e9ecef;
    }

        .mobile-signature h6 {
            font-size: 1rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 12px;
        }

        .mobile-signature img {
            max-width: 100%;
            height: auto;
            border: 2px solid #e9ecef;
            border-radius: var(--radius-sm);
            padding: 10px;
            background: #f8f9fa;
        }

        .mobile-signature.small img {
            max-width: 180px;
        }

    .mobile-certificates {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-cert {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px;
        background: var(--white);
        border-radius: var(--radius-sm);
        border: 2px solid #e9ecef;
    }

        .mobile-cert.required {
            border-color: #28a745;
            background: linear-gradient(145deg, #d4edda, #ffffff);
        }

    .mobile-cert-status {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 800;
        align-self: flex-start;
    }

    .mobile-cert.required .mobile-cert-status {
        background: #28a745;
        color: var(--white);
    }

    .mobile-cert.not-required .mobile-cert-status {
        background: #6c757d;
        color: var(--white);
    }

    .mobile-cert-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-dark);
    }

    .mobile-cert-no {
        font-size: 0.85rem;
        color: var(--text-gray);
        font-weight: 600;
    }

    .mobile-hazards-group {
        margin-bottom: 16px;
    }

    .mobile-hazards-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.05rem;
        font-weight: 800;
        padding: 12px 14px;
        border-radius: var(--radius-sm);
        margin-bottom: 12px;
    }

        .mobile-hazards-title.danger {
            background: linear-gradient(145deg, #f8d7da, #f5c6cb);
            color: #721c24;
            border: 2px solid #f5c6cb;
        }

        .mobile-hazards-title.success {
            background: linear-gradient(145deg, #d4edda, #c3e6cb);
            color: #155724;
            border: 2px solid #c3e6cb;
        }

        .mobile-hazards-title.info {
            background: linear-gradient(145deg, #d1ecf1, #bee5eb);
            color: #0c5460;
            border: 2px solid #bee5eb;
        }

        .mobile-hazards-title.warning {
            background: linear-gradient(145deg, #fff3cd, #ffeeba);
            color: #856404;
            border: 2px solid #ffeeba;
        }

    .mobile-hazards-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mobile-hazard-item {
        padding: 8px 14px;
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        font-weight: 700;
    }

        .mobile-hazard-item.danger {
            background: linear-gradient(135deg, #dc3545, #c82333);
            color: var(--white);
        }

        .mobile-hazard-item.success {
            background: linear-gradient(135deg, #28a745, #218838);
            color: var(--white);
        }

        .mobile-hazard-item.info {
            background: linear-gradient(135deg, #17a2b8, #138496);
            color: var(--white);
        }

        .mobile-hazard-item.warning {
            background: linear-gradient(135deg, #ffc107, #e0a800);
            color: #212529;
            font-weight: 800;
        }

    .mobile-gas-test {
        background: var(--white);
        border-radius: var(--radius-sm);
        padding: 16px;
        margin-bottom: 16px;
        border: 2px solid #e9ecef;
        box-shadow: var(--shadow-sm);
    }

    .mobile-gas-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: #17a2b8;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e9ecef;
    }

    .mobile-gas-info {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
    }

    .mobile-gas-item {
        display: flex;
        justify-content: space-between;
        font-size: 0.95rem;
    }

        .mobile-gas-item span {
            color: var(--text-gray);
            font-weight: 600;
        }

        .mobile-gas-item strong {
            color: var(--text-dark);
            font-weight: 700;
        }

    .mobile-gas-readings {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 14px;
    }

    .mobile-gas-reading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px;
        border-radius: var(--radius-sm);
        border: 2px solid;
    }

        .mobile-gas-reading.safe {
            background: linear-gradient(145deg, #d4edda, #c3e6cb);
            border-color: #28a745;
        }

        .mobile-gas-reading.danger {
            background: linear-gradient(145deg, #f8d7da, #f5c6cb);
            border-color: #dc3545;
        }

        .mobile-gas-reading .reading-label {
            font-size: 0.8rem;
            font-weight: 800;
            color: var(--text-dark);
        }

        .mobile-gas-reading .reading-value {
            font-size: 1.2rem;
            font-weight: 900;
            color: var(--text-dark);
        }

    .mobile-personnel-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-personnel-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
        color: var(--white);
        border-radius: var(--radius-sm);
        font-weight: 700;
        font-size: 1rem;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    }

    .permit-hot .mobile-personnel-item {
        background: linear-gradient(135deg, #dc3545, #c82333);
    }

    .permit-cold .mobile-personnel-item {
        background: linear-gradient(135deg, #0d6efd, #0a58ca);
    }

    .mobile-personnel-item i {
        font-size: 1.3rem;
    }

    .mobile-authority {
        background: var(--white);
        border-radius: var(--radius-sm);
        padding: 16px;
        margin-bottom: 14px;
        border: 2px solid #e9ecef;
        box-shadow: var(--shadow-sm);
    }

        .mobile-authority h6 {
            font-size: 1rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 10px;
        }

        .mobile-authority p {
            font-size: 0.95rem;
            color: var(--text-gray);
            margin-bottom: 12px;
            font-weight: 600;
        }

        .mobile-authority img {
            max-width: 180px;
            height: auto;
            border: 2px solid #e9ecef;
            border-radius: var(--radius-sm);
            padding: 10px;
            background: #f8f9fa;
        }

    .mobile-no-data {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: linear-gradient(145deg, #e7f3ff, #cfe2ff);
        border: 2px solid #0d6efd;
        border-radius: var(--radius-sm);
        color: #084298;
    }

        .mobile-no-data i {
            font-size: 1.5rem;
        }

        .mobile-no-data span {
            font-weight: 700;
            font-size: 0.95rem;
        }

    .mobile-footer {
        background: linear-gradient(145deg, #ffffff, #f8f9fa);
        padding: 16px;
        border-top: 2px solid var(--border-color);
        display: flex;
        flex-direction: column;
        gap: 12px;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
    }

    .mobile-btn-print,
    .mobile-btn-edit,
    .mobile-btn-back {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 24px;
        border-radius: var(--radius-sm);
        font-size: 1.05rem;
        font-weight: 700;
        text-decoration: none;
        transition: var(--transition);
        border: none;
        cursor: pointer;
        text-transform: uppercase;
    }

    .mobile-btn-print {
        background: linear-gradient(135deg, #17a2b8, #138496);
        color: var(--white);
        box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
    }

    .mobile-btn-edit {
        background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
        color: var(--white);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .permit-hot .mobile-btn-edit {
        background: linear-gradient(135deg, #dc3545, #c82333);
    }

    .permit-cold .mobile-btn-edit {
        background: linear-gradient(135deg, #0d6efd, #0a58ca);
    }

    .mobile-btn-back {
        background: linear-gradient(135deg, #6c757d, #5a6268);
        color: var(--white);
        box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
    }

        .mobile-btn-print:active,
        .mobile-btn-edit:active,
        .mobile-btn-back:active {
            transform: scale(0.96);
        }
}

/* ========== Tablet Optimizations ========== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hazards-grid {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .authorities-grid {
        grid-template-columns: 1fr;
    }

    .certificates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== Large Screen Optimizations ========== */
@media (min-width: 1200px) {
    .container {
        max-width: 1600px !important;
    }

    .details-body {
        padding: 50px;
    }

    .info-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hazards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== Print Styles - Professional Layout ========== */
@media print {
    /* Reset page settings */
    @page {
        size: A4;
        margin: 15mm;
    }

    * {
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    body {
        background: white !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .container {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide interactive elements */
    .details-footer,
    .mobile-footer,
    .btn-back,
    .btn-edit,
    .btn-print,
    .mobile-btn-print,
    .mobile-btn-edit,
    .mobile-btn-back,
    button {
        display: none !important;
    }

    /* Card styling for print */
    .details-card,
    .mobile-details-card {
        box-shadow: none !important;
        border: 2px solid #333 !important;
        margin: 0 !important;
        page-break-after: avoid;
    }

    /* Header for print */
    .details-header,
    .mobile-details-header {
        background: linear-gradient(135deg, var(--primary-color), var(--dark-color)) !important;
        color: white !important;
        padding: 20px !important;
        page-break-after: avoid;
    }

    .permit-hot .details-header,
    .permit-hot .mobile-details-header {
        background: linear-gradient(135deg, #dc3545, #c82333) !important;
    }

    .permit-cold .details-header,
    .permit-cold .mobile-details-header {
        background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
    }

    /* Body for print */
    .details-body,
    .mobile-details-body {
        padding: 15px !important;
        background: white !important;
    }

    /* Sections */
    .info-section,
    .mobile-section {
        page-break-inside: avoid;
        margin-bottom: 15px !important;
        padding: 15px !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }

    /* Section titles */
    .section-title,
    .mobile-section-title {
        border-bottom: 2px solid #333 !important;
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
    }

    /* Grid layouts */
    .info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .authorities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .certificates-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .hazards-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .personnel-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Info items */
    .info-item,
    .mobile-info-item {
        padding: 10px !important;
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }

    /* Gas test cards */
    .gas-test-card,
    .mobile-gas-test {
        page-break-inside: avoid;
        border: 2px solid #ddd !important;
        margin-bottom: 10px !important;
    }

    .gas-test-header {
        background: linear-gradient(135deg, #17a2b8, #138496) !important;
        color: white !important;
        padding: 10px 15px !important;
    }

    .gas-readings,
    .mobile-gas-readings {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .gas-reading,
    .mobile-gas-reading {
        padding: 10px !important;
        page-break-inside: avoid;
    }

    /* Authority cards */
    .authority-card,
    .mobile-authority {
        page-break-inside: avoid;
        border: 1px solid #ddd !important;
        margin-bottom: 10px !important;
    }

    .authority-header {
        padding: 10px 15px !important;
    }

    .authority-body {
        padding: 15px !important;
    }

    /* Signatures */
    .signature-img,
    .signature-img-small,
    .mobile-signature img,
    .authority-signature img {
        max-height: 60px !important;
    }

    /* Badges */
    .hazard-badge,
    .mobile-hazard-item {
        padding: 5px 10px !important;
        font-size: 0.75rem !important;
    }

    .personnel-badge,
    .mobile-personnel-item {
        padding: 8px 12px !important;
    }

    /* Font sizes for print */
    .header-title {
        font-size: 1.8rem !important;
    }

    .section-title span {
        font-size: 1.2rem !important;
    }

    .info-label,
    .mobile-label {
        font-size: 0.8rem !important;
    }

    .info-value,
    .mobile-value {
        font-size: 0.95rem !important;
    }

    /* Ensure backgrounds print */
    .badge-permit,
    .mobile-badge-permit,
    .badge-isolation,
    .mobile-badge-isolation,
    .hazard-badge,
    .mobile-hazard-item,
    .cert-badge,
    .mobile-cert-status,
    .hazards-subtitle,
    .mobile-hazards-title {
        background: inherit !important;
        border: 1px solid #666 !important;
    }

        /* Certificate badges for print */
        .cert-badge.required,
        .mobile-cert.required .mobile-cert-status {
            background: #28a745 !important;
            color: white !important;
        }

        .cert-badge.not-required,
        .mobile-cert.not-required .mobile-cert-status {
            background: #6c757d !important;
            color: white !important;
        }

        /* Hazard items active states */
        .hazard-badge.active-danger,
        .mobile-hazard-item.danger {
            background: #dc3545 !important;
            color: white !important;
        }

        .hazard-badge.active-success,
        .mobile-hazard-item.success {
            background: #28a745 !important;
            color: white !important;
        }

        .hazard-badge.active-info,
        .mobile-hazard-item.info {
            background: #17a2b8 !important;
            color: white !important;
        }

        .hazard-badge.active-warning,
        .mobile-hazard-item.warning {
            background: #ffc107 !important;
            color: #212529 !important;
        }

    /* Gas reading colors */
    .gas-reading.safe,
    .mobile-gas-reading.safe {
        background: #d4edda !important;
        border-color: #28a745 !important;
    }

    .gas-reading.danger,
    .mobile-gas-reading.danger {
        background: #f8d7da !important;
        border-color: #dc3545 !important;
    }

    /* Personnel items */
    .personnel-badge,
    .mobile-personnel-item {
        background: linear-gradient(135deg, var(--primary-color), var(--dark-color)) !important;
        color: white !important;
    }

    .permit-hot .personnel-badge,
    .permit-hot .mobile-personnel-item {
        background: #dc3545 !important;
    }

    .permit-cold .personnel-badge,
    .permit-cold .mobile-personnel-item {
        background: #0d6efd !important;
    }

    /* Authority card headers */
    .authority-card.issuing .authority-header {
        background: #28a745 !important;
        color: white !important;
    }

    .authority-card.request .authority-header {
        background: #17a2b8 !important;
        color: white !important;
    }

    .authority-card.performing .authority-header {
        background: #ffc107 !important;
        color: #212529 !important;
    }

    /* Isolation badges */
    .badge-isolation.active,
    .mobile-badge-isolation.active {
        background: #28a745 !important;
        color: white !important;
    }

    /* No animations on print */
    * {
        animation: none !important;
        transition: none !important;
    }

    /* Prevent orphans and widows */
    p, h1, h2, h3, h4, h5, h6 {
        orphans: 3;
        widows: 3;
    }

    /* Keep headings with content */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }

    /* Avoid breaking inside important elements */
    .cert-item,
    .mobile-cert,
    .info-item-full,
    .mobile-info-item-full,
    .signature-box,
    .mobile-signature,
    .isolation-section,
    .mobile-isolation {
        page-break-inside: avoid;
    }

    /* Add page breaks before major sections */
    .personnel-section,
    .approval-section,
    .renewal-section,
    .closure-section {
        page-break-before: auto;
    }

    /* Ensure text is readable */
    body, p, span, div {
        color: #000 !important;
    }

    /* Header text colors */
    .details-header *,
    .mobile-details-header *,
    .gas-test-header *,
    .authority-header * {
        color: white !important;
    }

    /* Label colors */
    .info-label,
    .mobile-label,
    .gas-label {
        color: #333 !important;
    }

    /* Value colors */
    .info-value,
    .mobile-value,
    .gas-value,
    .reading-value {
        color: #000 !important;
    }

    /* Alert styling */
    .alert-danger {
        background: #f8d7da !important;
        border-color: #dc3545 !important;
        color: #721c24 !important;
    }

    .no-data-alert,
    .mobile-no-data {
        background: #e7f3ff !important;
        border-color: #0d6efd !important;
        color: #084298 !important;
    }

    /* Spacing adjustments for print */
    .info-section:first-child,
    .mobile-section:first-child {
        margin-top: 0 !important;
    }

    /* Make sure borders are visible */
    .details-card,
    .mobile-details-card,
    .info-section,
    .mobile-section,
    .gas-test-card,
    .mobile-gas-test,
    .authority-card,
    .mobile-authority {
        border-width: 1px !important;
        border-style: solid !important;
    }

    /* Optimize spacing for A4 */
    .details-body,
    .mobile-details-body {
        max-width: 190mm !important;
        margin: 0 auto !important;
    }

    /* Ensure full width content */
    .info-grid,
    .certificates-grid,
    .authorities-grid,
    .hazards-grid,
    .personnel-grid {
        width: 100% !important;
    }

    /* Hide mobile-specific elements when printing from desktop */
    @media (min-width: 768px) {
        .mobile-details-card {
            display: none !important;
        }
    }

    /* Hide desktop-specific elements when printing from mobile */
    @media (max-width: 767.98px) {
        .details-card.d-none.d-md-block {
            display: none !important;
        }
    }

    /* Improve badge readability */
    .badge-permit,
    .mobile-badge-permit,
    .badge-isolation,
    .mobile-badge-isolation,
    .cert-badge,
    .mobile-cert-status {
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
    }

    /* Signature boxes */
    .signature-display,
    .authority-signature,
    .gas-signature {
        border: 2px solid #333 !important;
        background: #f9f9f9 !important;
    }

    /* Tables and grids should stay together */
    .gas-info-grid,
    .mobile-gas-info {
        page-break-inside: avoid;
    }

    /* Ensure icons don't break layout */
    i, .bi {
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* Optimize line heights for print */
    body {
        line-height: 1.4 !important;
    }

    /* Make sure gradients appear as solid colors in print */
    .permit-hot .details-header,
    .permit-hot .mobile-details-header {
        background: #dc3545 !important;
    }

    .permit-cold .details-header,
    .permit-cold .mobile-details-header {
        background: #0d6efd !important;
    }

    /* Add subtle background to sections for better readability */
    .info-section,
    .mobile-section {
        background: #fafafa !important;
    }

    /* Ensure proper contrast for borders */
    hr {
        border-top: 1px solid #333 !important;
        margin: 10px 0 !important;
    }

    /* Print page numbers (optional - can be customized) */
    @page {
        @bottom-right {
            content: counter(page) " / " counter(pages);
        }
    }

    /* Add document title to header of each page (optional) */
    @page :first {
        @top-center {
            content: element(doc-title);
        }
    }

    /* Ensure proper spacing between elements */
    .info-item,
    .mobile-info-item,
    .cert-item,
    .mobile-cert {
        margin-bottom: 8px !important;
    }

    /* Make sure text doesn't overflow */
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Optimize font weights for print */
    strong, b, .info-value, .mobile-value {
        font-weight: 700 !important;
    }

    /* Ensure visibility of important elements */
    .section-title i,
    .mobile-section-title i {
        opacity: 1 !important;
    }

    /* Clean up any hover effects */
    *:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* ========== Smooth Scrolling ========== */
html {
    scroll-behavior: smooth;
}

/* ========== Selection Color ========== */
::selection {
    background: var(--primary-color);
    color: white;
}

.permit-hot ::selection {
    background: #dc3545;
}

.permit-cold ::selection {
    background: #0d6efd;
}

/* ========== Focus Styles for Accessibility ========== */
a:focus,
button:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

.permit-hot a:focus,
.permit-hot button:focus {
    outline-color: #dc3545;
}

.permit-cold a:focus,
.permit-cold button:focus {
    outline-color: #0d6efd;
}

/* ========== Loading Animation (Optional) ========== */
.loading {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ========== Responsive Typography ========== */
@media (max-width: 575.98px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 1400px) {
    html {
        font-size: 16px;
    }
}

/* ========== High Contrast Mode Support ========== */
@media (prefers-contrast: high) {
    .info-section,
    .mobile-section {
        border-width: 3px !important;
    }

    .section-title,
    .mobile-section-title {
        border-bottom-width: 4px !important;
    }
}

/* ========== Reduced Motion Support ========== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========== Dark Mode Support (Optional) ========== */
@media (prefers-color-scheme: dark) {
    /* This section can be customized if dark mode is desired */
    /* Currently not implemented to maintain print consistency */
}

/* ========== End of Stylesheet ========== */