/* Credentialed - Custom Styles */
/* Most styling is handled by Tailwind CSS via CDN */

/* Page width: widen the standard page container so layouts use more of the
   display and items get room to breathe (Tailwind's max-w-7xl is 80rem). */
.max-w-7xl {
    max-width: 90rem; /* 1440px */
}

/* Card border consistency — match the Audit Trail card style (border-gray-200)
   across all pages. Targets white card surfaces with a soft shadow that don't
   already declare their own border, so accent-bordered cards (border-l-4,
   border-2, status colors, etc.) are left intact. */
.bg-white.rounded-xl.shadow-sm:not([class*="border"]),
.bg-white.rounded-lg.shadow-sm:not([class*="border"]) {
    border: 1px solid #e5e7eb; /* gray-200 */
}
html.dark .bg-white.rounded-xl.shadow-sm:not([class*="border"]),
html.dark .bg-white.rounded-lg.shadow-sm:not([class*="border"]) {
    border-color: #2d3548 !important;
}

/* Button typography consistency across pages. Many primary/modal buttons set
   no Tailwind text-* size, so they inherited the 16px page base — taller and
   larger than the text-sm buttons used elsewhere. Default every <button> to
   14px / 1.25rem (matching .text-sm) so font size AND height line up across
   pages. Explicit text-xs / text-sm / text-lg utilities still win via class
   specificity, so intentionally compact inline controls keep their size. */
