/**
 * Singapay Green Utility Classes
 * Primary Color: #01793B
 * 
 * Usage:
 * - .sp-text-primary       → text color #01793B
 * - .sp-bg-primary         → background color #01793B (white text)
 * - .sp-border-primary     → border color #01793B
 * - .sp-btn-primary        → button with bg #01793B, hover darkens
 * - .sp-btn-outline        → outline button with border+text #01793B
 * - .sp-link-primary       → link/anchor color #01793B with hover
 * - .sp-accent-primary     → accent-color for checkboxes/radios
 * - .sp-bg-primary-soft    → light green background (rgba)
 * - .sp-gradient-primary   → gradient from #00a651 to #01793B
 * - .sp-badge-active       → active badge style (green border + text on soft bg)
 * - .sp-focus-primary      → focus border color #01793B (for inputs)
 * - .sp-card-primary       → card with bg #01793B + white text + hover lighten
 */

/* ──────────────────────────────────────────────────────────
   TEXT
   ────────────────────────────────────────────────────────── */
.sp-text-primary {
    color: #01793B !important;
}

.sp-text-primary-hover:hover {
    color: #01793B !important;
}

/* ──────────────────────────────────────────────────────────
   BACKGROUND
   ────────────────────────────────────────────────────────── */
.sp-bg-primary {
    background-color: #01793B !important;
}

.sp-bg-primary-hover:hover {
    background-color: #01793B !important;
}

.sp-bg-primary-soft {
    background-color: rgba(1, 121, 59, 0.06) !important;
}

.sp-bg-primary-soft-hover:hover {
    background-color: rgba(1, 121, 59, 0.1) !important;
}

/* ──────────────────────────────────────────────────────────
   GRADIENT
   ────────────────────────────────────────────────────────── */
