/**
 * Rasidaat - Custom Theme Utilities & Form Polish
 * Ensures robust padding, form field aesthetics, responsive cards, and missing Tailwind utilities.
 */

/* ==========================================================================
   1. BOX & FORM CONTAINER CARDS (Padding & Visual Polish)
   ========================================================================== */
.box {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.625rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
    position: relative;
}

/* Ensure all forms and cards inside .box have comfortable, generous padding */
.box.p-5 {
    padding: 1.5rem !important;
}

.box.p-6,
.box.form-card {
    padding: 1.75rem 2rem !important;
}

.box.p-8 {
    padding: 2.25rem !important;
}

@media (max-width: 640px) {
    .box.p-5,
    .box.p-6,
    .box.form-card,
    .box.p-8 {
        padding: 1.25rem 1rem !important;
    }
}

/* Dark mode support for box */
.dark .box {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* ==========================================================================
   2. FORM INPUTS & SELECTS (Internal Padding & Sizing)
   ========================================================================== */
.form-control {
    width: 100% !important;
    min-height: 2.625rem !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    outline: none !important;
}

.form-control:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}

textarea.form-control {
    min-height: 5rem !important;
    padding: 0.65rem 0.85rem !important;
}

.form-select {
    width: 100% !important;
    min-height: 2.625rem !important;
    padding: 0.55rem 2.25rem 0.55rem 0.85rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    outline: none !important;
}

.form-select:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}

.form-label {
    display: inline-block !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 0.375rem !important;
}

.form-check-input {
    width: 1.15rem !important;
    height: 1.15rem !important;
    margin-top: 0.15rem !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.25rem !important;
}

/* ==========================================================================
   3. PADDING UTILITIES (Missing from Purged Tailwind)
   ========================================================================== */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-7 { padding: 1.75rem !important; }
