/* Form input styling */
.trendz-form input[type="text"],
.trendz-form input[type="email"],
.trendz-form input[type="tel"],
.trendz-form select,
.trendz-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 5px;
    background-color: #fff;
}

.trendz-form textarea {
    min-height: 120px;
    resize: vertical;
}

.trendz-form select {
    height: 40px;
}

/* Checkbox styling */
.trendz-checkbox input[type="checkbox"] {
    margin-right: 8px;
}

/* Error message styling */
.trendz-input-group .errorlist {
    color: #e74c3c;
    font-size: 14px;
    margin-top: 5px;
    list-style: none;
    padding-left: 0;
}

/* Make sure form fields are visible */
.trendz-input-group input,
.trendz-input-group select,
.trendz-input-group textarea {
    display: block;
    width: 100%;
}
/* Add to your main CSS file */
.badge {
    font-size: 0.85em;
    font-weight: 500;
}

#invoices-table th {
    white-space: nowrap;
}

.dt-nowrap {
    white-space: nowrap;
}

.btn-group .btn {
    padding: 0.25rem 0.5rem;
}
/* Add a class for the invoice status badge */
.invoice-status-badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    color: #fff;
}
.invoice-status-badge.pending {
    background-color: #f39c12; /* Orange for pending */
}
.invoice-status-badge.paid {
    background-color: #27ae60; /* Green for paid */
}
.invoice-status-badge.overdue {
    background-color: #e74c3c; /* Red for overdue */
}
/* Add these to your styles */
.arabic-text {
    font-family: 'ArabicFont', 'Traditional Arabic', 'Arial Unicode MS';
    direction: rtl;
    unicode-bidi: bidi-override; /* This forces proper RTL rendering */
    text-align: right;
}

.bilingual {
    display: flex;
    justify-content: space-between;
}

.bilingual .arabic {
    text-align: right;
    flex: 1;
}

.bilingual .english {
    text-align: left;
    flex: 1;
}
/* --- Responsive enhancements (conservative first pass) --- */

/* Ensure images and logos scale nicely */
.brand-logo, img.responsive-img {
    max-width: 100%;
    height: auto;
}

/* Navbar adjustments for small screens */
.navbar-brand strong { white-space: nowrap; }
.navbar-nav .nav-link { white-space: nowrap; }

@media (max-width: 991px) {
    /* Collapse large nav items into stacked layout */
    .navbar-nav { margin-top: 10px; }
    .navbar-nav .nav-item { margin-bottom: 6px; }
    .navbar-nav .nav-link { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }
}

@media (max-width: 768px) {
    /* Make the brand slightly smaller on phones */
    .navbar-brand { font-size: 0.95rem; }
    .trendz-header h1 { font-size: 1.25rem; }
    /* Make main content padding smaller on small screens */
    main.py-4 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
}

/* Make wide tables scroll horizontally rather than break layout */
.table-responsive-custom {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Apply to typical table elements to improve wrapping */
table { max-width: 100%; }
table td, table th { word-break: break-word; }

/* Buttons should wrap and remain tappable on small screens */
.btn { min-height: 38px; padding: 0.45rem 0.75rem; }

/* Forms: stack labels and inputs more tightly on mobile */
@media (max-width: 576px) {
    .trendz-form label { display: block; margin-bottom: 0.25rem; font-size: 0.95rem; }
    .trendz-form input, .trendz-form select, .trendz-form textarea { font-size: 15px; padding: 8px; }
}

/* Footer: ensure single-line footer can wrap cleanly */
.footer p { margin: 0; font-size: 0.95rem; }
.footer { padding-top: 0.75rem; padding-bottom: 0.75rem; }

/* Small tweaks for admin-like tables and controls */
.dt-nowrap { white-space: nowrap; }
.compact-controls .btn { padding: 0.25rem 0.5rem; font-size: 0.85rem; }

/* Accessibility: increase hit area for links on mobile */
.navbar-nav .nav-link { padding-top: 0.6rem; padding-bottom: 0.6rem; }


/* Add these to your styles */
.arabic-text {
    font-family: 'ArabicFont', 'Traditional Arabic', 'Arial Unicode MS';
    direction: rtl;
    unicode-bidi: bidi-override; /* This forces proper RTL rendering */
    text-align: right;
}

.bilingual {
    display: flex;
    justify-content: space-between;
}

.bilingual .arabic {
    text-align: right;
    flex: 1;
}

.bilingual .english {
    text-align: left;
    flex: 1;
}
.badge {
    font-size: 0.85em;
    font-weight: 500;
}

#invoices-table th {
    white-space: nowrap;
}

.dt-nowrap {
    white-space: nowrap;
}

.btn-group .btn {
    padding: 0.25rem 0.5rem;
}
/* Add these to your styles */
.arabic-text {
    font-family: 'ArabicFont', 'Traditional Arabic', 'Arial Unicode MS';
    direction: rtl;
    unicode-bidi: bidi-override; /* This forces proper RTL rendering */
    text-align: right;
}

.bilingual {
    display: flex;
    justify-content: space-between;
}

.bilingual .arabic {
    text-align: right;
    flex: 1;
}

.bilingual .english {
    text-align: left;
    flex: 1;
}