/* CSS Variables for Theming */
:root {
    /* Light Mode Colors */
    --gradient-start: #667eea;
    --gradient-end: #764ba2;
    --app-bg: white;
    --text-color-dark: #2d3748;
    --text-color-medium: #4a5568;
    --text-color-light: #8e9aaf;
    --border-color: #e1e5e9;
    --input-bg: #f8f9fa;
    --input-focus-border: #667eea;
    --add-btn-gradient-start: #48bb78;
    --add-btn-gradient-end: #38a169;
    --remove-btn-bg: #fed7d7;
    --remove-btn-color: #e53e3e;
    --tab-bg: #f1f5f9;
    --tab-text-color: #64748b;
    --tab-active-bg: white;
    --tab-active-text: #667eea;
    --equal-info-bg-start: #f0f9ff;
    --equal-info-bg-end: #e0f2fe;
    --equal-info-border: #0ea5e9;
    --equal-title-color: #0c4a6e;
    --equal-subtitle-color: #0369a1;
    --equal-amount-color: #0ea5e9;
    --slider-track: #e2e8f0;
    --pie-chart-default-bg: #e2e8f0;
    --summary-border: #f1f1f1;
    --over-allocated-color: #fdc500;
    /* Yellow for over-allocation */
}

/* Dark Mode Colors */
body.dark-mode {
    --gradient-start: #2d3748;
    --gradient-end: #1a202c;
    --app-bg: #2d3748;
    --text-color-dark: #e2e8f0;
    --text-color-medium: #a0aec0;
    --text-color-light: #718096;
    --border-color: #4a5568;
    --input-bg: #4a5568;
    --input-focus-border: #9f7aea;
    --add-btn-gradient-start: #38a169;
    --add-btn-gradient-end: #2f855a;
    --remove-btn-bg: #a04444;
    --remove-btn-color: #fed7d7;
    --tab-bg: #4a5568;
    --tab-text-color: #cbd5e0;
    --tab-active-bg: #2d3748;
    --tab-active-text: #9f7aea;
    --equal-info-bg-start: #2a4365;
    --equal-info-bg-end: #1a365d;
    --equal-info-border: #63b3ed;
    --equal-title-color: #e2e8f0;
    --equal-subtitle-color: #90cdf4;
    --equal-amount-color: #63b3ed;
    --slider-track: #718096;
    --pie-chart-default-bg: #4a5568;
    --summary-border: #2d3748;
    --over-allocated-color: #d69e2e;
    /* Darker yellow for over-allocation */
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    transition: background 0.3s ease;
}

/* App Container */
.app-container {
    background: var(--app-bg);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 100%;
    max-width: 500px;
    animation: slideUp 0.6s ease-out;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Slide Up Animation for App Container */
@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* App Header */
.app-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

/* App Title */
.app-title {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--input-focus-border), var(--gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    transition: background 0.3s ease;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-color-medium);
    transition: color 0.3s ease;
}

.dark-mode-toggle:hover {
    color: var(--input-focus-border);
}

/* Bill Section */
.bill-section {
    margin-bottom: 30px;
}

/* Section Title */
.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease;
}

/* Section Icon (e.g., currency, users) */
.section-icon {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--input-focus-border), var(--gradient-end));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
    transition: background 0.3s ease;
}

/* Input Row Layout */
.input-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

/* Input Group */
.input-group {
    flex: 1;
    position: relative;
}

/* Input Field Styling */
.input-field {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: var(--input-bg);
    color: var(--text-color-dark);
}

/* Input Field Focus State */
.input-field:focus {
    outline: none;
    border-color: var(--input-focus-border);
    background: var(--app-bg);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.1);
}

/* Add Button Styling (Symbolic) */
.add-btn {
    padding: 15px 25px;
    background: linear-gradient(135deg, var(--add-btn-gradient-start), var(--add-btn-gradient-end));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 24px;
    /* Larger font size for plus sign */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    /* Adjust line height for better centering */
}

/* Add Button Hover State */
.add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(72, 187, 120, 0.3);
}

/* Contributors List Container */
.contributors-list {
    margin-top: 20px;
}

/* Individual Contributor Item */
.contributor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--input-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    /* Indicate clickable */
}

/* Contributor Item Hover State */
.contributor-item:hover {
    border-color: var(--input-focus-border);
    background: var(--app-bg);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Selected Contributor Item */
.contributor-item.selected {
    border-color: var(--tab-active-text);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    background: rgba(102, 126, 234, 0.05);
}

/* Contributor Info Group */
.contributor-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

/* Contributor Avatar (first letter of name) */
.contributor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    transition: background 0.3s ease;
}

