/**
 * SoleMin Custom Styles
 *
 * CSS Custom Properties are defined in app.blade.php based on user's color scheme.
 * This file uses those variables for consistent theming across the application.
 *
 * Color Variable Reference:
 * --color-primary-{50-950}  : Primary brand colors
 * --color-nav-*             : Navigation colors
 * --color-surface-*         : Background/surface colors
 * --color-border-*          : Border colors
 * --color-text-*            : Text colors
 * --color-icon-*            : Icon colors
 * --color-{status}-*        : Status colors (success, warning, error, info)
 * --color-chart-{1-8}       : Chart/graph colors
 */

/* ==========================================================================
   Form Elements - Base Styles
   ========================================================================== */

/* Form variables - static values (dynamic values set in app.blade.php) */
:root {
    --form-border-width: 1px;
    --form-border-radius: 0.5rem;
    --form-focus-ring-width: 3px;
    --form-line-height: 1.5;

    /* Label styling */
    --label-font-weight: 500;

    /* Button styling */
    --btn-border-radius: 0.5rem;
    --btn-font-weight: 500;
}

/* Input, Select, Textarea base styles */
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="file"],
textarea,
select {
    display: block;
    width: 100%;
    padding: var(--form-padding-y) var(--form-padding-x) !important;
    font-size: var(--form-font-size) !important;
    line-height: var(--form-line-height) !important;
    color: var(--theme-text-primary);
    background-color: var(--theme-surface-card);
    border: var(--form-border-width) solid var(--theme-border-dark) !important;
    border-radius: var(--form-border-radius) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    min-height: var(--form-min-height) !important;
}

.form-input::placeholder,
.form-textarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--theme-text-placeholder);
}

/* Focus state */
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 0 0 var(--form-focus-ring-width) var(--color-focus-ring) !important;
}

/* Error state */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: var(--color-error-icon) !important;
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus {
    box-shadow: 0 0 0 var(--form-focus-ring-width) rgba(239, 68, 68, 0.25) !important;
}

/* Disabled state */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    background-color: var(--theme-surface-inset);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Select arrow styling */
.form-select,
select {
    appearance: none !important;
    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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25rem 1.25rem !important;
    padding-right: 2.5rem !important;
}

/* Label styles */
.form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--theme-text-secondary);
}

.form-label .required {
    color: var(--color-error-icon);
    margin-left: 0.125rem;
}

/* Help text */
.form-help {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--theme-text-muted);
}

/* Error message */
.form-error {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-error-text);
}

/* ==========================================================================
   Buttons - Theme-aware styling
   ========================================================================== */

/* All styled buttons should use theme sizing */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-outline,
button.bg-primary-600,
button.bg-primary-100,
button[class*="bg-primary-"],
a[class*="bg-primary-"][class*="rounded"],
button[type="submit"]:not(.unstyled) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
    font-size: var(--form-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
    line-height: var(--form-line-height) !important;
    border-radius: var(--btn-border-radius) !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    text-decoration: none !important;
    min-height: var(--form-min-height) !important;
}

.btn:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-danger:focus,
.btn-success:focus,
.btn-outline:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring) !important;
}

/* Primary button - uses theme primary color */
.btn-primary {
    color: var(--theme-text-inverse) !important;
    background-color: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
}

.btn-primary:hover {
    background-color: var(--color-primary-700) !important;
    border-color: var(--color-primary-700) !important;
}

/* Secondary button */
.btn-secondary {
    color: var(--theme-text-secondary) !important;
    background-color: var(--theme-surface-inset) !important;
    border-color: var(--theme-border-strong) !important;
}

.btn-secondary:hover {
    background-color: var(--theme-surface-active) !important;
    border-color: var(--theme-border-dark) !important;
}

/* Outline button - uses theme primary color */
.btn-outline {
    color: var(--color-primary-600) !important;
    background-color: transparent !important;
    border-color: var(--color-primary-300) !important;
}

