/* UWAKINA SYSTEM - Custom Styles (Dark Navy + Gold Theme) */

html, body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    max-width: 100vw;
    overflow-x: hidden;
    width: 100%;
}

h1, h2, h3, .font-serif {
    font-family: 'Playfair Display', serif;
}

:root {
    --color-primary: #0f1729;
    --color-primary-dark: #070b16;
    --color-surface: #141d33;
    --color-surface-light: #1c2944;
    --color-accent: #c9a227;
    --color-accent-light: #e0c463;
}

.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-primary-light { background-color: var(--color-surface-light); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-light { background-color: var(--color-surface-light); }
.bg-accent { background-color: var(--color-accent); }
.text-accent { color: var(--color-accent); }
.border-accent\/10 { border-color: rgba(201, 162, 39, 0.1); }
.border-accent\/20 { border-color: rgba(201, 162, 39, 0.2); }

.card {
    background: var(--color-surface);
    border: 1px solid rgba(201, 162, 39, 0.12);
    border-radius: 1rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    color: #e5e7eb;
}

.card input,
.card select,
.card textarea {
    background-color: var(--color-primary-dark);
    border-color: rgba(201, 162, 39, 0.25) !important;
    color: #f3f4f6;
}
.card input::placeholder,
.card textarea::placeholder { color: #6b7280; }
.card input:focus,
.card select:focus,
.card textarea:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25) !important;
}
.card label { color: #d1d5db; }

.status-badge-active {
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge-inactive {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-badge-pending {
    background-color: rgba(201, 162, 39, 0.15);
    color: var(--color-accent-light);
    border: 1px solid rgba(201, 162, 39, 0.3);
}

table th {
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent-light);
    white-space: nowrap;
}
table td { color: #e5e7eb; }
.divide-gray-100 > * + * { border-color: rgba(201, 162, 39, 0.08) !important; }
.border-gray-100, .border-gray-200 { border-color: rgba(201, 162, 39, 0.1) !important; }
tr.hover\:bg-gray-50:hover { background-color: rgba(201, 162, 39, 0.06) !important; }
.bg-gray-50 { background-color: rgba(255,255,255,0.03) !important; }

.card table { min-width: 600px; }
.card-table-wrap {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.text-gray-800, .text-gray-700 { color: #f3f4f6 !important; }
.text-gray-600 { color: #cbd5e1 !important; }
.text-gray-500 { color: #94a3b8 !important; }
.text-gray-400 { color: #64748b !important; }

a.text-primary, .text-primary { color: var(--color-accent) !important; }

footer { color: #64748b; }

/* Alert/notice boxes (success, error, warning, info) - rangi nyepesi za zamani
   zilitengenezwa kwa background nyeupe; hapa tunazirekebisha ziendane na dark theme */
.bg-green-50 {
    background-color: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}
.text-green-700, .text-green-800, .text-green-900 { color: #4ade80 !important; }

.bg-red-50 {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}
.text-red-700, .text-red-800, .text-red-900, .text-red-600, .text-red-500 { color: #f87171 !important; }

.bg-amber-50 {
    background-color: rgba(201, 162, 39, 0.12) !important;
    border-color: rgba(201, 162, 39, 0.35) !important;
}
.text-amber-700, .text-amber-800, .text-amber-900, .text-amber-600 { color: var(--color-accent-light) !important; }

.bg-blue-50 {
    background-color: rgba(96, 165, 250, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
}
.text-blue-700, .text-blue-800, .text-blue-900 { color: #93c5fd !important; }
.bg-blue-600 { background-color: #2563eb !important; }
.bg-blue-600:hover, .hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }

.border-green-100, .border-green-200 { border-color: rgba(34, 197, 94, 0.25) !important; }
.border-red-100, .border-red-200 { border-color: rgba(239, 68, 68, 0.25) !important; }
.border-amber-200 { border-color: rgba(201, 162, 39, 0.3) !important; }
.border-blue-200 { border-color: rgba(96, 165, 250, 0.3) !important; }

/* Gray-100 small backgrounds (kama buttons za 'print' au 'chapisha') */
.bg-gray-100 { background-color: rgba(255,255,255,0.06) !important; color: #e5e7eb !important; }
.hover\:bg-gray-200:hover { background-color: rgba(255,255,255,0.12) !important; }

* { box-sizing: border-box; }
img, table, .card { max-width: 100%; }

/* Zuia grid/flex items kusukuma nje ya screen - hii ndiyo sababu kuu ya overflow */
.grid > * { min-width: 0; }
main, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl {
    max-width: 100%;
    overflow-wrap: break-word;
}
main { min-width: 0; }

/* Hakikisha heading kuu (h1) inaonekana wazi - rangi imara badala ya kutegemea utility class pekee */
main h1 { color: #f8fafc !important; }
main h3 { color: #f1f5f9 !important; }
main p { color: #cbd5e1; }

@media (max-width: 767px) {
    main { padding-left: 1rem; padding-right: 1rem; }
}

@media print {
    aside, .no-print, #uwakinaOverlay { display: none !important; }
    main { margin-left: 0 !important; }
    body { background: white !important; }
    .card { background: white !important; color: black !important; border-color: #ddd !important; }
}