/* Custom theme colors */
:root {
    --primary-color: #1976D2;
    --secondary-color: #26A69A;
    --accent-color: #9C27B0;
    --background-color: #f5f5f5;
    --text-color: #212121;
    --header-bg: #0D47A1;
}

/* Dark mode overrides */
html.q-dark {
    --background-color: #121212;
    --text-color: #ffffff;
    --header-bg: #0D47A1;
}

/* Global styles */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Roboto', sans-serif;
}

.q-header {
    background-color: var(--header-bg);
}

.q-footer {
    background-color: var(--header-bg);
    color: #ffffff;
}

.q-page-container {
    padding: 16px;
}

/* Custom Header Styles */
.custom-header .q-toolbar-title {
    display: flex;
    align-items: center;
}

.custom-header .q-tab {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    padding: 0 12px;
}

    .custom-header .q-tab .q-tab__icon + .q-tab__label {
        margin-left: 8px;
    }

.custom-header .active-tab {
    font-weight: 700;
    border-bottom: 2px solid #ffffff;
}

.user-avatar {
    background-color: #C10015;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    width: 32px;
    height: 32px;
}

/* Mobile Menu Styles */
.mobile-menu {
    display: none;
}

.mobile-drawer {
    background-color: #ffffff;
}

html.q-dark .mobile-drawer {
    background-color: #1e1e1e;
}

.mobile-drawer .q-item-label {
    display: flex;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .q-toolbar-title {
        font-size: 1rem;
    }

        .q-toolbar-title .q-icon {
            size: 1.5rem; /* Smaller icon on mobile */
        }

    .q-page-container {
        padding: 8px;
    }

    .custom-header .q-tabs {
        display: none;
    }

    .custom-header .user-avatar {
        display: none;
    }

    .mobile-menu {
        display: block;
    }
}

@media (max-width: 600px) {
    .custom-header .q-btn:not(.mobile-menu) {
        display: none;
    }

    .q-toolbar-title {
        font-size: 0.9rem;
    }

        .q-toolbar-title .q-icon {
            size: 1.2rem;
        }
}

/* Custom styles for better readability */
.q-item-label {
    font-weight: 500;
}

.q-table th {
    font-weight: 600;
    background-color: var(--primary-color);
    color: #ffffff;
    text-align: center;
}

.arabic {
    font-family: 'Roboto', sans-serif;
    direction: ltr;
}

.invoice-card {
    width: 100%;
    max-width: 1200px;
}

.invoice-header {
    background-color: #f9f9f9;
    border-bottom: 2px solid #d4af37;
}

.arabic-text {
    direction: rtl;
    text-align: right;
    unicode-bidi: embed;
}

.company-logo {
    width: 150px;
}

/* Styles for TAX INVOICE title and Invoice No row */
.tax-invoice-title,
.invoice-no-row {
    margin-top: 2mm !important; /* Reduced top margin */
    margin-bottom: 2mm !important; /* Reduced bottom margin */
    line-height: 1.1 !important; /* Minimize line spacing */
}

    .tax-invoice-title .text-h6 {
        font-size: 10pt !important; /* Reduced font size for title */
        padding-top: 0.5mm !important; /* Minimal padding */
        padding-bottom: 0.5mm !important; /* Minimal padding */
    }

    .invoice-no-row .col-6,
    .invoice-no-row .q-py-xs {
        font-size: 7pt !important; /* Reduced font size for Invoice No text */
        padding-top: 0.5mm !important; /* Minimal padding */
        padding-bottom: 0.5mm !important; /* Minimal padding */
    }

/* Styles for Seller Details and Buyer Details sections */
.seller-details,
.buyer-details {
    margin-top: 2mm !important; /* Reduced top margin */
    margin-bottom: 2mm !important; /* Reduced bottom margin */
}

    .seller-details .row,
    .buyer-details .row {
        line-height: 1.1 !important; /* Minimize line spacing */
    }

    .seller-details .text-weight-bold,
    .buyer-details .text-weight-bold,
    .seller-details .col,
    .buyer-details .col,
    .seller-details .q-py-xs,
    .buyer-details .q-py-xs {
        font-size: 7pt !important; /* Reduced font size for labels and values */
        padding-top: 0.5mm !important; /* Minimal padding */
        padding-bottom: 0.5mm !important; /* Minimal padding */
    }

    .seller-details .col-2,
    .seller-details .col-4,
    .seller-details .col-8,
    .buyer-details .col-2,
    .buyer-details .col-4,
    .buyer-details .col-8 {
        font-size: 7pt !important; /* Explicitly target value cells */
    }