.btn-outline:hover {
    color: var(--color-primary-700) !important;
    background-color: var(--color-primary-50) !important;
    border-color: var(--color-primary-400) !important;
}

/* Danger button */
.btn-danger {
    color: var(--theme-text-inverse) !important;
    background-color: var(--color-error-icon) !important;
    border-color: var(--color-error-icon) !important;
}

.btn-danger:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* Success button */
.btn-success {
    color: var(--theme-text-inverse) !important;
    background-color: var(--color-success-icon) !important;
    border-color: var(--color-success-icon) !important;
}

.btn-success:hover {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
}

/* ==========================================================================
   Filter/Action Buttons - Consistent height with inputs
   ========================================================================== */

/* Filter button - matches input height */
.btn-filter,
button[class*="bg-primary-100"][class*="text-primary-700"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
    font-size: var(--form-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
    line-height: var(--form-line-height) !important;
    border-radius: var(--form-border-radius) !important;
    min-height: var(--form-min-height) !important;
    border: 1px solid var(--color-primary-300) !important;
    background-color: var(--color-primary-50) !important;
    color: var(--color-primary-700) !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
}

.btn-filter:hover {
    background-color: var(--color-primary-100) !important;
    border-color: var(--color-primary-400) !important;
}

.btn-filter:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring) !important;
}

/* Auto-fix for legacy gray buttons - make them match input height and look better */
button.bg-gray-100,
a.bg-gray-100,
button[class*="bg-gray-100"][class*="text-gray-700"],
a[class*="bg-gray-100"][class*="text-gray-700"] {
    min-height: var(--form-min-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--theme-border-strong) !important;
    background-color: var(--theme-surface-card) !important;
    color: var(--theme-text-secondary) !important;
    transition: all 0.15s ease-in-out !important;
}

button.bg-gray-100:hover,
a.bg-gray-100:hover,
button[class*="bg-gray-100"][class*="text-gray-700"]:hover,
a[class*="bg-gray-100"][class*="text-gray-700"]:hover {
    background-color: var(--theme-surface-hover) !important;
    border-color: var(--theme-border-dark) !important;
    color: var(--theme-text-primary) !important;
}

button.bg-gray-100:focus,
a.bg-gray-100:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring) !important;
}

/* ==========================================================================
   Links - Theme-aware
   ========================================================================== */

a.link,
.text-link {
    color: var(--color-primary-600);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

a.link:hover,
.text-link:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
}

/* ==========================================================================
   Cards and Panels
   ========================================================================== */

.card {
    background-color: var(--theme-surface-card);
    border: 1px solid var(--theme-border-default);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--theme-border-default);
    background-color: var(--theme-surface-inset);
}

.card-body {
    padding: 1.5rem;
}

.panel {
    background-color: var(--theme-surface-card);
    border: 1px solid var(--theme-border-default);
    border-radius: 0.5rem;
}

.panel-inset {
    background-color: var(--theme-surface-inset);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 0.375rem;
}

/* ==========================================================================
   Status Badges
   ========================================================================== */

.badge-success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.badge-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

.badge-error,
.badge-danger {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
}

.badge-info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
}

.badge-primary {
    background-color: var(--color-primary-100);
    color: var(--color-primary-800);
    border: 1px solid var(--color-primary-200);
}

/* ==========================================================================
   Alerts/Notifications
   ========================================================================== */

.alert-success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
    border-radius: 0.5rem;
    padding: 1rem;
}

.alert-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
    border-radius: 0.5rem;
    padding: 1rem;
}

.alert-error,
.alert-danger {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
    border-radius: 0.5rem;
    padding: 1rem;
}

.alert-info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
    border-radius: 0.5rem;
    padding: 1rem;
}

/* ==========================================================================
   Navigation Styles - Theme-aware
   ========================================================================== */

.nav-link {
    color: var(--color-nav-text);
    transition: all 0.15s ease-in-out;
}

