@page {
    margin: 0;
}

        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .app-description {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .form-container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }
        
        .invoice-container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
           
        }
        
        h2 {
            margin-bottom: 20px;
            color: #2c3e50;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }
        
        .form-section {
            margin-bottom: 25px;
        }
        
        .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 15px;
        }
        
        .form-group {
            flex: 1;
            min-width: 200px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        input, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
        
        textarea {
            min-height: 80px;
            resize: vertical;
        }
        
        .items-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        
        .items-table th, .items-table td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        
        .items-table th {
            background-color: #f8f9fa;
        }
        
        .item-row input {
            border: 1px solid #ddd;
            width: 100%;
            padding: 5px;
        }
        
        .btn {
            display: inline-block;
            background: #113377;
            color: white;
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: background 0.3s;
        }
        
        .btn:hover {
            background: #2980b9;
        }
        
        .btn-add {
            background: #2ecc71;
            margin-top: 10px;
        }
        
        .btn-add:hover {
            background: #27ae60;
        }
        
        .btn-generate {
            background: #113377;
            width: 100%;
            margin-top: 20px;
            padding: 15px;
            font-size: 1.1rem;
        }
        
        .btn-generate:hover {
            background: #8e44ad;
        }
        
        .btn-print {
            background: #e74c3c;
            margin-top: 20px;
        }
        
        .btn-print:hover {
            background: #c0392b;
        }
        
        .invoice-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        
        .invoice-details {
            text-align: right;
        }
        
        .invoice-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        .invoice-table th, .invoice-table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        
        .invoice-table th {
            background-color: #f8f9fa;
        }
        
        .totals-section {
            margin-top: 30px;
            text-align: right;
        }
        
        .totals-table {
            width: 300px;
            margin-left: auto;
            border-collapse: collapse;
        }
        
        .totals-table td {
            padding: 8px 15px;
            border-bottom: 1px solid #eee;
        }
        
        .totals-table tr:last-child {
            font-weight: bold;
            font-size: 1.1rem;
            border-top: 2px solid #2c3e50;
        }
        .watermark {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-30deg);
            font-size: 80px;
            color: rgba(0, 0, 0, 0.05);
            white-space: nowrap;
            z-index: 0;
            pointer-events: none;
            width: auto;
        }
                
        @media print {
            body * {
                visibility: hidden;
            }
            .invoice-container, .invoice-container * {
                visibility: visible;
            }
             .container {
                    margin: 0 !important;
                    padding-top: 0 !important;
                }
            .btn-print {
                display: none;
            }
            .hero-section {
                display: none !important;
                height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            header, .navbar, .footer, nav, .hero-section {
                display: none !important;
                visibility: hidden !important;
            }
        
            html,body {
                margin: 0 !important;
                padding: 0 !important;
                background: #fff !important;
            }
            .invoice-container {
                visibility: visible;
                position: relative;
                top: 0;
                left: 0;
                padding: 20px;
                margin: 0 1important;
                padding-top: 0 !important;
                box-shadow: none !important;
                width: 100% !important;
                page-break-after: avoid;
            }
            .watermark {
                font-size: 100px;
                opacity: 0.06;
                display: block;
                page-break-inside: avoid;
            }
        }
        
.invoice-logo {
    max-width: 180px;
    margin-bottom: 20px;
}

.signature-box {
    margin-top: 40px;
    text-align: right;
}

.signature-image {
    max-width: 180px;
}

.watermark {
    position: absolute;
    top: 40%;
    left: 20%;
    width: 60%;
    text-align: center;
    font-size: 90px;
    color: rgba(0, 0, 0, 0.06);
    z-index: 0;
    transform: rotate(-30deg);
    pointer-events: none;
}

.invoice-container {
    position: relative;
    z-index: 1;
}

.invoice-table, .invoice-table tr, .invoice-table td {
    page-break-inside: avoid !important;
}

.totals-section, .signature-box {
    page-break-inside: avoid !important;
}