/* File located at: \Wevo-Dev\Wevo-Shared\css\WevoCSS.css */

:root {
    /* Modern Professional Palette */
    --brand-primary: #0f4c75; /* Deep professional blue */
    --brand-secondary: #3282b8; /* Brighter accent blue */
    --brand-tertiary: #00a8cc; /* Cyan accent */
    --text-dark: #2c3e50; /* Near-black for primary text */
    --text-muted: #6c757d; /* Gray for secondary text */
    --bg-main: #f8f9fa; /* Light gray background */
    --bg-card: #ffffff; /* White card backgrounds */
    --border-subtle: #e9ecef; /* Light borders */
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-dark);
}

h3 {
    color: var(--brand-primary) !important;
}

/* --- Layout & Containers --- */
.container {
    max-width: 1500px; /* Prevent overly wide layouts on huge screens */
}

.content-box {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 2.5rem;
    margin-bottom: 2rem;
}

/* --- navbar Modernization --- */
.navbar-light .navbar-brand {
    font-weight: 700;
    color: var(--brand-primary) !important;
    font-size: 1.3rem;
}

.navbar-light .nav-link {
    color: var(--text-dark) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: color 0.2s;
}

.navbar-light .nav-link:hover,
.navbar-light .nav-link.active {
    color: var(--brand-secondary) !important;
}

/* === DROPDOWN STYLES === */

/* --- Standard Dropdown Menu --- */
.dropdown-menu {
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-radius: 10px;
    padding: 0.5rem;
}

/* --- Dropdown Items --- */
.dropdown-item {
    border-radius: 6px;
    padding: 0.6rem 1rem;
    font-weight: 500;
    color: var(--text-dark);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.dropdown-item:hover {
    background-color: var(--bg-main);
    color: var(--brand-secondary);
}

.dropdown-item:active {
    background-color: var(--brand-primary);
    color: white;
}

.dropdown-divider {
    border-top-color: var(--border-subtle);
}

/* --- Node and Level Dropdown Standards --- */

/* Compact dropdown items for tables and tight spaces */
.dropdown-item.small,
.dropdown-compact .dropdown-item {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.3;
}

/* Standard dropdown items (used in most contexts) */
.dropdown-item:not(.small) {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.3;
}

/* Override: compact takes priority over standard */
.dropdown-compact .dropdown-item:not(.small) {
    padding: 0.0rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.3;
}

/* Extra padding for primary navigation dropdowns */
.dropdown-item.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* --- Dropdown Button Styles --- */

/* Standard white dropdown button (for level/node selectors) */
.btn-white {
    background-color: #ffffff;
    border: 1px solid var(--border-subtle);
    color: var(--text-dark);
}

.btn-white:hover {
    background-color: var(--bg-main);
    border-color: #cbd5e0;
    color: var(--text-dark);
}

.btn-white:focus,
.btn-white:active {
    background-color: var(--bg-main);
    border-color: var(--brand-secondary);
    color: var(--text-dark);
    box-shadow: 0 0 0 0.25rem rgba(15, 76, 117, 0.15);
}

.btn-white.dropdown-toggle::after {
    margin-left: 0.5em;
}

/* Dropdown button with shadow (standard for node/level selectors) */
.dropdown > .btn.shadow-sm,
.dropdown > button.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* --- Scrollable Dropdown Menus --- */

/* Standard scrollable dropdown (200px - for level lists) */
.dropdown-menu[style*="max-height: 200px"],
.dropdown-menu[style*="max-height:200px"] {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 var(--bg-main);
}

/* Extended scrollable dropdown (300px - for node lists) */
.dropdown-menu[style*="max-height: 300px"],
.dropdown-menu[style*="max-height:300px"] {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 var(--bg-main);
}

/* Webkit scrollbar styling for dropdown menus */
.dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: var(--bg-main);
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background-color: #a0aec0;
}

/* --- Special Dropdown States --- */

/* Loading state for dropdown items */
.dropdown-item.disabled,
.dropdown-item:disabled {
    opacity: 0.6;
    pointer-events: none;
    color: var(--text-muted);
}

/* Error state for dropdown items */
.dropdown-item.text-danger {
    color: #dc3545 !important;
}

/* --- Node Display Formatting in Dropdowns --- */