.nav-link:hover {
    color: var(--color-nav-text-active);
    background-color: var(--color-nav-bg-hover);
}

.nav-link.active,
.nav-link[aria-current="page"] {
    color: var(--color-nav-text-active);
    background-color: var(--color-nav-bg-active);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-hover tbody tr:hover {
    background-color: var(--theme-surface-hover);
}

table th {
    color: var(--theme-text-secondary);
    font-weight: 600;
    background-color: var(--theme-surface-inset);
}

table td {
    border-bottom: 1px solid var(--theme-border-default);
}

/* ==========================================================================
   Icons
   ========================================================================== */

.icon {
    color: var(--theme-icon-default);
}

.icon-muted {
    color: var(--theme-icon-muted);
}

.icon-active {
    color: var(--color-primary-600);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Text colors */
.text-primary {
    color: var(--theme-text-primary) !important;
}

.text-secondary {
    color: var(--theme-text-secondary) !important;
}

.text-muted {
    color: var(--theme-text-muted) !important;
}

/* Background colors */
.bg-surface-page {
    background-color: var(--theme-surface-page) !important;
}

.bg-surface-card {
    background-color: var(--theme-surface-card) !important;
}

.bg-surface-inset {
    background-color: var(--theme-surface-inset) !important;
}

/* Border colors */
.border-default {
    border-color: var(--theme-border-default) !important;
}

.border-subtle {
    border-color: var(--theme-border-subtle) !important;
}

.border-strong {
    border-color: var(--theme-border-strong) !important;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .no-print {
        display: none !important;
    }

    .page-break {
        page-break-before: always;
    }

    .page-break-after {
        page-break-after: always;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.transition-smooth {
    transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   Custom Scrollbar
   ========================================================================== */

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--theme-surface-inset);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--theme-border-strong);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--theme-border-dark);
}

/* ==========================================================================
   Focus Ring Override
   ========================================================================== */

.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Checkbox/Radio focus */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--color-focus-ring) !important;
}

/* Checkbox/Radio checked state - use primary color */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
}

/* ==========================================================================
   Action Icons - Standardized Colors
   ========================================================================== */

/*
 * Action icons get themed colors from --color-icon-action.
 * This applies to:
 * - Icons in table cells (td)
 * - Icons in flex containers (common action button groups)
 * - Any element with .action-icon class
 *
 * Exclusions:
 * - .btn buttons (styled differently)
 * - Red text colors (delete actions)
 * - Primary colored text (explicit theming)
 */

/* Base action icon color */
.action-icon,
/* In table cells */
td a[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]) svg,
td button[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]) svg,
/* In flex containers - common pattern for action icon groups */
.flex.items-center a[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]) svg,
.flex.items-center button[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]) svg,
/* In gap containers */
[class*="gap-"] > a[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]) svg,
[class*="gap-"] > button[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]) svg,
/* Direct children of divs with title attribute links */
div > a[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]):not([class*="bg-"]) svg,
div > button.unstyled[title]:not(.text-red-600):not(.text-red-500) svg {
    color: var(--theme-icon-action);
}

/* Hover state */
.action-icon:hover,
td a[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]):hover svg,
td button[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]):hover svg,
.flex.items-center a[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]):hover svg,
.flex.items-center button[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]):hover svg,
[class*="gap-"] > a[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]):hover svg,
[class*="gap-"] > button[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]):hover svg,
div > a[title]:not(.btn):not(.text-red-600):not(.text-red-500):not([class*="text-primary"]):not([class*="bg-"]):hover svg,
div > button.unstyled[title]:not(.text-red-600):not(.text-red-500):hover svg {
    color: var(--theme-icon-action-hover);
}

/* Page titles - use semantic text color */
h1.text-gray-900,
h2.text-gray-900,
h3.text-gray-900,
.text-gray-900 {
    color: var(--theme-text-primary) !important;
}

