/* WCFCB ZM Custom Theme */
/* Primary: #347fb6 (Blue), Secondary: #ed8643 (Orange) */

/* Global CSS Variables */
:root {
    --wcfcb-primary: #347fb6;
    --wcfcb-secondary: #ed8643;
    --wcfcb-primary-dark: #2a6594;
    --wcfcb-primary-light: #5d9bc9;
    --wcfcb-secondary-dark: #d4722a;
    --wcfcb-secondary-light: #f2a366;

    /* Global indicator/background pairs to avoid blue-on-blue in light mode and fix login */
    --bg-blue: var(--wcfcb-primary);
    --text-on-blue: #ffffff;
    --bg-orange: var(--wcfcb-secondary);
    --text-on-orange: #111111;
    --bg-red: var(--red-500);
    --text-on-red: #ffffff;
    --bg-yellow: var(--yellow-100);
    --text-on-yellow: #111111;
    --bg-gray: var(--gray-100);
    --text-on-gray: #111111;
    --bg-grey: var(--gray-100);
    --text-on-grey: #111111;
}

/* Desk Theme - Target the custom theme data attribute */
[data-theme="wcfcb_theme"] {
    /* Primary color overrides */
    --primary: var(--wcfcb-primary);
    --primary-color: var(--wcfcb-primary);
    --blue: var(--wcfcb-primary);
    --blue-100: var(--wcfcb-primary-light);
    --blue-500: var(--wcfcb-primary);
    --blue-600: var(--wcfcb-primary-dark);

    /* Secondary color */
    --orange: var(--wcfcb-secondary);
    --orange-500: var(--wcfcb-secondary);

    /* Status indicator text colors */
    --indicator-on-primary: #ffffff;
    --indicator-on-secondary: #111111;

    /* Navbar and header */
    --navbar-bg: var(--wcfcb-primary);
    --navbar-color: #ffffff;

    /* Buttons */
    /* Map indicator color pairs to ensure readable contrast */
    --bg-blue: var(--wcfcb-primary);
    --text-on-blue: #ffffff;

    --bg-orange: var(--wcfcb-secondary);
    --text-on-orange: #111111;

    /* Make red readable in light mode (used by Draft/Cancelled) */
    --bg-red: var(--red-500);
    --text-on-red: #ffffff;

    --bg-yellow: var(--yellow-100);
    --text-on-yellow: #111111;

    --bg-gray: var(--gray-100);
    --text-on-gray: #111111;

    --bg-grey: var(--gray-100);
    --text-on-grey: #111111;

    --btn-primary-bg: var(--wcfcb-primary);
    --btn-primary-border: var(--wcfcb-primary);

    /* Links and accents */
    --link-color: var(--wcfcb-primary);
    --text-color: #333333;

    /* Avatar colors */
    --blue-avatar-bg: var(--wcfcb-primary);
    --blue-avatar-color: #ffffff;
}

/* Navbar Styling */
.navbar, .navbar-default {
    background-color: var(--wcfcb-primary) !important;
    border-color: var(--wcfcb-primary-dark) !important;
}

.navbar .navbar-brand,
.navbar .navbar-nav > li > a,
.navbar .navbar-text {
    color: #ffffff !important;
}

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
    color: var(--wcfcb-secondary-light) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Primary Buttons */
.btn-primary {
    background-color: var(--wcfcb-primary) !important;
    border-color: var(--wcfcb-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--wcfcb-primary-dark) !important;
    border-color: var(--wcfcb-primary-dark) !important;
}

/* Secondary Buttons */
.btn-secondary {
    background-color: var(--wcfcb-secondary) !important;
    border-color: var(--wcfcb-secondary) !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--wcfcb-secondary-dark) !important;
    border-color: var(--wcfcb-secondary-dark) !important;
}

/* Links */
a {
    color: var(--wcfcb-primary) !important;
}

a:hover, a:focus {
    color: var(--wcfcb-primary-dark) !important;
}

/* Sidebar */
.desk-sidebar .sidebar-item.selected {
    background-color: var(--wcfcb-primary) !important;
    color: #ffffff !important;
}