/* Styles for Bank Details and Invoice Dates/References sections */
.bank-details,
.invoice-dates-references {
    margin-top: 2mm !important; /* Reduced top margin */
    margin-bottom: 2mm !important; /* Reduced bottom margin */
}

    .bank-details .row,
    .invoice-dates-references .row {
        line-height: 1.1 !important; /* Minimize line spacing */
    }

    .bank-details .text-weight-bold,
    .invoice-dates-references .text-weight-bold,
    .bank-details .col,
    .invoice-dates-references .col,
    .bank-details .q-pa-xs,
    .invoice-dates-references .q-pa-xs {
        font-size: 7pt !important; /* Reduced font size for labels and values */
        padding-top: 0.5mm !important; /* Minimal padding */
        padding-bottom: 0.5mm !important; /* Minimal padding */
    }

    .bank-details .col-3,
    .bank-details .col-4,
    .bank-details .col-5,
    .invoice-dates-references .col-3,
    .invoice-dates-references .col-6 {
        font-size: 7pt !important; /* Explicitly target value cells */
    }

/* Styles for Line Items section (q-table) */
.line-items {
    margin-top: 2mm !important; /* Reduced top margin */
    margin-bottom: 2mm !important; /* Reduced bottom margin */
}

    .line-items .q-table th,
    .line-items .q-table td {
        font-size: 7pt !important; /* Reduced font size for headers and cells */
        padding: 0.5mm !important; /* Minimal padding */
        line-height: 1.1 !important; /* Minimize line spacing */
    }

    .line-items .q-table th {
        font-weight: 600 !important; /* Maintain bold headers */
    }

/* Styles for Summary section */
.summary-section {
    margin-top: 2mm !important; /* Reduced top margin */
    margin-bottom: 2mm !important; /* Reduced bottom margin */
}

    .summary-section .q-list {
        border: 0.5pt solid #ccc !important; /* Thinner border for the entire list */
    }

    .summary-section .q-item {
        min-height: unset !important; /* Remove Quasar's default min-height */
        padding: 0 !important; /* Remove default padding */
        border-bottom: 0.5pt solid #ccc !important; /* Thinner border for each row */
    }

        .summary-section .q-item:last-child {
            border-bottom: none !important; /* Remove border from the last row */
        }

    .summary-section .q-item-label,
    .summary-section .q-item-section {
        font-size: 7pt !important; /* Reduced font size for labels and values */
        line-height: 1.1 !important; /* Minimize line spacing */
        padding: 0.5mm 1mm !important; /* Minimal padding (vertical: 0.5mm, horizontal: 1mm) */
    }

    .summary-section .text-weight-bold .q-item-label {
        font-weight: 700 !important; /* Maintain bold for totals */
    }

/* Styles for Amount in Words section */
.amount-in-words {
    margin-top: 2mm !important; /* Reduced top margin */
    margin-bottom: 2mm !important; /* Reduced bottom margin */
}

    .amount-in-words .row {
        line-height: 1.1 !important; /* Minimize line spacing */
    }

    .amount-in-words .text-weight-bold,
    .amount-in-words .col-4,
    .amount-in-words .col-8 {
        font-size: 6pt !important; /* Reduced font size for labels and values */
        padding-top: 0.5mm !important; /* Minimal padding */
        padding-bottom: 0.5mm !important; /* Minimal padding */
    }