.p-8 { padding: 2rem !important; }
.p-10 { padding: 2.5rem !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-7 { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }

.p-3\.5 { padding: 0.875rem !important; }

.w-1\.5 { width: 0.375rem !important; }
.h-1\.5 { height: 0.375rem !important; }
.w-2\.5 { width: 0.625rem !important; }
.h-2\.5 { height: 0.625rem !important; }
.w-28 { width: 7rem !important; }
.w-36 { width: 9rem !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.mr-2\.5 { margin-right: 0.625rem !important; }
.italic { font-style: italic !important; }
.transition-all { transition-property: all !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }

.space-x-1 > * + * { margin-left: 0.25rem !important; }
.space-x-2 > * + * { margin-left: 0.5rem !important; }
.space-x-3 > * + * { margin-left: 0.75rem !important; }
.space-x-4 > * + * { margin-left: 1rem !important; }
.space-y-1\.5 > * + * { margin-top: 0.375rem !important; }
.space-y-2\.5 > * + * { margin-top: 0.625rem !important; }

.max-h-96 { max-height: 24rem !important; }

.divide-y > * + * { border-top-width: 1px !important; }
.divide-slate-100 > * + * { border-color: #f1f5f9 !important; }
.divide-slate-200 > * + * { border-color: #e2e8f0 !important; }

.border-emerald-200 { border-color: #a7f3d0 !important; }
.border-sky-200 { border-color: #bae6fd !important; }

.bg-rose-500\/10 { background-color: rgba(244, 63, 94, 0.1) !important; }
.border-rose-500\/30 { border-color: rgba(244, 63, 94, 0.3) !important; }
.bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.1) !important; }
.border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.3) !important; }
.bg-amber-500\/10 { background-color: rgba(245, 158, 11, 0.1) !important; }
.border-amber-500\/30 { border-color: rgba(245, 158, 11, 0.3) !important; }

.text-rose-900 { color: #881337 !important; }
.text-slate-900 { color: #0f172a !important; }
.bg-emerald-500 { background-color: #10b981 !important; }
.bg-emerald-600 { background-color: #059669 !important; }

.btn-xs {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    border-radius: 0.25rem !important;
}

/* Print Invoice & POS Receipt Styling */
@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
    .content { padding: 0 !important; margin: 0 !important; }
}

.invoice-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.business-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #0284c7 !important;
}

.meta-table td {
    padding: 0.35rem 0.5rem !important;
}

.items-table th,
.items-table td {
    padding: 0.5rem 0.75rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-5 { padding-top: 1.25rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pt-8 { padding-top: 2rem !important; }

.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 0.75rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pb-5 { padding-bottom: 1.25rem !important; }
.pb-6 { padding-bottom: 1.5rem !important; }
.pb-8 { padding-bottom: 2rem !important; }

.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 0.75rem !important; }
.pl-4 { padding-left: 1rem !important; }
.pl-5 { padding-left: 1.25rem !important; }

.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 0.75rem !important; }
.pr-4 { padding-right: 1rem !important; }
.pr-5 { padding-right: 1.25rem !important; }

/* ==========================================================================
   4. MARGIN & GAP UTILITIES
   ========================================================================== */
.mt-0\.5 { margin-top: 0.125rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.25rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }

.mr-1\.5 { margin-right: 0.375rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 0.75rem !important; }
.mr-4 { margin-right: 1rem !important; }

.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.space-y-1 > * + * { margin-top: 0.25rem !important; }
.space-y-2 > * + * { margin-top: 0.5rem !important; }
.space-y-3 > * + * { margin-top: 0.75rem !important; }
.space-y-4 > * + * { margin-top: 1rem !important; }
.space-y-5 > * + * { margin-top: 1.25rem !important; }
.space-y-6 > * + * { margin-top: 1.5rem !important; }

.gap-1\.5 { gap: 0.375rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-6 { gap: 1.5rem !important; }

/* ==========================================================================
   5. LAYOUT & MAX-WIDTHS
   ========================================================================== */
.max-w-xl { max-width: 36rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-5xl { max-width: 64rem !important; }
.max-w-6xl { max-width: 72rem !important; }
.max-w-7xl { max-width: 80rem !important; }

.justify-between { justify-content: space-between !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-start { justify-content: flex-start !important; }

.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }

.w-3\.5 { width: 0.875rem !important; }
.h-3\.5 { height: 0.875rem !important; }

/* ==========================================================================
   6. BORDERS & SHADOWS
   ========================================================================== */
.border-l-4 { border-left-width: 4px !important; }
.border-t { border-top-width: 1px !important; }
.border-b { border-bottom-width: 1px !important; }
.border-slate-100 { border-color: #f1f5f9 !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }
.border-slate-200\/60 { border-color: rgba(226, 232, 240, 0.6) !important; }
.border-slate-200\/80 { border-color: rgba(226, 232, 240, 0.8) !important; }
.border-slate-300 { border-color: #cbd5e1 !important; }

/* ==========================================================================
   7. TYPOGRAPHY & FONT STYLES
   ========================================================================== */
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.text-\[10px\] { font-size: 10px !important; line-height: 14px !important; }
.text-\[11px\] { font-size: 11px !important; line-height: 15px !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }
.font-black { font-weight: 900 !important; }

/* ==========================================================================
   8. COLOR PALETTE UTILITIES (Status Indicators)
   ========================================================================== */
.text-rose-500 { color: #f43f5e !important; }
.text-rose-600 { color: #e11d48 !important; }
.text-rose-700 { color: #be123c !important; }
.text-rose-800 { color: #9f1239 !important; }
.bg-rose-50 { background-color: #fff1f2 !important; }
.bg-rose-100 { background-color: #ffe4e6 !important; }
.border-rose-200 { border-color: #fecdd3 !important; }
.border-rose-500 { border-color: #f43f5e !important; }

.text-emerald-500 { color: #10b981 !important; }
.text-emerald-600 { color: #059669 !important; }
.text-emerald-700 { color: #047857 !important; }
.text-emerald-800 { color: #065f46 !important; }
.text-emerald-900 { color: #064e3b !important; }
.bg-emerald-50 { background-color: #ecfdf5 !important; }
.bg-emerald-100 { background-color: #d1fae5 !important; }
.border-emerald-500 { border-color: #10b981 !important; }

.text-amber-500 { color: #f59e0b !important; }
.text-amber-600 { color: #d97706 !important; }
.text-amber-700 { color: #b45309 !important; }
.text-amber-800 { color: #92400e !important; }
.bg-amber-50 { background-color: #fffbeb !important; }
.bg-amber-100 { background-color: #fef3c7 !important; }
.border-amber-500 { border-color: #f59e0b !important; }

.text-sky-500 { color: #0ea5e9 !important; }
.text-sky-600 { color: #0284c7 !important; }
.text-sky-700 { color: #0369a1 !important; }
.text-sky-800 { color: #075985 !important; }
.bg-sky-50 { background-color: #f0f9ff !important; }
.bg-sky-100 { background-color: #e0f2fe !important; }
.border-sky-500 { border-color: #0ea5e9 !important; }

.bg-primary\/10 { background-color: rgba(2, 132, 199, 0.1) !important; }

/* Badge helper */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.15rem 0.5rem !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
    border-radius: 0.25rem !important;
}

/* ==========================================================================
   9. MODAL DIALOGS ENHANCEMENTS
   ========================================================================== */
.modal-dialog {
    margin: 1.75rem auto !important;
}
.modal-content {
    background-color: #ffffff !important;
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}
.modal-header {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.modal-body {
    padding: 1.5rem !important;
}
.modal-footer {
    padding: 1rem 1.5rem !important;
    border-top: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
}

/* ==========================================================================
   10. GOOGLE RECAPTCHA RESPONSIVE ALIGNMENT
   ========================================================================== */
.g-recaptcha {
    display: inline-block;
    max-width: 100%;
}
@media (max-width: 360px) {
    .g-recaptcha {
        transform: scale(0.85);
        transform-origin: 0 0;
    }
}