.desk-sidebar .sidebar-item:hover {
    background-color: rgba(52, 127, 182, 0.1) !important;
}

/* Form Controls */
.form-control:focus {
    border-color: var(--wcfcb-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 127, 182, 0.25) !important;
}

/* ========================================
   ENHANCED STATUS INDICATORS & BADGES
   ======================================== */

/* Base indicator improvements - better visibility and accessibility */
.indicator,
.indicator-pill,
.indicator-pill-right,
.indicator-pill-round {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.025em;
    transition: all 0.2s ease-in-out;
    position: relative;
}

/* Enhanced dot visibility for base indicators */
.indicator::before {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease-in-out;
}

/* Pill enhancements - better contrast and subtle shadows */
.indicator-pill,
.indicator-pill-right,
.indicator-pill-round {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    border: 1px solid transparent;
}

/* Hover states for interactive feedback */
.indicator-pill:hover,
.indicator-pill-right:hover,
.indicator-pill-round:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
}

/* ========================================
   COLOR-SPECIFIC ENHANCEMENTS
   ======================================== */

/* SUCCESS/GREEN - High contrast, WCAG AA compliant */
.indicator.green::before,
.indicator-pill.green::before,
.indicator-pill-right.green::after {
    background-color: #16a34a !important; /* Darker green for better visibility */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.indicator-pill.green,
.indicator-pill-right.green,
.indicator-pill-round.green {
    background-color: #16a34a !important;
    color: #ffffff !important;
    border-color: #15803d;
}

.indicator-pill.green:hover {
    background-color: #15803d !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

/* DANGER/RED - Enhanced visibility */
.indicator.red::before,
.indicator-pill.red::before,
.indicator-pill-right.red::after {
    background-color: #dc2626 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.indicator-pill.red,
.indicator-pill-right.red,
.indicator-pill-round.red {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: #b91c1c;
}

.indicator-pill.red:hover {
    background-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* PRIMARY/BLUE - WCFCB branded */
.indicator.blue::before,
.indicator-pill.blue::before,
.indicator-pill-right.blue::after {
    background-color: var(--wcfcb-primary) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.indicator-pill.blue,
.indicator-pill-right.blue,
.indicator-pill-round.blue {
    background-color: var(--wcfcb-primary) !important;
    color: #ffffff !important;
    border-color: var(--wcfcb-primary-dark);
}

.indicator-pill.blue:hover {
    background-color: var(--wcfcb-primary-dark) !important;
    box-shadow: 0 0 0 3px rgba(52, 127, 182, 0.2);
}

/* WARNING/YELLOW - Better contrast */
.indicator.yellow::before,
.indicator-pill.yellow::before,
.indicator-pill-right.yellow::after {
    background-color: #d97706 !important; /* Darker for visibility */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.indicator-pill.yellow,
.indicator-pill-right.yellow,
.indicator-pill-round.yellow {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-color: #f59e0b;
}

.indicator-pill.yellow:hover {
    background-color: #fde68a !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* SECONDARY/ORANGE - WCFCB branded */
.indicator.orange::before,
.indicator-pill.orange::before,
.indicator-pill-right.orange::after {
    background-color: var(--wcfcb-secondary-dark) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.indicator-pill.orange,
.indicator-pill-right.orange,
.indicator-pill-round.orange {
    background-color: var(--wcfcb-secondary) !important;
    color: #ffffff !important;
    border-color: var(--wcfcb-secondary-dark);
}

.indicator-pill.orange:hover {
    background-color: var(--wcfcb-secondary-dark) !important;
    box-shadow: 0 0 0 3px rgba(237, 134, 67, 0.2);
}

/* PURPLE - Enhanced visibility */
.indicator.purple::before,
.indicator-pill.purple::before,
.indicator-pill-right.purple::after {
    background-color: #9333ea !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.indicator-pill.purple,
.indicator-pill-right.purple,
.indicator-pill-round.purple {
    background-color: #9333ea !important;
    color: #ffffff !important;
    border-color: #7c3aed;
}

.indicator-pill.purple:hover {
    background-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.2);
}

/* NEUTRAL/GRAY - Better contrast with borders */
.indicator.gray::before, .indicator.grey::before,
.indicator-pill.gray::before, .indicator-pill.grey::before,
.indicator-pill-right.gray::after, .indicator-pill-right.grey::after {
    background-color: #6b7280 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.indicator-pill.gray, .indicator-pill.grey,
.indicator-pill-right.gray, .indicator-pill-right.grey,
.indicator-pill-round.gray, .indicator-pill-round.grey {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #d1d5db;
}

.indicator-pill.gray:hover, .indicator-pill.grey:hover {
    background-color: #e5e7eb !important;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.15);
}

/* ========================================
   ENHANCED BOOTSTRAP BADGES
   ======================================== */

/* Base badge improvements */
.badge {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.025em;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease-in-out;
    text-transform: uppercase;
}

.badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Primary badge - WCFCB branded */
.badge-primary {
    background-color: var(--wcfcb-primary) !important;
    color: #ffffff !important;
    border-color: var(--wcfcb-primary-dark);
}

.badge-primary:hover {
    background-color: var(--wcfcb-primary-dark) !important;
    box-shadow: 0 0 0 3px rgba(52, 127, 182, 0.2);
}

/* Secondary badge - WCFCB branded */
.badge-secondary {
    background-color: var(--wcfcb-secondary) !important;
    color: #ffffff !important;
    border-color: var(--wcfcb-secondary-dark);
}

.badge-secondary:hover {
    background-color: var(--wcfcb-secondary-dark) !important;
    box-shadow: 0 0 0 3px rgba(237, 134, 67, 0.2);
}

/* Success badge */
.badge-success {
    background-color: #16a34a !important;
    color: #ffffff !important;
    border-color: #15803d;
}

.badge-success:hover {
    background-color: #15803d !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

/* Danger badge */
.badge-danger {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: #b91c1c;
}

.badge-danger:hover {
    background-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* Warning badge */
.badge-warning {
    background-color: #f59e0b !important;
    color: #92400e !important;
    border-color: #d97706;
}

.badge-warning:hover {
    background-color: #d97706 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* Info badge */
.badge-info {
    background-color: #0891b2 !important;
    color: #ffffff !important;
    border-color: #0e7490;
}

.badge-info:hover {
    background-color: #0e7490 !important;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2);
}

/* Light badge - better contrast */
.badge-light, .badge-default {
    background-color: #f8fafc !important;
    color: #374151 !important;
    border-color: #d1d5db;
}

.badge-light:hover, .badge-default:hover {
    background-color: #e2e8f0 !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

/* Dark badge */
.badge-dark {
    background-color: #1f2937 !important;
    color: #ffffff !important;
    border-color: #111827;
}

.badge-dark:hover {
    background-color: #111827 !important;
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.2);
}

/* ========================================
   ACCESSIBILITY & DARK THEME SUPPORT
   ======================================== */

/* Dark theme adjustments */
[data-theme="dark"] .indicator-pill.gray,
[data-theme="dark"] .indicator-pill.grey {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563;
}

[data-theme="dark"] .badge-light,
[data-theme="dark"] .badge-default {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563;
}

/* Focus states for accessibility */
.indicator-pill:focus,
.badge:focus {
    outline: 2px solid var(--wcfcb-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .indicator-pill,
    .badge {
        border-width: 2px;
        font-weight: 700;
    }

    .indicator::before,
    .indicator-pill::before,
    .indicator-pill-right::after {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .indicator,
    .indicator-pill,
    .indicator-pill-right,
    .indicator-pill-round,
    .badge {
        transition: none;
    }

    .indicator-pill:hover,
    .indicator-pill-right:hover,
    .indicator-pill-round:hover,
    .badge:hover {
        transform: none;
    }
}

/* Progress bars */
.progress-bar {
    background-color: var(--wcfcb-primary) !important;
}

/* Tabs */
.nav-tabs .nav-link.active {
    color: var(--wcfcb-primary) !important;
    border-bottom-color: var(--wcfcb-primary) !important;
}

.nav-tabs .nav-link:hover {
    color: var(--wcfcb-primary-dark) !important;
}

/* Dropdown menus */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(52, 127, 182, 0.1) !important;
    color: var(--wcfcb-primary) !important;
}

/* LOGIN PAGE STYLING */
/* Target login page specifically */
.login-content {
    background: linear-gradient(135deg, var(--wcfcb-primary) 0%, var(--wcfcb-primary-dark) 100%) !important;
}

.login-content .login-box {
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.login-content .login-box .form-signin-heading {
    color: var(--wcfcb-primary) !important;
    font-weight: 600 !important;
}

.login-content .btn-login {
    background-color: var(--wcfcb-primary) !important;
    border-color: var(--wcfcb-primary) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

.login-content .btn-login:hover,
.login-content .btn-login:focus {
    background-color: var(--wcfcb-primary-dark) !important;
    border-color: var(--wcfcb-primary-dark) !important;
}

.login-content .form-control:focus {
    border-color: var(--wcfcb-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 127, 182, 0.25) !important;
}

.login-content .page-card-head {
    background-color: var(--wcfcb-primary) !important;
    color: #ffffff !important;
}

/* Login page links */
.login-content a {
    color: var(--wcfcb-primary) !important;
}

.login-content a:hover {
    color: var(--wcfcb-primary-dark) !important;
}

/* Brand logo area on login */
.login-content .brand-logo {
    filter: brightness(0) invert(1) !important; /* Make logo white if it's dark */
}

/* Alternative login page selectors for different Frappe versions */
.page-login .login-box,
.page-login .card {
    border-top: 4px solid var(--wcfcb-primary) !important;
}

.page-login .btn-primary {
    background-color: var(--wcfcb-primary) !important;
    border-color: var(--wcfcb-primary) !important;
}

.page-login .btn-primary:hover {
    background-color: var(--wcfcb-primary-dark) !important;
    border-color: var(--wcfcb-primary-dark) !important;
}

/* Website header (if using website theme) */
.website-header {
    background-color: var(--wcfcb-primary) !important;
}

.website-header .navbar-brand,
.website-header .nav-link {
    color: #ffffff !important;
}

.website-header .nav-link:hover {
    color: var(--wcfcb-secondary-light) !important;
}

/* Footer styling */
.web-footer {
    background-color: var(--wcfcb-primary-dark) !important;
    color: #ffffff !important;
}

.web-footer a {
    color: var(--wcfcb-secondary-light) !important;
}

.web-footer a:hover {
    color: #ffffff !important;
}


/* Login page specific fixes */
.for-login .page-card .btn.btn-primary,
.for-login .page-card .btn-primary {
  background-color: var(--wcfcb-primary) !important;
  color: #ffffff !important;
  border-color: var(--wcfcb-primary-dark) !important;
}
.for-login .page-card .btn.btn-primary:hover,
.for-login .page-card .btn-primary:hover {
  background-color: var(--wcfcb-primary-dark) !important;
}

/* Make forgot password/link readable on any background */
.for-login .page-card .page-card-body .forgot-password-message,
.for-login .page-card .page-card-body .forgot-password-message a {
  color: #0f172a !important; /* near-black for light mode */
  text-decoration: underline;
}

/* ========================================
   Notification Bell Icon Enhancements
   ======================================== */

/* Make bell icon slightly bigger and always white */
.navbar .dropdown-notifications .notifications-icon svg.es-icon,
.navbar .dropdown-notifications .notifications-seen svg.es-icon,
.navbar .dropdown-notifications .notifications-unseen svg.es-icon {
    width: 22px !important;
    height: 22px !important;
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

/* Pulse animation keyframes */
@keyframes wcfcb-bell-pulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }
}

/* Apply pulse when there are unseen notifications */
.navbar .dropdown-notifications .notifications-unseen svg.es-icon {
    animation: wcfcb-bell-pulse 1.5s ease-in-out infinite;
}