/* Muted text - use semantic color */
.text-gray-500,
.text-gray-400 {
    color: var(--theme-text-muted) !important;
}

.text-gray-600 {
    color: var(--theme-text-secondary) !important;
}

/* Table header text */
th.text-gray-500,
thead .text-gray-500 {
    color: var(--theme-text-secondary) !important;
}

/* Dropdown menus - use semantic colors */
[x-show] .bg-white,
[x-transition] .bg-white,
.dropdown-menu {
    background-color: var(--theme-surface-elevated) !important;
    border-color: var(--theme-border-default) !important;
}

/* Dropdown items hover state */
[x-show] a.hover\\:bg-gray-100:hover,
[x-transition] a.hover\\:bg-gray-100:hover,
.dropdown-menu a:hover {
    background-color: var(--theme-surface-hover) !important;
}

/* Border color overrides for theme consistency */
.border-gray-200,
.border-gray-100 {
    border-color: var(--theme-border-default) !important;
}

.border-gray-300 {
    border-color: var(--theme-border-strong) !important;
}

/* Directional borders (border-t, border-b, etc.) use theme color */
.border-t,
.border-b,
.border-l,
.border-r {
    border-color: var(--theme-border-default);
}

/* Background hover states */
.hover\\:bg-gray-50:hover,
.hover\\:bg-gray-100:hover {
    background-color: var(--theme-surface-hover) !important;
}

/* Background colors */
.bg-gray-50 {
    background-color: var(--theme-surface-inset) !important;
}

.bg-gray-100 {
    background-color: var(--theme-surface-hover) !important;
}

.bg-white {
    background-color: var(--theme-surface-card) !important;
}

/* ==========================================================================
   Badge Overrides for Theme Consistency
   ========================================================================== */

/* Primary badges - use theme primary color */
.bg-primary-50,
.bg-primary-100 {
    background-color: var(--color-primary-100) !important;
}

.bg-primary-600 {
    background-color: var(--color-primary-600) !important;
}

.text-primary-600 {
    color: var(--color-primary-600) !important;
}

.text-primary-700 {
    color: var(--color-primary-700) !important;
}

.text-primary-800 {
    color: var(--color-primary-800) !important;
}

/* Status badge overrides for semantic colors that adapt to theme */
/* Green/Success badges - keep their meaning but use theme-aware variants */
.bg-green-50 {
    background-color: var(--color-success-bg) !important;
}

.bg-green-100 {
    background-color: var(--color-success-bg) !important;
}

.text-green-700,
.text-green-800 {
    color: var(--color-success-text) !important;
}

/* Blue/Info badges */
.bg-blue-50 {
    background-color: var(--color-info-bg) !important;
}

.bg-blue-100 {
    background-color: var(--color-info-bg) !important;
}

.text-blue-700,
.text-blue-800 {
    color: var(--color-info-text) !important;
}

/* Yellow/Warning badges */
.bg-yellow-50 {
    background-color: var(--color-warning-bg) !important;
}

.bg-yellow-100 {
    background-color: var(--color-warning-bg) !important;
}

.text-yellow-700,
.text-yellow-800 {
    color: var(--color-warning-text) !important;
}

/* Red/Error badges */
.bg-red-50 {
    background-color: var(--color-error-bg) !important;
}

.bg-red-100 {
    background-color: var(--color-error-bg) !important;
}

.text-red-700,
.text-red-800 {
    color: var(--color-error-text) !important;
}

/* Ensure page background uses theme color */
body {
    background-color: var(--theme-surface-page) !important;
}

/* ==========================================================================
   Flatpickr Date Picker - Theme Integration
   ========================================================================== */

/* Main Flatpickr container */
.flatpickr-calendar {
    background: var(--theme-surface-card) !important;
    border: 1px solid var(--theme-border-default) !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
    border-radius: 0.5rem !important;
}