/* Brand primary colour for level prefixes (e.g., "L3" in "L3 - Cost Centre") */
.dropdown-item .text-brand-primary,
.dropdown-item span.text-brand-primary {
    color: var(--brand-primary);
    font-weight: 700;
}

/* Node count badges in dropdown items */
.dropdown-item .badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    margin-left: 0.5rem;
}

/* Small text for secondary info in dropdown items */
.dropdown-item small {
    display: block;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* --- Parent Dropdown Menu (Node Selection) --- */
.parent-dropdown-menu {
    /* Inherits standard dropdown-menu styles */
    /* Custom identifier for JavaScript targeting */
}

/* --- Right-Aligned Dropdown Menus --- */
.dropdown-menu-end {
    right: 0;
    left: auto;
}

/* --- Input Group Dropdowns --- */

/* Dropdown button in input groups (for node search) */
.input-group .btn.dropdown-toggle {
    border-left: none;
}

.input-group .form-control:focus + .btn.dropdown-toggle {
    border-color: var(--brand-secondary);
}

/* Dropdown menu attached to input groups */
.input-group .dropdown-menu {
    margin-top: 0.125rem;
}

/* --- Full-Width Dropdown Menus --- */
.dropdown-menu.w-100 {
    width: 100% !important;
    min-width: 100%;
}

/* --- Dropdown Menu Borders --- */
.dropdown-menu.border-0 {
    border: none;
}

/* --- Dropdown Shadows --- */
.dropdown-menu.shadow {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.dropdown-menu.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* --- Responsive Dropdown Behaviour --- */

/* Ensure dropdowns don't overflow on mobile */
@media (max-width: 576px) {
    .dropdown-menu {
        max-width: calc(100vw - 2rem);
    }
    
    .dropdown-menu[style*="max-height"] {
        max-height: 250px !important;
    }
}

/* --- Accessibility Enhancements --- */

/* Focus styles for dropdown items (keyboard navigation) */
.dropdown-item:focus {
    outline: 2px solid var(--brand-secondary);
    outline-offset: -2px;
    background-color: var(--bg-main);
    color: var(--brand-secondary);
}

/* Active state for dropdown toggle button */
.dropdown-toggle.show,
.dropdown.show > .dropdown-toggle {
    background-color: var(--bg-main);
    border-color: var(--brand-secondary);
}

/* --- Node/Level Selector Specific Styles --- */

/* Hidden input fields that work with dropdown selections */
input[type="hidden"][id*="level"],
input[type="hidden"][id*="Level"],
input[type="hidden"][id*="node"],
input[type="hidden"][id*="Node"] {
    /* Styles for debugging purposes - normally hidden */
}

/* Form control styling when part of dropdown pattern */
.form-control[id*="nodeInput"],
.form-control[id*="levelInput"],
.form-control[id*="nodeSearchInput"] {
    font-weight: 500;
}

/* --- Level Selector Display --- */

/* Button text layout for level selectors */
.btn.text-start {
    text-align: left !important;
}

.btn.w-100 {
    width: 100%;
}

/* --- Dropdown Animation --- */

/* Smooth dropdown open/close animation */
.dropdown-menu {
    animation: dropdownFadeIn 0.15s ease-in;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Dropdown Menu Positioning --- */

/* Ensure dropdown doesn't get cut off by parent containers */
.dropdown-menu {
    z-index: 1050;
}

/* --- Special Context Dropdowns --- */

/* Node suggestions dropdown (autocomplete) */
#nodeSuggestions,
#levelSuggestions,
[id*="Suggestions"] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Empty state styling for dropdowns */
.dropdown-menu:empty::after {
    content: "No options available";
    display: block;
    padding: 0.6rem 1rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

/* --- Table Styles --- */
.table-responsive {
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    overflow: hidden; /* Ensures rounded corners on the table itself */
}

.table {
    margin-bottom: 0; /* Flush fit in container */
}

.table thead th {
    background-color: #f8f9fa;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    border-bottom: 2px solid var(--border-subtle);
    padding: 0.65rem 0.75rem;
    position: relative;
    cursor: pointer;
}

.table tbody tr {
    transition: background-color 0.2s ease-in-out;
    border-bottom: 1px solid var(--border-subtle);
}

.table tbody tr:last-child {
    border-bottom: none;
}

.table tbody tr:hover {
    background-color: #f1f5f9 !important;
}

.table td {
    vertical-align: middle;
    padding: 0.4rem 0.60rem;
    font-size: 0.95rem;
    color: var(--text-dark);
}

/* Primary Item Links in tables */
.table td a.btn-outline-primary, 
.table td a.btn-outline-primary.fw-bold {
    border: none;
    color: var(--brand-primary);
    text-align: left;
    padding: 0;
    font-weight: 700 !important;
    background: transparent;
    font-size: 1rem;
    text-decoration: none;
}

.table td a.btn-outline-primary:hover {
    color: var(--brand-secondary);
    background: transparent;
    text-decoration: underline;
}

/* --- Action Menus (Kebab) --- */
.action-menu-btn {
    color: var(--text-muted);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    border: 1px solid transparent;
}

.action-menu-btn:hover, 
.dropdown.show .action-menu-btn {
    background-color: #e9ecef;
    color: var(--text-dark);
    border-color: var(--border-subtle);
}

.dropdown-item.text-danger:hover {
    background-color: #fee2e2; /* Light red hover for delete */
    color: #c53030;
}

/* --- Badges & Status --- */
/* Modern "subtle" badges */
.badge-subtle-success { background-color: #d1fae5; color: #065f46; }
.badge-subtle-secondary { background-color: #f3f4f6; color: #4b5563; }
.badge-subtle-warning { background-color: #fef3c7; color: #92400e; }
.badge-subtle-danger { background-color: #fee2e2; color: #991b1b; }
.badge-subtle-primary { background-color: #dbeafe; color: #1e40af; }

/* Overrides for standard Bootstrap badges if used */
.badge.bg-light.text-dark {
    background-color: var(--bg-main) !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--border-subtle) !important;
    font-weight: 500;
}

/* --- Pagination --- */
.pagination-container {
    margin-top: 2rem;
}
.pagination .page-link {
    color: var(--brand-primary);
    border: 1px solid var(--border-subtle);
    margin: 0 2px;
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
}

.pagination .page-link:hover {
    background-color: var(--bg-main);
    border-color: var(--border-subtle);
    color: var(--brand-secondary);
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

/* --- Modals --- */
.modal-content {
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 12px;
}
.modal-header {
    border-bottom: 1px solid var(--border-subtle);
    padding: 1.5rem;
}
.modal-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 1.5rem;
    background-color: var(--bg-main);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* --- Utilities --- */
.truncate {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
}

.text-muted {
    color: #868e96 !important; /* Slightly lighter muted text */
}

.resizer {
    position: absolute;
    top: 0; right: 0; width: 5px; cursor: col-resize; height: 100%;
    opacity: 0;
    transition: opacity 0.2s;
}
thead th:hover .resizer { opacity: 1; background-color: var(--brand-secondary); }

/* --- Node Display Styles --- */
/* Slate grey styling for node ID input fields when node has no parent */
.form-control.no-parent-node-input,
input.no-parent-node-input { 
    background-color: #e9ecef !important; 
    border-color: #708090 !important; 
    color: #495057 !important;
}

.form-control.no-parent-node-input:focus,
input.no-parent-node-input:focus {
    background-color: #e9ecef !important; 
    border-color: #708090 !important; 
    color: #495057 !important;
    box-shadow: 0 0 0 0.25rem rgba(112, 128, 144, 0.25) !important;
}

.form-control.no-parent-node-input:disabled,
.form-control.no-parent-node-input[readonly],
input.no-parent-node-input:disabled,
input.no-parent-node-input[readonly] {
    background-color: #dee2e6 !important;
    border-color: #708090 !important;
}

.financial-table {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.financial-table td {
text-align: right;
white-space: pre;
padding: 4px 12px;
}

/* --- Currency Cell Decimal Alignment --- */
.fc-cell { display: flex; justify-content: flex-end; align-items: center; }
.fc-int  { flex: 1 1 auto; text-align: right; }
.fc-dec  { width: 3ch; flex-shrink: 0; text-align: left; }
.fc-sfx  { width: 3ch; flex-shrink: 0; }
.fc-uf   { display: block; text-align: right; padding-right: 2ch; }
.nodata  { font-style: italic; }

/* Base Colors */
.debit { color: #c62828; font-weight: 500; }
.credit { color: #2e7d32; font-weight: 500; }

/* Status Styles */
.underflow {
font-style: italic;
font-size: 0.9em;
}

.placeholder {
color: #bdbdbd;
}

.neutral {
color: #37474f;
}