/* Invoice-specific print styles */
@media print {
    /* Base reset */
    body {
        background: white !important;
        color: black !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        font-size: 9pt !important;
        line-height: 1.2 !important;
    }

    /* Hide non-essential elements */
    .no-print {
        display: none !important;
    }

    /* Page container */
    .q-page {
        padding: 0 !important;
        margin: 0 !important;
        width: 210mm !important;
        min-height: 297mm !important;
    }

    /* Invoice content area */
    .invoice-content {
        padding: 5mm 10mm !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fix for line items table */
    .q-table {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 7pt !important;
        table-layout: fixed !important;
    }

    .q-table__container {
        width: 100% !important;
        overflow: hidden !important;
    }

    .q-table th,
    .q-table td {
        padding: 1mm 0.5mm !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
        vertical-align: top !important;
    }

        /* Specific column width adjustments */
        .q-table th:nth-child(1),
        .q-table td:nth-child(1) {
            width: 5% !important;
        }
        /* # */
        .q-table th:nth-child(2),
        .q-table td:nth-child(2) {
            width: 20% !important;
        }
        /* Description */
        .q-table th:nth-child(3),
        .q-table td:nth-child(3) {
            width: 8% !important;
        }
        /* Working Hours */
        .q-table th:nth-child(4),
        .q-table td:nth-child(4) {
            width: 8% !important;
        }
        /* Rate */
        .q-table th:nth-child(5),
        .q-table td:nth-child(5) {
            width: 8% !important;
        }
        /* Discount */
        .q-table th:nth-child(6),
        .q-table td:nth-child(6) {
            width: 10% !important;
        }
        /* Taxable */
        .q-table th:nth-child(7),
        .q-table td:nth-child(7) {
            width: 8% !important;
        }
        /* Tax Rate */
        .q-table th:nth-child(8),
        .q-table td:nth-child(8) {
            width: 10% !important;
        }
        /* Tax Amount */
        .q-table th:nth-child(9),
        .q-table td:nth-child(9) {
            width: 13% !important;
        }
    /* Total */

    /* Layout adjustments */
    .row {
        margin: 0 !important;
        width: 100% !important;
    }

    .col-6 {
        width: 50% !important;
    }

    /* Borders */
    .border-right {
        border-right: 0.5pt solid #ccc !important;
    }

    .border-bottom {
        border-bottom: 0.5pt solid #ccc !important;
    }

    /* Headers */
    .text-h6 {
        font-size: 10pt !important;
        margin: 1mm 0 !important;
    }

    /* Background colors */
    .bg-blue-1, .bg-blue-2 {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .bg-blue-1 {
        background-color: #e6f2ff !important;
    }

    .bg-blue-2 {
        background-color: #cce5ff !important;
    }

    /* Images */
    .invoice-content img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Arabic text */
    .text-arabic,
    .text-arabic-bold {
        font-size: 6pt !important;
    }

    /* Prevent bad page breaks */
    .q-table,
    .summary-section {
        page-break-inside: avoid !important;
    }

    /* Print-specific adjustments for TAX INVOICE and Invoice No */
    .tax-invoice-title,
    .invoice-no-row {
        margin-top: 1mm !important; /* Smaller margin for print */
        margin-bottom: 1mm !important;
    }

        .tax-invoice-title .text-h6 {
            font-size: 9pt !important; /* Smaller font for print */
            padding-top: 0.3mm !important;
            padding-bottom: 0.3mm !important;
        }

        .invoice-no-row .col-6,
        .invoice-no-row .q-py-xs {
            font-size: 6pt !important; /* Smaller font for print */
            padding-top: 0.3mm !important;
            padding-bottom: 0.3mm !important;
        }

    /* Print-specific adjustments for Seller and Buyer Details */
    .seller-details,
    .buyer-details {
        margin-top: 1mm !important; /* Smaller margin for print */
        margin-bottom: 1mm !important;
    }

        .seller-details .text-weight-bold,
        .buyer-details .text-weight-bold,
        .seller-details .col,
        .buyer-details .col,
        .seller-details .q-py-xs,
        .buyer-details .q-py-xs,
        .seller-details .col-2,
        .seller-details .col-4,
        .seller-details .col-8,
        .buyer-details .col-2,
        .buyer-details .col-4,
        .buyer-details .col-8 {
            font-size: 6pt !important; /* Smaller font for print */
            padding-top: 0.3mm !important;
            padding-bottom: 0.3mm !important;
        }

    /* Print-specific adjustments for Bank Details and Invoice Dates */
    .bank-details,
    .invoice-dates-references {
        margin-top: 1mm !important; /* Smaller margin for print */
        margin-bottom: 1mm !important;
    }

        .bank-details .text-weight-bold,
        .invoice-dates-references .text-weight-bold,
        .bank-details .col,
        .invoice-dates-references .col,
        .bank-details .q-pa-xs,
        .invoice-dates-references .q-pa-xs,
        .bank-details .col-3,
        .bank-details .col-4,
        .bank-details .col-5,
        .invoice-dates-references .col-3,
        .invoice-dates-references .col-6 {
            font-size: 6pt !important; /* Smaller font for print */
            padding-top: 0.3mm !important;
            padding-bottom: 0.3mm !important;
        }

    /* Print-specific adjustments for Line Items */
    .line-items {
        margin-top: 1mm !important; /* Smaller margin for print */
        margin-bottom: 1mm !important;
    }

        .line-items .q-table th,
        .line-items .q-table td {
            font-size: 6pt !important; /* Smaller font for print */
            padding: 0.3mm !important; /* Minimal padding */
            line-height: 1.1 !important;
        }

    /* Print-specific adjustments for Summary */
    .summary-section {
        margin-top: 1mm !important; /* Smaller margin for print */
        margin-bottom: 1mm !important;
    }

        .summary-section .q-item-label,
        .summary-section .q-item-section {
            font-size: 6pt !important; /* Smaller font for print */
            padding: 0.3mm 1mm !important; /* Minimal padding for print */
        }

    /* Print-specific adjustments for Amount in Words */
    .amount-in-words {
        margin-top: 1mm !important; /* Smaller margin for print */
        margin-bottom: 1mm !important;
    }

        .amount-in-words .text-weight-bold,
        .amount-in-words .col-4,
        .amount-in-words .col-8 {
            font-size: 6pt !important; /* Smaller font for print */
            padding-top: 0.3mm !important;
            padding-bottom: 0.3mm !important;
        }
}

/* Screen styles */
@media screen {
    .invoice-content {
        padding: 16px;
        max-width: 1200px;
        margin: 0 auto;
        visibility: visible !important;
    }
}

.border-right {
    border-right: 1px solid #ccc;
}

.border-bottom {
    border-bottom: 1px solid #ccc;
}

.no-print {
}

.text-arabic {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.2;
}

.text-arabic-bold {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.2;
    font-size: 1.1em;
}

.hero-about {
    /*background-image: url('images/banner.png');*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 50vh;
}

@media (min-width: 768px) {
    .hero-about {
        min-height: 60vh;
    }
}

.service-icon {
    width: 60px;
    height: 60px;
}

@media (min-width: 768px) {
    .service-icon {
        width: 80px;
        height: 80px;
    }
}

.leader-card {
    width: 100%;
    max-width: 280px;
}