/* Month navigation */
.flatpickr-months {
    background: var(--theme-surface-inset) !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.flatpickr-months .flatpickr-month {
    background: transparent !important;
    color: var(--theme-text-primary) !important;
}

.flatpickr-current-month {
    color: var(--theme-text-primary) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--theme-text-primary) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* Navigation arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--theme-text-secondary) !important;
    fill: var(--theme-text-secondary) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--color-primary-600) !important;
    fill: var(--color-primary-600) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: currentColor !important;
}

/* Weekdays header */
.flatpickr-weekdays {
    background: var(--theme-surface-inset) !important;
}

.flatpickr-weekday {
    color: var(--theme-text-muted) !important;
    font-weight: 600 !important;
}

/* Day cells */
.flatpickr-day {
    color: var(--theme-text-primary) !important;
    border-radius: 0.375rem !important;
}

.flatpickr-day:hover {
    background: var(--color-primary-50) !important;
    border-color: var(--color-primary-200) !important;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
    color: white !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--color-primary-700) !important;
    border-color: var(--color-primary-700) !important;
}

/* Today */
.flatpickr-day.today {
    border-color: var(--color-primary-400) !important;
}

.flatpickr-day.today:hover {
    background: var(--color-primary-50) !important;
    border-color: var(--color-primary-500) !important;
}

/* Disabled days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--theme-text-placeholder) !important;
    background: transparent !important;
}

/* Other month days */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--theme-text-placeholder) !important;
}

/* Alt input styling */
.flatpickr-input.flatpickr-input {
    background-color: var(--theme-surface-card) !important;
}

/* Make sure the visible input matches our form styling */
input.flatpickr-input + .form-control,
input.flatpickr-input[readonly] {
    background-color: var(--theme-surface-card) !important;
    cursor: pointer !important;
}

/* Fix Flatpickr mobile styling */
.flatpickr-calendar.hasTime .flatpickr-time {
    border-top: 1px solid var(--theme-border-default) !important;
}

.flatpickr-time input {
    color: var(--theme-text-primary) !important;
}

.flatpickr-time .flatpickr-am-pm {
    color: var(--theme-text-primary) !important;
}

.flatpickr-time .flatpickr-am-pm:hover {
    background: var(--theme-surface-hover) !important;
}

/* ==========================================================================
   Prose Styles - For rich text content (help articles, etc.)
   ========================================================================== */

.prose {
    line-height: 1.75;
}

.prose h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--theme-text-primary);
    line-height: 1.3;
}

.prose h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--theme-text-primary);
    line-height: 1.4;
}

.prose h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--theme-text-primary);
}

.prose p {
    margin-bottom: 1rem;
    color: var(--theme-text-secondary);
}

.prose ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.prose ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.prose li {
    margin-bottom: 0.5rem;
    color: var(--theme-text-secondary);
}

.prose li::marker {
    color: var(--color-primary-500);
}

.prose strong {
    font-weight: 600;
    color: var(--theme-text-primary);
}

.prose code {
    background: var(--theme-surface-inset);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    color: var(--color-primary-700);
}

.prose pre {
    background: var(--theme-surface-inset);
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.prose pre code {
    background: transparent;
    padding: 0;
}

.prose a {
    color: var(--color-primary-600);
    text-decoration: underline;
}

.prose a:hover {
    color: var(--color-primary-700);
}

.prose blockquote {
    border-left: 4px solid var(--color-primary-300);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--theme-text-muted);
    font-style: italic;
}

.prose hr {
    border: none;
    border-top: 1px solid var(--theme-border-default);
    margin: 2rem 0;
}

/* Prose sizes */
.prose-sm h2 {
    font-size: 1.25rem;
}

.prose-sm h3 {
    font-size: 1.125rem;
}

.prose-sm p,
.prose-sm li {
    font-size: 0.9375rem;
}

.prose-lg h2 {
    font-size: 1.75rem;
}

.prose-lg h3 {
    font-size: 1.375rem;
}