/* Contributor Details */
.contributor-details {
    flex: 1;
}

/* Contributor Name */
.contributor-name {
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

/* Contributor Current Amount (display only) */
.contributor-current-amount {
    font-size: 14px;
    color: var(--input-focus-border);
    font-weight: 500;
}

/* Remove Button */
.remove-btn {
    background: var(--remove-btn-bg);
    color: var(--remove-btn-color);
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease, background 0.3s ease, color 0.3s ease;
}

.remove-btn:hover {
    opacity: 0.8;
}

/* Contribution Summary Section */
.contribution-summary {
    background: var(--app-bg);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    border: 2px solid var(--border-color);
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Summary Item Row */
.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--summary-border);
    font-weight: 500;
    color: var(--text-color-medium);
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* Last Summary Item (Total/Remaining) */
.summary-item:last-child {
    border-bottom: none;
    font-weight: 600;
    font-size: 18px;
    color: var(--text-color-dark);
}

/* Split Method Tabs Container */
.split-method-tabs {
    display: flex;
    background: var(--tab-bg);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 25px;
    gap: 4px;
    transition: background 0.3s ease;
}

/* Tab Button */
.tab-btn {
    flex: 1;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tab-text-color);
    cursor: pointer;
    transition: all 0.3s ease, color 0.3s ease;
}

/* Active Tab Button State */
.tab-btn.active {
    background: var(--tab-active-bg);
    color: var(--tab-active-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Tab Button Hover State (not active) */
.tab-btn:hover:not(.active) {
    color: var(--text-color-dark);
    background: rgba(255, 255, 255, 0.2);
    /* Slight hover effect */
}

/* Tab Content Section */
.tab-content {
    animation: fadeIn 0.3s ease;
}

/* Hidden Tab Content */
.tab-content.hidden {
    display: none;
}

/* Fade In Animation for Tab Content */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Equal Split Info Box */
.equal-split-info {
    background: linear-gradient(135deg, var(--equal-info-bg-start), var(--equal-info-bg-end));
    border: 2px solid var(--equal-info-border);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Equal Split Display Layout */
.equal-split-display {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Split Icon (e.g., scales emoji) */
.split-icon {
    font-size: 48px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

/* Split Details Text */
.split-details {
    flex: 1;
}

/* Split Title */
.split-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--equal-title-color);
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

/* Split Subtitle */
.split-subtitle {
    font-size: 14px;
    color: var(--equal-subtitle-color);
    margin-bottom: 15px;
    opacity: 0.8;
    transition: color 0.3s ease;
}

/* Amount Section (contains sliders) */
.amount-section {
    background: var(--input-bg);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    transition: background 0.3s ease;
}

/* Amount Section Title */
.amount-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 20px;
    text-align: center;
    transition: color 0.3s ease;
}

/* Dynamic Contribution Editor */
.dynamic-contri-editor {
    background: var(--app-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    /* Increased padding */
    margin-top: 15px;
    display: none;
    /* Hidden by default, shown when a contributor is selected */
    flex-direction: column;
    gap: 15px;
    /* Increased gap */
    animation: fadeIn 0.3s ease-out;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* Added subtle shadow */
    transition: all 0.3s ease;
}

.dynamic-contri-editor.active {
    display: flex;
}

.dynamic-contri-editor .slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 5px;
}

.dynamic-contri-editor .slider-value {
    color: var(--input-focus-border);
    font-size: 1.1em;
}

.dynamic-contri-editor .contributor-input-field-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    background: var(--input-bg);
    /* Use input background for the wrapper */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 15px;
    /* Adjust padding */
    transition: background 0.3s ease, border-color 0.3s ease;
}

.dynamic-contri-editor .contributor-input-field-wrapper:focus-within {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.dynamic-contri-editor .currency-prefix {
    color: var(--text-color-medium);
    margin-right: 8px;
    /* Increased margin */
    font-size: 1.1em;
}

.dynamic-contri-editor .contributor-amount-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    /* Larger font size */
    color: var(--text-color-dark);
    /* Use dark text color */
    font-weight: 500;
}

.dynamic-contri-editor .contributor-slider {
    width: 100%;
    height: 10px;
    /* Thicker slider */
    border-radius: 5px;
    background: var(--slider-track);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: grab;
    transition: background 0.3s ease;
}

.dynamic-contri-editor .contributor-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    /* Larger thumb */
    height: 24px;
    /* Larger thumb */
    border-radius: 50%;
    background: linear-gradient(135deg, var(--input-focus-border), var(--gradient-end));
    cursor: grab;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
    /* Stronger shadow */
    transition: all 0.2s ease, background 0.3s ease;
}

.dynamic-contri-editor .contributor-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--input-focus-border), var(--gradient-end));
    cursor: grab;
    border: none;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
    transition: background 0.3s ease;
}

