/* Custom CSS to override green colors with blue theme colors */
/* This file replaces Django Unfold's default green colors with blue theme colors */

/* Override green backgrounds */
.bg-green-100,
.hover\:bg-green-100:hover {
    background-color: rgb(0, 159, 231, 0.1) !important;
}

.bg-green-200,
.hover\:bg-green-200:hover {
    background-color: rgb(0, 159, 231, 0.2) !important;
}

.bg-green-500,
.hover\:bg-green-500:hover {
    background-color: rgb(0, 159, 231) !important;
}

.bg-green-600,
.hover\:bg-green-600:hover {
    background-color: rgb(0, 145, 218) !important;
}

.bg-green-700,
.hover\:bg-green-700:hover {
    background-color: rgb(0, 129, 196) !important;
}

/* Override green text colors */
.text-green-100 {
    color: rgb(0, 159, 231, 0.1) !important;
}

.text-green-200 {
    color: rgb(0, 159, 231, 0.2) !important;
}

.text-green-500 {
    color: rgb(0, 159, 231) !important;
}

.text-green-600 {
    color: rgb(0, 145, 218) !important;
}

.text-green-700 {
    color: rgb(0, 129, 196) !important;
}

/* Override green borders */
.border-green-100 {
    border-color: rgb(0, 159, 231, 0.1) !important;
}

.border-green-200 {
    border-color: rgb(0, 159, 231, 0.2) !important;
}

.border-green-500 {
    border-color: rgb(0, 159, 231) !important;
}

.border-green-600 {
    border-color: rgb(0, 145, 218) !important;
}

.border-green-700 {
    border-color: rgb(0, 129, 196) !important;
}

/* Override CSS custom properties for green colors */
:root {
    --color-green-100: 0, 159, 231, 0.1;
    --color-green-200: 0, 159, 231, 0.2;
    --color-green-400: 0, 159, 231;
    --color-green-500: 0, 159, 231;
    --color-green-600: 0, 145, 218;
    --color-green-700: 0, 129, 196;
}

/* Target any elements that might be using the default green colors */
.success,
.alert-success,
.badge-success,
.btn-success,
.text-success,
.bg-success {
    background-color: rgb(0, 159, 231) !important;
    border-color: rgb(0, 145, 218) !important;
    color: white !important;
}

/* Override specific Django admin success messages */
.messagelist .success {
    background-color: rgb(0, 159, 231, 0.1) !important;
    border-left-color: rgb(0, 159, 231) !important;
    color: rgb(0, 129, 196) !important;
}

/* Override form field success states */
.form-row.success input,
.form-row.success select,
.form-row.success textarea {
    border-color: rgb(0, 159, 231) !important;
}

.form-row.success .help-text {
    color: rgb(0, 129, 196) !important;
}

/* Override any buttons or links with green styling */
.btn-outline-success {
    color: rgb(0, 159, 231) !important;
    border-color: rgb(0, 159, 231) !important;
}

.btn-outline-success:hover {
    background-color: rgb(0, 159, 231) !important;
    border-color: rgb(0, 145, 218) !important;
    color: white !important;
}

/* Override checkbox and radio button success states */
input[type="checkbox"].success:checked,
input[type="radio"].success:checked {
    background-color: rgb(0, 159, 231) !important;
    border-color: rgb(0, 145, 218) !important;
}

/* Override progress bars */
.progress-bar-success,
.progress-bar.bg-success {
    background-color: rgb(0, 159, 231) !important;
}

/* Override any badge or label elements */
.badge.bg-success,
.label-success {
    background-color: rgb(0, 159, 231) !important;
}

/* Override table row success states */
.table-success,
tr.success {
    background-color: rgb(0, 159, 231, 0.1) !important;
}

/* Override outline colors for success state */
.outline-green-200 {
    outline-color: rgb(0, 159, 231, 0.2) !important;
}

/* Override dark mode green colors */
@media not print {
    .dark .bg-green-100:where(.dark, .dark *),
    .dark .hover\:bg-green-100:hover:where(.dark, .dark *) {
        background-color: rgb(0, 159, 231, 0.2) !important;
    }

    .dark .bg-green-500:where(.dark, .dark *),
    .dark .hover\:bg-green-500:hover:where(.dark, .dark *) {
        background-color: rgb(0, 159, 231) !important;
    }

    .dark .text-green-500:where(.dark, .dark *) {
        color: rgb(56, 189, 248) !important;
    }

    .dark .border-green-500:where(.dark, .dark *) {
        border-color: rgb(56, 189, 248) !important;
    }
}

/* Override any inline styles that might be setting green colors */
[style*="color: green"],
[style*="background-color: green"],
[style*="border-color: green"] {
    color: rgb(0, 159, 231) !important;
    background-color: rgb(0, 159, 231, 0.1) !important;
    border-color: rgb(0, 159, 231) !important;
}

/* Override Material Design green colors if present */
.material-green,
.md-green {
    background-color: rgb(0, 159, 231) !important;
    color: white !important;
}