.sp-gradient-primary {
    background: linear-gradient(180deg, #00a651 0%, #01793B 100%) !important;
}

.sp-gradient-primary-135 {
    background: linear-gradient(135deg, #e8d554 0%, #01793B 100%) !important;
}

/* ──────────────────────────────────────────────────────────
   BORDER
   ────────────────────────────────────────────────────────── */
.sp-border-primary {
    border-color: #01793B !important;
}

.sp-border-primary-hover:hover {
    border-color: #01793B !important;
}

/* ──────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────── */
.sp-btn-primary {
    background-color: #01793B !important;
    border-color: #01793B !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-btn-primary:hover {
    background-color: #016230 !important;
    border-color: #016230 !important;
    color: #ffffff !important;
}

.sp-btn-primary:focus,
.sp-btn-primary:focus-visible {
    background-color: #016230 !important;
    border-color: #016230 !important;
    box-shadow: 0 0 0 3px rgba(1, 121, 59, 0.25) !important;
    color: #ffffff !important;
}

.sp-btn-primary:active {
    background-color: #014d26 !important;
    border-color: #014d26 !important;
    color: #ffffff !important;
}

.sp-btn-primary:disabled,
.sp-btn-primary.disabled {
    background-color: #01793B !important;
    border-color: #01793B !important;
    color: #ffffff !important;
    opacity: 0.65;
}

/* Outline button */
.sp-btn-outline {
    background-color: #ffffff !important;
    border: 1px solid #01793B !important;
    color: #01793B !important;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sp-btn-outline:hover {
    background-color: rgba(1, 121, 59, 0.05) !important;
    border-color: #01793B !important;
    color: #01793B !important;
}

.sp-btn-outline:focus,
.sp-btn-outline:focus-visible {
    box-shadow: 0 0 0 3px rgba(1, 121, 59, 0.15) !important;
    border-color: #01793B !important;
    color: #01793B !important;
}

.sp-btn-outline:active {
    background-color: rgba(1, 121, 59, 0.1) !important;
    border-color: #016230 !important;
    color: #016230 !important;
}

/* ──────────────────────────────────────────────────────────
   LINKS
   ────────────────────────────────────────────────────────── */
.sp-link-primary {
    color: #01793B !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

.sp-link-primary:hover {
    color: #016230 !important;
    text-decoration: underline;
}

.sp-link-primary:focus {
    color: #016230 !important;
    outline: none;
}

/* Link without underline on hover */
.sp-link-primary-no-underline {
    color: #01793B !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

.sp-link-primary-no-underline:hover {
    color: #016230 !important;
    text-decoration: none;
}

/* ──────────────────────────────────────────────────────────
   FORM INPUTS (focus state)
   ────────────────────────────────────────────────────────── */
.sp-focus-primary:focus {
    border-color: #01793B !important;
    box-shadow: 0 0 0 3px rgba(1, 121, 59, 0.1) !important;
    outline: none;
}

.sp-focus-primary:focus-within {
    border-color: #01793B !important;
}

/* Checkbox & Radio */
.sp-accent-primary {
    accent-color: #01793B !important;
}

.sp-check-primary:checked {
    background-color: #01793B !important;
    border-color: #01793B !important;
}

.sp-check-primary:focus {
    border-color: #01793B !important;
    box-shadow: 0 0 0 3px rgba(1, 121, 59, 0.1) !important;
}

/* ──────────────────────────────────────────────────────────
   BADGES
   ────────────────────────────────────────────────────────── */
.sp-badge-active {
    background: rgba(1, 121, 59, 0.05) !important;
    color: #01793B !important;
    border: 1px solid #80BC9D !important;
}

.sp-badge-verified {
    border: 1.5px solid #01793B !important;
    color: #01793B !important;
    background: transparent !important;
}

.sp-badge-free {
    background: #ECFDF5 !important;
    color: #01793B !important;
    border: 1px solid #01793B !important;
}

/* ──────────────────────────────────────────────────────────
   CARDS
   ────────────────────────────────────────────────────────── */
.sp-card-primary {
    background-color: #01793B !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease;
}

.sp-card-primary:hover {
    background-color: #016230 !important;
}

/* Card with hover lighten effect (existing hover-lighten pattern) */
.sp-card-primary.hover-lighten:hover {
    background-color: #01894a !important;
}

/* ──────────────────────────────────────────────────────────
   PAGINATION
   ────────────────────────────────────────────────────────── */
.sp-pagination .page-item .page-link {
    color: #01793B;
}

.sp-pagination .page-item.active .page-link {
    background-color: #01793B !important;
    border-color: #01793B !important;
    color: #fff !important;
}

.sp-pagination .page-item .page-link:hover {
    color: #016230;
}

.sp-pagination .page-item .page-link:focus {
    box-shadow: 0 0 0 3px rgba(1, 121, 59, 0.15);
}

/* ──────────────────────────────────────────────────────────
   SIDEBAR SPECIFIC
   ────────────────────────────────────────────────────────── */
.sp-sidebar-active {
    color: #01793B !important;
    background-color: #e6f4ea !important;
}

.sp-sidebar-icon {
    color: #01793B !important;
}

/* ──────────────────────────────────────────────────────────
   STEPPER / PROGRESS INDICATORS
   ────────────────────────────────────────────────────────── */
.sp-step-completed {
    background-color: #01793B !important;
    color: #fff !important;
}

.sp-step-active {
    border-color: #01793B !important;
}

.sp-step-active-inner {
    background: #01793B !important;
}

.sp-step-line {
    background-color: #01793B !important;
}

/* ──────────────────────────────────────────────────────────
   FILE UPLOAD
   ────────────────────────────────────────────────────────── */
.sp-upload-icon {
    color: #01793B !important;
}

.sp-upload-area:hover {
    border-color: #01793B !important;
}

.sp-upload-area.dragover {
    border-color: #01793B !important;
    background: #F0FFF4 !important;
}

/* ──────────────────────────────────────────────────────────
   MISCELLANEOUS UTILITIES
   ────────────────────────────────────────────────────────── */

/* Box shadow with green on focus (for wrappers) */
.sp-shadow-primary-focus:focus-within {
    border-color: #01793B !important;
    box-shadow: 0 0 0 3px rgba(1, 121, 59, 0.08) !important;
}

/* Table row hover with soft green */
.sp-table-row-hover:hover {
    background-color: rgba(1, 121, 59, 0.05) !important;
}

/* Loading text / spinner color */
.sp-loading-text {
    color: #01793B !important;
}

/* Password requirement valid state */
.sp-valid-indicator {
    color: #01793B !important;
}

.sp-valid-indicator .check-icon {
    background: #01793B !important;
    border-color: #01793B !important;
}

/* Selection/option card selected state */
.sp-option-selected {
    border-color: #01793B !important;
    background: #F0FFF4 !important;
}

/* Avatar circle */
.sp-avatar-primary {
    background: #01793B !important;
    color: #fff !important;
}