.dynamic-contri-editor .contributor-slider:active::-webkit-slider-thumb,
.dynamic-contri-editor .contributor-slider:active::-moz-range-thumb {
    cursor: grabbing;
}


/* Pie Chart Section */
.pie-section {
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    /* Use flexbox for chart and legend */
    flex-direction: column;
    /* Stack chart then legend */
    align-items: center;
    gap: 20px;
    /* Space between chart and legend */
}

/* Pie Chart Title */
.pie-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 0;
    /* Adjust margin */
    transition: color 0.3s ease;
}

/* Pie Chart Container */
.pie-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Take full width */
    max-width: 250px;
    /* Max width for square aspect */
    aspect-ratio: 1 / 1;
    /* Keep it square */
    margin-bottom: 0;
    /* Adjust margin */
}

/* Pie Chart Itself */
.pie-chart {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    /* Important for conic-gradient */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background: var(--pie-chart-default-bg);
    /* Default background for empty chart */
}

/* Pie Legend Container */
.pie-legend {
    display: flex;
    flex-direction: column;
    /* Stack legend items */
    align-items: flex-start;
    /* Align text to the left */
    gap: 10px;
    /* Reduced gap between items */
    padding: 15px;
    /* Add some padding */
    background: var(--input-bg);
    border-radius: 12px;
    border: 2px solid var(--border-color);
    width: 100%;
    max-width: 300px;
    /* Control legend width */
    text-align: left;
    /* Ensure text alignment */
}

/* Individual Legend Item */
.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Gap between swatch and text */
    font-size: 15px;
    /* Slightly larger font */
    font-weight: 500;
    color: var(--text-color-dark);
    /* Darker text for readability */
    transition: color 0.3s ease;
}

/* Legend Color Swatch */
.legend-color {
    width: 18px;
    /* Larger swatch */
    height: 18px;
    /* Larger swatch */
    border-radius: 50%;
    flex-shrink: 0;
    /* Prevent shrinking */
    transition: background 0.3s ease;
}

/* Main "Calculate Split" Button */
.go-button {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, var(--input-focus-border), var(--gradient-end));
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    /* Space between save button and history */
}

/* Go Button Hover State */
.go-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
}

/* Go Button Active State */
.go-button:active {
    transform: translateY(-1px);
}

/* Go Button Shine Effect */
.go-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

/* Go Button Shine Effect on Hover */
.go-button:hover::before {
    left: 100%;
}

/* Bill History Section */
.bill-history-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    /* Separator */
}

.bill-history-section .section-title {
    margin-bottom: 20px;
}

.bill-history-list {
    max-height: 400px;
    /* Max height for scrollable history */
    overflow-y: auto;
    /* Enable scrolling */
    padding-right: 10px;
    /* For scrollbar space */
}

.bill-history-item {
    background: var(--input-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s ease;
}

.bill-history-item:hover {
    border-color: var(--input-focus-border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.bill-history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    /* Bolder description */
    color: var(--text-color-dark);
    font-size: 18px;
    /* Larger description font */
}

.bill-history-item-header span:last-child {
    font-size: 1.1em;
    /* Slightly larger amount */
    color: var(--input-focus-border);
    /* Highlight amount */
}

.bill-history-item-details {
    font-size: 14px;
    color: var(--text-color-medium);
    display: flex;
    /* Use flex for details */
    flex-direction: column;
    /* Stack details */
    gap: 5px;
    /* Small gap between detail lines */
}

.bill-history-item-details strong {
    color: var(--text-color-dark);
    font-weight: 600;
}

.bill-history-item-details div {
    /* Styling for each line in details */
    display: flex;
    align-items: center;
    gap: 8px;
    /* Gap between icon and text */
}

.bill-history-item-details .detail-icon {
    font-size: 16px;
    /* Icon size */
    color: var(--text-color-light);
    /* Subtle icon color */
}


.clear-history-btn {
    background: var(--remove-btn-bg);
    color: var(--remove-btn-color);
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.clear-history-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(229, 62, 62, 0.2);
}


/* Media Queries for Responsiveness */
@media (max-width: 600px) {
    .input-row {
        flex-direction: column;
        gap: 15px;
    }

    .pie-legend {
        gap: 10px;
        /* Adjust gap for smaller screens */
        padding: 10px;
        max-width: 100%;
    }

    .pie-section {
        flex-direction: column;
        /* Ensure stack on small screens */
    }
}