button {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Custom animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Form focus states */
input:focus, select:focus, textarea:focus {
    outline: none;
    ring: 2px;
    ring-color: #22c55e;
}

/* Status badges */
.badge-pending { background-color: #fef3c7; color: #92400e; }
.badge-approved { background-color: #d1fae5; color: #065f46; }
.badge-denied { background-color: #fee2e2; color: #991b1b; }
.badge-expired { background-color: #f3f4f6; color: #4b5563; }

/* Loading spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #22c55e;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =============================================================
   DARK MODE — CSS override layer
   Triggered by: html.dark (toggled via toggleDarkMode() in base.html)
   ============================================================= */

/* --- Color palette ---
   bg-page:      #0f1117   (body background)
   bg-surface:   #1a1f2e   (cards, nav, modals)
   bg-elevated:  #1f2640   (hover states, selected rows)
   bg-muted:     #252d42   (table stripes, input backgrounds)
   border:       #2d3548
   border-heavy: #3d4d68
   text-primary: #e8ecf3
   text-body:    #c5cfe0
   text-muted:   #9ba8c0
   text-faint:   #6b7a99
*/

html.dark body {
    background-color: #0f1117;
    color: #e8ecf3;
}

/* --- Backgrounds --- */
html.dark .bg-white          { background-color: #1a1f2e !important; }
html.dark .bg-gray-50        { background-color: #0f1117 !important; }
html.dark .bg-gray-100       { background-color: #1f2640 !important; }
html.dark .bg-gray-200       { background-color: #252d42 !important; }
html.dark .bg-gray-500       { background-color: #4d5d7a !important; }

/* --- Text --- */
html.dark .text-gray-900     { color: #e8ecf3 !important; }
html.dark .text-gray-800     { color: #d1d9ea !important; }
html.dark .text-gray-700     { color: #c5cfe0 !important; }
html.dark .text-gray-600     { color: #9ba8c0 !important; }
html.dark .text-gray-500     { color: #7a89a8 !important; }
html.dark .text-gray-400     { color: #6b7a99 !important; }
html.dark .text-gray-300     { color: #4d5d7a !important; }

/* --- Borders --- */
html.dark .border-gray-200   { border-color: #2d3548 !important; }
html.dark .border-gray-300   { border-color: #3d4d68 !important; }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #2d3548 !important;
}

/* --- Hover states --- */
html.dark .hover\:bg-gray-50:hover   { background-color: #1a2030 !important; }
html.dark .hover\:bg-gray-100:hover  { background-color: #252d42 !important; }
html.dark .hover\:bg-gray-200:hover  { background-color: #2d3548 !important; }
html.dark .hover\:text-gray-700:hover { color: #d1d9ea !important; }
html.dark .hover\:text-gray-800:hover { color: #e8ecf3 !important; }
html.dark .hover\:text-gray-900:hover { color: #f0f4fb !important; }
html.dark .hover\:text-gray-500:hover { color: #9ba8c0 !important; }
html.dark .hover\:text-gray-600:hover { color: #c5cfe0 !important; }

/* --- Nav shadows --- */
html.dark nav.shadow-sm {
    box-shadow: 0 1px 0 0 #2d3548 !important;
}
html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.4) !important; }
html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4) !important; }
html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.6), 0 8px 10px -6px rgba(0,0,0,0.5) !important; }

/* --- Status badge dark variants --- */
html.dark .badge-pending  { background-color: #2d2510; color: #fbbf24; }
html.dark .badge-approved { background-color: #0d2518; color: #34d399; }
html.dark .badge-denied   { background-color: #2d1010; color: #f87171; }
html.dark .badge-expired  { background-color: #1f2640; color: #9ba8c0; }

/* --- Alert/notification color blocks --- */
html.dark .bg-green-50      { background-color: #0d2518 !important; }
html.dark .bg-green-100     { background-color: #102e1c !important; }
html.dark .bg-emerald-50    { background-color: #0d2518 !important; }
html.dark .bg-emerald-100   { background-color: #102e1c !important; }
html.dark .bg-red-50        { background-color: #2d1010 !important; }
html.dark .bg-red-100       { background-color: #3a1212 !important; }
html.dark .bg-red-200       { background-color: #4a1818 !important; }
html.dark .bg-yellow-50     { background-color: #2d2510 !important; }
html.dark .bg-yellow-100    { background-color: #3a2e10 !important; }
html.dark .bg-blue-50       { background-color: #0d1a2d !important; }
html.dark .bg-blue-100      { background-color: #0f2040 !important; }
html.dark .bg-orange-50     { background-color: #2d1e0d !important; }
html.dark .bg-orange-100    { background-color: #3a250f !important; }
html.dark .bg-purple-100    { background-color: #1e1030 !important; }
html.dark .bg-teal-100      { background-color: #0d2525 !important; }
html.dark .bg-cyan-100      { background-color: #0d2030 !important; }
html.dark .bg-indigo-100    { background-color: #131a3a !important; }
html.dark .bg-koru-50       { background-color: #0d2518 !important; }
html.dark .bg-koru-100      { background-color: #102e1c !important; }

/* Gradient stops — the bg-* overrides above don't touch gradient utilities,
   so popup/card headers using bg-gradient-to-* (e.g. the notification panel
   header) stayed light in dark mode. Darken the stops used in-app so those
   surfaces match. */
html.dark .from-koru-50 {
    --tw-gradient-from: #0d2518 !important;
    --tw-gradient-to: rgb(13 37 24 / 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html.dark .from-indigo-50 {
    --tw-gradient-from: #131a3a !important;
    --tw-gradient-to: rgb(19 26 58 / 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html.dark .to-white      { --tw-gradient-to: #1a1f2e !important; }
html.dark .to-purple-50  { --tw-gradient-to: #1e1030 !important; }

/* Custom component classes (defined in template <style> blocks, e.g. the
   enrollments kanban board + detail modal, payer_config modal) use raw
   hardcoded backgrounds, so the utility-class overrides above don't reach
   them — they stayed light (and dark-overridden text went invisible on
   them) in dark mode. */
html.dark .modal-content {
    background-color: #1a1f2e !important;
    /* Lighter hairline border so the popup reads as a distinct surface
       against the near-black page behind it. */
    border: 1px solid #3d4d68 !important;
}
html.dark .kanban-header { background-color: #1a1f2e !important; color: #c5cfe0 !important; }
html.dark .kanban-header .count { background-color: rgba(255,255,255,0.10) !important; }
html.dark .kanban-card { background-color: #1f2640 !important; border-color: #2d3548 !important; }
html.dark .kanban-card .provider-name { color: #e8ecf3 !important; }
html.dark .kanban-card .payer-name { color: #9ba8c0 !important; }
html.dark .kanban-body::-webkit-scrollbar-thumb { background: #3d4d68 !important; }

/* Alert text in dark mode */
html.dark .text-green-700   { color: #4ade80 !important; }
html.dark .text-green-800   { color: #34d399 !important; }
html.dark .text-emerald-700 { color: #4ade80 !important; }
html.dark .text-emerald-800 { color: #34d399 !important; }
html.dark .text-red-700     { color: #f87171 !important; }
html.dark .text-red-800     { color: #fca5a5 !important; }
html.dark .text-yellow-700  { color: #fbbf24 !important; }
html.dark .text-yellow-800  { color: #fcd34d !important; }
html.dark .text-blue-700    { color: #60a5fa !important; }
html.dark .text-blue-800    { color: #93c5fd !important; }
html.dark .text-orange-700  { color: #fb923c !important; }
html.dark .text-orange-800  { color: #fdba74 !important; }
html.dark .text-purple-800  { color: #c084fc !important; }
html.dark .text-teal-800    { color: #5eead4 !important; }
html.dark .text-cyan-800    { color: #67e8f9 !important; }
html.dark .text-indigo-800  { color: #a5b4fc !important; }

/* Border colors for alert boxes */
html.dark .border-green-200 { border-color: #1a4a2a !important; }
html.dark .border-emerald-200 { border-color: #1a4a2a !important; }
html.dark .border-red-200   { border-color: #4a1818 !important; }
html.dark .border-yellow-200 { border-color: #4a3a10 !important; }
html.dark .border-blue-200  { border-color: #1a2d4a !important; }
html.dark .border-orange-200 { border-color: #4a2d10 !important; }
html.dark .border-yellow-300 { border-color: #6b5510 !important; }
html.dark .border-yellow-400 { border-color: #8b6a10 !important; }
html.dark .border-yellow-500 { border-color: #9b7a10 !important; }
html.dark .border-red-400   { border-color: #8b2020 !important; }
html.dark .border-red-500   { border-color: #9b2020 !important; }
html.dark .border-orange-400 { border-color: #6b3810 !important; }

/* --- Form inputs in dark mode --- */
html.dark input[type=text],
html.dark input[type=email],
html.dark input[type=password],
html.dark input[type=number],
html.dark input[type=search],
html.dark input[type=tel],
html.dark input[type=url],
html.dark input[type=date],
html.dark select,
html.dark textarea {
    background-color: #252d42 !important;
    border-color: #3d4d68 !important;
    color: #e8ecf3 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #6b7a99 !important;
}

html.dark select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ba8c0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
}

/* --- Modal overlays --- */
html.dark .bg-black\/50 { background-color: rgba(0,0,0,0.7) !important; }
html.dark .bg-black\/80 { background-color: rgba(0,0,0,0.85) !important; }

/* --- Table rows --- */
html.dark table { color: #c5cfe0; }
html.dark thead th,
html.dark .text-xs.font-medium.text-gray-500.uppercase {
    color: #7a89a8 !important;
}
html.dark tbody tr:hover { background-color: #1f2640 !important; }

/* --- Spinner dark --- */
html.dark .spinner {
    border-color: #2d3548;
    border-top-color: #22c55e;
}

/* --- Scrollbar dark --- */
html.dark ::-webkit-scrollbar-track { background: #1a1f2e; }
html.dark ::-webkit-scrollbar-thumb { background: #3d4d68; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #4d5d7a; }

/* --- White/10 transparent surfaces --- */
html.dark .bg-white\/10 { background-color: rgba(255,255,255,0.06) !important; }
html.dark .bg-white\/20 { background-color: rgba(255,255,255,0.1) !important; }
html.dark .bg-white\/60 { background-color: rgba(255,255,255,0.06) !important; }

/* Opacity-modified gray surfaces (e.g. provider Payer Enrollments accordion
   body). The solid .bg-gray-50 override doesn't match the /50 variant, so it
   stays light in dark mode and washes out the table band behind it. */
html.dark .bg-gray-50\/50 { background-color: rgba(255,255,255,0.025) !important; }
html.dark .hover\:bg-white\/60:hover { background-color: rgba(255,255,255,0.06) !important; }

/* Smooth theme transitions */
body, nav, .bg-white, .bg-gray-50, .bg-gray-100, input, select, textarea, table, .shadow-sm {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}


/* --- Kanban board dark mode --- */
html.dark .kanban-column {
    background: #1a1f2e !important;
    border-color: #2d3548 !important;
}
html.dark .kanban-header {
    background: #1f2640 !important;
    color: #c5cfe0 !important;
}
html.dark .kanban-header .count {
    background: rgba(255,255,255,0.1) !important;
    color: #9ba8c0 !important;
}
html.dark .kanban-card {
    background: #252d42 !important;
    border-color: #3d4d68 !important;
    color: #c5cfe0 !important;
}
html.dark .kanban-card:hover {
    border-color: #818cf8 !important;
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.2) !important;
}
html.dark .kanban-card .provider-name,
html.dark .kanban-card .text-gray-900 {
    color: #e8ecf3 !important;
}
html.dark .kanban-body::-webkit-scrollbar-thumb { background: #3d4d68; }
html.dark .kanban-container::-webkit-scrollbar-track { background: #1a1f2e; }
html.dark .kanban-container::-webkit-scrollbar-thumb { background: #3d4d68; }

/* --- Popup menus / dropdowns dark mode --- */
html.dark [x-show][class*="absolute"][class*="bg-white"],
html.dark [x-transition][class*="bg-white"],
html.dark div[class*="absolute"][class*="shadow-lg"][class*="bg-white"] {
    background-color: #1f2640 !important;
    border-color: #3d4d68 !important;
}

/* Dropdown items hover */
html.dark [x-show] a:hover,
html.dark [x-show] button:hover {
    background-color: #252d42 !important;
}

/* --- border-gray-100 (used on cards, section dividers) --- */
html.dark .border-gray-100   { border-color: #2d3548 !important; }
html.dark .border-t.border-gray-100 { border-color: #2d3548 !important; }

/* --- Indigo tints for stage advance buttons in dark mode --- */
html.dark .border-indigo-200 { border-color: #3730a3 !important; }
html.dark .text-indigo-600   { color: #a5b4fc !important; }
html.dark .text-indigo-700   { color: #a5b4fc !important; }
html.dark .bg-indigo-50      { background-color: #1e1b4b !important; }
html.dark .hover\:bg-indigo-50:hover { background-color: #1e1b4b !important; }
html.dark .hover\:bg-indigo-100:hover { background-color: #252270 !important; }

/* --- Amber accents for blocking tasks in dark mode --- */
html.dark .bg-amber-50\/30   { background-color: rgba(45, 37, 16, 0.3) !important; }
html.dark .border-amber-200  { border-color: #6b5510 !important; }
html.dark .text-amber-600    { color: #fbbf24 !important; }
html.dark .text-amber-500    { color: #f59e0b !important; }
html.dark .bg-amber-50       { background-color: #2d2510 !important; }

/* --- Task progress bar dark mode --- */
html.dark .task-progress {
    background-color: #2d3548 !important;
}

/* --- Modal content dark mode --- */
html.dark .bg-gray-50.rounded-xl,
html.dark .bg-gray-50.p-4 {
    background-color: #151a28 !important;
}

/* --- Ring/focus states dark --- */
html.dark .ring-gray-200 { --tw-ring-color: #3d4d68 !important; }
html.dark .focus\:ring-koru-500:focus { --tw-ring-color: #22c55e !important; }