@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

/* Base & Transitions */
body { 
    font-family: 'Inter', sans-serif; 
}

/* --- HIDE NUMBER SPINNERS (ARROWS) --- */
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Common Card Style */
.card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 1.25rem;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.section-header {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

/* High Contrast Inputs for Dark Mode */
.input-standard, .split-input {
    background-color: white;
    color: #1f2937;
    border-color: #d1d5db;
    transition: all 0.2s;
    outline: none;
}

.input-standard:focus, .split-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    z-index: 10;
}

/* Addons for Split Inputs - Modified for tighter spacing */
.input-addon-left, .input-addon-right {
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #6b7280;
    display: flex;
    align-items: center;
}

.input-addon-left {
    border-right: 0;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    padding: 0.5rem 0.25rem 0.5rem 0.5rem; /* Reduced right padding */
}

.input-addon-right {
    border-left: 0;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    padding: 0.5rem 0.5rem 0.5rem 0.1rem; /* Reduced left padding */
}

.split-input {
    width: 100%;
    padding: 0.5rem 0.1rem 0.5rem 0.25rem; /* Reduced side paddings */
    border: 1px solid #d1d5db;
    border-left: 0;
    border-right: 0;
}

/* Range Slider Customization */
input[type=range] { 
    -webkit-appearance: none; 
    height: 6px; 
    background: #e5e7eb; 
    border-radius: 5px; 
    outline: none; 
    cursor: grab; 
}

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 18px; 
    height: 18px; 
    border-radius: 50%; 
    background: #2563eb; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
    transition: transform 0.1s, background .15s; 
    margin-top: -6px; /* Align thumb */
}

input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type=range].green-slider::-webkit-slider-thumb { background: #10b981; }

/* Red Slider for Locked State */
input[type=range].red-slider::-webkit-slider-thumb { background: #ef4444; }
input[type=range].red-slider { background: #fee2e2; cursor: not-allowed; }
.dark input[type=range].red-slider { background: #7f1d1d; }

input[type=range]:active { cursor: grabbing; }
input[type=range]:disabled { cursor: not-allowed; opacity: 0.7; }

/* Buttons */
.btn-primary {
    background-color: #1f2937;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 700;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-primary:hover { background-color: #111827; }

.btn-secondary {
    background-color: white;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 700;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-secondary:hover { background-color: #f9fafb; }
.icon-btn {
    padding: 0.5rem;
    border-radius: 9999px;
    background: white;
    color: #4b5563;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.icon-btn:hover { transform: scale(1.1); }

/* Toast */
#toast { 
    visibility: hidden; 
    min-width: 250px; 
    background-color: #10b981; 
    color: #fff; 
    text-align: center; 
    border-radius: 4px; 
    padding: 16px; 
    position: fixed; 
    z-index: 100; 
    left: 50%; 
    bottom: 30px; 
    transform: translateX(-50%); 
    font-weight: bold; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
}
#toast.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; }

@keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} }
@keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }

/* Table Highlights */
.pmi-removed-row { background-color: #d1fae5 !important; border-left: 4px solid #10b981; }
.payoff-row { background-color: #bfdbfe !important; border-left: 4px solid #2563eb; }
.adjustment-row { background-color: #fef3c7 !important; }

/* DARK MODE OVERRIDES */
.dark .card { background-color: #1f2937; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); }

.dark .input-standard, .dark .split-input { 
    background-color: #374151; 
    color: #ffffff; 
    border-color: #6b7280; 
}
.dark .input-addon-left, .dark .input-addon-right {
    background-color: #374151;
    border-color: #6b7280;
    color: #9ca3af;
}
.dark .split-input:focus, .dark .input-standard:focus {
    border-color: #3b82f6;
    background-color: #4b5563;
}

.dark input[type=range] { background: #4b5563; }
.dark .btn-primary { background-color: #2563eb; color: #fff; }
.dark .btn-primary:hover { background-color: #1d4ed8; }
.dark .btn-secondary { background-color: #374151; border-color: #4b5563; color: #e5e7eb; }
.dark .btn-secondary:hover { background-color: #4b5563; }
.dark .icon-btn { background-color: #374151; color: #e5e7eb; }
.dark .icon-btn.theme-toggle { color: #fbbf24; }

.dark .pmi-removed-row { background-color: rgba(16, 185, 129, 0.25) !important; border-left-color: #34d399; }
.dark .payoff-row { background-color: rgba(37, 99, 235, 0.25) !important; border-left-color: #60a5fa; }
.dark .adjustment-row { background-color: rgba(245, 158, 11, 0.25) !important; }

/* TOGGLE SWITCH */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.toggle-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2563eb; /* Blue for enabled */
}

input:focus + .slider {
    box-shadow: 0 0 1px #2563eb;
}

input:checked + .slider:before {
    transform: translateX(16px);
}

.slider.round {
    border-radius: 20px;
}

.slider.round:before {
    border-radius: 50%;
}

/* GLOSSARY TOOLTIP */
.help-term {
    border-bottom: 1px dotted #9ca3af;
    cursor: help;
}

#glossaryTooltip {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    background-color: #1f2937;
    color: #e5e7eb;
    padding: 0.75rem;
    border-radius: 0.5rem;
    width: 250px;
    font-size: 0.75rem;
    z-index: 9999;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s;
    pointer-events: none;
    border: 1px solid #374151;
}

/* FLOATING BUBBLE */
#floatingBubble {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: white;
    border-left: 5px solid #10b981;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 12px 20px;
    z-index: 50;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s;
}
.dark #floatingBubble {
    background: #1f2937;
    border-left-color: #34d399;
    color: white;
}