/* --- Base and Font --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
}

/* --- Logo Container --- */
.logo-tour-container {
    text-align: center;
}

/* --- General Input Styling --- */
.input-field {
    margin-top: 0.25rem; display: block; width: 100%;
    padding: 0.5rem 0.75rem; border: 1px solid #d1d5db;
    border-radius: 0.375rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
    font-size: 0.875rem; line-height: 1.25rem;
}
.input-field:focus {
    outline: none; border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25);
}
.select-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat; background-size: 1.25em 1.25em;
    padding-right: 2.75rem; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.label-style {
    display: block; margin-bottom: 0.25rem; font-size: 0.75rem;
    font-weight: 500; color: #6b7280;
}
@media (min-width: 768px) { .label-style { display: none; } }

/* --- Error Styling --- */
.input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}
.row-error {
    background-color: #fee2e2 !important; border: 1px solid #fca5a5 !important;
    border-radius: 0.5rem;
}

/* --- Mode & Language Switching Buttons --- */
.mode-switch-btn, .lang-switch-btn {
    padding: 0.5rem 1.5rem; font-size: 0.875rem; font-weight: 600;
    border-radius: 0.5rem; border: 1px solid #d1d5db;
    background-color: #ffffff; color: #374151;
    cursor: pointer; transition: all 0.2s ease-in-out;
}
.mode-switch-btn:hover:not(.active), .lang-switch-btn:hover:not(.active) { background-color: #f9fafb; border-color: #9ca3af; }
.mode-switch-btn.active, .lang-switch-btn.active {
    background-color: #16a34a; color: #ffffff; border-color: #16a34a;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* --- Dynamic Row & Header Layout --- */
.quotation-only { display: none; }
.mode-quotation .quotation-only { display: block; }
.mode-quotation .invoice-only { display: none; }

/* UPDATED grid-template-columns for invoice mode */
.mode-invoice #table-header { grid-template-columns: auto minmax(180px, 1.5fr) 1fr repeat(4, minmax(80px,auto)) minmax(120px, 1fr) minmax(100px, 1fr) auto; }
.mode-quotation #table-header { grid-template-columns: auto 1.5fr 2.5fr 1fr minmax(70px,auto) 1fr 1fr auto; }

.bill-row { display: grid; grid-template-columns: 1fr; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid #e5e7eb; }
.bill-row:last-child { border-bottom-width: 0; }
@media (min-width: 768px) {
    .bill-row { padding: 0.5rem 1rem; gap: 1rem; align-items: center; }
    /* UPDATED grid-template-columns for invoice mode */
    .mode-invoice .bill-row { grid-template-columns: auto minmax(150px, 1.5fr) 1fr repeat(4, minmax(80px,auto)) minmax(120px, 1fr) minmax(100px, 1fr) auto; }
    .mode-quotation .bill-row { grid-template-columns: auto 1.5fr 2.5fr 1fr minmax(70px,auto) 1fr 1fr auto; }
    .row-number-container { display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: #4b5563; }
}
#billRowTemplate.hidden { display: none !important; }

/* --- Custom Product Search Dropdown --- */
.product-search-container { position: relative; }
.product-options-list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    background: white; border: 1px solid #d1d5db;
    border-radius: 0.375rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-height: 150px; overflow-y: auto; margin-top: 4px; display: none;
}
.product-option-item { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.875rem; }
.product-option-item:hover { background-color: #f3f4f6; }
.save-product-btn {
    display: none; width: 100%; margin-top: 0.5rem;
    padding: 0.5rem; font-size: 0.75rem; font-weight: 500;
    color: white; background-color: #0ea5e9;
    border: none; border-radius: 0.375rem;
    cursor: pointer; text-align: center;
    align-items: center; justify-content: center;
}
.save-product-btn:hover { background-color: #0284c7; }
.product-save-status { margin-top: 0.25rem; font-size: 0.75rem; min-height: 1.25rem; }
.amount-display {
    display: inline-block; min-width: 70px; padding: 0.625rem 0;
    font-weight: 600; color: #374151;
    font-size: 0.875rem; line-height: 1.25rem;
    padding-right: 0.25rem; text-align: right; width: 100%;
}

/* --- Button Styling --- */
.submit-btn, .add-btn, .remove-btn, .action-button { transition: all 0.2s ease-in-out; cursor: pointer; border: none; }
.submit-btn:hover, .add-btn:hover, .action-button:hover { transform: translateY(-2px); box-shadow: 0 7px 14px rgba(50,50,93,0.1), 0 3px 6px rgba(0,0,0,0.08); }
.submit-btn:active, .add-btn:active, .remove-btn:active, .action-button:active { transform: translateY(1px); }

.submit-btn {
    width: 100%; background-image: linear-gradient(to right, #10b981, #059669);
    color: white; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    font-size: 1.125rem;
}
@media (min-width: 768px) { .submit-btn { width: auto; } }

.add-btn {
    background-image: linear-gradient(to right, #6366f1, #4f46e5);
    color: white; font-weight: 600; padding: 0.625rem 1.25rem; border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    display: inline-flex; align-items: center; font-size: 0.875rem;
}

.remove-btn {
    background-color: #ef4444; color: white; font-size: 0.75rem; font-weight: 500;
    padding: 0.375rem 0.75rem; border-radius: 0.375rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.remove-btn:hover { background-color: #dc2626; }

/* --- Main Action Buttons (Download) --- */
.action-button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.75rem 1.5rem; border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    font-size: 1rem; font-weight: 600; color: white;
    border: 1px solid transparent; text-decoration: none;
}
.action-button.pdf-button { background-color: #dc2626; /* red-600 */ }
.action-button.pdf-button:hover { background-color: #b91c1c; /* red-700 */ }
.action-button.docx-button { background-color: #2563eb; /* blue-600 */ }
.action-button.docx-button:hover { background-color: #1d4ed8; /* blue-700 */ }


/* --- Previous Document Item Styling --- */
.document-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1rem; background-color: white; border: 1px solid #e5e7eb; border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}
.document-item:hover {
    border-color: #c7d2fe; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
}
.document-item .dl-pdf-btn {
    background-color: #3b82f6; /* blue-500 */
    color: white; font-size: 0.75rem; font-weight: 500;
    padding: 0.375rem 0.75rem; border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    text-decoration: none;
}
.document-item .dl-pdf-btn:hover { background-color: #2563eb; }