/* Override any CSS custom properties that might be setting green */
.green-theme,
[data-theme="green"] {
    --success-color: rgb(0, 159, 231);
    --success-bg: rgb(0, 159, 231, 0.1);
    --success-border: rgb(0, 145, 218);
}

/* Override specific hex green colors that might be used */
* {
    /* Replace common green hex colors with blue equivalents */
}

/* Target elements with specific green hex values */
[style*="#22c55e"],
[style*="#16a34a"],
[style*="#15803d"],
[style*="#10b981"],
[style*="#059669"],
[style*="#047857"],
[style*="#065f46"],
[style*="#dcfce7"],
[style*="#bbf7d0"],
[style*="#86efac"],
[style*="#4ade80"] {
    color: rgb(0, 159, 231) !important;
    background-color: rgb(0, 159, 231, 0.1) !important;
    border-color: rgb(0, 159, 231) !important;
}

/* Override any elements using CSS green keywords */
[style*="color: green"],
[style*="background: green"],
[style*="border: green"],
[style*="background-color: green"],
[style*="border-color: green"] {
    color: rgb(0, 159, 231) !important;
    background-color: rgb(0, 159, 231, 0.1) !important;
    border-color: rgb(0, 159, 231) !important;
}

/* Target job note specific elements */
.inline-group[id*="jobnote"] *,
.jobnote-inline *,
.job-note-inline *,
[class*="jobnote"] * {
    /* Override any green colors in job notes */
}

.inline-group[id*="jobnote"] .bg-green-500,
.inline-group[id*="jobnote"] .text-green-500,
.inline-group[id*="jobnote"] .border-green-500 {
    background-color: rgb(0, 159, 231) !important;
    color: rgb(0, 159, 231) !important;
    border-color: rgb(0, 159, 231) !important;
}

/* Force override any computed green colors */
.bg-green-50 { background-color: rgb(236, 249, 255) !important; }
.bg-green-100 { background-color: rgb(219, 242, 255) !important; }
.bg-green-200 { background-color: rgb(186, 230, 255) !important; }
.bg-green-300 { background-color: rgb(125, 211, 255) !important; }
.bg-green-400 { background-color: rgb(56, 189, 248) !important; }
.bg-green-500 { background-color: rgb(0, 159, 231) !important; }
.bg-green-600 { background-color: rgb(0, 145, 218) !important; }
.bg-green-700 { background-color: rgb(0, 129, 196) !important; }
.bg-green-800 { background-color: rgb(0, 113, 174) !important; }
.bg-green-900 { background-color: rgb(0, 97, 152) !important; }

.text-green-50 { color: rgb(236, 249, 255) !important; }
.text-green-100 { color: rgb(219, 242, 255) !important; }
.text-green-200 { color: rgb(186, 230, 255) !important; }
.text-green-300 { color: rgb(125, 211, 255) !important; }
.text-green-400 { color: rgb(56, 189, 248) !important; }
.text-green-500 { color: rgb(0, 159, 231) !important; }
.text-green-600 { color: rgb(0, 145, 218) !important; }
.text-green-700 { color: rgb(0, 129, 196) !important; }
.text-green-800 { color: rgb(0, 113, 174) !important; }
.text-green-900 { color: rgb(0, 97, 152) !important; }

.border-green-50 { border-color: rgb(236, 249, 255) !important; }
.border-green-100 { border-color: rgb(219, 242, 255) !important; }
.border-green-200 { border-color: rgb(186, 230, 255) !important; }
.border-green-300 { border-color: rgb(125, 211, 255) !important; }
.border-green-400 { border-color: rgb(56, 189, 248) !important; }
.border-green-500 { border-color: rgb(0, 159, 231) !important; }
.border-green-600 { border-color: rgb(0, 145, 218) !important; }
.border-green-700 { border-color: rgb(0, 129, 196) !important; }
.border-green-800 { border-color: rgb(0, 113, 174) !important; }
.border-green-900 { border-color: rgb(0, 97, 152) !important; }

/* EPPH Unfold-themed buttons using primary palette variables */
.epph-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* 6px */
  padding: 0.5rem 0.75rem; /* 8px 12px */
  font-weight: 600;
  border-radius: 0.375rem; /* 6px */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  text-decoration: none;
}
.epph-btn:focus-visible {
  outline: 2px solid rgb(var(--color-primary-500));
  outline-offset: 2px;
}
.epph-btn-primary {
  background-color: rgb(var(--color-primary-600));
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.epph-btn-primary:hover {
  background-color: rgb(var(--color-primary-500));
}
.epph-btn-soft {
  background-color: rgba(var(--color-primary-500), 0.10);
  color: rgb(var(--color-primary-700));
  border: 1px solid rgba(var(--color-primary-500), 0.30);
}
.epph-btn-soft:hover {
  background-color: rgba(var(--color-primary-500), 0.20);
}
.epph-btn-outline {
  background-color: #ffffff;
  color: rgb(var(--color-primary-700));
  border: 1px solid rgba(var(--color-primary-500), 0.30);
}
.epph-btn-outline:hover {
  background-color: rgba(var(--color-primary-500), 0.05);
}